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

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

@@ -1,17 +1,17 @@
 import { __decorate } from "tslib";
 import './data-grid-field';
-import { LitElement, css, html } from 'lit';
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { RecordViewHandler } from '../record-view/record-view-handler';
+import debounce from 'lodash-es/debounce';
 import { TooltipStyles } from '@operato/styles';
+import { sleep } from '@operato/utils';
+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 { sleep } from '@operato/utils';
-import { supportsPassive } from '../utils';
 const THRESHOLD = 300;
 const DATA_PADDING = 3;
 const ROW_HEIGHT = 40;
@@ -141,6 +141,13 @@ let DataGridBody = class DataGridBody extends LitElement {
                 this.addEventListener('keydown', this._focusedListener);
             }
         });
+        this.addEventListener('set-select-block', async (e) => {
+            e.stopPropagation();
+            const { startRow = -1, startColumn = -1, endRow = -1, endColumn = -1 } = e.detail || {};
+            const start = this.getFieldByIndex(startRow, startColumn);
+            const end = this.getFieldByIndex(endRow, endColumn);
+            this.setSelectBlock(start, end);
+        });
         this.renderRoot.addEventListener('mousemove', (event) => {
             var _a;
             const e = event;
@@ -151,16 +158,14 @@ let DataGridBody = class DataGridBody extends LitElement {
             const field = e.target;
             if (!this._selectBlock || this._selectBlockWillBeReset) {
                 this._selectBlockWillBeReset = false;
-                this._selectBlock = { start: field };
-                this.dispatchEvent(new CustomEvent('focus-change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: undefined
-                    // detail: {
-                    //   row: field!.rowIndex,
-                    //   column: field!.columnIndex
-                    // }
-                }));
+                this.setSelectBlock(field);
+                // this.dispatchEvent(
+                //   new CustomEvent('focus-change', {
+                //     bubbles: true,
+                //     composed: true,
+                //     detail: undefined
+                //   })
+                // )
                 return;
             }
             var { start, end } = this._selectBlock || {};
@@ -173,22 +178,7 @@ let DataGridBody = class DataGridBody extends LitElement {
             }
             if (start && end !== field) {
                 end = field;
-                const left = start.columnIndex < end.columnIndex ? start : end;
-                const right = left === start ? end : start;
-                const top = start.rowIndex < end.rowIndex ? start : end;
-                const bottom = top === start ? end : start;
-                const { offsetLeft } = left;
-                const { offsetTop } = top;
-                const width = right.offsetLeft - offsetLeft + right.offsetWidth;
-                const height = bottom.offsetTop - offsetTop + bottom.offsetHeight;
-                this.style.setProperty('--select-box-left', offsetLeft - 1 + 'px');
-                this.style.setProperty('--select-box-top', offsetTop - 1 + 'px');
-                this.style.setProperty('--select-box-width', width + 'px');
-                this.style.setProperty('--select-box-height', height + 'px');
-                this._selectBlock = {
-                    start,
-                    end
-                };
+                this.setSelectBlock(start, end);
             }
         });
         this.renderRoot.addEventListener('mouseup', (event) => {
@@ -201,6 +191,13 @@ let DataGridBody = class DataGridBody extends LitElement {
         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));
     }
