@fkui/vue-labs 6.40.0 → 6.41.0

package/dist/cjs/index.cjs.js

@@ -2601,7 +2601,7 @@ const _hoisted_1$e = {
   class: "table-ng__cell table-ng__cell--expand"
 };
 const _hoisted_2$9 = ["aria-label", "aria-expanded"];
-const _hoisted_3$5 = {
+const _hoisted_3$4 = {
   key: 1,
   ref: "expandable",
   tabindex: "-1",
@@ -2647,7 +2647,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createVNode(vue.unref(vue$1.FIcon), {
         class: "button__icon",
         name: toggleIcon.value
-      }, null, 8, ["name"])], 8, _hoisted_2$9)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$5, null, 512));
+      }, null, 8, ["name"])], 8, _hoisted_2$9)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$4, null, 512));
     };
   }
 });
@@ -2993,7 +2993,7 @@ const inputFieldConfig = {
     }
   }
 };
-const _hoisted_1$c = ["aria-sort"];
+const _hoisted_1$c = ["aria-sort", "onKeydown"];
 const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableHeader",
   props: {
@@ -3057,19 +3057,13 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
       }
       emit("toggleSortOrder", String(__props.column.sortable));
     }
-    function onKeydownCell(e) {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        onClickCell();
-      }
-    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("th", {
         ref: "th",
         "aria-sort": sortValue.value,
         class: vue.normalizeClass(columnClasses.value),
         tabindex: "-1",
-        onKeydown: onKeydownCell,
+        onKeydown: vue.withKeys(vue.withModifiers(onClickCell, ["prevent"]), ["enter", "space"]),
         onClick: vue.withModifiers(onClickCell, ["stop"])
       }, [vue.createVNode(vue.unref(vue$1.IFlex), {
         gap: "1x",
@@ -3763,12 +3757,8 @@ function requireEs_iterator_map() {
   return es_iterator_map;
 }
 requireEs_iterator_map();
-const _hoisted_1$7 = {
-  key: 0,
-  class: "table-ng__cell table-ng__cell--anchor"
-};
-const _hoisted_2$5 = ["href"];
-const _hoisted_3$4 = {
+const _hoisted_1$7 = ["href"];
+const _hoisted_2$5 = {
   key: 1,
   ref: "target",
   tabindex: "-1",
@@ -3789,13 +3779,18 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
     __expose(expose);
     return (_ctx, _cache) => {
-      return __props.column.text(__props.row) ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_1$7, [vue.createElementVNode("a", {
+      return __props.column.text(__props.row) ? (vue.openBlock(), vue.createElementBlock("td", {
+        key: 0,
+        class: "table-ng__cell table-ng__cell--anchor",
+        onKeydown: _cache[0] || (_cache[0] = vue.withKeys(vue.withModifiers(() => {
+        }, ["prevent"]), ["space"]))
+      }, [vue.createElementVNode("a", {
         ref: "target",
         class: "anchor anchor--block",
         target: "_blank",
         href: __props.column.href,
         tabindex: "-1"
-      }, vue.toDisplayString(__props.column.text(__props.row)), 9, _hoisted_2$5)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$4, null, 512));
+      }, vue.toDisplayString(__props.column.text(__props.row)), 9, _hoisted_1$7)], 32)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_2$5, null, 512));
     };
   }
 });
@@ -4016,7 +4011,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     const activeOptionId = logic.ElementIdService.generateElementId();
     const activeOption = vue.ref(null);
     async function onCellKeyDown(e) {
-      if (e.code === "Enter" || e.code === "NumpadEnter") {
+      if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Space") {
         await startEditing(e);
       }
     }
@@ -4344,22 +4339,38 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     }
     function setUpFakeValidation(el) {
       logic.assertRef(inputElement);
+      const input = inputElement.value;
+      function emitFakeValidity(nativeEvent) {
+        const fakeEvent = new CustomEvent("validity", {
+          detail: {
+            isValid: true,
+            nativeEvent,
+            validityMode: "INITIAL",
+            validationMessage: "",
+            target: input,
+            elementId: String(input.id)
+          }
+        });
+        onValidity(fakeEvent);
+      }
       const nativeEvents = ["change", "blur"];
       for (const nativeEvent of nativeEvents) {
         core.useEventListener(el, nativeEvent, () => {
-          const fakeEvent = new CustomEvent("validity", {
-            detail: {
-              isValid: true,
-              nativeEvent,
-              validityMode: "INITIAL",
-              validationMessage: "",
-              target: inputElement.value,
-              elementId: String(inputElement.value.id)
-            }
-          });
-          onValidity(fakeEvent);
+          emitFakeValidity(nativeEvent);
         });
       }
+      validationFacade = {
+        validateElement: () => {
+          emitFakeValidity("validate");
+          return Promise.resolve({
+            isValid: true,
+            error: "",
+            isSubmitted: false,
+            isTouched: false
+          });
+        },
+        dispatchComponentValidityEvent: () => void 0
+      };
       core.useEventListener(el, "input", onPendingValidity);
       core.useEventListener(el, "component-validity", (e) => {
         e.stopPropagation();
@@ -4427,6 +4438,9 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       inputElement.value.tabIndex = -1;
       logic.assertRef(tdElement);
       tdElement.value.style.removeProperty("width");
+      if (reason === "blur") {
+        tdElement.value.tabIndex = 0;
+      }
       void stopEdit2(inputElement.value, reason);
     }
     function fromColumnValue() {
@@ -4483,6 +4497,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
             });
           } else {
             pendingStopEditReason = "enter";
+            void validationFacade.validateElement(inputElement.value);
           }
           break;
         }
