@ouestfrance/sipa-bms-ui 8.5.4 → 8.7.0

package/src/components/form/BmsMultiSelect.vue

@@ -1,9 +1,10 @@
 <template>
-  <BmsSelect
-    v-model:open="open"
+  <RawSelect
     v-bind="$props"
+    :options="displayedOptions"
     :model-value="modelValue"
-    @update:model-value="onSelect"
+    :open="isDatalistOpen"
+    @select="onSelect"
   >
     <template #input>
       <div class="tags">
@@ -16,12 +17,35 @@
           <component v-if="tag?.icon" :is="tag.icon" />
           {{ tag.label }}
         </BmsTag>
-        <input type="text" v-model="searching" class="search" />
+        <input
+          type="text"
+          ref="inputElement"
+          v-model="searching"
+          class="search"
+          @focus="openDatalist"
+          @click="openDatalist"
+          @keyup.down="openDatalist"
+          @input="openDatalist"
+          @keyup.backspace="onBackspace"
+        />
       </div>
 
       <span class="icon-container">
-        <ChevronDown class="icon-button" v-if="modelValue.length === 0" />
-        <X v-else class="icon-button" @click="reset" />
+        <template v-if="modelValue.length">
+          <X class="icon icon-clear" @click.stop="clearInput" />
+        </template>
+        <template v-else>
+          <ChevronUp
+            v-if="isDatalistOpen"
+            class="icon icon-toggle-button"
+            @click="closeDatalist"
+          />
+          <ChevronDown
+            v-else
+            class="icon icon-toggle-button"
+            @click="openDatalist"
+          />
+        </template>
       </span>
     </template>
     <template #option="{ option }: { option: InputOption }">
@@ -30,18 +54,18 @@
         {{ option.label }}
       </BmsTag>
     </template>
-  </BmsSelect>
+  </RawSelect>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import { ChevronDown, X } from 'lucide-vue-next';
-import BmsSelect from './BmsSelect.vue';
+import { computed, ref, useTemplateRef } from 'vue';
+import { ChevronDown, ChevronUp, X } from 'lucide-vue-next';
 import BmsTag from './BmsTag.vue';
-import { Caption, InputOption } from '@/models';
+import { InputOption } from '@/models';
 import _ from 'lodash';
 import { searchString } from '@/helpers';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
+import RawSelect from './RawSelect.vue';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[];
@@ -53,34 +77,47 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   required: false,
 });
+const inputElement = useTemplateRef('inputElement');
+
+const isDatalistOpen = ref(false);
+
+const closeDatalist = () => (isDatalistOpen.value = false);
+const openDatalist = () => (isDatalistOpen.value = true);
 
 const searching = ref('');
 
 const modelValue = defineModel<InputOption[]>('modelValue', {
   required: true,
 });
-const open = defineModel<boolean>('open', { default: false });
 
