@operato/data-grist 0.3.4 → 0.3.7

package/demo/index.html

@@ -49,6 +49,7 @@
     <script type="module">
       import { LitElement, html, css, render } from 'lit'
       import '../dist/index.js'
+      import '../dist/src/filters/filters-form.js'
       import '@operato/popup/ox-popup-list.js'
       import '@material/mwc-icon'
 
@@ -256,7 +257,9 @@
               align: 'right',
               editable: true
             },
-            filter: true,
+            filter: {
+              operator: 'between'
+            },
             sortable: true,
             width: 50
           },
@@ -274,7 +277,8 @@
               editable: true
             },
             filter: {
-              type: 'datetime'
+              type: 'datetime',
+              operator: 'between'
             },
             sortable: true,
             width: 180
@@ -336,7 +340,7 @@
               --grid-record-emphasized-color: yellow;
             }
 
-            #headroom {
+            [slot='headroom'] {
               display: flex;
               flex-direction: row;
               align-items: center;
@@ -374,6 +378,8 @@
             }
 
             #search {
+              flex: 1;
+
               display: flex;
               position: relative;
               align-items: center;
@@ -445,21 +451,25 @@
         }
 
         get searchForm() {
-          return this.shadowRoot.querySelector('ox-grist-search-form')
+          return this.shadowRoot.querySelector('ox-filters-form')
         }
 
         render() {
           const mode = this.mode || 'CARD'
 
           return html`
-            <ox-grist-search-form
-              .config=${config}
-              @submit=${event => {
-                event.preventDefault()
-                console.log(this.searchForm.queryFilters)
-              }}
-            ></ox-grist-search-form>
             <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
+              <ox-filters-form
+                slot="headroom"
+                .config=${config}
+                @submit=${event => {
+                  event.preventDefault()
+                  console.log(this.searchForm.queryFilters)
+                }}
+                @input=${() => console.log(this.searchForm.queryFilters)}
+                @change=${() => console.log(this.searchForm.queryFilters)}
+              ></ox-filters-form>
+
               <div slot="headroom" id="headroom">
                 <div id="filters">
                   <div id="search">

package/dist/src/data-grid/data-grid-header.js

@@ -6,7 +6,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import throttle from 'lodash-es/throttle';
 import { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
 import { FilterStyles } from '../filters/filter-styles';
-import { getRenderer } from '../filters/registry';
+import { getFilterRenderer } from '../filters/registry';
 let DataGridHeader = class DataGridHeader extends LitElement {
     constructor() {
         super(...arguments);
@@ -73,6 +73,8 @@ let DataGridHeader = class DataGridHeader extends LitElement {
     _renderFilterHeader(column) {
         var filter = column.filter;
         const type = typeof filter === 'boolean' ? column.type : (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
+        const idx = typeof filter === 'boolean' ? 0 : filter.operator === 'between' ? 1 : 0;
+        const renderer = getFilterRenderer(type)[idx];
         return html `
       <mwc-icon
         @click=${(e) => {
@@ -92,14 +94,16 @@ let DataGridHeader = class DataGridHeader extends LitElement {
         >filter_alt</mwc-icon
       >
 
-      ${type === 'select'
-            ? html `<ox-popup-list multiple attr-selected="checked"
+      ${!renderer
+            ? html ``
+            : type === 'select'
+                ? html `<ox-popup-list multiple attr-selected="checked"
             ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>
-            ${getRenderer(type)(column, this)}</ox-popup-list
+            ${renderer(column, this)}</ox-popup-list
           >`
-            : html ` <ox-popup
+                : html ` <ox-popup
             ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>
-            ${getRenderer(type)(column, this)}</ox-popup
+            ${renderer(column, this)}</ox-popup
           >`}
     `;
     }

package/dist/src/data-grid/data-grid-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-header.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-header.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { FilterStyles } from '../filters/filter-styles'\nimport { getRenderer } from '../filters/registry'\nimport { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'\n\n@customElement('ox-grid-header')\nexport class DataGridHeader extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--grid-template-columns);\n\n        overflow: hidden;\n      }\n\n      :scope > div {\n        display: flex;\n\n        white-space: nowrap;\n        overflow: hidden;\n        background-color: var(--grid-header-background-color);\n        border-top: var(--grid-header-top-border);\n        border-bottom: var(--grid-header-bottom-border);\n        padding: var(--grid-header-padding);\n\n        text-overflow: ellipsis;\n        font: var(--grid-header-font);\n        color: var(--grid-header-color);\n      }\n\n      div[gutter] {\n        padding: var(--padding-default) 0 var(--padding-narrow) 0;\n        text-align: center;\n      }\n\n      span {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n\n      span[for-title] {\n        flex: 1;\n        text-overflow: ellipsis;\n        line-height: 1.6;\n        text-transform: capitalize;\n      }\n      span[for-title] mwc-icon {\n        font-size: var(--grid-record-fontsize);\n      }\n\n      span[sorter],\n      span[filter] {\n        padding: 0;\n        border: 0;\n      }\n      span[sorter] mwc-icon {\n        font-size: var(--grid-header-sorter-size);\n      }\n\n      span[filter] > mwc-icon {\n        font-size: var(--fontsize-default);\n        line-height: 20px;\n      }\n\n      span[splitter] {\n        cursor: col-resize;\n        border-right: var(--grid-header-splitter-border);\n      }\n      span[splitter]:hover {\n        border-right: var(--grid-header-splitter-border-hover);\n      }\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin: 3px 0 0 0;\n        zoom: var(--grist-input-zoom);\n      }\n      [filter-title] {\n        color: var(--grid-header-filter-title-color);\n        font: var(--grid-header-filter-title-font);\n        text-transform: capitalize;\n      }\n      [filter-title] * {\n        vertical-align: middle;\n      }\n      [filter-title] mwc-icon {\n        opacity: 0.7;\n        color: var(--grid-header-filter-title-icon-color);\n      }\n      [filter] input[type='checkbox'] {\n        margin-left: 10px;\n        margin-bottom: 5px;\n      }\n\n      @media print {\n        :host {\n          grid-template-columns: var(--grid-template-print-columns);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = ZERO_COLUMNS\n  @property({ type: Object }) data: GristData = ZERO_DATA\n\n  @state() private _sorters: SortersConfig = []\n  private _lastAccVal?: number\n  private _throttledNotifier?: any\n\n  render() {\n    var columns = this.columns || []\n\n    return html`\n      ${columns.map((column, idx) =>\n        !column.hidden\n          ? html`\n              <div ?gutter=${column.type == 'gutter'} column>\n                <span for-title @click=${(e: MouseEvent) => this._changeSort(column)}\n                  >${this._renderHeader(column)}\n                </span>\n\n                ${column.sortable\n                  ? html`\n                      <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>\n                        ${this._renderSortHeader(column)}\n                      </span>\n                    `\n                  : undefined}\n                ${column.filter ? html` <span filter> ${this._renderFilterHeader(column)} </span> ` : undefined}\n                ${column.resizable !== false\n                  ? html`\n                      <span splitter draggable=\"false\" @mousedown=${(e: MouseEvent) => this._mousedown(e, idx)}\n                        >&nbsp;</span\n                      >\n                    `\n                  : undefined}\n              </div>\n            `\n          : undefined\n      )}\n\n      <div column></div>\n    `\n  }\n\n  _renderHeader(column: ColumnConfig) {\n    var { renderer } = column.header || {}\n    var title = renderer.call(this, column)\n\n    return html` ${title} `\n  }\n\n  _renderSortHeader(column: ColumnConfig) {\n    var sorters = this._sorters\n\n    var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n    if (!sorter) {\n      return html``\n    }\n\n    if (sorters.length > 1) {\n      var rank = sorters.indexOf(sorter) + 1\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n        : html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `\n    } else {\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n        : html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n    }\n  }\n\n  _renderFilterHeader(column: ColumnConfig) {\n    var filter = column.filter\n    const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n\n    return html`\n      <mwc-icon\n        @click=${(e: Event) => {\n          const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement\n          const popup = parent.querySelector('ox-popup, ox-popup-list') as OxPopup | null\n          // const popup = (e.target as HTMLElement).nextSibling as OxPopupList | null\n\n          // absolute position인 popup의 위치 부모는 grist 이므로,\n          // data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.\n          // this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.\n          const top = parent.offsetTop + parent.offsetHeight\n          const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft)\n\n          popup?.open({\n            right,\n            top\n          })\n        }}\n        >filter_alt</mwc-icon\n      >\n\n      ${type === 'select'\n        ? html`<ox-popup-list multiple attr-selected=\"checked\"\n            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n            ${getRenderer(type)(column, this)}</ox-popup-list\n          >`\n        : html` <ox-popup\n            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n            ${getRenderer(type)(column, this)}</ox-popup\n          >`}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._sorters = this.config.sorters || []\n    }\n  }\n\n  _changeSort(column: ColumnConfig) {\n    if (!column.sortable) {\n      return\n    }\n\n    var sorters = [...this._sorters]\n\n    var idx = sorters.findIndex(sorter => sorter.name == column.name)\n    if (idx !== -1) {\n      let sorter = sorters[idx]\n      if (sorter.desc) {\n        sorters.splice(idx, 1)\n      } else {\n        sorter.desc = true\n      }\n    } else {\n      var sorter = {\n        name: column.name\n      }\n\n      sorters.push(sorter)\n    }\n\n    this._sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('sorters-change', {\n        bubbles: true,\n        composed: true,\n        detail: this._sorters\n      })\n    )\n  }\n\n  _accumalate(x: number) {\n    this._lastAccVal = (this._lastAccVal ?? 0) + x\n    return this._lastAccVal\n  }\n\n  _notifyWidthChange(idx: number, width: number) {\n    if (!this._throttledNotifier) {\n      this._throttledNotifier = throttle((idx: number, width: number) => {\n        this.dispatchEvent(\n          new CustomEvent('column-width-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              idx,\n              width\n            }\n          })\n        )\n\n        this._lastAccVal = 0\n      }, 100)\n    }\n\n    this._throttledNotifier(idx, width)\n  }\n\n  _mousedown(e: MouseEvent, idx: number) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    var mousemoveHandler = ((e: MouseEvent) => {\n      e.stopPropagation()\n      e.preventDefault()\n      let column = this.columns[idx]\n\n      let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX))\n      if (width == 0) {\n        /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n        return\n      }\n\n      this._notifyWidthChange(idx, width)\n    }).bind(this)\n\n    var mouseupHandler = ((e: MouseEvent) => {\n      document.removeEventListener('mousemove', mousemoveHandler)\n      document.removeEventListener('mouseup', mouseupHandler)\n\n      mousemoveHandler(e)\n    }).bind(this)\n\n    document.addEventListener('mousemove', mousemoveHandler)\n    document.addEventListener('mouseup', mouseupHandler)\n  }\n}\n"]}
+{"version":3,"file":"data-grid-header.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-header.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { FilterStyles } from '../filters/filter-styles'\nimport { getFilterRenderer } from '../filters/registry'\nimport { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'\n\n@customElement('ox-grid-header')\nexport class DataGridHeader extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--grid-template-columns);\n\n        overflow: hidden;\n      }\n\n      :scope > div {\n        display: flex;\n\n        white-space: nowrap;\n        overflow: hidden;\n        background-color: var(--grid-header-background-color);\n        border-top: var(--grid-header-top-border);\n        border-bottom: var(--grid-header-bottom-border);\n        padding: var(--grid-header-padding);\n\n        text-overflow: ellipsis;\n        font: var(--grid-header-font);\n        color: var(--grid-header-color);\n      }\n\n      div[gutter] {\n        padding: var(--padding-default) 0 var(--padding-narrow) 0;\n        text-align: center;\n      }\n\n      span {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n\n      span[for-title] {\n        flex: 1;\n        text-overflow: ellipsis;\n        line-height: 1.6;\n        text-transform: capitalize;\n      }\n      span[for-title] mwc-icon {\n        font-size: var(--grid-record-fontsize);\n      }\n\n      span[sorter],\n      span[filter] {\n        padding: 0;\n        border: 0;\n      }\n      span[sorter] mwc-icon {\n        font-size: var(--grid-header-sorter-size);\n      }\n\n      span[filter] > mwc-icon {\n        font-size: var(--fontsize-default);\n        line-height: 20px;\n      }\n\n      span[splitter] {\n        cursor: col-resize;\n        border-right: var(--grid-header-splitter-border);\n      }\n      span[splitter]:hover {\n        border-right: var(--grid-header-splitter-border-hover);\n      }\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin: 3px 0 0 0;\n        zoom: var(--grist-input-zoom);\n      }\n      [filter-title] {\n        color: var(--grid-header-filter-title-color);\n        font: var(--grid-header-filter-title-font);\n        text-transform: capitalize;\n      }\n      [filter-title] * {\n        vertical-align: middle;\n      }\n      [filter-title] mwc-icon {\n        opacity: 0.7;\n        color: var(--grid-header-filter-title-icon-color);\n      }\n      [filter] input[type='checkbox'] {\n        margin-left: 10px;\n        margin-bottom: 5px;\n      }\n\n      @media print {\n        :host {\n          grid-template-columns: var(--grid-template-print-columns);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = ZERO_COLUMNS\n  @property({ type: Object }) data: GristData = ZERO_DATA\n\n  @state() private _sorters: SortersConfig = []\n  private _lastAccVal?: number\n  private _throttledNotifier?: any\n\n  render() {\n    var columns = this.columns || []\n\n    return html`\n      ${columns.map((column, idx) =>\n        !column.hidden\n          ? html`\n              <div ?gutter=${column.type == 'gutter'} column>\n                <span for-title @click=${(e: MouseEvent) => this._changeSort(column)}\n                  >${this._renderHeader(column)}\n                </span>\n\n                ${column.sortable\n                  ? html`\n                      <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>\n                        ${this._renderSortHeader(column)}\n                      </span>\n                    `\n                  : undefined}\n                ${column.filter ? html` <span filter> ${this._renderFilterHeader(column)} </span> ` : undefined}\n                ${column.resizable !== false\n                  ? html`\n                      <span splitter draggable=\"false\" @mousedown=${(e: MouseEvent) => this._mousedown(e, idx)}\n                        >&nbsp;</span\n                      >\n                    `\n                  : undefined}\n              </div>\n            `\n          : undefined\n      )}\n\n      <div column></div>\n    `\n  }\n\n  _renderHeader(column: ColumnConfig) {\n    var { renderer } = column.header || {}\n    var title = renderer.call(this, column)\n\n    return html` ${title} `\n  }\n\n  _renderSortHeader(column: ColumnConfig) {\n    var sorters = this._sorters\n\n    var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n    if (!sorter) {\n      return html``\n    }\n\n    if (sorters.length > 1) {\n      var rank = sorters.indexOf(sorter) + 1\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n        : html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `\n    } else {\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n        : html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n    }\n  }\n\n  _renderFilterHeader(column: ColumnConfig) {\n    var filter = column.filter\n    const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n    const idx = typeof filter === 'boolean' ? 0 : filter!.operator === 'between' ? 1 : 0\n    const renderer = getFilterRenderer(type)[idx]\n\n    return html`\n      <mwc-icon\n        @click=${(e: Event) => {\n          const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement\n          const popup = parent.querySelector('ox-popup, ox-popup-list') as OxPopup | null\n          // const popup = (e.target as HTMLElement).nextSibling as OxPopupList | null\n\n          // absolute position인 popup의 위치 부모는 grist 이므로,\n          // data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.\n          // this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.\n          const top = parent.offsetTop + parent.offsetHeight\n          const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft)\n\n          popup?.open({\n            right,\n            top\n          })\n        }}\n        >filter_alt</mwc-icon\n      >\n\n      ${!renderer\n        ? html``\n        : type === 'select'\n        ? html`<ox-popup-list multiple attr-selected=\"checked\"\n            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n            ${renderer(column, this)}</ox-popup-list\n          >`\n        : html` <ox-popup\n            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n            ${renderer(column, this)}</ox-popup\n          >`}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._sorters = this.config.sorters || []\n    }\n  }\n\n  _changeSort(column: ColumnConfig) {\n    if (!column.sortable) {\n      return\n    }\n\n    var sorters = [...this._sorters]\n\n    var idx = sorters.findIndex(sorter => sorter.name == column.name)\n    if (idx !== -1) {\n      let sorter = sorters[idx]\n      if (sorter.desc) {\n        sorters.splice(idx, 1)\n      } else {\n        sorter.desc = true\n      }\n    } else {\n      var sorter = {\n        name: column.name\n      }\n\n      sorters.push(sorter)\n    }\n\n    this._sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('sorters-change', {\n        bubbles: true,\n        composed: true,\n        detail: this._sorters\n      })\n    )\n  }\n\n  _accumalate(x: number) {\n    this._lastAccVal = (this._lastAccVal ?? 0) + x\n    return this._lastAccVal\n  }\n\n  _notifyWidthChange(idx: number, width: number) {\n    if (!this._throttledNotifier) {\n      this._throttledNotifier = throttle((idx: number, width: number) => {\n        this.dispatchEvent(\n          new CustomEvent('column-width-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              idx,\n              width\n            }\n          })\n        )\n\n        this._lastAccVal = 0\n      }, 100)\n    }\n\n    this._throttledNotifier(idx, width)\n  }\n\n  _mousedown(e: MouseEvent, idx: number) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    var mousemoveHandler = ((e: MouseEvent) => {\n      e.stopPropagation()\n      e.preventDefault()\n      let column = this.columns[idx]\n\n      let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX))\n      if (width == 0) {\n        /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n        return\n      }\n\n      this._notifyWidthChange(idx, width)\n    }).bind(this)\n\n    var mouseupHandler = ((e: MouseEvent) => {\n      document.removeEventListener('mousemove', mousemoveHandler)\n      document.removeEventListener('mouseup', mouseupHandler)\n\n      mousemoveHandler(e)\n    }).bind(this)\n\n    document.addEventListener('mousemove', mousemoveHandler)\n    document.addEventListener('mouseup', mouseupHandler)\n  }\n}\n"]}

package/dist/src/filters/filter-checkbox.js

@@ -5,6 +5,7 @@ export const FilterCheckbox = (column, owner) => {
     return html `
     <input
       type="checkbox"
+      name="${column.name}"
       @click=${(e) => {
         // e.preventDefault()
         // e.stopPropagation()

package/dist/src/filters/filter-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;;IACpE,MAAM,OAAO,GAAG,OAAO,MAAM,CAAC,MAAM,KAAK,SAAS,KAAI,MAAA,MAAM,CAAC,MAAM,0CAAE,OAAO,CAAA,CAAA;IAE5E,OAAO,IAAI,CAAA;;;eAGE,CAAC,CAAa,EAAE,EAAE;QACzB,qBAAqB;QACrB,sBAAsB;QAEtB,MAAM,QAAQ,GAAqB,CAAC,CAAC,MAA0B,CAAA;QAE/D,wEAAwE;QACxE,kCAAkC;QAClC,6EAA6E;QAC7E,6BAA6B;QAC7B,IAAI;QAEJ,0BAA0B;QAC1B,6BAA6B;QAC7B,WAAW;QACX,sCAAsC;QACtC,oCAAoC;QACpC,aAAa;QACb,8BAA8B;QAC9B,MAAM;QACN,IAAI;IACN,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterCheckbox: FilterSelectRenderer = (column, owner) => {\n  const options = typeof column.filter !== 'boolean' && column.filter?.options\n\n  return html`\n    <input\n      type=\"checkbox\"\n      @click=${(e: MouseEvent) => {\n        // e.preventDefault()\n        // e.stopPropagation()\n\n        const checkbox: HTMLInputElement = e.target as HTMLInputElement\n\n        // if (checkbox.checked === false && checkbox.indeterminate === false) {\n        //   checkbox.indeterminate = true\n        // } else if ((checkbox.checked = true && checkbox.indeterminate === true)) {\n        //   checkbox.checked = false\n        // }\n\n        // if (checkbox.checked) {\n        //   checkbox.checked = false\n        // } else {\n        //   if (checkbox.checked === false) {\n        //     checkbox.indeterminate = true\n        //   } else {\n        //     checkbox.checked = true\n        //   }\n        // }\n      }}\n    />\n  `\n}\n"]}
+{"version":3,"file":"filter-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;;IACpE,MAAM,OAAO,GAAG,OAAO,MAAM,CAAC,MAAM,KAAK,SAAS,KAAI,MAAA,MAAM,CAAC,MAAM,0CAAE,OAAO,CAAA,CAAA;IAE5E,OAAO,IAAI,CAAA;;;cAGC,MAAM,CAAC,IAAI;eACV,CAAC,CAAa,EAAE,EAAE;QACzB,qBAAqB;QACrB,sBAAsB;QAEtB,MAAM,QAAQ,GAAqB,CAAC,CAAC,MAA0B,CAAA;QAE/D,wEAAwE;QACxE,kCAAkC;QAClC,6EAA6E;QAC7E,6BAA6B;QAC7B,IAAI;QAEJ,0BAA0B;QAC1B,6BAA6B;QAC7B,WAAW;QACX,sCAAsC;QACtC,oCAAoC;QACpC,aAAa;QACb,8BAA8B;QAC9B,MAAM;QACN,IAAI;IACN,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterCheckbox: FilterSelectRenderer = (column, owner) => {\n  const options = typeof column.filter !== 'boolean' && column.filter?.options\n\n  return html`\n    <input\n      type=\"checkbox\"\n      name=\"${column.name}\"\n      @click=${(e: MouseEvent) => {\n        // e.preventDefault()\n        // e.stopPropagation()\n\n        const checkbox: HTMLInputElement = e.target as HTMLInputElement\n\n        // if (checkbox.checked === false && checkbox.indeterminate === false) {\n        //   checkbox.indeterminate = true\n        // } else if ((checkbox.checked = true && checkbox.indeterminate === true)) {\n        //   checkbox.checked = false\n        // }\n\n        // if (checkbox.checked) {\n        //   checkbox.checked = false\n        // } else {\n        //   if (checkbox.checked === false) {\n        //     checkbox.indeterminate = true\n        //   } else {\n        //     checkbox.checked = true\n        //   }\n        // }\n      }}\n    />\n  `\n}\n"]}

package/dist/src/filters/filter-input.js

@@ -2,6 +2,6 @@ import { html } from 'lit-html';
 export const FilterInput = (column, owner) => {
     const filter = column.filter;
     const type = typeof filter === 'boolean' ? column.type : (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
-    return html ` <input type=${type} /> `;
+    return html ` <input type=${type} name="${column.name}" /> `;
 };
 //# sourceMappingURL=filter-input.js.map

package/dist/src/filters/filter-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-input.js","sourceRoot":"","sources":["../../../src/filters/filter-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACjE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,MAAM,IAAI,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAEpF,OAAO,IAAI,CAAA,gBAAgB,IAAI,MAAM,CAAA;AACvC,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterInput: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter\n  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n\n  return html` <input type=${type} /> `\n}\n"]}
+{"version":3,"file":"filter-input.js","sourceRoot":"","sources":["../../../src/filters/filter-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACjE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,MAAM,IAAI,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAEpF,OAAO,IAAI,CAAA,gBAAgB,IAAI,UAAU,MAAM,CAAC,IAAI,OAAO,CAAA;AAC7D,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterInput: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter\n  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n\n  return html` <input type=${type} name=\"${column.name}\" /> `\n}\n"]}

package/dist/src/filters/filter-range-date.js

@@ -5,6 +5,6 @@ export const FilterRangeDate = (column, owner) => {
     if (type === 'datetime') {
         type = 'datetime-local';
     }
-    return html ` <input name="from" type=${type} /> ~ <input name="to" type=${type} /> `;
+    return html ` <input name="${column.name}" type=${type} /> ~ <input name="${column.name}" type=${type} /> `;
 };
 //# sourceMappingURL=filter-range-date.js.map

package/dist/src/filters/filter-range-date.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-range-date.js","sourceRoot":"","sources":["../../../src/filters/filter-range-date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,eAAe,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACrE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,IAAI,IAAI,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAClF,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,IAAI,GAAG,gBAAgB,CAAA;KACxB;IAED,OAAO,IAAI,CAAA,4BAA4B,IAAI,+BAA+B,IAAI,MAAM,CAAA;AACtF,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterRangeDate: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter\n  var type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n  if (type === 'datetime') {\n    type = 'datetime-local'\n  }\n\n  return html` <input name=\"from\" type=${type} /> ~ <input name=\"to\" type=${type} /> `\n}\n"]}
+{"version":3,"file":"filter-range-date.js","sourceRoot":"","sources":["../../../src/filters/filter-range-date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,eAAe,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACrE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,IAAI,IAAI,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAClF,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,IAAI,GAAG,gBAAgB,CAAA;KACxB;IAED,OAAO,IAAI,CAAA,iBAAiB,MAAM,CAAC,IAAI,UAAU,IAAI,sBAAsB,MAAM,CAAC,IAAI,UAAU,IAAI,MAAM,CAAA;AAC5G,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterRangeDate: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter\n  var type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n  if (type === 'datetime') {\n    type = 'datetime-local'\n  }\n\n  return html` <input name=\"${column.name}\" type=${type} /> ~ <input name=\"${column.name}\" type=${type} /> `\n}\n"]}

