@operato/grist-editor 2.0.0-beta.3 → 2.0.0-beta.31

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@operato/grist-editor",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.31",
   "description": "Webcomponent for grist-editor following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
+  "operato": true,
   "publishConfig": {
     "access": "public",
     "@operato:registry": "https://registry.npmjs.org"
@@ -17,6 +18,7 @@
   },
   "exports": {
     ".": "./dist/src/index.js",
+    "./package.json": "./package.json",
     "./ox-grist-editor-crontab.js": "./dist/src/ox-grist-editor-crontab.js",
     "./ox-grist-editor-duration.js": "./dist/src/ox-grist-editor-duration.js",
     "./ox-grist-editor-hashtags.js": "./dist/src/ox-grist-editor-hashtags.js",
@@ -95,14 +97,14 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@material/web": "^1.4.0",
-    "@operato/data-grist": "^2.0.0-beta.3",
-    "@operato/help": "^2.0.0-beta.3",
-    "@operato/i18n": "^2.0.0-beta.3",
-    "@operato/input": "^2.0.0-beta.3",
-    "@operato/popup": "^2.0.0-beta.0",
-    "@operato/property-editor": "^2.0.0-beta.3",
-    "@operato/styles": "^2.0.0-beta.0",
+    "@material/web": "^1.5.0",
+    "@operato/data-grist": "^2.0.0-beta.31",
+    "@operato/help": "^2.0.0-beta.31",
+    "@operato/i18n": "^2.0.0-beta.26",
+    "@operato/input": "^2.0.0-beta.31",
+    "@operato/popup": "^2.0.0-beta.31",
+    "@operato/property-editor": "^2.0.0-beta.31",
+    "@operato/styles": "^2.0.0-beta.23",
     "cronstrue": "^2.2.0",
     "cross-fetch": "^3.1.5",
     "lit": "^3.1.2",
@@ -142,5 +144,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f784d266745412a10887dd5163da8c8d7a4fe423"
+  "gitHead": "beb2772f3deb798c8b875a4dc0967fb47ca5390a"
 }

package/src/ox-grist-renderer-crontab.ts

@@ -3,19 +3,6 @@ import i18next from 'i18next'
 import { html } from 'lit'
 
 import { FieldRenderer } from '@operato/data-grist'
-import { detectOverflow } from '@operato/utils'
-
-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 OxGristRendererCrontab: FieldRenderer = (value, column, record, rowIndex, field) => {
   let text = ''
@@ -27,5 +14,5 @@ export const OxGristRendererCrontab: FieldRenderer = (value, column, record, row
     console.error(e)
   }
 
-  return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`
+  return html`<span data-reactive-tooltip>${text}</span>`
 }

package/src/ox-grist-renderer-duration.ts

@@ -2,19 +2,6 @@ import i18next from 'i18next'
 import { html } from 'lit'
 
 import { FieldRenderer } from '@operato/data-grist'
-import { detectOverflow } from '@operato/utils'
-
-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 OxGristRendererDuration: FieldRenderer = (value, column, record, rowIndex, field) => {
   var text = ''
@@ -40,5 +27,5 @@ export const OxGristRendererDuration: FieldRenderer = (value, column, record, ro
     console.error(e)
   }
 
-  return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`
+  return html`<span data-reactive-tooltip>${text}</span>`
 }

package/src/ox-grist-renderer-partition-keys.ts

@@ -6,6 +6,10 @@ function onmouseover(e: MouseEvent, value: any[]) {
   const element = e.target as HTMLPreElement
   const tooltip = value.map(key => key.name).join(',')
   element.setAttribute('data-tooltip', tooltip)
+
+  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: MouseEvent) {

package/stories/ox-grist-editor-crontab.stories.ts

@@ -411,7 +411,7 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
       margin-left: auto;
       margin-right: var(--spacing-medium);
       padding-left: var(--padding-narrow);
-      border-bottom: var(--border-dark-color);
+      border-bottom: var(--border-dim-color);
       position: relative;
       color: var(--md-sys-color-on-secondary-container);
       font-size: var(--fontsize-default);

package/themes/app-theme.css

@@ -26,7 +26,7 @@ body {
 
   /* common style */
   --border-radius: 4px;
-  --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);
+  --border-dim-color: 1px solid rgba(0, 0, 0, 0.15);
   --border-light-color: 1px solid rgba(255, 255, 255, 0.3);
 
   --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
@@ -85,7 +85,7 @@ body {
   /* button style */
   --button-background-color: #fafbfc;
   --button-background-focus-color: var(--primary-color);
-  --button-border: var(--border-dark-color);
+  --button-border: var(--border-dim-color);
   --button-border-radius: var(--border-radius);
   --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
   --button-padding: var(--padding-default);
@@ -143,3 +143,7 @@ body {
     --subtitle-margin: 0;
   }
 }
+
+body.dark {
+  --border-dim-color: 1px solid rgba(255, 255, 255, 0.15);
+}

package/themes/grist-theme.css

@@ -92,7 +92,7 @@ body {
 
   --data-card-background-color: var(--main-section-background-color);
   --data-card-record-card-background-color: var(--theme-white-color);
-  --data-card-record-card-border: var(--border-dark-color);
+  --data-card-record-card-border: var(--border-dim-color);
   --data-card-record-card-border-hover: 1px solid var(--primary-color);
   --data-card-record-card-boxshadow-hover: 1px 1px 2px 1px rgba(0, 0, 0, 0.15);
   --data-card-record-card-selected-border: 1px solid var(--primary-color);
@@ -111,7 +111,7 @@ body {
   --data-card-item-etc-color: var(--secondary-color);
   --data-card-item-icon-font: normal 1em/1em;
   --data-card-item-icon-color: var(--secondary-text-color);
-  --data-card-item-btn-border: var(--border-dark-color);
+  --data-card-item-btn-border: var(--border-dim-color);
   --data-card-item-btn-border-radius: var(--border-radius);
   --data-card-item-btn-padding: var(--padding-narrow);
   --data-card-selected-background-color: var(--grid-record-selected-background-color);
@@ -120,7 +120,7 @@ body {
   --data-card-fab-color: var(--primary-color);
   --data-card-fab-shadow: var(--box-shadow);
   --data-card-thumbnail-height: 140px;
-  --data-card-thumbnail-border-bottom: var(--border-dark-color);
+  --data-card-thumbnail-border-bottom: var(--border-dim-color);
   --data-card-attachimg-height: 70px;
 
   --record-view-background-color: var(--main-section-background-color);
@@ -164,3 +164,7 @@ body {
     --data-card-create-form-padding: 7px;
   }
 }
+
+body.dark {
+  --grid-container-border-color: 1px solid rgba(255, 255, 255, 0.09);
+}