@operato/data-grist 1.3.2 → 1.3.4

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.3.4](https://github.com/hatiolab/operato/compare/v1.3.3...v1.3.4) (2023-06-17)
+
+
+### :bug: Bug Fix
+
+* enables the ability to provide filter functionality in the grid header ([e565d41](https://github.com/hatiolab/operato/commit/e565d4149a6ec5106eb61a6f6cb640b299aafe55))
+
+
+
+### [1.3.3](https://github.com/hatiolab/operato/compare/v1.3.2...v1.3.3) (2023-06-16)
+
+
+### :bug: Bug Fix
+
+* simplify ox-empty-note ([b1142d4](https://github.com/hatiolab/operato/commit/b1142d4a1973cea51aa931d6755128f3e80eac40))
+
+
+
 ### [1.3.2](https://github.com/hatiolab/operato/compare/v1.3.1...v1.3.2) (2023-06-13)
 
 **Note:** Version bump only for package @operato/data-grist

package/dist/src/configure/config-builder.js

@@ -2,14 +2,16 @@ import { buildColumn } from './column-builder';
 import { buildImexOptions } from './imex-option-builder';
 import { buildListOptions } from './list-option-builder';
 import { buildRowsOptions } from './rows-option-builder';
+import { buildFiltersOptions } from './filters-option-builder';
 export const buildConfig = (config) => {
-    var { columns = [], rows = {}, pagination, sorters, list, imex } = config;
+    var { columns = [], rows = {}, pagination, sorters, filters, list, imex } = config;
     return {
         ...config,
         columns: columns.map((column) => buildColumn(column)),
         rows: buildRowsOptions(rows),
         pagination,
         sorters,
+        filters: buildFiltersOptions(filters),
         list: buildListOptions(list),
         imex: buildImexOptions(imex)
     };

package/dist/src/configure/config-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"config-builder.js","sourceRoot":"","sources":["../../../src/configure/config-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAW,EAAe,EAAE;IACtD,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,MAAM,CAAA;IAEzE,OAAO;QACL,GAAG,MAAM;QACT,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAC1D,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,UAAU;QACV,OAAO;QACP,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;KAC7B,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { GristConfig } from '../types'\nimport { buildColumn } from './column-builder'\nimport { buildImexOptions } from './imex-option-builder'\nimport { buildListOptions } from './list-option-builder'\nimport { buildRowsOptions } from './rows-option-builder'\n\nexport const buildConfig = (config: any): GristConfig => {\n  var { columns = [], rows = {}, pagination, sorters, list, imex } = config\n\n  return {\n    ...config,\n    columns: columns.map((column: any) => buildColumn(column)),\n    rows: buildRowsOptions(rows),\n    pagination,\n    sorters,\n    list: buildListOptions(list),\n    imex: buildImexOptions(imex)\n  }\n}\n"]}
+{"version":3,"file":"config-builder.js","sourceRoot":"","sources":["../../../src/configure/config-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAW,EAAe,EAAE;IACtD,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,MAAM,CAAA;IAElF,OAAO;QACL,GAAG,MAAM;QACT,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAC1D,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,UAAU;QACV,OAAO;QACP,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC;QACrC,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;KAC7B,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { GristConfig } from '../types'\nimport { buildColumn } from './column-builder'\nimport { buildImexOptions } from './imex-option-builder'\nimport { buildListOptions } from './list-option-builder'\nimport { buildRowsOptions } from './rows-option-builder'\nimport { buildFiltersOptions } from './filters-option-builder'\n\nexport const buildConfig = (config: any): GristConfig => {\n  var { columns = [], rows = {}, pagination, sorters, filters, list, imex } = config\n\n  return {\n    ...config,\n    columns: columns.map((column: any) => buildColumn(column)),\n    rows: buildRowsOptions(rows),\n    pagination,\n    sorters,\n    filters: buildFiltersOptions(filters),\n    list: buildListOptions(list),\n    imex: buildImexOptions(imex)\n  }\n}\n"]}

package/dist/src/configure/filters-option-builder.d.ts

@@ -0,0 +1,2 @@
+import { FiltersConfig } from '../types';
+export declare const buildFiltersOptions: (filtersConfig: FiltersConfig | undefined) => FiltersConfig;

package/dist/src/configure/filters-option-builder.js

@@ -0,0 +1,7 @@
+export const buildFiltersOptions = (filtersConfig) => {
+    return {
+        header: false,
+        ...filtersConfig
+    };
+};
+//# sourceMappingURL=filters-option-builder.js.map

package/dist/src/configure/filters-option-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters-option-builder.js","sourceRoot":"","sources":["../../../src/configure/filters-option-builder.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,aAAwC,EAAiB,EAAE;IAC7F,OAAO;QACL,MAAM,EAAE,KAAK;QACb,GAAG,aAAa;KACjB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { FiltersConfig } from '../types'\n\nexport const buildFiltersOptions = (filtersConfig: FiltersConfig | undefined): FiltersConfig => {\n  return {\n    header: false,\n    ...filtersConfig\n  }\n}\n"]}

package/dist/src/data-card/data-card.js

@@ -59,15 +59,7 @@ let DataCard = class DataCard extends DataManipulator {
             ?dirty=${record['__dirty__']}
           ></ox-record-card>
         `)}
-      ${this.empty
-            ? html `
-            <ox-empty-note
-              icon="list"
-              title="EMPTY LIST"
-              description="There are no records to be shown"
-            ></ox-empty-note>
-          `
-            : html ``}
+      ${this.empty ? html ` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html ``}
       ${this.isTop
             ? html ``
             : html ` <mwc-icon id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}

package/dist/src/data-card/data-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '../empty-note'\nimport './record-card'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-card-background-color);\n        overflow-y: auto;\n        padding: var(--padding-wide);\n\n        display: grid;\n        grid-template-columns: var(--data-card-template);\n        grid-template-rows: min-content;\n\n        grid-gap: var(--margin-wide);\n      }\n\n      ox-record-card {\n        height: min-content;\n        align-items: stretch;\n        background-color: var(--data-card-record-card-background-color);\n        border: var(--data-card-record-card-border);\n        border-radius: var(--data-card-record-card-border-radius);\n      }\n      ox-record-card:hover {\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      [selected-row] {\n        background-color: var(--data-card-record-card-selected-border);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-card-fab-position-vertical);\n        right: var(--data-card-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-card-fab-color);\n        box-shadow: var(--data-card-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) empty?: boolean\n\n  @state() private _records: GristRecord[] = []\n  @state() private isTop: boolean = false\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-card\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-card>\n        `\n      )}\n      ${this.empty\n        ? html`\n            <ox-empty-note\n              icon=\"list\"\n              title=\"EMPTY LIST\"\n              description=\"There are no records to be shown\"\n            ></ox-empty-note>\n          `\n        : html``}\n      ${this.isTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}
+{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,eAAe,CAAA;AACtB,OAAO,eAAe,CAAA;AAEtB,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAIrD,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,eAAe;IAA7C;;QAkEmB,aAAQ,GAAkB,EAAE,CAAA;QAC5B,UAAK,GAAY,KAAK,CAAA;QAE/B,WAAM,GAAW,CAAC,CAAA;QAClB,WAAM,GAAW,EAAE,CAAA;QACnB,UAAK,GAAW,CAAC,CAAA;IA0E3B,CAAC;IAxEC,YAAY,CAAC,OAA6B;QACxC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QAEjB,wBAAwB;QACxB,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YAClC,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAA;YAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;YACtC,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAA;YAEvC,IAAI,iBAAiB,IAAI,YAAY,GAAG,gBAAgB,GAAG,CAAC,EAAE;gBAC5D,8BAA8B;gBAC9B,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;gBAEnD,IAAI,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAE;oBACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;iBACtF;aACF;YAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,CAAA;QAClC,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAA;YAClB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAA;SACf;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YACjC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAA;YAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;YACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAA;SACjC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEjC,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE;YAC9C,OAAO,GAAG,CAAC,GAAG,OAAO,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAA;SAC3C;QAED,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CACX,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAA;;sBAEZ,IAAI,CAAC,MAAM;oBACb,IAAI,CAAC,IAAI;sBACP,MAAM;wBACJ,QAAQ;4BACJ,MAAM,CAAC,cAAc,CAAC;qBAC7B,MAAM,CAAC,WAAW,CAAC;;SAE/B,CACF;QACC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,sDAAsD,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;QAChF,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA,iCAAiC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B;KAClG,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,IAAI,CAAC,SAAS,GAAG,CAAC,CAAA;QAElB,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAA;IACb,CAAC;;AA/IM,eAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2DF;CACF,AA7DY,CA6DZ;AAE4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAgB;AAE3B;IAAhB,KAAK,EAAE;0CAAqC;AAC5B;IAAhB,KAAK,EAAE;uCAA+B;AAnE5B,QAAQ;IADpB,aAAa,CAAC,SAAS,CAAC;GACZ,QAAQ,CAiJpB;SAjJY,QAAQ","sourcesContent":["import '@material/mwc-icon'\nimport '../empty-note'\nimport './record-card'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-card-background-color);\n        overflow-y: auto;\n        padding: var(--padding-wide);\n\n        display: grid;\n        grid-template-columns: var(--data-card-template);\n        grid-template-rows: min-content;\n\n        grid-gap: var(--margin-wide);\n      }\n\n      ox-record-card {\n        height: min-content;\n        align-items: stretch;\n        background-color: var(--data-card-record-card-background-color);\n        border: var(--data-card-record-card-border);\n        border-radius: var(--data-card-record-card-border-radius);\n      }\n      ox-record-card:hover {\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      [selected-row] {\n        background-color: var(--data-card-record-card-selected-border);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-card-fab-position-vertical);\n        right: var(--data-card-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-card-fab-color);\n        box-shadow: var(--data-card-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) empty?: boolean\n\n  @state() private _records: GristRecord[] = []\n  @state() private isTop: boolean = false\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-card\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-card>\n        `\n      )}\n      ${this.empty ? html` <ox-empty-note title=\"NO RECORDS\"></ox-empty-note> ` : html``}\n      ${this.isTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}

package/dist/src/data-grid/data-grid-header.d.ts

@@ -8,6 +8,7 @@ export declare class DataGridHeader extends LitElement {
     data: GristData;
     sorters: SortersConfig;
     filters: FilterValue[];
+    filteringFeature: boolean;
     private _lastAccVal?;
     private _throttledNotifier?;
     connectedCallback(): void;

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

@@ -16,36 +16,39 @@ let DataGridHeader = class DataGridHeader extends LitElement {
         this.data = ZERO_DATA;
         this.sorters = [];
         this.filters = [];
+        this.filteringFeature = false;
     }
     connectedCallback() {
         super.connectedCallback();
         const grid = closestElement('ox-grist', this);
-        this === null || this === void 0 ? void 0 : this.addEventListener('filter-change', (e) => {
-            const { name, operator, value } = e.detail;
-            const filters = this.filters instanceof Array ? [...this.filters] : [];
-            if (value == null) {
-                const index = filters.findIndex(filter => filter.name === name);
-                if (index === -1) {
-                    return;
-                }
-                filters.splice(index, 1);
-            }
-            else {
-                const index = filters.findIndex(filter => filter.name === name);
-                if (index === -1) {
-                    filters.push({ name, operator, value });
+        if (this.filteringFeature) {
+            this === null || this === void 0 ? void 0 : this.addEventListener('filter-change', (e) => {
+                const { name, operator, value } = e.detail;
+                const filters = this.filters instanceof Array ? [...this.filters] : [];
+                if (value == null) {
+                    const index = filters.findIndex(filter => filter.name === name);
+                    if (index === -1) {
+                        return;
+                    }
+                    filters.splice(index, 1);
                 }
                 else {
-                    filters.splice(index, 1, { name, operator, value });
-                }
-            }
-            grid === null || grid === void 0 ? void 0 : grid.dispatchEvent(new CustomEvent('fetch-params-change', {
-                detail: {
-                    filters,
-                    from: 'data-grid-header'
+                    const index = filters.findIndex(filter => filter.name === name);
+                    if (index === -1) {
+                        filters.push({ name, operator, value });
+                    }
+                    else {
+                        filters.splice(index, 1, { name, operator, value });
+                    }
                 }
-            }));
-        });
+                grid === null || grid === void 0 ? void 0 : grid.dispatchEvent(new CustomEvent('fetch-params-change', {
+                    detail: {
+                        filters,
+                        from: 'data-grid-header'
+                    }
+                }));
+            });
+        }
     }
     render() {
         var columns = this.columns || [];
@@ -76,7 +79,7 @@ let DataGridHeader = class DataGridHeader extends LitElement {
                       </span>
                     `
                 : undefined}
-                ${column.filter && column.filter.operator !== 'search'
+                ${this.filteringFeature && column.filter && column.filter.operator !== 'search'
                 ? html ` <span filter> ${this._renderFilterHeader(column)} </span> `
                 : undefined}
                 ${column.resizable !== false
@@ -384,6 +387,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], DataGridHeader.prototype, "filters", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'filtering-feature' })
+], DataGridHeader.prototype, "filteringFeature", void 0);
 DataGridHeader = __decorate([
     customElement('ox-grid-header')
 ], DataGridHeader);

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 } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { OxPopup } from '@operato/popup'\nimport { TooltipStyles } from '@operato/styles'\nimport { closestElement, detectOverflow } from '@operato/utils'\n\nimport { ZERO_COLUMNS, ZERO_DATA } from '../configure/zero-config'\nimport { FilterStyles } from '../filters/filter-styles'\nimport { getFilterRenderer } from '../filters/registry'\nimport { ColumnConfig, FilterConfigObject, FilterValue, GristData, SortersConfig } from '../types'\n\n@customElement('ox-grid-header')\nexport class DataGridHeader extends LitElement {\n  static styles = [\n    FilterStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--grid-template-columns);\n\n        overflow: hidden;\n      }\n\n      div[column] {\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        margin-right: 0;\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: Array }) columns: ColumnConfig[] = ZERO_COLUMNS\n  @property({ type: Object }) data: GristData = ZERO_DATA\n\n  @property({ type: Object }) sorters: SortersConfig = []\n  @property({ type: Object }) filters: FilterValue[] = []\n\n  private _lastAccVal?: number\n  private _throttledNotifier?: any\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const grid = closestElement('ox-grist', this)\n\n    this?.addEventListener('filter-change', (e: Event) => {\n      const { name, operator, value } = (e as CustomEvent).detail\n      const filters = this.filters instanceof Array ? [...this.filters] : []\n\n      if (value == null) {\n        const index = filters.findIndex(filter => filter.name === name)\n        if (index === -1) {\n          return\n        }\n\n        filters.splice(index, 1)\n      } else {\n        const index = filters.findIndex(filter => filter.name === name)\n        if (index === -1) {\n          filters.push({ name, operator, value })\n        } else {\n          filters.splice(index, 1, { name, operator, value })\n        }\n      }\n\n      grid?.dispatchEvent(\n        new CustomEvent('fetch-params-change', {\n          detail: {\n            filters,\n            from: 'data-grid-header'\n          }\n        })\n      )\n    })\n  }\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\n                  for-title\n                  @click=${(e: MouseEvent) => this._changeSort(column)}\n                  @mouseover=${(e: MouseEvent) => {\n                    const element = e.target as HTMLSpanElement\n\n                    if (detectOverflow(element)) {\n                      element.setAttribute('data-tooltip', element.textContent!.trim())\n                    }\n                  }}\n                  @mouseout=${(e: MouseEvent) => {\n                    const element = e.target as HTMLSpanElement\n                    element.removeAttribute('data-tooltip')\n                  }}\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 && (column.filter as FilterConfigObject).operator !== 'search'\n                  ? html` <span filter> ${this._renderFilterHeader(column)} </span> `\n                  : 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_down</mwc-icon><sub>${rank}</sub> `\n        : html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n    } else {\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n        : html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n    }\n  }\n\n  _renderFilterHeader(column: ColumnConfig) {\n    const name = column.name\n    const filter = column.filter as FilterConfigObject\n    const type = filter.type\n    const value = this.filters.find(filter => filter.name === name)?.value\n    const idx = 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\n            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n            ${renderer(column, value, this)}</ox-popup\n          >`\n        : filter!.operator === 'in'\n        ? html`<ox-popup-list\n            multiple\n            attr-selected=\"checked\"\n            .value=${value}\n            with-search\n            @select=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    name,\n                    operator: filter!.operator,\n                    value: !e.detail\n                      ? undefined\n                      : e.detail instanceof Array && e.detail.length === 0\n                      ? undefined\n                      : e.detail\n                  }\n                })\n              )}\n            ><div filter-title slot=\"header\">\n              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n            </div>\n            ${renderer(column, value, this)}</ox-popup-list\n          >`\n        : html`<ox-popup-list\n            .value=${value}\n            with-search\n            @select=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    name,\n                    operator: filter!.operator,\n                    value: e.detail ? e.detail : undefined\n                  }\n                })\n              )}\n            ><div filter-title slot=\"header\">\n              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n            </div>\n            ${renderer(column, value, this)}</ox-popup-list\n          >`}\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('fetch-params-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          sorters: this.sorters,\n          from: 'data-grid-header'\n        }\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 } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { OxPopup } from '@operato/popup'\nimport { TooltipStyles } from '@operato/styles'\nimport { closestElement, detectOverflow } from '@operato/utils'\n\nimport { ZERO_COLUMNS, ZERO_DATA } from '../configure/zero-config'\nimport { FilterStyles } from '../filters/filter-styles'\nimport { getFilterRenderer } from '../filters/registry'\nimport { ColumnConfig, FilterConfigObject, FilterValue, GristData, SortersConfig } from '../types'\n\n@customElement('ox-grid-header')\nexport class DataGridHeader extends LitElement {\n  static styles = [\n    FilterStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--grid-template-columns);\n\n        overflow: hidden;\n      }\n\n      div[column] {\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        margin-right: 0;\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: Array }) columns: ColumnConfig[] = ZERO_COLUMNS\n  @property({ type: Object }) data: GristData = ZERO_DATA\n\n  @property({ type: Object }) sorters: SortersConfig = []\n  @property({ type: Object }) filters: FilterValue[] = []\n\n  @property({ type: Boolean, attribute: 'filtering-feature' }) filteringFeature: boolean = false\n\n  private _lastAccVal?: number\n  private _throttledNotifier?: any\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const grid = closestElement('ox-grist', this)\n\n    if (this.filteringFeature) {\n      this?.addEventListener('filter-change', (e: Event) => {\n        const { name, operator, value } = (e as CustomEvent).detail\n        const filters = this.filters instanceof Array ? [...this.filters] : []\n\n        if (value == null) {\n          const index = filters.findIndex(filter => filter.name === name)\n          if (index === -1) {\n            return\n          }\n\n          filters.splice(index, 1)\n        } else {\n          const index = filters.findIndex(filter => filter.name === name)\n          if (index === -1) {\n            filters.push({ name, operator, value })\n          } else {\n            filters.splice(index, 1, { name, operator, value })\n          }\n        }\n\n        grid?.dispatchEvent(\n          new CustomEvent('fetch-params-change', {\n            detail: {\n              filters,\n              from: 'data-grid-header'\n            }\n          })\n        )\n      })\n    }\n  }\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\n                  for-title\n                  @click=${(e: MouseEvent) => this._changeSort(column)}\n                  @mouseover=${(e: MouseEvent) => {\n                    const element = e.target as HTMLSpanElement\n\n                    if (detectOverflow(element)) {\n                      element.setAttribute('data-tooltip', element.textContent!.trim())\n                    }\n                  }}\n                  @mouseout=${(e: MouseEvent) => {\n                    const element = e.target as HTMLSpanElement\n                    element.removeAttribute('data-tooltip')\n                  }}\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                ${this.filteringFeature && column.filter && (column.filter as FilterConfigObject).operator !== 'search'\n                  ? html` <span filter> ${this._renderFilterHeader(column)} </span> `\n                  : 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_down</mwc-icon><sub>${rank}</sub> `\n        : html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n    } else {\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n        : html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n    }\n  }\n\n  _renderFilterHeader(column: ColumnConfig) {\n    const name = column.name\n    const filter = column.filter as FilterConfigObject\n    const type = filter.type\n    const value = this.filters.find(filter => filter.name === name)?.value\n    const idx = 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\n            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n            ${renderer(column, value, this)}</ox-popup\n          >`\n        : filter!.operator === 'in'\n        ? html`<ox-popup-list\n            multiple\n            attr-selected=\"checked\"\n            .value=${value}\n            with-search\n            @select=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    name,\n                    operator: filter!.operator,\n                    value: !e.detail\n                      ? undefined\n                      : e.detail instanceof Array && e.detail.length === 0\n                      ? undefined\n                      : e.detail\n                  }\n                })\n              )}\n            ><div filter-title slot=\"header\">\n              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n            </div>\n            ${renderer(column, value, this)}</ox-popup-list\n          >`\n        : html`<ox-popup-list\n            .value=${value}\n            with-search\n            @select=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    name,\n                    operator: filter!.operator,\n                    value: e.detail ? e.detail : undefined\n                  }\n                })\n              )}\n            ><div filter-title slot=\"header\">\n              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n            </div>\n            ${renderer(column, value, this)}</ox-popup-list\n          >`}\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('fetch-params-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          sorters: this.sorters,\n          from: 'data-grid-header'\n        }\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/data-grid/data-grid.js

@@ -120,7 +120,7 @@ let DataGrid = class DataGrid extends DataManipulator {
         this.style.setProperty('--grid-template-print-columns', this._widths.replace(/px/gi, 'fr'));
     }
     render() {
-        var { pagination = {}, columns = [] } = this.config;
+        var { pagination = {}, columns = [], filters } = this.config;
         var paginatable = !pagination.infinite;
         var data = this.data;
         return html `
@@ -129,6 +129,7 @@ let DataGrid = class DataGrid extends DataManipulator {
         .sorters=${this.sorters}
         .filters=${this.filters}
         .data=${data}
+        ?filtering-feature=${filters === null || filters === void 0 ? void 0 : filters.header}
         @column-width-change=${(e) => {
             let { idx, width } = e.detail;
             columns[idx].width = width;
@@ -137,15 +138,7 @@ let DataGrid = class DataGrid extends DataManipulator {
       ></ox-grid-header>
 
       <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused}>
-        ${this.empty
-            ? html `
-              <ox-empty-note
-                icon="list"
-                title="EMPTY LIST"
-                description="There are no records to be shown"
-              ></ox-empty-note>
-            `
-            : html ``}
+        ${this.empty ? html ` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html ``}
       </ox-grid-body>
       ${paginatable ? html ` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html ``}
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import '../empty-note'\nimport './data-grid-header'\nimport './data-grid-body'\nimport './data-grid-footer'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { ColumnConfig, GristRecord, PaginationConfig } from '../types'\nimport { supportsPassive } from '../utils'\nimport { DataGridHeader } from './data-grid-header'\n\n/**\n * DataGrid\n */\n@customElement('ox-grid')\nexport class DataGrid extends DataManipulator {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n\n        border-width: var(--grid-container-border-width);\n      }\n\n      ox-grid-body {\n        flex: 1;\n        position: relative;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      @media print {\n        :host {\n          zoom: 80%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) focused?: { row: number; column: number }\n  @property({ type: Boolean }) empty?: boolean\n\n  @query('ox-grid-body', true) body!: LitElement\n  @query('ox-grid-header', true) header!: DataGridHeader\n  @query('ox-grid-footer', true) footer!: LitElement\n\n  private _widths?: string\n\n  firstUpdated() {\n    /* header and body scroll synchronization */\n    this.header.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.body.scrollLeft = this.header.scrollLeft\n      }\n    })\n\n    this.body.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.header.scrollLeft = this.body.scrollLeft\n      }\n    })\n\n    this.header.addEventListener('wheel', this.onWheelEvent.bind(this))\n    this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))\n\n    /* record selection processing */\n    this.addEventListener('select-all-change', e => {\n      if (this.data.records.length == 0) {\n        return\n      }\n\n      var { selected } = (e as CustomEvent).detail\n      var { records } = this.data\n\n      records.forEach(record => (record['__selected__'] = selected))\n\n      this.header.requestUpdate()\n      this.body.requestUpdate()\n    })\n\n    this.addEventListener('focus-change', e => {\n      const { row, column } = (e as CustomEvent).detail || {}\n      if (!this.focused || this.focused.row != row || this.focused.column != column) {\n        this.focused = { row, column }\n        this.focus()\n        this.requestUpdate()\n      }\n    })\n  }\n\n  onWheelEvent(e: WheelEvent) {\n    var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n    this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta * 30)\n\n    supportsPassive || e.preventDefault()\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added,\n    removed\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }): void {\n    super.onSelectRecordChanged({ selectedRecords, added, removed })\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    /* record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. */\n    super.onRecordChanged(recordData, row, column)\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('data')) {\n      /*\n       * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,\n       * data의 변동에 대해서도 다시 계산되어야 한다.\n       */\n      this.calculateWidths(this.config.columns)\n\n      if (this.focused && 'row' in this.focused) {\n        var { row = 0, column = 0 } = this.focused\n        var { records: oldrecords = [] } = changes.get('data')\n        var { records: newrecords } = this.data\n\n        var oldrecord = oldrecords[row]\n\n        if (oldrecord && oldrecord !== newrecords[row]) {\n          var newrecord = newrecords.find(\n            record =>\n              /* TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. */\n              oldrecord === record ||\n              ('id' in oldrecord\n                ? record.id == oldrecord.id\n                : 'name' in oldrecord\n                ? record.name == oldrecord.name\n                : false)\n          )\n\n          this.focused = {\n            row: newrecord ? newrecords.indexOf(newrecord) : row,\n            column\n          }\n        }\n      }\n    } else if (changes.has('config')) {\n      this.calculateWidths(this.config.columns)\n    }\n\n    /* grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. */\n    // this.focus()\n  }\n\n  calculateWidths(columns: ColumnConfig[]) {\n    /*\n     * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.\n     */\n    this._widths = columns\n      .filter(column => !column.hidden)\n      .map(column => {\n        switch (typeof column.width) {\n          case 'number':\n            return column.width + 'px'\n          case 'string':\n            return column.width\n          case 'function':\n            return column.width.call(this, column)\n          default:\n            return 'auto'\n        }\n      })\n      .concat(['auto'])\n      .join(' ')\n\n    this.style.setProperty('--grid-template-columns', this._widths)\n    this.style.setProperty('--grid-template-print-columns', this._widths.replace(/px/gi, 'fr'))\n  }\n\n  render() {\n    var { pagination = {} as PaginationConfig, columns = [] } = this.config\n\n    var paginatable = !pagination.infinite\n    var data = this.data\n\n    return html`\n      <ox-grid-header\n        .columns=${columns}\n        .sorters=${this.sorters}\n        .filters=${this.filters}\n        .data=${data}\n        @column-width-change=${(e: CustomEvent) => {\n          let { idx, width } = e.detail\n          columns[idx].width = width\n          this.calculateWidths(columns)\n        }}\n      ></ox-grid-header>\n\n      <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused}>\n        ${this.empty\n          ? html`\n              <ox-empty-note\n                icon=\"list\"\n                title=\"EMPTY LIST\"\n                description=\"There are no records to be shown\"\n              ></ox-empty-note>\n            `\n          : html``}\n      </ox-grid-body>\n      ${paginatable ? html` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html``}\n    `\n  }\n\n  focus() {\n    super.focus()\n\n    this.body.focus()\n  }\n\n  get pullToRefreshTarget() {\n    return this.body\n  }\n}\n"]}
+{"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid.ts"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AACzB,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAA8B,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C;;GAEG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,eAAe;IA2C3C,YAAY;QACV,4CAA4C;QAC5C,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YACzC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;gBACnD,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAA;aAC9C;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YACvC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;gBACnD,IAAI,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA;aAC9C;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACnE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QAElF,iCAAiC;QACjC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,CAAC,CAAC,EAAE;YAC7C,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE;gBACjC,OAAM;aACP;YAED,IAAI,EAAE,QAAQ,EAAE,GAAI,CAAiB,CAAC,MAAM,CAAA;YAC5C,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;YAE3B,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAA;YAE9D,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;YAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAI,CAAiB,CAAC,MAAM,IAAI,EAAE,CAAA;YACvD,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,EAAE;gBAC7E,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA;gBAC9B,IAAI,CAAC,KAAK,EAAE,CAAA;gBACZ,IAAI,CAAC,aAAa,EAAE,CAAA;aACrB;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,YAAY,CAAC,CAAa;QACxB,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAA;QACpD,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC,CAAA;QAErE,eAAe,IAAI,CAAC,CAAC,cAAc,EAAE,CAAA;IACvC,CAAC;IAED,qBAAqB,CAAC,EACpB,eAAe,EACf,KAAK,EACL,OAAO,EAKR;QACC,KAAK,CAAC,qBAAqB,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;QAEhE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;IAC3B,CAAC;IAED,eAAe,CACb,UAAuB,EACvB,GAAW,EACX,MAA2B,CAAC,mCAAmC;QAE/D,sEAAsE;QACtE,KAAK,CAAC,eAAe,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,CAAC,CAAA;QAE9C,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;IAC3B,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB;;;eAGG;YACH,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YAEzC,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;gBACzC,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;gBAC1C,IAAI,EAAE,OAAO,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;gBACtD,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;gBAEvC,IAAI,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,CAAA;gBAE/B,IAAI,SAAS,IAAI,SAAS,KAAK,UAAU,CAAC,GAAG,CAAC,EAAE;oBAC9C,IAAI,SAAS,GAAG,UAAU,CAAC,IAAI,CAC7B,MAAM,CAAC,EAAE;oBACP,qDAAqD;oBACrD,SAAS,KAAK,MAAM;wBACpB,CAAC,IAAI,IAAI,SAAS;4BAChB,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,SAAS,CAAC,EAAE;4BAC3B,CAAC,CAAC,MAAM,IAAI,SAAS;gCACrB,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,SAAS,CAAC,IAAI;gCAC/B,CAAC,CAAC,KAAK,CAAC,CACb,CAAA;oBAED,IAAI,CAAC,OAAO,GAAG;wBACb,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG;wBACpD,MAAM;qBACP,CAAA;iBACF;aACF;SACF;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;SAC1C;QAED,mDAAmD;QACnD,eAAe;IACjB,CAAC;IAED,eAAe,CAAC,OAAuB;QACrC;;WAEG;QACH,IAAI,CAAC,OAAO,GAAG,OAAO;aACnB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;aAChC,GAAG,CAAC,MAAM,CAAC,EAAE;YACZ,QAAQ,OAAO,MAAM,CAAC,KAAK,EAAE;gBAC3B,KAAK,QAAQ;oBACX,OAAO,MAAM,CAAC,KAAK,GAAG,IAAI,CAAA;gBAC5B,KAAK,QAAQ;oBACX,OAAO,MAAM,CAAC,KAAK,CAAA;gBACrB,KAAK,UAAU;oBACb,OAAO,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;gBACxC;oBACE,OAAO,MAAM,CAAA;aAChB;QACH,CAAC,CAAC;aACD,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;aAChB,IAAI,CAAC,GAAG,CAAC,CAAA;QAEZ,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;QAC/D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAA;IAC7F,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,UAAU,GAAG,EAAsB,EAAE,OAAO,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAEhF,IAAI,WAAW,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAA;QACtC,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAEpB,OAAO,IAAI,CAAA;;mBAEI,OAAO;mBACP,IAAI,CAAC,OAAO;mBACZ,IAAI,CAAC,OAAO;gBACf,IAAI;6BACS,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM;+BACb,CAAC,CAAc,EAAE,EAAE;YACxC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAC7B,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,KAAK,CAAA;YAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;QAC/B,CAAC;;;8BAGqB,IAAI,CAAC,MAAM,aAAa,OAAO,UAAU,IAAI,aAAa,IAAI,CAAC,OAAO;UAC1F,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,sDAAsD,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;QAElF,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,gBAAgB,IAAI,CAAC,UAAU,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;KAChH,CAAA;IACH,CAAC;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAC,IAAI,CAAA;IAClB,CAAC;;AA3NM,eAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4BF;CACF,AA/BY,CA+BZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAA0C;AACxC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAgB;AAEf;IAA5B,KAAK,CAAC,cAAc,EAAE,IAAI,CAAC;sCAAkB;AACf;IAA9B,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC;wCAAwB;AACvB;IAA9B,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC;wCAAoB;AAvCvC,QAAQ;IADpB,aAAa,CAAC,SAAS,CAAC;GACZ,QAAQ,CA6NpB;SA7NY,QAAQ","sourcesContent":["import '../empty-note'\nimport './data-grid-header'\nimport './data-grid-body'\nimport './data-grid-footer'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { ColumnConfig, GristRecord, PaginationConfig } from '../types'\nimport { supportsPassive } from '../utils'\nimport { DataGridHeader } from './data-grid-header'\n\n/**\n * DataGrid\n */\n@customElement('ox-grid')\nexport class DataGrid extends DataManipulator {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n\n        border-width: var(--grid-container-border-width);\n      }\n\n      ox-grid-body {\n        flex: 1;\n        position: relative;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      @media print {\n        :host {\n          zoom: 80%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) focused?: { row: number; column: number }\n  @property({ type: Boolean }) empty?: boolean\n\n  @query('ox-grid-body', true) body!: LitElement\n  @query('ox-grid-header', true) header!: DataGridHeader\n  @query('ox-grid-footer', true) footer!: LitElement\n\n  private _widths?: string\n\n  firstUpdated() {\n    /* header and body scroll synchronization */\n    this.header.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.body.scrollLeft = this.header.scrollLeft\n      }\n    })\n\n    this.body.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.header.scrollLeft = this.body.scrollLeft\n      }\n    })\n\n    this.header.addEventListener('wheel', this.onWheelEvent.bind(this))\n    this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))\n\n    /* record selection processing */\n    this.addEventListener('select-all-change', e => {\n      if (this.data.records.length == 0) {\n        return\n      }\n\n      var { selected } = (e as CustomEvent).detail\n      var { records } = this.data\n\n      records.forEach(record => (record['__selected__'] = selected))\n\n      this.header.requestUpdate()\n      this.body.requestUpdate()\n    })\n\n    this.addEventListener('focus-change', e => {\n      const { row, column } = (e as CustomEvent).detail || {}\n      if (!this.focused || this.focused.row != row || this.focused.column != column) {\n        this.focused = { row, column }\n        this.focus()\n        this.requestUpdate()\n      }\n    })\n  }\n\n  onWheelEvent(e: WheelEvent) {\n    var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n    this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta * 30)\n\n    supportsPassive || e.preventDefault()\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added,\n    removed\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }): void {\n    super.onSelectRecordChanged({ selectedRecords, added, removed })\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    /* record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. */\n    super.onRecordChanged(recordData, row, column)\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('data')) {\n      /*\n       * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,\n       * data의 변동에 대해서도 다시 계산되어야 한다.\n       */\n      this.calculateWidths(this.config.columns)\n\n      if (this.focused && 'row' in this.focused) {\n        var { row = 0, column = 0 } = this.focused\n        var { records: oldrecords = [] } = changes.get('data')\n        var { records: newrecords } = this.data\n\n        var oldrecord = oldrecords[row]\n\n        if (oldrecord && oldrecord !== newrecords[row]) {\n          var newrecord = newrecords.find(\n            record =>\n              /* TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. */\n              oldrecord === record ||\n              ('id' in oldrecord\n                ? record.id == oldrecord.id\n                : 'name' in oldrecord\n                ? record.name == oldrecord.name\n                : false)\n          )\n\n          this.focused = {\n            row: newrecord ? newrecords.indexOf(newrecord) : row,\n            column\n          }\n        }\n      }\n    } else if (changes.has('config')) {\n      this.calculateWidths(this.config.columns)\n    }\n\n    /* grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. */\n    // this.focus()\n  }\n\n  calculateWidths(columns: ColumnConfig[]) {\n    /*\n     * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.\n     */\n    this._widths = columns\n      .filter(column => !column.hidden)\n      .map(column => {\n        switch (typeof column.width) {\n          case 'number':\n            return column.width + 'px'\n          case 'string':\n            return column.width\n          case 'function':\n            return column.width.call(this, column)\n          default:\n            return 'auto'\n        }\n      })\n      .concat(['auto'])\n      .join(' ')\n\n    this.style.setProperty('--grid-template-columns', this._widths)\n    this.style.setProperty('--grid-template-print-columns', this._widths.replace(/px/gi, 'fr'))\n  }\n\n  render() {\n    var { pagination = {} as PaginationConfig, columns = [], filters } = this.config\n\n    var paginatable = !pagination.infinite\n    var data = this.data\n\n    return html`\n      <ox-grid-header\n        .columns=${columns}\n        .sorters=${this.sorters}\n        .filters=${this.filters}\n        .data=${data}\n        ?filtering-feature=${filters?.header}\n        @column-width-change=${(e: CustomEvent) => {\n          let { idx, width } = e.detail\n          columns[idx].width = width\n          this.calculateWidths(columns)\n        }}\n      ></ox-grid-header>\n\n      <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused}>\n        ${this.empty ? html` <ox-empty-note title=\"NO RECORDS\"></ox-empty-note> ` : html``}\n      </ox-grid-body>\n      ${paginatable ? html` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html``}\n    `\n  }\n\n  focus() {\n    super.focus()\n\n    this.body.focus()\n  }\n\n  get pullToRefreshTarget() {\n    return this.body\n  }\n}\n"]}

