@operato/data-grist 8.0.0-alpha.8 → 8.0.0-beta.1

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

@@ -1,293 +0,0 @@
-import '../empty-note'
-import './data-grid-header'
-import './data-grid-body'
-import './data-grid-footer'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-import { DataManipulator } from '../data-manipulator'
-import { ColumnConfig, GristRecord, PaginationConfig } from '../types'
-import { supportsPassive } from '../utils'
-import { DataGridHeader } from './data-grid-header'
-
-/**
- * DataGrid
- */
-@customElement('ox-grid')
-export class DataGrid extends DataManipulator {
-  static styles = [
-    MDTypeScaleStyles,
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        overflow: hidden;
-
-        border-width: var(--grid-container-border-width);
-      }
-
-      ox-grid-body {
-        flex: 1;
-        position: relative;
-
-        font-variation-settings: 'FILL' 1;
-      }
-
-      ox-grid-header {
-        font-variation-settings: 'FILL' 1;
-      }
-
-      ox-grid-footer {
-        font-variation-settings: 'FILL' 1;
-      }
-
-      ox-empty-note {
-        display: block;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      div[setting] {
-        position: relative;
-        z-index: 5;
-      }
-
-      @media print {
-        :host {
-          zoom: 80%;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) focused?: { row: number; column: number }
-  @property({ type: Boolean }) empty?: boolean
-
-  @query('ox-grid-body', true) body!: LitElement
-  @query('ox-grid-header', true) header!: DataGridHeader
-  @query('ox-grid-footer', true) footer!: LitElement
-
-  @state() fixedLefts: number[] = []
-
-  firstUpdated() {
-    /* header and body scroll synchronization */
-    this.header.addEventListener('scroll', e => {
-      if (this.body.scrollLeft !== this.header.scrollLeft) {
-        this.body.scrollLeft = this.header.scrollLeft
-      }
-    })
-
-    this.body.addEventListener('scroll', e => {
-      if (this.body.scrollLeft !== this.header.scrollLeft) {
-        this.header.scrollLeft = this.body.scrollLeft
-      }
-    })
-
-    this.header.addEventListener('wheel', this.onWheelEvent.bind(this))
-    this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))
-
-    /* record selection processing */
-    this.addEventListener('select-all-change', e => {
-      if (this.data.records.length == 0) {
-        return
-      }
-
-      var { selected } = (e as CustomEvent).detail
-      var { records } = this.data
-
-      records.forEach(record => (record['__selected__'] = selected))
-
-      this.header.requestUpdate()
-      this.body.requestUpdate()
-    })
-
-    this.addEventListener('focus-change', e => {
-      const { row, column } = (e as CustomEvent).detail || {}
-      if (!this.focused || this.focused.row != row || this.focused.column != column) {
-        this.focused = { row, column }
-        this.focus()
-        this.requestUpdate()
-      }
-    })
-  }
-
-  onWheelEvent(e: WheelEvent) {
-    if (this.body.scrollWidth > this.body.clientWidth) {
-      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))
-      this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta * 30)
-
-      var maxScrollLeft = this.body.scrollWidth - this.body.clientWidth
-
-      var atStart = this.body.scrollLeft === 0
-      var atEnd = this.body.scrollLeft === maxScrollLeft
-
-      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는
-      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용
-      if ((atStart && delta > 0) || (atEnd && delta < 0)) {
-        return true
-      }
-
-      e.preventDefault()
-    }
-  }
-
-  onSelectRecordChanged({
-    selectedRecords,
-    added,
-    removed
-  }: {
-    selectedRecords: GristRecord[]
-    added: GristRecord[]
-    removed: GristRecord[]
-  }): void {
-    super.onSelectRecordChanged({ selectedRecords, added, removed })
-
-    this.header.requestUpdate()
-    this.body.requestUpdate()
-  }
-
-  onRecordChanged(
-    recordData: GristRecord,
-    row: number,
-    column: ColumnConfig | null /* TODO column should be removed */
-  ) {
-    /* record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. */
-    super.onRecordChanged(recordData, row, column)
-
-    this.header.requestUpdate()
-    this.body.requestUpdate()
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('data')) {
-      /*
-       * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,
-       * data의 변동에 대해서도 다시 계산되어야 한다.
-       */
-      this.calculateWidths(this.config.columns)
-
-      if (this.focused && 'row' in this.focused) {
-        var { row = 0, column = 0 } = this.focused
-        var { records: oldrecords = [] } = changes.get('data') || {}
-        var { records: newrecords } = this.data
-
-        var oldrecord = oldrecords[row]
-
-        if (oldrecord && oldrecord !== newrecords[row]) {
-          var newrecord = newrecords.find(
-            record =>
-              /* TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. */
-              oldrecord === record ||
-              ('id' in oldrecord
-                ? record.id == oldrecord.id
-                : 'name' in oldrecord
-                  ? record.name == oldrecord.name
-                  : false)
-          )
-
-          this.focused = {
-            row: newrecord ? newrecords.indexOf(newrecord) : row,
-            column
-          }
-        }
-      }
-    } else if (changes.has('config')) {
-      this.calculateWidths(this.config.columns)
-    }
-
-    /* grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. */
-    // this.focus()
-  }
-
-  calculateWidths(columns: ColumnConfig[]) {
-    /*
-     * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.
-     */
-    const 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('--grid-template-columns', widths)
-    this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'))
-  }
-
-  render() {
-    var { pagination = {} as PaginationConfig, columns = [], filters } = this.config
-
-    var paginatable = !pagination.infinite
-    var data = this.data
-
-    return html`
-      <div setting>
-        <slot name="setting"></slot>
-      </div>
-
-      <ox-grid-header
-        class="md-typescale-label-medium-prominent"
-        .columns=${columns}
-        .sorters=${this.sorters}
-        .filters=${this.filters}
-        .data=${data}
-        ?filtering-feature=${filters?.header}
-        @column-width-change=${(e: CustomEvent) => {
-          let { idx, width } = e.detail
-          columns[idx].width = width
-          this.calculateWidths(columns)
-        }}
-        @fixed-lefts-change=${(e: CustomEvent) => (this.fixedLefts = e.detail)}
-      >
-      </ox-grid-header>
-
-      <ox-grid-body
-        class="md-typescale-body-medium"
-        .config=${this.config}
-        .columns=${columns}
-        .data=${data}
-        .focused=${this.focused!}
-        .fixedLefts=${this.fixedLefts}
-      >
-        ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
-      </ox-grid-body>
-      ${paginatable
-        ? html`
-            <ox-grid-footer
-              class="md-typescale-body-medium"
-              .data=${data}
-              .pagination=${this.pagination}
-            ></ox-grid-footer>
-          `
-        : html``}
-    `
-  }
-
-  focus() {
-    super.focus()
-
-    this.body.focus()
-  }
-
-  get pullToRefreshTarget() {
-    return this.body
-  }
-}