package/dist/src/filters/filter-range-number.js

@@ -3,7 +3,8 @@ export const FilterRangeNumber = (column, owner) => {
     const filter = column.filter;
     const type = typeof filter === 'boolean' ? column.type : (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
     return html `
-    <input name="from" type="number" placeholder="minimum" /> ~ <input name="to" type="number" placeholder="maximum" />
+    <input name="${column.name}" type="number" placeholder="minimum" /> ~
+    <input name="${column.name}" type="number" placeholder="maximum" />
   `;
 };
 //# sourceMappingURL=filter-range-number.js.map

package/dist/src/filters/filter-range-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-range-number.js","sourceRoot":"","sources":["../../../src/filters/filter-range-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,iBAAiB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,MAAM,IAAI,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAEpF,OAAO,IAAI,CAAA;;GAEV,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterRangeNumber: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter\n  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n\n  return html`\n    <input name=\"from\" type=\"number\" placeholder=\"minimum\" /> ~ <input name=\"to\" type=\"number\" placeholder=\"maximum\" />\n  `\n}\n"]}
+{"version":3,"file":"filter-range-number.js","sourceRoot":"","sources":["../../../src/filters/filter-range-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,iBAAiB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,MAAM,IAAI,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAEpF,OAAO,IAAI,CAAA;mBACM,MAAM,CAAC,IAAI;mBACX,MAAM,CAAC,IAAI;GAC3B,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterRangeNumber: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter\n  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n\n  return html`\n    <input name=\"${column.name}\" type=\"number\" placeholder=\"minimum\" /> ~\n    <input name=\"${column.name}\" type=\"number\" placeholder=\"maximum\" />\n  `\n}\n"]}

