@operato/input 1.1.30 → 1.1.34

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

@@ -154,6 +154,7 @@ const UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number | ((v: number) =>
     'm2 oC/kW': 1000
   },
   '%': {},
+  'ppm (11%, O2 corrected)': {},
   K: {
     C: [(v: number) => v - 273.15, (v: number) => v + 273.15]
   }
@@ -249,9 +250,9 @@ export class OxInputUnit extends OxFormField {
   }
 
   updated(changes: PropertyValues<this>) {
-    if (changes.has('stdUnit')) {
-      this.userUnit = this.stdUnit
-    }
+    // if (changes.has('stdUnit')) {
+    //   this.userUnit = this.userUnit || this.stdUnit
+    // }
   }
 
   _onChangeValue(e: Event) {
@@ -277,6 +278,11 @@ export class OxInputUnit extends OxFormField {
 
     const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]
 
+    if (!converterValue) {
+      delete this.userUnit
+      return
+    }
+
     if (typeof converterValue === 'number') {
       return this._toUserUnitByRate(stdValue, converterValue || 1)
     } /* should be converter function array */ else {

package/src/ox-input-work-shift.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './ox-input-color'
-
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
@@ -138,14 +136,14 @@ export class OxInputWorkShift extends OxFormField {
           <div data-record>
             <input type="text" data-name .value=${item.name} required />
 
-            <select data-from-date .value=${item.fromDate || 0}>
+            <select data-from-date .value=${String(item.fromDate || 0)}>
               <option value="-1">${msg('The day before')}</option>
               <option value="0">${msg('The day')}</option>
               <option value="1">${msg('The day after')}</option>
             </select>
             <input type="time" data-from-time .value=${item.fromTime} step="1800" required />
 
-            <select data-to-date .value=${item.toDate || 0}>
+            <select data-to-date .value=${String(item.toDate || 0)}>
               <option value="-1">${msg('The day before')}</option>
               <option value="0">${msg('The day')}</option>
               <option value="1">${msg('The day after')}</option>

package/stories/ox-input-select-buttons.stories.ts

@@ -0,0 +1,80 @@
+import '../src/ox-input-select-buttons.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-select-buttons',
+  component: 'ox-input-select-buttons',
+  argTypes: {
+    value: { control: 'object' },
+    options: { control: 'object' },
+    multiple: { control: 'boolean' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object | string
+  options: object
+  multiple?: boolean
+}
+
+const Template: Story<ArgTypes> = ({ name = 'options', value, multiple = false, options = [] }: 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>
+    ox-input-select-buttons {
+      max-width: 400px;
+    }
+  </style>
+
+  <ox-input-select-buttons
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+    .options=${options}
+    ?multiple=${multiple}
+  >
+  </ox-input-select-buttons>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'options',
+  value: 'Clothes',
+  options: [
+    { display: 'SHOOSE', value: 'Shoose' },
+    { display: 'CHOTHES', value: 'Clothes' },
+    { display: 'GLOVES', value: 'Gloves' }
+  ]
+}
+
+export const Multiple = Template.bind({})
+Multiple.args = {
+  name: 'options',
+  value: ['Clothes'],
+  multiple: true,
+  options: [
+    { display: 'SHOOSE1', value: 'Shoose1' },
+    { display: 'CHOTHES1', value: 'Clothes1' },
+    { display: 'GLOVES1', value: 'Gloves1' },
+    { display: 'SHOOSE2', value: 'Shoose2' },
+    { display: 'CHOTHES2', value: 'Clothes2' },
+    { display: 'GLOVES2', value: 'Gloves2' },
+    { display: 'SHOOSE3', value: 'Shoose3' },
+    { display: 'CHOTHES3', value: 'Clothes3' },
+    { display: 'GLOVES3', value: 'Gloves3' },
+    { display: 'SHOOSE4', value: 'Shoose4' },
+    { display: 'CHOTHES4', value: 'Clothes4' },
+    { display: 'GLOVES4', value: 'Gloves4' }
+  ]
+}

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

@@ -55,13 +55,15 @@ interface ArgTypes {
   name?: string
   value?: number
   stdUnit: string
+  userUnit: string
 }
 
 const Template: Story<ArgTypes> = ({
   placeholder = 'unit',
   name = 'hello',
   value = 0,
-  stdUnit = 'kg'
+  stdUnit = 'kg',
+  userUnit
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <ox-input-unit-number
@@ -69,6 +71,7 @@ const Template: Story<ArgTypes> = ({
     placeholder=${placeholder}
     .value=${value}
     std-unit=${stdUnit}
+    user-unit=${userUnit}
     @change=${(e: CustomEvent) => console.log(e.detail)}
   >
   </ox-input-unit-number>
@@ -95,7 +98,8 @@ Temperature.args = {
   placeholder: 'temperature',
   name: 'temperature',
   value: 0,
-  stdUnit: 'K'
+  stdUnit: 'K',
+  userUnit: 'C'
 }
 
 export const Percentage = Template.bind({})