lkt-table 1.0.13

package/README.md

@@ -0,0 +1,219 @@
+# LKT Table
+![ts](https://img.shields.io/badge/Typescript-3178c6?style=for-the-badge)
+![js](https://img.shields.io/badge/Javascript-f68333?style=for-the-badge)
+![vue](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Flekrat%2Flkt-table%2Fmaster%2Fpackage.json&query=%24.dependencies.vue&style=for-the-badge&label=vue&color=42b883)
+![node](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Flekrat%2Flkt-table%2Fmaster%2Fpackage.json&query=%24.engines.node&style=for-the-badge&label=node&color=026e00)
+
+
+Vue component (Vue.js 3.0) allowing a simple yet powerful table component.
+
+## Features
+
+* Custom slots per column
+* Hide columns by config
+* Automatically hide empty columns
+* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) features:
+    * Supports touch devices
+    * Supports drag handles and selectable text
+    * Smart auto-scrolling
+    * No jQuery dependency
+* Keeps in sync HTML and view model list
+
+## Installation
+
+### With npm
+
+```bash
+npm i -S lkt-table
+```
+
+## Typical use:
+In your main.js
+```js
+import LktTable from 'lkt-table';
+  
+app.use(LktTable);
+```
+
+In your component:
+
+```html
+<lkt-table v-model="myArray" v-bind:columns="columns"></lkt-table>
+```
+```js
+import {createColumn} from 'lkt-table';
+
+let isSortable = false;
+
+export default {
+    data() {
+        return {
+            columns: [
+                createColumn('name', 'Name'),
+                createColumn('surname', 'Surname', isSortable),
+            ],
+            items: [
+                {name: 'a', surname: 'n'},
+                {name: 'b', surname: 'n1'},
+            ]
+        }
+    }
+}
+```
+
+
+### With `custom column slots`:
+```html
+<lkt-table v-model:value="myArray" v-bind:columns="columns">
+    <template v-slot:name="{item}">{{item.name}}</template
+</lkt-table>
+```
+
+## Usage of `createColumn`:
+```js
+const column = createColumn(elementProperty, propertyTextInHeader)
+    
+    // Enables/disables column being sortable 
+    // by clicking in header
+    // Default: true
+    .setIsSortable(status)
+    
+    // Make this column hidden, available by clicking a button
+    // Default: false
+    .setIsHidden(status)
+    
+    // Defines a text formatter for this column
+    // Useful if you don't need and slot
+    // Must be a function
+    // Default: undefined
+    .setFormatter(formatter)
+    
+    // Defines a check function to test if this column
+    // is empty.
+    // If all items has this column empty, this column
+    // won't be rendered
+    // Default: undefined
+    .setEmptyChecker(checker)
+    
+    // Defines a function to check which colspan should take
+    // this column
+    // Default: undefined
+    .setColSpan(checker)
+```
+
+## Props
+
+### value
+Type: `Array`<br>
+Required: `true`<br>
+Default: `[]`
+
+Input data array to display.
+```html
+<lkt-table v-model:value="myArray"></lkt-table>
+```
+
+### columns
+Type: `Array`<br>
+Required: `true`<br>
+Default: `[]`
+
+Columns configuration (data to be shown, order, ...)
+```html
+<lkt-table v-bind:columns="columns"></lkt-table>
+```
+
+### sorter
+Type: `Function`<br>
+Required: `false`<br>
+Default: `undefined`
+
+Sorting function which will be triggered each time a th is clicked (if column is sortable)
+```html
+<lkt-table v-bind:sorter="sorter"></lkt-table>
+```
+```js
+export default {
+    methods: {
+        sorter(datum1, datum2, column, sortDirection) {
+            return 1;
+        }
+    },
+    ...
+}
+```
+
+
+### sortable
+Type: `Boolean`<br>
+Required: `false`<br>
+Default: `false`
+
+Enables drag and drop
+```html
+<lkt-table v-bind:sortable="true"></lkt-table>
+```
+
+### hideEmptyColumns
+Type: `Boolean`<br>
+Required: `false`<br>
+Default: `false`
+
+Enables automatic hide empty columns
+```html
+<lkt-table v-bind:hide-empty-columns="true"></lkt-table>
+```
+
+### draggableChecker
+Type: `Function`<br>
+Required: `false`<br>
+Default: `(evt) => true`
+
+A function to determine if an item can be dragged
+```html
+<lkt-table v-bind:draggable-checker="fn"></lkt-table>
+```
+
+### checkValidDrag
+Type: `Function`<br>
+Required: `false`<br>
+Default: `(evt) => true`
+
+A function to determine if an item can be dropped in a certain position
+```html
+<lkt-table v-bind:check-valid-drag="fn"></lkt-table>
+```
+
+
+### Events
+
+* LktTable emits these events:
+
+  - `update:modelValue` (for value v-model)
+  - `sort` (same as input, but after sorting)
+
+HTML:
+```HTML
+<lkt-table v-on:sort="doSomething"></lkt-table>
+```
+
+### Slots
+
+#### custom column slot
+LktTable generates one slot per column, so you can always control how a column will be shown.
+
+The `custom column slot` will be named with the column key.
+
+Slot props:
+- `value` the element value for that column
+- `item` the element itself
+- `column` the column config
+- `i` the row index
+
+```html
+<lkt-table v-model:value="myArray" v-bind:columns="columns">
+    <template v-slot:name="{item, value}">
+        <div>{{value}}, {{item.surname}}</div>
+    </template
+</lkt-table>
+```

package/dist/lkt-table.es.js

@@ -0,0 +1,373 @@
+var ae = Object.defineProperty;
+var ne = (e, t, a) => t in e ? ae(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var $ = (e, t, a) => (ne(e, typeof t != "symbol" ? t + "" : t, a), a);
+import { defineComponent as x, openBlock as s, createElementBlock as o, createCommentVNode as C, normalizeClass as ie, Fragment as k, renderList as g, unref as v, renderSlot as B, createTextVNode as Y, toDisplayString as L, withDirectives as re, createElementVNode as p, vShow as se, useSlots as oe, ref as V, computed as I, onMounted as de, watch as Q, createBlock as N, withCtx as H, createSlots as M } from "vue";
+import ue from "vuedraggable";
+import { createLktEvent as U } from "lkt-events";
+import { generateRandomString as ce } from "lkt-string-tools";
+class Z {
+  constructor(t = "", a = "") {
+    $(this, "key");
+    $(this, "label");
+    $(this, "sortable");
+    $(this, "hidden");
+    $(this, "formatter");
+    $(this, "checkEmpty");
+    $(this, "colspan");
+    this.key = t, this.label = a, this.sortable = !0, this.hidden = !1, this.formatter = void 0, this.checkEmpty = void 0, this.colspan = void 0;
+  }
+  setIsSortable(t = !0) {
+    return this.sortable = t, this;
+  }
+  setIsHidden(t = !0) {
+    return this.hidden = t, this;
+  }
+  setFormatter(t = void 0) {
+    return this.formatter = t, this;
+  }
+  setEmptyChecker(t = void 0) {
+    return this.checkEmpty = t, this;
+  }
+  setColSpan(t = void 0) {
+    return this.colspan = void 0, this;
+  }
+}
+const qe = (e, t, a = !0) => new Z(e, t).setIsSortable(a), Me = (e, t, a = !0) => new Z(e, t).setIsSortable(a).setIsHidden(!0), W = (e, t, a, c) => {
+  if (!a)
+    return 0;
+  let f = e[a.key], n = t[a.key];
+  if (c === "asc") {
+    if (f > n)
+      return 1;
+    if (n > f)
+      return -1;
+  } else {
+    if (f > n)
+      return -1;
+    if (n > f)
+      return 1;
+  }
+  return 0;
+}, T = (e, t, a) => e.formatter && typeof e.formatter == "function" ? e.formatter(t[e.key], t, e, a) : t[e.key], fe = (e, t, a) => {
+  if (!e.colspan)
+    return -1;
+  let c = t;
+  return a.forEach((f) => {
+    let n = G(e, f);
+    n > 0 && n < c && (c = n);
+  }), c;
+}, G = (e, t) => e.colspan === !1 ? !1 : typeof e.colspan == "function" ? e.colspan(t) : e.colspan, me = (e, t, a) => {
+  if (typeof e != "object" || !e.key || t.indexOf(e.key) > -1)
+    return !1;
+  let c = G(e, a);
+  return typeof e.colspan > "u" ? !0 : (typeof e.colspan < "u" && (typeof e.colspan == "function" ? c = parseInt(e.colspan()) : c = parseInt(e.colspan)), c > 0);
+}, ye = (e = []) => {
+  if (e.length > 0) {
+    for (let t = 0; t < e.length; ++t)
+      if (e[t].sortable)
+        return e[t].key;
+  }
+  return "";
+}, he = (e, t) => {
+  if (e.length > 0) {
+    for (let a = 0; a < e.length; ++a)
+      if (e[a].key === t)
+        return e[a];
+  }
+  return null;
+}, be = ["data-i", "data-handle-drag"], ve = {
+  key: 0,
+  "data-role": "drag-indicator"
+}, ke = {
+  key: 1,
+  "data-role": "invalid-drag-indicator"
+}, ge = ["data-column", "colspan", "title", "onClick"], Ce = { name: "LktTableRow", inheritAttrs: !1 }, X = /* @__PURE__ */ x({
+  ...Ce,
+  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: ["click", "show"],
+  setup(e, { emit: t }) {
+    const a = t, c = (n, d, u) => {
+      a("click", n, U("", { item: d, column: u }));
+    }, f = (n, d) => {
+      a("show", n, U("", { i: d }));
+    };
+    return (n, d) => (s(), o("tr", {
+      "data-i": e.i,
+      "data-handle-drag": e.isDraggable
+    }, [
+      e.sortable && e.isDraggable ? (s(), o("td", ve)) : e.sortable ? (s(), o("td", ke)) : C("", !0),
+      e.displayHiddenColumnsIndicator ? (s(), o("td", {
+        key: 2,
+        onClick: d[0] || (d[0] = (u) => f(u, e.i)),
+        "data-role": "show-more",
+        class: ie(e.hiddenIsVisible ? "state-open" : "")
+      }, null, 2)) : C("", !0),
+      (s(!0), o(k, null, g(e.visibleColumns, (u) => (s(), o(k, null, [
+        v(me)(u, e.emptyColumns, e.item) ? (s(), o("td", {
+          key: 0,
+          "data-column": u.key,
+          colspan: v(G)(u, e.item),
+          title: v(T)(u, e.item, e.i),
+          onClick: (S) => c(S, e.item, u)
+        }, [
+          n.$slots[u.key] ? B(n.$slots, u.key, {
+            key: 0,
+            value: e.item[u.key],
+            item: e.item,
+            column: u,
+            i: e.i
+          }) : e.item ? (s(), o(k, { key: 1 }, [
+            Y(L(v(T)(u, e.item, e.i)), 1)
+          ], 64)) : C("", !0)
+        ], 8, ge)) : C("", !0)
+      ], 64))), 256))
+    ], 8, be));
+  }
+}), pe = { "data-role": "hidden-row" }, Se = ["colspan"], $e = ["data-column"], Ie = ["data-i"], Ve = ["data-column", "title", "onClick"], Be = { name: "LktHiddenRow", inheritAttrs: !1 }, Ee = /* @__PURE__ */ x({
+  ...Be,
+  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 },
+    item: { type: Object, default: () => ({}) }
+  },
+  emits: ["click"],
+  setup(e, { emit: t }) {
+    const a = t, c = (f, n, d) => {
+      a("click", f, U("", { item: n, column: d }));
+    };
+    return (f, n) => re((s(), o("tr", pe, [
+      p("td", { colspan: e.hiddenColumnsColSpan }, [
+        p("table", null, [
+          p("tr", null, [
+            (s(!0), o(k, null, g(e.hiddenColumns, (d) => (s(), o("th", {
+              "data-column": d.key
+            }, [
+              p("div", null, L(d.label), 1)
+            ], 8, $e))), 256))
+          ]),
+          p("tr", { "data-i": e.i }, [
+            (s(!0), o(k, null, g(e.hiddenColumns, (d, u) => (s(), o("td", {
+              "data-column": d.key,
+              title: v(T)(d, e.item, u),
+              onClick: (S) => c(S, e.item, d)
+            }, [
+              f.$slots[d.key] ? B(f.$slots, d.key, {
+                key: 0,
+                value: e.item[d.key],
+                item: e.item,
+                column: d,
+                i: u
+              }) : (s(), o(k, { key: 1 }, [
+                Y(L(v(T)(d, e.item, u)), 1)
+              ], 64))
+            ], 8, Ve))), 256))
+          ], 8, Ie)
+        ])
+      ], 8, Se)
+    ], 512)), [
+      [se, e.hiddenIsVisible]
+    ]);
+  }
+}), De = ["data-sortable"], we = {
+  key: 0,
+  "data-role": "drag-indicator"
+}, Ae = { key: 1 }, Ne = ["data-column", "data-sortable", "data-sort", "colspan", "title", "onClick"], He = { key: 1 }, Le = {
+  key: 1,
+  class: "lkt-empty-table"
+}, Te = { name: "LktTable", inheritAttrs: !1 }, Ke = /* @__PURE__ */ x({
+  ...Te,
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    sorter: { type: Function, default: W },
+    sortable: { type: Boolean, default: !1 },
+    hideEmptyColumns: { type: Boolean, default: !1 },
+    draggableChecker: { type: Function, default: (e) => !0 },
+    checkValidDrag: { type: Function, default: (e) => !0 },
+    draggableItemKey: { type: String, default: "name" }
+  },
+  emits: ["update:modelValue", "sort", "click"],
+  setup(e, { expose: t, emit: a }) {
+    const c = a, f = oe(), n = e, d = {}, u = V(typeof n.sorter == "function" ? n.sorter : W), S = V(ye(n.columns)), E = V("asc"), h = V(n.modelValue), w = V(d), J = V(!1), K = ce(12), _ = I(() => h.value.length > 0), A = I(() => {
+      if (!n.hideEmptyColumns)
+        return [];
+      let l = [];
+      return n.columns.forEach((i) => {
+        let r = i.key, m = !1;
+        h.value.forEach((y) => {
+          if (typeof y.checkEmpty == "function")
+            return y.checkEmpty(y);
+          y[r] && (m = !0);
+        }), m || l.push(r);
+      }), l;
+    }), D = I(() => n.columns.filter((l) => !l.hidden)), F = I(() => n.columns.filter((l) => l.hidden)), ee = I(() => {
+      let l = D.value.length + 1;
+      return n.sortable && ++l, l;
+    }), O = I(() => F.value.length > 0 && !n.sortable), te = I(() => n.columns.map((l) => l.key)), R = I(() => {
+      let l = [];
+      for (let i in f)
+        te.value.indexOf(i) !== -1 && l.push(i);
+      return l;
+    }), le = (l) => {
+      let i = l.target;
+      if (typeof i.dataset.column > "u")
+        do
+          i = i.parentNode;
+        while (typeof i.dataset.column > "u" && i.tagName !== "TABLE" && i.tagName !== "body");
+      if (i.tagName === "TD" && (i = i.parentNode, i = i.dataset.i, typeof i < "u"))
+        return h.value[i];
+    }, j = (l) => w.value["tr_" + l] === !0, P = (l) => {
+      !l || l.sortable && (h.value = h.value.sort((i, r) => u.value(i, r, l, E.value)), E.value = E.value === "asc" ? "desc" : "asc", S.value = l.key, c("sort", [S.value, E.value]));
+    }, z = (l, i) => {
+      c("click", l, i);
+    }, q = (l, i) => {
+      let r = "tr_" + i.value.i;
+      w.value[r] = typeof w.value[r] > "u" ? !0 : !w.value[r];
+    };
+    return de(() => {
+      P(he(n.columns, S.value));
+    }), Q(() => n.modelValue, (l) => h.value = l), Q(h, (l) => c("update:modelValue", l)), t({ getItemByEvent: le }), (l, i) => _.value ? (s(), o("div", {
+      key: 0,
+      class: "lkt-table",
+      "data-sortable": e.sortable
+    }, [
+      p("table", null, [
+        p("thead", null, [
+          p("tr", null, [
+            e.sortable ? (s(), o("th", we)) : C("", !0),
+            O.value ? (s(), o("th", Ae)) : C("", !0),
+            (s(!0), o(k, null, g(D.value, (r) => (s(), o(k, null, [
+              A.value.indexOf(r.key) === -1 ? (s(), o("th", {
+                key: 0,
+                "data-column": r.key,
+                "data-sortable": r.sortable === !0,
+                "data-sort": r.sortable === !0 && S.value === r.key ? E.value : "",
+                colspan: v(fe)(r, e.columns.length, h.value),
+                title: r.label,
+                onClick: (m) => P(r)
+              }, [
+                p("div", null, L(r.label), 1)
+              ], 8, Ne)) : C("", !0)
+            ], 64))), 256))
+          ])
+        ]),
+        e.sortable ? (s(), N(v(ue), {
+          key: 0,
+          modelValue: h.value,
+          "onUpdate:modelValue": i[0] || (i[0] = (r) => h.value = r),
+          move: e.checkValidDrag,
+          itemKey: e.draggableItemKey,
+          onStart: i[1] || (i[1] = (r) => J.value = !0),
+          onEnd: i[2] || (i[2] = (r) => J.value = !1),
+          tag: "tbody",
+          class: "lkt-sortable-table",
+          handle: "[data-handle-drag]"
+        }, {
+          item: H(({ element: r, index: m }) => [
+            (s(), N(X, {
+              key: v(K) + "-" + m,
+              i: m,
+              item: r,
+              "display-hidden-columns-indicator": O.value,
+              "is-draggable": e.draggableChecker ? e.draggableChecker(r) : !0,
+              sortable: e.sortable,
+              "visible-columns": D.value,
+              "empty-columns": A.value,
+              "hidden-is-visible": j(m),
+              onClick: z,
+              onShow: q
+            }, M({ _: 2 }, [
+              g(R.value, (y) => ({
+                name: y,
+                fn: H((b) => [
+                  B(l.$slots, y, {
+                    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"])) : (s(), o("tbody", He, [
+          (s(!0), o(k, null, g(h.value, (r, m) => (s(), N(X, {
+            key: v(K) + "-" + m,
+            i: m,
+            item: r,
+            "display-hidden-columns-indicator": O.value,
+            "is-draggable": e.draggableChecker ? e.draggableChecker(r) : !0,
+            sortable: e.sortable,
+            "visible-columns": D.value,
+            "empty-columns": A.value,
+            "hidden-is-visible": j(m),
+            onClick: z,
+            onShow: q
+          }, M({ _: 2 }, [
+            g(R.value, (y) => ({
+              name: y,
+              fn: H((b) => [
+                B(l.$slots, y, {
+                  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)),
+          F.value.length > 0 ? (s(!0), o(k, { key: 0 }, g(h.value, (r, m) => (s(), N(Ee, {
+            key: v(K) + "-" + m,
+            i: m,
+            item: r,
+            "hidden-columns": F.value,
+            "hidden-columns-col-span": ee.value,
+            "is-draggable": e.draggableChecker ? e.draggableChecker(r) : !0,
+            sortable: e.sortable,
+            "visible-columns": D.value,
+            "empty-columns": A.value,
+            "hidden-is-visible": j(m),
+            onClick: z,
+            onShow: q
+          }, M({ _: 2 }, [
+            g(R.value, (y) => ({
+              name: y,
+              fn: H((b) => [
+                B(l.$slots, y, {
+                  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)) : C("", !0)
+        ]))
+      ])
+    ], 8, De)) : l.$slots["no-items"] ? (s(), o("div", Le, [
+      B(l.$slots, "no-items")
+    ])) : C("", !0);
+  }
+}), Ue = {
+  install: (e) => {
+    e.component("lkt-table", Ke);
+  }
+};
+export {
+  qe as createColumn,
+  Me as createHiddenColumn,
+  Ue as default
+};

package/dist/lkt-table.umd.js

@@ -0,0 +1 @@
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuedraggable"),require("lkt-events"),require("lkt-string-tools")):typeof define=="function"&&define.amd?define(["exports","vue","vuedraggable","lkt-events","lkt-string-tools"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.LktTable={},c.Vue,c.draggable,c.LktEvents,c.LktStringTools))})(this,function(c,e,p,N,R){"use strict";var ge=Object.defineProperty;var pe=(c,e,p)=>e in c?ge(c,e,{enumerable:!0,configurable:!0,writable:!0,value:p}):c[e]=p;var g=(c,e,p)=>(pe(c,typeof e!="symbol"?e+"":e,p),p);const x=(t=>t&&typeof t=="object"&&"default"in t?t:{default:t})(p);class H{constructor(l="",i=""){g(this,"key");g(this,"label");g(this,"sortable");g(this,"hidden");g(this,"formatter");g(this,"checkEmpty");g(this,"colspan");this.key=l,this.label=i,this.sortable=!0,this.hidden=!1,this.formatter=void 0,this.checkEmpty=void 0,this.colspan=void 0}setIsSortable(l=!0){return this.sortable=l,this}setIsHidden(l=!0){return this.hidden=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}}const M=(t,l,i=!0)=>new H(t,l).setIsSortable(i),z=(t,l,i=!0)=>new H(t,l).setIsSortable(i).setIsHidden(!0),j=(t,l,i,m)=>{if(!i)return 0;let f=t[i.key],a=l[i.key];if(m==="asc"){if(f>a)return 1;if(a>f)return-1}else{if(f>a)return-1;if(a>f)return 1}return 0},E=(t,l,i)=>t.formatter&&typeof t.formatter=="function"?t.formatter(l[t.key],l,t,i):l[t.key],P=(t,l,i)=>{if(!t.colspan)return-1;let m=l;return i.forEach(f=>{let a=$(t,f);a>0&&a<m&&(m=a)}),m},$=(t,l)=>t.colspan===!1?!1:typeof t.colspan=="function"?t.colspan(l):t.colspan,U=(t,l,i)=>{if(typeof t!="object"||!t.key||l.indexOf(t.key)>-1)return!1;let m=$(t,i);return typeof t.colspan>"u"?!0:(typeof t.colspan<"u"&&(typeof t.colspan=="function"?m=parseInt(t.colspan()):m=parseInt(t.colspan)),m>0)},G=(t=[])=>{if(t.length>0){for(let l=0;l<t.length;++l)if(t[l].sortable)return t[l].key}return""},J=(t,l)=>{if(t.length>0){for(let i=0;i<t.length;++i)if(t[i].key===l)return t[i]}return null},Q=["data-i","data-handle-drag"],W={key:0,"data-role":"drag-indicator"},X={key:1,"data-role":"invalid-drag-indicator"},Y=["data-column","colspan","title","onClick"],Z={name:"LktTableRow",inheritAttrs:!1},K=e.defineComponent({...Z,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:["click","show"],setup(t,{emit:l}){const i=l,m=(a,s,d)=>{i("click",a,N.createLktEvent("",{item:s,column:d}))},f=(a,s)=>{i("show",a,N.createLktEvent("",{i:s}))};return(a,s)=>(e.openBlock(),e.createElementBlock("tr",{"data-i":t.i,"data-handle-drag":t.isDraggable},[t.sortable&&t.isDraggable?(e.openBlock(),e.createElementBlock("td",W)):t.sortable?(e.openBlock(),e.createElementBlock("td",X)):e.createCommentVNode("",!0),t.displayHiddenColumnsIndicator?(e.openBlock(),e.createElementBlock("td",{key:2,onClick:s[0]||(s[0]=d=>f(d,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,d=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.unref(U)(d,t.emptyColumns,t.item)?(e.openBlock(),e.createElementBlock("td",{key:0,"data-column":d.key,colspan:e.unref($)(d,t.item),title:e.unref(E)(d,t.item,t.i),onClick:b=>m(b,t.item,d)},[a.$slots[d.key]?e.renderSlot(a.$slots,d.key,{key:0,value:t.item[d.key],item:t.item,column:d,i:t.i}):t.item?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(e.unref(E)(d,t.item,t.i)),1)],64)):e.createCommentVNode("",!0)],8,Y)):e.createCommentVNode("",!0)],64))),256))],8,Q))}}),_={"data-role":"hidden-row"},v=["colspan"],ee=["data-column"],te=["data-i"],le=["data-column","title","onClick"],ne={name:"LktHiddenRow",inheritAttrs:!1},ae=e.defineComponent({...ne,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},item:{type:Object,default:()=>({})}},emits:["click"],setup(t,{emit:l}){const i=l,m=(f,a,s)=>{i("click",f,N.createLktEvent("",{item:a,column:s}))};return(f,a)=>e.withDirectives((e.openBlock(),e.createElementBlock("tr",_,[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,ee))),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(E)(s,t.item,d),onClick:b=>m(b,t.item,s)},[f.$slots[s.key]?e.renderSlot(f.$slots,s.key,{key:0,value:t.item[s.key],item:t.item,column:s,i:d}):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(e.unref(E)(s,t.item,d)),1)],64))],8,le))),256))],8,te)])],8,v)],512)),[[e.vShow,t.hiddenIsVisible]])}}),re=["data-sortable"],oe={key:0,"data-role":"drag-indicator"},ie={key:1},se=["data-column","data-sortable","data-sort","colspan","title","onClick"],de={key:1},ce={key:1,class:"lkt-empty-table"},me={name:"LktTable",inheritAttrs:!1},fe=e.defineComponent({...me,props:{modelValue:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},sorter:{type:Function,default:j},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:i}){const m=i,f=e.useSlots(),a=t,s={},d=e.ref(typeof a.sorter=="function"?a.sorter:j),b=e.ref(G(a.columns)),C=e.ref("asc"),y=e.ref(a.modelValue),S=e.ref(s),O=e.ref(!1),L=R.generateRandomString(12),ke=e.computed(()=>y.value.length>0),V=e.computed(()=>{if(!a.hideEmptyColumns)return[];let n=[];return a.columns.forEach(r=>{let o=r.key,u=!1;y.value.forEach(k=>{if(typeof k.checkEmpty=="function")return k.checkEmpty(k);k[o]&&(u=!0)}),u||n.push(o)}),n}),B=e.computed(()=>a.columns.filter(n=>!n.hidden)),I=e.computed(()=>a.columns.filter(n=>n.hidden)),ye=e.computed(()=>{let n=B.value.length+1;return a.sortable&&++n,n}),D=e.computed(()=>I.value.length>0&&!a.sortable),he=e.computed(()=>a.columns.map(n=>n.key)),w=e.computed(()=>{let n=[];for(let r in f)he.value.indexOf(r)!==-1&&n.push(r);return n}),be=n=>{let r=n.target;if(typeof r.dataset.column>"u")do r=r.parentNode;while(typeof r.dataset.column>"u"&&r.tagName!=="TABLE"&&r.tagName!=="body");if(r.tagName==="TD"&&(r=r.parentNode,r=r.dataset.i,typeof r<"u"))return y.value[r]},F=n=>S.value["tr_"+n]===!0,q=n=>{!n||n.sortable&&(y.value=y.value.sort((r,o)=>d.value(r,o,n,C.value)),C.value=C.value==="asc"?"desc":"asc",b.value=n.key,m("sort",[b.value,C.value]))},T=(n,r)=>{m("click",n,r)},A=(n,r)=>{let o="tr_"+r.value.i;S.value[o]=typeof S.value[o]>"u"?!0:!S.value[o]};return e.onMounted(()=>{q(J(a.columns,b.value))}),e.watch(()=>a.modelValue,n=>y.value=n),e.watch(y,n=>m("update:modelValue",n)),l({getItemByEvent:be}),(n,r)=>ke.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",oe)):e.createCommentVNode("",!0),D.value?(e.openBlock(),e.createElementBlock("th",ie)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(B.value,o=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[V.value.indexOf(o.key)===-1?(e.openBlock(),e.createElementBlock("th",{key:0,"data-column":o.key,"data-sortable":o.sortable===!0,"data-sort":o.sortable===!0&&b.value===o.key?C.value:"",colspan:e.unref(P)(o,t.columns.length,y.value),title:o.label,onClick:u=>q(o)},[e.createElementVNode("div",null,e.toDisplayString(o.label),1)],8,se)):e.createCommentVNode("",!0)],64))),256))])]),t.sortable?(e.openBlock(),e.createBlock(e.unref(x.default),{key:0,modelValue:y.value,"onUpdate:modelValue":r[0]||(r[0]=o=>y.value=o),move:t.checkValidDrag,itemKey:t.draggableItemKey,onStart:r[1]||(r[1]=o=>O.value=!0),onEnd:r[2]||(r[2]=o=>O.value=!1),tag:"tbody",class:"lkt-sortable-table",handle:"[data-handle-drag]"},{item:e.withCtx(({element:o,index:u})=>[(e.openBlock(),e.createBlock(K,{key:e.unref(L)+"-"+u,i:u,item:o,"display-hidden-columns-indicator":D.value,"is-draggable":t.draggableChecker?t.draggableChecker(o):!0,sortable:t.sortable,"visible-columns":B.value,"empty-columns":V.value,"hidden-is-visible":F(u),onClick:T,onShow:A},e.createSlots({_:2},[e.renderList(w.value,k=>({name:k,fn:e.withCtx(h=>[e.renderSlot(n.$slots,k,{item:h.item,value:h.value,column:h.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",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,(o,u)=>(e.openBlock(),e.createBlock(K,{key:e.unref(L)+"-"+u,i:u,item:o,"display-hidden-columns-indicator":D.value,"is-draggable":t.draggableChecker?t.draggableChecker(o):!0,sortable:t.sortable,"visible-columns":B.value,"empty-columns":V.value,"hidden-is-visible":F(u),onClick:T,onShow:A},e.createSlots({_:2},[e.renderList(w.value,k=>({name:k,fn:e.withCtx(h=>[e.renderSlot(n.$slots,k,{item:h.item,value:h.value,column:h.column})])}))]),1032,["i","item","display-hidden-columns-indicator","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))),128)),I.value.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(y.value,(o,u)=>(e.openBlock(),e.createBlock(ae,{key:e.unref(L)+"-"+u,i:u,item:o,"hidden-columns":I.value,"hidden-columns-col-span":ye.value,"is-draggable":t.draggableChecker?t.draggableChecker(o):!0,sortable:t.sortable,"visible-columns":B.value,"empty-columns":V.value,"hidden-is-visible":F(u),onClick:T,onShow:A},e.createSlots({_:2},[e.renderList(w.value,k=>({name:k,fn:e.withCtx(h=>[e.renderSlot(n.$slots,k,{item:h.item,value:h.value,column:h.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,re)):n.$slots["no-items"]?(e.openBlock(),e.createElementBlock("div",ce,[e.renderSlot(n.$slots,"no-items")])):e.createCommentVNode("",!0)}}),ue={install:t=>{t.component("lkt-table",fe)}};c.createColumn=M,c.createHiddenColumn=z,c.default=ue,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});