code:
import type { TableV2Props } from './table';
import type { TableGridInstance } from './table-grid';
declare function useTable(props: TableV2Props): {
    columns: import("vue").ComputedRef<{
        key: import("./types").KeyType;
        align?: import("./types").Alignment | undefined;
        class?: string | import("./types").ClassNameGetter<any> | undefined;
        dataKey?: import("./types").KeyType | undefined;
        fixed?: true | import("./constants").FixedDir | undefined;
        flexGrow?: import("csstype").GlobalsNumber | undefined;
        flexShrink?: import("csstype").GlobalsNumber | undefined;
        title?: string | undefined;
        hidden?: boolean | undefined;
        headerClass?: string | import("./types").HeaderClassGetter<any> | undefined;
        maxWidth?: number | undefined;
        minWidth?: number | undefined;
        style?: import("vue").CSSProperties | undefined;
        sortable?: boolean | undefined;
        width: number;
        cellRenderer?: import("./types").CellRenderer<any> | undefined;
        headerCellRenderer?: import("./types").HeaderCellRenderer<any> | undefined;
    }[]>;
    containerRef: import("vue").Ref<any>;
    mainTableRef: import("vue").Ref<TableGridInstance | undefined>;
    leftTableRef: import("vue").Ref<TableGridInstance | undefined>;
    rightTableRef: import("vue").Ref<TableGridInstance | undefined>;
    isDynamic: import("vue").ComputedRef<boolean>;
    isResetting: import("vue").ShallowRef<boolean>;
    isScrolling: import("vue").ShallowRef<boolean>;
    hasFixedColumns: import("vue").ComputedRef<number>;
    columnsStyles: import("vue").ComputedRef<Record<import("./types").KeyType | undefined, import("vue").CSSProperties>>;
    columnsTotalWidth: import("vue").ComputedRef<number>;
    data: import("vue").ComputedRef<any[]>;
    expandedRowKeys: import("vue").Ref<import("./types").KeyType[]>;
    depthMap: import("vue").Ref<Record<import("./types").KeyType, number>>;
    fixedColumnsOnLeft: import("vue").ComputedRef<{
        key: import("./types").KeyType;
        align?: import("./types").Alignment | undefined;
        class?: string | import("./types").ClassNameGetter<any> | undefined;
        dataKey?: import("./types").KeyType | undefined;
        fixed?: true | import("./constants").FixedDir | undefined;
        flexGrow?: import("csstype").GlobalsNumber | undefined;
        flexShrink?: import("csstype").GlobalsNumber | undefined;
        title?: string | undefined;
        hidden?: boolean | undefined;
        headerClass?: string | import("./types").HeaderClassGetter<any> | undefined;
        maxWidth?: number | undefined;
        minWidth?: number | undefined;
        style?: import("vue").CSSProperties | undefined;
        sortable?: boolean | undefined;
        width: number;
        cellRenderer?: import("./types").CellRenderer<any> | undefined;
        headerCellRenderer?: import("./types").HeaderCellRenderer<any> | undefined;
    }[]>;
    fixedColumnsOnRight: import("vue").ComputedRef<{
        key: import("./types").KeyType;
        align?: import("./types").Alignment | undefined;
        class?: string | import("./types").ClassNameGetter<any> | undefined;
        dataKey?: import("./types").KeyType | undefined;
        fixed?: true | import("./constants").FixedDir | undefined;
        flexGrow?: import("csstype").GlobalsNumber | undefined;
        flexShrink?: import("csstype").GlobalsNumber | undefined;
        title?: string | undefined;
        hidden?: boolean | undefined;
        headerClass?: string | import("./types").HeaderClassGetter<any> | undefined;
        maxWidth?: number | undefined;
        minWidth?: number | undefined;
        style?: import("vue").CSSProperties | undefined;
        sortable?: boolean | undefined;
        width: number;
        cellRenderer?: import("./types").CellRenderer<any> | undefined;
        headerCellRenderer?: import("./types").HeaderCellRenderer<any> | undefined;
    }[]>;
    mainColumns: import("vue").ComputedRef<import("./types").AnyColumns>;
    bodyWidth: import("vue").ComputedRef<number>;
    emptyStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
    rootStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
    headerWidth: import("vue").ComputedRef<number>;
    footerHeight: import("vue").ComputedRef<import("vue").CSSProperties>;
    mainTableHeight: import("vue").ComputedRef<number>;
    fixedTableHeight: import("vue").ComputedRef<number>;
    leftTableWidth: import("vue").ComputedRef<number>;
    rightTableWidth: import("vue").ComputedRef<number>;
    showEmpty: import("vue").ComputedRef<boolean>;
    getRowHeight: (rowIndex: number) => number;
    onColumnSorted: (e: MouseEvent) => void;
    onRowHovered: ({ hovered, rowKey }: import("./row").RowHoverParams) => void;
    onRowExpanded: ({ expanded, rowData, rowIndex, rowKey, }: import("./row").RowExpandParams) => void;
    onRowsRendered: (params: import("./grid").onRowRenderedParams) => void;
    onRowHeightChange: ({ rowKey, height, rowIndex }: import("./row").RowHeightChangedParams, fixedDir: import("./constants").FixedDir) => void;
    scrollTo: (params: import("./composables").ScrollPos) => void;
    scrollToLeft: (scrollLeft: number) => void;
    scrollToTop: (scrollTop: number) => void;
    scrollToRow: (row: number, strategy?: import("./composables").ScrollStrategy) => void;
    onScroll: (params: import("./composables").ScrollPos) => void;
    onVerticalScroll: ({ scrollTop }: import("./composables").ScrollPos) => void;
};
export { useTable };
export declare type UseTableReturn = ReturnType<typeof useTable>;


