rei-kit 2.12.0 → 2.14.0

package/dist/index.js

@@ -3,7 +3,7 @@ import { n as formatNumber, r as setFormatLocale, t as formatDate } from "./form
 import { a as SHEET_ROOT_ID, i as useVisualViewport, o as ensureSheetRoot, r as useBoundValue, t as BaseSheet_default } from "./BaseSheet-B7401rS7.js";
 import { a as BaseAlert_default, c as applyTheme, d as setThemeStorageKey, f as useTheme, h as toRedirectPath, i as FormField_default, l as isThemePreference, m as safeRedirect, n as BaseCheckbox_default, o as useToast, p as tapFeedback, r as BaseInput_default, s as useOnline, t as GoogleButton_default, u as readStoredTheme } from "./GoogleButton-mCqGbrXm.js";
 import { n as registerErrorMapper, r as toAppError, t as AppError } from "./app-error-DF9cijE0.js";
-import { n as BaseListbox_default, r as useMediaQuery, t as BaseSkeleton_default } from "./BaseSkeleton-DnqwogzV.js";
+import { n as BaseSkeleton_default, r as useMediaQuery, t as BaseListbox_default } from "./BaseListbox-BnaHlmMN.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
 import { t as BaseButton_default } from "./BaseButton-RN2an975.js";
 import { t as SettingsRow_default } from "./SettingsRow-Ct1p2C9Q.js";
