@fkui/vue-labs 6.19.0 → 6.19.1

package/dist/cjs/index.cjs.js

@@ -2718,11 +2718,11 @@ function stopEdit(element, reason) {
   }
   return newCellTarget;
 }
-const _hoisted_1$8 = {
+const _hoisted_1$7 = {
   key: 0,
   class: "table-ng__row"
 };
-const _hoisted_2$4 = {
+const _hoisted_2$3 = {
   key: 0,
   tabindex: "-1",
   class: "table-ng__column"
@@ -2766,7 +2766,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     vue.provide("renderHeader", __props.renderHeader);
     const toggleIcon = vue.computed(() => __props.isExpanded ? "arrow-down" : "arrow-right");
     return (_ctx, _cache) => {
-      return _ctx.renderHeader ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_1$8, [_ctx.isTreegrid ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_2$4)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")])) : (vue.openBlock(), vue.createElementBlock("tr", {
+      return _ctx.renderHeader ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_1$7, [_ctx.isTreegrid ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_2$3)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")])) : (vue.openBlock(), vue.createElementBlock("tr", {
         key: 1,
         class: "table-ng__row",
         "aria-level": _ctx.ariaLevel
@@ -2787,8 +2787,8 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$7 = ["checked", "aria-label"];
-const _hoisted_2$3 = ["checked", "aria-label"];
+const _hoisted_1$6 = ["checked", "aria-label"];
+const _hoisted_2$2 = ["checked", "aria-label"];
 const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableCheckbox",
   props: {
@@ -2820,7 +2820,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         "aria-label": _ctx.column.header,
         tabindex: "-1",
         onChange
-      }, null, 40, _hoisted_1$7)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
+      }, null, 40, _hoisted_1$6)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
         key: 1,
         ref: "target",
         tabindex: "-1",
@@ -2829,13 +2829,12 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createElementVNode("input", {
         checked: _ctx.column.value(_ctx.row),
         type: "checkbox",
-        "aria-label": _ctx.column.header,
-        disabled: ""
-      }, null, 8, _hoisted_2$3)], 544));
+        "aria-label": _ctx.column.header
+      }, null, 8, _hoisted_2$2)], 544));
     };
   }
 });
-const _hoisted_1$6 = ["checked", "aria-label"];
+const _hoisted_1$5 = ["checked", "aria-label"];
 const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableRadio",
   props: {
@@ -2866,11 +2865,11 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         "aria-label": _ctx.column.header,
         tabindex: "-1",
         onChange
-      }, null, 40, _hoisted_1$6)], 32);
+      }, null, 40, _hoisted_1$5)], 32);
     };
   }
 });
-const _hoisted_1$5 = ["href"];
+const _hoisted_1$4 = ["href"];
 const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableAnchor",
   props: {
@@ -2900,7 +2899,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         target: "_blank",
         href: _ctx.column.href,
         tabindex: "-1"
-      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 9, _hoisted_1$5)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
+      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 9, _hoisted_1$4)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
         key: 1,
         ref: "target",
         tabindex: "-1",
@@ -2910,7 +2909,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$4 = {
+const _hoisted_1$3 = {
   class: "sr-only"
 };
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
@@ -2954,7 +2953,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       }, [_ctx.column.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FIcon), {
         key: 0,
         name: _ctx.column.icon
-      }, null, 8, ["name"])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_1$4, vue.toDisplayString(_ctx.column.value(_ctx.row)), 1)], 512)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
+      }, null, 8, ["name"])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_1$3, vue.toDisplayString(_ctx.column.value(_ctx.row)), 1)], 512)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
         key: 1,
         ref: "td",
         tabindex: "-1",
