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

package/src/ox-checkbox.ts

@@ -1,181 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-/*
-  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.
-*/
-
-import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field'
-
-@customElement('ox-checkbox')
-export class OxCheckbox extends OxFormField {
-  static styles = [
-    css`
-      div {
-        display: flex;
-        gap: var(--input-intra-gap, 7px);
-
-        align-items: center;
-        cursor: pointer;
-      }
-
-      [disabled] {
-        opacity: var(--ox-checkbox-disabled-opacity, 0.5);
-        cursor: auto;
-      }
-
-      .checkbox {
-        display: flex;
-        border-radius: var(--ox-checkbox-border-radius, 4px);
-        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));
-        border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));
-        width: var(--ox-checkbox-size, 15px);
-        height: var(--ox-checkbox-size, 15px);
-        align-items: center;
-        justify-content: center;
-      }
-
-      :host([checked]) .checkbox {
-        background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-primary));
-      }
-
-      path {
-        fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));
-      }
-
-      :host([indeterminate]) line {
-        stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));
-      }
-
-      :host([checked]) path {
-        fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));
-      }
-
-      svg {
-        width: var(--ox-checkbox-size, 15px);
-        height: var(--ox-checkbox-size, 15px);
-      }
-
-      .label {
-        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface));
-        line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
-      }
-
-      :host([checked]) .label {
-        color: var(ox-checkbox-label-checked-color, var(--md-sys-color-on-surface));
-        font-weight: 700;
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false
-  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false
-  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false
-  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false
-
-  @state() _hasInner: boolean = !!this.innerHTML.trim().length
-
-  render() {
-    return html`
-      <div ?disabled=${this.disabled} @click=${this.onClick}>
-        ${this._hasInner && this.left
-          ? html` <span label>
-              <slot></slot>
-            </span>`
-          : ''}
-        <a href="#" @click=${(e: Event) => e.preventDefault()} class="checkbox">
-          ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}
-        </a>
-        ${this._hasInner && !this.left
-          ? html` <span class="label">
-              <slot></slot>
-            </span>`
-          : ''}
-      </div>
-    `
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    this.setAttribute('tabindex', '0')
-    this.addEventListener('keydown', this.onKeyDown)
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    this.setAttribute('tabindex', '-1')
-    this.removeEventListener('keydown', this.onKeyDown)
-  }
-
-  onClick() {
-    if (this.disabled) {
-      return
-    }
-
-    if (!this.indeterminatable) {
-      this.indeterminate = false
-      this.checked = !this.checked
-    } else {
-      if (this.indeterminate) {
-        this.indeterminate = false
-        this.checked = true
-      } else if (this.checked) {
-        this.indeterminate = false
-        this.checked = false
-      } else {
-        this.indeterminate = true
-        this.checked = undefined
-      }
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.checked
-      })
-    )
-  }
-
-  get checkedIcon() {
-    return html`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-      </svg>
-    `
-  }
-
-  get uncheckedIcon() {
-    return html`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-      </svg>
-    `
-  }
-
-  get indeterminateIcon() {
-    return html`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <line x1="4" x2="20" y1="12" y2="12" stroke-width="2" stroke-linecap="round" />
-      </svg>
-    `
-  }
-
-  onKeyDown(e: KeyboardEvent) {
-    e.preventDefault()
-
-    if (e.key === ' ' || e.key == 'Spacebar') {
-      this.onClick()
-    }
-  }
-
-  protected appendFormData({ formData }: FormDataEvent): void {
-    this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')
-  }
-}

package/src/ox-form-field.ts

@@ -1,53 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-export abstract class OxFormField extends LitElement {
-  @property({ type: String, attribute: true }) name?: string
-  @property({ type: Boolean }) disabled?: boolean
-  @property() value?: any
-
-  protected _form: HTMLFormElement | null = null
-  protected _formdataEventHandler: EventListener | null = null
-
-  override connectedCallback(): void {
-    super.connectedCallback()
-
-    if (this.name) {
-      this._form = this.closest('form')
-      if (this._form) {
-        this._formdataEventHandler = this.appendFormData.bind(this) as EventListener
-        this._form.addEventListener('formdata', this._formdataEventHandler)
-      }
-    }
-  }
-
-  override disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    if (this._form) {
-      this._form.removeEventListener('formdata', this._formdataEventHandler!)
-      this._form = null
-      this._formdataEventHandler = null
-    }
-  }
-
-  protected appendFormData({ formData }: FormDataEvent): void {
-    if (!this.name) return
-
-    var values = this.value
-    if (!(values instanceof Array)) {
-      values = [this.value]
-    }
-
-    values.forEach((value: any) => {
-      formData.append(
-        this.name!,
-        typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)
-      )
-    })
-  }
-}

package/src/ox-input-3axis.ts

@@ -1,77 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { localized } from '@lit/localize'
-
-import { OxFormField } from './ox-form-field'
-
-@localized()
-@customElement('ox-input-3axis')
-export class OxInput3Axis extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-      }
-
-      input {
-        box-sizing: border-box;
-        padding: 0 var(--spacing-small);
-        height: var(--form-element-height-medium);
-        border: 1px solid var(--md-sys-color-outline);
-        border-radius: var(--md-sys-shape-corner-small);
-        background-color: var(--md-sys-color-on-primary);
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        color: var(--md-sys-color-on-primary-container);
-      }
-
-      input:not(:last-child) {
-        margin-right: var(--margin-default, 2px);
-      }
-
-      input:focus {
-        outline: none;
-        border-color: var(--md-sys-color-secondary-fixed-dim);
-      }
-    `
-  ]
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  _onChange(e: Event) {
-    e.stopPropagation()
-    e.preventDefault()
-
-    var element = e.target as HTMLElement
-    var id = element.id as 'x' | 'y' | 'z'
-    var value = Number((element as HTMLInputElement).value)
-
-    this.value = {
-      ...this.value,
-      [id]: value
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.value
-      })
-    )
-  }
-
-  render() {
-    const { x, y, z } = this.value
-    return html`
-      <input type="number" id="x" placeholder="X" .value=${String(x)} ?disabled=${this.disabled} />
-      <input type="number" id="y" placeholder="Y" .value=${String(y)} ?disabled=${this.disabled} />
-      <input type="number" id="z" placeholder="Z" .value=${String(z)} ?disabled=${this.disabled} />
-    `
-  }
-}

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

