@ouestfrance/sipa-bms-ui 8.24.1 → 8.24.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.24.1",
+  "version": "8.24.3",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -36,16 +36,16 @@
     "@commitlint/cli": "20.3.1",
     "@commitlint/config-conventional": "20.3.1",
     "@mdx-js/react": "3.1.1",
-    "@storybook/addon-docs": "10.1.11",
-    "@storybook/addon-links": "10.1.11",
-    "@storybook/vue3-vite": "10.1.11",
+    "@storybook/addon-docs": "10.2.0",
+    "@storybook/addon-links": "10.2.0",
+    "@storybook/vue3-vite": "10.2.0",
     "@types/lodash": "4.17.23",
     "@types/uuid": "11.0.0",
     "@vitejs/plugin-vue": "6.0.3",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "13.9.0",
     "@vueuse/motion": "^3.0.0",
-    "axios": "1.13.2",
+    "axios": "1.13.3",
     "blob-util": "^2.0.2",
     "chromatic": "13.3.5",
     "codemirror": "6.0.2",
@@ -58,19 +58,19 @@
     "jsdom": "27.4.0",
     "keycloak-js": "26.1.2",
     "lint-staged": "16.2.7",
-    "lodash": "4.17.21",
-    "lucide-vue-next": "0.562.0",
+    "lodash": "4.17.23",
+    "lucide-vue-next": "0.563.0",
     "msw": "^2.12.4",
     "msw-storybook-addon": "^2.0.3",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
-    "prettier": "3.8.0",
+    "prettier": "3.8.1",
     "remark-gfm": "^4.0.1",
-    "sass": "1.97.2",
+    "sass": "1.97.3",
     "semantic-release": "25.0.2",
     "start-server-and-test": "2.1.3",
-    "storybook": "10.1.11",
-    "storybook-addon-pseudo-states": "10.1.11",
+    "storybook": "10.2.0",
+    "storybook-addon-pseudo-states": "10.2.0",
     "storybook-addon-tag-badges": "^3.0.2",
     "storybook-vue3-router": "^7.0.0",
     "typescript": "5.2.2",
@@ -81,11 +81,11 @@
     "vite-plugin-pages": "0.33.2",
     "vite-svg-loader": "5.1.0",
     "vitest": "3.2.4",
-    "vue": "3.5.26",
+    "vue": "3.5.27",
     "vue-codemirror": "6.1.1",
     "vue-loader": "17.4.2",
     "vue-router": "4.6.4",
