@fkui/vue 5.45.0 → 5.45.1

package/dist/cjs/index.cjs.js

@@ -9817,7 +9817,16 @@ const _sfc_main$J = vue.defineComponent({
     }
   },
   setup() {
-    return FTableInjected();
+    const {
+      renderColumns,
+      setVisibilityColumn: setVisibilityColumn2,
+      addColumn: addColumn2
+    } = FTableInjected();
+    return {
+      renderColumns,
+      setVisibilityColumn: setVisibilityColumn2,
+      addColumn: addColumn2
+    };
   },
   computed: {
     classes() {
@@ -13721,10 +13730,6 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
     const expanded = isExpanded(row) ? [] : ["table__expandable-row--collapsed"];
     return ["table__expandable-row", ...border, ...expanded];
   }
-  function expandableColumnClasses(column, index) {
-    const indented = index === 0 ? ["table__column--indented"] : [];
-    return ["table__column", `table__column--${column.type}`, column.size, ...indented];
-  }
   function getExpandableDescribedby(row) {
     if (!isExpandableTable) {
       return void 0;
@@ -13758,7 +13763,6 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
     isExpanded,
     rowAriaExpanded,
     expandableRowClasses,
-    expandableColumnClasses,
     getExpandableDescribedby,
     expandableRows,
     hasExpandableContent
@@ -13868,6 +13872,22 @@ const _sfc_main$g = vue.defineComponent({
       type: Array,
       required: false,
       default: void 0
+    },
+    /**
+     * Enable showing the active row.
+     */
+    showActive: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * V-model will bind to value containing the current active row.
+     */
+    active: {
+      type: Object,
+      required: false,
+      default: () => void 0
     }
   },
   emits: [
@@ -13876,6 +13896,7 @@ const _sfc_main$g = vue.defineComponent({
     "update",
     "unselect",
     "update:modelValue",
+    "update:active",
     "select",
     /**
      * Emitted when row is expanded.
@@ -13910,7 +13931,8 @@ const _sfc_main$g = vue.defineComponent({
       activeRow: void 0,
       columns: [],
       selectedRows: [],
-      tr: []
+      tr: [],
+      tbodyKey: 0
     };
   },
   computed: {
@@ -13948,7 +13970,7 @@ const _sfc_main$g = vue.defineComponent({
       return tableScrollClasses(this.scroll);
     },
     nbOfColumns() {
-      let columnCount = this.columns.length;
+      let columnCount = this.visibleColumns.length;
       if (this.selectable) {
         columnCount++;
       }
@@ -13969,6 +13991,20 @@ const _sfc_main$g = vue.defineComponent({
           });
         }
       }
+    },
+    active: {
+      immediate: true,
+      handler: function() {
+        this.updateActiveRowFromVModel();
+      }
+    },
+    showActive: {
+      immediate: true,
+      handler: function(val) {
+        if (!val) {
+          this.tbodyKey ^= 1;
+        }
+      }
     }
   },
   updated() {
@@ -13987,6 +14023,9 @@ const _sfc_main$g = vue.defineComponent({
   },
   methods: {
     isActive(row) {
+      if (!this.showActive) {
+        return false;
+      }
       return itemEquals(row, this.activeRow, this.keyAttribute);
     },
     isSelected(row) {
@@ -14019,7 +14058,7 @@ const _sfc_main$g = vue.defineComponent({
       }
       if (!itemEquals(row, this.activeRow, this.keyAttribute)) {
         this.$emit("change", row);
-        this.activeRow = row;
+        this.setActiveRow(row);
         if (tr) {
           tr.focus();
           const td = tr.children[0];
@@ -14110,6 +14149,17 @@ const _sfc_main$g = vue.defineComponent({
     },
     escapeNewlines(value) {
       return value.replace(/\n/g, "<br/>");
+    },
+    updateActiveRowFromVModel() {
+      if (this.active === void 0) {
+        this.setActiveRow(void 0);
+      } else if (!itemEquals(this.active, this.activeRow, this.keyAttribute)) {
+        this.setActiveRow(this.active);
+      }
+    },
+    setActiveRow(row) {
+      this.activeRow = row;
+      this.$emit("update:active", this.activeRow);
     }
   }
 });
@@ -14147,40 +14197,37 @@ const _hoisted_11$1 = {
   key: 1,
   class: "table__column__description"
 };
-const _hoisted_12$1 = {
-  ref: "tbodyElement"
-};
-const _hoisted_13 = ["aria-label", "aria-expanded", "aria-level", "aria-describedby", "onKeydown", "onClick"];
-const _hoisted_14 = {
+const _hoisted_12$1 = ["aria-label", "aria-expanded", "aria-level", "aria-describedby", "onKeydown", "onClick"];
+const _hoisted_13 = {
   key: 0
 };
-const _hoisted_15 = {
+const _hoisted_14 = {
   key: 0,
   class: "table__expand-icon"
 };
-const _hoisted_16 = {
+const _hoisted_15 = {
   key: 1,
   class: "table__column--selectable"
 };
-const _hoisted_17 = {
+const _hoisted_16 = {
   class: "table__input"
 };
-const _hoisted_18 = {
+const _hoisted_17 = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_19 = {
+const _hoisted_18 = {
   key: 0,
-  class: "table__column--selectable"
+  class: "table__column--placeholder"
 };
-const _hoisted_20 = ["colspan"];
-const _hoisted_21 = {
+const _hoisted_19 = ["colspan"];
+const _hoisted_20 = {
   key: 0
 };
-const _hoisted_22 = {
+const _hoisted_21 = {
   key: 1
 };
-const _hoisted_23 = ["colspan"];
+const _hoisted_22 = ["colspan"];
 function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_f_checkbox_field = vue.resolveComponent("f-checkbox-field");
@@ -14189,12 +14236,12 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   }, [vue.createElementVNode("table", vue.mergeProps({
     class: ["table", _ctx.tableClasses],
     role: _ctx.tableRole
-  }, _ctx.$attrs), [_ctx.hasCaption ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$d, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[14] || (_cache[14] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [_ctx.isExpandableTable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$9)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$8)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (column) => {
+  }, _ctx.$attrs), [_ctx.hasCaption ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$d, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [_ctx.isExpandableTable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$9)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$8)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (column) => {
     return vue.openBlock(), vue.createElementBlock("col", {
       key: column.id,
       class: vue.normalizeClass(column.size)
     }, null, 2);
-  }), 128))]), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_5$6, [_ctx.isExpandableTable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$4, [vue.createElementVNode("span", _hoisted_7$4, vue.toDisplayString(_ctx.$t("fkui.interactive-table.select", "Expandera")), 1)])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_8$4, [vue.createElementVNode("span", _hoisted_9$3, vue.toDisplayString(_ctx.$t("fkui.interactive-table.select", "Markera")), 1)])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.visibleColumns, (column) => {
+  }), 128))]), _cache[16] || (_cache[16] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_5$6, [_ctx.isExpandableTable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$4, [vue.createElementVNode("span", _hoisted_7$4, vue.toDisplayString(_ctx.$t("fkui.interactive-table.select", "Expandera")), 1)])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_8$4, [vue.createElementVNode("span", _hoisted_9$3, vue.toDisplayString(_ctx.$t("fkui.interactive-table.select", "Markera")), 1)])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.visibleColumns, (column) => {
     return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
       key: column.id,
       scope: "col",
@@ -14208,7 +14255,10 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       class: vue.normalizeClass(_ctx.iconClasses(column)),
       name: _ctx.iconName(column)
     }, null, 8, ["class", "name"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), column.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$1, vue.toDisplayString(column.description), 1)) : vue.createCommentVNode("", true)], 16);
-  }), 128))])]), _cache[16] || (_cache[16] = vue.createTextVNode()), vue.createElementVNode("tbody", _hoisted_12$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, index) => {
+  }), 128))])]), _cache[17] || (_cache[17] = vue.createTextVNode()), (vue.openBlock(), vue.createElementBlock("tbody", {
+    ref: "tbodyElement",
+    key: _ctx.tbodyKey
+  }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, index) => {
     return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
       key: _ctx.rowKey(row)
     }, [vue.createElementVNode("tr", {
@@ -14220,15 +14270,15 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       tabindex: "0",
       onKeydown: vue.withModifiers(($event) => _ctx.onKeydown($event, index), ["self"]),
       onClick: ($event) => _ctx.onClick($event, row, index)
-    }, [_ctx.isExpandableTable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_14, [_ctx.hasExpandableContent(row) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, [vue.createVNode(_component_f_icon, {
+    }, [_ctx.isExpandableTable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_13, [_ctx.hasExpandableContent(row) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, [vue.createVNode(_component_f_icon, {
       name: "arrow-right",
       rotate: _ctx.isExpanded(row) ? "270" : "90"
-    }, null, 8, ["rotate"])])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_16, [vue.createElementVNode("div", _hoisted_17, [vue.createVNode(_component_f_checkbox_field, {
+    }, null, 8, ["rotate"])])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_15, [vue.createElementVNode("div", _hoisted_16, [vue.createVNode(_component_f_checkbox_field, {
       value: true,
       "model-value": _ctx.isSelected(row),
       onClick: vue.withModifiers(($event) => _ctx.onSelect(row), ["self"])
     }, {
-      default: vue.withCtx(() => [_ctx.hasCheckboxDescription ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_18, [vue.renderSlot(_ctx.$slots, "checkbox-description", vue.mergeProps({
+      default: vue.withCtx(() => [_ctx.hasCheckboxDescription ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_17, [vue.renderSlot(_ctx.$slots, "checkbox-description", vue.mergeProps({
         ref_for: true
       }, {
         row
@@ -14238,21 +14288,21 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       ref_for: true
     }, {
       row
-    }))], 42, _hoisted_13), _cache[11] || (_cache[11] = vue.createTextVNode()), _ctx.isExpandableTable && _ctx.hasExpandableContent(row) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+    }))], 42, _hoisted_12$1), _cache[11] || (_cache[11] = vue.createTextVNode()), _ctx.isExpandableTable && _ctx.hasExpandableContent(row) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
       key: 0
     }, vue.renderList(_ctx.expandableRows(row), (expandableRow, expandableIndex) => {
       return vue.openBlock(), vue.createElementBlock("tr", {
         key: _ctx.rowKey(expandableRow),
         "aria-level": "2",
         class: vue.normalizeClass(_ctx.expandableRowClasses(row, expandableIndex))
-      }, [_cache[8] || (_cache[8] = vue.createElementVNode("td", null, null, -1)), _cache[9] || (_cache[9] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_19)) : vue.createCommentVNode("", true), _cache[10] || (_cache[10] = vue.createTextVNode()), !_ctx.hasExpandableSlot ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
-        key: 1
-      }, vue.renderList(_ctx.columns, (column, columnIndex) => {
-        return vue.openBlock(), vue.createElementBlock("td", {
-          key: `${_ctx.rowKey(expandableRow)}${column.name}`,
-          class: vue.normalizeClass(_ctx.expandableColumnClasses(column, columnIndex))
-        }, vue.toDisplayString(expandableRow[column.name]), 3);
-      }), 128)) : (vue.openBlock(), vue.createElementBlock("td", {
+      }, [_cache[8] || (_cache[8] = vue.createElementVNode("td", {
+        class: "table__column--placeholder"
+      }, null, -1)), _cache[9] || (_cache[9] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_18)) : vue.createCommentVNode("", true), _cache[10] || (_cache[10] = vue.createTextVNode()), !_ctx.hasExpandableSlot ? vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
+        key: 1,
+        ref_for: true
+      }, {
+        row: expandableRow
+      })) : (vue.openBlock(), vue.createElementBlock("td", {
         key: 2,
         class: "table__column table__column--indented",
         colspan: _ctx.columns.length
@@ -14261,14 +14311,16 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       }, {
         expandableRow,
         parentRow: row
-      }))], 8, _hoisted_20))], 2);
+      }))], 8, _hoisted_19))], 2);
     }), 128)) : vue.createCommentVNode("", true)], 64);
-  }), 128)), _cache[12] || (_cache[12] = vue.createTextVNode()), _ctx.isEmpty && _ctx.columns.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_21, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
+  }), 128)), _cache[13] || (_cache[13] = vue.createTextVNode()), _ctx.isEmpty && _ctx.columns.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_20, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
     row: {}
-  })))])) : vue.createCommentVNode("", true), _cache[13] || (_cache[13] = vue.createTextVNode()), _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_22, [vue.createElementVNode("td", {
+  })))])) : vue.createCommentVNode("", true), _cache[14] || (_cache[14] = vue.createTextVNode()), _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_21, [vue.createElementVNode("td", {
     class: "table__column table__column--action",
     colspan: _ctx.nbOfColumns
-  }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.interactive-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_23)])) : vue.createCommentVNode("", true)], 512)], 16, _hoisted_1$f)], 2);
+  }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.interactive-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_22), _cache[12] || (_cache[12] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
+    row: {}
+  })))])) : vue.createCommentVNode("", true)]))], 16, _hoisted_1$f)], 2);
 }
 const FInteractiveTable = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 const _sfc_main$f = vue.defineComponent({