@threadlabs/looma 0.21.5 → 0.22.0

package/vue/chunks/UiCheckbox.js

@@ -1,8 +1,8 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { r as useComponentHost, t as createDispatch } from "./host.js";
-import { t as checkedProp } from "./props.js";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
 import { r as vBindControl } from "./control.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiCheckbox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-checked",
@@ -75,44 +75,127 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		"change"
 	],
 	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			checked: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "checked" },
+				description: "Whether the checkbox is checked initially or when set externally. A form reset returns it to this.",
+				default: false
+			},
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "disabled" },
+				description: "Disables the native checkbox, so it cannot be toggled or focused.",
+				default: false
+			},
+			indeterminate: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { property: "indeterminate" },
+				description: "Shows the mixed state, for a checkbox that summarises a group whose items are partly checked. It sets the native indeterminate property, which is\n      independent of checked, so update it as the group changes.",
+				default: false
+			},
+			invalid: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "aria-invalid" },
+				description: "Exposes an externally validated error and styles the checkbox with the field danger colour.",
+				default: false
+			},
+			name: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "name" },
+				description: "The native name the checkbox submits under: a form that contains it sends name=value while it is checked, and nothing while it is unchecked, as a native\n      checkbox does. Left empty, it takes no part in form submission.",
+				default: ""
+			},
+			required: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "required" },
+				description: "Marks the native checkbox required, so native form validation treats it as invalid until it is checked.",
+				default: false
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "Aligns the checkbox with fields and buttons of the same size. It keeps its box size; the label takes that size's field type size and its first line centres\n      in that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text\n      baseline. Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.",
+				values: [
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "md"
+			},
+			value: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The value a form submits under name while the checkbox is checked, also reported in the change event's detail so one handler can tell checkboxes apart. on\n      by default, as on a native checkbox.",
+				default: "on"
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			checked: checkedProp(props["checked"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "checked", void 0, void 0),
+			}, false, "checked"),
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "disabled", void 0, void 0),
+			}, false, "disabled"),
 			indeterminate: checkedProp(props["indeterminate"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "indeterminate", void 0, void 0),
+			}, false, "indeterminate"),
 			invalid: checkedProp(props["invalid"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "invalid", void 0, void 0),
+			}, false, "invalid"),
 			name: checkedProp(props["name"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "name", void 0, void 0),
+			}, false, "name"),
 			required: checkedProp(props["required"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "required", void 0, void 0),
+			}, false, "required"),
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size", void 0, [
-				"sm",
-				"md",
-				"lg"
-			]),
+			}, false, "size"),
 			value: checkedProp(props["value"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "value", void 0, void 0)
+			}, false, "value")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -136,6 +219,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const inputElement = useTemplateRef("input");
 		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
+		provide("html-next:ui-checkbox:internalChecked", internalChecked);
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "label")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-checkbox> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -175,7 +259,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			state: { internalChecked }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("label", mergeProps({ "data-component": "ui-checkbox" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("label", mergeProps({ "data-component": "ui-checkbox" }, nativeAttrs(_ctx.$attrs), {
 				"data-checked": reflectedProp("checked", "checked", checkedProps.value.checked, void 0, false),
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-indeterminate": reflectedProp("indeterminate", "indeterminate", checkedProps.value.indeterminate, void 0, false),
@@ -202,9 +286,12 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				value: internalChecked.value,
 				nativeProperty: true,
 				defaultChecked: false
-			}]]), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
+			}]]), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-7d5b0d28"]]);
+}), [["__scopeId", "data-v-2a462a73"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCluster.js

@@ -1,6 +1,6 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { t as checkedProp } from "./props.js";
-import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiCluster.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-align",
@@ -33,40 +33,82 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			align: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "align" },
+				description: "How items line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as\n      its row.",
+				values: [
+					"start",
+					"center",
+					"end",
+					"stretch"
+				]
+			},
+			gap: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "gap" },
+				description: "Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem (also the default), m 1rem, l 1.5rem, and xl 2rem. The --ui-cluster-gap custom property,\n      set on the cluster itself, overrides it; set on an ancestor, it does nothing.",
+				values: [
+					"xs",
+					"s",
+					"m",
+					"l",
+					"xl"
+				]
+			},
+			justify: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "justify" },
+				description: "Where items sit along each row: start (the default), center, end, or between, which pushes the first and last items to the ends of the row and spreads the\n      spare space between them, as for a title with its actions.",
+				values: [
+					"start",
+					"center",
+					"end",
+					"between"
+				]
+			},
+			wrap: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "wrap" },
+				description: "Whether items move onto a new row when they run out of space: wrap (the default) or nowrap, which keeps them on one row at their own sizes. Use nowrap for\n      a small group that must read as one unit, such as a meter and its value in a table cell, so the cell grows to fit it; a whole row of actions should keep\n      wrapping so it fits narrow screens.",
+				values: ["wrap", "nowrap"]
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			align: checkedProp(props["align"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "align", void 0, [
-				"start",
-				"center",
-				"end",
-				"stretch"
-			]),
+			}, false, "align"),
 			gap: checkedProp(props["gap"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "gap", void 0, [
-				"xs",
-				"s",
-				"m",
-				"l",
-				"xl"
-			]),
+			}, false, "gap"),
 			justify: checkedProp(props["justify"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "justify", void 0, [
-				"start",
-				"center",
-				"end",
-				"between"
-			]),
+			}, false, "justify"),
 			wrap: checkedProp(props["wrap"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "wrap", void 0, ["wrap", "nowrap"])
+			}, false, "wrap")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -104,15 +146,18 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			checkedProps.value.wrap != null && `wrap=${encodeURIComponent(checkedProps.value.wrap)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cluster" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cluster" }, 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-justify": reflectedProp("justify", "justify", checkedProps.value.justify, void 0, false),
 				"data-wrap": reflectedProp("wrap", "wrap", checkedProps.value.wrap, void 0, false),
 				"data-ui-cluster-state": hostState.value || void 0
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-eee4174d"]]);
+}), [["__scopeId", "data-v-280f6833"]]);
 //#endregion
 export { UiCluster_default as t };