@operato/data-grist 1.0.0-beta.9 → 1.0.0

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

@@ -1,20 +1,21 @@
 import './data-grid-field'
 
-import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
+import debounce from 'lodash-es/debounce'
 
-import { DataGridField } from './data-grid-field'
-import { RecordViewHandler } from '../record-view/record-view-handler'
 import { TooltipStyles } from '@operato/styles'
+import { sleep } from '@operato/utils'
+
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { RecordViewHandler } from '../record-view/record-view-handler'
+import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'
+import { supportsPassive } from '../utils'
+import { dataGridBodyStyle } from './data-grid-body-style'
+import { DataGridField } from './data-grid-field'
 import { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler'
 import { dataGridBodyDblclickHandler } from './event-handlers/data-grid-body-dblclick-handler'
 import { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'
-import { dataGridBodyStyle } from './data-grid-body-style'
-import debounce from 'lodash-es/debounce'
-import { sleep } from '@operato/utils'
-import { supportsPassive } from '../utils'
 
 const THRESHOLD = 300
 const DATA_PADDING = 3
@@ -192,6 +193,17 @@ export class DataGridBody extends LitElement {
       }
     })
 
+    this.addEventListener('set-select-block', async e => {
+      e.stopPropagation()
+
+      const { startRow = -1, startColumn = -1, endRow = -1, endColumn = -1 } = ((e as CustomEvent).detail as any) || {}
+
+      const start = this.getFieldByIndex(startRow, startColumn) as DataGridField
+      const end = this.getFieldByIndex(endRow, endColumn) as DataGridField
+
+      this.setSelectBlock(start, end)
+    })
+
     this.renderRoot.addEventListener('mousemove', (event: Event) => {
       const e = event as MouseEvent
       if (e.buttons !== 1) {
@@ -203,19 +215,15 @@ export class DataGridBody extends LitElement {
 
       if (!this._selectBlock || this._selectBlockWillBeReset) {
         this._selectBlockWillBeReset = false
-        this._selectBlock = { start: field }
-
-        this.dispatchEvent(
-          new CustomEvent('focus-change', {
-            bubbles: true,
-            composed: true,
-            detail: undefined
-            // detail: {
-            //   row: field!.rowIndex,
-            //   column: field!.columnIndex
-            // }
-          })
-        )
+        this.setSelectBlock(field)
+
+        // this.dispatchEvent(
+        //   new CustomEvent('focus-change', {
+        //     bubbles: true,
+        //     composed: true,
+        //     detail: undefined
+        //   })
+        // )
 
         return
       }
@@ -234,25 +242,7 @@ export class DataGridBody extends LitElement {
       if (start && end !== field) {
         end = field
 
-        const left = start.columnIndex < end.columnIndex ? start : end
-        const right = left === start ? end : start
-        const top = start.rowIndex < end.rowIndex ? start : end
-        const bottom = top === start ? end : start
-
-        const { offsetLeft } = left
-        const { offsetTop } = top
-        const width = right.offsetLeft - offsetLeft + right.offsetWidth
-        const height = bottom.offsetTop - offsetTop + bottom.offsetHeight
-
-        this.style.setProperty('--select-box-left', offsetLeft - 1 + 'px')
-        this.style.setProperty('--select-box-top', offsetTop - 1 + 'px')
-        this.style.setProperty('--select-box-width', width + 'px')
-        this.style.setProperty('--select-box-height', height + 'px')
-
-        this._selectBlock = {
-          start,
-          end
-        }
+        this.setSelectBlock(start, end)
       }
     })
 
@@ -277,6 +267,18 @@ export class DataGridBody extends LitElement {
     )
   }
 
+  getFieldByIndex(rowIndex: number, columnIndex: number) {
+    if (rowIndex < 0) {
+      return
+    }
+
+    var columns = this.columns.filter(column => !column.hidden).length
+
+    return this.renderRoot.children.item(
+      rowIndex * (columns + 1) /* 1 means last dummy column */ + ((columnIndex + columns) % columns)
+    )
+  }
+
   _onWheelEvent(e: WheelEvent) {
     if (this.scrollHeight <= this.clientHeight) {
       var delta = Math.max(-1, Math.min(1, e.deltaY || 0))
@@ -316,7 +318,7 @@ export class DataGridBody extends LitElement {
         return
       }
 
-      this._selectBlock = undefined
+      this.setSelectBlock()
 
       let { top, left } = calcScrollPos(this, element)
       // TODO this.scroll()을 사용하면, 효과가 좋으나 left 계산에 문제가 있는 것 같음.
@@ -375,11 +377,17 @@ export class DataGridBody extends LitElement {
     )
   }
 
-  getSelectedBlockValues(): Array<Array<any>> | undefined {
+  getSelectedBlockValues(): Array<Array<any>> | any | undefined {
     var { start, end } = this._selectBlock || {}
 
     if (!(start && end)) {
       start = this.focusedField
+
+      if (typeof start!.value === 'string' || typeof start!.value === 'number') {
+        const selection = document.getSelection()
+        return selection?.toString() || this.focusedField?.value
+      }
+
       end = start
     }
 
@@ -400,14 +408,17 @@ export class DataGridBody extends LitElement {
           const columnIndex = start + index
           const column = columns[columnIndex]
 
-          return record[column.name]
+          return record?.[column.name]
         })
       })
     }
   }
 
   async copy() {
-    await navigator.clipboard.writeText(JSON.stringify(this.getSelectedBlockValues()))
+    const copied = this.getSelectedBlockValues()
+    await navigator.clipboard.writeText(
+      copied instanceof Array ? JSON.stringify(this.getSelectedBlockValues()) : copied
+    )
 
     const selectBlock = this.selectBlock
     if (selectBlock) {
@@ -431,11 +442,18 @@ export class DataGridBody extends LitElement {
       const { row, column } = this.focused
       const { records } = this.data
       const columns = this.columns.filter(column => !column.hidden)
+      var block: Array<Array<any>>
 
-      const block = JSON.parse(text)
+      try {
+        var parsed = JSON.parse(text)
+      } catch (ex) {
+        parsed = text
+      }
 
-      if (!(block instanceof Array)) {
-        return
+      if (!(parsed instanceof Array)) {
+        block = [[parsed]]
+      } else {
+        block = parsed
       }
 
       block.forEach((record, rowIndex) => {
@@ -450,7 +468,7 @@ export class DataGridBody extends LitElement {
 
         record.map((item, columnIndex) => {
           const targetColumn = columns[column + columnIndex]
-          if (!targetColumn.gutterName) {
+          if (targetColumn && !targetColumn.gutterName && targetColumn.record.editable) {
             this.dispatchEvent(
               new CustomEvent('field-change', {
                 bubbles: true,
@@ -471,4 +489,33 @@ export class DataGridBody extends LitElement {
       console.error(e)
     }
   }
+
+  setSelectBlock(start?: DataGridField, end?: DataGridField) {
+    this._selectBlock = start && { start, end }
+
+    if (start && end && start !== end) {
+      const left = start.columnIndex < end.columnIndex ? start : end
+      const right = left === start ? end : start
+      const top = start.rowIndex < end.rowIndex ? start : end
+      const bottom = top === start ? end : start
+
+      const { offsetLeft } = left
+      const { offsetTop } = top
+      const width = right.offsetLeft - offsetLeft + right.offsetWidth
+      const height = bottom.offsetTop - offsetTop + bottom.offsetHeight
+
+      this.style.setProperty('--select-box-left', offsetLeft - 1 + 'px')
+      this.style.setProperty('--select-box-top', offsetTop - 1 + 'px')
+      this.style.setProperty('--select-box-width', width + 'px')
+      this.style.setProperty('--select-box-height', height + 'px')
+
+      this.dispatchEvent(
+        new CustomEvent('focus-change', {
+          bubbles: true,
+          composed: true,
+          detail: undefined
+        })
+      )
+    }
+  }
 }

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

@@ -1,9 +1,10 @@
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
+import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { TooltipStyles } from '@operato/styles'
+
 import { ZERO_COLUMN } from '../configure/zero-config'
+import { ColumnConfig, GristRecord } from '../types'
 
 const DEFAULT_TEXT_ALIGN = 'left'
 

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

@@ -1,12 +1,10 @@
 import '@material/mwc-icon'
 
-import { GristConfig, GristData } from '../types'
-import { LitElement, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-const DEFAULT_PAGES = [20, 30, 50, 100]
-const DEFAULT_LIMIT = 30
+import { ZERO_DATA, ZERO_PAGES } from '../configure/zero-config'
+import { GristData, PaginationConfig } from '../types'
 
 @customElement('ox-grid-footer')
 export class DataGridFooter extends LitElement {
@@ -57,11 +55,12 @@ export class DataGridFooter extends LitElement {
     `
   ]
 
-  @property() config: GristConfig = ZERO_CONFIG
   @property() data: GristData = ZERO_DATA
+  @property() pagination: PaginationConfig = {}
 
   _gotoPage(page: number) {
-    var { limit = 20, total = 0 } = this.data
+    var { pages = ZERO_PAGES } = this.pagination || {}
+    var { limit = pages[0], total = 0 } = this.data
 
     if (page > Math.ceil(total / limit) || page <= 0) {
       return
@@ -74,8 +73,8 @@ export class DataGridFooter extends LitElement {
   }
 
   render() {
-    var { records = [], page = 1, limit = DEFAULT_LIMIT, total = 0 } = this.data
-    var { pages = DEFAULT_PAGES } = this.config.pagination || {}
+    var { pages = ZERO_PAGES } = this.pagination || {}
+    var { records = [], page = 1, limit = pages[0], total = 0 } = this.data
 
     var begin = records.length == 0 ? 0 : limit * (page - 1) + 1
     var end = records.length == 0 ? 0 : begin + records.length - 1

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

@@ -1,22 +1,24 @@
 import '@operato/popup/ox-popup.js'
 import '@material/mwc-icon'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 import throttle from 'lodash-es/throttle'
 
 import { OxPopup } from '@operato/popup'
-import { closestElement } from '@operato/utils'
+import { TooltipStyles } from '@operato/styles'
+import { closestElement, detectOverflow } from '@operato/utils'
 
-import { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { ZERO_COLUMNS, ZERO_DATA } from '../configure/zero-config'
 import { FilterStyles } from '../filters/filter-styles'
 import { getFilterRenderer } from '../filters/registry'
-import { ColumnConfig, FilterConfigObject, FilterValue, GristConfig, GristData, SortersConfig } from '../types'
+import { ColumnConfig, FilterConfigObject, FilterValue, GristData, SortersConfig } from '../types'
 
 @customElement('ox-grid-header')
 export class DataGridHeader extends LitElement {
   static styles = [
     FilterStyles,
+    TooltipStyles,
     css`
       :host {
         display: grid;
@@ -78,6 +80,7 @@ export class DataGridHeader extends LitElement {
       span[splitter] {
         cursor: col-resize;
         border-right: var(--grid-header-splitter-border);
+        margin-right: 0;
       }
       span[splitter]:hover {
         border-right: var(--grid-header-splitter-border-hover);
@@ -112,12 +115,11 @@ export class DataGridHeader extends LitElement {
     `
   ]
 
-  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
   @property({ type: Array }) columns: ColumnConfig[] = ZERO_COLUMNS
   @property({ type: Object }) data: GristData = ZERO_DATA
 
-  @state() private _sorters: SortersConfig = []
-  @state() private _filters: FilterValue[] = []
+  @property({ type: Object }) sorters: SortersConfig = []
+  @property({ type: Object }) filters: FilterValue[] = []
 
   private _lastAccVal?: number
   private _throttledNotifier?: any
@@ -126,20 +128,12 @@ export class DataGridHeader extends LitElement {
     super.connectedCallback()
 
     const grid = closestElement('ox-grist', this)
-    grid?.addEventListener('sorters-change', (e: Event) => {
-      const { sorters, from } = (e as CustomEvent).detail || {}
-      if (from === 'data-grid-header') {
-        return
-      }
-
-      this._sorters = [...(sorters || [])]
-    })
 
-    grid?.addEventListener('filter-change', (e: Event) => {
+    this?.addEventListener('filter-change', (e: Event) => {
       const { name, operator, value } = (e as CustomEvent).detail
-      const filters = this._filters instanceof Array ? [...this._filters] : []
+      const filters = this.filters instanceof Array ? [...this.filters] : []
 
-      if (value === undefined || value === null) {
+      if (value == null) {
         const index = filters.findIndex(filter => filter.name === name)
         if (index === -1) {
           return
@@ -156,7 +150,7 @@ export class DataGridHeader extends LitElement {
       }
 
       grid?.dispatchEvent(
-        new CustomEvent('filters-change', {
+        new CustomEvent('fetch-params-change', {
           detail: {
             filters,
             from: 'data-grid-header'
@@ -164,15 +158,6 @@ export class DataGridHeader extends LitElement {
         })
       )
     })
-
-    grid?.addEventListener('filters-change', (e: Event) => {
-      const { filters, from } = (e as CustomEvent).detail || {}
-      if (from === 'data-grid-header') {
-        return
-      }
-
-      this._filters = [...(filters || [])]
-    })
   }
 
   render() {
@@ -183,7 +168,20 @@ export class DataGridHeader extends LitElement {
         !column.hidden
           ? html`
               <div ?gutter=${column.type == 'gutter'} column>
-                <span for-title @click=${(e: MouseEvent) => this._changeSort(column)}
+                <span
+                  for-title
+                  @click=${(e: MouseEvent) => this._changeSort(column)}
+                  @mouseover=${(e: MouseEvent) => {
+                    const element = e.target as HTMLSpanElement
+
+                    if (detectOverflow(element)) {
+                      element.setAttribute('data-tooltip', element.textContent!.trim())
+                    }
+                  }}
+                  @mouseout=${(e: MouseEvent) => {
+                    const element = e.target as HTMLSpanElement
+                    element.removeAttribute('data-tooltip')
+                  }}
                   >${this._renderHeader(column)}
                 </span>
 
@@ -221,7 +219,7 @@ export class DataGridHeader extends LitElement {
   }
 
   _renderSortHeader(column: ColumnConfig) {
-    var sorters = this._sorters
+    var sorters = this.sorters || []
 
     var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)
     if (!sorter) {
@@ -231,12 +229,12 @@ export class DataGridHeader extends LitElement {
     if (sorters.length > 1) {
       var rank = sorters.indexOf(sorter) + 1
       return sorter.desc
-        ? html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `
-        : html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `
+        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `
+        : html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `
     } else {
       return sorter.desc
-        ? html` <mwc-icon>keyboard_arrow_up</mwc-icon> `
-        : html` <mwc-icon>keyboard_arrow_down</mwc-icon> `
+        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon> `
+        : html` <mwc-icon>keyboard_arrow_up</mwc-icon> `
     }
   }
 
@@ -244,7 +242,7 @@ export class DataGridHeader extends LitElement {
     const name = column.name
     const filter = column.filter as FilterConfigObject
     const type = filter.type
-    const value = this._filters.find(filter => filter.name === name)?.value
+    const value = this.filters.find(filter => filter.name === name)?.value
     const idx = filter!.operator === 'between' ? 1 : 0
     const renderer = getFilterRenderer(type)[idx]
 
@@ -326,19 +324,12 @@ export class DataGridHeader extends LitElement {
     `
   }
 
-  updated(changes: PropertyValues<this>) {
-    // TODO config 에 의한 sorters 설정은 제거해야 한다.
-    if (changes.has('config')) {
-      this._sorters = this._sorters || this.config.sorters || []
-    }
-  }
-
   _changeSort(column: ColumnConfig) {
     if (!column.sortable) {
       return
     }
 
-    var sorters = [...this._sorters]
+    var sorters = [...this.sorters]
 
     var idx = sorters.findIndex(sorter => sorter.name == column.name)
     if (idx !== -1) {
@@ -356,14 +347,14 @@ export class DataGridHeader extends LitElement {
       sorters.push(sorter)
     }
 
-    this._sorters = sorters
+    this.sorters = sorters
 
     this.dispatchEvent(
-      new CustomEvent('sorters-change', {
+      new CustomEvent('fetch-params-change', {
         bubbles: true,
         composed: true,
         detail: {
-          sorters: this._sorters,
+          sorters: this.sorters,
           from: 'data-grid-header'
         }
       })

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

@@ -2,14 +2,15 @@ import './data-grid-header'
 import './data-grid-body'
 import './data-grid-footer'
 
-import { ColumnConfig, GristRecord, PaginationConfig } from '../types'
-import { LitElement, PropertyValues, css, html } from 'lit'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import { DataGridHeader } from './data-grid-header'
-import { DataManipulator } from '../data-manipulator'
 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
@@ -190,8 +191,9 @@ export class DataGrid extends DataManipulator {
 
     return html`
       <ox-grid-header
-        .config=${this.config}
         .columns=${columns}
+        .sorters=${this.sorters}
+        .filters=${this.filters}
         .data=${data}
         @column-width-change=${(e: CustomEvent) => {
           let { idx, width } = e.detail
@@ -202,7 +204,7 @@ export class DataGrid extends DataManipulator {
 
       <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused}></ox-grid-body>
 
-      ${paginatable ? html` <ox-grid-footer .config=${this.config} .data=${data}></ox-grid-footer> ` : html``}
+      ${paginatable ? html` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html``}
     `
   }
 

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

@@ -14,20 +14,18 @@ export function dataGridBodyClickHandler(this: DataGridBody, e: Event): void {
   var target = (e.target as Element).closest('ox-grid-field') as DataGridField
   var { column, record, rowIndex, columnIndex } = target || {}
 
-  if (!this.focused || rowIndex !== this.focused.row || columnIndex !== this.focused.column) {
-    this.dispatchEvent(
-      new CustomEvent('focus-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          row: rowIndex,
-          column: columnIndex
-        }
-      })
-    )
+  this.dispatchEvent(
+    new CustomEvent('focus-change', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        row: rowIndex,
+        column: columnIndex
+      }
+    })
+  )
 
-    this.resetEdit()
-  }
+  this.resetEdit()
 
   /* do column click handler */
   if (column) {