lkt-table 1.2.7 → 1.2.9

package/dist/build.d.ts

@@ -780,10 +780,10 @@ declare function wl(l: any, t: any, r?: boolean): {
     useForRowKey: (t?: boolean) => K;
     isForRowKey: boolean | undefined;
 };
-declare namespace $l {
+declare namespace Rl {
     function install(l: any): void;
 }
 declare function Ol(l: any): boolean;
-declare function Rl(l: any): boolean;
 declare function Al(l: any): boolean;
-export { 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 };
+declare function $l(l: any): boolean;
+export { 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, Rl as default, Ol as setTableCreateButtonSlot, Al as setTableDropButtonSlot, $l as setTableNavButtonSlot };

package/dist/build.js

@@ -1,4 +1,4 @@
-import { reactive as H, defineComponent as q, ref as C, watch as U, nextTick as de, computed as f, resolveComponent as $, openBlock as u, createBlock as b, withCtx as N, createTextVNode as le, toDisplayString as j, unref as I, createElementBlock as m, Fragment as A, withModifiers as at, resolveDynamicComponent as Z, createCommentVNode as y, normalizeClass as te, createElementVNode as E, createVNode as X, renderList as P, renderSlot as F, withDirectives as x, vShow as ee, useSlots as nt, onMounted as ut, createSlots as Be } from "vue";
+import { reactive as H, defineComponent as q, ref as C, watch as U, nextTick as de, computed as f, resolveComponent as R, openBlock as u, createBlock as b, withCtx as N, createTextVNode as le, toDisplayString as j, unref as I, createElementBlock as m, Fragment as $, withModifiers as at, resolveDynamicComponent as Z, createCommentVNode as y, normalizeClass as te, createElementVNode as E, createVNode as X, renderList as W, renderSlot as F, withDirectives as x, vShow as ee, useSlots as nt, onMounted as ut, createSlots as Ee } from "vue";
 import { httpCall as st } from "lkt-http-client";
 import { __ as z } from "lkt-i18n";
 import { createLktEvent as ce } from "lkt-events";
@@ -155,7 +155,7 @@ class K {
     return this.isForRowKey = t, this;
   }
 }
