@operato/data-grist 9.0.0-beta.61 → 9.0.0-beta.63

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

@@ -0,0 +1,221 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import throttle from 'lodash-es/throttle.js';
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config.js';
+// import { supportsPassive } from '../utils/index.js'
+let DataReportHeader = class DataReportHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.config = ZERO_CONFIG;
+        this.columns = [];
+        this.data = ZERO_DATA;
+    }
+    onWheelEvent(e) {
+        if (this.scrollWidth > this.clientWidth) {
+            var delta = Math.max(-1, Math.min(1, e.deltaY || 0));
+            this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40);
+            var maxScrollLeft = this.scrollWidth - this.clientWidth;
+            var atStart = this.scrollLeft === 0;
+            var atEnd = this.scrollLeft === maxScrollLeft;
+            // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는
+            // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용
+            if ((atStart && delta > 0) || (atEnd && delta < 0)) {
+                return true;
+            }
+            e.preventDefault();
+        }
+    }
+    firstUpdated() {
+        this.addEventListener('wheel', this.onWheelEvent.bind(this));
+    }
+    async updated(changed) {
+        if (changed.has('config')) {
+            this._sorters = this.config.sorters || [];
+        }
+    }
+    render() {
+        var columns = this.columns || [];
+        return html `
+      ${columns.map((column, idx) => !column.hidden
+            ? html `
+              <div @dragstart=${(e) => this._dragStart(e, idx)}>
+                <span titler @click=${(e) => this._changeSort(column)}>${this._renderHeader(column)} </span>
+
+                ${column.sortable
+                ? html `
+                      <span sorter @click=${(e) => this._changeSort(column)}>
+                        ${this._renderSortHeader(column)}
+                      </span>
+                    `
+                : html ``}
+                ${column.resizable !== false ? html ` <span splitter draggable="true">&nbsp;</span> ` : html ``}
+              </div>
+            `
+            : html ``)}
+
+      <div></div>
+    `;
+    }
+    _renderHeader(column) {
+        var { renderer } = column.header || {};
+        var title = renderer.call(this, column);
+        return html ` ${title} `;
+    }
+    _renderSortHeader(column) {
+        if (column.hidden) {
+            return html ``;
+        }
+        var sorters = this._sorters || [];
+        var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name);
+        if (!sorter) {
+            return html ``;
+        }
+        if (sorters.length > 1) {
+            var rank = sorters.indexOf(sorter) + 1;
+            return sorter.desc ? html ` &#9660;<sub>${rank}</sub> ` : html ` &#9650;<sub>${rank}</sub> `;
+        }
+        else {
+            return sorter.desc ? html ` &#9660; ` : html ` &#9650; `;
+        }
+    }
+    _changeSort(column) {
+        if (!column.sortable) {
+            return;
+        }
+        var sorters = [...(this._sorters || [])];
+        var idx = sorters.findIndex(sorter => sorter.name == column.name);
+        if (idx !== -1) {
+            let sorter = sorters[idx];
+            if (sorter.desc) {
+                sorters.splice(idx, 1);
+            }
+            else {
+                sorter.desc = true;
+            }
+        }
+        else {
+            var sorter = {
+                name: column.name
+            };
+            sorters.push(sorter);
+        }
+        this._sorters = sorters;
+        this.dispatchEvent(new CustomEvent('fetch-params-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                sorters: this._sorters,
+                from: 'data-report-header'
+            }
+        }));
+    }
+    _notifyWidthChange(idx, width) {
+        if (!this.throttledNotifier) {
+            this.throttledNotifier = throttle((idx, width) => {
+                this.dispatchEvent(new CustomEvent('column-width-change', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        idx,
+                        width
+                    }
+                }));
+            }, 100);
+        }
+        this.throttledNotifier(idx, width);
+    }
+    _dragStart(e, idx) {
+        var target = e.currentTarget;
+        var startX = e.offsetX;
+        var dragHandler = ((e) => {
+            let column = this.columns[idx];
+            let width = Math.max(0, Number(column.width) + e.offsetX - startX);
+            if (width == 0) {
+                /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */
+                return;
+            }
+            this._notifyWidthChange(idx, width);
+        }).bind(this);
+        var dragEndHandler = ((e) => {
+            target.removeEventListener('drag', dragHandler);
+            target.removeEventListener('dragend', dragEndHandler);
+            dragHandler(e);
+        }).bind(this);
+        target.addEventListener('drag', dragHandler);
+        target.addEventListener('dragend', dragEndHandler);
+    }
+};
+DataReportHeader.styles = [
+    css `
+      :host {
+        display: grid;
+        grid-template-columns: var(--report-template-columns);
+
+        overflow: hidden;
+      }
+
+      div {
+        display: flex;
+
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: var(--report-header-background-color, gray);
+        border: 1px solid var(--report-header-border-color);
+        border-width: 1px 1px 1px 0;
+        padding: var(--report-header-padding);
+
+        text-overflow: ellipsis;
+        text-align: center;
+        font-size: var(--report-header-fontsize, 1em);
+        color: var(--report-header-color);
+      }
+
+      span {
+        white-space: nowrap;
+        overflow: hidden;
+
+        text-align: center;
+      }
+
+      span[titler] {
+        flex: 1;
+        text-overflow: ellipsis;
+        font: var(--report-header-font);
+        color: var(--report-header-color);
+        text-transform: capitalize;
+      }
+
+      span[sorter] {
+        padding: 0;
+        border: 0;
+        font-size: 10px;
+      }
+
+      span[splitter] {
+        cursor: col-resize;
+      }
+
+      @media print {
+        :host {
+          grid-template-columns: var(--report-template-print-columns);
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], DataReportHeader.prototype, "config", void 0);
+__decorate([
+    property({ type: Array })
+], DataReportHeader.prototype, "columns", void 0);
+__decorate([
+    property({ type: Object })
+], DataReportHeader.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], DataReportHeader.prototype, "_sorters", void 0);
+DataReportHeader = __decorate([
+    customElement('ox-report-header')
+], DataReportHeader);
+//# sourceMappingURL=data-report-header.js.map

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

@@ -0,0 +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 { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle.js'\n\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config.js'\nimport { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types.js'\n// import { supportsPassive } from '../utils/index.js'\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[titler] {\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    if (this.scrollWidth > this.clientWidth) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)\n\n      var maxScrollLeft = this.scrollWidth - this.clientWidth\n\n      var atStart = this.scrollLeft === 0\n      var atEnd = this.scrollLeft === maxScrollLeft\n\n      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는\n      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용\n      if ((atStart && delta > 0) || (atEnd && delta < 0)) {\n        return true\n      }\n\n      e.preventDefault()\n    }\n  }\n\n  firstUpdated() {\n    this.addEventListener('wheel', this.onWheelEvent.bind(this))\n  }\n\n  async updated(changed: PropertyValues<this>) {\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 titler @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/data-report/event-handlers/data-report-body-click-handler.d.ts

@@ -0,0 +1,5 @@
+import { DataReportBody } from '../data-report-body.js';
+/**
+ * ox-report-body 의 click handler
+ */
+export declare function dataReportBodyClickHandler(this: DataReportBody, e: Event): void;

package/dist/src/data-report/event-handlers/data-report-body-click-handler.js

@@ -0,0 +1,33 @@
+/**
+ * ox-report-body 의 click handler
+ */
+export function dataReportBodyClickHandler(e) {
+    e.stopPropagation();
+    var target = e.target;
+    var { column, record, rowIndex, columnIndex } = target;
+    if (!column) {
+        /* 여백 컬럼이 클릭된 경우 */
+        return;
+    }
+    if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
+        if (!this.focused || rowIndex !== this.focused.row || columnIndex !== this.focused.column) {
+            this.focused = {
+                row: rowIndex,
+                column: columnIndex
+            };
+        }
+        else {
+            this.requestUpdate();
+        }
+    }
+    else {
+        console.error('should not be here.');
+    }
+    /* do column click handler */
+    var { click } = column.handlers;
+    click && click(this.columns, this.data, column, record, rowIndex, target);
+    /* do rows click handler */
+    var { click: rowsClick } = this.config.rows.handlers;
+    rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target);
+}
+//# sourceMappingURL=data-report-body-click-handler.js.map

package/dist/src/data-report/event-handlers/data-report-body-click-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-report-body-click-handler.js","sourceRoot":"","sources":["../../../../src/data-report/event-handlers/data-report-body-click-handler.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,UAAU,0BAA0B,CAAuB,CAAQ;IACvE,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAyB,CAAA;IACxC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,MAAM,CAAA;IAEtD,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,mBAAmB;QACnB,OAAM;IACR,CAAC;IAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,QAAQ,KAAK,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,WAAW,KAAK,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YAC1F,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,EAAE,QAAQ;gBACb,MAAM,EAAE,WAAW;aACpB,CAAA;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAA;IACtC,CAAC;IAED,6BAA6B;IAC7B,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;IAC/B,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;IAEzE,2BAA2B;IAC3B,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAA;IACpD,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;AACnF,CAAC","sourcesContent":["import { DataReportBody } from '../data-report-body.js'\nimport { DataReportField } from '../data-report-field.js'\n\n/**\n * ox-report-body 의 click handler\n */\nexport function dataReportBodyClickHandler(this: DataReportBody, e: Event) {\n  e.stopPropagation()\n\n  var target = e.target as DataReportField\n  var { column, record, rowIndex, columnIndex } = target\n\n  if (!column) {\n    /* 여백 컬럼이 클릭된 경우 */\n    return\n  }\n\n  if (!isNaN(rowIndex) && !isNaN(columnIndex)) {\n    if (!this.focused || rowIndex !== this.focused.row || columnIndex !== this.focused.column) {\n      this.focused = {\n        row: rowIndex,\n        column: columnIndex\n      }\n    } else {\n      this.requestUpdate()\n    }\n  } else {\n    console.error('should not be here.')\n  }\n\n  /* do column click handler */\n  var { click } = column.handlers\n  click && click(this.columns, this.data, column, record, rowIndex, target)\n\n  /* do rows click handler */\n  var { click: rowsClick } = this.config.rows.handlers\n  rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target)\n}\n"]}

package/dist/src/data-report/event-handlers/data-report-body-dblclick-handler.d.ts

@@ -0,0 +1,5 @@
+import { DataReportBody } from '../data-report-body.js';
+/**
+ * ox-report-body 의 dblclick handler
+ */
+export declare function dataReportBodyDblclickHandler(this: DataReportBody, e: Event): Promise<void>;

package/dist/src/data-report/event-handlers/data-report-body-dblclick-handler.js

@@ -0,0 +1,19 @@
+/**
+ * ox-report-body 의 dblclick handler
+ */
+export async function dataReportBodyDblclickHandler(e) {
+    e.stopPropagation();
+    var target = e.target;
+    var { record, rowIndex, column } = target;
+    if (!column) {
+        /* 여백 컬럼이 클릭된 경우 */
+        return;
+    }
+    /* do column dblclick handler */
+    var { dblclick } = column.handlers;
+    dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target);
+    /* do rows dblclick handler */
+    var { dblclick: rowsDblclick } = this.config.rows.handlers;
+    rowsDblclick && rowsDblclick(this.columns, this.data, column, record, rowIndex, target);
+}
+//# sourceMappingURL=data-report-body-dblclick-handler.js.map

package/dist/src/data-report/event-handlers/data-report-body-dblclick-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-report-body-dblclick-handler.js","sourceRoot":"","sources":["../../../../src/data-report/event-handlers/data-report-body-dblclick-handler.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,6BAA6B,CAAuB,CAAQ;IAChF,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAyB,CAAA;IACxC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IAEzC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,mBAAmB;QACnB,OAAM;IACR,CAAC;IAED,gCAAgC;IAChC,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;IAClC,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE/E,8BAA8B;IAC9B,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAA;IAC1D,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;AACzF,CAAC","sourcesContent":["import { DataReportBody } from '../data-report-body.js'\nimport { DataReportField } from '../data-report-field.js'\n\n/**\n * ox-report-body 의 dblclick handler\n */\nexport async function dataReportBodyDblclickHandler(this: DataReportBody, e: Event) {\n  e.stopPropagation()\n\n  var target = e.target as DataReportField\n  var { record, rowIndex, column } = target\n\n  if (!column) {\n    /* 여백 컬럼이 클릭된 경우 */\n    return\n  }\n\n  /* do column dblclick handler */\n  var { dblclick } = column.handlers\n  dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)\n\n  /* do rows dblclick handler */\n  var { dblclick: rowsDblclick } = this.config.rows.handlers\n  rowsDblclick && rowsDblclick(this.columns, this.data, column, record, rowIndex, target)\n}\n"]}

package/dist/src/data-report/event-handlers/data-report-body-keydown-handler.d.ts

@@ -0,0 +1,5 @@
+import { DataReportBody } from '../data-report-body.js';
+/**
+ * ox-report-body 의 keydown handler
+ */
+export declare function dataReportBodyKeydownHandler(this: DataReportBody, e: KeyboardEvent): void;

package/dist/src/data-report/event-handlers/data-report-body-keydown-handler.js

@@ -0,0 +1,58 @@
+/**
+ * ox-report-body 의 keydown handler
+ */
+export function dataReportBodyKeydownHandler(e) {
+    var _a;
+    // arrow-key
+    const key = e.key;
+    var { row = 0, column = 0 } = this.focused || {};
+    var { records = [] } = this.data || {};
+    var maxrow = ((_a = this.config.rows) === null || _a === void 0 ? void 0 : _a.appendable) ? records.length : records.length - 1;
+    var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1;
+    switch (key) {
+        case 'Up':
+        case 'ArrowUp':
+            row = Math.max(0, row - 1);
+            break;
+        case 'Down':
+        case 'ArrowDown':
+            row = Math.min(maxrow, row + 1);
+            break;
+        case 'Enter':
+            if (maxcolumn > column) {
+                column++;
+            }
+            else if (maxrow > row) {
+                row++;
+            }
+            break;
+        case 'Left':
+        case 'ArrowLeft':
+        case 'Backspace':
+            column = Math.max(0, column - 1);
+            break;
+        case 'Right':
+        case 'ArrowRight':
+        case 'Tab':
+            column = Math.min(maxcolumn, column + 1);
+            break;
+        case 'PageUp':
+            /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
+            row = Math.max(0, row - 10);
+            break;
+        case 'PageDown':
+            row = Math.min(maxrow, row + 10);
+            break;
+        case 'Esc':
+        case 'Escape':
+            return;
+        default:
+            return;
+    }
+    if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
+        this.focused = { row, column };
+    }
+    /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */
+    e.preventDefault();
+}
+//# sourceMappingURL=data-report-body-keydown-handler.js.map

package/dist/src/data-report/event-handlers/data-report-body-keydown-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-report-body-keydown-handler.js","sourceRoot":"","sources":["../../../../src/data-report/event-handlers/data-report-body-keydown-handler.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,UAAU,4BAA4B,CAAuB,CAAgB;;IACjF,YAAY;IACZ,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,CAAA;IACjB,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;IAChD,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;IACtC,IAAI,MAAM,GAAG,CAAA,MAAA,IAAI,CAAC,MAAM,CAAC,IAAI,0CAAE,UAAU,EAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;IAC/E,IAAI,SAAS,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA;IAEhF,QAAQ,GAAG,EAAE,CAAC;QACZ,KAAK,IAAI,CAAC;QACV,KAAK,SAAS;YACZ,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAA;YAC1B,MAAK;QAEP,KAAK,MAAM,CAAC;QACZ,KAAK,WAAW;YACd,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAA;YAC/B,MAAK;QAEP,KAAK,OAAO;YACV,IAAI,SAAS,GAAG,MAAM,EAAE,CAAC;gBACvB,MAAM,EAAE,CAAA;YACV,CAAC;iBAAM,IAAI,MAAM,GAAG,GAAG,EAAE,CAAC;gBACxB,GAAG,EAAE,CAAA;YACP,CAAC;YACD,MAAK;QAEP,KAAK,MAAM,CAAC;QACZ,KAAK,WAAW,CAAC;QACjB,KAAK,WAAW;YACd,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;YAChC,MAAK;QAEP,KAAK,OAAO,CAAC;QACb,KAAK,YAAY,CAAC;QAClB,KAAK,KAAK;YACR,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;YACxC,MAAK;QAEP,KAAK,QAAQ;YACX,sCAAsC;YACtC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,CAAA;YAC3B,MAAK;QAEP,KAAK,UAAU;YACb,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,CAAA;YAChC,MAAK;QAEP,KAAK,KAAK,CAAC;QACX,KAAK,QAAQ;YACX,OAAM;QAER;YACE,OAAM;IACV,CAAC;IAED,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,KAAK,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;QAChF,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA;IAChC,CAAC;IAED,kDAAkD;IAClD,CAAC,CAAC,cAAc,EAAE,CAAA;AACpB,CAAC","sourcesContent":["import { DataReportBody } from '../data-report-body.js'\n\n/**\n * ox-report-body 의 keydown handler\n */\nexport function dataReportBodyKeydownHandler(this: DataReportBody, e: KeyboardEvent): void {\n  // arrow-key\n  const key = e.key\n  var { row = 0, column = 0 } = this.focused || {}\n  var { records = [] } = this.data || {}\n  var maxrow = this.config.rows?.appendable ? records.length : records.length - 1\n  var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1\n\n  switch (key) {\n    case 'Up':\n    case 'ArrowUp':\n      row = Math.max(0, row - 1)\n      break\n\n    case 'Down':\n    case 'ArrowDown':\n      row = Math.min(maxrow, row + 1)\n      break\n\n    case 'Enter':\n      if (maxcolumn > column) {\n        column++\n      } else if (maxrow > row) {\n        row++\n      }\n      break\n\n    case 'Left':\n    case 'ArrowLeft':\n    case 'Backspace':\n      column = Math.max(0, column - 1)\n      break\n\n    case 'Right':\n    case 'ArrowRight':\n    case 'Tab':\n      column = Math.min(maxcolumn, column + 1)\n      break\n\n    case 'PageUp':\n      /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */\n      row = Math.max(0, row - 10)\n      break\n\n    case 'PageDown':\n      row = Math.min(maxrow, row + 10)\n      break\n\n    case 'Esc':\n    case 'Escape':\n      return\n\n    default:\n      return\n  }\n\n  if (!this.focused || this.focused.row !== row || this.focused.column !== column) {\n    this.focused = { row, column }\n  }\n\n  /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */\n  e.preventDefault()\n}\n"]}

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

@@ -0,0 +1,44 @@
+import './data-report/data-report-component.js';
+import { LitElement, PropertyValues } from 'lit';
+import { GristConfig, GristData, GristRecord } from './types.js';
+import { DataConsumer } from './data-consumer.js';
+import { DataReportComponent } from './data-report/data-report-component.js';
+export declare class DataReport extends LitElement implements DataConsumer {
+    static styles: import("lit").CSSResult[];
+    config: any;
+    data: GristData;
+    fetchHandler: any;
+    fetchOptions: any;
+    autoFetch: boolean;
+    _data: GristData;
+    _config: GristConfig;
+    private _showSpinner;
+    private dataProvider?;
+    private pulltorefreshHandle?;
+    report: DataReportComponent;
+    private wrap;
+    get mode(): 'REPORT';
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private resetPullToRefresh;
+    private setPullToRefresh;
+    firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    fetch(reset?: boolean): Promise<void>;
+    updated(changes: PropertyValues<this>): Promise<void>;
+    get dirtyData(): any;
+    showSpinner(): void;
+    hideSpinner(): void;
+    focus(): void;
+    /**
+     * Forced internal data to be reflected on the screen
+     * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
+  Therefore, it will be deprecated.
+     * @deprecated
+     * @method
+     */
+    refresh(): void;
+    reset(): void;
+    sortByGroups(sortedRecords: GristRecord[]): any[];
+    checkDirties(): void;
+}