@atscript/vue-form 0.1.58

package/dist/as-tuple-DkI9swlW.mjs

@@ -0,0 +1,340 @@
+import { a as CHANGE_HANDLER_KEY, n as useAsUnionVariant, r as useFormContext } from "./use-form-context-bAj7UoSe.mjs";
+import { t as as_field_default } from "./as-field-CXVjrEPQ.mjs";
+import { t as as_variant_picker_default } from "./as-variant-picker-BVs0AvjK.mjs";
+import { t as useAsOptionalAddFlow } from "./use-as-optional-add-flow-CuXEir_i.mjs";
+import { t as as_collapsible_default } from "./as-collapsible-DtNCofNT.mjs";
+import { t as as_array_clear_btn_default } from "./as-array-clear-btn-DIhzCKC9.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, normalizeClass, onMounted, openBlock, renderList, toDisplayString, unref, useTemplateRef, vShow, withCtx, withDirectives } from "vue";
+import { META_LABEL, createFormData, createFormValueResolver, getFieldMeta } from "@atscript/ui";
+//#region src/composables/use-as-tuple.ts
+/** Composable for managing tuple field state. Fixed-length, position-typed; auto-fills missing positions on mount unless optional. */
+function useAsTuple(field) {
+	const { rootFormData, formContext, pathPrefix, getByPath, setByPath } = useFormContext("useAsTuple");
+	const handleChange = inject(CHANGE_HANDLER_KEY, () => {});
+	const isOptional = field.prop.optional ?? false;
+	const itemFields = [];
+	const positionLabeled = [];
+	for (let i = 0; i < field.itemFields.length; i++) {
+		const itemField = field.itemFields[i];
+		const labeled = getFieldMeta(itemField.prop, META_LABEL) !== void 0;
+		const fallbackName = labeled ? "" : itemField.type;
+		itemFields.push({
+			...itemField,
+			path: String(i),
+			name: fallbackName
+		});
+		positionLabeled.push(labeled);
+	}
+	const isEmpty = computed(() => {
+		const v = getByPath(pathPrefix.value);
+		return !Array.isArray(v) || v.length === 0;
+	});
+	function fillMissing() {
+		let arr = getByPath(pathPrefix.value);
+		if (!Array.isArray(arr)) {
+			arr = [];
+			setByPath(pathPrefix.value, arr);
+		}
+		const tail = arr;
+		if (tail.length >= itemFields.length) return;
+		const resolver = createFormValueResolver(rootFormData().value, formContext.value);
+		for (let i = tail.length; i < itemFields.length; i++) tail.push(createFormData(field.itemFields[i].prop, resolver).value);
+		handleChange("array-add", pathPrefix.value, tail);
+	}
+	function clear() {
+		if (!isOptional) return;
+		setByPath(pathPrefix.value, void 0);
+		handleChange("array-remove", pathPrefix.value, void 0);
+	}
+	onMounted(() => {
+		if (!isOptional) fillMissing();
+	});
+	return {
+		itemFields,
+		positionLabeled,
+		isOptional,
+		isEmpty,
+		clear,
+		fillMissing
+	};
+}
+//#endregion
+//#region src/components/defaults/as-tuple.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = {
+	key: 0,
+	class: "as-collapsible-description"
+};
+//#endregion
+//#region src/components/defaults/as-tuple.vue
+var as_tuple_default = /* @__PURE__ */ defineComponent({
+	__name: "as-tuple",
+	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 tupleField = props.field;
+		const unionCtx = useAsUnionVariant();
+		const hasVariantPicker = computed(() => unionCtx !== void 0 && unionCtx.variants.length > 1);
+		const optionalEnabled = computed(() => Array.isArray(props.model?.value));
+		const disabled = computed(() => props.disabled ?? false);
+		const { itemFields, positionLabeled, isOptional, clear, fillMissing } = useAsTuple(tupleField);
+		const level = computed(() => props.level ?? 0);
+		const defaultOpen = !isOptional;
+		const collapsibleRef = useTemplateRef("collapsibleRef");
+		const { composeAction } = useAsOptionalAddFlow({ path: () => props.path });
+		function handleEnableOptional() {
+			collapsibleRef.value?.runAndFocusNew(composeAction(() => {
+				props.onToggleOptional?.(true);
+				fillMissing();
+			}), 2);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(as_collapsible_default, {
+				ref_key: "collapsibleRef",
+				ref: collapsibleRef,
+				class: 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
+			}, createSlots({
+				"title-extras": withCtx(() => [hasVariantPicker.value ? (openBlock(), createBlock(as_variant_picker_default, {
+					key: 0,
+					"union-context": unref(unionCtx),
+					disabled: disabled.value
+				}, null, 8, ["union-context", "disabled"])) : createCommentVNode("v-if", true)]),
+				body: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(itemFields), (itemField, i) => {
+					return openBlock(), createBlock(as_field_default, {
+						key: i,
+						field: itemField,
+						"array-index": unref(positionLabeled)[i] ? void 0 : i
+					}, null, 8, ["field", "array-index"]);
+				}), 128))]),
+				empty: withCtx(() => [withDirectives(createElementVNode("div", { class: normalizeClass(["as-object-empty as-grid-item", _ctx.$props.class]) }, [createElementVNode("button", {
+					type: "button",
+					class: "as-object-empty-add",
+					onClick: handleEnableOptional
+				}, [_cache[0] || (_cache[0] = createElementVNode("span", {
+					class: "i-as-field-fill as-object-empty-add-icon",
+					"aria-hidden": "true"
+				}, null, -1)), createTextVNode(" Add " + toDisplayString(__props.title), 1)]), __props.description ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(__props.description), 1)) : createCommentVNode("v-if", true)], 2), [[vShow, !__props.hidden]])]),
+				_: 2
+			}, [unref(isOptional) && optionalEnabled.value ? {
+				name: "actions",
+				fn: withCtx(() => [createVNode(as_array_clear_btn_default, {
+					optional: true,
+					label: __props.title,
+					disabled: disabled.value,
+					onClear: unref(clear)
+				}, null, 8, [
+					"label",
+					"disabled",
+					"onClear"
+				])]),
+				key: "0"
+			} : void 0]), 1032, [
+				"class",
+				"title",
+				"array-index",
+				"description",
+				"level",
+				"optional",
+				"optional-enabled",
+				"path",
+				"error",
+				"hidden"
+			]);
+		};
+	}
+});
+//#endregion
+export { useAsTuple as n, as_tuple_default as t };

