@atscript/vue-form 0.1.58

package/dist/use-as-dropdown-C-Qy7Vt0.cjs

@@ -0,0 +1,105 @@
+let vue = require("vue");
+//#region src/composables/focus-after-toggle.ts
+const FOCUSABLE_SELECTOR = [
+	"input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])"
+].join(",");
+/** Run an action, then focus the first focusable input descendant of `scope`. */
+async function focusFirstAfter(action, scope, ticks = 1) {
+	action();
+	for (let i = 0; i < ticks; i++) await (0, vue.nextTick)();
+	const root = scope();
+	if (!root) return;
+	root.querySelector(FOCUSABLE_SELECTOR)?.focus();
+}
+/**
+* Run an action, then focus the first focusable input that wasn't present
+* before the action. Used by array Add buttons so the user lands on the
+* just-added row's first input regardless of how many items already exist.
+* Falls back to first focusable when nothing existed before (the typical
+* "enable optional + add first item" flow).
+*/
+async function focusNewFocusableAfter(action, scope, ticks = 1) {
+	const before = scope();
+	const known = before ? new Set(before.querySelectorAll(FOCUSABLE_SELECTOR)) : null;
+	action();
+	for (let i = 0; i < ticks; i++) await (0, vue.nextTick)();
+	const after = scope();
+	if (!after) return;
+	const all = after.querySelectorAll(FOCUSABLE_SELECTOR);
+	for (const el of all) if (!known || !known.has(el)) {
+		el.focus();
+		return;
+	}
+}
+/** Sugar over `focusFirstAfter` scoped to a template ref. */
+function useAsFocusFirstAfter(onToggleOptional) {
+	const rootRef = (0, vue.ref)(null);
+	const runAndFocus = (action, ticks = 1) => {
+		focusFirstAfter(action, () => rootRef.value, ticks);
+	};
+	const runAndFocusNew = (action, ticks = 1) => {
+		focusNewFocusableAfter(action, () => rootRef.value, ticks);
+	};
+	return {
+		rootRef,
+		runAndFocus,
+		runAndFocusNew,
+		enableOptional: () => runAndFocus(() => onToggleOptional?.(true))
+	};
+}
+//#endregion
+//#region src/composables/use-as-dropdown.ts
+function useAsDropdown(containerRef) {
+	const isOpen = (0, vue.ref)(false);
+	function toggle() {
+		isOpen.value = !isOpen.value;
+	}
+	function close() {
+		isOpen.value = false;
+	}
+	function select(callback) {
+		callback();
+		close();
+	}
+	function onClickOutside(event) {
+		if (containerRef.value && !containerRef.value.contains(event.target)) close();
+	}
+	(0, vue.watch)(isOpen, (open) => {
+		if (open) document.addEventListener("click", onClickOutside, true);
+		else document.removeEventListener("click", onClickOutside, true);
+	});
+	(0, vue.onBeforeUnmount)(() => document.removeEventListener("click", onClickOutside, true));
+	return {
+		isOpen,
+		toggle,
+		close,
+		select
+	};
+}
+//#endregion
+Object.defineProperty(exports, "focusFirstAfter", {
+	enumerable: true,
+	get: function() {
+		return focusFirstAfter;
+	}
+});
+Object.defineProperty(exports, "focusNewFocusableAfter", {
+	enumerable: true,
+	get: function() {
+		return focusNewFocusableAfter;
+	}
+});
+Object.defineProperty(exports, "useAsDropdown", {
+	enumerable: true,
+	get: function() {
+		return useAsDropdown;
+	}
+});
+Object.defineProperty(exports, "useAsFocusFirstAfter", {
+	enumerable: true,
+	get: function() {
+		return useAsFocusFirstAfter;
+	}
+});

package/dist/use-as-locale-BrFdAgnU.mjs

@@ -0,0 +1,23 @@
+import { computed, inject, provide } from "vue";
+//#region src/composables/use-as-locale.ts
+/**
+* BCP-47 locale for form-side decimal formatting (separator, thousands,
+* currency symbol). Parallels `provideCellLocale` in `@atscript/vue-table`
+* but lives in vue-form so the form package stays free of cross-package
+* coupling — the host wires both providers from a single source (e.g.
+* `useAppPrefs` in vue-table).
+*
+* The injected value is a getter so reactive sources (e.g.
+* `prefs.value?.language`) can be passed without forcing the caller to
+* wrap them in a computed.
+*/
+const AS_LOCALE_KEY = Symbol("as-locale");
+function provideAsLocale(getter) {
+	provide(AS_LOCALE_KEY, getter);
+}
+function useAsLocale() {
+	const getter = inject(AS_LOCALE_KEY, () => void 0);
+	return { locale: computed(() => getter()) };
+}
+//#endregion
+export { useAsLocale as n, provideAsLocale as t };

