@threadlabs/looma 0.21.6 → 0.22.1

package/vue/chunks/UiIconButton.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 { t as UiSpinner_default } from "./UiSpinner.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, watchSyncEffect } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiIconButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"disabled",
@@ -60,48 +60,131 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			anticipatory: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "anticipatory" },
+				description: "Keeps the button out of sight until it is wanted: at rest a fine pointer sees only a small guide dot, and the button appears on hover, on focus, or when\n      the pointer comes near inside a ui-affordance-scope. Touch devices and the solid variant always show it.",
+				default: false
+			},
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "disabled" },
+				description: "Disables the button, so it cannot be pressed or focused, and gives it a flat neutral surface and muted icon.",
+				default: false
+			},
+			label: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "aria-label" },
+				description: "Accessible name for the icon."
+			},
+			loading: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "loading" },
+				description: "Keeps the button focusable and named while work is in progress. It shows a spinner, states aria-disabled and aria-busy, and prevents activation until\n      cleared.",
+				default: false
+			},
+			pending: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "pending" },
+				description: "Deprecated alias for loading.",
+				default: false
+			},
+			round: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "round" },
+				description: "Use a fully circular shape.",
+				default: false
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. On touch, every size gets an invisible hit\n      area of at least 44px.",
+				values: [
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "md"
+			},
+			variant: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "variant" },
+				description: "Emphasis. ghost shows only the icon until it is hovered, for toolbars and dense rows; outline adds a border on the default surface; solid fills with the\n      accent colour, for the one primary action in a group.",
+				values: [
+					"ghost",
+					"outline",
+					"solid"
+				],
+				default: "ghost"
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			anticipatory: checkedProp(props["anticipatory"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "anticipatory", void 0, void 0),
+			}, false, "anticipatory"),
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "disabled", void 0, void 0),
+			}, false, "disabled"),
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "label", void 0, void 0),
+			}, false, "label"),
 			loading: checkedProp(props["loading"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "loading", void 0, void 0),
+			}, false, "loading"),
 			pending: checkedProp(props["pending"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "pending", void 0, void 0),
+			}, false, "pending"),
 			round: checkedProp(props["round"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "round", void 0, void 0),
+			}, false, "round"),
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size", void 0, [
-				"sm",
-				"md",
-				"lg"
-			]),
+			}, false, "size"),
 			variant: checkedProp(props["variant"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "variant", void 0, [
-				"ghost",
-				"outline",
-				"solid"
-			])
+			}, false, "variant")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -159,7 +242,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			return value === true ? "" : text(value);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", mergeProps({
+			return withDirectives((openBlock(), createElementBlock("button", mergeProps({
 				"data-component": "ui-icon-button",
 				type: "button"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -190,9 +273,12 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createBlock(UiSpinner_default, {
 				key: 0,
 				size: "sm"
-			})) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
+			})) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-e256a5c0"]]);
+}), [["__scopeId", "data-v-276cf09d"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiInput.js

@@ -1,6 +1,6 @@
 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 { n as selectedPropNode, t as checkedProp } from "./props.js";
+import { n as selectedPropNode, r as vPropValidity, 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
@@ -57,51 +57,327 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "disabled" },
+				description: "Prevents editing and form submission.",
+				default: false
+			},
+			invalid: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "aria-invalid" },
+				description: "Exposes invalid state to assistive technology and styling.",
+				default: false
+			},
+			readonly: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "readonly" },
+				description: "Allows selection without allowing edits.",
+				default: false
+			},
+			required: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "required" },
+				description: "Marks the control as required for form validation.",
+				default: false
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "Height, padding, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by default)\n      with smaller text, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller with roomier padding. Under a\n      coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. Change it after render through this option; the element's size property is\n      the native one.",
+				values: [
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "md"
+			},
+			type: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "type" },
+				description: "The native input mode. Number and range modes accept numeric values; the other supported modes accept strings.",
+				values: [
+					"text",
+					"search",
+					"tel",
+					"url",
+					"email",
+					"password",
+					"date",
+					"month",
+					"week",
+					"time",
+					"datetime-local",
+					"number",
+					"range",
+					"color"
+				],
+				default: "text"
+			},
+			value: {
+				type: {
+					kind: "selected",
+					from: "type",
+					options: [
+						{
+							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"
+							}
+						}
+					]
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The input's value: text, or a number for type=\"number\" and type=\"range\" fields. Setting or changing it replaces the live text; between changes the user's\n      typing stands, so follow input events to keep it in step. A number field keeps text that means the same number, such as 1.0 for 1. It is also the input's\n      default, so a form reset returns to it.",
+				select: {
+					from: "type",
+					options: [
+						{
+							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"
+							}
+						}
+					]
+				}
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "disabled", void 0, void 0),
+			}, false, "disabled"),
 			invalid: checkedProp(props["invalid"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "invalid", void 0, void 0),
+			}, false, "invalid"),
 			readonly: checkedProp(props["readonly"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "readonly", void 0, void 0),
+			}, false, "readonly"),
 			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"),
 			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"
-			]),
+			}, false, "type"),
 			value: checkedProp(props["value"], selectedPropNode(props["type"], [
 				{
 					value: "text",
@@ -201,7 +477,7 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 						name: "string"
 					}
 				}
-			]), false, "value", void 0, void 0),
+			]), false, "value"),
 			modelValue: checkedProp(props.modelValue, selectedPropNode(props["type"], [
 				{
 					value: "text",
@@ -301,7 +577,7 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 						name: "string"
 					}
 				}
-			]), false, "modelValue", void 0, void 0)
+			]), false, "modelValue")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -364,7 +640,10 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				"data-ui-input-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), null, 16, _hoisted_1)), [[unref(vBindControl), {
+			}), null, 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}], [unref(vBindControl), {
 				tag: "input",
 				name: "value",
 				value: model.value,
@@ -372,6 +651,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-74cc2a5e"]]);
+}), [["__scopeId", "data-v-5a0b0570"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -1,7 +1,7 @@
 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 { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiInputGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-disabled", "data-ui-input-group-state"];
 var _hoisted_2 = { class: "affix" };
@@ -18,11 +18,21 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		default: false
 	} },
 	setup(__props) {
+		const propValidityContract = { props: { disabled: {
+			type: {
+				kind: "terminal",
+				name: "boolean"
+			},
+			required: false,
+			target: { attribute: "disabled" },
+			description: "Fades the group's framing to match a disabled input inside it. Disable the input itself too.",
+			default: false
+		} } };
 		const props = __props;
 		const checkedProps = computed(() => ({ disabled: checkedProp(props["disabled"], {
 			kind: "terminal",
 			name: "boolean"
-		}, false, "disabled", void 0, void 0) }));
+		}, false, "disabled") }));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -62,7 +72,7 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			props: checkedProps
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-input-group" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((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",
@@ -72,9 +82,12 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "suffix", {}, void 0, true)]),
 				createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "action", {}, void 0, true)])
-			], 16, _hoisted_1);
+			], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0b1c8323"]]);
+}), [["__scopeId", "data-v-20672978"]]);
 //#endregion
 export { UiInputGroup_default as t };