@@ -621,7 +621,11 @@ var BaseCard_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/BaseCombobox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$38 = ["for"];
-var _hoisted_2$32 = { class: "rk-combo-field" };
+var _hoisted_2$32 = [
+	"aria-label",
+	"disabled",
+	"onClick"
+];
 var _hoisted_3$21 = [
 	"id",
 	"placeholder",
@@ -632,22 +636,38 @@ var _hoisted_3$21 = [
 	"aria-describedby"
 ];
 var _hoisted_4$16 = ["disabled"];
-var _hoisted_5$9 = ["aria-label"];
+var _hoisted_5$9 = [
+	"aria-label",
+	"aria-multiselectable",
+	"aria-busy"
+];
 var _hoisted_6$5 = [
 	"id",
 	"aria-selected",
+	"aria-setsize",
+	"aria-posinset",
 	"onPointerdown",
 	"onPointermove"
 ];
 var _hoisted_7$4 = {
-	key: 0,
+	key: 2,
+	class: "rk-combo-status"
+};
+var _hoisted_8$3 = { key: 0 };
+var _hoisted_9$3 = {
+	class: "rk-combo-status-rows",
+	"aria-hidden": "true"
+};
+var _hoisted_10$3 = {
+	key: 3,
 	class: "rk-combo-empty"
 };
 //#endregion
 //#region src/components/BaseCombobox.vue
 var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "BaseCombobox",
-	props: /*@__PURE__*/ mergeModels({
+	props: {
+		modelValue: { default: () => void 0 },
 		label: {},
 		options: {},
 		placeholder: { default: "" },
@@ -657,14 +677,38 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: Boolean,
 			default: false
 		},
-		emptyLabel: {}
-	}, {
-		"modelValue": { default: "" },
-		"modelModifiers": {}
-	}),
-	emits: ["update:modelValue"],
-	setup(__props) {
-		const model = useModel(__props, "modelValue");
+		emptyLabel: {},
+		mode: { default: "single" },
+		removeLabel: {
+			type: Function,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingLabel: { default: "" },
+		filter: { default: "local" },
+		debounce: { default: 200 },
+		virtualizeAfter: { default: 150 },
+		rowHeight: { default: 36 }
+	},
+	emits: ["update:modelValue", "search"],
+	setup(__props, { emit: __emit }) {
+		/** Multiple always hands back an array; a single choice is the value or ''. */
+		const emit = __emit;
+		const model = useBoundValue(() => __props.modelValue, (value) => emit("update:modelValue", value));
+		const multiple = computed(() => __props.mode === "multiple");
+		/** The chosen values, however many there are, as a plain array. */
+		const chosen = computed(() => {
+			const value = model.value;
+			if (Array.isArray(value)) return value;
+			return value === void 0 || value === "" ? [] : [value];
+		});
+		const chosenOptions = computed(() => chosen.value.map((value) => __props.options.find((option) => option.value === value) ?? {
+			value,
+			label: value
+		}));
 		const id = useId();
 		const listId = `${id}-list`;
 		const hintId = `${id}-hint`;
@@ -675,31 +719,79 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const highlighted = ref(0);
 		const root = ref(null);
 		const list = ref(null);
-		const selected = computed(() => __props.options.find((option) => option.value === model.value));
-		/** What the input shows: the query while typing, the chosen label otherwise. */
+		const single = computed(() => multiple.value ? void 0 : chosenOptions.value[0]);
+		/**
+		* What the input shows.
+		*
+		* In multiple mode it is always the query: the answers are the chips beside
+		* it, and writing one of them into the field would mean deleting it to search
+		* for the next.
+		*/
 		const text = computed({
-			get: () => open.value ? query.value : selected.value?.label ?? "",
+			get: () => multiple.value || open.value ? query.value : single.value?.label ?? "",
 			set: (value) => {
 				query.value = value;
 				open.value = true;
 				highlighted.value = 0;
+				announce(value);
 			}
 		});
 		const matches = computed(() => {
 			const needle = query.value.trim().toLowerCase();
-			if (!open.value || needle === "") return __props.options;
+			if (__props.filter === "none" || !open.value || needle === "") return __props.options;
 			return __props.options.filter((option) => option.label.toLowerCase().includes(needle));
 		});
 		const describedBy = computed(() => {
 			if (__props.error) return errorId;
 			if (__props.hint) return hintId;
 		});
+		let timer;
+		function announce(value) {
+			if (timer) clearTimeout(timer);
+			timer = setTimeout(() => emit("search", value.trim()), __props.debounce);
+		}
+		const virtual = computed(() => matches.value.length > __props.virtualizeAfter);
+		const scrollTop = ref(0);
+		/** How tall the list box is; read once it is open, never guessed. */
+		const viewport = ref(224);
+		const window_ = computed(() => {
+			if (!virtual.value) return {
+				start: 0,
+				end: matches.value.length
+			};
+			const first = Math.max(0, Math.floor(scrollTop.value / __props.rowHeight) - 3);
+			const count = Math.ceil(viewport.value / __props.rowHeight) + 6;
+			return {
+				start: first,
+				end: Math.min(matches.value.length, first + count)
+			};
+		});
+		const rows = computed(() => matches.value.slice(window_.value.start, window_.value.end).map((option, index) => ({
+			option,
+			/** The row's place in the whole list, not in the window. */
+			index: window_.value.start + index
+		})));
+		const padTop = computed(() => virtual.value ? window_.value.start * __props.rowHeight : 0);
+		const padBottom = computed(() => virtual.value ? (matches.value.length - window_.value.end) * __props.rowHeight : 0);
+		function onScroll(event) {
+			scrollTop.value = event.target.scrollTop;
+		}
 		function choose(option) {
 			if (!option) return;
+			if (multiple.value) {
+				const next = chosen.value.includes(option.value) ? chosen.value.filter((one) => one !== option.value) : [...chosen.value, option.value];
+				model.value = next;
+				query.value = "";
+				return;
+			}
 			model.value = option.value;
 			query.value = "";
 			open.value = false;
 		}
+		function remove(value) {
+			if (!multiple.value) return;
+			model.value = chosen.value.filter((one) => one !== value);
+		}
 		function move(delta) {
 			const count = matches.value.length;
 			if (count === 0) return;
@@ -709,6 +801,13 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		}
 		async function scrollHighlightIntoView() {
 			await nextTick();
+			if (virtual.value && list.value) {
+				const top = highlighted.value * __props.rowHeight;
+				const bottom = top + __props.rowHeight;
+				if (top < list.value.scrollTop) list.value.scrollTop = top;
+				else if (bottom > list.value.scrollTop + viewport.value) list.value.scrollTop = bottom - viewport.value;
+				return;
+			}
 			(list.value?.children[highlighted.value])?.scrollIntoView?.({ block: "nearest" });
 		}
 		function onKeydown(event) {
@@ -726,12 +825,18 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					event.preventDefault();
 					choose(matches.value[highlighted.value]);
 					break;
+				case "Backspace":
+					if (multiple.value && query.value === "" && chosen.value.length > 0) {
+						event.preventDefault();
+						remove(chosen.value[chosen.value.length - 1]);
+					}
+					break;
 				case "Escape":
 					event.preventDefault();
 					if (open.value) {
 						open.value = false;
 						query.value = "";
-					} else model.value = "";
+					} else if (!multiple.value) model.value = "";
 					break;
 				case "Tab": open.value = false;
 			}
@@ -742,12 +847,19 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				query.value = "";
 			}
 		}
-		watch(open, (isOpen) => {
+		watch(open, async (isOpen) => {
 			if (typeof document === "undefined") return;
-			if (isOpen) document.addEventListener("pointerdown", onDocumentPointer);
-			else document.removeEventListener("pointerdown", onDocumentPointer);
+			if (isOpen) {
+				document.addEventListener("pointerdown", onDocumentPointer);
+				await nextTick();
+				if (list.value) viewport.value = list.value.clientHeight || viewport.value;
+			} else document.removeEventListener("pointerdown", onDocumentPointer);
 		}, { immediate: true });
+		watch(matches, () => {
+			if (highlighted.value >= matches.value.length) highlighted.value = 0;
+		});
 		onBeforeUnmount(() => {
+			if (timer) clearTimeout(timer);
 			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocumentPointer);
 		});
 		return (_ctx, _cache) => {
@@ -760,52 +872,93 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					for: unref(id),
 					class: "rk-combo-label"
 				}, toDisplayString(__props.label), 9, _hoisted_1$38),
