@operato/data-grist 0.3.15 → 0.3.19

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

@@ -4,71 +4,46 @@ import '../data-grid/data-grid-field';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ZERO_RECORD } from '../configure/zero-config';
-const KEY_ENTER = 13;
-const KEY_ESC = 27;
+import { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler';
+import { recordViewBodyKeydownHandler } from './event-handlers/record-view-body-keydown-handler';
 let RecordViewBody = class RecordViewBody extends LitElement {
     constructor() {
         super(...arguments);
         this.columns = [];
         this.record = ZERO_RECORD;
         this.rowIndex = -1;
+        this.onlyForEdit = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('tabindex', '0');
+        this.renderRoot.addEventListener('keydown', recordViewBodyKeydownHandler.bind(this));
+        this.renderRoot.addEventListener('click', recordViewBodyClickHandler.bind(this));
     }
     render() {
-        var columns = this.columns.filter(column => !column.hidden && column.type != 'gutter');
+        var columns = this.columns.filter(column => !column.hidden && column.type !== 'gutter');
         var record = this.record;
         var rowIndex = this.rowIndex;
         return html `
       ${columns.map(column => {
-            let { editable } = column.record;
+            let { editable, mandatory } = column.record;
             let dirtyFields = record['__dirtyfields__'] || {};
             return html `
-          <label ?editable=${editable}><span>${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label>
+          <label ?editable=${editable}
+            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label
+          >
           <ox-grid-field
             .rowIndex=${rowIndex}
             .column=${column}
             .record=${record}
             .value=${record[column.name]}
             ?dirty=${!!dirtyFields[column.name]}
+            ?editing=${this.onlyForEdit}
           ></ox-grid-field>
         `;
         })}
     `;
     }
-    firstUpdated() {
-        this.renderRoot.addEventListener('click', e => {
-            e.stopPropagation();
-            /* target should be 'ox-grid-field' */
-            var target = e.target;
-            if (this.editTarget) {
-                this.editTarget.removeAttribute('editing');
-                this.editTarget = null;
-            }
-            if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {
-                return;
-            }
-            this.editTarget = target;
-            target.setAttribute('editing', 'true');
-        });
-        this._focusedListener = (e) => {
-            var keyCode = e.keyCode;
-            switch (keyCode) {
-                case KEY_ESC:
-                /* TODO 편집이 취소되어야 한다. */
-                case KEY_ENTER:
-                    if (this.editTarget) {
-                        this.editTarget.removeAttribute('editing');
-                        this.editTarget = null;
-                    }
-                    break;
-                default:
-            }
-        };
-        window.addEventListener('keydown', this._focusedListener);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener('keydown', this._focusedListener);
-    }
     _renderLabel(column) {
         var { renderer } = column.header;
         var title = renderer.call(this, column);
@@ -108,6 +83,7 @@ RecordViewBody.styles = [
       }
 
       ox-grid-field {
+        border-top: none;
         border-bottom: var(--record-view-border-bottom);
         font: var(--record-view-font);
         color: var(--record-view-color);
@@ -115,7 +91,6 @@ RecordViewBody.styles = [
       }
 
       ox-grid-field[editing='true'] {
-        border-top: none;
         border-bottom: var(--record-view-edit-border-bottom);
       }
 
@@ -134,6 +109,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], RecordViewBody.prototype, "rowIndex", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'only-for-edit' })
+], RecordViewBody.prototype, "onlyForEdit", void 0);
 RecordViewBody = __decorate([
     customElement('ox-record-view-body')
 ], RecordViewBody);

