@ouestfrance/sipa-bms-ui 7.14.2 → 8.0.1

package/src/plugins/field/FieldDatalist.vue

@@ -1,5 +1,11 @@
 <template>
-  <ul class="options-list" data-testid="select-options">
+  <ul
+    class="options-list"
+    data-testid="select-options"
+    @keydown.up="keyUp"
+    @keydown.down="keyDown"
+    @keydown.enter="keyEnter"
+  >
     <li
       v-for="(option, index) in options"
       :key="index"
@@ -7,24 +13,96 @@
       :class="{
         selected: index === currentSelectedItemIndex,
       }"
-      @click.prevent="() => $emits('select', option.value)"
+      @click.prevent="onClick(option)"
     >
       <slot name="option" :option="option">
         {{ option.label === null ? 'N/A' : option.label }}
       </slot>
     </li>
+    <li
+      v-if="displayNewOption"
+      @click.prevent="$emits('addNewOption', newOption)"
+    >
+      <slot name="new-option"> {{ newOption }} (nouvelle option) </slot>
+    </li>
   </ul>
 </template>
 
 <script setup lang="ts">
-interface Props {
-  options: { label: string; value: any }[];
-  currentSelectedItemIndex?: number;
+import { InputOption } from '@/models';
+import { computed, onMounted, ref } from 'vue';
+
+export interface Props {
+  options: InputOption[];
+  isInputFocused: boolean;
+  canAddNewOption?: boolean;
+  newOption?: string;
 }
 
-withDefaults(defineProps<Props>(), { currentSelectedItemIndex: -1 });
+const props = withDefaults(defineProps<Props>(), {
+  canAddNewOption: false,
+  newOption: '',
+});
+
+const currentSelectedItemIndex = ref<number>(-1);
+
+const $emits = defineEmits<{
+  select: [option: any];
+  addNewOption: [option: string];
+}>();
+
+const keyDownEventListener = (ev: KeyboardEvent) => {
+  if (props.isInputFocused) {
+    switch (ev.key) {
+      case 'ArrowDown':
+        return keyDown();
+      case 'ArrowUp':
+        return keyUp();
+      case 'Enter':
+        return keyEnter();
+      default:
+        return;
+    }
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('keydown', keyDownEventListener);
+});
+
+const keyDown = () => {
+  if (currentSelectedItemIndex.value < props.options.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) {
+    $emits('select', props.options[currentSelectedItemIndex.value]);
+    currentSelectedItemIndex.value = -1;
+  }
+};
+
+const onClick = (option: { label: string; value: any }) => {
+  $emits('select', option);
+};
 
-const $emits = defineEmits<{ (e: 'select', option: any): void }>();
+const displayNewOption = computed(
+  () =>
+    props.canAddNewOption &&
+    props.newOption &&
+    !props.options.find((o) => o.value === props.newOption),
+);
 </script>
 
 <style lang="scss" scoped>

package/src/showroom/pages/autocomplete.vue

@@ -4,6 +4,8 @@
     label="Autocomplete avec label/value"
     :options="optionsLabelValue"
     v-model="inputLabelValue"
+    :can-add-new-option="true"
+    @add-new-option="onAddNewOption"
   />
 
   Valeur: {{ inputLabelValue }}
@@ -12,6 +14,7 @@
     label="Autocomplete avec icones"
     :options="optionsIcon"
     v-model="inputValueIcon"
+    @select="(o) => console.log('select', o.value)"
   />
   Valeur: {{ inputValueIcon }}
 
@@ -51,4 +54,8 @@ const optionsIcon = ref(
   ),
 );
 const inputValueIcon = ref('');
+
+const onAddNewOption = (newOption: string) => {
+  optionsLabelValue.value.push({ label: newOption, value: newOption });
+};
 </script>

package/src/showroom/pages/forms.vue

@@ -322,7 +322,7 @@ import BmsIconButton from '@/components/button/BmsIconButton.vue';
 
 const { success } = useNotifications();
 const text = ref('');
-const selected = ref('');
+const selected = ref('value1');
 const selected2 = ref('');
 const files: Ref<File[]> = ref([]);
 const selectedRadio = ref('titi');