@operato/data-grist 2.0.0-alpha.102 → 2.0.0-alpha.104

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-alpha.104](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.103...v2.0.0-alpha.104) (2024-04-26)
+
+
+### :bug: Bug Fix
+
+* time-calculator help document ([cbd2543](https://github.com/hatiolab/operato/commit/cbd254317e6132473b0efa7d2f49b2a1748227ac))
+
+
+
+## [2.0.0-alpha.103](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.102...v2.0.0-alpha.103) (2024-04-26)
+
+
+### :bug: Bug Fix
+
+* ox-filter-form과 ox-search-form에서 필터들간에 연관 기능 지원 ([bc081f8](https://github.com/hatiolab/operato/commit/bc081f8dfbb303f8aa219f0b776aa0cc4b18e9cd))
+
+
+### :mega: Other
+
+* missing types ([ba44d36](https://github.com/hatiolab/operato/commit/ba44d36f525c0fc4cf48ebde54ff442e26a3e725))
+
+
+
 ## [2.0.0-alpha.102](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.101...v2.0.0-alpha.102) (2024-04-22)
 
 **Note:** Version bump only for package @operato/data-grist

package/dist/src/editors/ox-grist-editor-select.js

@@ -1,37 +1,49 @@
 import { __decorate } from "tslib";
-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';
+function buildOptions(options, value) {
+    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;
+        }
+    });
+    return html `
+    <select>
+      ${selectOptionObjects.map((option) => html `
+          <option ?selected=${option.value == value} value=${option.value}>${option.display}</option>
+        `)}
+    </select>
+  `;
+}
 let OxGristEditorSelect = class OxGristEditorSelect extends OxGristEditor {
     get editorTemplate() {
         var rowOptionField = this.record[this.column.record.rowOptionField || ''];
         var { options = [] } = rowOptionField ? rowOptionField : this.column.record;
         if (typeof options == 'function') {
             options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field);
-        }
-        options = options.map((option) => {
-            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 || []), rowOptionField.display || this.value);
             }
-        });
-        return html `
-      <select>
-        ${options.map((option) => html `
-            <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>
-          `)}
-      </select>
-    `;
+        }
+        else {
+            return buildOptions((options || []), this.value);
+        }
     }
 };
 OxGristEditorSelect = __decorate([

package/dist/src/editors/ox-grist-editor-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-editor-select.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-select.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAGnB,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,aAAa;IACpD,IAAI,cAAc;QAChB,IAAI,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,IAAI,EAAE,CAAC,CAAA;QACzE,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAA;QAE3E,IAAI,OAAO,OAAO,IAAI,UAAU,EAAE,CAAC;YACjC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAC/F,CAAC;QAED,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE;YACpC,QAAQ,OAAO,MAAM,EAAE,CAAC;gBACtB,KAAK,QAAQ;oBACX,OAAO;wBACL,OAAO,EAAE,MAAM;wBACf,KAAK,EAAE,MAAM;qBACd,CAAA;gBACH,KAAK,QAAQ;oBACX,OAAO;wBACL,OAAO,EAAE,MAAM,CAAC,OAAO;wBACvB,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAA;gBACH;oBACE,OAAO,MAAM,CAAA;YACjB,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;;UAEL,OAAO,CAAC,GAAG,CACX,CAAC,MAAW,EAAE,EAAE,CAAC,IAAI,CAAA;gCACC,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,UAAU,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO;WACvF,CACF;;KAEJ,CAAA;IACH,CAAC;CACF,CAAA;AApCY,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAoC/B","sourcesContent":["import { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-select')\nexport class OxGristEditorSelect extends OxGristEditor {\n  get editorTemplate() {\n    var rowOptionField = this.record[this.column.record.rowOptionField || '']\n    var { options = [] } = rowOptionField ? rowOptionField : this.column.record\n\n    if (typeof options == 'function') {\n      options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)\n    }\n\n    options = options.map((option: any) => {\n      switch (typeof option) {\n        case 'string':\n          return {\n            display: option,\n            value: option\n          }\n        case 'object':\n          return {\n            display: option.display,\n            value: option.value\n          }\n        default:\n          return option\n      }\n    })\n\n    return html`\n      <select>\n        ${options.map(\n          (option: any) => html`\n            <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>\n          `\n        )}\n      </select>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-grist-editor-select.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-select.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAGpD,SAAS,YAAY,CAAC,OAAuB,EAAE,KAAU;IACvD,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC/C,QAAQ,OAAO,MAAM,EAAE,CAAC;YACtB,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,MAAM;iBACd,CAAA;YACH,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI;oBACtC,KAAK,EAAE,MAAM,CAAC,KAAK;iBACpB,CAAA;YACH;gBACE,OAAO,MAAM,CAAA;QACjB,CAAC;IACH,CAAC,CAAyB,CAAA;IAE1B,OAAO,IAAI,CAAA;;QAEL,mBAAmB,CAAC,GAAG,CACvB,CAAC,MAAW,EAAE,EAAE,CAAC,IAAI,CAAA;8BACC,MAAM,CAAC,KAAK,IAAI,KAAK,UAAU,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO;SAClF,CACF;;GAEJ,CAAA;AACH,CAAC;AAGM,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,aAAa;IACpD,IAAI,cAAc;QAChB,IAAI,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,IAAI,EAAE,CAAC,CAAA;QACzE,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAA;QAE3E,IAAI,OAAO,OAAO,IAAI,UAAU,EAAE,CAAC;YACjC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;YAE7F,IAAI,OAAO,YAAY,OAAO,EAAE,CAAC;gBAC/B,OAAO,IAAI,CAAA,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;YACnF,CAAC;iBAAM,CAAC;gBACN,OAAO,YAAY,CAAC,CAAC,OAAO,IAAI,EAAE,CAAmB,EAAE,cAAc,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAA;YAC9F,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,YAAY,CAAC,CAAC,OAAO,IAAI,EAAE,CAAmB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QACpE,CAAC;IACH,CAAC;CACF,CAAA;AAjBY,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAiB/B","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { until } from 'lit/directives/until.js'\n\nimport { OxGristEditor } from './ox-grist-editor.js'\nimport { SelectOption, SelectOptionObject } from '../types.js'\n\nfunction buildOptions(options: SelectOption[], value: any) {\n  const selectOptionObjects = options.map(option => {\n    switch (typeof option) {\n      case 'string':\n        return {\n          display: option,\n          value: option\n        }\n      case 'object':\n        return {\n          display: option.display || option.name,\n          value: option.value\n        }\n      default:\n        return option\n    }\n  }) as SelectOptionObject[]\n\n  return html`\n    <select>\n      ${selectOptionObjects.map(\n        (option: any) => html`\n          <option ?selected=${option.value == value} value=${option.value}>${option.display}</option>\n        `\n      )}\n    </select>\n  `\n}\n\n@customElement('ox-grist-editor-select')\nexport class OxGristEditorSelect extends OxGristEditor {\n  get editorTemplate() {\n    var rowOptionField = this.record[this.column.record.rowOptionField || '']\n    var { options = [] } = rowOptionField ? rowOptionField : this.column.record\n\n    if (typeof options == 'function') {\n      options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)\n\n      if (options instanceof Promise) {\n        return html`${until(options.then(options => buildOptions(options, this.value)))}`\n      } else {\n        return buildOptions((options || []) as SelectOption[], rowOptionField.display || this.value)\n      }\n    } else {\n      return buildOptions((options || []) as SelectOption[], this.value)\n    }\n  }\n}\n"]}

package/dist/src/filters/filter-select.js

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

package/dist/src/filters/filter-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAItC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACzE,4DAA4D;IAC5D,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,QAAQ,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAA;IAEjC,IAAI,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,KAAI,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE5D,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAA,EAAE,CAAC;YACrB,OAAO,CAAC,IAAI,CACV,oGAAoG,CACrG,CAAA;QACH,CAAC;QACD,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IACvC,CAAC;IAED,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE;QACpC,QAAQ,OAAO,MAAM,EAAE,CAAC;YACtB,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,MAAM;iBACd,CAAA;YACH,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM,CAAC,OAAO;oBACvB,KAAK,EAAE,MAAM,CAAC,KAAK;iBACpB,CAAA;YACH;gBACE,OAAO,MAAM,CAAA;QACjB,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,QAAQ,KAAK,IAAI;QACtB,CAAC,CAAC,IAAI,CAAA;UACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CACL,MAAM,CAAC,CAAC,MAAuC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAC7D,GAAG,CACF,CAAC,MAAuC,EAAE,EAAE,CAC1C,IAAI,CAAA,8BAA8B,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,iBAAiB,CACpF;OACJ;QACH,CAAC,CAAC,IAAI,CAAA;UACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CACZ,CAAC,MAAuC,EAAE,EAAE,CAC1C,IAAI,CAAA,sBAAsB,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,eAAe,CAC1E;OACF,CAAA;AACP,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nimport { html } from 'lit-html'\n\nexport const FilterSelect: FilterSelectRenderer = (column, value, owner) => {\n  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */\n  const filter = column.filter as FilterConfigObject\n  const operator = filter?.operator\n\n  var options = filter?.options || column.record.options || []\n\n  if (typeof options === 'function') {\n    if (!filter?.options) {\n      console.warn(\n        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'\n      )\n    }\n    options = options.call(column, owner)\n  }\n\n  options = options.map((option: any) => {\n    switch (typeof option) {\n      case 'string':\n        return {\n          display: option,\n          value: option\n        }\n      case 'object':\n        return {\n          display: option.display,\n          value: option.value\n        }\n      default:\n        return option\n    }\n  })\n\n  return operator === 'in'\n    ? html`\n        ${options\n          ?.filter((option: { display: string; value: any }) => !!option)\n          .map(\n            (option: { display: string; value: any }) =>\n              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n          )}\n      `\n    : html`\n        ${options?.map(\n          (option: { display: string; value: any }) =>\n            html` <div option value=${option.value}>${option.display}&nbsp;</div> `\n        )}\n      `\n}\n"]}
+{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit'\nimport { until } from 'lit/directives/until.js'\n\nimport { FilterConfigObject, FilterOperator, FilterSelectRenderer, SelectOption, SelectOptionObject } from '../types'\nimport { OxFiltersForm } from './filters-form'\nimport { DataGridHeader } from '../data-grid/data-grid-header'\n\nfunction buildOptions(options: SelectOption[], operator?: FilterOperator) {\n  const selectOptionObjects = options.map(option => {\n    switch (typeof option) {\n      case 'string':\n        return {\n          display: option,\n          value: option\n        }\n      case 'object':\n        return {\n          display: option.display || option.name,\n          value: option.value\n        }\n      default:\n        return option\n    }\n  }) as SelectOptionObject[]\n\n  return operator === 'in'\n    ? html`\n        ${selectOptionObjects\n          ?.filter(option => !!option)\n          .map(\n            ({ value, display, name }) => html` <ox-checkbox option value=${value}>${display || name}</ox-checkbox> `\n          )}\n      `\n    : html`\n        ${selectOptionObjects?.map(\n          ({ value, display, name }) => html` <div option value=${value}>${display || name}&nbsp;</div> `\n        )}\n      `\n}\n\nexport const FilterSelect: FilterSelectRenderer = (column, value, owner) => {\n  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */\n  const filter = column.filter as FilterConfigObject\n  const operator = filter?.operator\n  const form = owner as OxFiltersForm | DataGridHeader\n\n  var options = filter?.options || column.record.options || []\n\n  if (typeof options === 'function') {\n    if (!filter?.options) {\n      console.warn(\n        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'\n      )\n    }\n\n    options = options.call(null, value, column, form instanceof OxFiltersForm ? form.getFormObjectValue() : {}, owner)\n\n    if (options instanceof Promise) {\n      return html`${until(options.then(options => buildOptions(options, operator)))}`\n    } else {\n      return buildOptions((options || []) as SelectOption[], operator)\n    }\n  } else {\n    return buildOptions((options || []) as SelectOption[], operator)\n  }\n}\n"]}

package/dist/src/filters/filters-form.d.ts

@@ -10,7 +10,7 @@ export type QueryFilter = {
     operator: FilterOperator;
     value: any;
 };
-export declare class FiltersForm extends LitElement {
+export declare class OxFiltersForm extends LitElement {
     static styles: import("lit").CSSResult[];
     value: FilterValue[];
     withoutSearch: boolean;
@@ -20,11 +20,15 @@ export declare class FiltersForm extends LitElement {
     filterColumns: ColumnConfig[];
     searchColumns: ColumnConfig[];
     form: HTMLFormElement;
+    private autoUpdateTargetsOnChange;
+    private objectValue?;
     connectedCallback(): void;
-    buildDefaultValue(operator: string, defaultValue: any): any;
+    buildDefaultValue(operator: FilterOperator, defaultValue: any): any;
     updated(changes: PropertyValues<this>): void;
     render(): TemplateResult;
     getQueryFilters(): Promise<QueryFilter[]>;
     setInputValue(name: string, value: any): void;
     getInputValue(name: string): any;
+    private updateObjectValues;
+    getFormObjectValue(): object | undefined;
 }

package/dist/src/filters/filters-form.js

@@ -8,7 +8,7 @@ import { customElement, property, queryAsync, state } from 'lit/decorators.js';
 import { getDefaultValue } from '@operato/time-calculator';
 import { FilterStyles } from './filter-styles';
 import { getFilterRenderer } from './registry';
-let FiltersForm = class FiltersForm extends LitElement {
+let OxFiltersForm = class OxFiltersForm extends LitElement {
     constructor() {
         super(...arguments);
         this.value = [];
@@ -17,6 +17,7 @@ let FiltersForm = class FiltersForm extends LitElement {
         this.empty = true;
         this.filterColumns = [];
         this.searchColumns = [];
+        this.autoUpdateTargetsOnChange = {};
     }
     connectedCallback() {
         super.connectedCallback();
@@ -34,14 +35,33 @@ let FiltersForm = class FiltersForm extends LitElement {
                 this.value = filters;
             });
             this.renderRoot.addEventListener('change', async (e) => {
-                this.dispatchEvent(new CustomEvent('fetch-params-change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        filters: await this.getQueryFilters(),
-                        from: 'filters-form'
-                    }
-                }));
+                const { target, detail: value } = e;
+                const name = target.name;
+                const { filter } = this.filterColumns.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.value = '';
+                        }
+                    });
+                    await this.updateObjectValues();
+                    this.requestUpdate();
+                }
+                const onchange = typeof filter == 'object' ? filter.onchange : null;
+                const keepGoing = onchange ? await onchange.call(null, value !== null && value !== void 0 ? value : target.value, this) : true;
+                keepGoing &&
+                    this.dispatchEvent(new CustomEvent('fetch-params-change', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            filters: await this.getQueryFilters(),
+                            from: 'filters-form'
+                        }
+                    }));
             });
         }
     }
