@operato/input 2.0.0-alpha.4 → 2.0.0-alpha.48

package/src/ox-input-mass-fraction.ts

@@ -131,11 +131,16 @@ export class OxInputMassFraction extends OxFormField {
         display: block;
         text-align: center;
       }
+
+      [right-end] {
+        margin-left: auto;
+      }
     `
   ]
 
   @property({ type: Object }) defaultValue: MassFraction = {}
   @property({ type: Object }) value: MassFraction = {}
+  @property({ type: Boolean, attribute: true }) composable: boolean = false
 
   @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
 
@@ -168,14 +173,18 @@ export class OxInputMassFraction extends OxFormField {
                     list="value-template"
                     ?disabled=${this.disabled}
                   />
-                  <button
-                    class="record-action"
-                    @click=${(e: MouseEvent) => this._delete(e)}
-                    tabindex="-1"
-                    ?disabled=${this.disabled}
-                  >
-                    <mwc-icon>remove</mwc-icon>
-                  </button>
+                  ${this.composable
+                    ? html`
+                        <button
+                          class="record-action"
+                          @click=${(e: MouseEvent) => this._delete(e)}
+                          tabindex="-1"
+                          ?disabled=${this.disabled}
+                        >
+                          <mwc-icon>remove</mwc-icon>
+                        </button>
+                      `
+                    : nothing}
                   <button
                     class="record-action"
                     @click=${(e: MouseEvent) => this._up(e)}
@@ -202,36 +211,41 @@ export class OxInputMassFraction extends OxFormField {
         ? nothing
         : html`
             <div data-record-new>
-              <ox-select
-                data-key
-                placeholder="Fluid"
-                .value=${live('')}
-                @change=${(e: Event) => {
-                  e.stopPropagation()
-                }}
-              >
-                <ox-popup-list with-search> ${this.options} </ox-popup-list>
-              </ox-select>
-
-              <input
-                type="number"
-                data-value
-                placeholder="proportion"
-                min="0"
-                max="1"
-                step="0.01"
-                value=""
-                list="value-template"
-              />
-              <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                <mwc-icon>add</mwc-icon>
-              </button>
+              ${this.composable
+                ? html`
+                    <ox-select
+                      data-key
+                      placeholder="Fluid"
+                      .value=${live('')}
+                      @change=${(e: Event) => {
+                        e.stopPropagation()
+                      }}
+                    >
+                      <ox-popup-list with-search> ${this.options} </ox-popup-list>
+                    </ox-select>
+
+                    <input
+                      type="number"
+                      data-value
+                      placeholder="proportion"
+                      min="0"
+                      max="1"
+                      step="0.01"
+                      value=""
+                      list="value-template"
+                    />
+                    <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+                      <mwc-icon>add</mwc-icon>
+                    </button>
+                  `
+                : nothing}
               <button
                 title="fill with the values suggested"
                 @click=${() => {
                   this.value = { ...this.defaultValue }
                   this.dispatchChangeEvent()
                 }}
+                right-end
               >
                 <mwc-icon>settings_suggest</mwc-icon>
               </button>

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

@@ -43,6 +43,10 @@ const Template: Story<ArgTypes> = ({
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
   <style>
+    #root {
+      height: 500px;
+    }
+
     ox-input-barcode {
       font-size: 80px;
       --input-font: initial;

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: ''
+}

package/stories/ox-input-i18n-label.stories.ts

@@ -0,0 +1,73 @@
+import '../src/ox-input-i18n-label.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-i18n-label',
+  component: 'ox-input-i18n-label',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'object' },
+    disabled: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+  disabled?: boolean
+}
+
+const Template: Story<ArgTypes> = ({ name = 'values', 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 {
+    }
+  </style>
+
+  <ox-input-i18n-label
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+    .languages=${[
+      {
+        code: 'ko',
+        display: '한글'
+      },
+      {
+        code: 'en',
+        display: 'English'
+      },
+      {
+        code: 'zh',
+        display: 'Chinese'
+      },
+      {
+        code: 'ja',
+        display: 'Japanese'
+      }
+    ]}
+    ?disabled=${disabled}
+  >
+  </ox-input-i18n-label>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'i18n labels',
+  value: {
+    ko: '한글 코드',
+    en: 'English code',
+    zh: 'Chinese code',
+    ja: 'Japan code'
+  }
+}

package/stories/ox-input-mass-fraction.stories.ts

@@ -9,6 +9,7 @@ export default {
     name: { control: 'text' },
     value: { control: 'object' },
     defaultValue: { control: 'object' },
+    composable: { control: 'boolean' },
     disabled: { control: 'boolean' }
   }
 }
@@ -23,6 +24,7 @@ interface ArgTypes {
   name?: string
   value?: object
   defaultValue?: object
+  composable?: boolean
   disabled?: boolean
 }
 
@@ -30,6 +32,7 @@ const Template: Story<ArgTypes> = ({
   name = 'mass-fraction',
   value = {},
   defaultValue = {},
+  composable = true,
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
@@ -46,6 +49,7 @@ const Template: Story<ArgTypes> = ({
     name=${name}
     .value=${value}
     .defaultValue=${defaultValue}
+    ?composable=${composable}
     ?disabled=${disabled}
   >
   </ox-input-mass-fraction>
@@ -54,7 +58,12 @@ const Template: Story<ArgTypes> = ({
 export const Regular = Template.bind({})
 Regular.args = {
   name: 'mass-fraction',
-  value: {},
+  value: {
+    H2O: 0.8,
+    N2O: 0.1,
+    CO2: 0.1
+  },
+  composable: true,
   defaultValue: {
     H2O: 0.8,
     N2O: 0.1,