@threadlabs/looma 0.19.0 → 0.20.0

package/vue/chunks/UiSwitcher.js

@@ -1,46 +1,134 @@
 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, renderSlot } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-switcher/ui-switcher.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiSwitcher.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-switcher-state"];
+var _hoisted_1 = [
+	"data-align",
+	"data-gap",
+	"data-limit",
+	"data-threshold",
+	"data-ui-switcher-state"
+];
 //#endregion
 //#region .build/vue/UiSwitcher.vue
 var UiSwitcher_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiSwitcher",
 	props: {
-		align: {},
-		gap: {},
-		limit: {},
-		threshold: {}
+		align: {
+			type: null,
+			default: null
+		},
+		gap: {
+			type: null,
+			default: null
+		},
+		limit: {
+			type: null,
+			default: null
+		},
+		threshold: {
+			type: null,
+			default: null
+		}
 	},
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			align: checkedProp(props["align"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "align", void 0, [
+				"start",
+				"center",
+				"end",
+				"stretch"
+			]),
+			gap: checkedProp(props["gap"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "gap", void 0, [
+				"xs",
+				"s",
+				"m",
+				"l",
+				"xl"
+			]),
+			limit: checkedProp(props["limit"], {
+				kind: "terminal",
+				name: "integer"
+			}, false, "limit", void 0, void 0),
+			threshold: checkedProp(props["threshold"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "threshold", void 0, [
+				"xs",
+				"sm",
+				"md",
+				"lg"
+			])
+		}));
+		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 overLimit = ref(false);
+		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-switcher> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-switcher> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
 			overLimit.value && "overLimit",
-			props.gap && `gap gap=${props.gap}`,
-			props.threshold && `threshold threshold=${props.threshold}`,
-			props.align && `align align=${props.align}`
+			checkedProps.value.gap && "gap",
+			checkedProps.value.gap != null && `gap=${encodeURIComponent(checkedProps.value.gap)}`,
+			checkedProps.value.threshold && "threshold",
+			checkedProps.value.threshold != null && `threshold=${encodeURIComponent(checkedProps.value.threshold)}`,
+			checkedProps.value.align && "align",
+			checkedProps.value.align != null && `align=${encodeURIComponent(checkedProps.value.align)}`
 		].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-switcher/ui-switcher.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-switcher/ui-switcher.js",
+				definition: "./components/ui-switcher/ui-switcher.html"
+			},
+			props: checkedProps,
 			state: { overLimit }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-switcher" }, _ctx.$attrs, {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-switcher" }, nativeAttrs(_ctx.$attrs), {
+				"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
+				"data-gap": reflectedProp("gap", "gap", checkedProps.value.gap, void 0, false),
+				"data-limit": reflectedProp("limit", "limit", checkedProps.value.limit, void 0, false),
+				"data-threshold": reflectedProp("threshold", "threshold", checkedProps.value.threshold, void 0, false),
 				"data-ui-switcher-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-be049fb8"]]);
+}), [["__scopeId", "data-v-42654cb2"]]);
 //#endregion
 export { UiSwitcher_default as t };

package/vue/chunks/UiTable.js

@@ -1,40 +1,92 @@
 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, renderSlot } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-table/ui-table.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiTable.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-table-state"];
+var _hoisted_1 = [
+	"data-density",
+	"data-sticky-header",
+	"data-ui-table-state"
+];
 //#endregion
 //#region .build/vue/UiTable.vue
 var UiTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiTable",
 	props: {
-		density: { default: "comfortable" },
+		density: {
+			type: null,
+			default: "comfortable"
+		},
 		stickyHeader: {
-			type: Boolean,
+			type: null,
 			default: false
 		}
 	},
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			density: checkedProp(props["density"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "density", void 0, ["comfortable", "compact"]),
+			stickyHeader: checkedProp(props["stickyHeader"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "stickyHeader", 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-table> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-table> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.density && `density density=${props.density}`, props.stickyHeader && "stickyHeader"].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			checkedProps.value.density && "density",
+			checkedProps.value.density != null && `density=${encodeURIComponent(checkedProps.value.density)}`,
+			checkedProps.value.stickyHeader && "stickyHeader"
+		].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-table/ui-table.js"), {
 			root,
 			dispatch,
-			props
+			controllerSource: {
+				specifier: "../components/ui-table/ui-table.js",
+				definition: "./components/ui-table/ui-table.html"
+			},
+			props: checkedProps
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-table" }, _ctx.$attrs, {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-table" }, nativeAttrs(_ctx.$attrs), {
+				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
+				"data-sticky-header": reflectedProp("stickyHeader", "sticky-header", checkedProps.value.stickyHeader, void 0, false),
 				"data-ui-table-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a58b58d4"]]);
+}), [["__scopeId", "data-v-8aecd018"]]);
 //#endregion
 export { UiTable_default as t };

package/vue/chunks/UiTabs.js

@@ -1,9 +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 { Fragment, computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderList, renderSlot, toDisplayString, useTemplateRef } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-tabs/ui-tabs.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, h, mergeProps, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx } from "vue";
 //#region .build/vue/UiTabs.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-tabs-state"];
