@ark-ui/vue/dist/components/swap/use-swap.js

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

import { parts } from "./swap.anatomy.js";
import { usePresence } from "../presence/use-presence.js";
import { computed, toValue } from "vue";
//#region src/components/swap/use-swap.ts
var useSwap = (props) => {
	const localProps = computed(() => toValue(props));
	const swap = computed(() => localProps.value.swap ?? false);
	const presenceProps = computed(() => ({
		present: swap.value,
		lazyMount: localProps.value.lazyMount,
		unmountOnExit: localProps.value.unmountOnExit,
		skipAnimationOnMount: true
	}));
	const offPresenceProps = computed(() => ({
		...presenceProps.value,
		present: !swap.value
	}));
	const onPresence = usePresence(presenceProps);
	const offPresence = usePresence(offPresenceProps);
	return {
		get swap() {
			return swap.value;
		},
		onPresence,
		offPresence,
		getRootProps() {
			return {
				...parts.root.attrs,
				"data-swap": swap.value ? "on" : "off",
				style: { display: "inline-grid" }
			};
		},
		getIndicatorProps({ type }) {
			const presence = type === "on" ? onPresence : offPresence;
			return {
				...parts.indicator.attrs,
				...presence.value.presenceProps,
				"data-type": type,
				style: {
					"grid-area": "1 / 1",
					display: "inline-flex"
				}
			};
		}
	};
};
//#endregion
export { useSwap };