@operato/data-grist 2.0.0-beta.1 → 2.0.0-beta.13

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

@@ -59,7 +59,7 @@ export class RecordCard extends LitElement {
         text-indent: 1px;
         left: var(--spacing-none);
         top: var(--spacing-none);
-        color: var(--grid-record-dirty-color);
+        color: var(--grid-record-dirty-color, var(--md-sys-color-error));
       }
 
       [thumbnail] {
@@ -102,17 +102,17 @@ export class RecordCard extends LitElement {
 
       ox-card-field {
         font: var(--data-card-item-etc-font);
-        color: var(--data-card-item-etc-color);
+        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));
       }
 
       ox-card-field[name] {
         font: var(--data-card-item-name-font);
-        color: var(--data-card-item-name-color);
+        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));
       }
 
       ox-card-field[desc] {
         font: var(--data-card-item-disc-font);
-        color: var(--data-card-item-disc-color);
+        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));
       }
     `
   ]

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

@@ -545,6 +545,10 @@ export class DataGridBody extends LitElement {
       const opacity = selectBlock.style.opacity
 
       selectBlock.setAttribute('data-tooltip', 'copied to clipboard!')
+      const rect = selectBlock.getBoundingClientRect()
+      selectBlock.style.setProperty('--tooltip-top', `${rect.top}px`)
+      selectBlock.style.setProperty('--tooltip-left', `${rect.left}px`)
+
       selectBlock.style.backgroundColor = 'red'
       selectBlock.style.opacity = '0.5'
       await sleep(500)

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

@@ -3,10 +3,10 @@ import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { TooltipStyles } from '@operato/styles'
+import { TooltipReactiveController } from '@operato/utils'
 
 import { ZERO_COLUMN } from '../configure/zero-config'
 import { ColumnConfig, GristRecord } from '../types'
-import { getRenderer } from '../renderers'
 
 const DEFAULT_TEXT_ALIGN = 'left'
 
@@ -103,6 +103,8 @@ export class DataGridField extends LitElement {
   private _onFieldChange: (e: Event) => void = e => {}
   private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}
 
+  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)
+
   render(): TemplateResult {
     if (!this.column) {
       return html``

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

@@ -8,7 +8,7 @@ import throttle from 'lodash-es/throttle'
 
 import { OxPopup } from '@operato/popup'
 import { TooltipStyles } from '@operato/styles'
-import { closestElement, detectOverflow } from '@operato/utils'
+import { TooltipReactiveController, closestElement } from '@operato/utils'
 
 import { ZERO_COLUMNS, ZERO_DATA } from '../configure/zero-config'
 import { FilterStyles } from '../filters/filter-styles'
@@ -163,6 +163,8 @@ export class DataGridHeader extends LitElement {
   private _lastAccVal?: number
   private _throttledNotifier?: any
 
+  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)
+
   connectedCallback() {
     super.connectedCallback()
 
@@ -232,19 +234,9 @@ export class DataGridHeader extends LitElement {
       >
         <span
           for-title
+          data-reactive-tooltip
           style="text-align:${align || column.record.align || 'left'};"
           @click=${(e: MouseEvent) => this._changeSort(column)}
-          @mouseover=${(e: MouseEvent) => {
-            const element = e.target as HTMLSpanElement
-
-            if (detectOverflow(element)) {
-              element.setAttribute('data-tooltip', element.textContent!.trim())
-            }
-          }}
-          @mouseout=${(e: MouseEvent) => {
-            const element = e.target as HTMLSpanElement
-            element.removeAttribute('data-tooltip')
-          }}
           >${this._renderHeader(column)}
         </span>
 

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

@@ -62,7 +62,7 @@ export class RecordPartial extends LitElement {
         text-indent: 1px;
         left: var(--spacing-none);
         top: var(--spacing-none);
-        color: var(--grid-record-dirty-color);
+        color: var(--grid-record-dirty-color, var(--md-sys-color-error));
       }
 
       [content] {
@@ -88,17 +88,17 @@ export class RecordPartial extends LitElement {
 
       ox-list-field {
         font: var(--data-list-item-etc-font);
-        color: var(--data-list-item-etc-color);
+        color: var(--data-list-item-etc-color, var(--md-sys-color-on-surface));
       }
 
       ox-list-field[name] {
         font: var(--data-list-item-name-font);
-        color: var(--data-list-item-name-color);
+        color: var(--data-list-item-name-color, var(--md-sys-color-secondary));
       }
 
       ox-list-field[desc] {
         font: var(--data-list-item-disc-font);
-        color: var(--data-list-item-disc-color);
+        color: var(--data-list-item-disc-color, var(--md-sys-color-tertiary));
       }
     `
   ]

package/src/editors/ox-grist-editor-date.ts

@@ -5,6 +5,6 @@ import { html } from 'lit'
 @customElement('ox-grist-editor-date')
 export class OxGristEditorDate extends OxGristEditor {
   get editorTemplate() {
-    return html` <input type="date" .value=${this.value} /> `
+    return html` <input type="date" .value=${this.value} max="9999-12-31" /> `
   }
 }

package/src/editors/ox-grist-editor-datetime.ts

@@ -22,6 +22,6 @@ export class OxGristEditorDateTime extends OxGristEditor {
   }
 
   get editorTemplate() {
-    return html` <input type="datetime-local" .value=${this.value} /> `
+    return html` <input type="datetime-local" .value=${this.value} max="9999-12-31T23:59" /> `
   }
 }

package/src/renderers/ox-grist-renderer-json5.ts

@@ -11,6 +11,10 @@ function onmouseover(e: Event) {
   } catch {}
 
   element.setAttribute('data-tooltip', JSON5.stringify(parsed, null, 2))
+
+  const rect = element.getBoundingClientRect()
+  element.style.setProperty('--tooltip-top', `${rect.top + rect.height}px`)
+  element.style.setProperty('--tooltip-left', `${rect.left}px`)
 }
 
 function onmouseout(e: Event) {

package/src/renderers/ox-grist-renderer-text.ts

@@ -1,21 +1,9 @@
 import { html } from 'lit'
 
-import { detectOverflow, format as formatter } from '@operato/utils'
+import { format as formatter } from '@operato/utils'
 
 import { FieldRenderer } from '../types'
 
-function onmouseover(e: Event) {
-  const element = e.target as HTMLSpanElement
-  if (detectOverflow(element)) {
-    element.setAttribute('data-tooltip', element.textContent!)
-  }
-}
-
-function onmouseout(e: Event) {
-  const element = e.target as HTMLSpanElement
-  element.removeAttribute('data-tooltip')
-}
-
 export const OxGristRendererText: FieldRenderer = (value, column, record, rowIndex, field) => {
   var { format } = column.record || {}
 
@@ -24,5 +12,5 @@ export const OxGristRendererText: FieldRenderer = (value, column, record, rowInd
     text = formatter(format, text)
   }
 
-  return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}&nbsp;</span>`
+  return html`<span data-reactive-tooltip>${text}&nbsp;</span>`
 }

package/themes/grist-theme.css

@@ -171,3 +171,7 @@ body {
     --data-card-create-form-padding: 7px;
   }
 }
+
+body.dark {
+  --grid-container-border-color: 1px solid rgba(255, 255, 255, 0.09);
+}