@espri/vue-components 2.2.1 → 2.4.1

package/README.md

@@ -33,3 +33,12 @@ import EspriInputNumber from '@espri/vue-components/input-number';
 ### Others
 
 - `EspriVirtualKeyboard`
+
+### Demo
+
+You can use the playground demo to test your espri components. To get started:
+
+1. Navigate to the `demo` folder
+2. Run `docker-compose up -d` to start the development environment
+3. Visit http://localhost:5173 in your browser
+4. Edit `App.vue` to add and test your components

package/dist/index.css

@@ -0,0 +1 @@
+.error[data-v-702f97d9],.error[data-v-6cb5331a]{color:var(--p-floatlabel-invalid-color, var(--p-red-600))}

package/dist/index.es.js

@@ -1,14 +1,156 @@
-import { default as t } from "./checkbox.es.js";
-import { default as o } from "./input-number.es.js";
-import { default as s } from "./input-password.es.js";
-import { default as u } from "./input-text.es.js";
-import { default as l } from "./select.es.js";
-import { default as i } from "./virtual-keyboard.es.js";
+import { default as A } from "./checkbox.es.js";
+import { defineComponent as _, computed as c, openBlock as a, createElementBlock as m, normalizeClass as p, createBlock as u, unref as t, withCtx as v, createVNode as V, createElementVNode as f, createTextVNode as g, toDisplayString as h, createCommentVNode as x } from "vue";
+import { Skeleton as k, FloatLabel as E, DatePicker as w, MultiSelect as C } from "primevue";
+import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { default as H } from "./input-number.es.js";
+import { default as Q } from "./input-password.es.js";
+import { default as X } from "./input-text.es.js";
+import { default as Z } from "./select.es.js";
+import { default as le } from "./virtual-keyboard.es.js";
+import './index.css';const $ = ["for"], M = { key: 0 }, S = { class: "error" }, L = /* @__PURE__ */ _({
+  __name: "date-picker",
+  props: {
+    label: {},
+    modelValue: {},
+    class: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    loading: { type: Boolean },
+    showError: { type: Boolean },
+    rules: {},
+    dateFormat: {},
+    placeholder: {}
+  },
+  emits: ["update:modelValue"],
+  setup(b, { emit: y }) {
+    const e = b, r = y, i = Math.random().toString(16).slice(2), d = c({
+      get() {
+        return e.modelValue;
+      },
+      set(o) {
+        r("update:modelValue", o);
+      }
+    }), n = c(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
+    return (o, l) => (a(), m("div", {
+      class: p(`field ${e.class || ""}`)
+    }, [
+      e.loading ? (a(), u(t(k), {
+        key: 0,
+        class: "skeleton-input mt-3"
+      })) : (a(), u(t(E), {
+        key: 1,
+        class: "mt-3"
+      }, {
+        default: v(() => [
+          V(t(w), {
+            modelValue: d.value,
+            "onUpdate:modelValue": l[0] || (l[0] = (s) => d.value = s),
+            class: p(["w-full", e.class]),
+            invalid: !!n.value,
+            disabled: e.disabled,
+            placeholder: e.placeholder,
+            "input-id": t(i),
+            "date-format": e.dateFormat || "dd/mm/yy"
+          }, null, 8, ["modelValue", "class", "invalid", "disabled", "placeholder", "input-id", "date-format"]),
+          f("label", { for: t(i) }, [
+            g(h(e.label), 1),
+            e.required ? (a(), m("span", M, " *")) : x("", !0)
+          ], 8, $)
+        ]),
+        _: 1
+      })),
+      f("small", S, h(n.value), 1)
+    ], 2));
+  }
+}), F = /* @__PURE__ */ B(L, [["__scopeId", "data-v-702f97d9"]]), U = F, I = ["for"], P = { key: 0 }, N = { class: "error" }, q = /* @__PURE__ */ _({
+  __name: "multi-select",
+  props: {
+    label: {},
+    options: {},
+    modelValue: {},
+    class: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    showClear: { type: Boolean },
+    loading: { type: Boolean },
+    showError: { type: Boolean },
+    rules: {},
+    placeholder: {},
+    maxSelectedLabels: {},
+    selectionLimit: {},
+    emptyMessage: {},
+    selectedItemsLabel: {},
+    resetFilterOnClear: { type: Boolean },
+    filter: { type: Boolean },
+    filterPlaceholder: {},
+    filterLocale: {},
+    filterMatchMode: {},
+    filterFields: {}
+  },
+  emits: ["update:modelValue", "filter", "selectall-change"],
+  setup(b, { emit: y }) {
+    const e = b, r = y, i = Math.random().toString(16).slice(2), d = c({
+      get() {
+        return e.modelValue;
+      },
+      set(o) {
+        r("update:modelValue", o);
+      }
+    }), n = c(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
+    return (o, l) => (a(), m("div", {
+      class: p(`field ${e.class || ""}`)
+    }, [
+      e.loading ? (a(), u(t(k), {
+        key: 0,
+        class: "skeleton-input mt-3"
+      })) : (a(), u(t(E), {
+        key: 1,
+        class: "mt-3"
+      }, {
+        default: v(() => [
+          V(t(C), {
+            modelValue: d.value,
+            "onUpdate:modelValue": l[0] || (l[0] = (s) => d.value = s),
+            options: e.options,
+            "option-label": "label",
+            "option-value": "value",
+            class: p(["w-full", e.class]),
+            invalid: !!n.value,
+            disabled: e.disabled,
+            placeholder: e.placeholder,
+            "show-clear": e.showClear,
+            "max-selected-labels": e.maxSelectedLabels,
+            "empty-message": e.emptyMessage,
+            "selection-limit": e.selectionLimit,
+            "selected-items-label": e.selectedItemsLabel,
+            "reset-filter-on-clear": e.resetFilterOnClear,
+            filter: e.filter,
+            "filter-placeholder": e.filterPlaceholder,
+            "filter-locale": e.filterLocale,
+            "filter-match-mode": e.filterMatchMode,
+            "filter-fields": e.filterFields,
+            "input-id": t(i),
+            onFilter: l[1] || (l[1] = (s) => r("filter", s)),
+            onSelectallChange: l[2] || (l[2] = (s) => r("selectall-change", s))
+          }, null, 8, ["modelValue", "options", "class", "invalid", "disabled", "placeholder", "show-clear", "max-selected-labels", "empty-message", "selection-limit", "selected-items-label", "reset-filter-on-clear", "filter", "filter-placeholder", "filter-locale", "filter-match-mode", "filter-fields", "input-id"]),
+          f("label", { for: t(i) }, [
+            g(h(e.label), 1),
+            e.required ? (a(), m("span", P, " *")) : x("", !0)
+          ], 8, I)
+        ]),
+        _: 1
+      })),
+      f("small", N, h(n.value), 1)
+    ], 2));
+  }
+}), D = /* @__PURE__ */ B(q, [["__scopeId", "data-v-6cb5331a"]]), z = D;
 export {
-  t as EspriCheckbox,
-  o as EspriInputNumber,
-  s as EspriInputPassword,
-  u as EspriInputText,
-  l as EspriSelect,
-  i as EspriVirtualKeyboard
+  A as EspriCheckbox,
+  U as EspriDatePicker,
+  H as EspriInputNumber,
+  Q as EspriInputPassword,
+  X as EspriInputText,
+  z as EspriMultiSelect,
+  Z as EspriSelect,
+  le as EspriVirtualKeyboard
 };

package/dist/select.css

@@ -1 +1 @@
-.error[data-v-5a8f854e]{color:var(--p-floatlabel-invalid-color, var(--p-red-600))}
+.error[data-v-55a0f12b]{color:var(--p-floatlabel-invalid-color, var(--p-red-600))}

package/dist/select.es.js

@@ -1,13 +1,14 @@
-import { defineComponent as h, computed as i, openBlock as t, createElementBlock as d, normalizeClass as c, createBlock as p, unref as o, withCtx as b, createVNode as y, createElementVNode as u, createTextVNode as g, toDisplayString as m, createCommentVNode as k } from "vue";
-import { Skeleton as B, FloatLabel as x, Select as E } from "primevue";
-import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
-import './select.css';const C = ["for"], w = { key: 0 }, N = { class: "error" }, $ = /* @__PURE__ */ h({
+import { defineComponent as V, computed as i, openBlock as t, createElementBlock as d, normalizeClass as c, createBlock as p, unref as o, withCtx as b, createVNode as y, createElementVNode as u, createTextVNode as g, toDisplayString as m, createCommentVNode as k } from "vue";
+import { Skeleton as w, FloatLabel as B, Select as C } from "primevue";
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import './select.css';const E = ["for"], S = { key: 0 }, N = { class: "error" }, $ = /* @__PURE__ */ V({
   __name: "select",
   props: {
     label: {},
     options: {},
     disabled: { type: Boolean },
     required: { type: Boolean },
+    showClear: { type: Boolean },
     showError: { type: Boolean },
     rules: {},
     maxlength: {},
@@ -19,28 +20,28 @@ import './select.css';const C = ["for"], w = { key: 0 }, N = { class: "error" },
   },
   emits: ["update:modelValue"],
   setup(f, { emit: _ }) {
-    const e = f, v = _, s = Math.random().toString(16).slice(2), n = i({
+    const e = f, h = _, s = Math.random().toString(16).slice(2), n = i({
       get() {
         return e.modelValue;
       },
       set(a) {
-        v("update:modelValue", a);
+        h("update:modelValue", a);
       }
     }), r = i(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
     return (a, l) => (t(), d("div", {
       class: c(`field ${e.class || ""}`)
     }, [
-      e.loading ? (t(), p(o(B), {
+      e.loading ? (t(), p(o(w), {
         key: 0,
         class: "skeleton-input mt-3"
-      })) : (t(), p(o(x), {
+      })) : (t(), p(o(B), {
         key: 1,
         class: "mt-3"
       }, {
         default: b(() => [
-          y(o(E), {
+          y(o(C), {
             modelValue: n.value,
-            "onUpdate:modelValue": l[0] || (l[0] = (V) => n.value = V),
+            "onUpdate:modelValue": l[0] || (l[0] = (v) => n.value = v),
             options: e.options,
             "option-label": "label",
             "option-value": "value",
@@ -48,19 +49,20 @@ import './select.css';const C = ["for"], w = { key: 0 }, N = { class: "error" },
             invalid: !!r.value,
             disabled: e.disabled,
             placeholder: e.placeholder,
+            "show-clear": e.showClear,
             "input-id": o(s)
-          }, null, 8, ["modelValue", "options", "class", "invalid", "disabled", "placeholder", "input-id"]),
+          }, null, 8, ["modelValue", "options", "class", "invalid", "disabled", "placeholder", "show-clear", "input-id"]),
           u("label", { for: o(s) }, [
             g(m(e.label), 1),
-            e.required ? (t(), d("span", w, " *")) : k("", !0)
-          ], 8, C)
+            e.required ? (t(), d("span", S, " *")) : k("", !0)
+          ], 8, E)
         ]),
         _: 1
       })),
       u("small", N, m(r.value), 1)
     ], 2));
   }
-}), q = /* @__PURE__ */ S($, [["__scopeId", "data-v-5a8f854e"]]), F = q;
+}), q = /* @__PURE__ */ x($, [["__scopeId", "data-v-55a0f12b"]]), F = q;
 export {
   F as default
 };

package/dist/types/date-picker/index.d.ts

@@ -0,0 +1,19 @@
+import type { DefineComponent } from 'vue';
+import type EspriDatePickerEmits from './interfaces/date-picker-emits.interface';
+import type { EspriDatePickerEmitsForDoc } from './interfaces/date-picker-emits.interface';
+import type EspriDatePickerProps from './interfaces/date-picker-props.interface';
+/**
+ * **ESPRI Digital - Input Text (Vue component)**
+ * --- ---
+ * ![ESPRIDigital](https://espridigital.fr/wp-content/uploads/2024/09/logo_espri_digital_white-100-1.png)
+ *
+ */
+declare const EspriDatePicker: DefineComponent<EspriDatePickerProps, {}, // For slots if any
+{}, // For methods or data if any
+{}, // Computed
+{}, // Methods
+{}, // Mixin
+{}, // Extends
+EspriDatePickerEmitsForDoc>;
+export default EspriDatePicker;
+export type { EspriDatePickerEmits, EspriDatePickerProps };

package/dist/types/date-picker/interfaces/date-picker-emits.interface.d.ts

@@ -0,0 +1,10 @@
+import type { ObjectEmitsOptions } from 'vue';
+export default interface EspriDatePickerEmits {
+    (e: 'update:modelValue', value: Date | null): void;
+}
+export interface EspriDatePickerEmitsForDoc extends ObjectEmitsOptions {
+    /**
+     * Called when modelValue is updated.
+     */
+    'update:modelValue': (value: Date | null) => void;
+}

package/dist/types/date-picker/interfaces/date-picker-props.interface.d.ts

@@ -0,0 +1,48 @@
+export default interface EspriDatePickerProps {
+    /**
+     * Label displayed above the date picker.
+     */
+    label: string;
+    /**
+     * Model value representing the selected date.
+     */
+    modelValue: Date | null;
+    /**
+     * Class of the component.
+     */
+    class?: any;
+    /**
+     * Disables the date picker when true.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the input as required when true.
+     */
+    required?: boolean;
+    /**
+     * Indicates if the component is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Shows error messages when true.
+     */
+    showError?: boolean;
+    /**
+     * Validation rules for the date picker.
+     * Each rule can be undefined or an object containing:
+     * - $invalid: whether the rule is violated
+     * - $message: the error message associated with the rule
+     */
+    rules?: Array<{
+        $invalid: boolean;
+        $message: string;
+    } | undefined>;
+    /**
+     * Date format pattern.
+     */
+    dateFormat?: string;
+    /**
+     * Placeholder text for the date picker.
+     */
+    placeholder?: string;
+}

package/dist/types/index.d.ts

@@ -1,7 +1,9 @@
 import EspriCheckbox from './checkbox';
+import EspriDatePicker from './date-picker';
 import EspriInputNumber from './input-number';
 import EspriInputPassword from './input-password';
 import EspriInputText from './input-text';
+import EspriMultiSelect from './multi-select';
 import EspriSelect from './select';
 import EspriVirtualKeyboard from './virtual-keyboard';
-export { EspriCheckbox, EspriInputNumber, EspriInputPassword, EspriInputText, EspriSelect, EspriVirtualKeyboard, };
+export { EspriCheckbox, EspriDatePicker, EspriInputNumber, EspriInputPassword, EspriInputText, EspriMultiSelect, EspriSelect, EspriVirtualKeyboard, };

package/dist/types/input-text/interfaces/input-text-props.interface.d.ts

@@ -22,7 +22,7 @@ export default interface EspriInputTextProps {
     /**
      * Indicates if the input is in a loading state.
      */
-    loading: boolean;
+    loading?: boolean;
     /**
      * Shows error messages when true.
      */

package/dist/types/multi-select/index.d.ts

@@ -0,0 +1,19 @@
+import type { DefineComponent } from 'vue';
+import type EspriMultiSelectEmits from './interfaces/multi-select-emits.interface';
+import type { EspriMultiSelectEmitsForDoc } from './interfaces/multi-select-emits.interface';
+import type EspriMultiSelectProps from './interfaces/multi-select-props.interface';
+/**
+ * **ESPRI Digital - Multi Select (Vue component)**
+ * --- ---
+ * ![ESPRIDigital](https://espridigital.fr/wp-content/uploads/2024/09/logo_espri_digital_white-100-1.png)
+ *
+ */
+declare const EspriMultiSelect: DefineComponent<EspriMultiSelectProps, {}, // For slots if any
+{}, // For methods or data if any
+{}, // Computed
+{}, // Methods
+{}, // Mixin
+{}, // Extends
+EspriMultiSelectEmitsForDoc>;
+export default EspriMultiSelect;
+export type { EspriMultiSelectEmits, EspriMultiSelectProps };

package/dist/types/multi-select/interfaces/multi-select-emits.interface.d.ts

@@ -0,0 +1,21 @@
+import type { MultiSelectAllChangeEvent, MultiSelectFilterEvent } from 'primevue/multiselect';
+import type { ObjectEmitsOptions } from 'vue';
+export default interface EspriMultiSelectEmits {
+    (e: 'update:modelValue', value: any[]): void;
+    (e: 'filter', event: MultiSelectFilterEvent): void;
+    (e: 'selectall-change', event: MultiSelectAllChangeEvent): void;
+}
+export interface EspriMultiSelectEmitsForDoc extends ObjectEmitsOptions {
+    /**
+     * Called when modelValue is updated.
+     */
+    'update:modelValue': (value: any[]) => void;
+    /**
+     * Callback to invoke on filter input.
+     */
+    'filter': (event: MultiSelectFilterEvent) => void;
+    /**
+     * Callback to invoke when all data is selected.
+     */
+    'selectall-change': (event: MultiSelectAllChangeEvent) => void;
+}

package/dist/types/multi-select/interfaces/multi-select-props.interface.d.ts

@@ -0,0 +1,112 @@
+export interface EspriMultiSelectOption {
+    /**
+     * Display text for the option
+     */
+    label: string;
+    /**
+     * Value associated with the option
+     */
+    value: any;
+}
+type HintedString<T extends string> = T | (string & {});
+export default interface EspriMultiSelectProps {
+    /**
+     * Label displayed above the input.
+     */
+    label: string;
+    /**
+     * Array of options available for selection.
+     */
+    options: Array<EspriMultiSelectOption>;
+    /**
+     * Array of selected values.
+     */
+    modelValue: any[];
+    /**
+     * Class of the component.
+     */
+    class?: any;
+    /**
+     * Disables the input when true.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the input as required when true.
+     */
+    required?: boolean;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     */
+    showClear?: boolean;
+    /**
+     * Indicates if the component is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Shows error messages when true.
+     */
+    showError?: boolean;
+    /**
+     * Validation rules for the input.
+     * Each rule can be undefined or an object containing:
+     * - $invalid: whether the rule is violated
+     * - $message: the error message associated with the rule
+     */
+    rules?: Array<{
+        $invalid: boolean;
+        $message: string;
+    } | undefined>;
+    /**
+     * Placeholder text displayed inside the input.
+     */
+    placeholder?: string;
+    /**
+     * Decides how many selected item labels to show at most.
+     */
+    maxSelectedLabels?: number;
+    /**
+     * Maximum number of selectable items.
+     */
+    selectionLimit?: number;
+    /**
+     * Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
+     */
+    emptyMessage?: string;
+    /**
+     * Label to display after exceeding max selected labels.
+     */
+    selectedItemsLabel?: string;
+    /**
+     * Clears the filter value when clicking on the clear icon.
+     * @default false
+     */
+    resetFilterOnClear?: boolean;
+    /**
+     * When specified, displays a filter input at header.
+     * @default false
+     */
+    filter?: boolean;
+    /**
+     * Placeholder text to show when filter input is empty.
+     * @default null
+     */
+    filterPlaceholder?: string;
+    /**
+     * Locale to use in filtering.
+     * Defaults to the host environment's current locale.
+     * @default null
+     */
+    filterLocale?: string;
+    /**
+     * Defines the filtering algorithm to use when searching options.
+     * @default 'contains'
+     */
+    filterMatchMode?: HintedString<'startsWith' | 'contains' | 'endsWith'>;
+    /**
+     * Fields used when filtering options.
+     * Defaults to optionLabel.
+     * @default null
+     */
+    filterFields?: string[];
+}
+export {};

package/dist/types/select/interfaces/select-props.interface.d.ts

@@ -25,6 +25,10 @@ export default interface EspriSelectProps {
      * Marks the input as required when true.
      */
     required?: boolean;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     */
+    showClear?: boolean;
     /**
      * Shows error messages when true.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@espri/vue-components",
-  "version": "2.2.1",
+  "version": "2.4.1",
   "description": "ESPRI Digital - Vue components library",
   "author": "ESPRI Digital",
   "homepage": "https://github.com/ESPRI-Digital/vue-select#readme",
@@ -44,6 +44,7 @@
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "ts-check": "vue-tsc --noEmit"
   },
   "peerDependencies": {