@operato/input 2.0.0-alpha.2 → 2.0.0-alpha.28

package/src/ox-input-unit-number.ts

@@ -2,6 +2,8 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
+import '@material/mwc-icon'
+
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -169,7 +171,7 @@ const UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number | ((v: number) =>
 }
 
 @customElement('ox-input-unit-number')
-export class OxInputUnit extends OxFormField {
+export class OxInputUnitNumber extends OxFormField {
   static styles = [
     css`
       :host {
@@ -205,13 +207,25 @@ export class OxInputUnit extends OxFormField {
       }
 
       #unit {
-        display: inline;
+        flex: 1;
+        display: flex;
+        align-items: center;
         position: relative;
         margin-left: var(--margin-narrow);
         font: var(--label-font);
         color: var(--label-color);
         min-width: 24px;
       }
+
+      mwc-icon {
+        font-size: 18px;
+        color: var(--primary-color, #3c3938);
+        margin-left: auto;
+      }
+
+      ox-popup-list {
+        right: 0;
+      }
     `
   ]
 
@@ -258,6 +272,7 @@ export class OxInputUnit extends OxFormField {
           <div option value=${this.stdUnit}>${this.stdUnit}</div>
           ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}
         </ox-popup-list>
+        <mwc-icon>expand_more</mwc-icon>
       </div>
     `
   }

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-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,

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

@@ -68,6 +68,7 @@ const Template: Story<ArgTypes> = ({
   userUnit,
   disabled
 }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <ox-input-unit-number
     name=${name}