package/dist/use-as-locale-C4z5stwD.cjs

@@ -0,0 +1,34 @@
+let vue = require("vue");
+//#region src/composables/use-as-locale.ts
+/**
+* BCP-47 locale for form-side decimal formatting (separator, thousands,
+* currency symbol). Parallels `provideCellLocale` in `@atscript/vue-table`
+* but lives in vue-form so the form package stays free of cross-package
+* coupling — the host wires both providers from a single source (e.g.
+* `useAppPrefs` in vue-table).
+*
+* The injected value is a getter so reactive sources (e.g.
+* `prefs.value?.language`) can be passed without forcing the caller to
+* wrap them in a computed.
+*/
+const AS_LOCALE_KEY = Symbol("as-locale");
+function provideAsLocale(getter) {
+	(0, vue.provide)(AS_LOCALE_KEY, getter);
+}
+function useAsLocale() {
+	const getter = (0, vue.inject)(AS_LOCALE_KEY, () => void 0);
+	return { locale: (0, vue.computed)(() => getter()) };
+}
+//#endregion
+Object.defineProperty(exports, "provideAsLocale", {
+	enumerable: true,
+	get: function() {
+		return provideAsLocale;
+	}
+});
+Object.defineProperty(exports, "useAsLocale", {
+	enumerable: true,
+	get: function() {
+		return useAsLocale;
+	}
+});

package/dist/use-as-nested-sections-store-jdMRxjBE.cjs

@@ -0,0 +1,80 @@
+let vue = require("vue");
+//#region src/composables/use-as-nested-sections-store.ts
+const STORE_KEY = Symbol("atui.nested-sections");
+/**
+* AsForm provides a `Map<absolutePath, descendantErrorCount>` so each
+* AsObject can render its error-count badge in O(1) instead of scanning
+* all errors per-instance. Keyed by every dotted-path prefix that has at
+* least one error at-or-below it.
+*/
+const DESCENDANT_ERROR_COUNTS_KEY = Symbol("atui.descendant-error-counts");
+/**
+* Create and provide a `AsNestedSectionsStore` to the current Vue subtree.
+* Called automatically by `<AsForm>`, but exposed for cases where you
+* want to scope a separate store (e.g. multiple independent forms in one
+* page that should keep their open/closed state independent, or to drive
+* page-level Expand-all / Collapse-all UI from above the form).
+*/
+function provideAsNestedSectionsStore() {
+	const open = (0, vue.ref)(/* @__PURE__ */ new Set());
+	const registered = (0, vue.ref)(/* @__PURE__ */ new Set());
+	const store = {
+		open,
+		register(id) {
+			registered.value.add(id);
+		},
+		unregister(id) {
+			registered.value.delete(id);
+		},
+		toggle(id) {
+			if (open.value.has(id)) open.value.delete(id);
+			else open.value.add(id);
+		},
+		setOpen(id, isOpen) {
+			if (isOpen) {
+				if (!open.value.has(id)) open.value.add(id);
+			} else if (open.value.has(id)) open.value.delete(id);
+		},
+		isOpen(id) {
+			return open.value.has(id);
+		},
+		expandAll() {
+			for (const id of registered.value) open.value.add(id);
+		},
+		collapseAll() {
+			open.value.clear();
+		},
+		allOpen() {
+			return open.value.size === registered.value.size;
+		}
+	};
+	(0, vue.provide)(STORE_KEY, store);
+	return store;
+}
+/**
+* Inject the nested-sections store provided by an ancestor `<AsForm>`
+* (or by an explicit `provideAsNestedSectionsStore()` call). Returns
+* `undefined` if no store is in scope.
+*/
+function useAsNestedSectionsStore() {
+	return (0, vue.inject)(STORE_KEY, void 0);
+}
+//#endregion
+Object.defineProperty(exports, "DESCENDANT_ERROR_COUNTS_KEY", {
+	enumerable: true,
+	get: function() {
+		return DESCENDANT_ERROR_COUNTS_KEY;
+	}
+});
+Object.defineProperty(exports, "provideAsNestedSectionsStore", {
+	enumerable: true,
+	get: function() {
+		return provideAsNestedSectionsStore;
+	}
+});
+Object.defineProperty(exports, "useAsNestedSectionsStore", {
+	enumerable: true,
+	get: function() {
+		return useAsNestedSectionsStore;
+	}
+});

