bkui-vue 0.0.1-beta.155 → 0.0.1-beta.158

package/dist/index.esm.js

@@ -7320,6 +7320,7 @@ var lodash = { exports: {} };
     }
   }).call(commonjsGlobal);
 })(lodash, lodash.exports);
+var _$1 = lodash.exports;
 const lowerStr = "abcdefghijklmnopqrstuvwxyz0123456789";
 const random = (n2, str = lowerStr) => {
   let result = "";
@@ -7905,6 +7906,34 @@ const formKey = Symbol("form");
 const formItemKey = Symbol("formItem");
 const useForm = () => inject(formKey);
 const useFormItem = () => inject(formItemKey, EMPTY_OBJ);
+const on$2 = (() => {
+  if (document.addEventListener) {
+    return (element, event, handler) => {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, true);
+      }
+    };
+  }
+  return (element, event, handler) => {
+    if (element && event && handler) {
+      element.attachEvent(`on${event}`, handler);
+    }
+  };
+})();
+const off$2 = (() => {
+  if (document.removeEventListener) {
+    return (element, event, handler) => {
+      if (element && event) {
+        element.removeEventListener(event, handler, true);
+      }
+    };
+  }
+  return (element, event, handler) => {
+    if (element && event) {
+      element.detachEvent(`on${event}`, handler);
+    }
+  };
+})();
 function classes(dynamicCls, constCls = "") {
   return Object.entries(dynamicCls).filter((entry) => entry[1]).map((entry) => entry[0]).join(" ").concat(constCls ? ` ${constCls}` : "");
 }
