@ouestfrance/sipa-bms-ui 8.7.0 → 8.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.7.0",
+  "version": "8.8.1",
   "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/BmsSelect.vue

@@ -72,7 +72,7 @@ const emits = defineEmits<{
   select: [value: any];
 }>();
 
-onClickOutside(inputElement, () => closeDatalist, {
+onClickOutside(inputElement, closeDatalist, {
   ignore: ['.datalist-option', '.icon-toggle-button'],
 });
 

package/src/components/layout/BmsOverlay.vue

@@ -18,11 +18,11 @@ defineProps<{
   left: 0;
   width: 100vw;
   height: 100vh;
-  z-index: 10;
+  z-index: var(--bms-z-index-modal);
   background: rgba(82, 100, 118, 0.3);
 }
 
 .priority {
-  z-index: 20;
+  z-index: calc(var(--bms-z-index-modal) + 10);
 }
 </style>

package/src/components/layout/UiPopoverMenu.vue

@@ -133,7 +133,7 @@ const listener = () => {
   width: var(--ui-menu-width, auto);
   width: 400px;
   position: fixed;
-  z-index: 10;
+  z-index: var(--bms-z-index-fixed);
   display: block;
   pointer-events: none;
   opacity: 0;

package/src/components/navigation/BmsMenu.vue

@@ -96,7 +96,7 @@ const toggleMenu = (newMenuState: boolean = true) =>
     margin: 1.5rem;
     padding: 0;
     border-radius: 0.5rem;
-    z-index: 10;
+    z-index: var(--bms-z-index-fixed);
   }
 
   &__copyright {

package/src/plugins/field/FieldComponent.vue

@@ -206,7 +206,7 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
     margin: 0;
     background: var(--bms-white);
     width: 100%;
-    z-index: 100;
+    z-index: var(--bms-z-index-tooltip);
     max-height: 300px;
     overflow-y: auto;
 

package/src/plugins/notifications/NotificationWidget.vue

@@ -100,7 +100,7 @@ const closeDetails = () => {
   top: var(--bms-notifications-top);
   width: 100%;
   max-width: var(--bms-notifications-width);
-  z-index: 20;
+  z-index: var(--bms-z-index-fixed);
 
   &__item {
     &:not(:first-child) {

package/src/showroom/pages/zindex.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import BmsButton from '@/components/button/BmsButton.vue';
+import BmsTooltip from '@/components/feedback/BmsTooltip.vue';
+import BmsHeader from '@/components/layout/BmsHeader.vue';
+import BmsModal from '@/components/layout/BmsModal.vue';
+import UiPopoverMenu from '@/components/layout/UiPopoverMenu.vue';
+import BmsTenantSwitcher from '@/components/navigation/BmsTenantSwitcher.vue';
+import { Tenant } from '@/models';
+import { useNotifications } from '@/plugins/notifications';
+import { ref } from 'vue';
+
+const isModalOpen = ref(false);
+const { success, error } = useNotifications();
+
+const onClick = () => {
+  isModalOpen.value = true;
+  success('toto');
+};
+
+const tenants: Tenant[] = [{ id: '1', information: '1', label: 'Tenant 1' }];
+</script>
+
+<template>
+  <BmsTooltip
+    :tooltip-text="'hello hello hello hello hello hello hello hello hello hello hello hello hello hello'"
+  >
+    <BmsButton @click="onClick">Hello</BmsButton>
+  </BmsTooltip>
+  <BmsTenantSwitcher
+    :tenants="tenants"
+    :current-tenant="null"
+    select-tenant-label="Coucou"
+    select-tenant-placeholder="toto"
+  />
+
+  <BmsHeader> fixed header</BmsHeader>
+
+  <BmsModal v-model="isModalOpen"> Ouvrir la modale </BmsModal>
+</template>