bkui-vue 0.0.1-beta.194 → 0.0.1-beta.195

package/dist/index.esm.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key2, value) => {
   __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
   return value;
 };
-import { inject, createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Transition, provide, createTextVNode, isVNode, withDirectives, vShow, renderSlot, Fragment, toRefs, createApp, Teleport, resolveDirective, customRef, onBeforeMount, toRef, vModelText, unref, watchEffect, onUpdated, render as render$1, onUnmounted, shallowRef, toRaw, withModifiers, TransitionGroup } from "vue";
+import { inject, createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Transition, provide, createTextVNode, isVNode, withDirectives, vShow, renderSlot, Fragment, toRefs, createApp, Teleport, resolveDirective, customRef, onBeforeMount, toRef, vModelText, unref, watchEffect, markRaw, onUpdated, render as render$1, onUnmounted, shallowRef, toRaw, withModifiers, TransitionGroup } from "vue";
 var reset = "";
 var alert = "";
 var affix = "";
@@ -10680,6 +10680,7 @@ const EventProps$2 = {
   onAfterShow: Function
 };
 const PopoverProps$1 = __spreadValues({
+  contentCls: PropTypes.string.def(""),
   isShow: PropTypes.bool.def(false),
   always: PropTypes.bool.def(false),
   disabled: PropTypes.bool.def(false),
@@ -10818,11 +10819,13 @@ var Component$q = defineComponent({
     const handleAfterLeave = () => {
       ctx.emit("after-leave");
     };
-    const customThemeCls = compTheme.value.customThemes.join(" ");
-    const customTheme = compTheme.value.customThemes.reduce((out, cur) => __spreadValues({
+    const customTheme = computed(() => compTheme.value.customThemes.reduce((out, cur) => __spreadValues({
       [`data-${cur}-theme`]: true
-    }, out), {});
-    const contentClass = `bk-popover-content ${customThemeCls}`;
+    }, out), {}));
+    const contentClass = computed(() => {
+      const customThemeCls = compTheme.value.customThemes.join(" ");
+      return `bk-popover-content ${customThemeCls} ${props2.contentCls}`.trim();
+    });
     const handleClickContent = (e) => {
       const stopBehaviorFn = (behavior) => {
         if (typeof e[behavior] === "function") {
@@ -10853,9 +10856,9 @@ var Component$q = defineComponent({
           var _a2, _b2, _c;
           return [createVNode("div", mergeProps({
             "ref": refContent,
-            "class": contentClass,
+            "class": contentClass.value,
             "style": compStyle.value
-          }, customTheme, {
+          }, customTheme.value, {
             "onClick": handleClickContent
           }), [(_c = (_b2 = (_a2 = ctx.slots).content) == null ? void 0 : _b2.call(_a2)) != null ? _c : content.value, arrow2.value && createVNode("div", {
             "class": "arrow",
@@ -18884,12 +18887,12 @@ function useFlatList(props2) {
     displayKey,
     list
   } = toRefs(props2);
-  const flatList = reactive([]);
+  const flatList = ref([]);
   watch([useGroup, saveKey, displayKey, list], () => {
-    flatList.splice(0, flatList.length);
-    let formatList = list.value;
+    flatList.value = [];
+    let formatList = markRaw(list.value);
     if (useGroup.value) {
-      formatList = list.value.reduce((formatList2, item) => {
+      formatList = formatList.reduce((formatList2, item) => {
         let children = [];
         if (item.children) {
           children = item.children.map((child) => __spreadValues({
@@ -18902,16 +18905,8 @@ function useFlatList(props2) {
         return formatList2.concat(children);
       }, []);
     }
-    appendToTargetList(formatList);
-  }, { immediate: true, deep: true });
-  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);
-    }
-  }
+    flatList.value = formatList;
+  }, { immediate: true });
   return flatList;
 }
 const getCharLength = (str) => {
@@ -19003,7 +18998,8 @@ const tagProps = () => ({
   withValidate: {
     type: Boolean,
     default: true
-  }
+  },
+  popoverProps: Object
 });
 var TagRender = defineComponent({
   name: "TagRender",
@@ -19042,7 +19038,7 @@ var Component$c = defineComponent({
       isHover: false,
       focusItemIndex: props2.allowCreate ? -1 : 0
     });
-    const popoverProps = reactive({
+    const popoverProps = reactive(__spreadValues({
       isShow: false,
       width: 190,
       modifiers: [{
@@ -19051,7 +19047,7 @@ var Component$c = defineComponent({
           offset: [0, 4]
         }
       }]
-    });
+    }, props2.popoverProps));
     const {
       maxResult
     } = toRefs(props2);
@@ -19077,7 +19073,7 @@ var Component$c = defineComponent({
       active: state.isEdit,
       disabled: props2.disabled
     }));
-    watch([() => [...props2.modelValue], () => [...props2.list]], () => {
+    watch([() => props2.modelValue, () => props2.list], () => {
       var _a;
       nextTick(() => {
         initData();
@@ -19212,7 +19208,7 @@ var Component$c = defineComponent({
         trigger
       } = props2;
       listState.selectedTagList = [];
-      listState.localList = [...formatList];
+      listState.localList = formatList.value;
       if (modelValue.length) {
         modelValue.forEach((tag2) => {
           const value = listState.localList.find((val) => tag2 === val[saveKey]);
@@ -19386,7 +19382,7 @@ var Component$c = defineComponent({
       e.stopPropagation();
       const removeList = listState.selectedTagList;
       listState.selectedTagList = [];
-      const existList = formatList.filter((item) => removeList.some((removeItem) => removeItem[props2.saveKey] === item[props2.saveKey]));
+      const existList = formatList.value.filter((item) => removeList.some((removeItem) => removeItem[props2.saveKey] === item[props2.saveKey]));
       if ((props2.allowCreate && existList.length !== 0 || !props2.allowCreate) && !isSingleSelect.value) {
         listState.localList.push(...existList);
       }
@@ -19420,7 +19416,7 @@ var Component$c = defineComponent({
       swapElementPositions(tagInputItemRef.value, nodes[index - 1]);
       listState.selectedTagList.splice(index - 1, 1);
       focusInputTrigger();
-      const isExistInit = formatList.some((item) => item === target[props2.saveKey]);
+      const isExistInit = formatList.value.some((item) => item === target[props2.saveKey]);
       if ((props2.allowCreate && isExistInit || !props2.allowCreate) && !isSingleSelect.value) {
         listState.localList.push(target);
       }
@@ -19643,7 +19639,7 @@ var Component$c = defineComponent({
     };
     const removeTag = (data2, index) => {
       listState.selectedTagList.splice(index, 1);
-      const isExistInit = formatList.some((item) => item === data2[props2.saveKey]);
+      const isExistInit = formatList.value.some((item) => item === data2[props2.saveKey]);
       if ((props2.allowCreate && isExistInit || !props2.allowCreate) && !isSingleSelect.value) {
         listState.localList.push(data2);
       }
@@ -19678,56 +19674,20 @@ var Component$c = defineComponent({
     });
   },
   render() {
-    const renderSelectorList = () => {
-      if (this.useGroup) {
-        return this.renderList.map((group) => createVNode("li", {
-          "class": "bk-selector-group-item"
-        }, [createVNode("span", {
-          "class": "group-name"
-        }, [group.name, createTextVNode(" ("), group.children.length, createTextVNode(")")]), createVNode("ul", {
-          "class": "bk-selector-group-list-item"
-        }, [group.children.map((item, index) => createVNode("li", {
-          "class": ["bk-selector-list-item", {
-            disabled: item.disabled
-          }, this.activeClass(item, index)],
-          "onClick": this.handleTagSelected.bind(this, item, "select")
-        }, [createVNode(ListTagRender, {
-          "node": item,
-          "displayKey": this.displayKey,
-          "tpl": this.tpl,
-          "searchKey": this.searchKey,
-          "searchKeyword": this.curInputValue
-        }, null)]))])]));
-      }
-      return this.renderList.map((item, index) => createVNode("li", {
-        "class": ["bk-selector-list-item", {
-          disabled: item.disabled
-        }, this.activeClass(item, index)],
-        "onClick": this.handleTagSelected.bind(this, item, "select")
-      }, [createVNode(ListTagRender, {
-        "node": item,
-        "displayKey": this.displayKey,
-        "tpl": this.tpl,
-        "searchKey": this.searchKey,
-        "searchKeyword": this.curInputValue
-      }, null)]));
-    };
     return createVNode("div", {
       "class": "bk-tag-input",
       "ref": "bkTagSelectorRef",
       "onClick": this.focusInputTrigger,
       "onMouseenter": () => this.isHover = true,
       "onMouseleave": () => this.isHover = false
-    }, [createVNode(BkPopover, {
+    }, [createVNode(BkPopover, mergeProps({
       "ref": "popoverRef",
       "theme": "light",
       "trigger": "manual",
       "placement": "bottom-start",
-      "arrow": false,
-      "width": this.popoverProps.width,
-      "isShow": this.popoverProps.isShow,
-      "modifiers": this.popoverProps.modifiers
-    }, {
+      "content-cls": "bk-tag-input-popover-content",
+      "arrow": false
+    }, this.popoverProps), {
       default: () => {
         var _a, _b, _c;
         return createVNode("div", {
@@ -19787,7 +19747,35 @@ var Component$c = defineComponent({
           "max-height": `${this.contentMaxHeight}px`
         },
         "class": "outside-ul"
-      }, [renderSelectorList(), this.isPageLoading ? createVNode("li", {
+      }, [this.renderList.map((group, index) => this.useGroup ? createVNode("li", {
+        "class": "bk-selector-group-item"
+      }, [createVNode("span", {
+        "class": "group-name"
+      }, [group.name, createTextVNode(" ("), group.children.length, createTextVNode(")")]), createVNode("ul", {
+        "class": "bk-selector-group-list-item"
+      }, [group.children.map((item, index2) => createVNode("li", {
+        "class": ["bk-selector-list-item", {
+          disabled: item.disabled
+        }, this.activeClass(item, index2)],
+        "onClick": this.handleTagSelected.bind(this, item, "select")
+      }, [createVNode(ListTagRender, {
+        "node": item,
+        "displayKey": this.displayKey,
+        "tpl": this.tpl,
+        "searchKey": this.searchKey,
+        "searchKeyword": this.curInputValue
+      }, null)]))])]) : createVNode("li", {
+        "class": ["bk-selector-list-item", {
+          disabled: group.disabled
+        }, this.activeClass(group, index)],
+        "onClick": this.handleTagSelected.bind(this, group, "select")
+      }, [createVNode(ListTagRender, {
+        "node": group,
+        "displayKey": this.displayKey,
+        "tpl": this.tpl,
+        "searchKey": this.searchKey,
+        "searchKeyword": this.curInputValue
+      }, null)])), this.isPageLoading ? createVNode("li", {
         "class": "bk-selector-list-item loading"
       }, [createVNode(BkLoading, {
         "theme": "primary",