@operato/form 8.0.0-alpha.6 → 8.0.0-beta.1

package/src/components/ox-form-master.ts

@@ -1,246 +0,0 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { CustomInput } from './ox-custom-input.js'
-import { CustomSelect } from './ox-custom-select.js'
-import { FormPaginator } from './ox-form-paginator.js'
-
-@customElement('ox-form-master')
-class FormMaster extends LitElement {
-  static styles = css`
-    form {
-      display: grid;
-      padding: var(--form-padding, 10px);
-      grid-gap: var(--form-grid-gap, 10px);
-      grid-template-columns: var(--form-grid-template-columns);
-      background-color: var(--form-background-color, #e5e5e5);
-    }
-    custom-input,
-    custom-select {
-      justify-self: center;
-    }
-  `
-
-  @property({ type: Array }) fields?: {
-    type: string
-    hidden: boolean
-    name: string
-    id: string
-    label: string
-    placeholder: string
-    value: any
-    field: string
-    queryName: string
-    props: { [prop: string]: string }
-    attrs: string[]
-    valueField?: string
-    displayField?: string
-    options: { name: string; value: string }[]
-  }[]
-  @property({ type: Number }) maxRowCount: number = 2
-  @property({ type: Number }) maxColumnCount: number = 4
-  @property({ type: String }) initFocus?: string
-
-  @state() private pageCount!: number
-
-  @query('form') form!: HTMLFormElement
-
-  private loadedCount: number = 0
-  private resizeEventHandler?: EventListener
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    this.resizeEventHandler = this._adjustColumnProperty.bind(this)
-    window.addEventListener('resize', this.resizeEventHandler)
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    if (this.resizeEventHandler) {
-      window.removeEventListener('resize', this.resizeEventHandler)
-    }
-  }
-
-  render() {
-    return html`
-      <form
-        @keypress=${(e: KeyboardEvent) => {
-          if (e.key === 'Enter') {
-            this.submit()
-          }
-        }}
-        @submit=${(e: Event) => {
-          e.preventDefault() // input="text" 가 한개만 있을경우에 엔터를 치면 강제 submit되는 증상 방지
-        }}
-      >
-        ${(this.fields || []).map(
-          field => html`
-            ${field.type === 'select'
-              ? html`
-                  <ox-custom-select
-                    id=${field.id || field.name}
-                    name=${field.name || field.id}
-                    .props=${field.props}
-                    .attrs=${field.attrs}
-                    .value=${field.value}
-                    .autofocus=${this.initFocus === field.name}
-                    placeholder=${field.placeholder}
-                    @load=${this._onInputLoad.bind(this)}
-                    .options=${field.options}
-                  ></ox-custom-select>
-                `
-              : html`
-                  <ox-custom-input
-                    id=${field.id || field.name}
-                    name=${field.name || field.id}
-                    .props=${field.props}
-                    .attrs=${field.attrs}
-                    .valueField=${field.valueField}
-                    .displayField=${field.displayField}
-                    .value=${field.value}
-                    .autofocus=${this.initFocus === field.name}
-                    placeholder=${field.placeholder}
-                    @load=${this._onInputLoad.bind(this)}
-                  ></ox-custom-input>
-                `}
-          `
-        )}
-      </form>
-
-      <form-paginator .pageCount=${this.pageCount} @pageChange=${this._onPageChangeHandler.bind(this)}></form-paginator>
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('fields')) {
-      this._checkInputValidity()
-    }
-  }
-
-  _checkInputValidity() {
-    const names = (this.fields || []).map(i => i.name)
-    const result = names.every(name => {
-      return names.indexOf(name) === names.lastIndexOf(name)
-    })
-    if (!result) {
-      throw new Error('Field name is duplicated.')
-    }
-  }
-
-  _onInputLoad() {
-    this.loadedCount++
-    if (this.loadedCount === (this.fields || []).length - 1) {
-      this._adjustColumnProperty()
-      this._initFocus()
-      this.dispatchEvent(new CustomEvent('load'))
-    }
-  }
-
-  getFields(): (CustomInput | CustomSelect)[] {
-    return Array.from(this.form.querySelectorAll('ox-custom-select, ox-custom-input') || [])
-  }
-
-  private currentPage: number = 1
-
-  _adjustColumnProperty() {
-    const inputElements = this.getFields()
-
-    if (inputElements.length === 0) return
-    const inputWidth = inputElements[0].offsetWidth
-    const totalWidth = window.innerWidth
-    const inputCount = inputElements.length
-    let columnCount =
-      Math.floor(totalWidth / inputWidth) < this.maxColumnCount
-        ? Math.floor(totalWidth / inputWidth)
-        : this.maxColumnCount > inputCount
-          ? inputCount
-          : this.maxColumnCount
-
-    if (columnCount === 1) {
-      this.pageCount = Math.ceil(inputElements.length / this.maxRowCount)
-      this._filterActiveFields(this.currentPage)
-    } else {
-      this.pageCount = 1
-      this._activeFields()
-    }
-
-    this.style.setProperty('--form-grid-template-columns', `repeat(${columnCount}, 1fr)`)
-  }
-
-  _initFocus() {
-    if (!this.initFocus) this.getFields()[0].focus()
-  }
-
-  getFieldByName(name: string) {
-    return this.renderRoot.querySelector(`[name=${name}]`)
-  }
-
-  reset() {
-    this.form && this.form.reset()
-  }
-
-  submit() {
-    this.dispatchEvent(new CustomEvent('submit'))
-  }
-
-  focusById(id: string) {
-    const input = this.renderRoot.querySelector(`form > #${id}`) as CustomInput | CustomSelect
-    input.focus()
-  }
-
-  checkValidity() {
-    return this.form.checkValidity()
-  }
-
-  serialize() {
-    let data: { [name: string]: any } = {}
-
-    this.getFields().forEach(field => {
-      const name = field.name
-      if (name) {
-        data[name] = field.value
-      }
-    })
-
-    return data
-  }
-
-  get searchParams() {
-    let searchParam = new URLSearchParams()
-    const data = this.serialize()
-    const fields = this.getFields()
-    fields.forEach(field => searchParam.append(field.name!, field.value))
-
-    return decodeURI(searchParam.toString())
-  }
-
-  _onPageChangeHandler(event: Event) {
-    this.currentPage = (event.currentTarget as FormPaginator).currentPage
-    this._filterActiveFields(this.currentPage)
-  }
-
-  _activeFields() {
-    this.getFields().forEach(field => (field.hidden = false))
-  }
-
-  _filterActiveFields(currentPage = 1) {
-    if (this.pageCount > 1) {
-      const fields = this.getFields()
-
-      const chunkedFields = []
-      for (let i = 0, j = fields.length; i < j; i += this.maxRowCount) {
-        chunkedFields.push(fields.slice(i, i + this.maxRowCount))
-      }
-
-      chunkedFields.forEach((fields, idx) => {
-        if (currentPage === idx + 1) {
-          fields.forEach(field => (field.hidden = false))
-        } else {
-          fields.forEach(field => (field.hidden = true))
-        }
-      })
-    }
-  }
-}

