bkui-vue 0.0.1-beta.81 → 0.0.1-beta.84

package/dist/index.esm.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Transition, provide, inject, createTextVNode, withDirectives, vShow, isVNode, Fragment, toRefs, customRef, onBeforeMount, toRef, unref, resolveDirective, vModelText, watchEffect, onUpdated, render, onUnmounted, Teleport, withModifiers } from "vue";
+import { createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Transition, provide, inject, createTextVNode, withDirectives, vShow, isVNode, Fragment, toRefs, customRef, onBeforeMount, toRef, vModelText, resolveDirective, watchEffect, onUpdated, render, onUnmounted, Teleport, withModifiers } from "vue";
 var reset = "";
 var alert = "";
 var affix = "";
@@ -1759,7 +1759,7 @@ class BKPopover {
           if (this.isSameElement(event2.target, this.reference) || this.reference.contains(event2.target)) {
             this.show(event2);
           } else {
-            if (this.isShow && !this.isSameElement(event2.target, this.popperRefer)) {
+            if (this.isShow && !this.isSameElement(event2.target, this.popperRefer) && !this.popperRefer.contains(event2.target)) {
               this.hide();
             }
           }
@@ -8818,7 +8818,6 @@ const buttonProps = {
   loadingMode: PropTypes.commonType(Object.values(BkLoadingMode)),
   outline: PropTypes.bool,
   text: PropTypes.bool,
-  circle: PropTypes.bool,
   nativeType: {
     type: String
   }
@@ -8845,7 +8844,6 @@ var Component$v = defineComponent({
         "is-disabled": props.disabled,
         "is-outline": props.outline,
         "is-text": isText.value,
-        "is-circle": props.circle,
         [`${btnClsPrefix}-${props.size}`]: props.size && btnSizes.includes(props.size),
         "no-slot": !showSlot
       }, `${themeCls} ${btnClsPrefix} ${hoverTheme}`);
@@ -11044,11 +11042,16 @@ function useHover() {
 }
 function useRegistry(data2) {
   const register = (item) => {
-    if (!item)
+    if (!item || data2.value.find((d2) => d2 === item))
       return;
-    return data2.value.add(item);
+    return data2.value.push(item);
+  };
+  const unregister = (item) => {
+    const index = data2.value.findIndex((d2) => d2 === item);
+    if (index > -1) {
+      data2.value.splice(index, 1);
+    }
   };
-  const unregister = (item) => data2.value.delete(item);
   return {
     register,
     unregister
@@ -11064,10 +11067,15 @@ function useDebouncedRef(value, delay = 200) {
     },
     set(newValue) {
       clearTimeout(timeout);
-      timeout = setTimeout(() => {
+      if (newValue === void 0 || newValue === "") {
         innerValue = newValue;
         trigger();
-      }, delay);
+      } else {
+        timeout = setTimeout(() => {
+          innerValue = newValue;
+          trigger();
+        }, delay);
+      }
     }
   }));
 }
@@ -11097,13 +11105,19 @@ function usePopover(config) {
     showPopover
   };
 }