package/src/data-grid/event-handlers/data-grid-body-click-handler.ts

@@ -1,69 +0,0 @@
-/**
- * ox-grid-body 의 click handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-
-import { DataGridBody } from '../data-grid-body'
-import { DataGridField } from '../data-grid-field'
-
-export function dataGridBodyClickHandler(this: DataGridBody, e: Event): void {
-  e.stopPropagation()
-
-  if ((e as MouseEvent).detail === 2) {
-    return;
-  }
-
-  if (this.editTarget) {
-    /* editTarget이 새로 설정되지 않았다면, 이후 기능이 실행된다. */
-    return
-  }
-
-  /* target should be 'ox-grid-field' */
-  var target = (e.target as Element).closest('ox-grid-field') as DataGridField
-  var { column, record, rowIndex, columnIndex } = target || {}
-
-  // if (!column) {
-  //   /* 여백 컬럼이 클릭된 경우 */
-  //   return
-  // }
-
-  // this.dispatchEvent(
-  //   new CustomEvent('focus-change', {
-  //     bubbles: true,
-  //     composed: true,
-  //     detail: {
-  //       row: rowIndex,
-  //       column: columnIndex
-  //     }
-  //   })
-  // )
-
-  /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 아래 코멘트를 제거한다. */
-  /*  
-    this.resetEdit()
-  */
-
-  /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 아래 부분을 코멘트처리한다. */
-  // if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
-  //   this.startEditTarget(rowIndex, columnIndex)
-  //   if (this.editTarget) {
-  //     /* editTarget이 새로 설정되지 않았다면, 이후 기능이 실행된다. */
-  //     return
-  //   }
-  // } else {
-  //   console.error('should not be here.')
-  //   return
-  // }
-  /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 여기까지 코멘트 처리한다. */
-
-  /* do column click handler */
-  if (column) {
-    var { click } = column.handlers
-    click && click(this.columns, this.data, column, record, rowIndex, target, e)
-  }
-
-  /* do rows click handler */
-  var { click: rowsClick } = this.config.rows.handlers
-  rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target, e)
-}

