bkui-vue 0.0.1-beta.116 → 0.0.1-beta.119

package/dist/index.esm.js

@@ -9925,6 +9925,7 @@ const propsMixin$1 = {
   transfer: PropTypes.bool.def(false),
   maxHeight: PropTypes.string,
   direction: PropTypes.string,
+  title: PropTypes.string.def(""),
   animateType: PropTypes.string.def("slide"),
   renderDirective: PropTypes.commonType(["show", "if"], "renderDirective").def("show"),
   beforeClose: PropTypes.custom(() => true),
@@ -10881,11 +10882,11 @@ const tooltips = {
     } else {
       opts.content = binding.value;
     }
-    const { disabled, arrow: arrow2, theme } = opts;
+    const { disabled, arrow: arrow2, theme, extCls } = opts;
     if (disabled) {
       return;
     }
-    const popper2 = renderContent(opts.content, arrow2, theme === "light");
+    const popper2 = renderContent(opts.content, arrow2, theme === "light", extCls);
     createPopperInstance(el, popper2, opts);
   }
 };
@@ -10899,6 +10900,7 @@ function initOptions() {
     showOnInit: false,
     placement: "top",
     distance: 8,
+    extCls: "",
     onShow: () => {
     },
     onHide: () => {
@@ -10906,10 +10908,10 @@ function initOptions() {
   };
   return defaultOpts;
 }
-function renderContent(value, hasArrow, isLight) {
+function renderContent(value, hasArrow, isLight, extCls) {
   const zIndex = bkZIndexManager.getPopperIndex();
   const content = document.createElement("div");
-  content.className = `bk-popper ${isLight ? "light" : "dark"}`;
+  content.className = `bk-popper ${isLight ? "light" : "dark"} ${extCls}`;
   content.innerText = value;
   content.style.zIndex = String(zIndex);
   if (hasArrow) {
@@ -13670,7 +13672,7 @@ var BkOption = defineComponent({
   name: "Option",
   props: {
     value: PropTypes.any,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    label: PropTypes.string.def(""),
     disabled: PropTypes.bool.def(false)
   },
   setup(props) {
@@ -13688,7 +13690,7 @@ var BkOption = defineComponent({
     const group = inject(optionGroupKey, null);
     const selected = computed(() => {
       var _a;
-      return (_a = select2 == null ? void 0 : select2.selected) == null ? void 0 : _a.some((val) => val === value.value);
+      return (_a = select2 == null ? void 0 : select2.selected) == null ? void 0 : _a.some((item) => item.value === value.value);
     });
     const multiple = computed(() => select2 == null ? void 0 : select2.multiple);
     const isHover = computed(() => (select2 == null ? void 0 : select2.activeOptionValue) === value.value);
@@ -13945,13 +13947,13 @@ var SelectTagInput = defineComponent({
     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((val) => {
+    }, [(_b = (_a = this.$slots) == null ? void 0 : _a.prefix) == null ? void 0 : _b.call(_a), this.selected.map((item) => {
       let _slot;
       return createVNode(BkTag, {
         "closable": true,
         "theme": this.tagTheme,
-        "onClose": () => this.handleRemoveTag(val)
-      }, _isSlot$5(_slot = this.handleGetLabelByValue(val)) ? _slot : {
+        "onClose": () => this.handleRemoveTag(item.value)
+      }, _isSlot$5(_slot = this.handleGetLabelByValue(item)) ? _slot : {
         default: () => [_slot]
       });
     }), withDirectives(createVNode("input", {
@@ -14034,7 +14036,7 @@ var Component$h = defineComponent({
       deep: true
     });
     const isDisabled = computed(() => disabled.value || loading2.value);
-    const selectedLabel = computed(() => selected.value.map((value) => handleGetLabelByValue(value)));
+    const selectedLabel = computed(() => selected.value.map((item) => handleGetLabelByValue(item)));
     const isAllSelected = computed(() => {
       const normalSelectedValues = options.value.reduce((pre, option) => {
         if (!option.disabled) {
@@ -14042,7 +14044,7 @@ var Component$h = defineComponent({
         }
         return pre;
       }, []);
-      return normalSelectedValues.length <= selected.value.length && normalSelectedValues.every((val) => selected.value.some((value) => value === val));
+      return normalSelectedValues.length <= selected.value.length && normalSelectedValues.every((val) => selected.value.some((item) => item.value === val));
     });
     const isGroup = computed(() => !!groupsMap.value.size);
     const isOptionsEmpty = computed(() => !options.value.length);
@@ -14103,10 +14105,10 @@ var Component$h = defineComponent({
     });
     const initActiveOptionValue = () => {
       var _a;
-      const firstValue = selected.value[0];
-      const option = optionsMap.value.get(firstValue);
+      const firstSelected = selected.value[0];
+      const option = optionsMap.value.get(firstSelected == null ? void 0 : firstSelected.value);
       if (option && !option.disabled && option.visible) {
-        activeOptionValue.value = firstValue;
+        activeOptionValue.value = firstSelected == null ? void 0 : firstSelected.value;
       } else {
         activeOptionValue.value = (_a = options.value.find((option2) => !option2.disabled && option2.visible)) == null ? void 0 : _a.value;
       }
@@ -14142,7 +14144,8 @@ var Component$h = defineComponent({
         return;
       searchKey.value = value;
     };
-    const handleInputEnter = (value, e) => {
+    const handleInputEnter = (val, e) => {
+      const value = String(val);
       if (!allowCreate.value || !value || filterable.value && options.value.find((data3) => toLowerCase(String(data3.label)) === toLowerCase(value)))
         return;
       const data2 = optionsMap.value.get(value);
@@ -14150,10 +14153,16 @@ var Component$h = defineComponent({
         return;
       e.stopPropagation();
       if (multiple.value) {
-        selected.value.push(value);
-        emitChange(selected.value);
+        selected.value.push({
+          value,
+          label: value
+        });
+        emitChange(selected.value.map((item) => item.value));
       } else {
-        selected.value = [value];
+        selected.value = [{
+          value,
+          label: value
+        }];
         emitChange(value);
         hidePopover();
       }
@@ -14163,15 +14172,21 @@ var Component$h = defineComponent({
       if (isDisabled.value || !option)
         return;
       if (multiple.value) {
-        const index = selected.value.findIndex((value) => value === option.value);
+        const index = selected.value.findIndex((item) => item.value === option.value);
         if (index > -1) {
           selected.value.splice(index, 1);
         } else {
-          selected.value.push(option.value);
+          selected.value.push({
+            value: option.value,
+            label: option.label || option.value
+          });
         }
-        emitChange(selected.value);
+        emitChange(selected.value.map((item) => item.value));
       } else {
-        selected.value = [option.value];
+        selected.value = [{
+          label: option.label || option.value,
+          value: option.value
+        }];
         emitChange(option.value);
         hidePopover();
       }
@@ -14192,17 +14207,23 @@ var Component$h = defineComponent({
       emit("clear", multiple.value ? [] : "");
       hidePopover();
     };
+    const handleSelectedAllOptionMouseEnter = () => {
+      activeOptionValue.value = "";
+    };
     const handleToggleAll = () => {
       if (isAllSelected.value) {
         selected.value = [];
       } else {
         options.value.forEach((option) => {
-          if (option.disabled || selected.value.find((value) => value === option.value))
+          if (option.disabled || selected.value.find((item) => item.value === option.value))
             return;
-          selected.value.push(option.value);
+          selected.value.push({
+            value: option.value,
+            label: option.label || option.value
+          });
         });
       }
-      emitChange(selected.value);
+      emitChange(selected.value.map((item) => item.value));
       focus();
     };
     const handleScroll = (e) => {
@@ -14216,21 +14237,27 @@ var Component$h = defineComponent({
       }
     };
     const handleDeleteTag = (val) => {
-      const index = selected.value.findIndex((value) => value === val);
+      const index = selected.value.findIndex((item) => item.value === val);
       if (index > -1) {
         selected.value.splice(index, 1);
-        emitChange(selected.value);
+        emitChange(selected.value.map((item) => item.value));
       }
     };
-    const handleGetLabelByValue = (val) => {
+    const handleGetLabelByValue = (item) => {
       var _a, _b;
-      return ((_b = (_a = optionsMap.value) == null ? void 0 : _a.get(val)) == null ? void 0 : _b.label) || val;
+      return ((_b = (_a = optionsMap.value) == null ? void 0 : _a.get(item.value)) == null ? void 0 : _b.label) || item.label || item.value;
     };
     const handleSetSelectedData = () => {
       if (Array.isArray(modelValue.value)) {
-        selected.value = [...modelValue.value];
+        selected.value = [...modelValue.value.map((value) => ({
+          value,
+          label: value
+        }))];
       } else if (modelValue.value !== void 0) {
-        selected.value = [modelValue.value];
+        selected.value = [{
+          value: modelValue.value,
+          label: modelValue.value
+        }];
       }
     };
     const handleKeydown = (e) => {
@@ -14256,7 +14283,7 @@ var Component$h = defineComponent({
           if (!multiple.value || !selected.value.length || searchKey.value.length)
             return;
           selected.value.pop();
-          emitChange(selected.value);
+          emitChange(selected.value.map((item) => item.value));
           break;
         }
         case "Enter": {
@@ -14333,7 +14360,8 @@ var Component$h = defineComponent({
       handleDeleteTag,
       handleInputChange,
       handleInputEnter,
-      handleKeydown
+      handleKeydown,
+      handleSelectedAllOptionMouseEnter
     };
   },
   render() {
@@ -14359,6 +14387,7 @@ var Component$h = defineComponent({
       if (this.loading) {
         return createVNode(BkLoading, {
           "loading": true,
+          "theme": "primary",
           "class": "spinner",
           "mode": "spin",
           "size": "mini"
@@ -14431,10 +14460,11 @@ var Component$h = defineComponent({
         "class": "bk-select-empty"
       }, [this.searchLoading && createVNode(BkLoading, {
         "class": "mr5",
+        "theme": "primary",
         "loading": true,
         "mode": "spin",
         "size": "mini"
-      }, null), this.curContentText]), createVNode("div", {
+      }, null), createVNode("span", null, [this.curContentText])]), createVNode("div", {
         "class": "bk-select-content"
       }, [createVNode("div", {
         "class": "bk-select-dropdown",
@@ -14446,6 +14476,7 @@ var Component$h = defineComponent({
         "class": "bk-select-options"
       }, [this.multiple && this.showSelectAll && (!this.searchKey || !this.filterable) && createVNode("li", {
         "class": "bk-select-option",
+        "onMouseenter": this.handleSelectedAllOptionMouseEnter,
         "onClick": this.handleToggleAll
       }, [this.selectAllText]), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a), this.scrollLoading && createVNode("li", {
         "class": "bk-select-options-loading"
@@ -14455,7 +14486,7 @@ var Component$h = defineComponent({
         "loading": true,
         "mode": "spin",
         "size": "mini"
-      }, null), this.loadingText])]), [[vShow, this.isShowSelectContent]])]), this.$slots.extension && createVNode("div", {
+      }, null), createVNode("span", null, [this.loadingText])])]), [[vShow, this.isShowSelectContent]])]), this.$slots.extension && createVNode("div", {
         "class": "bk-select-extension"
       }, [this.$slots.extension()])])]);
     };
@@ -14490,6 +14521,10 @@ var Component$g = defineComponent({
       type: String,
       default: ""
     },
+    extCls: {
+      type: String,
+      default: ""
+    },
     direction: {
       type: String,
       default: "right",
@@ -14561,7 +14596,7 @@ var Component$g = defineComponent({
       const maxHeight = slots.footer ? "calc(100vh - 114px)" : "calc(100vh - 60px)";
       return createVNode(BkModal, mergeProps(props, {
         "maxHeight": maxHeight,
-        "class": className,
+        "extCls": className,
         "style": `${props.direction}: 0;`,
         "onHidden": handleHidden,
         "onShown": handleShown,
@@ -17380,8 +17415,11 @@ function useFlatList(props) {
     displayKey,
     list
   } = toRefs(props);
-  const flatList = reactive([]);
+  const state = reactive({
+    flatList: []
+  });
   watch([useGroup, saveKey, displayKey, list], () => {
+    state.flatList = [];
     let formatList = list.value;
     if (useGroup.value) {
       formatList = list.value.reduce((formatList2, item) => {
@@ -17397,9 +17435,9 @@ function useFlatList(props) {
         return formatList2.concat(children);
       }, []);
     }
-    flatList.splice(0, flatList.length, ...formatList);
+    state.flatList = [...formatList];
   }, { immediate: true, deep: true });
-  return flatList;
+  return state.flatList;
 }
 const getCharLength = (str) => {
   const len = str.length;
@@ -17832,7 +17870,7 @@ var Component$a = defineComponent({
         popoverProps.isShow = false;
         emit("blur", inputValue, tagList.value);
         (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur");
-      }, 50);
+      }, 200);
     };
     const handleTagSelected = (item, type, e) => {
       e == null ? void 0 : e.stopPropagation();
@@ -25126,6 +25164,12 @@ var FormItem = defineComponent({
     });
     const form2 = useForm();
     const isForm = Boolean(form2);
+    const isFormTypeVertical = computed(() => {
+      if (!isForm) {
+        return false;
+      }
+      return form2.props.formType === "vertical";
+    });
     const labelStyles = computed(() => {
       const styles = {
         width: "",
@@ -25210,12 +25254,13 @@ var FormItem = defineComponent({
     });
     return __spreadProps(__spreadValues({}, toRefs(state)), {
       labelStyles,
+      isFormTypeVertical,
       validate,
       clearValidate
     });
   },
   render() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const itemClassees = classes({
       "bk-form-item": true,
       "is-error": this.isError,
@@ -25252,9 +25297,9 @@ var FormItem = defineComponent({
     }, [createVNode("div", {
       "class": "bk-form-label",
       "style": this.labelStyles
-    }, [renderLabel()]), createVNode("div", {
+    }, [renderLabel(), this.isFormTypeVertical && ((_b = (_a = this.$slots).labelAppend) == null ? void 0 : _b.call(_a))]), createVNode("div", {
       "class": "bk-form-content"
-    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a), renderError()])]);
+    }, [(_d = (_c = this.$slots).default) == null ? void 0 : _d.call(_c), renderError()])]);
   }
 });
 const BkForm = withInstallProps(Form, { FormItem, ComposeFormItem });