@hankchen/canvas-editor-vue 0.6.0 → 0.7.0

package/dist/{useDataSourceSchema-YV8g-lo0.js → DropdownMenu-CeUNKMDQ.js}

@@ -1,11 +1,11 @@
-import { n as e, u as t } from "./useTransientFeedback-CTjmMmFF.js";
-import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeProps as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onScopeDispose as p, openBlock as m, ref as h, renderList as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, watch as x, withModifiers as ee } from "vue";
+import { n as e, p as t } from "./useTransientFeedback-BN_O7V2w.js";
+import { Fragment as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, mergeProps as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onScopeDispose as f, openBlock as p, ref as m, renderList as h, renderSlot as g, shallowRef as ee, toDisplayString as _, unref as v, watch as y, withModifiers as te } from "vue";
 //#region src/shared/useDropdownMenu.ts
-function S(e) {
+function b(e) {
 	return e !== "separator" && "kind" in e && e.kind === "submenu";
 }
-function C(e) {
-	let t = h(!1);
+function x(e) {
+	let t = m(!1);
 	function n(n) {
 		let r = e.container.value, i = n.target;
 		r !== null && i instanceof Node && r.contains(i) || (t.value = !1);
@@ -16,9 +16,9 @@ function C(e) {
 	function i() {
 		window.removeEventListener("pointerdown", n), window.removeEventListener("keydown", r);
 	}
-	return x(t, (e) => {
+	return y(t, (e) => {
 		e ? (window.addEventListener("pointerdown", n), window.addEventListener("keydown", r)) : i();
-	}), p(i, !0), {
+	}), f(i, !0), {
 		open: t,
 		toggle: () => {
 			t.value = !t.value;
@@ -31,7 +31,7 @@ function C(e) {
 		}
 	};
 }
-function w(e, t, n) {
+function S(e, t, n) {
 	let r = e.length;
 	if (r === 0) return -1;
 	if (n === "Home" || n === "End") {
@@ -45,10 +45,10 @@ function w(e, t, n) {
 	for (let t = 0; t < r; t++) if (a = (a + i + r) % r, e[a]) return a;
 	return -1;
 }
-function T(e, t) {
+function C(e, t) {
 	return t.type === "close" || t.target === void 0 ? null : t.type === "open" ? t.target : e === t.target ? null : t.target;
 }
-function te(e) {
+function ne(e) {
 	let { anchor: t, flyoutWidth: n, flyoutHeight: r, viewportWidth: i, viewportHeight: a } = e, o = e.gap ?? 6, s = e.margin ?? 2, c = n > 0 && t.right + o + n > i - s ? "left" : "right", l = c === "right" ? t.right + o : t.left - o - n;
 	n > 0 && (l = Math.max(s, Math.min(l, i - s - n)));
 	let u = t.top;
@@ -58,24 +58,24 @@ function te(e) {
 		side: c
 	};
 }
-function ne(e) {
+function re(e) {
 	return e === "ArrowDown" || e === "ArrowUp" || e === "Home" || e === "End" ? {
 		type: "move",
 		key: e
 	} : e === "ArrowLeft" || e === "Escape" ? { type: "close" } : e === "Enter" || e === " " ? { type: "activate" } : e === "Tab" ? { type: "close-menu" } : { type: "none" };
 }
-function E(e, t) {
+function w(e, t) {
 	return e.find((e) => !e.hasAttribute("disabled")) ?? t;
 }
-function D(e) {
+function T(e) {
 	return e?.closest("[data-dropdown-submenu-host]")?.querySelector("[data-dropdown-submenu-arrow]") ?? null;
 }
-function O(e) {
+function E(e) {
 	return e;
 }
 //#endregion
 //#region src/shared/DropdownMenu.vue?vue&type=script&setup=true&lang.ts
-var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
+var D = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 	key: 0,
 	class: "cn-dropdown__separator",
 	role: "separator",
@@ -118,7 +118,7 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 ], _e = { class: "cn-dropdown__item-label" }, ve = {
 	key: 0,
 	class: "cn-dropdown__shortcut"
-}, k = 6, A = 2, j = /*#__PURE__*/ t(/* @__PURE__ */ c({
+}, O = 6, k = 2, A = /*#__PURE__*/ t(/* @__PURE__ */ s({
 	__name: "DropdownMenu",
 	props: {
 		label: {},
@@ -127,36 +127,36 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 		direction: { default: "down" }
 	},
 	emits: ["closed"],
-	setup(t, { emit: r }) {
-		let c = t, p = r, j = h(null), M = h(null), N = h(null), { open: P, toggle: F, closeMenu: I } = C({ container: j }), L = v(null), R = h({
+	setup(t, { emit: s }) {
+		let f = t, A = s, j = m(null), M = m(null), N = m(null), { open: P, toggle: F, closeMenu: I } = x({ container: j }), L = ee(null), R = m({
 			left: 0,
 			top: 0,
 			side: "right"
 		});
-		x(P, (e) => {
-			e || (L.value = null, p("closed"));
+		y(P, (e) => {
+			e || (L.value = null, A("closed"));
 		});
-		let z = h({
+		let z = m({
 			left: 0,
 			edge: "top",
 			offset: 0
 		});
 		function B() {
-			O(M.value)?.focus();
+			E(M.value)?.focus();
 		}
 		function V(e) {
 			M.value = e instanceof HTMLElement ? e : null;
 		}
 		async function H() {
-			if (await u(), !P.value) return;
+			if (await l(), !P.value) return;
 			let e = N.value;
-			e !== null && E(K(), e).focus();
+			e !== null && w(K(), e).focus();
 		}
 		function U() {
-			return c.items.filter((e) => e !== "separator");
+			return f.items.filter((e) => e !== "separator");
 		}
 		function ye() {
-			return U().filter(S);
+			return U().filter(b);
 		}
 		function be() {
 			return Array.from(N.value?.querySelectorAll("[data-dropdown-submenu-host]") ?? []);
@@ -171,12 +171,12 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 			return Array.from(N.value?.querySelectorAll("[data-dropdown-item]") ?? []);
 		}
 		function q(e) {
-			e.run(), (S(e) || e.keepsOpen !== !0) && (I(), B());
+			e.run(), (b(e) || e.keepsOpen !== !0) && (I(), B());
 		}
 		function xe(e) {
 			let t = N.value;
 			if (t === null) return;
-			let n = K(), r = w(n.map((e) => !e.hasAttribute("disabled")), document.activeElement instanceof HTMLElement ? n.indexOf(document.activeElement) : -1, e);
+			let n = K(), r = S(n.map((e) => !e.hasAttribute("disabled")), document.activeElement instanceof HTMLElement ? n.indexOf(document.activeElement) : -1, e);
 			if (r === -1) {
 				t.focus();
 				return;
@@ -190,7 +190,7 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 		function Ce(t) {
 			let n = t.key, r = t.target;
 			if (r instanceof HTMLElement && r.matches("[data-dropdown-submenu-item]")) {
-				let e = ne(n);
+				let e = re(n);
 				if (e.type === "move") {
 					t.preventDefault(), Y(e.key);
 					return;
@@ -240,21 +240,21 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 			}
 		}
 		async function we(e, t) {
-			if (e.disabled === !0 || (L.value = T(L.value, {
+			if (e.disabled === !0 || (L.value = C(L.value, {
 				type: "open",
 				target: e
 			}), await $(t.querySelector("[data-dropdown-submenu-arrow]")), L.value !== e || !P.value)) return;
 			let n = W();
-			n !== null && E(G(), n).focus();
+			n !== null && w(G(), n).focus();
 		}
 		function J() {
-			let e = D(document.activeElement instanceof HTMLElement ? document.activeElement : null);
+			let e = T(document.activeElement instanceof HTMLElement ? document.activeElement : null);
 			L.value = null, e?.focus();
 		}
 		function Y(e) {
 			let t = W();
 			if (t === null) return;
-			let n = G(), r = w(n.map((e) => !e.hasAttribute("disabled")), document.activeElement instanceof HTMLElement ? n.indexOf(document.activeElement) : -1, e);
+			let n = G(), r = S(n.map((e) => !e.hasAttribute("disabled")), document.activeElement instanceof HTMLElement ? n.indexOf(document.activeElement) : -1, e);
 			if (r === -1) {
 				t.focus();
 				return;
@@ -279,28 +279,28 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 		async function Z() {
 			if (!P.value) {
 				let e = M.value?.getBoundingClientRect();
-				e && (z.value = c.direction === "up" ? {
+				e && (z.value = f.direction === "up" ? {
 					left: e.left,
 					edge: "bottom",
-					offset: window.innerHeight - e.top + k
+					offset: window.innerHeight - e.top + O
 				} : {
 					left: e.left,
 					edge: "top",
-					offset: e.bottom + k
+					offset: e.bottom + O
 				});
 			}
 			if (F(), !P.value) {
 				B();
 				return;
 			}
-			await u();
+			await l();
 			let e = N.value?.getBoundingClientRect();
 			if (!e) return;
 			let t = z.value;
 			z.value = {
-				left: Math.max(A, Math.min(t.left, window.innerWidth - e.width - A)),
+				left: Math.max(k, Math.min(t.left, window.innerWidth - e.width - k)),
 				edge: t.edge,
-				offset: Math.max(A, Math.min(t.offset, window.innerHeight - e.height - A))
+				offset: Math.max(k, Math.min(t.offset, window.innerHeight - e.height - k))
 			}, H();
 		}
 		function Q(e) {
@@ -314,9 +314,9 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 				left: n.right + 6,
 				top: n.top,
 				side: "right"
-			}, await u(), L.value !== t) return;
+			}, await l(), L.value !== t) return;
 			let r = W(), i = r?.getBoundingClientRect();
-			r !== null && i !== void 0 && i.width !== 0 && (R.value = te({
+			r !== null && i !== void 0 && i.width !== 0 && (R.value = ne({
 				anchor: {
 					top: n.top,
 					bottom: n.bottom,
@@ -330,13 +330,13 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 			}));
 		}
 		function Ee(e, t) {
-			t.disabled !== !0 && (L.value = T(L.value, {
+			t.disabled !== !0 && (L.value = C(L.value, {
 				type: "open",
 				target: t
 			}), $(Q(e)));
 		}
 		function De(e, t) {
-			t.disabled !== !0 && (L.value = T(L.value, {
+			t.disabled !== !0 && (L.value = C(L.value, {
 				type: "toggle",
 				target: t
 			}), $(Q(e)));
@@ -344,31 +344,31 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 		function Oe() {
 			L.value = null;
 		}
-		return (e, r) => (m(), a("div", {
+		return (e, s) => (p(), i("div", {
 			ref_key: "container",
 			ref: j,
 			class: "cn-dropdown",
 			onMouseleave: Oe
-		}, [_(e.$slots, "trigger", {
-			open: b(P),
+		}, [g(e.$slots, "trigger", {
+			open: v(P),
 			toggle: Z,
-			closeMenu: b(I),
+			closeMenu: v(I),
 			triggerRef: V,
 			onKeydown: X
-		}, () => [o("button", {
+		}, () => [a("button", {
 			ref: V,
 			type: "button",
 			class: "cn-dropdown__trigger",
 			"data-dropdown-trigger": "",
 			"aria-haspopup": "menu",
-			"aria-expanded": b(P),
+			"aria-expanded": v(P),
 			title: t.title ?? t.label,
-			onClick: r[0] ||= (e) => Z(),
+			onClick: s[0] ||= (e) => Z(),
 			onKeydown: X
-		}, [s(y(t.label) + " ", 1), r[2] ||= o("span", {
+		}, [o(_(t.label) + " ", 1), s[2] ||= a("span", {
 			class: "cn-dropdown__caret",
 			"aria-hidden": "true"
-		}, "▾", -1)], 40, re)], !0), b(P) ? (m(), a("div", {
+		}, "▾", -1)], 40, D)], !0), v(P) ? (p(), i("div", {
 			key: 0,
 			ref_key: "menuEl",
 			ref: N,
@@ -377,16 +377,16 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 			"aria-label": t.label,
 			"data-dropdown-menu": "",
 			tabindex: "-1",
-			style: f(z.value.edge === "top" ? {
+			style: d(z.value.edge === "top" ? {
 				left: `${z.value.left}px`,
 				top: `${z.value.offset}px`
 			} : {
 				left: `${z.value.left}px`,
 				bottom: `${z.value.offset}px`
 			}),
-			onKeydown: r[1] ||= ee((e) => Ce(e), ["stop"])
-		}, [(m(!0), a(n, null, g(t.items, (e, t) => (m(), a(n, { key: t }, [e === "separator" ? (m(), a("div", ae)) : b(S)(e) ? (m(), a("div", oe, [
-			o("button", l({
+			onKeydown: s[1] ||= te((e) => Ce(e), ["stop"])
+		}, [(p(!0), i(n, null, h(t.items, (e, t) => (p(), i(n, { key: t }, [e === "separator" ? (p(), i("div", ae)) : v(b)(e) ? (p(), i("div", oe, [
+			a("button", c({
 				type: "button",
 				role: "menuitem",
 				class: "cn-dropdown__item cn-dropdown__submenu-main",
@@ -394,8 +394,8 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 				tabindex: "-1",
 				disabled: e.disabled,
 				title: e.title
-			}, { ref_for: !0 }, e.dataAttrs, { onClick: (t) => q(e) }), [o("span", ce, y(e.label), 1), e.shortcut ? (m(), a("span", le, y(e.shortcut), 1)) : i("", !0)], 16, se),
-			o("button", {
+			}, { ref_for: !0 }, e.dataAttrs, { onClick: (t) => q(e) }), [a("span", ce, _(e.label), 1), e.shortcut ? (p(), i("span", le, _(e.shortcut), 1)) : r("", !0)], 16, se),
+			a("button", {
 				type: "button",
 				class: "cn-dropdown__submenu-arrow",
 				"data-dropdown-submenu-arrow": "",
@@ -406,19 +406,19 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 				"aria-expanded": L.value === e,
 				onClick: (t) => De(t, e),
 				onMouseenter: (t) => Ee(t, e)
-			}, [...r[3] ||= [o("span", { "aria-hidden": "true" }, "▸", -1)]], 40, ue),
-			L.value === e ? (m(), a("div", {
+			}, [...s[3] ||= [a("span", { "aria-hidden": "true" }, "▸", -1)]], 40, ue),
+			L.value === e ? (p(), i("div", {
 				key: 0,
-				class: d(["cn-dropdown__submenu", { "cn-dropdown__submenu--left": R.value.side === "left" }]),
+				class: u(["cn-dropdown__submenu", { "cn-dropdown__submenu--left": R.value.side === "left" }]),
 				role: "menu",
 				"aria-label": e.label,
 				"data-dropdown-submenu": "",
 				tabindex: "-1",
-				style: f({
+				style: d({
 					left: `${R.value.left}px`,
 					top: `${R.value.top}px`
 				})
-			}, [(m(!0), a(n, null, g(e.children, (e, t) => (m(), a(n, { key: t }, [e === "separator" ? (m(), a("div", fe)) : (m(), a("button", l({
+			}, [(p(!0), i(n, null, h(e.children, (e, t) => (p(), i(n, { key: t }, [e === "separator" ? (p(), i("div", fe)) : (p(), i("button", c({
 				key: 1,
 				type: "button",
 				role: "menuitem",
@@ -427,8 +427,8 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 				tabindex: "-1",
 				disabled: e.disabled,
 				title: e.title
-			}, { ref_for: !0 }, e.dataAttrs, { onClick: (t) => q(e) }), [o("span", me, y(e.label), 1), e.shortcut ? (m(), a("span", he, y(e.shortcut), 1)) : i("", !0)], 16, pe))], 64))), 128))], 14, de)) : i("", !0)
-		])) : (m(), a("button", l({
+			}, { ref_for: !0 }, e.dataAttrs, { onClick: (t) => q(e) }), [a("span", me, _(e.label), 1), e.shortcut ? (p(), i("span", he, _(e.shortcut), 1)) : r("", !0)], 16, pe))], 64))), 128))], 14, de)) : r("", !0)
+		])) : (p(), i("button", c({
 			key: 2,
 			type: "button",
 			role: "menuitem",
@@ -437,22 +437,14 @@ var re = ["aria-expanded", "title"], ie = ["aria-label"], ae = {
 			tabindex: "-1",
 			disabled: e.disabled,
 			title: e.title
-		}, { ref_for: !0 }, e.dataAttrs, { onClick: (t) => q(e) }), [o("span", _e, y(e.label), 1), e.shortcut ? (m(), a("span", ve, y(e.shortcut), 1)) : i("", !0)], 16, ge))], 64))), 128)), _(e.$slots, "body", {
-			open: b(P),
+		}, { ref_for: !0 }, e.dataAttrs, { onClick: (t) => q(e) }), [a("span", _e, _(e.label), 1), e.shortcut ? (p(), i("span", ve, _(e.shortcut), 1)) : r("", !0)], 16, ge))], 64))), 128)), g(e.$slots, "body", {
+			open: v(P),
 			toggle: Z,
-			closeMenu: b(I),
+			closeMenu: v(I),
 			triggerRef: V,
 			onKeydown: X
-		}, void 0, !0)], 44, ie)) : i("", !0)], 544));
+		}, void 0, !0)], 44, ie)) : r("", !0)], 544));
 	}
 }), [["__scopeId", "data-v-f39579b0"]]);
 //#endregion
-//#region src/shared/useDataSourceSchema.ts
-function M(e) {
-	let t = v(e.store.ui.dataSourceSchema), n = e.subscribe((n) => {
-		n.scope === "ui" && n.branch === "dataSourceSchema" && (t.value = e.store.ui.dataSourceSchema);
-	});
-	return p(n, !0), r(() => t.value);
-}
-//#endregion
-export { j as n, C as r, M as t };
+export { x as n, A as t };