package/src/data-grid/event-handlers/data-grid-body-contextmenu-handler.ts

@@ -1,32 +0,0 @@
-import { DataGridBody } from '../data-grid-body'
-import { DataGridField } from '../data-grid-field'
-
-/**
- * ox-grid-body 의 focus-change handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export async function dataGridBodyContextMenuHandler(this: DataGridBody, e: Event): Promise<void> {
-  e.stopPropagation()
-
-  if (this.editTarget) {
-    /* editTarget이 새로 설정되지 않았다면, 이후 기능이 실행된다. */
-    return
-  }
-
-  /* target should be 'ox-grid-field' */
-  var target = (e.target as Element).closest('ox-grid-field') as DataGridField
-  var { column, record, rowIndex, columnIndex } = target || {}
-
-  var { column, record } = target || {}
-
-  /* do column contextmenu handler */
-  if (column) {
-    var { contextmenu } = column.handlers
-    contextmenu && contextmenu(this.columns, this.data, column, record, rowIndex, target, e)
-  }
-
-  /* do rows contextmenu handler */
-  var { contextmenu: rowsContextMenu } = this.config.rows.handlers
-  rowsContextMenu && rowsContextMenu(this.columns, this.data, column, record, rowIndex, target, e)
-}

package/src/data-grid/event-handlers/data-grid-body-dblclick-handler.ts

@@ -1,42 +0,0 @@
-import { DataGridBody } from '../data-grid-body'
-import { DataGridField } from '../data-grid-field'
-
-/**
- * ox-grid-body 의 dblclick handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export async function dataGridBodyDblclickHandler(this: DataGridBody, e: Event): Promise<void> {
-  e.stopPropagation()
-
-  if (this.editTarget) {
-    /* editTarget이 새로 설정되지 않았다면, 이후 기능이 실행된다. */
-    return
-  }
-
-  /* target should be 'ox-grid-field' */
-  var target = (e.target as Element).closest('ox-grid-field') as DataGridField
-  var { column, record, rowIndex, columnIndex } = target || {}
-
-  // if (!column) {
-  //   /* 여백 컬럼이 클릭된 경우 */
-  //   return
-  // }
-
-  // if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
-  //   this.startEditTarget(rowIndex, columnIndex)
-  // } else {
-  //   console.error('should not be here.')
-  //   return
-  // }
-
-  /* do column dblclick handler */
-  if (column) {
-    var { dblclick } = column.handlers
-    dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target, e)
-  }
-
-  /* do rows dblclick handler */
-  var { dblclick: rowsDblclick } = this.config.rows.handlers
-  rowsDblclick && rowsDblclick(this.columns, this.data, column, record, rowIndex, target, e)
-}

