@operato/input 1.13.12 → 1.14.3

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.12",
+  "version": "1.14.3",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -239,5 +239,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "03ea70d62dbb357a8e7840a8d1b09f0bf5c948f6"
+  "gitHead": "cb8f455eb045bff6ea9123101394e0b0fe013707"
 }

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._getData(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>
     `
   }
@@ -98,39 +108,74 @@ export class OxInputData extends OxFormField {
   firstUpdated() {
     this.renderRoot.addEventListener('change', e => {
       e.stopPropagation()
+
       const target = e.target as OxInputCode
       if (target.hasAttribute('editor')) {
+        if (this.value === undefined && target.value == '') {
+          return
+        }
         this.value = target.value
       }
-
-      const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')
-      this._setDataType(type)
     })
   }
 
+  _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._getData(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()
   }
@@ -140,8 +185,17 @@ export class OxInputData extends OxFormField {
     this._onAfterValueChange()
   }
 
-  _getData(data: any) {
-    return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)
+  _getStringData(data: any) {
+    const type = typeof data
+
+    switch (type) {
+      case 'object':
+        return JSON.stringify(data, null, 1)
+      case 'undefined':
+        return ''
+      default:
+        return String(data) || ''
+    }
   }
 
   async _onAfterValueChange() {