@sprawlify/vue 0.0.70 → 0.0.72

package/dist/components/segment-group/index.js

@@ -0,0 +1,422 @@
+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-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 { computed, createBlock, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, openBlock, renderSlot, toValue, unref, useId, withCtx } from "vue";
+import * as segmentGroup from "@sprawlify/primitives/machines/radio-group";
+import { anatomy } from "@sprawlify/primitives/machines/radio-group";
+
+//#region src/components/segment-group/use-segment-group-context.ts
+const [SegmentGroupProvider, useSegmentGroupContext] = createContext("SegmentGroupContext");
+
+//#endregion
+//#region src/components/segment-group/segment-group-context.vue?vue&type=script&setup=true&lang.ts
+var segment_group_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "segment-group-context",
+	setup(__props) {
+		const segmentGroup = useSegmentGroupContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(segmentGroup))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/segment-group/segment-group-context.vue
+var segment_group_context_default = segment_group_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/segment-group/segment-group-anatomy.ts
+const segmentGroupAnatomy = anatomy.rename("segment-group");
+const parts = segmentGroupAnatomy.build();
+
+//#endregion
+//#region src/components/segment-group/segment-group-indicator.vue?vue&type=script&setup=true&lang.ts
+var segment_group_indicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "segment-group-indicator",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const segmentGroup = useSegmentGroupContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(segmentGroup).getIndicatorProps(), {
+				"as-child": __props.asChild,
+				"data-scope": unref(parts).indicator.attrs["data-scope"],
+				"data-part": unref(parts).indicator.attrs["data-part"]
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"as-child",
+				"data-scope",
+				"data-part"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/segment-group/segment-group-indicator.vue
+var segment_group_indicator_default = segment_group_indicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/segment-group/use-segment-group-item-context.ts
+const [SegmentGroupItemProvider, useSegmentGroupItemContext] = createContext("SegmentGroupItemContext");
+
+//#endregion
+//#region src/components/segment-group/segment-group-item-context.vue?vue&type=script&setup=true&lang.ts
+var segment_group_item_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "segment-group-item-context",
+	setup(__props) {
+		const item = useSegmentGroupItemContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(item))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/segment-group/segment-group-item-context.vue
+var segment_group_item_context_default = segment_group_item_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/segment-group/use-segment-group-item-props-context.ts
+const [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createContext("SegmentGroupItemPropsContext");
+
+//#endregion
+//#region src/components/segment-group/segment-group-item-control.vue?vue&type=script&setup=true&lang.ts
+var segment_group_item_control_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "segment-group-item-control",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const segmentGroup = useSegmentGroupContext();
+		const itemProps = useSegmentGroupItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(segmentGroup).getItemControlProps(unref(itemProps)), {
+				"as-child": __props.asChild,
+				"data-scope": unref(parts).itemControl.attrs["data-scope"],
+				"data-part": unref(parts).itemControl.attrs["data-part"]
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"as-child",
+				"data-scope",
+				"data-part"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/segment-group/segment-group-item-control.vue
+var segment_group_item_control_default = segment_group_item_control_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/segment-group/segment-group-item-hidden-input.vue?vue&type=script&setup=true&lang.ts
+var segment_group_item_hidden_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "segment-group-item-hidden-input",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const segmentGroup = useSegmentGroupContext();
+		const itemProps = useSegmentGroupItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).input, mergeProps(unref(segmentGroup).getItemHiddenInputProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/segment-group/segment-group-item-hidden-input.vue
+var segment_group_item_hidden_input_default = segment_group_item_hidden_input_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/segment-group/segment-group-item-text.vue?vue&type=script&setup=true&lang.ts
+var segment_group_item_text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "segment-group-item-text",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const segmentGroup = useSegmentGroupContext();
+		const itemProps = useSegmentGroupItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).span, mergeProps(unref(segmentGroup).getItemTextProps(unref(itemProps)), {
+				"data-scope": unref(parts).itemText.attrs["data-scope"],
+				"data-part": unref(parts).itemText.attrs["data-part"],
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"data-scope",
+				"data-part",
+				"as-child"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/segment-group/segment-group-item-text.vue
+var segment_group_item_text_default = segment_group_item_text_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/segment-group/segment-group-item.vue?vue&type=script&setup=true&lang.ts
+var segment_group_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "segment-group-item",
+	props: {
+		value: {
+			type: String,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		invalid: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const segmentGroup = useSegmentGroupContext();
+		SegmentGroupItemPropsProvider(props);
+		SegmentGroupItemProvider(computed(() => segmentGroup.value.getItemState(props)));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).label, mergeProps(unref(segmentGroup).getItemProps(props), {
+				"data-scope": unref(parts).item.attrs["data-scope"],
+				"data-part": unref(parts).item.attrs["data-part"],
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"data-scope",
+				"data-part",
+				"as-child"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/segment-group/segment-group-item.vue
+var segment_group_item_default = segment_group_item_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/segment-group/segment-group-label.vue?vue&type=script&setup=true&lang.ts
+var segment_group_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "segment-group-label",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const segmentGroup = useSegmentGroupContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).label, mergeProps(unref(segmentGroup).getLabelProps(), {
+				"as-child": __props.asChild,
+				"data-scope": unref(parts).label.attrs["data-scope"],
+				"data-part": unref(parts).label.attrs["data-part"]
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"as-child",
+				"data-scope",
+				"data-part"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/segment-group/segment-group-label.vue
+var segment_group_label_default = segment_group_label_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/segment-group/segment-group-root-provider.vue?vue&type=script&setup=true&lang.ts
+var segment_group_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "segment-group-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const segmentGroup = computed(() => props.value);
+		SegmentGroupProvider(segmentGroup);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(segmentGroup.value.getRootProps(), {
+				"data-scope": unref(parts).root.attrs["data-scope"],
+				"data-part": unref(parts).root.attrs["data-part"],
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"data-scope",
+				"data-part",
+				"as-child"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/segment-group/segment-group-root-provider.vue
+var segment_group_root_provider_default = segment_group_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/segment-group/use-segment-group.ts
+const useSegmentGroup = (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,
+			value: localProps.modelValue,
+			getRootNode: env?.value.getRootNode,
+			...cleanProps(localProps),
+			onValueChange: (details) => {
+				emit?.("valueChange", details);
+				emit?.("update:modelValue", details.value);
+				localProps.onValueChange?.(details);
+			}
+		};
+	});
+	const service = useMachine(segmentGroup.machine, context);
+	return computed(() => segmentGroup.connect(service, normalizeProps$1));
+};
+
+//#endregion
+//#region src/components/segment-group/segment-group-root.vue?vue&type=script&setup=true&lang.ts
+var segment_group_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "segment-group-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		defaultValue: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		modelValue: {
+			type: [String, null],
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		disabled: void 0,
+		readOnly: void 0
+	}),
+	emits: ["valueChange", "update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const segmentGroup = useSegmentGroup(__props, __emit);
+		SegmentGroupProvider(segmentGroup);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(segmentGroup).getRootProps(), {
+				"data-scope": unref(parts).root.attrs["data-scope"],
+				"data-part": unref(parts).root.attrs["data-part"],
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"data-scope",
+				"data-part",
+				"as-child"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/segment-group/segment-group-root.vue
+var segment_group_root_default = segment_group_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/segment-group/segment-group.ts
+var segment_group_exports = /* @__PURE__ */ __exportAll({
+	Context: () => segment_group_context_default,
+	Indicator: () => segment_group_indicator_default,
+	Item: () => segment_group_item_default,
+	ItemContext: () => segment_group_item_context_default,
+	ItemControl: () => segment_group_item_control_default,
+	ItemHiddenInput: () => segment_group_item_hidden_input_default,
+	ItemText: () => segment_group_item_text_default,
+	Label: () => segment_group_label_default,
+	Root: () => segment_group_root_default,
+	RootProvider: () => segment_group_root_provider_default
+});
+
+//#endregion
+export { segment_group_exports as SegmentGroup, segment_group_context_default as SegmentGroupContext, segment_group_indicator_default as SegmentGroupIndicator, segment_group_item_default as SegmentGroupItem, segment_group_item_context_default as SegmentGroupItemContext, segment_group_item_control_default as SegmentGroupItemControl, segment_group_item_hidden_input_default as SegmentGroupItemHiddenInput, segment_group_item_text_default as SegmentGroupItemText, segment_group_label_default as SegmentGroupLabel, segment_group_root_default as SegmentGroupRoot, segment_group_root_provider_default as SegmentGroupRootProvider, segmentGroupAnatomy, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };