@operato/data-grist 0.3.13 → 0.3.17

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

@@ -1 +1 @@
-{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './data-card-field'\nimport '../record-view'\nimport './data-card-gutter'\nimport './data-card-gutter-menu'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        position: relative;\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: 0;\n        height: 20px;\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: 0;\n        top: 0;\n        color: var(--grid-record-dirty-color);\n      }\n\n      [thumbnail] {\n        width: 100%;\n        height: var(--data-card-thumbnail-height);\n        border-top-left-radius: var(--data-card-record-card-border-radius);\n        border-top-right-radius: var(--data-card-record-card-border-radius);\n        border-bottom: var(--data-card-thumbnail-border-bottom);\n        overflow: hidden;\n        align-self: center;\n      }\n\n      [content] {\n        display: grid;\n        grid-template:\n          'brief gutters'\n          'detail detail';\n        grid-template-columns: 1fr 35px;\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        grid-area: brief;\n        overflow: hidden;\n      }\n\n      [gutters] {\n        grid-area: gutters;\n      }\n\n      [detail] {\n        grid-area: detail;\n        overflow: hidden;\n      }\n\n      ox-card-gutter {\n        flex: 0 0 14px;\n      }\n\n      ox-card-field {\n        padding-top: 2px;\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color);\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color);\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color);\n      }\n\n      .update-info {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color);\n      }\n\n      .update-info mwc-icon {\n        vertical-align: middle;\n        font-size: 1em;\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  attributeChangedCallback(name: string, oldval: any, newval: any) {\n    super.attributeChangedCallback(name, oldval, newval)\n  }\n\n  onFieldChange(e: Event) {\n    /* record-view의 이벤트를 부모에게로 전달한다. */\n    this.dispatchEvent(\n      new CustomEvent('field-change', {\n        bubbles: true,\n        composed: true,\n        detail: (e as any).detail\n      })\n    )\n  }\n\n  get recordView() {\n    if (!this._recordView) {\n      this._recordView = document.createElement('ox-record-view')\n      this._recordView.addEventListener('field-change', (e: CustomEvent) => this.onFieldChange(e))\n    }\n\n    var columns = this.config.columns\n\n    this._recordView.columns = columns\n    this._recordView.record = this.record\n    this._recordView.rowIndex = this.rowIndex\n\n    return this._recordView\n  }\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n  }\n\n  render() {\n    var record = this.record\n    var rowIndex = this.rowIndex\n    var { columns, list } = this.config\n    var { thumbnail, fields, details } = list || {}\n\n    var briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    var detailFields = details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    var thumbnailTemplate = thumbnail.call(this, record, rowIndex)\n\n    var gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n    var firstGutter = gutters[0]\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <mwc-icon dirty>${dirtyIcon}</mwc-icon> ` : html``}\n\n      <div thumbnail>${thumbnailTemplate}</div>\n\n      <div content>\n        <div gutters>\n          ${firstGutter\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${firstGutter}\n                  .record=${record}\n                  .value=${record[firstGutter.name]}\n                ></ox-card-gutter>\n              `\n            : html``}\n          ${gutters.length === 2\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${gutters[1]}\n                  .record=${record}\n                  .value=${record[gutters[1].name]}\n                ></ox-card-gutter>\n              `\n            : gutters.length > 2\n            ? html`\n                <ox-card-gutter-menu\n                  .gutters=${gutters}\n                  .rowIndex=${rowIndex}\n                  .record=${record}\n                  .clickHandler=${this.clickHandler}\n                  .dblclickHandler=${this.dblclickHandler}\n                ></ox-card-gutter-menu>\n              `\n            : html``}\n        </div>\n\n        <div brief>\n          ${briefFields.map(\n            (column, idx) =>\n              html`\n                <ox-card-field\n                  .rowIndex=${rowIndex}\n                  .column=${column}\n                  .record=${record}\n                  .value=${record[column?.name || '']}\n                  ?name=${idx == 0}\n                  ?desc=${idx == 1}\n                ></ox-card-field>\n              `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) =>\n                    html`\n                      <ox-card-field\n                        .rowIndex=${rowIndex}\n                        .column=${column}\n                        .record=${record}\n                        .value=${record[column?.name || '']}\n                      ></ox-card-field>\n                    `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    document.dispatchEvent(\n      new CustomEvent('open-popup', {\n        detail: {\n          template: this.recordView,\n          options: {\n            backdrop: true,\n            size: 'large',\n            title\n          },\n          callback: (popup: any) => {\n            this.recordView.addEventListener('reset', () => {\n              this.dispatchEvent(\n                new CustomEvent('record-reset', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    record: this.record,\n                    row: this.rowIndex\n                  }\n                })\n              )\n            })\n\n            this.recordView.addEventListener('cancel', () => {\n              this.dispatchEvent(\n                new CustomEvent('record-reset', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    record: this.record,\n                    row: this.rowIndex\n                  }\n                })\n              )\n              popup.close()\n            })\n\n            this.recordView.addEventListener('ok', () => {\n              popup.close()\n            })\n\n            popup.onclosed = () => {\n              delete this._recordView\n            }\n          }\n        }\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './data-card-field'\nimport '../record-view'\nimport './data-card-gutter'\nimport './data-card-gutter-menu'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        position: relative;\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: 0;\n        height: 20px;\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: 0;\n        top: 0;\n        color: var(--grid-record-dirty-color);\n      }\n\n      [thumbnail] {\n        width: 100%;\n        height: var(--data-card-thumbnail-height);\n        border-top-left-radius: var(--data-card-record-card-border-radius);\n        border-top-right-radius: var(--data-card-record-card-border-radius);\n        border-bottom: var(--data-card-thumbnail-border-bottom);\n        overflow: hidden;\n\n        display: flex;\n        align-content: center;\n        justify-content: center;\n      }\n\n      [content] {\n        display: grid;\n        grid-template:\n          'brief gutters'\n          'detail detail';\n        grid-template-columns: 1fr 35px;\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        grid-area: brief;\n        overflow: hidden;\n      }\n\n      [gutters] {\n        grid-area: gutters;\n      }\n\n      [detail] {\n        grid-area: detail;\n        overflow: hidden;\n      }\n\n      ox-card-gutter {\n        flex: 0 0 14px;\n      }\n\n      ox-card-field {\n        padding-top: 2px;\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color);\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color);\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color);\n      }\n\n      .update-info {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color);\n      }\n\n      .update-info mwc-icon {\n        vertical-align: middle;\n        font-size: 1em;\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n    const thumbRenderer = thumbnailColumn?.record.renderer\n    const thumbnailTemplate = thumbRenderer?.call(this, record[thumbnail!], thumbnailColumn!, record, rowIndex, this)\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n    const firstGutter = gutters[0]\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <mwc-icon dirty>${dirtyIcon}</mwc-icon> ` : html``}\n\n      <div thumbnail>${thumbnailTemplate}</div>\n\n      <div content>\n        <div gutters>\n          ${firstGutter\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${firstGutter}\n                  .record=${record}\n                  .value=${record[firstGutter.name]}\n                ></ox-card-gutter>\n              `\n            : html``}\n          ${gutters.length === 2\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${gutters[1]}\n                  .record=${record}\n                  .value=${record[gutters[1].name]}\n                ></ox-card-gutter>\n              `\n            : gutters.length > 2\n            ? html`\n                <ox-card-gutter-menu\n                  .gutters=${gutters}\n                  .rowIndex=${rowIndex}\n                  .record=${record}\n                  .clickHandler=${this.clickHandler}\n                  .dblclickHandler=${this.dblclickHandler}\n                ></ox-card-gutter-menu>\n              `\n            : html``}\n        </div>\n\n        <div brief>\n          ${briefFields.map(\n            (column, idx) =>\n              html`\n                <ox-card-field\n                  .rowIndex=${rowIndex}\n                  .column=${column}\n                  .record=${record}\n                  .value=${record[column?.name || '']}\n                  ?name=${idx == 0}\n                  ?desc=${idx == 1}\n                ></ox-card-field>\n              `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) =>\n                    html`\n                      <ox-card-field\n                        .rowIndex=${rowIndex}\n                        .column=${column}\n                        .record=${record}\n                        .value=${record[column?.name || '']}\n                      ></ox-card-field>\n                    `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
 import './data-grid-field';
-import { ColumnConfig, GristConfig, GristData } from '../types';
 import { LitElement, PropertyValues } from 'lit';
+import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types';
 export declare class DataGridBody extends LitElement {
     debounce: import("lodash").DebouncedFunc<(scrollTop: number, clientHeight: number) => void>;
     static styles: import("lit").CSSResult[];
@@ -18,6 +18,8 @@ export declare class DataGridBody extends LitElement {
     from: number;
     to: number;
     private _focusedListener?;
+    private _recordView?;
+    private _recordViewRow?;
     resetEdit(): void;
     handleOnScroll(e: WheelEvent): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -27,4 +29,8 @@ export declare class DataGridBody extends LitElement {
     shouldUpdate(changes: any): boolean;
     updated(changes: PropertyValues<this>): void;
     focus(): void;
+    popupRecordView({ record, row }: {
+        row: number;
+        record: GristRecord;
+    }): void;
 }

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

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
 import './data-grid-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 debounce from 'lodash-es/debounce';
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
+import { RecordViewHandler } from '../record-view/record-view-handler';
+import { supportsPassive } from '../utils';
+import { dataGridBodyStyle } from './data-grid-body-style';
 import { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler';
 import { dataGridBodyDblclickHandler } from './event-handlers/data-grid-body-dblclick-handler';
 import { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler';
-import { dataGridBodyStyle } from './data-grid-body-style';
-import debounce from 'lodash-es/debounce';
-import { supportsPassive } from '../utils';
 const THRESHOLD = 300;
 const DATA_PADDING = 3;
 const ROW_HEIGHT = 40;
@@ -140,6 +141,7 @@ let DataGridBody = class DataGridBody extends LitElement {
         this.addEventListener('wheel', this._onWheelEvent.bind(this), supportsPassive ? { passive: true } : false);
         const primaryColor = getComputedStyle(this).getPropertyValue('--primary-color');
         this.style.setProperty('--focused-background-image', `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%' style='opacity:.3'/></svg>")`);
+        this.addEventListener('show-record-view', (e) => this.popupRecordView(e.detail));
     }
     _onWheelEvent(e) {
         if (this.scrollHeight <= this.clientHeight) {
@@ -188,6 +190,9 @@ let DataGridBody = class DataGridBody extends LitElement {
                 this.scrollLeft = left;
             }
         }
+        if (this._recordView) {
+            this._recordView.record = this.data.records[this._recordViewRow];
+        }
     }
     focus() {
         super.focus();
@@ -197,6 +202,22 @@ let DataGridBody = class DataGridBody extends LitElement {
             this.focused = { row: row == -1 ? 0 : row, column: 0 };
         }
     }
+    popupRecordView({ record, row }) {
+        var titleField = this.config.list.fields[0] || 'name';
+        var title = record[titleField];
+        /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */
+        if (typeof title == 'object') {
+            var column = this.config.columns.find(column => column.name == titleField);
+            title = column === null || column === void 0 ? void 0 : column.record.renderer(title, column, record, row, this /* cautious */);
+        }
+        this._recordViewRow = row;
+        this._recordView = RecordViewHandler(this.config.columns, record, row, this, {
+            title
+        }, () => {
+            delete this._recordView;
+            delete this._recordViewRow;
+        });
+    }
 };
 DataGridBody.styles = [dataGridBodyStyle];
 __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":"data-grid-body.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-grid-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 { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler'\nimport { dataGridBodyDblclickHandler } from './event-handlers/data-grid-body-dblclick-handler'\nimport { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'\nimport { dataGridBodyStyle } from './data-grid-body-style'\nimport debounce from 'lodash-es/debounce'\nimport { supportsPassive } from '../utils'\n\nconst THRESHOLD = 300\nconst DATA_PADDING = 3\nconst ROW_HEIGHT = 40\nconst GAP_SIZE = 1\n\nfunction calcScrollPos(parent: DataGridBody, 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\nconst ZERO_FOCUS = {\n  row: 0,\n  column: 0\n}\n\n@customElement('ox-grid-body')\nexport class DataGridBody extends LitElement {\n  debounce = debounce((scrollTop: number, clientHeight: number) => {\n    const maxVisibleRows = Math.ceil(clientHeight / (ROW_HEIGHT + GAP_SIZE))\n    const from = Math.max(0, Math.floor(scrollTop / (ROW_HEIGHT + GAP_SIZE)) - maxVisibleRows * DATA_PADDING)\n    const to = Math.min(this.data.records?.length || 0, from + maxVisibleRows * (DATA_PADDING * 2 + 1))\n\n    this.from = from\n    this.to = to\n  }, THRESHOLD)\n\n  static styles = [dataGridBodyStyle]\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 } = ZERO_FOCUS\n  @property({ type: Object }) editTarget: { row: number; column: number } | null = null\n  @property({ type: Number }) from = -1\n  @property({ type: Number }) to = -1\n\n  private _focusedListener?: (e: KeyboardEvent) => void\n\n  resetEdit() {\n    this.editTarget = null\n  }\n\n  handleOnScroll(e: WheelEvent) {\n    const { scrollTop, clientHeight } = e.target as HTMLElement\n    this.debounce(scrollTop, clientHeight)\n  }\n\n  // issue #13\n  // renderOptimisticRow() {\n  //   return\n  // }\n\n  render() {\n    var { row: focusedRow, column: focusedColumn } = this.focused || {}\n    var { row: editingRow, column: editingColumn } = this.editTarget || {}\n\n    var columns = this.columns.filter(column => !column.hidden)\n    var data = this.data\n    var { records } = data\n    var { appendable, classifier } = this.config.rows\n\n    /*\n     * 레코드를 추가할 수 있는 경우에는 항상 추가 레코드를 보여준다.\n     * 만약, 이전 방식처럼, 커서를 옮겨야만 새로운 레코드가 보이게 하고 싶다면, 조건부를 다음의 코드로 대체한다.\n     * -- if (focusedRow == records.length)\n     */\n    if (appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map((record, idxRow) => {\n        var attrFocusedRow = idxRow === focusedRow\n        var attrSelected = record['__selected__']\n        var attrOdd = idxRow % 2\n        var dirtyFields = record['__dirtyfields__'] || {}\n        var { emphasized } = classifier.call(null, record, idxRow) || {}\n\n        return html`\n          ${columns.map(\n            (column, idxColumn) => html`\n              <ox-grid-field\n                .data=${data}\n                .rowIndex=${idxRow}\n                .columnIndex=${idxColumn}\n                .column=${column}\n                .record=${record}\n                .emphasized=${emphasized}\n                ?gutter=${column.type == 'gutter'}\n                ?odd=${attrOdd}\n                ?focused-row=${attrFocusedRow}\n                ?selected-row=${attrSelected}\n                ?focused=${idxRow === focusedRow && idxColumn === focusedColumn}\n                ?editing=${idxRow === editingRow && idxColumn === editingColumn}\n                .value=${record[column.name]}\n                ?dirty=${!!dirtyFields[column.name]}\n              ></ox-grid-field>\n            `\n          )}\n          <ox-grid-field\n            .data=${data}\n            .rowIndex=${idxRow}\n            .record=${record}\n            .emphasized=${emphasized}\n            ?odd=${attrOdd}\n            ?focused-row=${attrFocusedRow}\n            ?selected-row=${attrSelected}\n          ></ox-grid-field>\n        `\n      })}\n    `\n  }\n\n  firstUpdated() {\n    // TODO issue #13\n    // this.addEventListener('scroll', this.handleOnScroll.bind(this))\n\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 = dataGridBodyKeydownHandler.bind(this)\n        window.addEventListener('keydown', this._focusedListener)\n      }\n    })\n\n    this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this))\n\n    this.renderRoot.addEventListener('dblclick', dataGridBodyDblclickHandler.bind(this))\n\n    this.addEventListener('wheel', this._onWheelEvent.bind(this), supportsPassive ? { passive: true } : false)\n\n    const primaryColor = getComputedStyle(this).getPropertyValue('--primary-color')\n    this.style.setProperty(\n      '--focused-background-image',\n      `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%' style='opacity:.3'/></svg>\")`\n    )\n  }\n\n  _onWheelEvent(e: WheelEvent) {\n    if (this.scrollHeight <= this.clientHeight) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)\n      supportsPassive || e.preventDefault()\n    }\n  }\n\n  startEditTarget(row: number, column: number) {\n    var { editable } = this.columns.filter(column => !column.hidden)[column].record\n\n    if (!editable) {\n      return\n    }\n\n    this.editTarget = {\n      row,\n      column\n    }\n  }\n\n  shouldUpdate(changes: any) {\n    if (!changes.has('editTarget')) {\n      /*\n       * 큰 변화에 대해서는 실제 update가 발생되기 전에 editTarget을 초기화한다.\n       */\n      this.editTarget = null\n    }\n\n    return super.shouldUpdate(changes)\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 === ZERO_FOCUS) {\n      let { records } = this.data\n      let row = records.findIndex(record => record['__selected__'])\n\n      this.focused = { row: row == -1 ? 0 : row, column: 0 }\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-grid-body.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-grid-field'\n\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport debounce from 'lodash-es/debounce'\n\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'\nimport { supportsPassive } from '../utils'\nimport { dataGridBodyStyle } from './data-grid-body-style'\nimport { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler'\nimport { dataGridBodyDblclickHandler } from './event-handlers/data-grid-body-dblclick-handler'\nimport { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'\n\nconst THRESHOLD = 300\nconst DATA_PADDING = 3\nconst ROW_HEIGHT = 40\nconst GAP_SIZE = 1\n\nfunction calcScrollPos(parent: DataGridBody, 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\nconst ZERO_FOCUS = {\n  row: 0,\n  column: 0\n}\n\n@customElement('ox-grid-body')\nexport class DataGridBody extends LitElement {\n  debounce = debounce((scrollTop: number, clientHeight: number) => {\n    const maxVisibleRows = Math.ceil(clientHeight / (ROW_HEIGHT + GAP_SIZE))\n    const from = Math.max(0, Math.floor(scrollTop / (ROW_HEIGHT + GAP_SIZE)) - maxVisibleRows * DATA_PADDING)\n    const to = Math.min(this.data.records?.length || 0, from + maxVisibleRows * (DATA_PADDING * 2 + 1))\n\n    this.from = from\n    this.to = to\n  }, THRESHOLD)\n\n  static styles = [dataGridBodyStyle]\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 } = ZERO_FOCUS\n  @property({ type: Object }) editTarget: { row: number; column: number } | null = null\n  @property({ type: Number }) from = -1\n  @property({ type: Number }) to = -1\n\n  private _focusedListener?: (e: KeyboardEvent) => void\n  private _recordView?: any\n  private _recordViewRow?: number\n\n  resetEdit() {\n    this.editTarget = null\n  }\n\n  handleOnScroll(e: WheelEvent) {\n    const { scrollTop, clientHeight } = e.target as HTMLElement\n    this.debounce(scrollTop, clientHeight)\n  }\n\n  // issue #13\n  // renderOptimisticRow() {\n  //   return\n  // }\n\n  render() {\n    var { row: focusedRow, column: focusedColumn } = this.focused || {}\n    var { row: editingRow, column: editingColumn } = this.editTarget || {}\n\n    var columns = this.columns.filter(column => !column.hidden)\n    var data = this.data\n    var { records } = data\n    var { appendable, classifier } = this.config.rows\n\n    /*\n     * 레코드를 추가할 수 있는 경우에는 항상 추가 레코드를 보여준다.\n     * 만약, 이전 방식처럼, 커서를 옮겨야만 새로운 레코드가 보이게 하고 싶다면, 조건부를 다음의 코드로 대체한다.\n     * -- if (focusedRow == records.length)\n     */\n    if (appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map((record, idxRow) => {\n        var attrFocusedRow = idxRow === focusedRow\n        var attrSelected = record['__selected__']\n        var attrOdd = idxRow % 2\n        var dirtyFields = record['__dirtyfields__'] || {}\n        var { emphasized } = classifier.call(null, record, idxRow) || {}\n\n        return html`\n          ${columns.map(\n            (column, idxColumn) => html`\n              <ox-grid-field\n                .data=${data}\n                .rowIndex=${idxRow}\n                .columnIndex=${idxColumn}\n                .column=${column}\n                .record=${record}\n                .emphasized=${emphasized}\n                ?gutter=${column.type == 'gutter'}\n                ?odd=${attrOdd}\n                ?focused-row=${attrFocusedRow}\n                ?selected-row=${attrSelected}\n                ?focused=${idxRow === focusedRow && idxColumn === focusedColumn}\n                ?editing=${idxRow === editingRow && idxColumn === editingColumn}\n                .value=${record[column.name]}\n                ?dirty=${!!dirtyFields[column.name]}\n              ></ox-grid-field>\n            `\n          )}\n          <ox-grid-field\n            .data=${data}\n            .rowIndex=${idxRow}\n            .record=${record}\n            .emphasized=${emphasized}\n            ?odd=${attrOdd}\n            ?focused-row=${attrFocusedRow}\n            ?selected-row=${attrSelected}\n          ></ox-grid-field>\n        `\n      })}\n    `\n  }\n\n  firstUpdated() {\n    // TODO issue #13\n    // this.addEventListener('scroll', this.handleOnScroll.bind(this))\n\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 = dataGridBodyKeydownHandler.bind(this)\n        window.addEventListener('keydown', this._focusedListener)\n      }\n    })\n\n    this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this))\n\n    this.renderRoot.addEventListener('dblclick', dataGridBodyDblclickHandler.bind(this))\n\n    this.addEventListener('wheel', this._onWheelEvent.bind(this), supportsPassive ? { passive: true } : false)\n\n    const primaryColor = getComputedStyle(this).getPropertyValue('--primary-color')\n    this.style.setProperty(\n      '--focused-background-image',\n      `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%' style='opacity:.3'/></svg>\")`\n    )\n\n    this.addEventListener('show-record-view', (e: Event) =>\n      this.popupRecordView((e as CustomEvent).detail as { row: number; record: GristRecord })\n    )\n  }\n\n  _onWheelEvent(e: WheelEvent) {\n    if (this.scrollHeight <= this.clientHeight) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)\n      supportsPassive || e.preventDefault()\n    }\n  }\n\n  startEditTarget(row: number, column: number) {\n    var { editable } = this.columns.filter(column => !column.hidden)[column].record\n\n    if (!editable) {\n      return\n    }\n\n    this.editTarget = {\n      row,\n      column\n    }\n  }\n\n  shouldUpdate(changes: any) {\n    if (!changes.has('editTarget')) {\n      /*\n       * 큰 변화에 대해서는 실제 update가 발생되기 전에 editTarget을 초기화한다.\n       */\n      this.editTarget = null\n    }\n\n    return super.shouldUpdate(changes)\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    if (this._recordView) {\n      this._recordView.record = this.data.records[this._recordViewRow!]\n    }\n  }\n\n  focus() {\n    super.focus()\n\n    if (this.focused === ZERO_FOCUS) {\n      let { records } = this.data\n      let row = records.findIndex(record => record['__selected__'])\n\n      this.focused = { row: row == -1 ? 0 : row, column: 0 }\n    }\n  }\n\n  popupRecordView({ record, row }: { row: number; record: GristRecord }) {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, record, row, this /* cautious */)\n    }\n\n    this._recordViewRow = row\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      record,\n      row,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n        delete this._recordViewRow\n      }\n    )\n  }\n}\n"]}

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

@@ -37,7 +37,7 @@ let DataGridField = class DataGridField extends LitElement {
         if (changes.has('editing')) {
             if (this.isEditing) {
                 this._onKeydownInEditingMode = ((e) => {
-                    if (e.keyCode == 27 /* KEY_ESC */) {
+                    if (e.key === 'Esc' || e.key === 'Escape') {
                         /* 편집 취소 */
                         this._editCancelled = true;
                     }

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

@@ -1 +1 @@
-{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        overflow: hidden;\n        white-space: nowrap;\n        background-color: var(--grid-record-background-color);\n        padding: var(--grid-record-padding);\n        border: 1px solid transparent;\n        border-width: 1px 0;\n        border-bottom: var(--grid-record-border-bottom);\n\n        font-size: var(--grid-record-wide-fontsize);\n        min-height: 19px;\n      }\n      :host([gutter]) {\n        padding: var(--padding-default) 0;\n        text-align: center;\n      }\n      :host([gutter]) * {\n        cursor: default;\n      }\n\n      :host([editing]) {\n        padding: 0;\n        border-top: var(--grid-record-editing-border);\n        border-bottom: var(--grid-record-editing-border);\n      }\n\n      :host([focused]) {\n        --grid-record-border-bottom: var(--grid-record-focused-cell-border);\n      }\n\n      :host([dirty])::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: 9px solid red;\n        border-left: 9px solid transparent;\n      }\n\n      span {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin-top: 3px;\n        zoom: var(--grist-input-zoom);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = 0\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean, attribute: 'editing' }) editing = false\n  @property({ type: Object }) value = {}\n  @property({ type: Boolean }) emphasized = false\n\n  private _editCancelled?: boolean\n  private _onFieldChange: (e: Event) => void = e => {}\n  private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n  private get isEditing() {\n    return this.hasAttribute('editing')\n  }\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer, editor } = column.record\n\n    return html`\n      ${this.isEditing\n        ? editor?.call(this, value, column, record, rowIndex, this)\n        : renderer?.call(this, value, column, record, rowIndex, this)}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('editing')) {\n      if (this.isEditing) {\n        this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n          if (e.keyCode == 27 /* KEY_ESC */) {\n            /* 편집 취소 */\n            this._editCancelled = true\n          }\n        }).bind(this)\n\n        this._onFieldChange = ((e: Event) => {\n          this._editCancelled && e.stopPropagation()\n        }).bind(this)\n\n        delete this._editCancelled\n        this.addEventListener('field-change', this._onFieldChange)\n        this.addEventListener('keydown', this._onKeydownInEditingMode)\n      } else {\n        this.removeEventListener('field-change', this._onFieldChange)\n        this.removeEventListener('keydown', this._onKeydownInEditingMode)\n      }\n    }\n\n    if (changes.has('column')) {\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n      if (align != DEFAULT_TEXT_ALIGN) {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n    }\n\n    const emphasized =\n      this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', 'true')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        overflow: hidden;\n        white-space: nowrap;\n        background-color: var(--grid-record-background-color);\n        padding: var(--grid-record-padding);\n        border: 1px solid transparent;\n        border-width: 1px 0;\n        border-bottom: var(--grid-record-border-bottom);\n\n        font-size: var(--grid-record-wide-fontsize);\n        min-height: 19px;\n      }\n      :host([gutter]) {\n        padding: var(--padding-default) 0;\n        text-align: center;\n      }\n      :host([gutter]) * {\n        cursor: default;\n      }\n\n      :host([editing]) {\n        padding: 0;\n        border-top: var(--grid-record-editing-border);\n        border-bottom: var(--grid-record-editing-border);\n      }\n\n      :host([focused]) {\n        --grid-record-border-bottom: var(--grid-record-focused-cell-border);\n      }\n\n      :host([dirty])::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: 9px solid red;\n        border-left: 9px solid transparent;\n      }\n\n      span {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin-top: 3px;\n        zoom: var(--grist-input-zoom);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = 0\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean, attribute: 'editing' }) editing = false\n  @property({ type: Object }) value = {}\n  @property({ type: Boolean }) emphasized = false\n\n  private _editCancelled?: boolean\n  private _onFieldChange: (e: Event) => void = e => {}\n  private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n  private get isEditing() {\n    return this.hasAttribute('editing')\n  }\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer, editor } = column.record\n\n    return html`\n      ${this.isEditing\n        ? editor?.call(this, value, column, record, rowIndex, this)\n        : renderer?.call(this, value, column, record, rowIndex, this)}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('editing')) {\n      if (this.isEditing) {\n        this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n          if (e.key === 'Esc' || e.key === 'Escape') {\n            /* 편집 취소 */\n            this._editCancelled = true\n          }\n        }).bind(this)\n\n        this._onFieldChange = ((e: Event) => {\n          this._editCancelled && e.stopPropagation()\n        }).bind(this)\n\n        delete this._editCancelled\n        this.addEventListener('field-change', this._onFieldChange)\n        this.addEventListener('keydown', this._onKeydownInEditingMode)\n      } else {\n        this.removeEventListener('field-change', this._onFieldChange)\n        this.removeEventListener('keydown', this._onKeydownInEditingMode)\n      }\n    }\n\n    if (changes.has('column')) {\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n      if (align != DEFAULT_TEXT_ALIGN) {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n    }\n\n    const emphasized =\n      this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', 'true')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n}\n"]}

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

@@ -10,6 +10,7 @@ export declare class DataGridHeader extends LitElement {
     private _sorters;
     private _lastAccVal?;
     private _throttledNotifier?;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     _renderHeader(column: ColumnConfig): import("lit-html").TemplateResult<1>;
     _renderSortHeader(column: ColumnConfig): import("lit-html").TemplateResult<1>;

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

@@ -4,6 +4,7 @@ import '@material/mwc-icon';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import throttle from 'lodash-es/throttle';
+import { closestElement } from '@operato/utils';
 import { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
 import { FilterStyles } from '../filters/filter-styles';
 import { getFilterRenderer } from '../filters/registry';
@@ -15,6 +16,13 @@ let DataGridHeader = class DataGridHeader extends LitElement {
         this.data = ZERO_DATA;
         this._sorters = [];
     }
+    connectedCallback() {
+        super.connectedCallback();
+        const grid = closestElement('ox-grist', this);
+        grid === null || grid === void 0 ? void 0 : grid.addEventListener('sorters-change', (e) => {
+            this._sorters = e.detail;
+        });
+    }
     render() {
         var columns = this.columns || [];
         return html `
@@ -196,7 +204,7 @@ DataGridHeader.styles = [
         overflow: hidden;
       }
 
-      :scope > div {
+      div[column] {
         display: flex;
 
         white-space: nowrap;

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

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

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

@@ -1,16 +1,15 @@
 import './data-grid-header';
 import './data-grid-body';
 import './data-grid-footer';
-import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types';
 import { LitElement, PropertyValues } from 'lit';
+import { DataManipulator } from '../data-manipulator';
+import { ColumnConfig, GristRecord } from '../types';
 import { DataGridHeader } from './data-grid-header';
 /**
  * DataGrid
  */
-export declare class DataGrid extends LitElement {
+export declare class DataGrid extends DataManipulator {
     static styles: import("lit").CSSResult[];
-    config: GristConfig;
-    data: GristData;
     focused?: {
         row: number;
         column: number;
@@ -21,6 +20,11 @@ export declare class DataGrid extends LitElement {
     private _widths?;
     firstUpdated(): void;
     onWheelEvent(e: WheelEvent): void;
+    onSelectRecordChanged({ selectedRecords, added, removed }: {
+        selectedRecords: GristRecord[];
+        added: GristRecord[];
+        removed: GristRecord[];
+    }): void;
     onRecordChanged(recordData: GristRecord, row: number, column: ColumnConfig | null): void;
     updated(changes: PropertyValues<this>): void;
     calculateWidths(columns: ColumnConfig[]): void;