@operato/data-grist 0.3.13 → 0.3.17

package/demo/index.html

@@ -50,6 +50,8 @@
       import { LitElement, html, css, render } from 'lit'
       import '../dist/index.js'
       import '../dist/src/filters/filters-form.js'
+      import '../dist/src/sorters/sorters-control.js'
+      import '../dist/src/record-view/record-creator.js'
       import '@operato/popup/ox-popup-list.js'
       import '@material/mwc-icon'
 
@@ -84,10 +86,14 @@
                         name: 'HatioSEA',
                         description: `말레이시아 세티아알람-${start + idx + 1}`
                       },
-                image:
-                  idx % 2
+                thumbnail:
+                  idx % 4 === 0
+                    ? '' /* no source */
+                    : idx % 4 === 1
                     ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
-                    : `http://www.hatiolab.com/assets/img/thingsboard-30.png`,
+                    : idx % 4 === 2
+                    ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
+                    : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
                 role: ['admin', 'worker', 'tester'][idx % 3],
                 color: idx % 2 ? `#87f018` : `#180f87`,
                 rate: Math.round(Math.random() * 100),
@@ -110,9 +116,7 @@
 
       const config = {
         list: {
-          thumbnail: function (record, rowIndex) {
-            return html` <img src=${record.image} style="width: 100%; height: 100%;" /> `
-          },
+          thumbnail: 'thumbnail',
           fields: ['name', 'description'],
           details: ['role', 'email']
         },
@@ -189,7 +193,9 @@
             record: {
               editable: true
             },
-            filter: true,
+            filter: {
+              operator: 'i_like'
+            },
             sortable: true,
             width: 130,
             validation: function (after, before, record, column) {
@@ -234,7 +240,8 @@
               editable: true
             },
             filter: {
-              options: ['admin', 'worker', 'tester', 'xyz', 'VERY']
+              options: ['admin', 'worker', 'tester', 'xyz', 'VERY'],
+              multiple: true /* this case, operator should be 'in' */
             },
             sortable: true,
             width: 120
@@ -246,6 +253,7 @@
             record: {
               editable: true
             },
+            filter: true,
             sortable: true,
             width: 50
           },
@@ -269,6 +277,14 @@
             header: 'JSON5',
             width: 200
           },