@@ -2974,7 +2973,7 @@ function useStartStopEdit() {
 function isAlphanumeric(e) {
   return e.key.length === 1 && !e.ctrlKey && !e.metaKey;
 }
-const _hoisted_1$3 = {
+const _hoisted_1$2 = {
   class: "table-ng__editable"
 };
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
@@ -3130,7 +3129,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         onClick: vue.withModifiers(onClickCell, ["stop"]),
         onKeydown,
         onTableActivateCell: onActivateCell
-      }, [vue.createElementVNode("div", _hoisted_1$3, [vue.createElementVNode("span", {
+      }, [vue.createElementVNode("div", _hoisted_1$2, [vue.createElementVNode("span", {
         ref: "view",
         class: "table-ng__editable__text"
       }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 513), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("input", {
@@ -3160,10 +3159,10 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$1 = {
   class: "table-ng__editable"
 };
-const _hoisted_2$2 = {
+const _hoisted_2$1 = {
   class: "table-ng__editable__text"
 };
 const _hoisted_3$1 = ["aria-controls"];
@@ -3347,7 +3346,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         onKeydown: onCellKeyDown,
         onClick: vue.withModifiers(onCellClick, ["stop"]),
         onTableActivateCell: onActivateCell
-      }, [vue.withDirectives(vue.createElementVNode("div", _hoisted_1$2, [vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(viewValue.value), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FIcon), {
+      }, [vue.withDirectives(vue.createElementVNode("div", _hoisted_1$1, [vue.createElementVNode("span", _hoisted_2$1, vue.toDisplayString(viewValue.value), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FIcon), {
         name: "pen",
         class: "table-ng__editable__icon"
       })], 512), [[vue.vShow, !editing.value]]), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("div", {
@@ -3383,6 +3382,31 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITableRowheader",
+  props: {
+    row: {},
+    column: {}
+  },
+  setup(__props) {
+    const thRef = vue.useTemplateRef("th");
+    function onActivateCell(e) {
+      logic.assertRef(thRef);
+      thRef.value.tabIndex = 0;
+      if (e.detail.focus) {
+        thRef.value.focus();
+      }
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("th", {
+        ref: "th",
+        class: "table-ng__cell table-ng__cell--rowheader",
+        scope: "row",
+        onTableActivateCell: onActivateCell
+      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 545);
+    };
+  }
+});
 function getValueFn(fn, key, coerce, defaultValue) {
   if (fn) {
     return fn;
@@ -3406,7 +3430,7 @@ function getUpdateFn(fn, key) {
   return () => void 0;
 }
 function normalizeTableColumn(column) {
-  var _column$key, _column$key2, _column$validation, _column$key3, _column$key4, _column$icon, _column$key5, _column$key6, _column$key7;
+  var _column$key, _column$key2, _column$validation, _column$key3, _column$key4, _column$key5, _column$icon, _column$key6, _column$key7, _column$key8;
   if ("render" in column) {
     return {
       type: void 0,
@@ -3452,6 +3476,14 @@ function normalizeTableColumn(column) {
         sortable: (_column$key3 = column.key) !== null && _column$key3 !== void 0 ? _column$key3 : null,
         component: _sfc_main$4
       };
+    case "rowheader":
+      return {
+        type: "rowheader",
+        header: column.header,
+        value: getValueFn(column.value, column.key, String, ""),
+        sortable: (_column$key4 = column.key) !== null && _column$key4 !== void 0 ? _column$key4 : null,
+        component: _sfc_main$2
+      };
     case "anchor":
       return {
         type: "anchor",
@@ -3462,7 +3494,7 @@ function normalizeTableColumn(column) {
           var _column$enabled;
           return Boolean((_column$enabled = column.enabled) !== null && _column$enabled !== void 0 ? _column$enabled : true);
         },
-        sortable: (_column$key4 = column.key) !== null && _column$key4 !== void 0 ? _column$key4 : null,
+        sortable: (_column$key5 = column.key) !== null && _column$key5 !== void 0 ? _column$key5 : null,
         component: _sfc_main$6
       };
     case "button":
@@ -3476,7 +3508,7 @@ function normalizeTableColumn(column) {
           return Boolean((_column$enabled2 = column.enabled) !== null && _column$enabled2 !== void 0 ? _column$enabled2 : true);
         },
         icon: (_column$icon = column.icon) !== null && _column$icon !== void 0 ? _column$icon : null,
-        sortable: (_column$key5 = column.key) !== null && _column$key5 !== void 0 ? _column$key5 : null,
+        sortable: (_column$key6 = column.key) !== null && _column$key6 !== void 0 ? _column$key6 : null,
         component: _sfc_main$5
       };
     case "select":
@@ -3490,7 +3522,7 @@ function normalizeTableColumn(column) {
           return Boolean((_column$editable3 = column.editable) !== null && _column$editable3 !== void 0 ? _column$editable3 : false);
         },
         options: column.options,
-        sortable: (_column$key6 = column.key) !== null && _column$key6 !== void 0 ? _column$key6 : null,
+        sortable: (_column$key7 = column.key) !== null && _column$key7 !== void 0 ? _column$key7 : null,
         component: _sfc_main$3
       };
     case void 0:
@@ -3501,7 +3533,7 @@ function normalizeTableColumn(column) {
         update() {
         },
         editable: () => false,
-        sortable: (_column$key7 = column.key) !== null && _column$key7 !== void 0 ? _column$key7 : null,
+        sortable: (_column$key8 = column.key) !== null && _column$key8 !== void 0 ? _column$key8 : null,
         validation: {},
         component: _sfc_main$4
       };
@@ -3515,98 +3547,6 @@ function normalizeTableColumns(columns) {
     return normalizeTableColumn(column);
   });
 }
-const _hoisted_1$1 = {
-  key: 0,
-  class: "pager"
-};
-const _hoisted_2$1 = {
-  key: 1
-};
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
-  __name: "ITablePager",
-  props: {
-    items: {},
-    itemsPerPage: {
-      default: 10
-    }
-  },
-  emits: ["itemRange"],
-  setup(__props, {
-    emit: __emit
-  }) {
-    const currentPage = vue.ref(1);
-    const currentPageItemLength = vue.ref(0);
-    const numberOfPages = vue.ref(0);
-    const numberOfItems = vue.computed(() => {
-      return __props.items.length;
-    });
-    const emit = __emit;
-    function switchToNextPage() {
-      currentPage.value++;
-      defineCurrentPage();
-    }
-    function switchToPreviousPage() {
-      currentPage.value--;
-      defineCurrentPage();
-    }
-    function switchToSpecificPage(page) {
-      currentPage.value = page;
-      defineCurrentPage();
-    }
-    function defineNumberOfPages() {
-      numberOfPages.value = Math.ceil(numberOfItems.value / __props.itemsPerPage);
-    }
-    function defineCurrentPage() {
-      const currentPageFirstItemId = __props.itemsPerPage * (currentPage.value - 1) + 1;
-      const currentPageLastItemId = Math.min(__props.itemsPerPage * currentPage.value, numberOfItems.value);
-      const currentPageItems = __props.items.slice(currentPageFirstItemId - 1, currentPageLastItemId);
-      emit("itemRange", currentPageItems);
-      currentPageItemLength.value = currentPageItems.length;
-    }
-    function showPageButton(page) {
-      const numberOfAdjacentPagesShown = 2;
-      return page === 1 || Math.abs(currentPage.value - page) <= numberOfAdjacentPagesShown || page === numberOfPages.value;
-    }
-    vue.onMounted(() => {
-      defineNumberOfPages();
-      defineCurrentPage();
-    });
-    return (_ctx, _cache) => {
-      return numberOfPages.value > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [currentPage.value !== 1 ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FButton), {
-        key: 0,
-        variant: "tertiary",
-        size: "small",
-        "icon-left": "chevrons-left",
-        onClick: _cache[0] || (_cache[0] = ($event) => switchToPreviousPage())
-      }, {
-        default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [vue.createTextVNode("\n            Föregående\n        ", -1)])]),
-        _: 1
-      })) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(numberOfPages.value, (page) => {
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-          key: page
-        }, [showPageButton(page) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FButton), {
-          key: 0,
-          size: "small",
-          variant: "tertiary",
-          disabled: page === currentPage.value,
-          onClick: ($event) => switchToSpecificPage(page)
-        }, {
-          default: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(page), 1)]),
-          _: 2
-        }, 1032, ["disabled", "onClick"])) : showPageButton(page + 1) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, "...")) : vue.createCommentVNode("", true)], 64);
-      }), 128)), _cache[5] || (_cache[5] = vue.createTextVNode()), currentPage.value !== numberOfPages.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FButton), {
-        key: 1,
-        variant: "tertiary",
-        size: "small",
-        "icon-right": "arrow-right",
-        onClick: _cache[1] || (_cache[1] = ($event) => switchToNextPage())
-      }, {
-        default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [vue.createTextVNode("\n            Nästa\n        ", -1)])]),
-        _: 1
-      })) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true);
-    };
-  }
-});
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableHeader",
   props: {
@@ -3698,17 +3638,17 @@ const _hoisted_2 = {
 const _hoisted_3 = {
   key: 0,
   scope: "col",
-  class: "table-ng__column table-ng__column--checkbox"
+  tabindex: "-1",
+  class: "table-ng__column"
 };
 const _hoisted_4 = {
   key: 1,
-  scope: "col"
+  scope: "col",
+  class: "table-ng__column table-ng__column--checkbox"
 };
 const _hoisted_5 = {
   key: 2,
-  scope: "col",
-  tabindex: "-1",
-  class: "table-ng__column"
+  scope: "col"
 };
 const _hoisted_6 = {
   key: 0,
@@ -3716,9 +3656,6 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = ["colspan"];
 const _hoisted_8 = ["colspan"];
-const _hoisted_9 = {
-  key: 0
-};
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "FTable",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -3736,10 +3673,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     },
     selectable: {
       default: () => void 0
-    },
-    paginerated: {
-      type: Boolean,
-      default: false
     }
   }, {
     "selectedRows": {
@@ -3757,12 +3690,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const metaRows = vue.computed(() => getMetaRows(keyedRows.value, expandedKeys.value, __props.expandableAttribute));
     const isTreegrid = vue.computed(() => Boolean(__props.expandableAttribute));
     const role = vue.computed(() => isTreegrid.value ? "treegrid" : "grid");
-    const rowsFromPaginator = vue.ref(metaRows.value);
-    const viewRows = vue.computed(() => {
-      return __props.paginerated ? rowsFromPaginator.value : metaRows.value;
-    });
     const isEmpty = vue.computed(() => {
-      return viewRows.value.length === 0;
+      return metaRows.value.length === 0;
     });
     const columnCount = vue.computed(() => {
       const selectableCol = __props.selectable ? 1 : 0;
@@ -3882,9 +3811,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         e.target.tabIndex = -1;
       }
     }
-    function onItemRangeUpdate(items) {
-      rowsFromPaginator.value = items;
-    }
     const {
       sort,
       registerCallbackOnSort,
@@ -3938,14 +3864,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         onFocusout: onTableFocusout,
         onClick,
         onKeydown
-      }, [vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_2, [isMultiSelect.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_3, [vue.createElementVNode("input", {
+      }, [vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_2, [isTreegrid.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_3)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), isMultiSelect.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4, [vue.createElementVNode("input", {
         ref: "selectAll",
         type: "checkbox",
         "aria-label": "select all",
         tabindex: "-1",
         indeterminate: "",
         onChange: onSelectAllChange
-      }, null, 544)])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), isSingleSelect.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4, vue.toDisplayString(singleSelectColumn.header), 1)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), isTreegrid.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_5)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+      }, null, 544)])) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), isSingleSelect.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_5, vue.toDisplayString(singleSelectColumn.header), 1)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$1, {
           key: column.header,
           column,
@@ -3960,7 +3886,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         class: "table-ng__cell"
       }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [_cache[3] || (_cache[3] = vue.createTextVNode(" Tabellen är tom ", -1))])], 8, _hoisted_7)])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
         key: 1
-      }, vue.renderList(viewRows.value, ({
+      }, vue.renderList(metaRows.value, ({
         key,
         row,
         rowIndex,
@@ -4013,10 +3939,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }), 128))], 64))]),
           _: 2
         }, 1032, ["row-key", "aria-rowindex", "aria-level", "aria-setsize", "aria-posinset", "is-treegrid", "is-expandable", "is-expanded"]);
-      }), 128))])], 42, _hoisted_1), _cache[7] || (_cache[7] = vue.createTextVNode()), _ctx.paginerated ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [vue.createVNode(_sfc_main$2, {
-        items: metaRows.value,
-        onItemRange: onItemRangeUpdate
-      }, null, 8, ["items"])])) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "footer")], 64);
+      }), 128))])], 42, _hoisted_1), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "footer")], 64);
     };
   }
 });