@fkui/vue-labs 6.18.0 → 6.18.1

package/dist/cjs/index.cjs.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const logic = require("@fkui/logic");
 const vue = require("vue");
 const vue$1 = require("@fkui/vue");
-const HOURS_MINUTES_REGEXP = /^(?<hours>[0-9]+)?(:(?<minutes>[0-5][0-9]))?$/;
-const HOURS_MINUTES_WITHOUT_COLON_REGEXP = /^(?<hours>[0-9]{2})(?<minutes>[0-5][0-9])$/;
+const HOURS_MINUTES_REGEXP = /^(?<hours>\d+)?(:(?<minutes>[0-5]\d))?$/;
+const HOURS_MINUTES_WITHOUT_COLON_REGEXP = /^(?<hours>\d{2})(?<minutes>[0-5]\d)$/;
 var es_iterator_forEach = {};
 var globalThis_1;
 var hasRequiredGlobalThis;
@@ -2471,7 +2471,7 @@ function getCellTarget(tableElement, rowIndex, cellIndex) {
   return tableElement.rows[rowIndex].cells[cellIndex];
 }
 function isTd(element) {
-  return element !== null && element.cellIndex !== void 0;
+  return element?.cellIndex !== void 0;
 }
 function getTr(td) {
   return td.parentElement;
@@ -2787,357 +2787,9 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-function getValueFn(fn, key, coerce, defaultValue) {
-  if (fn) {
-    return fn;
-  }
-  if (key) {
-    return (row) => {
-      return coerce(row[key]);
-    };
-  }
-  return () => defaultValue;
-}
-function getUpdateFn(fn, key) {
-  if (fn) {
-    return fn;
-  }
-  if (key) {
-    return (row, value) => {
-      row[key] = value;
-    };
-  }
-  return () => void 0;
-}
-function normalizeTableColumn(column) {
-  var _column$validation;
-  if ("render" in column) {
-    return {
-      type: void 0,
-      header: column.header,
-      render: column.render
-    };
-  }
-  switch (column.type) {
-    case "checkbox":
-      return {
-        type: "checkbox",
-        header: column.header,
-        value: getValueFn(column.value, column.key, Boolean, false),
-        update: getUpdateFn(column.update, column.key),
-        editable: typeof column.editable === "function" ? column.editable : () => {
-          var _column$editable;
-          return Boolean((_column$editable = column.editable) !== null && _column$editable !== void 0 ? _column$editable : false);
-        },
-        sortable: column.key
-      };
-    case "radio":
-      return {
-        type: "radio",
-        header: column.header,
-        value: getValueFn(column.value, column.key, Boolean, false),
-        update: getUpdateFn(column.update, column.key),
-        sortable: column.key
-      };
-    case "text":
-      return {
-        type: "text",
-        header: column.header,
-        value: getValueFn(column.value, column.key, String, ""),
-        update: getUpdateFn(column.update, column.key),
-        editable: typeof column.editable === "function" ? column.editable : () => {
-          var _column$editable2;
-          return Boolean((_column$editable2 = column.editable) !== null && _column$editable2 !== void 0 ? _column$editable2 : false);
-        },
-        validation: (_column$validation = column.validation) !== null && _column$validation !== void 0 ? _column$validation : {},
-        sortable: column.key
-      };
-    case "anchor":
-      return {
-        type: "anchor",
-        header: column.header,
-        value: column.value,
-        href: column.href,
-        enabled: typeof column.enabled === "function" ? column.enabled : () => {
-          var _column$enabled;
-          return Boolean((_column$enabled = column.enabled) !== null && _column$enabled !== void 0 ? _column$enabled : true);
-        },
-        sortable: column.key
-      };
-    case "button":
-      return {
-        type: "button",
-        header: column.header,
-        value: column.value,
-        onClick: column.onClick,
-        enabled: typeof column.enabled === "function" ? column.enabled : () => {
-          var _column$enabled2;
-          return Boolean((_column$enabled2 = column.enabled) !== null && _column$enabled2 !== void 0 ? _column$enabled2 : true);
-        },
-        icon: column.icon,
-        sortable: column.key
-      };
-    case "select":
-      return {
-        type: "select",
-        header: column.header,
-        value: getValueFn(column.value, column.key, String, ""),
-        update: getUpdateFn(column.update, column.key),
-        editable: typeof column.editable === "function" ? column.editable : () => {
-          var _column$editable3;
-          return Boolean((_column$editable3 = column.editable) !== null && _column$editable3 !== void 0 ? _column$editable3 : false);
-        },
-        options: column.options,
-        sortable: column.key
-      };
-    case void 0:
-      return {
-        type: void 0,
-        header: column.header,
-        value: getValueFn(column.value, column.key, String, ""),
-        sortable: column.key
-      };
-  }
-}
-function defineTableColumns(columns) {
-  return columns;
-}
-function normalizeTableColumns(columns) {
-  return columns.map(normalizeTableColumn);
-}
-const stopEditKey = Symbol();
-function useStartStopEdit() {
-  const stopEdit2 = vue.inject(stopEditKey, () => Promise.resolve());
-  return {
-    stopEdit: stopEdit2
-  };
-}
-const _hoisted_1$7 = {
-  class: "table-ng__editable"
-};
-const _hoisted_2$3 = {
-  class: "table-ng__editable__text"
-};
-const _hoisted_3$1 = ["aria-controls"];
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
-  __name: "ITableSelect",
-  props: {
-    row: {},
-    column: {}
-  },
-  setup(__props) {
-    const editing = vue.ref(false);
-    const editRef = vue.useTemplateRef("edit");
-    const {
-      stopEdit: stopEdit2
-    } = useStartStopEdit();
-    const viewValue = vue.ref(__props.column.value(__props.row));
-    const tdRef = vue.useTemplateRef("td");
-    function onActivateCell(e) {
-      logic.assertRef(tdRef);
-      tdRef.value.tabIndex = 0;
-      if (e.detail.focus) {
-        tdRef.value.focus();
-      }
-    }
-    async function onCellKeyDown(e) {
-      if (e.code === "Enter" || e.code === "NumpadEnter") {
-        startEditing(e);
-      }
-    }
-    async function onCellClick(e) {
-      if (editing.value) {
-        return;
-      }
-      startEditing(e);
-    }
-    async function startEditing(e) {
-      logic.assertRef(editRef);
-      e.preventDefault();
-      editing.value = true;
-      await vue.nextTick();
-      editRef.value.tabIndex = 0;
-      editRef.value.focus();
-      openSelected("first");
-    }
-    async function onDropdownSelect(value) {
-      logic.assertRef(editRef);
-      logic.assertSet(stopEdit2);
-      close();
-      submit();
-      viewValue.value = value;
-      stopEdit2(editRef.value, "enter");
-    }
-    function onDropdownClose() {
-      logic.assertRef(editRef);
-      logic.assertSet(stopEdit2);
-      stopEdit2(editRef.value, "escape");
-    }
-    const dropdownId = logic.ElementIdService.generateElementId();
-    const dropdownIsOpen = vue.ref(false);
-    const activeOptionId = logic.ElementIdService.generateElementId();
-    const activeOption = vue.ref(null);
-    vue.watchEffect(async () => {
-      if (!editRef.value) {
-        return;
-      }
-      if (activeOption.value) {
-        editRef.value.setAttribute("aria-activedescendant", activeOptionId);
-      } else {
-        editRef.value.removeAttribute("aria-activedescendant");
-      }
-    });
-    async function openSelected(fallback = null) {
-      dropdownIsOpen.value = true;
-      await vue.nextTick();
-      if (viewValue.value) {
-        activeOption.value = viewValue.value;
-      } else if (fallback === "first") {
-        activeOption.value = __props.column.options[0];
-      } else if (fallback === "last") {
-        activeOption.value = __props.column.options[__props.column.options.length - 1];
-      } else {
-        activeOption.value = null;
-      }
-      editRef.value?.focus();
-    }
-    function close() {
-      dropdownIsOpen.value = false;
-      activeOption.value = null;
-    }
-    function setNextOption() {
-      if (activeOption.value) {
-        const index = __props.column.options.indexOf(activeOption.value);
-        if (index === __props.column.options.length - 1) {
-          activeOption.value = __props.column.options[0];
-        } else {
-          activeOption.value = __props.column.options[index + 1];
-        }
-      } else {
-        activeOption.value = __props.column.options[0];
-      }
-    }
-    function setPreviousOption() {
-      if (activeOption.value) {
-        const index = __props.column.options.indexOf(activeOption.value);
-        if (index === 0) {
-          activeOption.value = __props.column.options[__props.column.options.length - 1];
-        } else {
-          activeOption.value = __props.column.options[index - 1];
-        }
-      } else {
-        activeOption.value = __props.column.options[__props.column.options.length - 1];
-      }
-    }
-    async function onEditKeyDown(e) {
-      logic.assertRef(editRef);
-      logic.assertSet(stopEdit2);
-      switch (e.code) {
-        case "Escape":
-          e.preventDefault();
-          cancel();
-          stopEdit2(editRef.value, "escape");
-          break;
-        case "Enter":
-        case "NumpadEnter":
-          e.preventDefault();
-          submit();
-          if (activeOption.value) {
-            viewValue.value = activeOption.value;
-          }
-          close();
-          stopEdit2(editRef.value, "enter");
-          break;
-        case "Tab":
-          e.preventDefault();
-          cancel();
-          stopEdit2(editRef.value, e.shiftKey ? "shift-tab" : "tab");
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          if (dropdownIsOpen.value) {
-            setNextOption();
-          } else {
-            openSelected("first");
-          }
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          if (dropdownIsOpen.value) {
-            setPreviousOption();
-          } else {
-            openSelected("last");
-          }
-          break;
-      }
-    }
-    async function onEditBlur() {
-      if (editing.value) {
-        logic.assertSet(stopEdit2);
-        logic.assertRef(editRef);
-        dropdownIsOpen.value = false;
-        editing.value = false;
-        await vue.nextTick();
-        stopEdit2(editRef.value, "blur");
-      }
-    }
-    async function submit() {
-      editing.value = false;
-      await vue.nextTick();
-    }
-    function cancel() {
-      logic.assertSet(stopEdit2);
-      logic.assertRef(editRef);
-      stopEdit2(editRef.value, "escape");
-    }
-    return (_ctx, _cache) => {
-      return _ctx.column.editable(_ctx.row) ? (vue.openBlock(), vue.createElementBlock("td", {
-        key: 0,
-        ref: "td",
-        class: "table-ng__cell table-ng__cell--select",
-        tabindex: "-1",
-        onKeydown: onCellKeyDown,
-        onClick: vue.withModifiers(onCellClick, ["stop"]),
-        onTableActivateCell: onActivateCell
-      }, [vue.withDirectives(vue.createElementVNode("div", _hoisted_1$7, [vue.createElementVNode("span", _hoisted_2$3, vue.toDisplayString(viewValue.value), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FIcon), {
-        name: "pen",
-        class: "table-ng__editable__icon"
-      })], 512), [[vue.vShow, !editing.value]]), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("div", {
-        ref: "edit",
-        role: "combobox",
-        tabindex: "-1",
-        "aria-expanded": "",
-        "aria-controls": vue.unref(dropdownId),
-        "aria-autocomplete": "list",
-        class: "table-ng__editable",
-        onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-        }, ["stop"])),
-        onDblclick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
-        }, ["prevent"])),
-        onKeydown: vue.withModifiers(onEditKeyDown, ["stop"]),
-        onFocusout: onEditBlur
-      }, vue.toDisplayString(viewValue.value), 41, _hoisted_3$1), [[vue.vShow, editing.value]]), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.withDirectives(vue.createVNode(vue.unref(vue$1.IComboboxDropdown), {
-        id: "dropdownId",
-        "is-open": dropdownIsOpen.value,
-        options: _ctx.column.options,
-        "active-option": activeOption.value,
-        "active-option-id": vue.unref(activeOptionId),
-        "input-node": editRef.value,
-        onSelect: onDropdownSelect,
-        onClose: onDropdownClose
-      }, null, 8, ["is-open", "options", "active-option", "active-option-id", "input-node"]), [[vue.vShow, editing.value]])], 544)) : (vue.openBlock(), vue.createElementBlock("td", {
-        key: 1,
-        ref: "td",
-        tabindex: "-1",
-        class: "table-ng__cell table-ng__cell--static",
-        onTableActivateCell: onActivateCell
-      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 545));
-    };
-  }
-});
-const _hoisted_1$6 = ["checked", "aria-label"];
-const _hoisted_2$2 = ["checked", "aria-label"];
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$7 = ["checked", "aria-label"];
+const _hoisted_2$3 = ["checked", "aria-label"];
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableCheckbox",
   props: {
     column: {},
@@ -3168,7 +2820,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         "aria-label": _ctx.column.header,
         tabindex: "-1",
         onChange
-      }, null, 40, _hoisted_1$6)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
+      }, null, 40, _hoisted_1$7)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
         key: 1,
         ref: "target",
         tabindex: "-1",
