@sprawlify/vue 0.0.64 → 0.0.66

package/dist/components/carousel/index.js

@@ -0,0 +1,500 @@
+import { t as __exportAll } from "../../chunk-BN_g-Awi.js";
+import { n as useMachine, r as normalizeProps$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 { t as sprawlify } from "../../factory-BH3WrWd2.js";
+import { t as cleanProps } from "../../clean-props-ChPEW0vT.js";
+import { computed, createBlock, createCommentVNode, createTextVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, openBlock, renderSlot, toDisplayString, toValue, unref, useId, withCtx } from "vue";
+import * as carousel from "@sprawlify/primitives/machines/carousel";
+import { anatomy } from "@sprawlify/primitives/machines/carousel";
+
+//#region src/components/carousel/carousel-anatomy.ts
+const carouselAnatomy = anatomy.extendWith("progressText", "autoplayIndicator");
+
+//#endregion
+//#region src/components/carousel/use-carousel-context.ts
+const [CarouselProvider, useCarouselContext] = createContext("CarouselContext");
+
+//#endregion
+//#region src/components/carousel/carousel-autoplay-indicator.vue?vue&type=script&setup=true&lang.ts
+var carousel_autoplay_indicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-autoplay-indicator",
+	props: {
+		fallback: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const parts = carouselAnatomy.build();
+		const carousel = useCarouselContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).span, mergeProps(unref(parts).autoplayIndicator.attrs, { "as-child": __props.asChild }), {
+				default: withCtx(() => [unref(carousel).isPlaying ? renderSlot(_ctx.$slots, "default", { key: 0 }) : renderSlot(_ctx.$slots, "fallback", {
+					key: 1,
+					fallback: __props.fallback
+				}, () => [createTextVNode(toDisplayString(__props.fallback), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-autoplay-indicator.vue
+var carousel_autoplay_indicator_default = carousel_autoplay_indicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-progress-text.vue?vue&type=script&setup=true&lang.ts
+var carousel_progress_text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-progress-text",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const parts = carouselAnatomy.build();
+		const carousel = useCarouselContext();
+		const progressText = computed(() => {
+			return `${carousel.value.page + 1} / ${carousel.value.pageSnapPoints.length}`;
+		});
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).span, mergeProps(unref(parts).progressText.attrs, { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(progressText.value), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-progress-text.vue
+var carousel_progress_text_default = carousel_progress_text_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-autoplay-trigger.vue?vue&type=script&setup=true&lang.ts
+var carousel_autoplay_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-autoplay-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const carousel = useCarouselContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(carousel).getAutoplayTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-autoplay-trigger.vue
+var carousel_autoplay_trigger_default = carousel_autoplay_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-context.vue?vue&type=script&setup=true&lang.ts
+var carousel_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-context",
+	setup(__props) {
+		const carousel = useCarouselContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(carousel))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-context.vue
+var carousel_context_default = carousel_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-control.vue?vue&type=script&setup=true&lang.ts
+var carousel_control_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-control",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const carousel = useCarouselContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(carousel).getControlProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-control.vue
+var carousel_control_default = carousel_control_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-indicator-group.vue?vue&type=script&setup=true&lang.ts
+var carousel_indicator_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-indicator-group",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const carousel = useCarouselContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(carousel).getIndicatorGroupProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-indicator-group.vue
+var carousel_indicator_group_default = carousel_indicator_group_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-indicator.vue?vue&type=script&setup=true&lang.ts
+var carousel_indicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-indicator",
+	props: {
+		index: {
+			type: Number,
+			required: true
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const carousel = useCarouselContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(carousel).getIndicatorProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-indicator.vue
+var carousel_indicator_default = carousel_indicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-item-group.vue?vue&type=script&setup=true&lang.ts
+var carousel_item_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-item-group",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const carousel = useCarouselContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(carousel).getItemGroupProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-item-group.vue
+var carousel_item_group_default = carousel_item_group_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-item.vue?vue&type=script&setup=true&lang.ts
+var carousel_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-item",
+	props: {
+		index: {
+			type: Number,
+			required: true
+		},
+		snapAlign: {
+			type: null,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const carousel = useCarouselContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(carousel).getItemProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-item.vue
+var carousel_item_default = carousel_item_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-next-trigger.vue?vue&type=script&setup=true&lang.ts
+var carousel_next_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-next-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const carousel = useCarouselContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(carousel).getNextTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-next-trigger.vue
+var carousel_next_trigger_default = carousel_next_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-prev-trigger.vue?vue&type=script&setup=true&lang.ts
+var carousel_prev_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-prev-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const carousel = useCarouselContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(carousel).getPrevTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-prev-trigger.vue
+var carousel_prev_trigger_default = carousel_prev_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel-root-provider.vue?vue&type=script&setup=true&lang.ts
+var carousel_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const carousel = computed(() => props.value);
+		CarouselProvider(carousel);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(carousel.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-root-provider.vue
+var carousel_root_provider_default = carousel_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/use-carousel.ts
+const useCarousel = (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),
+			onAutoplayStatusChange: (details) => {
+				emit?.("autoplayStatusChange", details);
+				localProps.onAutoplayStatusChange?.(details);
+			},
+			onDragStatusChange: (details) => {
+				emit?.("dragStatusChange", details);
+				localProps.onDragStatusChange?.(details);
+			},
+			onPageChange: (details) => {
+				emit?.("pageChange", details);
+				emit?.("update:page", details.page);
+				localProps.onPageChange?.(details);
+			}
+		};
+	});
+	const service = useMachine(carousel.machine, context);
+	return computed(() => carousel.connect(service, normalizeProps$1));
+};
+
+//#endregion
+//#region src/components/carousel/carousel-root.vue?vue&type=script&setup=true&lang.ts
+var carousel_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "carousel-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		allowMouseDrag: {
+			type: Boolean,
+			required: false
+		},
+		autoplay: {
+			type: [Boolean, Object],
+			required: false
+		},
+		autoSize: {
+			type: Boolean,
+			required: false
+		},
+		defaultPage: {
+			type: Number,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		inViewThreshold: {
+			type: [Number, Array],
+			required: false
+		},
+		loop: {
+			type: Boolean,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false
+		},
+		padding: {
+			type: String,
+			required: false
+		},
+		page: {
+			type: Number,
+			required: false
+		},
+		slideCount: {
+			type: Number,
+			required: true
+		},
+		slidesPerMove: {
+			type: [Number, String],
+			required: false
+		},
+		slidesPerPage: {
+			type: Number,
+			required: false
+		},
+		snapType: {
+			type: String,
+			required: false
+		},
+		spacing: {
+			type: String,
+			required: false
+		},
+		translations: {
+			type: null,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		allowMouseDrag: void 0,
+		loop: void 0,
+		autoplay: void 0,
+		autoSize: void 0
+	}),
+	emits: [
+		"autoplayStatusChange",
+		"dragStatusChange",
+		"pageChange",
+		"update:page"
+	],
+	setup(__props, { emit: __emit }) {
+		const carousel = useCarousel(__props, __emit);
+		CarouselProvider(carousel);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(carousel).getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/carousel/carousel-root.vue
+var carousel_root_default = carousel_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/carousel/carousel.ts
+var carousel_exports = /* @__PURE__ */ __exportAll({
+	AutoplayIndicator: () => carousel_autoplay_indicator_default,
+	AutoplayTrigger: () => carousel_autoplay_trigger_default,
+	Context: () => carousel_context_default,
+	Control: () => carousel_control_default,
+	Indicator: () => carousel_indicator_default,
+	IndicatorGroup: () => carousel_indicator_group_default,
+	Item: () => carousel_item_default,
+	ItemGroup: () => carousel_item_group_default,
+	NextTrigger: () => carousel_next_trigger_default,
+	PrevTrigger: () => carousel_prev_trigger_default,
+	ProgressText: () => carousel_progress_text_default,
+	Root: () => carousel_root_default,
+	RootProvider: () => carousel_root_provider_default
+});
+
+//#endregion
+export { carousel_exports as Carousel, carousel_autoplay_indicator_default as CarouselAutoplayIndicator, carousel_autoplay_trigger_default as CarouselAutoplayTrigger, carousel_context_default as CarouselContext, carousel_control_default as CarouselControl, carousel_indicator_default as CarouselIndicator, carousel_indicator_group_default as CarouselIndicatorGroup, carousel_item_default as CarouselItem, carousel_item_group_default as CarouselItemGroup, carousel_next_trigger_default as CarouselNextTrigger, carousel_prev_trigger_default as CarouselPrevTrigger, carousel_progress_text_default as CarouselProgressText, carousel_root_default as CarouselRoot, carousel_root_provider_default as CarouselRootProvider, carouselAnatomy, useCarousel, useCarouselContext };