@operato/app 1.0.0-alpha.10 → 1.0.0-alpha.13

package/package.json

@@ -3,7 +3,7 @@
   "description": "WebApplication production supporting components following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.13",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -15,9 +15,11 @@
     "./grist/object-editor.js": "./dist/src/grist/object-editor.js",
     "./grist/code-editor.js": "./dist/src/grist/code-editor.js",
     "./grist/parameters-editor.js": "./dist/src/grist/parameters-editor.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",
     "./input/ox-input-color-gradient.js": "./dist/src/input/ox-input-color-gradient.js",
-    "./input/ox-input-fill-style.js": "./dist/src/input/ox-input-fill-style.js"
+    "./input/ox-input-fill-style.js": "./dist/src/input/ox-input-fill-style.js",
+    "./property-editor/ox-property-editor-graphql.js": "./dist/src/property-editor/ox-property-editor-graphql.js"
   },
   "publishConfig": {
     "access": "public",
@@ -44,16 +46,16 @@
     "@material/mwc-button": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@material/mwc-icon-button": "^0.25.3",
-    "@operato/attachment": "^1.0.0-alpha.10",
-    "@operato/data-grist": "^1.0.0-alpha.10",
-    "@operato/form": "^1.0.0-alpha.10",
-    "@operato/graphql": "^1.0.0-alpha.10",
-    "@operato/i18n": "^1.0.0-alpha.10",
-    "@operato/layout": "^1.0.0-alpha.10",
-    "@operato/property-editor": "^1.0.0-alpha.10",
-    "@operato/shell": "^1.0.0-alpha.10",
-    "@operato/styles": "^1.0.0-alpha.10",
-    "@operato/utils": "^1.0.0-alpha.10",
+    "@operato/attachment": "^1.0.0-alpha.13",
+    "@operato/data-grist": "^1.0.0-alpha.13",
+    "@operato/form": "^1.0.0-alpha.13",
+    "@operato/graphql": "^1.0.0-alpha.13",
+    "@operato/i18n": "^1.0.0-alpha.13",
+    "@operato/layout": "^1.0.0-alpha.13",
+    "@operato/property-editor": "^1.0.0-alpha.13",
+    "@operato/shell": "^1.0.0-alpha.13",
+    "@operato/styles": "^1.0.0-alpha.13",
+    "@operato/utils": "^1.0.0-alpha.13",
     "lit": "^2.2.0"
   },
   "devDependencies": {
@@ -88,5 +90,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "72c4c67217fbc1aa94ae4112c7341028c398eb17"
+  "gitHead": "b0c60655bb787d7fea4ce06797d91c1fa2ab2b69"
 }

package/src/grist/code-editor.ts

@@ -1,9 +1,9 @@
 import '@material/mwc-icon'
-import {} from '@operato/shell'
 
 import { InputEditor, RecordConfig } from '@operato/data-grist'
 import { client, gqlContext } from '@operato/graphql'
 
+import { customElement } from 'lit/decorators.js'
 import gql from 'graphql-tag'
 import { html } from 'lit'
 
@@ -31,6 +31,7 @@ const FETCH_COMMON_CODE_GQL = (codeName: string) => gql`
 }
 `
 
