@ouestfrance/sipa-bms-ui 8.9.0 → 8.9.2

package/dist/components/form/BmsMultiSelect.vue.d.ts

@@ -1,17 +1,17 @@
 import { InputOption } from '../../models';
 import { FieldComponentProps } from '../../plugins/field/field-component.model';
 export interface Props extends FieldComponentProps {
-    options: InputOption[];
+    options: InputOption[] | string[];
     placeholder?: string;
 }
 type __VLS_Props = Props;
 type __VLS_PublicProps = {
-    'modelValue': InputOption[];
+    'modelValue'?: string[] | null;
 } & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: InputOption[]) => any;
+    "update:modelValue": (value: string[] | null) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: InputOption[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[] | null) => any) | undefined;
 }>, {
     label: string;
     required: boolean;

package/dist/sipa-bms-ui.css

@@ -1188,28 +1188,28 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   --field-border-color: var(--bms-grey-25);
   --input-background-color: var(--bms-grey-25);
   pointer-events: none;
-}.tags[data-v-05d9b16f] {
+}.tags[data-v-aece870d] {
   display: flex;
   gap: 0.5em;
   padding: var(--field-margin);
   flex-wrap: wrap;
   width: 100%;
 }
-.tags .search[data-v-05d9b16f] {
+.tags .search[data-v-aece870d] {
   outline: none;
   border: none;
   background-color: transparent;
   flex-grow: 1;
 }
-.icon-container[data-v-05d9b16f] {
+.icon-container[data-v-aece870d] {
   height: 100%;
   display: flex;
   align-items: center;
 }
-.icon-container[data-v-05d9b16f]:hover {
+.icon-container[data-v-aece870d]:hover {
   cursor: pointer;
 }
-.icon-container .icon[data-v-05d9b16f] {
+.icon-container .icon[data-v-aece870d] {
   display: block;
   width: 1em;
   height: 1em;
@@ -1628,16 +1628,14 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   display: flex;
   justify-content: flex-end;
   gap: 1em;
-}.stepper-header[data-v-c872a497] {
+}.stepper-header[data-v-c132d5cd] {
   display: flex;
   justify-content: center;
   align-items: center;
-  position: sticky;
-  z-index: 2;
   top: 0;
   padding: 2em 0;
 }
-.stepper-header[data-v-c872a497]::before {
+.stepper-header[data-v-c132d5cd]::before {
   content: "";
   display: block;
   width: 80%;
@@ -1651,7 +1649,7 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   opacity: 0;
   transition: opacity 0.2s linear;
 }
-.stepper-header[data-v-c872a497]::after {
+.stepper-header[data-v-c132d5cd]::after {
   content: "";
   display: block;
   position: absolute;
@@ -1662,22 +1660,22 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   background: transparent;
   z-index: -1;
 }
-.stepper-header--step[data-v-c872a497] {
+.stepper-header--step[data-v-c132d5cd] {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 10px;
 }
-.stepper-header--step[data-v-c872a497]:first-child {
+.stepper-header--step[data-v-c132d5cd]:first-child {
   margin: 0 10px 0 0;
 }
-.stepper-header--step[data-v-c872a497]:last-child {
+.stepper-header--step[data-v-c132d5cd]:last-child {
   margin: 0;
 }
-.stepper-header--step.clickable:hover div[data-v-c872a497] {
+.stepper-header--step.clickable:hover div[data-v-c132d5cd] {
   cursor: pointer;
 }
-.stepper-header--indicator[data-v-c872a497] {
+.stepper-header--indicator[data-v-c132d5cd] {
   width: 30px;
   height: 30px;
   display: flex;
@@ -1689,22 +1687,22 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   font-weight: bold;
   margin-right: 10px;
 }
-.stepper-header--indicator.active[data-v-c872a497] {
+.stepper-header--indicator.active[data-v-c132d5cd] {
   border: none;
   background-color: var(--bms-main-100);
   color: white;
 }
-.stepper-header--indicator.complete[data-v-c872a497] {
+.stepper-header--indicator.complete[data-v-c132d5cd] {
   border: none;
   background-color: var(--bms-success-color);
   color: white;
   font-size: 20px;
 }
-.stepper-header--separator[data-v-c872a497] {
+.stepper-header--separator[data-v-c132d5cd] {
   width: 30px;
   margin-left: 10px;
 }
-.stepper-body[data-v-c872a497] {
+.stepper-body[data-v-c132d5cd] {
   margin: 10px 10px 0 10px;
 }a[data-v-02d02028] {
   cursor: pointer;

package/dist/sipa-bms-ui.es.js

@@ -68458,9 +68458,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false },
     small: { type: Boolean }
   }, {
-    "modelValue": {
-      required: true
-    },
+    "modelValue": { default: [] },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
@@ -68472,8 +68470,12 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     const openDatalist = () => isDatalistOpen.value = true;
     const searching = ref("");
     const modelValue = useModel(__props, "modelValue");
+    onClickOutside(inputElement, closeDatalist, {
+      ignore: [".datalist-option", ".icon-toggle-button"]
+    });
     const onBackspace = () => {
-      modelValue.value.splice(-1);
+      if (searching.value.length === 0 && modelValue.value && modelValue.value.length > 0)
+        modelValue.value.splice(-1);
     };
     const setFocus = () => {
       if (inputElement.value) {
@@ -68481,38 +68483,50 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       }
     };
     const onSelect = (option) => {
-      modelValue.value.push(option);
+      if (typeof option === "string") {
+        modelValue.value = (modelValue.value ?? []).concat(option);
+      } else if (option.value) {
+        modelValue.value = (modelValue.value ?? []).concat(option.value);
+      }
       searching.value = "";
       setFocus();
       closeDatalist();
     };
     const removeOption = (value) => {
-      modelValue.value = modelValue.value.filter((o) => o.value !== value);
+      modelValue.value = (modelValue.value ?? []).filter((o) => o !== value);
     };
     const clearInput = () => {
       modelValue.value = [];
       searching.value = "";
     };
-    const displayedOptions = computed(
-      () => props.options.filter((o) => searchString(o.label, searching.value)).filter(
-        (o) => !modelValue.value.find((option) => option.value === o.value)
-      )
+    const selectedItems = computed(() => {
+      if (!modelValue.value) return [];
+      const items = [];
+      modelValue.value.forEach((selectedValue) => {
+        const item = optionsLabelValue.value.find(
+          (option) => option.value === selectedValue
+        );
+        if (item) items.push(item);
+      });
+      return items;
+    });
+    const optionsLabelValue = computed(
+      () => Array.isArray(props.options) && !!props.options.length && typeof props.options[0] === "string" ? props.options.map((o) => ({ label: o, value: o })) : props.options
     );
-    const displayValues = computed(
-      () => modelValue.value.filter(
-        (o) => props.options.find((option) => option.value === o.value)
-      )
+    const filteredOptions = computed(
+      () => optionsLabelValue.value.filter((o) => searchString(o.label, searching.value))
     );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(RawSelect, mergeProps(_ctx.$props, {
-        options: displayedOptions.value,
+        options: filteredOptions.value,
         "model-value": modelValue.value,
         open: isDatalistOpen.value,
-        onSelect
+        onSelect,
+        onClick: setFocus
       }), {
         input: withCtx(() => [
           createElementVNode("div", _hoisted_1$F, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(displayValues.value, (tag) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(selectedItems.value, (tag) => {
               return openBlock(), createBlock(BmsTag, {
                 small: _ctx.small,
                 active: "",
@@ -68543,7 +68557,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             ])
           ]),
           createElementVNode("span", _hoisted_2$r, [
-            modelValue.value.length ? (openBlock(), createBlock(unref(X), {
+            modelValue.value && modelValue.value?.length ? (openBlock(), createBlock(unref(X), {
               key: 0,
               class: "icon icon-clear",
               onClick: withModifiers(clearInput, ["stop"])
@@ -68578,7 +68592,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BmsMultiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-05d9b16f"]]);
+const BmsMultiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-aece870d"]]);
 
 const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "BmsSearch",
@@ -89584,7 +89598,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BmsStepper = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-c872a497"]]);
+const BmsStepper = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-c132d5cd"]]);
 
 const historyRoutes = ref([]);
 const useRouterHistory = () => {