@avenirs-esr/avenirs-dsav 0.1.19 → 0.1.21
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/README.md +4 -6
- package/dist/avenirs-dsav.css +1 -1
- package/dist/avenirs-dsav.es.js +1197 -1188
- package/dist/avenirs-dsav.umd.js +8 -8
- package/dist/components/badges/AvBadge/AvBadge.stories.d.ts +3 -11
- package/dist/components/base/AvIconText/AvIconText.stories.d.ts +2 -2
- package/dist/components/base/AvIconText/AvIconText.vue.d.ts +1 -1
- package/dist/components/base/AvNotice/AvNotice.stories.d.ts +4 -11
- package/dist/components/base/AvVIcon/AvVIcon.stories.d.ts +2 -9
- package/dist/components/cards/AvCard/AvCard.stories.d.ts +2 -2
- package/dist/components/interaction/accordions/AvAccordion/AvAccordion.stories.d.ts +1 -1
- package/dist/components/interaction/accordions/AvAccordionsGroup/AvAccordionsGroup.stories.d.ts +4 -11
- package/dist/components/interaction/buttons/AvButton/AvButton.stories.d.ts +5 -14
- package/dist/components/interaction/buttons/AvRichButton/AvRichButton.stories.d.ts +2 -2
- package/dist/components/interaction/files/AvFileUpload/AvFileUpload.stories.d.ts +2 -10
- package/dist/components/interaction/inputs/AvInput/AvInput.stories.d.ts +16 -27
- package/dist/components/interaction/lists/AvList/AvList.stories.d.ts +2 -2
- package/dist/components/interaction/lists/AvListItem/AvListItem.stories.d.ts +2 -2
- package/dist/components/interaction/lists/AvListItem/AvListItem.vue.d.ts +1 -1
- package/dist/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.stories.d.ts +2 -2
- package/dist/components/interaction/pickers/AvTagPicker/AvTagPicker.stories.d.ts +4 -4
- package/dist/components/interaction/radios/AvRadioButton/AvRadioButton.stories.d.ts +2 -2
- package/dist/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.stories.d.ts +5 -12
- package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.stories.d.ts +7 -2
- package/dist/components/interaction/selects/AvSelect/AvSelect.stories.d.ts +3 -10
- package/dist/components/interaction/tabs/AvTab/AvTab.stories.d.ts +2 -2
- package/dist/components/interaction/tabs/AvTabs/AvTabs.stories.d.ts +3 -10
- package/dist/components/interaction/toggles/AvToggle/AvToggle.stories.d.ts +2 -2
- package/dist/components/navigation/AvNavigation/AvNavigation.stories.d.ts +4 -11
- package/dist/components/navigation/AvSideMenu/AvSideMenu.stories.d.ts +2 -2
- package/dist/components/navigation/AvSideNavigation/AvSideNavigation.stories.d.ts +2 -2
- package/dist/components/navigation/AvSideNavigation/AvSideNavigation.vue.d.ts +4 -0
- package/dist/components/navigation/AvStepper/AvStepper.stories.d.ts +2 -2
- package/dist/components/overlay/drawers/AvDrawer/AvDrawer.stories.d.ts +2 -2
- package/dist/components/overlay/popovers/AvPopover/AvPopover.stories.d.ts +2 -2
- package/dist/tokens/icons.d.ts +5 -0
- package/package.json +1 -1
|
@@ -3,23 +3,15 @@ import { type AvBadgeProps } from '@/components/badges/AvBadge/AvBadge.vue';
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Badges - <code>AvBadge</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
10
|
-
* The <code>AvBadge</code> is
|
|
11
|
-
* This Vue component is ideal for displaying short, important information, such as categories, labels, or statuses.
|
|
10
|
+
* The <code>AvBadge</code> is ideal for displaying short, important information, such as categories, labels, or statuses.
|
|
12
11
|
* </span>
|
|
13
12
|
* </p>
|
|
14
13
|
*
|
|
15
|
-
* <
|
|
16
|
-
* <span class="b2-regular">
|
|
17
|
-
* 🏅 The documentation for the <code>DsfrBadge</code> can be found at
|
|
18
|
-
* <a href="https://vue-ds.fr/composants/DsfrBadge" target="_blank" rel="noopener noreferrer">VueDSFR</a>
|
|
19
|
-
* </span>
|
|
20
|
-
* </p>
|
|
21
|
-
*
|
|
22
|
-
* <h2 class="n2">📐 Structure</h2>
|
|
14
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
23
15
|
*
|
|
24
16
|
* <ul>
|
|
25
17
|
* <li>
|
|
@@ -3,7 +3,7 @@ import { type AvIconTextProps } from './AvIconText.vue';
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Texts with icon - <code>AvIconText</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
@@ -15,7 +15,7 @@ import { type AvIconTextProps } from './AvIconText.vue';
|
|
|
15
15
|
* </span>
|
|
16
16
|
* </p>
|
|
17
17
|
*
|
|
18
|
-
* <h2 class="n2"
|
|
18
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
19
19
|
*
|
|
20
20
|
* <ul>
|
|
21
21
|
* <li>
|
|
@@ -3,12 +3,12 @@ import { type AvNoticeProps } from '@/components/base/AvNotice/AvNotice.vue';
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Important information banner - <code>AvNotice</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
10
|
-
* The <code>AvNotice</code> is
|
|
11
|
-
*
|
|
10
|
+
* The <code>AvNotice</code> is an important information banner that allow
|
|
11
|
+
* users to view or access important and temporary information.
|
|
12
12
|
* </span>
|
|
13
13
|
* </p>
|
|
14
14
|
*
|
|
@@ -19,14 +19,7 @@ import { type AvNoticeProps } from '@/components/base/AvNotice/AvNotice.vue';
|
|
|
19
19
|
* </span>
|
|
20
20
|
* </p>
|
|
21
21
|
*
|
|
22
|
-
* <
|
|
23
|
-
* <span class="b2-regular">
|
|
24
|
-
* 🏅 The documentation on the <code>DsfrNotice</code> can be found at
|
|
25
|
-
* <a href="https://vue-ds.fr/composants/DsfrNotice" target="_blank" rel="noopener noreferrer">VueDSFR</a>
|
|
26
|
-
* </span>
|
|
27
|
-
* </p>
|
|
28
|
-
*
|
|
29
|
-
* <h2 class="n2">📐 Structure</h2>
|
|
22
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
30
23
|
*
|
|
31
24
|
* <p><span class="b2-regular">The notice consists of the following elements:</span></p>
|
|
32
25
|
*
|
|
@@ -3,7 +3,7 @@ import { type AvVIconProps } from '@/components/base/AvVIcon/AvVIcon.vue';
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Icons - <code>AvVIcon</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
@@ -26,14 +26,7 @@ import { type AvVIconProps } from '@/components/base/AvVIcon/AvVIcon.vue';
|
|
|
26
26
|
* </span>
|
|
27
27
|
* </p>
|
|
28
28
|
*
|
|
29
|
-
* <
|
|
30
|
-
* <span class="b2-regular">
|
|
31
|
-
* 🏅 The documentation for the <code>VIcon</code> can be found at
|
|
32
|
-
* <a href="https://vue-ds.fr/composants/VIcon" target="_blank" rel="noopener noreferrer">VueDSFR</a>
|
|
33
|
-
* </span>
|
|
34
|
-
* </p>
|
|
35
|
-
*
|
|
36
|
-
* <h2 class="n2">📐 Structure</h2>
|
|
29
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
37
30
|
*
|
|
38
31
|
* <p>
|
|
39
32
|
* <span class="b2-regular">
|
|
@@ -3,7 +3,7 @@ import { type AvCardProps } from '@/components/cards/AvCard/AvCard.vue';
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Cards - <code>AvCard</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
@@ -11,7 +11,7 @@ import { type AvCardProps } from '@/components/cards/AvCard/AvCard.vue';
|
|
|
11
11
|
* </span>
|
|
12
12
|
* </p>
|
|
13
13
|
*
|
|
14
|
-
* <h2 class="n2"
|
|
14
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
15
15
|
*
|
|
16
16
|
* <p>
|
|
17
17
|
* <span class="b2-regular">
|
package/dist/components/interaction/accordions/AvAccordionsGroup/AvAccordionsGroup.stories.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import type { Meta, StoryFn } from '@storybook/vue3';
|
|
2
2
|
import { type AvAccordionsGroupProps } from '@/components/interaction/accordions/AvAccordionsGroup/AvAccordionsGroup.vue';
|
|
3
3
|
/**
|
|
4
|
-
* <h2 class="n2"
|
|
4
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
5
5
|
*
|
|
6
6
|
* <p>
|
|
7
7
|
* <span class="b2-regular">
|
|
8
|
-
* The <code>AvAccordionsGroup</code> component
|
|
9
|
-
*
|
|
8
|
+
* The <code>AvAccordionsGroup</code> component automatically manages the addition of <code>AvAccordion</code>
|
|
9
|
+
* in a group according to the <code>AvAccordion</code> present in the <code>default</code> slot.
|
|
10
10
|
* </span>
|
|
11
11
|
* </p>
|
|
12
12
|
*
|
|
@@ -24,14 +24,7 @@ import { type AvAccordionsGroupProps } from '@/components/interaction/accordions
|
|
|
24
24
|
* </span>
|
|
25
25
|
* </p>
|
|
26
26
|
*
|
|
27
|
-
* <
|
|
28
|
-
* <span class="b2-regular">
|
|
29
|
-
* 🏅 Documentation on <code>DsfrAccordionsGroup</code> can be found at
|
|
30
|
-
* <a href="https://vue-ds.fr/composants/DsfrAccordionsGroup" target="_blank">VueDSFR</a>
|
|
31
|
-
* </span>
|
|
32
|
-
* </p>
|
|
33
|
-
*
|
|
34
|
-
* <h2 class="n2">📐 Structure</h2>
|
|
27
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
35
28
|
*
|
|
36
29
|
* <ul class="b2-regular">
|
|
37
30
|
* <li>A header (<code>title</code> prop, type <code>string</code>) — mandatory, represents the section title.</li>
|
|
@@ -3,39 +3,30 @@ import { type AvButtonProps } from '@/components/interaction/buttons/AvButton/Av
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Buttons - <code>AvButton</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
10
|
-
* The <code>AvButton</code> is
|
|
11
|
-
* The button is an interaction element with an interface enabling the user to perform an action.
|
|
10
|
+
* The <code>AvButton</code> is an interaction element with an interface enabling the user to perform an action.
|
|
12
11
|
* </span>
|
|
13
12
|
* </p>
|
|
14
13
|
*
|
|
15
14
|
* <p>
|
|
16
15
|
* <span class="b2-regular">
|
|
17
16
|
* The <code>AvButton</code> is an elegant, reusable Vue component designed to simplify the creation of custom buttons.
|
|
18
|
-
* It features adjustable sizes, an optional icon and a click manager
|
|
17
|
+
* It features adjustable sizes, an optional icon and a click manager.
|
|
19
18
|
* It's easy to use, with the flexibility to adapt to different contexts.
|
|
20
19
|
* </span>
|
|
21
20
|
* </p>
|
|
22
21
|
*
|
|
23
22
|
* <p>
|
|
24
23
|
* <span class="b2-regular">
|
|
25
|
-
*
|
|
26
|
-
* (<code>DEFAULT</code> without border and <code>OUTLINED</code> with border)
|
|
24
|
+
* The button only allow two variants (<code>DEFAULT</code> without border and <code>OUTLINED</code> with border)
|
|
27
25
|
* and two themes (<code>PRIMARY</code> blue and <code>SECONDARY</code> grey).
|
|
28
26
|
* </span>
|
|
29
27
|
* </p>
|
|
30
28
|
*
|
|
31
|
-
* <
|
|
32
|
-
* <span class="b2-regular">
|
|
33
|
-
* 🏅 Documentation on the <code>DsfrButton</code> can be found at
|
|
34
|
-
* <a href="https://vue-ds.fr/composants/DsfrButton" target="_blank" rel="noopener noreferrer">VueDSFR</a>
|
|
35
|
-
* </span>
|
|
36
|
-
* </p>
|
|
37
|
-
*
|
|
38
|
-
* <h2 class="n2">📐 Structure</h2>
|
|
29
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
39
30
|
*
|
|
40
31
|
* <p><span class="b2-regular">Buttons consist of :</span></p>
|
|
41
32
|
*
|
|
@@ -3,7 +3,7 @@ import { type AvRichButtonProps } from '@/components/interaction/buttons/AvRichB
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Rich buttons - <code>AvRichButton</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
@@ -24,7 +24,7 @@ import { type AvRichButtonProps } from '@/components/interaction/buttons/AvRichB
|
|
|
24
24
|
* </span>
|
|
25
25
|
* </p>
|
|
26
26
|
*
|
|
27
|
-
* <h2 class="n2"
|
|
27
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
28
28
|
*
|
|
29
29
|
* <p><span class="b2-regular">Rich buttons consist of a button composed of :</span></p>
|
|
30
30
|
*
|
|
@@ -3,22 +3,14 @@ import { type AvFileUploadProps } from '@/components/interaction/files/AvFileUpl
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">File uploader - <code>AvFileUpload</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
10
|
-
* The <code>AvFileUpload</code> component
|
|
11
|
-
* This component allows you to upload files by clicking on the file upload area
|
|
10
|
+
* The <code>AvFileUpload</code> component allows you to upload files by clicking on the file upload area
|
|
12
11
|
* or by dragging and dropping a file in the area.
|
|
13
12
|
* </span>
|
|
14
13
|
* </p>
|
|
15
|
-
*
|
|
16
|
-
* <p>
|
|
17
|
-
* <span class="b2-regular">
|
|
18
|
-
* 🏅 Documentation on <code>DsfrFileUpload</code> can be found at
|
|
19
|
-
* <a href="https://vue-ds.fr/composants/DsfrFileUpload" target="_blank" rel="noopener noreferrer">VueDSFR</a>
|
|
20
|
-
* </span>
|
|
21
|
-
* </p>
|
|
22
14
|
*/
|
|
23
15
|
declare const meta: Meta<AvFileUploadProps>;
|
|
24
16
|
export default meta;
|
|
@@ -1,50 +1,39 @@
|
|
|
1
1
|
import type { Meta, StoryFn } from '@storybook/vue3';
|
|
2
2
|
import { type AvInputProps } from '@/components/interaction/inputs/AvInput/AvInput.vue';
|
|
3
3
|
/**
|
|
4
|
-
* <
|
|
5
|
-
*
|
|
6
|
-
* <h2 class="n2">🌟 Introduction</h2>
|
|
4
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
5
|
*
|
|
8
6
|
* <p>
|
|
9
7
|
* <span class="b2-regular">
|
|
10
|
-
* The input component provides a standardized way to collect user input in forms and interfaces.
|
|
8
|
+
* The <code>AvInput</code> component is a flexible and accessible input component that provides a standardized way to collect user input in forms and interfaces.
|
|
11
9
|
* It supports various input types, validation states, and accessibility features to ensure a consistent user experience.
|
|
12
10
|
* </span>
|
|
13
11
|
* </p>
|
|
14
12
|
*
|
|
15
13
|
* <p>
|
|
16
14
|
* <span class="b2-regular">
|
|
17
|
-
*
|
|
18
|
-
* labels, hints, and error messages. It's designed to be fully accessible and follows modern form design patterns.
|
|
15
|
+
* It adds prefix icon support, enhanced validation messaging, and custom styling while maintaining full compatibility with the French government's design system standards.
|
|
19
16
|
* </span>
|
|
20
17
|
* </p>
|
|
21
18
|
*
|
|
22
|
-
* <
|
|
23
|
-
* <span class="b2-regular">
|
|
24
|
-
* It features proper focus management, keyboard navigation, and screen reader support while maintaining visual consistency
|
|
25
|
-
* with the design system's styling tokens.
|
|
26
|
-
* </span>
|
|
27
|
-
* </p>
|
|
28
|
-
*
|
|
29
|
-
* <h2 class="n2">📐 Structure</h2>
|
|
19
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
30
20
|
*
|
|
31
21
|
* <p><span class="b2-regular">The input component consists of the following elements:</span></p>
|
|
32
|
-
*
|
|
33
22
|
* <ul>
|
|
34
|
-
* <li><span class="b2-regular"><strong>
|
|
35
|
-
* <li><span class="b2-regular"><strong>
|
|
36
|
-
* <li><span class="b2-regular"><strong>Input Field
|
|
37
|
-
* <li><span class="b2-regular"><strong>
|
|
23
|
+
* <li><span class="b2-regular"><strong>Wrapper</strong>: Container that manages the overall layout and positioning</span></li>
|
|
24
|
+
* <li><span class="b2-regular"><strong>Prefix Icon</strong> (optional): Visual icon positioned at the beginning of the input field</span></li>
|
|
25
|
+
* <li><span class="b2-regular"><strong>Input Field</strong>: The main input element (can be rendered as input or textarea)</span></li>
|
|
26
|
+
* <li><span class="b2-regular"><strong>Label</strong>: Descriptive text for the input field</span></li>
|
|
27
|
+
* <li><span class="b2-regular"><strong>Hint</strong>: Optional helper text displayed below the label</span></li>
|
|
28
|
+
* <li><span class="b2-regular"><strong>Error Messages</strong>: Validation error messages displayed when validation fails</span></li>
|
|
29
|
+
* <li><span class="b2-regular"><strong>Success Messages</strong>: Validation success messages displayed when validation passes</span></li>
|
|
38
30
|
* </ul>
|
|
39
31
|
*
|
|
40
|
-
* <p
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
* <li><span class="b2-regular">Accessibility attributes and proper labeling</span></li>
|
|
46
|
-
* <li><span class="b2-regular">Responsive design and consistent spacing</span></li>
|
|
47
|
-
* </ul>
|
|
32
|
+
* <p>
|
|
33
|
+
* <span class="b2-regular">
|
|
34
|
+
* The component integrates focus management, proper ARIA attributes, and responsive design patterns.
|
|
35
|
+
* </span>
|
|
36
|
+
* </p>
|
|
48
37
|
*/
|
|
49
38
|
declare const meta: Meta<AvInputProps>;
|
|
50
39
|
export default meta;
|
|
@@ -3,7 +3,7 @@ import { type AvListProps } from './AvList.vue';
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Lists - <code>AvList</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
@@ -26,7 +26,7 @@ import { type AvListProps } from './AvList.vue';
|
|
|
26
26
|
* </span>
|
|
27
27
|
* </p>
|
|
28
28
|
*
|
|
29
|
-
* <h2 class="n2"
|
|
29
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
30
30
|
*
|
|
31
31
|
* <p><span class="b2-regular">The list component consists of the following elements:</span></p>
|
|
32
32
|
*
|
|
@@ -3,7 +3,7 @@ import { type AvListItemProps } from './AvListItem.vue';
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Lists - <code>AvListItem</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
@@ -23,7 +23,7 @@ import { type AvListItemProps } from './AvListItem.vue';
|
|
|
23
23
|
* </span>
|
|
24
24
|
* </p>
|
|
25
25
|
*
|
|
26
|
-
* <h2 class="n2"
|
|
26
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
27
27
|
*
|
|
28
28
|
* <p><span class="b2-regular">The list item consists of the following elements:</span></p>
|
|
29
29
|
*
|
|
@@ -3,7 +3,7 @@ import { type AvPageSizePickerProps } from '@/components/interaction/pickers/AvP
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Picker for number of results per page - <code>AvPageSizePicker</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
@@ -11,7 +11,7 @@ import { type AvPageSizePickerProps } from '@/components/interaction/pickers/AvP
|
|
|
11
11
|
* </span>
|
|
12
12
|
* </p>
|
|
13
13
|
*
|
|
14
|
-
* <h2 class="n2"
|
|
14
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
15
15
|
*
|
|
16
16
|
* <p>
|
|
17
17
|
* <span class="b2-regular">
|
|
@@ -3,22 +3,22 @@ import { type AvTagPickerProps } from '@/components/interaction/pickers/AvTagPic
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Tag picker - <code>AvTagPicker</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
10
10
|
* The <code>AvTagPicker</code> is a Vue component enabling a user to select an element from a given set.
|
|
11
|
-
* Selectable elements consist of
|
|
11
|
+
* Selectable elements consist of tag components.
|
|
12
12
|
* </span>
|
|
13
13
|
* </p>
|
|
14
14
|
*
|
|
15
15
|
* <p>
|
|
16
16
|
* <span class="b2-regular">
|
|
17
|
-
* The
|
|
17
|
+
* The tag list provides a list of options from which the user can choose.
|
|
18
18
|
* </span>
|
|
19
19
|
* </p>
|
|
20
20
|
*
|
|
21
|
-
* <h2 class="n2"
|
|
21
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
22
22
|
*
|
|
23
23
|
* <p><span class="b2-regular">Buttons consist of :</span></p>
|
|
24
24
|
*
|
|
@@ -3,7 +3,7 @@ import { type AvRadioButtonProps } from '@/components/interaction/radios/AvRadio
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Radio buttons - <code>AvRadioButton</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
@@ -25,7 +25,7 @@ import { type AvRadioButtonProps } from '@/components/interaction/radios/AvRadio
|
|
|
25
25
|
* </span>
|
|
26
26
|
* </p>
|
|
27
27
|
*
|
|
28
|
-
* <h2 class="n2"
|
|
28
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
29
29
|
*
|
|
30
30
|
* <p><span class="b2-regular">None.</span></p>
|
|
31
31
|
*/
|
|
@@ -3,12 +3,12 @@ import { type AvRadioButtonSetProps } from '@/components/interaction/radios/AvRa
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Radio button set - <code>AvRadioButtonSet</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
10
|
-
* The <code>AvRadioButtonSet</code>
|
|
11
|
-
*
|
|
10
|
+
* The <code>AvRadioButtonSet</code> automatically manages the addition of <code>AvRadioButton</code>
|
|
11
|
+
* in a group according to the <code>AvRadioButton</code> present in the <code>default</code> slot.
|
|
12
12
|
* </span>
|
|
13
13
|
* </p>
|
|
14
14
|
*
|
|
@@ -25,14 +25,7 @@ import { type AvRadioButtonSetProps } from '@/components/interaction/radios/AvRa
|
|
|
25
25
|
* </span>
|
|
26
26
|
* </p>
|
|
27
27
|
*
|
|
28
|
-
* <
|
|
29
|
-
* <span class="b2-regular">
|
|
30
|
-
* 🏅 Documentation on <code>DsfrRadioButtonSet</code> can be found at
|
|
31
|
-
* <a href="https://vue-ds.fr/composants/DsfrRadioButtonSet" target="_blank" rel="noopener noreferrer">VueDSFR</a>
|
|
32
|
-
* </span>
|
|
33
|
-
* </p>
|
|
34
|
-
*
|
|
35
|
-
* <h2 class="n2">📐 Structure</h2>
|
|
28
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
36
29
|
*
|
|
37
30
|
* <p><span class="b2-regular">The <code>AvRadioButtonSet</code> component consists of the following elements:</span></p>
|
|
38
31
|
*
|
|
@@ -41,7 +34,7 @@ import { type AvRadioButtonSetProps } from '@/components/interaction/radios/AvRa
|
|
|
41
34
|
* <li><span class="b2-regular">A <code><fieldset></code> element containing the radio buttons and associated messages.</span></li>
|
|
42
35
|
* <li><span class="b2-regular">A legend (<code>legend</code>) defined by the <code>legend</code> prop and customizable with the <code>legend</code> slot.</span></li>
|
|
43
36
|
* <li><span class="b2-regular">A hint (<code>hint</code>) defined by the <code>hint</code> prop and customizable with the <code>hint</code> slot.</span></li>
|
|
44
|
-
* <li><span class="b2-regular">A group of individual radio buttons rendered by the <code>AvRadioButton</code
|
|
37
|
+
* <li><span class="b2-regular">A group of individual radio buttons rendered by the <code>AvRadioButton</code> component.</span></li>
|
|
45
38
|
* <li><span class="b2-regular">An information, error or validation message, displayed below the group of radio buttons (optional).</span></li>
|
|
46
39
|
* </ul>
|
|
47
40
|
*/
|
|
@@ -7,7 +7,7 @@ interface ExtendedOption extends AvAutocompleteOption {
|
|
|
7
7
|
/**
|
|
8
8
|
* <h1 class="n1">Selects - <code>AvAutocomplete</code></h1>
|
|
9
9
|
*
|
|
10
|
-
* <h2 class="n2"
|
|
10
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
11
11
|
*
|
|
12
12
|
* <p>
|
|
13
13
|
* <span class="b2-regular">
|
|
@@ -27,7 +27,7 @@ interface ExtendedOption extends AvAutocompleteOption {
|
|
|
27
27
|
* </span>
|
|
28
28
|
* </p>
|
|
29
29
|
*
|
|
30
|
-
* <h2 class="n2"
|
|
30
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
31
31
|
*
|
|
32
32
|
* <p><span class="b2-regular">The autocomplete consists of an input field, dropdown with filterable options, and optional selected items section for multi-select mode.</span></p>
|
|
33
33
|
*/
|
|
@@ -490,6 +490,7 @@ export declare const WithCustomItemSlotExample: {
|
|
|
490
490
|
ACCOUNT_CIRCLE_OUTLINE: string;
|
|
491
491
|
ACCOUNT_STUDENT_OUTLINE: string;
|
|
492
492
|
ALERT_CIRCLE_OUTLINE: string;
|
|
493
|
+
ALERT_OUTLINE: string;
|
|
493
494
|
ARROW_DECISION: string;
|
|
494
495
|
ARROW_LEFT_THIN: string;
|
|
495
496
|
ARROW_RIGHT: string;
|
|
@@ -501,6 +502,7 @@ export declare const WithCustomItemSlotExample: {
|
|
|
501
502
|
BOOK_LOCATION_OUTLINE: string;
|
|
502
503
|
BRIEFCASE_VARIANT_OUTLINE: string;
|
|
503
504
|
CALENDAR_MONTH_OUTLINE: string;
|
|
505
|
+
CHART_TIMELINE_VARIANT_SHIMMER: string;
|
|
504
506
|
CHAT_BUBBLE_OUTLINE: string;
|
|
505
507
|
CHECK: string;
|
|
506
508
|
CHECK_CIRCLE: string;
|
|
@@ -516,6 +518,7 @@ export declare const WithCustomItemSlotExample: {
|
|
|
516
518
|
FILE_DOCUMENT_BOX_MULTIPLE_OUTLINE: string;
|
|
517
519
|
FILE_DOCUMENT_EDIT_OUTLINE: string;
|
|
518
520
|
FILE_DOCUMENT_MULTIPLE_OUTLINE: string;
|
|
521
|
+
FILE_TREE_OUTLINE: string;
|
|
519
522
|
FLAG_VARIANT: string;
|
|
520
523
|
FORMAT_LIST_BULLETED: string;
|
|
521
524
|
HOME_VARIANT_OUTLINE: string;
|
|
@@ -523,10 +526,12 @@ export declare const WithCustomItemSlotExample: {
|
|
|
523
526
|
IMAGE_FILTER_CENTER_FOCUS_WEAK: string;
|
|
524
527
|
IMAGE_OUTLINE: string;
|
|
525
528
|
INFORMATION_OUTLINE: string;
|
|
529
|
+
LINK: string;
|
|
526
530
|
LOADING_OUTLINE: string;
|
|
527
531
|
LOGOUT: string;
|
|
528
532
|
NAVIGATE_BEFORE: string;
|
|
529
533
|
NAVIGATE_NEXT: string;
|
|
534
|
+
NOTEBOOK_CHECK: string;
|
|
530
535
|
NOTIFICATIONS_NONE: string;
|
|
531
536
|
PAGE_FIRST: string;
|
|
532
537
|
PAGE_LAST: string;
|
|
@@ -3,11 +3,11 @@ import { type AvSelectProps } from '@/components/interaction/selects/AvSelect/Av
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Drop-down list - <code>AvSelect</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
10
|
-
* The <code>AvSelect</code> is a
|
|
10
|
+
* The <code>AvSelect</code> is a Vue component enabling a user to select an item from a given list.
|
|
11
11
|
* </span>
|
|
12
12
|
* </p>
|
|
13
13
|
*
|
|
@@ -18,14 +18,7 @@ import { type AvSelectProps } from '@/components/interaction/selects/AvSelect/Av
|
|
|
18
18
|
* </span>
|
|
19
19
|
* </p>
|
|
20
20
|
*
|
|
21
|
-
* <
|
|
22
|
-
* <span class="b2-regular">
|
|
23
|
-
* 🏅 Documentation on the <code>DsfrSelect</code> can be found at
|
|
24
|
-
* <a href="https://vue-ds.fr/composants/DsfrSelect" target="_blank" rel="noopener noreferrer">VueDSFR</a>
|
|
25
|
-
* </span>
|
|
26
|
-
* </p>
|
|
27
|
-
*
|
|
28
|
-
* <h2 class="n2">📐 Structure</h2>
|
|
21
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
29
22
|
*
|
|
30
23
|
* <p><span class="b2-regular"><code>AvSelect</code> consists of a set of <code><option></code> within a <code><select></code>.</span></p>
|
|
31
24
|
*/
|
|
@@ -3,7 +3,7 @@ import { type AvTabProps } from '@/components/interaction/tabs/AvTab/AvTab.vue';
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Tabs - <code>AvTab</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
@@ -25,7 +25,7 @@ import { type AvTabProps } from '@/components/interaction/tabs/AvTab/AvTab.vue';
|
|
|
25
25
|
* </span>
|
|
26
26
|
* </p>
|
|
27
27
|
*
|
|
28
|
-
* <h2 class="n2"
|
|
28
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
29
29
|
*
|
|
30
30
|
* <p><span class="b2-regular">None.</span></p>
|
|
31
31
|
*/
|
|
@@ -3,11 +3,11 @@ import { type AvTabsProps } from '@/components/interaction/tabs/AvTabs/AvTabs.vu
|
|
|
3
3
|
/**
|
|
4
4
|
* <h1 class="n1">Tabs - <code>AvTabs</code></h1>
|
|
5
5
|
*
|
|
6
|
-
* <h2 class="n2"
|
|
6
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
7
7
|
*
|
|
8
8
|
* <p>
|
|
9
9
|
* <span class="b2-regular">
|
|
10
|
-
* The <code>AvTabs</code>
|
|
10
|
+
* The <code>AvTabs</code> automatically manages the addition of <code>AvTab</code>
|
|
11
11
|
* according to the <code>AvTab</code> present in the <code>default</code> slot.
|
|
12
12
|
* </span>
|
|
13
13
|
* </p>
|
|
@@ -24,14 +24,7 @@ import { type AvTabsProps } from '@/components/interaction/tabs/AvTabs/AvTabs.vu
|
|
|
24
24
|
* </span>
|
|
25
25
|
* </p>
|
|
26
26
|
*
|
|
27
|
-
* <
|
|
28
|
-
* <span class="b2-regular">
|
|
29
|
-
* 🏅 Documentation on <code>DsfrTabs</code> can be found at
|
|
30
|
-
* <a href="https://vue-ds.fr/composants/DsfrTabs" target="_blank" rel="noopener noreferrer">VueDSFR</a>
|
|
31
|
-
* </span>
|
|
32
|
-
* </p>
|
|
33
|
-
*
|
|
34
|
-
* <h2 class="n2">📐 Structure</h2>
|
|
27
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
35
28
|
*
|
|
36
29
|
* <p><span class="b2-regular">Each tab consists of the following elements:</span></p>
|
|
37
30
|
*
|