@ouestfrance/sipa-bms-ui 8.10.0 → 8.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.10.0",
+  "version": "8.11.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -15,7 +15,8 @@
     "test:e2e:headless": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test serve http://localhost:8080 'cypress run'",
     "test:e2e:open": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test dev:showroom https://localhost:1234 'cypress open'",
     "storybook:dev": "storybook dev -p 6006 --no-open",
-    "storybook:build": "storybook build --loglevel warn --quiet",
+    "storybook:build": "storybook build --loglevel warn --quiet --stats-json",
+    "chromatic:turbosnap": "CHROMATIC_PROJECT_TOKEN=chpt_4854db5bc2ca640 chromatic --allow-console-errors --storybook-build-dir=storybook-static --only-changed",
     "chromatic": "CHROMATIC_PROJECT_TOKEN=chpt_4854db5bc2ca640 chromatic --allow-console-errors --storybook-build-dir=storybook-static",
     "chromatic:dev": "npm run storybook:build && npm run chromatic",
     "chromatic:accept": "npm run chromatic -- --auto-accept-changes",
@@ -30,15 +31,15 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",
-    "@codemirror/lang-html": "6.4.10",
+    "@codemirror/lang-html": "6.4.11",
     "@codemirror/lang-json": "6.0.2",
     "@commitlint/cli": "19.8.1",
     "@commitlint/config-conventional": "19.8.1",
     "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.1",
-    "@storybook/addon-docs": "9.1.7",
-    "@storybook/addon-links": "9.1.7",
-    "@storybook/vue3-vite": "9.1.7",
+    "@storybook/addon-docs": "9.1.10",
+    "@storybook/addon-links": "9.1.10",
+    "@storybook/vue3-vite": "9.1.10",
     "@types/lodash": "4.17.20",
     "@types/uuid": "11.0.0",
     "@vitejs/plugin-vue": "6.0.1",
@@ -47,42 +48,42 @@
     "@vueuse/motion": "^3.0.0",
     "axios": "1.12.2",
     "blob-util": "^2.0.2",
-    "chromatic": "13.2.0",
+    "chromatic": "13.3.0",
     "codemirror": "6.0.2",
     "cors": "^2.8.5",
     "cross-env": "^10.0.0",
     "cy2": "^4.0.0",
-    "cypress": "15.2.0",
+    "cypress": "15.4.0",
     "express": "^5.0.0",
     "husky": "9.1.7",
     "jsdom": "27.0.0",
     "keycloak-js": "26.1.2",
-    "lint-staged": "16.1.6",
+    "lint-staged": "16.2.4",
     "lodash": "4.17.21",
-    "lucide-vue-next": "0.544.0",
+    "lucide-vue-next": "0.545.0",
     "msw-storybook-addon": "^2.0.3",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.6.2",
-    "sass": "1.93.0",
+    "sass": "1.93.2",
     "semantic-release": "24.2.9",
     "start-server-and-test": "2.1.2",
-    "storybook": "9.1.7",
-    "storybook-addon-pseudo-states": "9.1.7",
+    "storybook": "9.1.10",
+    "storybook-addon-pseudo-states": "9.1.10",
     "storybook-vue3-router": "^6.0.2",
     "typescript": "5.2.2",
     "uuid": "13.0.0",
-    "vite": "7.1.6",
+    "vite": "7.1.10",
     "vite-plugin-dts": "^4.1.0",
-    "vite-plugin-mkcert": "1.17.8",
+    "vite-plugin-mkcert": "1.17.9",
     "vite-plugin-pages": "0.33.1",
     "vite-svg-loader": "5.1.0",
     "vitest": "3.2.4",
-    "vue": "3.5.21",
+    "vue": "3.5.22",
     "vue-codemirror": "6.1.1",
     "vue-loader": "17.4.2",
