@threadlabs/looma 0.17.3 → 0.18.0

package/vue/chunks/UiListbox.js

@@ -1,14 +1,35 @@
 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, vModelSelect, withDirectives } from "vue";
+import { t as UiScrollArea_default } from "./UiScrollArea.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, useTemplateRef, withCtx } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-listbox/ui-listbox.js";
 //#region .build/vue/UiListbox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"tabindex",
+	"aria-multiselectable",
+	"aria-disabled",
+	"aria-required",
+	"aria-invalid"
+];
+var _hoisted_2 = [
+	"data-multiple",
+	"id",
+	"data-index",
+	"aria-selected",
+	"aria-disabled"
+];
+var _hoisted_3 = [
 	"size",
 	"multiple",
 	"disabled",
 	"required",
-	"aria-invalid"
+	"name"
+];
+var _hoisted_4 = ["name", "value"];
+var _hoisted_5 = [
+	"required",
+	"checked",
+	"disabled"
 ];
 //#endregion
 //#region .build/vue/UiListbox.vue
@@ -28,43 +49,136 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			type: Boolean,
 			default: false
 		},
+		name: { default: "" },
 		required: {
 			type: Boolean,
 			default: false
 		},
 		rows: { default: 5 },
 		value: {},
-		values: {},
-		modelValue: {}
+		values: {}
 	},
-	emits: ["update:modelValue"],
+	emits: [
+		"update:value",
+		"update:values",
+		"change"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const model = computed({
-			get: () => props.modelValue ?? props.value ?? void 0,
-			set: (value) => emit("update:modelValue", value)
-		});
 		const root = ref(null);
-		const dispatch = createDispatch(root);
+		const choicesElement = useTemplateRef("choices");
+		const optionsElement = useTemplateRef("options");
+		const validityElement = useTemplateRef("validity");
+		const choices = ref([]);
+		const selection = ref([]);
+		const hasSelection = ref(false);
+		const active = ref(-1);
+		const uid = ref("");
+		const validationError = ref(false);
+		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && Array.isArray(detail["values"]) && detail["values"].every((item) => typeof item === "string") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer") && Object.keys(detail).every((key) => [
+			"value",
+			"values",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: { change: isChangeDetail },
+			modeled: ["value", "values"]
+		});
 		useComponentHost(controllerModule.default, {
 			root,
 			dispatch,
-			props
+			props,
+			refs: {
+				choices: choicesElement,
+				options: optionsElement,
+				validity: validityElement
+			},
+			state: {
+				choices,
+				selection,
+				hasSelection,
+				active,
+				uid,
+				validationError
+			}
 		});
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
+		}
+		function attribute(value) {
+			if (value === null || value === void 0 || value === false || typeof value === "object" && !Array.isArray(value)) return void 0;
+			return value === true ? "" : text(value);
+		}
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("select", mergeProps({ "data-component": "ui-listbox" }, _ctx.$attrs, {
-				size: __props.rows,
-				multiple: __props.multiple,
-				disabled: __props.disabled,
-				required: __props.required,
-				"aria-invalid": __props.invalid,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+			return openBlock(), createElementBlock("div", mergeProps({
+				"data-component": "ui-listbox",
+				role: "listbox"
+			}, _ctx.$attrs, {
+				tabindex: attribute({
+					true: "-1",
+					false: "0"
+				}[`${__props.disabled}`]),
+				"aria-multiselectable": __props.multiple,
+				"aria-disabled": __props.disabled,
+				"aria-required": __props.required,
+				"aria-invalid": __props.invalid || validationError.value,
+				style: { "--_rows": __props.rows },
 				ref_key: "root",
 				ref: root
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
+			}), [
+				createVNode(UiScrollArea_default, {
+					class: "choices",
+					ref_key: "choices",
+					ref: choices
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(choices.value, (choice) => {
+						return openBlock(), createElementBlock("div", {
+							key: choice.index,
+							class: normalizeClass(["option", { active: choice.index === active.value }]),
+							role: "option",
+							"data-ui-choice-option": "",
+							"data-multiple": __props.multiple ? "" : void 0,
+							id: `${uid.value}-option-${choice.index}`,
+							"data-index": choice.index,
+							"aria-selected": choice.selected,
+							"aria-disabled": choice.disabled
+						}, [createElementVNode("span", null, toDisplayString(choice.label), 1)], 10, _hoisted_2);
+					}), 128))]),
+					_: 1
+				}, 512),
+				createElementVNode("select", {
+					class: "fallback",
+					"aria-label": "Choices",
+					size: __props.rows,
+					multiple: __props.multiple,
+					disabled: __props.disabled,
+					required: __props.required,
+					name: __props.name,
+					ref: "options"
+				}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 8, _hoisted_3),
+				__props.name && !__props.disabled ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selection.value, (selected, index) => {
+					return openBlock(), createElementBlock("input", {
+						key: index,
+						type: "hidden",
+						name: __props.name,
+						value: selected
+					}, null, 8, _hoisted_4);
+				}), 128)) : createCommentVNode("v-if", true),
+				createElementVNode("input", {
+					class: "validity",
+					type: "checkbox",
+					"aria-hidden": "true",
+					tabindex: "-1",
+					required: __props.required && !hasSelection.value && !__props.disabled,
+					checked: hasSelection.value,
+					disabled: __props.disabled,
+					ref: "validity"
+				}, null, 8, _hoisted_5)
+			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-44b33b05"]]);
+}), [["__scopeId", "data-v-db56e4d0"]]);
 //#endregion
 export { UiListbox_default as t };

