diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 31dafdf9..4c163391 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -20,14 +20,14 @@ jobs: # Job steps steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: fetch-depth: 0 - name: Setup node version - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 - name: Setup pnpm uses: pnpm/action-setup@v4 @@ -42,7 +42,7 @@ jobs: # 👇 Adds Chromatic as a step in the workflow - name: Publish to Chromatic - uses: chromaui/action@v1 + uses: chromaui/action@latest # Chromatic GitHub Action options with: # 👇 Chromatic projectToken, refer to the manage page to obtain it. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 0cf5cd9f..2ac277c3 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,11 +9,11 @@ jobs: strategy: matrix: os: [ubuntu-latest] - node: [18] + node: [20] steps: - name: Checkout 🛎 - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Setup pnpm uses: pnpm/action-setup@v4 @@ -21,12 +21,12 @@ jobs: version: 9.1.2 - name: Setup node env 🏗 - uses: actions/setup-node@v3.6.0 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node }} - name: Cache ~/.pnpm-store 📦 - uses: actions/cache@v3 + uses: actions/cache@v4 env: cache-name: cache-pnpm-store with: diff --git a/RELEASE-NOTES-V2.md b/RELEASE-NOTES-V2.md index efb4b06b..730178c7 100644 --- a/RELEASE-NOTES-V2.md +++ b/RELEASE-NOTES-V2.md @@ -22,7 +22,7 @@ Here is the list of available components in the Vue and Web-Components version o | --------------------------- | -------------- | -------------- | ---------------- | | Accordion | ✅ | ✅ | | | Accordion-group | ✅ | ✅ | | -| Alert | ✅ | ✅ | | +| Alert | ✅ | ✅ | Design: The `puik-link` has replaced by a Link Button (text variant button) - [see updated stories for use](https://uikit.prestashop.com/?path=/docs/components-alert--docs) | | Avatar | ✅ | ✅ | | | Badge | ✅ | ✅ | | | Breadcrumb | ✅ | ✅ | | diff --git a/docs/package.json b/docs/package.json index 1d57950a..9dd35001 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,7 +21,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "storybook": "^7.6.19", - "vite": "^5.2.11" + "vite": "^5.2.14" }, "dependencies": { "@prestashopcorp/puik-components": "workspace:*", diff --git a/package.json b/package.json index 618cbed7..c2ab8d2d 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "lint-staged": "^15.2.2", "sass": "^1.77.1", "typescript": "^5.4.5", - "vite": "^5.2.11", + "vite": "^5.2.14", "vite-plugin-dts": "^3.9.1", "vitest": "^1.6.0", "vue": "3.3.10" diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts index e0516df4..b5dc215c 100644 --- a/packages/components/alert/src/alert.ts +++ b/packages/components/alert/src/alert.ts @@ -20,19 +20,27 @@ export interface AlertProps { title?: string description?: string variant?: `${PuikAlertVariants}` - disableBorders?: boolean isClosable?: boolean + disableBorders?: boolean buttonLabel?: string - buttonWrapLabel?: boolean linkLabel?: string + buttonWrapLabel?: boolean + leftIconBtn?: string + rightIconBtn?: string + leftIconLink?: string + rightIconLink?: string + internalLink?: string + externalLink?: string ariaLive?: `${PuikAriaLive}` + ariaLabelBtn?: string + ariaLabelLink?: string dataTest?: string } export type AlertEmits = { click: [event: Event] - close: [event: Event] clickLink: [event: Event] + close: [event: Event] }; export type AlertInstance = InstanceType; diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue index 562c4ae3..14b0e661 100644 --- a/packages/components/alert/src/alert.vue +++ b/packages/components/alert/src/alert.vue @@ -42,17 +42,31 @@

