@ouestfrance/sipa-bms-ui 8.6.0 → 8.7.0

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>

package/src/components/table/BmsServerTable.vue

@@ -4,7 +4,10 @@ import BmsPagination from '@/components/table/BmsPagination.vue';
 import UiBmsTable from '@/components/table/UiBmsTable.vue';
 import UiFilterButton from '@/components/table/UiFilterButton.vue';
 import { usePagination } from '@/composables/pagination.composable';
-import { useSearch } from '@/composables/search.composable';
+import {
+  reflectFiltersToPath,
+  useSearch,
+} from '@/composables/search.composable';
 import { useSort } from '@/composables/sort.composable';
 import {
   Filter,
@@ -151,12 +154,15 @@ const {
   isSavedFilterActive,
   resetFilters,
   selectSavedFilter,
+  updateFiltersFromProps,
 } = useSearch(props.persistent, props.filters, props.defaultFiltersOpened);
 
 const emits = defineEmits<{
   deleteSavedFilter: [value: SavedFilter];
   saveFilter: [value: SavedFilter];
   'update:selectMode': [selectMode: SelectMode];
+  filterInput: [{ filterKey: string; value: any; e: InputEvent }];
+  filterChange: [{ filterKey: string; value: any }];
 }>();
 
 const loading = ref<boolean>(false);
@@ -196,6 +202,14 @@ watch([currentPage, isMounting], () => {
     fetchData();
   }
 });
+watch(
+  () => props.filters,
+  () => {
+    updateFiltersFromProps(props.filters);
+    reflectFiltersToPath(filters.value);
+  },
+  { deep: true },
+);
 
 watch(
   [() => filters.value, () => sort.value, size, search],
@@ -324,8 +338,9 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
             :canSaveFilters="canSaveFilters"
             @saveFilter="onSaveFilter"
             @resetFilters="resetFilters"
-          >
-          </BmsTableFilters>
+            @filterInput="(filterEvent) => emits('filterInput', filterEvent)"
+            @filterChange="(filterEvent) => emits('filterChange', filterEvent)"
+          />
         </div>
       </Transition>
     </template>

package/src/components/table/BmsTable.vue

@@ -85,11 +85,14 @@ const {
   resetFilters,
   selectSavedFilter,
   resetAllFilters,
+  updateFiltersFromProps,
 } = useSearch(props.persistent, props.filters, props.defaultFiltersOpened);
 
 const emits = defineEmits<{
-  (e: 'deleteSavedFilter', value: SavedFilter): void;
-  (e: 'saveFilter', value: SavedFilter): void;
+  deleteSavedFilter: [value: SavedFilter];
+  saveFilter: [value: SavedFilter];
+  filterInput: [{ filterKey: string; value: any; e: InputEvent }];
+  filterChange: [{ filterKey: string; value: any }];
 }>();
 
 const selectedItems: Ref<unknown[]> = defineModel('selectedItems', {
@@ -116,6 +119,14 @@ const getFilteredItems = () => {
 
 const isMounting = ref(true);
 
+watch(
+  () => props.filters,
+  () => {
+    updateFiltersFromProps(props.filters);
+  },
+  { deep: true },
+);
+
 watchEffect(
   async () => {
     isMounting.value =
@@ -237,6 +248,8 @@ const onSelectAll = () => {
             :canSaveFilters="canSaveFilters"
             @saveFilter="onSaveFilter"
             @reset-filters="resetFilters"
+            @filterInput="(filterEvent) => emits('filterInput', filterEvent)"
+            @filterChange="(filterEvent) => emits('filterChange', filterEvent)"
           />
         </div>
       </Transition>

package/src/components/table/BmsTableFilters.vue

@@ -51,6 +51,14 @@
           "
           :valueTo="transformValueForComponent(filter?.valueTo, filter.type)"
           :options="getFilterOptions(filter) as any"
+          @input="
+            (e: InputEvent) =>
+              $emits('filterInput', {
+                filterKey: filter.key,
+                value: (e.target as HTMLInputElement).value,
+                e,
+              })
+          "
         />
       </span>
     </div>
@@ -101,9 +109,11 @@ const props = withDefaults(
 );
 
 const $emits = defineEmits<{
-  (e: 'update:modelValue', filters: Filter[]): void;
-  (e: 'saveFilter', value: SavedFilter): void;
-  (e: 'resetFilters'): void;
+  'update:modelValue': [filters: Filter[]];
+  saveFilter: [value: SavedFilter];
+  resetFilters: [];
+  filterInput: [{ filterKey: string; value: any; e: InputEvent }];
+  filterChange: [{ filterKey: string; value: any }];
 }>();
 
 const savedModalOpened: Ref<boolean> = ref<boolean>(false);
@@ -112,10 +122,11 @@ const nameInput: Ref<typeof BmsInputText | null> = ref(null);
 
 const onFilter = (key: string, inputValue: string, valueKey: any): void => {
   let filter = props.modelValue.find((f) => f.key === key);
+  let updatedValue;
   if (filter) {
     switch (filter.type) {
       case 'boolean':
-        filter.value =
+        updatedValue =
           inputValue === 'true' ? true : inputValue === 'false' ? false : null;
         break;
       case 'select':
@@ -123,13 +134,14 @@ const onFilter = (key: string, inputValue: string, valueKey: any): void => {
       case 'betweenDate':
       case 'betweenDateTime':
       case 'betweenNumber':
-        filter[valueKey as keyof Filter] =
-          inputValue === 'null' ? null : inputValue;
+        updatedValue = inputValue === 'null' ? null : inputValue;
         break;
       default:
-        filter.value = inputValue;
+        updatedValue = inputValue;
         break;
     }
+    filter[valueKey as keyof Filter] = updatedValue;
+    $emits('filterChange', { filterKey: key, value: updatedValue });
   }
   $emits('update:modelValue', props.modelValue);
 };