@operato/data-grist 2.0.0-alpha.13 → 2.0.0-alpha.131

package/src/data-list/record-partial.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './data-list-gutter'
 import './data-list-field'
 import '../record-view'
@@ -39,6 +39,7 @@ export class RecordPartial extends LitElement {
         border-bottom: var(--data-list-item-border-bottom);
         position: relative;
         min-height: 42px;
+        padding-left: 7px;
       }
 
       :host([dirty])::before {
@@ -168,32 +169,31 @@ export class RecordPartial extends LitElement {
     }
 
     return html`
-      ${dirtyIcon ? html` <mwc-icon dirty>${dirtyIcon}</mwc-icon> ` : html``}
+      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}
       ${gutters.map(
-        gutter =>
-          html`
-            <ox-list-gutter
-              .rowIndex=${rowIndex}
-              .column=${gutter}
-              .record=${record}
-              .value=${record[gutter.name]}
-            ></ox-list-gutter>
-          `
+        gutter => html`
+          <ox-list-gutter
+            class=${gutter.name === 'detail' ? 'expand' : ''}
+            .rowIndex=${rowIndex}
+            .column=${gutter}
+            .record=${record}
+            .value=${record[gutter.name]}
+          ></ox-list-gutter>
+        `
       )}
 
       <div content>
         ${displayColumns.map(
-          (column, idx) =>
-            html`
-              <ox-list-field
-                .rowIndex=${rowIndex}
-                .column=${column}
-                .record=${record}
-                .value=${record[column?.name || '']}
-                ?name=${idx == 0}
-                ?desc=${idx == 1}
-              ></ox-list-field>
-            `
+          (column, idx) => html`
+            <ox-list-field
+              .rowIndex=${rowIndex}
+              .column=${column}
+              .record=${record}
+              .value=${record[column?.name || '']}
+              ?name=${idx == 0}
+              ?desc=${idx == 1}
+            ></ox-list-field>
+          `
         )}
       </div>
       ${thumbnail

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-select.ts

@@ -1,6 +1,38 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { until } from 'lit/directives/until.js'
+
+import { OxGristEditor } from './ox-grist-editor.js'
+import { SelectOption, SelectOptionObject } from '../types.js'
+
+function buildOptions(options: SelectOption[], value: any) {
+  const selectOptionObjects = options.map(option => {
+    switch (typeof option) {
+      case 'string':
+        return {
+          display: option,
+          value: option
+        }
+      case 'object':
+        return {
+          display: option.display || option.name,
+          value: option.value
+        }
+      default:
+        return option
+    }
+  }) as SelectOptionObject[]
+
+  return html`
+    <select>
+      ${selectOptionObjects.map(
+        (option: any) => html`
+          <option ?selected=${option.value == value} value=${option.value}>${option.display}</option>
+        `
+      )}
+    </select>
+  `
+}
 
 @customElement('ox-grist-editor-select')
 export class OxGristEditorSelect extends OxGristEditor {
@@ -10,33 +42,14 @@ export class OxGristEditorSelect extends OxGristEditor {
 
     if (typeof options == 'function') {
       options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)
-    }
 
-    options = options.map((option: any) => {
-      switch (typeof option) {
-        case 'string':
-          return {
-            display: option,
-            value: option
-          }
-        case 'object':
-          return {
-            display: option.display,
-            value: option.value
-          }
-        default:
-          return option
+      if (options instanceof Promise) {
+        return html`${until(options.then(options => buildOptions(options, this.value)))}`
+      } else {
+        return buildOptions((options || []) as SelectOption[], rowOptionField.display || this.value)
       }
-    })
-
-    return html`
-      <select>
-        ${options.map(
-          (option: any) => html`
-            <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>
-          `
-        )}
-      </select>
-    `
+    } else {
+      return buildOptions((options || []) as SelectOption[], this.value)
+    }
   }
 }

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

@@ -4,8 +4,7 @@ import { customElement, property } from 'lit/decorators.js'
 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'
+import { getDefaultValue } from '@operato/time-calculator'
 
 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/src/empty-note.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -11,7 +11,7 @@ export class EmptyNote extends LitElement {
       text-align: center;
     }
 
-    mwc-icon {
+    md-icon {
       font: var(--oops-note-icon-font);
       color: var(--oops-note-icon-color);
       border: var(--oops-note-icon-border);
@@ -38,7 +38,7 @@ export class EmptyNote extends LitElement {
 
   render() {
     return html`
-      ${this.icon ? html`<mwc-icon>${this.icon}</mwc-icon>` : html``}
+      ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : html``}
       <div titler>${this.title}</div>
       ${this.description ? html`<div description>${this.description}</div>` : html``}
     `

package/src/filters/filter-checkbox.ts

@@ -5,8 +5,16 @@ import { html } from 'lit-html'
 import { FilterConfigObject, FilterSelectRenderer } from '../types.js'
 
 export const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {
-  const filter = column.filter as FilterConfigObject
-  const options = filter?.options
+  const { name, header, label, filter } = column
+
+  const { label: filterLabel, operator } = filter! as FilterConfigObject
+
+  const labelText =
+    filterLabel !== undefined
+      ? filterLabel
+      : typeof label === 'object' && label.renderer
+        ? label.renderer(column)
+        : header.renderer(column) || name
 
   return html`
     <ox-checkbox
