@ouestfrance/sipa-bms-ui 7.14.2 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "7.14.2",
+  "version": "8.0.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -38,29 +38,29 @@
     "@mdx-js/react": "3.1.0",
     "@storybook/addon-actions": "^8.6.14",
     "@storybook/addon-docs": "^9.0.4",
-    "@storybook/addon-links": "9.0.8",
-    "@storybook/vue3-vite": "9.0.8",
-    "@types/lodash": "4.17.17",
+    "@storybook/addon-links": "9.0.11",
+    "@storybook/vue3-vite": "9.0.11",
+    "@types/lodash": "4.17.18",
     "@types/uuid": "10.0.0",
     "@vitejs/plugin-vue": "5.2.4",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "13.3.0",
     "@vueuse/motion": "^3.0.0",
-    "axios": "1.9.0",
+    "axios": "1.10.0",
     "blob-util": "^2.0.2",
     "chromatic": "12.2.0",
     "codemirror": "6.0.1",
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
     "cy2": "4.0.9",
-    "cypress": "14.4.1",
+    "cypress": "14.5.0",
     "express": "^5.0.0",
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "keycloak-js": "26.1.2",
-    "lint-staged": "16.1.0",
+    "lint-staged": "16.1.2",
     "lodash": "4.17.21",
-    "lucide-vue-next": "0.514.0",
+    "lucide-vue-next": "0.516.0",
     "msw-storybook-addon": "^2.0.3",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
@@ -68,8 +68,8 @@
     "sass": "1.89.2",
     "semantic-release": "24.2.5",
     "start-server-and-test": "2.0.12",
-    "storybook": "9.0.8",
-    "storybook-addon-pseudo-states": "9.0.8",
+    "storybook": "9.0.11",
+    "storybook-addon-pseudo-states": "9.0.11",
     "storybook-vue3-router": "^5.0.0",
     "typescript": "5.2.2",
     "uuid": "11.1.0",
@@ -78,7 +78,7 @@
     "vite-plugin-mkcert": "1.17.8",
     "vite-plugin-pages": "0.33.0",
     "vite-svg-loader": "5.1.0",
-    "vitest": "3.2.3",
+    "vitest": "3.2.4",
     "vue": "3.5.16",
     "vue-codemirror": "6.1.1",
     "vue-loader": "17.4.2",

package/src/components/form/BmsAutocomplete.vue

@@ -11,6 +11,9 @@
     :required="required"
     :helperText="helperText"
     :placeholder="placeholder"
+    :can-add-new-option="canAddNewOption"
+    @select="(option: any) => emits('select', option)"
+    @add-new-option="(newOption: string) => emits('addNewOption', newOption)"
   >
     <template #icon-start v-if="currentOptionIcon">
       <span
@@ -36,14 +39,12 @@
 </template>
 
 <script setup lang="ts">
-import { type Component, computed } from 'vue';
+import { computed } from 'vue';
 import RawAutocomplete from './RawAutocomplete.vue';
-import { Caption } from '@/models';
+import { Caption, InputOption } from '@/models';
 
 export interface Props {
-  options:
-    | string[]
-    | { label: string; value: string; icon?: Component | string }[];
+  options: string[] | InputOption[];
   modelValue?: string;
   label?: string;
   required?: boolean;
@@ -54,13 +55,18 @@ export interface Props {
   captions?: string[] | Caption[];
   errors?: string[] | Caption[];
   open?: boolean;
+  canAddNewOption?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   open: false,
 });
 
