@ouestfrance/sipa-bms-ui 8.15.0 → 8.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.15.0",
+  "version": "8.16.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -30,47 +30,47 @@
     "url": "https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms.git"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.0",
+    "@chromatic-com/storybook": "^4.1.2",
     "@codemirror/lang-html": "6.4.11",
     "@codemirror/lang-json": "6.0.2",
     "@commitlint/cli": "20.1.0",
     "@commitlint/config-conventional": "20.0.0",
     "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.1",
-    "@storybook/addon-docs": "9.1.15",
-    "@storybook/addon-links": "9.1.15",
-    "@storybook/vue3-vite": "9.1.15",
-    "@types/lodash": "4.17.20",
+    "@storybook/addon-docs": "10.0.8",
+    "@storybook/addon-links": "10.0.8",
+    "@storybook/vue3-vite": "10.0.8",
+    "@types/lodash": "4.17.21",
     "@types/uuid": "11.0.0",
-    "@vitejs/plugin-vue": "6.0.1",
+    "@vitejs/plugin-vue": "6.0.2",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "13.9.0",
     "@vueuse/motion": "^3.0.0",
-    "axios": "1.12.2",
+    "axios": "1.13.2",
     "blob-util": "^2.0.2",
-    "chromatic": "13.3.2",
+    "chromatic": "13.3.4",
     "codemirror": "6.0.2",
     "cors": "^2.8.5",
     "cross-env": "^10.0.0",
     "cy2": "^4.0.0",
-    "cypress": "15.5.0",
+    "cypress": "15.7.0",
     "express": "^5.0.0",
     "husky": "9.1.7",
-    "jsdom": "27.0.1",
+    "jsdom": "27.2.0",
     "keycloak-js": "26.1.2",
-    "lint-staged": "16.2.6",
+    "lint-staged": "16.2.7",
     "lodash": "4.17.21",
-    "lucide-vue-next": "0.548.0",
+    "lucide-vue-next": "0.554.0",
     "msw-storybook-addon": "^2.0.3",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.6.2",
-    "sass": "1.93.2",
-    "semantic-release": "25.0.1",
-    "start-server-and-test": "2.1.2",
-    "storybook": "9.1.15",
-    "storybook-addon-pseudo-states": "9.1.15",
-    "storybook-vue3-router": "^6.0.2",
+    "sass": "1.94.2",
+    "semantic-release": "25.0.2",
+    "start-server-and-test": "2.1.3",
+    "storybook": "10.0.8",
+    "storybook-addon-pseudo-states": "10.0.8",
+    "storybook-vue3-router": "^7.0.0",
     "typescript": "5.2.2",
     "uuid": "13.0.0",
     "vite": "^7.1.12",
@@ -79,11 +79,11 @@
     "vite-plugin-pages": "0.33.1",
     "vite-svg-loader": "5.1.0",
     "vitest": "3.2.4",
-    "vue": "3.5.22",
+    "vue": "3.5.24",
     "vue-codemirror": "6.1.1",
     "vue-loader": "17.4.2",
     "vue-router": "4.6.3",
-    "vue-tsc": "3.1.1"
+    "vue-tsc": "3.1.5"
   },
   "files": [
     "dist",

package/src/components/form/BmsMultiSelect.vue

@@ -157,7 +157,9 @@ const optionsLabelValue = computed(() =>
 );
 
 const filteredOptions = computed(() =>
-  optionsLabelValue.value.filter((o) => searchString(o.label, searching.value)),
+  optionsLabelValue.value
+    .filter((o) => !modelValue.value?.includes(o.value))
+    .filter((o) => searchString(o.label, searching.value)),
 );
 </script>
 
@@ -174,6 +176,8 @@ const filteredOptions = computed(() =>
     border: none;
     background-color: transparent;
     flex-grow: 1;
+    flex-basis: 40px;
+    width: 100%;
   }
 }
 .icon-container {

package/src/components/form/BmsServerAutocomplete.vue

@@ -13,7 +13,6 @@
     :placeholder="placeholder"
     :small="small"
     :canAddNewOption="false"
-    :loading="loading"
     @input="onInput"
     @select="(option: any) => emits('select', option)"
   >
@@ -44,11 +43,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, useTemplateRef } from 'vue';
 import RawAutocomplete from './RawAutocomplete.vue';
 import { InputOption } from '@/models';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import BmsLoader from '../feedback/BmsLoader.vue';
+import { useDebounceFn } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
   url?: string;
@@ -88,6 +88,11 @@ const emits = defineEmits<{
   select: [option: InputOption];
 }>();
 
+const debouncedLoadData = useDebounceFn(
+  (search?: string) => loadData(search ?? ''),
+  500,
+);
+
 const options = ref<InputOption[]>([]);
 const loading = ref(true);
 const controller = ref<AbortController>();
