vlite3 1.1.1 → 1.1.4

package/components/CategoryManager/CategoryManager.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as Y, ref as c, watch as Z, computed as I, provide as ee, openBlock as g, createElementBlock as V, createElementVNode as u, renderSlot as te, createBlock as R, withCtx as U, createTextVNode as $, createCommentVNode as z, createVNode as f, toDisplayString as O, withDirectives as oe, withKeys as F, vModelText as ne, unref as re } from "vue";
-import le from "./CategoryNode.vue.js";
-import de from "../Modal.vue.js";
-import ie from "../Form/Form.vue.js";
-import ae from "../Icon.vue.js";
+import { defineComponent as ne, ref as v, watch as R, computed as D, provide as oe, openBlock as x, createElementBlock as V, createElementVNode as f, renderSlot as re, createBlock as $, withCtx as _, createTextVNode as F, createCommentVNode as A, createVNode as g, toDisplayString as J, withDirectives as le, withKeys as B, vModelText as ie, unref as de } from "vue";
+import ae from "./CategoryNode.vue.js";
+import se from "../Modal.vue.js";
+import ue from "../Form/Form.vue.js";
+import ce from "../Icon.vue.js";
 /* empty css                  */
-import D from "../Button.vue.js";
+import E from "../Button.vue.js";
 import "../../core/config.js";
 /* empty css            */
 import "vue-draggable-plus";
@@ -17,27 +17,28 @@ import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
 /* empty css                          */
-import se from "../IconPicker.vue.js";
+import me from "../IconPicker.vue.js";
 /* empty css                        */
 /* empty css                      */
 import { getUniqueId as N } from "../../utils/functions.js";
