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

package/src/data-list/data-list-field.ts

@@ -1,82 +0,0 @@
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, TemplateResult, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('ox-list-field')
-export class DataListField extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        position: relative;
-
-        white-space: normal;
-        padding: var(--spacing-tiny) var(--spacing-small);
-
-        font: inherit;
-      }
-
-      :host > * {
-        flex: 1;
-        margin: var(--spacing-none);
-        text-align: left;
-      }
-
-      :host > *[center] {
-        flex: none;
-        margin: var(--spacing-none) auto;
-      }
-
-      :host([thumbnail]) {
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      :host([thumbnail]) > * {
-        flex: unset;
-        object-fit: contain;
-        width: 100%;
-        height: 100%;
-        padding: var(--spacing-none);
-        margin: var(--spacing-none);
-      }
-
-      label {
-        flex: none;
-        width: 33%;
-        font: var(--data-list-item-etc-label-font);
-      }
-
-      @media only screen and (max-width: 460px) {
-        *[center] {
-          margin: initial;
-        }
-      }
-    `
-  ]
-
-  @property({ attribute: true }) align?: string
-  @property({ type: Object }) record: GristRecord = ZERO_RECORD
-  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN
-  @property({ type: Number }) rowIndex: number = -1
-  @property({ type: Object }) value?: object
-
-  render(): TemplateResult {
-    var { value, column, record, rowIndex } = this
-
-    var {
-      label,
-      record: { renderer: fieldRenderer }
-    } = column
-
-    if (typeof label == 'object') {
-      let { renderer: labelRenderer } = label
-      return html`<label>${labelRenderer(column)}</label>${fieldRenderer(value, column, record, rowIndex, this)}`
-    } else {
-      return html`${fieldRenderer(value, column, record, rowIndex, this)}`
-    }
-  }
-}

package/src/data-list/data-list-gutter.ts

@@ -1,108 +0,0 @@
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
-import { customElement, property } from 'lit/decorators.js'
-
-const DEFAULT_TEXT_ALIGN = 'left'
-
-@customElement('ox-list-gutter')
-export class DataListGutter extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        align-items: center;
-        justify-content: var(--data-list-gutter-justify-content, flex-start);
-        position: relative;
-
-        white-space: nowrap;
-        overflow: hidden;
-        background-color: transparent;
-
-        font-size: var(--grid-record-wide-fontsize);
-        text-overflow: ellipsis;
-        color: var(--grid-record-color);
-
-        padding-right: var(--spacing-medium);
-      }
-
-      :host-context(.expand)::after {
-        content: '';
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 150%;
-        height: 220%;
-      }
-
-      * {
-        flex: 1;
-        border: 0;
-        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);
-        line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);
-
-        background-color: transparent;
-        padding: var(--spacing-small);
-      }
-
-      *[center] {
-        flex: none;
-        margin: var(--spacing-none) auto;
-      }
-
-      button {
-        display: flex;
-        gap: var(--spacing-small);
-        border: 0;
-        align-items: center;
-      }
-
-      button md-icon {
-        border: 0;
-        padding: 0;
-        background-color: unset;
-      }
-    `
-  ]
-
-  @property({ attribute: true }) align?: string
-  @property({ type: Object }) record: GristRecord = ZERO_RECORD
-  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN
-  @property({ type: Number }) rowIndex: number = -1
-  @property({ type: Object }) value?: object
-
-  render(): TemplateResult {
-    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: 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-list-gutter-justify-content', justify)
-      }
-
-      const { danger } = this.column
-      if (danger) {
-        this.setAttribute('danger', '')
-      } else {
-        this.removeAttribute('danger')
-      }
-    }
-  }
-}

package/src/data-list/data-list.ts

