@operato/input 1.0.0-beta.20 → 1.0.0-beta.21

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

@@ -0,0 +1,269 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+
+import { css, html } from 'lit'
+import { customElement, property, queryAll } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+type KeyValues = { [key: string]: any }
+type ArrayedKeyValues = { key: string; value: any }
+
+/**
+ input component for key-value map
+ 
+ Example:
+ 
+   <ox-input-key-values 
+     value=${map}
+   </ox-input-key-values>
+ */
+@customElement('ox-input-key-values')
+export class OxInputKeyValues extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      margin-bottom: var(--margin-wide);
+    }
+
+    div {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: var(--margin-default);
+      margin-bottom: var(--margin-narrow);
+    }
+
+    button {
+      border: var(--button-border);
+      border-radius: var(--border-radius);
+      background-color: var(--button-background-color);
+      padding: var(--padding-narrow) var(--padding-default);
+      line-height: 0.8;
+      color: var(--button-color);
+      cursor: pointer;
+    }
+    button + button {
+      margin-left: -5px;
+    }
+    button mwc-icon {
+      font-size: var(--fontsize-default);
+    }
+    button:focus,
+    button:hover,
+    button:active {
+      border: var(--button-activ-border);
+      background-color: var(--button-background-focus-color);
+      color: var(--theme-white-color);
+    }
+
+    input {
+      flex: 1;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+    }
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+    button.hidden {
+      opacity: 0;
+      cursor: default;
+    }
+  `
+
+  @property({ type: Object }) value: KeyValues = {}
+  @property({ type: Object }) options: { display: string; value: string }[] = []
+
+  private _changingNow: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
+
+  render() {
+    const value = !this.value || typeof this.value !== 'object' ? {} : this.value
+
+    return html`
+      ${this._toArray(value).map(
+        item => html`
+          <div data-record>
+            <input type="text" data-key placeholder="key" .value=${item.key} />
+            <input type="text" data-value placeholder="value" .value=${item.value} list="value-template" />
+            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">
+              <mwc-icon>arrow_upward</mwc-icon>
+            </button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">
+              <mwc-icon>arrow_downward</mwc-icon>
+            </button>
+          </div>
+        `
+      )}
+
+      <div data-record-new>
+        <input type="text" data-key placeholder="key" value="" />
+        <input type="text" data-value placeholder="value" value="" list="value-template" />
+        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+          <mwc-icon>add</mwc-icon>
+        </button>
+        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+      </div>
+
+      <datalist id="value-template">
+        ${this.options.map(({ display, value }) => html` <option value="${value}">${display}</option> `)}
+      </datalist>
+    `
+  }
+
+  _onChange(e: Event) {
+    if (this._changingNow) {
+      return
+    }
+
+    this._changingNow = true
+
+    const input = e.target as HTMLInputElement
+
+    const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement
+
+    if (record.hasAttribute('data-record')) {
+      this._build()
+    } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {
+      this._add()
+    }
+
+    this._changingNow = false
+  }
+
+  _build(includeNewRecord?: boolean) {
+    if (includeNewRecord) {
+      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>
+    } else {
+      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>
+    }
+
+    var newmap: KeyValues = {}
+
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+
+      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+      const inputs = record.querySelectorAll(
+        '[data-value]:not([style*="display: none"])'
+      ) as NodeListOf<HTMLInputElement>
+
+      if (!inputs || inputs.length == 0) {
+        continue
+      }
+
+      var input = inputs[inputs.length - 1]
+
+      var value = input.value
+
+      if (key) {
+        newmap[key] = value || ''
+      }
+    }
+
+    this.value = newmap
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
+  _toArray(map: KeyValues) {
+    var array: ArrayedKeyValues[] = []
+
+    for (var key in map) {
+      array.push({
+        key: key,
+        value: map[key]
+      })
+    }
+
+    return array
+  }
+
+  _add() {
+    this._build(true)
+
+    const inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement & { value: any }>
+
+    for (var i = 0; i < inputs.length; i++) {
+      let input = inputs[i]
+
+      if (input.type == 'checkbox') input.checked = false
+      else input.value = ''
+    }
+
+    inputs[0].focus()
+  }
+
+  _delete(e: MouseEvent) {
+    const record = (e.target as Element).closest('[data-record]') as HTMLElement
+
+    ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''
+
+    this._build()
+  }
+
+  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
+
+  _up(e: MouseEvent) {
+    const record = (e.target as Element).closest('[data-record]') as HTMLElement
+    const array = Array.from(this.records)
+    const index = array.indexOf(record) - 1
+
+    if (index < 0) {
+      return
+    }
+
+    const deleted = array.splice(index, 1)
+    array.splice(index + 1, 0, ...deleted)
+
+    this.value = array.reduce((sum, record) => {
+      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+      const value = (record.querySelector('[data-value]') as HTMLInputElement).value
+
+      sum[key] = value
+      return sum
+    }, {} as { [key: string]: string })
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  _down(e: MouseEvent) {
+    const record = (e.target as Element).closest('[data-record]') as HTMLElement
+    const array = Array.from(this.records)
+    const index = array.indexOf(record)
+
+    if (index > array.length) {
+      return
+    }
+
+    array.splice(index, 1)
+    array.splice(index + 1, 0, record)
+
+    this.value = array.reduce((sum, record) => {
+      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+      const value = (record.querySelector('[data-value]') as HTMLInputElement).value
+
+      sum[key] = value
+      return sum
+    }, {} as { [key: string]: string })
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+}

package/src/ox-input-value-map.ts

@@ -80,8 +80,8 @@ export class OxInputValueMap extends OxFormField {
   `
 
   @property({ type: Object }) value: ValueMap = {}
