ropav 0.2.0 → 0.3.1

package/dist/useCollapse.js

@@ -1,94 +0,0 @@
-import { t as useControllableValue } from "./useControllableValue.js";
-import { t as bem } from "./bem.js";
-import { computed, toValue, useId } from "vue";
-//#region src/components/collapse/useCollapse.ts
-var DEFAULT_ROLE = "region";
-function useCollapse(options = {}, emitOpenChange) {
-	const generatedId = useId();
-	const id = computed(() => toValue(options.id) ?? `${generatedId}-collapse`);
-	const isDisabled = computed(() => Boolean(toValue(options.disabled)));
-	const controllableOpen = useControllableValue({
-		modelValue: () => toValue(options.open),
-		defaultValue: () => false,
-		onChange: (nextOpen) => {
-			options.onOpenChange?.(nextOpen);
-			emitOpenChange?.(nextOpen);
-		}
-	});
-	const isOpen = controllableOpen.value;
-	const state = computed(() => isOpen.value ? "open" : "closed");
-	const shouldRenderContent = computed(() => !toValue(options.unmountOnExit) || isOpen.value);
-	const rootClass = computed(() => bem("rp-collapse", {
-		open: isOpen.value,
-		closed: !isOpen.value,
-		disabled: isDisabled.value
-	}));
-	const rootProps = computed(() => ({
-		class: rootClass.value,
-		"data-state": state.value,
-		"data-disabled": isDisabled.value || void 0
-	}));
-	const contentSlotProps = computed(() => ({
-		isOpen: isOpen.value,
-		open,
-		close,
-		toggle
-	}));
-	const triggerProps = computed(() => ({
-		type: "button",
-		disabled: isDisabled.value || void 0,
-		"aria-controls": id.value,
-		"aria-expanded": isOpen.value,
-		"aria-disabled": isDisabled.value || void 0,
-		onClick: onTriggerClick
-	}));
-	const contentProps = computed(() => ({
-		class: "rp-collapse__content",
-		id: id.value,
-		role: toValue(options.role) ?? DEFAULT_ROLE,
-		"data-state": state.value,
-		"aria-hidden": isOpen.value ? void 0 : "true",
-		"aria-label": toValue(options.ariaLabel) || void 0,
-		"aria-labelledby": toValue(options.ariaLabelledby) || void 0,
-		"aria-describedby": toValue(options.ariaDescribedby) || void 0
-	}));
-	const triggerSlotProps = computed(() => ({
-		triggerProps: triggerProps.value,
-		...contentSlotProps.value
-	}));
-	function setOpen(nextOpen) {
-		if (isDisabled.value || nextOpen === isOpen.value) return;
-		controllableOpen.setValue(nextOpen);
-	}
-	function open() {
-		setOpen(true);
-	}
-	function close() {
-		setOpen(false);
-	}
-	function toggle() {
-		setOpen(!isOpen.value);
-	}
-	function onTriggerClick() {
-		toggle();
-	}
-	return {
-		id,
-		state,
-		isDisabled,
-		isOpen,
-		shouldRenderContent,
-		rootClass,
-		rootProps,
-		triggerProps,
-		contentProps,
-		triggerSlotProps,
-		contentSlotProps,
-		setOpen,
-		open,
-		close,
-		toggle
-	};
-}
-//#endregion
-export { useCollapse as t };

package/dist/useControlState.js