-				createElementVNode("div", _hoisted_2$32, [withDirectives(createElementVNode("input", {
-					id: unref(id),
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => text.value = $event),
-					type: "text",
-					role: "combobox",
-					class: "rk-combo-input control",
-					autocomplete: "off",
-					placeholder: __props.placeholder,
-					disabled: __props.disabled,
-					"aria-expanded": open.value,
-					"aria-controls": listId,
-					"aria-autocomplete": "list",
-					"aria-activedescendant": open.value ? optionId(highlighted.value) : void 0,
-					"aria-invalid": Boolean(__props.error),
-					"aria-describedby": describedBy.value,
-					onKeydown,
-					onFocus: _cache[1] || (_cache[1] = ($event) => open.value = true)
-				}, null, 40, _hoisted_3$21), [[vModelText, text.value]]), createElementVNode("button", {
-					type: "button",
-					class: "rk-combo-toggle",
-					tabindex: "-1",
-					"aria-hidden": "true",
-					disabled: __props.disabled,
-					onClick: _cache[2] || (_cache[2] = ($event) => open.value = !open.value)
-				}, " ▾ ", 8, _hoisted_4$16)]),
+				createElementVNode("div", { class: normalizeClass(["rk-combo-field", multiple.value ? "is-multiple control" : ""]) }, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(multiple.value ? chosenOptions.value : [], (option) => {
+						return openBlock(), createElementBlock("span", {
+							key: option.value,
+							class: "rk-combo-chip"
+						}, [createElementVNode("span", null, toDisplayString(option.label), 1), __props.removeLabel ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "rk-combo-chip-x focus-ring",
+							"aria-label": __props.removeLabel(option.label),
+							disabled: __props.disabled,
+							onClick: ($event) => remove(option.value)
+						}, " × ", 8, _hoisted_2$32)) : createCommentVNode("", true)]);
+					}), 128)),
+					withDirectives(createElementVNode("input", {
+						id: unref(id),
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => text.value = $event),
+						type: "text",
+						role: "combobox",
+						class: normalizeClass(["rk-combo-input", { control: !multiple.value }]),
+						autocomplete: "off",
+						placeholder: __props.placeholder,
+						disabled: __props.disabled,
+						"aria-expanded": open.value,
+						"aria-controls": listId,
+						"aria-autocomplete": "list",
+						"aria-activedescendant": open.value ? optionId(highlighted.value) : void 0,
+						"aria-invalid": Boolean(__props.error),
+						"aria-describedby": describedBy.value,
+						onKeydown,
+						onFocus: _cache[1] || (_cache[1] = ($event) => open.value = true)
+					}, null, 42, _hoisted_3$21), [[vModelText, text.value]]),
+					createElementVNode("button", {
+						type: "button",
+						class: "rk-combo-toggle",
+						tabindex: "-1",
+						"aria-hidden": "true",
+						disabled: __props.disabled,
+						onClick: _cache[2] || (_cache[2] = ($event) => open.value = !open.value)
+					}, " ▾ ", 8, _hoisted_4$16)
+				], 2),
 				withDirectives(createElementVNode("ul", {
 					id: listId,
 					ref_key: "list",
 					ref: list,
 					role: "listbox",
 					class: "rk-combo-list surface-overlay",
-					"aria-label": __props.label
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(matches.value, (option, index) => {
-					return openBlock(), createElementBlock("li", {
-						id: optionId(index),
-						key: option.value,
-						role: "option",
-						class: normalizeClass(["rk-combo-option", {
-							"is-highlighted": index === highlighted.value,
-							"is-selected": option.value === model.value
-						}]),
-						"aria-selected": option.value === model.value,
-						onPointerdown: withModifiers(($event) => choose(option), ["prevent"]),
-						onPointermove: ($event) => highlighted.value = index
-					}, toDisplayString(option.label), 43, _hoisted_6$5);
-				}), 128)), matches.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_7$4, toDisplayString(__props.emptyLabel), 1)) : createCommentVNode("", true)], 8, _hoisted_5$9), [[vShow, open.value]]),
+					"aria-label": __props.label,
+					"aria-multiselectable": multiple.value ? true : void 0,
+					"aria-busy": __props.loading ? true : void 0,
+					onScroll
+				}, [
+					padTop.value > 0 ? (openBlock(), createElementBlock("li", {
+						key: 0,
+						style: normalizeStyle({ height: `${padTop.value}px` }),
+						"aria-hidden": "true"
+					}, null, 4)) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
+						return openBlock(), createElementBlock("li", {
+							id: optionId(row.index),
+							key: row.option.value,
+							role: "option",
+							class: normalizeClass(["rk-combo-option", {
+								"is-highlighted": row.index === highlighted.value,
+								"is-selected": chosen.value.includes(row.option.value)
+							}]),
+							style: normalizeStyle(virtual.value ? { height: `${__props.rowHeight}px` } : void 0),
+							"aria-selected": chosen.value.includes(row.option.value),
+							"aria-setsize": matches.value.length,
+							"aria-posinset": row.index + 1,
+							onPointerdown: withModifiers(($event) => choose(row.option), ["prevent"]),
+							onPointermove: ($event) => highlighted.value = row.index
+						}, toDisplayString(row.option.label), 47, _hoisted_6$5);
+					}), 128)),
+					padBottom.value > 0 ? (openBlock(), createElementBlock("li", {
+						key: 1,
+						style: normalizeStyle({ height: `${padBottom.value}px` }),
+						"aria-hidden": "true"
+					}, null, 4)) : createCommentVNode("", true),
+					__props.loading ? (openBlock(), createElementBlock("li", _hoisted_7$4, [__props.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_8$3, toDisplayString(__props.loadingLabel), 1)) : createCommentVNode("", true), createElementVNode("span", _hoisted_9$3, [(openBlock(), createElementBlock(Fragment, null, renderList(3, (n) => {
+						return createVNode(BaseSkeleton_default, {
+							key: n,
+							shape: "text",
+							height: "0.75rem"
+						});
+					}), 64))])])) : matches.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_10$3, toDisplayString(__props.emptyLabel), 1)) : createCommentVNode("", true)
+				], 40, _hoisted_5$9), [[vShow, open.value]]),
 				__props.error ? (openBlock(), createElementBlock("p", {
 					key: 0,
 					id: errorId,
@@ -818,7 +971,7 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			], 512);
 		};
 	}
