@operato/input 0.2.47 → 0.2.51

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent property-editor following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh@hatiolab.com",
-  "version": "0.2.47",
+  "version": "0.2.51",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "publishConfig": {
@@ -32,8 +32,10 @@
   },
   "dependencies": {
     "@material/mwc-icon": "^0.25.3",
-    "@operato/popup": "^0.2.47",
+    "@operato/popup": "^0.2.51",
+    "@operato/styles": "^0.2.51",
     "@zxing/library": "^0.18.6",
+    "codemirror": "^5.64.0",
     "lit": "^2.0.2"
   },
   "devDependencies": {
@@ -41,6 +43,7 @@
     "@hatiolab/prettier-config": "^1.0.0",
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "next",
+    "@types/codemirror": "^5.60.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.25",
@@ -68,5 +71,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "4595e7f0f52d9fc0b97adc9cbbdb0a07f8c0ae00"
+  "gitHead": "420032cc01a0a3aa1a2e057d9c0a91451edd3f14"
 }

package/src/index.ts

@@ -6,3 +6,4 @@ export * from './ox-input-barcode'
 export * from './ox-buttons-radio'
 export * from './ox-checkbox'
 export * from './ox-select'
+export * from './ox-input-code'

package/src/ox-input-code.ts

@@ -0,0 +1,145 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/python/python'
+import 'codemirror/addon/display/fullscreen'
+import 'codemirror/addon/display/autorefresh'
+
+import { PropertyValues, css, html, unsafeCSS } from 'lit'
+import { customElement, property } from 'lit/decorators'
+
+import CodeMirror from 'codemirror'
+import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
+import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'
+import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
+import { OxFormField } from './ox-formfield'
+import { ScrollbarStyles } from '@operato/styles'
+
+/**
+WEB Component for code-mirror code editor.
+
+Example:
+
+  <things-editor-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
+  </things-editor-code>
+*/
+@customElement('ox-input-code')
+export default class OxInputCode extends OxFormField {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      ${unsafeCSS(CodeMirrorStyle)}
+      ${unsafeCSS(FullScreenStyle)}
+        ${unsafeCSS(NightThemeStyle)}
+    `,
+    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 }) mode?: string
+  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2
+  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true
+
+  private _outside_changing: boolean = false
+  private _self_changing: boolean = false
+  private _editor: CodeMirror.EditorFromTextArea | null | undefined = null
+  private _changed: boolean = false
+
+  // private lint: any
+  // private hintOptions: any
+
+  updated(changes: PropertyValues<this>) {
+    this._outside_changing = true
+    if (changes.has('value') && this.editor && !this._self_changing) {
+      this.editor?.setValue(this.value === undefined ? '' : String(this.value))
+      this.editor?.refresh()
+    }
+    this._outside_changing = false
+  }
+
+  render() {
+    return html` <textarea></textarea> `
+  }
+
+  get editor() {
+    if (!this._editor) {
+      let textarea = this.renderRoot.querySelector('textarea')
+      let mode = this.mode || 'javascript'
+      let tabSize = Number(this.tabSize) || 2
+      let indentUnit = tabSize
+      // let lint = this.lint
+      // let hintOptions = this.hintOptions
+      let tabAsSpace = this.tabAsSpace
+
+      if (textarea) {
+        this._editor = CodeMirror.fromTextArea(textarea, {
+          value: this.value,
+          mode,
+          // lint,
+          // hintOptions,
+          tabSize,
+          indentUnit,
+          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'))
+            },
+            // https://github.com/codemirror/CodeMirror/issues/988#issuecomment-37095621
+            Tab: tabAsSpace
+              ? function (cm: CodeMirror.Editor) {
+                  cm.replaceSelection(Array(cm.getOption('tabSize')).join(' '))
+                }
+              : false
+          },
+          autoRefresh: {
+            delay: 500
+          }
+        })
+
+        this._editor.on('blur', e => {
+          if (!this._changed) return
+
+          this.value = e.getValue()
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+        })
+
+        this._editor.on('change', async e => {
+          this._self_changing = true
+
+          this._changed = true
+
+          await this.updateComplete
+          this._self_changing = false
+        })
+      }
+    }
+
+    return this._editor
+  }
+}

package/src/ox-input-data.ts

@@ -0,0 +1,151 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-input-code'
+
+import { PropertyValues, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators'
+
+import { OxFormField } from './ox-formfield'
+import OxInputCode from './ox-input-code'
+
+/**
+WEB Component for code-mirror based data editor.
+
+Example:
+
+  <ox-input-data value=${text}>
+  </ox-input-data>
+*/
+@customElement('ox-input-data')
+export default class OxInputData extends OxFormField {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      }
+
+      div[datatype] {
+        display: flex;
+        align-items: center;
+        padding: 2px;
+        background-color: rgba(0, 0, 0, 0.08);
+        font-size: small;
+      }
+
+      div[datatype] mwc-icon {
+        margin-left: auto;
+      }
+
+      ox-input-code {
+        flex: 1;
+        max-width: 260px;
+        overflow: auto;
+      }
+    `
+  ]
+
+  /**
+   * `value`는 에디터에서 작성중인 contents이다.
+   */
+  @property({ type: Object }) value: any
+
+  render() {
+    return html`
+      <div datatype>
+        <input
+          type="radio"
+          name="data-type"
+          data-value="string"
+          .checked=${typeof this.value == 'string'}
+          @click=${() => this._setDataType('string')}
+        />string
+
+        <input
+          type="radio"
+          name="data-type"
+          data-value="number"
+          .checked=${typeof this.value == 'number'}
+          @click=${() => this._setDataType('number')}
+        />number
+
+        <input
+          type="radio"
+          name="data-type"
+          data-value="object"
+          .checked=${typeof this.value == 'object'}
+          @click=${() => this._setDataType('object')}
+        />object
+        <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
+      </div>
+
+      <ox-input-code .value=${this._getData(this.value)} editor> </ox-input-code>
+    `
+  }
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', e => {
+      e.stopPropagation()
+      const target = e.target as OxInputCode
+      if (target.hasAttribute('editor')) {
+        this.value = target.value
+      }
+
+      const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')
+      this._setDataType(type)
+    })
+  }
+
+  udpated(changes: PropertyValues<this>) {
+    if (changes.has('value')) {
+      this.value = this._getData(this.value)
+    }
+  }
+
+  _setDataType(type: string | undefined | null) {
+    if (typeof this.value !== type) {
+      var value = this.value
+
+      try {
+        switch (type) {
+          case 'string':
+            this.value = String(value || '')
+            break
+          case 'number':
+            if (!isNaN(value)) {
+              this.value = Number(value)
+            }
+            break
+          case 'object':
+            this.value = eval('(' + value + ')')
+            break
+        }
+      } catch (e) {
+        console.log(e)
+      }
+    }
+
+    this._onAfterValueChange()
+  }
+
+  _clearData() {
+    this.value = undefined
+    this._onAfterValueChange()
+  }
+
+  _getData(data: any) {
+    return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)
+  }
+
+  _onAfterValueChange() {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+}

package/tsconfig.json

@@ -16,7 +16,7 @@
     "rootDir": "./",
     "declaration": true,
     "incremental": true,
-    "types": ["node", "mocha", "three"]
+    "types": ["node", "mocha"]
   },
   "include": ["**/*.ts"]
 }