@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.
- package/dist/avenirs-dsav.css +1 -3
- package/dist/components/badges/AvBadge/AvBadge.stories.d.ts +1 -1
- package/dist/components/badges/AvBadge/AvBadge.vue.d.ts +0 -10
- package/dist/components/badges/AvTag/AvTag.stories.d.ts +0 -1
- package/dist/components/badges/AvTag/AvTag.vue.d.ts +0 -20
- package/dist/components/base/AvFieldset/AvFieldset.vue.d.ts +24 -4
- package/dist/components/base/AvFieldsetElement/AvFieldsetElement.vue.d.ts +29 -0
- package/dist/components/base/AvIconText/AvIconText.stub.d.ts +7 -0
- package/dist/components/base/AvMessage/AvMessage.stories.d.ts +27 -0
- package/dist/components/base/AvMessage/AvMessage.test.d.ts +1 -0
- package/dist/components/base/AvMessage/AvMessage.vue.d.ts +21 -0
- package/dist/components/base/AvNotice/AvNotice.stories.d.ts +1 -0
- package/dist/components/base/index.d.ts +1 -0
- package/dist/components/feedback/AvAlert/AvAlert.stories.d.ts +69 -0
- package/dist/components/feedback/AvAlert/AvAlert.vue.d.ts +0 -5
- package/dist/components/interaction/buttons/AvButton/AvButton.stories.d.ts +1 -1
- package/dist/components/interaction/buttons/AvButton/AvButton.vue.d.ts +9 -9
- package/dist/components/interaction/checkboxes/AvCheckbox/AvChecbox.stories.d.ts +4 -0
- package/dist/components/interaction/checkboxes/AvCheckbox/AvCheckbox.vue.d.ts +1 -1
- package/dist/components/interaction/checkboxes/AvCheckboxesGroup/AvCheckboxesGroup.stories.d.ts +38 -0
- package/dist/components/interaction/checkboxes/AvCheckboxesGroup/AvCheckboxesGroup.vue.d.ts +46 -0
- package/dist/components/interaction/checkboxes/index.d.ts +1 -0
- package/dist/components/interaction/inputs/AvSearchBar/AvSearchBar.vue.d.ts +3 -0
- package/dist/components/interaction/lists/AvList/AvList.stories.d.ts +2 -2
- package/dist/components/interaction/lists/AvListItem/AvListItem.stories.d.ts +4 -4
- package/dist/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.stories.d.ts +1 -0
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.stories.d.ts +9 -0
- package/dist/components/interaction/selects/AvMultiselect/AvMultiselect.stories.d.ts +3 -0
- package/dist/components/interaction/selects/AvMultiselect/AvMultiselect.vue.d.ts +0 -5
- package/dist/components/interaction/selects/AvMultiselect/components/MultiselectCollapse.vue.d.ts +2 -13
- package/dist/components/interaction/selects/AvSelect/AvSelect.stories.d.ts +1 -1
- package/dist/components/interaction/selects/AvSelect/AvSelect.vue.d.ts +3 -0
- package/dist/components/navigation/AvPagination/AvPagination.stories.d.ts +28 -0
- package/dist/components/navigation/AvSideMenu/AvSideMenu.stories.d.ts +3 -3
- package/dist/components/navigation/AvSideNavigation/AvSideNavigation.stories.d.ts +4 -4
- package/dist/components/navigation/AvStepper/AvStepper.vue.d.ts +1 -3
- package/dist/components/overlay/drawers/AvDrawer/AvDrawer.stories.d.ts +3 -3
- package/dist/components/overlay/dropdowns/AvDropdown/AvDropdown.stub.d.ts +2 -2
- package/dist/components/overlay/dropdowns/AvDropdown/AvDropdown.vue.d.ts +6 -6
- package/dist/components/overlay/modals/AvModal/AvModal.stories.d.ts +36 -0
- package/dist/components/overlay/modals/AvModal/AvModal.vue.d.ts +0 -5
- package/dist/components/overlay/popovers/AvPopover/AvPopover.vue.d.ts +1 -5
- package/dist/composables/use-av-breakpoints/use-av-breakpoints.d.ts +3 -0
- package/dist/composables/use-collapsable/use-collapsable.d.ts +1 -1
- package/dist/index.cjs.js +5 -5
- package/dist/index.es.js +6245 -6128
- package/dist/main.d.ts +0 -5
- package/dist/stories/foundations/icons.stories.d.ts +1 -0
- package/dist/test-utils.cjs.js +15 -15
- package/dist/test-utils.es.js +37 -32
- package/dist/tests/index.d.ts +2 -1
- package/dist/tokens/icons.d.ts +12 -0
- package/package.json +1 -2
- package/src/styles/components/_buttons.scss +9 -0
- package/src/styles/components/_collapse.scss +37 -0
- package/src/styles/components/_footer.scss +15 -0
- package/src/styles/components/_form.scss +50 -0
- package/src/styles/components/_grid.scss +182 -0
- package/src/styles/components/_links.scss +6 -0
- package/src/styles/components/_menu.scss +59 -0
- package/src/styles/components/_navigation.scss +122 -0
- package/src/styles/components/_selects.scss +13 -0
- package/src/styles/{texts.scss → components/_texts.scss} +11 -0
- package/src/styles/core/_accessibility.scss +14 -0
- package/src/styles/core/_cursors.scss +47 -0
- package/src/styles/{dimensions.scss → core/_dimensions.scss} +1 -0
- package/src/styles/core/_focus.scss +66 -0
- package/src/styles/core/_hover.scss +22 -0
- package/src/styles/core/_namespace.scss +9 -0
- package/src/styles/{palette.scss → core/_palette.scss} +2 -0
- package/src/styles/core/_spacing.scss +33 -0
- package/src/styles/{typography.scss → core/_typography.scss} +40 -1
- package/src/styles/main.scss +41 -25
- package/src/styles/settings/_breakpoints.scss +33 -0
- package/src/styles/utilities/_helpers.scss +136 -0
- package/src/styles/utilities/_spacing.scss +48 -0
- package/src/styles/buttons.scss +0 -24
- package/src/styles/spacing.scss +0 -21
- /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>
|
|
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
|
-
* (
|
|
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="
|
|
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="
|
|
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;
|
|
@@ -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
|
-
*
|
|
53
|
-
* @default
|
|
46
|
+
* Display the button in small size (`true`) or default size (`false`).
|
|
47
|
+
* @default false
|
|
54
48
|
*/
|
|
55
|
-
|
|
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">
|
package/dist/components/interaction/checkboxes/AvCheckboxesGroup/AvCheckboxesGroup.stories.d.ts
ADDED
|
@@ -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><fieldset></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
|
+
};
|
|
@@ -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"
|
|
35
|
-
* <li><span class="b2-regular"
|
|
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"
|
|
32
|
-
* <li><span class="b2-regular"
|
|
33
|
-
* <li><span class="b2-regular"
|
|
34
|
-
* <li><span class="b2-regular"
|
|
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
|
};
|
|
@@ -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
|
*/
|
package/dist/components/interaction/selects/AvMultiselect/components/MultiselectCollapse.vue.d.ts
CHANGED
|
@@ -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:
|
|
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
|
|
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
|
-
};
|