@uwdata/mosaic-inputs 0.12.1 → 0.13.0

package/dist/types/Menu.d.ts

@@ -0,0 +1,79 @@
+export function menu(options?: {
+    element?: HTMLElement;
+    filterBy?: Selection;
+    as?: Param;
+    field?: string;
+    options?: (any | {
+        value: any;
+        label?: string;
+    })[];
+    format?: (value: any) => string;
+    value?: any;
+    from?: string;
+    column?: string;
+    label?: string;
+}): HTMLElement;
+/**
+ * A HTML <select>-based dropdown menu input.
+ * @extends {Input}
+ */
+export class Menu extends Input {
+    /**
+     * Create a new menu input.
+     * @param {object} [options] Options object
+     * @param {HTMLElement} [options.element] The parent DOM element in which to
+     *  place the menu elements. If undefined, a new `div` element is created.
+     * @param {Selection} [options.filterBy] A selection to filter the database
+     *  table indicated by the *from* option.
+     * @param {Param} [options.as] The output param or selection. A selection
+     *  clause is added for the currently selected menu option.
+     * @param {string} [options.field] The database column name to use within
+     *  generated selection clause predicates. Defaults to the *column* option.
+     * @param {(any | { value: any, label?: string })[]} [options.options] An
+     *  array of menu options, as literal values or option objects. Option
+     *  objects have a `value` property and an optional `label` property. If no
+     *  label or *format* function is provided, the string-coerced value is used.
+     * @param {(value: any) => string} [options.format] A format function that
+     *  takes an option value as input and generates a string label. The format
+     *  function is not applied when an explicit label is provided in an option
+     *  object.
+     * @param {*} [options.value] The initial selected menu value.
+     * @param {string} [options.from] The name of a database table to use as a data
+     *  source for this widget. Used in conjunction with the *column* option.
+     * @param {string} [options.column] The name of a database column from which
+     *  to pull menu options. The unique column values are used as menu options.
+     *  Used in conjunction with the *from* option.
+     * @param {string} [options.label] A text label for this input.
+     */
+    constructor({ element, filterBy, as, from, column, label, format, options, value, field }?: {
+        element?: HTMLElement;
+        filterBy?: Selection;
+        as?: Param;
+        field?: string;
+        options?: (any | {
+            value: any;
+            label?: string;
+        })[];
+        format?: (value: any) => string;
+        value?: any;
+        from?: string;
+        column?: string;
+        label?: string;
+    });
+    from: string;
+    column: string;
+    format: (value: any) => string;
+    field: string;
+    selection: Param;
+    select: HTMLSelectElement;
+    data: any[];
+    selectedValue(value: any, ...args: any[]): any;
+    reset(): void;
+    publish(value: any): void;
+    query(filter?: any[]): import("@uwdata/mosaic-sql").SelectQuery;
+    queryResult(data: any): this;
+    update(): this;
+}
+import { Selection } from '@uwdata/mosaic-core';
+import { Param } from '@uwdata/mosaic-core';
+import { Input } from './input.js';

package/dist/types/Search.d.ts