@@ -1,41 +0,0 @@
-import { n as mergeAriaIdRefs } from "./aria.js";
-import { computed } from "vue";
-//#region src/internal/composables/useControlState.ts
-function useControlState(options = {}) {
-	const id = computed(() => options.id);
-	const form = computed(() => options.form);
-	const disabled = computed(() => options.disabled ?? false);
-	const required = computed(() => options.required ?? false);
-	const invalid = computed(() => options.invalid ?? false);
-	const valid = computed(() => options.valid ?? false);
-	const ariaDescribedby = computed(() => mergeAriaIdRefs(options.describedby));
-	const ariaLabelledby = computed(() => mergeAriaIdRefs(options.labelledby));
-	return {
-		get id() {
-			return id.value;
-		},
-		get form() {
-			return form.value;
-		},
-		get disabled() {
-			return disabled.value;
-		},
-		get required() {
-			return required.value;
-		},
-		get invalid() {
-			return invalid.value;
-		},
-		get valid() {
-			return valid.value;
-		},
-		get ariaDescribedby() {
-			return ariaDescribedby.value;
-		},
-		get ariaLabelledby() {
-			return ariaLabelledby.value;
-		}
-	};
-}
-//#endregion
-export { useControlState as t };

package/dist/useControllableValue.js

@@ -1,33 +0,0 @@
-import { computed, shallowRef, watch } from "vue";
-//#region src/composables/useControllableValue.ts
-function useControllableValue(options) {
-	const initialValue = options.defaultValue();
-	const uncontrolledValue = shallowRef(initialValue);
-	const isControlled = computed(() => options.modelValue() !== void 0);
-	watch(options.modelValue, (value) => {
-		if (value !== void 0) uncontrolledValue.value = value;
-	}, {
-		flush: "sync",
-		immediate: true
-	});
-	const value = computed(() => {
-		const modelValue = options.modelValue();
-		return modelValue === void 0 ? uncontrolledValue.value : modelValue;
-	});
-	function setValue(nextValue) {
-		if (!isControlled.value) uncontrolledValue.value = nextValue;
-		options.onChange(nextValue);
-	}
-	function resetValue(nextValue = initialValue) {
-		if (!isControlled.value) uncontrolledValue.value = nextValue;
-	}
-	return {
-		initialValue,
-		isControlled,
-		value,
-		setValue,
-		resetValue
-	};
-}
-//#endregion
-export { useControllableValue as t };

package/dist/useEditableOptionList.js

