@avenirs-esr/avenirs-dsav 0.1.1 → 0.1.2

package/dist/src/components/interaction/lists/AvListItem/AvListItem.vue.d.ts

@@ -0,0 +1,112 @@
+import type { Slot } from 'vue';
+/**
+ * AvListItem component props.
+ */
+export interface AvListItemProps {
+    /**
+     * The icon name according to the naming convention defined for `VIcon` on VueDSFR.
+     */
+    icon?: string;
+    /**
+     * The icon color.
+     * @default 'var(--text1)'
+     */
+    color?: string;
+    /**
+     * The icon size.
+     * @default 1.3125
+     */
+    iconSize?: number;
+    /**
+     * icon color
+     */
+    iconColor?: string;
+    /**
+     * The title text.
+     */
+    title?: string;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * The hover color when the list item is clickable.
+     * @default 'var(--dark-background-primary1)'
+     */
+    hoverBackgroundColor?: string;
+    /**
+     * The color when the list item is hovered.
+     * @default 'var(--dark-background-primary1)'
+     */
+    colorOnHover?: string;
+    /**
+     * The description color.
+     * @default 'var(--text2)'
+     */
+    descriptionColor?: string;
+    /**
+     * Whether the list item is clickable.
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Whether the list item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the list item is selected/active.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Function called when list item is clicked.
+     * @param event The click MouseEvent
+     */
+    onClick?: ($event: MouseEvent) => void;
+    /**
+     * ARIA label for the list item when clickable.
+     */
+    ariaLabel?: string;
+    /**
+     * ID of an element that describes the list item.
+     */
+    ariaDescribedby?: string;
+    /**
+     * HTML tag to use for the root element when clickable.
+     * @default 'button'
+     */
+    tag?: 'button' | 'div' | 'a';
+    /**
+     * Href attribute when tag is 'a'.
+     */
+    href?: string;
+    /**
+     * Target attribute when tag is 'a'.
+     */
+    target?: string;
+    /**
+     * Rel attribute when tag is 'a'.
+     */
+    rel?: string;
+    /**
+     * ARIA role for the list item. If not provided, defaults based on context.
+     */
+    role?: string;
+}
+/**
+ * Slots available in the AvListItem component.
+ */
+type __VLS_Slots = {
+    /**
+     * Default slot for custom content.
+     */
+    default?: Slot;
+};
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvListItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvListItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/interaction/lists/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AvList } from './AvList/AvList.vue';
+export { default as AvListItem } from './AvListItem/AvListItem.vue';

package/dist/src/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { type AvPageSizePickerProps } from '@/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.vue';
+/**
+ * <h1 class="n1">Picker for number of results per page - <code>AvPageSizePicker</code></h1>
+ *
+ * <h2 class="n2">🌟 Introduction</h2>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     The <code>AvPageSizePicker</code> is a component implementing the <code>AvTagPicker</code> and dedicated to selecting the number of results per page.
+ *   </span>
+ * </p>
+ *
+ * <h2 class="n2">📐 Structure</h2>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     The pickers for number of results per page consist of an <code>AvTagPicker</code> to which options specific to the number of results per page are assigned.
+ *   </span>
+ * </p>
+ */
+declare const meta: Meta<AvPageSizePickerProps>;
+export default meta;
+export declare const Default: StoryFn<AvPageSizePickerProps>;

package/dist/src/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/interaction/pickers/AvPageSizePicker/AvPageSizePicker.vue.d.ts

@@ -0,0 +1,23 @@
+import { type AvTagPickerOption } from '@/components/interaction/pickers/AvTagPicker/AvTagPicker.vue';
+import { PageSizes } from '@/config';
+/**
+ * AvPageSizePicker component props.
+ */
+export interface AvPageSizePickerProps {
+    /**
+     * Label of the page size picker.
+     */
+    label: string;
+    /**
+     * Number of results per page selected.
+     */
+    pageSizeSelected: PageSizes;
+    /**
+     * Method executed when changing selection.
+     *
+     * @param val Selected option of type AvTagPickerOption.
+     */
+    handleSelectChange: (val: AvTagPickerOption) => void;
+}
+declare const _default: import("vue").DefineComponent<AvPageSizePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvPageSizePickerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/src/components/interaction/pickers/AvTagPicker/AvTagPicker.stories.d.ts