@@ -57,6 +77,7 @@ let FiltersForm = class FiltersForm extends LitElement {
         }
     }
     updated(changes) {
+        var _a;
         if (changes.has('config')) {
             const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter);
             this.filterColumns = filters.filter((columnConfig) => {
@@ -75,6 +96,18 @@ let FiltersForm = class FiltersForm extends LitElement {
                 };
             });
             this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0;
+            this.autoUpdateTargetsOnChange = {};
+            (_a = this.filterColumns) === null || _a === void 0 ? void 0 : _a.filter(({ filter }) => {
+                return typeof filter == 'object' && filter.boundTo && filter.boundTo.length > 0;
+            }).map(({ name, filter }) => {
+                const boundTo = filter.boundTo;
+                boundTo.forEach(to => {
+                    const origin = this.autoUpdateTargetsOnChange[to] || [];
+                    if (name && !origin.includes(name)) {
+                        this.autoUpdateTargetsOnChange[to] = [...origin, name];
+                    }
+                });
+            });
         }
     }
     render() {
@@ -231,8 +264,28 @@ let FiltersForm = class FiltersForm extends LitElement {
         const input = this.renderRoot.querySelector(`form [name="${name}"]`);
         return input === null || input === void 0 ? void 0 : input.value;
     }
+    async updateObjectValues() {
+        const form = await this.form;
+        if (!form)
+            return [];
+        const formData = new FormData(form);
+        const object = {};
+        formData.forEach((value, key) => {
+            const prev = object[key];
+            if (key in object) {
+                object[key] = prev instanceof Array ? [...prev, value] : [prev, value];
+            }
+            else {
+                object[key] = value;
+            }
+        });
+        this.objectValue = object;
+    }
+    getFormObjectValue() {
+        return this.objectValue;
+    }
 };