package/dist/as-tuple.cjs

@@ -0,0 +1,11 @@
+require("./use-form-context-Dwr8Ai1v.cjs");
+require("./use-as-nested-sections-store-jdMRxjBE.cjs");
+require("./as-field-wLYoaZnT.cjs");
+require("./use-as-locale-C4z5stwD.cjs");
+require("./use-as-dropdown-C-Qy7Vt0.cjs");
+require("./as-variant-picker-DObQZHmm.cjs");
+require("./use-as-optional-add-flow-STOaQWo9.cjs");
+require("./as-collapsible-CqxeJut7.cjs");
+require("./as-array-clear-btn-DAGervXL.cjs");
+const require_as_tuple = require("./as-tuple-BU--cuuI.cjs");
+module.exports = require_as_tuple.as_tuple_default;

package/dist/as-tuple.d.cts

@@ -0,0 +1,2 @@
+import { t as _default } from "./as-tuple.vue-DyskCkf-.cjs";
+export = _default;

package/dist/as-tuple.d.mts

@@ -0,0 +1,2 @@
+import { t as _default } from "./as-tuple.vue-CQhzOJsn.mjs";
+export { _default as default };

package/dist/as-tuple.mjs

@@ -0,0 +1,11 @@
+import "./use-form-context-bAj7UoSe.mjs";
+import "./use-as-nested-sections-store-lhi0z5z1.mjs";
+import "./as-field-CXVjrEPQ.mjs";
+import "./use-as-locale-BrFdAgnU.mjs";
+import "./use-as-dropdown-BMnEm6jF.mjs";
+import "./as-variant-picker-BVs0AvjK.mjs";
+import "./use-as-optional-add-flow-CuXEir_i.mjs";
+import "./as-collapsible-DtNCofNT.mjs";
+import "./as-array-clear-btn-DIhzCKC9.mjs";
+import { t as as_tuple_default } from "./as-tuple-DkI9swlW.mjs";
+export { as_tuple_default as default };

package/dist/as-tuple.vue-CQhzOJsn.d.mts

@@ -0,0 +1,9 @@
+import { i as TAsComponentProps } from "./types-Czm-Gtud.mjs";
+import * as vue from "vue";
+
+//#region src/components/defaults/as-tuple.vue.d.ts
+type __VLS_Props = TAsComponentProps;
+declare const __VLS_export: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as t };

package/dist/as-tuple.vue-DyskCkf-.d.cts

@@ -0,0 +1,9 @@
+import { i as TAsComponentProps } from "./types-C4HRSxgV.cjs";
+import * as vue from "vue";
+
+//#region src/components/defaults/as-tuple.vue.d.ts
+type __VLS_Props = TAsComponentProps;
+declare const __VLS_export: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as t };