package/dist/use-as-nested-sections-store-lhi0z5z1.mjs

@@ -0,0 +1,63 @@
+import { inject, provide, ref } from "vue";
+//#region src/composables/use-as-nested-sections-store.ts
+const STORE_KEY = Symbol("atui.nested-sections");
+/**
+* AsForm provides a `Map<absolutePath, descendantErrorCount>` so each
+* AsObject can render its error-count badge in O(1) instead of scanning
+* all errors per-instance. Keyed by every dotted-path prefix that has at
+* least one error at-or-below it.
+*/
+const DESCENDANT_ERROR_COUNTS_KEY = Symbol("atui.descendant-error-counts");
+/**
+* Create and provide a `AsNestedSectionsStore` to the current Vue subtree.
+* Called automatically by `<AsForm>`, but exposed for cases where you
+* want to scope a separate store (e.g. multiple independent forms in one
+* page that should keep their open/closed state independent, or to drive
+* page-level Expand-all / Collapse-all UI from above the form).
+*/
+function provideAsNestedSectionsStore() {
+	const open = ref(/* @__PURE__ */ new Set());
+	const registered = ref(/* @__PURE__ */ new Set());
+	const store = {
+		open,
+		register(id) {
+			registered.value.add(id);
+		},
+		unregister(id) {
+			registered.value.delete(id);
+		},
+		toggle(id) {
+			if (open.value.has(id)) open.value.delete(id);
+			else open.value.add(id);
+		},
+		setOpen(id, isOpen) {
+			if (isOpen) {
+				if (!open.value.has(id)) open.value.add(id);
+			} else if (open.value.has(id)) open.value.delete(id);
+		},
+		isOpen(id) {
+			return open.value.has(id);
+		},
+		expandAll() {
+			for (const id of registered.value) open.value.add(id);
+		},
+		collapseAll() {
+			open.value.clear();
+		},
+		allOpen() {
+			return open.value.size === registered.value.size;
+		}
+	};
+	provide(STORE_KEY, store);
+	return store;
+}
+/**
+* Inject the nested-sections store provided by an ancestor `<AsForm>`
+* (or by an explicit `provideAsNestedSectionsStore()` call). Returns
+* `undefined` if no store is in scope.
+*/
+function useAsNestedSectionsStore() {
+	return inject(STORE_KEY, void 0);
+}
+//#endregion
+export { provideAsNestedSectionsStore as n, useAsNestedSectionsStore as r, DESCENDANT_ERROR_COUNTS_KEY as t };

package/dist/use-as-optional-add-flow-CuXEir_i.mjs

@@ -0,0 +1,43 @@
+import { r as useAsNestedSectionsStore } from "./use-as-nested-sections-store-lhi0z5z1.mjs";
+import { r as focusNewFocusableAfter } from "./use-as-dropdown-BMnEm6jF.mjs";
+//#region src/composables/use-as-optional-add-flow.ts
+/**
+* Choreography composable for "enable-optional + add + focus-first-new"
+* flows. The four built-in structured-field defaults consume it; custom
+* implementations of object/array/tuple/union components can use it too
+* to get the same UX (smooth focus handoff after an empty-state click)
+* without re-implementing the choreography.
+*
+* Pairs with:
+*   - {@link useAsFocusFirstAfter} — focus mechanics (used by AsCollapsible)
+*   - {@link useAsNestedSectionsStore} — open/closed state registry
+*
+* Typical use, inside an `as-object.vue` swap component:
+* ```ts
+* const { composeAction } = useAsOptionalAddFlow({ path: () => props.path });
+* function handleAddData() {
+*   collapsibleRef.value?.runAndFocusNew(
+*     composeAction(() => props.onToggleOptional?.(true)),
+*     2,
+*   );
+* }
+* ```
+*/
+function useAsOptionalAddFlow(options) {
+	const store = useAsNestedSectionsStore();
+	const wrap = (action) => {
+		return () => {
+			action();
+			const path = options.path();
+			if (path) store?.setOpen(path, true);
+		};
+	};
+	return {
+		composeAction: wrap,
+		runAndFocusNew(scope, action, ticks = 2) {
+			return focusNewFocusableAfter(wrap(action), scope, ticks);
+		}
+	};
+}
+//#endregion
+export { useAsOptionalAddFlow as t };

