@vuu-ui/vuu-filters 4.0.0-beta.7 → 4.0.0

package/README.md

@@ -15,6 +15,46 @@ Vuu also supports `MultiValueFilterClause`
 
 ## ColumnFilter
 
+Set `showOperatorPicker` to render a compact operator dropdown before the value.
+It is opt-in; existing fixed-operator filters are unchanged.
+
+```tsx
+<ColumnFilter
+  column={{ name: "price", serverDataType: "double" }}
+  showOperatorPicker
+  operators={["=", ">", ">=", "between-inclusive"]}
+  defaultValue=""
+  onCommit={handleCommit}
+/>
+```
+
+`operators` replaces the default options and preserves their order. Numeric
+(including scaled-decimal) and temporal columns default to `=`, `!=`, `>`, `>=`,
+`<`, `<=`; text columns to `=`, `!=`, `starts`, `ends`, `contains`; boolean
+columns to `=`, `!=`. Numeric and temporal filters can also opt into `between`
+and `between-inclusive`. Multi-value `in` filters are not supported by this
+control. Empty lists, incompatible operators, and selections outside the list
+raise an error.
+
+Use `defaultOperator` for an uncontrolled picker, or `operator` together with
+`onOperatorChange(event, operator)` for a controlled picker. The initial operator
+is `=` if allowed, otherwise the first option. Operator control is independent
+of value control (`value` / `defaultValue`).
+
+Selecting a different operator preserves the value and immediately commits a
+populated, valid filter using the new operator. An already empty value only changes the
+selection. Switching to a range retains the lower value and starts with an empty
+upper value; switching back retains the lower value (and clears a filter if only
+the upper value was populated). Incomplete ranges use the
+existing partial-range commit behaviour. The operator picker respects
+`InputProps.disabled` and `InputProps.readOnly`.
+
+`FilterContainerColumnFilter` accepts the same picker options, manages selection
+internally, and restores operators and values from externally loaded or saved
+filters. A loaded operator must be included in the configured options. Clearing
+an external filter resets the operator to its default; clearing a value locally
+keeps the selected operator.
+
 onCommit is a `ColumnFilterCommitHandler`
 
 ```typescript

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-beta.7",
+  "version": "4.0.0",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -10,21 +10,21 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-beta.7",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-beta.7",
-    "@vuu-ui/vuu-table-types": "4.0.0-beta.7",
-    "@vuu-ui/vuu-filter-types": "4.0.0-beta.7"
+    "@vuu-ui/vuu-data-types": "4.0.0",
+    "@vuu-ui/vuu-protocol-types": "4.0.0",
+    "@vuu-ui/vuu-table-types": "4.0.0",
+    "@vuu-ui/vuu-filter-types": "4.0.0"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-beta.7",
-    "@vuu-ui/vuu-data-react": "4.0.0-beta.7",
-    "@vuu-ui/vuu-filter-parser": "4.0.0-beta.7",
-    "@vuu-ui/vuu-popups": "4.0.0-beta.7",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-beta.7",
-    "@vuu-ui/vuu-table": "4.0.0-beta.7",
-    "@vuu-ui/vuu-utils": "4.0.0-beta.7",
-    "@salt-ds/core": "1.72.0",
-    "@salt-ds/styles": "0.4.1",
+    "@vuu-ui/vuu-context-menu": "4.0.0",
+    "@vuu-ui/vuu-data-react": "4.0.0",
+    "@vuu-ui/vuu-filter-parser": "4.0.0",
+    "@vuu-ui/vuu-popups": "4.0.0",
+    "@vuu-ui/vuu-ui-controls": "4.0.0",
+    "@vuu-ui/vuu-table": "4.0.0",
+    "@vuu-ui/vuu-utils": "4.0.0",
+    "@salt-ds/core": "1.74.0",
+    "@salt-ds/styles": "0.4.2",
     "@salt-ds/window": "0.1.2"
   },
   "peerDependencies": {

package/src/FilterAggregator.js

@@ -1,4 +1,4 @@
-import { EpochTimestamp, getTemporalInfo, getTypedValueForDescriptor, isAndFilter, isBetweenFilter, isExtendedFilter, isMultiClauseFilter, isSingleValueFilter } from "@vuu-ui/vuu-utils";
+import { DataValidationError, EpochTimestamp, getScaledDecimalFilterOptions, getTemporalInfo, getTypedValueForDescriptor, isAndFilter, isBetweenFilter, isBetweenOperator, isExtendedFilter, isMultiClauseFilter, isScaledDecimalFilterOptions, isSingleValueFilter, isValidDecimalString } from "@vuu-ui/vuu-utils";
 import { ExtendedSingleValueFilterClause } from "./filter-container/ExtendedSingleValueFilterClause.js";
 function installExtendedFilters(filter, throwIfUndefined = false) {
     if (void 0 !== filter) if (isExtendedFilter(filter)) {
@@ -12,7 +12,9 @@ function installExtendedFilters(filter, throwIfUndefined = false) {
     else return filter;
     if (throwIfUndefined) throw Error("filter is undefined");
 }
-const getExtendedFilterOptions = (temporalInfo, extendedFilterOptions)=>{
+const getExtendedFilterOptions = (column, temporalInfo, extendedFilterOptions)=>{
+    const scaledDecimalOptions = getScaledDecimalFilterOptions(column);
+    if (scaledDecimalOptions) return scaledDecimalOptions;
     if (temporalInfo?.kind === "time") return {
         type: "TimeString",
         date: "today",
@@ -28,8 +30,13 @@ const getFilterValue = (column, value, temporalInfo, options, throwIfInvalid)=>{
         return;
     }
     if (options?.type === "TimeString") return asFilterTimeString(value, temporalInfo, throwIfInvalid);
+    if (isScaledDecimalFilterOptions(options)) return asFilterDecimalString(value, throwIfInvalid);
     return getTypedValueForDescriptor(value, column, throwIfInvalid);
 };
+const asFilterDecimalString = (value, throwIfInvalid)=>{
+    if (isValidDecimalString(value)) return value;
+    if (throwIfInvalid) throw new DataValidationError(`value ${value} is not a valid decimal`, "decimal", "string");
+};
 const timeOfDayPattern = /^\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?$/;
 const asFilterTimeString = (value, temporalInfo, throwIfInvalid)=>{
     if (timeOfDayPattern.test(value)) return 5 === value.length ? `${value}:00` : value;
@@ -52,7 +59,11 @@ const singleValueOps = [
     "starts",
     "ends"
 ];
-const asSingleValueOp = (op)=>singleValueOps.includes(op) ? op : "=";
+const asSingleValueOp = (op)=>{
+    const operator = singleValueOps.find((candidate)=>candidate === op);
+    if (void 0 === operator) throw Error(`[FilterAggregator] unsupported single-value operator ${op}`);
+    return operator;
+};
 class FilterAggregator {
     #filters = new Map();
     constructor(filter){
@@ -66,7 +77,7 @@ class FilterAggregator {
     }
     add(column, value, op = "=", extendedFilterOptions) {
         const temporalInfo = getTemporalInfo(column);
-        const options = getExtendedFilterOptions(temporalInfo, extendedFilterOptions);
+        const options = getExtendedFilterOptions(column, temporalInfo, extendedFilterOptions);
         const isInclusive = "between-inclusive" === op;
         const createClause = (op, value)=>options ? new ExtendedSingleValueFilterClause(column.name, op, value, options) : {
                 column: column.name,
@@ -87,7 +98,7 @@ class FilterAggregator {
         } else {
             const typedValue = getFilterValue(column, value.toString(), temporalInfo, options, true);
             if (void 0 === typedValue) this.#filters.delete(column.name);
-            else this.#filters.set(column.name, createClause(temporalInfo ? asSingleValueOp(op) : "=", typedValue));
+            else this.#filters.set(column.name, createClause(isBetweenOperator(op) ? "=" : asSingleValueOp(op), typedValue));
         }
     }
     has({ name }) {

package/src/column-filter/ColumnFilter.css.js

@@ -51,6 +51,29 @@ const css = `
   border-color: red;
 }
 
