@operato/form 1.0.0-beta.0 → 1.0.0-beta.11

package/src/filters/filter-select.ts

@@ -0,0 +1,47 @@
+import '@operato/input/ox-checkbox.js'
+
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from './types.js'
+
+export const FilterSelect: FilterSelectRenderer = (filter, value, owner) => {
+  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
+  var { name, type, operator, options = [] } = filter
+
+  if (typeof options === 'function') {
+    options = options.call(filter, owner)
+  }
+
+  options = options.map((option: any) => {
+    switch (typeof option) {
+      case 'string':
+        return {
+          display: option,
+          value: option
+        }
+      case 'object':
+        return {
+          display: option.display,
+          value: option.value
+        }
+      default:
+        return option
+    }
+  })
+
+  return operator === 'in'
+    ? html`
+        ${options
+          ?.filter((option: { display: string; value: any }) => !!option)
+          .map(
+            (option: { display: string; value: any }) =>
+              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
+          )}
+      `
+    : html`
+        ${options?.map(
+          (option: { display: string; value: any }) =>
+            html` <div option value=${option.value}>${option.display}&nbsp;</div> `
+        )}
+      `
+}

package/src/filters/filter-styles.ts

@@ -0,0 +1,87 @@
+import { css } from 'lit'
+
+export const FilterStyles = css`
+  :host {
+    --ox-input-placeholder-color: var(--primary-color);
+
+    --ox-input-padding: var(--padding-narrow) var(--padding-default);
+    --ox-input-border: 1px solid rgba(0, 0, 0, 0.2);
+    --ox-input-focus-border: 1px solid var(--primary-color);
+    --ox-input-border-radius: var(--border-radius);
+    --ox-input-font: normal 14px var(--theme-font);
+    --ox-input-color: var(--primary-text-color);
+
+    --ox-filters-form-gap: var(--margin-wide);
+    --ox-filters-form-label-font: var(--label-font);
+    --ox-filters-form-label-color: var(--label-color);
+    --ox-select-padding: 0 var(--padding-narrow);
+  }
+
+  label {
+    font: var(--ox-filters-form-label-font);
+    color: var(--ox-filters-form-label-color);
+  }
+  span {
+    margin-right: var(--margin-narrow);
+    text-transform: capitalize;
+  }
+
+  input::placeholder {
+    color: var(--ox-input-placeholder-color);
+    opacity: 0.6;
+  }
+
+  ox-select,
+  input {
+    padding: var(--ox-input-padding);
+    border: none;
+    border-bottom: var(--ox-input-border);
+    font: var(--ox-input-font);
+    color: var(--ox-input-color);
+  }
+
+  ox-select:focus,
+  input:focus {
+    outline: none;
+    border-bottom: var(--ox-input-focus-border);
+    color: var(--primary-color);
+  }
+  ox-select {
+    padding: var(--ox-select-padding);
+  }
+
+  input[type='number'] {
+    padding-right: var(--padding-narrow);
+    max-width: 90px;
+  }
+
+  input[type*='date'],
+  input[type*='time'],
+  input[type='week'],
+  input[type='month'] {
+    padding-right: var(--padding-narrow);
+    max-width: 170px;
+  }
+
+  @media only screen and (max-width: 460px) {
+    :host {
+      --ox-filters-form-label-font: bold 13px var(--theme-font);
+      --ox-input-font: normal 16px var(--theme-font);
+    }
+
+    ox-checkbox {
+      margin-top: var(--margin-narrow);
+    }
+
+    input[from],
+    input[to] {
+      max-width: 44%;
+    }
+
+    input[type*='datetime'][from],
+    input[type*='datetime'][to] {
+      padding-right: var(--padding-narrow);
+      min-width: 91%;
+    }
+  }
+`

package/src/filters/index.ts

@@ -0,0 +1,9 @@
+export * from './registry.js'
+
+export * from './filter-select.js'
+export * from './filter-input.js'
+export * from './filter-checkbox.js'
+export * from './filter-range-date.js'
+export * from './filter-range-number.js'
+
+export * from './ox-filters-form-base.js'

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

