@operato/data-grist 8.0.0-beta.0 → 8.0.0-beta.1

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

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

package/src/data-consumer.ts

@@ -1,11 +0,0 @@
-import { FetchHandler, GristData } from './types'
-
-export interface DataConsumer extends EventTarget {
-  data: any
-  _data: GristData
-  mode: 'GRID' | 'LIST' | 'CARD' | 'REPORT'
-  checkDirties(): void
-  fetchHandler?: FetchHandler
-  showSpinner(): void
-  hideSpinner(): void
-}

package/src/data-grid/data-grid-accum-field.ts

@@ -1,109 +0,0 @@
-import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { ZERO_COLUMN } from '../configure/zero-config'
-import { AccumulatorObject, ColumnConfig, GristRecord } from '../types'
-import { i18next } from '@operato/i18n'
-
-const DEFAULT_TEXT_ALIGN = 'left'
-
-@customElement('ox-grid-accum-field')
-export class DataGridAccumField extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-
-        align-items: center;
-        justify-content: var(--data-grid-field-justify-content, flex-start);
-        position: relative;
-
-        white-space: nowrap;
-        background-color: var(--md-sys-color-primary-container);
-        border: var(--grid-record-border-bottom);
-        border-width: 1px 0;
-        padding: var(--spacing-small);
-
-        font-size: var(--grid-record-wide-fontsize);
-        color: var(--md-sys-color-primary);
-        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
-
-        min-height: 30px;
-        box-sizing: border-box;
-      }
-
-      span,
-      pre {
-        display: block;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      * {
-        margin: 0;
-        text-align: var(--data-grid-field-text-align);
-      }
-
-      *[center] {
-        flex: none;
-        margin: 0 auto;
-      }
-
-      md-icon {
-        font-size: 1.5em;
-      }
-    `
-  ]
-
-  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN
-  @property({ type: Object }) record: GristRecord = {}
-  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN
-  @property({ type: Number }) rowIndex = -1
-  @property({ type: Number }) columnIndex = 0
-  @property({ type: Boolean }) editing = false
-  @property({ type: Object }) value = {}
-  @property({ attribute: false }) emphasized: any = false
-  @property({ type: String, attribute: true }) fixed?: string
-
-  render(): TemplateResult {
-    if (!this.column || !this.column.accumulator) {
-      return this.columnIndex == 0 ? html`<md-icon>functions</md-icon>` : html`${nothing}`
-    }
-
-    var { value, column, record, rowIndex } = this
-    var { renderer } = column.record
-
-    // tag가 true이면 value 앞에 (sum) 같은 태그 생성
-    var { accumulator } = column
-    let tag = ''
-    if (typeof accumulator === 'object' && typeof accumulator.type === 'string' && accumulator?.tag) {
-      tag = `(${i18next.t(`label.accumulator_${accumulator.type}`)})`
-    }
-
-    return html`${tag}&nbsp;${renderer?.call(this, value, column, record, rowIndex, this)}`
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('column')) {
-      var align = this.column.record.align || DEFAULT_TEXT_ALIGN
-      if (align != DEFAULT_TEXT_ALIGN) {
-        let justify = 'center'
-        switch (align) {
-          case 'right':
-            justify = 'flex-end'
-            break
-        }
-        this.style.setProperty('--data-grid-field-justify-content', justify)
-        this.style.setProperty('--data-grid-field-text-align', align)
-      }
-    }
-
-    if (changes.has('fixed')) {
-      if (this.fixed) {
-        this.style.left = this.fixed + 'px'
-      } else {
-        this.style.left = 'unset'
-      }
-    }
-  }
-}

package/src/data-grid/data-grid-body-style.ts

@@ -1,85 +0,0 @@
-import { css } from 'lit'
-
-export const dataGridBodyStyle = css`
-  :host {
-    display: grid;
-    grid-template-columns: var(--grid-template-columns);
-    grid-auto-rows: var(--grid-record-height, min-content);
-
-    overflow: auto;
-    outline: none;
-    color: var(--grid-record-color);
-    position: relative;
-    border-bottom: var(--grid-body-bottom-border);
-  }
-
-  ox-grid-field[odd] {
-    background-color: var(--grid-record-odd-background-color);
-  }
-
-  ox-grid-field[selected-row] {
-    background-color: var(--grid-record-selected-background-color);
-    color: var(--grid-record-selected-color);
-  }
-
-  ox-grid-field[focused-row] {
-    box-shadow: var(--grid-record-focused-box-shadow);
-    font-weight: bold;
-    color: var(--grid-record-focused-color);
-    background-image: var(--focused-background-image);
-    background-blend-mode: darken;
-  }
-
-  ox-grid-field[focused] {
-    border: var(--grid-record-focused-cell-border);
-  }
-
-  ox-grid-field[emphasized-row],
-  ox-grid-field[emphasized-row][focused] {
-    background-color: var(--grid-record-emphasized-background-color);
-    color: var(--grid-record-emphasized-color);
-  }
-
-  [editing] {
-    background-color: var(--grid-record-editing-background-color);
-  }
-
-  @media print {
-    :host {
-      grid-template-columns: var(--grid-template-print-columns);
-    }
-    ox-grid-field[focused] {
-      border: none;
-    }
-
-    ox-grid-field[selected-row] {
-      background-color: transparent;
-    }
-
-    ox-grid-field[emphasized-row] {
-      background-color: transparent;
-      color: initial;
-    }
-
-    ox-grid-field[focused-row] {
-      background-color: transparent;
-      color: initial;
-    }
-
-    ox-grid-field[editing] {
-      background-color: transparent;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    ox-grid-field[focused-row] {
-      background-blend-mode: lighten;
-    }
-  }
-
-  @media (prefers-color-scheme: light) {
-    ox-grid-field[focused-row] {
-      background-blend-mode: darken;
-    }
-  }
-`