package/vue/chunks/UiSearchResultRow.js

@@ -50,6 +50,6 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-5a2d6e2a"]]);
+}), [["__scopeId", "data-v-5fd17258"]]);
 //#endregion
 export { UiSearchResultRow_default as t };

package/vue/chunks/UiSearchShell.js

@@ -67,6 +67,6 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			])], 8, _hoisted_1)], 16);
 		};
 	}
-}), [["__scopeId", "data-v-089e37ee"]]);
+}), [["__scopeId", "data-v-b1cde00b"]]);
 //#endregion
 export { UiSearchShell_default as t };

package/vue/chunks/UiSelect.js

@@ -60,6 +60,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-3f68a24f"]]);
+}), [["__scopeId", "data-v-699dcb22"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiSpinner.js

@@ -1,9 +1,10 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock } from "vue";
 //#region .build/vue/UiSpinner.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"role",
 	"aria-label",
+	"aria-live",
 	"aria-hidden",
 	"data-ui-spinner-state"
 ];
@@ -47,6 +48,16 @@ var UiSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					true: __props.label,
 					false: null
 				}[`${__props.label !== ""}`]),
+				"aria-live": typeof {
+					true: "polite",
+					false: null
+				}[`${__props.label !== ""}`] === "boolean" ? String({
+					true: "polite",
+					false: null
+				}[`${__props.label !== ""}`]) : attribute({
+					true: "polite",
+					false: null
+				}[`${__props.label !== ""}`]),
 				"aria-hidden": typeof {
 					true: null,
 					false: "true"
@@ -58,9 +69,24 @@ var UiSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					false: "true"
 				}[`${__props.label !== ""}`]),
 				"data-ui-spinner-state": hostState.value || void 0
-			}), null, 16, _hoisted_1);
+			}), [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
+				viewBox: "0 0 50 50",
+				fill: "none",
+				"aria-hidden": "true",
+				focusable: "false"
+			}, [createElementVNode("circle", {
+				class: "track",
+				cx: "25",
+				cy: "25",
+				r: "20"
+			}), createElementVNode("circle", {
+				class: "arc",
+				cx: "25",
+				cy: "25",
+				r: "20"
+			})], -1)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-1c74343f"]]);
+}), [["__scopeId", "data-v-7dbd4f40"]]);
 //#endregion
 export { UiSpinner_default as t };

package/vue/chunks/UiTextarea.js

@@ -74,6 +74,6 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}), null, 16, _hoisted_1)), [[vModelText, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-f371e58f"]]);
+}), [["__scopeId", "data-v-a2e0e09f"]]);
 //#endregion
 export { UiTextarea_default as t };

package/vue/chunks/UiTooltip.js

@@ -68,6 +68,6 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8f81f4b2"]]);
+}), [["__scopeId", "data-v-0e272bf3"]]);
 //#endregion
 export { UiTooltip_default as t };