@ouestfrance/sipa-bms-ui 8.6.0 → 8.7.0

package/package.json

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

package/src/components/form/BmsAutocomplete.vue

@@ -15,6 +15,7 @@
     :small="small"
     @select="(option: any) => emits('select', option)"
     @add-new-option="(newOption: string) => emits('addNewOption', newOption)"
+    @input="(e: InputEvent) => emits('input', e)"
   >
     <template #icon-start v-if="currentOptionIcon">
       <span
@@ -60,9 +61,11 @@ const props = withDefaults(defineProps<Props>(), {
 const modelValue = defineModel<string>('modelValue', {
   default: null,
 });
+
 const emits = defineEmits<{
   addNewOption: [newOption: string];
   select: [option: InputOption];
+  input: [e: InputEvent];
 }>();
 
 const currentOptionIcon = computed(() => {

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

@@ -37,4 +37,30 @@ describe('BmsInputNumber', () => {
     await nextTick();
     expect(wrapper.emitted()['update:modelValue']).toBeUndefined();
   });
+
+  it('should try limit of the input when value change', async () => {
+    const { wrapper, inputElement } = factory({
+      modelValue: 8,
+      disabled: true,
+      max: 10,
+      min: 5,
+    });
+
+    expect((wrapper.vm as any).internalErrors.length).toBe(0);
+    await wrapper.setProps({ modelValue: 2 });
+    await nextTick();
+
+    expect((wrapper.vm as any).internalErrors.length).toBe(1);
+    expect((wrapper.vm as any).internalErrors[0]).toBe(
+      'Valeur inférieure au minimum autorisé (min : 5)',
+    );
+
+    await wrapper.setProps({ modelValue: 15 });
+    await nextTick();
+
+    expect((wrapper.vm as any).internalErrors.length).toBe(1);
+    expect((wrapper.vm as any).internalErrors[0]).toBe(
+      'Valeur supérieure au maximum autorisé (max : 10)',
+    );
+  });
 });

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

@@ -3,6 +3,7 @@ import { within } from 'storybook/test';
 import { BookOpen, CloudLightning } from 'lucide-vue-next';
 
 import template from '@/documentation/template_field_dependency.mdx';
+import { ref } from 'vue';
 
 export default {
   parameters: {
@@ -16,7 +17,9 @@ export default {
 
 const Template = (args) => ({
   setup() {
-    return { args };
+    const modelValue = ref(args.modelValue);
+    const modelValueSmall = ref(args.modelValueSmall);
+    return { args, modelValue, modelValueSmall };
   },
   components: {
     BmsInputNumber,
@@ -24,12 +27,12 @@ const Template = (args) => ({
     CloudLightning,
   },
   template: `
-  <BmsInputNumber v-bind="args">
+  <BmsInputNumber v-bind="args" v-model="modelValue">
     <template v-if="args.iconStart" #icon-start><BookOpen/></template>
     <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
   </BmsInputNumber>
   <br/>
-  <BmsInputNumber v-bind="{...args, small:true}">
+  <BmsInputNumber v-bind="{...args, small:true}" v-model="modelValueSmall">
     <template v-if="args.iconStart" #icon-start><BookOpen/></template>
     <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
   </BmsInputNumber>
@@ -47,12 +50,14 @@ export const WithValue = Template.bind({});
 WithValue.args = {
   label: 'My label',
   modelValue: 10,
+  modelValueSmall: 10,
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   label: 'My label',
   modelValue: 10,
+  modelValueSmall: 10,
   disabled: true,
 };
 
@@ -60,14 +65,26 @@ export const WithIcons = Template.bind({});
 WithIcons.args = {
   label: 'My label',
   modelValue: 10,
+  modelValueSmall: 10,
   iconStart: true,
   iconEnd: true,
 };
 
+export const WithLimitExceeded = Template.bind({});
+WithLimitExceeded.args = {
+  label: 'My label',
+  modelValue: 10,
+  modelValueSmall: 2,
+  min: 5,
+  max: 8,
+  errors: [{ label: 'Error 1' }],
+};
+
 export const WithErrors = Template.bind({});
 WithErrors.args = {
   label: 'My label',
   modelValue: 10,
+  modelValueSmall: 10,
   errors: ['Error 1', 'Error 2'],
 };
 

package/src/components/form/BmsInputNumber.vue

@@ -8,14 +8,16 @@
     :helperText="helperText"
     :placeholder="placeholder"
     :captions="captions"
-    :errors="errors"
+    :errors="computedErrors"
     :inputType="InputType.NUMBER"
+    :min="min"
+    :max="max"
     @input="onInput"
   />
 </template>
 
 <script lang="ts" setup>
-import { Ref, computed, ref } from 'vue';
+import { Ref, computed, ref, watch, onMounted } from 'vue';
 import { Caption } from '@/models/caption.model';
 import BmsInputText from '@/components/form/BmsInputText.vue';
 import { InputType } from '@/models';
@@ -28,8 +30,8 @@ export interface Props {
   disabled?: boolean;
   helperText?: string;
   placeholder?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
+  captions?: (string | Caption)[];
+  errors?: (string | Caption)[];
   max?: number;
   min?: number;
 }
@@ -42,6 +44,17 @@ const props = withDefaults(defineProps<Props>(), {
 
 const input: Ref<HTMLElement | null> = ref(null);
 
+const internalErrors: Ref<(string | Caption)[]> = ref([]);
+const computedErrors: Ref<(string | Caption)[]> = computed(() => {
+  return props.errors
+    ? internalErrors.value.concat(props.errors)
+    : internalErrors.value;
+});
+
+onMounted(() => {
+  checkLimit();
+});
+
 const $emits = defineEmits<{
   (e: 'update:modelValue', value: number): void;
 }>();
@@ -55,6 +68,20 @@ const classes = computed(() => {
   return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
 });
 
+const checkLimit = () => {
+  internalErrors.value = [];
+  if (props.min !== undefined && props.modelValue < props.min) {
+    internalErrors.value = [
+      'Valeur inférieure au minimum autorisé (min : ' + props.min + ')',
+    ];
+  }
+  if (props.max !== undefined && props.modelValue > props.max) {
+    internalErrors.value = [
+      'Valeur supérieure au maximum autorisé (max : ' + props.max + ')',
+    ];
+  }
+};
+
 const setFocus = () => {
   if (input.value) {
     input.value.focus();
@@ -64,4 +91,9 @@ const setFocus = () => {
 defineExpose({
   setFocus,
 });
+
+watch(
+  () => props.modelValue,
+  () => checkLimit(),
+);
 </script>

package/src/components/form/BmsInputRadio.vue

@@ -26,7 +26,7 @@ export interface Props {
   name: string;
   label?: string;
   disabled?: boolean;
-  errors?: string[] | Caption[];
+  errors?: (string | Caption)[];
   required?: boolean;
 }
 

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

@@ -36,6 +36,31 @@ describe('BmsInputText', () => {
     expect(wrapper.emitted()['update:modelValue']).toBeUndefined();
   });
 
+  it('should try limit of the input when value change', async () => {
+    const { wrapper, inputElement } = factory({
+      modelValue: 'toto',
+      disabled: true,
+      maxlength: 5,
+      minlength: 2,
+    });
+
+    expect((wrapper.vm as any).internalErrors.length).toBe(0);
+    await wrapper.setProps({ modelValue: 'superToto' });
+    await nextTick();
+
+    expect((wrapper.vm as any).internalErrors.length).toBe(1);
+    expect((wrapper.vm as any).internalErrors[0]).toBe(
+      'Longueur supérieure au maximum autorisé (max:5)',
+    );
+    await wrapper.setProps({ modelValue: 't' });
+    await nextTick();
+
+    expect((wrapper.vm as any).internalErrors.length).toBe(1);
+    expect((wrapper.vm as any).internalErrors[0]).toBe(
+      'Longueur inférieur au minimum autorisé (min:2)',
+    );
+  });
+
   it('should emit blur event for form validation', async () => {
     const { wrapper, inputElement } = factory({
       modelValue: 'toto',

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

@@ -2,6 +2,7 @@ import BmsInputText from '@/components/form/BmsInputText.vue';
 import { within } from 'storybook/test';
 import { BookOpen, CloudLightning } from 'lucide-vue-next';
 import template from '@/documentation/template_field_dependency.mdx';
+import { ref } from 'vue';
 
 export default {
   title: 'Composants/form/InputText',
@@ -15,7 +16,9 @@ export default {
 
 const Template = (args) => ({
   setup() {
-    return { args };
+    const modelValue = ref(args.modelValue);
+    const modelValueSmall = ref(args.modelValueSmall);
+    return { args, modelValue, modelValueSmall };
   },
   components: {
     BmsInputText,
@@ -23,12 +26,12 @@ const Template = (args) => ({
     CloudLightning,
   },
   template: `
-  <BmsInputText v-bind="args">
+  <BmsInputText v-bind="args" v-model="modelValue">
     <template v-if="args.iconStart" #icon-start><BookOpen/></template>
     <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
   </BmsInputText>
   <br/>
-  <BmsInputText v-bind="{...args, small:true}">
+  <BmsInputText v-bind="{...args, small:true}" v-model="modelValueSmall">
     <template v-if="args.iconStart" #icon-start><BookOpen/></template>
     <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
   </BmsInputText>
@@ -46,12 +49,14 @@ export const WithValue = Template.bind({});
 WithValue.args = {
   label: 'My label',
   modelValue: 'Une valeur',
+  modelValueSmall: 'Une valeur',
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   label: 'My label',
   modelValue: 'Une valeur',
+  modelValueSmall: 'Une valeur',
   disabled: true,
 };
 
@@ -59,20 +64,40 @@ export const WithIcons = Template.bind({});
 WithIcons.args = {
   label: 'My label',
   modelValue: 'Une valeur',
+  modelValueSmall: 'Une valeur',
   iconStart: true,
   iconEnd: true,
 };
 
+export const WithLimitEqual = Template.bind({});
+WithLimitEqual.args = {
+  label: 'My label',
+  modelValue: 'Un texte pilpoil',
+  modelValueSmall: 'too short',
+  maxlength: 16,
+};
+
+export const WithLimitExceeded = Template.bind({});
+WithLimitExceeded.args = {
+  label: 'My label',
+  modelValue: 'Une texte trop long pour la borne max',
+  modelValueSmall: 'too short',
+  maxlength: 15,
+  minlength: 10,
+};
+
 export const WithErrors = Template.bind({});
 WithErrors.args = {
   label: 'My label',
   modelValue: 'Une valeur',
+  modelValueSmall: 'Une valeur',
   errors: ['Error 1', 'Error 2'],
 };
 
 export const WithFocusState = {
   args: {
     modelValue: '',
+    modelValueSmall: '',
   },
 
   play: async ({ canvasElement }) => {

package/src/components/form/BmsInputText.vue

@@ -1,18 +1,22 @@
 <template>
-  <field v-bind="$props">
+  <field v-bind="$props" :captions="computedCaptions" :errors="computedErrors">
     <RawInputText
       ref="input"
       :type="inputType"
       :modelValue="modelValue"
+      @update:model-value="(val) => $emits('update:modelValue', val)"
       :required="required"
       :placeholder="placeholder"
       :disabled="disabled"
-      :errors="errors"
+      :errors="computedErrors"
       :hasDate="false"
       :small="small"
+      :min="min"
+      :max="max"
+      :minlength="minlength"
+      :maxlength="maxlength"
       @blur="$emits('blur')"
-      @input="onInput"
-      @keyup="onInput"
+      @focus="$emits('focus')"
     >
       <template #icon-start>
         <slot name="icon-start"></slot>
@@ -25,9 +29,9 @@
 </template>
 
 <script lang="ts" setup>
-import { type Ref, ref } from 'vue';
+import { computed, onMounted, type Ref, ref, watch } from 'vue';
 import RawInputText from '@/components/form/RawInputText.vue';
-import { InputType } from '@/models';
+import { Caption, InputType, StatusType } from '@/models';
 import type { FieldComponentProps } from '@/plugins/field/field-component.model';
 
 export interface Props extends FieldComponentProps {
@@ -38,6 +42,10 @@ export interface Props extends FieldComponentProps {
     | InputType.DATETIME;
   modelValue: string | number;
   placeholder?: string;
+  min?: number;
+  max?: number;
+  minlength?: number;
+  maxlength?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -48,12 +56,65 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const input: Ref<HTMLElement | null> = ref(null);
+const internalErrors: Ref<(string | Caption)[]> = ref([]);
+const computedErrors: Ref<(string | Caption)[]> = computed(() => {
+  return props.errors
+    ? internalErrors.value.concat(props.errors)
+    : internalErrors.value;
+});
+const internalCaptions: Ref<(string | Caption)[]> = ref([]);
+const computedCaptions: Ref<(string | Caption)[]> = computed(() => {
+  return props.captions
+    ? internalCaptions.value.concat(props.captions)
+    : internalCaptions.value;
+});
+
+onMounted(() => {
+  checkLimit();
+});
 
 const $emits = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
-  (e: 'blur'): void;
+  'update:modelValue': [value: string];
+  blur: [];
+  focus: [];
 }>();
 
+const onInput = (e: Event) => {
+  if (!props.disabled)
+    $emits('update:modelValue', (e?.target as HTMLInputElement).value);
+};
+
+const checkLimit = () => {
+  internalErrors.value = [];
+  internalCaptions.value = [];
+  if (
+    props.inputType === InputType.TEXT &&
+    typeof props.modelValue === 'string'
+  ) {
+    if (
+      props.minlength !== undefined &&
+      props.modelValue.length < props.minlength
+    ) {
+      internalErrors.value = [
+        'Longueur inférieur au minimum autorisé (min:' + props.minlength + ')',
+      ];
+    }
+    if (props.maxlength !== undefined) {
+      if (props.modelValue.length > props.maxlength) {
+        internalErrors.value = [
+          `Longueur supérieure au maximum autorisé (max:${props.maxlength})`,
+        ];
+      } else if (props.modelValue.length === props.maxlength) {
+        internalCaptions.value = [
+          {
+            label: `Attention, vous avez atteint la limite de ${props.maxlength} caractères.`,
+            mode: StatusType.Warning,
+          },
+        ];
+      }
+    }
+  }
+};
 const setFocus = () => {
   if (input.value) {
     (input.value as any).setFocus();
@@ -64,8 +125,8 @@ defineExpose({
   setFocus,
 });
 
-const onInput = (e: Event) => {
-  if (!props.disabled)
-    $emits('update:modelValue', (e?.target as HTMLInputElement).value);
-};
+watch(
+  () => props.modelValue,
+  () => checkLimit(),
+);
 </script>

package/src/components/form/BmsMultiSelect.vue

@@ -1,9 +1,10 @@
 <template>
-  <BmsSelect
+  <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,6 +77,12 @@ 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('');
 
@@ -60,26 +90,34 @@ const modelValue = defineModel<InputOption[]>('modelValue', {
   required: true,
 });
 
-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),
@@ -108,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>