+@customElement('code-editor')
 export class CodeEditor extends InputEditor {
   async firstUpdated() {
     super.firstUpdated()
@@ -74,5 +75,3 @@ export class CodeEditor extends InputEditor {
     `
   }
 }
-
-customElements.define('code-editor', CodeEditor)

package/src/input/ox-input-fill-style.ts

@@ -32,7 +32,7 @@ export type FillStyle =
   | 'no'
   | string
 
-@customElement('ox-input-color-style')
+@customElement('ox-input-fill-style')
 export class OxInputColorStyle extends OxFormField {
   static styles = css`
     :host {

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

@@ -0,0 +1,169 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import 'codemirror/addon/display/fullscreen'
+import 'codemirror/addon/display/autorefresh'
+import 'codemirror/addon/hint/show-hint'
+import 'codemirror/addon/lint/lint'
+import 'codemirror-graphql/hint'
+import 'codemirror-graphql/lint'
+import 'codemirror-graphql/mode'
+
+import { GRAPHQL_URI, client } from '@operato/graphql'
+import { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
+
+import CodeMirror from 'codemirror'
+import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
+import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'
+import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'
+import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
+import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'
+import { fetch } from 'cross-fetch'
+import { print } from 'graphql'
+
+/**
+ WEB Component for code-mirror graphql editor.
+ 
+ Example:
+ 
+   <ox-input-graphql value=${text} link=${link}>
+   </ox-input-graphql>
+ */
+@customElement('ox-input-graphql')
+export default class OxInputGraphql extends LitElement {
+  static styles = [
+    css`
+      ${unsafeCSS(CodeMirrorStyle)}
+      ${unsafeCSS(FullScreenStyle)}
+         ${unsafeCSS(NightThemeStyle)}
+         ${unsafeCSS(LintStyle)}
+         ${unsafeCSS(ShowHintStyle)}
+    `,
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      textarea {
+        display: block;
+        height: 100%;
+        width: 100%;
+        resize: none;
+        font-size: 16px;
+        line-height: 20px;
+        border: 0px;
+        padding: 0px;
+      }
+    `
+  ]
+
+  /**
+   * `value`는 에디터에서 작성중인 contents이다.
+   */
+  @property({ type: String }) value?: string
+  @property({ type: String }) link?: string
+
+  @query('textarea') textarea!: HTMLTextAreaElement
+
+  private _self_changing: boolean = false
+  private _changed: boolean = false
+  private _editor?: CodeMirror.EditorFromTextArea
+
+  async updated(changes: PropertyValues<this>) {
+    if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {
+      if (changes.has('link')) {
+        this._editor = undefined
+      }
+      ;(await this.getEditor())!.setValue(this.value === undefined ? '' : String(this.value))
+      // ;(await this.getEditor()).refresh()
+    }
+  }
+
+  render() {
+    return html` <textarea></textarea> `
+  }
+
+  async getSchema() {
+    const executor = async ({ document, variables }: any) => {
+      const query = print(document)
+      const uri = this.link || GRAPHQL_URI
+
+      const fetchResult = await fetch(uri, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ query, variables })
+      })
+      return fetchResult.json()
+    }
+
+    return await wrapSchema({
+      schema: await introspectSchema(executor),
+      executor
+    })
+  }
+
+  async getEditor() {
+    if (!this._editor) {
+      try {
+        var schema = await this.getSchema()
+      } catch (err) {
+        console.error(err)
+      }
+
+      if (this.textarea) {
+        this._editor = CodeMirror.fromTextArea(this.textarea, {
+          value: this.value,
+          mode: 'graphql',
+          lint: {
+            //@ts-ignore
+            schema
+          },
+          hintOptions: {
+            //@ts-ignore
+            schema
+          },
+          tabSize: 2,
+          lineNumbers: false,
+          showCursorWhenSelecting: true,
+          theme: 'night',
+          extraKeys: {
+            F11: function (cm) {
+              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+            },
+            Esc: function (cm) {
+              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+            }
+          },
+          autoRefresh: {
+            delay: 500
+          }
+        })
+
+        this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {
+          if (!this._changed) return
+
+          this.value = editor.getValue()
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+        })
+
+        this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {
+          this._self_changing = true
+
+          this._changed = true
+
+          await this.requestUpdate()
+
+          this._self_changing = false
+        })
+      }
+    }
+
+    return this._editor
+  }
+}

package/src/property-editor/ox-property-editor-graphql.ts

@@ -0,0 +1,12 @@
+import '../input/ox-input-graphql.js'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+import { customElement } from 'lit/decorators.js'
+import { html } from 'lit'
+
+@customElement('ox-property-editor-graphql')
+export class OxPropertyEditorGraphQL extends OxPropertyEditor {
+  editorTemplate() {
+    return html` <ox-input-graphql id="editor" .value=${this.value} fullwidth> </ox-input-graphql> `
+  }
+}