@ouestfrance/sipa-bms-ui 8.3.0 → 8.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.3.0",
+  "version": "8.5.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -36,54 +36,53 @@
     "@commitlint/config-conventional": "19.8.1",
     "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.0",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-docs": "9.0.17",
-    "@storybook/addon-links": "9.0.17",
-    "@storybook/vue3-vite": "9.0.17",
+    "@storybook/addon-docs": "9.1.3",
+    "@storybook/addon-links": "9.1.3",
+    "@storybook/vue3-vite": "9.1.3",
     "@types/lodash": "4.17.20",
     "@types/uuid": "10.0.0",
-    "@vitejs/plugin-vue": "6.0.0",
+    "@vitejs/plugin-vue": "6.0.1",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "13.5.0",
+    "@vueuse/core": "13.7.0",
     "@vueuse/motion": "^3.0.0",
-    "axios": "1.10.0",
+    "axios": "1.11.0",
     "blob-util": "^2.0.2",
-    "chromatic": "13.1.2",
+    "chromatic": "13.1.3",
     "codemirror": "6.0.2",
     "cors": "^2.8.5",
     "cross-env": "^10.0.0",
-    "cy2": "4.0.9",
-    "cypress": "14.5.2",
+    "cy2": "^4.0.0",
+    "cypress": "15.0.0",
     "express": "^5.0.0",
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "keycloak-js": "26.1.2",
-    "lint-staged": "16.1.2",
+    "lint-staged": "16.1.5",
     "lodash": "4.17.21",
-    "lucide-vue-next": "0.525.0",
+    "lucide-vue-next": "0.541.0",
     "msw-storybook-addon": "^2.0.3",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.6.2",
-    "sass": "1.89.2",
+    "sass": "1.90.0",
     "semantic-release": "24.2.7",
-    "start-server-and-test": "2.0.12",
-    "storybook": "9.0.17",
-    "storybook-addon-pseudo-states": "9.0.17",
-    "storybook-vue3-router": "^5.0.0",
+    "start-server-and-test": "2.0.13",
+    "storybook": "9.1.3",
+    "storybook-addon-pseudo-states": "9.1.3",
+    "storybook-vue3-router": "^6.0.2",
     "typescript": "5.2.2",
     "uuid": "11.1.0",
-    "vite": "7.0.5",
+    "vite": "7.1.3",
     "vite-plugin-dts": "^4.1.0",
     "vite-plugin-mkcert": "1.17.8",
     "vite-plugin-pages": "0.33.1",
     "vite-svg-loader": "5.1.0",
     "vitest": "3.2.4",
-    "vue": "3.5.17",
+    "vue": "3.5.19",
     "vue-codemirror": "6.1.1",
     "vue-loader": "17.4.2",
     "vue-router": "4.5.1",
-    "vue-tsc": "3.0.3"
+    "vue-tsc": "3.0.6"
   },
   "files": [
     "dist",
@@ -119,8 +118,5 @@
   },
   "dependencies": {
     "msw": "^2.3.1"
-  },
-  "overrides": {
-    "storybook": "$storybook"
   }
 }

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

@@ -22,12 +22,16 @@ const Template = (args) => ({
     return { args };
   },
   template: `
+  <div style="display:flex; gap:1em">
     <BmsAutocomplete v-bind="args" />
+    <BmsAutocomplete v-bind="{...args, small:true}"/>
+  </div>
     `,
 });
 
 export const Default = Template.bind({});
 Default.args = {
+  label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
     { label: 'toto', value: 'o' },
@@ -35,8 +39,10 @@ Default.args = {
   ],
   modelValue: '',
 };