-FiltersForm.styles = [
+OxFiltersForm.styles = [
     FilterStyles,
     css `
       :host {
@@ -266,30 +319,30 @@ FiltersForm.styles = [
 ];
 __decorate([
     property({ type: Array })
-], FiltersForm.prototype, "value", void 0);
+], OxFiltersForm.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'without-search' })
-], FiltersForm.prototype, "withoutSearch", void 0);
+], OxFiltersForm.prototype, "withoutSearch", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'autofocus' })
-], FiltersForm.prototype, "autofocus", void 0);
+], OxFiltersForm.prototype, "autofocus", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'empty', reflect: true })
-], FiltersForm.prototype, "empty", void 0);
+], OxFiltersForm.prototype, "empty", void 0);
 __decorate([
     state()
-], FiltersForm.prototype, "config", void 0);
+], OxFiltersForm.prototype, "config", void 0);
 __decorate([
     state()
-], FiltersForm.prototype, "filterColumns", void 0);
+], OxFiltersForm.prototype, "filterColumns", void 0);
 __decorate([
     state()
-], FiltersForm.prototype, "searchColumns", void 0);
+], OxFiltersForm.prototype, "searchColumns", void 0);
 __decorate([
     queryAsync('form')
-], FiltersForm.prototype, "form", void 0);
-FiltersForm = __decorate([
+], OxFiltersForm.prototype, "form", void 0);
+OxFiltersForm = __decorate([
     customElement('ox-filters-form')
-], FiltersForm);
-export { FiltersForm };
+], OxFiltersForm);
+export { OxFiltersForm };
 //# sourceMappingURL=filters-form.js.map

package/dist/src/filters/filters-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { getDefaultValue } from '@operato/time-calculator'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-flow: row wrap;\n        gap: var(--ox-filters-form-gap);\n      }\n\n      form > * {\n        display: flex;\n        align-items: center;\n        gap: var(--input-intra-gap, 7px);\n      }\n\n      label span {\n        display: block;\n      }\n\n      @media only screen and (max-width: 460px) {\n        label[between] {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: FilterValue[] = []\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n  @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n  @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true\n\n  @state() config!: GristConfig\n  @state() filterColumns: ColumnConfig[] = []\n  @state() searchColumns: ColumnConfig[] = []\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    const grist = this.closest('ox-grist') as DataGrist\n\n    if (grist) {\n      this.config = grist.compiledConfig\n\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      grist.addEventListener('fetch-params-change', (e: Event) => {\n        const { filters, from } = (e as CustomEvent).detail || {}\n        if (from === 'filters-form') {\n          return\n        }\n\n        this.value = filters\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        this.dispatchEvent(\n          new CustomEvent('fetch-params-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              filters: await this.getQueryFilters(),\n              from: 'filters-form'\n            }\n          })\n        )\n      })\n    }\n  }\n\n  buildDefaultValue(operator: string, defaultValue: any) {\n    if (defaultValue === undefined) {\n      return\n    }\n    if (operator == 'between') {\n      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n    } else {\n      return getDefaultValue(defaultValue, this)\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator !== 'search'\n      })\n      this.searchColumns = filters.filter(columnConfig => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator === 'search'\n      })\n\n      const grist = this.closest('ox-grist') as DataGrist\n\n      this.value = (grist?.filters || []).map(filter => {\n        return {\n          ...filter,\n          value: this.buildDefaultValue(filter!.operator, filter!.value)\n        }\n      })\n\n      this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0\n    }\n  }\n\n  render(): TemplateResult {\n    const searchValue =\n      (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.*)\\%$/)?.[1] || ''\n\n    return this.empty\n      ? html``\n      : html`\n          <form\n            @submit=${(e: Event) => {\n              e.stopPropagation()\n              e.preventDefault()\n\n              const grist = this.closest('ox-grist') as DataGrist\n\n              grist && grist.fetch()\n            }}\n          >\n            ${this.searchColumns.length === 0 || this.withoutSearch\n              ? html``\n              : html`\n                  <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n                `}\n            ${this.filterColumns.map((column: ColumnConfig) => {\n              const { name, header, label, filter } = column\n\n              const type = (filter as FilterConfigObject).type\n              const operator = (filter as FilterConfigObject).operator\n              const filterLabel = (filter as FilterConfigObject).label\n\n              const labelText =\n                filterLabel !== undefined\n                  ? filterLabel\n                  : typeof label === 'object' && label.renderer\n                    ? label.renderer(column)\n                    : header.renderer(column) || name\n\n              const idx = operator === 'between' ? 1 : 0\n              const renderer = getFilterRenderer(\n                operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n                  ? 'text'\n                  : type\n              )[idx]\n              const value =\n                this.value?.find(filter => filter.name == name)?.value ??\n                this.buildDefaultValue(operator!, (filter as FilterConfigObject)?.value)\n\n              if (!renderer) {\n                return html``\n              }\n\n              return type === 'boolean' || type === 'checkbox'\n                ? renderer(column, value, this)\n                : type !== 'select' && labelText\n                  ? html`<label filter-title ?between=${operator === 'between'}\n                      ><span>${labelText}</span> ${renderer(column, value, this)}\n                    </label> `\n                  : type !== 'select' && !labelText\n                    ? renderer(column, value, this)\n                    : operator === 'in'\n                      ? html`\n                          <ox-select\n                            name=${name}\n                            placeholder=${labelText}\n                            .value=${value}\n                            @change=${(e: CustomEvent) =>\n                              e.target?.dispatchEvent(\n                                new CustomEvent('filter-change', {\n                                  detail: {\n                                    name,\n                                    operator,\n                                    value: e.detail\n                                  }\n                                })\n                              )}\n                          >\n                            <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                              ${renderer(column, value, this)}\n                            </ox-popup-list>\n                          </ox-select>\n                        `\n                      : html`\n                          <ox-select\n                            name=${name}\n                            placeholder=${labelText}\n                            .value=${value}\n                            @change=${(e: CustomEvent) =>\n                              e.target?.dispatchEvent(\n                                new CustomEvent('filter-change', {\n                                  detail: {\n                                    name,\n                                    operator,\n                                    value: e.detail\n                                  }\n                                })\n                              )}\n                          >\n                            <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>\n                          </ox-select>\n                        `\n            })}\n          </form>\n        `\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const form = await this.form\n    if (!form) return []\n\n    const formData = new FormData(form)\n    const search: string | undefined = formData.get('search')?.toString()\n\n    var filters = this.filterColumns\n      .map((column: ColumnConfig) => {\n        const { name, type, filter } = column\n        const operator = (filter as FilterConfigObject).operator\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    if (search) {\n      filters = filters.concat(\n        this.searchColumns.map((column: ColumnConfig) => {\n          const { name } = column\n\n          return {\n            name,\n            operator: 'search',\n            value: `%${search}%`\n          }\n        })\n      )\n    }\n\n    return filters\n  }\n\n  public setInputValue(name: string, value: any) {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    if (input) {\n      input.value = value\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n    }\n  }\n\n  public getInputValue(name: string): any {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    return input?.value\n  }\n}\n"]}
+{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { getDefaultValue } from '@operato/time-calculator'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class OxFiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-flow: row wrap;\n        gap: var(--ox-filters-form-gap);\n      }\n\n      form > * {\n        display: flex;\n        align-items: center;\n        gap: var(--input-intra-gap, 7px);\n      }\n\n      label span {\n        display: block;\n      }\n\n      @media only screen and (max-width: 460px) {\n        label[between] {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: FilterValue[] = []\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n  @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n  @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true\n\n  @state() config!: GristConfig\n  @state() filterColumns: ColumnConfig[] = []\n  @state() searchColumns: ColumnConfig[] = []\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}\n  private objectValue?: object\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    const grist = this.closest('ox-grist') as DataGrist\n\n    if (grist) {\n      this.config = grist.compiledConfig\n\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      grist.addEventListener('fetch-params-change', (e: Event) => {\n        const { filters, from } = (e as CustomEvent).detail || {}\n        if (from === 'filters-form') {\n          return\n        }\n\n        this.value = filters\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        const { target, detail: value } = e as CustomEvent\n        const name = (target as HTMLInputElement).name\n        const { filter } = this.filterColumns.find(filter => filter.name == name) || {}\n\n        if (this.autoUpdateTargetsOnChange[name]) {\n          /* 일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함. */\n          ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {\n            const target = this.renderRoot.querySelector(`[name='${name}']`)\n            if (target) {\n              ;(target as HTMLInputElement).value = ''\n            }\n          })\n\n          await this.updateObjectValues()\n          this.requestUpdate()\n        }\n\n        const onchange = typeof filter == 'object' ? filter.onchange : null\n        const keepGoing = onchange ? await onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true\n\n        keepGoing &&\n          this.dispatchEvent(\n            new CustomEvent('fetch-params-change', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                filters: await this.getQueryFilters(),\n                from: 'filters-form'\n              }\n            })\n          )\n      })\n    }\n  }\n\n  buildDefaultValue(operator: FilterOperator, defaultValue: any) {\n    if (defaultValue === undefined) {\n      return\n    }\n    if (operator == 'between') {\n      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n    } else {\n      return getDefaultValue(defaultValue, this)\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator !== 'search'\n      })\n      this.searchColumns = filters.filter(columnConfig => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator === 'search'\n      })\n\n      const grist = this.closest('ox-grist') as DataGrist\n\n      this.value = (grist?.filters || []).map(filter => {\n        return {\n          ...filter,\n          value: this.buildDefaultValue(filter!.operator, filter!.value)\n        }\n      })\n\n      this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0\n\n      this.autoUpdateTargetsOnChange = {}\n      this.filterColumns\n        ?.filter(({ filter }) => {\n          return typeof filter == 'object' && filter.boundTo && filter.boundTo.length > 0\n        })\n        .map(({ name, filter }) => {\n          const boundTo = (filter as FilterConfigObject).boundTo\n\n          boundTo!.forEach(to => {\n            const origin = this.autoUpdateTargetsOnChange[to] || []\n            if (name && !origin.includes(name)) {\n              this.autoUpdateTargetsOnChange[to] = [...origin, name]\n            }\n          })\n        })\n    }\n  }\n\n  render(): TemplateResult {\n    const searchValue =\n      (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.*)\\%$/)?.[1] || ''\n\n    return this.empty\n      ? html``\n      : html`\n          <form\n            @submit=${(e: Event) => {\n              e.stopPropagation()\n              e.preventDefault()\n\n              const grist = this.closest('ox-grist') as DataGrist\n\n              grist && grist.fetch()\n            }}\n          >\n            ${this.searchColumns.length === 0 || this.withoutSearch\n              ? html``\n              : html`\n                  <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n                `}\n            ${this.filterColumns.map((column: ColumnConfig) => {\n              const { name, header, label, filter } = column\n\n              const type = (filter as FilterConfigObject).type\n              const operator = (filter as FilterConfigObject).operator\n              const filterLabel = (filter as FilterConfigObject).label\n\n              const labelText =\n                filterLabel !== undefined\n                  ? filterLabel\n                  : typeof label === 'object' && label.renderer\n                    ? label.renderer(column)\n                    : header.renderer(column) || name\n\n              const idx = operator === 'between' ? 1 : 0\n              const renderer = getFilterRenderer(\n                operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n                  ? 'text'\n                  : type\n              )[idx]\n              const value =\n                this.value?.find(filter => filter.name == name)?.value ??\n                this.buildDefaultValue(operator!, (filter as FilterConfigObject)?.value)\n\n              if (!renderer) {\n                return html``\n              }\n\n              return type === 'boolean' || type === 'checkbox'\n                ? renderer(column, value, this)\n                : type !== 'select' && labelText\n                  ? html`<label filter-title ?between=${operator === 'between'}\n                      ><span>${labelText}</span> ${renderer(column, value, this)}\n                    </label> `\n                  : type !== 'select' && !labelText\n                    ? renderer(column, value, this)\n                    : operator === 'in'\n                      ? html`\n                          <ox-select\n                            name=${name}\n                            placeholder=${labelText}\n                            .value=${value}\n                            @change=${(e: CustomEvent) =>\n                              e.target?.dispatchEvent(\n                                new CustomEvent('filter-change', {\n                                  detail: {\n                                    name,\n                                    operator,\n                                    value: e.detail\n                                  }\n                                })\n                              )}\n                          >\n                            <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                              ${renderer(column, value, this)}\n                            </ox-popup-list>\n                          </ox-select>\n                        `\n                      : html`\n                          <ox-select\n                            name=${name}\n                            placeholder=${labelText}\n                            .value=${value}\n                            @change=${(e: CustomEvent) =>\n                              e.target?.dispatchEvent(\n                                new CustomEvent('filter-change', {\n                                  detail: {\n                                    name,\n                                    operator,\n                                    value: e.detail\n                                  }\n                                })\n                              )}\n                          >\n                            <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>\n                          </ox-select>\n                        `\n            })}\n          </form>\n        `\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const form = await this.form\n    if (!form) return []\n\n    const formData = new FormData(form)\n    const search: string | undefined = formData.get('search')?.toString()\n\n    var filters = this.filterColumns\n      .map((column: ColumnConfig) => {\n        const { name, type, filter } = column\n        const operator = (filter as FilterConfigObject).operator\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    if (search) {\n      filters = filters.concat(\n        this.searchColumns.map((column: ColumnConfig) => {\n          const { name } = column\n\n          return {\n            name,\n            operator: 'search',\n            value: `%${search}%`\n          }\n        })\n      )\n    }\n\n    return filters\n  }\n\n  public setInputValue(name: string, value: any) {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    if (input) {\n      input.value = value\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n    }\n  }\n\n  public getInputValue(name: string): any {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    return input?.value\n  }\n\n  private async updateObjectValues() {\n    const form = await this.form\n    if (!form) return []\n\n    const formData = new FormData(form)\n\n    const object = {} as any\n    formData.forEach((value, key) => {\n      const prev = object[key]\n\n      if (key in object) {\n        object[key] = prev instanceof Array ? [...prev, value] : [prev, value]\n      } else {\n        object[key] = value\n      }\n    })\n\n    this.objectValue = object\n  }\n\n  public getFormObjectValue() {\n    return this.objectValue\n  }\n}\n"]}

package/dist/src/renderers/ox-grist-renderer-select.js

@@ -1,4 +1,30 @@
 import { html } from 'lit';
+import { until } from 'lit/directives/until.js';
+function buildOptions(options, value) {
+    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;
+        }
+    });
+    var res = selectOptionObjects
+        ? selectOptionObjects.filter((option) => option.value == String(value == null ? '' : value))
+        : [];
+    if (res.length) {
+        return html `<span>${res[0].display || res[0].name || ''}</span>`;
+    }
+    return html `<span>${value}</span>`;
+}
 export const OxGristRendererSelect = (value, column, record, rowIndex, field) => {
     if (value == null) {
         return '';
@@ -10,11 +36,15 @@ export const OxGristRendererSelect = (value, column, record, rowIndex, field) =>
     }
     else if (typeof options == 'function') {
         options = options.call(null, value, column, record, rowIndex, field);
+        if (options instanceof Promise) {
+            return html `${until(options.then(options => buildOptions(options, value)), value)}`;
+        }
+        else {
+            return buildOptions((options || []), value);
+        }
     }
-    var res = options ? options.filter((option) => option.value == String(value == null ? '' : value)) : [];
-    if (res.length) {
-        return html `<span>${res[0].display}</span>`;
+    else {
+        return buildOptions((options || []), value);
     }
-    return html `<span>${value}</span>`;
 };
 //# sourceMappingURL=ox-grist-renderer-select.js.map

package/dist/src/renderers/ox-grist-renderer-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-renderer-select.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,qBAAqB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC7F,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;QAClB,OAAO,EAAE,CAAA;IACX,CAAC;IACD,IAAI,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;IACzF,IAAI,OAAO,GAAG,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,EAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;IAEtF,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CAAC,6BAA6B,MAAM,CAAC,IAAI,wBAAwB,CAAC,CAAA;IACjF,CAAC;SAAM,IAAI,OAAO,OAAO,IAAI,UAAU,EAAE,CAAC;QACxC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;IACtE,CAAC;IAED,IAAI,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5G,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;QACf,OAAO,IAAI,CAAA,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,SAAS,CAAA;IAC7C,CAAC;IACD,OAAO,IAAI,CAAA,SAAS,KAAK,SAAS,CAAA;AACpC,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types'\n\nexport const OxGristRendererSelect: FieldRenderer = (value, column, record, rowIndex, field) => {\n  if (value == null) {\n    return ''\n  }\n  var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField]\n  var options = rowOptionField?.options ? rowOptionField.options : column.record.options\n\n  if (!options) {\n    console.error(`options value for select '${column.name}' column is mandatory.`)\n  } else if (typeof options == 'function') {\n    options = options.call(null, value, column, record, rowIndex, field)\n  }\n\n  var res = options ? options.filter((option: any) => option.value == String(value == null ? '' : value)) : []\n  if (res.length) {\n    return html`<span>${res[0].display}</span>`\n  }\n  return html`<span>${value}</span>`\n}\n"]}
+{"version":3,"file":"ox-grist-renderer-select.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAI/C,SAAS,YAAY,CAAC,OAAuB,EAAE,KAAU;IACvD,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC/C,QAAQ,OAAO,MAAM,EAAE,CAAC;YACtB,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,MAAM;iBACd,CAAA;YACH,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI;oBACtC,KAAK,EAAE,MAAM,CAAC,KAAK;iBACpB,CAAA;YACH;gBACE,OAAO,MAAM,CAAA;QACjB,CAAC;IACH,CAAC,CAAyB,CAAA;IAE1B,IAAI,GAAG,GAAG,mBAAmB;QAC3B,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACjG,CAAC,CAAC,EAAE,CAAA;IAEN,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;QACf,OAAO,IAAI,CAAA,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,SAAS,CAAA;IAClE,CAAC;IACD,OAAO,IAAI,CAAA,SAAS,KAAK,SAAS,CAAA;AACpC,CAAC;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC7F,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;QAClB,OAAO,EAAE,CAAA;IACX,CAAC;IAED,IAAI,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;IACzF,IAAI,OAAO,GAAG,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,EAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;IAEtF,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CAAC,6BAA6B,MAAM,CAAC,IAAI,wBAAwB,CAAC,CAAA;IACjF,CAAC;SAAM,IAAI,OAAO,OAAO,IAAI,UAAU,EAAE,CAAC;QACxC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;QAEpE,IAAI,OAAO,YAAY,OAAO,EAAE,CAAC;YAC/B,OAAO,IAAI,CAAA,GAAG,KAAK,CACjB,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EACrD,KAAK,CACN,EAAE,CAAA;QACL,CAAC;aAAM,CAAC;YACN,OAAO,YAAY,CAAC,CAAC,OAAO,IAAI,EAAE,CAAmB,EAAE,KAAK,CAAC,CAAA;QAC/D,CAAC;IACH,CAAC;SAAM,CAAC;QACN,OAAO,YAAY,CAAC,CAAC,OAAO,IAAI,EAAE,CAAmB,EAAE,KAAK,CAAC,CAAA;IAC/D,CAAC;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\nimport { until } from 'lit/directives/until.js'\n\nimport { FieldRenderer, SelectOption, SelectOptionObject } from '../types'\n\nfunction buildOptions(options: SelectOption[], value: any) {\n  const selectOptionObjects = options.map(option => {\n    switch (typeof option) {\n      case 'string':\n        return {\n          display: option,\n          value: option\n        }\n      case 'object':\n        return {\n          display: option.display || option.name,\n          value: option.value\n        }\n      default:\n        return option\n    }\n  }) as SelectOptionObject[]\n\n  var res = selectOptionObjects\n    ? selectOptionObjects.filter((option: any) => option.value == String(value == null ? '' : value))\n    : []\n\n  if (res.length) {\n    return html`<span>${res[0].display || res[0].name || ''}</span>`\n  }\n  return html`<span>${value}</span>`\n}\n\nexport const OxGristRendererSelect: FieldRenderer = (value, column, record, rowIndex, field) => {\n  if (value == null) {\n    return ''\n  }\n\n  var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField]\n  var options = rowOptionField?.options ? rowOptionField.options : column.record.options\n\n  if (!options) {\n    console.error(`options value for select '${column.name}' column is mandatory.`)\n  } else if (typeof options == 'function') {\n    options = options.call(null, value, column, record, rowIndex, field)\n\n    if (options instanceof Promise) {\n      return html`${until(\n        options.then(options => buildOptions(options, value)),\n        value\n      )}`\n    } else {\n      return buildOptions((options || []) as SelectOption[], value)\n    }\n  } else {\n    return buildOptions((options || []) as SelectOption[], value)\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -8,7 +8,7 @@ import { DataListGutter } from './data-list/data-list-gutter';
 import { RecordPartial } from './data-list/record-partial';
 import { DataReportField } from './data-report/data-report-field';
 import { OxGristEditor } from './editors';
-import { QueryFilter } from './filters';
+import { QueryFilter, OxFiltersForm } from './filters';
 import { OxGristRenderer } from './renderers/ox-grist-renderer';
 /**
  * Configuration object for defining the structure and behavior of a Grist table.
@@ -56,6 +56,17 @@ export type SortersConfig = SorterConfig[];
  * 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike'} FilterOperator
  */
 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: OxFiltersForm) => boolean;
 /**
  * Configuration object for specifying filter conditions.
  *
@@ -74,6 +85,8 @@ export type FilterConfigObject = {
     };
     value?: string | number | boolean | string[] | number[] | undefined;
     label?: string;
+    boundTo?: string[];
+    onchange?: FilterChangedCallback;
 };
 /**
  * Configuration option for specifying filter conditions.