@@ -1,216 +0,0 @@
-import { i as isNodeWithinElement } from "./events.js";
-import { t as isInteractiveElement } from "./interactive.js";
-import { n as useClickOutside, t as useFlatOptionCollection } from "./useFlatOptionCollection.js";
-import { computed, nextTick, ref, watch } from "vue";
-//#region src/utils/optionFilter.ts
-function defaultOptionFilter(option, searchValue) {
-	return option.label.toLocaleLowerCase().includes(searchValue.trim().toLocaleLowerCase());
-}
-function filterOptions(options, searchValue, filter) {
-	const availableOptions = options ?? [];
-	if (filter === false || searchValue.trim() === "") return [...availableOptions];
-	const predicate = filter ?? defaultOptionFilter;
-	return availableOptions.filter((option) => predicate(option, searchValue));
-}
-//#endregion
-//#region src/internal/composables/useEditableOptionList.ts
-function useEditableOptionList(options) {
-	const selection = options.selection;
-	const isSingle = selection.kind === "single";
-	const isOpen = ref(false);
-	const isSearching = ref(false);
-	const popupId = `${options.baseId}-popup`;
-	const searchValue = ref(isSingle ? selection.displayValue() : "");
-	const filterValue = computed(() => isSingle && !isSearching.value ? "" : searchValue.value);
-	const visibleOptions = computed(() => filterOptions(options.items(), filterValue.value, options.filter()));
-	const optionCollection = useFlatOptionCollection({
-		items: () => visibleOptions.value,
-		baseId: options.baseId,
-		isOpen: () => isOpen.value,
-		collectionRef: options.rootRef,
-		getKey: options.getKey,
-		isDisabled: options.isDisabled,
-		isSelected: selection.isSelected
-	});
-	const itemsSnapshot = computed(() => visibleOptions.value.map((option) => [options.getKey(option), options.isDisabled(option)]));
-	const canClear = computed(() => options.clearable() && !options.disabled() && (selection.hasSelection() || isSingle && searchValue.value !== ""));
-	function setInputValue(value) {
-		searchValue.value = value;
-		if (options.inputRef.value && options.inputRef.value.value !== value) options.inputRef.value.value = value;
-	}
-	function syncInputToSelection() {
-		if (selection.kind !== "single") return;
-		isSearching.value = false;
-		setInputValue(selection.displayValue());
-	}
-	function resetQuery() {
-		if (searchValue.value === "") return;
-		setInputValue("");
-		options.onSearch("");
-	}
-	function focusInput() {
-		nextTick(() => options.inputRef.value?.focus());
-	}
-	function open() {
-		if (options.disabled() || isOpen.value) return;
-		isOpen.value = true;
-		syncInputToSelection();
-		optionCollection.activate("selected");
-	}
-	function close(restoreInput = true) {
-		isOpen.value = false;
-		optionCollection.reset();
-		if (restoreInput) syncInputToSelection();
-	}
-	function toggle() {
-		if (options.disabled()) return;
-		const wasOpen = isOpen.value;
-		if (wasOpen) close();
-		else open();
-		if (!wasOpen || selection.kind === "multiple") focusInput();
-	}
-	function restoreRejectedSingleSelection(option) {
-		if (selection.kind !== "single") return;
-		queueMicrotask(() => {
-			if (!(option ? selection.isSelected(option) : !selection.hasSelection()) && !isOpen.value) syncInputToSelection();
-		});
-	}
-	function selectOption(option) {
-		if (options.isDisabled(option)) return;
-		selection.select(option);
-		if (selection.kind === "single") {
-			isSearching.value = false;
-			setInputValue(option.label);
-			close(false);
-			restoreRejectedSingleSelection(option);
-		} else {
-			resetQuery();
-			optionCollection.activate(option);
-		}
-		focusInput();
-	}
-	function clearSelection() {
-		if (!canClear.value) return;
-		if (selection.kind === "single") {
-			isSearching.value = false;
-			setInputValue("");
-			options.onSearch("");
-			selection.clear();
-			close(false);
-			restoreRejectedSingleSelection();
-		} else {
-			selection.clear();
-			resetQuery();
-		}
-		focusInput();
-	}
-	function resetAfterFormReset() {
-		close();
-		if (selection.kind === "multiple") resetQuery();
-	}
-	function onOptionMouseenter(option) {
-		optionCollection.activate(option);
-	}
-	function onRootMousedown(event) {
-		if (selection.kind !== "multiple" || options.disabled()) return;
-		if (!isNodeWithinElement(event.target, options.inputRef.value) && isInteractiveElement(event.target)) return;
-		open();
-		options.inputRef.value?.focus();
-	}
-	function onFocusout(event) {
-		if (isNodeWithinElement(event.relatedTarget, options.rootRef.value)) return;
-		close();
-	}
-	function onInput(event) {
-		if (options.disabled()) return;
-		const value = event.currentTarget.value;
-		searchValue.value = value;
-		isSearching.value = true;
-		options.onSearch(value);
-		if (!isOpen.value) isOpen.value = true;
-		optionCollection.activate("first");
-	}
-	function onInputFocus() {
-		open();
-	}
-	function onInputClick() {
-		open();
-	}
-	function selectHighlightedOption() {
-		const option = visibleOptions.value[optionCollection.activeIndex.value];
-		if (option) selectOption(option);
-	}
-	function onInputKeydown(event) {
-		if (options.disabled() || event.isComposing) return;
-		switch (event.key) {
-			case "Enter":
-				if (!isOpen.value || selection.kind === "multiple" && optionCollection.activeIndex.value < 0) return;
-				event.preventDefault();
-				selectHighlightedOption();
-				break;
-			case "ArrowDown":
-				event.preventDefault();
-				if (!isOpen.value) open();
-				else optionCollection.move(1);
-				break;
-			case "ArrowUp":
-				event.preventDefault();
-				if (!isOpen.value) {
-					open();
-					optionCollection.activate("last");
-				} else optionCollection.move(-1);
-				break;
-			case "Backspace":
-				if (selection.kind === "multiple" && searchValue.value === "") selection.removeLast();
-				break;
-			case "Escape":
-				if (!isOpen.value) return;
-				event.preventDefault();
-				close();
-				break;
-		}
-	}
-	watch(itemsSnapshot, () => {
-		if (!isOpen.value || optionCollection.activeIndex.value >= 0) return;
-		if (selection.kind === "multiple" || isSearching.value) optionCollection.activate("first");
-	});
-	if (selection.kind === "single") watch(selection.displayValue, (value) => {
-		if (!isSearching.value) setInputValue(value);
-	});
-	watch(options.disabled, (disabled) => {
-		if (disabled) close();
-	});
-	useClickOutside(options.rootRef, isOpen, () => close());
-	return {
-		actions: {
-			clearSelection,
-			focusInput,
-			resetAfterFormReset,
-			selectOption,
-			toggle
-		},
-		handlers: {
-			onFocusout,
-			onInput,
-			onInputClick,
-			onInputFocus,
-			onInputKeydown,
-			onOptionMouseenter,
-			onRootMousedown
-		},
-		ids: {
-			listbox: `${popupId}-viewport`,
-			popup: popupId
-		},
-		state: {
-			activeDescendantId: optionCollection.activeDescendantId,
-			canClear,
-			isOpen,
-			renderedOptions: optionCollection.options,
-			searchValue,
-			visibleOptions
-		}
-	};
-}
-//#endregion
-export { useEditableOptionList as t };

