@operato/data-grist 2.0.0-alpha.152 → 2.0.0-alpha.154

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

@@ -352,12 +352,14 @@ export class DataGridBody extends LitElement {
 
     this.addEventListener('focus-change', dataGridBodyFocusChangeHandler.bind(this))
 
-    const primaryColor = getComputedStyle(this).getPropertyValue('--md-sys-color-primary-fixed-dim')
+    requestAnimationFrame(() => {
+      const primaryColor = getComputedStyle(this).getPropertyValue('--md-sys-color-primary')
 
-    this.style.setProperty(
-      '--focused-background-image',
-      `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%'/></svg>")`
-    )
+      this.style.setProperty(
+        '--focused-background-image',
+        `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' fill-opacity='0.2' x='0' y='0' width='100%' height='100%'/></svg>")`
+      )
+    })
 
     this.addEventListener('show-record-view', (e: Event) =>
       this.popupRecordView((e as CustomEvent).detail as { row: number; record: GristRecord })

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

@@ -352,7 +352,7 @@ export class DataGridHeader extends LitElement {
     var { renderer } = column.header || {}
     var title = renderer.call(this, column)
 
-    return html` ${title} `
+    return html`${column?.record?.mandatory ? '*' : ''} ${title} `
   }
 
   _renderSortHeader(column: ColumnConfig) {

package/stories/accumulator-format.stories.ts

@@ -166,9 +166,6 @@ const config = {
     selectable: {
       multiple: false
     },
-    handlers: {
-      focus: 'select-row'
-    },
     accumulator: true
   },
   sorters: [

package/stories/creatable-only-column.stories.ts

@@ -66,6 +66,7 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         header: 'name',
         filter: 'search',
         record: {
+          mandatory: true,
           editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {
             return !record.id
           }
@@ -98,6 +99,7 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         name: 'number',
         header: 'number',
         record: {
+          mandatory: true,
           editable: true
         },
         width: 80

package/themes/grist-theme.css

@@ -43,13 +43,13 @@ body {
   --grid-gutter-padding: var(--spacing-tiny) 0;
 
   --grid-record-background-color: var(--md-sys-color-surface-container-lowest);
-  --grid-record-odd-background-color: var(--md-sys-color-primary-container);
+  --grid-record-odd-background-color: var(--md-sys-color-surface-container-low);
   --grid-record-padding: var(--spacing-small) var(--spacing-medium);
   --grid-record-color: var(--md-sys-color-on-surface-variant);
   --grid-record-color-hover: var(--md-sys-color-primary);
   --grid-record-wide-fontsize: var(--md-sys-typescale-label-medium-size, 0.75rem);
   --grid-record-selected-background-color: var(--md-sys-color-primary-container);
-  --grid-record-selected-color: var(--md-sys-color-primary);
+  --grid-record-selected-color: var(--md-sys-color-on-primary-container);
   --grid-record-focused-background-color: var(--md-sys-color-secondary-container);
   --grid-record-focused-border: 1px solid var(--md-sys-color-outline-variant);
   --grid-record-focused-cell-background-color: var(--md-sys-color-secondary-container);