@operato/form 2.0.0-alpha.8 → 2.0.0-alpha.85

package/src/components/ox-search-form.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './ox-custom-input.js'
 import './ox-custom-select.js'
 
@@ -83,68 +83,68 @@ export class SearchForm extends LitElement {
                   </select>
                 `
               : field.type === 'checkbox'
-              ? html`
-                  <input
-                    id="ckbx_${field.name}"
-                    type="checkbox"
-                    ?checked="${field.value}"
-                    .name=${field.name}
-                    ?hidden=${field.hidden}
-                    @click=${(e: MouseEvent) => {
-                      const checkbox = e.currentTarget as HTMLInputElement & { _value: any }
-                      if (checkbox.hasAttribute('indeterminate')) {
-                        const values = [undefined, 'on', 'off']
-                        const currentValue = checkbox._value
-                        const newValue =
-                          values.indexOf(currentValue) + 1 > values.length - 1
-                            ? values[0]
-                            : values[values.indexOf(currentValue) + 1]
+                ? html`
+                    <input
+                      id="ckbx_${field.name}"
+                      type="checkbox"
+                      ?checked="${field.value}"
+                      .name=${field.name}
+                      ?hidden=${field.hidden}
+                      @click=${(e: MouseEvent) => {
+                        const checkbox = e.currentTarget as HTMLInputElement & { _value: any }
+                        if (checkbox.hasAttribute('indeterminate')) {
+                          const values = [undefined, 'on', 'off']
+                          const currentValue = checkbox._value
+                          const newValue =
+                            values.indexOf(currentValue) + 1 > values.length - 1
+                              ? values[0]
+                              : values[values.indexOf(currentValue) + 1]
 
-                        if (newValue === 'on') {
-                          checkbox.checked = true
-                        } else if (newValue === 'off') {
-                          checkbox.checked = false
-                        } else {
-                          checkbox.indeterminate = true
+                          if (newValue === 'on') {
+                            checkbox.checked = true
+                          } else if (newValue === 'off') {
+                            checkbox.checked = false
+                          } else {
+                            checkbox.indeterminate = true
+                          }
+                          checkbox._value = newValue
                         }
-                        checkbox._value = newValue
-                      }
-                    }}
-                  />
-                  <label for="ckbx_${field.name}" ?hidden=${field.hidden}
-                    >${field.label || field.name || field.id}</label
-                  >
-                `
-              : field.type === 'object'
-              ? html`
-                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
-                  <input
-                    .type=${field.type}
-                    .value=${field.value || ''}
-                    .name=${field.name}
-                    .field=${field.field}
-                    .queryName=${field.queryName}
-                    .placeholder=${field.placeholder || ''}
-                    ?hidden=${field.hidden}
-                    ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
-                  />
-                `
-              : html`
-                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
-                  <input
-                    .type=${field.type}
-                    .value=${field.value || ''}
-                    .name=${field.name}
-                    .placeholder=${field.placeholder || ''}
-                    ?hidden=${field.hidden}
-                    ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
-                  />
-                `}
+                      }}
+                    />
+                    <label for="ckbx_${field.name}" ?hidden=${field.hidden}
+                      >${field.label || field.name || field.id}</label
+                    >
+                  `
+                : field.type === 'object'
+                  ? html`
+                      <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
+                      <input
+                        .type=${field.type}
+                        .value=${field.value || ''}
+                        .name=${field.name}
+                        .field=${field.field}
+                        .queryName=${field.queryName}
+                        .placeholder=${field.placeholder || ''}
+                        ?hidden=${field.hidden}
+                        ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
+                      />
+                    `
+                  : html`
+                      <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
+                      <input
+                        .type=${field.type}
+                        .value=${field.value || ''}
+                        .name=${field.name}
+                        .placeholder=${field.placeholder || ''}
+                        ?hidden=${field.hidden}
+                        ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
+                      />
+                    `}
           `
         )}
         ${this.hideSearchButton || false
           ? ``
-          : html`<mwc-icon @click=${(e: MouseEvent) => this.submit()} search>search</mwc-icon>`}
+          : html`<md-icon @click=${(e: MouseEvent) => this.submit()} search>search</md-icon>`}
       </form>
     `
   }
@@ -224,14 +224,14 @@ export class SearchForm extends LitElement {
             field.type === 'text'
               ? value
               : field.type === 'checkbox'
-              ? field.hasAttribute('indeterminate')
-                ? field._value === 'on'
-                  ? true
-                  : false
-                : (field as HTMLInputElement).checked
-              : field.type === 'number'
-              ? parseFloat(value)
-              : value,
+                ? field.hasAttribute('indeterminate')
+                  ? field._value === 'on'
+                    ? true
+                    : false
+                  : (field as HTMLInputElement).checked
+                : field.type === 'number'
+                  ? parseFloat(value)
+                  : value,
           operator
         }
       })
@@ -257,16 +257,16 @@ export class SearchForm extends LitElement {
               field.type === 'text' && field.getAttribute('type') === 'object'
                 ? await this._getResourceIds(field)
                 : field.type === 'text'
-                ? value
-                : field.type === 'checkbox'
-                ? field.hasAttribute('indeterminate')
-                  ? field._value === 'on'
-                    ? true
-                    : false
-                  : (field as HTMLInputElement).checked
-                : field.type === 'number'
-                ? parseFloat(value)
-                : value,
+                  ? value
+                  : field.type === 'checkbox'
+                    ? field.hasAttribute('indeterminate')
+                      ? field._value === 'on'
+                        ? true
+                        : false
+                      : (field as HTMLInputElement).checked
+                    : field.type === 'number'
+                      ? parseFloat(value)
+                      : value,
             relation: field.type === 'text' && field.getAttribute('type') === 'object'
           }
           return filter
@@ -285,14 +285,14 @@ export class SearchForm extends LitElement {
       query: gql`
         query {
           fetch: ${queryName}(${buildArgs({
-        filters: [
-          {
-            name: field,
-            operator: 'i_like',
-            value: `%${value}%`
-          }
-        ]
-      })}) {
+            filters: [
+              {
+                name: field,
+                operator: 'i_like',
+                value: `%${value}%`
+              }
+            ]
+          })}) {
             items {
               id
             }

package/src/filters/filter-checkbox.ts

@@ -2,10 +2,10 @@ import '@operato/input/ox-checkbox.js'
 
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
 
 export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
-  const { name } = filter
+  const { name, label } = filter
 
   return html`
     <ox-checkbox
@@ -13,6 +13,7 @@ export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
       ?checked=${value}
       indeterminatable
       ?indeterminate=${value === undefined}
+      left-label
       @change=${(e: CustomEvent) => {
         ;(e.target as HTMLElement).dispatchEvent(
           new CustomEvent('filter-change', {
@@ -26,6 +27,7 @@ export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
           })
         )
       }}
-    />
+      ><label><span>${label}</span></label></ox-checkbox
+    >
   `
 }

package/src/filters/filter-input-barcode.ts

@@ -2,7 +2,7 @@ import '@operato/input/ox-input-barcode.js'
 
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
 
 export const FilterInputBarcode: FilterSelectRenderer = (filter, value, owner) => {
   const { name, type } = filter

package/src/filters/filter-input.ts

@@ -1,6 +1,6 @@
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
 
 export const FilterInput: FilterSelectRenderer = (filter, value, owner) => {
   const { name, type } = filter

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

@@ -1,20 +1,35 @@
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
+
+function formatDate(type: string, date: Date) {
+  var year = date.getFullYear()
+  var month = ('0' + (date.getMonth() + 1)).slice(-2)
+  var day = ('0' + date.getDate()).slice(-2)
+  var hours = ('0' + date.getHours()).slice(-2)
+  var minutes = ('0' + date.getMinutes()).slice(-2)
+
+  var formatDate = year + '-' + month + '-' + day
+
+  return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes
+}
 
 export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
   var { name, type, operator } = filter
-  const [from, to] = value instanceof Array ? value : []
+  var [from, to] = value instanceof Array ? value : []
 
   if (type === 'datetime') {
     type = 'datetime-local'
   }
 
+  from = formatDate(type, new Date(from))
+  to = formatDate(type, new Date(to))
+
   return html`
     <input
       name=${name}
-      type=${type}
-      .value=${from}
+      type=${type as 'date' | 'datetime-local'}
+      value=${from}
       from
       @keyup=${(e: KeyboardEvent) => {
         if (e.key !== 'Enter') {
@@ -38,8 +53,8 @@ export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
     ~
     <input
       name=${name}
-      type=${type}
-      .value=${to}
+      type=${type as 'date' | 'datetime-local'}
+      value=${to}
       to
       @keyup=${(e: KeyboardEvent) => {
         if (e.key !== 'Enter') {

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
 
 export const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) => {
   const { name, operator } = filter

package/src/filters/filter-select.ts

@@ -2,7 +2,7 @@ import '@operato/input/ox-checkbox.js'
 
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
 
 export const FilterSelect: FilterSelectRenderer = (filter, value, owner) => {
   /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */

package/src/filters/filter-styles.ts

@@ -2,56 +2,65 @@ 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-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);
   }
 
   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);
   }
 
   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 +68,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'