package/dist/useFlatOptionCollection.js

@@ -1,134 +0,0 @@
-import { n as getNextEnabledIndex, t as getEnabledIndexes } from "./collectionNavigation.js";
-import { n as isEventWithinElement } from "./events.js";
-import { computed, defineVaporComponent, markRaw, onBeforeUnmount, onMounted, shallowRef, template, watch } from "vue";
-//#region ~icons/lucide/chevrons-up-down
-var t0 = 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) {
-	return t0();
-}
-var chevrons_up_down_default = markRaw(defineVaporComponent({
-	name: "lucide-chevrons-up-down",
-	render
-}));
-//#endregion
-//#region src/internal/composables/useClickOutside.ts
-function useClickOutside(target, active, callback) {
-	const targets = Array.isArray(target) ? target : [target];
-	const listeningDocuments = /* @__PURE__ */ new Set();
-	let stopWatch;
-	function handler(event) {
-		if (!targets.some((current) => {
-			const element = current.value;
-			return element ? isEventWithinElement(event, element) : false;
-		})) callback(event);
-	}
-	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, ...targets], syncListeners, { immediate: true });
-	});
-	onBeforeUnmount(() => {
-		stopWatch?.();
-		detachListeners();
-	});
-}
-//#endregion
-//#region src/internal/composables/useFlatOptionCollection.ts
-function findActiveDescendant(collection, id) {
-	const documentMatch = collection.ownerDocument.getElementById(id);
-	if (documentMatch && collection.contains(documentMatch)) return documentMatch;
-	return [...collection.querySelectorAll("[id]")].find((element) => element.id === id);
-}
-function useFlatOptionCollection(options) {
-	const activeKey = shallowRef(null);
-	const isDisabled = options.isDisabled ?? (() => false);
-	const isSelected = options.isSelected ?? (() => false);
-	const loop = options.loop ?? true;
-	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));
-	const optionStates = computed(() => options.items().map((option, index) => ({
-		option,
-		id: `${options.baseId}-option-${index}`,
-		active: index === activeIndex.value,
-		disabled: isDisabled(option),
-		selected: isSelected(option)
-	})));
-	const activeDescendantId = computed(() => {
-		if (!options.isOpen()) return void 0;
-		return optionStates.value[activeIndex.value]?.id;
-	});
-	function reset() {
-		activeKey.value = null;
-	}
-	function activateIndex(index) {
-		const item = options.items()[index];
-		if (!item || isDisabled(item)) return;
-		activeKey.value = options.getKey(item);
-	}
-	function activate(target) {
-		if (target === "first") {
-			const first = enabledIndexes.value[0];
-			if (first === void 0) reset();
-			else activateIndex(first);
-			return;
-		}
-		if (target === "last") {
-			const indexes = enabledIndexes.value;
-			const last = indexes[indexes.length - 1];
-			if (last === void 0) reset();
-			else activateIndex(last);
-			return;
-		}
-		if (target === "selected") {
-			const selectedIndex = options.items().findIndex((item) => isSelected(item) && !isDisabled(item));
-			if (selectedIndex >= 0) activateIndex(selectedIndex);
-			else activate("first");
-			return;
-		}
-		if (!isDisabled(target)) activeKey.value = options.getKey(target);
-	}
-	function move(direction) {
-		if (activeIndex.value < 0) {
-			activate(direction === 1 ? "first" : "last");
-			return;
-		}
-		const nextIndex = getNextEnabledIndex(options.items(), activeIndex.value, direction, isDisabled, loop);
-		if (nextIndex === void 0) reset();
-		else activateIndex(nextIndex);
-	}
-	watch(activeIndex, (index) => {
-		if (activeKey.value != null && index < 0) reset();
-	}, { flush: "sync" });
-	watch([activeDescendantId, options.collectionRef], ([id, collection]) => {
-		if (!id || !collection) return;
-		findActiveDescendant(collection, id)?.scrollIntoView?.({ block: "nearest" });
-	}, {
-		flush: "post",
-		immediate: true
-	});
-	return {
-		options: optionStates,
-		activeIndex,
-		activeDescendantId,
-		activate,
-		move,
-		reset
-	};
-}
-//#endregion
-export { useClickOutside as n, chevrons_up_down_default as r, useFlatOptionCollection as t };

