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

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}