@sprawlify/vue 0.0.64 → 0.0.66

package/dist/components/checkbox/index.js

@@ -0,0 +1,500 @@
+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 { t as sprawlify } from "../../factory-BH3WrWd2.js";
+import { t as cleanProps } from "../../clean-props-ChPEW0vT.js";
+import { u as useFieldsetContext } from "../../fieldset-DzhN7Zrg.js";
+import { m as useFieldContext } from "../../field-DnHnX3Tf.js";
+import { computed, createBlock, defineComponent, getCurrentInstance, guardReactiveProps, mergeDefaults, mergeProps, nextTick, normalizeProps, openBlock, ref, renderSlot, toRefs, toValue, unref, useId, watch, withCtx } from "vue";
+import * as checkbox from "@sprawlify/primitives/machines/checkbox";
+import { anatomy } from "@sprawlify/primitives/machines/checkbox";
+
+//#region src/components/checkbox/use-checkbox-context.ts
+const [CheckboxProvider, useCheckboxContext] = createContext("CheckboxContext");
+
+//#endregion
+//#region src/components/checkbox/checkbox-context.vue?vue&type=script&setup=true&lang.ts
+var checkbox_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "checkbox-context",
+	setup(__props) {
+		const checkbox = useCheckboxContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(checkbox))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/checkbox/checkbox-context.vue
+var checkbox_context_default = checkbox_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/checkbox/checkbox-control.vue?vue&type=script&setup=true&lang.ts
+var checkbox_control_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "checkbox-control",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const checkbox = useCheckboxContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(checkbox).getControlProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/checkbox/checkbox-control.vue
+var checkbox_control_default = checkbox_control_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/checkbox/checkbox-anatomy.ts
+const checkboxAnatomy = anatomy.extendWith("group");
+
+//#endregion
+//#region src/utils/boolean.ts
+const toBooleanValue = (value) => {
+	return typeof value === "boolean" ? value : value === "true";
+};
+
+//#endregion
+//#region src/components/use-v-model.ts
+function useVModel(props, key, emit, options = {}) {
+	const { passive = false, eventName, defaultValue } = options;
+	const vm = getCurrentInstance();
+	const _emit = emit || vm?.emit || vm?.$emit?.bind(vm) || vm?.proxy?.$emit?.bind(vm?.proxy);
+	const prop = key || "modelValue";
+	const getValue = () => props[prop] ?? defaultValue;
+	const triggerEmit = (value) => {
+		if (!eventName) _emit(eventName || `update:${prop.toString()}`, value);
+		else for (const event of eventName) _emit(event, value);
+	};
+	if (passive) {
+		const proxy = ref(getValue());
+		let isUpdating = false;
+		watch(() => props[prop], (v) => {
+			if (!isUpdating) {
+				isUpdating = true;
+				proxy.value = v;
+				nextTick(() => {
+					isUpdating = false;
+				});
+			}
+		});
+		watch(proxy, (v) => {
+			if (!isUpdating && v !== props[prop]) triggerEmit(v);
+		});
+		return proxy;
+	}
+	return computed({
+		get() {
+			return getValue();
+		},
+		set(value) {
+			triggerEmit(value);
+		}
+	});
+}
+
+//#endregion
+//#region src/components/checkbox/use-checkbox-group.ts
+function useCheckboxGroup(props, emit) {
+	const fieldset = useFieldsetContext();
+	const disabled = computed(() => props.disabled ?? fieldset?.value?.disabled);
+	const invalid = computed(() => props.invalid ?? fieldset?.value?.invalid);
+	const interactive = computed(() => !(disabled.value || props.readOnly));
+	const { defaultValue } = toRefs(props);
+	const valueRef = useVModel(props, "modelValue", emit, {
+		defaultValue: defaultValue?.value ?? [],
+		passive: props.modelValue === void 0,
+		eventName: ["valueChange", "update:modelValue"]
+	});
+	const isChecked = (val) => {
+		return valueRef.value.some((v) => String(v) === String(val));
+	};
+	const toggleValue = (val) => {
+		isChecked(val) ? removeValue(val) : addValue(val);
+	};
+	const addValue = (val) => {
+		if (!interactive.value) return;
+		if (isChecked(val)) return;
+		valueRef.value = valueRef.value.concat(val);
+	};
+	const removeValue = (val) => {
+		if (!interactive.value) return;
+		valueRef.value = valueRef.value.filter((v) => String(v) !== String(val));
+	};
+	const getItemProps = (itemProps) => {
+		return {
+			checked: itemProps.value != null ? isChecked(itemProps.value) : void 0,
+			onCheckedChange() {
+				if (itemProps.value != null) toggleValue(itemProps.value);
+			},
+			name: props.name,
+			disabled: toBooleanValue(disabled.value),
+			readOnly: props.readOnly,
+			invalid: invalid.value
+		};
+	};
+	const setValue = (value) => {
+		valueRef.value = value;
+	};
+	return computed(() => ({
+		isChecked,
+		value: valueRef.value,
+		name: props.name,
+		disabled: toBooleanValue(disabled.value),
+		readOnly: props.readOnly,
+		invalid: invalid.value,
+		addValue,
+		setValue,
+		toggleValue,
+		getItemProps
+	}));
+}
+
+//#endregion
+//#region src/components/checkbox/use-checkbox-group-context.tsx
+const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext("CheckboxGroupContext");
+
+//#endregion
+//#region src/components/checkbox/checkbox-group.vue?vue&type=script&setup=true&lang.ts
+var checkbox_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "checkbox-group",
+	props: /* @__PURE__ */ mergeDefaults({
+		defaultValue: {
+			type: Array,
+			required: false
+		},
+		modelValue: {
+			type: Array,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		invalid: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		disabled: void 0,
+		readOnly: void 0,
+		invalid: void 0
+	}),
+	emits: ["valueChange", "update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		CheckboxGroupContextProvider(useCheckboxGroup(__props, __emit));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps({ role: "group" }, { ...unref(checkboxAnatomy).build().group.attrs }, { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/checkbox/checkbox-group.vue
+var checkbox_group_default = checkbox_group_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/checkbox/checkbox-group-provider.vue?vue&type=script&setup=true&lang.ts
+var checkbox_group_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "checkbox-group-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		CheckboxGroupContextProvider(computed(() => props.value));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps({ role: "group" }, unref(checkboxAnatomy).build().group.attrs, { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/checkbox/checkbox-group-provider.vue
+var checkbox_group_provider_default = checkbox_group_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/checkbox/checkbox-hidden-input.vue?vue&type=script&setup=true&lang.ts
+var checkbox_hidden_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "checkbox-hidden-input",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const checkbox = useCheckboxContext();
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).input, mergeProps({ "aria-describedby": unref(field)?.ariaDescribedby }, unref(checkbox).getHiddenInputProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["aria-describedby", "as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/checkbox/checkbox-hidden-input.vue
+var checkbox_hidden_input_default = checkbox_hidden_input_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/checkbox/checkbox-indicator.vue?vue&type=script&setup=true&lang.ts
+var checkbox_indicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "checkbox-indicator",
+	props: {
+		indeterminate: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const checkbox = useCheckboxContext();
+		const isHidden = computed(() => props.indeterminate ? checkbox.value.indeterminate : checkbox.value.checked);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(checkbox).getIndicatorProps(), {
+				hidden: !isHidden.value,
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["hidden", "as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/checkbox/checkbox-indicator.vue
+var checkbox_indicator_default = checkbox_indicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/checkbox/checkbox-label.vue?vue&type=script&setup=true&lang.ts
+var checkbox_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "checkbox-label",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const checkbox = useCheckboxContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).span, mergeProps(unref(checkbox).getLabelProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/checkbox/checkbox-label.vue
+var checkbox_label_default = checkbox_label_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/checkbox/checkbox-root-provider.vue?vue&type=script&setup=true&lang.ts
+var checkbox_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "checkbox-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const checkbox = computed(() => props.value);
+		CheckboxProvider(checkbox);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).label, mergeProps(checkbox.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/checkbox/checkbox-root-provider.vue
+var checkbox_root_provider_default = checkbox_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/checkbox/use-checkbox.ts
+const useCheckbox = (props = {}, emit) => {
+	const id = useId();
+	const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
+	const locale = useLocaleContext(DEFAULT_LOCALE);
+	const field = useFieldContext();
+	const checkboxGroup = useCheckboxGroupContext();
+	const computedProps = computed(() => {
+		const propsValue = toValue(props);
+		return mergeProps$1(checkboxGroup?.value.getItemProps({ value: propsValue.value }) ?? {}, propsValue);
+	});
+	const context = computed(() => {
+		const localProps = toValue(computedProps);
+		return {
+			id,
+			ids: {
+				label: field?.value.ids.label,
+				hiddenInput: field?.value.ids.control
+			},
+			disabled: field?.value.disabled,
+			readOnly: field?.value.readOnly,
+			invalid: field?.value.invalid,
+			required: field?.value.required,
+			dir: locale.value.dir,
+			getRootNode: env?.value.getRootNode,
+			...cleanProps(localProps),
+			onCheckedChange(details) {
+				emit?.("checkedChange", details);
+				emit?.("update:checked", details.checked);
+				localProps.onCheckedChange?.(details);
+			}
+		};
+	});
+	const service = useMachine(checkbox.machine, context);
+	return computed(() => checkbox.connect(service, normalizeProps$1));
+};
+
+//#endregion
+//#region src/components/checkbox/checkbox-root.vue?vue&type=script&setup=true&lang.ts
+var checkbox_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "checkbox-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		checked: {
+			type: null,
+			required: false
+		},
+		defaultChecked: {
+			type: null,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		invalid: {
+			type: Boolean,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		value: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		checked: void 0,
+		defaultChecked: void 0,
+		disabled: void 0,
+		invalid: void 0,
+		readOnly: void 0,
+		required: void 0
+	}),
+	emits: ["checkedChange", "update:checked"],
+	setup(__props, { emit: __emit }) {
+		const checkbox = useCheckbox(__props, __emit);
+		CheckboxProvider(checkbox);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).label, mergeProps(unref(checkbox).getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/checkbox/checkbox-root.vue
+var checkbox_root_default = checkbox_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/checkbox/checkbox.ts
+var checkbox_exports = /* @__PURE__ */ __exportAll({
+	Context: () => checkbox_context_default,
+	Control: () => checkbox_control_default,
+	Group: () => checkbox_group_default,
+	GroupProvider: () => checkbox_group_provider_default,
+	HiddenInput: () => checkbox_hidden_input_default,
+	Indicator: () => checkbox_indicator_default,
+	Label: () => checkbox_label_default,
+	Root: () => checkbox_root_default,
+	RootProvider: () => checkbox_root_provider_default
+});
+
+//#endregion
+export { checkbox_exports as Checkbox, checkbox_context_default as CheckboxContext, checkbox_control_default as CheckboxControl, checkbox_group_default as CheckboxGroup, checkbox_group_provider_default as CheckboxGroupProvider, checkbox_hidden_input_default as CheckboxHiddenInput, checkbox_indicator_default as CheckboxIndicator, checkbox_label_default as CheckboxLabel, checkbox_root_default as CheckboxRoot, checkbox_root_provider_default as CheckboxRootProvider, checkboxAnatomy, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext };

package/dist/components/client-only/index.d.ts

@@ -0,0 +1,20 @@
+import * as vue258 from "vue";
+
+//#region src/components/client-only/client-only.vue.d.ts
+type ClientOnlyProps = {};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_1) => any;
+} & {
+  fallback?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: vue258.DefineComponent<{}, {}, {}, {}, {}, vue258.ComponentOptionsMixin, vue258.ComponentOptionsMixin, {}, string, vue258.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue258.ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as ClientOnly, type ClientOnlyProps };

package/dist/components/client-only/index.js

@@ -0,0 +1,22 @@
+import { createCommentVNode, defineComponent, onMounted, ref, renderSlot } from "vue";
+
+//#region src/components/client-only/client-only.vue?vue&type=script&setup=true&lang.ts
+var client_only_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "client-only",
+	setup(__props) {
+		const isClient = ref(false);
+		onMounted(() => {
+			isClient.value = true;
+		});
+		return (_ctx, _cache) => {
+			return isClient.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : renderSlot(_ctx.$slots, "fallback", { key: 1 });
+		};
+	}
+});
+
+//#endregion
+//#region src/components/client-only/client-only.vue
+var client_only_default = client_only_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { client_only_default as ClientOnly };