@operato/data-grist 0.3.9 → 0.3.16

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

@@ -6,6 +6,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 import throttle from 'lodash-es/throttle'
 
 import { OxPopup } from '@operato/popup'
+import { closestElement } from '@operato/utils'
 
 import { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
 import { FilterStyles } from '../filters/filter-styles'
@@ -24,7 +25,7 @@ export class DataGridHeader extends LitElement {
         overflow: hidden;
       }
 
-      :scope > div {
+      div[column] {
         display: flex;
 
         white-space: nowrap;
@@ -119,6 +120,15 @@ export class DataGridHeader extends LitElement {
   private _lastAccVal?: number
   private _throttledNotifier?: any
 
+  connectedCallback() {
+    super.connectedCallback()
+
+    const grid = closestElement('ox-grist', this)
+    grid?.addEventListener('sorters-change', (e: Event) => {
+      this._sorters = (e as CustomEvent).detail
+    })
+  }
+
   render() {
     var columns = this.columns || []
 

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

@@ -2,20 +2,21 @@ import './data-grid-header'
 import './data-grid-body'
 import './data-grid-footer'
 
-import { ColumnConfig, GristConfig, GristData, GristRecord, PaginationConfig } 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 } from 'lit/decorators.js'
 
-import { DataGridHeader } from './data-grid-header'
 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 LitElement {
+export class DataGrid extends DataManipulator {
   static styles = [
     ScrollbarStyles,
     css`
@@ -40,8 +41,6 @@ export class DataGrid extends LitElement {
     `
   ]
 
-  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
-  @property({ type: Object }) data: GristData = ZERO_DATA
   @property({ type: Object }) focused?: { row: number; column: number }
 
   @query('ox-grid-body', true) body!: LitElement
@@ -82,70 +81,11 @@ export class DataGrid extends LitElement {
       this.body.requestUpdate()
     })
 
-    this.addEventListener('select-record-change', e => {
-      var {
-        records: selectedRecords,
-        added = [],
-        removed = []
-      } = (e as CustomEvent).detail as {
-        records: GristRecord[]
-        added: GristRecord[]
-        removed: GristRecord[]
-      }
-      var { records } = this.data
-      var { selectable } = this.config.rows
-
-      if (!records) {
-        return
-      }
-
-      if (selectable && !selectable.multiple) {
-        records.forEach(record => (record['__selected__'] = false))
-      }
-
-      if (selectedRecords) {
-        records.forEach(record => (record['__selected__'] = false))
-        selectedRecords.forEach(record => (record['__selected__'] = true))
-      } else {
-        removed.forEach(record => (record['__selected__'] = false))
-        added.forEach(record => (record['__selected__'] = true))
-      }
-
-      this.header.requestUpdate()
-      this.body.requestUpdate()
-    })
-
-    /* field change processing */
-    this.addEventListener('field-change', e => {
-      var { after, before, column, record, row } = (e as CustomEvent).detail
-
-      /* compare changes */
-      if (after === before) {
-        return
-      }
-
-      var validation = column.validation
-      if (validation && typeof (validation == 'function')) {
-        if (!validation.call(this, after, before, record, column)) {
-          return
-        }
-      }
-
-      this.onRecordChanged({ [column.name]: after }, row, column)
-    })
-
     this.addEventListener('focus-change', e => {
       this.focused = (e as CustomEvent).detail
       this.focus()
       this.requestUpdate()
     })
-
-    /* record reset processing */
-    this.addEventListener('record-reset', e => {
-      var { record, row } = (e as CustomEvent).detail
-
-      this.onRecordChanged(record['__origin__'], row, null)
-    })
   }
 
   onWheelEvent(e: WheelEvent) {
@@ -155,89 +95,19 @@ export class DataGrid extends LitElement {
     supportsPassive || e.preventDefault()
   }
 
-  onRecordChanged(
-    recordData: GristRecord,
-    row: number,
-    column: ColumnConfig | null /* TODO column should be removed */
-  ) {
-    // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.
-
-    /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */
-    var records = this.data.records
-
-    var beforeRecord: GristRecord = records[row]
-    var afterRecord: GristRecord
-    var wantToDelete = false
-    var wantToAppend = false
-
-    if (!recordData) {
-      if (!beforeRecord) {
-        /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */
-        this.requestUpdate()
-        return
-      } else {
-        /*
-         * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,
-         * 삭제하고자 하는 의도로 이해된다. (주의 필요)
-         */
-        if (beforeRecord['__dirty__'] == '+') {
-          wantToDelete = true
-        } else {
-          afterRecord = {
-            ...beforeRecord,
-            __dirty__: '-'
-          }
-        }
-      }
-    } else {
-      if (!beforeRecord) {
-        /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */
-        afterRecord = {
-          ...recordData,
-          __dirty__: '+'
-        }
-
-        wantToAppend = true
-      } else {
-        let beforeDirty = beforeRecord.__dirty__
-        if (beforeDirty == '+') {
-          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */
-          afterRecord = {
-            ...beforeRecord,
-            ...recordData,
-            __dirty__: '+'
-          }
-        } else {
-          /* 기존에 레코드가 있었으며 계속 수정중이다. */
-          afterRecord = {
-            ...beforeRecord,
-            ...recordData,
-            __dirty__: 'M'
-          }
-        }
-      }
-    }
-
-    if (wantToAppend) {
-      records.push(afterRecord!)
-    } else if (wantToDelete) {
-      records.splice(row, 1)
-    } else {
-      records.splice(row, 1, afterRecord!)
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('record-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          before: beforeRecord,
-          after: afterRecord!,
-          column,
-          row
-        }
-      })
-    )
+  onSelectRecordChanged({
+    selectedRecords,
+    added,
+    removed
+  }: {
+    selectedRecords: GristRecord[]
+    added: GristRecord[]
+    removed: GristRecord[]
+  }): void {
+    super.onSelectRecordChanged({ selectedRecords, added, removed })
+
+    this.header.requestUpdate()
+    this.body.requestUpdate()
   }
 
   updated(changes: PropertyValues<this>) {

package/src/data-grist.ts

@@ -275,6 +275,10 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
   }
 
+  get compiledConfig(): GristConfig {
+    return this._config
+  }
+
   get sorters(): SortersConfig | undefined {
     return this._config?.sorters
   }
@@ -392,15 +396,12 @@ export class DataGrist extends LitElement implements DataConsumer {
    * @method
    */
   reset() {
-    if (!ZERO_PAGINATION) {
-      console.error('ZERO_PAGINATION', ZERO_PAGINATION)
-    }
     var {
       limit = ZERO_PAGINATION.limit,
       page = ZERO_PAGINATION.page,
       total = ZERO_PAGINATION.total,
       records = []
-    } = this.data
+    } = this.data || ZERO_PAGINATION
 
     /* 원본 데이타를 남기고, 복사본(_data)을 사용한다. */
     records = records.map((record, idx) => {

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

@@ -1,14 +1,14 @@
 import '@material/mwc-icon'
 import './record-partial'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
+import { css, html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
-import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'
+import { DataManipulator } from '../data-manipulator'
+import { GristRecord } from '../types'
 
 @customElement('ox-list')
-export class DataList extends LitElement {
+export class DataList extends DataManipulator {
   static styles = [
     css`
       :host {
@@ -42,8 +42,6 @@ export class DataList extends LitElement {
     `
   ]
 
-  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
-  @property({ type: Object }) data: GristData = ZERO_DATA
   @property({ type: Boolean }) isTop: boolean = false
   @property({ type: Array }) private _records: GristRecord[] = []
 
@@ -71,156 +69,6 @@ export class DataList extends LitElement {
 
       this.isTop = this.scrollTop == 0
     })
-
-    this.addEventListener('select-record-change', e => {
-      var {
-        records: selectedRecords,
-        added = [],
-        removed = []
-      } = (e as CustomEvent).detail as {
-        records: GristRecord[]
-        added: GristRecord[]
-        removed: GristRecord[]
-      }
-      var { records } = this.data || {}
-      var { selectable = false } = this.config.rows || {}
-
-      if (!records || !selectable) {
-        return
-      } else if (selectable && !selectable.multiple) {
-        records.forEach(record => (record['__selected__'] = false))
-      }
-
-      if (selectedRecords) {
-        records.forEach(record => (record['__selected__'] = false))
-        selectedRecords.forEach(record => (record['__selected__'] = true))
-      } else {
-        removed.forEach(record => (record['__selected__'] = false))
-        added.forEach(record => (record['__selected__'] = true))
-      }
-
-      this.requestUpdate()
-    })
-
-    /* field change processing */
-    this.addEventListener('field-change', e => {
-      var { after, before, column, record, row } = (e as CustomEvent).detail as {
-        after: any
-        before: any
-        column: ColumnConfig
-        record: GristRecord
-        row: number
-      }
-
-      /* compare changes */
-      if (after === before) {
-        return
-      }
-
-      var validation = column.validation
-      if (validation && typeof validation == 'function') {
-        if (!validation.call(this, after, before, record, column)) {
-          return
-        }
-      }
-
-      this.onRecordChanged({ [column.name]: after }, row, column)
-    })
-
-    /* record reset processing */
-    this.addEventListener('record-reset', e => {
-      var { record, row } = (e as CustomEvent).detail as {
-        record: GristRecord
-        row: number
-      }
-
-      this.onRecordChanged(record['__origin__'], row, null)
-    })
-  }
-
-  onRecordChanged(
-    recordData: GristRecord,
-    row: number,
-    column: ColumnConfig | null /* TODO column should be removed */
-  ) {
-    // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.
-
-    /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */
-    var records = this.data.records
-
-    var beforeRecord = records[row]
-    var afterRecord: GristRecord
-    var wantToDelete = false
-    var wantToAppend = false
-
-    if (!recordData) {
-      if (!beforeRecord) {
-        /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */
-        this.requestUpdate()
-        return
-      } else {
-        /*
-         * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,
-         * 삭제하고자 하는 의도로 이해된다. (주의 필요)
-         */
-        if (beforeRecord['__dirty__'] == '+') {
-          wantToDelete = true
-        } else {
-          afterRecord = {
-            ...beforeRecord,
-            __dirty__: '-'
-          }
-        }
-      }
-    } else {
-      if (!beforeRecord) {
-        /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */
-        afterRecord = {
-          ...recordData,
-          __dirty__: '+'
-        }
-
-        wantToAppend = true
-      } else {
-        let beforeDirty = beforeRecord['__dirty__']
-        if (beforeDirty == '+') {
-          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */
-          afterRecord = {
-            ...beforeRecord,
-            ...recordData,
-            __dirty__: '+'
-          }
-        } else {
-          /* 기존에 레코드가 있었으며 계속 수정중이다. */
-          afterRecord = {
-            ...beforeRecord,
-            ...recordData,
-            __dirty__: 'M'
-          }
-        }
-      }
-    }
-
-    if (wantToAppend) {
-      records.push(afterRecord!)
-    } else if (wantToDelete) {
-      records.splice(row, 1)
-    } else {
-      records.splice(row, 1, afterRecord!)
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('record-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          before: beforeRecord,
-          after: afterRecord!,
-          column,
-          row
-        }
-      })
-    )
   }
 
   updated(changes: PropertyValues<this>) {

package/src/data-manipulator.ts

@@ -0,0 +1,201 @@
+import { LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import { ZERO_CONFIG, ZERO_DATA } from './configure/zero-config'
+import { ColumnConfig, GristConfig, GristData, GristRecord } from './types'
+
+export class DataManipulator extends LitElement {
+  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
+  @property({ type: Object }) data: GristData = ZERO_DATA
+
+  constructor() {
+    super()
+
+    this.addEventListener('select-record-change', e => {
+      var {
+        records: selectedRecords,
+        added = [],
+        removed = []
+      } = (e as CustomEvent).detail as {
+        records: GristRecord[]
+        added: GristRecord[]
+        removed: GristRecord[]
+      }
+
+      this.onSelectRecordChanged({
+        selectedRecords,
+        added,
+        removed
+      })
+    })
+
+    /* field change processing */
+    this.addEventListener('field-change', e => {
+      var { after, before, column, record, row } = (e as CustomEvent).detail as {
+        after: any
+        before: any
+        column: ColumnConfig
+        record: GristRecord
+        row: number
+      }
+
+      this.onFieldChange({ after, before, column, record, row })
+    })
+
+    /* record reset processing */
+    this.addEventListener('record-reset', e => {
+      var { record, row } = (e as CustomEvent).detail as {
+        record: GristRecord
+        row: number
+      }
+
+      this.onRecordChanged(record['__origin__'], row, null)
+    })
+  }
+
+  onFieldChange({
+    after,
+    before,
+    column,
+    record,
+    row
+  }: {
+    after: any
+    before: any
+    column: ColumnConfig
+    record: GristRecord
+    row: number
+  }) {
+    /* compare changes */
+    if (after === before) {
+      return
+    }
+
+    var validation = column.validation
+    if (validation && typeof validation == 'function') {
+      if (!validation.call(this, after, before, record, column)) {
+        return
+      }
+    }
+
+    this.onRecordChanged({ [column.name]: after }, row, column)
+  }
+
+  onSelectRecordChanged({
+    selectedRecords,
+    added = [],
+    removed = []
+  }: {
+    selectedRecords: GristRecord[]
+    added: GristRecord[]
+    removed: GristRecord[]
+  }) {
+    var { records } = this.data || {}
+    var { selectable = false } = this.config.rows || {}
+
+    if (!records || !selectable) {
+      return
+    }
+
+    if (selectable && !selectable.multiple) {
+      records.forEach(record => (record['__selected__'] = false))
+    }
+
+    if (selectedRecords) {
+      records.forEach(record => (record['__selected__'] = false))
+      selectedRecords.forEach(record => (record['__selected__'] = true))
+    } else {
+      removed.forEach(record => (record['__selected__'] = false))
+      added.forEach(record => (record['__selected__'] = true))
+    }
+
+    this.requestUpdate()
+  }
+
+  onRecordChanged(
+    recordData: GristRecord,
+    row: number,
+    column: ColumnConfig | null /* TODO column should be removed */
+  ) {
+    // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.
+
+    /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */
+    var records = this.data.records
+
+    var beforeRecord = records[row]
+    var afterRecord: GristRecord
+    var wantToDelete = false
+    var wantToAppend = false
+
+    if (!recordData) {
+      if (!beforeRecord) {
+        /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */
+        this.requestUpdate()
+        return
+      } else {
+        /*
+         * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,
+         * 삭제하고자 하는 의도로 이해된다. (주의 필요)
+         */
+        if (beforeRecord['__dirty__'] == '+') {
+          wantToDelete = true
+        } else {
+          afterRecord = {
+            ...beforeRecord,
+            __dirty__: '-'
+          }
+        }
+      }
+    } else {
+      if (!beforeRecord) {
+        /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */
+        afterRecord = {
+          ...recordData,
+          __dirty__: '+'
+        }
+
+        wantToAppend = true
+      } else {
+        let beforeDirty = beforeRecord['__dirty__']
+        if (beforeDirty == '+') {
+          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */
+          afterRecord = {
+            ...beforeRecord,
+            ...recordData,
+            __dirty__: '+'
+          }
+        } else {
+          /* 기존에 레코드가 있었으며 계속 수정중이다. */
+          afterRecord = {
+            ...beforeRecord,
+            ...recordData,
+            __dirty__: 'M'
+          }
+        }
+      }
+    }
+
+    if (wantToAppend) {
+      records.push(afterRecord!)
+    } else if (wantToDelete) {
+      records.splice(row, 1)
+    } else {
+      records.splice(row, 1, afterRecord!)
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('record-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          before: beforeRecord,
+          after: afterRecord!,
+          column,
+          row
+        }
+      })
+    )
+
+    this.requestUpdate()
+  }
+}

package/src/editors/registry.ts

@@ -1,3 +1,5 @@
+import { DataGridField } from '../data-grid/data-grid-field'
+import { ColumnConfig, FieldEditor, GristRecord } from '../types'
 import {
   CheckboxInput,
   ColorInput,
@@ -15,9 +17,6 @@ import {
   TimeInput,
   WeekInput
 } from './input-editors'
-import { ColumnConfig, FieldEditor, GristRecord } from '../types'
-
-import { DataGridField } from '../data-grid/data-grid-field'
 
 var EDITORS: { [name: string]: { new (): InputEditor } } = {
   string: TextInput,

package/src/gutters/gutter-button.ts

@@ -1,9 +1,9 @@
 import '@material/mwc-icon'
 
-import { FieldRenderer, HeaderRenderer } from '../types'
-
 import { html } from 'lit'
 
+import { FieldRenderer, HeaderRenderer } from '../types'
+
 export class GutterButton {
   static instance(config: any = {}) {
     var { icon = 'edit' } = config
@@ -27,6 +27,7 @@ export class GutterButton {
           } as HeaderRenderer
         },
         record: {
+          align: 'center',
           renderer: function (value, column, record, rowIndex, field) {
             return html` <mwc-icon style=${inlineRecordStyle}>${iconFn(record)}</mwc-icon> `
           } as FieldRenderer