@@ -1,145 +0,0 @@
-import '@material/web/icon/icon.js'
-import './record-partial'
-
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { DataManipulator } from '../data-manipulator'
-import { GristRecord } from '../types'
-
-@customElement('ox-list')
-export class DataList extends DataManipulator {
-  static styles = [
-    css`
-      :host {
-        background-color: var(--data-list-background-color);
-        overflow-y: auto;
-      }
-
-      ox-record-partial:nth-child(even) {
-        background-color: var(--grid-record-odd-background-color);
-      }
-
-      [selected-row] {
-        background-color: var(--data-list-selected-background-color);
-      }
-
-      #upward {
-        --md-icon-size: var(--icon-size-large);
-        position: absolute;
-        top: var(--data-list-fab-position-vertical);
-        right: var(--data-list-fab-position-horizontal);
-        background-color: rgba(255, 255, 255, 0.7);
-        border-radius: var(--md-sys-shape-corner-large);
-        color: var(--data-list-fab-color);
-        box-shadow: var(--data-list-fab-shadow);
-        padding: var(--spacing-small);
-      }
-
-      slot {
-        width: 100%;
-      }
-
-      ox-empty-note {
-        display: block;
-        position: absolute;
-        left: 50%;
-        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);
-      }
-    `
-  ]
-
-  @property({ type: Boolean }) empty?: boolean
-
-  @state() private _records: GristRecord[] = []
-  @state() private isTop: boolean = false
-
-  private _total: number = 0
-  private _limit: number = 20
-  private _page: number = 1
-
-  firstUpdated(changes: PropertyValues<this>) {
-    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: PropertyValues<this>) {
-    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-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``
-        : html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}
-    `
-  }
-
-  gotoTop(e: Event) {
-    this.scrollTop = 0
-
-    e.stopPropagation()
-  }
-
-  get pullToRefreshTarget() {
-    return this
-  }
-}

package/src/data-list/event-handlers/record-partial-click-handler.ts

@@ -1,34 +0,0 @@
-import { DataListField } from '../data-list-field'
-import { DataListGutter } from '../data-list-gutter'
-import { RecordPartial } from '../record-partial'
-
-/**
- * record-partial 의 click handler
- *
- * - handler의 this 는 record-partial임.
- */
-export function recordPartialClickHandler(this: RecordPartial, e: MouseEvent): void {
-  e.stopPropagation()
-
-  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */
-  var target = (e.target as Element).closest('ox-list-field, ox-list-gutter') as DataListField | DataListGutter
-  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()
-  }
-}

package/src/data-list/event-handlers/record-partial-dblclick-handler.ts

@@ -1,33 +0,0 @@
-import { DataListField } from '../data-list-field'
-import { DataListGutter } from '../data-list-gutter'
-import { RecordPartial } from '../record-partial'
-
-/**
- * record-partial 의 dblclick handler
- *
- * - handler의 this 는 record-partial임.
- */
-export function recordPartialDblClickHandler(this: RecordPartial, e: MouseEvent): void {
-  e.stopPropagation()
-
-  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */
-  var target = (e.target as Element).closest('ox-list-field, ox-list-gutter') as DataListField | DataListGutter
-  var { column, record, rowIndex } = target || {}
-
-  if (column && column.type == 'gutter') {
-    /*
-     * Gutter가 클릭된 경우
-     * TODO record-partial의 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)
-    }
-  }
-}

package/src/data-list/event-handlers/record-partial-long-press-handler.ts

@@ -1,33 +0,0 @@
-import { DataListField } from '../data-list-field'
-import { DataListGutter } from '../data-list-gutter'
-import { RecordPartial } from '../record-partial'
-
-/**
- * record-partial 의 long-press handler
- *
- * - handler의 this 는 record-partial임.
- */
-export function recordPartialLongPressHandler(this: RecordPartial, e: MouseEvent) {
-  e.stopPropagation()
-
-  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */
-  var target = (e.target as Element).closest('ox-list-field, ox-list-gutter') as DataListField | DataListGutter
-  var { column, record, rowIndex } = target || {}
-
-  if (column && column.type == 'gutter') {
-    /*
-     * Gutter가 클릭된 경우
-     * TODO record-partial의 long-press handling의 성능을 확인하고,
-     * gutter에 long-press를 적용할 수 있는 지 확인한 후에 활성화하자.
-     */
-    /* 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)
-    }
-  }
-}

package/src/data-list/record-partial.ts

@@ -1,264 +0,0 @@
-import '@material/web/icon/icon.js'
-import './data-list-gutter'
-import './data-list-field'
-import '../record-view'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'
-import { RecordViewHandler } from '../record-view/record-view-handler'
-import { GristConfig, GristData, GristRecord } from '../types'
-import { recordPartialClickHandler } from './event-handlers/record-partial-click-handler'
-import { recordPartialDblClickHandler } from './event-handlers/record-partial-dblclick-handler'
-
-// import { recordPartialLongPressHandler } from './event-handlers/record-partial-long-press-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-partial')
-export class RecordPartial extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        border-bottom: var(--data-list-item-border-bottom);
-        position: relative;
-        min-height: 42px;
-        padding-left: var(--spacing-medium);
-      }
-
-      :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);
-      }
-
-      :host [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));
-      }
-
-      [content] {
-        flex: auto;
-        display: block;
-        zoom: 1;
-      }
-
-      div[tail] {
-        margin: var(--spacing-none);
-        width: 100px;
-        aspect-ratio: 1 / 1;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
-
-      div[tail] > ox-list-field {
-        flex: 1;
-      }
-
-      ox-list-field {
-        font: var(--data-list-item-etc-font);
-        color: var(--data-list-item-etc-color, var(--md-sys-color-on-surface));
-      }
-
-      ox-list-field[name] {
-        font: var(--data-list-item-name-font);
-        color: var(--data-list-item-name-color, var(--md-sys-color-secondary));
-      }
-
-      ox-list-field[desc] {
-        font: var(--data-list-item-disc-font);
-        color: var(--data-list-item-disc-color, var(--md-sys-color-on-tertiary-container));
-      }
-    `
-  ]
-
-  @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-partial의 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
-
-  attributeChangedCallback(name: string, oldval: any, newval: any) {
-    super.attributeChangedCallback(name, oldval, newval)
-  }
-
-  firstUpdated() {
-    /*
-      long-press
-      TODO. performance를 확인한 후에 활성화하자.
-    */
-    // longpressable(this.renderRoot.querySelector('[content]'))
-
-    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))
-    this.renderRoot.addEventListener('click', recordPartialClickHandler.bind(this) as EventListener)
-    this.renderRoot.addEventListener('dblclick', recordPartialDblClickHandler.bind(this) as EventListener)
-
-    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() {
-    var record = this.record
-    var rowIndex = this.rowIndex
-    var { columns, list } = this.config
-    var { thumbnail, fields, details } = list || {}
-
-    var displayColumns =
-      [...fields, ...details].map(field => columns.find(column => column.name == field)).filter(column => column) || []
-    var gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)
-
-    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined
-
-    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``}
-      ${gutters.map(
-        gutter => html`
-          <ox-list-gutter
-            class=${gutter.name === 'detail' ? 'expand' : ''}
-            .rowIndex=${rowIndex}
-            .column=${gutter}
-            .record=${record}
-            .value=${record[gutter.name]}
-          ></ox-list-gutter>
-        `
-      )}
-
-      <div content>
-        ${displayColumns.map(
-          (column, idx) => html`
-            <ox-list-field
-              .rowIndex=${rowIndex}
-              .column=${column}
-              .record=${record}
-              .value=${record[column?.name || '']}
-              ?name=${idx == 0}
-              ?desc=${idx == 1}
-            ></ox-list-field>
-          `
-        )}
-      </div>
-      ${thumbnail
-        ? html`<div tail>
-            <ox-list-field
-              thumbnail
-              .rowIndex=${rowIndex}
-              .column=${thumbnailColumn}
-              .record=${record}
-              .value=${record[thumbnailColumn?.name || '']}
-            ></ox-list-field>
-          </div>`
-        : html``}
-    `
-  }
-
-  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
-      }
-    )
-  }
-}