@operato/data-grist 2.0.0-alpha.99 → 2.0.0-beta.1

package/src/editors/ox-grist-editor-select.ts

@@ -1,6 +1,38 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { until } from 'lit/directives/until.js'
+
+import { OxGristEditor } from './ox-grist-editor.js'
+import { SelectOption, SelectOptionObject } from '../types.js'
+
+function buildOptions(options: SelectOption[], value: any) {
+  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 html`
+    <select>
+      ${selectOptionObjects.map(
+        (option: any) => html`
+          <option ?selected=${option.value == value} value=${option.value}>${option.display}</option>
+        `
+      )}
+    </select>
+  `
+}
 
 @customElement('ox-grist-editor-select')
 export class OxGristEditorSelect extends OxGristEditor {
@@ -10,33 +42,14 @@ export class OxGristEditorSelect extends OxGristEditor {
 
     if (typeof options == 'function') {
       options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)
-    }
 
-    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
+      if (options instanceof Promise) {
+        return html`${until(options.then(options => buildOptions(options, this.value)))}`
+      } else {
+        return buildOptions((options || []) as SelectOption[], rowOptionField.display || this.value)
       }
-    })
-
-    return html`
-      <select>
-        ${options.map(
-          (option: any) => html`
-            <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>
-          `
-        )}
-      </select>
-    `
+    } else {
+      return buildOptions((options || []) as SelectOption[], this.value)
+    }
   }
 }

package/src/editors/ox-input-tree.ts

@@ -44,7 +44,7 @@ export class OxInputTree extends OxFormField {
       transform: translate(-25%, -50%) rotate(-90deg);
       content: ' ';
       border: 5px solid transparent;
-      border-top: 5px solid var(--primary-color, #1890ff);
+      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[expander][expanded]::before {
@@ -54,7 +54,7 @@ export class OxInputTree extends OxFormField {
       transform: translate(-50%, -25%);
       content: ' ';
       border: 5px solid transparent;
-      border-top: 5px solid var(--primary-color, #1890ff);
+      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox] {
@@ -76,13 +76,13 @@ export class OxInputTree extends OxFormField {
       display: block;
       width: 10px;
       height: 10px;
-      border: 1px solid var(--primary-color, #1890ff);
+      border: 1px solid var(--md-sys-color-on-primary-container, #1890ff);
       border-radius: 2px;
     }
 
     span[checkbox][checked='checked']::before {
-      background-color: var(--primary-color, #1890ff);
-      border-color: var(--primary-color, #1890ff);
+      background-color: var(--md-sys-color-on-primary-container, #1890ff);
+      border-color: var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox][checked='checked']::after {
@@ -102,8 +102,8 @@ export class OxInputTree extends OxFormField {
     }
 
     span[checkbox][checked='half-checked']::before {
-      background-color: var(--primary-color, #1890ff);
-      border-color: var(--primary-color, #1890ff);
+      background-color: var(--md-sys-color-on-primary-container, #1890ff);
+      border-color: var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox][checked='half-checked']::after {
@@ -115,7 +115,7 @@ export class OxInputTree extends OxFormField {
       transform: translate(-50%, -50%);
       width: 10px;
       height: 2px;
-      background-color: #fff;
+      background-color: var(--md-sys-color-surface);
     }
 
     span[label] {

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

@@ -28,6 +28,7 @@ export const FilterInputBarcode: FilterSelectRenderer = (column, value, owner) =
           })
         )
       }}
+      filter-input
     ></ox-input-barcode>
   `
 }

package/src/filters/filter-select.ts

@@ -1,26 +1,14 @@
 import '@operato/input/ox-checkbox.js'
 
-import { FilterConfigObject, FilterSelectRenderer } from '../types'
+import { html } from 'lit'
+import { until } from 'lit/directives/until.js'
 
-import { html } from 'lit-html'
+import { FilterConfigObject, FilterOperator, FilterSelectRenderer, SelectOption, SelectOptionObject } from '../types'
+import { OxFiltersForm } from './filters-form'
+import { DataGridHeader } from '../data-grid/data-grid-header'
 
-export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
-  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
-  const filter = column.filter as FilterConfigObject
-  const operator = filter?.operator
-
-  var options = filter?.options || column.record.options || []
-
-  if (typeof options === 'function') {
-    if (!filter?.options) {
-      console.warn(
-        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'
-      )
-    }
-    options = options.call(column, owner)
-  }
-
-  options = options.map((option: any) => {
+function buildOptions(options: SelectOption[], operator?: FilterOperator) {
+  const selectOptionObjects = options.map(option => {
     switch (typeof option) {
       case 'string':
         return {
@@ -29,27 +17,52 @@ export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
         }
       case 'object':
         return {
-          display: option.display,
+          display: option.display || option.name,
           value: option.value
         }
       default:
         return option
     }
-  })
+  }) as SelectOptionObject[]
 
   return operator === 'in'
     ? html`
-        ${options
-          ?.filter((option: { display: string; value: any }) => !!option)
+        ${selectOptionObjects
+          ?.filter(option => !!option)
           .map(
-            (option: { display: string; value: any }) =>
-              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
+            ({ value, display, name }) => html` <ox-checkbox option value=${value}>${display || name}</ox-checkbox> `
           )}
       `
     : html`
-        ${options?.map(
-          (option: { display: string; value: any }) =>
-            html` <div option value=${option.value}>${option.display}&nbsp;</div> `
+        ${selectOptionObjects?.map(
+          ({ value, display, name }) => html` <div option value=${value}>${display || name}&nbsp;</div> `
         )}
       `
 }
+
+export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
+  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
+  const filter = column.filter as FilterConfigObject
+  const operator = filter?.operator
+  const form = owner as OxFiltersForm | DataGridHeader
+
+  var options = filter?.options || column.record.options || []
+
+  if (typeof options === 'function') {
+    if (!filter?.options) {
+      console.warn(
+        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'
+      )
+    }
+
+    options = options.call(null, value, column, form instanceof OxFiltersForm ? form.getFormObjectValue() : {}, 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

@@ -2,15 +2,15 @@ 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));
 
     --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-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-outline-variant));
     --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);
@@ -22,7 +22,7 @@ export const FilterStyles = css`
 
   label {
     font: var(--ox-filters-label-font);
-    color: var(--ox-filters-label-color);
+    color: var(--ox-filters-label-color, var(--md-sys-color-on-surface));
   }
 
   span {
@@ -30,44 +30,40 @@ export const FilterStyles = css`
   }
 
   input::placeholder {
-    color: var(--ox-filters-input-placeholder-color);
+    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-surface-dim));
     opacity: 0.6;
   }
 
-  input {
+  input,
+  ox-input-search,
+  [filter-input] {
     padding: var(--ox-filters-input-padding);
   }
 
-  label > span + *,
   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));
     background-color: var(--ox-filters-input-background-color, transparent);
   }
 
-  label > span + * {
-    min-width: 120px;
-  }
-
   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);
+    border-bottom: var(--ox-filters-input-focus-border, var(--md-sys-color-outline-variant));
+    color: var(--ox-filters-input-focus-color, var(--md-sys-color-on-surface-variant));
   }
 
   ox-select {
-    min-width: 100px;
+    min-width: 90px;
     max-width: 170px;
   }
 
-  ox-input-barcode {
-    min-width: 150px;
-  }
-
   ox-input-search {
     max-width: 150px;
   }
@@ -83,21 +79,40 @@ 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[type*='datetime'][from],
-    input[type*='datetime'][to] {
-      padding-right: var(--padding-narrow);
-      min-width: 91%;
+    input {
+      flex: 1;
     }
   }
 `