@operato/data-grist 1.0.0-beta.8 → 1.0.1

package/dist/src/data-manipulator.js

@@ -7,6 +7,9 @@ export class DataManipulator extends LitElement {
         super();
         this.config = ZERO_CONFIG;
         this.data = ZERO_DATA;
+        this.sorters = [];
+        this.filters = [];
+        this.pagination = {};
         this.addEventListener('select-record-change', e => {
             var { records: selectedRecords, added = [], removed = [] } = e.detail;
             this.onSelectRecordChanged({
@@ -145,4 +148,13 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], DataManipulator.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], DataManipulator.prototype, "sorters", void 0);
+__decorate([
+    property({ type: Object })
+], DataManipulator.prototype, "filters", void 0);
+__decorate([
+    property({ type: Object })
+], DataManipulator.prototype, "pagination", void 0);
 //# sourceMappingURL=data-manipulator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-manipulator.js","sourceRoot":"","sources":["../../src/data-manipulator.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA } from './configure/zero-config'\nimport { ColumnConfig, GristConfig, GristData, GristRecord } from './types'\n\nexport class DataManipulator extends LitElement {\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n\n  constructor() {\n    super()\n\n    this.addEventListener('select-record-change', e => {\n      var {\n        records: selectedRecords,\n        added = [],\n        removed = []\n      } = (e as CustomEvent).detail as {\n        records: GristRecord[]\n        added: GristRecord[]\n        removed: GristRecord[]\n      }\n\n      this.onSelectRecordChanged({\n        selectedRecords,\n        added,\n        removed\n      })\n    })\n\n    /* field change processing */\n    this.addEventListener('field-change', e => {\n      var { after, before, column, record, row } = (e as CustomEvent).detail as {\n        after: any\n        before: any\n        column: ColumnConfig\n        record: GristRecord\n        row: number\n      }\n\n      this.onFieldChange({ after, before, column, record, row })\n    })\n\n    /* record reset processing */\n    this.addEventListener('record-reset', e => {\n      var { record, row } = (e as CustomEvent).detail as {\n        record: GristRecord\n        row: number\n      }\n\n      this.onRecordChanged(record['__origin__'], row, null)\n    })\n  }\n\n  onFieldChange({\n    after,\n    before,\n    column,\n    record,\n    row\n  }: {\n    after: any\n    before: any\n    column: ColumnConfig\n    record: GristRecord\n    row: number\n  }) {\n    /* compare changes */\n    if (after === before) {\n      return\n    }\n\n    var validation = column.validation\n    if (validation && typeof validation == 'function') {\n      if (!validation.call(this, after, before, record, column)) {\n        return\n      }\n    }\n\n    this.onRecordChanged({ [column.name]: after }, row, column)\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added = [],\n    removed = []\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }) {\n    var { records } = this.data || {}\n    var { selectable = false } = this.config.rows || {}\n\n    if (!records || !selectable) {\n      return\n    }\n\n    if (selectable && !selectable.multiple) {\n      records.forEach(record => (record['__selected__'] = false))\n    }\n\n    if (selectedRecords) {\n      records.forEach(record => (record['__selected__'] = false))\n      selectedRecords.forEach(record => (record['__selected__'] = true))\n    } else {\n      removed.forEach(record => (record['__selected__'] = false))\n      added.forEach(record => (record['__selected__'] = true))\n    }\n\n    this.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.\n\n    /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */\n    var records = this.data.records\n\n    var beforeRecord = records[row]\n    var afterRecord: GristRecord\n    var wantToDelete = false\n    var wantToAppend = false\n\n    if (!recordData) {\n      if (!beforeRecord) {\n        /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */\n        this.requestUpdate()\n        return\n      } else {\n        /*\n         * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,\n         * 삭제하고자 하는 의도로 이해된다. (주의 필요)\n         */\n        if (beforeRecord['__dirty__'] == '+') {\n          wantToDelete = true\n        } else {\n          afterRecord = {\n            ...beforeRecord,\n            __dirty__: '-'\n          }\n        }\n      }\n    } else {\n      if (!beforeRecord) {\n        /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */\n        afterRecord = {\n          ...recordData,\n          __dirty__: '+'\n        }\n\n        wantToAppend = true\n      } else {\n        let beforeDirty = beforeRecord['__dirty__']\n        if (beforeDirty == '+') {\n          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */\n          afterRecord = {\n            ...beforeRecord,\n            ...recordData,\n            __dirty__: '+'\n          }\n        } else {\n          /* 기존에 레코드가 있었으며 계속 수정중이다. */\n          afterRecord = {\n            ...beforeRecord,\n            ...recordData,\n            __dirty__: 'M'\n          }\n        }\n      }\n    }\n\n    if (wantToAppend) {\n      records.push(afterRecord!)\n    } else if (wantToDelete) {\n      records.splice(row, 1)\n    } else {\n      records.splice(row, 1, afterRecord!)\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('record-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          before: beforeRecord,\n          after: afterRecord!,\n          column,\n          row\n        }\n      })\n    )\n\n    this.requestUpdate()\n  }\n}\n"]}
+{"version":3,"file":"data-manipulator.js","sourceRoot":"","sources":["../../src/data-manipulator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAWhE,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAO7C;QACE,KAAK,EAAE,CAAA;QAPmB,WAAM,GAAgB,WAAW,CAAA;QACjC,SAAI,GAAc,SAAS,CAAA;QAC3B,YAAO,GAAkB,EAAE,CAAA;QAC3B,YAAO,GAAkB,EAAE,CAAA;QAC3B,eAAU,GAAqB,EAAE,CAAA;QAK3D,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,EAAE,CAAC,CAAC,EAAE;YAChD,IAAI,EACF,OAAO,EAAE,eAAe,EACxB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,EAAE,EACb,GAAI,CAAiB,CAAC,MAItB,CAAA;YAED,IAAI,CAAC,qBAAqB,CAAC;gBACzB,eAAe;gBACf,KAAK;gBACL,OAAO;aACR,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,6BAA6B;QAC7B,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE;YACxC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,CAAiB,CAAC,MAM/D,CAAA;YAED,IAAI,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAA;QAC5D,CAAC,CAAC,CAAA;QAEF,6BAA6B;QAC7B,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE;YACxC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,CAAiB,CAAC,MAGxC,CAAA;YAED,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,CAAA;QACvD,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,aAAa,CAAC,EACZ,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,GAAG,EAOJ;QACC,qBAAqB;QACrB,IAAI,KAAK,KAAK,MAAM,EAAE;YACpB,OAAM;SACP;QAED,IAAI,UAAU,GAAG,MAAM,CAAC,UAAU,CAAA;QAClC,IAAI,UAAU,IAAI,OAAO,UAAU,IAAI,UAAU,EAAE;YACjD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;gBACzD,OAAM;aACP;SACF;QAED,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,CAAC,CAAA;IAC7D,CAAC;IAED,qBAAqB,CAAC,EACpB,eAAe,EACf,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,EAAE,EAKb;QACC,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QACjC,IAAI,EAAE,UAAU,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE,CAAA;QAEnD,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE;YAC3B,OAAM;SACP;QAED,IAAI,UAAU,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE;YACtC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,CAAC,CAAA;SAC5D;QAED,IAAI,eAAe,EAAE;YACnB,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,CAAC,CAAA;YAC3D,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;SACnE;aAAM;YACL,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,CAAC,CAAA;YAC3D,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;SACzD;QAED,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,eAAe,CACb,UAAuB,EACvB,GAAW,EACX,MAA2B,CAAC,mCAAmC;QAE/D,sDAAsD;QAEtD,2CAA2C;QAC3C,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;QAE/B,IAAI,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA;QAC/B,IAAI,WAAwB,CAAA;QAC5B,IAAI,YAAY,GAAG,KAAK,CAAA;QACxB,IAAI,YAAY,GAAG,KAAK,CAAA;QAExB,IAAI,CAAC,UAAU,EAAE;YACf,IAAI,CAAC,YAAY,EAAE;gBACjB,yEAAyE;gBACzE,IAAI,CAAC,aAAa,EAAE,CAAA;gBACpB,OAAM;aACP;iBAAM;gBACL;;;mBAGG;gBACH,IAAI,YAAY,CAAC,WAAW,CAAC,IAAI,GAAG,EAAE;oBACpC,YAAY,GAAG,IAAI,CAAA;iBACpB;qBAAM;oBACL,WAAW,GAAG;wBACZ,GAAG,YAAY;wBACf,SAAS,EAAE,GAAG;qBACf,CAAA;iBACF;aACF;SACF;aAAM;YACL,IAAI,CAAC,YAAY,EAAE;gBACjB,mCAAmC;gBACnC,WAAW,GAAG;oBACZ,GAAG,UAAU;oBACb,SAAS,EAAE,GAAG;iBACf,CAAA;gBAED,YAAY,GAAG,IAAI,CAAA;aACpB;iBAAM;gBACL,IAAI,WAAW,GAAG,YAAY,CAAC,WAAW,CAAC,CAAA;gBAC3C,IAAI,WAAW,IAAI,GAAG,EAAE;oBACtB,oCAAoC;oBACpC,WAAW,GAAG;wBACZ,GAAG,YAAY;wBACf,GAAG,UAAU;wBACb,SAAS,EAAE,GAAG;qBACf,CAAA;iBACF;qBAAM;oBACL,6BAA6B;oBAC7B,WAAW,GAAG;wBACZ,GAAG,YAAY;wBACf,GAAG,UAAU;wBACb,SAAS,EAAE,GAAG;qBACf,CAAA;iBACF;aACF;SACF;QAED,IAAI,YAAY,EAAE;YAChB,OAAO,CAAC,IAAI,CAAC,WAAY,CAAC,CAAA;SAC3B;aAAM,IAAI,YAAY,EAAE;YACvB,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;SACvB;aAAM;YACL,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,EAAE,WAAY,CAAC,CAAA;SACrC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,MAAM,EAAE,YAAY;gBACpB,KAAK,EAAE,WAAY;gBACnB,MAAM;gBACN,GAAG;aACJ;SACF,CAAC,CACH,CAAA;QAED,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;CACF;AApM6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAkC","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA } from './configure/zero-config'\nimport {\n  ColumnConfig,\n  FilterValue,\n  GristConfig,\n  GristData,\n  GristRecord,\n  PaginationConfig,\n  SortersConfig\n} from './types'\n\nexport class DataManipulator extends LitElement {\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) sorters: SortersConfig = []\n  @property({ type: Object }) filters: FilterValue[] = []\n  @property({ type: Object }) pagination: PaginationConfig = {}\n\n  constructor() {\n    super()\n\n    this.addEventListener('select-record-change', e => {\n      var {\n        records: selectedRecords,\n        added = [],\n        removed = []\n      } = (e as CustomEvent).detail as {\n        records: GristRecord[]\n        added: GristRecord[]\n        removed: GristRecord[]\n      }\n\n      this.onSelectRecordChanged({\n        selectedRecords,\n        added,\n        removed\n      })\n    })\n\n    /* field change processing */\n    this.addEventListener('field-change', e => {\n      var { after, before, column, record, row } = (e as CustomEvent).detail as {\n        after: any\n        before: any\n        column: ColumnConfig\n        record: GristRecord\n        row: number\n      }\n\n      this.onFieldChange({ after, before, column, record, row })\n    })\n\n    /* record reset processing */\n    this.addEventListener('record-reset', e => {\n      var { record, row } = (e as CustomEvent).detail as {\n        record: GristRecord\n        row: number\n      }\n\n      this.onRecordChanged(record['__origin__'], row, null)\n    })\n  }\n\n  onFieldChange({\n    after,\n    before,\n    column,\n    record,\n    row\n  }: {\n    after: any\n    before: any\n    column: ColumnConfig\n    record: GristRecord\n    row: number\n  }) {\n    /* compare changes */\n    if (after === before) {\n      return\n    }\n\n    var validation = column.validation\n    if (validation && typeof validation == 'function') {\n      if (!validation.call(this, after, before, record, column)) {\n        return\n      }\n    }\n\n    this.onRecordChanged({ [column.name]: after }, row, column)\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added = [],\n    removed = []\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }) {\n    var { records } = this.data || {}\n    var { selectable = false } = this.config.rows || {}\n\n    if (!records || !selectable) {\n      return\n    }\n\n    if (selectable && !selectable.multiple) {\n      records.forEach(record => (record['__selected__'] = false))\n    }\n\n    if (selectedRecords) {\n      records.forEach(record => (record['__selected__'] = false))\n      selectedRecords.forEach(record => (record['__selected__'] = true))\n    } else {\n      removed.forEach(record => (record['__selected__'] = false))\n      added.forEach(record => (record['__selected__'] = true))\n    }\n\n    this.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.\n\n    /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */\n    var records = this.data.records\n\n    var beforeRecord = records[row]\n    var afterRecord: GristRecord\n    var wantToDelete = false\n    var wantToAppend = false\n\n    if (!recordData) {\n      if (!beforeRecord) {\n        /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */\n        this.requestUpdate()\n        return\n      } else {\n        /*\n         * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,\n         * 삭제하고자 하는 의도로 이해된다. (주의 필요)\n         */\n        if (beforeRecord['__dirty__'] == '+') {\n          wantToDelete = true\n        } else {\n          afterRecord = {\n            ...beforeRecord,\n            __dirty__: '-'\n          }\n        }\n      }\n    } else {\n      if (!beforeRecord) {\n        /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */\n        afterRecord = {\n          ...recordData,\n          __dirty__: '+'\n        }\n\n        wantToAppend = true\n      } else {\n        let beforeDirty = beforeRecord['__dirty__']\n        if (beforeDirty == '+') {\n          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */\n          afterRecord = {\n            ...beforeRecord,\n            ...recordData,\n            __dirty__: '+'\n          }\n        } else {\n          /* 기존에 레코드가 있었으며 계속 수정중이다. */\n          afterRecord = {\n            ...beforeRecord,\n            ...recordData,\n            __dirty__: 'M'\n          }\n        }\n      }\n    }\n\n    if (wantToAppend) {\n      records.push(afterRecord!)\n    } else if (wantToDelete) {\n      records.splice(row, 1)\n    } else {\n      records.splice(row, 1, afterRecord!)\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('record-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          before: beforeRecord,\n          after: afterRecord!,\n          column,\n          row\n        }\n      })\n    )\n\n    this.requestUpdate()\n  }\n}\n"]}

package/dist/src/data-provider.d.ts

@@ -1,5 +1,5 @@
-import { FilterValue, GristRecord, SorterConfig, SortersConfig } from './types';
-import { DataConsumer } from './data-consumer';
+import { DataConsumer } from './data-consumer.js';
+import { FilterValue, GristRecord, SorterConfig, SortersConfig } from './types.js';
 export declare class DataProvider {
     page: number;
     limit: number;
@@ -11,8 +11,7 @@ export declare class DataProvider {
     private _filters?;
     private _pageChangeHandler;
     private _limitChangeHandler;
-    private _sortersChangeHandler;
-    private _filtersChangeHandler;
+    private _fetchParamsChangeHandler;
     private _recordChangeHandler;
     private _attachPageHandler;
     private _fetchHandlerWrap;
@@ -22,8 +21,7 @@ export declare class DataProvider {
     onAttachPage(): void;
     onPageChange(e: Event): void;
     onLimitChange(e: Event): void;
-    onSortersChange(e: Event): void;
-    onFiltersChange(e: Event): void;
+    onFetchParamsChange(e: Event): void;
     onRecordChange(e: Event): void;
     get fetchOptions(): any;
     set fetchOptions(fetchOptions: any);

package/dist/src/data-provider.js

@@ -1,5 +1,4 @@
-import { ZERO_RECORDS } from './configure/zero-config';
-import deepEquals from 'lodash-es/isEqual';
+import { ZERO_RECORDS } from './configure/zero-config.js';
 function EMPTY_FETCHHANDLER() {
     return {
         total: 0,
@@ -21,8 +20,7 @@ export class DataProvider {
         this.records = [];
         this._pageChangeHandler = this.onPageChange.bind(this);
         this._limitChangeHandler = this.onLimitChange.bind(this);
-        this._sortersChangeHandler = this.onSortersChange.bind(this);
-        this._filtersChangeHandler = this.onFiltersChange.bind(this);
+        this._fetchParamsChangeHandler = this.onFetchParamsChange.bind(this);
         this._recordChangeHandler = this.onRecordChange.bind(this);
         this._attachPageHandler = this.onAttachPage.bind(this);
         this.consumer = consumer;
@@ -30,18 +28,16 @@ export class DataProvider {
         this.consumer.addEventListener('attach-page', this._attachPageHandler);
         this.consumer.addEventListener('page-change', this._pageChangeHandler);
         this.consumer.addEventListener('limit-change', this._limitChangeHandler);
-        this.consumer.addEventListener('sorters-change', this._sortersChangeHandler);
-        this.consumer.addEventListener('filters-change', this._filtersChangeHandler);
+        this.consumer.addEventListener('fetch-params-change', this._fetchParamsChangeHandler);
         this.consumer.addEventListener('record-change', this._recordChangeHandler);
     }
     dispose() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         (_a = this.consumer) === null || _a === void 0 ? void 0 : _a.removeEventListener('attach-page', this._attachPageHandler);
         (_b = this.consumer) === null || _b === void 0 ? void 0 : _b.removeEventListener('page-change', this._pageChangeHandler);
         (_c = this.consumer) === null || _c === void 0 ? void 0 : _c.removeEventListener('limit-change', this._limitChangeHandler);
-        (_d = this.consumer) === null || _d === void 0 ? void 0 : _d.removeEventListener('sorters-change', this._sortersChangeHandler);
-        (_e = this.consumer) === null || _e === void 0 ? void 0 : _e.removeEventListener('filters-change', this._filtersChangeHandler);
-        (_f = this.consumer) === null || _f === void 0 ? void 0 : _f.removeEventListener('record-change', this._recordChangeHandler);
+        (_d = this.consumer) === null || _d === void 0 ? void 0 : _d.removeEventListener('fetch-params-change', this._fetchParamsChangeHandler);
+        (_e = this.consumer) === null || _e === void 0 ? void 0 : _e.removeEventListener('record-change', this._recordChangeHandler);
     }
     onAttachPage() {
         this.attach();
@@ -54,18 +50,15 @@ export class DataProvider {
         var limit = e.detail;
         this.fetch({ limit });
     }
-    onSortersChange(e) {
+    onFetchParamsChange(e) {
         var _a;
-        const { sorters } = e.detail || {};
-        this.sorters = sorters;
+        const { sorters, filters, from } = e.detail || {};
+        sorters && (this.sorters = sorters);
+        filters && (this.filters = filters);
         if (((_a = this.consumer) === null || _a === void 0 ? void 0 : _a.mode) !== 'GRID') {
             this.page = 0;
         }
-        this.fetch();
-    }
-    onFiltersChange(e) {
-        const { filters } = e.detail || {};
-        this.filters = filters;
+        from !== 'config' && this.fetch();
     }
     onRecordChange(e) {
         var _a;
@@ -117,11 +110,7 @@ export class DataProvider {
         return this._filters;
     }
     set filters(filters) {
-        if (this._filters === filters || deepEquals(this._filters, filters)) {
-            return;
-        }
         this._filters = filters;
-        this.fetch();
     }
     async attach(reset = false) {
         var _a;
@@ -147,6 +136,7 @@ export class DataProvider {
                 page,
                 limit,
                 sorters: this.sorters,
+                filters: this.filters,
                 options: this.fetchOptions
             }))
         }, reset);
@@ -178,7 +168,6 @@ export class DataProvider {
         if (maxpage < page) {
             return await this.fetch({ page: maxpage, limit });
         }
-        // CONFIRM-ME 위 코드에 대한 설명이 필요함!!!.
         // page와 limit이 없는 경우 records 검사 전에 초기화
         this.page = this.page || page;
         this.limit = this.limit || limit;

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

@@ -1 +1 @@
-{"version":3,"file":"data-provider.js","sourceRoot":"","sources":["../../src/data-provider.ts"],"names":[],"mappings":"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","sourcesContent":["import { FetchHandler, FetchOption, FilterValue, GristRecord, SorterConfig, SortersConfig } from './types'\nimport { SnapshotTaker, TimeCapsule } from '@operato/utils'\n\nimport { DataConsumer } from './data-consumer'\nimport { ZERO_RECORDS } from './configure/zero-config'\nimport deepEquals from 'lodash-es/isEqual'\n\nfunction EMPTY_FETCHHANDLER() {\n  return {\n    total: 0,\n    records: []\n  }\n}\n\nfunction _calculateTotalPage(limit: number, total: number) {\n  /*\n   * total page는 1이상이어야 한다.\n   * 즉, 레코드가 하나도 없어도, 페이지 갯수는 1이 되어야 한다.\n   */\n  return Math.max(1, Math.ceil(total / limit))\n}\n\nexport class DataProvider {\n  page: number = 1\n  limit: number = 20\n  total: number = 0\n  records: GristRecord[] = []\n\n  private consumer?: DataConsumer\n  private _fetchHandler?: FetchHandler\n  private _sorters?: SorterConfig[]\n  private _filters?: FilterValue[]\n\n  private _pageChangeHandler: EventListener = this.onPageChange.bind(this)\n  private _limitChangeHandler = this.onLimitChange.bind(this)\n  private _sortersChangeHandler = this.onSortersChange.bind(this)\n  private _filtersChangeHandler = this.onFiltersChange.bind(this)\n  private _recordChangeHandler = this.onRecordChange.bind(this)\n  private _attachPageHandler: EventListener = this.onAttachPage.bind(this)\n\n  private _fetchHandlerWrap: any\n  private _fetchOptions: any\n\n  constructor(consumer: DataConsumer) {\n    this.consumer = consumer\n\n    this.fetchHandler = consumer.fetchHandler\n\n    this.consumer.addEventListener('attach-page', this._attachPageHandler)\n    this.consumer.addEventListener('page-change', this._pageChangeHandler)\n    this.consumer.addEventListener('limit-change', this._limitChangeHandler)\n    this.consumer.addEventListener('sorters-change', this._sortersChangeHandler)\n    this.consumer.addEventListener('filters-change', this._filtersChangeHandler)\n    this.consumer.addEventListener('record-change', this._recordChangeHandler)\n  }\n\n  dispose() {\n    this.consumer?.removeEventListener('attach-page', this._attachPageHandler)\n    this.consumer?.removeEventListener('page-change', this._pageChangeHandler)\n    this.consumer?.removeEventListener('limit-change', this._limitChangeHandler)\n    this.consumer?.removeEventListener('sorters-change', this._sortersChangeHandler)\n    this.consumer?.removeEventListener('filters-change', this._filtersChangeHandler)\n    this.consumer?.removeEventListener('record-change', this._recordChangeHandler)\n  }\n\n  onAttachPage() {\n    this.attach()\n  }\n\n  onPageChange(e: Event) {\n    var page = (e as CustomEvent).detail\n    this.fetch({ page })\n  }\n\n  onLimitChange(e: Event) {\n    var limit = (e as CustomEvent).detail\n    this.fetch({ limit })\n  }\n\n  onSortersChange(e: Event) {\n    const { sorters } = (e as CustomEvent).detail || {}\n    this.sorters = sorters\n\n    if (this.consumer?.mode !== 'GRID') {\n      this.page = 0\n    }\n\n    this.fetch()\n  }\n\n  onFiltersChange(e: Event) {\n    const { filters } = (e as CustomEvent).detail || {}\n\n    this.filters = filters\n  }\n\n  onRecordChange(e: Event) {\n    this.consumer?.checkDirties()\n  }\n\n  get fetchOptions() {\n    return this._fetchOptions\n  }\n\n  set fetchOptions(fetchOptions) {\n    this._fetchOptions = fetchOptions\n\n    this.fetch()\n  }\n\n  get fetchHandler() {\n    if (!this._fetchHandlerWrap) {\n      this._fetchHandlerWrap = async (options: FetchOption) => {\n        if (!this._fetchHandler) {\n          return\n        }\n\n        try {\n          this.consumer?.showSpinner()\n          return await (this._fetchHandler || EMPTY_FETCHHANDLER)(options)\n        } finally {\n          this.consumer?.hideSpinner()\n        }\n      }\n    }\n\n    return this._fetchHandlerWrap\n  }\n\n  set fetchHandler(fetchHandler) {\n    this._fetchHandler = fetchHandler\n    delete this._fetchHandlerWrap\n  }\n\n  get sorters() {\n    return this._sorters\n  }\n\n  set sorters(sorters) {\n    this._sorters = sorters\n  }\n\n  /* alias for sorters */\n  get sortings() {\n    return this._sorters\n  }\n\n  set sortings(sorters) {\n    this._sorters = sorters\n  }\n\n  get filters() {\n    return this._filters\n  }\n\n  set filters(filters) {\n    if (this._filters === filters || deepEquals(this._filters, filters)) {\n      return\n    }\n\n    this._filters = filters\n\n    this.fetch()\n  }\n\n  async attach(reset = false) {\n    var { page = 0, limit = 20 } = this\n\n    /*\n     * page는 0 based index가 아님에 주의한다.\n     * 즉, page 값이 1 은 첫페이지를 의미한다.\n     */\n    if (reset) {\n      this.records = ZERO_RECORDS\n      page = 1\n    } else {\n      /* attach의 경우는 grist data의 변경상태를 유지하기 위해서, grist._data 를 기반으로 한다. */\n      this.records = this.consumer?._data ? this.consumer._data.records : ZERO_RECORDS\n      page = page + 1\n    }\n\n    return this._update(\n      {\n        /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n        limit,\n        page,\n        ...(await this.fetchHandler.call(null, {\n          page,\n          limit,\n          sorters: this.sorters,\n          options: this.fetchOptions\n        }))\n      },\n      reset\n    )\n  }\n\n  async fetch({\n    page = this.page,\n    limit = this.limit,\n    sorters,\n    sortings,\n    filters\n  }: {\n    page?: number\n    limit?: number\n    sorters?: SortersConfig\n    sortings?: SortersConfig\n    filters?: FilterValue[]\n  } = {}) {\n    /* sortings property is only for things-factory server-side list parameter convention */\n    /* fetchHandler should reture { page, limit, total, records } */\n    this.records = ZERO_RECORDS\n\n    sorters = sorters || sortings || this.sorters\n    filters = filters || this.filters\n\n    this.sorters = sorters\n\n    return this._update({\n      /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n      limit,\n      page,\n      ...(await this.fetchHandler.call(null, {\n        page,\n        limit,\n        sorters,\n        sortings: sorters,\n        filters,\n        options: this.fetchOptions\n      }))\n    })\n  }\n\n  async _update(\n    {\n      page,\n      limit,\n      total,\n      records\n    }: {\n      page: number\n      limit: number\n      total: number\n      records: GristRecord[]\n    },\n    reset?: boolean\n  ): Promise<void> {\n    // total을 감안해서 page가 최대값을 넘지 않도록 한다.\n    var maxpage = _calculateTotalPage(limit, total)\n    if (maxpage < page) {\n      return await this.fetch({ page: maxpage, limit })\n    }\n    // CONFIRM-ME 위 코드에 대한 설명이 필요함!!!.\n\n    // page와 limit이 없는 경우 records 검사 전에 초기화\n    this.page = this.page || page\n    this.limit = this.limit || limit\n\n    if (!records) {\n      return\n    }\n\n    if (this.records === ZERO_RECORDS) {\n      this.records = records\n    } else if (this.page < page) {\n      // attach인 경우에는 records를 append한다.\n      this.records = [...this.records, ...records]\n    } else {\n      return\n    }\n\n    this.limit = limit\n    this.total = total\n    this.page = page\n\n    this.consumer &&\n      (this.consumer.data = {\n        page: this.page,\n        limit: this.limit,\n        total: this.total,\n\n        records: this.records\n      })\n  }\n}\n"]}
+{"version":3,"file":"data-provider.js","sourceRoot":"","sources":["../../src/data-provider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZERO_RECORDS } from './configure/zero-config.js'\nimport { DataConsumer } from './data-consumer.js'\nimport { FetchHandler, FetchOption, FilterValue, GristRecord, SorterConfig, SortersConfig } from './types.js'\n\nfunction EMPTY_FETCHHANDLER() {\n  return {\n    total: 0,\n    records: []\n  }\n}\n\nfunction _calculateTotalPage(limit: number, total: number) {\n  /*\n   * total page는 1이상이어야 한다.\n   * 즉, 레코드가 하나도 없어도, 페이지 갯수는 1이 되어야 한다.\n   */\n  return Math.max(1, Math.ceil(total / limit))\n}\n\nexport class DataProvider {\n  page: number = 1\n  limit: number = 20\n  total: number = 0\n  records: GristRecord[] = []\n\n  private consumer?: DataConsumer\n  private _fetchHandler?: FetchHandler\n  private _sorters?: SorterConfig[]\n  private _filters?: FilterValue[]\n\n  private _pageChangeHandler: EventListener = this.onPageChange.bind(this)\n  private _limitChangeHandler = this.onLimitChange.bind(this)\n  private _fetchParamsChangeHandler = this.onFetchParamsChange.bind(this)\n  private _recordChangeHandler = this.onRecordChange.bind(this)\n  private _attachPageHandler: EventListener = this.onAttachPage.bind(this)\n\n  private _fetchHandlerWrap: any\n  private _fetchOptions: any\n\n  constructor(consumer: DataConsumer) {\n    this.consumer = consumer\n\n    this.fetchHandler = consumer.fetchHandler\n\n    this.consumer.addEventListener('attach-page', this._attachPageHandler)\n    this.consumer.addEventListener('page-change', this._pageChangeHandler)\n    this.consumer.addEventListener('limit-change', this._limitChangeHandler)\n    this.consumer.addEventListener('fetch-params-change', this._fetchParamsChangeHandler)\n    this.consumer.addEventListener('record-change', this._recordChangeHandler)\n  }\n\n  dispose() {\n    this.consumer?.removeEventListener('attach-page', this._attachPageHandler)\n    this.consumer?.removeEventListener('page-change', this._pageChangeHandler)\n    this.consumer?.removeEventListener('limit-change', this._limitChangeHandler)\n    this.consumer?.removeEventListener('fetch-params-change', this._fetchParamsChangeHandler)\n    this.consumer?.removeEventListener('record-change', this._recordChangeHandler)\n  }\n\n  onAttachPage() {\n    this.attach()\n  }\n\n  onPageChange(e: Event) {\n    var page = (e as CustomEvent).detail\n    this.fetch({ page })\n  }\n\n  onLimitChange(e: Event) {\n    var limit = (e as CustomEvent).detail\n    this.fetch({ limit })\n  }\n\n  onFetchParamsChange(e: Event) {\n    const { sorters, filters, from } = (e as CustomEvent).detail || {}\n\n    sorters && (this.sorters = sorters)\n    filters && (this.filters = filters)\n\n    if (this.consumer?.mode !== 'GRID') {\n      this.page = 0\n    }\n\n    from !== 'config' && this.fetch()\n  }\n\n  onRecordChange(e: Event) {\n    this.consumer?.checkDirties()\n  }\n\n  get fetchOptions() {\n    return this._fetchOptions\n  }\n\n  set fetchOptions(fetchOptions) {\n    this._fetchOptions = fetchOptions\n\n    this.fetch()\n  }\n\n  get fetchHandler() {\n    if (!this._fetchHandlerWrap) {\n      this._fetchHandlerWrap = async (options: FetchOption) => {\n        if (!this._fetchHandler) {\n          return\n        }\n\n        try {\n          this.consumer?.showSpinner()\n          return await (this._fetchHandler || EMPTY_FETCHHANDLER)(options)\n        } finally {\n          this.consumer?.hideSpinner()\n        }\n      }\n    }\n\n    return this._fetchHandlerWrap\n  }\n\n  set fetchHandler(fetchHandler) {\n    this._fetchHandler = fetchHandler\n    delete this._fetchHandlerWrap\n  }\n\n  get sorters() {\n    return this._sorters\n  }\n\n  set sorters(sorters) {\n    this._sorters = sorters\n  }\n\n  /* alias for sorters */\n  get sortings() {\n    return this._sorters\n  }\n\n  set sortings(sorters) {\n    this._sorters = sorters\n  }\n\n  get filters() {\n    return this._filters\n  }\n\n  set filters(filters) {\n    this._filters = filters\n  }\n\n  async attach(reset = false) {\n    var { page = 0, limit = 20 } = this\n\n    /*\n     * page는 0 based index가 아님에 주의한다.\n     * 즉, page 값이 1 은 첫페이지를 의미한다.\n     */\n    if (reset) {\n      this.records = ZERO_RECORDS\n      page = 1\n    } else {\n      /* attach의 경우는 grist data의 변경상태를 유지하기 위해서, grist._data 를 기반으로 한다. */\n      this.records = this.consumer?._data ? this.consumer._data.records : ZERO_RECORDS\n      page = page + 1\n    }\n\n    return this._update(\n      {\n        /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n        limit,\n        page,\n        ...(await this.fetchHandler.call(null, {\n          page,\n          limit,\n          sorters: this.sorters,\n          filters: this.filters,\n          options: this.fetchOptions\n        }))\n      },\n      reset\n    )\n  }\n\n  async fetch({\n    page = this.page,\n    limit = this.limit,\n    sorters,\n    sortings,\n    filters\n  }: {\n    page?: number\n    limit?: number\n    sorters?: SortersConfig\n    sortings?: SortersConfig\n    filters?: FilterValue[]\n  } = {}) {\n    /* sortings property is only for things-factory server-side list parameter convention */\n    /* fetchHandler should reture { page, limit, total, records } */\n    this.records = ZERO_RECORDS\n\n    sorters = sorters || sortings || this.sorters\n    filters = filters || this.filters\n\n    this.sorters = sorters\n\n    return this._update({\n      /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n      limit,\n      page,\n      ...(await this.fetchHandler.call(null, {\n        page,\n        limit,\n        sorters,\n        sortings: sorters,\n        filters,\n        options: this.fetchOptions\n      }))\n    })\n  }\n\n  async _update(\n    {\n      page,\n      limit,\n      total,\n      records\n    }: {\n      page: number\n      limit: number\n      total: number\n      records: GristRecord[]\n    },\n    reset?: boolean\n  ): Promise<void> {\n    // total을 감안해서 page가 최대값을 넘지 않도록 한다.\n    var maxpage = _calculateTotalPage(limit, total)\n    if (maxpage < page) {\n      return await this.fetch({ page: maxpage, limit })\n    }\n\n    // page와 limit이 없는 경우 records 검사 전에 초기화\n    this.page = this.page || page\n    this.limit = this.limit || limit\n\n    if (!records) {\n      return\n    }\n\n    if (this.records === ZERO_RECORDS) {\n      this.records = records\n    } else if (this.page < page) {\n      // attach인 경우에는 records를 append한다.\n      this.records = [...this.records, ...records]\n    } else {\n      return\n    }\n\n    this.limit = limit\n    this.total = total\n    this.page = page\n\n    this.consumer &&\n      (this.consumer.data = {\n        page: this.page,\n        limit: this.limit,\n        total: this.total,\n\n        records: this.records\n      })\n  }\n}\n"]}

package/dist/src/data-report/data-report-body.d.ts

@@ -1,6 +1,6 @@
 import './data-report-field';
-import { ColumnConfig, GristConfig, GristData } from '../types';
 import { LitElement, PropertyValues } from 'lit';
+import { ColumnConfig, GristConfig, GristData } from '../types';
 export declare class DataReportBody extends LitElement {
     static styles: import("lit").CSSResult[];
     config: GristConfig;

package/dist/src/data-report/data-report-body.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
 import './data-report-field';
-import { LitElement, html } from 'lit';
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
+import { dataReportBodyStyle } from './data-report-body-style';
 import { dataReportBodyClickHandler } from './event-handlers/data-report-body-click-handler';
 import { dataReportBodyDblclickHandler } from './event-handlers/data-report-body-dblclick-handler';
 import { dataReportBodyKeydownHandler } from './event-handlers/data-report-body-keydown-handler';
-import { dataReportBodyStyle } from './data-report-body-style';
 function calcScrollPos(parent, child) {
     /* getBoundingClientRect는 safari에서 스크롤 상태에서 다른 브라우저와는 다른 값을 리턴함 - 사파리는 약간 이상 작동함. */
     var { top: ct, left: cl, right: cr, bottom: cb } = child.getBoundingClientRect();
@@ -156,7 +156,7 @@ let DataReportBody = class DataReportBody extends LitElement {
     }
     focus() {
         super.focus();
-        if (!this.focused || this.focused.row === undefined) {
+        if (!this.focused || this.focused.row == null) {
             this.focused = { row: 0, column: 0 };
         }
     }

package/dist/src/data-report/data-report-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-report-body.js","sourceRoot":"","sources":["../../../src/data-report/data-report-body.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-report-field'\n\nimport { ColumnConfig, GristConfig, GristData } from '../types'\nimport { LitElement, PropertyValues, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { dataReportBodyClickHandler } from './event-handlers/data-report-body-click-handler'\nimport { dataReportBodyDblclickHandler } from './event-handlers/data-report-body-dblclick-handler'\nimport { dataReportBodyKeydownHandler } from './event-handlers/data-report-body-keydown-handler'\nimport { dataReportBodyStyle } from './data-report-body-style'\n\nfunction calcScrollPos(parent: DataReportBody, child: Element) {\n  /* getBoundingClientRect는 safari에서 스크롤 상태에서 다른 브라우저와는 다른 값을 리턴함 - 사파리는 약간 이상 작동함. */\n  var { top: ct, left: cl, right: cr, bottom: cb } = child.getBoundingClientRect()\n  var { top: pt, left: pl, right: pr, bottom: pb } = parent.getBoundingClientRect()\n  var { scrollLeft, scrollTop } = parent\n  var scrollbarWidth = parent.clientWidth - parent.offsetWidth\n  var scrollbarHeight = parent.clientHeight - parent.offsetHeight\n\n  return {\n    left: cl < pl ? scrollLeft - (pl - cl) : cr > pr ? scrollLeft - (pr - cr) - scrollbarWidth : undefined,\n    top: ct < pt ? scrollTop - (pt - ct) : cb > pb ? scrollTop - (pb - cb) - scrollbarHeight : undefined\n  }\n}\n\n@customElement('ox-report-body')\nexport class DataReportBody extends LitElement {\n  static styles = [dataReportBodyStyle]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) focused?: { row: number; column: number }\n\n  private _focusedListener?: EventListener\n\n  render() {\n    var { rows } = this.config\n    var { groups } = rows || {}\n\n    var getColumnIndex = (name: string) =>\n      this.columns.filter(column => !column.hidden).findIndex(column => column.name == name)\n    var getColumn = (name: string | number) => this.columns.find(column => column.name == name)\n\n    var { row: focusedRow = 0, column: focusedColumn = 0 } = this.focused || {}\n\n    var columns = (this.columns || []).filter(\n      column => !column.hidden && groups.map(group => group.column).indexOf(column.name) == -1\n    )\n    var data = this.data\n    var { records = [] } = data\n\n    return html`\n      ${records.map((record, idxRow) => {\n        var attrFocusedRow = idxRow === focusedRow\n        var totalic = record['*']\n        var totalicColumn =\n          totalic && (totalic.groupName == '*' ? getColumn(groups[0].column) : getColumn(totalic.groupName))\n\n        return html`\n          ${!totalic || (totalic && totalic.value)\n            ? html`\n                ${columns.map(column => {\n                  let columnIndex = getColumnIndex(column.name)\n                  return html`\n                    <ox-report-field\n                      .data=${data}\n                      .rowIndex=${idxRow}\n                      .columnIndex=${columnIndex}\n                      .column=${column}\n                      .record=${record}\n                      ?gutter=${column.type == 'gutter'}\n                      ?focused-row=${attrFocusedRow}\n                      ?focused=${attrFocusedRow && columnIndex === focusedColumn}\n                      ?totalized=${totalic}\n                      .value=${record[column.name]}\n                    ></ox-report-field>\n                  `\n                })}\n                <ox-report-field\n                  .data=${data}\n                  .rowIndex=${idxRow}\n                  .record=${record}\n                  ?focused-row=${attrFocusedRow}\n                  ?totalized=${totalic}\n                ></ox-report-field>\n              `\n            : html``}\n          ${!totalic\n            ? html``\n            : html`\n                ${totalic.groupName == '*'\n                  ? html``\n                  : html`\n                      <ox-report-field\n                        .data=${data}\n                        .rowIndex=${totalic.row - 1}\n                        .columnIndex=${totalic.column - 1}\n                        .column=${totalicColumn}\n                        .record=${record}\n                        ?focused-row=${totalic.row - 1 <= focusedRow && totalic.row - 1 + totalic.rowspan > focusedRow}\n                        ?focused=${totalic.row - 1 === focusedRow && totalic.column - 1 === focusedColumn}\n                        ?grouped=${true}\n                        .value=${record[totalic.groupName]}\n                        .style=\"grid-area: ${totalic.row} / ${totalic.column} / span ${totalic.rowspan} / span 1;\"\n                      ></ox-report-field>\n                    `}\n                ${!totalic.value\n                  ? html``\n                  : html`\n                      <ox-report-field\n                        .data=${data}\n                        .rowIndex=${idxRow}\n                        .columnIndex=${totalic.column - 1}\n                        .column=${totalic.titleColumn}\n                        .record=${record}\n                        ?focused-row=${attrFocusedRow}\n                        ?focused=${idxRow === focusedRow && totalic.column - 1 === focusedColumn}\n                        ?grouped=${true}\n                        .value=${totalic.value}\n                        .style=\"grid-area: ${totalic.row +\n                        totalic.rowspan} / ${totalic.column} / span 1 / span ${totalic.colspan};\"\n                      ></ox-report-field>\n                    `}\n              `}\n        `\n      })}\n    `\n  }\n\n  firstUpdated() {\n    /* focus() 를 받을 수 있도록 함. */\n    this.setAttribute('tabindex', '-1')\n\n    /*\n     * focusout 으로 property를 변경시키는 경우, focusout에 의해 update가 발생하는 경우에는,\n     * 그리드 내부의 컴포넌트가 갱신되는 현상을 초래하게 된다.\n     * 따라서, focusout 핸들러에서 update를 유발하는 코드는 강력하게 금지시킨다.\n     */\n    this.addEventListener('focusout', e => {\n      if (this._focusedListener) {\n        window.removeEventListener('keydown', this._focusedListener)\n        delete this._focusedListener\n      }\n    })\n\n    this.addEventListener('focusin', e => {\n      if (!this._focusedListener) {\n        this._focusedListener = dataReportBodyKeydownHandler.bind(this) as EventListener\n        window.addEventListener('keydown', this._focusedListener)\n      }\n    })\n\n    this.renderRoot.addEventListener('click', dataReportBodyClickHandler.bind(this))\n    this.renderRoot.addEventListener('dblclick', dataReportBodyDblclickHandler.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('focused')) {\n      let element = this.renderRoot.querySelector('[focused]')\n      if (!element) {\n        return\n      }\n\n      let { top, left } = calcScrollPos(this, element)\n      // TODO this.scroll()을 사용하면, 효과가 좋으나 left 계산에 문제가 있는 것 같음.\n      // this.scroll({\n      //   top,\n      //   left,\n      //   behavior: 'smooth'\n      // })\n      if (top !== undefined) {\n        this.scrollTop = top\n      }\n      if (left !== undefined) {\n        this.scrollLeft = left\n      }\n    }\n  }\n\n  focus() {\n    super.focus()\n\n    if (!this.focused || this.focused.row === undefined) {\n      this.focused = { row: 0, column: 0 }\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-report-body.js","sourceRoot":"","sources":["../../../src/data-report/data-report-body.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-report-field'\n\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { ColumnConfig, GristConfig, GristData } from '../types'\nimport { dataReportBodyStyle } from './data-report-body-style'\nimport { dataReportBodyClickHandler } from './event-handlers/data-report-body-click-handler'\nimport { dataReportBodyDblclickHandler } from './event-handlers/data-report-body-dblclick-handler'\nimport { dataReportBodyKeydownHandler } from './event-handlers/data-report-body-keydown-handler'\n\nfunction calcScrollPos(parent: DataReportBody, child: Element) {\n  /* getBoundingClientRect는 safari에서 스크롤 상태에서 다른 브라우저와는 다른 값을 리턴함 - 사파리는 약간 이상 작동함. */\n  var { top: ct, left: cl, right: cr, bottom: cb } = child.getBoundingClientRect()\n  var { top: pt, left: pl, right: pr, bottom: pb } = parent.getBoundingClientRect()\n  var { scrollLeft, scrollTop } = parent\n  var scrollbarWidth = parent.clientWidth - parent.offsetWidth\n  var scrollbarHeight = parent.clientHeight - parent.offsetHeight\n\n  return {\n    left: cl < pl ? scrollLeft - (pl - cl) : cr > pr ? scrollLeft - (pr - cr) - scrollbarWidth : undefined,\n    top: ct < pt ? scrollTop - (pt - ct) : cb > pb ? scrollTop - (pb - cb) - scrollbarHeight : undefined\n  }\n}\n\n@customElement('ox-report-body')\nexport class DataReportBody extends LitElement {\n  static styles = [dataReportBodyStyle]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) focused?: { row: number; column: number }\n\n  private _focusedListener?: EventListener\n\n  render() {\n    var { rows } = this.config\n    var { groups } = rows || {}\n\n    var getColumnIndex = (name: string) =>\n      this.columns.filter(column => !column.hidden).findIndex(column => column.name == name)\n    var getColumn = (name: string | number) => this.columns.find(column => column.name == name)\n\n    var { row: focusedRow = 0, column: focusedColumn = 0 } = this.focused || {}\n\n    var columns = (this.columns || []).filter(\n      column => !column.hidden && groups.map(group => group.column).indexOf(column.name) == -1\n    )\n    var data = this.data\n    var { records = [] } = data\n\n    return html`\n      ${records.map((record, idxRow) => {\n        var attrFocusedRow = idxRow === focusedRow\n        var totalic = record['*']\n        var totalicColumn =\n          totalic && (totalic.groupName == '*' ? getColumn(groups[0].column) : getColumn(totalic.groupName))\n\n        return html`\n          ${!totalic || (totalic && totalic.value)\n            ? html`\n                ${columns.map(column => {\n                  let columnIndex = getColumnIndex(column.name)\n                  return html`\n                    <ox-report-field\n                      .data=${data}\n                      .rowIndex=${idxRow}\n                      .columnIndex=${columnIndex}\n                      .column=${column}\n                      .record=${record}\n                      ?gutter=${column.type == 'gutter'}\n                      ?focused-row=${attrFocusedRow}\n                      ?focused=${attrFocusedRow && columnIndex === focusedColumn}\n                      ?totalized=${totalic}\n                      .value=${record[column.name]}\n                    ></ox-report-field>\n                  `\n                })}\n                <ox-report-field\n                  .data=${data}\n                  .rowIndex=${idxRow}\n                  .record=${record}\n                  ?focused-row=${attrFocusedRow}\n                  ?totalized=${totalic}\n                ></ox-report-field>\n              `\n            : html``}\n          ${!totalic\n            ? html``\n            : html`\n                ${totalic.groupName == '*'\n                  ? html``\n                  : html`\n                      <ox-report-field\n                        .data=${data}\n                        .rowIndex=${totalic.row - 1}\n                        .columnIndex=${totalic.column - 1}\n                        .column=${totalicColumn}\n                        .record=${record}\n                        ?focused-row=${totalic.row - 1 <= focusedRow && totalic.row - 1 + totalic.rowspan > focusedRow}\n                        ?focused=${totalic.row - 1 === focusedRow && totalic.column - 1 === focusedColumn}\n                        ?grouped=${true}\n                        .value=${record[totalic.groupName]}\n                        .style=\"grid-area: ${totalic.row} / ${totalic.column} / span ${totalic.rowspan} / span 1;\"\n                      ></ox-report-field>\n                    `}\n                ${!totalic.value\n                  ? html``\n                  : html`\n                      <ox-report-field\n                        .data=${data}\n                        .rowIndex=${idxRow}\n                        .columnIndex=${totalic.column - 1}\n                        .column=${totalic.titleColumn}\n                        .record=${record}\n                        ?focused-row=${attrFocusedRow}\n                        ?focused=${idxRow === focusedRow && totalic.column - 1 === focusedColumn}\n                        ?grouped=${true}\n                        .value=${totalic.value}\n                        .style=\"grid-area: ${totalic.row +\n                        totalic.rowspan} / ${totalic.column} / span 1 / span ${totalic.colspan};\"\n                      ></ox-report-field>\n                    `}\n              `}\n        `\n      })}\n    `\n  }\n\n  firstUpdated() {\n    /* focus() 를 받을 수 있도록 함. */\n    this.setAttribute('tabindex', '-1')\n\n    /*\n     * focusout 으로 property를 변경시키는 경우, focusout에 의해 update가 발생하는 경우에는,\n     * 그리드 내부의 컴포넌트가 갱신되는 현상을 초래하게 된다.\n     * 따라서, focusout 핸들러에서 update를 유발하는 코드는 강력하게 금지시킨다.\n     */\n    this.addEventListener('focusout', e => {\n      if (this._focusedListener) {\n        window.removeEventListener('keydown', this._focusedListener)\n        delete this._focusedListener\n      }\n    })\n\n    this.addEventListener('focusin', e => {\n      if (!this._focusedListener) {\n        this._focusedListener = dataReportBodyKeydownHandler.bind(this) as EventListener\n        window.addEventListener('keydown', this._focusedListener)\n      }\n    })\n\n    this.renderRoot.addEventListener('click', dataReportBodyClickHandler.bind(this))\n    this.renderRoot.addEventListener('dblclick', dataReportBodyDblclickHandler.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('focused')) {\n      let element = this.renderRoot.querySelector('[focused]')\n      if (!element) {\n        return\n      }\n\n      let { top, left } = calcScrollPos(this, element)\n      // TODO this.scroll()을 사용하면, 효과가 좋으나 left 계산에 문제가 있는 것 같음.\n      // this.scroll({\n      //   top,\n      //   left,\n      //   behavior: 'smooth'\n      // })\n      if (top !== undefined) {\n        this.scrollTop = top\n      }\n      if (left !== undefined) {\n        this.scrollLeft = left\n      }\n    }\n  }\n\n  focus() {\n    super.focus()\n\n    if (!this.focused || this.focused.row == null) {\n      this.focused = { row: 0, column: 0 }\n    }\n  }\n}\n"]}

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

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { supportsPassive } from '../utils';
 import throttle from 'lodash-es/throttle';
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
+import { supportsPassive } from '../utils';
 let DataReportHeader = class DataReportHeader extends LitElement {
     constructor() {
         super(...arguments);
@@ -91,7 +91,7 @@ let DataReportHeader = class DataReportHeader extends LitElement {
             sorters.push(sorter);
         }
         this._sorters = sorters;
-        this.dispatchEvent(new CustomEvent('sorters-change', {
+        this.dispatchEvent(new CustomEvent('fetch-params-change', {
             bubbles: true,
             composed: true,
             detail: {

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

@@ -1 +1 @@
-{"version":3,"file":"data-report-header.js","sourceRoot":"","sources":["../../../src/data-report/data-report-header.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'\nimport { LitElement, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { supportsPassive } from '../utils'\nimport throttle from 'lodash-es/throttle'\n\n@customElement('ox-report-header')\nclass DataReportHeader extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--report-template-columns);\n\n        overflow: hidden;\n      }\n\n      div {\n        display: flex;\n\n        white-space: nowrap;\n        overflow: hidden;\n        background-color: var(--report-header-background-color, gray);\n        border: 1px solid var(--report-header-border-color);\n        border-width: 1px 1px 1px 0;\n        padding: var(--report-header-padding);\n\n        text-overflow: ellipsis;\n        text-align: center;\n        font-size: var(--report-header-fontsize, 1em);\n        color: var(--report-header-color);\n      }\n\n      span {\n        white-space: nowrap;\n        overflow: hidden;\n\n        text-align: center;\n      }\n\n      span[title] {\n        flex: 1;\n        text-overflow: ellipsis;\n        font: var(--report-header-font);\n        color: var(--report-header-color);\n        text-transform: capitalize;\n      }\n\n      span[sorter] {\n        padding: 0;\n        border: 0;\n        font-size: 10px;\n      }\n\n      span[splitter] {\n        cursor: col-resize;\n      }\n\n      @media print {\n        :host {\n          grid-template-columns: var(--report-template-print-columns);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Array }) private _sorters?: SortersConfig\n\n  private throttledNotifier?: (idx: number, width: number) => void\n\n  _onWheelEvent(e: WheelEvent) {\n    var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n    this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)\n\n    supportsPassive || e.preventDefault()\n  }\n\n  firstUpdated() {\n    this.addEventListener('wheel', this._onWheelEvent.bind(this), supportsPassive ? { passive: true } : false)\n  }\n\n  updated(changed: any) {\n    if (changed.has('config')) {\n      this._sorters = this.config.sorters || []\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 @dragstart=${(e: MouseEvent) => this._dragStart(e, idx)}>\n                <span title @click=${(e: Event) => this._changeSort(column)}>${this._renderHeader(column)} </span>\n\n                ${column.sortable\n                  ? html`\n                      <span sorter @click=${(e: Event) => this._changeSort(column)}>\n                        ${this._renderSortHeader(column)}\n                      </span>\n                    `\n                  : html``}\n                ${column.resizable !== false ? html` <span splitter draggable=\"true\">&nbsp;</span> ` : html``}\n              </div>\n            `\n          : html``\n      )}\n\n      <div></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    if (column.hidden) {\n      return html``\n    }\n\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 ? html` &#9660;<sub>${rank}</sub> ` : html` &#9650;<sub>${rank}</sub> `\n    } else {\n      return sorter.desc ? html` &#9660; ` : html` &#9650; `\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: {\n          sorters: this._sorters,\n          from: 'data-report-header'\n        }\n      })\n    )\n  }\n\n  _notifyWidthChange(idx: number, width: number) {\n    if (!this.throttledNotifier) {\n      this.throttledNotifier = throttle((idx, width) => {\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      }, 100)\n    }\n\n    this.throttledNotifier(idx, width)\n  }\n\n  _dragStart(e: MouseEvent, idx: number) {\n    var target = e.currentTarget as HTMLElement\n    var startX = e.offsetX\n\n    var dragHandler = ((e: MouseEvent) => {\n      let column = this.columns[idx]\n\n      let width = Math.max(0, Number(column.width) + e.offsetX - startX)\n      if (width == 0) {\n        /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n        return\n      }\n\n      this._notifyWidthChange(idx, width)\n    }).bind(this)\n\n    var dragEndHandler = ((e: MouseEvent) => {\n      target.removeEventListener('drag', dragHandler)\n      target.removeEventListener('dragend', dragEndHandler)\n\n      dragHandler(e)\n    }).bind(this)\n\n    target.addEventListener('drag', dragHandler)\n    target.addEventListener('dragend', dragEndHandler)\n  }\n}\n"]}
+{"version":3,"file":"data-report-header.js","sourceRoot":"","sources":["../../../src/data-report/data-report-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QA2D8B,WAAM,GAAgB,WAAW,CAAA;QAClC,YAAO,GAAmB,EAAE,CAAA;QAC3B,SAAI,GAAc,SAAS,CAAA;IA8JzD,CAAC;IAzJC,aAAa,CAAC,CAAa;QACzB,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,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC,CAAA;QAE3D,eAAe,IAAI,CAAC,CAAC,cAAc,EAAE,CAAA;IACvC,CAAC;IAED,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAC5G,CAAC;IAED,OAAO,CAAC,OAAY;QAClB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;SAC1C;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAC5B,CAAC,MAAM,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA;gCACgB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,CAAC;qCACrC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;kBAEvF,MAAM,CAAC,QAAQ;gBACf,CAAC,CAAC,IAAI,CAAA;4CACoB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;0BACxD,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC;;qBAEnC;gBACH,CAAC,CAAC,IAAI,CAAA,EAAE;kBACR,MAAM,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,iDAAiD,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;aAEhG;YACH,CAAC,CAAC,IAAI,CAAA,EAAE,CACX;;;KAGF,CAAA;IACH,CAAC;IAED,aAAa,CAAC,MAAoB;QAChC,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA;QACtC,IAAI,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA,IAAI,KAAK,GAAG,CAAA;IACzB,CAAC;IAED,iBAAiB,CAAC,MAAoB;QACpC,IAAI,MAAM,CAAC,MAAM,EAAE;YACjB,OAAO,IAAI,CAAA,EAAE,CAAA;SACd;QAED,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEjC,IAAI,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;QAC3F,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAA;SACd;QAED,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACtB,IAAI,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;YACtC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,SAAS,CAAA;SAC3F;aAAM;YACL,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,WAAW,CAAA;SACvD;IACH,CAAC;IAED,WAAW,CAAC,MAAoB;QAC9B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;YACpB,OAAM;SACP;QAED,IAAI,OAAO,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAA;QAExC,IAAI,GAAG,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;QACjE,IAAI,GAAG,KAAK,CAAC,CAAC,EAAE;YACd,IAAI,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA;YACzB,IAAI,MAAM,CAAC,IAAI,EAAE;gBACf,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;aACvB;iBAAM;gBACL,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;aACnB;SACF;aAAM;YACL,IAAI,MAAM,GAAG;gBACX,IAAI,EAAE,MAAM,CAAC,IAAI;aAClB,CAAA;YAED,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;SACrB;QAED,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QAEvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI,CAAC,QAAQ;gBACtB,IAAI,EAAE,oBAAoB;aAC3B;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,kBAAkB,CAAC,GAAW,EAAE,KAAa;QAC3C,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;gBAC/C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;oBACrC,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE;wBACN,GAAG;wBACH,KAAK;qBACN;iBACF,CAAC,CACH,CAAA;YACH,CAAC,EAAE,GAAG,CAAC,CAAA;SACR;QAED,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IACpC,CAAC;IAED,UAAU,CAAC,CAAa,EAAE,GAAW;QACnC,IAAI,MAAM,GAAG,CAAC,CAAC,aAA4B,CAAA;QAC3C,IAAI,MAAM,GAAG,CAAC,CAAC,OAAO,CAAA;QAEtB,IAAI,WAAW,GAAG,CAAC,CAAC,CAAa,EAAE,EAAE;YACnC,IAAI,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;YAE9B,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,CAAA;YAClE,IAAI,KAAK,IAAI,CAAC,EAAE;gBACd,8CAA8C;gBAC9C,OAAM;aACP;YAED,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACrC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,IAAI,cAAc,GAAG,CAAC,CAAC,CAAa,EAAE,EAAE;YACtC,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;YAC/C,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;YAErD,WAAW,CAAC,CAAC,CAAC,CAAA;QAChB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;QAC5C,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;IACpD,CAAC;CACF,CAAA;AA1NQ,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAkC;AAClC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAA6B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA4B;AAC5B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAiC;AA9DvD,gBAAgB;IADrB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,gBAAgB,CA2NrB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'\nimport { supportsPassive } from '../utils'\n\n@customElement('ox-report-header')\nclass DataReportHeader extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--report-template-columns);\n\n        overflow: hidden;\n      }\n\n      div {\n        display: flex;\n\n        white-space: nowrap;\n        overflow: hidden;\n        background-color: var(--report-header-background-color, gray);\n        border: 1px solid var(--report-header-border-color);\n        border-width: 1px 1px 1px 0;\n        padding: var(--report-header-padding);\n\n        text-overflow: ellipsis;\n        text-align: center;\n        font-size: var(--report-header-fontsize, 1em);\n        color: var(--report-header-color);\n      }\n\n      span {\n        white-space: nowrap;\n        overflow: hidden;\n\n        text-align: center;\n      }\n\n      span[title] {\n        flex: 1;\n        text-overflow: ellipsis;\n        font: var(--report-header-font);\n        color: var(--report-header-color);\n        text-transform: capitalize;\n      }\n\n      span[sorter] {\n        padding: 0;\n        border: 0;\n        font-size: 10px;\n      }\n\n      span[splitter] {\n        cursor: col-resize;\n      }\n\n      @media print {\n        :host {\n          grid-template-columns: var(--report-template-print-columns);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Array }) private _sorters?: SortersConfig\n\n  private throttledNotifier?: (idx: number, width: number) => void\n\n  _onWheelEvent(e: WheelEvent) {\n    var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n    this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)\n\n    supportsPassive || e.preventDefault()\n  }\n\n  firstUpdated() {\n    this.addEventListener('wheel', this._onWheelEvent.bind(this), supportsPassive ? { passive: true } : false)\n  }\n\n  updated(changed: any) {\n    if (changed.has('config')) {\n      this._sorters = this.config.sorters || []\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 @dragstart=${(e: MouseEvent) => this._dragStart(e, idx)}>\n                <span title @click=${(e: Event) => this._changeSort(column)}>${this._renderHeader(column)} </span>\n\n                ${column.sortable\n                  ? html`\n                      <span sorter @click=${(e: Event) => this._changeSort(column)}>\n                        ${this._renderSortHeader(column)}\n                      </span>\n                    `\n                  : html``}\n                ${column.resizable !== false ? html` <span splitter draggable=\"true\">&nbsp;</span> ` : html``}\n              </div>\n            `\n          : html``\n      )}\n\n      <div></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    if (column.hidden) {\n      return html``\n    }\n\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 ? html` &#9660;<sub>${rank}</sub> ` : html` &#9650;<sub>${rank}</sub> `\n    } else {\n      return sorter.desc ? html` &#9660; ` : html` &#9650; `\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-report-header'\n        }\n      })\n    )\n  }\n\n  _notifyWidthChange(idx: number, width: number) {\n    if (!this.throttledNotifier) {\n      this.throttledNotifier = throttle((idx, width) => {\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      }, 100)\n    }\n\n    this.throttledNotifier(idx, width)\n  }\n\n  _dragStart(e: MouseEvent, idx: number) {\n    var target = e.currentTarget as HTMLElement\n    var startX = e.offsetX\n\n    var dragHandler = ((e: MouseEvent) => {\n      let column = this.columns[idx]\n\n      let width = Math.max(0, Number(column.width) + e.offsetX - startX)\n      if (width == 0) {\n        /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n        return\n      }\n\n      this._notifyWidthChange(idx, width)\n    }).bind(this)\n\n    var dragEndHandler = ((e: MouseEvent) => {\n      target.removeEventListener('drag', dragHandler)\n      target.removeEventListener('dragend', dragEndHandler)\n\n      dragHandler(e)\n    }).bind(this)\n\n    target.addEventListener('drag', dragHandler)\n    target.addEventListener('dragend', dragEndHandler)\n  }\n}\n"]}

package/dist/src/editors/ox-grist-editor.d.ts

@@ -1,6 +1,6 @@
-import { ColumnConfig, GristRecord } from '../types';
 import { LitElement } from 'lit';
 import { DataGridField } from '../data-grid/data-grid-field';
+import { ColumnConfig, GristRecord } from '../types';
 export declare class OxGristEditor extends LitElement {
     static styles: import("lit").CSSResult;
     value?: any;

package/dist/src/editors/ox-grist-editor.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
 const STYLE = css `
   :host {
     display: flex;
@@ -13,13 +13,14 @@ const STYLE = css `
 
     border: 0;
     background-color: transparent;
+
+    overflow: hidden;
   }
 
   :host > * {
     display: flex;
 
     width: 100%;
-    height: 100%;
 
     border: 0;
     background-color: transparent;
@@ -28,6 +29,8 @@ const STYLE = css `
 
     font-size: inherit;
     font-family: inherit;
+
+    align-items: center;
   }
 
   :host > style {
@@ -99,7 +102,7 @@ let OxGristEditor = class OxGristEditor extends LitElement {
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
     }
     formatForEditor(value) {
-        return value === undefined ? '' : value;
+        return value == null ? '' : value;
     }
     formatFromEditor(e) {
         return e.target.value;

package/dist/src/editors/ox-grist-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-editor.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, css, html } from 'lit'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\n\nconst STYLE = css`\n  :host {\n    display: flex;\n\n    align-items: center;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n  }\n\n  :host > * {\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    box-sizing: border-box;\n\n    font-size: inherit;\n    font-family: inherit;\n  }\n\n  :host > style {\n    display: none;\n  }\n\n  :host > input[type='checkbox'] {\n    width: initial;\n    margin: auto;\n  }\n  input[type='checkbox'],\n  input[type='radio'] {\n    zoom: var(--grist-input-zoom);\n  }\n  *:focus {\n    outline: none;\n  }\n\n  input[type='file'] {\n    opacity: 0%;\n  }\n\n  @media screen and (max-width: 460px) {\n    :host > * {\n      border: initial;\n      background-color: initial;\n    }\n    *:focus {\n      outline: none;\n    }\n  }\n`\n\n@customElement('ox-grist-editor')\nexport class OxGristEditor extends LitElement {\n  static styles = STYLE\n\n  @property({ type: Object }) value?: any\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex?: number\n  @property({ type: Object }) field?: DataGridField\n  @property({ type: Number }) row?: number\n\n  protected _dirtyValue?: any\n\n  render() {\n    return this.editorTemplate\n  }\n\n  get editor(): HTMLElement | null {\n    return this.renderRoot.firstElementChild as HTMLElement\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onchange.bind(this))\n    this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n    this.renderRoot.addEventListener('click', this._onclick.bind(this))\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this))\n\n    const align = this.column.record.align\n    if (align) {\n      this.style.textAlign = align\n      this.style.textAlignLast = align /* for select */\n    }\n\n    const name = this.column.name || ''\n    this.value = this._dirtyValue = this.formatForEditor(this.record[name])\n\n    this.focus()\n    await this.updateComplete\n    this.select()\n  }\n\n  select() {\n    if ((this.editor as HTMLInputElement)?.select) {\n      return (this.editor as HTMLInputElement).select()\n    }\n  }\n\n  focus() {\n    this.editor?.focus()\n  }\n\n  formatForEditor(value: any): any {\n    return value === undefined ? '' : value\n  }\n\n  formatFromEditor(e: Event): any {\n    return (e.target as HTMLInputElement).value\n  }\n\n  _onfocusout() {\n    if (this._dirtyValue !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: this._dirtyValue,\n            column: this.column,\n            record: this.record,\n            row: this.row\n          }\n        })\n      )\n    }\n  }\n\n  _onchange(e: Event): void {\n    e.stopPropagation()\n\n    this._dirtyValue = this.formatFromEditor(e)\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  _ondblclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  get editorTemplate() {\n    return html``\n  }\n}\n"]}
+{"version":3,"file":"ox-grist-editor.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst STYLE = css`\n  :host {\n    display: flex;\n\n    align-items: center;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    overflow: hidden;\n  }\n\n  :host > * {\n    display: flex;\n\n    width: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    box-sizing: border-box;\n\n    font-size: inherit;\n    font-family: inherit;\n\n    align-items: center;\n  }\n\n  :host > style {\n    display: none;\n  }\n\n  :host > input[type='checkbox'] {\n    width: initial;\n    margin: auto;\n  }\n  input[type='checkbox'],\n  input[type='radio'] {\n    zoom: var(--grist-input-zoom);\n  }\n  *:focus {\n    outline: none;\n  }\n\n  input[type='file'] {\n    opacity: 0%;\n  }\n\n  @media screen and (max-width: 460px) {\n    :host > * {\n      border: initial;\n      background-color: initial;\n    }\n    *:focus {\n      outline: none;\n    }\n  }\n`\n\n@customElement('ox-grist-editor')\nexport class OxGristEditor extends LitElement {\n  static styles = STYLE\n\n  @property({ type: Object }) value?: any\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex?: number\n  @property({ type: Object }) field?: DataGridField\n  @property({ type: Number }) row?: number\n\n  protected _dirtyValue?: any\n\n  render() {\n    return this.editorTemplate\n  }\n\n  get editor(): HTMLElement | null {\n    return this.renderRoot.firstElementChild as HTMLElement\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onchange.bind(this))\n    this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n    this.renderRoot.addEventListener('click', this._onclick.bind(this))\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this))\n\n    const align = this.column.record.align\n    if (align) {\n      this.style.textAlign = align\n      this.style.textAlignLast = align /* for select */\n    }\n\n    const name = this.column.name || ''\n    this.value = this._dirtyValue = this.formatForEditor(this.record[name])\n\n    this.focus()\n    await this.updateComplete\n    this.select()\n  }\n\n  select() {\n    if ((this.editor as HTMLInputElement)?.select) {\n      return (this.editor as HTMLInputElement).select()\n    }\n  }\n\n  focus() {\n    this.editor?.focus()\n  }\n\n  formatForEditor(value: any): any {\n    return value == null ? '' : value\n  }\n\n  formatFromEditor(e: Event): any {\n    return (e.target as HTMLInputElement).value\n  }\n\n  _onfocusout() {\n    if (this._dirtyValue !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: this._dirtyValue,\n            column: this.column,\n            record: this.record,\n            row: this.row\n          }\n        })\n      )\n    }\n  }\n\n  _onchange(e: Event): void {\n    e.stopPropagation()\n\n    this._dirtyValue = this.formatFromEditor(e)\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  _ondblclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  get editorTemplate() {\n    return html``\n  }\n}\n"]}

package/dist/src/filters/filter-checkbox.d.ts

@@ -1,3 +1,3 @@
 import '@operato/input/ox-checkbox.js';
-import { FilterSelectRenderer } from '../types';
+import { FilterSelectRenderer } from '../types.js';
 export declare const FilterCheckbox: FilterSelectRenderer;

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

@@ -8,7 +8,7 @@ export const FilterCheckbox = (column, value, owner) => {
       name=${column.name}
       ?checked=${value}
       indeterminatable
-      ?indeterminate=${value === undefined}
+      ?indeterminate=${value == null}
       @change=${(e) => {
         ;
         e.target.dispatchEvent(new CustomEvent('filter-change', {

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,+BAA+B,CAAA;AAItC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC3E,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAA;IAE/B,OAAO,IAAI,CAAA;;aAEA,MAAM,CAAC,IAAI;iBACP,KAAK;;uBAEC,KAAK,KAAK,SAAS;gBAC1B,CAAC,CAAc,EAAE,EAAE;QAC3B,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAG,CAAC,CAAC,MAAqD,CAAC,OAAO;aACxE;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nimport { html } from 'lit-html'\n\nexport const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options\n\n  return html`\n    <ox-checkbox\n      name=${column.name}\n      ?checked=${value}\n      indeterminatable\n      ?indeterminate=${value === undefined}\n      @change=${(e: CustomEvent) => {\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: (e.target as Element & { checked: boolean | undefined }).checked\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}
+{"version":3,"file":"filter-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC3E,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAA;IAE/B,OAAO,IAAI,CAAA;;aAEA,MAAM,CAAC,IAAI;iBACP,KAAK;;uBAEC,KAAK,IAAI,IAAI;gBACpB,CAAC,CAAc,EAAE,EAAE;QAC3B,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAG,CAAC,CAAC,MAAqD,CAAC,OAAO;aACxE;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nexport const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options\n\n  return html`\n    <ox-checkbox\n      name=${column.name}\n      ?checked=${value}\n      indeterminatable\n      ?indeterminate=${value == null}\n      @change=${(e: CustomEvent) => {\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: (e.target as Element & { checked: boolean | undefined }).checked\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/filters/filter-input-barcode.d.ts

@@ -0,0 +1,3 @@
+import '@operato/input/ox-input-barcode.js';
+import { FilterSelectRenderer } from '../types.js';
+export declare const FilterInputBarcode: FilterSelectRenderer;

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

@@ -0,0 +1,27 @@
+import '@operato/input/ox-input-barcode.js';
+import { html } from 'lit-html';
+export const FilterInputBarcode = (column, value, owner) => {
+    const filter = column.filter;
+    const { englishOnly, selectAfterChange } = filter.options || {};
+    return html `
+    <ox-input-barcode
+      name=${column.name}
+      ?english-only=${englishOnly}
+      ?select-after-change=${selectAfterChange}
+      .value=${value == null ? '' : value}
+      @change=${(e) => {
+        const input = e.target;
+        input.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: column.name,
+                operator: filter.operator,
+                value: input.value
+            }
+        }));
+    }}
+    />
+  `;
+};
+//# sourceMappingURL=filter-input-barcode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-input-barcode.js","sourceRoot":"","sources":["../../../src/filters/filter-input-barcode.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,kBAAkB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC/E,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE/D,OAAO,IAAI,CAAA;;aAEA,MAAM,CAAC,IAAI;sBACF,WAAW;6BACJ,iBAAiB;eAC/B,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBACzB,CAAC,CAAc,EAAE,EAAE;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-input-barcode.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nexport const FilterInputBarcode: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const { englishOnly, selectAfterChange } = filter.options || {}\n\n  return html`\n    <ox-input-barcode\n      name=${column.name}\n      ?english-only=${englishOnly}\n      ?select-after-change=${selectAfterChange}\n      .value=${value == null ? '' : value}\n      @change=${(e: CustomEvent) => {\n        const input = e.target as HTMLInputElement\n        input.dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: input.value\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

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

@@ -6,7 +6,7 @@ export const FilterInput = (column, value, owner) => {
     <input
       type=${type}
       name=${column.name}
-      .value=${value === undefined ? '' : value}
+      .value=${value == null ? '' : value}
       @change=${(e) => {
         const input = e.target;
         input.dispatchEvent(new CustomEvent('filter-change', {