@operato/app 2.0.0-beta.12 → 2.0.0-beta.13

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.13",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -134,18 +134,18 @@
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
     "@material/web": "^1.4.0",
-    "@operato/attachment": "^2.0.0-beta.12",
-    "@operato/data-grist": "^2.0.0-beta.12",
-    "@operato/font": "^2.0.0-beta.12",
-    "@operato/form": "^2.0.0-beta.12",
-    "@operato/graphql": "^2.0.0-beta.0",
+    "@operato/attachment": "^2.0.0-beta.13",
+    "@operato/data-grist": "^2.0.0-beta.13",
+    "@operato/font": "^2.0.0-beta.13",
+    "@operato/form": "^2.0.0-beta.13",
+    "@operato/graphql": "^2.0.0-beta.13",
     "@operato/i18n": "^2.0.0-beta.3",
-    "@operato/input": "^2.0.0-beta.12",
-    "@operato/layout": "^2.0.0-beta.12",
-    "@operato/property-editor": "^2.0.0-beta.12",
-    "@operato/shell": "^2.0.0-beta.12",
-    "@operato/styles": "^2.0.0-beta.5",
-    "@operato/utils": "^2.0.0-beta.0",
+    "@operato/input": "^2.0.0-beta.13",
+    "@operato/layout": "^2.0.0-beta.13",
+    "@operato/property-editor": "^2.0.0-beta.13",
+    "@operato/shell": "^2.0.0-beta.13",
+    "@operato/styles": "^2.0.0-beta.13",
+    "@operato/utils": "^2.0.0-beta.13",
     "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
@@ -186,5 +186,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "08cd1f9bacfca1f0559ee61089a26087cc1876ba"
+  "gitHead": "719dcda3f81008118bc3593658f3e68570dd8866"
 }

package/src/grist-editor/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/grist-editor/ox-grist-renderer-resource-code.ts

@@ -4,7 +4,6 @@ import { client, gqlContext } from '@operato/graphql'
 import { customElement } from 'lit/decorators.js'
 
 import { OxGristRenderer } from '@operato/data-grist'
-import { detectOverflow } from '@operato/utils'
 
 type CommonCodeDetail = {
   name: string
@@ -24,18 +23,6 @@ const FETCH_COMMON_CODE_GQL = (codeName: string) => gql`
 }
 `
 
-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')
-}
-
 @customElement('ox-grist-renderer-resource-code')
 export class OxGristRendererResourceCode extends OxGristRenderer {
   static styles = css`
@@ -87,13 +74,13 @@ export class OxGristRendererResourceCode extends OxGristRenderer {
         let code = codes[idx]
 
         if (code.name == this.value) {
-          return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}
+          return html`<span data-reactive-tooltip
             >${code.name == '' ? '' : renderDispOpt.replace('name', code.description).replace('code', code.name)}</span
           > `
         }
       }
     }
 
-    return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${this.value}</span> `
+    return html`<span data-reactive-tooltip>${this.value}</span> `
   }
 }