@operato/form 2.0.0-alpha.0 → 2.0.0-alpha.104

package/src/filters/filter-styles.ts

@@ -2,56 +2,68 @@ 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);
+    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));
+
+    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
+    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));
+    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
+    --ox-filters-input-color: var(--input-color, var(--primary-text-color));
+    --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));
+    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
+    --ox-filters-label-color: var(--label-color, var(--primary-text-color));
+    --ox-filters-input-background-color: transparent;
+
+    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+    --ox-filters-input-padding: var(--input-padding, 6px 2px);
+
+    --ox-select-padding: var(--ox-filters-input-padding);
+    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   label {
-    font: var(--ox-filters-form-label-font);
-    color: var(--ox-filters-form-label-color);
+    font: var(--ox-filters-label-font);
+    color: var(--ox-filters-label-color);
   }
+
   span {
-    margin-right: var(--margin-narrow);
     text-transform: capitalize;
   }
 
   input::placeholder {
-    color: var(--ox-input-placeholder-color);
+    color: var(--ox-filters-input-placeholder-color);
     opacity: 0.6;
   }
 
+  input {
+    padding: var(--ox-filters-input-padding);
+  }
+
   ox-select,
   input {
-    padding: var(--input-padding);
     border: none;
-    border-bottom: var(--ox-input-border);
-    font: var(--ox-input-font);
-    color: var(--ox-input-color);
+    border-bottom: var(--ox-filters-input-border);
+    font: var(--ox-filters-input-font);
+    color: var(--ox-filters-input-color);
+    background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   ox-select:focus,
   input:focus {
     outline: none;
-    border-bottom: var(--ox-input-focus-border);
-    color: var(--primary-color);
+    border-bottom: var(--ox-filters-input-focus-border);
+    color: var(--ox-filters-input-focus-color);
   }
+
   ox-select {
-    padding: var(--ox-select-padding);
+    min-width: 90px;
+    max-width: 170px;
+  }
+
+  ox-input-search {
+    max-width: 150px;
   }
 
   input[type='number'] {
-    padding-right: var(--padding-narrow);
     max-width: 90px;
   }
 
@@ -59,15 +71,13 @@ export const FilterStyles = css`
   input[type*='time'],
   input[type='week'],
   input[type='month'] {
-    padding: 8px var(--padding-narrow) 8px var(--padding-default);
     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-filters-form-gap: var(--margin-narrow);
+      --ox-filters-input-font: normal 16px var(--theme-font);
     }
 
     input[from],

package/src/filters/index.ts

@@ -7,4 +7,4 @@ export * from './filter-range-date.js'
 export * from './filter-range-number.js'
 
 export * from './ox-filters-form-base.js'
-export * from './types.js'
+export * from '../types.js'

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

@@ -4,23 +4,19 @@ 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 { css, html, LitElement, nothing, PropertyValueMap, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property, queryAsync } from 'lit/decorators.js'
 
+import { getDefaultValue } from '@operato/time-calculator'
+
 import { FilterStyles } from './filter-styles.js'
 import { getFilterRenderer } from './registry.js'
-import { FilterConfig, FilterOperator, FilterValue } from './types.js'
+import { FilterConfig, FilterOperator, FilterSelectRenderer, 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 {
+export class OxFiltersFormBase extends LitElement {
   static styles = [
     FilterStyles,
     css`
@@ -39,6 +35,7 @@ export class FiltersFormBase extends LitElement {
       form > * {
         display: flex;
         align-items: center;
+        gap: var(--input-intra-gap, 7px);
       }
 
       label span {
@@ -53,8 +50,8 @@ export class FiltersFormBase extends LitElement {
     `
   ]
 
-  @property({ type: Object }) value: FilterValue[] = []
-  @property({ type: Object }) filters: FilterConfig[] = []
+  @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
 
@@ -62,24 +59,63 @@ export class FiltersFormBase extends LitElement {
 
   private _popstateEventHandler?: EventListener
   private _filtersChangeHandler?: EventListener
+  private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}
 
   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'
+      const { target, detail: value } = e as CustomEvent
+      const name = (target as HTMLInputElement).name
+      const {
+        label,
+        type,
+        operator,
+        value: defaultValue,
+        onchange
+      } = this.filters.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
+
+      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 as Array<any>).map(v => getDefaultValue(v, this))
+    } else {
+      return getDefaultValue(defaultValue, this)
+    }
+  }
+
   render(): TemplateResult {
     return html`
       <form
@@ -88,74 +124,88 @@ export class FiltersFormBase extends LitElement {
         }}
       >
         ${this.filters.map((filter: FilterConfig) => {
-          const { name, label, type, operator } = filter
+          const { name, label, type, operator, 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
+
+          const value =
+            this.value?.find(filter => filter.name == name)?.value ?? this.buildDefaultValue(operator!, defaultValue)
 
           if (!renderer) {
-            return html``
+            return nothing
           }
 
           return type === 'search'
             ? html`<ox-input-search name="search" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`
-            : type !== 'select'
-            ? html`
-                <label filter-title ?between=${operator == 'between'}
-                  ><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>
-              `
+            : 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>
     `
   }
 
-  async updated(changes: PropertyValues<this>) {
+  renderSelect(filter: FilterConfig, value: any, renderer: FilterSelectRenderer) {
+    const { name, label, operator, 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
+                  }
+                })
+              )}
+          >
+            <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
+                  }
+                })
+              )}
+          >
+            <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
+          </ox-select>
+        `
+  }
+
+  getFieldByName(name: string) {
+    return this.renderRoot.querySelector(`[name=${name}]`)
+  }
+
+  updated(changes: PropertyValues<this>) {
     if (changes.has('urlParamsSensitive')) {
       if (this.urlParamsSensitive) {
         this._popstateEventHandler = () => {
@@ -216,9 +266,23 @@ export class FiltersFormBase extends LitElement {
         }
       }
     }
+
+    if (changes.has('filters')) {
+      this.autoUpdateTargetsOnChange = {}
+      this.filters
+        ?.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]
+            }
+          })
+        })
+    }
   }
 
-  async getQueryFilters(): Promise<QueryFilter[]> {
+  async getQueryFilters(): Promise<FilterValue[]> {
     const formData = new FormData(await this.form)
 
     var filters = this.filters
@@ -257,7 +321,7 @@ export class FiltersFormBase extends LitElement {
           value: filterValue.length === 1 ? filterValue[0] : filterValue
         }
       })
-      .filter(result => result !== undefined) as QueryFilter[]
+      .filter(result => result !== undefined) as FilterValue[]
 
     return filters
   }

