@fkui/vue-labs 6.41.0 → 6.43.0

package/dist/cjs/index.cjs.js

@@ -2596,7 +2596,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"
 };
@@ -2607,7 +2607,7 @@ const _hoisted_3$4 = {
   tabindex: "-1",
   class: "table-ng__cell table-ng__cell--expand"
 };
-const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableExpandButton",
   props: {
     isExpandable: {
@@ -2637,7 +2637,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     };
     __expose(expose);
     return (_ctx, _cache) => {
-      return __props.isExpandable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_1$e, [vue.createElementVNode("button", {
+      return __props.isExpandable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_1$f, [vue.createElementVNode("button", {
         ref: "expandable",
         tabindex: "-1",
         "aria-label": expandLabel.value,
@@ -2651,8 +2651,8 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$d = ["colspan"];
-const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$e = ["colspan"];
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableExpandable",
   props: {
     colspan: {}
@@ -2663,7 +2663,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
         class: "table-ng__cell--custom",
         colspan: __props.colspan,
         tabindex: "-1"
-      }, [vue.renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$d);
+      }, [vue.renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$e);
     };
   }
 });
@@ -2993,8 +2993,8 @@ const inputFieldConfig = {
     }
   }
 };
-const _hoisted_1$c = ["aria-sort", "onKeydown"];
-const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$d = ["aria-sort", "onKeydown"];
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableHeader",
   props: {
     column: {},
@@ -3100,16 +3100,16 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
           _: 1
         })]),
         _: 1
