@operato/input 1.0.0-beta.4 → 1.0.0-beta.40

package/src/ox-select.ts

@@ -5,14 +5,15 @@
 import '@material/mwc-icon'
 import '@operato/popup/ox-popup-list.js'
 
-import { PropertyValues, css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 
-import { OxFormField } from './ox-form-field.js'
 import { OxPopupList } from '@operato/popup'
 import { TooltipStyles } from '@operato/styles'
 import { detectOverflow } from '@operato/utils'
 
+import { OxFormField } from './ox-form-field.js'
+
 function onmouseover(e: Event) {
   const element = e.target as HTMLSpanElement
   if (detectOverflow(element)) {
@@ -33,6 +34,7 @@ export class Select extends OxFormField {
       :host {
         display: block;
         position: relative;
+        border-bottom: var(--border-dark-color);
       }
 
       div {
@@ -41,6 +43,10 @@ export class Select extends OxFormField {
         align-items: center;
         justify-content: center;
         cursor: pointer;
+        padding: var(--input-padding);
+        font: var(--input-font);
+        color: var(--primary-text-color);
+        max-height: 17px;
       }
 
       span {
@@ -58,6 +64,9 @@ export class Select extends OxFormField {
         color: var(--theme-primary-text-color, #3c3938);
         opacity: 0.7;
       }
+      div:hover mwc-icon {
+        color: var(--primary-color);
+      }
 
       ::slotted(ox-popup-list) {
         width: 100%;

package/stories/ox-checkbox.stories.ts

@@ -0,0 +1,69 @@
+import '../src/ox-checkbox.js'
+
+import { TemplateResult, html } from 'lit'
+
+export default {
+  title: 'ox-checkbox',
+  component: 'ox-checkbox',
+  argTypes: {
+    label: { control: 'text' },
+    name: { control: 'text' },
+    value: { control: 'boolean' },
+    indeterminatable: { control: 'boolean' },
+    indeterminate: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+  name?: string
+  value?: boolean
+  indeterminatable?: boolean
+  indeterminate?: boolean
+}
+
+const Template: Story<ArgTypes> = ({
+  label = 'Checkbox',
+  name = 'hello',
+  value = true,
+  indeterminatable = false,
+  indeterminate = false
+}: ArgTypes) => html`
+  <ox-checkbox
+    @click=${(e: MouseEvent) => console.log('clicked')}
+    name=${name}
+    .checked=${value}
+    ?indeterminatable=${indeterminatable}
+    ?indeterminate=${indeterminate}
+  >
+    ${label}
+  </ox-checkbox>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'label',
+  name: 'label',
+  value: false
+}
+
+export const CustomActivated = Template.bind({})
+CustomActivated.args = {
+  label: 'Activated',
+  name: 'activated',
+  indeterminate: false,
+  value: true
+}
+
+export const CustomIndeterminated = Template.bind({})
+CustomIndeterminated.args = {
+  label: 'Indeterminated',
+  indeterminate: true,
+  value: true
+}

package/stories/ox-input-3dish.stories.ts

@@ -0,0 +1,73 @@
+import '../src/ox-input-3dish.js'
+import '../src/locale/locale-picker.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-3dish',
+  component: 'ox-input-3dish',
+  argTypes: {
+    value: { control: 'object' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+}
+
+const Template: Story<ArgTypes> = ({ name = '3dish', value = [] }: 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>
+
+  <locale-picker></locale-picker>
+  <br /><br />
+
+  <ox-input-3dish
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-3dish>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: '3dish',
+  value: [
+    {
+      name: 'DAY',
+      fromDate: -1,
+      fromTime: '22:00',
+      toDate: 0,
+      toTime: '06:00'
+    },
+    {
+      name: 'SWING',
+      fromDate: 0,
+      fromTime: '06:00',
+      toDate: 0,
+      toTime: '14:00'
+    },
+    {
+      name: 'NIGHT',
+      fromDate: 0,
+      fromTime: '14:00',
+      toDate: 0,
+      toTime: '22:00'
+    }
+  ]
+}

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

@@ -0,0 +1,78 @@
+import '../src/ox-input-barcode.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-barcode',
+  component: 'ox-input-barcode',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'text' },
+    scannable: { control: 'boolean' },
+    withoutEnter: { control: 'boolean' },
+    englishOnly: { control: 'boolean' },
+    selectAfterChange: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: string
+  scannable?: boolean
+  withoutEnter?: boolean
+  englishOnly?: boolean
+  selectAfterChange?: boolean
+}
+
+const Template: Story<ArgTypes> = ({
+  name = 'barcode',
+  scannable = true,
+  withoutEnter = true,
+  englishOnly = false,
+  selectAfterChange = false
+}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <ox-input-barcode
+    name=${name}
+    ?without-enter=${withoutEnter}
+    ?scannable=${scannable}
+    ?english-only=${englishOnly}
+    ?select-after-change=${selectAfterChange}
+    @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}
+  >
+  </ox-input-barcode>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'barcode',
+  scannable: true,
+  withoutEnter: true,
+  englishOnly: false,
+  selectAfterChange: false
+}
+
+export const EnglishOnly = Template.bind({})
+EnglishOnly.args = {
+  name: 'barcode',
+  scannable: true,
+  withoutEnter: true,
+  englishOnly: true,
+  selectAfterChange: false
+}
+
+export const selectAfterChange = Template.bind({})
+selectAfterChange.args = {
+  name: 'barcode',
+  scannable: true,
+  withoutEnter: true,
+  englishOnly: true,
+  selectAfterChange: true
+}

package/stories/ox-input-code.stories.ts_

@@ -0,0 +1,51 @@
+import '../src/ox-input-code.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-code',
+  component: 'ox-input-code',
+  argTypes: {
+    value: { control: 'object' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+}
+
+const Template: Story<ArgTypes> = ({ name = 'code', value = {} }: 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-code
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-code>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'code',
+  value: {
+    A: 'A',
+    B: 'B',
+    C: 'C'
+  }
+}

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

@@ -0,0 +1,49 @@
+import '../src/ox-input-crontab.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-crontab',
+  component: 'ox-input-crontab',
+  argTypes: {
+    value: { control: 'text' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: string
+}
+
+const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *' }: 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>
+
+  <br /><br />
+
+  <ox-input-crontab
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-crontab>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'crontab',
+  value: '* * * * * *'
+}

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

@@ -0,0 +1,51 @@
+import '../src/ox-input-duration.js'
+import '../src/locale/locale-picker.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-duration',
+  component: 'ox-input-duration',
+  argTypes: {
+    value: { control: 'number' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: number
+}
+
+const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601 }: 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>
+
+  <locale-picker></locale-picker>
+  <br /><br />
+
+  <ox-input-duration
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-duration>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'duration',
+  value: 3601
+}

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

@@ -0,0 +1,77 @@
+import '../src/ox-input-file.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-file',
+  component: 'ox-input-file',
+  argTypes: {
+    name: { control: 'text' },
+    multiple: { control: 'boolean' },
+    accept: { control: 'text' },
+    icon: { control: 'text' },
+    label: { control: 'text' },
+    description: { control: 'text' },
+    hideFileList: { control: 'boolean' },
+    attachFileList: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+  name?: string
+  multiple?: boolean
+  accept?: string
+  icon?: string
+  description?: string
+  hideFileList?: boolean
+  attachFileList?: boolean
+}
+
+const Template: Story<ArgTypes> = ({
+  label = 'select files',
+  name = 'file',
+  multiple = true,
+  accept,
+  icon,
+  description,
+  hideFileList = false,
+  attachFileList = false
+}: 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-file
+    label=${label}
+    name=${name}
+    ?multiple=${multiple}
+    ?hide-filelist=${hideFileList}
+    ?attach-filelist=${attachFileList}
+    accept=${accept}
+    icon=${icon}
+    description=${description}
+  >
+  </ox-input-file>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'select files',
+  name: 'files',
+  multiple: true,
+  hideFileList: false,
+  attachFileList: false,
+  accept: '*.*',
+  icon: 'upload',
+  description: 'drop files here!'
+}

package/stories/ox-input-key-values.stories.ts

@@ -0,0 +1,64 @@
+import '../src/ox-input-key-values.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-key-values',
+  component: 'ox-input-key-values',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'object' },
+    options: { control: 'object' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+  options?: object
+}
+
+const Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, 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>
+    body {
+    }
+  </style>
+
+  <ox-input-key-values
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+    .options=${options}
+  >
+  </ox-input-key-values>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'key-values',
+  value: {
+    A: 'A',
+    B: 'B',
+    C: 'C'
+  },
+  options: [
+    {
+      display: '초기값',
+      value: 'ABC'
+    },
+    {
+      display: '후기값',
+      value: 'XYZ'
+    }
+  ]
+}