code:
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
require('../../../hooks/index.js');
require('./composables/index.js');
var useColumns = require('./composables/use-columns.js');
var useScrollbar = require('./composables/use-scrollbar.js');
var index = require('../../../hooks/use-namespace/index.js');
var useRow = require('./composables/use-row.js');
var useData = require('./composables/use-data.js');
var useStyles = require('./composables/use-styles.js');
var shared = require('@vue/shared');

function useTable(props) {
  const mainTableRef = vue.ref();
  const leftTableRef = vue.ref();
  const rightTableRef = vue.ref();
  const {
    columns,
    columnsStyles,
    columnsTotalWidth,
    fixedColumnsOnLeft,
    fixedColumnsOnRight,
    hasFixedColumns,
    mainColumns,
    onColumnSorted
  } = useColumns.useColumns(props, vue.toRef(props, "columns"), vue.toRef(props, "fixed"));
  const {
    scrollTo,
    scrollToLeft,
    scrollToTop,
    scrollToRow,
    onScroll,
    onVerticalScroll,
    scrollPos
  } = useScrollbar.useScrollbar(props, {
    mainTableRef,
    leftTableRef,
    rightTableRef,
    onMaybeEndReached
  });
  const ns = index.useNamespace("table-v2");
  const instance = vue.getCurrentInstance();
  const isScrolling = vue.shallowRef(false);
  const {
    expandedRowKeys,
    lastRenderedRowIndex,
    isDynamic,
    isResetting,
    rowHeights,
    resetAfterIndex,
    onRowExpanded,
    onRowHeightChange,
    onRowHovered,
    onRowsRendered
  } = useRow.useRow(props, {
    mainTableRef,
    leftTableRef,
    rightTableRef,
    tableInstance: instance,
    ns,
    isScrolling
  });
  const { data, depthMap } = useData.useData(props, {
    expandedRowKeys,
    lastRenderedRowIndex,
    resetAfterIndex
  });
  const {
    bodyWidth,
    fixedTableHeight,
    mainTableHeight,
    leftTableWidth,
    rightTableWidth,
    headerWidth,
    rowsHeight,
    windowHeight,
    footerHeight,
    emptyStyle,
    rootStyle,
    headerHeight
  } = useStyles.useStyles(props, {
    columnsTotalWidth,
    data,
    fixedColumnsOnLeft,
    fixedColumnsOnRight
  });
  const containerRef = vue.ref();
  const showEmpty = vue.computed(() => {
    const noData = vue.unref(data).length === 0;
    return shared.isArray(props.fixedData) ? props.fixedData.length === 0 && noData : noData;
  });
  function getRowHeight(rowIndex) {
    const { estimatedRowHeight, rowHeight, rowKey } = props;
    if (!estimatedRowHeight)
      return rowHeight;
    return vue.unref(rowHeights)[vue.unref(data)[rowIndex][rowKey]] || estimatedRowHeight;
  }
  function onMaybeEndReached() {
    const { onEndReached } = props;
    if (!onEndReached)
      return;
    const { scrollTop } = vue.unref(scrollPos);
    const _totalHeight = vue.unref(rowsHeight);
    const clientHeight = vue.unref(windowHeight);
    const heightUntilEnd = _totalHeight - (scrollTop + clientHeight) + props.hScrollbarSize;
    if (vue.unref(lastRenderedRowIndex) >= 0 && _totalHeight === scrollTop + vue.unref(mainTableHeight) - vue.unref(headerHeight)) {
      onEndReached(heightUntilEnd);
    }
  }
  vue.watch(() => props.expandedRowKeys, (val) => expandedRowKeys.value = val, {
    deep: true
  });
  return {
    columns,
    containerRef,
    mainTableRef,
    leftTableRef,
    rightTableRef,
    isDynamic,
    isResetting,
    isScrolling,
    hasFixedColumns,
    columnsStyles,
    columnsTotalWidth,
    data,
    expandedRowKeys,
    depthMap,
    fixedColumnsOnLeft,
    fixedColumnsOnRight,
    mainColumns,
    bodyWidth,
    emptyStyle,
    rootStyle,
    headerWidth,
    footerHeight,
    mainTableHeight,
    fixedTableHeight,
    leftTableWidth,
    rightTableWidth,
    showEmpty,
    getRowHeight,
    onColumnSorted,
    onRowHovered,
    onRowExpanded,
    onRowsRendered,
    onRowHeightChange,
    scrollTo,
    scrollToLeft,
    scrollToTop,
    scrollToRow,
    onScroll,
    onVerticalScroll
  };
}

exports.useTable = useTable;
//# sourceMappingURL=use-table.js.map

license: mit


code:
import type { CSSProperties, Component, Slot } from 'vue';
export declare const sum: (listLike: number | number[]) => number;
export declare const tryCall: <T>(fLike: T, params: T extends (...args: infer K) => unknown ? K : any, defaultRet?: {}) => any;
export declare const enforceUnit: (style: CSSProperties) => CSSProperties;
export declare const componentToSlot: <T>(ComponentLike: JSX.Element | ((props: T) => Component<T, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) | undefined) => Slot | ((props: T) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}>);


code:
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
var shared = require('@vue/shared');
var style = require('../../../utils/dom/style.js');

const sumReducer = (sum2, num) => sum2 + num;
const sum = (listLike) => {
  return shared.isArray(listLike) ? listLike.reduce(sumReducer, 0) : listLike;
};
const tryCall = (fLike, params, defaultRet = {}) => {
  return shared.isFunction(fLike) ? fLike(params) : fLike != null ? fLike : defaultRet;
};
const enforceUnit = (style$1) => {
  ;
  ["width", "maxWidth", "minWidth", "height"].forEach((key) => {
    style$1[key] = style.addUnit(style$1[key]);
  });
  return style$1;
};
const componentToSlot = (ComponentLike) => vue.isVNode(ComponentLike) ? (props) => vue.h(ComponentLike, props) : ComponentLike;

exports.componentToSlot = componentToSlot;
exports.enforceUnit = enforceUnit;
exports.sum = sum;
exports.tryCall = tryCall;
//# sourceMappingURL=utils.js.map