@@ -0,0 +1,69 @@
+export function search(options?: {
+    element?: HTMLElement;
+    filterBy?: Selection;
+    as?: Param;
+    field?: string;
+    type?: "contains" | "prefix" | "suffix" | "regexp";
+    from?: string;
+    column?: string;
+    label?: string;
+}): HTMLElement;
+/**
+ * A HTML text search input.
+ * @extends {Input}
+ */
+export class Search extends Input {
+    /**
+     * Create a new text search input.
+     * @param {object} [options] Options object
+     * @param {HTMLElement} [options.element] The parent DOM element in which to
+     *  place the search elements. If undefined, a new `div` element is created.
+     * @param {Selection} [options.filterBy] A selection to filter the database
+     *  table indicated by the *from* option.
+     * @param {Param} [options.as] The output param or selection. A selection
+     *  clause is added based on the current text search query.
+     * @param {string} [options.field] The database column name to use within
+     *  generated selection clause predicates. Defaults to the *column* option.
+     * @param {'contains' | 'prefix' | 'suffix' | 'regexp'} [options.type] The
+     *  type of text search query to perform. One of:
+     *  - `"contains"` (default): the query string may appear anywhere in the text
+     *  - `"prefix"`: the query string must appear at the start of the text
+     *  - `"suffix"`: the query string must appear at the end of the text
+     *  - `"regexp"`: the query string is a regular expression the text must match
+     * @param {string} [options.from] The name of a database table to use as an
+     *  autocomplete data source for this widget. Used in conjunction with the
+     *  *column* option.
+     * @param {string} [options.column] The name of a database column from which
+     *  to pull valid search results. The unique column values are used as search
+     *  autocomplete values. Used in conjunction with the *from* option.
+     * @param {string} [options.label] A text label for this input.
+     */
+    constructor({ element, filterBy, from, column, label, type, field, as }?: {
+        element?: HTMLElement;
+        filterBy?: Selection;
+        as?: Param;
+        field?: string;
+        type?: "contains" | "prefix" | "suffix" | "regexp";
+        from?: string;
+        column?: string;
+        label?: string;
+    });
+    id: string;
+    type: "contains" | "prefix" | "suffix" | "regexp";
+    from: string;
+    column: string;
+    selection: Param;
+    field: string;
+    searchbox: HTMLInputElement;
+    reset(): void;
+    clause(value: any): import("@uwdata/mosaic-core").SelectionClause;
+    publish(value: any): void;
+    query(filter?: any[]): import("@uwdata/mosaic-sql").SelectQuery;
+    queryResult(data: any): this;
+    data: any;
+    update(): this;
+    datalist: HTMLDataListElement;
+}
+import { Selection } from '@uwdata/mosaic-core';
+import { Param } from '@uwdata/mosaic-core';
+import { Input } from './input.js';

package/dist/types/Slider.d.ts

@@ -0,0 +1,84 @@
+export function slider(options?: {
+    element?: HTMLElement;
+    filterBy?: Selection;
+    as?: Param;
+    field?: string;
+    select?: "point" | "interval";
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    from?: string;
+    column?: string;
+    label?: string;
+    width?: number;
+}): HTMLElement;
+/**
+ * A HTML range-based slider input.
+ * @extends {Input}
+ */
+export class Slider extends Input {
+    /**
+     * Create a new slider input.
+     * @param {object} [options] Options object
+     * @param {HTMLElement} [options.element] The parent DOM element in which to
+     *  place the slider elements. If undefined, a new `div` element is created.
+     * @param {Selection} [options.filterBy] A selection to filter the database
+     *  table indicated by the *from* option.
+     * @param {Param} [options.as] The output param or selection. A selection
+     *  clause is added based on the currently selected slider option.
+     * @param {string} [options.field] The database column name to use within
+     *  generated selection clause predicates. Defaults to the *column* option.
+     * @param {'point' | 'interval'} [options.select] The type of selection clause
+     *  predicate to generate if the **as** option is a Selection.  If `'point'`
+     *  (the default), the selection predicate is an equality check for the slider
+     *  value. If `'interval'`, the predicate checks an interval from the minimum
+     *  to the current slider value.
+     * @param {number} [options.min] The minimum slider value.
+     * @param {number} [options.max] The maximum slider value.
+     * @param {number} [options.step] The slider step, the amount to increment
+     *  between consecutive values.
+     * @param {number} [options.value] The initial slider value.
+     * @param {string} [options.from] The name of a database table to use as a data
+     *  source for this widget. Used in conjunction with the *column* option.
+     *  The minimum and maximum values of the column determine the slider range.
+     * @param {string} [options.column] The name of a database column whose values
+     *  determine the slider range. Used in conjunction with the *from* option.
+     *  The minimum and maximum values of the column determine the slider range.
+     * @param {string} [options.label] A text label for this input.
+     * @param {number} [options.width] The width of the slider in screen pixels.
+     */
+    constructor({ element, filterBy, as, min, max, step, from, column, label, value, select, field, width }?: {
+        element?: HTMLElement;
+        filterBy?: Selection;
+        as?: Param;
+        field?: string;
+        select?: "point" | "interval";
+        min?: number;
+        max?: number;
+        step?: number;
+        value?: number;
+        from?: string;
+        column?: string;
+        label?: string;
+        width?: number;
+    });
+    id: string;
+    from: string;
+    column: string;
+    selection: Param;
+    selectionType: "point" | "interval";
+    field: string;
+    min: number;
+    max: number;
+    step: number;
+    slider: HTMLInputElement;
+    curval: HTMLLabelElement;
+    query(filter?: any[]): import("@uwdata/mosaic-sql").SelectQuery;
+    queryResult(data: any): this;
+    clause(value: any): import("@uwdata/mosaic-core").SelectionClause;
+    publish(value: any): void;
+}
+import { Selection } from '@uwdata/mosaic-core';
+import { Param } from '@uwdata/mosaic-core';
+import { Input } from './input.js';

