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

package/src/ox-input-hashtags.ts

@@ -1,185 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { when } from 'lit/directives/when.js'
-import { repeat } from 'lit/directives/repeat.js'
-import { localized, msg } from '@lit/localize'
-
-import { OxFormField } from './ox-form-field.js'
-
-@localized()
-@customElement('ox-input-hashtags')
-export class OxInputHashtags extends OxFormField {
-  static styles = css`
-    #editor {
-      display: flex;
-      gap: var(--spacing-medium);
-      align-items: center;
-    }
-
-    .tags {
-      display: flex;
-      gap: var(--spacing-medium);
-      align-items: center;
-    }
-
-    .tag {
-      display: flex;
-      gap: var(--spacing-small);
-
-      font: var(--input-font);
-      cursor: pointer;
-    }
-
-    .tag:hover {
-      font-weight: bold;
-    }
-
-    .closer {
-      opacity: 0.3;
-    }
-    .tag:hover .closer {
-      opacity: 0.3;
-    }
-
-    .input {
-      display: inline-block;
-    }
-
-    .input::before {
-      display: inline;
-      position: relative;
-      opacity: 0.5;
-      top: -1px;
-      content: '#';
-      vertical-align: middle;
-    }
-
-    input {
-      vertical-align: middle;
-      -webkit-appearance: none;
-      -webkit-text-size-adjust: none;
-      border: 0;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-      outline: none;
-      font-weight: bold;
-    }
-
-    input:focus {
-      outline: none;
-      border-bottom: 1px solid var(--md-sys-color-primary);
-    }
-
-    .error {
-      margin: var(--spacing-small);
-      color: var(--md-sys-color-error);
-      font: var(--input-font);
-      text-align: left;
-    }
-  `
-
-  @property({ type: Array }) value: string[] = []
-  @property({ type: String }) placeholder: string = 'tag'
-  @query('input') input!: HTMLInputElement
-
-  @state() errors?: string | null
-
-  render() {
-    return html`
-      <div id="editor" @click=${this.setHashtags}>
-        <div class="tags">
-          ${repeat(
-            this.value,
-            tag => tag,
-            (tag, index) => html`
-              <span class="tag"
-                >#${tag} <span @click=${() => !this.disabled && this.removeHashtag(index)} class="closer">x</span></span
-              >
-            `
-          )}
-        </div>
-
-        <div class="input">
-          <input
-            type="text"
-            @keyup=${this.onInputKeyup}
-            @blur=${this.onBlur}
-            placeholder="태그입력"
-            ?disabled=${this.disabled}
-          />
-        </div>
-      </div>
-
-      ${when(this.errors, () => html`<p class="error">${this.errors}</p>`)}
-    `
-  }
-
-  private onInputKeyup(e: KeyboardEvent) {
-    e.stopPropagation()
-
-    const tag = this.input.value.trim()
-
-    switch (e.key) {
-      case 'Enter':
-      case 'Spacebar':
-        this.addHashtag(tag)
-        break
-      default:
-        this.errors = this.validate(tag)
-    }
-  }
-
-  private onBlur() {
-    const tag = this.input.value.trim()
-    this.addHashtag(tag)
-  }
-
-  async setHashtags() {
-    this.input.focus()
-  }
-
-  initErrors() {
-    this.errors = null
-  }
-
-  validate(newtag: string) {
-    if (this.value.some(tag => tag === newtag)) {
-      return msg('tag duplicated')
-    }
-
-    const regex = /[~!@#$%^&*()+|<>?:{},.="':;/-]/
-    if (regex.test(newtag)) {
-      return msg('special characters not allowed')
-    }
-  }
-
-  async addHashtag(tag: string) {
-    if (!tag) {
-      this.initErrors()
-      this.input.focus()
-      return
-    }
-
-    this.errors = this.validate(tag)
-    if (this.errors) {
-      this.input.focus()
-      return
-    }
-
-    this.value = [...this.value, tag]
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-    this.errors = null
-    this.input.value = ''
-    this.input.focus()
-  }
-
-  removeHashtag(idx: number) {
-    this.value.splice(idx, 1)
-    this.value = [...this.value]
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}

package/src/ox-input-i18n-label.ts

@@ -1,140 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-
-import { css, html } from 'lit'
-import { customElement, property, queryAll } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field'
-
-type I18nLabel = { [code: string]: string }
-
-const LANGUAGES = [
-  {
-    code: 'en',
-    display: 'English'
-  }
-]
-
-/**
- input component for i18n labels
- 
- Example:
- 
-   <ox-input-i18n-label 
-     value=${map}
-     languages=${languages}
-   </ox-input-i18n-label>
- */
-@customElement('ox-input-i18n-label')
-export class OxInputI18nLabels extends OxFormField {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      gap: 10px;
-    }
-
-    [data-record] {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 10px;
-    }
-
-    label {
-      width: 80px;
-      text-align: end;
-    }
-
-    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: 100px;
-    }
-
-    input:focus {
-      outline: none;
-      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
-    }
-
-    input[type='hidden'] {
-      flex: 0;
-    }
-  `
-
-  @property({ type: Object }) value: I18nLabel = {}
-  @property({ type: Array }) languages: { display: string; code: string }[] = LANGUAGES
-
-  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
-
-  private changing: boolean = false
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this.onChange.bind(this))
-  }
-
-  render() {
-    const value = !this.value || typeof this.value !== 'object' ? {} : this.value
-    const languages = (this.languages && this.languages.length > 0 && this.languages) || LANGUAGES
-
-    return html`
-      ${languages.map(
-        ({ display, code }) => html`
-          <div data-record>
-            <label>${display}</label>
-            <input type="hidden" data-code value=${code} />
-            <input
-              type="text"
-              data-label
-              placeholder="label"
-              .value=${value?.[code] || ''}
-              ?disabled=${this.disabled}
-            />
-          </div>
-        `
-      )}
-    `
-  }
-
-  private onChange(e: Event) {
-    e.stopPropagation()
-
-    if (this.changing) {
-      return
-    }
-
-    this.changing = true
-
-    this.build()
-
-    this.changing = false
-  }
-
-  private build() {
-    var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>
-
-    var newmap: I18nLabel = {}
-
-    for (var i = 0; i < records.length; i++) {
-      var record = records[i]
-
-      const code = (record.querySelector('[data-code]') as HTMLInputElement).value
-      const label = (record.querySelector('[data-label]') as HTMLInputElement).value
-
-      if (code) {
-        newmap[code] = label || ''
-      }
-    }
-
-    this.value = { ...this.value, ...newmap }
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-  }
-}

package/src/ox-input-image.ts

@@ -1,168 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-
-import { css, html } from 'lit'
-import { customElement, query } from 'lit/decorators.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-import { FileDropHelper } from '@operato/utils'
-
-import { OxFormField } from './ox-form-field.js'
-
-const IMAGE_FALLBACK = new URL('../../assets/images/no-image.png', import.meta.url).href
-
-@customElement('ox-input-image')
-export class OxInputImage extends OxFormField {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        position: relative;
-        box-sizing: border-box;
-
-        display: flex;
-        flex-direction: column;
-        place-content: center;
-        border-radius: var(--border-radius);
-        padding: var(--padding-default, 9px);
-        min-height: 100px;
-        text-transform: capitalize;
-
-        border: var(--file-uploader-border);
-        background-color: var(--md-sys-color-background);
-        font: var(--file-uploader-font) !important;
-        color: var(--file-uploader-color);
-
-        overflow: hidden;
-      }
-
-      :host(.candrop) {
-        background-color: var(--file-uploader-candrop-background-color);
-      }
-
-      img {
-        min-height: 100%;
-        margin: auto;
-      }
-
-      [overlay] {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0%;
-        background-color: var(--md-sys-color-surface);
-
-        display: flex;
-        place-content: center;
-      }
-
-      [overlay]:hover {
-        opacity: 50%;
-      }
-
-      #input-file {
-        display: none;
-      }
-
-      label {
-        border: none;
-        flex: 1;
-        display: flex;
-        place-content: center;
-      }
-
-      md-icon {
-        align-self: center;
-
-        color: var(--file-uploader-icon-color, black);
-        --md-icon-size: var(--file-uploader-icon-size, 36px);
-      }
-    `
-  ]
-
-  @query('#input-file') fileInput!: HTMLInputElement
-
-  render() {
-    var value = this.value
-    var src: string
-
-    if (!value) {
-      src = IMAGE_FALLBACK
-    } else if (typeof value === 'string') {
-      src = value
-    } else {
-      src = URL.createObjectURL(value)
-      requestAnimationFrame(() => URL.revokeObjectURL(src))
-    }
-
-    return html`
-      <img
-        src=${src}
-        style="max-width: 100%;"
-        onerror="this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')"
-      />
-
-      <div overlay>
-        <label>
-          <input
-            id="input-file"
-            type="file"
-            accept="image/*"
-            hidden
-            capture="environment"
-            @change=${(e: Event) => this._onChangeValue(e)}
-            ?disabled=${this.disabled}
-          />
-          <md-icon>upload</md-icon>
-        </label>
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    FileDropHelper.set(this)
-
-    this.addEventListener('file-drop', (e: Event) => {
-      const detail = (e as CustomEvent).detail
-      this.value = detail[0]
-
-      this._notifyChange()
-    })
-  }
-
-  get file() {
-    return this.value
-  }
-
-  reset() {
-    this.fileInput.value = ''
-    this.value = []
-
-    this._notifyChange()
-  }
-
-  _onChangeValue(e: Event) {
-    const fileInput = e.currentTarget as HTMLInputElement
-
-    this.value = [...Array.from(fileInput.files as FileList)][0]
-
-    fileInput.files = null
-
-    this._notifyChange()
-  }
-
-  _notifyChange() {
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.value
-      })
-    )
-  }
-}