+    getFieldByIndex(rowIndex, columnIndex) {
+        if (rowIndex < 0) {
+            return;
+        }
+        var columns = this.columns.filter(column => !column.hidden).length;
+        return this.renderRoot.children.item(rowIndex * (columns + 1) /* 1 means last dummy column */ + ((columnIndex + columns) % columns));
+    }
     _onWheelEvent(e) {
         if (this.scrollHeight <= this.clientHeight) {
             var delta = Math.max(-1, Math.min(1, e.deltaY || 0));
@@ -234,7 +231,7 @@ let DataGridBody = class DataGridBody extends LitElement {
             if (!element) {
                 return;
             }
-            this._selectBlock = undefined;
+            this.setSelectBlock();
             let { top, left } = calcScrollPos(this, element);
             // TODO this.scroll()을 사용하면, 효과가 좋으나 left 계산에 문제가 있는 것 같음.
             // this.scroll({
@@ -278,9 +275,14 @@ let DataGridBody = class DataGridBody extends LitElement {
         });
     }
     getSelectedBlockValues() {
+        var _a;
         var { start, end } = this._selectBlock || {};
         if (!(start && end)) {
             start = this.focusedField;
+            if (typeof start.value === 'string' || typeof start.value === 'number') {
+                const selection = document.getSelection();
+                return (selection === null || selection === void 0 ? void 0 : selection.toString()) || ((_a = this.focusedField) === null || _a === void 0 ? void 0 : _a.value);
+            }
             end = start;
         }
         if (start && end) {
@@ -296,13 +298,14 @@ let DataGridBody = class DataGridBody extends LitElement {
                 return columnArray.map((start, index) => {
                     const columnIndex = start + index;
                     const column = columns[columnIndex];
-                    return record[column.name];
+                    return record === null || record === void 0 ? void 0 : record[column.name];
                 });
             });
         }
     }
     async copy() {
-        await navigator.clipboard.writeText(JSON.stringify(this.getSelectedBlockValues()));
+        const copied = this.getSelectedBlockValues();
+        await navigator.clipboard.writeText(copied instanceof Array ? JSON.stringify(this.getSelectedBlockValues()) : copied);
         const selectBlock = this.selectBlock;
         if (selectBlock) {
             selectBlock.setAttribute('data-tooltip', 'copied to clipboard!');
@@ -323,9 +326,18 @@ let DataGridBody = class DataGridBody extends LitElement {
             const { row, column } = this.focused;
             const { records } = this.data;
             const columns = this.columns.filter(column => !column.hidden);
-            const block = JSON.parse(text);
-            if (!(block instanceof Array)) {
-                return;
+            var block;
+            try {
+                var parsed = JSON.parse(text);
+            }
+            catch (ex) {
+                parsed = text;
+            }
+            if (!(parsed instanceof Array)) {
+                block = [[parsed]];
+            }
+            else {
+                block = parsed;
             }
             block.forEach((record, rowIndex) => {
                 if (!(record instanceof Array)) {
@@ -337,7 +349,7 @@ let DataGridBody = class DataGridBody extends LitElement {
                 }
                 record.map((item, columnIndex) => {
                     const targetColumn = columns[column + columnIndex];
-                    if (!targetColumn.gutterName) {
+                    if (targetColumn && !targetColumn.gutterName && targetColumn.record.editable) {
                         this.dispatchEvent(new CustomEvent('field-change', {
                             bubbles: true,
                             composed: true,
@@ -357,6 +369,28 @@ let DataGridBody = class DataGridBody extends LitElement {
             console.error(e);
         }
     }
+    setSelectBlock(start, end) {
+        this._selectBlock = start && { start, end };
+        if (start && end && start !== end) {
+            const left = start.columnIndex < end.columnIndex ? start : end;
+            const right = left === start ? end : start;
+            const top = start.rowIndex < end.rowIndex ? start : end;
+            const bottom = top === start ? end : start;
+            const { offsetLeft } = left;
+            const { offsetTop } = top;
+            const width = right.offsetLeft - offsetLeft + right.offsetWidth;
+            const height = bottom.offsetTop - offsetTop + bottom.offsetHeight;
+            this.style.setProperty('--select-box-left', offsetLeft - 1 + 'px');
+            this.style.setProperty('--select-box-top', offsetTop - 1 + 'px');
+            this.style.setProperty('--select-box-width', width + 'px');
+            this.style.setProperty('--select-box-height', height + 'px');
+            this.dispatchEvent(new CustomEvent('focus-change', {
+                bubbles: true,
+                composed: true,
+                detail: undefined
+            }));
+        }
+    }
 };
 DataGridBody.styles = [
     TooltipStyles,

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, GristRecord } from '../types'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { DataGridField } from './data-grid-field'\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { TooltipStyles } from '@operato/styles'\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 { sleep } from '@operato/utils'\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 = [\n    TooltipStyles,\n    dataGridBodyStyle,\n    css`\n      [select-block] {\n        position: absolute;\n        left: var(--select-box-left);\n        top: var(--select-box-top);\n        width: var(--select-box-width);\n        height: var(--select-box-height);\n        border: var(--grid-record-focused-cell-border);\n        background-image: var(--focused-background-image);\n        pointer-events: none;\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: 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  @state() _selectBlock?: {\n    start: DataGridField\n    end?: DataGridField\n  }\n\n  @query('[select-block]') selectBlock?: HTMLDivElement\n  @query('ox-grid-field[focused]') focusedField?: DataGridField\n\n  private _focusedListener?: (e: KeyboardEvent) => void\n  private _recordView?: any\n  private _recordViewRow?: number\n  private _selectBlockWillBeReset: boolean = true\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    const { start, end } = this._selectBlock || {}\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      ${start && end ? html` <div select-block></div> ` : html``}\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        this.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        this.addEventListener('keydown', this._focusedListener)\n      }\n    })\n\n    this.renderRoot.addEventListener('mousemove', (event: Event) => {\n      const e = event as MouseEvent\n      if (e.buttons !== 1) {\n        this._selectBlockWillBeReset = true\n        return\n      }\n\n      const field = e.target as DataGridField\n\n      if (!this._selectBlock || this._selectBlockWillBeReset) {\n        this._selectBlockWillBeReset = false\n        this._selectBlock = { start: field }\n\n        this.dispatchEvent(\n          new CustomEvent('focus-change', {\n            bubbles: true,\n            composed: true,\n            detail: undefined\n            // detail: {\n            //   row: field!.rowIndex,\n            //   column: field!.columnIndex\n            // }\n          })\n        )\n\n        return\n      }\n\n      var { start, end } = this._selectBlock || {}\n\n      if (start !== field && !end) {\n        /* cancel all selected text */\n        window.getSelection()?.removeAllRanges()\n      }\n\n      if (start === field && !end) {\n        return\n      }\n\n      if (start && end !== field) {\n        end = field\n\n        const left = start.columnIndex < end.columnIndex ? start : end\n        const right = left === start ? end : start\n        const top = start.rowIndex < end.rowIndex ? start : end\n        const bottom = top === start ? end : start\n\n        const { offsetLeft } = left\n        const { offsetTop } = top\n        const width = right.offsetLeft - offsetLeft + right.offsetWidth\n        const height = bottom.offsetTop - offsetTop + bottom.offsetHeight\n\n        this.style.setProperty('--select-box-left', offsetLeft - 1 + 'px')\n        this.style.setProperty('--select-box-top', offsetTop - 1 + 'px')\n        this.style.setProperty('--select-box-width', width + 'px')\n        this.style.setProperty('--select-box-height', height + 'px')\n\n        this._selectBlock = {\n          start,\n          end\n        }\n      }\n    })\n\n    this.renderRoot.addEventListener('mouseup', (event: Event) => {\n      this._selectBlockWillBeReset = true\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      this._selectBlock = undefined\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  getSelectedBlockValues(): Array<Array<any>> | undefined {\n    var { start, end } = this._selectBlock || {}\n\n    if (!(start && end)) {\n      start = this.focusedField\n      end = start\n    }\n\n    if (start && end) {\n      const startRowIndex = start.rowIndex < end.rowIndex ? start.rowIndex : end.rowIndex\n      const endRowIndex = start.rowIndex < end.rowIndex ? end.rowIndex : start.rowIndex\n      const startColumnIndex = start.columnIndex < end.columnIndex ? start.columnIndex : end.columnIndex\n      const endColumnIndex = start.columnIndex < end.columnIndex ? end.columnIndex : start.columnIndex\n\n      const columnArray = new Array(endColumnIndex - startColumnIndex + 1).fill(startColumnIndex)\n      const columns = this.columns.filter(column => !column.hidden)\n\n      return new Array(endRowIndex - startRowIndex + 1).fill(startRowIndex).map((start, index) => {\n        const rowIndex = start + index\n        const record = this.data.records[rowIndex]\n\n        return columnArray.map((start, index) => {\n          const columnIndex = start + index\n          const column = columns[columnIndex]\n\n          return record[column.name]\n        })\n      })\n    }\n  }\n\n  async copy() {\n    await navigator.clipboard.writeText(JSON.stringify(this.getSelectedBlockValues()))\n\n    const selectBlock = this.selectBlock\n    if (selectBlock) {\n      selectBlock.setAttribute('data-tooltip', 'copied to clipboard!')\n      selectBlock.style.backgroundColor = 'red'\n      selectBlock.style.opacity = '0.5'\n      await sleep(500)\n      selectBlock.removeAttribute('data-tooltip')\n      selectBlock.style.backgroundColor = ''\n      selectBlock.style.opacity = ''\n    }\n  }\n\n  async paste() {\n    try {\n      const text = await navigator.clipboard.readText()\n      if (!text) {\n        return\n      }\n\n      const { row, column } = this.focused\n      const { records } = this.data\n      const columns = this.columns.filter(column => !column.hidden)\n\n      const block = JSON.parse(text)\n\n      if (!(block instanceof Array)) {\n        return\n      }\n\n      block.forEach((record, rowIndex) => {\n        if (!(record instanceof Array)) {\n          return\n        }\n\n        var targetRecord = records[row + rowIndex] || { __dirty__: '+' }\n        if (row + rowIndex >= records.length) {\n          records.push(targetRecord)\n        }\n\n        record.map((item, columnIndex) => {\n          const targetColumn = columns[column + columnIndex]\n          if (!targetColumn.gutterName) {\n            this.dispatchEvent(\n              new CustomEvent('field-change', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  before: targetRecord[targetColumn.name],\n                  after: item,\n                  column: targetColumn,\n                  record: targetRecord,\n                  row: row + rowIndex\n                }\n              })\n            )\n          }\n        })\n      })\n    } catch (e) {\n      console.error(e)\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 { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport debounce from 'lodash-es/debounce'\n\nimport { TooltipStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\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 { DataGridField } from './data-grid-field'\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 = [\n    TooltipStyles,\n    dataGridBodyStyle,\n    css`\n      [select-block] {\n        position: absolute;\n        left: var(--select-box-left);\n        top: var(--select-box-top);\n        width: var(--select-box-width);\n        height: var(--select-box-height);\n        border: var(--grid-record-focused-cell-border);\n        background-image: var(--focused-background-image);\n        pointer-events: none;\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: 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  @state() _selectBlock?: {\n    start: DataGridField\n    end?: DataGridField\n  }\n\n  @query('[select-block]') selectBlock?: HTMLDivElement\n  @query('ox-grid-field[focused]') focusedField?: DataGridField\n\n  private _focusedListener?: (e: KeyboardEvent) => void\n  private _recordView?: any\n  private _recordViewRow?: number\n  private _selectBlockWillBeReset: boolean = true\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    const { start, end } = this._selectBlock || {}\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      ${start && end ? html` <div select-block></div> ` : html``}\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        this.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        this.addEventListener('keydown', this._focusedListener)\n      }\n    })\n\n    this.addEventListener('set-select-block', async e => {\n      e.stopPropagation()\n\n      const { startRow = -1, startColumn = -1, endRow = -1, endColumn = -1 } = ((e as CustomEvent).detail as any) || {}\n\n      const start = this.getFieldByIndex(startRow, startColumn) as DataGridField\n      const end = this.getFieldByIndex(endRow, endColumn) as DataGridField\n\n      this.setSelectBlock(start, end)\n    })\n\n    this.renderRoot.addEventListener('mousemove', (event: Event) => {\n      const e = event as MouseEvent\n      if (e.buttons !== 1) {\n        this._selectBlockWillBeReset = true\n        return\n      }\n\n      const field = e.target as DataGridField\n\n      if (!this._selectBlock || this._selectBlockWillBeReset) {\n        this._selectBlockWillBeReset = false\n        this.setSelectBlock(field)\n\n        // this.dispatchEvent(\n        //   new CustomEvent('focus-change', {\n        //     bubbles: true,\n        //     composed: true,\n        //     detail: undefined\n        //   })\n        // )\n\n        return\n      }\n\n      var { start, end } = this._selectBlock || {}\n\n      if (start !== field && !end) {\n        /* cancel all selected text */\n        window.getSelection()?.removeAllRanges()\n      }\n\n      if (start === field && !end) {\n        return\n      }\n\n      if (start && end !== field) {\n        end = field\n\n        this.setSelectBlock(start, end)\n      }\n    })\n\n    this.renderRoot.addEventListener('mouseup', (event: Event) => {\n      this._selectBlockWillBeReset = true\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  getFieldByIndex(rowIndex: number, columnIndex: number) {\n    if (rowIndex < 0) {\n      return\n    }\n\n    var columns = this.columns.filter(column => !column.hidden).length\n\n    return this.renderRoot.children.item(\n      rowIndex * (columns + 1) /* 1 means last dummy column */ + ((columnIndex + columns) % columns)\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      this.setSelectBlock()\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  getSelectedBlockValues(): Array<Array<any>> | any | undefined {\n    var { start, end } = this._selectBlock || {}\n\n    if (!(start && end)) {\n      start = this.focusedField\n\n      if (typeof start!.value === 'string' || typeof start!.value === 'number') {\n        const selection = document.getSelection()\n        return selection?.toString() || this.focusedField?.value\n      }\n\n      end = start\n    }\n\n    if (start && end) {\n      const startRowIndex = start.rowIndex < end.rowIndex ? start.rowIndex : end.rowIndex\n      const endRowIndex = start.rowIndex < end.rowIndex ? end.rowIndex : start.rowIndex\n      const startColumnIndex = start.columnIndex < end.columnIndex ? start.columnIndex : end.columnIndex\n      const endColumnIndex = start.columnIndex < end.columnIndex ? end.columnIndex : start.columnIndex\n\n      const columnArray = new Array(endColumnIndex - startColumnIndex + 1).fill(startColumnIndex)\n      const columns = this.columns.filter(column => !column.hidden)\n\n      return new Array(endRowIndex - startRowIndex + 1).fill(startRowIndex).map((start, index) => {\n        const rowIndex = start + index\n        const record = this.data.records[rowIndex]\n\n        return columnArray.map((start, index) => {\n          const columnIndex = start + index\n          const column = columns[columnIndex]\n\n          return record?.[column.name]\n        })\n      })\n    }\n  }\n\n  async copy() {\n    const copied = this.getSelectedBlockValues()\n    await navigator.clipboard.writeText(\n      copied instanceof Array ? JSON.stringify(this.getSelectedBlockValues()) : copied\n    )\n\n    const selectBlock = this.selectBlock\n    if (selectBlock) {\n      selectBlock.setAttribute('data-tooltip', 'copied to clipboard!')\n      selectBlock.style.backgroundColor = 'red'\n      selectBlock.style.opacity = '0.5'\n      await sleep(500)\n      selectBlock.removeAttribute('data-tooltip')\n      selectBlock.style.backgroundColor = ''\n      selectBlock.style.opacity = ''\n    }\n  }\n\n  async paste() {\n    try {\n      const text = await navigator.clipboard.readText()\n      if (!text) {\n        return\n      }\n\n      const { row, column } = this.focused\n      const { records } = this.data\n      const columns = this.columns.filter(column => !column.hidden)\n      var block: Array<Array<any>>\n\n      try {\n        var parsed = JSON.parse(text)\n      } catch (ex) {\n        parsed = text\n      }\n\n      if (!(parsed instanceof Array)) {\n        block = [[parsed]]\n      } else {\n        block = parsed\n      }\n\n      block.forEach((record, rowIndex) => {\n        if (!(record instanceof Array)) {\n          return\n        }\n\n        var targetRecord = records[row + rowIndex] || { __dirty__: '+' }\n        if (row + rowIndex >= records.length) {\n          records.push(targetRecord)\n        }\n\n        record.map((item, columnIndex) => {\n          const targetColumn = columns[column + columnIndex]\n          if (targetColumn && !targetColumn.gutterName && targetColumn.record.editable) {\n            this.dispatchEvent(\n              new CustomEvent('field-change', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  before: targetRecord[targetColumn.name],\n                  after: item,\n                  column: targetColumn,\n                  record: targetRecord,\n                  row: row + rowIndex\n                }\n              })\n            )\n          }\n        })\n      })\n    } catch (e) {\n      console.error(e)\n    }\n  }\n\n  setSelectBlock(start?: DataGridField, end?: DataGridField) {\n    this._selectBlock = start && { start, end }\n\n    if (start && end && start !== end) {\n      const left = start.columnIndex < end.columnIndex ? start : end\n      const right = left === start ? end : start\n      const top = start.rowIndex < end.rowIndex ? start : end\n      const bottom = top === start ? end : start\n\n      const { offsetLeft } = left\n      const { offsetTop } = top\n      const width = right.offsetLeft - offsetLeft + right.offsetWidth\n      const height = bottom.offsetTop - offsetTop + bottom.offsetHeight\n\n      this.style.setProperty('--select-box-left', offsetLeft - 1 + 'px')\n      this.style.setProperty('--select-box-top', offsetTop - 1 + 'px')\n      this.style.setProperty('--select-box-width', width + 'px')\n      this.style.setProperty('--select-box-height', height + 'px')\n\n      this.dispatchEvent(\n        new CustomEvent('focus-change', {\n          bubbles: true,\n          composed: true,\n          detail: undefined\n        })\n      )\n    }\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
-import { ColumnConfig, GristRecord } from '../types';
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ColumnConfig, GristRecord } from '../types';
 export declare class DataGridField extends LitElement {
     static styles: import("lit").CSSResult[];
     align: string;

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TooltipStyles } from '@operato/styles';
 import { ZERO_COLUMN } from '../configure/zero-config';

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 { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\nimport { ZERO_COLUMN } from '../configure/zero-config'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n  static styles = [\n    TooltipStyles,\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        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      pre {\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', '')\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 { TooltipStyles } from '@operato/styles'\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    TooltipStyles,\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        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      pre {\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', '')\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-footer.d.ts

@@ -1,10 +1,10 @@
 import '@material/mwc-icon';
-import { GristConfig, GristData } from '../types';
 import { LitElement } from 'lit';
+import { GristData, PaginationConfig } from '../types';
 export declare class DataGridFooter extends LitElement {
     static styles: import("lit").CSSResult[];
-    config: GristConfig;
     data: GristData;
+    pagination: PaginationConfig;
     _gotoPage(page: number): void;
     _changeLimit(limit: number): void;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -1,18 +1,17 @@
 import { __decorate } from "tslib";
 import '@material/mwc-icon';
-import { LitElement, css, html } from 'lit';
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-const DEFAULT_PAGES = [20, 30, 50, 100];
-const DEFAULT_LIMIT = 30;
+import { ZERO_DATA, ZERO_PAGES } from '../configure/zero-config';
 let DataGridFooter = class DataGridFooter extends LitElement {
     constructor() {
         super(...arguments);
-        this.config = ZERO_CONFIG;
         this.data = ZERO_DATA;
+        this.pagination = {};
     }
     _gotoPage(page) {
-        var { limit = 20, total = 0 } = this.data;
+        var { pages = ZERO_PAGES } = this.pagination || {};
+        var { limit = pages[0], total = 0 } = this.data;
         if (page > Math.ceil(total / limit) || page <= 0) {
             return;
         }
@@ -22,8 +21,8 @@ let DataGridFooter = class DataGridFooter extends LitElement {
         this.dispatchEvent(new CustomEvent('limit-change', { bubbles: true, composed: true, detail: limit }));
     }
     render() {
-        var { records = [], page = 1, limit = DEFAULT_LIMIT, total = 0 } = this.data;
-        var { pages = DEFAULT_PAGES } = this.config.pagination || {};
+        var { pages = ZERO_PAGES } = this.pagination || {};
+        var { records = [], page = 1, limit = pages[0], total = 0 } = this.data;
         var begin = records.length == 0 ? 0 : limit * (page - 1) + 1;
         var end = records.length == 0 ? 0 : begin + records.length - 1;
         var totalPage = Math.max(1, Math.ceil(total / limit));
@@ -95,10 +94,10 @@ DataGridFooter.styles = [
 ];
 __decorate([
     property()
-], DataGridFooter.prototype, "config", void 0);
+], DataGridFooter.prototype, "data", void 0);
 __decorate([
     property()
-], DataGridFooter.prototype, "data", void 0);
+], DataGridFooter.prototype, "pagination", void 0);
 DataGridFooter = __decorate([
     customElement('ox-grid-footer')
 ], DataGridFooter);

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

@@ -1 +1 @@
-{"version":3,"file":"data-grid-footer.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-footer.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAG3B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAA;AACvC,MAAM,aAAa,GAAG,EAAE,CAAA;AAGxB,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAgDc,WAAM,GAAgB,WAAW,CAAA;QACjC,SAAI,GAAc,SAAS,CAAA;IA0CzC,CAAC;IAxCC,SAAS,CAAC,IAAY;QACpB,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAEzC,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE;YAChD,OAAM;SACP;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;IAED,YAAY,CAAC,KAAa;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IACvG,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,aAAa,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAC5E,IAAI,EAAE,KAAK,GAAG,aAAa,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,EAAE,CAAA;QAE5D,IAAI,KAAK,GAAG,OAAO,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAC5D,IAAI,GAAG,GAAG,OAAO,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;QAC9D,IAAI,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAA;QAErD,OAAO,IAAI,CAAA;qBACM,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;qBAC3C,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;2BAC5C,IAAI,yBAAyB,SAAS;qBAC5C,IAAI,IAAI,SAAS,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;qBAC1D,IAAI,IAAI,SAAS,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;;;;;UAKtE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,iBAAiB,KAAK,IAAI,IAAI,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC;;;;cAIxG,KAAK,MAAM,GAAG;;oBAER,KAAK,IAAI,CAAC;KACzB,CAAA;IACH,CAAC;CACF,CAAA;AA1FQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;CACF,CAAA;AAEW;IAAX,QAAQ,EAAE;8CAAkC;AACjC;IAAX,QAAQ,EAAE;4CAA4B;AAjD5B,cAAc;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACnB,cAAc,CA2F1B;SA3FY,cAAc","sourcesContent":["import '@material/mwc-icon'\n\nimport { GristConfig, GristData } from '../types'\nimport { LitElement, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nconst DEFAULT_PAGES = [20, 30, 50, 100]\nconst DEFAULT_LIMIT = 30\n\n@customElement('ox-grid-footer')\nexport class DataGridFooter extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        overflow: hidden;\n\n        padding: var(--grid-footer-padding);\n        background-color: var(--grid-footer-background-color);\n        font-size: var(--grid-footer-font-size);\n      }\n\n      :host * {\n        white-space: nowrap;\n        overflow: hidden;\n        padding: 0 2px;\n\n        text-overflow: ellipsis;\n        text-align: center;\n        color: var(--grid-footer-color);\n      }\n\n      .filler {\n        flex: 1;\n      }\n\n      mwc-icon {\n        font-size: 1.5em;\n        vertical-align: middle;\n      }\n\n      .limit a {\n        color: var(--grid-footer-limit-color);\n      }\n\n      .limit a[selected] {\n        color: var(--grid-footer-color);\n        font-weight: bold;\n        text-decoration: underline;\n      }\n\n      a[inactive] * {\n        color: var(--grid-footer-inactive-color);\n      }\n    `\n  ]\n\n  @property() config: GristConfig = ZERO_CONFIG\n  @property() data: GristData = ZERO_DATA\n\n  _gotoPage(page: number) {\n    var { limit = 20, total = 0 } = this.data\n\n    if (page > Math.ceil(total / limit) || page <= 0) {\n      return\n    }\n    this.dispatchEvent(new CustomEvent('page-change', { bubbles: true, composed: true, detail: page }))\n  }\n\n  _changeLimit(limit: number) {\n    this.dispatchEvent(new CustomEvent('limit-change', { bubbles: true, composed: true, detail: limit }))\n  }\n\n  render() {\n    var { records = [], page = 1, limit = DEFAULT_LIMIT, total = 0 } = this.data\n    var { pages = DEFAULT_PAGES } = this.config.pagination || {}\n\n    var begin = records.length == 0 ? 0 : limit * (page - 1) + 1\n    var end = records.length == 0 ? 0 : begin + records.length - 1\n    var totalPage = Math.max(1, Math.ceil(total / limit))\n\n    return html`\n      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(1)}><mwc-icon>skip_previous</mwc-icon></a>\n      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(page - 1)}><mwc-icon>navigate_before</mwc-icon></a>\n      <span>page <strong>${page}</strong>&nbsp;/&nbsp;${totalPage}</span>\n      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(page + 1)}><mwc-icon>navigate_next</mwc-icon></a>\n      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(totalPage)}><mwc-icon>skip_next</mwc-icon></a>\n\n      <span class=\"filler\"></span>\n\n      <span class=\"limit\">\n        ${pages.map(size => html` <a ?selected=${limit == size} @click=${() => this._changeLimit(size)}>${size}</a> `)}\n        records\n      </span>\n      <span>&nbsp;</span>\n      <span>${begin} - ${end}</span>\n      <span>&nbsp;/&nbsp;</span>\n      <span>total ${total || 0} records.</span>\n    `\n  }\n}\n"]}
+{"version":3,"file":"data-grid-footer.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-footer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_DATA, ZERO_PAGES } from '../configure/zero-config'\nimport { GristData, PaginationConfig } from '../types'\n\n@customElement('ox-grid-footer')\nexport class DataGridFooter extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        overflow: hidden;\n\n        padding: var(--grid-footer-padding);\n        background-color: var(--grid-footer-background-color);\n        font-size: var(--grid-footer-font-size);\n      }\n\n      :host * {\n        white-space: nowrap;\n        overflow: hidden;\n        padding: 0 2px;\n\n        text-overflow: ellipsis;\n        text-align: center;\n        color: var(--grid-footer-color);\n      }\n\n      .filler {\n        flex: 1;\n      }\n\n      mwc-icon {\n        font-size: 1.5em;\n        vertical-align: middle;\n      }\n\n      .limit a {\n        color: var(--grid-footer-limit-color);\n      }\n\n      .limit a[selected] {\n        color: var(--grid-footer-color);\n        font-weight: bold;\n        text-decoration: underline;\n      }\n\n      a[inactive] * {\n        color: var(--grid-footer-inactive-color);\n      }\n    `\n  ]\n\n  @property() data: GristData = ZERO_DATA\n  @property() pagination: PaginationConfig = {}\n\n  _gotoPage(page: number) {\n    var { pages = ZERO_PAGES } = this.pagination || {}\n    var { limit = pages[0], total = 0 } = this.data\n\n    if (page > Math.ceil(total / limit) || page <= 0) {\n      return\n    }\n    this.dispatchEvent(new CustomEvent('page-change', { bubbles: true, composed: true, detail: page }))\n  }\n\n  _changeLimit(limit: number) {\n    this.dispatchEvent(new CustomEvent('limit-change', { bubbles: true, composed: true, detail: limit }))\n  }\n\n  render() {\n    var { pages = ZERO_PAGES } = this.pagination || {}\n    var { records = [], page = 1, limit = pages[0], total = 0 } = this.data\n\n    var begin = records.length == 0 ? 0 : limit * (page - 1) + 1\n    var end = records.length == 0 ? 0 : begin + records.length - 1\n    var totalPage = Math.max(1, Math.ceil(total / limit))\n\n    return html`\n      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(1)}><mwc-icon>skip_previous</mwc-icon></a>\n      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(page - 1)}><mwc-icon>navigate_before</mwc-icon></a>\n      <span>page <strong>${page}</strong>&nbsp;/&nbsp;${totalPage}</span>\n      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(page + 1)}><mwc-icon>navigate_next</mwc-icon></a>\n      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(totalPage)}><mwc-icon>skip_next</mwc-icon></a>\n\n      <span class=\"filler\"></span>\n\n      <span class=\"limit\">\n        ${pages.map(size => html` <a ?selected=${limit == size} @click=${() => this._changeLimit(size)}>${size}</a> `)}\n        records\n      </span>\n      <span>&nbsp;</span>\n      <span>${begin} - ${end}</span>\n      <span>&nbsp;/&nbsp;</span>\n      <span>total ${total || 0} records.</span>\n    `\n  }\n}\n"]}

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

@@ -1,14 +1,13 @@
 import '@operato/popup/ox-popup.js';
 import '@material/mwc-icon';
-import { LitElement, PropertyValues } from 'lit';
-import { ColumnConfig, GristConfig, GristData } from '../types';
+import { LitElement } from 'lit';
+import { ColumnConfig, FilterValue, GristData, SortersConfig } from '../types';
 export declare class DataGridHeader extends LitElement {
     static styles: import("lit").CSSResult[];
-    config: GristConfig;
     columns: ColumnConfig[];
     data: GristData;
-    private _sorters;
-    private _filters;
+    sorters: SortersConfig;
+    filters: FilterValue[];
     private _lastAccVal?;
     private _throttledNotifier?;
     connectedCallback(): void;
@@ -16,7 +15,6 @@ export declare class DataGridHeader extends LitElement {
     _renderHeader(column: ColumnConfig): import("lit-html").TemplateResult<1>;
     _renderSortHeader(column: ColumnConfig): import("lit-html").TemplateResult<1>;
     _renderFilterHeader(column: ColumnConfig): import("lit-html").TemplateResult<1>;
-    updated(changes: PropertyValues<this>): void;
     _changeSort(column: ColumnConfig): void;
     _accumalate(x: number): number;
     _notifyWidthChange(idx: number, width: number): void;