@hbdlzy/ui-core 0.1.8 → 0.1.9

package/dist/index.js

@@ -603,52 +603,36 @@ 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 = {
+const _hoisted_18 = {
   key: 1,
   class: "base-table__header-cascader"
 };
-const _hoisted_26 = ["onClick"];
-const _hoisted_27 = {
+const _hoisted_19 = ["onClick"];
+const _hoisted_20 = {
   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 = {
+const _hoisted_21 = ["disabled", "onClick"];
+const _hoisted_22 = { class: "base-table__header-cascader-label" };
+const _hoisted_23 = {
   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 = {
+const _hoisted_24 = ["value", "placeholder", "onInput", "onKeyup"];
+const _hoisted_25 = { class: "base-table__header-search-footer" };
+const _hoisted_26 = {
   key: 0,
   class: "base-table__actions"
 };
-const _hoisted_34 = {
+const _hoisted_27 = {
   key: 2,
   class: "base-table__tags"
 };
-const _hoisted_35 = { key: 1 };
-const _hoisted_36 = ["innerHTML"];
-const _hoisted_37 = ["onClick"];
-const _hoisted_38 = {
+const _hoisted_28 = { key: 1 };
+const _hoisted_29 = ["innerHTML"];
+const _hoisted_30 = ["onClick"];
+const _hoisted_31 = {
   key: 6,
   class: "base-table__text"
 };
@@ -713,6 +697,8 @@ const _sfc_main$9 = defineComponent({
     const headerSearchCascaderActivePaths = reactive({});
     const headerSearchTriggerRects = reactive({});
     const headerSearchTriggerRefs = ref({});
+    const headerSearchPanelRefs = ref({});
+    const headerSearchPositionTick = ref(0);
     const baseTableIconPrefix = `base-table-icon-${++baseTableIconSeed}`;
     let headerSearchPositionFrame = 0;
     const sortState = reactive({
@@ -772,6 +758,7 @@ const _sfc_main$9 = defineComponent({
       { deep: true }
     );
     onMounted(() => {
+      document.addEventListener("click", handleDocumentClick, true);
       window.addEventListener("scroll", scheduleHeaderSearchPositionUpdate, true);
       window.addEventListener("resize", scheduleHeaderSearchPositionUpdate);
       if (props.request && props.autoLoad) {
@@ -783,6 +770,7 @@ const _sfc_main$9 = defineComponent({
       }
     });
     onBeforeUnmount(() => {
+      document.removeEventListener("click", handleDocumentClick, true);
       window.removeEventListener("scroll", scheduleHeaderSearchPositionUpdate, true);
       window.removeEventListener("resize", scheduleHeaderSearchPositionUpdate);
       if (headerSearchPositionFrame) {
@@ -871,6 +859,9 @@ const _sfc_main$9 = defineComponent({
       selectionRows.value = value;
       emit("selection-change", value);
     }
+    function resolveRowSelectable(row, index) {
+      return props.rowSelectable ? props.rowSelectable(row, index) : true;
+    }
     function handleSortChange(payload) {
       const column = props.columns.find((item) => String(item.prop || "") === String(payload.prop || ""));
       sortState.prop = payload.prop;
@@ -968,6 +959,19 @@ const _sfc_main$9 = defineComponent({
         setHeaderSearchTriggerRef(instance, column);
       };
     }
+    function setHeaderSearchPanelRef(instance, column) {
+      const stateKey = getHeaderSearchStateKey(column);
+      if (!(instance instanceof HTMLElement)) {
+        delete headerSearchPanelRefs.value[stateKey];
+        return;
+      }
+      headerSearchPanelRefs.value[stateKey] = instance;
+    }
+    function bindHeaderSearchPanel(column) {
+      return (instance) => {
+        setHeaderSearchPanelRef(instance, column);
+      };
+    }
     function isHeaderSearchVisible(column) {
       return Boolean(headerSearchVisible[getHeaderSearchStateKey(column)]);
     }
@@ -978,6 +982,7 @@ const _sfc_main$9 = defineComponent({
         closeAllHeaderSearch();
         updateHeaderSearchTriggerRect(column);
         syncHeaderSearchCascaderActivePath(column);
+        scheduleHeaderSearchPositionUpdate();
       }
       headerSearchVisible[stateKey] = nextVisible;
       headerSearchSelectOpen[stateKey] = false;
@@ -988,6 +993,15 @@ const _sfc_main$9 = defineComponent({
         headerSearchSelectOpen[key] = false;
       });
     }
+    function handleDocumentClick(event) {
+      const target = event.target;
+      if (target instanceof Element) {
+        if (target.closest(`[data-base-table-id="${baseTableIconPrefix}"].base-table__header-search-panel`) || target.closest(`[data-base-table-id="${baseTableIconPrefix}"].base-table__header-icon`)) {
+          return;
+        }
+      }
+      closeAllHeaderSearch();
+    }
     function updateHeaderSearchTriggerRect(column) {
       var _a2;
       const stateKey = getHeaderSearchStateKey(column);
@@ -1009,28 +1023,67 @@ const _sfc_main$9 = defineComponent({
       }
       headerSearchPositionFrame = window.requestAnimationFrame(() => {
         headerSearchPositionFrame = 0;
+        headerSearchPositionTick.value += 1;
         updateVisibleHeaderSearchPosition();
       });
     }
     function getHeaderSearchPanelStyle(column) {
+      headerSearchPositionTick.value;
       const stateKey = getHeaderSearchStateKey(column);
       const triggerRect = headerSearchTriggerRects[stateKey];
-      const width = toCssValue(getHeaderSearchWidth(column)) || "280px";
+      const panelWidth = getHeaderSearchPanelWidth(column);
+      const style = {
+        width: panelWidth.width,
+        minWidth: panelWidth.minWidth,
+        maxWidth: panelWidth.maxWidth
+      };
       if (!triggerRect) {
-        return {
-          width
-        };
+        return style;
       }
-      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 maxLeft = Math.max(8, window.innerWidth - panelWidth.positionWidth - 8);
+      const left = Math.min(maxLeft, Math.max(8, triggerRect.right - panelWidth.positionWidth));
       const top = triggerRect.bottom + 8;
       return {
-        width,
+        ...style,
         left: `${left}px`,
         top: `${top}px`
       };
     }
+    function getHeaderSearchPanelWidth(column) {
+      const rawWidth = getHeaderSearchWidth(column);
+      const viewportMaxWidth = Math.max(220, window.innerWidth - 16);
+      const renderedWidth = getRenderedHeaderSearchPanelWidth(column);
+      if (rawWidth === "auto") {
+        const positionWidth2 = Math.min(renderedWidth || getHeaderSearchAutoWidth(column), viewportMaxWidth);
+        return {
+          width: "max-content",
+          minWidth: "280px",
+          maxWidth: `${viewportMaxWidth}px`,
+          positionWidth: positionWidth2
+        };
+      }
+      const width = toCssValue(rawWidth) || "280px";
+      const positionWidth = Math.min(Number.parseFloat(String(rawWidth)) || 280, viewportMaxWidth);
+      return {
+        width,
+        minWidth: width,
+        maxWidth: `${viewportMaxWidth}px`,
+        positionWidth
+      };
+    }
+    function getRenderedHeaderSearchPanelWidth(column) {
+      const stateKey = getHeaderSearchStateKey(column);
+      const panelElement = headerSearchPanelRefs.value[stateKey];
+      return panelElement ? panelElement.getBoundingClientRect().width : 0;
+    }
+    function getHeaderSearchAutoWidth(column) {
+      var _a2;
+      if (isHeaderSearchRange(column)) {
+        const type = (_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.type;
+        return type === "daterange" || type === "timerange" ? 420 : 560;
+      }
+      return 280;
+    }
     function getHeaderSearchValue(column) {
       const stateKey = getHeaderSearchStateKey(column);
       const value = headerSearchValues[stateKey];
@@ -1061,6 +1114,24 @@ const _sfc_main$9 = defineComponent({
       var _a2;
       return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.type) === "cascader";
     }
+    function isHeaderSearchDatePicker(column) {
+      var _a2;
+      const type = (_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.type;
+      return type === "date" || type === "daterange" || type === "datetime" || type === "datetimerange";
+    }
+    function isHeaderSearchTimePicker(column) {
+      var _a2;
+      const type = (_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.type;
+      return type === "time" || type === "timerange";
+    }
+    function isHeaderSearchPicker(column) {
+      return isHeaderSearchDatePicker(column) || isHeaderSearchTimePicker(column);
+    }
+    function isHeaderSearchRange(column) {
+      var _a2;
+      const type = (_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.type;
+      return type === "daterange" || type === "datetimerange" || type === "timerange";
+    }
     function isHeaderSearchChoice(column) {
       return isHeaderSearchSelect(column) || isHeaderSearchCascader(column);
     }
@@ -1068,6 +1139,14 @@ const _sfc_main$9 = defineComponent({
       var _a2;
       return isHeaderSearchSelect(column) && ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.multiple) === true;
     }
+    function isHeaderSearchClearable(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.clearable) !== false;
+    }
+    function isHeaderSearchFilterable(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.filterable) === true;
+    }
     function getHeaderSearchIconName(column) {
       const iconName = isHeaderSearchChoice(column) ? "select" : "search";
       return hasHeaderSearchValue(column) ? `${iconName}-y` : iconName;
@@ -1099,9 +1178,53 @@ const _sfc_main$9 = defineComponent({
       var _a2;
       return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.placeholder) || (isHeaderSearchChoice(column) ? "\u8BF7\u9009\u62E9" : "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9");
     }
+    function getHeaderSearchStartPlaceholder(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.startPlaceholder) || "\u5F00\u59CB\u65F6\u95F4";
+    }
+    function getHeaderSearchEndPlaceholder(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.endPlaceholder) || "\u7ED3\u675F\u65F6\u95F4";
+    }
+    function getHeaderSearchRangeSeparator(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.rangeSeparator) || "\u81F3";
+    }
+    function getHeaderSearchPickerType(column) {
+      var _a2;
+      const type = (_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.type;
+      if (type === "datetime" || type === "datetimerange") {
+        return type;
+      }
+      return type === "daterange" ? "daterange" : "date";
+    }
+    function getHeaderSearchDateFormat(column) {
+      var _a2, _b2;
+      const config = getHeaderSearchConfig(column);
+      if (config == null ? void 0 : config.format) {
+        return config.format;
+      }
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.type) === "datetime" || ((_b2 = getHeaderSearchConfig(column)) == null ? void 0 : _b2.type) === "datetimerange" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
+    }
+    function getHeaderSearchDateValueFormat(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.valueFormat) || getHeaderSearchDateFormat(column);
+    }
+    function getHeaderSearchTimeFormat(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.format) || "HH:mm:ss";
+    }
+    function getHeaderSearchTimeValueFormat(column) {
+      var _a2;
+      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.valueFormat) || getHeaderSearchTimeFormat(column);
+    }
     function getHeaderSearchWidth(column) {
       var _a2;
-      return ((_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.width) || 280;
+      const configuredWidth = (_a2 = getHeaderSearchConfig(column)) == null ? void 0 : _a2.width;
+      if (configuredWidth !== void 0 && configuredWidth !== null && configuredWidth !== "") {
+        return configuredWidth;
+      }
+      return isHeaderSearchRange(column) ? "auto" : 280;
     }
     function getHeaderSearchSearchText(column) {
       var _a2;
@@ -1140,45 +1263,27 @@ const _sfc_main$9 = defineComponent({
     function hasHeaderSearchOptionChildren(option, column) {
       return getHeaderSearchOptionChildren(option, column).length > 0;
     }
-    function getHeaderSearchSelectLabel(column) {
-      const selectedLabels = getHeaderSearchSelectedLabels(column);
-      if (!selectedLabels.length) {
-        return getHeaderSearchPlaceholder(column);
+    function getHeaderSearchSelectModelValue(column) {
+      var _a2;
+      const value = getHeaderSearchValue(column);
+      if (isHeaderSearchMultiple(column)) {
+        return Array.isArray(value) ? value : [];
       }
-      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);
+      return Array.isArray(value) ? (_a2 = value[0]) != null ? _a2 : "" : value;
     }
     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 handleHeaderSearchSelectModelValue(column, value) {
+      updateHeaderSearchValue(column, value);
+    }
+    function getHeaderSearchPickerValue(column) {
+      const value = getHeaderSearchValue(column);
+      return Array.isArray(value) ? [...value] : value;
+    }
+    function handleHeaderSearchPickerValue(column, value) {
+      updateHeaderSearchValue(column, value);
     }
     function getHeaderSearchCascaderValue(column) {
       return normalizeHeaderSearchPathValue(getHeaderSearchValue(column));
@@ -1328,17 +1433,29 @@ const _sfc_main$9 = defineComponent({
           if (isHeaderSearchCascader(column)) {
             return matchesHeaderSearchCascaderValue(value, searchValue);
           }
+          if (isHeaderSearchPicker(column)) {
+            return matchesHeaderSearchPickerValue(value, searchValue, column);
+          }
           return toSearchableText(value).includes(toHeaderSearchKeyword(searchValue));
         });
       });
     }
     function getHeaderSearchEmptyValue(column) {
-      return isHeaderSearchMultiple(column) || isHeaderSearchCascader(column) ? [] : "";
+      return isHeaderSearchMultiple(column) || isHeaderSearchCascader(column) || isHeaderSearchRange(column) ? [] : "";
     }
     function normalizeHeaderSearchValue(column, value) {
       if (isHeaderSearchCascader(column)) {
         return normalizeHeaderSearchPathValue(value);
       }
+      if (isHeaderSearchPicker(column)) {
+        if (isHeaderSearchRange(column)) {
+          return normalizeHeaderSearchPathValue(value);
+        }
+        if (value === void 0 || value === null) {
+          return "";
+        }
+        return normalizeHeaderSearchPrimitiveValue(value);
+      }
       if (!isHeaderSearchSelect(column)) {
         if (value === void 0 || value === null) {
           return "";
@@ -1408,6 +1525,38 @@ const _sfc_main$9 = defineComponent({
       }
       return selectedPath.every((item, index) => String(rowPath[index]) === String(item));
     }
+    function matchesHeaderSearchPickerValue(rowValue, searchValue, column) {
+      if (isHeaderSearchRange(column)) {
+        const selectedRange = normalizeHeaderSearchPathValue(searchValue);
+        if (!selectedRange.length) {
+          return true;
+        }
+        const rowTime = toComparableTime(rowValue);
+        const startTime = toComparableTime(selectedRange[0]);
+        const endTime = toComparableTime(selectedRange[1]);
+        if (rowTime === null) {
+          return false;
+        }
+        return (startTime === null || rowTime >= startTime) && (endTime === null || rowTime <= endTime);
+      }
+      return String(rowValue || "") === String(searchValue || "");
+    }
+    function toComparableTime(value) {
+      if (value === void 0 || value === null || value === "") {
+        return null;
+      }
+      if (value instanceof Date) {
+        return value.getTime();
+      }
+      const normalizedValue = String(value).trim();
+      const parsedValue = Date.parse(normalizedValue);
+      if (!Number.isNaN(parsedValue)) {
+        return parsedValue;
+      }
+      const today = new Date().toISOString().slice(0, 10);
+      const parsedTime = Date.parse(`${today} ${normalizedValue}`);
+      return Number.isNaN(parsedTime) ? null : parsedTime;
+    }
     function toComparableValues(value) {
       const values = Array.isArray(value) ? value : [value];
       return values.filter((item) => isHeaderSearchValueFilled(item)).map((item) => String(item));
@@ -1704,6 +1853,10 @@ const _sfc_main$9 = defineComponent({
       const _component_el_config_provider = resolveComponent("el-config-provider");
       const _component_el_empty = resolveComponent("el-empty");
       const _component_el_table_column = resolveComponent("el-table-column");
+      const _component_el_option = resolveComponent("el-option");
+      const _component_el_select = resolveComponent("el-select");
+      const _component_el_date_picker = resolveComponent("el-date-picker");
+      const _component_el_time_picker = resolveComponent("el-time-picker");
       const _component_el_button = resolveComponent("el-button");
       const _component_el_image = resolveComponent("el-image");
       const _component_el_tag = resolveComponent("el-tag");
@@ -1837,6 +1990,8 @@ const _sfc_main$9 = defineComponent({
           stripe: __props.stripe,
           "default-sort": normalizedDefaultSort.value,
           "highlight-current-row": "",
+          onSelect: handleSelectionChange,
+          onSelectAll: handleSelectionChange,
           onSelectionChange: handleSelectionChange,
           onSortChange: handleSortChange
         }, {
@@ -1848,9 +2003,10 @@ const _sfc_main$9 = defineComponent({
               key: 0,
               type: "selection",
               width: __props.selectionWidth,
+              fixed: "left",
               align: "center",
-              selectable: __props.rowSelectable
-            }, null, 8, ["width", "selectable"])) : createCommentVNode("", true),
+              selectable: resolveRowSelectable
+            }, null, 8, ["width"])) : createCommentVNode("", true),
             __props.hasIndex ? (openBlock(), createBlock(_component_el_table_column, {
               key: 1,
               type: "index",
@@ -1883,7 +2039,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_33, [
+                    isActionColumn(column) ? (openBlock(), createElementBlock("div", _hoisted_26, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(getVisibleActions(column, scope.row), (action) => {
                         return openBlock(), createBlock(_component_el_button, {
                           key: `${action.type}-${action.label}`,
@@ -1905,7 +2061,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_34, [
+                    }, null, 8, ["style", "src", "preview-src-list", "fit"])) : column.kind === "tag" ? (openBlock(), createElementBlock("div", _hoisted_27, [
                       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),
@@ -1918,11 +2074,11 @@ const _sfc_main$9 = defineComponent({
                           ]),
                           _: 2
                         }, 1032, ["type", "style"]);
-                      }), 128)) : (openBlock(), createElementBlock("span", _hoisted_35, toDisplayString(resolveEmptyText(column)), 1))
+                      }), 128)) : (openBlock(), createElementBlock("span", _hoisted_28, toDisplayString(resolveEmptyText(column)), 1))
                     ])) : column.kind === "html" ? (openBlock(), createElementBlock("div", {
                       key: 3,
                       innerHTML: getHtmlContent(scope.row, column)
-                    }, null, 8, _hoisted_36)) : column.kind === "input" ? (openBlock(), createBlock(_component_el_input, {
+                    }, null, 8, _hoisted_29)) : column.kind === "input" ? (openBlock(), createBlock(_component_el_input, {
                       key: 4,
                       "model-value": toDisplayValue(getCellValue2(scope.row, column), ""),
                       type: column.inputType || "text",
@@ -1932,7 +2088,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_37)) : (openBlock(), createElementBlock("div", _hoisted_38, toDisplayString(formatCellDisplay(scope.row, column)), 1))
+                    }, toDisplayString(formatCellDisplay(scope.row, column)), 9, _hoisted_30)) : (openBlock(), createElementBlock("div", _hoisted_31, toDisplayString(formatCellDisplay(scope.row, column)), 1))
                   ], 64))
                 ]),
                 _: 2
@@ -1974,6 +2130,7 @@ const _sfc_main$9 = defineComponent({
                           ref_for: true,
                           ref: bindHeaderSearchTrigger(column),
                           class: normalizeClass(["base-table__header-icon", { "is-active": hasHeaderSearchValue(column) }]),
+                          "data-base-table-id": baseTableIconPrefix,
                           type: "button",
                           onClick: withModifiers(($event) => toggleHeaderSearch(column), ["stop"])
                         }, [
@@ -1985,8 +2142,11 @@ const _sfc_main$9 = defineComponent({
                         ], 10, _hoisted_16),
                         (openBlock(), createBlock(Teleport, { to: "body" }, [
                           isHeaderSearchVisible(column) ? (openBlock(), createElementBlock("div", {
+                            ref_for: true,
+                            ref: bindHeaderSearchPanel(column),
                             key: getHeaderSearchStateKey(column),
                             class: "base-table__header-search-panel",
+                            "data-base-table-id": baseTableIconPrefix,
                             style: normalizeStyle(getHeaderSearchPanelStyle(column)),
                             onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                             }, ["stop"])),
@@ -1994,48 +2154,32 @@ const _sfc_main$9 = defineComponent({
                             }, ["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, [
+                              createVNode(_component_el_select, {
+                                class: "base-table__header-el-select",
+                                "model-value": getHeaderSearchSelectModelValue(column),
+                                placeholder: getHeaderSearchPlaceholder(column),
+                                multiple: isHeaderSearchMultiple(column),
+                                filterable: isHeaderSearchFilterable(column),
+                                clearable: isHeaderSearchClearable(column),
+                                "collapse-tags": isHeaderSearchMultiple(column),
+                                "collapse-tags-tooltip": isHeaderSearchMultiple(column),
+                                teleported: false,
+                                "onUpdate:modelValue": ($event) => handleHeaderSearchSelectModelValue(column, $event),
+                                onClear: ($event) => handleHeaderSearchSelectEmpty(column)
+                              }, {
+                                default: withCtx(() => [
+                                  (openBlock(true), createElementBlock(Fragment, null, renderList(getHeaderSearchOptions(column), (option) => {
+                                    return openBlock(), createBlock(_component_el_option, {
+                                      key: String(getHeaderSearchOptionValue(option, column)),
+                                      label: getHeaderSearchOptionLabel(option, column),
+                                      value: getHeaderSearchOptionValue(option, column),
+                                      disabled: isHeaderSearchOptionDisabled(option, column)
+                                    }, null, 8, ["label", "value", "disabled"]);
+                                  }), 128))
+                                ]),
+                                _: 2
+                              }, 1032, ["model-value", "placeholder", "multiple", "filterable", "clearable", "collapse-tags", "collapse-tags-tooltip", "onUpdate:modelValue", "onClear"])
+                            ])) : isHeaderSearchCascader(column) ? (openBlock(), createElementBlock("div", _hoisted_18, [
                               createElementVNode("button", {
                                 class: "base-table__header-select-trigger",
                                 type: "button",
@@ -2048,8 +2192,8 @@ const _sfc_main$9 = defineComponent({
                                   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, [
+                              ], 8, _hoisted_19),
+                              isHeaderSearchSelectOpen(column) ? (openBlock(), createElementBlock("div", _hoisted_20, [
                                 (openBlock(true), createElementBlock(Fragment, null, renderList(getHeaderSearchCascaderColumns(column), (levelOptions, levelIndex) => {
                                   return openBlock(), createElementBlock("div", {
                                     key: levelIndex,
@@ -2066,23 +2210,51 @@ const _sfc_main$9 = defineComponent({
                                         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);
+                                        createElementVNode("span", _hoisted_22, toDisplayString(getHeaderSearchOptionLabel(option, column)), 1),
+                                        hasHeaderSearchOptionChildren(option, column) ? (openBlock(), createElementBlock("span", _hoisted_23)) : createCommentVNode("", true)
+                                      ], 10, _hoisted_21);
                                     }), 128))
                                   ]);
                                 }), 128))
                               ])) : createCommentVNode("", true)
-                            ])) : (openBlock(), createElementBlock("input", {
+                            ])) : isHeaderSearchDatePicker(column) ? (openBlock(), createBlock(_component_el_date_picker, {
                               key: 2,
+                              class: "base-table__header-picker",
+                              "model-value": getHeaderSearchPickerValue(column),
+                              type: getHeaderSearchPickerType(column),
+                              placeholder: getHeaderSearchPlaceholder(column),
+                              "start-placeholder": getHeaderSearchStartPlaceholder(column),
+                              "end-placeholder": getHeaderSearchEndPlaceholder(column),
+                              "range-separator": getHeaderSearchRangeSeparator(column),
+                              format: getHeaderSearchDateFormat(column),
+                              "value-format": getHeaderSearchDateValueFormat(column),
+                              clearable: isHeaderSearchClearable(column),
+                              teleported: false,
+                              "onUpdate:modelValue": ($event) => handleHeaderSearchPickerValue(column, $event)
+                            }, null, 8, ["model-value", "type", "placeholder", "start-placeholder", "end-placeholder", "range-separator", "format", "value-format", "clearable", "onUpdate:modelValue"])) : isHeaderSearchTimePicker(column) ? (openBlock(), createBlock(_component_el_time_picker, {
+                              key: 3,
+                              class: "base-table__header-picker",
+                              "model-value": getHeaderSearchPickerValue(column),
+                              "is-range": isHeaderSearchRange(column),
+                              placeholder: getHeaderSearchPlaceholder(column),
+                              "start-placeholder": getHeaderSearchStartPlaceholder(column),
+                              "end-placeholder": getHeaderSearchEndPlaceholder(column),
+                              "range-separator": getHeaderSearchRangeSeparator(column),
+                              format: getHeaderSearchTimeFormat(column),
+                              "value-format": getHeaderSearchTimeValueFormat(column),
+                              clearable: isHeaderSearchClearable(column),
+                              teleported: false,
+                              "onUpdate:modelValue": ($event) => handleHeaderSearchPickerValue(column, $event)
+                            }, null, 8, ["model-value", "is-range", "placeholder", "start-placeholder", "end-placeholder", "range-separator", "format", "value-format", "clearable", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("input", {
+                              key: 4,
                               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, [
+                            }, null, 40, _hoisted_24)),
+                            createElementVNode("div", _hoisted_25, [
                               createVNode(_component_el_button, {
                                 link: "",
                                 type: "primary",
@@ -2121,7 +2293,7 @@ const _sfc_main$9 = defineComponent({
     };
   }
 });
-var BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-7602f302"]]);
+var BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-13040b10"]]);
 var BaseEChart_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main$8 = defineComponent({
   __name: "BaseEChart",