vlite3 1.0.4 → 1.0.6

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

@@ -1,17 +1,4 @@
-import { KanbanColumn, KanbanLoadDataResult, KanbanChangeEvent, KanbanMoveEvent } 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;
-};
+import { KanbanColumn, KanbanChangeEvent, KanbanMoveEvent, KanbanProps } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -40,18 +27,22 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare const __VLS_component: import('vue').DefineComponent<KanbanProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (payload: KanbanChangeEvent) => any;
     move: (payload: KanbanMoveEvent) => any;
     "update:data": (val: Record<string | number, any[]>) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "item-moved": (itemId: string | number, toColumnId: string | number, newPosition: number, item: any) => any;
+}, string, import('vue').PublicProps, Readonly<KanbanProps> & Readonly<{
     onChange?: (payload: KanbanChangeEvent) => any;
     onMove?: (payload: KanbanMoveEvent) => any;
     "onUpdate:data"?: (val: Record<string | number, any[]>) => any;
+    "onItem-moved"?: (itemId: string | number, toColumnId: string | number, newPosition: number, item: any) => any;
 }>, {
     class: string;
     group: string;
     itemKey: string;
+    groupKey: string;
+    positionKey: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/components/Kanban/Kanban.vue.js

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

package/components/Kanban/Kanban.vue2.js

@@ -1,6 +1,6 @@
-import { defineComponent as C, ref as h, openBlock as c, createElementBlock as i, normalizeClass as b, Fragment as x, renderList as k, createBlock as w, withCtx as r, renderSlot as m, mergeProps as u } from "vue";
-import K from "./KanbanBoard.vue.js";
-const $ = /* @__PURE__ */ C({
+import { defineComponent as x, ref as g, watch as k, openBlock as v, createElementBlock as h, normalizeClass as B, Fragment as D, renderList as w, createBlock as P, withCtx as i, renderSlot as m, mergeProps as c } from "vue";
+import E from "./KanbanBoard.vue.js";
+const A = /* @__PURE__ */ x({
   __name: "Kanban",
   props: {
     columns: {},
@@ -8,6 +8,9 @@ const $ = /* @__PURE__ */ C({
     itemKey: { default: "id" },
     loadData: {},
     data: {},
+    rawData: {},
+    groupKey: { default: "status" },
+    positionKey: { default: "position" },
     boardClass: {},
     headerClass: {},
     bodyClass: {},
@@ -15,62 +18,91 @@ const $ = /* @__PURE__ */ C({
     ghostClass: {},
     class: { default: "h-full w-full" }
   },
-  emits: ["change", "move", "update:data"],
-  setup(t, { emit: v }) {
-    const d = t, s = v, o = h({}), f = (e) => {
-      if (s("change", e), e.type === "remove" ? o.value.remove = { columnId: e.columnId, event: e.event } : e.type === "add" ? o.value.add = { columnId: e.columnId, event: e.event } : e.type === "update" && s("move", {
-        itemId: e.event.data?.[d.itemKey] || e.event.item?._underlying_vm_?.[d.itemKey],
+  emits: ["change", "move", "update:data", "item-moved"],
+  setup(r, { emit: C }) {
+    const n = r, d = C, l = g({}), u = g({});
+    k(
+      [() => n.data, () => n.rawData],
+      ([e, o]) => {
+        if (o && Array.isArray(o)) {
+          const t = {};
+          n.columns.forEach((a) => t[a.id] = []), o.forEach((a) => {
+            const s = a[n.groupKey];
+            t[s] ? t[s].push({ ...a }) : t[s] = [{ ...a }];
+          }), Object.keys(t).forEach((a) => {
+            t[a].sort((s, y) => (s[n.positionKey] || 0) - (y[n.positionKey] || 0));
+          }), u.value = t;
+        } else e && (u.value = { ...e });
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const b = (e, o) => {
+      let t = 0, a = 0;
+      return o > 0 && (t = Number(e[o - 1]?.[n.positionKey]) || 0), o < e.length - 1 && (a = Number(e[o + 1]?.[n.positionKey]) || 0), t === 0 && a === 0 ? 1024 : t === 0 ? a / 2 : a === 0 ? t + 1024 : (t + a) / 2;
+    }, f = (e, o) => {
+      const t = u.value[e];
+      if (!t) return;
+      const a = t[o];
+      if (!a) return;
+      const s = b(t, o);
+      a[n.positionKey] = s, a[n.groupKey] = e, d("item-moved", a[n.itemKey], e, s, a);
+    }, I = (e) => {
+      if (d("change", e), e.type === "remove" ? l.value.remove = { columnId: e.columnId, event: e.event } : e.type === "add" ? l.value.add = { columnId: e.columnId, event: e.event } : e.type === "update" && (f(e.columnId, e.event.newIndex), d("move", {
+        itemId: e.event.data?.[n.itemKey] || e.event.item?._underlying_vm_?.[n.itemKey],
         item: e.event.data,
         fromColumnId: e.columnId,
         toColumnId: e.columnId,
         oldIndex: e.event.oldIndex,
         newIndex: e.event.newIndex
-      }), o.value.remove && o.value.add) {
-        const { remove: l, add: a } = o.value;
-        s("move", {
-          itemId: a.event.data?.[d.itemKey],
-          item: a.event.data,
-          fromColumnId: l.columnId,
-          toColumnId: a.columnId,
-          oldIndex: l.event.oldIndex,
-          newIndex: a.event.newIndex
-        }), o.value = {};
+      })), l.value.remove && l.value.add) {
+        const { remove: o, add: t } = l.value;
+        f(t.columnId, t.event.newIndex), d("move", {
+          itemId: t.event.data?.[n.itemKey],
+          item: t.event.data,
+          fromColumnId: o.columnId,
+          toColumnId: t.columnId,
+          oldIndex: o.event.oldIndex,
+          newIndex: t.event.newIndex
+        }), l.value = {};
       }
       setTimeout(() => {
-        o.value = {};
+        l.value = {};
       }, 100);
-    }, g = (e, l) => {
-      d.data && s("update:data", { ...d.data, [e]: l });
-    }, I = (e) => d.data ? d.data[e] || [] : [];
-    return (e, l) => (c(), i("div", {
-      class: b(["flex gap-4 overflow-x-auto p-1 custom-scrollbar-x scrollable-container", d.class])
+    }, K = (e, o) => {
+      u.value[e] = o, n.data && d("update:data", { ...n.data, [e]: o });
+    }, p = (e) => u.value[e] || [];
+    return (e, o) => (v(), h("div", {
+      class: B([
+        "flex gap-4 overflow-x-auto p-1 custom-scrollbar-x scrollable-container",
+        n.class
+      ])
     }, [
-      (c(!0), i(x, null, k(t.columns, (a) => (c(), w(K, {
-        key: a.id,
-        column: a,
-        group: t.group,
-        "item-key": t.itemKey,
-        "load-data": t.loadData,
-        "column-data": I(a.id),
-        "board-class": t.boardClass,
-        "header-class": t.headerClass,
-        "body-class": t.bodyClass,
-        "draggable-class": t.draggableClass,
-        "ghost-class": t.ghostClass,
-        onChange: f,
-        "onUpdate:columnData": (n) => g(a.id, n)
+      (v(!0), h(D, null, w(r.columns, (t) => (v(), P(E, {
+        key: t.id,
+        column: t,
+        group: r.group,
+        "item-key": r.itemKey,
+        "load-data": r.loadData,
+        "column-data": p(t.id),
+        "board-class": r.boardClass,
+        "header-class": r.headerClass,
+        "body-class": r.bodyClass,
+        "draggable-class": r.draggableClass,
+        "ghost-class": r.ghostClass,
+        onChange: I,
+        "onUpdate:columnData": (a) => K(t.id, a)
       }, {
-        header: r((n) => [
-          m(e.$slots, "column-header", u({ ref_for: !0 }, n), void 0, !0)
+        header: i((a) => [
+          m(e.$slots, "column-header", c({ ref_for: !0 }, a), void 0, !0)
         ]),
-        "prepend-item": r((n) => [
-          m(e.$slots, "prepend-item", u({ ref_for: !0 }, n), void 0, !0)
+        "prepend-item": i((a) => [
+          m(e.$slots, "prepend-item", c({ ref_for: !0 }, a), void 0, !0)
         ]),
-        item: r((n) => [
-          m(e.$slots, "item", u({ ref_for: !0 }, n), void 0, !0)
+        item: i((a) => [
+          m(e.$slots, "item", c({ ref_for: !0 }, a), void 0, !0)
         ]),
-        "append-item": r((n) => [
-          m(e.$slots, "append-item", u({ ref_for: !0 }, n), void 0, !0)
+        "append-item": i((a) => [
+          m(e.$slots, "append-item", c({ ref_for: !0 }, a), 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))
@@ -78,5 +110,5 @@ const $ = /* @__PURE__ */ C({
   }
 });
 export {
-  $ as default
+  A as default
 };

package/components/Kanban/KanbanBoard.vue.js

@@ -1,7 +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-3a733454"]]);
+const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-50fa2cb8"]]);
 export {
-  p as default
+  m as default
 };

package/components/Kanban/KanbanBoard.vue2.js

@@ -26,38 +26,38 @@ const P = { class: "flex items-center justify-between font-semibold text-foregro
   },
   emits: ["change", "update:columnData"],
   setup(o, { emit: C }) {
-    const k = V(() => import("../Spinner/Spinner.vue2.js")), t = o, m = C, D = j(null), { items: s, isInitialLoading: I, isLoadingMore: S, pageInfo: w, loadInitial: B, loadMore: K } = q(
-      t.column.id,
-      t.loadData,
-      t.columnData
+    const k = V(() => import("../Spinner/Spinner.vue2.js")), l = o, m = C, D = j(null), { items: s, isInitialLoading: I, isLoadingMore: w, pageInfo: S, loadInitial: B, loadMore: K } = q(
+      l.column.id,
+      l.loadData,
+      l.columnData
     ), N = (e) => {
       s.value = e, m("update:columnData", e);
     };
     z(
-      () => t.columnData,
+      () => l.columnData,
       (e) => {
         e && JSON.stringify(e) !== JSON.stringify(s.value) && (s.value = [...e]);
       },
       { deep: !0 }
     ), A(() => {
-      t.loadData && (!t.columnData || t.columnData.length === 0) && B();
+      l.loadData && (!l.columnData || l.columnData.length === 0) && B();
     });
     const $ = (e) => {
-      const l = e.target;
-      l.scrollTop + l.clientHeight >= l.scrollHeight - 50 && K();
+      const t = e.target;
+      t.scrollTop + t.clientHeight >= t.scrollHeight - 50 && K();
     }, M = (e) => {
-      m("change", { type: "add", event: e, columnId: t.column.id });
+      m("change", { type: "add", event: e, columnId: l.column.id });
     }, U = (e) => {
-      m("change", { type: "remove", event: e, columnId: t.column.id });
+      m("change", { type: "remove", event: e, columnId: l.column.id });
     }, E = (e) => {
-      m("change", { type: "update", event: e, columnId: t.column.id });
+      m("change", { type: "update", event: e, columnId: l.column.id });
     }, L = F(
-      () => t.column.titleI18n ? G(t.column.titleI18n) : t.column.title
+      () => l.column.titleI18n ? G(l.column.titleI18n) : l.column.title
     );
-    return (e, l) => (d(), i("div", {
+    return (e, t) => (d(), i("div", {
       class: c([
-        "flex flex-col bg-card rounded-lg overflow-hidden shrink-0 border border-border/60",
-        o.boardClass || "w-80"
+        "flex flex-col bg-card rounded-lg overflow-hidden shrink-0 border border-border/50 w-full flex-1 min-w-75",
+        o.boardClass
       ])
     }, [
       r("div", {
@@ -65,7 +65,7 @@ const P = { class: "flex items-center justify-between font-semibold text-foregro
       }, [
         g(e.$slots, "header", {
           column: o.column,
-          pageInfo: n(w)
+          pageInfo: n(S)
         }, () => [
           r("div", P, [
             r("span", null, y(L.value), 1)
@@ -82,13 +82,13 @@ const P = { class: "flex items-center justify-between font-semibold text-foregro
         onScroll: $
       }, [
         n(I) && n(s).length === 0 ? (d(), i("div", Q, [
-          l[0] || (v(-1, !0), (l[0] = (d(), i(f, null, h(3, (a) => r("div", {
+          t[0] || (v(-1, !0), (t[0] = (d(), i(f, null, h(3, (a) => r("div", {
             key: "skeleton-" + a,
             class: "bg-body p-3 rounded-md shadow-sm border border-border animate-pulse flex flex-col gap-3"
-          }, [...l[3] || (l[3] = [
+          }, [...t[3] || (t[3] = [
             r("div", { class: "h-4 bg-muted/60 rounded w-2/3" }, null, -1),
             r("div", { class: "h-3 bg-muted/60 rounded w-1/3" }, null, -1)
-          ])])), 64))).cacheIndex = 0, v(1), l[0])
+          ])])), 64))).cacheIndex = 0, v(1), t[0])
         ])) : (d(), i(f, { key: 1 }, [
           g(e.$slots, "prepend-item", {
             column: o.column,
@@ -121,7 +121,7 @@ const P = { class: "flex items-center justify-between font-semibold text-foregro
                   ], !0)
                 ]));
                 return p.memo = b, p;
-              }, l, 1), 128))
+              }, t, 1), 128))
             ]),
             _: 3
           }, 8, ["model-value", "group", "ghostClass", "class"]),
@@ -129,7 +129,7 @@ const P = { class: "flex items-center justify-between font-semibold text-foregro
             column: o.column,
             items: n(s)
           }, void 0, !0),
-          n(S) ? (d(), i("div", X, [
+          n(w) ? (d(), i("div", X, [
             x(n(k), {
               size: "sm",
               variant: "dots",

package/components/Kanban/types.d.ts

@@ -39,6 +39,9 @@ export interface KanbanProps {
     itemKey?: string;
     loadData?: (columnId: string | number, page: number) => Promise<KanbanLoadDataResult>;
     data?: Record<string | number, any[]>;
+    rawData?: any[];
+    groupKey?: string;
+    positionKey?: string;
     boardClass?: string;
     headerClass?: string;
     bodyClass?: string;