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

package/src/filters/filter-range-number.ts

@@ -1,64 +0,0 @@
-import { html } from 'lit-html'
-
-import { FilterSelectRenderer } from '../types.js'
-
-export const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) => {
-  const { name, operator, readonly } = filter
-  const [from, to] = value instanceof Array ? value : []
-
-  return html`
-    <input
-      name=${name}
-      type="number"
-      placeholder="minimum"
-      .value=${from}
-      from
-      @keyup=${(e: KeyboardEvent) => {
-        if (e.key !== 'Enter') {
-          return
-        }
-        ;(e.target as HTMLElement).dispatchEvent(
-          new CustomEvent('filter-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              name,
-              operator,
-              value: Array.from(
-                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')
-              ).map(input => (input as HTMLInputElement).value)
-            }
-          })
-        )
-      }}
-      ?readonly=${readonly}
-    />
-    ~
-    <input
-      name=${name}
-      type="number"
-      placeholder="maximum"
-      .value=${to}
-      to
-      @keyup=${(e: KeyboardEvent) => {
-        if (e.key !== 'Enter') {
-          return
-        }
-        ;(e.target as HTMLElement).dispatchEvent(
-          new CustomEvent('filter-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              name,
-              operator,
-              value: Array.from(
-                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')
-              ).map(input => (input as HTMLInputElement).value)
-            }
-          })
-        )
-      }}
-      ?readonly=${readonly}
-    />
-  `
-}

package/src/filters/filter-select.ts

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

package/src/filters/filter-styles.ts

@@ -1,127 +0,0 @@
-import { css } from 'lit'
-
-export const FilterStyles = css`
-  :host {
-    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface-variant));
-
-    --ox-filters-input-border: var(--input-border, 1px solid var(--md-sys-color-outline));
-    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-primary));
-    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
-    --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));
-    --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));
-    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
-    --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));
-    --ox-filters-input-background-color: transparent;
-
-    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
-    --ox-filters-input-padding: 0 var(--spacing-small);
-
-    --ox-select-padding: var(--ox-filters-input-padding);
-    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
-
-    --md-sys-color-on-primary: transparent;
-    --form-element-height-medium: var(--form-element-height-small);
-  }
-
-  label {
-    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-    color: var(--md-sys-color-primary);
-  }
-
-  span {
-    text-transform: capitalize;
-  }
-
-  input::placeholder {
-    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-on-surface-variant));
-    opacity: 0.7;
-  }
-
-  input,
-  ox-input-search,
-  [filter-input] {
-    padding: var(--ox-filters-input-padding);
-    height: var(--form-element-height-medium);
-  }
-
-  ox-select,
-  ox-input-search,
-  input,
-  [filter-input] {
-    border: none;
-    border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));
-    font: var(--ox-filters-input-font);
-    color: var(--ox-filters-input-color, var(--md-sys-color-on-surface-variant));
-    background-color: var(--ox-filters-input-background-color, transparent);
-    vertical-align: middle;
-  }
-
-  ox-select:focus,
-  input:focus,
-  [filter-input]:focus {
-    outline: none;
-    border-bottom: var(--ox-filters-input-focus-border);
-    color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));
-  }
-
-  ox-select {
-    min-width: 90px;
-    max-width: 170px;
-  }
-
-  ox-input-search {
-    max-width: 150px;
-  }
-
-  input[type='number'] {
-    max-width: 90px;
-  }
-
-  input[type*='date'],
-  input[type*='time'],
-  input[type='week'],
-  input[type='month'] {
-    max-width: 170px;
-  }
-
-  [filter-input] {
-    min-width: 140px;
-    max-width: 170px;
-  }
-
-  @media only screen and (max-width: 460px) {
-    :host {
-      --ox-filters-form-label-font: bold 13px var(--theme-font);
-      --ox-filters-input-font: normal 16px var(--theme-font);
-    }
-
-    ox-input-barcode {
-      max-width: unset;
-      flex: 1;
-    }
-
-    ox-input-search {
-      max-width: unset;
-    }
-
-    ox-select {
-      max-width: unset;
-    }
-
-    ox-checkbox {
-      max-width: unset;
-    }
-
-    input[type='number'] {
-      max-width: unset;
-    }
-
-    input {
-      flex: 1;
-    }
-
-    [readonly] {
-      background-color: #f0f0f0;
-    }
-  }
-`

package/src/filters/index.ts

@@ -1,10 +0,0 @@
-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'
-export * from '../types.js'

package/src/filters/ox-filter-personalizer.ts

@@ -1,188 +0,0 @@
-import '@material/web/button/outlined-button.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { i18next } from '@operato/i18n'
-import { OxPopupList } from '@operato/popup'
-
-import { FilterConfig, PersonalFilterPreference } from '../types.js'
-
-import { OxFiltersFormBase } from './ox-filters-form-base'
-import { OxCheckbox } from '@operato/input'
-
-@customElement('ox-filter-personalizer')
-export class OxFilterPersonalizer extends LitElement {
-  static styles = [
-    css`
-      md-icon {
-        --md-icon-size: 16px;
-        width: 36px;
-        height: 36px;
-        color: var(--md-sys-color-secondary-container);
-        cursor: pointer;
-
-        display: flex;
-        place-content: center;
-        place-items: center;
-        position: relative;
-
-        &:hover {
-          color: var(--md-sys-color-primary-container);
-        }
-      }
-
-      md-ripple {
-        border-radius: 50%;
-        inset: unset;
-        height: 36px;
-        width: 36px;
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: true }) debug: boolean = false
-
-  @state() private preference?: PersonalFilterPreference
-
-  render() {
-    return html`
-      <md-icon
-        @click=${async (e: MouseEvent) => {
-          const form = this.closest('ox-filters-form-base') as OxFiltersFormBase
-          const { filters, personalFilters = [] } = form
-          const queryFilters = await form.getQueryFilters()
-
-          this.preference = {
-            filters: (
-              personalFilters.map(filter => {
-                const originFilter = filters.find(f => f.name == filter.name)
-
-                if (!originFilter) {
-                  /* 원래 filters 설정에 있는 것들 만을 유지한다. */
-                  return
-                }
-
-                return {
-                  name: filter.name,
-                  hidden: filter.hidden,
-                  /* 만약, filters에 기본값이 이미 설정되어 있다면, 그대로 유지한다. */
-                  value: originFilter!.value ?? queryFilters.find(f => f.name == filter.name)?.value
-                }
-              }) || []
-            ).filter(Boolean) as Partial<FilterConfig>[]
-          }
-
-          const template = html`
-            <div class="personalizer-header" slot="header">
-              <md-icon
-                style="margin-left: auto;"
-                @click=${async (e: MouseEvent) => {
-                  if (form.personalConfigProvider) {
-                    form.personalConfig = await form.personalConfigProvider.save(this.preference)
-                  }
-                  popup.close()
-                }}
-                title=${String(i18next.t('button.save'))}
-                >keep</md-icon
-              ><md-icon
-                @click=${async (e: MouseEvent) => {
-                  if (form.personalConfigProvider) {
-                    form.personalConfig = this.preference = {}
-                    await form.personalConfigProvider.reset()
-                  }
-                  popup.close()
-                }}
-                title=${String(i18next.t('button.delete'))}
-                >keep_off</md-icon
-              ><md-icon @click=${async (e: MouseEvent) => popup.close()} title=${String(i18next.t('button.close'))}
-                >close</md-icon
-              >
-            </div>
-
-            ${this.preference?.filters!.map(
-              filter => html`
-                <ox-checkbox label="checkbox" ?checked=${!filter.hidden} value=${ifDefined(filter.name)} option
-                  >${filter.name}<span style="position: absolute; right: 10px; cursor: move;" handle
-                    >☰</span
-                  ></ox-checkbox
-                >
-              `
-            )}
-          `
-
-          const popup = OxPopupList.open({
-            template,
-            multiple: true,
-            sortable: true,
-            debug: this.debug,
-            attrSelected: 'checked',
-            top: e.pageY,
-            left: e.pageX,
-            styles: css`
-              :host {
-                width: 240px;
-                max-height: 300px;
-                overflow: auto;
-              }
-
-              ::slotted(.personalizer-header) {
-                --md-icon-size: 1.4em;
-
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                text-transform: capitalize;
-                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-              }
-
-              ::slotted([option]) {
-                position: relative;
-                user-select: none;
-              }
-            `
-          })
-
-          popup.onselect = (e: Event) => {
-            const selected = (e as CustomEvent).detail
-
-            const pconfig: PersonalFilterPreference = { ...form.personalConfig }
-            const pfilters = this.preference?.filters || form.filters
-
-            pconfig.filters = pfilters.map(filter => {
-              return {
-                name: filter.name,
-                hidden: selected.indexOf(filter.name) == -1,
-                value: filter.value
-              }
-            })
-
-            form.personalConfig = this.preference = pconfig
-
-            form.applyUpdatedConfiguration()
-          }
-
-          popup.addEventListener('sorted', (e: Event) => {
-            const sorted = (e as CustomEvent).detail as HTMLElement[]
-
-            const pconfig: PersonalFilterPreference = { ...form.personalConfig }
-            const pfilters = this.preference?.filters || form.filters
-
-            pconfig.filters = sorted
-              .map(element => {
-                const name = (element as OxCheckbox).value
-                return pfilters.find(filter => filter.name == name)!
-              })
-              .filter(Boolean)
-
-            form.personalConfig = this.preference = pconfig
-
-            form.applyUpdatedConfiguration()
-          })
-        }}
-        >settings<md-ripple></md-ripple
-      ></md-icon>
-    `
-  }
-}