@threadlabs/looma 0.19.0 → 0.20.0

package/vue/chunks/UiButton.js

@@ -1,8 +1,8 @@
 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 UiSpinner_default } from "./UiSpinner.js";
-import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-button/ui-button.js";
+import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, useTemplateRef, watchSyncEffect } from "vue";
 //#region .build/vue/UiButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"href",
@@ -11,6 +11,19 @@ var _hoisted_1 = [
 	"aria-disabled",
 	"aria-busy",
 	"tabindex",
+	"data-align",
+	"data-as",
+	"data-disabled",
+	"data-href",
+	"data-loading",
+	"data-pending",
+	"data-rel",
+	"data-size",
+	"data-stretch",
+	"data-target",
+	"data-tone",
+	"data-type",
+	"data-variant",
 	"data-ui-button-state"
 ];
 var _hoisted_2 = {
@@ -22,6 +35,19 @@ var _hoisted_3 = [
 	"disabled",
 	"aria-disabled",
 	"aria-busy",
+	"data-align",
+	"data-as",
+	"data-disabled",
+	"data-href",
+	"data-loading",
+	"data-pending",
+	"data-rel",
+	"data-size",
+	"data-stretch",
+	"data-target",
+	"data-tone",
+	"data-type",
+	"data-variant",
 	"data-ui-button-state"
 ];
 var _hoisted_4 = {
@@ -34,50 +60,186 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	inheritAttrs: false,
 	__name: "UiButton",
 	props: {
-		align: { default: "center" },
-		as: { default: "button" },
+		align: {
+			type: null,
+			default: "center"
+		},
+		as: {
+			type: null,
+			default: "button"
+		},
 		disabled: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		href: {},
+		href: {
+			type: null,
+			default: null
+		},
 		loading: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		pending: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		rel: {},
-		size: { default: "md" },
+		rel: {
+			type: null,
+			default: null
+		},
+		size: {
+			type: null,
+			default: "md"
+		},
 		stretch: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		target: {},
-		tone: { default: "accent" },
-		type: { default: "button" },
-		variant: { default: "outline" }
+		target: {
+			type: null,
+			default: null
+		},
+		tone: {
+			type: null,
+			default: "accent"
+		},
+		type: {
+			type: null,
+			default: "button"
+		},
+		variant: {
+			type: null,
+			default: "outline"
+		}
 	},
 	setup(__props) {
 		const props = __props;
-		const root = ref(null);
+		const checkedProps = computed(() => ({
+			align: checkedProp(props["align"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "align", void 0, ["center", "start"]),
+			as: checkedProp(props["as"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "as", void 0, ["button", "a"]),
+			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),
+			loading: checkedProp(props["loading"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "loading", void 0, void 0),
+			pending: checkedProp(props["pending"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "pending", void 0, void 0),
+			rel: checkedProp(props["rel"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "rel", void 0, void 0),
+			size: checkedProp(props["size"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "size", void 0, [
+				"sm",
+				"md",
+				"lg"
+			]),
+			stretch: checkedProp(props["stretch"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "stretch", void 0, void 0),
+			target: checkedProp(props["target"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "target", void 0, void 0),
+			tone: checkedProp(props["tone"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "tone", void 0, [
+				"accent",
+				"neutral",
+				"danger",
+				"success",
+				"warning",
+				"info"
+			]),
+			type: checkedProp(props["type"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "type", void 0, [
+				"button",
+				"submit",
+				"reset"
+			]),
+			variant: checkedProp(props["variant"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "variant", void 0, [
+				"outline",
+				"solid",
+				"danger",
+				"ghost",
+				"link"
+			])
+		}));
+		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 root = useTemplateRef("@html-next/root");
+		preserveRootFocus(root);
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== (checkedProps.value.as === "a" ? "a" : "button"))) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-button> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-button> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			props.align && `align align=${props.align}`,
-			props.stretch && "stretch",
-			props.size && `size size=${props.size}`,
-			props.variant && `variant variant=${props.variant}`,
-			props.tone && `tone tone=${props.tone}`,
-			props.loading && "loading",
-			props.pending && "pending"
+			checkedProps.value.align && "align",
+			checkedProps.value.align != null && `align=${encodeURIComponent(checkedProps.value.align)}`,
+			checkedProps.value.stretch && "stretch",
+			checkedProps.value.size && "size",
+			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+			checkedProps.value.variant && "variant",
+			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+			checkedProps.value.tone && "tone",
+			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
+			checkedProps.value.loading && "loading",
+			checkedProps.value.pending && "pending"
 		].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-button/ui-button.js"), {
 			root,
 			dispatch,
-			props
+			controllerSource: {
+				specifier: "../components/ui-button/ui-button.js",
+				definition: "./components/ui-button/ui-button.html"
+			},
+			props: checkedProps
 		});
 		function text(value) {
 			if (Array.isArray(value)) return value.map(text).join(" ");
@@ -88,57 +250,81 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			return value === true ? "" : text(value);
 		}
 		return (_ctx, _cache) => {
-			return __props.as === "a" ? (openBlock(), createElementBlock("a", mergeProps({
+			return checkedProps.value.as === "a" ? (openBlock(), createElementBlock("a", mergeProps({
 				key: 0,
 				"data-component": "ui-button"
-			}, _ctx.$attrs, {
+			}, nativeAttrs(_ctx.$attrs), {
 				href: attribute({
 					true: null,
-					false: __props.href
-				}[`${__props.disabled || __props.loading || __props.pending}`]),
-				target: __props.target,
-				rel: __props.rel,
+					false: checkedProps.value.href
+				}[`${checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending}`]),
+				target: checkedProps.value.target ?? void 0,
+				rel: checkedProps.value.rel ?? void 0,
 				"aria-disabled": typeof {
 					true: "true",
 					false: null
-				}[`${__props.disabled || __props.loading || __props.pending}`] === "boolean" ? String({
+				}[`${checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending}`] === "boolean" ? String({
 					true: "true",
 					false: null
-				}[`${__props.disabled || __props.loading || __props.pending}`]) : attribute({
+				}[`${checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending}`]) : attribute({
 					true: "true",
 					false: null
-				}[`${__props.disabled || __props.loading || __props.pending}`]),
-				"aria-busy": __props.loading || __props.pending,
+				}[`${checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending}`]),
+				"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
 				tabindex: attribute({
 					true: "0",
 					false: null
-				}[`${(__props.loading || __props.pending) && !__props.disabled}`]),
+				}[`${(checkedProps.value.loading || checkedProps.value.pending) && !checkedProps.value.disabled}`]),
+				"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
+				"data-as": reflectedProp("as", "as", checkedProps.value.as, 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-loading": reflectedProp("loading", "loading", checkedProps.value.loading, void 0, false),
+				"data-pending": reflectedProp("pending", "pending", checkedProps.value.pending, void 0, false),
+				"data-rel": reflectedProp("rel", "rel", checkedProps.value.rel, void 0, false),
+				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-stretch": reflectedProp("stretch", "stretch", checkedProps.value.stretch, void 0, false),
+				"data-target": reflectedProp("target", "target", checkedProps.value.target, void 0, false),
+				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
+				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-button-state": hostState.value || void 0,
-				ref_key: "root",
-				ref: root
-			}), [__props.loading || __props.pending ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)) : (openBlock(), createElementBlock("button", mergeProps({
+				ref: "@html-next/root"
+			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)) : (openBlock(), createElementBlock("button", mergeProps({
 				key: 1,
 				"data-component": "ui-button"
-			}, _ctx.$attrs, {
-				type: __props.type,
-				disabled: __props.disabled,
+			}, nativeAttrs(_ctx.$attrs), {
+				type: checkedProps.value.type ?? void 0,
+				disabled: checkedProps.value.disabled ?? void 0,
 				"aria-disabled": typeof {
 					true: "true",
 					false: null
-				}[`${__props.loading || __props.pending}`] === "boolean" ? String({
+				}[`${checkedProps.value.loading || checkedProps.value.pending}`] === "boolean" ? String({
 					true: "true",
 					false: null
-				}[`${__props.loading || __props.pending}`]) : attribute({
+				}[`${checkedProps.value.loading || checkedProps.value.pending}`]) : attribute({
 					true: "true",
 					false: null
-				}[`${__props.loading || __props.pending}`]),
-				"aria-busy": __props.loading || __props.pending,
+				}[`${checkedProps.value.loading || checkedProps.value.pending}`]),
+				"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
+				"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
+				"data-as": reflectedProp("as", "as", checkedProps.value.as, 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-loading": reflectedProp("loading", "loading", checkedProps.value.loading, void 0, false),
+				"data-pending": reflectedProp("pending", "pending", checkedProps.value.pending, void 0, false),
+				"data-rel": reflectedProp("rel", "rel", checkedProps.value.rel, void 0, false),
+				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-stretch": reflectedProp("stretch", "stretch", checkedProps.value.stretch, void 0, false),
+				"data-target": reflectedProp("target", "target", checkedProps.value.target, void 0, false),
+				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
+				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-button-state": hostState.value || void 0,
-				ref_key: "root",
-				ref: root
-			}), [__props.loading || __props.pending ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3));
+				ref: "@html-next/root"
+			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3));
 		};
 	}
-}), [["__scopeId", "data-v-720dbd9f"]]);
+}), [["__scopeId", "data-v-1bb5c1e1"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCallout.js

@@ -1,7 +1,8 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+import { t as checkedProp } from "./props.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiCallout.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-callout-state"];
+var _hoisted_1 = ["data-tone", "data-ui-callout-state"];
 var _hoisted_2 = {
 	class: "icon",
 	"aria-hidden": "true"
@@ -57,17 +58,58 @@ var _hoisted_8 = { class: "content" };
 var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiCallout",
-	props: { tone: { default: "info" } },
+	props: { tone: {
+		type: null,
+		default: "info"
+	} },
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({ tone: checkedProp(props["tone"], {
+			kind: "terminal",
+			name: "keyword"
+		}, false, "tone", void 0, [
+			"info",
+			"neutral",
+			"note",
+			"warning",
+			"success",
+			"danger"
+		]) }));
+		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 hydrationNode = getCurrentInstance()?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-callout> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-callout> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.tone && `tone tone=${props.tone}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [checkedProps.value.tone && "tone", checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-callout",
 				role: "note"
-			}, _ctx.$attrs, { "data-ui-callout-state": hostState.value || void 0 }), [createElementVNode("span", _hoisted_2, [
-				__props.tone === "info" ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [
+			}, nativeAttrs(_ctx.$attrs), {
+				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-ui-callout-state": hostState.value || void 0
+			}), [createElementVNode("span", _hoisted_2, [
+				checkedProps.value.tone === "info" ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [
 					createElementVNode("circle", {
 						cx: "12",
 						cy: "12",
@@ -76,22 +118,22 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					createElementVNode("path", { d: "M12 16v-4" }, null, -1),
 					createElementVNode("path", { d: "M12 8h.01" }, null, -1)
 				])])) : createCommentVNode("v-if", true),
-				__props.tone === "neutral" || __props.tone === "note" ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[1] || (_cache[1] = [
+				checkedProps.value.tone === "neutral" || checkedProps.value.tone === "note" ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[1] || (_cache[1] = [
 					createElementVNode("path", { d: "M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z" }, null, -1),
 					createElementVNode("path", { d: "M13 2v7h7" }, null, -1),
 					createElementVNode("path", { d: "m9.5 17.5 4-4 2 2-4 4H9.5v-2Z" }, null, -1)
 				])])) : createCommentVNode("v-if", true),
-				__props.tone === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [
+				checkedProps.value.tone === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [
 					createElementVNode("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }, null, -1),
 					createElementVNode("path", { d: "M12 9v4" }, null, -1),
 					createElementVNode("path", { d: "M12 17h.01" }, null, -1)
 				])])) : createCommentVNode("v-if", true),
-				__props.tone === "success" ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[3] || (_cache[3] = [createElementVNode("circle", {
+				checkedProps.value.tone === "success" ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[3] || (_cache[3] = [createElementVNode("circle", {
 					cx: "12",
 					cy: "12",
 					r: "10"
 				}, null, -1), createElementVNode("path", { d: "m9 12 2 2 4-4" }, null, -1)])])) : createCommentVNode("v-if", true),
-				__props.tone === "danger" ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[4] || (_cache[4] = [
+				checkedProps.value.tone === "danger" ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[4] || (_cache[4] = [
 					createElementVNode("circle", {
 						cx: "12",
 						cy: "12",
@@ -103,6 +145,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-b69d848b"]]);
+}), [["__scopeId", "data-v-6fd1b308"]]);
 //#endregion
 export { UiCallout_default as t };