@threadlabs/looma 0.19.0 → 0.20.0

package/vue/chunks/UiInput.js

@@ -1,13 +1,22 @@
 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 { computed, createElementBlock, defineComponent, mergeProps, openBlock, ref, vModelDynamic, withDirectives } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-input/ui-input.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { n as selectedPropNode, t as checkedProp } from "./props.js";
+import { n as readBoundControl, r as vBindControl } from "./control.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"type",
 	"disabled",
 	"readonly",
 	"required",
 	"aria-invalid",
+	"data-disabled",
+	"data-invalid",
+	"data-readonly",
+	"data-required",
+	"data-size",
+	"data-type",
+	"data-value",
 	"data-ui-input-state"
 ];
 //#endregion
@@ -17,55 +26,352 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	__name: "UiInput",
 	props: {
 		disabled: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		invalid: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		readonly: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		required: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		size: { default: "md" },
-		value: {},
-		modelValue: {}
+		size: {
+			type: null,
+			default: "md"
+		},
+		type: {
+			type: null,
+			default: "text"
+		},
+		value: {
+			type: null,
+			default: null
+		},
+		modelValue: { type: null }
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			disabled: checkedProp(props["disabled"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "disabled", void 0, void 0),
+			invalid: checkedProp(props["invalid"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "invalid", void 0, void 0),
+			readonly: checkedProp(props["readonly"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "readonly", void 0, void 0),
+			required: checkedProp(props["required"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "required", void 0, void 0),
+			size: checkedProp(props["size"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "size", void 0, [
+				"sm",
+				"md",
+				"lg"
+			]),
+			type: checkedProp(props["type"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "type", void 0, [
+				"text",
+				"search",
+				"tel",
+				"url",
+				"email",
+				"password",
+				"date",
+				"month",
+				"week",
+				"time",
+				"datetime-local",
+				"number",
+				"range",
+				"color"
+			]),
+			value: checkedProp(props["value"], selectedPropNode(props["type"], [
+				{
+					value: "text",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "search",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "tel",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "url",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "email",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "password",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "date",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "month",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "week",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "time",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "datetime-local",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "number",
+					type: {
+						kind: "terminal",
+						name: "number"
+					}
+				},
+				{
+					value: "range",
+					type: {
+						kind: "terminal",
+						name: "number"
+					}
+				},
+				{
+					value: "color",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				}
+			]), false, "value", void 0, void 0),
+			modelValue: checkedProp(props.modelValue, selectedPropNode(props["type"], [
+				{
+					value: "text",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "search",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "tel",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "url",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "email",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "password",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "date",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "month",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "week",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "time",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "datetime-local",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				},
+				{
+					value: "number",
+					type: {
+						kind: "terminal",
+						name: "number"
+					}
+				},
+				{
+					value: "range",
+					type: {
+						kind: "terminal",
+						name: "number"
+					}
+				},
+				{
+					value: "color",
+					type: {
+						kind: "terminal",
+						name: "string"
+					}
+				}
+			]), false, "modelValue", 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 model = computed({
-			get: () => props.modelValue ?? props.value ?? void 0,
+			get: () => checkedProps.value.modelValue ?? checkedProps.value.value ?? void 0,
 			set: (value) => emit("update:modelValue", value)
 		});
 		const root = ref(null);
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "input")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-input> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-input> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.size && `size size=${props.size}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [checkedProps.value.size && "size", checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-input/ui-input.js"), {
 			root,
 			dispatch,
-			props
+			controllerSource: {
+				specifier: "../components/ui-input/ui-input.js",
+				definition: "./components/ui-input/ui-input.html"
+			},
+			props: checkedProps
 		});
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("input", mergeProps({ "data-component": "ui-input" }, _ctx.$attrs, {
-				disabled: __props.disabled,
-				readonly: __props.readonly,
-				required: __props.required,
-				"aria-invalid": __props.invalid,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+			return withDirectives((openBlock(), createElementBlock("input", mergeProps({ "data-component": "ui-input" }, nativeAttrs(_ctx.$attrs), {
+				type: checkedProps.value.type ?? void 0,
+				disabled: checkedProps.value.disabled ?? void 0,
+				readonly: checkedProps.value.readonly ?? void 0,
+				required: checkedProps.value.required ?? void 0,
+				"aria-invalid": checkedProps.value.invalid ?? void 0,
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-invalid": reflectedProp("invalid", "invalid", checkedProps.value.invalid, void 0, false),
+				"data-readonly": reflectedProp("readonly", "readonly", checkedProps.value.readonly, void 0, false),
+				"data-required": reflectedProp("required", "required", checkedProps.value.required, void 0, false),
+				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
+				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, false),
+				onInput: _cache[0] || (_cache[0] = ($event) => model.value = unref(readBoundControl)($event.currentTarget)),
 				"data-ui-input-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), null, 16, _hoisted_1)), [[vModelDynamic, model.value]]);
+			}), null, 16, _hoisted_1)), [[unref(vBindControl), {
+				tag: "input",
+				name: "value",
+				value: model.value,
+				defaultValue: ""
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0d457505"]]);
+}), [["__scopeId", "data-v-11e29860"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -1,9 +1,9 @@
 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 { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-input-group/ui-input-group.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiInputGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-input-group-state"];
+var _hoisted_1 = ["data-disabled", "data-ui-input-group-state"];
 var _hoisted_2 = { class: "affix" };
 var _hoisted_3 = { class: "field" };
 var _hoisted_4 = { class: "affix" };
@@ -14,22 +14,56 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	inheritAttrs: false,
 	__name: "UiInputGroup",
 	props: { disabled: {
-		type: Boolean,
+		type: null,
 		default: false
 	} },
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({ disabled: checkedProp(props["disabled"], {
+			kind: "terminal",
+			name: "boolean"
+		}, false, "disabled", 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 root = ref(null);
+		const hydrationNode = hydrationInstance?.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-input-group> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-input-group> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.disabled && "disabled"].filter(Boolean).join(" "));
+		const hostState = computed(() => [checkedProps.value.disabled && "disabled"].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-input-group/ui-input-group.js"), {
 			root,
 			dispatch,
-			props
+			controllerSource: {
+				specifier: "../components/ui-input-group/ui-input-group.js",
+				definition: "./components/ui-input-group/ui-input-group.html"
+			},
+			props: checkedProps
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-input-group" }, _ctx.$attrs, {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-input-group" }, nativeAttrs(_ctx.$attrs), {
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-ui-input-group-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
@@ -41,6 +75,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-5ed34845"]]);
+}), [["__scopeId", "data-v-18f42fcf"]]);
 //#endregion
 export { UiInputGroup_default as t };

package/vue/chunks/UiList.js

@@ -1,39 +1,128 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+import { n as preserveRootFocus } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, useTemplateRef, watchSyncEffect } from "vue";
 //#region .build/vue/UiList.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-list-state"];
-var _hoisted_2 = ["data-ui-list-state"];
+var _hoisted_1 = [
+	"data-as",
+	"data-density",
+	"data-layout",
+	"data-markers",
+	"data-ui-list-state"
+];
+var _hoisted_2 = [
+	"data-as",
+	"data-density",
+	"data-layout",
+	"data-markers",
+	"data-ui-list-state"
+];
 //#endregion
 //#region .build/vue/UiList.vue
 var UiList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiList",
 	props: {
-		as: { default: "ul" },
-		density: { default: "comfortable" },
-		layout: { default: "rows" },
-		markers: { default: "none" }
+		as: {
+			type: null,
+			default: "ul"
+		},
+		density: {
+			type: null,
+			default: "comfortable"
+		},
+		layout: {
+			type: null,
+			default: "rows"
+		},
+		markers: {
+			type: null,
+			default: "none"
+		}
 	},
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			as: checkedProp(props["as"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "as", void 0, ["ul", "ol"]),
+			density: checkedProp(props["density"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "density", void 0, ["comfortable", "compact"]),
+			layout: checkedProp(props["layout"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "layout", void 0, ["rows", "grid"]),
+			markers: checkedProp(props["markers"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "markers", void 0, ["none", "disc"])
+		}));
+		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 === "ol" ? "ol" : "ul"))) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-list> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-list> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			props.as && `as as=${props.as}`,
-			props.markers && `markers markers=${props.markers}`,
-			props.density && `density density=${props.density}`,
-			props.layout && `layout layout=${props.layout}`
+			checkedProps.value.as && "as",
+			checkedProps.value.as != null && `as=${encodeURIComponent(checkedProps.value.as)}`,
+			checkedProps.value.markers && "markers",
+			checkedProps.value.markers != null && `markers=${encodeURIComponent(checkedProps.value.markers)}`,
+			checkedProps.value.density && "density",
+			checkedProps.value.density != null && `density=${encodeURIComponent(checkedProps.value.density)}`,
+			checkedProps.value.layout && "layout",
+			checkedProps.value.layout != null && `layout=${encodeURIComponent(checkedProps.value.layout)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return __props.as === "ol" ? (openBlock(), createElementBlock("ol", mergeProps({
+			return checkedProps.value.as === "ol" ? (openBlock(), createElementBlock("ol", mergeProps({
 				key: 0,
 				"data-component": "ui-list"
-			}, _ctx.$attrs, { "data-ui-list-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1)) : (openBlock(), createElementBlock("ul", mergeProps({
+			}, nativeAttrs(_ctx.$attrs), {
+				"data-as": reflectedProp("as", "as", checkedProps.value.as, void 0, false),
+				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
+				"data-layout": reflectedProp("layout", "layout", checkedProps.value.layout, void 0, false),
+				"data-markers": reflectedProp("markers", "markers", checkedProps.value.markers, void 0, false),
+				"data-ui-list-state": hostState.value || void 0,
+				ref: "@html-next/root"
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1)) : (openBlock(), createElementBlock("ul", mergeProps({
 				key: 1,
 				"data-component": "ui-list",
 				role: "list"
-			}, _ctx.$attrs, { "data-ui-list-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2));
+			}, nativeAttrs(_ctx.$attrs), {
+				"data-as": reflectedProp("as", "as", checkedProps.value.as, void 0, false),
+				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
+				"data-layout": reflectedProp("layout", "layout", checkedProps.value.layout, void 0, false),
+				"data-markers": reflectedProp("markers", "markers", checkedProps.value.markers, void 0, false),
+				"data-ui-list-state": hostState.value || void 0,
+				ref: "@html-next/root"
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2));
 		};
 	}
-}), [["__scopeId", "data-v-5f1964f2"]]);
+}), [["__scopeId", "data-v-b9ee5599"]]);
 //#endregion
 export { UiList_default as t };