-const modelValue = defineModel<string>('modelValue');
+const modelValue = defineModel<string>('modelValue', { required: true });
+const emits = defineEmits<{
+  addNewOption: [newOption: string];
+  select: [option: InputOption];
+}>();
 
 const currentOptionIcon = computed(() => {
   const option = props.options.find(
@@ -74,8 +80,8 @@ 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,
+    ? props.options.map((o) => ({ label: o, value: o }) as InputOption)
+    : (props.options as InputOption[]),
 );
 </script>
 

package/src/components/form/BmsSelect.spec.ts

@@ -3,7 +3,11 @@ import BmsSelect, { Props } from './BmsSelect.vue';
 import { field } from '@/plugins/field';
 import { nextTick } from 'vue';
 
-const factory = (props: Props) => {
+interface PropsAndModel extends Props {
+  modelValue: any;
+}
+
+const factory = (props: PropsAndModel) => {
   const wrapper = mount(BmsSelect, { props, global: { plugins: [field] } });
   const inputElement = wrapper.find('input');
   const optionsElement = wrapper.find('ul');
@@ -33,19 +37,6 @@ describe('BmsSelect', () => {
     expect(inputElement.element.value).toStrictEqual('toto-label');
   });
 
-  it('should update when select with keys', async () => {
-    const { inputElement, optionsElement } = factory({
-      modelValue: '',
-      options: [{ label: 'toto-label', value: 'toto' }],
-    });
-
-    expect(inputElement.element.value).toStrictEqual('');
-    await inputElement.trigger('keydown.down');
-    await inputElement.trigger('keydown.enter');
-    await nextTick();
-    expect(inputElement.element.value).toStrictEqual('toto-label');
-  });
-
   it('should not display value if not in options', () => {
     const { inputElement } = factory({
       modelValue: 'toto',

package/src/components/form/BmsSelect.vue

@@ -13,13 +13,10 @@
         ref="selectInput"
         type="text"
         role="input"
-        :value="getDisplayValue"
+        :value="displayValue"
         :placeholder="placeholder"
         onkeypress="return false;"
         :required="required"
-        @keydown.up="keyUp"
-        @keydown.down="keyDown"
-        @keydown.enter="keyEnter"
       />
       <span class="icon-down-container">
         <ChevronDown class="icon-down-button" />
@@ -29,7 +26,7 @@
       <FieldDatalist
         v-show="isInputFocused"
         :options="options"
-        :currentSelectedItemIndex="currentSelectedItemIndex"
+        :is-input-focused="isInputFocused"
         @select="(option: any) => selectItem(option)"
       />
     </template>
@@ -42,10 +39,10 @@ import { Ref, computed, onMounted, ref, watch } from 'vue';
 import _ from 'lodash';
 import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
 import { Caption } from '@/models/caption.model';
+import { InputOption } from '@/models';
 
 export interface Props {
-  modelValue: any;
-  options: { label: string; value: any }[];
+  options: InputOption[];
   label?: string;
   errors?: string[] | Caption[];
   captions?: string[] | Caption[];
@@ -58,17 +55,14 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
   label: '',
   disabled: false,
   required: false,
   open: false,
 });
-const $emits = defineEmits<{ (e: 'update:modelValue', value: any): void }>();
+const modelValue = defineModel<any>('modelValue', { required: true });
 
 const isInputFocused = ref<boolean>(props.open);
-const inputValue = ref<any>(props.modelValue);
-const currentSelectedItemIndex = ref<number>(-1);
 const selectInput: Ref<HTMLElement | null> = ref(null);
 const selectWrapper: Ref<HTMLElement | null> = ref(null);
 
@@ -87,57 +81,19 @@ onMounted(() => {
   });
 });
 
-const getDisplayValue = computed(() => {
+const displayValue = computed(() => {
   const option = props.options.find((o) =>
-    _.isEqual(o.value, inputValue.value),
+    _.isEqual(o.value, modelValue.value),
   );
   if (option) return option.label;
   return '';
 });
 
-watch(inputValue, function emitUpdate(newValue) {
-  $emits('update:modelValue', newValue);
-});
-
-watch(
-  () => props.modelValue,
-  function updateFromProps(newValue) {
-    inputValue.value = newValue;
-  },
-);
-
 const selectItem = (option: any) => {
-  inputValue.value = option;
+  modelValue.value = option.value;
   isInputFocused.value = false;
 };
 
-const keyDown = () => {
-  if (!isInputFocused.value) isInputFocused.value = true;
-  if (currentSelectedItemIndex.value < props.options.length - 1) {
-    currentSelectedItemIndex.value++;
-  } else {
-    currentSelectedItemIndex.value = 0;
-  }
-};
-
-const keyUp = () => {
-  if (!isInputFocused.value) isInputFocused.value = true;
-  if (currentSelectedItemIndex.value > 0) {
-    currentSelectedItemIndex.value--;
-  } else {
-    currentSelectedItemIndex.value = props.options.length - 1;
-  }
-};
-
-const keyEnter = () => {
-  if (currentSelectedItemIndex.value >= 0) {
-    selectItem(props.options[currentSelectedItemIndex.value].value);
-    currentSelectedItemIndex.value = -1;
-  } else {
-    isInputFocused.value = false;
-  }
-};
-
 const setFocus = () => {
   isInputFocused.value = true;
   if (selectInput.value) {

package/src/components/form/RawAutocomplete.spec.ts

@@ -5,7 +5,11 @@ import { mount } from '@vue/test-utils';
 import { field } from '@/plugins/field';
 import { nextTick } from 'vue';
 
-const factory = (props?: Props) => {
+interface PropsAndModel extends Props {
+  modelValue: any;
+}
+
+const factory = (props?: PropsAndModel) => {
   const wrapper = mount(RawAutocomplete, {
     global: {
       plugins: [field],
@@ -45,12 +49,14 @@ describe('BmsAutocomplete', () => {
   });
 
   it('should load with default value', async () => {
-    const { inputElement } = factory({ modelValue: 'i' } as Props);
+    const { inputElement } = factory({ modelValue: 'i' } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');
   });
 
   it('should change input value if parent modelvalue change', async () => {
-    const { wrapper, inputElement } = factory({ modelValue: 'i' } as Props);
+    const { wrapper, inputElement } = factory({
+      modelValue: 'i',
+    } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');
     wrapper.setProps({ modelValue: 'u' });
     await nextTick();
@@ -58,7 +64,9 @@ describe('BmsAutocomplete', () => {
   });
 
   it('should reset input value if parent modelvalue change for unknown value', async () => {
-    const { wrapper, inputElement } = factory({ modelValue: 'i' } as Props);
+    const { wrapper, inputElement } = factory({
+      modelValue: 'i',
+    } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');
     wrapper.setProps({ modelValue: 'not_found' });
     await nextTick();
@@ -66,29 +74,24 @@ describe('BmsAutocomplete', () => {
   });
 
   it('should not reset input value if parent modelvalue change for nullable value', async () => {
-    const { wrapper, inputElement } = factory({ modelValue: 'i' } as Props);
+    const { wrapper, inputElement } = factory({
+      modelValue: 'i',
+    } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');
     wrapper.setProps({ modelValue: undefined });
     await nextTick();
     expect(inputElement.element.value).toStrictEqual('titi');
   });
 
-  it('should populate input on option selection', async () => {
+  it('should emit event on option selection', async () => {
     const { wrapper, inputElement } = factory();
     const titi = wrapper.get('[data-testid="i"]');
     expect(inputElement.element.value).toStrictEqual('');
     await titi.trigger('click');
-    expect(inputElement.element.value).toStrictEqual('titi');
-  });
-
-  it('should be able to select with keyboard', async () => {
-    const { wrapper, inputElement } = factory();
-    const titi = wrapper.get('[data-testid="i"]');
-
-    expect(titi.classes()).toStrictEqual([]);
-    await inputElement.trigger('focus');
-    await inputElement.trigger('keydown.down');
-    expect(titi.classes()).toStrictEqual(['selected']);
+    expect(wrapper.emitted()['select']).toHaveLength(1);
+    expect(wrapper.emitted()['select'][0]).toStrictEqual([
+      { value: 'i', label: 'titi' },
+    ]);
   });
 
   it('should filter options', async () => {

package/src/components/form/RawAutocomplete.vue

@@ -13,9 +13,6 @@
       v-model="inputText"
       :type="InputType.TEXT"
       :disabled="disabled"
-      @keyDown="keyDown"
-      @keyUp="keyUp"
-      @keyEnter="keyEnter"
       :class="classes"
       :placeholder="placeholder"
       :required="required"
@@ -26,18 +23,31 @@
         <slot name="icon-start"></slot>
       </template>
       <template #icon-end>
-        <slot name="icon-end"></slot>
+        <slot name="icon-end">
+          <span v-if="inputText.length" class="icon" @click="clearInput">
+            <X />
+          </span>
+          <span
+            v-else
+            class="icon"
+            @click.stop="isInputFocused = !isInputFocused"
+          >
+            <ChevronDown v-if="!isInputFocused" />
+            <ChevronUp v-else />
+          </span>
+        </slot>
       </template>
     </RawInputText>
     <template #datalist>
       <FieldDatalist
-        data-testid="autocomplete-menu"
         v-show="isInputFocused"
+        data-testid="autocomplete-menu"
+        :is-input-focused="isInputFocused"
+        :can-add-new-option="canAddNewOption"
+        :new-option="inputText"
         :options="filteredMenuItems"
-        :currentSelectedItemIndex="currentSelectedItemIndex"
-        @select="
-          (optionValue: string) => selectItem({ value: optionValue, label: '' })
-        "
+        @select="selectItem"
+        @add-new-option="(option: string) => emits('addNewOption', option)"
       >
         <template #option="{ option }: { option: any }">
           <slot name="option" :option="option">{{ option }}</slot>
@@ -53,11 +63,11 @@ import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
 import { computed, ref, Ref, watch } from 'vue';
 import { Caption } from '@/models/caption.model';
 import RawInputText from '@/components/form/RawInputText.vue';
-import { InputType } from '@/models';
+import { InputOption, InputType } from '@/models';
+import { ChevronDown, ChevronUp, X } from 'lucide-vue-next';
 
 export interface Props {
-  options: any[];
-  modelValue?: string | null;
+  options: InputOption[];
   label?: string;
   required?: boolean;
   optional?: boolean;
@@ -67,6 +77,9 @@ export interface Props {
   captions?: string[] | Caption[];
   errors?: string[] | Caption[];
   open?: boolean;
+
+  canAddNewOption?: boolean;
+  newOption?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -74,8 +87,11 @@ const props = withDefaults(defineProps<Props>(), {
   open: false,
 });
 
+const modelValue = defineModel<string | null>('modelValue', { required: true });
+
 const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | null): void;
+  addNewOption: [newOption: string];
+  select: [option: InputOption];
 }>();
 
 const getValidOptionByLabel = (label: string) =>
@@ -85,10 +101,9 @@ const getValidOptionByValue = (value: string | null) =>
   props.options.find((o) => o.value === value);
 
 const inputText = ref<string>(
-  getValidOptionByValue(props.modelValue)?.label ?? '',
+  getValidOptionByValue(modelValue.value)?.label ?? '',
 );
 const isInputFocused = ref<boolean>(props.open);
-const currentSelectedItemIndex = ref<number>(-1);
 const autocompleteInput: Ref<HTMLElement | null> = ref(null);
 
 const classes = computed(() => {
@@ -99,64 +114,42 @@ const filteredMenuItems = computed(() =>
   props.options.filter((o) => searchString(o.label, inputText.value)),
 );
 
-const selectItem = (option: { label: string; value: string | null }) => {
+const selectItem = (option: InputOption) => {
+  emits('select', option);
   const existingOption =
     getValidOptionByLabel(option.label) || getValidOptionByValue(option.value);
+  modelValue.value = existingOption?.value ?? null;
+  isInputFocused.value = false;
+};
+
+const displayItem = (option: InputOption) => {
+  const existingOption =
+    getValidOptionByLabel(option.label) || getValidOptionByValue(option.value);
+
   if (existingOption) {
     inputText.value = existingOption.label;
+    modelValue.value = existingOption.value;
   } else {
+    modelValue.value = null;
     inputText.value = option.label;
   }
-  isInputFocused.value = false;
 };
 
-watch(inputText, function emitUpdate(newLabel) {
-  const option = getValidOptionByLabel(newLabel);
-  if (option) selectItem(option);
-  emits('update:modelValue', option?.value ?? null);
-});
-
 watch(
-  () => props.modelValue,
+  () => modelValue.value,
   function updateFromProps(newValue) {
     const option = getValidOptionByValue(newValue);
     if (option) {
-      selectItem(option);
+      displayItem(option);
+      if (modelValue.value !== option.value) selectItem(option);
       // drop input value only if parent set nullable value
-    } else if (props.modelValue !== undefined && props.modelValue !== null) {
+    } else if (modelValue.value !== undefined && modelValue.value !== null) {
       inputText.value = '';
     }
   },
 );
-
 const onInput = () => {
   isInputFocused.value = true;
-  currentSelectedItemIndex.value = -1;
-};
-
-const keyDown = () => {
-  if (currentSelectedItemIndex.value < filteredMenuItems.value.length - 1) {
-    currentSelectedItemIndex.value++;
-  } else {
-    currentSelectedItemIndex.value = 0;
-  }
-};
-
-const keyUp = () => {
-  if (currentSelectedItemIndex.value > 0) {
-    currentSelectedItemIndex.value--;
-  } else {
-    currentSelectedItemIndex.value = props.options.length - 1;
-  }
-};
-
-const keyEnter = () => {
-  if (currentSelectedItemIndex.value >= 0) {
-    selectItem(filteredMenuItems.value[currentSelectedItemIndex.value]);
-    currentSelectedItemIndex.value = -1;
-  } else {
-    isInputFocused.value = false;
-  }
 };
 
 const setFocus = () => {
@@ -164,6 +157,10 @@ const setFocus = () => {
     autocompleteInput.value.focus();
   }
 };
+const clearInput = () => {
+  inputText.value = '';
+  modelValue.value = null;
+};
 
 defineExpose({
   setFocus,
@@ -215,4 +212,10 @@ defineExpose({
     }
   }
 }
+.icon {
+  height: 1em;
+  width: 1em;
+
+  cursor: pointer;
+}
 </style>

package/src/components/table/BmsTableFilters.vue

@@ -76,7 +76,7 @@
 
 <script setup lang="ts">
 import { Filter as FilterIcon, RefreshCcw, Save } from 'lucide-vue-next';
-import { Filter, FilterType, SavedFilter } from '@/models';
+import { Filter, FilterType, InputOption, SavedFilter } from '@/models';
 import BmsSelect from '../form/BmsSelect.vue';
 import BmsAutocomplete from '../form/BmsAutocomplete.vue';
 import { useRoute } from 'vue-router';
@@ -155,7 +155,7 @@ const getFilterComponent = (type: FilterType) => {
 
 const getFilterOptions = (
   filter: Filter,
-): undefined | { label: string; value: string }[] | string[] => {
+): undefined | InputOption[] | string[] => {
   switch (filter.type) {
     case 'boolean':
       return [

package/src/models/form.model.ts

@@ -1,4 +1,5 @@
 import { Caption } from '@/models/caption.model';
+import { Component } from 'vue';
 
 export interface BmsInputRadioGroupOption {
   value: any;
@@ -28,3 +29,9 @@ export enum InputType {
   DATE = 'date',
   DATETIME = 'datetime-local',
 }
+
+export interface InputOption {
+  label: string;
+  value: any;
+  icon?: Component;
+}

package/src/plugins/field/FieldDatalist.spec.ts

@@ -0,0 +1,35 @@
+import FieldDatalist, { type Props } from '@/plugins/field/FieldDatalist.vue';
+import { mount } from '@vue/test-utils';
+import { field } from '@/plugins/field';
+
+const factory = (props?: Props) => {
+  const wrapper = mount(FieldDatalist, {
+    global: {
+      plugins: [field],
+    },
+    props: {
+      isInputFocused: false,
+      options: [
+        { label: 'titi', value: 'i' },
+        { label: 'toto', value: 'o' },
+        { label: 'tutu', value: 'u' },
+      ],
+      modelValue: '',
+      ...props,
+    },
+    attachTo: document.body,
+  });
+
+  return { wrapper };
+};
+
+describe('FieldDatalist', () => {
+  it('should be able to select with keyboard', async () => {
+    const { wrapper } = factory();
+    const titi = wrapper.get('[data-testid="i"]');
+
+    expect(titi.classes()).toStrictEqual([]);
+    await wrapper.trigger('keydown.down');
+    expect(titi.classes()).toStrictEqual(['selected']);
+  });
+});

package/src/plugins/field/FieldDatalist.stories.js

@@ -33,3 +33,13 @@ WithSelectedItem.args = {
     value: i,
   })),
 };
+
+export const CanAddNewOption = Template.bind({});
+CanAddNewOption.args = {
+  options: ['toto', 'titi', 'tutu', 'tirlitititututatoooo'].map((i) => ({
+    label: i,
+    value: i,
+  })),
+  canAddNewOption: true,
+  newOption: 'manual input',
+};