@@ -4564,7 +4579,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         onKeydown
       }, [vue.createElementVNode("div", {
         class: vue.normalizeClass(divClasses.value)
-      }, [vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(fromColumnValue()), 1), _cache[1] || (_cache[1] = vue.createTextVNode()), viewModeErrorMessage.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString(viewModeErrorMessage.value), 1)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
+      }, [vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(fromColumnValue()), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), viewModeErrorMessage.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString(viewModeErrorMessage.value), 1)) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
         id: vue.unref(inputId),
         ref: "input",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => viewValue.value = $event),
@@ -4580,7 +4595,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         "aria-hidden": !inEdit.value,
         onValidity,
         onPendingValidity
-      }), null, 16, _hoisted_4$2), [[vue.vModelText, viewValue.value]])], 2), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.IPopupError), {
+      }), null, 16, _hoisted_4$2), [[vue.vModelText, viewValue.value]])], 2), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.IPopupError), {
         anchor: tdElement.value,
         "is-open": openPopupError.value,
         "error-message": validity.value.validationMessage,
@@ -4590,8 +4605,10 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         key: 1,
         ref: "td",
         tabindex: "-1",
-        class: vue.normalizeClass(staticClasses.value)
-      }, vue.toDisplayString(fromColumnValue()), 3));
+        class: vue.normalizeClass(staticClasses.value),
+        onKeydown: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(() => {
+        }, ["prevent"]), ["space"]))
+      }, vue.toDisplayString(fromColumnValue()), 35));
     };
   }
 });
@@ -5070,8 +5087,8 @@ function useSelectable(options) {
   };
 }
 function matching(needle) {
-  const id = vue$1.getItemIdentifier(needle);
-  return (item) => vue$1.getItemIdentifier(item) === id;
+  const id = vue$1.getItemIdentifier(needle.row);
+  return (item) => vue$1.getItemIdentifier(item.row) === id;
 }
 function useTabstop(tableRef, metaRows) {
   let pendingRowRemoval = false;
@@ -5459,7 +5476,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       selectedRows,
       rows: keyedRows
     });
-    const tableApi = useTabstop(tableRef, keyedRows);
+    const tableApi = useTabstop(tableRef, metaRows);
     __expose(tableApi);
     vue.onMounted(() => {
       logic.assertRef(tableRef);
@@ -5477,13 +5494,13 @@ 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[4] || (_cache[4] = 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[0] || (_cache[0] = 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$d, {
         key: 1,
         ref: bindCellApiRef,
         state: vue.unref(selectableHeaderState)(),
         selectable: __props.selectable,
         onToggle: vue.unref(toggleSelectableHeader)
-      }, null, 8, ["state", "selectable", "onToggle"])) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+      }, 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, {
           key: column.id,
           column,
@@ -5492,10 +5509,12 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           scope: "col",
           onToggleSortOrder
         }, null, 8, ["column", "sort-enabled", "sort-order"]);
