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

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

@@ -1,58 +0,0 @@
-import { css } from 'lit'
-
-export const dataReportBodyStyle = css`
-  :host {
-    display: grid;
-    grid-template-columns: var(--report-template-columns);
-    grid-auto-rows: var(--report-record-height, min-content);
-
-    overflow: auto;
-    outline: none;
-  }
-
-  :host > [focused] {
-    border: var(--report-record-focused-border);
-  }
-
-  :host > [focused-row] {
-    background-color: var(--report-record-focused-background-color);
-  }
-
-  :host > [totalized] {
-    background-color: var(--report-totalized-background-color);
-    border-top: var(--report-totalized-border);
-    border-bottom: var(--report-totalized-border);
-    color: var(--report-totalized-color);
-
-    font-weight: 700;
-  }
-
-  :host > [grouped] {
-    background-color: var(--report-grouped-background-color);
-    border-right: var(--report-grouped-border);
-    border-bottom: var(--report-grouped-border);
-    color: var(--report-grouped-color);
-
-    font-weight: 600;
-  }
-
-  @media print {
-    :host {
-      -webkit-print-color-adjust: exact;
-      grid-template-columns: var(--report-template-print-columns);
-    }
-    :host > [focused] {
-      border-width: 0 1px 1px 0;
-      border-right: var(--report-grouped-border);
-      border-bottom: var(--report-grouped-border);
-    }
-
-    :host > [focused-row] {
-      background-color: initial;
-      color: #000;
-    }
-    :host > [grouped] {
-      background-color: var(--report-grouped-background-color);
-    }
-  }
-`

package/src/data-report/data-report-body.ts