-}), [["__scopeId", "data-v-ce4c503f"]]);
+}), [["__scopeId", "data-v-aa2335fa"]]);
 //#endregion
 //#region src/components/BaseRadioGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$37 = ["aria-describedby"];
@@ -4021,7 +4174,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "2.12.0";
+var VERSION = "2.14.0";
 //#endregion
 export { AppError, AvatarStack_default as AvatarStack, BaseAlert_default as BaseAlert, BaseAvatar_default as BaseAvatar, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCalendar_default as BaseCalendar, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseChip_default as BaseChip, BaseCombobox_default as BaseCombobox, BaseDatePicker_default as BaseDatePicker, BaseInput_default as BaseInput, BaseKbd_default as BaseKbd, BaseLink_default as BaseLink, BaseListbox_default as BaseListbox, BaseMenu_default as BaseMenu, BasePopconfirm_default as BasePopconfirm, BasePopover_default as BasePopover, BaseRadioGroup_default as BaseRadioGroup, BaseRating_default as BaseRating, BaseSelect_default as BaseSelect, BaseSeparator_default as BaseSeparator, BaseSheet_default as BaseSheet, BaseSkeleton_default as BaseSkeleton, BaseSlider_default as BaseSlider, BaseSpinner_default as BaseSpinner, BaseStepper_default as BaseStepper, BaseSwitch_default as BaseSwitch, BaseTable_default as BaseTable, BaseTextarea_default as BaseTextarea, CircularProgress_default as CircularProgress, CopyButton_default as CopyButton, DescriptionList_default as DescriptionList, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FileDrop_default as FileDrop, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, MATERIALS, NumberInput_default as NumberInput, PALETTES, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PinInput_default as PinInput, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SHEET_ROOT_ID, SectionHeading_default as SectionHeading, SegmentedControl_default as SegmentedControl, SettingsGroup_default as SettingsGroup, SettingsRow_default as SettingsRow, SkeletonList_default as SkeletonList, StatCard_default as StatCard, TabBar_default as TabBar, TagsInput_default as TagsInput, TimePicker_default as TimePicker, ToastHost_default as ToastHost, ToggleGroup_default as ToggleGroup, ToneDot_default as ToneDot, VERSION, addDays, applyMaterial, applyPalette, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, ensureSheetRoot, formatDate, formatNumber, fromDateKey, isApplePortable, isInstalled, isMaterial, isPaletteName, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setMaterialStorageKey, setPaletteStorageKey, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, toRedirectPath, todayKey, useDebouncedCallback, useDragScroll, useMaterial, useMediaQuery, useOnline, usePalette, useTheme, useToast, useToday, useVisualViewport };