@operato/data-grist 0.3.13 → 0.3.17

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

@@ -4,17 +4,24 @@ 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 `
@@ -29,46 +36,12 @@ let RecordViewBody = class RecordViewBody extends LitElement {
             .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);
@@ -82,10 +55,7 @@ RecordViewBody.styles = [
         grid-template-columns: 1fr 2fr;
         grid-auto-rows: min-content;
         grid-gap: var(--record-view-gap);
-        background-color: var(--record-view-background-color);
         padding: var(--record-view-padding);
-
-        overflow-y: auto;
       }
 
       label {
@@ -111,6 +81,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);
@@ -118,7 +89,6 @@ RecordViewBody.styles = [
       }
 
       ox-grid-field[editing='true'] {
-        border-top: none;
         border-bottom: var(--record-view-edit-border-bottom);
       }
 
@@ -137,6 +107,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;;QAuD6B,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;AAvIQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;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;AAzDtC,cAAc;IAD1B,aAAa,CAAC,qBAAqB,CAAC;GACxB,cAAc,CAwI1B;SAxIY,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        background-color: var(--record-view-background-color);\n        padding: var(--record-view-padding);\n\n        overflow-y: auto;\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 } = 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            ?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,13 +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, GristRecord } from '../types';
 export declare class RecordView extends LitElement {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     columns: ColumnConfig[];
     record: GristRecord;
     rowIndex: number;
+    onlyForEdit: boolean;
     render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
     onReset(): void;
     onCancel(): void;
     onOK(): void;

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

@@ -1,8 +1,11 @@
 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_RECORD } from '../configure/zero-config';
 let RecordView = class RecordView extends LitElement {
     constructor() {
@@ -10,10 +13,16 @@ let RecordView = class RecordView extends LitElement {
         this.columns = [];
         this.record = ZERO_RECORD;
         this.rowIndex = -1;
+        this.onlyForEdit = false;
     }
     render() {
         return html `