-const onSelect = (value: string) => {
-  const option = props.options.find((o) => o.value === value);
-  if (option) {
-    modelValue.value.push(option);
-    searching.value = '';
+const onBackspace = () => {
+  modelValue.value.splice(-1);
+};
+
+const setFocus = () => {
+  if (inputElement.value) {
+    (inputElement.value as any).focus();
   }
 };
 
+const onSelect = (option: any) => {
+  modelValue.value.push(option);
+  searching.value = '';
+  setFocus();
+  closeDatalist();
+};
+
 const removeOption = (value: string) => {
   modelValue.value = modelValue.value.filter((o) => o.value !== value);
 };
 
-const reset = () => {
+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),
@@ -109,20 +146,20 @@ const displayValues = computed<InputOption[]>(() =>
     flex-grow: 1;
   }
 }
-.icon {
-  &-container {
-    height: 100%;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      cursor: pointer;
-    }
+.icon-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    cursor: pointer;
   }
-  &-button {
+
+  .icon {
+    display: block;
     width: 1em;
+    height: 1em;
     margin: 0 1em 0 0.5em;
-    display: block;
   }
 }
 </style>

package/src/components/form/BmsSelect.vue

@@ -1,49 +1,50 @@
 <template>
-  <field v-bind="$props">
-    <span class="select-wrapper" ref="selectWrapper" :class="classes">
-      <slot name="input">
-        <input
-          ref="selectInput"
-          type="text"
-          role="input"
-          :value="displayValue"
-          :placeholder="placeholder"
-          onkeypress="return false;"
-          :required="required"
+  <RawSelect
+    v-bind="$props"
+    :open="isDatalistOpen"
+    @select="onSelect"
+    @click="setFocus"
+  >
+    <template #input>
+      <input
+        ref="inputElement"
+        type="text"
+        role="input"
+        readonly
+        :value="displayValue"
+        :placeholder="placeholder"
+        :required="required"
+        @focus="openDatalist"
+        @click="openDatalist"
+        @keyup.down="openDatalist"
+      />
+      <span class="icon-toggle-container">
+        <ChevronUp
+          v-if="isDatalistOpen"
+          class="icon-toggle-button"
+          @click="closeDatalist"
         />
-        <span class="icon-down-container">
-          <ChevronDown class="icon-down-button" />
-        </span>
-      </slot>
-    </span>
-    <template #datalist>
-      <FieldDatalist
-        v-show="open"
-        :options="options"
-        :is-input-focused="open"
-        :small="small"
-        @select="(option: any) => selectItem(option)"
-      >
-        <template #option="{ option }: { option: any }">
-          <slot name="option" :option="option"></slot>
-        </template>
-      </FieldDatalist>
+        <ChevronDown v-else class="icon-toggle-button" @click="openDatalist" />
+      </span>
     </template>
-  </field>
+  </RawSelect>
 </template>
 
 <script lang="ts" setup>
-import { ChevronDown } from 'lucide-vue-next';
-import { Ref, computed, onMounted, ref, watch } from 'vue';
+import { ChevronDown, ChevronUp } from 'lucide-vue-next';
+import { computed, Ref, ref, useTemplateRef } from 'vue';
 import _ from 'lodash';
-import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
 import { InputOption } from '@/models';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
+import RawSelect from './RawSelect.vue';
+import { onClickOutside } from '@vueuse/core';
+import { v4 as uuid } from 'uuid';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[];
   optional?: boolean;
   placeholder?: string;
+  open?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -51,26 +52,28 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   required: false,
   small: false,
+  open: false,
 });
+
 const modelValue = defineModel<any>('modelValue', { required: true });
-const open = defineModel<boolean>('open', { default: false });
+const inputElement = useTemplateRef('inputElement');
 
-const selectInput: Ref<HTMLElement | null> = ref(null);
-const selectWrapper: Ref<HTMLElement | null> = ref(null);
+const isDatalistOpen = ref(props.open);
 
-const classes = computed(() => {
-  return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
-});
+const closeDatalist = () => {
+  isDatalistOpen.value = false;
+};
+const openDatalist = () => {
+  isDatalistOpen.value = true;
+  setFocus();
+};
 