-function useRemoteSearch(method) {
+function useRemoteSearch(method, callBack) {
   const searchKey = useDebouncedRef("");
   const searchLoading = ref(false);
   watch(searchKey, async () => {
-    searchLoading.value = true;
-    await method(searchKey.value);
-    searchLoading.value = false;
+    try {
+      searchLoading.value = true;
+      await method(searchKey.value);
+      searchLoading.value = false;
+    } catch (err) {
+      console.error(err);
+    } finally {
+      callBack == null ? void 0 : callBack();
+    }
   });
   return {
     searchKey,
@@ -11118,8 +11132,8 @@ function toLowerCase(value = "") {
 var BkOption = defineComponent({
   name: "Option",
   props: {
-    value: PropTypes.oneOfType([String, Number, Boolean]),
-    label: PropTypes.oneOfType([String, Number]),
+    value: PropTypes.any,
+    label: PropTypes.string,
     disabled: PropTypes.bool.def(false)
   },
   setup(props) {
@@ -11130,17 +11144,25 @@ var BkOption = defineComponent({
       visible: true
     });
     const {
-      disabled
+      disabled,
+      value
     } = toRefs(props);
     const select2 = inject(selectKey, null);
     const group = inject(optionGroupKey, null);
-    const selected = computed(() => select2.selectedOptions.has(proxy));
-    const multiple = computed(() => select2 == null ? void 0 : select2.props.multiple);
+    const selected = computed(() => {
+      var _a;
+      return (_a = select2 == null ? void 0 : select2.selected) == null ? void 0 : _a.some((data2) => data2.value === value.value);
+    });
+    const multiple = computed(() => select2 == null ? void 0 : select2.multiple);
+    const isHover = computed(() => (select2 == null ? void 0 : select2.activeOptionValue) === value.value);
     const handleOptionClick = () => {
       if (disabled.value)
         return;
       select2 == null ? void 0 : select2.handleOptionSelected(proxy);
     };
+    const handleMouseEnter = () => {
+      select2.activeOptionValue = value.value;
+    };
     onBeforeMount(() => {
       select2 == null ? void 0 : select2.register(proxy);
       group == null ? void 0 : group.register(proxy);
@@ -11152,7 +11174,9 @@ var BkOption = defineComponent({
     return __spreadProps(__spreadValues({}, toRefs(states)), {
       selected,
       multiple,
-      handleOptionClick
+      isHover,
+      handleOptionClick,
+      handleMouseEnter
     });
   },
   render() {
@@ -11161,12 +11185,13 @@ var BkOption = defineComponent({
       "is-selected": this.selected,
       "is-disabled": this.disabled,
       "is-multiple": this.multiple,
-      "is-hover": false,
+      "is-hover": this.isHover,
       "bk-select-option": true
     });
     return withDirectives(createVNode("li", {
       "class": selectItemClass,
-      "onClick": this.handleOptionClick
+      "onClick": this.handleOptionClick,
+      "onMouseenter": this.handleMouseEnter
     }, [(_c = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) != null ? _c : createVNode("span", null, [this.label])]), [[vShow, this.visible]]);
   }
 });
@@ -11189,7 +11214,7 @@ var OptionGroup = defineComponent({
       groupCollapse: props.collapse,
       visible: true
     });
-    const options = ref(/* @__PURE__ */ new Set());
+    const options = ref([]);
     const {
       register,
       unregister
@@ -11709,6 +11734,85 @@ var Component$g = defineComponent({
   }
 });
 const BkTag = withInstall(Component$g);
+var SelectTagInput = defineComponent({
+  name: "SelectTagInput",
+  props: {
+    selected: {
+      type: Array,
+      default: () => []
+    },
+    tagTheme: PropTypes.theme(["success", "info", "warning", "danger"]).def(""),
+    placeholder: PropTypes.string.def(""),
+    filterable: PropTypes.bool.def(false),
+    allowCreate: PropTypes.bool.def(false),
+    modelValue: PropTypes.any
+  },
+  emits: ["update:modelValue", "remove", "focus", "enter"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      modelValue
+    } = toRefs(props);
+    const value = ref(modelValue.value);
+    const inputRef = ref();
+    watch(modelValue, () => {
+      value.value = modelValue.value;
+    });
+    const handleRemoveTag = (data2) => {
+      emit("remove", data2);
+    };
+    const handleFocus = () => {
+      emit("focus");
+    };
+    const focus = () => {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.focus();
+    };
+    const handleInput = (e) => {
+      emit("update:modelValue", e.target.value);
+    };
+    const handleKeydown = (e) => {
+      switch (e.code) {
+        case "Enter": {
+          emit("enter", e.target.value, e);
+          break;
+        }
+      }
+    };
+    return {
+      value,
+      inputRef,
+      handleRemoveTag,
+      handleFocus,
+      focus,
+      handleInput,
+      handleKeydown
+    };
+  },
+  render() {
+    var _a, _b, _c, _d;
+    return createVNode("div", {
+      "class": "bk-select-tag"
+    }, [(_b = (_a = this.$slots) == null ? void 0 : _a.prefix) == null ? void 0 : _b.call(_a), this.selected.map((data2) => createVNode(BkTag, {
+      "closable": true,
+      "theme": this.tagTheme,
+      "onClose": () => this.handleRemoveTag(data2)
+    }, {
+      default: () => [data2.label]
+    })), withDirectives(createVNode("input", {
+      "class": "bk-select-tag-input",
+      "ref": "inputRef",
+      "type": "text",
+      "placeholder": !this.selected.length ? this.placeholder : "",
+      "readonly": !this.filterable,
+      "onUpdate:modelValue": ($event) => this.value = $event,
+      "onFocus": this.handleFocus,
+      "onInput": this.handleInput,
+      "onKeydown": this.handleKeydown
+    }, null), [[vModelText, this.value]]), (_d = (_c = this.$slots) == null ? void 0 : _c.suffix) == null ? void 0 : _d.call(_c)]);
+  }
+});
 var Component$f = defineComponent({
   name: "Select",
   directives: {
@@ -11736,7 +11840,8 @@ var Component$f = defineComponent({
     loadingText: PropTypes.string.def("\u52A0\u8F7D\u4E2D..."),
     placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
     selectAllText: PropTypes.string.def("\u5168\u90E8"),
-    scrollLoading: PropTypes.bool.def(false)
+    scrollLoading: PropTypes.bool.def(false),
+    allowCreate: PropTypes.bool.def(false)
   },
   emits: ["update:modelValue", "change", "toggle", "clear", "scroll-end"],
   setup(props, {
@@ -11746,7 +11851,6 @@ var Component$f = defineComponent({
       modelValue,
       disabled,
       filterable,
-      placeholder,
       multiple,
       remoteMethod,
       loading: loading2,
@@ -11754,27 +11858,46 @@ var Component$f = defineComponent({
       noDataText,
       noMatchText,
       popoverMinWidth,
-      showOnInit
+      showOnInit,
+      multipleMode,
+      allowCreate
     } = toRefs(props);
-    const states = reactive({
-      currentPlaceholder: placeholder.value,
-      selectedOptions: /* @__PURE__ */ new Set(),
-      currentSelectedLabel: ""
-    });
     const inputRef = ref();
     const popoverRef = ref();
-    const options = ref(/* @__PURE__ */ new Set());
-    const groups = ref(/* @__PURE__ */ new Set());
+    const selectTagInputRef = ref();
+    const options = ref([]);
+    const groups = ref([]);
+    const selected = ref([]);
+    const activeOptionValue = ref();
+    const optionsMap = computed(() => {
+      const data2 = /* @__PURE__ */ new Map();
+      options.value.forEach((option) => {
+        data2.set(option.value, option);
+      });
+      return data2;
+    });
+    watch(modelValue, () => {
+      var _a;
+      handleSetSelectedData();
+      if (multipleMode.value === "tag") {
+        (_a = popoverRef.value) == null ? void 0 : _a.update();
+      }
+    });
     const isDisabled = computed(() => disabled.value || loading2.value);
-    const selectedLabel = computed(() => [...states.selectedOptions.values()].map((option) => option.label));
-    const isAllSelected = computed(() => [...options.value.values()].filter((option) => !option.disabled).every((option) => states.selectedOptions.has(option)));
-    const isGroup = computed(() => !!groups.value.size);
-    const isOptionsEmpty = computed(() => !options.value.size);
-    const isSearchEmpty = computed(() => {
-      const data2 = [...options.value.values()];
-      return data2.length && data2.every((option) => !option.visible);
-    });
-    const isRemoteSearch = computed(() => typeof remoteMethod.value === "function");
+    const selectedLabel = computed(() => selected.value.map((data2) => data2.label));
+    const isAllSelected = computed(() => {
+      const normalSelectedValues = options.value.reduce((pre, option) => {
+        if (!option.disabled) {
+          pre.push(option.value);
+        }
+        return pre;
+      }, []);
+      return normalSelectedValues.length <= selected.value.length && normalSelectedValues.every((val) => selected.value.some((data2) => data2.value === val));
+    });
+    const isGroup = computed(() => !!groups.value.length);
+    const isOptionsEmpty = computed(() => !options.value.length);
+    const isSearchEmpty = computed(() => options.value.length && options.value.every((option) => !option.visible));
+    const isRemoteSearch = computed(() => filterable.value && typeof remoteMethod.value === "function");
     const isShowSelectContent = computed(() => !(searchLoading.value || isOptionsEmpty.value || isSearchEmpty.value));
     const curContentText = computed(() => {
       if (searchLoading.value) {
@@ -11816,7 +11939,28 @@ var Component$f = defineComponent({
     } = usePopover({
       popoverMinWidth: popoverMinWidth.value
     });
+    const isInput = computed(() => (filterable.value || allowCreate.value) && isPopoverShow.value);
+    watch(isPopoverShow, (isShow) => {
+      if (!isShow) {
+        searchKey.value = "";
+      } else {
+        focus();
+        initActiveOptionValue();
+      }
+    });
+    const initActiveOptionValue = () => {
+      var _a, _b;
+      const firstValue = (_a = selected.value[0]) == null ? void 0 : _a.value;
+      const option = optionsMap.value.get(firstValue);
+      if (option && !option.disabled && option.visible) {
+        activeOptionValue.value = firstValue;
+      } else {
+        activeOptionValue.value = (_b = options.value.find((option2) => !option2.disabled && option2.visible)) == null ? void 0 : _b.value;
+      }
+    };
     const defaultSearchMethod = (value) => {
+      if (!filterable.value)
+        return;
       options.value.forEach((option) => {
         var _a;
         option.visible = (_a = toLowerCase(String(option.label))) == null ? void 0 : _a.includes(toLowerCase(value));
@@ -11825,21 +11969,7 @@ var Component$f = defineComponent({
     const {
       searchKey,
       searchLoading
-    } = useRemoteSearch(isRemoteSearch.value ? remoteMethod.value : defaultSearchMethod);
-    const handleResetInputValue = () => {
-      const label = selectedLabel.value.join(",");
-      if (filterable.value && isPopoverShow.value) {
-        states.currentPlaceholder = label || placeholder.value;
-        states.currentSelectedLabel = "";
-      } else {
-        states.currentPlaceholder = placeholder.value;
-        states.currentSelectedLabel = label;
-        searchKey.value = "";
-      }
-    };
-    watch(isPopoverShow, () => {
-      handleResetInputValue();
-    });
+    } = useRemoteSearch(isRemoteSearch.value ? remoteMethod.value : defaultSearchMethod, initActiveOptionValue);
     const emitChange = (val) => {
       if (val === modelValue.value)
         return;
@@ -11852,52 +11982,88 @@ var Component$f = defineComponent({
       togglePopover();
       emit("toggle", isPopoverShow.value);
     };
-    const handleInput = (e) => {
-      searchKey.value = e.target.value;
+    const handleInputChange = (value) => {
+      if (!filterable.value)
+        return;
+      searchKey.value = value;
     };
-    const selectedCallback = () => {
-      inputRef.value.focus();
-      popoverRef.value.update();
-      !searchKey.value && handleResetInputValue();
+    const handleInputEnter = (value, e) => {
+      if (!allowCreate.value || !value || filterable.value && options.value.find((data3) => toLowerCase(data3.label) === toLowerCase(value)))
+        return;
+      const data2 = optionsMap.value.get(value);
+      if (data2)
+        return;
+      e.stopPropagation();
+      if (multiple.value) {
+        selected.value.push({
+          label: value,
+          value
+        });
+        emitChange(selected.value.map((data3) => data3.value));
+      } else {
+        selected.value = [{
+          label: value,
+          value
+        }];
+        emitChange(value);
+        hidePopover();
+      }
+      searchKey.value = "";
     };
     const handleOptionSelected = (option) => {
       if (isDisabled.value || !option)
         return;
       if (multiple.value) {
-        if (states.selectedOptions.has(option)) {
-          states.selectedOptions.delete(option);
+        const index = selected.value.findIndex((data2) => data2.value === option.value);
+        if (index > -1) {
+          selected.value.splice(index, 1);
         } else {
-          states.selectedOptions.add(option);
+          selected.value.push({
+            label: option.label,
+            value: option.value
+          });
         }
-        emitChange([...states.selectedOptions.values()].map((option2) => option2.value));
+        emitChange(selected.value.map((data2) => data2.value));
       } else {
-        states.selectedOptions.clear();
-        states.selectedOptions.add(option);
+        selected.value = [{
+          label: option.label,
+          value: option.value
+        }];
         emitChange(option.value);
         hidePopover();
       }
-      selectedCallback();
+      focus();
+    };
+    const focus = () => {
+      var _a, _b;
+      if (multipleMode.value === "tag") {
+        (_a = selectTagInputRef.value) == null ? void 0 : _a.focus();
+      } else {
+        (_b = inputRef.value) == null ? void 0 : _b.focus();
+      }
     };
     const handleClear = (e) => {
       e.stopPropagation();
-      states.selectedOptions.clear();
-      hidePopover();
-      handleResetInputValue();
+      selected.value = [];
       emitChange(multiple.value ? [] : "");
       emit("clear", multiple.value ? [] : "");
+      hidePopover();
     };
     const handleToggleAll = () => {
       if (isAllSelected.value) {
-        states.selectedOptions.clear();
+        selected.value = [];
       } else {
         options.value.forEach((option) => {
-          if (option.disabled || states.selectedOptions.has(option))
+          if (option.disabled || selected.value.find((data2) => data2.value === option.value))
             return;
-          states.selectedOptions.add(option);
+          selected.value.push({
+            label: option.label,
+            value: option.value
+          });
         });
       }
-      selectedCallback();
-      emitChange([...states.selectedOptions.values()].map((option) => option.value));
+      emitChange(selected.value.map((data2) => data2.value));
+      focus();
     };
     const handleScroll = (e) => {
       const {
@@ -11909,13 +12075,75 @@ var Component$f = defineComponent({
         emit("scroll-end");
       }
     };
+    const handleDeleteTag = (data2) => {
+      const index = selected.value.findIndex((select2) => select2.value === data2.value);
+      if (index > -1) {
+        selected.value.splice(index, 1);
+        emitChange(selected.value.map((select2) => select2.value));
+      }
+    };
+    const handleGetLabelByValue = (val) => {
+      var _a, _b, _c;
+      return ((_b = (_a = optionsMap.value) == null ? void 0 : _a.get(val)) == null ? void 0 : _b.label) || ((_c = selected.value.find((data2) => data2.value === val)) == null ? void 0 : _c.label) || val;
+    };
+    const handleSetSelectedData = () => {
+      if (Array.isArray(modelValue.value)) {
+        selected.value = modelValue.value.map((val) => ({
+          label: handleGetLabelByValue(val),
+          value: val
+        }));
+      } else if (modelValue.value !== void 0) {
+        selected.value = [{
+          label: handleGetLabelByValue(modelValue.value),
+          value: modelValue.value
+        }];
+      }
+    };
+    const handleKeydown = (e) => {
+      var _a, _b;
+      const availableOptions = options.value.filter((option) => !option.disabled && option.visible);
+      const index = availableOptions.findIndex((option) => option.value === activeOptionValue.value);
+      if (!availableOptions.length || index === -1)
+        return;
+      switch (e.code) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const nextIndex = index >= availableOptions.length - 1 ? 0 : index + 1;
+          activeOptionValue.value = (_a = availableOptions[nextIndex]) == null ? void 0 : _a.value;
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const preIndex = index === 0 ? availableOptions.length - 1 : index - 1;
+          activeOptionValue.value = (_b = availableOptions[preIndex]) == null ? void 0 : _b.value;
+          break;
+        }
+        case "Backspace": {
+          if (!multiple.value || !selected.value.length || searchKey.value.length)
+            return;
+          selected.value.pop();
+          emitChange(selected.value.map((data2) => data2.value));
+          break;
+        }
+        case "Enter": {
+          if (!isPopoverShow.value) {
+            isPopoverShow.value = true;
+          } else {
+            const option = options.value.find((option2) => option2.value === activeOptionValue.value);
+            handleOptionSelected(option);
+          }
+          break;
+        }
+      }
+    };
     const handleClickOutside = () => {
       hidePopover();
       handleBlur();
     };
     provide(selectKey, reactive({
-      props,
-      selectedOptions: unref(states.selectedOptions),
+      multiple,
+      selected,
+      activeOptionValue,
       register,
       unregister,
       registerGroup,
@@ -11923,18 +12151,14 @@ var Component$f = defineComponent({
       handleOptionSelected
     }));
     onMounted(() => {
-      const initializeValue = Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value];
-      options.value.forEach((option) => {
-        if (initializeValue.includes(option.value)) {
-          states.selectedOptions.add(option);
-        }
-      });
-      handleResetInputValue();
+      handleSetSelectedData();
       setTimeout(() => {
         showOnInit.value && showPopover();
       });
     });
-    return __spreadProps(__spreadValues({}, toRefs(states)), {
+    return {
+      selected,
+      isInput,
       options,
       isDisabled,
       selectedLabel,
@@ -11943,6 +12167,7 @@ var Component$f = defineComponent({
       popperWidth,
       popoverRef,
       inputRef,
+      selectTagInputRef,
       searchLoading,
       isOptionsEmpty,
       isSearchEmpty,
@@ -11954,7 +12179,6 @@ var Component$f = defineComponent({
       setHover,
       cancelHover,
       handleFocus,
-      handleInput,
       handleTogglePopover,
       handleClear,
       onPopoverFirstUpdate,
@@ -11963,8 +12187,12 @@ var Component$f = defineComponent({
       handleToggleAll,
       handleOptionSelected,
       handleClickOutside,
-      handleScroll
-    });
+      handleScroll,
+      handleDeleteTag,
+      handleInputChange,
+      handleInputEnter,
+      handleKeydown
+    };
   },
   render() {
     const selectClass = classes({
@@ -11982,73 +12210,73 @@ var Component$f = defineComponent({
         offset: [0, 4]
       }
     }];
-    const renderSelectTrigger = () => {
-      var _a, _b;
-      const suffixIcon = () => {
-        if (this.loading) {
-          return createVNode(BkLoading, {
-            "loading": true,
-            "class": "spinner",
-            "mode": "spin",
-            "size": "mini"
-          }, null);
-        }
-        if (this.clearable && this.isHover) {
-          return createVNode(close$1, {
-            "class": "clear-icon",
-            "onClick": this.handleClear
-          }, null);
-        }
-        return createVNode(angleUp, {
-          "class": "angle-up"
+    const suffixIcon = () => {
+      if (this.loading) {
+        return createVNode(BkLoading, {
+          "loading": true,
+          "class": "spinner",
+          "mode": "spin",
+          "size": "mini"
         }, null);
-      };
-      const renderTriggerInput = () => {
-        if (this.multipleMode === "tag") {
-          return createVNode("div", {
-            "class": "bk-select-tag"
-          }, [[...this.selectedOptions.values()].map((option) => createVNode(BkTag, {
-            "closable": true,
-            "style": {
-              marginTop: "3px"
-            },
-            "theme": this.tagTheme,
-            "onClose": () => this.handleOptionSelected(option)
-          }, {
-            default: () => [option.label]
-          })), withDirectives(createVNode("input", {
-            "class": "bk-select-tag-input",
-            "ref": "inputRef",
-            "type": "text",
-            "placeholder": !this.selectedOptions.size ? this.placeholder : "",
-            "readonly": !this.filterable || !this.isPopoverShow,
-            "onUpdate:modelValue": ($event) => this.searchKey = $event,
-            "onFocus": this.handleFocus
-          }, null), [[vModelText, this.searchKey]])]);
-        }
-        return withDirectives(createVNode("input", {
-          "ref": "inputRef",
-          "type": "text",
-          "class": "bk-select-input",
-          "style": {
-            paddingLeft: this.$slots.prefixIcon ? "20px" : "10px"
-          },
-          "onUpdate:modelValue": ($event) => this.currentSelectedLabel = $event,
-          "placeholder": this.currentPlaceholder,
-          "readonly": !this.filterable || !this.isPopoverShow,
+      }
+      if (this.clearable && this.isHover && this.selected.length) {
+        return createVNode(close$1, {
+          "class": "clear-icon",
+          "onClick": this.handleClear
+        }, null);
+      }
+      return createVNode(angleUp, {
+        "class": "angle-up"
+      }, null);
+    };
+    const renderTriggerInput = () => {
+      if (this.multipleMode === "tag") {
+        return createVNode(SelectTagInput, {
+          "ref": "selectTagInputRef",
+          "modelValue": this.searchKey,
+          "onUpdate:modelValue": ($event) => this.searchKey = $event,
+          "selected": this.selected,
+          "tagTheme": this.tagTheme,
+          "placeholder": this.placeholder,
+          "filterable": this.isInput,
           "onFocus": this.handleFocus,
-          "onInput": this.handleInput
-        }, null), [[vModelText, this.currentSelectedLabel]]);
-      };
-      return createVNode("div", {
-        "class": "bk-select-trigger",
-        "onClick": this.handleTogglePopover,
-        "onMouseenter": this.setHover,
-        "onMouseleave": this.cancelHover
-      }, [this.$slots.prefixIcon ? createVNode("span", {
-        "class": "bk-select-prefix"
-      }, [(_b = (_a = this.$slots).prefixIcon) == null ? void 0 : _b.call(_a)]) : null, renderTriggerInput(), suffixIcon()]);
+          "onRemove": this.handleDeleteTag,
+          "onEnter": this.handleInputEnter
+        }, {
+          prefix: () => {
+            var _a, _b;
+            return (_b = (_a = this.$slots).prefix) == null ? void 0 : _b.call(_a);
+          },
+          suffix: () => suffixIcon()
+        });
+      }
+      return createVNode(BkInput, {
+        "ref": "inputRef",
+        "type": "text",
+        "modelValue": this.isInput ? this.searchKey : this.selectedLabel.join(","),
+        "placeholder": this.isInput ? this.selectedLabel.join(",") || this.placeholder : this.placeholder,
+        "readonly": !this.isInput,
+        "disabled": this.isDisabled,
+        "behavior": this.behavior,
+        "size": this.size,
+        "onFocus": this.handleFocus,
+        "onInput": this.handleInputChange,
+        "onEnter": this.handleInputEnter
+      }, {
+        prefix: () => {
+          var _a, _b;
+          return (_b = (_a = this.$slots).prefix) == null ? void 0 : _b.call(_a);
+        },
+        suffix: () => suffixIcon()
+      });
     };
+    const renderSelectTrigger = () => createVNode("div", {
+      "class": "bk-select-trigger",
+      "onClick": this.handleTogglePopover,
+      "onMouseenter": this.setHover,
+      "onMouseleave": this.cancelHover,
+      "onKeydown": this.handleKeydown
+    }, [renderTriggerInput()]);
     const renderSelectContent = () => {
       var _a, _b;
       return createVNode("div", null, [!this.isShowSelectContent && createVNode("div", {
@@ -12068,7 +12296,7 @@ var Component$f = defineComponent({
         "onScroll": this.handleScroll
       }, [withDirectives(createVNode("ul", {
         "class": "bk-select-options"
-      }, [this.multiple && this.showSelectAll && !this.searchKey && createVNode("li", {
+      }, [this.multiple && this.showSelectAll && (!this.searchKey || !this.filterable) && createVNode("li", {
         "class": "bk-select-option",
         "onClick": this.handleToggleAll
       }, [this.selectAllText]), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a), this.scrollLoading && createVNode("li", {
@@ -12815,12 +13043,33 @@ const resolveColumnWidth = (root, colgroups, autoWidth = 20) => {
   } = root.getBoundingClientRect() || {};
   let avgWidth = width - 4;
   const avgColIndexList = [];
+  const getMinWidth = (col, computedWidth) => {
+    const {
+      minWidth = void 0
+    } = col;
+    if (minWidth === void 0) {
+      return computedWidth;
+    }
+    let calcMinWidth = computedWidth;
+    if (/^\d+\.?\d*$/.test(`${minWidth}`)) {
+      calcMinWidth = Number(minWidth);
+    }
+    if (/^\d+\.?\d*%$/.test(`${minWidth}`)) {
+      calcMinWidth = Number(minWidth) * width / 100;
+    }
+    if (/^\d+\.?\d*px$/i.test(`${minWidth}`)) {
+      calcMinWidth = Number(`${minWidth}`.replace(/px/i, ""));
+    }
+    return calcMinWidth;
+  };
   const resolveColNumberWidth = (col, numWidth, resetAvgWidth = true) => {
+    const minWidth = getMinWidth(col, numWidth);
+    const computedWidth = numWidth < minWidth ? minWidth : numWidth;
     Object.assign(col, {
-      calcWidth: numWidth
+      calcWidth: computedWidth
     });
     if (resetAvgWidth) {
-      avgWidth = avgWidth - numWidth;
+      avgWidth = avgWidth - computedWidth;
       if (avgWidth < 0) {
         avgWidth = 0;
       }
@@ -13210,6 +13459,7 @@ const tableProps = {
     field: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
     render: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
     width: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]),
+    minWidth: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]).def(),
     type: PropTypes.commonType(["selection", "index", "expand", "none"], "columnType").def("none"),
     resizable: PropTypes.bool.def(true),
     fixed: PropTypes.oneOfType([
@@ -13232,7 +13482,7 @@ const tableProps = {
       PropTypes.bool,
       PropTypes.string
     ]).def(false)
-  })),
+  })).def([]),
   activeColumn: PropTypes.oneOfType([PropTypes.number.def(-1), PropTypes.arrayOf(PropTypes.number.def(-1))]),
   columnPick: PropTypes.commonType(["multi", "single", "disabled"], "columnPick").def("disabled"),
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def("auto"),
@@ -13306,7 +13556,7 @@ var useLimit = () => {
       "disabled": proxy.disabled
     }, _isSlot$2(_slot = proxy.limitList.map((num, index) => createVNode(BkOption, {
       "value": num,
-      "label": num,
+      "label": `${num}`,
       "key": `${index}_${num}`
     }, null))) ? _slot : {
       default: () => [_slot]
@@ -14131,6 +14381,14 @@ class TableRender {
     }, [this.renderColGroup(), this.renderHeader()])];
   }
   renderTableBodySchema(rows) {
+    var _a, _b, _c;
+    if (!rows.length) {
+      return (_c = (_b = (_a = this.context.slots).empty) == null ? void 0 : _b.call(_a)) != null ? _c : createVNode(BodyEmpty, {
+        "filterList": rows,
+        "list": this.props.data,
+        "emptyText": this.props.emptyText
+      }, null);
+    }
     return createVNode("table", {
       "cellpadding": 0,
       "cellspacing": 0
@@ -14276,11 +14534,10 @@ class TableRender {
     }, [renderHeadCell(column, index)])]))])]);
   }
   renderTBody(rows) {
-    var _a, _b, _c;
     const {
       getFixedColumnStyleResolve
     } = useFixedColumn(this.props, this.colgroups);
-    return createVNode("tbody", null, [rows.length ? rows.map((row, rowIndex) => {
+    return createVNode("tbody", null, [rows.map((row, rowIndex) => {
       const rowStyle = {
         "--row-height": `${this.getRowHeight(row, rowIndex)}px`
       };
@@ -14300,14 +14557,7 @@ class TableRender {
       }, [createVNode("div", {
         "class": "cell"
       }, [this.renderCell(row, column, rowIndex, rows)])]))]);
-    }) : createVNode("tr", null, [createVNode("td", {
-      "colspan": this.props.columns.length,
-      "class": "empty-cell"
-    }, [(_c = (_b = (_a = this.context.slots).empty) == null ? void 0 : _b.call(_a)) != null ? _c : createVNode(BodyEmpty, {
-      "filterList": rows,
-      "list": this.props.data,
-      "emptyText": this.props.emptyText
-    }, null)])])]);
+    })]);
   }
   handleRowClick(e, row, index, rows) {
     this.context.emit("rowClick", e, row, index, rows, this);
@@ -14344,7 +14594,7 @@ class TableRender {
     return this.reactiveProp.setting;
   }
 }
-const useClass = (props, root, reactiveProp) => {
+const useClass = (props, root, reactiveProp, pageData) => {
   const autoHeight = ref(200);
   const hasScrollY = ref(false);
   const hasFooter = computed(() => props.pagination && props.data.length);
@@ -14363,9 +14613,9 @@ const useClass = (props, root, reactiveProp) => {
     "--scroll-head-left": `-${reactiveProp.scrollTranslateX}px`,
     "--scroll-left": `${reactiveProp.scrollTranslateX}px`
   }));
-  const contentClass = classes({
+  const contentClass = {
     [resolveClassName("table-body")]: true
-  });
+  };
   const footerClass = computed(() => classes({
     [resolveClassName("table-footer")]: true,
     ["is-hidden"]: !props.pagination || !props.data.length
@@ -14399,7 +14649,7 @@ const useClass = (props, root, reactiveProp) => {
     const maxHeight = resolveMaxHeight - resolveHeadHeight - resolveFooterHeight;
     const minHeight = resolveMinHeight - resolveHeadHeight - resolveFooterHeight;
     Object.assign(contentStyle, {
-      display: "block",
+      display: (pageData == null ? void 0 : pageData.length) ? "block" : false,
       "max-height": `${maxHeight}px`,
       "min-height": `${minHeight}px`,
       height
@@ -14439,7 +14689,8 @@ var Component$9 = defineComponent({
   props: tableProps,
   emits: EMIT_EVENT_TYPES,
   setup(props, ctx) {
-    const colgroups = reactive(props.columns.map((col) => __spreadProps(__spreadValues({}, col), {
+    var _a;
+    const colgroups = reactive(((_a = props.columns) != null ? _a : []).map((col) => __spreadProps(__spreadValues({}, col), {
       calcWidth: null,
       resizeWidth: null,
       listeners: /* @__PURE__ */ new Map()
@@ -14484,7 +14735,7 @@ var Component$9 = defineComponent({
       updateBorderClass,
       resetTableHeight,
       hasFooter
-    } = useClass(props, root, reactiveProp);
+    } = useClass(props, root, reactiveProp, pageData);
     const {
       renderFixedColumns,
       fixedWrapperClass
@@ -14533,14 +14784,14 @@ var Component$9 = defineComponent({
         index
       });
     }).on(EVENTS$1.ON_SETTING_CHANGE, (args) => {
-      var _a, _b;
+      var _a2, _b;
       const {
         checked = [],
         size,
         height
       } = args;
       checked.length && resolveColumnWidth(root.value, colgroups, 20);
-      (_b = (_a = refVirtualRender.value) == null ? void 0 : _a.reset) == null ? void 0 : _b.call(_a);
+      (_b = (_a2 = refVirtualRender.value) == null ? void 0 : _a2.reset) == null ? void 0 : _b.call(_a2);
       ctx.emit(EMITEVENTS.SETTING_CHANGE, {
         checked,
         size,
@@ -14561,6 +14812,9 @@ var Component$9 = defineComponent({
     onMounted(() => {
       observerIns = observerResize(root.value, () => {
         resolveColumnWidth(root.value, colgroups, 20);
+        if (props.height === "100%") {
+          resetTableHeight(root.value);
+        }
       }, 60, true);
       observerIns.start();
     });
@@ -14572,6 +14826,13 @@ var Component$9 = defineComponent({
     ctx.expose({
       plugins: tableRender.plugins
     });
+    const tableBodyClass = __spreadProps(__spreadValues({}, contentClass), {
+      "__is-empty": !pageData.length
+    });
+    const tableBodyContentClass = {
+      [resolveClassName("table-body-content")]: true,
+      "with-virtual-render": props.virtualEnabled
+    };
     return () => createVNode("div", {
       "class": tableClass.value,
       "style": wrapperStyle.value,
@@ -14584,9 +14845,10 @@ var Component$9 = defineComponent({
       createVNode(BkVirtualRender, {
         "ref": refVirtualRender,
         "lineHeight": tableRender.getRowHeight,
-        "class": contentClass,
+        "class": tableBodyClass,
         "style": contentStyle,
         "list": pageData,
+        "contentClassName": tableBodyContentClass,
         "onContentScroll": handleScrollChanged,
         "throttleDelay": 0,
         "scrollEvent": true,
@@ -15117,12 +15379,12 @@ var Component$8 = defineComponent({
       e == null ? void 0 : e.stopPropagation();
       removeTag(data2, index);
       clearInput();
-      handleChange("remove");
+      handleChange("remove", data2);
       tagInputRef.value.style.width = `${INPUT_MIN_WIDTH}px`;
     };
-    const handleChange = (type) => {
+    const handleChange = (type, data2) => {
       emit("change", tagList.value);
-      emit(type);
+      emit(type, data2);
       emit("update:modelValue", tagList.value);
     };
     const handleClear = (e) => {
@@ -15458,54 +15720,57 @@ var Component$8 = defineComponent({
       "isShow": this.popoverProps.isShow,
       "modifiers": this.popoverProps.modifiers
     }, {
-      default: () => createVNode("div", {
-        "class": this.triggerClass
-      }, [createVNode("ul", {
-        "class": "tag-list",
-        "ref": "tagListRef",
-        "style": {
-          marginLeft: `${this.leftSpace}px`
-        }
-      }, [this.selectedTagList.map((item, index) => {
-        const tooltips2 = {
-          boundary: "window",
-          theme: "light",
-          distance: 12,
-          content: item[this.tooltipKey],
-          disabled: !this.tooltipKey
-        };
-        return withDirectives(createVNode("li", {
-          "class": "tag-item",
-          "onClick": this.tagFocus
-        }, [createVNode(TagRender, {
-          "node": item,
-          "tpl": this.tagTpl,
-          "displayKey": this.displayKey
-        }, null), this.showTagClose ? createVNode(error, {
-          "class": "remove-tag",
-          "onClick": this.handleTagRemove.bind(this, item, index)
-        }, null) : null]), [[resolveDirective("bk-tooltips"), tooltips2]]);
-      }), withDirectives(createVNode("li", {
-        "ref": "tagInputItemRef",
-        "id": "tagInputItem",
-        "class": "tag-input-item",
-        "role": "input"
-      }, [withDirectives(createVNode("input", {
-        "type": "text",
-        "class": "tag-input",
-        "ref": "tagInputRef",
-        "onUpdate:modelValue": ($event) => this.curInputValue = $event,
-        "onInput": this.handleInput,
-        "onFocus": this.handleFocus,
-        "onBlur": this.handleBlur,
-        "onKeydown": this.handleKeydown,
-        "onPaste": this.handlePaste
-      }, null), [[vModelText, this.curInputValue]])]), [[vShow, this.isEdit]])]), withDirectives(createVNode("p", {
-        "class": "placeholder"
-      }, [this.placeholder]), [[vShow, this.isShowPlaceholder]]), this.isShowClear ? createVNode(close$1, {
-        "class": "clear-icon",
-        "onClick": this.handleClear
-      }, null) : null]),
+      default: () => {
+        var _a, _b, _c;
+        return createVNode("div", {
+          "class": this.triggerClass
+        }, [createVNode("ul", {
+          "class": "tag-list",
+          "ref": "tagListRef",
+          "style": {
+            marginLeft: `${this.leftSpace}px`
+          }
+        }, [this.selectedTagList.map((item, index) => {
+          const tooltips2 = {
+            boundary: "window",
+            theme: "light",
+            distance: 12,
+            content: item[this.tooltipKey],
+            disabled: !this.tooltipKey
+          };
+          return withDirectives(createVNode("li", {
+            "class": "tag-item",
+            "onClick": this.tagFocus
+          }, [createVNode(TagRender, {
+            "node": item,
+            "tpl": this.tagTpl,
+            "displayKey": this.displayKey
+          }, null), this.showTagClose ? createVNode(error, {
+            "class": "remove-tag",
+            "onClick": this.handleTagRemove.bind(this, item, index)
+          }, null) : null]), [[resolveDirective("bk-tooltips"), tooltips2]]);
+        }), withDirectives(createVNode("li", {
+          "ref": "tagInputItemRef",
+          "id": "tagInputItem",
+          "class": "tag-input-item",
+          "role": "input"
+        }, [withDirectives(createVNode("input", {
+          "type": "text",
+          "class": "tag-input",
+          "ref": "tagInputRef",
+          "onUpdate:modelValue": ($event) => this.curInputValue = $event,
+          "onInput": this.handleInput,
+          "onFocus": this.handleFocus,
+          "onBlur": this.handleBlur,
+          "onKeydown": this.handleKeydown,
+          "onPaste": this.handlePaste
+        }, null), [[vModelText, this.curInputValue]])]), [[vShow, this.isEdit]])]), withDirectives(createVNode("p", {
+          "class": "placeholder"
+        }, [this.placeholder]), [[vShow, this.isShowPlaceholder]]), (_c = (_b = (_a = this.$slots) == null ? void 0 : _a.suffix) == null ? void 0 : _b.call(_a)) != null ? _c : this.isShowClear && createVNode(close$1, {
+          "class": "clear-icon",
+          "onClick": this.handleClear
+        }, null)]);
+      },
       content: () => createVNode("div", {
         "class": "bk-selector-list"
       }, [createVNode("ul", {
@@ -21080,9 +21345,7 @@ var Component$4 = defineComponent({
       };
       return this.$slots[dirct] ? createVNode("div", {
         "class": "slot-header"
-      }, [createVNode("div", {
-        "class": "slot-content"
-      }, [this.$slots[dirct]()])]) : createVNode("div", {
+      }, [this.$slots[dirct]()]) : createVNode("div", {
         "class": "header"
       }, [`${titleText}\uFF08\u5171${this.dataList.length}\u6761\uFF09`, createVNode("span", {
         "class": {
@@ -22095,7 +22358,19 @@ var useTreeInit = (props) => {
       }
       return uid || item[NODE_ATTRIBUTES.UUID] || uuid_1.v4();
     }
+    const cachedDefaultVal = {
+      [NODE_ATTRIBUTES.IS_OPEN]: () => false,
+      [NODE_ATTRIBUTES.IS_CHECKED]: () => false,
+      [NODE_ATTRIBUTES.IS_MATCH]: () => true,
+      [NODE_ATTRIBUTES.IS_SELECTED]: (uuid2) => props2.selected === uuid2,
+      [NODE_ATTRIBUTES.IS_CACHED]: () => false,
+      [NODE_ATTRIBUTES.IS_ASYNC]: () => null
+    };
     function getCachedTreeNodeAttr(uuid2, node, cachedAttr, defVal = void 0) {
+      let defaultValue = defVal;
+      if (defVal === void 0 && typeof cachedDefaultVal[cachedAttr] === "function") {
+        defaultValue = cachedDefaultVal[cachedAttr](uuid2, node);
+      }
       const sourceAttr = NODE_SOURCE_ATTRS[cachedAttr];
       if (Object.prototype.hasOwnProperty.call(node, sourceAttr)) {
         return node[sourceAttr];
@@ -22106,27 +22381,15 @@ var useTreeInit = (props) => {
         result = cached[cachedAttr];
       }
       if (result === void 0 || result === null) {
-        result = defVal;
+        result = defaultValue;
       }
       return result;
     }
-    function isCachedTreeNodeOpened(uuid2, node) {
-      return getCachedTreeNodeAttr(uuid2, node, NODE_ATTRIBUTES.IS_OPEN, false);
-    }
-    function isCachedTreeNodeChecked(uuid2, node) {
-      return getCachedTreeNodeAttr(uuid2, node, NODE_ATTRIBUTES.IS_CHECKED, false);
-    }
-    function isCachedTreeNodeMatch(uuid2, node) {
-      return getCachedTreeNodeAttr(uuid2, node, NODE_ATTRIBUTES.IS_MATCH, true);
-    }
     function isCachedTreeNodeSelected(uuid2, node) {
-      return getCachedTreeNodeAttr(uuid2, node, NODE_ATTRIBUTES.IS_SELECTED, false);
-    }
-    function isCachedTreeNodeHasCached(uuid2, node) {
-      return getCachedTreeNodeAttr(uuid2, node, NODE_ATTRIBUTES.IS_CACHED, false);
-    }
-    function isCachedTreeNodeAsync(uuid2, node) {
-      return getCachedTreeNodeAttr(uuid2, node, NODE_ATTRIBUTES.IS_ASYNC, null);
+      if (!props2.selectable) {
+        return false;
+      }
+      return getCachedTreeNodeAttr(uuid2, node, NODE_ATTRIBUTES.IS_SELECTED, props2.selected === uuid2);
     }
     function isCachedTreeNodeLoading(uuid2, node) {
       if (Object.prototype.hasOwnProperty.call(node, NODE_ATTRIBUTES.IS_LOADING)) {
@@ -22157,12 +22420,12 @@ var useTreeInit = (props) => {
               [NODE_ATTRIBUTES.PATH]: currentPath,
               [NODE_ATTRIBUTES.IS_ROOT]: parent === null,
               [NODE_ATTRIBUTES.ORDER]: order2,
-              [NODE_ATTRIBUTES.IS_SELECTED]: props2.selectable ? isCachedTreeNodeSelected(uuid2, item) : false,
-              [NODE_ATTRIBUTES.IS_MATCH]: isCachedTreeNodeMatch(uuid2, item),
-              [NODE_ATTRIBUTES.IS_OPEN]: isCachedTreeNodeOpened(uuid2, item),
-              [NODE_ATTRIBUTES.IS_CHECKED]: isCachedTreeNodeChecked(uuid2, item),
-              [NODE_ATTRIBUTES.IS_CACHED]: isCachedTreeNodeHasCached(uuid2, item),
-              [NODE_ATTRIBUTES.IS_ASYNC]: isCachedTreeNodeAsync(uuid2, item),
+              [NODE_ATTRIBUTES.IS_SELECTED]: isCachedTreeNodeSelected(uuid2, item),
+              [NODE_ATTRIBUTES.IS_MATCH]: getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_MATCH),
+              [NODE_ATTRIBUTES.IS_OPEN]: getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_OPEN),
+              [NODE_ATTRIBUTES.IS_CHECKED]: getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_CHECKED),
+              [NODE_ATTRIBUTES.IS_CACHED]: getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_CACHED),
+              [NODE_ATTRIBUTES.IS_ASYNC]: getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_ASYNC),
               [NODE_ATTRIBUTES.IS_LOADING]: isCachedTreeNodeLoading(uuid2, item),
               [children]: null
             };