package/src/components/ox-form-paginator.ts

@@ -1,60 +0,0 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-@customElement('form-paginator')
-export class FormPaginator extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      background-color: var(--form-background-color, #e5e5e5);
-      font-size: 1.5em;
-      line-height: 0.5em;
-      text-align: center;
-      color: #c4c5c6;
-    }
-
-    [selected] {
-      color: #6f6f6f;
-    }
-  `
-
-  @property({ type: Number }) pageCount: number = 1
-  @property({ type: Array }) selectors: number[] = []
-
-  @state() public currentPage: number = 1
-
-  render() {
-    return html`
-      ${this.selectors.map(
-        page => html`
-          <span
-            page=${page}
-            ?selected=${page == this.currentPage}
-            @click=${(e: MouseEvent) => {
-              this.currentPage = page
-              this.dispatchEvent(new CustomEvent('pageChange'))
-              this.requestUpdate()
-            }}
-            >&bull;</span
-          >
-        `
-      )}
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('pageCount')) {
-      if (this.pageCount > 1) {
-        let i = 1
-        this.selectors = []
-
-        while (i <= this.pageCount) {
-          this.selectors.push(i)
-          i++
-        }
-      } else {
-        this.selectors = []
-      }
-    }
-  }
-}

package/src/components/ox-search-form-paginator.ts

@@ -1,46 +0,0 @@
-import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('ox-search-form-paginator')
-class SearchFormPaginator extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      background-color: var(--form-background-color, #e5e5e5);
-      font-size: 1.5em;
-      line-height: 0.5em;
-      text-align: center;
-      color: #c4c5c6;
-    }
-
-    [selected] {
-      color: #6f6f6f;
-    }
-  `
-
-  @property({ type: Number }) pageCount: number = 0
-  @property({ type: Number }) currentPage: number = 0
-
-  render() {
-    return html`
-      ${Array(this.pageCount)
-        .fill('')
-        .map(
-          (_, page) => html`
-            <span
-              ?selected=${page == this.currentPage}
-              @click=${(e: MouseEvent) =>
-                this.dispatchEvent(
-                  new CustomEvent('pagechanged', {
-                    detail: {
-                      page
-                    }
-                  })
-                )}
-              >&bull;</span
-            >
-          `
-        )}
-    `
-  }
-}