@ouestfrance/sipa-bms-ui 8.3.0 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.3.0",
+  "version": "8.4.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -36,54 +36,53 @@
     "@commitlint/config-conventional": "19.8.1",
     "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.0",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-docs": "9.0.17",
-    "@storybook/addon-links": "9.0.17",
-    "@storybook/vue3-vite": "9.0.17",
+    "@storybook/addon-docs": "9.1.2",
+    "@storybook/addon-links": "9.1.2",
+    "@storybook/vue3-vite": "9.1.2",
     "@types/lodash": "4.17.20",
     "@types/uuid": "10.0.0",
-    "@vitejs/plugin-vue": "6.0.0",
+    "@vitejs/plugin-vue": "6.0.1",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "13.5.0",
+    "@vueuse/core": "13.6.0",
     "@vueuse/motion": "^3.0.0",
-    "axios": "1.10.0",
+    "axios": "1.11.0",
     "blob-util": "^2.0.2",
-    "chromatic": "13.1.2",
+    "chromatic": "13.1.3",
     "codemirror": "6.0.2",
     "cors": "^2.8.5",
     "cross-env": "^10.0.0",
-    "cy2": "4.0.9",
-    "cypress": "14.5.2",
+    "cy2": "^4.0.0",
+    "cypress": "14.5.3",
     "express": "^5.0.0",
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "keycloak-js": "26.1.2",
-    "lint-staged": "16.1.2",
+    "lint-staged": "16.1.3",
     "lodash": "4.17.21",
-    "lucide-vue-next": "0.525.0",
+    "lucide-vue-next": "0.536.0",
     "msw-storybook-addon": "^2.0.3",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.6.2",
     "sass": "1.89.2",
     "semantic-release": "24.2.7",
-    "start-server-and-test": "2.0.12",
-    "storybook": "9.0.17",
-    "storybook-addon-pseudo-states": "9.0.17",
-    "storybook-vue3-router": "^5.0.0",
+    "start-server-and-test": "2.0.13",
+    "storybook": "9.1.2",
+    "storybook-addon-pseudo-states": "9.1.2",
+    "storybook-vue3-router": "^6.0.2",
     "typescript": "5.2.2",
     "uuid": "11.1.0",
-    "vite": "7.0.5",
+    "vite": "7.0.6",
     "vite-plugin-dts": "^4.1.0",
     "vite-plugin-mkcert": "1.17.8",
     "vite-plugin-pages": "0.33.1",
     "vite-svg-loader": "5.1.0",
     "vitest": "3.2.4",
-    "vue": "3.5.17",
+    "vue": "3.5.18",
     "vue-codemirror": "6.1.1",
     "vue-loader": "17.4.2",
     "vue-router": "4.5.1",
-    "vue-tsc": "3.0.3"
+    "vue-tsc": "3.0.5"
   },
   "files": [
     "dist",
@@ -119,8 +118,5 @@
   },
   "dependencies": {
     "msw": "^2.3.1"
-  },
-  "overrides": {
-    "storybook": "$storybook"
   }
 }

package/src/components/form/RawAutocomplete.spec.ts

@@ -27,10 +27,11 @@ const factory = (props?: PropsAndModel) => {
   });
 
   const inputElement = wrapper.get('input');
-  return { wrapper, inputElement };
+  const menu = wrapper.get('[data-testid="autocomplete-menu"]');
+  return { wrapper, inputElement, menu };
 };
 