@@ -113,7 +118,12 @@ const loadData = async (search: string) => {
 
 onMounted(() => loadData(''));
 const onInput = (e: InputEvent) => {
-  loadData((e.target as HTMLInputElement)?.value);
+  const search = (e.target as HTMLInputElement)?.value;
+  if (search?.length > 2) {
+    debouncedLoadData(search);
+  } else {
+    options.value = [];
+  }
 };
 
 const currentOptionIcon = computed(() => {

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

@@ -0,0 +1,109 @@
+import BmsFloatingWindow from '@/components/layout/BmsFloatingWindow.vue';
+import { vueRouter } from 'storybook-vue3-router';
+
+export default {
+  title: 'Composants/layout/FloatingWindow',
+  component: BmsFloatingWindow,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsFloatingWindow,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="width: ${args.width}; height: ${args.height}; background: purple; position:relative">
+      <BmsFloatingWindow v-bind="args">
+        ${args?.content}
+      </BmsFloatingWindow>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  width: '200px',
+  height: '200px',
+  title: 'My title',
+  modelValue: true,
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  width: '1200px',
+  height: '100vh',
+  title: 'My title',
+  modelValue: true,
+};
+
+export const Closed = Template.bind({});
+Closed.args = {
+  width: '1200px',
+  height: '100vh',
+  title: 'My title',
+  modelValue: false,
+};
+
+export const Overflow = Template.bind({});
+Overflow.args = {
+  width: '1200px',
+  height: '100vh',
+  title: 'Cyrano de Bergerac',
+  modelValue: true,
+  content: `Ah ! non ! c’est un peu court, jeune homme !
+On pouvait dire… Oh ! Dieu ! … bien des choses en somme…
+En variant le ton, – par exemple, tenez :
+Agressif : « Moi, monsieur, si j’avais un tel nez,
+Il faudrait sur-le-champ que je me l’amputasse ! »
+Amical : « Mais il doit tremper dans votre tasse
+Pour boire, faites-vous fabriquer un hanap ! »
+Descriptif : « C’est un roc ! … c’est un pic ! … c’est un cap !
+Que dis-je, c’est un cap ? … C’est une péninsule ! »
+Curieux : « De quoi sert cette oblongue capsule ?
+D’écritoire, monsieur, ou de boîte à ciseaux ? »
+Gracieux : « Aimez-vous à ce point les oiseaux
+Que paternellement vous vous préoccupâtes
+De tendre ce perchoir à leurs petites pattes ? »
+Truculent : « Ça, monsieur, lorsque vous pétunez,
+La vapeur du tabac vous sort-elle du nez
+Sans qu’un voisin ne crie au feu de cheminée ? »
+Prévenant : « Gardez-vous, votre tête entraînée
+Par ce poids, de tomber en avant sur le sol ! »
+Tendre : « Faites-lui faire un petit parasol
+De peur que sa couleur au soleil ne se fane ! »
+Pédant : « L’animal seul, monsieur, qu’Aristophane
+Appelle Hippocampéléphantocamélos
+Dut avoir sous le front tant de chair sur tant d’os ! »
+Cavalier : « Quoi, l’ami, ce croc est à la mode ?
+Pour pendre son chapeau, c’est vraiment très commode ! »
+Emphatique : « Aucun vent ne peut, nez magistral,
+T’enrhumer tout entier, excepté le mistral ! »
+Dramatique : « C’est la Mer Rouge quand il saigne ! »
+Admiratif : « Pour un parfumeur, quelle enseigne ! »
+Lyrique : « Est-ce une conque, êtes-vous un triton ? »
+Naïf : « Ce monument, quand le visite-t-on ? »
+Respectueux : « Souffrez, monsieur, qu’on vous salue,
+C’est là ce qui s’appelle avoir pignon sur rue ! »
+Campagnard : « Hé, ardé ! C’est-y un nez ? Nanain !
+C’est queuqu’navet géant ou ben queuqu’melon nain ! »
+Militaire : « Pointez contre cavalerie ! »
+Pratique : « Voulez-vous le mettre en loterie ?
+Assurément, monsieur, ce sera le gros lot ! »
+Enfin parodiant Pyrame en un sanglot :
+« Le voilà donc ce nez qui des traits de son maître
+A détruit l’harmonie ! Il en rougit, le traître ! »
+– Voilà ce qu’à peu près, mon cher, vous m’auriez dit
+Si vous aviez un peu de lettres et d’esprit
+Mais d’esprit, ô le plus lamentable des êtres,
+Vous n’en eûtes jamais un atome, et de lettres
+Vous n’avez que les trois qui forment le mot : sot !
+Eussiez-vous eu, d’ailleurs, l’invention qu’il faut
+Pour pouvoir là, devant ces nobles galeries,
+me servir toutes ces folles plaisanteries,
+Que vous n’en eussiez pas articulé le quart
+De la moitié du commencement d’une, car
+Je me les sers moi-même, avec assez de verve,
+Mais je ne permets pas qu’un autre me les serve.`,
+};

package/src/components/layout/BmsFloatingWindow.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="floating-window-wrapper">
+    <div class="floating-window" v-show="open">
+      <div class="floating-window__header">
+        <h2>{{ title }}</h2>
+        <div class="floating-window__header__buttons">
+          <BmsIconButton :tooltip-text="'Maximiser la fenêtre'" disabled>
+            <Maximize2 />
+          </BmsIconButton>
+          <BmsIconButton @click.prevent.stop="open = false">
+            <X />
+          </BmsIconButton>
+        </div>
+      </div>
+      <div class="floating-window__content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Maximize2, X } from 'lucide-vue-next';
+import BmsIconButton from '../button/BmsIconButton.vue';
+
+defineProps<{ title: string }>();
+
+const open = defineModel<boolean>({
+  default: false,
+});
+</script>
+
+<style scoped lang="scss">
+.floating-window-wrapper {
+  --breakpoint: 900px;
+  container-name: floating-window;
+  container-type: inline-size;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  .floating-window {
+    background-color: var(--bms-white);
+    height: 100%;
+    width: 100%;
+    border-radius: var(--bms-border-radius-large);
+    border: 1px solid var(--bms-grey-10);
+    pointer-events: all;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--bms-grey-10);
+      padding: 1em;
+      h2 {
+        margin: 0;
+      }
+    }
+    &__content {
+      overflow-y: auto;
+      height: auto;
+      scrollbar-width: thin;
+    }
+  }
+}
+
+@container floating-window (min-width:900px) {
+  .floating-window {
+    max-height: 300px;
+    max-width: 80%;
+  }
+}
+</style>

package/src/components/layout/BmsModal.vue

@@ -233,7 +233,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 10;
+  z-index: var(--bms-z-index-fixed);
 
   &.Default {
     --modal-header-border-size: 1px;

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

@@ -0,0 +1,155 @@
+import BmsSplitWindow from './BmsSplitWindow.vue';
+
+export default {
+  title: 'Composants/layout/SplitWindow',
+  component: BmsSplitWindow,
+  argTypes: {
+    splitOrientation: {
+      control: { type: 'select' },
+      options: ['horizontal', 'vertical'],
+      defaultValue: 'vertical',
+    },
+    min: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+      },
+      defaultValue: 20,
+    },
+    max: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+      },
+      defaultValue: 80,
+    },
+    primary: {
+      control: { type: 'select' },
+      options: ['first', 'second'],
+      defaultValue: 'first',
+    },
+    collapsed: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    ariaLabel: {
+      control: { type: 'text' },
+    },
+    split: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+      },
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BmsSplitWindow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="height: 400px; border: 1px solid #ccc;">
+      <BmsSplitWindow 
+        v-model="args.split"
+        :split-orientation="args.splitOrientation"
+        :min="args.min"
+        :max="args.max"
+        :primary="args.primary"
+        :collapsed="args.collapsed"
+        :aria-label="args.ariaLabel"
+        @update:collapsed="(collapsed) => { args.collapsed = collapsed }"
+      >
+        <template #first>
+          <div style="display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: lightblue">
+            <p>First</p>
+          </div>
+        </template>
+        <template #second>
+          <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: lightpink">
+            <p>Second</p>
+          </div>
+        </template>
+      </BmsSplitWindow>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  splitOrientation: 'vertical',
+  min: 20,
+  max: 80,
+  primary: 'first',
+  ariaLabel: 'Split window divider',
+  split: 50,
+  collapsed: false,
+};
+
+export const MultiSplit = (args) => ({
+  components: { BmsSplitWindow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="height: 400px; border: 1px solid #ccc;">
+      <BmsSplitWindow
+        v-model="args.split"
+        :split-orientation="'vertical'"
+        :min="args.min"
+        :max="args.max"
+        :primary="'first'"
+        :collapsed="args.collapsed"
+        :aria-label="args.ariaLabel"
+      >
+        <template #first>
+          <BmsSplitWindow
+            v-model="args.split2"
+            :split-orientation="'horizontal'"
+            :min="args.min"
+            :max="args.max"
+            :primary="'first'"
+            :aria-label="args.ariaLabel"
+            style="height: 100%;"
+          >
+            <template #first>
+              <div style="display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: lightgreen">
+                <p>Multi First</p>
+              </div>
+            </template>
+            <template #second>
+              <div style="display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: lightyellow">
+                <p>Multi Second</p>
+              </div>
+            </template>
+          </BmsSplitWindow>
+        </template>
+        <template #second>
+          <div style="display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: lightcoral">
+            <p>Third Split</p>
+          </div>
+        </template>
+      </BmsSplitWindow>
+    </div>
+  `,
+  data() {
+    return {
+      split2: 50,
+    };
+  },
+});
+
+MultiSplit.args = {
+  splitOrientation: 'vertical',
+  split: 30,
+  min: 20,
+  max: 80,
+  primary: 'first',
+  collapsed: false,
+  ariaLabel: 'Multi split window divider',
+};