@atscript/vue-form 0.1.58

package/dist/as-union-BGvdxr3G.mjs

@@ -0,0 +1,351 @@
+import { _ as UNION_CONTEXT_KEY, a as CHANGE_HANDLER_KEY, g as TYPES_KEY, m as PATH_PREFIX_KEY, r as useFormContext } from "./use-form-context-bAj7UoSe.mjs";
+import { t as useAsDropdown } from "./use-as-dropdown-BMnEm6jF.mjs";
+import { t as useAsOptionalAddFlow } from "./use-as-optional-add-flow-CuXEir_i.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeProps, normalizeClass, openBlock, provide, ref, renderList, resolveDynamicComponent, toDisplayString, unref, vShow, withDirectives } from "vue";
+import { createFormData, createFormValueResolver, detectUnionVariant, isUnionField } from "@atscript/ui";
+//#region src/composables/use-as-union.ts
+/** Composable for union field state. Switching variants stashes per-index data so toggling back restores user's work instead of fresh defaults. */
+function useAsUnion(props) {
+	const unionPath = inject(PATH_PREFIX_KEY, computed(() => ""));
+	const { rootFormData, formContext } = useFormContext("useAsUnion");
+	const handleChange = inject(CHANGE_HANDLER_KEY, () => {});
+	const unionField = computed(() => props.field && isUnionField(props.field) ? props.field : void 0);
+	const hasMultipleVariants = computed(() => unionField.value !== void 0 && unionField.value.unionVariants.length > 1);
+	const localUnionIndex = ref(unionField.value ? detectUnionVariant(props.model?.value, unionField.value.unionVariants) : 0);
+	const currentVariant = computed(() => {
+		const variants = unionField.value?.unionVariants;
+		if (!variants) return void 0;
+		return variants[localUnionIndex.value] ?? variants[0];
+	});
+	const innerField = computed(() => {
+		const variant = currentVariant.value;
+		if (!variant) return void 0;
+		const fieldName = unionField.value?.name ?? "";
+		if (variant.def) return {
+			...variant.def.rootField,
+			path: "",
+			name: fieldName
+		};
+		if (variant.itemField) return {
+			...variant.itemField,
+			path: "",
+			name: ""
+		};
+	});
+	const variantDataStash = /* @__PURE__ */ new Map();
+	function changeVariant(newIndex) {
+		if (props.model?.value != null) variantDataStash.set(localUnionIndex.value, props.model.value);
+		localUnionIndex.value = newIndex;
+		const variant = unionField.value?.unionVariants[newIndex];
+		if (variant && props.model) {
+			const stashed = variantDataStash.get(newIndex);
+			props.model.value = stashed !== void 0 ? stashed : createFormData(variant.type, createFormValueResolver(rootFormData().value, formContext.value)).value;
+		}
+		handleChange("union-switch", unionPath.value, props.model?.value);
+	}
+	return {
+		unionField,
+		hasMultipleVariants,
+		localUnionIndex,
+		innerField,
+		changeVariant,
+		optionalEnabled: computed(() => props.model?.value != null)
+	};
+}
+//#endregion
+//#region src/composables/use-as-type-map.ts
+const EMPTY_TYPES = computed(() => ({}));
+/**
+* Reactive read-only access to the type-to-component map provided by the
+* nearest `<AsForm>`. Returns an empty map when called outside a form so
+* call sites do not need a null-check.
+*/
+function useAsTypeMap() {
+	return { types: inject(TYPES_KEY, EMPTY_TYPES) };
+}
+//#endregion
+//#region src/components/defaults/as-union.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = {
+	key: 0,
+	class: "as-dropdown-menu"
+};
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = {
+	key: 2,
+	class: "as-collapsible-description"
+};
+//#endregion
+//#region src/components/defaults/as-union.vue
+var as_union_default = /* @__PURE__ */ defineComponent({
+	__name: "as-union",
+	props: {
+		onBlur: {
+			type: Function,
+			required: true
+		},
+		error: {
+			type: String,
+			required: false
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		description: {
+			type: String,
+			required: false
+		},
+		hint: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		prefixIcon: {
+			type: String,
+			required: false
+		},
+		suffixIcon: {
+			type: String,
+			required: false
+		},
+		class: {
+			type: [Object, String],
+			required: false
+		},
+		style: {
+			type: [Object, String],
+			required: false
+		},
+		optional: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		onToggleOptional: {
+			type: Function,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		formAction: {
+			type: Object,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		field: {
+			type: Object,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		level: {
+			type: Number,
+			required: false
+		},
+		onRemove: {
+			type: Function,
+			required: false
+		},
+		canRemove: {
+			type: Boolean,
+			required: false
+		},
+		removeLabel: {
+			type: String,
+			required: false
+		},
+		arrayIndex: {
+			type: Number,
+			required: false
+		},
+		path: {
+			type: String,
+			required: true
+		},
+		valueHelp: {
+			type: Object,
+			required: false
+		},
+		singularLabel: {
+			type: String,
+			required: false
+		},
+		inputId: {
+			type: String,
+			required: true
+		},
+		errorId: {
+			type: String,
+			required: true
+		},
+		descId: {
+			type: String,
+			required: true
+		},
+		ariaDescribedBy: {
+			type: String,
+			required: false
+		},
+		currencyCode: {
+			type: String,
+			required: false
+		},
+		unitCode: {
+			type: String,
+			required: false
+		},
+		precisionScale: {
+			type: Number,
+			required: false
+		},
+		prefix: {
+			type: String,
+			required: false
+		},
+		suffix: {
+			type: String,
+			required: false
+		},
+		scale: {
+			type: Number,
+			required: false
+		},
+		hasAdornment: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { unionField, hasMultipleVariants, localUnionIndex, innerField, changeVariant, optionalEnabled } = useAsUnion(props);
+		const { types } = useAsTypeMap();
+		const unionCtx = unionField.value ? {
+			variants: unionField.value.unionVariants,
+			currentIndex: localUnionIndex,
+			changeVariant
+		} : void 0;
+		if (unionCtx) provide(UNION_CONTEXT_KEY, unionCtx);
+		const variantComponent = computed(() => innerField.value ? types.value?.[innerField.value.type] : void 0);
+		const fieldLabel = computed(() => props.title ?? props.label ?? props.name ?? "");
+		const rootRef = ref(null);
+		const rootEl = () => {
+			const r = rootRef.value;
+			if (!r) return null;
+			if (typeof r.querySelectorAll === "function") return r;
+			return r.$el ?? null;
+		};
+		const pickerDropdownRef = ref(null);
+		const { isOpen: pickerOpen, toggle: togglePicker, select: selectPicker } = useAsDropdown(pickerDropdownRef);
+		const { runAndFocusNew } = useAsOptionalAddFlow({ path: () => props.path });
+		function pickAndFocus(vi) {
+			runAndFocusNew(rootEl, () => changeVariant(vi), 2);
+		}
+		function handleEmptyClick() {
+			if (hasMultipleVariants.value) {
+				togglePicker();
+				return;
+			}
+			pickAndFocus(0);
+		}
+		function handleVariantPick(vi) {
+			selectPicker(() => pickAndFocus(vi));
+		}
+		return (_ctx, _cache) => {
+			return __props.optional && !unref(optionalEnabled) ? withDirectives((openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(["as-object-empty as-grid-item", _ctx.$props.class])
+			}, [unref(hasMultipleVariants) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "pickerDropdownRef",
+				ref: pickerDropdownRef,
+				class: "as-dropdown"
+			}, [createElementVNode("button", {
+				type: "button",
+				class: "as-object-empty-add",
+				onClick: handleEmptyClick
+			}, [_cache[0] || (_cache[0] = createElementVNode("span", {
+				class: "i-as-field-fill as-object-empty-add-icon",
+				"aria-hidden": "true"
+			}, null, -1)), createTextVNode(" Add " + toDisplayString(fieldLabel.value), 1)]), unref(pickerOpen) ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(unionField).unionVariants, (v, vi) => {
+				return openBlock(), createElementBlock("button", {
+					key: vi,
+					type: "button",
+					class: "as-dropdown-item",
+					onClick: ($event) => handleVariantPick(vi)
+				}, toDisplayString(v.label), 9, _hoisted_2);
+			}), 128))])) : createCommentVNode("v-if", true)], 512)) : (openBlock(), createElementBlock("button", {
+				key: 1,
+				type: "button",
+				class: "as-object-empty-add",
+				onClick: handleEmptyClick
+			}, [_cache[1] || (_cache[1] = createElementVNode("span", {
+				class: "i-as-field-fill as-object-empty-add-icon",
+				"aria-hidden": "true"
+			}, null, -1)), createTextVNode(" Add " + toDisplayString(fieldLabel.value), 1)])), __props.description ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.description), 1)) : createCommentVNode("v-if", true)], 2)), [[vShow, !__props.hidden]]) : variantComponent.value && unref(innerField) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" Active: dispatch to variant's component, forwarding the field's @meta.label\n       as title so the variant's chrome shows it (innerField.type overrides \"union\"). "), (openBlock(), createBlock(resolveDynamicComponent(variantComponent.value), mergeProps({
+				ref_key: "rootRef",
+				ref: rootRef
+			}, _ctx.$props, {
+				field: unref(innerField),
+				type: unref(innerField).type,
+				title: fieldLabel.value,
+				key: unref(localUnionIndex)
+			}), null, 16, [
+				"field",
+				"type",
+				"title"
+			]))], 2112)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { useAsTypeMap as n, useAsUnion as r, as_union_default as t };

