@avenirs-esr/avenirs-dsav 0.1.76 → 0.1.78

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 (79) hide show
  1. package/dist/avenirs-dsav.css +1 -3
  2. package/dist/components/badges/AvBadge/AvBadge.stories.d.ts +1 -1
  3. package/dist/components/badges/AvBadge/AvBadge.vue.d.ts +0 -10
  4. package/dist/components/badges/AvTag/AvTag.stories.d.ts +0 -1
  5. package/dist/components/badges/AvTag/AvTag.vue.d.ts +0 -20
  6. package/dist/components/base/AvFieldset/AvFieldset.vue.d.ts +24 -4
  7. package/dist/components/base/AvFieldsetElement/AvFieldsetElement.vue.d.ts +29 -0
  8. package/dist/components/base/AvIconText/AvIconText.stub.d.ts +7 -0
  9. package/dist/components/base/AvMessage/AvMessage.stories.d.ts +27 -0
  10. package/dist/components/base/AvMessage/AvMessage.test.d.ts +1 -0
  11. package/dist/components/base/AvMessage/AvMessage.vue.d.ts +21 -0
  12. package/dist/components/base/AvNotice/AvNotice.stories.d.ts +1 -0
  13. package/dist/components/base/index.d.ts +1 -0
  14. package/dist/components/feedback/AvAlert/AvAlert.stories.d.ts +69 -0
  15. package/dist/components/feedback/AvAlert/AvAlert.vue.d.ts +0 -5
  16. package/dist/components/interaction/buttons/AvButton/AvButton.stories.d.ts +1 -1
  17. package/dist/components/interaction/buttons/AvButton/AvButton.vue.d.ts +9 -9
  18. package/dist/components/interaction/checkboxes/AvCheckbox/AvChecbox.stories.d.ts +4 -0
  19. package/dist/components/interaction/checkboxes/AvCheckbox/AvCheckbox.vue.d.ts +1 -1
  20. package/dist/components/interaction/checkboxes/AvCheckboxesGroup/AvCheckboxesGroup.stories.d.ts +38 -0
  21. package/dist/components/interaction/checkboxes/AvCheckboxesGroup/AvCheckboxesGroup.vue.d.ts +46 -0
  22. package/dist/components/interaction/checkboxes/index.d.ts +1 -0
  23. package/dist/components/interaction/inputs/AvSearchBar/AvSearchBar.vue.d.ts +3 -0
  24. package/dist/components/interaction/lists/AvList/AvList.stories.d.ts +2 -2
  25. package/dist/components/interaction/lists/AvListItem/AvListItem.stories.d.ts +4 -4
  26. package/dist/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.stories.d.ts +1 -0
  27. package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.stories.d.ts +9 -0
  28. package/dist/components/interaction/selects/AvMultiselect/AvMultiselect.stories.d.ts +3 -0
  29. package/dist/components/interaction/selects/AvMultiselect/AvMultiselect.vue.d.ts +0 -5
  30. package/dist/components/interaction/selects/AvMultiselect/components/MultiselectCollapse.vue.d.ts +2 -13
  31. package/dist/components/interaction/selects/AvSelect/AvSelect.stories.d.ts +1 -1
  32. package/dist/components/interaction/selects/AvSelect/AvSelect.vue.d.ts +3 -0
  33. package/dist/components/navigation/AvPagination/AvPagination.stories.d.ts +28 -0
  34. package/dist/components/navigation/AvSideMenu/AvSideMenu.stories.d.ts +3 -3
  35. package/dist/components/navigation/AvSideNavigation/AvSideNavigation.stories.d.ts +4 -4
  36. package/dist/components/navigation/AvStepper/AvStepper.vue.d.ts +1 -3
  37. package/dist/components/overlay/drawers/AvDrawer/AvDrawer.stories.d.ts +3 -3
  38. package/dist/components/overlay/dropdowns/AvDropdown/AvDropdown.stub.d.ts +2 -2
  39. package/dist/components/overlay/dropdowns/AvDropdown/AvDropdown.vue.d.ts +6 -6
  40. package/dist/components/overlay/modals/AvModal/AvModal.stories.d.ts +36 -0
  41. package/dist/components/overlay/modals/AvModal/AvModal.vue.d.ts +0 -5
  42. package/dist/components/overlay/popovers/AvPopover/AvPopover.vue.d.ts +1 -5
  43. package/dist/composables/use-av-breakpoints/use-av-breakpoints.d.ts +3 -0
  44. package/dist/composables/use-collapsable/use-collapsable.d.ts +1 -1
  45. package/dist/index.cjs.js +5 -5
  46. package/dist/index.es.js +6245 -6128
  47. package/dist/main.d.ts +0 -5
  48. package/dist/stories/foundations/icons.stories.d.ts +1 -0
  49. package/dist/test-utils.cjs.js +15 -15
  50. package/dist/test-utils.es.js +37 -32
  51. package/dist/tests/index.d.ts +2 -1
  52. package/dist/tokens/icons.d.ts +12 -0
  53. package/package.json +1 -2
  54. package/src/styles/components/_buttons.scss +9 -0
  55. package/src/styles/components/_collapse.scss +37 -0
  56. package/src/styles/components/_footer.scss +15 -0
  57. package/src/styles/components/_form.scss +50 -0
  58. package/src/styles/components/_grid.scss +182 -0
  59. package/src/styles/components/_links.scss +6 -0
  60. package/src/styles/components/_menu.scss +59 -0
  61. package/src/styles/components/_navigation.scss +122 -0
  62. package/src/styles/components/_selects.scss +13 -0
  63. package/src/styles/{texts.scss → components/_texts.scss} +11 -0
  64. package/src/styles/core/_accessibility.scss +14 -0
  65. package/src/styles/core/_cursors.scss +47 -0
  66. package/src/styles/{dimensions.scss → core/_dimensions.scss} +1 -0
  67. package/src/styles/core/_focus.scss +66 -0
  68. package/src/styles/core/_hover.scss +22 -0
  69. package/src/styles/core/_namespace.scss +9 -0
  70. package/src/styles/{palette.scss → core/_palette.scss} +2 -0
  71. package/src/styles/core/_spacing.scss +33 -0
  72. package/src/styles/{typography.scss → core/_typography.scss} +40 -1
  73. package/src/styles/main.scss +41 -25
  74. package/src/styles/settings/_breakpoints.scss +33 -0
  75. package/src/styles/utilities/_helpers.scss +136 -0
  76. package/src/styles/utilities/_spacing.scss +48 -0
  77. package/src/styles/buttons.scss +0 -24
  78. package/src/styles/spacing.scss +0 -21
  79. /package/src/styles/{radius.scss → core/_radius.scss} +0 -0
