@ouestfrance/sipa-bms-ui 8.16.0 → 8.17.0

package/dist/sipa-bms-ui.umd.js

@@ -53,6 +53,7 @@
   var SelectMode = /* @__PURE__ */ ((SelectMode2) => {
     SelectMode2["ALL"] = "all";
     SelectMode2["DEFAULT"] = "default";
+    SelectMode2["SINGLE"] = "single";
     return SelectMode2;
   })(SelectMode || {});
 
@@ -311,6 +312,23 @@
       console.error("Table component cannot have multiple action columns ");
     return headers.filter((h) => !h?.action).concat(actionsHeaders.length ? actionsHeaders[0] : []);
   };
+  const getAlignClass = (header) => {
+    const align = !header.align ? "start" : header.align;
+    return `u-text-align-${align}`;
+  };
+  const getHeaderClasses = (header, sort) => {
+    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;
+  };
 
   const _hoisted_1$$ = ["href", "target"];
   const _hoisted_2$G = ["href", "onClick", "target"];
@@ -95738,6 +95756,9 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emits = __emit;
+      const currentItem = vue.computed(
+        () => props.isChildElement ? props.item.childElement : props.item
+      );
       const isItemSelected = (item) => {
         return props.selectMode === SelectMode.ALL || !!props.selectedItems.find((it) => _isEqual(item, it));
       };
@@ -95748,7 +95769,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("tr", {
           class: vue.normalizeClass(["bms-table__row", {
-            "bms-table__row--selected": isItemSelected(__props.item),
+            "bms-table__row--selected": isItemSelected(currentItem.value),
             "bms-table__row--disabled": __props.isChildElement,
             "bms-table__row--dense": __props.dense
           }])
@@ -95760,12 +95781,20 @@
               activated: __props.selectMode === vue.unref(SelectMode).ALL
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(UiBmsInputCheckbox, {
+                __props.selectMode === vue.unref(SelectMode).SINGLE ? (vue.openBlock(), vue.createBlock(BmsInputRadio, {
+                  key: 0,
+                  name: vue.unref(v4)(),
+                  disabled: __props.selectableDisabled,
+                  value: currentItem.value,
+                  "model-value": isItemSelected(currentItem.value) ? currentItem.value : null,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("select", currentItem.value))
+                }, null, 8, ["name", "disabled", "value", "model-value"])) : (vue.openBlock(), vue.createBlock(UiBmsInputCheckbox, {
+                  key: 1,
                   name: vue.unref(v4)(),
                   disabled: __props.selectMode === vue.unref(SelectMode).ALL || __props.selectableDisabled,
-                  "model-value": isItemSelected(__props.item),
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("select", __props.item))
-                }, null, 8, ["name", "disabled", "model-value"])
+                  "model-value": isItemSelected(currentItem.value),
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => emits("select", currentItem.value))
+                }, null, 8, ["name", "disabled", "model-value"]))
               ]),
               _: 1
             }, 8, ["direction", "activated"])
@@ -95813,7 +95842,7 @@
     }
   });
 
-  const UiBmsTableRow = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-c6304837"]]);
+  const UiBmsTableRow = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-2ab3888f"]]);
 
   const _hoisted_1$b = { class: "bms-table" };
   const _hoisted_2$9 = { class: "bms-table__actions" };
@@ -95831,16 +95860,20 @@
     key: 0,
     class: "bms-table__loader"
   };