package/dist/as-union-C0btoJn3.cjs

@@ -0,0 +1,368 @@
+const require_use_form_context = require("./use-form-context-Dwr8Ai1v.cjs");
+const require_use_as_dropdown = require("./use-as-dropdown-C-Qy7Vt0.cjs");
+const require_use_as_optional_add_flow = require("./use-as-optional-add-flow-STOaQWo9.cjs");
+let vue = require("vue");
+let _atscript_ui = require("@atscript/ui");
+//#region src/composables/use-as-union.ts
+/** Composable for union field state. Switching variants stashes per-index data so toggling back restores user's work instead of fresh defaults. */
+function useAsUnion(props) {
+	const unionPath = (0, vue.inject)(require_use_form_context.PATH_PREFIX_KEY, (0, vue.computed)(() => ""));
+	const { rootFormData, formContext } = require_use_form_context.useFormContext("useAsUnion");
+	const handleChange = (0, vue.inject)(require_use_form_context.CHANGE_HANDLER_KEY, () => {});
+	const unionField = (0, vue.computed)(() => props.field && (0, _atscript_ui.isUnionField)(props.field) ? props.field : void 0);
+	const hasMultipleVariants = (0, vue.computed)(() => unionField.value !== void 0 && unionField.value.unionVariants.length > 1);
+	const localUnionIndex = (0, vue.ref)(unionField.value ? (0, _atscript_ui.detectUnionVariant)(props.model?.value, unionField.value.unionVariants) : 0);
+	const currentVariant = (0, vue.computed)(() => {
+		const variants = unionField.value?.unionVariants;
+		if (!variants) return void 0;
+		return variants[localUnionIndex.value] ?? variants[0];
+	});
+	const innerField = (0, vue.computed)(() => {
+		const variant = currentVariant.value;
+		if (!variant) return void 0;
+		const fieldName = unionField.value?.name ?? "";
+		if (variant.def) return {
+			...variant.def.rootField,
+			path: "",
+			name: fieldName
+		};
+		if (variant.itemField) return {
+			...variant.itemField,
+			path: "",
+			name: ""
+		};
+	});
+	const variantDataStash = /* @__PURE__ */ new Map();
+	function changeVariant(newIndex) {
+		if (props.model?.value != null) variantDataStash.set(localUnionIndex.value, props.model.value);
+		localUnionIndex.value = newIndex;
+		const variant = unionField.value?.unionVariants[newIndex];
+		if (variant && props.model) {
+			const stashed = variantDataStash.get(newIndex);
+			props.model.value = stashed !== void 0 ? stashed : (0, _atscript_ui.createFormData)(variant.type, (0, _atscript_ui.createFormValueResolver)(rootFormData().value, formContext.value)).value;
+		}
+		handleChange("union-switch", unionPath.value, props.model?.value);
+	}
+	return {
+		unionField,
+		hasMultipleVariants,
+		localUnionIndex,
+		innerField,
+		changeVariant,
+		optionalEnabled: (0, vue.computed)(() => props.model?.value != null)
+	};
+}
+//#endregion
+//#region src/composables/use-as-type-map.ts
+const EMPTY_TYPES = (0, vue.computed)(() => ({}));
+/**
+* Reactive read-only access to the type-to-component map provided by the
+* nearest `<AsForm>`. Returns an empty map when called outside a form so
+* call sites do not need a null-check.
+*/
+function useAsTypeMap() {
+	return { types: (0, vue.inject)(require_use_form_context.TYPES_KEY, EMPTY_TYPES) };
+}
+//#endregion
+//#region src/components/defaults/as-union.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = {
+	key: 0,
+	class: "as-dropdown-menu"
+};
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = {
+	key: 2,
+	class: "as-collapsible-description"
+};
+//#endregion
+//#region src/components/defaults/as-union.vue
+var as_union_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-union",
+	props: {
+		onBlur: {
+			type: Function,
+			required: true
+		},
+		error: {
+			type: String,
+			required: false
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		description: {
+			type: String,
+			required: false
+		},
+		hint: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		prefixIcon: {
+			type: String,
+			required: false
+		},
+		suffixIcon: {
+			type: String,
+			required: false
+		},
+		class: {
+			type: [Object, String],
+			required: false
+		},
+		style: {
+			type: [Object, String],
+			required: false
+		},
+		optional: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		onToggleOptional: {
+			type: Function,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		formAction: {
+			type: Object,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		field: {
+			type: Object,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		level: {
+			type: Number,
+			required: false
+		},
+		onRemove: {
+			type: Function,
+			required: false
+		},
+		canRemove: {
+			type: Boolean,
+			required: false
+		},
+		removeLabel: {
+			type: String,
+			required: false
+		},
+		arrayIndex: {
+			type: Number,
+			required: false
+		},
+		path: {
+			type: String,
+			required: true
+		},
+		valueHelp: {
+			type: Object,
+			required: false
+		},
+		singularLabel: {
+			type: String,
+			required: false
+		},
+		inputId: {
+			type: String,
+			required: true
+		},
+		errorId: {
+			type: String,
+			required: true
+		},
+		descId: {
+			type: String,
+			required: true
+		},
+		ariaDescribedBy: {
+			type: String,
+			required: false
+		},
+		currencyCode: {
+			type: String,
+			required: false
+		},
+		unitCode: {
+			type: String,
+			required: false
+		},
+		precisionScale: {
+			type: Number,
+			required: false
+		},
+		prefix: {
+			type: String,
+			required: false
+		},
+		suffix: {
+			type: String,
+			required: false
+		},
+		scale: {
+			type: Number,
+			required: false
+		},
+		hasAdornment: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { unionField, hasMultipleVariants, localUnionIndex, innerField, changeVariant, optionalEnabled } = useAsUnion(props);
+		const { types } = useAsTypeMap();
+		const unionCtx = unionField.value ? {
+			variants: unionField.value.unionVariants,
+			currentIndex: localUnionIndex,
+			changeVariant
+		} : void 0;
+		if (unionCtx) (0, vue.provide)(require_use_form_context.UNION_CONTEXT_KEY, unionCtx);
+		const variantComponent = (0, vue.computed)(() => innerField.value ? types.value?.[innerField.value.type] : void 0);
+		const fieldLabel = (0, vue.computed)(() => props.title ?? props.label ?? props.name ?? "");
+		const rootRef = (0, vue.ref)(null);
+		const rootEl = () => {
+			const r = rootRef.value;
+			if (!r) return null;
+			if (typeof r.querySelectorAll === "function") return r;
+			return r.$el ?? null;
+		};
+		const pickerDropdownRef = (0, vue.ref)(null);
+		const { isOpen: pickerOpen, toggle: togglePicker, select: selectPicker } = require_use_as_dropdown.useAsDropdown(pickerDropdownRef);
+		const { runAndFocusNew } = require_use_as_optional_add_flow.useAsOptionalAddFlow({ path: () => props.path });
+		function pickAndFocus(vi) {
+			runAndFocusNew(rootEl, () => changeVariant(vi), 2);
+		}
+		function handleEmptyClick() {
+			if (hasMultipleVariants.value) {
+				togglePicker();
+				return;
+			}
+			pickAndFocus(0);
+		}
+		function handleVariantPick(vi) {
+			selectPicker(() => pickAndFocus(vi));
+		}
+		return (_ctx, _cache) => {
+			return __props.optional && !(0, vue.unref)(optionalEnabled) ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: (0, vue.normalizeClass)(["as-object-empty as-grid-item", _ctx.$props.class])
+			}, [(0, vue.unref)(hasMultipleVariants) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				ref_key: "pickerDropdownRef",
+				ref: pickerDropdownRef,
+				class: "as-dropdown"
+			}, [(0, vue.createElementVNode)("button", {
+				type: "button",
+				class: "as-object-empty-add",
+				onClick: handleEmptyClick
+			}, [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("span", {
+				class: "i-as-field-fill as-object-empty-add-icon",
+				"aria-hidden": "true"
+			}, null, -1)), (0, vue.createTextVNode)(" Add " + (0, vue.toDisplayString)(fieldLabel.value), 1)]), (0, vue.unref)(pickerOpen) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(unionField).unionVariants, (v, vi) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					key: vi,
+					type: "button",
+					class: "as-dropdown-item",
+					onClick: ($event) => handleVariantPick(vi)
+				}, (0, vue.toDisplayString)(v.label), 9, _hoisted_2);
+			}), 128))])) : (0, vue.createCommentVNode)("v-if", true)], 512)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+				key: 1,
+				type: "button",
+				class: "as-object-empty-add",
+				onClick: handleEmptyClick
+			}, [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("span", {
+				class: "i-as-field-fill as-object-empty-add-icon",
+				"aria-hidden": "true"
+			}, null, -1)), (0, vue.createTextVNode)(" Add " + (0, vue.toDisplayString)(fieldLabel.value), 1)])), __props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_3, (0, vue.toDisplayString)(__props.description), 1)) : (0, vue.createCommentVNode)("v-if", true)], 2)), [[vue.vShow, !__props.hidden]]) : variantComponent.value && (0, vue.unref)(innerField) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createCommentVNode)(" Active: dispatch to variant's component, forwarding the field's @meta.label\n       as title so the variant's chrome shows it (innerField.type overrides \"union\"). "), ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(variantComponent.value), (0, vue.mergeProps)({
+				ref_key: "rootRef",
+				ref: rootRef
+			}, _ctx.$props, {
+				field: (0, vue.unref)(innerField),
+				type: (0, vue.unref)(innerField).type,
+				title: fieldLabel.value,
+				key: (0, vue.unref)(localUnionIndex)
+			}), null, 16, [
+				"field",
+				"type",
+				"title"
+			]))], 2112)) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "as_union_default", {
+	enumerable: true,
+	get: function() {
+		return as_union_default;
+	}
+});
+Object.defineProperty(exports, "useAsTypeMap", {
+	enumerable: true,
+	get: function() {
+		return useAsTypeMap;
+	}
+});
+Object.defineProperty(exports, "useAsUnion", {
+	enumerable: true,
+	get: function() {
+		return useAsUnion;
+	}
+});