ropav 0.1.4 → 0.1.6

package/dist/select.js

@@ -1,12 +1,14 @@
 import './select.css';
-import { t as x_default } from "./x.js";
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { i as useFormControl, o as useControllableValue } from "./useFormControl.js";
+import { t as x_default } from "./x.js";
+import { i as useFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
+import { n as getNextEnabledIndex, r as useTypeahead, t as getEnabledIndexes } from "./collectionNavigation.js";
 import { t as scroll_area_default } from "./scroll-area.js";
-import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, watch, watchEffect, withModifiers, withVaporModifiers } from "vue";
+import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setProp, setText, setValue, shallowRef, template, toDisplayString, txt, unref, useId, watch, watchEffect, withModifiers, withVaporModifiers } from "vue";
 //#region ~icons/lucide/chevrons-up-down
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
 function render(_ctx) {
@@ -17,83 +19,101 @@ var chevrons_up_down_default = markRaw(defineVaporComponent({
 	render
 }));
 //#endregion
-//#region src/composables/useClickOutside.ts
+//#region src/internal/composables/useClickOutside.ts
+function isEventInside(event, element) {
+	if (event.composedPath().includes(element)) return true;
+	const eventTarget = event.target;
+	const NodeConstructor = element.ownerDocument.defaultView?.Node;
+	return Boolean(eventTarget && NodeConstructor && eventTarget instanceof NodeConstructor && element.contains(eventTarget));
+}
 function useClickOutside(target, active, callback) {
-	let isListening = false;
+	const targets = Array.isArray(target) ? target : [target];
+	const listeningDocuments = /* @__PURE__ */ new Set();
 	let stopWatch;
-	function handler(e) {
-		if (!(Array.isArray(target) ? target : [target]).some((current) => current.value?.contains(e.target))) callback(e);
+	function handler(event) {
+		if (!targets.some((current) => {
+			const element = current.value;
+			return element ? isEventInside(event, element) : false;
+		})) callback(event);
 	}
-	function setListening(value) {
-		if (typeof document === "undefined" || value === isListening) return;
-		isListening = value;
-		if (value) document.addEventListener("click", handler, true);
-		else document.removeEventListener("click", handler, true);
+	function detachListeners() {
+		for (const document of listeningDocuments) document.removeEventListener("click", handler, true);
+		listeningDocuments.clear();
+	}
+	function syncListeners() {
+		detachListeners();
+		if (!active.value) return;
+		for (const current of targets) {
+			const document = current.value?.ownerDocument;
+			if (!document || listeningDocuments.has(document)) continue;
+			document.addEventListener("click", handler, true);
+			listeningDocuments.add(document);
+		}
 	}
 	onMounted(() => {
-		stopWatch = watch(active, setListening, { immediate: true });
+		stopWatch = watch([active, ...targets], syncListeners, { immediate: true });
 	});
 	onBeforeUnmount(() => {
 		stopWatch?.();
-		setListening(false);
+		detachListeners();
 	});
 }
 //#endregion
-//#region src/composables/useListNavigation.ts
-function useListNavigation(options) {
-	const localFocusedIndex = ref(-1);
+//#region src/internal/composables/useCollectionNavigation.ts
+function useCollectionNavigation(options) {
+	const activeKey = shallowRef(null);
+	const isDisabled = options.isDisabled ?? (() => false);
 	const loop = options.loop ?? true;
-	const enabledIndexes = computed(() => options.items().map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0));
-	function resetFocus() {
-		localFocusedIndex.value = -1;
+	const activeIndex = computed(() => {
+		if (activeKey.value == null) return -1;
+		return options.items().findIndex((item) => options.getKey(item) === activeKey.value && !isDisabled(item));
+	});
+	const enabledIndexes = computed(() => getEnabledIndexes(options.items(), isDisabled));
+	function resetActive() {
+		activeKey.value = null;
 	}
-	function setNearest(index, direction) {
-		const indexes = enabledIndexes.value;
-		if (indexes.length === 0) {
-			resetFocus();
-			return;
-		}
-		if (options.items()[index] && !options.items()[index]?.disabled) {
-			localFocusedIndex.value = index;
-			return;
-		}
-		let next;
-		if (direction === 1) next = indexes.find((i) => i > index);
-		else for (let i = indexes.length - 1; i >= 0; i -= 1) {
-			const candidate = indexes[i];
-			if (candidate < index) {
-				next = candidate;
-				break;
-			}
-		}
-		if (next !== void 0) localFocusedIndex.value = next;
-		else if (loop) localFocusedIndex.value = direction === 1 ? indexes[0] : indexes[indexes.length - 1];
+	function setActiveIndex(index) {
+		const item = options.items()[index];
+		if (!item || isDisabled(item)) return false;
+		activeKey.value = options.getKey(item);
+		return true;
 	}
 	function focusSelected() {
 		const items = options.items();
-		const selectedIndex = options.isSelected ? items.findIndex((item) => options.isSelected(item) && !item.disabled) : -1;
-		if (selectedIndex >= 0) localFocusedIndex.value = selectedIndex;
+		const selectedIndex = options.isSelected ? items.findIndex((item) => options.isSelected(item) && !isDisabled(item)) : -1;
+		if (selectedIndex >= 0) setActiveIndex(selectedIndex);
 		else focusFirst();
 	}
 	function focusFirst() {
 		const first = enabledIndexes.value[0];
-		localFocusedIndex.value = first ?? -1;
+		if (first === void 0) resetActive();
+		else setActiveIndex(first);
 	}
 	function focusLast() {
 		const indexes = enabledIndexes.value;
-		localFocusedIndex.value = indexes[indexes.length - 1] ?? -1;
+		const last = indexes[indexes.length - 1];
+		if (last === void 0) resetActive();
+		else setActiveIndex(last);
 	}
-	function moveFocus(delta) {
-		if (localFocusedIndex.value < 0) {
-			if (delta === 1) focusFirst();
+	function moveFocus(direction) {
+		if (activeIndex.value < 0) {
+			if (direction === 1) focusFirst();
 			else focusLast();
 			return;
 		}
-		setNearest(localFocusedIndex.value + delta, delta);
+		const nextIndex = getNextEnabledIndex(options.items(), activeIndex.value, direction, isDisabled, loop);
+		if (nextIndex === void 0) resetActive();
+		else setActiveIndex(nextIndex);
 	}
+	watch(activeIndex, (index) => {
+		if (activeKey.value != null && index < 0) resetActive();
+	}, { flush: "sync" });
 	return {
-		focusedIndex: localFocusedIndex,
-		resetFocus,
+		activeKey,
+		activeIndex,
+		enabledIndexes,
+		resetActive,
+		setActiveIndex,
 		focusSelected,
 		focusFirst,
 		focusLast,
@@ -109,23 +129,38 @@ function getSelectDisplayLabel(options, value) {
 	if (!hasSelectValue(value)) return "";
 	return options?.find((option) => option.value === value)?.label ?? "";
 }
-function getSelectActiveDescendantId(baseId, focusedIndex) {
-	return focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
+function getSelectActiveDescendantId(baseId, focusedIndex, isOpen) {
+	return !isOpen || focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
 }
 function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null, triggerRef = ref(null)) {
 	const selectRef = ref(null);
 	const isOpen = ref(false);
 	const selectId = useId();
-	const listboxId = `${selectId}-listbox`;
+	const popupId = `${selectId}-popup`;
+	const listboxId = `${popupId}-viewport`;
 	const control = useControlState(props);
 	const visibleOptions = computed(() => props.options ?? []);
 	const value = computed(getValue);
-	const navigation = useListNavigation({
+	const navigation = useCollectionNavigation({
 		items: () => visibleOptions.value,
+		getKey: (item) => item.value,
+		isDisabled: (item) => Boolean(item.disabled),
 		isSelected: (item) => item.value === value.value
 	});
-	const focusedIndex = navigation.focusedIndex;
-	const activeDescendantId = computed(() => getSelectActiveDescendantId(selectId, focusedIndex.value));
+	const focusedIndex = navigation.activeIndex;
+	const selectedIndex = computed(() => visibleOptions.value.findIndex((option) => option.value === value.value && !option.disabled));
+	const activeDescendantId = computed(() => getSelectActiveDescendantId(selectId, focusedIndex.value, isOpen.value));
+	const typeahead = useTypeahead({
+		items: () => visibleOptions.value,
+		activeIndex: () => isOpen.value ? focusedIndex.value : selectedIndex.value,
+		getKey: (item) => item.value,
+		getTextValue: (item) => item.label,
+		isDisabled: (item) => Boolean(item.disabled),
+		onMatch(item, index) {
+			if (isOpen.value) navigation.setActiveIndex(index);
+			else if (item.value !== value.value) emitUpdate(item.value);
+		}
+	});
 	const rootClass = computed(() => bem("rp-select", {
 		open: isOpen.value,
 		[`size-${props.size}`]: Boolean(props.size),
@@ -141,12 +176,14 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	}
 	function open() {
 		if (control.disabled || isOpen.value) return;
+		typeahead.reset();
 		isOpen.value = true;
 		navigation.focusSelected();
 	}
 	function close() {
 		isOpen.value = false;
-		navigation.resetFocus();
+		navigation.resetActive();
+		typeahead.reset();
 	}
 	function toggle() {
 		if (control.disabled) return;
@@ -168,7 +205,7 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 		focusTrigger();
 	}
 	function onOptionMouseenter(option, index) {
-		if (!option.disabled) focusedIndex.value = index;
+		if (!option.disabled) navigation.setActiveIndex(index);
 	}
 	function onFocusout(event) {
 		const nextTarget = event.relatedTarget;
@@ -181,6 +218,7 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	}
 	function onTriggerKeydown(e) {
 		if (control.disabled) return;
+		if (typeahead.handleKey(e)) return;
 		switch (e.key) {
 			case "Enter":
 				e.preventDefault();
@@ -243,6 +281,7 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 		triggerRef,
 		isOpen,
 		selectId,
+		popupId,
 		listboxId,
 		control,
 		visibleOptions,
@@ -357,12 +396,12 @@ function useSelectNativeControl(props, emitUpdate, triggerRef) {
 }
 //#endregion
 //#region src/components/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<option data-v-d7a0b110> ");
-var t1 = template("<button data-v-d7a0b110></button>");
+var t0 = template("<option data-v-7eb8ed79> ");
+var t1 = template("<button data-v-7eb8ed79></button>");
 var t2 = template("No options", 2);
-var t3 = template("<div data-v-d7a0b110>");
-var t4 = template("<div data-v-d7a0b110> ");
-var t5 = template("<div data-v-d7a0b110><select data-v-d7a0b110><option data-v-d7a0b110 value></option></select><div data-v-d7a0b110><span data-v-d7a0b110> </span><span data-v-d7a0b110><span data-v-d7a0b110 class=rp-select__arrow aria-hidden=true>", 1);
+var t3 = template("<div data-v-7eb8ed79>");
+var t4 = template("<div data-v-7eb8ed79> ");
+var t5 = template("<div data-v-7eb8ed79><select data-v-7eb8ed79><option data-v-7eb8ed79 value></option></select><div data-v-7eb8ed79><span data-v-7eb8ed79> </span><span data-v-7eb8ed79><span data-v-7eb8ed79 class=rp-select__arrow aria-hidden=true>", 1);
 delegateEvents("mousedown", "click", "keydown");
 //#endregion
 //#region src/components/select/select.vue
@@ -411,7 +450,7 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const emit = __emit;
 		const triggerRef = ref(null);
 		const { nativeSelectRef, selectedValue, nativeInputAttrs, requestValueUpdate } = useSelectNativeControl(props, (value) => emit("update:modelValue", value), triggerRef);
-		const { selectRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onFocusout, onTriggerKeydown } = useSelect(props, requestValueUpdate, () => selectedValue.value, triggerRef);
+		const { selectRef, isOpen, selectId, popupId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onFocusout, onTriggerKeydown } = useSelect(props, requestValueUpdate, () => selectedValue.value, triggerRef);
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -514,12 +553,14 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		createComponent(VaporTransition, { name: "rp-select-dropdown" }, extend(() => {
 			return createIf(() => unref(isOpen), () => {
 				return createComponent(scroll_area_default, { $: [() => unref(getPartAttrs)("content", { class: "rp-select__dropdown" }), {
-					role: "listbox",
-					id: () => unref(listboxId),
+					id: () => unref(popupId),
 					embedded: "",
 					type: "auto",
 					scrollbars: "y",
-					"viewport-attrs": () => ({ tabindex: -1 }),
+					"viewport-attrs": () => ({
+						role: "listbox",
+						tabindex: -1
+					}),
 					"data-state": () => unref(isOpen) ? "open" : "closed"
 				}] }, extend(() => {
 					return [createIf(() => unref(visibleOptions).length === 0, () => {
@@ -566,7 +607,7 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		_setTemplateRef(n26, selectRef, null, "selectRef");
 		return n26;
 	}
-}), [["__scopeId", "data-v-d7a0b110"]]);
+}), [["__scopeId", "data-v-7eb8ed79"]]);
 //#endregion
 //#region src/components/select/types.ts
 var selectParts = [