lkt-table 1.2.3 → 1.2.5

package/dist/build.js

@@ -1,19 +1,19 @@
-import { reactive as _, defineComponent as Q, ref as S, watch as N, nextTick as re, computed as c, resolveComponent as M, openBlock as s, createBlock as b, withCtx as O, createTextVNode as G, toDisplayString as F, unref as B, createElementBlock as f, Fragment as E, withModifiers as lt, resolveDynamicComponent as x, createElementVNode as V, normalizeClass as ne, createCommentVNode as g, createVNode as Y, renderList as j, renderSlot as W, withDirectives as te, vShow as le, useSlots as ot, onMounted as at, createSlots as Be } from "vue";
-import { httpCall as nt } from "lkt-http-client";
+import { reactive as H, defineComponent as G, ref as C, watch as U, nextTick as de, computed as f, resolveComponent as $, openBlock as s, createBlock as b, withCtx as F, createTextVNode as le, toDisplayString as j, unref as E, createElementBlock as m, Fragment as A, withModifiers as at, resolveDynamicComponent as Z, createCommentVNode as y, normalizeClass as te, createElementVNode as B, createVNode as X, renderList as P, renderSlot as N, withDirectives as x, vShow as ee, useSlots as nt, onMounted as st, createSlots as Be } from "vue";
+import { httpCall as ut } from "lkt-http-client";
 import { __ as q } from "lkt-i18n";
