@operato/form 2.0.0-alpha.94 → 2.0.0-beta.1

package/src/filters/filter-styles.ts

@@ -2,27 +2,30 @@ import { css } from 'lit'
 
 export const FilterStyles = css`
   :host {
-    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));
+    --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 rgba(0, 0, 0, 0.2));
-    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));
+    --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-ref-palette-primary50));
     --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-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(--primary-text-color));
+    --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: var(--input-padding, 6px 2px);
+    --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: var(--ox-filters-label-font);
-    color: var(--ox-filters-label-color);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    color: var(--md-sys-color-primary);
   }
 
   span {
@@ -30,28 +33,34 @@ export const FilterStyles = css`
   }
 
   input::placeholder {
-    color: var(--ox-filters-input-placeholder-color);
-    opacity: 0.6;
+    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-on-surface-variant));
+    opacity: 0.7;
   }
 
-  input {
+  input,
+  ox-input-search,
+  [filter-input] {
     padding: var(--ox-filters-input-padding);
+    height: var(--form-element-height-medium);
   }
 
   ox-select,
-  input {
+  ox-input-search,
+  input,
+  [filter-input] {
     border: none;
-    border-bottom: var(--ox-filters-input-border);
+    border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));
     font: var(--ox-filters-input-font);
-    color: var(--ox-filters-input-color);
+    color: var(--ox-filters-input-color, var(--md-sys-color-on-surface-variant));
     background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   ox-select:focus,
-  input:focus {
+  input:focus,
+  [filter-input]:focus {
     outline: none;
     border-bottom: var(--ox-filters-input-focus-border);
-    color: var(--ox-filters-input-focus-color);
+    color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));
   }
 
   ox-select {
@@ -74,21 +83,44 @@ export const FilterStyles = css`
     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);
     }
 
-    input[from],
-    input[to] {
-      max-width: 44%;
+    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;
     }
 
-    input[type*='datetime'][from],
-    input[type*='datetime'][to] {
-      padding-right: var(--padding-narrow);
-      min-width: 91%;
+    [readonly] {
+      background-color: #f0f0f0;
     }
   }
 `

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

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