@ouestfrance/sipa-bms-ui 8.6.0 → 8.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.6.0",
+  "version": "8.8.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -36,9 +36,9 @@
     "@commitlint/config-conventional": "19.8.1",
     "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.1",
-    "@storybook/addon-docs": "9.1.5",
-    "@storybook/addon-links": "9.1.5",
-    "@storybook/vue3-vite": "9.1.5",
+    "@storybook/addon-docs": "9.1.7",
+    "@storybook/addon-links": "9.1.7",
+    "@storybook/vue3-vite": "9.1.7",
     "@types/lodash": "4.17.20",
     "@types/uuid": "11.0.0",
     "@vitejs/plugin-vue": "6.0.1",
@@ -47,7 +47,7 @@
     "@vueuse/motion": "^3.0.0",
     "axios": "1.12.2",
     "blob-util": "^2.0.2",
-    "chromatic": "13.1.4",
+    "chromatic": "13.2.0",
     "codemirror": "6.0.2",
     "cors": "^2.8.5",
     "cross-env": "^10.0.0",
@@ -64,15 +64,15 @@
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.6.2",
-    "sass": "1.92.1",
-    "semantic-release": "24.2.8",
-    "start-server-and-test": "2.1.0",
-    "storybook": "9.1.5",
-    "storybook-addon-pseudo-states": "9.1.5",
+    "sass": "1.93.0",
+    "semantic-release": "24.2.9",
+    "start-server-and-test": "2.1.2",
+    "storybook": "9.1.7",
+    "storybook-addon-pseudo-states": "9.1.7",
     "storybook-vue3-router": "^6.0.2",
     "typescript": "5.2.2",
     "uuid": "13.0.0",
-    "vite": "7.1.5",
+    "vite": "7.1.6",
     "vite-plugin-dts": "^4.1.0",
     "vite-plugin-mkcert": "1.17.8",
     "vite-plugin-pages": "0.33.1",

package/src/assets/scss/global-variables.scss

@@ -52,5 +52,11 @@
 
     --bms-disabled-color: var(--bms-grey-50);
     --bms-font-color: var(--bms-grey-100);
+
+    --bms-z-index-below: -10;
+    --bms-z-index-base: 0;
+    --bms-z-index-fixed: 10;
+    --bms-z-index-tooltip: 20;
+    --bms-z-index-modal: 30;
   }
 }

package/src/components/feedback/UiTooltip.vue

@@ -130,7 +130,7 @@ const style = computed(() => {
   max-height: 30rem;
   position: absolute;
   overflow: hidden;
-  z-index: 20;
+  z-index: var(--bms-z-index-tooltip);
   filter: drop-shadow(0 0 0.8rem var(--bms-shadow-color));
   color: var(--bms-font-color);
   transform: var(--bms-tooltip-transform);

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>