@fkui/vue-labs 6.41.0 → 6.43.0

package/dist/cjs/vue-labs.css

@@ -34,4 +34,7 @@
 #fillista:hover {
   cursor: default;
   background-color: transparent;
-}
+}
+time[data-v-03b0dfe5] {
+    color: var(--fkds-color-text-primary);
+}

package/dist/esm/index.esm.js

@@ -1,6 +1,6 @@
 import { defineComponent, useTemplateRef, computed, openBlock, createElementBlock, createElementVNode, createVNode, unref, renderSlot, withModifiers, withKeys, normalizeClass, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, ref, nextTick, toValue, inject, withDirectives, vShow, onMounted, watchEffect, mergeProps, vModelText, toRef, watch, onUpdated, useModel, useSlots, provide, Fragment, renderList, resolveDynamicComponent, mergeModels, resolveDirective, normalizeProps, guardReactiveProps } from "vue";
 import { assertRef, formatPostalCode, parsePlusgiro, parseNumber, formatNumber, parseOrganisationsnummer, parseDate, parseClearingNumber, parseBankgiro, parseBankAccountNumber, parsePersonnummer, formatPersonnummer, ElementIdService, assertSet, ValidationService, alertScreenReader, debounce, isEmpty, stripWhitespace, isSet, TranslationService } from "@fkui/logic";
-import { FIcon, IFlex, IFlexItem, useTranslate, getItemIdentifier, FContextMenu, IComboboxDropdown, IPopupError, dispatchComponentValidityEvent, findItemIdentifier, useSlotUtils, setItemIdentifiers, FSortFilterDatasetInjected, EventBus, FFileSelector, FFileItem, TranslationMixin, FTextField, useTextFieldSetup } from "@fkui/vue";
+import { FIcon, IFlex, IFlexItem, useTranslate, getItemIdentifier, FContextMenu, IComboboxDropdown, IPopupError, dispatchComponentValidityEvent, findItemIdentifier, useSlotUtils, getDatasetMetadata, setItemIdentifiers, FSortFilterDatasetInjected, EventBus, FFileSelector, FFileItem, TranslationMixin, FTextField, useTextFieldSetup } from "@fkui/vue";
 import { useElementHover, useFocusWithin, useEventListener } from "@vueuse/core";
 var es_iterator_forEach = {};
 var globalThis_1;
@@ -2594,7 +2594,7 @@ function requireEs_set_union_v2() {
   return es_set_union_v2;
 }
 requireEs_set_union_v2();
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   key: 0,
   class: "table-ng__cell table-ng__cell--expand"
 };
@@ -2605,7 +2605,7 @@ const _hoisted_3$4 = {
   tabindex: "-1",
   class: "table-ng__cell table-ng__cell--expand"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "ITableExpandButton",
   props: {
     isExpandable: {
@@ -2635,7 +2635,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
     __expose(expose);
     return (_ctx, _cache) => {
-      return __props.isExpandable ? (openBlock(), createElementBlock("td", _hoisted_1$e, [createElementVNode("button", {
+      return __props.isExpandable ? (openBlock(), createElementBlock("td", _hoisted_1$f, [createElementVNode("button", {
         ref: "expandable",
         tabindex: "-1",
         "aria-label": expandLabel.value,
@@ -2649,8 +2649,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = ["colspan"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_1$e = ["colspan"];
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ITableExpandable",
   props: {
     colspan: {}
@@ -2661,7 +2661,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         class: "table-ng__cell--custom",
         colspan: __props.colspan,
         tabindex: "-1"
-      }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$d);
+      }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$e);
     };
   }
 });
@@ -2991,8 +2991,8 @@ const inputFieldConfig = {
     }
   }
 };
-const _hoisted_1$c = ["aria-sort", "onKeydown"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = ["aria-sort", "onKeydown"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ITableHeader",
   props: {
     column: {},
@@ -3098,16 +3098,16 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           _: 1
         })]),
         _: 1
-      }, 8, ["float"])) : createCommentVNode("", true)], 42, _hoisted_1$c);
+      }, 8, ["float"])) : createCommentVNode("", true)], 42, _hoisted_1$d);
     };
   }
 });
