@ark-ui/vue/dist/utils/dynamic.js

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

import { Fragment, cloneVNode, defineComponent } from "vue";
import { mergeProps as mergeProps$1 } from "@zag-js/vue";
//#region src/utils/dynamic.ts
var Dynamic = defineComponent({
	name: "Dynamic",
	inheritAttrs: false,
	setup(_, { attrs, slots }) {
		return () => {
			if (!slots.default) return null;
			const children = renderSlotFragments(slots.default());
			const [firstChildren, ...otherChildren] = children;
			if (firstChildren && Object.keys(attrs).length > 0) {
				delete firstChildren.props?.ref;
				const mergedProps = mergeProps$1(attrs, firstChildren.props ?? {});
				const cloned = cloneVNode(firstChildren, mergedProps);
				for (const prop in mergedProps) if (prop.startsWith("on")) {
					cloned.props ||= {};
					cloned.props[prop] = mergedProps[prop];
				}
				return children.length === 1 ? cloned : [cloned, ...otherChildren];
			}
			return children;
		};
	}
});
function renderSlotFragments(children) {
	if (!children) return [];
	return children.flatMap((child) => {
		if (child.type === Fragment) return renderSlotFragments(child.children);
		return [child];
	});
}
//#endregion
export { Dynamic };