@hbdlzy/ui-core 0.1.6 → 0.1.7

package/dist/index.js

@@ -1,6 +1,6 @@
 import * as echarts from "echarts";
 export { echarts };
-import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, renderSlot, toDisplayString, ref, reactive, watch, onMounted, resolveComponent, resolveDirective, createVNode, withDirectives, createBlock, withCtx, Fragment, renderList, createSlots, createTextVNode, mergeProps, withModifiers, withKeys, normalizeClass, shallowRef, nextTick, onUnmounted, useAttrs, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, renderSlot, toDisplayString, normalizeClass, ref, reactive, watch, onMounted, onBeforeUnmount, resolveComponent, resolveDirective, createVNode, withDirectives, createBlock, withCtx, Fragment, renderList, createSlots, createTextVNode, mergeProps, unref, withModifiers, Teleport, withKeys, shallowRef, nextTick, onUnmounted, useAttrs, normalizeProps, guardReactiveProps } from "vue";
 import { ElMessage } from "element-plus";
 import ExcelJS from "exceljs";
 import { saveAs } from "file-saver";
@@ -179,12 +179,12 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   key: 0,
   class: "base-card__header"
 };
-const _hoisted_2$8 = { class: "base-card__header-left" };
-const _hoisted_3$3 = {
+const _hoisted_2$9 = { class: "base-card__header-left" };
+const _hoisted_3$4 = {
   key: 0,
   class: "base-card__title-wrap"
 };
@@ -211,7 +211,7 @@ const _hoisted_10$1 = {
   class: "base-card__tip"
 };
 const _hoisted_11$1 = { class: "base-card__content" };
-const _sfc_main$a = defineComponent({
+const _sfc_main$b = defineComponent({
   ...{
     name: "BaseCard"
   },
@@ -307,9 +307,9 @@ const _sfc_main$a = defineComponent({
         class: "base-card",
         style: normalizeStyle(cardStyles.value)
       }, [
-        shouldRenderHeader.value ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
-          createElementVNode("div", _hoisted_2$8, [
-            hasTitleBlock.value ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
+        shouldRenderHeader.value ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+          createElementVNode("div", _hoisted_2$9, [
+            hasTitleBlock.value ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
               __props.showTitleMarker ? (openBlock(), createElementBlock("span", _hoisted_4$2)) : createCommentVNode("", true),
               _ctx.$slots["title-label"] ? renderSlot(_ctx.$slots, "title-label", { key: 1 }, void 0, true) : (openBlock(), createElementBlock("h4", _hoisted_5$2, toDisplayString(__props.title), 1))
             ])) : createCommentVNode("", true),
@@ -339,34 +339,137 @@ const _sfc_main$a = defineComponent({
     };
   }
 });
-var BaseCard = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-6bfddf1c"]]);
+var BaseCard = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-6bfddf1c"]]);
+var SvgIcon_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$8 = ["aria-hidden", "aria-label"];
+const _hoisted_2$8 = ["aria-hidden", "aria-label"];
+const _hoisted_3$3 = ["href", "xlink:href"];
+const _sfc_main$a = defineComponent({
+  ...{
+    name: "SvgIcon"
+  },
+  __name: "SvgIcon",
+  props: {
+    iconClass: {},
+    className: { default: "" },
+    prefix: { default: "icon" },
+    ariaLabel: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const normalizedIconClass = computed(() => props.iconClass.trim());
+    const normalizedPrefix = computed(() => props.prefix.trim() || "icon");
+    const isExternal = computed(() => /^(https?:|mailto:|tel:|data:|blob:)/.test(normalizedIconClass.value));
+    const iconName = computed(() => `#${normalizedPrefix.value}-${normalizedIconClass.value}`);
+    const ariaHidden = computed(() => props.ariaLabel ? void 0 : "true");
+    const externalIconStyle = computed(() => ({
+      mask: `url(${normalizedIconClass.value}) no-repeat 50% 50%`,
+      WebkitMask: `url(${normalizedIconClass.value}) no-repeat 50% 50%`
+    }));
+    return (_ctx, _cache) => {
+      return isExternal.value ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: normalizeClass(["svg-external-icon svg-icon", __props.className]),
+        style: normalizeStyle(externalIconStyle.value),
+        "aria-hidden": ariaHidden.value,
+        "aria-label": __props.ariaLabel,
+        role: "img"
+      }, null, 14, _hoisted_1$8)) : (openBlock(), createElementBlock("svg", {
+        key: 1,
+        class: normalizeClass(["svg-icon", __props.className]),
+        "aria-hidden": ariaHidden.value,
+        "aria-label": __props.ariaLabel,
+        role: "img"
+      }, [
+        createElementVNode("use", {
+          href: iconName.value,
+          "xlink:href": iconName.value
+        }, null, 8, _hoisted_3$3)
+      ], 10, _hoisted_2$8));
+    };
+  }
+});
+var SvgIcon = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-318312b1"]]);
 var BaseTable_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$7 = { class: "base-table" };
 const _hoisted_2$7 = {
+  class: "base-table__svg-sprite",
+  "aria-hidden": "true",
+  focusable: "false"
+};
+const _hoisted_3$2 = ["id"];
+const _hoisted_4$1 = ["id"];
+const _hoisted_5$1 = ["id"];
+const _hoisted_6 = ["id"];
+const _hoisted_7 = ["id"];
+const _hoisted_8 = ["id"];
+const _hoisted_9 = ["id"];
+const _hoisted_10 = {
   key: 0,
   class: "base-table__toolbar"
 };
-const _hoisted_3$2 = { class: "base-table__toolbar-left" };
-const _hoisted_4$1 = {
+const _hoisted_11 = { class: "base-table__toolbar-left" };
+const _hoisted_12 = {
   key: 0,
   class: "base-table__toolbar-right"
 };
-const _hoisted_5$1 = { class: "base-table__header" };
-const _hoisted_6 = { class: "base-table__header-label" };
-const _hoisted_7 = { class: "base-table__header-actions" };
-const _hoisted_8 = { class: "base-table__header-search-footer" };
-const _hoisted_9 = {
+const _hoisted_13 = { class: "base-table__header-main" };
+const _hoisted_14 = { class: "base-table__header-label" };
+const _hoisted_15 = {
+  key: 0,
+  class: "base-table__header-actions"
+};
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = {
+  key: 0,
+  class: "base-table__header-select"
+};
+const _hoisted_18 = ["onClick"];
+const _hoisted_19 = {
+  key: 0,
+  class: "base-table__header-select-tags"
+};
+const _hoisted_20 = {
+  key: 0,
+  class: "base-table__header-select-tag base-table__header-select-tag--count"
+};
+const _hoisted_21 = {
+  key: 0,
+  class: "base-table__header-select-options"
+};
+const _hoisted_22 = ["onClick"];
+const _hoisted_23 = ["disabled", "onClick"];
+const _hoisted_24 = { class: "base-table__header-select-option-label" };
+const _hoisted_25 = {
+  key: 1,
+  class: "base-table__header-cascader"
+};
+const _hoisted_26 = ["onClick"];
+const _hoisted_27 = {
+  key: 0,
+  class: "base-table__header-cascader-panel"
+};
+const _hoisted_28 = ["disabled", "onClick"];
+const _hoisted_29 = { class: "base-table__header-cascader-label" };
+const _hoisted_30 = {
+  key: 0,
+  class: "base-table__header-cascader-arrow",
+  "aria-hidden": "true"
+};
+const _hoisted_31 = ["value", "placeholder", "onInput", "onKeyup"];
+const _hoisted_32 = { class: "base-table__header-search-footer" };
+const _hoisted_33 = {
   key: 0,
   class: "base-table__actions"
 };
-const _hoisted_10 = {
+const _hoisted_34 = {
   key: 2,
   class: "base-table__tags"
 };
-const _hoisted_11 = { key: 1 };
-const _hoisted_12 = ["innerHTML"];
-const _hoisted_13 = ["onClick"];
-const _hoisted_14 = {
+const _hoisted_35 = { key: 1 };
+const _hoisted_36 = ["innerHTML"];
+const _hoisted_37 = ["onClick"];
+const _hoisted_38 = {
   key: 6,
   class: "base-table__text"
 };
@@ -416,6 +519,7 @@ const _sfc_main$9 = defineComponent({
   emits: ["selection-change", "sort-change", "row-action", "cell-click", "cell-input", "page-change", "size-change", "update:pagination", "loaded", "request-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
     var _a, _b;
+    let baseTableIconSeed = 0;
     const props = __props;
     const emit = __emit;
     const slots = useSlots();
@@ -425,7 +529,13 @@ const _sfc_main$9 = defineComponent({
     const rows = ref(normalizeRows(props.data));
     const selectionRows = ref([]);
     const headerSearchValues = reactive({});
-    const headerSearchDropdownRefs = ref({});
+    const headerSearchVisible = reactive({});
+    const headerSearchSelectOpen = reactive({});
+    const headerSearchCascaderActivePaths = reactive({});
+    const headerSearchTriggerRects = reactive({});
+    const headerSearchTriggerRefs = ref({});
+    const baseTableIconPrefix = `base-table-icon-${++baseTableIconSeed}`;
+    let headerSearchPositionFrame = 0;
     const sortState = reactive({
       prop: (_a = props.defaultSort) == null ? void 0 : _a.prop,
       order: ((_b = props.defaultSort) == null ? void 0 : _b.order) || null
@@ -483,6 +593,8 @@ const _sfc_main$9 = defineComponent({
       { deep: true }
     );
     onMounted(() => {
+      window.addEventListener("scroll", scheduleHeaderSearchPositionUpdate, true);
+      window.addEventListener("resize", scheduleHeaderSearchPositionUpdate);
       if (props.request && props.autoLoad) {
         void load();
         return;
@@ -491,6 +603,14 @@ const _sfc_main$9 = defineComponent({
         setData(props.data || []);
       }
     });
+    onBeforeUnmount(() => {
+      window.removeEventListener("scroll", scheduleHeaderSearchPositionUpdate, true);
+      window.removeEventListener("resize", scheduleHeaderSearchPositionUpdate);
+      if (headerSearchPositionFrame) {
+        window.cancelAnimationFrame(headerSearchPositionFrame);
+        headerSearchPositionFrame = 0;
+      }
+    });
     function syncPagination(value) {
       const nextPageSizes = value == null ? void 0 : value.pageSizes;
       paginationState.currentPage = Number((value == null ? void 0 : value.currentPage) || paginationState.currentPage || 1);
@@ -630,8 +750,11 @@ const _sfc_main$9 = defineComponent({
         value
       });
     }
+    function resolveHeaderContentAlign(column) {
+      return column.headerAlign || column.align || "left";
+    }
     function shouldRenderBuiltInHeader(column) {
-      return hasHeaderSearch(column);
+      return hasHeaderSearch(column) || isHeaderSortable(column);
     }
     function hasHeaderSearch(column) {
       return Boolean(getHeaderSearchConfig(column));
@@ -648,36 +771,154 @@ const _sfc_main$9 = defineComponent({
     function getHeaderSearchStateKey(column) {
       return resolveHeaderSearchParamKey(column) || getColumnProp(column) || getColumnKey(column);
     }
-    function setHeaderSearchDropdownRef(instance, column) {
+    function resolveHeaderSearchParamKey(column) {
+      const config = getHeaderSearchConfig(column);
+      const legacyParamKey = column.otherProps;
+      return (config == null ? void 0 : config.paramKey) || legacyParamKey || getColumnProp(column) || "";
+    }
+    function setHeaderSearchTriggerRef(instance, column) {
       const stateKey = getHeaderSearchStateKey(column);
-      if (!instance) {
-        delete headerSearchDropdownRefs.value[stateKey];
+      if (!(instance instanceof HTMLElement)) {
+        delete headerSearchTriggerRefs.value[stateKey];
         return;
       }
-      headerSearchDropdownRefs.value[stateKey] = instance;
+      headerSearchTriggerRefs.value[stateKey] = instance;
     }
-    function bindHeaderSearchDropdown(column) {
+    function bindHeaderSearchTrigger(column) {
       return (instance) => {
-        setHeaderSearchDropdownRef(instance, column);
+        setHeaderSearchTriggerRef(instance, column);
       };
     }
-    function resolveHeaderSearchParamKey(column) {
-      const config = getHeaderSearchConfig(column);
-      const legacyParamKey = column.otherProps;
-      return (config == null ? void 0 : config.paramKey) || legacyParamKey || getColumnProp(column) || "";
+    function isHeaderSearchVisible(column) {
+      return Boolean(headerSearchVisible[getHeaderSearchStateKey(column)]);
+    }
+    function toggleHeaderSearch(column) {
+      const stateKey = getHeaderSearchStateKey(column);
+      const nextVisible = !headerSearchVisible[stateKey];
+      if (nextVisible) {
+        closeAllHeaderSearch();
+        updateHeaderSearchTriggerRect(column);
+        syncHeaderSearchCascaderActivePath(column);
+      }
+      headerSearchVisible[stateKey] = nextVisible;
+      headerSearchSelectOpen[stateKey] = false;
+    }
+    function closeAllHeaderSearch() {
+      Object.keys(headerSearchVisible).forEach((key) => {
+        headerSearchVisible[key] = false;
+        headerSearchSelectOpen[key] = false;
+      });
+    }
+    function updateHeaderSearchTriggerRect(column) {
+      var _a2;
+      const stateKey = getHeaderSearchStateKey(column);
+      const rect = (_a2 = headerSearchTriggerRefs.value[stateKey]) == null ? void 0 : _a2.getBoundingClientRect();
+      if (rect) {
+        headerSearchTriggerRects[stateKey] = rect;
+      }
+    }
+    function updateVisibleHeaderSearchPosition() {
+      props.columns.forEach((column) => {
+        if (hasHeaderSearch(column) && isHeaderSearchVisible(column)) {
+          updateHeaderSearchTriggerRect(column);
+        }
+      });
+    }
+    function scheduleHeaderSearchPositionUpdate() {
+      if (headerSearchPositionFrame) {
+        return;
+      }
+      headerSearchPositionFrame = window.requestAnimationFrame(() => {
+        headerSearchPositionFrame = 0;
+        updateVisibleHeaderSearchPosition();
+      });
+    }
+    function getHeaderSearchPanelStyle(column) {
+      const stateKey = getHeaderSearchStateKey(column);
+      const triggerRect = headerSearchTriggerRects[stateKey];
+      const width = toCssValue(getHeaderSearchWidth(column)) || "280px";
+      if (!triggerRect) {
+        return {
+          width
+        };
+      }
+      const panelWidth = Number.parseFloat(String(getHeaderSearchWidth(column))) || 280;
+      const maxLeft = Math.max(8, window.innerWidth - panelWidth - 8);
+      const left = Math.min(maxLeft, Math.max(8, triggerRect.right - panelWidth));
+      const top = triggerRect.bottom + 8;
+      return {
+        width,
+        left: `${left}px`,
+        top: `${top}px`
+      };
     }
     function getHeaderSearchValue(column) {
-      return headerSearchValues[getHeaderSearchStateKey(column)] || "";
+      const stateKey = getHeaderSearchStateKey(column);
+      const value = headerSearchValues[stateKey];
+      if (value !== void 0) {
+        return value;
+      }
+      return getHeaderSearchEmptyValue(column);
+    }
+    function getHeaderSearchInputValue(column) {
+      const value = getHeaderSearchValue(column);
+      return Array.isArray(value) ? value.join(" ") : String(value);
     }
     function hasHeaderSearchValue(column) {
-      return Boolean(getHeaderSearchValue(column).trim());
+      return isHeaderSearchValueFilled(getHeaderSearchValue(column));
     }
     function updateHeaderSearchValue(column, value) {
-      headerSearchValues[getHeaderSearchStateKey(column)] = normalizeHeaderSearchValue(value);
+      headerSearchValues[getHeaderSearchStateKey(column)] = normalizeHeaderSearchValue(column, value);
+    }
+    function handleHeaderSearchInput(column, event) {
+      var _a2;
+      updateHeaderSearchValue(column, ((_a2 = event.target) == null ? void 0 : _a2.value) || "");
+    }
+    function isHeaderSearchSelect(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.type) === "select";
+    }
+    function isHeaderSearchCascader(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.type) === "cascader";
+    }
+    function isHeaderSearchChoice(column) {
+      return isHeaderSearchSelect(column) || isHeaderSearchCascader(column);
+    }
+    function isHeaderSearchMultiple(column) {
+      var _a2;
+      return isHeaderSearchSelect(column) && ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.multiple) === true;
+    }
+    function getHeaderSearchIconName(column) {
+      const iconName = isHeaderSearchChoice(column) ? "select" : "search";
+      return hasHeaderSearchValue(column) ? `${iconName}-y` : iconName;
+    }
+    function isHeaderSortable(column) {
+      return Boolean(resolveColumnSortable(column));
+    }
+    function isHeaderSortActive(column) {
+      return String(sortState.prop || "") === String(getColumnProp(column) || "") && Boolean(sortState.order);
+    }
+    function getHeaderSortIconName(column) {
+      if (!isHeaderSortActive(column)) {
+        return "sort-none";
+      }
+      return sortState.order === "ascending" ? "sort-up" : "sort-down";
+    }
+    function isHeaderSearchSelectOpen(column) {
+      return Boolean(headerSearchSelectOpen[getHeaderSearchStateKey(column)]);
+    }
+    function toggleHeaderSearchSelect(column) {
+      const stateKey = getHeaderSearchStateKey(column);
+      const nextOpen = !headerSearchSelectOpen[stateKey];
+      if (nextOpen) {
+        syncHeaderSearchCascaderActivePath(column);
+      }
+      headerSearchSelectOpen[stateKey] = nextOpen;
     }
     function getHeaderSearchPlaceholder(column) {
       var _a2;
-      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.placeholder) || "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9";
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.placeholder) || (isHeaderSearchChoice(column) ? "\u8BF7\u9009\u62E9" : "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9");
     }
     function getHeaderSearchWidth(column) {
       var _a2;
@@ -691,6 +932,156 @@ const _sfc_main$9 = defineComponent({
       var _a2;
       return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.resetText) || "\u91CD\u7F6E";
     }
+    function getHeaderSearchOptions(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.options) || column.options || [];
+    }
+    function getHeaderSearchOptionValue(option, column) {
+      var _a2;
+      const valueKey = ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.optionValueKey) || column.optionValueKey || "value";
+      return normalizeHeaderSearchPrimitiveValue(option[valueKey]);
+    }
+    function getHeaderSearchOptionLabel(option, column) {
+      var _a2;
+      const labelKey = ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.optionLabelKey) || column.optionLabelKey || "label";
+      const label = option[labelKey];
+      return label === void 0 || label === null ? "" : String(label);
+    }
+    function isHeaderSearchOptionDisabled(option, column) {
+      var _a2;
+      const disabledKey = ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.optionDisabledKey) || "disabled";
+      return Boolean(option[disabledKey]);
+    }
+    function getHeaderSearchOptionChildren(option, column) {
+      var _a2;
+      const childrenKey = ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.optionChildrenKey) || "children";
+      const children = option[childrenKey];
+      return Array.isArray(children) ? children : [];
+    }
+    function hasHeaderSearchOptionChildren(option, column) {
+      return getHeaderSearchOptionChildren(option, column).length > 0;
+    }
+    function getHeaderSearchSelectLabel(column) {
+      const selectedLabels = getHeaderSearchSelectedLabels(column);
+      if (!selectedLabels.length) {
+        return getHeaderSearchPlaceholder(column);
+      }
+      return selectedLabels.join("\u3001");
+    }
+    function getHeaderSearchSelectedLabels(column) {
+      const selectedValues = toComparableValues(getHeaderSearchValue(column));
+      return selectedValues.map((selectedValue) => {
+        const matchedOption = getHeaderSearchOptions(column).find((option) => {
+          return String(getHeaderSearchOptionValue(option, column)) === selectedValue;
+        });
+        return matchedOption ? getHeaderSearchOptionLabel(matchedOption, column) : selectedValue;
+      });
+    }
+    function isHeaderSearchOptionSelected(option, column) {
+      const optionValue = String(getHeaderSearchOptionValue(option, column));
+      return toComparableValues(getHeaderSearchValue(column)).includes(optionValue);
+    }
+    function handleHeaderSearchSelectEmpty(column) {
+      updateHeaderSearchValue(column, getHeaderSearchEmptyValue(column));
+      headerSearchSelectOpen[getHeaderSearchStateKey(column)] = false;
+    }
+    function handleHeaderSearchSelectValue(column, optionValue) {
+      if (!isHeaderSearchMultiple(column)) {
+        updateHeaderSearchValue(column, optionValue);
+        headerSearchSelectOpen[getHeaderSearchStateKey(column)] = false;
+        return;
+      }
+      const currentValues = Array.isArray(getHeaderSearchValue(column)) ? [...getHeaderSearchValue(column)] : [];
+      const comparableValue = String(optionValue);
+      const matchedIndex = currentValues.findIndex((item) => String(item) === comparableValue);
+      if (matchedIndex >= 0) {
+        currentValues.splice(matchedIndex, 1);
+      } else {
+        currentValues.push(optionValue);
+      }
+      updateHeaderSearchValue(column, currentValues);
+    }
+    function getHeaderSearchCascaderValue(column) {
+      return normalizeHeaderSearchPathValue(getHeaderSearchValue(column));
+    }
+    function syncHeaderSearchCascaderActivePath(column) {
+      if (!isHeaderSearchCascader(column)) {
+        return;
+      }
+      const stateKey = getHeaderSearchStateKey(column);
+      headerSearchCascaderActivePaths[stateKey] = getHeaderSearchCascaderValue(column);
+    }
+    function getHeaderSearchCascaderActivePath(column) {
+      const stateKey = getHeaderSearchStateKey(column);
+      const activePath = headerSearchCascaderActivePaths[stateKey];
+      if (activePath) {
+        return activePath;
+      }
+      return getHeaderSearchCascaderValue(column);
+    }
+    function getHeaderSearchCascaderColumns(column) {
+      const columns = [];
+      let levelOptions = getHeaderSearchOptions(column);
+      const activePath = getHeaderSearchCascaderActivePath(column);
+      let levelIndex = 0;
+      while (levelOptions.length) {
+        columns.push(levelOptions);
+        const activeValue = activePath[levelIndex];
+        const activeOption = levelOptions.find((option) => {
+          return String(getHeaderSearchOptionValue(option, column)) === String(activeValue);
+        });
+        if (!activeOption) {
+          break;
+        }
+        levelOptions = getHeaderSearchOptionChildren(activeOption, column);
+        levelIndex += 1;
+      }
+      return columns;
+    }
+    function getHeaderSearchCascaderLabel(column) {
+      const path = getHeaderSearchCascaderValue(column);
+      if (!path.length) {
+        return getHeaderSearchPlaceholder(column);
+      }
+      return getHeaderSearchCascaderPathLabels(column, path).join(" / ");
+    }
+    function getHeaderSearchCascaderPathLabels(column, path = getHeaderSearchCascaderValue(column)) {
+      const labels = [];
+      let levelOptions = getHeaderSearchOptions(column);
+      path.forEach((value) => {
+        const matchedOption = levelOptions.find((option) => {
+          return String(getHeaderSearchOptionValue(option, column)) === String(value);
+        });
+        if (!matchedOption) {
+          labels.push(String(value));
+          levelOptions = [];
+          return;
+        }
+        labels.push(getHeaderSearchOptionLabel(matchedOption, column));
+        levelOptions = getHeaderSearchOptionChildren(matchedOption, column);
+      });
+      return labels;
+    }
+    function isHeaderSearchCascaderOptionActive(column, option, levelIndex) {
+      const activePath = getHeaderSearchCascaderActivePath(column);
+      return String(activePath[levelIndex]) === String(getHeaderSearchOptionValue(option, column));
+    }
+    function isHeaderSearchCascaderOptionSelected(column, option, levelIndex) {
+      const selectedPath = getHeaderSearchCascaderValue(column);
+      return String(selectedPath[levelIndex]) === String(getHeaderSearchOptionValue(option, column));
+    }
+    function handleHeaderSearchCascaderOption(column, option, levelIndex) {
+      const stateKey = getHeaderSearchStateKey(column);
+      const optionValue = getHeaderSearchOptionValue(option, column);
+      const nextPath = [
+        ...getHeaderSearchCascaderActivePath(column).slice(0, levelIndex),
+        optionValue
+      ];
+      headerSearchCascaderActivePaths[stateKey] = nextPath;
+      if (!hasHeaderSearchOptionChildren(option, column)) {
+        updateHeaderSearchValue(column, nextPath);
+      }
+    }
     async function handleHeaderSearch(column) {
       closeHeaderSearch(column);
       paginationState.currentPage = 1;
@@ -702,7 +1093,7 @@ const _sfc_main$9 = defineComponent({
       applyLocalRows();
     }
     async function handleHeaderSearchReset(column) {
-      updateHeaderSearchValue(column, "");
+      updateHeaderSearchValue(column, getHeaderSearchEmptyValue(column));
       closeHeaderSearch(column);
       paginationState.currentPage = 1;
       emitPagination();
@@ -713,8 +1104,9 @@ const _sfc_main$9 = defineComponent({
       applyLocalRows();
     }
     function closeHeaderSearch(column) {
-      var _a2, _b2;
-      (_b2 = (_a2 = headerSearchDropdownRefs.value[getHeaderSearchStateKey(column)]) == null ? void 0 : _a2.handleClose) == null ? void 0 : _b2.call(_a2);
+      const stateKey = getHeaderSearchStateKey(column);
+      headerSearchVisible[stateKey] = false;
+      headerSearchSelectOpen[stateKey] = false;
     }
     function buildHeaderSearchParams() {
       return props.columns.reduce((result, column) => {
@@ -722,11 +1114,11 @@ const _sfc_main$9 = defineComponent({
           return result;
         }
         const paramKey = resolveHeaderSearchParamKey(column);
-        const value = getHeaderSearchValue(column).trim();
-        if (!paramKey || !value) {
+        const value = getHeaderSearchValue(column);
+        if (!paramKey || !isHeaderSearchValueFilled(value)) {
           return result;
         }
-        result[paramKey] = value;
+        result[paramKey] = normalizeHeaderSearchRequestValue(column, value);
         return result;
       }, {});
     }
@@ -739,27 +1131,107 @@ const _sfc_main$9 = defineComponent({
     function filterLocalRows(data) {
       const activeColumns = props.columns.filter((column) => hasHeaderSearch(column) && hasHeaderSearchValue(column)).map((column) => ({
         column,
-        keyword: getHeaderSearchValue(column).trim().toLowerCase()
+        value: getHeaderSearchValue(column)
       }));
       if (!activeColumns.length) {
         return normalizeRows(data);
       }
       return normalizeRows(data).filter((row) => {
-        return activeColumns.every(({ column, keyword }) => {
+        return activeColumns.every(({ column, value: searchValue }) => {
           const columnProp = getColumnProp(column);
           if (!columnProp) {
             return true;
           }
           const value = getCellValue2(row, column);
-          return toSearchableText(value).includes(keyword);
+          if (isHeaderSearchSelect(column)) {
+            return matchesHeaderSearchSelectValue(value, searchValue);
+          }
+          if (isHeaderSearchCascader(column)) {
+            return matchesHeaderSearchCascaderValue(value, searchValue);
+          }
+          return toSearchableText(value).includes(toHeaderSearchKeyword(searchValue));
         });
       });
     }
-    function normalizeHeaderSearchValue(value) {
+    function getHeaderSearchEmptyValue(column) {
+      return isHeaderSearchMultiple(column) || isHeaderSearchCascader(column) ? [] : "";
+    }
+    function normalizeHeaderSearchValue(column, value) {
+      if (isHeaderSearchCascader(column)) {
+        return normalizeHeaderSearchPathValue(value);
+      }
+      if (!isHeaderSearchSelect(column)) {
+        if (value === void 0 || value === null) {
+          return "";
+        }
+        return String(value);
+      }
+      if (isHeaderSearchMultiple(column)) {
+        const values = Array.isArray(value) ? value : [value];
+        return values.filter((item) => isHeaderSearchValueFilled(item)).map((item) => normalizeHeaderSearchPrimitiveValue(item));
+      }
+      if (Array.isArray(value)) {
+        const firstFilledValue = value.find((item) => isHeaderSearchValueFilled(item));
+        return firstFilledValue === void 0 ? "" : normalizeHeaderSearchPrimitiveValue(firstFilledValue);
+      }
       if (value === void 0 || value === null) {
         return "";
       }
-      return String(value);
+      return normalizeHeaderSearchPrimitiveValue(value);
+    }
+    function normalizeHeaderSearchPrimitiveValue(value) {
+      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        return value;
+      }
+      return String(value != null ? value : "");
+    }
+    function normalizeHeaderSearchPathValue(value) {
+      const values = Array.isArray(value) ? value : [value];
+      return values.filter((item) => !Array.isArray(item) && isHeaderSearchValueFilled(item)).map((item) => normalizeHeaderSearchPrimitiveValue(item));
+    }
+    function normalizeHeaderSearchRequestValue(column, value) {
+      if (Array.isArray(value)) {
+        return [...value];
+      }
+      if (isHeaderSearchSelect(column)) {
+        return value;
+      }
+      return String(value).trim();
+    }
+    function isHeaderSearchValueFilled(value) {
+      if (Array.isArray(value)) {
+        return value.some((item) => isHeaderSearchValueFilled(item));
+      }
+      return value !== void 0 && value !== null && String(value).trim() !== "";
+    }
+    function toHeaderSearchKeyword(value) {
+      if (Array.isArray(value)) {
+        return value.map((item) => String(item).trim()).join(" ").toLowerCase();
+      }
+      return String(value).trim().toLowerCase();
+    }
+    function matchesHeaderSearchSelectValue(rowValue, searchValue) {
+      const selectedValues = toComparableValues(searchValue);
+      if (!selectedValues.length) {
+        return true;
+      }
+      const rowValues = toComparableValues(rowValue);
+      return rowValues.some((item) => selectedValues.includes(item));
+    }
+    function matchesHeaderSearchCascaderValue(rowValue, searchValue) {
+      const selectedPath = normalizeHeaderSearchPathValue(searchValue);
+      if (!selectedPath.length) {
+        return true;
+      }
+      const rowPath = normalizeHeaderSearchPathValue(rowValue);
+      if (!rowPath.length) {
+        return false;
+      }
+      return selectedPath.every((item, index) => String(rowPath[index]) === String(item));
+    }
+    function toComparableValues(value) {
+      const values = Array.isArray(value) ? value : [value];
+      return values.filter((item) => isHeaderSearchValueFilled(item)).map((item) => String(item));
     }
     function toSearchableText(value) {
       if (value === void 0 || value === null) {
@@ -989,7 +1461,7 @@ const _sfc_main$9 = defineComponent({
     async function setHeaderSearchValue(key, value, shouldReload = true) {
       const matchedColumn = findHeaderSearchColumn(key);
       const stateKey = matchedColumn ? getHeaderSearchStateKey(matchedColumn) : key;
-      headerSearchValues[stateKey] = normalizeHeaderSearchValue(value);
+      headerSearchValues[stateKey] = matchedColumn ? normalizeHeaderSearchValue(matchedColumn, value) : value;
       if (!shouldReload) {
         return;
       }
@@ -1017,9 +1489,11 @@ const _sfc_main$9 = defineComponent({
         Object.keys(headerSearchValues).forEach((stateKey) => {
           delete headerSearchValues[stateKey];
         });
-        Object.keys(headerSearchDropdownRefs.value).forEach((stateKey) => {
-          var _a2, _b2;
-          (_b2 = (_a2 = headerSearchDropdownRefs.value[stateKey]) == null ? void 0 : _a2.handleClose) == null ? void 0 : _b2.call(_a2);
+        Object.keys(headerSearchVisible).forEach((stateKey) => {
+          headerSearchVisible[stateKey] = false;
+        });
+        Object.keys(headerSearchSelectOpen).forEach((stateKey) => {
+          headerSearchSelectOpen[stateKey] = false;
         });
       }
       paginationState.currentPage = 1;
@@ -1050,20 +1524,109 @@ const _sfc_main$9 = defineComponent({
       const _component_el_pagination = resolveComponent("el-pagination");
       const _component_el_empty = resolveComponent("el-empty");
       const _component_el_table_column = resolveComponent("el-table-column");
-      const _component_el_input = resolveComponent("el-input");
       const _component_el_button = resolveComponent("el-button");
-      const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
-      const _component_el_dropdown = resolveComponent("el-dropdown");
       const _component_el_image = resolveComponent("el-image");
       const _component_el_tag = resolveComponent("el-tag");
+      const _component_el_input = resolveComponent("el-input");
       const _component_el_table = resolveComponent("el-table");
       const _directive_loading = resolveDirective("loading");
       return openBlock(), createElementBlock("div", _hoisted_1$7, [
-        shouldRenderToolbar.value ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
-          createElementVNode("div", _hoisted_3$2, [
+        (openBlock(), createElementBlock("svg", _hoisted_2$7, [
+          createElementVNode("symbol", {
+            id: `${baseTableIconPrefix}-search`,
+            viewBox: "0 0 17.814 14.035"
+          }, [..._cache[2] || (_cache[2] = [
+            createElementVNode("path", {
+              fill: "currentColor",
+              d: "M172.218,201.2a5.254,5.254,0,1,0-1.057.786l2.85,3.721a.659.659,0,0,0,1.047-.8l-2.841-3.709Zm-7.7-3.8a4.056,4.056,0,1,1,4.055,4.044,4.054,4.054,0,0,1-4.055-4.044Zm-2.554-3.968h-3.954a.657.657,0,1,1,0-1.313h3.952a.657.657,0,1,1,0,1.313Zm-.159,8.751h-3.8a.656.656,0,1,1,0-1.312h3.793a.656.656,0,1,1,0,1.312Zm-.78-3.958h-3.016a.659.659,0,1,1,0-1.319h3.015a.659.659,0,1,1,0,1.319Zm4.246,7.929h-7.261a.659.659,0,0,1,0-1.319h7.261a.659.659,0,1,1,0,1.319Z",
+              transform: "translate(-157.354 -192.113)"
+            }, null, -1)
+          ])], 8, _hoisted_3$2),
+          createElementVNode("symbol", {
+            id: `${baseTableIconPrefix}-search-y`,
+            viewBox: "0 0 17.814 14.035"
+          }, [..._cache[3] || (_cache[3] = [
+            createElementVNode("path", {
+              fill: "#0938f7",
+              d: "M172.218,201.2a5.254,5.254,0,1,0-1.057.786l2.85,3.721a.659.659,0,0,0,1.047-.8l-2.841-3.709Zm-7.7-3.8a4.056,4.056,0,1,1,4.055,4.044,4.054,4.054,0,0,1-4.055-4.044Zm-2.554-3.968h-3.954a.657.657,0,1,1,0-1.313h3.952a.657.657,0,1,1,0,1.313Zm-.159,8.751h-3.8a.656.656,0,1,1,0-1.312h3.793a.656.656,0,1,1,0,1.312Zm-.78-3.958h-3.016a.659.659,0,1,1,0-1.319h3.015a.659.659,0,1,1,0,1.319Zm4.246,7.929h-7.261a.659.659,0,0,1,0-1.319h7.261a.659.659,0,1,1,0,1.319Z",
+              transform: "translate(-157.354 -192.113)"
+            }, null, -1)
+          ])], 8, _hoisted_4$1),
+          createElementVNode("symbol", {
+            id: `${baseTableIconPrefix}-select`,
+            viewBox: "0 0 16.04 12.653"
+          }, [..._cache[4] || (_cache[4] = [
+            createElementVNode("path", {
+              fill: "currentColor",
+              d: "M0,12.653V11.248H11.792v1.406ZM9.328,4.429H16.04l-3.356,3.8ZM0,7.029V5.624H7.823V7.029ZM0,1.406V0H14.5V1.406Z"
+            }, null, -1)
+          ])], 8, _hoisted_5$1),
+          createElementVNode("symbol", {
+            id: `${baseTableIconPrefix}-select-y`,
+            viewBox: "0 0 16.04 12.653"
+          }, [..._cache[5] || (_cache[5] = [
+            createElementVNode("path", {
+              fill: "#0938f7",
+              d: "M0,12.653V11.248H11.792v1.406ZM9.328,4.429H16.04l-3.356,3.8ZM0,7.029V5.624H7.823V7.029ZM0,1.406V0H14.5V1.406Z"
+            }, null, -1)
+          ])], 8, _hoisted_6),
+          createElementVNode("symbol", {
+            id: `${baseTableIconPrefix}-sort-none`,
+            viewBox: "0 0 15.351 16.031"
+          }, [..._cache[6] || (_cache[6] = [
+            createElementVNode("g", { transform: "translate(-1299.19 -185.182)" }, [
+              createElementVNode("path", {
+                fill: "currentColor",
+                d: "M100.721,140.352l-3.679,3.679-3.679-3.679h2.944v-8.831h1.472v8.831h2.944Z",
+                transform: "translate(1213.82 57.182)"
+              }),
+              createElementVNode("path", {
+                fill: "currentColor",
+                d: "M92.692,131.679H89.749v8.831H88.277v-8.831H85.333L89.013,128l3.679,3.679Z",
+                transform: "translate(1213.856 57.182)"
+              })
+            ], -1)
+          ])], 8, _hoisted_7),
+          createElementVNode("symbol", {
+            id: `${baseTableIconPrefix}-sort-up`,
+            viewBox: "0 0 15.351 16.031"
+          }, [..._cache[7] || (_cache[7] = [
+            createElementVNode("g", { transform: "translate(-1299.19 -185.182)" }, [
+              createElementVNode("path", {
+                fill: "#8c8c8c",
+                d: "M100.721,140.352l-3.679,3.679-3.679-3.679h2.944v-8.831h1.472v8.831h2.944Z",
+                transform: "translate(1213.82 57.182)"
+              }),
+              createElementVNode("path", {
+                fill: "#0938f7",
+                d: "M92.692,131.679H89.749v8.831H88.277v-8.831H85.333L89.013,128l3.679,3.679Z",
+                transform: "translate(1213.856 57.182)"
+              })
+            ], -1)
+          ])], 8, _hoisted_8),
+          createElementVNode("symbol", {
+            id: `${baseTableIconPrefix}-sort-down`,
+            viewBox: "0 0 15.351 16.031"
+          }, [..._cache[8] || (_cache[8] = [
+            createElementVNode("g", { transform: "translate(-1299.19 -185.182)" }, [
+              createElementVNode("path", {
+                fill: "#0938f7",
+                d: "M100.721,140.352l-3.679,3.679-3.679-3.679h2.944v-8.831h1.472v8.831h2.944Z",
+                transform: "translate(1213.82 57.182)"
+              }),
+              createElementVNode("path", {
+                fill: "#8c8c8c",
+                d: "M92.692,131.679H89.749v8.831H88.277v-8.831H85.333L89.013,128l3.679,3.679Z",
+                transform: "translate(1213.856 57.182)"
+              })
+            ], -1)
+          ])], 8, _hoisted_9)
+        ])),
+        shouldRenderToolbar.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
+          createElementVNode("div", _hoisted_11, [
             renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
           ]),
-          __props.showPagination ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+          __props.showPagination ? (openBlock(), createElementBlock("div", _hoisted_12, [
             createVNode(_component_el_pagination, {
               small: "",
               background: "",
@@ -1135,7 +1698,7 @@ const _sfc_main$9 = defineComponent({
                     columnIndex: scope.$index,
                     value: getCellValue2(scope.row, column)
                   }, void 0, true) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    isActionColumn(column) ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                    isActionColumn(column) ? (openBlock(), createElementBlock("div", _hoisted_33, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(getVisibleActions(column, scope.row), (action) => {
                         return openBlock(), createBlock(_component_el_button, {
                           key: `${action.type}-${action.label}`,
@@ -1157,7 +1720,7 @@ const _sfc_main$9 = defineComponent({
                       src: toImageSrc(getCellValue2(scope.row, column)),
                       "preview-src-list": getPreviewSrcList(scope.row, column),
                       fit: column.imageFit || "cover"
-                    }, null, 8, ["style", "src", "preview-src-list", "fit"])) : column.kind === "tag" ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                    }, null, 8, ["style", "src", "preview-src-list", "fit"])) : column.kind === "tag" ? (openBlock(), createElementBlock("div", _hoisted_34, [
                       getMatchedOptions(scope.row, column).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(getMatchedOptions(scope.row, column), (option) => {
                         return openBlock(), createBlock(_component_el_tag, {
                           key: String(option.value),
@@ -1170,11 +1733,11 @@ const _sfc_main$9 = defineComponent({
                           ]),
                           _: 2
                         }, 1032, ["type", "style"]);
-                      }), 128)) : (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(resolveEmptyText(column)), 1))
+                      }), 128)) : (openBlock(), createElementBlock("span", _hoisted_35, toDisplayString(resolveEmptyText(column)), 1))
                     ])) : column.kind === "html" ? (openBlock(), createElementBlock("div", {
                       key: 3,
                       innerHTML: getHtmlContent(scope.row, column)
-                    }, null, 8, _hoisted_12)) : column.kind === "input" ? (openBlock(), createBlock(_component_el_input, {
+                    }, null, 8, _hoisted_36)) : column.kind === "input" ? (openBlock(), createBlock(_component_el_input, {
                       key: 4,
                       "model-value": toDisplayValue(getCellValue2(scope.row, column), ""),
                       type: column.inputType || "text",
@@ -1184,7 +1747,7 @@ const _sfc_main$9 = defineComponent({
                       class: "base-table__link",
                       type: "button",
                       onClick: ($event) => handleCellClick(scope.row, column)
-                    }, toDisplayString(formatCellDisplay(scope.row, column)), 9, _hoisted_13)) : (openBlock(), createElementBlock("div", _hoisted_14, toDisplayString(formatCellDisplay(scope.row, column)), 1))
+                    }, toDisplayString(formatCellDisplay(scope.row, column)), 9, _hoisted_37)) : (openBlock(), createElementBlock("div", _hoisted_38, toDisplayString(formatCellDisplay(scope.row, column)), 1))
                   ], 64))
                 ]),
                 _: 2
@@ -1198,75 +1761,167 @@ const _sfc_main$9 = defineComponent({
                 } : shouldRenderBuiltInHeader(column) ? {
                   name: "header",
                   fn: withCtx(() => [
-                    createElementVNode("div", _hoisted_5$1, [
-                      createElementVNode("span", _hoisted_6, toDisplayString(column.label), 1),
-                      createElementVNode("div", _hoisted_7, [
-                        createVNode(_component_el_dropdown, {
+                    createElementVNode("div", {
+                      class: normalizeClass(["base-table__header", [
+                        `base-table__header--${resolveHeaderContentAlign(column)}`,
+                        {
+                          "base-table__header--has-actions": hasHeaderSearch(column),
+                          "base-table__header--has-sort": isHeaderSortable(column)
+                        }
+                      ]])
+                    }, [
+                      createElementVNode("span", _hoisted_13, [
+                        createElementVNode("span", _hoisted_14, toDisplayString(column.label), 1),
+                        isHeaderSortable(column) ? (openBlock(), createElementBlock("span", {
+                          key: 0,
+                          class: normalizeClass(["base-table__header-sort", { "is-active": isHeaderSortActive(column) }]),
+                          "aria-hidden": "true"
+                        }, [
+                          createVNode(unref(SvgIcon), {
+                            prefix: baseTableIconPrefix,
+                            "icon-class": getHeaderSortIconName(column),
+                            "class-name": "base-table__header-sort-icon"
+                          }, null, 8, ["icon-class"])
+                        ], 2)) : createCommentVNode("", true)
+                      ]),
+                      hasHeaderSearch(column) ? (openBlock(), createElementBlock("div", _hoisted_15, [
+                        createElementVNode("button", {
                           ref_for: true,
-                          ref: bindHeaderSearchDropdown(column),
-                          class: "base-table__header-dropdown",
-                          trigger: "click",
-                          "hide-on-click": false,
-                          placement: "bottom",
-                          "popper-class": "base-table__header-search-dropdown"
-                        }, {
-                          dropdown: withCtx(() => [
-                            createVNode(_component_el_dropdown_menu, { class: "base-table__header-search-menu" }, {
-                              default: withCtx(() => [
-                                createElementVNode("div", {
-                                  class: "base-table__header-search-panel",
-                                  style: normalizeStyle({ width: toCssValue(getHeaderSearchWidth(column)) || "280px" }),
-                                  onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                                  }, ["stop"]))
-                                }, [
-                                  createVNode(_component_el_input, {
-                                    "model-value": getHeaderSearchValue(column),
-                                    placeholder: getHeaderSearchPlaceholder(column),
-                                    clearable: "",
-                                    "onUpdate:modelValue": ($event) => updateHeaderSearchValue(column, $event),
-                                    onKeyup: withKeys(($event) => handleHeaderSearch(column), ["enter"])
-                                  }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue", "onKeyup"]),
-                                  createElementVNode("div", _hoisted_8, [
-                                    createVNode(_component_el_button, {
-                                      link: "",
-                                      type: "primary",
-                                      onClick: ($event) => handleHeaderSearch(column)
-                                    }, {
-                                      default: withCtx(() => [
-                                        createTextVNode(toDisplayString(getHeaderSearchSearchText(column)), 1)
-                                      ]),
-                                      _: 2
-                                    }, 1032, ["onClick"]),
-                                    createVNode(_component_el_button, {
-                                      link: "",
-                                      onClick: ($event) => handleHeaderSearchReset(column)
-                                    }, {
-                                      default: withCtx(() => [
-                                        createTextVNode(toDisplayString(getHeaderSearchResetText(column)), 1)
-                                      ]),
-                                      _: 2
-                                    }, 1032, ["onClick"])
-                                  ])
-                                ], 4)
-                              ]),
-                              _: 2
-                            }, 1024)
-                          ]),
-                          default: withCtx(() => [
-                            createElementVNode("button", {
-                              class: normalizeClass(["base-table__header-icon", { "is-active": hasHeaderSearchValue(column) }]),
-                              type: "button"
-                            }, [..._cache[1] || (_cache[1] = [
-                              createElementVNode("span", {
-                                class: "base-table__header-icon-mark",
-                                "aria-hidden": "true"
-                              }, null, -1)
-                            ])], 2)
-                          ]),
-                          _: 2
-                        }, 1536)
-                      ])
-                    ])
+                          ref: bindHeaderSearchTrigger(column),
+                          class: normalizeClass(["base-table__header-icon", { "is-active": hasHeaderSearchValue(column) }]),
+                          type: "button",
+                          onClick: withModifiers(($event) => toggleHeaderSearch(column), ["stop"])
+                        }, [
+                          createVNode(unref(SvgIcon), {
+                            prefix: baseTableIconPrefix,
+                            "icon-class": getHeaderSearchIconName(column),
+                            "class-name": "base-table__header-search-icon"
+                          }, null, 8, ["icon-class"])
+                        ], 10, _hoisted_16),
+                        (openBlock(), createBlock(Teleport, { to: "body" }, [
+                          isHeaderSearchVisible(column) ? (openBlock(), createElementBlock("div", {
+                            key: getHeaderSearchStateKey(column),
+                            class: "base-table__header-search-panel",
+                            style: normalizeStyle(getHeaderSearchPanelStyle(column)),
+                            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                            }, ["stop"])),
+                            onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
+                            }, ["stop"]))
+                          }, [
+                            isHeaderSearchSelect(column) ? (openBlock(), createElementBlock("div", _hoisted_17, [
+                              createElementVNode("button", {
+                                class: "base-table__header-select-trigger",
+                                type: "button",
+                                onClick: ($event) => toggleHeaderSearchSelect(column)
+                              }, [
+                                isHeaderSearchMultiple(column) && getHeaderSearchSelectedLabels(column).length ? (openBlock(), createElementBlock("span", _hoisted_19, [
+                                  (openBlock(true), createElementBlock(Fragment, null, renderList(getHeaderSearchSelectedLabels(column).slice(0, 2), (label) => {
+                                    return openBlock(), createElementBlock("span", {
+                                      key: label,
+                                      class: "base-table__header-select-tag"
+                                    }, toDisplayString(label), 1);
+                                  }), 128)),
+                                  getHeaderSearchSelectedLabels(column).length > 2 ? (openBlock(), createElementBlock("span", _hoisted_20, " +" + toDisplayString(getHeaderSearchSelectedLabels(column).length - 2), 1)) : createCommentVNode("", true)
+                                ])) : (openBlock(), createElementBlock("span", {
+                                  key: 1,
+                                  class: normalizeClass(["base-table__header-select-text", { "is-placeholder": !hasHeaderSearchValue(column) }])
+                                }, toDisplayString(getHeaderSearchSelectLabel(column)), 3)),
+                                createElementVNode("span", {
+                                  class: normalizeClass(["base-table__header-select-arrow", { "is-open": isHeaderSearchSelectOpen(column) }]),
+                                  "aria-hidden": "true"
+                                }, null, 2)
+                              ], 8, _hoisted_18),
+                              isHeaderSearchSelectOpen(column) ? (openBlock(), createElementBlock("div", _hoisted_21, [
+                                !isHeaderSearchMultiple(column) ? (openBlock(), createElementBlock("button", {
+                                  key: 0,
+                                  class: normalizeClass(["base-table__header-select-option", { "is-selected": !hasHeaderSearchValue(column) }]),
+                                  type: "button",
+                                  onClick: ($event) => handleHeaderSearchSelectEmpty(column)
+                                }, toDisplayString(getHeaderSearchPlaceholder(column)), 11, _hoisted_22)) : createCommentVNode("", true),
+                                (openBlock(true), createElementBlock(Fragment, null, renderList(getHeaderSearchOptions(column), (option) => {
+                                  return openBlock(), createElementBlock("button", {
+                                    key: String(getHeaderSearchOptionValue(option, column)),
+                                    class: normalizeClass(["base-table__header-select-option", { "is-selected": isHeaderSearchOptionSelected(option, column) }]),
+                                    type: "button",
+                                    disabled: isHeaderSearchOptionDisabled(option, column),
+                                    onClick: ($event) => handleHeaderSearchSelectValue(column, getHeaderSearchOptionValue(option, column))
+                                  }, [
+                                    createElementVNode("span", _hoisted_24, toDisplayString(getHeaderSearchOptionLabel(option, column)), 1)
+                                  ], 10, _hoisted_23);
+                                }), 128))
+                              ])) : createCommentVNode("", true)
+                            ])) : isHeaderSearchCascader(column) ? (openBlock(), createElementBlock("div", _hoisted_25, [
+                              createElementVNode("button", {
+                                class: "base-table__header-select-trigger",
+                                type: "button",
+                                onClick: ($event) => toggleHeaderSearchSelect(column)
+                              }, [
+                                createElementVNode("span", {
+                                  class: normalizeClass(["base-table__header-select-text", { "is-placeholder": !hasHeaderSearchValue(column) }])
+                                }, toDisplayString(getHeaderSearchCascaderLabel(column)), 3),
+                                createElementVNode("span", {
+                                  class: normalizeClass(["base-table__header-select-arrow", { "is-open": isHeaderSearchSelectOpen(column) }]),
+                                  "aria-hidden": "true"
+                                }, null, 2)
+                              ], 8, _hoisted_26),
+                              isHeaderSearchSelectOpen(column) ? (openBlock(), createElementBlock("div", _hoisted_27, [
+                                (openBlock(true), createElementBlock(Fragment, null, renderList(getHeaderSearchCascaderColumns(column), (levelOptions, levelIndex) => {
+                                  return openBlock(), createElementBlock("div", {
+                                    key: levelIndex,
+                                    class: "base-table__header-cascader-menu"
+                                  }, [
+                                    (openBlock(true), createElementBlock(Fragment, null, renderList(levelOptions, (option) => {
+                                      return openBlock(), createElementBlock("button", {
+                                        key: `${levelIndex}-${String(getHeaderSearchOptionValue(option, column))}`,
+                                        class: normalizeClass(["base-table__header-cascader-option", {
+                                          "is-active": isHeaderSearchCascaderOptionActive(column, option, levelIndex),
+                                          "is-selected": isHeaderSearchCascaderOptionSelected(column, option, levelIndex)
+                                        }]),
+                                        type: "button",
+                                        disabled: isHeaderSearchOptionDisabled(option, column),
+                                        onClick: ($event) => handleHeaderSearchCascaderOption(column, option, levelIndex)
+                                      }, [
+                                        createElementVNode("span", _hoisted_29, toDisplayString(getHeaderSearchOptionLabel(option, column)), 1),
+                                        hasHeaderSearchOptionChildren(option, column) ? (openBlock(), createElementBlock("span", _hoisted_30)) : createCommentVNode("", true)
+                                      ], 10, _hoisted_28);
+                                    }), 128))
+                                  ]);
+                                }), 128))
+                              ])) : createCommentVNode("", true)
+                            ])) : (openBlock(), createElementBlock("input", {
+                              key: 2,
+                              class: "base-table__header-search-input",
+                              type: "text",
+                              value: getHeaderSearchInputValue(column),
+                              placeholder: getHeaderSearchPlaceholder(column),
+                              onInput: ($event) => handleHeaderSearchInput(column, $event),
+                              onKeyup: withKeys(($event) => handleHeaderSearch(column), ["enter"])
+                            }, null, 40, _hoisted_31)),
+                            createElementVNode("div", _hoisted_32, [
+                              createVNode(_component_el_button, {
+                                link: "",
+                                type: "primary",
+                                onClick: ($event) => handleHeaderSearch(column)
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(getHeaderSearchSearchText(column)), 1)
+                                ]),
+                                _: 2
+                              }, 1032, ["onClick"]),
+                              createVNode(_component_el_button, {
+                                link: "",
+                                onClick: ($event) => handleHeaderSearchReset(column)
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(getHeaderSearchResetText(column)), 1)
+                                ]),
+                                _: 2
+                              }, 1032, ["onClick"])
+                            ])
+                          ], 36)) : createCommentVNode("", true)
+                        ]))
+                      ])) : createCommentVNode("", true)
+                    ], 2)
                   ]),
                   key: "1"
                 } : void 0
@@ -1281,7 +1936,7 @@ const _sfc_main$9 = defineComponent({
     };
   }
 });
-var BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-7ae8d382"]]);
+var BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-20fa814c"]]);
 var BaseEChart_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main$8 = defineComponent({
   __name: "BaseEChart",
@@ -3959,4 +4614,4 @@ const _sfc_main = defineComponent({
 });
 var OutlinedTreeSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-30d7dee0"]]);
 installRipple();
-export { BaseCard, BaseEChart, _sfc_main$7 as BaseExportButton, BaseTable, OutlinedCascader, OutlinedDatePicker, OutlinedDateTimePicker, OutlinedInput, OutlinedSelect, OutlinedTimePicker, OutlinedTreeSelect, downloadExportResponse, exportExcel, extractFileNameFromDisposition, installRipple, normalizeExportFileName, uninstallRipple };
+export { BaseCard, BaseEChart, _sfc_main$7 as BaseExportButton, BaseTable, OutlinedCascader, OutlinedDatePicker, OutlinedDateTimePicker, OutlinedInput, OutlinedSelect, OutlinedTimePicker, OutlinedTreeSelect, SvgIcon, downloadExportResponse, exportExcel, extractFileNameFromDisposition, installRipple, normalizeExportFileName, uninstallRipple };