@atscript/vue-table 0.1.58

package/dist/as-filter-field-B_tYzvvl.cjs

@@ -0,0 +1,984 @@
+const require_use_table_state = require("./use-table-state-MU-vuzui.cjs");
+const require_as_table_status = require("./as-table-status-DWYoJIMC.cjs");
+const require_as_table_base = require("./as-table-base-VIz-B_6_.cjs");
+let _atscript_ui = require("@atscript/ui");
+let vue = require("vue");
+let _atscript_ui_table = require("@atscript/ui-table");
+let _vueuse_core = require("@vueuse/core");
+let reka_ui = require("reka-ui");
+//#region src/composables/as-presets-app.ts
+/**
+* App-wide injection key for the presets system. The host app calls
+* `app.provide(AS_PRESETS_APP, '<your-app>')` once at boot; every
+* `<AsTableRoot>`, `usePresets`, and `useAppPrefs` call below it pulls the
+* value via `inject(AS_PRESETS_APP)` unless an explicit `app` option
+* overrides it.
+*
+* The string identifies the application namespace on the server side —
+* one Moost backend can serve many apps; rows are scoped by `(app,
+* tableKey)`.
+*/
+const AS_PRESETS_APP = Symbol("AS_PRESETS_APP");
+/**
+* Resolve the app name with these precedence rules:
+*
+* 1. `explicit` argument (composable option) — wins.
+* 2. `inject(AS_PRESETS_APP)` from the Vue tree.
+* 3. Throws — composable can't run without an app namespace.
+*
+* Throws a clear error when neither is available so misconfiguration
+* surfaces at setup time, not when the first network round-trip fails.
+*/
+function injectPresetsApp(explicit) {
+	if (explicit && explicit.length > 0) return explicit;
+	const fromProvide = (0, vue.inject)(AS_PRESETS_APP, void 0);
+	if (fromProvide && fromProvide.length > 0) return fromProvide;
+	throw new Error("[vue-table] AS_PRESETS_APP not provided. Call `app.provide(AS_PRESETS_APP, '<your-app>')` once at boot, or pass `app` to the composable.");
+}
+//#endregion
+//#region src/composables/use-local-draft.ts
+const DEFAULT_DEBOUNCE_MS = 300;
+/**
+* localStorage overlay manager for table presets. One overlay per
+* `(app, tableKey)`; switching presets clears it (caller's responsibility
+* — this composable only tracks state, not which preset is active).
+*/
+function useLocalDraft(opts) {
+	const key = `as-table-draft:${opts.app}:${opts.tableKey}`;
+	const debounceMs = opts.debounceMs ?? DEFAULT_DEBOUNCE_MS;
+	const storage = resolveStorage(opts.storage);
+	function isEnabled() {
+		if (typeof opts.enabled === "boolean") return opts.enabled;
+		if ((0, vue.isRef)(opts.enabled)) return Boolean(opts.enabled.value);
+		return false;
+	}
+	function readDraft() {
+		if (!storage) return null;
+		try {
+			const raw = storage.getItem(key);
+			if (!raw) return null;
+			const parsed = JSON.parse(raw);
+			if (!parsed || typeof parsed !== "object") return null;
+			return parsed;
+		} catch (err) {
+			console.warn("[vue-table] useLocalDraft: corrupted localStorage entry, ignoring", err);
+			return null;
+		}
+	}
+	function writeDraft(draft) {
+		if (!storage) return;
+		try {
+			storage.setItem(key, JSON.stringify(draft));
+		} catch (err) {
+			console.warn("[vue-table] useLocalDraft: localStorage write failed", err);
+		}
+	}
+	function clear() {
+		if (!storage) return;
+		try {
+			storage.removeItem(key);
+		} catch {}
+	}
+	function hydrate(applied) {
+		if (!isEnabled()) return applied;
+		const draft = readDraft();
+		if (!draft || (0, _atscript_ui_table.isEmptyDraft)(draft)) return applied;
+		const overlay = (0, _atscript_ui_table.deserializeDraft)(draft, opts.availableAspects);
+		return {
+			...applied,
+			...overlay
+		};
+	}
+	function watchAndPersist(currentSnapshot, activePresetSnapshot) {
+		let lastDraftSerialized = "";
+		let lastPresetRef = null;
+		let lastPresetSerialized = "";
+		function flush(current, preset) {
+			if (!isEnabled()) return;
+			const draft = (0, _atscript_ui_table.serializeDraft)(current, opts.availableAspects);
+			if ((0, _atscript_ui_table.isEmptyDraft)(draft)) {
+				clear();
+				lastDraftSerialized = "";
+				return;
+			}
+			const draftSerialized = (0, _atscript_ui_table.stableStringify)(draft);
+			if (preset !== lastPresetRef) {
+				lastPresetRef = preset;
+				lastPresetSerialized = (0, _atscript_ui_table.stableStringify)((0, _atscript_ui_table.serializeDraft)(preset, opts.availableAspects));
+			}
+			if (draftSerialized === lastPresetSerialized) {
+				clear();
+				lastDraftSerialized = "";
+				return;
+			}
+			if (draftSerialized === lastDraftSerialized) return;
+			lastDraftSerialized = draftSerialized;
+			writeDraft(draft);
+		}
+		const flushDebounced = (0, _atscript_ui_table.debounce)(((current, preset) => flush(current, preset)), debounceMs);
+		const stop = (0, vue.watch)(() => [currentSnapshot(), activePresetSnapshot()], ([current, preset]) => flushDebounced(current, preset), { flush: "post" });
+		return () => {
+			flushDebounced.cancel();
+			stop();
+		};
+	}
+	return {
+		hydrate,
+		watchAndPersist,
+		clear,
+		readDraft
+	};
+}
+function resolveStorage(provided) {
+	if (provided !== void 0) return provided;
+	try {
+		return globalThis.localStorage ?? null;
+	} catch {
+		return null;
+	}
+}
+//#endregion
+//#region src/composables/use-presets.ts
+/**
+* Public dev-facing composable for table presets. Powers `<AsPresetPicker>`
+* internally and is exported for devs who want to wire bespoke surfaces.
+*
+* Stateful: holds reactive `presets` / `userConf` / `capabilities` and
+* supports optimistic mutators that re-list after each successful write.
+*
+* Active-preset selection (`activePresetId`) is **owned by the caller** —
+* the composable provides the ref but doesn't auto-resolve it on mount;
+* that's the table-state's responsibility (Slice 4) since it depends on
+* `userConf.defaultPresetId` resolution + Standard fallback.
+*/
+function usePresets(opts) {
+	const app = injectPresetsApp(opts.app);
+	if (!opts.tableKey) throw new Error("[vue-table] usePresets: `tableKey` is required");
+	const client = new _atscript_ui_table.PresetsClient({
+		url: opts.url,
+		app,
+		tableKey: opts.tableKey,
+		clientFactory: opts.clientFactory
+	});
+	const systemPresetsResolved = (0, vue.computed)(() => (0, _atscript_ui_table.resolveSystemPresets)(opts.systemPresets));
+	const presets = (0, vue.shallowRef)([]);
+	const userConf = (0, vue.shallowRef)(null);
+	const capabilities = (0, vue.ref)(null);
+	const loading = (0, vue.ref)(false);
+	const error = (0, vue.ref)(null);
+	const denied = (0, vue.ref)(false);
+	const activePresetId = (0, vue.ref)(null);
+	const available = (0, vue.computed)(() => !denied.value);
+	const presetsById = (0, vue.computed)(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const row of presets.value) map.set(row.id, row);
+		return map;
+	});
+	const systemPresetsById = (0, vue.computed)(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const sp of systemPresetsResolved.value) map.set(sp.id, sp);
+		return map;
+	});
+	const activePreset = (0, vue.computed)(() => {
+		const id = activePresetId.value;
+		if (!id) return null;
+		if ((0, _atscript_ui_table.isSystemPresetId)(id)) {
+			const entry = systemPresetsById.value.get(id);
+			return entry ? {
+				kind: "system",
+				entry
+			} : null;
+		}
+		const entry = presetsById.value.get(id);
+		return entry ? {
+			kind: "stored",
+			entry
+		} : null;
+	});
+	const currentUser = (0, vue.computed)(() => {
+		const fromCaps = capabilities.value?.userId;
+		if (typeof fromCaps === "string" && fromCaps.length > 0) return fromCaps;
+		for (const row of presets.value) if (row.public !== true && typeof row.user === "string" && row.user.length > 0) return row.user;
+		return null;
+	});
+	function isOwned(id) {
+		if ((0, _atscript_ui_table.isSystemPresetId)(id)) return false;
+		const row = presetsById.value.get(id);
+		if (!row) return false;
+		if (row.public !== true) return true;
+		const me = currentUser.value;
+		return me !== null && row.user === me;
+	}
+	/**
+	* @param opts.capabilities — set `false` for refresh-after-mutation calls
+	*   (fav-toggle, save, rename, delete, public-toggle, set-default) where
+	*   role-derived capabilities can't have changed. Default `true`, used
+	*   only on the initial mount load.
+	*/
+	let batchDepth = 0;
+	let reloadPending = false;
+	async function maybeReloadAfterMutation() {
+		if (batchDepth > 0) {
+			reloadPending = true;
+			return;
+		}
+		await reload({ capabilities: false });
+	}
+	async function batch(fn) {
+		batchDepth++;
+		try {
+			return await fn();
+		} finally {
+			batchDepth--;
+			if (batchDepth === 0 && reloadPending) {
+				reloadPending = false;
+				await reload({ capabilities: false });
+			}
+		}
+	}
+	async function reload(opts = {}) {
+		loading.value = true;
+		error.value = null;
+		try {
+			const result = await client.list(opts);
+			if (result.denied) {
+				denied.value = true;
+				presets.value = [];
+				userConf.value = null;
+				capabilities.value = null;
+				return;
+			}
+			denied.value = false;
+			presets.value = result.presets;
+			userConf.value = result.userConf;
+			if (result.capabilities !== void 0) capabilities.value = result.capabilities;
+		} catch (err) {
+			if ((0, _atscript_ui_table.isAuthError)(err)) {
+				denied.value = true;
+				presets.value = [];
+				userConf.value = null;
+				capabilities.value = null;
+				return;
+			}
+			error.value = err;
+			console.warn("[vue-table] usePresets load failed:", err);
+		} finally {
+			loading.value = false;
+		}
+	}
+	async function savePreset(snapshot) {
+		const id = activePresetId.value;
+		if (!id) throw new Error("[vue-table] usePresets.savePreset: no active preset");
+		if ((0, _atscript_ui_table.isSystemPresetId)(id)) throw new Error("[vue-table] usePresets.savePreset: system presets cannot be overwritten");
+		const row = presetsById.value.get(id);
+		const label = row?.label ?? (row?.data)?.label ?? "";
+		if (!label) throw new Error("[vue-table] usePresets.savePreset: existing preset has no label");
+		await client.savePreset(id, label, snapshot);
+		await maybeReloadAfterMutation();
+	}
+	async function savePresetAs(label, snapshot, saveOpts = {}) {
+		const result = await client.savePresetAs(label, snapshot, saveOpts);
+		await maybeReloadAfterMutation();
+		activePresetId.value = result.id;
+		return result.id;
+	}
+	async function renamePreset(id, label) {
+		if ((0, _atscript_ui_table.isSystemPresetId)(id)) throw new Error("[vue-table] usePresets.renamePreset: system presets cannot be renamed");
+		await client.renamePreset(id, label);
+		await maybeReloadAfterMutation();
+	}
+	async function deletePreset(id) {
+		if ((0, _atscript_ui_table.isSystemPresetId)(id)) throw new Error("[vue-table] usePresets.deletePreset: system presets cannot be deleted");
+		await client.deletePreset(id);
+		if (activePresetId.value === id) activePresetId.value = _atscript_ui_table.STANDARD_PRESET_ID;
+		await maybeReloadAfterMutation();
+	}
+	async function togglePublic(id) {
+		if ((0, _atscript_ui_table.isSystemPresetId)(id)) throw new Error("[vue-table] usePresets.togglePublic: system presets are not public");
+		const row = presetsById.value.get(id);
+		if (!row) return;
+		await client.setPublic(id, row.public !== true);
+		await maybeReloadAfterMutation();
+	}
+	async function setDefault(id) {
+		const user = currentUser.value ?? void 0;
+		await client.upsertUserConf(userConf.value, { defaultPresetId: id ?? void 0 }, user);
+		await maybeReloadAfterMutation();
+	}
+	async function toggleFav(id) {
+		const current = (userConf.value?.data)?.favPresetIds;
+		const set = new Set(current ?? []);
+		if (set.has(id)) set.delete(id);
+		else set.add(id);
+		await setFavorites([...set]);
+	}
+	async function setFavorites(ids) {
+		const user = currentUser.value ?? void 0;
+		await client.upsertUserConf(userConf.value, { favPresetIds: ids }, user);
+		if (userConf.value) userConf.value = {
+			...userConf.value,
+			data: {
+				...userConf.value.data,
+				favPresetIds: ids
+			}
+		};
+		await maybeReloadAfterMutation();
+	}
+	if (opts.autoLoad !== false) reload();
+	return {
+		presets,
+		presetsById,
+		userConf,
+		capabilities,
+		systemPresets: systemPresetsResolved,
+		systemPresetsById,
+		available,
+		loading,
+		error,
+		currentUser,
+		activePresetId,
+		activePreset,
+		isOwned,
+		reload,
+		batch,
+		savePreset,
+		savePresetAs,
+		renamePreset,
+		deletePreset,
+		togglePublic,
+		setDefault,
+		toggleFav,
+		setFavorites
+	};
+}
+//#endregion
+//#region src/composables/use-table.ts
+/** Thin alias over `resetMetaCache` — retained so existing test code keeps working. */
+function clearTableCache() {
+	(0, _atscript_ui.resetMetaCache)();
+}
+/**
+* Main entry composable for table setup.
+*
+* @param url — Table endpoint URL (e.g. "/db/tables/products")
+*/
+function useTable(url, opts) {
+	const entry = (0, _atscript_ui.getMetaEntry)(url, opts?.clientFactory);
+	if (!entry.tableDef) entry.tableDef = Promise.all([entry.meta, entry.type]).then(([meta, type]) => (0, _atscript_ui.createTableDef)(meta, type));
+	const { client } = entry;
+	const defPromise = entry.tableDef;
+	const preset = opts?.preset;
+	const presetsHandle = preset ? usePresets({
+		url: preset.url,
+		tableKey: preset.tableKey,
+		app: preset.app,
+		clientFactory: opts?.clientFactory,
+		systemPresets: preset.systemPresets
+	}) : null;
+	const draftHandle = preset ? useLocalDraft({
+		app: injectPresetsApp(preset.app),
+		tableKey: preset.tableKey,
+		enabled: preset.persistDrafts ?? false,
+		availableAspects: preset.aspects ?? require_use_table_state.DEFAULT_AVAILABLE_ASPECTS
+	}) : null;
+	const { state, internals } = require_use_table_state.createTableState({
+		client,
+		limit: opts?.limit,
+		selection: {
+			rowValueFn: opts?.rowValueFn,
+			selectedRows: opts?.selectedRows
+		},
+		model: {
+			filterFields: opts?.filterFields,
+			columnNames: opts?.columnNames,
+			columnWidths: opts?.columnWidths,
+			sorters: opts?.sorters
+		},
+		query: {
+			fn: opts?.queryFn,
+			forceFilters: opts?.forceFilters,
+			forceSorters: opts?.forceSorters,
+			blockQuery: opts?.blockQuery,
+			queryOnMount: opts?.queryOnMount,
+			urlQueryReady: opts?.urlQueryReady,
+			onUrlQueryChange: opts?.onUrlQueryChange,
+			urlQuerySync: opts?.urlQuerySync
+		},
+		window: {
+			blockSize: opts?.blockSize,
+			dragReleaseDebounceMs: opts?.dragReleaseDebounceMs
+		},
+		actions: {
+			refreshOnAction: opts?.refreshOnAction,
+			onResolved: opts?.onActionResolved
+		},
+		preset: {
+			presetsHandle,
+			draftHandle,
+			availableAspects: preset?.aspects,
+			persistDrafts: preset?.persistDrafts ?? false
+		}
+	});
+	require_as_table_status.useTableSelection(state, { mode: opts?.selectionPersistence ?? "trim" });
+	if (opts?.provideContext !== false) require_use_table_state.provideTableContext({
+		state,
+		client,
+		controls: opts?.controls ?? {},
+		types: opts?.types,
+		components: opts?.components,
+		formTypes: opts?.formTypes,
+		formComponents: opts?.formComponents
+	});
+	defPromise.then((def) => {
+		internals.init(def);
+	}).catch((err) => {
+		state.metadataError.value = err instanceof Error ? err : new Error(String(err));
+	}).finally(() => {
+		state.loadingMetadata.value = false;
+	});
+	return state;
+}
+//#endregion
+//#region src/composables/use-drag-scroll.ts
+/**
+* Pointer-drag horizontal scroll for a container. Listens for pointerdown on
+* the container, then attaches pointermove / pointerup / pointercancel to
+* `window` so drag stays smooth even when the pointer leaves the container
+* (including dragging over an input or outside the viewport).
+*/
+function useDragScroll(el) {
+	let startX = 0;
+	let startScroll = 0;
+	let dragging = false;
+	let pointerId = null;
+	function onMove(e) {
+		if (pointerId !== e.pointerId || !el.value) return;
+		const dx = e.clientX - startX;
+		if (!dragging) {
+			if (Math.abs(dx) < 4) return;
+			dragging = true;
+		}
+		el.value.scrollLeft = startScroll - dx;
+		e.preventDefault();
+	}
+	function onUp(e) {
+		if (pointerId !== e.pointerId) return;
+		window.removeEventListener("pointermove", onMove);
+		window.removeEventListener("pointerup", onUp);
+		window.removeEventListener("pointercancel", onUp);
+		pointerId = null;
+		dragging = false;
+	}
+	function onDown(e) {
+		const target = e.target;
+		if (!el.value || !target) return;
+		if (target.closest("input, textarea, button, [role=button], a")) return;
+		if (e.button !== 0) return;
+		startX = e.clientX;
+		startScroll = el.value.scrollLeft;
+		pointerId = e.pointerId;
+		dragging = false;
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+		window.addEventListener("pointercancel", onUp);
+	}
+	function onWheel(e) {
+		if (!el.value) return;
+		const dx = e.deltaX;
+		const dy = e.deltaY;
+		if (Math.abs(dy) > Math.abs(dx)) {
+			el.value.scrollLeft += dy;
+			e.preventDefault();
+		}
+	}
+	const attach = (node) => {
+		node.addEventListener("pointerdown", onDown);
+		node.addEventListener("wheel", onWheel, { passive: false });
+	};
+	const detach = (node) => {
+		node.removeEventListener("pointerdown", onDown);
+		node.removeEventListener("wheel", onWheel);
+	};
+	(0, vue.watch)(el, (node, prev) => {
+		if (prev) detach(prev);
+		if (node) attach(node);
+	}, { immediate: true });
+	(0, vue.onBeforeUnmount)(() => {
+		if (el.value) detach(el.value);
+		window.removeEventListener("pointermove", onMove);
+		window.removeEventListener("pointerup", onUp);
+		window.removeEventListener("pointercancel", onUp);
+	});
+}
+//#endregion
+//#region src/components/defaults/as-filter-field.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["aria-disabled"];
+const _hoisted_2 = ["for"];
+const _hoisted_3 = { class: "as-filter-field-body" };
+const _hoisted_4 = {
+	key: 0,
+	class: "as-filter-field-loading"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = ["id"];
+const _hoisted_7 = { class: "as-filter-field-dropdown-body" };
+const _hoisted_8 = {
+	key: 0,
+	class: "as-table-query-overlay"
+};
+const _hoisted_9 = {
+	key: 0,
+	class: "as-vh-empty"
+};
+const _hoisted_10 = {
+	key: 0,
+	class: "as-vh-empty-body"
+};
+const _hoisted_11 = { class: "as-vh-empty-code" };
+const _hoisted_12 = {
+	key: 1,
+	class: "as-vh-empty-body"
+};
+const _hoisted_13 = {
+	key: 0,
+	class: "as-filter-field-dropdown-footer"
+};
+const _hoisted_14 = { class: "as-filter-field-input" };
+const _hoisted_15 = ["onClick"];
+const _hoisted_16 = [
+	"id",
+	"value",
+	"onKeydown"
+];
+//#endregion
+//#region src/components/defaults/as-filter-field.vue
+var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-filter-field",
+	props: { column: {
+		type: Object,
+		required: true
+	} },
+	setup(__props) {
+		const props = __props;
+		const { state } = require_use_table_state.useTableContext();
+		const chipsScrollEl = (0, vue.ref)(null);
+		useDragScroll(chipsScrollEl);
+		const info = props.column.valueHelpInfo;
+		const hasValueHelp = !!info;
+		const hasOptions = !!(props.column.options && props.column.options.length > 0);
+		const hasDropdown = hasValueHelp || hasOptions;
+		const filterType = (0, _atscript_ui_table.columnFilterType)(props.column.type);
+		let vhClient;
+		let innerState;
+		const resolved = (0, vue.shallowRef)(null);
+		if (hasValueHelp && info) {
+			vhClient = new _atscript_ui.ValueHelpClient((0, _atscript_ui.getMetaEntry)(info.url).client);
+			innerState = useTable(info.url, {
+				select: "none",
+				queryOnMount: false,
+				limit: 10,
+				provideContext: false
+			});
+		}
+		const dictColumns = (0, vue.computed)(() => {
+			if (!resolved.value || !innerState) return [];
+			const paths = (0, _atscript_ui.valueHelpDictPaths)(resolved.value);
+			return innerState.allColumns.value.filter((c) => paths.has(c.path));
+		});
+		async function ensureResolved() {
+			if (resolved.value) return resolved.value;
+			if (!info) return null;
+			try {
+				resolved.value = await (0, _atscript_ui.resolveValueHelp)(info.url);
+				return resolved.value;
+			} catch {
+				return null;
+			}
+		}
+		function kickoffResolve() {
+			ensureResolved();
+		}
+		const enumRows = hasOptions ? (0, vue.computed)(() => (props.column.options ?? []).map((opt) => ({
+			__key: opt.key,
+			__label: opt.label
+		}))) : void 0;
+		const enumColumns = hasOptions ? [{
+			path: "__label",
+			label: "Value",
+			type: "text",
+			sortable: false,
+			filterable: false,
+			visible: true,
+			order: 0
+		}] : void 0;
+		const dropdownRows = (0, vue.computed)(() => {
+			if (innerState) return innerState.results.value;
+			if (enumRows) return enumRows.value;
+			return [];
+		});
+		const dropdownColumns = (0, vue.computed)(() => {
+			if (hasValueHelp) return dictColumns.value;
+			if (enumColumns) return enumColumns;
+			return [];
+		});
+		const dropdownQuerying = (0, vue.computed)(() => {
+			if (innerState) return innerState.querying.value;
+			return false;
+		});
+		const dropdownQueryError = (0, vue.computed)(() => {
+			if (innerState) return innerState.queryError.value;
+			return null;
+		});
+		const dropdownLoadingMetadata = (0, vue.computed)(() => {
+			if (innerState) return innerState.loadingMetadata.value;
+			return false;
+		});
+		const seeAllCount = (0, vue.computed)(() => {
+			if (innerState) return innerState.totalCount.value;
+			if (enumRows) return enumRows.value.length;
+			return 0;
+		});
+		function extractEqValues(conditions) {
+			if (!conditions) return [];
+			const values = [];
+			for (const c of conditions) if ((0, _atscript_ui_table.isSimpleEq)(c)) values.push(c.value[0]);
+			return values;
+		}
+		const selectedValues = (0, vue.ref)(hasDropdown ? extractEqValues(state.filters.value[props.column.path]) : []);
+		if (hasDropdown) {
+			(0, vue.watch)(selectedValues, (values) => {
+				if ((0, _atscript_ui_table.arraysEqual)(values, extractEqValues(state.filters.value[props.column.path]))) return;
+				const nonEq = (state.filters.value[props.column.path] ?? []).filter((c) => c.type !== "eq");
+				const merged = [...values.map((v) => ({
+					type: "eq",
+					value: [v]
+				})), ...nonEq];
+				if (merged.some(_atscript_ui_table.isFilled)) state.setFieldFilter(props.column.path, merged);
+				else state.removeFieldFilter(props.column.path);
+			});
+			(0, vue.watch)(() => state.filters.value[props.column.path], (conditions) => {
+				const newValues = extractEqValues(conditions);
+				if ((0, _atscript_ui_table.arraysEqual)(newValues, selectedValues.value)) return;
+				selectedValues.value = newValues;
+			});
+		}
+		const chips = (0, vue.computed)(() => {
+			return (state.filters.value[props.column.path] ?? []).filter(_atscript_ui_table.isFilled).map((cond, i) => ({
+				key: `${cond.type}:${i}:${String(cond.value[0] ?? "")}`,
+				label: (0, _atscript_ui_table.formatFilterCondition)(cond),
+				condition: cond
+			}));
+		});
+		function scrollChipsToEnd() {
+			(0, vue.nextTick)(() => {
+				const el = chipsScrollEl.value;
+				if (el) el.scrollLeft = el.scrollWidth;
+			});
+		}
+		(0, vue.watch)(() => chips.value.length, (len, prev) => {
+			if (len > prev) scrollChipsToEnd();
+		});
+		function rowValueFn(row) {
+			if (hasValueHelp && info) return row[info.targetField];
+			if (hasOptions) return row.__key;
+		}
+		const inputId = (0, vue.useId)();
+		const searchTerm = (0, vue.ref)("");
+		const dropdownOpen = (0, vue.ref)(false);
+		if (innerState) (0, vue.watch)(dropdownOpen, async (open) => {
+			if (!open) return;
+			const r = await ensureResolved();
+			await (0, _vueuse_core.until)(() => innerState.tableDef.value).toBeTruthy();
+			if (r) {
+				const dictPaths = (0, _atscript_ui.valueHelpDictPaths)(r);
+				const dictCols = innerState.allColumns.value.filter((c) => dictPaths.has(c.path));
+				if (dictCols.length > 0) innerState.columnNames.value = dictCols.map((c) => c.path);
+			}
+			innerState.query();
+		}, { once: true });
+		const debouncedSearch = hasValueHelp ? (0, _atscript_ui_table.debounce)(() => {
+			doSearch(searchTerm.value);
+		}, 500) : void 0;
+		(0, vue.onBeforeUnmount)(() => {
+			debouncedSearch?.cancel();
+		});
+		function onSearchInput(event) {
+			searchTerm.value = event.target.value;
+			if (hasValueHelp) debouncedSearch();
+		}
+		async function doSearch(text) {
+			if (!vhClient || !innerState) return;
+			const r = await ensureResolved();
+			if (!r) return;
+			innerState.querying.value = true;
+			try {
+				const result = await vhClient.search(r, {
+					text: text || void 0,
+					mode: "filter",
+					limit: 10
+				});
+				innerState.results.value = result.items;
+				innerState.queryError.value = null;
+			} catch (err) {
+				innerState.results.value = [];
+				innerState.queryError.value = err instanceof Error ? err : new Error(String(err));
+			} finally {
+				innerState.querying.value = false;
+			}
+			dropdownOpen.value = false;
+			await (0, vue.nextTick)();
+			await (0, vue.nextTick)();
+			await (0, vue.nextTick)();
+			dropdownOpen.value = true;
+		}
+		function filterFunction(val) {
+			if (!hasOptions || !searchTerm.value) return val;
+			const term = searchTerm.value.toLowerCase();
+			return val.filter((item) => {
+				if (typeof item === "object" && item !== null) {
+					const row = item;
+					return String(row.__key ?? "").toLowerCase().includes(term) || String(row.__label ?? "").toLowerCase().includes(term);
+				}
+				return String(item).toLowerCase().includes(term);
+			});
+		}
+		const noEnumMatches = (0, vue.computed)(() => {
+			if (!dropdownOpen.value || !enumRows) return false;
+			return filterFunction(enumRows.value).length === 0;
+		});
+		function removeChip(chip) {
+			const remaining = (state.filters.value[props.column.path] ?? []).filter((c) => c !== chip.condition);
+			if (remaining.some(_atscript_ui_table.isFilled)) state.setFieldFilter(props.column.path, remaining);
+			else state.removeFieldFilter(props.column.path);
+		}
+		function clearAll() {
+			state.removeFieldFilter(props.column.path);
+		}
+		function openFilterDialog() {
+			dropdownOpen.value = false;
+			state.openFilterDialog(props.column);
+		}
+		function onBackspace() {
+			if (searchTerm.value !== "" || chips.value.length === 0) return;
+			const filled = (state.filters.value[props.column.path] ?? []).filter(_atscript_ui_table.isFilled);
+			if (filled.length === 0) return;
+			const remaining = filled.slice(0, -1);
+			if (remaining.length > 0) state.setFieldFilter(props.column.path, remaining);
+			else state.removeFieldFilter(props.column.path);
+		}
+		function onAnchorClick() {
+			dropdownOpen.value = true;
+			kickoffResolve();
+		}
+		function onInputFocus() {
+			dropdownOpen.value = true;
+			kickoffResolve();
+			scrollChipsToEnd();
+		}
+		function onEnter() {
+			if (hasDropdown || !searchTerm.value.trim()) return;
+			const parsed = (0, _atscript_ui_table.parseFilterInput)(searchTerm.value, filterType, props.column.nullable);
+			if (!parsed) return;
+			const filled = (state.filters.value[props.column.path] ?? []).filter(_atscript_ui_table.isFilled);
+			state.setFieldFilter(props.column.path, [...filled, parsed]);
+			searchTerm.value = "";
+		}
+		function onF4(event) {
+			event.preventDefault();
+			openFilterDialog();
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: "as-filter-field",
+				"aria-disabled": dropdownLoadingMetadata.value ? true : void 0
+			}, [(0, vue.createElementVNode)("label", {
+				for: (0, vue.unref)(inputId),
+				class: "as-filter-field-label"
+			}, (0, vue.toDisplayString)(__props.column.label), 9, _hoisted_2), (0, vue.createElementVNode)("div", _hoisted_3, [
+				dropdownLoadingMetadata.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [..._cache[5] || (_cache[5] = [(0, vue.createElementVNode)("span", {
+					class: "as-filter-field-loading-icon",
+					"aria-hidden": "true"
+				}, null, -1)])])) : (0, vue.unref)(hasDropdown) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ComboboxRoot), {
+					key: 1,
+					modelValue: selectedValues.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedValues.value = $event),
+					open: dropdownOpen.value,
+					"onUpdate:open": _cache[2] || (_cache[2] = ($event) => dropdownOpen.value = $event),
+					multiple: true,
+					"reset-search-term-on-blur": false,
+					"as-child": ""
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxAnchor), { "as-child": "" }, {
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
+							class: "as-filter-field-input",
+							onClick: onAnchorClick
+						}, [(0, vue.createElementVNode)("div", {
+							ref_key: "chipsScrollEl",
+							ref: chipsScrollEl,
+							class: "as-filter-field-chips"
+						}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(chips.value, (chip) => {
+							return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+								key: chip.key,
+								class: "as-filter-field-chip"
+							}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(chip.label) + " ", 1), (0, vue.createElementVNode)("span", {
+								class: "as-filter-field-chip-remove",
+								role: "button",
+								tabindex: "-1",
+								onClick: (0, vue.withModifiers)(($event) => removeChip(chip), ["stop", "prevent"])
+							}, [..._cache[6] || (_cache[6] = [(0, vue.createElementVNode)("span", {
+								class: "i-as-close",
+								"aria-hidden": "true"
+							}, null, -1)])], 8, _hoisted_5)]);
+						}), 128))], 512), (0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxInput), { "as-child": "" }, {
+							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("input", {
+								id: (0, vue.unref)(inputId),
+								class: "as-filter-field-search",
+								onInput: onSearchInput,
+								onKeydown: [(0, vue.withKeys)(onBackspace, ["backspace"]), (0, vue.withKeys)(onF4, ["f4"])],
+								onFocus: onInputFocus
+							}, null, 40, _hoisted_6)]),
+							_: 1
+						})])]),
+						_: 1
+					}), (0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxContent), {
+						class: "as-filter-field-dropdown",
+						"side-offset": 4,
+						align: "start",
+						position: "popper",
+						onOpenAutoFocus: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"]))
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxViewport), null, {
+							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_7, [(0, vue.createVNode)(require_as_table_base.as_table_base_default, {
+								"render-mode": "combobox",
+								"row-value-fn": rowValueFn,
+								columns: dropdownColumns.value,
+								rows: dropdownRows.value,
+								sorters: [],
+								querying: dropdownQuerying.value,
+								"query-error": dropdownQueryError.value,
+								"search-term": searchTerm.value,
+								"sticky-header": true,
+								"column-menu": {
+									sort: false,
+									filters: false,
+									hide: false
+								}
+							}, null, 8, [
+								"columns",
+								"rows",
+								"querying",
+								"query-error",
+								"search-term"
+							]), dropdownQuerying.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_8, [..._cache[7] || (_cache[7] = [(0, vue.createElementVNode)("span", {
+								class: "as-table-query-overlay-icon",
+								"aria-hidden": "true"
+							}, null, -1)])])) : (0, vue.createCommentVNode)("v-if", true)]), noEnumMatches.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_9, [
+								_cache[10] || (_cache[10] = (0, vue.createElementVNode)("span", {
+									class: "as-vh-empty-icon i-as-search",
+									"aria-hidden": "true"
+								}, null, -1)),
+								_cache[11] || (_cache[11] = (0, vue.createElementVNode)("p", { class: "as-vh-empty-title" }, "No matching values", -1)),
+								searchTerm.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_10, [
+									_cache[8] || (_cache[8] = (0, vue.createTextVNode)(" No entries match ", -1)),
+									(0, vue.createElementVNode)("span", _hoisted_11, "\"" + (0, vue.toDisplayString)(searchTerm.value) + "\"", 1),
+									_cache[9] || (_cache[9] = (0, vue.createTextVNode)(". Try a different search. ", -1))
+								])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_12, "No entries available"))
+							])) : (0, vue.createCommentVNode)("v-if", true)]),
+							_: 1
+						}), chips.value.length > 0 || seeAllCount.value > 10 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_13, [chips.value.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+							key: 0,
+							type: "button",
+							onClick: clearAll
+						}, "Reset")) : (0, vue.createCommentVNode)("v-if", true), seeAllCount.value > 10 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+							key: 1,
+							type: "button",
+							onClick: openFilterDialog
+						}, [(0, vue.createTextVNode)(" See All (" + (0, vue.toDisplayString)(seeAllCount.value) + ") ", 1), _cache[12] || (_cache[12] = (0, vue.createElementVNode)("span", { class: "as-kbd" }, "F4", -1))])) : (0, vue.createCommentVNode)("v-if", true)])) : (0, vue.createCommentVNode)("v-if", true)]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["modelValue", "open"])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createCommentVNode)(" Plain input (no dropdown) "), (0, vue.createElementVNode)("div", _hoisted_14, [(0, vue.createElementVNode)("div", {
+					ref_key: "chipsScrollEl",
+					ref: chipsScrollEl,
+					class: "as-filter-field-chips"
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(chips.value, (chip) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						key: chip.key,
+						class: "as-filter-field-chip"
+					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(chip.label) + " ", 1), (0, vue.createElementVNode)("span", {
+						class: "as-filter-field-chip-remove",
+						role: "button",
+						tabindex: "-1",
+						onClick: (0, vue.withModifiers)(($event) => removeChip(chip), ["stop", "prevent"])
+					}, " × ", 8, _hoisted_15)]);
+				}), 128))], 512), (0, vue.createElementVNode)("input", {
+					id: (0, vue.unref)(inputId),
+					class: "as-filter-field-search",
+					value: searchTerm.value,
+					onInput: _cache[3] || (_cache[3] = ($event) => searchTerm.value = $event.target.value),
+					onKeydown: [
+						(0, vue.withKeys)(onBackspace, ["backspace"]),
+						(0, vue.withKeys)((0, vue.withModifiers)(onEnter, ["prevent"]), ["enter"]),
+						(0, vue.withKeys)(onF4, ["f4"])
+					],
+					onFocus: _cache[4] || (_cache[4] = ($event) => scrollChipsToEnd())
+				}, null, 40, _hoisted_16)])], 2112)),
+				(0, vue.createCommentVNode)(" `tabindex=\"-1\"`: don't compete with the field's own input for tab\n           order — Tab moves cleanly between filter fields, F4 on the input\n           opens this dialog. Button stays click-target for mouse users. "),
+				(0, vue.createElementVNode)("button", {
+					type: "button",
+					class: "as-filter-field-f4",
+					tabindex: "-1",
+					"aria-label": "Open filter dialog (F4)",
+					title: "Open filter dialog (F4)",
+					onClick: openFilterDialog
+				}, [..._cache[13] || (_cache[13] = [(0, vue.createElementVNode)("span", {
+					class: "i-as-value-help",
+					"aria-hidden": "true"
+				}, null, -1)])])
+			])], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "AS_PRESETS_APP", {
+	enumerable: true,
+	get: function() {
+		return AS_PRESETS_APP;
+	}
+});
+Object.defineProperty(exports, "as_filter_field_default", {
+	enumerable: true,
+	get: function() {
+		return as_filter_field_default;
+	}
+});
+Object.defineProperty(exports, "clearTableCache", {
+	enumerable: true,
+	get: function() {
+		return clearTableCache;
+	}
+});
+Object.defineProperty(exports, "injectPresetsApp", {
+	enumerable: true,
+	get: function() {
+		return injectPresetsApp;
+	}
+});
+Object.defineProperty(exports, "useLocalDraft", {
+	enumerable: true,
+	get: function() {
+		return useLocalDraft;
+	}
+});
+Object.defineProperty(exports, "usePresets", {
+	enumerable: true,
+	get: function() {
+		return usePresets;
+	}
+});
+Object.defineProperty(exports, "useTable", {
+	enumerable: true,
+	get: function() {
+		return useTable;
+	}
+});