package/dist/src/record-view/record-view-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-view-body.js","sourceRoot":"","sources":["../../../src/record-view/record-view-body.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAItD,MAAM,SAAS,GAAG,EAAE,CAAA;AACpB,MAAM,OAAO,GAAG,EAAE,CAAA;AAGlB,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAoD6B,YAAO,GAAmB,EAAE,CAAA;QAC3B,WAAM,GAAgB,WAAW,CAAA;QACjC,aAAQ,GAAW,CAAC,CAAC,CAAA;IA+EnD,CAAC;IA1EC,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAA;QACtF,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QACxB,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;QAE5B,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACrB,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;YAChC,IAAI,WAAW,GAAG,MAAM,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAA;YAEjD,OAAO,IAAI,CAAA;6BACU,QAAQ,UAAU,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;;wBAEhD,QAAQ;sBACV,MAAM;sBACN,MAAM;qBACP,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;qBACnB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC;;SAEtC,CAAA;QACH,CAAC,CAAC;KACH,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC5C,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,sCAAsC;YACtC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAuB,CAAA;YAEtC,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;gBAC1C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;aACvB;YAED,IAAI,MAAM,CAAC,OAAO,KAAK,eAAe,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;gBACxE,OAAM;aACP;YAED,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;YACxB,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;QACxC,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC3C,IAAI,OAAO,GAAG,CAAC,CAAC,OAAO,CAAA;YACvB,QAAQ,OAAO,EAAE;gBACf,KAAK,OAAO,CAAC;gBACb,wBAAwB;gBACxB,KAAK,SAAS;oBACZ,IAAI,IAAI,CAAC,UAAU,EAAE;wBACnB,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;wBAC1C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;qBACvB;oBACD,MAAK;gBAEP,QAAQ;aACT;QACH,CAAC,CAAA;QACD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC3D,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC9D,CAAC;IAED,YAAY,CAAC,MAAoB;QAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAChC,IAAI,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA,IAAI,KAAK,GAAG,CAAA;IACzB,CAAC;CACF,CAAA;AApIQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CF;CACF,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAA6B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AAtDtC,cAAc;IAD1B,aAAa,CAAC,qBAAqB,CAAC;GACxB,cAAc,CAqI1B;SArIY,cAAc","sourcesContent":["import '@material/mwc-icon'\nimport '../data-grid/data-grid-field'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst KEY_ENTER = 13\nconst KEY_ESC = 27\n\n@customElement('ox-record-view-body')\nexport class RecordViewBody extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: 1fr 2fr;\n        grid-auto-rows: min-content;\n        grid-gap: var(--record-view-gap);\n        padding: var(--record-view-padding);\n      }\n\n      label {\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-transform: capitalize;\n\n        padding: var(--record-view-item-padding);\n        border-bottom: var(--record-view-border-bottom);\n        font: var(--record-view-label-font);\n        color: var(--record-view-label-color);\n      }\n\n      label mwc-icon {\n        display: none;\n      }\n\n      label[editable] mwc-icon {\n        display: inline-block;\n        font-size: var(--record-view-label-icon-size);\n        opacity: 0.5;\n      }\n\n      ox-grid-field {\n        border-bottom: var(--record-view-border-bottom);\n        font: var(--record-view-font);\n        color: var(--record-view-color);\n        background-color: transparent;\n      }\n\n      ox-grid-field[editing='true'] {\n        border-top: none;\n        border-bottom: var(--record-view-edit-border-bottom);\n      }\n\n      :first-child + ox-grid-field {\n        color: var(--record-view-focus-color);\n        font-weight: bold;\n      }\n    `\n  ]\n\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n\n  private editTarget: any\n  private _focusedListener: any\n\n  render() {\n    var columns = this.columns.filter(column => !column.hidden && column.type != 'gutter')\n    var record = this.record\n    var rowIndex = this.rowIndex\n\n    return html`\n      ${columns.map(column => {\n        let { editable } = column.record\n        let dirtyFields = record['__dirtyfields__'] || {}\n\n        return html`\n          <label ?editable=${editable}><span>${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label>\n          <ox-grid-field\n            .rowIndex=${rowIndex}\n            .column=${column}\n            .record=${record}\n            .value=${record[column.name]}\n            ?dirty=${!!dirtyFields[column.name]}\n          ></ox-grid-field>\n        `\n      })}\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('click', e => {\n      e.stopPropagation()\n\n      /* target should be 'ox-grid-field' */\n      var target = e.target as DataGridField\n\n      if (this.editTarget) {\n        this.editTarget.removeAttribute('editing')\n        this.editTarget = null\n      }\n\n      if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {\n        return\n      }\n\n      this.editTarget = target\n      target.setAttribute('editing', 'true')\n    })\n\n    this._focusedListener = (e: KeyboardEvent) => {\n      var keyCode = e.keyCode\n      switch (keyCode) {\n        case KEY_ESC:\n        /* TODO 편집이 취소되어야 한다. */\n        case KEY_ENTER:\n          if (this.editTarget) {\n            this.editTarget.removeAttribute('editing')\n            this.editTarget = null\n          }\n          break\n\n        default:\n      }\n    }\n    window.addEventListener('keydown', this._focusedListener)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    window.removeEventListener('keydown', this._focusedListener)\n  }\n\n  _renderLabel(column: ColumnConfig) {\n    var { renderer } = column.header\n    var title = renderer.call(this, column)\n\n    return html` ${title} `\n  }\n}\n"]}
+{"version":3,"file":"record-view-body.js","sourceRoot":"","sources":["../../../src/record-view/record-view-body.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '../data-grid/data-grid-field'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'\nimport { recordViewBodyKeydownHandler } from './event-handlers/record-view-body-keydown-handler'\n\n@customElement('ox-record-view-body')\nexport class RecordViewBody extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: 1fr 2fr;\n        grid-auto-rows: min-content;\n        grid-gap: var(--record-view-gap);\n        padding: var(--record-view-padding);\n      }\n\n      label {\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-transform: capitalize;\n\n        padding: var(--record-view-item-padding);\n        border-bottom: var(--record-view-border-bottom);\n        font: var(--record-view-label-font);\n        color: var(--record-view-label-color);\n      }\n\n      label mwc-icon {\n        display: none;\n      }\n\n      label[editable] mwc-icon {\n        display: inline-block;\n        font-size: var(--record-view-label-icon-size);\n        opacity: 0.5;\n      }\n\n      ox-grid-field {\n        border-top: none;\n        border-bottom: var(--record-view-border-bottom);\n        font: var(--record-view-font);\n        color: var(--record-view-color);\n        background-color: transparent;\n      }\n\n      ox-grid-field[editing='true'] {\n        border-bottom: var(--record-view-edit-border-bottom);\n      }\n\n      :first-child + ox-grid-field {\n        color: var(--record-view-focus-color);\n        font-weight: bold;\n      }\n    `\n  ]\n\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Boolean, attribute: 'only-for-edit' }) onlyForEdit: boolean = false\n\n  public currentTarget: any\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n\n    this.renderRoot.addEventListener('keydown', recordViewBodyKeydownHandler.bind(this))\n    this.renderRoot.addEventListener('click', recordViewBodyClickHandler.bind(this))\n  }\n\n  render() {\n    var columns = this.columns.filter(column => !column.hidden && column.type !== 'gutter')\n    var record = this.record\n    var rowIndex = this.rowIndex\n\n    return html`\n      ${columns.map(column => {\n        let { editable, mandatory } = column.record\n        let dirtyFields = record['__dirtyfields__'] || {}\n\n        return html`\n          <label ?editable=${editable}\n            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label\n          >\n          <ox-grid-field\n            .rowIndex=${rowIndex}\n            .column=${column}\n            .record=${record}\n            .value=${record[column.name]}\n            ?dirty=${!!dirtyFields[column.name]}\n            ?editing=${this.onlyForEdit}\n          ></ox-grid-field>\n        `\n      })}\n    `\n  }\n\n  _renderLabel(column: ColumnConfig) {\n    var { renderer } = column.header\n    var title = renderer.call(this, column)\n\n    return html` ${title} `\n  }\n}\n"]}

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