package/dist/src/filters/filters-form.d.ts

@@ -0,0 +1,19 @@
+import '@operato/input/ox-checkbox.js';
+import '@operato/input/ox-select.js';
+import '@operato/popup/ox-popup-list.js';
+import { LitElement, TemplateResult } from 'lit';
+import { GristConfig } from '../types';
+export declare type QueryFilterRangeValue = [from: number, to: number];
+export declare type QueryFilter = {
+    name: string;
+    operator?: 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' | 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' | 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike';
+    value: any;
+};
+export declare class FiltersForm extends LitElement {
+    static styles: import("lit").CSSResult[];
+    config: GristConfig;
+    defaultOperator: string;
+    form: HTMLFormElement;
+    render(): TemplateResult;
+    get queryFilters(): QueryFilter[];
+}

package/dist/src/filters/filters-form.js

@@ -0,0 +1,99 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-checkbox.js';
+import '@operato/input/ox-select.js';
+import '@operato/popup/ox-popup-list.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { FilterStyles } from './filter-styles';
+import { getFilterRenderer } from './registry';
+let FiltersForm = class FiltersForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.defaultOperator = 'eq';
+    }
+    render() {
+        const columns = this.config.columns.filter(columnConfig => columnConfig.filter);
+        return html `
+      <form>
+        ${columns.map((column) => {
+            const { name, label, filter } = column;
+            const placeholder = typeof label === 'string'
+                ? name
+                : typeof label !== 'object'
+                    ? name
+                    : label.renderer
+                        ? label.renderer()
+                        : name;
+            const type = typeof filter === 'boolean' ? column.type : (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
+            const idx = typeof filter === 'boolean' ? 0 : filter.operator === 'between' ? 1 : 0;
+            const renderer = getFilterRenderer(type)[idx];
+            if (!renderer) {
+                return html ``;
+            }
+            return column.type === 'select'
+                ? html `
+              <ox-select name="${name}" placeholder="${placeholder}">
+                <ox-popup-list multiple attr-selected="checked" with-search>
+                  ${renderer(column, this)}
+                </ox-popup-list>
+              </ox-select
+            `
+                : html ` <label filter-title>${column.name} ${renderer(column, this)} </label> `;
+        })}
+      </form>
+    `;
+    }
+    get queryFilters() {
+        var formData = new FormData(this.form);
+        return this.config.columns
+            .filter(columnConfig => columnConfig.filter)
+            .map((column) => {
+            const { name, filter } = column;
+            const operator = typeof filter === 'boolean' ? 'eq' : filter.operator || 'eq';
+            var value = formData.getAll(name);
+            if (value.length == 0) {
+                return;
+            }
+            if (-1 === value.findIndex(v => v !== '')) {
+                return;
+            }
+            return {
+                name,
+                operator,
+                value: value.length === 1 ? value[0] : value
+            };
+        })
+            .filter(result => result !== undefined);
+    }
+};
+FiltersForm.styles = [
+    FilterStyles,
+    css `
+      :host {
+        display: flex;
+      }
+
+      form {
+        flex: 1;
+
+        display: flex;
+        flex-direction: row;
+
+        justify-content: space-between;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], FiltersForm.prototype, "config", void 0);
+__decorate([
+    property({ type: String })
+], FiltersForm.prototype, "defaultOperator", void 0);
+__decorate([
+    query('form')
+], FiltersForm.prototype, "form", void 0);
+FiltersForm = __decorate([
+    customElement('ox-filters-form')
+], FiltersForm);
+export { FiltersForm };
+//# sourceMappingURL=filters-form.js.map

package/dist/src/filters/filters-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ColumnConfig } from '..'\nimport { GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator?:\n    | 'eq'\n    | 'between'\n    | 'gte'\n    | 'lte'\n    | 'is_not_true'\n    | 'in'\n    | 'like'\n    | 'i_like'\n    | 'noteq'\n    | 'is_empty_num_id'\n    | 'is_blank'\n    | 'is_present'\n    | 'is_not_false'\n    | 'is_true'\n    | 'is_false'\n    | 'is_not_null'\n    | 'is_null'\n    | 'notin_with_null'\n    | 'notin'\n    | 'gt'\n    | 'lt'\n    | 'i_nlike'\n    | 'nlike'\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n\n        justify-content: space-between;\n      }\n    `\n  ]\n\n  @property({ type: Object }) config!: GristConfig\n  @property({ type: String }) defaultOperator: string = 'eq'\n  @query('form') form!: HTMLFormElement\n\n  render(): TemplateResult {\n    const columns = this.config.columns.filter(columnConfig => columnConfig.filter)\n\n    return html`\n      <form>\n        ${columns.map((column: ColumnConfig) => {\n          const { name, label, filter } = column\n          const placeholder =\n            typeof label === 'string'\n              ? name\n              : typeof label !== 'object'\n              ? name\n              : label.renderer\n              ? label.renderer()\n              : name\n\n          const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n          const idx = typeof filter === 'boolean' ? 0 : filter!.operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(type)[idx]\n\n          if (!renderer) {\n            return html``\n          }\n\n          return column.type === 'select'\n            ? html`\n              <ox-select name=\"${name}\" placeholder=\"${placeholder}\">\n                <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                  ${renderer(column, this)}\n                </ox-popup-list>\n              </ox-select\n            `\n            : html` <label filter-title>${column.name} ${renderer(column, this)} </label> `\n        })}\n      </form>\n    `\n  }\n\n  get queryFilters(): QueryFilter[] {\n    var formData = new FormData(this.form)\n\n    return this.config.columns\n      .filter(columnConfig => columnConfig.filter)\n      .map((column: ColumnConfig) => {\n        const { name, filter } = column\n        const operator = typeof filter === 'boolean' ? 'eq' : filter!.operator || 'eq'\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        return {\n          name,\n          operator,\n          value: value.length === 1 ? value[0] : value\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n  }\n}\n"]}

