@operato/form 1.0.0-alpha.1

package/src/components/ox-custom-select.ts

@@ -0,0 +1,90 @@
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+@customElement('ox-custom-select')
+export class CustomSelect extends LitElement {
+  static styles = css`
+    select {
+      margin: auto 0;
+      border-style: var(--form-input-border-style, solid);
+      border-width: var(--form-input-border-width, 1px);
+      border-color: var(--form-input-border-color, #c4c5c6);
+      padding: var(--form-input-padding, 5px);
+      outline: var(--form-input-outline, none);
+      background-color: var(--form-input-background-color, #fff);
+      min-width: calc(
+        var(--form-input-width, 300px) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)
+      );
+      max-width: calc(
+        var(--form-input-width) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)
+      );
+      -webkit-appearance: none;
+      -webkit-border-radius: 0px;
+    }
+  `
+
+  @property({ type: String }) name?: string
+  @property({ type: Array }) options?: { name: string; value: any }[]
+  @property({ type: Object }) props: any
+  @property({ type: Array }) attrs: any
+  @property({ type: String }) value: any
+  @property({ type: Boolean }) autofocus: boolean = false
+
+  @query('select') select!: HTMLInputElement
+
+  render() {
+    return html`
+      <select
+        name=${this.name}
+        ?autofocus=${this.autofocus}
+        @change=${(e: Event) => (this.value = (e.currentTarget as HTMLSelectElement).value)}
+      >
+        ${(this.options || []).map(
+          option => html`
+            <option value=${option.value} ?selected=${this.value === option.value}>${option.name}</option>
+          `
+        )}
+      </select>
+    `
+  }
+
+  firstUpdated() {
+    this.dispatchEvent(new CustomEvent('load'))
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('props') && this._isObject(this.props)) {
+      for (let prop in this.props) {
+        if (this.props[prop]) {
+          this.select.setAttribute(prop, this.props[prop])
+          this.setAttribute(prop, this.props[prop])
+        }
+      }
+    }
+
+    if (changes.has('attrs')) {
+      if (this.attrs && Array.isArray(this.attrs)) {
+        this.attrs.forEach(attr => {
+          this.select.setAttribute(attr, '')
+          this.setAttribute(attr, '')
+        })
+      }
+    }
+  }
+
+  _isObject(v: any) {
+    return v instanceof Object && !Array.isArray(v)
+  }
+
+  focus() {
+    this.select.focus()
+  }
+
+  blur() {
+    this.select.blur()
+  }
+
+  checkValidity() {
+    return this.select.checkValidity()
+  }
+}

package/src/components/ox-file-uploader.ts

@@ -0,0 +1,163 @@
+import { LitElement, css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { FileDropHelper } from '@operato/utils'
+
+@customElement('ox-file-uploader')
+export class FileUploader extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--border-radius);
+        text-align: center;
+        padding-bottom: 5px !important;
+        text-transform: capitalize;
+
+        border: var(--file-uploader-border);
+        background-color: var(--main-section-background-color);
+        font: var(--file-uploader-font) !important;
+        color: var(--file-uploader-color);
+      }
+      :host > mwc-icon {
+        color: var(--file-uploader-icon-color);
+      }
+
+      :host(.candrop) {
+        background-color: var(--file-uploader-candrop-background-color);
+      }
+
+      #input-file {
+        display: none;
+      }
+
+      label {
+        position: relative;
+        width: auto;
+        border: none;
+        text-transform: capitalize;
+
+        padding: var(--file-uploader-label-padding);
+        border-radius: var(--file-uploader-label-border-radius);
+        background-color: var(--file-uploader-label-background-color);
+        color: var(--file-uploader-label-color);
+        font: var(--file-uploader-label-font) !important;
+      }
+
+      ul {
+        max-width: 500px;
+        list-style: none;
+        padding: 0;
+      }
+      li {
+        text-align: left;
+
+        padding: var(--file-uploader-li-padding);
+        border-bottom: var(--file-uploader-li-border-bottom);
+      }
+      li mwc-icon {
+        float: right;
+        cursor: pointer;
+        font: var(--file-uploader-li-icon-font);
+        margin: var(--file-uploader-li-icon-margin);
+      }
+      li mwc-icon:hover,
+      li mwc-icon:active {
+        color: var(--file-uploader-li-icon-focus-color);
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) multiple: boolean = false
+  @property({ type: String }) accept: string = '*/*'
+  @property({ type: String }) label?: string
+
+  @property({ type: Array }) _files: File[] = []
+
+  @query('#input-file') fileInput!: HTMLInputElement
+
+  render() {
+    return html`
+      <mwc-icon>post_add</mwc-icon>
+      <span>add file or drop files here!</span>
+      <input
+        id="input-file"
+        type="file"
+        accept=${this.accept}
+        ?multiple=${this.multiple}
+        hidden
+        @change=${(e: Event) => {
+          const fileInput = e.currentTarget as HTMLInputElement
+          const files = fileInput.files as FileList
+          //// Temporary Validation preventing file size more than 10mb to be uploaded
+          for (let index = 0; index < files.length; index++) {
+            if (files[index].size > 9999999) {
+              document.dispatchEvent(
+                new CustomEvent('notify', {
+                  detail: {
+                    type: 'error',
+                    message: 'File size must be less than 10 MB.'
+                  }
+                })
+              )
+              throw new Error('File size must be less than 10 MB.')
+            }
+          }
+
+          this._files = [...this._files, ...Array.from(files)]
+
+          this.dispatchEvent(
+            new CustomEvent('files-change', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                files: files
+              }
+            })
+          )
+
+          fileInput.value = ''
+        }}
+      />
+      <label for="input-file">${this.label || 'select file'}</label>
+
+      ${this._files?.length
+        ? html` <ul>
+            ${this._files.map(
+              file => html`
+                <li>
+                  - ${file.name}
+                  <mwc-icon
+                    @click=${(e: Event) => {
+                      this._files.splice(this._files.indexOf(file), 1)
+                      this.requestUpdate()
+                    }}
+                    >delete_outline</mwc-icon
+                  >
+                </li>
+              `
+            )}
+          </ul>`
+        : ''}
+    `
+  }
+
+  firstUpdated() {
+    FileDropHelper.set(this)
+
+    this.addEventListener('file-drop', (e: Event) => {
+      const de = e as any
+      this._files = this.multiple ? de.detail : de.detail[0] ? [de.detail[0]] : []
+    })
+  }
+
+  get files() {
+    return this._files
+  }
+
+  reset() {
+    this.fileInput.value = ''
+    this._files = []
+  }
+}

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

@@ -0,0 +1,241 @@
+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.keyCode === 13) {
+            this.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}
+                    @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}
+                    @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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,46 @@
+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
+            >
+          `
+        )}
+    `
+  }
+}