@operato/data-grist 9.0.0-beta.61 → 9.0.0-beta.63

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

@@ -0,0 +1,96 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import './data-card-gutter.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { OxPopup } from '@operato/popup';
+let DataCardGutterMenu = class DataCardGutterMenu extends LitElement {
+    render() {
+        return html `
+      <md-icon @click=${(e) => this.open(e)}>more_horiz</md-icon>
+      <slot></slot>
+    `;
+    }
+    menuRender() {
+        return html `
+      ${this.gutters.map(gutter => html `
+          <ox-card-gutter
+            .rowIndex=${this.rowIndex}
+            .column=${gutter}
+            .record=${this.record}
+            .value=${this.record[gutter.name]}
+            menu
+            alive-on-select
+            @click=${(e) => {
+            this.clickHandler(e);
+            // TODO close popup
+        }}
+            @dblclick=${(e) => {
+            this.dblclickHandler(e);
+            // TODO close popup
+        }}
+          ></ox-card-gutter>
+        `)}
+    `;
+    }
+    open(e) {
+        e.stopPropagation();
+        const bottom = this.icon.offsetHeight;
+        const left = -4;
+        const parent = this;
+        OxPopup.open({
+            template: this.menuRender(),
+            bottom,
+            left,
+            parent
+        });
+    }
+};
+DataCardGutterMenu.styles = css `
+    :host {
+      position: relative;
+    }
+
+    ::slotted(ox-popup) {
+      padding: var(--spacing-small);
+    }
+
+    md-icon {
+      flex: 1;
+      margin: var(--spacing-none);
+      border: var(--data-card-item-btn-border);
+      border-radius: var(--data-card-item-btn-border-radius);
+      padding: var(--data-card-item-btn-padding);
+      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+      background-color: transparent;
+      color: var(--grid-record-color);
+    }
+
+    md-icon:hover {
+      cursor: pointer;
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], DataCardGutterMenu.prototype, "gutters", void 0);
+__decorate([
+    property({ type: Number })
+], DataCardGutterMenu.prototype, "rowIndex", void 0);
+__decorate([
+    property({ type: Object })
+], DataCardGutterMenu.prototype, "record", void 0);
+__decorate([
+    property()
+], DataCardGutterMenu.prototype, "clickHandler", void 0);
+__decorate([
+    property()
+], DataCardGutterMenu.prototype, "dblclickHandler", void 0);
+__decorate([
+    query('md-icon')
+], DataCardGutterMenu.prototype, "icon", void 0);
+DataCardGutterMenu = __decorate([
+    customElement('ox-card-gutter-menu')
+], DataCardGutterMenu);
+//# sourceMappingURL=data-card-gutter-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-card-gutter-menu.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter-menu.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAKxC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAoCzC,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;;KAE7C,CAAA;IACH,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;wBAEE,IAAI,CAAC,QAAQ;sBACf,MAAM;sBACN,IAAI,CAAC,MAAM;qBACZ,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;;;qBAGxB,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;YACpB,mBAAmB;QACrB,CAAC;wBACW,CAAC,CAAQ,EAAE,EAAE;YACvB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;YACvB,mBAAmB;QACrB,CAAC;;SAEJ,CACF;KACF,CAAA;IACH,CAAC;IAED,IAAI,CAAC,CAAQ;QACX,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,MAAM,MAAM,GAAI,IAAI,CAAC,IAAoB,CAAC,YAAY,CAAA;QACtD,MAAM,IAAI,GAAG,CAAC,CAAC,CAAA;QACf,MAAM,MAAM,GAAG,IAAI,CAAA;QAEnB,OAAO,CAAC,IAAI,CAAC;YACX,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;YAC3B,MAAM;YACN,IAAI;YACJ,MAAM;SACP,CAAC,CAAA;IACJ,CAAC;;AAhFM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBlB,AAzBY,CAyBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAqB;AACpC;IAAX,QAAQ,EAAE;wDAA6B;AAC5B;IAAX,QAAQ,EAAE;2DAAgC;AAEzB;IAAjB,KAAK,CAAC,SAAS,CAAC;gDAAe;AAlC5B,kBAAkB;IADvB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,kBAAkB,CAkFvB","sourcesContent":["import '@material/web/icon/icon.js'\nimport './data-card-gutter.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-gutter-menu')\nclass DataCardGutterMenu extends LitElement {\n  static styles = css`\n    :host {\n      position: relative;\n    }\n\n    ::slotted(ox-popup) {\n      padding: var(--spacing-small);\n    }\n\n    md-icon {\n      flex: 1;\n      margin: var(--spacing-none);\n      border: var(--data-card-item-btn-border);\n      border-radius: var(--data-card-item-btn-border-radius);\n      padding: var(--data-card-item-btn-padding);\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      background-color: transparent;\n      color: var(--grid-record-color);\n    }\n\n    md-icon:hover {\n      cursor: pointer;\n      background-color: var(--md-sys-color-primary);\n      color: var(--md-sys-color-on-primary);\n    }\n  `\n\n  @property({ type: Object }) gutters!: ColumnConfig[]\n  @property({ type: Number }) rowIndex!: number\n  @property({ type: Object }) record!: GristRecord\n  @property() clickHandler!: EventListener\n  @property() dblclickHandler!: EventListener\n\n  @query('md-icon') icon!: Element\n\n  render() {\n    return html`\n      <md-icon @click=${(e: Event) => this.open(e)}>more_horiz</md-icon>\n      <slot></slot>\n    `\n  }\n\n  menuRender() {\n    return html`\n      ${this.gutters.map(\n        gutter => html`\n          <ox-card-gutter\n            .rowIndex=${this.rowIndex}\n            .column=${gutter}\n            .record=${this.record}\n            .value=${this.record[gutter.name]}\n            menu\n            alive-on-select\n            @click=${(e: Event) => {\n              this.clickHandler(e)\n              // TODO close popup\n            }}\n            @dblclick=${(e: Event) => {\n              this.dblclickHandler(e)\n              // TODO close popup\n            }}\n          ></ox-card-gutter>\n        `\n      )}\n    `\n  }\n\n  open(e: Event) {\n    e.stopPropagation()\n\n    const bottom = (this.icon as HTMLElement).offsetHeight\n    const left = -4\n    const parent = this\n\n    OxPopup.open({\n      template: this.menuRender(),\n      bottom,\n      left,\n      parent\n    })\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ColumnConfig, GristRecord } from '../types.js';
+export declare class DataCardGutter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    align?: string;
+    record: GristRecord;
+    column: ColumnConfig;
+    rowIndex: number;
+    value?: object;
+    render(): TemplateResult;
+    updated(changes: PropertyValues<this>): void;
+}

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

@@ -0,0 +1,116 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js';
+let DataCardGutter = class DataCardGutter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.record = ZERO_RECORD;
+        this.column = ZERO_COLUMN;
+        this.rowIndex = -1;
+    }
+    render() {
+        if (!this.column) {
+            return html ``;
+        }
+        var { value, column, record, rowIndex } = this;
+        var { renderer } = column.record;
+        /* renderer가 html template이 아니고 단순한 값인 경우가 있으므로, html 템플릿으로 감싸준다. */
+        return html ` ${renderer(value, column, record, rowIndex, this)} `;
+    }
+    updated(changes) {
+        if (changes.has('column')) {
+            const { gutterName, danger } = this.column;
+            if (gutterName == 'row-selector') {
+                this.setAttribute('row-selector', '');
+            }
+            else {
+                this.removeAttribute('row-selector');
+            }
+            if (danger) {
+                this.setAttribute('danger', '');
+            }
+            else {
+                this.removeAttribute('danger');
+            }
+        }
+    }
+};
+DataCardGutter.styles = [
+    css `
+      :host {
+        display: flex;
+        background-color: transparent;
+        align-content: center;
+        align-items: center;
+        text-overflow: ellipsis;
+      }
+
+      :host([row-selector]) {
+        margin-right: auto;
+      }
+
+      * {
+        border: 0;
+        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);
+        line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);
+
+        color: var(--md-sys-color-on-primary);
+        background-color: var(--md-sys-color-primary);
+        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));
+
+        padding: var(--spacing-small);
+      }
+
+      *:hover {
+        cursor: pointer;
+        color: var(--md-sys-color-on-secondary);
+        background-color: var(--md-sys-color-secondary);
+      }
+
+      :host([danger]) button {
+        color: var(--md-sys-color-on-error);
+        background-color: var(--md-sys-color-error);
+        border-color: var(--md-sys-color-error);
+      }
+
+      :host([danger]) button:hover {
+        color: var(--md-sys-color-error);
+        background-color: var(--md-sys-color-on-secondary);
+        border-color: var(--md-sys-color-on-secondary);
+      }
+
+      button {
+        display: flex;
+        gap: var(--spacing-small);
+        border: 0;
+        align-items: center;
+      }
+
+      button md-icon {
+        border: 0;
+        padding: 0;
+        background-color: unset;
+      }
+    `
+];
+__decorate([
+    property({ attribute: true })
+], DataCardGutter.prototype, "align", void 0);
+__decorate([
+    property({ type: Object })
+], DataCardGutter.prototype, "record", void 0);
+__decorate([
+    property({ type: Object })
+], DataCardGutter.prototype, "column", void 0);
+__decorate([
+    property({ type: Number })
+], DataCardGutter.prototype, "rowIndex", void 0);
+__decorate([
+    property({ type: Object })
+], DataCardGutter.prototype, "value", void 0);
+DataCardGutter = __decorate([
+    customElement('ox-card-gutter')
+], DataCardGutter);
+export { DataCardGutter };
+//# sourceMappingURL=data-card-gutter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-card-gutter.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QA6DuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAgCnD,CAAC;IA7BC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC9C,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAEhC,oEAAoE;QACpE,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAA;IACnE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;YAE1C,IAAI,UAAU,IAAI,cAAc,EAAE,CAAC;gBACjC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;YACvC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;YACtC,CAAC;YAED,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;IACH,CAAC;;AA7FM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;CACF,AAzDY,CAyDZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAhE/B,cAAc;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACnB,cAAc,CA+F1B","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-gutter')\nexport class DataCardGutter extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: transparent;\n        align-content: center;\n        align-items: center;\n        text-overflow: ellipsis;\n      }\n\n      :host([row-selector]) {\n        margin-right: auto;\n      }\n\n      * {\n        border: 0;\n        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);\n        line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);\n\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));\n\n        padding: var(--spacing-small);\n      }\n\n      *:hover {\n        cursor: pointer;\n        color: var(--md-sys-color-on-secondary);\n        background-color: var(--md-sys-color-secondary);\n      }\n\n      :host([danger]) button {\n        color: var(--md-sys-color-on-error);\n        background-color: var(--md-sys-color-error);\n        border-color: var(--md-sys-color-error);\n      }\n\n      :host([danger]) button:hover {\n        color: var(--md-sys-color-error);\n        background-color: var(--md-sys-color-on-secondary);\n        border-color: var(--md-sys-color-on-secondary);\n      }\n\n      button {\n        display: flex;\n        gap: var(--spacing-small);\n        border: 0;\n        align-items: center;\n      }\n\n      button md-icon {\n        border: 0;\n        padding: 0;\n        background-color: unset;\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer } = column.record\n\n    /* renderer가 html template이 아니고 단순한 값인 경우가 있으므로, html 템플릿으로 감싸준다. */\n    return html` ${renderer(value, column, record, rowIndex, this)} `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('column')) {\n      const { gutterName, danger } = this.column\n\n      if (gutterName == 'row-selector') {\n        this.setAttribute('row-selector', '')\n      } else {\n        this.removeAttribute('row-selector')\n      }\n\n      if (danger) {\n        this.setAttribute('danger', '')\n      } else {\n        this.removeAttribute('danger')\n      }\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,19 @@
+import '@material/web/icon/icon.js';
+import '../empty-note.js';
+import './record-card.js';
+import { PropertyValues } from 'lit';
+import { DataManipulator } from '../data-manipulator.js';
+export declare class DataCard extends DataManipulator {
+    static styles: import("lit").CSSResult[];
+    empty?: boolean;
+    private _records;
+    private isTop;
+    private _total;
+    private _limit;
+    private _page;
+    firstUpdated(changes: PropertyValues<this>): void;
+    updated(changes: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    gotoTop(e: Event): void;
+    get pullToRefreshTarget(): this;
+}

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

@@ -0,0 +1,149 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '../empty-note.js';
+import './record-card.js';
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { DataManipulator } from '../data-manipulator.js';
+let DataCard = class DataCard extends DataManipulator {
+    constructor() {
+        super(...arguments);
+        this._records = [];
+        this.isTop = false;
+        this._total = 0;
+        this._limit = 20;
+        this._page = 1;
+    }
+    firstUpdated(changes) {
+        this.isTop = true;
+        /* infinite scrolling */
+        this.addEventListener('scroll', e => {
+            const totalScrollHeight = this.scrollHeight;
+            const screenHeight = this.offsetHeight;
+            const currentScrollTop = this.scrollTop;
+            if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {
+                /* 마지막 페이지까지 계속 페이지를 증가시킨다. */
+                var lastPage = Math.ceil(this._total / this._limit);
+                if (this._page < lastPage) {
+                    this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }));
+                }
+            }
+            this.isTop = this.scrollTop == 0;
+        });
+    }
+    updated(changes) {
+        if (changes.has('config')) {
+            this._records = [];
+            this._page = 1;
+        }
+        if (changes.has('data')) {
+            this._records = this.data.records;
+            this._total = this.data.total || 0;
+            this._limit = this.data.limit || 20;
+            this._page = this.data.page || 0;
+        }
+    }
+    render() {
+        var { classifier } = this.config.rows;
+        var records = this._records || [];
+        if (this.config && this.config.rows.appendable) {
+            records = [...records, { __dirty__: '+' }];
+        }
+        return html `
+      ${records.map((record, rowIndex) => {
+            var { emphasized } = classifier.call(null, record, rowIndex) || {};
+            return html `
+          <ox-record-card
+            .config=${this.config}
+            .data=${this.data}
+            .record=${record}
+            .rowIndex=${rowIndex}
+            .emphasized=${emphasized}
+            ?selected-row=${record['__selected__']}
+            ?dirty=${record['__dirty__']}
+            card
+          ></ox-record-card>
+        `;
+        })}
+      ${this.empty ? html ` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html ``}
+      ${this.isTop
+            ? html ``
+            : html ` <md-icon id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</md-icon> `}
+    `;
+    }
+    gotoTop(e) {
+        this.scrollTop = 0;
+        e.stopPropagation();
+    }
+    get pullToRefreshTarget() {
+        return this;
+    }
+};
+DataCard.styles = [
+    css `
+      :host {
+        overflow-y: auto;
+        padding: var(--spacing-medium);
+
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        grid-template-rows: min-content;
+        grid-gap: var(--spacing-large);
+      }
+
+      [selected-row] {
+        background-color: var(--grid-record-selected-background-color);
+      }
+
+      #upward {
+        --md-icon-size: var(--icon-size-large);
+        position: absolute;
+        top: var(--data-card-fab-position-vertical);
+        right: var(--data-card-fab-position-horizontal);
+        background-color: rgba(255, 255, 255, 0.7);
+        border-radius: var(--md-sys-shape-corner-large);
+        color: var(--data-card-fab-color);
+        box-shadow: var(--data-card-fab-shadow);
+        padding: var(--spacing-small);
+      }
+
+      slot {
+        width: 100%;
+      }
+
+      ox-empty-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      [card][emphasized-row],
+      [card][emphasized-row][focused] {
+        background-color: var(--grid-record-emphasized-background-color);
+        color: var(--grid-record-emphasized-color);
+      }
+
+      @media screen and (max-width: 460px) {
+        #setting {
+          grid-template-columns: 1fr;
+          grid-template-rows: 1fr 1fr;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean })
+], DataCard.prototype, "empty", void 0);
+__decorate([
+    state()
+], DataCard.prototype, "_records", void 0);
+__decorate([
+    state()
+], DataCard.prototype, "isTop", void 0);
+DataCard = __decorate([
+    customElement('ox-card')
+], DataCard);
+export { DataCard };
+//# sourceMappingURL=data-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../empty-note.js'\nimport './record-card.js'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator.js'\nimport { GristRecord } from '../types.js'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        overflow-y: auto;\n        padding: var(--spacing-medium);\n\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n        grid-template-rows: min-content;\n        grid-gap: var(--spacing-large);\n      }\n\n      [selected-row] {\n        background-color: var(--grid-record-selected-background-color);\n      }\n\n      #upward {\n        --md-icon-size: var(--icon-size-large);\n        position: absolute;\n        top: var(--data-card-fab-position-vertical);\n        right: var(--data-card-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: var(--md-sys-shape-corner-large);\n        color: var(--data-card-fab-color);\n        box-shadow: var(--data-card-fab-shadow);\n        padding: var(--spacing-small);\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      [card][emphasized-row],\n      [card][emphasized-row][focused] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) empty?: boolean\n\n  @state() private _records: GristRecord[] = []\n  @state() private isTop: boolean = false\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var { classifier } = this.config.rows\n    var records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map((record, rowIndex) => {\n        var { emphasized } = classifier.call(null, record, rowIndex) || {}\n\n        return html`\n          <ox-record-card\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            .emphasized=${emphasized}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n            card\n          ></ox-record-card>\n        `\n      })}\n      ${this.empty ? html` <ox-empty-note title=\"NO RECORDS\"></ox-empty-note> ` : html``}\n      ${this.isTop\n        ? html``\n        : html` <md-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}

package/dist/src/data-card/event-handlers/record-card-click-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordCard } from '../record-card.js';
+/**
+ * ox-record-card 의 click handler
+ *
+ * - handler의 this 는 ox-record-card임.
+ */
+export declare function recordCardClickHandler(this: RecordCard, e: MouseEvent): void;

