@wirekyt/vue 0.0.1 → 0.0.2

package/dist/field-DRz-v4rB.cjs

@@ -0,0 +1,524 @@
+const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
+const require_utils = require("./utils-XrBZd2Yk.cjs");
+const require_providers = require("./providers-5QhcwgSd.cjs");
+const require_factory = require("./factory-JL7MPjkk.cjs");
+let vue = require("vue");
+let _wirekyt_dom_dom_query = require("@wirekyt/dom/dom-query");
+let _wirekyt_dom_anatomy = require("@wirekyt/dom/anatomy");
+let _wirekyt_dom_auto_resize = require("@wirekyt/dom/auto-resize");
+//#region src/components/field/use-context.ts
+const [FieldProvider, useFieldContext] = require_utils.createContext("FieldContext");
+//#endregion
+//#region src/components/field/context.vue
+const _sfc_main$10 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "context",
+	setup(__props) {
+		const field = useFieldContext();
+		return (_ctx, _cache) => {
+			return (0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(field))));
+		};
+	}
+});
+//#endregion
+//#region src/components/field/error-text.vue
+const _sfc_main$9 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "error-text",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const field = useFieldContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(field).invalid ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).span, (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(field).getErrorTextProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/helper-text.vue
+const _sfc_main$8 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "helper-text",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const field = useFieldContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).span, (0, vue.mergeProps)((0, vue.unref)(field).getHelperTextProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/input.vue
+const _sfc_main$7 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "input",
+	props: {
+		modelValue: {},
+		asChild: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const field = useFieldContext();
+		const emit = __emit;
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).input, (0, vue.mergeProps)((0, vue.unref)(field)?.getInputProps(), {
+				"as-child": __props.asChild,
+				value: __props.modelValue,
+				onInput: _cache[0] || (_cache[0] = (event) => emit("update:modelValue", event.target.value))
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child", "value"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/anatomy.ts
+const fieldAnatomy = (0, _wirekyt_dom_anatomy.createAnatomy)("field").parts("root", "errorText", "helperText", "input", "label", "select", "textarea", "requiredIndicator");
+const parts = fieldAnatomy.build();
+//#endregion
+//#region src/components/field/item.vue
+const _sfc_main$6 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "item",
+	props: { value: {} },
+	setup(__props) {
+		const props = __props;
+		const parentField = useFieldContext();
+		FieldProvider((0, vue.computed)(() => {
+			const parent = (0, vue.toValue)(parentField);
+			if (!parent) throw new Error("Field.Item must be used within Field.Root");
+			const controlId = `field::${parent.ids.control}::item::${props.value}`;
+			const labelId = `${controlId}::label`;
+			const getControlProps = () => ({
+				...parent.getInputProps(),
+				id: controlId
+			});
+			return {
+				...parent,
+				ids: {
+					...parent.ids,
+					control: controlId,
+					label: labelId
+				},
+				getLabelProps: () => ({
+					...parent.getLabelProps(),
+					id: labelId,
+					htmlFor: controlId
+				}),
+				getInputProps: () => ({
+					...getControlProps(),
+					...parts.input.attrs
+				}),
+				getSelectProps: () => ({
+					...getControlProps(),
+					...parts.select.attrs
+				}),
+				getTextareaProps: () => ({
+					...getControlProps(),
+					...parts.textarea.attrs
+				})
+			};
+		}));
+		return (_ctx, _cache) => {
+			return (0, vue.renderSlot)(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+//#region src/components/field/label.vue
+const _sfc_main$5 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "label",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const field = useFieldContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).label, (0, vue.mergeProps)((0, vue.unref)(field).getLabelProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/required-indicator.vue
+const _sfc_main$4 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "required-indicator",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const field = useFieldContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(field).required ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).span, (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(field).getRequiredIndicatorProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = (0, vue.createTextVNode)("*", -1))])]),
+				_: 3
+			}, 16, ["as-child"])) : (0, vue.renderSlot)(_ctx.$slots, "fallback", {}, void 0, void 0, 1);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/root-provider.vue
+const _sfc_main$3 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "root-provider",
+	props: {
+		value: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const field = (0, vue.computed)(() => props.value);
+		FieldProvider(field);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)(field.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/use-field.ts
+const useField = (props = {}) => {
+	const env = require_providers.useEnvironmentContext(require_providers.DEFAULT_ENVIRONMENT);
+	const state = (0, vue.reactive)({
+		hasErrorText: false,
+		hasHelperText: false
+	});
+	const uid = (0, vue.useId)();
+	const id = (0, vue.computed)(() => (0, vue.toValue)(props).id ?? uid);
+	const rootRef = (0, vue.ref)(null);
+	const rootId = (0, vue.computed)(() => (0, vue.toValue)(props).ids?.control ?? `field::${id.value}`);
+	const errorTextId = (0, vue.computed)(() => (0, vue.toValue)(props).ids?.errorText ?? `field::${id.value}::error-text`);
+	const helperTextId = (0, vue.computed)(() => (0, vue.toValue)(props).ids?.helperText ?? `field::${id.value}::helper-text`);
+	const labelId = (0, vue.computed)(() => (0, vue.toValue)(props).ids?.label ?? `field::${id.value}::label`);
+	(0, vue.onMounted)(() => {
+		const rootNode = require_utils.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
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			observer.disconnect();
+		});
+	});
+	const getRootProps = () => {
+		const values = (0, vue.toValue)(props);
+		return {
+			...parts.root.attrs,
+			id: rootId.value,
+			role: "group",
+			"data-disabled": (0, _wirekyt_dom_dom_query.dataAttr)(values.disabled),
+			"data-invalid": (0, _wirekyt_dom_dom_query.dataAttr)(values.invalid),
+			"data-readonly": (0, _wirekyt_dom_dom_query.dataAttr)(values.readOnly)
+		};
+	};
+	const targetControlId = (0, vue.computed)(() => {
+		const target = (0, vue.toValue)(props).target;
+		return target ? `field::${id.value}::item::${target}` : void 0;
+	});
+	const getLabelProps = () => {
+		const values = (0, vue.toValue)(props);
+		return {
+			...parts.label.attrs,
+			id: labelId.value,
+			"data-disabled": (0, _wirekyt_dom_dom_query.dataAttr)(values.disabled),
+			"data-invalid": (0, _wirekyt_dom_dom_query.dataAttr)(values.invalid),
+			"data-readonly": (0, _wirekyt_dom_dom_query.dataAttr)(values.readOnly),
+			"data-required": (0, _wirekyt_dom_dom_query.dataAttr)(values.required),
+			htmlFor: targetControlId.value ?? id.value
+		};
+	};
+	const errorMessageId = (0, vue.computed)(() => state.hasErrorText && (0, vue.toValue)(props).invalid ? errorTextId.value : void 0);
+	const getControlProps = () => {
+		const values = (0, vue.toValue)(props);
+		return {
+			"aria-describedby": state.hasHelperText ? helperTextId.value : void 0,
+			"aria-errormessage": errorMessageId.value,
+			"aria-invalid": (0, _wirekyt_dom_dom_query.ariaAttr)(values.invalid),
+			"data-invalid": (0, _wirekyt_dom_dom_query.dataAttr)(values.invalid),
+			"data-required": (0, _wirekyt_dom_dom_query.dataAttr)(values.required),
+			"data-readonly": (0, _wirekyt_dom_dom_query.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 = (0, vue.toValue)(props);
+		return {
+			id: helperTextId.value,
+			...parts.helperText.attrs,
+			"data-disabled": (0, _wirekyt_dom_dom_query.dataAttr)(values.disabled)
+		};
+	};
+	const getErrorTextProps = () => ({
+		id: errorTextId.value,
+		...parts.errorText.attrs,
+		"aria-live": "polite"
+	});
+	const getRequiredIndicatorProps = () => ({
+		"aria-hidden": true,
+		...parts.requiredIndicator.attrs
+	});
+	return (0, vue.computed)(() => {
+		const values = (0, vue.toValue)(props);
+		return {
+			ariaDescribedby: state.hasHelperText ? helperTextId.value : 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/root.vue
+const _sfc_main$2 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "root",
+	props: /*@__PURE__*/ (0, vue.mergeDefaults)({
+		disabled: { type: Boolean },
+		id: {},
+		ids: {},
+		invalid: { type: Boolean },
+		readOnly: { type: Boolean },
+		required: { type: Boolean },
+		target: {},
+		asChild: { type: Boolean }
+	}, {
+		disabled: void 0,
+		invalid: void 0,
+		readOnly: void 0,
+		required: void 0
+	}),
+	setup(__props) {
+		const field = useField(__props);
+		FieldProvider(field);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(field).getRootProps(), {
+				ref: (0, vue.unref)(field).refs.rootRef,
+				"as-child": __props.asChild
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/select.vue
+const _sfc_main$1 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "select",
+	props: {
+		modelValue: {},
+		asChild: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const field = useFieldContext();
+		const emit = __emit;
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).select, (0, vue.mergeProps)((0, vue.unref)(field)?.getSelectProps(), {
+				value: __props.modelValue,
+				onChange: _cache[0] || (_cache[0] = (event) => emit("update:modelValue", event.target.value)),
+				"as-child": __props.asChild
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["value", "as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/textarea.vue
+const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "textarea",
+	props: {
+		modelValue: {},
+		autoresize: { type: Boolean },
+		asChild: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const field = useFieldContext();
+		const emit = __emit;
+		const textareaRef = (0, vue.ref)();
+		(0, vue.onMounted)(() => {
+			const node = require_utils.unrefElement(textareaRef);
+			if (!node || !props.autoresize) return;
+			const cleanup = (0, _wirekyt_dom_auto_resize.autoresizeTextarea)(node);
+			(0, vue.onBeforeUnmount)(() => cleanup?.());
+		});
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).textarea, (0, vue.mergeProps)({
+				ref_key: "textareaRef",
+				ref: textareaRef
+			}, (0, vue.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: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"value",
+				"style",
+				"as-child"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/field.ts
+var field_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Context: () => _sfc_main$10,
+	ErrorText: () => _sfc_main$9,
+	HelperText: () => _sfc_main$8,
+	Input: () => _sfc_main$7,
+	Item: () => _sfc_main$6,
+	Label: () => _sfc_main$5,
+	RequiredIndicator: () => _sfc_main$4,
+	Root: () => _sfc_main$2,
+	RootProvider: () => _sfc_main$3,
+	Select: () => _sfc_main$1,
+	Textarea: () => _sfc_main
+});
+//#endregion
+Object.defineProperty(exports, "_sfc_main", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main;
+	}
+});
+Object.defineProperty(exports, "_sfc_main$1", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main$1;
+	}
+});
+Object.defineProperty(exports, "_sfc_main$10", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main$10;
+	}
+});
+Object.defineProperty(exports, "_sfc_main$2", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main$2;
+	}
+});
+Object.defineProperty(exports, "_sfc_main$3", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main$3;
+	}
+});
+Object.defineProperty(exports, "_sfc_main$4", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main$4;
+	}
+});
+Object.defineProperty(exports, "_sfc_main$5", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main$5;
+	}
+});
+Object.defineProperty(exports, "_sfc_main$6", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main$6;
+	}
+});
+Object.defineProperty(exports, "_sfc_main$7", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main$7;
+	}
+});
+Object.defineProperty(exports, "_sfc_main$8", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main$8;
+	}
+});
+Object.defineProperty(exports, "_sfc_main$9", {
+	enumerable: true,
+	get: function() {
+		return _sfc_main$9;
+	}
+});
+Object.defineProperty(exports, "fieldAnatomy", {
+	enumerable: true,
+	get: function() {
+		return fieldAnatomy;
+	}
+});
+Object.defineProperty(exports, "field_exports", {
+	enumerable: true,
+	get: function() {
+		return field_exports;
+	}
+});
+Object.defineProperty(exports, "useField", {
+	enumerable: true,
+	get: function() {
+		return useField;
+	}
+});
+Object.defineProperty(exports, "useFieldContext", {
+	enumerable: true,
+	get: function() {
+		return useFieldContext;
+	}
+});

package/dist/field.cjs

@@ -0,0 +1,22 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_field = require("./field-DRz-v4rB.cjs");
+Object.defineProperty(exports, "Field", {
+	enumerable: true,
+	get: function() {
+		return require_field.field_exports;
+	}
+});
+exports.FieldContext = require_field._sfc_main$10;
+exports.FieldErrorText = require_field._sfc_main$9;
+exports.FieldHelperText = require_field._sfc_main$8;
+exports.FieldInput = require_field._sfc_main$7;
+exports.FieldItem = require_field._sfc_main$6;
+exports.FieldLabel = require_field._sfc_main$5;
+exports.FieldRequiredIndicator = require_field._sfc_main$4;
+exports.FieldRoot = require_field._sfc_main$2;
+exports.FieldRootProvider = require_field._sfc_main$3;
+exports.FieldSelect = require_field._sfc_main$1;
+exports.FieldTextarea = require_field._sfc_main;
+exports.fieldAnatomy = require_field.fieldAnatomy;
+exports.useField = require_field.useField;
+exports.useFieldContext = require_field.useFieldContext;