@operato/input 1.13.14 → 1.17.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "1.13.14",
+  "version": "1.17.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -193,7 +193,7 @@
     "@material/mwc-icon": "^0.27.0",
     "@operato/color-picker": "^1.4.64",
     "@operato/i18n": "^1.5.14",
-    "@operato/popup": "^1.13.9",
+    "@operato/popup": "^1.17.2",
     "@operato/styles": "^1.12.3",
     "@operato/utils": "^1.13.9",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -239,5 +239,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "9d335c3383d9f899105fb0cd10fc0f7824da5bfb"
+  "gitHead": "953573e87b156ac2ce143009555fb2ec4f1162ee"
 }

package/src/ox-input-data.ts

@@ -4,12 +4,13 @@
 
 import './ox-input-code'
 
-import { css, html, PropertyValues } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
+import { css, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
 
 import { OxFormField } from './ox-form-field.js'
 import { OxInputCode } from './ox-input-code.js'
+import { isEqual } from 'lodash-es'
 
 /**
 WEB Component for code-mirror based data editor.
@@ -90,7 +91,16 @@ export class OxInputData extends OxFormField {
         <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
       </div>
 
-      <ox-input-code .value=${this._getStringData(this.value)} language="javascript" editor ?disabled=${this.disabled}>
+      <ox-input-code
+        .value=${this._getStringData(this.value)}
+        language="text"
+        editor
+        ?disabled=${this.disabled}
+        @change=${(e: CustomEvent) => {
+          e.stopPropagation()
+          this._setDataTypeAndValue(valueType, (e.target as any).value)
+        }}
+      >
       </ox-input-code>
     `
   }
@@ -109,29 +119,63 @@ export class OxInputData extends OxFormField {
     })
   }
 
+  _setDataTypeAndValue(type: string | undefined | null, value: any) {
+    /* value must be a string */
+    try {
+      switch (type) {
+        case 'number':
+          if (!isNaN(Number(value))) {
+            value = Number(value)
+          }
+          break
+        case 'object':
+          value = eval('(' + value + ')')
+          break
+      }
+    } catch (e) {}
+
+    if (isEqual(this.value, value)) {
+      return
+    }
+
+    this.value = value
+
+    this.requestUpdate()
+    this._onAfterValueChange()
+  }
+
   _setDataType(type: string | undefined | null) {
-    if (typeof this.value !== type) {
-      var value = this.value
-
-      try {
-        switch (type) {
-          case 'string':
-            this.value = this._getStringData(value)
-            break
-          case 'number':
-            if (!isNaN(value)) {
-              this.value = Number(value)
-            }
-            break
-          case 'object':
-            this.value = eval('(' + value + ')')
-            break
-        }
-      } catch (e) {
-        console.log(e)
+    if (typeof this.value == type) {
+      return
+    }
+
+    var value = this.value
+
+    try {
+      switch (type) {
+        case 'string':
+          value = this._getStringData(value)
+          break
+        case 'number':
+          if (!isNaN(value)) {
+            value = Number(value)
+          }
+          break
+        case 'object':
+          value = eval('(' + value + ')')
+          break
       }
+    } catch (e) {
+      console.log(e)
     }
 
+    if (isEqual(this.value, value)) {
+      this.requestUpdate()
+      return
+    }
+
+    this.value = value
+
     this.requestUpdate()
     this._onAfterValueChange()
   }