@@ -0,0 +1,96 @@
+import type { StoryFn } from '@storybook/vue3';
+import { type AvTagPickerProps } from '@/components/interaction/pickers/AvTagPicker/AvTagPicker.vue';
+/**
+ * <h1 class="n1">Tag picker - <code>AvTagPicker</code></h1>
+ *
+ * <h2 class="n2">🌟 Introduction</h2>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     The <code>AvTagPicker</code> is a Vue component enabling a user to select an element from a given set.
+ *     Selectable elements consist of <code>DsfrTag</code>.
+ *   </span>
+ * </p>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     The <code>DsfrTag</code> list provides a list of options from which the user can choose.
+ *   </span>
+ * </p>
+ *
+ * <h2 class="n2">📐 Structure</h2>
+ *
+ * <p><span class="b2-regular">Buttons consist of :</span></p>
+ *
+ * <ul>
+ *   <li>
+ *     <span class="b2-regular">
+ *       A label - mandatory, using the <code>label</code> prop, enables label display when <code>iconOnly</code> is <code>false</code>,
+ *       also enables connection to <code>title</code> and <code>aria-label</code>;
+ *     </span>
+ *   </li>
+ *   <li>
+ *     <span class="b2-regular">
+ *       An icon, which can be modified (see available icons) - optional.
+ *     </span>
+ *   </li>
+ * </ul>
+ */
+declare const meta: {
+    title: string;
+    component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+    tags: string[];
+    argTypes: {
+        options: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            control: boolean;
+        };
+        label: {
+            type: {
+                name: string;
+            };
+            control: string;
+        };
+        labelColor: {
+            type: {
+                name: string;
+            };
+            control: string;
+        };
+        labelTypographyClass: {
+            type: {
+                name: string;
+            };
+            control: string;
+        };
+        multiple: {
+            type: {
+                name: string;
+            };
+            control: string;
+        };
+        selected: {
+            type: {
+                name: string;
+            };
+            control: boolean;
+        };
+        handleSelectChange: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            control: boolean;
+            action: string;
+        };
+    };
+    args: {
+        label: string;
+    };
+};
+export default meta;
+export declare const Default: StoryFn<AvTagPickerProps>;
+export declare const Multiple: StoryFn<AvTagPickerProps>;

package/dist/src/components/interaction/pickers/AvTagPicker/AvTagPicker.stub.d.ts

@@ -0,0 +1,11 @@
+export declare const AvTagPickerStub: import("vue").DefineComponent<{
+    label?: any;
+    selected?: any;
+    options?: any;
+    handleSelectChange?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    label?: any;
+    selected?: any;
+    options?: any;
+    handleSelectChange?: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/src/components/interaction/pickers/AvTagPicker/AvTagPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/interaction/pickers/AvTagPicker/AvTagPicker.vue.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Represents an option in the AvTagPicker component.
+ */
+export interface AvTagPickerOption {
+    /**
+     * Label displayed for the option.
+     */
+    label: string;
+    /**
+     * Value associated with the option.
+     */
+    value: string;
+}
+/**
+ * Basic props common to AvTagPicker in single or multiple mode.
+ */
+interface AvTagPickerBaseProps {
+    /**
+     * List of options available in the picker.
+     */
+    options: AvTagPickerOption[];
+    /**
+     * Label displayed above the picker.
+     */
+    label?: string;
+    /**
+     * Label color.
+     * @default 'var(--text2)'
+     */
+    labelColor?: string;
+    /**
+     * Typography class applied to label.
+     * @default 'b2-regular'
+     */
+    labelTypographyClass?: string;
+}
+/**
+ * AvTagPicker component props in single selection mode.
+ */
+interface AvTagPickerSingleProps extends AvTagPickerBaseProps {
+    /**
+     * Multiple mode disabled.
+     * @default false
+     */
+    multiple?: false;
+    /**
+     * Option selected.
+     */
+    selected?: AvTagPickerOption;
+    /**
+     * Method called when changing selection.
+     * @param selected The selected option.
+     */
+    handleSelectChange: (selected: AvTagPickerOption) => void;
+}
+/**
+ * AvTagPicker component props in multiple selection mode.
+ */
+interface AvTagPickerMultipleProps extends AvTagPickerBaseProps {
+    /**
+     * Enables multiple selection mode.
+     */
+    multiple: true;
+    /**
+     * Options selected.
+     */
+    selected?: AvTagPickerOption[];
+    /**
+     * Method called when changing selection.
+     * @param selected The selected options.
+     */
+    handleSelectChange: (selected: AvTagPickerOption[]) => void;
+}
+/**
+ * AvTagPicker component props which can be in single or multiple mode.
+ */
+export type AvTagPickerProps = AvTagPickerSingleProps | AvTagPickerMultipleProps;
+declare const _default: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+export default _default;

package/dist/src/components/interaction/pickers/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AvPageSizePicker } from './AvPageSizePicker/AvPageSizePicker.vue';
+export { default as AvTagPicker, type AvTagPickerOption, type AvTagPickerProps } from './AvTagPicker/AvTagPicker.vue';