@@ -3179,12 +2831,12 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         type: "checkbox",
         "aria-label": _ctx.column.header,
         disabled: ""
-      }, null, 8, _hoisted_2$2)], 544));
+      }, null, 8, _hoisted_2$3)], 544));
     };
   }
 });
-const _hoisted_1$5 = ["checked", "aria-label"];
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$6 = ["checked", "aria-label"];
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableRadio",
   props: {
     column: {},
@@ -3214,12 +2866,12 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         "aria-label": _ctx.column.header,
         tabindex: "-1",
         onChange
-      }, null, 40, _hoisted_1$5)], 32);
+      }, null, 40, _hoisted_1$6)], 32);
     };
   }
 });
-const _hoisted_1$4 = ["href"];
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$5 = ["href"];
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableAnchor",
   props: {
     column: {},
@@ -3248,7 +2900,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         target: "_blank",
         href: _ctx.column.href,
         tabindex: "-1"
-      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 9, _hoisted_1$4)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
+      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 9, _hoisted_1$5)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
         key: 1,
         ref: "target",
         tabindex: "-1",
@@ -3258,10 +2910,10 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   class: "sr-only"
 };
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableButton",
   props: {
     column: {},
@@ -3302,7 +2954,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       }, [_ctx.column.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FIcon), {
         key: 0,
         name: _ctx.column.icon
-      }, null, 8, ["name"])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_1$3, vue.toDisplayString(_ctx.column.value(_ctx.row)), 1)], 512)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
+      }, null, 8, ["name"])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_1$4, vue.toDisplayString(_ctx.column.value(_ctx.row)), 1)], 512)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
         key: 1,
         ref: "td",
         tabindex: "-1",