-    "vue-tsc": "3.2.2"
+    "vue-tsc": "3.2.3"
   },
   "files": [
     "dist",

package/src/components/form/BmsAutocomplete.vue

@@ -1,6 +1,7 @@
 <template>
   <RawAutocomplete
     v-model="modelValue"
+    ref="autocompleteElement"
     :options="optionsLabelValue"
     :open="open"
     :label="label"
@@ -42,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import RawAutocomplete from './RawAutocomplete.vue';
 import { InputOption } from '@/models';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
@@ -69,6 +70,8 @@ const emits = defineEmits<{
   input: [e: InputEvent];
 }>();
 
+const autocompleteElement = useTemplateRef('autocompleteElement');
+
 const currentOptionIcon = computed(() => {
   const option = props.options.find(
     (o) => typeof o !== 'string' && o.value === modelValue.value,
@@ -84,6 +87,10 @@ const optionsLabelValue = computed(() =>
     ? props.options.map((o) => ({ label: o, value: o }) as InputOption)
     : (props.options as InputOption[]),
 );
+
+defineExpose({
+  setFocus: () => autocompleteElement.value?.setFocus(),
+});
 </script>
 
 <style scoped lang="scss">

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

@@ -39,8 +39,18 @@ const Template = (args) => ({
 export const Default = Template.bind({});
 Default.args = {
   title: 'Title',
-  tabs: [{ name: 'Titi', id: 'titi' }, { name: 'Toto' }],
+  tabs: [
+    { name: 'Titi', id: 'titi' },
+    { name: 'Toto', id: 'toto' },
+  ],
 };
+
+export const DefaultWithoutId = Template.bind({});
+DefaultWithoutId.args = {
+  title: 'Title',
+  tabs: [{ name: 'Titi' }, { name: 'Toto' }],
+};
+
 export const WithSelectedTabId = Template.bind({});
 WithSelectedTabId.args = {
   title: 'Title',

package/src/components/navigation/BmsTabs.vue

@@ -1,14 +1,22 @@
 <template>
   <UiTabs
     :title="title"
-    :tabs="tabs"
-    :initial-tab-id="selectedTabId"
-    @click="$emits('click', $event)"
+    :tabs="computedTabs"
+    :selected-tab-id="selectedTabId"
+    @click="onClick"
   >
     <template v-if="needRouterEngine" #router="{ tab }">
-      <router-link class="tab" :to="getTabTarget(tab)">{{
-        tab.name
-      }}</router-link>
+      <router-link
+        class="tab"
+        :to="getTabTarget(tab)"
+        :class="{
+          active: isTabSelected(tab, selectedTabId),
+          error: tab.error,
+          disabled: tab.disabled,
+        }"
+        @click="onClick(tab)"
+        >{{ tab.name }}</router-link
+      >
     </template>
   </UiTabs>
 </template>
@@ -16,9 +24,13 @@
 <script setup lang="ts">
 import { Tab } from '@/models/tab.model';
 import UiTabs from './UiTabs.vue';
-import { computed, ComputedRef, onMounted, ref, watch } from 'vue';
-import { RouteLocation, useRouter } from 'vue-router';
-import { getTabId } from '@/helpers/tab.helper';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import {
+  getTabId,
+  isTabSelected,
+  isTabSelectedByRoute,
+} from '@/helpers/tab.helper';
 
 const { currentRoute } = useRouter();
 
@@ -28,6 +40,8 @@ const props = defineProps<{
   initialTabId?: string;
 }>();
 
+const selectedTabId = ref<string | null>(null);
+
 const getTabTarget = (tab: Tab) => {
   return tab.routePath ? { path: tab.routePath } : { name: tab.routeName };
 };
@@ -44,23 +58,38 @@ const needRouterEngine = computed(() => {
   );
 });
 
-const selectedTabId: ComputedRef<string | null> = computed(() => {
+const onClick = (tab: Tab) => {
+  selectedTabId.value = tab.id;
+  $emits('click', tab);
+};
+
+const computedTabs = computed(() => {
+  return props.tabs.map((tab) => {
+    return { ...tab, id: getTabId(tab) }; // retro compatibility for id
+  });
+});
+
+const computedInitialTabId = () => {
   if (needRouterEngine.value) {
     const selectedTab =
-      props.tabs.find((t) => isTabSelected(t, currentRoute.value)) || null;
-    return selectedTab ? getTabId(selectedTab) : null;
+      props.tabs.find((t) => isTabSelectedByRoute(t, currentRoute.value)) ||
+      null;
+    selectedTabId.value = selectedTab ? selectedTab.id : null;
   } else if (props.initialTabId) {
-    return props.initialTabId;
+    selectedTabId.value = props.initialTabId;
   } else {
-    return null;
+    selectedTabId.value = null;
   }
+};
+
+onMounted(() => {
+  computedInitialTabId();
 });
 
-const isTabSelected = (tab: Tab, currentRoute: RouteLocation) =>
-  tab.routePath
-    ? currentRoute.path.includes(tab.routePath)
-    : tab.routeName
-      ? !!currentRoute.name &&
-        (currentRoute.name as string).includes(tab.routeName)
-      : false;
+watch(
+  () => props.initialTabId,
+  () => {
+    computedInitialTabId();
+  },
+);
 </script>

package/src/components/navigation/UiTab.vue

@@ -1,17 +1,24 @@
 <template>
-  <span
-    data-testid="tab"
-    class="tab"
-    :class="{ active: isTabSelected, error: tab.error, disabled: tab.disabled }"
-  >
-    <slot name="router" :tab="tab">{{ tab.name }}</slot>
-  </span>
+  <slot name="router" :tab="tab">
+    <span
+      data-testid="tab"
+      class="tab"
+      :class="{
+        active: isActive,
+        error: tab.error,
+        disabled: tab.disabled,
+      }"
+      @click="emits('click', $event)"
+    >
+      {{ tab.name }}
+    </span>
+  </slot>
 </template>
 
 <script lang="ts" setup>
 import { Tab } from '@/models/tab.model';
 import { computed, ComputedRef } from 'vue';
-import { getTabId } from '@/helpers/tab.helper';
+import { isTabSelected } from '@/helpers/tab.helper';
 
 const props = withDefaults(
   defineProps<{
@@ -21,14 +28,16 @@ const props = withDefaults(
   {},
 );
 
-const tabId = computed(() => getTabId(props.tab));
+const emits = defineEmits<{
+  (e: 'click', event: MouseEvent): void;
+}>();
 
-const isTabSelected: ComputedRef<boolean> = computed(
-  () => (tabId.value && tabId.value === props.selectedTabId) || false,
+const isActive: ComputedRef<boolean> = computed(() =>
+  isTabSelected(props.tab, props.selectedTabId),
 );
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .tab {
   --tab-border-color: transparent;
   --tab-color: var(--bms-font-color);
@@ -38,10 +47,10 @@ const isTabSelected: ComputedRef<boolean> = computed(
   border-bottom: 4px solid var(--tab-border-color);
   padding: 0 8px 16px 8px;
   cursor: pointer;
-  :deep(a) {
-    color: var(--tab-color);
-    text-decoration: none;
-  }
+  //:deep(a) {
+  //  color: var(--tab-color);
+  //  text-decoration: none;
+  //}
   &:hover,
   &__hover {
     --tab-border-color: var(--bms-main-50);

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

@@ -27,8 +27,12 @@ const Template = (args) => ({
   `,
 });
 
-export const Primary = Template.bind({});
-Primary.args = {
+export const Default = Template.bind({});
+Default.args = {
   title: 'Title',
-  tabs: [{ name: 'Titi', id: 'titi' }, { name: 'Toto' }],
+  tabs: [
+    { name: 'Titi', id: 'titi' },
+    { name: 'Toto', id: 'toto' },
+  ],
+  selectedTabId: null,
 };

package/src/components/navigation/UiTabs.vue

@@ -5,7 +5,7 @@
     </div>
     <UiTab
       v-for="tab in tabs"
-      :key="getTabId(tab)"
+      :key="tab.id"
       :selectedTabId="selectedTabId"
       :tab="tab"
       @click="onTabClick(tab)"
@@ -18,36 +18,20 @@
 <script setup lang="ts">
 import { Tab } from '@/models/tab.model';
 import UiTab from './UiTab.vue';
-import { computed, ComputedRef, onMounted, ref, watch } from 'vue';
-import { getTabId } from '@/helpers/tab.helper';
 
 const props = defineProps<{
   title: string;
   tabs: Tab[];
-  initialTabId?: string | null;
+  selectedTabId: string | null;
 }>();
 
-const selectedTabId = ref<string | null>(null);
-
-onMounted(() => {
-  selectedTabId.value = props.initialTabId || null;
-});
-
-watch(
-  () => props.initialTabId,
-  () => {
-    selectedTabId.value = props.initialTabId || null;
-  },
-);
-
 const $emits = defineEmits<{
   (e: 'click', value: any): void;
 }>();
 
 const onTabClick = (tab: Tab) => {
-  if (getTabId(tab) !== selectedTabId.value) {
+  if (tab.id !== props.selectedTabId) {
     $emits('click', tab);
-    selectedTabId.value = getTabId(tab);
   }
 };
 </script>

package/src/helpers/tab.helper.spec.ts

@@ -0,0 +1,87 @@
+import { isTabSelectedByRoute } from '@/helpers/tab.helper';
+import { Tab } from '@/models/tab.model';
+import { RouteLocation } from 'vue-router';
+import { test } from 'vitest';
+
+const createTab = (overrides: Partial<Tab> = {}): Tab => ({
+  id: 'tab-1',
+  name: 'Tab 1',
+  ...overrides,
+});
+
+const createRoute = (overrides: Partial<RouteLocation> = {}): RouteLocation =>
+  ({
+    path: '/default',
+    name: 'default',
+    ...overrides,
+  }) as RouteLocation;
+
+describe('tab.helper', () => {
+  describe('isTabSelectedByRoute', () => {
+    describe('with routePath', () => {
+      test.each([
+        ['/users', '/users', true],
+        ['/users', '/users/123', true],
+        ['/users', '/admin', false],
+        ['/users', '/admin/users', true],
+      ])(
+        'tab with routePath "%s" and currentRoute.path "%s" should return %s',
+        (routePath, path, expected) => {
+          const tab = createTab({ routePath });
+          const route = createRoute({ path });
+          expect(isTabSelectedByRoute(tab, route)).toBe(expected);
+        },
+      );
+    });
+
+    describe('with routeName (no routePath)', () => {
+      test.each([
+        ['users', 'users', true],
+        ['users', 'users-list', true],
+        ['users', 'admin', false],
+        ['users', 'admin-users', true],
+      ])(
+        'tab with routeName "%s" and currentRoute.name "%s" should return %s',
+        (routeName, name, expected) => {
+          const tab = createTab({ routeName });
+          const route = createRoute({ name });
+          expect(isTabSelectedByRoute(tab, route)).toBe(expected);
+        },
+      );
+
+      test('should return false when currentRoute.name is undefined', () => {
+        const tab = createTab({ routeName: 'users' });
+        const route = createRoute({ name: undefined });
+        expect(isTabSelectedByRoute(tab, route)).toBe(false);
+      });
+
+      test('should return false when currentRoute.name is null', () => {
+        const tab = createTab({ routeName: 'users' });
+        const route = createRoute({ name: null as unknown as string });
+        expect(isTabSelectedByRoute(tab, route)).toBe(false);
+      });
+    });
+
+    describe('without routePath and routeName', () => {
+      test('should return false', () => {
+        const tab = createTab();
+        const route = createRoute({ path: '/users', name: 'users' });
+        expect(isTabSelectedByRoute(tab, route)).toBe(false);
+      });
+    });
+
+    describe('routePath takes priority over routeName', () => {
+      test('should use routePath when both are defined', () => {
+        const tab = createTab({ routePath: '/admin', routeName: 'users' });
+        const route = createRoute({ path: '/admin', name: 'other' });
+        expect(isTabSelectedByRoute(tab, route)).toBe(true);
+      });
+
+      test('should not match routeName when routePath is defined but does not match', () => {
+        const tab = createTab({ routePath: '/admin', routeName: 'users' });
+        const route = createRoute({ path: '/other', name: 'users' });
+        expect(isTabSelectedByRoute(tab, route)).toBe(false);
+      });
+    });
+  });
+});

package/src/helpers/tab.helper.ts

@@ -1,3 +1,21 @@
 import { Tab } from '@/models';
+import { sanitizeString } from '@/helpers/string.helper';
+import { RouteLocation } from 'vue-router';
 
-export const getTabId = (tab: Tab) => tab.id || tab.name;
+export const getTabId = (tab: Tab) => tab.id || sanitizeString(tab.name);
+
+export const isTabSelectedByRoute = (
+  tab: Tab,
+  currentRoute: RouteLocation,
+): boolean =>
+  tab.routePath
+    ? currentRoute.path.includes(tab.routePath)
+    : tab.routeName
+      ? !!currentRoute.name &&
+        (currentRoute.name as string).includes(tab.routeName)
+      : false;
+
+export const isTabSelected = (
+  tab: Tab,
+  selectedTabId: string | null,
+): boolean => (tab && tab.id === selectedTabId) || false;

package/src/models/tab.model.ts

@@ -1,7 +1,7 @@
 export interface Tab {
   routePath?: string;
   routeName?: string;
-  id?: string;
+  id: string;
   name: string;
   disabled?: boolean;
   error?: boolean;

package/src/showroom/pages/autocomplete.vue

@@ -5,6 +5,7 @@
   <br />
   Valeur: {{ inputLabelValue }}
   <BmsAutocomplete
+    ref="autocompleteElement"
     label="Autocomplete avec label/value"
     :options="optionsLabelValue"
     v-model="inputLabelValue"
@@ -60,7 +61,7 @@
 import { BmsAutocomplete, BmsBackButton } from '@/index';
 import { Heart, Cat } from 'lucide-vue-next';
 import { range } from 'lodash';
-import { ref } from 'vue';
+import { onMounted, ref, useTemplateRef } from 'vue';
 import BmsButton from '@/components/button/BmsButton.vue';
 import BmsSelect from '@/components/form/BmsSelect.vue';
 import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
@@ -69,6 +70,11 @@ import BmsServerAutocomplete from '@/components/form/BmsServerAutocomplete.vue';
 const select = ref('');
 const multiSelect = ref(null);
 const multiSelectText = ref(null);
+const autocompleteElement = useTemplateRef('autocompleteElement');
+
+onMounted(() => {
+  (autocompleteElement.value as any)?.setFocus();
+});
 
 const optionsLabelValue = ref(
   range(0, 30).map((i) =>