package/dist/use-as-optional-add-flow-STOaQWo9.cjs

@@ -0,0 +1,48 @@
+const require_use_as_nested_sections_store = require("./use-as-nested-sections-store-jdMRxjBE.cjs");
+const require_use_as_dropdown = require("./use-as-dropdown-C-Qy7Vt0.cjs");
+//#region src/composables/use-as-optional-add-flow.ts
+/**
+* Choreography composable for "enable-optional + add + focus-first-new"
+* flows. The four built-in structured-field defaults consume it; custom
+* implementations of object/array/tuple/union components can use it too
+* to get the same UX (smooth focus handoff after an empty-state click)
+* without re-implementing the choreography.
+*
+* Pairs with:
+*   - {@link useAsFocusFirstAfter} — focus mechanics (used by AsCollapsible)
+*   - {@link useAsNestedSectionsStore} — open/closed state registry
+*
+* Typical use, inside an `as-object.vue` swap component:
+* ```ts
+* const { composeAction } = useAsOptionalAddFlow({ path: () => props.path });
+* function handleAddData() {
+*   collapsibleRef.value?.runAndFocusNew(
+*     composeAction(() => props.onToggleOptional?.(true)),
+*     2,
+*   );
+* }
+* ```
+*/
+function useAsOptionalAddFlow(options) {
+	const store = require_use_as_nested_sections_store.useAsNestedSectionsStore();
+	const wrap = (action) => {
+		return () => {
+			action();
+			const path = options.path();
+			if (path) store?.setOpen(path, true);
+		};
+	};
+	return {
+		composeAction: wrap,
+		runAndFocusNew(scope, action, ticks = 2) {
+			return require_use_as_dropdown.focusNewFocusableAfter(wrap(action), scope, ticks);
+		}
+	};
+}
+//#endregion
+Object.defineProperty(exports, "useAsOptionalAddFlow", {
+	enumerable: true,
+	get: function() {
+		return useAsOptionalAddFlow;
+	}
+});

package/dist/use-as-value-help-CBykDEjZ.mjs

@@ -0,0 +1,89 @@
+import { computed, inject, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
+import { ValueHelpClient, getMetaEntry, resolveValueHelp } from "@atscript/ui";
+//#region src/composables/use-as-value-help.ts
+/** Vue inject key used by `AsForm` to publish a per-form `ClientFactory` override. */
+const CLIENT_FACTORY_KEY = Symbol("as-client-factory");
+const DEBOUNCE_MS = 300;
+function useAsValueHelp(options) {
+	const { info, model, onBlur } = options;
+	const injectedFactory = inject(CLIENT_FACTORY_KEY, null) ?? void 0;
+	const vhClient = new ValueHelpClient(getMetaEntry(info.url, injectedFactory).client);
+	const resolved = shallowRef(null);
+	const status = ref("loading");
+	const searchText = ref("");
+	const results = shallowRef([]);
+	const searching = ref(false);
+	const labelIsFkValue = computed(() => !!resolved.value && info.targetField === resolved.value.labelField);
+	let debounceTimer;
+	let kickoffPromise;
+	let lastSearchedText;
+	onUnmounted(() => {
+		if (debounceTimer !== void 0) clearTimeout(debounceTimer);
+	});
+	async function kickoff() {
+		if (kickoffPromise) return kickoffPromise;
+		kickoffPromise = resolveValueHelp(info.url).then((r) => {
+			resolved.value = r;
+			status.value = "ready";
+		}).catch(() => {
+			status.value = "error";
+		});
+		return kickoffPromise;
+	}
+	function scheduleSearch(text) {
+		if (debounceTimer !== void 0) clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			doSearch(text);
+		}, DEBOUNCE_MS);
+	}
+	async function doSearch(text) {
+		const r = resolved.value;
+		if (!r) return;
+		if (text === lastSearchedText) return;
+		lastSearchedText = text;
+		searching.value = true;
+		try {
+			results.value = (await vhClient.search(r, {
+				text: text || void 0,
+				mode: "form",
+				limit: 20
+			})).items;
+		} catch {
+			results.value = [];
+		} finally {
+			searching.value = false;
+		}
+	}
+	watch(searchText, (text) => {
+		if (resolved.value) scheduleSearch(text);
+	});
+	watch(resolved, (r) => {
+		if (r) doSearch(searchText.value);
+	});
+	onMounted(() => {
+		kickoff();
+	});
+	function selectItem(item) {
+		model.value = item[info.targetField];
+		onBlur();
+	}
+	function clear() {
+		model.value = void 0;
+		searchText.value = "";
+		results.value = [];
+		lastSearchedText = void 0;
+	}
+	return {
+		resolved,
+		status,
+		searchText,
+		results,
+		searching,
+		labelIsFkValue,
+		kickoff,
+		selectItem,
+		clear
+	};
+}
+//#endregion
+export { useAsValueHelp as n, CLIENT_FACTORY_KEY as t };

