bkui-vue 0.0.1-beta.39 → 0.0.1-beta.390

package/lib/transfer/index.js

@@ -0,0 +1,573 @@
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
+import * as __WEBPACK_EXTERNAL_MODULE__icon__2ba2075d__ from "../icon/";
+import * as __WEBPACK_EXTERNAL_MODULE__input_752b0149__ from "../input";
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Z": () => (/* binding */ src)
+});
+
+;// CONCATENATED MODULE: external "../shared"
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstall });
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/iterableToArray.js
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toConsumableArray.js
+
+
+
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+;// CONCATENATED MODULE: external "vue"
+var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_y = x => () => x
+const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["toRaw"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRaw, ["toRefs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRefs, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
+;// CONCATENATED MODULE: external "../icon/"
+var _x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var _y = x => () => x
+const _namespaceObject = _x({ ["ArrowsRight"]: () => __WEBPACK_EXTERNAL_MODULE__icon__2ba2075d__.ArrowsRight, ["Error"]: () => __WEBPACK_EXTERNAL_MODULE__icon__2ba2075d__.Error, ["Search"]: () => __WEBPACK_EXTERNAL_MODULE__icon__2ba2075d__.Search, ["Transfer"]: () => __WEBPACK_EXTERNAL_MODULE__icon__2ba2075d__.Transfer });
+;// CONCATENATED MODULE: external "../input"
+var external_input_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_input_y = x => () => x
+const external_input_namespaceObject = external_input_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE__input_752b0149__["default"] });
+;// CONCATENATED MODULE: ../../packages/transfer/src/const.ts
+/*
+* Tencent is pleased to support the open source community by making
+* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+*
+* Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+*
+* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+*
+* License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+*
+* ---------------------------------------------------
+* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+* documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+* the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+* to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+* the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+* THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+* IN THE SOFTWARE.
+*/
+// 非数组，基础数据数组，对象数组
+var ArrayType;
+
+(function (ArrayType) {
+  ArrayType["OBJECT_ARRAY"] = "objectArray";
+  ArrayType["BASE_ARRAY"] = "baseArray";
+  ArrayType["NOT_ARRAY"] = "notArray";
+})(ArrayType || (ArrayType = {}));
+;// CONCATENATED MODULE: ../../packages/transfer/src/props.ts
+/*
+* Tencent is pleased to support the open source community by making
+* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+*
+* Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+*
+* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+*
+* License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+*
+* ---------------------------------------------------
+* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+* documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+* the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+* to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+* the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+* THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+* IN THE SOFTWARE.
+*/
+
+var transferProps = {
+  // 顶部title(title[0]: 左侧title,title[1]: 右侧title,)
+  title: external_shared_namespaceObject.PropTypes.arrayOf(external_shared_namespaceObject.PropTypes.string).def([]),
+  // 自定义class
+  extCls: external_shared_namespaceObject.PropTypes.string.def(''),
+  // 搜索框 placeholder
+  searchPlaceholder: external_shared_namespaceObject.PropTypes.string.def(''),
+  // 唯一key值
+  settingKey: external_shared_namespaceObject.PropTypes.string.def('id'),
+  // 循环list时，显示字段的key值(当list为普通数组时可不传传了也无效)
+  displayKey: external_shared_namespaceObject.PropTypes.string.def('value'),
+  // 排序所依据的key(当list为普通数组时可不传，默认按照index值排序)
+  sortKey: external_shared_namespaceObject.PropTypes.string.def('value'),
+  // 内容超出是否显示tooltip
+  showOverflowTips: external_shared_namespaceObject.PropTypes.bool.def(false),
+  // 是否开启搜索
+  searchable: external_shared_namespaceObject.PropTypes.bool.def(false),
+  // 是否开启排序功能
+  sortable: external_shared_namespaceObject.PropTypes.bool.def(false),
+  // 穿梭框数据源(支持普通数组)
+  sourceList: external_shared_namespaceObject.PropTypes.arrayOf(external_shared_namespaceObject.PropTypes.any).def([]),
+  // 默认已选择的数据源
+  targetList: external_shared_namespaceObject.PropTypes.arrayOf(external_shared_namespaceObject.PropTypes.any).def([]),
+  // 穿梭框无数据时提示文案
+  emptyContent: external_shared_namespaceObject.PropTypes.arrayOf(external_shared_namespaceObject.PropTypes.string).def([])
+};
+;// CONCATENATED MODULE: ../../packages/transfer/src/transfer.tsx
+
+
+
+/**
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* eslint-disable arrow-body-style */
+
+
+
+
+ // 生成数据
+
+function useTransferData(sourceData, targetList, settingCode) {
+  var selectList = (0,external_vue_namespaceObject.ref)([]);
+  var selectedList = (0,external_vue_namespaceObject.ref)([]);
+
+  var transformData = function transformData() {
+    var isChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+    if (isChange) {
+      // watch监听时需要清空重新按照targetList赋值
+      selectList.value = [];
+      selectedList.value = [];
+    }
+
+    sourceData.value.forEach(function (s) {
+      var keyId = s[settingCode.value];
+
+      if (targetList.value.includes(keyId)) {
+        selectedList.value.push(s);
+      } else {
+        selectList.value.push(s);
+      }
+    });
+  };
+
+  transformData();
+  (0,external_vue_namespaceObject.watch)(function () {
+    return [sourceData, targetList, settingCode];
+  }, function () {
+    transformData(true);
+  }, {
+    deep: true
+  });
+  return {
+    selectList: selectList,
+    selectedList: selectedList
+  };
+} // 搜索
+
+
+function useSelectListSearch(selectList, displayCode) {
+  var selectSearchQuery = (0,external_vue_namespaceObject.ref)('');
+  var selectListSearch = (0,external_vue_namespaceObject.computed)(function () {
+    return selectList.value.filter(function (select) {
+      var val = select[displayCode.value];
+      if (val instanceof Object) return false;
+      return val.toString().includes(selectSearchQuery.value);
+    });
+  });
+  return {
+    selectSearchQuery: selectSearchQuery,
+    selectListSearch: selectListSearch
+  };
+}
+
+/* harmony default export */ const transfer = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'Transfer',
+  props: transferProps,
+  emits: ['change', 'update:targetList'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    // 区分数据是基础数据数组(false)还是对象数组(true)
+    var sourceListType = (0,external_vue_namespaceObject.computed)(function () {
+      if (Array.isArray(props.sourceList)) {
+        var isObjectArray = props.sourceList.every(function (s) {
+          return s.toString().includes('[object Object]');
+        });
+        return isObjectArray ? ArrayType.OBJECT_ARRAY : ArrayType.BASE_ARRAY;
+      }
+
+      return ArrayType.NOT_ARRAY;
+    });
+    var settingCode = (0,external_vue_namespaceObject.computed)(function () {
+      return sourceListType.value === ArrayType.BASE_ARRAY ? 'value' : props.settingKey;
+    });
+    var displayCode = (0,external_vue_namespaceObject.computed)(function () {
+      return sourceListType.value === ArrayType.BASE_ARRAY ? 'value' : props.displayKey;
+    });
+    var sortCode = (0,external_vue_namespaceObject.computed)(function () {
+      return props.sortKey || displayCode.value;
+    }); // 处理为统一格式
+
+    var sourceData = (0,external_vue_namespaceObject.computed)(function () {
+      switch (sourceListType.value) {
+        case ArrayType.BASE_ARRAY:
+          // 封装为对象
+          return _toConsumableArray(new Set(props.sourceList)).map(function (s) {
+            return {
+              value: s
+            };
+          });
+
+        case ArrayType.OBJECT_ARRAY:
+          return _toConsumableArray(props.sourceList);
+
+        default:
+          return [];
+      }
+    }); // 获取左右列表
+
+    var _toRefs = (0,external_vue_namespaceObject.toRefs)(props),
+        targetList = _toRefs.targetList;
+
+    var _useTransferData = useTransferData(sourceData, targetList, settingCode),
+        selectList = _useTransferData.selectList,
+        selectedList = _useTransferData.selectedList; // 使用搜索
+
+
+    var _useSelectListSearch = useSelectListSearch(selectList, displayCode),
+        selectSearchQuery = _useSelectListSearch.selectSearchQuery,
+        selectListSearch = _useSelectListSearch.selectListSearch;
+
+    var selectListSort = (0,external_vue_namespaceObject.computed)(function () {
+      return _toConsumableArray(selectListSearch.value).sort(function (a, b) {
+        var va = a[sortCode.value];
+        var vb = b[sortCode.value];
+        return va > vb ? 1 : -1;
+      });
+    });
+    var selectedListSort = (0,external_vue_namespaceObject.computed)(function () {
+      return _toConsumableArray(selectedList.value).sort(function (a, b) {
+        var va = a[sortCode.value];
+        var vb = b[sortCode.value];
+        return va > vb ? 1 : -1;
+      });
+    });
+    (0,external_vue_namespaceObject.watch)(function () {
+      return [selectList, selectedList];
+    }, function () {
+      handleEmitUpdateTargetList();
+    }, {
+      deep: true
+    });
+    /** 全选、清空操作过滤禁用选项 */
+
+    var handleCheckAllItemSelect = function handleCheckAllItemSelect(list, source) {
+      var itemKey = settingCode.value;
+      return list.some(function (val) {
+        return val[itemKey] === source[itemKey];
+      }) && source.disabled;
+    };
+    /** 全选 */
+
+
+    var allToRight = function allToRight() {
+      // 清空源列表 除源列表禁用选项
+      selectList.value = _toConsumableArray(sourceData.value.filter(function (source) {
+        return handleCheckAllItemSelect(selectList.value, source);
+      })); // 填满目标列表 除源列表禁用选项
+
+      selectedList.value = _toConsumableArray(sourceData.value.filter(function (source) {
+        return !handleCheckAllItemSelect(selectList.value, source);
+      })); // 全选搜索结果
+      // selectedList.value.push(...selectListSearch.value)
+
+      handleEmitUpdateTargetList();
+    };
+    /** 移除 */
+
+
+    var allToLeft = function allToLeft() {
+      // 填满源列表 除目标列表禁用选项
+      selectList.value = _toConsumableArray(sourceData.value.filter(function (source) {
+        return !handleCheckAllItemSelect(selectedList.value, source);
+      })); // 清空目标列表 除目标列表禁用选项
+
+      selectedList.value = _toConsumableArray(sourceData.value.filter(function (source) {
+        return handleCheckAllItemSelect(selectedList.value, source);
+      }));
+      handleEmitUpdateTargetList();
+    };
+    /**
+    * @desc 列表项 click 事件
+    * @param { string } itemKey settingCode值
+    * @param { boolean } isLeft 左右面板
+    */
+
+
+    var handleItemClick = function handleItemClick(item, isLeft) {
+      var _to$value;
+
+      if (item.disabled) return;
+      var itemKey = item[settingCode.value];
+      var from = isLeft ? selectList : selectedList;
+      var to = isLeft ? selectedList : selectList;
+      var index = from.value.findIndex(function (item) {
+        return item[settingCode.value] === itemKey;
+      });
+
+      (_to$value = to.value).push.apply(_to$value, _toConsumableArray(from.value.splice(index, 1)));
+
+      handleEmitUpdateTargetList();
+    }; // emit事件，只有用户交互才会触发，如果是程序修改不会触发
+
+
+    var handleEmitUpdateTargetList = function handleEmitUpdateTargetList() {
+      var restList = selectList.value.map(function (item) {
+        return item[settingCode.value];
+      });
+      var targetList = selectedList.value.map(function (item) {
+        return item[settingCode.value];
+      });
+      emit('update:targetList', targetList);
+      emit('change', sourceListType.value === ArrayType.BASE_ARRAY ? restList : selectList.value.map(function (v) {
+        return (0,external_vue_namespaceObject.toRaw)(v);
+      }), sourceListType.value === ArrayType.BASE_ARRAY ? targetList : selectedList.value.map(function (v) {
+        return (0,external_vue_namespaceObject.toRaw)(v);
+      }), targetList);
+    };
+
+    return {
+      selectSearchQuery: selectSearchQuery,
+      selectListSearch: selectListSearch,
+      selectedList: selectedList,
+      selectListSort: selectListSort,
+      selectedListSort: selectedListSort,
+      settingCode: settingCode,
+      displayCode: displayCode,
+      allToRight: allToRight,
+      allToLeft: allToLeft,
+      handleItemClick: handleItemClick
+    };
+  },
+  render: function render() {
+    var _this = this;
+
+    var leftList = this.sortable ? this.selectListSort : this.selectListSearch;
+    var rightList = this.sortable ? this.selectedListSort : this.selectedList;
+
+    var getHeaderHtml = function getHeaderHtml(dirct) {
+      var _a, _b;
+
+      var isLeft = dirct === 'left-header';
+      var titleText = isLeft ? "".concat((_a = _this.title[0]) !== null && _a !== void 0 ? _a : '源列表') : "".concat((_b = _this.title[1]) !== null && _b !== void 0 ? _b : '目标列表');
+      var isDisabled = isLeft ? !leftList.length : !rightList.length;
+
+      var headerClick = function headerClick() {
+        if (isDisabled) return;
+        isLeft ? _this.allToRight() : _this.allToLeft();
+      };
+
+      return _this.$slots[dirct] ? (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "slot-header"
+      }, [_this.$slots[dirct]()]) : (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "header"
+      }, ["".concat(titleText, "\uFF08").concat(isLeft ? leftList.length : rightList.length, "\uFF09"), (0,external_vue_namespaceObject.createVNode)("span", {
+        "class": {
+          disabled: isDisabled
+        },
+        "onClick": function onClick() {
+          return headerClick();
+        }
+      }, [isLeft ? '选择全部' : '清空'])]);
+    };
+
+    var getEmptyHtml = function getEmptyHtml(dirct) {
+      var _a;
+
+      var isLeft = dirct === 'left-empty-content';
+      var emptyText = (_a = isLeft ? _this.emptyContent[0] : _this.emptyContent[1]) !== null && _a !== void 0 ? _a : isLeft ? '无数据' : '未选择任何项';
+      return _this.$slots[dirct] ? (0,external_vue_namespaceObject.createVNode)("div", null, [_this.$slots[dirct]()]) : (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "empty"
+      }, [emptyText]);
+    };
+
+    var getDefaultListHtml = function getDefaultListHtml(item) {
+      var isLeft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      return (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": ['item-content', {
+          'is-disabled': item.disabled
+        }]
+      }, [(0,external_vue_namespaceObject.createVNode)("span", {
+        "class": "content-text",
+        "title": item[_this.displayCode]
+      }, [item[_this.displayCode]]), (0,external_vue_namespaceObject.createVNode)("span", {
+        "class": "icon-wrapper"
+      }, [isLeft ? (0,external_vue_namespaceObject.createVNode)(_namespaceObject.ArrowsRight, {
+        "class": "bk-icon icon-move"
+      }, null) : (0,external_vue_namespaceObject.createVNode)(_namespaceObject.Error, {
+        "class": "bk-icon icon-delete"
+      }, null)])]);
+    };
+
+    var getListContentHtml = function getListContentHtml(dirct) {
+      var isLeft = dirct === 'left';
+      var list = isLeft ? leftList : rightList;
+      var slotName = isLeft ? 'source-option' : 'target-option';
+      var emptySlotName = isLeft ? 'left-empty-content' : 'right-empty-content';
+      return list.length ? (0,external_vue_namespaceObject.createVNode)("ul", {
+        "class": ['content', _this.searchable && isLeft ? 'is-search' : '']
+      }, [list.map(function (item) {
+        var _a, _b, _c;
+
+        return (0,external_vue_namespaceObject.createVNode)("li", {
+          "key": item[_this.settingCode],
+          "class": [_this.$slots[slotName] ? 'custom-item' : ''],
+          "onClick": function onClick() {
+            return _this.handleItemClick(item, isLeft);
+          }
+        }, [(_c = (_b = (_a = _this.$slots)[slotName]) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : getDefaultListHtml(item, isLeft)]);
+      })]) : getEmptyHtml(emptySlotName);
+    };
+
+    return (0,external_vue_namespaceObject.createVNode)("div", {
+      "class": ['bk-transfer', this.extCls]
+    }, [(0,external_vue_namespaceObject.createVNode)("div", {
+      "class": "source-list"
+    }, [getHeaderHtml('left-header'), this.searchable && (0,external_vue_namespaceObject.createVNode)(external_input_namespaceObject["default"], {
+      "modelValue": _this.selectSearchQuery,
+      "onUpdate:modelValue": function onUpdateModelValue($event) {
+        return _this.selectSearchQuery = $event;
+      },
+      "class": "transfer-search-input",
+      "clearable": true,
+      "placeholder": this.searchPlaceholder || '搜索'
+    }, {
+      prefix: function prefix() {
+        return (0,external_vue_namespaceObject.createVNode)(_namespaceObject.Search, {
+          "class": "icon-search"
+        }, null);
+      }
+    }), getListContentHtml('left')]), (0,external_vue_namespaceObject.createVNode)(_namespaceObject.Transfer, {
+      "class": "transfer"
+    }, null), (0,external_vue_namespaceObject.createVNode)("div", {
+      "class": "target-list"
+    }, [getHeaderHtml('right-header'), getListContentHtml('right')])]);
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/transfer/src/index.ts
+/**
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+var Transfer = (0,external_shared_namespaceObject.withInstall)(transfer);
+/* harmony default export */ const src = (Transfer);
+var __webpack_exports__default = __webpack_exports__.Z;
+export { __webpack_exports__default as default };

package/lib/transfer/props.d.ts

@@ -0,0 +1,54 @@
+export declare const transferProps: {
+    title: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    searchPlaceholder: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    settingKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    displayKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    sortKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    showOverflowTips: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    searchable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    sourceList: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    targetList: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    emptyContent: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+};