@@ -15,7 +15,7 @@ import { type AvBadgeProps } from '@/components/badges/AvBadge/AvBadge.vue';
15
15
  *
16
16
  * <ul>
17
17
  * <li>
18
- * <span class="b2-regular">The component is a <code>p</code> element with the <code>fr-badge</code> class.</span>
18
+ * <span class="b2-regular">The component is a <code>p</code> element with the <code>av-badge</code> class.</span>
19
19
  * </li>
20
20
  * <li>
21
21
  * <span class="b2-regular">Props allow you to modify the badge appearance according to the props: color, icon presence, size, and handling of overly long text.</span>
@@ -20,16 +20,6 @@ export interface AvBadgeProps {
20
20
  * The text to display in the badge.
21
21
  */
22
22
  label: string;
23
- /**
24
- * Sets the badge type.
25
- * @default 'info'
26
- */
27
- type?: 'success' | 'error' | 'new' | 'info' | 'warning' | undefined;
28
- /**
29
- * If true, the badge is displayed without an icon.
30
- * @default false
31
- */
32
- noIcon?: boolean | undefined;
33
23
  /**
34
24
  * If true, displays a reduced-size badge.
35
25
  * @default false
@@ -42,7 +42,6 @@ declare const meta: Meta<AvTagProps>;
42
42
  export default meta;
43
43
  export declare const Default: StoryFn<AvTagProps>;
44
44
  export declare const Small: StoryFn<AvTagProps>;
45
- export declare const WithLink: StoryFn<AvTagProps>;
46
45
  export declare const IconOnly: StoryFn<AvTagProps>;
47
46
  export declare const WithoutIcon: StoryFn<AvTagProps>;
48
47
  export declare const Selectable: StoryFn<AvTagProps>;
@@ -6,10 +6,6 @@ export type AvTagProps<T = string> = {
6
6
  * Displayed tag label.
7
7
  */
8
8
  label: string;
9
- /**
10
- * URL for external link. Also determines the tag type (`a` or `RouterLink`).
11
- */
12
- link?: string;
13
9
  /**
14
10
  * Tag name used for the tag (should be 'p' ou 'button').
15
11
  * @default 'p'
@@ -57,10 +53,6 @@ declare const _default: import("vue").DefineComponent<({
57
53
  * Displayed tag label.
58
54
  */
59
55
  label: string;
60
- /**
61
- * URL for external link. Also determines the tag type (`a` or `RouterLink`).
62
- */
63
- link?: string | undefined;
64
56
  /**
65
57
  * Tag name used for the tag (should be 'p' ou 'button').
66
58
  * @default 'p'
@@ -92,10 +84,6 @@ declare const _default: import("vue").DefineComponent<({
92
84
  * Displayed tag label.
93
85
  */
94
86
  label: string;
95
- /**
96
- * URL for external link. Also determines the tag type (`a` or `RouterLink`).
97
- */
98
- link?: string | undefined;
99
87
  /**
100
88
  * Tag name used for the tag (should be 'p' ou 'button').
101
89
  * @default 'p'
@@ -139,10 +127,6 @@ declare const _default: import("vue").DefineComponent<({
139
127
  * Displayed tag label.
140
128
  */
141
129
  label: string;
142
- /**
143
- * URL for external link. Also determines the tag type (`a` or `RouterLink`).
144
- */
145
- link?: string | undefined;
146
130
  /**
147
131
  * Tag name used for the tag (should be 'p' ou 'button').
148
132
  * @default 'p'
@@ -174,10 +158,6 @@ declare const _default: import("vue").DefineComponent<({
174
158
  * Displayed tag label.
175
159
  */
176
160
  label: string;
177
- /**
178
- * URL for external link. Also determines the tag type (`a` or `RouterLink`).
179
- */
180
- link?: string | undefined;
181
161
  /**
182
162
  * Tag name used for the tag (should be 'p' ou 'button').
183
163
  * @default 'p'
@@ -10,7 +10,7 @@ export interface AvFieldsetProps {
10
10
  legend?: string;
11
11
  /**
12
12
  * `<legend>` tag class
13
- * @default ''
13
+ * @default 'caption-regular'
14
14
  */
15
15
  legendClass?: string;
16
16
  /**
@@ -28,6 +28,26 @@ export interface AvFieldsetProps {
28
28
  * @default ''
29
29
  */
30
30
  hintClass?: string;
31
+ /**
32
+ * Error message to be displayed under the fieldset
33
+ * @default ''
34
+ */
35
+ errorMessage?: string;
36
+ /**
37
+ * Success message to be displayed under the fieldset
38
+ * @default ''
39
+ */
40
+ successMessage?: string;
41
+ /**
42
+ * Displays the fieldset in its inline version
43
+ * @default false
44
+ */
45
+ inline?: boolean;
46
+ /**
47
+ * Indicates if the fieldset is required
48
+ * @default false
49
+ */
50
+ required?: boolean;
31
51
  }
