@sprawlify/vue 0.0.64 → 0.0.66

package/dist/components/bottom-sheet/index.js

@@ -0,0 +1,429 @@
+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-B2CNPFg1.js";
+import { r as createContext, t as useForwardExpose } from "../../use-forward-expose-4p5AGAI3.js";
+import "../../utils-B4FuOOE-.js";
+import { t as sprawlify } from "../../factory-BH3WrWd2.js";
+import { t as cleanProps } from "../../clean-props-ChPEW0vT.js";
+import { t as createSplitProps } from "../../create-split-props-YZ3qgXe_.js";
+import { n as useRenderStrategyProps, t as RenderStrategyPropsProvider } from "../../use-render-strategy-BkxoN6ll.js";
+import { i as usePresence, n as PresenceProvider, r as usePresenceContext } from "../../presence-CvUnYMZQ.js";
+import { computed, createBlock, createCommentVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, openBlock, renderSlot, toValue, unref, useId, withCtx } from "vue";
+import * as bottomSheet from "@sprawlify/primitives/machines/bottom-sheet";
+import { anatomy as bottomSheetAnatomy } from "@sprawlify/primitives/machines/bottom-sheet";
+
+//#region src/components/bottom-sheet/use-bottom-sheet-context.ts
+const [BottomSheetProvider, useBottomSheetContext] = createContext("BottomSheetContext");
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-backdrop.vue?vue&type=script&setup=true&lang.ts
+var bottom_sheet_backdrop_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "bottom-sheet-backdrop",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const bottomSheet = useBottomSheetContext();
+		const renderStrategy = useRenderStrategyProps();
+		const presence = usePresence(computed(() => ({
+			...renderStrategy.value,
+			present: bottomSheet.value.open
+		})));
+		const mergedProps = computed(() => mergeProps$1(bottomSheet.value.getBackdropProps(), 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/bottom-sheet/bottom-sheet-backdrop.vue
+var bottom_sheet_backdrop_default = bottom_sheet_backdrop_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-close-trigger.vue?vue&type=script&setup=true&lang.ts
+var bottom_sheet_close_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "bottom-sheet-close-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const bottomSheet = useBottomSheetContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(bottomSheet).getCloseTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-close-trigger.vue
+var bottom_sheet_close_trigger_default = bottom_sheet_close_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-content.vue?vue&type=script&setup=true&lang.ts
+var bottom_sheet_content_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "bottom-sheet-content",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		draggable: {
+			type: Boolean,
+			required: false,
+			skipCheck: true,
+			default: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const [contentProps, localProps] = createSplitProps()(props, ["draggable"]);
+		const bottomSheet = useBottomSheetContext();
+		const presence = usePresenceContext();
+		const mergedProps = computed(() => mergeProps$1(bottomSheet.value.getContentProps({
+			draggable: true,
+			...contentProps
+		}), presence.value.presenceProps, localProps));
+		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/bottom-sheet/bottom-sheet-content.vue
+var bottom_sheet_content_default = bottom_sheet_content_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-context.vue?vue&type=script&setup=true&lang.ts
+var bottom_sheet_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "bottom-sheet-context",
+	setup(__props) {
+		const bottomSheet = useBottomSheetContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(bottomSheet))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-context.vue
+var bottom_sheet_context_default = bottom_sheet_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-grabber.vue?vue&type=script&setup=true&lang.ts
+var bottom_sheet_grabber_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "bottom-sheet-grabber",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const bottomSheet = useBottomSheetContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(bottomSheet).getGrabberProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-grabber.vue
+var bottom_sheet_grabber_default = bottom_sheet_grabber_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-grabber-indicator.vue?vue&type=script&setup=true&lang.ts
+var bottom_sheet_grabber_indicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "bottom-sheet-grabber-indicator",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const bottomSheet = useBottomSheetContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(bottomSheet).getGrabberIndicatorProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-grabber-indicator.vue
+var bottom_sheet_grabber_indicator_default = bottom_sheet_grabber_indicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/bottom-sheet/use-bottom-sheet.ts
+const useBottomSheet = (props = {}, emit) => {
+	const id = useId();
+	const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
+	const locale = useLocaleContext(DEFAULT_LOCALE);
+	const context = computed(() => {
+		const localeProps = toValue(props);
+		return {
+			id,
+			dir: locale.value.dir,
+			getRootNode: env?.value.getRootNode,
+			...cleanProps(localeProps),
+			onOpenChange: (details) => {
+				emit?.("openChange", details);
+				localeProps.onOpenChange?.(details);
+			},
+			onActiveSnapPointChange: (details) => {
+				emit?.("activeSnapPointChange", details);
+				localeProps.onActiveSnapPointChange?.(details);
+			}
+		};
+	});
+	const service = useMachine(bottomSheet.machine, context);
+	return computed(() => bottomSheet.connect(service, normalizeProps$1));
+};
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-root.vue?vue&type=script&setup=true&lang.ts
+var bottom_sheet_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "bottom-sheet-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		trapFocus: {
+			type: Boolean,
+			required: false
+		},
+		preventScroll: {
+			type: Boolean,
+			required: false
+		},
+		modal: {
+			type: Boolean,
+			required: false
+		},
+		initialFocusEl: {
+			type: Function,
+			required: false
+		},
+		finalFocusEl: {
+			type: Function,
+			required: false
+		},
+		restoreFocus: {
+			type: Boolean,
+			required: false
+		},
+		role: {
+			type: String,
+			required: false
+		},
+		open: {
+			type: Boolean,
+			required: false
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false
+		},
+		closeOnInteractOutside: {
+			type: Boolean,
+			required: false
+		},
+		closeOnEscape: {
+			type: Boolean,
+			required: false
+		},
+		snapPoints: {
+			type: Array,
+			required: false
+		},
+		swipeVelocityThreshold: {
+			type: Number,
+			required: false
+		},
+		closeThreshold: {
+			type: Number,
+			required: false
+		},
+		preventDragOnScroll: {
+			type: Boolean,
+			required: false
+		},
+		activeSnapPoint: {
+			type: [Number, String],
+			required: false
+		},
+		defaultActiveSnapPoint: {
+			type: [Number, String],
+			required: false
+		},
+		lazyMount: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnExit: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		closeOnEscape: void 0,
+		closeOnInteractOutside: void 0,
+		defaultOpen: void 0,
+		modal: void 0,
+		open: void 0,
+		preventScroll: void 0,
+		restoreFocus: void 0,
+		trapFocus: void 0,
+		preventDragOnScroll: void 0
+	}),
+	emits: ["openChange", "activeSnapPointChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const bottomSheet = useBottomSheet(props, __emit);
+		BottomSheetProvider(bottomSheet);
+		RenderStrategyPropsProvider(computed(() => ({
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})));
+		PresenceProvider(usePresence(computed(() => ({
+			present: bottomSheet.value.open,
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		}))));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-root.vue
+var bottom_sheet_root_default = bottom_sheet_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-root-provider.vue?vue&type=script&setup=true&lang.ts
+var bottom_sheet_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "bottom-sheet-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		lazyMount: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnExit: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const bottomSheet = computed(() => props.value);
+		BottomSheetProvider(bottomSheet);
+		RenderStrategyPropsProvider(computed(() => ({
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})));
+		PresenceProvider(usePresence(computed(() => ({ present: bottomSheet.value.open }))));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-root-provider.vue
+var bottom_sheet_root_provider_default = bottom_sheet_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-title.vue?vue&type=script&setup=true&lang.ts
+var bottom_sheet_title_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "bottom-sheet-title",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const bottomSheet = useBottomSheetContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).h2, mergeProps(unref(bottomSheet).getTitleProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-title.vue
+var bottom_sheet_title_default = bottom_sheet_title_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-trigger.vue?vue&type=script&setup=true&lang.ts
+var bottom_sheet_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "bottom-sheet-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const bottomSheet = useBottomSheetContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(bottomSheet).getTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet-trigger.vue
+var bottom_sheet_trigger_default = bottom_sheet_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet.ts
+var bottom_sheet_exports = /* @__PURE__ */ __exportAll({
+	Backdrop: () => bottom_sheet_backdrop_default,
+	CloseTrigger: () => bottom_sheet_close_trigger_default,
+	Content: () => bottom_sheet_content_default,
+	Context: () => bottom_sheet_context_default,
+	Grabber: () => bottom_sheet_grabber_default,
+	GrabberIndicator: () => bottom_sheet_grabber_indicator_default,
+	Root: () => bottom_sheet_root_default,
+	RootProvider: () => bottom_sheet_root_provider_default,
+	Title: () => bottom_sheet_title_default,
+	Trigger: () => bottom_sheet_trigger_default
+});
+
+//#endregion
+export { bottom_sheet_exports as BottomSheet, bottom_sheet_backdrop_default as BottomSheetBackdrop, bottom_sheet_close_trigger_default as BottomSheetCloseTrigger, bottom_sheet_content_default as BottomSheetContent, bottom_sheet_context_default as BottomSheetContext, bottom_sheet_grabber_default as BottomSheetGrabber, bottom_sheet_grabber_indicator_default as BottomSheetGrabberIndicator, bottom_sheet_root_default as BottomSheetRoot, bottom_sheet_root_provider_default as BottomSheetRootProvider, bottom_sheet_title_default as BottomSheetTitle, bottom_sheet_trigger_default as BottomSheetTrigger, bottomSheetAnatomy, useBottomSheet, useBottomSheetContext };