@@ -14,19 +22,21 @@ export const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {
       ?checked=${value}
       indeterminatable
       ?indeterminate=${value == null}
+      left-label
       @change=${(e: CustomEvent) => {
         ;(e.target as HTMLElement).dispatchEvent(
           new CustomEvent('filter-change', {
             bubbles: true,
             composed: true,
             detail: {
-              name: column.name,
-              operator: filter.operator,
+              name,
+              operator,
               value: (e.target as Element & { checked: boolean | undefined }).checked
             }
           })
         )
       }}
-    ></ox-checkbox>
+      ><label filter-title><span>${labelText}</span></label></ox-checkbox
+    >
   `
 }

package/src/filters/filter-range-date.ts

@@ -2,16 +2,31 @@ import { FilterConfigObject, FilterSelectRenderer } from '../types'
 
 import { html } from 'lit-html'
 
+function formatDate(type: string, date: Date) {
+  var year = date.getFullYear()
+  var month = ('0' + (date.getMonth() + 1)).slice(-2)
+  var day = ('0' + date.getDate()).slice(-2)
+  var hours = ('0' + date.getHours()).slice(-2)
+  var minutes = ('0' + date.getMinutes()).slice(-2)
+
+  var formatDate = year + '-' + month + '-' + day
+
+  return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes
+}
+
 export const FilterRangeDate: FilterSelectRenderer = (column, value, owner) => {
   const filter = column.filter as FilterConfigObject
 
-  const [from, to] = value instanceof Array ? value : []
+  var [from, to] = value instanceof Array ? value : []
 
   var type: any = filter?.type || column.type
   if (type === 'datetime') {
     type = 'datetime-local'
   }
 
+  from = formatDate(type, new Date(from))
+  to = formatDate(type, new Date(to))
+
   return html`
     <input
       name=${column.name}

package/src/filters/filter-select.ts

@@ -1,26 +1,14 @@
 import '@operato/input/ox-checkbox.js'
 
-import { FilterConfigObject, FilterSelectRenderer } from '../types'
+import { html } from 'lit'
+import { until } from 'lit/directives/until.js'
 
-import { html } from 'lit-html'
+import { FilterConfigObject, FilterOperator, FilterSelectRenderer, SelectOption, SelectOptionObject } from '../types'
+import { OxFiltersForm } from './filters-form'
+import { DataGridHeader } from '../data-grid/data-grid-header'
 
-export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
-  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
-  const filter = column.filter as FilterConfigObject
-  const operator = filter?.operator
-
-  var options = filter?.options || column.record.options || []
-
-  if (typeof options === 'function') {
-    if (!filter?.options) {
-      console.warn(
-        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'
-      )
-    }
-    options = options.call(column, owner)
-  }
-
-  options = options.map((option: any) => {
+function buildOptions(options: SelectOption[], operator?: FilterOperator) {
+  const selectOptionObjects = options.map(option => {
     switch (typeof option) {
       case 'string':
         return {
@@ -29,27 +17,52 @@ export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
         }
       case 'object':
         return {
-          display: option.display,
+          display: option.display || option.name,
           value: option.value
         }
       default:
         return option
     }
-  })
+  }) as SelectOptionObject[]
 
   return operator === 'in'
     ? html`
-        ${options
-          ?.filter((option: { display: string; value: any }) => !!option)
+        ${selectOptionObjects
+          ?.filter(option => !!option)
           .map(
-            (option: { display: string; value: any }) =>
-              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
+            ({ value, display, name }) => html` <ox-checkbox option value=${value}>${display || name}</ox-checkbox> `
           )}
       `
     : html`
-        ${options?.map(
-          (option: { display: string; value: any }) =>
-            html` <div option value=${option.value}>${option.display}&nbsp;</div> `
+        ${selectOptionObjects?.map(
+          ({ value, display, name }) => html` <div option value=${value}>${display || name}&nbsp;</div> `
         )}
       `
 }
+
+export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
+  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
+  const filter = column.filter as FilterConfigObject
+  const operator = filter?.operator
+  const form = owner as OxFiltersForm | DataGridHeader
+
+  var options = filter?.options || column.record.options || []
+
+  if (typeof options === 'function') {
+    if (!filter?.options) {
+      console.warn(
+        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'
+      )
+    }
+
+    options = options.call(null, value, column, form instanceof OxFiltersForm ? form.getFormObjectValue() : {}, owner)
+
+    if (options instanceof Promise) {
+      return html`${until(options.then(options => buildOptions(options, operator)))}`
+    } else {
+      return buildOptions((options || []) as SelectOption[], operator)
+    }
+  } else {
+    return buildOptions((options || []) as SelectOption[], operator)
+  }
+}

