@operato/form 8.0.0-beta.0 → 8.0.0-beta.2

package/src/filters/ox-filters-form-base.ts

@@ -1,437 +0,0 @@
-import '@operato/input/ox-checkbox.js'
-import '@operato/input/ox-select.js'
-import '@operato/popup/ox-popup-list.js'
-import '@operato/input/ox-input-search.js'
-
-import json5 from 'json5'
-import { css, html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
-import { customElement, property, queryAsync, state } from 'lit/decorators.js'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-import { getDefaultValue } from '@operato/time-calculator'
-import { PagePreferenceProvider } from '@operato/p13n'
-
-import { FilterStyles } from './filter-styles.js'
-import { getFilterRenderer } from './registry.js'
-import { FilterConfig, FilterOperator, FilterSelectRenderer, FilterValue, PersonalFilterPreference } from '../types.js'
-
-export type QueryFilterRangeValue = [from: number, to: number]
-
-@customElement('ox-filters-form-base')
-export class OxFiltersFormBase extends LitElement {
-  static styles = [
-    MDTypeScaleStyles,
-    FilterStyles,
-    css`
-      :host {
-        display: flex;
-        padding: var(--spacing-small);
-      }
-
-      form {
-        flex: 1;
-
-        display: flex;
-        flex-flow: row wrap;
-        gap: var(--spacing-medium) var(--spacing-large);
-      }
-
-      form > * {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-small, 4px);
-      }
-
-      label span {
-        display: block;
-      }
-
-      @media only screen and (max-width: 460px) {
-        form {
-          flex-direction: column;
-          flex-flow: column;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Array }) value: FilterValue[] = []
-  @property({ type: Array }) filters: FilterConfig[] = []
-  @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
-  @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true
-  @property({ type: Object }) personalConfigProvider?: PagePreferenceProvider
-
-  @state() personalConfig?: PersonalFilterPreference
-  @state() personalFilters?: FilterConfig[]
-
-  @queryAsync('form') form!: HTMLFormElement
-
-  private _popstateEventHandler?: EventListener
-  private _filtersChangeHandler?: EventListener
-  private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    this.renderRoot.addEventListener('change', async (e: Event) => {
-      const { target, detail: value } = e as CustomEvent
-      const name = (target as HTMLInputElement).name
-      const {
-        label,
-        type,
-        operator,
-        value: defaultValue,
-        onchange
-      } = (this.personalFilters || []).find(filter => filter.name == name) || {}
-
-      if (this.autoUpdateTargetsOnChange[name]) {
-        /* 
-          일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함.
-          */
-        ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {
-          const target = this.renderRoot.querySelector(`[name='${name}']`)
-          if (target) {
-            ;(target as HTMLInputElement).value = ''
-          }
-        })
-
-        this.requestUpdate()
-      }
-
-      const keepGoing = onchange ? await onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true
-
-      // filters-form과 동일하게 value 세팅 X (셋팅후 다시 셋팅하여 랜더링을 다시하면서 값이 깨짐)
-      // this.value = await this.getQueryFilters()
-
-      keepGoing &&
-        this.dispatchEvent(
-          new CustomEvent('filters-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              filters: this.value,
-              from: 'filters-form'
-            }
-          })
-        )
-    })
-  }
-
-  buildDefaultValue(operator: FilterOperator, defaultValue: any) {
-    if (defaultValue === undefined) {
-      return
-    }
-    if (operator == 'between') {
-      return defaultValue instanceof Array && (defaultValue as Array<any>).map(v => getDefaultValue(v, this))
-    } else {
-      return getDefaultValue(defaultValue, this)
-    }
-  }
-
-  render(): TemplateResult {
-    return html`
-      <form
-        class="md-typescale-body-medium-prominent"
-        @submit=${(e: Event) => {
-          e.preventDefault()
-        }}
-      >
-        ${(this.personalFilters || [])
-          .filter(filter => !filter.hidden)
-          .map((filter: FilterConfig) => {
-            const { name, label, type, operator, readonly, value: defaultValue } = filter
-            const idx = operator === 'between' ? 1 : 0
-            const renderer = getFilterRenderer(
-              operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'
-                ? 'text'
-                : type
-            )[idx]
-
-            const value =
-              this.value?.find(filter => filter.name == name)?.value ?? this.buildDefaultValue(operator!, defaultValue)
-
-            if (!renderer) {
-              return nothing
-            }
-
-            return type === 'search'
-              ? html`<ox-input-search
-                  name="search"
-                  .value=${value}
-                  ?autofocus=${this.autofocus}
-                  ?readonly=${readonly}
-                ></ox-input-search>`
-              : type === 'boolean' || type === 'checkbox'
-                ? renderer(filter, value, this)
-                : type !== 'select'
-                  ? html`
-                      <label filter-title ?between=${operator == 'between'}
-                        ><span>${label}</span> ${renderer(filter, value, this)}
-                      </label>
-                    `
-                  : this.renderSelect(filter, value, renderer)
-          })}
-      </form>
-
-      <slot name="setting"></slot>
-    `
-  }
-
-  renderSelect(filter: FilterConfig, value: any, renderer: FilterSelectRenderer) {
-    const { name, label, operator, readonly, value: defaultValue } = filter
-
-    return operator === 'in'
-      ? html`
-          <ox-select
-            name=${name}
-            placeholder=${label}
-            .value=${value ?? defaultValue}
-            @change=${(e: CustomEvent) =>
-              e.target?.dispatchEvent(
-                new CustomEvent('filter-change', {
-                  detail: {
-                    name,
-                    operator,
-                    value: e.detail
-                  }
-                })
-              )}
-            ?readonly=${readonly}
-          >
-            <ox-popup-list multiple attr-selected="checked" with-search>
-              ${renderer(filter, value, this)}
-            </ox-popup-list>
-          </ox-select>
-        `
-      : html`
-          <ox-select
-            name=${name}
-            placeholder=${label}
-            .value=${value ?? defaultValue}
-            @change=${(e: CustomEvent) =>
-              e.target?.dispatchEvent(
-                new CustomEvent('filter-change', {
-                  detail: {
-                    name,
-                    operator,
-                    value: e.detail
-                  }
-                })
-              )}
-            ?readonly=${readonly}
-          >
-            <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
-          </ox-select>
-        `
-  }
-
-  async updated(changes: PropertyValues<this>) {
-    if (changes.has('urlParamsSensitive')) {
-      if (this.urlParamsSensitive) {
-        this._popstateEventHandler = () => {
-          const queryString = window.location.search
-          const urlParams = new URLSearchParams(queryString)
-          var filters = urlParams.get('filters')
-
-          if (filters) {
-            try {
-              this.value = json5.parse(filters)
-              this.dispatchEvent(
-                new CustomEvent('filters-change', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    filters: json5.parse(filters),
-                    from: 'url-parameter'
-                  }
-                })
-              )
-            } catch (e) {
-              console.error(`invalid filters params on URL query string : ${e}`)
-            }
-          }
-        }
-
-        //@ts-ignore
-        this._popstateEventHandler() // call for the first time
-
-        window.addEventListener('popstate', this._popstateEventHandler)
-
-        this._filtersChangeHandler = (e: Event) => {
-          const urlParams = new URLSearchParams(window.location.search)
-          const { filters, from } = (e as CustomEvent).detail || {}
-
-          if (from === 'url-parameter') {
-            return
-          }
-
-          if (filters.length > 0) {
-            urlParams.set('filters', json5.stringify(filters))
-          } else {
-            urlParams.delete('filters')
-          }
-          const queryString = String(urlParams)
-          const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`
-
-          history.pushState({}, document.title, url)
-        }
-
-        this.addEventListener('filters-change', this._filtersChangeHandler)
-      } else {
-        if (this._popstateEventHandler) {
-          window.removeEventListener('popstate', this._popstateEventHandler)
-        }
-        if (this._filtersChangeHandler) {
-          this.removeEventListener('popstate', this._filtersChangeHandler)
-        }
-      }
-    }
-
-    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {
-      this.personalConfig = await this.personalConfigProvider.load()
-    } else if (changes.has('filters') || changes.has('personalConfig')) {
-      this.applyUpdatedConfiguration()
-    }
-  }
-
-  async applyUpdatedConfiguration() {
-    if (!this.filters) {
-      return
-    }
-
-    if (!this.personalConfig) {
-      this.personalFilters = [...this.filters]
-    } else {
-      const { filters: personalFilters } = this.personalConfig
-
-      if (personalFilters) {
-        const xfilters = this.filters.map((filter: Partial<FilterConfig>) => {
-          const personalFilter = personalFilters.find(pFilter => pFilter.name == filter.name)
-          return personalFilter ? { ...filter, ...personalFilter } : filter
-        })
-
-        function reorderList(a: Partial<FilterConfig>[], b: Partial<FilterConfig>[]): Partial<FilterConfig>[] {
-          // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움
-          const result = new Array(a.length)
-
-          // b 배열에 없는 아이템은 원래 위치로 채움
-          a.forEach((item, index) => {
-            if (!item.name || !b.find(bi => bi.name == item.name)) {
-              result[index] = item
-            }
-          })
-
-          b.forEach(item => {
-            const ai = a.find(ai => ai.name == item.name)
-            if (ai) {
-              result[result.findIndex(slot => slot === undefined)] = ai
-            }
-          })
-
-          return result
-        }
-
-        // 배열 재정렬 실행
-        this.personalFilters = reorderList(xfilters as any, personalFilters as any) as FilterConfig[]
-      }
-    }
-
-    this.autoUpdateTargetsOnChange = {}
-
-    this.personalFilters
-      ?.filter(filter => filter.boundTo && filter.boundTo.length > 0)
-      .map(({ name, boundTo }) => {
-        boundTo!.forEach(to => {
-          const origin = this.autoUpdateTargetsOnChange[to] || []
-          if (name && !origin.includes(name)) {
-            this.autoUpdateTargetsOnChange[to] = [...origin, name]
-          }
-        })
-      })
-
-    if (!this.urlParamsSensitive) {
-      this.value = await this.getQueryFilters()
-    }
-  }
-
-  getFieldByName(name: string) {
-    return this.renderRoot.querySelector(`[name=${name}]`)
-  }
-
-  async getQueryFilters(): Promise<FilterValue[]> {
-    const formData = new FormData(await this.form)
-
-    var filters = (this.personalFilters || [])
-      .map((filter: FilterConfig) => {
-        const { name, type, operator } = filter
-
-        var value = formData.getAll(name)
-        if (value.length == 0) {
-          return
-        }
-
-        if (-1 === value.findIndex(v => v !== '')) {
-          return
-        }
-
-        const filterValue = value.map(v => {
-          const value = v.toString()
-
-          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */
-          switch (type) {
-            case 'integer':
-            case 'float':
-            case 'number':
-            case 'progress':
-            case 'checkbox':
-            case 'boolean':
-              return !value ? undefined : JSON.parse(value)
-            default:
-              return value
-          }
-        })
-
-        return {
-          name,
-          operator,
-          value: filterValue.length === 1 ? filterValue[0] : filterValue
-        }
-      })
-      .filter(result => result !== undefined) as FilterValue[]
-
-    return filters
-  }
-
-  reset(value?: string[] | { [field: string]: any }) {
-    this.form
-      .then((form: HTMLFormElement) => {
-        if (value) {
-          if (value instanceof Array) {
-            value
-              .filter(item => typeof item == 'string')
-              .forEach(item => {
-                const field = this.getFieldByName(item)
-                if (field) {
-                  ;(field as HTMLInputElement).value = ''
-                }
-              })
-          } else {
-            const keys = Object.keys(value)
-            keys
-              .filter(key => typeof key == 'string')
-              .forEach(key => {
-                const field = this.getFieldByName(key)
-                if (field) {
-                  ;(field as HTMLInputElement).value = value[key]
-                }
-              })
-          }
-        } else {
-          form.reset()
-        }
-      })
-      .catch((error: any) => {
-        console.error('Error resetting the form:', error)
-      })
-  }
-}

