@ouestfrance/sipa-bms-ui 8.2.0 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.2.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.16",
-    "@storybook/addon-links": "9.0.16",
-    "@storybook/vue3-vite": "9.0.16",
+    "@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": "^7.0.3",
-    "cy2": "4.0.9",
-    "cypress": "14.5.1",
+    "cross-env": "^10.0.0",
+    "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.6",
-    "start-server-and-test": "2.0.12",
-    "storybook": "9.0.16",
-    "storybook-addon-pseudo-states": "9.0.16",
-    "storybook-vue3-router": "^5.0.0",
+    "semantic-release": "24.2.7",
+    "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.3",
+    "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.1"
+    "vue-tsc": "3.0.5"
   },
   "files": [
     "dist",
@@ -119,8 +118,5 @@
   },
   "dependencies": {
     "msw": "^2.3.1"
-  },
-  "overrides": {
-    "storybook": "$storybook"
   }
 }

package/src/assets/scss/global-variables.scss

@@ -38,7 +38,7 @@
     --bms-red-10: #f9eaeb;
 
     --bms-white: #fcfcfc;
-    --bms-background-color: #f6f6f8;
+    --bms-background-color: #f8fafd;
     --bms-border-radius: 4px;
     --bms-border-radius-large: 8px;
     --bms-border-radius-xlarge: 16px;

package/src/components/button/UiButton.stories.js

@@ -10,7 +10,14 @@ import {
 } from 'lucide-vue-next';
 import { vueRouter } from 'storybook-vue3-router';
 
+import template from '@/documentation/template_internal_component.mdx';
+
 export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
   title: 'Composants/button/UiButton',
   component: UiButton,
   argTypes: {

package/src/components/feedback/BmsBadge.stories.js

@@ -1,8 +1,7 @@
 import BmsBadge from './BmsBadge.vue';
-import { StatusType } from '../../models';
 
 export default {
-  title: 'Composants/feedback/BmsBadge',
+  title: 'Composants/feedback/Badge',
   component: BmsBadge,
 };
 

package/src/components/feedback/BmsTooltip.stories.js

@@ -1,9 +1,8 @@
 import BmsTooltip from './BmsTooltip.vue';
 import BmsSection from '../layout/BmsSection.vue';
-import { TooltipDirection } from '../../models';
 
 export default {
-  title: 'Composants/feedback/BmsTooltip',
+  title: 'Composants/feedback/Tooltip',
   component: BmsTooltip,
 };
 

package/src/components/feedback/UiTooltip.stories.js

@@ -1,6 +1,12 @@
 import UiTooltip from './UiTooltip.vue';
+import template from '@/documentation/template_internal_component.mdx';
 
 export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
   title: 'Composants/feedback/UiTooltip',
   component: UiTooltip,
 };

package/src/components/form/BmsInputToggle.stories.js

@@ -9,7 +9,7 @@ export default {
       page: template,
     },
   },
-  title: 'Composants/form/BmsInputToggle',
+  title: 'Composants/form/InputToggle',
   component: BmsInputToggle,
 };
 

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/form/UiBmsInputCheckbox.stories.js

@@ -9,7 +9,7 @@ export default {
       page: template,
     },
   },
-  title: 'Composants/form/BmsInputCheckbox/Ui',
+  title: 'Composants/form/UiBmsInputCheckbox',
   component: UiBmsInputCheckbox,
 };
 

package/src/components/form/UiBmsSwitch.stories.js

@@ -1,8 +1,13 @@
 import UiBmsSwitch from '@/components/form/UiBmsSwitch.vue';
 
-import template from '@/documentation/template_field_dependency.mdx';
+import template from '@/documentation/template_internal_component.mdx';
 
 export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
   parameters: {
     docs: {
       page: template,

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/layout/BmsForm.stories.js

@@ -1,7 +1,7 @@
 import BmsForm from '@/components/layout/BmsForm.vue';
 
 export default {
-  title: 'Composants/layout/BmsForm',
+  title: 'Composants/layout/Form',
   component: BmsForm,
 };
 

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

@@ -4,7 +4,7 @@ import { Flower } from 'lucide-vue-next';
 
 export default {
   components: { BmsHeaderTitle },
-  title: 'Composants/layout/BmsHeaderTitle',
+  title: 'Composants/layout/HeaderTitle',
   component: BmsHeaderTitle,
 };
 

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/navigation/BmsShortLinkMenu.stories.js

@@ -1,7 +1,7 @@
 import BmsShortLinkMenu from '@/components/navigation/BmsShortLinkMenu.vue';
 
 export default {
-  title: 'Composants/navigation/BmsShortLinkMenu',
+  title: 'Composants/navigation/ShortLinkMenu',
   component: BmsShortLinkMenu,
   argTypes: {},
 };

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

@@ -1,8 +1,14 @@
 import UiMenuItem from '@/components/navigation/UiMenuItem.vue';
 import { Activity } from 'lucide-vue-next';
 import { vueRouter } from 'storybook-vue3-router';
+import template from '@/documentation/template_internal_component.mdx';
 
 export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
   title: 'Composants/navigation/MenuItem',
   component: UiMenuItem,
   decorators: [

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

@@ -1,8 +1,14 @@
 import UiMenuItem from '@/components/navigation/UiMenuItem.vue';
 import { ShieldAlert, ShieldCheck, ShieldOff } from 'lucide-vue-next';
 import { StatusType } from '../../models';
+import template from '@/documentation/template_internal_component.mdx';
 
 export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
   title: 'Composants/navigation/MenuItem',
   component: UiMenuItem,
   argTypes: {},

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

@@ -1,7 +1,14 @@
 import UiTab from '@/components/navigation/UiTab.vue';
 import { within } from 'storybook/test';
 
+import template from '@/documentation/template_internal_component.mdx';
+
 export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
   title: 'Composants/navigation/UiTab',
   component: UiTab,
   argTypes: {

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

@@ -1,6 +1,12 @@
 import UiTenantSwitcher from './UiTenantSwitcher.vue';
+import template from '@/documentation/template_internal_component.mdx';
 
 export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
   title: 'Composants/navigation/UiTenantSwitcher',
   component: UiTenantSwitcher,
 };

package/src/components/table/UiBmsTable.stories.js

@@ -2,8 +2,15 @@ import UiBmsTable from '@/components/table/UiBmsTable.vue';
 import { Save, Trash } from 'lucide-vue-next';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
 
+import template from '@/documentation/template_internal_component.mdx';
+
 export default {
-  title: 'Composants/table/UiTable',
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/table/UiBmsTable',
   component: UiBmsTable,
 };