package/dist/use-as-value-help-uANI3zWa.cjs

@@ -0,0 +1,100 @@
+let vue = require("vue");
+let _atscript_ui = require("@atscript/ui");
+//#region src/composables/use-as-value-help.ts
+/** Vue inject key used by `AsForm` to publish a per-form `ClientFactory` override. */
+const CLIENT_FACTORY_KEY = Symbol("as-client-factory");
+const DEBOUNCE_MS = 300;
+function useAsValueHelp(options) {
+	const { info, model, onBlur } = options;
+	const injectedFactory = (0, vue.inject)(CLIENT_FACTORY_KEY, null) ?? void 0;
+	const vhClient = new _atscript_ui.ValueHelpClient((0, _atscript_ui.getMetaEntry)(info.url, injectedFactory).client);
+	const resolved = (0, vue.shallowRef)(null);
+	const status = (0, vue.ref)("loading");
+	const searchText = (0, vue.ref)("");
+	const results = (0, vue.shallowRef)([]);
+	const searching = (0, vue.ref)(false);
+	const labelIsFkValue = (0, vue.computed)(() => !!resolved.value && info.targetField === resolved.value.labelField);
+	let debounceTimer;
+	let kickoffPromise;
+	let lastSearchedText;
+	(0, vue.onUnmounted)(() => {
+		if (debounceTimer !== void 0) clearTimeout(debounceTimer);
+	});
+	async function kickoff() {
+		if (kickoffPromise) return kickoffPromise;
+		kickoffPromise = (0, _atscript_ui.resolveValueHelp)(info.url).then((r) => {
+			resolved.value = r;
+			status.value = "ready";
+		}).catch(() => {
+			status.value = "error";
+		});
+		return kickoffPromise;
+	}
+	function scheduleSearch(text) {
+		if (debounceTimer !== void 0) clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			doSearch(text);
+		}, DEBOUNCE_MS);
+	}
+	async function doSearch(text) {
+		const r = resolved.value;
+		if (!r) return;
+		if (text === lastSearchedText) return;
+		lastSearchedText = text;
+		searching.value = true;
+		try {
+			results.value = (await vhClient.search(r, {
+				text: text || void 0,
+				mode: "form",
+				limit: 20
+			})).items;
+		} catch {
+			results.value = [];
+		} finally {
+			searching.value = false;
+		}
+	}
+	(0, vue.watch)(searchText, (text) => {
+		if (resolved.value) scheduleSearch(text);
+	});
+	(0, vue.watch)(resolved, (r) => {
+		if (r) doSearch(searchText.value);
+	});
+	(0, vue.onMounted)(() => {
+		kickoff();
+	});
+	function selectItem(item) {
+		model.value = item[info.targetField];
+		onBlur();
+	}
+	function clear() {
+		model.value = void 0;
+		searchText.value = "";
+		results.value = [];
+		lastSearchedText = void 0;
+	}
+	return {
+		resolved,
+		status,
+		searchText,
+		results,
+		searching,
+		labelIsFkValue,
+		kickoff,
+		selectItem,
+		clear
+	};
+}
+//#endregion
+Object.defineProperty(exports, "CLIENT_FACTORY_KEY", {
+	enumerable: true,
+	get: function() {
+		return CLIENT_FACTORY_KEY;
+	}
+});
+Object.defineProperty(exports, "useAsValueHelp", {
+	enumerable: true,
+	get: function() {
+		return useAsValueHelp;
+	}
+});