-  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | string = 'string'
-  @property({ type: String }) keytype: 'string' | 'boolean' | 'color' | string = 'string'
+  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | 'number' | 'date' | string = 'string'
+  @property({ type: String }) keytype: 'string' | 'number' = 'number'
 
   private _changingNow: boolean = false
 

package/src/ox-input-value-ranges.ts

@@ -92,8 +92,8 @@ export class OxInputValueRange extends OxFormField {
   `
 
   @property({ type: Object }) value: ValueRange = {}
-  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | string = 'string'
-  @property({ type: String }) rangetype: 'string' | 'boolean' | 'color' | string = 'number'
+  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | 'number' | 'date' | string = 'string'
+  @property({ type: String }) rangetype: 'string' | 'number' = 'number'
 
   private _changingNow: boolean = false
 

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

@@ -49,23 +49,3 @@ Regular.args = {
     C: 'C'
   }
 }
-
-export const BooleanValues = Template.bind({})
-BooleanValues.args = {
-  name: 'code',
-  value: {
-    A: true,
-    B: false,
-    C: true
-  }
-}
-
-export const ColorValues = Template.bind({})
-ColorValues.args = {
-  name: 'code',
-  value: {
-    A: 'red',
-    B: 'yellow',
-    C: 'blue'
-  }
-}

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

package/stories/ox-input-partition-keys.stories.ts

@@ -49,23 +49,3 @@ Regular.args = {
     C: 'C'
   }
 }
-
-export const BooleanValues = Template.bind({})
-BooleanValues.args = {
-  name: 'partition-keys',
-  value: {
-    A: true,
-    B: false,
-    C: true
-  }
-}
-
-export const ColorValues = Template.bind({})
-ColorValues.args = {
-  name: 'partition-keys',
-  value: {
-    A: 'red',
-    B: 'yellow',
-    C: 'blue'
-  }
-}

package/stories/ox-input-value-map.stories.ts

@@ -0,0 +1,58 @@
+import '../src/ox-input-value-map.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-value-map',
+  component: 'ox-input-value-map',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'object' },
+    keytype: { control: 'select', options: ['string', 'number'] },
+    valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+  valuetype?: string
+  keytype?: string
+}
+
+const Template: Story<ArgTypes> = ({
+  name = 'values',
+  value = {},
+  keytype = 'string',
+  valuetype = 'string'
+}: 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-value-map
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+    keytype=${keytype}
+    valuetype=${valuetype}
+  >
+  </ox-input-value-map>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'values',
+  value: {}
+}

package/stories/ox-input-value-ranges.stories.ts

@@ -0,0 +1,58 @@
+import '../src/ox-input-value-ranges.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-value-ranges',
+  component: 'ox-input-value-ranges',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'object' },
+    keytype: { control: 'select', options: ['string', 'number'] },
+    valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+  valuetype?: string
+  keytype?: string
+}
+
+const Template: Story<ArgTypes> = ({
+  name = 'values',
+  value = {},
+  keytype = 'string',
+  valuetype = 'string'
+}: 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-value-ranges
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+    keytype=${keytype}
+    valuetype=${valuetype}
+  >
+  </ox-input-value-ranges>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'values',
+  value: {}
+}