-onMounted(() => {
-  document.body.addEventListener('click', (ev) => {
-    if ((ev.target as any).closest('.select-wrapper') === selectWrapper.value) {
-      open.value = !open.value;
-      ev.stopPropagation();
-    } else {
-      open.value = false;
-    }
-  });
+const emits = defineEmits<{
+  select: [value: any];
+}>();
+
+onClickOutside(inputElement, () => closeDatalist, {
+  ignore: ['.datalist-option', '.icon-toggle-button'],
 });
 
 const displayValue = computed(() => {
@@ -81,19 +84,19 @@ const displayValue = computed(() => {
   return '';
 });
 
-const selectItem = (option: any) => {
-  modelValue.value = option.value;
-  setFocus();
-  open.value = false;
-};
-
 const setFocus = () => {
-  open.value = true;
-  if (selectInput.value) {
-    selectInput.value.focus();
+  if (inputElement.value) {
+    (inputElement.value as any).focus();
   }
 };
 
+const onSelect = (option: any) => {
+  modelValue.value = option.value;
+  emits('select', option.value);
+  setFocus();
+  closeDatalist();
+};
+
 defineExpose({
   setFocus,
 });
@@ -117,7 +120,7 @@ defineExpose({
     align-items: center;
     justify-content: space-between;
 
-    .icon-down {
+    .icon-toggle {
       &-container {
         height: 100%;
         display: flex;

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

@@ -40,14 +40,6 @@ describe('RawAutocomplete', () => {
     expect(wrapper.text()).toContain('tutu');
   });
 
-  it('should show options on click', async () => {
-    const { wrapper, inputElement, menu } = factory();
-
-    expect(menu.isVisible()).toBeFalsy();
-    await inputElement.trigger('input');
-    expect(menu.isVisible()).toBeTruthy();
-  });
-
   it('should load with default value', async () => {
     const { inputElement } = factory({ modelValue: 'i' } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');

package/src/components/form/RawAutocomplete.vue

@@ -1,7 +1,7 @@
 <template>
   <field v-bind="$props">
     <RawInputText
-      ref="autocompleteInput"
+      ref="rawInput"
       v-model="inputText"
       :type="InputType.TEXT"
       :disabled="disabled"
@@ -10,33 +10,37 @@
       :required="required"
       :small="small"
       @input="onInput"
+      @focus="onFocus"
     >
       <template #icon-start>
         <slot name="icon-start"></slot>
       </template>
       <template #icon-end>
         <slot name="icon-end">
-          <span v-if="inputText.length" class="icon" @click="clearInput">
-            <X />
-          </span>
-          <span v-else class="icon" @click.stop="toggleList">
-            <ChevronDown v-if="!showDataList" />
-            <ChevronUp v-else />
-          </span>
+          <X v-if="inputText.length" class="icon" @click.stop="clearInput" />
+          <template v-else>
+            <ChevronUp
+              v-if="isDatalistOpen"
+              class="icon"
+              @click="closeDatalist"
+            />
+            <ChevronDown v-else class="icon" @click="openDatalist" />
+          </template>
         </slot>
       </template>
     </RawInputText>
     <template #datalist>
       <FieldDatalist
-        v-show="showDataList"
+        v-show="isDatalistOpen"
         data-testid="autocomplete-menu"
-        :is-input-focused="showDataList"
+        :is-input-focused="isDatalistOpen"
         :can-add-new-option="canAddNewOption"
         :new-option="inputText"
         :options="filteredMenuItems"
         :small="small"
         @select="selectItem"
         @add-new-option="(option: string) => emits('addNewOption', option)"
+        @blur="closeDatalist"
       >
         <template #option="{ option }: { option: any }">
           <slot name="option" :option="option">{{ option }}</slot>
@@ -49,11 +53,12 @@
 <script setup lang="ts">
 import { searchString } from '@/helpers/string.helper';
 import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
-import { computed, ref, Ref, watch } from 'vue';
+import { computed, ref, useTemplateRef, watch } from 'vue';
 import RawInputText from '@/components/form/RawInputText.vue';
 import { InputOption, InputType } from '@/models';
 import { ChevronDown, ChevronUp, X } from 'lucide-vue-next';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
+import { MaybeElementRef, onClickOutside } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[];
@@ -71,6 +76,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const modelValue = defineModel<string | null>('modelValue', { required: true });
 
+const rawInput = useTemplateRef('rawInput');
+
 const emits = defineEmits<{
   addNewOption: [newOption: string];
   select: [option: InputOption];
@@ -85,8 +92,14 @@ const getValidOptionByValue = (value: string | null) =>
 const inputText = ref<string>(
   getValidOptionByValue(modelValue.value)?.label ?? '',
 );
-const showDataList = ref<boolean>(props.open);
-const autocompleteInput: Ref<HTMLElement | null> = ref(null);
+const isDatalistOpen = ref(props.open);
+
+const closeDatalist = () => (isDatalistOpen.value = false);
+const openDatalist = () => (isDatalistOpen.value = true);
+
+onClickOutside(rawInput as MaybeElementRef, closeDatalist, {
+  ignore: ['.datalist-option', '.icon-toggle-button', '.icon-clear'],
+});
 
 const classes = computed(() => {
   return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
@@ -97,12 +110,14 @@ const filteredMenuItems = computed(() =>
 );
 
 const selectItem = (option: InputOption) => {
-  emits('select', option);
   const existingOption =
     getValidOptionByLabel(option.label) || getValidOptionByValue(option.value);
-  modelValue.value = existingOption?.value ?? null;
-  showDataList.value = false;
-  setFocus();
+  if (existingOption) {
+    modelValue.value = existingOption?.value ?? null;
+    emits('select', existingOption);
+    setFocus();
+    closeDatalist();
+  }
 };
 
 const displayItem = (option: InputOption) => {
@@ -131,16 +146,21 @@ watch(
     }
   },
 );
+
+const onFocus = () => {
+  openDatalist();
+};
+
 const onInput = () => {
-  showDataList.value = true;
+  openDatalist();
   if (inputText.value === '') {
     clearInput();
   }
 };
 
 const setFocus = () => {
-  if (autocompleteInput.value) {
-    (autocompleteInput.value as any).setFocus();
+  if (rawInput.value) {
+    (rawInput.value as any).setFocus();
   }
 };
 
@@ -148,11 +168,9 @@ const clearInput = () => {
   inputText.value = '';
   modelValue.value = null;
   setFocus();
+  closeDatalist();
 };
-const toggleList = () => {
-  showDataList.value = !showDataList.value;
-  setFocus();
-};
+
 defineExpose({
   setFocus,
 });

package/src/components/form/RawInputText.vue

@@ -14,11 +14,13 @@
       :placeholder="placeholder"
       :required="required"
       :disabled="disabled"
+      :max="max"
+      :min="min"
+      :minlength="minlength"
+      :maxlength="maxlength"
       @blur="$emits('blur')"
       @input="onInput"
-      @keydown.up="$emits('keyUp')"
-      @keydown.down="$emits('keyDown')"
-      @keydown.enter="$emits('keyEnter')"
+      @focus="$emits('focus')"
     />
     <span class="field__input-icon field__input-icon--end">
       <slot name="icon-end"></slot>
@@ -27,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, Ref, ref } from 'vue';
+import { computed, Ref, ref } from 'vue';
 import { InputType } from '@/models';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
@@ -35,6 +37,10 @@ export interface Props extends FieldComponentProps {
   modelValue: string | number;
   placeholder?: string;
   focus?: boolean;
+  min?: number;
+  max?: number;
+  minlength?: number;
+  maxlength?: number;
   type?:
     | InputType.TEXT
     | InputType.NUMBER
@@ -51,28 +57,15 @@ const props = withDefaults(defineProps<Props>(), {
 const input: Ref<HTMLElement | null> = ref(null);
 
 const $emits = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
-  (e: 'update:focus', value: boolean): void;
-  (e: 'blur'): void;
-  (e: 'keyUp'): void;
-  (e: 'keyDown'): void;
-  (e: 'keyEnter'): void;
+  'update:modelValue': [value: string];
+  blur: [];
+  focus: [];
+  click: [];
 }>();
 
-onMounted(() => {
-  document.body.addEventListener('click', (ev) => {
-    if ((ev.target as any) === input.value) {
-      $emits('update:focus', !props.focus);
-      ev.stopPropagation();
-    } else {
-      $emits('update:focus', false);
-    }
-  });
-});
 const setFocus = () => {
   if (input.value) {
     input.value.focus();
-    $emits('update:focus', true);
   }
 };
 

package/src/components/form/RawSelect.vue

@@ -0,0 +1,111 @@
+<template>
+  <field v-bind="$props">
+    <span class="select-wrapper" :class="classes">
+      <slot name="input"> </slot>
+    </span>
+    <template #datalist>
+      <FieldDatalist
+        v-show="open"
+        :options="options"
+        :is-input-focused="open"
+        :small="small"
+        @select="selectItem"
+      >
+        <template #option="{ option }: { option: any }">
+          <slot name="option" :option="option"></slot>
+        </template>
+      </FieldDatalist>
+    </template>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
+import { InputOption } from '@/models';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
+
+export interface Props extends FieldComponentProps {
+  options: InputOption[];
+  optional?: boolean;
+  placeholder?: string;
+  open?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  disabled: false,
+  required: false,
+  small: false,
+  open: false,
+});
+
+const emits = defineEmits<{
+  select: [selectedItem: any];
+}>();
+
+const classes = computed(() => {
+  return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
+});
+
+const selectItem = (option: any) => {
+  emits('select', option);
+};
+</script>
+
+<style lang="scss" scoped>
+.field__input {
+  --field-border-color: var(--bms-grey-50);
+  --field-border-color-active: var(--bms-main-100);
+  --input-background-color: var(--bms-white);
+
+  .select-wrapper {
+    width: 100%;
+    padding: 0 0 0 1em;
+    border-radius: var(--bms-border-radius);
+    border: 1px solid var(--field-border-color);
+    background-color: var(--input-background-color);
+    min-height: var(--field-height);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .icon-down {
+      &-container {
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+      &-button {
+        width: 1em;
+        margin: 0 var(--field-padding);
+        display: block;
+      }
+    }
+
+    &:hover {
+      --field-border-color: var(--bms-grey-100);
+    }
+
+    &:has(input:focus) {
+      --field-border-color: var(--field-border-color-active);
+    }
+
+    &.is-error {
+      --field-border-color: var(--bms-red-100);
+      --input-background-color: var(--bms-red-25);
+    }
+
+    &.is-disabled {
+      --field-border-color: var(--bms-grey-25);
+      --input-background-color: var(--bms-grey-25);
+      pointer-events: none;
+    }
+  }
+}
+</style>