@fkui/vue 6.4.0 → 6.5.0

package/dist/cjs/index.cjs.js

@@ -4616,7 +4616,7 @@ const _hoisted_5$l = {
 const _hoisted_6$g = {
   class: "modal__header"
 };
-const _hoisted_7$d = {
+const _hoisted_7$c = {
   key: 0,
   ref: "modalTitle",
   class: "modal__title",
@@ -4652,7 +4652,7 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   }, [vue.createElementVNode("div", _hoisted_4$q, [vue.createElementVNode("div", _hoisted_5$l, [vue.createElementVNode("div", _hoisted_6$g, [vue.createElementVNode("div", {
     tabindex: "0",
     onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusFirst && _ctx.onFocusFirst(...args))
-  }, null, 32), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasHeaderSlot ? (vue.openBlock(), vue.createElementBlock("h1", _hoisted_7$d, [vue.renderSlot(_ctx.$slots, "header")], 512)) : vue.createCommentVNode("", true)]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_8$8, [vue.renderSlot(_ctx.$slots, "content")], 512), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_9$6, [vue.renderSlot(_ctx.$slots, "footer")])]), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_10$3, [vue.createElementVNode("button", {
+  }, null, 32), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasHeaderSlot ? (vue.openBlock(), vue.createElementBlock("h1", _hoisted_7$c, [vue.renderSlot(_ctx.$slots, "header")], 512)) : vue.createCommentVNode("", true)]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_8$8, [vue.renderSlot(_ctx.$slots, "content")], 512), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_9$6, [vue.renderSlot(_ctx.$slots, "footer")])]), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_10$3, [vue.createElementVNode("button", {
     type: "button",
     class: "close-button",
     "aria-label": _ctx.ariaCloseText,
@@ -4665,8 +4665,8 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$W)) : vue.createCommentVNode("", true);
 }
 const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$P]]);
-function prepareButtonList(src, buttonOrder = config.buttonOrder) {
-  const list = src.map((it) => {
+function prepareButtonList(src) {
+  return src.map((it) => {
     var _it$event, _ref, _it$reason, _it$type;
     return {
       label: it.label,
@@ -4677,12 +4677,6 @@ function prepareButtonList(src, buttonOrder = config.buttonOrder) {
       buttonType: it.submitButton ? "submit" : "button"
     };
   });
-  switch (buttonOrder) {
-    case FKUIConfigButtonOrder.LEFT_TO_RIGHT:
-      return list;
-    case FKUIConfigButtonOrder.RIGHT_TO_LEFT:
-      return list.reverse();
-  }
 }
 const defaultButtons = [{
   label: "Primärknapp",
@@ -4780,7 +4774,8 @@ const _sfc_main$1b = vue.defineComponent({
   })],
   computed: {
     preparedButtons() {
-      return prepareButtonList(this.buttons);
+      const preparedButtonList = prepareButtonList(this.buttons);
+      return config.buttonOrder === FKUIConfigButtonOrder.RIGHT_TO_LEFT ? preparedButtonList.reverse() : preparedButtonList;
     }
   },
   methods: {
@@ -5569,7 +5564,7 @@ const _sfc_main$15 = vue.defineComponent({
   },
   computed: {
     preparedButtons() {
-      return prepareButtonList(this.buttons, FKUIConfigButtonOrder.RIGHT_TO_LEFT);
+      return prepareButtonList(this.buttons);
     }
   },
   methods: {
@@ -6358,7 +6353,7 @@ const _hoisted_6$e = {
   class: "calendar-month__cell calendar-month__cell--week-number",
   "aria-hidden": "true"
 };
-const _hoisted_7$c = ["colspan"];
+const _hoisted_7$b = ["colspan"];
 const _hoisted_8$7 = ["colspan"];
 const _hoisted_9$5 = {
   key: 0,
@@ -6408,7 +6403,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
       key: 1,
       class: "calendar-month__cell",
       colspan: _ctx.getDayStartOffset(week.days)
-    }, null, 8, _hoisted_7$c)) : vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week.days, (day) => {
+    }, null, 8, _hoisted_7$b)) : vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week.days, (day) => {
       return vue.openBlock(), vue.createElementBlock("td", {
         key: day.toString(),
         class: "calendar-month__cell",
@@ -9500,7 +9495,7 @@ const _hoisted_5$f = {
 const _hoisted_6$c = {
   key: 1
 };
-const _hoisted_7$b = {
+const _hoisted_7$a = {
   ref: "tooltipAttachTo",
   class: "label"
 };
@@ -9531,7 +9526,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     name: "error"
   }), vue.createTextVNode(" " + vue.toDisplayString(_ctx.validity.validationMessage), 1)])) : vue.createCommentVNode("", true)])], 2)), _cache[7] || (_cache[7] = vue.createTextVNode()), _ctx.hasCheckbox ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$j, [_ctx.children.length === 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$f, vue.toDisplayString(_ctx.checkboxCheckedScreenReaderText), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$c, vue.toDisplayString(_ctx.numberOfCheckedCheckboxesScreenText), 1))])) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), _ctx.hasTooltipSlot ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
     key: 1
