@threadlabs/looma 0.19.0 → 0.20.0

package/vue/chunks/UiMenuItem.js

@@ -1,13 +1,17 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
+import { n as preserveRootFocus, r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-menu-item/ui-menu-item.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, useTemplateRef, watchSyncEffect } from "vue";
 //#region .build/vue/UiMenuItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-disabled",
-	"data-value",
 	"href",
+	"data-checked",
+	"data-disabled",
+	"data-href",
+	"data-type",
+	"data-value",
 	"data-ui-menu-item-state"
 ];
 var _hoisted_2 = { class: "label" };
@@ -19,6 +23,10 @@ var _hoisted_4 = [
 	"role",
 	"aria-checked",
 	"aria-disabled",
+	"data-checked",
+	"data-disabled",
+	"data-href",
+	"data-type",
 	"data-value",
 	"data-ui-menu-item-state"
 ];
@@ -38,16 +46,25 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	__name: "UiMenuItem",
 	props: {
 		checked: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		disabled: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		href: { default: "" },
-		type: { default: "action" },
-		value: { default: "" }
+		href: {
+			type: null,
+			default: ""
+		},
+		type: {
+			type: null,
+			default: "action"
+		},
+		value: {
+			type: null,
+			default: ""
+		}
 	},
 	emits: [
 		"update:checked",
@@ -57,11 +74,63 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			checked: checkedProp(props["checked"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "checked", void 0, void 0),
+			disabled: checkedProp(props["disabled"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "disabled", void 0, void 0),
+			href: checkedProp(props["href"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "href", void 0, void 0),
+			type: checkedProp(props["type"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "type", void 0, [
+				"action",
+				"checkbox",
+				"radio"
+			]),
+			value: checkedProp(props["value"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "value", void 0, void 0)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
-		const root = ref(null);
+		const root = useTemplateRef("@html-next/root");
+		preserveRootFocus(root);
 		const internalChecked = ref(false);
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== (checkedProps.value.href && checkedProps.value.type === "action" ? "a" : "div"))) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-menu-item> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-menu-item> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.type && `type type=${props.type}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [checkedProps.value.type && "type", checkedProps.value.type != null && `type=${encodeURIComponent(checkedProps.value.type)}`].filter(Boolean).join(" "));
 		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["checked"] === "boolean" && typeof detail["value"] === "string" && (detail["type"] === "checkbox" || detail["type"] === "radio") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"checked",
 			"value",
@@ -76,10 +145,14 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"value"
 			]
 		});
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-menu-item/ui-menu-item.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-menu-item/ui-menu-item.js",
+				definition: "./components/ui-menu-item/ui-menu-item.html"
+			},
+			props: checkedProps,
 			state: { internalChecked }
 		});
 		function text(value) {
@@ -91,51 +164,57 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			return value === true ? "" : text(value);
 		}
 		return (_ctx, _cache) => {
-			return __props.href && __props.type === "action" ? (openBlock(), createElementBlock("a", mergeProps({
+			return checkedProps.value.href && checkedProps.value.type === "action" ? (openBlock(), createElementBlock("a", mergeProps({
 				key: 0,
 				"data-component": "ui-menu-item",
 				role: "menuitem",
 				tabindex: "-1"
-			}, _ctx.$attrs, {
-				"aria-disabled": __props.disabled,
-				"data-value": __props.value,
+			}, nativeAttrs(_ctx.$attrs), {
+				"aria-disabled": checkedProps.value.disabled ?? void 0,
 				href: attribute({
 					true: null,
-					false: __props.href
-				}[`${__props.disabled}`]),
+					false: checkedProps.value.href
+				}[`${checkedProps.value.disabled ?? ""}`]),
+				"data-checked": reflectedProp("checked", "checked", checkedProps.value.checked, void 0, false),
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-href": reflectedProp("href", "href", checkedProps.value.href, void 0, false),
+				"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
+				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, true),
 				"data-ui-menu-item-state": hostState.value || void 0,
-				ref_key: "root",
-				ref: root
+				ref: "@html-next/root"
 			}), [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "shortcut", {}, void 0, true)])], 16, _hoisted_1)) : (openBlock(), createElementBlock("div", mergeProps({
 				key: 1,
 				"data-component": "ui-menu-item",
 				tabindex: "-1"
-			}, _ctx.$attrs, {
+			}, nativeAttrs(_ctx.$attrs), {
 				role: attribute({
 					action: "menuitem",
 					checkbox: "menuitemcheckbox",
 					radio: "menuitemradio"
-				}[__props.type]),
+				}[checkedProps.value.type]),
 				"aria-checked": typeof {
 					action: null,
 					checkbox: internalChecked.value,
 					radio: internalChecked.value
-				}[__props.type] === "boolean" ? String({
+				}[checkedProps.value.type] === "boolean" ? String({
 					action: null,
 					checkbox: internalChecked.value,
 					radio: internalChecked.value
-				}[__props.type]) : attribute({
+				}[checkedProps.value.type]) : attribute({
 					action: null,
 					checkbox: internalChecked.value,
 					radio: internalChecked.value
-				}[__props.type]),
-				"aria-disabled": __props.disabled,
-				"data-value": __props.value,
+				}[checkedProps.value.type]),
+				"aria-disabled": checkedProps.value.disabled ?? void 0,
+				"data-checked": reflectedProp("checked", "checked", checkedProps.value.checked, void 0, false),
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-href": reflectedProp("href", "href", checkedProps.value.href, void 0, false),
+				"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
+				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, true),
 				"data-ui-menu-item-state": hostState.value || void 0,
-				ref_key: "root",
-				ref: root
+				ref: "@html-next/root"
 			}), [
-				createElementVNode("span", _hoisted_5, [__props.type === "checkbox" && internalChecked.value ? (openBlock(), createBlock(UiIcon_default, {
+				createElementVNode("span", _hoisted_5, [checkedProps.value.type === "checkbox" && internalChecked.value ? (openBlock(), createBlock(UiIcon_default, {
 					key: 0,
 					name: "check"
 				})) : createCommentVNode("v-if", true)]),
@@ -144,6 +223,6 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_4));
 		};
 	}
-}), [["__scopeId", "data-v-6d5ac848"]]);
+}), [["__scopeId", "data-v-ea5c468d"]]);
 //#endregion
 export { UiMenuItem_default as t };

package/vue/chunks/UiMeter.js

@@ -1,5 +1,6 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock } from "vue";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, normalizeStyle, openBlock, unref, watchSyncEffect } from "vue";
 //#region .build/vue/UiMeter.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-valuemax",
@@ -7,6 +8,13 @@ var _hoisted_1 = [
 	"aria-valuetext",
 	"aria-label",
 	"data-ui-meter-segments",
+	"data-label",
+	"data-max",
+	"data-segments",
+	"data-size",
+	"data-tone",
+	"data-value",
+	"data-value-text",
 	"data-ui-meter-state"
 ];
 //#endregion
@@ -15,24 +23,139 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	inheritAttrs: false,
 	__name: "UiMeter",
 	props: {
-		label: { default: "" },
-		max: { default: 1 },
-		segments: { default: 0 },
-		size: { default: "md" },
-		tone: { default: "neutral" },
-		value: { default: 0 },
-		valueText: { default: "" }
+		label: {
+			type: null,
+			default: ""
+		},
+		max: {
+			type: null,
+			default: 1
+		},
+		segments: {
+			type: null,
+			default: 0
+		},
+		size: {
+			type: null,
+			default: "md"
+		},
+		tone: {
+			type: null,
+			default: "neutral"
+		},
+		value: {
+			type: null,
+			default: 0
+		},
+		valueText: {
+			type: null,
+			default: ""
+		}
 	},
 	setup(__props) {
 		const props = __props;
-		const amount = computed(() => Math.min(Math.max(0, props.value), props.max));
-		const percent = computed(() => ({
-			true: number(number(amount.value) === void 0 || number(props.max) === void 0 ? void 0 : number(amount.value) / number(props.max)) === void 0 || number(100) === void 0 ? void 0 : number(number(amount.value) === void 0 || number(props.max) === void 0 ? void 0 : number(amount.value) / number(props.max)) * number(100),
+		const checkedProps = computed(() => ({
+			label: checkedProp(props["label"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "label", void 0, void 0),
+			max: checkedProp(props["max"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "max", void 0, void 0),
+			segments: checkedProp(props["segments"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "segments", void 0, void 0),
+			size: checkedProp(props["size"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "size", void 0, ["sm", "md"]),
+			tone: checkedProp(props["tone"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "tone", void 0, [
+				"neutral",
+				"accent",
+				"info",
+				"success",
+				"warning",
+				"danger"
+			]),
+			value: checkedProp(props["value"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "value", void 0, void 0),
+			valueText: checkedProp(props["valueText"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "valueText", void 0, void 0)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
+		function cycleCheckedComputed(evaluate) {
+			const value = computed(evaluate);
+			let reading = false;
+			return new Proxy(value, { get(target, property) {
+				if (property !== "value") return Reflect.get(target, property);
+				if (reading) {
+					const message = "A reactive computed value depends on itself.";
+					throw Object.assign(/* @__PURE__ */ new Error(`HR006: ${message}`), {
+						name: "HtmlDiagnosticError",
+						diagnostic: Object.freeze({
+							code: "HR006",
+							message
+						})
+					});
+				}
+				reading = true;
+				try {
+					return target.value;
+				} finally {
+					reading = false;
+				}
+			} });
+		}
+		const amount = cycleCheckedComputed(() => ((values) => values.includes(void 0) ? void 0 : Math.min(Math.max(values[0], values[1]), values[2]))([
+			number(0),
+			number(checkedProps.value.value),
+			number(checkedProps.value.max)
+		]));
+		const percent = cycleCheckedComputed(() => ({
+			true: number(number(amount.value) === void 0 || number(checkedProps.value.max) === void 0 ? void 0 : number(amount.value) / number(checkedProps.value.max)) === void 0 || number(100) === void 0 ? void 0 : number(number(amount.value) === void 0 || number(checkedProps.value.max) === void 0 ? void 0 : number(amount.value) / number(checkedProps.value.max)) * number(100),
 			false: 0
-		})[`${props.max > 0}`]);
-		const whole = computed(() => number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(1) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) % number(1)) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) - number(number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(1) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) % number(1)));
+		})[`${number(checkedProps.value.max) === void 0 || number(0) === void 0 ? void 0 : number(checkedProps.value.max) > number(0)}`]);
+		const whole = cycleCheckedComputed(() => number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(1) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) % number(1)) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) - number(number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(1) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) % number(1)));
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "span")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-meter> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-meter> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.size && `size size=${props.size}`, props.tone && `tone tone=${props.tone}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			checkedProps.value.size && "size",
+			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+			checkedProps.value.tone && "tone",
+			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`
+		].filter(Boolean).join(" "));
 		function text(value) {
 			if (Array.isArray(value)) return value.map(text).join(" ");
 			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
@@ -49,40 +172,47 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				"data-component": "ui-meter",
 				role: "meter",
 				"aria-valuemin": "0"
-			}, _ctx.$attrs, {
-				"aria-valuemax": __props.max,
-				"aria-valuenow": amount.value,
+			}, nativeAttrs(_ctx.$attrs), {
+				"aria-valuemax": checkedProps.value.max ?? void 0,
+				"aria-valuenow": unref(amount),
 				"aria-valuetext": typeof {
-					true: __props.valueText,
-					false: `${whole.value ?? ""}%`
-				}[`${__props.valueText !== ""}`] === "boolean" ? String({
-					true: __props.valueText,
-					false: `${whole.value ?? ""}%`
-				}[`${__props.valueText !== ""}`]) : attribute({
-					true: __props.valueText,
-					false: `${whole.value ?? ""}%`
-				}[`${__props.valueText !== ""}`]),
+					true: checkedProps.value.valueText,
+					false: `${unref(whole) ?? ""}%`
+				}[`${checkedProps.value.valueText !== ""}`] === "boolean" ? String({
+					true: checkedProps.value.valueText,
+					false: `${unref(whole) ?? ""}%`
+				}[`${checkedProps.value.valueText !== ""}`]) : attribute({
+					true: checkedProps.value.valueText,
+					false: `${unref(whole) ?? ""}%`
+				}[`${checkedProps.value.valueText !== ""}`]),
 				"aria-label": typeof {
-					true: __props.label,
+					true: checkedProps.value.label,
 					false: null
-				}[`${__props.label !== ""}`] === "boolean" ? String({
-					true: __props.label,
+				}[`${checkedProps.value.label !== ""}`] === "boolean" ? String({
+					true: checkedProps.value.label,
 					false: null
-				}[`${__props.label !== ""}`]) : attribute({
-					true: __props.label,
+				}[`${checkedProps.value.label !== ""}`]) : attribute({
+					true: checkedProps.value.label,
 					false: null
-				}[`${__props.label !== ""}`]),
+				}[`${checkedProps.value.label !== ""}`]),
 				"data-ui-meter-segments": attribute({
-					true: __props.segments,
+					true: checkedProps.value.segments,
 					false: null
-				}[`${__props.segments > 1}`]),
+				}[`${number(checkedProps.value.segments) === void 0 || number(1) === void 0 ? void 0 : number(checkedProps.value.segments) > number(1)}`]),
+				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
+				"data-max": reflectedProp("max", "max", checkedProps.value.max, void 0, false),
+				"data-segments": reflectedProp("segments", "segments", checkedProps.value.segments, void 0, false),
+				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, false),
+				"data-value-text": reflectedProp("valueText", "value-text", checkedProps.value.valueText, void 0, false),
 				"data-ui-meter-state": hostState.value || void 0
 			}), [createElementVNode("span", {
 				class: "fill",
-				style: normalizeStyle({ "inline-size": `${text(percent.value)}%` })
+				style: normalizeStyle({ "inline-size": `${text(unref(percent))}%` })
 			}, null, 4)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-fd7200cc"]]);
+}), [["__scopeId", "data-v-ce36effe"]]);
 //#endregion
 export { UiMeter_default as t };