package/src/filters/registry.ts

@@ -1,54 +0,0 @@
-import { FilterCheckbox } from './filter-checkbox.js'
-import { FilterInputBarcode } from './filter-input-barcode.js'
-import { FilterInput } from './filter-input.js'
-import { FilterRangeDate } from './filter-range-date.js'
-import { FilterRangeNumber } from './filter-range-number.js'
-import { FilterSelect } from './filter-select.js'
-import { FilterSelectRenderer } from '../types.js'
-
-var RENDERERS: {
-  [name: string]: FilterSelectRenderer[]
-} = {
-  string: [FilterInput],
-  text: [FilterInput],
-  email: [FilterInput],
-  tel: [FilterInput],
-  integer: [FilterInput, FilterRangeNumber],
-  float: [FilterInput, FilterRangeNumber],
-  number: [FilterInput, FilterRangeNumber],
-  select: [FilterSelect],
-  boolean: [FilterCheckbox],
-  checkbox: [FilterCheckbox],
-  month: [FilterInput, FilterRangeDate],
-  week: [FilterInput, FilterRangeDate],
-  date: [FilterInput, FilterRangeDate],
-  time: [FilterInput, FilterRangeDate],
-  datetime: [FilterInput, FilterRangeDate],
-  color: [FilterInput],
-  progress: [FilterInput, FilterRangeNumber],
-  link: [FilterInput],
-  image: [FilterInput],
-  json5: [FilterInput],
-  scanner: [FilterInputBarcode],
-  barcode: [FilterInputBarcode]
-}
-
-export function registerFilterRenderer(type: string, renderer: FilterSelectRenderer[]) {
-  RENDERERS[type] = renderer
-}
-
-export function unregisterFilterRenderer(type: string): void {
-  delete RENDERERS[type]
-}
-
-export function getFilterRenderers(): { [name: string]: FilterSelectRenderer[] } {
-  return { ...RENDERERS }
-}
-
-export function getFilterRenderer(type: string): FilterSelectRenderer[] {
-  if (typeof type == 'function') {
-    return type
-  }
-
-  return RENDERERS[type || 'text'] || [FilterInput]
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './styles'
-export * from './components/ox-search-form'
-export * from './components/ox-file-uploader'
-export * from './filters'

package/src/styles/index.ts

@@ -1,3 +0,0 @@
-export * from './single-column-form-styles'
-export * from './multi-column-form-styles'
-export * from './search-form-styles'

package/src/styles/multi-column-form-styles.ts

@@ -1,192 +0,0 @@
-import { css } from 'lit'
-
-export const MultiColumnFormStyles = css`
-  :host {
-    overflow: auto;
-    padding: var(--form-container-padding);
-  }
-
-  .multi-column-form {
-    display: grid;
-    grid-template-columns: repeat(24, 1fr);
-    grid-gap: var(--form-grid-gap);
-    grid-auto-rows: minmax(24px, auto);
-    max-width: var(--form-multi-column-max-width);
-    margin: var(--form-margin);
-  }
-  .multi-column-form fieldset {
-    display: contents;
-  }
-  .multi-column-form legend {
-    grid-column: span 24;
-    text-transform: capitalize;
-
-    padding: var(--legend-padding);
-    font: var(--legend-font);
-    color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));
-    border-bottom: var(--legend-border-bottom);
-  }
-
-  .multi-column-form label {
-    grid-column: span 3;
-    text-align: right;
-    text-transform: capitalize;
-    align-self: center;
-
-    color: var(--label-color, var(--md-sys-color-on-surface));
-    font: var(--label-font);
-  }
-
-  .multi-column-form input,
-  .multi-column-form table,
-  .multi-column-form select,
-  .multi-column-form textarea,
-  .multi-column-form [custom-input] {
-    grid-column: span 9;
-
-    border: var(--input-field-border);
-    border-radius: var(--input-field-border-radius);
-    padding: var(--input-field-padding);
-    font: var(--input-field-font);
-    max-width: 85%;
-  }
-  .multi-column-form select {
-    min-height: 25px;
-    max-width: calc(85% + 18px);
-  }
-
-  .multi-column-form input[type='checkbox'],
-  .multi-column-form input[type='radio'] {
-    justify-self: end;
-    align-self: center;
-    grid-column: span 3 / auto;
-    position: relative;
-    left: 17px;
-  }
-
-  .multi-column-form input[type='checkbox'] + label,
-  .multi-column-form input[type='radio'] + label {
-    padding-left: 17px;
-    text-align: left;
-    align-self: center;
-    grid-column: span 9 / auto;
-
-    font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color, var(--md-sys-color-secondary));
-  }
-  .multi-column-form [options-wrap] {
-    grid-column: span 21 / auto;
-  }
-
-  input:focus {
-    outline: none;
-    border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));
-  }
-  input[type='checkbox'] {
-    margin: 0;
-  }
-
-  @media screen and (max-width: 460px) {
-    .multi-column-form {
-      max-width: 100%;
-      grid-template-columns: repeat(12, 1fr);
-      grid-gap: 5px;
-    }
-    .multi-column-form legend {
-      grid-column: span 12;
-    }
-    .multi-column-form label {
-      grid-column: span 4 / auto;
-      text-align: left;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-    .multi-column-form input,
-    .multi-column-form table,
-    .multi-column-form select,
-    .multi-column-form textarea,
-    .multi-column-form [custom-input] {
-      grid-column: span 8 / auto;
-      max-width: initial;
-      padding: var(--padding-default, var(--spacing-medium));
-      font: normal 15px var(--theme-font);
-    }
-    .multi-column-form input[type='checkbox'],
-    .multi-column-form input[type='radio'] {
-      justify-self: left;
-      align-self: center;
-      grid-column: span 1 / auto;
-      left: 0;
-      zoom: 1.4;
-    }
-
-    .multi-column-form input[type='checkbox'] + label,
-    .multi-column-form input[type='radio'] + label {
-      grid-column: span 11 / auto;
-      align-self: center;
-      position: relative;
-      left: -25px;
-    }
-    .multi-column-form [options-wrap] {
-      grid-column: span 12 / auto;
-      display: grid;
-      grid-gap: var(--padding-default, var(--spacing-small)) var(--spacing-small, var(--spacing-small));
-      grid-template-columns: repeat(12, 1fr);
-    }
-    .multi-column-form [options-wrap] input[type='checkbox'] + label,
-    .multi-column-form [options-wrap] input[type='radio'] + label {
-      grid-column: span 5 / auto;
-      align-self: left;
-      left: -4%;
-      margin-right: 0;
-    }
-  }
-  @media (min-width: 481px) and (max-width: 1024px) {
-    .multi-column-form select {
-      max-width: calc(85% + 10px);
-    }
-  }
-  @media screen and (min-width: 1201px) and (max-width: 2000px) {
-    .multi-column-form {
-      grid-template-columns: repeat(36, 1fr);
-    }
-    .multi-column-form legend {
-      grid-column: span 36;
-    }
-    .multi-column-form input,
-    .multi-column-form table,
-    .multi-column-form select,
-    .multi-column-form textarea,
-    .multi-column-form [custom-input] {
-      max-width: 90%;
-    }
-    .multi-column-form select {
-      max-width: calc(90% + 18px);
-    }
-    .multi-column-form [options-wrap] {
-      grid-column: span 33 / auto;
-    }
-  }
-  @media screen and (min-width: 2001px) {
-    .multi-column-form {
-      grid-template-columns: repeat(48, 1fr);
-    }
-    .multi-column-form legend {
-      grid-column: span 48;
-    }
-    .multi-column-form input,
-    .multi-column-form table,
-    .multi-column-form select,
-    .multi-column-form textarea,
-    .multi-column-form [custom-input] {
-      max-width: 90%;
-    }
-    .multi-column-form select {
-      max-width: calc(90% + 18px);
-    }
-    .multi-column-form [options-wrap] {
-      grid-column: span 45 / auto;
-    }
-  }
-`