package/dist/src/components/interaction/radios/AvRadioButton/AvRadioButton.stories.d.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { type AvRadioButtonProps } from '@/components/interaction/radios/AvRadioButton/AvRadioButton.vue';
+/**
+ * <h1 class="n1">Radio buttons - <code>AvRadioButton</code></h1>
+ *
+ * <h2 class="n2">🌟 Introduction</h2>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     The <code>AvRadioButton</code> is a declarative component used exclusively in the <code>default</code> slot of <code>AvRadioButtonSet</code>.
+ *     <code>AvRadioButton</code> allows you to configure a radio button by passing its props (such as <code>value</code>, <code>label</code>,
+ *     <code>description</code> and <code>disabled</code>) to the <code>AvRadioButtonSet</code> component without rendering.
+ *   </span>
+ * </p>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     It acts as a proxy component: it exposes information (props) used by <code>AvRadioButtonSet</code> to generate the interface.
+ *   </span>
+ * </p>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     🚫 This component does not display anything by itself and should not be used outside <code>AvRadioButtonSet</code>.
+ *   </span>
+ * </p>
+ *
+ * <h2 class="n2">📐 Structure</h2>
+ *
+ * <p><span class="b2-regular">None.</span></p>
+ */
+declare const meta: Meta<AvRadioButtonProps>;
+export default meta;
+export declare const Default: StoryFn<AvRadioButtonProps>;

package/dist/src/components/interaction/radios/AvRadioButton/AvRadioButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/interaction/radios/AvRadioButton/AvRadioButton.vue.d.ts