-  const _hoisted_11$1 = { class: "bms-table__headers bms-table__row" };
-  const _hoisted_12$1 = { key: 0 };
-  const _hoisted_13$1 = ["onClick"];
-  const _hoisted_14$1 = { class: "header-content" };
-  const _hoisted_15$1 = { class: "bms-table__body" };
-  const _hoisted_16$1 = {
+  const _hoisted_11$1 = {
+    ref: "thead",
+    class: "bms-table__header"
+  };
+  const _hoisted_12$1 = { class: "bms-table__headers bms-table__row" };
+  const _hoisted_13$1 = { key: 0 };
+  const _hoisted_14$1 = ["onClick"];
+  const _hoisted_15$1 = { class: "header-content" };
+  const _hoisted_16$1 = { class: "bms-table__body" };
+  const _hoisted_17 = {
     key: 1,
     class: "bms-table__row"
   };
-  const _hoisted_17 = ["colspan"];
+  const _hoisted_18 = ["colspan"];
   const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "UiBmsTable",
     props: /* @__PURE__ */ vue.mergeModels({
@@ -95871,31 +95904,23 @@
       const selectedItems = vue.useModel(__props, "selectedItems");
       const emits = __emit;
       const pagination = vue.ref(null);
-      const isHeaderStuck = vue.ref(false);
-      const thead = vue.ref(null);
-      const filteredHeaders = vue.computed(() => {
-        return enforceActionsColumnHeader(props.headers);
-      });
+      const isFocusOnPagination = () => pagination.value?.contains(document.activeElement);
+      vue.watch(
+        () => props.items,
+        async function keepFocusOnPaginationWhenUsed(newVal, oldVal) {
+          if (oldVal.length > 0 && newVal.length > 0 && isFocusOnPagination()) {
+            await vue.nextTick();
+            pagination.value?.focus();
+          }
+        },
+        { deep: true }
+      );
+      const filteredHeaders = vue.computed(
+        () => enforceActionsColumnHeader(props.headers)
+      );
       const tableClass = vue.computed(
         () => `bms-table__table bms-table__table--${props.mode}`
       );
-      const getAlignClass = (header) => {
-        const align = !header.align ? "start" : header.align;
-        return `u-text-align-${align}`;
-      };
-      const getHeaderClasses = (header) => {
-        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) => {
         if (!props.sort.key || header.key !== props.sort.key) {
           return ChevronsUpDown;
@@ -95909,41 +95934,19 @@
             return ChevronsUpDown;
         }
       };
-      const isFocusOnPagination = () => {
-        return pagination.value?.contains(document.activeElement);
-      };
-      vue.watch(
-        () => props.items,
-        async (newVal, oldVal) => {
-          if (oldVal.length > 0 && newVal.length > 0 && isFocusOnPagination()) {
-            await vue.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) => {
-        return props.selectMode === SelectMode.ALL || !!selectedItems.value.find((it) => _isEqual(item, it));
-      };
+      const isItemSelected = (item) => props.selectMode === SelectMode.ALL || !!selectedItems.value.find((it) => _isEqual(item, it));
       const onItemSelect = (item) => {
-        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);
+          }
         }
       };
       const areAllCurrentItemsSelected = vue.ref(props.selectMode === SelectMode.ALL);
@@ -95955,7 +95958,7 @@
         if (props.selectMode === SelectMode.ALL) {
           emits("clearSelection");
         }
-        if (selectedItems.value.length > props.items.length) {
+        if (selectedItems.value.length > props.totalSize) {
           selectedItems.value = [];
         } else {
           if (!areAllCurrentItemsSelected.value) {
@@ -95963,11 +95966,12 @@
               if (!isItemSelected(item)) {
                 selectedItems.value.push(item);
               }
+              if (item?.childElement && !isItemSelected(item?.childElement)) {
+                selectedItems.value.push(item.childElement);
+              }
             });
           } else {
-            selectedItems.value = selectedItems.value.filter(
-              (selectedItem) => !props.items.find((item) => _isEqual(item, selectedItem))
-            );
+            selectedItems.value = [];
           }
         }
       };
@@ -96040,7 +96044,7 @@
                   _cache[1] || (_cache[1] = vue.createElementVNode("strong", null, "1", -1)),
                   _cache[2] || (_cache[2] = vue.createTextVNode(" élément du tableau est sélectionné. ", -1))
                 ], 64)) : (vue.openBlock(), vue.createElementBlock("strong", _hoisted_8$2, vue.toDisplayString(selectedItems.value.length) + " éléments du tableau sont sélectionnés. ", 1)),
