@ouestfrance/sipa-bms-ui 8.16.0 → 8.17.0

package/package.json

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

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: [

package/src/components/table/UiBmsTable.vue

@@ -21,12 +21,12 @@ import BmsLoader from '../feedback/BmsLoader.vue';
 import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-vue-next';
 import UiBmsInputCheckbox from '../form/UiBmsInputCheckbox.vue';
 import BmsAlert from '../feedback/BmsAlert.vue';
-import { enforceActionsColumnHeader } from '@/helpers';
+import { enforceActionsColumnHeader, getHeaderClasses } from '@/helpers';
 import UiBmsTableRow from './UiBmsTableRow.vue';
 
 interface UiBmsTableProps {
   headers: TableHeader[];
-  items: unknown[];
+  items: any[];
   mode?: 'normal' | 'dense';
   loading?: boolean;
   hasFilters?: boolean;
@@ -62,37 +62,31 @@ const emits = defineEmits<{
   clearSelection: [];
 }>();
 
+// Pagination
 const pagination = ref<HTMLInputElement | null>(null);
-const isHeaderStuck = ref<boolean>(false);
-const thead = ref<HTMLHeadElement | null>(null);
+const isFocusOnPagination = () =>
+  pagination.value?.contains(document.activeElement);
 
-const filteredHeaders = computed(() => {
-  return enforceActionsColumnHeader(props.headers);
-});
+watch(
+  () => props.items,
+  async function keepFocusOnPaginationWhenUsed(newVal, oldVal) {
+    if (oldVal.length > 0 && newVal.length > 0 && isFocusOnPagination()) {
+      await nextTick();
+      pagination.value?.focus();
+    }
+  },
+  { deep: true },
+);
+
+// Headers style
+const filteredHeaders = computed(() =>
+  enforceActionsColumnHeader(props.headers),
+);
 
 const tableClass = computed(
   () => `bms-table__table bms-table__table--${props.mode}`,
 );
 
-const getAlignClass = (header: TableHeader) => {
-  const align = !header.align ? 'start' : header.align;
-  return `u-text-align-${align}`;
-};
-
-const getHeaderClasses = (header: TableHeader): string[] => {
-  const classes = [getAlignClass(header), 'bms-table__header-cell'];
-  if (header.class) {
-    classes.push(header.class);
-  }
-  if (header.sortable) {
-    classes.push('sortable');
-  }
-  if (props.sort.key === header.key) {
-    classes.push('sorted');
-  }
-  return classes;
-};
-
 const getSortComponent = (header: TableHeader): Component => {
   if (!props.sort.key || header.key !== props.sort.key) {
     return ChevronsUpDown;
@@ -107,48 +101,23 @@ const getSortComponent = (header: TableHeader): Component => {
   }
 };
 
-const isFocusOnPagination = () => {
-  return pagination.value?.contains(document.activeElement);
-};
-
-watch(
-  () => props.items,
-  async (newVal, oldVal) => {
-    if (oldVal.length > 0 && newVal.length > 0 && isFocusOnPagination()) {
-      await nextTick();
-      pagination.value?.focus();
-    }
-  },
-  { deep: true },
-);
-
-onscroll = () => {
-  if (thead.value) {
-    const { top: theadTop } = thead.value.getBoundingClientRect();
-    const headers = document.getElementsByTagName('header');
-    if (headers.length > 0) {
-      const header = headers[0];
-      const { height: headerHeight } = header.getBoundingClientRect();
-      isHeaderStuck.value = headerHeight === theadTop;
-    }
-  }
-};
-
-const isItemSelected = (item: unknown): boolean => {
-  return (
-    props.selectMode === SelectMode.ALL ||
-    !!selectedItems.value.find((it) => _isEqual(item, it))
-  );
-};
+// Selection
+const isItemSelected = (item: unknown): boolean =>
+  props.selectMode === SelectMode.ALL ||
+  !!selectedItems.value.find((it) => _isEqual(item, it));
 
 const onItemSelect = (item: unknown) => {
-  if (isItemSelected(item)) {
-    selectedItems.value = selectedItems.value.filter(
-      (it) => !_isEqual(item, it),
-    );
-    areAllCurrentItemsSelected.value = false;
+  if (props.selectMode === SelectMode.SINGLE) {
+    selectedItems.value = [item];
   } else {
-    selectedItems.value.push(item);
+    if (isItemSelected(item)) {
+      selectedItems.value = selectedItems.value.filter(
+        (it) => !_isEqual(item, it),
+      );
+      areAllCurrentItemsSelected.value = false;
+    } else {
+      selectedItems.value.push(item);
+    }
   }
 };
 
@@ -165,26 +134,27 @@ const onToggleSelectAllCurrentItems = () => {
   }
 
   // If we have a selection spanning across more than the current page
-  if (selectedItems.value.length > props.items.length) {
+  if (selectedItems.value.length > props.totalSize) {
     selectedItems.value = [] as unknown[];
   } else {
-    // If all the current page is selected
+    // If only some are selected
     if (!areAllCurrentItemsSelected.value) {
       props.items.forEach((item) => {
         if (!isItemSelected(item)) {
           selectedItems.value.push(item);
         }
+        if (item?.childElement && !isItemSelected(item?.childElement)) {
+          selectedItems.value.push(item.childElement);
+        }
       });
     } else {
-      // If nothing selected
-      selectedItems.value = selectedItems.value.filter(
-        (selectedItem) =>
-          !props.items.find((item) => _isEqual(item, selectedItem)),
-      );
+      // If all the current page is selected
+      selectedItems.value = [];
     }
   }
 };
 
+// Blob animation
 const blob = ref<HTMLDivElement | null>(null);
 const mainComponent = ref<HTMLDivElement | null>(null);
 
@@ -220,6 +190,7 @@ const onMouseMove = (e: MouseEvent) => {
 };
 
 window.addEventListener('mousemove', onMouseMove);
+
 watch(
   () => props.items.length,
   () => {
@@ -282,7 +253,9 @@ onMounted(() => {
           <span
             class="select-mode-all"
             @click="selectAll"
-            v-if="totalSize < maxSelectedSize"
+            v-if="
+              totalSize < maxSelectedSize && selectMode !== SelectMode.SINGLE
+            "
           >
             Sélectionner la totalité des {{ totalSize }} éléments
           </span>
@@ -305,14 +278,11 @@ onMounted(() => {
         :class="tableClass"
         ref="mainComponent"
       >
-        <thead
-          ref="thead"
-          class="bms-table__header"
-          :class="{ stuck: isHeaderStuck }"
-        >
+        <thead ref="thead" class="bms-table__header">
           <tr class="bms-table__headers bms-table__row">
             <th v-if="selectable">
               <UiBmsInputCheckbox
+                v-if="selectMode !== SelectMode.SINGLE"
                 name="select-all"
                 :disabled="items.length === 0 || selectableDisabled"
                 @update:model-value="onToggleSelectAllCurrentItems"
@@ -324,7 +294,7 @@ onMounted(() => {
               :style="{
                 '--table-cell-width': header?.width || undefined,
               }"
-              :class="getHeaderClasses(header)"
+              :class="getHeaderClasses(header, sort)"
               :key="header.label"
               @click="emits('clickHeader', header)"
             >
@@ -360,8 +330,7 @@ onMounted(() => {
                   <slot name="default" :row="row"></slot>
                 </template>
               </UiBmsTableRow>
-              <!-- FIXME typing -->
-              <template v-if="(item as any)?.childElement">
+              <template v-if="item?.childElement">
                 <slot name="child-element">
                   <UiBmsTableRow
                     is-child-element
@@ -371,6 +340,7 @@ onMounted(() => {
                     :headers="filteredHeaders"
                     :select-mode="selectMode"
                     :selectable-disabled="selectableDisabled"
+                    @select="onItemSelect"
                   >
                     <template
                       v-for="cell in headers"
@@ -579,16 +549,6 @@ onMounted(() => {
     border-top-left-radius: var(--table-cell-radius);
   }
 
-  .stuck {
-    th:first-child {
-      border-top-left-radius: 0;
-    }
-
-    th:last-child {
-      border-top-right-radius: 0;
-    }
-  }
-
   th:last-child {
     border-top-right-radius: var(--table-cell-radius);
   }

package/src/components/table/UiBmsTableRow.vue

@@ -2,7 +2,7 @@
   <tr
     class="bms-table__row"
     :class="{
-      'bms-table__row--selected': isItemSelected(item),
+      'bms-table__row--selected': isItemSelected(currentItem),
       'bms-table__row--disabled': isChildElement,
       'bms-table__row--dense': dense,
     }"
@@ -13,11 +13,20 @@
         tooltip-text="Vous ne pouvez pas désélectionner un élément unitairement si vous avez choisi de sélectionner la totalité des éléments"
         :activated="selectMode === SelectMode.ALL"
       >
+        <BmsInputRadio
+          v-if="selectMode === SelectMode.SINGLE"
+          :name="uuid()"
+          :disabled="selectableDisabled"
+          :value="currentItem"
+          :model-value="isItemSelected(currentItem) ? currentItem : null"
+          @update:model-value="emits('select', currentItem)"
+        />
         <UiBmsInputCheckbox
+          v-else
           :name="uuid()"
           :disabled="selectMode === SelectMode.ALL || selectableDisabled"
-          :model-value="isItemSelected(item)"
-          @update:model-value="emits('select', item)"
+          :model-value="isItemSelected(currentItem)"
+          @update:model-value="emits('select', currentItem)"
         />
       </BmsTooltip>
     </td>
@@ -69,6 +78,8 @@ import UiBmsInputCheckbox from '../form/UiBmsInputCheckbox.vue';
 import BmsTooltip from '../feedback/BmsTooltip.vue';
 import { CornerDownRight } from 'lucide-vue-next';
 import UiBmsTableCell from './UiBmsTableCell.vue';
+import BmsInputRadio from '../form/BmsInputRadio.vue';
+import { computed } from 'vue';
 
 interface Props {
   item: any;
@@ -87,6 +98,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emits = defineEmits<{ select: [item: any] }>();
 
+const currentItem = computed(() =>
+  props.isChildElement ? props.item.childElement : props.item,
+);
+
 const isItemSelected = (item: unknown): boolean => {
   return (
     props.selectMode === SelectMode.ALL ||

package/src/documentation/principles.mdx

@@ -1,10 +1,4 @@
-import {
-  Canvas,
-  Meta,
-  Story,
-  Stories,
-  Controls,
-} from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 ![](./CoverBmsUI.png)
 
@@ -21,3 +15,75 @@ bms UI focuses on the essentials, we concentrate on what is useful for interface
 ## Design System by constraint
 
 A constraint-based design system is designed to offer a consistent user experience across all products that use it. By limiting possible interpretations, this type of design system provides a clear and consistent logic that facilitates understanding and use of the products. Constraints can be applied to visual elements such as colors, typography, and font sizes, as well as interactive elements such as buttons and menus. By using a constraint-based design system, users can interact with products with confidence, knowing that the design elements will be consistent and predictable.
+
+## 📖 Documentation of the **bms UI** Design System
+
+> **Mission** – Provide a **single Design System** dedicated to the Sipa group’s Back‑Office tools, limiting the use of the Vue framework and offering a constraint‑driven approach to interface design and construction. Goal: reduce costs, ensure visual and functional consistency, and simplify maintenance.
+
+---
+
+### 1️⃣ Context & Objectives
+
+- **Who?**  
+  The bms UI Design System is actually maintained by the frontend team of **bms**.
+
+- **Why?**
+  - Uniform the look‑and‑feel of internal products and applications.
+  - Limit Vue code sprawl and avoid ad‑hoc solutions.
+  - Speed up development with reusable, tested components.
+
+- **Target audience**  
+  Front‑end developers, designers, QA engineers, project managers, and anyone involved in creating or maintaining Back‑Office interfaces.
+
+### 2️⃣ Core Principles
+
+#### 2.1 Focused – Essentials First
+
+> _“We concentrate on what truly matters for interfaces, nothing superfluous.”_
+
+- **Functional minimalism** – Each component must solve a clearly identified need.
+- **Dependency pruning** – Keep external imports to a minimum to reduce bundle size.
+- **Concise documentation** – Every component includes essential props, available slots, and a usage example.
+
+#### 2.2 Design System by Constraint – Constraint as a Cohesion Lever
+
+> _“By limiting possible interpretations, we create a clear and predictable logic.”_
+
+| Domain           | Applied Constraints                                        |
+| ---------------- | ---------------------------------------------------------- |
+| **Colors**       | Restricted palette – no free‑form colors.                  |
+| **Typography**   | One font families, predefined sizes.                       |
+| **Spacing**      | Margin/padding scale based on a 8 px step.                 |
+| **Interactions** | Standardised states (default, hover, focus, disabled).     |
+| **Behavior**     | Uniform Vue API (`v-model` where applicable, named slots). |
+
+These constraints are **declarative** – they’re baked directly into components (e.g., `mode="danger"` to have a red button), preventing stylistic drift.
+
+### 3️⃣ Project Architecture
+
+- **Single export** – `import BmsButton from '../components/button/BmsButton.vue';`
+- **Integrated Storybook** – Each component has a `*.stories.js` file showcasing the UI and the props & slots for each component.```
+- **Typescript components** - Each component as typed props & events, and the relevant types are exported by the library (e.g. TableHeader, Caption, etc.)
+
+### 4️⃣ Usage Guide
+
+#### 4.1 Installation
+
+Gitlab documentation https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms#installation
+
+### 5️⃣ Quick FAQ
+
+- **Can I add a custom color?**  
+  **Answer:** No – all colors must come from the defined palette. If a legitimate need arises, open a **Jira** ticket.
+
+- **How do I handle a new breakpoint?**  
+  **Answer:** There are no breakpoints – bmsUI only provides desktop‑only interfaces.
+
+- **Does the design system support dark mode?**  
+  **Answer:** No – theming is not available at this time.
+
+### 6️⃣ Contact & Support
+
+- **Teams**: [#🎨bmsUI](https://teams.microsoft.com/l/channel/19%3Au9dPXr-JjoRoaLat-EyS-QEKit1ZzUwQ7G0VrzvDkTE1%40thread.tacv2/%F0%9F%8E%A8bmsUI?groupId=677fd2f9-de86-4bf9-a00c-71817f033ad3&tenantId=a59e9cc9-4ed4-43c4-9f1e-ca78d44b0072&ngc=true&allowXTenantAccess=)
+- **Issues**: [#Jira] (⚠️ WIP)
+- **Gitlab**: [Gitlab](https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms)

package/src/helpers/table.helper.ts

@@ -86,3 +86,22 @@ export const enforceActionsColumnHeader = (
     .filter((h) => !h?.action)
     .concat(actionsHeaders.length ? actionsHeaders[0] : []);
 };
+
+const getAlignClass = (header: TableHeader) => {
+  const align = !header.align ? 'start' : header.align;
+  return `u-text-align-${align}`;
+};
+
+export const getHeaderClasses = (header: TableHeader, sort: Sort): string[] => {
+  const classes = [getAlignClass(header), 'bms-table__header-cell'];
+  if (header.class) {
+    classes.push(header.class);
+  }
+  if (header.sortable) {
+    classes.push('sortable');
+  }
+  if (sort.key === header.key) {
+    classes.push('sorted');
+  }
+  return classes;
+};

package/src/models/table.model.ts

@@ -68,4 +68,5 @@ export interface SavedFilter {
 export enum SelectMode {
   ALL = 'all',
   DEFAULT = 'default',
+  SINGLE = 'single',
 }

package/src/showroom/pages/server-table.vue

@@ -30,10 +30,7 @@
   <div>Nb Selected items: {{ selectedItems.length }}</div>
   <div>
     Selected items:
-    {{
-      selectMode === SelectMode.ALL &&
-      selectedItems?.map((i: any) => '#' + i.id + ' : ' + i.name).join(', ')
-    }}
+    {{ selectedItems?.map((i: any) => '#' + i.id + ' : ' + i.name).join(', ') }}
   </div>
 </template>