@wirekyt/vue 0.0.1 → 0.0.3

package/dist/factory-JL7MPjkk.cjs

@@ -0,0 +1,45 @@
+const require_utils = require("./utils-XrBZd2Yk.cjs");
+let vue = require("vue");
+//#region src/components/factory.ts
+const SELF_CLOSING_TAGS = "br, hr, img, input, area, textarea".split(", ");
+const isSelfClosingTag = (tag) => typeof tag === "string" && SELF_CLOSING_TAGS.includes(tag);
+const withAsChild = (component) => {
+	return (0, vue.defineComponent)({
+		name: "Polymorphic",
+		inheritAttrs: false,
+		props: { asChild: {
+			type: Boolean,
+			default: false
+		} },
+		setup(props, { attrs, slots }) {
+			if (!props.asChild) return () => (0, vue.h)(component, attrs, isSelfClosingTag(component) ? void 0 : slots.default?.());
+			return () => (0, vue.h)(require_utils.Dynamic, attrs, slots);
+		}
+	});
+};
+function jsxFactory() {
+	const cache = /* @__PURE__ */ new Map();
+	return new Proxy(withAsChild, {
+		apply(_target, _thisArg, argArray) {
+			return withAsChild(argArray[0]);
+		},
+		get(_, element) {
+			if (!cache.has(element)) cache.set(element, withAsChild(element));
+			return cache.get(element);
+		}
+	});
+}
+const wire = jsxFactory();
+//#endregion
+Object.defineProperty(exports, "jsxFactory", {
+	enumerable: true,
+	get: function() {
+		return jsxFactory;
+	}
+});
+Object.defineProperty(exports, "wire", {
+	enumerable: true,
+	get: function() {
+		return wire;
+	}
+});

package/dist/field-C3pLqz1S.js

@@ -0,0 +1,435 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { d as useForwardExpose, f as unrefElement, m as createContext } from "./utils-D95V66v9.js";
+import { d as useEnvironmentContext, u as DEFAULT_ENVIRONMENT } from "./providers-C3XQH-uu.js";
+import { n as wire } from "./factory-8Ao0DEy3.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 "@wirekyt/dom/dom-query";
+import { createAnatomy } from "@wirekyt/dom/anatomy";
+import { autoresizeTextarea } from "@wirekyt/dom/auto-resize";
+//#region src/components/field/use-context.ts
+const [FieldProvider, useFieldContext] = createContext("FieldContext");
+//#endregion
+//#region src/components/field/context.vue
+const _sfc_main$10 = /*@__PURE__*/ defineComponent({
+	__name: "context",
+	setup(__props) {
+		const field = useFieldContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(field))));
+		};
+	}
+});
+//#endregion
+//#region src/components/field/error-text.vue
+const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+	__name: "error-text",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return unref(field).invalid ? (openBlock(), createBlock(unref(wire).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/helper-text.vue
+const _sfc_main$8 = /*@__PURE__*/ defineComponent({
+	__name: "helper-text",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).span, mergeProps(unref(field).getHelperTextProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/input.vue
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+	__name: "input",
+	props: {
+		modelValue: {},
+		asChild: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const field = useFieldContext();
+		const emit = __emit;
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/anatomy.ts
+const fieldAnatomy = 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__*/ defineComponent({
+	__name: "item",
+	props: { value: {} },
+	setup(__props) {
+		const props = __props;
+		const parentField = useFieldContext();
+		FieldProvider(computed(() => {
+			const parent = 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 renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+//#region src/components/field/label.vue
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
+	__name: "label",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).label, mergeProps(unref(field).getLabelProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/required-indicator.vue
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+	__name: "required-indicator",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return unref(field).required ? (openBlock(), createBlock(unref(wire).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", {}, void 0, void 0, 1);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/root-provider.vue
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	__name: "root-provider",
+	props: {
+		value: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const field = computed(() => props.value);
+		FieldProvider(field);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).div, mergeProps(field.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#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 targetControlId = computed(() => {
+		const target = toValue(props).target;
+		return target ? `field::${id.value}::item::${target}` : void 0;
+	});
+	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: targetControlId.value ?? id.value
+		};
+	};
+	const errorMessageId = computed(() => state.hasErrorText && toValue(props).invalid ? errorTextId.value : void 0);
+	const getControlProps = () => {
+		const values = toValue(props);
+		return {
+			"aria-describedby": state.hasHelperText ? helperTextId.value : void 0,
+			"aria-errormessage": errorMessageId.value,
+			"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: 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__*/ defineComponent({
+	__name: "root",
+	props: /*@__PURE__*/ 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);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/select.vue
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "select",
+	props: {
+		modelValue: {},
+		asChild: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const field = useFieldContext();
+		const emit = __emit;
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/textarea.vue
+const _sfc_main = /*@__PURE__*/ 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 = 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(wire).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.ts
+var field_exports = /* @__PURE__ */ __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
+export { useField as a, _sfc_main$5 as c, _sfc_main$7 as d, _sfc_main$8 as f, useFieldContext as h, _sfc_main$2 as i, _sfc_main$6 as l, _sfc_main$10 as m, _sfc_main as n, _sfc_main$3 as o, _sfc_main$9 as p, _sfc_main$1 as r, _sfc_main$4 as s, field_exports as t, fieldAnatomy as u };