32
52
  /**
33
53
  * Slots available in the AvFieldset component.
@@ -39,18 +59,18 @@ export interface AvFieldsetProps {
39
59
  type __VLS_Slots = {
40
60
  /**
41
61
  * Slot by default for the content of the fieldset
42
- * (will be inside `<div class="fr-fieldset__element">`)
62
+ * (must be components with AvFieldsetElement as root element).
43
63
  */
44
64
  default?: Slot;
45
65
  /**
46
66
  * Slot for the content of the title of the `fieldset`
47
- * (will be inside `<legend class="fr-fieldset__legend">`).
67
+ * (will be inside `<legend class="av-fieldset__legend">`).
48
68
  * A `legend` prop can be used for simple text.
49
69
  */
50
70
  legend?: Slot;
51
71
  /**
52
72
  * Slot for the content of the hint.
53
- * (will be inside `<span class="fr-hint-text">` that will be inside `</legend>`).
73
+ * (will be inside `<span class="av-hint-text">` that will be inside `</legend>`).
54
74
  * A `hint` prop can be used for simple text.
55
75
  */
56
76
  hint?: Slot;
@@ -0,0 +1,29 @@
1
+ import type { Slot } from 'vue';
2
+ /**
3
+ * AvFieldsetElement component props.
4
+ */
5
+ export interface AvFieldsetProps {
6
+ /**
7
+ * Simulates a disabled state to make the fieldset element as disabled
8
+ * @default false
9
+ */
10
+ disabled?: boolean;
11
+ }
12
+ /**
13
+ * Slots available in the AvFieldsetElement component.
14
+ *
15
+ * @slot default - Default slot for the content of the fieldset element.
16
+ */
17
+ type __VLS_Slots = {
18
+ /**
19
+ * Slot by default for the content of the fieldset element
20
+ */
21
+ default?: Slot;
22
+ };
23
+ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvFieldsetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvFieldsetProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
24
+ export default _default;
25
+ type __VLS_WithSlots<T, S> = T & {
26
+ new (): {
27
+ $slots: S;
28
+ };
29
+ };
@@ -0,0 +1,7 @@
1
+ export declare const AvIconTextStub: import("vue").DefineComponent<{
2
+ text?: any;
3
+ icon?: any;
4
+ }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
5
+ text?: any;
6
+ icon?: any;
7
+ }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -0,0 +1,27 @@
1
+ import type { Meta, StoryFn } from '@storybook/vue3';
2
+ import { type AvMessageProps } from './AvMessage.vue';
3
+ /**
4
+ * <h1 class="n1">Messages - <code>AvMessage</code></h1>
5
+ *
6
+ * <h2 class="n2">✨ Introduction</h2>
7
+ *
8
+ * <p class="b2-regular">
9
+ * The <code>AvMessage</code> component allows you to display short texts accompanied by an icon on the left,
10
+ * depending on the type of information. This component is useful for displaying contextual feedback messages,
11
+ * such as errors or successes, to the user.
12
+ * </p>
13
+ *
14
+ * <h2 class="n2">🏗️ Structure</h2>
15
+ *
16
+ * <ul>
17
+ * <li>The component is based on an <code>AvIconText</code> element.</li>
18
+ * <li>The icon and color are automatically adjusted according to the <code>type</code> prop.</li>
19
+ * <li>Common types include <code>error</code> and <code>success</code>.</li>
20
+ * </ul>
21
+ */
22
+ declare const meta: Meta<AvMessageProps>;
23
+ export default meta;
24
+ export declare const Info: StoryFn<AvMessageProps>;
25
+ export declare const Success: StoryFn<AvMessageProps>;
26
+ export declare const Warning: StoryFn<AvMessageProps>;
27
+ export declare const Error: StoryFn<AvMessageProps>;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,21 @@
1
+ /**
2
+ * AvMessageElement component props.
3
+ */
4
+ export interface AvMessageProps {
5
+ /**
6
+ * Unique ID of the component
7
+ * @default `message-${crypto.randomUUID()}`
8
+ */
9
+ messageId?: string;
10
+ /**
11
+ * Defines the type of message to display
12
+ */
13
+ type: 'info' | 'success' | 'warning' | 'error';
14
+ /**
15
+ * Message text to display
16
+ * @default undefined
17
+ */
18
+ message?: string | string[];
19
+ }
20
+ declare const _default: import("vue").DefineComponent<AvMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvMessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
+ export default _default;
@@ -54,3 +54,4 @@ export default meta;
54
54
  export declare const Default: StoryFn<AvNoticeProps>;
