bkui-vue 0.0.1-beta.425 → 0.0.1-beta.427

package/dist/index.esm.js

@@ -10761,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({
@@ -10872,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]
     })])]);
   }
@@ -11146,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({
@@ -11399,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]
     });
   }
@@ -14065,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({
@@ -14130,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]
       });
     }
@@ -16849,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 {
@@ -16943,7 +16943,7 @@ var Component$j = defineComponent({
         "onHidden": handleHidden,
         "onShown": handleShown,
         "onClose": handleClose
-      }), _isSlot$4(dialogSlot) ? dialogSlot : {
+      }), _isSlot$5(dialogSlot) ? dialogSlot : {
         default: () => [dialogSlot]
       });
     };
@@ -17488,10 +17488,11 @@ const tableProps = {
 var Column = defineComponent({
   name: "TableColumn",
   props: __spreadProps(__spreadValues({}, IColumnType), {
-    prop: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")])
+    prop: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
+    index: PropTypes.number.def(void 0)
   }),
   setup(props2) {
-    const initColumns = inject(PROVIDE_KEY_INIT_COL, (_column, _remove = false) => {
+    const initColumns = inject(PROVIDE_KEY_INIT_COL, (_col, _rm = false) => {
     }, false);
     const bkTableCache = inject(PROVIDE_KEY_TB_CACHE, {
       queueStack: (_2, fn2) => fn2 == null ? void 0 : fn2()
@@ -17506,13 +17507,20 @@ var Column = defineComponent({
     };
   },
   unmounted() {
-    this.updateColumnDefine();
+    this.updateColumnDefine(true);
   },
   mounted() {
     this.updateColumnDefine();
   },
   methods: {
-    updateColumnDefine() {
+    updateColumnDefine(unmounted = false) {
+      if (this.$props.index !== void 0 && typeof this.$props.index === "number") {
+        this.updateColumnDefineByIndex(unmounted);
+        return;
+      }
+      this.updateColumnDefineByParent();
+    },
+    updateColumnDefineByParent() {
       const fn2 = () => {
         const selfVnode = this._;
         const colList = selfVnode.parent.vnode.children.default() || [];
@@ -17543,6 +17551,13 @@ var Column = defineComponent({
       if (typeof this.bkTableCache.queueStack === "function") {
         this.bkTableCache.queueStack(BK_COLUMN_UPDATE_DEFINE, fn2);
       }
+    },
+    updateColumnDefineByIndex(unmounted = false) {
+      const resolveProp = __spreadProps(__spreadValues({}, this.$props), {
+        field: this.$props.prop || this.$props.field,
+        render: this.$slots.default
+      });
+      this.initColumns(unref(resolveProp), unmounted);
     }
   },
   render() {
@@ -17691,7 +17706,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) => {
@@ -17738,7 +17753,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}`
@@ -19321,7 +19336,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({
@@ -19505,7 +19520,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"
@@ -19513,7 +19528,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 : {
@@ -19624,7 +19639,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 {
@@ -19875,7 +19890,7 @@ class TableRender {
         "title": showTitle,
         "observerResize": this.props.observerResize,
         "resizerWay": this.props.resizerWay
-      }, _isSlot$1(cells) ? cells : {
+      }, _isSlot$2(cells) ? cells : {
         default: () => [cells]
       });
     };
@@ -19983,7 +19998,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]
             })]);
           }
@@ -20139,15 +20154,27 @@ var useColumn = (props2, targetColumns) => {
       resolveColumns = column;
     }
     if (!remove) {
-      const resetColumns = resolveColumns.map((col) => {
-        const exist = targetColumns.find((tc) => tc.label === col.label && tc.field === col.field);
-        if (exist) {
-          return exist;
+      let needToSort = false;
+      resolveColumns.forEach((col) => {
+        if (col.index !== void 0 && col.index >= 0) {
+          needToSort = true;
+          const oldIndex = targetColumns.findIndex((tc) => tc.label === col.label && tc.field === col.field);
+          if (oldIndex >= 0) {
+            targetColumns.splice(oldIndex, 1);
+          }
+          targetColumns.push(col);
+        } else {
+          const index2 = targetColumns.findIndex((tc) => tc.label === col.label && tc.field === col.field);
+          if (index2 >= 0) {
+            targetColumns.splice(index2, 1, col);
+          } else {
+            targetColumns.push(col);
+          }
         }
-        return unref(col);
       });
-      targetColumns.length = 0;
-      targetColumns.push(...resetColumns);
+      if (needToSort) {
+        targetColumns.sort((col1, col2) => col1.index - col2.index);
+      }
     } else {
       resolveColumns.forEach((col) => {
         const matchColIndex = targetColumns.findIndex((c2) => c2.label === col.label && c2.field === col.field);
@@ -29358,8 +29385,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([]);
@@ -29411,6 +29442,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]"));
@@ -29459,7 +29498,9 @@ var Component$a = defineComponent({
       });
     });
     watch(() => [selectList, selectedList], () => {
-      handleEmitUpdateTargetList();
+      if (!props2.multiple) {
+        handleEmitUpdateTargetList();
+      }
     }, {
       deep: true
     });
@@ -29501,6 +29542,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,
@@ -29512,17 +29572,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;
@@ -29532,8 +29603,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()
@@ -29555,7 +29642,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"
@@ -29564,11 +29651,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;
@@ -29577,7 +29681,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]
@@ -29593,7 +29698,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"
@@ -32248,23 +32365,7 @@ var Component$8 = defineComponent({
       }), [[resolveDirective("bk-tooltips"), collapseTooltip.join(", ")]])]);
     };
     const textRender = () => this.multiple ? null : createVNode("span", null, [this.selectedText]);
-    return createVNode("div", {
-      "class": [resolveClassName("cascader-wrapper"), this.floatMode ? "float-mode" : ""]
-    }, [createVNode("div", {
-      "class": [resolveClassName("cascader"), this.extCls, {
-        "is-unselected": this.modelValue.length === 0,
-        "is-hover": this.isHover,
-        "is-filterable": this.filterable,
-        "is-focus": this.isFocus,
-        "is-disabled": this.disabled,
-        "is-simplicity": this.behavior === "simplicity"
-      }],
-      "tabindex": "0",
-      "data-placeholder": this.placeholder,
-      "onMouseenter": this.setHover,
-      "onMouseleave": this.cancelHover,
-      "ref": "bkCascaderRef"
-    }, [suffixIcon(), createVNode(BkPopover, {
+    const popoverRender = () => createVNode(BkPopover, {
       "placement": "bottom-start",
       "theme": `light ${resolveClassName("cascader-popover")}`,
       "trigger": "click",
@@ -32276,7 +32377,9 @@ var Component$8 = defineComponent({
       "onAfterShow": this.popoverChangeEmitter,
       "boundary": "body"
     }, {
-      default: () => createVNode("div", {
+      default: () => this.$slots.trigger ? this.$slots.trigger({
+        selected: this.modelValue
+      }) : createVNode("div", {
         "class": [resolveClassName("cascader-name"), "bk-scroll-y"]
       }, [this.multiple && this.selectedTags.length > 0 && renderTags(), this.filterable ? (this.isCollapse || this.selectedTags.length === 0) && createVNode("input", {
         "class": [resolveClassName("cascader-search-input"), {
@@ -32307,7 +32410,24 @@ var Component$8 = defineComponent({
           "class": resolveClassName("cascader-node-name")
         }, [scope.node.name])
       })])
-    })])]);
+    });
+    return createVNode("div", {
+      "class": [resolveClassName("cascader-wrapper"), this.floatMode ? "float-mode" : ""]
+    }, [this.$slots.trigger ? popoverRender() : createVNode("div", {
+      "class": [resolveClassName("cascader"), this.extCls, {
+        "is-unselected": this.modelValue.length === 0,
+        "is-hover": this.isHover,
+        "is-filterable": this.filterable,
+        "is-focus": this.isFocus,
+        "is-disabled": this.disabled,
+        "is-simplicity": this.behavior === "simplicity"
+      }],
+      "tabindex": "0",
+      "data-placeholder": this.placeholder,
+      "onMouseenter": this.setHover,
+      "onMouseleave": this.cancelHover,
+      "ref": "bkCascaderRef"
+    }, [suffixIcon(), popoverRender()])]);
   }
 });
 const BkCascader = withInstallProps(Component$8, { CascaderPanel });