@duxweb/dvha-pro 1.1.29 → 1.1.31

package/dist/esm/components/designEditor/editor.js

@@ -1,157 +1,127 @@
-import { defineComponent as v, provide as x, watch as i, createVNode as t } from "vue";
-import { useI18n as h } from "@duxweb/dvha-core";
+import { DuxCard as e } from "../card/card.js";
+import "../card/index.js";
+import { DuxWidgetEditorPreview as t } from "./editor/preview.js";
+import { WidgetEditorSetting as n } from "./editor/setting.js";
+import { duxFormEditorGrid as r } from "./components/grid.js";
+import { useEditor as i } from "./editor/hook.js";
+import { createVNode as a, defineComponent as o, provide as s, watch as c } from "vue";
+import { useI18n as l } from "@duxweb/dvha-core";
+import { NScrollbar as u } from "naive-ui";
 import d from "clsx";
-import { cloneDeep as s } from "lodash-es";
-import { NScrollbar as w } from "naive-ui";
-import y from "short-unique-id";
-import { VueDraggable as D } from "vue-draggable-plus";
-import { DuxCard as k } from "../card/card.js";
-import "@vueuse/core";
-import { duxFormEditorGrid as E } from "./components/grid.js";
-import { useEditor as C } from "./editor/hook.js";
-import { DuxWidgetEditorPreview as u } from "./editor/preview.js";
-import { WidgetEditorSetting as U } from "./editor/setting.js";
-const O = /* @__PURE__ */ v({
-  name: "DuxDesignEditor",
-  props: {
-    data: Object,
-    onUpdateData: Function,
-    groups: Array,
-    components: Array,
-    settingPage: Object,
-    actionRender: Function,
-    previewWrapper: Function
-  },
-  setup(l) {
-    const {
-      t: o
-    } = h(), a = C({
-      settingPage: l.settingPage
-    });
-    x("editor.use", a), i([() => l.components, () => l.groups], () => {
-      a.clearGroup(), a.clearComponent(), a.addGroup({
-        name: "layout",
-        label: o("components.designEditor.layout") || "Layout",
-        icon: "i-tabler:layout"
-      }), l.groups?.forEach((e) => {
-        a.addGroup(e);
-      }), a.addComponent(E(o)), l.components?.forEach((e) => {
-        a.addComponent(e);
-      });
-    }, {
-      immediate: !0,
-      deep: !0
-    });
-    const {
-      randomUUID: g
-    } = new y({
-      length: 10
-    }), m = (e) => ({
-      key: g(),
-      name: e.name,
-      options: s(e.settingDefault)
-    });
-    i(() => l.data, (e) => {
-      const r = l.settingPage?.default || {};
-      a.value.value = {
-        config: {
-          ...r,
-          ...s(e?.config || {})
-        },
-        data: s(e?.data || [])
-      };
-    }, {
-      deep: !0,
-      immediate: !0
-    }), i(a.value, (e) => {
-      l.onUpdateData?.(e);
-    }, {
-      deep: !0
-    });
-    const c = ["bg-red-500", "bg-orange-500", "bg-amber-500", "bg-yellow-500", "bg-lime-500", "bg-green-500", "bg-emerald-500", "bg-teal-500", "bg-cyan-500", "bg-sky-500", "bg-blue-500", "bg-indigo-500", "bg-violet-500", "bg-purple-500", "bg-fuchsia-500", "bg-pink-500", "bg-rose-500"];
-    return () => t(k, {
-      class: "h-full",
-      shadow: !0
-    }, {
-      default: () => [t("div", {
-        class: "h-full w-full relative text-default bg-muted rounded-md"
-      }, [t("div", {
-        class: "absolute top-4 left-4 bottom-4 z-10"
-      }, [t("div", {
-        class: "h-full w-220px bg-default shadow rounded"
-      }, [t("div", {
-        class: "h-full flex flex-col"
-      }, [t(w, {
-        class: "flex-1 min-h-0"
-      }, {
-        default: () => [t("div", {
-          class: "p-4 space-y-4",
-          id: "comp-list"
-        }, [a.tree.value?.filter((e) => e.children && e.children.length > 0).map((e, r) => t("div", {
-          key: e.name,
-          class: "space-y-2"
-        }, [t("div", {
-          class: "flex items-center gap-2 text-sm px-1"
-        }, [t("div", {
-          class: d(["size-4", e.icon])
-        }, null), t("span", {
-          class: "truncate"
-        }, [e.label])]), t(D, {
-          modelValue: e.children || [],
-          animation: 150,
-          group: {
-            name: "widget",
-            pull: "clone",
-            put: !1
-          },
-          sort: !1,
-          clone: m,
-          class: "space-y-2"
-        }, {
-          default: () => [e.children?.map((n, p) => {
-            const f = (r * 20 + p) % c.length, b = c[f];
-            return t("div", {
-              key: n.name,
-              class: "rounded-lg px-3 py-2 cursor-move transition-all bg-default dark:bg-muted hover:bg-elevated edit-drag flex items-center gap-3"
-            }, [t("div", {
-              class: d(["size-8 rounded-lg flex items-center justify-center flex-shrink-0", b])
-            }, [t("div", {
-              class: d(["size-4 text-white", n.icon])
-            }, null)]), t("div", {
-              class: "flex-1 min-w-0"
-            }, [t("div", {
-              class: "text-sm font-medium truncate"
-            }, [n.label]), n.description && t("div", {
-              class: "text-xs truncate opacity-80"
-            }, [n.description])])]);
-          })]
-        })])), a.tree.value?.filter((e) => e.children && e.children.length > 0).length === 0 && t("div", {
-          class: "text-xs text-muted text-center py-4"
-        }, [o("components.designEditor.empty") || "No components"])])]
-      })])])]), t("div", {
-        class: "absolute inset-0 shadow-sm flex flex-col items-center p-6 overflow-auto",
-        style: "background: linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0, 0.1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0, 0.1) 75%), linear-gradient(-45deg, transparent 75%, rgba(0,0,0, 0.1) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
-      }, [t("div", {
-        class: "max-w-2xl w-full flex-1 bg-default shadow p-2",
-        onClick: () => {
-          a.selected.value = void 0;
-        }
-      }, [l.previewWrapper ? l.previewWrapper(t(u, {
-        modelValue: a.value.value?.data,
-        onUpdate: (e) => a.value.value.data = e
-      }, null), a) : t(u, {
-        modelValue: a.value.value?.data,
-        onUpdate: (e) => a.value.value.data = e
-      }, null)])]), t("div", {
-        class: "absolute top-4 right-4 bottom-4 z-10"
-      }, [t("div", {
-        class: "h-full w-300px bg-default shadow rounded"
-      }, [t(U, {
-        actionRender: l.actionRender
-      }, null)])])])]
-    });
-  }
+import { cloneDeep as f } from "lodash-es";
+import { VueDraggable as p } from "vue-draggable-plus";
+import m from "short-unique-id";
+const h = /* @__PURE__ */ o({
+	name: "DuxDesignEditor",
+	props: {
+		data: Object,
+		onUpdateData: Function,
+		groups: Array,
+		components: Array,
+		settingPage: Object,
+		actionRender: Function,
+		previewWrapper: Function
+	},
+	setup(o) {
+		let { t: h } = l(), g = i({ settingPage: o.settingPage });
+		s("editor.use", g), c([() => o.components, () => o.groups], () => {
+			g.clearGroup(), g.clearComponent(), g.addGroup({
+				name: "layout",
+				label: h("components.designEditor.layout") || "Layout",
+				icon: "i-tabler:layout"
+			}), o.groups?.forEach((e) => {
+				g.addGroup(e);
+			}), g.addComponent(r(h)), o.components?.forEach((e) => {
+				g.addComponent(e);
+			});
+		}, {
+			immediate: !0,
+			deep: !0
+		});
+		let { randomUUID: _ } = new m({ length: 10 }), v = (e) => ({
+			key: _(),
+			name: e.name,
+			options: f(e.settingDefault)
+		});
+		c(() => o.data, (e) => {
+			let t = o.settingPage?.default || {};
+			g.value.value = {
+				config: {
+					...t,
+					...f(e?.config || {})
+				},
+				data: f(e?.data || [])
+			};
+		}, {
+			deep: !0,
+			immediate: !0
+		}), c(g.value, (e) => {
+			o.onUpdateData?.(e);
+		}, { deep: !0 });
+		let y = [
+			"bg-red-500",
+			"bg-orange-500",
+			"bg-amber-500",
+			"bg-yellow-500",
+			"bg-lime-500",
+			"bg-green-500",
+			"bg-emerald-500",
+			"bg-teal-500",
+			"bg-cyan-500",
+			"bg-sky-500",
+			"bg-blue-500",
+			"bg-indigo-500",
+			"bg-violet-500",
+			"bg-purple-500",
+			"bg-fuchsia-500",
+			"bg-pink-500",
+			"bg-rose-500"
+		];
+		return () => a(e, {
+			class: "h-full",
+			shadow: !0
+		}, { default: () => [a("div", { class: "h-full w-full relative text-default bg-muted rounded-md" }, [
+			a("div", { class: "absolute top-4 left-4 bottom-4 z-10" }, [a("div", { class: "h-full w-220px bg-default shadow rounded" }, [a("div", { class: "h-full flex flex-col" }, [a(u, { class: "flex-1 min-h-0" }, { default: () => [a("div", {
+				class: "p-4 space-y-4",
+				id: "comp-list"
+			}, [g.tree.value?.filter((e) => e.children && e.children.length > 0).map((e, t) => a("div", {
+				key: e.name,
+				class: "space-y-2"
+			}, [a("div", { class: "flex items-center gap-2 text-sm px-1" }, [a("div", { class: d(["size-4", e.icon]) }, null), a("span", { class: "truncate" }, [e.label])]), a(p, {
+				modelValue: e.children || [],
+				animation: 150,
+				group: {
+					name: "widget",
+					pull: "clone",
+					put: !1
+				},
+				sort: !1,
+				clone: v,
+				class: "space-y-2"
+			}, { default: () => [e.children?.map((e, n) => {
+				let r = y[(t * 20 + n) % y.length];
+				return a("div", {
+					key: e.name,
+					class: "rounded-lg px-3 py-2 cursor-move transition-all bg-default dark:bg-muted hover:bg-elevated edit-drag flex items-center gap-3"
+				}, [a("div", { class: d(["size-8 rounded-lg flex items-center justify-center flex-shrink-0", r]) }, [a("div", { class: d(["size-4 text-white", e.icon]) }, null)]), a("div", { class: "flex-1 min-w-0" }, [a("div", { class: "text-sm font-medium truncate" }, [e.label]), e.description && a("div", { class: "text-xs truncate opacity-80" }, [e.description])])]);
+			})] })])), g.tree.value?.filter((e) => e.children && e.children.length > 0).length === 0 && a("div", { class: "text-xs text-muted text-center py-4" }, [h("components.designEditor.empty") || "No components"])])] })])])]),
+			a("div", {
+				class: "absolute inset-0 shadow-sm flex flex-col items-center p-6 overflow-auto",
+				style: "background: linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0, 0.1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0, 0.1) 75%), linear-gradient(-45deg, transparent 75%, rgba(0,0,0, 0.1) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
+			}, [a("div", {
+				class: "max-w-2xl w-full flex-1 bg-default shadow p-2",
+				onClick: () => {
+					g.selected.value = void 0;
+				}
+			}, [o.previewWrapper ? o.previewWrapper(a(t, {
+				modelValue: g.value.value?.data,
+				onUpdate: (e) => g.value.value.data = e
+			}, null), g) : a(t, {
+				modelValue: g.value.value?.data,
+				onUpdate: (e) => g.value.value.data = e
+			}, null)])]),
+			a("div", { class: "absolute top-4 right-4 bottom-4 z-10" }, [a("div", { class: "h-full w-300px bg-default shadow rounded" }, [a(n, { actionRender: o.actionRender }, null)])])
+		])] });
+	}
 });
-export {
-  O as DuxDesignEditor
-};
+export { h as DuxDesignEditor };

package/dist/esm/components/designEditor/index.js

@@ -0,0 +1,7 @@
+import "./editor/preview.js";
+import "./editor/setting.js";
+import "./components/grid.js";
+import "./components/index.js";
+import "./editor/hook.js";
+import "./editor.js";
+import "./editor/index.js";

package/dist/esm/components/dialog/dialog.js

@@ -1,123 +1,72 @@
-import { defineComponent as p, reactive as y, ref as v, createVNode as o, h as x, isVNode as h } from "vue";
-import { useI18n as w, useJsonSchema as S } from "@duxweb/dvha-core";
-import { useDisclosure as k } from "@overlastic/vue";
-import { NModal as j, NForm as N, NButton as d } from "naive-ui";
-function r(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !h(e);
+import { createVNode as e, defineComponent as t, h as n, isVNode as r, reactive as i, ref as a } from "vue";
+import { useI18n as o, useJsonSchema as s } from "@duxweb/dvha-core";
+import { NButton as c, NForm as l, NModal as u } from "naive-ui";
+import { useDisclosure as d } from "@overlastic/vue";
+function f(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !r(e);
 }
-const z = /* @__PURE__ */ p({
-  name: "DuxDialog",
-  props: {
-    title: String,
-    content: String,
-    type: String,
-    formSchema: Array,
-    defaultValue: Object,
-    render: Function
-  },
-  setup(e) {
-    const {
-      t: n
-    } = w(), {
-      visible: u,
-      confirm: f,
-      cancel: l,
-      vanish: m
-    } = k({
-      duration: 1e3
-    }), t = y({
-      title: e?.title,
-      content: e?.content,
-      button: "default"
-    });
-    e.type === "confirm" && (t.title = t.title || n("components.dialog.confirm.title"), t.content = t.content || n("components.dialog.confirm.content"), t.button = "primary"), e.type === "success" && (t.title = t.title || n("components.dialog.success.title"), t.content = t.content || n("components.dialog.success.content"), t.button = "success"), e.type === "error" && (t.title = t.title || n("components.dialog.error.title"), t.content = t.content || n("components.dialog.error.content"), t.button = "error"), e.type === "prompt" && (t.title = t.title || n("components.dialog.prompt.title"), t.button = "primary");
-    const s = v({
-      ...e.defaultValue
-    }), {
-      render: b
-    } = S({
-      data: e.formSchema || [],
-      context: {
-        form: s.value
-      }
-    });
-    return () => o(j, {
-      displayDirective: "show",
-      show: u.value,
-      onAfterLeave: () => {
-        m();
-      },
-      onClose: () => {
-        l();
-      },
-      onEsc: () => {
-        l();
-      },
-      role: "dialog",
-      "aria-modal": "true",
-      draggable: !0
-    }, {
-      default: ({
-        draggableClass: g
-      }) => {
-        let a, c, i;
-        return o("div", {
-          class: ["w-400px rounded border border-muted max-w-full shadow-lg shadow-gray-950/10 bg-white/95 dark:shadow-gray-950/80  dark:bg-gray-900/90 backdrop-blur"]
-        }, [e.type !== "node" ? o("div", {
-          class: ["p-6 pb-2 flex gap-4", g]
-        }, [o("div", null, [(e.type === "confirm" || e.type === "prompt") && o("div", {
-          class: "bg-warning bg-opacity-10 text-warning rounded-full p-2"
-        }, [o("div", {
-          class: "i-tabler:info-circle size-5"
-        }, null)]), e.type === "success" && o("div", {
-          class: "bg-success bg-opacity-10 text-success rounded-full p-2"
-        }, [o("div", {
-          class: "i-tabler:check size-5"
-        }, null)]), e.type === "error" && o("div", {
-          class: "bg-error bg-opacity-10 text-error rounded-full p-2"
-        }, [o("div", {
-          class: "i-tabler:alert-triangle size-5"
-        }, null)])]), o("div", {
-          class: "flex flex-1 flex-col gap-2"
-        }, [o("div", {
-          class: "text-base font-bold"
-        }, [t.title]), e.type === "prompt" ? o(N, {
-          labelAlign: "left",
-          showLabel: !1,
-          showFeedback: !1,
-          class: "py-2"
-        }, r(a = x(b)) ? a : {
-          default: () => [a]
-        }) : o("div", {
-          class: "text-sm text-gray-500"
-        }, [t.content])])]) : o("div", {
-          class: "p-4 flex flex-col gap-4"
-        }, [o("div", {
-          class: "text-base font-bold"
-        }, [t.title]), e.render?.()]), o("div", {
-          class: "px-4  pb-4 flex justify-end gap-2"
-        }, [(e.type === "confirm" || e.type === "prompt") && o(d, {
-          tertiary: !0,
-          "aria-label": n("components.button.cancel"),
-          type: t.button,
-          onClick: () => {
-            l();
-          }
-        }, r(c = n("components.button.cancel")) ? c : {
-          default: () => [c]
-        }), o(d, {
-          "aria-label": n("components.button.confirm"),
-          type: t.button,
-          onClick: () => {
-            f(s.value);
-          }
-        }, r(i = n("components.button.confirm")) ? i : {
-          default: () => [i]
-        })])]);
-      }
-    });
-  }
+var p = /* @__PURE__ */ t({
+	name: "DuxDialog",
+	props: {
+		title: String,
+		content: String,
+		type: String,
+		formSchema: Array,
+		defaultValue: Object,
+		render: Function
+	},
+	setup(t) {
+		let { t: r } = o(), { visible: p, confirm: m, cancel: h, vanish: g } = d({ duration: 1e3 }), _ = i({
+			title: t?.title,
+			content: t?.content,
+			button: "default"
+		});
+		t.type === "confirm" && (_.title = _.title || r("components.dialog.confirm.title"), _.content = _.content || r("components.dialog.confirm.content"), _.button = "primary"), t.type === "success" && (_.title = _.title || r("components.dialog.success.title"), _.content = _.content || r("components.dialog.success.content"), _.button = "success"), t.type === "error" && (_.title = _.title || r("components.dialog.error.title"), _.content = _.content || r("components.dialog.error.content"), _.button = "error"), t.type === "prompt" && (_.title = _.title || r("components.dialog.prompt.title"), _.button = "primary");
+		let v = a({ ...t.defaultValue }), { render: y } = s({
+			data: t.formSchema || [],
+			context: { form: v.value }
+		});
+		return () => e(u, {
+			displayDirective: "show",
+			show: p.value,
+			onAfterLeave: () => {
+				g();
+			},
+			onClose: () => {
+				h();
+			},
+			onEsc: () => {
+				h();
+			},
+			role: "dialog",
+			"aria-modal": "true",
+			draggable: !0
+		}, { default: ({ draggableClass: i }) => {
+			let a, o, s;
+			return e("div", { class: ["w-400px rounded border border-muted max-w-full shadow-lg shadow-gray-950/10 bg-white/95 dark:shadow-gray-950/80  dark:bg-gray-900/90 backdrop-blur"] }, [t.type === "node" ? e("div", { class: "p-4 flex flex-col gap-4" }, [e("div", { class: "text-base font-bold" }, [_.title]), t.render?.()]) : e("div", { class: ["p-6 pb-2 flex gap-4", i] }, [e("div", null, [
+				(t.type === "confirm" || t.type === "prompt") && e("div", { class: "bg-warning bg-opacity-10 text-warning rounded-full p-2" }, [e("div", { class: "i-tabler:info-circle size-5" }, null)]),
+				t.type === "success" && e("div", { class: "bg-success bg-opacity-10 text-success rounded-full p-2" }, [e("div", { class: "i-tabler:check size-5" }, null)]),
+				t.type === "error" && e("div", { class: "bg-error bg-opacity-10 text-error rounded-full p-2" }, [e("div", { class: "i-tabler:alert-triangle size-5" }, null)])
+			]), e("div", { class: "flex flex-1 flex-col gap-2" }, [e("div", { class: "text-base font-bold" }, [_.title]), t.type === "prompt" ? e(l, {
+				labelAlign: "left",
+				showLabel: !1,
+				showFeedback: !1,
+				class: "py-2"
+			}, f(a = n(y)) ? a : { default: () => [a] }) : e("div", { class: "text-sm text-gray-500" }, [_.content])])]), e("div", { class: "px-4  pb-4 flex justify-end gap-2" }, [(t.type === "confirm" || t.type === "prompt") && e(c, {
+				tertiary: !0,
+				"aria-label": r("components.button.cancel"),
+				type: _.button,
+				onClick: () => {
+					h();
+				}
+			}, f(o = r("components.button.cancel")) ? o : { default: () => [o] }), e(c, {
+				"aria-label": r("components.button.confirm"),
+				type: _.button,
+				onClick: () => {
+					m(v.value);
+				}
+			}, f(s = r("components.button.confirm")) ? s : { default: () => [s] })])]);
+		} });
+	}
 });
-export {
-  z as default
-};
+export { p as default };

package/dist/esm/components/dialog/index.js

@@ -0,0 +1 @@
+import "./dialog.js";