@operato/data-grist 2.0.0-alpha.12 → 2.0.0-alpha.16

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

@@ -655,6 +655,9 @@ export class DataGridBody extends LitElement {
                 value = !!value && !!String(value).match(/true/i)
                 break
               case 'number':
+              case 'float':
+              case 'integer':
+              case 'progress':
                 value = parseToNumberOrNull(value)
                 break
               default:

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

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

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

@@ -1,6 +1,7 @@
 import { OxGristEditor } from './ox-grist-editor.js'
 import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { parseToNumberOrNull } from '@operato/utils'
 
 @customElement('ox-grist-editor-number')
 export class OxGristEditorNumber extends OxGristEditor {
@@ -9,9 +10,9 @@ export class OxGristEditorNumber extends OxGristEditor {
 
     switch (this.column.type) {
       case 'float':
-        return Number.parseFloat(value)
+        return Number.parseFloat(value) || 0
       case 'integer':
-        return Number.parseInt(value)
+        return Number.parseInt(value) || 0
       default:
         return Number(value)
     }

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

@@ -5,6 +5,7 @@ import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { DataGridField } from '../data-grid/data-grid-field'
 import { ColumnConfig, GristRecord } from '../types'
 import { getDefaultValue } from '../value-generator'
+import { parseToNumberOrNull } from '@operato/utils'
 
 const STYLE = css`
   :host {
@@ -123,7 +124,10 @@ export class OxGristEditor extends LitElement {
 
     // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
     const editorValue = this.field?.valueWithEdit ? this.field.valueWithEdit : this.formatForEditor(currentValue)
-    this.value = this._dirtyValue = this.field?.type === 'number' ? Number(editorValue) : editorValue
+    const fieldType = this.field?.type || 'string'
+    this.value = this._dirtyValue = ['number', 'float', 'integer', 'progress'].includes(fieldType)
+      ? parseToNumberOrNull(editorValue)
+      : editorValue
 
     requestAnimationFrame(() => {
       this.focus()

package/src/types.ts

@@ -627,6 +627,7 @@ export type ImexConfig = {
 export type RowsConfig = {
   accumulator?: boolean
   appendable: boolean
+  editable: boolean
   insertable: boolean
   selectable?: RowSelectableConfig
   groups: GroupConfig[]

package/stories/accumulator.stories.ts

@@ -106,6 +106,10 @@ const config = {
         align: 'right'
       },
       accumulator: 'avg',
+      // accumulator: {
+      //   type: 'avg',
+      //   tag: true
+      // },
       sortable: true,
       width: 130
     },
@@ -116,7 +120,10 @@ const config = {
       header: 'accval2',
       record: {
         editable: true,
-        align: 'right'
+        align: 'right',
+        renderer: (value: any, column: any, record: any) => {
+          return value && Intl.NumberFormat('en-US').format(value)
+        }
       },
       accumulator: {
         type: 'sum',
@@ -163,9 +170,6 @@ const config = {
     {
       name: 'name',
       desc: true
-    },
-    {
-      name: 'email'
     }
   ],
   pagination: {

package/stories/dynamic-editable.stories.ts

@@ -24,6 +24,7 @@ const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }
           name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
           description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
           number: idx,
+          float: 1.3,
           date: '2023-09-20',
           routing: {
             id: '006dc64d-4fb9-4afc-a9ea-962bd1b9e110',
@@ -117,6 +118,15 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         },
         width: 80
       },
+      {
+        type: 'float',
+        name: 'float',
+        header: 'float',
+        record: {
+          editable: true
+        },
+        width: 80
+      },
       {
         type: 'date',
         name: 'date',

package/themes/grist-theme.css

@@ -41,7 +41,7 @@ body {
 
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: #f9f7f5;
-  --grid-record-padding: 0 0 0 var(--padding-default);
+  --grid-record-padding: 0 5px 0 5px;
   --grid-record-color: var(--secondary-color);
   --grid-record-color-hover: var(--primary-color);
   --grid-record-wide-fontsize: var(--fontsize-small);