vlite3 0.2.7 → 0.2.8

package/components/Carousel/Carousel.vue.d.ts

@@ -50,6 +50,7 @@ declare function __VLS_template(): {
                 readonly autoFocus: boolean;
                 readonly wheelOptions: import('vue-carousel-lite/types').WheelOptions;
                 readonly paginationPosition?: import('vue-carousel-lite').PaginationPosition | import('vue-carousel-lite').PaginationPosition[];
+                readonly updateKey?: string | number;
                 readonly paginationBackground?: boolean;
                 readonly "onSlide-change"?: ((index: number) => any) | undefined;
             } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "autoFocus" | "wheelOptions">;
@@ -147,6 +148,9 @@ declare function __VLS_template(): {
                     type: import('vue').PropType<number>;
                     default: number;
                 };
+                updateKey: {
+                    type: import('vue').PropType<string | number>;
+                };
                 autoFocus: {
                     type: import('vue').PropType<boolean>;
                     default: boolean;
@@ -325,6 +329,9 @@ declare function __VLS_template(): {
                 type: import('vue').PropType<number>;
                 default: number;
             };
+            updateKey: {
+                type: import('vue').PropType<string | number>;
+            };
             autoFocus: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
@@ -469,6 +476,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             readonly autoFocus: boolean;
             readonly wheelOptions: import('vue-carousel-lite/types').WheelOptions;
             readonly paginationPosition?: import('vue-carousel-lite').PaginationPosition | import('vue-carousel-lite').PaginationPosition[];
+            readonly updateKey?: string | number;
             readonly paginationBackground?: boolean;
             readonly "onSlide-change"?: ((index: number) => any) | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "autoFocus" | "wheelOptions">;
@@ -566,6 +574,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
                 type: import('vue').PropType<number>;
                 default: number;
             };
+            updateKey: {
+                type: import('vue').PropType<string | number>;
+            };
             autoFocus: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
@@ -744,6 +755,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             type: import('vue').PropType<number>;
             default: number;
         };
+        updateKey: {
+            type: import('vue').PropType<string | number>;
+        };
         autoFocus: {
             type: import('vue').PropType<boolean>;
             default: boolean;

package/components/DataTable/DataTable.vue.js

@@ -1,7 +1,7 @@
 import o from "./DataTable.vue2.js";
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-53f1fe21"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-b5d3795b"]]);
 export {
-  e as default
+  p as default
 };

package/components/DataTable/DataTable.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as ee, ref as g, computed as b, watch as p, onMounted as te, openBlock as n, createElementBlock as i, createVNode as C, createSlots as V, withCtx as T, renderSlot as S, createBlock as D, createCommentVNode as I, createElementVNode as r, normalizeClass as B, Fragment as R, renderList as $, normalizeStyle as A, mergeProps as le, toDisplayString as M, createTextVNode as ae, unref as se } from "vue";
+import { defineComponent as ee, ref as g, computed as b, watch as p, onMounted as te, openBlock as n, createElementBlock as i, createVNode as C, createSlots as j, withCtx as T, renderSlot as S, createBlock as D, createCommentVNode as I, createElementVNode as r, normalizeClass as B, Fragment as R, renderList as $, normalizeStyle as A, mergeProps as le, toDisplayString as M, createTextVNode as ae, unref as se } from "vue";
 import oe from "../Icon.vue.js";
 import ne from "../CheckBox.vue.js";
 import re from "../Button.vue.js";
