@operato/data-grist 0.3.15 → 0.3.16

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

@@ -1,14 +1,12 @@
 import { __decorate } from "tslib";
 import '@material/mwc-icon';
 import './record-partial';
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
-let DataList = class DataList extends LitElement {
+import { DataManipulator } from '../data-manipulator';
+let DataList = class DataList extends DataManipulator {
     constructor() {
         super(...arguments);
-        this.config = ZERO_CONFIG;
-        this.data = ZERO_DATA;
         this.isTop = false;
         this._records = [];
         this._total = 0;
@@ -31,126 +29,6 @@ let DataList = class DataList extends LitElement {
             }
             this.isTop = this.scrollTop == 0;
         });
-        this.addEventListener('select-record-change', e => {
-            var { records: selectedRecords, added = [], removed = [] } = e.detail;
-            var { records } = this.data || {};
-            var { selectable = false } = this.config.rows || {};
-            if (!records || !selectable) {
-                return;
-            }
-            else if (selectable && !selectable.multiple) {
-                records.forEach(record => (record['__selected__'] = false));
-            }
-            if (selectedRecords) {
-                records.forEach(record => (record['__selected__'] = false));
-                selectedRecords.forEach(record => (record['__selected__'] = true));
-            }
-            else {
-                removed.forEach(record => (record['__selected__'] = false));
-                added.forEach(record => (record['__selected__'] = true));
-            }
-            this.requestUpdate();
-        });
-        /* field change processing */
-        this.addEventListener('field-change', e => {
-            var { after, before, column, record, row } = e.detail;
-            /* compare changes */
-            if (after === before) {
-                return;
-            }
-            var validation = column.validation;
-            if (validation && typeof validation == 'function') {
-                if (!validation.call(this, after, before, record, column)) {
-                    return;
-                }
-            }
-            this.onRecordChanged({ [column.name]: after }, row, column);
-        });
-        /* record reset processing */
-        this.addEventListener('record-reset', e => {
-            var { record, row } = e.detail;
-            this.onRecordChanged(record['__origin__'], row, null);
-        });
-    }
-    onRecordChanged(recordData, row, column /* TODO column should be removed */) {
-        // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.
-        /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */
-        var records = this.data.records;
-        var beforeRecord = records[row];
-        var afterRecord;
-        var wantToDelete = false;
-        var wantToAppend = false;
-        if (!recordData) {
-            if (!beforeRecord) {
-                /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */
-                this.requestUpdate();
-                return;
-            }
-            else {
-                /*
-                 * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,
-                 * 삭제하고자 하는 의도로 이해된다. (주의 필요)
-                 */
-                if (beforeRecord['__dirty__'] == '+') {
-                    wantToDelete = true;
-                }
-                else {
-                    afterRecord = {
-                        ...beforeRecord,
-                        __dirty__: '-'
-                    };
-                }
-            }
-        }
-        else {
-            if (!beforeRecord) {
-                /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */
-                afterRecord = {
-                    ...recordData,
-                    __dirty__: '+'
-                };
-                wantToAppend = true;
-            }
-            else {
-                let beforeDirty = beforeRecord['__dirty__'];
-                if (beforeDirty == '+') {
-                    /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */
-                    afterRecord = {
-                        ...beforeRecord,
-                        ...recordData,
-                        __dirty__: '+'
-                    };
-                }
-                else {
-                    /* 기존에 레코드가 있었으며 계속 수정중이다. */
-                    afterRecord = {
-                        ...beforeRecord,
-                        ...recordData,
-                        __dirty__: 'M'
-                    };
-                }
-            }
-        }
-        if (wantToAppend) {
-            records.push(afterRecord);
-        }
-        else if (wantToDelete) {
-            records.splice(row, 1);
-        }
-        else {
-            records.splice(row, 1, afterRecord);
-        }
-        this.dispatchEvent(new CustomEvent('record-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                before: beforeRecord,
-                after: afterRecord,
-                column,
-                row
-            }
-        }));
-        this.requestUpdate();
     }
     updated(changes) {
         if (changes.has('config')) {
@@ -225,12 +103,6 @@ DataList.styles = [
       }
     `
 ];
-__decorate([
-    property({ type: Object })
-], DataList.prototype, "config", void 0);
-__decorate([
-    property({ type: Object })
-], DataList.prototype, "data", void 0);
 __decorate([
     property({ type: Boolean })
 ], DataList.prototype, "isTop", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"data-list.js","sourceRoot":"","sources":["../../../src/data-list/data-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-partial'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'\n\n@customElement('ox-list')\nexport class DataList extends LitElement {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-list-background-color);\n        overflow-y: auto;\n      }\n\n      :nth-child(even) {\n        background-color: var(--theme-white-color);\n      }\n\n      [selected-row] {\n        background-color: var(--data-list-selected-background-color);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-list-fab-position-vertical);\n        right: var(--data-list-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-list-fab-color);\n        box-shadow: var(--data-list-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Boolean }) isTop: boolean = false\n  @property({ type: Array }) private _records: GristRecord[] = []\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n\n    this.addEventListener('select-record-change', e => {\n      var {\n        records: selectedRecords,\n        added = [],\n        removed = []\n      } = (e as CustomEvent).detail as {\n        records: GristRecord[]\n        added: GristRecord[]\n        removed: GristRecord[]\n      }\n      var { records } = this.data || {}\n      var { selectable = false } = this.config.rows || {}\n\n      if (!records || !selectable) {\n        return\n      } else if (selectable && !selectable.multiple) {\n        records.forEach(record => (record['__selected__'] = false))\n      }\n\n      if (selectedRecords) {\n        records.forEach(record => (record['__selected__'] = false))\n        selectedRecords.forEach(record => (record['__selected__'] = true))\n      } else {\n        removed.forEach(record => (record['__selected__'] = false))\n        added.forEach(record => (record['__selected__'] = true))\n      }\n\n      this.requestUpdate()\n    })\n\n    /* field change processing */\n    this.addEventListener('field-change', e => {\n      var { after, before, column, record, row } = (e as CustomEvent).detail as {\n        after: any\n        before: any\n        column: ColumnConfig\n        record: GristRecord\n        row: number\n      }\n\n      /* compare changes */\n      if (after === before) {\n        return\n      }\n\n      var validation = column.validation\n      if (validation && typeof validation == 'function') {\n        if (!validation.call(this, after, before, record, column)) {\n          return\n        }\n      }\n\n      this.onRecordChanged({ [column.name]: after }, row, column)\n    })\n\n    /* record reset processing */\n    this.addEventListener('record-reset', e => {\n      var { record, row } = (e as CustomEvent).detail as {\n        record: GristRecord\n        row: number\n      }\n\n      this.onRecordChanged(record['__origin__'], row, null)\n    })\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.\n\n    /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */\n    var records = this.data.records\n\n    var beforeRecord = records[row]\n    var afterRecord: GristRecord\n    var wantToDelete = false\n    var wantToAppend = false\n\n    if (!recordData) {\n      if (!beforeRecord) {\n        /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */\n        this.requestUpdate()\n        return\n      } else {\n        /*\n         * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,\n         * 삭제하고자 하는 의도로 이해된다. (주의 필요)\n         */\n        if (beforeRecord['__dirty__'] == '+') {\n          wantToDelete = true\n        } else {\n          afterRecord = {\n            ...beforeRecord,\n            __dirty__: '-'\n          }\n        }\n      }\n    } else {\n      if (!beforeRecord) {\n        /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */\n        afterRecord = {\n          ...recordData,\n          __dirty__: '+'\n        }\n\n        wantToAppend = true\n      } else {\n        let beforeDirty = beforeRecord['__dirty__']\n        if (beforeDirty == '+') {\n          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */\n          afterRecord = {\n            ...beforeRecord,\n            ...recordData,\n            __dirty__: '+'\n          }\n        } else {\n          /* 기존에 레코드가 있었으며 계속 수정중이다. */\n          afterRecord = {\n            ...beforeRecord,\n            ...recordData,\n            __dirty__: 'M'\n          }\n        }\n      }\n    }\n\n    if (wantToAppend) {\n      records.push(afterRecord!)\n    } else if (wantToDelete) {\n      records.splice(row, 1)\n    } else {\n      records.splice(row, 1, afterRecord!)\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('record-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          before: beforeRecord,\n          after: afterRecord!,\n          column,\n          row\n        }\n      })\n    )\n\n    this.requestUpdate()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-partial\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-partial>\n        `\n      )}\n      ${this.isTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}