-const _hoisted_1$b = {
+const _hoisted_1$c = {
   scope: "col",
   class: "table-ng__column table-ng__column--selectable"
 };
 const _hoisted_2$8 = ["checked", "indeterminate", "aria-label"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "ITableHeaderSelectable",
   props: {
     selectable: {},
@@ -3134,7 +3134,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     }
     __expose(expose);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("th", _hoisted_1$b, [__props.selectable === "multi" ? (openBlock(), createElementBlock("input", {
+      return openBlock(), createElementBlock("th", _hoisted_1$c, [__props.selectable === "multi" ? (openBlock(), createElementBlock("input", {
         key: 0,
         ref: "input",
         checked: checked.value,
@@ -3147,11 +3147,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   class: "table-ng__cell table-ng__cell--checkbox"
 };
 const _hoisted_2$7 = ["checked", "aria-label"];
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "ITableCheckbox",
   props: {
     column: {},
@@ -3174,7 +3174,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
     __expose(expose);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("td", _hoisted_1$a, [createElementVNode("input", {
+      return openBlock(), createElementBlock("td", _hoisted_1$b, [createElementVNode("input", {
         ref: "target",
         checked: Boolean(__props.column.checked(__props.row)),
         type: "checkbox",
@@ -3185,11 +3185,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = {
+const _hoisted_1$a = {
   class: "table-ng__cell table-ng__cell--radio"
 };
 const _hoisted_2$6 = ["checked", "aria-label"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "ITableRadio",
   props: {
     column: {},
@@ -3212,7 +3212,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
     __expose(expose);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("td", _hoisted_1$9, [createElementVNode("input", {
+      return openBlock(), createElementBlock("td", _hoisted_1$a, [createElementVNode("input", {
         ref: "input",
         type: "radio",
         checked: Boolean(__props.column.checked(__props.row)),
@@ -3223,12 +3223,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   key: 0,
   tabindex: "-1",
   class: "table-ng__cell"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "ITableSelectable",
   props: {
     selectable: {},
@@ -3263,7 +3263,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       description: ref(null),
       sortable: null,
       size: ref(null),
-      component: _sfc_main$c,
+      component: _sfc_main$d,
       label() {
         return $t("fkui.table.selectable.checkbox", "Välj rad");
       },
@@ -3282,7 +3282,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       description: ref(null),
       sortable: null,
       size: ref(null),
-      component: _sfc_main$b,
+      component: _sfc_main$c,
       label() {
         return $t("fkui.table.selectable.radio", "Välj rad");
       },
@@ -3295,13 +3295,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       enabled: true
     };
     return (_ctx, _cache) => {
-      return __props.level > 1 ? (openBlock(), createElementBlock("td", _hoisted_1$8)) : __props.selectable === "multi" ? (openBlock(), createBlock(_sfc_main$c, {
+      return __props.level > 1 ? (openBlock(), createElementBlock("td", _hoisted_1$9)) : __props.selectable === "multi" ? (openBlock(), createBlock(_sfc_main$d, {
         key: 1,
         ref: "child",
         row: __props.row,
         column: multiSelectColumn,
         class: "table-ng__cell--selectable"
-      }, null, 8, ["row"])) : __props.selectable === "single" ? (openBlock(), createBlock(_sfc_main$b, {
+      }, null, 8, ["row"])) : __props.selectable === "single" ? (openBlock(), createBlock(_sfc_main$c, {
         key: 2,
         ref: "child",
         row: __props.row,
@@ -3755,14 +3755,14 @@ function requireEs_iterator_map() {
   return es_iterator_map;
 }
 requireEs_iterator_map();
-const _hoisted_1$7 = ["href"];
+const _hoisted_1$8 = ["href"];
 const _hoisted_2$5 = {
   key: 1,
   ref: "target",
   tabindex: "-1",
   class: "table-ng__cell"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "ITableAnchor",
   props: {
     column: {},
@@ -3788,17 +3788,17 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         target: "_blank",
         href: __props.column.href,
         tabindex: "-1"
-      }, toDisplayString(__props.column.text(__props.row)), 9, _hoisted_1$7)], 32)) : (openBlock(), createElementBlock("td", _hoisted_2$5, null, 512));
+      }, toDisplayString(__props.column.text(__props.row)), 9, _hoisted_1$8)], 32)) : (openBlock(), createElementBlock("td", _hoisted_2$5, null, 512));
     };
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   class: "table-ng__cell table-ng__cell--button"
 };
 const _hoisted_2$4 = {
   class: "sr-only"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "ITableButton",
   props: {
     column: {},
@@ -3820,7 +3820,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
     __expose(expose);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("td", _hoisted_1$6, [createElementVNode("button", {
+      return openBlock(), createElementBlock("td", _hoisted_1$7, [createElementVNode("button", {
         ref: "button",
         class: "icon-button",
         type: "button",
@@ -3875,10 +3875,10 @@ function requireEs_iterator_find() {
   return es_iterator_find;
 }
 requireEs_iterator_find();
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   class: "sr-only"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "ITableMenu",
   props: {
     column: {},
@@ -3945,7 +3945,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         onClick: onOpen
       }, [createVNode(unref(FIcon), {
         name: "bars"
-      }), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_1$5, toDisplayString(__props.column.text(__props.row)), 1)], 512), _cache[1] || (_cache[1] = createTextVNode()), createVNode(unref(FContextMenu), {
+      }), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_1$6, toDisplayString(__props.column.text(__props.row)), 1)], 512), _cache[1] || (_cache[1] = createTextVNode()), createVNode(unref(FContextMenu), {
         "is-open": isOpen.value,
         items: menuitems.value,
         anchor: (_buttonRef$value = buttonRef.value) !== null && _buttonRef$value !== void 0 ? _buttonRef$value : void 0,
@@ -3956,7 +3956,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "ITableRowheader",
   props: {
     row: {},
@@ -3972,7 +3972,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   class: "table-ng__editable"
 };
 const _hoisted_2$3 = {
@@ -3982,12 +3982,12 @@ const _hoisted_3$3 = ["aria-expanded", "aria-controls", "aria-activedescendant",
 const _hoisted_4$3 = {
   class: "table-ng__editable__text"
 };
-const _hoisted_5$2 = {
+const _hoisted_5$3 = {
   key: 1,
   tabindex: "-1",
   class: "table-ng__cell table-ng__cell--static"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "ITableSelect",
   props: {
     row: {},
@@ -4135,7 +4135,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         tabindex: "-1",
         onKeydown: onCellKeyDown,
         onClick: withModifiers(onCellClick, ["stop"])
-      }, [withDirectives(createElementVNode("div", _hoisted_1$4, [createElementVNode("span", _hoisted_2$3, toDisplayString(viewValue.value), 1)], 512), [[vShow, !editing.value]]), _cache[3] || (_cache[3] = createTextVNode()), withDirectives(createElementVNode("div", {
+      }, [withDirectives(createElementVNode("div", _hoisted_1$5, [createElementVNode("span", _hoisted_2$3, toDisplayString(viewValue.value), 1)], 512), [[vShow, !editing.value]]), _cache[3] || (_cache[3] = createTextVNode()), withDirectives(createElementVNode("div", {
         ref: "edit",
         role: "combobox",
         tabindex: "-1",
@@ -4160,7 +4160,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         "input-node": editRef.value,
         onSelect: selectDropdownOption,
         onClose: onDropdownClose
-      }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node"]), [[vShow, editing.value]])], 32)) : (openBlock(), createElementBlock("td", _hoisted_5$2, toDisplayString(__props.column.selected(__props.row)), 1));
+      }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node"]), [[vShow, editing.value]])], 32)) : (openBlock(), createElementBlock("td", _hoisted_5$3, toDisplayString(__props.column.selected(__props.row)), 1));
     };
   }
 });
@@ -4209,7 +4209,7 @@ function addInputValidators(inputElement, type) {
 function isAlphanumeric(e) {
   return e.key.length === 1 && !e.ctrlKey && !e.metaKey;
 }
-const _hoisted_1$3 = ["id", "aria-invalid"];
+const _hoisted_1$4 = ["id", "aria-invalid"];
 const _hoisted_2$2 = {
   class: "table-ng__editable__text"
 };
@@ -4218,7 +4218,11 @@ const _hoisted_3$2 = {
   class: "sr-only"
 };
 const _hoisted_4$2 = ["id", "aria-label", "aria-hidden"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_5$2 = {
+  ref: "arrowAnchor",
+  "aria-hidden": "true"
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ITableText",
   props: {
     row: {},
@@ -4310,6 +4314,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     const tdElement = useTemplateRef("td");
     const inputElement = useTemplateRef("input");
+    const arrowAnchorElement = useTemplateRef("arrowAnchor");
     const {
       stopEdit: stopEdit2
     } = useStartStopEdit();
@@ -4387,20 +4392,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     watchEffect(() => {
       if (hasError.value) {
-        var _tdElement$value, _inputElement$value;
+        var _tdElement$value, _arrowAnchorElement$v;
         emit("onError", {
           anchor: (_tdElement$value = tdElement.value) !== null && _tdElement$value !== void 0 ? _tdElement$value : void 0,
-          arrowAnchor: (_inputElement$value = inputElement.value) !== null && _inputElement$value !== void 0 ? _inputElement$value : void 0,
+          arrowAnchor: (_arrowAnchorElement$v = arrowAnchorElement.value) !== null && _arrowAnchorElement$v !== void 0 ? _arrowAnchorElement$v : void 0,
           message: validity.value.validationMessage,
           hasFocus: focused.value,
           hasHover: isHovered.value,
           inEdit: inEdit.value
         });
       } else {
-        var _tdElement$value2, _inputElement$value2;
+        var _tdElement$value2, _arrowAnchorElement$v2;
         emit("closeError", {
           anchor: (_tdElement$value2 = tdElement.value) !== null && _tdElement$value2 !== void 0 ? _tdElement$value2 : void 0,
-          arrowAnchor: (_inputElement$value2 = inputElement.value) !== null && _inputElement$value2 !== void 0 ? _inputElement$value2 : void 0,
+          arrowAnchor: (_arrowAnchorElement$v2 = arrowAnchorElement.value) !== null && _arrowAnchorElement$v2 !== void 0 ? _arrowAnchorElement$v2 : void 0,
           message: validity.value.validationMessage,
           hasFocus: focused.value,
           hasHover: isHovered.value,
@@ -4593,13 +4598,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         "aria-hidden": !inEdit.value,
         onValidity,
         onPendingValidity
-      }), null, 16, _hoisted_4$2), [[vModelText, viewValue.value]])], 2), _cache[4] || (_cache[4] = createTextVNode()), createVNode(unref(IPopupError), {
+      }), null, 16, _hoisted_4$2), [[vModelText, viewValue.value]]), _cache[4] || (_cache[4] = createTextVNode()), createElementVNode("span", _hoisted_5$2, null, 512)], 2), _cache[5] || (_cache[5] = createTextVNode()), createVNode(unref(IPopupError), {
         anchor: tdElement.value,
         "is-open": openPopupError.value,
         "error-message": validity.value.validationMessage,
-        "arrow-anchor": inputElement.value,
+        "arrow-anchor": arrowAnchorElement.value,
         layout: "f-table"
-      }, null, 8, ["anchor", "is-open", "error-message", "arrow-anchor"])], 42, _hoisted_1$3)) : (openBlock(), createElementBlock("td", {
+      }, null, 8, ["anchor", "is-open", "error-message", "arrow-anchor"])], 42, _hoisted_1$4)) : (openBlock(), createElementBlock("td", {
         key: 1,
         ref: "td",
         tabindex: "-1",
@@ -4778,7 +4783,7 @@ function normalizeTableColumn(column) {
       return Object.freeze({
         ...normalizeCheckboxColumn(column),
         ...base,
-        component: _sfc_main$c
+        component: _sfc_main$d
       });
     case "text:currency":
     case "text:number":
@@ -4786,7 +4791,7 @@ function normalizeTableColumn(column) {
       return Object.freeze({
         ...normalizeNumberColumn(column),
         ...base,
-        component: _sfc_main$4
+        component: _sfc_main$5
       });
     case "text":
     case "text:bankAccountNumber":
@@ -4802,43 +4807,43 @@ function normalizeTableColumn(column) {
       return Object.freeze({
         ...normalizeTextColumn(column),
         ...base,
-        component: _sfc_main$4
+        component: _sfc_main$5
       });
     case "rowheader":
       return Object.freeze({
         ...normalizeRowHeaderColumn(column),
         ...base,
-        component: _sfc_main$6
+        component: _sfc_main$7
       });
     case "anchor":
       return Object.freeze({
         ...normalizeAnchorColumn(column),
         ...base,
-        component: _sfc_main$9
+        component: _sfc_main$a
       });
     case "button":
       return Object.freeze({
         ...normalizeButtonColumn(column),
         ...base,
-        component: _sfc_main$8
+        component: _sfc_main$9
       });
     case "select":
       return Object.freeze({
         ...normalizeSelectColumn(column),
         ...base,
-        component: _sfc_main$5
+        component: _sfc_main$6
       });
     case "menu":
       return Object.freeze({
         ...normalizeMenuColumn(column),
         ...base,
-        component: _sfc_main$7
+        component: _sfc_main$8
       });
     case void 0:
       return Object.freeze({
         ...normalizeSimpleColumn(column),
         ...base,
-        component: _sfc_main$4
+        component: _sfc_main$5
       });
   }
 }
@@ -5211,7 +5216,7 @@ function useTabstop(tableRef, metaRows) {
     withTabstopBehaviour
   };
 }
-const _hoisted_1$2 = ["role", "aria-rowcount"];
+const _hoisted_1$3 = ["role", "aria-rowcount"];
 const _hoisted_2$1 = {
   key: 0,
   "data-test": "caption"
@@ -5243,7 +5248,7 @@ const _hoisted_10 = {
 };
 const _hoisted_11 = ["aria-rowindex"];
 const _hoisted_12 = ["colspan"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "FTable",
   props: /* @__PURE__ */ mergeModels({
     columns: {},
@@ -5251,9 +5256,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     keyAttribute: {
       default: () => void 0
     },
-    expandableAttribute: {
-      default: () => void 0
-    },
     rowClass: {
       type: Function,
       default: void 0
@@ -5284,9 +5286,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     } = useSlotUtils();
     const tableRef = useTemplateRef("table");
     const expandedKeys = ref(/* @__PURE__ */ new Set());
-    const keyedRows = computed(() => setItemIdentifiers(__props.rows, __props.keyAttribute, __props.expandableAttribute));
-    const metaRows = computed(() => getMetaRows(keyedRows.value, expandedKeys.value, __props.expandableAttribute));
-    const isTreegrid = computed(() => Boolean(__props.expandableAttribute));
+    const expandableAttribute = computed(() => {
+      return getDatasetMetadata(__props.rows).nestedAttribute;
+    });
+    const keyedRows = computed(() => setItemIdentifiers(__props.rows, __props.keyAttribute, expandableAttribute.value));
+    const metaRows = computed(() => getMetaRows(keyedRows.value, expandedKeys.value, expandableAttribute.value));
+    const isTreegrid = computed(() => Boolean(expandableAttribute.value));
     const role = computed(() => isTreegrid.value ? "treegrid" : "grid");
     const hasCaption = computed(() => {
       return hasSlot("caption", {}, {
@@ -5302,7 +5307,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         return footerRow;
       }
       const headerRow = 1;
-      const bodyRows = getBodyRowCount(keyedRows.value, __props.expandableAttribute);
+      const bodyRows = getBodyRowCount(keyedRows.value, expandableAttribute.value);
       return bodyRows + headerRow + footerRow;
     });
     const fullColspan = computed(() => {
@@ -5492,14 +5497,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         onFocusout: onTableFocusout,
         onClick,
         onKeydown
-      }, [hasCaption.value ? (openBlock(), createElementBlock("caption", _hoisted_2$1, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), hasColumns.value ? (openBlock(), createElementBlock("thead", _hoisted_3$1, [createElementVNode("tr", _hoisted_4$1, [isTreegrid.value ? (openBlock(), createElementBlock("th", _hoisted_5$1)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), __props.selectable ? (openBlock(), createBlock(_sfc_main$d, {
+      }, [hasCaption.value ? (openBlock(), createElementBlock("caption", _hoisted_2$1, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), hasColumns.value ? (openBlock(), createElementBlock("thead", _hoisted_3$1, [createElementVNode("tr", _hoisted_4$1, [isTreegrid.value ? (openBlock(), createElementBlock("th", _hoisted_5$1)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), __props.selectable ? (openBlock(), createBlock(_sfc_main$e, {
         key: 1,
         ref: bindCellApiRef,
         state: unref(selectableHeaderState)(),
         selectable: __props.selectable,
         onToggle: unref(toggleSelectableHeader)
       }, null, 8, ["state", "selectable", "onToggle"])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
-        return openBlock(), createBlock(_sfc_main$e, {
+        return openBlock(), createBlock(_sfc_main$f, {
           key: column.id,
           column,
           "sort-enabled": isSortEnabled(column),
@@ -5532,7 +5537,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           "aria-setsize": setsize,
           "aria-posinset": posinset,
           "aria-selected": isAriaSelected(level, row)
-        }, [isTreegrid.value ? (openBlock(), createBlock(_sfc_main$g, {
+        }, [isTreegrid.value ? (openBlock(), createBlock(_sfc_main$h, {
           key: 0,
           ref_for: true,
           ref: bindCellApiRef,
@@ -5540,7 +5545,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           "is-expanded": isExpanded,
           "row-key": key,
           onToggle: onToggleExpanded
-        }, null, 8, ["is-expandable", "is-expanded", "row-key"])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), level > 1 && hasExpandableSlot.value ? (openBlock(), createBlock(_sfc_main$f, {
+        }, null, 8, ["is-expandable", "is-expanded", "row-key"])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), level > 1 && hasExpandableSlot.value ? (openBlock(), createBlock(_sfc_main$g, {
           key: 1,
           colspan: expandedColspan.value
         }, {
@@ -5552,7 +5557,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           _: 2
         }, 1032, ["colspan"])) : (openBlock(), createElementBlock(Fragment, {
           key: 2
-        }, [__props.selectable ? (openBlock(), createBlock(_sfc_main$a, {
+        }, [__props.selectable ? (openBlock(), createBlock(_sfc_main$b, {
           key: 0,
           ref_for: true,
           ref: bindCellApiRef,
@@ -5586,7 +5591,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         class: "table-ng__cell--custom",
         onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(() => {
         }, ["prevent"]), ["space"]))
-      }, [renderSlot(_ctx.$slots, "footer")], 40, _hoisted_12)], 8, _hoisted_11)])) : createCommentVNode("", true)], 42, _hoisted_1$2);
+      }, [renderSlot(_ctx.$slots, "footer")], 40, _hoisted_12)], 8, _hoisted_11)])) : createCommentVNode("", true)], 42, _hoisted_1$3);
     };
   }
 });
@@ -7013,7 +7018,7 @@ function requireWeb_domException_stack() {
   return web_domException_stack;
 }
 requireWeb_domException_stack();
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "error-style"
 };
@@ -7036,7 +7041,7 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = ["aria-label"];
 const STATUS_HAR_INTE_VALT_FIL = 0, STATUS_HAR_VALT_FIL = 1, STATUS_MISSLYCKATS = 2;
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "XFileDragdrop",
   setup(__props) {
     const valdFil = ref(File);
@@ -7215,7 +7220,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         onDragover: dragover,
         onDragleave: dragleave,
         onDrop: drop
-      }, [renderSlot(_ctx.$slots, "image"), _cache[6] || (_cache[6] = createTextVNode()), _cache[7] || (_cache[7] = createElementVNode("h3", null, "Ladda upp ett dokument", -1)), _cache[8] || (_cache[8] = createTextVNode("\n        dra och släpp eller\n        ", -1)), filValidering.value !== "" ? (openBlock(), createElementBlock("div", _hoisted_1$1, [createElementVNode("span", _hoisted_2, [createVNode(unref(FIcon), {
+      }, [renderSlot(_ctx.$slots, "image"), _cache[6] || (_cache[6] = createTextVNode()), _cache[7] || (_cache[7] = createElementVNode("h3", null, "Ladda upp ett dokument", -1)), _cache[8] || (_cache[8] = createTextVNode("\n        dra och släpp eller\n        ", -1)), filValidering.value !== "" ? (openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("span", _hoisted_2, [createVNode(unref(FIcon), {
         name: "error"
       })]), createTextVNode(" " + toDisplayString(filValidering.value), 1)])) : createCommentVNode("", true), _cache[9] || (_cache[9] = createTextVNode()), createElementVNode("div", null, [withDirectives((openBlock(), createBlock(unref(FFileSelector), {
         id: "valjFil",
@@ -7253,6 +7258,72 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+function timeAgo(timestamp, reference, $t) {
+  const seconds = Math.floor((reference - timestamp) / 1e3);
+  if (seconds < 60) {
+    return $t("fkui.time-ago.seconds", "{{ count }}s ago", {
+      count: seconds
+    });
+  }
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    return $t("fkui.time-ago.minutes", "{{ count }}m ago", {
+      count: minutes
+    });
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return $t("fkui.time-ago.hours", "{{ count }}h ago", {
+      count: hours
+    });
+  }
+  const days = Math.floor(hours / 24);
+  if (days < 30) {
+    return $t("fkui.time-ago.days", "{{ count }}d ago", {
+      count: days
+    });
+  }
+  const months = Math.floor(days / 30);
+  if (months < 12) {
+    return $t("fkui.time-ago.months", "{{ count }}mo ago", {
+      count: months
+    });
+  }
+  const years = Math.floor(months / 12);
+  return $t("fkui.time-ago.years", "{{ count }}y ago", {
+    count: years
+  });
+}
+const _hoisted_1$1 = ["datetime", "title"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "XRelativeTime",
+  props: {
+    timestamp: {},
+    reference: {
+      default: () => Date.now()
+    }
+  },
+  setup(__props) {
+    const $t = useTranslate();
+    const ago = computed(() => timeAgo(__props.timestamp, __props.reference, $t));
+    const datetime = computed(() => new Date(__props.timestamp).toISOString());
+    const title = computed(() => new Date(__props.timestamp).toLocaleString());
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("time", {
+        datetime: datetime.value,
+        title: title.value
+      }, toDisplayString(ago.value), 9, _hoisted_1$1);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const XRelativeTime = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-03b0dfe5"]]);
 function matchPropertyValue(property) {
   return (item, value) => {
     return value === null || item[property] === value;
@@ -7564,11 +7635,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main$3 as FTable,
+  _sfc_main$4 as FTable,
   HOURS_MINUTES_REGEXP,
   HOURS_MINUTES_WITHOUT_COLON_REGEXP,
   HoursMinutesValidatorUtils,
-  _sfc_main$2 as XFileDragdrop,
+  _sfc_main$3 as XFileDragdrop,
+  XRelativeTime,
   _sfc_main$1 as XSortFilterDatasetNg,
   _sfc_main as XTimeTextField,
   baseTypes,