@operato/data-grist 7.0.26 → 7.0.28

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [7.0.28](https://github.com/hatiolab/operato/compare/v7.0.27...v7.0.28) (2024-07-25)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+### [7.0.27](https://github.com/hatiolab/operato/compare/v7.0.26...v7.0.27) (2024-07-22)
+
+
+### :bug: Bug Fix
+
+* emphasized-row for data-card and data-list ([f866ec9](https://github.com/hatiolab/operato/commit/f866ec95d63c8492b4d15eb9f4993e80464be643))
+
+
+
 ### [7.0.26](https://github.com/hatiolab/operato/compare/v7.0.25...v7.0.26) (2024-07-22)
 
 

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

@@ -44,21 +44,26 @@ let DataCard = class DataCard extends DataManipulator {
         }
     }
     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) => 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__']}
           ></ox-record-card>
-        `)}
+        `;
+        })}
       ${this.empty ? html ` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html ``}
       ${this.isTop
             ? html ``
@@ -85,19 +90,6 @@ DataCard.styles = [
         grid-gap: var(--spacing-large);
       }
 
-      ox-record-card {
-        height: min-content;
-        align-items: stretch;
-        background-color: var(--data-card-record-card-background-color);
-        border: var(--data-card-record-card-border);
-        border-radius: var(--data-card-record-card-border-radius);
-      }
-      ox-record-card:hover {
-        background-color:var(--md-sys-color-surface);
-        border: var(--data-card-record-card-border-hover);
-        box-shadow: var(--data-card-record-card-boxshadow-hover);
-      }
-
       [selected-row] {
         background-color: var(--grid-record-selected-background-color);
       }
@@ -126,6 +118,12 @@ DataCard.styles = [
         transform: translate(-50%, -50%);
       }
 
+      ox-record-card[emphasized-row],
+      ox-record-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;

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

@@ -1 +1 @@
-{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../empty-note'\nimport './record-card'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        overflow-y: auto;\n        padding: var(--spacing-medium);\n\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n        grid-template-rows: min-content;\n        grid-gap: var(--spacing-large);\n      }\n\n      ox-record-card {\n        height: min-content;\n        align-items: stretch;\n        background-color: var(--data-card-record-card-background-color);\n        border: var(--data-card-record-card-border);\n        border-radius: var(--data-card-record-card-border-radius);\n      }\n      ox-record-card:hover {\n        background-color:var(--md-sys-color-surface);\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      [selected-row] {\n        background-color: var(--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      @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 records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-card\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-card>\n        `\n      )}\n      ${this.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"]}
+{"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'\nimport './record-card'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        overflow-y: auto;\n        padding: var(--spacing-medium);\n\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(260px, 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      ox-record-card[emphasized-row],\n      ox-record-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          ></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/record-card.d.ts

@@ -12,6 +12,7 @@ export declare class RecordCard extends LitElement {
     record: GristRecord;
     rowIndex: number;
     selectedRow: boolean;
+    emphasized: any;
     private _recordView;
     private clickHandler;
     private dblclickHandler;

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

@@ -34,6 +34,7 @@ let RecordCard = class RecordCard extends LitElement {
          * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)
          */
         this.selectedRow = false;
+        this.emphasized = false;
         this.clickHandler = recordCardClickHandler.bind(this);
         this.dblclickHandler = recordCardDblClickHandler.bind(this);
     }
@@ -52,6 +53,18 @@ let RecordCard = class RecordCard extends LitElement {
         if (changes.has('record') && this._recordView) {
             this._recordView.record = this.record;
         }
+        const emphasized = this.emphasized;
+        if (!!emphasized) {
+            this.setAttribute('emphasized-row', '');
+            if (Symbol.iterator in Object(emphasized)) {
+                const [backgroundColor, foregroundColor] = emphasized;
+                backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor);
+                foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor);
+            }
+        }
+        else {
+            this.removeAttribute('emphasized-row');
+        }
     }
     render() {
         const record = this.record;
@@ -172,8 +185,18 @@ RecordCard.styles = [
       :host {
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
         position: relative;
+        background-color: var(--data-card-record-card-background-color);
+        border-radius: var(--data-card-record-card-border-radius);
+        border: var(--data-card-record-card-border);
+        height: min-content;
+      }
+
+      :host(:hover) {
+        background-color: var(--md-sys-color-surface);
+        border: var(--data-card-record-card-border-hover);
+        box-shadow: var(--data-card-record-card-boxshadow-hover);
       }
 
       :host([dirty])::before {
@@ -188,6 +211,11 @@ RecordCard.styles = [
         border-right: var(--grid-record-dirty-border-left);
       }
 
+      :host[emphasized-row] {
+        background-color: var(--grid-record-emphasized-background-color);
+        color: var(--grid-record-emphasized-color);
+      }
+
       [dirty] {
         position: absolute;
         margin: var(--spacing-none);
@@ -206,7 +234,7 @@ RecordCard.styles = [
         border-top-left-radius: var(--data-card-record-card-border-radius);
         border-top-right-radius: var(--data-card-record-card-border-radius);
         overflow: hidden;
-        margin-top:var(--spacing-medium);
+        margin-top: var(--spacing-medium);
       }
 
       [content] {
@@ -270,6 +298,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'selected-row' })
 ], RecordCard.prototype, "selectedRow", void 0);
+__decorate([
+    property({ attribute: false })
+], RecordCard.prototype, "emphasized", void 0);
 RecordCard = __decorate([
     customElement('ox-record-card')
 ], RecordCard);

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

@@ -1 +1 @@
-{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './data-card-field'\nimport '../record-view'\nimport './data-card-gutter'\nimport './data-card-gutter-menu'\n\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        position: relative;\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [thumbnail] {\n        width: 100%;\n        height: var(--data-card-thumbnail-height);\n        border-top-left-radius: var(--data-card-record-card-border-radius);\n        border-top-right-radius: var(--data-card-record-card-border-radius);\n        overflow: hidden;\n        margin-top:var(--spacing-medium);\n      }\n\n      [content] {\n        display: grid;\n        gap: var(--spacing-tiny) var(--spacing-medium);\n        grid-template:\n          'brief gutters'\n          'detail detail';\n        grid-template-columns: 1fr 35px;\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        grid-area: brief;\n        overflow: hidden;\n      }\n\n      [gutters] {\n        grid-area: gutters;\n      }\n\n      [detail] {\n        grid-area: detail;\n      }\n\n      ox-card-gutter {\n        flex: 0 0 14px;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n    const firstGutter = gutters[0]\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${thumbnailColumn\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div gutters>\n          ${firstGutter\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${firstGutter}\n                  .record=${record}\n                  .value=${record[firstGutter.name]}\n                ></ox-card-gutter>\n              `\n            : html``}\n          ${gutters.length === 2\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${gutters[1]}\n                  .record=${record}\n                  .value=${record[gutters[1].name]}\n                ></ox-card-gutter>\n              `\n            : gutters.length > 2\n              ? html`\n                  <ox-card-gutter-menu\n                    .gutters=${gutters}\n                    .rowIndex=${rowIndex}\n                    .record=${record}\n                    .clickHandler=${this.clickHandler}\n                    .dblclickHandler=${this.dblclickHandler}\n                  ></ox-card-gutter-menu>\n                `\n              : html``}\n        </div>\n\n        <div brief>\n          ${briefFields.map(\n            (column, idx) => html`\n              <ox-card-field\n                .rowIndex=${rowIndex}\n                .column=${column}\n                .record=${record}\n                .value=${record[column?.name || '']}\n                ?name=${idx == 0}\n                ?desc=${idx == 1}\n              ></ox-card-field>\n            `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) => html`\n                    <ox-card-field\n                      .rowIndex=${rowIndex}\n                      .column=${column}\n                      .record=${record}\n                      .value=${record[column?.name || '']}\n                    ></ox-card-field>\n                  `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}
+{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './data-card-field'\nimport '../record-view'\nimport './data-card-gutter'\nimport './data-card-gutter-menu'\n\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        position: relative;\n        background-color: var(--data-card-record-card-background-color);\n        border-radius: var(--data-card-record-card-border-radius);\n        border: var(--data-card-record-card-border);\n        height: min-content;\n      }\n\n      :host(:hover) {\n        background-color: var(--md-sys-color-surface);\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      :host[emphasized-row] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [thumbnail] {\n        width: 100%;\n        height: var(--data-card-thumbnail-height);\n        border-top-left-radius: var(--data-card-record-card-border-radius);\n        border-top-right-radius: var(--data-card-record-card-border-radius);\n        overflow: hidden;\n        margin-top: var(--spacing-medium);\n      }\n\n      [content] {\n        display: grid;\n        gap: var(--spacing-tiny) var(--spacing-medium);\n        grid-template:\n          'brief gutters'\n          'detail detail';\n        grid-template-columns: 1fr 35px;\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        grid-area: brief;\n        overflow: hidden;\n      }\n\n      [gutters] {\n        grid-area: gutters;\n      }\n\n      [detail] {\n        grid-area: detail;\n      }\n\n      ox-card-gutter {\n        flex: 0 0 14px;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n  @property({ attribute: false }) emphasized: any = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n\n    const emphasized = this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n    const firstGutter = gutters[0]\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${thumbnailColumn\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div gutters>\n          ${firstGutter\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${firstGutter}\n                  .record=${record}\n                  .value=${record[firstGutter.name]}\n                ></ox-card-gutter>\n              `\n            : html``}\n          ${gutters.length === 2\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${gutters[1]}\n                  .record=${record}\n                  .value=${record[gutters[1].name]}\n                ></ox-card-gutter>\n              `\n            : gutters.length > 2\n              ? html`\n                  <ox-card-gutter-menu\n                    .gutters=${gutters}\n                    .rowIndex=${rowIndex}\n                    .record=${record}\n                    .clickHandler=${this.clickHandler}\n                    .dblclickHandler=${this.dblclickHandler}\n                  ></ox-card-gutter-menu>\n                `\n              : html``}\n        </div>\n\n        <div brief>\n          ${briefFields.map(\n            (column, idx) => html`\n              <ox-card-field\n                .rowIndex=${rowIndex}\n                .column=${column}\n                .record=${record}\n                .value=${record[column?.name || '']}\n                ?name=${idx == 0}\n                ?desc=${idx == 1}\n              ></ox-card-field>\n            `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) => html`\n                    <ox-card-field\n                      .rowIndex=${rowIndex}\n                      .column=${column}\n                      .record=${record}\n                      .value=${record[column?.name || '']}\n                    ></ox-card-field>\n                  `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}

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

@@ -56,8 +56,8 @@ DataListField.styles = [
         object-fit: contain;
         width: 100%;
         height: 100%;
-        padding: var(--spacing-none)
-        margin: var(--spacing-none)
+        padding: var(--spacing-none);
+        margin: var(--spacing-none);
       }
 
       label {

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

@@ -1 +1 @@
-{"version":3,"file":"data-list-field.js","sourceRoot":"","sources":["../../../src/data-list/data-list-field.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAuDuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,EACpC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,CAAC,MAAM,CAAC,WAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QAC7G,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACtE,CAAC;IACH,CAAC;;AAzEM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDF;CACF,AAnDY,CAmDZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AA1D/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CA2EzB","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, TemplateResult, css, html } from 'lit'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-list-field')\nexport class DataListField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: relative;\n\n        white-space: normal;\n        padding: var(--spacing-tiny) var(--spacing-small);\n\n        font: inherit;\n      }\n\n      :host > * {\n        flex: 1;\n        margin: var(--spacing-none);\n        text-align: left;\n      }\n\n      :host > *[center] {\n        flex: none;\n        margin: var(--spacing-none) auto;\n      }\n\n      :host([thumbnail]) {\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      :host([thumbnail]) > * {\n        flex: unset;\n        object-fit: contain;\n        width: 100%;\n        height: 100%;\n        padding: var(--spacing-none)\n        margin: var(--spacing-none)\n      }\n\n      label {\n        flex: none;\n        width: 33%;\n        font: var(--data-list-item-etc-label-font);\n      }\n\n      @media only screen and (max-width: 460px) {\n        *[center] {\n          margin: initial;\n        }\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    var { value, column, record, rowIndex } = this\n\n    var {\n      label,\n      record: { renderer: fieldRenderer }\n    } = column\n\n    if (typeof label == 'object') {\n      let { renderer: labelRenderer } = label\n      return html`<label>${labelRenderer(column)}</label>${fieldRenderer(value, column, record, rowIndex, this)}`\n    } else {\n      return html`${fieldRenderer(value, column, record, rowIndex, this)}`\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-list-field.js","sourceRoot":"","sources":["../../../src/data-list/data-list-field.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAuDuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,EACpC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,CAAC,MAAM,CAAC,WAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QAC7G,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACtE,CAAC;IACH,CAAC;;AAzEM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDF;CACF,AAnDY,CAmDZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AA1D/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CA2EzB","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, TemplateResult, css, html } from 'lit'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-list-field')\nexport class DataListField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: relative;\n\n        white-space: normal;\n        padding: var(--spacing-tiny) var(--spacing-small);\n\n        font: inherit;\n      }\n\n      :host > * {\n        flex: 1;\n        margin: var(--spacing-none);\n        text-align: left;\n      }\n\n      :host > *[center] {\n        flex: none;\n        margin: var(--spacing-none) auto;\n      }\n\n      :host([thumbnail]) {\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      :host([thumbnail]) > * {\n        flex: unset;\n        object-fit: contain;\n        width: 100%;\n        height: 100%;\n        padding: var(--spacing-none);\n        margin: var(--spacing-none);\n      }\n\n      label {\n        flex: none;\n        width: 33%;\n        font: var(--data-list-item-etc-label-font);\n      }\n\n      @media only screen and (max-width: 460px) {\n        *[center] {\n          margin: initial;\n        }\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    var { value, column, record, rowIndex } = this\n\n    var {\n      label,\n      record: { renderer: fieldRenderer }\n    } = column\n\n    if (typeof label == 'object') {\n      let { renderer: labelRenderer } = label\n      return html`<label>${labelRenderer(column)}</label>${fieldRenderer(value, column, record, rowIndex, this)}`\n    } else {\n      return html`${fieldRenderer(value, column, record, rowIndex, this)}`\n    }\n  }\n}\n"]}

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

@@ -43,21 +43,26 @@ let DataList = class DataList extends DataManipulator {
         }
     }
     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) => html `
+      ${records.map((record, rowIndex) => {
+            var { emphasized } = classifier.call(null, record, rowIndex) || {};
+            return html `
           <ox-record-partial
             .config=${this.config}
             .data=${this.data}
             .record=${record}
             .rowIndex=${rowIndex}
+            .emphasized=${emphasized}
             ?selected-row=${record['__selected__']}
             ?dirty=${record['__dirty__']}
           ></ox-record-partial>
-        `)}
+        `;
+        })}
       ${this.empty ? html ` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html ``}
       ${this.isTop
             ? html ``
@@ -110,6 +115,12 @@ DataList.styles = [
         top: 50%;
         transform: translate(-50%, -50%);
       }
+
+      ox-record-partial[emphasized-row],
+      ox-record-partial[emphasized-row][focused] {
+        background-color: var(--grid-record-emphasized-background-color);
+        color: var(--grid-record-emphasized-color);
+      }
     `
 ];
 __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":"data-list.js","sourceRoot":"","sources":["../../../src/data-list/data-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-partial'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-list')\nexport class DataList extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-list-background-color);\n        overflow-y: auto;\n      }\n\n      ox-record-partial:nth-child(even) {\n        background-color: var(--grid-record-odd-background-color);\n      }\n\n      [selected-row] {\n        background-color: var(--data-list-selected-background-color);\n      }\n\n      #upward {\n        --md-icon-size: var(--icon-size-large);\n        position: absolute;\n        top: var(--data-list-fab-position-vertical);\n        right: var(--data-list-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: var(--md-sys-shape-corner-large);\n        color: var(--data-list-fab-color);\n        box-shadow: var(--data-list-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  ]\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 records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-partial\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-partial>\n        `\n      )}\n      ${this.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"]}
+{"version":3,"file":"data-list.js","sourceRoot":"","sources":["../../../src/data-list/data-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-partial'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-list')\nexport class DataList extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-list-background-color);\n        overflow-y: auto;\n      }\n\n      ox-record-partial:nth-child(even) {\n        background-color: var(--grid-record-odd-background-color);\n      }\n\n      [selected-row] {\n        background-color: var(--data-list-selected-background-color);\n      }\n\n      #upward {\n        --md-icon-size: var(--icon-size-large);\n        position: absolute;\n        top: var(--data-list-fab-position-vertical);\n        right: var(--data-list-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: var(--md-sys-shape-corner-large);\n        color: var(--data-list-fab-color);\n        box-shadow: var(--data-list-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      ox-record-partial[emphasized-row],\n      ox-record-partial[emphasized-row][focused] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\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\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-partial\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          ></ox-record-partial>\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-list/record-partial.d.ts

@@ -11,6 +11,7 @@ export declare class RecordPartial extends LitElement {
     record: GristRecord;
     rowIndex: number;
     selectedRow: boolean;
+    emphasized: any;
     private _recordView;
     attributeChangedCallback(name: string, oldval: any, newval: any): void;
     firstUpdated(): void;

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

@@ -34,6 +34,7 @@ let RecordPartial = class RecordPartial extends LitElement {
          * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)
          */
         this.selectedRow = false;
+        this.emphasized = false;
     }
     attributeChangedCallback(name, oldval, newval) {
         super.attributeChangedCallback(name, oldval, newval);
@@ -53,6 +54,18 @@ let RecordPartial = class RecordPartial extends LitElement {
         if (changes.has('record') && this._recordView) {
             this._recordView.record = this.record;
         }
+        const emphasized = this.emphasized;
+        if (!!emphasized) {
+            this.setAttribute('emphasized-row', '');
+            if (Symbol.iterator in Object(emphasized)) {
+                const [backgroundColor, foregroundColor] = emphasized;
+                backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor);
+                foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor);
+            }
+        }
+        else {
+            this.removeAttribute('emphasized-row');
+        }
     }
     render() {
         var record = this.record;
@@ -152,6 +165,11 @@ RecordPartial.styles = [
         border-right: var(--grid-record-dirty-border-left);
       }
 
+      :host[emphasized-row] {
+        background-color: var(--grid-record-emphasized-background-color);
+        color: var(--grid-record-emphasized-color);
+      }
+
       :host [dirty] {
         position: absolute;
         margin: var(--spacing-none);
@@ -215,6 +233,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'selected-row' })
 ], RecordPartial.prototype, "selectedRow", void 0);
