vlite3 0.2.7 → 0.2.9

package/components/Kanban/KanbanBoard.vue2.js

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

package/components/Kanban/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Kanban } from './Kanban.vue';
+export { default as KanbanBoard } from './KanbanBoard.vue';
+export * from './types';
+export * from './useKanbanBoard';

package/components/Kanban/types.d.ts

@@ -0,0 +1,32 @@
+export interface KanbanPageInfo {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+}
+export interface KanbanLoadDataResult<T = any> {
+    items: T[];
+    pageInfo: KanbanPageInfo;
+}
+export interface KanbanColumn {
+    id: string | number;
+    title: string;
+    [key: string]: any;
+}
+export interface KanbanChangeEvent {
+    type: 'add' | 'remove' | 'update';
+    event: any;
+    columnId: string | number;
+}
+export interface KanbanProps {
+    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;
+}

package/components/Kanban/useKanbanBoard.d.ts

@@ -0,0 +1,13 @@
+import { KanbanLoadDataResult } from './types';
+export declare function useKanbanBoard(columnId: string | number, loadDataFn?: (columnId: string | number, page: number) => Promise<KanbanLoadDataResult>, initialData?: any[]): {
+    items: import('vue').Ref<any[], any[]>;
+    isInitialLoading: import('vue').Ref<boolean, boolean>;
+    isLoadingMore: import('vue').Ref<boolean, boolean>;
+    pageInfo: {
+        currentPage: number;
+        totalPages: number;
+        totalItems: number;
+    };
+    loadInitial: () => Promise<void>;
+    loadMore: () => Promise<void>;
+};

package/components/Kanban/useKanbanBoard.js

@@ -0,0 +1,43 @@
+import { ref as l, reactive as g } from "vue";
+function I(c, a, r) {
+  const o = l(r ? [...r] : []), n = l(!1), s = l(!1), t = g({
+    currentPage: 1,
+    totalPages: 1,
+    totalItems: r ? r.length : 0
+  });
+  return {
+    items: o,
+    isInitialLoading: n,
+    isLoadingMore: s,
+    pageInfo: t,
+    loadInitial: async () => {
+      if (a) {
+        n.value = !0;
+        try {
+          const e = await a(c, 1);
+          o.value = e.items, t.currentPage = e.pageInfo.currentPage, t.totalPages = e.pageInfo.totalPages, t.totalItems = e.pageInfo.totalItems;
+        } catch (e) {
+          console.error(e);
+        } finally {
+          n.value = !1;
+        }
+      }
+    },
+    loadMore: async () => {
+      if (!(!a || n.value || s.value) && !(t.currentPage >= t.totalPages)) {
+        s.value = !0;
+        try {
+          const e = await a(c, t.currentPage + 1);
+          o.value = [...o.value, ...e.items], t.currentPage = e.pageInfo.currentPage, t.totalPages = e.pageInfo.totalPages, t.totalItems = e.pageInfo.totalItems;
+        } catch (e) {
+          console.error(e);
+        } finally {
+          s.value = !1;
+        }
+      }
+    }
+  };
+}
+export {
+  I as useKanbanBoard
+};

package/components/Workbook/Workbook.vue.d.ts

@@ -8,7 +8,6 @@ declare function __VLS_template(): {
     };
     refs: {
         scrollContainer: HTMLDivElement;
-        parent: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
 };
@@ -47,7 +46,6 @@ declare const __VLS_component: import('vue').DefineComponent<WorkbookProps, {},
     maxSheets: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     scrollContainer: HTMLDivElement;
-    parent: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/components/Workbook/Workbook.vue.js

