bkui-vue 0.0.1-beta.424 → 0.0.1-beta.426

package/dist/index.esm.js

@@ -9900,9 +9900,13 @@ const vBkloading = {
     }
   },
   updated(el, binding) {
+    var _a, _b, _c;
     const instance = el[INSTANCE_KEY];
     const { value } = binding;
     updateOptions(value, instance.options);
+    if ((_c = (_b = (_a = instance == null ? void 0 : instance.vm) == null ? void 0 : _a.$el) == null ? void 0 : _b.parentNode) == null ? void 0 : _c.style) {
+      instance.vm.$el.parentNode.style.display = value.loading ? "" : "none";
+    }
   },
   unmounted(el) {
     var _a, _b, _c;
@@ -10757,7 +10761,7 @@ const propsCollapsePanel = __spreadValues({
   alone: PropTypes.bool.def(false),
   icon: PropTypes.string.def("angle-right")
 }, CollapsePanelEventProps);
-function _isSlot$7(s2) {
+function _isSlot$8(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 var CollapsePanel = defineComponent({
@@ -10868,7 +10872,7 @@ var CollapsePanel = defineComponent({
       "onClick": () => this.clickItem()
     }, [this.renderHeader(createVNode(this.collapseIcon, {
       "class": `bk-collapse-icon ${this.isActive && "rotate-icon" || ""}`
-    }, null))]), createVNode(CollapseTransition, null, _isSlot$7(_slot = this.renderPanel()) ? _slot : {
+    }, null))]), createVNode(CollapseTransition, null, _isSlot$8(_slot = this.renderPanel()) ? _slot : {
       default: () => [_slot]
     })])]);
   }
@@ -11142,7 +11146,7 @@ const props$1 = __spreadProps(__spreadValues({}, propsMixin$1), {
   dialogType: dialogTypeUnion(),
   isLoading: PropTypes.bool.def(false)
 });
-function _isSlot$6(s2) {
+function _isSlot$7(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 var Dialog = defineComponent({
@@ -11395,7 +11399,7 @@ var Dialog = defineComponent({
       "onClose": this.handleClose,
       "isShow": this.isModalShow,
       "style": this.data.moveStyle
-    }), _isSlot$6(dialogSlot) ? dialogSlot : {
+    }), _isSlot$7(dialogSlot) ? dialogSlot : {
       default: () => [dialogSlot]
     });
   }
@@ -14061,7 +14065,7 @@ const Line = (_2, {
     "style": titleStyle
   }, [showDefault()])])]), showDefault(false)]);
 };
