@operato/input 1.0.0-alpha.4 → 1.0.0-alpha.5

package/src/ox-input-options.ts

@@ -0,0 +1,165 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+type Option = { text: string; value: string }
+
+@customElement('ox-input-options')
+export class OxInputOptions extends OxFormField {
+  static styles = css`
+    div {
+      display: grid;
+      grid-template-columns: repeat(10, 1fr);
+      grid-gap: 5px;
+      grid-auto-rows: minmax(24px, auto);
+    }
+
+    input[data-text] {
+      grid-column: span 5;
+    }
+
+    input[data-value] {
+      grid-column: span 4;
+    }
+
+    button {
+      grid-column: span 1;
+    }
+  `
+
+  @property({ type: Array }) value: Option[] = []
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
+
+  render() {
+    const options = this.value instanceof Array ? this.value : []
+
+    return html`
+      ${(options || []).map(
+        item => html`
+          <div data-record="">
+            <input type="text" data-text="" placeholder="text" .value=${item.text} />
+            <input type="text" data-value="" placeholder="value" .value=${item.value} />
+            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">-</button>
+          </div>
+        `
+      )}
+
+      <div data-record-new="">
+        <input type="text" data-text="" placeholder="text" value="" />
+        <input type="text" data-value="" placeholder="value" value="" @change=${(e: Event) => this._add()} />
+        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">+</button>
+      </div>
+    `
+  }
+
+  private _changingNow: boolean = false
+
+  _onChange(e: Event) {
+    if (this._changingNow) return
+
+    this._changingNow = true
+
+    var input = e.target as HTMLInputElement
+    var value = input.value
+
+    var div = input.parentElement
+
+    if (div && div.hasAttribute('data-record')) {
+      var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLInputElement>
+
+      for (var i = 0; i < dataList.length; i++) {
+        if (dataList[i] !== input) {
+          dataList[i].value = value || ''
+        }
+      }
+    }
+
+    if (div && div.hasAttribute('data-record')) this._build(true)
+    else if (div && div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) this._add()
+
+    e.stopPropagation()
+
+    this._changingNow = false
+  }
+
+  _build(includeNewRecord?: any) {
+    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 newoptions: Option[] = []
+
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+
+      var text = (record.querySelector('[data-text]') as HTMLInputElement).value
+      var 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 (text) newoptions.push({ text: text, value: value || text })
+    }
+
+    this.value = newoptions
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  sort() {
+    var sorter = function (a: Option, b: Option) {
+      return b.text < a.text ? 1 : -1
+    }
+
+    this.value = [...this.value.sort(sorter)]
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  _add() {
+    this._build(true)
+
+    var inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement>
+
+    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 HTMLElement).parentElement
+    const input = record && (record.querySelector('[data-text]') as HTMLInputElement)
+
+    if (input) {
+      input.value = ''
+    }
+
+    this._build()
+  }
+
+  protected appendFormData({ formData }: FormDataEvent): void {
+    if (!this.name) return
+
+    const value = this.value
+
+    formData.append(
+      this.name!,
+      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)
+    )
+  }
+}

package/src/ox-input-range.ts

@@ -0,0 +1,147 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field.js'
+
+@customElement('ox-input-range')
+class OxInputRange extends OxFormField {
+  static styles = css`
+    :host {
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      padding: 1px 0;
+
+      width: 100%;
+      user-select: text;
+    }
+
+    input[type='number'] {
+      width: 48px;
+      overflow: hidden;
+    }
+
+    input[type='number'] {
+      color: black;
+      border: none;
+      font-weight: 300;
+      background: white;
+      padding: 1px 2px;
+    }
+
+    input[type='range'] {
+      -webkit-appearance: none;
+      border: none;
+      outline: none;
+      width: 100%;
+      flex: 1;
+      height: 16px;
+      background-color: transparent;
+    }
+    input[type='range']::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 1px;
+      background: black;
+      border: none;
+      border-radius: 5px;
+    }
+    input[type='range']::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      border: none;
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+      background: black;
+      margin-top: -5px;
+    }
+    input[type='range']:focus {
+      outline: none;
+    }
+    input[type='range']:focus::-webkit-slider-runnable-track {
+      background: black;
+    }
+
+    input[type='range']::-moz-range-track {
+      width: 100%;
+      height: 1px;
+      background: black;
+      border: none;
+      border-radius: 5px;
+    }
+    input[type='range']::-moz-range-thumb {
+      border: none;
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+      background: black;
+    }
+
+    input[type='range']:-moz-focusring {
+      outline: 1px solid black;
+      outline-offset: -1px;
+    }
+
+    input[type='range']::-ms-track {
+      width: 100%;
+      height: 1px;
+      background: black;
+      border-radius: 10px;
+      color: transparent;
+      border: none;
+      outline: none;
+    }
+    input[type='range']::-ms-thumb {
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+      background: black;
+      border: none;
+      outline: none;
+      margin-top: 2px;
+    }
+
+    input:focus {
+      outline: none;
+      opacity: 1;
+    }
+  `
+
+  @property({ type: Number }) value: number = 0
+  @property({ type: Number }) step: number = 1
+  @property({ type: Number }) min: number = -100
+  @property({ type: Number }) max: number = 100
+
+  render() {
+    return html`
+      <input
+        type="range"
+        .value=${this.value}
+        .step=${this.step}
+        .min=${this.min}
+        .max=${this.max}
+        @input=${(e: InputEvent) => {
+          e.stopPropagation()
+          this.value = Number((e.target as HTMLInputElement).value)
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+        }}
+      />
+
+      <input
+        type="number"
+        .value=${this.value}
+        .step=${this.step}
+        .min=${this.min}
+        .max=${this.max}
+        @change=${(e: Event) => {
+          e.stopPropagation()
+          this.value = Number((e.target as HTMLInputElement).value)
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+        }}
+      />
+    `
+  }
+}