@@ -1,189 +0,0 @@
-import './data-report-field'
-
-import { html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
-import { ColumnConfig, GristConfig, GristData } from '../types'
-import { dataReportBodyStyle } from './data-report-body-style'
-import { dataReportBodyClickHandler } from './event-handlers/data-report-body-click-handler'
-import { dataReportBodyDblclickHandler } from './event-handlers/data-report-body-dblclick-handler'
-import { dataReportBodyKeydownHandler } from './event-handlers/data-report-body-keydown-handler'
-
-function calcScrollPos(parent: DataReportBody, child: Element) {
-  /* getBoundingClientRect는 safari에서 스크롤 상태에서 다른 브라우저와는 다른 값을 리턴함 - 사파리는 약간 이상 작동함. */
-  var { top: ct, left: cl, right: cr, bottom: cb } = child.getBoundingClientRect()
-  var { top: pt, left: pl, right: pr, bottom: pb } = parent.getBoundingClientRect()
-  var { scrollLeft, scrollTop } = parent
-  var scrollbarWidth = parent.clientWidth - parent.offsetWidth
-  var scrollbarHeight = parent.clientHeight - parent.offsetHeight
-
-  return {
-    left: cl < pl ? scrollLeft - (pl - cl) : cr > pr ? scrollLeft - (pr - cr) - scrollbarWidth : undefined,
-    top: ct < pt ? scrollTop - (pt - ct) : cb > pb ? scrollTop - (pb - cb) - scrollbarHeight : undefined
-  }
-}
-
-@customElement('ox-report-body')
-export class DataReportBody extends LitElement {
-  static styles = [dataReportBodyStyle]
-
-  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
-  @property({ type: Array }) columns: ColumnConfig[] = []
-  @property({ type: Object }) data: GristData = ZERO_DATA
-  @property({ type: Object }) focused?: { row: number; column: number }
-
-  private _focusedListener?: EventListener
-
-  render() {
-    var { rows } = this.config
-    var { groups } = rows || {}
-
-    var getColumnIndex = (name: string) =>
-      this.columns.filter(column => !column.hidden).findIndex(column => column.name == name)
-    var getColumn = (name: string | number) => this.columns.find(column => column.name == name)
-
-    var { row: focusedRow = 0, column: focusedColumn = 0 } = this.focused || {}
-
-    var columns = (this.columns || []).filter(
-      column => !column.hidden && groups.map(group => group.column).indexOf(column.name) == -1
-    )
-    var data = this.data
-    var { records = [] } = data
-
-    return html`
-      ${records.map((record, idxRow) => {
-        var attrFocusedRow = idxRow === focusedRow
-        var totalic = record['*']
-        var totalicColumn =
-          totalic && (totalic.groupName == '*' ? getColumn(groups[0].column) : getColumn(totalic.groupName))
-
-        return html`
-          ${!totalic || (totalic && totalic.value)
-            ? html`
-                ${columns.map(column => {
-                  let columnIndex = getColumnIndex(column.name)
-                  return html`
-                    <ox-report-field
-                      .data=${data}
-                      .rowIndex=${idxRow}
-                      .columnIndex=${columnIndex}
-                      .column=${column}
-                      .record=${record}
-                      ?gutter=${column.type == 'gutter'}
-                      ?focused-row=${attrFocusedRow}
-                      ?focused=${attrFocusedRow && columnIndex === focusedColumn}
-                      ?totalized=${totalic}
-                      .value=${record[column.name]}
-                    ></ox-report-field>
-                  `
-                })}
-                <ox-report-field
-                  .data=${data}
-                  .rowIndex=${idxRow}
-                  .record=${record}
-                  ?focused-row=${attrFocusedRow}
-                  ?totalized=${totalic}
-                ></ox-report-field>
-              `
-            : html``}
-          ${!totalic
-            ? html``
-            : html`
-                ${totalic.groupName == '*'
-                  ? html``
-                  : html`
-                      <ox-report-field
-                        .data=${data}
-                        .rowIndex=${totalic.row - 1}
-                        .columnIndex=${totalic.column - 1}
-                        .column=${totalicColumn}
-                        .record=${record}
-                        ?focused-row=${totalic.row - 1 <= focusedRow && totalic.row - 1 + totalic.rowspan > focusedRow}
-                        ?focused=${totalic.row - 1 === focusedRow && totalic.column - 1 === focusedColumn}
-                        ?grouped=${true}
-                        .value=${record[totalic.groupName]}
-                        .style="grid-area: ${totalic.row} / ${totalic.column} / span ${totalic.rowspan} / span 1;"
-                      ></ox-report-field>
-                    `}
-                ${!totalic.value
-                  ? html``
-                  : html`
-                      <ox-report-field
-                        .data=${data}
-                        .rowIndex=${idxRow}
-                        .columnIndex=${totalic.column - 1}
-                        .column=${totalic.titleColumn}
-                        .record=${record}
-                        ?focused-row=${attrFocusedRow}
-                        ?focused=${idxRow === focusedRow && totalic.column - 1 === focusedColumn}
-                        ?grouped=${true}
-                        .value=${totalic.value}
-                        .style="grid-area: ${totalic.row +
-                        totalic.rowspan} / ${totalic.column} / span 1 / span ${totalic.colspan};"
-                      ></ox-report-field>
-                    `}
-              `}
-        `
-      })}
-    `
-  }
-
-  firstUpdated() {
-    /* focus() 를 받을 수 있도록 함. */
-    this.setAttribute('tabindex', '-1')
-
-    /*
-     * focusout 으로 property를 변경시키는 경우, focusout에 의해 update가 발생하는 경우에는,
-     * 그리드 내부의 컴포넌트가 갱신되는 현상을 초래하게 된다.
-     * 따라서, focusout 핸들러에서 update를 유발하는 코드는 강력하게 금지시킨다.
-     */
-    this.addEventListener('focusout', e => {
-      if (this._focusedListener) {
-        window.removeEventListener('keydown', this._focusedListener)
-        delete this._focusedListener
-      }
-    })
-
-    this.addEventListener('focusin', e => {
-      if (!this._focusedListener) {
-        this._focusedListener = dataReportBodyKeydownHandler.bind(this) as EventListener
-        window.addEventListener('keydown', this._focusedListener)
-      }
-    })
-
-    this.renderRoot.addEventListener('click', dataReportBodyClickHandler.bind(this))
-    this.renderRoot.addEventListener('dblclick', dataReportBodyDblclickHandler.bind(this))
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('focused')) {
-      let element = this.renderRoot.querySelector('[focused]')
-      if (!element) {
-        return
-      }
-
-      let { top, left } = calcScrollPos(this, element)
-      // TODO this.scroll()을 사용하면, 효과가 좋으나 left 계산에 문제가 있는 것 같음.
-      // this.scroll({
-      //   top,
-      //   left,
-      //   behavior: 'smooth'
-      // })
-      if (top !== undefined) {
-        this.scrollTop = top
-      }
-      if (left !== undefined) {
-        this.scrollLeft = left
-      }
-    }
-  }
-
-  focus() {
-    super.focus()
-
-    if (!this.focused || this.focused.row == null) {
-      this.focused = { row: 0, column: 0 }
-    }
-  }
-}