-      }), 128))])])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), hasColumns.value ? (vue.openBlock(), vue.createElementBlock("tbody", _hoisted_6$1, [isEmpty.value ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$1, [vue.createElementVNode("td", {
+      }), 128))])])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), hasColumns.value ? (vue.openBlock(), vue.createElementBlock("tbody", _hoisted_6$1, [isEmpty.value ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$1, [vue.createElementVNode("td", {
         colspan: fullColspan.value,
-        class: "table-ng__cell"
-      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t)("fkui.ftable.empty.text", "Tabellen är tom")), 1)])], 8, _hoisted_8)])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+        class: "table-ng__cell",
+        onKeydown: _cache[0] || (_cache[0] = vue.withKeys(vue.withModifiers(() => {
+        }, ["prevent"]), ["space"]))
+      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t)("fkui.ftable.empty.text", "Tabellen är tom")), 1)])], 40, _hoisted_8)])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
         key: 1
       }, vue.renderList(metaRows.value, ({
         key,
@@ -5523,7 +5542,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[3] || (_cache[3] = 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$f, {
           key: 1,
           colspan: expandedColspan.value
         }, {
@@ -5544,7 +5563,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           state: vue.unref(selectableRowState)(row),
           row,
           onToggle: vue.unref(toggleSelectableRow)
-        }, null, 8, ["level", "selectable", "state", "row", "onToggle"])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+        }, null, 8, ["level", "selectable", "state", "row", "onToggle"])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: column.id
           }, ["component" in column ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(column.component), {
@@ -5561,16 +5580,29 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             row
           }, null, 8, ["row"])) : vue.createCommentVNode("", true)], 64);
         }), 128))], 64))], 10, _hoisted_9);
-      }), 128))])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), hasFooter.value ? (vue.openBlock(), vue.createElementBlock("tfoot", _hoisted_10, [vue.createElementVNode("tr", {
+      }), 128))])) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), hasFooter.value ? (vue.openBlock(), vue.createElementBlock("tfoot", _hoisted_10, [vue.createElementVNode("tr", {
         class: "table-ng__row",
         "aria-rowindex": ariaRowcount.value
       }, [vue.createElementVNode("td", {
         colspan: fullColspan.value,
-        class: "table-ng__cell--custom"
-      }, [vue.renderSlot(_ctx.$slots, "footer")], 8, _hoisted_12)], 8, _hoisted_11)])) : vue.createCommentVNode("", true)], 42, _hoisted_1$2);
+        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);
     };
   }
 });
+function isSortable(column) {
+  return "key" in column && column.key !== void 0 && column.sort !== false;
+}
+function toEntry(column) {
+  return [column.key, column.header];
+}
+function getTableSortableAttributes(columns) {
+  const sortable = columns.filter(isSortable);
+  const attributes = sortable.map(toEntry);
+  return Object.fromEntries(attributes);
+}
 var es_array_toSpliced = {};
 var hasRequiredEs_array_toSpliced;
 function requireEs_array_toSpliced() {
@@ -7497,7 +7529,7 @@ const validators = [hoursMinutesValidator, greaterThanTimeValidator, lessThanTim
 for (const validator of validators) {
   logic.ValidationService.registerValidator(validator);
 }
-const _sfc_main = vue.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   name: "XTimeTextField",
   extends: vue$1.FTextField,
   mixins: [vue$1.TranslationMixin],
@@ -7544,6 +7576,7 @@ exports.baseTypes = baseTypes;
 exports.defineTableColumns = defineTableColumns;
 exports.forgivingParseTimeToNumber = forgivingParseTimeToNumber;
 exports.formatNumberToTime = formatNumberToTime;
+exports.getTableSortableAttributes = getTableSortableAttributes;
 exports.hoursMinutesStringToMinutes = hoursMinutesStringToMinutes;
 exports.matchPropertyValue = matchPropertyValue;
 exports.minutesToHoursFloat = minutesToHoursFloat;