+__decorate([
+    property({ attribute: false })
+], RecordPartial.prototype, "emphasized", void 0);
 RecordPartial = __decorate([
     customElement('ox-record-partial')
 ], RecordPartial);

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

@@ -1 +1 @@
-{"version":3,"file":"record-partial.js","sourceRoot":"","sources":["../../../src/data-list/record-partial.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './data-list-gutter'\nimport './data-list-field'\nimport '../record-view'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { recordPartialClickHandler } from './event-handlers/record-partial-click-handler'\nimport { recordPartialDblClickHandler } from './event-handlers/record-partial-dblclick-handler'\n\n// import { recordPartialLongPressHandler } from './event-handlers/record-partial-long-press-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-partial')\nexport class RecordPartial extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        border-bottom: var(--data-list-item-border-bottom);\n        position: relative;\n        min-height: 42px;\n        padding-left: var(--spacing-medium);\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      :host [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [content] {\n        flex: auto;\n        display: block;\n        zoom: 1;\n      }\n\n      div[tail] {\n        margin: var(--spacing-none);\n        width: 100px;\n        aspect-ratio: 1 / 1;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n      }\n\n      div[tail] > ox-list-field {\n        flex: 1;\n      }\n\n      ox-list-field {\n        font: var(--data-list-item-etc-font);\n        color: var(--data-list-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-list-field[name] {\n        font: var(--data-list-item-name-font);\n        color: var(--data-list-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-list-field[desc] {\n        font: var(--data-list-item-disc-font);\n        color: var(--data-list-item-disc-color, var(--md-sys-color-on-tertiary-container));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-partial의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n\n  private _recordView: any\n\n  attributeChangedCallback(name: string, oldval: any, newval: any) {\n    super.attributeChangedCallback(name, oldval, newval)\n  }\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', recordPartialClickHandler.bind(this) as EventListener)\n    this.renderRoot.addEventListener('dblclick', recordPartialDblClickHandler.bind(this) as EventListener)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n  }\n\n  render() {\n    var record = this.record\n    var rowIndex = this.rowIndex\n    var { columns, list } = this.config\n    var { thumbnail, fields, details } = list || {}\n\n    var displayColumns =\n      [...fields, ...details].map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    var gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${gutters.map(\n        gutter => html`\n          <ox-list-gutter\n            class=${gutter.name === 'detail' ? 'expand' : ''}\n            .rowIndex=${rowIndex}\n            .column=${gutter}\n            .record=${record}\n            .value=${record[gutter.name]}\n          ></ox-list-gutter>\n        `\n      )}\n\n      <div content>\n        ${displayColumns.map(\n          (column, idx) => html`\n            <ox-list-field\n              .rowIndex=${rowIndex}\n              .column=${column}\n              .record=${record}\n              .value=${record[column?.name || '']}\n              ?name=${idx == 0}\n              ?desc=${idx == 1}\n            ></ox-list-field>\n          `\n        )}\n      </div>\n      ${thumbnail\n        ? html`<div tail>\n            <ox-list-field\n              thumbnail\n              .rowIndex=${rowIndex}\n              .column=${thumbnailColumn}\n              .record=${record}\n              .value=${record[thumbnailColumn?.name || '']}\n            ></ox-list-field>\n          </div>`\n        : html``}\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}
+{"version":3,"file":"record-partial.js","sourceRoot":"","sources":["../../../src/data-list/record-partial.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './data-list-gutter'\nimport './data-list-field'\nimport '../record-view'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { recordPartialClickHandler } from './event-handlers/record-partial-click-handler'\nimport { recordPartialDblClickHandler } from './event-handlers/record-partial-dblclick-handler'\n\n// import { recordPartialLongPressHandler } from './event-handlers/record-partial-long-press-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-partial')\nexport class RecordPartial extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        border-bottom: var(--data-list-item-border-bottom);\n        position: relative;\n        min-height: 42px;\n        padding-left: var(--spacing-medium);\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      :host[emphasized-row] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      :host [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [content] {\n        flex: auto;\n        display: block;\n        zoom: 1;\n      }\n\n      div[tail] {\n        margin: var(--spacing-none);\n        width: 100px;\n        aspect-ratio: 1 / 1;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n      }\n\n      div[tail] > ox-list-field {\n        flex: 1;\n      }\n\n      ox-list-field {\n        font: var(--data-list-item-etc-font);\n        color: var(--data-list-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-list-field[name] {\n        font: var(--data-list-item-name-font);\n        color: var(--data-list-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-list-field[desc] {\n        font: var(--data-list-item-disc-font);\n        color: var(--data-list-item-disc-color, var(--md-sys-color-on-tertiary-container));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-partial의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n  @property({ attribute: false }) emphasized: any = false\n\n  private _recordView: any\n\n  attributeChangedCallback(name: string, oldval: any, newval: any) {\n    super.attributeChangedCallback(name, oldval, newval)\n  }\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', recordPartialClickHandler.bind(this) as EventListener)\n    this.renderRoot.addEventListener('dblclick', recordPartialDblClickHandler.bind(this) as EventListener)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n\n    const emphasized = this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  render() {\n    var record = this.record\n    var rowIndex = this.rowIndex\n    var { columns, list } = this.config\n    var { thumbnail, fields, details } = list || {}\n\n    var displayColumns =\n      [...fields, ...details].map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    var gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${gutters.map(\n        gutter => html`\n          <ox-list-gutter\n            class=${gutter.name === 'detail' ? 'expand' : ''}\n            .rowIndex=${rowIndex}\n            .column=${gutter}\n            .record=${record}\n            .value=${record[gutter.name]}\n          ></ox-list-gutter>\n        `\n      )}\n\n      <div content>\n        ${displayColumns.map(\n          (column, idx) => html`\n            <ox-list-field\n              .rowIndex=${rowIndex}\n              .column=${column}\n              .record=${record}\n              .value=${record[column?.name || '']}\n              ?name=${idx == 0}\n              ?desc=${idx == 1}\n            ></ox-list-field>\n          `\n        )}\n      </div>\n      ${thumbnail\n        ? html`<div tail>\n            <ox-list-field\n              thumbnail\n              .rowIndex=${rowIndex}\n              .column=${thumbnailColumn}\n              .record=${record}\n              .value=${record[thumbnailColumn?.name || '']}\n            ></ox-list-field>\n          </div>`\n        : html``}\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}