@operato/data-grist 2.0.0-alpha.136 → 2.0.0-alpha.139

package/dist/src/data-report/data-report-header.js

@@ -10,7 +10,7 @@ let DataReportHeader = class DataReportHeader extends LitElement {
         this.columns = [];
         this.data = ZERO_DATA;
     }
-    _onWheelEvent(e) {
+    onWheelEvent(e) {
         if (this.scrollWidth > this.clientWidth) {
             var delta = Math.max(-1, Math.min(1, e.deltaY || 0));
             this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40);
@@ -26,7 +26,7 @@ let DataReportHeader = class DataReportHeader extends LitElement {
         }
     }
     firstUpdated() {
-        this.addEventListener('wheel', this._onWheelEvent.bind(this));
+        this.addEventListener('wheel', this.onWheelEvent.bind(this));
     }
     async updated(changed) {
         if (changed.has('config')) {

package/dist/src/data-report/data-report-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-report-header.js","sourceRoot":"","sources":["../../../src/data-report/data-report-header.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'\nimport { supportsPassive } from '../utils'\n\n@customElement('ox-report-header')\nclass DataReportHeader extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--report-template-columns);\n\n        overflow: hidden;\n      }\n\n      div {\n        display: flex;\n\n        white-space: nowrap;\n        overflow: hidden;\n        background-color: var(--report-header-background-color, gray);\n        border: 1px solid var(--report-header-border-color);\n        border-width: 1px 1px 1px 0;\n        padding: var(--report-header-padding);\n\n        text-overflow: ellipsis;\n        text-align: center;\n        font-size: var(--report-header-fontsize, 1em);\n        color: var(--report-header-color);\n      }\n\n      span {\n        white-space: nowrap;\n        overflow: hidden;\n\n        text-align: center;\n      }\n\n      span[titler] {\n        flex: 1;\n        text-overflow: ellipsis;\n        font: var(--report-header-font);\n        color: var(--report-header-color);\n        text-transform: capitalize;\n      }\n\n      span[sorter] {\n        padding: 0;\n        border: 0;\n        font-size: 10px;\n      }\n\n      span[splitter] {\n        cursor: col-resize;\n      }\n\n      @media print {\n        :host {\n          grid-template-columns: var(--report-template-print-columns);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Array }) private _sorters?: SortersConfig\n\n  private throttledNotifier?: (idx: number, width: number) => void\n\n  _onWheelEvent(e: WheelEvent) {\n    if (this.scrollWidth > this.clientWidth) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)\n\n      var maxScrollLeft = this.scrollWidth - this.clientWidth\n\n      var atStart = this.scrollLeft === 0\n      var atEnd = this.scrollLeft === maxScrollLeft\n\n      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는\n      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용\n      if ((atStart && delta > 0) || (atEnd && delta < 0)) {\n        return true\n      }\n\n      e.preventDefault()\n    }\n  }\n\n  firstUpdated() {\n    this.addEventListener('wheel', this._onWheelEvent.bind(this))\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('config')) {\n      this._sorters = this.config.sorters || []\n    }\n  }\n\n  render() {\n    var columns = this.columns || []\n\n    return html`\n      ${columns.map((column, idx) =>\n        !column.hidden\n          ? html`\n              <div @dragstart=${(e: MouseEvent) => this._dragStart(e, idx)}>\n                <span titler @click=${(e: Event) => this._changeSort(column)}>${this._renderHeader(column)} </span>\n\n                ${column.sortable\n                  ? html`\n                      <span sorter @click=${(e: Event) => this._changeSort(column)}>\n                        ${this._renderSortHeader(column)}\n                      </span>\n                    `\n                  : html``}\n                ${column.resizable !== false ? html` <span splitter draggable=\"true\">&nbsp;</span> ` : html``}\n              </div>\n            `\n          : html``\n      )}\n\n      <div></div>\n    `\n  }\n\n  _renderHeader(column: ColumnConfig) {\n    var { renderer } = column.header || {}\n    var title = renderer.call(this, column)\n\n    return html` ${title} `\n  }\n\n  _renderSortHeader(column: ColumnConfig) {\n    if (column.hidden) {\n      return html``\n    }\n\n    var sorters = this._sorters || []\n\n    var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n    if (!sorter) {\n      return html``\n    }\n\n    if (sorters.length > 1) {\n      var rank = sorters.indexOf(sorter) + 1\n      return sorter.desc ? html` &#9660;<sub>${rank}</sub> ` : html` &#9650;<sub>${rank}</sub> `\n    } else {\n      return sorter.desc ? html` &#9660; ` : html` &#9650; `\n    }\n  }\n\n  _changeSort(column: ColumnConfig) {\n    if (!column.sortable) {\n      return\n    }\n\n    var sorters = [...(this._sorters || [])]\n\n    var idx = sorters.findIndex(sorter => sorter.name == column.name)\n    if (idx !== -1) {\n      let sorter = sorters[idx]\n      if (sorter.desc) {\n        sorters.splice(idx, 1)\n      } else {\n        sorter.desc = true\n      }\n    } else {\n      var sorter = {\n        name: column.name\n      }\n\n      sorters.push(sorter)\n    }\n\n    this._sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('fetch-params-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          sorters: this._sorters,\n          from: 'data-report-header'\n        }\n      })\n    )\n  }\n\n  _notifyWidthChange(idx: number, width: number) {\n    if (!this.throttledNotifier) {\n      this.throttledNotifier = throttle((idx, width) => {\n        this.dispatchEvent(\n          new CustomEvent('column-width-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              idx,\n              width\n            }\n          })\n        )\n      }, 100)\n    }\n\n    this.throttledNotifier(idx, width)\n  }\n\n  _dragStart(e: MouseEvent, idx: number) {\n    var target = e.currentTarget as HTMLElement\n    var startX = e.offsetX\n\n    var dragHandler = ((e: MouseEvent) => {\n      let column = this.columns[idx]\n\n      let width = Math.max(0, Number(column.width) + e.offsetX - startX)\n      if (width == 0) {\n        /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n        return\n      }\n\n      this._notifyWidthChange(idx, width)\n    }).bind(this)\n\n    var dragEndHandler = ((e: MouseEvent) => {\n      target.removeEventListener('drag', dragHandler)\n      target.removeEventListener('dragend', dragEndHandler)\n\n      dragHandler(e)\n    }).bind(this)\n\n    target.addEventListener('drag', dragHandler)\n    target.addEventListener('dragend', dragEndHandler)\n  }\n}\n"]}
+{"version":3,"file":"data-report-header.js","sourceRoot":"","sources":["../../../src/data-report/data-report-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAKjE,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QA2D8B,WAAM,GAAgB,WAAW,CAAA;QAClC,YAAO,GAAmB,EAAE,CAAA;QAC3B,SAAI,GAAc,SAAS,CAAA;IA2KzD,CAAC;IAtKC,YAAY,CAAC,CAAa;QACxB,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACxC,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAA;YACpD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC,CAAA;YAE3D,IAAI,aAAa,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAA;YAEvD,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,KAAK,CAAC,CAAA;YACnC,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,KAAK,aAAa,CAAA;YAE7C,oCAAoC;YACpC,6CAA6C;YAC7C,IAAI,CAAC,OAAO,IAAI,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;gBACnD,OAAO,IAAI,CAAA;YACb,CAAC;YAED,CAAC,CAAC,cAAc,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC9D,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAA6B;QACzC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;QAC3C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAC5B,CAAC,MAAM,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA;gCACgB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,CAAC;sCACpC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;kBAExF,MAAM,CAAC,QAAQ;gBACf,CAAC,CAAC,IAAI,CAAA;4CACoB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;0BACxD,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC;;qBAEnC;gBACH,CAAC,CAAC,IAAI,CAAA,EAAE;kBACR,MAAM,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,iDAAiD,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;aAEhG;YACH,CAAC,CAAC,IAAI,CAAA,EAAE,CACX;;;KAGF,CAAA;IACH,CAAC;IAED,aAAa,CAAC,MAAoB;QAChC,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA;QACtC,IAAI,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA,IAAI,KAAK,GAAG,CAAA;IACzB,CAAC;IAED,iBAAiB,CAAC,MAAoB;QACpC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEjC,IAAI,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;QAC3F,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,IAAI,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;YACtC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,SAAS,CAAA;QAC5F,CAAC;aAAM,CAAC;YACN,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,WAAW,CAAA;QACxD,CAAC;IACH,CAAC;IAED,WAAW,CAAC,MAAoB;QAC9B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YACrB,OAAM;QACR,CAAC;QAED,IAAI,OAAO,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAA;QAExC,IAAI,GAAG,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;QACjE,IAAI,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC;YACf,IAAI,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA;YACzB,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;gBAChB,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;YACxB,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;YACpB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,MAAM,GAAG;gBACX,IAAI,EAAE,MAAM,CAAC,IAAI;aAClB,CAAA;YAED,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QACtB,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QAEvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI,CAAC,QAAQ;gBACtB,IAAI,EAAE,oBAAoB;aAC3B;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,kBAAkB,CAAC,GAAW,EAAE,KAAa;QAC3C,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5B,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;gBAC/C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;oBACrC,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE;wBACN,GAAG;wBACH,KAAK;qBACN;iBACF,CAAC,CACH,CAAA;YACH,CAAC,EAAE,GAAG,CAAC,CAAA;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IACpC,CAAC;IAED,UAAU,CAAC,CAAa,EAAE,GAAW;QACnC,IAAI,MAAM,GAAG,CAAC,CAAC,aAA4B,CAAA;QAC3C,IAAI,MAAM,GAAG,CAAC,CAAC,OAAO,CAAA;QAEtB,IAAI,WAAW,GAAG,CAAC,CAAC,CAAa,EAAE,EAAE;YACnC,IAAI,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;YAE9B,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,CAAA;YAClE,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;gBACf,8CAA8C;gBAC9C,OAAM;YACR,CAAC;YAED,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACrC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,IAAI,cAAc,GAAG,CAAC,CAAC,CAAa,EAAE,EAAE;YACtC,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;YAC/C,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;YAErD,WAAW,CAAC,CAAC,CAAC,CAAA;QAChB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;QAC5C,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;IACpD,CAAC;;AAtOM,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDF;CACF,AAxDY,CAwDZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAkC;AAClC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAA6B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA4B;AACpB;IAAlC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAiC;AA9DvD,gBAAgB;IADrB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,gBAAgB,CAwOrB","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'\nimport { supportsPassive } from '../utils'\n\n@customElement('ox-report-header')\nclass DataReportHeader extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--report-template-columns);\n\n        overflow: hidden;\n      }\n\n      div {\n        display: flex;\n\n        white-space: nowrap;\n        overflow: hidden;\n        background-color: var(--report-header-background-color, gray);\n        border: 1px solid var(--report-header-border-color);\n        border-width: 1px 1px 1px 0;\n        padding: var(--report-header-padding);\n\n        text-overflow: ellipsis;\n        text-align: center;\n        font-size: var(--report-header-fontsize, 1em);\n        color: var(--report-header-color);\n      }\n\n      span {\n        white-space: nowrap;\n        overflow: hidden;\n\n        text-align: center;\n      }\n\n      span[titler] {\n        flex: 1;\n        text-overflow: ellipsis;\n        font: var(--report-header-font);\n        color: var(--report-header-color);\n        text-transform: capitalize;\n      }\n\n      span[sorter] {\n        padding: 0;\n        border: 0;\n        font-size: 10px;\n      }\n\n      span[splitter] {\n        cursor: col-resize;\n      }\n\n      @media print {\n        :host {\n          grid-template-columns: var(--report-template-print-columns);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Array }) private _sorters?: SortersConfig\n\n  private throttledNotifier?: (idx: number, width: number) => void\n\n  onWheelEvent(e: WheelEvent) {\n    if (this.scrollWidth > this.clientWidth) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)\n\n      var maxScrollLeft = this.scrollWidth - this.clientWidth\n\n      var atStart = this.scrollLeft === 0\n      var atEnd = this.scrollLeft === maxScrollLeft\n\n      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는\n      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용\n      if ((atStart && delta > 0) || (atEnd && delta < 0)) {\n        return true\n      }\n\n      e.preventDefault()\n    }\n  }\n\n  firstUpdated() {\n    this.addEventListener('wheel', this.onWheelEvent.bind(this))\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('config')) {\n      this._sorters = this.config.sorters || []\n    }\n  }\n\n  render() {\n    var columns = this.columns || []\n\n    return html`\n      ${columns.map((column, idx) =>\n        !column.hidden\n          ? html`\n              <div @dragstart=${(e: MouseEvent) => this._dragStart(e, idx)}>\n                <span titler @click=${(e: Event) => this._changeSort(column)}>${this._renderHeader(column)} </span>\n\n                ${column.sortable\n                  ? html`\n                      <span sorter @click=${(e: Event) => this._changeSort(column)}>\n                        ${this._renderSortHeader(column)}\n                      </span>\n                    `\n                  : html``}\n                ${column.resizable !== false ? html` <span splitter draggable=\"true\">&nbsp;</span> ` : html``}\n              </div>\n            `\n          : html``\n      )}\n\n      <div></div>\n    `\n  }\n\n  _renderHeader(column: ColumnConfig) {\n    var { renderer } = column.header || {}\n    var title = renderer.call(this, column)\n\n    return html` ${title} `\n  }\n\n  _renderSortHeader(column: ColumnConfig) {\n    if (column.hidden) {\n      return html``\n    }\n\n    var sorters = this._sorters || []\n\n    var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n    if (!sorter) {\n      return html``\n    }\n\n    if (sorters.length > 1) {\n      var rank = sorters.indexOf(sorter) + 1\n      return sorter.desc ? html` &#9660;<sub>${rank}</sub> ` : html` &#9650;<sub>${rank}</sub> `\n    } else {\n      return sorter.desc ? html` &#9660; ` : html` &#9650; `\n    }\n  }\n\n  _changeSort(column: ColumnConfig) {\n    if (!column.sortable) {\n      return\n    }\n\n    var sorters = [...(this._sorters || [])]\n\n    var idx = sorters.findIndex(sorter => sorter.name == column.name)\n    if (idx !== -1) {\n      let sorter = sorters[idx]\n      if (sorter.desc) {\n        sorters.splice(idx, 1)\n      } else {\n        sorter.desc = true\n      }\n    } else {\n      var sorter = {\n        name: column.name\n      }\n\n      sorters.push(sorter)\n    }\n\n    this._sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('fetch-params-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          sorters: this._sorters,\n          from: 'data-report-header'\n        }\n      })\n    )\n  }\n\n  _notifyWidthChange(idx: number, width: number) {\n    if (!this.throttledNotifier) {\n      this.throttledNotifier = throttle((idx, width) => {\n        this.dispatchEvent(\n          new CustomEvent('column-width-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              idx,\n              width\n            }\n          })\n        )\n      }, 100)\n    }\n\n    this.throttledNotifier(idx, width)\n  }\n\n  _dragStart(e: MouseEvent, idx: number) {\n    var target = e.currentTarget as HTMLElement\n    var startX = e.offsetX\n\n    var dragHandler = ((e: MouseEvent) => {\n      let column = this.columns[idx]\n\n      let width = Math.max(0, Number(column.width) + e.offsetX - startX)\n      if (width == 0) {\n        /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n        return\n      }\n\n      this._notifyWidthChange(idx, width)\n    }).bind(this)\n\n    var dragEndHandler = ((e: MouseEvent) => {\n      target.removeEventListener('drag', dragHandler)\n      target.removeEventListener('dragend', dragEndHandler)\n\n      dragHandler(e)\n    }).bind(this)\n\n    target.addEventListener('drag', dragHandler)\n    target.addEventListener('dragend', dragEndHandler)\n  }\n}\n"]}

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

@@ -181,6 +181,9 @@ let OxFiltersForm = class OxFiltersForm extends LitElement {
     }
     applyUpdatedConfiguration() {
         var _a;
+        if (!this.config) {
+            return;
+        }
         const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter);
         this.filterColumns = filters.filter((columnConfig) => {
             const filter = columnConfig.filter;

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 { PagePreferenceProvider } from '@operato/p13n'\nimport { getDefaultValue } from '@operato/time-calculator'\n\nimport { FilterConfigObject, FilterPreference } from '../types.js'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, GristConfig, PersonalGristPreference } 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        form {\n          flex-direction: column;\n          flex-flow: column;\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() personalConfigProvider?: PagePreferenceProvider\n  @state() personalConfig?: PersonalGristPreference\n  @state() personalFilters?: FilterPreference[]\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      this.personalConfigProvider = grist.personalConfigProvider\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  async updated(changes: PropertyValues<this>) {\n    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {\n      this.personalConfig = await this.personalConfigProvider.load()\n    } else if (changes.has('config') || changes.has('personalConfig')) {\n      this.applyUpdatedConfiguration()\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.filterColumns\n              .filter(column => !(column.filter as FilterConfigObject).hidden)\n              .map((column: ColumnConfig) => {\n                const { name, header, label, filter } = column\n\n                const type = (filter as FilterConfigObject).type\n\n                if (type == 'search') {\n                  return html`\n                    <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n                  `\n                }\n\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          <slot name=\"setting\"></slot>\n        `\n  }\n\n  applyUpdatedConfiguration() {\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    if (this.searchColumns.length > 0 && !this.withoutSearch) {\n      this.filterColumns.unshift({ name: 'search', filter: { type: 'search' } } as any)\n    }\n\n    if (!this.personalConfig) {\n      this.personalFilters = this.filterColumns.map(column => {\n        return { name: column.name }\n      })\n    } else {\n      const { filters: personalFilters = [] } = this.personalConfig\n\n      if (personalFilters) {\n        const xfilters = this.filterColumns.map(column => {\n          return personalFilters.find(pFilter => pFilter.name == column.name) || { name: column.name }\n        })\n\n        function reorderList(a: FilterPreference[], b: FilterPreference[]): FilterPreference[] {\n          // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움\n          const result = new Array(a.length)\n\n          // b 배열에 없는 아이템은 원래 위치로 채움\n          a.forEach((item, index) => {\n            if (!item.name || !b.find(bi => bi.name == item.name)) {\n              result[index] = item\n            }\n          })\n\n          b.forEach(item => {\n            const ai = a.find(ai => ai.name == item.name)\n            if (ai) {\n              result[result.findIndex(slot => slot === undefined)] = ai\n            }\n          })\n\n          return result\n        }\n\n        // 배열 재정렬 실행\n        this.personalFilters = reorderList(xfilters as any, personalFilters as any) as FilterPreference[]\n\n        this.filterColumns = this.personalFilters\n          .map(filter => {\n            const column = this.filterColumns.find(column => column.name == filter.name)\n            if (column?.filter) {\n              ;(column.filter as FilterConfigObject)!.hidden = filter.hidden\n            }\n            return column\n          })\n          .filter(Boolean) as ColumnConfig[]\n      }\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  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      .filter(column => column.name !== 'search' && !(column.filter as FilterConfigObject)!.hidden)\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  reset() {\n    this.form\n      .then((form: HTMLFormElement) => {\n        form.reset()\n      })\n      .catch((error: any) => {\n        console.error('Error resetting the form:', error)\n      })\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 { PagePreferenceProvider } from '@operato/p13n'\nimport { getDefaultValue } from '@operato/time-calculator'\n\nimport { FilterConfigObject, FilterPreference } from '../types.js'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, GristConfig, PersonalGristPreference } 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        form {\n          flex-direction: column;\n          flex-flow: column;\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() personalConfigProvider?: PagePreferenceProvider\n  @state() personalConfig?: PersonalGristPreference\n  @state() personalFilters?: FilterPreference[]\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      this.personalConfigProvider = grist.personalConfigProvider\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  async updated(changes: PropertyValues<this>) {\n    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {\n      this.personalConfig = await this.personalConfigProvider.load()\n    } else if (changes.has('config') || changes.has('personalConfig')) {\n      this.applyUpdatedConfiguration()\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.filterColumns\n              .filter(column => !(column.filter as FilterConfigObject).hidden)\n              .map((column: ColumnConfig) => {\n                const { name, header, label, filter } = column\n\n                const type = (filter as FilterConfigObject).type\n\n                if (type == 'search') {\n                  return html`\n                    <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n                  `\n                }\n\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          <slot name=\"setting\"></slot>\n        `\n  }\n\n  applyUpdatedConfiguration() {\n    if (!this.config) {\n      return\n    }\n\n    const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n\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    if (this.searchColumns.length > 0 && !this.withoutSearch) {\n      this.filterColumns.unshift({ name: 'search', filter: { type: 'search' } } as any)\n    }\n\n    if (!this.personalConfig) {\n      this.personalFilters = this.filterColumns.map(column => {\n        return { name: column.name }\n      })\n    } else {\n      const { filters: personalFilters = [] } = this.personalConfig\n\n      if (personalFilters) {\n        const xfilters = this.filterColumns.map(column => {\n          return personalFilters.find(pFilter => pFilter.name == column.name) || { name: column.name }\n        })\n\n        function reorderList(a: FilterPreference[], b: FilterPreference[]): FilterPreference[] {\n          // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움\n          const result = new Array(a.length)\n\n          // b 배열에 없는 아이템은 원래 위치로 채움\n          a.forEach((item, index) => {\n            if (!item.name || !b.find(bi => bi.name == item.name)) {\n              result[index] = item\n            }\n          })\n\n          b.forEach(item => {\n            const ai = a.find(ai => ai.name == item.name)\n            if (ai) {\n              result[result.findIndex(slot => slot === undefined)] = ai\n            }\n          })\n\n          return result\n        }\n\n        // 배열 재정렬 실행\n        this.personalFilters = reorderList(xfilters as any, personalFilters as any) as FilterPreference[]\n\n        this.filterColumns = this.personalFilters\n          .map(filter => {\n            const column = this.filterColumns.find(column => column.name == filter.name)\n            if (column?.filter) {\n              ;(column.filter as FilterConfigObject)!.hidden = filter.hidden\n            }\n            return column\n          })\n          .filter(Boolean) as ColumnConfig[]\n      }\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  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      .filter(column => column.name !== 'search' && !(column.filter as FilterConfigObject)!.hidden)\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  reset() {\n    this.form\n      .then((form: HTMLFormElement) => {\n        form.reset()\n      })\n      .catch((error: any) => {\n        console.error('Error resetting the form:', error)\n      })\n  }\n}\n"]}

package/dist/stories/barcode-input-filter.stories.js

@@ -128,6 +128,16 @@ const Template = ({ englishOnly, selectAfterChange, headerFilter }) => html ` <l
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ englishOnly, selectAfterChange, headerFilter })}
       mode="GRID"

package/dist/stories/barcode-input-filter.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"barcode-input-filter.stories.js","sourceRoot":"","sources":["../../stories/barcode-input-filter.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { FetchHandler } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ filters, page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({\n  englishOnly,\n  selectAfterChange,\n  headerFilter\n}: {\n  englishOnly: boolean\n  selectAfterChange: boolean\n  headerFilter: boolean\n}) {\n  return {\n    list: {\n      fields: ['name', 'description'],\n      details: ['updatedAt', 'createdAt']\n    },\n    columns: [\n      {\n        type: 'gutter',\n        gutterName: 'sequence'\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: true,\n        header: 'name',\n        filter: {\n          type: 'barcode',\n          operator: 'eq',\n          value: 'shnam',\n          options: {\n            englishOnly,\n            selectAfterChange\n          }\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        filter: {\n          operator: 'like',\n          value: 'hahaha'\n        },\n        record: {\n          align: 'left'\n        },\n        width: 200\n      },\n      {\n        type: 'datetime',\n        name: 'updatedAt',\n        header: 'updated at',\n        width: 180\n      },\n      {\n        type: 'datetime',\n        name: 'createdAt',\n        header: 'created at',\n        width: 180\n      }\n    ],\n    rows: {},\n    sorters: [\n      {\n        name: 'name',\n        desc: true\n      }\n    ],\n    filters: {\n      header: headerFilter\n    },\n    pagination: {\n      pages: [30, 50, 100, 200]\n    }\n  }\n}\n\nexport default {\n  title: 'barcode input filter for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    englishOnly: { control: 'boolean' },\n    selectAfterChange: { control: 'boolean' },\n    headerFilter: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  englishOnly: boolean\n  selectAfterChange: boolean\n  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <ox-grist\n      .config=${buildConfig({ englishOnly, selectAfterChange, headerFilter })}\n      mode=\"GRID\"\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\" class=\"header\">\n        <div class=\"filters\">\n          <ox-filters-form></ox-filters-form>\n\n          <div id=\"sorters\">\n            Sort\n            <md-icon\n              @click=${(e: Event) => {\n                const target = e.currentTarget as HTMLElement\n                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                  right: 0,\n                  top: target.offsetTop + target.offsetHeight\n                })\n              }}\n              >expand_more</md-icon\n            >\n            <ox-popup id=\"sorter-control\">\n              <ox-sorters-control> </ox-sorters-control>\n            </ox-popup>\n          </div>\n        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  englishOnly: true,\n  selectAfterChange: true,\n  headerFilter: true\n}\n"]}
+{"version":3,"file":"barcode-input-filter.stories.js","sourceRoot":"","sources":["../../stories/barcode-input-filter.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { FetchHandler } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ filters, page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({\n  englishOnly,\n  selectAfterChange,\n  headerFilter\n}: {\n  englishOnly: boolean\n  selectAfterChange: boolean\n  headerFilter: boolean\n}) {\n  return {\n    list: {\n      fields: ['name', 'description'],\n      details: ['updatedAt', 'createdAt']\n    },\n    columns: [\n      {\n        type: 'gutter',\n        gutterName: 'sequence'\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: true,\n        header: 'name',\n        filter: {\n          type: 'barcode',\n          operator: 'eq',\n          value: 'shnam',\n          options: {\n            englishOnly,\n            selectAfterChange\n          }\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        filter: {\n          operator: 'like',\n          value: 'hahaha'\n        },\n        record: {\n          align: 'left'\n        },\n        width: 200\n      },\n      {\n        type: 'datetime',\n        name: 'updatedAt',\n        header: 'updated at',\n        width: 180\n      },\n      {\n        type: 'datetime',\n        name: 'createdAt',\n        header: 'created at',\n        width: 180\n      }\n    ],\n    rows: {},\n    sorters: [\n      {\n        name: 'name',\n        desc: true\n      }\n    ],\n    filters: {\n      header: headerFilter\n    },\n    pagination: {\n      pages: [30, 50, 100, 200]\n    }\n  }\n}\n\nexport default {\n  title: 'barcode input filter for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    englishOnly: { control: 'boolean' },\n    selectAfterChange: { control: 'boolean' },\n    headerFilter: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  englishOnly: boolean\n  selectAfterChange: boolean\n  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <style>\n      ox-grist {\n        height: 600px;\n      }\n\n      ox-filters-form {\n        flex: 1;\n      }\n    </style>\n\n    <ox-grist\n      .config=${buildConfig({ englishOnly, selectAfterChange, headerFilter })}\n      mode=\"GRID\"\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\" class=\"header\">\n        <div class=\"filters\">\n          <ox-filters-form></ox-filters-form>\n\n          <div id=\"sorters\">\n            Sort\n            <md-icon\n              @click=${(e: Event) => {\n                const target = e.currentTarget as HTMLElement\n                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                  right: 0,\n                  top: target.offsetTop + target.offsetHeight\n                })\n              }}\n              >expand_more</md-icon\n            >\n            <ox-popup id=\"sorter-control\">\n              <ox-sorters-control> </ox-sorters-control>\n            </ox-popup>\n          </div>\n        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  englishOnly: true,\n  selectAfterChange: true,\n  headerFilter: true\n}\n"]}

package/dist/stories/bounded-select-filters.stories.js

@@ -245,6 +245,16 @@ const Template = ({ headerFilter }) => html ` <link
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"

package/dist/stories/bounded-select-filters.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"bounded-select-filters.stories.js","sourceRoot":"","sources":["../../stories/bounded-select-filters.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { sleep } from '@operato/utils'\n\nimport { ColumnConfig, FetchHandler, GristRecord, SelectOption } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\nimport { DataGridField } from '../src/data-grid/data-grid-field.js'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        const warehouse = idx % 2 ? '01' : '02'\n        const zone = idx % 2 ? 'Z001' : 'Z002'\n\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          warehouse,\n          zone,\n          location: `L${warehouse}-${zone}-0${(idx % 5) + 1}`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\n  return {\n    list: {\n      fields: ['name', 'description'],\n      details: ['updatedAt', 'createdAt']\n    },\n    columns: [\n      {\n        type: 'gutter',\n        gutterName: 'sequence'\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: true,\n        header: 'name',\n        filter: {\n          operator: 'eq',\n          value: 'shnam'\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        record: {\n          align: 'left'\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'warehouse',\n        header: 'warehouse',\n        filter: {\n          operator: 'eq'\n        },\n        record: {\n          align: 'left',\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            return [\n              {\n                display: '',\n                value: ''\n              }\n            ].concat(\n              WAREHOUSE.map(w => {\n                return {\n                  display: w.name,\n                  value: w.id\n                }\n              })\n            )\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'zone',\n        header: 'zone',\n        filter: {\n          operator: 'eq',\n          boundTo: ['warehouse'],\n          onchange: () => {\n            console.log('warehousde filter value changed.')\n          }\n        },\n        record: {\n          align: 'left',\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            console.log('arguments', arguments)\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            const warehouse = record.warehouse\n            console.log('warehouse', warehouse)\n\n            const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)\n            const zones = targetWH\n              ? targetWH.zones\n              : WAREHOUSE.reduce((sum, warehouse) => {\n                  sum = sum.concat(warehouse.zones)\n                  return sum\n                }, [] as any[])\n\n            return [\n              {\n                display: '',\n                value: ''\n              }\n            ].concat(\n              zones.map((z: any) => {\n                return {\n                  display: z.name,\n                  value: z.id\n                }\n              })\n            )\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'location',\n        header: 'location',\n        filter: {\n          operator: 'eq',\n          boundTo: ['warehouse', 'zone']\n        },\n        record: {\n          align: 'left',\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            const warehouse = record.warehouse\n            const zone = record.zone\n            console.log('warehouse, zone', warehouse, zone)\n\n            const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null\n            const targetZone = zone && targetWH?.zones.find((z: any) => z.id == zone)\n            return targetZone ? ['', ...targetZone.locations] : []\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'datetime',\n        name: 'updatedAt',\n        header: 'updated at',\n        width: 180\n      },\n      {\n        type: 'datetime',\n        name: 'createdAt',\n        header: 'created at',\n        width: 180\n      }\n    ],\n    rows: {},\n    sorters: [\n      {\n        name: 'name',\n        desc: true\n      }\n    ],\n    filters: {\n      header: headerFilter\n    },\n    pagination: {\n      pages: [30, 50, 100, 200]\n    }\n  }\n}\n\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'Z001',\n        name: 'Zone 01-001',\n        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']\n      },\n      {\n        id: 'Z002',\n        name: 'Zone 01-002',\n        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']\n      }\n    ]\n  },\n  {\n    id: '02',\n    name: '제 2 창고',\n    zones: [\n      {\n        id: 'Z001',\n        name: 'Zone 02-001',\n        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']\n      },\n      {\n        id: 'Z002',\n        name: 'Zone 02-002',\n        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']\n      }\n    ]\n  }\n]\n\nexport default {\n  title: 'bounded select filters for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    headerFilter: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <ox-grist\n      .config=${buildConfig({ headerFilter })}\n      mode=\"GRID\"\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form></ox-filters-form>\n        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  headerFilter: true\n}\n"]}
+{"version":3,"file":"bounded-select-filters.stories.js","sourceRoot":"","sources":["../../stories/bounded-select-filters.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,gCAAgC,CAAA;AACvC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,iCAAiC,CAAA;AACxC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAItC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGvE,MAAM,YAAY,GAAiB,KAAK,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAClF,IAAI,KAAK,GAAG,MAAM,CAAA;IAClB,IAAI,KAAK,GAAG,CAAC,IAAK,GAAG,CAAC,CAAC,GAAG,KAAM,CAAA;IAEhC,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;IAEtD,OAAO;QACL,KAAK;QACL,OAAO,EAAE,KAAK,CAAC,KAAM,GAAG,IAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAM,CAAC,CAAC,CAAC,KAAK,CAAC;aAC5D,IAAI,CAAC,EAAE,CAAC;aACR,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;YACjB,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;YACvC,MAAM,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;YAEtC,OAAO;gBACL,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC;gBACf,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAC1E,WAAW,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,KAAK,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAoB,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAC5G,SAAS;gBACT,IAAI;gBACJ,QAAQ,EAAE,IAAI,SAAS,IAAI,IAAI,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE;gBACnD,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;gBACrB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAA;QACH,CAAC,CAAC;KACL,CAAA;AACH,CAAC,CAAA;AAED,SAAS,WAAW,CAAC,EAAE,YAAY,EAA6B;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;YAC/B,OAAO,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC;SACpC;QACD,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE,UAAU;aACvB;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,IAAI;aACb;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE;oBACN,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,OAAO;iBACf;gBACD,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,aAAa;gBACnB,MAAM,EAAE,aAAa;gBACrB,MAAM,EAAE;oBACN,KAAK,EAAE,MAAM;iBACd;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,WAAW;gBACjB,MAAM,EAAE,WAAW;gBACnB,MAAM,EAAE;oBACN,QAAQ,EAAE,IAAI;iBACf;gBACD,MAAM,EAAE;oBACN,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,KAAK,EACZ,KAAU,EACV,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB,EACK,EAAE;wBAC3B,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;wBACvC,OAAO;4BACL;gCACE,OAAO,EAAE,EAAE;gCACX,KAAK,EAAE,EAAE;6BACV;yBACF,CAAC,MAAM,CACN,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;4BAChB,OAAO;gCACL,OAAO,EAAE,CAAC,CAAC,IAAI;gCACf,KAAK,EAAE,CAAC,CAAC,EAAE;6BACZ,CAAA;wBACH,CAAC,CAAC,CACH,CAAA;oBACH,CAAC;iBACF;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE;oBACN,QAAQ,EAAE,IAAI;oBACd,OAAO,EAAE,CAAC,WAAW,CAAC;oBACtB,QAAQ,EAAE,GAAG,EAAE;wBACb,OAAO,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAA;oBACjD,CAAC;iBACF;gBACD,MAAM,EAAE;oBACN,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,KAAK,EACZ,KAAU,EACV,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB,EACK,EAAE;wBAC3B,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;wBACnC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;wBACvC,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAA;wBAClC,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;wBAEnC,MAAM,QAAQ,GAAG,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,CAAA;wBACpE,MAAM,KAAK,GAAG,QAAQ;4BACpB,CAAC,CAAC,QAAQ,CAAC,KAAK;4BAChB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE;gCAClC,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;gCACjC,OAAO,GAAG,CAAA;4BACZ,CAAC,EAAE,EAAW,CAAC,CAAA;wBAEnB,OAAO;4BACL;gCACE,OAAO,EAAE,EAAE;gCACX,KAAK,EAAE,EAAE;6BACV;yBACF,CAAC,MAAM,CACN,KAAK,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;4BACnB,OAAO;gCACL,OAAO,EAAE,CAAC,CAAC,IAAI;gCACf,KAAK,EAAE,CAAC,CAAC,EAAE;6BACZ,CAAA;wBACH,CAAC,CAAC,CACH,CAAA;oBACH,CAAC;iBACF;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,UAAU;gBAClB,MAAM,EAAE;oBACN,QAAQ,EAAE,IAAI;oBACd,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC;iBAC/B;gBACD,MAAM,EAAE;oBACN,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,KAAK,EACZ,KAAU,EACV,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB,EACK,EAAE;wBAC3B,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;wBACvC,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAA;wBAClC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;wBACxB,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;wBAE/C,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,CAAC,IAAI,IAAI,CAAA;wBAC9E,MAAM,UAAU,GAAG,IAAI,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,CAAA,CAAA;wBACzE,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;oBACxD,CAAC;iBACF;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,WAAW;gBACjB,MAAM,EAAE,YAAY;gBACpB,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,WAAW;gBACjB,MAAM,EAAE,YAAY;gBACpB,KAAK,EAAE,GAAG;aACX;SACF;QACD,IAAI,EAAE,EAAE;QACR,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,IAAI;aACX;SACF;QACD,OAAO,EAAE;YACP,MAAM,EAAE,YAAY;SACrB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC;SAC1B;KACF,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG;IAChB;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;YACD;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;SACF;KACF;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;YACD;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;SACF;KACF;CACF,CAAA;AAED,eAAe;IACb,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACrC;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,YAAY,EAAY,EAAE,EAAE,CAC/D,IAAI,CAAA;;;;;;;;;;;;;;;;;QAiBE,iBAAiB,CAAC,OAAO;QACzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;gBAclB,WAAW,CAAC,EAAE,YAAY,EAAE,CAAC;;sBAEvB,YAAY;wBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC;;;;;;;gBAOvE,CAAA;AAEhB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,IAAI;CACnB,CAAA","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { sleep } from '@operato/utils'\n\nimport { ColumnConfig, FetchHandler, GristRecord, SelectOption } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\nimport { DataGridField } from '../src/data-grid/data-grid-field.js'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        const warehouse = idx % 2 ? '01' : '02'\n        const zone = idx % 2 ? 'Z001' : 'Z002'\n\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          warehouse,\n          zone,\n          location: `L${warehouse}-${zone}-0${(idx % 5) + 1}`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\n  return {\n    list: {\n      fields: ['name', 'description'],\n      details: ['updatedAt', 'createdAt']\n    },\n    columns: [\n      {\n        type: 'gutter',\n        gutterName: 'sequence'\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: true,\n        header: 'name',\n        filter: {\n          operator: 'eq',\n          value: 'shnam'\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        record: {\n          align: 'left'\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'warehouse',\n        header: 'warehouse',\n        filter: {\n          operator: 'eq'\n        },\n        record: {\n          align: 'left',\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            return [\n              {\n                display: '',\n                value: ''\n              }\n            ].concat(\n              WAREHOUSE.map(w => {\n                return {\n                  display: w.name,\n                  value: w.id\n                }\n              })\n            )\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'zone',\n        header: 'zone',\n        filter: {\n          operator: 'eq',\n          boundTo: ['warehouse'],\n          onchange: () => {\n            console.log('warehousde filter value changed.')\n          }\n        },\n        record: {\n          align: 'left',\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            console.log('arguments', arguments)\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            const warehouse = record.warehouse\n            console.log('warehouse', warehouse)\n\n            const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)\n            const zones = targetWH\n              ? targetWH.zones\n              : WAREHOUSE.reduce((sum, warehouse) => {\n                  sum = sum.concat(warehouse.zones)\n                  return sum\n                }, [] as any[])\n\n            return [\n              {\n                display: '',\n                value: ''\n              }\n            ].concat(\n              zones.map((z: any) => {\n                return {\n                  display: z.name,\n                  value: z.id\n                }\n              })\n            )\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'location',\n        header: 'location',\n        filter: {\n          operator: 'eq',\n          boundTo: ['warehouse', 'zone']\n        },\n        record: {\n          align: 'left',\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            const warehouse = record.warehouse\n            const zone = record.zone\n            console.log('warehouse, zone', warehouse, zone)\n\n            const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null\n            const targetZone = zone && targetWH?.zones.find((z: any) => z.id == zone)\n            return targetZone ? ['', ...targetZone.locations] : []\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'datetime',\n        name: 'updatedAt',\n        header: 'updated at',\n        width: 180\n      },\n      {\n        type: 'datetime',\n        name: 'createdAt',\n        header: 'created at',\n        width: 180\n      }\n    ],\n    rows: {},\n    sorters: [\n      {\n        name: 'name',\n        desc: true\n      }\n    ],\n    filters: {\n      header: headerFilter\n    },\n    pagination: {\n      pages: [30, 50, 100, 200]\n    }\n  }\n}\n\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'Z001',\n        name: 'Zone 01-001',\n        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']\n      },\n      {\n        id: 'Z002',\n        name: 'Zone 01-002',\n        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']\n      }\n    ]\n  },\n  {\n    id: '02',\n    name: '제 2 창고',\n    zones: [\n      {\n        id: 'Z001',\n        name: 'Zone 02-001',\n        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']\n      },\n      {\n        id: 'Z002',\n        name: 'Zone 02-002',\n        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']\n      }\n    ]\n  }\n]\n\nexport default {\n  title: 'bounded select filters for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    headerFilter: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <style>\n      ox-grist {\n        height: 600px;\n      }\n\n      ox-filters-form {\n        flex: 1;\n      }\n    </style>\n\n    <ox-grist\n      .config=${buildConfig({ headerFilter })}\n      mode=\"GRID\"\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form></ox-filters-form>\n        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  headerFilter: true\n}\n"]}

package/dist/stories/bounded-select-record.stories.js

@@ -248,6 +248,16 @@ const Template = ({ headerFilter }) => html ` <link
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"

package/dist/stories/bounded-select-record.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"bounded-select-record.stories.js","sourceRoot":"","sources":["../../stories/bounded-select-record.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { sleep } from '@operato/utils'\n\nimport { ColumnConfig, FetchHandler, FieldEditor, GristRecord, SelectOption } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\nimport { DataGridField } from '../src/data-grid/data-grid-field.js'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        const warehouse: string = idx % 2 ? '01' : '02'\n        const zone: string = idx % 2 ? 'Z001' : 'Z002'\n\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          warehouse,\n          zone,\n          location: `L${warehouse}-${zone}-0${(idx % 5) + 1}`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\n  return {\n    list: {\n      fields: ['name', 'description'],\n      details: ['updatedAt', 'createdAt']\n    },\n    columns: [\n      {\n        type: 'gutter',\n        gutterName: 'sequence'\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: true,\n        header: 'name',\n        filter: {\n          operator: 'eq',\n          value: 'shnam'\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        record: {\n          align: 'left'\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'warehouse',\n        header: 'warehouse',\n        filter: {\n          operator: 'eq'\n        },\n        record: {\n          align: 'left',\n          editable: true,\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            return [\n              {\n                display: '',\n                value: ''\n              }\n            ].concat(\n              WAREHOUSE.map(w => {\n                return {\n                  display: w.name,\n                  value: w.id\n                }\n              })\n            )\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'zone',\n        header: 'zone',\n        filter: {\n          operator: 'eq',\n          boundTo: ['warehouse'],\n          onchange: () => {\n            console.log('warehousde filter value changed.')\n          }\n        },\n        record: {\n          align: 'left',\n          editable: true,\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            console.log('arguments', arguments)\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            const warehouse = record.warehouse\n            console.log('warehouse', warehouse)\n\n            const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)\n            const zones = targetWH\n              ? targetWH.zones\n              : WAREHOUSE.reduce((sum, warehouse) => {\n                  sum = sum.concat(warehouse.zones)\n                  return sum\n                }, [] as any[])\n\n            return [\n              {\n                display: '',\n                value: ''\n              }\n            ].concat(\n              zones.map((z: any) => {\n                return {\n                  display: z.name,\n                  value: z.id\n                }\n              })\n            )\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'location',\n        header: 'location',\n        filter: {\n          operator: 'eq',\n          boundTo: ['warehouse', 'zone']\n        },\n        record: {\n          align: 'left',\n          editable: true,\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            const warehouse = record.warehouse\n            const zone = record.zone\n            console.log('warehouse, zone', warehouse, zone)\n\n            const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null\n            const targetZone = zone && targetWH?.zones.find((z: any) => z.id == zone)\n            return targetZone ? ['', ...targetZone.locations] : []\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'datetime',\n        name: 'updatedAt',\n        header: 'updated at',\n        width: 180\n      },\n      {\n        type: 'datetime',\n        name: 'createdAt',\n        header: 'created at',\n        width: 180\n      }\n    ],\n    rows: {},\n    sorters: [\n      {\n        name: 'name',\n        desc: true\n      }\n    ],\n    filters: {\n      header: headerFilter\n    },\n    pagination: {\n      pages: [30, 50, 100, 200]\n    }\n  }\n}\n\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'Z001',\n        name: 'Zone 01-001',\n        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']\n      },\n      {\n        id: 'Z002',\n        name: 'Zone 01-002',\n        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']\n      }\n    ]\n  },\n  {\n    id: '02',\n    name: '제 2 창고',\n    zones: [\n      {\n        id: 'Z001',\n        name: 'Zone 02-001',\n        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']\n      },\n      {\n        id: 'Z002',\n        name: 'Zone 02-002',\n        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']\n      }\n    ]\n  }\n]\n\nexport default {\n  title: 'bounded select record for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    headerFilter: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <ox-grist\n      .config=${buildConfig({ headerFilter })}\n      mode=\"GRID\"\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form></ox-filters-form>\n        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  headerFilter: true\n}\n"]}
+{"version":3,"file":"bounded-select-record.stories.js","sourceRoot":"","sources":["../../stories/bounded-select-record.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { sleep } from '@operato/utils'\n\nimport { ColumnConfig, FetchHandler, FieldEditor, GristRecord, SelectOption } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\nimport { DataGridField } from '../src/data-grid/data-grid-field.js'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        const warehouse: string = idx % 2 ? '01' : '02'\n        const zone: string = idx % 2 ? 'Z001' : 'Z002'\n\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          warehouse,\n          zone,\n          location: `L${warehouse}-${zone}-0${(idx % 5) + 1}`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\n  return {\n    list: {\n      fields: ['name', 'description'],\n      details: ['updatedAt', 'createdAt']\n    },\n    columns: [\n      {\n        type: 'gutter',\n        gutterName: 'sequence'\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: true,\n        header: 'name',\n        filter: {\n          operator: 'eq',\n          value: 'shnam'\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        record: {\n          align: 'left'\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'warehouse',\n        header: 'warehouse',\n        filter: {\n          operator: 'eq'\n        },\n        record: {\n          align: 'left',\n          editable: true,\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            return [\n              {\n                display: '',\n                value: ''\n              }\n            ].concat(\n              WAREHOUSE.map(w => {\n                return {\n                  display: w.name,\n                  value: w.id\n                }\n              })\n            )\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'zone',\n        header: 'zone',\n        filter: {\n          operator: 'eq',\n          boundTo: ['warehouse'],\n          onchange: () => {\n            console.log('warehousde filter value changed.')\n          }\n        },\n        record: {\n          align: 'left',\n          editable: true,\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            console.log('arguments', arguments)\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            const warehouse = record.warehouse\n            console.log('warehouse', warehouse)\n\n            const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)\n            const zones = targetWH\n              ? targetWH.zones\n              : WAREHOUSE.reduce((sum, warehouse) => {\n                  sum = sum.concat(warehouse.zones)\n                  return sum\n                }, [] as any[])\n\n            return [\n              {\n                display: '',\n                value: ''\n              }\n            ].concat(\n              zones.map((z: any) => {\n                return {\n                  display: z.name,\n                  value: z.id\n                }\n              })\n            )\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'location',\n        header: 'location',\n        filter: {\n          operator: 'eq',\n          boundTo: ['warehouse', 'zone']\n        },\n        record: {\n          align: 'left',\n          editable: true,\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            const warehouse = record.warehouse\n            const zone = record.zone\n            console.log('warehouse, zone', warehouse, zone)\n\n            const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null\n            const targetZone = zone && targetWH?.zones.find((z: any) => z.id == zone)\n            return targetZone ? ['', ...targetZone.locations] : []\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'datetime',\n        name: 'updatedAt',\n        header: 'updated at',\n        width: 180\n      },\n      {\n        type: 'datetime',\n        name: 'createdAt',\n        header: 'created at',\n        width: 180\n      }\n    ],\n    rows: {},\n    sorters: [\n      {\n        name: 'name',\n        desc: true\n      }\n    ],\n    filters: {\n      header: headerFilter\n    },\n    pagination: {\n      pages: [30, 50, 100, 200]\n    }\n  }\n}\n\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'Z001',\n        name: 'Zone 01-001',\n        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']\n      },\n      {\n        id: 'Z002',\n        name: 'Zone 01-002',\n        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']\n      }\n    ]\n  },\n  {\n    id: '02',\n    name: '제 2 창고',\n    zones: [\n      {\n        id: 'Z001',\n        name: 'Zone 02-001',\n        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']\n      },\n      {\n        id: 'Z002',\n        name: 'Zone 02-002',\n        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']\n      }\n    ]\n  }\n]\n\nexport default {\n  title: 'bounded select record for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    headerFilter: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <style>\n      ox-grist {\n        height: 600px;\n      }\n\n      ox-filters-form {\n        flex: 1;\n      }\n    </style>\n\n    <ox-grist\n      .config=${buildConfig({ headerFilter })}\n      mode=\"GRID\"\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form></ox-filters-form>\n        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  headerFilter: true\n}\n"]}

package/dist/stories/creatable-only-column.stories.js

@@ -169,6 +169,16 @@ const Template = ({ headerFilter }) => html ` <link
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"

package/dist/stories/creatable-only-column.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"creatable-only-column.stories.js","sourceRoot":"","sources":["../../stories/creatable-only-column.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { FetchHandler } from '../src/types.js'\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {\n  var total = 5\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          number: idx,\n          float: 1.3,\n          date: '2023-09-20',\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\n  return {\n    list: {\n      fields: ['name', 'description'],\n      details: ['updatedAt', 'createdAt']\n    },\n    columns: [\n      {\n        type: 'gutter',\n        gutterName: 'sequence'\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'add',\n        title: 'add',\n        handlers: {\n          click: 'record-copy'\n        }\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: true,\n        header: 'name',\n        filter: 'search',\n        record: {\n          editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {\n            return !record.id\n          }\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        filter: 'search',\n        record: {\n          align: 'left',\n          editable: true\n        },\n        width: 200\n      },\n      {\n        type: 'checkbox',\n        name: 'chk',\n        header: 'chk',\n        record: {\n          editable: true\n        },\n        width: 40\n      },\n      {\n        type: 'number',\n        name: 'number',\n        header: 'number',\n        record: {\n          editable: true\n        },\n        width: 80\n      },\n      {\n        type: 'float',\n        name: 'float',\n        header: 'float',\n        record: {\n          editable: true\n        },\n        width: 80\n      },\n      {\n        type: 'date',\n        name: 'date',\n        header: 'date',\n        width: 120\n      },\n      {\n        type: 'datetime',\n        name: 'updatedAt',\n        header: 'updated at',\n        width: 180\n      }\n    ],\n    rows: {\n      selectable: {\n        multiple: false\n      },\n      handlers: {\n        click: 'select-row'\n      },\n      appendable: true\n    },\n    sorters: [\n      {\n        name: 'name',\n        desc: true\n      }\n    ],\n    filters: {\n      header: headerFilter\n    },\n    pagination: {\n      pages: [30, 50, 100, 200]\n    }\n  }\n}\n\n/* Make the 'name' column editable only at the time of creation. */\nexport default {\n  title: 'creatable only column for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    headerFilter: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <ox-grist\n      .config=${buildConfig({ headerFilter })}\n      mode=\"GRID\"\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n      @field-change=${(e: any) => {\n        const { name, number, chk } = e.detail.record\n        console.log(name, number, chk)\n      }}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form></ox-filters-form>\n        </div>\n\n        <div id=\"sorters\">\n          Sort\n          <md-icon\n            @click=${(e: Event) => {\n              const target = e.currentTarget as HTMLElement\n              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                right: 0,\n                top: target.offsetTop + target.offsetHeight\n              })\n            }}\n            >expand_more</md-icon\n          >\n          <ox-popup id=\"sorter-control\">\n            <ox-sorters-control> </ox-sorters-control>\n          </ox-popup>\n        </div>\n\n        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"creatable-only-column.stories.js","sourceRoot":"","sources":["../../stories/creatable-only-column.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { FetchHandler } from '../src/types.js'\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {\n  var total = 5\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          number: idx,\n          float: 1.3,\n          date: '2023-09-20',\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\n  return {\n    list: {\n      fields: ['name', 'description'],\n      details: ['updatedAt', 'createdAt']\n    },\n    columns: [\n      {\n        type: 'gutter',\n        gutterName: 'sequence'\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'add',\n        title: 'add',\n        handlers: {\n          click: 'record-copy'\n        }\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: true,\n        header: 'name',\n        filter: 'search',\n        record: {\n          editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {\n            return !record.id\n          }\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        filter: 'search',\n        record: {\n          align: 'left',\n          editable: true\n        },\n        width: 200\n      },\n      {\n        type: 'checkbox',\n        name: 'chk',\n        header: 'chk',\n        record: {\n          editable: true\n        },\n        width: 40\n      },\n      {\n        type: 'number',\n        name: 'number',\n        header: 'number',\n        record: {\n          editable: true\n        },\n        width: 80\n      },\n      {\n        type: 'float',\n        name: 'float',\n        header: 'float',\n        record: {\n          editable: true\n        },\n        width: 80\n      },\n      {\n        type: 'date',\n        name: 'date',\n        header: 'date',\n        width: 120\n      },\n      {\n        type: 'datetime',\n        name: 'updatedAt',\n        header: 'updated at',\n        width: 180\n      }\n    ],\n    rows: {\n      selectable: {\n        multiple: false\n      },\n      handlers: {\n        click: 'select-row'\n      },\n      appendable: true\n    },\n    sorters: [\n      {\n        name: 'name',\n        desc: true\n      }\n    ],\n    filters: {\n      header: headerFilter\n    },\n    pagination: {\n      pages: [30, 50, 100, 200]\n    }\n  }\n}\n\n/* Make the 'name' column editable only at the time of creation. */\nexport default {\n  title: 'creatable only column for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    headerFilter: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <style>\n      ox-grist {\n        height: 600px;\n      }\n\n      ox-filters-form {\n        flex: 1;\n      }\n    </style>\n\n    <ox-grist\n      .config=${buildConfig({ headerFilter })}\n      mode=\"GRID\"\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n      @field-change=${(e: any) => {\n        const { name, number, chk } = e.detail.record\n        console.log(name, number, chk)\n      }}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form></ox-filters-form>\n        </div>\n\n        <div id=\"sorters\">\n          Sort\n          <md-icon\n            @click=${(e: Event) => {\n              const target = e.currentTarget as HTMLElement\n              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                right: 0,\n                top: target.offsetTop + target.offsetHeight\n              })\n            }}\n            >expand_more</md-icon\n          >\n          <ox-popup id=\"sorter-control\">\n            <ox-sorters-control> </ox-sorters-control>\n          </ox-popup>\n        </div>\n\n        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/default-filters.stories.js

@@ -164,6 +164,16 @@ const Template = ({ headerFilter }) => html ` <link
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"