code:
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/empty/style/css';
import 'element-plus/es/components/virtual-list/style/css';
import 'element-plus/theme-chalk/el-table-v2.css';


code:
'use strict';

require('../../base/style/css.js');
require('../../empty/style/css.js');
require('../../virtual-list/style/css.js');
require('element-plus/theme-chalk/el-table-v2.css');

//# sourceMappingURL=css.js.map


code:
import 'element-plus/es/components/base/style';
import 'element-plus/es/components/empty/style';
import 'element-plus/es/components/virtual-list/style';
import 'element-plus/theme-chalk/src/table-v2.scss';


code:
'use strict';

require('../../base/style/index.js');
require('../../empty/style/index.js');
require('../../virtual-list/style/index.js');
require('element-plus/theme-chalk/src/table-v2.scss');

//# sourceMappingURL=index.js.map


code:
import Table from './src/table.vue';
import TableColumn from './src/tableColumn';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElTable: SFCWithInstall<typeof Table> & {
    TableColumn: typeof TableColumn;
};
export default ElTable;
export declare const ElTableColumn: SFCWithInstall<typeof TableColumn>;
export declare type TableInstance = InstanceType<typeof Table>;
export declare type TableColumnInstance = InstanceType<typeof TableColumn>;
export type { SummaryMethod, Table, TableProps, TableRefs, ColumnCls, ColumnStyle, CellCls, CellStyle, TreeNode, RenderRowData, Sort, Filter, TableColumnCtx, } from './src/table/defaults';


code:
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

require('../../utils/index.js');
var table = require('./src/table.js');
require('./src/tableColumn.js');
var install = require('../../utils/vue/install.js');
var index = require('./src/table-column/index.js');

const ElTable = install.withInstall(table["default"], {
  TableColumn: index["default"]
});
const ElTableColumn = install.withNoopInstall(index["default"]);

exports.ElTable = ElTable;
exports.ElTableColumn = ElTableColumn;
exports["default"] = ElTable;
//# sourceMappingURL=index.js.map


code:
export declare const useScrollbar: () => {
    scrollBarRef: import("vue").Ref<any>;
    scrollTo: (options: ScrollToOptions | number, yCoord?: number) => void;
    setScrollTop: (top?: number) => void;
    setScrollLeft: (left?: number) => void;
};


code:
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../../utils/index.js');
var types = require('../../../../utils/types.js');

const useScrollbar = () => {
  const scrollBarRef = vue.ref();
  const scrollTo = (options, yCoord) => {
    const scrollbar = scrollBarRef.value;
    if (scrollbar) {
      scrollbar.scrollTo(options, yCoord);
    }
  };
  const setScrollPosition = (position, offset) => {
    const scrollbar = scrollBarRef.value;
    if (scrollbar && types.isNumber(offset) && ["Top", "Left"].includes(position)) {
      scrollbar[`setScroll${position}`](offset);
    }
  };
  const setScrollTop = (top) => setScrollPosition("Top", top);
  const setScrollLeft = (left) => setScrollPosition("Left", left);
  return {
    scrollBarRef,
    scrollTo,
    setScrollTop,
    setScrollLeft
  };
};

exports.useScrollbar = useScrollbar;
//# sourceMappingURL=use-scrollbar.js.map


