@ouestfrance/sipa-bms-ui 8.8.1 → 8.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.8.1",
+  "version": "8.9.1",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

package/src/components/form/BmsMultiSelect.stories.js

@@ -30,7 +30,7 @@ export const Default = Template.bind({});
 Default.args = {
   label: 'My label',
   captions: ['Helping text'],
-  modelValue: [],
+  modelValue: null,
   options: [
     { label: 'optionA', value: 'a' },
     { label: 'optionB', value: 'b' },
@@ -40,7 +40,7 @@ Default.args = {
 export const WithValue = Template.bind({});
 WithValue.args = {
   label: 'My label',
-  modelValue: [{ label: 'optionA', value: 'a' }],
+  modelValue: ['a'],
   options: [
     { label: 'optionA', value: 'a' },
     { label: 'optionB', value: 'b' },
@@ -50,7 +50,7 @@ WithValue.args = {
 export const Disabled = Template.bind({});
 Disabled.args = {
   label: 'My label',
-  modelValue: [{ label: 'optionA', value: 'a' }],
+  modelValue: ['a'],
   options: [
     { label: 'optionA', value: 'a' },
     { label: 'optionB', value: 'b' },
@@ -61,7 +61,7 @@ Disabled.args = {
 export const Opened = Template.bind({});
 Opened.args = {
   label: 'My label',
-  modelValue: [],
+  modelValue: null,
   options: [
     { label: 'optionA', value: 'a' },
     { label: 'optionB', value: 'b' },
@@ -72,7 +72,7 @@ Opened.args = {
 export const WithErrors = Template.bind({});
 WithErrors.args = {
   label: 'My label',
-  modelValue: [],
+  modelValue: null,
   options: [
     { label: 'optionA', value: 'a' },
     { label: 'optionB', value: 'b' },
@@ -83,7 +83,7 @@ WithErrors.args = {
 export const WithIncorrectValue = Template.bind({});
 WithIncorrectValue.args = {
   label: 'My label',
-  modelValue: [{ label: 'optionA', value: 'a' }],
+  modelValue: ['a'],
   options: [
     { label: 'optionB', value: 'b' },
     { label: 'optionC', value: 'c' },

package/src/components/form/BmsMultiSelect.vue

@@ -1,15 +1,16 @@
 <template>
   <RawSelect
     v-bind="$props"
-    :options="displayedOptions"
+    :options="filteredOptions"
     :model-value="modelValue"
     :open="isDatalistOpen"
     @select="onSelect"
+    @click="setFocus"
   >
     <template #input>
       <div class="tags">
         <BmsTag
-          v-for="tag in displayValues"
+          v-for="tag in selectedItems"
           :small="small"
           active
           @dismiss="removeOption(tag.value)"
@@ -31,7 +32,7 @@
       </div>
 
       <span class="icon-container">
-        <template v-if="modelValue.length">
+        <template v-if="modelValue && modelValue?.length">
           <X class="icon icon-clear" @click.stop="clearInput" />
         </template>
         <template v-else>
@@ -58,17 +59,17 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, useTemplateRef } from 'vue';
+import { computed, Ref, ref } from 'vue';
 import { ChevronDown, ChevronUp, X } from 'lucide-vue-next';
 import BmsTag from './BmsTag.vue';
 import { InputOption } from '@/models';
-import _ from 'lodash';
 import { searchString } from '@/helpers';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import RawSelect from './RawSelect.vue';
+import { onClickOutside } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
-  options: InputOption[];
+  options: InputOption[] | string[];
   placeholder?: string;
 }
 
@@ -77,7 +78,8 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   required: false,
 });
-const inputElement = useTemplateRef('inputElement');
+
+const inputElement: Ref<HTMLElement | null> = ref(null);
 
 const isDatalistOpen = ref(false);
 
@@ -86,12 +88,19 @@ const openDatalist = () => (isDatalistOpen.value = true);
 
 const searching = ref('');
 
-const modelValue = defineModel<InputOption[]>('modelValue', {
-  required: true,
+const modelValue = defineModel<string[] | null>('modelValue', { default: [] });
+
+onClickOutside(inputElement, closeDatalist, {
+  ignore: ['.datalist-option', '.icon-toggle-button'],
 });
 
 const onBackspace = () => {
-  modelValue.value.splice(-1);
+  if (
+    searching.value.length === 0 &&
+    modelValue.value &&
+    modelValue.value.length > 0
+  )
+    modelValue.value.splice(-1);
 };
 
 const setFocus = () => {
@@ -100,15 +109,20 @@ const setFocus = () => {
   }
 };
 
-const onSelect = (option: any) => {
-  modelValue.value.push(option);
+const onSelect = (option: InputOption | string) => {
+  if (typeof option === 'string') {
+    modelValue.value = (modelValue.value ?? []).concat(option);
+  } else if (option.value) {
+    modelValue.value = (modelValue.value ?? []).concat(option.value);
+  }
+
   searching.value = '';
   setFocus();
   closeDatalist();
 };
 
 const removeOption = (value: string) => {
-  modelValue.value = modelValue.value.filter((o) => o.value !== value);
+  modelValue.value = (modelValue.value ?? []).filter((o) => o !== value);
 };
 
 const clearInput = () => {
@@ -116,18 +130,29 @@ const clearInput = () => {
   searching.value = '';
 };
 
-const displayedOptions = computed(() =>
-  props.options
-    .filter((o) => searchString(o.label, searching.value))
-    .filter(
-      (o) => !modelValue.value.find((option) => option.value === o.value),
-    ),
+const selectedItems = computed<InputOption[]>(() => {
+  if (!modelValue.value) return [];
+
+  const items: InputOption[] = [];
+  modelValue.value.forEach((selectedValue) => {
+    const item = optionsLabelValue.value.find(
+      (option) => option.value === selectedValue,
+    );
+    if (item) items.push(item);
+  });
+  return items;
+});
+
+const optionsLabelValue = computed(() =>
+  Array.isArray(props.options) &&
+  !!props.options.length &&
+  typeof props.options[0] === 'string'
+    ? props.options.map((o) => ({ label: o, value: o }) as InputOption)
+    : (props.options as InputOption[]),
 );
 
-const displayValues = computed<InputOption[]>(() =>
-  modelValue.value.filter((o) =>
-    props.options.find((option) => option.value === o.value),
-  ),
+const filteredOptions = computed(() =>
+  optionsLabelValue.value.filter((o) => searchString(o.label, searching.value)),
 );
 </script>
 

package/src/components/form/BmsSelect.vue

@@ -32,13 +32,12 @@
 
 <script lang="ts" setup>
 import { ChevronDown, ChevronUp } from 'lucide-vue-next';
-import { computed, Ref, ref, useTemplateRef } from 'vue';
+import { computed, Ref, ref } from 'vue';
 import _ from 'lodash';
 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[];
@@ -56,7 +55,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const modelValue = defineModel<any>('modelValue', { required: true });
-const inputElement = useTemplateRef('inputElement');
+
+const inputElement: Ref<HTMLElement | null> = ref(null);
 
 const isDatalistOpen = ref(props.open);
 

package/src/components/form/BmsServerAutocomplete.stories.js

@@ -0,0 +1,74 @@
+import BmsServerAutocomplete from '@/components/form/BmsServerAutocomplete.vue';
+import { http, HttpResponse } from 'msw';
+
+export default {
+  title: 'Composants/form/ServerAutocomplete',
+  component: BmsServerAutocomplete,
+  argTypes: {
+    disableSearch: {
+      control: { type: 'boolean' },
+    },
+    headers: {},
+  },
+};
+
+const mswRequestHandler = () =>
+  http.get('https://fakeapi.com/items', () =>
+    HttpResponse.json([
+      {
+        label: 'Label 1',
+        value: '1',
+      },
+      {
+        label: 'Label 2',
+        value: '2',
+      },
+    ]),
+  );
+
+const Template = (args) => ({
+  components: {
+    BmsServerAutocomplete,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsServerAutocomplete v-bind="args">
+    </BmsServerAutocomplete>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+Default.args = {
+  label: 'My autocomplete field',
+  modelValue: '',
+  url: 'https://fakeapi.com/items',
+};
+
+export const WithRequest = Template.bind({});
+WithRequest.args = {
+  label: 'My autocomplete field',
+  modelValue: '',
+  request: () => {
+    return new Promise((resolve) =>
+      resolve({
+        data: [
+          {
+            label: 'Label 1',
+            value: '1',
+          },
+          {
+            label: 'Label 2',
+            value: '2',
+          },
+        ],
+      }),
+    );
+  },
+};

package/src/components/form/BmsServerAutocomplete.vue

@@ -0,0 +1,143 @@
+<template>
+  <RawAutocomplete
+    v-model="modelValue"
+    :options="options"
+    :open="open"
+    :label="label"
+    :optional="optional"
+    :disabled="disabled"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :helperText="helperText"
+    :placeholder="placeholder"
+    :small="small"
+    :canAddNewOption="false"
+    @input="onInput"
+    @select="(option: any) => emits('select', option)"
+  >
+    <template #icon-start v-if="currentOptionIcon">
+      <span
+        class="icon"
+        v-if="typeof currentOptionIcon === 'string'"
+        v-html="currentOptionIcon"
+      ></span>
+      <component v-else :is="currentOptionIcon" />
+    </template>
+    <template #icon-end>
+      <BmsLoader v-if="loading" :size="16" />
+    </template>
+    <template #option="{ option }: { option: any }">
+      <template v-if="option.icon">
+        <span
+          class="icon datalist-icon"
+          v-if="typeof option.icon === 'string'"
+          v-html="option.icon"
+        ></span>
+
+        <component class="icon datalist-icon" v-else :is="option.icon" />
+      </template>
+      {{ option.label }}
+    </template>
+  </RawAutocomplete>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import RawAutocomplete from './RawAutocomplete.vue';
+import { InputOption } from '@/models';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
+import BmsLoader from '../feedback/BmsLoader.vue';
+
+export interface Props extends FieldComponentProps {
+  url?: string;
+  request?: (
+    abortController: AbortController,
+    inputValue?: string,
+    url?: string,
+  ) => Promise<{ data: InputOption[] }>;
+
+  modelValue?: string;
+  placeholder?: string;
+  open?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  request: async (controller: AbortController, url?: string) => {
+    if (!url) {
+      throw 'URL must be defined';
+    }
+
+    const response = await fetch(url, {
+      method: 'GET',
+      signal: controller.signal,
+    });
+
+    const data = await response.json();
+    return { data };
+  },
+});
+
+const modelValue = defineModel<string>('modelValue', {
+  default: null,
+});
+const emits = defineEmits<{
+  addNewOption: [newOption: string];
+  select: [option: InputOption];
+}>();
+
+const options = ref<InputOption[]>([]);
+const loading = ref(true);
+const controller = ref<AbortController>();
+
+const loadData = async (search: string) => {
+  loading.value = true;
+  try {
+    if (controller.value) {
+      controller.value.abort();
+    }
+    controller.value = new AbortController();
+    loading.value = true;
+
+    const { data } = await props.request(controller.value, search, props.url);
+
+    options.value = data;
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => loadData(''));
+const onInput = (e: InputEvent) => {
+  loadData((e.target as HTMLInputElement)?.value);
+};
+
+const currentOptionIcon = computed(() => {
+  const option = options.value.find((o) => o.value === modelValue.value);
+  if (!option || typeof option === 'string') return undefined;
+  return option.icon;
+});
+</script>
+
+<style scoped lang="scss">
+.icon {
+  height: 1em;
+  width: 1em;
+
+  &.datalist-icon {
+    margin: 0 0.5em;
+  }
+
+  :deep(svg) {
+    height: 100%;
+    width: 100%;
+
+    * {
+      fill: currentColor !important;
+    }
+  }
+}
+</style>

package/src/components/form/RawAutocomplete.vue

@@ -53,7 +53,7 @@
 <script setup lang="ts">
 import { searchString } from '@/helpers/string.helper';
 import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
-import { computed, ref, useTemplateRef, watch } from 'vue';
+import { computed, Ref, ref, watch } from 'vue';
 import RawInputText from '@/components/form/RawInputText.vue';
 import { InputOption, InputType } from '@/models';
 import { ChevronDown, ChevronUp, X } from 'lucide-vue-next';
@@ -72,11 +72,12 @@ export interface Props extends FieldComponentProps {
 const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
   open: false,
+  canAddNewOption: false,
 });
 
 const modelValue = defineModel<string | null>('modelValue', { required: true });
 
-const rawInput = useTemplateRef('rawInput');
+const rawInput: Ref<HTMLElement | null> = ref(null);
 
 const emits = defineEmits<{
   addNewOption: [newOption: string];

package/src/components/table/BmsTableFilters.vue

@@ -50,6 +50,7 @@
             transformValueForComponent(filter?.valueFrom, filter.type)
           "
           :valueTo="transformValueForComponent(filter?.valueTo, filter.type)"
+          :autocompleteRequest="filter?.autocompleteRequest"
           :options="getFilterOptions(filter) as any"
           @input="
             (e: InputEvent) =>
@@ -95,6 +96,7 @@ import _cloneDeep from 'lodash/cloneDeep';
 import BmsIconButton from '../button/BmsIconButton.vue';
 import BmsBetweenInput from '@/components/form/BmsBetweenInput.vue';
 import { isBetweenFilter } from '@/composables/search.helper';
+import BmsServerAutocomplete from '../form/BmsServerAutocomplete.vue';
 
 const route = useRoute();
 
@@ -156,6 +158,8 @@ const getFilterComponent = (type: FilterType) => {
       return BmsInputDateTime;
     case 'autocomplete':
       return BmsAutocomplete;
+    case 'autocompleteServer':
+      return BmsServerAutocomplete;
     case 'select':
       return BmsSelect;
     case 'betweenNumber':

package/src/models/table.model.ts

@@ -1,4 +1,4 @@
-import { InputType } from './form.model';
+import { InputOption, InputType } from './form.model';
 import { Sort, SortFunction } from './sort.model';
 
 export enum ColumnType {
@@ -34,6 +34,7 @@ export type FilterType =
   | 'inputDate'
   | 'boolean'
   | 'autocomplete'
+  | 'autocompleteServer'
   | 'betweenNumber'
   | 'betweenDate'
   | 'betweenDateTime';
@@ -48,6 +49,10 @@ export interface Filter {
   valueTo?: any;
   selectOptions?: { label: string; value: any }[];
   autocompleteOptions?: string[] | { label: string; value: string }[];
+  autocompleteRequest?: (
+    abortController: AbortController,
+    url?: string,
+  ) => Promise<{ data: InputOption[] }>;
   customFilter?: Function;
 }
 

package/src/showroom/pages/autocomplete.vue

@@ -26,6 +26,7 @@
     v-model="inputText"
   />
 
+  Valeur: {{ select }}
   <BmsSelect
     label="Select"
     @blur="console.log('blur')"
@@ -33,12 +34,26 @@
     :options="optionsLabelValue"
   />
 
+  Valeur: {{ multiSelect }}
   <BmsMultiSelect
     label="Multi-select"
     v-model="multiSelect"
     :options="optionsLabelValue"
   />
   <br />
+  Valeur: {{ multiSelectText }}
+  <BmsMultiSelect
+    label="Multi-select text"
+    v-model="multiSelectText"
+    :options="optionsText"
+  />
+  <br />
+  Valeur: {{ autocompleteText }}
+  <BmsServerAutocomplete
+    label="Autocomplete avec un appel API"
+    :request="autocompleteRequest"
+    v-model="autocompleteText"
+  />
 </template>
 
 <script setup lang="ts">
@@ -49,12 +64,11 @@ import { ref } from 'vue';
 import BmsButton from '@/components/button/BmsButton.vue';
 import BmsSelect from '@/components/form/BmsSelect.vue';
 import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
-import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
-import RawAutocomplete from '@/components/form/RawAutocomplete.vue';
-import BmsInputText from '@/components/form/BmsInputText.vue';
+import BmsServerAutocomplete from '@/components/form/BmsServerAutocomplete.vue';
 
 const select = ref('');
-const multiSelect = ref([]);
+const multiSelect = ref(null);
+const multiSelectText = ref(null);
 
 const optionsLabelValue = ref(
   range(0, 30).map((i) =>
@@ -69,6 +83,7 @@ const optionsText = ref(
   range(0, 30).map((i) => (Math.random() > 0.5 ? `toto-${i}` : `titi-${i}`)),
 );
 const inputText = ref('');
+const autocompleteText = ref('');
 
 const optionsIcon = ref(
   range(0, 30).map((i) =>
@@ -82,4 +97,12 @@ const inputValueIcon = ref('');
 const onAddNewOption = (newOption: string) => {
   optionsLabelValue.value.push({ label: newOption, value: newOption });
 };
+
+const autocompleteRequest = (
+  abortController: AbortController,
+  searchString?: string,
+) =>
+  fetch(`http://localhost:3000/pokemon-types?search=${searchString}`).then(
+    (res) => res.json(),
+  );
 </script>