-  }, [vue.createElementVNode("div", _hoisted_7$b, [vue.createElementVNode("span", _hoisted_8$6, [vue.renderSlot(_ctx.$slots, "label")])], 512), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "tooltip"), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot || _ctx.hasError ? (vue.openBlock(), vue.createElementBlock("div", {
+  }, [vue.createElementVNode("div", _hoisted_7$a, [vue.createElementVNode("span", _hoisted_8$6, [vue.renderSlot(_ctx.$slots, "label")])], 512), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "tooltip"), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot || _ctx.hasError ? (vue.openBlock(), vue.createElementBlock("div", {
     key: 0,
     class: vue.normalizeClass(["label", _ctx.groupLabelClass]),
     "aria-hidden": "true"
@@ -11049,13 +11044,19 @@ var FTableColumnSort = /* @__PURE__ */ ((FTableColumnSort2) => {
   return FTableColumnSort2;
 })(FTableColumnSort || {});
 function addColumn(src, column) {
-  if (!src.some((col) => col.name === column.name)) {
+  if (column.name) {
+    const hasDuplicateName = src.some((it) => it.name === column.name);
+    if (hasDuplicateName) {
+      throw new Error(`Expected FTableColumn to have a unique name but encountered duplicate of "${column.name}"`);
+    }
+  }
+  if (!src.some((col) => col.id === column.id)) {
     return [...src, column];
   }
   return src;
 }
 function setVisibilityColumn(src, id, visible) {
-  const column = src.find((col) => col.name === id);
+  const column = src.find((col) => col.id === id);
   if (column) {
     column.visible = visible;
   }
@@ -11114,14 +11115,14 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   __name: "FTableColumn",
   props: {
     /**
-     * Unique (per-table) identifier.
+     * Unique (per-table) identifier. Typically set to the row
+     * property displayed but any unique string can be used.
      *
-     * Typically set to the row property displayed but any unique string can
-     * be used.
+     * Only required when used with `FSortFilterDataset`.
      */
     name: {
       type: String,
-      required: true
+      default: void 0
     },
     /**
      * If set to true, display the column, set to false to hide it.
@@ -11204,6 +11205,10 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
       setVisibilityColumn: setVisibilityColumn2,
       addColumn: addColumn2
     } = FTableInjected();
+    const internalVisible = vue.ref(true);
+    const renderElement = vue.ref(true);
+    const id = logic.ElementIdService.generateElementId("column");
+    const el = vue.useTemplateRef("element");
     const props = __props;
     const classes = vue.computed(() => {
       return ["table__column", `table__column--${props.type}`];
@@ -11218,33 +11223,51 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
         return "td";
       }
     });
-    vue.watch(() => props.visible, () => setVisibilityColumn2(props.name, props.visible));
+    vue.watch(() => props.visible, () => {
+      internalVisible.value = props.visible;
+      setVisibilityColumn2(id, props.visible);
+    });
     vue.onMounted(() => {
       if (props.shrink && props.expand) {
         throw new Error("Table cannot have both shrink and expand enabled at the same time");
       }
       const size = props.shrink ? FTableColumnSize.SHRINK : FTableColumnSize.EXPAND;
-      addColumn2({
-        name: props.name,
-        title: props.title,
-        description: props.description || void 0,
-        id: logic.ElementIdService.generateElementId("column"),
-        size,
-        type: props.type,
-        visible: props.visible,
-        sortable: false,
-        sort: FTableColumnSort.UNSORTED
-      });
+      const header = isHeader();
+      if (header) {
+        addColumn2({
+          name: props.name,
+          title: props.title,
+          description: props.description || void 0,
+          id,
+          size,
+          type: props.type,
+          visible: props.visible,
+          sortable: false,
+          sort: FTableColumnSort.UNSORTED
+        });
+      }
+      renderElement.value = renderColumns && !header;
+      internalVisible.value = props.visible;
     });
+    function isHeader() {
+      if (!el.value || !(el.value instanceof HTMLElement)) {
+        return false;
+      }
+      const closest = el.value.closest("thead, tbody");
+      return (closest == null ? void 0 : closest.tagName) === "THEAD";
+    }
     return (_ctx, _cache) => {
-      return vue.unref(renderColumns) && __props.visible ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName2.value), vue.mergeProps({
+      return renderElement.value && internalVisible.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName2.value), vue.mergeProps({
         key: 0,
+        ref: "element",
         class: classes.value,
         scope: scope.value
       }, _ctx.$attrs), {
-        default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = vue.createTextVNode()), _cache[1] || (_cache[1] = vue.createElementVNode("span", {
+        default: vue.withCtx(() => [vue.unref(renderColumns) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+          key: 0
+        }, [vue.renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = vue.createTextVNode()), _cache[1] || (_cache[1] = vue.createElementVNode("span", {
           class: "sr-only"
-        }, " ", -1))]),
+        }, " ", -1))], 64)) : vue.createCommentVNode("", true)]),
         _: 3
       }, 16, ["class", "scope"])) : vue.createCommentVNode("", true);
     };
@@ -11310,7 +11333,7 @@ const _hoisted_5$d = {
   class: "label__message label__message--error"
 };
 const _hoisted_6$b = ["for"];
-const _hoisted_7$a = {
+const _hoisted_7$9 = {
   key: 0,
   class: "label__message label__message--error"
 };
@@ -11336,7 +11359,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
   }, [vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "description", {
     descriptionClass: _ctx.descriptionClass,
     formatDescriptionClass: _ctx.formatDescriptionClass
-  }), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.hasErrorMessageSlot ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$a, [vue.createVNode(_component_f_icon, {
+  }), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.hasErrorMessageSlot ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$9, [vue.createVNode(_component_f_icon, {
     class: "label__icon--left",
     name: "error"
   }), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "error-message")])) : vue.createCommentVNode("", true)], 8, _hoisted_6$b));
@@ -11926,7 +11949,7 @@ const _hoisted_6$a = {
   key: 2,
   class: "text-field__append-inner"
 };
-const _hoisted_7$9 = {
+const _hoisted_7$8 = {
   key: 3,
   class: "text-field__append-inner"
 };
@@ -11996,7 +12019,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     "is-open": _ctx.showPopupError,
     "error-message": _ctx.validationMessage,
     onClose: _ctx.closePopupError
-  }, null, 8, ["anchor", "is-open", "error-message", "onClose"])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), _ctx.$slots["append-inner"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$a, [vue.renderSlot(_ctx.$slots, "append-inner")])) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), _ctx.options ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$9, [vue.createVNode(_component_i_combobox_toggle_button, {
+  }, null, 8, ["anchor", "is-open", "error-message", "onClose"])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), _ctx.$slots["append-inner"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$a, [vue.renderSlot(_ctx.$slots, "append-inner")])) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), _ctx.options ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$8, [vue.createVNode(_component_i_combobox_toggle_button, {
     disabled: _ctx.disabled,
     "aria-controls": _ctx.dropdownIsOpen ? _ctx.dropdownId : void 0,
     "aria-expanded": _ctx.dropdownIsOpen,
@@ -12851,13 +12874,7 @@ const _hoisted_4$e = ["title"];
 const _hoisted_5$b = {
   class: "sr-only"
 };
-const _hoisted_6$9 = {
-  value: {
-    attribute: "",
-    ascending: false
-  }
-};
-const _hoisted_7$8 = ["value"];
+const _hoisted_6$9 = ["value"];
 const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "FSortFilterDataset",
   props: {
@@ -12925,13 +12942,14 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   }) {
     const $t2 = useTranslate();
     const searchString = vue.ref("");
-    const sortAttribute = vue.ref({
+    const defaultSortValue = {
       attribute: "",
       name: "",
       ascendingName: "",
       ascending: false,
       id: 0
-    });
+    };
+    const sortAttribute = vue.ref(defaultSortValue);
     const sortFilterResult = vue.ref([]);
     const debouncedFilterResultset = logic.debounce(filterResultset, 250);
     let tableCallbackOnSort = () => {
@@ -13106,11 +13124,13 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                 onChange: onChangeSortAttribute
               }, {
                 label: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.sort-filter-dataset.label.sort", "Sortera på")), 1)]),
-                default: vue.withCtx(() => [_cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("option", _hoisted_6$9, vue.toDisplayString(vue.unref($t2)("fkui.sort-filter-dataset.label.unsorted", "Välj")), 1), _cache[6] || (_cache[6] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sortOrders.value, (sortOrder) => {
+                default: vue.withCtx(() => [_cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("option", {
+                  value: defaultSortValue
+                }, vue.toDisplayString(vue.unref($t2)("fkui.sort-filter-dataset.label.unsorted", "Välj")), 1), _cache[6] || (_cache[6] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sortOrders.value, (sortOrder) => {
                   return vue.openBlock(), vue.createElementBlock("option", {
                     key: sortOrder.id,
                     value: sortOrder
-                  }, vue.toDisplayString(sortOrder.name) + " (" + vue.toDisplayString(sortOrder.ascendingName) + ")\n                            ", 9, _hoisted_7$8);
+                  }, vue.toDisplayString(sortOrder.name) + " (" + vue.toDisplayString(sortOrder.ascendingName) + ")\n                            ", 9, _hoisted_6$9);
                 }), 128))]),
                 _: 1
               }, 8, ["modelValue"])]),
@@ -13278,6 +13298,9 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       let columnName = column.name;
+      if (!columnName) {
+        throw new Error("`FTableColumn` must have a unique `name` when used with `FSortFilterDataset`");
+      }
       if (column.sort === FTableColumnSort.DESCENDING) {
         columnName = "";
         column.sort = FTableColumnSort.UNSORTED;
@@ -13299,12 +13322,14 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createElementVNode("table", vue.mergeProps({
         class: ["table", tableClasses.value],
         tabindex: tabindex.value
-      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$l, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$l, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
         return vue.openBlock(), vue.createElementBlock("col", {
           key: column.id,
           class: vue.normalizeClass(column.size)
         }, null, 2);
-      }), 128))]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_3$h, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleColumns.value, (column) => {
+      }), 128))]), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_3$h, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
+        row: {}
+      }))), _cache[2] || (_cache[2] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleColumns.value, (column) => {
         return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
           key: column.id,
           scope: "col",
@@ -13318,12 +13343,12 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass(iconClasses2(column)),
           name: iconName(column)
         }, null, 8, ["class", "name"])) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), column.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$a, vue.toDisplayString(column.description), 1)) : vue.createCommentVNode("", true)], 16);
-      }), 128))])]), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("tbody", null, [isEmpty.value && columns.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6$8, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
+      }), 128))])]), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("tbody", null, [isEmpty.value && columns.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6$8, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
         row: {}
-      })))])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$7, [vue.createElementVNode("td", {
+      })))])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$7, [vue.createElementVNode("td", {
         class: "table__column table__column--action",
         colspan: columns.value.length
-      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.data-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_8$5)])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(internalRows.value, (row) => {
+      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.data-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_8$5)])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(internalRows.value, (row) => {
         return vue.openBlock(), vue.createElementBlock("tr", {
           key: rowKey(row),
           class: "table__row"
@@ -14684,7 +14709,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       expandableRows,
       hasExpandableContent
     } = expandableTable;
-    const tbodyElement = vue.useTemplateRef("tbodyElement");
+    const tbody = vue.useTemplateRef("tbodyElement");
     const hasCaption = vue.computed(() => {
       return hasSlot2("caption", {}, {
         stripClasses: []
@@ -14766,21 +14791,21 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       immediate: true,
       deep: true
     });
-    function updateTr(tbodyElement2) {
-      const trElements = [].slice.call(tbodyElement2.children);
+    function updateTr(tbodyElement) {
+      const trElements = [].slice.call(tbodyElement.children);
       const trInteractableElements = trElements.filter((tr2) => {
         return tr2.tabIndex === 0;
       });
       tr.value = trInteractableElements;
     }
     vue.onUpdated(() => {
-      if (tbodyElement.value) {
-        updateTr(tbodyElement.value);
+      if (tbody.value) {
+        updateTr(tbody.value);
       }
     });
     vue.onMounted(() => {
-      if (tbodyElement.value) {
-        updateTr(tbodyElement.value);
+      if (tbody.value) {
+        updateTr(tbody.value);
       }
       registerCallbackOnSort(callbackOnSort);
       registerCallbackOnMount(callbackSortableColumns);
@@ -14894,6 +14919,9 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       let columnName = column.name;
+      if (!columnName) {
+        throw new Error("`FTableColumn` must have a unique `name` when used with `FSortFilterDataset`");
+      }
       if (column.sort === FTableColumnSort.DESCENDING) {
         columnName = "";
         column.sort = FTableColumnSort.UNSORTED;
@@ -14938,15 +14966,17 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(wrapperClasses.value)
-      }, [vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), vue.createElementVNode("table", vue.mergeProps({
+      }, [vue.createCommentVNode("", true), _cache[19] || (_cache[19] = vue.createTextVNode()), vue.createElementVNode("table", vue.mergeProps({
         class: ["table", tableClasses.value],
         role: tableRole.value
-      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$e, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$a)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), __props.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(columns.value, (column) => {
+      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$e, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$a)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), __props.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(columns.value, (column) => {
         return vue.openBlock(), vue.createElementBlock("col", {
           key: column.id,
           class: vue.normalizeClass(column.size)
         }, null, 2);
-      }), 128))]), _cache[16] || (_cache[16] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_5$6, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$4, [vue.createElementVNode("span", _hoisted_7$3, vue.toDisplayString(vue.unref($t2)("fkui.interactive-table.select", "Expandera")), 1)])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_8$3, [vue.createElementVNode("span", _hoisted_9$3, vue.toDisplayString(vue.unref($t2)("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(visibleColumns.value, (column) => {
+      }), 128))]), _cache[17] || (_cache[17] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_5$6, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
+        row: {}
+      }))), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$4, [vue.createElementVNode("span", _hoisted_7$3, vue.toDisplayString(vue.unref($t2)("fkui.interactive-table.select", "Expandera")), 1)])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_8$3, [vue.createElementVNode("span", _hoisted_9$3, vue.toDisplayString(vue.unref($t2)("fkui.interactive-table.select", "Markera")), 1)])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleColumns.value, (column) => {
         return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
           key: column.id,
           scope: "col",
@@ -14960,9 +14990,8 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass(iconClasses2(column)),
           name: 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[17] || (_cache[17] = vue.createTextVNode()), (vue.openBlock(), vue.createElementBlock("tbody", {
-        ref_key: "tbodyElement",
-        ref: tbodyElement,
+      }), 128))])]), _cache[18] || (_cache[18] = vue.createTextVNode()), (vue.openBlock(), vue.createElementBlock("tbody", {
+        ref: "tbodyElement",
         key: tbodyKey.value
       }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(internalRows.value, (row, index) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -14979,7 +15008,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
         }, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_13, [vue.unref(hasExpandableContent)(row) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, [vue.createVNode(vue.unref(FIcon), {
           name: "arrow-right",
           rotate: vue.unref(isExpanded)(row) ? "270" : "90"
-        }, null, 8, ["rotate"])])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_15, [vue.createElementVNode("div", _hoisted_16, [vue.createVNode(vue.unref(FCheckboxField), {
+        }, null, 8, ["rotate"])])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_15, [vue.createElementVNode("div", _hoisted_16, [vue.createVNode(vue.unref(FCheckboxField), {
           value: true,
           "model-value": isSelected(row),
           onClick: vue.withModifiers(($event) => onSelect(row), ["self"])
@@ -14990,20 +15019,20 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
             row
           }))])) : vue.createCommentVNode("", true)]),
           _: 2
-        }, 1032, ["model-value", "onClick"])])])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
+        }, 1032, ["model-value", "onClick"])])])) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
           ref_for: true
         }, {
           row
-        }))], 42, _hoisted_12$1), _cache[11] || (_cache[11] = vue.createTextVNode()), vue.unref(isExpandableTable) && vue.unref(hasExpandableContent)(row) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+        }))], 42, _hoisted_12$1), _cache[12] || (_cache[12] = vue.createTextVNode()), vue.unref(isExpandableTable) && vue.unref(hasExpandableContent)(row) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
           key: 0
         }, vue.renderList(vue.unref(expandableRows)(row), (expandableRow, expandableIndex) => {
           return vue.openBlock(), vue.createElementBlock("tr", {
             key: rowKey(expandableRow),
             "aria-level": "2",
             class: vue.normalizeClass(vue.unref(expandableRowClasses)(row, expandableIndex))
-          }, [_cache[8] || (_cache[8] = vue.createElementVNode("td", {
+          }, [_cache[9] || (_cache[9] = vue.createElementVNode("td", {
             class: "table__column--placeholder"
-          }, null, -1)), _cache[9] || (_cache[9] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_18)) : vue.createCommentVNode("", true), _cache[10] || (_cache[10] = vue.createTextVNode()), !vue.unref(hasExpandableSlot) ? vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
+          }, null, -1)), _cache[10] || (_cache[10] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_18)) : vue.createCommentVNode("", true), _cache[11] || (_cache[11] = vue.createTextVNode()), !vue.unref(hasExpandableSlot) ? vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
             key: 1,
             ref_for: true
           }, {
@@ -15019,12 +15048,12 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
             parentRow: row
           }))], 8, _hoisted_19))], 2);
         }), 128)) : vue.createCommentVNode("", true)], 64);
-      }), 128)), _cache[13] || (_cache[13] = vue.createTextVNode()), isEmpty.value && columns.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_20, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
+      }), 128)), _cache[14] || (_cache[14] = vue.createTextVNode()), isEmpty.value && columns.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_20, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
         row: {}
-      })))])) : vue.createCommentVNode("", true), _cache[14] || (_cache[14] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_21, [vue.createElementVNode("td", {
+      })))])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_21, [vue.createElementVNode("td", {
         class: "table__column table__column--action",
         colspan: nbOfColumns.value
-      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("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({
+      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.interactive-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_22), _cache[13] || (_cache[13] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
         row: {}
       })))])) : vue.createCommentVNode("", true)]))], 16, _hoisted_1$k)], 2);
     };