code:
import type { VNode } from 'vue';
import type { TableColumnCtx } from './table-column/defaults';
import type { Store } from './store';
import type { TreeNode } from './table/defaults';
export declare const cellStarts: {
    default: {
        order: string;
    };
    selection: {
        width: number;
        minWidth: number;
        realWidth: number;
        order: string;
    };
    expand: {
        width: number;
        minWidth: number;
        realWidth: number;
        order: string;
    };
    index: {
        width: number;
        minWidth: number;
        realWidth: number;
        order: string;
    };
};
export declare const getDefaultClassName: (type: any) => any;
export declare const cellForced: {
    selection: {
        renderHeader<T>({ store, column }: {
            store: any;
        }): VNode<import("vue").RendererNode, import("vue").RendererElement, {
            [key: string]: any;
        }>;
        renderCell<T_1>({ row, column, store, $index, }: {
            row: T_1;
            column: TableColumnCtx<T_1>;
            store: any;
            $index: string;
        }): VNode<import("vue").RendererNode, import("vue").RendererElement, {
            [key: string]: any;
        }>;
        sortable: boolean;
        resizable: boolean;
    };
    index: {
        renderHeader<T_2>({ column }: {
            column: TableColumnCtx<T_2>;
        }): string;
        renderCell<T_3>({ column, $index, }: {
            column: TableColumnCtx<T_3>;
            $index: number;
        }): VNode<import("vue").RendererNode, import("vue").RendererElement, {
            [key: string]: any;
        }>;
        sortable: boolean;
    };
    expand: {
        renderHeader<T_4>({ column }: {
            column: TableColumnCtx<T_4>;
        }): string;
        renderCell<T_5>({ row, store, expanded, }: {
            row: T_5;
            store: any;
            expanded: boolean;
        }): VNode<import("vue").RendererNode, import("vue").RendererElement, {
            [key: string]: any;
        }>;
        sortable: boolean;
        resizable: boolean;
    };
};
export declare function defaultRenderCell<T>({ row, column, $index, }: {
    row: T;
    column: TableColumnCtx<T>;
    $index: number;
}): any;
export declare function treeCellPrefix<T>({ row, treeNode, store, }: {
    row: T;
    treeNode: TreeNode;
    store: Store<T>;
}, createPlaceholder?: boolean): VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}>[] | null;


code:
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index = require('../../checkbox/index.js');
var index$1 = require('../../icon/index.js');
var iconsVue = require('@element-plus/icons-vue');
require('../../../utils/index.js');
var objects = require('../../../utils/objects.js');