-      <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
+      <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>
@@ -22,63 +31,76 @@ let RecordView = class RecordView extends LitElement {
       </div>
     `;
     }
+    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
         }));
     }
 };
-RecordView.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-    }
+RecordView.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--record-view-background-color);
 
-    ox-record-view-body {
-      flex: 1;
-    }
+        max-height: 80vh;
+      }
 
-    [footer] {
-      display: flex;
-      text-align: right;
-      background-color: var(--record-view-footer-background);
-      box-shadow: var(--context-toolbar-shadow-line);
-    }
+      ox-record-view-body {
+        flex: 1;
+        overflow-y: auto;
+      }
 
-    [footer] button {
-      flex: 1;
-      background-color: transparent;
-      border: var(--record-view-footer-button-border);
-      border-width: var(--record-view-footer-button-border-width);
-      color: var(--record-view-footer-button-color);
-      font-size: var(--record-view-footer-button-font);
-      line-height: 3;
-    }
+      [footer] {
+        display: flex;
+        text-align: right;
+        background-color: var(--record-view-footer-background);
+        box-shadow: var(--context-toolbar-shadow-line);
+      }
 
-    [footer] button * {
-      vertical-align: middle;
-    }
+      [footer] button {
+        flex: 1;
+        background-color: transparent;
+        border: var(--record-view-footer-button-border);
+        border-width: var(--record-view-footer-button-border-width);
+        color: var(--record-view-footer-button-color);
+        font-size: var(--record-view-footer-button-font);
+        line-height: 3;
+      }
 
-    [footer] button mwc-icon {
-      margin-top: -3px;
-      margin-right: 5px;
-      font-size: var(--record-view-footer-iconbutton-size);
-    }
+      [footer] button * {
+        vertical-align: middle;
+      }
 
-    [footer] button[ok] {
-      background-color: var(--record-view-footer-focus-background);
-    }
-  `;
+      [footer] button mwc-icon {
+        margin-top: -3px;
+        margin-right: 5px;
+        font-size: var(--record-view-footer-iconbutton-size);
+      }
+
+      [footer] button[ok] {
+        background-color: var(--record-view-footer-focus-background);
+      }
+    `
+];
 __decorate([
     property({ type: Array })
 ], RecordView.prototype, "columns", void 0);
@@ -88,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;AAE3B,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,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QA2C6B,YAAO,GAAmB,EAAE,CAAA;QAC3B,WAAM,GAAgB,WAAW,CAAA;QACjC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAqCnD,CAAC;IAnCC,MAAM;QACJ,OAAO,IAAI,CAAA;sCACuB,IAAI,CAAC,OAAO,YAAY,IAAI,CAAC,MAAM,cAAc,IAAI,CAAC,QAAQ;;;yBAG3E,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,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;AAjFQ,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwClB,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;AA7CtC,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CAkFtB;SAlFY,UAAU","sourcesContent":["import '@material/mwc-icon'\nimport './record-view-body'\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'\n\n@customElement('ox-record-view')\nexport class RecordView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    ox-record-view-body {\n      flex: 1;\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  @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      <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>\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  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/renderers/image-renderer.js

@@ -1,9 +1,11 @@
 import { html } from 'lit';
+const IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href;
 export const ImageRenderer = (value, column, record, rowIndex, field) => {
-    if (!value)
-        return html ``;
     let src;
-    if (typeof value === 'string') {
+    if (!value) {
+        src = IMAGE_FALLBACK;
+    }
+    else if (typeof value === 'string') {
         src = value;
     }
     else {
@@ -11,6 +13,12 @@ export const ImageRenderer = (value, column, record, rowIndex, field) => {
         requestAnimationFrame(() => URL.revokeObjectURL(src));
     }
     const { width, height } = column.record.options || {};
-    return html ` <img src=${src} alt="upload image" width=${width} height=${height} />`;
+    return html ` <img
+    src=${src}
+    width=${width}
+    height=${height}
+    style="max-width: 100%;"
+    onerror="this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')"
+  />`;
 };
 //# sourceMappingURL=image-renderer.js.map

package/dist/src/renderers/image-renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-renderer.js","sourceRoot":"","sources":["../../../src/renderers/image-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACrF,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA,EAAE,CAAA;IAEzB,IAAI,GAAW,CAAA;IAEf,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,GAAG,GAAG,KAAK,CAAA;KACZ;SAAM;QACL,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;QAChC,qBAAqB,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;KACtD;IAED,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAErD,OAAO,IAAI,CAAA,aAAa,GAAG,6BAA6B,KAAK,WAAW,MAAM,KAAK,CAAA;AACrF,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n  if (!value) return html``\n\n  let src: string\n\n  if (typeof value === 'string') {\n    src = value\n  } else {\n    src = URL.createObjectURL(value)\n    requestAnimationFrame(() => URL.revokeObjectURL(src))\n  }\n\n  const { width, height } = column.record.options || {}\n\n  return html` <img src=${src} alt=\"upload image\" width=${width} height=${height} />`\n}\n"]}
+{"version":3,"file":"image-renderer.js","sourceRoot":"","sources":["../../../src/renderers/image-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE3F,MAAM,CAAC,MAAM,aAAa,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACrF,IAAI,GAAW,CAAA;IAEf,IAAI,CAAC,KAAK,EAAE;QACV,GAAG,GAAG,cAAc,CAAA;KACrB;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACpC,GAAG,GAAG,KAAK,CAAA;KACZ;SAAM;QACL,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;QAChC,qBAAqB,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;KACtD;IAED,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAErD,OAAO,IAAI,CAAA;UACH,GAAG;YACD,KAAK;aACJ,MAAM;;6BAEU,cAAc,qBAAqB,cAAc;KACzE,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types'\n\nconst IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href\n\nexport const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n  let src: string\n\n  if (!value) {\n    src = IMAGE_FALLBACK\n  } else if (typeof value === 'string') {\n    src = value\n  } else {\n    src = URL.createObjectURL(value)\n    requestAnimationFrame(() => URL.revokeObjectURL(src))\n  }\n\n  const { width, height } = column.record.options || {}\n\n  return html` <img\n    src=${src}\n    width=${width}\n    height=${height}\n    style=\"max-width: 100%;\"\n    onerror=\"this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')\"\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,106 @@
+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() {
+        var _a;
+        super.connectedCallback();
+        const grist = this.closest('ox-grist');
+        if (grist) {
+            this.config = grist.config;
+            (_a = this.closest('ox-grist')) === null || _a === void 0 ? void 0 : _a.addEventListener('sorters-change', e => {
+                this.sorters = e.detail;
+            });
+        }
+    }
+    updated(changes) {
+        if (changes.has('config')) {
+            const sorters = this.config.sorters || [];
+            this.columns = sorters
+                .map(({ name }) => this.config.columns.find(column => column.name === name))
+                .filter(column => !!column);
+            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);
+            }}
+          >
+            ${column.header /*.renderer.call(this, column) */}
+            ${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: block;
+      }
+    `
+];
+__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: block;\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.config\n\n      this.closest('ox-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 = sorters\n        .map(({ name }) => this.config.columns.find(column => column.name === name))\n        .filter(column => !!column) as ColumnConfig[]\n\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            ${column.header /*.renderer.call(this, column) */}\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

@@ -84,16 +84,15 @@ 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 FieldThumbnailRenderer = (record: GristRecord, rowIndex: number) => TemplateResult | string | void;
 export declare type FilterSelectRenderer = (column: ColumnConfig, owner: Element) => TemplateResult | string | void;
 export declare type GristEventHandlerSet = {
     click?: GristEventHandler;
     dblclick?: GristEventHandler;
 };
 export declare type ListConfig = {
-    thumbnail: FieldThumbnailRenderer;
+    thumbnail?: string;
     fields: string[];
     details: string[];
 };