package/src/data-report/data-report-component.ts

@@ -1,138 +0,0 @@
-import './data-report-header'
-import './data-report-body'
-
-import { ColumnConfig, GristConfig, GristData } from '../types'
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-/**
- * DataReportComponent
- */
-
-@customElement('ox-report-component')
-export class DataReportComponent extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        overflow: hidden;
-
-        border: 1px solid var(--report-header-border-color);
-        border-radius: var(--report-component-border-radius);
-      }
-
-      ox-report-body {
-        flex: 1;
-      }
-
-      @media print {
-        :host {
-          zoom: 80%;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
-  @property({ type: Object }) data: GristData = ZERO_DATA
-
-  private _widths: string = ''
-
-  @query('ox-report-body', true) body!: HTMLElement
-  @query('ox-report-header', true) header!: HTMLElement
-
-  firstUpdated() {
-    /* header and body scroll synchronization */
-    this.header?.addEventListener('scroll', (e: Event) => {
-      const body = this.body
-      const header = this.header
-      if (body && header) {
-        if (body.scrollLeft !== header.scrollLeft) {
-          body.scrollLeft = header.scrollLeft
-        }
-      }
-    })
-
-    this.body?.addEventListener('scroll', e => {
-      const body = this.body
-      const header = this.header
-      if (body && header) {
-        if (body.scrollLeft !== header.scrollLeft) {
-          header.scrollLeft = body.scrollLeft
-        }
-      }
-    })
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('config') || changes.has('data')) {
-      /*
-       * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,
-       * data의 변동에 대해서도 다시 계산되어야 한다.
-       */
-      this.calculateWidths(this.config && this.config.columns)
-    }
-  }
-
-  calculateWidths(columns: ColumnConfig[]) {
-    /*
-     * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.
-     */
-    this._widths = columns
-      .filter(column => !column.hidden)
-      .map(column => {
-        switch (typeof column.width) {
-          case 'number':
-            return column.width + 'px'
-          case 'string':
-            return column.width
-          case 'function':
-            return column.width.call(this, column)
-          default:
-            return 'auto'
-        }
-      })
-      .concat(['auto'])
-      .join(' ')
-
-    this.style.setProperty('--report-template-columns', this._widths)
-    this.style.setProperty('--report-template-print-columns', this._widths.replace(/px/gi, 'fr'))
-  }
-
-  render() {
-    var { columns } = this.config
-
-    var data = this.data
-
-    return html`
-      <ox-report-header
-        .config=${this.config}
-        .columns=${columns}
-        .data=${data}
-        @column-width-change=${(e: CustomEvent) => {
-          let { idx, width } = e.detail
-          columns[idx].width = width
-          this.calculateWidths(columns)
-        }}
-      ></ox-report-header>
-
-      <ox-report-body .config=${this.config} .columns=${columns} .data=${data}></ox-report-body>
-    `
-  }
-
-  focus() {
-    super.focus()
-
-    this.body.focus()
-  }
-
-  get pullToRefreshTarget() {
-    return this.body
-  }
-}

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