@@ -1,211 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import './ox-input-angle'
-
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { localized, msg } from '@lit/localize'
-
-import { OxFormField } from './ox-form-field'
-import { OxInputAngle } from './ox-input-angle'
-
-@localized()
-@customElement('ox-input-3dish')
-export class OxInput3Dish extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: grid;
-        grid-template-columns: repeat(7, minmax(50px, 1fr));
-        grid-gap: var(--spacing-medium);
-      }
-
-      label {
-        text-align: right;
-        align-self: center;
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        color: var(--md-sys-color-on-primary-container);
-        text-transform: var(--label-text-transform);
-        grid-column: span 1;
-      }
-
-      span {
-        grid-column: span 2;
-        text-align: center;
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        color: var(--md-sys-color-surface-tint);
-        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));
-      }
-
-      input,
-      ox-input-angle {
-        grid-column: span 2;
-        box-sizing: border-box;
-        padding: 0 var(--spacing-small);
-        height: var(--form-element-height-medium);
-        border: 1px solid var(--md-sys-color-outline);
-        border-radius: var(--md-sys-shape-corner-small);
-        overflow: hidden;
-        background-color: var(--md-sys-color-on-primary);
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        color: var(--md-sys-color-on-primary-container);
-      }
-
-      ox-input-angle {
-        --input-border: 0;
-      }
-
-      input:focus {
-        outline: none;
-        border-color: var(--md-sys-color-secondary-fixed-dim);
-      }
-    `
-  ]
-
-  @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }
-  @property({ type: Object }) position?: { x?: number; y?: number; z?: number }
-  @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }
-  @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  _onChange(e: Event) {
-    e.stopPropagation()
-    e.preventDefault()
-
-    var element = e.target as HTMLElement
-    var id = element.id
-    var prop = id.substr(1)
-    var value = Number((element as HTMLInputElement).value)
-
-    switch (element.tagName) {
-      case 'PROPERTY-ANGLE':
-        value = Number((element as OxInputAngle).value || 0)
-        break
-    }
-
-    switch (id) {
-      case 'tx':
-      case 'ty':
-      case 'tz':
-        this.position = {
-          ...this.position,
-          [prop]: value
-        }
-
-        this.dispatchEvent(
-          new CustomEvent('position-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: this.position
-            }
-          })
-        )
-        break
-
-      case 'rx':
-      case 'ry':
-      case 'rz':
-        this.rotate = {
-          ...this.rotate,
-          [prop]: value
-        }
-
-        this.dispatchEvent(
-          new CustomEvent('rotate-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: this.rotate
-            }
-          })
-        )
-        break
-
-      case 'sx':
-      case 'sy':
-      case 'sz':
-        this.scale = {
-          ...this.scale,
-          [prop]: value
-        }
-
-        this.dispatchEvent(
-          new CustomEvent('scale-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: this.scale
-            }
-          })
-        )
-        break
-
-      default:
-        // dimension
-        this.dimension = {
-          ...this.dimension,
-          [prop]: value
-        }
-
-        this.dispatchEvent(
-          new CustomEvent('dimension-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: this.dimension
-            }
-          })
-        )
-    }
-
-    this.value = {
-      position: this.position,
-      rotate: this.rotate,
-      scale: this.scale,
-      dimension: this.dimension
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.value
-      })
-    )
-  }
-
-  render() {
-    return html`
-      <label></label> <span>${msg('x-axes')}</span>
-      <span>${msg('y-axes')}</span>
-      <span>${msg('z-axes')}</span>
-
-      <label>${msg('dimension')}</label>
-      <input type="number" id="dwidth" .value=${String(this.dimension?.width)} ?disabled=${this.disabled} />
-      <input type="number" id="dheight" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />
-      <input type="number" id="ddepth" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />
-
-      <label>${msg('position')}</label>
-      <input type="number" id="tx" .value=${String(this.position?.x)} ?disabled=${this.disabled} />
-      <input type="number" id="ty" .value=${String(this.position?.y)} ?disabled=${this.disabled} />
-      <input type="number" id="tz" .value=${String(this.position?.z)} ?disabled=${this.disabled} />
-
-      <label>${msg('scale')}</label>
-      <input type="number" id="sx" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />
-      <input type="number" id="sy" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />
-      <input type="number" id="sz" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />
-
-      <label>${msg('rotate')}</label>
-      <ox-input-angle id="rx" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>
-      <ox-input-angle id="ry" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>
-      <ox-input-angle id="rz" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></ox-input-angle>
-    `
-  }
-}

package/src/ox-input-angle.ts

@@ -1,73 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field'
-
-@customElement('ox-input-angle')
-export class OxInputAngle extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: inline-block;
-      }
-
-      input {
-        width: 100%;
-        height: 100%;
-        min-height: var(--form-element-height-medium);
-        padding: 0 var(--spacing-small);
-        box-sizing: border-box;
-        border: var(--input-border, 1px solid var(--md-sys-color-outline));
-        border-radius: var(--md-sys-shape-corner-small);
-        background-color: var(--md-sys-color-on-primary);
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        color: var(--md-sys-color-on-primary-container);
-      }
-
-      input:focus {
-        outline: var(--input-focus-outline, inherit);
-        border-color: var(--md-sys-color-secondary-fixed-dim);
-      }
-    `
-  ]
-
-  @property({ type: String }) placeholder?: string
-
-  @query('input') input!: HTMLInputElement
-
-  render() {
-    return html`
-      <input
-        type="number"
-        .value=${String(this._toDegree(this.value))}
-        .placeholder=${this.placeholder || '0°'}
-        @change=${(e: Event) => this._onChangeValue(e)}
-        ?disabled=${this.disabled}
-      />
-    `
-  }
-
-  _onChangeValue(e: Event) {
-    this.value = this._toRadian(this.input.value)
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.value
-      })
-    )
-  }
-
-  _toDegree(value: string | number | undefined) {
-    return Math.round(((Number(value) || 0) * 180) / Math.PI)
-  }
-
-  _toRadian(degree: string | number | undefined) {
-    return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)
-  }
-}