@svgrid/grid 2.2.33 → 2.4.0

package/src/filter-operators.ts

@@ -1,157 +1,157 @@
-// Filter-operator catalogue + the pure helpers that pick which operators
-// apply to a column and how they're labelled. Fully static - no grid state -
-// so it lives outside the controller.
-import type { Column, RowData } from "./index";
-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: "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 fallbackOperatorOption: FilterOption = {
-  value: "contains",
-  label: "Contains",
-  iconName: "op-contains",
-};
-
-export function operatorOption(value: FilterOperator): FilterOption {
-  return (
-    filterOperatorOptions.find((option) => option.value === value) ??
-    fallbackOperatorOption
-  );
-}
-
-/** Returns the operators that make sense for the given column's data type. */
-export function operatorsForColumn<TData extends RowData>(
-  column: Column<TData> | undefined,
-): Array<FilterOption> {
-  const editorType = column?.columnDef.editorType ?? "text";
-  const ids =
-    editorType === "number"
-      ? NUMBER_OPERATORS
-      : editorType === "date" || editorType === "datetime"
-        ? DATE_OPERATORS
-        : editorType === "checkbox"
-          ? CHECKBOX_OPERATORS
-          : TEXT_OPERATORS;
-  return ids
-    .map((id) => filterOperatorOptions.find((option) => option.value === id))
-    .filter((option): option is FilterOption => Boolean(option));
-}
-
-/** Default operator for a column (first one valid for its type). */
-export function defaultOperatorFor<TData extends RowData>(
-  column: Column<TData> | undefined,
-): FilterOperator {
-  return operatorsForColumn(column)[0]?.value ?? "contains";
-}
-
-/** Date columns get friendlier labels for "less / greater than". */
-export function operatorLabelFor<TData extends RowData>(
-  option: FilterOption,
-  column: Column<TData> | undefined,
-): string {
-  const editorType = column?.columnDef.editorType;
-  if (editorType === "date" || editorType === "datetime") {
-    if (option.value === "lessThan") return "Before";
-    if (option.value === "greaterThan") return "After";
-  }
-  return option.label;
-}
-
-/** GridMessages key for each operator's label (see grid-messages.ts). */
-const OPERATOR_MESSAGE_KEY: Record<FilterOperator, string> = {
-  contains: "opContains",
-  notContains: "opNotContains",
-  equals: "opEquals",
-  notEquals: "opNotEquals",
-  startsWith: "opStartsWith",
-  endsWith: "opEndsWith",
-  regex: "opRegex",
-  in: "opIn",
-  notIn: "opNotIn",
-  greaterThan: "opGreaterThan",
-  lessThan: "opLessThan",
-  between: "opBetween",
-  isBlank: "opIsBlank",
-  isNotBlank: "opIsNotBlank",
-};
-
-/**
- * Localized operator label: honors date `Before`/`After` relabels, then the
- * `localeText` override for the operator, falling back to the English
- * `option.label`. `messages` is a loose string map to avoid a type cycle.
- */
-export function localizeOperatorLabel<TData extends RowData>(
-  option: FilterOption,
-  column: Column<TData> | undefined,
-  messages?: Record<string, string> | null,
-): string {
-  const editorType = column?.columnDef.editorType;
-  if (editorType === "date" || editorType === "datetime") {
-    if (option.value === "lessThan") return messages?.opBefore || "Before";
-    if (option.value === "greaterThan") return messages?.opAfter || "After";
-  }
-  const key = OPERATOR_MESSAGE_KEY[option.value];
-  return (key && messages?.[key]) || option.label;
-}
+// Filter-operator catalogue + the pure helpers that pick which operators
+// apply to a column and how they're labelled. Fully static - no grid state -
+// so it lives outside the controller.
+import type { Column, RowData } from "./index";
+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: "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 fallbackOperatorOption: FilterOption = {
+  value: "contains",
+  label: "Contains",
+  iconName: "op-contains",
+};
+
+export function operatorOption(value: FilterOperator): FilterOption {
+  return (
+    filterOperatorOptions.find((option) => option.value === value) ??
+    fallbackOperatorOption
+  );
+}
+
+/** Returns the operators that make sense for the given column's data type. */
+export function operatorsForColumn<TData extends RowData>(
+  column: Column<TData> | undefined,
+): Array<FilterOption> {
+  const editorType = column?.columnDef.editorType ?? "text";
+  const ids =
+    editorType === "number"
+      ? NUMBER_OPERATORS
+      : editorType === "date" || editorType === "datetime"
+        ? DATE_OPERATORS
+        : editorType === "checkbox"
+          ? CHECKBOX_OPERATORS
+          : TEXT_OPERATORS;
+  return ids
+    .map((id) => filterOperatorOptions.find((option) => option.value === id))
+    .filter((option): option is FilterOption => Boolean(option));
+}
+
+/** Default operator for a column (first one valid for its type). */
+export function defaultOperatorFor<TData extends RowData>(
+  column: Column<TData> | undefined,
+): FilterOperator {
+  return operatorsForColumn(column)[0]?.value ?? "contains";
+}
+
+/** Date columns get friendlier labels for "less / greater than". */
+export function operatorLabelFor<TData extends RowData>(
+  option: FilterOption,
+  column: Column<TData> | undefined,
+): string {
+  const editorType = column?.columnDef.editorType;
+  if (editorType === "date" || editorType === "datetime") {
+    if (option.value === "lessThan") return "Before";
+    if (option.value === "greaterThan") return "After";
+  }
+  return option.label;
+}
+
+/** GridMessages key for each operator's label (see grid-messages.ts). */
+const OPERATOR_MESSAGE_KEY: Record<FilterOperator, string> = {
+  contains: "opContains",
+  notContains: "opNotContains",
+  equals: "opEquals",
+  notEquals: "opNotEquals",
+  startsWith: "opStartsWith",
+  endsWith: "opEndsWith",
+  regex: "opRegex",
+  in: "opIn",
+  notIn: "opNotIn",
+  greaterThan: "opGreaterThan",
+  lessThan: "opLessThan",
+  between: "opBetween",
+  isBlank: "opIsBlank",
+  isNotBlank: "opIsNotBlank",
+};
+
+/**
+ * Localized operator label: honors date `Before`/`After` relabels, then the
+ * `localeText` override for the operator, falling back to the English
+ * `option.label`. `messages` is a loose string map to avoid a type cycle.
+ */
+export function localizeOperatorLabel<TData extends RowData>(
+  option: FilterOption,
+  column: Column<TData> | undefined,
+  messages?: Record<string, string> | null,
+): string {
+  const editorType = column?.columnDef.editorType;
+  if (editorType === "date" || editorType === "datetime") {
+    if (option.value === "lessThan") return messages?.opBefore || "Before";
+    if (option.value === "greaterThan") return messages?.opAfter || "After";
+  }
+  const key = OPERATOR_MESSAGE_KEY[option.value];
+  return (key && messages?.[key]) || option.label;
+}

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

