@operato/app 2.0.0-beta.3 → 2.0.0-beta.30

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.3",
+  "version": "2.0.0-beta.30",
   "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.3",
-    "@operato/data-grist": "^2.0.0-beta.3",
-    "@operato/font": "^2.0.0-beta.3",
-    "@operato/form": "^2.0.0-beta.3",
-    "@operato/graphql": "^2.0.0-beta.0",
-    "@operato/i18n": "^2.0.0-beta.3",
-    "@operato/input": "^2.0.0-beta.3",
-    "@operato/layout": "^2.0.0-beta.2",
-    "@operato/property-editor": "^2.0.0-beta.3",
-    "@operato/shell": "^2.0.0-beta.2",
-    "@operato/styles": "^2.0.0-beta.0",
-    "@operato/utils": "^2.0.0-beta.0",
+    "@material/web": "^1.5.0",
+    "@operato/attachment": "^2.0.0-beta.30",
+    "@operato/data-grist": "^2.0.0-beta.30",
+    "@operato/font": "^2.0.0-beta.30",
+    "@operato/form": "^2.0.0-beta.30",
+    "@operato/graphql": "^2.0.0-beta.23",
+    "@operato/i18n": "^2.0.0-beta.26",
+    "@operato/input": "^2.0.0-beta.30",
+    "@operato/layout": "^2.0.0-beta.30",
+    "@operato/property-editor": "^2.0.0-beta.30",
+    "@operato/shell": "^2.0.0-beta.30",
+    "@operato/styles": "^2.0.0-beta.23",
+    "@operato/utils": "^2.0.0-beta.23",
     "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
@@ -186,5 +188,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f784d266745412a10887dd5163da8c8d7a4fe423"
+  "gitHead": "b45f30f4c78bc715f5c5581cf97505b3b6372964"
 }

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

@@ -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);
@@ -95,7 +95,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);
@@ -152,3 +152,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);
+}