@ouestfrance/sipa-bms-ui 8.16.0 → 8.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.16.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/components/table/BmsTable.stories.js

@@ -10,6 +10,12 @@ export default {
     disableSearch: {
       control: { type: 'boolean' },
     },
+    selectMode: {
+      options: ['single', 'default'],
+    },
+    mode: {
+      options: ['normal', 'dense'],
+    },
     loading: {
       control: { type: 'boolean' },
     },
@@ -751,6 +757,47 @@ Selected.args = {
   selectable: true,
 };
 
+export const SingleSelected = Template.bind({});
+SingleSelected.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  selectable: true,
+  selectMode: 'single',
+};
 const TemplateWithSelectAction = (args) => ({
   components: {
     BmsTable,

package/src/components/table/BmsTable.vue

@@ -6,7 +6,14 @@ import UiFilterButton from '@/components/table/UiFilterButton.vue';
 import { usePagination } from '@/composables/pagination.composable';
 import { useSearch } from '@/composables/search.composable';
 import { useSort } from '@/composables/sort.composable';
-import { Filter, SavedFilter, Sort, SortValue, TableHeader } from '@/models';
+import {
+  Filter,
+  SavedFilter,
+  SelectMode,
+  Sort,
+  SortValue,
+  TableHeader,
+} from '@/models';
 import { computed, Ref, ref, watch, watchEffect } from 'vue';
 import BmsTableFilters from './BmsTableFilters.vue';
 import BmsSearch from '../form/BmsSearch.vue';
@@ -34,6 +41,7 @@ interface UiTableProps {
   defaultSort?: Sort;
   selectable?: boolean;
   selectableDisabled?: boolean;
+  selectMode?: SelectMode.DEFAULT | SelectMode.SINGLE;
 }
 
 const props = withDefaults(defineProps<UiTableProps>(), {
@@ -51,6 +59,7 @@ const props = withDefaults(defineProps<UiTableProps>(), {
   }),
   selectable: false,
   selectableDisabled: false,
+  selectMode: SelectMode.DEFAULT,
 });
 
 const {
@@ -212,9 +221,18 @@ const onClickHeader = (header: TableHeader) => {
   changeSort(header);
 };
 
+const elementsAndChildElements = computed(() => {
+  const childElements = items.value
+    .map((item) => item.childElement)
+    .filter((childElement) => !!childElement);
+  return [...items.value, ...childElements];
+});
+
 const onSelectAll = () => {
-  selectedItems.value = items.value;
+  selectedItems.value = elementsAndChildElements.value;
 };
+
+const totalSize = computed(() => elementsAndChildElements.value.length);
 </script>
 
 <template>
@@ -228,7 +246,8 @@ const onSelectAll = () => {
     :sort="sort"
     :selectable="selectable"
     :selectableDisabled="selectableDisabled"
-    :totalSize="items.length"
+    :totalSize="totalSize"
+    :selectMode="selectMode"
     @clickHeader="onClickHeader"
     @selectAll="onSelectAll"
   >

package/src/components/table/UiBmsTable.spec.ts

@@ -2,9 +2,8 @@ import UiBmsTable from '@/components/table/UiBmsTable.vue';
 import { field } from '@/plugins/field';
 import { mount, MountingOptions } from '@vue/test-utils';
 import UiBmsInputCheckbox from '../form/UiBmsInputCheckbox.vue';
-import BmsAlert from '../feedback/BmsAlert.vue';
-import { wrap } from 'lodash';
 import { SelectMode } from '@/models';
+import BmsInputRadio from '../form/BmsInputRadio.vue';
 
 const intersectionObserverMock = () => ({
   observe: () => null,
@@ -40,13 +39,21 @@ const factory = (options: MountingOptions<any, {}> = {}) => {
   } as any);
   return {
     wrapper,
+    selectedMessage: () => wrapper.findAll('.bms-table__selected')[0],
+
+    getAllCheckboxes: () => wrapper.findAllComponents(UiBmsInputCheckbox),
     getAllCheckedCheckboxes: () =>
       wrapper
         .findAllComponents(UiBmsInputCheckbox)
         .filter((checkbox) => checkbox.props('modelValue') === true),
     getTableCheckbox: () => wrapper.findAllComponents(UiBmsInputCheckbox)[0],
     getFirstRowCheckbox: () => wrapper.findAllComponents(UiBmsInputCheckbox)[1],
-    selectedMessage: () => wrapper.findAll('.bms-table__selected')[0],
+
+    getAllCheckedRadio: () =>
+      wrapper
+        .findAllComponents(BmsInputRadio)
+        .filter((checkbox) => checkbox.props('modelValue') === true),
+    getAllRadio: () => wrapper.findAllComponents(BmsInputRadio),
   };
 };
 describe('UiBmsTable', () => {
@@ -369,5 +376,42 @@ describe('UiBmsTable', () => {
         'Vous avez sélectionné la totalité des 2 éléments.',
       );
     });
+    it('should display readio if in selectMode SINGLE', async () => {
+      const { getAllRadio, getAllCheckboxes } = factory({
+        props: {
+          headers,
+          items,
+          totalSize: 2,
+          selectable: true,
+          selectMode: SelectMode.SINGLE,
+          selectedItems: [items[0]],
+        },
+      });
+
+      expect(getAllRadio().length).toEqual(2);
+      expect(getAllCheckboxes().length).toEqual(0);
+    });
+    it('should unselect previous selection if in selectMode SINGLE', async () => {
+      const { getAllRadio } = factory({
+        props: {
+          headers,
+          items,
+          totalSize: 2,
+          selectable: true,
+          selectMode: SelectMode.SINGLE,
+          selectedItems: [items[0]],
+        },
+      });
+      const firstRadio = getAllRadio()[0];
+      const secondRadio = getAllRadio()[1];
+
+      expect(firstRadio.props('modelValue')).toBeTruthy();
+      expect(secondRadio.props('modelValue')).toBeFalsy();
+
+      await secondRadio.get('input').setValue(items[1]);
+
+      expect(secondRadio.props('modelValue')).toBeTruthy();
+      expect(firstRadio.props('modelValue')).toBeFalsy();
+    });
   });
 });

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

@@ -559,6 +559,49 @@ SelectedWithMaxSelected.args = {
   maxSelectedSize: 1,
 };
 
+export const SingleSelect = Template.bind({});
+SingleSelect.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  selectable: true,
+  selectMode: 'single',
+  totalSize: 2,
+};
+
 export const AllSelected = Template.bind({});
 AllSelected.args = {
   headers: [