+          {
+            type: 'image',
+            name: 'thumbnail',
+            header: 'thumbnail',
+            record: {
+              editable: true
+            }
+          },
           {
             type: 'datetime',
             name: 'updatedAt',
@@ -288,7 +304,7 @@
             name: 'createdAt',
             header: 'created at',
             record: {
-              editable: true
+              editable: false
             },
             sortable: true,
             width: 180
@@ -477,59 +493,21 @@
                     <input type="text" />
                   </div>
 
-                  <mwc-icon
-                    @click=${e => {
-                      const target = e.currentTarget
-                      this.renderRoot.querySelector('ox-popup-list').open({
-                        left: target.offsetLeft,
-                        top: target.offsetTop + target.offsetHeight
-                      })
-                    }}
-                    >sort</mwc-icon
-                  >
-                  <mwc-icon
-                    @click=${e => {
-                      const target = e.currentTarget
-                      this.renderRoot.querySelector('ox-popup-list').open({
-                        left: target.offsetLeft,
-                        top: target.offsetTop + target.offsetHeight
-                      })
-                    }}
-                    >more_horiz</mwc-icon
-                  >
-                  <mwc-icon
-                    @click=${e => {
-                      const target = e.currentTarget
-                      this.renderRoot.querySelector('ox-popup-list').open({
-                        left: target.offsetLeft,
-                        top: target.offsetTop + target.offsetHeight
-                      })
-                    }}
-                    >sort</mwc-icon
-                  >
-
-                  <ox-popup-list multiple>
-                    <div
-                      option
-                      @click=${function (e) {
-                        const icon = e.currentTarget.querySelector('mwc-icon')
-                        icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
-                      }}
-                    >
-                      <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
-                      <span>click me to toggle</span>
-                    </div>
-                    <div
-                      option
-                      @click=${function (e) {
-                        const icon = e.currentTarget.querySelector('mwc-icon')
-                        icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
+                  <div>
+                    <mwc-icon
+                      @click=${e => {
+                        const target = e.currentTarget
+                        this.renderRoot.querySelector('#sorter-control').open({
+                          left: target.offsetLeft,
+                          top: target.offsetTop + target.offsetHeight
+                        })
                       }}
+                      >sort</mwc-icon
                     >
-                      <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
-                      <span>click me to toggle</span>
-                    </div>
-                  </ox-popup-list>
+                    <ox-popup id="sorter-control">
+                      <ox-sorters-control> </ox-sorters-control>
+                    </ox-popup>
+                  </div>
                 </div>
                 <div id="modes">
                   <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
@@ -554,9 +532,10 @@
                     >Fetch</a
                   >
                 </div>
-                <div id="add">
+
+                <ox-record-creator id="add" light-popup>
                   <button><mwc-icon>add</mwc-icon></button>
-                </div>
+                </ox-record-creator>
               </div>
             </ox-grist>
           `

package/dist/src/configure/list-option-builder.js

@@ -1,7 +1,5 @@
-import { ZERO_THUMBNAIL_TEMPLATE } from './zero-config';
 export const buildListOptions = (list) => {
     return {
-        thumbnail: ZERO_THUMBNAIL_TEMPLATE,
         fields: ['name', 'description', 'updatedAt'],
         details: [],
         ...list

package/dist/src/configure/list-option-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-option-builder.js","sourceRoot":"","sources":["../../../src/configure/list-option-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAA4B,EAAc,EAAE;IAC3E,OAAO;QACL,SAAS,EAAE,uBAAuB;QAClC,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,CAAC;QAC5C,OAAO,EAAE,EAAE;QACX,GAAG,IAAI;KACR,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { ListConfig } from '../types'\nimport { ZERO_THUMBNAIL_TEMPLATE } from './zero-config'\n\nexport const buildListOptions = (list: ListConfig | undefined): ListConfig => {\n  return {\n    thumbnail: ZERO_THUMBNAIL_TEMPLATE,\n    fields: ['name', 'description', 'updatedAt'],\n    details: [],\n    ...list\n  }\n}\n"]}
+{"version":3,"file":"list-option-builder.js","sourceRoot":"","sources":["../../../src/configure/list-option-builder.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAA4B,EAAc,EAAE;IAC3E,OAAO;QACL,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,CAAC;QAC5C,OAAO,EAAE,EAAE;QACX,GAAG,IAAI;KACR,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { ListConfig } from '../types'\n\nexport const buildListOptions = (list: ListConfig | undefined): ListConfig => {\n  return {\n    fields: ['name', 'description', 'updatedAt'],\n    details: [],\n    ...list\n  }\n}\n"]}

package/dist/src/configure/zero-config.d.ts

@@ -1,7 +1,6 @@
 import { ColumnConfig, FieldRenderer, GristClassifier, GristConfig, GristData, GristEventHandlerSet, GristRecord, GroupConfig, LabelConfig, ListConfig, RowsConfig } from '../types';
 export declare const ZERO_CLASSIFIER: GristClassifier;
 export declare const ZERO_FIELD_RENDERER: FieldRenderer;
-export declare const ZERO_THUMBNAIL_TEMPLATE: (record: GristRecord, rowIndex: number) => void;
 export declare const ZERO_EVENTHANDLERSET: GristEventHandlerSet;
 export declare const ZERO_COLUMNS: ColumnConfig[];
 export declare const ZERO_GROUPS: GroupConfig[];

package/dist/src/configure/zero-config.js

@@ -1,6 +1,5 @@
 export const ZERO_CLASSIFIER = (record, rowIndex) => { };
 export const ZERO_FIELD_RENDERER = (value, column, record, rowIndex, owner) => { };
-export const ZERO_THUMBNAIL_TEMPLATE = function (record, rowIndex) { };
 export const ZERO_EVENTHANDLERSET = {
     click: undefined,
     dblclick: undefined
@@ -32,7 +31,6 @@ export const ZERO_ROWS = {
     handlers: ZERO_EVENTHANDLERSET
 };
 export const ZERO_LIST = {
-    thumbnail: ZERO_THUMBNAIL_TEMPLATE,
     fields: ['name', 'description', 'updatedAt'],
     details: []
 };

package/dist/src/configure/zero-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"zero-config.js","sourceRoot":"","sources":["../../../src/configure/zero-config.ts"],"names":[],"mappings":"AAcA,MAAM,CAAC,MAAM,eAAe,GAAoB,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,GAAE,CAAC,CAAA;AACxE,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAE,CAAC,CAAA;AAChG,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,MAAmB,EAAE,QAAgB,IAAG,CAAC,CAAA;AAE1F,MAAM,CAAC,MAAM,oBAAoB,GAAyB;IACxD,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,SAAS;CACpB,CAAA;AACD,MAAM,CAAC,MAAM,YAAY,GAAmB,EAAE,CAAA;AAC9C,MAAM,CAAC,MAAM,WAAW,GAAkB,EAAE,CAAA;AAC5C,MAAM,CAAC,MAAM,WAAW,GAAO,EAAE,CAAA;AACjC,MAAM,CAAC,MAAM,UAAU,GAAgB,KAAK,CAAA;AAE5C,MAAM,CAAC,MAAM,WAAW,GAAiB;IACvC,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC,EAAE,GAAE,CAAC;KACvB;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,mBAAmB;QAC7B,UAAU,EAAE,eAAe;QAC3B,OAAO,EAAE,EAAE;KACZ;IACD,QAAQ,EAAE,oBAAoB;IAC9B,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAe;IACnC,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;IACjB,MAAM,EAAE,WAAW;IACnB,MAAM,EAAE,WAAW;IACnB,UAAU,EAAE,eAAe;IAC3B,QAAQ,EAAE,oBAAoB;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAe;IACnC,SAAS,EAAE,uBAAuB;IAClC,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,CAAC;IAC5C,OAAO,EAAE,EAAE;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAgB;IACtC,OAAO,EAAE,YAAY;IACrB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAgB,EAAE,CAAA;AAC1C,MAAM,CAAC,MAAM,YAAY,GAAkB,EAAE,CAAA;AAE7C,MAAM,CAAC,MAAM,SAAS,GAAc;IAClC,OAAO,EAAE,YAAY;CACtB,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,CAAC;CACT,CAAA","sourcesContent":["import {\n  ColumnConfig,\n  FieldRenderer,\n  GristClassifier,\n  GristConfig,\n  GristData,\n  GristEventHandlerSet,\n  GristRecord,\n  GroupConfig,\n  LabelConfig,\n  ListConfig,\n  RowsConfig\n} from '../types'\n\nexport const ZERO_CLASSIFIER: GristClassifier = (record, rowIndex) => {}\nexport const ZERO_FIELD_RENDERER: FieldRenderer = (value, column, record, rowIndex, owner) => {}\nexport const ZERO_THUMBNAIL_TEMPLATE = function (record: GristRecord, rowIndex: number) {}\n\nexport const ZERO_EVENTHANDLERSET: GristEventHandlerSet = {\n  click: undefined,\n  dblclick: undefined\n}\nexport const ZERO_COLUMNS: ColumnConfig[] = []\nexport const ZERO_GROUPS: GroupConfig[] = []\nexport const ZERO_TOTALS: [] = []\nexport const ZERO_LABEL: LabelConfig = false\n\nexport const ZERO_COLUMN: ColumnConfig = {\n  type: '',\n  name: '',\n  header: {\n    renderer: column => {}\n  },\n  record: {\n    renderer: ZERO_FIELD_RENDERER,\n    classifier: ZERO_CLASSIFIER,\n    options: {}\n  },\n  handlers: ZERO_EVENTHANDLERSET,\n  label: ZERO_LABEL\n}\n\nexport const ZERO_ROWS: RowsConfig = {\n  appendable: false,\n  insertable: false,\n  groups: ZERO_GROUPS,\n  totals: ZERO_TOTALS,\n  classifier: ZERO_CLASSIFIER,\n  handlers: ZERO_EVENTHANDLERSET\n}\n\nexport const ZERO_LIST: ListConfig = {\n  thumbnail: ZERO_THUMBNAIL_TEMPLATE,\n  fields: ['name', 'description', 'updatedAt'],\n  details: []\n}\n\nexport const ZERO_CONFIG: GristConfig = {\n  columns: ZERO_COLUMNS,\n  rows: ZERO_ROWS,\n  list: ZERO_LIST\n}\n\nexport const ZERO_RECORD: GristRecord = {}\nexport const ZERO_RECORDS: GristRecord[] = []\n\nexport const ZERO_DATA: GristData = {\n  records: ZERO_RECORDS\n}\n\nexport const ZERO_PAGINATION = {\n  page: 1,\n  limit: 20,\n  total: 0\n}\n"]}
+{"version":3,"file":"zero-config.js","sourceRoot":"","sources":["../../../src/configure/zero-config.ts"],"names":[],"mappings":"AAcA,MAAM,CAAC,MAAM,eAAe,GAAoB,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,GAAE,CAAC,CAAA;AACxE,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAE,CAAC,CAAA;AAEhG,MAAM,CAAC,MAAM,oBAAoB,GAAyB;IACxD,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,SAAS;CACpB,CAAA;AACD,MAAM,CAAC,MAAM,YAAY,GAAmB,EAAE,CAAA;AAC9C,MAAM,CAAC,MAAM,WAAW,GAAkB,EAAE,CAAA;AAC5C,MAAM,CAAC,MAAM,WAAW,GAAO,EAAE,CAAA;AACjC,MAAM,CAAC,MAAM,UAAU,GAAgB,KAAK,CAAA;AAE5C,MAAM,CAAC,MAAM,WAAW,GAAiB;IACvC,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC,EAAE,GAAE,CAAC;KACvB;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,mBAAmB;QAC7B,UAAU,EAAE,eAAe;QAC3B,OAAO,EAAE,EAAE;KACZ;IACD,QAAQ,EAAE,oBAAoB;IAC9B,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAe;IACnC,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;IACjB,MAAM,EAAE,WAAW;IACnB,MAAM,EAAE,WAAW;IACnB,UAAU,EAAE,eAAe;IAC3B,QAAQ,EAAE,oBAAoB;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAe;IACnC,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,CAAC;IAC5C,OAAO,EAAE,EAAE;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAgB;IACtC,OAAO,EAAE,YAAY;IACrB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAgB,EAAE,CAAA;AAC1C,MAAM,CAAC,MAAM,YAAY,GAAkB,EAAE,CAAA;AAE7C,MAAM,CAAC,MAAM,SAAS,GAAc;IAClC,OAAO,EAAE,YAAY;CACtB,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,CAAC;CACT,CAAA","sourcesContent":["import {\n  ColumnConfig,\n  FieldRenderer,\n  GristClassifier,\n  GristConfig,\n  GristData,\n  GristEventHandlerSet,\n  GristRecord,\n  GroupConfig,\n  LabelConfig,\n  ListConfig,\n  RowsConfig\n} from '../types'\n\nexport const ZERO_CLASSIFIER: GristClassifier = (record, rowIndex) => {}\nexport const ZERO_FIELD_RENDERER: FieldRenderer = (value, column, record, rowIndex, owner) => {}\n\nexport const ZERO_EVENTHANDLERSET: GristEventHandlerSet = {\n  click: undefined,\n  dblclick: undefined\n}\nexport const ZERO_COLUMNS: ColumnConfig[] = []\nexport const ZERO_GROUPS: GroupConfig[] = []\nexport const ZERO_TOTALS: [] = []\nexport const ZERO_LABEL: LabelConfig = false\n\nexport const ZERO_COLUMN: ColumnConfig = {\n  type: '',\n  name: '',\n  header: {\n    renderer: column => {}\n  },\n  record: {\n    renderer: ZERO_FIELD_RENDERER,\n    classifier: ZERO_CLASSIFIER,\n    options: {}\n  },\n  handlers: ZERO_EVENTHANDLERSET,\n  label: ZERO_LABEL\n}\n\nexport const ZERO_ROWS: RowsConfig = {\n  appendable: false,\n  insertable: false,\n  groups: ZERO_GROUPS,\n  totals: ZERO_TOTALS,\n  classifier: ZERO_CLASSIFIER,\n  handlers: ZERO_EVENTHANDLERSET\n}\n\nexport const ZERO_LIST: ListConfig = {\n  fields: ['name', 'description', 'updatedAt'],\n  details: []\n}\n\nexport const ZERO_CONFIG: GristConfig = {\n  columns: ZERO_COLUMNS,\n  rows: ZERO_ROWS,\n  list: ZERO_LIST\n}\n\nexport const ZERO_RECORD: GristRecord = {}\nexport const ZERO_RECORDS: GristRecord[] = []\n\nexport const ZERO_DATA: GristData = {\n  records: ZERO_RECORDS\n}\n\nexport const ZERO_PAGINATION = {\n  page: 1,\n  limit: 20,\n  total: 0\n}\n"]}

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

@@ -1,18 +1,15 @@
 import '@material/mwc-icon';
 import './record-card';
-import { LitElement, PropertyValues } from 'lit';
-import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types';
-export declare class DataCard extends LitElement {
+import { PropertyValues } from 'lit';
+import { DataManipulator } from '../data-manipulator';
+export declare class DataCard extends DataManipulator {
     static styles: import("lit").CSSResult[];
-    config: GristConfig;
-    data: GristData;
     isTop: boolean;
     private _records;
     private _total;
     private _limit;
     private _page;
     firstUpdated(changes: PropertyValues<this>): void;
-    onRecordChanged(recordData: GristRecord, row: number, column: ColumnConfig | null): void;
     updated(changes: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
     gotoTop(e: Event): void;

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

@@ -1,14 +1,12 @@
 import { __decorate } from "tslib";
 import '@material/mwc-icon';
 import './record-card';
-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 DataCard = class DataCard extends LitElement {
+import { DataManipulator } from '../data-manipulator';
+let DataCard = class DataCard 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 DataCard = class DataCard 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')) {
@@ -242,12 +120,6 @@ DataCard.styles = [
       }
     `
 ];
-__decorate([
-    property({ type: Object })
-], DataCard.prototype, "config", void 0);
-__decorate([
-    property({ type: Object })
-], DataCard.prototype, "data", void 0);
 __decorate([
     property({ type: Boolean })
 ], DataCard.prototype, "isTop", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-card'\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-card')\nexport class DataCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-card-background-color);\n        overflow-y: auto;\n        padding: var(--padding-wide);\n\n        display: grid;\n        grid-template-columns: var(--data-card-template);\n        grid-template-rows: min-content;\n        grid-gap: var(--margin-wide);\n      }\n\n      ox-record-card {\n        align-items: stretch;\n        background-color: var(--data-card-record-card-background-color);\n        border: var(--data-card-record-card-border);\n        border-radius: var(--data-card-record-card-border-radius);\n      }\n      ox-record-card:hover {\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      [selected-row] {\n        background-color: var(--data-card-record-card-selected-border);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-card-fab-position-vertical);\n        right: var(--data-card-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-card-fab-color);\n        box-shadow: var(--data-card-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\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    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-card\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-card>\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-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-card'\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-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-card-background-color);\n        overflow-y: auto;\n        padding: var(--padding-wide);\n\n        display: grid;\n        grid-template-columns: var(--data-card-template);\n        grid-template-rows: min-content;\n        grid-gap: var(--margin-wide);\n      }\n\n      ox-record-card {\n        align-items: stretch;\n        background-color: var(--data-card-record-card-background-color);\n        border: var(--data-card-record-card-border);\n        border-radius: var(--data-card-record-card-border-radius);\n      }\n      ox-record-card:hover {\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      [selected-row] {\n        background-color: var(--data-card-record-card-selected-border);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-card-fab-position-vertical);\n        right: var(--data-card-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-card-fab-color);\n        box-shadow: var(--data-card-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\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    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-card\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-card>\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-card/record-card.d.ts

@@ -15,9 +15,6 @@ export declare class RecordCard extends LitElement {
     private _recordView;
     private clickHandler;
     private dblclickHandler;
-    attributeChangedCallback(name: string, oldval: any, newval: any): void;
-    onFieldChange(e: Event): void;
-    get recordView(): any;
     firstUpdated(): void;
     updated(changes: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -7,6 +7,7 @@ import './data-card-gutter-menu';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config';
+import { RecordViewHandler } from '../record-view/record-view-handler';
 import { recordCardClickHandler } from './event-handlers/record-card-click-handler';
 import { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler';
 // TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.
@@ -36,28 +37,6 @@ let RecordCard = class RecordCard extends LitElement {
         this.clickHandler = recordCardClickHandler.bind(this);
         this.dblclickHandler = recordCardDblClickHandler.bind(this);
     }
-    attributeChangedCallback(name, oldval, newval) {
-        super.attributeChangedCallback(name, oldval, newval);
-    }
-    onFieldChange(e) {
-        /* record-view의 이벤트를 부모에게로 전달한다. */
-        this.dispatchEvent(new CustomEvent('field-change', {
-            bubbles: true,
-            composed: true,
-            detail: e.detail
-        }));
-    }
-    get recordView() {
-        if (!this._recordView) {
-            this._recordView = document.createElement('ox-record-view');
-            this._recordView.addEventListener('field-change', (e) => this.onFieldChange(e));
-        }
-        var columns = this.config.columns;
-        this._recordView.columns = columns;
-        this._recordView.record = this.record;
-        this._recordView.rowIndex = this.rowIndex;
-        return this._recordView;
-    }
     firstUpdated() {
         /*
           long-press
@@ -67,6 +46,7 @@ let RecordCard = class RecordCard extends LitElement {
         // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))
         this.renderRoot.addEventListener('click', this.clickHandler);
         this.renderRoot.addEventListener('dblclick', this.dblclickHandler);
+        this.addEventListener('show-record-view', () => this.popupRecordView());
     }
     updated(changes) {
         if (changes.has('record') && this._recordView) {
@@ -74,15 +54,17 @@ let RecordCard = class RecordCard extends LitElement {
         }
     }
     render() {
-        var record = this.record;
-        var rowIndex = this.rowIndex;
-        var { columns, list } = this.config;
-        var { thumbnail, fields, details } = list || {};
-        var briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || [];
-        var detailFields = details.map(field => columns.find(column => column.name == field)).filter(column => column) || [];
-        var thumbnailTemplate = thumbnail.call(this, record, rowIndex);
-        var gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList);
-        var firstGutter = gutters[0];
+        const record = this.record;
+        const rowIndex = this.rowIndex;
+        const { columns, list } = this.config;
+        const { thumbnail, fields, details } = list || {};
+        const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || [];
+        const detailFields = details.map(field => columns.find(column => column.name == field)).filter(column => column) || [];
+        const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined;
+        const thumbRenderer = thumbnailColumn === null || thumbnailColumn === void 0 ? void 0 : thumbnailColumn.record.renderer;
+        const thumbnailTemplate = thumbRenderer === null || thumbRenderer === void 0 ? void 0 : thumbRenderer.call(this, record[thumbnail], thumbnailColumn, record, rowIndex, this);
+        const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList);
+        const firstGutter = gutters[0];
         if (this.hasAttribute('dirty')) {
             var dirtyIcon;
             switch (this.record['__dirty__']) {
@@ -173,45 +155,11 @@ let RecordCard = class RecordCard extends LitElement {
             var column = this.config.columns.find(column => column.name == titleField);
             title = column === null || column === void 0 ? void 0 : column.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */);
         }
-        document.dispatchEvent(new CustomEvent('open-popup', {
-            detail: {
-                template: this.recordView,
-                options: {
-                    backdrop: true,
-                    size: 'large',
-                    title
-                },
-                callback: (popup) => {
-                    this.recordView.addEventListener('reset', () => {
-                        this.dispatchEvent(new CustomEvent('record-reset', {
-                            bubbles: true,
-                            composed: true,
-                            detail: {
-                                record: this.record,
-                                row: this.rowIndex
-                            }
-                        }));
-                    });
-                    this.recordView.addEventListener('cancel', () => {
-                        this.dispatchEvent(new CustomEvent('record-reset', {
-                            bubbles: true,
-                            composed: true,
-                            detail: {
-                                record: this.record,
-                                row: this.rowIndex
-                            }
-                        }));
-                        popup.close();
-                    });
-                    this.recordView.addEventListener('ok', () => {
-                        popup.close();
-                    });
-                    popup.onclosed = () => {
-                        delete this._recordView;
-                    };
-                }
-            }
-        }));
+        this._recordView = RecordViewHandler(this.config.columns, this.record, this.rowIndex, this, {
+            title
+        }, () => {
+            delete this._recordView;
+        });
     }
 };
 RecordCard.styles = [
@@ -253,7 +201,10 @@ RecordCard.styles = [
         border-top-right-radius: var(--data-card-record-card-border-radius);
         border-bottom: var(--data-card-thumbnail-border-bottom);
         overflow: hidden;
-        align-self: center;
+
+        display: flex;
+        align-content: center;
+        justify-content: center;
       }
 
       [content] {