const defaultClassNames = {
  selection: "table-column--selection",
  expand: "table__expand-column"
};
const cellStarts = {
  default: {
    order: ""
  },
  selection: {
    width: 48,
    minWidth: 48,
    realWidth: 48,
    order: ""
  },
  expand: {
    width: 48,
    minWidth: 48,
    realWidth: 48,
    order: ""
  },
  index: {
    width: 48,
    minWidth: 48,
    realWidth: 48,
    order: ""
  }
};
const getDefaultClassName = (type) => {
  return defaultClassNames[type] || "";
};
const cellForced = {
  selection: {
    renderHeader({ store, column }) {
      function isDisabled() {
        return store.states.data.value && store.states.data.value.length === 0;
      }
      return vue.h(index.ElCheckbox, {
        disabled: isDisabled(),
        size: store.states.tableSize.value,
        indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value,
        "onUpdate:modelValue": store.toggleAllSelection,
        modelValue: store.states.isAllSelected.value,
        ariaLabel: column.label
      });
    },
    renderCell({
      row,
      column,
      store,
      $index
    }) {
      return vue.h(index.ElCheckbox, {
        disabled: column.selectable ? !column.selectable.call(null, row, $index) : false,
        size: store.states.tableSize.value,
        onChange: () => {
          store.commit("rowSelectedChanged", row);
        },
        onClick: (event) => event.stopPropagation(),
        modelValue: store.isSelected(row),
        ariaLabel: column.label
      });
    },
    sortable: false,
    resizable: false
  },
  index: {
    renderHeader({ column }) {
      return column.label || "#";
    },
    renderCell({
      column,
      $index
    }) {
      let i = $index + 1;
      const index = column.index;
      if (typeof index === "number") {
        i = $index + index;
      } else if (typeof index === "function") {
        i = index($index);
      }
      return vue.h("div", {}, [i]);
    },
    sortable: false
  },
  expand: {
    renderHeader({ column }) {
      return column.label || "";
    },
    renderCell({
      row,
      store,
      expanded
    }) {
      const { ns } = store;
      const classes = [ns.e("expand-icon")];
      if (expanded) {
        classes.push(ns.em("expand-icon", "expanded"));
      }
      const callback = function(e) {
        e.stopPropagation();
        store.toggleRowExpansion(row);
      };
      return vue.h("div", {
        class: classes,
        onClick: callback
      }, {
        default: () => {
          return [
            vue.h(index$1.ElIcon, null, {
              default: () => {
                return [vue.h(iconsVue.ArrowRight)];
              }
            })
          ];
        }
      });
    },
    sortable: false,
    resizable: false
  }
};
function defaultRenderCell({
  row,
  column,
  $index
}) {
  var _a;
  const property = column.property;
  const value = property && objects.getProp(row, property).value;
  if (column && column.formatter) {
    return column.formatter(row, column, value, $index);
  }
  return ((_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) || "";
}
function treeCellPrefix({
  row,
  treeNode,
  store
}, createPlaceholder = false) {
  const { ns } = store;
  if (!treeNode) {
    if (createPlaceholder) {
      return [
        vue.h("span", {
          class: ns.e("placeholder")
        })
      ];
    }
    return null;
  }
  const ele = [];
  const callback = function(e) {
    e.stopPropagation();
    if (treeNode.loading) {
      return;
    }
    store.loadOrToggle(row);
  };
  if (treeNode.indent) {
    ele.push(vue.h("span", {
      class: ns.e("indent"),
      style: { "padding-left": `${treeNode.indent}px` }
    }));
  }
  if (typeof treeNode.expanded === "boolean" && !treeNode.noLazyChildren) {
    const expandClasses = [
      ns.e("expand-icon"),
      treeNode.expanded ? ns.em("expand-icon", "expanded") : ""
    ];
    let icon = iconsVue.ArrowRight;
    if (treeNode.loading) {
      icon = iconsVue.Loading;
    }
    ele.push(vue.h("div", {
      class: expandClasses,
      onClick: callback
    }, {
      default: () => {
        return [
          vue.h(index$1.ElIcon, { class: { [ns.is("loading")]: treeNode.loading } }, {
            default: () => [vue.h(icon)]
          })
        ];
      }
    }));
  } else {
    ele.push(vue.h("span", {
      class: ns.e("placeholder")
    }));
  }
  return ele;
}

exports.cellForced = cellForced;
exports.cellStarts = cellStarts;
exports.defaultRenderCell = defaultRenderCell;
exports.getDefaultClassName = getDefaultClassName;
exports.treeCellPrefix = treeCellPrefix;
//# sourceMappingURL=config.js.map


code:
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index = require('../../checkbox/index.js');
var index$3 = require('../../icon/index.js');
var iconsVue = require('@element-plus/icons-vue');
require('../../../directives/index.js');
require('../../../hooks/index.js');
var index$2 = require('../../tooltip/index.js');
var index$1 = require('../../scrollbar/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index$4 = require('../../../directives/click-outside/index.js');
var index$5 = require('../../../hooks/use-locale/index.js');
var index$6 = require('../../../hooks/use-namespace/index.js');

const { CheckboxGroup: ElCheckboxGroup } = index.ElCheckbox;
const _sfc_main = vue.defineComponent({
  name: "ElTableFilterPanel",
  components: {
    ElCheckbox: index.ElCheckbox,
    ElCheckboxGroup,
    ElScrollbar: index$1.ElScrollbar,
    ElTooltip: index$2.ElTooltip,
    ElIcon: index$3.ElIcon,
    ArrowDown: iconsVue.ArrowDown,
    ArrowUp: iconsVue.ArrowUp
  },
  directives: { ClickOutside: index$4["default"] },
  props: {
    placement: {
      type: String,
      default: "bottom-start"
    },
    store: {
      type: Object
    },
    column: {
      type: Object
    },
    upDataColumn: {
      type: Function
    },
    appendTo: {
      type: String
    }
  },
  setup(props) {
    const instance = vue.getCurrentInstance();
    const { t } = index$5.useLocale();
    const ns = index$6.useNamespace("table-filter");
    const parent = instance == null ? void 0 : instance.parent;
    if (!parent.filterPanels.value[props.column.id]) {
      parent.filterPanels.value[props.column.id] = instance;
    }
    const tooltipVisible = vue.ref(false);
    const tooltip = vue.ref(null);
    const filters = vue.computed(() => {
      return props.column && props.column.filters;
    });
    const filterClassName = vue.computed(() => {
      if (props.column.filterClassName) {
        return `${ns.b()} ${props.column.filterClassName}`;
      }
      return ns.b();
    });
    const filterValue = vue.computed({
      get: () => {
        var _a;
        return (((_a = props.column) == null ? void 0 : _a.filteredValue) || [])[0];
      },
      set: (value) => {
        if (filteredValue.value) {
          if (typeof value !== "undefined" && value !== null) {
            filteredValue.value.splice(0, 1, value);
          } else {
            filteredValue.value.splice(0, 1);
          }
        }
      }
    });
    const filteredValue = vue.computed({
      get() {
        if (props.column) {
          return props.column.filteredValue || [];
        }
        return [];
      },
      set(value) {
        if (props.column) {
          props.upDataColumn("filteredValue", value);
        }
      }
    });
    const multiple = vue.computed(() => {
      if (props.column) {
        return props.column.filterMultiple;
      }
      return true;
    });
    const isActive = (filter) => {
      return filter.value === filterValue.value;
    };
    const hidden = () => {
      tooltipVisible.value = false;
    };
    const showFilterPanel = (e) => {
      e.stopPropagation();
      tooltipVisible.value = !tooltipVisible.value;
    };
    const hideFilterPanel = () => {
      tooltipVisible.value = false;
    };
    const handleConfirm = () => {
      confirmFilter(filteredValue.value);
      hidden();
    };
    const handleReset = () => {
      filteredValue.value = [];
      confirmFilter(filteredValue.value);
      hidden();
    };
    const handleSelect = (_filterValue) => {
      filterValue.value = _filterValue;
      if (typeof _filterValue !== "undefined" && _filterValue !== null) {
        confirmFilter(filteredValue.value);
      } else {
        confirmFilter([]);
      }
      hidden();
    };
    const confirmFilter = (filteredValue2) => {
      props.store.commit("filterChange", {
        column: props.column,
        values: filteredValue2
      });
      props.store.updateAllSelected();
    };
    vue.watch(tooltipVisible, (value) => {
      if (props.column) {
        props.upDataColumn("filterOpened", value);
      }
    }, {
      immediate: true
    });
    const popperPaneRef = vue.computed(() => {
      var _a, _b;
      return (_b = (_a = tooltip.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
    });
    return {
      tooltipVisible,
      multiple,
      filterClassName,
      filteredValue,
      filterValue,
      filters,
      handleConfirm,
      handleReset,
      handleSelect,
      isActive,
      t,
      ns,
      showFilterPanel,
      hideFilterPanel,
      popperPaneRef,
      tooltip
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_el_checkbox = vue.resolveComponent("el-checkbox");
  const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group");
  const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
  const _component_arrow_up = vue.resolveComponent("arrow-up");
  const _component_arrow_down = vue.resolveComponent("arrow-down");
  const _component_el_icon = vue.resolveComponent("el-icon");
  const _component_el_tooltip = vue.resolveComponent("el-tooltip");
  const _directive_click_outside = vue.resolveDirective("click-outside");
  return vue.openBlock(), vue.createBlock(_component_el_tooltip, {
    ref: "tooltip",
    visible: _ctx.tooltipVisible,
    offset: 0,
    placement: _ctx.placement,
    "show-arrow": false,
    "stop-popper-mouse-event": false,
    teleported: "",
    effect: "light",
    pure: "",
    "popper-class": _ctx.filterClassName,
    persistent: "",
    "append-to": _ctx.appendTo
  }, {
    content: vue.withCtx(() => [
      _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", { key: 0 }, [
        vue.createElementVNode("div", {
          class: vue.normalizeClass(_ctx.ns.e("content"))
        }, [
          vue.createVNode(_component_el_scrollbar, {
            "wrap-class": _ctx.ns.e("wrap")
          }, {
            default: vue.withCtx(() => [
              vue.createVNode(_component_el_checkbox_group, {
                modelValue: _ctx.filteredValue,
                "onUpdate:modelValue": ($event) => _ctx.filteredValue = $event,
                class: vue.normalizeClass(_ctx.ns.e("checkbox-group"))
              }, {
                default: vue.withCtx(() => [
                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
                    return vue.openBlock(), vue.createBlock(_component_el_checkbox, {
                      key: filter.value,
                      value: filter.value
                    }, {
                      default: vue.withCtx(() => [
                        vue.createTextVNode(vue.toDisplayString(filter.text), 1)
                      ]),
                      _: 2
                    }, 1032, ["value"]);
                  }), 128))
                ]),
                _: 1
              }, 8, ["modelValue", "onUpdate:modelValue", "class"])
            ]),
            _: 1
          }, 8, ["wrap-class"])
        ], 2),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(_ctx.ns.e("bottom"))
        }, [
          vue.createElementVNode("button", {
            class: vue.normalizeClass({ [_ctx.ns.is("disabled")]: _ctx.filteredValue.length === 0 }),
            disabled: _ctx.filteredValue.length === 0,
            type: "button",
            onClick: _ctx.handleConfirm
          }, vue.toDisplayString(_ctx.t("el.table.confirmFilter")), 11, ["disabled", "onClick"]),
          vue.createElementVNode("button", {
            type: "button",
            onClick: _ctx.handleReset
          }, vue.toDisplayString(_ctx.t("el.table.resetFilter")), 9, ["onClick"])
        ], 2)
      ])) : (vue.openBlock(), vue.createElementBlock("ul", {
        key: 1,
        class: vue.normalizeClass(_ctx.ns.e("list"))
      }, [
        vue.createElementVNode("li", {
          class: vue.normalizeClass([
            _ctx.ns.e("list-item"),
            {
              [_ctx.ns.is("active")]: _ctx.filterValue === void 0 || _ctx.filterValue === null
            }
          ]),
          onClick: ($event) => _ctx.handleSelect(null)
        }, vue.toDisplayString(_ctx.t("el.table.clearFilter")), 11, ["onClick"]),
        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
          return vue.openBlock(), vue.createElementBlock("li", {
            key: filter.value,
            class: vue.normalizeClass([_ctx.ns.e("list-item"), _ctx.ns.is("active", _ctx.isActive(filter))]),
            label: filter.value,
            onClick: ($event) => _ctx.handleSelect(filter.value)
          }, vue.toDisplayString(filter.text), 11, ["label", "onClick"]);
        }), 128))
      ], 2))
    ]),
    default: vue.withCtx(() => [
      vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
        class: vue.normalizeClass([
          `${_ctx.ns.namespace.value}-table__column-filter-trigger`,
          `${_ctx.ns.namespace.value}-none-outline`
        ]),
        onClick: _ctx.showFilterPanel
      }, [
        vue.createVNode(_component_el_icon, null, {
          default: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "filter-icon", {}, () => [
              _ctx.column.filterOpened ? (vue.openBlock(), vue.createBlock(_component_arrow_up, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_arrow_down, { key: 1 }))
            ])
          ]),
          _: 3
        })
      ], 10, ["onClick"])), [
        [_directive_click_outside, _ctx.hideFilterPanel, _ctx.popperPaneRef]
      ])
    ]),
    _: 3
  }, 8, ["visible", "placement", "popper-class", "append-to"]);
}
var FilterPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "filter-panel.vue"]]);

exports["default"] = FilterPanel;
//# sourceMappingURL=filter-panel.js.map