@ouestfrance/sipa-bms-ui 8.17.0 → 8.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.17.0",
+  "version": "8.18.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

package/src/components/layout/BmsFloatingWindow.vue

@@ -55,6 +55,7 @@ const open = defineModel<boolean>({
     display: grid;
     grid-template-rows: auto 1fr;
     box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
+    z-index: var(--bms-z-index-modal);
 
     &__header {
       display: flex;

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

@@ -1,4 +1,5 @@
 import BmsTabs from '@/components/navigation/BmsTabs.vue';
+import { vueRouter } from 'storybook-vue3-router';
 
 export default {
   title: 'Composants/navigation/Tabs',
@@ -6,6 +7,21 @@ export default {
   argTypes: {
     items: {},
   },
+  decorators: [
+    vueRouter([
+      {
+        name: 'titi',
+        path: '/titi',
+      },
+      {
+        path: '/',
+      },
+      {
+        name: 'toto',
+        path: '/toto',
+      },
+    ]),
+  ],
 };
 
 const Template = (args) => ({
@@ -20,11 +36,49 @@ 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' }],
+};
+export const WithSelectedTabId = Template.bind({});
+WithSelectedTabId.args = {
+  title: 'Title',
+  initialTabId: 'Toto',
+  tabs: [
+    { name: 'Titi', id: 'titi' },
+    { name: 'Tata' },
+    { name: 'Toto' },
+    { name: 'Tutu' },
+  ],
+};
+
+export const WithRouterEngine = Template.bind({});
+WithRouterEngine.args = {
+  title: 'Title',
+  initialTabId: 'titi',
+  tabs: [
+    { name: 'Titi', routeName: 'titi', id: 'titi' },
+    { name: 'Toto', routePath: '/toto' },
+  ],
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  title: 'Title',
+  initialTabId: 'titi',
+  tabs: [
+    { name: 'Titi', routeName: 'titi', id: 'titi' },
+    { name: 'Toto', routePath: '/toto', error: true },
+  ],
+};
+
+export const WithDisabled = Template.bind({});
+WithDisabled.args = {
   title: 'Title',
+  initialTabId: 'titi',
   tabs: [
-    { name: 'Titi', routePath: 'titi' },
-    { name: 'Toto', routePath: 'toto' },
+    { name: 'Titi', routeName: 'titi', id: 'titi' },
+    { name: 'Toto', routePath: '/toto', disabled: true },
   ],
 };

package/src/components/navigation/BmsTabs.vue

@@ -1,46 +1,66 @@
 <template>
-  <div class="tabs-header">
-    <div class="tabs-title">
-      <h3>{{ title }}</h3>
-    </div>
-    <UiTab
-      v-for="tab in tabs"
-      :key="tab.name"
-      :tab="tab"
-      :current-route="currentRoute"
-    />
-  </div>
+  <UiTabs
+    :title="title"
+    :tabs="tabs"
+    :initial-tab-id="selectedTabId"
+    @click="$emits('click', $event)"
+  >
+    <template v-if="needRouterEngine" #router="{ tab }">
+      <router-link class="tab" :to="getTabTarget(tab)">{{
+        tab.name
+      }}</router-link>
+    </template>
+  </UiTabs>
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
 import { Tab } from '@/models/tab.model';
-import UiTab from './UiTab.vue';
+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';
 
 const { currentRoute } = useRouter();
 
-defineProps<{ title: string; tabs: Tab[] }>();
-</script>
+const props = defineProps<{
+  title: string;
+  tabs: Tab[];
+  initialTabId?: string;
+}>();
 
-<style lang="scss" scoped>
-.tabs-header {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--bms-grey-25);
-  box-sizing: border-box;
+const getTabTarget = (tab: Tab) => {
+  return tab.routePath ? { path: tab.routePath } : { name: tab.routeName };
+};
 
-  .tabs-title {
-    margin-right: auto;
-    margin-bottom: 16px;
+const $emits = defineEmits<{
+  (e: 'click', tab: Tab): void;
+}>();
 
-    h3 {
-      margin: 0;
-    }
-  }
+const needRouterEngine = computed(() => {
+  return (
+    !!props.tabs &&
+    !!props.tabs[0] &&
+    !!(props.tabs[0].routePath || props.tabs[0].routeName)
+  );
+});
 
-  a {
-    position: relative;
-    top: 1px;
+const selectedTabId: ComputedRef<string | null> = computed(() => {
+  if (needRouterEngine.value) {
+    const selectedTab =
+      props.tabs.find((t) => isTabSelected(t, currentRoute.value)) || null;
+    return selectedTab ? getTabId(selectedTab) : null;
+  } else if (props.initialTabId) {
+    return props.initialTabId;
+  } else {
+    return null;
   }
-}
-</style>
+});
+
+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;
+</script>

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

@@ -30,31 +30,31 @@ const Template = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-  currentRoute: { path: 'toto' },
+  selectedTabId: 'toto',
   tab: { name: 'Titi', routePath: 'titi' },
 };
 
 export const Active = Template.bind({});
 Active.args = {
-  currentRoute: { path: 'titi-subRoute' },
+  selectedTabId: 'Titi',
   tab: { name: 'Titi', routePath: 'titi' },
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  currentRoute: { path: 'toto' },
+  selectedTabId: 'toto',
   tab: { name: 'Titi', routePath: 'titi', disabled: true },
 };
 
 export const Error = Template.bind({});
 Error.args = {
-  currentRoute: { path: 'toto' },
+  selectedTabId: 'toto',
   tab: { name: 'Titi', routePath: 'titi', error: true },
 };
 
 export const Hover = Template.bind({});
 Hover.args = {
-  currentRoute: { path: 'toto' },
+  selectedTabId: 'toto',
   tab: { name: 'Titi', routePath: 'titi' },
 };
 Hover.play = async ({ canvasElement }) => {

package/src/components/navigation/UiTab.vue

@@ -1,40 +1,30 @@
 <template>
-  <router-link
-    :to="tabTarget"
+  <span
     data-testid="tab"
     class="tab"
     :class="{ active: isTabSelected, error: tab.error, disabled: tab.disabled }"
   >
-    <slot>{{ tab.name }}</slot>
-  </router-link>
+    <slot name="router" :tab="tab">{{ tab.name }}</slot>
+  </span>
 </template>
 
 <script lang="ts" setup>
 import { Tab } from '@/models/tab.model';
-import { ComputedRef, computed } from 'vue';
-import { RouteLocation, RouteLocationRaw } from 'vue-router';
+import { computed, ComputedRef } from 'vue';
+import { getTabId } from '@/helpers/tab.helper';
 
 const props = withDefaults(
   defineProps<{
-    currentRoute: RouteLocation;
+    selectedTabId: string | null;
     tab: Tab;
   }>(),
   {},
 );
 
-const isTabSelected: ComputedRef<boolean> = computed(() =>
-  props.tab.routePath
-    ? props.currentRoute.path.includes(props.tab.routePath)
-    : props.tab.routeName
-      ? !!props.currentRoute.name &&
-        (props.currentRoute.name as string).includes(props.tab.routeName)
-      : false,
-);
+const tabId = computed(() => getTabId(props.tab));
 
-const tabTarget: ComputedRef<RouteLocationRaw> = computed(() =>
-  props.tab.routePath
-    ? { path: props.tab.routePath }
-    : { name: props.tab.routeName },
+const isTabSelected: ComputedRef<boolean> = computed(
+  () => (tabId.value && tabId.value === props.selectedTabId) || false,
 );
 </script>
 
@@ -47,10 +37,15 @@ const tabTarget: ComputedRef<RouteLocationRaw> = computed(() =>
   text-decoration: none;
   border-bottom: 4px solid var(--tab-border-color);
   padding: 0 8px 16px 8px;
-
+  cursor: pointer;
+  :deep(a) {
+    color: var(--tab-color);
+    text-decoration: none;
+  }
   &:hover,
   &__hover {
     --tab-border-color: var(--bms-main-50);
+    text-decoration: none;
   }
 
   &.active {

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

@@ -0,0 +1,34 @@
+import UiTabs from '@/components/navigation/UiTabs.vue';
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/navigation/UiTabs',
+  component: UiTabs,
+  argTypes: {
+    items: {},
+  },
+  tags: ['technical'],
+};
+
+const Template = (args) => ({
+  components: {
+    UiTabs,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UiTabs v-bind="args" />
+  `,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  title: 'Title',
+  tabs: [{ name: 'Titi', id: 'titi' }, { name: 'Toto' }],
+};

package/src/components/navigation/UiTabs.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="tabs-header">
+    <div class="tabs-title">
+      <h3>{{ title }}</h3>
+    </div>
+    <UiTab
+      v-for="tab in tabs"
+      :key="getTabId(tab)"
+      :selectedTabId="selectedTabId"
+      :tab="tab"
+      @click="onTabClick(tab)"
+    >
+      <template #router="{ tab }"><slot name="router" :tab="tab" /></template>
+    </UiTab>
+  </div>
+</template>
+
+<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;
+}>();
+
+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) {
+    $emits('click', tab);
+    selectedTabId.value = getTabId(tab);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tabs-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--bms-grey-25);
+  box-sizing: border-box;
+
+  .tabs-title {
+    margin-right: auto;
+    margin-bottom: 16px;
+
+    h3 {
+      margin: 0;
+    }
+  }
+
+  span {
+    position: relative;
+    top: 1px;
+  }
+}
+</style>

package/src/helpers/tab.helper.ts

@@ -0,0 +1,3 @@
+import { Tab } from '@/models';
+
+export const getTabId = (tab: Tab) => tab.id || tab.name;

package/src/models/tab.model.ts

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