vlite3 0.2.8 → 0.2.11

package/components/Form/FormField.vue.js

@@ -1,15 +1,20 @@
-import { defineComponent as T, defineAsyncComponent as f, computed as n, markRaw as j, openBlock as r, createBlock as u, mergeProps as s, toHandlers as C, createSlots as E, unref as L, withCtx as o, createVNode as S, createTextVNode as m, toDisplayString as p, createCommentVNode as A, resolveDynamicComponent as H } from "vue";
-import { isComponent as g, isAddonObject as v } from "./utils/form.utils.js";
-import M from "../NumberInput.vue.js";
-import h from "../Button.vue.js";
-import y from "../Input.vue.js";
-import q from "../Switch.vue.js";
-import G from "../CheckBox.vue.js";
-import J from "../Textarea.vue.js";
-import K from "../FilePicker/FilePicker.vue.js";
-import Q from "../AvatarUploader/AvatarUploader.vue.js";
-import k from "../Dropdown/Dropdown.vue.js";
-const oe = /* @__PURE__ */ T({
+import { defineComponent as N, computed as n, markRaw as P, openBlock as r, createBlock as u, mergeProps as f, toHandlers as R, createSlots as B, unref as C, withCtx as o, createVNode as L, createTextVNode as c, toDisplayString as m, createCommentVNode as $, resolveDynamicComponent as O } from "vue";
+import { isComponent as h, isAddonObject as p } from "./utils/form.utils.js";
+import I from "../NumberInput.vue.js";
+import v from "../Button.vue.js";
+import g from "../Input.vue.js";
+import T from "../Switch.vue.js";
+import j from "../CheckBox.vue.js";
+import D from "../Textarea.vue.js";
+import E from "../FilePicker/FilePicker.vue.js";
+import H from "../AvatarUploader/AvatarUploader.vue.js";
+import y from "../Dropdown/Dropdown.vue.js";
+import q from "../MultiSelect/MultiSelect.vue.js";
+import G from "../DatePicker.vue.js";
+import J from "../ColorPicker/ColorPicker.vue.js";
+import K from "../IconPicker.vue.js";
+import M from "./CustomFields.vue.js";
+const fe = /* @__PURE__ */ N({
   __name: "FormField",
   props: {
     field: {},
@@ -24,15 +29,15 @@ const oe = /* @__PURE__ */ T({
     isUpdate: { type: Boolean, default: !1 }
   },
   emits: ["change", "addonChange", "addonAction"],
-  setup(a, { emit: w }) {
-    const z = f(() => import("../MultiSelect/MultiSelect.vue2.js")), $ = f(() => import("../DatePicker.vue2.js")), P = f(() => import("../ColorPicker/ColorPicker.vue2.js")), U = f(() => import("../IconPicker.vue2.js")), F = f(() => import("./CustomFields.vue.js")), e = a, c = w, d = (t, l) => {
-      c("change", { value: t, data: l });
-    }, N = (t) => {
-      c("change", { value: t });
-    }, B = n(() => {
+  setup(l, { emit: S }) {
+    const e = l, s = S, d = (t, a) => {
+      s("change", { value: t, data: a });
+    }, w = (t) => {
+      s("change", { value: t });
+    }, A = n(() => {
       const t = e.field.type;
-      if (g(t))
-        return j(t);
+      if (h(t))
+        return P(t);
       switch (t) {
         case "text":
         case "email":
@@ -40,43 +45,43 @@ const oe = /* @__PURE__ */ T({
         case "tel":
         case "url":
         case "search":
-          return y;
+          return g;
         case "number":
-          return M;
+          return I;
         case "textarea":
-          return J;
+          return D;
         case "switch":
-          return q;
+          return T;
         case "check":
-          return G;
+          return j;
         case "select":
-          return k;
+          return y;
         case "multiSelect":
-          return z;
+          return q;
         case "date":
         case "time":
-          return $;
+          return G;
         case "file":
         case "fileUploader":
-          return K;
+          return E;
         case "avatarUpload":
-          return Q;
+          return H;
         case "color":
-          return P;
+          return J;
         case "iconPicker":
-          return U;
+          return K;
         case "customFields":
-          return F;
+          return M;
         default:
-          return y;
+          return g;
       }
     }), V = n(() => {
-      const t = e.field.type, l = {
+      const t = e.field.type, a = {
         disabled: e.disabled || e.field.disabled === !0,
         ...e.field.props || {}
       };
       return t === "text" || t === "email" || t === "password" || t === "tel" || t === "url" || t === "search" || !t ? {
-        ...l,
+        ...a,
         modelValue: e.value ?? "",
         type: t || "text",
         placeholder: e.field.placeholder,
@@ -94,7 +99,7 @@ const oe = /* @__PURE__ */ T({
         max: e.field.max,
         class: e.field.className
       } : t === "number" ? {
-        ...l,
+        ...a,
         modelValue: e.value ?? void 0,
         min: e.field.min,
         max: e.field.max,
@@ -106,40 +111,40 @@ const oe = /* @__PURE__ */ T({
         placeholder: e.field.placeholder,
         class: e.field.className
       } : t === "textarea" ? {
-        ...l,
+        ...a,
         modelValue: e.value ?? "",
         placeholder: e.field.placeholder,
         rows: e.field.props?.rows || 3,
         class: e.field.className
       } : t === "switch" ? {
-        ...l,
+        ...a,
         modelValue: !!e.value,
         label: ""
         // Label handled externally
       } : t === "check" ? {
-        ...l,
+        ...a,
         modelValue: !!e.value,
         label: ""
         // Label handled externally
       } : t === "select" ? {
-        ...l,
+        ...a,
         modelValue: e.value,
         options: e.field.options || [],
         placeholder: e.field.placeholder,
         selectable: !0,
         closeOnSelect: !0
       } : t === "multiSelect" ? {
-        ...l,
+        ...a,
         modelValue: Array.isArray(e.value) ? e.value : [],
         options: e.field.options || [],
         placeholder: e.field.placeholder
       } : t === "date" || t === "time" ? {
-        ...l,
+        ...a,
         modelValue: e.value,
         mode: t === "time" ? "time" : "date",
         placeholder: e.field.placeholder
       } : t === "fileUploader" || t === "file" ? {
-        ...l,
+        ...a,
         modelValue: e.value,
         multiSelect: e.field.props?.multiple || !1,
         fileTypes: e.field.props?.accept ? e.field.props.accept.split(",") : [],
@@ -149,17 +154,17 @@ const oe = /* @__PURE__ */ T({
         size: e.size,
         rounded: e.rounded
       } : t === "avatarUpload" ? {
-        ...l,
+        ...a,
         modelValue: e.value,
         editable: !e.readonly
       } : t === "color" ? {
-        ...l,
+        ...a,
         modelValue: e.value || "#000000"
       } : t === "iconPicker" ? {
-        ...l,
+        ...a,
         value: e.value || "lucide:smile"
       } : t === "customFields" ? {
-        ...l,
+        ...a,
         modelValue: Array.isArray(e.value) ? e.value : [],
         schema: e.field.props?.schema || [],
         headers: e.field.props?.headers || [],
@@ -168,132 +173,132 @@ const oe = /* @__PURE__ */ T({
         size: e.size,
         rounded: e.rounded,
         isUpdate: e.isUpdate
-      } : g(t) ? {
-        ...l,
+      } : h(t) ? {
+        ...a,
         value: e.value,
         values: e.values
-      } : l;
+      } : a;
     }), b = n(() => {
       const t = e.field.type;
       return t === "text" || t === "email" || t === "password" || t === "tel" || t === "url" || t === "search" || t === "textarea" || t === "switch" || t === "check" || t === "number" || !t ? {
-        "update:modelValue": N
+        "update:modelValue": w
       } : t === "select" ? {
-        onSelect: (l) => {
-          d(l.value, l.data);
+        onSelect: (a) => {
+          d(a.value, a.data);
         }
       } : t === "multiSelect" ? {
-        change: (l) => d(l)
+        change: (a) => d(a)
       } : t === "date" || t === "time" ? {
-        change: (l) => d(l)
+        change: (a) => d(a)
       } : t === "fileUploader" || t === "file" ? {
-        change: (l) => {
-          d(l);
+        change: (a) => {
+          d(a);
         },
-        "update:modelValue": (l) => {
-          d(l);
+        "update:modelValue": (a) => {
+          d(a);
         }
       } : t === "avatarUpload" ? {
-        change: (l) => {
-          d(l);
+        change: (a) => {
+          d(a);
         },
-        "update:modelValue": (l) => {
-          d(l);
+        "update:modelValue": (a) => {
+          d(a);
         }
       } : t === "color" ? {
-        change: (l) => d(l)
+        change: (a) => d(a)
       } : t === "iconPicker" ? {
-        onSelect: (l) => d(l)
+        onSelect: (a) => d(a)
       } : t === "customFields" ? {
-        change: (l) => d(l)
-      } : g(t) ? {
-        onChange: (l) => {
-          d(l.value, l.data);
+        change: (a) => d(a)
+      } : h(t) ? {
+        onChange: (a) => {
+          d(a.value, a.data);
         }
       } : {};
-    }), O = n(() => v(e.field.addonLeft) || v(e.field.addonRight)), I = n(() => {
+    }), z = n(() => p(e.field.addonLeft) || p(e.field.addonRight)), U = n(() => {
       const t = e.field.type;
       return t === "text" || t === "email" || t === "password" || t === "tel" || t === "url" || t === "search" || !t;
-    }), D = n(() => O.value && I.value), x = (t, l) => {
-      c("addonChange", t.name, { value: l.value });
-    }, R = (t) => {
-      t.action && c("addonAction", t.action);
+    }), F = n(() => z.value && U.value), k = (t, a) => {
+      s("addonChange", t.name, { value: a.value });
+    }, x = (t) => {
+      t.action && s("addonAction", t.action);
     };
-    return (t, l) => D.value ? (r(), u(y, s({ key: 0 }, {
+    return (t, a) => F.value ? (r(), u(g, f({ key: 0 }, {
       ...V.value,
-      ...a.field?.props || {}
-    }, C(b.value)), E({ _: 2 }, [
-      L(v)(a.field.addonLeft) ? {
+      ...l.field?.props || {}
+    }, R(b.value)), B({ _: 2 }, [
+      C(p)(l.field.addonLeft) ? {
         name: "addon-left",
         fn: o(() => [
-          a.field.addonLeft.type === "select" ? (r(), u(k, s({
+          l.field.addonLeft.type === "select" ? (r(), u(y, f({
             key: 0,
-            modelValue: a.values[a.field.addonLeft.name],
-            options: a.field.addonLeft.options || []
-          }, a.field.addonLeft.props || {}, {
-            onOnSelect: l[0] || (l[0] = (i) => x(a.field.addonLeft, i))
+            modelValue: l.values[l.field.addonLeft.name],
+            options: l.field.addonLeft.options || []
+          }, l.field.addonLeft.props || {}, {
+            onOnSelect: a[0] || (a[0] = (i) => k(l.field.addonLeft, i))
           }), {
             trigger: o(({ selectedLabel: i }) => [
-              S(h, { variant: "outline" }, {
+              L(v, { variant: "outline" }, {
                 default: o(() => [
-                  m(p(i), 1)
+                  c(m(i), 1)
                 ]),
                 _: 2
               }, 1024)
             ]),
             _: 1
-          }, 16, ["modelValue", "options"])) : a.field.addonLeft.type === "button" ? (r(), u(h, s({
+          }, 16, ["modelValue", "options"])) : l.field.addonLeft.type === "button" ? (r(), u(v, f({
             key: 1,
             variant: "outline"
-          }, a.field.addonLeft.props || {}, {
-            onClick: l[1] || (l[1] = (i) => R(a.field.addonLeft))
+          }, l.field.addonLeft.props || {}, {
+            onClick: a[1] || (a[1] = (i) => x(l.field.addonLeft))
           }), {
             default: o(() => [
-              m(p(a.field.addonLeft.text), 1)
+              c(m(l.field.addonLeft.text), 1)
             ]),
             _: 1
-          }, 16)) : A("", !0)
+          }, 16)) : $("", !0)
         ]),
         key: "0"
       } : void 0,
-      L(v)(a.field.addonRight) ? {
+      C(p)(l.field.addonRight) ? {
         name: "addon-right",
         fn: o(() => [
-          a.field.addonRight.type === "select" ? (r(), u(k, s({
+          l.field.addonRight.type === "select" ? (r(), u(y, f({
             key: 0,
-            modelValue: a.values[a.field.addonRight.name],
-            options: a.field.addonRight.options || []
-          }, a.field.addonRight.props || {}, {
-            onOnSelect: l[2] || (l[2] = (i) => x(a.field.addonRight, i))
+            modelValue: l.values[l.field.addonRight.name],
+            options: l.field.addonRight.options || []
+          }, l.field.addonRight.props || {}, {
+            onOnSelect: a[2] || (a[2] = (i) => k(l.field.addonRight, i))
           }), {
             trigger: o(({ selectedLabel: i }) => [
-              S(h, { variant: "outline" }, {
+              L(v, { variant: "outline" }, {
                 default: o(() => [
-                  m(p(i), 1)
+                  c(m(i), 1)
                 ]),
                 _: 2
               }, 1024)
             ]),
             _: 1
-          }, 16, ["modelValue", "options"])) : a.field.addonRight.type === "button" ? (r(), u(h, s({
+          }, 16, ["modelValue", "options"])) : l.field.addonRight.type === "button" ? (r(), u(v, f({
             key: 1,
             variant: "outline"
-          }, a.field.addonRight.props || {}, {
-            onClick: l[3] || (l[3] = (i) => R(a.field.addonRight))
+          }, l.field.addonRight.props || {}, {
+            onClick: a[3] || (a[3] = (i) => x(l.field.addonRight))
           }), {
             default: o(() => [
-              m(p(a.field.addonRight.text), 1)
+              c(m(l.field.addonRight.text), 1)
             ]),
             _: 1
-          }, 16)) : A("", !0)
+          }, 16)) : $("", !0)
         ]),
         key: "1"
       } : void 0
-    ]), 1040)) : (r(), u(H(B.value), s({ key: 1 }, {
+    ]), 1040)) : (r(), u(O(A.value), f({ key: 1 }, {
       ...V.value,
-      ...a.field?.props || {}
-    }, C(b.value)), null, 16));
+      ...l.field?.props || {}
+    }, R(b.value)), null, 16));
   }
 });
 export {
-  oe as default
+  fe 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-d8186e60"]]);
+const p = /* @__PURE__ */ a(o, [["__scopeId", "data-v-9ac38977"]]);
 export {
   p as default
 };

package/components/Kanban/KanbanBoard.vue2.js

@@ -1,14 +1,14 @@
-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 = {
+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 items-center justify-center min-h-[100px]"
-}, O = { class: "bg-card p-3 rounded-md shadow-sm border border-border text-sm" }, A = {
+  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"
-}, P = /* @__PURE__ */ B({
+}, G = /* @__PURE__ */ B({
   __name: "KanbanBoard",
   props: {
     column: {},
@@ -24,88 +24,90 @@ const F = { class: "flex items-center justify-between font-semibold text-foregro
   },
   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);
+    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(
-      () => t.columnData,
+      () => l.columnData,
       (e) => {
-        e && JSON.stringify(e) !== JSON.stringify(l.value) && (l.value = [...e]);
+        e && JSON.stringify(e) !== JSON.stringify(a.value) && (a.value = [...e]);
       },
       { deep: !0 }
-    ), j(() => {
-      t.loadData && (!t.columnData || t.columnData.length === 0) && D();
+    ), E(() => {
+      l.loadData && (!l.columnData || l.columnData.length === 0) && k();
     });
-    const S = (e) => {
-      const i = e.target;
-      i.scrollTop + i.clientHeight >= i.scrollHeight - 50 && 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) => {
-      c("change", { type: "add", event: e, columnId: t.column.id });
+      i("change", { type: "remove", event: e, columnId: l.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 });
+      i("change", { type: "update", event: e, columnId: l.column.id });
     };
-    return (e, i) => (n(), s("div", {
+    return (e, c) => (r(), d("div", {
       class: u([
-        "flex flex-col bg-muted/40 rounded-lg overflow-hidden shrink-0 border border-border/50",
+        "flex flex-col bg-card rounded-lg overflow-hidden shrink-0 border border-border/60",
         o.boardClass || "w-80"
       ])
     }, [
-      r("div", {
-        class: u(["p-3 border-b border-border/50 bg-background/50", o.headerClass])
+      n("div", {
+        class: u(["p-3 border-b border-border/80 ", o.headerClass])
       }, [
         m(e.$slots, "header", {
           column: o.column,
-          pageInfo: a(h)
+          pageInfo: t(C)
         }, () => [
-          r("div", F, [
-            r("span", null, g(o.column.title), 1),
-            r("span", H, g(a(h).totalItems), 1)
+          n("div", F, [
+            n("span", null, f(o.column.title), 1)
           ])
         ], !0)
       ], 2),
-      r("div", {
+      n("div", {
         ref_key: "scrollContainer",
-        ref: y,
-        class: u(["flex-1 flex flex-col overflow-y-auto p-3 custom-scrollbar", o.bodyClass]),
-        onScroll: S
+        ref: p,
+        class: u(["flex-1 flex flex-col overflow-y-auto p-3  custom-scrollbar", o.bodyClass]),
+        onScroll: I
       }, [
-        a(x) && a(l).length === 0 ? (n(), s("div", J, [
-          f(p, {
-            size: "md",
-            color: "primary"
-          })
-        ])) : (n(), s(b, { key: 1 }, [
+        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: a(l)
+            items: t(a)
           }, void 0, !0),
-          f(a(M), {
-            "model-value": a(l),
-            "onUpdate:modelValue": I,
+          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-3 min-h-[50px] py-1", o.draggableClass]),
-            onAdd: N,
-            onRemove: $,
-            onUpdate: w
+            class: u(["flex-1 flex flex-col  gap-2 min-h-[50px] py-1", o.draggableClass]),
+            onAdd: S,
+            onRemove: N,
+            onUpdate: $
           }, {
-            default: z(() => [
-              (n(!0), s(b, null, E(a(l), (d) => (n(), s("div", {
-                key: d[o.itemKey || "id"],
+            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: d,
+                  item: s,
                   column: o.column
                 }, () => [
-                  r("div", O, g(d.title || d.name || d.id), 1)
+                  n("div", J, f(s.title || s.name || s.id), 1)
                 ], !0)
               ]))), 128))
             ]),
@@ -113,20 +115,20 @@ const F = { class: "flex items-center justify-between font-semibold text-foregro
           }, 8, ["model-value", "group", "ghostClass", "class"]),
           m(e.$slots, "append-item", {
             column: o.column,
-            items: a(l)
+            items: t(a)
           }, void 0, !0),
-          a(C) ? (n(), s("div", A, [
-            f(p, {
+          t(x) ? (r(), d("div", O, [
+            h(j, {
               size: "sm",
               variant: "dots",
               color: "primary"
             })
-          ])) : L("", !0)
+          ])) : M("", !0)
         ], 64))
       ], 34)
     ], 2));
   }
 });
 export {
-  P as default
+  G as default
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.2.8",
+  "version": "0.2.11",
   "type": "module",
   "main": "index.js",
   "module": "index.js",