-function _isSlot$5(s2) {
+function _isSlot$6(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 var Component$q = defineComponent({
@@ -14126,11 +14130,11 @@ var Component$q = defineComponent({
     const $props = __spreadProps(__spreadValues({}, this.$props), {
       percent: this.validPercent(this.percent)
     });
-    let progress2 = createVNode(Line, $props, _isSlot$5(progressInfo) ? progressInfo : {
+    let progress2 = createVNode(Line, $props, _isSlot$6(progressInfo) ? progressInfo : {
       default: () => [progressInfo]
     });
     if (this.type === "circle" || this.type === "dashboard") {
-      progress2 = createVNode(Circle, $props, _isSlot$5(progressInfo) ? progressInfo : {
+      progress2 = createVNode(Circle, $props, _isSlot$6(progressInfo) ? progressInfo : {
         default: () => [progressInfo]
       });
     }
@@ -16845,7 +16849,7 @@ var Component$k = defineComponent({
   }
 });
 const BkSelect = withInstallProps(Component$k, { Option: BkOption, Group: OptionGroup });
-function _isSlot$4(s2) {
+function _isSlot$5(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 const {
@@ -16939,7 +16943,7 @@ var Component$j = defineComponent({
         "onHidden": handleHidden,
         "onShown": handleShown,
         "onClose": handleClose
-      }), _isSlot$4(dialogSlot) ? dialogSlot : {
+      }), _isSlot$5(dialogSlot) ? dialogSlot : {
         default: () => [dialogSlot]
       });
     };
@@ -17687,7 +17691,7 @@ var useScrollLoading = (props2, ctx) => {
     renderScrollLoading
   };
 };
-function _isSlot$3(s2) {
+function _isSlot$4(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 var useLimit = (t2) => {
@@ -17734,7 +17738,7 @@ var useLimit = (t2) => {
       "modelValue": localLimit.value,
       "onChange": handleLimitChange,
       "disabled": proxy.disabled
-    }, _isSlot$3(_slot = proxy.limitList.map((num, index2) => createVNode(BkOption, {
+    }, _isSlot$4(_slot = proxy.limitList.map((num, index2) => createVNode(BkOption, {
       "value": num,
       "label": `${num}`,
       "key": `${index2}_${num}`
@@ -19317,7 +19321,7 @@ class TablePlugins {
     this.ctx = ctx;
   }
 }
-function _isSlot$2(s2) {
+function _isSlot$3(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 var Settings = defineComponent({
@@ -19501,7 +19505,7 @@ var Settings = defineComponent({
           "class": "setting-body-fields",
           "modelValue": checkedFields.value,
           "onUpdate:modelValue": ($event) => checkedFields.value = $event
-        }, _isSlot$2(_slot2 = renderFields.value.map((item, index2) => {
+        }, _isSlot$3(_slot2 = renderFields.value.map((item, index2) => {
           let _slot;
           return createVNode("div", {
             "class": "field-item"
@@ -19509,7 +19513,7 @@ var Settings = defineComponent({
             "checked": checkedFields.value.includes(resolvedColVal(item, index2)),
             "label": resolvedColVal(item, index2),
             "disabled": isItemReadonly(item, index2)
-          }, _isSlot$2(_slot = resolvePropVal(item, "label", [item, index2])) ? _slot : {
+          }, _isSlot$3(_slot = resolvePropVal(item, "label", [item, index2])) ? _slot : {
             default: () => [_slot]
           })]);
         })) ? _slot2 : {
@@ -19620,7 +19624,7 @@ var useFixedColumn = (_props, colgroups, hasScrollY) => {
     resolveColumnClass
   };
 };
-function _isSlot$1(s2) {
+function _isSlot$2(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 class TableRender {
@@ -19871,7 +19875,7 @@ class TableRender {
         "title": showTitle,
         "observerResize": this.props.observerResize,
         "resizerWay": this.props.resizerWay
-      }, _isSlot$1(cells) ? cells : {
+      }, _isSlot$2(cells) ? cells : {
         default: () => [cells]
       });
     };
@@ -19979,7 +19983,7 @@ class TableRender {
               "row": row,
               "parentSetting": this.props.showOverflowTooltip,
               "observerResize": this.props.observerResize
-            }, _isSlot$1(_slot = this.renderCell(row, column, rowIndex, rows)) ? _slot : {
+            }, _isSlot$2(_slot = this.renderCell(row, column, rowIndex, rows)) ? _slot : {
               default: () => [_slot]
             })]);
           }
@@ -29354,8 +29358,12 @@ const transferProps = {
   sortable: PropTypes.bool.def(false),
   sourceList: PropTypes.arrayOf(PropTypes.any).def([]),
   targetList: PropTypes.arrayOf(PropTypes.any).def([]),
-  emptyContent: PropTypes.arrayOf(PropTypes.string).def([])
+  emptyContent: PropTypes.arrayOf(PropTypes.string).def([]),
+  multiple: PropTypes.bool.def(false)
 };
+function _isSlot$1(s2) {
+  return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
+}
 function useTransferData(sourceData, targetList, settingCode) {
   const selectList = ref([]);
   const selectedList = ref([]);
@@ -29407,6 +29415,14 @@ var Component$a = defineComponent({
     emit
   }) {
     const t2 = useLocale("transfer");
+    const multipleSelectAllValue = ref({
+      source: false,
+      target: false
+    });
+    const multipleSelectList = ref({
+      source: [],
+      target: []
+    });
     const sourceListType = computed(() => {
       if (Array.isArray(props2.sourceList)) {
         const isObjectArray = props2.sourceList.every((s2) => s2.toString().includes("[object Object]"));
@@ -29455,7 +29471,9 @@ var Component$a = defineComponent({
       });
     });
     watch(() => [selectList, selectedList], () => {
-      handleEmitUpdateTargetList();
+      if (!props2.multiple) {
+        handleEmitUpdateTargetList();
+      }
     }, {
       deep: true
     });
@@ -29497,6 +29515,25 @@ var Component$a = defineComponent({
       emit("update:targetList", targetList2);
       emit("change", sourceListType.value === ArrayType.BASE_ARRAY ? restList : selectList.value.map((v2) => toRaw(v2)), sourceListType.value === ArrayType.BASE_ARRAY ? targetList2 : selectedList.value.map((v2) => toRaw(v2)), targetList2);
     };
+    const handleItemChecked = (dirct) => {
+      const target = dirct === "source" ? selectList : selectedList;
+      multipleSelectAllValue.value[dirct] = multipleSelectList.value[dirct].length === target.value.length;
+    };
+    const handleAllChecked = (value, dirct) => {
+      const target = dirct === "source" ? selectList : selectedList;
+      multipleSelectList.value[dirct] = value ? target.value.map((item) => item[settingCode.value]) : [];
+    };
+    const handleMultipleChange = (dirct) => {
+      const isLeft = dirct === "left";
+      const from = isLeft ? selectList : selectedList;
+      const to = isLeft ? selectedList : selectList;
+      const checkeds = multipleSelectList.value[isLeft ? "source" : "target"];
+      const items = from.value.filter((val) => checkeds.includes(val[settingCode.value]));
+      from.value = from.value.filter((val) => !checkeds.includes(val[settingCode.value]));
+      to.value.push(...items);
+      multipleSelectList.value[isLeft ? "source" : "target"] = [];
+      handleEmitUpdateTargetList();
+    };
     return {
       selectSearchQuery,
       selectListSearch,
@@ -29508,17 +29545,28 @@ var Component$a = defineComponent({
       allToRight,
       allToLeft,
       handleItemClick,
-      t: t2
+      t: t2,
+      handleAllChecked,
+      multipleSelectAllValue,
+      multipleSelectList,
+      handleMultipleChange,
+      handleItemChecked
     };
   },
   render() {
+    const {
+      multiple
+    } = this.$props;
     const leftList = this.sortable ? this.selectListSort : this.selectListSearch;
     const rightList = this.sortable ? this.selectedListSort : this.selectedList;
     const getHeaderHtml = (dirct) => {
       var _a, _b;
       const isLeft = dirct === "left-header";
+      const selectField = isLeft ? "source" : "target";
       const titleText = isLeft ? `${(_a = this.title[0]) != null ? _a : this.t.sourceList}` : `${(_b = this.title[1]) != null ? _b : this.t.targetList}`;
       const isDisabled = isLeft ? !leftList.length : !rightList.length;
+      const isIndeterminate = !!this.multipleSelectList[selectField].length && !this.multipleSelectAllValue[selectField];
+      const selectCount = this.multipleSelectList[selectField].length;
       const headerClick = () => {
         if (isDisabled)
           return;
@@ -29528,8 +29576,24 @@ var Component$a = defineComponent({
         "class": "slot-header"
       }, [this.$slots[dirct]()]) : createVNode("div", {
         "class": "header"
-      }, [`${titleText}\uFF08${isLeft ? leftList.length : rightList.length}\uFF09`, createVNode("span", {
+      }, [this.multiple ? createVNode(BkCheckbox, {
+        "class": "header-checkbox",
+        "label": titleText,
+        "modelValue": this.multipleSelectAllValue[selectField],
+        "onUpdate:modelValue": ($event) => this.multipleSelectAllValue[selectField] = $event,
+        "indeterminate": isIndeterminate,
+        "onChange": (val) => this.handleAllChecked(val, selectField)
+      }, null) : createVNode(Fragment, null, [`${titleText}\uFF08${isLeft ? leftList.length : rightList.length}\uFF09`]), this.multiple ? createVNode("div", {
+        "class": "select-total-count"
+      }, [createVNode("span", {
+        "class": "select-count"
+      }, [selectCount]), createVNode("span", {
+        "class": "count-delimiter"
+      }, [createTextVNode("/")]), createVNode("span", {
+        "class": "total-count"
+      }, [isLeft ? leftList.length : rightList.length])]) : createVNode("span", {
         "class": {
+          "select-all": true,
           disabled: isDisabled
         },
         "onClick": () => headerClick()
@@ -29551,7 +29615,7 @@ var Component$a = defineComponent({
       }, [createVNode("span", {
         "class": "content-text",
         "title": item[this.displayCode]
-      }, [item[this.displayCode]]), createVNode("span", {
+      }, [item[this.displayCode]]), !multiple && createVNode("span", {
         "class": "icon-wrapper"
       }, [isLeft ? createVNode(arrowsRight, {
         "class": "bk-icon icon-move"
@@ -29560,11 +29624,28 @@ var Component$a = defineComponent({
       }, null)])]);
     };
     const getListContentHtml = (dirct) => {
+      let _slot;
       const isLeft = dirct === "left";
+      const selectField = dirct === "left" ? "source" : "target";
       const list = isLeft ? leftList : rightList;
       const slotName = isLeft ? "source-option" : "target-option";
       const emptySlotName = isLeft ? "left-empty-content" : "right-empty-content";
-      return list.length ? createVNode("ul", {
+      const contentMode = multiple ? createVNode(BkCheckboxGroup, {
+        "class": "content is-flex",
+        "modelValue": this.multipleSelectList[selectField],
+        "onUpdate:modelValue": ($event) => this.multipleSelectList[selectField] = $event,
+        "onChange": () => this.handleItemChecked(selectField)
+      }, _isSlot$1(_slot = list.map((item) => createVNode("div", null, [createVNode(BkCheckbox, {
+        "class": "checkbox-item",
+        "label": item[this.settingCode]
+      }, {
+        default: () => {
+          var _a, _b, _c;
+          return [(_c = (_b = (_a = this.$slots)[slotName]) == null ? void 0 : _b.call(_a, item)) != null ? _c : getDefaultListHtml(item, isLeft)];
+        }
+      })]))) ? _slot : {
+        default: () => [_slot]
+      }) : createVNode("ul", {
         "class": ["content", this.searchable && isLeft ? "is-search" : ""]
       }, [list.map((item) => {
         var _a, _b, _c;
@@ -29573,7 +29654,8 @@ var Component$a = defineComponent({
           "class": [this.$slots[slotName] ? "custom-item" : ""],
           "onClick": () => this.handleItemClick(item, isLeft)
         }, [(_c = (_b = (_a = this.$slots)[slotName]) == null ? void 0 : _b.call(_a, item)) != null ? _c : getDefaultListHtml(item, isLeft)]);
-      })]) : getEmptyHtml(emptySlotName);
+      })]);
+      return list.length ? contentMode : getEmptyHtml(emptySlotName);
     };
     return createVNode("div", {
       "class": ["bk-transfer", this.extCls]
@@ -29589,7 +29671,19 @@ var Component$a = defineComponent({
       prefix: () => createVNode(search, {
         "class": "icon-search"
       }, null)
-    }), getListContentHtml("left")]), createVNode(transfer, {
+    }), getListContentHtml("left")]), multiple ? createVNode("div", {
+      "class": "transfer-button-group"
+    }, [createVNode("div", {
+      "class": ["transfer-button", {
+        disabled: !this.multipleSelectList.source.length
+      }],
+      "onClick": () => this.handleMultipleChange("left")
+    }, [createVNode(angleRight, null, null)]), createVNode("div", {
+      "class": ["transfer-button", {
+        disabled: !this.multipleSelectList.target.length
+      }],
+      "onClick": () => this.handleMultipleChange("right")
+    }, [createVNode(angleLeft, null, null)])]) : createVNode(transfer, {
       "class": "transfer"
     }, null), createVNode("div", {
       "class": "target-list"