package/dist/src/data-card/event-handlers/record-card-click-handler.js

@@ -0,0 +1,29 @@
+/**
+ * ox-record-card 의 click handler
+ *
+ * - handler의 this 는 ox-record-card임.
+ */
+export function recordCardClickHandler(e) {
+    e.stopPropagation();
+    /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */
+    var target = e.target.closest('ox-card-field, ox-card-gutter');
+    var { column, rowIndex } = target || {};
+    /* do column click handler */
+    if (column) {
+        var { click } = column.handlers;
+        if (click) {
+            click(this.config.columns, this.data, column, this.record, rowIndex, target);
+            return;
+        }
+    }
+    /* do rows click handler */
+    var { click: rowsClick } = this.config.rows.handlers;
+    if (rowsClick) {
+        rowsClick(this.config.columns, this.data, column, this.record, rowIndex, target);
+    }
+    else {
+        /* content 가 클릭된 경우 - 레코드뷰 팝업을 실행한다. */
+        this.config.rows.editable && this.popupRecordView();
+    }
+}
+//# sourceMappingURL=record-card-click-handler.js.map

package/dist/src/data-card/event-handlers/record-card-click-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-card-click-handler.js","sourceRoot":"","sources":["../../../../src/data-card/event-handlers/record-card-click-handler.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAAmB,CAAa;IACpE,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,uEAAuE;IACvE,IAAI,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,+BAA+B,CAAmC,CAAA;IAC7G,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAEvC,6BAA6B;IAC7B,IAAI,MAAM,EAAE,CAAC;QACX,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;QAC/B,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;YAC5E,OAAM;QACR,CAAC;IACH,CAAC;IAED,2BAA2B;IAC3B,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAA;IACpD,IAAI,SAAS,EAAE,CAAC;QACd,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;IAClF,CAAC;SAAM,CAAC;QACN,uCAAuC;QACvC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,EAAE,CAAA;IACrD,CAAC;AACH,CAAC","sourcesContent":["import { DataCardField } from '../data-card-field.js'\nimport { DataCardGutter } from '../data-card-gutter.js'\nimport { RecordCard } from '../record-card.js'\n\n/**\n * ox-record-card 의 click handler\n *\n * - handler의 this 는 ox-record-card임.\n */\nexport function recordCardClickHandler(this: RecordCard, e: MouseEvent): void {\n  e.stopPropagation()\n\n  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */\n  var target = (e.target as Element).closest('ox-card-field, ox-card-gutter') as DataCardField | DataCardGutter\n  var { column, rowIndex } = target || {}\n\n  /* do column click handler */\n  if (column) {\n    var { click } = column.handlers\n    if (click) {\n      click(this.config.columns, this.data, column, this.record, rowIndex, target)\n      return\n    }\n  }\n\n  /* do rows click handler */\n  var { click: rowsClick } = this.config.rows.handlers\n  if (rowsClick) {\n    rowsClick(this.config.columns, this.data, column, this.record, rowIndex, target)\n  } else {\n    /* content 가 클릭된 경우 - 레코드뷰 팝업을 실행한다. */\n    this.config.rows.editable && this.popupRecordView()\n  }\n}\n"]}

package/dist/src/data-card/event-handlers/record-card-dblclick-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordCard } from '../record-card.js';
+/**
+ * ox-record-card 의 dblclick handler
+ *
+ * - handler의 this 는 ox-record-card임.
+ */
+export declare function recordCardDblClickHandler(this: RecordCard, e: MouseEvent): void;

package/dist/src/data-card/event-handlers/record-card-dblclick-handler.js

@@ -0,0 +1,29 @@
+/**
+ * ox-record-card 의 dblclick handler
+ *
+ * - handler의 this 는 ox-record-card임.
+ */
+export function recordCardDblClickHandler(e) {
+    e.stopPropagation();
+    /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */
+    var target = e.target.closest('ox-card-field, ox-card-gutter');
+    var { column, record, rowIndex } = target || {};
+    if (column && column.type == 'gutter') {
+        /*
+         * Gutter가 클릭된 경우
+         * TODO ox-record-card의 dblclick handling의 성능을 확인하고,
+         * gutter에 dblclick를 적용할 수 있는 지 확인한 후에 활성화하자.
+         */
+        /* do column click handler */
+        // var { dblclick } = column.handlers
+        // dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)
+        // return
+    }
+    else {
+        var { dblclick: rowsDblClick } = this.config.rows.handlers;
+        if (rowsDblClick) {
+            rowsDblClick(this.config.columns, this.data, column, record, rowIndex, target);
+        }
+    }
+}
+//# sourceMappingURL=record-card-dblclick-handler.js.map

