@operato/input 1.18.0 → 1.19.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "1.18.0",
+  "version": "1.19.6",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -197,9 +197,9 @@
     "@material/mwc-icon": "^0.27.0",
     "@operato/color-picker": "^1.17.9",
     "@operato/i18n": "^1.17.9",
-    "@operato/popup": "^1.18.0",
+    "@operato/popup": "^1.19.0",
     "@operato/styles": "^1.18.0",
-    "@operato/utils": "^1.17.9",
+    "@operato/utils": "^1.19.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -243,5 +243,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ab399d63caef33a3e72fb04f8ba2ea674c60161d"
+  "gitHead": "946e88721fb0d13bd75ca2723815a7f898313af2"
 }

package/src/ox-input-code.ts

@@ -5,6 +5,7 @@
 import { css, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { minimalSetup } from 'codemirror'
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
@@ -39,6 +40,8 @@ export class OxInputCode extends OxFormField {
         position: relative;
         background: white;
         overflow: auto;
+        border:1px solid var(--md-sys-color-outline, #111);
+        border-radius:var(--md-sys-shape-corner-small, 4px);
       }
 
       .cm-editor {
@@ -51,8 +54,7 @@ export class OxInputCode extends OxFormField {
    * `value`는 에디터에서 작성중인 contents이다.
    */
   @property({ type: String }) value: string = ''
-  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2
-  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true
+  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false
   @property({ type: String }) language?: string = 'javascript'
 
   private _self_changing: boolean = false
@@ -88,6 +90,7 @@ export class OxInputCode extends OxFormField {
       this._editor = new EditorView({
         doc: this.value,
         extensions: [
+          minimalSetup,
           ...language,
           bracketMatching(),
           closeBrackets(),
@@ -129,15 +132,6 @@ export class OxInputCode extends OxFormField {
       this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
     })
 
-    // this._editor.contentDOM.addEventListener('change', async e => {
-    //   this._self_changing = true
-    //   this._changed = true
-
-    //   await this.updateComplete
-
-    //   this._self_changing = false
-    // })
-
     return this._editor
   }
 }