-    "vue-router": "4.5.1",
-    "vue-tsc": "3.0.7"
+    "vue-router": "4.6.0",
+    "vue-tsc": "3.1.1"
   },
   "files": [
     "dist",

package/src/components/button/BmsButton.stories.js

@@ -82,3 +82,29 @@ export const Tertiary = Template.bind({});
 Tertiary.args = {
   type: 'tertiary',
 };
+
+const TemplateSmall = (args) => ({
+  components: {
+    BmsButton,
+    ArrowRight,
+    ArrowLeft,
+    Camera,
+    Heart,
+    Wand,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsButton v-bind="args">Save me</BmsButton>
+    <br/>
+    <br/>
+    <BmsButton v-bind="args" small>Save me</BmsButton>
+ 
+  `,
+});
+
+export const Small = TemplateSmall.bind({});
+Small.args = {
+  type: 'primary',
+};

package/src/components/button/BmsButton.vue

@@ -3,6 +3,7 @@
     :mode="uiMode"
     :color="mode"
     :to="to"
+    :small="small"
     :type="submit ? 'submit' : 'button'"
   >
     <template #start>
@@ -26,6 +27,7 @@ interface Props {
   to?: RouteLocationRaw | null;
   mode?: StatusType.Danger | StatusType.Default;
   submit?: boolean;
+  small?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/button/BmsIconButton.stories.js

@@ -38,6 +38,10 @@ const Template = (args) => ({
     <br> <b>:hover</b>
     <BmsIconButton v-bind="args" class="_hover"><Heart/></BmsIconButton>
 
+    <br>
+    <br> <b>Small</b>
+    <BmsIconButton v-bind="args" small><Heart/></BmsIconButton>
+
 
     <br> <b>BmsIconButton must be on same alignment (using BmsLink and native button html tag)</b>
     <BmsIconButton

package/src/components/button/BmsIconButton.vue

@@ -4,7 +4,14 @@
     :tooltip-text="tooltipText"
     :direction="tooltipDirection"
   >
-    <UiButton v-bind="$attrs" icon :to="to" :target="target" :color="mode">
+    <UiButton
+      v-bind="$attrs"
+      icon
+      :to="to"
+      :target="target"
+      :color="mode"
+      :small="small"
+    >
       <slot></slot>
     </UiButton>
   </BmsTooltip>
@@ -23,11 +30,13 @@ interface Props {
   mode?: StatusType.Danger | StatusType.Information;
   tooltipText?: string;
   tooltipDirection?: TooltipDirection;
+  small?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
   mode: StatusType.Information,
   to: null,
   tooltipText: '',
+  small: false,
 });
 
 const activated: ComputedRef<boolean> = computed(() => !!props.tooltipText);

package/src/components/button/UiButton.vue

@@ -25,6 +25,7 @@ interface Props {
   color?: StatusType;
   mode?: 'fill' | 'ghost' | 'outline';
   icon?: boolean;
+  small?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,5 +34,6 @@ const props = withDefaults(defineProps<Props>(), {
   color: StatusType.Default,
   mode: 'fill',
   icon: false,
+  small: false,
 });
 </script>

package/src/components/button/UiButtonLink.vue

@@ -23,6 +23,7 @@ interface Props {
   target?: string;
   color: StatusType;
   mode: 'fill' | 'ghost' | 'outline';
+  small: boolean;
   icon: boolean;
 }
 
@@ -33,7 +34,7 @@ const classes = computed(() => {
   const disabled = attrs && (!!attrs.disabled || attrs.disabled === '');
   return `bms-button is-${props.color}${
     props.icon ? ' is-icon' : ` bms-button--${props.mode}`
-  } ${disabled ? ' bms-button--disabled' : ''} `;
+  } ${disabled ? ' bms-button--disabled' : ''} ${props.small ? 'bms-button--small' : ''}`;
 });
 </script>
 
@@ -44,8 +45,6 @@ const classes = computed(() => {
 
 @mixin selectColorsToApply($colorName) {
   &.is-icon {
-    padding: 0.5em 0;
-
     --bms-button-background-color: transparent;
     --bms-button-border-color: transparent;
     --bms-button-text-color: var(--bms-grey-100);
@@ -127,14 +126,15 @@ const classes = computed(() => {
 }
 
 .bms-button {
-  height: 2em;
   font-size: 1em;
 
+  --button-padding: 0.5em;
+
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   margin: 0;
-  padding: 0.5em;
+  padding: var(--button-padding);
   appearance: none;
   cursor: pointer;
   border-radius: var(--bms-border-radius);
@@ -152,7 +152,7 @@ const classes = computed(() => {
   @include selectColorsToApply('grey');
 
   .content {
-    margin: 0 0.5em;
+    margin: 0 var(--button-padding);
   }
 
   > span {
@@ -166,6 +166,13 @@ const classes = computed(() => {
     width: 1em;
     height: 1em;
   }
+  &--small {
+    --button-padding: 0.25em;
+  }
+
+  &.is-icon {
+    padding: var(--button-padding) 0;
+  }
 
   &.is-default {
     @include selectColorsToApply('main');

package/src/components/feedback/UiTooltip.vue

@@ -134,6 +134,7 @@ const style = computed(() => {
   filter: drop-shadow(0 0 0.8rem var(--bms-shadow-color));
   color: var(--bms-font-color);
   transform: var(--bms-tooltip-transform);
+  overflow-wrap: break-word;
 
   &::before {
     content: '';

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

@@ -40,6 +40,18 @@ Default.args = {
   modelValue: '',
 };
 
+export const Loading = Template.bind({});
+Loading.args = {
+  label: 'My autocomplete field',
+  loading: true,
+  options: [
+    { label: 'titi', value: 'i' },
+    { label: 'toto', value: 'o' },
+    { label: 'tutu', value: 'u' },
+  ],
+  modelValue: '',
+};
+
 export const WithStringArray = Template.bind({});
 WithStringArray.args = {
   label: 'My autocomplete field',

package/src/components/form/BmsAutocomplete.vue

@@ -13,6 +13,7 @@
     :placeholder="placeholder"
     :can-add-new-option="canAddNewOption"
     :small="small"
+    :loading="loading"
     @select="(option: any) => emits('select', option)"
     @add-new-option="(newOption: string) => emits('addNewOption', newOption)"
     @input="(e: InputEvent) => emits('input', e)"

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

@@ -45,6 +45,14 @@ Default.args = {
   captions: ['There is more information'],
 };
 
+export const Loading = Template.bind({});
+Loading.args = {
+  label: 'My label',
+  placeholder: 'Placeholder',
+  captions: ['There is more information'],
+  loading: true,
+};
+
 export const WithValue = Template.bind({});
 WithValue.args = {
   label: 'My label',

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

@@ -38,3 +38,30 @@ On.args = { label: 'Label', modelValue: true, name: 'my-input' };
 
 export const Off = Template.bind({});
 Off.args = { label: 'Label', modelValue: false, name: 'my-input' };
+
+const TemplateOverflow = (args) => ({
+  setup() {
+    const curentValue = ref(args.modelValue);
+    return { args, curentValue };
+  },
+  components: {
+    BmsInputToggle,
+  },
+  template: `
+    <div style="width: 200px; border: 1px solid black;">
+      <BmsInputToggle  v-bind="{...args}" v-model="curentValue"/>
+    </div>
+    `,
+});
+export const Overflow = TemplateOverflow.bind({});
+Overflow.args = {
+  label: 'with a very long label that overflows',
+  name: 'my-input',
+  ellipsisLabel: true,
+};
+export const NoOverflow = TemplateOverflow.bind({});
+NoOverflow.args = {
+  label: 'with a very long label that overflows',
+  name: 'my-input',
+  ellipsisLabel: false,
+};

package/src/components/form/BmsInputToggle.vue

@@ -1,6 +1,9 @@
 <template>
-  <field :disabled="disabled" :small="small">
-    <label class="input-toggle" :class="{ isOn: modelValue, disabled }">
+  <field :disabled="disabled" :small="small" :ellipsisLabel="ellipsisLabel">
+    <label
+      class="input-toggle"
+      :class="{ isOn: modelValue, disabled, overflow: ellipsisLabel }"
+    >
       <span class="input-switch-info">{{ label }}</span>
       <UiBmsSwitch
         :modelValue="modelValue"
@@ -43,6 +46,17 @@ defineEmits<{
   align-items: center;
   gap: 0.5em;
 
+  &.overflow {
+    width: 100%;
+    .input-switch-info {
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      word-break: break-all;
+      text-overflow: ellipsis;
+    }
+  }
+
   .input-switch-info {
     color: var(--label-color);
     transition: 0.2s;

package/src/components/form/BmsMultiSelect.vue

@@ -23,6 +23,7 @@
           ref="inputElement"
           v-model="searching"
           class="search"
+          :disabled="disabled"
           @focus="openDatalist"
           @click="openDatalist"
           @keyup.down="openDatalist"
@@ -84,7 +85,11 @@ const inputElement: Ref<HTMLElement | null> = ref(null);
 const isDatalistOpen = ref(false);
 
 const closeDatalist = () => (isDatalistOpen.value = false);
-const openDatalist = () => (isDatalistOpen.value = true);
+const openDatalist = () => {
+  if (!props.disabled) {
+    isDatalistOpen.value = true;
+  }
+};
 
 const searching = ref('');
 

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

@@ -39,6 +39,15 @@ Default.args = {
   ],
 };
 
+export const Loading = Template.bind({});
+Loading.args = {
+  label: 'My label',
+  captions: ['Helping text'],
+  loading: true,
+  modelValue: '',
+  options: [],
+};
+
 export const WithPlaceholder = Template.bind({});
 WithPlaceholder.args = {
   label: 'My label',

package/src/components/form/BmsSelect.vue

@@ -64,8 +64,10 @@ const closeDatalist = () => {
   isDatalistOpen.value = false;
 };
 const openDatalist = () => {
-  isDatalistOpen.value = true;
-  setFocus();
+  if (!props.disabled) {
+    isDatalistOpen.value = true;
+    setFocus();
+  }
 };
 
 const emits = defineEmits<{

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

@@ -34,8 +34,8 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-    <BmsServerAutocomplete v-bind="args">
-    </BmsServerAutocomplete>
+    <BmsServerAutocomplete v-bind="args"/>
+    <BmsServerAutocomplete v-bind="args" small/>
   `,
 });
 
@@ -51,6 +51,29 @@ Default.args = {
   url: 'https://fakeapi.com/items',
 };
 
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: 'My autocomplete field',
+  modelValue: '',
+  disabled: true,
+  request: Promise.resolve([]),
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  label: 'My autocomplete field',
+  modelValue: '',
+  request: () => {
+    return new Promise((resolve) =>
+      setTimeout(() => {
+        resolve({
+          data: [],
+        });
+      }, 10000),
+    );
+  },
+};
+
 export const WithRequest = Template.bind({});
 WithRequest.args = {
   label: 'My autocomplete field',

package/src/components/form/BmsServerAutocomplete.vue

@@ -13,6 +13,7 @@
     :placeholder="placeholder"
     :small="small"
     :canAddNewOption="false"
+    :loading="loading"
     @input="onInput"
     @select="(option: any) => emits('select', option)"
   >

package/src/components/form/BmsTextArea.vue

@@ -7,6 +7,7 @@
       :class="classes"
       :required="required"
       :placeholder="placeholder"
+      :disabled="disabled"
       @input="onInput"
       @keydown.enter.stop
       cols="10"
@@ -93,7 +94,6 @@ defineExpose({
     &.is-disabled {
       --field-border-color: var(--bms-grey-25);
       --textarea-background-color: var(--bms-grey-25);
-      pointer-events: none;
     }
     &.is-small {
       min-height: 56px;

package/src/components/form/UiBmsSwitch.vue

@@ -56,6 +56,7 @@ input {
   border-radius: var(--bms-border-radius-xlarge);
   position: relative;
   transition: 0.2s;
+  flex-shrink: 0;
 
   &::before {
     content: '';

package/src/components/layout/BmsModal.stories.js

@@ -92,7 +92,7 @@ WithScroll.args = {
 export const Success = Template.bind({});
 Success.args = {
   modelValue: true,
-  title: 'Titre',
+  title: 'Titre de ma modal',
   type: StatusType.Success,
 };
 

package/src/components/table/BmsServerTable.vue

@@ -246,7 +246,6 @@ async function fetchData() {
   }
   controller.value = new AbortController();
   loading.value = true;
-
   try {
     const { data, total: totalItems } = await props.request(
       {
@@ -260,11 +259,8 @@ async function fetchData() {
       controller.value,
       props.url,
     );
-
     items.value = data;
     total.value = totalItems;
-
-    loading.value = false;
   } catch (error) {
     if (
       !(error instanceof CanceledError) &&
@@ -272,6 +268,8 @@ async function fetchData() {
     ) {
       throw error;
     }
+  } finally {
+    loading.value = false;
   }
 }
 

package/src/plugins/field/FieldComponent.spec.ts

@@ -1,10 +1,11 @@
 import FieldComponent from '@/plugins/field/FieldComponent.vue';
 import { mount, shallowMount } from '@vue/test-utils';
 import { BmsCaption } from '@/index';
+import { nextTick } from 'vue';
 
 describe('FieldComponent', () => {
   it('should display label', async () => {
-    const wrapper = shallowMount(FieldComponent, {
+    const wrapper = mount(FieldComponent, {
       slots: {
         default: '<input type="text" />',
       },

package/src/plugins/field/FieldComponent.stories.js

@@ -17,6 +17,7 @@ const Template = (args) => ({
     Album,
   },
   template: `
+  <div style="border:1px solid grey; width: 400px;">
       <field v-bind="args">
         <template #icon-start v-if="args.iconStart">
           <Flashlight/>
@@ -26,12 +27,28 @@ const Template = (args) => ({
           <Album/>
         </template>
       </field>
-    `,
+  </div>
+      `,
 });
 
 export const Default = Template.bind({});
 Default.args = {
   label: 'My label',
+  ellipsisLabel: true,
+  captions: ['Helping text'],
+};
+
+export const NoOverflow = Template.bind({});
+NoOverflow.args = {
+  label: 'My label looooooooooooooooooooooooooooooooooooooooooooooong',
+  ellipsisLabel: false,
+  captions: ['Helping text'],
+};
+
+export const Overflow = Template.bind({});
+Overflow.args = {
+  label: 'My label looooooooooooooooooooooooooooooooooooooooooooooong',
+  ellipsisLabel: true,
   captions: ['Helping text'],
 };
 

package/src/plugins/field/FieldComponent.vue

@@ -1,8 +1,15 @@
 <template>
-  <div :class="classes">
+  <div :class="classes" ref="parentElement">
     <div class="field__wrapper">
       <span class="field__label">
-        <span class="field__label__title">{{ label }}</span>
+        <span
+          class="field__label__title"
+          :class="{ ellipsis: ellipsisLabel }"
+          :title="ellipsisLabel ? label : undefined"
+        >
+          {{ label }}
+        </span>
+
         <span v-if="required" class="field__label-required">*</span>
         <span v-if="optional && !required" class="field__label-optional">
           (Optionnel)
@@ -15,7 +22,8 @@
       </span>
 
       <span class="field__input">
-        <slot></slot>
+        <SkeletonField v-if="loading" />
+        <slot v-else></slot>
       </span>
       <span ref="datalist">
         <span class="field__datalist" :class="{ top: openTop }">
@@ -53,16 +61,20 @@ import { useElementBounding, useWindowSize } from '@vueuse/core';
 import { Caption } from '@/models/caption.model';
 import BmsCaption from '@/components/feedback/BmsCaption.vue';
 import { FieldComponentProps } from './field-component.model';
+import SkeletonField from './SkeletonField.vue';
 
 const props = withDefaults(defineProps<FieldComponentProps>(), {
   label: '',
   optional: false,
   small: false,
+  loading: false,
+  ellipsisLabel: false,
 });
 
 const datalist: Ref<HTMLSpanElement | null> = ref<HTMLSpanElement | null>(null);
-const { y } = useElementBounding(datalist);
 
+const { y } = useElementBounding(datalist);
+const parentElement = ref<HTMLElement | null>(null);
 const { height: windowHeight } = useWindowSize();
 
 const classes = computed(() => {
@@ -150,9 +162,17 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
     align-items: center;
 
     &__title {
+      display: inline-block;
+      white-space: nowrap;
+
       font-size: 1em;
       font-weight: var(--field-label-font-weight);
       color: var(--field-label-color);
+
+      &.ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
     &-helper--icon {