@operato/data-grist 2.0.0-alpha.11 → 2.0.0-alpha.111

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

@@ -10,6 +10,7 @@ export const dataGridBodyStyle = css`
     outline: none;
     color: var(--grid-record-color);
     position: relative;
+    border-bottom: var(--grid-body-bottom-border);
   }
 
   ox-grid-field[odd] {

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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -14,17 +14,18 @@ export class DataGridFooter extends LitElement {
       :host {
         display: flex;
         flex-direction: row;
+        gap: 4px;
         overflow: hidden;
 
         padding: var(--grid-footer-padding);
         background-color: var(--grid-footer-background-color);
         font-size: var(--grid-footer-font-size);
+        align-items: center;
       }
 
       :host * {
         white-space: nowrap;
         overflow: hidden;
-        padding: 0 2px;
 
         text-overflow: ellipsis;
         text-align: center;
@@ -35,11 +36,18 @@ export class DataGridFooter extends LitElement {
         flex: 1;
       }
 
-      mwc-icon {
+      md-icon {
         font-size: 1.5em;
         vertical-align: middle;
       }
 
+      .limit {
+        display: flex;
+        flex-direction: row;
+        gap: 6px;
+        align-items: center;
+      }
+
       .limit a {
         color: var(--grid-footer-limit-color);
       }
@@ -82,20 +90,19 @@ export class DataGridFooter extends LitElement {
     var totalPage = Math.max(1, Math.ceil(total / limit))
 
     return html`
-      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(1)}><mwc-icon>skip_previous</mwc-icon></a>
-      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(page - 1)}><mwc-icon>navigate_before</mwc-icon></a>
+      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(1)}><md-icon>skip_previous</md-icon></a>
+      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(page - 1)}><md-icon>navigate_before</md-icon></a>
       <span>page <strong>${page}</strong>&nbsp;/&nbsp;${totalPage}</span>
-      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(page + 1)}><mwc-icon>navigate_next</mwc-icon></a>
-      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(totalPage)}><mwc-icon>skip_next</mwc-icon></a>
+      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(page + 1)}><md-icon>navigate_next</md-icon></a>
+      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(totalPage)}><md-icon>skip_next</md-icon></a>
 
       <span class="filler"></span>
 
       <span class="limit">
         ${pages.map(
-          size =>
-            html`
-              <a ?selected=${limit == size} @click=${() => this._changeLimit(size)}>${stringifyBigNumber(size)}</a>
-            `
+          size => html`
+            <a ?selected=${limit == size} @click=${() => this._changeLimit(size)}>${stringifyBigNumber(size)}</a>
+          `
         )}
         records
       </span>

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

@@ -1,5 +1,5 @@
 import '@operato/popup/ox-popup.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, PropertyValues, nothing, TemplateResult } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -22,6 +22,7 @@ export class DataGridHeader extends LitElement {
     TooltipStyles,
     css`
       :host {
+        position: relative;
         display: grid;
         grid-template-columns: var(--grid-template-columns);
 
@@ -62,7 +63,7 @@ export class DataGridHeader extends LitElement {
         align-self: center;
       }
 
-      span[for-title] mwc-icon {
+      span[for-title] md-icon {
         font-size: var(--grid-record-fontsize);
       }
 
@@ -75,11 +76,11 @@ export class DataGridHeader extends LitElement {
         border: 0;
       }
 
-      span[sorter] mwc-icon {
+      span[sorter] md-icon {
         font-size: var(--grid-header-sorter-size);
       }
 
-      span[filter] > mwc-icon {
+      span[filter] > md-icon {
         font-size: var(--fontsize-default);
         line-height: 20px;
       }
@@ -104,7 +105,7 @@ export class DataGridHeader extends LitElement {
         vertical-align: middle;
       }
 
-      [filter-title] mwc-icon {
+      [filter-title] md-icon {
         opacity: 0.7;
         color: var(--grid-header-filter-title-icon-color);
       }
@@ -363,12 +364,10 @@ export class DataGridHeader extends LitElement {
     if (sorters.length > 1) {
       var rank = sorters.indexOf(sorter) + 1
       return sorter.desc
-        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `
-        : html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `
+        ? html` <md-icon>keyboard_arrow_down</md-icon><sub>${rank}</sub> `
+        : html` <md-icon>keyboard_arrow_up</md-icon><sub>${rank}</sub> `
     } else {
-      return sorter.desc
-        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon> `
-        : html` <mwc-icon>keyboard_arrow_up</mwc-icon> `
+      return sorter.desc ? html` <md-icon>keyboard_arrow_down</md-icon> ` : html` <md-icon>keyboard_arrow_up</md-icon> `
     }
   }
 