package/dist/types/Table.d.ts

@@ -0,0 +1,116 @@
+export function table(options: {
+    element?: HTMLElement;
+    filterBy?: Selection;
+    as?: Selection;
+    align?: {
+        [name: string]: "left" | "right" | "center";
+    };
+    format?: {
+        [name: string]: (value: any) => string;
+    };
+    from?: string;
+    columns?: string[];
+    width?: number | {
+        [name: string]: number;
+    };
+    maxWidth?: number;
+    height?: number;
+    rowBatch?: number;
+}): HTMLElement;
+/**
+ * A HTML table based table component.
+ * @extends {Input}
+ */
+export class Table extends Input {
+    /**
+     * Create a new Table instance.
+     * @param {object} options Options object
+     * @param {HTMLElement} [options.element] The parent DOM element in which to
+     *  place the table element. If undefined, a new `div` element is created.
+     * @param {Selection} [options.filterBy] A selection to filter the database
+     *  table indicated by the *from* option.
+     * @param {Selection} [options.as] The output selection. A selection
+     *  clause is added for the currently selected table row.
+     * @param {{ [name: string]: 'left' | 'right' | 'center' }} [options.align]
+     *  An object that maps column names to horiztonal text alignment values. If
+     *  unspecified, alignment is determined based on the column data type.
+     * @param {{ [name: string]: (value: any) => string }} [options.format] An
+     *  object that maps column names to format functions to use for that
+     *  column's data. Each format function takes a value as input and generates
+     *  formatted text to show in the table.
+     * @param {string} [options.from] The name of a database table to use as a data
+     *  source for this widget. Used in conjunction with the *columns* option.
+     * @param {string[]} [options.columns] The name of database columns to include
+     *  in the table component. If unspecified, all columns are included.
+     *  Used in conjunction with the *from* option.
+     * @param {number | { [name: string]: number }} [options.width] If a number,
+     *  sets the desired width of the table, in pixels. If an object, is used to
+     *  set explicit pixel widts for each named column included in the object.
+     * @param {number} [options.maxWidth] The maximum width of the table, in pixels.
+     * @param {number} [options.height] The desired height of the table, in pixels.
+     * @param {number} [options.rowBatch] The number of rows to request per query
+     *  batch. The batch size will be used to prefetch data beyond the currently
+     *  visible range.
+     */
+    constructor({ element, filterBy, from, columns, align, format, width, maxWidth, height, rowBatch, as }?: {
+        element?: HTMLElement;
+        filterBy?: Selection;
+        as?: Selection;
+        align?: {
+            [name: string]: "left" | "right" | "center";
+        };
+        format?: {
+            [name: string]: (value: any) => string;
+        };
+        from?: string;
+        columns?: string[];
+        width?: number | {
+            [name: string]: number;
+        };
+        maxWidth?: number;
+        height?: number;
+        rowBatch?: number;
+    });
+    id: string;
+    from: string;
+    columns: string[];
+    format: {
+        [name: string]: (value: any) => string;
+    };
+    align: {
+        [name: string]: "left" | "right" | "center";
+    };
+    widths: {
+        [name: string]: number;
+    };
+    offset: number;
+    limit: number;
+    isPending: boolean;
+    selection: Selection;
+    currentRow: number;
+    sortHeader: any;
+    sortColumn: any;
+    sortDesc: boolean;
+    tbl: HTMLTableElement;
+    head: HTMLTableSectionElement;
+    body: HTMLTableSectionElement;
+    style: HTMLStyleElement;
+    sourceTable(): any;
+    clause(rows?: any[]): import("@uwdata/mosaic-core").SelectionClause;
+    requestData(offset?: number): void;
+    fields(): {
+        column: string;
+        table: any;
+    }[];
+    fieldInfo(info: any): this;
+    schema: any;
+    formats: any;
+    query(filter?: any[]): import("@uwdata/mosaic-sql").SelectQuery;
+    queryResult(data: any): this;
+    loaded: boolean;
+    data: any[];
+    update(): this;
+    sort(event: any, column: any): void;
+}
+import { Selection } from '@uwdata/mosaic-core';
+import { Input } from './input.js';

