ropav 0.1.4 → 0.1.5

package/dist/select.js

@@ -3,10 +3,12 @@ import { t as x_default } from "./x.js";
 import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.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 useControllableValue } from "./useControllableValue.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) {
@@ -39,61 +41,61 @@ function useClickOutside(target, active, callback) {
 	});
 }
 //#endregion
-//#region src/composables/useListNavigation.ts
-function useListNavigation(options) {
-	const localFocusedIndex = ref(-1);
+//#region src/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,8 +111,8 @@ 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);
@@ -120,12 +122,26 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	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 +157,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 +186,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 +199,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();