@operato/data-grist 2.0.0-alpha.9 → 2.0.0-alpha.90

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: 100;
+      }
+
       @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}