vlite3 1.1.2 → 1.1.4

package/components/CategoryManager/CategoryManager.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as te, ref as p, watch as R, computed as D, provide as oe, openBlock as x, createElementBlock as V, createElementVNode as m, renderSlot as ne, createBlock as $, withCtx as _, createTextVNode as F, createCommentVNode as A, createVNode as g, toDisplayString as J, withDirectives as re, withKeys as B, vModelText as le, unref as ie } from "vue";
-import de from "./CategoryNode.vue.js";
-import ae from "../Modal.vue.js";
-import se from "../Form/Form.vue.js";
-import ue 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 E from "../Button.vue.js";
 import "../../core/config.js";
@@ -17,24 +17,24 @@ import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
 /* empty css                          */
-import ce from "../IconPicker.vue.js";
+import me from "../IconPicker.vue.js";
 /* empty css                        */
 /* empty css                      */
 import { getUniqueId as N } from "../../utils/functions.js";
-const me = { class: "category-manager-container w-full bg-muted/10 rounded-xl border border-border p-4 lg:p-6" }, fe = { class: "flex items-center justify-between mb-6" }, pe = {
+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"
-}, ve = { class: "w-12 h-12 bg-muted rounded-full flex items-center justify-center mb-4" }, he = { class: "text-base font-medium text-foreground" }, ge = { class: "text-sm text-muted-foreground mt-1 max-w-sm" }, ye = {
+}, 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" }
-}, xe = {
+}, 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"
-}, be = {
+}, we = {
   class: "modal-body",
   style: { "will-change": "transform", contain: "layout style" }
-}, Ke = /* @__PURE__ */ te({
+}, Pe = /* @__PURE__ */ ne({
   __name: "CategoryManager",
   props: {
     modelValue: { default: () => [] },
@@ -47,43 +47,43 @@ const me = { class: "category-manager-container w-full bg-muted/10 rounded-xl bo
   },
   emits: ["update:modelValue", "onAdd", "onEdit", "onDelete", "onReorder"],
   setup(b, { emit: j }) {
-    const w = b, f = j, d = p([]), S = p(/* @__PURE__ */ new Set()), u = (t) => JSON.parse(JSON.stringify(t)), v = (t, e = null) => {
-      t.forEach((o, l) => {
-        o.parentId = e, o.position = l, o.children || (o.children = []), v(o.children, o.id);
+    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(), o = [];
-      t.forEach((n) => {
-        e.set(n.id, {
-          ...n,
-          id: n.id,
-          title: n.name || n.title || "Untitled",
-          icon: n.icon,
-          parentId: n.parentId || null,
-          position: n.position ?? 0,
+      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((n) => {
-        const r = e.get(n.id);
-        r && (n.parentId && e.has(n.parentId) ? e.get(n.parentId).children.push(r) : o.push(r));
+      }), 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 = (n) => {
-        n.sort((r, a) => (r.position ?? 0) - (a.position ?? 0)), n.forEach((r) => {
+      const l = (o) => {
+        o.sort((r, a) => (r.position ?? 0) - (a.position ?? 0)), o.forEach((r) => {
           r.children && l(r.children);
         });
       };
-      return l(o), o;
+      return l(n), n;
     };
     R(
       () => w.rawData,
       (t) => {
         if (t && t.length > 0) {
           const e = q(t);
-          v(e);
-          const o = JSON.stringify(e), l = JSON.stringify(d.value);
-          if (o !== l) {
-            const n = u(e);
-            d.value = n, f("update:modelValue", n);
+          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);
           }
         }
       },
@@ -91,137 +91,155 @@ const me = { class: "category-manager-container w-full bg-muted/10 rounded-xl bo
     ), R(
       () => w.modelValue,
       (t) => {
-        const e = JSON.stringify(t), o = JSON.stringify(d.value);
-        if (e !== o && t.length > 0) {
-          const l = u(t);
-          v(l), d.value = l;
+        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 y = (t = !1) => {
-      v(d.value);
-      const e = u(d.value);
-      f("update:modelValue", e), t && f("onReorder", e);
+    const y = () => {
+      p(d.value);
+      const t = s(d.value);
+      c("update:modelValue", t);
     }, K = (t) => {
-      const e = new Set(S.value);
-      e.has(t) ? e.delete(t) : e.add(t), S.value = e;
-    }, s = p({
+      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"
     }), M = (t, e) => {
-      s.value = {
+      u.value = {
         mode: t,
         targetId: t === "add-child" && e || null,
         title: "",
         icon: "lucide:folder"
-      }, t === "add-child" && e && S.value.add(e);
-    }, I = () => {
-      s.value = { mode: null, targetId: null, title: "", icon: "lucide:folder" };
+      }, t === "add-child" && e && I.value.add(e);
+    }, S = () => {
+      u.value = { mode: null, targetId: null, title: "", icon: "lucide:folder" };
     }, T = () => {
-      const { mode: t, targetId: e, title: o, icon: l } = s.value;
-      if (!o.trim()) return;
-      const n = [...d.value];
+      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: o, icon: l, children: [] }, n.push(r);
+        r = { id: N(), title: n, icon: l, children: [] }, o.push(r);
       else if (t === "add-child") {
-        r = { id: N(), title: o, icon: l, children: [] };
-        const a = (c) => {
-          for (const i of c) {
+        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;
         };
-        a(n);
+        a(o);
       }
-      r && (v(n), f("onAdd", u(r))), d.value = n, y(), I();
-    }, k = p(!1), h = p("add"), U = p(null), z = p(null), O = p({}), P = [
+      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 } }
-    ], G = D(() => w.formSchema || P), H = D(() => h.value === "add" ? "Add Category" : h.value === "add-child" ? "Add Sub-category" : "Edit Category"), L = (t, e, o) => {
-      h.value = t, U.value = e || null, z.value = o || null, O.value = e ? u(e) : {}, k.value = !0;
+    ], 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, o = [...d.value];
-      let l = null, n = null;
+      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), l = r, n = "onAdd";
+        n.push(r), l = r, o = "onAdd";
       } else if (h.value === "add-child") {
-        const r = { id: N(), children: [], ...e }, a = (c) => {
-          for (const i of c) {
+        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), S.value.add(i.id), !0;
+              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;
         };
-        a(o), l = r, n = "onAdd";
+        a(n), l = r, o = "onAdd";
       } else if (h.value === "edit" && U.value) {
-        const r = U.value.id, a = (c) => {
-          const i = c.findIndex((C) => C.id === r);
+        const r = U.value.id, a = (m) => {
+          const i = m.findIndex((C) => C.id === r);
           if (i > -1)
-            return c[i] = { ...c[i], ...e }, l = c[i], !0;
-          for (const C of c)
+            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;
         };
-        a(o), n = "onEdit";
+        a(n), o = "onEdit";
       }
-      v(o), l && (n === "onAdd" ? f("onAdd", u(l)) : n === "onEdit" && f("onEdit", u(l))), d.value = o, y(), t && typeof t.setSubmitting == "function" && t.setSubmitting(!1), k.value = !1;
+      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, o = (n) => {
-        const r = n.findIndex((a) => a.id === e);
+      const e = t.id, n = (o) => {
+        const r = o.findIndex((a) => a.id === e);
         if (r > -1)
-          return n.splice(r, 1), !0;
-        for (const a of n)
-          if (a.children && o(a.children)) return !0;
+          return o.splice(r, 1), !0;
+        for (const a of o)
+          if (a.children && n(a.children)) return !0;
         return !1;
       }, l = [...d.value];
-      o(l), v(l), d.value = l, f("onDelete", u(t)), y();
+      n(l), p(l), d.value = l, c("onDelete", s(t)), y();
     }, X = (t) => {
-      f("onEdit", u(t)), y();
+      c("onEdit", s(t)), y();
     }, Y = (t) => {
-      d.value = [...t], y(!0);
+      d.value = [...t], y();
     }, Z = () => {
-      y(!0);
+      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;
+      };
+      l(e), n && c("onReorder", {
+        id: n.id,
+        parentId: n.parentId ?? null,
+        position: n.position ?? 0
+      });
     };
     oe("categoryManager", {
-      expandedIds: S,
-      inlineState: s,
+      expandedIds: I,
+      inlineState: u,
       toggleExpand: K,
       startInline: M,
       saveInline: T,
-      cancelInline: I,
+      cancelInline: S,
       saveItem: X,
       openModalForm: L,
       deleteItem: W,
       readonly: D(() => w.readonly),
       size: D(() => w.size)
     });
-    const ee = {
+    const te = {
       mounted: (t) => {
         setTimeout(() => t.focus(), 10);
       }
     };
-    return (t, e) => (x(), V("div", me, [
-      m("div", fe, [
-        ne(t.$slots, "header", {}, () => [
-          e[6] || (e[6] = m("div", null, [
-            m("h3", { class: "text-lg font-bold text-foreground" }, "Categories"),
-            m("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)),
           b.readonly ? A("", !0) : (x(), $(E, {
             key: 0,
             variant: "primary",
             icon: "lucide:plus",
             size: "sm",
-            onClick: e[0] || (e[0] = (o) => M("add-root"))
+            onClick: e[0] || (e[0] = (n) => M("add-root"))
           }, {
             default: _(() => [...e[5] || (e[5] = [
               F(" Add Category ", -1)
@@ -230,52 +248,53 @@ const me = { class: "category-manager-container w-full bg-muted/10 rounded-xl bo
           }))
         ])
       ]),
-      d.value.length === 0 && s.value.mode !== "add-root" ? (x(), V("div", pe, [
-        m("div", ve, [
-          g(ue, {
+      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"
           })
         ]),
-        m("h4", he, J(b.emptyTitle), 1),
-        m("p", ge, J(b.emptyDescription), 1),
+        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) => M("add-root"))
+          onClick: e[1] || (e[1] = (n) => M("add-root"))
         }, {
           default: _(() => [...e[7] || (e[7] = [
             F(" Create Category ", -1)
           ])]),
           _: 1
         }))
-      ])) : (x(), V("div", ye, [
-        g(de, {
+      ])) : (x(), V("div", xe, [
+        g(ae, {
           modelValue: d.value,
           "onUpdate:modelValue": Y,
-          onChange: Z
+          onChange: Z,
+          onDragEnd: ee
         }, null, 8, ["modelValue"]),
-        s.value.mode === "add-root" ? (x(), V("div", xe, [
-          g(ce, {
-            modelValue: s.value.icon,
-            "onUpdate:modelValue": e[2] || (e[2] = (o) => s.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"]),
-          re(m("input", {
-            "onUpdate:modelValue": e[3] || (e[3] = (o) => s.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: [
               B(T, ["enter"]),
-              B(I, ["esc"])
+              B(S, ["esc"])
             ]
           }, null, 544), [
-            [ee],
-            [le, s.value.title]
+            [te],
+            [ie, u.value.title]
           ]),
           g(E, {
             variant: "primary",
@@ -291,19 +310,19 @@ const me = { class: "category-manager-container w-full bg-muted/10 rounded-xl bo
             icon: "lucide:x",
             class: "shrink-0 h-7 w-7 px-0",
             title: "Cancel",
-            onClick: I
+            onClick: S
           })
         ])) : A("", !0)
       ])),
-      g(ae, {
+      g(se, {
         show: k.value,
-        "onUpdate:show": e[4] || (e[4] = (o) => k.value = o),
+        "onUpdate:show": e[4] || (e[4] = (n) => k.value = n),
         title: H.value,
         "max-width": "max-w-md"
       }, {
         default: _(() => [
-          m("div", be, [
-            g(ie(se), {
+          f("div", we, [
+            g(de(ue), {
               schema: G.value,
               values: O.value,
               isUpdate: h.value === "edit",
@@ -318,5 +337,5 @@ const me = { class: "category-manager-container w-full bg-muted/10 rounded-xl bo
   }
 });
 export {
-  Ke 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>;