+
 export const WithStringArray = Template.bind({});
 WithStringArray.args = {
+  label: 'My autocomplete field',
   options: ['titi', 'toto', 'tutu'],
   modelValue: '',
   open: true,
@@ -44,6 +50,7 @@ WithStringArray.args = {
 
 export const WithValue = Template.bind({});
 WithValue.args = {
+  label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
     { label: 'toto', value: 'o' },
@@ -55,6 +62,7 @@ WithValue.args = {
 export const Opened = Template.bind({});
 Opened.parameters = { pseudo: { focus: 'input' } };
 Opened.args = {
+  label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
     { label: 'toto', value: 'o' },
@@ -65,6 +73,7 @@ Opened.args = {
 };
 export const IconsWithValue = Template.bind({});
 IconsWithValue.args = {
+  label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i', icon: Heart },
     { label: 'toto', value: 'o', icon: Cat },
@@ -76,6 +85,7 @@ IconsWithValue.args = {
 export const IconsOpened = Template.bind({});
 IconsOpened.parameters = { pseudo: { focus: 'input' } };
 IconsOpened.args = {
+  label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i', icon: Heart },
     { label: 'toto', value: 'o', icon: Cat },

package/src/components/form/BmsAutocomplete.vue

@@ -12,6 +12,7 @@
     :helperText="helperText"
     :placeholder="placeholder"
     :can-add-new-option="canAddNewOption"
+    :small="small"
     @select="(option: any) => emits('select', option)"
     @add-new-option="(newOption: string) => emits('addNewOption', newOption)"
   >
@@ -41,19 +42,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import RawAutocomplete from './RawAutocomplete.vue';
-import { Caption, InputOption } from '@/models';
+import { InputOption } from '@/models';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   options: string[] | InputOption[];
   modelValue?: string;
-  label?: string;
-  required?: boolean;
-  optional?: boolean;
-  disabled?: boolean;
-  helperText?: string;
   placeholder?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
   open?: boolean;
   canAddNewOption?: boolean;
 }

package/src/components/form/BmsBetweenInput.vue

@@ -1,14 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="allErrors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-    class="field-between"
-  >
+  <field v-bind="$props" :errors="allErrors" class="field-between">
     <RawInputText
       :type="inputType"
       :modelValue="valueFrom"

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

@@ -1,6 +1,5 @@
 import BmsFilePicker from '@/components/form/BmsFilePicker.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
@@ -11,7 +10,6 @@ export default {
   },
   title: 'Composants/form/FilePicker',
   component: BmsFilePicker,
-  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
     limit: {
       control: { type: 'number' },
@@ -20,24 +18,19 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
 const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
   components: {
     BmsFilePicker,
   },
-  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
     return { args };
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
   template: `
     <BmsFilePicker v-bind="args" />
   `,
 });
 
 export const Empty = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Empty.args = {};
 
 export const WithFiles = Template.bind({});

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

@@ -30,6 +30,12 @@ const Template = (args) => ({
           </template>
         </BmsInputBooleanCheckbox>
         Valeur de mon champ : {{ curentValue }}
+        <br/>
+        <BmsInputBooleanCheckbox v-bind="{...args, small:true}" v-model="curentValue">
+          <template v-if="args.labelSlot" #label>
+            <span v-html='args.labelSlot'/>
+          </template>
+        </BmsInputBooleanCheckbox>  
       </div>
     `,
 });

package/src/components/form/BmsInputBooleanCheckbox.vue

@@ -1,12 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="errors"
-    :required="required"
-    :helperText="helperText"
-    :captions="captions"
-    :disabled="disabled"
-  >
+  <field v-bind="$props">
     <UiBmsInputCheckbox
       class="field-checkbox"
       :modelValue="modelValue"
@@ -26,19 +19,13 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import { Caption } from '@/models/caption.model';
 import UiBmsInputCheckbox from '@/components/form/UiBmsInputCheckbox.vue';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   modelValue: any;
   labelValue: string;
   name: string;
-  label?: string;
-  disabled?: boolean;
-  helperText?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
-  required?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/form/BmsInputCheckboxCaptionGroup.vue

@@ -1,13 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-  >
+  <field v-bind="$props">
     <span class="input-checkbox-group-caption-wrapper" :class="align">
       <BmsInputCheckboxCaption
         v-for="option in options"

package/src/components/form/BmsInputCheckboxGroup.vue

@@ -1,13 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-  >
+  <field v-bind="$props">
     <span class="input-checkbox-group-wrapper" :class="align">
       <UiBmsInputCheckbox
         v-for="option in computedValues"
@@ -28,19 +20,12 @@
 import { computed, ComputedRef, ref, Ref } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { type BmsInputCheckboxGroupOption } from '@/models';
-import { Caption } from '@/models/caption.model';
 import UiBmsInputCheckbox from './UiBmsInputCheckbox.vue';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   values: string[] | BmsInputCheckboxGroupOption[];
   modelValue: any[];
-  label?: string;
-  required?: boolean;
-  optional?: boolean;
-  disabled?: boolean;
-  helperText?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
   align?: 'row' | 'column';
 }
 

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

@@ -21,6 +21,8 @@ const Template = (args) => ({
   },
   template: `
     <BmsInputCode v-bind="args"/>
+    <br/>
+    <BmsInputCode v-bind="{...args, small:true}"/>
   `,
 });
 

package/src/components/form/BmsInputCode.vue

@@ -1,13 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-  >
+  <field v-bind="$props">
     <div class="code-mirror">
       <Codemirror
         v-model="input"
@@ -21,23 +13,16 @@
 </template>
 
 <script setup lang="ts">
-import { Caption } from '@/models';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import { html } from '@codemirror/lang-html';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
 import { linter, lintGutter } from '@codemirror/lint';
 import { computed } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   type: 'html' | 'json';
   modelValue: string;
-  label?: string;
-  required?: boolean;
-  optional?: boolean;
-  disabled?: boolean;
-  helperText?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
 }
 
 const props = withDefaults(defineProps<Props>(), {

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

@@ -22,6 +22,8 @@ const Template = (args) => ({
   },
   template: `
   <BmsInputDateTime v-bind="args" />
+  <br/>
+  <BmsInputDateTime v-bind="{...args, small:true}"/>
   `,
 });
 

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

@@ -21,7 +21,10 @@ const Template = (args) => ({
   components: {
     BmsInputFile,
   },
-  template: `<BmsInputFile v-bind="args"/>`,
+  template: `
+  <BmsInputFile v-bind="args"/>
+  <br/>
+  <BmsInputFile v-bind="{...args, small:true}"/>`,
 });
 
 export const Empty = Template.bind({});

package/src/components/form/BmsInputFile.vue

@@ -1,14 +1,5 @@
 <template>
-  <field
-    class="file-upload"
-    :label="label"
-    :disabled="disabled"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-  >
+  <field class="file-upload" v-bind="$props">
     <div
       v-if="!modelValue || !modelValue.length"
       class="file-upload__drop-area"
@@ -67,18 +58,12 @@ import BmsIconButton from '../button/BmsIconButton.vue';
 import { isFileImage, getImageFromFile } from '@/helpers/file.helper';
 import { Caption } from '@/models/caption.model';
 import { StatusType } from '@/models';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-interface Props {
-  label: string;
+interface Props extends FieldComponentProps {
   modelValue: File[];
   limit?: number;
-  disabled?: boolean;
-  required?: boolean;
-  optional?: boolean;
-  helperText?: string;
   placeholder?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
   wide?: boolean;
   accept?: string;
 }
@@ -227,8 +212,8 @@ watch(
 
   &__drop-area {
     display: block;
-    padding: 4em 1em;
-    margin: 1em 0;
+    padding: calc(4 * var(--field-padding)) var(--field-padding);
+    // margin: var(--field-margin);
     text-align: center;
     border-radius: var(--bms-border-radius);
     border: var(--drop-border);

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

@@ -28,6 +28,11 @@ const Template = (args) => ({
     <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}">
+    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
+    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
+  </BmsInputNumber>
   `,
 });
 

package/src/components/form/BmsInputRadioCaptionGroup.vue

@@ -1,13 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-  >
+  <field v-bind="$props">
     <span class="input-radio-group-caption-wrapper" :class="align">
       <slot>
         <BmsInputRadioCaption
@@ -31,18 +23,11 @@ import { Ref, computed, ref } from 'vue';
 import BmsInputRadioCaption from './BmsInputRadioCaption.vue';
 import { v4 as uuid } from 'uuid';
 import { BmsInputRadioCaptionGroupOption } from '@/models';
-import { Caption } from '@/models/caption.model';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   options?: BmsInputRadioCaptionGroupOption[];
   modelValue: any;
-  label?: string;
-  required?: boolean;
-  optional?: boolean;
-  disabled?: boolean;
-  helperText?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
   align?: 'row' | 'column';
 }
 

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

@@ -48,6 +48,18 @@ DefaultRow.args = {
   label: 'This is a field label',
 };
 
+export const Small = Template.bind({});
+Small.args = {
+  small: true,
+  values: [
+    { value: 'tata', label: 'Tata' },
+    { value: 'titi', label: 'Titi' },
+    { value: 'toto', label: 'Toto' },
+    { value: 'tutu', label: 'Tutu' },
+  ],
+  modelValue: '',
+  label: 'This is a field label',
+};
 export const DefaultColumn = Template.bind({});
 DefaultColumn.args = {
   values: ['tata', 'titi', 'toto', 'tutu'],

package/src/components/form/BmsInputRadioGroup.vue

@@ -1,13 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-  >
+  <field v-bind="$props">
     <span class="input-radio-group-wrapper" :class="align">
       <slot>
         <BmsInputRadio
@@ -31,18 +23,11 @@ import { computed, ComputedRef, ref, Ref } from 'vue';
 import BmsInputRadio from './BmsInputRadio.vue';
 import { v4 as uuid } from 'uuid';
 import { BmsInputRadioGroupOption } from '@/models';
-import { Caption } from '@/models/caption.model';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   values?: string[] | BmsInputRadioGroupOption[];
   modelValue: any;
-  label?: string;
-  required?: boolean;
-  optional?: boolean;
-  disabled?: boolean;
-  helperText?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
   align?: 'row' | 'column';
 }
 
@@ -83,7 +68,7 @@ const computedValues: ComputedRef<BmsInputRadioGroupOption[]> = computed(() => {
 .input-radio-group-wrapper {
   display: flex;
   gap: 1em;
-  margin: 0.5em 0;
+  margin: var(--field-margin);
   flex-direction: row;
 
   &.column {

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

@@ -1,5 +1,5 @@
 import { field } from '@/plugins/field';
-import BmsInputText, { Props } from './BmsInputText.vue';
+import BmsInputText, { type Props } from './BmsInputText.vue';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 

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

@@ -27,6 +27,11 @@ const Template = (args) => ({
     <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}">
+    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
+    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
+  </BmsInputText>
   `,
 });
 

package/src/components/form/BmsInputText.vue

@@ -1,13 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-  >
+  <field v-bind="$props">
     <RawInputText
       ref="input"
       :type="inputType"
@@ -17,6 +9,7 @@
       :disabled="disabled"
       :errors="errors"
       :hasDate="false"
+      :small="small"
       @blur="$emits('blur')"
       @input="onInput"
       @keyup="onInput"
@@ -32,26 +25,19 @@
 </template>
 
 <script lang="ts" setup>
-import { Ref, ref } from 'vue';
-import { Caption } from '@/models/caption.model';
+import { type Ref, ref } from 'vue';
 import RawInputText from '@/components/form/RawInputText.vue';
 import { InputType } from '@/models';
+import type { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   inputType?:
     | InputType.TEXT
     | InputType.NUMBER
     | InputType.DATE
     | InputType.DATETIME;
   modelValue: string | number;
-  label?: string;
-  required?: boolean;
-  optional?: boolean;
-  disabled?: boolean;
-  helperText?: string;
   placeholder?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
 }
 
 const props = withDefaults(defineProps<Props>(), {

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

@@ -24,6 +24,9 @@ const Template = (args) => ({
   template: `
     <BmsInputToggle  v-bind="{...args}" v-model="curentValue"/>
     Valeur de mon toggle : {{ curentValue }}
+  <br/>
+  <BmsInputToggle v-bind="{...args, small:true}" v-model="curentValue"/>
+    Valeur de mon toggle : {{ curentValue }}
     `,
 });