-      }, 8, ["float"])) : vue.createCommentVNode("", true)], 42, _hoisted_1$c);
+      }, 8, ["float"])) : vue.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__ */ vue.defineComponent({
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableHeaderSelectable",
   props: {
     selectable: {},
@@ -3136,7 +3136,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     }
     __expose(expose);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("th", _hoisted_1$b, [__props.selectable === "multi" ? (vue.openBlock(), vue.createElementBlock("input", {
+      return vue.openBlock(), vue.createElementBlock("th", _hoisted_1$c, [__props.selectable === "multi" ? (vue.openBlock(), vue.createElementBlock("input", {
         key: 0,
         ref: "input",
         checked: checked.value,
@@ -3149,11 +3149,11 @@ const _sfc_main$d = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableCheckbox",
   props: {
     column: {},
@@ -3176,7 +3176,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     };
     __expose(expose);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("td", _hoisted_1$a, [vue.createElementVNode("input", {
+      return vue.openBlock(), vue.createElementBlock("td", _hoisted_1$b, [vue.createElementVNode("input", {
         ref: "target",
         checked: Boolean(__props.column.checked(__props.row)),
         type: "checkbox",
@@ -3187,11 +3187,11 @@ const _sfc_main$c = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableRadio",
   props: {
     column: {},
@@ -3214,7 +3214,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
     __expose(expose);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("td", _hoisted_1$9, [vue.createElementVNode("input", {
+      return vue.openBlock(), vue.createElementBlock("td", _hoisted_1$a, [vue.createElementVNode("input", {
         ref: "input",
         type: "radio",
         checked: Boolean(__props.column.checked(__props.row)),
@@ -3225,12 +3225,12 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   key: 0,
   tabindex: "-1",
   class: "table-ng__cell"
 };
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableSelectable",
   props: {
     selectable: {},
@@ -3265,7 +3265,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
       description: vue.ref(null),
       sortable: null,
       size: vue.ref(null),
-      component: _sfc_main$c,
+      component: _sfc_main$d,
       label() {
         return $t("fkui.table.selectable.checkbox", "Välj rad");
       },
@@ -3284,7 +3284,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
       description: vue.ref(null),
       sortable: null,
       size: vue.ref(null),
-      component: _sfc_main$b,
+      component: _sfc_main$c,
       label() {
         return $t("fkui.table.selectable.radio", "Välj rad");
       },
@@ -3297,13 +3297,13 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
       enabled: true
     };
     return (_ctx, _cache) => {
-      return __props.level > 1 ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_1$8)) : __props.selectable === "multi" ? (vue.openBlock(), vue.createBlock(_sfc_main$c, {
+      return __props.level > 1 ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_1$9)) : __props.selectable === "multi" ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
         key: 1,
         ref: "child",
         row: __props.row,
         column: multiSelectColumn,
         class: "table-ng__cell--selectable"
-      }, null, 8, ["row"])) : __props.selectable === "single" ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
+      }, null, 8, ["row"])) : __props.selectable === "single" ? (vue.openBlock(), vue.createBlock(_sfc_main$c, {
         key: 2,
         ref: "child",
         row: __props.row,
@@ -3757,14 +3757,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__ */ vue.defineComponent({
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableAnchor",
   props: {
     column: {},
@@ -3790,17 +3790,17 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
         target: "_blank",
         href: __props.column.href,
         tabindex: "-1"
-      }, vue.toDisplayString(__props.column.text(__props.row)), 9, _hoisted_1$7)], 32)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_2$5, null, 512));
+      }, vue.toDisplayString(__props.column.text(__props.row)), 9, _hoisted_1$8)], 32)) : (vue.openBlock(), vue.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__ */ vue.defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableButton",
   props: {
     column: {},
@@ -3822,7 +3822,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     };
     __expose(expose);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("td", _hoisted_1$6, [vue.createElementVNode("button", {
+      return vue.openBlock(), vue.createElementBlock("td", _hoisted_1$7, [vue.createElementVNode("button", {
         ref: "button",
         class: "icon-button",
         type: "button",
@@ -3877,10 +3877,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__ */ vue.defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableMenu",
   props: {
     column: {},
@@ -3947,7 +3947,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         onClick: onOpen
       }, [vue.createVNode(vue.unref(vue$1.FIcon), {
         name: "bars"
-      }), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_1$5, vue.toDisplayString(__props.column.text(__props.row)), 1)], 512), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FContextMenu), {
+      }), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_1$6, vue.toDisplayString(__props.column.text(__props.row)), 1)], 512), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FContextMenu), {
         "is-open": isOpen.value,
         items: menuitems.value,
         anchor: (_buttonRef$value = buttonRef.value) !== null && _buttonRef$value !== void 0 ? _buttonRef$value : void 0,
@@ -3958,7 +3958,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableRowheader",
   props: {
     row: {},
@@ -3974,7 +3974,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   class: "table-ng__editable"
 };
 const _hoisted_2$3 = {
@@ -3984,12 +3984,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__ */ vue.defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableSelect",
   props: {
     row: {},
@@ -4137,7 +4137,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         tabindex: "-1",
         onKeydown: onCellKeyDown,
         onClick: vue.withModifiers(onCellClick, ["stop"])
-      }, [vue.withDirectives(vue.createElementVNode("div", _hoisted_1$4, [vue.createElementVNode("span", _hoisted_2$3, vue.toDisplayString(viewValue.value), 1)], 512), [[vue.vShow, !editing.value]]), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("div", {
+      }, [vue.withDirectives(vue.createElementVNode("div", _hoisted_1$5, [vue.createElementVNode("span", _hoisted_2$3, vue.toDisplayString(viewValue.value), 1)], 512), [[vue.vShow, !editing.value]]), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("div", {
         ref: "edit",
         role: "combobox",
         tabindex: "-1",
@@ -4162,7 +4162,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         "input-node": editRef.value,
         onSelect: selectDropdownOption,
         onClose: onDropdownClose
-      }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node"]), [[vue.vShow, editing.value]])], 32)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_5$2, vue.toDisplayString(__props.column.selected(__props.row)), 1));
+      }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node"]), [[vue.vShow, editing.value]])], 32)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_5$3, vue.toDisplayString(__props.column.selected(__props.row)), 1));
     };
   }
 });
@@ -4211,7 +4211,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"
 };
@@ -4220,7 +4220,11 @@ const _hoisted_3$2 = {
   class: "sr-only"
 };
 const _hoisted_4$2 = ["id", "aria-label", "aria-hidden"];
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_5$2 = {
+  ref: "arrowAnchor",
+  "aria-hidden": "true"
+};
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableText",
   props: {
     row: {},
@@ -4312,6 +4316,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     });
     const tdElement = vue.useTemplateRef("td");
     const inputElement = vue.useTemplateRef("input");
+    const arrowAnchorElement = vue.useTemplateRef("arrowAnchor");
     const {
       stopEdit: stopEdit2
     } = useStartStopEdit();
@@ -4389,20 +4394,20 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     });
     vue.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,
@@ -4595,13 +4600,13 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         "aria-hidden": !inEdit.value,
         onValidity,
         onPendingValidity
-      }), null, 16, _hoisted_4$2), [[vue.vModelText, viewValue.value]])], 2), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.IPopupError), {
+      }), null, 16, _hoisted_4$2), [[vue.vModelText, viewValue.value]]), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_5$2, null, 512)], 2), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.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)) : (vue.openBlock(), vue.createElementBlock("td", {
+      }, null, 8, ["anchor", "is-open", "error-message", "arrow-anchor"])], 42, _hoisted_1$4)) : (vue.openBlock(), vue.createElementBlock("td", {
         key: 1,
         ref: "td",
         tabindex: "-1",
@@ -4780,7 +4785,7 @@ function normalizeTableColumn(column) {
       return Object.freeze({
         ...normalizeCheckboxColumn(column),
         ...base,
-        component: _sfc_main$c
+        component: _sfc_main$d
       });
     case "text:currency":
     case "text:number":
@@ -4788,7 +4793,7 @@ function normalizeTableColumn(column) {
       return Object.freeze({
         ...normalizeNumberColumn(column),
         ...base,
-        component: _sfc_main$4
+        component: _sfc_main$5
       });
     case "text":
     case "text:bankAccountNumber":
@@ -4804,43 +4809,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
       });
   }
 }
@@ -5213,7 +5218,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"
@@ -5245,7 +5250,7 @@ const _hoisted_10 = {
 };
 const _hoisted_11 = ["aria-rowindex"];
 const _hoisted_12 = ["colspan"];
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "FTable",
   props: /* @__PURE__ */ vue.mergeModels({
     columns: {},
@@ -5253,9 +5258,6 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     keyAttribute: {
       default: () => void 0
     },
-    expandableAttribute: {
-      default: () => void 0
-    },
     rowClass: {
       type: Function,
       default: void 0
@@ -5286,9 +5288,12 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     } = vue$1.useSlotUtils();
     const tableRef = vue.useTemplateRef("table");
     const expandedKeys = vue.ref(/* @__PURE__ */ new Set());
-    const keyedRows = vue.computed(() => vue$1.setItemIdentifiers(__props.rows, __props.keyAttribute, __props.expandableAttribute));
-    const metaRows = vue.computed(() => getMetaRows(keyedRows.value, expandedKeys.value, __props.expandableAttribute));
-    const isTreegrid = vue.computed(() => Boolean(__props.expandableAttribute));
+    const expandableAttribute = vue.computed(() => {
+      return vue$1.getDatasetMetadata(__props.rows).nestedAttribute;
+    });
+    const keyedRows = vue.computed(() => vue$1.setItemIdentifiers(__props.rows, __props.keyAttribute, expandableAttribute.value));
+    const metaRows = vue.computed(() => getMetaRows(keyedRows.value, expandedKeys.value, expandableAttribute.value));
+    const isTreegrid = vue.computed(() => Boolean(expandableAttribute.value));
     const role = vue.computed(() => isTreegrid.value ? "treegrid" : "grid");
     const hasCaption = vue.computed(() => {
       return hasSlot("caption", {}, {
@@ -5304,7 +5309,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.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 = vue.computed(() => {
@@ -5494,14 +5499,14 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         onFocusout: onTableFocusout,
         onClick,
         onKeydown
-      }, [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$1, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), hasColumns.value ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_3$1, [vue.createElementVNode("tr", _hoisted_4$1, [isTreegrid.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_5$1)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
+      }, [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$1, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), hasColumns.value ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_3$1, [vue.createElementVNode("tr", _hoisted_4$1, [isTreegrid.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_5$1)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createBlock(_sfc_main$e, {
         key: 1,
         ref: bindCellApiRef,
         state: vue.unref(selectableHeaderState)(),
         selectable: __props.selectable,
         onToggle: vue.unref(toggleSelectableHeader)
       }, null, 8, ["state", "selectable", "onToggle"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$e, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$f, {
           key: column.id,
           column,
           "sort-enabled": isSortEnabled(column),
@@ -5534,7 +5539,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           "aria-setsize": setsize,
           "aria-posinset": posinset,
           "aria-selected": isAriaSelected(level, row)
-        }, [isTreegrid.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
+        }, [isTreegrid.value ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
           key: 0,
           ref_for: true,
           ref: bindCellApiRef,
@@ -5542,7 +5547,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           "is-expanded": isExpanded,
           "row-key": key,
           onToggle: onToggleExpanded
-        }, null, 8, ["is-expandable", "is-expanded", "row-key"])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), level > 1 && hasExpandableSlot.value ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
+        }, null, 8, ["is-expandable", "is-expanded", "row-key"])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), level > 1 && hasExpandableSlot.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
           key: 1,
           colspan: expandedColspan.value
         }, {
@@ -5554,7 +5559,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           _: 2
         }, 1032, ["colspan"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 2
-        }, [__props.selectable ? (vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        }, [__props.selectable ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
           key: 0,
           ref_for: true,
           ref: bindCellApiRef,
@@ -5588,7 +5593,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         class: "table-ng__cell--custom",
         onKeydown: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(() => {
         }, ["prevent"]), ["space"]))
-      }, [vue.renderSlot(_ctx.$slots, "footer")], 40, _hoisted_12)], 8, _hoisted_11)])) : vue.createCommentVNode("", true)], 42, _hoisted_1$2);
+      }, [vue.renderSlot(_ctx.$slots, "footer")], 40, _hoisted_12)], 8, _hoisted_11)])) : vue.createCommentVNode("", true)], 42, _hoisted_1$3);
     };
   }
 });
