@atscript/vue-table 0.1.147 → 0.1.148

package/dist/{as-filter-dialog-Co0WfWOe.cjs → as-filter-dialog-KjvJdaMg.cjs}

@@ -1,12 +1,14 @@
-const require_use_table_state = require("./use-table-state-sDnqOi3b.cjs");
-const require_use_table = require("./use-table-CydIJZbx.cjs");
-const require_use_table_nav_bridge = require("./use-table-nav-bridge-B7A30yja.cjs");
-const require_use_table_component = require("./use-table-component-aqfGzECx.cjs");
-const require_as_config_dialog = require("./as-config-dialog-BJkBzaku.cjs");
+const require_use_table_state = require("./use-table-state-BQchKxUr.cjs");
+const require_use_table = require("./use-table-C9qI-TL6.cjs");
+const require_use_table_nav_bridge = require("./use-table-nav-bridge-Gm4ZfOjJ.cjs");
+const require_use_table_component = require("./use-table-component-CsdvdGJT.cjs");
+const require_as_config_dialog = require("./as-config-dialog-CnIvMsK0.cjs");
 const require_use_seed_on_open = require("./use-seed-on-open-Dg9I89fU.cjs");
-const require_as_filter_input = require("./as-filter-input-DJu2k9gO.cjs");
-const require_as_window_table = require("./as-window-table-_flc8o64.cjs");
-const require_as_filters = require("./as-filters-W3iMELuL.cjs");
+const require_use_condition_format = require("./use-condition-format-DrgfX6xL.cjs");
+const require_as_filter_field = require("./as-filter-field-BsucQwbm.cjs");
+const require_as_filter_input = require("./as-filter-input-ChJ8JE6-.cjs");
+const require_as_window_table = require("./as-window-table-ubm2u8_i.cjs");
+const require_as_filters = require("./as-filters-CYC_SXaA.cjs");
 let _atscript_ui = require("@atscript/ui");
 let vue = require("vue");
 let _atscript_ui_table = require("@atscript/ui-table");
@@ -39,11 +41,12 @@ var as_filter_conditions_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const props = __props;
 		const FilterInput = require_use_table_component.useTableComponent("filterInput", require_as_filter_input.as_filter_input_default);
 		const model = (0, vue.useModel)(__props, "modelValue");
-		const filterType = (0, vue.computed)(() => (0, _atscript_ui_table.columnFilterType)(props.column.type));
-		const availableConditions = (0, vue.computed)(() => (0, _atscript_ui_table.columnFilterConditions)(props.column));
-		const defCondition = (0, vue.computed)(() => (0, _atscript_ui_table.columnDefaultCondition)(props.column));
-		const isDateType = (0, vue.computed)(() => filterType.value === "date");
-		const shortcuts = (0, vue.computed)(() => isDateType.value ? (0, _atscript_ui_table.dateShortcuts)() : []);
+		const spec = (0, vue.computed)(() => (0, _atscript_ui_table.columnFilter)(props.column));
+		const filterType = (0, vue.computed)(() => spec.value.kind);
+		const availableConditions = (0, vue.computed)(() => spec.value.conditions);
+		const defCondition = (0, vue.computed)(() => spec.value.defaultCondition);
+		const allShortcuts = (0, _atscript_ui_table.temporalShortcuts)();
+		const shortcuts = (0, vue.computed)(() => (0, _atscript_ui_table.isTemporalKind)(filterType.value) ? allShortcuts : []);
 		function updateCondition(index, update) {
 			model.value = model.value.map((c, i) => i === index ? {
 				...c,
@@ -63,11 +66,11 @@ var as_filter_conditions_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				value: []
 			}];
 		}
-		function applyShortcut(dates) {
-			model.value = [{
-				type: "bw",
-				value: [dates[0], dates[1]]
-			}];
+		function applyShortcut(sc) {
+			model.value = sc.conditions.map((c) => ({
+				type: c.type,
+				value: [...c.value]
+			}));
 		}
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
@@ -87,7 +90,7 @@ var as_filter_conditions_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							return (0, vue.openBlock)(), (0, vue.createElementBlock)("option", {
 								key: ct,
 								value: ct
-							}, (0, vue.toDisplayString)((0, vue.unref)(_atscript_ui_table.conditionLabel)(ct)), 9, _hoisted_2$2);
+							}, (0, vue.toDisplayString)((0, vue.unref)(_atscript_ui_table.conditionLabel)(ct, filterType.value)), 9, _hoisted_2$2);
 						}), 128))], 40, _hoisted_1$2),
 						((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(FilterInput)), {
 							column: __props.column,
@@ -118,12 +121,12 @@ var as_filter_conditions_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					class: "as-filter-add-condition",
 					onClick: addCondition
 				}, " + Add condition "),
-				isDateType.value && shortcuts.value.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$2, [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("span", { class: "as-filter-shortcuts-label" }, "Quick:", -1)), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(shortcuts.value, (sc) => {
+				shortcuts.value.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$2, [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("span", { class: "as-filter-shortcuts-label" }, "Quick:", -1)), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(shortcuts.value, (sc) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
-						key: sc.label,
+						key: sc.id,
 						type: "button",
 						class: "as-filter-shortcut-btn",
-						onClick: ($event) => applyShortcut(sc.dates)
+						onClick: ($event) => applyShortcut(sc)
 					}, (0, vue.toDisplayString)(sc.label), 9, _hoisted_5$2);
 				}), 128))])) : (0, vue.createCommentVNode)("v-if", true)
 			], 64);
@@ -163,7 +166,9 @@ var as_filter_value_help_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	setup(__props) {
 		const props = __props;
 		const model = (0, vue.useModel)(__props, "modelValue");
+		const outer = require_use_table_state.useTableContextOptional();
 		const info = props.column.valueHelpInfo;
+		const distinct = props.column.distinct;
 		const options = props.column.options;
 		function modelToValues(conds) {
 			const values = [];
@@ -187,22 +192,36 @@ var as_filter_value_help_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			provideContext: true,
 			rowValueFn: (row) => row[info.targetField],
 			selectionPersistence: "persist",
-			selectedRows: selectionRef
+			selectedRows: selectionRef,
+			forceFilters: info.filter,
+			alwaysSelected: [info.targetField]
 		});
-		else if (options) {
+		else if (distinct) {
+			const fetchPage = require_as_filter_field.createDistinctPager(outer?.state, props.column);
+			const { state } = require_use_table_state.createStaticTableState({
+				rows: [],
+				columns: [require_as_filter_field.valueColumn(false)],
+				searchPaths: ["__label"],
+				limit: 100,
+				selection: {
+					rowValueFn: (row) => row.__value,
+					selectedRows: selectionRef
+				},
+				remote: ({ searchTerm }, page, size) => fetchPage(searchTerm.trim(), page, size)
+			});
+			innerState = state;
+			require_use_table_state.provideTableContext({
+				state,
+				client: {},
+				controls: {}
+			});
+		} else if (options) {
 			const { state } = require_use_table_state.createStaticTableState({
 				rows: options.map((o) => ({
 					__value: o.key,
 					__label: o.label
 				})),
-				columns: [{
-					path: "__label",
-					label: "Value",
-					type: "text",
-					sortable: true,
-					filterable: false,
-					order: 0
-				}],
+				columns: [require_as_filter_field.valueColumn(true)],
 				searchPaths: ["__label"],
 				selection: {
 					rowValueFn: (row) => row.__value,
@@ -219,7 +238,9 @@ var as_filter_value_help_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		if (info) (0, vue.onMounted)(() => {
 			(0, _atscript_ui.resolveValueHelp)(info.url).then((r) => {
 				resolved.value = r;
-			}).catch(() => {});
+			}).catch((err) => {
+				require_as_filter_field.declineIfRejected(outer?.state, info, err);
+			});
 		});
 		if (info && innerState) {
 			const fkState = innerState;
@@ -229,7 +250,8 @@ var as_filter_value_help_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				initialized = true;
 				stop();
 				const dictPaths = (0, _atscript_ui.valueHelpDictPaths)(r);
-				const dictCols = fkState.allColumns.value.filter((c) => dictPaths.has(c.path));
+				const pinned = new Set(info.pinned);
+				const dictCols = fkState.allColumns.value.filter((c) => dictPaths.has(c.path) && !pinned.has(c.path));
 				fkState.columnNames.value = dictCols.map((c) => c.path);
 				if (fkState.filterFields.value.length === 0) fkState.filterFields.value = dictCols.filter(_atscript_ui_table.isColumnFilterable).map((c) => c.path);
 				fkState.query();
@@ -332,6 +354,7 @@ var as_filter_dialog_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "as-filter-dialog",
 	setup(__props) {
 		const { state } = require_use_table_state.useTableContext();
+		const { formatCondition } = require_use_condition_format.useConditionFormat(state);
 		const FilterValueHelp = require_use_table_component.useTableComponent("filterValueHelp", as_filter_value_help_default);
 		const isOpen = (0, vue.computed)({
 			get: () => state.filterDialogColumn.value !== null,
@@ -340,7 +363,7 @@ var as_filter_dialog_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}
 		});
 		const column = (0, vue.computed)(() => state.filterDialogColumn.value);
-		const hasValueHelp = (0, vue.computed)(() => !!column.value && column.value.filterable && (!!column.value.valueHelpInfo || column.value.options != null && column.value.options.length > 0));
+		const hasValueHelp = (0, vue.computed)(() => !!column.value && column.value.filterable && require_as_filter_field.hasValuePicker(state, column.value));
 		const defCondition = (0, vue.computed)(() => column.value ? (0, _atscript_ui_table.columnDefaultCondition)(column.value) : "eq");
 		const valueHelpConditions = (0, vue.ref)([]);
 		const freeConditions = (0, vue.ref)([]);
@@ -366,7 +389,7 @@ var as_filter_dialog_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			valueHelpConditions.value.forEach((c, i) => {
 				if ((0, _atscript_ui_table.isFilled)(c)) result.push({
 					key: `vh:${i}:${String(c.value[0] ?? "")}`,
-					label: (0, _atscript_ui_table.formatFilterCondition)(c),
+					label: formatCondition(column.value, c),
 					bucket: "value-help",
 					index: i
 				});
@@ -374,7 +397,7 @@ var as_filter_dialog_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			freeConditions.value.forEach((c, i) => {
 				if ((0, _atscript_ui_table.isFilled)(c)) result.push({
 					key: `fc:${i}:${c.type}:${String(c.value[0] ?? "")}`,
-					label: (0, _atscript_ui_table.formatFilterCondition)(c),
+					label: formatCondition(column.value, c),
 					bucket: "free",
 					index: i
 				});

package/dist/as-filter-dialog.cjs

@@ -1,2 +1,2 @@
-const require_as_filter_dialog = require("./as-filter-dialog-Co0WfWOe.cjs");
+const require_as_filter_dialog = require("./as-filter-dialog-KjvJdaMg.cjs");
 module.exports = require_as_filter_dialog.as_filter_dialog_default;

package/dist/as-filter-dialog.d.mts

@@ -1,2 +1,2 @@
-import { t as _default } from "./as-filter-dialog.vue-WYXGtymZ.mjs";
+import { t as _default } from "./as-filter-dialog.vue-likNLqzF.mjs";
 export { _default as default };

package/dist/as-filter-dialog.mjs

@@ -1,2 +1,2 @@
-import { t as as_filter_dialog_default } from "./as-filter-dialog-CxjO-Ge5.mjs";
+import { t as as_filter_dialog_default } from "./as-filter-dialog-DNFR30fV.mjs";
 export { as_filter_dialog_default as default };

package/dist/{as-filter-field-FTrxFkTw.cjs → as-filter-field-BsucQwbm.cjs}

@@ -1,11 +1,171 @@
-const require_use_table_state = require("./use-table-state-sDnqOi3b.cjs");
-const require_use_table = require("./use-table-CydIJZbx.cjs");
-const require_as_table_base = require("./as-table-base-LZ26YlWp.cjs");
+const require_use_table_state = require("./use-table-state-BQchKxUr.cjs");
+const require_use_table = require("./use-table-C9qI-TL6.cjs");
+const require_use_condition_format = require("./use-condition-format-DrgfX6xL.cjs");
+const require_as_table_base = require("./as-table-base-Dvey_Gie.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/use-value-pickers.ts
+/** The single "Value" column of an enum or distinct-values picker table (rows carry `__value` / `__label`). */
+function valueColumn(sortable) {
+	return {
+		path: "__label",
+		label: "Value",
+		type: "text",
+		sortable,
+		filterable: false,
+		nullable: false,
+		order: 0
+	};
+}
+/** How long an unsearched first page is reused (the inline field and the dialog share it). */
+const PAGE1_TTL_MS = 3e4;
+const createStore = () => ({
+	declined: (0, vue.shallowReactive)(/* @__PURE__ */ new Set()),
+	page1: /* @__PURE__ */ new Map()
+});
+const stores = /* @__PURE__ */ new WeakMap();
+function storeOf(host) {
+	const def = host?.tableDef.value;
+	if (!def) return createStore();
+	let store = stores.get(def);
+	if (!store) {
+		store = createStore();
+		stores.set(def, store);
+	}
+	return store;
+}
+const keyOf = (info) => `${info.url}\0${info.targetField}`;
+/**
+* Whether `column` offers a value picker: literal options, the distinct values of
+* its own table, or a dictionary the server has not declined for this table —
+* and only on a column the server filters by value with the operators a picker
+* emits (`$eq` / `$in`): an existence-only (JSON-stored) column takes the
+* empty / not-empty input instead.
+*/
+function hasValuePicker(host, column) {
+	if (!column.filterable) return false;
+	const ops = column.filterOps;
+	if (ops && !(ops.includes("$eq") || ops.includes("$in"))) return false;
+	if (column.options?.length || column.distinct) return true;
+	const info = column.valueHelpInfo;
+	return !!info && !storeOf(host).declined.has(keyOf(info));
+}
+/**
+* The dictionary answered 4xx (not readable for this caller): this table stops
+* offering that picker and the column takes free text. Anything else is no verdict.
+*/
+function declineIfRejected(host, info, err) {
+	if ((0, _atscript_ui.isPickerDeclined)(err)) storeOf(host).declined.add(keyOf(info));
+}
+/**
+* Pager over the distinct values of `column.distinct`: `fetch(searchTerm, page, size)`
+* asks the table's controller via `$groupBy`. Values are ordered (and so paged) only
+* on a sortable column; otherwise the first `size` values are the whole list — search
+* narrows it. A 4xx rejects: the picker shows the error. An unsearched first page is
+* reused for a short while, so reopening a picker (or its dialog) does not re-ask.
+*/
+function createDistinctPager(host, column) {
+	const { url, field } = column.distinct;
+	const numeric = column.valueKind !== void 0 && _atscript_ui.NUMERIC_VALUE_KINDS.has(column.valueKind);
+	const paged = column.sortable;
+	return async function fetch(searchTerm, page, size) {
+		const text = searchTerm.trim();
+		const skip = paged ? (page - 1) * size : 0;
+		const empty = !paged && page > 1;
+		const scope = host?.forceFilters?.value;
+		const load = () => (0, _atscript_ui.fetchDistinctValues)((0, _atscript_ui.getMetaEntry)(url).client, field, {
+			text,
+			limit: size,
+			skip,
+			sortable: paged,
+			numeric,
+			filter: scope
+		});
+		let result;
+		if (empty) result = {
+			items: [],
+			hasMore: false
+		};
+		else if (text || page > 1) result = await load();
+		else {
+			const store = storeOf(host);
+			const key = `${url}\0${field}\0${size}\0${scope ? (0, _atscript_ui_table.stableValueKey)(scope) : ""}`;
+			let hit = store.page1.get(key);
+			if (!hit || Date.now() - hit.at > PAGE1_TTL_MS) {
+				const pending = load();
+				hit = {
+					at: Date.now(),
+					result: pending
+				};
+				store.page1.set(key, hit);
+				pending.catch(() => store.page1.delete(key));
+			}
+			result = await hit.result;
+		}
+		const hasMore = paged && result.hasMore;
+		const count = skip + result.items.length + (hasMore ? 1 : 0);
+		return {
+			data: result.items.map((v) => ({
+				__value: v,
+				__label: String(v)
+			})),
+			count,
+			page,
+			itemsPerPage: size,
+			pages: Math.max(1, Math.ceil(count / size))
+		};
+	};
+}
+/**
+* Reactive state of an inline distinct-values dropdown over `pager`: the first
+* `shown` values of the first `size`, and how many exist (`count`, one past `size`
+* when more follow — the dialog pages the rest). A superseded search is dropped.
+*/
+function useDistinctPicker(pager, size, shown) {
+	const rows = (0, vue.shallowRef)([]);
+	const count = (0, vue.ref)(0);
+	/** More values exist past the first `size` (`count` is then one past `size`). */
+	const more = (0, vue.ref)(false);
+	const querying = (0, vue.ref)(false);
+	const error = (0, vue.shallowRef)(null);
+	/** The first page arrived once — reopening the dropdown does not ask again. */
+	const loaded = (0, vue.ref)(false);
+	let seq = 0;
+	async function load(text) {
+		const mine = ++seq;
+		querying.value = true;
+		try {
+			const res = await pager(text, 1, size);
+			if (mine !== seq) return;
+			rows.value = res.data.slice(0, shown);
+			count.value = res.count;
+			more.value = res.count > size;
+			error.value = null;
+			loaded.value = true;
+		} catch (err) {
+			if (mine !== seq) return;
+			rows.value = [];
+			count.value = 0;
+			more.value = false;
+			error.value = err instanceof Error ? err : new Error(String(err));
+		} finally {
+			if (mine === seq) querying.value = false;
+		}
+	}
+	return {
+		rows,
+		count,
+		more,
+		querying,
+		error,
+		loaded,
+		load
+	};
+}
+//#endregion
 //#region src/composables/use-drag-scroll.ts
 /**
 * Pointer-drag horizontal scroll for a container. Listens for pointerdown on
@@ -115,8 +275,11 @@ const _hoisted_15 = ["onClick"];
 const _hoisted_16 = [
 	"id",
 	"value",
+	"placeholder",
 	"onKeydown"
 ];
+const DISTINCT_WINDOW = 100;
+const DISTINCT_SHOWN = 10;
 //#endregion
 //#region src/components/defaults/as-filter-field.vue
 var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -128,28 +291,34 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	setup(__props) {
 		const props = __props;
 		const { state } = require_use_table_state.useTableContext();
+		const { formatCondition } = require_use_condition_format.useConditionFormat(state);
+		const isTemporal = (0, vue.computed)(() => (0, _atscript_ui_table.isTemporalKind)((0, _atscript_ui_table.columnFilterKind)(props.column)));
 		const chipsScrollEl = (0, vue.ref)(null);
 		useDragScroll(chipsScrollEl);
 		const info = props.column.valueHelpInfo;
-		const hasValueHelp = !!info;
+		const distinct = props.column.distinct;
 		const hasOptions = !!(props.column.options && props.column.options.length > 0);
-		const hasDropdown = hasValueHelp || hasOptions;
+		const hasDropdown = (0, vue.computed)(() => hasValuePicker(state, props.column));
 		let vhClient;
 		let innerState;
 		const resolved = (0, vue.shallowRef)(null);
-		if (hasValueHelp && info) {
+		if (info) {
 			vhClient = new _atscript_ui.ValueHelpClient((0, _atscript_ui.getMetaEntry)(info.url).client);
 			innerState = require_use_table.useTable(info.url, {
 				select: "none",
 				queryOnMount: false,
 				limit: 10,
-				provideContext: false
+				provideContext: false,
+				forceFilters: info.filter,
+				alwaysSelected: [info.targetField]
 			});
 		}
+		const distinctPicker = distinct ? useDistinctPicker(createDistinctPager(state, props.column), DISTINCT_WINDOW, DISTINCT_SHOWN) : void 0;
 		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));
+			const pinned = new Set(info?.pinned);
+			return innerState.allColumns.value.filter((c) => paths.has(c.path) && !pinned.has(c.path));
 		});
 		async function ensureResolved() {
 			if (resolved.value) return resolved.value;
@@ -157,7 +326,8 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			try {
 				resolved.value = await (0, _atscript_ui.resolveValueHelp)(info.url);
 				return resolved.value;
-			} catch {
+			} catch (err) {
+				declineIfRejected(state, info, err);
 				return null;
 			}
 		}
@@ -166,33 +336,28 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}
 		const enumRows = hasOptions ? (0, vue.computed)(() => (props.column.options ?? []).map((opt) => ({
 			__key: opt.key,
-			__label: opt.label
+			__label: opt.label,
+			__value: (0, _atscript_ui.optionValue)(opt)
 		}))) : void 0;
-		const enumColumns = hasOptions ? [{
-			path: "__label",
-			label: "Value",
-			type: "text",
-			sortable: false,
-			filterable: false,
-			order: 0
-		}] : void 0;
+		const enumColumns = hasOptions || distinct ? [valueColumn(false)] : void 0;
 		const dropdownRows = (0, vue.computed)(() => {
 			if (innerState) return innerState.results.value;
+			if (distinctPicker) return distinctPicker.rows.value;
 			if (enumRows) return enumRows.value;
 			return [];
 		});
 		const dropdownColumns = (0, vue.computed)(() => {
-			if (hasValueHelp) return dictColumns.value;
+			if (info) return dictColumns.value;
 			if (enumColumns) return enumColumns;
 			return [];
 		});
 		const dropdownQuerying = (0, vue.computed)(() => {
 			if (innerState) return innerState.querying.value;
-			return false;
+			return distinctPicker?.querying.value ?? false;
 		});
 		const dropdownQueryError = (0, vue.computed)(() => {
 			if (innerState) return innerState.queryError.value;
-			return null;
+			return distinctPicker?.error.value ?? null;
 		});
 		const dropdownLoadingMetadata = (0, vue.computed)(() => {
 			if (innerState) return innerState.loadingMetadata.value;
@@ -200,17 +365,21 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const seeAllCount = (0, vue.computed)(() => {
 			if (innerState) return innerState.totalCount.value;
+			if (distinctPicker) return distinctPicker.count.value;
 			if (enumRows) return enumRows.value.length;
 			return 0;
 		});
+		/** "100+" when a distinct picker has more values than its first page (its count is one past it). */
+		const seeAllLabel = (0, vue.computed)(() => !innerState && distinctPicker?.more.value ? `${distinctPicker.count.value - 1}+` : String(seeAllCount.value));
 		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) {
+		const dropdownCapable = !!info || hasOptions || !!distinct;
+		const selectedValues = (0, vue.ref)(dropdownCapable ? extractEqValues(state.filters.value[props.column.path]) : []);
+		if (dropdownCapable) {
 			(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");
@@ -229,7 +398,7 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		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),
+				label: formatCondition(props.column, cond),
 				condition: cond
 			}));
 		});
@@ -243,8 +412,8 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (len > prev) scrollChipsToEnd();
 		});
 		function rowValueFn(row) {
-			if (hasValueHelp && info) return row[info.targetField];
-			if (hasOptions) return row.__key;
+			if (info) return row[info.targetField];
+			if (hasOptions || distinct) return row.__value;
 		}
 		const inputId = (0, vue.useId)();
 		const searchTerm = (0, vue.ref)("");
@@ -260,17 +429,27 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}
 			innerState.query();
 		}, { once: true });
