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

package/docs/gutter/gutter.md

@@ -0,0 +1,7 @@
+# Gutter
+
+"Gutter"는 테이블 형태에서 각 행의 왼쪽 또는 오른쪽에 위치한 추가적인 열(column)을 가리킵니다. 이 열은 주로 각 행(row)을 식별하거나 특정 작업을 수행하기 위한 버튼 또는 링크와 같은 요소를 표시하는 데 사용됩니다.
+
+Gutter 열은 주로 데이터 행에 대한 조작 또는 행의 상태를 나타내는 데 사용됩니다. 예를 들어, 테이블에서 각 행이 특정 작업을 수행하는 버튼을 포함할 때, 이러한 버튼이 Gutter 열에 배치될 수 있습니다. 또한 Gutter 열은 행을 선택하거나 행의 상태를 나타내는 체크박스를 포함할 수도 있습니다.
+
+Gutter 열의 구체적인 용도 및 디자인은 개발자 또는 디자이너에게 달려 있으며, 테이블 컴포넌트나 라이브러리에서 지원하는 기능에 따라 다를 수 있습니다. Gutter 열은 데이터 행을 더 유용하게 만들거나 조작할 수 있는 추가적인 공간을 제공하는 중요한 요소입니다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -57,7 +57,7 @@
   "dependencies": {
     "@material/mwc-icon": "^0.27.0",
     "@operato/headroom": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.2",
+    "@operato/input": "^2.0.0-alpha.3",
     "@operato/popup": "^2.0.0-alpha.2",
     "@operato/pull-to-refresh": "^2.0.0-alpha.0",
     "@operato/styles": "^2.0.0-alpha.0",
@@ -100,5 +100,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "b940cc5dd44c22458ec03189e6bc8dae7f04f32e"
+  "gitHead": "9943c2c54a27be3619920543344c699d3a9a55de"
 }

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

@@ -140,7 +140,6 @@ export class DataGridBody extends LitElement {
     var columns = this.columns.filter(column => !column.hidden)
     var data = this.data
     var { records } = data
-    records = records.filter(record => !record.__parent__ || !record.__parent__.collapsed)
     var { appendable, classifier, accumulator } = this.config.rows
     const { start, end } = this._selectBlock || {}
 

package/src/data-manipulator.ts

@@ -66,16 +66,13 @@ 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('collapse-node', (e: Event) => this.onCollapse(e as CustomEvent))
+    this.addEventListener('expand-node', (e: Event) => this.onExpand(e as CustomEvent))
     this.addEventListener('check-in-tree', (e: Event) => this.onCheckInTree(e as CustomEvent))
-  }
 
-  // updated(changes: PropertyValues<this>) {
-  //   if (changes.has('data')) {
-  //     this.refresh()
-  //   }
-  // }
+    this.addEventListener('add-sibling-node', (e: Event) => this.onAddSiblingNode(e as CustomEvent))
+    this.addEventListener('add-child-node', (e: Event) => this.onAddChildNode(e as CustomEvent))
+  }
 
   onFieldChange({
     after,
@@ -223,17 +220,89 @@ export class DataManipulator extends LitElement {
     this.refresh(true)
   }
 
-  onCollapsed(e: CustomEvent) {
-    const record = e.detail
+  onCollapse(e: CustomEvent) {
+    const record = e.detail as GristRecord
     record.__expanded__ = false
 
     this.refresh()
   }
 
-  onExpanded(e: CustomEvent) {
-    const record = e.detail
+  onExpand(e: CustomEvent) {
+    const record = e.detail as GristRecord
+    record.__expanded__ = true
+
+    this.refresh()
+  }
+
+  onAddSiblingNode(e: CustomEvent) {
+    const { records } = this.data
+    const toplevelRecords = records.filter(
+      record => !record.__depth__
+    ) /* __depth__ 가 설정되지 않았거나, 0 인 경우만 수집 */
+
+    const field = e.detail
+    const { record } = field
+    const { __depth__ } = record as GristRecord
+
+    function findParent(record: GristRecord, parent?: GristRecord): GristRecord | undefined {
+      var children = (parent ? parent.__children__ || [] : toplevelRecords) as GristRecord[]
+
+      if (children.find(child => child === record)) {
+        return parent
+      } else {
+        for (let child of children) {
+          const found = findParent(record, child)
+          if (found) {
+            return found
+          }
+        }
+      }
+    }
+
+    const parent = findParent(record)
+
+    const sibling = {
+      __depth__,
+      __dirty__: '+'
+    }
+
+    if (parent) {
+      const { __children__ } = parent as GristRecord
+
+      if (!__children__) {
+        parent.__children__ = [sibling]
+      } else {
+        parent.__children__ = [...__children__, sibling]
+      }
+
+      parent.__expanded__ = true
+    } else {
+      this.data.records = [...toplevelRecords, sibling]
+    }
+
+    this.refresh()
+  }
+
+  onAddChildNode(e: CustomEvent) {
+    const field = e.detail
+    const { record } = field
+
+    const { __children__, __depth__, __seq__ } = record as GristRecord
+    const child = {
+      __depth__: (__depth__ || 0) + 1,
+      __dirty__: '+'
+    }
+
+    if (!__children__) {
+      record.__children__ = [child]
+    } else {
+      record.__children__.push(child)
+    }
+
     record.__expanded__ = true
 
+    field.requestUpdate()
+
     this.refresh()
   }
 
@@ -256,7 +325,8 @@ export class DataManipulator extends LitElement {
 
       children.forEach(child => updateCheckedAll(child))
 
-      var checked: 'checked' | 'half-checked' | 'unchecked' | undefined
+      var checked: 'checked' | 'half-checked' | 'unchecked' | undefined =
+        record.__check_in_tree__ == 'checked' ? 'checked' : undefined
 
       children.forEach(child => {
         const { __check_in_tree__ } = child
@@ -264,7 +334,7 @@ export class DataManipulator extends LitElement {
         if (__check_in_tree__ == 'half-checked') {
           checked = 'half-checked'
         } else if (__check_in_tree__ == 'checked') {
-          checked = checked == 'checked' || !checked ? 'checked' : 'half-checked'
+          checked = checked == 'checked' ? 'checked' : 'half-checked'
         } else {
           checked = checked == 'unchecked' || !checked ? 'unchecked' : 'half-checked'
         }

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

@@ -214,7 +214,7 @@ export class OxInputTree extends OxFormField {
     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

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

@@ -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