55
55
  export declare const InfoNotice: StoryFn<AvNoticeProps>;
56
56
  export declare const AlertNotice: StoryFn<AvNoticeProps>;
57
+ export declare const WithoutTitle: StoryFn<AvNoticeProps>;
@@ -1,4 +1,5 @@
1
1
  export { default as AvFieldset } from './AvFieldset/AvFieldset.vue';
2
+ export { default as AvFieldsetElement } from './AvFieldsetElement/AvFieldsetElement.vue';
2
3
  export { default as AvIcon } from './AvIcon/AvIcon.vue';
3
4
  export { default as AvIconText } from './AvIconText/AvIconText.vue';
4
5
  export { default as AvNotice } from './AvNotice/AvNotice.vue';
@@ -0,0 +1,69 @@
1
+ import type { Meta, StoryFn } from '@storybook/vue3';
2
+ import { type AvAlertProps } from '@/components/feedback/AvAlert/AvAlert.vue';
3
+ /**
4
+ * <h1 class="n1">Alerts - <code>AvAlert</code></h1>
5
+ *
6
+ * <h2 class="n2">✨ Introduction</h2>
7
+ *
8
+ * <p class="b2-regular">
9
+ * The <code>AvAlert</code> component is intended for use in the <code>AvToaster</code> component.
10
+ * Alerts draw the user attention to information without interrupting their current task.
11
+ * </p>
12
+ *
13
+ * <p class="b2-regular">
14
+ * The alert is available in two sizes:
15
+ * <ul>
16
+ * <li>medium size (MD, by default, if the <code>small</code> prop is absent or set to <code>false</code>)</li>
17
+ * <li>small size (SM) if the <code>small</code> prop is set to <code>true</code>)</li>
18
+ * </ul>
19
+ * </p>
20
+ *
21
+ * <h2 class="n2">🏗️ Structure</h2>
22
+ *
23
+ * <p class="b2-regular">
24
+ * The alert consists of the following elements:
25
+ * <ul>
26
+ * <li>a title (prop <code>title</code>, of type <code>string</code>):
27
+ * <ul>
28
+ * <li>mandatory on the MD version (if the <code>small</code> prop is absent or set to <code>false</code>)</li>
29
+ * <li>optional on the SM version (if the <code>small</code> prop is set to <code>true</code>)</li>
30
+ * </ul>
31
+ * </li>
32
+ * <li>an icon and a color determined by the <code>type</code> prop:
33
+ * <ul>
34
+ * <li><code>info</code> (default if <code>type</code> is absent)</li>
35
+ * <li><code>success</code></li>
36
+ * <li><code>warning</code></li>
37
+ * <li><code>error</code></li>
38
+ * </ul>
39
+ * </li>
40
+ * <li>a description text (prop <code>description</code>, of type <code>string</code>):
41
+ * <ul>
42
+ * <li>optional on the MD version</li>
43
+ * <li>mandatory on the SM version</li>
44
+ * <li>the default <code>slot</code> can be used as a description</li>
45
+ * </ul>
46
+ * </li>
47
+ * <li>a closing cross if the <code>closeable</code> prop is set to <code>true</code></li>
48
+ * </ul>
49
+ * </p>
50
+ *
51
+ * <p class="b2-regular">
52
+ * Other props:
53
+ * <ul>
54
+ * <li><code>closed</code> indicates whether the alert should be present (<code>false</code>) or not (<code>true</code>) in the DOM</li>
55
+ * <li><code>closeButtonLabel</code> specifies the label and aria-label of the alert close button; default is <code>Close</code></li>
56
+ * </ul>
57
+ * </p>
58
+ */
59
+ declare const meta: Meta<AvAlertProps>;
60
+ export default meta;
61
+ export declare const Default: StoryFn<AvAlertProps>;
62
+ export declare const Closeable: StoryFn<AvAlertProps>;
63
+ export declare const Small: StoryFn<AvAlertProps>;
64
+ export declare const SuccessAlert: StoryFn<AvAlertProps>;
65
+ export declare const ErrorAlert: StoryFn<AvAlertProps>;
66
+ export declare const WarningAlert: StoryFn<AvAlertProps>;
67
+ export declare const MultipleAlerts: StoryFn<{
68
+ alerts: AvAlertProps[];
69
+ }>;
@@ -37,11 +37,6 @@ export interface AvAlertProps {
37
37
  * @default false
38
38
  */
39
39
  small?: boolean;
40
- /**
41
- * The HTML tag used for the alert title.
42
- * @default 'h3'
43
- */
44
- titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
45
40
  /**
46
41
  * The alert type. Affects the color and icon.
47
42
  * @default 'info'
@@ -14,7 +14,7 @@ import { type AvButtonProps } from '@/components/interaction/buttons/AvButton/Av
14
14
  * <p>
15
15
  * <span class="b2-regular">
16
16
  * The <code>AvButton</code> is an elegant, reusable Vue component designed to simplify the creation of custom buttons.
17
- * It features adjustable sizes, an optional icon and a click manager.
17
+ * It features adjustable sizes (small and default), an optional icon and a click manager.
18
18
  * It's easy to use, with the flexibility to adapt to different contexts.
19
19
  * </span>
20
20
  * </p>
@@ -37,26 +37,26 @@ export interface AvButtonProps {
37
37
  * Button text label.
38
38
  */
39
39
  label: string;
40
- /**
41
- * Indicates icon position:
42
- * left (`false`) or right (`true`).
43
- * @default false
44
- */
45
- iconRight?: boolean;
46
40
  /**
47
41
  * Hide label text (`true`) or show it (`false`).
48
42
  * @default false
49
43
  */
50
44
  iconOnly?: boolean;
51
45
  /**
52
- * Button size: 'sm', 'small', 'md', 'medium', 'lg', 'large' or ''.
53
- * @default 'md'
46
+ * Display the button in small size (`true`) or default size (`false`).
47
+ * @default false
54
48
  */
55
- size?: 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | '' | undefined;
49
+ small?: boolean;
56
50
  /**
57
51
  * Icon to be displayed in the button. Can be a name or an icon configuration (eg: `{"name": "mdi:stars"}`).
58
52
  */
59
53
  icon?: string | InstanceType<typeof AvIcon>['$props'];
54
+ /**
55
+ * Disable sentence case transformation on the label.
56
+ * You should only use this on very specific cases.
57
+ * @default false
58
+ */
59
+ noSentenceCase?: boolean;
60
60
  /**
61
61
  * Function called when button is clicked.
62
62
  * @param event The click MouseEvent
@@ -14,6 +14,10 @@ import { type AvCheckboxProps } from '@/components/interaction/checkboxes/AvChec
14
14
  * the choice to a single item, use radio buttons (see <code>AvRadioButton</code>).
15
15
  * </p>
16
16
  *
17
+ * <p class="b2-regular">
18
+ * Checkboxes must be used inside an <code>AvCheckboxesGroup</code> in order to benefit from <code>AvFieldset</code>.
19
+ * </p>
20
+ *
17
21
  * <h2 class="n2">🏗️ Structure</h2>
18
22
  *
19
23
  * <ul class="b2-regular">
@@ -30,7 +30,7 @@ export interface AvCheckboxProps {
30
30
  */
31
31
  small?: boolean;
32
32
  /**
33
- * Displays the chekbox in its inline version
33
+ * Displays the checkbox in its inline version
34
34
  * @default false
35
35
  */
36
36
  inline?: boolean;
@@ -0,0 +1,38 @@
1
+ import type { Meta, StoryFn } from '@storybook/vue3';
2
+ import { type AvCheckboxesGroupProps } from '@/components/interaction/checkboxes/AvCheckboxesGroup/AvCheckboxesGroup.vue';
3
+ /**
4
+ * <h1 class="n1">Checkboxes groups - <code>AvCheckboxesGroup</code></h1>
5
+ *
6
+ * <h2 class="n2">✨ Introduction</h2>
7
+ *
8
+ * <p class="b2-regular">
9
+ * The <code>AvCheckboxesGroup</code> allows you to manage a set of <code>AvCheckbox</code>.
10
+ * It consists of a label (legend), individual options represented by the <code>AvCheckbox</code> component,
11
+ * and a global information, error, or validation message.
12
+ * </p>
13
+ *
14
+ * <p class="b2-regular">
15
+ * Checkboxes can be used alone or in a list. Avoid lists with more than 5 items,
16
+ * and when you want to restrict the choice to a single item, use radio buttons
17
+ * (see <code>AvRadioButton</code>).
18
+ * </p>
19
+ *
20
+ * <h2 class="n2">🏗️ Structure</h2>
21
+ *
22
+ * <p class="b2-regular">
23
+ * The <code>AvCheckboxesGroup</code> component consists of the following elements:
24
+ * <ul>
25
+ * <li>a <code>&lt;fieldset&gt;</code> element containing all the checkboxes,</li>
26
+ * <li>a legend defined by the <code>legend</code> prop and customizable with the <code>legend</code> slot,</li>
27
+ * <li>a group of individual checkboxes rendered by the <code>AvCheckbox</code> component,</li>
28
+ * <li>an information, error, or validation message displayed below the group of checkboxes.</li>
29
+ * </ul>
30
+ * </p>
31
+ */
32
+ declare const meta: Meta<AvCheckboxesGroupProps>;
33
+ export default meta;
34
+ export declare const Default: StoryFn<AvCheckboxesGroupProps>;
35
+ export declare const Inline: StoryFn<AvCheckboxesGroupProps>;
36
+ export declare const WithErrorMessage: StoryFn<AvCheckboxesGroupProps>;
37
+ export declare const InlineWithSuccessMessage: StoryFn<AvCheckboxesGroupProps>;
38
+ export declare const WithHint: StoryFn<AvCheckboxesGroupProps>;
@@ -0,0 +1,46 @@
1
+ export interface AvCheckboxesGroupProps {
2
+ /**
3
+ * Unique ID of the component
4
+ * @default `checkboxes-group-${crypto.randomUUID()}`
5
+ */
6
+ id?: string;
7
+ /**
8
+ * Fieldset caption
9
+ * @default ''
10
+ */
11
+ legend?: string;
12
+ /**
13
+ * `<legend>` tag id
14
+ * @default ''
15
+ */
16
+ legendId?: string;
17
+ /**
18
+ * Error message to be displayed under the checkboxes
19
+ * @default ''
20
+ */
21
+ errorMessage?: string;
22
+ /**
23
+ * Success message to be displayed under the checkboxes
24
+ * @default ''
25
+ */
26
+ successMessage?: string;
27
+ /**
28
+ * Hint to be displayed under the checkboxes
29
+ * @default ''
30
+ */
31
+ hint?: string;
32
+ /**
33
+ * Display checkboxes inline
34
+ * @default false
35
+ */
36
+ inline?: boolean;
37
+ }
38
+ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvCheckboxesGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvCheckboxesGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
39
+ default?: ((props: {}) => any) | undefined;
40
+ }>;
41
+ export default _default;
42
+ type __VLS_WithSlots<T, S> = T & {
43
+ new (): {
44
+ $slots: S;
45
+ };
46
+ };
@@ -1 +1,2 @@
1
1
  export { default as AvCheckbox, type AvCheckboxProps } from './AvCheckbox/AvCheckbox.vue';
