@avenirs-esr/avenirs-dsav 0.1.28 → 0.1.30

package/dist/components/interaction/buttons/AvButton/AvButton.stories.d.ts

@@ -33,13 +33,13 @@ import { type AvButtonProps } from '@/components/interaction/buttons/AvButton/Av
  * <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>,
+ *       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.
+ *       An icon, which can be modified (see available icons) - optional.
  *     </span>
  *   </li>
  * </ul>

package/dist/components/interaction/selects/AvAutocomplete/AvAutocomplete.stories.d.ts

@@ -508,6 +508,8 @@ export declare const WithCustomItemSlotExample: {
                 CHECK: string;
                 CHECK_CIRCLE: string;
                 CHECK_CIRCLE_OUTLINE: string;
+                CHECKBOX_BLANK_OUTLINE: string;
+                CHECKBOX_MARKED: string;
                 CHEVRON_DOUBLE_LEFT: string;
                 CHEVRON_DOUBLE_RIGHT: string;
                 CLOSE_CIRCLE_OUTLINE: string;

package/dist/components/interaction/selects/AvMultiselect/AvMultiselect.stories.d.ts

@@ -0,0 +1,129 @@
+import type { StoryFn } from '@storybook/vue3';
+import { type AvMultiselectProps } from '@/components/interaction/selects/AvMultiselect/AvMultiselect.vue';
+/**
+ * <h2 class="n2">✨ Introduction</h2>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     The <code>AvMultiselect</code> is a Vue component enabling a user to select one or many items from a given list.
+ *   </span>
+ * </p>
+ *
+ * <p>
+ *   <span class="b2-regular">
+ *     The drop-down list provides a list of options for the user to choose from.
+ *     The user can filter this list and use a button to select/deselect all visible items.
+ *   </span>
+ * </p>
+ *
+ * <h2 class="n2">🏗️ Structure</h2>
+ *
+ * <p><span class="b2-regular">The <code>AvMultiselect</code> consists of:</span></p>
+ * <ul>
+ *   <li><span class="b2-regular">a <strong>label</strong> - Mandatory (<code>label</code> prop)</span></li>
+ *   <li><span class="b2-regular">a <strong>description</strong> - Optional (<code>hint</code> prop or <code>hint</code> slot)</span></li>
+ *   <li><span class="b2-regular">a <strong>list</strong> - Composed of a set of selectable options (mandatory, <code>options</code> prop with a label, a value and an optional icon)</span></li>
+ * </ul>
+ *
+ * <p><span class="b2-regular">Inside the list:</span></p>
+ * <ul>
+ *   <li><span class="b2-regular">a <strong>"Select all" / "Deselect all" button</strong> - Optional (<code>selectAll</code> and <code>selectAllLabel</code> props)</span></li>
+ *   <li><span class="b2-regular">an <strong>input field</strong> - Optional</span></li>
+ *   <li><span class="b2-regular">a <strong>form section (fieldset)</strong> containing:</span>
+ *     <ul>
+ *       <li><span class="b2-regular">a <strong>legend</strong> - Optional, can be hidden (<code>legend</code> prop or <code>legend</code> slot)</span></li>
+ *       <li><span class="b2-regular">a <strong>description of the group</strong> - Optional, can be hidden</span></li>
+ *       <li><span class="b2-regular">a <strong>list of options</strong> - Mandatory (<code>options</code> prop with a label, a value and an optional icon)</span></li>
+ *     </ul>
+ *   </li>
+ * </ul>
+ */
+declare const meta: {
+    title: string;
+    component: import("vue").DefineComponent<AvMultiselectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+        "update:modelValue": (value: import("@/components/interaction/selects/AvMultiselect/AvMultiselect.vue").AvMultiselectOption[]) => any;
+    }, string, import("vue").PublicProps, Readonly<AvMultiselectProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: import("@/components/interaction/selects/AvMultiselect/AvMultiselect.vue").AvMultiselectOption[]) => any) | undefined;
+    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    tags: string[];
+    argTypes: {
+        disabled: {
+            control: string;
+        };
+        dense: {
+            control: string;
+        };
+        selectId: {
+            control: string;
+        };
+        name: {
+            control: string;
+        };
+        hint: {
+            control: string;
+        };
+        modelValue: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            control: boolean;
+        };
+        label: {
+            control: string;
+        };
+        options: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            control: boolean;
+        };
+        successMessage: {
+            control: string;
+        };
+        errorMessage: {
+            control: string;
+        };
+        defaultUnselectedText: {
+            control: string;
+            required: boolean;
+        };
+        selectAll: {
+            control: string;
+        };
+        search: {
+            control: string;
+        };
+    };
+    args: {
+        options: {
+            value: string;
+            label: string;
+        }[];
+        defaultUnselectedText: string;
+        required: boolean;
+        disabled: boolean;
+        selectId: string;
+        name: string;
+        hint: string;
+        modelValue: never[];
+        label: string;
+        successMessage: string;
+        errorMessage: string;
+        dense: boolean;
+        selectAll: boolean;
+        search: boolean;
+    };
+    parameters: {
+        docs: {
+            story: {
+                height: string;
+            };
+        };
+    };
+};
+export default meta;
+export declare const Default: StoryFn<AvMultiselectProps>;
+export declare const Dense: StoryFn<AvMultiselectProps>;
+export declare const OptionsWithIcon: StoryFn<AvMultiselectProps>;