package/dist/src/data-card/event-handlers/record-card-dblclick-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-card-dblclick-handler.js","sourceRoot":"","sources":["../../../../src/data-card/event-handlers/record-card-dblclick-handler.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CAAmB,CAAa;IACvE,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,uEAAuE;IACvE,IAAI,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,+BAA+B,CAAmC,CAAA;IAE7G,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAE/C,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;QACtC;;;;WAIG;QACH,6BAA6B;QAC7B,qCAAqC;QACrC,kFAAkF;QAClF,SAAS;IACX,CAAC;SAAM,CAAC;QACN,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAA;QAC1D,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QAChF,CAAC;IACH,CAAC;AACH,CAAC","sourcesContent":["import { DataCardField } from '../data-card-field.js'\nimport { DataCardGutter } from '../data-card-gutter.js'\nimport { RecordCard } from '../record-card.js'\n\n/**\n * ox-record-card 의 dblclick handler\n *\n * - handler의 this 는 ox-record-card임.\n */\nexport function recordCardDblClickHandler(this: RecordCard, e: MouseEvent): void {\n  e.stopPropagation()\n\n  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */\n  var target = (e.target as Element).closest('ox-card-field, ox-card-gutter') as DataCardField | DataCardGutter\n\n  var { column, record, rowIndex } = target || {}\n\n  if (column && column.type == 'gutter') {\n    /*\n     * Gutter가 클릭된 경우\n     * TODO ox-record-card의 dblclick handling의 성능을 확인하고,\n     * gutter에 dblclick를 적용할 수 있는 지 확인한 후에 활성화하자.\n     */\n    /* do column click handler */\n    // var { dblclick } = column.handlers\n    // dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)\n    // return\n  } else {\n    var { dblclick: rowsDblClick } = this.config.rows.handlers\n    if (rowsDblClick) {\n      rowsDblClick(this.config.columns, this.data, column, record, rowIndex, target)\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,23 @@
+import '@material/web/icon/icon.js';
+import '../record-view/record-view.js';
+import './data-card-field.js';
+import './data-card-gutter.js';
+import './data-card-gutter-menu.js';
+import { LitElement, PropertyValues } from 'lit';
+import { GristConfig, GristData, GristRecord } from '../types.js';
+export declare class RecordCard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    config: GristConfig;
+    data: GristData;
+    record: GristRecord;
+    rowIndex: number;
+    selectedRow: boolean;
+    emphasized: any;
+    private _recordView;
+    private clickHandler;
+    private dblclickHandler;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    popupRecordView(): void;
+}