@@ -7015,7 +7020,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"
 };
@@ -7038,7 +7043,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__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "XFileDragdrop",
   setup(__props) {
     const valdFil = vue.ref(File);
@@ -7217,7 +7222,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         onDragover: dragover,
         onDragleave: dragleave,
         onDrop: drop
-      }, [vue.renderSlot(_ctx.$slots, "image"), _cache[6] || (_cache[6] = vue.createTextVNode()), _cache[7] || (_cache[7] = vue.createElementVNode("h3", null, "Ladda upp ett dokument", -1)), _cache[8] || (_cache[8] = vue.createTextVNode("\n        dra och släpp eller\n        ", -1)), filValidering.value !== "" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [vue.createElementVNode("span", _hoisted_2, [vue.createVNode(vue.unref(vue$1.FIcon), {
+      }, [vue.renderSlot(_ctx.$slots, "image"), _cache[6] || (_cache[6] = vue.createTextVNode()), _cache[7] || (_cache[7] = vue.createElementVNode("h3", null, "Ladda upp ett dokument", -1)), _cache[8] || (_cache[8] = vue.createTextVNode("\n        dra och släpp eller\n        ", -1)), filValidering.value !== "" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [vue.createElementVNode("span", _hoisted_2, [vue.createVNode(vue.unref(vue$1.FIcon), {
         name: "error"
       })]), vue.createTextVNode(" " + vue.toDisplayString(filValidering.value), 1)])) : vue.createCommentVNode("", true), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("div", null, [vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(vue$1.FFileSelector), {
         id: "valjFil",
@@ -7255,6 +7260,72 @@ const _sfc_main$2 = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+  __name: "XRelativeTime",
+  props: {
+    timestamp: {},
+    reference: {
+      default: () => Date.now()
+    }
+  },
+  setup(__props) {
+    const $t = vue$1.useTranslate();
+    const ago = vue.computed(() => timeAgo(__props.timestamp, __props.reference, $t));
+    const datetime = vue.computed(() => new Date(__props.timestamp).toISOString());
+    const title = vue.computed(() => new Date(__props.timestamp).toLocaleString());
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("time", {
+        datetime: datetime.value,
+        title: title.value
+      }, vue.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;
@@ -7565,11 +7636,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     logic.ValidationService.validateElement(inputElement);
   }
 });
-exports.FTable = _sfc_main$3;
+exports.FTable = _sfc_main$4;
 exports.HOURS_MINUTES_REGEXP = HOURS_MINUTES_REGEXP;
 exports.HOURS_MINUTES_WITHOUT_COLON_REGEXP = HOURS_MINUTES_WITHOUT_COLON_REGEXP;
 exports.HoursMinutesValidatorUtils = HoursMinutesValidatorUtils;
-exports.XFileDragdrop = _sfc_main$2;
+exports.XFileDragdrop = _sfc_main$3;
+exports.XRelativeTime = XRelativeTime;
 exports.XSortFilterDatasetNg = _sfc_main$1;
 exports.XTimeTextField = _sfc_main;
 exports.baseTypes = baseTypes;