@@ -3312,13 +2964,20 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const stopEditKey = Symbol();
+function useStartStopEdit() {
+  const stopEdit2 = vue.inject(stopEditKey, () => Promise.resolve());
+  return {
+    stopEdit: stopEdit2
+  };
+}
 function isAlphanumeric(e) {
   return e.key.length === 1 && !e.ctrlKey && !e.metaKey;
 }
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   class: "table-ng__editable"
 };
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableText",
   props: {
     row: {},
@@ -3432,66 +3091,289 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         });
       }
     }
-    function onKeydown(event) {
-      const editing = document.activeElement === inputElement.value;
-      if (editing) {
-        onEditingKeydown(event);
-      } else {
-        onViewingKeydown(event);
+    function onKeydown(event) {
+      const editing = document.activeElement === inputElement.value;
+      if (editing) {
+        onEditingKeydown(event);
+      } else {
+        onViewingKeydown(event);
+      }
+    }
+    function onBlur() {
+      logic.assertRef(tdElement);
+      tdElement.value.style.removeProperty("width");
+      const isDirty = model.value !== "";
+      if (isDirty) {
+        const oldValue = __props.column.value(__props.row);
+        const newValue = model.value;
+        __props.column.update(__props.row, newValue, oldValue);
+      }
+    }
+    function onValidity(event) {
+      const {
+        isValid,
+        validationMessage,
+        validityMode
+      } = event.detail;
+      validity.value = {
+        isValid,
+        validationMessage,
+        validityMode
+      };
+    }
+    return (_ctx, _cache) => {
+      return _ctx.column.editable(_ctx.row) ? (vue.openBlock(), vue.createElementBlock("td", {
+        key: 0,
+        ref: "td",
+        tabindex: "-1",
+        class: vue.normalizeClass(wrapperClasses.value),
+        onClick: vue.withModifiers(onClickCell, ["stop"]),
+        onKeydown,
+        onTableActivateCell: onActivateCell
+      }, [vue.createElementVNode("div", _hoisted_1$3, [vue.createElementVNode("span", {
+        ref: "view",
+        class: "table-ng__editable__text"
+      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 513), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("input", {
+        ref: "input",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+        class: vue.normalizeClass(inputClasses.value),
+        type: "text",
+        maxlength: "40",
+        tabindex: "-1",
+        onBlur,
+        onValidity
+      }, null, 34), [[vue.vModelText, model.value]]), _cache[2] || (_cache[2] = vue.createTextVNode()), hasError.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FIcon), {
+        key: 0,
+        name: "error",
+        class: "table-ng__editable__icon"
+      })) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FIcon), {
+        key: 1,
+        name: "pen",
+        class: "table-ng__editable__icon"
+      }))])], 34)) : (vue.openBlock(), vue.createElementBlock("td", {
+        key: 1,
+        ref: "td",
+        tabindex: "-1",
+        class: "table-ng__cell table-ng__cell--static",
+        onTableActivateCell: onActivateCell
+      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 545));
+    };
+  }
+});
+const _hoisted_1$2 = {
+  class: "table-ng__editable"
+};
+const _hoisted_2$2 = {
+  class: "table-ng__editable__text"
+};
+const _hoisted_3$1 = ["aria-controls"];
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITableSelect",
+  props: {
+    row: {},
+    column: {}
+  },
+  setup(__props) {
+    const editing = vue.ref(false);
+    const editRef = vue.useTemplateRef("edit");
+    const {
+      stopEdit: stopEdit2
+    } = useStartStopEdit();
+    const viewValue = vue.ref(__props.column.value(__props.row));
+    const tdRef = vue.useTemplateRef("td");
+    function onActivateCell(e) {
+      logic.assertRef(tdRef);
+      tdRef.value.tabIndex = 0;
+      if (e.detail.focus) {
+        tdRef.value.focus();
+      }
+    }
+    async function onCellKeyDown(e) {
+      if (e.code === "Enter" || e.code === "NumpadEnter") {
+        startEditing(e);
+      }
+    }
+    async function onCellClick(e) {
+      if (editing.value) {
+        return;
+      }
+      startEditing(e);
+    }
+    async function startEditing(e) {
+      logic.assertRef(editRef);
+      e.preventDefault();
+      editing.value = true;
+      await vue.nextTick();
+      editRef.value.tabIndex = 0;
+      editRef.value.focus();
+      openSelected("first");
+    }
+    async function onDropdownSelect(value) {
+      logic.assertRef(editRef);
+      logic.assertSet(stopEdit2);
+      close();
+      submit();
+      viewValue.value = value;
+      stopEdit2(editRef.value, "enter");
+    }
+    function onDropdownClose() {
+      logic.assertRef(editRef);
+      logic.assertSet(stopEdit2);
+      stopEdit2(editRef.value, "escape");
+    }
+    const dropdownId = logic.ElementIdService.generateElementId();
+    const dropdownIsOpen = vue.ref(false);
+    const activeOptionId = logic.ElementIdService.generateElementId();
+    const activeOption = vue.ref(null);
+    vue.watchEffect(async () => {
+      if (!editRef.value) {
+        return;
+      }
+      if (activeOption.value) {
+        editRef.value.setAttribute("aria-activedescendant", activeOptionId);
+      } else {
+        editRef.value.removeAttribute("aria-activedescendant");
+      }
+    });
+    async function openSelected(fallback = null) {
+      dropdownIsOpen.value = true;
+      await vue.nextTick();
+      if (viewValue.value) {
+        activeOption.value = viewValue.value;
+      } else if (fallback === "first") {
+        activeOption.value = __props.column.options[0];
+      } else if (fallback === "last") {
+        activeOption.value = __props.column.options[__props.column.options.length - 1];
+      } else {
+        activeOption.value = null;
+      }
+      editRef.value?.focus();
+    }
+    function close() {
+      dropdownIsOpen.value = false;
+      activeOption.value = null;
+    }
+    function setNextOption() {
+      if (activeOption.value) {
+        const index = __props.column.options.indexOf(activeOption.value);
+        if (index === __props.column.options.length - 1) {
+          activeOption.value = __props.column.options[0];
+        } else {
+          activeOption.value = __props.column.options[index + 1];
+        }
+      } else {
+        activeOption.value = __props.column.options[0];
+      }
+    }
+    function setPreviousOption() {
+      if (activeOption.value) {
+        const index = __props.column.options.indexOf(activeOption.value);
+        if (index === 0) {
+          activeOption.value = __props.column.options[__props.column.options.length - 1];
+        } else {
+          activeOption.value = __props.column.options[index - 1];
+        }
+      } else {
+        activeOption.value = __props.column.options[__props.column.options.length - 1];
+      }
+    }
+    async function onEditKeyDown(e) {
+      logic.assertRef(editRef);
+      logic.assertSet(stopEdit2);
+      switch (e.code) {
+        case "Escape":
+          e.preventDefault();
+          cancel();
+          stopEdit2(editRef.value, "escape");
+          break;
+        case "Enter":
+        case "NumpadEnter":
+          e.preventDefault();
+          submit();
+          if (activeOption.value) {
+            viewValue.value = activeOption.value;
+          }
+          close();
+          stopEdit2(editRef.value, "enter");
+          break;
+        case "Tab":
+          e.preventDefault();
+          cancel();
+          stopEdit2(editRef.value, e.shiftKey ? "shift-tab" : "tab");
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (dropdownIsOpen.value) {
+            setNextOption();
+          } else {
+            openSelected("first");
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (dropdownIsOpen.value) {
+            setPreviousOption();
+          } else {
+            openSelected("last");
+          }
+          break;
       }
     }
-    function onBlur() {
-      logic.assertRef(tdElement);
-      tdElement.value.style.removeProperty("width");
-      const isDirty = model.value !== "";
-      if (isDirty) {
-        const oldValue = __props.column.value(__props.row);
-        const newValue = model.value;
-        __props.column.update(__props.row, newValue, oldValue);
+    async function onEditBlur() {
+      if (editing.value) {
+        logic.assertSet(stopEdit2);
+        logic.assertRef(editRef);
+        dropdownIsOpen.value = false;
+        editing.value = false;
+        await vue.nextTick();
+        stopEdit2(editRef.value, "blur");
       }
     }
-    function onValidity(event) {
-      const {
-        isValid,
-        validationMessage,
-        validityMode
-      } = event.detail;
-      validity.value = {
-        isValid,
-        validationMessage,
-        validityMode
-      };
+    async function submit() {
+      editing.value = false;
+      await vue.nextTick();
+    }
+    function cancel() {
+      logic.assertSet(stopEdit2);
+      logic.assertRef(editRef);
+      stopEdit2(editRef.value, "escape");
     }
     return (_ctx, _cache) => {
       return _ctx.column.editable(_ctx.row) ? (vue.openBlock(), vue.createElementBlock("td", {
         key: 0,
         ref: "td",
+        class: "table-ng__cell table-ng__cell--select",
         tabindex: "-1",
-        class: vue.normalizeClass(wrapperClasses.value),
-        onClick: vue.withModifiers(onClickCell, ["stop"]),
-        onKeydown,
+        onKeydown: onCellKeyDown,
+        onClick: vue.withModifiers(onCellClick, ["stop"]),
         onTableActivateCell: onActivateCell
-      }, [vue.createElementVNode("div", _hoisted_1$2, [vue.createElementVNode("span", {
-        ref: "view",
-        class: "table-ng__editable__text"
-      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 513), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("input", {
-        ref: "input",
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
-        class: vue.normalizeClass(inputClasses.value),
-        type: "text",
-        maxlength: "40",
-        tabindex: "-1",
-        onBlur,
-        onValidity
-      }, null, 34), [[vue.vModelText, model.value]]), _cache[2] || (_cache[2] = vue.createTextVNode()), hasError.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FIcon), {
-        key: 0,
-        name: "error",
-        class: "table-ng__editable__icon"
-      })) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FIcon), {
-        key: 1,
+      }, [vue.withDirectives(vue.createElementVNode("div", _hoisted_1$2, [vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(viewValue.value), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FIcon), {
         name: "pen",
         class: "table-ng__editable__icon"
-      }))])], 34)) : (vue.openBlock(), vue.createElementBlock("td", {
+      })], 512), [[vue.vShow, !editing.value]]), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("div", {
+        ref: "edit",
+        role: "combobox",
+        tabindex: "-1",
+        "aria-expanded": "",
+        "aria-controls": vue.unref(dropdownId),
+        "aria-autocomplete": "list",
+        class: "table-ng__editable",
+        onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+        }, ["stop"])),
+        onDblclick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+        }, ["prevent"])),
+        onKeydown: vue.withModifiers(onEditKeyDown, ["stop"]),
+        onFocusout: onEditBlur
+      }, vue.toDisplayString(viewValue.value), 41, _hoisted_3$1), [[vue.vShow, editing.value]]), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.withDirectives(vue.createVNode(vue.unref(vue$1.IComboboxDropdown), {
+        id: "dropdownId",
+        "is-open": dropdownIsOpen.value,
+        options: _ctx.column.options,
+        "active-option": activeOption.value,
+        "active-option-id": vue.unref(activeOptionId),
+        "input-node": editRef.value,
+        onSelect: onDropdownSelect,
+        onClose: onDropdownClose
+      }, null, 8, ["is-open", "options", "active-option", "active-option-id", "input-node"]), [[vue.vShow, editing.value]])], 544)) : (vue.openBlock(), vue.createElementBlock("td", {
         key: 1,
         ref: "td",
         tabindex: "-1",
@@ -3501,6 +3383,138 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+function getValueFn(fn, key, coerce, defaultValue) {
+  if (fn) {
+    return fn;
+  }
+  if (key) {
+    return (row) => {
+      return coerce(row[key]);
+    };
+  }
+  return () => defaultValue;
+}
+function getUpdateFn(fn, key) {
+  if (fn) {
+    return fn;
+  }
+  if (key) {
+    return (row, value) => {
+      row[key] = value;
+    };
+  }
+  return () => void 0;
+}
+function normalizeTableColumn(column) {
+  var _column$key, _column$key2, _column$validation, _column$key3, _column$key4, _column$icon, _column$key5, _column$key6, _column$key7;
+  if ("render" in column) {
+    return {
+      type: void 0,
+      header: column.header,
+      render: column.render,
+      sortable: null
+    };
+  }
+  switch (column.type) {
+    case "checkbox":
+      return {
+        type: "checkbox",
+        header: column.header,
+        value: getValueFn(column.value, column.key, Boolean, false),
+        update: getUpdateFn(column.update, column.key),
+        editable: typeof column.editable === "function" ? column.editable : () => {
+          var _column$editable;
+          return Boolean((_column$editable = column.editable) !== null && _column$editable !== void 0 ? _column$editable : false);
+        },
+        sortable: (_column$key = column.key) !== null && _column$key !== void 0 ? _column$key : null,
+        component: _sfc_main$8
+      };
+    case "radio":
+      return {
+        type: "radio",
+        header: column.header,
+        value: getValueFn(column.value, column.key, Boolean, false),
+        update: getUpdateFn(column.update, column.key),
+        sortable: (_column$key2 = column.key) !== null && _column$key2 !== void 0 ? _column$key2 : null,
+        component: _sfc_main$7
+      };
+    case "text":
+      return {
+        type: "text",
+        header: column.header,
+        value: getValueFn(column.value, column.key, String, ""),
+        update: getUpdateFn(column.update, column.key),
+        editable: typeof column.editable === "function" ? column.editable : () => {
+          var _column$editable2;
+          return Boolean((_column$editable2 = column.editable) !== null && _column$editable2 !== void 0 ? _column$editable2 : false);
+        },
+        validation: (_column$validation = column.validation) !== null && _column$validation !== void 0 ? _column$validation : {},
+        sortable: (_column$key3 = column.key) !== null && _column$key3 !== void 0 ? _column$key3 : null,
+        component: _sfc_main$4
+      };
+    case "anchor":
+      return {
+        type: "anchor",
+        header: column.header,
+        value: column.value,
+        href: column.href,
+        enabled: typeof column.enabled === "function" ? column.enabled : () => {
+          var _column$enabled;
+          return Boolean((_column$enabled = column.enabled) !== null && _column$enabled !== void 0 ? _column$enabled : true);
+        },
+        sortable: (_column$key4 = column.key) !== null && _column$key4 !== void 0 ? _column$key4 : null,
+        component: _sfc_main$6
+      };
+    case "button":
+      return {
+        type: "button",
+        header: column.header,
+        value: column.value,
+        onClick: column.onClick,
+        enabled: typeof column.enabled === "function" ? column.enabled : () => {
+          var _column$enabled2;
+          return Boolean((_column$enabled2 = column.enabled) !== null && _column$enabled2 !== void 0 ? _column$enabled2 : true);
+        },
+        icon: (_column$icon = column.icon) !== null && _column$icon !== void 0 ? _column$icon : null,
+        sortable: (_column$key5 = column.key) !== null && _column$key5 !== void 0 ? _column$key5 : null,
+        component: _sfc_main$5
+      };
+    case "select":
+      return {
+        type: "select",
+        header: column.header,
+        value: getValueFn(column.value, column.key, String, ""),
+        update: getUpdateFn(column.update, column.key),
+        editable: typeof column.editable === "function" ? column.editable : () => {
+          var _column$editable3;
+          return Boolean((_column$editable3 = column.editable) !== null && _column$editable3 !== void 0 ? _column$editable3 : false);
+        },
+        options: column.options,
+        sortable: (_column$key6 = column.key) !== null && _column$key6 !== void 0 ? _column$key6 : null,
+        component: _sfc_main$3
+      };
+    case void 0:
+      return {
+        type: "text",
+        header: column.header,
+        value: getValueFn(column.value, column.key, String, ""),
+        update() {
+        },
+        editable: () => false,
+        sortable: (_column$key7 = column.key) !== null && _column$key7 !== void 0 ? _column$key7 : null,
+        validation: {},
+        component: _sfc_main$4
+      };
+  }
+}
+function defineTableColumns(columns) {
+  return columns;
+}
+function normalizeTableColumns(columns) {
+  return columns.map((column) => {
+    return normalizeTableColumn(column);
+  });
+}
 const _hoisted_1$1 = {
   key: 0,
   class: "pager"
@@ -3696,8 +3710,13 @@ const _hoisted_5 = {
   tabindex: "-1",
   class: "table-ng__column"
 };
-const _hoisted_6 = ["colspan"];
-const _hoisted_7 = {
+const _hoisted_6 = {
+  key: 0,
+  class: "table-ng__row--empty"
+};
+const _hoisted_7 = ["colspan"];
+const _hoisted_8 = ["colspan"];
+const _hoisted_9 = {
   key: 0
 };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -3723,14 +3742,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       default: false
     }
   }, {
-    "modelValue": {
+    "selectedRows": {
       default: []
     },
-    "modelModifiers": {}
+    "selectedRowsModifiers": {}
   }),
-  emits: ["update:modelValue"],
+  emits: ["update:selectedRows"],
   setup(__props) {
-    const model = vue.useModel(__props, "modelValue");
+    const selectedRows = vue.useModel(__props, "selectedRows");
     const tableRef = vue.useTemplateRef("table");
     const selectAllRef = vue.useTemplateRef("selectAll");
     const expandedKeys = vue.ref([]);
@@ -3742,14 +3761,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const viewRows = vue.computed(() => {
       return __props.paginerated ? rowsFromPaginator.value : metaRows.value;
     });
+    const isEmpty = vue.computed(() => {
+      return viewRows.value.length === 0;
+    });
+    const columnCount = vue.computed(() => {
+      const selectableCol = __props.selectable ? 1 : 0;
+      return columns.value.length + selectableCol;
+    });
     const multiSelectColumn = {
       type: "checkbox",
       header: "selectable",
+      sortable: null,
+      component: _sfc_main$8,
       value(row) {
         if (!__props.keyAttribute) {
           return false;
         }
-        return model.value.some((it) => {
+        return selectedRows.value.some((it) => {
           return row[__props.keyAttribute] === it[__props.keyAttribute];
         });
       },
@@ -3757,36 +3785,38 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return true;
       },
       update(row, _newValue, _oldValue) {
-        logic.assertRef(model);
-        const index = model.value.indexOf(row);
+        logic.assertRef(selectedRows);
+        const index = selectedRows.value.indexOf(row);
         if (index < 0) {
-          model.value.push(row);
+          selectedRows.value.push(row);
         } else {
-          model.value.splice(index, 1);
+          selectedRows.value.splice(index, 1);
         }
       }
     };
     const singleSelectColumn = {
       type: "radio",
       header: "Välj en rad",
+      sortable: null,
+      component: _sfc_main$7,
       value(row) {
         if (!__props.keyAttribute) {
           return false;
         }
-        return model.value.some((it) => {
+        return selectedRows.value.some((it) => {
           return row[__props.keyAttribute] === it[__props.keyAttribute];
         });
       },
       update(row, _newValue, _oldValue) {
-        logic.assertRef(model);
-        model.value = [row];
+        logic.assertRef(selectedRows);
+        selectedRows.value = [row];
       }
     };
     const isIndeterminate = vue.computed(() => {
-      return model.value.length > 0 && model.value.length < __props.rows.length;
+      return selectedRows.value.length > 0 && selectedRows.value.length < __props.rows.length;
     });
     const isAllRowsSelected = vue.computed(() => {
-      return model.value.length > 0 && model.value.length === __props.rows.length;
+      return selectedRows.value.length > 0 && selectedRows.value.length === __props.rows.length;
     });
     const isSingleSelect = vue.computed(() => {
       return __props.selectable === "single";
@@ -3802,9 +3832,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     });
     function onSelectAllChange() {
       if (selectAllRef.value?.checked) {
-        model.value = [...__props.rows];
+        selectedRows.value = [...__props.rows];
       } else {
-        model.value = [];
+        selectedRows.value = [];
       }
     }
     const columns = vue.computed(() => normalizeTableColumns(__props.columns));
@@ -3813,7 +3843,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     });
     const slots = vue.useSlots();
     const hasExpandableSlot = vue.computed(() => {
-      return Boolean(slots["expandable"]);
+      return Boolean(slots.expandable);
     });
     async function stopEditHandler(element, reason) {
       stopEdit(element, reason);
@@ -3925,7 +3955,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           class: "table-ng__column",
           onToggleSortOrder
         }, null, 8, ["column", "sort-enabled", "sort-order"]);
-      }), 128))])]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("tbody", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(viewRows.value, ({
+      }), 128))])]), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("tbody", null, [isEmpty.value ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6, [vue.createElementVNode("td", {
+        colspan: columnCount.value,
+        class: "table-ng__cell"
+      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [_cache[3] || (_cache[3] = vue.createTextVNode(" Tabellen är tom ", -1))])], 8, _hoisted_7)])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+        key: 1
+      }, vue.renderList(viewRows.value, ({
         key,
         row,
         rowIndex,
@@ -3954,50 +3989,34 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ref_for: true
           }, {
             row
-          }))], 8, _hoisted_6)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+          }))], 8, _hoisted_8)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: 1
-          }, [isMultiSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
+          }, [isMultiSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
             key: 0,
             row,
             column: multiSelectColumn
-          }, null, 8, ["row"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), isSingleSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$6, {
+          }, null, 8, ["row"])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), isSingleSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
             key: 1,
             row,
             column: singleSelectColumn
