@operato/app 2.0.0-beta.8 → 7.0.0-rc.0

package/package.json

@@ -2,11 +2,12 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-beta.8",
+  "version": "7.0.0-rc.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
     ".": "./dist/src/index.js",
+    "./package.json": "./package.json",
     "./input.js": "./dist/src/input/index.js",
     "./input/ox-input-graphql.js": "./dist/src/input/ox-input-graphql.js",
     "./input/ox-input-background-pattern.js": "./dist/src/input/ox-input-background-pattern.js",
@@ -102,6 +103,7 @@
     }
   },
   "license": "MIT",
+  "operato": true,
   "publishConfig": {
     "access": "public",
     "@operato:registry": "https://registry.npmjs.org"
@@ -133,19 +135,19 @@
     "@codemirror/view": "^6.22.1",
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
-    "@material/web": "^1.4.0",
-    "@operato/attachment": "^2.0.0-beta.8",
-    "@operato/data-grist": "^2.0.0-beta.8",
-    "@operato/font": "^2.0.0-beta.8",
-    "@operato/form": "^2.0.0-beta.8",
-    "@operato/graphql": "^2.0.0-beta.0",
-    "@operato/i18n": "^2.0.0-beta.3",
-    "@operato/input": "^2.0.0-beta.8",
-    "@operato/layout": "^2.0.0-beta.5",
-    "@operato/property-editor": "^2.0.0-beta.8",
-    "@operato/shell": "^2.0.0-beta.5",
-    "@operato/styles": "^2.0.0-beta.5",
-    "@operato/utils": "^2.0.0-beta.0",
+    "@material/web": "^1.5.0",
+    "@operato/attachment": "^7.0.0-rc.0",
+    "@operato/data-grist": "^7.0.0-rc.0",
+    "@operato/font": "^7.0.0-rc.0",
+    "@operato/form": "^7.0.0-rc.0",
+    "@operato/graphql": "^7.0.0-rc.0",
+    "@operato/i18n": "^7.0.0-rc.0",
+    "@operato/input": "^7.0.0-rc.0",
+    "@operato/layout": "^7.0.0-rc.0",
+    "@operato/property-editor": "^7.0.0-rc.0",
+    "@operato/shell": "^7.0.0-rc.0",
+    "@operato/styles": "^7.0.0-rc.0",
+    "@operato/utils": "^7.0.0-rc.0",
     "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
@@ -186,5 +188,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "19f578277c1240817c46d0eeea6c8e5ed84e8322"
+  "gitHead": "6ea42336e40d8eae2c11a9ebdfc21dd1cbcefca1"
 }

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> `
   }
 }

package/themes/app-theme.css

@@ -15,9 +15,6 @@ body {
   --primary-text-color: #3c3938;
   --secondary-text-color: var(--primary-color);
 
-  --opacity-dark-color: rgba(0, 0, 0, 0.4);
-  --opacity-light-color: rgba(255, 255, 255, 0.8);
-
   /* status color */
   --status-success-color: #35a24a;
   --status-warning-color: #ee8d03;

package/themes/grist-theme.css

@@ -45,11 +45,9 @@ body {
   --grid-record-wide-fontsize: var(--fontsize-small);
   --grid-record-selected-background-color: #f1f8e9;
   --grid-record-selected-color: var(--grid-record-color);
-  --grid-record-focused-background-color: rgba(var(--primary-color-rgb), 0.2);
   --grid-record-focused-border: 1px solid var(--primary-color);
   --grid-record-focused-cell-background-color: rgba(var(--primary-color-rgb), 0.25);
   --grid-record-focused-cell-border: 1px dashed var(--primary-color);
-  --grid-record-focused-color: var(--grid-record-color);
   --grid-record-focused-box-shadow: 0px 2px 0px 0px rgb(0 0 0 / 10%);
   --grid-record-emphasized-background-color: var(--primary-color);
   --grid-record-emphasized-color: var(--theme-white-color);
@@ -154,11 +152,13 @@ body {
     --ox-grist-padding: 0;
   }
 }
+
 @media (min-width: 461px) and (max-width: 700px) {
   body {
     --ox-grist-padding: 0;
   }
 }
+
 @media (min-width: 461px) and (max-width: 1024px) {
   body {
     --data-card-create-form-padding: 7px;