@operato/data-grist 1.13.2 → 2.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "1.13.2",
+  "version": "2.0.0-alpha.2",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -56,12 +56,12 @@
   },
   "dependencies": {
     "@material/mwc-icon": "^0.27.0",
-    "@operato/headroom": "^1.4.64",
-    "@operato/input": "^1.12.7",
-    "@operato/popup": "^1.12.7",
-    "@operato/pull-to-refresh": "^1.4.64",
-    "@operato/styles": "^1.12.3",
-    "@operato/utils": "^1.12.7",
+    "@operato/headroom": "^2.0.0-alpha.0",
+    "@operato/input": "^2.0.0-alpha.2",
+    "@operato/popup": "^2.0.0-alpha.2",
+    "@operato/pull-to-refresh": "^2.0.0-alpha.0",
+    "@operato/styles": "^2.0.0-alpha.0",
+    "@operato/utils": "^2.0.0-alpha.0",
     "i18next": "^21.5.4",
     "json5": "^2.2.0",
     "lit": "^2.5.0",
@@ -100,5 +100,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "dc07eae72667c595a84c2c08c3ea9e6f3b0e2ee6"
+  "gitHead": "b940cc5dd44c22458ec03189e6bc8dae7f04f32e"
 }

package/src/configure/column-builder.ts

@@ -100,12 +100,13 @@ export const buildColumn = (column: any): ColumnConfig => {
   }
 
   /* handler */
-  var { click, dblclick, focus } = handlers || {}
+  var { click, dblclick, focus, contextmenu } = handlers || {}
 
   compiled.handlers = {
     click: click && getGristEventHandler(click),
     dblclick: dblclick && getGristEventHandler(dblclick),
-    focus: focus && getGristEventHandler(focus)
+    focus: focus && getGristEventHandler(focus),
+    contextmenu: contextmenu && getGristEventHandler(contextmenu)
   }
 
   return compiled

package/src/configure/zero-config.ts

@@ -18,7 +18,9 @@ export const ZERO_FIELD_RENDERER: FieldRenderer = (value, column, record, rowInd
 
 export const ZERO_EVENTHANDLERSET: GristEventHandlerSet = {
   click: undefined,
-  dblclick: undefined
+  dblclick: undefined,
+  focus: undefined,
+  contextmenu: undefined
 }
 export const ZERO_COLUMNS: ColumnConfig[] = []
 export const ZERO_GROUPS: GroupConfig[] = []

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

@@ -58,6 +58,7 @@ export class DataGridAccumField extends LitElement {
   @property({ type: Boolean }) editing = false
   @property({ type: Object }) value = {}
   @property({ attribute: false }) emphasized: any = false
+  @property({ type: String }) fixed?: string
 
   render(): TemplateResult {
     if (!this.column || !this.column.accumulator) {
@@ -90,5 +91,11 @@ export class DataGridAccumField extends LitElement {
         this.style.setProperty('--data-grid-field-text-align', align)
       }
     }
+
+    if (changes.has('fixed')) {
+      if (this.fixed) {
+        this.style.left = this.fixed + 'px'
+      }
+    }
   }
 }

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

@@ -18,6 +18,7 @@ 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 { dataGridBodyFocusChangeHandler } from './event-handlers/data-grid-body-focus-change-handler'
+import { dataGridBodyContextMenuHandler } from './event-handlers/data-grid-body-contextmenu-handler'
 import { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'
 import { accumulate } from '../accumulator/accumulator'
 
@@ -75,7 +76,7 @@ export class DataGridBody extends LitElement {
       [fixed] {
         position: sticky;
         background-color: var(--grid-record-background-color);
-        z-index: 1; /* 고정된 열을 다른 열 위에 표시. */
+        z-index: 2; /* 고정된 열을 다른 열 위에 표시. */
       }
 
       :host([raised]) [fixed] {
@@ -88,6 +89,10 @@ export class DataGridBody extends LitElement {
         bottom: 0;
         z-index: 1;
       }
+
+      ox-grid-accum-field[fixed] {
+        background-color: var(--grid-accum-record-background-color, #ccc);
+      }
     `
   ]
 
@@ -208,6 +213,7 @@ export class DataGridBody extends LitElement {
                   .column=${column}
                   .record=${accumRecord!}
                   .value=${accumRecord[column.name]}
+                  fixed=${ifDefined(this.fixedLefts[idxColumn])}
                 ></ox-grid-accum-field>
               `
             )}
@@ -261,6 +267,27 @@ export class DataGridBody extends LitElement {
       this.setSelectBlock(start, end)
     })
 
+    this.renderRoot.addEventListener('contextmenu', (event: Event) => {
+      const e = event as MouseEvent
+      this.setSelectBlock()
+
+      this._draggable = false
+
+      var target = (e.target as Element).closest('ox-grid-field') as DataGridField
+      var { rowIndex, columnIndex } = target || {}
+
+      this.dispatchEvent(
+        new CustomEvent('focus-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            row: rowIndex,
+            column: columnIndex
+          }
+        })
+      )
+    })
+
     this.renderRoot.addEventListener('mousedown', (event: Event) => {
       const e = event as MouseEvent
       this.setSelectBlock()
@@ -285,7 +312,7 @@ export class DataGridBody extends LitElement {
         })
       )
 
