@atscript/vue-form 0.1.58

package/dist/as-array-Bn27x9cq.cjs

@@ -0,0 +1,466 @@
+const require_use_form_context = require("./use-form-context-Dwr8Ai1v.cjs");
+const require_as_field = require("./as-field-wLYoaZnT.cjs");
+const require_use_as_dropdown = require("./use-as-dropdown-C-Qy7Vt0.cjs");
+const require_as_variant_picker = require("./as-variant-picker-DObQZHmm.cjs");
+const require_use_as_optional_add_flow = require("./use-as-optional-add-flow-STOaQWo9.cjs");
+const require_as_collapsible = require("./as-collapsible-CqxeJut7.cjs");
+const require_as_array_clear_btn = require("./as-array-clear-btn-DAGervXL.cjs");
+let vue = require("vue");
+let _atscript_ui = require("@atscript/ui");
+//#region src/composables/use-as-array.ts
+/**
+* Composable for managing array field state.
+*
+* Manages stable keys, add/remove with constraints, and item field resolution.
+* Union item types are handled transparently — AsUnion manages variant state locally.
+* Used by the default `AsArray` component and available for custom array components.
+*/
+function useAsArray(field, disabled) {
+	const { rootFormData, formContext, pathPrefix, getByPath, setByPath } = require_use_form_context.useFormContext("useAsArray");
+	const handleChange = (0, vue.inject)(require_use_form_context.CHANGE_HANDLER_KEY, () => {});
+	const arrayValue = (0, vue.computed)(() => {
+		const v = getByPath(pathPrefix.value);
+		return Array.isArray(v) ? v : [];
+	});
+	const isOptional = field.prop.optional ?? false;
+	const isEmpty = (0, vue.computed)(() => arrayValue.value.length === 0);
+	let keyCounter = 0;
+	const itemKeys = (0, vue.reactive)([]);
+	function generateKey() {
+		return `as-item-${keyCounter++}`;
+	}
+	function syncKeys() {
+		const newLen = arrayValue.value.length;
+		while (itemKeys.length < newLen) itemKeys.push(generateKey());
+		if (itemKeys.length > newLen) {
+			for (const key of itemFieldCache.keys()) if (key >= newLen) itemFieldCache.delete(key);
+			itemKeys.length = newLen;
+		}
+	}
+	syncKeys();
+	(0, vue.watch)(() => arrayValue.value.length, () => syncKeys());
+	const isUnion = (0, _atscript_ui.isUnionField)(field.itemField);
+	const unionVariants = isUnion ? field.itemField.unionVariants : [];
+	const itemFieldCache = /* @__PURE__ */ new Map();
+	function getItemField(index, name = "") {
+		const cached = itemFieldCache.get(index);
+		if (cached && cached.name === name) return cached;
+		const fresh = {
+			...field.itemField,
+			path: String(index),
+			name
+		};
+		itemFieldCache.set(index, fresh);
+		return fresh;
+	}
+	const minLength = (0, _atscript_ui.getFieldMeta)(field.prop, "expect.minLength")?.length ?? 0;
+	const maxLength = (0, _atscript_ui.getFieldMeta)(field.prop, "expect.maxLength")?.length ?? Infinity;
+	const canAdd = (0, vue.computed)(() => !disabled?.value && arrayValue.value.length < maxLength);
+	const canRemove = (0, vue.computed)(() => !disabled?.value && arrayValue.value.length > minLength);
+	function ensureArray() {
+		let arr = getByPath(pathPrefix.value);
+		if (!Array.isArray(arr)) {
+			arr = [];
+			setByPath(pathPrefix.value, arr);
+		}
+		return arr;
+	}
+	function addItem(variantIndex = 0) {
+		if (!canAdd.value) return;
+		const resolver = (0, _atscript_ui.createFormValueResolver)(rootFormData().value, formContext.value);
+		let newItem;
+		if (isUnion) {
+			const variant = unionVariants[variantIndex];
+			if (!variant) return;
+			newItem = (0, _atscript_ui.createFormData)(variant.type, resolver).value;
+		} else newItem = (0, _atscript_ui.createFormData)(field.itemType, resolver).value;
+		ensureArray().push(newItem);
+		itemKeys.push(generateKey());
+		handleChange("array-add", pathPrefix.value, arrayValue.value);
+	}
+	function removeItem(index) {
+		if (!canRemove.value) return;
+		ensureArray().splice(index, 1);
+		itemKeys.splice(index, 1);
+		for (const key of itemFieldCache.keys()) if (key >= index) itemFieldCache.delete(key);
+		handleChange("array-remove", pathPrefix.value, arrayValue.value);
+	}
+	function clear() {
+		if (isOptional) setByPath(pathPrefix.value, void 0);
+		else {
+			const arr = getByPath(pathPrefix.value);
+			if (Array.isArray(arr)) arr.length = 0;
+		}
+		itemFieldCache.clear();
+		handleChange("array-remove", pathPrefix.value, arrayValue.value);
+	}
+	return {
+		arrayValue,
+		itemKeys,
+		isUnion,
+		unionVariants,
+		isOptional,
+		isEmpty,
+		getItemField,
+		addItem,
+		removeItem,
+		clear,
+		canAdd,
+		canRemove
+	};
+}
+//#endregion
+//#region src/components/internal/as-items-chip.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = { class: "as-array-items-chip" };
+//#endregion
+//#region src/components/internal/as-items-chip.vue
+var as_items_chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-items-chip",
+	props: { count: {
+		type: Number,
+		required: true
+	} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$1, (0, vue.toDisplayString)(__props.count) + " items", 1);
+		};
+	}
+});
+//#endregion
+//#region src/components/defaults/as-array.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "as-array-add-row" };
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = ["disabled"];
+const _hoisted_4 = {
+	key: 0,
+	class: "as-dropdown-menu"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+	key: 0,
+	class: "as-collapsible-description"
+};
+//#endregion
+//#region src/components/defaults/as-array.vue
+var as_array_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-array",
+	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 arrayField = props.field;
+		const unionCtx = require_use_form_context.useAsUnionVariant();
+		const hasVariantPicker = (0, vue.computed)(() => unionCtx !== void 0 && unionCtx.variants.length > 1);
+		const optionalEnabled = (0, vue.computed)(() => Array.isArray(props.model?.value));
+		const disabled = (0, vue.computed)(() => props.disabled ?? false);
+		const { arrayValue, itemKeys, isUnion, unionVariants, isOptional, isEmpty, getItemField, addItem, removeItem, clear, canAdd, canRemove } = useAsArray(arrayField, disabled);
+		const level = (0, vue.computed)(() => props.level ?? 0);
+		const singular = props.singularLabel ?? "item";
+		const defaultOpen = !isOptional;
+		const addDropdownRef = (0, vue.ref)(null);
+		const { isOpen: addOpen, toggle: toggleAdd, select: selectAdd } = require_use_as_dropdown.useAsDropdown(addDropdownRef);
+		const collapsibleRef = (0, vue.useTemplateRef)("collapsibleRef");
+		const { composeAction } = require_use_as_optional_add_flow.useAsOptionalAddFlow({ path: () => props.path });
+		function fieldFor(idx) {
+			return getItemField(idx, singular);
+		}
+		function handleAdd(variantIndex = 0) {
+			collapsibleRef.value?.runAndFocusNew(composeAction(() => addItem(variantIndex)), 1);
+		}
+		function handleEnableOptional() {
+			collapsibleRef.value?.runAndFocusNew(composeAction(() => {
+				props.onToggleOptional?.(true);
+				addItem(0);
+			}), 2);
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(require_as_collapsible.as_collapsible_default, {
+				ref_key: "collapsibleRef",
+				ref: collapsibleRef,
+				class: (0, vue.normalizeClass)(_ctx.$props.class),
+				title: __props.title,
+				"array-index": __props.arrayIndex,
+				description: __props.description,
+				level: level.value,
+				optional: !!__props.optional,
+				"optional-enabled": optionalEnabled.value,
+				path: __props.path,
+				error: __props.error,
+				hidden: __props.hidden,
+				"default-open": defaultOpen
+			}, {
+				"title-extras": (0, vue.withCtx)(() => [hasVariantPicker.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_as_variant_picker.as_variant_picker_default, {
+					key: 0,
+					"union-context": (0, vue.unref)(unionCtx),
+					disabled: disabled.value
+				}, null, 8, ["union-context", "disabled"])) : (0, vue.createCommentVNode)("v-if", true)]),
+				badges: (0, vue.withCtx)(() => [(0, vue.createVNode)(as_items_chip_default, { count: (0, vue.unref)(arrayValue).length }, null, 8, ["count"])]),
+				actions: (0, vue.withCtx)(() => [(0, vue.createCommentVNode)(" Hide Clear only when required+empty: optional arrays keep it\n           so the user can collapse back to undefined. "), (0, vue.unref)(isOptional) || !(0, vue.unref)(isEmpty) ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_as_array_clear_btn.as_array_clear_btn_default, {
+					key: 0,
+					label: __props.title,
+					optional: (0, vue.unref)(isOptional),
+					disabled: disabled.value,
+					onClear: (0, vue.unref)(clear)
+				}, null, 8, [
+					"label",
+					"optional",
+					"disabled",
+					"onClear"
+				])) : (0, vue.createCommentVNode)("v-if", true)]),
+				body: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(arrayValue), (_item, idx) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)(require_as_field.as_field_default, {
+						key: (0, vue.unref)(itemKeys)[idx],
+						field: fieldFor(idx),
+						"array-index": idx,
+						"on-remove": () => (0, vue.unref)(removeItem)(idx),
+						"can-remove": (0, vue.unref)(canRemove)
+					}, null, 8, [
+						"field",
+						"array-index",
+						"on-remove",
+						"can-remove"
+					]);
+				}), 128)), (0, vue.createElementVNode)("div", _hoisted_1, [!(0, vue.unref)(isUnion) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					key: 0,
+					type: "button",
+					class: "as-array-add-btn",
+					disabled: !(0, vue.unref)(canAdd),
+					onClick: _cache[0] || (_cache[0] = ($event) => handleAdd(0))
+				}, " Add " + (0, vue.toDisplayString)((0, vue.unref)(singular)), 9, _hoisted_2)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 1,
+					ref_key: "addDropdownRef",
+					ref: addDropdownRef,
+					class: "as-dropdown"
+				}, [(0, vue.createElementVNode)("button", {
+					type: "button",
+					class: "as-array-add-btn",
+					disabled: !(0, vue.unref)(canAdd),
+					onClick: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(toggleAdd) && (0, vue.unref)(toggleAdd)(...args))
+				}, " Add " + (0, vue.toDisplayString)((0, vue.unref)(singular)), 9, _hoisted_3), (0, vue.unref)(addOpen) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(unionVariants), (v, vi) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+						key: vi,
+						type: "button",
+						class: "as-dropdown-item",
+						onClick: ($event) => (0, vue.unref)(selectAdd)(() => handleAdd(vi))
+					}, (0, vue.toDisplayString)(v.label), 9, _hoisted_5);
+				}), 128))])) : (0, vue.createCommentVNode)("v-if", true)], 512))])]),
+				empty: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["as-object-empty as-grid-item", _ctx.$props.class]) }, [(0, vue.createElementVNode)("button", {
+					type: "button",
+					class: "as-object-empty-add",
+					onClick: handleEnableOptional
+				}, [_cache[2] || (_cache[2] = (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)(__props.title), 1)]), __props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_6, (0, vue.toDisplayString)(__props.description), 1)) : (0, vue.createCommentVNode)("v-if", true)], 2), [[vue.vShow, !__props.hidden]])]),
+				_: 1
+			}, 8, [
+				"class",
+				"title",
+				"array-index",
+				"description",
+				"level",
+				"optional",
+				"optional-enabled",
+				"path",
+				"error",
+				"hidden"
+			]);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "as_array_default", {
+	enumerable: true,
+	get: function() {
+		return as_array_default;
+	}
+});
+Object.defineProperty(exports, "useAsArray", {
+	enumerable: true,
+	get: function() {
+		return useAsArray;
+	}
+});