evui 3.4.214 → 3.5.0

package/dist/components/grid/Grid.vue.js

@@ -0,0 +1,1261 @@
+import { resolveComponent as B, resolveDirective as De, openBlock as r, createElementBlock as a, Fragment as D, normalizeStyle as S, createVNode as w, withCtx as Bt, createElementVNode as C, createCommentVNode as c, renderList as ie, withModifiers as T, toDisplayString as b, createBlock as N, withDirectives as ge, renderSlot as X, mergeProps as Ht, normalizeClass as k, createTextVNode as Mt, vShow as Ge, ref as M, computed as u, reactive as p, onMounted as Wt, onUnmounted as Ot, onActivated as Pt, onUpdated as _t, watch as y, nextTick as ue, onBeforeMount as At, toRefs as v } from "vue";
+import { cloneDeep as xt } from "lodash-es";
+import { ObserveVisibility as Tt } from "vue3-observe-visibility";
+import Nt from "vue-resize-observer";
+import { clickoutside as Lt } from "../../directives/clickoutside.js";
+import Vt from "./GridToolbar.vue.js";
+import Xt from "./GridPagination.vue.js";
+import zt from "./GridSummary.vue.js";
+import Gt from "./GridColumnSetting.vue.js";
+import Ut from "./GridFilterSetting.vue.js";
+import jt from "./icon/icon-sort-button.vue.js";
+import Kt from "./icon/icon-option-button.vue.js";
+import { commonFunctions as Yt, getUpdatedColumns as qt, pagingEvent as Jt, checkEvent as Qt, expandEvent as Zt, sortEvent as $t, filterEvent as ei, storeEvent as ti, resizeEvent as ii, columnSettingEvent as ni, contextMenuEvent as oi, clickEvent as li, dragEvent as si, scrollEvent as ri } from "./uses.js";
+/* empty css          */
+import di from "../../_virtual/_plugin-vue_export-helper.js";
+const ai = {
+  name: "EvGrid",
+  directives: {
+    clickoutside: Lt,
+    observeVisibility: Tt,
+    resize: Nt
+  },
+  components: {
+    Toolbar: Vt,
+    GridPagination: Xt,
+    GridSummary: zt,
+    ColumnSetting: Gt,
+    FilterSetting: Ut,
+    GridSortButton: jt,
+    GridOptionButton: Kt
+  },
+  props: {
+    columns: {
+      type: [Array],
+      default: () => []
+    },
+    rows: {
+      type: [Array],
+      default: () => []
+    },
+    width: {
+      type: [String, Number],
+      default: "100%"
+    },
+    height: {
+      type: [String, Number],
+      default: "100%"
+    },
+    selected: {
+      type: [Array],
+      default: () => []
+    },
+    checked: {
+      type: [Array],
+      default: () => []
+    },
+    uncheckable: {
+      type: [Array],
+      default: () => []
+    },
+    expanded: {
+      type: [Array],
+      default: () => []
+    },
+    disabledRows: {
+      type: [Array],
+      default: () => []
+    },
+    /**
+     * @type {Object}
+     * @property {number} columnWidth 컬럼 너비 minWidth
+     * @property {number} scrollWidth 스크롤 너비
+     * @property {number} rowHeight 행 높이
+     * @property {number} gridWidth 그리드 너비 width
+     * @property {number} gridHeight 그리드 높이
+     * @property {boolean} adjust 컬럼 너비 조정 여부
+     * @property {boolean} useGridSetting 그리드 설정 사용 여부
+     * @property {number} gridWidth 그리드 너비 width
+     * @property {number} gridHeight 그리드 높이
+     * @property {boolean} adjust 컬럼 너비 조정 여부
+     * @property {boolean} useGridSetting 그리드 설정 사용 여부
+     */
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: {
+    "update:selected": null,
+    "update:checked": null,
+    "update:expanded": null,
+    "check-row": null,
+    "check-all": null,
+    "click-row": null,
+    "dblclick-row": null,
+    "page-change": null,
+    "sort-column": null,
+    "expand-row": null,
+    "resize-column": ({ column: e, columns: d }) => ({ column: e, columns: d }),
+    "change-column-order": ({ column: e, columns: d }) => ({ column: e, columns: d }),
+    "change-column-status": ({ columns: e }) => ({ columns: e }),
+    "change-column-info": ({ type: e, columns: d }) => ({ type: e, columns: d })
+  },
+  setup(e) {
+    var Pe, _e, Ae, xe, Te, Ne, Le, Ve, Xe;
+    const { isRenderer: W, getComponentName: me, getConvertValue: Q, getColumnIndex: ne, setPixelUnit: z } = Yt(), Z = M(null), G = u(() => {
+      var t, l;
+      return ((l = (t = e.option) == null ? void 0 : t.useGridSetting) == null ? void 0 : l.use) || !1;
+    }), ce = u(() => e.option.showHeader ?? !0), he = u(() => {
+      var t;
+      return ((t = e.option) == null ? void 0 : t.useSummary) || !1;
+    }), fe = u(() => {
+      var t;
+      return ((t = e.option.style) == null ? void 0 : t.stripe) || !1;
+    }), Ce = u(() => {
+      var t;
+      return ((t = e.option.style) == null ? void 0 : t.border) || "";
+    }), U = u(() => {
+      var t;
+      return ((t = e.option.style) == null ? void 0 : t.highlight) ?? -1;
+    }), ye = u(() => e.option.emptyText ?? "No records"), oe = e.option.rowMinHeight || 35, j = M(0), i = p({
+      body: null,
+      header: null,
+      table: null,
+      resizeLine: null,
+      "grid-wrapper": null
+    }), g = p({
+      isSearch: !1,
+      searchWord: "",
+      isFiltering: u(() => e.option.useFilter ?? !1),
+      isShowFilterSetting: !1,
+      filterSettingPosition: {
+        left: 0,
+        top: 0
+      },
+      filteringColumn: null,
+      filteringItemsByColumn: {},
+      columnOperator: "and"
+    }), m = p({
+      isShowColumnSetting: !1,
+      isFilteringColumn: !1,
+      // hide된 컬럼이 있는지
+      visibleColumnIdx: [],
+      // 보여지는 컬럼의 인덱스 목록
+      hiddenColumn: "",
+      columnSettingPosition: {
+        top: 0,
+        left: 0,
+        columnListMenuWidth: 0
+      },
+      useDefaultColumnSetting: u(
+        () => {
+          var t, l;
+          return ((l = (t = e.option) == null ? void 0 : t.useGridSetting) == null ? void 0 : l.useDefaultColumnSetting) ?? !0;
+        }
+      ),
+      columnSettingTextInfo: {
+        title: ((_e = (Pe = e.option) == null ? void 0 : Pe.useGridSetting) == null ? void 0 : _e.columnMenuText) ?? "Column List",
+        search: ((xe = (Ae = e.option) == null ? void 0 : Ae.useGridSetting) == null ? void 0 : xe.searchText) ?? "Search",
+        empty: ((Ne = (Te = e.option) == null ? void 0 : Te.useGridSetting) == null ? void 0 : Ne.emptyText) ?? "No records",
+        ok: ((Ve = (Le = e.option) == null ? void 0 : Le.useGridSetting) == null ? void 0 : Ve.okBtnText) ?? "OK"
+      }
+    }), s = p({
+      viewStore: [],
+      originStore: [],
+      pagingStore: [],
+      searchStore: [],
+      filterStore: [],
+      store: u(() => {
+        const t = g.isFiltering ? s.filterStore : s.originStore;
+        return g.isSearch ? s.searchStore : t;
+      }),
+      filteredColumns: [],
+      movedColumns: [],
+      originColumns: u(
+        () => e.columns.map((t, l) => {
+          var h;
+          return {
+            index: l,
+            hiddenDisplay: !1,
+            ...t,
+            width: isFinite(t.width) ? t.width : void 0,
+            sortOption: {
+              sortType: ((h = t == null ? void 0 : t.sortOption) == null ? void 0 : h.sortType) || "init"
+            }
+          };
+        })
+      ),
+      orderedColumns: u(() => {
+        const t = s.movedColumns.length ? s.movedColumns : s.originColumns;
+        return s.filteredColumns.length ? s.filteredColumns : t;
+      }),
+      updatedColumns: u(() => qt(s))
+    }), o = p({
+      usePage: u(() => {
+        var t;
+        return ((t = e.option.page) == null ? void 0 : t.use) || !1;
+      }),
+      useClient: ((Xe = e.option.page) == null ? void 0 : Xe.useClient) || !1,
+      isInfinite: u(() => {
+        var t;
+        return ((t = e.option.page) == null ? void 0 : t.isInfinite) || !1;
+      }),
+      startIndex: 0,
+      prevPage: 0,
+      currentPage: 0,
+      pageTotal: u(
+        () => {
+          var t, l;
+          return (t = e.option.page) != null && t.useClient ? s.store.length : (l = e.option.page) == null ? void 0 : l.total;
+        }
+      ),
+      perPage: u(() => {
+        var t;
+        return ((t = e.option.page) == null ? void 0 : t.perPage) || 20;
+      }),
+      visiblePage: u(() => {
+        var t;
+        return ((t = e.option.page) == null ? void 0 : t.visiblePage) || 8;
+      }),
+      order: u(() => {
+        var t;
+        return ((t = e.option.page) == null ? void 0 : t.order) || "center";
+      }),
+      showPageInfo: u(() => {
+        var t;
+        return ((t = e.option.page) == null ? void 0 : t.showPageInfo) || !1;
+      }),
+      isClientPaging: u(
+        () => o.useClient && o.usePage && !o.isInfinite
+      ),
+      isHighlight: !1,
+      highlightPage: 0
+    }), f = p({
+      prevCheckedRow: [],
+      isHeaderChecked: !1,
+      isHeaderUncheckable: !1,
+      isHeaderIndeterminate: !1,
+      checkedRows: e.checked,
+      useCheckbox: u(() => e.option.useCheckbox || {})
+    }), I = p({
+      expandedRows: e.expanded,
+      useRowDetail: u(() => {
+        var t, l;
+        return ((l = (t = e.option) == null ? void 0 : t.rowDetail) == null ? void 0 : l.use) ?? !1;
+      }),
+      detailRowHeight: u(() => {
+        var t, l;
+        return (l = (t = e.option) == null ? void 0 : t.rowDetail) == null ? void 0 : l.detailRowHeight;
+      })
+    }), A = p({
+      lastScroll: {
+        top: 0,
+        left: 0
+      },
+      vScrollTopHeight: 0,
+      vScrollBottomHeight: 0,
+      hasVerticalScrollBar: !1,
+      hasHorizontalScrollBar: !1
+    }), E = p({
+      contextmenuInfo: e.contextmenuInfo,
+      selectedRow: e.selected,
+      useSelect: u(() => {
+        var t, l;
+        return ((l = (t = e.option) == null ? void 0 : t.useSelection) == null ? void 0 : l.use) ?? !0;
+      }),
+      multiple: u(() => {
+        var t, l;
+        return ((l = (t = e.option) == null ? void 0 : t.useSelection) == null ? void 0 : l.multiple) ?? !1;
+      })
+    }), K = p({
+      isSorting: !1,
+      sortField: "",
+      sortOrder: "",
+      sortColumn: {},
+      sortFunction: e.option.customAscFunction ?? {}
+    }), R = p({
+      menu: null,
+      contextMenuItems: [],
+      contextMenuClass: e.option.customContextMenuClass || "",
+      columnMenu: null,
+      columnMenuItems: [],
+      columnMenuTextInfo: e.option.columnMenuText || {},
+      hiddenColumnMenuItem: e.option.hiddenColumnMenuItem || {},
+      customContextMenu: e.option.customContextMenu || [],
+      gridSettingMenu: null,
+      gridSettingContextMenuItems: [],
+      customGridSettingContextMenu: u(
+        () => {
+          var t, l;
+          return ((l = (t = e.option) == null ? void 0 : t.useGridSetting) == null ? void 0 : l.customContextMenu) || [];
+        }
+      ),
+      isShowMenuOnClick: !1
+    }), O = p({
+      minWidth: 40,
+      rendererMinWidth: 80,
+      iconWidth: 42,
+      showResizeLine: !1,
+      adjust: e.option.adjust || !1,
+      columnWidth: e.option.columnWidth || 80,
+      scrollWidth: e.option.scrollWidth || 17,
+      rowHeight: u(
+        () => e.option.rowHeight > oe ? e.option.rowHeight : oe
+      ),
+      gridWidth: u(() => e.width ? z(e.width) : "100%"),
+      gridHeight: u(() => e.height ? z(e.height) : "100%")
+    }), Y = () => {
+      f.checkedRows = [], f.isHeaderChecked = !1, f.isHeaderIndeterminate = !1, s.store.forEach((t) => {
+        t[1] = !1;
+      });
+    }, le = () => {
+      E.selectedRow = [], s.store.forEach((t) => {
+        t[3] = !1;
+      });
+    }, Ye = () => {
+      s.store.forEach((t) => {
+        t[4] = !1;
+      }), I.expandedRows = [];
+    }, { getPagingData: $, updatePagingInfo: Se, changePage: qe } = Jt({
+      stores: s,
+      pageInfo: o,
+      sortInfo: K,
+      filterInfo: g,
+      elementInfo: i,
+      clearCheckInfo: Y
+    }), Ee = M(0), { updateVScroll: x, updateHScroll: Re, onScroll: Je } = ri({
+      scrollInfo: A,
+      stores: s,
+      elementInfo: i,
+      resizeInfo: O,
+      pageInfo: o,
+      summaryScroll: Ee,
+      expandedInfo: I,
+      getPagingData: $,
+      updatePagingInfo: Se
+    }), { onCheck: Qe, onCheckAll: Ze } = Qt({
+      checkInfo: f,
+      stores: s,
+      pageInfo: o,
+      getPagingData: $
+    }), { onExpanded: $e } = Zt({
+      expandedInfo: I
+    }), { onSort: Be, getSortTarget: He, setSort: Ie, setSortInfo: ke, hasSortTarget: et } = $t({
+      sortInfo: K,
+      stores: s,
+      updatePagingInfo: Se
+    }), { onSearch: se, setFilter: tt, setHeaderCheckboxByFilter: it } = ei({
+      columnSettingInfo: m,
+      filterInfo: g,
+      stores: s,
+      checkInfo: f,
+      pageInfo: o,
+      getConvertValue: Q,
+      updateVScroll: x,
+      getPagingData: $,
+      updatePagingInfo: Se,
+      getColumnIndex: ne
+    }), { setStore: P } = ti({
+      selectInfo: E,
+      checkInfo: f,
+      stores: s,
+      sortInfo: K,
+      elementInfo: i,
+      filterInfo: g,
+      expandedInfo: I,
+      setSort: Ie,
+      setSortInfo: ke,
+      updateVScroll: x,
+      setFilter: tt
+    }), { calculatedColumn: Me, onResize: ee, onShow: nt, onColumnResize: ot } = ii({
+      resizeInfo: O,
+      elementInfo: i,
+      checkInfo: f,
+      expandedInfo: I,
+      stores: s,
+      isRenderer: W,
+      updateVScroll: x,
+      updateHScroll: Re,
+      contextInfo: R
+    }), { setPositionColumnSetting: lt, initColumnSettingInfo: st, onApplyColumn: rt, setColumnHidden: dt } = ni({
+      stores: s,
+      columnSettingInfo: m,
+      contextInfo: R,
+      onSearch: se,
+      onResize: ee
+    }), { setContextMenu: at, onContextMenu: gt, onColumnContextMenu: ut, onGridSettingContextMenu: mt } = oi({
+      contextInfo: R,
+      stores: s,
+      selectInfo: E,
+      useGridSetting: G,
+      filterInfo: g,
+      columnSettingInfo: m,
+      setColumnHidden: dt,
+      onSort: Be
+    }), { onRowClick: ct, onRowDblClick: ht } = li({ selectInfo: E, stores: s }), { onDragStart: ft, onDragOver: Ct, onDrop: yt } = si({ stores: s }), St = (t) => {
+      R.gridSettingContextMenuItems.length = 0, R.customGridSettingContextMenu.length ? mt(t) : m.isShowColumnSetting = !0;
+    }, re = (t) => {
+      var l, h, H, V, te, _, F, de, ae, ze;
+      t.type === "wheel" && ((l = R.menu) == null || l.hide(t)), t.type === "scroll" && !((h = t.target.classList) != null && h.contains("table-body")) && !((V = (H = t.target.offsetParent) == null ? void 0 : H.classList) != null && V.contains("ev-select-dropbox")) && !((_ = (te = t.target.offsetParent) == null ? void 0 : te.classList) != null && _.contains("ev-grid-column-setting")) && !((de = (F = t.target.offsetParent) == null ? void 0 : F.classList) != null && de.contains("ev-text-field-wrapper")) && (g.isShowFilterSetting = !1, m.isShowColumnSetting = !1, R.isShowMenuOnClick = !1, (ae = R.columnMenu) == null || ae.hide(t), (ze = R.gridSettingMenu) == null || ze.hide());
+    };
+    Wt(() => {
+      Me(), P({ rows: e.rows, isInit: !0 }), document.addEventListener("wheel", re, { capture: !1 }), document.addEventListener("scroll", re, { capture: !0 });
+    }), Ot(() => {
+      document.removeEventListener("wheel", re, { capture: !1 }), document.removeEventListener("scroll", re, { capture: !0 });
+    }), Pt(() => {
+      ee();
+    }), _t(() => {
+      var t;
+      j.value = ((t = i["grid-wrapper"]) == null ? void 0 : t.offsetWidth) / 1.5 || 0;
+    }), y(
+      () => m.isShowColumnSetting,
+      (t) => {
+        var l;
+        if (!t) {
+          (l = R.gridSettingMenu) == null || l.hide();
+          return;
+        }
+        lt(Z.value);
+      }
+    ), y(
+      () => e.columns,
+      () => {
+        et() ? ke(He()) : (ke(He()), Ie()), g.filteringColumn = null, g.filteringItemsByColumn = {}, s.filterStore = [], P({ rows: [], isMakeIndex: !1 }), st(), s.movedColumns.length = 0;
+      },
+      { deep: !0 }
+    ), y(
+      () => K.isSorting,
+      (t) => {
+        t && (P({ rows: s.originStore, isMakeIndex: !1 }), K.isSorting = !t, o.isClientPaging && (o.currentPage = 1, s.pagingStore = $(), Y()));
+      }
+    ), y(
+      () => e.rows,
+      (t) => {
+        P({ rows: t }), g.isSearch && se(g.searchWord), ee();
+      },
+      { deep: !0 }
+    ), y(
+      () => e.uncheckable,
+      () => {
+        P({ rows: e.rows });
+      },
+      { deep: !0 }
+    ), y(
+      () => e.checked,
+      (t) => {
+        f.checkedRows = t;
+      }
+    ), y(
+      () => e.disabledRows,
+      () => {
+        s.store.length && s.store.forEach((t) => {
+          t[6] = e.disabledRows.includes(t[2]);
+        });
+      },
+      { deep: !0 }
+    ), y(
+      () => f.checkedRows,
+      (t) => {
+        f.isHeaderChecked = !1;
+        let l = s.store;
+        o.isClientPaging && (l = $()), l.length && (l.forEach((h) => {
+          h[1] = t.includes(h[2]);
+        }), f.isHeaderChecked = t.length === l.length), x();
+      }
+    ), y(
+      () => e.selected,
+      (t) => {
+        E.useSelect && (E.selectedRow = t);
+      }
+    ), y(
+      () => E.selectedRow,
+      (t) => {
+        E.useSelect && (s.store.forEach((l) => {
+          l[3] = t.includes(l[2]) && !e.disabledRows.includes(l[2]);
+        }), x());
+      }
+    ), y(
+      () => U.value,
+      async (t) => {
+        if (await ue(), t >= 0) {
+          if (o.usePage && !o.isInfinite && (o.highlightPage = Math.ceil(t / o.perPage) || 1, o.highlightPage !== o.currentPage)) {
+            o.currentPage = o.highlightPage, o.isHighlight = !0;
+            return;
+          }
+          i.body.scrollTop = O.rowHeight * U.value;
+        }
+      }
+    ), y(
+      () => f.useCheckbox.mode,
+      () => {
+        Y();
+      }
+    ), y(
+      () => E.useSelect,
+      () => {
+        le();
+      }
+    ), y(
+      () => E.multiple,
+      () => {
+        le();
+      }
+    ), y(
+      () => e.checked.length,
+      (t) => {
+        t || Y();
+      }
+    ), y(
+      () => e.expanded.length,
+      (t) => {
+        t || Ye(), x();
+      }
+    ), y(
+      () => [e.option.columnWidth, O.gridWidth],
+      async () => {
+        await ue(), O.columnWidth = e.option.columnWidth;
+        const t = i["grid-wrapper"];
+        t.style.width = O.gridWidth, t.style.height = O.gridHeight, s.orderedColumns.map((l) => {
+          var H;
+          const h = l;
+          return !((H = e.columns[l.index]) != null && H.width) && !h.resized && (h.width = 0), h;
+        }), ee();
+      }
+    ), y(
+      () => e.option.searchValue,
+      (t) => {
+        t !== void 0 && (se((t == null ? void 0 : t.value) ?? t), o.isClientPaging && (Y(), le()));
+      },
+      { immediate: !0 }
+    ), y(
+      () => {
+        var t;
+        return (t = e.option.page) == null ? void 0 : t.currentPage;
+      },
+      (t) => {
+        var h;
+        const l = t || 1;
+        o.currentPage = (h = e.option.page) != null && h.isInfinite ? 1 : l;
+      },
+      { immediate: !0 }
+    ), y(
+      () => o.currentPage,
+      (t, l) => {
+        ue(() => {
+          qe(l), o.isClientPaging && t !== l && (Y(), le()), x(), t === o.highlightPage && o.isHighlight && (i.body.scrollTop = O.rowHeight * U.value, o.isHighlight = !o.isHighlight);
+        });
+      }
+    );
+    const pe = p({
+      boxTop: 0,
+      boxLeft: 0
+    }), L = M(null), We = M(!1), q = M(!1), It = M(null), J = M({}), we = p({
+      caption: "",
+      field: ""
+    }), Oe = M([]), kt = [
+      { name: "AND", value: "and" },
+      { name: "OR", value: "or" }
+    ], be = M(0), pt = ({ caption: t, field: l }, h) => {
+      if (we.caption = t, we.field = l, Oe.value = h, (h == null ? void 0 : h.length) > 1) {
+        We.value = !0;
+        const H = L.value.getBoundingClientRect().left, V = window.pageYOffset + L.value.getBoundingClientRect().top + L.value.getBoundingClientRect().height;
+        pe.boxTop = `${V}px`, pe.boxLeft = `${H}px`;
+      }
+    }, wt = () => {
+      s.filterStore = [], P({ rows: [], isMakeIndex: !1 });
+    }, ve = async (t) => {
+      var V, te;
+      t && q.value && (be.value = 0);
+      const l = (V = L.value) == null ? void 0 : V.getElementsByClassName("filtering-items__item"), h = [];
+      let H = 0;
+      if (l) {
+        for (let _ = 0; _ < l.length; _++) {
+          const F = l[_];
+          F.classList.remove("non-display");
+          const de = (te = L.value.getBoundingClientRect()) == null ? void 0 : te.width, { width: ae } = F.getBoundingClientRect();
+          H += ae + 10, de - 150 <= H && !F.classList.contains("filtering-items__item--count") ? (be.value++, h.push(F), J.value = {
+            ...J.value,
+            [F.dataset.field]: xt(
+              g.filteringItemsByColumn[F.dataset.field]
+            )
+          }) : delete J.value[F.dataset.field];
+        }
+        l.forEach((_) => {
+          const F = h.includes(_);
+          _.classList.toggle("non-display", F);
+        });
+      }
+    }, bt = async (t, l) => {
+      l != null && l.length ? (g.filteringItemsByColumn[t] = l, q.value = !0) : (delete J.value[t], delete g.filteringItemsByColumn[t]), await ue(), ve(!0), g.isShowFilterSetting = !1, s.filterStore = [], P({ rows: [], isMakeIndex: !1 }), it(s.filterStore);
+    };
+    let Fe = null;
+    const vt = () => {
+      Fe && clearTimeout(Fe), Fe = setTimeout(() => {
+        q.value = !q.value, ve(q.value);
+      }, 150);
+    }, Ft = () => {
+      g.filteringColumn = null, g.filteringItemsByColumn = {}, J.value = {}, s.filterStore = [], P({ rows: [], isMakeIndex: !1 });
+    }, Dt = u(() => {
+      var t;
+      return {
+        width: `${j.value}px`,
+        top: `${((t = L.value) == null ? void 0 : t.getBoundingClientRect().height) || 0}px`
+      };
+    }), Et = (t) => {
+      const l = g.filteringItemsByColumn[t];
+      return l == null ? void 0 : l[l.length - 1];
+    }, Rt = () => {
+      const t = document.createElement("div");
+      t.id = "ev-grid-filtering-items-modal", t.setAttribute("style", "position: absolute; top: 0; left: 0;"), document.getElementById("ev-grid-filtering-items-modal") || document.body.appendChild(t);
+    };
+    return At(() => Rt()), {
+      idColIndex: u(() => {
+        var t;
+        return (t = s.orderedColumns.find((l) => l.field === "id")) == null ? void 0 : t.index;
+      }),
+      summaryScroll: Ee,
+      showHeader: ce,
+      stripeStyle: fe,
+      borderStyle: Ce,
+      highlightIdx: U,
+      useSummary: he,
+      useGridSetting: G,
+      toolbarRef: Z,
+      stores: s,
+      emptyText: ye,
+      ...v(i),
+      ...v(s),
+      ...v(g),
+      ...v(A),
+      ...v(o),
+      ...v(O),
+      ...v(E),
+      ...v(f),
+      ...v(I),
+      ...v(K),
+      ...v(R),
+      ...v(m),
+      isRenderer: W,
+      getComponentName: me,
+      getConvertValue: Q,
+      getColumnIndex: ne,
+      setPixelUnit: z,
+      updateVScroll: x,
+      updateHScroll: Re,
+      onScroll: Je,
+      calculatedColumn: Me,
+      onResize: ee,
+      onShow: nt,
+      onColumnResize: ot,
+      onRowClick: ct,
+      onRowDblClick: ht,
+      onCheck: Qe,
+      onCheckAll: Ze,
+      onExpanded: $e,
+      onSort: Be,
+      setSort: Ie,
+      setStore: P,
+      setContextMenu: at,
+      onContextMenu: gt,
+      onSearch: se,
+      setGridSetting: St,
+      onApplyColumn: rt,
+      onColumnContextMenu: ut,
+      // filtering
+      filteringItemsWidth: j,
+      isShowColumnFilteringItems: q,
+      operatorItems: kt,
+      selectedFilteringItems: Oe,
+      selectedFilteringColumn: we,
+      filteringItemsRef: L,
+      isShowFilteringItemsBox: We,
+      filteringItemsStyle: Dt,
+      hiddenFilteringItemsCount: be,
+      ...v(pe),
+      hiddenFilteringItemsRef: It,
+      hiddenFilteringItemsByColumn: J,
+      removeAllFiltering: Ft,
+      onExpandFilteringItems: vt,
+      setColumnFilteringItems: ve,
+      onChangeOperator: wt,
+      onApplyFilter: bt,
+      onClickFilteringItem: pt,
+      getFilteringItemByField: Et,
+      // drag
+      onDragStart: ft,
+      onDragOver: Ct,
+      onDrop: yt,
+      ROW_DISABLED_INDEX: 6
+    };
+  }
+}, gi = {
+  key: 0,
+  class: "filtering-items filtering-items--used"
+}, ui = {
+  key: 1,
+  ref: "filteringItemsRef",
+  class: "filtering-items"
+}, mi = ["data-field", "onClick"], ci = { class: "filtering-items__item--title" }, hi = ["title"], fi = {
+  key: 1,
+  class: "filtering-items__item--value"
+}, Ci = ["onClick"], yi = { class: "filtering-items__item--title" }, Si = ["title"], Ii = {
+  key: 1,
+  class: "filtering-items__item--value"
+}, ki = { class: "column-list" }, pi = ["data-index"], wi = ["title", "onClick"], bi = ["onClick"], vi = ["onMousedown"], Fi = { ref: "table" }, Di = ["data-index", "disabled", "onClick", "onContextmenu", "onDblclick"], Ei = ["data-name", "data-index", "disabled"], Ri = { key: 0 }, Bi = ["title"], Hi = ["disabled"], Mi = ["disabled"], Wi = { key: 0 }, Oi = ["colspan"], Pi = { key: 0 }, _i = { class: "is-empty" }, Ai = {
+  ref: "resizeLine",
+  class: "table-resize-line"
+};
+function xi(e, d, Ue, n, je, Ke) {
+  var j;
+  const W = B("ev-icon"), me = B("ev-select"), Q = B("grid-option-button"), ne = B("toolbar"), z = B("ev-checkbox"), Z = B("grid-sort-button"), G = B("ev-context-menu"), ce = B("grid-summary"), he = B("grid-pagination"), fe = B("filter-setting"), Ce = B("column-setting"), U = De("clickoutside"), ye = De("resize"), oe = De("observe-visibility");
+  return r(), a(D, null, [
+    e.$slots.toolbar || n.useGridSetting ? (r(), a("div", {
+      key: 0,
+      ref: "toolbarRef",
+      class: "toolbar-wrapper",
+      style: S(`width: ${e.gridWidth};`)
+    }, [
+      w(ne, null, {
+        toolbarWrapper: Bt(() => [
+          C("div", {
+            class: "filtering",
+            style: S({ width: `${n.filteringItemsWidth}px` })
+          }, [
+            e.isFiltering && !Object.keys(e.filteringItemsByColumn).length ? (r(), a("div", gi, [
+              w(W, { icon: "ev-icon-filter-list" }),
+              d[18] || (d[18] = C("span", null, "Filter", -1))
+            ])) : c("", !0),
+            e.isFiltering && Object.keys(e.filteringItemsByColumn).length ? (r(), a("div", ui, [
+              (r(!0), a(D, null, ie(Object.keys(e.filteringItemsByColumn), (i, g) => {
+                var m, s, o, f;
+                return r(), a(D, { key: g }, [
+                  g === 0 ? (r(), a("div", {
+                    key: 0,
+                    class: "filtering-items__item filtering-items__item--filter",
+                    onClick: d[0] || (d[0] = T((...I) => n.onExpandFilteringItems && n.onExpandFilteringItems(...I), ["stop"]))
+                  }, [
+                    w(W, {
+                      icon: "ev-icon-filter-list",
+                      class: "filtering-items-expand"
+                    }),
+                    C("span", null, " Filter (" + b(Object.keys(e.filteringItemsByColumn).length) + ") ", 1),
+                    w(W, {
+                      class: "filtering-items__item--remove",
+                      icon: "ev-icon-s-close",
+                      style: { "margin-left": "0" },
+                      onClick: T(n.removeAllFiltering, ["stop"])
+                    }, null, 8, ["onClick"])
+                  ])) : c("", !0),
+                  g === 1 ? (r(), N(me, {
+                    key: 1,
+                    modelValue: e.columnOperator,
+                    "onUpdate:modelValue": d[1] || (d[1] = (I) => e.columnOperator = I),
+                    items: n.operatorItems,
+                    class: "filtering-items__item--operator",
+                    onChange: n.onChangeOperator
+                  }, null, 8, ["modelValue", "items", "onChange"])) : c("", !0),
+                  C("div", {
+                    class: "filtering-items__item non-display",
+                    "data-field": i,
+                    onClick: T((I) => {
+                      var A;
+                      return n.onClickFilteringItem(
+                        {
+                          caption: (A = n.getFilteringItemByField(i)) == null ? void 0 : A.caption,
+                          field: i
+                        },
+                        e.filteringItemsByColumn[i]
+                      );
+                    }, ["stop"])
+                  }, [
+                    C("span", ci, b((m = n.getFilteringItemByField(i)) == null ? void 0 : m.caption) + " " + b((s = n.getFilteringItemByField(i)) == null ? void 0 : s.comparison), 1),
+                    e.filteringItemsByColumn[i].length < 2 ? (r(), a("span", {
+                      key: 0,
+                      class: "filtering-items__item--value",
+                      title: (o = n.getFilteringItemByField(i)) == null ? void 0 : o.value
+                    }, b((f = n.getFilteringItemByField(i)) == null ? void 0 : f.value), 9, hi)) : (r(), a("span", fi, " + " + b(e.filteringItemsByColumn[i].length), 1)),
+                    w(W, {
+                      class: "filtering-items__item--remove",
+                      icon: "ev-icon-s-close",
+                      onClick: (I) => n.onApplyFilter(i, [])
+                    }, null, 8, ["onClick"])
+                  ], 8, mi)
+                ], 64);
+              }), 128)),
+              n.isShowColumnFilteringItems && Object.keys(e.filteringItemsByColumn).length && n.hiddenFilteringItemsCount > 0 ? (r(), a("div", {
+                key: 0,
+                class: "filtering-items__item filtering-items__item--count",
+                onClick: d[2] || (d[2] = (...i) => n.onExpandFilteringItems && n.onExpandFilteringItems(...i))
+              }, " + " + b(n.hiddenFilteringItemsCount), 1)) : c("", !0)
+            ], 512)) : c("", !0),
+            !n.isShowColumnFilteringItems && Object.keys(n.hiddenFilteringItemsByColumn).length ? ge((r(), a("div", {
+              key: 2,
+              ref: "hiddenFilteringItemsRef",
+              class: "filtering-items filtering-items__hidden-items",
+              style: S(n.filteringItemsStyle)
+            }, [
+              (r(!0), a(D, null, ie(Object.keys(n.hiddenFilteringItemsByColumn), (i, g) => {
+                var m, s, o, f;
+                return r(), a("div", {
+                  key: g,
+                  class: "filtering-items__item",
+                  onClick: T((I) => {
+                    var A;
+                    return n.onClickFilteringItem(
+                      {
+                        caption: (A = n.getFilteringItemByField(i)) == null ? void 0 : A.caption,
+                        field: i
+                      },
+                      n.hiddenFilteringItemsByColumn[i]
+                    );
+                  }, ["stop"])
+                }, [
+                  C("span", yi, b((m = n.getFilteringItemByField(i)) == null ? void 0 : m.caption) + " " + b((s = n.getFilteringItemByField(i)) == null ? void 0 : s.comparison), 1),
+                  n.hiddenFilteringItemsByColumn[i].length < 2 ? (r(), a("span", {
+                    key: 0,
+                    class: "filtering-items__item--value",
+                    title: (o = n.getFilteringItemByField(i)) == null ? void 0 : o.value
+                  }, b((f = n.getFilteringItemByField(i)) == null ? void 0 : f.value), 9, Si)) : (r(), a("span", Ii, " + " + b(n.hiddenFilteringItemsByColumn[i].length), 1)),
+                  w(W, {
+                    class: "filtering-items__item--remove",
+                    icon: "ev-icon-s-close",
+                    onClick: (I) => n.onApplyFilter(i, [], !0)
+                  }, null, 8, ["onClick"])
+                ], 8, Ci);
+              }), 128))
+            ], 4)), [
+              [
+                U,
+                () => {
+                  n.isShowColumnFilteringItems || n.onExpandFilteringItems();
+                }
+              ]
+            ]) : c("", !0)
+          ], 4),
+          n.useGridSetting ? (r(), N(Q, {
+            key: 0,
+            class: "grid-setting__icon",
+            onClick: d[3] || (d[3] = (i) => n.setGridSetting(i))
+          })) : c("", !0),
+          X(e.$slots, "toolbar", {
+            item: { onSearch: n.onSearch }
+          }, void 0, !0)
+        ]),
+        _: 3
+      })
+    ], 4)) : c("", !0),
+    ge((r(), a("div", Ht({ ref: "grid-wrapper" }, e.$attrs, {
+      class: "grid-wrapper",
+      style: `width: ${e.gridWidth}; height: ${e.gridHeight};`
+    }), [
+      C("div", {
+        ref: "grid",
+        class: k({
+          table: !0,
+          adjust: e.adjust,
+          "ev-grid": !0,
+          "non-header": !n.showHeader,
+          "ev-grid--empty": !e.viewStore.length
+        })
+      }, [
+        ge(C("div", {
+          ref: "header",
+          class: k({
+            "table-header": !0,
+            "non-border": !!n.borderStyle
+          })
+        }, [
+          C("ul", ki, [
+            e.useCheckbox.use ? (r(), a("li", {
+              key: 0,
+              class: k({
+                column: !0,
+                "checkbox-all": !0,
+                "non-border": !!n.borderStyle
+              }),
+              style: S({
+                width: `${e.minWidth}px`,
+                "border-right": "1px solid #CFCFCF"
+              })
+            }, [
+              e.useCheckbox.use && e.useCheckbox.headerCheck && e.useCheckbox.mode !== "single" ? (r(), N(z, {
+                key: 0,
+                modelValue: e.isHeaderChecked,
+                "onUpdate:modelValue": d[4] || (d[4] = (i) => e.isHeaderChecked = i),
+                disabled: e.isHeaderUncheckable,
+                indeterminate: e.isHeaderIndeterminate,
+                onChange: n.onCheckAll
+              }, null, 8, ["modelValue", "disabled", "indeterminate", "onChange"])) : c("", !0)
+            ], 6)) : c("", !0),
+            e.useRowDetail ? (r(), a("li", {
+              key: 1,
+              class: k({
+                column: !0,
+                "non-border": !!n.borderStyle
+              }),
+              style: S({
+                width: `${e.minWidth}px`,
+                "border-right": "1px solid #CFCFCF"
+              })
+            }, null, 6)) : c("", !0),
+            (r(!0), a(D, null, ie(e.orderedColumns, (i, g) => (r(), a(D, { key: g }, [
+              !i.hide && !i.hiddenDisplay ? (r(), a("li", {
+                key: 0,
+                "data-index": g,
+                class: k({
+                  column: !0,
+                  render: n.isRenderer(i),
+                  "non-border": !!n.borderStyle,
+                  [i.field]: i.field
+                }),
+                style: S({
+                  width: `${i.width}px`,
+                  "min-width": `${n.isRenderer(i) ? e.rendererMinWidth : e.minWidth}px`,
+                  "margin-right": e.orderedColumns.length - 1 === g && (e.hasVerticalScrollBar || e.hasHorizontalScrollBar) ? `${e.scrollWidth}px` : "0px",
+                  "border-right": e.orderedColumns.length - 1 === g ? "none" : "1px solid #CFCFCF"
+                }),
+                draggable: !0,
+                onDragstart: d[6] || (d[6] = (...m) => n.onDragStart && n.onDragStart(...m)),
+                onDragover: d[7] || (d[7] = (...m) => n.onDragOver && n.onDragOver(...m)),
+                onDrop: d[8] || (d[8] = (...m) => n.onDrop && n.onDrop(...m))
+              }, [
+                i.customHeader && e.$slots.customHeader ? X(e.$slots, "customHeader", { key: 0 }, void 0, !0) : (r(), a("span", {
+                  key: 1,
+                  title: i.caption,
+                  class: "column-name",
+                  onClick: [
+                    (m) => n.onColumnContextMenu(m, i),
+                    d[5] || (d[5] = T((...m) => e.columnMenu.show && e.columnMenu.show(...m), ["prevent"]))
+                  ]
+                }, [
+                  Mt(b(i.caption) + " ", 1),
+                  C("span", {
+                    onClick: T((m) => n.onSort(i), ["stop"])
+                  }, [
+                    e.$slots.sortIcon ? (r(), a(D, { key: 0 }, [
+                      i.sortable === void 0 || i.sortable ? (r(), a("span", {
+                        key: 0,
+                        class: "column-sort__icon column-sort__icon--basic",
+                        style: S({
+                          height: `${e.rowHeight}px`,
+                          "line-height": `${e.rowHeight}px`
+                        })
+                      }, [
+                        X(e.$slots, "sortIcon", {}, void 0, !0)
+                      ], 4)) : c("", !0),
+                      e.sortField === i.field ? (r(), a("span", {
+                        key: 1,
+                        class: k([
+                          {
+                            "column-sort__icon": !0,
+                            "column-sort__icon--asc": e.sortOrder === "asc",
+                            "column-sort__icon--desc": e.sortOrder === "desc"
+                          }
+                        ]),
+                        style: S({
+                          height: `${e.rowHeight}px`,
+                          "line-height": `${e.rowHeight}px`
+                        })
+                      }, [
+                        X(e.$slots, `sortIcon_${e.sortOrder}`, {}, void 0, !0)
+                      ], 6)) : c("", !0)
+                    ], 64)) : (r(), a(D, { key: 1 }, [
+                      i.sortable === void 0 || i.sortable ? (r(), N(Z, {
+                        key: 0,
+                        class: "column-sort__icon column-sort__icon--basic",
+                        icon: "basic",
+                        style: S({
+                          height: `${e.rowHeight}px`,
+                          "line-height": `${e.rowHeight}px`
+                        })
+                      }, null, 8, ["style"])) : c("", !0),
+                      e.sortField === i.field ? (r(), N(Z, {
+                        key: 1,
+                        class: k([
+                          {
+                            "column-sort__icon": !0,
+                            "column-sort__icon--asc": e.sortOrder === "asc",
+                            "column-sort__icon--desc": e.sortOrder === "desc"
+                          }
+                        ]),
+                        icon: e.sortOrder,
+                        style: S({
+                          height: `${e.rowHeight}px`,
+                          "line-height": `${e.rowHeight}px`,
+                          visibility: e.sortOrder ? i.hidden : !0
+                        })
+                      }, null, 8, ["class", "icon", "style"])) : c("", !0)
+                    ], 64))
+                  ], 8, bi)
+                ], 8, wi)),
+                C("span", {
+                  class: "column-resize",
+                  onMousedown: T((m) => n.onColumnResize(g, m), ["stop", "left"])
+                }, null, 40, vi)
+              ], 46, pi)) : c("", !0)
+            ], 64))), 128)),
+            (j = e.$props.option.customContextMenu) != null && j.length ? (r(), a("li", {
+              key: 2,
+              class: k({
+                column: !0,
+                "non-border": !!n.borderStyle
+              }),
+              style: S({
+                width: "30px",
+                "min-width": "30px",
+                "margin-right": e.hasVerticalScrollBar || e.hasHorizontalScrollBar ? `${e.scrollWidth}px` : "0px"
+              })
+            }, null, 6)) : c("", !0)
+          ])
+        ], 2), [
+          [Ge, n.showHeader]
+        ]),
+        C("div", {
+          ref: "body",
+          class: k({
+            stripe: n.stripeStyle,
+            "table-body": !0,
+            "bottom-border": !!e.viewStore.length,
+            "non-border": !!n.borderStyle
+          }),
+          onScroll: d[11] || (d[11] = (...i) => n.onScroll && n.onScroll(...i)),
+          onContextmenu: d[12] || (d[12] = (i) => n.onContextMenu(i))
+        }, [
+          C("div", {
+            style: S(`height: ${e.vScrollTopHeight}px;`),
+            class: "vscroll-spacer"
+          }, null, 4),
+          C("table", Fi, [
+            C("tbody", null, [
+              (r(!0), a(D, null, ie(e.viewStore, (i, g) => {
+                var m, s;
+                return r(), a(D, {
+                  key: n.idColIndex != null ? i[2][n.idColIndex] : g
+                }, [
+                  C("tr", {
+                    "data-index": i[0],
+                    class: k({
+                      row: !0,
+                      selected: i[3],
+                      highlight: i[0] === n.highlightIdx,
+                      "non-border": !!n.borderStyle && n.borderStyle !== "rows"
+                    }),
+                    disabled: i[n.ROW_DISABLED_INDEX],
+                    onClick: (o) => n.onRowClick(o, i),
+                    onContextmenu: (o) => n.onRowClick(o, i, !0),
+                    onDblclick: (o) => n.onRowDblClick(o, i)
+                  }, [
+                    e.useCheckbox.use ? (r(), a("td", {
+                      key: 0,
+                      class: k({
+                        cell: !0,
+                        "row-checkbox": !0,
+                        "non-border": !!n.borderStyle
+                      }),
+                      style: S({
+                        width: `${e.minWidth}px`,
+                        height: `${e.rowHeight}px`,
+                        "border-right": "1px solid #CFCFCF"
+                      })
+                    }, [
+                      w(z, {
+                        modelValue: i[1],
+                        "onUpdate:modelValue": (o) => i[1] = o,
+                        class: "row-checkbox-input",
+                        disabled: i[5] || i[n.ROW_DISABLED_INDEX],
+                        onChange: (o) => n.onCheck(o, i)
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "onChange"])
+                    ], 6)) : c("", !0),
+                    e.useRowDetail ? (r(), a("td", {
+                      key: 1,
+                      class: k({
+                        cell: !0,
+                        "row-detail-toggle": !0,
+                        "non-border": !!n.borderStyle,
+                        "row-detail-toggle--expanded": i[4]
+                      }),
+                      style: S({
+                        width: `${e.minWidth}px`,
+                        height: `${e.rowHeight}px`,
+                        "border-right": "1px solid #CFCFCF"
+                      })
+                    }, [
+                      w(W, {
+                        modelValue: i[4],
+                        "onUpdate:modelValue": (o) => i[4] = o,
+                        icon: "ev-icon-s-play",
+                        class: "row-detail-toggle-icon",
+                        onClick: T((o) => n.onExpanded(o, i), ["stop"])
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "onClick"])
+                    ], 6)) : c("", !0),
+                    (r(!0), a(D, null, ie(e.orderedColumns, (o, f) => (r(), a(D, {
+                      key: `${n.idColIndex != null ? i[2][n.idColIndex] : g}-${f}`
+                    }, [
+                      !o.hide && !o.hiddenDisplay ? (r(), a("td", {
+                        key: 0,
+                        "data-name": o.field,
+                        "data-index": o.index,
+                        class: k({
+                          cell: !0,
+                          render: n.isRenderer(o),
+                          [o.type]: o.type,
+                          [o.align]: o.align,
+                          [o.field]: o.field,
+                          "non-border": !!n.borderStyle
+                        }),
+                        style: S({
+                          width: `${o.width}px`,
+                          height: `${e.rowHeight}px`,
+                          "line-height": `${e.rowHeight}px`,
+                          "min-width": `${n.isRenderer(o) ? e.rendererMinWidth : e.minWidth}px`,
+                          "border-right": e.orderedColumns.length - 1 === f ? "none" : "1px solid #CFCFCF"
+                        }),
+                        disabled: i[n.ROW_DISABLED_INDEX]
+                      }, [
+                        e.$slots[o.field] ? (r(), a("div", Ri, [
+                          X(e.$slots, o.field, {
+                            item: { row: i, column: o },
+                            disabled: i[n.ROW_DISABLED_INDEX]
+                          }, void 0, !0)
+                        ])) : (r(), a("div", {
+                          key: 1,
+                          title: n.getConvertValue(o, i[2][o.index])
+                        }, b(n.getConvertValue(o, i[2][o.index])), 9, Bi))
+                      ], 14, Ei)) : c("", !0)
+                    ], 64))), 128)),
+                    (m = e.$props.option.customContextMenu) != null && m.length ? (r(), a("td", {
+                      key: 2,
+                      class: k({
+                        "row-contextmenu": !0,
+                        "non-border": !!n.borderStyle
+                      }),
+                      style: S({
+                        position: "sticky",
+                        right: 0,
+                        width: "30px",
+                        height: `${e.rowHeight}px`,
+                        "min-width": "30px",
+                        "line-height": `${e.rowHeight}px`
+                      }),
+                      disabled: i[n.ROW_DISABLED_INDEX]
+                    }, [
+                      e.$slots.contextmenuIcon ? (r(), a("span", {
+                        key: 0,
+                        class: "row-contextmenu__btn",
+                        disabled: i[n.ROW_DISABLED_INDEX],
+                        onClick: d[9] || (d[9] = (o) => n.onContextMenu(o))
+                      }, [
+                        X(e.$slots, "contextmenuIcon", {}, void 0, !0)
+                      ], 8, Mi)) : (r(), N(Q, {
+                        key: 1,
+                        icon: "ev-icon-warning2",
+                        class: "row-contextmenu__btn",
+                        disabled: i[n.ROW_DISABLED_INDEX],
+                        onClick: d[10] || (d[10] = (o) => n.onContextMenu(o))
+                      }, null, 8, ["disabled"]))
+                    ], 14, Hi)) : c("", !0)
+                  ], 42, Di),
+                  e.useRowDetail && ((s = e.$slots) != null && s.rowDetail) && i[4] ? (r(), a("tr", Wi, [
+                    C("td", {
+                      colspan: i.length
+                    }, [
+                      C("div", {
+                        style: S({
+                          width: "100%",
+                          height: `${e.detailRowHeight}px`,
+                          "min-height": `${e.detailRowHeight}px`,
+                          "max-height": `${e.detailRowHeight}px`
+                        })
+                      }, [
+                        X(e.$slots, "rowDetail", {
+                          item: { row: i }
+                        }, void 0, !0)
+                      ], 4)
+                    ], 8, Oi)
+                  ])) : c("", !0)
+                ], 64);
+              }), 128)),
+              e.viewStore.length ? c("", !0) : (r(), a("tr", Pi, [
+                C("td", _i, b(n.emptyText), 1)
+              ]))
+            ])
+          ], 512),
+          C("div", {
+            style: S(`height: ${e.vScrollBottomHeight}px;`),
+            class: "vscroll-spacer"
+          }, null, 4),
+          w(G, {
+            ref: "menu",
+            "custom-class": e.contextMenuClass,
+            items: e.contextMenuItems
+          }, null, 8, ["custom-class", "items"]),
+          w(G, {
+            ref: "columnMenu",
+            items: e.columnMenuItems
+          }, null, 8, ["items"]),
+          w(G, {
+            ref: "gridSettingMenu",
+            items: e.gridSettingContextMenuItems,
+            "is-show-menu-on-click": e.isShowMenuOnClick
+          }, null, 8, ["items", "is-show-menu-on-click"])
+        ], 34),
+        ge(C("div", Ai, null, 512), [
+          [Ge, e.showResizeLine]
+        ])
+      ], 2)
+    ], 16)), [
+      [ye, n.onResize],
+      [oe, {
+        callback: n.onShow,
+        once: !0
+      }]
+    ]),
+    n.useSummary ? (r(), N(ce, {
+      key: 1,
+      "ordered-columns": e.orderedColumns,
+      stores: n.stores,
+      "use-checkbox": e.useCheckbox.use,
+      "style-option": {
+        borderStyle: n.borderStyle,
+        minWidth: e.minWidth,
+        rowHeight: e.rowHeight
+      },
+      "scroll-left": n.summaryScroll
+    }, null, 8, ["ordered-columns", "stores", "use-checkbox", "style-option", "scroll-left"])) : c("", !0),
+    e.usePage && !e.isInfinite ? (r(), N(he, {
+      key: 2,
+      modelValue: e.currentPage,
+      "onUpdate:modelValue": d[13] || (d[13] = (i) => e.currentPage = i),
+      total: e.pageTotal,
+      "per-page": e.perPage,
+      "visible-page": e.visiblePage,
+      "show-page-info": e.showPageInfo,
+      order: e.order
+    }, null, 8, ["modelValue", "total", "per-page", "visible-page", "show-page-info", "order"])) : c("", !0),
+    w(fe, {
+      "is-show": e.isShowFilterSetting,
+      "onUpdate:isShow": d[14] || (d[14] = (i) => e.isShowFilterSetting = i),
+      items: e.filteringItemsByColumn,
+      "onUpdate:items": d[15] || (d[15] = (i) => e.filteringItemsByColumn = i),
+      column: e.filteringColumn,
+      position: e.filterSettingPosition,
+      onApplyFiltering: n.onApplyFilter
+    }, null, 8, ["is-show", "items", "column", "position", "onApplyFiltering"]),
+    w(Ce, {
+      "is-show": e.isShowColumnSetting,
+      "onUpdate:isShow": d[16] || (d[16] = (i) => e.isShowColumnSetting = i),
+      "is-show-menu-on-click": e.isShowMenuOnClick,
+      "onUpdate:isShowMenuOnClick": d[17] || (d[17] = (i) => e.isShowMenuOnClick = i),
+      columns: e.updatedColumns,
+      "hidden-column": e.hiddenColumn,
+      position: e.columnSettingPosition,
+      "text-info": e.columnSettingTextInfo,
+      onApplyColumn: n.onApplyColumn
+    }, null, 8, ["is-show", "is-show-menu-on-click", "columns", "hidden-column", "position", "text-info", "onApplyColumn"])
+  ], 64);
+}
+const en = /* @__PURE__ */ di(ai, [["render", xi], ["__scopeId", "data-v-f8886e09"]]);
+export {
+  en as default
+};