-      if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
+      if (columnIndex >= 0 && target.editableOnClick && !isNaN(rowIndex) && !isNaN(columnIndex)) {
         this.startEditTarget(rowIndex, columnIndex)
       }
     })
@@ -318,6 +345,7 @@ export class DataGridBody extends LitElement {
 
     this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this))
     this.renderRoot.addEventListener('dblclick', dataGridBodyDblclickHandler.bind(this))
+    this.renderRoot.addEventListener('contextmenu', dataGridBodyContextMenuHandler.bind(this))
 
     this.addEventListener('focus-change', dataGridBodyFocusChangeHandler.bind(this))
 

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

@@ -173,4 +173,10 @@ export class DataGridField extends LitElement {
       this.removeAttribute('emphasized-row')
     }
   }
+
+  get editableOnClick() {
+    const renderer = this.renderRoot.firstElementChild as HTMLElement
+    //@ts-ignore
+    return renderer && 'editableOnClick' in renderer ? renderer.editableOnClick : true
+  }
 }

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

@@ -56,10 +56,10 @@ export function dataGridBodyClickHandler(this: DataGridBody, e: Event): void {
   /* do column click handler */
   if (column) {
     var { click } = column.handlers
-    click && click(this.columns, this.data, column, record, rowIndex, target)
+    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)
+  rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target, e)
 }

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

@@ -0,0 +1,32 @@
+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

@@ -33,10 +33,10 @@ export async function dataGridBodyDblclickHandler(this: DataGridBody, e: Event):
   /* do column dblclick handler */
   if (column) {
     var { dblclick } = column.handlers
-    dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)
+    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)
+  rowsDblclick && rowsDblclick(this.columns, this.data, column, record, rowIndex, target, e)
 }

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

@@ -15,10 +15,10 @@ export async function dataGridBodyFocusChangeHandler(this: DataGridBody, e: Even
   /* do column focus handler */
   if (column) {
     var { focus } = column.handlers
-    focus && focus(this.columns, this.data, column, record, rowIndex, target)
+    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)
+  rowsFocus && rowsFocus(this.columns, this.data, column, record, rowIndex, target, e)
 }

package/src/data-manipulator.ts