@@ -1,127 +1,127 @@
-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' | 'multiselect' | 'checkbox' | 'switch' | 'date' | 'color' | 'rating'
-  | 'radio' | 'slider' | 'tags' | 'phone' | 'country' | 'mask'
-  | 'datetime' | 'time' | 'daterange' | 'combobox' | 'file'
-  | 'array'
-
-export type FormField = {
-  name: string
-  label: string
-  type?: FormFieldType
-  required?: boolean
-  /** Show the field but block edits (still submitted, unlike hidden fields). */
-  readonly?: boolean
-  /** Helper text shown under the control (distinct from a validation error). */
-  help?: string
-  placeholder?: string
-  /**
-   * Options for select/combobox/radio/multiselect. A function makes them CASCADE:
-   * the list is derived from the current form values (e.g. cities for the picked
-   * country). Pair with `dependsOn` so the child clears when the parent changes.
-   */
-  options?:
-    | Array<{ value: string | number; label: string; color?: string }>
-    | ((values: Record<string, any>) => Array<{ value: string | number; label: string; color?: string }>)
-  /** Field name(s) this one depends on; when a parent changes, this field's value
-   *  is cleared (cascading selects). */
-  dependsOn?: string | string[]
-  /** Mask pattern for `type: 'mask'` (`#`=digit, `A`=letter, `*`=alnum). */
-  mask?: string
-  /** Numeric bounds for `type: 'number'` / `'slider'`. */
-  min?: number
-  max?: number
-  step?: number
-  precision?: number
-  /** Text affixes for `type: 'number'` (e.g. `$` / `%`). */
-  prefix?: string
-  suffix?: string
-  /** Remote option loader for `type: 'combobox'` (debounced typeahead). The
-   *  current form `values` are passed so it can depend on other fields. */
-  loadOptions?: (query: string, values: Record<string, any>) => Promise<Array<{ value: string | number; label: string }>>
-  /** File input hints for `type: 'file'`. */
-  accept?: string
-  multiple?: boolean
-  /**
-   * Derive this field's value from the other form values (e.g. a total). A
-   * computed field is read-only, recomputes reactively, is not user-validated,
-   * and its derived value is included in the submitted payload.
-   */
-  computed?: (values: Record<string, any>) => any
-  /** 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
-  /** Columns to span (generalizes `full`); `2`+ widens the field in a grid. */
-  span?: number
-  /**
-   * 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
-}
+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' | 'multiselect' | 'checkbox' | 'switch' | 'date' | 'color' | 'rating'
+  | 'radio' | 'slider' | 'tags' | 'phone' | 'country' | 'mask'
+  | 'datetime' | 'time' | 'daterange' | 'combobox' | 'file'
+  | 'array'
+
+export type FormField = {
+  name: string
+  label: string
+  type?: FormFieldType
+  required?: boolean
+  /** Show the field but block edits (still submitted, unlike hidden fields). */
+  readonly?: boolean
+  /** Helper text shown under the control (distinct from a validation error). */
+  help?: string
+  placeholder?: string
+  /**
+   * Options for select/combobox/radio/multiselect. A function makes them CASCADE:
+   * the list is derived from the current form values (e.g. cities for the picked
+   * country). Pair with `dependsOn` so the child clears when the parent changes.
+   */
+  options?:
+    | Array<{ value: string | number; label: string; color?: string }>
+    | ((values: Record<string, any>) => Array<{ value: string | number; label: string; color?: string }>)
+  /** Field name(s) this one depends on; when a parent changes, this field's value
+   *  is cleared (cascading selects). */
+  dependsOn?: string | string[]
+  /** Mask pattern for `type: 'mask'` (`#`=digit, `A`=letter, `*`=alnum). */
+  mask?: string
+  /** Numeric bounds for `type: 'number'` / `'slider'`. */
+  min?: number
+  max?: number
+  step?: number
+  precision?: number
+  /** Text affixes for `type: 'number'` (e.g. `$` / `%`). */
+  prefix?: string
+  suffix?: string
+  /** Remote option loader for `type: 'combobox'` (debounced typeahead). The
+   *  current form `values` are passed so it can depend on other fields. */
+  loadOptions?: (query: string, values: Record<string, any>) => Promise<Array<{ value: string | number; label: string }>>
+  /** File input hints for `type: 'file'`. */
+  accept?: string
+  multiple?: boolean
+  /**
+   * Derive this field's value from the other form values (e.g. a total). A
+   * computed field is read-only, recomputes reactively, is not user-validated,
+   * and its derived value is included in the submitted payload.
+   */
+  computed?: (values: Record<string, any>) => any
+  /** 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
+  /** Columns to span (generalizes `full`); `2`+ widens the field in a grid. */
+  span?: number
+  /**
+   * 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
+}