@avenirs-esr/avenirs-dsav 0.1.50 → 0.1.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/App.vue.d.ts +2 -0
- package/dist/avenirs-dsav.es.js +1606 -1494
- package/dist/avenirs-dsav.umd.js +7 -7
- package/dist/components/badges/AvBadge/AvBadge.stories.d.ts +36 -0
- package/dist/components/badges/AvBadge/AvBadge.stub.d.ts +18 -0
- package/dist/components/badges/AvBadge/AvBadge.test.d.ts +1 -0
- package/dist/components/badges/AvBadge/AvBadge.vue.d.ts +44 -0
- package/dist/components/badges/index.d.ts +2 -0
- package/dist/components/base/AvIconText/AvIconText.stories.d.ts +36 -0
- package/dist/components/base/AvIconText/AvIconText.test.d.ts +1 -0
- package/dist/components/base/AvIconText/AvIconText.vue.d.ts +40 -0
- package/dist/components/base/AvNotice/AvNotice.stories.d.ts +56 -0
- package/dist/components/base/AvNotice/AvNotice.test.d.ts +1 -0
- package/dist/components/base/AvNotice/AvNotice.vue.d.ts +22 -0
- package/dist/components/base/AvVIcon/AvVIcon.stories.d.ts +40 -0
- package/dist/components/base/AvVIcon/AvVIcon.stub.d.ts +5 -0
- package/dist/components/base/AvVIcon/AvVIcon.vue.d.ts +54 -0
- package/dist/components/base/index.d.ts +4 -0
- package/dist/components/cards/AvCard/AvCard.stories.d.ts +28 -0
- package/dist/components/cards/AvCard/AvCard.test.d.ts +1 -0
- package/dist/components/cards/AvCard/AvCard.vue.d.ts +58 -0
- package/dist/components/cards/index.d.ts +1 -0
- package/dist/components/feedback/AvAlert/AvAlert.test.d.ts +1 -0
- package/dist/components/feedback/AvAlert/AvAlert.vue.d.ts +77 -0
- package/dist/components/feedback/AvToaster/AvToaster.test.d.ts +1 -0
- package/dist/components/feedback/AvToaster/AvToaster.vue.d.ts +79 -0
- package/dist/components/feedback/index.d.ts +2 -0
- package/dist/components/header/AvHeader/AvHeader.test.d.ts +1 -0
- package/dist/components/header/AvHeader/AvHeader.vue.d.ts +132 -0
- package/dist/components/header/AvHeaderMenuLinks/AvHeaderMenuLinks.test.d.ts +1 -0
- package/dist/components/header/AvHeaderMenuLinks/AvHeaderMenuLinks.vue.d.ts +38 -0
- package/dist/components/header/AvLogo.vue.d.ts +2 -0
- package/dist/components/header/EsupLogo.test.d.ts +1 -0
- package/dist/components/header/EsupLogo.vue.d.ts +7 -0
- package/dist/components/header/index.d.ts +5 -0
- package/dist/components/index.d.ts +8 -0
- package/dist/components/interaction/accordions/AvAccordion/AvAccordion.stories.d.ts +30 -0
- package/dist/components/interaction/accordions/AvAccordion/AvAccordion.test.d.ts +1 -0
- package/dist/components/interaction/accordions/AvAccordion/AvAccordion.vue.d.ts +31 -0
- package/dist/components/interaction/accordions/AvAccordionsGroup/AvAccordionsGroup.stories.d.ts +41 -0
- package/dist/components/interaction/accordions/AvAccordionsGroup/AvAccordionsGroup.test.d.ts +1 -0
- package/dist/components/interaction/accordions/AvAccordionsGroup/AvAccordionsGroup.vue.d.ts +36 -0
- package/dist/components/interaction/accordions/index.d.ts +2 -0
- package/dist/components/interaction/buttons/AvButton/AvButton.stories.d.ts +66 -0
- package/dist/components/interaction/buttons/AvButton/AvButton.stub.d.ts +6 -0
- package/dist/components/interaction/buttons/AvButton/AvButton.test.d.ts +1 -0
- package/dist/components/interaction/buttons/AvButton/AvButton.vue.d.ts +78 -0
- package/dist/components/interaction/buttons/AvCancelConfirmButtons/AvCancelConfirmButtons.stories.d.ts +44 -0
- package/dist/components/interaction/buttons/AvCancelConfirmButtons/AvCancelConfirmButtons.stub.d.ts +6 -0
- package/dist/components/interaction/buttons/AvCancelConfirmButtons/AvCancelConfirmButtons.test.d.ts +1 -0
- package/dist/components/interaction/buttons/AvCancelConfirmButtons/AvCancelConfirmButtons.vue.d.ts +47 -0
- package/dist/components/interaction/buttons/AvRichButton/AvRichButton.stories.d.ts +39 -0
- package/dist/components/interaction/buttons/AvRichButton/AvRichButton.test.d.ts +1 -0
- package/dist/components/interaction/buttons/AvRichButton/AvRichButton.vue.d.ts +48 -0
- package/dist/components/interaction/buttons/index.d.ts +4 -0
- package/dist/components/interaction/files/AvFileUpload/AvFileUpload.stories.d.ts +22 -0
- package/dist/components/interaction/files/AvFileUpload/AvFileUpload.test.d.ts +1 -0
- package/dist/components/interaction/files/AvFileUpload/AvFileUpload.vue.d.ts +121 -0
- package/dist/components/interaction/files/AvFileUpload/AvFileUploadAlert.vue.d.ts +19 -0
- package/dist/components/interaction/files/index.d.ts +1 -0
- package/dist/components/interaction/index.d.ts +10 -0
- package/dist/components/interaction/inputs/AvInput/AvInput.stories.d.ts +61 -0
- package/dist/components/interaction/inputs/AvInput/AvInput.test.d.ts +1 -0
- package/dist/components/interaction/inputs/AvInput/AvInput.vue.d.ts +123 -0
- package/dist/components/interaction/inputs/index.d.ts +1 -0
- package/dist/components/interaction/lists/AvList/AvList.stories.d.ts +55 -0
- package/dist/components/interaction/lists/AvList/AvList.stub.d.ts +5 -0
- package/dist/components/interaction/lists/AvList/AvList.test.d.ts +1 -0
- package/dist/components/interaction/lists/AvList/AvList.vue.d.ts +74 -0
- package/dist/components/interaction/lists/AvListItem/AvListItem.stories.d.ts +59 -0
- package/dist/components/interaction/lists/AvListItem/AvListItem.stub.d.ts +6 -0
- package/dist/components/interaction/lists/AvListItem/AvListItem.test.d.ts +1 -0
- package/dist/components/interaction/lists/AvListItem/AvListItem.vue.d.ts +112 -0
- package/dist/components/interaction/lists/index.d.ts +4 -0
- package/dist/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.stories.d.ts +24 -0
- package/dist/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.test.d.ts +1 -0
- package/dist/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.vue.d.ts +23 -0
- package/dist/components/interaction/pickers/AvTagPicker/AvTagPicker.stories.d.ts +96 -0
- package/dist/components/interaction/pickers/AvTagPicker/AvTagPicker.stub.d.ts +5 -0
- package/dist/components/interaction/pickers/AvTagPicker/AvTagPicker.test.d.ts +1 -0
- package/dist/components/interaction/pickers/AvTagPicker/AvTagPicker.vue.d.ts +79 -0
- package/dist/components/interaction/pickers/index.d.ts +3 -0
- package/dist/components/interaction/radios/AvRadioButton/AvRadioButton.stories.d.ts +34 -0
- package/dist/components/interaction/radios/AvRadioButton/AvRadioButton.test.d.ts +1 -0
- package/dist/components/interaction/radios/AvRadioButton/AvRadioButton.vue.d.ts +38 -0
- package/dist/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.stories.d.ts +47 -0
- package/dist/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.test.d.ts +1 -0
- package/dist/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.vue.d.ts +76 -0
- package/dist/components/interaction/radios/index.d.ts +2 -0
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.stories.d.ts +565 -0
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.stub.d.ts +6 -0
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.test.d.ts +1 -0
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.types.d.ts +101 -0
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.vue.d.ts +204 -0
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocompleteContext.d.ts +14 -0
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocompleteDropdown.vue.d.ts +60 -0
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocompleteInput.vue.d.ts +585 -0
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocompleteSelectedTags.vue.d.ts +42 -0
- package/dist/components/interaction/selects/AvMultiselect/AvMultiselect.stories.d.ts +132 -0
- package/dist/components/interaction/selects/AvMultiselect/AvMultiselect.test.d.ts +1 -0
- package/dist/components/interaction/selects/AvMultiselect/AvMultiselect.vue.d.ts +94 -0
- package/dist/components/interaction/selects/AvSelect/AvSelect.stories.d.ts +96 -0
- package/dist/components/interaction/selects/AvSelect/AvSelect.stub.d.ts +11 -0
- package/dist/components/interaction/selects/AvSelect/AvSelect.test.d.ts +1 -0
- package/dist/components/interaction/selects/AvSelect/AvSelect.vue.d.ts +63 -0
- package/dist/components/interaction/selects/index.d.ts +6 -0
- package/dist/components/interaction/tabs/AvTab/AvTab.stories.d.ts +34 -0
- package/dist/components/interaction/tabs/AvTab/AvTab.test.d.ts +1 -0
- package/dist/components/interaction/tabs/AvTab/AvTab.vue.d.ts +31 -0
- package/dist/components/interaction/tabs/AvTabs/AvTabs.stories.d.ts +45 -0
- package/dist/components/interaction/tabs/AvTabs/AvTabs.test.d.ts +1 -0
- package/dist/components/interaction/tabs/AvTabs/AvTabs.vue.d.ts +46 -0
- package/dist/components/interaction/tabs/index.d.ts +2 -0
- package/dist/components/interaction/toggles/AvToggle/AvToggle.stories.d.ts +21 -0
- package/dist/components/interaction/toggles/AvToggle/AvToggle.test.d.ts +1 -0
- package/dist/components/interaction/toggles/AvToggle/AvToggle.vue.d.ts +46 -0
- package/dist/components/interaction/toggles/index.d.ts +1 -0
- package/dist/components/navigation/AvNavigation/AvNavigation.stories.d.ts +27 -0
- package/dist/components/navigation/AvNavigation/AvNavigation.test.d.ts +1 -0
- package/dist/components/navigation/AvNavigation/AvNavigation.vue.d.ts +16 -0
- package/dist/components/navigation/AvNavigation/index.d.ts +1 -0
- package/dist/components/navigation/AvPagination/AvPagination.test.d.ts +1 -0
- package/dist/components/navigation/AvPagination/AvPagination.vue.d.ts +57 -0
- package/dist/components/navigation/AvPagination/utils.d.ts +14 -0
- package/dist/components/navigation/AvPagination/utils.test.d.ts +1 -0
- package/dist/components/navigation/AvSideMenu/AvSideMenu.stories.d.ts +55 -0
- package/dist/components/navigation/AvSideMenu/AvSideMenu.test.d.ts +1 -0
- package/dist/components/navigation/AvSideMenu/AvSideMenu.vue.d.ts +61 -0
- package/dist/components/navigation/AvSideNavigation/AvSideNavigation.stories.d.ts +59 -0
- package/dist/components/navigation/AvSideNavigation/AvSideNavigation.stub.d.ts +11 -0
- package/dist/components/navigation/AvSideNavigation/AvSideNavigation.test.d.ts +1 -0
- package/dist/components/navigation/AvSideNavigation/AvSideNavigation.vue.d.ts +42 -0
- package/dist/components/navigation/AvStepper/AvStepper.stories.d.ts +28 -0
- package/dist/components/navigation/AvStepper/AvStepper.stub.d.ts +14 -0
- package/dist/components/navigation/AvStepper/AvStepper.test.d.ts +1 -0
- package/dist/components/navigation/AvStepper/AvStepper.vue.d.ts +19 -0
- package/dist/components/navigation/index.d.ts +8 -0
- package/dist/components/overlay/drawers/AvDrawer/AvDrawer.stories.d.ts +53 -0
- package/dist/components/overlay/drawers/AvDrawer/AvDrawer.stub.d.ts +6 -0
- package/dist/components/overlay/drawers/AvDrawer/AvDrawer.test.d.ts +1 -0
- package/dist/components/overlay/drawers/AvDrawer/AvDrawer.vue.d.ts +60 -0
- package/dist/components/overlay/index.d.ts +4 -0
- package/dist/components/overlay/modals/AvModal/AvModal.test.d.ts +1 -0
- package/dist/components/overlay/modals/AvModal/AvModal.vue.d.ts +92 -0
- package/dist/components/overlay/popovers/AvPopover/AvPopover.stories.d.ts +49 -0
- package/dist/components/overlay/popovers/AvPopover/AvPopover.test.d.ts +1 -0
- package/dist/components/overlay/popovers/AvPopover/AvPopover.vue.d.ts +48 -0
- package/dist/components/overlay/popovers/AvPopover/use-popover.d.ts +41 -0
- package/dist/components/overlay/popovers/AvPopover/use-popover.test.d.ts +1 -0
- package/dist/composables/index.d.ts +3 -0
- package/dist/composables/use-av-breakpoints/use-av-breakpoints.d.ts +72 -0
- package/dist/composables/use-av-breakpoints/use-av-breakpoints.test.d.ts +1 -0
- package/dist/composables/use-focus-trap/use-focus-trap.d.ts +25 -0
- package/dist/composables/use-focus-trap/use-focus-trap.test.d.ts +1 -0
- package/dist/composables/use-global-background-color/use-global-background-color.d.ts +19 -0
- package/dist/composables/use-global-background-color/use-global-background-color.test.d.ts +1 -0
- package/dist/config/index.d.ts +1 -0
- package/dist/config/page-sizes.d.ts +6 -0
- package/dist/index.d.ts +7 -0
- package/dist/main.d.ts +8 -0
- package/dist/stories/foundations/icons.stories.d.ts +6 -0
- package/dist/stories/foundations/typography.stories.d.ts +5 -0
- package/dist/tests/index.d.ts +1 -0
- package/dist/tests/stubs.d.ts +41 -0
- package/dist/tests/utils.d.ts +30 -0
- package/dist/tokens/icons.d.ts +92 -0
- package/dist/tokens/index.d.ts +1 -0
- package/dist/utils/array/array.d.ts +8 -0
- package/dist/utils/forms/form.test.d.ts +1 -0
- package/dist/utils/forms/forms.d.ts +6 -0
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/string/string.d.ts +27 -0
- package/dist/utils/string/string.test.d.ts +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { Meta, StoryFn } from '@storybook/vue3';
|
|
2
|
+
import { type AvNavigationProps } from '@/components/navigation/AvNavigation/AvNavigation.vue';
|
|
3
|
+
/**
|
|
4
|
+
* <h1 class="n1">Navigation - <code>AvNavigation</code></h1>
|
|
5
|
+
*
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
|
+
*
|
|
8
|
+
* <p>
|
|
9
|
+
* <span class="b2-regular">
|
|
10
|
+
* The <code>AvNavigation</code> is the main navigation therefore the central navigation system within a site.
|
|
11
|
+
* It guides the user through the site main and secondary sections.
|
|
12
|
+
* </span>
|
|
13
|
+
* </p>
|
|
14
|
+
*
|
|
15
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
16
|
+
*
|
|
17
|
+
* <p><span class="b2-regular">The navigation component can be used to create a navigation bar with different types of navigation items:</span></p>
|
|
18
|
+
*
|
|
19
|
+
* <ul>
|
|
20
|
+
* <li><span class="b2-regular">direct link</span></li>
|
|
21
|
+
* <li><span class="b2-regular">submenu</span></li>
|
|
22
|
+
* <li><span class="b2-regular">mega-menu</span></li>
|
|
23
|
+
* </ul>
|
|
24
|
+
*/
|
|
25
|
+
declare const meta: Meta<AvNavigationProps>;
|
|
26
|
+
export default meta;
|
|
27
|
+
export declare const Default: StoryFn<AvNavigationProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { DsfrNavigationMegaMenuProps, DsfrNavigationMenuLinkProps, DsfrNavigationMenuProps } from '@gouvminint/vue-dsfr';
|
|
2
|
+
/**
|
|
3
|
+
* AvNavigation component props.
|
|
4
|
+
*/
|
|
5
|
+
export interface AvNavigationProps {
|
|
6
|
+
/**
|
|
7
|
+
* List of navigation items.
|
|
8
|
+
* Each item can be:
|
|
9
|
+
* - A direct navigation link (`DsfrNavigationMenuLinkProps`) with `to` and `text` props.
|
|
10
|
+
* - A navigation submenu (`DsfrNavigationMenuProps`) with `title`, `links` and `active` props.
|
|
11
|
+
* - A mega-navigation menu (`DsfrNavigationMegaMenuProps`) with `title`, `link`, `active` and `menus` props.
|
|
12
|
+
*/
|
|
13
|
+
navItems: (DsfrNavigationMenuLinkProps | DsfrNavigationMenuProps | DsfrNavigationMegaMenuProps)[];
|
|
14
|
+
}
|
|
15
|
+
declare const _default: import("vue").DefineComponent<AvNavigationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvNavigationProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
16
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as AvNavigation, type AvNavigationProps } from './AvNavigation.vue';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import type { Page } from '@gouvminint/vue-dsfr';
|
|
2
|
+
/**
|
|
3
|
+
* AvPagination component Props.
|
|
4
|
+
*/
|
|
5
|
+
export interface AvPaginationProps {
|
|
6
|
+
/**
|
|
7
|
+
* Allows compact display:
|
|
8
|
+
* "Page x of y" with only navigation icons (no text).
|
|
9
|
+
* @default false
|
|
10
|
+
*/
|
|
11
|
+
compact?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* List of pages.
|
|
14
|
+
* Each page is an object containing information such as `href` and `label`.
|
|
15
|
+
*/
|
|
16
|
+
pages: Page[];
|
|
17
|
+
/**
|
|
18
|
+
* Index of currently selected page (starts at 0).
|
|
19
|
+
* @default 0
|
|
20
|
+
*/
|
|
21
|
+
currentPage?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Tooltip text for first page link.
|
|
24
|
+
*/
|
|
25
|
+
firstPageLabel?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Tooltip text for last page link.
|
|
28
|
+
*/
|
|
29
|
+
lastPageLabel?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Tooltip text for next page link.
|
|
32
|
+
*/
|
|
33
|
+
nextPageLabel?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Tooltip text for previous page link.
|
|
36
|
+
*/
|
|
37
|
+
prevPageLabel?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Text for compact current page.
|
|
40
|
+
*/
|
|
41
|
+
compactCurrentPageLabel?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Maximum number of pages displayed in pagination.
|
|
44
|
+
* @default 2
|
|
45
|
+
*/
|
|
46
|
+
truncLimit?: number;
|
|
47
|
+
/**
|
|
48
|
+
* ARIA label of pagination for accessibility.
|
|
49
|
+
*/
|
|
50
|
+
ariaLabel?: string;
|
|
51
|
+
}
|
|
52
|
+
declare const _default: import("vue").DefineComponent<AvPaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
53
|
+
"update:current-page": (payload: number) => any;
|
|
54
|
+
}, string, import("vue").PublicProps, Readonly<AvPaginationProps> & Readonly<{
|
|
55
|
+
"onUpdate:current-page"?: ((payload: number) => any) | undefined;
|
|
56
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
57
|
+
export default _default;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Page } from '@gouvminint/vue-dsfr';
|
|
2
|
+
import type { Ref } from 'vue';
|
|
3
|
+
/**
|
|
4
|
+
* Generates an array of pages for pagination based on the total number of pages.
|
|
5
|
+
*
|
|
6
|
+
* Each page is an object containing:
|
|
7
|
+
* - `title`: The page number as a string.
|
|
8
|
+
* - `label`: The label displayed for the page (same as the number).
|
|
9
|
+
* - `href`: An anchor identifier to the page, formatted as `#page-x`.
|
|
10
|
+
*
|
|
11
|
+
* @param {Ref<number>} totalPages - Reactive reference to the total number of pages.
|
|
12
|
+
* @returns {Page[]} Array of page objects to use for pagination.
|
|
13
|
+
*/
|
|
14
|
+
export declare function getPaginationPages(totalPages: Ref<number>): Page[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import type { Meta, StoryFn } from '@storybook/vue3';
|
|
2
|
+
import { type AvSideMenuProps } from '@/components/navigation/AvSideMenu/AvSideMenu.vue';
|
|
3
|
+
/**
|
|
4
|
+
* <h1 class="n1">Navigation - <code>AvSideMenu</code></h1>
|
|
5
|
+
*
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
|
+
*
|
|
8
|
+
* <p>
|
|
9
|
+
* <span class="b2-regular">
|
|
10
|
+
* The side-menu component provides a collapsible sidebar container for application navigation.
|
|
11
|
+
* It focuses on layout and collapse functionality, allowing you to insert any content via slots
|
|
12
|
+
* while maintaining full accessibility and keyboard navigation support.
|
|
13
|
+
* </span>
|
|
14
|
+
* </p>
|
|
15
|
+
*
|
|
16
|
+
* <p>
|
|
17
|
+
* <span class="b2-regular">
|
|
18
|
+
* The <code>AvSideMenu</code> component offers flexible configuration options including
|
|
19
|
+
* optional collapsible behavior, customizable widths, and responsive design that adapts to different screen sizes.
|
|
20
|
+
* </span>
|
|
21
|
+
* </p>
|
|
22
|
+
*
|
|
23
|
+
* <p>
|
|
24
|
+
* <span class="b2-regular">
|
|
25
|
+
* It features smooth transitions, proper focus management, and screen reader support while maintaining
|
|
26
|
+
* visual consistency with the design system's styling tokens.
|
|
27
|
+
* </span>
|
|
28
|
+
* </p>
|
|
29
|
+
*
|
|
30
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
31
|
+
*
|
|
32
|
+
* <p><span class="b2-regular">The side-menu component consists of the following elements:</span></p>
|
|
33
|
+
*
|
|
34
|
+
* <ul>
|
|
35
|
+
* <li><span class="b2-regular"><strong>Header:</strong> (optional) Contains the collapse/expand toggle button when collapsible=true</span></li>
|
|
36
|
+
* <li><span class="b2-regular"><strong>Toggle Button:</strong> (optional) Interactive button to collapse/expand the menu</span></li>
|
|
37
|
+
* <li><span class="b2-regular"><strong>Content Area:</strong> Scrollable area for your custom content via default slot</span></li>
|
|
38
|
+
* </ul>
|
|
39
|
+
*
|
|
40
|
+
* <p><span class="b2-regular">The side-menu integrates:</span></p>
|
|
41
|
+
*
|
|
42
|
+
* <ul>
|
|
43
|
+
* <li><span class="b2-regular">Optional collapsible behavior with smooth transitions</span></li>
|
|
44
|
+
* <li><span class="b2-regular">Accessibility attributes and keyboard navigation</span></li>
|
|
45
|
+
* <li><span class="b2-regular">Responsive design with customizable widths</span></li>
|
|
46
|
+
* <li><span class="b2-regular">Flexible content via slots</span></li>
|
|
47
|
+
* </ul>
|
|
48
|
+
*/
|
|
49
|
+
declare const meta: Meta<AvSideMenuProps>;
|
|
50
|
+
export default meta;
|
|
51
|
+
export declare const Default: StoryFn<AvSideMenuProps>;
|
|
52
|
+
export declare const NonCollapsible: StoryFn<AvSideMenuProps>;
|
|
53
|
+
export declare const CustomWidth: StoryFn<AvSideMenuProps>;
|
|
54
|
+
export declare const StudentNavigation: StoryFn<AvSideMenuProps>;
|
|
55
|
+
export declare const Minimal: StoryFn<AvSideMenuProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import type { Slot } from 'vue';
|
|
2
|
+
export interface AvSideMenuProps {
|
|
3
|
+
/**
|
|
4
|
+
* Unique identifier for the side-menu
|
|
5
|
+
*/
|
|
6
|
+
id?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Whether the collapsing feature is enabled
|
|
9
|
+
*/
|
|
10
|
+
collapsible?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Whether the side-menu is collapsed (for v-model usage)
|
|
13
|
+
* @default false
|
|
14
|
+
*/
|
|
15
|
+
collapsed?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Width of the side-menu when expanded
|
|
18
|
+
*/
|
|
19
|
+
width?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Width of the side-menu when collapsed
|
|
22
|
+
*/
|
|
23
|
+
collapsedWidth?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Custom padding for the side-menu content
|
|
26
|
+
*/
|
|
27
|
+
padding?: string;
|
|
28
|
+
}
|
|
29
|
+
type __VLS_Props = AvSideMenuProps;
|
|
30
|
+
/**
|
|
31
|
+
* Slots available for the component.
|
|
32
|
+
*
|
|
33
|
+
* @slot title - Slot for custom title content.
|
|
34
|
+
* @slot default - Slot for custom content (menu items, etc.).
|
|
35
|
+
*/
|
|
36
|
+
type __VLS_Slots = {
|
|
37
|
+
/**
|
|
38
|
+
* Slot for custom content (menu items, etc.)
|
|
39
|
+
*/
|
|
40
|
+
default?: () => Slot;
|
|
41
|
+
};
|
|
42
|
+
type __VLS_PublicProps = __VLS_Props & {
|
|
43
|
+
'collapsed'?: boolean;
|
|
44
|
+
};
|
|
45
|
+
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
46
|
+
"update:collapsed": (...args: unknown[]) => any;
|
|
47
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
48
|
+
"onUpdate:collapsed"?: ((...args: unknown[]) => any) | undefined;
|
|
49
|
+
}>, {
|
|
50
|
+
width: string;
|
|
51
|
+
padding: string;
|
|
52
|
+
collapsible: boolean;
|
|
53
|
+
collapsed: boolean;
|
|
54
|
+
collapsedWidth: string;
|
|
55
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
|
|
56
|
+
export default _default;
|
|
57
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
58
|
+
new (): {
|
|
59
|
+
$slots: S;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/vue3';
|
|
2
|
+
import AvSideNavigation from './AvSideNavigation.vue';
|
|
3
|
+
/**
|
|
4
|
+
* <h1 class="n1">Navigation - <code>AvSideNavigation</code></h1>
|
|
5
|
+
*
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
|
+
*
|
|
8
|
+
* <p>
|
|
9
|
+
* <span class="b2-regular">
|
|
10
|
+
* The side navigation component is a comprehensive solution that combines AvSideMenu, AvList, and AvListItem
|
|
11
|
+
* components to provide a fully functional navigational sidebar. It handles both the layout structure and
|
|
12
|
+
* navigation behavior while maintaining full accessibility and keyboard navigation support.
|
|
13
|
+
* </span>
|
|
14
|
+
* </p>
|
|
15
|
+
*
|
|
16
|
+
* <p>
|
|
17
|
+
* <span class="b2-regular">
|
|
18
|
+
* The <code>AvSideNavigation</code> component offers automatic state management through defineModel,
|
|
19
|
+
* customizable navigation items with icons and labels, and responsive behavior that adapts to collapsed states.
|
|
20
|
+
* It provides a clean API for managing selected items and menu visibility.
|
|
21
|
+
* </span>
|
|
22
|
+
* </p>
|
|
23
|
+
*
|
|
24
|
+
* <p>
|
|
25
|
+
* <span class="b2-regular">
|
|
26
|
+
* It features two-way data binding for selected items and collapse state, smooth transitions,
|
|
27
|
+
* proper focus management, and screen reader support while maintaining visual consistency
|
|
28
|
+
* with the design system's styling tokens.
|
|
29
|
+
* </span>
|
|
30
|
+
* </p>
|
|
31
|
+
*
|
|
32
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
33
|
+
*
|
|
34
|
+
* <p><span class="b2-regular">The side navigation component consists of the following elements:</span></p>
|
|
35
|
+
*
|
|
36
|
+
* <ul>
|
|
37
|
+
* <li><span class="b2-regular"><strong>Side Menu Container:</strong> The main AvSideMenu wrapper that handles collapsible behavior</span></li>
|
|
38
|
+
* <li><span class="b2-regular"><strong>Navigation List:</strong> An AvList component that contains all navigation items</span></li>
|
|
39
|
+
* <li><span class="b2-regular"><strong>Navigation Items:</strong> Individual AvListItem components representing each navigational option</span></li>
|
|
40
|
+
* <li><span class="b2-regular"><strong>Toggle Functionality:</strong> Automatic label hiding/showing based on collapsed state</span></li>
|
|
41
|
+
* </ul>
|
|
42
|
+
*
|
|
43
|
+
* <p><span class="b2-regular">The side navigation integrates:</span></p>
|
|
44
|
+
*
|
|
45
|
+
* <ul>
|
|
46
|
+
* <li><span class="b2-regular">Two-way binding for selected item and collapsed state via defineModel</span></li>
|
|
47
|
+
* <li><span class="b2-regular">Automatic icon-only display when collapsed</span></li>
|
|
48
|
+
* <li><span class="b2-regular">Selection state management with visual feedback</span></li>
|
|
49
|
+
* <li><span class="b2-regular">Keyboard navigation and accessibility attributes</span></li>
|
|
50
|
+
* <li><span class="b2-regular">Responsive design with customizable widths</span></li>
|
|
51
|
+
* </ul>
|
|
52
|
+
*/
|
|
53
|
+
declare const meta: Meta<typeof AvSideNavigation>;
|
|
54
|
+
export default meta;
|
|
55
|
+
type Story = StoryObj<typeof meta>;
|
|
56
|
+
export declare const Default: Story;
|
|
57
|
+
export declare const Collapsed: Story;
|
|
58
|
+
export declare const CustomWidth: Story;
|
|
59
|
+
export declare const CustomColor: Story;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const AvSideNavigationStub: {
|
|
2
|
+
name: string;
|
|
3
|
+
props: {
|
|
4
|
+
items: ArrayConstructor;
|
|
5
|
+
selectedItem: StringConstructor;
|
|
6
|
+
isSideMenuCollapsed: BooleanConstructor;
|
|
7
|
+
collapsedWidth: StringConstructor;
|
|
8
|
+
};
|
|
9
|
+
emits: string[];
|
|
10
|
+
template: string;
|
|
11
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export interface AvSideNavigationItem {
|
|
2
|
+
id: string;
|
|
3
|
+
label: string;
|
|
4
|
+
icon: string;
|
|
5
|
+
}
|
|
6
|
+
export interface AvSideNavigationProps {
|
|
7
|
+
/**
|
|
8
|
+
* List of items to display in the side navigation.
|
|
9
|
+
*/
|
|
10
|
+
items: AvSideNavigationItem[];
|
|
11
|
+
/**
|
|
12
|
+
* The currently selected item ID.
|
|
13
|
+
*/
|
|
14
|
+
selectedItem?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the side menu is collapsed or not.
|
|
17
|
+
*/
|
|
18
|
+
isSideMenuCollapsed?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Width of the side menu when collapsed.
|
|
21
|
+
*/
|
|
22
|
+
collapsedWidth?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Color of selected item background and icon.
|
|
25
|
+
*/
|
|
26
|
+
selectedItemColor?: string;
|
|
27
|
+
}
|
|
28
|
+
type __VLS_Props = AvSideNavigationProps;
|
|
29
|
+
type __VLS_PublicProps = __VLS_Props & {
|
|
30
|
+
'selectedItem'?: string;
|
|
31
|
+
'isSideMenuCollapsed'?: boolean;
|
|
32
|
+
};
|
|
33
|
+
declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
34
|
+
"update:selectedItem": (...args: unknown[]) => any;
|
|
35
|
+
"update:isSideMenuCollapsed": (...args: unknown[]) => any;
|
|
36
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
37
|
+
"onUpdate:selectedItem"?: ((...args: unknown[]) => any) | undefined;
|
|
38
|
+
"onUpdate:isSideMenuCollapsed"?: ((...args: unknown[]) => any) | undefined;
|
|
39
|
+
}>, {
|
|
40
|
+
collapsedWidth: string;
|
|
41
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
42
|
+
export default _default;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { Meta, StoryFn } from '@storybook/vue3';
|
|
2
|
+
import AvStepper, { type AvStepperProps } from './AvStepper.vue';
|
|
3
|
+
/**
|
|
4
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
5
|
+
*
|
|
6
|
+
* <p>
|
|
7
|
+
* <span class="b2-regular">
|
|
8
|
+
* The <code>AvStepper</code> component is a visual guide to show the user their progress through a series of steps.
|
|
9
|
+
* </span>
|
|
10
|
+
* </p>
|
|
11
|
+
*
|
|
12
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
13
|
+
*
|
|
14
|
+
* <p><span class="b2-regular">The stepper displays:</span></p>
|
|
15
|
+
* <ul>
|
|
16
|
+
* <li><span class="b2-regular">all steps titles</span></li>
|
|
17
|
+
* <li><span class="b2-regular">a progress status showing the current step and the total number of steps</span></li>
|
|
18
|
+
* <li><span class="b2-regular">a stylized progress bar</span></li>
|
|
19
|
+
* </ul>
|
|
20
|
+
*/
|
|
21
|
+
declare const meta: Meta<typeof AvStepper>;
|
|
22
|
+
export default meta;
|
|
23
|
+
export declare const Default: StoryFn<AvStepperProps>;
|
|
24
|
+
export declare const CustomWidth: StoryFn<AvStepperProps>;
|
|
25
|
+
export declare const WithStepTwoActive: StoryFn<AvStepperProps>;
|
|
26
|
+
export declare const WithAllStepsActive: StoryFn<AvStepperProps>;
|
|
27
|
+
export declare const WithTwoSteps: StoryFn<AvStepperProps>;
|
|
28
|
+
export declare const WithFourSteps: StoryFn<AvStepperProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface AvStepperProps {
|
|
2
|
+
/**
|
|
3
|
+
* List of steps to display in the stepper.
|
|
4
|
+
*/
|
|
5
|
+
steps: string[];
|
|
6
|
+
/**
|
|
7
|
+
* Index of the current step (starts at 0).
|
|
8
|
+
*/
|
|
9
|
+
currentStep: number;
|
|
10
|
+
/**
|
|
11
|
+
* Width of the stepper.
|
|
12
|
+
* @default '100%'
|
|
13
|
+
*/
|
|
14
|
+
width?: string;
|
|
15
|
+
}
|
|
16
|
+
declare const _default: import("vue").DefineComponent<AvStepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvStepperProps> & Readonly<{}>, {
|
|
17
|
+
width: string;
|
|
18
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
19
|
+
export default _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export * from './AvNavigation';
|
|
2
|
+
export { default as AvPagination } from './AvPagination/AvPagination.vue';
|
|
3
|
+
export * from './AvPagination/utils';
|
|
4
|
+
export { default as AvSideMenu, type AvSideMenuProps } from './AvSideMenu/AvSideMenu.vue';
|
|
5
|
+
export { AvSideNavigationStub } from './AvSideNavigation/AvSideNavigation.stub';
|
|
6
|
+
export { default as AvSideNavigation, type AvSideNavigationItem, type AvSideNavigationProps } from './AvSideNavigation/AvSideNavigation.vue';
|
|
7
|
+
export { AvStepperStub } from './AvStepper/AvStepper.stub';
|
|
8
|
+
export { default as AvStepper, type AvStepperProps } from './AvStepper/AvStepper.vue';
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import type { Meta, StoryFn } from '@storybook/vue3';
|
|
2
|
+
import { type AvDrawerProps } from '@/components/overlay/drawers/AvDrawer/AvDrawer.vue';
|
|
3
|
+
/**
|
|
4
|
+
* <h1 class="n1">Drawers - <code>AvDrawer</code></h1>
|
|
5
|
+
*
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
|
+
*
|
|
8
|
+
* <p>
|
|
9
|
+
* <span class="b2-regular">
|
|
10
|
+
* The drawer is a panel that slides in from the edge of the screen, providing additional content or navigation options without leaving the current page.
|
|
11
|
+
* This component is designed to display contextual information, actions, or secondary navigation in a non-intrusive way.
|
|
12
|
+
* </span>
|
|
13
|
+
* </p>
|
|
14
|
+
*
|
|
15
|
+
* <p>
|
|
16
|
+
* <span class="b2-regular">
|
|
17
|
+
* The <code>AvDrawer</code> component offers flexible positioning (left or right), customizable dimensions, and an optional backdrop overlay.
|
|
18
|
+
* It provides a clean, accessible way to present supplementary content while maintaining focus on the primary interface.
|
|
19
|
+
* </span>
|
|
20
|
+
* </p>
|
|
21
|
+
*
|
|
22
|
+
* <p>
|
|
23
|
+
* <span class="b2-regular">
|
|
24
|
+
* It features smooth animations, proper z-index management, and integrates seamlessly with the design system's styling tokens.
|
|
25
|
+
* </span>
|
|
26
|
+
* </p>
|
|
27
|
+
*
|
|
28
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
29
|
+
*
|
|
30
|
+
* <p><span class="b2-regular">The drawer consists of the following elements:</span></p>
|
|
31
|
+
*
|
|
32
|
+
* <ul>
|
|
33
|
+
* <li><span class="b2-regular"><strong>Container:</strong> The main drawer panel that slides in from the specified edge</span></li>
|
|
34
|
+
* <li><span class="b2-regular"><strong>Backdrop:</strong> (optional) Semi-transparent overlay that dims the background content</span></li>
|
|
35
|
+
* <li><span class="b2-regular"><strong>Content Area:</strong> Flexible content container that accepts any slotted content</span></li>
|
|
36
|
+
* </ul>
|
|
37
|
+
*
|
|
38
|
+
* <p><span class="b2-regular">The drawer integrates:</span></p>
|
|
39
|
+
*
|
|
40
|
+
* <ul>
|
|
41
|
+
* <li><span class="b2-regular">Fixed positioning for consistent placement</span></li>
|
|
42
|
+
* <li><span class="b2-regular">Conditional backdrop for modal-like behavior</span></li>
|
|
43
|
+
* <li><span class="b2-regular">Position-specific styling (left/right rounded corners and shadows)</span></li>
|
|
44
|
+
* <li><span class="b2-regular">Responsive width and padding customization</span></li>
|
|
45
|
+
* </ul>
|
|
46
|
+
*/
|
|
47
|
+
declare const meta: Meta<AvDrawerProps>;
|
|
48
|
+
export default meta;
|
|
49
|
+
export declare const Default: StoryFn<AvDrawerProps>;
|
|
50
|
+
export declare const LeftPosition: StoryFn<AvDrawerProps>;
|
|
51
|
+
export declare const WithoutBackdrop: StoryFn<AvDrawerProps>;
|
|
52
|
+
export declare const CustomWidth: StoryFn<AvDrawerProps>;
|
|
53
|
+
export declare const WithFooter: StoryFn<AvDrawerProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import type { Slot } from 'vue';
|
|
2
|
+
export interface AvDrawerProps {
|
|
3
|
+
/**
|
|
4
|
+
* Controls the visibility of the drawer
|
|
5
|
+
*/
|
|
6
|
+
show: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* Position of the drawer on the screen
|
|
9
|
+
*/
|
|
10
|
+
position?: 'left' | 'right';
|
|
11
|
+
/**
|
|
12
|
+
* Width of the drawer panel
|
|
13
|
+
*/
|
|
14
|
+
width?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Whether to show the backdrop overlay, default true
|
|
17
|
+
*/
|
|
18
|
+
backdrop?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Padding inside the drawer content area
|
|
21
|
+
*/
|
|
22
|
+
padding?: string;
|
|
23
|
+
/**
|
|
24
|
+
* ARIA label for accessibility
|
|
25
|
+
* @default 'Menu latéral'
|
|
26
|
+
*/
|
|
27
|
+
ariaLabel?: string;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Slots available in the AvDrawer component.
|
|
31
|
+
* The default slot contains the main content of the drawer.
|
|
32
|
+
* The slot footer allows to add content under the main scrollable content.
|
|
33
|
+
*/
|
|
34
|
+
type __VLS_Slots = {
|
|
35
|
+
/**
|
|
36
|
+
* Default slot for main content.
|
|
37
|
+
*/
|
|
38
|
+
default?: Slot;
|
|
39
|
+
/**
|
|
40
|
+
* Footer slot for content under the main scrollable content.
|
|
41
|
+
*/
|
|
42
|
+
footer?: Slot;
|
|
43
|
+
};
|
|
44
|
+
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
45
|
+
escapePressed: () => any;
|
|
46
|
+
}, string, import("vue").PublicProps, Readonly<AvDrawerProps> & Readonly<{
|
|
47
|
+
onEscapePressed?: (() => any) | undefined;
|
|
48
|
+
}>, {
|
|
49
|
+
width: string;
|
|
50
|
+
ariaLabel: string;
|
|
51
|
+
padding: string;
|
|
52
|
+
position: "left" | "right";
|
|
53
|
+
backdrop: boolean;
|
|
54
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
|
|
55
|
+
export default _default;
|
|
56
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
57
|
+
new (): {
|
|
58
|
+
$slots: S;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { AvDrawerStub } from './drawers/AvDrawer/AvDrawer.stub';
|
|
2
|
+
export { default as AvDrawer } from './drawers/AvDrawer/AvDrawer.vue';
|
|
3
|
+
export { default as AvModal } from './modals/AvModal/AvModal.vue';
|
|
4
|
+
export { default as AvPopover } from './popovers/AvPopover/AvPopover.vue';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|