package/dist/src/filters/index.d.ts

@@ -4,3 +4,4 @@ export * from './filter-input';
 export * from './filter-checkbox';
 export * from './filter-range-date';
 export * from './filter-range-number';
+export * from './filters-form';

package/dist/src/filters/index.js

@@ -4,4 +4,5 @@ export * from './filter-input';
 export * from './filter-checkbox';
 export * from './filter-range-date';
 export * from './filter-range-number';
+export * from './filters-form';
 //# sourceMappingURL=index.js.map

package/dist/src/filters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA","sourcesContent":["export * from './registry'\n\nexport * from './filter-select'\nexport * from './filter-input'\nexport * from './filter-checkbox'\nexport * from './filter-range-date'\nexport * from './filter-range-number'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AAErC,cAAc,gBAAgB,CAAA","sourcesContent":["export * from './registry'\n\nexport * from './filter-select'\nexport * from './filter-input'\nexport * from './filter-checkbox'\nexport * from './filter-range-date'\nexport * from './filter-range-number'\n\nexport * from './filters-form'\n"]}

package/dist/src/filters/registry.d.ts

@@ -1,7 +1,7 @@
 import { FilterSelectRenderer } from '../types';
-export declare function registerRenderer(type: string, renderer: FilterSelectRenderer): void;
-export declare function unregisterRenderer(type: string): void;
-export declare function getRenderers(): {
-    [name: string]: FilterSelectRenderer;
+export declare function registerFilterRenderer(type: string, renderer: FilterSelectRenderer[]): void;
+export declare function unregisterFilterRenderer(type: string): void;
+export declare function getFilterRenderers(): {
+    [name: string]: FilterSelectRenderer[];
 };
-export declare function getRenderer(type: string | FilterSelectRenderer): FilterSelectRenderer;
+export declare function getFilterRenderer(type: string): FilterSelectRenderer[];

package/dist/src/filters/registry.js

@@ -4,40 +4,40 @@ import { FilterRangeDate } from './filter-range-date';
 import { FilterRangeNumber } from './filter-range-number';
 import { FilterSelect } from './filter-select';
 var RENDERERS = {
-    string: FilterInput,
-    text: FilterInput,
-    email: FilterInput,
-    tel: FilterInput,
-    integer: FilterRangeNumber,
-    float: FilterRangeNumber,
-    number: FilterRangeNumber,
-    select: FilterSelect,
-    boolean: FilterCheckbox,
-    checkbox: FilterCheckbox,
-    month: FilterRangeDate,
-    week: FilterRangeDate,
-    date: FilterRangeDate,
-    time: FilterRangeDate,
-    datetime: FilterRangeDate,
-    color: FilterInput,
-    progress: FilterRangeNumber,
-    link: FilterInput,
-    image: FilterInput,
-    json5: FilterInput
+    string: [FilterInput],
+    text: [FilterInput],
+    email: [FilterInput],
+    tel: [FilterInput],
+    integer: [FilterInput, FilterRangeNumber],
+    float: [FilterInput, FilterRangeNumber],
+    number: [FilterInput, FilterRangeNumber],
+    select: [FilterSelect],
+    boolean: [FilterCheckbox],
+    checkbox: [FilterCheckbox],
+    month: [FilterInput, FilterRangeDate],
+    week: [FilterInput, FilterRangeDate],
+    date: [FilterInput, FilterRangeDate],
+    time: [FilterInput, FilterRangeDate],
+    datetime: [FilterInput, FilterRangeDate],
+    color: [FilterInput],
+    progress: [FilterInput, FilterRangeNumber],
+    link: [FilterInput],
+    image: [FilterInput],
+    json5: [FilterInput]
 };
-export function registerRenderer(type, renderer) {
+export function registerFilterRenderer(type, renderer) {
     RENDERERS[type] = renderer;
 }
-export function unregisterRenderer(type) {
+export function unregisterFilterRenderer(type) {
     delete RENDERERS[type];
 }
-export function getRenderers() {
+export function getFilterRenderers() {
     return { ...RENDERERS };
 }
-export function getRenderer(type) {
+export function getFilterRenderer(type) {
     if (typeof type == 'function') {
         return type;
     }
-    return RENDERERS[type || 'text'] || FilterSelect;
+    return RENDERERS[type || 'text'] || [FilterInput];
 }
 //# sourceMappingURL=registry.js.map

package/dist/src/filters/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/filters/registry.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,IAAI,SAAS,GAET;IACF,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,WAAW;IAClB,GAAG,EAAE,WAAW;IAChB,OAAO,EAAE,iBAAiB;IAC1B,KAAK,EAAE,iBAAiB;IACxB,MAAM,EAAE,iBAAiB;IACzB,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,cAAc;IACxB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,eAAe;IACrB,QAAQ,EAAE,eAAe;IACzB,KAAK,EAAE,WAAW;IAClB,QAAQ,EAAE,iBAAiB;IAC3B,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,WAAW;IAClB,KAAK,EAAE,WAAW;CACnB,CAAA;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAY,EAAE,QAA8B;IAC3E,SAAS,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAA;AAC5B,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAAY;IAC7C,OAAO,SAAS,CAAC,IAAI,CAAC,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;AACzB,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAAmC;IAC7D,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,SAAS,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,YAAY,CAAA;AAClD,CAAC","sourcesContent":["import { FilterSelectRenderer } from '../types'\nimport { FilterCheckbox } from './filter-checkbox'\nimport { FilterInput } from './filter-input'\nimport { FilterRangeDate } from './filter-range-date'\nimport { FilterRangeNumber } from './filter-range-number'\nimport { FilterSelect } from './filter-select'\n\nvar RENDERERS: {\n  [name: string]: FilterSelectRenderer\n} = {\n  string: FilterInput,\n  text: FilterInput,\n  email: FilterInput,\n  tel: FilterInput,\n  integer: FilterRangeNumber,\n  float: FilterRangeNumber,\n  number: FilterRangeNumber,\n  select: FilterSelect,\n  boolean: FilterCheckbox,\n  checkbox: FilterCheckbox,\n  month: FilterRangeDate,\n  week: FilterRangeDate,\n  date: FilterRangeDate,\n  time: FilterRangeDate,\n  datetime: FilterRangeDate,\n  color: FilterInput,\n  progress: FilterRangeNumber,\n  link: FilterInput,\n  image: FilterInput,\n  json5: FilterInput\n}\n\nexport function registerRenderer(type: string, renderer: FilterSelectRenderer) {\n  RENDERERS[type] = renderer\n}\n\nexport function unregisterRenderer(type: string): void {\n  delete RENDERERS[type]\n}\n\nexport function getRenderers(): { [name: string]: FilterSelectRenderer } {\n  return { ...RENDERERS }\n}\n\nexport function getRenderer(type: string | FilterSelectRenderer): FilterSelectRenderer {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return RENDERERS[type || 'text'] || FilterSelect\n}\n"]}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/filters/registry.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,IAAI,SAAS,GAET;IACF,MAAM,EAAE,CAAC,WAAW,CAAC;IACrB,IAAI,EAAE,CAAC,WAAW,CAAC;IACnB,KAAK,EAAE,CAAC,WAAW,CAAC;IACpB,GAAG,EAAE,CAAC,WAAW,CAAC;IAClB,OAAO,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACzC,KAAK,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACvC,MAAM,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,MAAM,EAAE,CAAC,YAAY,CAAC;IACtB,OAAO,EAAE,CAAC,cAAc,CAAC;IACzB,QAAQ,EAAE,CAAC,cAAc,CAAC;IAC1B,KAAK,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;IACrC,IAAI,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;IACpC,IAAI,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;IACpC,IAAI,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;IACpC,QAAQ,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;IACxC,KAAK,EAAE,CAAC,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC;IAC1C,IAAI,EAAE,CAAC,WAAW,CAAC;IACnB,KAAK,EAAE,CAAC,WAAW,CAAC;IACpB,KAAK,EAAE,CAAC,WAAW,CAAC;CACrB,CAAA;AAED,MAAM,UAAU,sBAAsB,CAAC,IAAY,EAAE,QAAgC;IACnF,SAAS,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAA;AAC5B,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,IAAY;IACnD,OAAO,SAAS,CAAC,IAAI,CAAC,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,kBAAkB;IAChC,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;AACzB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAY;IAC5C,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,SAAS,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;AACnD,CAAC","sourcesContent":["import { FilterSelectRenderer } from '../types'\nimport { FilterCheckbox } from './filter-checkbox'\nimport { FilterInput } from './filter-input'\nimport { FilterRangeDate } from './filter-range-date'\nimport { FilterRangeNumber } from './filter-range-number'\nimport { FilterSelect } from './filter-select'\n\nvar RENDERERS: {\n  [name: string]: FilterSelectRenderer[]\n} = {\n  string: [FilterInput],\n  text: [FilterInput],\n  email: [FilterInput],\n  tel: [FilterInput],\n  integer: [FilterInput, FilterRangeNumber],\n  float: [FilterInput, FilterRangeNumber],\n  number: [FilterInput, FilterRangeNumber],\n  select: [FilterSelect],\n  boolean: [FilterCheckbox],\n  checkbox: [FilterCheckbox],\n  month: [FilterInput, FilterRangeDate],\n  week: [FilterInput, FilterRangeDate],\n  date: [FilterInput, FilterRangeDate],\n  time: [FilterInput, FilterRangeDate],\n  datetime: [FilterInput, FilterRangeDate],\n  color: [FilterInput],\n  progress: [FilterInput, FilterRangeNumber],\n  link: [FilterInput],\n  image: [FilterInput],\n  json5: [FilterInput]\n}\n\nexport function registerFilterRenderer(type: string, renderer: FilterSelectRenderer[]) {\n  RENDERERS[type] = renderer\n}\n\nexport function unregisterFilterRenderer(type: string): void {\n  delete RENDERERS[type]\n}\n\nexport function getFilterRenderers(): { [name: string]: FilterSelectRenderer[] } {\n  return { ...RENDERERS }\n}\n\nexport function getFilterRenderer(type: string): FilterSelectRenderer[] {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return RENDERERS[type || 'text'] || [FilterInput]\n}\n"]}

package/dist/src/index.d.ts

@@ -7,5 +7,4 @@ export * from './renderers';
 export * from './handlers';
 export * from './formatters';
 export * from './gutters';
-export * from './interfaces';
-export * from './search-form';
+export * from './filters';

package/dist/src/index.js

@@ -7,6 +7,5 @@ export * from './renderers';
 export * from './handlers';
 export * from './formatters';
 export * from './gutters';
-export * from './interfaces';
-export * from './search-form';
+export * from './filters';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,yBAAyB,CAAA;AACvC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AAEzB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA","sourcesContent":["export * from './types'\n\nexport * from './configure/zero-config'\nexport * from './data-grist'\nexport * from './data-report'\n\nexport * from './editors'\nexport * from './renderers'\nexport * from './handlers'\nexport * from './formatters'\nexport * from './gutters'\n\nexport * from './interfaces'\nexport * from './search-form'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,yBAAyB,CAAA;AACvC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA","sourcesContent":["export * from './types'\n\nexport * from './configure/zero-config'\nexport * from './data-grist'\nexport * from './data-report'\n\nexport * from './editors'\nexport * from './renderers'\nexport * from './handlers'\nexport * from './formatters'\nexport * from './gutters'\nexport * from './filters'\n"]}

package/dist/src/types.d.ts

@@ -1,12 +1,12 @@
+import { TemplateResult } from 'lit-html';
 import { DataCardField } from './data-card/data-card-field';
 import { DataCardGutter } from './data-card/data-card-gutter';
+import { RecordCard } from './data-card/record-card';
 import { DataGridField } from './data-grid/data-grid-field';
 import { DataListField } from './data-list/data-list-field';
 import { DataListGutter } from './data-list/data-list-gutter';
-import { DataReportField } from './data-report/data-report-field';
-import { RecordCard } from './data-card/record-card';
 import { RecordPartial } from './data-list/record-partial';
-import { TemplateResult } from 'lit-html';
+import { DataReportField } from './data-report/data-report-field';
 export declare type GristConfig = {
     columns: ColumnConfig[];
     rows: RowsConfig;
@@ -21,6 +21,7 @@ export declare type SorterConfig = {
 export declare type SortersConfig = SorterConfig[];
 export declare type FilterConfig = {
     type: string;
+    operator?: 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' | 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' | 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike';
     options?: {
         [key: string]: any;
     };

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { DataCardField } from './data-card/data-card-field'\nimport { DataCardGutter } from './data-card/data-card-gutter'\nimport { DataGridField } from './data-grid/data-grid-field'\nimport { DataListField } from './data-list/data-list-field'\nimport { DataListGutter } from './data-list/data-list-gutter'\nimport { DataReportField } from './data-report/data-report-field'\nimport { RecordCard } from './data-card/record-card'\nimport { RecordPartial } from './data-list/record-partial'\nimport { TemplateResult } from 'lit-html'\n\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n}\n\nexport type SorterConfig = { name: string; desc?: boolean }\nexport type SortersConfig = SorterConfig[]\nexport type FilterConfig = { type: string; options?: { [key: string]: any } } | boolean\n\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\nexport type FetchOption = { page?: number; limit?: number; sorters?: object[]; options?: object }\nexport type FetchHandler = (param: FetchOption) => {\n  page?: number\n  limit?: number\n  total: number\n  records: object[]\n}\n\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any\n) => void\n\nexport type ColumnConfig = {\n  type: string\n  name: string\n  gutterName?: string\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  validation?: ValidationCallback\n  filter?: FilterConfig\n  imex?: ImexConfig\n  multiple?: boolean\n}\n\nexport type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean\n\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n    }\n\nexport type LabelRenderer = () => void\n\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n}\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: { [key: string]: any }\n  rowOptionField?: string\n}\n\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner: RecordCard | DataCardGutter | DataCardField | DataListGutter | DataListField | RecordPartial | DataReportField\n) => TemplateResult | string | void\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => Element\nexport type FieldThumbnailRenderer = (record: GristRecord, rowIndex: number) => TemplateResult | string | void\nexport type FilterSelectRenderer = (column: ColumnConfig, owner: Element) => TemplateResult | string | void\n\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n}\n\nexport type ListConfig = {\n  thumbnail: FieldThumbnailRenderer\n  fields: string[]\n  details: string[]\n}\n\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\nexport type RowsConfig = {\n  appendable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\nexport type GristRecord = {\n  id?: string\n  name?: string\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  [key: string]: any\n}\n\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field'\nimport { DataCardGutter } from './data-card/data-card-gutter'\nimport { RecordCard } from './data-card/record-card'\nimport { DataGridField } from './data-grid/data-grid-field'\nimport { DataListField } from './data-list/data-list-field'\nimport { DataListGutter } from './data-list/data-list-gutter'\nimport { RecordPartial } from './data-list/record-partial'\nimport { DataReportField } from './data-report/data-report-field'\n\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n}\n\nexport type SorterConfig = { name: string; desc?: boolean }\nexport type SortersConfig = SorterConfig[]\nexport type FilterConfig =\n  | {\n      type: string\n      operator?:\n        | 'eq'\n        | 'between'\n        | 'gte'\n        | 'lte'\n        | 'is_not_true'\n        | 'in'\n        | 'like'\n        | 'i_like'\n        | 'noteq'\n        | 'is_empty_num_id'\n        | 'is_blank'\n        | 'is_present'\n        | 'is_not_false'\n        | 'is_true'\n        | 'is_false'\n        | 'is_not_null'\n        | 'is_null'\n        | 'notin_with_null'\n        | 'notin'\n        | 'gt'\n        | 'lt'\n        | 'i_nlike'\n        | 'nlike'\n      options?: { [key: string]: any }\n    }\n  | boolean\n\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\nexport type FetchOption = { page?: number; limit?: number; sorters?: object[]; options?: object }\nexport type FetchHandler = (param: FetchOption) => {\n  page?: number\n  limit?: number\n  total: number\n  records: object[]\n}\n\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any\n) => void\n\nexport type ColumnConfig = {\n  type: string\n  name: string\n  gutterName?: string\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  validation?: ValidationCallback\n  filter?: FilterConfig\n  imex?: ImexConfig\n  multiple?: boolean\n}\n\nexport type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean\n\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n    }\n\nexport type LabelRenderer = () => void\n\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n}\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: { [key: string]: any }\n  rowOptionField?: string\n}\n\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner: RecordCard | DataCardGutter | DataCardField | DataListGutter | DataListField | RecordPartial | DataReportField\n) => TemplateResult | string | void\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => Element\nexport type FieldThumbnailRenderer = (record: GristRecord, rowIndex: number) => TemplateResult | string | void\nexport type FilterSelectRenderer = (column: ColumnConfig, owner: Element) => TemplateResult | string | void\n\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n}\n\nexport type ListConfig = {\n  thumbnail: FieldThumbnailRenderer\n  fields: string[]\n  details: string[]\n}\n\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\nexport type RowsConfig = {\n  appendable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\nexport type GristRecord = {\n  id?: string\n  name?: string\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  [key: string]: any\n}\n\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n"]}