lkt-table 1.0.15 → 1.0.17

package/dist/lkt-table.es.js

@@ -1,12 +1,17 @@
 var se = Object.defineProperty;
 var ue = (e, t, l) => t in e ? se(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l;
 var y = (e, t, l) => (ue(e, typeof t != "symbol" ? t + "" : t, l), l);
-import { reactive as w, defineComponent as M, ref as p, watch as T, nextTick as re, resolveComponent as H, openBlock as n, createBlock as b, withCtx as O, createTextVNode as _, toDisplayString as U, unref as V, createElementBlock as h, Fragment as I, createCommentVNode as E, normalizeClass as de, renderList as $, renderSlot as R, withDirectives as ce, createElementVNode as D, vShow as me, useSlots as fe, computed as B, onMounted as he, createSlots as W } from "vue";
+import { reactive as w, defineComponent as K, ref as p, watch as T, nextTick as re, resolveComponent as x, openBlock as a, createBlock as b, withCtx as R, createTextVNode as _, toDisplayString as O, unref as S, createElementBlock as h, Fragment as A, createCommentVNode as D, normalizeClass as de, renderList as E, renderSlot as H, withDirectives as ce, createElementVNode as $, vShow as me, useSlots as fe, computed as B, onMounted as he, createSlots as W } from "vue";
 import ye from "vuedraggable";
 import { httpCall as ve } from "lkt-http-client";
 import { createLktEvent as X } from "lkt-events";
 import { generateRandomString as ke } from "lkt-string-tools";
-class L {
+import be from "lkt-field-check";
+import ge from "lkt-field-text";
+import Ce from "lkt-field-switch";
+import pe from "lkt-field-select";
+import Se from "lkt-loader";
+class I {
   constructor(t = "", l = "") {
     y(this, "key");
     y(this, "label");
@@ -25,7 +30,11 @@ class L {
     y(this, "isMultiple");
     y(this, "isLoading");
     y(this, "resourceLoaded");
-    this.key = t, this.label = l, 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;
+    y(this, "valueSlot");
+    y(this, "editSlot");
+    y(this, "multipleDisplay");
+    y(this, "multipleDisplayEdition");
+    this.key = t, this.label = l, 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 = "";
   }
   setIsSortable(t = !0) {
     return this.sortable = t, this;
@@ -115,52 +124,64 @@ class L {
     }
     return this;
   }
+  setEditSlot(t) {
+    return this.editSlot = t, this;
+  }
+  setValueSlot(t) {
+    return this.valueSlot = t, this;
+  }
+  setMultipleDisplay(t) {
+    return this.multipleDisplay = t, this;
+  }
+  setMultipleDisplayEdition(t) {
+    return this.multipleDisplayEdition = t, this;
+  }
 }
-const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i = !0) => w(new L(e, t).setIsSortable(i).defineAsLink(l)), Ye = (e, t, l, i = !0) => w(new L(e, t).setIsSortable(i).defineAsAction(l)), Ze = (e, t, l = !0) => w(new L(e, t).setIsSortable(l).defineAsText()), _e = (e, t, l = !0) => w(new L(e, t).setIsSortable(l).defineAsEmail()), et = (e, t, l = !0) => w(new L(e, t).setIsSortable(l).defineAsTel()), tt = (e, t, l = !0) => w(new L(e, t).setIsSortable(l).defineAsCheck()), lt = (e, t, l = !0) => w(new L(e, t).setIsSortable(l).defineAsSwitch()), at = (e, t, l, i = !0) => w(new L(e, t).setIsSortable(i).defineAsSelect(l)), nt = (e, t, l = !0) => w(new L(e, t).setIsSortable(l).setIsHidden(!0)), ee = (e, t, l, i) => {
+const nt = (e, t, l = !0) => w(new I(e, t).setIsSortable(l)), ot = (e, t, l, n = !0) => w(new I(e, t).setIsSortable(n).defineAsLink(l)), st = (e, t, l, n = !0) => w(new I(e, t).setIsSortable(n).defineAsAction(l)), ut = (e, t, l = !0) => w(new I(e, t).setIsSortable(l).defineAsText()), rt = (e, t, l = !0) => w(new I(e, t).setIsSortable(l).defineAsEmail()), dt = (e, t, l = !0) => w(new I(e, t).setIsSortable(l).defineAsTel()), ct = (e, t, l = !0) => w(new I(e, t).setIsSortable(l).defineAsCheck()), mt = (e, t, l = !0) => w(new I(e, t).setIsSortable(l).defineAsSwitch()), ft = (e, t, l, n = !0) => w(new I(e, t).setIsSortable(n).defineAsSelect(l)), ht = (e, t, l = !0) => w(new I(e, t).setIsSortable(l).setIsHidden(!0)), ee = (e, t, l, n) => {
   if (!l)
     return 0;
-  let s = e[l.key], a = t[l.key];
-  if (i === "asc") {
-    if (s > a)
+  let s = e[l.key], i = t[l.key];
+  if (n === "asc") {
+    if (s > i)
       return 1;
-    if (a > s)
+    if (i > s)
       return -1;
   } else {
-    if (s > a)
+    if (s > i)
       return -1;
-    if (a > s)
+    if (i > s)
       return 1;
   }
   return 0;
-}, F = (e, t, l) => e.formatter && typeof e.formatter == "function" ? e.formatter(t[e.key], t, e, l) : t[e.key], be = (e, t, l) => {
+}, U = (e, t, l) => e.formatter && typeof e.formatter == "function" ? e.formatter(t[e.key], t, e, l) : t[e.key], Ve = (e, t, l) => {
   if (!e.colspan)
     return -1;
-  let i = t;
+  let n = t;
   return l.forEach((s) => {
-    let a = Y(e, s);
-    a > 0 && a < i && (i = a);
-  }), i;
-}, Y = (e, t) => e.colspan === !1 ? !1 : typeof e.colspan == "function" ? e.colspan(t) : e.colspan, ge = (e, t, l) => {
+    let i = Y(e, s);
+    i > 0 && i < n && (n = i);
+  }), n;
+}, Y = (e, t) => e.colspan === !1 ? !1 : typeof e.colspan == "function" ? e.colspan(t) : e.colspan, Le = (e, t, l) => {
   if (typeof e != "object" || !e.key || t.indexOf(e.key) > -1)
     return !1;
-  let i = Y(e, l);
-  return typeof e.colspan > "u" ? !0 : (typeof e.colspan < "u" && (typeof e.colspan == "function" ? i = parseInt(e.colspan()) : i = parseInt(e.colspan)), i > 0);
-}, Ce = (e = []) => {
+  let n = Y(e, l);
+  return typeof e.colspan > "u" ? !0 : (typeof e.colspan < "u" && (typeof e.colspan == "function" ? n = parseInt(e.colspan()) : n = parseInt(e.colspan)), n > 0);
+}, Ae = (e = []) => {
   if (e.length > 0) {
     for (let t = 0; t < e.length; ++t)
       if (e[t].sortable)
         return e[t].key;
   }
   return "";
-}, pe = (e, t) => {
+}, we = (e, t) => {
   if (e.length > 0) {
     for (let l = 0; l < e.length; ++l)
       if (e[l].key === t)
         return e[l];
   }
   return null;
-}, Ve = { name: "LktTableCell", inheritAttrs: !1 }, le = /* @__PURE__ */ M({
-  ...Ve,
+}, Ie = { name: "LktTableCell", inheritAttrs: !1 }, le = /* @__PURE__ */ K({
+  ...Ie,
   props: {
     modelValue: { type: Object, default: () => ({}) },
     column: { type: Object, default: () => ({}) },
@@ -168,85 +189,93 @@ const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i =
   },
   emits: ["edited"],
   setup(e, { emit: t }) {
-    const l = t, i = e, s = p(i.modelValue), a = p(s.value[i.column.key]), v = p(null), S = p(i.column.showLoading());
-    return T(a, () => {
+    const l = t, n = e, s = p(n.modelValue), i = p(s.value[n.column.key]), v = p(null), V = p(n.column.showLoading());
+    return T(i, () => {
       const u = JSON.parse(JSON.stringify(s.value));
-      u[i.column.key] = a.value, l("edited", u, i.i);
-    }), T(() => i.modelValue, (u) => {
-      s.value = u, a.value = s.value[i.column.key];
-    }), T(() => i.column, () => {
-      i.column.resourceLoaded && re(() => S.value = !1);
-    }, { deep: !0 }), i.column.hasToLoadResource() && i.column.loadResource(), (u, r) => {
-      const d = H("router-link"), C = H("lkt-field-text"), K = H("lkt-field-check"), x = H("lkt-field-switch"), j = H("lkt-loader"), N = H("lkt-field-select");
-      return e.column.type === "link" ? (n(), b(d, {
+      u[n.column.key] = i.value, l("edited", u, n.i);
+    }), T(() => n.modelValue, (u) => {
+      s.value = u, i.value = s.value[n.column.key];
+    }), T(() => n.column, () => {
+      n.column.resourceLoaded && re(() => V.value = !1);
+    }, { deep: !0 }), n.column.hasToLoadResource() && n.column.loadResource(), (u, r) => {
+      const d = x("router-link"), C = x("lkt-field-text"), M = x("lkt-field-check"), F = x("lkt-field-switch"), j = x("lkt-loader"), N = x("lkt-field-select");
+      return e.column.type === "link" ? (a(), b(d, {
         key: 0,
         to: e.column.getHref(s.value)
       }, {
-        default: O(() => [
-          _(U(V(F)(e.column, s.value, e.i)), 1)
+        default: R(() => [
+          _(O(S(U)(e.column, s.value, e.i)), 1)
         ]),
         _: 1
-      }, 8, ["to"])) : e.column.type === "action" ? (n(), h("a", {
+      }, 8, ["to"])) : e.column.type === "action" ? (a(), h("a", {
         key: 1,
         href: "#",
         onClick: r[0] || (r[0] = (f) => e.column.doAction(s.value))
-      }, U(V(F)(e.column, s.value, e.i)), 1)) : e.column.type === "text" ? (n(), b(C, {
+      }, O(S(U)(e.column, s.value, e.i)), 1)) : e.column.type === "text" ? (a(), b(C, {
         key: 2,
         "read-mode": !e.column.editable,
         ref: (f) => v.value = f,
-        modelValue: a.value,
-        "onUpdate:modelValue": r[1] || (r[1] = (f) => a.value = f)
-      }, null, 8, ["read-mode", "modelValue"])) : e.column.type === "email" ? (n(), b(C, {
+        "edit-slot": e.column.editSlot,
+        "value-slot": e.column.valueSlot,
+        modelValue: i.value,
+        "onUpdate:modelValue": r[1] || (r[1] = (f) => i.value = f)
+      }, null, 8, ["read-mode", "edit-slot", "value-slot", "modelValue"])) : e.column.type === "email" ? (a(), b(C, {
         key: 3,
         "read-mode": !e.column.editable,
         ref: (f) => v.value = f,
+        "edit-slot": e.column.editSlot,
+        "value-slot": e.column.valueSlot,
         "is-email": "",
-        modelValue: a.value,
-        "onUpdate:modelValue": r[2] || (r[2] = (f) => a.value = f)
-      }, null, 8, ["read-mode", "modelValue"])) : e.column.type === "tel" ? (n(), b(C, {
+        modelValue: i.value,
+        "onUpdate:modelValue": r[2] || (r[2] = (f) => i.value = f)
+      }, null, 8, ["read-mode", "edit-slot", "value-slot", "modelValue"])) : e.column.type === "tel" ? (a(), b(C, {
         key: 4,
         "read-mode": !e.column.editable,
         ref: (f) => v.value = f,
+        "edit-slot": e.column.editSlot,
+        "value-slot": e.column.valueSlot,
         "is-tel": "",
-        modelValue: a.value,
-        "onUpdate:modelValue": r[3] || (r[3] = (f) => a.value = f)
-      }, null, 8, ["read-mode", "modelValue"])) : e.column.type === "check" ? (n(), b(K, {
+        modelValue: i.value,
+        "onUpdate:modelValue": r[3] || (r[3] = (f) => i.value = f)
+      }, null, 8, ["read-mode", "edit-slot", "value-slot", "modelValue"])) : e.column.type === "check" ? (a(), b(M, {
         key: 5,
         "read-mode": !e.column.editable,
         ref: (f) => v.value = f,
-        modelValue: a.value,
-        "onUpdate:modelValue": r[4] || (r[4] = (f) => a.value = f)
-      }, null, 8, ["read-mode", "modelValue"])) : e.column.type === "switch" ? (n(), b(x, {
+        modelValue: i.value,
+        "onUpdate:modelValue": r[4] || (r[4] = (f) => i.value = f)
+      }, null, 8, ["read-mode", "modelValue"])) : e.column.type === "switch" ? (a(), b(F, {
         key: 6,
         "read-mode": !e.column.editable,
         ref: (f) => v.value = f,
-        modelValue: a.value,
-        "onUpdate:modelValue": r[5] || (r[5] = (f) => a.value = f)
-      }, null, 8, ["read-mode", "modelValue"])) : e.column.type === "select" ? (n(), h(I, { key: 7 }, [
-        S.value ? (n(), b(j, { key: 0 })) : (n(), b(N, {
+        modelValue: i.value,
+        "onUpdate:modelValue": r[5] || (r[5] = (f) => i.value = f)
+      }, null, 8, ["read-mode", "modelValue"])) : e.column.type === "select" ? (a(), h(A, { key: 7 }, [
+        V.value ? (a(), b(j, { key: 0 })) : (a(), b(N, {
           key: 1,
           "read-mode": !e.column.editable,
           ref: (f) => v.value = f,
-          modelValue: a.value,
-          "onUpdate:modelValue": r[6] || (r[6] = (f) => a.value = f),
+          modelValue: i.value,
+          "onUpdate:modelValue": r[6] || (r[6] = (f) => i.value = f),
           resource: e.column.resource,
           "resource-data": e.column.resourceData,
           options: e.column.options,
-          multiple: e.column.isMultiple
-        }, null, 8, ["read-mode", "modelValue", "resource", "resource-data", "options", "multiple"]))
-      ], 64)) : (n(), h(I, { key: 8 }, [
-        _(U(V(F)(e.column, s.value, e.i)), 1)
+          multiple: e.column.isMultiple,
+          "multiple-display": e.column.multipleDisplay,
+          "multiple-display-edition": e.column.multipleDisplayEdition
+        }, null, 8, ["read-mode", "modelValue", "resource", "resource-data", "options", "multiple", "multiple-display", "multiple-display-edition"]))
+      ], 64)) : (a(), h(A, { key: 8 }, [
+        _(O(S(U)(e.column, s.value, e.i)), 1)
       ], 64));
     };
   }
-}), Se = ["data-i", "data-handle-drag"], Ae = {
+}), Ee = ["data-i", "data-handle-drag"], De = {
   key: 0,
   "data-role": "drag-indicator"
-}, Ie = {
+}, $e = {
   key: 1,
   "data-role": "invalid-drag-indicator"
-}, we = ["data-column", "colspan", "title", "onClick"], Le = { name: "LktTableRow", inheritAttrs: !1 }, te = /* @__PURE__ */ M({
-  ...Le,
+}, Te = ["data-column", "colspan", "title", "onClick"], Be = { name: "LktTableRow", inheritAttrs: !1 }, te = /* @__PURE__ */ K({
+  ...Be,
   props: {
     isDraggable: { type: Boolean, default: !0 },
     sortable: { type: Boolean, default: !0 },
@@ -259,52 +288,52 @@ const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i =
   },
   emits: ["edited", "click", "show"],
   setup(e, { emit: t }) {
-    const l = t, i = e, s = p(i.item), a = (u, r, d) => {
+    const l = t, n = e, s = p(n.item), i = (u, r, d) => {
       l("click", u, X("", { item: r, column: d }));
     }, v = (u, r) => {
       l("show", u, X("", { i: r }));
-    }, S = (u, r) => {
+    }, V = (u, r) => {
       s.value = u;
     };
-    return T(() => i.item, (u) => s.value = u), T(s, () => l("edited", s.value, i.i)), (u, r) => (n(), h("tr", {
+    return T(() => n.item, (u) => s.value = u), T(s, () => l("edited", s.value, n.i)), (u, r) => (a(), h("tr", {
       "data-i": e.i,
       "data-handle-drag": e.isDraggable
     }, [
-      e.sortable && e.isDraggable ? (n(), h("td", Ae)) : e.sortable ? (n(), h("td", Ie)) : E("", !0),
-      e.displayHiddenColumnsIndicator ? (n(), h("td", {
+      e.sortable && e.isDraggable ? (a(), h("td", De)) : e.sortable ? (a(), h("td", $e)) : D("", !0),
+      e.displayHiddenColumnsIndicator ? (a(), h("td", {
         key: 2,
         onClick: r[0] || (r[0] = (d) => v(d, e.i)),
         "data-role": "show-more",
         class: de(e.hiddenIsVisible ? "state-open" : "")
-      }, null, 2)) : E("", !0),
-      (n(!0), h(I, null, $(e.visibleColumns, (d) => (n(), h(I, null, [
-        V(ge)(d, e.emptyColumns, e.item) ? (n(), h("td", {
+      }, null, 2)) : D("", !0),
+      (a(!0), h(A, null, E(e.visibleColumns, (d) => (a(), h(A, null, [
+        S(Le)(d, e.emptyColumns, e.item) ? (a(), h("td", {
           key: 0,
           "data-column": d.key,
-          colspan: V(Y)(d, e.item),
-          title: V(F)(d, e.item, e.i),
-          onClick: (C) => a(C, e.item, d)
+          colspan: S(Y)(d, e.item),
+          title: S(U)(d, e.item, e.i),
+          onClick: (C) => i(C, e.item, d)
         }, [
-          u.$slots[d.key] ? R(u.$slots, d.key, {
+          u.$slots[d.key] ? H(u.$slots, d.key, {
             key: 0,
             value: e.item[d.key],
             item: e.item,
             column: d,
             i: e.i
-          }) : e.item ? (n(), b(le, {
+          }) : e.item ? (a(), b(le, {
             key: 1,
             column: d,
             modelValue: s.value,
             "onUpdate:modelValue": r[1] || (r[1] = (C) => s.value = C),
             i: e.i,
-            onEdited: S
-          }, null, 8, ["column", "modelValue", "i"])) : E("", !0)
-        ], 8, we)) : E("", !0)
+            onEdited: V
+          }, null, 8, ["column", "modelValue", "i"])) : D("", !0)
+        ], 8, Te)) : D("", !0)
       ], 64))), 256))
-    ], 8, Se));
+    ], 8, Ee));
   }
-}), $e = { "data-role": "hidden-row" }, Ee = ["colspan"], De = ["data-column"], Te = ["data-i"], Be = ["data-column", "title", "onClick"], Ne = { name: "LktHiddenRow", inheritAttrs: !1 }, He = /* @__PURE__ */ M({
-  ...Ne,
+}), Ne = { "data-role": "hidden-row" }, xe = ["colspan"], He = ["data-column"], Fe = ["data-i"], Re = ["data-column", "title", "onClick"], Oe = { name: "LktHiddenRow", inheritAttrs: !1 }, Ue = /* @__PURE__ */ K({
+  ...Oe,
   props: {
     isDraggable: { type: Boolean, default: !0 },
     sortable: { type: Boolean, default: !0 },
@@ -318,54 +347,54 @@ const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i =
   },
   emits: ["update:modelValue", "click"],
   setup(e, { emit: t }) {
-    const l = t, i = e, s = p(i.modelValue), a = (v, S, u) => {
-      l("click", v, X("", { item: S, column: u }));
+    const l = t, n = e, s = p(n.modelValue), i = (v, V, u) => {
+      l("click", v, X("", { item: V, column: u }));
     };
-    return T(() => i.modelValue, (v) => s.value = v), T(s, () => l("update:modelValue", s.value)), (v, S) => ce((n(), h("tr", $e, [
-      D("td", { colspan: e.hiddenColumnsColSpan }, [
-        D("table", null, [
-          D("tr", null, [
-            (n(!0), h(I, null, $(e.hiddenColumns, (u) => (n(), h("th", {
+    return T(() => n.modelValue, (v) => s.value = v), T(s, () => l("update:modelValue", s.value)), (v, V) => ce((a(), h("tr", Ne, [
+      $("td", { colspan: e.hiddenColumnsColSpan }, [
+        $("table", null, [
+          $("tr", null, [
+            (a(!0), h(A, null, E(e.hiddenColumns, (u) => (a(), h("th", {
               "data-column": u.key
             }, [
-              D("div", null, U(u.label), 1)
-            ], 8, De))), 256))
+              $("div", null, O(u.label), 1)
+            ], 8, He))), 256))
           ]),
-          D("tr", { "data-i": e.i }, [
-            (n(!0), h(I, null, $(e.hiddenColumns, (u, r) => (n(), h("td", {
+          $("tr", { "data-i": e.i }, [
+            (a(!0), h(A, null, E(e.hiddenColumns, (u, r) => (a(), h("td", {
               "data-column": u.key,
-              title: V(F)(u, s.value, r),
-              onClick: (d) => a(d, s.value, u)
+              title: S(U)(u, s.value, r),
+              onClick: (d) => i(d, s.value, u)
             }, [
-              v.$slots[u.key] ? R(v.$slots, u.key, {
+              v.$slots[u.key] ? H(v.$slots, u.key, {
                 key: 0,
                 value: s.value[u.key],
                 item: s.value,
                 column: u,
                 i: r
-              }) : (n(), b(le, {
+              }) : (a(), b(le, {
                 key: 1,
                 column: u,
                 modelValue: s.value,
-                "onUpdate:modelValue": S[0] || (S[0] = (d) => s.value = d),
+                "onUpdate:modelValue": V[0] || (V[0] = (d) => s.value = d),
                 i: r
               }, null, 8, ["column", "modelValue", "i"]))
-            ], 8, Be))), 256))
-          ], 8, Te)
+            ], 8, Re))), 256))
+          ], 8, Fe)
         ])
-      ], 8, Ee)
+      ], 8, xe)
     ], 512)), [
       [me, e.hiddenIsVisible]
     ]);
   }
-}), Re = ["data-sortable"], xe = {
+}), Me = ["data-sortable"], Ke = {
   key: 0,
   "data-role": "drag-indicator"
-}, Oe = { key: 1 }, Ue = ["data-column", "data-sortable", "data-sort", "colspan", "title", "onClick"], Fe = { key: 1 }, Ke = {
+}, je = { key: 1 }, ze = ["data-column", "data-sortable", "data-sort", "colspan", "title", "onClick"], Je = { key: 1 }, qe = {
   key: 1,
   class: "lkt-empty-table"
-}, Me = { name: "LktTable", inheritAttrs: !1 }, je = /* @__PURE__ */ M({
-  ...Me,
+}, Ge = { name: "LktTable", inheritAttrs: !1 }, Pe = /* @__PURE__ */ K({
+  ...Ge,
   props: {
     modelValue: { type: Array, default: () => [] },
     columns: { type: Array, default: () => [] },
@@ -378,11 +407,11 @@ const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i =
   },
   emits: ["update:modelValue", "sort", "click"],
   setup(e, { expose: t, emit: l }) {
-    const i = l, s = fe(), a = e, v = {}, S = p(typeof a.sorter == "function" ? a.sorter : ee), u = p(Ce(a.columns)), r = p("asc"), d = p(a.modelValue), C = p(v), K = p(!1), x = ke(12), j = B(() => d.value.length > 0), N = B(() => {
-      if (!a.hideEmptyColumns)
+    const n = l, s = fe(), i = e, v = {}, V = p(typeof i.sorter == "function" ? i.sorter : ee), u = p(Ae(i.columns)), r = p("asc"), d = p(i.modelValue), C = p(v), M = p(!1), F = ke(12), j = B(() => d.value.length > 0), N = B(() => {
+      if (!i.hideEmptyColumns)
         return [];
       let o = [];
-      return a.columns.forEach((c) => {
+      return i.columns.forEach((c) => {
         let m = c.key, k = !1;
         d.value.forEach((g) => {
           if (typeof g.checkEmpty == "function")
@@ -390,15 +419,15 @@ const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i =
           g[m] && (k = !0);
         }), k || o.push(m);
       }), o;
-    }), f = B(() => a.columns.filter((o) => !o.hidden)), z = B(() => a.columns.filter((o) => o.hidden)), ae = B(() => {
+    }), f = B(() => i.columns.filter((o) => !o.hidden)), z = B(() => i.columns.filter((o) => o.hidden)), ie = B(() => {
       let o = f.value.length + 1;
-      return a.sortable && ++o, o;
-    }), J = B(() => z.value.length > 0 && !a.sortable), ne = B(() => a.columns.map((o) => o.key)), q = B(() => {
+      return i.sortable && ++o, o;
+    }), J = B(() => z.value.length > 0 && !i.sortable), ae = B(() => i.columns.map((o) => o.key)), q = B(() => {
       let o = [];
       for (let c in s)
-        ne.value.indexOf(c) !== -1 && o.push(c);
+        ae.value.indexOf(c) !== -1 && o.push(c);
       return o;
-    }), ie = (o) => {
+    }), ne = (o) => {
       let c = o.target;
       if (typeof c.dataset.column > "u")
         do
@@ -407,9 +436,9 @@ const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i =
       if (c.tagName === "TD" && (c = c.parentNode, c = c.dataset.i, typeof c < "u"))
         return d.value[c];
     }, G = (o) => C.value["tr_" + o] === !0, Z = (o) => {
-      !o || o.sortable && (d.value = d.value.sort((c, m) => S.value(c, m, o, r.value)), r.value = r.value === "asc" ? "desc" : "asc", u.value = o.key, i("sort", [u.value, r.value]));
+      !o || o.sortable && (d.value = d.value.sort((c, m) => V.value(c, m, o, r.value)), r.value = r.value === "asc" ? "desc" : "asc", u.value = o.key, n("sort", [u.value, r.value]));
     }, P = (o, c) => {
-      i("click", o, c);
+      n("click", o, c);
     }, Q = (o, c) => {
       let m = "tr_" + c.value.i;
       C.value[m] = typeof C.value[m] > "u" ? !0 : !C.value[m];
@@ -417,49 +446,49 @@ const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i =
       d.value[c] = o;
     };
     return he(() => {
-      Z(pe(a.columns, u.value));
-    }), T(() => a.modelValue, (o) => d.value = o), T(d, (o) => {
-      i("update:modelValue", o);
-    }), t({ getItemByEvent: ie }), (o, c) => j.value ? (n(), h("div", {
+      Z(we(i.columns, u.value));
+    }), T(() => i.modelValue, (o) => d.value = o), T(d, (o) => {
+      n("update:modelValue", o);
+    }), t({ getItemByEvent: ne }), (o, c) => j.value ? (a(), h("div", {
       key: 0,
       class: "lkt-table",
       "data-sortable": e.sortable
     }, [
-      D("table", null, [
-        D("thead", null, [
-          D("tr", null, [
-            e.sortable ? (n(), h("th", xe)) : E("", !0),
-            J.value ? (n(), h("th", Oe)) : E("", !0),
-            (n(!0), h(I, null, $(f.value, (m) => (n(), h(I, null, [
-              N.value.indexOf(m.key) === -1 ? (n(), h("th", {
+      $("table", null, [
+        $("thead", null, [
+          $("tr", null, [
+            e.sortable ? (a(), h("th", Ke)) : D("", !0),
+            J.value ? (a(), h("th", je)) : D("", !0),
+            (a(!0), h(A, null, E(f.value, (m) => (a(), h(A, null, [
+              N.value.indexOf(m.key) === -1 ? (a(), h("th", {
                 key: 0,
                 "data-column": m.key,
                 "data-sortable": m.sortable === !0,
                 "data-sort": m.sortable === !0 && u.value === m.key ? r.value : "",
-                colspan: V(be)(m, e.columns.length, d.value),
+                colspan: S(Ve)(m, e.columns.length, d.value),
                 title: m.label,
                 onClick: (k) => Z(m)
               }, [
-                D("div", null, U(m.label), 1)
-              ], 8, Ue)) : E("", !0)
+                $("div", null, O(m.label), 1)
+              ], 8, ze)) : D("", !0)
             ], 64))), 256))
           ])
         ]),
-        e.sortable ? (n(), b(V(ye), {
+        e.sortable ? (a(), b(S(ye), {
           key: 0,
           modelValue: d.value,
           "onUpdate:modelValue": c[0] || (c[0] = (m) => d.value = m),
           move: e.checkValidDrag,
           itemKey: e.draggableItemKey,
-          onStart: c[1] || (c[1] = (m) => K.value = !0),
-          onEnd: c[2] || (c[2] = (m) => K.value = !1),
+          onStart: c[1] || (c[1] = (m) => M.value = !0),
+          onEnd: c[2] || (c[2] = (m) => M.value = !1),
           tag: "tbody",
           class: "lkt-sortable-table",
           handle: "[data-handle-drag]"
         }, {
-          item: O(({ element: m, index: k }) => [
-            (n(), b(te, {
-              key: V(x) + "-" + k,
+          item: R(({ element: m, index: k }) => [
+            (a(), b(te, {
+              key: S(F) + "-" + k,
               i: k,
               item: m,
               "display-hidden-columns-indicator": J.value,
@@ -471,22 +500,22 @@ const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i =
               onClick: P,
               onShow: Q
             }, W({ _: 2 }, [
-              $(q.value, (g) => ({
+              E(q.value, (g) => ({
                 name: g,
-                fn: O((A) => [
-                  R(o.$slots, g, {
-                    item: A.item,
-                    value: A.value,
-                    column: A.column
+                fn: R((L) => [
+                  H(o.$slots, g, {
+                    item: L.item,
+                    value: L.value,
+                    column: L.column
                   })
                 ])
               }))
             ]), 1032, ["i", "item", "display-hidden-columns-indicator", "is-draggable", "sortable", "visible-columns", "empty-columns", "hidden-is-visible"]))
           ]),
           _: 3
-        }, 8, ["modelValue", "move", "itemKey"])) : (n(), h("tbody", Fe, [
-          (n(!0), h(I, null, $(d.value, (m, k) => (n(), b(te, {
-            key: V(x) + "-" + k,
+        }, 8, ["modelValue", "move", "itemKey"])) : (a(), h("tbody", Je, [
+          (a(!0), h(A, null, E(d.value, (m, k) => (a(), b(te, {
+            key: S(F) + "-" + k,
             i: k,
             item: m,
             "display-hidden-columns-indicator": J.value,
@@ -499,23 +528,23 @@ const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i =
             onShow: Q,
             onEdited: oe
           }, W({ _: 2 }, [
-            $(q.value, (g) => ({
+            E(q.value, (g) => ({
               name: g,
-              fn: O((A) => [
-                R(o.$slots, g, {
-                  item: A.item,
-                  value: A.value,
-                  column: A.column
+              fn: R((L) => [
+                H(o.$slots, g, {
+                  item: L.item,
+                  value: L.value,
+                  column: L.column
                 })
               ])
             }))
           ]), 1032, ["i", "item", "display-hidden-columns-indicator", "is-draggable", "sortable", "visible-columns", "empty-columns", "hidden-is-visible"]))), 128)),
-          z.value.length > 0 ? (n(!0), h(I, { key: 0 }, $(d.value, (m, k) => (n(), b(He, {
-            key: V(x) + "-" + k,
+          z.value.length > 0 ? (a(!0), h(A, { key: 0 }, E(d.value, (m, k) => (a(), b(Ue, {
+            key: S(F) + "-" + k,
             i: k,
             item: m,
             "hidden-columns": z.value,
-            "hidden-columns-col-span": ae.value,
+            "hidden-columns-col-span": ie.value,
             "is-draggable": e.draggableChecker ? e.draggableChecker(m) : !0,
             sortable: e.sortable,
             "visible-columns": f.value,
@@ -524,38 +553,39 @@ const We = (e, t, l = !0) => w(new L(e, t).setIsSortable(l)), Xe = (e, t, l, i =
             onClick: P,
             onShow: Q
           }, W({ _: 2 }, [
-            $(q.value, (g) => ({
+            E(q.value, (g) => ({
               name: g,
-              fn: O((A) => [
-                R(o.$slots, g, {
-                  item: A.item,
-                  value: A.value,
-                  column: A.column
+              fn: R((L) => [
+                H(o.$slots, g, {
+                  item: L.item,
+                  value: L.value,
+                  column: L.column
                 })
               ])
             }))
-          ]), 1032, ["i", "item", "hidden-columns", "hidden-columns-col-span", "is-draggable", "sortable", "visible-columns", "empty-columns", "hidden-is-visible"]))), 128)) : E("", !0)
+          ]), 1032, ["i", "item", "hidden-columns", "hidden-columns-col-span", "is-draggable", "sortable", "visible-columns", "empty-columns", "hidden-is-visible"]))), 128)) : D("", !0)
         ]))
       ])
-    ], 8, Re)) : o.$slots["no-items"] ? (n(), h("div", Ke, [
-      R(o.$slots, "no-items")
-    ])) : E("", !0);
+    ], 8, Me)) : o.$slots["no-items"] ? (a(), h("div", qe, [
+      H(o.$slots, "no-items")
+    ])) : D("", !0);
   }
-}), it = {
+});
+const yt = {
   install: (e) => {
-    e.component("lkt-table", je);
+    e.component("lkt-table") === void 0 && e.component("lkt-table", Pe), e.component("lkt-loader") === void 0 && e.use(Se), e.component("lkt-field-select") === void 0 && e.use(pe), e.component("lkt-field-text") === void 0 && e.use(ge), e.component("lkt-field-check") === void 0 && e.use(be), e.component("lkt-field-switch") === void 0 && e.use(Ce);
   }
 };
 export {
-  Ye as createActionColumn,
-  tt as createCheckColumn,
-  We as createColumn,
-  _e as createEmailColumn,
-  nt as createHiddenColumn,
-  Xe as createLinkColumn,
-  at as createSelectColumn,
-  lt as createSwitchColumn,
-  et as createTelColumn,
-  Ze as createTextColumn,
-  it as default
+  st as createActionColumn,
+  ct as createCheckColumn,
+  nt as createColumn,
+  rt as createEmailColumn,
+  ht as createHiddenColumn,
+  ot as createLinkColumn,
+  ft as createSelectColumn,
+  mt as createSwitchColumn,
+  dt as createTelColumn,
+  ut as createTextColumn,
+  yt as default
 };

package/dist/lkt-table.umd.js

@@ -1 +1 @@
-(function(k,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuedraggable"),require("lkt-http-client"),require("lkt-events"),require("lkt-string-tools")):typeof define=="function"&&define.amd?define(["exports","vue","vuedraggable","lkt-http-client","lkt-events","lkt-string-tools"],e):(k=typeof globalThis<"u"?globalThis:k||self,e(k.LktTable={},k.Vue,k.draggable,k.lktHttpClient,k.LktEvents,k.LktStringTools))})(this,function(k,e,S,x,I,K){"use strict";var $e=Object.defineProperty;var Te=(k,e,S)=>e in k?$e(k,e,{enumerable:!0,configurable:!0,writable:!0,value:S}):k[e]=S;var h=(k,e,S)=>(Te(k,typeof e!="symbol"?e+"":e,S),S);const z=(t=>t&&typeof t=="object"&&"default"in t?t:{default:t})(S);class V{constructor(l="",n=""){h(this,"key");h(this,"label");h(this,"sortable");h(this,"hidden");h(this,"editable");h(this,"formatter");h(this,"checkEmpty");h(this,"colspan");h(this,"type");h(this,"link");h(this,"action");h(this,"options");h(this,"resource");h(this,"resourceData");h(this,"isMultiple");h(this,"isLoading");h(this,"resourceLoaded");this.key=l,this.label=n,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}setIsSortable(l=!0){return this.sortable=l,this}setIsEditable(l=!0){return this.editable=l,this}setIsHidden(l=!0){return this.hidden=l,this}setIsLoading(l=!0){return this.isLoading=l,this}setFormatter(l=void 0){return this.formatter=l,this}setEmptyChecker(l=void 0){return this.checkEmpty=l,this}setColSpan(l=void 0){return this.colspan=void 0,this}getHref(l){return typeof this.link=="function"?this.link(l):this.link}doAction(l){if(typeof this.action=="function")return this.action(l);console.warn("No action defined")}defineAsLink(l){return this.type="link",this.link=l,this}defineAsText(){return this.type="text",this}defineAsEmail(){return this.type="email",this}defineAsTel(){return this.type="tel",this}defineAsInt(){return this.type="int",this}defineAsFloat(){return this.type="float",this}defineAsCheck(){return this.type="check",this}defineAsSwitch(){return this.type="switch",this}defineAsAction(l){return this.type="action",this.action=l,this}defineAsSelect(l){return this.type="select",this.options=l,this}showLoading(){return this.resource!==""&&!this.resourceLoaded}hasToLoadResource(){return this.resource!==""&&!this.resourceLoaded&&!this.isLoading}setIsMultiple(l=!0){return this.isMultiple=l,this}setResource(l){return this.resource=l,this}setResourceData(l){return this.resourceData=l,this}async loadResource(){if(this.resourceLoaded)return this;if(!this.resource)return this;try{this.isLoading=!0;const l=await x.httpCall(this.resource,this.resourceData);this.options=l.data,this.isLoading=!1,this.resourceLoaded=!0}catch{this.isLoading=!1}return this}}const J=(t,l,n=!0)=>e.reactive(new V(t,l).setIsSortable(n)),P=(t,l,n,o=!0)=>e.reactive(new V(t,l).setIsSortable(o).defineAsLink(n)),G=(t,l,n,o=!0)=>e.reactive(new V(t,l).setIsSortable(o).defineAsAction(n)),Q=(t,l,n=!0)=>e.reactive(new V(t,l).setIsSortable(n).defineAsText()),W=(t,l,n=!0)=>e.reactive(new V(t,l).setIsSortable(n).defineAsEmail()),X=(t,l,n=!0)=>e.reactive(new V(t,l).setIsSortable(n).defineAsTel()),Y=(t,l,n=!0)=>e.reactive(new V(t,l).setIsSortable(n).defineAsCheck()),Z=(t,l,n=!0)=>e.reactive(new V(t,l).setIsSortable(n).defineAsSwitch()),v=(t,l,n,o=!0)=>e.reactive(new V(t,l).setIsSortable(o).defineAsSelect(n)),_=(t,l,n=!0)=>e.reactive(new V(t,l).setIsSortable(n).setIsHidden(!0)),U=(t,l,n,o)=>{if(!n)return 0;let i=t[n.key],a=l[n.key];if(o==="asc"){if(i>a)return 1;if(a>i)return-1}else{if(i>a)return-1;if(a>i)return 1}return 0},L=(t,l,n)=>t.formatter&&typeof t.formatter=="function"?t.formatter(l[t.key],l,t,n):l[t.key],ee=(t,l,n)=>{if(!t.colspan)return-1;let o=l;return n.forEach(i=>{let a=N(t,i);a>0&&a<o&&(o=a)}),o},N=(t,l)=>t.colspan===!1?!1:typeof t.colspan=="function"?t.colspan(l):t.colspan,te=(t,l,n)=>{if(typeof t!="object"||!t.key||l.indexOf(t.key)>-1)return!1;let o=N(t,n);return typeof t.colspan>"u"?!0:(typeof t.colspan<"u"&&(typeof t.colspan=="function"?o=parseInt(t.colspan()):o=parseInt(t.colspan)),o>0)},le=(t=[])=>{if(t.length>0){for(let l=0;l<t.length;++l)if(t[l].sortable)return t[l].key}return""},ne=(t,l)=>{if(t.length>0){for(let n=0;n<t.length;++n)if(t[n].key===l)return t[n]}return null},ae={name:"LktTableCell",inheritAttrs:!1},j=e.defineComponent({...ae,props:{modelValue:{type:Object,default:()=>({})},column:{type:Object,default:()=>({})},i:{type:[Number],default:0}},emits:["edited"],setup(t,{emit:l}){const n=l,o=t,i=e.ref(o.modelValue),a=e.ref(i.value[o.column.key]),y=e.ref(null),C=e.ref(o.column.showLoading());return e.watch(a,()=>{const s=JSON.parse(JSON.stringify(i.value));s[o.column.key]=a.value,n("edited",s,o.i)}),e.watch(()=>o.modelValue,s=>{i.value=s,a.value=i.value[o.column.key]}),e.watch(()=>o.column,()=>{o.column.resourceLoaded&&e.nextTick(()=>C.value=!1)},{deep:!0}),o.column.hasToLoadResource()&&o.column.loadResource(),(s,d)=>{const c=e.resolveComponent("router-link"),g=e.resolveComponent("lkt-field-text"),A=e.resolveComponent("lkt-field-check"),w=e.resolveComponent("lkt-field-switch"),$=e.resolveComponent("lkt-loader"),E=e.resolveComponent("lkt-field-select");return t.column.type==="link"?(e.openBlock(),e.createBlock(c,{key:0,to:t.column.getHref(i.value)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(L)(t.column,i.value,t.i)),1)]),_:1},8,["to"])):t.column.type==="action"?(e.openBlock(),e.createElementBlock("a",{key:1,href:"#",onClick:d[0]||(d[0]=f=>t.column.doAction(i.value))},e.toDisplayString(e.unref(L)(t.column,i.value,t.i)),1)):t.column.type==="text"?(e.openBlock(),e.createBlock(g,{key:2,"read-mode":!t.column.editable,ref:f=>y.value=f,modelValue:a.value,"onUpdate:modelValue":d[1]||(d[1]=f=>a.value=f)},null,8,["read-mode","modelValue"])):t.column.type==="email"?(e.openBlock(),e.createBlock(g,{key:3,"read-mode":!t.column.editable,ref:f=>y.value=f,"is-email":"",modelValue:a.value,"onUpdate:modelValue":d[2]||(d[2]=f=>a.value=f)},null,8,["read-mode","modelValue"])):t.column.type==="tel"?(e.openBlock(),e.createBlock(g,{key:4,"read-mode":!t.column.editable,ref:f=>y.value=f,"is-tel":"",modelValue:a.value,"onUpdate:modelValue":d[3]||(d[3]=f=>a.value=f)},null,8,["read-mode","modelValue"])):t.column.type==="check"?(e.openBlock(),e.createBlock(A,{key:5,"read-mode":!t.column.editable,ref:f=>y.value=f,modelValue:a.value,"onUpdate:modelValue":d[4]||(d[4]=f=>a.value=f)},null,8,["read-mode","modelValue"])):t.column.type==="switch"?(e.openBlock(),e.createBlock(w,{key:6,"read-mode":!t.column.editable,ref:f=>y.value=f,modelValue:a.value,"onUpdate:modelValue":d[5]||(d[5]=f=>a.value=f)},null,8,["read-mode","modelValue"])):t.column.type==="select"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:7},[C.value?(e.openBlock(),e.createBlock($,{key:0})):(e.openBlock(),e.createBlock(E,{key:1,"read-mode":!t.column.editable,ref:f=>y.value=f,modelValue:a.value,"onUpdate:modelValue":d[6]||(d[6]=f=>a.value=f),resource:t.column.resource,"resource-data":t.column.resourceData,options:t.column.options,multiple:t.column.isMultiple},null,8,["read-mode","modelValue","resource","resource-data","options","multiple"]))],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:8},[e.createTextVNode(e.toDisplayString(e.unref(L)(t.column,i.value,t.i)),1)],64))}}}),oe=["data-i","data-handle-drag"],re={key:0,"data-role":"drag-indicator"},ie={key:1,"data-role":"invalid-drag-indicator"},se=["data-column","colspan","title","onClick"],de={name:"LktTableRow",inheritAttrs:!1},M=e.defineComponent({...de,props:{isDraggable:{type:Boolean,default:!0},sortable:{type:Boolean,default:!0},i:{type:[Number],default:0},displayHiddenColumnsIndicator:{type:Boolean,default:!1},visibleColumns:{type:Array,default:()=>[]},emptyColumns:{type:Array,default:()=>[]},hiddenIsVisible:{type:Boolean,default:!1},item:{type:Object,default:()=>({})}},emits:["edited","click","show"],setup(t,{emit:l}){const n=l,o=t,i=e.ref(o.item),a=(s,d,c)=>{n("click",s,I.createLktEvent("",{item:d,column:c}))},y=(s,d)=>{n("show",s,I.createLktEvent("",{i:d}))},C=(s,d)=>{i.value=s};return e.watch(()=>o.item,s=>i.value=s),e.watch(i,()=>n("edited",i.value,o.i)),(s,d)=>(e.openBlock(),e.createElementBlock("tr",{"data-i":t.i,"data-handle-drag":t.isDraggable},[t.sortable&&t.isDraggable?(e.openBlock(),e.createElementBlock("td",re)):t.sortable?(e.openBlock(),e.createElementBlock("td",ie)):e.createCommentVNode("",!0),t.displayHiddenColumnsIndicator?(e.openBlock(),e.createElementBlock("td",{key:2,onClick:d[0]||(d[0]=c=>y(c,t.i)),"data-role":"show-more",class:e.normalizeClass(t.hiddenIsVisible?"state-open":"")},null,2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.visibleColumns,c=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.unref(te)(c,t.emptyColumns,t.item)?(e.openBlock(),e.createElementBlock("td",{key:0,"data-column":c.key,colspan:e.unref(N)(c,t.item),title:e.unref(L)(c,t.item,t.i),onClick:g=>a(g,t.item,c)},[s.$slots[c.key]?e.renderSlot(s.$slots,c.key,{key:0,value:t.item[c.key],item:t.item,column:c,i:t.i}):t.item?(e.openBlock(),e.createBlock(j,{key:1,column:c,modelValue:i.value,"onUpdate:modelValue":d[1]||(d[1]=g=>i.value=g),i:t.i,onEdited:C},null,8,["column","modelValue","i"])):e.createCommentVNode("",!0)],8,se)):e.createCommentVNode("",!0)],64))),256))],8,oe))}}),ce={"data-role":"hidden-row"},ue=["colspan"],me=["data-column"],fe=["data-i"],ke=["data-column","title","onClick"],he={name:"LktHiddenRow",inheritAttrs:!1},ye=e.defineComponent({...he,props:{isDraggable:{type:Boolean,default:!0},sortable:{type:Boolean,default:!0},i:{type:[Number],default:0},hiddenColumnsColSpan:{type:Number,default:0},visibleColumns:{type:Array,default:()=>[]},hiddenColumns:{type:Array,default:()=>[]},emptyColumns:{type:Array,default:()=>[]},hiddenIsVisible:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})}},emits:["update:modelValue","click"],setup(t,{emit:l}){const n=l,o=t,i=e.ref(o.modelValue),a=(y,C,s)=>{n("click",y,I.createLktEvent("",{item:C,column:s}))};return e.watch(()=>o.modelValue,y=>i.value=y),e.watch(i,()=>n("update:modelValue",i.value)),(y,C)=>e.withDirectives((e.openBlock(),e.createElementBlock("tr",ce,[e.createElementVNode("td",{colspan:t.hiddenColumnsColSpan},[e.createElementVNode("table",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hiddenColumns,s=>(e.openBlock(),e.createElementBlock("th",{"data-column":s.key},[e.createElementVNode("div",null,e.toDisplayString(s.label),1)],8,me))),256))]),e.createElementVNode("tr",{"data-i":t.i},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hiddenColumns,(s,d)=>(e.openBlock(),e.createElementBlock("td",{"data-column":s.key,title:e.unref(L)(s,i.value,d),onClick:c=>a(c,i.value,s)},[y.$slots[s.key]?e.renderSlot(y.$slots,s.key,{key:0,value:i.value[s.key],item:i.value,column:s,i:d}):(e.openBlock(),e.createBlock(j,{key:1,column:s,modelValue:i.value,"onUpdate:modelValue":C[0]||(C[0]=c=>i.value=c),i:d},null,8,["column","modelValue","i"]))],8,ke))),256))],8,fe)])],8,ue)],512)),[[e.vShow,t.hiddenIsVisible]])}}),be=["data-sortable"],pe={key:0,"data-role":"drag-indicator"},ge={key:1},Ce=["data-column","data-sortable","data-sort","colspan","title","onClick"],Be={key:1},Ve={key:1,class:"lkt-empty-table"},Se={name:"LktTable",inheritAttrs:!1},Ee=e.defineComponent({...Se,props:{modelValue:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},sorter:{type:Function,default:U},sortable:{type:Boolean,default:!1},hideEmptyColumns:{type:Boolean,default:!1},draggableChecker:{type:Function,default:t=>!0},checkValidDrag:{type:Function,default:t=>!0},draggableItemKey:{type:String,default:"name"}},emits:["update:modelValue","sort","click"],setup(t,{expose:l,emit:n}){const o=n,i=e.useSlots(),a=t,y={},C=e.ref(typeof a.sorter=="function"?a.sorter:U),s=e.ref(le(a.columns)),d=e.ref("asc"),c=e.ref(a.modelValue),g=e.ref(y),A=e.ref(!1),w=K.generateRandomString(12),$=e.computed(()=>c.value.length>0),E=e.computed(()=>{if(!a.hideEmptyColumns)return[];let r=[];return a.columns.forEach(u=>{let m=u.key,b=!1;c.value.forEach(p=>{if(typeof p.checkEmpty=="function")return p.checkEmpty(p);p[m]&&(b=!0)}),b||r.push(m)}),r}),f=e.computed(()=>a.columns.filter(r=>!r.hidden)),T=e.computed(()=>a.columns.filter(r=>r.hidden)),we=e.computed(()=>{let r=f.value.length+1;return a.sortable&&++r,r}),D=e.computed(()=>T.value.length>0&&!a.sortable),Ae=e.computed(()=>a.columns.map(r=>r.key)),F=e.computed(()=>{let r=[];for(let u in i)Ae.value.indexOf(u)!==-1&&r.push(u);return r}),Ie=r=>{let u=r.target;if(typeof u.dataset.column>"u")do u=u.parentNode;while(typeof u.dataset.column>"u"&&u.tagName!=="TABLE"&&u.tagName!=="body");if(u.tagName==="TD"&&(u=u.parentNode,u=u.dataset.i,typeof u<"u"))return c.value[u]},H=r=>g.value["tr_"+r]===!0,q=r=>{!r||r.sortable&&(c.value=c.value.sort((u,m)=>C.value(u,m,r,d.value)),d.value=d.value==="asc"?"desc":"asc",s.value=r.key,o("sort",[s.value,d.value]))},O=(r,u)=>{o("click",r,u)},R=(r,u)=>{let m="tr_"+u.value.i;g.value[m]=typeof g.value[m]>"u"?!0:!g.value[m]},Ne=(r,u)=>{c.value[u]=r};return e.onMounted(()=>{q(ne(a.columns,s.value))}),e.watch(()=>a.modelValue,r=>c.value=r),e.watch(c,r=>{o("update:modelValue",r)}),l({getItemByEvent:Ie}),(r,u)=>$.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"lkt-table","data-sortable":t.sortable},[e.createElementVNode("table",null,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[t.sortable?(e.openBlock(),e.createElementBlock("th",pe)):e.createCommentVNode("",!0),D.value?(e.openBlock(),e.createElementBlock("th",ge)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,m=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[E.value.indexOf(m.key)===-1?(e.openBlock(),e.createElementBlock("th",{key:0,"data-column":m.key,"data-sortable":m.sortable===!0,"data-sort":m.sortable===!0&&s.value===m.key?d.value:"",colspan:e.unref(ee)(m,t.columns.length,c.value),title:m.label,onClick:b=>q(m)},[e.createElementVNode("div",null,e.toDisplayString(m.label),1)],8,Ce)):e.createCommentVNode("",!0)],64))),256))])]),t.sortable?(e.openBlock(),e.createBlock(e.unref(z.default),{key:0,modelValue:c.value,"onUpdate:modelValue":u[0]||(u[0]=m=>c.value=m),move:t.checkValidDrag,itemKey:t.draggableItemKey,onStart:u[1]||(u[1]=m=>A.value=!0),onEnd:u[2]||(u[2]=m=>A.value=!1),tag:"tbody",class:"lkt-sortable-table",handle:"[data-handle-drag]"},{item:e.withCtx(({element:m,index:b})=>[(e.openBlock(),e.createBlock(M,{key:e.unref(w)+"-"+b,i:b,item:m,"display-hidden-columns-indicator":D.value,"is-draggable":t.draggableChecker?t.draggableChecker(m):!0,sortable:t.sortable,"visible-columns":f.value,"empty-columns":E.value,"hidden-is-visible":H(b),onClick:O,onShow:R},e.createSlots({_:2},[e.renderList(F.value,p=>({name:p,fn:e.withCtx(B=>[e.renderSlot(r.$slots,p,{item:B.item,value:B.value,column:B.column})])}))]),1032,["i","item","display-hidden-columns-indicator","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))]),_:3},8,["modelValue","move","itemKey"])):(e.openBlock(),e.createElementBlock("tbody",Be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(m,b)=>(e.openBlock(),e.createBlock(M,{key:e.unref(w)+"-"+b,i:b,item:m,"display-hidden-columns-indicator":D.value,"is-draggable":t.draggableChecker?t.draggableChecker(m):!0,sortable:t.sortable,"visible-columns":f.value,"empty-columns":E.value,"hidden-is-visible":H(b),onClick:O,onShow:R,onEdited:Ne},e.createSlots({_:2},[e.renderList(F.value,p=>({name:p,fn:e.withCtx(B=>[e.renderSlot(r.$slots,p,{item:B.item,value:B.value,column:B.column})])}))]),1032,["i","item","display-hidden-columns-indicator","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))),128)),T.value.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(c.value,(m,b)=>(e.openBlock(),e.createBlock(ye,{key:e.unref(w)+"-"+b,i:b,item:m,"hidden-columns":T.value,"hidden-columns-col-span":we.value,"is-draggable":t.draggableChecker?t.draggableChecker(m):!0,sortable:t.sortable,"visible-columns":f.value,"empty-columns":E.value,"hidden-is-visible":H(b),onClick:O,onShow:R},e.createSlots({_:2},[e.renderList(F.value,p=>({name:p,fn:e.withCtx(B=>[e.renderSlot(r.$slots,p,{item:B.item,value:B.value,column:B.column})])}))]),1032,["i","item","hidden-columns","hidden-columns-col-span","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))),128)):e.createCommentVNode("",!0)]))])],8,be)):r.$slots["no-items"]?(e.openBlock(),e.createElementBlock("div",Ve,[e.renderSlot(r.$slots,"no-items")])):e.createCommentVNode("",!0)}}),Le={install:t=>{t.component("lkt-table",Ee)}};k.createActionColumn=G,k.createCheckColumn=Y,k.createColumn=J,k.createEmailColumn=W,k.createHiddenColumn=_,k.createLinkColumn=P,k.createSelectColumn=v,k.createSwitchColumn=Z,k.createTelColumn=X,k.createTextColumn=Q,k.default=Le,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuedraggable"),require("lkt-http-client"),require("lkt-events"),require("lkt-string-tools"),require("lkt-field-check"),require("lkt-field-text"),require("lkt-field-switch"),require("lkt-field-select"),require("lkt-loader")):typeof define=="function"&&define.amd?define(["exports","vue","vuedraggable","lkt-http-client","lkt-events","lkt-string-tools","lkt-field-check","lkt-field-text","lkt-field-switch","lkt-field-select","lkt-loader"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.LktTable={},m.Vue,m.draggable,m.lktHttpClient,m.LktEvents,m.LktStringTools,m.LktFieldCheck,m.LktFieldText,m.LktFieldSwitch,m.LktFieldSelect,m.LktLoader))})(this,function(m,e,V,K,I,z,J,P,G,Q,W){"use strict";var je=Object.defineProperty;var Ke=(m,e,V)=>e in m?je(m,e,{enumerable:!0,configurable:!0,writable:!0,value:V}):m[e]=V;var h=(m,e,V)=>(Ke(m,typeof e!="symbol"?e+"":e,V),V);const E=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},X=E(V),Y=E(J),Z=E(P),v=E(G),_=E(Q),ee=E(W);class S{constructor(l="",n=""){h(this,"key");h(this,"label");h(this,"sortable");h(this,"hidden");h(this,"editable");h(this,"formatter");h(this,"checkEmpty");h(this,"colspan");h(this,"type");h(this,"link");h(this,"action");h(this,"options");h(this,"resource");h(this,"resourceData");h(this,"isMultiple");h(this,"isLoading");h(this,"resourceLoaded");h(this,"valueSlot");h(this,"editSlot");h(this,"multipleDisplay");h(this,"multipleDisplayEdition");this.key=l,this.label=n,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=""}setIsSortable(l=!0){return this.sortable=l,this}setIsEditable(l=!0){return this.editable=l,this}setIsHidden(l=!0){return this.hidden=l,this}setIsLoading(l=!0){return this.isLoading=l,this}setFormatter(l=void 0){return this.formatter=l,this}setEmptyChecker(l=void 0){return this.checkEmpty=l,this}setColSpan(l=void 0){return this.colspan=void 0,this}getHref(l){return typeof this.link=="function"?this.link(l):this.link}doAction(l){if(typeof this.action=="function")return this.action(l);console.warn("No action defined")}defineAsLink(l){return this.type="link",this.link=l,this}defineAsText(){return this.type="text",this}defineAsEmail(){return this.type="email",this}defineAsTel(){return this.type="tel",this}defineAsInt(){return this.type="int",this}defineAsFloat(){return this.type="float",this}defineAsCheck(){return this.type="check",this}defineAsSwitch(){return this.type="switch",this}defineAsAction(l){return this.type="action",this.action=l,this}defineAsSelect(l){return this.type="select",this.options=l,this}showLoading(){return this.resource!==""&&!this.resourceLoaded}hasToLoadResource(){return this.resource!==""&&!this.resourceLoaded&&!this.isLoading}setIsMultiple(l=!0){return this.isMultiple=l,this}setResource(l){return this.resource=l,this}setResourceData(l){return this.resourceData=l,this}async loadResource(){if(this.resourceLoaded)return this;if(!this.resource)return this;try{this.isLoading=!0;const l=await K.httpCall(this.resource,this.resourceData);this.options=l.data,this.isLoading=!1,this.resourceLoaded=!0}catch{this.isLoading=!1}return this}setEditSlot(l){return this.editSlot=l,this}setValueSlot(l){return this.valueSlot=l,this}setMultipleDisplay(l){return this.multipleDisplay=l,this}setMultipleDisplayEdition(l){return this.multipleDisplayEdition=l,this}}const te=(t,l,n=!0)=>e.reactive(new S(t,l).setIsSortable(n)),le=(t,l,n,a=!0)=>e.reactive(new S(t,l).setIsSortable(a).defineAsLink(n)),ne=(t,l,n,a=!0)=>e.reactive(new S(t,l).setIsSortable(a).defineAsAction(n)),oe=(t,l,n=!0)=>e.reactive(new S(t,l).setIsSortable(n).defineAsText()),ae=(t,l,n=!0)=>e.reactive(new S(t,l).setIsSortable(n).defineAsEmail()),ie=(t,l,n=!0)=>e.reactive(new S(t,l).setIsSortable(n).defineAsTel()),re=(t,l,n=!0)=>e.reactive(new S(t,l).setIsSortable(n).defineAsCheck()),se=(t,l,n=!0)=>e.reactive(new S(t,l).setIsSortable(n).defineAsSwitch()),de=(t,l,n,a=!0)=>e.reactive(new S(t,l).setIsSortable(a).defineAsSelect(n)),ce=(t,l,n=!0)=>e.reactive(new S(t,l).setIsSortable(n).setIsHidden(!0)),O=(t,l,n,a)=>{if(!n)return 0;let r=t[n.key],o=l[n.key];if(a==="asc"){if(r>o)return 1;if(o>r)return-1}else{if(r>o)return-1;if(o>r)return 1}return 0},w=(t,l,n)=>t.formatter&&typeof t.formatter=="function"?t.formatter(l[t.key],l,t,n):l[t.key],ue=(t,l,n)=>{if(!t.colspan)return-1;let a=l;return n.forEach(r=>{let o=N(t,r);o>0&&o<a&&(a=o)}),a},N=(t,l)=>t.colspan===!1?!1:typeof t.colspan=="function"?t.colspan(l):t.colspan,me=(t,l,n)=>{if(typeof t!="object"||!t.key||l.indexOf(t.key)>-1)return!1;let a=N(t,n);return typeof t.colspan>"u"?!0:(typeof t.colspan<"u"&&(typeof t.colspan=="function"?a=parseInt(t.colspan()):a=parseInt(t.colspan)),a>0)},fe=(t=[])=>{if(t.length>0){for(let l=0;l<t.length;++l)if(t[l].sortable)return t[l].key}return""},ke=(t,l)=>{if(t.length>0){for(let n=0;n<t.length;++n)if(t[n].key===l)return t[n]}return null},he={name:"LktTableCell",inheritAttrs:!1},R=e.defineComponent({...he,props:{modelValue:{type:Object,default:()=>({})},column:{type:Object,default:()=>({})},i:{type:[Number],default:0}},emits:["edited"],setup(t,{emit:l}){const n=l,a=t,r=e.ref(a.modelValue),o=e.ref(r.value[a.column.key]),y=e.ref(null),g=e.ref(a.column.showLoading());return e.watch(o,()=>{const s=JSON.parse(JSON.stringify(r.value));s[a.column.key]=o.value,n("edited",s,a.i)}),e.watch(()=>a.modelValue,s=>{r.value=s,o.value=r.value[a.column.key]}),e.watch(()=>a.column,()=>{a.column.resourceLoaded&&e.nextTick(()=>g.value=!1)},{deep:!0}),a.column.hasToLoadResource()&&a.column.loadResource(),(s,d)=>{const c=e.resolveComponent("router-link"),C=e.resolveComponent("lkt-field-text"),D=e.resolveComponent("lkt-field-check"),A=e.resolveComponent("lkt-field-switch"),T=e.resolveComponent("lkt-loader"),L=e.resolveComponent("lkt-field-select");return t.column.type==="link"?(e.openBlock(),e.createBlock(c,{key:0,to:t.column.getHref(r.value)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(w)(t.column,r.value,t.i)),1)]),_:1},8,["to"])):t.column.type==="action"?(e.openBlock(),e.createElementBlock("a",{key:1,href:"#",onClick:d[0]||(d[0]=k=>t.column.doAction(r.value))},e.toDisplayString(e.unref(w)(t.column,r.value,t.i)),1)):t.column.type==="text"?(e.openBlock(),e.createBlock(C,{key:2,"read-mode":!t.column.editable,ref:k=>y.value=k,"edit-slot":t.column.editSlot,"value-slot":t.column.valueSlot,modelValue:o.value,"onUpdate:modelValue":d[1]||(d[1]=k=>o.value=k)},null,8,["read-mode","edit-slot","value-slot","modelValue"])):t.column.type==="email"?(e.openBlock(),e.createBlock(C,{key:3,"read-mode":!t.column.editable,ref:k=>y.value=k,"edit-slot":t.column.editSlot,"value-slot":t.column.valueSlot,"is-email":"",modelValue:o.value,"onUpdate:modelValue":d[2]||(d[2]=k=>o.value=k)},null,8,["read-mode","edit-slot","value-slot","modelValue"])):t.column.type==="tel"?(e.openBlock(),e.createBlock(C,{key:4,"read-mode":!t.column.editable,ref:k=>y.value=k,"edit-slot":t.column.editSlot,"value-slot":t.column.valueSlot,"is-tel":"",modelValue:o.value,"onUpdate:modelValue":d[3]||(d[3]=k=>o.value=k)},null,8,["read-mode","edit-slot","value-slot","modelValue"])):t.column.type==="check"?(e.openBlock(),e.createBlock(D,{key:5,"read-mode":!t.column.editable,ref:k=>y.value=k,modelValue:o.value,"onUpdate:modelValue":d[4]||(d[4]=k=>o.value=k)},null,8,["read-mode","modelValue"])):t.column.type==="switch"?(e.openBlock(),e.createBlock(A,{key:6,"read-mode":!t.column.editable,ref:k=>y.value=k,modelValue:o.value,"onUpdate:modelValue":d[5]||(d[5]=k=>o.value=k)},null,8,["read-mode","modelValue"])):t.column.type==="select"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:7},[g.value?(e.openBlock(),e.createBlock(T,{key:0})):(e.openBlock(),e.createBlock(L,{key:1,"read-mode":!t.column.editable,ref:k=>y.value=k,modelValue:o.value,"onUpdate:modelValue":d[6]||(d[6]=k=>o.value=k),resource:t.column.resource,"resource-data":t.column.resourceData,options:t.column.options,multiple:t.column.isMultiple,"multiple-display":t.column.multipleDisplay,"multiple-display-edition":t.column.multipleDisplayEdition},null,8,["read-mode","modelValue","resource","resource-data","options","multiple","multiple-display","multiple-display-edition"]))],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:8},[e.createTextVNode(e.toDisplayString(e.unref(w)(t.column,r.value,t.i)),1)],64))}}}),ye=["data-i","data-handle-drag"],be={key:0,"data-role":"drag-indicator"},pe={key:1,"data-role":"invalid-drag-indicator"},Ce=["data-column","colspan","title","onClick"],ge={name:"LktTableRow",inheritAttrs:!1},U=e.defineComponent({...ge,props:{isDraggable:{type:Boolean,default:!0},sortable:{type:Boolean,default:!0},i:{type:[Number],default:0},displayHiddenColumnsIndicator:{type:Boolean,default:!1},visibleColumns:{type:Array,default:()=>[]},emptyColumns:{type:Array,default:()=>[]},hiddenIsVisible:{type:Boolean,default:!1},item:{type:Object,default:()=>({})}},emits:["edited","click","show"],setup(t,{emit:l}){const n=l,a=t,r=e.ref(a.item),o=(s,d,c)=>{n("click",s,I.createLktEvent("",{item:d,column:c}))},y=(s,d)=>{n("show",s,I.createLktEvent("",{i:d}))},g=(s,d)=>{r.value=s};return e.watch(()=>a.item,s=>r.value=s),e.watch(r,()=>n("edited",r.value,a.i)),(s,d)=>(e.openBlock(),e.createElementBlock("tr",{"data-i":t.i,"data-handle-drag":t.isDraggable},[t.sortable&&t.isDraggable?(e.openBlock(),e.createElementBlock("td",be)):t.sortable?(e.openBlock(),e.createElementBlock("td",pe)):e.createCommentVNode("",!0),t.displayHiddenColumnsIndicator?(e.openBlock(),e.createElementBlock("td",{key:2,onClick:d[0]||(d[0]=c=>y(c,t.i)),"data-role":"show-more",class:e.normalizeClass(t.hiddenIsVisible?"state-open":"")},null,2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.visibleColumns,c=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.unref(me)(c,t.emptyColumns,t.item)?(e.openBlock(),e.createElementBlock("td",{key:0,"data-column":c.key,colspan:e.unref(N)(c,t.item),title:e.unref(w)(c,t.item,t.i),onClick:C=>o(C,t.item,c)},[s.$slots[c.key]?e.renderSlot(s.$slots,c.key,{key:0,value:t.item[c.key],item:t.item,column:c,i:t.i}):t.item?(e.openBlock(),e.createBlock(R,{key:1,column:c,modelValue:r.value,"onUpdate:modelValue":d[1]||(d[1]=C=>r.value=C),i:t.i,onEdited:g},null,8,["column","modelValue","i"])):e.createCommentVNode("",!0)],8,Ce)):e.createCommentVNode("",!0)],64))),256))],8,ye))}}),Be={"data-role":"hidden-row"},Se=["colspan"],Ve=["data-column"],Ee=["data-i"],Le=["data-column","title","onClick"],we={name:"LktHiddenRow",inheritAttrs:!1},Ae=e.defineComponent({...we,props:{isDraggable:{type:Boolean,default:!0},sortable:{type:Boolean,default:!0},i:{type:[Number],default:0},hiddenColumnsColSpan:{type:Number,default:0},visibleColumns:{type:Array,default:()=>[]},hiddenColumns:{type:Array,default:()=>[]},emptyColumns:{type:Array,default:()=>[]},hiddenIsVisible:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})}},emits:["update:modelValue","click"],setup(t,{emit:l}){const n=l,a=t,r=e.ref(a.modelValue),o=(y,g,s)=>{n("click",y,I.createLktEvent("",{item:g,column:s}))};return e.watch(()=>a.modelValue,y=>r.value=y),e.watch(r,()=>n("update:modelValue",r.value)),(y,g)=>e.withDirectives((e.openBlock(),e.createElementBlock("tr",Be,[e.createElementVNode("td",{colspan:t.hiddenColumnsColSpan},[e.createElementVNode("table",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hiddenColumns,s=>(e.openBlock(),e.createElementBlock("th",{"data-column":s.key},[e.createElementVNode("div",null,e.toDisplayString(s.label),1)],8,Ve))),256))]),e.createElementVNode("tr",{"data-i":t.i},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hiddenColumns,(s,d)=>(e.openBlock(),e.createElementBlock("td",{"data-column":s.key,title:e.unref(w)(s,r.value,d),onClick:c=>o(c,r.value,s)},[y.$slots[s.key]?e.renderSlot(y.$slots,s.key,{key:0,value:r.value[s.key],item:r.value,column:s,i:d}):(e.openBlock(),e.createBlock(R,{key:1,column:s,modelValue:r.value,"onUpdate:modelValue":g[0]||(g[0]=c=>r.value=c),i:d},null,8,["column","modelValue","i"]))],8,Le))),256))],8,Ee)])],8,Se)],512)),[[e.vShow,t.hiddenIsVisible]])}}),De=["data-sortable"],Ie={key:0,"data-role":"drag-indicator"},Ne={key:1},Te=["data-column","data-sortable","data-sort","colspan","title","onClick"],$e={key:1},Fe={key:1,class:"lkt-empty-table"},He={name:"LktTable",inheritAttrs:!1},qe=e.defineComponent({...He,props:{modelValue:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},sorter:{type:Function,default:O},sortable:{type:Boolean,default:!1},hideEmptyColumns:{type:Boolean,default:!1},draggableChecker:{type:Function,default:t=>!0},checkValidDrag:{type:Function,default:t=>!0},draggableItemKey:{type:String,default:"name"}},emits:["update:modelValue","sort","click"],setup(t,{expose:l,emit:n}){const a=n,r=e.useSlots(),o=t,y={},g=e.ref(typeof o.sorter=="function"?o.sorter:O),s=e.ref(fe(o.columns)),d=e.ref("asc"),c=e.ref(o.modelValue),C=e.ref(y),D=e.ref(!1),A=z.generateRandomString(12),T=e.computed(()=>c.value.length>0),L=e.computed(()=>{if(!o.hideEmptyColumns)return[];let i=[];return o.columns.forEach(u=>{let f=u.key,b=!1;c.value.forEach(p=>{if(typeof p.checkEmpty=="function")return p.checkEmpty(p);p[f]&&(b=!0)}),b||i.push(f)}),i}),k=e.computed(()=>o.columns.filter(i=>!i.hidden)),$=e.computed(()=>o.columns.filter(i=>i.hidden)),Me=e.computed(()=>{let i=k.value.length+1;return o.sortable&&++i,i}),F=e.computed(()=>$.value.length>0&&!o.sortable),Oe=e.computed(()=>o.columns.map(i=>i.key)),H=e.computed(()=>{let i=[];for(let u in r)Oe.value.indexOf(u)!==-1&&i.push(u);return i}),Re=i=>{let u=i.target;if(typeof u.dataset.column>"u")do u=u.parentNode;while(typeof u.dataset.column>"u"&&u.tagName!=="TABLE"&&u.tagName!=="body");if(u.tagName==="TD"&&(u=u.parentNode,u=u.dataset.i,typeof u<"u"))return c.value[u]},q=i=>C.value["tr_"+i]===!0,j=i=>{!i||i.sortable&&(c.value=c.value.sort((u,f)=>g.value(u,f,i,d.value)),d.value=d.value==="asc"?"desc":"asc",s.value=i.key,a("sort",[s.value,d.value]))},x=(i,u)=>{a("click",i,u)},M=(i,u)=>{let f="tr_"+u.value.i;C.value[f]=typeof C.value[f]>"u"?!0:!C.value[f]},Ue=(i,u)=>{c.value[u]=i};return e.onMounted(()=>{j(ke(o.columns,s.value))}),e.watch(()=>o.modelValue,i=>c.value=i),e.watch(c,i=>{a("update:modelValue",i)}),l({getItemByEvent:Re}),(i,u)=>T.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"lkt-table","data-sortable":t.sortable},[e.createElementVNode("table",null,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[t.sortable?(e.openBlock(),e.createElementBlock("th",Ie)):e.createCommentVNode("",!0),F.value?(e.openBlock(),e.createElementBlock("th",Ne)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,f=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[L.value.indexOf(f.key)===-1?(e.openBlock(),e.createElementBlock("th",{key:0,"data-column":f.key,"data-sortable":f.sortable===!0,"data-sort":f.sortable===!0&&s.value===f.key?d.value:"",colspan:e.unref(ue)(f,t.columns.length,c.value),title:f.label,onClick:b=>j(f)},[e.createElementVNode("div",null,e.toDisplayString(f.label),1)],8,Te)):e.createCommentVNode("",!0)],64))),256))])]),t.sortable?(e.openBlock(),e.createBlock(e.unref(X.default),{key:0,modelValue:c.value,"onUpdate:modelValue":u[0]||(u[0]=f=>c.value=f),move:t.checkValidDrag,itemKey:t.draggableItemKey,onStart:u[1]||(u[1]=f=>D.value=!0),onEnd:u[2]||(u[2]=f=>D.value=!1),tag:"tbody",class:"lkt-sortable-table",handle:"[data-handle-drag]"},{item:e.withCtx(({element:f,index:b})=>[(e.openBlock(),e.createBlock(U,{key:e.unref(A)+"-"+b,i:b,item:f,"display-hidden-columns-indicator":F.value,"is-draggable":t.draggableChecker?t.draggableChecker(f):!0,sortable:t.sortable,"visible-columns":k.value,"empty-columns":L.value,"hidden-is-visible":q(b),onClick:x,onShow:M},e.createSlots({_:2},[e.renderList(H.value,p=>({name:p,fn:e.withCtx(B=>[e.renderSlot(i.$slots,p,{item:B.item,value:B.value,column:B.column})])}))]),1032,["i","item","display-hidden-columns-indicator","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))]),_:3},8,["modelValue","move","itemKey"])):(e.openBlock(),e.createElementBlock("tbody",$e,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(f,b)=>(e.openBlock(),e.createBlock(U,{key:e.unref(A)+"-"+b,i:b,item:f,"display-hidden-columns-indicator":F.value,"is-draggable":t.draggableChecker?t.draggableChecker(f):!0,sortable:t.sortable,"visible-columns":k.value,"empty-columns":L.value,"hidden-is-visible":q(b),onClick:x,onShow:M,onEdited:Ue},e.createSlots({_:2},[e.renderList(H.value,p=>({name:p,fn:e.withCtx(B=>[e.renderSlot(i.$slots,p,{item:B.item,value:B.value,column:B.column})])}))]),1032,["i","item","display-hidden-columns-indicator","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))),128)),$.value.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(c.value,(f,b)=>(e.openBlock(),e.createBlock(Ae,{key:e.unref(A)+"-"+b,i:b,item:f,"hidden-columns":$.value,"hidden-columns-col-span":Me.value,"is-draggable":t.draggableChecker?t.draggableChecker(f):!0,sortable:t.sortable,"visible-columns":k.value,"empty-columns":L.value,"hidden-is-visible":q(b),onClick:x,onShow:M},e.createSlots({_:2},[e.renderList(H.value,p=>({name:p,fn:e.withCtx(B=>[e.renderSlot(i.$slots,p,{item:B.item,value:B.value,column:B.column})])}))]),1032,["i","item","hidden-columns","hidden-columns-col-span","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))),128)):e.createCommentVNode("",!0)]))])],8,De)):i.$slots["no-items"]?(e.openBlock(),e.createElementBlock("div",Fe,[e.renderSlot(i.$slots,"no-items")])):e.createCommentVNode("",!0)}}),ze="",xe={install:t=>{t.component("lkt-table")===void 0&&t.component("lkt-table",qe),t.component("lkt-loader")===void 0&&t.use(ee.default),t.component("lkt-field-select")===void 0&&t.use(_.default),t.component("lkt-field-text")===void 0&&t.use(Z.default),t.component("lkt-field-check")===void 0&&t.use(Y.default),t.component("lkt-field-switch")===void 0&&t.use(v.default)}};m.createActionColumn=ne,m.createCheckColumn=re,m.createColumn=te,m.createEmailColumn=ae,m.createHiddenColumn=ce,m.createLinkColumn=le,m.createSelectColumn=de,m.createSwitchColumn=se,m.createTelColumn=ie,m.createTextColumn=oe,m.default=xe,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -0,0 +1 @@
+.lkt-table{width:var(--table-width);overflow-x:auto;font-family:var(--table-font-family)}.lkt-table>table{width:100%;max-width:100%;border-collapse:separate;border-radius:var(--table-border-radius);border-spacing:0}.lkt-table th,.lkt-table td{vertical-align:middle;text-align:var(--table-text-align);padding:var(--table-row-padding);font-size:var(--table-row-font-size);color:var(--table-row-color)}.lkt-table th{font-family:var(--table-header-font-family);padding:var(--table-header-padding)}.lkt-table thead tr{background-color:var(--table-header-background)}.lkt-table tbody tr{background-color:var(--table-row-background)}.lkt-table tbody tr:nth-child(odd){background-color:var(--table-row-background-odd)}.lkt-table [data-sort=asc]>div,.lkt-table [data-sort=desc]>div{display:inline-block}.lkt-table [data-sort=asc]>div:after,.lkt-table [data-sort=desc]>div:after{font-family:var(--table-sort-icon-font-family);display:inline-block;font-size:var(--table-sort-icon-font-size)}.lkt-table [data-sort=asc]>div:after{content:var(--table-sort-asc-icon-content)}.lkt-table [data-sort=desc]>div:after{content:var(--table-sort-desc-icon-content)}.lkt-table td[data-role=drag-indicator],.lkt-table td[data-role=invalid-drag-indicator]{width:var(--table-drag-indicator-width);height:40px;padding:0!important;position:relative;background:#eeeeee;cursor:pointer}.lkt-table td[data-role=drag-indicator]:before,.lkt-table td[data-role=invalid-drag-indicator]:before{content:"";display:block;background:#eeeeee;width:18px;height:36px;margin:auto}.lkt-table td[data-role=drag-indicator]:after,.lkt-table td[data-role=invalid-drag-indicator]:after{content:"\2026";color:#000;display:block;position:absolute;top:50%;left:50%;font-weight:700;width:15px;height:7px;transform:rotate(90deg);transform-origin:center center}[data-lkt=empty-table]{border:1px solid #ddd;border-radius:var(--table-border-radius);width:100%;padding:10px;background-color:#f8f7e5;font-family:var(--table-font-family);font-size:13px;color:#444;text-align:var(--table-text-align)}.sortable-chosen{border:var(--table-sortable-chosen-border)}.sortable-chosen.ghost{background:var(--table-sortable-chosen-ghost-background)}

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 import { App } from "vue";
 export { createColumn, createHiddenColumn, createLinkColumn, createActionColumn, createTextColumn, createCheckColumn, createSwitchColumn, createSelectColumn, createEmailColumn, createTelColumn } from "./functions/table-functions";
+import "./../lkt-table.css";
 declare const LktTable: {
     install: (app: App) => void;
 };

package/dist/types/instances/LktTableColumn.d.ts

@@ -18,6 +18,10 @@ export declare class LktTableColumn {
     isMultiple: boolean;
     isLoading: boolean;
     resourceLoaded: boolean;
+    valueSlot: string;
+    editSlot: string;
+    multipleDisplay: string;
+    multipleDisplayEdition: string;
     constructor(key?: string, label?: string);
     setIsSortable(status?: boolean): this;
     setIsEditable(status?: boolean): this;
@@ -44,4 +48,8 @@ export declare class LktTableColumn {
     setResource(resource: string): this;
     setResourceData(data: LktObject): this;
     loadResource(): Promise<this>;
+    setEditSlot(str: string): this;
+    setValueSlot(str: string): this;
+    setMultipleDisplay(str: string): this;
+    setMultipleDisplayEdition(str: string): this;
 }

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "lkt-table",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "",
   "main": "src/index.ts",
   "module": "src/index.ts",
   "files": [
-    "lkt-table.css",
     "dist/*",
     "src/**/*.vue"
   ],
@@ -60,10 +59,10 @@
   },
   "dependencies": {
     "lkt-events": "^1.0.2",
-    "lkt-field-check": "git+https://github.com/lekrat/lkt-field-check.git",
-    "lkt-field-select": "git+https://github.com/lekrat/lkt-field-select.git",
-    "lkt-field-switch": "git+https://github.com/lekrat/lkt-field-switch.git",
-    "lkt-field-text": "git+https://github.com/lekrat/lkt-field-text.git",
+    "lkt-field-check": "^1.0.0",
+    "lkt-field-select": "^1.0.0",
+    "lkt-field-switch": "^1.0.0",
+    "lkt-field-text": "^1.0.0",
     "lkt-http-client": "^1.0.19",
     "lkt-loader": "^1.0.2",
     "lkt-string-tools": "^1.0.3",

package/src/components/LktTableCell.vue

@@ -55,12 +55,16 @@ if (props.column.hasToLoadResource()) {
         <lkt-field-text
             v-bind:read-mode="!column.editable"
             :ref="(el:any) => inputElement = el"
+            :edit-slot="column.editSlot"
+            :value-slot="column.valueSlot"
             v-model="value"></lkt-field-text>
     </template>
     <template v-else-if="column.type === 'email'">
         <lkt-field-text
             v-bind:read-mode="!column.editable"
             :ref="(el:any) => inputElement = el"
+            :edit-slot="column.editSlot"
+            :value-slot="column.valueSlot"
             is-email
             v-model="value"></lkt-field-text>
     </template>
@@ -68,6 +72,8 @@ if (props.column.hasToLoadResource()) {
         <lkt-field-text
             v-bind:read-mode="!column.editable"
             :ref="(el:any) => inputElement = el"
+            :edit-slot="column.editSlot"
+            :value-slot="column.valueSlot"
             is-tel
             v-model="value"></lkt-field-text>
     </template>
@@ -87,7 +93,9 @@ if (props.column.hasToLoadResource()) {
             v-bind:resource="column.resource"
             v-bind:resource-data="column.resourceData"
             v-bind:options="column.options"
-            v-bind:multiple="column.isMultiple"></lkt-field-select>
+            v-bind:multiple="column.isMultiple"
+            v-bind:multiple-display="column.multipleDisplay"
+            v-bind:multiple-display-edition="column.multipleDisplayEdition"></lkt-field-select>
     </template>
     <template v-else>
         {{ getColumnDisplayContent(column, item, i) }}

package/src/index.ts

@@ -1,6 +1,11 @@
 /* eslint-disable import/prefer-default-export */
 import {default as table} from "./lib-components/LktTable.vue";
 import {App} from "vue";
+import LktFieldCheck from "lkt-field-check";
+import LktFieldText from "lkt-field-text";
+import LktFieldSwitch from "lkt-field-switch";
+import LktFieldSelect from "lkt-field-select";
+import LktLoader from "lkt-loader";
 
 export {
     createColumn,
@@ -15,9 +20,19 @@ export {
     createTelColumn
 } from "./functions/table-functions";
 
+import "./../lkt-table.css"
+
 const LktTable = {
     install: (app: App) => {
-        app.component('lkt-table', table);
+        // Register plugin components
+        if (app.component('lkt-table') === undefined) app.component('lkt-table', table);
+
+        // Register additional components
+        if (app.component('lkt-loader') === undefined) app.use(LktLoader);
+        if (app.component('lkt-field-select') === undefined) app.use(LktFieldSelect);
+        if (app.component('lkt-field-text') === undefined) app.use(LktFieldText);
+        if (app.component('lkt-field-check') === undefined) app.use(LktFieldCheck);
+        if (app.component('lkt-field-switch') === undefined) app.use(LktFieldSwitch);
     },
 };
 

package/lkt-table.css

@@ -1,114 +0,0 @@
-.lkt-table {
-    width: var(--table-width);
-    overflow-x: auto;
-    font-family: var(--table-font-family);
-}
-
-.lkt-table > table {
-    width: 100%;
-    max-width: 100%;
-    border-collapse: separate;
-    border-radius: var(--table-border-radius);
-    border-spacing: 0;
-}
-
-.lkt-table th,
-.lkt-table td {
-    vertical-align: middle;
-    text-align: var(--table-text-align);
-    padding: var(--table-row-padding);
-    font-size: var(--table-row-font-size);
-    color: var(--table-row-color);
-}
-
-.lkt-table th {
-    font-family: var(--table-header-font-family);
-    padding: var(--table-header-padding);
-}
-
-.lkt-table thead tr {
-    background-color: var(--table-header-background)
-}
-
-.lkt-table tbody tr {
-    background-color: var(--table-row-background);
-}
-
-.lkt-table tbody tr:nth-child(odd) {
-    background-color: var(--table-row-background-odd);
-}
-
-.lkt-table [data-sort="asc"] > div,
-.lkt-table [data-sort="desc"] > div {
-    display: inline-block;
-}
-
-.lkt-table [data-sort="asc"] > div:after,
-.lkt-table [data-sort="desc"] > div:after {
-    font-family: var(--table-sort-icon-font-family);
-    display: inline-block;
-    font-size: var(--table-sort-icon-font-size);
-}
-
-.lkt-table [data-sort="asc"] > div:after {
-    content: var(--table-sort-asc-icon-content);
-}
-
-.lkt-table [data-sort="desc"] > div:after {
-    content: var(--table-sort-desc-icon-content);
-}
-
-.lkt-table td[data-role="drag-indicator"],
-.lkt-table td[data-role="invalid-drag-indicator"] {
-    width: var(--table-drag-indicator-width);
-    height: 40px;
-    padding: 0 !important;
-    position: relative;
-    background: #eeeeee;
-    cursor: pointer;
-}
-
-.lkt-table td[data-role="drag-indicator"]:before,
-.lkt-table td[data-role="invalid-drag-indicator"]:before {
-    content: '';
-    display: block;
-    background: #eeeeee;
-    width: 18px;
-    height: 36px;
-    margin: auto;
-}
-
-.lkt-table td[data-role="drag-indicator"]:after,
-.lkt-table td[data-role="invalid-drag-indicator"]:after {
-    content: "\2026";
-    color: #000000;
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    font-weight: 700;
-    width: 15px;
-    height: 7px;
-    transform: rotate(90deg);
-    transform-origin: center center;
-}
-
-[data-lkt="empty-table"] {
-    border: 1px solid #ddd;
-    border-radius: var(--table-border-radius);
-    width: 100%;
-    padding: 10px;
-    background-color: #f8f7e5;
-    font-family: var(--table-font-family);
-    font-size: 13px;
-    color: #444;
-    text-align: var(--table-text-align);
-}
-
-.sortable-chosen {
-    border: var(--table-sortable-chosen-border);
-}
-
-.sortable-chosen.ghost {
-    background: var(--table-sortable-chosen-ghost-background);
-}