-import { createLktEvent as de } from "lkt-events";
-import { generateRandomString as st, replaceAll as ut } from "lkt-string-tools";
-import { DataState as it } from "lkt-data-state";
-import rt from "sortablejs";
-import dt from "lkt-loader";
-import mt from "lkt-button";
-import ct from "lkt-paginator";
-import ft from "lkt-field-text";
-import pt from "lkt-field-textarea";
-import vt from "lkt-field-select";
-import ht from "lkt-field-switch";
-import yt from "lkt-field-file";
-class U {
+import { createLktEvent as ce } from "lkt-events";
+import { generateRandomString as it, replaceAll as rt } from "lkt-string-tools";
+import { DataState as dt } from "lkt-data-state";
+import ct from "sortablejs";
+import mt from "lkt-loader";
+import ft from "lkt-button";
+import pt from "lkt-paginator";
+import vt from "lkt-field-text";
+import ht from "lkt-field-textarea";
+import yt from "lkt-field-select";
+import kt from "lkt-field-switch";
+import bt from "lkt-field-file";
+class K {
   constructor(t = "", r = "") {
     this.key = t, this.label = r, this.sortable = !0, this.hidden = !1, this.formatter = void 0, this.checkEmpty = void 0, this.colspan = void 0, this.resource = "", this.resourceData = {}, this.isMultiple = !1, this.isLoading = !1, this.resourceLoaded = !1, this.valueSlot = "", this.editSlot = "", this.multipleDisplay = "", this.multipleDisplayEdition = "";
   }
@@ -102,7 +102,7 @@ class U {
     if (!this.resource) return this;
     try {
       this.isLoading = !0;
-      const t = await nt(this.resource, this.resourceData);
+      const t = await ut(this.resource, this.resourceData);
       this.options = t.data, this.isLoading = !1, this.resourceLoaded = !0;
     } catch {
       this.isLoading = !1;
@@ -155,52 +155,52 @@ class U {
     return this.isForRowKey = t, this;
   }
 }
-const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n = !0) => _(new U(l, t).setIsSortable(n).defineAsLink(r)), Sl = (l, t, r, n = !0) => _(new U(l, t).setIsSortable(n).defineAsAction(r)), Vl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r).defineAsText()), Dl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r).defineAsEmail()), wl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r).defineAsTel()), Tl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r).defineAsCheck()), Bl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r).defineAsSwitch()), El = (l, t, r, n = !0) => _(new U(l, t).setIsSortable(n).defineAsSelect(r)), Ll = (l, t, r = !0) => _(new U(l, t).setIsSortable(r).setIsHidden(!0)), Ee = (l, t, r, n) => {
+const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n = !0) => H(new K(l, t).setIsSortable(n).defineAsLink(r)), Dl = (l, t, r, n = !0) => H(new K(l, t).setIsSortable(n).defineAsAction(r)), wl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r).defineAsText()), Tl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r).defineAsEmail()), Bl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r).defineAsTel()), El = (l, t, r = !0) => H(new K(l, t).setIsSortable(r).defineAsCheck()), Il = (l, t, r = !0) => H(new K(l, t).setIsSortable(r).defineAsSwitch()), Ll = (l, t, r, n = !0) => H(new K(l, t).setIsSortable(n).defineAsSelect(r)), Ml = (l, t, r = !0) => H(new K(l, t).setIsSortable(r).setIsHidden(!0)), Ee = (l, t, r, n) => {
   if (!r) return 0;
-  let i = l[r.key], o = t[r.key];
+  let u = l[r.key], o = t[r.key];
   if (n === "asc") {
-    if (i > o) return 1;
-    if (o > i) return -1;
+    if (u > o) return 1;
+    if (o > u) return -1;
   } else {
-    if (i > o) return -1;
-    if (o > i) return 1;
+    if (u > o) return -1;
+    if (o > u) return 1;
   }
   return 0;
-}, Z = (l, t, r, n = []) => {
+}, Y = (l, t, r, n = []) => {
   if (l.extractTitleFromColumn) {
-    let i = n.find((o) => o.key === l.extractTitleFromColumn);
-    if (i)
-      return Z(i, t, r, n);
+    let u = n.find((o) => o.key === l.extractTitleFromColumn);
+    if (u)
+      return Y(u, t, r, n);
   }
   if (l.formatter && typeof l.formatter == "function") {
-    let i = l.formatter(t[l.key], t, l, r);
-    return i.startsWith("__:") ? q(i.substring(3)) : i;
+    let u = l.formatter(t[l.key], t, l, r);
+    return u.startsWith("__:") ? q(u.substring(3)) : u;
   }
   return t[l.key];
-}, kt = (l, t, r) => {
+}, gt = (l, t, r) => {
   if (!l.colspan) return -1;
   let n = t;
-  return r.forEach((i) => {
-    let o = me(l, i);
+  return r.forEach((u) => {
+    let o = me(l, u);
     o > 0 && o < n && (n = o);
   }), n;
-}, me = (l, t) => l.colspan === !1 ? !1 : typeof l.colspan == "function" ? l.colspan(t) : l.colspan, bt = (l, t, r) => {
+}, me = (l, t) => l.colspan === !1 ? !1 : typeof l.colspan == "function" ? l.colspan(t) : l.colspan, Ct = (l, t, r) => {
   if (typeof l != "object" || !l.key || t.indexOf(l.key) > -1) return !1;
   let n = me(l, r);
   return typeof l.colspan > "u" ? !0 : (typeof l.colspan < "u" && (typeof l.colspan == "function" ? n = parseInt(l.colspan()) : n = parseInt(l.colspan)), n > 0);
-}, gt = (l = []) => {
+}, St = (l = []) => {
   if (l.length > 0) {
     for (let t = 0; t < l.length; ++t)
       if (l[t].sortable) return l[t].key;
   }
   return "";
-}, Ct = (l, t) => {
+}, Vt = (l, t) => {
   if (l.length > 0) {
     for (let r = 0; r < l.length; ++r)
       if (l[r].key === t) return l[r];
   }
   return null;
-}, Ie = /* @__PURE__ */ Q({
+}, Le = /* @__PURE__ */ G({
   __name: "LktTableCell",
   props: {
     modelValue: { default: () => ({}) },
@@ -211,31 +211,31 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
   },
   emits: ["update:modelValue"],
   setup(l, { emit: t }) {
-    const r = t, n = l, i = S(n.modelValue), o = S(i.value[n.column.key]), h = S(null), C = S(n.column.showLoading());
-    N(o, (a) => {
-      const u = JSON.parse(JSON.stringify(i.value));
-      u[n.column.key] = a, r("update:modelValue", u);
-    }), N(() => n.modelValue, (a) => {
-      i.value = a, o.value = i.value[n.column.key];
-    }), N(() => n.column, () => {
-      n.column.resourceLoaded && re(() => C.value = !1);
+    const r = t, n = l, u = C(n.modelValue), o = C(u.value[n.column.key]), h = C(null), g = C(n.column.showLoading());
+    U(o, (a) => {
+      const i = JSON.parse(JSON.stringify(u.value));
+      i[n.column.key] = a, r("update:modelValue", i);
+    }), U(() => n.modelValue, (a) => {
+      u.value = a, o.value = u.value[n.column.key];
+    }), U(() => n.column, () => {
+      n.column.resourceLoaded && de(() => g.value = !1);
     }, { deep: !0 }), n.column.hasToLoadResource() && n.column.loadResource();
-    const v = c(() => ({ ...n.column.slotData, item: i.value }));
-    return (a, u) => {
-      const P = M("router-link"), J = M("lkt-field-text"), d = M("lkt-field-switch"), $ = M("lkt-field-file"), H = M("lkt-loader"), y = M("lkt-field-select");
-      return a.column.type === "link" ? (s(), b(P, {
+    const v = f(() => ({ ...n.column.slotData, item: u.value }));
+    return (a, i) => {
+      const W = $("lkt-anchor"), J = $("lkt-field-text"), d = $("lkt-field-switch"), I = $("lkt-field-file"), S = $("lkt-loader"), V = $("lkt-field-select");
+      return a.column.type === "link" ? (s(), b(W, {
         key: 0,
-        to: a.column.getHref(i.value)
+        to: a.column.getHref(u.value)
       }, {
-        default: O(() => [
-          G(F(B(Z)(a.column, i.value, a.i)), 1)
+        default: F(() => [
+          le(j(E(Y)(a.column, u.value, a.i)), 1)
         ]),
         _: 1
-      }, 8, ["to"])) : a.column.type === "action" ? (s(), f("a", {
+      }, 8, ["to"])) : a.column.type === "action" ? (s(), m("a", {
         key: 1,
         href: "#",
-        onClick: u[0] || (u[0] = (p) => a.column.doAction(i.value))
-      }, F(B(Z)(a.column, i.value, a.i)), 1)) : a.column.type === "text" ? (s(), b(J, {
+        onClick: i[0] || (i[0] = (p) => a.column.doAction(u.value))
+      }, j(E(Y)(a.column, u.value, a.i)), 1)) : a.column.type === "text" ? (s(), b(J, {
         key: 2,
         "read-mode": !a.column.editable || !a.editModeEnabled,
         ref: (p) => h.value = p,
@@ -243,7 +243,7 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
         "value-slot": a.column.valueSlot,
         "slot-data": v.value,
         modelValue: o.value,
-        "onUpdate:modelValue": u[1] || (u[1] = (p) => o.value = p)
+        "onUpdate:modelValue": i[1] || (i[1] = (p) => o.value = p)
       }, null, 8, ["read-mode", "edit-slot", "value-slot", "slot-data", "modelValue"])) : a.column.type === "email" ? (s(), b(J, {
         key: 3,
         "read-mode": !a.column.editable || !a.editModeEnabled,
@@ -253,7 +253,7 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
         "slot-data": v.value,
         "is-email": "",
         modelValue: o.value,
-        "onUpdate:modelValue": u[2] || (u[2] = (p) => o.value = p)
+        "onUpdate:modelValue": i[2] || (i[2] = (p) => o.value = p)
       }, null, 8, ["read-mode", "edit-slot", "value-slot", "slot-data", "modelValue"])) : a.column.type === "tel" ? (s(), b(J, {
         key: 4,
         "read-mode": !a.column.editable || !a.editModeEnabled,
@@ -263,33 +263,33 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
         "slot-data": v.value,
         "is-tel": "",
         modelValue: o.value,
-        "onUpdate:modelValue": u[3] || (u[3] = (p) => o.value = p)
+        "onUpdate:modelValue": i[3] || (i[3] = (p) => o.value = p)
       }, null, 8, ["read-mode", "edit-slot", "value-slot", "slot-data", "modelValue"])) : a.column.type === "check" ? (s(), b(d, {
         key: 5,
         "is-check": "",
         "read-mode": !a.column.editable || !a.editModeEnabled,
         ref: (p) => h.value = p,
         modelValue: o.value,
-        "onUpdate:modelValue": u[4] || (u[4] = (p) => o.value = p)
+        "onUpdate:modelValue": i[4] || (i[4] = (p) => o.value = p)
       }, null, 8, ["read-mode", "modelValue"])) : a.column.type === "switch" ? (s(), b(d, {
         key: 6,
         "read-mode": !a.column.editable || !a.editModeEnabled,
         ref: (p) => h.value = p,
         modelValue: o.value,
-        "onUpdate:modelValue": u[5] || (u[5] = (p) => o.value = p)
-      }, null, 8, ["read-mode", "modelValue"])) : a.column.type === "file" ? (s(), b($, {
+        "onUpdate:modelValue": i[5] || (i[5] = (p) => o.value = p)
+      }, null, 8, ["read-mode", "modelValue"])) : a.column.type === "file" ? (s(), b(I, {
         key: 7,
         "read-mode": !a.column.editable || !a.editModeEnabled,
         ref: (p) => h.value = p,
         modelValue: o.value,
-        "onUpdate:modelValue": u[6] || (u[6] = (p) => o.value = p)
-      }, null, 8, ["read-mode", "modelValue"])) : a.column.type === "select" ? (s(), f(E, { key: 8 }, [
-        C.value ? (s(), b(H, { key: 0 })) : (s(), b(y, {
+        "onUpdate:modelValue": i[6] || (i[6] = (p) => o.value = p)
+      }, null, 8, ["read-mode", "modelValue"])) : a.column.type === "select" ? (s(), m(A, { key: 8 }, [
+        g.value ? (s(), b(S, { key: 0 })) : (s(), b(V, {
           key: 1,
           "read-mode": !a.column.editable || !a.editModeEnabled,
           ref: (p) => h.value = p,
           modelValue: o.value,
-          "onUpdate:modelValue": u[7] || (u[7] = (p) => o.value = p),
+          "onUpdate:modelValue": i[7] || (i[7] = (p) => o.value = p),
           "slot-data": v.value,
           resource: a.column.resource,
           "use-resource-slot": a.column.resourceSlot ? a.column.resourceSlot : a.column.resource,
@@ -300,57 +300,57 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
           "multiple-display": a.column.multipleDisplay,
           "multiple-display-edition": a.column.multipleDisplayEdition
         }, null, 8, ["read-mode", "modelValue", "slot-data", "resource", "use-resource-slot", "resource-data", "options", "multiple", "tags", "multiple-display", "multiple-display-edition"]))
-      ], 64)) : (s(), f(E, { key: 9 }, [
-        G(F(B(Z)(a.column, i.value, a.i, a.columns)), 1)
+      ], 64)) : (s(), m(A, { key: 9 }, [
+        le(j(E(Y)(a.column, u.value, a.i, a.columns)), 1)
       ], 64));
     };
   }
-}), A = {
+}), R = {
   navButtonSlot: "",
   dropButtonSlot: "",
   createButtonSlot: ""
-}, St = /* @__PURE__ */ V("i", { class: "" }, null, -1), Vt = /* @__PURE__ */ Q({
+}, Dt = /* @__PURE__ */ G({
   __name: "DropButton",
   props: {
     disabled: { type: Boolean, default: !1 },
     text: { default: "" },
+    icon: { default: "" },
     confirm: { default: "" },
     resource: { default: "" },
     resourceData: { default: () => ({}) }
   },
   emits: ["click"],
   setup(l, { emit: t }) {
-    const r = t, n = l, i = c(() => A.dropButtonSlot !== ""), o = c(() => A.dropButtonSlot), h = c(() => n.text.startsWith("__:") ? q(n.text.substring(3)) : n.text);
-    return (C, v) => {
-      const a = M("lkt-button");
+    const r = t, n = l, u = f(() => R.dropButtonSlot !== ""), o = f(() => R.dropButtonSlot), h = f(() => n.text.startsWith("__:") ? q(n.text.substring(3)) : n.text);
+    return (g, v) => {
+      const a = $("lkt-button");
       return s(), b(a, {
         palette: "table-delete",
-        resource: C.resource,
-        "resource-data": C.resourceData,
-        "confirm-modal": C.confirm,
-        disabled: C.disabled,
-        onClick: v[0] || (v[0] = lt((u) => r("click"), ["prevent", "stop"]))
+        icon: u.value ? "" : g.icon,
+        text: u.value ? "" : h.value,
+        resource: g.resource,
+        "resource-data": g.resourceData,
+        "confirm-modal": g.confirm,
+        disabled: g.disabled,
+        onClick: v[0] || (v[0] = at((i) => r("click"), ["prevent", "stop"]))
       }, {
-        default: O(() => [
-          i.value ? (s(), b(x(o.value), { key: 0 })) : (s(), f(E, { key: 1 }, [
-            St,
-            G(" " + F(h.value), 1)
-          ], 64))
+        default: F(() => [
+          u.value ? (s(), b(Z(o.value), { key: 0 })) : y("", !0)
         ]),
         _: 1
-      }, 8, ["resource", "resource-data", "confirm-modal", "disabled"]);
+      }, 8, ["icon", "text", "resource", "resource-data", "confirm-modal", "disabled"]);
     };
   }
-}), Dt = ["data-i", "data-draggable"], wt = {
+}), wt = ["data-i", "data-draggable"], Tt = {
   key: 1,
   "data-role": "invalid-drag-indicator"
-}, Tt = {
+}, Bt = {
   key: 2,
   class: "lkt-table-nav-cell"
-}, Bt = { class: "lkt-table-nav-container" }, Et = /* @__PURE__ */ V("i", { class: "" }, null, -1), Lt = /* @__PURE__ */ V("i", { class: "" }, null, -1), It = ["data-column", "colspan", "title", "onClick"], Mt = {
+}, Et = { class: "lkt-table-nav-container" }, It = /* @__PURE__ */ B("i", { class: "" }, null, -1), Lt = /* @__PURE__ */ B("i", { class: "" }, null, -1), Mt = ["data-column", "colspan", "title", "onClick"], $t = {
   key: 4,
   class: "lkt-table-col-drop"
-}, $t = /* @__PURE__ */ Q({
+}, At = /* @__PURE__ */ G({
   __name: "LktTableRow",
   props: {
     modelValue: { default: () => ({}) },
@@ -367,119 +367,121 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
     emptyColumns: { default: () => [] },
     dropConfirm: { default: "" },
     dropText: { default: "" },
+    dropIcon: { default: "" },
     dropResource: { default: "" }
   },
   emits: ["update:modelValue", "click", "show", "item-up", "item-down", "item-drop"],
   setup(l, { emit: t }) {
-    const r = t, n = l, i = S(n.modelValue), o = (d, $, H) => {
-      r("click", d, de("", { item: $, column: H }));
-    }, h = (d, $) => {
-      r("show", d, de("", { i: $ }));
-    }, C = c(() => {
+    const r = t, n = l, u = C(n.modelValue), o = (d, I, S) => {
+      r("click", d, ce("", { item: I, column: S }));
+    }, h = (d, I) => {
+      r("show", d, ce("", { i: I }));
+    }, g = f(() => {
       let d = [];
       return n.sortable && n.isDraggable && d.push("handle"), d.join(" ");
-    }), v = c(() => A.navButtonSlot !== ""), a = c(() => A.navButtonSlot);
-    c(() => A.dropButtonSlot !== ""), c(() => A.dropButtonSlot);
-    const u = () => {
+    }), v = f(() => R.navButtonSlot !== ""), a = f(() => R.navButtonSlot);
+    f(() => R.dropButtonSlot !== ""), f(() => R.dropButtonSlot);
+    const i = () => {
       r("item-up", n.i);
-    }, P = () => {
+    }, W = () => {
       r("item-down", n.i);
     }, J = () => {
       r("item-drop", n.i);
     };
-    return N(() => n.modelValue, (d) => i.value = d), N(i, (d) => {
+    return U(() => n.modelValue, (d) => u.value = d), U(u, (d) => {
       r("update:modelValue", d, n.i);
-    }, { deep: !0 }), (d, $) => {
-      const H = M("lkt-button");
-      return s(), f("tr", {
+    }, { deep: !0 }), (d, I) => {
+      const S = $("lkt-button");
+      return s(), m("tr", {
         "data-i": d.i,
         "data-draggable": d.isDraggable
       }, [
-        d.sortable && d.isDraggable && d.editModeEnabled ? (s(), f("td", {
+        d.sortable && d.isDraggable && d.editModeEnabled ? (s(), m("td", {
           key: 0,
           "data-role": "drag-indicator",
-          class: ne(C.value)
-        }, null, 2)) : d.sortable && d.editModeEnabled ? (s(), f("td", wt)) : g("", !0),
-        d.addNavigation && d.editModeEnabled ? (s(), f("td", Tt, [
-          V("div", Bt, [
-            Y(H, {
+          class: te(g.value)
+        }, null, 2)) : d.sortable && d.editModeEnabled ? (s(), m("td", Tt)) : y("", !0),
+        d.addNavigation && d.editModeEnabled ? (s(), m("td", Bt, [
+          B("div", Et, [
+            X(S, {
               palette: "table-nav",
               disabled: d.i === 0,
-              onClick: u
+              onClick: i
             }, {
-              default: O(() => [
-                v.value ? (s(), b(x(a.value), {
+              default: F(() => [
+                v.value ? (s(), b(Z(a.value), {
                   key: 0,
                   direction: "up"
-                })) : (s(), f(E, { key: 1 }, [
-                  Et,
-                  G(" UP ")
+                })) : (s(), m(A, { key: 1 }, [
+                  It,
+                  le(" UP ")
                 ], 64))
               ]),
               _: 1
             }, 8, ["disabled"]),
-            Y(H, {
+            X(S, {
               palette: "table-nav",
               disabled: d.latestRow,
-              onClick: P
+              onClick: W
             }, {
-              default: O(() => [
-                v.value ? (s(), b(x(a.value), {
+              default: F(() => [
+                v.value ? (s(), b(Z(a.value), {
                   key: 0,
                   direction: "down"
-                })) : (s(), f(E, { key: 1 }, [
+                })) : (s(), m(A, { key: 1 }, [
                   Lt,
-                  G(" DOWN ")
+                  le(" DOWN ")
                 ], 64))
               ]),
               _: 1
             }, 8, ["disabled"])
           ])
-        ])) : g("", !0),
-        d.displayHiddenColumnsIndicator ? (s(), f("td", {
+        ])) : y("", !0),
+        d.displayHiddenColumnsIndicator ? (s(), m("td", {
           key: 3,
-          onClick: $[0] || ($[0] = (y) => h(y, d.i)),
+          onClick: I[0] || (I[0] = (V) => h(V, d.i)),
           "data-role": "show-more",
-          class: ne(d.hiddenIsVisible ? "state-open" : "")
-        }, null, 2)) : g("", !0),
-        (s(!0), f(E, null, j(d.visibleColumns, (y) => (s(), f(E, null, [
-          B(bt)(y, d.emptyColumns, i.value) ? (s(), f("td", {
+          class: te(d.hiddenIsVisible ? "state-open" : "")
+        }, null, 2)) : y("", !0),
+        (s(!0), m(A, null, P(d.visibleColumns, (V) => (s(), m(A, null, [
+          E(Ct)(V, d.emptyColumns, u.value) ? (s(), m("td", {
             key: 0,
-            "data-column": y.key,
-            colspan: B(me)(y, i.value),
-            title: B(Z)(y, i.value, d.i, d.visibleColumns),
-            onClick: (p) => o(p, i.value, y)
+            "data-column": V.key,
+            colspan: E(me)(V, u.value),
+            title: E(Y)(V, u.value, d.i, d.visibleColumns),
+            onClick: (p) => o(p, u.value, V)
           }, [
-            d.$slots[y.key] ? W(d.$slots, y.key, {
+            d.$slots[V.key] ? N(d.$slots, V.key, {
               key: 0,
-              value: i.value[y.key],
-              item: i.value,
-              column: y,
+              value: u.value[V.key],
+              item: u.value,
+              column: V,
               i: d.i
-            }) : i.value ? (s(), b(Ie, {
+            }) : u.value ? (s(), b(Le, {
               key: 1,
-              modelValue: i.value,
-              "onUpdate:modelValue": $[1] || ($[1] = (p) => i.value = p),
-              column: y,
+              modelValue: u.value,
+              "onUpdate:modelValue": I[1] || (I[1] = (p) => u.value = p),
+              column: V,
               columns: d.visibleColumns,
               "edit-mode-enabled": d.editModeEnabled,
               i: d.i
-            }, null, 8, ["modelValue", "column", "columns", "edit-mode-enabled", "i"])) : g("", !0)
-          ], 8, It)) : g("", !0)
+            }, null, 8, ["modelValue", "column", "columns", "edit-mode-enabled", "i"])) : y("", !0)
+          ], 8, Mt)) : y("", !0)
         ], 64))), 256)),
-        d.canDrop && d.editModeEnabled ? (s(), f("td", Mt, [
-          Y(Vt, {
+        d.canDrop && d.editModeEnabled ? (s(), m("td", $t, [
+          X(Dt, {
             resource: d.dropResource,
-            "resource-data": i.value,
+            "resource-data": u.value,
             confirm: d.dropConfirm,
             text: d.dropText,
+            icon: d.dropIcon,
             onClick: J
-          }, null, 8, ["resource", "resource-data", "confirm", "text"])
-        ])) : g("", !0)
-      ], 8, Dt);
+          }, null, 8, ["resource", "resource-data", "confirm", "text", "icon"])
+        ])) : y("", !0)
+      ], 8, wt);
     };
   }
-}), At = { "data-role": "hidden-row" }, Rt = ["colspan"], Ot = ["data-column"], Nt = ["data-i"], Ft = ["data-column", "title", "onClick"], _t = /* @__PURE__ */ Q({
+}), Rt = { "data-role": "hidden-row" }, Ot = ["colspan"], Nt = ["data-column"], Ft = ["data-i"], Ut = ["data-column", "title", "onClick"], Ht = /* @__PURE__ */ G({
   __name: "LktHiddenRow",
   props: {
     modelValue: { default: () => ({}) },
@@ -494,74 +496,74 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
   },
   emits: ["update:modelValue", "click"],
   setup(l, { emit: t }) {
-    const r = t, n = l, i = S(n.modelValue), o = (h, C, v) => {
-      r("click", h, de("", { item: C, column: v }));
+    const r = t, n = l, u = C(n.modelValue), o = (h, g, v) => {
+      r("click", h, ce("", { item: g, column: v }));
     };
-    return N(() => n.modelValue, (h) => i.value = h), N(i, () => r("update:modelValue", i.value)), (h, C) => te((s(), f("tr", At, [
-      V("td", { colspan: h.hiddenColumnsColSpan }, [
-        V("table", null, [
-          V("tr", null, [
-            (s(!0), f(E, null, j(h.hiddenColumns, (v) => (s(), f("th", {
+    return U(() => n.modelValue, (h) => u.value = h), U(u, () => r("update:modelValue", u.value)), (h, g) => x((s(), m("tr", Rt, [
+      B("td", { colspan: h.hiddenColumnsColSpan }, [
+        B("table", null, [
+          B("tr", null, [
+            (s(!0), m(A, null, P(h.hiddenColumns, (v) => (s(), m("th", {
               "data-column": v.key
             }, [
-              V("div", null, F(v.label), 1)
-            ], 8, Ot))), 256))
+              B("div", null, j(v.label), 1)
+            ], 8, Nt))), 256))
           ]),
-          V("tr", { "data-i": h.i }, [
-            (s(!0), f(E, null, j(h.hiddenColumns, (v, a) => (s(), f("td", {
+          B("tr", { "data-i": h.i }, [
+            (s(!0), m(A, null, P(h.hiddenColumns, (v, a) => (s(), m("td", {
               "data-column": v.key,
-              title: B(Z)(v, i.value, a, h.hiddenColumns),
-              onClick: (u) => o(u, i.value, v)
+              title: E(Y)(v, u.value, a, h.hiddenColumns),
+              onClick: (i) => o(i, u.value, v)
             }, [
-              h.$slots[v.key] ? W(h.$slots, v.key, {
+              h.$slots[v.key] ? N(h.$slots, v.key, {
                 key: 0,
-                value: i.value[v.key],
-                item: i.value,
+                value: u.value[v.key],
+                item: u.value,
                 column: v,
                 i: a
-              }) : (s(), b(Ie, {
+              }) : (s(), b(Le, {
                 key: 1,
                 column: v,
                 columns: h.hiddenColumns,
-                modelValue: i.value,
-                "onUpdate:modelValue": C[0] || (C[0] = (u) => i.value = u),
+                modelValue: u.value,
+                "onUpdate:modelValue": g[0] || (g[0] = (i) => u.value = i),
                 i: a
               }, null, 8, ["column", "columns", "modelValue", "i"]))
-            ], 8, Ft))), 256))
-          ], 8, Nt)
+            ], 8, Ut))), 256))
+          ], 8, Ft)
         ])
-      ], 8, Rt)
+      ], 8, Ot)
     ], 512)), [
-      [le, h.hiddenIsVisible]
+      [ee, h.hiddenIsVisible]
     ]);
   }
-}), Ut = /* @__PURE__ */ V("i", { class: "" }, null, -1), Le = /* @__PURE__ */ Q({
+}), Ie = /* @__PURE__ */ G({
   __name: "CreateButton",
   props: {
     disabled: { type: Boolean, default: !1 },
-    text: { type: Boolean, default: "" }
+    text: { default: "" },
+    icon: { default: "" }
   },
   emits: ["click"],
   setup(l, { emit: t }) {
-    const r = t, n = l, i = c(() => A.createButtonSlot !== ""), o = c(() => A.createButtonSlot), h = c(() => n.text.startsWith("__:") ? q(n.text.substring(3)) : n.text);
-    return (C, v) => {
-      const a = M("lkt-button");
+    const r = t, n = l, u = f(() => R.createButtonSlot !== ""), o = f(() => R.createButtonSlot), h = f(() => n.text.startsWith("__:") ? q(n.text.substring(3)) : n.text);
+    return (g, v) => {
+      const a = $("lkt-button");
       return s(), b(a, {
         palette: "table-create",
-        disabled: C.disabled,
-        onClick: v[0] || (v[0] = (u) => r("click"))
+        disabled: g.disabled,
+        icon: u.value ? "" : g.icon,
+        text: u.value ? "" : h.value,
+        onClick: v[0] || (v[0] = (i) => r("click"))
       }, {
-        default: O(() => [
-          i.value ? (s(), b(x(o.value), { key: 0 })) : (s(), f(E, { key: 1 }, [
-            Ut,
-            G(" " + F(h.value), 1)
-          ], 64))
+        default: F(() => [
+          u.value ? (s(), b(Z(o.value), { key: 0 })) : y("", !0)
         ]),
         _: 1
-      }, 8, ["disabled"]);
+      }, 8, ["disabled", "icon", "text"]);
     };
   }
-}), Ht = ["data-column", "data-sortable", "data-sort", "colspan", "title"], Kt = /* @__PURE__ */ Q({
+}), Kt = ["data-column", "data-sortable", "data-sort", "colspan", "title"], _t = /* @__PURE__ */ G({
   __name: "TableHeader",
   props: {
     column: { default: () => ({}) },
@@ -572,42 +574,42 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
   },
   emits: ["click"],
   setup(l, { emit: t }) {
-    const r = t, n = l, i = c(() => kt(n.column, n.amountOfColumns, n.items)), o = c(() => n.column.sortable === !0), h = c(() => o.value && n.sortBy === n.column.key ? n.sortDirection : ""), C = c(() => n.column.label.startsWith("__:") ? q(n.column.label.substring(3)) : n.column.label), v = () => {
+    const r = t, n = l, u = f(() => gt(n.column, n.amountOfColumns, n.items)), o = f(() => n.column.sortable === !0), h = f(() => o.value && n.sortBy === n.column.key ? n.sortDirection : ""), g = f(() => n.column.label.startsWith("__:") ? q(n.column.label.substring(3)) : n.column.label), v = () => {
       r("click", n.column);
     };
-    return (a, u) => (s(), f("th", {
+    return (a, i) => (s(), m("th", {
       "data-column": a.column.key,
       "data-sortable": o.value,
       "data-sort": h.value,
-      colspan: i.value,
-      title: C.value,
+      colspan: u.value,
+      title: g.value,
       onClick: v
     }, [
-      V("div", null, F(C.value), 1)
-    ], 8, Ht));
+      B("div", null, j(g.value), 1)
+    ], 8, Kt));
   }
-}), Wt = ["id"], Pt = { key: 0 }, jt = { class: "lkt-table-page-buttons" }, Jt = { key: 1 }, zt = { class: "switch-edition-mode" }, qt = {
+}), Pt = ["id"], Wt = { key: 0 }, jt = { class: "lkt-table-page-buttons" }, Jt = { key: 1 }, zt = { class: "switch-edition-mode" }, qt = {
   key: 0,
   class: "lkt-table-page-buttons"
 }, Gt = {
   key: 1,
   class: "lkt-table-page-filters"
-}, Qt = ["data-sortable"], Xt = {
+}, Qt = ["data-sortable"], Xt = { key: 0 }, Yt = {
   key: 0,
   "data-role": "drag-indicator"
-}, Yt = { key: 1 }, Zt = { key: 2 }, xt = {
+}, Zt = { key: 1 }, xt = { key: 2 }, el = {
   key: 3,
   class: "lkt-table-col-drop"
-}, el = ["id"], tl = {
+}, tl = ["id"], ll = { class: "lkt-table-item" }, ol = {
   key: 3,
   class: "lkt-empty-table"
-}, ll = {
+}, al = {
   key: 4,
   class: "lkt-table-page-empty"
-}, ol = {
+}, nl = {
   key: 5,
   class: "lkt-table-page-buttons lkt-table-page-buttons-bottom"
-}, al = /* @__PURE__ */ Q({
+}, sl = /* @__PURE__ */ G({
   __name: "LktTable",
   props: {
     modelValue: { default: () => [] },
@@ -619,6 +621,7 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
     hideEmptyColumns: { type: Boolean, default: !1 },
     draggableItemKey: { default: "name" },
     page: { default: 1 },
+    perms: { default: [] },
     resource: { default: "" },
     noResultsText: { default: "No results" },
     title: { default: "" },
@@ -626,6 +629,7 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
     titleIcon: { default: "h2" },
     wrapContentTag: { default: "div" },
     wrapContentClass: { default: "" },
+    itemsContainerClass: { default: "" },
     filters: { default: () => [] },
     dataStateConfig: { default: () => ({}) },
     hiddenSave: { type: Boolean, default: !1 },
@@ -638,7 +642,9 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
     saveResourceData: { default: () => ({}) },
     saveText: { default: "Save" },
     createText: { default: "Add item" },
+    createIcon: { default: "" },
     dropText: { default: "Delete" },
+    dropIcon: { default: "" },
     editModeText: { default: "Edit mode" },
     switchEditionEnabled: { type: Boolean, default: !1 },
     canCreate: { type: Boolean, default: !1 },
@@ -646,310 +652,324 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
     dropConfirm: { default: "" },
     dropResource: { default: "" },
     addNavigation: { type: Boolean, default: !1 },
+    itemMode: { type: Boolean, default: !1 },
     createEnabledValidator: { type: Function, default: void 0 }
   },
   emits: ["update:modelValue", "sort", "click", "save", "error", "before-save"],
   setup(l, { expose: t, emit: r }) {
-    const n = r, i = ot(), o = l, h = {}, C = S(typeof o.sorter == "function" ? o.sorter : Ee), v = S(gt(o.columns)), a = S("asc"), u = S(o.modelValue), P = S(h), J = S(null), d = S(o.columns);
-    let $ = [];
-    const H = S(o.page), y = S(!1), p = S(!1), ee = S($), ce = S(null), Me = S({}), X = S(new it({ items: u.value }, o.dataStateConfig)), L = S(o.editMode), $e = (e) => {
-      console.log("onResults", e), Array.isArray(e) && (u.value = e), y.value = !1, p.value = !0, X.value.store({ items: u.value }).turnStoredIntoOriginal();
+    const n = r, u = nt(), o = l, h = {}, g = C(typeof o.sorter == "function" ? o.sorter : Ee), v = C(St(o.columns)), a = C("asc"), i = C(o.modelValue), W = C(h), J = C(null), d = C(o.columns), I = C(o.page), S = C(!1), V = C(!1), p = C(o.perms), fe = C(null), Me = C({}), Q = C(new dt({ items: i.value }, o.dataStateConfig)), L = C(o.editMode), $e = (e) => {
+      Array.isArray(e) && (i.value = e), S.value = !1, V.value = !0, Q.value.store({ items: i.value }).turnStoredIntoOriginal();
     }, Ae = (e) => {
-      ee.value = e;
-    }, Re = () => re(() => y.value = !0), Oe = () => {
-      ce.value.doRefresh();
-    }, oe = st(12), se = c(() => {
+      p.value = e;
+    }, Re = () => de(() => S.value = !0), Oe = () => {
+      fe.value.doRefresh();
+    }, oe = it(12), se = f(() => {
       if (!o.hideEmptyColumns) return [];
       let e = [];
-      return d.value.forEach((m) => {
-        let k = m.key, w = !1;
-        u.value.forEach((D) => {
+      return d.value.forEach((c) => {
+        let k = c.key, T = !1;
+        i.value.forEach((D) => {
           if (typeof D.checkEmpty == "function")
             return D.checkEmpty(D);
-          D[k] && (w = !0);
-        }), w || e.push(k);
+          D[k] && (T = !0);
+        }), T || e.push(k);
       }), e;
-    }), ae = c(() => d.value.filter((e) => !e.hidden)), ue = c(() => d.value.filter((e) => e.hidden)), Ne = c(() => {
+    }), ae = f(() => d.value.filter((e) => !e.hidden)), ue = f(() => d.value.filter((e) => e.hidden)), Ne = f(() => {
       let e = ae.value.length + 1;
       return o.sortable && ++e, e;
-    }), Fe = c(() => d.value.filter((e) => e.isForRowKey)), fe = c(() => ue.value.length > 0 && !o.sortable), _e = c(() => d.value.map((e) => e.key)), pe = c(() => {
+    }), Fe = f(() => d.value.filter((e) => e.isForRowKey)), pe = f(() => ue.value.length > 0 && !o.sortable), Ue = f(() => d.value.map((e) => e.key)), ve = f(() => {
       let e = [];
-      for (let m in i) _e.value.indexOf(m) !== -1 && e.push(m);
+      for (let c in u) Ue.value.indexOf(c) !== -1 && e.push(c);
       return e;
-    }), ve = c(() => o.hiddenSave || y.value || !o.saveResource ? !1 : L.value && X.value.changed() ? !0 : L.value), Ue = c(() => o.switchEditionEnabled ? !0 : ve.value || L.value && o.canCreate), He = c(() => o.saveDisabled || typeof o.saveValidator == "function" && !o.saveValidator(u.value) ? !1 : X.value.changed()), Ke = c(() => u.value.length), We = c(() => ({
-      items: u.value,
+    }), he = f(() => o.hiddenSave || S.value || !o.saveResource ? !1 : L.value && Q.value.changed() ? !0 : L.value), He = f(() => o.switchEditionEnabled ? !0 : he.value || L.value && o.canCreate), Ke = f(() => o.saveDisabled || typeof o.saveValidator == "function" && !o.saveValidator(i.value) ? !1 : Q.value.changed()), _e = f(() => i.value.length), Pe = f(() => ({
+      items: i.value,
       ...o.saveResourceData
-    })), Pe = c(() => o.titleTag === "" ? "h2" : o.titleTag), je = c(() => o.wrapContentTag === "" ? "div" : o.wrapContentTag), ie = c(() => o.title.startsWith("__:") ? q(o.title.substring(3)) : o.title), Je = c(() => o.saveText.startsWith("__:") ? q(o.saveText.substring(3)) : o.saveText), ze = c(() => o.editModeText.startsWith("__:") ? q(o.editModeText.substring(3)) : o.editModeText);
-    c(() => ee.value.includes("create")), c(() => ee.value.includes("read")), c(() => ee.value.includes("update"));
-    const he = c(() => ee.value.includes("drop")), qe = (e) => {
-      let m = e.target;
-      if (typeof m.dataset.column > "u")
+    })), We = f(() => o.titleTag === "" ? "h2" : o.titleTag), je = f(() => o.wrapContentTag === "" ? "div" : o.wrapContentTag), ie = f(() => o.title.startsWith("__:") ? q(o.title.substring(3)) : o.title), Je = f(() => o.saveText.startsWith("__:") ? q(o.saveText.substring(3)) : o.saveText), ze = f(() => o.editModeText.startsWith("__:") ? q(o.editModeText.substring(3)) : o.editModeText), ne = f(() => p.value.includes("create")), qe = f(() => p.value.includes("read")), Ge = f(() => p.value.includes("update")), re = f(() => p.value.includes("drop")), Qe = (e) => {
+      let c = e.target;
+      if (typeof c.dataset.column > "u")
         do
-          m = m.parentNode;
-        while (typeof m.dataset.column > "u" && m.tagName !== "TABLE" && m.tagName !== "body");
-      if (m.tagName === "TD" && (m = m.parentNode, m = m.dataset.i, typeof m < "u"))
-        return u.value[m];
-    }, ye = (e) => P.value["tr_" + e] === !0, ke = (e) => {
-      e && e.sortable && (u.value = u.value.sort((m, k) => C.value(m, k, e, a.value)), a.value = a.value === "asc" ? "desc" : "asc", v.value = e.key, n("sort", [v.value, a.value]));
-    }, be = (e, m) => {
-      n("click", e, m);
-    }, ge = (e, m) => {
-      let k = "tr_" + m.value.i;
-      P.value[k] = typeof P.value[k] > "u" ? !0 : !P.value[k];
+          c = c.parentNode;
+        while (typeof c.dataset.column > "u" && c.tagName !== "TABLE" && c.tagName !== "body");
+      if (c.tagName === "TD" && (c = c.parentNode, c = c.dataset.i, typeof c < "u"))
+        return i.value[c];
+    }, ye = (e) => W.value["tr_" + e] === !0, ke = (e) => {
+      e && e.sortable && (i.value = i.value.sort((c, k) => g.value(c, k, e, a.value)), a.value = a.value === "asc" ? "desc" : "asc", v.value = e.key, n("sort", [v.value, a.value]));
+    }, be = (e, c) => {
+      n("click", e, c);
+    }, ge = (e, c) => {
+      let k = "tr_" + c.value.i;
+      W.value[k] = typeof W.value[k] > "u" ? !0 : !W.value[k];
     }, Ce = () => {
       d.value.forEach((e) => {
         if (e.type === "select" && e.autoLoadSelectOptions) {
-          let m = e.autoLoadSelectOptionsKey !== "" ? e.autoLoadSelectOptionsKey : e.key, k = [];
-          u.value.forEach((D) => {
-            Array.isArray(D[m]) && D[m].forEach((R) => k.push(R));
+          let c = e.autoLoadSelectOptionsKey !== "" ? e.autoLoadSelectOptionsKey : e.key, k = [];
+          i.value.forEach((D) => {
+            Array.isArray(D[c]) && D[c].forEach((O) => k.push(O));
           });
-          let w = {};
+          let T = {};
           k = k.filter(function(D) {
-            return w[D.value] ? !1 : (w[D.value] = !0, !0);
+            return T[D.value] ? !1 : (T[D.value] = !0, !0);
           }), e.setOptions(k);
         }
       });
-    }, Ge = (e) => typeof o.checkValidDrag == "function" ? o.checkValidDrag(e) : !0, Se = (e) => typeof o.draggableChecker == "function" ? o.draggableChecker(e) : !0, Ve = () => {
-      u.value.push({});
-    }, Qe = () => {
-      y.value = !0;
-    }, Xe = () => {
-      y.value = !1;
-    }, Ye = (e, m) => {
-      if (n("before-save"), o.saveResource && (y.value = !1, !m.success)) {
-        n("error", m.httpStatus);
+    }, Xe = (e) => typeof o.checkValidDrag == "function" ? o.checkValidDrag(e) : !0, Se = (e) => typeof o.draggableChecker == "function" ? o.draggableChecker(e) : !0, Ve = () => {
+      i.value.push({});
+    }, Ye = () => {
+      S.value = !0;
+    }, Ze = () => {
+      S.value = !1;
+    }, xe = (e, c) => {
+      if (n("before-save"), o.saveResource && (S.value = !1, !c.success)) {
+        n("error", c.httpStatus);
         return;
       }
-      X.value.turnStoredIntoOriginal(), n("save", m);
-    }, De = (e, m, k) => {
+      Q.value.turnStoredIntoOriginal(), n("save", c);
+    }, De = (e, c, k) => {
       if (k >= e.length) {
-        let w = k - e.length + 1;
-        for (; w--; ) e.push(void 0);
+        let T = k - e.length + 1;
+        for (; T--; ) e.push(void 0);
       }
-      return e.splice(k, 0, e.splice(m, 1)[0]), e;
-    }, Ze = (e) => {
-      De(u.value, e, e - 1);
-    }, xe = (e) => {
-      De(u.value, e, e + 1);
+      return e.splice(k, 0, e.splice(c, 1)[0]), e;
     }, et = (e) => {
-      u.value.splice(e, 1);
-    }, tt = () => {
+      De(i.value, e, e - 1);
+    }, tt = (e) => {
+      De(i.value, e, e + 1);
+    }, lt = (e) => {
+      i.value.splice(e, 1);
+    }, ot = () => {
       let e = document.getElementById("lkt-table-body-" + oe);
-      Me.value = new rt(e, {
+      Me.value = new ct(e, {
         direction: "vertical",
         handle: ".handle",
         animation: 150,
-        onEnd: function(m) {
-          let k = m.oldIndex, w = m.newIndex, D = JSON.parse(JSON.stringify(u.value));
-          u.value.splice(k, 1, D[w]), u.value.splice(w, 1, D[k]);
+        onEnd: function(c) {
+          let k = c.oldIndex, T = c.newIndex, D = JSON.parse(JSON.stringify(i.value));
+          i.value.splice(k, 1, D[T]), i.value.splice(T, 1, D[k]);
         },
-        onMove: function(m, k) {
-          return Ge(m);
+        onMove: function(c, k) {
+          return Xe(c);
         }
       });
-    }, we = (e, m, k = !1) => {
-      let w = [oe, "row", m];
-      return k && w.push("hidden"), Fe.value.forEach((D) => {
-        let R = String(e[D.key]).toLowerCase();
-        R.length > 50 && (R = R.substring(0, 50)), R = ut(R, " ", "-"), w.push(R);
-      }), w.join("-");
-    }, Te = c(() => typeof o.createEnabledValidator == "function" ? o.createEnabledValidator({ items: u.value }) : !0);
-    return at(() => {
-      Ce(), ke(Ct(o.columns, v.value)), X.value.store({ items: u.value }).turnStoredIntoOriginal(), o.sortable && re(() => {
-        tt();
+    }, we = (e, c, k = !1) => {
+      let T = [oe, "row", c];
+      return k && T.push("hidden"), Fe.value.forEach((D) => {
+        let O = String(e[D.key]).toLowerCase();
+        O.length > 50 && (O = O.substring(0, 50)), O = rt(O, " ", "-"), T.push(O);
+      }), T.join("-");
+    }, Te = f(() => typeof o.createEnabledValidator == "function" ? o.createEnabledValidator({ items: i.value }) : !0);
+    return st(() => {
+      Ce(), ke(Vt(o.columns, v.value)), Q.value.store({ items: i.value }).turnStoredIntoOriginal(), o.sortable && de(() => {
+        ot();
       });
-    }), N(() => o.columns, (e) => d.value = e), N(() => o.modelValue, (e) => u.value = e), N(u, (e) => {
-      Ce(), X.value.increment({ items: e }), n("update:modelValue", e);
+    }), U(() => o.columns, (e) => d.value = e), U(() => o.modelValue, (e) => i.value = e), U(i, (e) => {
+      Ce(), Q.value.increment({ items: e }), n("update:modelValue", e);
     }, { deep: !0 }), t({
-      getItemByEvent: qe,
+      getItemByEvent: Qe,
       doRefresh: Oe
-    }), (e, m) => {
-      const k = M("lkt-button"), w = M("lkt-field-switch"), D = M("lkt-loader"), R = M("lkt-paginator");
-      return s(), f("section", {
+    }), (e, c) => {
+      const k = $("lkt-button"), T = $("lkt-field-switch"), D = $("lkt-loader"), O = $("lkt-paginator");
+      return s(), m("section", {
         class: "lkt-table-page",
-        id: "lkt-table-page-" + B(oe)
+        id: "lkt-table-page-" + E(oe)
       }, [
-        ie.value || B(i).title ? (s(), f("header", Pt, [
-          ie.value ? (s(), b(x(Pe.value), { key: 0 }, {
-            default: O(() => [
-              e.titleIcon ? (s(), f("i", {
+        ie.value || E(u).title ? (s(), m("header", Wt, [
+          ie.value ? (s(), b(Z(We.value), { key: 0 }, {
+            default: F(() => [
+              e.titleIcon ? (s(), m("i", {
                 key: 0,
-                class: ne(e.titleIcon)
-              }, null, 2)) : g("", !0),
-              G(" " + F(ie.value), 1)
+                class: te(e.titleIcon)
+              }, null, 2)) : y("", !0),
+              le(" " + j(ie.value), 1)
             ]),
             _: 1
-          })) : g("", !0),
-          B(i).title ? W(e.$slots, "title", { key: 1 }) : g("", !0)
-        ])) : g("", !0),
-        (s(), b(x(je.value), {
-          class: ne(["lkt-table-page-content-wrapper", e.wrapContentClass])
+          })) : y("", !0),
+          E(u).title ? N(e.$slots, "title", { key: 1 }) : y("", !0)
+        ])) : y("", !0),
+        (s(), b(Z(je.value), {
+          class: te(["lkt-table-page-content-wrapper", e.wrapContentClass])
         }, {
-          default: O(() => [
-            te(V("div", jt, [
-              te(Y(k, {
+          default: F(() => [
+            x(B("div", jt, [
+              x(X(k, {
                 ref: "saveButton",
                 palette: "success",
-                disabled: !He.value,
+                disabled: !Ke.value,
                 "confirm-modal": e.saveConfirm,
                 "confirm-data": e.confirmData,
                 resource: e.saveResource,
-                "resource-data": We.value,
-                onLoading: Qe,
-                onLoaded: Xe,
-                onClick: Ye
+                "resource-data": Pe.value,
+                onLoading: Ye,
+                onLoaded: Ze,
+                onClick: xe
               }, {
-                default: O(() => [
-                  B(i)["button-save"] ? W(e.$slots, "button-save", {
+                default: F(() => [
+                  E(u)["button-save"] ? N(e.$slots, "button-save", {
                     key: 0,
-                    items: u.value,
+                    items: i.value,
                     editMode: e.editMode,
                     canUpdate: !e.saveDisabled
-                  }) : (s(), f("span", Jt, F(Je.value), 1))
+                  }) : (s(), m("span", Jt, j(Je.value), 1))
                 ]),
                 _: 3
               }, 8, ["disabled", "confirm-modal", "confirm-data", "resource", "resource-data"]), [
-                [le, ve.value]
+                [ee, he.value]
               ]),
-              e.canCreate && L.value ? (s(), b(Le, {
+              e.canCreate && ne.value && L.value ? (s(), b(Ie, {
                 key: 0,
                 disabled: !Te.value,
                 text: e.createText,
+                icon: e.createIcon,
                 onClick: Ve
-              }, null, 8, ["disabled", "text"])) : g("", !0),
-              V("div", zt, [
-                te(Y(w, {
+              }, null, 8, ["disabled", "text", "icon"])) : y("", !0),
+              B("div", zt, [
+                x(X(T, {
                   modelValue: L.value,
-                  "onUpdate:modelValue": m[0] || (m[0] = (T) => L.value = T),
+                  "onUpdate:modelValue": c[0] || (c[0] = (w) => L.value = w),
                   label: ze.value
                 }, null, 8, ["modelValue", "label"]), [
-                  [le, e.switchEditionEnabled]
+                  [ee, e.switchEditionEnabled]
                 ])
               ])
             ], 512), [
-              [le, Ue.value]
+              [ee, He.value]
             ]),
-            B(i).buttons ? (s(), f("div", qt, [
-              W(e.$slots, "buttons")
-            ])) : g("", !0),
-            p.value && B(i).filters ? (s(), f("div", Gt, [
-              W(e.$slots, "filters", {
-                items: u.value,
-                isLoading: y.value
+            E(u).buttons ? (s(), m("div", qt, [
+              N(e.$slots, "buttons")
+            ])) : y("", !0),
+            V.value && E(u).filters ? (s(), m("div", Gt, [
+              N(e.$slots, "filters", {
+                items: i.value,
+                isLoading: S.value
               })
-            ])) : g("", !0),
-            y.value ? (s(), b(D, { key: 2 })) : g("", !0),
-            te(V("div", {
+            ])) : y("", !0),
+            S.value ? (s(), b(D, { key: 2 })) : y("", !0),
+            x(B("div", {
               class: "lkt-table",
               "data-sortable": e.sortable
             }, [
-              V("table", null, [
-                V("thead", null, [
-                  V("tr", null, [
-                    e.sortable && L.value ? (s(), f("th", Xt)) : g("", !0),
-                    e.addNavigation && L.value ? (s(), f("th", Yt)) : g("", !0),
-                    fe.value ? (s(), f("th", Zt)) : g("", !0),
-                    (s(!0), f(E, null, j(ae.value, (T) => (s(), f(E, null, [
-                      se.value.indexOf(T.key) === -1 ? (s(), b(Kt, {
+              e.itemMode ? (s(), m("div", {
+                key: 1,
+                class: te(["lkt-table-items-container", e.itemsContainerClass])
+              }, [
+                (s(!0), m(A, null, P(i.value, (w) => (s(), m("div", ll, [
+                  N(e.$slots, "item", {
+                    item: w,
+                    canCreate: ne.value,
+                    canRead: qe.value,
+                    canUpdate: Ge.value,
+                    canDrop: re.value,
+                    isLoading: S.value
+                  })
+                ]))), 256))
+              ], 2)) : (s(), m("table", Xt, [
+                B("thead", null, [
+                  B("tr", null, [
+                    e.sortable && L.value ? (s(), m("th", Yt)) : y("", !0),
+                    e.addNavigation && L.value ? (s(), m("th", Zt)) : y("", !0),
+                    pe.value ? (s(), m("th", xt)) : y("", !0),
+                    (s(!0), m(A, null, P(ae.value, (w) => (s(), m(A, null, [
+                      se.value.indexOf(w.key) === -1 ? (s(), b(_t, {
                         key: 0,
-                        column: T,
+                        column: w,
                         "sort-by": v.value,
                         "sort-direction": a.value,
                         "amount-of-columns": e.columns.length,
-                        items: u.value,
-                        onClick: (I) => ke(T)
-                      }, null, 8, ["column", "sort-by", "sort-direction", "amount-of-columns", "items", "onClick"])) : g("", !0)
+                        items: i.value,
+                        onClick: (M) => ke(w)
+                      }, null, 8, ["column", "sort-by", "sort-direction", "amount-of-columns", "items", "onClick"])) : y("", !0)
                     ], 64))), 256)),
-                    e.canDrop && he.value && L.value ? (s(), f("th", xt)) : g("", !0)
+                    e.canDrop && re.value && L.value ? (s(), m("th", el)) : y("", !0)
                   ])
                 ]),
-                V("tbody", {
-                  ref: (T) => J.value = T,
-                  id: "lkt-table-body-" + B(oe)
+                B("tbody", {
+                  ref: (w) => J.value = w,
+                  id: "lkt-table-body-" + E(oe)
                 }, [
-                  (s(!0), f(E, null, j(u.value, (T, I) => (s(), b($t, {
-                    modelValue: u.value[I],
-                    "onUpdate:modelValue": (K) => u.value[I] = K,
-                    key: we(T, I),
-                    i: I,
-                    "display-hidden-columns-indicator": fe.value,
-                    "is-draggable": Se(T),
+                  (s(!0), m(A, null, P(i.value, (w, M) => (s(), b(At, {
+                    modelValue: i.value[M],
+                    "onUpdate:modelValue": (_) => i.value[M] = _,
+                    key: we(w, M),
+                    i: M,
+                    "display-hidden-columns-indicator": pe.value,
+                    "is-draggable": Se(w),
                     sortable: e.sortable,
                     "visible-columns": ae.value,
                     "empty-columns": se.value,
                     "add-navigation": e.addNavigation,
-                    "hidden-is-visible": ye(I),
-                    "latest-row": I + 1 === Ke.value,
-                    "can-drop": e.canDrop && he.value && L.value,
+                    "hidden-is-visible": ye(M),
+                    "latest-row": M + 1 === _e.value,
+                    "can-drop": e.canDrop && re.value && L.value,
                     "drop-confirm": e.dropConfirm,
                     "drop-resource": e.dropResource,
                     "drop-text": e.dropText,
+                    "drop-icon": e.dropIcon,
                     "edit-mode-enabled": L.value,
                     onClick: be,
                     onShow: ge,
-                    onItemUp: Ze,
-                    onItemDown: xe,
-                    onItemDrop: et
+                    onItemUp: et,
+                    onItemDown: tt,
+                    onItemDrop: lt
                   }, Be({ _: 2 }, [
-                    j(pe.value, (K) => ({
-                      name: K,
-                      fn: O((z) => [
-                        W(e.$slots, K, {
+                    P(ve.value, (_) => ({
+                      name: _,
+                      fn: F((z) => [
+                        N(e.$slots, _, {
                           item: z.item,
                           value: z.value,
                           column: z.column
                         })
                       ])
                     }))
-                  ]), 1032, ["modelValue", "onUpdate:modelValue", "i", "display-hidden-columns-indicator", "is-draggable", "sortable", "visible-columns", "empty-columns", "add-navigation", "hidden-is-visible", "latest-row", "can-drop", "drop-confirm", "drop-resource", "drop-text", "edit-mode-enabled"]))), 128)),
-                  ue.value.length > 0 ? (s(!0), f(E, { key: 0 }, j(u.value, (T, I) => (s(), b(_t, {
-                    modelValue: u.value[I],
-                    "onUpdate:modelValue": (K) => u.value[I] = K,
-                    key: we(T, I, !0),
-                    i: I,
+                  ]), 1032, ["modelValue", "onUpdate:modelValue", "i", "display-hidden-columns-indicator", "is-draggable", "sortable", "visible-columns", "empty-columns", "add-navigation", "hidden-is-visible", "latest-row", "can-drop", "drop-confirm", "drop-resource", "drop-text", "drop-icon", "edit-mode-enabled"]))), 128)),
+                  ue.value.length > 0 ? (s(!0), m(A, { key: 0 }, P(i.value, (w, M) => (s(), b(Ht, {
+                    modelValue: i.value[M],
+                    "onUpdate:modelValue": (_) => i.value[M] = _,
+                    key: we(w, M, !0),
+                    i: M,
                     "hidden-columns": ue.value,
                     "hidden-columns-col-span": Ne.value,
-                    "is-draggable": Se(T),
+                    "is-draggable": Se(w),
                     sortable: e.sortable,
                     "visible-columns": ae.value,
                     "empty-columns": se.value,
-                    "hidden-is-visible": ye(I),
+                    "hidden-is-visible": ye(M),
                     onClick: be,
                     onShow: ge
                   }, Be({ _: 2 }, [
-                    j(pe.value, (K) => ({
-                      name: K,
-                      fn: O((z) => [
-                        W(e.$slots, K, {
+                    P(ve.value, (_) => ({
+                      name: _,
+                      fn: F((z) => [
+                        N(e.$slots, _, {
                           item: z.item,
                           value: z.value,
                           column: z.column
                         })
                       ])
                     }))
-                  ]), 1032, ["modelValue", "onUpdate:modelValue", "i", "hidden-columns", "hidden-columns-col-span", "is-draggable", "sortable", "visible-columns", "empty-columns", "hidden-is-visible"]))), 128)) : g("", !0)
-                ], 8, el)
-              ])
+                  ]), 1032, ["modelValue", "onUpdate:modelValue", "i", "hidden-columns", "hidden-columns-col-span", "is-draggable", "sortable", "visible-columns", "empty-columns", "hidden-is-visible"]))), 128)) : y("", !0)
+                ], 8, tl)
+              ]))
             ], 8, Qt), [
-              [le, !y.value && u.value.length > 0]
+              [ee, !S.value && i.value.length > 0]
             ]),
-            e.$slots["no-items"] ? (s(), f("div", tl, [
-              W(e.$slots, "no-items")
-            ])) : g("", !0),
-            !y.value && u.value.length === 0 ? (s(), f("div", ll, F(e.noResultsText), 1)) : g("", !0),
-            e.canCreate && L.value ? (s(), f("div", ol, [
-              e.canCreate && L.value ? (s(), b(Le, {
+            e.$slots["no-items"] ? (s(), m("div", ol, [
+              N(e.$slots, "no-items")
+            ])) : y("", !0),
+            !S.value && i.value.length === 0 ? (s(), m("div", al, j(e.noResultsText), 1)) : y("", !0),
+            e.canCreate && ne.value && L.value ? (s(), m("div", nl, [
+              e.canCreate && ne.value && L.value ? (s(), b(Ie, {
                 key: 0,
                 disabled: !Te.value,
                 text: e.createText,
+                icon: e.createIcon,
                 onClick: Ve
-              }, null, 8, ["disabled", "text"])) : g("", !0)
-            ])) : g("", !0),
-            Y(R, {
+              }, null, 8, ["disabled", "text", "icon"])) : y("", !0)
+            ])) : y("", !0),
+            X(O, {
               ref_key: "paginator",
-              ref: ce,
-              modelValue: H.value,
-              "onUpdate:modelValue": m[1] || (m[1] = (T) => H.value = T),
+              ref: fe,
+              modelValue: I.value,
+              "onUpdate:modelValue": c[1] || (c[1] = (w) => I.value = w),
               resource: e.resource,
               filters: e.filters,
               onResults: $e,
@@ -959,28 +979,28 @@ const gl = (l, t, r = !0) => _(new U(l, t).setIsSortable(r)), Cl = (l, t, r, n =
           ]),
           _: 3
         }, 8, ["class"]))
-      ], 8, Wt);
+      ], 8, Pt);
     };
   }
-}), Il = {
+}), $l = {
   install: (l) => {
-    l.component("lkt-loader") === void 0 && l.use(dt), l.component("lkt-button") === void 0 && l.use(mt), l.component("lkt-paginator") === void 0 && l.use(ct), l.component("lkt-field-text") === void 0 && l.use(ft), l.component("lkt-field-textarea") === void 0 && l.use(pt), l.component("lkt-field-select") === void 0 && l.use(vt), l.component("lkt-field-switch") === void 0 && l.use(ht), l.component("lkt-field-file") === void 0 && l.use(yt), l.component("lkt-table") === void 0 && l.component("lkt-table", al);
+    l.component("lkt-loader") === void 0 && l.use(mt), l.component("lkt-button") === void 0 && l.use(ft), l.component("lkt-paginator") === void 0 && l.use(pt), l.component("lkt-field-text") === void 0 && l.use(vt), l.component("lkt-field-textarea") === void 0 && l.use(ht), l.component("lkt-field-select") === void 0 && l.use(yt), l.component("lkt-field-switch") === void 0 && l.use(kt), l.component("lkt-field-file") === void 0 && l.use(bt), l.component("lkt-table") === void 0 && l.component("lkt-table", sl);
   }
-}, Ml = (l) => (A.navButtonSlot = l, !0), $l = (l) => (A.dropButtonSlot = l, !0), Al = (l) => (A.createButtonSlot = l, !0);
+}, Al = (l) => (R.navButtonSlot = l, !0), Rl = (l) => (R.dropButtonSlot = l, !0), Ol = (l) => (R.createButtonSlot = l, !0);
 export {
-  U as LktTableColumn,
-  Sl as createActionColumn,
-  Tl as createCheckColumn,
-  gl as createColumn,
-  Dl as createEmailColumn,
-  Ll as createHiddenColumn,
-  Cl as createLinkColumn,
-  El as createSelectColumn,
-  Bl as createSwitchColumn,
-  wl as createTelColumn,
-  Vl as createTextColumn,
-  Il as default,
-  Al as setTableCreateButtonSlot,
-  $l as setTableDropButtonSlot,
-  Ml as setTableNavButtonSlot
+  K as LktTableColumn,
+  Dl as createActionColumn,
+  El as createCheckColumn,
+  Sl as createColumn,
+  Tl as createEmailColumn,
+  Ml as createHiddenColumn,
+  Vl as createLinkColumn,
+  Ll as createSelectColumn,
+  Il as createSwitchColumn,
+  Bl as createTelColumn,
+  wl as createTextColumn,
+  $l as default,
+  Ol as setTableCreateButtonSlot,
+  Rl as setTableDropButtonSlot,
+  Al as setTableNavButtonSlot
 };