@ouestfrance/sipa-bms-ui 8.9.0 → 8.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.9.0",
+  "version": "8.9.2",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

package/src/components/form/BmsMultiSelect.stories.js

@@ -30,7 +30,7 @@ export const Default = Template.bind({});
 Default.args = {
   label: 'My label',
   captions: ['Helping text'],
-  modelValue: [],
+  modelValue: null,
   options: [
     { label: 'optionA', value: 'a' },
     { label: 'optionB', value: 'b' },
@@ -40,7 +40,7 @@ Default.args = {
 export const WithValue = Template.bind({});
 WithValue.args = {
   label: 'My label',
-  modelValue: [{ label: 'optionA', value: 'a' }],
+  modelValue: ['a'],
   options: [
     { label: 'optionA', value: 'a' },
     { label: 'optionB', value: 'b' },
@@ -50,7 +50,7 @@ WithValue.args = {
 export const Disabled = Template.bind({});
 Disabled.args = {
   label: 'My label',
-  modelValue: [{ label: 'optionA', value: 'a' }],
+  modelValue: ['a'],
   options: [
     { label: 'optionA', value: 'a' },
     { label: 'optionB', value: 'b' },
@@ -61,7 +61,7 @@ Disabled.args = {
 export const Opened = Template.bind({});
 Opened.args = {
   label: 'My label',
-  modelValue: [],
+  modelValue: null,
   options: [
     { label: 'optionA', value: 'a' },
     { label: 'optionB', value: 'b' },
@@ -72,7 +72,7 @@ Opened.args = {
 export const WithErrors = Template.bind({});
 WithErrors.args = {
   label: 'My label',
-  modelValue: [],
+  modelValue: null,
   options: [
     { label: 'optionA', value: 'a' },
     { label: 'optionB', value: 'b' },
@@ -83,7 +83,7 @@ WithErrors.args = {
 export const WithIncorrectValue = Template.bind({});
 WithIncorrectValue.args = {
   label: 'My label',
-  modelValue: [{ label: 'optionA', value: 'a' }],
+  modelValue: ['a'],
   options: [
     { label: 'optionB', value: 'b' },
     { label: 'optionC', value: 'c' },

package/src/components/form/BmsMultiSelect.vue

@@ -1,15 +1,16 @@
 <template>
   <RawSelect
     v-bind="$props"
-    :options="displayedOptions"
+    :options="filteredOptions"
     :model-value="modelValue"
     :open="isDatalistOpen"
     @select="onSelect"
+    @click="setFocus"
   >
     <template #input>
       <div class="tags">
         <BmsTag
-          v-for="tag in displayValues"
+          v-for="tag in selectedItems"
           :small="small"
           active
           @dismiss="removeOption(tag.value)"
@@ -31,7 +32,7 @@
       </div>
 
       <span class="icon-container">
-        <template v-if="modelValue.length">
+        <template v-if="modelValue && modelValue?.length">
           <X class="icon icon-clear" @click.stop="clearInput" />
         </template>
         <template v-else>
@@ -65,9 +66,10 @@ import { InputOption } from '@/models';
 import { searchString } from '@/helpers';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import RawSelect from './RawSelect.vue';
+import { onClickOutside } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
-  options: InputOption[];
+  options: InputOption[] | string[];
   placeholder?: string;
 }
 
@@ -86,12 +88,19 @@ const openDatalist = () => (isDatalistOpen.value = true);
 
 const searching = ref('');
 
-const modelValue = defineModel<InputOption[]>('modelValue', {
-  required: true,
+const modelValue = defineModel<string[] | null>('modelValue', { default: [] });
+
+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 = () => {
@@ -100,15 +109,20 @@ const setFocus = () => {
   }
 };
 
-const onSelect = (option: any) => {
-  modelValue.value.push(option);
+const onSelect = (option: InputOption | string) => {
+  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: string) => {
-  modelValue.value = modelValue.value.filter((o) => o.value !== value);
+  modelValue.value = (modelValue.value ?? []).filter((o) => o !== value);
 };
 
 const clearInput = () => {
@@ -116,18 +130,29 @@ const clearInput = () => {
   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<InputOption[]>(() => {
+  if (!modelValue.value) return [];
+
+  const items: InputOption[] = [];
+  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 }) as InputOption)
+    : (props.options as InputOption[]),
 );
 
-const displayValues = computed<InputOption[]>(() =>
-  modelValue.value.filter((o) =>
-    props.options.find((option) => option.value === o.value),
-  ),
+const filteredOptions = computed(() =>
+  optionsLabelValue.value.filter((o) => searchString(o.label, searching.value)),
 );
 </script>
 

package/src/components/layout/BmsStepper.vue

@@ -103,8 +103,6 @@ const onStepClick = (number: number) => {
     display: flex;
     justify-content: center;
     align-items: center;
-    position: sticky;
-    z-index: 2;
     top: 0;
     padding: 2em 0;
 

package/src/showroom/pages/autocomplete.vue

@@ -26,6 +26,7 @@
     v-model="inputText"
   />
 
+  Valeur: {{ select }}
   <BmsSelect
     label="Select"
     @blur="console.log('blur')"
@@ -33,12 +34,20 @@
     :options="optionsLabelValue"
   />
 
+  Valeur: {{ multiSelect }}
   <BmsMultiSelect
     label="Multi-select"
     v-model="multiSelect"
     :options="optionsLabelValue"
   />
   <br />
+  Valeur: {{ multiSelectText }}
+  <BmsMultiSelect
+    label="Multi-select text"
+    v-model="multiSelectText"
+    :options="optionsText"
+  />
+  <br />
   Valeur: {{ autocompleteText }}
   <BmsServerAutocomplete
     label="Autocomplete avec un appel API"
@@ -55,10 +64,11 @@ import { ref } from 'vue';
 import BmsButton from '@/components/button/BmsButton.vue';
 import BmsSelect from '@/components/form/BmsSelect.vue';
 import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
+import BmsServerAutocomplete from '@/components/form/BmsServerAutocomplete.vue';
 
 const select = ref('');
-const multiSelect = ref([]);
-import BmsServerAutocomplete from '@/components/form/BmsServerAutocomplete.vue';
+const multiSelect = ref(null);
+const multiSelectText = ref(null);
 
 const optionsLabelValue = ref(
   range(0, 30).map((i) =>