@@ -0,0 +1,38 @@
+import type { Slot } from 'vue';
+/**
+ * AvRadioButton component props.
+ */
+export interface AvRadioButtonProps {
+    /**
+     * Value of the radio button.
+     * This value will be emitted when the radio is selected.
+     */
+    value: string | number | boolean;
+    /**
+     * Optional fallback label, used if no custom label slot is provided.
+     * Ignored if the `default` slot is used (see slot description).
+     */
+    label?: string;
+    /**
+     * Optional description shown under the radio label, providing more context.
+     */
+    description?: string;
+    /**
+     * If true, disables this radio button.
+     */
+    disabled?: boolean;
+}
+type __VLS_Slots = {
+    /**
+     * Default slot used to fully customize the radio label.
+     * When provided, this slot replaces the default `label` prop.
+     */
+    default?: Slot;
+};
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvRadioButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvRadioButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.stories.d.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { type AvRadioButtonSetProps } from '@/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.vue';
+/**
+ * <h1 class="n1">Radio button set - <code>AvRadioButtonSet</code></h1>
+ *
+ * <h2 class="n2">🌟 Introduction</h2>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     The <code>AvRadioButtonSet</code> component implements VueDSFR <code>DsfrRadioButtonSet</code> while automatically managing the addition of
+ *     <code>DsfrRadioButton</code> according to the <code>AvRadioButton</code> present in the <code>default</code> slot.
+ *   </span>
+ * </p>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     Radio buttons allow the user to select a single option from a list.
+ *   </span>
+ * </p>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     The radio button cannot be used on its own: a minimum of 2 options is required. It is preferable not to select a default option,
+ *     so that the user choice is conscious (especially if the choice is mandatory).
+ *   </span>
+ * </p>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     🏅 Documentation on <code>DsfrRadioButtonSet</code> can be found at
+ *     <a href="https://vue-ds.fr/composants/DsfrRadioButtonSet" target="_blank" rel="noopener noreferrer">VueDSFR</a>
+ *   </span>
+ * </p>
+ *
+ * <h2 class="n2">📐 Structure</h2>
+ *
+ * <p><span class="b2-regular">The <code>AvRadioButtonSet</code> component consists of the following elements:</span></p>
+ *
+ * <ul>
+ *   <li><span class="b2-regular">A <code>&lt;div&gt;</code> element encompassing the entire radio group.</span></li>
+ *   <li><span class="b2-regular">A <code>&lt;fieldset&gt;</code> element containing the radio buttons and associated messages.</span></li>
+ *   <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>
+ *   <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>
+ *   <li><span class="b2-regular">A group of individual radio buttons rendered by the <code>AvRadioButton</code>/<code>DsfrRadioButton</code> component.</span></li>
+ *   <li><span class="b2-regular">An information, error or validation message, displayed below the group of radio buttons (optional).</span></li>
+ * </ul>
+ */
+declare const meta: Meta<AvRadioButtonSetProps>;
+export default meta;
+export declare const Default: StoryFn<AvRadioButtonSetProps>;
+export declare const Inline: StoryFn<AvRadioButtonSetProps>;
+export declare const Disabled: StoryFn<AvRadioButtonSetProps>;
+export declare const Error: StoryFn<AvRadioButtonSetProps>;
+export declare const SuccessInline: StoryFn<AvRadioButtonSetProps>;

package/dist/src/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/interaction/radios/AvRadioButtonSet/AvRadioButtonSet.vue.d.ts

@@ -0,0 +1,76 @@
+import { type Slot } from 'vue';
+/**
+ * AvRadioButtonSet component props.
+ */
+export interface AvRadioButtonSetProps {
+    /**
+     * Name of the radio group, applied to each radio `<input name>`.
+     * Used for form submission and accessibility.
+     */
+    name: string;
+    /**
+     * Label (legend) for the radio group, rendered visually as a title.
+     * Helps screen readers understand the group context.
+     */
+    legend?: string;
+    /**
+     * Current selected value in the radio group.
+     * Must match one of the options values.
+     */
+    modelValue: string | number | boolean | undefined;
+    /**
+     * If true, disables all radio buttons in the group.
+     */
+    disabled?: boolean;
+    /**
+     * If true, marks the group as required and shows a required indicator.
+     */
+    required?: boolean;
+    /**
+     * If true, displays the radio buttons in compact (small) mode.
+     */
+    small?: boolean;
+    /**
+     * If true, displays the radio buttons inline (horizontally).
+     */
+    inline?: boolean;
+    /**
+     * Optional global error message displayed below the group.
+     * If set, indicates a validation error.
+     */
+    errorMessage?: string;
+    /**
+     * Optional global valid message displayed below the group.
+     * If set, confirms successful validation.
+     */
+    validMessage?: string;
+    /**
+     * Optional hint text displayed below the legend.
+     * Provides guidance or extra information.
+     */
+    hint?: string;
+}
+type __VLS_Slots = {
+    /**
+     * Default slot to pass in one or more `AvRadioButton` components.
+     *
+     * Each `AvRadioButton` defines the props and content for a single radio option.
+     * The content of each button will be injected into the `label` slot of `DsfrRadioButton`.
+     *
+     * @slot default
+     */
+    default?: Slot;
+};
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvRadioButtonSetProps, {
+    selected: import("vue").Ref<string | number | boolean | undefined, string | number | boolean | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | boolean) => any;
+}, string, import("vue").PublicProps, Readonly<AvRadioButtonSetProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/interaction/radios/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AvRadioButton } from './AvRadioButton/AvRadioButton.vue';
+export { default as AvRadioButtonSet } from './AvRadioButtonSet/AvRadioButtonSet.vue';