+.vuuColumnFilter.vuuColumnFilter-withOperator {
+  max-width: none;
+
+  & [data-field="operator"] {
+    border-right: 1px solid var(--salt-separable-primary-borderColor);
+    margin-right: var(--salt-spacing-100);
+    align-self: stretch;
+    display: flex;
+  }
+
+  & .vuuColumnFilter-operator {
+    background: none;
+    border: none;
+    width: auto;
+    min-width: 60px;
+
+    &.saltDropdown .saltDropdown-toggle {
+      flex-shrink: 0;
+      display: block;
+    }
+  }
+}
+
 
 `;
 export default css;

package/src/column-filter/ColumnFilter.js

@@ -1,15 +1,18 @@
-import { jsxs } from "react/jsx-runtime";
-import { SegmentedButtonGroup } from "@salt-ds/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SegmentedButtonGroup, useForkRef } from "@salt-ds/core";
 import { getDataItemEditControl } from "@vuu-ui/vuu-data-react";
 import clsx from "clsx";
-import { forwardRef as external_react_forwardRef, useMemo } from "react";
+import { forwardRef as external_react_forwardRef, useMemo, useRef } from "react";
 import { useColumnFilter } from "./useColumnFilter.js";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import ColumnFilter_0 from "./ColumnFilter.css";
 import { isBetweenOperator, withDateTimePattern } from "@vuu-ui/vuu-utils";
+import { OperatorPicker } from "../filter-clause/operator-picker/OperatorPicker.js";
 const classBase = "vuuColumnFilter";
-const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(function({ InputProps: InputPropsProp, TypeaheadProps, className, column, defaultValue, extendedFilterOptions, labels, onColumnFilterChange, onColumnRangeFilterChange, onCommit: onCommitProp, operator = "=", pattern, table, value: valueProp, values, variant, ...buttonGroupProps }, forwardRef) {
+const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(function({ InputProps: InputPropsProp, TypeaheadProps, className, column, defaultValue, defaultOperator, extendedFilterOptions, labels, onColumnFilterChange, onColumnRangeFilterChange, onCommit: onCommitProp, onOperatorChange, operator: operatorProp, operators: operatorsProp, showOperatorPicker = false, pattern, table, value: valueProp, values, variant, ...buttonGroupProps }, forwardRef) {
+    const rootRef = useRef(null);
+    const ref = useForkRef(rootRef, forwardRef);
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-filter-editor",
@@ -25,25 +28,49 @@ const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(functi
         date,
         time
     ]);
-    const { InputProps, InputPropsRange, isInvalid, onCommit, onCommitRange } = useColumnFilter({
+    const { InputProps, InputPropsRange, isInvalid, onCommit, onCommitRange, operator, operators, onOperatorSelect } = useColumnFilter({
         InputProps: InputPropsProp,
         column: controlDescriptor,
         defaultValue,
+        defaultOperator,
         extendedFilterOptions,
         onColumnFilterChange,
         onColumnRangeFilterChange,
         onCommit: onCommitProp,
-        operator,
+        onOperatorChange,
+        operator: operatorProp,
+        operators: operatorsProp,
+        showOperatorPicker,
         value: valueProp
     });
     return /*#__PURE__*/ jsxs(SegmentedButtonGroup, {
         ...buttonGroupProps,
         className: clsx(classBase, className, {
             [`${classBase}-invalid`]: isInvalid,
-            [`${classBase}-toggle`]: "toggle" === variant
+            [`${classBase}-toggle`]: "toggle" === variant,
+            [`${classBase}-withOperator`]: showOperatorPicker
         }),
-        ref: forwardRef,
+        ref: ref,
         children: [
+            operators ? /*#__PURE__*/ jsx(OperatorPicker, {
+                "aria-label": `${column.label ?? column.name} operator`,
+                className: `${classBase}-operator`,
+                disabled: InputProps?.disabled,
+                readOnly: InputProps?.readOnly,
+                operators: operators,
+                onSelect: (event, operator)=>{
+                    onOperatorSelect(event, operator);
+                    requestAnimationFrame(()=>{
+                        const root = rootRef.current;
+                        if (!root) return;
+                        const { activeElement, body } = root.ownerDocument;
+                        if (activeElement && activeElement !== body && !root.contains(activeElement)) return;
+                        root.querySelector("input:not(:disabled)")?.focus();
+                    });
+                },
+                value: operator,
+                variant: "dropdown"
+            }) : null,
             getDataItemEditControl({
                 InputProps,
                 TypeaheadProps,

package/src/column-filter/column-filter-utils.js

@@ -0,0 +1,40 @@
+import { extractFilterForColumn, isBetweenFilter, isBetweenOperator, isNumericColumn, isSingleValueFilter, isTemporalColumn, isTextColumn } from "@vuu-ui/vuu-utils";
+import { numericOperators, textOperators } from "../filter-clause/operator-picker/operator-utils.js";
+const getColumnFilterOperators = (column, operators)=>{
+    let supported;
+    if (isTextColumn(column)) supported = textOperators.filter((op)=>"in" !== op);
+    else if (isNumericColumn(column) || isTemporalColumn(column) || column.serverDataType?.startsWith("scaleddecimal")) supported = [
+        ...numericOperators,
+        "between",
+        "between-inclusive"
+    ];
+    else if ("boolean" === column.serverDataType) supported = [
+        "=",
+        "!="
+    ];
+    else throw Error(`[ColumnFilter] unsupported column type for ${column.name}`);
+    if (operators) {
+        if (0 === operators.length || operators.some((op)=>!supported.includes(op))) throw Error(`[ColumnFilter] invalid operators for ${column.name}`);
+        return operators;
+    }
+    return supported.filter((op)=>!isBetweenOperator(op));
+};
+const getDefaultColumnFilterOperator = (operators, operator)=>{
+    const selected = void 0 === operator ? operators.find((op)=>"=" === op) ?? operators[0] : operators.find((op)=>op === operator);
+    if (void 0 === selected) throw Error(`[ColumnFilter] operator ${operator} is not in the configured operators`);
+    return selected;
+};
+const getColumnFilterOperator = (column, filter)=>{
+    const clause = getColumnFilterClause(column, filter);
+    if (isBetweenFilter(clause)) return ">=" === clause.filters[0].op ? "between-inclusive" : "between";
+    if (isSingleValueFilter(clause)) return clause.op;
+};
+const getColumnFilterClause = (column, filter)=>{
+    const clause = extractFilterForColumn(filter, column.name);
+    return isSingleValueFilter(clause) || isBetweenFilter(clause) ? clause : void 0;
+};
+const normalizeColumnFilterValue = (operator, value = "")=>isBetweenOperator(operator) ? Array.isArray(value) ? value : [
+        `${value}`,
+        ""
+    ] : Array.isArray(value) ? value[0] : value;
+export { getColumnFilterClause, getColumnFilterOperator, getColumnFilterOperators, getDefaultColumnFilterOperator, normalizeColumnFilterValue };

package/src/column-filter/useColumnFilter.js

@@ -1,6 +1,7 @@
 import { useControlled } from "@salt-ds/core";
 import { useCallback, useMemo, useState } from "react";
 import { isBetweenOperator, isValidRange } from "@vuu-ui/vuu-utils";
+import { getColumnFilterOperators, getDefaultColumnFilterOperator, normalizeColumnFilterValue } from "./column-filter-utils.js";
 const injectInputProps = (InputProps, inputProps)=>{
     if (void 0 === InputProps) return {
         inputProps
@@ -13,20 +14,59 @@ const injectInputProps = (InputProps, inputProps)=>{
         }
     };
 };
-const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, operator = "=", value: valueProp })=>{
+const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, defaultOperator, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, onOperatorChange, operator: operatorProp, operators: operatorsProp, showOperatorPicker = false, value: valueProp })=>{
     const [isInvalid, setIsInvalid] = useState(false);
-    const [value, setValue] = useControlled({
+    const operators = useMemo(()=>showOperatorPicker ? getColumnFilterOperators(column, operatorsProp) : void 0, [
+        column,
+        operatorsProp,
+        showOperatorPicker
+    ]);
+    const [selectedOperator, setOperator] = useControlled({
+        controlled: operatorProp,
+        default: operators ? getDefaultColumnFilterOperator(operators, defaultOperator) : defaultOperator ?? "=",
+        name: "ColumnFilter",
+        state: "operator"
+    });
+    const operator = operators ? getDefaultColumnFilterOperator(operators, selectedOperator) : selectedOperator;
+    const [rawValue, setValue] = useControlled({
         controlled: valueProp,
         default: defaultValue,
-        name: "ColumnFilterNext",
+        name: "ColumnFilter",
         state: "value"
     });
+    const value = showOperatorPicker ? normalizeColumnFilterValue(operator, rawValue) : rawValue;
+    const handleOperatorSelect = useCallback((event, newOperator)=>{
+        if (newOperator === operator) return;
+        const newValue = normalizeColumnFilterValue(newOperator, value);
+        setOperator(newOperator);
+        setValue(newValue);
+        setIsInvalid(false);
+        onOperatorChange?.(event, newOperator);
+        const hadValue = Array.isArray(value) ? value.some((v)=>"" !== v) : void 0 !== value && "" !== value;
+        if (hadValue) {
+            const valid = !Array.isArray(newValue) || isValidRange(newValue);
+            setIsInvalid(!valid);
+            if (valid) onCommit(column, newOperator, newValue, extendedFilterOptions);
+        }
+    }, [
+        column,
+        extendedFilterOptions,
+        onCommit,
+        onOperatorChange,
+        operator,
+        setOperator,
+        setValue,
+        value
+    ]);
     const handleCommit = useCallback((_e, newValue = "")=>{
         if (Array.isArray(value)) if (isBetweenOperator(operator)) {
-            setValue([
+            const newRange = [
                 `${newValue}`,
                 value[1]
-            ]);
+            ];
+            setValue(newRange);
+            if (showOperatorPicker && !isValidRange(newRange)) return void setIsInvalid(true);
+            setIsInvalid(false);
             onCommit?.(column, operator, [
                 `${newValue}`,
                 value[1]
@@ -42,7 +82,8 @@ const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, ext
         setValue,
         onCommit,
         column,
-        extendedFilterOptions
+        extendedFilterOptions,
+        showOperatorPicker
     ]);
     const handleRangeCommit = useCallback((_e, newValue = "")=>{
         if (Array.isArray(value)) {
@@ -79,29 +120,37 @@ const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, ext
     ]);
     const onChange = useCallback((e)=>{
         const { value = "" } = e.target;
-        setValue((v)=>Array.isArray(v) ? [
+        setValue((v)=>{
+            const current = showOperatorPicker ? normalizeColumnFilterValue(operator, v) : v;
+            return Array.isArray(current) ? [
                 value,
-                v[1]
-            ] : value);
+                current[1]
+            ] : value;
+        });
         onColumnFilterChange?.(e.target.value, column, operator);
     }, [
         column,
         onColumnFilterChange,
         operator,
-        setValue
+        setValue,
+        showOperatorPicker
     ]);
     const onRangeInputChange = useCallback((e)=>{
         const { value = "" } = e.target;
-        setValue((v)=>Array.isArray(v) ? [
-                v[0],
+        setValue((v)=>{
+            const current = showOperatorPicker ? normalizeColumnFilterValue(operator, v) : v;
+            return Array.isArray(current) ? [
+                current[0],
                 value
-            ] : value);
+            ] : value;
+        });
         onColumnRangeFilterChange?.(value, column, operator);
     }, [
         setValue,
         onColumnRangeFilterChange,
         column,
-        operator
+        operator,
+        showOperatorPicker
     ]);
     const InputProps = useMemo(()=>injectInputProps(InputPropsProp, {
             onChange,
@@ -122,9 +171,12 @@ const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, ext
     return {
         InputProps,
         InputPropsRange,
-        isInvalid,
+        isInvalid: showOperatorPicker ? Array.isArray(value) && !isValidRange(value) : isInvalid,
         onCommit: handleCommit,
-        onCommitRange: handleRangeCommit
+        onCommitRange: handleRangeCommit,
+        operator,
+        operators,
+        onOperatorSelect: handleOperatorSelect
     };
 };
 export { useColumnFilter };

package/src/filter-clause/operator-picker/OperatorPicker.js

@@ -1,10 +1,37 @@
 import { jsx } from "react/jsx-runtime";
-import { Option, useForkRef } from "@salt-ds/core";
+import { Dropdown, Option, useForkRef } from "@salt-ds/core";
 import { forwardRef } from "react";
 import { ExpandoCombobox } from "../ExpandoCombobox.js";
 import { getOperators } from "./operator-utils.js";
 import { useOperatorPicker } from "./useOperatorPicker.js";
-const OperatorPicker_OperatorPicker = /*#__PURE__*/ forwardRef(function({ className, column, dropdownOnAutofocus = true, inputProps, onSelect, value: valueProp }, forwardedRef) {
+const OperatorPicker_OperatorPicker = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
+    if ("dropdown" === props.variant) {
+        const { operators, value, onSelect, variant: _variant, ...dropdownProps } = props;
+        return /*#__PURE__*/ jsx("div", {
+            ref: forwardedRef,
+            "data-field": "operator",
+            children: /*#__PURE__*/ jsx(Dropdown, {
+                ...dropdownProps,
+                value: value,
+                selected: [
+                    value
+                ],
+                onSelectionChange: (evt, [operator])=>{
+                    if (void 0 !== operator) onSelect(evt, operator);
+                },
+                children: operators.map((op)=>/*#__PURE__*/ jsx(Option, {
+                        value: op,
+                        children: op
+                    }, op))
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(OperatorPicker_OperatorCombobox, {
+        ...props,
+        ref: forwardedRef
+    });
+});
+const OperatorPicker_OperatorCombobox = /*#__PURE__*/ forwardRef(function({ className, column, dropdownOnAutofocus = true, inputProps, onSelect, operators, value: valueProp }, forwardedRef) {
     const { ref, ...comboProps } = useOperatorPicker({
         onSelect,
         value: valueProp?.toString() ?? ""
@@ -17,7 +44,7 @@ const OperatorPicker_OperatorPicker = /*#__PURE__*/ forwardRef(function({ classN
         inputProps: inputProps,
         ref: useForkRef(forwardedRef, ref),
         title: "operator",
-        children: getOperators(column).filter((op)=>op.toLowerCase().includes(comboProps.value.toLowerCase())).map((op)=>/*#__PURE__*/ jsx(Option, {
+        children: (operators ?? getOperators(column)).filter((op)=>op.toLowerCase().includes(comboProps.value.toLowerCase())).map((op)=>/*#__PURE__*/ jsx(Option, {
                 value: op
             }, op))
     });

package/src/filter-container/ExtendedSingleValueFilterClause.js

@@ -1,4 +1,4 @@
-import { getDefaultTimeZone, isValidTimeString, temporalFilterAsQuery } from "@vuu-ui/vuu-utils";
+import { getDefaultTimeZone, isScaledDecimalFilterOptions, isValidTimeString, scaledDecimalFilterAsQuery, temporalFilterAsQuery } from "@vuu-ui/vuu-utils";
 const isTimeToday = (options)=>"TimeString" === options.type && "today" === options.date;
 const timeStringWithFraction = /^\d{2}:\d{2}:\d{2}(?:\.\d{1,9})?$/;
 class ExtendedSingleValueFilterClause {
@@ -18,22 +18,30 @@ class ExtendedSingleValueFilterClause {
     }
     asQuery() {
         const { column, op, value } = this;
-        const { date, encoding = "epochMillis", timeZone } = this.#options;
-        if ("TimeString" === this.#options.type) if ("string" == typeof value && (isValidTimeString(value) || timeStringWithFraction.test(value))) {
-            const temporalInfo = {
-                kind: "time",
-                encoding,
-                precision: "epochNanos" === encoding ? "ns" : "ms",
-                timeZone: timeZone ?? getDefaultTimeZone()
-            };
-            return temporalFilterAsQuery({
-                column,
-                op,
-                value
-            }, temporalInfo, {
-                date: date
-            });
-        } else throw Error(`[ExtendedSingleValueFilterClause] invalid TimeString ${value}`);
+        if (isScaledDecimalFilterOptions(this.#options)) return scaledDecimalFilterAsQuery({
+            column,
+            op,
+            value
+        }, this.#options);
+        if ("TimeString" === this.#options.type) {
+            const { date, encoding = "epochMillis", timeZone } = this.#options;
+            if ("string" == typeof value && (isValidTimeString(value) || timeStringWithFraction.test(value))) {
+                const temporalInfo = {
+                    kind: "time",
+                    encoding,
+                    precision: "epochNanos" === encoding ? "ns" : "ms",
+                    timeZone: timeZone ?? getDefaultTimeZone()
+                };
+                return temporalFilterAsQuery({
+                    column,
+                    op,
+                    value
+                }, temporalInfo, {
+                    date: date
+                });
+            }
+            throw Error(`[ExtendedSingleValueFilterClause] invalid TimeString ${value}`);
+        }
         throw Error("[ExtendedSingleValueFilterClause] unhandled extended filter type");
     }
     toJSON() {