@@ -0,0 +1,261 @@
+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, PropertyValues, TemplateResult } from 'lit'
+import { customElement, property, queryAsync } from 'lit/decorators.js'
+
+import { FilterStyles } from './filter-styles.js'
+import { getFilterRenderer } from './registry.js'
+import { FilterConfig, FilterOperator, FilterValue } from './types.js'
+
+export type QueryFilterRangeValue = [from: number, to: number]
+
+export type QueryFilter = {
+  name: string
+  operator: FilterOperator
+  value: any
+}
+
+@customElement('ox-filters-form-base')
+export class FiltersFormBase extends LitElement {
+  static styles = [
+    FilterStyles,
+    css`
+      :host {
+        display: flex;
+      }
+
+      form {
+        flex: 1;
+
+        display: flex;
+        flex-flow: row wrap;
+        gap: var(--ox-filters-form-gap);
+      }
+
+      form > * {
+        display: flex;
+        align-items: center;
+      }
+
+      @media only screen and (max-width: 460px) {
+        form {
+          flex-direction: column;
+        }
+
+        label,
+        label span,
+        ox-select {
+          display: block;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: FilterValue[] = []
+  @property({ type: Object }) filters: FilterConfig[] = []
+  @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
+
+  @queryAsync('form') form!: HTMLFormElement
+
+  private _popstateEventHandler?: EventListener
+  private _filtersChangeHandler?: EventListener
+
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    this.renderRoot.addEventListener('change', async (e: Event) => {
+      this.dispatchEvent(
+        new CustomEvent('filters-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            filters: await this.getQueryFilters(),
+            from: 'filters-form'
+          }
+        })
+      )
+    })
+  }
+
+  render(): TemplateResult {
+    return html`
+      <form
+        @submit=${(e: Event) => {
+          e.preventDefault()
+        }}
+      >
+        ${this.filters.map((filter: FilterConfig) => {
+          const { name, label, type, operator } = 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
+
+          if (!renderer) {
+            return html``
+          }
+
+          return type === 'search'
+            ? html`<ox-input-search name="search" .value=${value}></ox-input-search>`
+            : type !== 'select'
+            ? html` <label filter-title><span>${label}</span> ${renderer(filter, value, this)} </label> `
+            : operator === 'in'
+            ? html`
+                <ox-select
+                  name=${name}
+                  placeholder=${label}
+                  .value=${value}
+                  @change=${(e: CustomEvent) =>
+                    e.target?.dispatchEvent(
+                      new CustomEvent('filter-change', {
+                        detail: {
+                          name,
+                          operator,
+                          value: e.detail
+                        }
+                      })
+                    )}
+                >
+                  <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}
+                  @change=${(e: CustomEvent) =>
+                    e.target?.dispatchEvent(
+                      new CustomEvent('filter-change', {
+                        detail: {
+                          name,
+                          operator,
+                          value: e.detail
+                        }
+                      })
+                    )}
+                >
+                  <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
+                </ox-select>
+              `
+        })}
+      </form>
+    `
+  }
+
+  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)
+        }
+      }
+    }
+  }
+
+  async getQueryFilters(): Promise<QueryFilter[]> {
+    const formData = new FormData(await this.form)
+
+    var filters = this.filters
+      .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 QueryFilter[]
+
+    return filters
+  }
+}

package/src/filters/registry.ts

@@ -0,0 +1,51 @@
+import { FilterCheckbox } from './filter-checkbox.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]
+}
+
+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/filters/types.ts

@@ -0,0 +1,47 @@
+import { TemplateResult } from 'lit-html'
+
+export type FilterOperator =
+  | 'search'
+  | 'eq'
+  | 'between'
+  | 'gte'
+  | 'lte'
+  | 'is_not_true'
+  | 'in'
+  | 'like'
+  | 'i_like'
+  | 'noteq'
+  | 'is_empty_num_id'
+  | 'is_blank'
+  | 'is_present'
+  | 'is_not_false'
+  | 'is_true'
+  | 'is_false'
+  | 'is_not_null'
+  | 'is_null'
+  | 'notin_with_null'
+  | 'notin'
+  | 'gt'
+  | 'lt'
+  | 'i_nlike'
+  | 'nlike'
+
+export type FilterConfig = {
+  name: string
+  label: string
+  type: string
+  operator?: FilterOperator
+  options?: { [key: string]: any }
+}
+
+export type FilterValue = {
+  name: string
+  operator: FilterOperator
+  value: string | number | boolean | string[] | number[] | undefined
+}
+
+export type FilterSelectRenderer = (
+  filter: FilterConfig,
+  value: string | number | boolean | string[] | number[] | any | undefined,
+  owner: Element
+) => TemplateResult | string | void

package/src/index.ts

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

package/themes/app-theme.css

@@ -0,0 +1,142 @@
+body {
+  /* theme color */
+  --primary-color-rgb: 130, 105, 96;
+  --primary-color: rgb(var(--primary-color-rgb));
+  --secondary-color-rgb: 78, 78, 90;
+  --secondary-color: rgb(var(--secondary-color-rgb));
+  --focus-color: var(--theme-white-color);
+  --primary-background-color: var(--secondary-color);
+  --secondary-background-color: #283644;
+  --main-section-background-color: #f5f2ee;
+  --theme-white-color: #fff;
+  --theme-black-color: rgba(0, 0, 0, 0.9);
+
+  --focus-background-color: var(--primary-color);
+  --primary-text-color: #3c3938;
+  --secondary-text-color: var(--primary-color);
+
+  --opacity-dark-color: rgba(0, 0, 0, 0.4);
+  --opacity-light-color: rgba(255, 255, 255, 0.8);
+
+  /* status color */
+  --status-success-color: #35a24a;
+  --status-warning-color: #ee8d03;
+  --status-danger-color: #d14946;
+  --status-info-color: #398ace;
+
+  /* common style */
+  --border-radius: 4px;
+  --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);
+  --border-light-color: 1px solid rgba(255, 255, 255, 0.3);
+
+  --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
+
+  --theme-font: 'Noto', Helvetica;
+
+  --margin-default: 9px;
+  --margin-narrow: 4px;
+  --margin-wide: 15px;
+  --padding-default: var(--margin-default);
+  --padding-narrow: var(--margin-narrow);
+  --padding-wide: var(--margin-wide);
+
+  --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);
+  --scrollbar-thumb-hover-color: var(--primary-color);
+
+  --fontsize-default: 14px;
+  --fontsize-small: 13px;
+  --fontsize-large: 16px;
+
+  /* app layout style */
+  --app-grid-template-area: 'header header header' 'nav main aside' 'nav footer aside';
+
+  /* title & description style */
+  --title-margin: var(--margin-narrow) 0;
+  --title-font: bold 24px var(--theme-font);
+  --title-text-color: var(--secondary-color);
+  --title-font-mobile: bold 20px var(--theme-font);
+
+  --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
+  --page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);
+  --page-description-color: var(--secondary-text-color);
+
+  --subtitle-padding: 12px 5px 3px 5px;
+  --subtitle-font: bold 18px var(--theme-font);
+  --subtitle-text-color: var(--primary-color);
+  --subtitle-border-bottom: 1px solid var(--primary-color);
+
+  /* icon style */
+  --icon-tiny-size: 24px;
+  --icon-default-size: 36px;
+  --icon-big-size: 48px;
+  --icon-default-color: var(--theme-white-color);
+
+  /* material design component themes */
+  --mdc-theme-on-primary: var(--theme-white-color);
+  --mdc-theme-primary: var(--secondary-text-color);
+  --mdc-theme-on-secondary: var(--theme-white-color);
+  --mdc-theme-secondary: var(--primary-color);
+  --mdc-button-outline-color: var(--primary-color);
+  --mdc-danger-button-primary-color: var(--status-danger-color);
+  --mdc-danger-button-outline-color: var(--status-danger-color);
+  --mdc-button-outline-width: 1px;
+  --mdc-button-horizontal-padding: 16px;
+
+  /* button style */
+  --button-background-color: #fafbfc;
+  --button-background-focus-color: var(--primary-color);
+  --button-border: var(--border-dark-color);
+  --button-border-radius: var(--border-radius);
+  --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
+  --button-padding: var(--padding-default);
+  --button-color: var(--secondary-color);
+  --button-font: normal 15px var(--theme-font);
+  --button-text-transform: capitalize;
+  --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
+  --button-activ-border: 1px solid var(--primary-color);
+
+  --button-primary-background-color: var(--primary-color);
+  --button-primary-active-background-color: var(--status-success-color);
+  --button-primary-padding: var(--margin-default) var(--margin-wide);
+  --button-primary-color: var(--theme-white-color);
+  --button-primary-font: bold 16px var(--theme-font);
+
+  /* table style */
+  --th-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+  --th-border-top: 2px solid var(--secondary-color);
+  --th-text-transform: capitalize;
+  --th-font: bold var(--fontsize-small) var(--theme-font);
+  --th-color: rgba(var(--secondary-color-rgb), 0.8);
+
+  --tr-background-color: var(--theme-white-color);
+  --tr-background-odd-color: rgba(255, 255, 255, 0.4);
+  --tr-background-hover-color: #e1f5fe;
+  --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
+  --td-padding: var(--padding-default);
+  --td-font: normal 13px var(--theme-font);
+  --td-color: var(--secondary-color);
+
+  /* form style */
+  --label-font: normal var(--fontsize-default) var(--theme-font);
+  --label-color: var(--secondary-color);
+  --label-text-transform: capitalize;
+  --input-margin: var(--margin-narrow) 0;
+  --input-padding: var(--padding-default);
+  --input-min-width: 200px;
+  --input-font: normal var(--fontsize-default) var(--theme-font);
+  --input-hint-font: normal var(--fontsize-small) var(--theme-font);
+  --input-hint-color: #666;
+  --input-container-max-width: 900px;
+  --fieldset-margin: var(--padding-wide) 0;
+  --fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);
+  --legend-padding: var(--padding-default) 0;
+  --legend-color: var(--secondary-text-color);
+  --legend-font: bold 16px var(--theme-font);
+}
+
+@media only screen and (max-width: 460px) {
+  body {
+    /* subtitle style */
+    --subtitle-margin: 0;
+  }
+}