-const ue = { class: "category-manager-container w-full bg-muted/10 rounded-xl border border-border p-4 lg:p-6" }, ce = { class: "flex items-center justify-between mb-6" }, me = {
+const fe = { class: "category-manager-container w-full bg-muted/10 rounded-xl border border-border p-4 lg:p-6" }, pe = { class: "flex items-center justify-between mb-6" }, ve = {
   key: 0,
   class: "flex flex-col items-center justify-center py-10 px-4 text-center border border-dashed border-border rounded-xl bg-background"
-}, fe = { class: "w-12 h-12 bg-muted rounded-full flex items-center justify-center mb-4" }, pe = { class: "text-base font-medium text-foreground" }, ve = { class: "text-sm text-muted-foreground mt-1 max-w-sm" }, he = {
+}, he = { class: "w-12 h-12 bg-muted rounded-full flex items-center justify-center mb-4" }, ge = { class: "text-base font-medium text-foreground" }, ye = { class: "text-sm text-muted-foreground mt-1 max-w-sm" }, xe = {
   key: 1,
   class: "w-full tree-wrapper scrollable-container",
   style: { "will-change": "transform", contain: "layout style" }
-}, ge = {
+}, be = {
   key: 0,
   class: "flex items-center gap-1.5 py-1.5 px-2 bg-background border border-border shadow-sm rounded-lg w-full mt-2"
-}, ye = {
+}, we = {
   class: "modal-body",
   style: { "will-change": "transform", contain: "layout style" }
-}, je = /* @__PURE__ */ Y({
+}, Pe = /* @__PURE__ */ ne({
   __name: "CategoryManager",
   props: {
     modelValue: { default: () => [] },
+    rawData: { default: void 0 },
     formSchema: {},
     readonly: { type: Boolean, default: !1 },
     emptyTitle: { default: "No Categories Found" },
@@ -45,199 +46,257 @@ const ue = { class: "category-manager-container w-full bg-muted/10 rounded-xl bo
     size: { default: "md" }
   },
   emits: ["update:modelValue", "onAdd", "onEdit", "onDelete", "onReorder"],
-  setup(y, { emit: B }) {
-    const b = y, s = B, i = c([]), x = c(/* @__PURE__ */ new Set()), w = (t) => JSON.parse(JSON.stringify(t)), A = (t) => {
-      t.forEach((e) => {
-        e.children || (e.children = []), A(e.children);
+  setup(b, { emit: j }) {
+    const w = b, c = j, d = v([]), I = v(/* @__PURE__ */ new Set()), s = (t) => JSON.parse(JSON.stringify(t)), p = (t, e = null) => {
+      t.forEach((n, l) => {
+        n.parentId = e, n.position = l, n.children || (n.children = []), p(n.children, n.id);
       });
+    }, q = (t) => {
+      const e = /* @__PURE__ */ new Map(), n = [];
+      t.forEach((o) => {
+        e.set(o.id, {
+          ...o,
+          id: o.id,
+          title: o.name || o.title || "Untitled",
+          icon: o.icon,
+          parentId: o.parentId || null,
+          position: o.position ?? 0,
+          children: []
+        });
+      }), t.forEach((o) => {
+        const r = e.get(o.id);
+        r && (o.parentId && e.has(o.parentId) ? e.get(o.parentId).children.push(r) : n.push(r));
+      });
+      const l = (o) => {
+        o.sort((r, a) => (r.position ?? 0) - (a.position ?? 0)), o.forEach((r) => {
+          r.children && l(r.children);
+        });
+      };
+      return l(n), n;
     };
-    Z(
-      () => b.modelValue,
+    R(
+      () => w.rawData,
       (t) => {
-        const e = JSON.stringify(t), o = JSON.stringify(i.value);
-        if (e !== o) {
-          const r = w(t);
-          A(r), i.value = r;
+        if (t && t.length > 0) {
+          const e = q(t);
+          p(e);
+          const n = JSON.stringify(e), l = JSON.stringify(d.value);
+          if (n !== l) {
+            const o = s(e);
+            d.value = o, c("update:modelValue", o);
+          }
+        }
+      },
+      { immediate: !0, deep: !0 }
+    ), R(
+      () => w.modelValue,
+      (t) => {
+        const e = JSON.stringify(t), n = JSON.stringify(d.value);
+        if (e !== n && t.length > 0) {
+          const l = s(t);
+          p(l), d.value = l;
         }
       },
       { immediate: !0, deep: !0 }
     );
-    const p = (t = !1) => {
-      const e = w(i.value);
-      s("update:modelValue", e), t && s("onReorder", e);
-    }, J = (t) => {
-      const e = new Set(x.value);
-      e.has(t) ? e.delete(t) : e.add(t), x.value = e;
-    }, a = c({
+    const y = () => {
+      p(d.value);
+      const t = s(d.value);
+      c("update:modelValue", t);
+    }, K = (t) => {
+      const e = new Set(I.value);
+      e.has(t) ? e.delete(t) : e.add(t), I.value = e;
+    }, u = v({
       mode: null,
       targetId: null,
       title: "",
       icon: "lucide:folder"
-    }), _ = (t, e) => {
-      a.value = {
+    }), M = (t, e) => {
+      u.value = {
         mode: t,
         targetId: t === "add-child" && e || null,
         title: "",
         icon: "lucide:folder"
-      }, t === "add-child" && e && x.value.add(e);
+      }, t === "add-child" && e && I.value.add(e);
     }, S = () => {
-      a.value = { mode: null, targetId: null, title: "", icon: "lucide:folder" };
+      u.value = { mode: null, targetId: null, title: "", icon: "lucide:folder" };
     }, T = () => {
-      const { mode: t, targetId: e, title: o, icon: r } = a.value;
-      if (!o.trim()) return;
-      const d = [...i.value];
-      if (t === "add-root") {
-        const l = { id: N(), title: o, icon: r, children: [] };
-        d.push(l), s("onAdd", l);
-      } else if (t === "add-child") {
-        const l = { id: N(), title: o, icon: r, children: [] }, n = (v) => {
-          for (const h of v) {
-            if (h.id === e)
-              return h.children || (h.children = []), h.children.push(l), !0;
-            if (h.children && n(h.children)) return !0;
+      const { mode: t, targetId: e, title: n, icon: l } = u.value;
+      if (!n.trim()) return;
+      const o = [...d.value];
+      let r = null;
+      if (t === "add-root")
+        r = { id: N(), title: n, icon: l, children: [] }, o.push(r);
+      else if (t === "add-child") {
+        r = { id: N(), title: n, icon: l, children: [] };
+        const a = (m) => {
+          for (const i of m) {
+            if (i.id === e)
+              return i.children || (i.children = []), i.children.push(r), !0;
+            if (i.children && a(i.children)) return !0;
           }
           return !1;
         };
-        n(d), s("onAdd", l);
+        a(o);
       }
-      i.value = d, p(), S();
-    }, C = c(!1), m = c("add"), k = c(null), E = c(null), M = c({}), j = [
+      r && (p(o), c("onAdd", s(r))), d.value = o, y(), S();
+    }, k = v(!1), h = v("add"), U = v(null), z = v(null), O = v({}), P = [
       { name: "icon", label: "Category Icon", type: "iconPicker" },
       { name: "title", label: "Title", type: "text", required: !0 },
       { name: "description", label: "Description", type: "textarea", props: { rows: 3 } }
-    ], q = I(() => b.formSchema || j), K = I(() => m.value === "add" ? "Add Category" : m.value === "add-child" ? "Add Sub-category" : "Edit Category"), P = (t, e, o) => {
-      m.value = t, k.value = e || null, E.value = o || null, M.value = e ? w(e) : {}, C.value = !0;
-    }, G = async (t) => {
-      const e = t?.values || t, o = [...i.value];
-      if (m.value === "add") {
+    ], G = D(() => w.formSchema || P), H = D(() => h.value === "add" ? "Add Category" : h.value === "add-child" ? "Add Sub-category" : "Edit Category"), L = (t, e, n) => {
+      h.value = t, U.value = e || null, z.value = n || null, O.value = e ? s(e) : {}, k.value = !0;
+    }, Q = async (t) => {
+      const e = t?.values || t, n = [...d.value];
+      let l = null, o = null;
+      if (h.value === "add") {
         const r = { id: N(), children: [], ...e };
-        o.push(r), s("onAdd", r);
-      } else if (m.value === "add-child") {
-        const r = { id: N(), children: [], ...e }, d = (l) => {
-          for (const n of l) {
-            if (n.id === E.value)
-              return n.children || (n.children = []), n.children.push(r), x.value.add(n.id), !0;
-            if (n.children && d(n.children)) return !0;
+        n.push(r), l = r, o = "onAdd";
+      } else if (h.value === "add-child") {
+        const r = { id: N(), children: [], ...e }, a = (m) => {
+          for (const i of m) {
+            if (i.id === z.value)
+              return i.children || (i.children = []), i.children.push(r), I.value.add(i.id), !0;
+            if (i.children && a(i.children)) return !0;
           }
           return !1;
         };
-        d(o), s("onAdd", r);
-      } else if (m.value === "edit" && k.value) {
-        const r = k.value.id, d = (l) => {
-          const n = l.findIndex((v) => v.id === r);
-          if (n > -1)
-            return l[n] = { ...l[n], ...e }, !0;
-          for (const v of l)
-            if (v.children && d(v.children)) return !0;
+        a(n), l = r, o = "onAdd";
+      } else if (h.value === "edit" && U.value) {
+        const r = U.value.id, a = (m) => {
+          const i = m.findIndex((C) => C.id === r);
+          if (i > -1)
+            return m[i] = { ...m[i], ...e }, l = m[i], !0;
+          for (const C of m)
+            if (C.children && a(C.children)) return !0;
           return !1;
         };
-        d(o), s("onEdit", { ...k.value, ...e });
+        a(n), o = "onEdit";
       }
-      i.value = o, p(), t && typeof t.setSubmitting == "function" && t.setSubmitting(!1), C.value = !1;
-    }, H = (t) => {
-      const e = t.id, o = (d) => {
-        const l = d.findIndex((n) => n.id === e);
-        if (l > -1)
-          return d.splice(l, 1), !0;
-        for (const n of d)
-          if (n.children && o(n.children)) return !0;
+      p(n), l && (o === "onAdd" ? c("onAdd", s(l)) : o === "onEdit" && c("onEdit", s(l))), d.value = n, y(), t && typeof t.setSubmitting == "function" && t.setSubmitting(!1), k.value = !1;
+    }, W = (t) => {
+      const e = t.id, n = (o) => {
+        const r = o.findIndex((a) => a.id === e);
+        if (r > -1)
+          return o.splice(r, 1), !0;
+        for (const a of o)
+          if (a.children && n(a.children)) return !0;
+        return !1;
+      }, l = [...d.value];
+      n(l), p(l), d.value = l, c("onDelete", s(t)), y();
+    }, X = (t) => {
+      c("onEdit", s(t)), y();
+    }, Y = (t) => {
+      d.value = [...t], y();
+    }, Z = () => {
+      y();
+    }, ee = (t) => {
+      p(d.value);
+      const e = s(d.value);
+      c("update:modelValue", e);
+      let n = null;
+      const l = (o) => {
+        for (const r of o) {
+          if (String(r.id) === String(t))
+            return n = r, !0;
+          if (r.children && l(r.children)) return !0;
+        }
         return !1;
-      }, r = [...i.value];
-      o(r), i.value = r, s("onDelete", t), p();
-    }, L = (t) => {
-      s("onEdit", w(t)), p();
-    }, Q = (t) => {
-      i.value = [...t], p(!0);
-    }, W = () => {
-      p(!0);
+      };
+      l(e), n && c("onReorder", {
+        id: n.id,
+        parentId: n.parentId ?? null,
+        position: n.position ?? 0
+      });
     };
-    ee("categoryManager", {
-      expandedIds: x,
-      inlineState: a,
-      toggleExpand: J,
-      startInline: _,
+    oe("categoryManager", {
+      expandedIds: I,
+      inlineState: u,
+      toggleExpand: K,
+      startInline: M,
       saveInline: T,
       cancelInline: S,
-      saveItem: L,
-      openModalForm: P,
-      deleteItem: H,
-      readonly: I(() => b.readonly),
-      size: I(() => b.size)
+      saveItem: X,
+      openModalForm: L,
+      deleteItem: W,
+      readonly: D(() => w.readonly),
+      size: D(() => w.size)
     });
-    const X = {
+    const te = {
       mounted: (t) => {
         setTimeout(() => t.focus(), 10);
       }
     };
-    return (t, e) => (g(), V("div", ue, [
-      u("div", ce, [
-        te(t.$slots, "header", {}, () => [
-          e[6] || (e[6] = u("div", null, [
-            u("h3", { class: "text-lg font-bold text-foreground" }, "Categories"),
-            u("p", { class: "text-sm text-muted-foreground mt-0.5" }, "Manage your hierarchical structure.")
+    return (t, e) => (x(), V("div", fe, [
+      f("div", pe, [
+        re(t.$slots, "header", {}, () => [
+          e[6] || (e[6] = f("div", null, [
+            f("h3", { class: "text-lg font-bold text-foreground" }, "Categories"),
+            f("p", { class: "text-sm text-muted-foreground mt-0.5" }, "Manage your hierarchical structure.")
           ], -1)),
-          y.readonly ? z("", !0) : (g(), R(D, {
+          b.readonly ? A("", !0) : (x(), $(E, {
             key: 0,
             variant: "primary",
             icon: "lucide:plus",
             size: "sm",
-            onClick: e[0] || (e[0] = (o) => _("add-root"))
+            onClick: e[0] || (e[0] = (n) => M("add-root"))
           }, {
-            default: U(() => [...e[5] || (e[5] = [
-              $(" Add Category ", -1)
+            default: _(() => [...e[5] || (e[5] = [
+              F(" Add Category ", -1)
             ])]),
             _: 1
           }))
         ])
       ]),
-      i.value.length === 0 && a.value.mode !== "add-root" ? (g(), V("div", me, [
-        u("div", fe, [
-          f(ae, {
+      d.value.length === 0 && u.value.mode !== "add-root" ? (x(), V("div", ve, [
+        f("div", he, [
+          g(ce, {
             icon: "lucide:folder-tree",
             class: "w-6 h-6 text-muted-foreground"
           })
         ]),
-        u("h4", pe, O(y.emptyTitle), 1),
-        u("p", ve, O(y.emptyDescription), 1),
-        y.readonly ? z("", !0) : (g(), R(D, {
+        f("h4", ge, J(b.emptyTitle), 1),
+        f("p", ye, J(b.emptyDescription), 1),
+        b.readonly ? A("", !0) : (x(), $(E, {
           key: 0,
           variant: "outline",
           size: "sm",
           class: "mt-5",
           icon: "lucide:plus",
-          onClick: e[1] || (e[1] = (o) => _("add-root"))
+          onClick: e[1] || (e[1] = (n) => M("add-root"))
         }, {
-          default: U(() => [...e[7] || (e[7] = [
-            $(" Create Category ", -1)
+          default: _(() => [...e[7] || (e[7] = [
+            F(" Create Category ", -1)
           ])]),
           _: 1
         }))
-      ])) : (g(), V("div", he, [
-        f(le, {
-          modelValue: i.value,
-          "onUpdate:modelValue": Q,
-          onChange: W
+      ])) : (x(), V("div", xe, [
+        g(ae, {
+          modelValue: d.value,
+          "onUpdate:modelValue": Y,
+          onChange: Z,
+          onDragEnd: ee
         }, null, 8, ["modelValue"]),
-        a.value.mode === "add-root" ? (g(), V("div", ge, [
-          f(se, {
-            modelValue: a.value.icon,
-            "onUpdate:modelValue": e[2] || (e[2] = (o) => a.value.icon = o),
+        u.value.mode === "add-root" ? (x(), V("div", be, [
+          g(me, {
+            modelValue: u.value.icon,
+            "onUpdate:modelValue": e[2] || (e[2] = (n) => u.value.icon = n),
             "btn-props": { variant: "ghost", size: "xs", class: "h-7 w-7 p-0 text-muted-foreground hover:text-foreground shrink-0 rounded-md" },
             position: "bottom-start"
           }, null, 8, ["modelValue"]),
-          oe(u("input", {
-            "onUpdate:modelValue": e[3] || (e[3] = (o) => a.value.title = o),
+          le(f("input", {
+            "onUpdate:modelValue": e[3] || (e[3] = (n) => u.value.title = n),
             class: "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-1 py-1 text-sm transition-colors w-full shadow-none caret-primary text-foreground placeholder:text-muted-foreground",
             placeholder: "New root category...",
             onKeyup: [
-              F(T, ["enter"]),
-              F(S, ["esc"])
+              B(T, ["enter"]),
+              B(S, ["esc"])
             ]
           }, null, 544), [
-            [X],
-            [ne, a.value.title]
+            [te],
+            [ie, u.value.title]
           ]),
-          f(D, {
+          g(E, {
             variant: "primary",
             size: "xs",
             icon: "lucide:check",
@@ -245,7 +304,7 @@ const ue = { class: "category-manager-container w-full bg-muted/10 rounded-xl bo
             title: "Save",
             onClick: T
           }),
-          f(D, {
+          g(E, {
             variant: "ghost",
             size: "xs",
             icon: "lucide:x",
@@ -253,22 +312,22 @@ const ue = { class: "category-manager-container w-full bg-muted/10 rounded-xl bo
             title: "Cancel",
             onClick: S
           })
-        ])) : z("", !0)
+        ])) : A("", !0)
       ])),
-      f(de, {
-        show: C.value,
-        "onUpdate:show": e[4] || (e[4] = (o) => C.value = o),
-        title: K.value,
+      g(se, {
+        show: k.value,
+        "onUpdate:show": e[4] || (e[4] = (n) => k.value = n),
+        title: H.value,
         "max-width": "max-w-md"
       }, {
-        default: U(() => [
-          u("div", ye, [
-            f(re(ie), {
-              schema: q.value,
-              values: M.value,
-              isUpdate: m.value === "edit",
+        default: _(() => [
+          f("div", we, [
+            g(de(ue), {
+              schema: G.value,
+              values: O.value,
+              isUpdate: h.value === "edit",
               submitText: "Save Details",
-              onOnSubmit: G
+              onOnSubmit: Q
             }, null, 8, ["schema", "values", "isUpdate"])
           ])
         ]),
@@ -278,5 +337,5 @@ const ue = { class: "category-manager-container w-full bg-muted/10 rounded-xl bo
   }
 });
 export {
-  je as default
+  Pe as default
 };

package/components/CategoryManager/CategoryNode.vue.d.ts

@@ -6,9 +6,11 @@ interface Props {
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: () => any;
     "update:modelValue": (value: CategoryItem[]) => any;
+    dragEnd: (id: string | number) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onChange?: () => any;
     "onUpdate:modelValue"?: (value: CategoryItem[]) => any;
+    onDragEnd?: (id: string | number) => any;
 }>, {
     level: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;