@ouestfrance/sipa-bms-ui 8.5.3 → 8.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.5.3",
+  "version": "8.6.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -30,49 +30,49 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",
-    "@codemirror/lang-html": "6.4.9",
+    "@codemirror/lang-html": "6.4.10",
     "@codemirror/lang-json": "6.0.2",
     "@commitlint/cli": "19.8.1",
     "@commitlint/config-conventional": "19.8.1",
     "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.1",
-    "@storybook/addon-docs": "9.1.4",
-    "@storybook/addon-links": "9.1.4",
-    "@storybook/vue3-vite": "9.1.4",
+    "@storybook/addon-docs": "9.1.5",
+    "@storybook/addon-links": "9.1.5",
+    "@storybook/vue3-vite": "9.1.5",
     "@types/lodash": "4.17.20",
-    "@types/uuid": "10.0.0",
+    "@types/uuid": "11.0.0",
     "@vitejs/plugin-vue": "6.0.1",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "13.9.0",
     "@vueuse/motion": "^3.0.0",
-    "axios": "1.11.0",
+    "axios": "1.12.2",
     "blob-util": "^2.0.2",
     "chromatic": "13.1.4",
     "codemirror": "6.0.2",
     "cors": "^2.8.5",
     "cross-env": "^10.0.0",
     "cy2": "^4.0.0",
-    "cypress": "15.1.0",
+    "cypress": "15.2.0",
     "express": "^5.0.0",
     "husky": "9.1.7",
-    "jsdom": "26.1.0",
+    "jsdom": "27.0.0",
     "keycloak-js": "26.1.2",
     "lint-staged": "16.1.6",
     "lodash": "4.17.21",
-    "lucide-vue-next": "0.542.0",
+    "lucide-vue-next": "0.544.0",
     "msw-storybook-addon": "^2.0.3",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.6.2",
-    "sass": "1.92.0",
-    "semantic-release": "24.2.7",
-    "start-server-and-test": "2.0.13",
-    "storybook": "9.1.4",
-    "storybook-addon-pseudo-states": "9.1.4",
+    "sass": "1.92.1",
+    "semantic-release": "24.2.8",
+    "start-server-and-test": "2.1.0",
+    "storybook": "9.1.5",
+    "storybook-addon-pseudo-states": "9.1.5",
     "storybook-vue3-router": "^6.0.2",
     "typescript": "5.2.2",
-    "uuid": "11.1.0",
-    "vite": "7.1.4",
+    "uuid": "13.0.0",
+    "vite": "7.1.5",
     "vite-plugin-dts": "^4.1.0",
     "vite-plugin-mkcert": "1.17.8",
     "vite-plugin-pages": "0.33.1",
@@ -82,7 +82,7 @@
     "vue-codemirror": "6.1.1",
     "vue-loader": "17.4.2",
     "vue-router": "4.5.1",