-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) => {
+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)), Ie = (l, t, r, n) => {
   if (!r) return 0;
   let s = l[r.key], o = t[r.key];
   if (n === "asc") {
@@ -200,7 +200,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
       if (l[r].key === t) return l[r];
   }
   return null;
-}, Le = /* @__PURE__ */ q({
+}, Me = /* @__PURE__ */ q({
   __name: "LktTableCell",
   props: {
     modelValue: { default: () => ({}) },
@@ -222,8 +222,8 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
     }, { deep: !0 }), n.column.hasToLoadResource() && n.column.loadResource();
     const v = f(() => ({ ...n.column.slotData, item: s.value }));
     return (a, i) => {
-      const W = $("lkt-anchor"), J = $("lkt-field-text"), d = $("lkt-field-switch"), L = $("lkt-field-file"), S = $("lkt-loader"), V = $("lkt-field-select");
-      return a.column.type === "link" ? (u(), b(W, {
+      const _ = R("lkt-anchor"), J = R("lkt-field-text"), d = R("lkt-field-switch"), L = R("lkt-field-file"), S = R("lkt-loader"), V = R("lkt-field-select");
+      return a.column.type === "link" ? (u(), b(_, {
         key: 0,
         to: a.column.getHref(s.value)
       }, {
@@ -283,7 +283,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
         ref: (p) => h.value = p,
         modelValue: o.value,
         "onUpdate:modelValue": i[6] || (i[6] = (p) => o.value = p)
-      }, null, 8, ["read-mode", "modelValue"])) : a.column.type === "select" ? (u(), m(A, { key: 8 }, [
+      }, null, 8, ["read-mode", "modelValue"])) : a.column.type === "select" ? (u(), m($, { key: 8 }, [
         g.value ? (u(), b(S, { key: 0 })) : (u(), b(V, {
           key: 1,
           "read-mode": !a.column.editable || !a.editModeEnabled,
@@ -300,12 +300,12 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (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)) : (u(), m(A, { key: 9 }, [
+      ], 64)) : (u(), m($, { key: 9 }, [
         le(j(I(Y)(a.column, s.value, a.i, a.columns)), 1)
       ], 64));
     };
   }
-}), R = {
+}), A = {
   navButtonSlot: "",
   dropButtonSlot: "",
   createButtonSlot: ""
@@ -321,9 +321,9 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
   },
   emits: ["click"],
   setup(l, { emit: t }) {
-    const r = t, n = l, s = f(() => R.dropButtonSlot !== ""), o = f(() => R.dropButtonSlot), h = f(() => n.text.startsWith("__:") ? z(n.text.substring(3)) : n.text);
+    const r = t, n = l, s = f(() => A.dropButtonSlot !== ""), o = f(() => A.dropButtonSlot), h = f(() => n.text.startsWith("__:") ? z(n.text.substring(3)) : n.text);
     return (g, v) => {
-      const a = $("lkt-button");
+      const a = R("lkt-button");
       return u(), b(a, {
         palette: "table-delete",
         icon: s.value ? "" : g.icon,
@@ -347,10 +347,10 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
 }, Bt = {
   key: 2,
   class: "lkt-table-nav-cell"
-}, Et = { class: "lkt-table-nav-container" }, It = /* @__PURE__ */ E("i", { class: "" }, null, -1), Lt = /* @__PURE__ */ E("i", { class: "" }, null, -1), Mt = ["data-column", "colspan", "title", "onClick"], $t = {
+}, Et = { class: "lkt-table-nav-container" }, It = /* @__PURE__ */ E("i", { class: "" }, null, -1), Lt = /* @__PURE__ */ E("i", { class: "" }, null, -1), Mt = ["data-column", "colspan", "title", "onClick"], Rt = {
   key: 4,
   class: "lkt-table-col-drop"
-}, At = /* @__PURE__ */ q({
+}, $t = /* @__PURE__ */ q({
   __name: "LktTableRow",
   props: {
     modelValue: { default: () => ({}) },
@@ -379,11 +379,11 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
     }, g = f(() => {
       let d = [];
       return n.sortable && n.isDraggable && d.push("handle"), d.join(" ");
-    }), v = f(() => R.navButtonSlot !== ""), a = f(() => R.navButtonSlot);
-    f(() => R.dropButtonSlot !== ""), f(() => R.dropButtonSlot);
+    }), v = f(() => A.navButtonSlot !== ""), a = f(() => A.navButtonSlot);
+    f(() => A.dropButtonSlot !== ""), f(() => A.dropButtonSlot);
     const i = () => {
       r("item-up", n.i);
-    }, W = () => {
+    }, _ = () => {
       r("item-down", n.i);
     }, J = () => {
       r("item-drop", n.i);
@@ -391,7 +391,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
     return U(() => n.modelValue, (d) => s.value = d), U(s, (d) => {
       r("update:modelValue", d, n.i);
     }, { deep: !0 }), (d, L) => {
-      const S = $("lkt-button");
+      const S = R("lkt-button");
       return u(), m("tr", {
         "data-i": d.i,
         "data-draggable": d.isDraggable
@@ -412,7 +412,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
                 v.value ? (u(), b(Z(a.value), {
                   key: 0,
                   direction: "up"
-                })) : (u(), m(A, { key: 1 }, [
+                })) : (u(), m($, { key: 1 }, [
                   It,
                   le(" UP ")
                 ], 64))
@@ -422,13 +422,13 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
             X(S, {
               palette: "table-nav",
               disabled: d.latestRow,
-              onClick: W
+              onClick: _
             }, {
               default: N(() => [
                 v.value ? (u(), b(Z(a.value), {
                   key: 0,
                   direction: "down"
-                })) : (u(), m(A, { key: 1 }, [
+                })) : (u(), m($, { key: 1 }, [
                   Lt,
                   le(" DOWN ")
                 ], 64))
@@ -443,7 +443,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
           "data-role": "show-more",
           class: te(d.hiddenIsVisible ? "state-open" : "")
         }, null, 2)) : y("", !0),
-        (u(!0), m(A, null, P(d.visibleColumns, (V) => (u(), m(A, null, [
+        (u(!0), m($, null, W(d.visibleColumns, (V) => (u(), m($, null, [
           I(Ct)(V, d.emptyColumns, s.value) ? (u(), m("td", {
             key: 0,
             "data-column": V.key,
@@ -457,7 +457,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
               item: s.value,
               column: V,
               i: d.i
-            }) : s.value ? (u(), b(Le, {
+            }) : s.value ? (u(), b(Me, {
               key: 1,
               modelValue: s.value,
               "onUpdate:modelValue": L[1] || (L[1] = (p) => s.value = p),
@@ -468,7 +468,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
             }, null, 8, ["modelValue", "column", "columns", "edit-mode-enabled", "i"])) : y("", !0)
           ], 8, Mt)) : y("", !0)
         ], 64))), 256)),
-        d.canDrop && d.editModeEnabled ? (u(), m("td", $t, [
+        d.canDrop && d.editModeEnabled ? (u(), m("td", Rt, [
           X(Dt, {
             resource: d.dropResource,
             "resource-data": s.value,
@@ -481,7 +481,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
       ], 8, wt);
     };
   }
-}), Rt = { "data-role": "hidden-row" }, Ot = ["colspan"], Ft = ["data-column"], Nt = ["data-i"], Ut = ["data-column", "title", "onClick"], Ht = /* @__PURE__ */ q({
+}), At = { "data-role": "hidden-row" }, Ot = ["colspan"], Ft = ["data-column"], Nt = ["data-i"], Ut = ["data-column", "title", "onClick"], Ht = /* @__PURE__ */ q({
   __name: "LktHiddenRow",
   props: {
     modelValue: { default: () => ({}) },
@@ -499,18 +499,18 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
     const r = t, n = l, s = C(n.modelValue), o = (h, g, v) => {
       r("click", h, ce("", { item: g, column: v }));
     };
-    return U(() => n.modelValue, (h) => s.value = h), U(s, () => r("update:modelValue", s.value)), (h, g) => x((u(), m("tr", Rt, [
+    return U(() => n.modelValue, (h) => s.value = h), U(s, () => r("update:modelValue", s.value)), (h, g) => x((u(), m("tr", At, [
       E("td", { colspan: h.hiddenColumnsColSpan }, [
         E("table", null, [
           E("tr", null, [
-            (u(!0), m(A, null, P(h.hiddenColumns, (v) => (u(), m("th", {
+            (u(!0), m($, null, W(h.hiddenColumns, (v) => (u(), m("th", {
               "data-column": v.key
             }, [
               E("div", null, j(v.label), 1)
             ], 8, Ft))), 256))
           ]),
           E("tr", { "data-i": h.i }, [
-            (u(!0), m(A, null, P(h.hiddenColumns, (v, a) => (u(), m("td", {
+            (u(!0), m($, null, W(h.hiddenColumns, (v, a) => (u(), m("td", {
               "data-column": v.key,
               title: I(Y)(v, s.value, a, h.hiddenColumns),
               onClick: (i) => o(i, s.value, v)
@@ -521,7 +521,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
                 item: s.value,
                 column: v,
                 i: a
-              }) : (u(), b(Le, {
+              }) : (u(), b(Me, {
                 key: 1,
                 column: v,
                 columns: h.hiddenColumns,
@@ -537,33 +537,35 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
       [ee, h.hiddenIsVisible]
     ]);
   }
-}), Ie = /* @__PURE__ */ q({
+}), Le = /* @__PURE__ */ q({
   __name: "CreateButton",
   props: {
     disabled: { type: Boolean, default: !1 },
     text: { default: "" },
-    icon: { default: "" }
+    icon: { default: "" },
+    to: { default: "" }
   },
   emits: ["click"],
   setup(l, { emit: t }) {
-    const r = t, n = l, s = f(() => R.createButtonSlot !== ""), o = f(() => R.createButtonSlot), h = f(() => n.text.startsWith("__:") ? z(n.text.substring(3)) : n.text);
+    const r = t, n = l, s = f(() => A.createButtonSlot !== ""), o = f(() => A.createButtonSlot), h = f(() => n.text.startsWith("__:") ? z(n.text.substring(3)) : n.text);
     return (g, v) => {
-      const a = $("lkt-button");
+      const a = R("lkt-button");
       return u(), b(a, {
         palette: "table-create",
         disabled: g.disabled,
         icon: s.value ? "" : g.icon,
         text: s.value ? "" : h.value,
+        "on-click-to": g.to,
         onClick: v[0] || (v[0] = (i) => r("click"))
       }, {
         default: N(() => [
           s.value ? (u(), b(Z(o.value), { key: 0 })) : y("", !0)
         ]),
         _: 1
-      }, 8, ["disabled", "icon", "text"]);
+      }, 8, ["disabled", "icon", "text", "on-click-to"]);
     };
   }
-}), Kt = ["data-column", "data-sortable", "data-sort", "colspan", "title"], _t = /* @__PURE__ */ q({
+}), Kt = ["data-column", "data-sortable", "data-sort", "colspan", "title"], Pt = /* @__PURE__ */ q({
   __name: "TableHeader",
   props: {
     column: { default: () => ({}) },
@@ -588,7 +590,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
       E("div", null, j(g.value), 1)
     ], 8, Kt));
   }
-}), Pt = ["id"], Wt = { key: 0 }, jt = { class: "lkt-table-page-buttons" }, Jt = { key: 1 }, Gt = { class: "switch-edition-mode" }, zt = {
+}), Wt = ["id"], _t = { key: 0 }, jt = { class: "lkt-table-page-buttons" }, Jt = { key: 1 }, Gt = { class: "switch-edition-mode" }, zt = {
   key: 0,
   class: "lkt-table-page-buttons"
 }, qt = {
@@ -614,7 +616,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
   props: {
     modelValue: { default: () => [] },
     columns: { default: () => [] },
-    sorter: { type: Function, default: Ee },
+    sorter: { type: Function, default: Ie },
     draggableChecker: { type: Function, default: (l) => !0 },
     checkValidDrag: { type: Function, default: void 0 },
     sortable: { type: Boolean, default: !1 },
@@ -643,6 +645,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
     saveText: { default: "Save" },
     createText: { default: "Add item" },
     createIcon: { default: "" },
+    createRoute: { default: "" },
     dropText: { default: "Delete" },
     dropIcon: { default: "" },
     editModeText: { default: "Edit mode" },
@@ -658,11 +661,11 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
   },
   emits: ["update:modelValue", "sort", "click", "save", "error", "before-save"],
   setup(l, { expose: t, emit: r }) {
-    const n = r, s = 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), L = 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)), M = C(o.editMode), $e = (e) => {
+    const n = r, s = nt(), o = l, h = {}, g = C(typeof o.sorter == "function" ? o.sorter : Ie), v = C(St(o.columns)), a = C("asc"), i = C(o.modelValue), _ = C(h), J = C(null), d = C(o.columns), L = C(o.page), S = C(!1), V = C(!1), p = C(o.perms), fe = C(null), Re = C({}), Q = C(new dt({ items: i.value }, o.dataStateConfig)), M = 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) => {
       p.value = e;
-    }, Re = () => de(() => S.value = !0), Oe = () => {
+    }, Oe = () => de(() => S.value = !0), Fe = () => {
       fe.value.doRefresh();
     }, oe = it(12), ue = f(() => {
       if (!o.hideEmptyColumns) return [];
@@ -675,17 +678,17 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
           D[k] && (T = !0);
         }), T || e.push(k);
       }), e;
-    }), ae = f(() => d.value.filter((e) => !e.hidden)), se = f(() => d.value.filter((e) => e.hidden)), Fe = f(() => {
+    }), ae = f(() => d.value.filter((e) => !e.hidden)), se = f(() => d.value.filter((e) => e.hidden)), Ne = f(() => {
       let e = ae.value.length + 1;
       return o.sortable && ++e, e;
-    }), Ne = f(() => d.value.filter((e) => e.isForRowKey)), pe = f(() => se.value.length > 0 && !o.sortable), Ue = f(() => d.value.map((e) => e.key)), ve = f(() => {
+    }), Ue = f(() => d.value.filter((e) => e.isForRowKey)), pe = f(() => se.value.length > 0 && !o.sortable), He = f(() => d.value.map((e) => e.key)), ve = f(() => {
       let e = [];
-      for (let c in s) Ue.value.indexOf(c) !== -1 && e.push(c);
+      for (let c in s) He.value.indexOf(c) !== -1 && e.push(c);
       return e;
-    }), he = f(() => o.hiddenSave || S.value || !o.saveResource ? !1 : M.value && Q.value.changed() ? !0 : M.value), He = f(() => o.switchEditionEnabled ? !0 : he.value || M.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(() => ({
+    }), he = f(() => o.hiddenSave || S.value || !o.saveResource ? !1 : M.value && Q.value.changed() ? !0 : M.value), Ke = f(() => o.switchEditionEnabled ? !0 : he.value || M.value && o.canCreate), Pe = f(() => o.saveDisabled || typeof o.saveValidator == "function" && !o.saveValidator(i.value) ? !1 : Q.value.changed()), We = f(() => i.value.length), _e = f(() => ({
       items: i.value,
       ...o.saveResourceData
-    })), We = f(() => o.titleTag === "" ? "h2" : o.titleTag), je = f(() => o.wrapContentTag === "" ? "div" : o.wrapContentTag), ie = f(() => o.title.startsWith("__:") ? z(o.title.substring(3)) : o.title), Je = f(() => o.saveText.startsWith("__:") ? z(o.saveText.substring(3)) : o.saveText), Ge = f(() => o.editModeText.startsWith("__:") ? z(o.editModeText.substring(3)) : o.editModeText), ne = f(() => p.value.includes("create")), ze = f(() => p.value.includes("read")), qe = f(() => p.value.includes("update")), re = f(() => p.value.includes("drop")), Qe = (e) => {
+    })), je = f(() => o.titleTag === "" ? "h2" : o.titleTag), Je = f(() => o.wrapContentTag === "" ? "div" : o.wrapContentTag), ie = f(() => o.title.startsWith("__:") ? z(o.title.substring(3)) : o.title), Ge = f(() => o.saveText.startsWith("__:") ? z(o.saveText.substring(3)) : o.saveText), ze = f(() => o.editModeText.startsWith("__:") ? z(o.editModeText.substring(3)) : o.editModeText), ne = f(() => p.value.includes("create")), qe = f(() => p.value.includes("read")), Qe = f(() => p.value.includes("update")), re = f(() => p.value.includes("drop")), Xe = (e) => {
       let c = e.target;
       if (typeof c.dataset.column > "u")
         do
@@ -693,13 +696,13 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
         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) => {
+    }, ye = (e) => _.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];
+      _.value[k] = typeof _.value[k] > "u" ? !0 : !_.value[k];
     }, Ce = () => {
       d.value.forEach((e) => {
         if (e.type === "select" && e.autoLoadSelectOptions) {
@@ -713,7 +716,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
           }), e.setOptions(k);
         }
       });
-    }, Xe = (e) => typeof o.checkValidDrag == "function" ? o.checkValidDrag(e) : !0, Se = (e) => typeof o.draggableChecker == "function" ? o.draggableChecker(e) : !0, Ve = () => {
+    }, Ye = (e) => typeof o.checkValidDrag == "function" ? o.checkValidDrag(e) : !0, Se = (e) => typeof o.draggableChecker == "function" ? o.draggableChecker(e) : !0, Ve = () => {
       if (typeof o.newValueGenerator == "function") {
         let e = o.newValueGenerator();
         if (typeof e == "object") {
@@ -722,11 +725,11 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
         }
       }
       i.value.push({});
-    }, Ye = () => {
-      S.value = !0;
     }, Ze = () => {
+      S.value = !0;
+    }, xe = () => {
       S.value = !1;
-    }, xe = (e, c) => {
+    }, et = (e, c) => {
       if (n("before-save"), o.saveResource && (S.value = !1, !c.success)) {
         n("error", c.httpStatus);
         return;
@@ -738,15 +741,15 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
         for (; T--; ) e.push(void 0);
       }
       return e.splice(k, 0, e.splice(c, 1)[0]), e;
-    }, et = (e) => {
-      De(i.value, e, e - 1);
     }, tt = (e) => {
-      De(i.value, e, e + 1);
+      De(i.value, e, e - 1);
     }, lt = (e) => {
+      De(i.value, e, e + 1);
+    }, we = (e) => {
       i.value.splice(e, 1);
     }, ot = () => {
       let e = document.getElementById("lkt-table-body-" + oe);
-      Me.value = new ct(e, {
+      Re.value = new ct(e, {
         direction: "vertical",
         handle: ".handle",
         animation: 150,
@@ -755,16 +758,16 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
           i.value.splice(k, 1, D[T]), i.value.splice(T, 1, D[k]);
         },
         onMove: function(c, k) {
-          return Xe(c);
+          return Ye(c);
         }
       });
-    }, we = (e, c, k = !1) => {
+    }, Te = (e, c, k = !1) => {
       let T = [oe, "row", c];
-      return k && T.push("hidden"), Ne.value.forEach((D) => {
+      return k && T.push("hidden"), Ue.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);
+    }, Be = f(() => typeof o.createEnabledValidator == "function" ? o.createEnabledValidator({ items: i.value }) : !0);
     return ut(() => {
       Ce(), ke(Vt(o.columns, v.value)), Q.value.store({ items: i.value }).turnStoredIntoOriginal(), o.sortable && de(() => {
         ot();
@@ -772,16 +775,16 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
     }), 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,
-      doRefresh: Oe
+      getItemByEvent: Xe,
+      doRefresh: Fe
     }), (e, c) => {
-      const k = $("lkt-button"), T = $("lkt-field-switch"), D = $("lkt-loader"), O = $("lkt-paginator");
+      const k = R("lkt-button"), T = R("lkt-field-switch"), D = R("lkt-loader"), O = R("lkt-paginator");
       return u(), m("section", {
         class: "lkt-table-page",
         id: "lkt-table-page-" + I(oe)
       }, [
-        ie.value || I(s).title ? (u(), m("header", Wt, [
-          ie.value ? (u(), b(Z(We.value), { key: 0 }, {
+        ie.value || I(s).title ? (u(), m("header", _t, [
+          ie.value ? (u(), b(Z(je.value), { key: 0 }, {
             default: N(() => [
               e.titleIcon ? (u(), m("i", {
                 key: 0,
@@ -793,7 +796,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
           })) : y("", !0),
           I(s).title ? F(e.$slots, "title", { key: 1 }) : y("", !0)
         ])) : y("", !0),
-        (u(), b(Z(je.value), {
+        (u(), b(Z(Je.value), {
           class: te(["lkt-table-page-content-wrapper", e.wrapContentClass])
         }, {
           default: N(() => [
@@ -801,14 +804,14 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
               x(X(k, {
                 ref: "saveButton",
                 palette: "success",
-                disabled: !Ke.value,
+                disabled: !Pe.value,
                 "confirm-modal": e.saveConfirm,
                 "confirm-data": e.confirmData,
                 resource: e.saveResource,
-                "resource-data": Pe.value,
-                onLoading: Ye,
-                onLoaded: Ze,
-                onClick: xe
+                "resource-data": _e.value,
+                onLoading: Ze,
+                onLoaded: xe,
+                onClick: et
               }, {
                 default: N(() => [
                   I(s)["button-save"] ? F(e.$slots, "button-save", {
@@ -816,30 +819,31 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
                     items: i.value,
                     editMode: e.editMode,
                     canUpdate: !e.saveDisabled
-                  }) : (u(), m("span", Jt, j(Je.value), 1))
+                  }) : (u(), m("span", Jt, j(Ge.value), 1))
                 ]),
                 _: 3
               }, 8, ["disabled", "confirm-modal", "confirm-data", "resource", "resource-data"]), [
                 [ee, he.value]
               ]),
-              e.canCreate && ne.value && M.value ? (u(), b(Ie, {
+              e.canCreate && ne.value && M.value ? (u(), b(Le, {
                 key: 0,
-                disabled: !Te.value,
+                disabled: !Be.value,
                 text: e.createText,
                 icon: e.createIcon,
+                to: e.createRoute,
                 onClick: Ve
-              }, null, 8, ["disabled", "text", "icon"])) : y("", !0),
+              }, null, 8, ["disabled", "text", "icon", "to"])) : y("", !0),
               E("div", Gt, [
                 x(X(T, {
                   modelValue: M.value,
                   "onUpdate:modelValue": c[0] || (c[0] = (w) => M.value = w),
-                  label: Ge.value
+                  label: ze.value
                 }, null, 8, ["modelValue", "label"]), [
                   [ee, e.switchEditionEnabled]
                 ])
               ])
             ], 512), [
-              [ee, He.value]
+              [ee, Ke.value]
             ]),
             I(s).buttons ? (u(), m("div", zt, [
               F(e.$slots, "buttons")
@@ -859,15 +863,16 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
                 key: 1,
                 class: te(["lkt-table-items-container", e.itemsContainerClass])
               }, [
-                (u(!0), m(A, null, P(i.value, (w, B) => (u(), m("div", ll, [
+                (u(!0), m($, null, W(i.value, (w, B) => (u(), m("div", ll, [
                   F(e.$slots, "item", {
                     item: w,
                     index: B,
                     canCreate: ne.value,
-                    canRead: ze.value,
-                    canUpdate: qe.value,
+                    canRead: qe.value,
+                    canUpdate: Qe.value,
                     canDrop: re.value,
-                    isLoading: S.value
+                    isLoading: S.value,
+                    doDrop: () => we(B)
                   })
                 ]))), 256))
               ], 2)) : (u(), m("table", Xt, [
@@ -876,8 +881,8 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
                     e.sortable && M.value ? (u(), m("th", Yt)) : y("", !0),
                     e.addNavigation && M.value ? (u(), m("th", Zt)) : y("", !0),
                     pe.value ? (u(), m("th", xt)) : y("", !0),
-                    (u(!0), m(A, null, P(ae.value, (w) => (u(), m(A, null, [
-                      ue.value.indexOf(w.key) === -1 ? (u(), b(_t, {
+                    (u(!0), m($, null, W(ae.value, (w) => (u(), m($, null, [
+                      ue.value.indexOf(w.key) === -1 ? (u(), b(Pt, {
                         key: 0,
                         column: w,
                         "sort-by": v.value,
@@ -894,10 +899,10 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
                   ref: (w) => J.value = w,
                   id: "lkt-table-body-" + I(oe)
                 }, [
-                  (u(!0), m(A, null, P(i.value, (w, B) => (u(), b(At, {
+                  (u(!0), m($, null, W(i.value, (w, B) => (u(), b($t, {
                     modelValue: i.value[B],
-                    "onUpdate:modelValue": (_) => i.value[B] = _,
-                    key: we(w, B),
+                    "onUpdate:modelValue": (P) => i.value[B] = P,
+                    key: Te(w, B),
                     i: B,
                     "display-hidden-columns-indicator": pe.value,
                     "is-draggable": Se(w),
@@ -906,7 +911,7 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
                     "empty-columns": ue.value,
                     "add-navigation": e.addNavigation,
                     "hidden-is-visible": ye(B),
-                    "latest-row": B + 1 === _e.value,
+                    "latest-row": B + 1 === We.value,
                     "can-drop": e.canDrop && re.value && M.value,
                     "drop-confirm": e.dropConfirm,
                     "drop-resource": e.dropResource,
@@ -915,14 +920,14 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
                     "edit-mode-enabled": M.value,
                     onClick: be,
                     onShow: ge,
-                    onItemUp: et,
-                    onItemDown: tt,
-                    onItemDrop: lt
-                  }, Be({ _: 2 }, [
-                    P(ve.value, (_) => ({
-                      name: _,
+                    onItemUp: tt,
+                    onItemDown: lt,
+                    onItemDrop: we
+                  }, Ee({ _: 2 }, [
+                    W(ve.value, (P) => ({
+                      name: P,
                       fn: N((G) => [
-                        F(e.$slots, _, {
+                        F(e.$slots, P, {
                           item: G.item,
                           value: G.value,
                           column: G.column
@@ -930,13 +935,13 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
                       ])
                     }))
                   ]), 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)),
-                  se.value.length > 0 ? (u(!0), m(A, { key: 0 }, P(i.value, (w, B) => (u(), b(Ht, {
+                  se.value.length > 0 ? (u(!0), m($, { key: 0 }, W(i.value, (w, B) => (u(), b(Ht, {
                     modelValue: i.value[B],
-                    "onUpdate:modelValue": (_) => i.value[B] = _,
-                    key: we(w, B, !0),
+                    "onUpdate:modelValue": (P) => i.value[B] = P,
+                    key: Te(w, B, !0),
                     i: B,
                     "hidden-columns": se.value,
-                    "hidden-columns-col-span": Fe.value,
+                    "hidden-columns-col-span": Ne.value,
                     "is-draggable": Se(w),
                     sortable: e.sortable,
                     "visible-columns": ae.value,
@@ -944,11 +949,11 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
                     "hidden-is-visible": ye(B),
                     onClick: be,
                     onShow: ge
-                  }, Be({ _: 2 }, [
-                    P(ve.value, (_) => ({
-                      name: _,
+                  }, Ee({ _: 2 }, [
+                    W(ve.value, (P) => ({
+                      name: P,
                       fn: N((G) => [
-                        F(e.$slots, _, {
+                        F(e.$slots, P, {
                           item: G.item,
                           value: G.value,
                           column: G.column
@@ -966,13 +971,14 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
             ])) : y("", !0),
             !S.value && i.value.length === 0 ? (u(), m("div", al, j(e.noResultsText), 1)) : y("", !0),
             e.canCreate && ne.value && M.value ? (u(), m("div", nl, [
-              e.canCreate && ne.value && M.value ? (u(), b(Ie, {
+              e.canCreate && ne.value && M.value ? (u(), b(Le, {
                 key: 0,
-                disabled: !Te.value,
+                disabled: !Be.value,
                 text: e.createText,
                 icon: e.createIcon,
+                to: e.createRoute,
                 onClick: Ve
-              }, null, 8, ["disabled", "text", "icon"])) : y("", !0)
+              }, null, 8, ["disabled", "text", "icon", "to"])) : y("", !0)
             ])) : y("", !0),
             X(O, {
               ref_key: "paginator",
@@ -982,20 +988,20 @@ const Sl = (l, t, r = !0) => H(new K(l, t).setIsSortable(r)), Vl = (l, t, r, n =
               resource: e.resource,
               filters: e.filters,
               onResults: $e,
-              onLoading: Re,
+              onLoading: Oe,
               onPerms: Ae
             }, null, 8, ["modelValue", "resource", "filters"])
           ]),
           _: 3
         }, 8, ["class"]))
-      ], 8, Pt);
+      ], 8, Wt);
     };
   }
-}), $l = {
+}), Rl = {
   install: (l) => {
     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", ul);
   }
-}, Al = (l) => (R.navButtonSlot = l, !0), Rl = (l) => (R.dropButtonSlot = l, !0), Ol = (l) => (R.createButtonSlot = l, !0);
+}, $l = (l) => (A.navButtonSlot = l, !0), Al = (l) => (A.dropButtonSlot = l, !0), Ol = (l) => (A.createButtonSlot = l, !0);
 export {
   K as LktTableColumn,
   Dl as createActionColumn,
@@ -1008,8 +1014,8 @@ export {
   Il as createSwitchColumn,
   Bl as createTelColumn,
   wl as createTextColumn,
-  $l as default,
+  Rl as default,
   Ol as setTableCreateButtonSlot,
-  Rl as setTableDropButtonSlot,
-  Al as setTableNavButtonSlot
+  Al as setTableDropButtonSlot,
+  $l as setTableNavButtonSlot
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "",
   "keywords": [
     "lkt",

package/src/components/CreateButton.vue

@@ -9,10 +9,12 @@ const props = withDefaults(defineProps<{
     disabled: boolean
     text: string
     icon: string
+    to: string
 }>(), {
     disabled: false,
     text: '',
     icon: '',
+    to: '',
 });
 
 const hasCreateButtonSlot = computed(() => {
@@ -35,6 +37,7 @@ const hasCreateButtonSlot = computed(() => {
         :disabled="disabled"
         :icon="hasCreateButtonSlot ? '' : icon"
         :text="hasCreateButtonSlot ? '' : computedText"
+        :on-click-to="to"
         @click="emit('click')">
         <template v-if="hasCreateButtonSlot">
             <component

package/src/lib-components/LktTable.vue

@@ -53,6 +53,7 @@ const props = withDefaults(defineProps<{
     saveText?: string
     createText?: string
     createIcon?: string
+    createRoute?: string
     dropText?: string
     dropIcon?: string
     editModeText?: string
@@ -101,6 +102,7 @@ const props = withDefaults(defineProps<{
     dropIcon: '',
     createText: 'Add item',
     createIcon: '',
+    createRoute: '',
     editModeText: 'Edit mode',
     switchEditionEnabled: false,
     canCreate: false,
@@ -488,6 +490,7 @@ defineExpose({
                     :disabled="!createEnabled"
                     :text="createText"
                     :icon="createIcon"
+                    :to="createRoute"
                     @click="onClickAddItem"
                 />
 
@@ -613,6 +616,7 @@ defineExpose({
                               v-bind:can-update="hasUpdatePerm"
                               v-bind:can-drop="hasDropPerm"
                               v-bind:is-loading="loading"
+                              v-bind:do-drop="() => onItemDrop(i)"
                         />
                     </div>
                 </div>
@@ -633,6 +637,7 @@ defineExpose({
                     :disabled="!createEnabled"
                     :text="createText"
                     :icon="createIcon"
+                    :to="createRoute"
                     @click="onClickAddItem"
                 />
             </div>