@@ -0,0 +1,9 @@
+import { RecordCard } from '../data-card/record-card';
+import { DataGridBody } from '../data-grid/data-grid-body';
+import { DataGridField } from '../data-grid/data-grid-field';
+import { RecordPartial } from '../data-list/record-partial';
+import { RecordView } from '../record-view/record-view';
+import { ColumnConfig, GristRecord } from '../types';
+export declare const RecordViewHandler: (columns: ColumnConfig[], record: GristRecord, rowIndex: number, field: DataGridField | RecordCard | RecordPartial | DataGridBody, popupOptions: {
+    [key: string]: any;
+}, closeCallback?: (() => void) | undefined) => RecordView;

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

@@ -0,0 +1,57 @@
+/*
+ * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
+ * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
+ */
+export const RecordViewHandler = function (columns, record, rowIndex, field, popupOptions, closeCallback) {
+    var recordView = document.createElement('ox-record-view');
+    recordView.columns = columns;
+    recordView.record = record;
+    recordView.rowIndex = rowIndex;
+    document.dispatchEvent(new CustomEvent('open-popup', {
+        detail: {
+            template: recordView,
+            options: {
+                backdrop: true,
+                size: 'large',
+                title: record['name'],
+                ...popupOptions
+            },
+            callback: (popup) => {
+                recordView.addEventListener('field-change', (e) => {
+                    field.dispatchEvent(new CustomEvent('field-change', {
+                        bubbles: true,
+                        composed: true,
+                        detail: e.detail
+                    }));
+                });
+                recordView.addEventListener('reset', (e) => {
+                    field.dispatchEvent(new CustomEvent('record-reset', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            record: record,
+                            row: rowIndex
+                        }
+                    }));
+                });
+                recordView.addEventListener('cancel', (e) => {
+                    field.dispatchEvent(new CustomEvent('record-reset', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            record: record,
+                            row: rowIndex
+                        }
+                    }));
+                    popup.close();
+                });
+                recordView.addEventListener('ok', (e) => {
+                    popup.close();
+                });
+                popup.onclosed = closeCallback;
+            }
+        }
+    }));
+    return recordView;
+};
+//# sourceMappingURL=record-view-handler.js.map

package/dist/src/record-view/record-view-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-handler.js","sourceRoot":"","sources":["../../../src/record-view/record-view-handler.ts"],"names":[],"mappings":"AAOA;;;GAGG;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,OAAuB,EACvB,MAAmB,EACnB,QAAgB,EAChB,KAAgE,EAChE,YAAoC,EACpC,aAA0B;IAE1B,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAe,CAAA;IAEvE,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;IAC5B,UAAU,CAAC,MAAM,GAAG,MAAM,CAAA;IAC1B,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAE9B,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,YAAY,EAAE;QAC5B,MAAM,EAAE;YACN,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE;gBACP,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;gBACrB,GAAG,YAAY;aAChB;YACD,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE;gBACvB,UAAU,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAQ,EAAE,EAAE;oBACvD,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;wBAC9B,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAG,CAAS,CAAC,MAAM;qBAC1B,CAAC,CACH,CAAA;gBACH,CAAC,CAAC,CAAA;gBAEF,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE;oBAChD,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;wBAC9B,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,MAAM,EAAE,MAAM;4BACd,GAAG,EAAE,QAAQ;yBACd;qBACF,CAAC,CACH,CAAA;gBACH,CAAC,CAAC,CAAA;gBAEF,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;oBACjD,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;wBAC9B,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,MAAM,EAAE,MAAM;4BACd,GAAG,EAAE,QAAQ;yBACd;qBACF,CAAC,CACH,CAAA;oBACD,KAAK,CAAC,KAAK,EAAE,CAAA;gBACf,CAAC,CAAC,CAAA;gBAEF,UAAU,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAQ,EAAE,EAAE;oBAC7C,KAAK,CAAC,KAAK,EAAE,CAAA;gBACf,CAAC,CAAC,CAAA;gBAEF,KAAK,CAAC,QAAQ,GAAG,aAAa,CAAA;YAChC,CAAC;SACF;KACK,CAAC,CACV,CAAA;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA","sourcesContent":["import { RecordCard } from '../data-card/record-card'\nimport { DataGridBody } from '../data-grid/data-grid-body'\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { RecordPartial } from '../data-list/record-partial'\nimport { RecordView } from '../record-view/record-view'\nimport { ColumnConfig, GristRecord } from '../types'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const RecordViewHandler = function (\n  columns: ColumnConfig[],\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField | RecordCard | RecordPartial | DataGridBody,\n  popupOptions: { [key: string]: any },\n  closeCallback?: () => void\n): RecordView {\n  var recordView = document.createElement('ox-record-view') as RecordView\n\n  recordView.columns = columns\n  recordView.record = record\n  recordView.rowIndex = rowIndex\n\n  document.dispatchEvent(\n    new CustomEvent('open-popup', {\n      detail: {\n        template: recordView,\n        options: {\n          backdrop: true,\n          size: 'large',\n          title: record['name'],\n          ...popupOptions\n        },\n        callback: (popup: any) => {\n          recordView.addEventListener('field-change', (e: Event) => {\n            field.dispatchEvent(\n              new CustomEvent('field-change', {\n                bubbles: true,\n                composed: true,\n                detail: (e as any).detail\n              })\n            )\n          })\n\n          recordView.addEventListener('reset', (e: Event) => {\n            field.dispatchEvent(\n              new CustomEvent('record-reset', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  record: record,\n                  row: rowIndex\n                }\n              })\n            )\n          })\n\n          recordView.addEventListener('cancel', (e: Event) => {\n            field.dispatchEvent(\n              new CustomEvent('record-reset', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  record: record,\n                  row: rowIndex\n                }\n              })\n            )\n            popup.close()\n          })\n\n          recordView.addEventListener('ok', (e: Event) => {\n            popup.close()\n          })\n\n          popup.onclosed = closeCallback\n        }\n      }\n    } as any)\n  )\n\n  return recordView\n}\n"]}

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

