@ouestfrance/sipa-bms-ui 7.14.1 → 8.0.0

package/src/pages/Form.stories.js

@@ -36,43 +36,43 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-      <BmsContentPageLayout>
-        <template #header>
-          <BmsHeaderTitle title="Le Titre de la page"/>          
-        </template>
-        <template #breadcrumb>
-          <BmsBreadcrumb :breadcrumbs="args.breadcrumb"/>
-        </template>
-        <template #default>
-
-          <BmsForm>
-
-            <template #form>
-              Here the form slot for input
-              <br/>
-              <BmsInputText v-model="args.inputValue"
-                            label="Mon premier champ de formulaire"
-                            helper-text="help me here !"
-                            placeholder="ici votre placeholder"
-              />
-              <BmsAutocomplete v-model="args.selectValue"
-                               label="Mon second champ de formulaire"
-                               placeholder="ici votre placeholder"
-                               helper-text="help me here !"
-                               :options="['option1','option2']"/>
-            </template>
-            <template #actions>
-              <BmsButton :type="'secondary'" >
-                Annuler
-              </BmsButton>
-              <BmsButton :type="'primary'">
-                Modifier
-              </BmsButton>
-            </template>
-          </BmsForm>
-        </template>
-      </BmsContentPageLayout>
-    `,
+    <BmsContentPageLayout>
+      <template #header>
+        <BmsHeaderTitle title="Le Titre de la page" />
+      </template>
+      <template #breadcrumb>
+        <BmsBreadcrumb :breadcrumbs="args.breadcrumb" />
+      </template>
+      <template #default>
+        <BmsForm>
+          <template #form_1>
+            Here the form slot for input
+            <br />
+            <BmsInputText v-model="args.inputValue"
+                          label="Mon premier champ de formulaire"
+                          helper-text="help me here !"
+                          placeholder="ici votre placeholder"
+            />
+          </template>
+          <template #form_2>
+            <BmsAutocomplete v-model="args.selectValue"
+                             label="Mon second champ de formulaire"
+                             placeholder="ici votre placeholder"
+                             helper-text="help me here !"
+                             :options="['option1','option2']" />
+          </template>
+          <template #actions>
+            <BmsButton :type="'secondary'">
+              Annuler
+            </BmsButton>
+            <BmsButton :type="'primary'">
+              Modifier
+            </BmsButton>
+          </template>
+        </BmsForm>
+      </template>
+    </BmsContentPageLayout>
+  `,
 });
 
 export const Default = Template.bind({});

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',
+};

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');