bkui-vue 0.0.1-beta.181 → 0.0.1-beta.184

package/dist/index.esm.js

@@ -7354,6 +7354,7 @@ const observerResize$1 = (root, callbackFn, delay = 60, immediate = false) => {
     }
   };
 };
+const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
 class BkMaskManager {
   constructor(config) {
     this.multiInstance = false;
@@ -8017,6 +8018,9 @@ function arrayEqual(arr1 = [], arr2 = []) {
     return false;
   }
   for (let i2 = 0; i2 < arr1.length; i2++) {
+    if (Array.isArray(arr1[i2])) {
+      return arrayEqual(arr1[i2], arr2[i2]);
+    }
     if (arr1[i2] !== arr2[i2]) {
       return false;
     }
@@ -10150,7 +10154,8 @@ const propsMixin$1 = {
   renderDirective: PropTypes.commonType(["show", "if"], "renderDirective").def("show"),
   beforeClose: PropTypes.custom(() => true),
   dialogType: PropTypes.commonType(["show", "operation", "confirm", "process"], "dialogType").def("operation"),
-  multiInstance: PropTypes.bool.def(true)
+  multiInstance: PropTypes.bool.def(true),
+  infoType: PropTypes.commonType(["success", "warning", "danger", "loading"], "infoType").def()
 };
 var Component$u = defineComponent({
   name: "Modal",
@@ -10404,6 +10409,23 @@ var Dialog = defineComponent({
     };
   },
   render() {
+    const renderIcon = () => {
+      const iconMap = {
+        loading: createVNode(spinner, {
+          "class": "bk-info-icon primary"
+        }, null),
+        warning: createVNode(warn, {
+          "class": "bk-info-icon warning"
+        }, null),
+        success: createVNode(success, {
+          "class": "bk-info-icon success"
+        }, null),
+        danger: createVNode(close$1, {
+          "class": "bk-info-icon danger"
+        }, null)
+      };
+      return iconMap[this.infoType];
+    };
     const dialogSlot = {
       header: () => {
         var _a, _b, _c, _d, _e, _f;
@@ -10412,7 +10434,11 @@ var Dialog = defineComponent({
           "onMousedown": this.moveHandler
         }, [(_c = (_b = (_a = this.$slots).tools) == null ? void 0 : _b.call(_a)) != null ? _c : ""]), createVNode("div", {
           "class": "bk-dialog-header"
-        }, [createVNode("span", {
+        }, [createVNode("div", {
+          "class": "bk-header-icon"
+        }, [this.infoType ? renderIcon() : createVNode("slot", {
+          "name": "info-icon"
+        }, null)]), createVNode("span", {
           "class": "bk-dialog-title",
           "style": `text-align: ${this.headerAlign}`
         }, [(_f = (_e = (_d = this.$slots).header) == null ? void 0 : _e.call(_d)) != null ? _f : this.title])])];
@@ -16980,7 +17006,7 @@ var TableCell = defineComponent({
       }
     });
     onBeforeUnmount(() => {
-      observerIns.stop();
+      observerIns == null ? void 0 : observerIns.stop();
       bkEllipsisIns == null ? void 0 : bkEllipsisIns.destroyInstance(refRoot.value);
     });
     return () => {
@@ -20152,10 +20178,14 @@ const InfoBox = (config) => {
         if (modalFuncProps.value.subTitle) {
           switch (typeof modalFuncProps.value.subTitle) {
             case "string":
-              children.push(h$1("div", modalFuncProps.value.subTitle));
+              children.push(h$1("div", {
+                class: "bk-info-subTitle"
+              }, modalFuncProps.value.subTitle));
               break;
             case "function":
-              children.push(h$1("div", modalFuncProps.value.subTitle()));
+              children.push(h$1("div", {
+                class: "bk-info-subTitle"
+              }, modalFuncProps.value.subTitle()));
               break;
             default:
               children.push(h$1(modalFuncProps.value.subTitle));
@@ -20166,6 +20196,7 @@ const InfoBox = (config) => {
       };
       return () => createVNode(Dialog, __spreadProps(__spreadValues({}, modalFuncProps.value), {
         isShow: isShow.value,
+        class: "bk-info-wrapper",
         onClosed,
         onConfirm
       }), getContent());
@@ -23309,7 +23340,6 @@ const mergeDateHMS = (date, ...hms) => {
   newDate.setSeconds(hms[2]);
   return newDate;
 };
-const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
 const dateTableProps = {
   tableDate: {
     type: Date,
@@ -27974,7 +28004,11 @@ var CascaderPanel = defineComponent({
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def("auto"),
     height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(216),
     store: PropTypes.object.def({}),
-    modelValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number).def([]), PropTypes.arrayOf(PropTypes.string).def([])])
+    separator: PropTypes.string.def(""),
+    suggestions: PropTypes.arrayOf(A()),
+    isFiltering: PropTypes.bool.def(false),
+    searchKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(""),
+    modelValue: PropTypes.arrayOf(PropTypes.oneOfType([q(), String, Number]))
   },
   emits: ["update:modelValue"],
   setup(props2, {
@@ -28008,6 +28042,9 @@ var CascaderPanel = defineComponent({
       checkValue.value = value;
     };
     const nodeCheckHandler = (node) => {
+      if (node.isDisabled) {
+        return;
+      }
       if (node.config.multiple) {
         checkValue.value = store.getCheckedNodes().map((node2) => node2.path);
       } else {
@@ -28057,6 +28094,23 @@ var CascaderPanel = defineComponent({
       };
       return events;
     };
+    const searchPanelEvents = (node) => {
+      const {
+        multiple
+      } = node.config;
+      const events = {
+        onClick: (e) => {
+          if (multiple) {
+            e.stopPropagation();
+            checkNode(node, !node.checked);
+            return;
+          }
+          nodeExpandHandler(node);
+          node.isLeaf && !multiple && nodeCheckHandler(node);
+        }
+      };
+      return events;
+    };
     const isNodeInPath = (node) => {
       const currentLevel = activePath.value[node.level - 1] || {};
       return currentLevel.id === node.id;
@@ -28066,12 +28120,12 @@ var CascaderPanel = defineComponent({
         multiple
       } = node.config;
       if (multiple) {
-        return false;
+        return checkValue2.some((val) => arrayEqual(val, node.path));
       }
       return arrayEqual(checkValue2, node.path);
     };
     const checkNode = (node, value) => {
-      node.setNodeCheck(value);
+      node.setNodeCheck(value ? value : false);
       nodeCheckHandler(node);
     };
     const iconRender = (node) => node.loading ? createVNode(spinner, {
@@ -28098,13 +28152,35 @@ var CascaderPanel = defineComponent({
       checkNode,
       iconRender,
       panelWidth,
-      panelHeight
+      panelHeight,
+      searchPanelEvents
     };
   },
   render() {
+    const emptyWidth = parseInt(this.panelWidth, 10) > 200 ? this.panelWidth : `${200}px`;
+    const searchPanelRender = () => this.suggestions.length ? createVNode("ul", {
+      "class": "bk-cascader-panel bk-scroll-y",
+      "style": {
+        height: this.panelHeight,
+        width: this.panelWidth
+      }
+    }, [this.suggestions.map((node) => createVNode("li", mergeProps({
+      "class": ["bk-cascader-node", {
+        "is-selected": this.isNodeInPath(node)
+      }, {
+        "is-disabled": node.isDisabled
+      }, {
+        "is-checked": this.isCheckedNode(node, this.checkValue)
+      }]
+    }, this.searchPanelEvents(node)), [node.pathNames.join(this.separator)]))]) : createVNode("div", {
+      "class": "bk-cascader-search-empty",
+      "style": {
+        width: emptyWidth
+      }
+    }, [createVNode("span", null, [createTextVNode("\u6682\u65E0\u641C\u7D22\u7ED3\u679C")])]);
     return createVNode("div", {
       "class": "bk-cascader-panel-wrapper"
-    }, [this.menus.list.map((menu2) => createVNode("ul", {
+    }, [this.isFiltering ? searchPanelRender() : this.menus.list.map((menu2) => createVNode("ul", {
       "class": "bk-cascader-panel bk-scroll-y",
       "style": {
         height: this.panelHeight,
@@ -28118,12 +28194,13 @@ var CascaderPanel = defineComponent({
         }, {
           "is-disabled": node.isDisabled
         }, {
-          "is-checked": this.isCheckedNode(node, this.checkValue)
+          "is-checked": !node.config.multiple && this.isCheckedNode(node, this.checkValue)
         }]
-      }, this.nodeEvent(node)), [node.config.multiple && createVNode(BkCheckbox, {
+      }, Object.assign(this.nodeEvent(node), node.config.multiple ? {} : {})), [node.config.multiple && createVNode(BkCheckbox, {
         "disabled": node.isDisabled,
         "modelValue": node.checked,
         "onUpdate:modelValue": ($event) => node.checked = $event,
+        "indeterminate": node.isIndeterminate,
         "onChange": (val) => this.checkNode(node, val)
       }, null), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, {
         node,
@@ -28132,6 +28209,15 @@ var CascaderPanel = defineComponent({
     })]))]);
   }
 });
+function isNodeDisabled(node) {
+  if (node.data.disabled) {
+    return true;
+  }
+  if (node.level !== 1) {
+    return isNodeDisabled(node.parent);
+  }
+  return node.data.disabled;
+}
 class Node$1 {
   constructor(node, config, parent) {
     this.data = node;
@@ -28163,10 +28249,58 @@ class Node$1 {
     return !(Array.isArray(this.children) && ((_a = this.children) == null ? void 0 : _a.length) !== 0);
   }
   get isDisabled() {
-    return this.data.disabled;
+    return isNodeDisabled(this);
+  }
+  broadcast(event, checkStatus) {
+    const handlerName = `onParent${capitalize(event)}`;
+    this.children.forEach((child) => {
+      var _a;
+      if (child) {
+        child.broadcast(event, checkStatus);
+        (_a = child[handlerName]) == null ? void 0 : _a.call(child, checkStatus);
+      }
+    });
+  }
+  emit(event) {
+    var _a;
+    const { parent } = this;
+    const handlerName = `onChild${capitalize(event)}`;
+    if (parent) {
+      (_a = parent[handlerName]) == null ? void 0 : _a.call(parent);
+      parent.emit(event);
+    }
+  }
+  onParentCheck(checked) {
+    if (!this.isDisabled) {
+      this.setCheckState(checked);
+    }
+  }
+  onChildCheck() {
+    const { children } = this;
+    const validChildren = children.filter((child) => !child.isDisabled);
+    const checked = validChildren.length ? validChildren.every((child) => child.checked) : false;
+    this.setCheckState(checked);
+  }
+  setCheckState(checked) {
+    const totalNum = this.children.length;
+    const checkedNum = this.children.reduce((c2, p2) => {
+      const tempNum = p2.isIndeterminate ? 0.5 : 0;
+      const num = p2.checked ? 1 : tempNum;
+      return c2 + num;
+    }, 0);
+    this.checked = checked;
+    this.isIndeterminate = checkedNum !== totalNum && checkedNum > 0;
   }
   setNodeCheck(status) {
-    this.checked = status;
+    if (this.checked !== status) {
+      if (this.config.checkAnyLevel) {
+        this.checked = status;
+        return;
+      }
+      this.broadcast("check", status);
+      this.setCheckState(status);
+      this.emit("check");
+    }
   }
   calculateNodesPath() {
     const nodes = [this];
@@ -28197,6 +28331,21 @@ class Store {
   getNodes() {
     return this.nodes;
   }
+  clearChecked() {
+    this.getFlattedNodes().forEach((node) => {
+      node.checked = false;
+      node.isIndeterminate = false;
+    });
+  }
+  removeTag(tag2) {
+    this.getFlattedNodes().find((node) => {
+      if (arrayEqual(tag2, node.path)) {
+        node.checked = false;
+        return true;
+      }
+      return false;
+    });
+  }
   getFlattedNodes(leafOnly = false) {
     return flatNodes(this.nodes, leafOnly);
   }
@@ -28230,7 +28379,7 @@ var Component$6 = defineComponent({
     BkPopover: BkPopover2
   },
   props: {
-    modelValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number).def([]), PropTypes.arrayOf(PropTypes.string).def([])]),
+    modelValue: PropTypes.arrayOf(PropTypes.oneOfType([q(), String, Number])),
     list: PropTypes.array.def([]),
     placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
     filterable: PropTypes.bool.def(false),
@@ -28272,6 +28421,9 @@ var Component$6 = defineComponent({
       modelValue
     } = toRefs(props2);
     const cascaderPanel = ref();
+    const searchKey = ref("");
+    const suggestions = ref([]);
+    const isFiltering = ref(false);
     const checkedValue = computed({
       get: () => modelValue.value,
       set: (value) => {
@@ -28280,6 +28432,9 @@ var Component$6 = defineComponent({
     });
     const popover3 = ref(null);
     const getShowText = (node) => props2.showCompleteName ? node.pathNames.join(separator2) : node.pathNames[node.pathNames.length - 1];
+    const updateSearchKey = () => {
+      searchKey.value = selectedText.value;
+    };
     const updateValue = (val) => {
       var _a;
       if (multiple) {
@@ -28298,9 +28453,12 @@ var Component$6 = defineComponent({
           return;
         selectedText.value = getShowText(node);
       }
+      updateSearchKey();
     };
     const handleClear = (e) => {
       e.stopPropagation();
+      store.value.clearChecked();
+      searchKey.value = "";
       updateValue([]);
       emit("update:modelValue", []);
       emit("clear", JSON.parse(JSON.stringify(props2.modelValue)));
@@ -28308,8 +28466,10 @@ var Component$6 = defineComponent({
     const removeTag = (value, index, e) => {
       e.stopPropagation();
       const current = JSON.parse(JSON.stringify(value));
-      current.splice(index, 1);
+      const tag2 = current.splice(index, 1)[0];
+      store.value.removeTag(tag2);
       updateValue(current);
+      emit("update:modelValue", store.value.getCheckedNodes().map((node) => node.path));
     };
     const modelValueChangeHandler = (value, oldValue) => {
       updateValue(value);
@@ -28322,7 +28482,27 @@ var Component$6 = defineComponent({
     };
     const popoverChangeEmitter = (val) => {
       emit("toggle", val.isShow);
+      if (!val.isShow) {
+        isFiltering.value = false;
+      }
     };
+    const searchInputHandler = debounce(200, (e) => {
+      const target = e.target;
+      searchKey.value = target.value;
+      if (searchKey.value === "") {
+        isFiltering.value = false;
+        return;
+      }
+      isFiltering.value = true;
+      const targetNodes = store.value.getFlattedNodes().filter((node) => {
+        if (props2.checkAnyLevel) {
+          return node.pathNames.join(props2.separator).includes(searchKey.value);
+        }
+        return node.isLeaf && node.pathNames.join(props2.separator).includes(searchKey.value);
+      });
+      suggestions.value = targetNodes;
+      !(popover3 == null ? void 0 : popover3.value.isShow) && (popover3 == null ? void 0 : popover3.value.show());
+    });
     watch(() => props2.modelValue, modelValueChangeHandler, {
       immediate: true
     });
@@ -28344,7 +28524,11 @@ var Component$6 = defineComponent({
       selectedTags,
       removeTag,
       cascaderPanel,
-      popoverChangeEmitter
+      popoverChangeEmitter,
+      searchKey,
+      suggestions,
+      isFiltering,
+      searchInputHandler
     };
   },
   render() {
@@ -28378,7 +28562,8 @@ var Component$6 = defineComponent({
       "class": ["bk-cascader", "bk-cascader-wrapper", this.extCls, {
         "bk-is-show-panel": this.panelShow,
         "is-unselected": this.modelValue.length === 0,
-        "is-hover": this.isHover
+        "is-hover": this.isHover,
+        "is-filterable": this.filterable
       }],
       "tabindex": "0",
       "data-placeholder": this.placeholder,
@@ -28397,10 +28582,12 @@ var Component$6 = defineComponent({
     }, {
       default: () => createVNode("div", {
         "class": "bk-cascader-name"
-      }, [this.multiple && renderTags(), this.filterable ? createVNode("input", {
+      }, [this.multiple && this.selectedTags.length > 0 && renderTags(), this.filterable ? createVNode("input", {
         "class": "bk-cascader-search-input",
         "type": "text",
-        "placeholder": this.placeholder
+        "onInput": this.searchInputHandler,
+        "placeholder": this.placeholder,
+        "value": this.searchKey
       }, null) : createVNode("span", null, [this.selectedText])]),
       content: () => createVNode("div", {
         "class": "bk-cascader-popover"
@@ -28409,6 +28596,10 @@ var Component$6 = defineComponent({
         "ref": "cascaderPanel",
         "width": this.scrollWidth,
         "height": this.scrollHeight,
+        "search-key": this.searchKey,
+        "separator": this.separator,
+        "is-filtering": this.isFiltering,
+        "suggestions": this.suggestions,
         "modelValue": this.checkedValue,
         "onUpdate:modelValue": ($event) => this.checkedValue = $event
       }, {