- {{ linkLabel }} - + emit('clickLink', event); diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts index 8d323b4d..1c209d53 100644 --- a/packages/components/alert/stories/alert.stories.ts +++ b/packages/components/alert/stories/alert.stories.ts @@ -1,7 +1,8 @@ import { action } from '@storybook/addon-actions'; import { PuikAriaLive } from '@prestashopcorp/puik-components/base/src/common'; -import { PuikAlert, PuikAlertVariants } from '@prestashopcorp/puik-components'; +import { PuikAlert, PuikAlertVariants, PuikButton, PuikLink } from '@prestashopcorp/puik-components'; import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3'; +import { ref } from 'vue'; const alertVariants = Object.values(PuikAlertVariants); const alertVariantsSummary = alertVariants.join('|'); @@ -14,58 +15,176 @@ export default { component: PuikAlert, argTypes: { title: { - description: 'Sets the alert title' + description: 'Sets the alert title', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } }, description: { - description: 'Sets the alert description (also exists as a default slot)' + description: 'Sets the alert description (also exists as a default slot)', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } + }, + buttonLabel: { + description: 'Label of the Action button', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } + }, + linkLabel: { + description: 'Label of the Link button', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } }, variant: { control: 'select', description: 'Sets the alert variant', options: alertVariants, table: { + type: { + summary: alertVariantsSummary + }, defaultValue: { summary: 'success' - }, + } + } + }, + isClosable: { + description: 'Display a close button which emits a `close event` on click', + control: 'boolean', + table: { type: { - summary: alertVariantsSummary + summary: 'boolean' + }, + defaultValue: { + summary: false } } }, disableBorders: { - description: - 'Disable alert borders (only for info, warning, error variants)', + description: 'Disable alert borders', + control: 'boolean', table: { + type: { + summary: 'boolean' + }, defaultValue: { summary: false } } }, - buttonLabel: { - description: 'Label of the button' - }, buttonWrapLabel: { - description: 'Sets the carriage return of the button label', + description: 'Set the carriage return for label of Action and Link buttons', + control: 'boolean', table: { + type: { + summary: 'boolean' + }, defaultValue: { summary: false } } }, - isClosable: { - description: 'Display a close button' - }, default: { - control: 'none', - description: 'Sets the alert description' + description: 'Sets the alert description via the `default slot`. Useful if you want to create a description a little more complex than a simple text and integrate other puik elements like for example a classic `puik-link` (which can be an alternative to the Link button - see example below)' }, - dataTest: { + leftIconBtn: { + description: 'Set icon on the left side of the Action button with a Material Icon name - cf https://fonts.google.com/icons', control: 'text', - description: - 'Sets the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}` `link-${dataTest}`' + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } }, - linkLabel: { - description: 'Label of the link' + rightIconBtn: { + description: 'Set icon on the right side of the Action button with a Material Icon name - cf https://fonts.google.com/icons', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } + }, + leftIconLink: { + description: 'Set icon on the left side of the Link button with a Material Icon name - cf https://fonts.google.com/icons', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } + }, + rightIconLink: { + description: 'Set icon on the right side of the Link button with a Material Icon name - cf https://fonts.google.com/icons', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } + }, + internalLink: { + description: 'Internal link for the Link button (use vue `router-link` under the hood)', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } + }, + externalLink: { + description: 'External link for the Link button (use a native `a` tag link under the hood)', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } }, ariaLive: { description: 'option for "aria-live" attribute', @@ -79,17 +198,63 @@ export default { summary: alertAriaLiveSummary } } + }, + ariaLabelBtn: { + description: 'ARIA label for the Action button', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } + }, + ariaLabelLink: { + description: 'ARIA label for the Link button', + control: 'text', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } + }, + dataTest: { + control: 'text', + description: 'Set the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}` `link-${dataTest}`', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'undefined' + } + } } }, args: { title: 'Title', description: 'This is the description of the success alert.', + buttonLabel: 'Action', + linkLabel: 'Learn more', variant: 'success', + isClosable: false, disableBorders: false, - buttonLabel: 'Button', buttonWrapLabel: false, - isClosable: false, - linkLabel: 'See more' + leftIconBtn: undefined, + rightIconBtn: undefined, + leftIconLink: undefined, + rightIconLink: undefined, + internalLink: undefined, + externalLink: undefined, + ariaLabelBtn: undefined, + ariaLabelLink: undefined, + ariaLive: 'polite', + dataTest: undefined } } as Meta; @@ -123,32 +288,194 @@ export const Default = { source: { code: ` - This is the description of the success alert + + `, + language: 'html' + } + } + } +}; + +export const Variants: StoryObj = { + render: () => ({ + components: { + PuikAlert + }, + template: ` +
+ + + + +
+ ` + }), + + parameters: { + docs: { + source: { + code: ` + -
-
- check_circle -
-