@@ -1,16 +1,17 @@
 import '@material/mwc-icon';
 import './record-view-body';
 import '@operato/input/ox-input-file.js';
+import '../data-grid/data-grid-field';
 import { LitElement } from 'lit';
-import { ColumnConfig, GristConfig, GristRecord } from '../types';
+import { ColumnConfig, GristRecord } from '../types';
 export declare class RecordView extends LitElement {
     static styles: import("lit").CSSResult[];
-    config: GristConfig;
     columns: ColumnConfig[];
     record: GristRecord;
     rowIndex: number;
+    onlyForEdit: boolean;
     render(): import("lit-html").TemplateResult<1>;
-    renderThumbnail(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
     onReset(): void;
     onCancel(): void;
     onOK(): void;

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

@@ -2,25 +2,28 @@ import { __decorate } from "tslib";
 import '@material/mwc-icon';
 import './record-view-body';
 import '@operato/input/ox-input-file.js';
+import '../data-grid/data-grid-field';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
-import { ZERO_CONFIG, ZERO_RECORD } from '../configure/zero-config';
+import { ZERO_RECORD } from '../configure/zero-config';
 let RecordView = class RecordView extends LitElement {
     constructor() {
         super(...arguments);
-        this.config = ZERO_CONFIG;
         this.columns = [];
         this.record = ZERO_RECORD;
         this.rowIndex = -1;
+        this.onlyForEdit = false;
     }
     render() {
         return html `
-      <div content>
-        <div thumbnail>${this.renderThumbnail()}</div>
-        <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
-        </ox-record-view-body>
-      </div>
+      <ox-record-view-body
+        .columns=${this.columns}
+        .record=${this.record}
+        .rowIndex=${this.rowIndex}
+        ?only-for-edit=${this.onlyForEdit}
+      >
+      </ox-record-view-body>
       <div footer>
         <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon>Reset</button>
         <button @click=${this.onCancel.bind(this)}><mwc-icon>clear</mwc-icon>Cancel</button>
@@ -28,44 +31,23 @@ let RecordView = class RecordView extends LitElement {
       </div>
     `;
     }
-    renderThumbnail() {
-        return html ``;
-        // const { thumbnail } = this.config.list
-        // const thumbnailColumn = thumbnail ? this.columns.find(column => column.name == thumbnail) : undefined
-        // const dirtyFields = this.record['__dirtyfields__'] || {}
-        // if (thumbnailColumn?.record.editable) {
-        //   return html`
-        //     <ox-input-file
-        //       name="image"
-        //       accept="*/*"
-        //       hide-filelist
-        //       @change=${async (e: CustomEvent) => {
-        //         // await uploader(e.detail, this.record, this.rowIndex)
-        //       }}
-        //     ></ox-input-file>
-        //     <ox-grid-field
-        //       .rowIndex=${this.rowIndex}
-        //       .column=${thumbnailColumn}
-        //       .record=${this.record}
-        //       .value=${this.record[thumbnail!]}
-        //       ?dirty=${!!dirtyFields[thumbnail!]}
-        //     ></ox-grid-field>
-        //   `
-        // } else {
-        //   return html``
-        // }
+    firstUpdated() {
+        this.setAttribute('tabindex', '0');
     }
     onReset() {
+        this.focus();
         this.dispatchEvent(new CustomEvent('reset', {
             detail: this.record
         }));
     }
     onCancel() {
+        this.focus();
         this.dispatchEvent(new CustomEvent('cancel', {
             detail: this.record
         }));
     }
     onOK() {
+        this.focus();
         this.dispatchEvent(new CustomEvent('ok', {
             detail: this.record
         }));
@@ -78,32 +60,15 @@ RecordView.styles = [
         display: flex;
         flex-direction: column;
         background-color: var(--record-view-background-color);
-      }
 
-      ox-record-view-body {
-        flex: 1;
+        max-height: 80vh;
       }
 
-      [content] {
+      ox-record-view-body {
         flex: 1;
-
-        display: block;
         overflow-y: auto;
       }
 
-      [thumbnail] {
-        max-height: 50%;
-        overflow: hidden;
-
-        display: flex;
-        align-content: center;
-        justify-content: center;
-      }
-
-      ox-input-file {
-        width: 100%;
-      }
-
       [footer] {
         display: flex;
         text-align: right;
@@ -136,9 +101,6 @@ RecordView.styles = [
       }
     `
 ];
-__decorate([
-    property({ type: Object })
-], RecordView.prototype, "config", void 0);
 __decorate([
     property({ type: Array })
 ], RecordView.prototype, "columns", void 0);
@@ -148,6 +110,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], RecordView.prototype, "rowIndex", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'only-for-edit' })
+], RecordView.prototype, "onlyForEdit", void 0);
 RecordView = __decorate([
     customElement('ox-record-view')
 ], RecordView);

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

@@ -1 +1 @@
-{"version":3,"file":"record-view.js","sourceRoot":"","sources":["../../../src/record-view/record-view.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAInE,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAmE8B,WAAM,GAAgB,WAAW,CAAA;QAClC,YAAO,GAAmB,EAAE,CAAA;QAC3B,WAAM,GAAgB,WAAW,CAAA;QACjC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAsEnD,CAAC;IApEC,MAAM;QACJ,OAAO,IAAI,CAAA;;yBAEU,IAAI,CAAC,eAAe,EAAE;wCACP,IAAI,CAAC,OAAO,YAAY,IAAI,CAAC,MAAM,cAAc,IAAI,CAAC,QAAQ;;;;yBAI7E,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;yBACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;yBACxB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;KAExC,CAAA;IACH,CAAC;IAED,eAAe;QACb,OAAO,IAAI,CAAA,EAAE,CAAA;QAEb,yCAAyC;QACzC,wGAAwG;QACxG,2DAA2D;QAE3D,0CAA0C;QAC1C,iBAAiB;QACjB,qBAAqB;QACrB,qBAAqB;QACrB,qBAAqB;QACrB,sBAAsB;QACtB,8CAA8C;QAC9C,kEAAkE;QAClE,WAAW;QACX,wBAAwB;QACxB,qBAAqB;QACrB,mCAAmC;QACnC,mCAAmC;QACnC,+BAA+B;QAC/B,0CAA0C;QAC1C,4CAA4C;QAC5C,wBAAwB;QACxB,MAAM;QACN,WAAW;QACX,kBAAkB;QAClB,IAAI;IACN,CAAC;IAED,OAAO;QACL,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,IAAI;QACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,IAAI,EAAE;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AA3IQ,iBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkC;AAClC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAA6B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAsB;AAtEtC,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CA4ItB;SA5IY,UAAU","sourcesContent":["import '@material/mwc-icon'\nimport './record-view-body'\nimport '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ZERO_CONFIG, ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristConfig, GristRecord } from '../types'\n\n@customElement('ox-record-view')\nexport class RecordView extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--record-view-background-color);\n      }\n\n      ox-record-view-body {\n        flex: 1;\n      }\n\n      [content] {\n        flex: 1;\n\n        display: block;\n        overflow-y: auto;\n      }\n\n      [thumbnail] {\n        max-height: 50%;\n        overflow: hidden;\n\n        display: flex;\n        align-content: center;\n        justify-content: center;\n      }\n\n      ox-input-file {\n        width: 100%;\n      }\n\n      [footer] {\n        display: flex;\n        text-align: right;\n        background-color: var(--record-view-footer-background);\n        box-shadow: var(--context-toolbar-shadow-line);\n      }\n\n      [footer] button {\n        flex: 1;\n        background-color: transparent;\n        border: var(--record-view-footer-button-border);\n        border-width: var(--record-view-footer-button-border-width);\n        color: var(--record-view-footer-button-color);\n        font-size: var(--record-view-footer-button-font);\n        line-height: 3;\n      }\n\n      [footer] button * {\n        vertical-align: middle;\n      }\n\n      [footer] button mwc-icon {\n        margin-top: -3px;\n        margin-right: 5px;\n        font-size: var(--record-view-footer-iconbutton-size);\n      }\n\n      [footer] button[ok] {\n        background-color: var(--record-view-footer-focus-background);\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n\n  render() {\n    return html`\n      <div content>\n        <div thumbnail>${this.renderThumbnail()}</div>\n        <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>\n        </ox-record-view-body>\n      </div>\n      <div footer>\n        <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon>Reset</button>\n        <button @click=${this.onCancel.bind(this)}><mwc-icon>clear</mwc-icon>Cancel</button>\n        <button @click=${this.onOK.bind(this)} ok><mwc-icon>radio_button_unchecked</mwc-icon>OK</button>\n      </div>\n    `\n  }\n\n  renderThumbnail() {\n    return html``\n\n    // const { thumbnail } = this.config.list\n    // const thumbnailColumn = thumbnail ? this.columns.find(column => column.name == thumbnail) : undefined\n    // const dirtyFields = this.record['__dirtyfields__'] || {}\n\n    // if (thumbnailColumn?.record.editable) {\n    //   return html`\n    //     <ox-input-file\n    //       name=\"image\"\n    //       accept=\"*/*\"\n    //       hide-filelist\n    //       @change=${async (e: CustomEvent) => {\n    //         // await uploader(e.detail, this.record, this.rowIndex)\n    //       }}\n    //     ></ox-input-file>\n    //     <ox-grid-field\n    //       .rowIndex=${this.rowIndex}\n    //       .column=${thumbnailColumn}\n    //       .record=${this.record}\n    //       .value=${this.record[thumbnail!]}\n    //       ?dirty=${!!dirtyFields[thumbnail!]}\n    //     ></ox-grid-field>\n    //   `\n    // } else {\n    //   return html``\n    // }\n  }\n\n  onReset() {\n    this.dispatchEvent(\n      new CustomEvent('reset', {\n        detail: this.record\n      })\n    )\n  }\n\n  onCancel() {\n    this.dispatchEvent(\n      new CustomEvent('cancel', {\n        detail: this.record\n      })\n    )\n  }\n\n  onOK() {\n    this.dispatchEvent(\n      new CustomEvent('ok', {\n        detail: this.record\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"record-view.js","sourceRoot":"","sources":["../../../src/record-view/record-view.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AACxC,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAItD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAkD6B,YAAO,GAAmB,EAAE,CAAA;QAC3B,WAAM,GAAgB,WAAW,CAAA;QACjC,aAAQ,GAAW,CAAC,CAAC,CAAA;QACQ,gBAAW,GAAY,KAAK,CAAA;IAoDvF,CAAC;IAlDC,MAAM;QACJ,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,OAAO;kBACb,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,WAAW;;;;yBAIhB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;yBACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;yBACxB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;KAExC,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;IACpC,CAAC;IAED,OAAO;QACL,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,IAAI,EAAE;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AAxGQ,iBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;CACF,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAA6B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAsB;AACQ;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CAA6B;AArD1E,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CAyGtB;SAzGY,UAAU","sourcesContent":["import '@material/mwc-icon'\nimport './record-view-body'\nimport '@operato/input/ox-input-file.js'\nimport '../data-grid/data-grid-field'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\n@customElement('ox-record-view')\nexport class RecordView extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--record-view-background-color);\n\n        max-height: 80vh;\n      }\n\n      ox-record-view-body {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      [footer] {\n        display: flex;\n        text-align: right;\n        background-color: var(--record-view-footer-background);\n        box-shadow: var(--context-toolbar-shadow-line);\n      }\n\n      [footer] button {\n        flex: 1;\n        background-color: transparent;\n        border: var(--record-view-footer-button-border);\n        border-width: var(--record-view-footer-button-border-width);\n        color: var(--record-view-footer-button-color);\n        font-size: var(--record-view-footer-button-font);\n        line-height: 3;\n      }\n\n      [footer] button * {\n        vertical-align: middle;\n      }\n\n      [footer] button mwc-icon {\n        margin-top: -3px;\n        margin-right: 5px;\n        font-size: var(--record-view-footer-iconbutton-size);\n      }\n\n      [footer] button[ok] {\n        background-color: var(--record-view-footer-focus-background);\n      }\n    `\n  ]\n\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Boolean, attribute: 'only-for-edit' }) onlyForEdit: boolean = false\n\n  render() {\n    return html`\n      <ox-record-view-body\n        .columns=${this.columns}\n        .record=${this.record}\n        .rowIndex=${this.rowIndex}\n        ?only-for-edit=${this.onlyForEdit}\n      >\n      </ox-record-view-body>\n      <div footer>\n        <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon>Reset</button>\n        <button @click=${this.onCancel.bind(this)}><mwc-icon>clear</mwc-icon>Cancel</button>\n        <button @click=${this.onOK.bind(this)} ok><mwc-icon>radio_button_unchecked</mwc-icon>OK</button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.setAttribute('tabindex', '0')\n  }\n\n  onReset() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('reset', {\n        detail: this.record\n      })\n    )\n  }\n\n  onCancel() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('cancel', {\n        detail: this.record\n      })\n    )\n  }\n\n  onOK() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('ok', {\n        detail: this.record\n      })\n    )\n  }\n}\n"]}

package/dist/src/sorters/sorters-control.d.ts

@@ -0,0 +1,12 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ColumnConfig, GristConfig, SorterConfig } from '../types';
+export declare class SortersControl extends LitElement {
+    static styles: import("lit").CSSResult[];
+    config: GristConfig;
+    columns: ColumnConfig[];
+    sorters: SorterConfig[];
+    connectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
+    render(): TemplateResult;
+    onChangeSort(name: string): void;
+}

package/dist/src/sorters/sorters-control.js

@@ -0,0 +1,120 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+let SortersControl = class SortersControl extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.sorters = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const grist = this.closest('ox-grist');
+        if (grist) {
+            this.config = grist.compiledConfig;
+            grist.addEventListener('config-change', (e) => {
+                this.config = e.detail;
+            });
+            grist.addEventListener('sorters-change', e => {
+                this.sorters = e.detail;
+            });
+        }
+    }
+    updated(changes) {
+        if (changes.has('config')) {
+            const sorters = this.config.sorters || [];
+            this.columns = this.config.columns.filter(column => column.sortable);
+            this.sorters = this.config.sorters || [];
+        }
+    }
+    render() {
+        const columns = this.columns;
+        const current = this.sorters || [];
+        return html `
+      ${columns.map(column => {
+            const { name } = column;
+            var rank = current.findIndex(sorter => sorter.name === name) + 1;
+            var desc = rank !== 0 ? current[rank - 1].desc : null;
+            if (current.length <= 1) {
+                rank = 0;
+            }
+            return html `
+          <div
+            option
+            @click=${(e) => {
+                this.onChangeSort(name);
+            }}
+          >
+            <span>${column.header.renderer.call(this, column)}</span>
+            ${desc === null
+                ? html ``
+                : html `
+                  <mwc-icon>${desc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</mwc-icon>
+                  ${rank === 0 ? html `` : html `<sub>${rank}</sub>`}
+                `}
+          </div>
+        `;
+        })}
+    `;
+    }
+    onChangeSort(name) {
+        var sorters = [...this.sorters];
+        var idx = sorters.findIndex(sorter => sorter.name == name);
+        if (idx !== -1) {
+            let sorter = sorters[idx];
+            if (sorter.desc) {
+                sorters.splice(idx, 1);
+            }
+            else {
+                sorter.desc = true;
+            }
+        }
+        else {
+            var sorter = {
+                name
+            };
+            sorters.push(sorter);
+        }
+        this.sorters = sorters;
+        this.dispatchEvent(new CustomEvent('sorters-change', {
+            bubbles: true,
+            composed: true,
+            detail: this.sorters
+        }));
+    }
+};
+SortersControl.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        white-space: nowrap;
+      }
+
+      [option] {
+        flex: 1;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      [option] > span {
+        margin-right: auto;
+      }
+    `
+];
+__decorate([
+    state()
+], SortersControl.prototype, "config", void 0);
+__decorate([
+    state()
+], SortersControl.prototype, "columns", void 0);
+__decorate([
+    state()
+], SortersControl.prototype, "sorters", void 0);
+SortersControl = __decorate([
+    customElement('ox-sorters-control')
+], SortersControl);
+export { SortersControl };
+//# sourceMappingURL=sorters-control.js.map

package/dist/src/sorters/sorters-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sorters-control.js","sourceRoot":"","sources":["../../../src/sorters/sorters-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristConfig, SorterConfig } from '../types'\n\n@customElement('ox-sorters-control')\nexport class SortersControl extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        white-space: nowrap;\n      }\n\n      [option] {\n        flex: 1;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      [option] > span {\n        margin-right: auto;\n      }\n    `\n  ]\n\n  @state() config!: GristConfig\n  @state() columns: ColumnConfig[] = []\n  @state() sorters: SorterConfig[] = []\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    const grist = this.closest('ox-grist') as DataGrist\n\n    if (grist) {\n      this.config = grist.compiledConfig\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      grist.addEventListener('sorters-change', e => {\n        this.sorters = (e as CustomEvent).detail as SorterConfig[]\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const sorters = this.config.sorters || []\n\n      this.columns = this.config.columns.filter(column => column.sortable)\n      this.sorters = this.config.sorters || []\n    }\n  }\n\n  render(): TemplateResult {\n    const columns = this.columns\n\n    const current = this.sorters || []\n\n    return html`\n      ${columns.map(column => {\n        const { name } = column\n        var rank = current.findIndex(sorter => sorter.name === name) + 1\n        var desc = rank !== 0 ? current[rank - 1].desc : null\n\n        if (current.length <= 1) {\n          rank = 0\n        }\n\n        return html`\n          <div\n            option\n            @click=${(e: MouseEvent) => {\n              this.onChangeSort(name)\n            }}\n          >\n            <span>${column.header.renderer.call(this, column)}</span>\n            ${desc === null\n              ? html``\n              : html`\n                  <mwc-icon>${desc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</mwc-icon>\n                  ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}\n                `}\n          </div>\n        `\n      })}\n    `\n  }\n\n  onChangeSort(name: string) {\n    var sorters = [...this.sorters]\n\n    var idx = sorters.findIndex(sorter => sorter.name == name)\n    if (idx !== -1) {\n      let sorter = sorters[idx]\n      if (sorter.desc) {\n        sorters.splice(idx, 1)\n      } else {\n        sorter.desc = true\n      }\n    } else {\n      var sorter = {\n        name\n      }\n\n      sorters.push(sorter)\n    }\n\n    this.sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('sorters-change', {\n        bubbles: true,\n        composed: true,\n        detail: this.sorters\n      })\n    )\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -19,13 +19,15 @@ export declare type SorterConfig = {
     desc?: boolean;
 };
 export declare type SortersConfig = SorterConfig[];
-export declare type FilterConfig = {
+export declare type FilterOperator = 'search' | 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' | 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' | 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike';
+export declare type FilterConfigObject = {
     type: string;
-    operator?: 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' | 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' | 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike';
+    operator?: FilterOperator;
     options?: {
         [key: string]: any;
     };
-} | boolean;
+};
+export declare type FilterConfig = FilterConfigObject | FilterOperator | boolean;
 export declare type PaginationConfig = {
     page?: number;
     limit?: number;
@@ -77,6 +79,7 @@ export declare type RecordConfig = {
     renderer: FieldRenderer;
     editor?: FieldEditor;
     editable?: boolean;
+    mandatory?: boolean;
     classifier: GristClassifier;
     align?: 'left' | 'right' | 'center';
     options: {
@@ -84,7 +87,7 @@ export declare type RecordConfig = {
     };
     rowOptionField?: string;
 };
-export declare type FieldRenderer = (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, owner: RecordCard | DataCardGutter | DataCardField | DataListGutter | DataListField | RecordPartial | DataReportField) => TemplateResult | string | void;
+export declare type FieldRenderer = (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, owner: RecordCard | DataCardGutter | DataCardField | DataListGutter | DataListField | RecordPartial | DataReportField | Element) => TemplateResult | string | void;
 export declare type FieldEditor = (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) => Element;
 export declare type FilterSelectRenderer = (column: ColumnConfig, owner: Element) => TemplateResult | string | void;
 export declare type GristEventHandlerSet = {

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field'\nimport { DataCardGutter } from './data-card/data-card-gutter'\nimport { RecordCard } from './data-card/record-card'\nimport { DataGridField } from './data-grid/data-grid-field'\nimport { DataListField } from './data-list/data-list-field'\nimport { DataListGutter } from './data-list/data-list-gutter'\nimport { RecordPartial } from './data-list/record-partial'\nimport { DataReportField } from './data-report/data-report-field'\n\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n}\n\nexport type SorterConfig = { name: string; desc?: boolean }\nexport type SortersConfig = SorterConfig[]\nexport type FilterConfig =\n  | {\n      type: string\n      operator?:\n        | 'eq'\n        | 'between'\n        | 'gte'\n        | 'lte'\n        | 'is_not_true'\n        | 'in'\n        | 'like'\n        | 'i_like'\n        | 'noteq'\n        | 'is_empty_num_id'\n        | 'is_blank'\n        | 'is_present'\n        | 'is_not_false'\n        | 'is_true'\n        | 'is_false'\n        | 'is_not_null'\n        | 'is_null'\n        | 'notin_with_null'\n        | 'notin'\n        | 'gt'\n        | 'lt'\n        | 'i_nlike'\n        | 'nlike'\n      options?: { [key: string]: any }\n    }\n  | boolean\n\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\nexport type FetchOption = { page?: number; limit?: number; sorters?: object[]; options?: object }\nexport type FetchHandler = (param: FetchOption) => {\n  page?: number\n  limit?: number\n  total: number\n  records: object[]\n}\n\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any\n) => void\n\nexport type ColumnConfig = {\n  type: string\n  name: string\n  gutterName?: string\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  validation?: ValidationCallback\n  filter?: FilterConfig\n  imex?: ImexConfig\n  multiple?: boolean\n}\n\nexport type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean\n\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n    }\n\nexport type LabelRenderer = () => void\n\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n}\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: { [key: string]: any }\n  rowOptionField?: string\n}\n\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner: RecordCard | DataCardGutter | DataCardField | DataListGutter | DataListField | RecordPartial | DataReportField\n) => TemplateResult | string | void\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => Element\nexport type FilterSelectRenderer = (column: ColumnConfig, owner: Element) => TemplateResult | string | void\n\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n}\n\nexport type ListConfig = {\n  thumbnail?: string\n  fields: string[]\n  details: string[]\n}\n\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\nexport type RowsConfig = {\n  appendable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\nexport type GristRecord = {\n  id?: string\n  name?: string\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  [key: string]: any\n}\n\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field'\nimport { DataCardGutter } from './data-card/data-card-gutter'\nimport { RecordCard } from './data-card/record-card'\nimport { DataGridField } from './data-grid/data-grid-field'\nimport { DataListField } from './data-list/data-list-field'\nimport { DataListGutter } from './data-list/data-list-gutter'\nimport { RecordPartial } from './data-list/record-partial'\nimport { DataReportField } from './data-report/data-report-field'\n\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n}\n\nexport type SorterConfig = { name: string; desc?: boolean }\nexport type SortersConfig = SorterConfig[]\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type FilterConfigObject = {\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n}\nexport type FilterConfig = FilterConfigObject | FilterOperator | boolean\n\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\nexport type FetchOption = { page?: number; limit?: number; sorters?: object[]; options?: object }\nexport type FetchHandler = (param: FetchOption) => {\n  page?: number\n  limit?: number\n  total: number\n  records: object[]\n}\n\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any\n) => void\n\nexport type ColumnConfig = {\n  type: string\n  name: string\n  gutterName?: string\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  validation?: ValidationCallback\n  filter?: FilterConfig\n  imex?: ImexConfig\n  multiple?: boolean\n}\n\nexport type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean\n\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n    }\n\nexport type LabelRenderer = () => void\n\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n}\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean\n  mandatory?: boolean\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: { [key: string]: any }\n  rowOptionField?: string\n}\n\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner:\n    | RecordCard\n    | DataCardGutter\n    | DataCardField\n    | DataListGutter\n    | DataListField\n    | RecordPartial\n    | DataReportField\n    | Element\n) => TemplateResult | string | void\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => Element\nexport type FilterSelectRenderer = (column: ColumnConfig, owner: Element) => TemplateResult | string | void\n\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n}\n\nexport type ListConfig = {\n  thumbnail?: string\n  fields: string[]\n  details: string[]\n}\n\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\nexport type RowsConfig = {\n  appendable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\nexport type GristRecord = {\n  id?: string\n  name?: string\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  [key: string]: any\n}\n\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n"]}