@avenirs-esr/avenirs-dsav 0.1.1 → 0.1.3

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.
Files changed (160) hide show
  1. package/dist/App.vue.d.ts +2 -0
  2. package/dist/avenirs-dsav.css +1 -1
  3. package/dist/avenirs-dsav.es.js +7375 -15307
  4. package/dist/avenirs-dsav.umd.js +73 -110
  5. package/dist/components/badges/AvBadge/AvBadge.stories.d.ts +44 -0
  6. package/dist/components/badges/AvBadge/AvBadge.stub.d.ts +30 -0
  7. package/dist/components/badges/AvBadge/AvBadge.test.d.ts +1 -0
  8. package/dist/components/badges/AvBadge/AvBadge.vue.d.ts +44 -0
  9. package/dist/components/badges/index.d.ts +1 -0
  10. package/dist/components/base/AvIconText/AvIconText.stories.d.ts +36 -0
  11. package/dist/components/base/AvIconText/AvIconText.test.d.ts +1 -0
  12. package/dist/components/base/AvIconText/AvIconText.vue.d.ts +40 -0
  13. package/dist/components/base/AvNotice/AvNotice.stories.d.ts +63 -0
  14. package/dist/components/base/AvNotice/AvNotice.test.d.ts +1 -0
  15. package/dist/components/base/AvNotice/AvNotice.vue.d.ts +22 -0
  16. package/dist/components/base/AvVIcon/AvVIcon.stories.d.ts +47 -0
  17. package/dist/components/base/AvVIcon/AvVIcon.stub.d.ts +9 -0
  18. package/dist/components/base/AvVIcon/AvVIcon.vue.d.ts +54 -0
  19. package/dist/components/base/index.d.ts +2 -0
  20. package/dist/components/cards/AvCard/AvCard.stories.d.ts +28 -0
  21. package/dist/components/cards/AvCard/AvCard.test.d.ts +1 -0
  22. package/dist/components/cards/AvCard/AvCard.vue.d.ts +58 -0
  23. package/dist/components/cards/index.d.ts +1 -0
  24. package/dist/components/feedback/AvAlert/AvAlert.test.d.ts +1 -0
  25. package/dist/components/feedback/AvAlert/AvAlert.vue.d.ts +77 -0
  26. package/dist/components/feedback/AvToaster/AvToaster.test.d.ts +1 -0
  27. package/dist/components/feedback/AvToaster/AvToaster.vue.d.ts +79 -0
  28. package/dist/components/feedback/index.d.ts +2 -0
  29. package/dist/components/header/AvHeader/AvHeader.test.d.ts +1 -0
  30. package/dist/components/header/AvHeader/AvHeader.vue.d.ts +132 -0
  31. package/dist/components/header/AvHeaderMenuLinks/AvHeaderMenuLinks.test.d.ts +1 -0
  32. package/dist/components/header/AvHeaderMenuLinks/AvHeaderMenuLinks.vue.d.ts +38 -0
  33. package/dist/components/header/AvLogo.vue.d.ts +2 -0
  34. package/dist/components/header/EsupLogo.test.d.ts +1 -0
  35. package/dist/components/header/EsupLogo.vue.d.ts +7 -0
  36. package/dist/components/header/index.d.ts +5 -0
  37. package/dist/components/index.d.ts +8 -0
  38. package/dist/components/interaction/accordions/AvAccordion/AvAccordion.stories.d.ts +30 -0
  39. package/dist/components/interaction/accordions/AvAccordion/AvAccordion.test.d.ts +1 -0
  40. package/dist/components/interaction/accordions/AvAccordion/AvAccordion.vue.d.ts +31 -0
  41. package/dist/components/interaction/accordions/AvAccordionsGroup/AvAccordionsGroup.stories.d.ts +48 -0
  42. package/dist/components/interaction/accordions/AvAccordionsGroup/AvAccordionsGroup.test.d.ts +1 -0
  43. package/dist/components/interaction/accordions/AvAccordionsGroup/AvAccordionsGroup.vue.d.ts +36 -0
  44. package/dist/components/interaction/accordions/index.d.ts +2 -0
  45. package/dist/components/interaction/buttons/AvButton/AvButton.stories.d.ts +75 -0
  46. package/dist/components/interaction/buttons/AvButton/AvButton.stub.d.ts +15 -0
  47. package/dist/components/interaction/buttons/AvButton/AvButton.test.d.ts +1 -0
  48. package/dist/components/interaction/buttons/AvButton/AvButton.vue.d.ts +78 -0
  49. package/dist/components/interaction/buttons/AvRichButton/AvRichButton.stories.d.ts +39 -0
  50. package/dist/components/interaction/buttons/AvRichButton/AvRichButton.test.d.ts +1 -0
  51. package/dist/components/interaction/buttons/AvRichButton/AvRichButton.vue.d.ts +48 -0
  52. package/dist/components/interaction/buttons/index.d.ts +2 -0
  53. package/dist/components/interaction/files/AvFileUpload/AvFileUpload.stories.d.ts +30 -0
  54. package/dist/components/interaction/files/AvFileUpload/AvFileUpload.test.d.ts +1 -0
  55. package/dist/components/interaction/files/AvFileUpload/AvFileUpload.vue.d.ts +131 -0
  56. package/dist/components/interaction/files/AvFileUpload/AvFileUploadAlert.vue.d.ts +19 -0
  57. package/dist/components/interaction/files/index.d.ts +1 -0
  58. package/dist/components/interaction/index.d.ts +10 -0
  59. package/dist/components/interaction/inputs/AvInput/AvInput.stories.d.ts +71 -0
  60. package/dist/components/interaction/inputs/AvInput/AvInput.test.d.ts +1 -0
  61. package/dist/components/interaction/inputs/AvInput/AvInput.vue.d.ts +111 -0
  62. package/dist/components/interaction/inputs/index.d.ts +1 -0
  63. package/dist/components/interaction/lists/AvList/AvList.stories.d.ts +55 -0
  64. package/dist/components/interaction/lists/AvList/AvList.stub.d.ts +5 -0
  65. package/dist/components/interaction/lists/AvList/AvList.test.d.ts +1 -0
  66. package/dist/components/interaction/lists/AvList/AvList.vue.d.ts +74 -0
  67. package/dist/components/interaction/lists/AvListItem/AvListItem.stories.d.ts +59 -0
  68. package/dist/components/interaction/lists/AvListItem/AvListItem.stub.d.ts +19 -0
  69. package/dist/components/interaction/lists/AvListItem/AvListItem.test.d.ts +1 -0
  70. package/dist/components/interaction/lists/AvListItem/AvListItem.vue.d.ts +112 -0
  71. package/dist/components/interaction/lists/index.d.ts +2 -0
  72. package/dist/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.stories.d.ts +24 -0
  73. package/dist/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.test.d.ts +1 -0
  74. package/dist/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.vue.d.ts +23 -0
  75. package/dist/components/interaction/pickers/AvTagPicker/AvTagPicker.stories.d.ts +96 -0
  76. package/dist/components/interaction/pickers/AvTagPicker/AvTagPicker.stub.d.ts +11 -0
  77. package/dist/components/interaction/pickers/AvTagPicker/AvTagPicker.test.d.ts +1 -0
  78. package/dist/components/interaction/pickers/AvTagPicker/AvTagPicker.vue.d.ts +79 -0
  79. package/dist/components/interaction/pickers/index.d.ts +2 -0
  80. package/dist/components/interaction/radios/AvRadioButton/AvRadioButton.stories.d.ts +34 -0
  81. package/dist/components/interaction/radios/AvRadioButton/AvRadioButton.test.d.ts +1 -0
  82. package/dist/components/interaction/radios/AvRadioButton/AvRadioButton.vue.d.ts +38 -0
  83. package/dist/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.stories.d.ts +54 -0
  84. package/dist/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.test.d.ts +1 -0
  85. package/dist/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.vue.d.ts +76 -0
  86. package/dist/components/interaction/radios/index.d.ts +2 -0
  87. package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.stories.d.ts +553 -0
  88. package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.stub.d.ts +28 -0
  89. package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.test.d.ts +1 -0
  90. package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.types.d.ts +101 -0
  91. package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.vue.d.ts +204 -0
  92. package/dist/components/interaction/selects/AvAutocomplete/AvAutocompleteContext.d.ts +14 -0
  93. package/dist/components/interaction/selects/AvAutocomplete/AvAutocompleteDropdown.vue.d.ts +60 -0
  94. package/dist/components/interaction/selects/AvAutocomplete/AvAutocompleteInput.vue.d.ts +309 -0
  95. package/dist/components/interaction/selects/AvAutocomplete/AvAutocompleteSelectedTags.vue.d.ts +42 -0
  96. package/dist/components/interaction/selects/AvSelect/AvSelect.stories.d.ts +103 -0
  97. package/dist/components/interaction/selects/AvSelect/AvSelect.stub.d.ts +15 -0
  98. package/dist/components/interaction/selects/AvSelect/AvSelect.test.d.ts +1 -0
  99. package/dist/components/interaction/selects/AvSelect/AvSelect.vue.d.ts +63 -0
  100. package/dist/components/interaction/selects/index.d.ts +3 -0
  101. package/dist/components/interaction/tabs/AvTab/AvTab.stories.d.ts +34 -0
  102. package/dist/components/interaction/tabs/AvTab/AvTab.test.d.ts +1 -0
  103. package/dist/components/interaction/tabs/AvTab/AvTab.vue.d.ts +31 -0
  104. package/dist/components/interaction/tabs/AvTabs/AvTabs.stories.d.ts +51 -0
  105. package/dist/components/interaction/tabs/AvTabs/AvTabs.test.d.ts +1 -0
  106. package/dist/components/interaction/tabs/AvTabs/AvTabs.vue.d.ts +40 -0
  107. package/dist/components/interaction/tabs/index.d.ts +2 -0
  108. package/dist/components/interaction/toggles/AvToggle/AvToggle.stories.d.ts +21 -0
  109. package/dist/components/interaction/toggles/AvToggle/AvToggle.test.d.ts +1 -0
  110. package/dist/components/interaction/toggles/AvToggle/AvToggle.vue.d.ts +46 -0
  111. package/dist/components/interaction/toggles/index.d.ts +1 -0
  112. package/dist/components/navigation/AvNavigation/AvNavigation.stories.d.ts +34 -0
  113. package/dist/components/navigation/AvNavigation/AvNavigation.test.d.ts +1 -0
  114. package/dist/components/navigation/AvNavigation/AvNavigation.vue.d.ts +16 -0
  115. package/dist/components/navigation/AvNavigation/index.d.ts +1 -0
  116. package/dist/components/navigation/AvPagination/AvPagination.test.d.ts +1 -0
  117. package/dist/components/navigation/AvPagination/AvPagination.vue.d.ts +57 -0
  118. package/dist/components/navigation/AvPagination/utils.d.ts +14 -0
  119. package/dist/components/navigation/AvPagination/utils.test.d.ts +1 -0
  120. package/dist/components/navigation/AvSideMenu/AvSideMenu.stories.d.ts +55 -0
  121. package/dist/components/navigation/AvSideMenu/AvSideMenu.test.d.ts +1 -0
  122. package/dist/components/navigation/AvSideMenu/AvSideMenu.vue.d.ts +61 -0
  123. package/dist/components/navigation/AvSideNavigation/AvSideNavigation.stories.d.ts +58 -0
  124. package/dist/components/navigation/AvSideNavigation/AvSideNavigation.stub.d.ts +16 -0
  125. package/dist/components/navigation/AvSideNavigation/AvSideNavigation.test.d.ts +1 -0
  126. package/dist/components/navigation/AvSideNavigation/AvSideNavigation.vue.d.ts +38 -0
  127. package/dist/components/navigation/index.d.ts +5 -0
  128. package/dist/components/overlay/drawers/AvDrawer/AvDrawer.stories.d.ts +53 -0
  129. package/dist/components/overlay/drawers/AvDrawer/AvDrawer.stub.d.ts +11 -0
  130. package/dist/components/overlay/drawers/AvDrawer/AvDrawer.test.d.ts +1 -0
  131. package/dist/components/overlay/drawers/AvDrawer/AvDrawer.vue.d.ts +60 -0
  132. package/dist/components/overlay/index.d.ts +3 -0
  133. package/dist/components/overlay/modals/AvModal/AvModal.test.d.ts +1 -0
  134. package/dist/components/overlay/modals/AvModal/AvModal.vue.d.ts +74 -0
  135. package/dist/components/overlay/popovers/AvPopover/AvPopover.stories.d.ts +49 -0
  136. package/dist/components/overlay/popovers/AvPopover/AvPopover.test.d.ts +1 -0
  137. package/dist/components/overlay/popovers/AvPopover/AvPopover.vue.d.ts +48 -0
  138. package/dist/components/overlay/popovers/AvPopover/use-popover.d.ts +41 -0
  139. package/dist/components/overlay/popovers/AvPopover/use-popover.test.d.ts +1 -0
  140. package/dist/composables/index.d.ts +1 -0
  141. package/dist/composables/use-focus-trap/use-focus-trap.d.ts +25 -0
  142. package/dist/composables/use-focus-trap/use-focus-trap.test.d.ts +1 -0
  143. package/dist/config/index.d.ts +1 -0
  144. package/dist/config/page-sizes.d.ts +6 -0
  145. package/dist/index.d.ts +5 -0
  146. package/dist/main.d.ts +8 -0
  147. package/dist/stories/foundations/icons.stories.d.ts +6 -0
  148. package/dist/stories/foundations/typography.stories.d.ts +5 -0
  149. package/dist/tests/index.d.ts +2 -0
  150. package/dist/tests/stubs.d.ts +62 -0
  151. package/dist/tests/utils.d.ts +34 -0
  152. package/dist/tokens/icons.d.ts +79 -0
  153. package/dist/tokens/index.d.ts +1 -0
  154. package/dist/utils/array/array.d.ts +8 -0
  155. package/dist/utils/forms/form.test.d.ts +1 -0
  156. package/dist/utils/forms/forms.d.ts +6 -0
  157. package/dist/utils/index.d.ts +3 -0
  158. package/dist/utils/string/string.d.ts +21 -0
  159. package/dist/utils/string/string.test.d.ts +1 -0
  160. package/package.json +4 -3