-                __props.totalSize < __props.maxSelectedSize ? (vue.openBlock(), vue.createElementBlock("span", {
+                __props.totalSize < __props.maxSelectedSize && __props.selectMode !== vue.unref(SelectMode).SINGLE ? (vue.openBlock(), vue.createElementBlock("span", {
                   key: 2,
                   class: "select-mode-all",
                   onClick: selectAll
@@ -96074,14 +96078,11 @@
               ref_key: "mainComponent",
               ref: mainComponent
             }, [
-              vue.createElementVNode("thead", {
-                ref_key: "thead",
-                ref: thead,
-                class: vue.normalizeClass(["bms-table__header", { stuck: isHeaderStuck.value }])
-              }, [
-                vue.createElementVNode("tr", _hoisted_11$1, [
-                  __props.selectable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_12$1, [
-                    vue.createVNode(UiBmsInputCheckbox, {
+              vue.createElementVNode("thead", _hoisted_11$1, [
+                vue.createElementVNode("tr", _hoisted_12$1, [
+                  __props.selectable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_13$1, [
+                    __props.selectMode !== vue.unref(SelectMode).SINGLE ? (vue.openBlock(), vue.createBlock(UiBmsInputCheckbox, {
+                      key: 0,
                       name: "select-all",
                       disabled: __props.items.length === 0 || __props.selectableDisabled,
                       "onUpdate:modelValue": [
@@ -96089,18 +96090,18 @@
                         _cache[0] || (_cache[0] = ($event) => areAllCurrentItemsSelected.value = $event)
                       ],
                       modelValue: areAllCurrentItemsSelected.value
-                    }, null, 8, ["disabled", "modelValue"])
+                    }, null, 8, ["disabled", "modelValue"])) : vue.createCommentVNode("", true)
                   ])) : vue.createCommentVNode("", true),
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredHeaders.value, (header) => {
                     return vue.openBlock(), vue.createElementBlock("th", {
                       style: vue.normalizeStyle({
                         "--table-cell-width": header?.width || void 0
                       }),
-                      class: vue.normalizeClass(getHeaderClasses(header)),
+                      class: vue.normalizeClass(vue.unref(getHeaderClasses)(header, __props.sort)),
                       key: header.label,
                       onClick: ($event) => emits("clickHeader", header)
                     }, [
-                      vue.createElementVNode("span", _hoisted_14$1, [
+                      vue.createElementVNode("span", _hoisted_15$1, [
                         vue.createTextVNode(vue.toDisplayString(header.label) + " ", 1),
                         header.sortable ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getSortComponent(header)), {
                           key: 0,
@@ -96108,11 +96109,11 @@
                           class: "header-content-sort"
                         })) : vue.createCommentVNode("", true)
                       ])
-                    ], 14, _hoisted_13$1);
+                    ], 14, _hoisted_14$1);
                   }), 128))
                 ])
-              ], 2),
-              vue.createElementVNode("tbody", _hoisted_15$1, [
+              ], 512),
+              vue.createElementVNode("tbody", _hoisted_16$1, [
                 __props.items.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(__props.items, (item) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: item }, [
                     vue.createVNode(UiBmsTableRow, {
@@ -96147,7 +96148,8 @@
                         selectable: __props.selectable,
                         headers: filteredHeaders.value,
                         "select-mode": __props.selectMode,
-                        "selectable-disabled": __props.selectableDisabled
+                        "selectable-disabled": __props.selectableDisabled,
+                        onSelect: onItemSelect
                       }, vue.createSlots({ _: 2 }, [
                         vue.renderList(__props.headers, (cell) => {
                           return {
@@ -96160,7 +96162,7 @@
                       ]), 1032, ["item", "selected-items", "selectable", "headers", "select-mode", "selectable-disabled"])
                     ], true) : vue.createCommentVNode("", true)
                   ], 64);
-                }), 128)) : (vue.openBlock(), vue.createElementBlock("tr", _hoisted_16$1, [
+                }), 128)) : (vue.openBlock(), vue.createElementBlock("tr", _hoisted_17, [
                   vue.createElementVNode("td", {
                     colspan: __props.selectable ? filteredHeaders.value.length + 1 : filteredHeaders.value.length,
                     class: "bms-table__cell bms-table__cell--empty"
@@ -96168,7 +96170,7 @@
                     !props.loading ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
                       _cache[3] || (_cache[3] = vue.createTextVNode("Aucune donnée", -1))
                     ], true) : vue.createCommentVNode("", true)
-                  ], 8, _hoisted_17)
+                  ], 8, _hoisted_18)
                 ]))
               ])
             ], 2)) : vue.createCommentVNode("", true),
@@ -96186,7 +96188,7 @@
     }
   });
 
-  const UiBmsTable = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-9cbfc981"]]);
+  const UiBmsTable = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-45f34152"]]);
 
   const _hoisted_1$a = { class: "filter-button-container" };
   const _hoisted_2$8 = {
@@ -102804,7 +102806,8 @@
         value: SortValue.default
       }) },
       selectable: { type: Boolean, default: false },
-      selectableDisabled: { type: Boolean, default: false }
+      selectableDisabled: { type: Boolean, default: false },
+      selectMode: { default: SelectMode.DEFAULT }
     }, {
       "selectedItems": {
         required: false,
@@ -102937,9 +102940,14 @@
       const onClickHeader = (header) => {
         changeSort(header);
       };
+      const elementsAndChildElements = vue.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 = vue.computed(() => elementsAndChildElements.value.length);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(UiBmsTable, {
           selectedItems: selectedItems.value,
@@ -102952,7 +102960,8 @@
           sort: vue.unref(sort),
           selectable: __props.selectable,
           selectableDisabled: __props.selectableDisabled,
-          totalSize: vue.unref(items).length,
+          totalSize: totalSize.value,
+          selectMode: __props.selectMode,
           onClickHeader,
           onSelectAll
         }, vue.createSlots({
@@ -103047,12 +103056,12 @@
               ])
             };
           })
-        ]), 1032, ["selectedItems", "loading", "items", "headers", "mode", "hasFilters", "sort", "selectable", "selectableDisabled", "totalSize"]);
+        ]), 1032, ["selectedItems", "loading", "items", "headers", "mode", "hasFilters", "sort", "selectable", "selectableDisabled", "totalSize", "selectMode"]);
       };
     }
   });
 
-  const BmsTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-2f003e4e"]]);
+  const BmsTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-704a7453"]]);
 
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "BmsCocarde",
@@ -106043,6 +106052,7 @@
   exports.getCurrentHistory = getCurrentHistory;
   exports.getCurrentLocation = getCurrentLocation;
   exports.getFiltersAsQueryParams = getFiltersAsQueryParams;
+  exports.getHeaderClasses = getHeaderClasses;
   exports.getImageFromFile = getImageFromFile;
   exports.getNumberFromPathQuery = getNumberFromPathQuery;
   exports.getStringFromPathQuery = getStringFromPathQuery;