package/dist/useFloatingPosition.js

@@ -1,169 +0,0 @@
-import { t as isElement } from "./query.js";
-import { n as observeComposedAncestry } from "./ancestry.js";
-import { nextTick, onBeforeUnmount, readonly, ref, toValue, watch } from "vue";
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
-//#region src/components/floating/useFloatingPosition.ts
-var DEFAULT_ARROW_PADDING = 4;
-var DEFAULT_COLLISION_PADDING = 8;
-var DEFAULT_OFFSET = 8;
-var DEFAULT_PLACEMENT = "bottom";
-var DEFAULT_STRATEGY = "absolute";
-function getReferenceElement(reference) {
-	if (isElement(reference)) return reference;
-	return reference && isElement(reference.contextElement) ? reference.contextElement : null;
-}
-function useFloatingPosition(options) {
-	const actualPlacement = ref(getPlacement());
-	const isPositioned = ref(false);
-	const floatingStyle = ref(getHiddenStyle());
-	const arrowStyle = ref();
-	let cleanup;
-	let cleanupPositioningAncestry;
-	let generation = 0;
-	let request = 0;
-	function getReference() {
-		return toValue(options.reference);
-	}
-	function getFloating() {
-		return toValue(options.floating);
-	}
-	function getArrow() {
-		return toValue(options.arrow);
-	}
-	function getOpen() {
-		return toValue(options.open) !== false;
-	}
-	function getPlacement() {
-		return toValue(options.placement) ?? DEFAULT_PLACEMENT;
-	}
-	function getStrategy() {
-		return toValue(options.strategy) ?? DEFAULT_STRATEGY;
-	}
-	function getOffset() {
-		return toValue(options.offset) ?? DEFAULT_OFFSET;
-	}
-	function getFlip() {
-		return toValue(options.flip) !== false;
-	}
-	function getFlipFallbackStrategy() {
-		return toValue(options.flipOptions)?.fallbackStrategy;
-	}
-	function getShift() {
-		return toValue(options.shift) !== false;
-	}
-	function getCollisionPadding() {
-		return toValue(options.collisionPadding) ?? DEFAULT_COLLISION_PADDING;
-	}
-	function getAutoUpdateAnimationFrame() {
-		return toValue(options.autoUpdateOptions)?.animationFrame;
-	}
-	function getHiddenStyle() {
-		return {
-			position: getStrategy(),
-			top: "0",
-			left: "0",
-			visibility: "hidden"
-		};
-	}
-	function resetPosition() {
-		actualPlacement.value = getPlacement();
-		isPositioned.value = false;
-		floatingStyle.value = getHiddenStyle();
-		arrowStyle.value = void 0;
-	}
-	function stop() {
-		cleanup?.();
-		cleanup = void 0;
-		cleanupPositioningAncestry?.();
-		cleanupPositioningAncestry = void 0;
-		generation += 1;
-		request += 1;
-	}
-	function observePositioningAncestry() {
-		cleanupPositioningAncestry = observeComposedAncestry(() => [getReferenceElement(getReference()), getFloating()], start, { deferWhileDisconnected: true });
-	}
-	function getMiddleware() {
-		const middleware = [offset(getOffset())];
-		const padding = getCollisionPadding();
-		const fallbackStrategy = getFlipFallbackStrategy();
-		if (getFlip()) middleware.push(flip({
-			padding,
-			...fallbackStrategy == null ? {} : { fallbackStrategy }
-		}));
-		if (getShift()) middleware.push(shift({ padding }));
-		const arrow$1 = getArrow();
-		if (arrow$1) middleware.push(arrow({
-			element: arrow$1,
-			padding: DEFAULT_ARROW_PADDING
-		}));
-		return middleware;
-	}
-	async function update() {
-		const reference = getReference();
-		const floating = getFloating();
-		if (!reference || !floating || !getOpen()) return;
-		const currentGeneration = generation;
-		const currentRequest = ++request;
-		const result = await computePosition(reference, floating, {
-			placement: getPlacement(),
-			strategy: getStrategy(),
-			middleware: getMiddleware()
-		});
-		if (currentGeneration !== generation || currentRequest !== request || !getOpen()) return;
-		actualPlacement.value = result.placement;
-		floatingStyle.value = {
-			position: result.strategy,
-			top: `${result.y}px`,
-			left: `${result.x}px`
-		};
-		const arrowData = result.middlewareData.arrow;
-		arrowStyle.value = arrowData ? {
-			left: arrowData.x == null ? void 0 : `${arrowData.x}px`,
-			top: arrowData.y == null ? void 0 : `${arrowData.y}px`
-		} : void 0;
-		isPositioned.value = true;
-	}
-	function start() {
-		stop();
-		if (!getOpen()) return;
-		resetPosition();
-		const currentGeneration = generation;
-		nextTick(() => {
-			const reference = getReference();
-			const floating = getFloating();
-			if (currentGeneration !== generation || !reference || !floating || !getOpen()) return;
-			const updatePosition = () => void update();
-			const animationFrame = getAutoUpdateAnimationFrame();
-			cleanup = animationFrame == null ? autoUpdate(reference, floating, updatePosition) : autoUpdate(reference, floating, updatePosition, { animationFrame });
-			observePositioningAncestry();
-		});
-	}
-	watch([
-		getOpen,
-		getReference,
-		getFloating,
-		getArrow,
-		getPlacement,
-		getStrategy,
-		getOffset,
-		getFlip,
-		getFlipFallbackStrategy,
-		getShift,
-		getCollisionPadding,
-		getAutoUpdateAnimationFrame,
-		() => toValue(options.restartKey)
-	], start, {
-		flush: "post",
-		immediate: true
-	});
-	onBeforeUnmount(stop);
-	return {
-		actualPlacement: readonly(actualPlacement),
-		arrowStyle: readonly(arrowStyle),
-		floatingStyle: readonly(floatingStyle),
-		isPositioned: readonly(isPositioned),
-		update
-	};
-}
-//#endregion
-export { useFloatingPosition as t };