@hankchen/canvas-editor-vue 0.5.0 → 0.6.1

package/dist/useDataSourceSchema-CG9EGzwc.js

@@ -0,0 +1,464 @@
+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";
+//#region src/shared/useDropdownMenu.ts
+function S(e) {
+	return e !== "separator" && "kind" in e && e.kind === "submenu";
+}
+function C(e) {
+	let t = h(!1);
+	function n(n) {
+		let r = e.container.value, i = n.target;
+		r !== null && i instanceof Node && r.contains(i) || (t.value = !1);
+	}
+	function r(e) {
+		e.key === "Escape" && (t.value = !1);
+	}
+	function i() {
+		window.removeEventListener("pointerdown", n), window.removeEventListener("keydown", r);
+	}
+	return x(t, (e) => {
+		e ? (window.addEventListener("pointerdown", n), window.addEventListener("keydown", r)) : i();
+	}), p(i, !0), {
+		open: t,
+		toggle: () => {
+			t.value = !t.value;
+		},
+		openMenu: () => {
+			t.value = !0;
+		},
+		closeMenu: () => {
+			t.value = !1;
+		}
+	};
+}
+function w(e, t, n) {
+	let r = e.length;
+	if (r === 0) return -1;
+	if (n === "Home" || n === "End") {
+		for (let t = 0; t < r; t++) {
+			let i = n === "Home" ? t : r - 1 - t;
+			if (e[i]) return i;
+		}
+		return -1;
+	}
+	let i = n === "ArrowDown" ? 1 : -1, a = t === -1 ? i === 1 ? -1 : r : t;
+	for (let t = 0; t < r; t++) if (a = (a + i + r) % r, e[a]) return a;
+	return -1;
+}
+function T(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) {
+	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;
+	return r > 0 && (u = Math.max(s, Math.min(u, a - s - r))), {
+		left: l,
+		top: u,
+		side: c
+	};
+}
+function ne(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) {
+	return e.find((e) => !e.hasAttribute("disabled")) ?? t;
+}
+function D(e) {
+	return e?.closest("[data-dropdown-submenu-host]")?.querySelector("[data-dropdown-submenu-arrow]") ?? null;
+}
+function O(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 = {
+	key: 0,
+	class: "cn-dropdown__separator",
+	role: "separator",
+	"data-dropdown-separator": "",
+	"aria-hidden": "true"
+}, oe = {
+	key: 1,
+	class: "cn-dropdown__submenu-host",
+	"data-dropdown-submenu-host": ""
+}, se = [
+	"disabled",
+	"title",
+	"onClick"
+], ce = { class: "cn-dropdown__item-label" }, le = {
+	key: 0,
+	class: "cn-dropdown__shortcut"
+}, ue = [
+	"disabled",
+	"title",
+	"aria-expanded",
+	"onClick",
+	"onMouseenter"
+], de = ["aria-label"], fe = {
+	key: 0,
+	class: "cn-dropdown__separator",
+	role: "separator",
+	"data-dropdown-submenu-separator": "",
+	"aria-hidden": "true"
+}, pe = [
+	"disabled",
+	"title",
+	"onClick"
+], me = { class: "cn-dropdown__item-label" }, he = {
+	key: 0,
+	class: "cn-dropdown__shortcut"
+}, ge = [
+	"disabled",
+	"title",
+	"onClick"
+], _e = { class: "cn-dropdown__item-label" }, ve = {
+	key: 0,
+	class: "cn-dropdown__shortcut"
+}, k = 6, A = 2, j = /*#__PURE__*/ t(/* @__PURE__ */ c({
+	__name: "DropdownMenu",
+	props: {
+		label: {},
+		items: {},
+		title: {},
+		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({
+			left: 0,
+			top: 0,
+			side: "right"
+		});
+		x(P, (e) => {
+			e || (L.value = null, p("closed"));
+		});
+		let z = h({
+			left: 0,
+			edge: "top",
+			offset: 0
+		});
+		function B() {
+			O(M.value)?.focus();
+		}
+		function V(e) {
+			M.value = e instanceof HTMLElement ? e : null;
+		}
+		async function H() {
+			if (await u(), !P.value) return;
+			let e = N.value;
+			e !== null && E(K(), e).focus();
+		}
+		function U() {
+			return c.items.filter((e) => e !== "separator");
+		}
+		function ye() {
+			return U().filter(S);
+		}
+		function be() {
+			return Array.from(N.value?.querySelectorAll("[data-dropdown-submenu-host]") ?? []);
+		}
+		function W() {
+			return N.value?.querySelector("[data-dropdown-submenu]") ?? null;
+		}
+		function G() {
+			return Array.from(W()?.querySelectorAll("[data-dropdown-submenu-item]") ?? []);
+		}
+		function K() {
+			return Array.from(N.value?.querySelectorAll("[data-dropdown-item]") ?? []);
+		}
+		function q(e) {
+			e.run(), (S(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);
+			if (r === -1) {
+				t.focus();
+				return;
+			}
+			n[r]?.focus();
+		}
+		function Se(e) {
+			let t = U()[K().indexOf(e)];
+			t !== void 0 && !t.disabled && q(t);
+		}
+		function Ce(t) {
+			let n = t.key, r = t.target;
+			if (r instanceof HTMLElement && r.matches("[data-dropdown-submenu-item]")) {
+				let e = ne(n);
+				if (e.type === "move") {
+					t.preventDefault(), Y(e.key);
+					return;
+				}
+				if (e.type === "close") {
+					t.preventDefault(), J();
+					return;
+				}
+				if (e.type === "activate") {
+					t.preventDefault(), Te(r);
+					return;
+				}
+				if (e.type === "close-menu") {
+					I(), B();
+					return;
+				}
+				return;
+			}
+			if (n === "Escape") {
+				if (L.value !== null) {
+					J();
+					return;
+				}
+				I(), B();
+				return;
+			}
+			if (n === "Tab") {
+				if (r instanceof HTMLElement && !r.matches("[data-dropdown-item]") && e(r)) return;
+				I(), B();
+				return;
+			}
+			if (n === "Enter" || n === " ") {
+				r instanceof HTMLElement && r.matches("[data-dropdown-item]") && (t.preventDefault(), Se(r));
+				return;
+			}
+			if (n === "ArrowDown" || n === "ArrowUp" || n === "Home" || n === "End") {
+				if (r instanceof HTMLElement && !r.matches("[data-dropdown-item]") && e(r)) return;
+				t.preventDefault(), xe(n);
+				return;
+			}
+			if (n === "ArrowRight") {
+				let e = r instanceof HTMLElement ? r.closest("[data-dropdown-submenu-host]") : null;
+				if (e !== null) {
+					let n = ye()[be().indexOf(e)];
+					n !== void 0 && (t.preventDefault(), we(n, e));
+				}
+			}
+		}
+		async function we(e, t) {
+			if (e.disabled === !0 || (L.value = T(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();
+		}
+		function J() {
+			let e = D(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);
+			if (r === -1) {
+				t.focus();
+				return;
+			}
+			n[r]?.focus();
+		}
+		function Te(e) {
+			let t = L.value;
+			if (t === null) return;
+			let n = Array.from(W()?.querySelectorAll("[data-dropdown-submenu-item]") ?? []), r = t.children.filter((e) => e !== "separator")[n.indexOf(e)];
+			r !== void 0 && !r.disabled && q(r);
+		}
+		function X(e) {
+			if (e.key === "ArrowDown") {
+				if (e.preventDefault(), !P.value) {
+					Z();
+					return;
+				}
+				H();
+			}
+		}
+		async function Z() {
+			if (!P.value) {
+				let e = M.value?.getBoundingClientRect();
+				e && (z.value = c.direction === "up" ? {
+					left: e.left,
+					edge: "bottom",
+					offset: window.innerHeight - e.top + k
+				} : {
+					left: e.left,
+					edge: "top",
+					offset: e.bottom + k
+				});
+			}
+			if (F(), !P.value) {
+				B();
+				return;
+			}
+			await u();
+			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)),
+				edge: t.edge,
+				offset: Math.max(A, Math.min(t.offset, window.innerHeight - e.height - A))
+			}, H();
+		}
+		function Q(e) {
+			return e.currentTarget instanceof HTMLElement ? e.currentTarget : null;
+		}
+		async function $(e) {
+			let t = L.value;
+			if (t === null || e === null) return;
+			let n = e.getBoundingClientRect();
+			if (R.value = {
+				left: n.right + 6,
+				top: n.top,
+				side: "right"
+			}, await u(), L.value !== t) return;
+			let r = W(), i = r?.getBoundingClientRect();
+			r !== null && i !== void 0 && i.width !== 0 && (R.value = te({
+				anchor: {
+					top: n.top,
+					bottom: n.bottom,
+					left: n.left,
+					right: n.right
+				},
+				flyoutWidth: i.width,
+				flyoutHeight: i.height,
+				viewportWidth: window.innerWidth,
+				viewportHeight: window.innerHeight
+			}));
+		}
+		function Ee(e, t) {
+			t.disabled !== !0 && (L.value = T(L.value, {
+				type: "open",
+				target: t
+			}), $(Q(e)));
+		}
+		function De(e, t) {
+			t.disabled !== !0 && (L.value = T(L.value, {
+				type: "toggle",
+				target: t
+			}), $(Q(e)));
+		}
+		function Oe() {
+			L.value = null;
+		}
+		return (e, r) => (m(), a("div", {
+			ref_key: "container",
+			ref: j,
+			class: "cn-dropdown",
+			onMouseleave: Oe
+		}, [_(e.$slots, "trigger", {
+			open: b(P),
+			toggle: Z,
+			closeMenu: b(I),
+			triggerRef: V,
+			onKeydown: X
+		}, () => [o("button", {
+			ref: V,
+			type: "button",
+			class: "cn-dropdown__trigger",
+			"data-dropdown-trigger": "",
+			"aria-haspopup": "menu",
+			"aria-expanded": b(P),
+			title: t.title ?? t.label,
+			onClick: r[0] ||= (e) => Z(),
+			onKeydown: X
+		}, [s(y(t.label) + " ", 1), r[2] ||= o("span", {
+			class: "cn-dropdown__caret",
+			"aria-hidden": "true"
+		}, "▾", -1)], 40, re)], !0), b(P) ? (m(), a("div", {
+			key: 0,
+			ref_key: "menuEl",
+			ref: N,
+			class: "cn-dropdown__menu",
+			role: "menu",
+			"aria-label": t.label,
+			"data-dropdown-menu": "",
+			tabindex: "-1",
+			style: f(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({
+				type: "button",
+				role: "menuitem",
+				class: "cn-dropdown__item cn-dropdown__submenu-main",
+				"data-dropdown-item": "",
+				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", {
+				type: "button",
+				class: "cn-dropdown__submenu-arrow",
+				"data-dropdown-submenu-arrow": "",
+				tabindex: "-1",
+				disabled: e.disabled,
+				title: e.title,
+				"aria-haspopup": "menu",
+				"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", {
+				key: 0,
+				class: d(["cn-dropdown__submenu", { "cn-dropdown__submenu--left": R.value.side === "left" }]),
+				role: "menu",
+				"aria-label": e.label,
+				"data-dropdown-submenu": "",
+				tabindex: "-1",
+				style: f({
+					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({
+				key: 1,
+				type: "button",
+				role: "menuitem",
+				class: "cn-dropdown__item",
+				"data-dropdown-submenu-item": "",
+				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({
+			key: 2,
+			type: "button",
+			role: "menuitem",
+			class: "cn-dropdown__item",
+			"data-dropdown-item": "",
+			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),
+			toggle: Z,
+			closeMenu: b(I),
+			triggerRef: V,
+			onKeydown: X
+		}, void 0, !0)], 44, ie)) : i("", !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);
+}
+function N(e) {
+	let t = v(e.store.ui.dataSourceSchemaRejection), n = e.subscribe((n) => {
+		n.scope === "ui" && n.branch === "dataSourceSchema" && (t.value = e.store.ui.dataSourceSchemaRejection);
+	});
+	return p(n, !0), r(() => t.value);
+}
+//#endregion
+export { C as i, N as n, j as r, M as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hankchen/canvas-editor-vue",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "license": "MIT",
   "description": "Vue 3 薄绑定：响应式桥、composables、画布表面组件、textarea 文本编辑 overlay、schema 驱动属性面板注册表",
   "type": "module",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@lucide/vue": "^1.48.0",
-    "@hankchen/canvas-editor": "0.6.0"
+    "@hankchen/canvas-editor": "0.7.1"
   },
   "peerDependencies": {
     "vue": "^3.5.0"