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

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

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