@operato/app 1.11.2 → 1.11.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.11.2",
+  "version": "1.11.5",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -136,15 +136,15 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^1.11.2",
-    "@operato/data-grist": "^1.11.2",
-    "@operato/font": "^1.11.2",
-    "@operato/form": "^1.5.44",
+    "@operato/attachment": "^1.11.5",
+    "@operato/data-grist": "^1.11.5",
+    "@operato/font": "^1.11.5",
+    "@operato/form": "^1.11.3",
     "@operato/graphql": "^1.4.76",
     "@operato/i18n": "^1.5.14",
-    "@operato/input": "^1.7.4",
-    "@operato/layout": "^1.9.0",
-    "@operato/property-editor": "^1.11.2",
+    "@operato/input": "^1.11.5",
+    "@operato/layout": "^1.11.3",
+    "@operato/property-editor": "^1.11.5",
     "@operato/shell": "^1.9.0",
     "@operato/styles": "^1.7.3",
     "@operato/utils": "^1.5.44",
@@ -189,5 +189,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "759acb9c2d51cd4c114ae57e4eccb7e865d8e559"
+  "gitHead": "e4aef6eb764b0960cdd96e0447c2cddab4f41021"
 }

package/src/input/ox-input-graphql.ts

@@ -53,6 +53,7 @@ export default class OxInputGraphql extends OxFormField {
 
   private _self_changing: boolean = false
   private _editor?: EditorView
+  private _changed: boolean = false
 
   async updated(changes: PropertyValues<this>) {
     const editor = await this.getEditor()
@@ -113,25 +114,15 @@ export default class OxInputGraphql extends OxFormField {
           }),
           highlightActiveLine(),
           history(),
-          keymap.of([
-            ...historyKeymap,
-            indentWithTab,
-            {
-              key: 'Escape',
-              run: (view: EditorView) => {
-                togglefullscreen(this)
-                return true
-              }
-            }
-          ]),
-          EditorView.updateListener.of(v => {
+          keymap.of([...historyKeymap, indentWithTab]),
+          EditorView.updateListener.of(async v => {
             if (v.docChanged) {
               this._self_changing = true
-              this.value = v.state.doc.toString()
-              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-              requestAnimationFrame(() => {
-                this._self_changing = false
-              })
+              this._changed = true
+
+              await this.updateComplete
+
+              this._self_changing = false
             }
           })
         ],
@@ -139,6 +130,23 @@ export default class OxInputGraphql extends OxFormField {
       })
     }
 
+    this._editor.contentDOM.addEventListener('keydown', event => {
+      event.stopPropagation()
+
+      if (event.key === 'Escape') {
+        togglefullscreen(this._editor!.contentDOM)
+      }
+    })
+
+    this._editor.contentDOM.addEventListener('blur', e => {
+      if (!this._changed) {
+        return
+      }
+
+      this.value = this._editor!.state.doc.toString()
+      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+    })
+
     return this._editor
   }
 }

package/themes/app-theme.css

@@ -102,7 +102,7 @@ body {
   --button-primary-font: bold 16px var(--theme-font);
 
   /* table style */
-  --th-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+  --th-padding: var(--padding-default);
   --th-border-top: 2px solid var(--secondary-color);
   --th-text-transform: capitalize;
   --th-font: bold var(--fontsize-small) var(--theme-font);
@@ -111,11 +111,14 @@ body {
   --tr-background-color: var(--theme-white-color);
   --tr-background-odd-color: rgba(255, 255, 255, 0.4);
   --tr-background-hover-color: #e1f5fe;
+  --td-border-line: 1px solid rgba(0, 0, 0, 0.05);
   --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
   --td-padding: var(--padding-default);
   --td-font: normal 13px var(--theme-font);
   --td-color: var(--secondary-color);
 
+  --label-cell-background-color: #f6f6f6; /* th or td common background color */
+
   /* form style */
   --label-font: normal var(--fontsize-default) var(--theme-font);
   --label-color: var(--secondary-color);