@threadlabs/looma 0.6.4 → 0.6.5

package/vue/chunks/UiTree.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, watchEffect } from "vue";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-tree/ui-tree.js";
 //#region .build/vue/UiTree.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-tree-state"];
@@ -25,115 +26,36 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const root = ref(null);
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [props.density && `density density=${props.density}`].filter(Boolean).join(" "));
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			const declared = {
-				reorder: {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				"reorder-rejected": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				}
-			};
-			const checks = {
-				reorder: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["sourceId"] === "string" && typeof detail["targetId"] === "string" && (detail["position"] === "before" || detail["position"] === "inside" || detail["position"] === "after") && typeof detail["sourceType"] === "string" && typeof detail["targetType"] === "string" && typeof detail["sourceScope"] === "string" && typeof detail["targetScope"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"sourceId",
-					"targetId",
-					"position",
-					"sourceType",
-					"targetType",
-					"sourceScope",
-					"targetScope",
-					"trigger"
-				].includes(key)),
-				"reorder-rejected": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["sourceId"] === "string" && typeof detail["targetId"] === "string" && (detail["position"] === "before" || detail["position"] === "inside" || detail["position"] === "after") && detail["reason"] === "max-depth" && Number.isInteger(detail["maxDepth"]) && Number.isInteger(detail["resultingDepth"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"sourceId",
-					"targetId",
-					"position",
-					"reason",
-					"maxDepth",
-					"resultingDepth",
-					"trigger"
-				].includes(key))
-			};
-			if (detail !== void 0 && checks[name] !== void 0 && !checks[name](detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
-			const emitEvent = emit;
-			emitEvent(name, detail);
-			if (detail !== null && typeof detail === "object" && "maxDepth" in detail) emitEvent("update:maxDepth", detail["maxDepth"]);
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				...declared[name],
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			return props[name];
-		}
-		function write(name, value) {
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
+		const isReorderDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["sourceId"] === "string" && typeof detail["targetId"] === "string" && (detail["position"] === "before" || detail["position"] === "inside" || detail["position"] === "after") && typeof detail["sourceType"] === "string" && typeof detail["targetType"] === "string" && typeof detail["sourceScope"] === "string" && typeof detail["targetScope"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"sourceId",
+			"targetId",
+			"position",
+			"sourceType",
+			"targetType",
+			"sourceScope",
+			"targetScope",
+			"trigger"
+		].includes(key));
+		const isReorderRejectedDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["sourceId"] === "string" && typeof detail["targetId"] === "string" && (detail["position"] === "before" || detail["position"] === "inside" || detail["position"] === "after") && detail["reason"] === "max-depth" && Number.isInteger(detail["maxDepth"]) && Number.isInteger(detail["resultingDepth"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"sourceId",
+			"targetId",
+			"position",
+			"reason",
+			"maxDepth",
+			"resultingDepth",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: {
+				reorder: isReorderDetail,
+				"reorder-rejected": isReorderRejectedDetail
 			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
-			refs: {},
-			elements: new Proxy({}, { get: (_target, name) => {
-				if (typeof name !== "string" || root.value === null) return void 0;
-				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
-			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
+			modeled: ["maxDepth"]
 		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
@@ -146,6 +68,6 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-e94f7a5c"]]);
+}), [["__scopeId", "data-v-89a4437c"]]);
 //#endregion
 export { UiTree_default as t };

package/vue/chunks/UiTreeItem.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-tree-item/ui-tree-item.js";
 //#region .build/vue/UiTreeItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -78,128 +79,37 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const isContainer = ref(false);
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [props.selected && "selected", props.disabled && "disabled"].filter(Boolean).join(" "));
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			const declared = { expand: {
+		const isExpandDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && typeof detail["expanded"] === "boolean" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"id",
+			"expanded",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			declared: { expand: {
 				bubbles: false,
 				composed: true,
 				cancelable: false
-			} };
-			const checks = { expand: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && typeof detail["expanded"] === "boolean" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-				"id",
-				"expanded",
-				"trigger"
-			].includes(key)) };
-			if (detail !== void 0 && checks[name] !== void 0 && !checks[name](detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
-			const emitEvent = emit;
-			emitEvent(name, detail);
-			if (detail !== null && typeof detail === "object" && "expanded" in detail) emitEvent("update:expanded", detail["expanded"]);
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				...declared[name],
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "internalExpanded") return internalExpanded.value;
-			if (name === "structuralLevel") return structuralLevel.value;
-			if (name === "tabStop") return tabStop.value;
-			if (name === "isContainer") return isContainer.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "internalExpanded") {
-				internalExpanded.value = value;
-				return true;
-			}
-			if (name === "structuralLevel") {
-				structuralLevel.value = value;
-				return true;
-			}
-			if (name === "tabStop") {
-				tabStop.value = value;
-				return true;
-			}
-			if (name === "isContainer") {
-				isContainer.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
-			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
+			} },
+			checks: { expand: isExpandDetail },
+			modeled: ["expanded"]
+		});
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
 			refs: {
-				get row() {
-					return rowElement.value;
-				},
-				get dragHandle() {
-					return dragHandleElement.value;
-				},
-				get disclosure() {
-					return disclosureElement.value;
-				},
-				get actions() {
-					return actionsElement.value;
-				},
-				get children() {
-					return childrenElement.value;
-				}
+				row: rowElement,
+				dragHandle: dragHandleElement,
+				disclosure: disclosureElement,
+				actions: actionsElement,
+				children: childrenElement
 			},
