@operato/input 1.0.0-alpha.8 → 1.0.0-beta.1

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

@@ -0,0 +1,251 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-input-color'
+
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field.js'
+
+type WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }
+
+/**
+work-shift array value editor element
+
+Example:
+
+  <ox-input-work-shift
+    .value=${value}
+  </ox-input-work-shift>
+*/
+
+@customElement('ox-input-work-shift')
+export class OxInputWorkShift extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+
+      width: 100%;
+      overflow: hidden;
+      border: 1px solid #ccc;
+    }
+
+    div {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+
+      border-bottom: 1px solid #c0c0c0;
+    }
+
+    div:last-child {
+      border-bottom: none;
+    }
+
+    div > * {
+      min-width: 0px;
+      margin: 2px;
+      padding: 0;
+    }
+
+    button,
+    empty-element {
+      width: 20px;
+      text-align: center;
+    }
+
+    input,
+    select,
+    span {
+      flex: 1;
+    }
+
+    input:required:invalid {
+      border: 1px dashed red;
+    }
+
+    [placeholder='value'] {
+      flex: 2;
+    }
+
+    div {
+      border-bottom: 1px solid #c0c0c0;
+    }
+
+    div:last-child {
+      border-bottom: none;
+    }
+  `
+
+  @property({ type: Object }) value: WorkShift[] = []
+
+  private _changingNow: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
+
+  render() {
+    return html`
+      <div data-header>
+        <span>name</span>
+        <span>from date</span>
+        <span>from time</span>
+        <span>to date</span>
+        <span>to time</span>
+        <empty-element></empty-element>
+      </div>
+
+      ${this.value.map(
+        item => html`
+          <div data-record>
+            <input type="text" data-name .value=${item.name} required />
+
+            <select data-from-date .value=${item.fromDate || 0}>
+              <option value="-1">The day before</option>
+              <option value="0">The day</option>
+              <option value="1">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}>
+              <option value="-1">The day before</option>
+              <option value="0">The day</option>
+              <option value="1">The day after</option>
+            </select>
+            <input type="time" data-to-time .value=${item.toTime} step="1800" required />
+
+            <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">-</button>
+          </div>
+        `
+      )}
+
+      <div data-record-new>
+        <input type="text" data-name />
+
+        <select data-from-date>
+          <option value="-1">The day before</option>
+          <option value="0" selected>The day</option>
+          <option value="+1">The day after</option>
+        </select>
+        <input type="time" data-from-time step="1800" />
+
+        <select data-to-date>
+          <option value="-1">The day before</option>
+          <option value="0" selected>The day</option>
+          <option value="+1">The day after</option>
+        </select>
+        <input type="time" data-to-time step="1800" />
+
+        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">+</button>
+      </div>
+    `
+  }
+
+  _onChange(e: Event) {
+    if (this._changingNow) {
+      return
+    }
+
+    this._changingNow = true
+
+    const input = e.target as HTMLInputElement
+
+    const div = input.parentElement as HTMLDivElement
+
+    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]')
+    } else {
+      var records = this.renderRoot.querySelectorAll('[data-record]')
+    }
+
+    var value: WorkShift[] = []
+    for (var i = 0; i < records.length; i++) {
+      const record = records[i]
+
+      const name = (record.querySelector('[data-name]') as HTMLInputElement).value
+
+      const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value
+      const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value
+      const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value
+      const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value
+
+      if (!name) {
+        ;(record.querySelector('[data-name]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!fromDate) {
+        ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!fromTime) {
+        ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!toDate) {
+        ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!toTime) {
+        ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (name) {
+        value.push({
+          name,
+          fromDate: Number(fromDate),
+          fromTime,
+          toDate: Number(toDate),
+          toTime
+        })
+      }
+    }
+
+    this.value = value
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  _add() {
+    this._build(true)
+
+    const inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement & { value: any; type: string }>
+
+    for (var i = 0; i < inputs.length; i++) {
+      let input = inputs[i]
+      input.value = ''
+    }
+
+    inputs[0].focus()
+  }
+
+  _delete(e: Event) {
+    const record = (e.target as Element).parentElement
+
+    const dataName = record!.querySelector('[data-name]') as HTMLInputElement
+    dataName.name = ''
+
+    this._build()
+  }
+}

package/src/ox-select.ts

@@ -5,16 +5,30 @@
 import '@material/mwc-icon'
 import '@operato/popup/ox-popup-list.js'
 
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { PropertyValues, css, html } from 'lit'
+import { customElement, property, query, 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)) {
+    element.setAttribute('data-tooltip', element.textContent!)
+  }
+}
+
+function onmouseout(e: Event) {
+  const element = e.target as HTMLSpanElement
+  element.removeAttribute('data-tooltip')
+}
 
 @customElement('ox-select')
 export class Select extends OxFormField {
   static styles = [
+    TooltipStyles,
     css`
       :host {
         display: block;
@@ -54,12 +68,14 @@ export class Select extends OxFormField {
   @property({ type: String }) name: string = ''
   @property({ type: String }) placeholder: string = ''
 
+  @state() label: string | string[] = ''
+
   render() {
-    const label = (this.value instanceof Array ? this.value.join(', ') : this.value) || this.placeholder || ''
+    const label = (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) || this.placeholder || ''
 
     return html`
       <div @click=${this.expand}>
-        <span>${label}</span>
+        <span @mouseover=${onmouseover} @mouseout=${onmouseout}>${label}</span>
         <mwc-icon>expand_more</mwc-icon>
       </div>
 
@@ -93,6 +109,16 @@ export class Select extends OxFormField {
     })
   }
 
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('value')) {
+      const popupList = this.querySelector('ox-popup-list') as OxPopupList
+      popupList.value = this.value
+
+      await this.requestUpdate()
+      this.label = popupList.getSelectedLabels()
+    }
+  }
+
   expand() {
     const popupList = this.querySelector('ox-popup-list') as OxPopupList
 

package/translations/en.json

@@ -0,0 +1 @@
+{}

package/translations/ko.json

@@ -0,0 +1 @@
+{}

package/translations/ms.json

@@ -0,0 +1 @@
+{}

package/translations/zh.json

@@ -0,0 +1 @@
+{}

package/dist/src/ox-input-id.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-id.js","sourceRoot":"","sources":["../../src/ox-input-id.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;IAA1C;;QAmBW,SAAI,GAAkB,EAAE,CAAA;IA0CnC,CAAC;aA5DQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;GAclB,CAAA;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE3B,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;mBACd,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;kBAC3C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBACrC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;;;2BAIlC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;KAC1E,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEvC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,6BAA6B,EAAE;YAC7C,MAAM,EAAE;gBACN,SAAS;gBACT,QAAQ,EAAE,CAAC,GAAa,EAAE,EAAE;oBAC1B,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;gBACjB,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AA5C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAoD;AAEtE;IAAR,KAAK,EAAE;uCAAyB;AAnBtB,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA6DrB;SA7DY,SAAS","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-id')\nexport class OxInputId extends OxFormField {\n  static styles = css`\n    :host {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    input {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n  `\n\n  @property({ type: Object }) property: { component?: string } | null | undefined\n\n  @state() _ids: Array<string> = []\n\n  render() {\n    const ids = this._ids || []\n\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @focusin=${(e: FocusEvent) => this._onInputFocused(e)}\n        @change=${(e: InputEvent) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n        list=\"ids\"\n      />\n\n      <datalist id=\"ids\">${ids.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n\n  _onInputFocused(e: FocusEvent) {\n    var { component } = this.property || {}\n\n    document.dispatchEvent(\n      new CustomEvent('get-all-scene-component-ids', {\n        detail: {\n          component,\n          callback: (ids: string[]) => {\n            this._ids = ids\n          }\n        }\n      })\n    )\n  }\n\n  _onInputChanged(e: InputEvent) {\n    e.stopPropagation()\n\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -1,292 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit'
-
-import './things-editor-color'
-
-/**
-range value editor element
-
-Example:
-
-  <things-editor-value-range range=${range}
-                            rangetype=${type}
-                            valuetype=${valuetype}>
-  </things-editor-value-range>
-*/
-export default class ThingsEditorValueRange extends LitElement {
-  static get is() {
-    return 'things-editor-value-range'
-  }
-
-  static get properties() {
-    return {
-      value: Object,
-      valuetype: String
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-
-          width: 100%;
-          overflow: hidden;
-          border: 1px solid #ccc;
-        }
-
-        div {
-          display: flex;
-          flex-flow: row nowrap;
-          align-items: center;
-
-          border-bottom: 1px solid #c0c0c0;
-        }
-
-        div:last-child {
-          border-bottom: none;
-        }
-
-        div > * {
-          min-width: 0px;
-          margin: 2px;
-          padding: 0;
-        }
-
-        button {
-          width: 20px;
-          text-align: center;
-        }
-
-        input,
-        things-editor-color {
-          flex: 1;
-        }
-
-        things-editor-color {
-          --things-editor-color-input-color: {
-            margin: 2px;
-          }
-          --things-editor-color-input-span: {
-            width: 12px;
-            height: 12px;
-          }
-        }
-
-        [placeholder='value'] {
-          flex: 2;
-        }
-
-        div {
-          border-bottom: 1px solid #c0c0c0;
-        }
-
-        div:last-child {
-          border-bottom: none;
-        }
-
-        input[type='checkbox'] {
-          width: initial;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-
-    this.value = {}
-    this.valuetype = 'string'
-    this.rangetype = 'number'
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  render() {
-    return html`
-      ${this._toArray(this.value).map(
-        item => html`
-          <div data-record>
-            <input type="text" data-from placeholder="<=" .value=${item.from} />
-            <input type="text" data-to placeholder="&gt;" .value=${item.to} />
-
-            ${this.valuetype == 'boolean'
-              ? html` <input type="checkbox" data-value .checked=${item.value} data-value-type=${this.valuetype} /> `
-              : this.valuetype == 'color'
-              ? html` <things-editor-color data-value .value=${item.value}> </things-editor-color> `
-              : html`
-                  <input
-                    type="text"
-                    data-value
-                    placeholder="value"
-                    .value=${item.value}
-                    data-value-type=${this.valuetype}
-                  />
-                `} <button class="record-action" @click=${e => this._delete(e)} tabindex="-1">-</button>
-          </div>
-        `
-      )}
-
-      <div data-record-new>
-        <input type="text" data-from placeholder="<=" value="" />
-        <input type="text" data-to placeholder="&gt;" value="" />
-
-        ${this.valuetype == 'boolean'
-          ? html` <input type="checkbox" data-value data-value-type=${this.valuetype} /> `
-          : this.valuetype == 'color'
-          ? html` <things-editor-color data-value value="" placeholder="value"> </things-editor-color> `
-          : html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
-        <button class="record-action" @click=${e => this._add(e)} tabindex="-1">+</button>
-      </div>
-
-      <div data-record>
-        <input type="text" data-from data-default="" disabled value="default" />
-        <input type="text" data-to placeholder="&gt;" value="" hidden />
-
-        ${this.valuetype == 'boolean'
-          ? html`
-              <input
-                type="checkbox"
-                data-value
-                .checked=${this.value && this.value.default}
-                data-value-type=${this.valuetype}
-              />
-            `
-          : this.valuetype == 'color'
-          ? html`
-              <things-editor-color data-value .value=${(this.value && this.value.default) || ''} placeholder="value">
-              </things-editor-color>
-            `
-          : html`
-              <input
-                type="text"
-                data-value
-                .value=${(this.value && this.value.default) || ''}
-                placeholder="value"
-                class="default-value"
-                data-value-type=${this.valuetype}
-              />
-            `} <button class="record-action" @click="${e => this._sort(e)}">&gt;</button>
-      </div>
-    `
-  }
-
-  _defaultValue(type) {
-    switch (type || this.valuetype) {
-      case 'color':
-        return '#000000'
-      case 'boolean':
-      case 'checkbox':
-        return false
-      default:
-        return ''
-    }
-  }
-
-  _onChange(e) {
-    if (this._changingNow) return
-
-    this._changingNow = true
-
-    var input = e.target
-    var value
-    if (input.type == 'checkbox') value = Boolean(input.checked)
-    else value = input.value
-    var div = input.parentElement
-    if (input.hasAttribute('data-value')) {
-      var dataList = div.querySelectorAll('[data-value]:not([hidden])')
-      for (var i = 0; i < dataList.length; i++) if (dataList[i] !== input) dataList[i].value = value
-    }
-    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) {
-    if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')
-    else var records = this.renderRoot.querySelectorAll('[data-record]')
-    var newrange = {}
-    for (var i = 0; i < records.length; i++) {
-      var record = records[i]
-      var from = record.querySelector('[data-from]').value
-      var to = record.querySelector('[data-to]').value
-      var inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])')
-      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 (from) {
-        if (from === 'default') newrange['default'] = value || (this.valuetype == 'color' ? '#000000' : '')
-        else newrange[`${from}~${to}`] = value
-      }
-    }
-
-    this.value = newrange
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  /* default를 제외한 range아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
-  _toArray(range) {
-    var array = []
-    for (var key in range) {
-      if (key == 'default') continue
-      var fromto = key.split('~')
-      array.push({
-        from: fromto[0],
-        to: fromto[1],
-        value: range[key]
-      })
-    }
-    return array
-  }
-
-  _sort(e) {
-    var sorter =
-      this.rangetype === 'number'
-        ? function (a, b) {
-            return parseFloat(b.from) < parseFloat(a.from)
-          }
-        : function (a, b) {
-            return b.from < a.from
-          }
-    var range = this._toArray(this.value)
-      .sort(sorter)
-      .reduce(function (sum, i) {
-        sum[`${i.from}~${i.to}`] = i.value
-        return sum
-      }, {})
-    range.default = this.value.default
-
-    this.value = range
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _add(e) {
-    this._build(true)
-    var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])')
-    for (var i = 0; i < inputs.length; i++) {
-      let input = inputs[i]
-      if (input.type == 'checkbox') input.checked = false
-      else input.value = this._defaultValue(input.type)
-    }
-    inputs[0].focus()
-  }
-
-  _delete(e) {
-    var record = e.target.parentElement
-    record.querySelector('[data-from]').value = ''
-    this._build()
-  }
-}
-
-customElements.define(ThingsEditorValueRange.is, ThingsEditorValueRange)