@@ -381,7 +380,7 @@ export class DataGridHeader extends LitElement {
     const renderer = getFilterRenderer(type)[idx]
 
     return html`
-      <mwc-icon
+      <md-icon
         @click=${(e: Event) => {
           const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement
           const popup = parent.querySelector('ox-popup, ox-popup-list') as OxPopup | null
@@ -398,63 +397,63 @@ export class DataGridHeader extends LitElement {
             top
           })
         }}
-        >filter_alt</mwc-icon
+        >filter_alt</md-icon
       >
 
       ${!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><md-icon>filter_alt</md-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">
+                  <md-icon>filter_alt</md-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">
+                  <md-icon>filter_alt</md-icon> filter by <strong>${column.name}</strong>
+                </div>
+                ${renderer(column, value, this)}</ox-popup-list
+              >`}
     `
   }
 
@@ -471,11 +470,15 @@ 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 = {
-        name: column.name
+        name: column.name,
+        desc: false
       }
 
       sorters.push(sorter)

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

@@ -43,6 +43,11 @@ export class DataGrid extends DataManipulator {
         transform: translate(-50%, -50%);
       }
 
+      div[setting] {
+        position: relative;
+        z-index: 1;
+      }
+
       @media print {
         :host {
           zoom: 80%;
@@ -159,7 +164,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 +177,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 = {
@@ -222,6 +227,10 @@ export class DataGrid extends DataManipulator {
     var data = this.data
 
     return html`
+      <div setting>
+        <slot name="setting"></slot>
+      </div>
+
       <ox-grid-header
         .columns=${columns}
         .sorters=${this.sorters}
@@ -234,7 +243,8 @@ export class DataGrid extends DataManipulator {
           this.calculateWidths(columns)
         }}
         @fixed-lefts-change=${(e: CustomEvent) => (this.fixedLefts = e.detail)}
-      ></ox-grid-header>
+      >
+      </ox-grid-header>
 
       <ox-grid-body
         .config=${this.config}

package/src/data-grist.ts

@@ -59,7 +59,7 @@ export class DataGrist extends LitElement implements DataConsumer {
 
         padding: var(--ox-grist-padding);
 
-        --mdc-icon-size: var(--grid-record-wide-fontsize);
+        --md-icon-size: var(--grid-record-wide-fontsize);
       }
 
       #wrap {
@@ -85,7 +85,7 @@ export class DataGrist extends LitElement implements DataConsumer {
         box-sizing: border-box;
         background-color: var(--grist-background-color);
 
-        z-index: 1;
+        z-index: 2;
       }
     `
   ]
@@ -401,31 +401,32 @@ export class DataGrist extends LitElement implements DataConsumer {
                 .pagination=${this.pagination || {}}
                 ?empty=${empty}
               >
+                <slot name="setting" slot="setting"> </slot>
               </ox-grid>
             `
           : this.mode == 'CARD'
-          ? html`
-              <ox-card
-                id="grist"
-                .config=${this.compiledConfig}
-                .data=${this._data}
-                .sorters=${this.sorters || []}
-                .filters=${this.filters || []}
-                ?empty=${empty}
-              >
-              </ox-card>
-            `
-          : html`
-              <ox-list
-                id="grist"
-                .config=${this.compiledConfig}
-                .data=${this._data}
-                .sorters=${this.sorters || []}
-                .filters=${this.filters || []}
-                ?empty=${empty}
-              >
-              </ox-list>
-            `}
+            ? html`
+                <ox-card
+                  id="grist"
+                  .config=${this.compiledConfig}
+                  .data=${this._data}
+                  .sorters=${this.sorters || []}
+                  .filters=${this.filters || []}
+                  ?empty=${empty}
+                >
+                </ox-card>
+              `
+            : html`
+                <ox-list
+                  id="grist"
+                  .config=${this.compiledConfig}
+                  .data=${this._data}
+                  .sorters=${this.sorters || []}
+                  .filters=${this.filters || []}
+                  ?empty=${empty}
+                >
+                </ox-list>
+              `}
       </div>
 
       <div id="spinner" ?show=${this._showSpinner}></div>

package/src/data-list/data-list-gutter.ts

@@ -22,6 +22,18 @@ export class DataListGutter extends LitElement {
         font-size: var(--grid-record-wide-fontsize);
         text-overflow: ellipsis;
         color: var(--grid-record-color);
+
+        padding-right: 10px;
+      }
+
+      :host-context(.expand)::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 150%;
+        height: 220%;
       }
 
       * {

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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './record-partial'
 
 import { css, html, PropertyValues } from 'lit'
@@ -25,7 +25,7 @@ export class DataList extends DataManipulator {
       }
 
       #upward {
-        --mdc-icon-size: 26px;
+        --md-icon-size: 26px;
         position: absolute;
         top: var(--data-list-fab-position-vertical);
         right: var(--data-list-fab-position-horizontal);
@@ -118,7 +118,7 @@ export class DataList extends DataManipulator {
       ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
       ${this.isTop
         ? html``
-        : html` <mwc-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
+        : html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}
     `
   }
 

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/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() {