@@ -9205,7 +9234,8 @@ const inputType = {
   modelValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   size: PropTypes.size(),
   rows: PropTypes.number,
-  selectReadonly: PropTypes.bool.def(false)
+  selectReadonly: PropTypes.bool.def(false),
+  withValidate: PropTypes.bool.def(true)
 };
 let EVENTS$2;
 (function(EVENTS2) {
@@ -9305,6 +9335,12 @@ var Component$x = defineComponent({
     const decControlCls = computed(() => classes({
       "is-disabled": props2.disabled || props2.modelValue <= props2.min
     }));
+    watch(() => props2.modelValue, () => {
+      var _a2;
+      if (props2.withValidate) {
+        (_a2 = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a2.call(formItem, "change");
+      }
+    });
     ctx.expose({
       focus() {
         inputRef.value.focus();
@@ -9312,14 +9348,12 @@ var Component$x = defineComponent({
       clear
     });
     function clear() {
-      var _a2;
       if (props2.disabled)
         return;
       const resetVal = isNumberInput.value ? props2.min : "";
       ctx.emit(EVENTS$2.UPDATE, resetVal);
       ctx.emit(EVENTS$2.CHANGE, resetVal);
       ctx.emit(EVENTS$2.CLEAR);
-      (_a2 = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a2.call(formItem, "change");
     }
     function handleFocus(e) {
       isFocused.value = true;
@@ -9338,7 +9372,6 @@ var Component$x = defineComponent({
     }
     function eventHandler(eventName) {
       return (e) => {
-        var _a2;
         e.stopPropagation();
         if (eventName === EVENTS$2.KEYDOWN && (e.code === "Enter" || e.key === "Enter" || e.keyCode === 13)) {
           ctx.emit(EVENTS$2.ENTER, e.target.value, e);
@@ -9349,9 +9382,6 @@ var Component$x = defineComponent({
           ctx.emit(EVENTS$2.UPDATE, isNumberInput.value ? +e.target.value : e.target.value);
         }
         ctx.emit(eventName, e.target.value, e);
-        if (eventName === EVENTS$2.INPUT) {
-          (_a2 = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a2.call(formItem, "change");
-        }
       };
     }
     const [handleKeyup, handleKeydown, handleKeyPress, handlePaste, handleChange, handleInput] = [EVENTS$2.KEYUP, EVENTS$2.KEYDOWN, EVENTS$2.KEYPRESS, EVENTS$2.PASTE, EVENTS$2.CHANGE, EVENTS$2.INPUT].map(eventHandler);
@@ -9580,7 +9610,6 @@ const useCheckbox = () => {
     props: props2,
     emit
   } = currentInstance;
-  const formItem = useFormItem();
   const checkboxGroup = inject(checkboxGroupKey, EMPTY_OBJ);
   const isGroup = !isEmptyObj(checkboxGroup);
   const isChecked = ref(props2.checked);
@@ -9610,7 +9639,6 @@ const useCheckbox = () => {
     isChecked.value = value;
   };
   const handleChange = (event) => {
-    var _a;
     if (isDisabled.value) {
       return;
     }
@@ -9622,7 +9650,6 @@ const useCheckbox = () => {
     if (isGroup) {
       checkboxGroup.handleChange();
     }
-    (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
     nextTick(() => {
       if ($targetInput.checked !== isChecked.value) {
         $targetInput.checked = isChecked.value;
@@ -9710,13 +9737,15 @@ var Component$v = defineComponent({
 const checkboxGroupProps = {
   name: PropTypes.string.def(""),
   modelValue: PropTypes.array,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  withValidate: PropTypes.bool.def(true)
 };
 var BkCheckboxGroup = defineComponent({
   name: "CheckboxGroup",
   props: checkboxGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props2, context) {
+    const formItem = useFormItem();
     const checkboxInstanceList = [];
     const register = (checkboxContext) => {
       checkboxInstanceList.push(checkboxContext);
@@ -9744,6 +9773,12 @@ var BkCheckboxGroup = defineComponent({
       unregister,
       handleChange
     });
+    watch(() => props2.modelValue, () => {
+      var _a;
+      if (props2.withValidate) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
+      }
+    });
     onMounted(() => {
       const modelValue = props2.modelValue || [];
       checkboxInstanceList.forEach((checkboxInstance) => {
@@ -10432,20 +10467,12 @@ var Component$t = defineComponent({
   props: {
     type: PropTypes.commonType(["404", "403", "500", "building", "empty", "search-empty", "login"], "type").def("404"),
     scene: PropTypes.commonType(["page", "part"], "scene").def("page"),
-    extCls: PropTypes.string
+    title: PropTypes.string,
+    description: PropTypes.string
   },
   setup(props2, {
     slots
   }) {
-    const tipText = {
-      403: "\u65E0\u4E1A\u52A1\u6743\u9650",
-      404: "\u9875\u9762\u4E0D\u5B58\u5728",
-      500: "\u670D\u52A1\u7EF4\u62A4\u4E2D",
-      building: "\u529F\u80FD\u5EFA\u8BBE\u4E2D",
-      empty: "\u6CA1\u6709\u6570\u636E",
-      "search-empty": "\u641C\u7D22\u4E3A\u7A7A",
-      login: "\u8BF7\u767B\u5165\u84DD\u9CB8"
-    };
     const images = {
       403: permissions,
       404: notFound,
@@ -10455,19 +10482,58 @@ var Component$t = defineComponent({
       "search-empty": searchEmpty,
       login
     };
-    return () => {
-      var _a, _b;
+    const renderImg = () => {
+      const imgSrc = images[props2.type] ? images[props2.type] : empty;
       return createVNode("div", {
-        "class": ["bk-exception-wrapper", props2.extCls]
-      }, [createVNode("div", {
-        "class": ["bk-exception-img", `${props2.scene}-img`]
+        "class": "bk-exception-img"
       }, [createVNode("img", {
         "class": "exception-image",
-        "src": images[props2.type],
+        "src": imgSrc,
         "alt": "type"
-      }, null)]), createVNode("div", {
-        "class": ["bk-exception-text", `${props2.scene}-text`]
-      }, [(_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : tipText[props2.type]])]);
+      }, null)]);
+    };
+    const renderTitle = () => {
+      if (_$1.isFunction(slots.title)) {
+        return createVNode("div", {
+          "class": "bk-exception-title"
+        }, [slots.title()]);
+      }
+      if (props2.title) {
+        return createVNode("div", {
+          "class": "bk-exception-title"
+        }, [props2.title]);
+      }
+      return null;
+    };
+    const renderDescription = () => {
+      if (_$1.isFunction(slots.description)) {
+        return createVNode("div", {
+          "class": "bk-exception-description"
+        }, [slots.description()]);
+      }
+      if (props2.description) {
+        return createVNode("div", {
+          "class": "bk-exception-description"
+        }, [props2.description]);
+      }
+      return null;
+    };
+    const renderFooter = () => {
+      if (_$1.isFunction(slots.default)) {
+        return createVNode("div", {
+          "class": "bk-exception-footer"
+        }, [slots.default()]);
+      }
+      return null;
+    };
+    return () => {
+      const rootClass = classes({
+        "bk-exception": true,
+        [`bk-exception-${props2.scene}`]: true
+      });
+      return createVNode("div", {
+        "class": rootClass
+      }, [renderImg(), renderTitle(), renderDescription(), renderFooter()]);
     };
   }
 });
@@ -13303,7 +13369,6 @@ const useRadio = () => {
     props: props2,
     emit
   } = currentInstance;
-  const formItem = useFormItem();
   const radioGroup = inject(radioGroupKey, EMPTY_OBJ);
   const isGroup = !isEmptyObj(radioGroup);
   const isChecked = ref(false);
@@ -13333,7 +13398,6 @@ const useRadio = () => {
     isChecked.value = value;
   };
   const handleChange = (event) => {
-    var _a;
     if (isDisabled.value) {
       return;
     }
@@ -13345,7 +13409,6 @@ const useRadio = () => {
     if (isGroup) {
       radioGroup.handleChange(currentInstance.proxy);
     }
-    (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
     nextTick(() => {
       if ($targetInput.checked !== isChecked.value) {
         $targetInput.checked = isChecked.value;
@@ -13487,13 +13550,15 @@ var RadioButton = defineComponent({
 const radioGroupProps = {
   name: PropTypes.string.def(""),
   modelValue: PropTypes.oneOfType([String, Number, Boolean]),
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  withValidate: PropTypes.bool.def(true)
 };
 var RadioGroup = defineComponent({
   name: "RadioGroup",
   props: radioGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props2, context) {
+    const formItem = useFormItem();
     const radioInstanceList = [];
     const register = (radioContext) => {
       radioInstanceList.push(radioContext);
@@ -13520,6 +13585,12 @@ var RadioGroup = defineComponent({
       unregister,
       handleChange
     });
+    watch(() => props2.modelValue, () => {
+      var _a;
+      if (props2.withValidate) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
+      }
+    });
     onMounted(() => {
       if (props2.modelValue === "") {
         return;
@@ -13607,7 +13678,8 @@ var Component$m = defineComponent({
   props: {
     modelValue: PropTypes.number.def(0),
     size: PropTypes.size(),
-    editable: PropTypes.bool.def(true)
+    editable: PropTypes.bool.def(true),
+    withValidate: PropTypes.bool.def(true)
   },
   emits: ["change", "update:modelValue"],
   setup(props2, {
@@ -13616,12 +13688,10 @@ var Component$m = defineComponent({
     const formItem = useFormItem();
     const hoverRate = ref(0);
     const chooseRate = (val) => {
-      var _a;
       if (!props2.editable)
         return;
       emit("update:modelValue", val);
       emit("change", val);
-      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
     };
     const changeHover = (val) => {
       hoverRate.value = val;
@@ -13655,6 +13725,12 @@ var Component$m = defineComponent({
       width: rateSize.width,
       height: rateSize.height
     };
+    watch(() => props2.modelValue, () => {
+      var _a;
+      if (props2.withValidate) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
+      }
+    });
     return () => createVNode("p", {
       "class": rateClass
     }, [props2.editable ? createVNode(star, mergeProps({
@@ -14184,7 +14260,7 @@ var SelectTagInput = defineComponent({
     allowCreate: PropTypes.bool.def(false),
     modelValue: PropTypes.any
   },
-  emits: ["update:modelValue", "remove", "focus", "enter"],
+  emits: ["update:modelValue", "remove", "enter"],
   setup(props2, {
     emit
   }) {
@@ -14200,9 +14276,6 @@ var SelectTagInput = defineComponent({
     const handleRemoveTag = (val) => {
       emit("remove", val);
     };
-    const handleFocus = () => {
-      emit("focus");
-    };
     const focus = () => {
       var _a;
       (_a = inputRef.value) == null ? void 0 : _a.focus();
@@ -14223,7 +14296,6 @@ var SelectTagInput = defineComponent({
       value,
       inputRef,
       handleRemoveTag,
-      handleFocus,
       focus,
       handleInput,
       handleKeydown,
@@ -14243,17 +14315,16 @@ var SelectTagInput = defineComponent({
       }, _isSlot$5(_slot = this.handleGetLabelByValue(item)) ? _slot : {
         default: () => [_slot]
       });
-    }), withDirectives(createVNode("input", {
+    }), 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,
+      "value": !this.filterable ? "" : this.value,
       "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)]);
+    }, null), (_d = (_c = this.$slots) == null ? void 0 : _c.suffix) == null ? void 0 : _d.call(_c)]);
   }
 });
 var Component$j = defineComponent({
@@ -14282,6 +14353,7 @@ var Component$j = defineComponent({
     noMatchText: PropTypes.string.def("\u65E0\u5339\u914D\u6570\u636E"),
     loadingText: PropTypes.string.def("\u52A0\u8F7D\u4E2D..."),
     placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
+    searchPlaceholder: PropTypes.string.def("\u8BF7\u8F93\u5165\u5173\u952E\u5B57"),
     selectAllText: PropTypes.string.def("\u5168\u90E8"),
     scrollLoading: PropTypes.bool.def(false),
     allowCreate: PropTypes.bool.def(false),
@@ -14290,7 +14362,9 @@ var Component$j = defineComponent({
     list: PropTypes.array.def([]),
     idKey: PropTypes.string.def("value"),
     displayKey: PropTypes.string.def("label"),
-    showSelectedIcon: PropTypes.bool.def(true)
+    withValidate: PropTypes.bool.def(true),
+    showSelectedIcon: PropTypes.bool.def(true),
+    inputSearch: PropTypes.bool.def(true)
   },
   emits: ["update:modelValue", "change", "toggle", "clear", "scroll-end", "focus", "blur"],
   setup(props2, {
@@ -14311,11 +14385,14 @@ var Component$j = defineComponent({
       multipleMode,
       allowCreate,
       customContent,
-      showSelectedIcon
+      showSelectedIcon,
+      inputSearch
     } = toRefs(props2);
     const formItem = useFormItem();
     const inputRef = ref();
     const triggerRef = ref();
+    const contentRef = ref();
+    const searchRef = ref();
     const selectTagInputRef = ref();
     const optionsMap = ref(/* @__PURE__ */ new Map());
     const options = computed(() => [...optionsMap.value.values()]);
@@ -14323,7 +14400,11 @@ var Component$j = defineComponent({
     const selected = ref([]);
     const activeOptionValue = ref();
     watch(modelValue, () => {
+      var _a;
       handleSetSelectedData();
+      if (props2.withValidate) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
+      }
     }, {
       deep: true
     });
@@ -14369,13 +14450,17 @@ var Component$j = defineComponent({
       cancelHover
     } = useHover();
     const isFocus = ref(false);
-    const handleFocus = (e) => {
+    const handleFocus = () => {
+      if (isFocus.value)
+        return;
       isFocus.value = true;
-      emit("focus", e);
+      emit("focus");
     };
     const handleBlur = () => {
-      isFocus.value && emit("blur");
+      if (!isFocus.value)
+        return;
       isFocus.value = false;
+      emit("blur");
     };
     const {
       popperWidth,
@@ -14386,12 +14471,12 @@ var Component$j = defineComponent({
     } = usePopover({
       popoverMinWidth: popoverMinWidth.value
     }, triggerRef);
-    const isInput = computed(() => (filterable.value || allowCreate.value) && isPopoverShow.value);
+    const isInput = computed(() => (filterable.value && inputSearch.value || allowCreate.value) && isPopoverShow.value);
     watch(isPopoverShow, (isShow) => {
       if (!isShow) {
         searchKey.value = "";
       } else {
-        focus();
+        focusInput();
         initActiveOptionValue();
       }
     });
@@ -14418,16 +14503,15 @@ var Component$j = defineComponent({
       searchLoading
     } = useRemoteSearch(isRemoteSearch.value ? remoteMethod.value : defaultSearchMethod, initActiveOptionValue);
     const emitChange = (val) => {
-      var _a;
       if (val === modelValue.value)
         return;
       emit("change", val, modelValue.value);
       emit("update:modelValue", val, modelValue.value);
-      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
     };
     const handleTogglePopover = () => {
       if (isDisabled.value)
         return;
+      handleFocus();
       togglePopover();
       emit("toggle", isPopoverShow.value);
     };
@@ -14482,15 +14566,21 @@ var Component$j = defineComponent({
         emitChange(option.value);
         hidePopover();
       }
-      focus();
+      focusInput();
     };
-    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 focusInput = () => {
+      setTimeout(() => {
+        var _a, _b, _c;
+        if (!inputSearch.value && !allowCreate.value) {
+          (_a = searchRef.value) == null ? void 0 : _a.focus();
+        } else {
+          if (multipleMode.value === "tag") {
+            (_b = selectTagInputRef.value) == null ? void 0 : _b.focus();
+          } else {
+            (_c = inputRef.value) == null ? void 0 : _c.focus();
+          }
+        }
+      }, 0);
     };
     const handleClear = (e) => {
       e.stopPropagation();
@@ -14516,7 +14606,7 @@ var Component$j = defineComponent({
         });
       }
       emitChange(selected.value.map((item) => item.value));
-      focus();
+      focusInput();
     };
     const handleScroll = (e) => {
       const {
@@ -14554,6 +14644,8 @@ var Component$j = defineComponent({
     };
     const handleKeydown = (e) => {
       var _a, _b;
+      if (!triggerRef.value.contains(e.target) && !contentRef.value.contains(e.target))
+        return;
       const availableOptions = options.value.filter((option) => !option.disabled && option.visible);
       const index = availableOptions.findIndex((option) => option.value === activeOptionValue.value);
       if (!availableOptions.length || index === -1)
@@ -14572,7 +14664,7 @@ var Component$j = defineComponent({
           break;
         }
         case "Backspace": {
-          if (!multiple.value || !selected.value.length || searchKey.value.length)
+          if (!multiple.value || !selected.value.length || searchKey.value.length || e.target === searchRef.value)
             return;
           selected.value.pop();
           emitChange(selected.value.map((item) => item.value));
@@ -14618,6 +14710,10 @@ var Component$j = defineComponent({
       setTimeout(() => {
         showOnInit.value && showPopover();
       });
+      on$2(document, "keydown", handleKeydown);
+    });
+    onBeforeMount(() => {
+      off$2(document, "keydown", handleKeydown);
     });
     return {
       selected,
@@ -14630,6 +14726,8 @@ var Component$j = defineComponent({
       popperWidth,
       inputRef,
       triggerRef,
+      contentRef,
+      searchRef,
       selectTagInputRef,
       searchLoading,
       isOptionsEmpty,
@@ -14642,6 +14740,7 @@ var Component$j = defineComponent({
       setHover,
       cancelHover,
       handleFocus,
+      handleBlur,
       handleTogglePopover,
       handleClear,
       hidePopover,
@@ -14706,7 +14805,6 @@ var Component$j = defineComponent({
           "tagTheme": this.tagTheme,
           "placeholder": this.placeholder,
           "filterable": this.isInput,
-          "onFocus": this.handleFocus,
           "onRemove": this.handleDeleteTag,
           "onEnter": this.handleInputEnter
         }, {
@@ -14727,10 +14825,8 @@ var Component$j = defineComponent({
         "disabled": this.isDisabled,
         "behavior": this.behavior,
         "size": this.size,
-        "onFocus": this.handleFocus,
         "onInput": this.handleInputChange,
-        "onEnter": this.handleInputEnter,
-        "onKeydown": (_2, e) => this.handleKeydown(e)
+        "onEnter": this.handleInputEnter
       }, {
         prefix: () => {
           var _a, _b;
@@ -14744,14 +14840,25 @@ var Component$j = defineComponent({
       "ref": "triggerRef",
       "onClick": this.handleTogglePopover,
       "onMouseenter": this.setHover,
-      "onMouseleave": this.cancelHover,
-      "onKeydown": this.handleKeydown
+      "onMouseleave": this.cancelHover
     }, [renderTriggerInput()]);
     const renderSelectContent = () => {
       var _a, _b;
       return createVNode("div", {
-        "class": "bk-select-content"
-      }, [!this.isShowSelectContent && createVNode("div", {
+        "class": "bk-select-content",
+        "ref": "contentRef"
+      }, [this.filterable && !this.inputSearch && createVNode("div", {
+        "class": "bk-select-search-wrapper"
+      }, [createVNode(search, {
+        "class": "icon-search",
+        "width": 16,
+        "height": 16
+      }, null), withDirectives(createVNode("input", {
+        "ref": "searchRef",
+        "class": "bk-select-search-input",
+        "placeholder": this.searchPlaceholder,
+        "onUpdate:modelValue": ($event) => this.searchKey = $event
+      }, null), [[vModelText, this.searchKey]])]), !this.isShowSelectContent && createVNode("div", {
         "class": "bk-select-empty"
       }, [this.searchLoading && createVNode(BkLoading, {
         "class": "mr5",
@@ -15082,7 +15189,8 @@ var Component$g = defineComponent({
     trueValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).def(true),
     falseValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).def(false),
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).def(false),
-    modelValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).def(false)
+    modelValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).def(false),
+    withValidate: PropTypes.bool.def(true)
   },
   emits: ["update:modelValue", "change"],
   setup(props2, {
@@ -15113,7 +15221,11 @@ var Component$g = defineComponent({
       return cls;
     });
     watch(() => props2.modelValue, () => {
+      var _a;
       isModelValue.value = true;
+      if (props2.withValidate) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
+      }
     });
     watch(() => props2.value, () => {
       isModelValue.value = false;
@@ -15127,10 +15239,8 @@ var Component$g = defineComponent({
       const lastValue = isChecked.value ? props2.falseValue : props2.trueValue;
       const lastChecked = !isChecked.value;
       const trigger = () => {
-        var _a;
         emit("update:modelValue", lastValue);
         emit("change", lastChecked);
-        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
       };
       let goodJob = true;
       if (typeof props2.beforeChange === "function") {
@@ -15472,7 +15582,7 @@ var EMITEVENTS = /* @__PURE__ */ ((EMITEVENTS2) => {
   EMITEVENTS2["COLUMN_SORT"] = "columnSort";
   EMITEVENTS2["COLUMN_FILTER"] = "columnFilter";
   EMITEVENTS2["ROW_CLICK"] = "rowClick";
-  EMITEVENTS2["ROW_DBL_CLICK"] = "rowDblClick";
+  EMITEVENTS2["ROW_DBL_CLICK"] = "rowDblclick";
   EMITEVENTS2["ROW_EXPAND_CLICK"] = "rowExpand";
   EMITEVENTS2["PAGE_LIMIT_CHANGE"] = "pageLimitChange";
   EMITEVENTS2["PAGE_VALUE_CHANGE"] = "pageValueChange";
@@ -15486,7 +15596,7 @@ const EMIT_EVENT_TYPES = {
   ["columnFilter"]: EMPTY$1,
   ["columnSort"]: EMPTY$1,
   ["rowClick"]: EMPTY$1,
-  ["rowDblClick"]: EMPTY$1,
+  ["rowDblclick"]: EMPTY$1,
   ["rowExpand"]: EMPTY$1,
   ["pageLimitChange"]: EMPTY$1,
   ["pageValueChange"]: EMPTY$1,
@@ -16155,19 +16265,13 @@ var BodyEmpty = defineComponent({
     emptyText: PropTypes.string.def("\u6682\u65E0\u6570\u636E")
   },
   emits: ["change"],
-  setup(props2, {
-    slots
-  }) {
+  setup(props2) {
     const type = computed(() => props2.list.length === 0 ? "empty" : "search-empty");
     return () => createVNode(BkException, {
       "scene": "part",
-      "type": type.value
-    }, {
-      default: () => {
-        var _a, _b;
-        return [(_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : props2.emptyText];
-      }
-    });
+      "type": type.value,
+      "description": props2.emptyText
+    }, null);
   }
 });
 const resolvePropVal = (prop, key2, args) => {
@@ -16918,14 +17022,14 @@ class TableRender {
     Object.assign(this.props.pagination, {
       limit
     });
-    this.context.emit("pageLimitChange", limit);
+    this.context.emit(EMITEVENTS.PAGE_LIMIT_CHANGE, limit);
   }
   hanlePageChange(current) {
     Object.assign(this.props.pagination, {
       current,
       value: current
     });
-    this.context.emit("pageValueChange", current);
+    this.context.emit(EMITEVENTS.PAGE_VALUE_CHANGE, current);
   }
   setColumnActive(index, single = false) {
     const col = this.propActiveCols.find((item) => item.index === index);
@@ -16943,7 +17047,7 @@ class TableRender {
   handleColumnHeadClick(index) {
     if (this.props.columnPick !== "disabled") {
       this.setColumnActive(index, this.props.columnPick === "single");
-      this.context.emit("column-pick", this.propActiveCols);
+      this.context.emit(EMITEVENTS.COLUMN_PICK, this.propActiveCols);
     }
   }
   getSortCell(column, index) {
@@ -17098,10 +17202,10 @@ class TableRender {
     }
   }
   handleRowClick(e, row, index, rows) {
-    this.context.emit("rowClick", e, row, index, rows, this);
+    this.context.emit(EMITEVENTS.ROW_CLICK, e, row, index, rows, this);
   }
   handleRowDblClick(e, row, index, rows) {
-    this.context.emit("rowDblClick", e, row, index, rows, this);
+    this.context.emit(EMITEVENTS.ROW_DBL_CLICK, e, row, index, rows, this);
   }
   getExpandCell(row) {
     const isExpand = !!row[TABLE_ROW_ATTRIBUTE.ROW_EXPAND];
@@ -17808,11 +17912,9 @@ function useFlatList(props2) {
     displayKey,
     list
   } = toRefs(props2);
-  const state = reactive({
-    flatList: []
-  });
+  const flatList = reactive([]);
   watch([useGroup, saveKey, displayKey, list], () => {
-    state.flatList = [];
+    flatList.splice(0, flatList.length);
     let formatList = list.value;
     if (useGroup.value) {
       formatList = list.value.reduce((formatList2, item) => {
@@ -17828,9 +17930,17 @@ function useFlatList(props2) {
         return formatList2.concat(children);
       }, []);
     }
-    state.flatList = [...formatList];
+    appendToTargetList(formatList);
   }, { immediate: true, deep: true });
-  return state.flatList;
+  function appendToTargetList(targetList) {
+    const QUANTUM = 3e4;
+    const len = targetList.length;
+    for (let i2 = 0; i2 < len; i2 += QUANTUM) {
+      const appendList = targetList.slice(i2, Math.min(i2 + QUANTUM, len));
+      flatList.push(...appendList);
+    }
+  }
+  return flatList;
 }
 const getCharLength = (str) => {
   const len = str.length;
@@ -17917,6 +18027,10 @@ const tagProps = () => ({
   pasteFn: {
     type: Function,
     default: null
+  },
+  withValidate: {
+    type: Boolean,
+    default: true
   }
 });
 var TagRender = defineComponent({
@@ -17992,7 +18106,13 @@ var Component$c = defineComponent({
       disabled: props2.disabled
     }));
     watch([() => [...props2.modelValue], () => [...props2.list]], () => {
-      initData();
+      var _a;
+      nextTick(() => {
+        initData();
+      });
+      if (props2.withValidate) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
+      }
     });
     watch(curInputValue, lodash.exports.debounce(() => {
       const hasShowCount = pageState.curPageList.length !== 0;
@@ -18286,11 +18406,9 @@ var Component$c = defineComponent({
       tagInputRef.value.style.width = `${INPUT_MIN_WIDTH}px`;
     };
     const handleChange = (type, data2) => {
-      var _a;
       emit("change", tagList.value);
       emit(type, data2);
       emit("update:modelValue", tagList.value);
-      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
     };
     const handleClear = (e) => {
       e.stopPropagation();
@@ -23453,7 +23571,11 @@ const datePickerProps = {
       return ["simplicity", "normal"].indexOf(v2) > -1;
     }
   },
-  disableDate: Function
+  disableDate: Function,
+  withValidate: {
+    type: Boolean,
+    default: true
+  }
 };
 var Component$9 = defineComponent({
   name: "DatePicker",
@@ -23585,7 +23707,11 @@ var Component$9 = defineComponent({
     });
     const pickerDropdownRef = ref(null);
     watch(() => props2.modelValue, (modelValue) => {
+      var _a;
       state.internalValue = parseDate(modelValue, props2.type, props2.multiple, props2.format);
+      if (props2.withValidate) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
+      }
     });
     watch(() => props2.open, (open) => {
       state.visible = open === true;
@@ -23659,17 +23785,15 @@ var Component$9 = defineComponent({
       }
     };
     const handleInputMouseleave = (_e) => {
-      console.log("handleInputMouseleave");
       state.showClose = false;
     };
     const emitChange = (type) => {
       nextTick(() => {
-        var _a, _b;
+        var _a;
         emit("change", publicStringValue.value, type);
         emit("update:modelValue", publicVModelValue.value);
-        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
         if (props2.type.indexOf("time") < 0) {
-          (_b = inputRef == null ? void 0 : inputRef.value) == null ? void 0 : _b.blur();
+          (_a = inputRef == null ? void 0 : inputRef.value) == null ? void 0 : _a.blur();
         }
       });
     };
@@ -25580,30 +25704,12 @@ var Form = defineComponent({
   }
 });
 var defaultValidator = {
-  required: (value) => {
-    console.log("required", value, value !== "" && value !== void 0 && value !== null);
-    return value !== "" && value !== void 0 && value !== null;
-  },
-  min: (value, min2) => {
-    console.log("min");
-    return value >= min2;
-  },
-  max: (value, max2) => {
-    console.log("max");
-    return max2 >= value;
-  },
-  email: (value) => {
-    console.log("email");
-    return /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(value);
-  },
-  maxlength: (value, maxlength) => {
-    console.log("maxlength");
-    return value.length <= maxlength;
-  },
-  pattern: (value, pattern) => {
-    console.log("pattern");
-    return pattern.test(value);
-  }
+  required: (value) => value !== "" && value !== void 0 && value !== null,
+  min: (value, min2) => value >= min2,
+  max: (value, max2) => max2 >= value,
+  email: (value) => /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(value),
+  maxlength: (value, maxlength) => value.length <= maxlength,
+  pattern: (value, pattern) => pattern.test(value)
 };
 const formItemProps = {
   label: PropTypes.string,
@@ -26092,9 +26198,10 @@ const BkDropdown = withInstallProps(Dropdown, { DropdownMenu, DropdownItem });
 var CascaderPanel = defineComponent({
   name: "CascaderPanel",
   props: {
-    store: PropTypes.object.def({})
+    store: PropTypes.object.def({}),
+    modelValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number).def([]), PropTypes.arrayOf(PropTypes.string).def([])])
   },
-  emits: ["input"],
+  emits: ["update:modelValue"],
   setup(props2, {
     emit
   }) {
@@ -26106,24 +26213,25 @@ var CascaderPanel = defineComponent({
     });
     const activePath = ref([]);
     const checkValue = ref([]);
-    const nodeCheckHandler = (node) => {
-      if (node.config.multiple) {
-        checkValue.value = store.getCheckedNodes().map((node2) => node2.path);
-      } else {
-        checkValue.value = node.path;
+    const updateCheckValue = (value) => {
+      if (value.length === 0) {
+        menus.list = menus.list.slice(0, 1);
+        activePath.value = [];
       }
-      emit("input", checkValue.value);
-    };
-    const nodeClear = () => {
-      emit("input", []);
-    };
-    const syncCheckedValue = (value) => {
       value.forEach((id) => {
         const node = store.getNodeById(id);
         nodeExpandHandler(node);
       });
       checkValue.value = value;
     };
+    const nodeCheckHandler = (node) => {
+      if (node.config.multiple) {
+        checkValue.value = store.getCheckedNodes().map((node2) => node2.path);
+      } else {
+        checkValue.value = node.path;
+      }
+      emit("update:modelValue", checkValue.value);
+    };
     const nodeExpandHandler = (node) => {
       var _a;
       if (node.isDisabled)
@@ -26188,6 +26296,11 @@ var CascaderPanel = defineComponent({
     }, null) : createVNode(angleRight, {
       "class": "icon-angle-right"
     }, null);
+    watch(() => props2.modelValue, (value) => {
+      updateCheckValue(value);
+    }, {
+      immediate: true
+    });
     return {
       menus,
       activePath,
@@ -26196,10 +26309,8 @@ var CascaderPanel = defineComponent({
       nodeEvent,
       isCheckedNode,
       checkValue,
-      nodeClear,
       checkNode,
-      iconRender,
-      syncCheckedValue
+      iconRender
     };
   },
   render() {
@@ -26359,13 +26470,18 @@ var Component$6 = defineComponent({
     const panelShow = ref(false);
     const selectedText = ref("");
     const selectedTags = ref([]);
-    const checkedValue = ref(props2.modelValue);
+    const {
+      modelValue
+    } = toRefs(props2);
     const cascaderPanel = ref();
-    watch(() => props2.modelValue, (value) => {
-      updateValue(value);
+    const checkedValue = computed({
+      get: () => modelValue.value,
+      set: (value) => {
+        emit("update:modelValue", value);
+      }
     });
+    const popover3 = ref(null);
     const updateValue = (val) => {
-      cascaderPanel.value.syncCheckedValue(val);
       if (multiple) {
         selectedTags.value = store.getCheckedNodes().map((node) => ({
           text: node.pathNames.join(separator2),
@@ -26380,17 +26496,13 @@ var Component$6 = defineComponent({
         selectedText.value = node.pathNames.join(separator2);
       }
     };
-    const inputChangeHandler = (val) => {
-      updateValue(val);
-      emit("update:modelValue", val);
-      emit("change", val);
-    };
     const hidePopover = () => {
       panelShow.value = false;
     };
     const handleClear = (e) => {
       e.stopPropagation();
       updateValue([]);
+      emit("update:modelValue", []);
       emit("clear", JSON.parse(JSON.stringify(props2.modelValue)));
     };
     const inputClickHandler = (e) => {
@@ -26404,6 +26516,15 @@ var Component$6 = defineComponent({
       current.splice(index, 1);
       updateValue(current);
     };
+    watch(() => props2.modelValue, (value) => {
+      var _a;
+      updateValue(value);
+      (_a = popover3 == null ? void 0 : popover3.value) == null ? void 0 : _a.handlePopShow(false);
+      emit("update:modelValue", value);
+      emit("change", value);
+    }, {
+      immediate: true
+    });
     return {
       store,
       updateValue,
@@ -26415,10 +26536,10 @@ var Component$6 = defineComponent({
       handleClear,
       isHover,
       setHover,
+      popover: popover3,
       cancelHover,
       selectedTags,
       removeTag,
-      inputChangeHandler,
       cascaderPanel
     };
   },
@@ -26452,7 +26573,8 @@ var Component$6 = defineComponent({
     return createVNode("div", {
       "class": ["bk-cascader", "bk-cascader-wrapper", this.extCls, {
         "bk-is-show-panel": this.panelShow,
-        "is-unselected": this.modelValue.length === 0
+        "is-unselected": this.modelValue.length === 0,
+        "is-hover": this.isHover
       }],
       "tabindex": "0",
       "data-placeholder": this.placeholder,
@@ -26466,6 +26588,7 @@ var Component$6 = defineComponent({
       "class": "bk-cascader-popover-wrapper",
       "isShow": this.panelShow,
       "onUpdate:isShow": ($event) => this.panelShow = $event,
+      "ref": "popover",
       "boundary": "body"
     }, {
       default: () => createVNode("div", {
@@ -26481,7 +26604,8 @@ var Component$6 = defineComponent({
       }, [createVNode(CascaderPanel, {
         "store": this.store,
         "ref": "cascaderPanel",
-        "onInput": (val) => this.inputChangeHandler(val)
+        "modelValue": this.checkedValue,
+        "onUpdate:modelValue": ($event) => this.checkedValue = $event
       }, null)])
     })]);
   }
@@ -27505,18 +27629,14 @@ var Component$2 = defineComponent({
       }, {
         content: "\u6B65\u9AA45"
       }]);
-      console.log("props.list", props2.list);
       if ((_a = props2.list) == null ? void 0 : _a.length) {
         defaultProcessList.value.splice(0, defaultProcessList.value.length, ...props2.list);
       }
     };
     const jumpTo = async (index) => {
-      console.log(index);
       try {
         if (props2.controllable && index !== props2.curProcess) {
-          console.log(props2.curProcess);
           emit("update:curProcess", index);
-          console.log(props2.curProcess);
           emit("click", index);
         }
       } catch (e) {
@@ -33386,7 +33506,8 @@ const colorPickerProps = {
   size: PropTypes.size(["", "small", "large"]).def(""),
   showValue: PropTypes.bool.def(true),
   recommend: PropTypes.oneOfType([PropTypes.array.def(() => []), PropTypes.bool.def(true)]).def(true),
-  extCls: PropTypes.string.def("")
+  extCls: PropTypes.string.def(""),
+  withValidate: PropTypes.bool.def(true)
 };
 const whiteColorObj = formatColor("#FFFFFF");
 var Component = defineComponent({
@@ -33399,6 +33520,7 @@ var Component = defineComponent({
   setup(props2, {
     emit
   }) {
+    const formItem = useFormItem();
     const showDropdown = ref(false);
     const colorStr = ref("");
     const colorObj = reactive(JSON.parse(JSON.stringify(whiteColorObj)));
@@ -33418,7 +33540,11 @@ var Component = defineComponent({
       });
     });
     watch(() => props2.modelValue, () => {
+      var _a;
       changeColorFromProps();
+      if (props2.withValidate) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
+      }
     });
     const handleTriggerKeydown = (e) => {
       if (e.code === "Enter" || e.code === "NumpadEnter") {