-    "vue-tsc": "3.0.6"
+    "vue-tsc": "3.0.7"
   },
   "files": [
     "dist",

package/src/components/form/BmsMultiSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <BmsSelect
-    v-model:open="open"
     v-bind="$props"
+    :options="displayedOptions"
     :model-value="modelValue"
     @update:model-value="onSelect"
   >
@@ -59,7 +59,6 @@ const searching = ref('');
 const modelValue = defineModel<InputOption[]>('modelValue', {
   required: true,
 });
-const open = defineModel<boolean>('open', { default: false });
 
 const onSelect = (value: string) => {
   const option = props.options.find((o) => o.value === value);

package/src/components/form/BmsSelect.vue

@@ -83,6 +83,7 @@ const displayValue = computed(() => {
 
 const selectItem = (option: any) => {
   modelValue.value = option.value;
+  setFocus();
   open.value = false;
 };
 

package/src/components/form/RawAutocomplete.vue

@@ -10,7 +10,6 @@
       :required="required"
       :small="small"
       @input="onInput"
-      v-model:focus="isInputFocused"
     >
       <template #icon-start>
         <slot name="icon-start"></slot>
@@ -20,12 +19,8 @@
           <span v-if="inputText.length" class="icon" @click="clearInput">
             <X />
           </span>
-          <span
-            v-else
-            class="icon"
-            @click.stop="isInputFocused = !isInputFocused"
-          >
-            <ChevronDown v-if="!isInputFocused" />
+          <span v-else class="icon" @click.stop="toggleList">
+            <ChevronDown v-if="!showDataList" />
             <ChevronUp v-else />
           </span>
         </slot>
@@ -33,9 +28,9 @@
     </RawInputText>
     <template #datalist>
       <FieldDatalist
-        v-show="isInputFocused"
+        v-show="showDataList"
         data-testid="autocomplete-menu"
-        :is-input-focused="isInputFocused"
+        :is-input-focused="showDataList"
         :can-add-new-option="canAddNewOption"
         :new-option="inputText"
         :options="filteredMenuItems"
@@ -90,7 +85,7 @@ const getValidOptionByValue = (value: string | null) =>
 const inputText = ref<string>(
   getValidOptionByValue(modelValue.value)?.label ?? '',
 );
-const isInputFocused = ref<boolean>(props.open);
+const showDataList = ref<boolean>(props.open);
 const autocompleteInput: Ref<HTMLElement | null> = ref(null);
 
 const classes = computed(() => {
@@ -106,7 +101,8 @@ const selectItem = (option: InputOption) => {
   const existingOption =
     getValidOptionByLabel(option.label) || getValidOptionByValue(option.value);
   modelValue.value = existingOption?.value ?? null;
-  isInputFocused.value = false;
+  showDataList.value = false;
+  setFocus();
 };
 
 const displayItem = (option: InputOption) => {
@@ -136,7 +132,7 @@ watch(
   },
 );
 const onInput = () => {
-  isInputFocused.value = true;
+  showDataList.value = true;
   if (inputText.value === '') {
     clearInput();
   }
@@ -144,14 +140,19 @@ const onInput = () => {
 
 const setFocus = () => {
   if (autocompleteInput.value) {
-    autocompleteInput.value.focus();
+    (autocompleteInput.value as any).setFocus();
   }
 };
+
 const clearInput = () => {
   inputText.value = '';
   modelValue.value = null;
+  setFocus();
+};
+const toggleList = () => {
+  showDataList.value = !showDataList.value;
+  setFocus();
 };
-
 defineExpose({
   setFocus,
 });

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

@@ -1,6 +1,7 @@
 import UiBmsTable from '@/components/table/UiBmsTable.vue';
 import { Save, Trash } from 'lucide-vue-next';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
+import { ColumnType } from '@/models/table.model';
 
 import template from '@/documentation/template_internal_component.mdx';
 
@@ -379,6 +380,42 @@ SelectableDisabled.args = {
   selectableDisabled: true,
   totalSize: 2,
 };
+export const Typed = Template.bind({});
+Typed.args = {
+  headers: [
+    {
+      label: 'Column boolean',
+      key: 'col1',
+      align: 'start',
+      columnType: ColumnType.Boolean,
+    },
+    {
+      label: 'Column date',
+      key: 'col2',
+      align: 'center',
+      columnType: ColumnType.Date,
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: true,
+      col2: '2024-10-10T12:00:00Z',
+      col3: 'Value3',
+    },
+    {
+      col1: false,
+      col2: '2025-01-01T18:00:00Z',
+      col3: 'Value3',
+    },
+  ],
+  hasFilters: true,
+  totalSize: 2,
+};
 
 const TemplateWithActionColumn = (args) => ({
   components: {

package/src/components/table/UiBmsTableCell.vue

@@ -0,0 +1,25 @@
+<template>
+  <template v-if="cell.columnType === ColumnType.Boolean">
+    <BmsChip v-if="cellValue" :color="ChipColor.Green">Oui</BmsChip>
+    <BmsChip v-else>Non</BmsChip>
+  </template>
+  <template v-else-if="cell.columnType === ColumnType.Date">
+    <BmsRelativeTime :relativeTo="relativeToTime" />
+  </template>
+  <template v-else>
+    {{ cellValue }}
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ChipColor, ColumnType, TableHeader } from '@/models';
+import _get from 'lodash/get';
+import BmsChip from '../form/BmsChip.vue';
+import { computed } from 'vue';
+import BmsRelativeTime from '../utils/BmsRelativeTime.vue';
+
+const props = defineProps<{ cell: TableHeader; item: any }>();
+
+const cellValue = computed(() => _get(props.item, props.cell.key) ?? '');
+const relativeToTime = computed(() => new Date(cellValue.value)?.getTime());
+</script>

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

@@ -1,4 +1,5 @@
 import UiBmsTableRow from '@/components/table/UiBmsTableRow.vue';
+import { ColumnType } from '@/models/table.model';
 
 export default {
   title: 'Composants/table/UiBmsTableRow',
@@ -141,3 +142,32 @@ IsChildElement.args = {
     },
   },
 };
+
+export const Typed = Template.bind({});
+Typed.args = {
+  headers: [
+    {
+      label: 'Column boolean',
+      key: 'col1',
+      align: 'start',
+      columnType: ColumnType.Boolean,
+    },
+    {
+      label: 'Column date',
+      key: 'col2',
+      align: 'center',
+      columnType: ColumnType.Date,
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  selectedItems: [],
+  item: {
+    col1: true,
+    col2: '2022-01-01',
+    col3: 'Value3',
+  },
+};

package/src/components/table/UiBmsTableRow.vue

@@ -37,7 +37,7 @@
             :row="item.childElement"
             :isChildElement="isChildElement"
           >
-            {{ _get(item.childElement, cell.key) || '' }}
+            <UiBmsTableCell :item="item.childElement" :cell="cell" />
           </slot>
         </div>
         <div v-else-if="cell?.action" class="bms-table__row__cell--action">
@@ -53,7 +53,7 @@
           :row="item"
           :isChildElement="isChildElement"
         >
-          {{ _get(item, cell.key) || '' }}
+          <UiBmsTableCell :item="item" :cell="cell" />
         </slot>
       </td>
     </slot>
@@ -68,6 +68,7 @@ import _get from 'lodash/get';
 import UiBmsInputCheckbox from '../form/UiBmsInputCheckbox.vue';
 import BmsTooltip from '../feedback/BmsTooltip.vue';
 import { CornerDownRight } from 'lucide-vue-next';
+import UiBmsTableCell from './UiBmsTableCell.vue';
 
 interface Props {
   item: any;

package/src/components/utils/BmsRelativeTime.vue

@@ -25,7 +25,7 @@ const timeout = ref<any>();
 const date = ref<string>();
 
 const formattedDate = computed(() => {
-  return new Date(props.relativeTo).toLocaleString();
+  return new Date(props.relativeTo)?.toLocaleString() ?? '';
 });
 
 onMounted(() => {

package/src/models/table.model.ts

@@ -1,6 +1,12 @@
 import { InputType } from './form.model';
 import { Sort, SortFunction } from './sort.model';
 
+export enum ColumnType {
+  Boolean = 'Boolean',
+  Date = 'Date',
+  String = 'String',
+}
+
 export interface TableHeader {
   label: string;
   key: string;
@@ -10,6 +16,7 @@ export interface TableHeader {
   sortable?: boolean;
   sortFunction?: SortFunction;
   action?: boolean;
+  columnType?: ColumnType;
 }
 
 export interface ServerTableRequestParams {

package/src/showroom/pages/table.vue

@@ -14,21 +14,6 @@
     @saveFilter="onSaveFilter"
     @deleteSavedFilter="onDeleteSavedFilter"
   >
-    <template #date="{ row }">
-      <bms-tooltip :tooltip-text="row.date.toUTCString()">
-        {{ row.date.toLocaleDateString() }}
-      </bms-tooltip>
-    </template>
-    <template #dateUpdate="{ row }">
-      <bms-tooltip :tooltip-text="row.dateUpdate.toUTCString()">
-        {{ row.dateUpdate.toLocaleDateString() }}
-      </bms-tooltip>
-    </template>
-    <template #dateDelete="{ row }">
-      <bms-tooltip :tooltip-text="row.dateDelete.toUTCString()">
-        {{ row.dateDelete.toLocaleDateString() }}
-      </bms-tooltip>
-    </template>
     <template #choice2="{ row }">
       <BmsTooltip tooltipText="tooltip">
         {{ row.choice2 }}
@@ -65,6 +50,7 @@
 <script lang="ts" setup>
 import { BmsBackButton, BmsButton, useNotifications } from '@/index';
 import {
+  ColumnType,
   Filter,
   InputType,
   SavedFilter,
@@ -86,9 +72,9 @@ const headers = [
   { label: 'Colonne 1', key: 'column1', sortable: true },
   { label: 'actions', key: 'action', action: true },
   { label: 'Colonne 2', key: 'column2' },
-  { label: 'Date', key: 'date' },
-  { label: 'DateUpdate', key: 'dateUpdate' },
-  { label: 'DateDelete', key: 'dateDelete' },
+  { label: 'Date', key: 'date', columnType: ColumnType.Date },
+  { label: 'DateUpdate', key: 'dateUpdate', columnType: ColumnType.Date },
+  { label: 'DateDelete', key: 'dateDelete', columnType: ColumnType.Date },
   { label: 'choice1', key: 'choice1' },
   { label: 'choice2', key: 'choice2' },
   {