+{"version":3,"file":"data-list.js","sourceRoot":"","sources":["../../../src/data-list/data-list.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAIrD,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,eAAe;IAA7C;;QAkC+B,UAAK,GAAY,KAAK,CAAA;QAChB,aAAQ,GAAkB,EAAE,CAAA;QAEvD,WAAM,GAAW,CAAC,CAAA;QAClB,WAAM,GAAW,EAAE,CAAA;QACnB,UAAK,GAAW,CAAC,CAAA;IAyE3B,CAAC;IAvEC,YAAY,CAAC,OAA6B;QACxC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QAEjB,wBAAwB;QACxB,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YAClC,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAA;YAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;YACtC,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAA;YAEvC,IAAI,iBAAiB,IAAI,YAAY,GAAG,gBAAgB,GAAG,CAAC,EAAE;gBAC5D,8BAA8B;gBAC9B,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;gBAEnD,IAAI,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAE;oBACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;iBACtF;aACF;YAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,CAAA;QAClC,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAA;YAClB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAA;SACf;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YACjC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAA;YAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;YACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAA;SACjC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEjC,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE;YAC9C,OAAO,GAAG,CAAC,GAAG,OAAO,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAA;SAC3C;QAED,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CACX,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAA;;sBAEZ,IAAI,CAAC,MAAM;oBACb,IAAI,CAAC,IAAI;sBACP,MAAM;wBACJ,QAAQ;4BACJ,MAAM,CAAC,cAAc,CAAC;qBAC7B,MAAM,CAAC,WAAW,CAAC;;SAE/B,CACF;QACC,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA,iCAAiC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B;KAClG,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,IAAI,CAAC,SAAS,GAAG,CAAC,CAAA;QAElB,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAA;IACb,CAAC;CACF,CAAA;AA/GQ,eAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BF;CACF,CAAA;AAE4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAuB;AACxB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0CAAqC;AAnCpD,QAAQ;IADpB,aAAa,CAAC,SAAS,CAAC;GACZ,QAAQ,CAgHpB;SAhHY,QAAQ","sourcesContent":["import '@material/mwc-icon'\nimport './record-partial'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-list')\nexport class DataList extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-list-background-color);\n        overflow-y: auto;\n      }\n\n      :nth-child(even) {\n        background-color: var(--theme-white-color);\n      }\n\n      [selected-row] {\n        background-color: var(--data-list-selected-background-color);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-list-fab-position-vertical);\n        right: var(--data-list-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-list-fab-color);\n        box-shadow: var(--data-list-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) isTop: boolean = false\n  @property({ type: Array }) private _records: GristRecord[] = []\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-partial\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-partial>\n        `\n      )}\n      ${this.isTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import { ColumnConfig, GristConfig, GristData, GristRecord } from './types';
+export declare class DataManipulator extends LitElement {
+    config: GristConfig;
+    data: GristData;
+    constructor();
+    onFieldChange({ after, before, column, record, row }: {
+        after: any;
+        before: any;
+        column: ColumnConfig;
+        record: GristRecord;
+        row: number;
+    }): void;
+    onSelectRecordChanged({ selectedRecords, added, removed }: {
+        selectedRecords: GristRecord[];
+        added: GristRecord[];
+        removed: GristRecord[];
+    }): void;
+    onRecordChanged(recordData: GristRecord, row: number, column: ColumnConfig | null): void;
+}

package/dist/src/data-manipulator.js

@@ -0,0 +1,148 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ZERO_CONFIG, ZERO_DATA } from './configure/zero-config';
+export class DataManipulator extends LitElement {
+    constructor() {
+        super();
+        this.config = ZERO_CONFIG;
+        this.data = ZERO_DATA;
+        this.addEventListener('select-record-change', e => {
+            var { records: selectedRecords, added = [], removed = [] } = e.detail;
+            this.onSelectRecordChanged({
+                selectedRecords,
+                added,
+                removed
+            });
+        });
+        /* field change processing */
+        this.addEventListener('field-change', e => {
+            var { after, before, column, record, row } = e.detail;
+            this.onFieldChange({ after, before, column, record, row });
+        });
+        /* record reset processing */
+        this.addEventListener('record-reset', e => {
+            var { record, row } = e.detail;
+            this.onRecordChanged(record['__origin__'], row, null);
+        });
+    }
+    onFieldChange({ after, before, column, record, row }) {
+        /* compare changes */
+        if (after === before) {
+            return;
+        }
+        var validation = column.validation;
+        if (validation && typeof validation == 'function') {
+            if (!validation.call(this, after, before, record, column)) {
+                return;
+            }
+        }
+        this.onRecordChanged({ [column.name]: after }, row, column);
+    }
+    onSelectRecordChanged({ selectedRecords, added = [], removed = [] }) {
+        var { records } = this.data || {};
+        var { selectable = false } = this.config.rows || {};
+        if (!records || !selectable) {
+            return;
+        }
+        if (selectable && !selectable.multiple) {
+            records.forEach(record => (record['__selected__'] = false));
+        }
+        if (selectedRecords) {
+            records.forEach(record => (record['__selected__'] = false));
+            selectedRecords.forEach(record => (record['__selected__'] = true));
+        }
+        else {
+            removed.forEach(record => (record['__selected__'] = false));
+            added.forEach(record => (record['__selected__'] = true));
+        }
+        this.requestUpdate();
+    }
+    onRecordChanged(recordData, row, column /* TODO column should be removed */) {
+        // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.
+        /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */
+        var records = this.data.records;
+        var beforeRecord = records[row];
+        var afterRecord;
+        var wantToDelete = false;
+        var wantToAppend = false;
+        if (!recordData) {
+            if (!beforeRecord) {
+                /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */
+                this.requestUpdate();
+                return;
+            }
+            else {
+                /*
+                 * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,
+                 * 삭제하고자 하는 의도로 이해된다. (주의 필요)
+                 */
+                if (beforeRecord['__dirty__'] == '+') {
+                    wantToDelete = true;
+                }
+                else {
+                    afterRecord = {
+                        ...beforeRecord,
+                        __dirty__: '-'
+                    };
+                }
+            }
+        }
+        else {
+            if (!beforeRecord) {
+                /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */
+                afterRecord = {
+                    ...recordData,
+                    __dirty__: '+'
+                };
+                wantToAppend = true;
+            }
+            else {
+                let beforeDirty = beforeRecord['__dirty__'];
+                if (beforeDirty == '+') {
+                    /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */
+                    afterRecord = {
+                        ...beforeRecord,
+                        ...recordData,
+                        __dirty__: '+'
+                    };
+                }
+                else {
+                    /* 기존에 레코드가 있었으며 계속 수정중이다. */
+                    afterRecord = {
+                        ...beforeRecord,
+                        ...recordData,
+                        __dirty__: 'M'
+                    };
+                }
+            }
+        }
+        if (wantToAppend) {
+            records.push(afterRecord);
+        }
+        else if (wantToDelete) {
+            records.splice(row, 1);
+        }
+        else {
+            records.splice(row, 1, afterRecord);
+        }
+        this.dispatchEvent(new CustomEvent('record-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                before: beforeRecord,
+                after: afterRecord,
+                column,
+                row
+            }
+        }));
+        this.requestUpdate();
+    }
+}
+__decorate([
+    property({ type: Object })
+], DataManipulator.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], DataManipulator.prototype, "data", void 0);
+//# sourceMappingURL=data-manipulator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-manipulator.js","sourceRoot":"","sources":["../../src/data-manipulator.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA } from './configure/zero-config'\nimport { ColumnConfig, GristConfig, GristData, GristRecord } from './types'\n\nexport class DataManipulator extends LitElement {\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n\n  constructor() {\n    super()\n\n    this.addEventListener('select-record-change', e => {\n      var {\n        records: selectedRecords,\n        added = [],\n        removed = []\n      } = (e as CustomEvent).detail as {\n        records: GristRecord[]\n        added: GristRecord[]\n        removed: GristRecord[]\n      }\n\n      this.onSelectRecordChanged({\n        selectedRecords,\n        added,\n        removed\n      })\n    })\n\n    /* field change processing */\n    this.addEventListener('field-change', e => {\n      var { after, before, column, record, row } = (e as CustomEvent).detail as {\n        after: any\n        before: any\n        column: ColumnConfig\n        record: GristRecord\n        row: number\n      }\n\n      this.onFieldChange({ after, before, column, record, row })\n    })\n\n    /* record reset processing */\n    this.addEventListener('record-reset', e => {\n      var { record, row } = (e as CustomEvent).detail as {\n        record: GristRecord\n        row: number\n      }\n\n      this.onRecordChanged(record['__origin__'], row, null)\n    })\n  }\n\n  onFieldChange({\n    after,\n    before,\n    column,\n    record,\n    row\n  }: {\n    after: any\n    before: any\n    column: ColumnConfig\n    record: GristRecord\n    row: number\n  }) {\n    /* compare changes */\n    if (after === before) {\n      return\n    }\n\n    var validation = column.validation\n    if (validation && typeof validation == 'function') {\n      if (!validation.call(this, after, before, record, column)) {\n        return\n      }\n    }\n\n    this.onRecordChanged({ [column.name]: after }, row, column)\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added = [],\n    removed = []\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }) {\n    var { records } = this.data || {}\n    var { selectable = false } = this.config.rows || {}\n\n    if (!records || !selectable) {\n      return\n    }\n\n    if (selectable && !selectable.multiple) {\n      records.forEach(record => (record['__selected__'] = false))\n    }\n\n    if (selectedRecords) {\n      records.forEach(record => (record['__selected__'] = false))\n      selectedRecords.forEach(record => (record['__selected__'] = true))\n    } else {\n      removed.forEach(record => (record['__selected__'] = false))\n      added.forEach(record => (record['__selected__'] = true))\n    }\n\n    this.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.\n\n    /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */\n    var records = this.data.records\n\n    var beforeRecord = records[row]\n    var afterRecord: GristRecord\n    var wantToDelete = false\n    var wantToAppend = false\n\n    if (!recordData) {\n      if (!beforeRecord) {\n        /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */\n        this.requestUpdate()\n        return\n      } else {\n        /*\n         * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,\n         * 삭제하고자 하는 의도로 이해된다. (주의 필요)\n         */\n        if (beforeRecord['__dirty__'] == '+') {\n          wantToDelete = true\n        } else {\n          afterRecord = {\n            ...beforeRecord,\n            __dirty__: '-'\n          }\n        }\n      }\n    } else {\n      if (!beforeRecord) {\n        /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */\n        afterRecord = {\n          ...recordData,\n          __dirty__: '+'\n        }\n\n        wantToAppend = true\n      } else {\n        let beforeDirty = beforeRecord['__dirty__']\n        if (beforeDirty == '+') {\n          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */\n          afterRecord = {\n            ...beforeRecord,\n            ...recordData,\n            __dirty__: '+'\n          }\n        } else {\n          /* 기존에 레코드가 있었으며 계속 수정중이다. */\n          afterRecord = {\n            ...beforeRecord,\n            ...recordData,\n            __dirty__: 'M'\n          }\n        }\n      }\n    }\n\n    if (wantToAppend) {\n      records.push(afterRecord!)\n    } else if (wantToDelete) {\n      records.splice(row, 1)\n    } else {\n      records.splice(row, 1, afterRecord!)\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('record-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          before: beforeRecord,\n          after: afterRecord!,\n          column,\n          row\n        }\n      })\n    )\n\n    this.requestUpdate()\n  }\n}\n"]}

