vlite3 1.2.17 → 1.3.1

package/components/CategoryManager/CategoryManager.vue2.js

@@ -1,4 +1,517 @@
-import f from "./CategoryManager.vue.js";
+import { defineComponent as Ce, ref as I, watch as j, computed as s, provide as De, onMounted as Ae, openBlock as b, createElementBlock as C, normalizeClass as ke, createElementVNode as m, renderSlot as Pe, toDisplayString as w, createBlock as G, withCtx as P, createTextVNode as H, createCommentVNode as E, createVNode as h, withDirectives as Ee, withKeys as K, vModelText as Re, unref as U, Transition as _e } from "vue";
+import Ne from "./CategoryNode.vue.js";
+import Ve from "../Modal.vue.js";
+import qe from "../Form/Form.vue.js";
+import Q from "../Icon.vue.js";
+/* empty css                  */
+import R from "../Button.vue.js";
+import { $t as l } from "../../utils/i18n.js";
+/* empty css            */
+import "vue-draggable-plus";
+/* empty css                                          */
+import "v-tooltip-lite";
+import "v-tooltip-lite/style.css";
+/* empty css                            */
+import "v-datepicker-lite";
+import "v-datepicker-lite/style.css";
+import "@jaames/iro";
+import "@vueuse/core";
+/* empty css                          */
+import Ue from "../IconPicker.vue.js";
+/* empty css                        */
+/* empty css                      */
+import "../../core/config.js";
+import { getUniqueId as _ } from "../../utils/functions.js";
+const ze = { class: "flex items-center justify-between mb-6" }, Oe = { class: "text-lg font-bold text-foreground" }, $e = { class: "text-sm text-muted-foreground mt-0.5" }, Fe = {
+  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"
+}, Je = { class: "w-12 h-12 bg-muted rounded-full flex items-center justify-center mb-4" }, Be = { class: "text-base font-medium text-foreground" }, je = { class: "text-sm text-muted-foreground mt-1 max-w-sm" }, Ge = {
+  key: 1,
+  class: "w-full tree-wrapper scrollable-container",
+  style: { "will-change": "transform", contain: "layout style" }
+}, He = {
+  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"
+}, Ke = ["placeholder"], Qe = {
+  class: "modal-body",
+  style: { "will-change": "transform", contain: "layout style" }
+}, Le = {
+  key: 0,
+  class: "absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-background/60 backdrop-blur-[1px] transition-opacity"
+}, We = { class: "flex items-center gap-2 text-sm text-muted-foreground" }, xt = /* @__PURE__ */ Ce({
+  __name: "CategoryManager",
+  props: {
+    modelValue: { default: () => [] },
+    rawData: { default: void 0 },
+    formSchema: {},
+    readonly: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    defaultExpanded: { default: void 0 },
+    emptyTitle: { default: "No Categories Found" },
+    emptyDescription: { default: "Get started by creating your first category." },
+    size: { default: "md" },
+    emptyTitleI18n: {},
+    emptyDescriptionI18n: {},
+    headerTitle: {},
+    headerTitleI18n: {},
+    headerDescription: {},
+    headerDescriptionI18n: {},
+    addCategoryText: {},
+    addCategoryTextI18n: {},
+    createCategoryText: {},
+    createCategoryTextI18n: {},
+    newRootPlaceholder: {},
+    newRootPlaceholderI18n: {},
+    newSubcategoryPlaceholder: {},
+    newSubcategoryPlaceholderI18n: {},
+    categoryTitlePlaceholder: {},
+    categoryTitlePlaceholderI18n: {},
+    modalTitleAdd: {},
+    modalTitleAddI18n: {},
+    modalTitleAddChild: {},
+    modalTitleAddChildI18n: {},
+    modalTitleEdit: {},
+    modalTitleEditI18n: {},
+    modalSaveText: {},
+    modalSaveTextI18n: {},
+    quickAddTooltip: {},
+    quickAddTooltipI18n: {},
+    advancedDetailsTooltip: {},
+    advancedDetailsTooltipI18n: {},
+    deleteTooltip: {},
+    deleteTooltipI18n: {},
+    saveTooltip: {},
+    saveTooltipI18n: {},
+    cancelTooltip: {},
+    cancelTooltipI18n: {}
+  },
+  emits: ["update:modelValue", "onAdd", "onEdit", "onDelete", "onReorder"],
+  setup(S, { expose: L, emit: W }) {
+    const e = S, f = W, d = I([]), g = I(/* @__PURE__ */ new Set()), v = (o) => JSON.parse(JSON.stringify(o)), T = (o, t = null) => {
+      o.forEach((a, i) => {
+        a.parentId = t, a.position = i, a.children || (a.children = []), T(a.children, a.id);
+      });
+    }, X = (o) => {
+      const t = /* @__PURE__ */ new Map(), a = [];
+      o.forEach((r) => {
+        t.set(r.id, {
+          ...r,
+          id: r.id,
+          title: r.name || r.title || "Untitled",
+          icon: r.icon,
+          parentId: r.parentId || null,
+          position: r.position ?? 0,
+          children: []
+        });
+      }), o.forEach((r) => {
+        const n = t.get(r.id);
+        n && (r.parentId && t.has(r.parentId) ? t.get(r.parentId).children.push(n) : a.push(n));
+      });
+      const i = (r) => {
+        r.sort((n, u) => (n.position ?? 0) - (u.position ?? 0)), r.forEach((n) => {
+          n.children && i(n.children);
+        });
+      };
+      return i(a), a;
+    }, z = (o) => {
+      const t = /* @__PURE__ */ new Set(), a = (i) => {
+        for (const r of i)
+          t.add(r.id), r.children && a(r.children);
+      };
+      return a(o), t;
+    };
+    j(
+      () => e.rawData,
+      (o) => {
+        if (o) {
+          if (o.length === 0) {
+            d.value = [], g.value = /* @__PURE__ */ new Set(), f("update:modelValue", []);
+            return;
+          }
+          const t = X(o);
+          T(t);
+          const a = JSON.stringify(t), i = JSON.stringify(d.value);
+          if (a !== i) {
+            const r = z(t), n = new Set(
+              [...g.value].filter((p) => r.has(p))
+            );
+            g.value = n;
+            const u = v(t);
+            d.value = u, f("update:modelValue", u);
+          }
+        }
+      },
+      { immediate: !0, deep: !0 }
+    ), j(
+      () => e.modelValue,
+      (o) => {
+        const t = JSON.stringify(o), a = JSON.stringify(d.value);
+        if (t !== a && o.length > 0) {
+          const i = v(o);
+          T(i), d.value = i;
+        }
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const M = () => {
+      T(d.value);
+      const o = v(d.value);
+      f("update:modelValue", o);
+    }, Y = (o) => {
+      const t = new Set(g.value);
+      t.has(o) ? t.delete(o) : t.add(o), g.value = t;
+    }, y = I({
+      mode: null,
+      targetId: null,
+      title: "",
+      icon: "lucide:folder"
+    }), N = (o, t) => {
+      y.value = {
+        mode: o,
+        targetId: o === "add-child" && t || null,
+        title: "",
+        icon: "lucide:folder"
+      }, o === "add-child" && t && g.value.add(t);
+    }, D = () => {
+      y.value = { mode: null, targetId: null, title: "", icon: "lucide:folder" };
+    }, V = () => {
+      const { mode: o, targetId: t, title: a, icon: i } = y.value;
+      if (!a.trim()) return;
+      const r = [...d.value];
+      let n = null;
+      if (o === "add-root")
+        n = { id: _(), title: a, icon: i, children: [] }, r.push(n);
+      else if (o === "add-child") {
+        n = { id: _(), title: a, icon: i, children: [] };
+        const u = (p) => {
+          for (const c of p) {
+            if (c.id === t)
+              return c.children || (c.children = []), c.children.push(n), !0;
+            if (c.children && u(c.children)) return !0;
+          }
+          return !1;
+        };
+        u(r);
+      }
+      n && (T(r), f("onAdd", v(n))), d.value = r, M(), D();
+    }, A = I(!1), x = I("add"), q = I(null), O = I(null), $ = I({}), Z = [
+      { name: "icon", label: "Category Icon", type: "iconPicker" },
+      { name: "title", label: "Title", type: "text", required: !0 },
+      { name: "description", label: "Description", type: "textarea", props: { rows: 3 } }
+    ], ee = s(() => e.formSchema || Z), te = s(() => x.value === "add" ? e.modalTitleAddI18n ? l(e.modalTitleAddI18n) : e.modalTitleAdd ? e.modalTitleAdd : l("vlite.categoryManager.modalTitleAdd") !== "vlite.categoryManager.modalTitleAdd" ? l("vlite.categoryManager.modalTitleAdd") : "Add Category" : x.value === "add-child" ? e.modalTitleAddChildI18n ? l(e.modalTitleAddChildI18n) : e.modalTitleAddChild ? e.modalTitleAddChild : l("vlite.categoryManager.modalTitleAddChild") !== "vlite.categoryManager.modalTitleAddChild" ? l("vlite.categoryManager.modalTitleAddChild") : "Add Sub-category" : e.modalTitleEditI18n ? l(e.modalTitleEditI18n) : e.modalTitleEdit ? e.modalTitleEdit : l("vlite.categoryManager.modalTitleEdit") !== "vlite.categoryManager.modalTitleEdit" ? l("vlite.categoryManager.modalTitleEdit") : "Edit Category"), oe = (o, t, a) => {
+      x.value = o, q.value = t || null, O.value = a || null, $.value = t ? v(t) : {}, A.value = !0;
+    }, ae = async (o) => {
+      const t = o?.values || o, a = [...d.value];
+      let i = null, r = null;
+      if (x.value === "add") {
+        const n = { id: _(), children: [], ...t };
+        a.push(n), i = n, r = "onAdd";
+      } else if (x.value === "add-child") {
+        const n = { id: _(), children: [], ...t }, u = (p) => {
+          for (const c of p) {
+            if (c.id === O.value)
+              return c.children || (c.children = []), c.children.push(n), g.value.add(c.id), !0;
+            if (c.children && u(c.children)) return !0;
+          }
+          return !1;
+        };
+        u(a), i = n, r = "onAdd";
+      } else if (x.value === "edit" && q.value) {
+        const n = q.value.id, u = (p) => {
+          const c = p.findIndex((k) => k.id === n);
+          if (c > -1)
+            return p[c] = { ...p[c], ...t }, i = p[c], !0;
+          for (const k of p)
+            if (k.children && u(k.children)) return !0;
+          return !1;
+        };
+        u(a), r = "onEdit";
+      }
+      T(a), i && (r === "onAdd" ? f("onAdd", v(i)) : r === "onEdit" && f("onEdit", v(i))), d.value = a, M(), o && typeof o.setSubmitting == "function" && o.setSubmitting(!1), A.value = !1;
+    }, le = (o) => {
+      const t = o.id, a = (r) => {
+        const n = r.findIndex((u) => u.id === t);
+        if (n > -1)
+          return r.splice(n, 1), !0;
+        for (const u of r)
+          if (u.children && a(u.children)) return !0;
+        return !1;
+      }, i = [...d.value];
+      a(i), T(i), d.value = i, f("onDelete", v(o)), M();
+    }, re = (o) => {
+      f("onEdit", v(o)), M();
+    }, ne = (o) => {
+      d.value = [...o], M();
+    }, ie = () => {
+      M();
+    }, de = (o) => {
+      T(d.value);
+      const t = v(d.value);
+      f("update:modelValue", t);
+      let a = null;
+      const i = (r) => {
+        for (const n of r) {
+          if (String(n.id) === String(o))
+            return a = n, !0;
+          if (n.children && i(n.children)) return !0;
+        }
+        return !1;
+      };
+      i(t), a && f("onReorder", {
+        id: a.id,
+        parentId: a.parentId ?? null,
+        position: a.position ?? 0
+      });
+    }, ce = s(() => {
+      if (e.emptyTitleI18n) {
+        const t = l(e.emptyTitleI18n);
+        if (t !== e.emptyTitleI18n) return t;
+      }
+      if (e.emptyTitle !== "No Categories Found") return e.emptyTitle;
+      const o = l("vlite.categoryManager.emptyTitle");
+      return o !== "vlite.categoryManager.emptyTitle" ? o : e.emptyTitle;
+    }), se = s(() => {
+      if (e.emptyDescriptionI18n) {
+        const t = l(e.emptyDescriptionI18n);
+        if (t !== e.emptyDescriptionI18n) return t;
+      }
+      if (e.emptyDescription !== "Get started by creating your first category.") return e.emptyDescription;
+      const o = l("vlite.categoryManager.emptyDescription");
+      return o !== "vlite.categoryManager.emptyDescription" ? o : e.emptyDescription;
+    }), ue = s(() => {
+      if (e.headerTitleI18n) {
+        const t = l(e.headerTitleI18n);
+        if (t !== e.headerTitleI18n) return t;
+      }
+      if (e.headerTitle) return e.headerTitle;
+      const o = l("vlite.categoryManager.headerTitle");
+      return o !== "vlite.categoryManager.headerTitle" ? o : "Categories";
+    }), ge = s(() => {
+      if (e.headerDescriptionI18n) {
+        const t = l(e.headerDescriptionI18n);
+        if (t !== e.headerDescriptionI18n) return t;
+      }
+      if (e.headerDescription) return e.headerDescription;
+      const o = l("vlite.categoryManager.headerDescription");
+      return o !== "vlite.categoryManager.headerDescription" ? o : "Manage your hierarchical structure.";
+    }), pe = s(() => {
+      if (e.addCategoryTextI18n) {
+        const t = l(e.addCategoryTextI18n);
+        if (t !== e.addCategoryTextI18n) return t;
+      }
+      if (e.addCategoryText) return e.addCategoryText;
+      const o = l("vlite.categoryManager.addCategory");
+      return o !== "vlite.categoryManager.addCategory" ? o : "Add Category";
+    }), me = s(() => {
+      if (e.createCategoryTextI18n) {
+        const t = l(e.createCategoryTextI18n);
+        if (t !== e.createCategoryTextI18n) return t;
+      }
+      if (e.createCategoryText) return e.createCategoryText;
+      const o = l("vlite.categoryManager.createCategory");
+      return o !== "vlite.categoryManager.createCategory" ? o : "Create Category";
+    }), fe = s(() => {
+      if (e.newRootPlaceholderI18n) {
+        const t = l(e.newRootPlaceholderI18n);
+        if (t !== e.newRootPlaceholderI18n) return t;
+      }
+      if (e.newRootPlaceholder) return e.newRootPlaceholder;
+      const o = l("vlite.categoryManager.newRootPlaceholder");
+      return o !== "vlite.categoryManager.newRootPlaceholder" ? o : "New root category...";
+    }), ve = s(() => {
+      if (e.modalSaveTextI18n) {
+        const t = l(e.modalSaveTextI18n);
+        if (t !== e.modalSaveTextI18n) return t;
+      }
+      if (e.modalSaveText) return e.modalSaveText;
+      const o = l("vlite.categoryManager.modalSaveText");
+      return o !== "vlite.categoryManager.modalSaveText" ? o : "Save Details";
+    }), ye = s(() => {
+      if (e.newSubcategoryPlaceholderI18n) {
+        const t = l(e.newSubcategoryPlaceholderI18n);
+        if (t !== e.newSubcategoryPlaceholderI18n) return t;
+      }
+      if (e.newSubcategoryPlaceholder) return e.newSubcategoryPlaceholder;
+      const o = l("vlite.categoryManager.newSubcategoryPlaceholder");
+      return o !== "vlite.categoryManager.newSubcategoryPlaceholder" ? o : "New subcategory title...";
+    }), he = s(() => {
+      if (e.categoryTitlePlaceholderI18n) {
+        const t = l(e.categoryTitlePlaceholderI18n);
+        if (t !== e.categoryTitlePlaceholderI18n) return t;
+      }
+      if (e.categoryTitlePlaceholder) return e.categoryTitlePlaceholder;
+      const o = l("vlite.categoryManager.categoryTitlePlaceholder");
+      return o !== "vlite.categoryManager.categoryTitlePlaceholder" ? o : "Category title...";
+    }), Te = s(() => e.quickAddTooltipI18n ? l(e.quickAddTooltipI18n) : e.quickAddTooltip ? e.quickAddTooltip : l("vlite.categoryManager.quickAddTooltip") !== "vlite.categoryManager.quickAddTooltip" ? l("vlite.categoryManager.quickAddTooltip") : "Quick Add Subcategory"), Ie = s(() => e.advancedDetailsTooltipI18n ? l(e.advancedDetailsTooltipI18n) : e.advancedDetailsTooltip ? e.advancedDetailsTooltip : l("vlite.categoryManager.advancedDetailsTooltip") !== "vlite.categoryManager.advancedDetailsTooltip" ? l("vlite.categoryManager.advancedDetailsTooltip") : "Advanced Details"), xe = s(() => e.deleteTooltipI18n ? l(e.deleteTooltipI18n) : e.deleteTooltip ? e.deleteTooltip : l("vlite.categoryManager.deleteTooltip") !== "vlite.categoryManager.deleteTooltip" ? l("vlite.categoryManager.deleteTooltip") : "Delete"), F = s(() => e.saveTooltipI18n ? l(e.saveTooltipI18n) : e.saveTooltip ? e.saveTooltip : l("vlite.categoryManager.saveTooltip") !== "vlite.categoryManager.saveTooltip" ? l("vlite.categoryManager.saveTooltip") : "Save"), J = s(() => e.cancelTooltipI18n ? l(e.cancelTooltipI18n) : e.cancelTooltip ? e.cancelTooltip : l("vlite.categoryManager.cancelTooltip") !== "vlite.categoryManager.cancelTooltip" ? l("vlite.categoryManager.cancelTooltip") : "Cancel");
+    De("categoryManager", {
+      expandedIds: g,
+      inlineState: y,
+      toggleExpand: Y,
+      startInline: N,
+      saveInline: V,
+      cancelInline: D,
+      saveItem: re,
+      openModalForm: oe,
+      deleteItem: le,
+      readonly: s(() => e.readonly),
+      size: s(() => e.size),
+      newSubcategoryPlaceholderText: ye,
+      categoryTitlePlaceholderText: he,
+      quickAddTooltipText: Te,
+      advancedDetailsTooltipText: Ie,
+      deleteTooltipText: xe,
+      saveTooltipText: F,
+      cancelTooltipText: J
+    });
+    const be = {
+      mounted: (o) => {
+        setTimeout(() => o.focus(), 10);
+      }
+    }, we = () => {
+      const o = z(d.value);
+      g.value = o;
+    }, Me = () => {
+      g.value = /* @__PURE__ */ new Set();
+    }, B = (...o) => {
+      const t = new Set(g.value);
+      o.forEach((a) => t.add(a)), g.value = t;
+    }, Se = (...o) => {
+      const t = new Set(g.value);
+      o.forEach((a) => t.delete(a)), g.value = t;
+    };
+    return Ae(() => {
+      e.defaultExpanded && e.defaultExpanded.length > 0 && B(...e.defaultExpanded);
+    }), L({
+      expandedIds: g,
+      expandAll: we,
+      collapseAll: Me,
+      expand: B,
+      collapse: Se
+    }), (o, t) => (b(), C("div", {
+      class: ke(["category-manager-container w-full bg-muted/10 rounded-xl border border-border p-4 lg:p-6 relative", { "category-manager--loading": S.loading }])
+    }, [
+      m("div", ze, [
+        Pe(o.$slots, "header", {}, () => [
+          m("div", null, [
+            m("h3", Oe, w(ue.value), 1),
+            m("p", $e, w(ge.value), 1)
+          ]),
+          S.readonly ? E("", !0) : (b(), G(R, {
+            key: 0,
+            variant: "primary",
+            icon: "lucide:plus",
+            size: "sm",
+            onClick: t[0] || (t[0] = (a) => N("add-root"))
+          }, {
+            default: P(() => [
+              H(w(pe.value), 1)
+            ]),
+            _: 1
+          }))
+        ], !0)
+      ]),
+      d.value.length === 0 && y.value.mode !== "add-root" ? (b(), C("div", Fe, [
+        m("div", Je, [
+          h(Q, {
+            icon: "lucide:folder-tree",
+            class: "w-6 h-6 text-muted-foreground"
+          })
+        ]),
+        m("h4", Be, w(ce.value), 1),
+        m("p", je, w(se.value), 1),
+        S.readonly ? E("", !0) : (b(), G(R, {
+          key: 0,
+          variant: "outline",
+          size: "sm",
+          class: "mt-5",
+          icon: "lucide:plus",
+          onClick: t[1] || (t[1] = (a) => N("add-root"))
+        }, {
+          default: P(() => [
+            H(w(me.value), 1)
+          ]),
+          _: 1
+        }))
+      ])) : (b(), C("div", Ge, [
+        h(Ne, {
+          modelValue: d.value,
+          "onUpdate:modelValue": ne,
+          onChange: ie,
+          onDragEnd: de
+        }, null, 8, ["modelValue"]),
+        y.value.mode === "add-root" ? (b(), C("div", He, [
+          h(Ue, {
+            modelValue: y.value.icon,
+            "onUpdate:modelValue": t[2] || (t[2] = (a) => y.value.icon = a),
+            "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"]),
+          Ee(m("input", {
+            "onUpdate:modelValue": t[3] || (t[3] = (a) => y.value.title = a),
+            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: fe.value,
+            onKeyup: [
+              K(V, ["enter"]),
+              K(D, ["esc"])
+            ]
+          }, null, 40, Ke), [
+            [be],
+            [Re, y.value.title]
+          ]),
+          h(R, {
+            variant: "primary",
+            size: "xs",
+            icon: "lucide:check",
+            class: "shrink-0 h-7 w-7 px-0",
+            title: F.value,
+            onClick: V
+          }, null, 8, ["title"]),
+          h(R, {
+            variant: "ghost",
+            size: "xs",
+            icon: "lucide:x",
+            class: "shrink-0 h-7 w-7 px-0",
+            title: J.value,
+            onClick: D
+          }, null, 8, ["title"])
+        ])) : E("", !0)
+      ])),
+      h(Ve, {
+        show: A.value,
+        "onUpdate:show": t[4] || (t[4] = (a) => A.value = a),
+        title: te.value,
+        "max-width": "max-w-md"
+      }, {
+        default: P(() => [
+          m("div", Qe, [
+            h(U(qe), {
+              schema: ee.value,
+              values: $.value,
+              isUpdate: x.value === "edit",
+              submitText: ve.value,
+              onOnSubmit: ae
+            }, null, 8, ["schema", "values", "isUpdate", "submitText"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["show", "title"]),
+      h(_e, { name: "cm-fade" }, {
+        default: P(() => [
+          S.loading ? (b(), C("div", Le, [
+            m("div", We, [
+              h(Q, {
+                icon: "lucide:loader-2",
+                class: "w-4 h-4 animate-spin"
+              }),
+              m("span", null, w(U(l)("vlite.categoryManager.loading") !== "vlite.categoryManager.loading" ? U(l)("vlite.categoryManager.loading") : "Updating..."), 1)
+            ])
+          ])) : E("", !0)
+        ]),
+        _: 1
+      })
+    ], 2));
+  }
+});
 export {
-  f as default
+  xt as default
 };