@sprawlify/vue 0.0.67 → 0.0.72

package/dist/components/navigation-menu/index.js

@@ -0,0 +1,559 @@
+import { t as __exportAll } from "../../chunk-BN_g-Awi.js";
+import { n as useMachine, r as normalizeProps$1, t as mergeProps$1 } from "../../core-DNndr38p.js";
+import { a as useLocaleContext, c as useEnvironmentContext, i as DEFAULT_LOCALE, s as DEFAULT_ENVIRONMENT } from "../../providers-DNBWT-O_.js";
+import { t as createContext } from "../../create-context-Ds1GbsVc.js";
+import { t as useForwardExpose } from "../../use-forward-expose-CCAmHTUB.js";
+import { t as sprawlify } from "../../factory-Co08Aw8u.js";
+import { t as cleanProps } from "../../clean-props-D2R4tz5e.js";
+import { n as useRenderStrategyProps, t as RenderStrategyPropsProvider } from "../../use-render-strategy-DA33j31C.js";
+import { i as usePresence } from "../../presence-B4-UhJY9.js";
+import { ensure } from "@sprawlify/primitives/utils";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, openBlock, renderSlot, toValue, unref, useAttrs, useId, withCtx } from "vue";
+import * as navigationMenu from "@sprawlify/primitives/machines/navigation-menu";
+import { anatomy as navigationMenuAnatomy } from "@sprawlify/primitives/machines/navigation-menu";
+
+//#region src/components/navigation-menu/use-navigation-menu-context.ts
+const [NavigationMenuProvider, useNavigationMenuContext] = createContext("NavigationMenuContext");
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-arrow.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_arrow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-arrow",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const navigationMenu = useNavigationMenuContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(navigationMenu).getArrowProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-arrow.vue
+var navigation_menu_arrow_default = navigation_menu_arrow_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/use-navigation-menu-item-props-context.ts
+const [NavigationMenuItemPropsProvider, useNavigationMenuItemPropsContext] = createContext("NavigationMenuItemPropsContext");
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-content.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_content_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-content",
+	props: {
+		value: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const api = useNavigationMenuContext();
+		const itemContext = useNavigationMenuItemPropsContext();
+		const renderStrategy = useRenderStrategyProps();
+		const value = computed(() => props.value ?? itemContext?.value.value);
+		const contentProps = computed(() => ({
+			...props,
+			value: value.value
+		}));
+		const presence = usePresence(computed(() => ({
+			...renderStrategy.value,
+			present: api.value.value === value.value
+		})));
+		const mergedProps = computed(() => mergeProps$1({ ...attrs }, api.value.getContentProps(contentProps.value), presence.value.presenceProps));
+		const viewportNode = computed(() => api.value.getViewportNode());
+		const isViewportRendered = computed(() => api.value.isViewportRendered);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return isViewportRendered.value && viewportNode.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+				createElementVNode("div", normalizeProps(guardReactiveProps(unref(api).getViewportProxyProps(contentProps.value))), null, 16),
+				createElementVNode("div", normalizeProps(guardReactiveProps(unref(api).getTriggerProxyProps(contentProps.value))), null, 16),
+				(openBlock(), createBlock(Teleport, { to: viewportNode.value }, [!unref(presence).unmounted ? (openBlock(), createBlock(unref(sprawlify).div, mergeProps({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["as-child"])) : createCommentVNode("v-if", true)], 8, ["to"]))
+			], 64)) : !unref(presence).unmounted ? (openBlock(), createBlock(unref(sprawlify).div, mergeProps({ key: 1 }, mergedProps.value, { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-content.vue
+var navigation_menu_content_default = navigation_menu_content_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-context.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-context",
+	setup(__props) {
+		const navigationMenu = useNavigationMenuContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(navigationMenu))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-context.vue
+var navigation_menu_context_default = navigation_menu_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-indicator.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_indicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-indicator",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const navigationMenu = useNavigationMenuContext();
+		const renderStrategy = useRenderStrategyProps();
+		const presence = usePresence(computed(() => ({
+			...renderStrategy.value,
+			present: navigationMenu.value.open
+		})));
+		const mergedProps = computed(() => mergeProps$1(navigationMenu.value.getIndicatorProps(), presence.value.presenceProps));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return !unref(presence).unmounted ? (openBlock(), createBlock(unref(sprawlify).div, mergeProps({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-indicator.vue
+var navigation_menu_indicator_default = navigation_menu_indicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-item.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-item",
+	props: {
+		value: {
+			type: String,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const navigationMenu = useNavigationMenuContext();
+		NavigationMenuItemPropsProvider(computed(() => ({
+			value: props.value,
+			disabled: props.disabled
+		})));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(navigationMenu).getItemProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-item.vue
+var navigation_menu_item_default = navigation_menu_item_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-item-indicator.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_item_indicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-item-indicator",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const attrs = useAttrs();
+		const api = useNavigationMenuContext();
+		const itemProps = useNavigationMenuItemPropsContext();
+		const mergedProps = computed(() => mergeProps$1({ ...attrs }, api.value.getItemIndicatorProps(itemProps?.value)));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(mergedProps.value, { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-item-indicator.vue
+var navigation_menu_item_indicator_default = navigation_menu_item_indicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-link.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_link_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-link",
+	props: {
+		value: {
+			type: String,
+			required: false
+		},
+		current: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		onSelect: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		closeOnClick: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const navigationMenu = useNavigationMenuContext();
+		const itemContext = useNavigationMenuItemPropsContext();
+		const value = computed(() => props.value ?? itemContext?.value?.value);
+		const linkProps = computed(() => ({
+			...props,
+			value: value.value
+		}));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).a, mergeProps(unref(navigationMenu).getLinkProps(linkProps.value), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-link.vue
+var navigation_menu_link_default = navigation_menu_link_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-list.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_list_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-list",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const navigationMenu = useNavigationMenuContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(navigationMenu).getListProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-list.vue
+var navigation_menu_list_default = navigation_menu_list_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/use-navigation-menu.ts
+const useNavigationMenu = (props = {}, emit) => {
+	const id = useId();
+	const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
+	const locale = useLocaleContext(DEFAULT_LOCALE);
+	const context = computed(() => {
+		const localProps = toValue(props);
+		return {
+			id,
+			dir: locale.value.dir,
+			getRootNode: env?.value.getRootNode,
+			...cleanProps(localProps),
+			onValueChange: (details) => {
+				emit?.("valueChange", details);
+				emit?.("update:value", details.value);
+				localProps.onValueChange?.(details);
+			}
+		};
+	});
+	const service = useMachine(navigationMenu.machine, context);
+	return computed(() => navigationMenu.connect(service, normalizeProps$1));
+};
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-root.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		closeDelay: {
+			type: Number,
+			required: false
+		},
+		defaultValue: {
+			type: String,
+			required: false
+		},
+		disableClickTrigger: {
+			type: Boolean,
+			required: false
+		},
+		disableHoverTrigger: {
+			type: Boolean,
+			required: false
+		},
+		disablePointerLeaveClose: {
+			type: Boolean,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		openDelay: {
+			type: Number,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false
+		},
+		value: {
+			type: String,
+			required: false
+		},
+		lazyMount: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnExit: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		disableClickTrigger: void 0,
+		disableHoverTrigger: void 0,
+		disablePointerLeaveClose: void 0
+	}),
+	emits: ["valueChange", "update:value"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const navigationMenu = useNavigationMenu(props, __emit);
+		NavigationMenuProvider(navigationMenu);
+		RenderStrategyPropsProvider(computed(() => ({
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).nav, normalizeProps(guardReactiveProps(unref(navigationMenu).getRootProps())), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-root.vue
+var navigation_menu_root_default = navigation_menu_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-root-provider.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		lazyMount: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnExit: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const navigationMenu = computed(() => props.value);
+		NavigationMenuProvider(navigationMenu);
+		RenderStrategyPropsProvider(computed(() => ({
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).nav, normalizeProps(guardReactiveProps(navigationMenu.value.getRootProps())), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-root-provider.vue
+var navigation_menu_root_provider_default = navigation_menu_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-trigger.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-trigger",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const navigationMenu = useNavigationMenuContext();
+		const itemContext = useNavigationMenuItemPropsContext();
+		ensure(itemContext?.value, () => "NavigationMenu.Trigger must be used within NavigationMenu.Item");
+		const triggerProps = computed(() => ({
+			...props,
+			value: itemContext?.value.value,
+			disabled: props.disabled ?? itemContext?.value.disabled
+		}));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(navigationMenu).getTriggerProps(triggerProps.value), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-trigger.vue
+var navigation_menu_trigger_default = navigation_menu_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/use-navigation-menu-viewport-props-context.ts
+const [setNavigationMenuViewportPropsContext, getNavigationMenuViewportPropsContext] = createContext("NavigationMenuViewportPropsContext");
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-viewport.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_viewport_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-viewport",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const viewportPropsContext = getNavigationMenuViewportPropsContext();
+		const navigationMenu = useNavigationMenuContext();
+		const renderStrategy = useRenderStrategyProps();
+		const presence = usePresence(computed(() => ({
+			...renderStrategy.value,
+			present: navigationMenu.value.open
+		})));
+		const mergedProps = computed(() => mergeProps$1(navigationMenu.value.getViewportProps(viewportPropsContext?.value), presence.value.presenceProps));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return !unref(presence).unmounted ? (openBlock(), createBlock(unref(sprawlify).div, mergeProps({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-viewport.vue
+var navigation_menu_viewport_default = navigation_menu_viewport_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-viewport-positioner.vue?vue&type=script&setup=true&lang.ts
+var navigation_menu_viewport_positioner_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "navigation-menu-viewport-positioner",
+	props: {
+		align: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const navigationMenu = useNavigationMenuContext();
+		const viewportProps = computed(() => ({ align: props.align }));
+		setNavigationMenuViewportPropsContext(viewportProps);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(navigationMenu).getViewportPositionerProps(viewportProps.value), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu-viewport-positioner.vue
+var navigation_menu_viewport_positioner_default = navigation_menu_viewport_positioner_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/navigation-menu/navigation-menu.ts
+var navigation_menu_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => navigation_menu_arrow_default,
+	Content: () => navigation_menu_content_default,
+	Context: () => navigation_menu_context_default,
+	Indicator: () => navigation_menu_indicator_default,
+	Item: () => navigation_menu_item_default,
+	ItemIndicator: () => navigation_menu_item_indicator_default,
+	Link: () => navigation_menu_link_default,
+	List: () => navigation_menu_list_default,
+	Root: () => navigation_menu_root_default,
+	RootProvider: () => navigation_menu_root_provider_default,
+	Trigger: () => navigation_menu_trigger_default,
+	Viewport: () => navigation_menu_viewport_default,
+	ViewportPositioner: () => navigation_menu_viewport_positioner_default
+});
+
+//#endregion
+export { navigation_menu_exports as NavigationMenu, navigation_menu_arrow_default as NavigationMenuArrow, navigation_menu_content_default as NavigationMenuContent, navigation_menu_context_default as NavigationMenuContext, navigation_menu_indicator_default as NavigationMenuIndicator, navigation_menu_item_default as NavigationMenuItem, navigation_menu_item_indicator_default as NavigationMenuItemIndicator, navigation_menu_link_default as NavigationMenuLink, navigation_menu_list_default as NavigationMenuList, navigation_menu_root_default as NavigationMenuRoot, navigation_menu_root_provider_default as NavigationMenuRootProvider, navigation_menu_trigger_default as NavigationMenuTrigger, navigation_menu_viewport_default as NavigationMenuViewport, navigation_menu_viewport_positioner_default as NavigationMenuViewportPositioner, navigationMenuAnatomy, useNavigationMenu, useNavigationMenuContext };