@threadlabs/looma 0.6.4 → 0.6.5

package/vue/chunks/UiAffordanceScope.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-affordance-scope/ui-affordance-scope.js";
 //#region .build/vue/UiAffordanceScope.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-affordance-scope-state"];
@@ -15,82 +16,12 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 		const engaged = ref(false);
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [engaged.value && "engaged"].filter(Boolean).join(" "));
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "engaged") return engaged.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "engaged") {
-				engaged.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)
-			}),
-			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;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			state: { engaged }
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-affordance-scope" }, _ctx.$attrs, {
@@ -100,6 +31,6 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3d8ef4c3"]]);
+}), [["__scopeId", "data-v-c1d56d8d"]]);
 //#endregion
 export { UiAffordanceScope_default as t };

package/vue/chunks/UiAvatar.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, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-avatar/ui-avatar.js";
 //#region .build/vue/UiAvatar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src", "hidden"];
@@ -22,94 +23,17 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const hasImage = ref(false);
 		const hasAuthoredImage = ref(false);
 		const initials = ref("?");
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "hasImage") return hasImage.value;
-			if (name === "hasAuthoredImage") return hasAuthoredImage.value;
-			if (name === "initials") return initials.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "hasImage") {
-				hasImage.value = value;
-				return true;
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { image: imageElement },
+			state: {
+				hasImage,
+				hasAuthoredImage,
+				initials
 			}
-			if (name === "hasAuthoredImage") {
-				hasAuthoredImage.value = value;
-				return true;
-			}
-			if (name === "initials") {
-				initials.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)
-			}),
-			refs: { get image() {
-				return imageElement.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) => {
-						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();
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-avatar" }, _ctx.$attrs, {
@@ -133,6 +57,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-3a27ff1d"]]);
+}), [["__scopeId", "data-v-64e52bdd"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.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, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-avatar-group/ui-avatar-group.js";
 //#region .build/vue/UiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
@@ -18,84 +19,13 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		const root = ref(null);
 		const overflowElement = useTemplateRef("overflow");
 		const overflowCount = ref(0);
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "overflowCount") return overflowCount.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "overflowCount") {
-				overflowCount.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)
-			}),
-			refs: { get overflow() {
-				return overflowElement.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) => {
-						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();
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { overflow: overflowElement },
+			state: { overflowCount }
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
@@ -114,6 +44,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-2ad5d86f"]]);
+}), [["__scopeId", "data-v-cbb93f58"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.js

@@ -19,6 +19,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-7e9b5784"]]);
+}), [["__scopeId", "data-v-90c7d1bb"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -41,6 +41,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-405b2c60"]]);
+}), [["__scopeId", "data-v-4fd0ad7f"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCallout.js

@@ -103,6 +103,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-31ee6589"]]);
+}), [["__scopeId", "data-v-c6e92976"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/chunks/UiCheckbox.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, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, useTemplateRef, watchEffect } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-checkbox/ui-checkbox.js";
 //#region .build/vue/UiCheckbox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-checkbox-state"];
@@ -48,100 +49,21 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const internalChecked = ref(false);
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [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 = { change: {
-				bubbles: true,
-				composed: true,
-				cancelable: false
-			} };
-			const checks = { change: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["checked"] === "boolean" && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-				"checked",
-				"value",
-				"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" && "checked" in detail) emitEvent("update:checked", detail["checked"]);
-			if (detail !== null && typeof detail === "object" && "value" in detail) emitEvent("update:value", detail["value"]);
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				...declared[name],
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "internalChecked") return internalChecked.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "internalChecked") {
-				internalChecked.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)
-			}),
-			refs: { get input() {
-				return inputElement.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) => {
-						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;
-			});
+		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["checked"] === "boolean" && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"checked",
+			"value",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: { change: isChangeDetail },
+			modeled: ["checked", "value"]
 		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { input: inputElement },
+			state: { internalChecked }
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("label", mergeProps({ "data-component": "ui-checkbox" }, _ctx.$attrs, {
@@ -159,6 +81,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-acf71232"]]);
+}), [["__scopeId", "data-v-d8891b6a"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCluster.js

@@ -19,6 +19,6 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cluster" }, _ctx.$attrs, { "data-ui-cluster-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-6de2f2e4"]]);
+}), [["__scopeId", "data-v-9a0304f1"]]);
 //#endregion
 export { UiCluster_default as t };