package/dist/types/index-types.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export { Menu, menu } from "./Menu.js";
+export { Search, search } from "./Search.js";
+export { Slider, slider } from "./Slider.js";
+export { Table, table } from "./Table.js";

package/dist/types/input.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Instantiate an input, register it with the coordinator, and
+ * return the corresponding HTML element.
+ * @template {new (...args: any) => Input} T
+ * @param {T} InputClass
+ * @param {ConstructorParameters<T>} params
+ * @returns {HTMLElement} The container element of the input.
+ */
+export function input<T extends new (...args: any) => Input>(InputClass: T, ...params: ConstructorParameters<T>): HTMLElement;
+/**
+ * Base class for input components.
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
+export class Input extends MosaicClient implements Activatable {
+    /**
+     * Create a new input instance.
+     * @param {import('@uwdata/mosaic-core').Selection} [filterBy] A selection
+     *  with which to filter backing data that parameterizes this input.
+     * @param {HTMLElement} [element] Optional container HTML element to use.
+     * @param {string} [className] A class name to set on the container element.
+     */
+    constructor(filterBy?: import("@uwdata/mosaic-core").Selection, element?: HTMLElement, className?: string);
+    element: HTMLElement;
+    activate(): void;
+}
+import type { Activatable } from '@uwdata/mosaic-core';
+import { MosaicClient } from '@uwdata/mosaic-core';

package/dist/types/util/format.d.ts

