@operato/data-grist 2.0.0-alpha.6 → 2.0.0-alpha.61

package/docs/default-value/default-value.md

@@ -46,7 +46,7 @@ const gristConfig = {
       defaultValue: {
         name: 'getRelativeDate',
         params: [{
-          relativeDate: -1 // yesterday
+          relativeDays: -1 // yesterday
         }]
       }
     }

package/docs/default-value/value-generator/date-generator.md

@@ -12,7 +12,7 @@ function getRelativeDate(params: RelativeDateParams = {}): Date | number | strin
 
 이 함수는 `RelativeDateParams`라는 이름의 타입의 매개변수 객체를 받습니다. 이 객체의 필드에 대한 상세한 정보는 다음과 같습니다:
 
-- `relativeDate?: number`: 상대적인 날짜를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 날짜를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -29,7 +29,7 @@ function getRelativeDate(params: RelativeDateParams = {}): Date | number | strin
 
 ```typescript
 const relativeDate = getRelativeDate({
-  relativeDate: 1,
+  relativeDays: 1,
   timeZone: 'Asia/Seoul',
   format: 'date'
 })

package/docs/default-value/value-generator/month-date-generator.md

@@ -14,7 +14,7 @@ function getRelativeMonthDate(params: RelativeMonthDateParams = {}): string | nu
 
 - `relativeMonths?: number`: 상대적인 월을 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 월 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3개월 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 월을 의미합니다.
 
-- `relativeDates?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -32,7 +32,7 @@ function getRelativeMonthDate(params: RelativeMonthDateParams = {}): string | nu
 ```typescript
 const relativeMonthDate = getRelativeMonthDate({
   relativeMonths: 2,
-  relativeDates: 3,
+  relativeDays: 3,
   timeZone: 'Asia/Seoul',
   format: 'date'
 })

package/docs/default-value/value-generator/week-date-generator.md

@@ -14,7 +14,7 @@ function getRelativeWeekDate(params: RelativeWeekDateParams = {}): string | numb
 
 - `relativeWeeks?: number`: 상대적인 주를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 주 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3주 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 주를 의미합니다.
 
-- `relativeDates?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -32,7 +32,7 @@ function getRelativeWeekDate(params: RelativeWeekDateParams = {}): string | numb
 ```typescript
 const relativeWeekDate = getRelativeWeekDate({
   relativeWeeks: 2,
-  relativeDates: 3,
+  relativeDays: 3,
   timeZone: 'Asia/Seoul',
   format: 'date'
 })

package/docs/default-value/value-generator/year-date-generator.md

@@ -14,7 +14,7 @@ function getRelativeYearDate(params: RelativeYearDateParams = {}): string | numb
 
 - `relativeYears?: number`: 상대적인 연도를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 연도 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3년 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 연도를 의미합니다.
 
-- `relativeDates?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -32,7 +32,7 @@ function getRelativeYearDate(params: RelativeYearDateParams = {}): string | numb
 ```typescript
 const relativeYearDate = getRelativeYearDate({
   relativeYears: 2,
-  relativeDates: 3,
+  relativeDays: 3,
   timeZone: 'Asia/Seoul',
   format: 'date'
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.61",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -56,34 +56,35 @@
   },
   "dependencies": {
     "@material/mwc-icon": "^0.27.0",
-    "@operato/headroom": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.4",
-    "@operato/popup": "^2.0.0-alpha.4",
-    "@operato/pull-to-refresh": "^2.0.0-alpha.0",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.0",
+    "@operato/headroom": "^2.0.0-alpha.57",
+    "@operato/input": "^2.0.0-alpha.59",
+    "@operato/popup": "^2.0.0-alpha.57",
+    "@operato/pull-to-refresh": "^2.0.0-alpha.57",
+    "@operato/styles": "^2.0.0-alpha.57",
+    "@operato/time-calculator": "^2.0.0-alpha.57",
+    "@operato/utils": "^2.0.0-alpha.57",
     "i18next": "^21.5.4",
     "json5": "^2.2.0",
-    "lit": "^2.5.0",
+    "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
     "@types/lodash-es": "^4.17.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -100,5 +101,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "9b56040758ce57f30663bf7e0934587087a1076b"
+  "gitHead": "6ba512f14bf258b7a2d81496af95d81e5247437f"
 }

package/src/accumulator/accumulator.ts

@@ -6,7 +6,7 @@ function sum(data: GristData, column: ColumnConfig): number {
   return data.records
     .filter(record => !Number.isNaN(record[name]))
     .reduce((sum, record) => {
-      return sum + Number(record[name])
+      return sum + Number(record[name] || 0)
     }, 0)
 }
 
@@ -16,7 +16,7 @@ function avg(data: GristData, column: ColumnConfig): number {
 
   return (
     effectiveRecords.reduce((sum, record) => {
-      return sum + Number(record[name])
+      return sum + Number(record[name] || 0)
     }, 0) / effectiveRecords.length
   )
 }
@@ -30,7 +30,7 @@ function min(data: GristData, column: ColumnConfig): number {
 
   return Math.min.apply(
     null,
-    data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name]))
+    data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name] || 0))
   )
 }
 
@@ -39,7 +39,7 @@ function max(data: GristData, column: ColumnConfig): number {
 
   return Math.max.apply(
     null,
-    data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name]))
+    data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name] || 0))
   )
 }
 

package/src/configure/rows-option-builder.ts

@@ -3,7 +3,16 @@ import { RowsConfig } from '../types'
 import { getGristEventHandler } from '../handlers'
 
 export const buildRowsOptions = (rows: any): RowsConfig => {
-  var { appendable = true, insertable = false, selectable, groups = [], totals = [], classifier, accumulator } = rows
+  var {
+    appendable = true,
+    editable = true,
+    insertable = false,
+    selectable,
+    groups = [],
+    totals = [],
+    classifier,
+    accumulator
+  } = rows
 
   /* handler */
   var { click, dblclick, focus } = rows.handlers || {}
@@ -14,6 +23,7 @@ export const buildRowsOptions = (rows: any): RowsConfig => {
   return {
     accumulator,
     appendable,
+    editable,
     insertable,
     selectable,
     groups,

package/src/configure/zero-config.ts

@@ -45,6 +45,7 @@ export const ZERO_COLUMN: ColumnConfig = {
 export const ZERO_ROWS: RowsConfig = {
   appendable: false,
   insertable: false,
+  editable: false,
   groups: ZERO_GROUPS,
   totals: ZERO_TOTALS,
   classifier: ZERO_CLASSIFIER,

package/src/data-card/event-handlers/record-card-click-handler.ts

@@ -29,6 +29,6 @@ export function recordCardClickHandler(this: RecordCard, e: MouseEvent): void {
     rowsClick(this.config.columns, this.data, column, this.record, rowIndex, target)
   } else {
     /* content 가 클릭된 경우 - 레코드뷰 팝업을 실행한다. */
-    this.popupRecordView()
+    this.config.rows.editable && this.popupRecordView()
   }
 }

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

@@ -70,11 +70,12 @@ export class DataGridAccumField extends LitElement {
 
     // tag가 true이면 value 앞에 (sum) 같은 태그 생성
     var { accumulator } = column
+    let tag = ''
     if (typeof accumulator === 'object' && typeof accumulator.type === 'string' && accumulator?.tag) {
-      value = `(${i18next.t(`label.accumulator_${accumulator.type}`)}) ${value}`
+      tag = `(${i18next.t(`label.accumulator_${accumulator.type}`)})`
     }
 
-    return html`${renderer?.call(this, value, column, record, rowIndex, this)}`
+    return html`${tag} ${renderer?.call(this, value, column, record, rowIndex, this)}`
   }
 
   updated(changes: PropertyValues<this>) {

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

@@ -100,7 +100,7 @@ export class DataGridBody extends LitElement {
   @property({ type: Array }) columns: ColumnConfig[] = []
   @property({ type: Object }) data: GristData = ZERO_DATA
   @property({ type: Object }) focused: { row: number; column: number } = ZERO_FOCUS
-  @property({ type: Object }) editTarget: { row: number; column: number; valueWithEdit: string | null } | null = null
+  @property({ type: Object }) editTarget: { row: number; column: number; valueWith: string | null } | null = null
   @property({ type: Number }) from = -1
   @property({ type: Number }) to = -1
   @property({ type: Array }) fixedLefts: number[] = []
@@ -135,7 +135,7 @@ export class DataGridBody extends LitElement {
   render() {
     // block이 선택되어 있으면, focused row/column은 표현하지 않는다.
     var { row: focusedRow, column: focusedColumn } = (!this._selectBlock && this.focused) || {}
-    var { row: editingRow, column: editingColumn, valueWithEdit = null } = this.editTarget || {}
+    var { row: editingRow, column: editingColumn, valueWith = null } = this.editTarget || {}
 
     var columns = this.columns.filter(column => !column.hidden)
     var data = this.data
@@ -182,7 +182,7 @@ export class DataGridBody extends LitElement {
                 ?selected-row=${attrSelected}
                 ?focused=${idxRow === focusedRow && idxColumn === focusedColumn}
                 ?editing=${idxRow === editingRow && idxColumn === editingColumn}
-                .valueWithEdit=${valueWithEdit}
+                .valueWith=${valueWith}
                 .value=${record[column.name]}
                 ?dirty=${!!dirtyFields[column.name]}
                 fixed=${ifDefined(this.fixedLefts[idxColumn])}
@@ -400,7 +400,7 @@ export class DataGridBody extends LitElement {
     }
   }
 
-  startEditTarget(row: number, column: number, valueWithEdit: string | null = null) {
+  startEditTarget(row: number, column: number, valueWith: string | null = null) {
     var { editable } = this.columns.filter(column => !column.hidden)[column].record
     if (typeof editable === 'function') {
       const curRow = this.data.records[row] || {}
@@ -419,7 +419,7 @@ export class DataGridBody extends LitElement {
     this.editTarget = {
       row,
       column,
-      valueWithEdit
+      valueWith
     }
   }
 
@@ -647,14 +647,19 @@ export class DataGridBody extends LitElement {
 
             switch (type) {
               case 'object':
+              case 'parameters':
                 try {
                   value = JSON.parse(value || 'null')
                 } catch (err) {}
                 break
               case 'boolean':
+              case 'checkbox':
                 value = !!value && !!String(value).match(/true/i)
                 break
               case 'number':
+              case 'float':
+              case 'integer':
+              case 'progress':
                 value = parseToNumberOrNull(value)
                 break
               default:

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

@@ -87,7 +87,7 @@ export class DataGridField extends LitElement {
   @property({ type: Number }) columnIndex = 0
   @property({ type: Boolean }) editing = false
   @property({ type: Object }) value = {}
-  @property({ type: String }) valueWithEdit: string | null = null
+  @property({ type: String }) valueWith: string | null = null
   @property({ attribute: false }) emphasized: any = false
   @property({ type: String }) fixed?: string
   @property({ type: String }) type?: string

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

@@ -287,10 +287,6 @@ export class DataGridHeader extends LitElement {
   }
 
   updated(changes: PropertyValues) {
-    if (changes.has('data')) {
-      requestAnimationFrame(this.notifyFixedLeftChange.bind(this))
-    }
-
     if (changes.has('columns')) {
       this.row2 = this.columns.reduce((row2, column, index) => {
         if (column.hidden || !column.header?.group) {
@@ -344,6 +340,8 @@ export class DataGridHeader extends LitElement {
 
         return row1
       }, [] as any[])
+
+      requestAnimationFrame(this.notifyFixedLeftChange.bind(this))
     }
   }
 
@@ -406,57 +404,57 @@ export class DataGridHeader extends LitElement {
       ${!renderer
         ? html``
         : type !== 'select'
-        ? html` <ox-popup
-            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>
-            ${renderer(column, value, this)}</ox-popup
-          >`
-        : filter!.operator === 'in'
-        ? html`<ox-popup-list
-            multiple
-            attr-selected="checked"
-            .value=${value}
-            with-search
-            @select=${(e: CustomEvent) =>
-              e.target?.dispatchEvent(
-                new CustomEvent('filter-change', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    name,
-                    operator: filter!.operator,
-                    value: !e.detail
-                      ? undefined
-                      : e.detail instanceof Array && e.detail.length === 0
-                      ? undefined
-                      : e.detail
-                  }
-                })
-              )}
-            ><div filter-title slot="header">
-              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
-            </div>
-            ${renderer(column, value, this)}</ox-popup-list
-          >`
-        : html`<ox-popup-list
-            .value=${value}
-            with-search
-            @select=${(e: CustomEvent) =>
-              e.target?.dispatchEvent(
-                new CustomEvent('filter-change', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    name,
-                    operator: filter!.operator,
-                    value: e.detail ? e.detail : undefined
-                  }
-                })
-              )}
-            ><div filter-title slot="header">
-              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
-            </div>
-            ${renderer(column, value, this)}</ox-popup-list
-          >`}
+          ? html` <ox-popup
+              ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>
+              ${renderer(column, value, this)}</ox-popup
+            >`
+          : filter!.operator === 'in'
+            ? html`<ox-popup-list
+                multiple
+                attr-selected="checked"
+                .value=${value}
+                with-search
+                @select=${(e: CustomEvent) =>
+                  e.target?.dispatchEvent(
+                    new CustomEvent('filter-change', {
+                      bubbles: true,
+                      composed: true,
+                      detail: {
+                        name,
+                        operator: filter!.operator,
+                        value: !e.detail
+                          ? undefined
+                          : e.detail instanceof Array && e.detail.length === 0
+                            ? undefined
+                            : e.detail
+                      }
+                    })
+                  )}
+                ><div filter-title slot="header">
+                  <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
+                </div>
+                ${renderer(column, value, this)}</ox-popup-list
+              >`
+            : html`<ox-popup-list
+                .value=${value}
+                with-search
+                @select=${(e: CustomEvent) =>
+                  e.target?.dispatchEvent(
+                    new CustomEvent('filter-change', {
+                      bubbles: true,
+                      composed: true,
+                      detail: {
+                        name,
+                        operator: filter!.operator,
+                        value: e.detail ? e.detail : undefined
+                      }
+                    })
+                  )}
+                ><div filter-title slot="header">
+                  <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
+                </div>
+                ${renderer(column, value, this)}</ox-popup-list
+              >`}
     `
   }
 
@@ -473,7 +471,10 @@ export class DataGridHeader extends LitElement {
       if (sorter.desc) {
         sorters.splice(idx, 1)
       } else {
-        sorter.desc = true
+        sorters.splice(idx, 1, {
+          ...sorter,
+          desc: true
+        })
       }
     } else {
       var sorter = {

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

@@ -159,7 +159,7 @@ export class DataGrid extends DataManipulator {
 
       if (this.focused && 'row' in this.focused) {
         var { row = 0, column = 0 } = this.focused
-        var { records: oldrecords = [] } = changes.get('data')
+        var { records: oldrecords = [] } = changes.get('data') || {}
         var { records: newrecords } = this.data
 
         var oldrecord = oldrecords[row]
@@ -172,8 +172,8 @@ export class DataGrid extends DataManipulator {
               ('id' in oldrecord
                 ? record.id == oldrecord.id
                 : 'name' in oldrecord
-                ? record.name == oldrecord.name
-                : false)
+                  ? record.name == oldrecord.name
+                  : false)
           )
 
           this.focused = {