Title

- This is the description of the success alert. + + + + + This a success alert with a title and a description. + + + + + + + + + + `, language: 'html' @@ -157,14 +484,254 @@ export const Default = { } }; -export const buttonWrapLabel: StoryObj = { +export const VariantsWithoutBorder: StoryObj = { + render: () => ({ + components: { + PuikAlert + }, + template: ` +
+ + + + +
+ ` + }), + + parameters: { + docs: { + source: { + code: ` + + + + + + + This a success alert with a title and a description. + + + + + + + + + + + `, + language: 'html' + } + } + } +}; + +export const IsClosable = { + render: () => ({ + components: { + PuikAlert, + PuikButton + }, + setup() { + const showAlert = ref(true); + return { showAlert }; + }, + + template: ` + + + + refresh alert + + ` + }), + + parameters: { + docs: { + source: { + code: ` + + // const showAlert = ref(true) + + + + + + `, + language: 'html' + } + } + } +}; + +export const ButtonWrapLabel: StoryObj = { render: () => ({ components: { PuikAlert }, template: `
- + This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. @@ -175,7 +742,7 @@ export const buttonWrapLabel: StoryObj = { This an alert with a very long description. This an alert with a very long description. - + This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. @@ -197,9 +764,9 @@ export const buttonWrapLabel: StoryObj = { This an alert with a very long description. This an alert with a very long description. @@ -214,8 +781,8 @@ export const buttonWrapLabel: StoryObj = { This an alert with a very long description. This an alert with a very long description. @@ -229,31 +796,61 @@ export const buttonWrapLabel: StoryObj = { -
-
-
check_circle
-
-

buttonWrapLabel to true

- This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. -
+ - -
-
-
-
check_circle
-
-

buttonWrapLabel to false (by default)

- This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. -
+ - -
`, language: 'html' } @@ -261,18 +858,50 @@ export const buttonWrapLabel: StoryObj = { } }; -export const Success: StoryObj = { +export const ActionAndLinkButtonsWithIcon: StoryObj = { render: () => ({ components: { PuikAlert }, + template: ` -
- This a success alert with a title and a description. - This a success alert with only a description. - This a success alert with a title and a description and a button. - This a success alert with a description and a button. -
+
+ + This is the description + + + + This is the description + + + + This is the description + + + + This is the description + +
` }), @@ -280,47 +909,147 @@ export const Success: StoryObj = { docs: { source: { code: ` - - - This a success alert with a title and a description. - + + + This is the description + - -
-
- check_circle -
-

Title

- This a success alert with a title and a description. + + This is the description + + + + This is the description + + + + This is the description + + + + - `, + +
+
+ + + + + + + `, language: 'html' } } } }; -export const Warning: StoryObj = { +export const InternalAndExternalLink = { render: () => ({ components: { - PuikAlert + PuikAlert, + PuikButton }, + setup() { + const showAlert = ref(true); + return { showAlert }; + }, + template: ` -
- This a warning alert with a title and a description. - This a warning alert with disabled borders - This a warning alert with only a description. - This a warning alert with a title and a description and a button. - This a warning alert with a description and a button. -
+
+ + Use vue router-link under the hood + + + + Use native a tag under the hood + +
` }), @@ -330,26 +1059,57 @@ export const Warning: StoryObj = { code: ` + Use vue router-link under the hood + + + - This a warning alert with a title and a description. + Use native a tag under the hood -
-
- warning -
-

Title

- This a warning alert with a title and a description. -
+ + + + `, language: 'html' } @@ -357,19 +1117,36 @@ export const Warning: StoryObj = { } }; -export const Info: StoryObj = { +export const UseDefaultSlotForDescription = { render: () => ({ components: { - PuikAlert + PuikAlert, + PuikButton, + PuikLink + }, + setup() { + const showAlert = ref(true); + return { showAlert }; }, + template: ` -
- This a info alert with a title and a description. - This a info alert with disabled borders - This a info alert with only a description. - This a info alert with a title and a description and a button. - This a info alert with a description and a button. -
+ +
+

+ This is a description writes in the default slot +

+ + use a puik-link in description for example + +
+ ` }), @@ -377,27 +1154,44 @@ export const Info: StoryObj = { docs: { source: { code: ` - + - This a info alert with a title and a description. +
+

+ This is a description writes in the default slot +

+ + use a puik-link in description for example + +
-
-
- info -
-

Title

- This a info alert with a title and a description. -
+ `, language: 'html' @@ -406,19 +1200,52 @@ export const Info: StoryObj = { } }; -export const Danger: StoryObj = { +export const Events = { render: () => ({ components: { PuikAlert }, + setup() { + const eventEmitted = ref('Click on Action, Link or Close button'); + const variant = ref('info'); + const title = ref('Handle Events'); + + const successTriggered = (msg: string) => { + eventEmitted.value = msg; + title.value = msg; + variant.value = 'success'; + setTimeout(() => { + eventEmitted.value = 'Click on Action, Link or Close button'; + title.value = 'Handle Events'; + variant.value = 'info'; + }, 1000); + }; + + const handleClose = () => { + successTriggered('close event triggered !'); + }; + const handleClickAction = () => { + successTriggered('click event triggered !'); + }; + const handleClickLink = () => { + successTriggered('click-link event triggered !'); + }; + return { eventEmitted, title, variant, successTriggered, handleClose, handleClickAction, handleClickLink }; + }, + template: ` -
- This a danger alert with a title and a description. - This a danger alert with disabled borders - This a danger alert with only a description. - This a danger alert with a title and a description and a button. - This a danger alert with a description and a button. -
+ + {{ eventEmitted }} + ` }), @@ -427,27 +1254,48 @@ export const Danger: StoryObj = { source: { code: ` + + - This a info alert with a title and a description. + {{ eventEmitted }} -
-
- danger -
-

Title

- This a danger alert with a title and a description. -
-
- -
+ `, language: 'html' } diff --git a/packages/components/alert/test/alert.spec.ts b/packages/components/alert/test/alert.spec.ts index bfbae6f8..839efa5d 100644 --- a/packages/components/alert/test/alert.spec.ts +++ b/packages/components/alert/test/alert.spec.ts @@ -1,7 +1,7 @@ import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; import { describe, it, expect } from 'vitest'; import { faker } from '@faker-js/faker'; -import { PuikAlert, AlertProps } from '@prestashopcorp/puik-components'; +import { PuikAlert, AlertProps, PuikAlertVariants } from '@prestashopcorp/puik-components'; describe('Alert tests', () => { let wrapper: VueWrapper; @@ -12,6 +12,11 @@ describe('Alert tests', () => { const findDesc = () => wrapper.find('.puik-alert__description'); const findCloseButton = () => wrapper.find('.puik-alert__close'); const findLink = () => wrapper.find('.puik-alert__link'); + const findLeftButtonIcon = () => wrapper.find('.puik-alert__button .puik-button__left-icon'); + const findRightButtonIcon = () => wrapper.find('.puik-alert__button .puik-button__right-icon'); + const findLeftLinkIcon = () => wrapper.find('.puik-alert__link .puik-button__left-icon'); + const findRightLinkIcon = () => wrapper.find('.puik-alert__link .puik-button__right-icon'); + const findIcon = () => wrapper.find('.puik-alert__icon'); const factory = ( props?: AlertProps, @@ -28,16 +33,26 @@ describe('Alert tests', () => { expect(wrapper).toBeTruthy(); }); - it('should display an success alert by default', () => { + it('should display a success alert by default', () => { factory(); expect(findAlert().classes()).toContain('puik-alert--success'); }); it('should display a warning alert', () => { - factory({ variant: 'warning' }); + factory({ variant: PuikAlertVariants.Warning }); expect(findAlert().classes()).toContain('puik-alert--warning'); }); + it('should display a danger alert', () => { + factory({ variant: PuikAlertVariants.Danger }); + expect(findAlert().classes()).toContain('puik-alert--danger'); + }); + + it('should display an info alert', () => { + factory({ variant: PuikAlertVariants.Info }); + expect(findAlert().classes()).toContain('puik-alert--info'); + }); + it('should set the button label wrap to false', () => { factory({ buttonLabel: 'Button', buttonWrapLabel: false }); expect(findButton().classes()).toContain('puik-button--no-wrap'); @@ -51,7 +66,7 @@ describe('Alert tests', () => { }); it('should display a link which emits the clickLink event on click', async () => { - factory({ linkLabel: 'See more' }); + factory({ linkLabel: 'Learn more' }); expect(findLink().exists()).toBeTruthy(); await findLink().trigger('click'); expect(wrapper.emitted('clickLink')).toBeTruthy(); @@ -91,7 +106,7 @@ describe('Alert tests', () => { title: faker.lorem.word(2), description: faker.lorem.sentence(60), buttonLabel: 'Button', - linkLabel: 'See more', + linkLabel: 'Learn more', isClosable: true, dataTest: 'alert' }); @@ -125,4 +140,59 @@ describe('Alert tests', () => { }); expect(findAlert().attributes('aria-live')).toBe('assertive'); }); + + it('should display the correct icon for each variant', () => { + const variants = [PuikAlertVariants.Success, PuikAlertVariants.Warning, PuikAlertVariants.Danger, PuikAlertVariants.Info]; + variants.forEach(variant => { + factory({ variant }); + expect(findIcon().exists()).toBeTruthy(); + }); + }); + + it('should not render optional elements when props are not provided', () => { + factory(); + expect(findButton().exists()).toBeFalsy(); + expect(findLink().exists()).toBeFalsy(); + expect(findCloseButton().exists()).toBeFalsy(); + }); + + it('should set the internal link correctly', () => { + factory({ linkLabel: 'Learn more', internalLink: '/internal' }); + expect(findLink().attributes('to')).toBe('/internal'); + }); + + it('should set the external link correctly', () => { + factory({ linkLabel: 'Learn more', externalLink: 'https://example.com' }); + expect(findLink().attributes('href')).toBe('https://example.com'); + }); + + it('should set the aria-label for the button correctly', () => { + factory({ buttonLabel: 'Button', ariaLabelBtn: 'Button aria label' }); + expect(findButton().attributes('aria-label')).toBe('Button aria label'); + }); + + it('should set the aria-label for the link correctly', () => { + factory({ linkLabel: 'Learn more', ariaLabelLink: 'Link aria label' }); + expect(findLink().attributes('aria-label')).toBe('Link aria label'); + }); + + it('should display the left icon for the button', () => { + factory({ buttonLabel: 'Button', leftIconBtn: 'favorite' }); + expect(findLeftButtonIcon().classes()).toContain('puik-button__left-icon'); + }); + + it('should display the right icon for the button', () => { + factory({ buttonLabel: 'Button', rightIconBtn: 'favorite' }); + expect(findRightButtonIcon().classes()).toContain('puik-button__right-icon'); + }); + + it('should display the left icon for the link', () => { + factory({ linkLabel: 'Learn more', leftIconLink: 'favorite' }); + expect(findLeftLinkIcon().classes()).toContain('puik-button__left-icon'); + }); + + it('should display the right icon for the link', () => { + factory({ linkLabel: 'Learn more', rightIconLink: 'favorite' }); + expect(findRightLinkIcon().classes()).toContain('puik-button__right-icon'); + }); }); diff --git a/packages/theme/src/puik-alert.scss b/packages/theme/src/puik-alert.scss index a3221f54..62f1e1c4 100755 --- a/packages/theme/src/puik-alert.scss +++ b/packages/theme/src/puik-alert.scss @@ -7,30 +7,50 @@ .puik-alert__icon { @apply text-green; } + .puik-button--text{ + &:hover { + @apply bg-green-100; + } + } } &--warning { @apply bg-yellow-50 border-yellow; .puik-alert__icon { @apply text-yellow; } + .puik-button--text{ + &:hover { + @apply bg-yellow-100; + } + } } &--danger { @apply bg-red-50 border-red; .puik-alert__icon { @apply text-red; } + .puik-button--text{ + &:hover { + @apply bg-red-100; + } + } } &--info { @apply bg-blue-50 border-blue; .puik-alert__icon { @apply text-blue; } + .puik-button--text{ + &:hover { + @apply bg-blue-100; + } + } } &--no-borders { @apply border-0; } &__container { - @apply flex flex-col lg:flex-row lg:items-start w-full; + @apply flex flex-col space-y-1 lg:flex-row lg:items-start lg:space-x-1 w-full; } &__content { @apply flex flex-row flex-grow; @@ -54,7 +74,4 @@ &__close { @apply ml-4 cursor-pointer leading-none; } - &__link { - @apply flex-none leading-6 w-fit block ml-9 pl-0 m-2 lg:mx-4 lg:pl-0 lg:truncate lg:max-w-[320px]; - } } diff --git a/playground/package.json b/playground/package.json index e681486c..15a3b738 100644 --- a/playground/package.json +++ b/playground/package.json @@ -20,7 +20,7 @@ "devDependencies": { "@vitejs/plugin-vue": "^4.5.2", "typescript": "^5.3.3", - "vite": "^5.0.8", + "vite": "^5.2.14", "vue-tsc": "^1.8.25" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8fa1f510..f1d796e5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,7 +56,7 @@ importers: version: 20.12.12 '@vitejs/plugin-vue': specifier: ^4.6.2 - version: 4.6.2(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5)) + version: 4.6.2(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5)) '@vitest/coverage-v8': specifier: ^1.6.0 version: 1.6.0(vitest@1.6.0(@types/node@20.12.12)(jsdom@23.2.0)(sass@1.77.1)) @@ -100,11 +100,11 @@ importers: specifier: ^5.4.5 version: 5.4.5 vite: - specifier: ^5.2.11 - version: 5.2.11(@types/node@20.12.12)(sass@1.77.1) + specifier: ^5.2.14 + version: 5.2.14(@types/node@20.12.12)(sass@1.77.1) vite-plugin-dts: specifier: ^3.9.1 - version: 3.9.1(@types/node@20.12.12)(rollup@4.17.2)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1)) + version: 3.9.1(@types/node@20.12.12)(rollup@4.17.2)(typescript@5.4.5)(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1)) vitest: specifier: ^1.6.0 version: 1.6.0(@types/node@20.12.12)(jsdom@23.2.0)(sass@1.77.1) @@ -159,10 +159,10 @@ importers: version: 7.6.19(vue@3.3.10(typescript@5.4.5)) '@storybook/vue3-vite': specifier: ^7.6.19 - version: 7.6.19(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5)) + version: 7.6.19(typescript@5.4.5)(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5)) '@vitejs/plugin-vue': specifier: ^4.6.2 - version: 4.6.2(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5)) + version: 4.6.2(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5)) react: specifier: ^18.3.1 version: 18.3.1 @@ -173,8 +173,8 @@ importers: specifier: ^7.6.19 version: 7.6.19 vite: - specifier: ^5.2.11 - version: 5.2.11(@types/node@20.12.12)(sass@1.77.1) + specifier: ^5.2.14 + version: 5.2.14(@types/node@20.12.12)(sass@1.77.1) packages/components: dependencies: @@ -321,13 +321,13 @@ importers: devDependencies: '@vitejs/plugin-vue': specifier: ^4.5.2 - version: 4.6.2(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1))(vue@3.4.27(typescript@5.4.5)) + version: 4.6.2(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1))(vue@3.4.27(typescript@5.4.5)) typescript: specifier: ^5.3.3 version: 5.4.5 vite: - specifier: ^5.0.8 - version: 5.2.11(@types/node@20.12.12)(sass@1.77.1) + specifier: ^5.2.14 + version: 5.2.14(@types/node@20.12.12)(sass@1.77.1) vue-tsc: specifier: ^1.8.25 version: 1.8.27(typescript@5.4.5) @@ -1455,6 +1455,7 @@ packages: '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} + deprecated: Use @eslint/config-array instead '@humanwhocodes/module-importer@1.0.1': resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} @@ -1462,6 +1463,7 @@ packages: '@humanwhocodes/object-schema@2.0.3': resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==} + deprecated: Use @eslint/object-schema instead '@internationalized/date@3.5.3': resolution: {integrity: sha512-X9bi8NAEHAjD8yzmPYT2pdJsbe+tYSEBAfowtlxJVJdZR3aK8Vg7ZUT1Fm5M47KLzp/M1p1VwAaeSma3RT7biw==} @@ -3692,6 +3694,7 @@ packages: eslint@8.57.0: resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true esm-resolve@1.0.11: @@ -4015,6 +4018,7 @@ packages: glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + deprecated: Glob versions prior to v9 are no longer supported global-directory@4.0.1: resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==} @@ -4218,6 +4222,7 @@ packages: inflight@1.0.6: resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} + deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} @@ -5840,14 +5845,17 @@ packages: rimraf@2.6.3: resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rimraf@2.7.1: resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rimraf@3.0.2: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rollup@3.29.4: @@ -6584,8 +6592,8 @@ packages: vite: optional: true - vite@5.2.11: - resolution: {integrity: sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==} + vite@5.2.14: + resolution: {integrity: sha512-TFQLuwWLPms+NBNlh0D9LZQ+HXW471COABxw/9TEUBrjuHMo9BrYBPrN/SYAwIuVL+rLerycxiLT41t4f5MZpA==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: @@ -6644,8 +6652,8 @@ packages: vue-component-type-helpers@2.0.19: resolution: {integrity: sha512-cN3f1aTxxKo4lzNeQAkVopswuImUrb5Iurll9Gaw5cqpnbTAxtEMM1mgi6ou4X79OCyqYv1U1mzBHJkzmiK82w==} - vue-component-type-helpers@2.1.6: - resolution: {integrity: sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w==} + vue-component-type-helpers@2.1.10: + resolution: {integrity: sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==} vue-demi@0.14.7: resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==} @@ -8958,7 +8966,7 @@ snapshots: - encoding - supports-color - '@storybook/builder-vite@7.6.19(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1))': + '@storybook/builder-vite@7.6.19(typescript@5.4.5)(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1))': dependencies: '@storybook/channels': 7.6.19 '@storybook/client-logger': 7.6.19 @@ -8976,7 +8984,7 @@ snapshots: fs-extra: 11.2.0 magic-string: 0.30.10 rollup: 3.29.4 - vite: 5.2.11(@types/node@20.12.12)(sass@1.77.1) + vite: 5.2.14(@types/node@20.12.12)(sass@1.77.1) optionalDependencies: typescript: 5.4.5 transitivePeerDependencies: @@ -9344,14 +9352,14 @@ snapshots: '@types/express': 4.17.21 file-system-cache: 2.3.0 - '@storybook/vue3-vite@7.6.19(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5))': + '@storybook/vue3-vite@7.6.19(typescript@5.4.5)(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5))': dependencies: - '@storybook/builder-vite': 7.6.19(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1)) + '@storybook/builder-vite': 7.6.19(typescript@5.4.5)(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1)) '@storybook/core-server': 7.6.19 '@storybook/vue3': 7.6.19(vue@3.3.10(typescript@5.4.5)) - '@vitejs/plugin-vue': 4.6.2(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5)) + '@vitejs/plugin-vue': 4.6.2(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5)) magic-string: 0.30.10 - vite: 5.2.11(@types/node@20.12.12)(sass@1.77.1) + vite: 5.2.14(@types/node@20.12.12)(sass@1.77.1) vue-docgen-api: 4.78.0(vue@3.3.10(typescript@5.4.5)) transitivePeerDependencies: - '@preact/preset-vite' @@ -9375,7 +9383,7 @@ snapshots: ts-dedent: 2.2.0 type-fest: 2.19.0 vue: 3.3.10(typescript@5.4.5) - vue-component-type-helpers: 2.1.6 + vue-component-type-helpers: 2.1.10 transitivePeerDependencies: - encoding - supports-color @@ -9637,14 +9645,14 @@ snapshots: '@ungap/structured-clone@1.2.0': {} - '@vitejs/plugin-vue@4.6.2(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5))': + '@vitejs/plugin-vue@4.6.2(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1))(vue@3.3.10(typescript@5.4.5))': dependencies: - vite: 5.2.11(@types/node@20.12.12)(sass@1.77.1) + vite: 5.2.14(@types/node@20.12.12)(sass@1.77.1) vue: 3.3.10(typescript@5.4.5) - '@vitejs/plugin-vue@4.6.2(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1))(vue@3.4.27(typescript@5.4.5))': + '@vitejs/plugin-vue@4.6.2(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1))(vue@3.4.27(typescript@5.4.5))': dependencies: - vite: 5.2.11(@types/node@20.12.12)(sass@1.77.1) + vite: 5.2.14(@types/node@20.12.12)(sass@1.77.1) vue: 3.4.27(typescript@5.4.5) '@vitest/coverage-v8@1.6.0(vitest@1.6.0(@types/node@20.12.12)(jsdom@23.2.0)(sass@1.77.1))': @@ -14298,7 +14306,7 @@ snapshots: debug: 4.3.4 pathe: 1.1.2 picocolors: 1.0.1 - vite: 5.2.11(@types/node@20.12.12)(sass@1.77.1) + vite: 5.2.14(@types/node@20.12.12)(sass@1.77.1) transitivePeerDependencies: - '@types/node' - less @@ -14309,7 +14317,7 @@ snapshots: - supports-color - terser - vite-plugin-dts@3.9.1(@types/node@20.12.12)(rollup@4.17.2)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12)(sass@1.77.1)): + vite-plugin-dts@3.9.1(@types/node@20.12.12)(rollup@4.17.2)(typescript@5.4.5)(vite@5.2.14(@types/node@20.12.12)(sass@1.77.1)): dependencies: '@microsoft/api-extractor': 7.43.0(@types/node@20.12.12) '@rollup/pluginutils': 5.1.0(rollup@4.17.2) @@ -14320,13 +14328,13 @@ snapshots: typescript: 5.4.5 vue-tsc: 1.8.27(typescript@5.4.5) optionalDependencies: - vite: 5.2.11(@types/node@20.12.12)(sass@1.77.1) + vite: 5.2.14(@types/node@20.12.12)(sass@1.77.1) transitivePeerDependencies: - '@types/node' - rollup - supports-color - vite@5.2.11(@types/node@20.12.12)(sass@1.77.1): + vite@5.2.14(@types/node@20.12.12)(sass@1.77.1): dependencies: esbuild: 0.20.2 postcss: 8.4.38 @@ -14355,7 +14363,7 @@ snapshots: strip-literal: 2.1.0 tinybench: 2.8.0 tinypool: 0.8.4 - vite: 5.2.11(@types/node@20.12.12)(sass@1.77.1) + vite: 5.2.14(@types/node@20.12.12)(sass@1.77.1) vite-node: 1.6.0(@types/node@20.12.12)(sass@1.77.1) why-is-node-running: 2.2.2 optionalDependencies: @@ -14374,7 +14382,7 @@ snapshots: vue-component-type-helpers@2.0.19: {} - vue-component-type-helpers@2.1.6: {} + vue-component-type-helpers@2.1.10: {} vue-demi@0.14.7(vue@3.3.10(typescript@5.4.5)): dependencies: