@atscript/vue-table 0.1.147 → 0.1.149

package/dist/{as-filter-field-ByPlGyWz.mjs → as-filter-field-DE6MJMx7.mjs}

@@ -1,11 +1,171 @@
-import { a as useTableContext } from "./use-table-state-1OZfdhQi.mjs";
-import { r as useTable } from "./use-table-DP6Y0kbl.mjs";
-import { t as as_table_base_default } from "./as-table-base-EzKaChOp.mjs";
-import { ValueHelpClient, getMetaEntry, resolveValueHelp, valueHelpDictPaths } from "@atscript/ui";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, onBeforeUnmount, openBlock, ref, renderList, shallowRef, toDisplayString, unref, useId, watch, withCtx, withKeys, withModifiers } from "vue";
-import { arraysEqual, debounce, formatFilterCondition, isFilled, isSimpleEq, parseColumnFilterInput } from "@atscript/ui-table";
+import { a as useTableContext } from "./use-table-state-CIoWhwTD.mjs";
+import { r as useTable } from "./use-table-BYNBpLJt.mjs";
+import { t as useConditionFormat } from "./use-condition-format-5LcuInDy.mjs";
+import { t as as_table_base_default } from "./as-table-base-CsK79vYe.mjs";
+import { NUMERIC_VALUE_KINDS, ValueHelpClient, fetchDistinctValues, getMetaEntry, isPickerDeclined, optionValue, resolveValueHelp, valueHelpDictPaths } from "@atscript/ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, onBeforeUnmount, openBlock, ref, renderList, shallowReactive, shallowRef, toDisplayString, unref, useId, watch, withCtx, withKeys, withModifiers } from "vue";
+import { arraysEqual, columnFilterKind, debounce, isFilled, isSimpleEq, isTemporalKind, parseColumnFilterInput, stableValueKey } from "@atscript/ui-table";
 import { until } from "@vueuse/core";
 import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxRoot, ComboboxViewport } from "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: 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 (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 && 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 = () => fetchDistinctValues(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 ? 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 = shallowRef([]);
+	const count = ref(0);
+	/** More values exist past the first `size` (`count` is then one past `size`). */
+	const more = ref(false);
+	const querying = ref(false);
+	const error = shallowRef(null);
+	/** The first page arrived once — reopening the dropdown does not ask again. */
+	const loaded = 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__ */ defineComponent({
@@ -128,28 +291,34 @@ var as_filter_field_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const { state } = useTableContext();
+		const { formatCondition } = useConditionFormat(state);
+		const isTemporal = computed(() => isTemporalKind(columnFilterKind(props.column)));
 		const chipsScrollEl = 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 = computed(() => hasValuePicker(state, props.column));
 		let vhClient;
 		let innerState;
 		const resolved = shallowRef(null);
-		if (hasValueHelp && info) {
+		if (info) {
 			vhClient = new ValueHelpClient(getMetaEntry(info.url).client);
 			innerState = 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 = computed(() => {
 			if (!resolved.value || !innerState) return [];
 			const paths = 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__ */ defineComponent({
 			try {
 				resolved.value = await 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__ */ defineComponent({
 		}
 		const enumRows = hasOptions ? computed(() => (props.column.options ?? []).map((opt) => ({
 			__key: opt.key,
-			__label: opt.label
+			__label: opt.label,
+			__value: 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 = computed(() => {
 			if (innerState) return innerState.results.value;
+			if (distinctPicker) return distinctPicker.rows.value;
 			if (enumRows) return enumRows.value;
 			return [];
 		});
 		const dropdownColumns = computed(() => {
-			if (hasValueHelp) return dictColumns.value;
+			if (info) return dictColumns.value;
 			if (enumColumns) return enumColumns;
 			return [];
 		});
 		const dropdownQuerying = computed(() => {
 			if (innerState) return innerState.querying.value;
-			return false;
+			return distinctPicker?.querying.value ?? false;
 		});
 		const dropdownQueryError = computed(() => {
 			if (innerState) return innerState.queryError.value;
-			return null;
+			return distinctPicker?.error.value ?? null;
 		});
 		const dropdownLoadingMetadata = computed(() => {
 			if (innerState) return innerState.loadingMetadata.value;
@@ -200,17 +365,21 @@ var as_filter_field_default = /* @__PURE__ */ defineComponent({
 		});
 		const seeAllCount = 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 = 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 (isSimpleEq(c)) values.push(c.value[0]);
 			return values;
 		}
-		const selectedValues = ref(hasDropdown ? extractEqValues(state.filters.value[props.column.path]) : []);
-		if (hasDropdown) {
+		const dropdownCapable = !!info || hasOptions || !!distinct;
+		const selectedValues = ref(dropdownCapable ? extractEqValues(state.filters.value[props.column.path]) : []);
+		if (dropdownCapable) {
 			watch(selectedValues, (values) => {
 				if (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__ */ defineComponent({
 		const chips = computed(() => {
 			return (state.filters.value[props.column.path] ?? []).filter(isFilled).map((cond, i) => ({
 				key: `${cond.type}:${i}:${String(cond.value[0] ?? "")}`,
-				label: formatFilterCondition(cond),
+				label: formatCondition(props.column, cond),
 				condition: cond
 			}));
 		});
@@ -243,8 +412,8 @@ var as_filter_field_default = /* @__PURE__ */ 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 = useId();
 		const searchTerm = ref("");
@@ -260,17 +429,27 @@ var as_filter_field_default = /* @__PURE__ */ defineComponent({
 			}
 			innerState.query();
 		}, { once: true });
-		const debouncedSearch = hasValueHelp ? debounce(() => {
+		const serverSearch = !!info || !!distinct;
+		const debouncedSearch = serverSearch ? debounce(() => {
 			doSearch(searchTerm.value);
 		}, 500) : void 0;
+		if (distinctPicker) {
+			watch(() => stableValueKey(state.forceFilters.value ?? null), () => {
+				distinctPicker.loaded.value = false;
+			});
+			watch(dropdownOpen, (open) => {
+				if (open && !distinctPicker.loaded.value && !distinctPicker.querying.value) distinctPicker.load("");
+			});
+		}
 		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__ */ 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__ */ defineComponent({
 			});
 		}
 		const noEnumMatches = 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__ */ defineComponent({
 			scrollChipsToEnd();
 		}
 		function onEnter() {
-			if (hasDropdown || !searchTerm.value.trim()) return;
+			if (hasDropdown.value || !searchTerm.value.trim()) return;
 			const parsed = parseColumnFilterInput(searchTerm.value, props.column);
 			if (!parsed) return;
 			const filled = (state.filters.value[props.column.path] ?? []).filter(isFilled);
@@ -356,7 +539,7 @@ var as_filter_field_default = /* @__PURE__ */ defineComponent({
 				dropdownLoadingMetadata.value ? (openBlock(), createElementBlock("div", _hoisted_4, [..._cache[5] || (_cache[5] = [createElementVNode("span", {
 					class: "as-filter-field-loading-icon",
 					"aria-hidden": "true"
-				}, null, -1)])])) : unref(hasDropdown) ? (openBlock(), createBlock(unref(ComboboxRoot), {
+				}, null, -1)])])) : hasDropdown.value ? (openBlock(), createBlock(unref(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__ */ defineComponent({
 					"onUpdate:open": _cache[2] || (_cache[2] = ($event) => dropdownOpen.value = $event),
 					multiple: true,
 					"reset-search-term-on-blur": false,
-					"ignore-filter": hasValueHelp,
+					"ignore-filter": unref(serverSearch),
 					"as-child": ""
 				}, {
 					default: withCtx(() => [createVNode(unref(ComboboxAnchor), { "as-child": "" }, {
@@ -452,11 +635,15 @@ var as_filter_field_default = /* @__PURE__ */ defineComponent({
 							key: 1,
 							type: "button",
 							onClick: openFilterDialog
-						}, [createTextVNode(" See All (" + toDisplayString(seeAllCount.value) + ") ", 1), _cache[12] || (_cache[12] = createElementVNode("span", { class: "as-kbd" }, "F4", -1))])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)]),
+						}, [createTextVNode(" See All (" + toDisplayString(seeAllLabel.value) + ") ", 1), _cache[12] || (_cache[12] = createElementVNode("span", { class: "as-kbd" }, "F4", -1))])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)]),
 						_: 1
 					})]),
 					_: 1
-				}, 8, ["modelValue", "open"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode(" Plain input (no dropdown) "), createElementVNode("div", _hoisted_14, [createElementVNode("div", {
+				}, 8, [
+					"modelValue",
+					"open",
+					"ignore-filter"
+				])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode(" Plain input (no dropdown) "), createElementVNode("div", _hoisted_14, [createElementVNode("div", {
 					ref_key: "chipsScrollEl",
 					ref: chipsScrollEl,
 					class: "as-filter-field-chips"
@@ -474,6 +661,7 @@ var as_filter_field_default = /* @__PURE__ */ defineComponent({
 					id: 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: [
 						withKeys(onBackspace, ["backspace"]),
@@ -499,4 +687,4 @@ var as_filter_field_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { as_filter_field_default as t };
+export { valueColumn as a, hasValuePicker as i, createDistinctPager as n, declineIfRejected as r, as_filter_field_default as t };

package/dist/as-filter-field.cjs

@@ -1,2 +1,2 @@
-const require_as_filter_field = require("./as-filter-field-FTrxFkTw.cjs");
+const require_as_filter_field = require("./as-filter-field-BsucQwbm.cjs");
 module.exports = require_as_filter_field.as_filter_field_default;

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

@@ -1,2 +1,2 @@
-import { t as _default } from "./as-filter-field.vue-DTpuDkHh.mjs";
+import { t as _default } from "./as-filter-field.vue-BbXLhd6O.mjs";
 export { _default as default };

package/dist/as-filter-field.mjs

@@ -1,2 +1,2 @@
-import { t as as_filter_field_default } from "./as-filter-field-ByPlGyWz.mjs";
+import { t as as_filter_field_default } from "./as-filter-field-DE6MJMx7.mjs";
 export { as_filter_field_default as default };