@ouestfrance/sipa-bms-ui 8.10.1 → 8.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.10.1",
+  "version": "8.12.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<{
@@ -104,74 +106,38 @@ defineExpose({
 
 <style lang="scss" scoped>
 .field__input {
-  --field-border-color: var(--bms-grey-50);
-  --field-border-color-active: var(--bms-main-100);
-  --input-background-color: var(--bms-white);
+  .icon-toggle {
+    &-container {
+      height: 100%;
+      display: flex;
+      align-items: center;
 
-  .select-wrapper {
-    width: 100%;
-    padding: 0 0 0 1em;
-    border-radius: var(--bms-border-radius);
-    border: 1px solid var(--field-border-color);
-    background-color: var(--input-background-color);
-    min-height: var(--field-height);
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .icon-toggle {
-      &-container {
-        height: 100%;
-        display: flex;
-        align-items: center;
-
-        &:hover {
-          cursor: pointer;
-        }
+      &:hover {
+        cursor: pointer;
       }
-      &-button {
-        width: 1em;
-        margin: 0 var(--field-padding);
-        display: block;
-      }
-    }
-
-    &:hover {
-      --field-border-color: var(--bms-grey-100);
-    }
-
-    &:has(input:focus) {
-      --field-border-color: var(--field-border-color-active);
-    }
-
-    &.is-error {
-      --field-border-color: var(--bms-red-100);
-      --input-background-color: var(--bms-red-25);
     }
-
-    &.is-disabled {
-      --field-border-color: var(--bms-grey-25);
-      --input-background-color: var(--bms-grey-25);
-      pointer-events: none;
+    &-button {
+      width: 1em;
+      margin: 0 var(--field-padding);
+      display: block;
     }
+  }
 
-    input {
-      border: none;
-      background-color: transparent;
-      caret-color: transparent;
-      cursor: pointer;
-      outline: none;
-      appearance: none;
-      margin: 0;
-      padding: 0;
-      font: inherit;
-      color: inherit;
-      height: 24px;
-      line-height: 1;
-      width: 100%;
-      height: 100%;
-    }
+  input {
+    border: none;
+    background-color: transparent;
+    caret-color: transparent;
+    cursor: pointer;
+    outline: none;
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    height: 24px;
+    line-height: 1;
+    width: 100%;
+    height: 100%;
   }
 }
 </style>

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/RawSelect.vue

@@ -61,7 +61,7 @@ const selectItem = (option: any) => {
 
   .select-wrapper {
     width: 100%;
-    padding: 0 0 0 1em;
+    padding: 0 0 0 var(--field-padding);
     border-radius: var(--bms-border-radius);
     border: 1px solid var(--field-border-color);
     background-color: var(--input-background-color);
@@ -71,23 +71,6 @@ const selectItem = (option: any) => {
     align-items: center;
     justify-content: space-between;
 
-    .icon-down {
-      &-container {
-        height: 100%;
-        display: flex;
-        align-items: center;
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-      &-button {
-        width: 1em;
-        margin: 0 var(--field-padding);
-        display: block;
-      }
-    }
-
     &:hover {
       --field-border-color: var(--bms-grey-100);
     }

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" />',
       },