package/src/data-grid/event-handlers/data-grid-body-focus-change-handler.ts

@@ -1,24 +0,0 @@
-import { DataGridBody } from '../data-grid-body'
-
-/**
- * ox-grid-body 의 focus-change handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export async function dataGridBodyFocusChangeHandler(this: DataGridBody, e: Event): Promise<void> {
-  const { row: rowIndex, column: columnIndex } = (e as CustomEvent).detail
-
-  const target = this.getFieldByIndex(rowIndex, columnIndex)
-
-  var { column, record } = target || {}
-
-  /* do column focus handler */
-  if (column) {
-    var { focus } = column.handlers
-    focus && focus(this.columns, this.data, column, record, rowIndex, target, e)
-  }
-
-  /* do rows focus handler */
-  var { focus: rowsFocus } = this.config.rows.handlers
-  rowsFocus && rowsFocus(this.columns, this.data, column, record, rowIndex, target, e)
-}

package/src/data-grid/event-handlers/data-grid-body-keydown-handler.ts

@@ -1,234 +0,0 @@
-import { DataGridBody } from '../data-grid-body'
-
-/**
- * ox-grid-body 의 keydown handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export async function dataGridBodyKeydownHandler(this: DataGridBody, e: KeyboardEvent): Promise<void> {
-  // 한글 Composing 이벤트는 무시
-  if (e.isComposing) return
-
-  // arrow-key
-  const key = e.key
-  var { row = 0, column = 0 } = this.focused || {}
-  var { records = [] } = this.data || {}
-  var maxrow = this.config.rows.appendable ? records.length : records.length - 1
-  var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1
-
-  if (this.editTarget) {
-    switch (key) {
-      case 'Escape':
-      case 'Esc':
-      /* TODO 편집이 취소되어야 한다. */
-      case 'Enter':
-        this.editTarget = null
-
-        this.focus()
-        return
-
-      case 'Tab':
-        this.editTarget = null
-        if (e.shiftKey) {
-          column = Math.max(0, column - 1)
-        } else {
-          column = Math.min(maxcolumn, column + 1)
-        }
-        this.focus()
-        break
-
-      // case 'Down':
-      // case 'ArrowDown':
-      //   this.editTarget = null
-      //   row = Math.min(maxrow, row + 1)
-      //   this.focus()
-      //   break
-
-      case 'PageUp':
-      case 'PageDown':
-      case 'End':
-      case 'Home':
-        // e.preventDefault()
-        // return
-        break
-
-      default:
-        if (e.metaKey || e.ctrlKey) {
-          /* Window System에 선택된 영역이 없다면, 셀을 복사/붙여넣기 한다. */
-          switch (e.key) {
-            case 'c':
-              const selection = window.getSelection()
-              if (!selection || !selection.anchorNode || selection.type != 'Range') {
-                /* 
-                  editor가 select 인 경우 자체 복사 기능이 없으므로 this.copy()를 사용하도록 하기 위해서, selection.type != 'Range' 조건을 추가했다.
-                  select인 경우에는 selection.type 이 'Caret' 이었다.
-                 */
-                this.copy()
-                e.preventDefault()
-              }
-              break
-            case 'v':
-              this.paste()
-              break
-          }
-        }
-        return
-    }
-  } else {
-    switch (key) {
-      case 'Up':
-      case 'ArrowUp':
-        if (e.shiftKey) {
-          let { start } = this._selectBlock || {}
-          let focused = this.focusedField
-          if (focused && focused.rowIndex > 0) {
-            this.setSelectBlock(start || focused, this.getFieldByIndex(focused.rowIndex - 1, focused.columnIndex))
-          }
-        } else {
-          this.setSelectBlock()
-          if (e.metaKey || e.ctrlKey) {
-            row = 0
-          } else {
-            row = Math.max(0, row - 1)
-          }
-        }
-        break
-
-      case 'Down':
-      case 'ArrowDown':
-        if (e.shiftKey) {
-          let { start } = this._selectBlock || {}
-          let focused = this.focusedField
-          if (focused) {
-            let end = this.getFieldByIndex(focused.rowIndex + 1, focused.columnIndex)
-            if (end) {
-              this.setSelectBlock(start || focused, end)
-            }
-          }
-        } else {
-          this.setSelectBlock()
-          if (e.metaKey || e.ctrlKey) {
-            row = maxrow
-          } else {
-            row = Math.min(maxrow, row + 1)
-          }
-        }
-        break
-
-      case 'Enter':
-        this.setSelectBlock()
-        this.startEditTarget(row, column, null)
-        return
-
-      case 'Left':
-      case 'ArrowLeft':
-      case 'Backspace':
-        if (e.shiftKey) {
-          let { start } = this._selectBlock || {}
-          let focused = this.focusedField
-          if (focused && focused.columnIndex > 0) {
-            this.setSelectBlock(start || focused, this.getFieldByIndex(focused.rowIndex, focused.columnIndex - 1))
-          }
-        } else {
-          this.setSelectBlock()
-          if (e.metaKey || e.ctrlKey) {
-            column = 0
-          } else {
-            column = Math.max(0, column - 1)
-          }
-        }
-        break
-
-      case 'Right':
-      case 'ArrowRight':
-        if (e.shiftKey) {
-          let { start } = this._selectBlock || {}
-          let focused = this.focusedField
-          if (focused) {
-            let end = this.getFieldByIndex(focused.rowIndex, focused.columnIndex + 1, false)
-            if (end) {
-              this.setSelectBlock(start || focused, end)
-            }
-          }
-        } else {
-          this.setSelectBlock()
-          if (e.metaKey || e.ctrlKey) {
-            column = maxcolumn
-          } else {
-            column = Math.min(maxcolumn, column + 1)
-          }
-        }
-        break
-
-      case 'Tab':
-        this.editTarget = null
-        this.setSelectBlock()
-        if (e.shiftKey) {
-          column = Math.max(0, column - 1)
-        } else {
-          column = Math.min(maxcolumn, column + 1)
-        }
-        this.focus()
-        break
-
-      case 'PageUp':
-        /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
-        this.setSelectBlock()
-        row = Math.max(0, row - 10)
-        break
-
-      case 'PageDown':
-      case ' ':
-        this.setSelectBlock()
-        row = Math.min(maxrow, row + 10)
-        break
-
-      case 'Esc':
-      case 'Escape':
-        this.setSelectBlock()
-        return
-
-      case 'End':
-        this.setSelectBlock()
-        row = maxrow
-        break
-
-      case 'Home':
-        this.setSelectBlock()
-        row = 0
-        break
-
-      default:
-        if (e.metaKey || e.ctrlKey) {
-          switch (e.key) {
-            case 'c':
-              const selection = window.getSelection()
-              if (!selection || !selection.anchorNode || selection.type != 'Range') {
-                /* 
-                  에디터 상태가 아닌 경우에도, selection.type != 'Range' 조건을 추가해서,
-                  셀렉션이 된 상태에서는 기본 동작으로 텍스트 복사를 할 수 있도록 했다.
-                  보통은, 싱글 필드가 셀렉션박스로 지정된 경우에 자체 텍스트의 일부를 복사하기 위해서 필요하다.
-                 */
-                this.copy()
-                e.preventDefault()
-              }
-              break
-            case 'v':
-              this.paste()
-              break
-          }
-          return
-        } else if (key.length === 1) {
-          this.setSelectBlock()
-          this.startEditTarget(row, column, key)
-        }
-    }
-  }
-
-  if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
-    this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))
-  }
-
-  /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */
-  e.preventDefault()
-}