@ouestfrance/sipa-bms-ui 8.13.0 → 8.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.13.0",
+  "version": "8.14.1",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -33,13 +33,13 @@
     "@chromatic-com/storybook": "^4.0.0",
     "@codemirror/lang-html": "6.4.11",
     "@codemirror/lang-json": "6.0.2",
-    "@commitlint/cli": "19.8.1",
-    "@commitlint/config-conventional": "19.8.1",
+    "@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.13",
-    "@storybook/addon-links": "9.1.13",
-    "@storybook/vue3-vite": "9.1.13",
+    "@storybook/addon-docs": "9.1.15",
+    "@storybook/addon-links": "9.1.15",
+    "@storybook/vue3-vite": "9.1.15",
     "@types/lodash": "4.17.20",
     "@types/uuid": "11.0.0",
     "@vitejs/plugin-vue": "6.0.1",
@@ -48,7 +48,7 @@
     "@vueuse/motion": "^3.0.0",
     "axios": "1.12.2",
     "blob-util": "^2.0.2",
-    "chromatic": "13.3.0",
+    "chromatic": "13.3.2",
     "codemirror": "6.0.2",
     "cors": "^2.8.5",
     "cross-env": "^10.0.0",
@@ -58,18 +58,18 @@
     "husky": "9.1.7",
     "jsdom": "27.0.1",
     "keycloak-js": "26.1.2",
-    "lint-staged": "16.2.4",
+    "lint-staged": "16.2.6",
     "lodash": "4.17.21",
-    "lucide-vue-next": "0.546.0",
+    "lucide-vue-next": "0.548.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": "24.2.9",
+    "semantic-release": "25.0.1",
     "start-server-and-test": "2.1.2",
-    "storybook": "9.1.13",
-    "storybook-addon-pseudo-states": "9.1.13",
+    "storybook": "9.1.15",
+    "storybook-addon-pseudo-states": "9.1.15",
     "storybook-vue3-router": "^6.0.2",
     "typescript": "5.2.2",
     "uuid": "13.0.0",
@@ -102,8 +102,7 @@
     "./theming": "./src/assets/scss/_conf.scss"
   },
   "volta": {
-    "node": "22.13.0",
-    "npm": "10.2.4"
+    "node": "22.14.0"
   },
   "engines": {
     "node": ">=14 <=22",

package/src/components/navigation/BmsFixedMenu.stories.js

@@ -1,4 +1,5 @@
 import BmsFixedMenu from '@/components/navigation/BmsFixedMenu.vue';
+import BmsBadge from '@/components/feedback/BmsBadge.vue';
 import { Activity, ArrowBigDown, Globe, User } from 'lucide-vue-next';
 import { vueRouter } from 'storybook-vue3-router';
 
@@ -33,6 +34,7 @@ export default {
 const Template = (args) => ({
   components: {
     BmsFixedMenu,
+    BmsBadge,
   },
   setup() {
     return { args };
@@ -40,6 +42,9 @@ const Template = (args) => ({
   template: `
     <BmsFixedMenu v-bind="args">
       <template v-if="args.additionalSlot" #additional>Additional</template>
+      <template v-if="args.additionalSlot" #icon-end="{ item }" >
+        <BmsBadge :pending="item.badgeCount"></BmsBadge>
+      </template>
       <template v-if="args.footerSlot" #footer>Footer</template>
     </BmsFixedMenu>
   `,
@@ -100,11 +105,13 @@ WithSlots.args = {
       label: 'Activity',
       link: '/activity',
       icon: Activity,
+      badgeCount: 1,
     },
     {
       label: 'Users',
       link: '/users',
       icon: User,
+      badgeCount: 0,
     },
   ],
   activeLink: '/users',

package/src/components/navigation/BmsFixedMenu.vue

@@ -8,6 +8,9 @@
       <template #additional>
         <slot name="additional"></slot>
       </template>
+      <template #icon-end="{ item }">
+        <slot name="icon-end" :item="item"></slot>
+      </template>
     </BmsMenuNav>
 
     <div class="menu__copyright">

package/src/components/navigation/BmsMenuNav.stories.js

@@ -1,4 +1,5 @@
 import BmsMenuNav from '@/components/navigation/BmsMenuNav.vue';
+import BmsBadge from '@/components/feedback/BmsBadge.vue';
 import { Activity, BookOpen, Settings } from 'lucide-vue-next';
 import { StatusType } from '../../models';
 
@@ -13,6 +14,7 @@ export default {
 const Template = (args) => ({
   components: {
     BmsMenuNav,
+    BmsBadge,
   },
   setup() {
     return { args };
@@ -20,6 +22,9 @@ const Template = (args) => ({
   template: `
     <BmsMenuNav v-bind="args">
       <template v-if="args.additionalSlot" #additional>Additional</template>
+      <template v-if="args.additionalSlot" #icon-end="{ item }" >
+        <BmsBadge :pending="item.badgeCount"></BmsBadge>
+      </template>
     </BmsMenuNav>
   `,
 });
@@ -158,6 +163,7 @@ WithAdditionalSlot.args = {
       link: '/toto',
       icon: Activity,
       id: 'toto',
+      badgeCount: 5,
     },
     {
       label: 'titi',

package/src/components/navigation/BmsMenuNav.vue

@@ -36,7 +36,11 @@
                   :item="subItem as MenuItem"
                   :active="isItemActive(subItem as MenuItem)"
                   @click="clickItem(subItem)"
-                />
+                >
+                  <template #icon-end>
+                    <slot name="icon-end" :item="item"> </slot>
+                  </template>
+                </UiMenuItem>
               </li>
             </ul>
           </Transition>
@@ -46,7 +50,11 @@
           :item="item as MenuItem"
           :active="isItemActive(item as MenuItem)"
           @click="clickItem(item)"
-        />
+        >
+          <template #icon-end>
+            <slot name="icon-end" :item="item"> </slot>
+          </template>
+        </UiMenuItem>
       </li>
     </ul>
     <div class="additional">
@@ -67,6 +75,7 @@ import {
 import { ChevronDown, ChevronUp, Settings } from 'lucide-vue-next';
 import UiMenuItem from './UiMenuItem.vue';
 import BmsLink from './BmsLink.vue';
+import BmsBadge from '../feedback/BmsBadge.vue';
 
 interface Props {
   items: (MenuItem | ParentMenuItem)[];

package/src/components/navigation/UiMenuItem.vue

@@ -1,8 +1,11 @@
 <template>
   <BmsLink :to="(item as MenuItem).link" :target="target" :classes="classes">
     <span class="bar">&nbsp;</span>
-    <component v-if="item.icon" :is="item.icon" :size="20" />
-    <span class="label"> {{ item.label }}</span>
+    <component v-if="item.icon" :is="item.icon" :size="20" class="icon" />
+    <div class="label">
+      {{ item.label }}
+      <slot name="icon-end" :item="item"></slot>
+    </div>
   </BmsLink>
 </template>
 
@@ -111,6 +114,9 @@ const classes = computed(() => {
   .label {
     padding: 16px 16px 16px 0;
     line-height: 16px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
   }
 }
 </style>