@operato/data-grist 7.0.25 → 7.0.27

package/src/data-card/data-card.ts

@@ -22,19 +22,6 @@ export class DataCard extends DataManipulator {
         grid-gap: var(--spacing-large);
       }
 
-      ox-record-card {
-        height: min-content;
-        align-items: stretch;
-        background-color: var(--data-card-record-card-background-color);
-        border: var(--data-card-record-card-border);
-        border-radius: var(--data-card-record-card-border-radius);
-      }
-      ox-record-card:hover {
-        background-color:var(--md-sys-color-surface);
-        border: var(--data-card-record-card-border-hover);
-        box-shadow: var(--data-card-record-card-boxshadow-hover);
-      }
-
       [selected-row] {
         background-color: var(--grid-record-selected-background-color);
       }
@@ -63,6 +50,12 @@ export class DataCard extends DataManipulator {
         transform: translate(-50%, -50%);
       }
 
+      ox-record-card[emphasized-row],
+      ox-record-card[emphasized-row][focused] {
+        background-color: var(--grid-record-emphasized-background-color);
+        color: var(--grid-record-emphasized-color);
+      }
+
       @media screen and (max-width: 460px) {
         #setting {
           grid-template-columns: 1fr;
@@ -118,6 +111,7 @@ export class DataCard extends DataManipulator {
   }
 
   render() {
+    var { classifier } = this.config.rows
     var records = this._records || []
 
     if (this.config && this.config.rows.appendable) {
@@ -125,18 +119,21 @@ export class DataCard extends DataManipulator {
     }
 
     return html`
-      ${records.map(
-        (record, rowIndex) => html`
+      ${records.map((record, rowIndex) => {
+        var { emphasized } = classifier.call(null, record, rowIndex) || {}
+
+        return html`
           <ox-record-card
             .config=${this.config}
             .data=${this.data}
             .record=${record}
             .rowIndex=${rowIndex}
+            .emphasized=${emphasized}
             ?selected-row=${record['__selected__']}
             ?dirty=${record['__dirty__']}
           ></ox-record-card>
         `
-      )}
+      })}
       ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
       ${this.isTop
         ? html``

package/src/data-card/record-card.ts

@@ -34,8 +34,18 @@ export class RecordCard extends LitElement {
       :host {
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
         position: relative;
+        background-color: var(--data-card-record-card-background-color);
+        border-radius: var(--data-card-record-card-border-radius);
+        border: var(--data-card-record-card-border);
+        height: min-content;
+      }
+
+      :host(:hover) {
+        background-color: var(--md-sys-color-surface);
+        border: var(--data-card-record-card-border-hover);
+        box-shadow: var(--data-card-record-card-boxshadow-hover);
       }
 
       :host([dirty])::before {
@@ -50,6 +60,11 @@ export class RecordCard extends LitElement {
         border-right: var(--grid-record-dirty-border-left);
       }
 
+      :host[emphasized-row] {
+        background-color: var(--grid-record-emphasized-background-color);
+        color: var(--grid-record-emphasized-color);
+      }
+
       [dirty] {
         position: absolute;
         margin: var(--spacing-none);
@@ -68,7 +83,7 @@ export class RecordCard extends LitElement {
         border-top-left-radius: var(--data-card-record-card-border-radius);
         border-top-right-radius: var(--data-card-record-card-border-radius);
         overflow: hidden;
-        margin-top:var(--spacing-medium);
+        margin-top: var(--spacing-medium);
       }
 
       [content] {
@@ -127,6 +142,7 @@ export class RecordCard extends LitElement {
    * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)
    */
   @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false
+  @property({ attribute: false }) emphasized: any = false
 
   private _recordView: any
   private clickHandler = recordCardClickHandler.bind(this) as EventListener
@@ -149,6 +165,20 @@ export class RecordCard extends LitElement {
     if (changes.has('record') && this._recordView) {
       this._recordView.record = this.record
     }
+
+    const emphasized = this.emphasized
+
+    if (!!emphasized) {
+      this.setAttribute('emphasized-row', '')
+
+      if (Symbol.iterator in Object(emphasized)) {
+        const [backgroundColor, foregroundColor] = emphasized as string[]
+        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)
+        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)
+      }
+    } else {
+      this.removeAttribute('emphasized-row')
+    }
   }
 
   render() {

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

@@ -72,13 +72,13 @@ export class DataGridBody extends LitElement {
         border: var(--grid-record-focused-cell-border);
         background-image: var(--focused-background-image);
         pointer-events: none;
-        z-index: 50;
+        z-index: 5;
       }
 
       [fixed] {
         position: sticky;
         background-color: var(--grid-record-background-color);
-        z-index: 20; /* 고정된 열을 다른 열 위에 표시. */
+        z-index: 2; /* 고정된 열을 다른 열 위에 표시. */
       }
 
       :host([raised]) [fixed] {
@@ -89,7 +89,7 @@ export class DataGridBody extends LitElement {
       ox-grid-accum-field {
         position: sticky;
         bottom: 0;
-        z-index: 10;
+        z-index: 1;
       }
 
       ox-grid-accum-field[fixed] {

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

@@ -126,7 +126,7 @@ export class DataGridHeader extends LitElement {
 
       [fixed] {
         position: sticky;
-        z-index: 10;
+        z-index: 2;
       }
 
       .span-both {

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

@@ -57,7 +57,7 @@ export class DataGrid extends DataManipulator {
 
       div[setting] {
         position: relative;
-        z-index: 50;
+        z-index: 5;
       }
 
       @media print {

package/src/data-grist.ts

@@ -87,7 +87,7 @@ export class DataGrist extends LitElement implements DataConsumer {
         box-sizing: border-box;
         background-color: var(--grist-background-color);
 
-        z-index: 100;
+        z-index: 8;
       }
     `
   ]

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

@@ -40,8 +40,8 @@ export class DataListField extends LitElement {
         object-fit: contain;
         width: 100%;
         height: 100%;
-        padding: var(--spacing-none)
-        margin: var(--spacing-none)
+        padding: var(--spacing-none);
+        margin: var(--spacing-none);
       }
 
       label {

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

@@ -47,6 +47,12 @@ export class DataList extends DataManipulator {
         top: 50%;
         transform: translate(-50%, -50%);
       }
+
+      ox-record-partial[emphasized-row],
+      ox-record-partial[emphasized-row][focused] {
+        background-color: var(--grid-record-emphasized-background-color);
+        color: var(--grid-record-emphasized-color);
+      }
     `
   ]
 
@@ -96,6 +102,8 @@ export class DataList extends DataManipulator {
   }
 
   render() {
+    var { classifier } = this.config.rows
+
     var records = this._records || []
 
     if (this.config && this.config.rows.appendable) {
@@ -103,18 +111,21 @@ export class DataList extends DataManipulator {
     }
 
     return html`
-      ${records.map(
-        (record, rowIndex) => html`
+      ${records.map((record, rowIndex) => {
+        var { emphasized } = classifier.call(null, record, rowIndex) || {}
+
+        return html`
           <ox-record-partial
             .config=${this.config}
             .data=${this.data}
             .record=${record}
             .rowIndex=${rowIndex}
+            .emphasized=${emphasized}
             ?selected-row=${record['__selected__']}
             ?dirty=${record['__dirty__']}
           ></ox-record-partial>
         `
-      )}
+      })}
       ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
       ${this.isTop
         ? html``

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

@@ -54,6 +54,11 @@ export class RecordPartial extends LitElement {
         border-right: var(--grid-record-dirty-border-left);
       }
 
+      :host[emphasized-row] {
+        background-color: var(--grid-record-emphasized-background-color);
+        color: var(--grid-record-emphasized-color);
+      }
+
       :host [dirty] {
         position: absolute;
         margin: var(--spacing-none);
@@ -112,6 +117,7 @@ export class RecordPartial extends LitElement {
    * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)
    */
   @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false
+  @property({ attribute: false }) emphasized: any = false
 
   private _recordView: any
 
@@ -137,6 +143,20 @@ export class RecordPartial extends LitElement {
     if (changes.has('record') && this._recordView) {
       this._recordView.record = this.record
     }
+
+    const emphasized = this.emphasized
+
+    if (!!emphasized) {
+      this.setAttribute('emphasized-row', '')
+
+      if (Symbol.iterator in Object(emphasized)) {
+        const [backgroundColor, foregroundColor] = emphasized as string[]
+        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)
+        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)
+      }
+    } else {
+      this.removeAttribute('emphasized-row')
+    }
   }
 
   render() {

package/src/record-view/record-view-body.ts

@@ -31,6 +31,10 @@ export class RecordViewBody extends LitElement {
         ox-grid-field {
           max-width: 300px;
         }
+
+        div[content] {
+          grid-template-columns: 1fr 1fr;
+        }
       }
 
       label {