@@ -19,7 +19,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
 }, be = { key: 2 }, ke = ["colspan"], Pe = { class: "flex flex-col items-center justify-center gap-2 text-muted-foreground p-8" }, xe = { class: "flex h-12 w-12 items-center justify-center rounded-full bg-muted" }, Ce = { class: "mt-1 text-base font-semibold text-foreground" }, Se = { class: "text-sm max-w-sm mx-auto" }, Ie = {
   key: 0,
   class: "mt-4"
-}, $e = { key: 0 }, Ve = /* @__PURE__ */ ee({
+}, $e = { key: 0 }, je = /* @__PURE__ */ ee({
   __name: "DataTable",
   props: {
     rows: { default: () => [] },
@@ -51,7 +51,10 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
   },
   emits: ["change", "select", "rowClick", "update:itemsPerPage", "update:selectedRows", "delete"],
   setup(a, { emit: U }) {
-    const O = (e, t) => t.split(".").reduce((s, c) => s?.[c], e), u = (e, t) => O(e, t), l = a, w = U, d = g({ field: "", order: "" }), k = g(l.itemsPerPage), h = g(l.pageInfo?.currentPage || 1), y = g(l.search || ""), P = g(!1), v = g("initial"), L = b(() => l.loading && (v.value === "initial" || v.value === "page"));
+    const O = (e, t) => {
+      if (!(!e || !t))
+        return t.includes(".") ? t.split(".").reduce((s, c) => s?.[c], e) : e[t];
+    }, u = (e, t) => O(e, t), l = a, w = U, d = g({ field: "", order: "" }), k = g(l.itemsPerPage), h = g(l.pageInfo?.currentPage || 1), y = g(l.search || ""), P = g(!1), v = g("initial"), L = b(() => l.loading && (v.value === "initial" || v.value === "page"));
     p(
       () => l.loading,
       (e, t) => {
@@ -79,7 +82,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
         e && (h.value = e);
       }
     );
-    const j = (e) => u(e, l.keyField), o = g(/* @__PURE__ */ new Set());
+    const E = (e) => u(e, l.keyField), o = g(/* @__PURE__ */ new Set());
     p(
       () => l.selectedRows,
       (e) => {
@@ -88,14 +91,14 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
       },
       { immediate: !0, deep: !0 }
     );
-    const z = b(() => l.rows.length === 0 ? !1 : l.rows.every((e) => o.value.has(u(e, l.keyField)))), E = b(() => o.value.size > 0 && !z.value), W = b(() => {
+    const z = b(() => l.rows.length === 0 ? !1 : l.rows.every((e) => o.value.has(u(e, l.keyField)))), N = b(() => o.value.size > 0 && !z.value), W = b(() => {
       const e = [...l.selectedRows || [], ...l.rows], t = /* @__PURE__ */ new Map();
       return e.forEach((s) => t.set(u(s, l.keyField), s)), Array.from(o.value).map((s) => t.get(s)).filter(Boolean);
     }), q = (e) => {
-      e ? l.rows.forEach((t) => o.value.add(u(t, l.keyField))) : o.value.size > 0 && l.rows.forEach((t) => o.value.delete(u(t, l.keyField))), N();
+      e ? l.rows.forEach((t) => o.value.add(u(t, l.keyField))) : o.value.size > 0 && l.rows.forEach((t) => o.value.delete(u(t, l.keyField))), V();
     }, G = (e) => {
-      o.value.has(e) ? o.value.delete(e) : o.value.add(e), N();
-    }, N = () => {
+      o.value.has(e) ? o.value.delete(e) : o.value.add(e), V();
+    }, V = () => {
       const e = l.selectedRows || [], t = /* @__PURE__ */ new Set(), s = [];
       l.rows.forEach((m) => {
         const f = u(m, l.keyField);
@@ -107,7 +110,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
       const c = {
         selected: s,
         all: z.value,
-        indeterminate: E.value
+        indeterminate: N.value
       };
       w("select", c), w("update:selectedRows", s);
     }, H = (e) => {
@@ -151,7 +154,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
         "onUpdate:modelValue": t[1] || (t[1] = (s) => y.value = s),
         "show-search": a.showSearch,
         placeholder: a.searchPlaceholder
-      }, V({ _: 2 }, [
+      }, j({ _: 2 }, [
         e.$slots?.["toolbar-left"] ? {
           name: "left",
           fn: T(() => [
@@ -193,7 +196,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
                   r("div", pe, [
                     C(ne, {
                       "model-value": z.value,
-                      indeterminate: E.value,
+                      indeterminate: N.value,
                       size: "xs",
                       "onUpdate:modelValue": q
                     }, null, 8, ["model-value", "indeterminate"])
@@ -235,20 +238,20 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
                   }, null, 4)
                 ], 2))), 128))
               ]))), 128)) : a.rows.length > 0 ? (n(!0), i(R, { key: 1 }, $(a.rows, (s, c) => (n(), D(ce, {
-                key: j(s),
+                key: E(s),
                 row: s,
                 headers: a.headers,
                 index: c,
                 "key-field": a.keyField,
                 selectable: a.selectable,
-                "is-selected": o.value.has(j(s)),
+                "is-selected": o.value.has(E(s)),
                 hoverable: a.hoverable,
                 striped: a.striped,
                 compact: a.compact,
                 onSelect: G,
                 onRowClick: Q,
                 class: "[&_td:last-child]:pr-3.5!"
-              }, V({ _: 2 }, [
+              }, j({ _: 2 }, [
                 $(a.headers, (m) => ({
                   name: m.field,
                   fn: T((f) => [
@@ -312,5 +315,5 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
   }
 });
 export {
-  Ve as default
+  je as default
 };

package/components/DataTable/DataTableRow.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as p, computed as k, openBlock as c, createElementBlock as a, normalizeClass as u, withModifiers as v, createElementVNode as m, createVNode as h, createCommentVNode as N, Fragment as B, renderList as M, renderSlot as V } from "vue";
-import z from "../CheckBox.vue.js";
-const F = ["data-state"], L = { class: "flex items-center justify-center" }, U = ["title", "innerHTML"], T = /* @__PURE__ */ p({
+import { defineComponent as k, computed as p, openBlock as c, createElementBlock as d, normalizeClass as u, withModifiers as v, createElementVNode as m, createVNode as N, createCommentVNode as B, Fragment as M, renderList as V, renderSlot as z } from "vue";
+import F from "../CheckBox.vue.js";
+const L = ["data-state"], U = { class: "flex items-center justify-center" }, h = ["title", "innerHTML"], T = /* @__PURE__ */ k({
   __name: "DataTableRow",
   props: {
     row: {},
@@ -14,27 +14,30 @@ const F = ["data-state"], L = { class: "flex items-center justify-center" }, U =
     compact: { type: Boolean, default: !1 }
   },
   emits: ["select", "rowClick"],
-  setup(t, { emit: f }) {
-    const s = t, d = f, r = (e, n) => n.split(".").reduce((i, l) => i?.[l], e), g = (e, n, i) => e.format ? e.format(n, i) : n == null ? "-" : e.type === "price" ? new Intl.NumberFormat("en-US", {
+  setup(i, { emit: f }) {
+    const r = i, a = f, o = (e, t) => {
+      if (!(!e || !t))
+        return t.includes(".") ? t.split(".").reduce((n, l) => n?.[l], e) : e[t];
+    }, g = (e, t, n) => e.format ? e.format(t, n) : t == null ? "-" : e.type === "price" ? new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD"
-    }).format(Number(n)) : e.type === "date" ? new Date(n).toLocaleDateString("en-US", {
+    }).format(Number(t)) : e.type === "date" ? new Date(t).toLocaleDateString("en-US", {
       year: "numeric",
       month: "short",
       day: "numeric"
-    }) : e.type === "number" ? new Intl.NumberFormat("en-US").format(Number(n)) : String(n), x = (e, n, i) => {
+    }) : e.type === "number" ? new Intl.NumberFormat("en-US").format(Number(t)) : String(t), x = (e, t, n) => {
       const l = [];
       if (e.capitalize && l.push("capitalize"), e.addStatusColor) {
-        const o = w(n);
-        o && l.push(o);
+        const s = w(t);
+        s && l.push(s);
       }
       if (typeof e.class == "function") {
-        const o = e.class(n, i);
-        o && l.push(o);
+        const s = e.class(t, n);
+        s && l.push(s);
       } else e.class && l.push(e.class);
       return l.join(" ");
     }, w = (e) => {
-      const n = {
+      const t = {
         active: "text-success font-medium",
         inactive: "text-muted-foreground",
         pending: "text-warning font-medium",
@@ -48,65 +51,65 @@ const F = ["data-state"], L = { class: "flex items-center justify-center" }, U =
         high: "text-destructive font-medium",
         medium: "text-warning font-medium",
         low: "text-muted-foreground"
-      }, i = String(e).toLowerCase().replace(/[-_\s]/g, "");
-      return n[i] || "";
-    }, b = (e) => ({
+      }, n = String(e).toLowerCase().replace(/[-_\s]/g, "");
+      return t[n] || "";
+    }, y = (e) => ({
       left: "text-left",
       center: "text-center",
       right: "text-right"
-    })[e.align || "left"], y = k(() => r(s.row, s.keyField)), C = () => {
-      d("rowClick", { row: s.row, index: s.index });
+    })[e.align || "left"], b = p(() => o(r.row, r.keyField)), C = () => {
+      a("rowClick", { row: r.row, index: r.index });
     }, S = () => {
-      d("select", y.value);
+      a("select", b.value);
     };
-    return (e, n) => (c(), a("tr", {
+    return (e, t) => (c(), d("tr", {
       class: u(["border-b border-border/70 transition-colors data-[state=selected]:bg-muted h-full", [
-        t.hoverable ? "hover:bg-muted/50" : "",
-        t.striped && t.index % 2 === 1 ? "bg-muted/20" : "bg-background",
-        t.isSelected ? "bg-muted! hover:bg-muted/30" : "",
+        i.hoverable ? "hover:bg-muted/50" : "",
+        i.striped && i.index % 2 === 1 ? "bg-muted/20" : "bg-background",
+        i.isSelected ? "bg-muted! hover:bg-muted/30" : "",
         "group"
       ]]),
-      "data-state": t.isSelected ? "selected" : void 0,
+      "data-state": i.isSelected ? "selected" : void 0,
       onClick: C
     }, [
-      t.selectable ? (c(), a("td", {
+      i.selectable ? (c(), d("td", {
         key: 0,
         class: "w-[48px] px-0 py-3 align-middle text-center",
         style: { width: "48px" },
-        onClick: n[0] || (n[0] = v(() => {
+        onClick: t[0] || (t[0] = v(() => {
         }, ["stop"]))
       }, [
-        m("div", L, [
-          h(z, {
-            "model-value": t.isSelected,
+        m("div", U, [
+          N(F, {
+            "model-value": i.isSelected,
             size: "xs",
             "onUpdate:modelValue": S
           }, null, 8, ["model-value"])
         ])
-      ])) : N("", !0),
-      (c(!0), a(B, null, M(t.headers, (i) => (c(), a("td", {
-        key: i.field,
+      ])) : B("", !0),
+      (c(!0), d(M, null, V(i.headers, (n) => (c(), d("td", {
+        key: n.field,
         class: u(["align-middle overflow-hidden", [
-          t.compact ? "p-2 text-xs" : "py-3! px-3 text-sm",
-          b(i),
-          i.hideOnMobile ? "hidden md:table-cell" : "",
-          x(i, r(t.row, i.field), t.row)
+          i.compact ? "p-2 text-xs" : "py-3! px-3 text-sm",
+          y(n),
+          n.hideOnMobile ? "hidden md:table-cell" : "",
+          x(n, o(i.row, n.field), i.row)
         ]])
       }, [
-        V(e.$slots, i.field, {
-          value: t.row,
-          row: t.row,
-          index: t.index,
-          field: i.field
+        z(e.$slots, n.field, {
+          value: o(i.row, n.field),
+          row: i.row,
+          index: i.index,
+          field: n.field
         }, () => [
           m("span", {
             class: "truncate block",
-            title: String(r(t.row, i.field)),
-            innerHTML: g(i, r(t.row, i.field), t.row)
-          }, null, 8, U)
+            title: String(o(i.row, n.field)),
+            innerHTML: g(n, o(i.row, n.field), i.row)
+          }, null, 8, h)
         ])
       ], 2))), 128))
-    ], 10, F));
+    ], 10, L));
   }
 });
 export {

package/components/Kanban/Kanban.vue.d.ts

@@ -0,0 +1,60 @@
+import { KanbanColumn, KanbanLoadDataResult, KanbanChangeEvent } from './types';
+type __VLS_Props = {
+    columns: KanbanColumn[];
+    group?: string;
+    itemKey?: string;
+    loadData?: (columnId: string | number, page: number) => Promise<KanbanLoadDataResult>;
+    data?: Record<string | number, any[]>;
+    boardClass?: string;
+    headerClass?: string;
+    bodyClass?: string;
+    draggableClass?: string;
+    ghostClass?: string;
+    class?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'column-header'?(_: {
+            column: KanbanColumn;
+            pageInfo: {
+                currentPage: number;
+                totalPages: number;
+                totalItems: number;
+            };
+        }): any;
+        'prepend-item'?(_: {
+            column: KanbanColumn;
+            items: any[];
+        }): any;
+        item?(_: {
+            item: any;
+            column: KanbanColumn;
+        }): any;
+        'append-item'?(_: {
+            column: KanbanColumn;
+            items: any[];
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (payload: KanbanChangeEvent) => any;
+    "update:data": (val: Record<string | number, any[]>) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: (payload: KanbanChangeEvent) => any;
+    "onUpdate:data"?: (val: Record<string | number, any[]>) => any;
+}>, {
+    class: string;
+    group: string;
+    itemKey: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/Kanban/Kanban.vue.js

@@ -0,0 +1,7 @@
+import o from "./Kanban.vue2.js";
+/* empty css            */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-11bc76c9"]]);
+export {
+  m as default
+};

package/components/Kanban/Kanban.vue2.js

@@ -0,0 +1,62 @@
+import { defineComponent as b, openBlock as n, createElementBlock as m, normalizeClass as C, Fragment as p, renderList as y, createBlock as k, withCtx as o, renderSlot as d, mergeProps as r } from "vue";
+import v from "./KanbanBoard.vue.js";
+const K = /* @__PURE__ */ b({
+  __name: "Kanban",
+  props: {
+    columns: {},
+    group: { default: "kanban-group" },
+    itemKey: { default: "id" },
+    loadData: {},
+    data: {},
+    boardClass: {},
+    headerClass: {},
+    bodyClass: {},
+    draggableClass: {},
+    ghostClass: {},
+    class: { default: "h-full w-full" }
+  },
+  emits: ["change", "update:data"],
+  setup(a, { emit: i }) {
+    const s = a, u = i, g = (e) => {
+      u("change", e);
+    }, f = (e, c) => {
+      s.data && u("update:data", { ...s.data, [e]: c });
+    }, h = (e) => s.data ? s.data[e] || [] : [];
+    return (e, c) => (n(), m("div", {
+      class: C(["flex gap-4 overflow-x-auto p-1 custom-scrollbar-x", s.class])
+    }, [
+      (n(!0), m(p, null, y(a.columns, (l) => (n(), k(v, {
+        key: l.id,
+        column: l,
+        group: a.group,
+        "item-key": a.itemKey,
+        "load-data": a.loadData,
+        "column-data": h(l.id),
+        "board-class": a.boardClass,
+        "header-class": a.headerClass,
+        "body-class": a.bodyClass,
+        "draggable-class": a.draggableClass,
+        "ghost-class": a.ghostClass,
+        onChange: g,
+        "onUpdate:columnData": (t) => f(l.id, t)
+      }, {
+        header: o((t) => [
+          d(e.$slots, "column-header", r({ ref_for: !0 }, t), void 0, !0)
+        ]),
+        "prepend-item": o((t) => [
+          d(e.$slots, "prepend-item", r({ ref_for: !0 }, t), void 0, !0)
+        ]),
+        item: o((t) => [
+          d(e.$slots, "item", r({ ref_for: !0 }, t), void 0, !0)
+        ]),
+        "append-item": o((t) => [
+          d(e.$slots, "append-item", r({ ref_for: !0 }, t), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["column", "group", "item-key", "load-data", "column-data", "board-class", "header-class", "body-class", "draggable-class", "ghost-class", "onUpdate:columnData"]))), 128))
+    ], 2));
+  }
+});
+export {
+  K as default
+};

package/components/Kanban/KanbanBoard.vue.d.ts

@@ -0,0 +1,59 @@
+import { KanbanColumn, KanbanLoadDataResult, KanbanChangeEvent } from './types';
+type __VLS_Props = {
+    column: KanbanColumn;
+    group?: string;
+    itemKey?: string;
+    loadData?: (columnId: string | number, page: number) => Promise<KanbanLoadDataResult>;
+    columnData?: any[];
+    boardClass?: string;
+    headerClass?: string;
+    bodyClass?: string;
+    draggableClass?: string;
+    ghostClass?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {
+            column: KanbanColumn;
+            pageInfo: {
+                currentPage: number;
+                totalPages: number;
+                totalItems: number;
+            };
+        }): any;
+        'prepend-item'?(_: {
+            column: KanbanColumn;
+            items: any[];
+        }): any;
+        item?(_: {
+            item: any;
+            column: KanbanColumn;
+        }): any;
+        'append-item'?(_: {
+            column: KanbanColumn;
+            items: any[];
+        }): any;
+    };
+    refs: {
+        scrollContainer: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (payload: KanbanChangeEvent) => any;
+    "update:columnData": (items: any[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: (payload: KanbanChangeEvent) => any;
+    "onUpdate:columnData"?: (items: any[]) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollContainer: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/Kanban/KanbanBoard.vue.js

@@ -0,0 +1,7 @@
+import o from "./KanbanBoard.vue2.js";
+/* empty css                 */
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ a(o, [["__scopeId", "data-v-d8186e60"]]);
+export {
+  p as default
+};

package/components/Kanban/KanbanBoard.vue2.js

@@ -0,0 +1,132 @@
+import { defineComponent as B, ref as K, watch as U, onMounted as j, openBlock as n, createElementBlock as s, normalizeClass as u, createElementVNode as r, renderSlot as m, unref as a, toDisplayString as g, createVNode as f, Fragment as b, withCtx as z, renderList as E, createCommentVNode as L } from "vue";
+import { VueDraggable as M } from "vue-draggable-plus";
+import p from "../Spinner/Spinner.vue.js";
+import { useKanbanBoard as V } from "./useKanbanBoard.js";
+const F = { class: "flex items-center justify-between font-semibold text-foreground" }, H = { class: "text-xs bg-muted text-muted-foreground px-2 py-0.5 rounded-full font-medium" }, J = {
+  key: 0,
+  class: "flex-1 flex items-center justify-center min-h-[100px]"
+}, O = { class: "bg-card p-3 rounded-md shadow-sm border border-border text-sm" }, A = {
+  key: 0,
+  class: "py-4 flex justify-center shrink-0"
+}, P = /* @__PURE__ */ B({
+  __name: "KanbanBoard",
+  props: {
+    column: {},
+    group: {},
+    itemKey: {},
+    loadData: { type: Function },
+    columnData: {},
+    boardClass: {},
+    headerClass: {},
+    bodyClass: {},
+    draggableClass: {},
+    ghostClass: {}
+  },
+  emits: ["change", "update:columnData"],
+  setup(o, { emit: v }) {
+    const t = o, c = v, y = K(null), { items: l, isInitialLoading: x, isLoadingMore: C, pageInfo: h, loadInitial: D, loadMore: k } = V(
+      t.column.id,
+      t.loadData,
+      t.columnData
+    ), I = (e) => {
+      l.value = e, c("update:columnData", e);
+    };
+    U(
+      () => t.columnData,
+      (e) => {
+        e && JSON.stringify(e) !== JSON.stringify(l.value) && (l.value = [...e]);
+      },
+      { deep: !0 }
+    ), j(() => {
+      t.loadData && (!t.columnData || t.columnData.length === 0) && D();
+    });
+    const S = (e) => {
+      const i = e.target;
+      i.scrollTop + i.clientHeight >= i.scrollHeight - 50 && k();
+    }, N = (e) => {
+      c("change", { type: "add", event: e, columnId: t.column.id });
+    }, $ = (e) => {
+      c("change", { type: "remove", event: e, columnId: t.column.id });
+    }, w = (e) => {
+      c("change", { type: "update", event: e, columnId: t.column.id });
+    };
+    return (e, i) => (n(), s("div", {
+      class: u([
+        "flex flex-col bg-muted/40 rounded-lg overflow-hidden shrink-0 border border-border/50",
+        o.boardClass || "w-80"
+      ])
+    }, [
+      r("div", {
+        class: u(["p-3 border-b border-border/50 bg-background/50", o.headerClass])
+      }, [
+        m(e.$slots, "header", {
+          column: o.column,
+          pageInfo: a(h)
+        }, () => [
+          r("div", F, [
+            r("span", null, g(o.column.title), 1),
+            r("span", H, g(a(h).totalItems), 1)
+          ])
+        ], !0)
+      ], 2),
+      r("div", {
+        ref_key: "scrollContainer",
+        ref: y,
+        class: u(["flex-1 flex flex-col overflow-y-auto p-3 custom-scrollbar", o.bodyClass]),
+        onScroll: S
+      }, [
+        a(x) && a(l).length === 0 ? (n(), s("div", J, [
+          f(p, {
+            size: "md",
+            color: "primary"
+          })
+        ])) : (n(), s(b, { key: 1 }, [
+          m(e.$slots, "prepend-item", {
+            column: o.column,
+            items: a(l)
+          }, void 0, !0),
+          f(a(M), {
+            "model-value": a(l),
+            "onUpdate:modelValue": I,
+            group: o.group,
+            animation: 150,
+            ghostClass: o.ghostClass || "kanban-ghost",
+            class: u(["flex-1 flex flex-col gap-3 min-h-[50px] py-1", o.draggableClass]),
+            onAdd: N,
+            onRemove: $,
+            onUpdate: w
+          }, {
+            default: z(() => [
+              (n(!0), s(b, null, E(a(l), (d) => (n(), s("div", {
+                key: d[o.itemKey || "id"],
+                class: "cursor-grab active:cursor-grabbing"
+              }, [
+                m(e.$slots, "item", {
+                  item: d,
+                  column: o.column
+                }, () => [
+                  r("div", O, g(d.title || d.name || d.id), 1)
+                ], !0)
+              ]))), 128))
+            ]),
+            _: 3
+          }, 8, ["model-value", "group", "ghostClass", "class"]),
+          m(e.$slots, "append-item", {
+            column: o.column,
+            items: a(l)
+          }, void 0, !0),
+          a(C) ? (n(), s("div", A, [
+            f(p, {
+              size: "sm",
+              variant: "dots",
+              color: "primary"
+            })
+          ])) : L("", !0)
+        ], 64))
+      ], 34)
+    ], 2));
+  }
+});
+export {
+  P as default
+};