@@ -1,83 +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-report-field')
-export class DataReportField extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        align-items: center;
-        justify-content: var(--data-report-field-justify-content, flex-start);
-        position: relative;
-
-        white-space: nowrap;
-        overflow: hidden;
-        background-color: var(--report-record-background-color);
-        padding: var(--report-record-field-padding);
-        border: 1px solid transparent;
-        border-bottom: var(--report-record-field-border-bottom);
-
-        font-size: var(--report-record-wide-fontsize);
-        text-overflow: ellipsis;
-
-        min-height: 30px;
-        box-sizing: border-box;
-      }
-
-      :host([gutter]) * {
-        cursor: default;
-        font-size:1.2em;
-      }
-
-      * {
-        flex: 1;
-        margin: 0;
-        text-align: var(--data-report-field-text-align);
-      }
-
-      *[center] {
-        flex: none;
-        margin: 0 auto;
-      }
-    `
-  ]
-
-  @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: Number }) columnIndex: number = -1
-  @property({ type: Object }) value: any
-
-  render(): TemplateResult {
-    if (!this.column) {
-      return html``
-    }
-
-    var { value, column, record, rowIndex } = this
-    var { renderer } = column.record
-
-    return html` ${renderer(value, column, record, rowIndex, this)} `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('column')) {
-      var align = (this.column.record && 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-report-field-justify-content', justify)
-        this.style.setProperty('--data-report-field-text-align', align)
-      }
-    }
-  }
-}

package/src/data-report/data-report-header.ts

@@ -1,242 +0,0 @@
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import throttle from 'lodash-es/throttle'
-
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
-import { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'
-import { supportsPassive } from '../utils'
-
-@customElement('ox-report-header')
-class DataReportHeader extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: grid;
-        grid-template-columns: var(--report-template-columns);
-
-        overflow: hidden;
-      }
-
-      div {
-        display: flex;
-
-        white-space: nowrap;
-        overflow: hidden;
-        background-color: var(--report-header-background-color, gray);
-        border: 1px solid var(--report-header-border-color);
-        border-width: 1px 1px 1px 0;
-        padding: var(--report-header-padding);
-
-        text-overflow: ellipsis;
-        text-align: center;
-        font-size: var(--report-header-fontsize, 1em);
-        color: var(--report-header-color);
-      }
-
-      span {
-        white-space: nowrap;
-        overflow: hidden;
-
-        text-align: center;
-      }
-
-      span[titler] {
-        flex: 1;
-        text-overflow: ellipsis;
-        font: var(--report-header-font);
-        color: var(--report-header-color);
-        text-transform: capitalize;
-      }
-
-      span[sorter] {
-        padding: 0;
-        border: 0;
-        font-size: 10px;
-      }
-
-      span[splitter] {
-        cursor: col-resize;
-      }
-
-      @media print {
-        :host {
-          grid-template-columns: var(--report-template-print-columns);
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
-  @property({ type: Array }) columns: ColumnConfig[] = []
-  @property({ type: Object }) data: GristData = ZERO_DATA
-  @property({ type: Array }) private _sorters?: SortersConfig
-
-  private throttledNotifier?: (idx: number, width: number) => void
-
-  onWheelEvent(e: WheelEvent) {
-    if (this.scrollWidth > this.clientWidth) {
-      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))
-      this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)
-
-      var maxScrollLeft = this.scrollWidth - this.clientWidth
-
-      var atStart = this.scrollLeft === 0
-      var atEnd = this.scrollLeft === maxScrollLeft
-
-      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는
-      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용
-      if ((atStart && delta > 0) || (atEnd && delta < 0)) {
-        return true
-      }
-
-      e.preventDefault()
-    }
-  }
-
-  firstUpdated() {
-    this.addEventListener('wheel', this.onWheelEvent.bind(this))
-  }
-
-  async updated(changed: PropertyValues<this>) {
-    if (changed.has('config')) {
-      this._sorters = this.config.sorters || []
-    }
-  }
-
-  render() {
-    var columns = this.columns || []
-
-    return html`
-      ${columns.map((column, idx) =>
-        !column.hidden
-          ? html`
-              <div @dragstart=${(e: MouseEvent) => this._dragStart(e, idx)}>
-                <span titler @click=${(e: Event) => this._changeSort(column)}>${this._renderHeader(column)} </span>
-
-                ${column.sortable
-                  ? html`
-                      <span sorter @click=${(e: Event) => this._changeSort(column)}>
-                        ${this._renderSortHeader(column)}
-                      </span>
-                    `
-                  : html``}
-                ${column.resizable !== false ? html` <span splitter draggable="true">&nbsp;</span> ` : html``}
-              </div>
-            `
-          : html``
-      )}
-
-      <div></div>
-    `
-  }
-
-  _renderHeader(column: ColumnConfig) {
-    var { renderer } = column.header || {}
-    var title = renderer.call(this, column)
-
-    return html` ${title} `
-  }
-
-  _renderSortHeader(column: ColumnConfig) {
-    if (column.hidden) {
-      return html``
-    }
-
-    var sorters = this._sorters || []
-
-    var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)
-    if (!sorter) {
-      return html``
-    }
-
-    if (sorters.length > 1) {
-      var rank = sorters.indexOf(sorter) + 1
-      return sorter.desc ? html` &#9660;<sub>${rank}</sub> ` : html` &#9650;<sub>${rank}</sub> `
-    } else {
-      return sorter.desc ? html` &#9660; ` : html` &#9650; `
-    }
-  }
-
-  _changeSort(column: ColumnConfig) {
-    if (!column.sortable) {
-      return
-    }
-
-    var sorters = [...(this._sorters || [])]
-
-    var idx = sorters.findIndex(sorter => sorter.name == column.name)
-    if (idx !== -1) {
-      let sorter = sorters[idx]
-      if (sorter.desc) {
-        sorters.splice(idx, 1)
-      } else {
-        sorter.desc = true
-      }
-    } else {
-      var sorter = {
-        name: column.name
-      }
-
-      sorters.push(sorter)
-    }
-
-    this._sorters = sorters
-
-    this.dispatchEvent(
-      new CustomEvent('fetch-params-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          sorters: this._sorters,
-          from: 'data-report-header'
-        }
-      })
-    )
-  }
-
-  _notifyWidthChange(idx: number, width: number) {
-    if (!this.throttledNotifier) {
-      this.throttledNotifier = throttle((idx, width) => {
-        this.dispatchEvent(
-          new CustomEvent('column-width-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              idx,
-              width
-            }
-          })
-        )
-      }, 100)
-    }
-
-    this.throttledNotifier(idx, width)
-  }
-
-  _dragStart(e: MouseEvent, idx: number) {
-    var target = e.currentTarget as HTMLElement
-    var startX = e.offsetX
-
-    var dragHandler = ((e: MouseEvent) => {
-      let column = this.columns[idx]
-
-      let width = Math.max(0, Number(column.width) + e.offsetX - startX)
-      if (width == 0) {
-        /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */
-        return
-      }
-
-      this._notifyWidthChange(idx, width)
-    }).bind(this)
-
-    var dragEndHandler = ((e: MouseEvent) => {
-      target.removeEventListener('drag', dragHandler)
-      target.removeEventListener('dragend', dragEndHandler)
-
-      dragHandler(e)
-    }).bind(this)
-
-    target.addEventListener('drag', dragHandler)
-    target.addEventListener('dragend', dragEndHandler)
-  }
-}