-		const debouncedSearch = hasValueHelp ? (0, _atscript_ui_table.debounce)(() => {
+		const serverSearch = !!info || !!distinct;
+		const debouncedSearch = serverSearch ? (0, _atscript_ui_table.debounce)(() => {
 			doSearch(searchTerm.value);
 		}, 500) : void 0;
+		if (distinctPicker) {
+			(0, vue.watch)(() => (0, _atscript_ui_table.stableValueKey)(state.forceFilters.value ?? null), () => {
+				distinctPicker.loaded.value = false;
+			});
+			(0, vue.watch)(dropdownOpen, (open) => {
+				if (open && !distinctPicker.loaded.value && !distinctPicker.querying.value) distinctPicker.load("");
+			});
+		}
 		(0, vue.onBeforeUnmount)(() => {
 			debouncedSearch?.cancel();
 		});
 		function onSearchInput(event) {
 			searchTerm.value = event.target.value;
-			if (hasValueHelp) debouncedSearch();
+			if (serverSearch) debouncedSearch();
 		}
 		async function doSearch(text) {
+			if (distinctPicker) return distinctPicker.load(text);
 			if (!vhClient || !innerState) return;
 			const r = await ensureResolved();
 			if (!r) return;
@@ -279,7 +458,9 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				const result = await vhClient.search(r, {
 					text: text || void 0,
 					mode: "filter",
-					limit: 10
+					limit: 10,
+					filter: info?.filter,
+					valueField: info?.targetField
 				});
 				innerState.results.value = result.items;
 				innerState.queryError.value = null;
@@ -302,7 +483,9 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			});
 		}
 		const noEnumMatches = (0, vue.computed)(() => {
-			if (!dropdownOpen.value || !enumRows) return false;
+			if (!dropdownOpen.value) return false;
+			if (distinctPicker) return !distinctPicker.querying.value && !distinctPicker.error.value && distinctPicker.rows.value.length === 0;
+			if (!enumRows) return false;
 			return filterFunction(enumRows.value).length === 0;
 		});
 		function removeChip(chip) {
@@ -334,7 +517,7 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			scrollChipsToEnd();
 		}
 		function onEnter() {
-			if (hasDropdown || !searchTerm.value.trim()) return;
+			if (hasDropdown.value || !searchTerm.value.trim()) return;
 			const parsed = (0, _atscript_ui_table.parseColumnFilterInput)(searchTerm.value, props.column);
 			if (!parsed) return;
 			const filled = (state.filters.value[props.column.path] ?? []).filter(_atscript_ui_table.isFilled);
@@ -356,7 +539,7 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				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), {
+				}, null, -1)])])) : hasDropdown.value ? ((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),
@@ -364,7 +547,7 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"onUpdate:open": _cache[2] || (_cache[2] = ($event) => dropdownOpen.value = $event),
 					multiple: true,
 					"reset-search-term-on-blur": false,
-					"ignore-filter": hasValueHelp,
+					"ignore-filter": (0, vue.unref)(serverSearch),
 					"as-child": ""
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxAnchor), { "as-child": "" }, {
@@ -452,11 +635,15 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							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)]),
+						}, [(0, vue.createTextVNode)(" See All (" + (0, vue.toDisplayString)(seeAllLabel.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", {
+				}, 8, [
+					"modelValue",
+					"open",
+					"ignore-filter"
+				])) : ((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"
@@ -474,6 +661,7 @@ var as_filter_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					id: (0, vue.unref)(inputId),
 					class: "as-filter-field-search",
 					value: searchTerm.value,
+					placeholder: isTemporal.value ? "YYYY-MM-DD" : void 0,
 					onInput: _cache[3] || (_cache[3] = ($event) => searchTerm.value = $event.target.value),
 					onKeydown: [
 						(0, vue.withKeys)(onBackspace, ["backspace"]),
@@ -505,3 +693,27 @@ Object.defineProperty(exports, "as_filter_field_default", {
 		return as_filter_field_default;
 	}
 });
+Object.defineProperty(exports, "createDistinctPager", {
+	enumerable: true,
+	get: function() {
+		return createDistinctPager;
+	}
+});
+Object.defineProperty(exports, "declineIfRejected", {
+	enumerable: true,
+	get: function() {
+		return declineIfRejected;
+	}
+});
+Object.defineProperty(exports, "hasValuePicker", {
+	enumerable: true,
+	get: function() {
+		return hasValuePicker;
+	}
+});
+Object.defineProperty(exports, "valueColumn", {
+	enumerable: true,
+	get: function() {
+		return valueColumn;
+	}
+});