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

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.3",
+  "version": "2.0.0-alpha.30",
   "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.3",
-    "@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",
+    "@operato/headroom": "^2.0.0-alpha.28",
+    "@operato/input": "^2.0.0-alpha.30",
+    "@operato/popup": "^2.0.0-alpha.28",
+    "@operato/pull-to-refresh": "^2.0.0-alpha.28",
+    "@operato/styles": "^2.0.0-alpha.28",
+    "@operato/time-calculator": "^2.0.0-alpha.23",
+    "@operato/utils": "^2.0.0-alpha.28",
     "i18next": "^21.5.4",
     "json5": "^2.2.0",
     "lit": "^2.5.0",
     "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": "9943c2c54a27be3619920543344c699d3a9a55de"
+  "gitHead": "cbe840ad27dd2a27f0909ba32238c4b5b9ca000b"
 }

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

@@ -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-header.ts

@@ -267,26 +267,26 @@ export class DataGridHeader extends LitElement {
     `
   }
 
-  updated(changes: PropertyValues) {
-    if (changes.has('data')) {
-      const fixedHeaders = Array.from(this.renderRoot.querySelectorAll('div[fixed]')) as HTMLElement[]
-      const fixedLefts = [] as number[]
-      var left = 0
-      fixedHeaders.forEach((header: HTMLElement) => {
-        header.style.left = left + 'px'
-        fixedLefts.push(left)
-
-        const width = header.offsetWidth
-        left += width
-      })
+  notifyFixedLeftChange() {
+    const fixedHeaders = Array.from(this.renderRoot.querySelectorAll('div[fixed]')) as HTMLElement[]
+    const fixedLefts = [] as number[]
+    var left = 0
+    fixedHeaders.forEach((header: HTMLElement) => {
+      header.style.left = left + 'px'
+      fixedLefts.push(left)
+
+      const width = header.offsetWidth
+      left += width
+    })
 
-      this.dispatchEvent(
-        new CustomEvent('fixed-lefts-change', {
-          detail: fixedLefts
-        })
-      )
-    }
+    this.dispatchEvent(
+      new CustomEvent('fixed-lefts-change', {
+        detail: fixedLefts
+      })
+    )
+  }
 
+  updated(changes: PropertyValues) {
     if (changes.has('columns')) {
       this.row2 = this.columns.reduce((row2, column, index) => {
         if (column.hidden || !column.header?.group) {
@@ -340,6 +340,8 @@ export class DataGridHeader extends LitElement {
 
         return row1
       }, [] as any[])
+
+      requestAnimationFrame(this.notifyFixedLeftChange.bind(this))
     }
   }
 
@@ -512,6 +514,8 @@ export class DataGridHeader extends LitElement {
           })
         )
 
+        this.notifyFixedLeftChange()
+
         this._lastAccVal = 0
       }, 100)
     }