2
+ export { default as AvCheckboxesGroup, type AvCheckboxesGroupProps } from './AvCheckboxesGroup/AvCheckboxesGroup.vue';
@@ -1,3 +1,6 @@
1
+ /**
2
+ * AvSearchBar component props.
3
+ */
1
4
  export interface AvSearchBarProps {
2
5
  /**
3
6
  * Unique id for the search bar
@@ -31,8 +31,8 @@ import { type AvListProps } from './AvList.vue';
31
31
  * <p><span class="b2-regular">The list component consists of the following elements:</span></p>
32
32
  *
33
33
  * <ul>
34
- * <li><span class="b2-regular"><strong>Container:</strong> (mandatory) Main wrapper that contains all list items with proper semantic structure</span></li>
35
- * <li><span class="b2-regular"><strong>List Items:</strong> (mandatory) Individual items rendered within the list, typically <code>AvListItem</code> components</span></li>
34
+ * <li><span class="b2-regular">the <strong>Container:</strong> (mandatory) Main wrapper that contains all list items with proper semantic structure</span></li>
35
+ * <li><span class="b2-regular">the <strong>List Items:</strong> (mandatory) Individual items rendered within the list, typically <code>AvListItem</code> components</span></li>
36
36
  * </ul>
37
37
  *
38
38
  * <p><span class="b2-regular">The list integrates:</span></p>
@@ -28,10 +28,10 @@ import { type AvListItemProps } from './AvListItem.vue';
28
28
  * <p><span class="b2-regular">The list item consists of the following elements:</span></p>
29
29
  *
30
30
  * <ul>
31
- * <li><span class="b2-regular"><strong>Container:</strong> (mandatory) Root wrapper element that can be div, button, or anchor based on usage</span></li>
32
- * <li><span class="b2-regular"><strong>Icon:</strong> (optional) Visual indicator displayed on the left side of the content</span></li>
33
- * <li><span class="b2-regular"><strong>Content Area:</strong> (mandatory) Contains title, description, and/or custom content</span></li>
34
- * <li><span class="b2-regular"><strong>Custom Content Slot:</strong> (optional) Allows insertion of any custom elements within the content area</span></li>
31
+ * <li><span class="b2-regular">the <strong>Container:</strong> (mandatory) Root wrapper element that can be div, button, or anchor based on usage</span></li>
32
+ * <li><span class="b2-regular">the <strong>Icon:</strong> (optional) Visual indicator displayed on the left side of the content</span></li>
33
+ * <li><span class="b2-regular">the <strong>Content Area:</strong> (mandatory) Contains title, description, and/or custom content</span></li>
34
+ * <li><span class="b2-regular">the <strong>Custom Content Slot:</strong> (optional) Allows insertion of any custom elements within the content area</span></li>
35
35
  * </ul>
36
36
  *
37
37
  * <p><span class="b2-regular">The list item integrates:</span></p>
@@ -43,5 +43,6 @@ export default meta;
43
43
  export declare const Default: StoryFn<AvRadioButtonSetProps>;
44
44
  export declare const Inline: StoryFn<AvRadioButtonSetProps>;
45
45
  export declare const Disabled: StoryFn<AvRadioButtonSetProps>;
46
+ export declare const Small: StoryFn<AvRadioButtonSetProps>;
46
47
  export declare const Error: StoryFn<AvRadioButtonSetProps>;
47
48
  export declare const SuccessInline: StoryFn<AvRadioButtonSetProps>;
@@ -515,6 +515,7 @@ export declare const WithCustomItemSlotExample: {
515
515
  CHEVRON_DOUBLE_RIGHT: string;
516
516
  CIRCLE: string;
517
517
  CLOSE_CIRCLE_OUTLINE: string;
518
+ CLOSE_OCTAGON: string;
518
519
  CONTENT_SAVE_OUTLINE: string;
519
520
  DIAMOND_STONE: string;
520
521
  DOTS_VERTICAL: string;
@@ -529,14 +530,18 @@ export declare const WithCustomItemSlotExample: {
529
530
  FILE_TREE_OUTLINE: string;
530
531
  FLAG_VARIANT: string;
531
532
  FORMAT_LIST_BULLETED: string;
533
+ HAMBURGER_MENU: string;
532
534
  HOME_VARIANT_OUTLINE: string;
533
535
  HOURGLASS: string;
534
536
  IMAGE_FILTER_CENTER_FOCUS_WEAK: string;
535
537
  IMAGE_OUTLINE: string;
538
+ INFORMATION_BOX: string;
539
+ INFORMATION_BOX_OUTLINE: string;
536
540
  INFORMATION_OUTLINE: string;
537
541
  LINK: string;
538
542
  LOADING_OUTLINE: string;
539
543
  LOGOUT: string;
544
+ MAGNIFY: string;
540
545
  NAVIGATE_BEFORE: string;
541
546
  NAVIGATE_NEXT: string;
542
547
  NOTEBOOK_CHECK: string;
@@ -553,13 +558,17 @@ export declare const WithCustomItemSlotExample: {
553
558
  STAR_CHECK_OUTLINE: string;
554
559
  STAR_SHOOTING_OUTLINE: string;
555
560
  STARS: string;
561
+ SUCCESS_CIRCLE_OUTLINE: string;
556
562
  SWAP_HORIZONTAL: string;
557
563
  SWAP_VERTICAL_VARIANT: string;
558
564
  TARGET_ARROW: string;
559
565
  TEST_TUBE_EMPTY: string;
566
+ TRANSLATE: string;
560
567
  TRASH_CAN_OUTLINE: string;
561
568
  TRAY_UPLOAD: string;
562
569
  VECTOR_POLYGON_VARIANT: string;
570
+ WARNING: string;
571
+ WARNING_CIRCLE: string;
563
572
  WARNING_OUTLINE: string;
564
573
  WEIGHTS: string;
565
574
  };
@@ -97,6 +97,9 @@ declare const meta: {
97
97
  width: {
98
98
  control: string;
99
99
  };
100
+ height: {
101
+ control: string;
102
+ };
100
103
  };
101
104
  args: {
102
105
  options: {
@@ -84,11 +84,6 @@ export interface AvMultiselectProps {
84
84
  * @default ''
85
85
  */
86
86
  legend?: string;
87
- /**
88
- * Dropdown max height
89
- * @default var(--dimension-8xl)
90
- */
91
- maxOverflowHeight?: CSSStyleDeclaration['maxHeight'];
92
87
  /**
93
88
  * Fixes the width of the multiselect
94
89
  */
@@ -1,4 +1,3 @@
1
- import type { Slot } from 'vue';
2
1
  import type { AvMultiselectOption } from '@/components/interaction/selects/AvMultiselect/AvMultiselect.types';
3
2
  import type { UseCollapsableReturn } from '@/composables/use-collapsable/use-collapsable';
4
3
  export interface MultiselectCollapseProps {
@@ -11,29 +10,19 @@ export interface MultiselectCollapseProps {
11
10
  selectAll?: boolean;
12
11
  search?: boolean;
13
12
  selectAllLabel?: [string, string];
14
- maxOverflowHeight?: CSSStyleDeclaration['maxHeight'];
15
13
  useCollapsableReturn: Omit<UseCollapsableReturn, 'adjust'>;
16
14
  noResultLabel?: string;
17
15
  }
18
16
  type __VLS_Props = MultiselectCollapseProps;
19
- type __VLS_Slots = {
20
- 'legend'?: Slot;
21
- 'no-results'?: Slot;
22
- };
23
17
  type __VLS_PublicProps = __VLS_Props & {
24
18
  modelValue: (string | number)[];
25
19
  };
26
- declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
20
+ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
27
21
  "update:modelValue": (value: (string | number)[]) => any;
28
22
  } & {
29
23
  close: () => any;
30
24
  }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
31
25
  onClose?: (() => any) | undefined;
32
26
  "onUpdate:modelValue"?: ((value: (string | number)[]) => any) | undefined;
33
- }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
27
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
34
28
  export default _default;
35
- type __VLS_WithSlots<T, S> = T & {
36
- new (): {
37
- $slots: S;
38
- };
39
- };