@@ -0,0 +1,8 @@
+export function stringify(x: any): string;
+export function formatTrim(value: any): any;
+export function formatDate(date: any): any;
+export function localize(f: any): (locale?: string) => any;
+export function formatLocaleAuto(locale?: string): any;
+export function formatLocaleNumber(locale?: string): any;
+export const formatAuto: any;
+export const formatNumber: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-inputs",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Mosaic input components.",
   "keywords": [
     "inputs",
@@ -9,25 +9,22 @@
   "license": "BSD-3-Clause",
   "author": "Jeffrey Heer (https://idl.uw.edu)",
   "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "jsdelivr": "dist/mosaic-inputs.min.js",
-  "unpkg": "dist/mosaic-inputs.min.js",
+  "exports": {
+    "default": "./src/index.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/uwdata/mosaic.git"
   },
   "scripts": {
-    "prebuild": "rimraf dist && mkdir dist",
-    "build": "node ../../esbuild.js mosaic-inputs",
     "lint": "eslint src test",
     "test": "vitest run",
-    "prepublishOnly": "npm run test && npm run lint && npm run build"
+    "prepublishOnly": "npm run test && npm run lint"
   },
   "dependencies": {
-    "@uwdata/mosaic-core": "^0.12.1",
-    "@uwdata/mosaic-sql": "^0.12.1",
+    "@uwdata/mosaic-core": "^0.13.0",
+    "@uwdata/mosaic-sql": "^0.13.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "fe3a7c34352da54ec36a1ebf557846f46a649782"
+  "gitHead": "b5a0e03e200c0f04c46562a288f084ffc9f6ad55"
 }

package/src/Menu.js

@@ -1,14 +1,46 @@
-import { MosaicClient, Param, isParam, isSelection, clausePoint } from '@uwdata/mosaic-core';
+import { Param, Selection, isParam, isSelection, clausePoint } from '@uwdata/mosaic-core';
 import { Query } from '@uwdata/mosaic-sql';
-import { input } from './input.js';
+import { Input, input } from './input.js';
 
 const isObject = v => {
   return v && typeof v === 'object' && !Array.isArray(v);
 };
 
+/**
+ * Create a new menu input instance.
+ * @param {object} [options] Options object
+ * @param {HTMLElement} [options.element] The parent DOM element in which to
+ *  place the menu elements. If undefined, a new `div` element is created.
+ * @param {Selection} [options.filterBy] A selection to filter the database
+ *  table indicated by the *from* option.
+ * @param {Param} [options.as] The output param or selection. A selection
+ *  clause is added for the currently selected menu option.
+ * @param {string} [options.field] The database column name to use within
+ *  generated selection clause predicates. Defaults to the *column* option.
+ * @param {(any | { value: any, label?: string })[]} [options.options] An
+ *  array of menu options, as literal values or option objects. Option
+ *  objects have a `value` property and an optional `label` property. If no
+ *  label or *format* function is provided, the string-coerced value is used.
+ * @param {(value: any) => string} [options.format] A format function that
+ *  takes an option value as input and generates a string label. The format
+ *  function is not applied when an explicit label is provided in an option
+ *  object.
+ * @param {*} [options.value] The initial selected menu value.
+ * @param {string} [options.from] The name of a database table to use as a data
+ *  source for this widget. Used in conjunction with the *column* option.
+ * @param {string} [options.column] The name of a database column from which
+ *  to pull menu options. The unique column values are used as menu options.
+ *  Used in conjunction with the *from* option.
+ * @param {string} [options.label] A text label for this input.
+ * @returns {HTMLElement} The container element for a menu input.
+ */
 export const menu = options => input(Menu, options);
 
-export class Menu extends MosaicClient {
+/**
+ * A HTML <select>-based dropdown menu input.
+ * @extends {Input}
+ */
+export class Menu extends Input {
   /**
    * Create a new menu input.
    * @param {object} [options] Options object
@@ -39,26 +71,22 @@ export class Menu extends MosaicClient {
   constructor({
     element,
     filterBy,
+    as,
     from,
     column,
     label = column,
     format = x => x, // TODO
     options,
     value,
-    field = column,
-    as
+    field = column
   } = {}) {
-    super(filterBy);
+    super(filterBy, element);
     this.from = from;
     this.column = column;
     this.format = format;
     this.field = field;
     const selection = this.selection = as;
 
-    this.element = element ?? document.createElement('div');
-    this.element.setAttribute('class', 'input');
-    Object.defineProperty(this.element, 'value', { value: this });
-
     const lab = document.createElement('label');
     lab.innerText = label || column;
     this.element.appendChild(lab);
@@ -68,8 +96,8 @@ export class Menu extends MosaicClient {
 
     // if provided, populate menu options
     if (options) {
-      this.data = options.map(value => isObject(value) ? value : { value });
-      this.selectedValue(value ?? '');
+      this.data = options.map(opt => isObject(opt) ? opt : { value: opt });
+      this.selectedValue(value === undefined ? '' : value);
       this.update();
     }
 
@@ -125,8 +153,9 @@ export class Menu extends MosaicClient {
   }
 
   activate() {
-    // @ts-ignore - activate is only called for a Selection
-    this.selection.activate(clausePoint(this.field, 0, { source: this }));
+    if (isSelection(this.selection)) {
+      this.selection.activate(clausePoint(this.field, 0, { source: this }));
+    }
   }
 
   publish(value) {
@@ -174,7 +203,7 @@ export class Menu extends MosaicClient {
       const value = isSelection(selection)
         ? selection.valueFor(this)
         : selection.value;
-      this.selectedValue(value ?? '');
+      this.selectedValue(value === undefined ? '' : value);
     }
 
     return this;

package/src/Search.js

@@ -1,12 +1,42 @@
-import { MosaicClient, Param, isParam, isSelection, clauseMatch } from '@uwdata/mosaic-core';
+import { Param, Selection, isParam, isSelection, clauseMatch } from '@uwdata/mosaic-core';
 import { Query } from '@uwdata/mosaic-sql';
-import { input } from './input.js';
+import { Input, input } from './input.js';
 
 let _id = 0;
 
+/**
+ * Create a new text search input instance.
+ * @param {object} [options] Options object
+ * @param {HTMLElement} [options.element] The parent DOM element in which to
+ *  place the search elements. If undefined, a new `div` element is created.
+ * @param {Selection} [options.filterBy] A selection to filter the database
+ *  table indicated by the *from* option.
+ * @param {Param} [options.as] The output param or selection. A selection
+ *  clause is added based on the current text search query.
+ * @param {string} [options.field] The database column name to use within
+ *  generated selection clause predicates. Defaults to the *column* option.
+ * @param {'contains' | 'prefix' | 'suffix' | 'regexp'} [options.type] The
+ *  type of text search query to perform. One of:
+ *  - `"contains"` (default): the query string may appear anywhere in the text
+ *  - `"prefix"`: the query string must appear at the start of the text
+ *  - `"suffix"`: the query string must appear at the end of the text
+ *  - `"regexp"`: the query string is a regular expression the text must match
+ * @param {string} [options.from] The name of a database table to use as an
+ *  autocomplete data source for this widget. Used in conjunction with the
+ *  *column* option.
+ * @param {string} [options.column] The name of a database column from which
+ *  to pull valid search results. The unique column values are used as search
+ *  autocomplete values. Used in conjunction with the *from* option.
+ * @param {string} [options.label] A text label for this input.
+ * @returns {HTMLElement} The container element for a text search input.
+ */
 export const search = options => input(Search, options);
 
-export class Search extends MosaicClient {
+/**
+ * A HTML text search input.
+ * @extends {Input}
+ */
+export class Search extends Input {
   /**
    * Create a new text search input.
    * @param {object} [options] Options object
@@ -42,7 +72,7 @@ export class Search extends MosaicClient {
     field = column,
     as
   } = {}) {
-    super(filterBy);
+    super(filterBy, element);
     this.id = 'search_' + (++_id);
     this.type = type;
     this.from = from;
@@ -50,10 +80,6 @@ export class Search extends MosaicClient {
     this.selection = as;
     this.field = field;
 
-    this.element = element ?? document.createElement('div');
-    this.element.setAttribute('class', 'input');
-    Object.defineProperty(this.element, 'value', { value: this });
-
     if (label) {
       const lab = document.createElement('label');
       lab.setAttribute('for', this.id);
@@ -97,8 +123,9 @@ export class Search extends MosaicClient {
   }
 
   activate() {
-    // @ts-ignore - activate is only called for a Selection
-    this.selection.activate(this.clause(''));
+    if (isSelection(this.selection)) {
+      this.selection.activate(this.clause(''));
+    }
   }
 
   publish(value) {