package/dist/components/interaction/selects/AvMultiselect/AvMultiselect.test.d.ts

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

package/dist/components/interaction/selects/AvMultiselect/AvMultiselect.vue.d.ts

@@ -0,0 +1,90 @@
+/**
+ * AvMultiselect option props.
+ */
+export interface AvMultiselectOption {
+    /**
+     * Displayed label of the option
+     */
+    label: string;
+    /**
+     * Name of the icon option
+     */
+    icon?: string;
+    /**
+     * Value of the option
+     */
+    value: string | number;
+}
+/**
+ * AvMultiselect component props.
+ */
+export interface AvMultiselectProps {
+    /**
+     * Indicated if the select is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Unique id for the select. Used for the accessibility.
+     */
+    selectId?: string;
+    /**
+     * Field name.
+     */
+    name?: string;
+    /**
+     * Hint for guidance.
+     */
+    hint?: string;
+    /**
+     * Selected option(s) value(s).
+     */
+    modelValue: AvMultiselectOption[];
+    /**
+     * Select text label.
+     */
+    label: string;
+    /**
+     * Selectable options.
+     */
+    options?: AvMultiselectOption[];
+    /**
+     * If set, display a success message.
+     */
+    successMessage?: string;
+    /**
+     * If set, display an error message.
+     */
+    errorMessage?: string;
+    /**
+     * Placeholder text.
+     */
+    defaultUnselectedText: string;
+    /**
+     * dense mode
+     */
+    dense?: boolean;
+    /**
+     * Displayed text when options are selected.
+     */
+    selectedText?: string;
+    /**
+     * Displays the select all items button
+     */
+    selectAll?: boolean;
+    /**
+     * Update the select all items button label
+     * @default
+     * ["Tout sélectionner", "Tout désélectionner"]
+     */
+    selectAllLabel?: [string, string];
+    /**
+     * Displays the search bar
+     */
+    search?: boolean;
+}
+declare const _default: import("vue").DefineComponent<AvMultiselectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: AvMultiselectOption[]) => any;
+}, string, import("vue").PublicProps, Readonly<AvMultiselectProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: AvMultiselectOption[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/tokens/icons.d.ts

@@ -20,6 +20,8 @@ export declare const MDI_ICONS: {
     CHECK: string;
     CHECK_CIRCLE: string;
     CHECK_CIRCLE_OUTLINE: string;
+    CHECKBOX_BLANK_OUTLINE: string;
+    CHECKBOX_MARKED: string;
     CHEVRON_DOUBLE_LEFT: string;
     CHEVRON_DOUBLE_RIGHT: string;
     CLOSE_CIRCLE_OUTLINE: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avenirs-esr/avenirs-dsav",
   "type": "module",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "main": "dist/avenirs-dsav.umd.js",
   "module": "dist/avenirs-dsav.es.js",
   "types": "dist/index.d.ts",