@operato/data-grist 0.3.22 → 0.3.28

package/dist/src/data-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-provider.js","sourceRoot":"","sources":["../../src/data-provider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZERO_RECORDS } from './configure/zero-config'\nimport { DataConsumer } from './data-consumer'\nimport { FetchHandler, FetchOption, GristRecord, SorterConfig } from './types'\n\nfunction EMPTY_FETCHHANDLER() {\n  return {\n    total: 0,\n    records: []\n  }\n}\n\nfunction _calculateTotalPage(limit: number, total: number) {\n  /*\n   * total page는 1이상이어야 한다.\n   * 즉, 레코드가 하나도 없어도, 페이지 갯수는 1이 되어야 한다.\n   */\n  return Math.max(1, Math.ceil(total / limit))\n}\n\nexport class DataProvider {\n  page: number = 1\n  limit: number = 20\n  total: number = 0\n  records: GristRecord[] = []\n\n  private consumer?: DataConsumer\n  private _fetchHandler?: FetchHandler\n  private _sorters?: SorterConfig[]\n\n  private _pageChangeHandler: EventListener = this.onPageChange.bind(this)\n  private _limitChangeHandler = this.onLimitChange.bind(this)\n  private _sortersChangeHandler = this.onSortersChange.bind(this)\n  private _recordChangeHandler = this.onRecordChange.bind(this)\n  private _attachPageHandler: EventListener = this.onAttachPage.bind(this)\n\n  private _fetchHandlerWrap: any\n  private _fetchOptions: any\n\n  constructor(consumer: DataConsumer) {\n    this.consumer = consumer\n\n    this.fetchHandler = consumer.fetchHandler\n\n    this.consumer.addEventListener('attach-page', this._attachPageHandler)\n    this.consumer.addEventListener('page-change', this._pageChangeHandler)\n    this.consumer.addEventListener('limit-change', this._limitChangeHandler)\n    this.consumer.addEventListener('sorters-change', this._sortersChangeHandler)\n    this.consumer.addEventListener('record-change', this._recordChangeHandler)\n  }\n\n  dispose() {\n    this.consumer?.removeEventListener('attach-page', this._attachPageHandler)\n    this.consumer?.removeEventListener('page-change', this._pageChangeHandler)\n    this.consumer?.removeEventListener('limit-change', this._limitChangeHandler)\n    this.consumer?.removeEventListener('sorters-change', this._sortersChangeHandler)\n    this.consumer?.removeEventListener('record-change', this._recordChangeHandler)\n  }\n\n  onAttachPage() {\n    this.attach()\n  }\n\n  onPageChange(e: Event) {\n    var page = (e as CustomEvent).detail\n    this.fetch({ page })\n  }\n\n  onLimitChange(e: Event) {\n    var limit = (e as CustomEvent).detail\n    this.fetch({ limit })\n  }\n\n  onSortersChange(e: Event) {\n    this.sorters = (e as CustomEvent).detail\n    this.fetch()\n  }\n\n  onRecordChange(e: Event) {\n    this.consumer?.checkDirties()\n  }\n\n  get fetchOptions() {\n    return this._fetchOptions\n  }\n\n  set fetchOptions(fetchOptions) {\n    this._fetchOptions = fetchOptions\n\n    this.fetch()\n  }\n\n  get fetchHandler() {\n    if (!this._fetchHandlerWrap) {\n      this._fetchHandlerWrap = async (options: FetchOption) => {\n        if (!this._fetchHandler) {\n          return\n        }\n\n        try {\n          this.consumer?.showSpinner()\n          return await (this._fetchHandler || EMPTY_FETCHHANDLER)(options)\n        } finally {\n          this.consumer?.hideSpinner()\n        }\n      }\n    }\n\n    return this._fetchHandlerWrap\n  }\n\n  set fetchHandler(fetchHandler) {\n    this._fetchHandler = fetchHandler\n    delete this._fetchHandlerWrap\n  }\n\n  get sorters() {\n    return this._sorters\n  }\n\n  set sorters(sorters) {\n    this._sorters = sorters\n  }\n\n  async attach(reset = false) {\n    var { page = 0, limit = 20 } = this\n\n    /*\n     * page는 0 based index가 아님에 주의한다.\n     * 즉, page 값이 1 은 첫페이지를 의미한다.\n     */\n    if (reset) {\n      this.records = ZERO_RECORDS\n      page = 1\n    } else {\n      /* attach의 경우는 grist data의 변경상태를 유지하기 위해서, grist._data 를 기반으로 한다. */\n      this.records = this.consumer?._data ? this.consumer._data.records : ZERO_RECORDS\n      page = page + 1\n    }\n\n    return this._update(\n      {\n        /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n        limit,\n        page,\n        ...(await this.fetchHandler.call(null, {\n          page,\n          limit,\n          sorters: this.sorters,\n          options: this.fetchOptions\n        }))\n      },\n      reset\n    )\n  }\n\n  async fetch({ page = this.page, limit = this.limit, sorters = this.sorters } = {}) {\n    /* fetchHandler should reture { page, limit, total, records } */\n    this.records = ZERO_RECORDS\n\n    this.sorters = sorters\n\n    return this._update({\n      /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n      limit,\n      page,\n      ...(await this.fetchHandler.call(null, {\n        page,\n        limit,\n        sorters,\n        options: this.fetchOptions\n      }))\n    })\n  }\n\n  async _update(\n    {\n      page,\n      limit,\n      total,\n      records\n    }: {\n      page: number\n      limit: number\n      total: number\n      records: GristRecord[]\n    },\n    reset?: boolean\n  ): Promise<void> {\n    // total을 감안해서 page가 최대값을 넘지 않도록 한다.\n    var maxpage = _calculateTotalPage(limit, total)\n    if (maxpage < page) {\n      return await this.fetch({ page: maxpage, limit })\n    }\n    // CONFIRM-ME 위 코드에 대한 설명이 필요함!!!.\n\n    // page와 limit이 없는 경우 records 검사 전에 초기화\n    this.page = this.page || page\n    this.limit = this.limit || limit\n\n    if (!records) {\n      return\n    }\n\n    if (this.records === ZERO_RECORDS) {\n      this.records = records\n    } else if (this.page < page) {\n      // attach인 경우에는 records를 append한다.\n      this.records = [...this.records, ...records]\n    } else {\n      return\n    }\n\n    this.limit = limit\n    this.total = total\n    this.page = page\n\n    this.consumer &&\n      (this.consumer.data = {\n        page: this.page,\n        limit: this.limit,\n        total: this.total,\n\n        records: this.records\n      })\n  }\n}\n"]}
+{"version":3,"file":"data-provider.js","sourceRoot":"","sources":["../../src/data-provider.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, SortersConfig } from '.'\nimport { ZERO_RECORDS } from './configure/zero-config'\nimport { DataConsumer } from './data-consumer'\nimport { FetchHandler, FetchOption, GristRecord, SorterConfig } from './types'\n\nfunction EMPTY_FETCHHANDLER() {\n  return {\n    total: 0,\n    records: []\n  }\n}\n\nfunction _calculateTotalPage(limit: number, total: number) {\n  /*\n   * total page는 1이상이어야 한다.\n   * 즉, 레코드가 하나도 없어도, 페이지 갯수는 1이 되어야 한다.\n   */\n  return Math.max(1, Math.ceil(total / limit))\n}\n\nexport class DataProvider {\n  page: number = 1\n  limit: number = 20\n  total: number = 0\n  records: GristRecord[] = []\n\n  private consumer?: DataConsumer\n  private _fetchHandler?: FetchHandler\n  private _sorters?: SorterConfig[]\n  private _filters?: FilterConfigObject[]\n\n  private _pageChangeHandler: EventListener = this.onPageChange.bind(this)\n  private _limitChangeHandler = this.onLimitChange.bind(this)\n  private _sortersChangeHandler = this.onSortersChange.bind(this)\n  private _filtersChangeHandler = this.onFiltersChange.bind(this)\n  private _recordChangeHandler = this.onRecordChange.bind(this)\n  private _attachPageHandler: EventListener = this.onAttachPage.bind(this)\n\n  private _fetchHandlerWrap: any\n  private _fetchOptions: any\n\n  constructor(consumer: DataConsumer) {\n    this.consumer = consumer\n\n    this.fetchHandler = consumer.fetchHandler\n\n    this.consumer.addEventListener('attach-page', this._attachPageHandler)\n    this.consumer.addEventListener('page-change', this._pageChangeHandler)\n    this.consumer.addEventListener('limit-change', this._limitChangeHandler)\n    this.consumer.addEventListener('sorters-change', this._sortersChangeHandler)\n    this.consumer.addEventListener('filters-change', this._filtersChangeHandler)\n    this.consumer.addEventListener('record-change', this._recordChangeHandler)\n  }\n\n  dispose() {\n    this.consumer?.removeEventListener('attach-page', this._attachPageHandler)\n    this.consumer?.removeEventListener('page-change', this._pageChangeHandler)\n    this.consumer?.removeEventListener('limit-change', this._limitChangeHandler)\n    this.consumer?.removeEventListener('sorters-change', this._sortersChangeHandler)\n    this.consumer?.removeEventListener('filters-change', this._filtersChangeHandler)\n    this.consumer?.removeEventListener('record-change', this._recordChangeHandler)\n  }\n\n  onAttachPage() {\n    this.attach()\n  }\n\n  onPageChange(e: Event) {\n    var page = (e as CustomEvent).detail\n    this.fetch({ page })\n  }\n\n  onLimitChange(e: Event) {\n    var limit = (e as CustomEvent).detail\n    this.fetch({ limit })\n  }\n\n  onSortersChange(e: Event) {\n    this.sorters = (e as CustomEvent).detail\n    this.fetch()\n  }\n\n  onFiltersChange(e: Event) {\n    this.filters = (e as CustomEvent).detail\n    this.fetch()\n  }\n\n  onRecordChange(e: Event) {\n    this.consumer?.checkDirties()\n  }\n\n  get fetchOptions() {\n    return this._fetchOptions\n  }\n\n  set fetchOptions(fetchOptions) {\n    this._fetchOptions = fetchOptions\n\n    this.fetch()\n  }\n\n  get fetchHandler() {\n    if (!this._fetchHandlerWrap) {\n      this._fetchHandlerWrap = async (options: FetchOption) => {\n        if (!this._fetchHandler) {\n          return\n        }\n\n        try {\n          this.consumer?.showSpinner()\n          return await (this._fetchHandler || EMPTY_FETCHHANDLER)(options)\n        } finally {\n          this.consumer?.hideSpinner()\n        }\n      }\n    }\n\n    return this._fetchHandlerWrap\n  }\n\n  set fetchHandler(fetchHandler) {\n    this._fetchHandler = fetchHandler\n    delete this._fetchHandlerWrap\n  }\n\n  get sorters() {\n    return this._sorters\n  }\n\n  set sorters(sorters) {\n    this._sorters = sorters\n  }\n\n  /* alias for sorters */\n  get sortings() {\n    return this._sorters\n  }\n\n  set sortings(sorters) {\n    this._sorters = sorters\n  }\n\n  get filters() {\n    return this._filters\n  }\n\n  set filters(filters) {\n    this._filters = filters\n  }\n\n  async attach(reset = false) {\n    var { page = 0, limit = 20 } = this\n\n    /*\n     * page는 0 based index가 아님에 주의한다.\n     * 즉, page 값이 1 은 첫페이지를 의미한다.\n     */\n    if (reset) {\n      this.records = ZERO_RECORDS\n      page = 1\n    } else {\n      /* attach의 경우는 grist data의 변경상태를 유지하기 위해서, grist._data 를 기반으로 한다. */\n      this.records = this.consumer?._data ? this.consumer._data.records : ZERO_RECORDS\n      page = page + 1\n    }\n\n    return this._update(\n      {\n        /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n        limit,\n        page,\n        ...(await this.fetchHandler.call(null, {\n          page,\n          limit,\n          sorters: this.sorters,\n          options: this.fetchOptions\n        }))\n      },\n      reset\n    )\n  }\n\n  async fetch({\n    page = this.page,\n    limit = this.limit,\n    sorters,\n    sortings,\n    filters\n  }: {\n    page?: number\n    limit?: number\n    sorters?: SortersConfig\n    sortings?: SortersConfig\n    filters?: FilterConfigObject[]\n  } = {}) {\n    /* sortings property is only for things-factory server-side list parameter convention */\n    /* fetchHandler should reture { page, limit, total, records } */\n    this.records = ZERO_RECORDS\n\n    sorters = sorters || sortings || this.sorters\n    filters = filters || this.filters\n\n    this.sorters = sorters\n\n    return this._update({\n      /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n      limit,\n      page,\n      ...(await this.fetchHandler.call(null, {\n        page,\n        limit,\n        sorters,\n        sortings: sorters,\n        filters,\n        options: this.fetchOptions\n      }))\n    })\n  }\n\n  async _update(\n    {\n      page,\n      limit,\n      total,\n      records\n    }: {\n      page: number\n      limit: number\n      total: number\n      records: GristRecord[]\n    },\n    reset?: boolean\n  ): Promise<void> {\n    // total을 감안해서 page가 최대값을 넘지 않도록 한다.\n    var maxpage = _calculateTotalPage(limit, total)\n    if (maxpage < page) {\n      return await this.fetch({ page: maxpage, limit })\n    }\n    // CONFIRM-ME 위 코드에 대한 설명이 필요함!!!.\n\n    // page와 limit이 없는 경우 records 검사 전에 초기화\n    this.page = this.page || page\n    this.limit = this.limit || limit\n\n    if (!records) {\n      return\n    }\n\n    if (this.records === ZERO_RECORDS) {\n      this.records = records\n    } else if (this.page < page) {\n      // attach인 경우에는 records를 append한다.\n      this.records = [...this.records, ...records]\n    } else {\n      return\n    }\n\n    this.limit = limit\n    this.total = total\n    this.page = page\n\n    this.consumer &&\n      (this.consumer.data = {\n        page: this.page,\n        limit: this.limit,\n        total: this.total,\n\n        records: this.records\n      })\n  }\n}\n"]}

package/dist/src/filters/filter-checkbox.d.ts

@@ -1,2 +1,3 @@
+import '@operato/input/ox-checkbox.js';
 import { FilterSelectRenderer } from '../types';
 export declare const FilterCheckbox: FilterSelectRenderer;

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

@@ -1,31 +1,8 @@
+import '@operato/input/ox-checkbox.js';
 import { html } from 'lit-html';
 export const FilterCheckbox = (column, owner) => {
     const filter = column.filter;
     const options = filter === null || filter === void 0 ? void 0 : filter.options;
-    return html `
-    <input
-      type="checkbox"
-      name="${column.name}"
-      @click=${(e) => {
-        // e.preventDefault()
-        // e.stopPropagation()
-        const checkbox = e.target;
-        // if (checkbox.checked === false && checkbox.indeterminate === false) {
-        //   checkbox.indeterminate = true
-        // } else if ((checkbox.checked = true && checkbox.indeterminate === true)) {
-        //   checkbox.checked = false
-        // }
-        // if (checkbox.checked) {
-        //   checkbox.checked = false
-        // } else {
-        //   if (checkbox.checked === false) {
-        //     checkbox.indeterminate = true
-        //   } else {
-        //     checkbox.checked = true
-        //   }
-        // }
-    }}
-    />
-  `;
+    return html ` <ox-checkbox name="${column.name}" indeterminatable indeterminate /> `;
 };
 //# sourceMappingURL=filter-checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACpE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAA;IAE/B,OAAO,IAAI,CAAA;;;cAGC,MAAM,CAAC,IAAI;eACV,CAAC,CAAa,EAAE,EAAE;QACzB,qBAAqB;QACrB,sBAAsB;QAEtB,MAAM,QAAQ,GAAqB,CAAC,CAAC,MAA0B,CAAA;QAE/D,wEAAwE;QACxE,kCAAkC;QAClC,6EAA6E;QAC7E,6BAA6B;QAC7B,IAAI;QAEJ,0BAA0B;QAC1B,6BAA6B;QAC7B,WAAW;QACX,sCAAsC;QACtC,oCAAoC;QACpC,aAAa;QACb,8BAA8B;QAC9B,MAAM;QACN,IAAI;IACN,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterCheckbox: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options\n\n  return html`\n    <input\n      type=\"checkbox\"\n      name=\"${column.name}\"\n      @click=${(e: MouseEvent) => {\n        // e.preventDefault()\n        // e.stopPropagation()\n\n        const checkbox: HTMLInputElement = e.target as HTMLInputElement\n\n        // if (checkbox.checked === false && checkbox.indeterminate === false) {\n        //   checkbox.indeterminate = true\n        // } else if ((checkbox.checked = true && checkbox.indeterminate === true)) {\n        //   checkbox.checked = false\n        // }\n\n        // if (checkbox.checked) {\n        //   checkbox.checked = false\n        // } else {\n        //   if (checkbox.checked === false) {\n        //     checkbox.indeterminate = true\n        //   } else {\n        //     checkbox.checked = true\n        //   }\n        // }\n      }}\n    />\n  `\n}\n"]}
+{"version":3,"file":"filter-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACpE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAA;IAE/B,OAAO,IAAI,CAAA,uBAAuB,MAAM,CAAC,IAAI,sCAAsC,CAAA;AACrF,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterCheckbox: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options\n\n  return html` <ox-checkbox name=\"${column.name}\" indeterminatable indeterminate /> `\n}\n"]}

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

@@ -2,9 +2,12 @@ import '@operato/input/ox-checkbox.js';
 import { html } from 'lit-html';
 export const FilterSelect = (column, owner) => {
     const filter = column.filter;
-    const options = (filter === null || filter === void 0 ? void 0 : filter.options) || [];
-    return html `
-    ${options === null || options === void 0 ? void 0 : options.map((option) => html ` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}
-  `;
+    const operator = filter === null || filter === void 0 ? void 0 : filter.operator;
+    const options = (filter === null || filter === void 0 ? void 0 : filter.options) || column.record.options || [];
+    return operator === 'in'
+        ? html `
+        ${options === null || options === void 0 ? void 0 : options.filter((option) => !!option).map((option) => html ` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}
+      `
+        : html ` ${options === null || options === void 0 ? void 0 : options.map((option) => html ` <div option value=${option}>${option}&nbsp;</div> `)} `;
 };
 //# sourceMappingURL=filter-select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IAClE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,KAAI,EAAE,CAAA;IAErC,OAAO,IAAI,CAAA;MACP,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,8BAA8B,MAAM,IAAI,MAAM,iBAAiB,CAAC;GACxG,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterSelect: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options || []\n\n  return html`\n    ${options?.map((option: string) => html` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}\n  `\n}\n"]}
+{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IAClE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,QAAQ,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAA;IACjC,MAAM,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,KAAI,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE9D,OAAO,QAAQ,KAAK,IAAI;QACtB,CAAC,CAAC,IAAI,CAAA;UACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CACL,MAAM,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EACpC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,8BAA8B,MAAM,IAAI,MAAM,iBAAiB,CAAC;OAChG;QACH,CAAC,CAAC,IAAI,CAAA,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,sBAAsB,MAAM,IAAI,MAAM,eAAe,CAAC,GAAG,CAAA;AAC5G,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterSelect: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const operator = filter?.operator\n  const options = filter?.options || column.record.options || []\n\n  return operator === 'in'\n    ? html`\n        ${options\n          ?.filter((option: string) => !!option)\n          .map((option: string) => html` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}\n      `\n    : html` ${options?.map((option: string) => html` <div option value=${option}>${option}&nbsp;</div> `)} `\n}\n"]}

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

@@ -22,8 +22,7 @@ let FiltersForm = class FiltersForm extends LitElement {
                 this.config = e.detail;
             });
             this.renderRoot.addEventListener('change', async (e) => {
-                e.stopPropagation();
-                this.dispatchEvent(new CustomEvent('change', {
+                this.dispatchEvent(new CustomEvent('filters-change', {
                     bubbles: true,
                     composed: true,
                     detail: await this.getQueryFilters()
@@ -50,7 +49,7 @@ let FiltersForm = class FiltersForm extends LitElement {
         ${this.searchColumns.length === 0 ? html `` : html ` <ox-input-search name="search"></ox-input-search> `}
         ${this.filterColumns.map((column) => {
             const { name, label, filter } = column;
-            const placeholder = typeof label === 'string'
+            const labelText = typeof label === 'string'
                 ? name
                 : typeof label !== 'object'
                     ? name
@@ -58,20 +57,27 @@ let FiltersForm = class FiltersForm extends LitElement {
                         ? label.renderer()
                         : name;
             const type = filter.type;
-            const idx = filter.operator === 'between' ? 1 : 0;
+            const operator = filter.operator;
+            const idx = operator === 'between' ? 1 : 0;
             const renderer = getFilterRenderer(type)[idx];
             if (!renderer) {
                 return html ``;
             }
-            return column.type === 'select'
-                ? html `
-                <ox-select name="${name}" placeholder="${placeholder}">
+            return column.type !== 'select'
+                ? html ` <label filter-title><span>${labelText}</span> ${renderer(column, this)} </label> `
+                : operator === 'in'
+                    ? html `
+                <ox-select name=${name} placeholder=${labelText}>
                   <ox-popup-list multiple attr-selected="checked" with-search>
                     ${renderer(column, this)}
                   </ox-popup-list>
                 </ox-select>
               `
-                : html ` <label filter-title>${column.name} ${renderer(column, this)} </label> `;
+                    : html `
+                <ox-select name=${name} placeholder=${labelText}>
+                  <ox-popup-list with-search> ${renderer(column, this)} </ox-popup-list>
+                </ox-select>
+              `;
         })}
       </form>
     `;
@@ -82,7 +88,7 @@ let FiltersForm = class FiltersForm extends LitElement {
         const search = (_a = formData.get('search')) === null || _a === void 0 ? void 0 : _a.toString();
         var filters = this.filterColumns
             .map((column) => {
-            const { name, filter } = column;
+            const { name, type, filter } = column;
             const operator = filter.operator;
             var value = formData.getAll(name);
             if (value.length == 0) {
@@ -91,10 +97,25 @@ let FiltersForm = class FiltersForm extends LitElement {
             if (-1 === value.findIndex(v => v !== '')) {
                 return;
             }
+            const filterValue = value.map(v => {
+                const value = v.toString();
+                /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */
+                switch (type) {
+                    case 'integer':
+                    case 'float':
+                    case 'number':
+                    case 'progress':
+                    case 'checkbox':
+                    case 'boolean':
+                        return !value ? undefined : JSON.parse(value);
+                    default:
+                        return value;
+                }
+            });
             return {
                 name,
                 operator,
-                value: value.length === 1 ? value[0] : value
+                value: filterValue.length === 1 ? filterValue[0] : filterValue
             };
         })
             .filter(result => result !== undefined);
@@ -125,6 +146,13 @@ FiltersForm.styles = [
         flex-direction: row;
 
         justify-content: space-between;
+        align-items: center;
+      }
+
+      label {
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
     `
 ];

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 } from 'lit'\nimport { customElement, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n\n        justify-content: space-between;\n      }\n    `\n  ]\n\n  @state() config!: GristConfig\n\n  @state() filterColumns: ColumnConfig[] = []\n  @state() searchColumns: ColumnConfig[] = []\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    const grist = this.closest('ox-grist') as DataGrist\n\n    if (grist) {\n      this.config = grist.compiledConfig\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        e.stopPropagation()\n\n        this.dispatchEvent(\n          new CustomEvent('change', {\n            bubbles: true,\n            composed: true,\n            detail: await this.getQueryFilters()\n          })\n        )\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator !== 'search'\n      })\n      this.searchColumns = filters.filter(columnConfig => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator === 'search'\n      })\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <form>\n        ${this.searchColumns.length === 0 ? html`` : html` <ox-input-search name=\"search\"></ox-input-search> `}\n        ${this.filterColumns.map((column: ColumnConfig) => {\n          const { name, label, filter } = column\n          const placeholder =\n            typeof label === 'string'\n              ? name\n              : typeof label !== 'object'\n              ? name\n              : label.renderer\n              ? label.renderer()\n              : name\n\n          const type = (filter as FilterConfigObject).type\n          const idx = (filter as FilterConfigObject).operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(type)[idx]\n\n          if (!renderer) {\n            return html``\n          }\n\n          return column.type === 'select'\n            ? html`\n                <ox-select name=\"${name}\" placeholder=\"${placeholder}\">\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(column, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html` <label filter-title>${column.name} ${renderer(column, this)} </label> `\n        })}\n      </form>\n    `\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const formData = new FormData(await this.form)\n    const search: string | undefined = formData.get('search')?.toString()\n\n    var filters = this.filterColumns\n      .map((column: ColumnConfig) => {\n        const { name, 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        return {\n          name,\n          operator,\n          value: value.length === 1 ? value[0] : value\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"]}
+{"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 } from 'lit'\nimport { customElement, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      label {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    `\n  ]\n\n  @state() config!: GristConfig\n\n  @state() filterColumns: ColumnConfig[] = []\n  @state() searchColumns: ColumnConfig[] = []\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    const grist = this.closest('ox-grist') as DataGrist\n\n    if (grist) {\n      this.config = grist.compiledConfig\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        this.dispatchEvent(\n          new CustomEvent('filters-change', {\n            bubbles: true,\n            composed: true,\n            detail: await this.getQueryFilters()\n          })\n        )\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator !== 'search'\n      })\n      this.searchColumns = filters.filter(columnConfig => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator === 'search'\n      })\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <form>\n        ${this.searchColumns.length === 0 ? html`` : html` <ox-input-search name=\"search\"></ox-input-search> `}\n        ${this.filterColumns.map((column: ColumnConfig) => {\n          const { name, label, filter } = column\n          const labelText =\n            typeof label === 'string'\n              ? name\n              : typeof label !== 'object'\n              ? name\n              : label.renderer\n              ? label.renderer()\n              : name\n\n          const type = (filter as FilterConfigObject).type\n          const operator = (filter as FilterConfigObject).operator\n          const idx = operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(type)[idx]\n\n          if (!renderer) {\n            return html``\n          }\n\n          return column.type !== 'select'\n            ? html` <label filter-title><span>${labelText}</span> ${renderer(column, this)} </label> `\n            : operator === 'in'\n            ? html`\n                <ox-select name=${name} placeholder=${labelText}>\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(column, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html`\n                <ox-select name=${name} placeholder=${labelText}>\n                  <ox-popup-list with-search> ${renderer(column, this)} </ox-popup-list>\n                </ox-select>\n              `\n        })}\n      </form>\n    `\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const formData = new FormData(await this.form)\n    const search: string | undefined = formData.get('search')?.toString()\n\n    var filters = this.filterColumns\n      .map((column: ColumnConfig) => {\n        const { name, type, filter } = column\n        const operator = (filter as FilterConfigObject).operator\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    if (search) {\n      filters = filters.concat(\n        this.searchColumns.map((column: ColumnConfig) => {\n          const { name } = column\n\n          return {\n            name,\n            operator: 'search',\n            value: `%${search}%`\n          }\n        })\n      )\n    }\n\n    return filters\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -8,3 +8,5 @@ export * from './handlers';
 export * from './formatters';
 export * from './gutters';
 export * from './filters';
+export * from './sorters/sorters-control';
+export * from './record-view';

package/dist/src/index.js

@@ -8,4 +8,6 @@ export * from './handlers';
 export * from './formatters';
 export * from './gutters';
 export * from './filters';
+export * from './sorters/sorters-control';
+export * from './record-view';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,yBAAyB,CAAA;AACvC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA","sourcesContent":["export * from './types'\n\nexport * from './configure/zero-config'\nexport * from './data-grist'\nexport * from './data-report'\n\nexport * from './editors'\nexport * from './renderers'\nexport * from './handlers'\nexport * from './formatters'\nexport * from './gutters'\nexport * from './filters'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,yBAAyB,CAAA;AACvC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,eAAe,CAAA","sourcesContent":["export * from './types'\n\nexport * from './configure/zero-config'\nexport * from './data-grist'\nexport * from './data-report'\n\nexport * from './editors'\nexport * from './renderers'\nexport * from './handlers'\nexport * from './formatters'\nexport * from './gutters'\nexport * from './filters'\nexport * from './sorters/sorters-control'\nexport * from './record-view'\n"]}

package/dist/src/sorters/sorters-control.js

@@ -97,10 +97,22 @@ SortersControl.styles = [
         display: flex;
         justify-content: center;
         align-items: center;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        padding: 3px var(--padding-narrow);
       }
 
       [option] > span {
         margin-right: auto;
+        text-transform: capitalize;
+        user-select: none;
+      }
+      [option] mwc-icon {
+        margin-left: var(--margin-default);
+        --mdc-icon-size: var(--fontsize-large);
+        color: var(--primary-color);
+      }
+      [option] sub {
+        color: var(--primary-color);
       }
     `
 ];

package/dist/src/sorters/sorters-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"sorters-control.js","sourceRoot":"","sources":["../../../src/sorters/sorters-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristConfig, SorterConfig } from '../types'\n\n@customElement('ox-sorters-control')\nexport class SortersControl extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        white-space: nowrap;\n      }\n\n      [option] {\n        flex: 1;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      [option] > span {\n        margin-right: auto;\n      }\n    `\n  ]\n\n  @state() config!: GristConfig\n  @state() columns: ColumnConfig[] = []\n  @state() sorters: SorterConfig[] = []\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      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      grist.addEventListener('sorters-change', e => {\n        this.sorters = (e as CustomEvent).detail as SorterConfig[]\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const sorters = this.config.sorters || []\n\n      this.columns = this.config.columns.filter(column => column.sortable)\n      this.sorters = this.config.sorters || []\n    }\n  }\n\n  render(): TemplateResult {\n    const columns = this.columns\n\n    const current = this.sorters || []\n\n    return html`\n      ${columns.map(column => {\n        const { name } = column\n        var rank = current.findIndex(sorter => sorter.name === name) + 1\n        var desc = rank !== 0 ? current[rank - 1].desc : null\n\n        if (current.length <= 1) {\n          rank = 0\n        }\n\n        return html`\n          <div\n            option\n            @click=${(e: MouseEvent) => {\n              this.onChangeSort(name)\n            }}\n          >\n            <span>${column.header.renderer.call(this, column)}</span>\n            ${desc === null\n              ? html``\n              : html`\n                  <mwc-icon>${desc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</mwc-icon>\n                  ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}\n                `}\n          </div>\n        `\n      })}\n    `\n  }\n\n  onChangeSort(name: string) {\n    var sorters = [...this.sorters]\n\n    var idx = sorters.findIndex(sorter => sorter.name == 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\n      }\n\n      sorters.push(sorter)\n    }\n\n    this.sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('sorters-change', {\n        bubbles: true,\n        composed: true,\n        detail: this.sorters\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"sorters-control.js","sourceRoot":"","sources":["../../../src/sorters/sorters-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristConfig, SorterConfig } from '../types'\n\n@customElement('ox-sorters-control')\nexport class SortersControl extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        white-space: nowrap;\n      }\n\n      [option] {\n        flex: 1;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        padding: 3px var(--padding-narrow);\n      }\n\n      [option] > span {\n        margin-right: auto;\n        text-transform: capitalize;\n        user-select: none;\n      }\n      [option] mwc-icon {\n        margin-left: var(--margin-default);\n        --mdc-icon-size: var(--fontsize-large);\n        color: var(--primary-color);\n      }\n      [option] sub {\n        color: var(--primary-color);\n      }\n    `\n  ]\n\n  @state() config!: GristConfig\n  @state() columns: ColumnConfig[] = []\n  @state() sorters: SorterConfig[] = []\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      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      grist.addEventListener('sorters-change', e => {\n        this.sorters = (e as CustomEvent).detail as SorterConfig[]\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const sorters = this.config.sorters || []\n\n      this.columns = this.config.columns.filter(column => column.sortable)\n      this.sorters = this.config.sorters || []\n    }\n  }\n\n  render(): TemplateResult {\n    const columns = this.columns\n\n    const current = this.sorters || []\n\n    return html`\n      ${columns.map(column => {\n        const { name } = column\n        var rank = current.findIndex(sorter => sorter.name === name) + 1\n        var desc = rank !== 0 ? current[rank - 1].desc : null\n\n        if (current.length <= 1) {\n          rank = 0\n        }\n\n        return html`\n          <div\n            option\n            @click=${(e: MouseEvent) => {\n              this.onChangeSort(name)\n            }}\n          >\n            <span>${column.header.renderer.call(this, column)}</span>\n            ${desc === null\n              ? html``\n              : html`\n                  <mwc-icon>${desc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</mwc-icon>\n                  ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}\n                `}\n          </div>\n        `\n      })}\n    `\n  }\n\n  onChangeSort(name: string) {\n    var sorters = [...this.sorters]\n\n    var idx = sorters.findIndex(sorter => sorter.name == 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\n      }\n\n      sorters.push(sorter)\n    }\n\n    this.sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('sorters-change', {\n        bubbles: true,\n        composed: true,\n        detail: this.sorters\n      })\n    )\n  }\n}\n"]}