@@ -1,7 +1,154 @@
-import o from "./Workbook.vue2.js";
-/* empty css              */
-import r from "../../_virtual/_plugin-vue_export-helper.js";
-const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-833e6dc5"]]);
+import { defineComponent as N, ref as m, watch as b, nextTick as T, computed as P, openBlock as i, createElementBlock as o, createElementVNode as r, renderSlot as v, createCommentVNode as f, createVNode as g, unref as A, withCtx as J, Fragment as O, renderList as W, createBlock as Y } from "vue";
+import { VueDraggable as z } from "vue-draggable-plus";
+import F from "./Sheet.vue.js";
+import p from "./WorkbookAddButton.vue.js";
+const L = { class: "flex flex-col w-full font-sans" }, M = { class: "flex items-end w-full border-b px-1" }, j = {
+  key: 0,
+  class: "flex items-center"
+}, q = {
+  key: 0,
+  class: "shrink-0 mb-1"
+}, G = { class: "flex items-center mb-0.5 z-20 sticky right-0 ml-auto box-decoration-clone" }, H = { key: 0 }, K = { key: 1 }, Q = { class: "flex-1 relative bg-white w-full" }, ee = /* @__PURE__ */ N({
+  __name: "Workbook",
+  props: {
+    modelValue: { default: "" },
+    sheets: { default: () => [] },
+    editable: { type: Boolean, default: !0 },
+    addable: { type: Boolean, default: !0 },
+    draggable: { type: Boolean, default: !0 },
+    addButtonPosition: { default: "fixed-right" },
+    maxSheets: { default: 50 },
+    variant: { default: "chrome" },
+    class: {},
+    itemClass: { default: "" },
+    activeItemClass: { default: "" },
+    inactiveItemClass: { default: "" },
+    confirmDelete: { type: Boolean, default: !1 },
+    confirmDeleteTexts: {},
+    allowIconChange: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue", "update:sheets", "change", "add", "delete", "duplicate", "edit-start", "edit-end"],
+  setup(d, { emit: k }) {
+    const l = d, n = k, h = m(null), c = m(null), u = m([...l.sheets]);
+    b(
+      () => l.sheets,
+      (e) => {
+        JSON.stringify(e) !== JSON.stringify(u.value) && (u.value = [...e]);
+      },
+      { deep: !0 }
+    );
+    const w = (e) => {
+      u.value = e, n("update:sheets", e);
+    }, y = (e) => {
+      n("update:modelValue", e), n("change", e);
+    }, x = () => {
+      l.sheets.length >= l.maxSheets || n("add");
+    }, C = (e, s) => {
+      const t = l.sheets.findIndex((a) => a.id === e);
+      if (t !== -1) {
+        const a = [...l.sheets];
+        a[t] = { ...a[t], title: s }, n("update:sheets", a);
+      }
+    }, S = (e, s) => {
+      const t = l.sheets.findIndex((a) => a.id === e);
+      if (t !== -1) {
+        const a = [...l.sheets];
+        a[t] = { ...a[t], icon: s }, n("update:sheets", a);
+      }
+    }, I = (e) => {
+      c.value = e, n("edit-start", e);
+    }, V = (e) => {
+      c.value = null, n("edit-end", e);
+    }, B = (e) => {
+      n("duplicate", e);
+    }, D = (e) => {
+      const s = l.sheets.findIndex((a) => a.id === e);
+      if (s === -1) return;
+      const t = [...l.sheets];
+      if (t.splice(s, 1), n("update:sheets", t), n("delete", e), l.modelValue === e) {
+        let a = "";
+        if (t.length > 0) {
+          const U = Math.min(s, t.length - 1);
+          a = t[U].id;
+        }
+        n("update:modelValue", a), n("change", a);
+      }
+    };
+    b(
+      () => l.sheets.length,
+      (e, s) => {
+        s !== void 0 && s > 0 && e === s + 1 && l.addable && T(() => {
+          const t = l.sheets[l.sheets.length - 1];
+          t.id === l.modelValue && (c.value = t.id);
+        });
+      }
+    );
+    const E = (e) => {
+      h.value && e.deltaY !== 0 && (h.value.scrollLeft += e.deltaY, e.preventDefault());
+    }, $ = P(() => l.sheets.length > 1);
+    return (e, s) => (i(), o("div", L, [
+      r("div", M, [
+        e.$slots["left-addons"] ? (i(), o("div", j, [
+          v(e.$slots, "left-addons")
+        ])) : f("", !0),
+        r("div", {
+          ref_key: "scrollContainer",
+          ref: h,
+          class: "flex-1 flex items-end overflow-x-auto scrollbar-none overscroll-contain",
+          style: { "scrollbar-width": "none", "-ms-overflow-style": "none" },
+          onWheel: E
+        }, [
+          g(A(z), {
+            "model-value": u.value,
+            "onUpdate:modelValue": w,
+            disabled: !l.draggable || !!c.value,
+            animation: 150,
+            class: "flex items-end"
+          }, {
+            default: J(() => [
+              (i(!0), o(O, null, W(u.value, (t) => (i(), Y(F, {
+                key: t.id,
+                sheet: t,
+                "is-active": d.modelValue === t.id,
+                "is-editing": c.value === t.id,
+                "can-delete": $.value,
+                "confirm-delete": d.confirmDelete,
+                "confirm-delete-texts": d.confirmDeleteTexts,
+                "allow-icon-change": d.allowIconChange,
+                "item-class": d.itemClass,
+                "active-item-class": d.activeItemClass,
+                "inactive-item-class": d.inactiveItemClass,
+                onSelect: y,
+                "onUpdate:title": C,
+                "onUpdate:icon": S,
+                onEditStart: I,
+                onEditEnd: V,
+                onDuplicate: B,
+                onDelete: D
+              }, null, 8, ["sheet", "is-active", "is-editing", "can-delete", "confirm-delete", "confirm-delete-texts", "allow-icon-change", "item-class", "active-item-class", "inactive-item-class"]))), 128))
+            ]),
+            _: 1
+          }, 8, ["model-value", "disabled"]),
+          d.addable && d.addButtonPosition === "attached" ? (i(), o("div", q, [
+            g(p, { onClick: x })
+          ])) : f("", !0),
+          s[0] || (s[0] = r("div", { class: "w-1 shrink-0" }, null, -1))
+        ], 544),
+        r("div", G, [
+          d.addable && d.addButtonPosition === "fixed-right" ? (i(), o("div", H, [
+            g(p, { onClick: x })
+          ])) : f("", !0),
+          e.$slots["right-addons"] ? (i(), o("div", K, [
+            v(e.$slots, "right-addons")
+          ])) : f("", !0)
+        ])
+      ]),
+      r("div", Q, [
+        v(e.$slots, "default")
+      ])
+    ]));
+  }
+});
 export {
-  _ as default
+  ee as default
 };

package/components/Workbook/Workbook.vue2.js

@@ -1,154 +1,4 @@
-import { defineComponent as T, ref as g, watch as x, nextTick as U, computed as A, openBlock as d, createElementBlock as o, createElementVNode as c, renderSlot as m, createCommentVNode as u, Fragment as P, renderList as J, unref as O, createBlock as W, createVNode as p } from "vue";
-import { useDragAndDrop as Y } from "@formkit/drag-and-drop/vue";
-import { animations as z } from "@formkit/drag-and-drop";
-import F from "./Sheet.vue.js";
-import b from "./WorkbookAddButton.vue.js";
-const L = { class: "flex flex-col w-full font-sans" }, M = { class: "flex items-end w-full border-b px-1" }, j = {
-  key: 0,
-  class: "flex items-center"
-}, q = {
-  key: 0,
-  class: "shrink-0 mb-1"
-}, G = { class: "flex items-center mb-0.5 z-20 sticky right-0 ml-auto box-decoration-clone" }, H = { key: 0 }, K = { key: 1 }, Q = { class: "flex-1 relative bg-white w-full" }, te = /* @__PURE__ */ T({
-  __name: "Workbook",
-  props: {
-    modelValue: { default: "" },
-    sheets: { default: () => [] },
-    editable: { type: Boolean, default: !0 },
-    addable: { type: Boolean, default: !0 },
-    draggable: { type: Boolean, default: !0 },
-    addButtonPosition: { default: "fixed-right" },
-    maxSheets: { default: 50 },
-    variant: { default: "chrome" },
-    class: {},
-    itemClass: { default: "" },
-    activeItemClass: { default: "" },
-    inactiveItemClass: { default: "" },
-    confirmDelete: { type: Boolean, default: !1 },
-    confirmDeleteTexts: {},
-    allowIconChange: { type: Boolean, default: !0 }
-  },
-  emits: ["update:modelValue", "update:sheets", "change", "add", "delete", "duplicate", "edit-start", "edit-end"],
-  setup(i, { emit: k }) {
-    const l = i, a = k, f = g(null), r = g(null), [w, h] = Y(l.sheets, {
-      plugins: [z()],
-      draggable: (e) => l.draggable && !r.value,
-      onSort: (e) => {
-        a("update:sheets", e.values);
-      }
-    });
-    x(
-      () => l.sheets,
-      (e) => {
-        JSON.stringify(e) !== JSON.stringify(h.value) && (h.value = [...e]);
-      },
-      { deep: !0 }
-    );
-    const y = (e) => {
-      a("update:modelValue", e), a("change", e);
-    }, v = () => {
-      l.sheets.length >= l.maxSheets || a("add");
-    }, C = (e, n) => {
-      const t = l.sheets.findIndex((s) => s.id === e);
-      if (t !== -1) {
-        const s = [...l.sheets];
-        s[t] = { ...s[t], title: n }, a("update:sheets", s);
-      }
-    }, S = (e, n) => {
-      const t = l.sheets.findIndex((s) => s.id === e);
-      if (t !== -1) {
-        const s = [...l.sheets];
-        s[t] = { ...s[t], icon: n }, a("update:sheets", s);
-      }
-    }, I = (e) => {
-      r.value = e, a("edit-start", e);
-    }, D = (e) => {
-      r.value = null, a("edit-end", e);
-    }, B = (e) => {
-      a("duplicate", e);
-    }, V = (e) => {
-      const n = l.sheets.findIndex((s) => s.id === e);
-      if (n === -1) return;
-      const t = [...l.sheets];
-      if (t.splice(n, 1), a("update:sheets", t), a("delete", e), l.modelValue === e) {
-        let s = "";
-        if (t.length > 0) {
-          const N = Math.min(n, t.length - 1);
-          s = t[N].id;
-        }
-        a("update:modelValue", s), a("change", s);
-      }
-    };
-    x(
-      () => l.sheets.length,
-      (e, n) => {
-        n !== void 0 && n > 0 && e === n + 1 && l.addable && U(() => {
-          const t = l.sheets[l.sheets.length - 1];
-          t.id === l.modelValue && (r.value = t.id);
-        });
-      }
-    );
-    const E = (e) => {
-      f.value && e.deltaY !== 0 && (f.value.scrollLeft += e.deltaY, e.preventDefault());
-    }, $ = A(() => l.sheets.length > 1);
-    return (e, n) => (d(), o("div", L, [
-      c("div", M, [
-        e.$slots["left-addons"] ? (d(), o("div", j, [
-          m(e.$slots, "left-addons", {}, void 0, !0)
-        ])) : u("", !0),
-        c("div", {
-          ref_key: "scrollContainer",
-          ref: f,
-          class: "flex-1 flex items-end overflow-x-auto scrollbar-none overscroll-contain",
-          style: { "scrollbar-width": "none", "-ms-overflow-style": "none" },
-          onWheel: E
-        }, [
-          c("div", {
-            ref_key: "parent",
-            ref: w,
-            class: "flex items-end"
-          }, [
-            (d(!0), o(P, null, J(O(h), (t) => (d(), W(F, {
-              key: t.id,
-              sheet: t,
-              "is-active": i.modelValue === t.id,
-              "is-editing": r.value === t.id,
-              "can-delete": $.value,
-              "confirm-delete": i.confirmDelete,
-              "confirm-delete-texts": i.confirmDeleteTexts,
-              "allow-icon-change": i.allowIconChange,
-              "item-class": i.itemClass,
-              "active-item-class": i.activeItemClass,
-              "inactive-item-class": i.inactiveItemClass,
-              onSelect: y,
-              "onUpdate:title": C,
-              "onUpdate:icon": S,
-              onEditStart: I,
-              onEditEnd: D,
-              onDuplicate: B,
-              onDelete: V
-            }, null, 8, ["sheet", "is-active", "is-editing", "can-delete", "confirm-delete", "confirm-delete-texts", "allow-icon-change", "item-class", "active-item-class", "inactive-item-class"]))), 128))
-          ], 512),
-          i.addable && i.addButtonPosition === "attached" ? (d(), o("div", q, [
-            p(b, { onClick: v })
-          ])) : u("", !0),
-          n[0] || (n[0] = c("div", { class: "w-1 shrink-0" }, null, -1))
-        ], 544),
-        c("div", G, [
-          i.addable && i.addButtonPosition === "fixed-right" ? (d(), o("div", H, [
-            p(b, { onClick: v })
-          ])) : u("", !0),
-          e.$slots["right-addons"] ? (d(), o("div", K, [
-            m(e.$slots, "right-addons", {}, void 0, !0)
-          ])) : u("", !0)
-        ])
-      ]),
-      c("div", Q, [
-        m(e.$slots, "default", {}, void 0, !0)
-      ])
-    ]));
-  }
-});
+import f from "./Workbook.vue.js";
 export {
-  te as default
+  f as default
 };

package/index.d.ts

@@ -22,6 +22,7 @@ export * from './components/Heatmap';
 export { default as Icon } from './components/Icon.vue';
 export { default as IconPicker } from './components/IconPicker.vue';
 export { default as Input } from './components/Input.vue';
+export * from './components/Kanban';
 export { default as NumberInput } from './components/NumberInput.vue';
 export { default as Label } from './components/Label.vue';
 export { default as Logo } from './components/Logo.vue';
@@ -46,7 +47,6 @@ export { default as Tooltip } from './components/Tooltip.vue';
 export * from './components/Workbook';
 export { default as GoogleLogin } from './components/GoogleLogin.vue';
 export * from './components/ProgressBar';
-export * from './components/Spinner';
 export * from './composables/useNotifications';
 export * from './composables/useTheme';
 export * from './composables/useKeyStroke';