package/dist/src/data-list/data-list.js

@@ -58,15 +58,7 @@ let DataList = class DataList extends DataManipulator {
             ?dirty=${record['__dirty__']}
           ></ox-record-partial>
         `)}
-      ${this.empty
-            ? html `
-            <ox-empty-note
-              icon="list"
-              title="EMPTY LIST"
-              description="There are no records to be shown"
-            ></ox-empty-note>
-          `
-            : html ``}
+      ${this.empty ? html ` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html ``}
       ${this.isTop
             ? html ``
             : html ` <mwc-icon id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}

package/dist/src/data-list/data-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-list.js","sourceRoot":"","sources":["../../../src/data-list/data-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-partial'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-list')\nexport class DataList extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-list-background-color);\n        overflow-y: auto;\n      }\n\n      ox-record-partial:nth-child(even) {\n        background-color: var(--theme-white-color);\n      }\n\n      [selected-row] {\n        background-color: var(--data-list-selected-background-color);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-list-fab-position-vertical);\n        right: var(--data-list-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-list-fab-color);\n        box-shadow: var(--data-list-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) empty?: boolean\n\n  @state() private _records: GristRecord[] = []\n  @state() private isTop: boolean = false\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-partial\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-partial>\n        `\n      )}\n      ${this.empty\n        ? html`\n            <ox-empty-note\n              icon=\"list\"\n              title=\"EMPTY LIST\"\n              description=\"There are no records to be shown\"\n            ></ox-empty-note>\n          `\n        : html``}\n      ${this.isTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}
+{"version":3,"file":"data-list.js","sourceRoot":"","sources":["../../../src/data-list/data-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-partial'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-list')\nexport class DataList extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-list-background-color);\n        overflow-y: auto;\n      }\n\n      ox-record-partial:nth-child(even) {\n        background-color: var(--theme-white-color);\n      }\n\n      [selected-row] {\n        background-color: var(--data-list-selected-background-color);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-list-fab-position-vertical);\n        right: var(--data-list-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-list-fab-color);\n        box-shadow: var(--data-list-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) empty?: boolean\n\n  @state() private _records: GristRecord[] = []\n  @state() private isTop: boolean = false\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-partial\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-partial>\n        `\n      )}\n      ${this.empty ? html` <ox-empty-note title=\"NO RECORDS\"></ox-empty-note> ` : html``}\n      ${this.isTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}

package/dist/src/data-report.js

@@ -58,15 +58,7 @@ let DataReport = class DataReport extends LitElement {
     render() {
         var oops = !this._showSpinner && (!this._data || !this._data.records || this._data.records.length == 0);
         return html `
-      ${oops
-            ? html `
-            <ox-empty-note
-              icon="list"
-              title="EMPTY LIST"
-              description="There are no records to be shown"
-            ></ox-empty-note>
-          `
-            : html ``}
+      ${oops ? html ` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html ``}
 
       <div id="wrap">
         <ox-report-component id="report" .config=${this._config} .data=${this._data}> </ox-report-component>