@sprawlify/vue 0.0.65 → 0.0.67

package/dist/field-DnHnX3Tf.js

@@ -0,0 +1,501 @@
+import { t as __exportAll } from "./chunk-BN_g-Awi.js";
+import { c as useEnvironmentContext, s as DEFAULT_ENVIRONMENT } from "./providers-B2CNPFg1.js";
+import { n as unrefElement, r as createContext, t as useForwardExpose } from "./use-forward-expose-4p5AGAI3.js";
+import { t as sprawlify } from "./factory-BH3WrWd2.js";
+import { computed, createBlock, createCommentVNode, createTextVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, onBeforeUnmount, onMounted, openBlock, reactive, ref, renderSlot, toValue, unref, useId, withCtx } from "vue";
+import { ariaAttr, dataAttr } from "@sprawlify/primitives/dom-query";
+import { createAnatomy } from "@sprawlify/primitives/anatomy";
+import { autoresizeTextarea } from "@sprawlify/primitives/auto-resize";
+
+//#region src/components/field/use-field-context.ts
+const [FieldProvider, useFieldContext] = createContext("FieldContext");
+
+//#endregion
+//#region src/components/field/field-context.vue?vue&type=script&setup=true&lang.ts
+var field_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-context",
+	setup(__props) {
+		const field = useFieldContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(field))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/field/field-context.vue
+var field_context_default = field_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/field/field-error-text.vue?vue&type=script&setup=true&lang.ts
+var field_error_text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-error-text",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return unref(field).invalid ? (openBlock(), createBlock(unref(sprawlify).span, mergeProps({ key: 0 }, unref(field).getErrorTextProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/field/field-error-text.vue
+var field_error_text_default = field_error_text_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/field/field-helper-text.vue?vue&type=script&setup=true&lang.ts
+var field_helper_text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-helper-text",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).span, mergeProps(unref(field).getHelperTextProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/field/field-helper-text.vue
+var field_helper_text_default = field_helper_text_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/field/field-input.vue?vue&type=script&setup=true&lang.ts
+var field_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-input",
+	props: {
+		modelValue: {
+			type: null,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const field = useFieldContext();
+		const emit = __emit;
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).input, mergeProps(unref(field).getInputProps(), {
+				"as-child": __props.asChild,
+				value: __props.modelValue,
+				onInput: _cache[0] || (_cache[0] = (event) => emit("update:modelValue", event.target.value))
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child", "value"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/field/field-input.vue
+var field_input_default = field_input_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/field/field-label.vue?vue&type=script&setup=true&lang.ts
+var field_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-label",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).label, mergeProps(unref(field).getLabelProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/field/field-label.vue
+var field_label_default = field_label_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/field/field-required-indicator.vue?vue&type=script&setup=true&lang.ts
+var field_required_indicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-required-indicator",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return unref(field).required ? (openBlock(), createBlock(unref(sprawlify).span, mergeProps({ key: 0 }, unref(field).getRequiredIndicatorProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("*", -1))])]),
+				_: 3
+			}, 16, ["as-child"])) : renderSlot(_ctx.$slots, "fallback", { key: 1 });
+		};
+	}
+});
+
+//#endregion
+//#region src/components/field/field-required-indicator.vue
+var field_required_indicator_default = field_required_indicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/field/field-root-provider.vue?vue&type=script&setup=true&lang.ts
+var field_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const field = computed(() => props.value);
+		FieldProvider(field);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(field.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/field/field-root-provider.vue
+var field_root_provider_default = field_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/field/field-anatomy.ts
+const fieldAnatomy = createAnatomy("field").parts("root", "errorText", "helperText", "input", "label", "select", "textarea", "requiredIndicator");
+const parts = fieldAnatomy.build();
+
+//#endregion
+//#region src/components/field/use-field.ts
+const useField = (props = {}) => {
+	const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
+	const state = reactive({
+		hasErrorText: false,
+		hasHelperText: false
+	});
+	const uid = useId();
+	const id = computed(() => toValue(props).id ?? uid);
+	const rootRef = ref(null);
+	const rootId = computed(() => toValue(props).ids?.control ?? `field::${id.value}`);
+	const errorTextId = computed(() => toValue(props).ids?.errorText ?? `field::${id.value}::error-text`);
+	const helperTextId = computed(() => toValue(props).ids?.helperText ?? `field::${id.value}::helper-text`);
+	const labelId = computed(() => toValue(props).ids?.label ?? `field::${id.value}::label`);
+	onMounted(() => {
+		const rootNode = unrefElement(rootRef);
+		if (!rootNode) return;
+		const checkTextElements = () => {
+			const docOrShadowRoot = env.value.getRootNode();
+			state.hasErrorText = !!docOrShadowRoot.getElementById(errorTextId.value);
+			state.hasHelperText = !!docOrShadowRoot.getElementById(helperTextId.value);
+		};
+		checkTextElements();
+		const observer = new (env.value.getWindow()).MutationObserver(checkTextElements);
+		observer.observe(rootNode, {
+			childList: true,
+			subtree: true
+		});
+		onBeforeUnmount(() => {
+			observer.disconnect();
+		});
+	});
+	const getRootProps = () => {
+		const values = toValue(props);
+		return {
+			...parts.root.attrs,
+			id: rootId.value,
+			role: "group",
+			"data-disabled": dataAttr(values.disabled),
+			"data-invalid": dataAttr(values.invalid),
+			"data-readonly": dataAttr(values.readOnly)
+		};
+	};
+	const getLabelProps = () => {
+		const values = toValue(props);
+		return {
+			...parts.label.attrs,
+			id: labelId.value,
+			"data-disabled": dataAttr(values.disabled),
+			"data-invalid": dataAttr(values.invalid),
+			"data-readonly": dataAttr(values.readOnly),
+			"data-required": dataAttr(values.required),
+			htmlFor: id.value
+		};
+	};
+	const labelIds = computed(() => {
+		const values = toValue(props);
+		const ids = [];
+		if (state.hasErrorText && values.invalid) ids.push(errorTextId.value);
+		if (state.hasHelperText) ids.push(helperTextId.value);
+		return ids;
+	});
+	const getControlProps = () => {
+		const values = toValue(props);
+		return {
+			"aria-describedby": labelIds.value.join(" ") || void 0,
+			"aria-invalid": ariaAttr(values.invalid),
+			"data-invalid": dataAttr(values.invalid),
+			"data-required": dataAttr(values.required),
+			"data-readonly": dataAttr(values.readOnly),
+			id: id.value,
+			required: values.required,
+			disabled: values.disabled,
+			readOnly: values.readOnly
+		};
+	};
+	const getInputProps = () => ({
+		...getControlProps(),
+		...parts.input.attrs
+	});
+	const getTextareaProps = () => ({
+		...getControlProps(),
+		...parts.textarea.attrs
+	});
+	const getSelectProps = () => ({
+		...getControlProps(),
+		...parts.select.attrs
+	});
+	const getHelperTextProps = () => {
+		const values = toValue(props);
+		return {
+			id: helperTextId.value,
+			...parts.helperText.attrs,
+			"data-disabled": dataAttr(values.disabled)
+		};
+	};
+	const getErrorTextProps = () => ({
+		id: errorTextId.value,
+		...parts.errorText.attrs,
+		"aria-live": "polite"
+	});
+	const getRequiredIndicatorProps = () => ({
+		"aria-hidden": true,
+		...parts.requiredIndicator.attrs
+	});
+	return computed(() => {
+		const values = toValue(props);
+		return {
+			ariaDescribedby: labelIds.value.join(" ") || void 0,
+			ids: {
+				control: id.value,
+				label: labelId.value,
+				errorText: errorTextId.value,
+				helperText: helperTextId.value
+			},
+			refs: { rootRef },
+			disabled: values.disabled,
+			invalid: values.invalid,
+			readOnly: values.readOnly,
+			required: values.required,
+			getLabelProps,
+			getRootProps,
+			getInputProps,
+			getTextareaProps,
+			getSelectProps,
+			getHelperTextProps,
+			getErrorTextProps,
+			getRequiredIndicatorProps
+		};
+	});
+};
+
+//#endregion
+//#region src/components/field/field-root.vue?vue&type=script&setup=true&lang.ts
+var field_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		invalid: {
+			type: Boolean,
+			required: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		disabled: void 0,
+		invalid: void 0,
+		readOnly: void 0,
+		required: void 0
+	}),
+	setup(__props) {
+		const field = useField(__props);
+		FieldProvider(field);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(field).getRootProps(), {
+				ref: unref(field).refs.rootRef,
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/field/field-root.vue
+var field_root_default = field_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/field/field-select.vue?vue&type=script&setup=true&lang.ts
+var field_select_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-select",
+	props: {
+		modelValue: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const field = useFieldContext();
+		const emit = __emit;
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).select, mergeProps(unref(field).getSelectProps(), {
+				value: __props.modelValue,
+				onChange: _cache[0] || (_cache[0] = (event) => emit("update:modelValue", event.target.value)),
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["value", "as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/field/field-select.vue
+var field_select_default = field_select_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/field/field-textarea.vue?vue&type=script&setup=true&lang.ts
+var field_textarea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-textarea",
+	props: {
+		modelValue: {
+			type: null,
+			required: false
+		},
+		autoresize: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const field = useFieldContext();
+		const emit = __emit;
+		const textareaRef = ref();
+		onMounted(() => {
+			const node = unrefElement(textareaRef);
+			if (!node || !props.autoresize) return;
+			const cleanup = autoresizeTextarea(node);
+			onBeforeUnmount(() => cleanup?.());
+		});
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).textarea, mergeProps({
+				ref_key: "textareaRef",
+				ref: textareaRef
+			}, unref(field).getTextareaProps(), {
+				value: __props.modelValue,
+				onInput: _cache[0] || (_cache[0] = (event) => emit("update:modelValue", event.target.value)),
+				style: props.autoresize ? {
+					resize: "none",
+					overflow: "hidden"
+				} : void 0,
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"value",
+				"style",
+				"as-child"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/field/field-textarea.vue
+var field_textarea_default = field_textarea_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/field/field.ts
+var field_exports = /* @__PURE__ */ __exportAll({
+	Context: () => field_context_default,
+	ErrorText: () => field_error_text_default,
+	HelperText: () => field_helper_text_default,
+	Input: () => field_input_default,
+	Label: () => field_label_default,
+	RequiredIndicator: () => field_required_indicator_default,
+	Root: () => field_root_default,
+	RootProvider: () => field_root_provider_default,
+	Select: () => field_select_default,
+	Textarea: () => field_textarea_default
+});
+
+//#endregion
+export { useField as a, field_required_indicator_default as c, field_helper_text_default as d, field_error_text_default as f, field_root_default as i, field_label_default as l, useFieldContext as m, field_textarea_default as n, fieldAnatomy as o, field_context_default as p, field_select_default as r, field_root_provider_default as s, field_exports as t, field_input_default as u };