package/src/filters/registry.ts

@@ -4,7 +4,7 @@ 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'
+import { FilterSelectRenderer } from '../types.js'
 
 var RENDERERS: {
   [name: string]: FilterSelectRenderer[]

package/src/styles/search-form-styles.ts

@@ -84,7 +84,7 @@ export const SearchFormStyles = css`
       grid-gap: 10px 5px;
       background-color: var(--search-form-narrow-background-color);
 
-      max-height: 54px;
+      max-height: 100%;
       overflow-y: auto;
     }
     .search-form label {

package/src/types.ts

@@ -0,0 +1,96 @@
+import { TemplateResult } from 'lit-html'
+import { OxFiltersFormBase } from './filters/ox-filters-form-base'
+import { OxSearchForm } from './components/ox-search-form'
+
+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 SelectOptionObject =
+  | {
+      name: string
+      display?: never
+      value: string
+    }
+  | {
+      display: string
+      name?: never
+      value: string
+    }
+
+export type SelectOption = SelectOptionObject | string
+
+export type FilterChangedCallback = (value: any, form: OxFiltersFormBase) => boolean | Promise<boolean>
+
+export type FilterConfig = {
+  name: string
+  label: string
+  type: string
+  operator?: FilterOperator
+  options?:
+    | { [key: string]: any }
+    | SelectOption[]
+    | ((form: OxFiltersFormBase) => SelectOption[] | Promise<SelectOption[]>)
+  value?:
+    | string
+    | number
+    | boolean
+    | { name: string; [params: string]: any }
+    | string[]
+    | number[]
+    | { name: string; [params: string]: any }[]
+    | undefined
+  boundTo?: string[]
+  onchange?: FilterChangedCallback
+}
+
+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
+
+export type SearchFormField = {
+  type: string
+  hidden?: boolean
+  name?: string
+  id?: string
+  label?: string
+  placeholder?: string
+  value?: any
+  field?: string
+  queryName?: string
+  props?: { [prop: string]: string }
+  attrs?: string[]
+  options?: SelectOption[] | ((form: OxSearchForm) => SelectOption[] | Promise<SelectOption[]>)
+  boundTo?: string[]
+  handlers?: { [event: string]: EventListener }
+}

package/stories/{ox-filter-form-barcode.stories.ts → ox-filters-form-barcode.stories.ts}

@@ -1,10 +1,11 @@
+import { CommonHeaderStyles } from '@operato/styles'
 import '../src/filters/ox-filters-form-base.js'
 
 import { html, TemplateResult } from 'lit'
 
 export default {
   title: 'ox-filters-form-barcode',
-  component: 'ox-filters-form-barcode',
+  component: 'ox-filters-form-base',
   argTypes: {
     value: { control: 'object' },
     filters: { control: 'object' },
@@ -27,21 +28,37 @@ interface ArgTypes {
 const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="/themes/form-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <style>
-    body {
-    }
+    ${CommonHeaderStyles.cssText}
   </style>
 
-  <ox-filters-form-base
-    .value=${value}
-    .filters=${filters}
-    ?url-params-sensitive=${urlParamsSensitive}
-    @filters-change=${(e: CustomEvent) => {
-      console.log('filters changed', e.detail)
-    }}
-  >
-  </ox-filters-form-base>
+  <div class="header">
+    <div class="filters">
+      <ox-filters-form-base
+        .value=${value}
+        .filters=${filters}
+        ?url-params-sensitive=${urlParamsSensitive}
+        @filters-change=${(e: CustomEvent) => {
+          console.log('filters changed', e.detail)
+        }}
+      >
+      </ox-filters-form-base>
+    </div>
+  </div>
 `
 
 export const Regular = Template.bind({})