+var _hoisted_1 = [
+	"data-activation",
+	"data-density",
+	"data-label",
+	"data-orientation",
+	"data-stretch",
+	"data-value",
+	"data-ui-tabs-state"
+];
 var _hoisted_2 = ["aria-label", "aria-orientation"];
 var _hoisted_3 = [
 	"id",
@@ -21,30 +29,122 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	inheritAttrs: false,
 	__name: "UiTabs",
 	props: {
-		activation: { default: "auto" },
-		density: { default: "comfortable" },
-		label: { default: "Tabs" },
-		orientation: { default: "horizontal" },
+		activation: {
+			type: null,
+			default: "auto"
+		},
+		density: {
+			type: null,
+			default: "comfortable"
+		},
+		label: {
+			type: null,
+			default: "Tabs"
+		},
+		orientation: {
+			type: null,
+			default: "horizontal"
+		},
 		stretch: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		value: { default: "" }
+		value: {
+			type: null,
+			default: ""
+		}
 	},
 	emits: ["update:value", "select"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			activation: checkedProp(props["activation"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "activation", void 0, ["auto", "manual"]),
+			density: checkedProp(props["density"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "density", void 0, ["comfortable", "compact"]),
+			label: checkedProp(props["label"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "label", void 0, void 0),
+			orientation: checkedProp(props["orientation"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "orientation", void 0, ["horizontal", "vertical"]),
+			stretch: checkedProp(props["stretch"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "stretch", void 0, void 0),
+			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 KeyedFailure = defineComponent({
+			props: { error: {
+				type: null,
+				required: true
+			} },
+			setup(props) {
+				return () => {
+					throw props.error;
+				};
+			}
+		});
+		const KeyedBoundary = defineComponent({ setup(_props, { slots }) {
+			let last = [];
+			return () => {
+				try {
+					last = slots.default?.() ?? [];
+					return last;
+				} catch (error) {
+					if (!(error instanceof Error) || error.diagnostic?.code !== "HR004") throw error;
+					if (typeof window === "undefined") throw error;
+					return [...last, h(KeyedFailure, { error })];
+				}
+			};
+		} });
+		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 listElement = useTemplateRef("list");
 		const panelsElement = useTemplateRef("panels");
 		const internalValue = ref("");
 		const tabs = ref([]);
+		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-tabs> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-tabs> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			props.density && `density density=${props.density}`,
-			props.stretch && "stretch",
-			props.orientation && `orientation orientation=${props.orientation}`
+			checkedProps.value.density && "density",
+			checkedProps.value.density != null && `density=${encodeURIComponent(checkedProps.value.density)}`,
+			checkedProps.value.stretch && "stretch",
+			checkedProps.value.orientation && "orientation",
+			checkedProps.value.orientation != null && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`
 		].filter(Boolean).join(" "));
 		const isSelectDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && typeof detail["previousValue"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"value",
@@ -55,10 +155,14 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			checks: { select: isSelectDetail },
 			modeled: ["value"]
 		});
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-tabs/ui-tabs.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-tabs/ui-tabs.js",
+				definition: "./components/ui-tabs/ui-tabs.html"
+			},
+			props: checkedProps,
 			refs: {
 				list: listElement,
 				panels: panelsElement
@@ -68,30 +172,66 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				tabs
 			}
 		});
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
+		}
+		function uniqueKeys(items, keyOf) {
+			const seen = /* @__PURE__ */ new Set();
+			for (let index = 0; index < items.length; index += 1) {
+				const key = keyOf(items[index], index, {
+					index,
+					first: index === 0,
+					last: index === items.length - 1,
+					count: items.length
+				});
+				if (seen.has(key)) {
+					const message = `A keyed list produced duplicate key \`${text(key)}\`.`;
+					throw Object.assign(/* @__PURE__ */ new Error(`HR004: ${message}`), {
+						name: "HtmlDiagnosticError",
+						diagnostic: Object.freeze({
+							code: "HR004",
+							message
+						})
+					});
+				}
+				seen.add(key);
+			}
+			return items;
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-tabs" }, _ctx.$attrs, {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-tabs" }, nativeAttrs(_ctx.$attrs), {
+				"data-activation": reflectedProp("activation", "activation", checkedProps.value.activation, void 0, false),
+				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
+				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
+				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false),
+				"data-stretch": reflectedProp("stretch", "stretch", checkedProps.value.stretch, void 0, false),
+				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, false),
 				"data-ui-tabs-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [createElementVNode("div", {
 				class: "list",
 				role: "tablist",
-				"aria-label": __props.label,
-				"aria-orientation": __props.orientation,
+				"aria-label": checkedProps.value.label ?? void 0,
+				"aria-orientation": checkedProps.value.orientation ?? void 0,
 				ref: "list"
-			}, [renderSlot(_ctx.$slots, "tab", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab) => {
-				return openBlock(), createElementBlock("button", {
-					key: tab.id,
-					type: "button",
-					role: "tab",
-					id: `${tab.id}-tab`,
-					value: tab.id,
-					"aria-controls": tab.id,
-					"aria-selected": tab.id === internalValue.value
-				}, toDisplayString(tab.label), 9, _hoisted_3);
-			}), 128))])], 8, _hoisted_2), createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1);
+			}, [renderSlot(_ctx.$slots, "tab", {}, () => [createVNode(unref(KeyedBoundary), null, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(tabs.value, (tab, index, loop) => tab.id), (tab) => {
+					return openBlock(), createElementBlock("button", {
+						key: tab.id,
+						type: "button",
+						role: "tab",
+						id: `${tab.id}-tab`,
+						value: tab.id,
+						"aria-controls": tab.id,
+						"aria-selected": tab.id === internalValue.value
+					}, toDisplayString(tab.label), 9, _hoisted_3);
+				}), 128))]),
+				_: 1
+			})])], 8, _hoisted_2), createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-cac80c15"]]);
+}), [["__scopeId", "data-v-c98ad628"]]);
 //#endregion
 export { UiTabs_default as t };