@operato/data-grist 2.0.0-alpha.34 → 2.0.0-alpha.35

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/editors/ox-grist-editor-checkbox.ts

@@ -4,8 +4,18 @@ import { html } from 'lit'
 
 @customElement('ox-grist-editor-checkbox')
 export class OxGristEditorCheckbox extends OxGristEditor {
-  formatFromEditor(e: Event) {
-    return (e.target as HTMLInputElement).checked
+  _onchange(e: Event) {
+    e.stopPropagation()
+
+    const input = e.target as HTMLInputElement
+
+    this._dirtyValue = this.formatFromEditor(input.checked)
+  }
+
+  formatFromEditor(value: any) {
+    if (typeof value == 'boolean') {
+      return value
+    }
   }
 
   formatForEditor(value: any): any {

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

@@ -15,8 +15,7 @@ export class OxGristEditorDateTime extends OxGristEditor {
     return new Date(timestamp - tzoffset).toISOString().slice(0, -1)
   }
 
-  formatFromEditor(e: Event) {
-    var value = (e.target as HTMLInputElement).value
+  formatFromEditor(value: any) {
     var datetime = new Date(value)
 
     return datetime.getTime()

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

@@ -5,8 +5,18 @@ import { OxGristEditor } from './ox-grist-editor.js'
 
 @customElement('ox-grist-editor-file')
 export class OxGristEditorFile extends OxGristEditor {
-  formatFromEditor(e: Event): any {
-    return (e.target as HTMLInputElement).files
+  _onchange(e: Event) {
+    e.stopPropagation()
+
+    const input = e.target as HTMLInputElement
+
+    this._dirtyValue = this.formatFromEditor(input.files)
+
+    this._onfocusout()
+  }
+
+  formatFromEditor(value: any): any {
+    return value
   }
 
   get editorTemplate() {

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

@@ -12,17 +12,20 @@ export class OxGristEditorImage extends OxGristEditor {
 
   _onchange(e: Event) {
     e.stopPropagation()
-    this._dirtyValue = this.formatFromEditor(e)
-    this._onfocusout()
-  }
 
-  formatFromEditor(e: Event) {
-    // value가 image file object인지, image url인지 확인
     const input = e.target as HTMLInputElement
+
+    // value가 image file object인지, image url인지 확인
     if (input.files?.[0]) {
-      return input.files[0]
+      this._dirtyValue = this.formatFromEditor(input.files[0])
     } else {
-      return input.value
+      this._dirtyValue = this.formatFromEditor(input.value)
     }
+
+    this._onfocusout()
+  }
+
+  formatFromEditor(value: any) {
+    return value
   }
 }

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

@@ -5,17 +5,18 @@ import { parseToNumberOrNull } from '@operato/utils'
 
 @customElement('ox-grist-editor-number')
 export class OxGristEditorNumber extends OxGristEditor {
-  formatFromEditor(e: Event) {
-    let value = (e.target as HTMLInputElement).value
+  get inlineEditable() {
+    return true
+  }
+
+  formatFromEditor(value: any) {
+    const parsed = parseToNumberOrNull(value) || null
 
-    switch (this.column.type) {
-      case 'float':
-        return Number.parseFloat(value) || 0
-      case 'integer':
-        return Number.parseInt(value) || 0
-      default:
-        return Number(value)
+    if (parsed !== null && this.column.type == 'integer') {
+      return Math.floor(parsed)
     }
+
+    return parsed
   }
 
   get editorTemplate() {

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

@@ -4,6 +4,10 @@ import { html } from 'lit'
 
 @customElement('ox-grist-editor-text')
 export class OxGristEditorText extends OxGristEditor {
+  get inlineEditable() {
+    return true
+  }
+
   get editorTemplate() {
     return html` <input type="text" .value=${this.value} /> `
   }

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

@@ -6,6 +6,10 @@ import { html } from 'lit'
 
 @customElement('ox-grist-editor-textarea')
 export class OxGristEditorTextarea extends OxGristEditor {
+  get inlineEditable() {
+    return true
+  }
+
   get editorTemplate() {
     return html` <ox-input-textarea .value=${this.value}></ox-input-textarea> `
   }

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

@@ -5,7 +5,6 @@ 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 '@operato/time-calculator'
-import { parseToNumberOrNull } from '@operato/utils'
 
 const STYLE = css`
   :host {
@@ -92,8 +91,8 @@ export class OxGristEditor extends LitElement {
     return this.renderRoot.firstElementChild as HTMLElement
   }
 
-  get directEditable() {
-    return true
+  get inlineEditable() {
+    return false
   }
 
   async firstUpdated() {
@@ -122,22 +121,21 @@ export class OxGristEditor extends LitElement {
       currentValue = getDefaultValue(defaultValue, this.record)
     }
 
+    this.value = this._dirtyValue = this.formatForEditor(currentValue)
+
     // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
-    const editorValue = this.field?.valueWithEdit ? this.field.valueWithEdit : this.formatForEditor(currentValue)
-    const fieldType = this.field?.type || 'string'
-    this.value = this._dirtyValue = ['number', 'float', 'integer', 'progress'].includes(fieldType)
-      ? parseToNumberOrNull(editorValue)
-      : editorValue
+    const valueWith = this.inlineEditable && this.field?.valueWith
+    this.value = this._dirtyValue = valueWith ? this.formatFromEditor(valueWith) : this.formatForEditor(currentValue)
 
     requestAnimationFrame(() => {
       this.focus()
-      this.select()
+      !valueWith && this.select()
     })
   }
 
   select() {
     const editor = this.editor
-    if ((editor as HTMLInputElement)?.select && !this.field?.valueWithEdit) {
+    if ((editor as HTMLInputElement)?.select) {
       return (editor as HTMLInputElement).select()
     }
   }
@@ -153,8 +151,8 @@ export class OxGristEditor extends LitElement {
     return value == null ? '' : value
   }
 
-  formatFromEditor(e: Event): any {
-    return (e.target as HTMLInputElement).value
+  formatFromEditor(value: any): any {
+    return value
   }
 
   _onfocusout() {
@@ -184,7 +182,9 @@ export class OxGristEditor extends LitElement {
   _onchange(e: Event): void {
     e.stopPropagation()
 
-    this._dirtyValue = this.formatFromEditor(e)
+    const value = (e.target as any)?.value
+
+    this._dirtyValue = this.formatFromEditor(value)
   }
 
   _onkeydown(e: Event): void {}

package/stories/dynamic-editable.stories.ts

@@ -102,7 +102,8 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
           editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {
             return record?.name !== 'heartyoh-3'
           }
-        }
+        },
+        width: 40
       },
       {
         type: 'number',
@@ -192,102 +193,101 @@ interface ArgTypes {
   headerFilter: boolean
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) => html` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
-    rel="stylesheet"
-  />
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/oops-theme.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
-
-  <style>
-    [slot='headroom'] {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: var(--padding-default) var(--padding-wide);
-      background-color: var(--theme-white-color);
-      box-shadow: var(--box-shadow);
-
-      --mdc-icon-size: 24px;
-    }
-    #sorters mwc-icon,
-    #modes mwc-icon {
-      --mdc-icon-size: 18px;
-    }
-    #sorters {
-      margin-left: auto;
-      margin-right: var(--margin-default);
-      padding-left: var(--padding-narrow);
-      border-bottom: var(--border-dark-color);
-      position: relative;
-      color: var(--secondary-color);
-      font-size: var(--fontsize-default);
-      user-select: none;
-    }
+const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-    #sorters > * {
-      padding: var(--padding-narrow);
-      vertical-align: middle;
-    }
+    <style>
+      [slot='headroom'] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: var(--padding-default) var(--padding-wide);
+        background-color: var(--theme-white-color);
+        box-shadow: var(--box-shadow);
 
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+        --mdc-icon-size: 24px;
+      }
+      #sorters mwc-icon,
+      #modes mwc-icon {
+        --mdc-icon-size: 18px;
+      }
+      #sorters {
+        margin-left: auto;
+        margin-right: var(--margin-default);
+        padding-left: var(--padding-narrow);
+        border-bottom: var(--border-dark-color);
+        position: relative;
+        color: var(--secondary-color);
+        font-size: var(--fontsize-default);
+        user-select: none;
+      }
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+      #sorters > * {
+        padding: var(--padding-narrow);
+        vertical-align: middle;
+      }
 
-    @media only screen and (max-width: 460px) {
       #filters {
-        flex-direction: column;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      #modes {
-        display: none;
+      #filters * {
+        margin-right: var(--margin-default);
       }
-    }
-  </style>
 
-  <ox-grist
-    .config=${buildConfig({ headerFilter })}
-    mode="GRID"
-    .fetchHandler=${fetchHandler}
-    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
-    @field-change="${(e: any) => {
-      console.log(e.detail.record.name, e.detail.record.number)
-    }}"
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form></ox-filters-form>
-      </div>
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
 
-      <div id="sorters">
-        Sort
-        <mwc-icon
-          @click=${(e: Event) => {
-            const target = e.currentTarget as HTMLElement
-            ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-              right: 0,
-              top: target.offsetTop + target.offsetHeight
-            })
-          }}
-          >expand_more</mwc-icon
-        >
-        <ox-popup id="sorter-control">
-          <ox-sorters-control> </ox-sorters-control>
-        </ox-popup>
-      </div>
+        #modes {
+          display: none;
+        }
+      }
+    </style>
+
+    <ox-grist
+      .config=${buildConfig({ headerFilter })}
+      mode="GRID"
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+      @field-change=${(e: any) => {
+        const { name, number, chk } = e.detail.record
+        console.log(name, number, chk)
+      }}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form></ox-filters-form>
+        </div>
 
-      <ox-record-creator id="add" light-popup>
-        <button><mwc-icon>add</mwc-icon></button>
-      </ox-record-creator>
-    </div>
-  </ox-grist>`
+        <div id="sorters">
+          Sort
+          <mwc-icon
+            @click=${(e: Event) => {
+              const target = e.currentTarget as HTMLElement
+              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                right: 0,
+                top: target.offsetTop + target.offsetHeight
+              })
+            }}
+            >expand_more</mwc-icon
+          >
+          <ox-popup id="sorter-control">
+            <ox-sorters-control> </ox-sorters-control>
+          </ox-popup>
+        </div>
+
+        <ox-record-creator id="add" light-popup>
+          <button><mwc-icon>add</mwc-icon></button>
+        </ox-record-creator>
+      </div>
+    </ox-grist>`
 
 export const Regular = Template.bind({})
 Regular.args = {}