-          }, null, 8, ["row"])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+          }, null, 8, ["row"])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: column.header
-            }, [column.type === "checkbox" ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
+            }, ["component" in column ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(column.component), {
               key: 0,
               row,
               column
-            }, null, 8, ["row", "column"])) : column.type === "text" ? (vue.openBlock(), vue.createBlock(_sfc_main$3, {
-              key: 1,
-              row,
-              column
-            }, null, 8, ["row", "column"])) : column.type === "anchor" ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
-              key: 2,
-              row,
-              column
-            }, null, 8, ["row", "column"])) : column.type === "button" ? (vue.openBlock(), vue.createBlock(_sfc_main$4, {
-              key: 3,
-              row,
-              column
-            }, null, 8, ["row", "column"])) : column.type === "select" ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
-              key: 4,
-              row,
-              column
             }, null, 8, ["row", "column"])) : "render" in column ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(column.render(row)), {
-              key: 5,
+              key: 1,
               row
             }, null, 8, ["row"])) : vue.createCommentVNode("", true)], 64);
           }), 128))], 64))]),
           _: 2
         }, 1032, ["row-key", "aria-rowindex", "aria-level", "aria-setsize", "aria-posinset", "is-treegrid", "is-expandable", "is-expanded"]);
-      }), 128))])], 42, _hoisted_1), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.paginerated ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [vue.createVNode(_sfc_main$2, {
+      }), 128))])], 42, _hoisted_1), _cache[7] || (_cache[7] = vue.createTextVNode()), _ctx.paginerated ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [vue.createVNode(_sfc_main$2, {
         items: metaRows.value,
         onItemRange: onItemRangeUpdate
-      }, null, 8, ["items"])])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "footer")], 64);
+      }, null, 8, ["items"])])) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "footer")], 64);
     };
   }
 });