@@ -15,8 +15,8 @@ import {
 export class DataManipulator extends LitElement {
   @property({ type: Object }) config: GristConfig = ZERO_CONFIG
   @property({ type: Object }) data: GristData = ZERO_DATA
-  @property({ type: Object }) sorters: SortersConfig = []
-  @property({ type: Object }) filters: FilterValue[] = []
+  @property({ type: Array }) sorters: SortersConfig = []
+  @property({ type: Array }) filters: FilterValue[] = []
   @property({ type: Object }) pagination: PaginationConfig = {}
 
   constructor() {
@@ -64,6 +64,8 @@ export class DataManipulator extends LitElement {
     })
 
     /* tree processing */
+    this.addEventListener('collapse-all', (e: Event) => this.onCollapseAll(e as CustomEvent))
+    this.addEventListener('expand-all', (e: Event) => this.onExpandAll(e as CustomEvent))
     this.addEventListener('collapsed', (e: Event) => this.onCollapsed(e as CustomEvent))
     this.addEventListener('expanded', (e: Event) => this.onExpanded(e as CustomEvent))
     this.addEventListener('check-in-tree', (e: Event) => this.onCheckInTree(e as CustomEvent))
@@ -213,6 +215,14 @@ export class DataManipulator extends LitElement {
     this.requestUpdate()
   }
 
+  onCollapseAll(e: CustomEvent) {
+    this.refresh(false)
+  }
+
+  onExpandAll(e: CustomEvent) {
+    this.refresh(true)
+  }
+
   onCollapsed(e: CustomEvent) {
     const record = e.detail
     record.__expanded__ = false
@@ -228,8 +238,6 @@ export class DataManipulator extends LitElement {
   }
 
   onCheckInTree(e: CustomEvent) {
-    const self = this
-
     function walkTreeCheckedUpdate(record: GristRecord, checked: 'checked' | 'unchecked') {
       const children = record.__children__
 
@@ -287,7 +295,7 @@ export class DataManipulator extends LitElement {
    * Therefore, it will be deprecated.
    * @method
    */
-  refresh() {
+  refresh(forceExpandOrCollapse?: boolean) {
     /*
     - TODO 여기에서 TREE 형태 데이터의 접고, 펴는 것을 재구성한다.
     - 동적으로 서브항목을 fetch 하는 기능은 제공하지 않는다.
@@ -302,15 +310,24 @@ export class DataManipulator extends LitElement {
     ) /* __depth__ 가 설정되지 않았거나, 0 인 경우만 수집 */
     this.data = {
       ...this.data,
-      records: ([] as GristRecord[]).concat(...toplevelRecords.map(record => this.traverseRefresh(record)))
+      records: ([] as GristRecord[]).concat(
+        ...toplevelRecords.map(record => this.traverseRefresh(record, forceExpandOrCollapse))
+      )
     }
   }
 
-  private traverseRefresh(record: GristRecord): GristRecord[] {
+  private traverseRefresh(record: GristRecord, forceExpandOrCollapse?: boolean): GristRecord[] {
+    if (forceExpandOrCollapse !== undefined) {
+      record = {
+        ...record,
+        __expanded__: forceExpandOrCollapse
+      }
+    }
+
     const { __expanded__, __children__ = [] } = record
 
     if (__expanded__ && __children__.length > 0) {
-      return [record].concat(...__children__.map(child => this.traverseRefresh(child)))
+      return [record].concat(...__children__.map(child => this.traverseRefresh(child, forceExpandOrCollapse)))
     } else {
       return [record]
     }

package/src/editors/ox-grist-editor-tree.ts

@@ -0,0 +1,27 @@
+import './ox-input-tree'
+
+import { html, css } from 'lit'
+import { customElement, query } from 'lit/decorators.js'
+
+import { OxGristEditor } from './ox-grist-editor.js'
+
+@customElement('ox-grist-editor-tree')
+export class OxGristEditorTree extends OxGristEditor {
+  static styles = [
+    css`
+      :host {
+        flex: 1;
+      }
+
+      ox-input-tree {
+        flex: 1;
+      }
+    `
+  ]
+
+  get editorTemplate() {
+    var { selectable } = this.column.record.options || {}
+
+    return html`<ox-input-tree .value=${this.value} .record=${this.record} ?selectable=${selectable}></ox-input-tree>`
+  }
+}

package/src/editors/ox-grist-editor.ts

@@ -91,6 +91,10 @@ export class OxGristEditor extends LitElement {
     return this.renderRoot.firstElementChild as HTMLElement
   }
 
+  get directEditable() {
+    return true
+  }
+
   async firstUpdated() {
     this.renderRoot.addEventListener('change', this._onchange.bind(this))
     this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))

package/src/editors/ox-input-tree.ts

@@ -0,0 +1,226 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { PropertyValues, css, html, nothing } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { OxFormField } from '@operato/input'
+import { GristRecord } from '../types'
+
+@customElement('ox-input-tree')
+export class OxInputTree extends OxFormField {
+  static styles = css`
+    :host {
+      overflow: hidden;
+    }
+
+    div[wrap] {
+      flex: 1;
+
+      position: relative;
+
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      padding-left: calc(var(--tree-depth, 0) * 18px);
+    }
+
+    span[expander] {
+      display: inline-block;
+      vertical-align: middle;
+      width: 12px;
+      height: 20px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    span[expander][collapsed]::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-25%, -50%) rotate(-90deg);
+      content: ' ';
+      border: 5px solid transparent;
+      border-top: 5px solid var(--primary-color, #1890ff);
+    }
+
+    span[expander][expanded]::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -25%);
+      content: ' ';
+      border: 5px solid transparent;
+      border-top: 5px solid var(--primary-color, #1890ff);
+    }
+
+    span[checkbox] {
+      display: inline-block;
+      vertical-align: middle;
+      width: 12px;
+      height: 20px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    span[checkbox]::before {
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: ' ';
+      display: block;
+      width: 10px;
+      height: 10px;
+      border: 1px solid var(--primary-color, #1890ff);
+      border-radius: 2px;
+    }
+
+    span[checkbox][checked='checked']::before {
+      background-color: var(--primary-color, #1890ff);
+      border-color: var(--primary-color, #1890ff);
+    }
+
+    span[checkbox][checked='checked']::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      top: 50%;
+      left: 50%;
+      width: 3px;
+      height: 7px;
+      border: 2px solid #fff;
+      border-top: none;
+      border-left: none;
+      -webkit-transform: translate(-50%, -50%) rotate(45deg);
+      -ms-transform: translate(-50%, -50%) rotate(45deg);
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    span[checkbox][checked='half-checked']::before {
+      background-color: var(--primary-color, #1890ff);
+      border-color: var(--primary-color, #1890ff);
+    }
+
+    span[checkbox][checked='half-checked']::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 10px;
+      height: 2px;
+      background-color: #fff;
+    }
+
+    span[label] {
+      flex: 1;
+    }
+
+    input {
+      width: 100%;
+      height: 100%;
+      border: 0;
+      background-color: transparent;
+      box-sizing: border-box;
+    }
+
+    input:focus {
+      outline: none;
+    }
+  `
+
+  @property({ type: Object }) record!: GristRecord
+  @property({ type: Boolean }) selectable?: boolean
+
+  @state() private checked?: 'checked' | 'half-checked' | 'unchecked'
+  @state() private expanded?: boolean = false
+
+  @query('input') input!: HTMLInputElement
+
+  render() {
+    var { __children__ } = this.record
+
+    const expandable = __children__ && __children__.length > 0
+
+    return html`
+      <div wrap>
+        ${expandable
+          ? html`
+              <span
+                expander
+                @click=${this.onClickExpander.bind(this)}
+                ?expanded=${this.expanded}
+                ?collapsed=${!this.expanded}
+              ></span>
+            `
+          : html`<span expander></span>`}
+        ${this.selectable
+          ? html` <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>`
+          : nothing}
+
+        <span label
+          ><input
+            value=${ifDefined(this.value)}
+            @change=${(e: Event) => {
+              e.stopPropagation()
+              this.value = (e.target as HTMLInputElement).value
+              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+            }}
+            focus
+        /></span>
+
+        <!-- <span label>${this.value}</span> -->
+      </div>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    var { __depth__, __check_in_tree__, __expanded__ } = this.record
+    this.checked = __check_in_tree__
+    this.expanded = __expanded__
+
+    this.style.setProperty('--tree-depth', String(__depth__))
+  }
+
+  focus() {
+    this.input.focus()
+  }
+
+  select() {
+    this.input.select()
+  }
+
+  onClickCheckbox(e: MouseEvent) {
+    e.stopPropagation()
+
+    this.dispatchEvent(
+      new CustomEvent('check-in-tree', {
+        bubbles: true,
+        composed: true,
+        detail: this.record
+      })
+    )
+
+    this.requestUpdate()
+  }
+
+  onClickExpander(e: MouseEvent) {
+    e.stopPropagation()
+
+    this.dispatchEvent(
+      new CustomEvent(this.record.__expanded__ ? 'collapsed' : 'expanded', {
+        bubbles: true,
+        composed: true,
+        detail: this.record
+      })
+    )
+
+    this.requestUpdate()
+  }
+}

package/src/editors/registry.ts

@@ -17,6 +17,7 @@ import { OxGristEditorTel } from './ox-grist-editor-tel'
 import { OxGristEditorText } from './ox-grist-editor-text'
 import { OxGristEditorTextarea } from './ox-grist-editor-textarea'
 import { OxGristEditorTime } from './ox-grist-editor-time'
+import { OxGristEditorTree } from './ox-grist-editor-tree'
 import { OxGristEditorWeek } from './ox-grist-editor-week'
 
 var EDITORS: { [name: string]: { new (): OxGristEditor } } = {
@@ -42,7 +43,8 @@ var EDITORS: { [name: string]: { new (): OxGristEditor } } = {
   link: OxGristEditorText,
   image: OxGristEditorImage,
   file: OxGristEditorFile,
-  'string[]': OxGristEditorMultipleSelect
+  'string[]': OxGristEditorMultipleSelect,
+  tree: OxGristEditorTree
 }
 
 export function registerEditor(type: string, editor: { new (): OxGristEditor }) {