@@ -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
+ padding: string;
51
+ width: 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,58 @@
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;
@@ -0,0 +1,16 @@
1
+ export declare const AvSideNavigationStub: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
2
+ items: ArrayConstructor;
3
+ selectedItem: StringConstructor;
4
+ isSideMenuCollapsed: BooleanConstructor;
5
+ collapsedWidth: StringConstructor;
6
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:selectedItem" | "update:isSideMenuCollapsed")[], "update:selectedItem" | "update:isSideMenuCollapsed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
7
+ items: ArrayConstructor;
8
+ selectedItem: StringConstructor;
9
+ isSideMenuCollapsed: BooleanConstructor;
10
+ collapsedWidth: StringConstructor;
11
+ }>> & Readonly<{
12
+ "onUpdate:selectedItem"?: ((...args: any[]) => any) | undefined;
13
+ "onUpdate:isSideMenuCollapsed"?: ((...args: any[]) => any) | undefined;
14
+ }>, {
15
+ isSideMenuCollapsed: boolean;
16
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -0,0 +1,38 @@
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
+ type __VLS_Props = AvSideNavigationProps;
25
+ type __VLS_PublicProps = __VLS_Props & {
26
+ 'selectedItem'?: string;
27
+ 'isSideMenuCollapsed'?: boolean;
28
+ };
29
+ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
30
+ "update:selectedItem": (...args: unknown[]) => any;
31
+ "update:isSideMenuCollapsed": (...args: unknown[]) => any;
32
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
33
+ "onUpdate:selectedItem"?: ((...args: unknown[]) => any) | undefined;
34
+ "onUpdate:isSideMenuCollapsed"?: ((...args: unknown[]) => any) | undefined;
35
+ }>, {
36
+ collapsedWidth: string;
37
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
38
+ export default _default;
@@ -0,0 +1,5 @@
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 { default as AvSideNavigation, type AvSideNavigationItem, type AvSideNavigationProps } from './AvSideNavigation/AvSideNavigation.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,11 @@
1
+ export declare const AvDrawerStub: import("vue").DefineComponent<{
2
+ width?: any;
3
+ show?: any;
4
+ position?: any;
5
+ }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "escape-pressed"[], "escape-pressed", import("vue").PublicProps, Readonly<{
6
+ width?: any;
7
+ show?: any;
8
+ position?: any;
9
+ }> & Readonly<{
10
+ "onEscape-pressed"?: ((...args: any[]) => any) | undefined;
11
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -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
+ ariaLabel: string;
50
+ padding: string;
51
+ width: 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,3 @@
1
+ export { default as AvDrawer } from './drawers/AvDrawer/AvDrawer.vue';
2
+ export { default as AvModal } from './modals/AvModal/AvModal.vue';
3
+ export { default as AvPopover } from './popovers/AvPopover/AvPopover.vue';
@@ -0,0 +1,74 @@
1
+ import type { Slot } from 'vue';
2
+ import { type AvButtonProps } from '@/components/interaction';
3
+ /**
4
+ * AvModal component props.
5
+ */
6
+ export interface AvModalProps {
7
+ /**
8
+ * Variant of the close button: without border (`DEFAULT`) or with border (`OUTLINED`).
9
+ * @default 'DEFAULT'
10
+ */
11
+ closeButtonVariant?: AvButtonProps['variant'];
12
+ /**
13
+ * Unique identifier for the modal.
14
+ * @default useRandomId('modal', 'dialog')
15
+ */
16
+ modalId?: string;
17
+ /**
18
+ * Indicates whether the modal is open.
19
+ * @default false
20
+ */
21
+ opened?: boolean;
22
+ /**
23
+ * Specifies whether the modal is an alert (role `"alertdialog"` if `true`) or not (role will be `"dialog"`).
24
+ * @default false
25
+ */
26
+ isAlert?: boolean;
27
+ /**
28
+ * Reference to original element to restore focus after closing.
29
+ * @default { focus() {} }
30
+ */
31
+ origin?: {
32
+ focus: () => void;
33
+ };
34
+ /**
35
+ * Name of icon to be displayed in modal title.
36
+ */
37
+ icon?: string;
38
+ /**
39
+ * Modal size.
40
+ * @default 'md'
41
+ */
42
+ size?: 'sm' | 'md' | 'lg' | 'xl';
43
+ /**
44
+ * Label and title (for accessibility) of the close button.
45
+ */
46
+ closeButtonLabel: string;
47
+ /**
48
+ * Adds a loading state on the close button.
49
+ */
50
+ isLoading?: boolean;
51
+ }
52
+ /**
53
+ * Slots available in the component.
54
+ *
55
+ * @slot default - Default slot for modal content.
56
+ * @slot header - Slot for modal title.
57
+ * @slot footer - Slot for modal footer.
58
+ */
59
+ type __VLS_Slots = {
60
+ default?: Slot;
61
+ header?: Slot;
62
+ footer?: Slot;
63
+ };
64
+ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
65
+ close: () => any;
66
+ }, string, import("vue").PublicProps, Readonly<AvModalProps> & Readonly<{
67
+ onClose?: (() => any) | undefined;
68
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
69
+ export default _default;
70
+ type __VLS_WithSlots<T, S> = T & {
71
+ new (): {
72
+ $slots: S;
73
+ };
74
+ };
@@ -0,0 +1,49 @@
1
+ import type { Meta, StoryFn } from '@storybook/vue3';
2
+ import { type AvPopoverProps } from '@/components/overlay/popovers/AvPopover/AvPopover.vue';
3
+ /**
4
+ * <h1 class="n1">Popovers - <code>AvPopover</code></h1>
5
+ *
6
+ * <h2 class="n2">🌟 Introduction</h2>
7
+ *
8
+ * <p>
9
+ * <span class="b2-regular">
10
+ * The popover is a contextual container that is displayed as an overlay near its trigger element.
11
+ * This component can be used to display additional content or interactions, without leaving the current page or completely obscuring its context.
12
+ * </span>
13
+ * </p>
14
+ *
15
+ * <p>
16
+ * <span class="b2-regular">
17
+ * The <code>AvPopover</code> component is designed to offer accessible, ergonomic content,
18
+ * by trapping the focus inside the popover when it's open, and managing closure via the Escape key.
19
+ * It offers great flexibility via dedicated trigger (<code>trigger</code>) and content (<code>popover</code>) slots,
20
+ * allowing any content or interaction to be inserted.
21
+ * </span>
22
+ * </p>
23
+ *
24
+ * <p>
25
+ * <span class="b2-regular">
26
+ * It uses a dynamic positioning system to display itself in the right place in relation to its trigger,
27
+ * while guaranteeing good keyboard control and a good user experience.
28
+ * </span>
29
+ * </p>
30
+ *
31
+ * <h2 class="n2">📐 Structure</h2>
32
+ *
33
+ * <p><span class="b2-regular">The popover consists of the following elements:</span></p>
34
+ *
35
+ * <ul>
36
+ * <li><span class="b2-regular">The trigger (slot <code>trigger</code>), mandatory: Interactive element (for example, a button) that opens or closes the popover.</span></li>
37
+ * <li><span class="b2-regular">The content (slot <code>popover</code>), mandatory: Content area that can contain text, buttons, lists or any other interactive element. This zone is displayed close to the trigger and captures the focus when opened.</span></li>
38
+ * </ul>
39
+ *
40
+ * <p><span class="b2-regular">The popover integrates :</span></p>
41
+ *
42
+ * <ul>
43
+ * <li><span class="b2-regular">Focus trap for keyboard accessibility.</span></li>
44
+ * <li><span class="b2-regular">Close by pressing the Escape key or clicking outside the popover.</span></li>
45
+ * </ul>
46
+ */
47
+ declare const meta: Meta<AvPopoverProps>;
48
+ export default meta;
49
+ export declare const Default: StoryFn<AvPopoverProps>;
@@ -0,0 +1,48 @@
1
+ import { type ComponentPublicInstance } from 'vue';
2
+ /**
3
+ * AvPopover component props.
4
+ */
5
+ export interface AvPopoverProps {
6
+ /**
7
+ * Popover width.
8
+ * @default '12.5rem'
9
+ */
10
+ width?: string;
11
+ /**
12
+ * Internal popover padding.
13
+ * @default 'var(--spacing-md)'
14
+ */
15
+ padding?: string;
16
+ }
17
+ type __VLS_Slots = {
18
+ /**
19
+ * Slot for the popover trigger.
20
+ * Provides the prop:
21
+ * - toggle: function to open/close the popover
22
+ */
23
+ trigger: (props: {
24
+ toggle: () => void;
25
+ }) => void;
26
+ /**
27
+ * Slot for the popover content.
28
+ * Provides the prop:
29
+ * - close: function to close the popover
30
+ */
31
+ popover: (props: {
32
+ close: () => void;
33
+ }) => void;
34
+ };
35
+ declare function setTriggerRef(el: Element | ComponentPublicInstance | null): void;
36
+ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvPopoverProps, {
37
+ setTriggerRef: typeof setTriggerRef;
38
+ triggerRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
39
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvPopoverProps> & Readonly<{}>, {
40
+ padding: string;
41
+ width: string;
42
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
43
+ export default _default;
44
+ type __VLS_WithSlots<T, S> = T & {
45
+ new (): {
46
+ $slots: S;
47
+ };
48
+ };
@@ -0,0 +1,41 @@
1
+ import { type Ref } from 'vue';
2
+ /**
3
+ * Result returned by the usePopover composable.
4
+ */
5
+ export interface UsePopoverReturn {
6
+ /** Indicates whether the popover is visible */
7
+ showPopover: Ref<boolean>;
8
+ /** Position of the popover in rem */
9
+ popoverPosition: Ref<{
10
+ top: number;
11
+ left: number;
12
+ }>;
13
+ /** Function to open/close the popover */
14
+ togglePopover: () => Promise<void>;
15
+ /** Function to close the popover */
16
+ closePopover: () => void;
17
+ }
18
+ /**
19
+ * Vue composable to manage the display state and position of a popover.
20
+ *
21
+ * This function provides:
22
+ * - a reactive `showPopover` state indicating whether the popover is visible,
23
+ * - a `popoverPosition` object calculating the top/left position in REM,
24
+ * - a `togglePopover` function to open or close the popover,
25
+ * - a `closePopover` function to explicitly close the popover,
26
+ *
27
+ * It also ensures that the popover is closed when an outside click is detected.
28
+ *
29
+ * The popover position is calculated based on the trigger element position,
30
+ * taking into account the window width to prevent the popover from overflowing.
31
+ *
32
+ * @param {Ref<HTMLElement | null>} triggerRef Reference to the popover trigger element.
33
+ * @param {Ref<HTMLElement | null>} popoverRef Reference to the popover DOM element.
34
+ *
35
+ * @returns {UsePopoverReturn} Object containing:
36
+ * - `showPopover` (Ref<boolean>): Visible state of the popover,
37
+ * - `popoverPosition` (Ref<{ top: number, left: number }>): Position calculated in rem,
38
+ * - `togglePopover` (function): Function to toggle the popover display,
39
+ * - `closePopover` (function): Function to close the popover.
40
+ */
41
+ export declare function usePopover(triggerRef: Ref<HTMLElement | null>, popoverRef: Ref<HTMLElement | null>): UsePopoverReturn;
@@ -0,0 +1 @@
1
+ export * from './use-focus-trap/use-focus-trap';
@@ -0,0 +1,25 @@
1
+ import type { Ref } from 'vue';
2
+ /**
3
+ * Result returned by the useFocusTrap composable.
4
+ */
5
+ export interface UseFocusTrapReturn {
6
+ /** Initializes and activates the focus trap on the referenced element */
7
+ initializeFocusTrap: () => void;
8
+ /** Disables and cleans the focus trap */
9
+ cleanupFocusTrap: () => void;
10
+ }
11
+ /**
12
+ * Vue composable to manage a focus trap on a DOM element.
13
+ *
14
+ * This composable uses the [focus-trap](https://github.com/focus-trap/focus-trap) library
15
+ * to enclose keyboard navigation within a given element (e.g., a modal).
16
+ *
17
+ * @param elementRef Reference to the DOM element to trap (focus trap)
18
+ * @param onClose Callback function called when the focus trap is disabled (e.g., closing)
19
+ *
20
+ * @returns {UseFocusTrapReturn} Object containing the functions to manage the focus trap:
21
+ * - `initializeFocusTrap`: Enables the focus trap,
22
+ * - `cleanupFocusTrap`: Disables and cleans the focus trap.
23
+ *
24
+ */
25
+ export declare function useFocusTrap(elementRef: Ref<HTMLElement | null>, onClose: () => void): UseFocusTrapReturn;
@@ -0,0 +1 @@
1
+ export * from './page-sizes';
@@ -0,0 +1,6 @@
1
+ export declare enum PageSizes {
2
+ FOUR = 4,
3
+ EIGHT = 8,
4
+ TWELVE = 12
5
+ }
6
+ export declare const pageSizeValues: readonly [PageSizes.FOUR, PageSizes.EIGHT, PageSizes.TWELVE];
@@ -0,0 +1,5 @@
1
+ export * from './components';
2
+ export * from './composables';
3
+ export * from './tests';
4
+ export * from './tokens';
5
+ export * from './utils';
package/dist/main.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import '@gouvfr/dsfr/dist/core/core.main.min.css';
2
+ import '@gouvfr/dsfr/dist/component/component.main.min.css';
3
+ import '@gouvfr/dsfr/dist/utility/utility.main.min.css';
4
+ import '@gouvminint/vue-dsfr/styles';
5
+ import '@gouvfr/dsfr/dist/scheme/scheme.min.css';
6
+ import '@gouvfr/dsfr/dist/utility/icons/icons.min.css';
7
+ import './main.css';
8
+ import '@/styles/main.scss';
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryFn } from '@storybook/vue3';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ export declare const AllIcons: StoryFn;
5
+ export declare const MdiIcons: StoryFn;
6
+ export declare const RiIcons: StoryFn;
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryFn } from '@storybook/vue3';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ export declare const Titles: StoryFn;
5
+ export declare const Texts: StoryFn;
@@ -0,0 +1,2 @@
1
+ export * from './stubs';
2
+ export * from './utils';