-			elements: new Proxy({}, { get: (_target, name) => {
-				if (typeof name !== "string" || root.value === null) return void 0;
-				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
-			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+			state: {
+				internalExpanded,
+				structuralLevel,
+				tabStop,
+				isContainer
+			}
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
@@ -300,6 +210,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-07ef6009"]]);
+}), [["__scopeId", "data-v-9b8fd08d"]]);
 //#endregion
 export { UiTreeItem_default as t };

package/vue/chunks/host.js

@@ -0,0 +1,101 @@
+import { computed, onBeforeUnmount, onMounted, shallowRef, watchEffect } from "vue";
+//#region .build/vue/host.ts
+/**
+* The controller host, built from Vue refs, effects, and lifecycle. Reads and writes reach the
+* component's own refs, so a controller's change renders as any other Vue change does, and the
+* effects and listeners it opens close when the component unmounts.
+*/
+function useComponentHost(controller, options) {
+	const { root, dispatch, props, refs = {}, state = {}, computed: computedValues = {} } = options;
+	const stops = [];
+	const read = (name) => Object.hasOwn(state, name) ? state[name].value : Object.hasOwn(computedValues, name) ? computedValues[name].value : props?.[name];
+	const host = {
+		get element() {
+			return root.value;
+		},
+		state: new Proxy({}, {
+			get: (_target, name) => typeof name === "string" ? read(name) : void 0,
+			set: (_target, name, value) => {
+				if (typeof name !== "string" || !Object.hasOwn(state, name)) throw new TypeError(`Only declared state is writable; \`${String(name)}\` is not.`);
+				state[name].value = value;
+				return true;
+			}
+		}),
+		refs: Object.defineProperties({}, Object.fromEntries(Object.entries(refs).map(([name, ref]) => [name, {
+			enumerable: true,
+			get: () => ref.value
+		}]))),
+		elements: new Proxy({}, { get: (_target, name) => {
+			if (typeof name !== "string" || root.value === null) return void 0;
+			return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
+		} }),
+		signal(initialValue) {
+			const value = shallowRef(initialValue);
+			return {
+				get: () => value.value,
+				set: (next) => {
+					value.value = next;
+				},
+				update: (next) => {
+					value.value = next(value.value);
+				}
+			};
+		},
+		computed(compute) {
+			const value = computed(compute);
+			return { get: () => value.value };
+		},
+		effect(run) {
+			const stop = watchEffect((onCleanup) => {
+				const cleanup = run();
+				if (typeof cleanup === "function") onCleanup(cleanup);
+			}, { flush: "post" });
+			stops.push(stop);
+			return stop;
+		},
+		on(event, listener) {
+			const element = root.value;
+			element?.addEventListener(event, listener);
+			const off = () => element?.removeEventListener(event, listener);
+			stops.push(off);
+			return off;
+		},
+		dispatch
+	};
+	let cleanup;
+	let started;
+	onMounted(() => {
+		started = Promise.resolve(controller?.(host)).then((result) => {
+			if (typeof result === "function") cleanup = result;
+		});
+	});
+	onBeforeUnmount(() => {
+		for (const stop of stops.splice(0)) stop();
+		if (typeof cleanup === "function") cleanup();
+	});
+	/** `ready` settles once the controller has started; a method exposed by the component awaits it. */
+	return {
+		host,
+		ready: () => started
+	};
+}
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+function createDispatch(root, emit, options = {}) {
+	const { declared = {}, checks = {}, modeled = [] } = options;
+	return (name, detail) => {
+		const check = checks[name];
+		if (detail !== void 0 && check !== void 0 && !check(detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+		emit?.(name, detail);
+		if (detail !== null && typeof detail === "object") {
+			for (const prop of modeled) if (prop in detail) emit?.(`update:${prop}`, detail[prop]);
+		}
+		return root.value?.dispatchEvent(new CustomEvent(name, {
+			bubbles: true,
+			composed: true,
+			...declared[name],
+			detail
+		})) ?? true;
+	};
+}
+//#endregion
+export { useComponentHost as n, createDispatch as t };