@operato/input 1.13.11 → 1.13.12

package/src/ox-input-data.ts

@@ -5,7 +5,8 @@
 import './ox-input-code'
 
 import { css, html, PropertyValues } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { customElement, state } 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'
@@ -49,34 +50,43 @@ export class OxInputData extends OxFormField {
   ]
 
   render() {
+    const valueType = typeof this.value
+
     return html`
       <div datatype>
         <input
+          id="string"
           type="radio"
           name="data-type"
           data-value="string"
-          .checked=${typeof this.value == 'string'}
+          .checked=${live(valueType == 'string')}
           @click=${() => this._setDataType('string')}
           ?disabled=${this.disabled}
-        />string
+        />
+        <label for="string">string</label>
 
         <input
+          id="number"
           type="radio"
           name="data-type"
           data-value="number"
-          .checked=${typeof this.value == 'number'}
+          .checked=${live(valueType == 'number')}
           @click=${() => this._setDataType('number')}
           ?disabled=${this.disabled}
-        />number
+        />
+        <label for="number">number</label>
 
         <input
+          id="object"
           type="radio"
           name="data-type"
           data-value="object"
-          .checked=${typeof this.value == 'object'}
+          .checked=${live(valueType == 'object')}
           @click=${() => this._setDataType('object')}
           ?disabled=${this.disabled}
-        />object
+        />
+        <label for="object">object</label>
+
         <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
       </div>
 
@@ -98,12 +108,6 @@ export class OxInputData extends OxFormField {
     })
   }
 
-  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
@@ -111,7 +115,7 @@ export class OxInputData extends OxFormField {
       try {
         switch (type) {
           case 'string':
-            this.value = String(value || '')
+            this.value = this._getData(value)
             break
           case 'number':
             if (!isNaN(value)) {
@@ -127,6 +131,7 @@ export class OxInputData extends OxFormField {
       }
     }
 
+    this.requestUpdate()
     this._onAfterValueChange()
   }
 
@@ -139,7 +144,7 @@ export class OxInputData extends OxFormField {
     return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)
   }
 
-  _onAfterValueChange() {
+  async _onAfterValueChange() {
     this.dispatchEvent(
       new CustomEvent('change', {
         bubbles: true,

package/stories/ox-input-data.stories.ts

@@ -0,0 +1,55 @@
+import '../src/ox-input-data.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-data',
+  component: 'ox-input-data',
+  argTypes: {
+    value: { control: 'text' },
+    name: { control: 'text' },
+    language: { control: 'select', options: ['javascript', 'sql', 'json'] },
+    disabled: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: string | number | object
+  disabled?: boolean
+}
+
+const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+    ox-input-data {
+      height: 300px;
+    }
+  </style>
+
+  <ox-input-data
+    @change=${(e: Event) => {
+      const value = (e.target as HTMLInputElement).value
+      console.log('value : ', value, typeof value)
+    }}
+    name=${name}
+    .value=${value}
+    ?disabled=${disabled}
+  >
+  </ox-input-data>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'data',
+  value: ''
+}