package/src/filters/filter-styles.ts

@@ -2,56 +2,77 @@ import { css } from 'lit'
 
 export const FilterStyles = css`
   :host {
-    --ox-input-placeholder-color: var(--primary-color);
-
-    --ox-input-padding: var(--padding-narrow) var(--padding-default);
-    --ox-input-border: 1px solid rgba(0, 0, 0, 0.2);
-    --ox-input-focus-border: 1px solid var(--primary-color);
-    --ox-input-border-radius: var(--border-radius);
-    --ox-input-font: normal 14px var(--theme-font);
-    --ox-input-color: var(--primary-text-color);
-
-    --ox-filters-form-gap: var(--margin-wide);
-    --ox-filters-form-label-font: var(--label-font);
-    --ox-filters-form-label-color: var(--label-color);
-    --ox-select-padding: 0 var(--padding-narrow);
+    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));
+
+    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
+    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));
+    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
+    --ox-filters-input-color: var(--input-color, var(--primary-text-color));
+    --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));
+    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
+    --ox-filters-label-color: var(--label-color, var(--primary-text-color));
+    --ox-filters-input-background-color: transparent;
+
+    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+    --ox-filters-input-padding: var(--input-padding, 6px 2px);
+
+    --ox-select-padding: var(--ox-filters-input-padding);
+    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   label {
-    font: var(--ox-filters-form-label-font);
-    color: var(--ox-filters-form-label-color);
+    font: var(--ox-filters-label-font);
+    color: var(--ox-filters-label-color);
   }
+
   span {
-    margin-right: var(--margin-narrow);
     text-transform: capitalize;
   }
 
   input::placeholder {
-    color: var(--ox-input-placeholder-color);
+    color: var(--ox-filters-input-placeholder-color);
     opacity: 0.6;
   }
 
+  input {
+    padding: var(--ox-filters-input-padding);
+  }
+
+  label > span + *,
   ox-select,
   input {
-    padding: var(--input-padding);
     border: none;
-    border-bottom: var(--ox-input-border);
-    font: var(--ox-input-font);
-    color: var(--ox-input-color);
+    border-bottom: var(--ox-filters-input-border);
+    font: var(--ox-filters-input-font);
+    color: var(--ox-filters-input-color);
+    background-color: var(--ox-filters-input-background-color, transparent);
+  }
+
+  label > span + * {
+    min-width: 120px;
   }
 
   ox-select:focus,
   input:focus {
     outline: none;
-    border-bottom: var(--ox-input-focus-border);
-    color: var(--primary-color);
+    border-bottom: var(--ox-filters-input-focus-border);
+    color: var(--ox-filters-input-focus-color);
   }
+
   ox-select {
-    padding: var(--ox-select-padding);
+    min-width: 100px;
+    max-width: 170px;
+  }
+
+  ox-input-barcode {
+    min-width: 150px;
+  }
+
+  ox-input-search {
+    max-width: 150px;
   }
 
   input[type='number'] {
-    padding-right: var(--padding-narrow);
     max-width: 90px;
   }
 
@@ -59,15 +80,13 @@ export const FilterStyles = css`
   input[type*='time'],
   input[type='week'],
   input[type='month'] {
-    padding: 8px var(--padding-narrow) 8px var(--padding-default);
     max-width: 170px;
   }
 
   @media only screen and (max-width: 460px) {
     :host {
       --ox-filters-form-label-font: bold 13px var(--theme-font);
-      --ox-input-font: normal 16px var(--theme-font);
-      --ox-filters-form-gap: var(--margin-narrow);
+      --ox-filters-input-font: normal 16px var(--theme-font);
     }
 
     input[from],