-describe('BmsAutocomplete', () => {
+describe('RawAutocomplete', () => {
   it('should mount component correctly', async () => {
     const { wrapper } = factory();
 
@@ -40,8 +41,7 @@ describe('BmsAutocomplete', () => {
   });
 
   it('should show options on click', async () => {
-    const { wrapper, inputElement } = factory();
-    const menu = wrapper.get('[data-testid="autocomplete-menu"]');
+    const { wrapper, inputElement, menu } = factory();
 
     expect(menu.isVisible()).toBeFalsy();
     await inputElement.trigger('input');
@@ -58,8 +58,7 @@ describe('BmsAutocomplete', () => {
       modelValue: 'i',
     } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');
-    wrapper.setProps({ modelValue: 'u' });
-    await nextTick();
+    await wrapper.setProps({ modelValue: 'u' });
     expect(inputElement.element.value).toStrictEqual('tutu');
   });
 
@@ -68,8 +67,7 @@ describe('BmsAutocomplete', () => {
       modelValue: 'i',
     } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');
-    wrapper.setProps({ modelValue: 'not_found' });
-    await nextTick();
+    await wrapper.setProps({ modelValue: 'not_found' });
     expect(inputElement.element.value).toStrictEqual('');
   });
 
@@ -78,11 +76,33 @@ describe('BmsAutocomplete', () => {
       modelValue: 'i',
     } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');
-    wrapper.setProps({ modelValue: undefined });
-    await nextTick();
+    await wrapper.setProps({ modelValue: undefined });
     expect(inputElement.element.value).toStrictEqual('titi');
   });
 
+  it('should emit modelValue if clicks on option', async () => {
+    const { wrapper, inputElement, menu } = factory({
+      modelValue: null,
+    } as PropsAndModel);
+    await inputElement.trigger('click');
+    await menu.find('[data-testid="i"]').trigger('click');
+    expect(wrapper.emitted()['select']).toStrictEqual([
+      [{ label: 'titi', value: 'i' }],
+    ]);
+    expect(wrapper.emitted()['update:modelValue']).toStrictEqual([['i']]);
+  });
+
+  it('should reset modelValue if user removes text input', async () => {
+    const { wrapper, inputElement } = factory({
+      modelValue: 'i',
+    } as PropsAndModel);
+    expect(inputElement.element.value).toStrictEqual('titi');
+    inputElement.element.value = '';
+    await inputElement.trigger('input');
+    expect(inputElement.element.value).toStrictEqual('');
+    expect(wrapper.emitted()['update:modelValue']).toStrictEqual([[null]]);
+  });
+
   it('should emit event on option selection', async () => {
     const { wrapper, inputElement } = factory();
     const titi = wrapper.get('[data-testid="i"]');

package/src/components/form/RawAutocomplete.vue

@@ -150,6 +150,9 @@ watch(
 );
 const onInput = () => {
   isInputFocused.value = true;
+  if (inputText.value === '') {
+    clearInput();
+  }
 };
 
 const setFocus = () => {

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

@@ -1,8 +1,17 @@
 import BmsCard from '@/components/layout/BmsCard.vue';
+import { vueRouter } from 'storybook-vue3-router';
 
 export default {
   title: 'Composants/layout/Card',
   component: BmsCard,
+  decorators: [
+    vueRouter([
+      {
+        name: 'firstRoute',
+        path: '/toto',
+      },
+    ]),
+  ],
 };
 
 const Template = (args) => ({
@@ -21,6 +30,11 @@ const Template = (args) => ({
   `,
 });
 
+export const WithLink = Template.bind({});
+WithLink.args = {
+  to: '/toto',
+};
+
 export const Default = Template.bind({});
 Default.args = {};
 

package/src/components/layout/BmsCard.vue

@@ -7,7 +7,12 @@
       :class="{ animated, hasAction: !!$slots.action }"
     >
       <div class="card__body__content">
-        <slot></slot>
+        <BmsLink class="card__body__content__link" v-if="to" :to="to">
+          <slot></slot>
+        </BmsLink>
+        <template v-else>
+          <slot></slot>
+        </template>
       </div>
       <div class="card__body__action" v-if="!!$slots.action">
         <slot name="action"></slot>
@@ -19,11 +24,13 @@
 <script lang="ts" setup>
 import { StatusType } from '@/models';
 import { ref } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+import BmsLink from '../navigation/BmsLink.vue';
 
 const props = withDefaults(
   defineProps<{
     animated?: boolean;
-
+    to?: RouteLocationRaw;
     type?: StatusType;
   }>(),
   {
@@ -105,6 +112,11 @@ window.addEventListener('mousemove', onMouseMove);
       background-color: var(--summary-card-background-color);
       backdrop-filter: blur(40px);
       color: var(--summary-card-color);
+
+      &__link {
+        color: var(--summary-card-color);
+        text-decoration: none;
+      }
     }
 
     &__action {

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

@@ -0,0 +1,113 @@
+import BmsFixedMenu from '@/components/navigation/BmsFixedMenu.vue';
+import { Activity, ArrowBigDown, Globe, User } from 'lucide-vue-next';
+import { vueRouter } from 'storybook-vue3-router';
+
+export default {
+  title: 'Composants/navigation/FixedMenu',
+  component: BmsFixedMenu,
+  argTypes: {
+    items: {},
+  },
+  decorators: [
+    vueRouter([
+      {
+        name: 'home',
+        path: '/',
+      },
+      {
+        name: 'activity',
+        path: '/activity',
+      },
+      {
+        name: 'users',
+        path: '/users',
+      },
+      {
+        name: 'thirdRoute',
+        path: '/tutu',
+      },
+    ]),
+  ],
+};
+
+const Template = (args) => ({
+  components: {
+    BmsFixedMenu,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsFixedMenu v-bind="args">
+      <template v-if="args.additionalSlot" #additional>Additional</template>
+      <template v-if="args.footerSlot" #footer>Footer</template>
+    </BmsFixedMenu>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    {
+      label: 'Activity',
+      link: '/activity',
+      icon: Activity,
+    },
+    {
+      label: 'Users',
+      link: '/users',
+      icon: User,
+    },
+    {
+      label: 'Parent',
+      items: [
+        {
+          label: 'tata',
+          link: '/tata',
+          icon: Globe,
+        },
+        {
+          label: 'tutu',
+          link: '/tutu',
+        },
+      ],
+    },
+  ],
+  activeLink: '/',
+};
+
+export const WithActiveLink = Template.bind({});
+WithActiveLink.args = {
+  items: [
+    {
+      label: 'Activity',
+      link: '/activity',
+      icon: Activity,
+    },
+    {
+      label: 'Users',
+      link: '/users',
+      icon: User,
+    },
+  ],
+  activeLink: '/activity',
+};
+
+export const WithSlots = Template.bind({});
+WithSlots.args = {
+  items: [
+    {
+      label: 'Activity',
+      link: '/activity',
+      icon: Activity,
+    },
+    {
+      label: 'Users',
+      link: '/users',
+      icon: User,
+    },
+  ],
+  activeLink: '/users',
+  additionalSlot: true,
+  footerSlot: true,
+};

package/src/components/navigation/BmsFixedMenu.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="menu__container">
+    <div class="menu__top">
+      <slot name="top"></slot>
+    </div>
+
+    <BmsMenuNav :items="items" :active-link="activeLink">
+      <template #additional>
+        <slot name="additional"></slot>
+      </template>
+    </BmsMenuNav>
+
+    <div class="menu__copyright">
+      <slot name="footer">
+        <p class="menu__copyright-madein">Made with ♥ by BMS</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import { MenuItem, ParentMenuItem } from '@/models';
+import BmsMenuNav from './BmsMenuNav.vue';
+
+interface Props {
+  items: (MenuItem | ParentMenuItem)[];
+  activeLink: RouteLocationNormalizedLoaded;
+}
+defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+.menu {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background: var(--bms-white);
+    border-right: 1px solid var(--bms-grey-10);
+    padding: 0;
+
+    nav {
+      scrollbar-width: none;
+      padding: 0;
+      overflow-x: hidden;
+      max-width: calc(var(--bms-menu-width) + 5px);
+
+      :deep(ul) {
+        li {
+          width: var(--bms-menu-width);
+        }
+      }
+    }
+  }
+
+  &__top {
+    margin: 0.5em;
+  }
+
+  &__copyright {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80px;
+    overflow-x: hidden;
+  }
+}
+</style>

package/src/components/navigation/BmsMenuNav.vue

@@ -92,7 +92,11 @@ const isLinkRecognized = (link: RouteLocationRaw): boolean => {
   if ((link as RouteLocationPathRaw).path) {
     return (link as RouteLocationPathRaw).path === props.activeLink.path;
   }
-  return link === props.activeLink.name || link === props.activeLink.path;
+  return (
+    link === props.activeLink.name ||
+    link === props.activeLink.path ||
+    link === props.activeLink
+  );
 };
 
 const isItemActive = (menuItem: MenuItem | ParentMenuItem): boolean => {

package/src/components/table/UiBmsTableRow.vue

@@ -28,9 +28,10 @@
         :key="cell.key"
       >
         <div v-if="isChildElement" class="bms-table__row__cell--child-element">
-          <div class="bms-table__row__cell--child-element__icon">
-            <CornerDownRight v-if="index === 0" />
-          </div>
+          <CornerDownRight
+            v-if="index === 0"
+            class="bms-table__row__cell--child-element__icon"
+          />
           <slot
             :name="cell.key"
             :row="item.childElement"
@@ -141,7 +142,6 @@ const getAlignClass = (header: TableHeader) => {
       align-items: flex-end;
       &__icon {
         display: flex;
-        min-width: 1em;
         margin-right: 1em;
       }
     }

package/src/index.ts

@@ -47,6 +47,7 @@ import BmsStepper from './components/layout/BmsStepper.vue';
 
 import BmsBackButton from './components/navigation/BmsBackButton.vue';
 import BmsBreadcrumb from './components/navigation/BmsBreadcrumb.vue';
+import BmsFixedMenu from './components/navigation/BmsFixedMenu.vue';
 import BmsLink from './components/navigation/BmsLink.vue';
 import BmsMenu from './components/navigation/BmsMenu.vue';
 import BmsMenuNav from './components/navigation/BmsMenuNav.vue';
@@ -115,6 +116,7 @@ export const createBmsUi = () => ({
 
     app.component('BmsBackButton', BmsBackButton);
     app.component('BmsBreadcrumb', BmsBreadcrumb);
+    app.component('BmsFixedMenu', BmsFixedMenu);
     app.component('BmsLink', BmsLink);
     app.component('BmsMenu', BmsMenu);
     app.component('BmsMenuNav', BmsMenuNav);
@@ -189,6 +191,7 @@ export {
   BmsStepper,
   BmsBackButton,
   BmsBreadcrumb,
+  BmsFixedMenu,
   BmsLink,
   BmsMenu,
   BmsMenuNav,

package/src/showroom/pages/autocomplete.vue

@@ -1,5 +1,9 @@
 <template>
   <BmsBackButton :fallback="{ path: '/' }" />
+  <br />
+  <BmsButton @click="inputLabelValue = '1'">Set value to '1'</BmsButton>
+  <br />
+  Valeur: {{ inputLabelValue }}
   <BmsAutocomplete
     label="Autocomplete avec label/value"
     :options="optionsLabelValue"
@@ -8,22 +12,20 @@
     @add-new-option="onAddNewOption"
   />
 
-  Valeur: {{ inputLabelValue }}
-
+  Valeur: {{ inputValueIcon }}
   <BmsAutocomplete
     label="Autocomplete avec icones"
     :options="optionsIcon"
     v-model="inputValueIcon"
     @select="(o) => console.log('select', o.value)"
   />
-  Valeur: {{ inputValueIcon }}
 
+  Valeur: {{ inputText }}
   <BmsAutocomplete
     label="Autocomplete avec tableau de strings"
     :options="optionsText"
     v-model="inputText"
   />
-  Valeur: {{ inputText }}
 </template>
 
 <script setup lang="ts">
@@ -31,6 +33,7 @@ import { BmsAutocomplete, BmsBackButton } from '@/index';
 import { Heart, Cat } from 'lucide-vue-next';
 import { range } from 'lodash';
 import { ref } from 'vue';
+import BmsButton from '@/components/button/BmsButton.vue';
 
 const optionsLabelValue = ref(
   range(0, 30).map((i) =>