@operato/input 8.0.0-alpha.51 → 8.0.0-beta.1

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

@@ -1,354 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { OxPopupList } from '@operato/popup'
-
-import { OxFormField } from './ox-form-field'
-
-const UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number | ((v: number) => number)[] } } = {
-  kg: {
-    mg: 1000000,
-    g: 1000,
-    ton: 0.001
-  },
-  rad: {
-    degree: 180 / Math.PI
-  },
-  sec: {
-    msec: 1000,
-    min: 1 / 60,
-    hr: 1 / 3600,
-    day: 1 / (3600 * 24),
-    year: 1 / (3600 * 24 * 365)
-  },
-  m: {
-    mm: 1000,
-    cm: 100,
-    inch: 39.37008
-  },
-  'g/mol': {
-    'kg/kmol': 1,
-    'g/kmol': 1000
-  },
-  m2: {
-    mm2: 1000000,
-    cm2: 1000
-  },
-  m3: {
-    cm3: 1000000,
-    L: 1000,
-    mL: 1000000
-  },
-  'kg/m3': {
-    'g/m3': 1000,
-    'g/L': 1,
-    'g/cm3': 0.001,
-    'kg/L': 0.001,
-    'g/mL': 0.001
-  },
-  'm/sec': {
-    'm/min': 60,
-    'm/hr': 3600,
-    'cm/sec': 100,
-    'cm/min': 6000,
-    'cm/hr': 360000
-  },
-  N: {
-    kN: 0.001,
-    kgf: 0.101971621
-  },
-  Pa: {
-    atm: 1 / 101325,
-    bar: 1 / 100000,
-    'kgf/cm2': 1 / 9.80665 / 10000,
-    MPa: 1 / 1000000,
-    kPa: 1 / 1000,
-    psi: 1 / 6894.76,
-    mmH2O: 1 / 9.80665,
-    mmHg: 1 / 133.32
-  },
-  'kg/sec': {
-    'kg/min': 60,
-    'kg/hr': 3600,
-    'ton/hr': 3.6,
-    'ton/year': (60 * 60 * 24 * 365) / 1000
-  },
-  'kg/m2/sec': {
-    'kg/m2/min': 60,
-    'kg/m2/hr': 3600
-  },
-  'mol/sec': {
-    'kmol/sec': 1 / 1000
-  },
-  'mol/m2/sec': {
-    'kmol/m2/sec': 1 / 1000
-  },
-  'Sm3/sec': {
-    'Sm3/hr': 3600,
-    'Sm3/min': 60,
-    'SL/min': 60000,
-    'SL/sec': 1000,
-    'Scm3/min': 60000000,
-    'Scm3/sec': 1000000
-  },
-  'Nm3/sec': {
-    'Nm3/hr': 3600,
-    'Nm3/min': 60,
-    'NL/min': 60000,
-    'NL/sec': 1000,
-    'Ncm3/min': 60000000,
-    'Ncm3/sec': 1000000
-  },
-  'Am3/sec': {
-    'Am3/hr': 3600,
-    'Am3/min': 60,
-    'AL/min': 60000,
-    'AL/sec': 1000,
-    'Acm3/min': 60000000,
-    'Acm3/sec': 1000000
-  },
-  J: {
-    kJ: 1 / 1000,
-    MJ: 1 / 1000000,
-    cal: 1 / 4.184,
-    kcal: 1 / 4.184 / 1000
-  },
-  W: {
-    kW: 1 / 1000,
-    MW: 1 / 1000000,
-    'kcal/hr': 859.85 / 1000,
-    hp: 1 / 745.7
-  },
-  'W/m2': {
-    'kW/m2': 1 / 1000,
-    'W/cm2': 1 / 10000,
-    'kW/cm2': 1 / 10000000
-  },
-  'J/kg': {
-    'kJ/kg': 1 / 1000,
-    'cal/g': 1 / 4.184 / 1000,
-    'cal/kg': 1 / 4.184,
-    'kcal/kg': 1 / 4.184 / 1000
-  },
-  'J/kg/K': {
-    'kJ/kg/K': 1 / 1000,
-    'cal/kg/K': 1 / 4.184,
-    'kcal/kg/K': 1 / 4.184 / 1000,
-    'cal/g/K': 1 / 4.184 / 1000
-  },
-  'W/m/K': {
-    'kW/m/K': 1 / 1000,
-    'W/cm/K': 1 / 100,
-    'kW/cm/K': 1 / 100 / 1000
-  },
-  'W/m2/K': {
-    'kW/m2/K': 1 / 1000,
-    'kcal/hr/m2/oC': 1 / 1.163
-  },
-  'N sec/m2': {
-    'Pa sec': 1,
-    'mPa sec': 1000,
-    'kg/m/sec': 1,
-    'g/cm/sec': 10,
-    P: 10,
-    cP: 1000
-  },
-  'm2 oC/W': {
-    'm2 oC/kW': 1000
-  },
-  '%': {},
-  ppm: {},
-  K: {
-    '°C': [(v: number) => v - 273.15, (v: number) => v + 273.15]
-  }
-}
-
-@customElement('ox-input-unit-number')
-export class OxInputUnitNumber extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        --md-icon-size: var(--fontsize-default, 14px);
-      }
-
-      input {
-        flex: 1;
-        border: 0;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-        padding: var(--spacing-tiny);
-        font: var(--input-font);
-        color: var(--md-sys-color-on-primary-container);
-        min-width: 40px;
-      }
-
-      input:focus {
-        outline: none;
-        border-bottom: 1px solid var(--md-sys-color-on-primary-container);
-      }
-
-      input::-webkit-outer-spin-button,
-      input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      input[type='number'] {
-        text-align: right;
-        -moz-appearance: textfield;
-      }
-
-      #unit {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        position: relative;
-        margin-left: var(--spacing-small);
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        min-width: 24px;
-      }
-
-      md-icon {
-        color: var(--md-sys-color-on-primary-container, #3c3938);
-        margin-left: auto;
-      }
-
-      ox-popup-list {
-        right: 0;
-      }
-    `
-  ]
-
-  @property({ type: String }) placeholder?: string
-  @property({ type: String, attribute: 'std-unit' }) stdUnit!: string
-  @property({ type: String, attribute: 'user-unit' }) userUnit?: string
-
-  @query('input') input!: HTMLInputElement
-  @query('ox-popup-list') popup!: OxPopupList
-
-  render() {
-    const userUnit = this.userUnit || this.stdUnit
-    const units = (UNIT_SYSTEMS[this.stdUnit] && Object.keys(UNIT_SYSTEMS[this.stdUnit])) || []
-
-    return html`
-      <input
-        type="number"
-        .value=${this._toUserUnit(this.value)}
-        placeholder=${ifDefined(this.placeholder)}
-        @change=${(e: Event) => this._onChangeValue(e)}
-        ?disabled=${this.disabled}
-      />
-      <div
-        id="unit"
-        @click=${(e: Event) => {
-          if (this.disabled) {
-            return
-          }
-
-          const target = e.currentTarget as HTMLElement
-          this.popup.open({
-            right: 0,
-            top: target.clientTop + target.offsetHeight
-          })
-        }}
-      >
-        ${userUnit}
-        <ox-popup-list
-          .value=${userUnit}
-          @select=${(e: CustomEvent) => {
-            this.userUnit = e.detail
-            this.dispatchEvent(
-              new CustomEvent('user-unit-change', {
-                detail: this.userUnit
-              })
-            )
-          }}
-        >
-          <div option value=${this.stdUnit}>${this.stdUnit}</div>
-          ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}
-        </ox-popup-list>
-        <md-icon>expand_more</md-icon>
-      </div>
-    `
-  }
-
-  _onChangeValue(e: Event) {
-    this.value = this._toStdUnit(this.input.value)
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.value
-      })
-    )
-  }
-
-  _toUserUnit(stdValue: string | number | undefined) {
-    if (!this.userUnit) {
-      return
-    }
-
-    if (this.userUnit === this.stdUnit) {
-      return Number(stdValue)
-    }
-
-    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 {
-      return this._toUserUnitByFunction(stdValue, converterValue as ((v: number) => number)[])
-    }
-  }
-
-  _toUserUnitByRate(stdValue: string | number | undefined, converterRate: number) {
-    return Number(stdValue) * converterRate
-  }
-
-  _toUserUnitByFunction(stdValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {
-    return converterFunctions[0](Number(stdValue))
-  }
-
-  _toStdUnit(userValue: string | number | undefined) {
-    if (!this.userUnit) {
-      return
-    }
-
-    if (this.userUnit === this.stdUnit) {
-      return Number(userValue)
-    }
-
-    const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]
-
-    if (typeof converterValue === 'number') {
-      return this._toStdUnitByRate(userValue, converterValue || 1)
-    } /* should be converter function array */ else {
-      return this._toStdUnitByFunction(userValue, converterValue as ((v: number) => number)[])
-    }
-  }
-
-  _toStdUnitByRate(userValue: string | number | undefined, converterRate: number) {
-    return isNaN(Number(userValue)) ? undefined : Number(userValue) / converterRate
-  }
-
-  _toStdUnitByFunction(userValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {
-    return converterFunctions[1](Number(userValue))
-  }
-}

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

@@ -1,342 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import './ox-input-color'
-
-import { css, html, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { keyed } from 'lit/directives/keyed.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { OxFormField } from './ox-form-field'
-
-type ValueMap = { default?: any; [key: string]: any }
-type ArrayedValueMap = { key: string; value: any }
-
-/**
-key-value map editor element
-
-Example:
-
-  <ox-input-value-map 
-    value=${map}
-    keytype=${keytype}
-    valuetype=${valuetype}>
-  </ox-input-value-map>
-*/
-@customElement('ox-input-value-map')
-export class OxInputValueMap extends OxFormField {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      border: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--spacing-small) var(--spacing-small) 0 var(--spacing-small);
-
-      --md-icon-size: var(--fontsize-default, 14px);
-    }
-
-    div {
-      display: flex;
-      flex-flow: row nowrap;
-      gap: var(--padding-default);
-    }
-
-    div:last-child {
-      margin-bottom: var(--spacing-small);
-    }
-
-    div > * {
-      min-width: 0px;
-      margin: 2px;
-      padding: 0;
-    }
-
-    button {
-      border: var(--button-border);
-      border-radius: var(--border-radius);
-      background-color: var(--button-background-color);
-      padding: var(--spacing-small) var(--padding-default);
-      line-height: 0.8;
-      color: var(--button-color);
-      cursor: pointer;
-    }
-    button + button {
-      margin-left: -5px;
-    }
-
-    button:focus,
-    button:hover,
-    button:active {
-      border: var(--button-activ-border);
-      background-color: var(--button-background-focus-color);
-      color: var(--md-sys-color-primary-container);
-    }
-
-    [data-key],
-    [data-value] {
-      flex: 1;
-    }
-
-    input {
-      border: 0;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--spacing-tiny);
-      font: var(--input-font);
-      color: var(--md-sys-color-on-primary-container);
-    }
-
-    input:focus {
-      outline: none;
-      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
-    }
-
-    button.hidden {
-      opacity: 0;
-      cursor: default;
-    }
-
-    ox-input-color {
-      margin: 1px;
-      width: 10px;
-      height: 10px;
-    }
-
-    input[type='checkbox'] {
-      flex: none;
-      width: initial;
-    }
-  `
-
-  @property({ type: Object }) value: ValueMap = {}
-  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | 'number' | 'date' | string = 'string'
-  @property({ type: String }) keytype: 'string' | 'number' = 'number'
-  @property({ type: String, attribute: 'default-value' }) defaultValue?: string
-
-  private _changingNow: boolean = false
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  updated() {
-    const inputs = this.renderRoot.querySelectorAll('[data-record-new] > :not([style*="display: none"])') as NodeListOf<
-      HTMLInputElement & { value: any }
-    >
-
-    inputs[0].focus()
-  }
-
-  valueInputTemplate(value?: any) {
-    return this.valuetype == 'boolean'
-      ? html`
-          <input
-            type="checkbox"
-            data-value
-            .checked=${!!value}
-            data-value-type=${this.valuetype}
-            ?disabled=${this.disabled}
-          />
-        `
-      : this.valuetype == 'color'
-        ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
-        : html`
-            <input
-              type="text"
-              data-value
-              placeholder="value"
-              value=${ifDefined(value)}
-              data-value-type=${this.valuetype}
-              ?disabled=${this.disabled}
-            />
-          `
-  }
-
-  render() {
-    return html`
-      ${this._toArray(this.value).map(
-        item => html`
-          <div data-record>
-            <input type="text" data-key placeholder="key" .value=${item.key} ?disabled=${this.disabled} />
-            ${this.valueInputTemplate(item.value)}
-            <button
-              class="record-action"
-              @click=${(e: MouseEvent) => this._delete(e)}
-              tabindex="-1"
-              ?disabled=${this.disabled}
-            >
-              <md-icon>remove</md-icon>
-            </button>
-          </div>
-        `
-      )}
-      ${this.disabled
-        ? nothing
-        : keyed(
-            Date.now(),
-            html`
-              <div data-record-new>
-                <input type="text" data-key placeholder="key" value="" />
-
-                ${this.valueInputTemplate()}
-                <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                  <md-icon>add</md-icon>
-                </button>
-              </div>
-            `
-          )}
-
-      <div data-record>
-        <input type="text" data-key data-default="" value="default" disabled />
-
-        ${this.valueInputTemplate((this.value && this.value.default) || this._defaultValue())}
-        <button class="record-action" @click=${() => this._sort()} tabindex="-1">
-          <md-icon>chevron_right</md-icon>
-        </button>
-      </div>
-    `
-  }
-
-  _defaultValue(type?: 'color' | 'boolean' | 'checkbox' | string) {
-    switch (type || this.valuetype) {
-      case 'color':
-        return this.defaultValue || '#000000'
-      case 'boolean':
-      case 'checkbox':
-        return this.defaultValue ? this.defaultValue === 'true' : false
-      default:
-        return this.defaultValue || ''
-    }
-  }
-
-  _onChange(e: Event) {
-    e.stopPropagation()
-
-    if (this._changingNow) {
-      return
-    }
-
-    this._changingNow = true
-
-    const input = e.target as HTMLInputElement
-    var value
-
-    if (input.type == 'checkbox') {
-      value = Boolean(input.checked)
-    } else {
-      value = input.value
-    }
-
-    const div = input.parentElement as HTMLDivElement
-
-    if (div.hasAttribute('data-record') && input.hasAttribute('data-value')) {
-      var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLElement & { value: any }>
-
-      for (var i = 0; i < dataList.length; i++) {
-        if (dataList[i] !== input) {
-          dataList[i].value = value || this._defaultValue()
-        }
-      }
-    }
-
-    if (div.hasAttribute('data-record')) {
-      this._build()
-    } else if (div.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: ValueMap = {}
-
-    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 & { value: any }
-      >
-
-      if (!inputs || inputs.length == 0) {
-        continue
-      }
-
-      var input = inputs[inputs.length - 1]
-
-      var value
-
-      if (input.type == 'checkbox') {
-        value = Boolean(input.checked)
-      } else {
-        value = input.value
-      }
-
-      if (key) {
-        newmap[key] = value || this._defaultValue()
-      }
-    }
-
-    this.value = newmap
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-  }
-
-  /* default를 제외한 map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
-  _toArray(map: ValueMap) {
-    var array: ArrayedValueMap[] = []
-
-    for (var key in map) {
-      if (key == 'default') continue
-      array.push({
-        key: key,
-        value: map[key]
-      })
-    }
-
-    return array
-  }
-
-  _sort() {
-    const sorter =
-      this.keytype === 'number'
-        ? function (a: ArrayedValueMap, b: ArrayedValueMap) {
-            return parseFloat(b.key) < parseFloat(a.key) ? 1 : -1
-          }
-        : function (a: ArrayedValueMap, b: ArrayedValueMap) {
-            return b.key < a.key ? 1 : -1
-          }
-
-    var map = this._toArray(this.value)
-      .sort(sorter)
-      .reduce(function (sum, i) {
-        sum[i.key] = i.value
-        return sum
-      }, {} as ValueMap)
-
-    map.default = this.value.default
-
-    this.value = map
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-  }
-
-  _add() {
-    this._build(true)
-  }
-
-  _delete(e: MouseEvent) {
-    const record = (e.target as HTMLElement).parentElement
-
-    ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''
-
-    this._build()
-  }
-}