@operato/data-grist 2.0.0-alpha.0 → 2.0.0-alpha.3

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__ ? 'collapse-node' : 'expand-node', {
+        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 }) {

package/src/filters/filters-form.ts

@@ -151,7 +151,7 @@ export class FiltersForm extends LitElement {
                 filterLabel !== undefined
                   ? filterLabel
                   : typeof label === 'object' && label.renderer
-                  ? label.renderer()
+                  ? label.renderer(column)
                   : header.renderer(column) || name
 
               const idx = operator === 'between' ? 1 : 0

package/src/handlers/contextmenu-tree-mutation.ts

@@ -0,0 +1,98 @@
+import { html } from 'lit'
+import { OxPopupMenu } from '@operato/popup'
+
+import { DataGridField } from '../data-grid/data-grid-field'
+import { ColumnConfig, GristData, GristRecord } from '../types'
+
+function dispatchEvent(field: DataGridField, event: string) {
+  field.dispatchEvent(
+    new CustomEvent(event, {
+      bubbles: true,
+      composed: true,
+      detail: field
+    })
+  )
+}
+
+/*
+ * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
+ * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
+ */
+export const ContextMenuTreeMutation = function (
+  columns: ColumnConfig[],
+  data: GristData,
+  column: ColumnConfig,
+  record: GristRecord,
+  rowIndex: number,
+  field: DataGridField,
+  event: Event
+): void {
+  const e = event as PointerEvent
+  if (!('pageX' in e && 'pageY' in e)) {
+    return
+  }
+
+  e.preventDefault()
+
+  OxPopupMenu.open({
+    template: html`
+      <ox-popup-menuitem
+        label="add sibling node"
+        @click=${() => {
+          dispatchEvent(field, 'add-sibling-node')
+        }}
+      >
+        <mwc-icon slot="icon">add</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="add child node"
+        @click=${() => {
+          dispatchEvent(field, 'add-child-node')
+        }}
+      >
+        <mwc-icon slot="icon">playlist_add</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="move up"
+        @click=${() => {
+          dispatchEvent(field, 'move-up')
+        }}
+      >
+        <mwc-icon slot="icon">arrow_upward</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="move down"
+        @click=${() => {
+          dispatchEvent(field, 'move-down')
+        }}
+      >
+        <mwc-icon slot="icon">arrow_downward</mwc-icon>
+      </ox-popup-menuitem>
+
+      <div separator></div>
+
+      <ox-popup-menuitem
+        label="collapse all"
+        @click=${() => {
+          dispatchEvent(field, 'collapse-all')
+        }}
+      >
+        <mwc-icon slot="icon">unfold_less</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="expand all"
+        @click=${() => {
+          dispatchEvent(field, 'expand-all')
+        }}
+      >
+        <mwc-icon slot="icon">unfold_more</mwc-icon>
+      </ox-popup-menuitem>
+    `,
+    top: e.pageY,
+    left: e.pageX
+  })
+}

package/src/handlers/registry.ts

@@ -1,4 +1,5 @@
 import { GristEventHandler } from '../types'
+import { ContextMenuTreeMutation } from './contextmenu-tree-mutation'
 import { MoveDown } from './move-down'
 import { MoveUp } from './move-up'
 import { RecordCopy } from './record-copy'
@@ -16,7 +17,8 @@ var HANDLERS: {
   'move-up': MoveUp as GristEventHandler,
   'move-down': MoveDown as GristEventHandler,
   'record-copy': RecordCopy as GristEventHandler,
-  'record-delete': RecordDelete as GristEventHandler
+  'record-delete': RecordDelete as GristEventHandler,
+  'contextmenu-tree-mutation': ContextMenuTreeMutation as GristEventHandler
 }
 
 export function registerGristEventHandler(type: string, handler: GristEventHandler) {

package/src/renderers/ox-grist-renderer-tree.ts

@@ -74,8 +74,8 @@ export class OxGristRendererTree extends OxGristRenderer {
       border-radius: 2px;
     }
 
-    span[label][selected] {
-      background-color: var(--primary-color, #1890ff);
+    span[label] {
+      flex: 1;
     }
 
     span[checkbox][checked='checked']::before {
@@ -173,7 +173,7 @@ export class OxGristRendererTree extends OxGristRenderer {
     e.stopPropagation()
 
     this.dispatchEvent(
-      new CustomEvent(this.record.__expanded__ ? 'collapsed' : 'expanded', {
+      new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {
         bubbles: true,
         composed: true,
         detail: this.record
@@ -182,4 +182,8 @@ export class OxGristRendererTree extends OxGristRenderer {
 
     this.requestUpdate()
   }
+
+  get editableOnClick() {
+    return false
+  }
 }