@svgrid/grid 2.1.22 → 2.2.0

package/src/filter-operators.test.ts

@@ -6,6 +6,8 @@ import {
   NUMBER_OPERATORS,
   DATE_OPERATORS,
   CHECKBOX_OPERATORS,
+  SET_OPERATORS,
+  VALUELESS_OPERATORS,
   operatorOption,
   operatorsForColumn,
   defaultOperatorFor,
@@ -55,6 +57,63 @@ describe("filter-operators: catalogue integrity", () => {
     expect(values).toContain("between");
     expect(values).toContain("isBlank");
   });
+
+  it("catalogues the extended operator set (parity with jQWidgets-style row)", () => {
+    const values = filterOperatorOptions.map((o) => o.value);
+    for (const op of [
+      "notContains",
+      "notEquals",
+      "endsWith",
+      "regex",
+      "in",
+      "notIn",
+      "isNotBlank",
+    ]) {
+      expect(values).toContain(op);
+    }
+  });
+
+  it("SET_OPERATORS and VALUELESS_OPERATORS reference catalogued operators", () => {
+    const known = new Set(filterOperatorOptions.map((o) => o.value));
+    for (const id of [...SET_OPERATORS, ...VALUELESS_OPERATORS]) {
+      expect(known.has(id)).toBe(true);
+    }
+    expect([...SET_OPERATORS]).toEqual(["in", "notIn"]);
+    expect([...VALUELESS_OPERATORS]).toEqual(["isBlank", "isNotBlank"]);
+  });
+});
+
+describe("filter-operators: per-type coverage of the new operators", () => {
+  it("text columns expose the full string + set operator range", () => {
+    for (const op of [
+      "notContains",
+      "notEquals",
+      "endsWith",
+      "regex",
+      "in",
+      "notIn",
+      "isNotBlank",
+    ] as FilterOperator[]) {
+      expect(TEXT_OPERATORS).toContain(op);
+    }
+  });
+
+  it("number columns gain notEquals + in/notIn + isNotBlank but not text-only ops", () => {
+    expect(NUMBER_OPERATORS).toContain("notEquals");
+    expect(NUMBER_OPERATORS).toContain("in");
+    expect(NUMBER_OPERATORS).toContain("isNotBlank");
+    expect(NUMBER_OPERATORS).not.toContain("contains");
+    expect(NUMBER_OPERATORS).not.toContain("regex");
+  });
+
+  it("checkbox columns gain isNotBlank alongside equals/isBlank", () => {
+    expect(CHECKBOX_OPERATORS).toContain("isNotBlank");
+  });
+
+  it("date columns keep before/after semantics and add isNotBlank", () => {
+    expect(DATE_OPERATORS).toContain("isNotBlank");
+    expect(DATE_OPERATORS).not.toContain("in");
+  });
 });
 
 describe("operatorOption", () => {

package/src/filter-operators.ts

@@ -6,35 +6,68 @@ import type { FilterOperator, FilterOption } from "./SvGrid.types";
 
 export const filterOperatorOptions: Array<FilterOption> = [
   { value: "contains", label: "Contains", iconName: "op-contains" },
+  { value: "notContains", label: "Not contains", iconName: "op-notContains" },
   { value: "equals", label: "Equals", iconName: "op-equals" },
+  { value: "notEquals", label: "Not equals", iconName: "op-notEquals" },
   { value: "startsWith", label: "Starts with", iconName: "op-startsWith" },
+  { value: "endsWith", label: "Ends with", iconName: "op-endsWith" },
+  { value: "regex", label: "Regex", iconName: "op-regex" },
+  { value: "in", label: "In", iconName: "op-in" },
+  { value: "notIn", label: "Not in", iconName: "op-notIn" },
   { value: "greaterThan", label: "Greater than", iconName: "op-greaterThan" },
   { value: "lessThan", label: "Less than", iconName: "op-lessThan" },
   { value: "between", label: "Between", iconName: "op-between" },
-  { value: "isBlank", label: "Is blank", iconName: "op-isBlank" },
+  { value: "isBlank", label: "Blank", iconName: "op-isBlank" },
+  { value: "isNotBlank", label: "Not blank", iconName: "op-isNotBlank" },
+];
+/** Operators whose predicate is a set-membership test over a token list.
+ *  The filter row renders a multi-value chip input for these instead of a
+ *  single text box. */
+export const SET_OPERATORS: ReadonlyArray<FilterOperator> = ["in", "notIn"];
+/** Operators that need no value input - they act on emptiness alone. */
+export const VALUELESS_OPERATORS: ReadonlyArray<FilterOperator> = [
+  "isBlank",
+  "isNotBlank",
 ];
 /** Which operators make sense for each column editor type. */
 export const TEXT_OPERATORS: Array<FilterOperator> = [
   "contains",
+  "notContains",
   "equals",
+  "notEquals",
   "startsWith",
+  "endsWith",
+  "regex",
+  "in",
+  "notIn",
   "isBlank",
+  "isNotBlank",
 ];
 export const NUMBER_OPERATORS: Array<FilterOperator> = [
   "equals",
+  "notEquals",
   "greaterThan",
   "lessThan",
   "between",
+  "in",
+  "notIn",
   "isBlank",
+  "isNotBlank",
 ];
 export const DATE_OPERATORS: Array<FilterOperator> = [
   "equals",
+  "notEquals",
   "lessThan",
   "greaterThan",
   "between",
   "isBlank",
+  "isNotBlank",
+];
+export const CHECKBOX_OPERATORS: Array<FilterOperator> = [
+  "equals",
+  "isBlank",
+  "isNotBlank",
 ];
-export const CHECKBOX_OPERATORS: Array<FilterOperator> = ["equals", "isBlank"];
 export const fallbackOperatorOption: FilterOption = {
   value: "contains",
   label: "Contains",

package/src/filtering/excel-filters.test.ts

@@ -2,7 +2,12 @@
  * Unit tests for applyExcelFilter. Every operator + edge case.
  */
 import { describe, expect, it } from 'vitest'
-import { applyExcelFilter, type ExcelFilter } from './excel-filters'
+import {
+  applyExcelFilter,
+  splitInTokens,
+  joinInTokens,
+  type ExcelFilter,
+} from './excel-filters'
 
 const make = (
   operator: ExcelFilter['operator'],
@@ -129,3 +134,83 @@ describe('applyExcelFilter - isBlank', () => {
     expect(applyExcelFilter(0, make('isBlank'))).toBe(false)
   })
 })
+
+describe('applyExcelFilter - isNotBlank', () => {
+  it('is the exact inverse of isBlank', () => {
+    expect(applyExcelFilter(null, make('isNotBlank'))).toBe(false)
+    expect(applyExcelFilter('', make('isNotBlank'))).toBe(false)
+    expect(applyExcelFilter('   ', make('isNotBlank'))).toBe(false)
+    expect(applyExcelFilter('x', make('isNotBlank'))).toBe(true)
+    expect(applyExcelFilter(0, make('isNotBlank'))).toBe(true)
+  })
+})
+
+describe('applyExcelFilter - notContains', () => {
+  it('is the inverse of contains', () => {
+    expect(applyExcelFilter('Hello World', make('notContains', 'world'))).toBe(false)
+    expect(applyExcelFilter('Hello', make('notContains', 'xyz'))).toBe(true)
+  })
+  it('treats empty value as universal match (nothing excluded)', () => {
+    expect(applyExcelFilter('anything', make('notContains', ''))).toBe(true)
+  })
+})
+
+describe('applyExcelFilter - notEquals', () => {
+  it('is the inverse of equals, case-insensitive', () => {
+    expect(applyExcelFilter('Boston', make('notEquals', 'boston'))).toBe(false)
+    expect(applyExcelFilter('Boston', make('notEquals', 'bost'))).toBe(true)
+  })
+})
+
+describe('applyExcelFilter - endsWith', () => {
+  it('matches a suffix case-insensitively', () => {
+    expect(applyExcelFilter('Brooklyn', make('endsWith', 'LYN'))).toBe(true)
+    expect(applyExcelFilter('Brooklyn', make('endsWith', 'brook'))).toBe(false)
+  })
+})
+
+describe('applyExcelFilter - regex', () => {
+  it('matches with a valid case-insensitive pattern', () => {
+    expect(applyExcelFilter('T-240007', make('regex', '^T-\\d+$'))).toBe(true)
+    expect(applyExcelFilter('BABA', make('regex', 'ba'))).toBe(true)
+    expect(applyExcelFilter('XYZ', make('regex', '^a'))).toBe(false)
+  })
+  it('treats an empty pattern as a universal match', () => {
+    expect(applyExcelFilter('anything', make('regex', ''))).toBe(true)
+  })
+  it('matches nothing (no throw) when the pattern is invalid', () => {
+    expect(applyExcelFilter('anything', make('regex', '('))).toBe(false)
+    expect(applyExcelFilter('a[b', make('regex', '['))).toBe(false)
+  })
+})
+
+describe('applyExcelFilter - in / notIn', () => {
+  it('in matches when the cell equals any token (newline- or comma-separated)', () => {
+    expect(applyExcelFilter('BP', make('in', 'TSM\nBP\nBABA'))).toBe(true)
+    expect(applyExcelFilter('bp', make('in', 'TSM, BP, BABA'))).toBe(true)
+    expect(applyExcelFilter('HSBA', make('in', 'TSM\nBP'))).toBe(false)
+  })
+  it('notIn is the inverse of in', () => {
+    expect(applyExcelFilter('BP', make('notIn', 'TSM\nBP'))).toBe(false)
+    expect(applyExcelFilter('HSBA', make('notIn', 'TSM\nBP'))).toBe(true)
+  })
+  it('matches only whole values, not substrings', () => {
+    expect(applyExcelFilter('BPX', make('in', 'BP'))).toBe(false)
+  })
+  it('treats an empty token list as a universal match', () => {
+    expect(applyExcelFilter('anything', make('in', ''))).toBe(true)
+    expect(applyExcelFilter('anything', make('notIn', '  '))).toBe(true)
+  })
+})
+
+describe('in-token serialization helpers', () => {
+  it('splitInTokens accepts newline and comma separators and trims', () => {
+    expect(splitInTokens('a\nb, c ,,\n')).toEqual(['a', 'b', 'c'])
+    expect(splitInTokens('')).toEqual([])
+    expect(splitInTokens(null)).toEqual([])
+  })
+  it('joinInTokens round-trips through splitInTokens', () => {
+    expect(splitInTokens(joinInTokens(['a', 'b', 'c']))).toEqual(['a', 'b', 'c'])
+    expect(joinInTokens([' a ', '', 'b'])).toBe('a\nb')
+  })
+})

package/src/filtering/excel-filters.ts

@@ -1,11 +1,18 @@
 export type ExcelFilterOperator =
   | 'contains'
+  | 'notContains'
   | 'equals'
+  | 'notEquals'
   | 'startsWith'
+  | 'endsWith'
+  | 'regex'
+  | 'in'
+  | 'notIn'
   | 'greaterThan'
   | 'lessThan'
   | 'between'
   | 'isBlank'
+  | 'isNotBlank'
 
 export type ExcelFilter = {
   id: string
@@ -48,6 +55,33 @@ export function normalizeForFilter(
     : stripped.toLowerCase()
 }
 
+/**
+ * Delimiter used to serialise the `in` / `notIn` value list into the single
+ * `value` string that the filter model carries. A newline is used because it
+ * (unlike a comma) practically never appears inside a typed token, so tokens
+ * survive the round-trip unescaped. The chip input in the filter row reads and
+ * writes with the same separator via {@link splitInTokens} / {@link joinInTokens}.
+ */
+export const IN_TOKEN_SEP = '\n'
+
+/**
+ * Split a serialised `in` / `notIn` value into its individual tokens. Accepts
+ * both the newline separator the chip input writes and a plain comma-separated
+ * string (what a raw text field, e.g. the tool-panel filter, produces), so the
+ * same value round-trips through either UI.
+ */
+export function splitInTokens(value: unknown): string[] {
+  return String(value ?? '')
+    .split(/[\n,]/)
+    .map((t) => t.trim())
+    .filter((t) => t.length > 0)
+}
+
+/** Serialise a list of tokens back into the single `in` / `notIn` value. */
+export function joinInTokens(tokens: ReadonlyArray<string>): string {
+  return tokens.map((t) => t.trim()).filter((t) => t.length > 0).join(IN_TOKEN_SEP)
+}
+
 export function applyExcelFilter(
   cellValue: unknown,
   filter: ExcelFilter,
@@ -59,10 +93,39 @@ export function applyExcelFilter(
   switch (filter.operator) {
     case 'contains':
       return normalizedText.includes(normalizedValue)
+    case 'notContains':
+      // An empty needle is no constraint (mirrors `contains` returning true),
+      // so nothing is excluded until the user types something.
+      return normalizedValue === '' || !normalizedText.includes(normalizedValue)
     case 'equals':
       return normalizedText === normalizedValue
+    case 'notEquals':
+      return normalizedValue === '' || normalizedText !== normalizedValue
     case 'startsWith':
       return normalizedText.startsWith(normalizedValue)
+    case 'endsWith':
+      return normalizedText.endsWith(normalizedValue)
+    case 'regex': {
+      // Case-insensitive by default (matches the accent/case-folded feel of
+      // the other text operators). An invalid pattern matches nothing rather
+      // than throwing, so a half-typed regex never crashes the row model.
+      const pattern = String(filter.value ?? '')
+      if (!pattern) return true
+      try {
+        return new RegExp(pattern, 'i').test(text)
+      } catch {
+        return false
+      }
+    }
+    case 'in':
+    case 'notIn': {
+      const tokens = splitInTokens(filter.value)
+      if (tokens.length === 0) return true
+      const hit = tokens.some(
+        (t) => normalizeForFilter(t, options?.locale) === normalizedText,
+      )
+      return filter.operator === 'in' ? hit : !hit
+    }
     case 'greaterThan': {
       const a = Number(cellValue)
       const b = Number(filter.value)
@@ -97,5 +160,7 @@ export function applyExcelFilter(
     }
     case 'isBlank':
       return text.trim().length === 0
+    case 'isNotBlank':
+      return text.trim().length > 0
   }
 }

package/src/flex-render.ts

@@ -1,3 +1,3 @@
-/// <reference types="svelte" />
-
-export { default as FlexRender } from './FlexRender.svelte'
+/// <reference types="svelte" />
+
+export { default as FlexRender } from './FlexRender.svelte'

package/src/form-field.ts

@@ -0,0 +1,87 @@
+import type { Validator } from './validators'
+
+/**
+ * Field descriptor for <SvForm> and the headless `createForm` core. Kept in a
+ * plain `.ts` module so the core can import the type without pulling in the
+ * `.svelte` component (which would create a `.svelte.ts` -> `.svelte` import
+ * cycle Vite's dev import-analysis fails to resolve).
+ */
+export type FormFieldType =
+  | 'text' | 'email' | 'tel' | 'textarea' | 'number' | 'password'
+  | 'select' | 'checkbox' | 'switch' | 'date' | 'color' | 'rating'
+  | 'array'
+
+export type FormField = {
+  name: string
+  label: string
+  type?: FormFieldType
+  required?: boolean
+  placeholder?: string
+  options?: Array<{ value: string | number; label: string; color?: string }>
+  /** Declarative validation rules (see `rules` - email/pattern/min/compare...). */
+  rules?: ReadonlyArray<Validator>
+  /** Return an error message, or null/undefined when valid. */
+  validate?: (value: any, values: Record<string, any>) => string | null | undefined
+  /**
+   * Async validator (e.g. "is this username taken?"). Runs after the sync checks
+   * pass, debounced (`asyncDebounce`, default 300ms) and stale-guarded so only the
+   * latest result wins. While it runs, `form.isValidating(name)` is true and the
+   * field shows a checking indicator. Submit waits for all async validators.
+   */
+  asyncValidate?: (value: any, values: Record<string, any>) => Promise<string | null | undefined>
+  /** Debounce (ms) before `asyncValidate` runs on edit. Default 300. */
+  asyncDebounce?: number
+  /** Span full width in the grid. */
+  full?: boolean
+  /**
+   * Show the field only when this is `true` / returns `true` (default: always).
+   * A field derived from other values, e.g. `visible: (v) => v.hasAddress`.
+   * Hidden fields are skipped in validation and excluded from the submitted values.
+   */
+  visible?: boolean | ((values: Record<string, any>) => boolean)
+  /** Disable the field, statically or derived from other values. */
+  disabled?: boolean | ((values: Record<string, any>) => boolean)
+  /**
+   * For `type: 'array'` - the fields of each repeatable item. The value is an
+   * array of item objects; each item's fields validate against that item (so
+   * cross-field rules within a row work). `required`/`minItems`/`maxItems` gate
+   * the array length.
+   */
+  itemFields?: ReadonlyArray<FormField>
+  /** Label for the "add item" button of an array field. Default "+ Add". */
+  addLabel?: string
+  /** Min / max item count for an array field. */
+  minItems?: number
+  maxItems?: number
+}
+
+/**
+ * A group of fields rendered as a titled fieldset - and, when `<SvForm stepper>`
+ * is set, as one step of a wizard. Use in place of a plain `FormField` inside the
+ * `fields` array; the schema may freely mix flat fields and sections.
+ */
+export type FormSection = {
+  section: string
+  description?: string
+  fields: ReadonlyArray<FormField>
+  /** Column count for this section's grid (defaults to the form's `columns`). */
+  columns?: number
+}
+
+/** An entry in a form schema: either a single field or a titled section/step. */
+export type FormEntry = FormField | FormSection
+
+/** Narrow a schema entry to a section (has a `fields` array). */
+export function isFormSection(e: FormEntry): e is FormSection {
+  return Array.isArray((e as FormSection).fields)
+}
+
+/** Flatten a mixed schema (fields + sections) to the flat list of fields. */
+export function flattenFields(entries: ReadonlyArray<FormEntry>): FormField[] {
+  const out: FormField[] = []
+  for (const e of entries) {
+    if (isFormSection(e)) out.push(...e.fields)
+    else out.push(e)
+  }
+  return out
+}