package/dist/src/record-view/event-handlers/record-view-body-click-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordViewBody } from '../record-view-body';
+/**
+ * ox-record-view-body 의 click handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export declare function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void;

package/dist/src/record-view/event-handlers/record-view-body-click-handler.js

@@ -0,0 +1,22 @@
+/**
+ * ox-record-view-body 의 click handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export function recordViewBodyClickHandler(e) {
+    e.stopPropagation();
+    /* target should be 'ox-grid-field' */
+    var target = e.target;
+    if (!this.onlyForEdit && this.currentTarget) {
+        this.focus();
+        this.currentTarget.removeAttribute('editing');
+    }
+    if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {
+        this.focus();
+        this.currentTarget = null;
+        return;
+    }
+    this.currentTarget = target;
+    target.setAttribute('editing', 'true');
+}
+//# sourceMappingURL=record-view-body-click-handler.js.map

package/dist/src/record-view/event-handlers/record-view-body-click-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-body-click-handler.js","sourceRoot":"","sources":["../../../../src/record-view/event-handlers/record-view-body-click-handler.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAAuB,CAAQ;IACvE,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,sCAAsC;IACtC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAuB,CAAA;IAEtC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE;QAC3C,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;KAC9C;IAED,IAAI,MAAM,CAAC,OAAO,KAAK,eAAe,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;QACxE,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;QACzB,OAAM;KACP;IAED,IAAI,CAAC,aAAa,GAAG,MAAM,CAAA;IAC3B,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AACxC,CAAC","sourcesContent":["import { DataGridField } from '../../data-grid/data-grid-field'\nimport { RecordViewBody } from '../record-view-body'\n\n/**\n * ox-record-view-body 의 click handler\n *\n * - handler의 this 는 ox-record-view-body임.\n */\nexport function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void {\n  e.stopPropagation()\n\n  /* target should be 'ox-grid-field' */\n  var target = e.target as DataGridField\n\n  if (!this.onlyForEdit && this.currentTarget) {\n    this.focus()\n    this.currentTarget.removeAttribute('editing')\n  }\n\n  if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {\n    this.focus()\n    this.currentTarget = null\n    return\n  }\n\n  this.currentTarget = target\n  target.setAttribute('editing', 'true')\n}\n"]}

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordViewBody } from '../record-view-body';
+/**
+ * ox-record-view-body 의 keydown handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export declare function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void>;

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js

@@ -0,0 +1,96 @@
+/**
+ * ox-record-view-body 의 keydown handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export async function recordViewBodyKeydownHandler(e) {
+    // e.preventDefault()
+    switch (e.key) {
+        case 'Esc':
+        case 'Escape':
+        /* TODO 편집이 취소되어야 한다. */
+        case 'Enter':
+            /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */
+            !this.onlyForEdit && this.focus();
+            if (!this.onlyForEdit && this.currentTarget) {
+                this.currentTarget.removeAttribute('editing');
+            }
+            this.currentTarget = null;
+            break;
+        default:
+    }
+    // arrow-key
+    // var keyCode = e.keyCode
+    // var { row = 0, column = 0 } = this.focused || {}
+    // var { records = [] } = this.data || {}
+    // var maxrow = this.config.rows.appendable ? records.length : records.length - 1
+    // var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1
+    // if (this.currentTarget) {
+    //   switch (keyCode) {
+    //     case KEYCODE.KEY_ESC:
+    //     /* TODO 편집이 취소되어야 한다. */
+    //     case KEYCODE.KEY_ENTER:
+    //       this.currentTarget = null
+    //       this.focus()
+    //       return
+    //     // case KEYCODE.KEY_TAP:
+    //     //   this.currentTarget = null
+    //     //   column = Math.min(maxcolumn, column + 1)
+    //     //   this.focus()
+    //     //   break
+    //     // case KEYCODE.KEY_DOWN:
+    //     //   this.currentTarget = null
+    //     //   row = Math.min(maxrow, row + 1)
+    //     //   this.focus()
+    //     //   break
+    //     default:
+    //       return
+    //   }
+    // } else {
+    //   switch (keyCode) {
+    //     case KEYCODE.KEY_UP:
+    //       row = Math.max(0, row - 1)
+    //       break
+    //     case KEYCODE.KEY_DOWN:
+    //       row = Math.min(maxrow, row + 1)
+    //       break
+    //     case KEYCODE.KEY_ENTER:
+    //       this.startEditTarget(row, column)
+    //       return
+    //     case KEYCODE.KEY_LEFT:
+    //     case KEYCODE.KEY_BACKSPACE:
+    //       column = Math.max(0, column - 1)
+    //       break
+    //     case KEYCODE.KEY_RIGHT:
+    //     case KEYCODE.KEY_TAP:
+    //       column = Math.min(maxcolumn, column + 1)
+    //       break
+    //     case KEYCODE.KEY_PAGEUP:
+    //       /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
+    //       row = Math.max(0, row - 10)
+    //       break
+    //     case KEYCODE.KEY_PAGEDOWN:
+    //       row = Math.min(maxrow, row + 10)
+    //       break
+    //     case KEYCODE.KEY_ESC:
+    //       return
+    //     default:
+    //       if (
+    //         (keyCode > 47 && keyCode < 58) || // number keys
+    //         keyCode == 32 ||
+    //         keyCode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
+    //         (keyCode > 64 && keyCode < 91) || // letter keys
+    //         (keyCode > 95 && keyCode < 112) || // numpad keys
+    //         (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
+    //         (keyCode > 218 && keyCode < 223) // [\]' (in order)
+    //       ) {
+    //         this.startEditTarget(row, column)
+    //       }
+    //       return
+    //   }
+    // }
+    // if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
+    //   this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))
+    // }
+}
+//# sourceMappingURL=record-view-body-keydown-handler.js.map

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-body-keydown-handler.js","sourceRoot":"","sources":["../../../../src/record-view/event-handlers/record-view-body-keydown-handler.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,4BAA4B,CAAuB,CAAQ;IAC/E,qBAAqB;IAErB,QAAS,CAAmB,CAAC,GAAG,EAAE;QAChC,KAAK,KAAK,CAAC;QACX,KAAK,QAAQ,CAAC;QACd,wBAAwB;QACxB,KAAK,OAAO;YACV,+DAA+D;YAC/D,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;YAEjC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE;gBAC3C,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;aAC9C;YAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;YAEzB,MAAK;QACP,QAAQ;KACT;IAED,YAAY;IACZ,0BAA0B;IAC1B,mDAAmD;IACnD,yCAAyC;IACzC,iFAAiF;IACjF,mFAAmF;IAEnF,4BAA4B;IAC5B,uBAAuB;IACvB,4BAA4B;IAC5B,+BAA+B;IAC/B,8BAA8B;IAC9B,kCAAkC;IAClC,qBAAqB;IACrB,eAAe;IAEf,+BAA+B;IAC/B,qCAAqC;IACrC,oDAAoD;IACpD,wBAAwB;IACxB,iBAAiB;IAEjB,gCAAgC;IAChC,qCAAqC;IACrC,2CAA2C;IAC3C,wBAAwB;IACxB,iBAAiB;IAEjB,eAAe;IACf,eAAe;IACf,MAAM;IACN,WAAW;IACX,uBAAuB;IACvB,2BAA2B;IAC3B,mCAAmC;IACnC,cAAc;IAEd,6BAA6B;IAC7B,wCAAwC;IACxC,cAAc;IAEd,8BAA8B;IAC9B,0CAA0C;IAC1C,eAAe;IAEf,6BAA6B;IAC7B,kCAAkC;IAClC,yCAAyC;IACzC,cAAc;IAEd,8BAA8B;IAC9B,4BAA4B;IAC5B,iDAAiD;IACjD,cAAc;IAEd,+BAA+B;IAC/B,+CAA+C;IAC/C,oCAAoC;IACpC,cAAc;IAEd,iCAAiC;IACjC,yCAAyC;IACzC,cAAc;IAEd,4BAA4B;IAC5B,eAAe;IAEf,eAAe;IACf,aAAa;IACb,2DAA2D;IAC3D,2BAA2B;IAC3B,+FAA+F;IAC/F,2DAA2D;IAC3D,4DAA4D;IAC5D,oEAAoE;IACpE,8DAA8D;IAC9D,YAAY;IACZ,4CAA4C;IAC5C,UAAU;IACV,eAAe;IACf,MAAM;IACN,IAAI;IAEJ,qFAAqF;IACrF,oHAAoH;IACpH,IAAI;AACN,CAAC","sourcesContent":["import { RecordViewBody } from '../record-view-body'\n\n/**\n * ox-record-view-body 의 keydown handler\n *\n * - handler의 this 는 ox-record-view-body임.\n */\nexport async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void> {\n  // e.preventDefault()\n\n  switch ((e as KeyboardEvent).key) {\n    case 'Esc':\n    case 'Escape':\n    /* TODO 편집이 취소되어야 한다. */\n    case 'Enter':\n      /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */\n      !this.onlyForEdit && this.focus()\n\n      if (!this.onlyForEdit && this.currentTarget) {\n        this.currentTarget.removeAttribute('editing')\n      }\n\n      this.currentTarget = null\n\n      break\n    default:\n  }\n\n  // arrow-key\n  // var keyCode = e.keyCode\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  // if (this.currentTarget) {\n  //   switch (keyCode) {\n  //     case KEYCODE.KEY_ESC:\n  //     /* TODO 편집이 취소되어야 한다. */\n  //     case KEYCODE.KEY_ENTER:\n  //       this.currentTarget = null\n  //       this.focus()\n  //       return\n\n  //     // case KEYCODE.KEY_TAP:\n  //     //   this.currentTarget = null\n  //     //   column = Math.min(maxcolumn, column + 1)\n  //     //   this.focus()\n  //     //   break\n\n  //     // case KEYCODE.KEY_DOWN:\n  //     //   this.currentTarget = null\n  //     //   row = Math.min(maxrow, row + 1)\n  //     //   this.focus()\n  //     //   break\n\n  //     default:\n  //       return\n  //   }\n  // } else {\n  //   switch (keyCode) {\n  //     case KEYCODE.KEY_UP:\n  //       row = Math.max(0, row - 1)\n  //       break\n\n  //     case KEYCODE.KEY_DOWN:\n  //       row = Math.min(maxrow, row + 1)\n  //       break\n\n  //     case KEYCODE.KEY_ENTER:\n  //       this.startEditTarget(row, column)\n  //       return\n\n  //     case KEYCODE.KEY_LEFT:\n  //     case KEYCODE.KEY_BACKSPACE:\n  //       column = Math.max(0, column - 1)\n  //       break\n\n  //     case KEYCODE.KEY_RIGHT:\n  //     case KEYCODE.KEY_TAP:\n  //       column = Math.min(maxcolumn, column + 1)\n  //       break\n\n  //     case KEYCODE.KEY_PAGEUP:\n  //       /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */\n  //       row = Math.max(0, row - 10)\n  //       break\n\n  //     case KEYCODE.KEY_PAGEDOWN:\n  //       row = Math.min(maxrow, row + 10)\n  //       break\n\n  //     case KEYCODE.KEY_ESC:\n  //       return\n\n  //     default:\n  //       if (\n  //         (keyCode > 47 && keyCode < 58) || // number keys\n  //         keyCode == 32 ||\n  //         keyCode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)\n  //         (keyCode > 64 && keyCode < 91) || // letter keys\n  //         (keyCode > 95 && keyCode < 112) || // numpad keys\n  //         (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)\n  //         (keyCode > 218 && keyCode < 223) // [\\]' (in order)\n  //       ) {\n  //         this.startEditTarget(row, column)\n  //       }\n  //       return\n  //   }\n  // }\n\n  // if (!this.focused || this.focused.row !== row || this.focused.column !== column) {\n  //   this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))\n  // }\n}\n"]}

package/dist/src/record-view/record-creator.d.ts

@@ -0,0 +1,13 @@
+import '@material/mwc-icon';
+import './record-view';
+import { LitElement } from 'lit';
+import { DataGrist } from '../data-grist';
+import { GristRecord } from '../types';
+export declare class RecordCreator extends LitElement {
+    grist?: DataGrist;
+    record: GristRecord;
+    constructor();
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    popupRecordView(): void;
+}

package/dist/src/record-view/record-creator.js

@@ -0,0 +1,90 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import './record-view';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { OxPopup } from '@operato/popup';
+let RecordCreator = class RecordCreator extends LitElement {
+    constructor() {
+        super();
+        this.record = { __dirty__: '+' };
+        this.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.popupRecordView();
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.grist = this.closest('ox-grist');
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    popupRecordView() {
+        const config = this.grist.compiledConfig;
+        var titleField = config.list.fields[0] || 'name';
+        var title = this.record[titleField];
+        const rowIndex = -1;
+        var record = {};
+        const columns = config.columns;
+        /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */
+        if (typeof title == 'object') {
+            var column = config.columns.find(column => column.name == titleField);
+            title = column === null || column === void 0 ? void 0 : column.record.renderer(title, column, record, rowIndex, this);
+        }
+        var popup = OxPopup.open({
+            template: html `
+        <ox-record-view
+          only-for-edit
+          @field-change=${(e) => {
+                const view = e.currentTarget;
+                var { after, before, column, record, row } = e.detail;
+                var validation = column.validation;
+                if (validation && typeof validation == 'function') {
+                    if (!validation.call(this, after, before, record, column)) {
+                        return;
+                    }
+                }
+                view.record = {
+                    ...record,
+                    [column.name]: after
+                };
+            }}
+          .config=${config}
+          .columns=${columns}
+          .record=${record}
+          .rowIndex=${rowIndex}
+          @reset=${(e) => {
+                const view = e.currentTarget;
+                view.record = {};
+            }}
+          @cancel=${(e) => {
+                popup.close();
+            }}
+          @ok=${(e) => {
+                popup.close();
+                const view = e.currentTarget;
+                this.dispatchEvent(new CustomEvent('ok', {
+                    bubbles: true,
+                    composed: true,
+                    detail: view.record
+                }));
+            }}
+        ></ox-record-view>
+      `,
+            parent: document.body
+        });
+    }
+};
+__decorate([
+    state()
+], RecordCreator.prototype, "grist", void 0);
+__decorate([
+    state()
+], RecordCreator.prototype, "record", void 0);
+RecordCreator = __decorate([
+    customElement('ox-record-creator')
+], RecordCreator);
+export { RecordCreator };
+//# sourceMappingURL=record-creator.js.map