bkui-vue 0.0.1-beta.99 → 0.0.1

package/lib/transfer/index.js

@@ -1 +1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../icon/"),require("../input"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../icon/","../input"],t);else{var r="object"==typeof exports?t(require("../shared"),require("vue"),require("../icon/"),require("../input")):t(e["../shared"],e.vue,e["../icon/"],e["../input"]);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,((e,t,r,n)=>(()=>{"use strict";var o={7685:e=>{e.exports=r},8133:e=>{e.exports=n},4212:t=>{t.exports=e},748:e=>{e.exports=t}},a={};function s(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return o[e](r,r.exports,s),r.exports}s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},s.d=(e,t)=>{for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{s.r(l),s.d(l,{default:()=>p});var e=s(4212);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function r(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var n,o=s(748),a=s(7685),u=s(8133),i=s.n(u);!function(e){e.OBJECT_ARRAY="objectArray",e.BASE_ARRAY="baseArray",e.NOT_ARRAY="notArray"}(n||(n={}));var c={title:e.PropTypes.arrayOf(e.PropTypes.string).def([]),extCls:e.PropTypes.string.def(""),searchPlaceholder:e.PropTypes.string.def(""),settingKey:e.PropTypes.string.def("id"),displayKey:e.PropTypes.string.def("value"),sortKey:e.PropTypes.string.def("value"),showOverflowTips:e.PropTypes.bool.def(!1),searchable:e.PropTypes.bool.def(!1),sortable:e.PropTypes.bool.def(!1),sourceList:e.PropTypes.arrayOf(e.PropTypes.any).def([]),targetList:e.PropTypes.arrayOf(e.PropTypes.any).def([]),emptyContent:e.PropTypes.arrayOf(e.PropTypes.string).def([])};const d=(0,o.defineComponent)({name:"Transfer",props:c,emits:["change","update:targetList"],setup:function(e,t){var a=t.emit,s=(0,o.computed)((function(){return Array.isArray(e.sourceList)?e.sourceList.every((function(e){return e.toString().includes("[object Object]")}))?n.OBJECT_ARRAY:n.BASE_ARRAY:n.NOT_ARRAY})),l=(0,o.computed)((function(){return s.value===n.BASE_ARRAY?"value":e.settingKey})),u=(0,o.computed)((function(){return s.value===n.BASE_ARRAY?"value":e.displayKey})),i=(0,o.computed)((function(){return e.sortKey||u.value})),c=(0,o.computed)((function(){switch(s.value){case n.BASE_ARRAY:return r(new Set(e.sourceList)).map((function(e){return{value:e}}));case n.OBJECT_ARRAY:return r(e.sourceList);default:return[]}})),d=(0,o.toRefs)(e).targetList,p=function(e,t,r){var n=(0,o.ref)([]),a=(0,o.ref)([]),s=function(){e.value.forEach((function(e){var o=e[r.value];t.value.includes(o)?a.value.push(e):n.value.push(e)}))};return s(),(0,o.watch)((function(){return[e,t,r]}),s),{selectList:n,selectedList:a}}(c,d,l),f=p.selectList,v=p.selectedList,y=function(e,t){var r=(0,o.ref)(""),n=(0,o.computed)((function(){return e.value.filter((function(e){var n=e[t.value];return!(n instanceof Object)&&n.toString().includes(r.value)}))}));return{selectSearchQuery:r,selectListSearch:n}}(f,u),h=y.selectSearchQuery,m=y.selectListSearch,g=(0,o.computed)((function(){return r(m.value).sort((function(e,t){return e[i.value]>t[i.value]?1:-1}))})),A=(0,o.computed)((function(){return r(v.value).sort((function(e,t){return e[i.value]>t[i.value]?1:-1}))})),b=function(){var e=f.value.map((function(e){return e[l.value]})),t=v.value.map((function(e){return e[l.value]}));a("update:targetList",t),a("change",s.value===n.BASE_ARRAY?e:f.value.map((function(e){return(0,o.toRaw)(e)})),s.value===n.BASE_ARRAY?t:v.value.map((function(e){return(0,o.toRaw)(e)})),t)};return{selectSearchQuery:h,selectListSearch:m,selectedList:v,selectListSort:g,selectedListSort:A,settingCode:l,displayCode:u,allToRight:function(){f.value=[],v.value=r(c.value),b()},allToLeft:function(){f.value=r(c.value),v.value=[],b()},handleItemClick:function(e,t){var n,o=t?f:v,a=t?v:f,s=o.value.findIndex((function(t){return t[l.value]===e}));(n=a.value).push.apply(n,r(o.value.splice(s,1))),b()}}},render:function(){var e=this,t=this.sortable?this.selectListSort:this.selectListSearch,r=this.sortable?this.selectedListSort:this.selectedList,n=function(n){var a,s,l="left-header"===n,u="".concat(l?null!==(a=e.title[0])&&void 0!==a?a:"左侧列表":null!==(s=e.title[1])&&void 0!==s?s:"右侧列表"),i=l?!t.length:!r.length;return e.$slots[n]?(0,o.createVNode)("div",{class:"slot-header"},[e.$slots[n]()]):(0,o.createVNode)("div",{class:"header"},["".concat(u,"（共").concat(l?t.length:r.length,"条）"),(0,o.createVNode)("span",{class:{disabled:i},onClick:function(){i||(l?e.allToRight():e.allToLeft())}},[l?"全部添加":"清空"])])},s=function(t){var r=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return(0,o.createVNode)("div",{class:"item-content"},[(0,o.createVNode)("span",{class:"content-text",title:t[e.displayCode]},[t[e.displayCode]]),(0,o.createVNode)("span",{class:"icon-wrapper"},[r?(0,o.createVNode)(a.ArrowsRight,{class:"bk-icon"},null):(0,o.createVNode)(a.Error,{class:"bk-icon"},null)])])},l=function(n){var a="left"===n,l=a?t:r,u=a?"source-option":"target-option",i=a?"left-empty-content":"right-empty-content";return l.length?(0,o.createVNode)("ul",{class:["content",e.searchable&&a?"is-search":""]},[l.map((function(t){var r,n,l;return(0,o.createVNode)("li",{key:t[e.settingCode],class:[e.$slots[u]?"custom-item":""],onClick:function(){return e.handleItemClick(t[e.settingCode],a)}},[null!==(l=null===(n=(r=e.$slots)[u])||void 0===n?void 0:n.call(r,t))&&void 0!==l?l:s(t,a)])}))]):function(t){var r,n="left-empty-content"===t,a=null!==(r=n?e.emptyContent[0]:e.emptyContent[1])&&void 0!==r?r:n?"无数据":"未选择任何项";return e.$slots[t]?(0,o.createVNode)("div",null,[e.$slots[t]()]):(0,o.createVNode)("div",{class:"empty"},[a])}(i)};return(0,o.createVNode)("div",{class:["bk-transfer",this.extCls]},[(0,o.createVNode)("div",{class:"source-list"},[n("left-header"),this.searchable&&(0,o.createVNode)(i(),{modelValue:e.selectSearchQuery,"onUpdate:modelValue":function(t){return e.selectSearchQuery=t},class:"transfer-search-input",clearable:!0,placeholder:this.searchPlaceholder||"请输入搜索关键字",type:"search","left-icon":"bk-icon icon-search"},null),l("left")]),(0,o.createVNode)("div",{class:"transfer"},null),(0,o.createVNode)("div",{class:"target-list"},[n("right-header"),l("right")])])}}),p=(0,e.withInstall)(d)})(),l})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../checkbox"),require("../config-provider"),require("../icon/"),require("../input"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../checkbox","../config-provider","../icon/","../input"],t);else{var r="object"==typeof exports?t(require("../shared"),require("vue"),require("../checkbox"),require("../config-provider"),require("../icon/"),require("../input")):t(e["../shared"],e.vue,e["../checkbox"],e["../config-provider"],e["../icon/"],e["../input"]);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,((e,t,r,n,l,o)=>(()=>{"use strict";var a={5800:e=>{e.exports=r},2717:e=>{e.exports=n},7685:e=>{e.exports=l},8133:e=>{e.exports=o},4212:t=>{t.exports=e},748:e=>{e.exports=t}},u={};function c(e){var t=u[e];if(void 0!==t)return t.exports;var r=u[e]={exports:{}};return a[e](r,r.exports,c),r.exports}c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{c.r(i),c.d(i,{default:()=>h});var e=c(4212);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function r(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var n,l=c(748),o=c(5800),a=c.n(o),u=c(2717),s=c(7685),d=c(8133),f=c.n(d);!function(e){e.OBJECT_ARRAY="objectArray",e.BASE_ARRAY="baseArray",e.NOT_ARRAY="notArray"}(n||(n={}));var p={title:e.PropTypes.arrayOf(e.PropTypes.string).def([]),extCls:e.PropTypes.string.def(""),searchPlaceholder:e.PropTypes.string.def(""),settingKey:e.PropTypes.string.def("id"),displayKey:e.PropTypes.string.def("value"),sortKey:e.PropTypes.string.def("value"),showOverflowTips:e.PropTypes.bool.def(!1),searchable:e.PropTypes.bool.def(!1),sortable:e.PropTypes.bool.def(!1),sourceList:e.PropTypes.arrayOf(e.PropTypes.any).def([]),targetList:e.PropTypes.arrayOf(e.PropTypes.any).def([]),emptyContent:e.PropTypes.arrayOf(e.PropTypes.string).def([]),multiple:e.PropTypes.bool.def(!1)};const v=(0,l.defineComponent)({name:"Transfer",props:p,emits:["change","update:targetList"],setup:function(e,t){var o=t.emit,a=(0,u.useLocale)("transfer"),c=(0,l.ref)({source:!1,target:!1}),i=(0,l.ref)({source:[],target:[]}),s=(0,l.computed)((function(){return Array.isArray(e.sourceList)?e.sourceList.every((function(e){return e.toString().includes("[object Object]")}))?n.OBJECT_ARRAY:n.BASE_ARRAY:n.NOT_ARRAY})),d=(0,l.computed)((function(){return s.value===n.BASE_ARRAY?"value":e.settingKey})),f=(0,l.computed)((function(){return s.value===n.BASE_ARRAY?"value":e.displayKey})),p=(0,l.computed)((function(){return e.sortKey||f.value})),v=(0,l.computed)((function(){switch(s.value){case n.BASE_ARRAY:return r(new Set(e.sourceList)).map((function(e){return{value:e}}));case n.OBJECT_ARRAY:return r(e.sourceList);default:return[]}})),h=(0,l.toRefs)(e).targetList,m=function(e,t,r){var n=(0,l.ref)([]),o=(0,l.ref)([]),a=function(){arguments.length>0&&void 0!==arguments[0]&&arguments[0]&&(n.value=[],o.value=[]),e.value.forEach((function(e){var l=e[r.value];t.value.includes(l)?o.value.push(e):n.value.push(e)}))};return a(),(0,l.watch)((function(){return[e,t,r]}),(function(){a(!0)}),{deep:!0}),{selectList:n,selectedList:o}}(v,h,d),y=m.selectList,g=m.selectedList,b=function(e,t){var r=(0,l.ref)(""),n=(0,l.computed)((function(){return e.value.filter((function(e){var n=e[t.value];return!(n instanceof Object)&&n.toString().includes(r.value)}))}));return{selectSearchQuery:r,selectListSearch:n}}(y,f),A=b.selectSearchQuery,S=b.selectListSearch,V=(0,l.computed)((function(){return r(S.value).sort((function(e,t){return e[p.value]>t[p.value]?1:-1}))})),N=(0,l.computed)((function(){return r(g.value).sort((function(e,t){return e[p.value]>t[p.value]?1:-1}))}));(0,l.watch)((function(){return[y,g]}),(function(){e.multiple||L()}),{deep:!0});var C=function(e,t){var r=d.value;return e.some((function(e){return e[r]===t[r]}))&&t.disabled},L=function(){var e=y.value.map((function(e){return e[d.value]})),t=g.value.map((function(e){return e[d.value]}));o("update:targetList",t),o("change",s.value===n.BASE_ARRAY?e:y.value.map((function(e){return(0,l.toRaw)(e)})),s.value===n.BASE_ARRAY?t:g.value.map((function(e){return(0,l.toRaw)(e)})),t)},T=(0,u.usePrefix)().resolveClassName;return{selectSearchQuery:A,selectListSearch:S,selectedList:g,selectListSort:V,selectedListSort:N,settingCode:d,displayCode:f,allToRight:function(){y.value=r(v.value.filter((function(e){return C(y.value,e)}))),g.value=r(v.value.filter((function(e){return!C(y.value,e)}))),L()},allToLeft:function(){y.value=r(v.value.filter((function(e){return!C(g.value,e)}))),g.value=r(v.value.filter((function(e){return C(g.value,e)}))),L()},handleItemClick:function(e,t){var n;if(!e.disabled){var l=e[d.value],o=t?y:g,a=t?g:y,u=o.value.findIndex((function(e){return e[d.value]===l}));(n=a.value).push.apply(n,r(o.value.splice(u,1))),L()}},t:a,handleAllChecked:function(e,t){var r="source"===t?y:g;i.value[t]=e?r.value.map((function(e){return e[d.value]})):[]},multipleSelectAllValue:c,multipleSelectList:i,handleMultipleChange:function(e){var t,n="left"===e,l=n?y:g,o=n?g:y,a=i.value[n?"source":"target"],u=l.value.filter((function(e){return a.includes(e[d.value])}));l.value=l.value.filter((function(e){return!a.includes(e[d.value])})),(t=o.value).push.apply(t,r(u)),i.value[n?"source":"target"]=[],L()},handleItemChecked:function(e){var t="source"===e?y:g;c.value[e]=i.value[e].length===t.value.length},resolveClassName:T}},render:function(){var e=this,t=this.$props.multiple,r=this.sortable?this.selectListSort:this.selectListSearch,n=this.sortable?this.selectedListSort:this.selectedList,u=function(t){var o,u,c="left-header"===t,i=c?"source":"target",s="".concat(c?null!==(o=e.title[0])&&void 0!==o?o:e.t.sourceList:null!==(u=e.title[1])&&void 0!==u?u:e.t.targetList),d=c?!r.length:!n.length,f=!!e.multipleSelectList[i].length&&!e.multipleSelectAllValue[i],p=e.multipleSelectList[i].length;return e.$slots[t]?(0,l.createVNode)("div",{class:"slot-header"},[e.$slots[t]()]):(0,l.createVNode)("div",{class:"header"},[e.multiple?(0,l.createVNode)(a(),{class:"header-checkbox",label:s,modelValue:e.multipleSelectAllValue[i],"onUpdate:modelValue":function(t){return e.multipleSelectAllValue[i]=t},indeterminate:f,onChange:function(t){return e.handleAllChecked(t,i)}},null):(0,l.createVNode)(l.Fragment,null,["".concat(s,"（").concat(c?r.length:n.length,"）")]),e.multiple?(0,l.createVNode)("div",{class:"select-total-count"},[(0,l.createVNode)("span",{class:"select-count"},[p]),(0,l.createVNode)("span",{class:"count-delimiter"},[(0,l.createTextVNode)("/")]),(0,l.createVNode)("span",{class:"total-count"},[c?r.length:n.length])]):(0,l.createVNode)("span",{class:{"select-all":!0,disabled:d},onClick:function(){d||(c?e.allToRight():e.allToLeft())}},[c?e.t.selectAll:e.t.removeAll])])},c=function(r){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return(0,l.createVNode)("div",{class:["item-content",{"is-disabled":r.disabled}]},[(0,l.createVNode)("span",{class:"content-text",title:r[e.displayCode]},[r[e.displayCode]]),!t&&(0,l.createVNode)("span",{class:"icon-wrapper"},[n?(0,l.createVNode)(s.ArrowsRight,{class:"".concat(e.resolveClassName("icon")," icon-move")},null):(0,l.createVNode)(s.Error,{class:"".concat(e.resolveClassName("icon")," icon-delete")},null)])])},i=function(u){var i,s,d="left"===u,f="left"===u?"source":"target",p=d?r:n,v=d?"source-option":"target-option",h=d?"left-empty-content":"right-empty-content",m=t?(0,l.createVNode)(o.BkCheckboxGroup,{class:"content is-flex",modelValue:e.multipleSelectList[f],"onUpdate:modelValue":function(t){return e.multipleSelectList[f]=t},onChange:function(){return e.handleItemChecked(f)}},"function"==typeof(s=i=p.map((function(t){var r,n,o;return(0,l.createVNode)("div",null,[(0,l.createVNode)(a(),{class:"checkbox-item",label:t[e.settingCode]},{default:function(){return[null!==(o=null===(n=(r=e.$slots)[v])||void 0===n?void 0:n.call(r,t))&&void 0!==o?o:c(t,d)]}})])})))||"[object Object]"===Object.prototype.toString.call(s)&&!(0,l.isVNode)(s)?i:{default:function(){return[i]}}):(0,l.createVNode)("ul",{class:["content",e.searchable&&d?"is-search":""]},[p.map((function(t){var r,n,o;return(0,l.createVNode)("li",{key:t[e.settingCode],class:[e.$slots[v]?"custom-item":""],onClick:function(){return e.handleItemClick(t,d)}},[null!==(o=null===(n=(r=e.$slots)[v])||void 0===n?void 0:n.call(r,t))&&void 0!==o?o:c(t,d)])}))]);return p.length?m:function(t){var r,n="left-empty-content"===t,o=null!==(r=n?e.emptyContent[0]:e.emptyContent[1])&&void 0!==r?r:n?e.t.noData:e.t.noSelected;return e.$slots[t]?(0,l.createVNode)("div",null,[e.$slots[t]()]):(0,l.createVNode)("div",{class:"empty"},[o])}(h)};return(0,l.createVNode)("div",{class:["".concat(this.resolveClassName("transfer")),this.extCls]},[(0,l.createVNode)("div",{class:"source-list"},[u("left-header"),this.searchable&&(0,l.createVNode)(f(),{modelValue:e.selectSearchQuery,"onUpdate:modelValue":function(t){return e.selectSearchQuery=t},class:"transfer-search-input",clearable:!0,placeholder:this.searchPlaceholder||this.t.search},{prefix:function(){return(0,l.createVNode)(s.Search,{class:"icon-search"},null)}}),i("left")]),t?(0,l.createVNode)("div",{class:"transfer-button-group"},[(0,l.createVNode)("div",{class:["transfer-button",{disabled:!this.multipleSelectList.source.length}],onClick:function(){return e.handleMultipleChange("left")}},[(0,l.createVNode)(s.AngleRight,null,null)]),(0,l.createVNode)("div",{class:["transfer-button",{disabled:!this.multipleSelectList.target.length}],onClick:function(){return e.handleMultipleChange("right")}},[(0,l.createVNode)(s.AngleLeft,null,null)])]):(0,l.createVNode)(s.Transfer,{class:"transfer"},null),(0,l.createVNode)("div",{class:"target-list"},[u("right-header"),i("right")])])}}),h=(0,e.withInstall)(v)})(),i})()));

package/lib/transfer/props.d.ts

@@ -51,4 +51,9 @@ export declare const transferProps: {
     emptyContent: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
     };
+    multiple: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 };

package/lib/transfer/transfer.css

@@ -1,9 +1,3 @@
-/* 边框色 */
-/* 按钮、表单边框颜色、禁用时文本颜色 */
-/* 表格头部背景色、禁用底色 */
-/* 大面积背景色 */
-/* 重点表示、强调、链接以及带有明确指示性 */
-/* 正常尺寸图标 */
 .bk-transfer {
   display: flex;
   justify-content: center;
@@ -11,10 +5,36 @@
   font-size: 14px;
 }
 .bk-transfer .transfer {
-  width: 30px;
-  height: 30px;
-  margin: 0 2px;
-  background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
+  margin: 0 8px;
+  font-size: 24px;
+  color: #c4c6cc;
+}
+.bk-transfer .transfer-button-group {
+  margin: 0 8px;
+}
+.bk-transfer .transfer-button-group .transfer-button {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  color: white;
+  cursor: pointer;
+  background-color: #3a84ff;
+  border: 1px solid #3a84ff;
+  border-radius: 2px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-transfer .transfer-button-group .transfer-button:first-child {
+  margin-bottom: 8px;
+}
+.bk-transfer .transfer-button-group .transfer-button.disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+  background-color: #fafbfd;
+  border-color: #dcdee5;
+}
+.bk-transfer .transfer-button-group .transfer-button span {
+  font-size: 18px;
 }
 .bk-transfer .source-list,
 .bk-transfer .target-list {
@@ -24,40 +44,49 @@
   height: 400px;
   min-width: 200px;
   overflow: hidden;
-  background-color: #fff;
-  border: 1px solid #dde4eb;
+  background-color: white;
+  border: 1px solid #dcdee5;
   border-radius: 2px;
 }
 .bk-transfer .source-list .slot-header,
 .bk-transfer .target-list .slot-header,
 .bk-transfer .source-list .header,
 .bk-transfer .target-list .header {
-  height: 43px;
-  padding: 0 20px;
+  height: 40px;
+  padding: 0 16px;
   background-color: #fafbfd;
-  border-bottom: 1px solid #dde4eb;
+  border-bottom: 1px solid #dcdee5;
 }
 .bk-transfer .source-list .header,
 .bk-transfer .target-list .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  font-weight: 700;
 }
-.bk-transfer .source-list .header span,
-.bk-transfer .target-list .header span {
+.bk-transfer .source-list .header .select-all,
+.bk-transfer .target-list .header .select-all {
   font-size: 12px;
+  font-weight: normal;
   color: #3a84ff;
   cursor: pointer;
 }
-.bk-transfer .source-list .header span.disabled,
-.bk-transfer .target-list .header span.disabled {
+.bk-transfer .source-list .header .select-all.disabled,
+.bk-transfer .target-list .header .select-all.disabled {
   color: #c4c6cc;
   cursor: not-allowed;
 }
+.bk-transfer .source-list .header .select-total-count,
+.bk-transfer .target-list .header .select-total-count {
+  font-weight: normal;
+  color: #979ba5;
+}
 .bk-transfer .source-list .transfer-search-input,
 .bk-transfer .target-list .transfer-search-input {
-  height: 36px;
-  border-bottom: 1px solid #f0f1f5;
+  width: calc(100% - 32px);
+  height: 30px;
+  margin: 8px 16px 0;
+  border-bottom: 1px solid #dcdee5;
   border-width: 0 0 1px 0;
   border-radius: 0;
   outline: none;
@@ -66,6 +95,16 @@
 .bk-transfer .target-list .transfer-search-input.is-focused {
   box-shadow: none;
 }
+.bk-transfer .source-list .transfer-search-input .icon-search,
+.bk-transfer .target-list .transfer-search-input .icon-search {
+  font-size: 18px;
+  line-height: 28px;
+  color: #c4c6cc;
+}
+.bk-transfer .source-list .transfer-search-input input,
+.bk-transfer .target-list .transfer-search-input input {
+  padding-left: 4px;
+}
 .bk-transfer .source-list .empty,
 .bk-transfer .target-list .empty {
   flex: 1;
@@ -79,36 +118,50 @@
 .bk-transfer .source-list .content,
 .bk-transfer .target-list .content {
   flex: 1;
-  margin: 6px 0;
+  margin: 8px 0;
   overflow-y: auto;
 }
+.bk-transfer .source-list .content.is-flex,
+.bk-transfer .target-list .content.is-flex {
+  display: flex;
+  flex-direction: column;
+}
 .bk-transfer .source-list .content li.custom-item,
 .bk-transfer .target-list .content li.custom-item,
 .bk-transfer .source-list .content li .item-content,
-.bk-transfer .target-list .content li .item-content {
+.bk-transfer .target-list .content li .item-content,
+.bk-transfer .source-list .content .checkbox-item,
+.bk-transfer .target-list .content .checkbox-item {
   display: flex;
-  align-items: center;
-  height: 40px;
-  padding: 0 20px;
+  height: 32px;
+  padding: 0 10px 0 16px;
+  margin-bottom: 4px;
   cursor: pointer;
+  align-items: center;
 }
-.bk-transfer .source-list .content li.custom-item:hover,
-.bk-transfer .target-list .content li.custom-item:hover,
-.bk-transfer .source-list .content li .item-content:hover,
-.bk-transfer .target-list .content li .item-content:hover {
+.bk-transfer .source-list .content li.custom-item:hover:not(.is-disabled),
+.bk-transfer .target-list .content li.custom-item:hover:not(.is-disabled),
+.bk-transfer .source-list .content li .item-content:hover:not(.is-disabled),
+.bk-transfer .target-list .content li .item-content:hover:not(.is-disabled),
+.bk-transfer .source-list .content .checkbox-item:hover:not(.is-disabled),
+.bk-transfer .target-list .content .checkbox-item:hover:not(.is-disabled) {
   color: #3a84ff;
-  background-color: #eef6fe;
-}
-.bk-transfer .source-list .content li.custom-item:hover .icon-wrapper,
-.bk-transfer .target-list .content li.custom-item:hover .icon-wrapper,
-.bk-transfer .source-list .content li .item-content:hover .icon-wrapper,
-.bk-transfer .target-list .content li .item-content:hover .icon-wrapper {
+  background-color: #e1ecff;
+}
+.bk-transfer .source-list .content li.custom-item:hover:not(.is-disabled) .icon-wrapper,
+.bk-transfer .target-list .content li.custom-item:hover:not(.is-disabled) .icon-wrapper,
+.bk-transfer .source-list .content li .item-content:hover:not(.is-disabled) .icon-wrapper,
+.bk-transfer .target-list .content li .item-content:hover:not(.is-disabled) .icon-wrapper,
+.bk-transfer .source-list .content .checkbox-item:hover:not(.is-disabled) .icon-wrapper,
+.bk-transfer .target-list .content .checkbox-item:hover:not(.is-disabled) .icon-wrapper {
   visibility: visible;
 }
 .bk-transfer .source-list .content li.custom-item .content-text,
 .bk-transfer .target-list .content li.custom-item .content-text,
 .bk-transfer .source-list .content li .item-content .content-text,
-.bk-transfer .target-list .content li .item-content .content-text {
+.bk-transfer .target-list .content li .item-content .content-text,
+.bk-transfer .source-list .content .checkbox-item .content-text,
+.bk-transfer .target-list .content .checkbox-item .content-text {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -117,15 +170,42 @@
 .bk-transfer .source-list .content li.custom-item .icon-wrapper,
 .bk-transfer .target-list .content li.custom-item .icon-wrapper,
 .bk-transfer .source-list .content li .item-content .icon-wrapper,
-.bk-transfer .target-list .content li .item-content .icon-wrapper {
+.bk-transfer .target-list .content li .item-content .icon-wrapper,
+.bk-transfer .source-list .content .checkbox-item .icon-wrapper,
+.bk-transfer .target-list .content .checkbox-item .icon-wrapper {
   visibility: hidden;
 }
 .bk-transfer .source-list .content li.custom-item .icon-wrapper .bk-icon,
 .bk-transfer .target-list .content li.custom-item .icon-wrapper .bk-icon,
 .bk-transfer .source-list .content li .item-content .icon-wrapper .bk-icon,
-.bk-transfer .target-list .content li .item-content .icon-wrapper .bk-icon {
+.bk-transfer .target-list .content li .item-content .icon-wrapper .bk-icon,
+.bk-transfer .source-list .content .checkbox-item .icon-wrapper .bk-icon,
+.bk-transfer .target-list .content .checkbox-item .icon-wrapper .bk-icon {
+  display: flex;
+  font-size: 30px;
+}
+.bk-transfer .source-list .content li.custom-item .icon-wrapper .icon-delete,
+.bk-transfer .target-list .content li.custom-item .icon-wrapper .icon-delete,
+.bk-transfer .source-list .content li .item-content .icon-wrapper .icon-delete,
+.bk-transfer .target-list .content li .item-content .icon-wrapper .icon-delete,
+.bk-transfer .source-list .content .checkbox-item .icon-wrapper .icon-delete,
+.bk-transfer .target-list .content .checkbox-item .icon-wrapper .icon-delete {
+  margin-right: 6px;
+  font-size: 16px;
+}
+.bk-transfer .source-list .content li.custom-item.is-disabled,
+.bk-transfer .target-list .content li.custom-item.is-disabled,
+.bk-transfer .source-list .content li .item-content.is-disabled,
+.bk-transfer .target-list .content li .item-content.is-disabled,
+.bk-transfer .source-list .content .checkbox-item.is-disabled,
+.bk-transfer .target-list .content .checkbox-item.is-disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+.bk-transfer .source-list .content .checkbox-item .item-content,
+.bk-transfer .target-list .content .checkbox-item .item-content {
   display: flex;
-  font-size: 22px;
+  align-items: center;
 }
 .bk-transfer .source-list .content::-webkit-scrollbar,
 .bk-transfer .target-list .content::-webkit-scrollbar {
@@ -134,6 +214,6 @@
 .bk-transfer .source-list .content::-webkit-scrollbar-thumb,
 .bk-transfer .target-list .content::-webkit-scrollbar-thumb {
   height: 5px;
-  background-color: #e6e9ea;
+  background-color: #dcdee5;
   border-radius: 2px;
 }

package/lib/transfer/transfer.d.ts

@@ -76,6 +76,11 @@ declare const _default: import("vue").DefineComponent<{
     emptyContent: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
     };
+    multiple: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }, {
     selectSearchQuery: import("vue").Ref<string>;
     selectListSearch: import("vue").ComputedRef<any>;
@@ -86,7 +91,28 @@ declare const _default: import("vue").DefineComponent<{
     displayCode: import("vue").ComputedRef<string>;
     allToRight: () => void;
     allToLeft: () => void;
-    handleItemClick: (itemKey: any, isLeft: any) => void;
+    handleItemClick: (item: any, isLeft: any) => void;
+    t: import("vue").ComputedRef<{
+        sourceList: string;
+        targetList: string;
+        removeAll: string;
+        selectAll: string;
+        noData: string;
+        noSelected: string;
+        search: string;
+    }>;
+    handleAllChecked: (value: any, dirct: any) => void;
+    multipleSelectAllValue: import("vue").Ref<{
+        source: boolean;
+        target: boolean;
+    }>;
+    multipleSelectList: import("vue").Ref<{
+        source: any[];
+        target: any[];
+    }>;
+    handleMultipleChange: (dirct: any) => void;
+    handleItemChecked: (dirct: any) => void;
+    resolveClassName: (cls: string) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:targetList")[], "change" | "update:targetList", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
@@ -140,15 +166,21 @@ declare const _default: import("vue").DefineComponent<{
     emptyContent: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
     };
+    multiple: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:targetList"?: (...args: any[]) => any;
 }, {
     title: string[];
     extCls: string;
+    multiple: boolean;
     displayKey: string;
-    sortable: boolean;
     searchPlaceholder: string;
+    sortable: boolean;
     settingKey: string;
     sortKey: string;
     showOverflowTips: boolean;
@@ -156,5 +188,5 @@ declare const _default: import("vue").DefineComponent<{
     sourceList: any[];
     targetList: any[];
     emptyContent: string[];
-}>;
+}, {}>;
 export default _default;

package/lib/transfer/transfer.less

@@ -1,22 +1,6 @@
 @import '../styles/themes/themes.less';
 
-/* 边框色 */
-@borderInlineColor: #dde4eb;
-
-/* 按钮、表单边框颜色、禁用时文本颜色 */
-@newGreyColor: #c4c6cc;
-
-/* 表格头部背景色、禁用底色 */
-@newGreyColor2: #f0f1f5;
-
-/* 大面积背景色 */
-@newGreyColor3: #fafbfd;
-
-/* 重点表示、强调、链接以及带有明确指示性 */
-@newMainColor: #3a84ff;
-
-/* 正常尺寸图标 */
-@iconNormalSize: 22px;
+@transfer-item-hover-background-color: #e1ecff;
 
 .@{bk-prefix}-transfer {
   display: flex;
@@ -25,10 +9,41 @@
   font-size: 14px;
 
   .transfer {
-    width: 30px;
-    height: 30px;
-    margin: 0 2px;
-    background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
+    margin: 0 8px;
+    font-size: 24px;
+    color: @light-gray;
+  }
+
+  .transfer-button-group {
+    margin: 0 8px;
+
+    .transfer-button {
+      display: flex;
+      width: 24px;
+      height: 24px;
+      color: @white-color;
+      cursor: pointer;
+      background-color: @primary-color;
+      border: 1px solid @primary-color;
+      border-radius: 2px;
+      align-items: center;
+      justify-content: center;
+
+      &:first-child {
+        margin-bottom: 8px;
+      }
+
+      &.disabled {
+        color: @light-gray;
+        cursor: not-allowed;
+        background-color: @whitesmoke-color;
+        border-color: @disable-color;
+      }
+
+      span {
+        font-size: 18px;
+      }
+    }
   }
 
   .source-list,
@@ -39,38 +54,47 @@
     height: 400px;
     min-width: 200px;
     overflow: hidden;
-    background-color: #fff;
-    border: 1px solid @borderInlineColor;
+    background-color: @white-color;
+    border: 1px solid @disable-color;
     border-radius: 2px;
 
     .slot-header,
     .header {
-      height: 43px;
-      padding: 0 20px;
-      background-color: @newGreyColor3;
-      border-bottom: 1px solid @borderInlineColor;
+      height: 40px;
+      padding: 0 16px;
+      background-color: @whitesmoke-color;
+      border-bottom: 1px solid @disable-color;
     }
 
     .header {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      font-weight: 700;
 
-      span {
+      .select-all {
         font-size: 12px;
-        color: @newMainColor;
+        font-weight: normal;
+        color: @primary-color;
         cursor: pointer;
 
         &.disabled {
-          color: @newGreyColor;
+          color: @light-gray;
           cursor: not-allowed;
         }
       }
+
+      .select-total-count {
+        font-weight: normal;
+        color: @gray-color;
+      }
     }
-    
+
     .transfer-search-input {
-      height: 36px;
-      border-bottom: 1px solid @newGreyColor2;
+      width: calc(100% - 32px);
+      height: 30px;
+      margin: 8px 16px 0;
+      border-bottom: 1px solid @disable-color;
       border-width: 0 0 1px 0;
       border-radius: 0;
       outline: none;
@@ -78,6 +102,16 @@
       &.is-focused {
         box-shadow: none;
       }
+
+      .icon-search {
+        font-size: 18px;
+        line-height: 28px;
+        color: @light-gray;
+      }
+
+      input {
+        padding-left: 4px;
+      }
     }
 
     .empty {
@@ -86,26 +120,33 @@
       align-items: center;
       justify-content: center;
       padding-bottom: 30px;
-      color: @newGreyColor;
+      color: @light-gray;
       cursor: default;
     }
 
     .content {
       flex: 1;
-      margin: 6px 0;
+      margin: 8px 0;
       overflow-y: auto;
 
+      &.is-flex {
+        display: flex;
+        flex-direction: column;
+      }
+
       li.custom-item,
-      li .item-content {
+      li .item-content,
+      .checkbox-item {
         display: flex;
-        align-items: center;
-        height: 40px;
-        padding: 0 20px;
+        height: 32px;
+        padding: 0 10px 0 16px;
+        margin-bottom: 4px;
         cursor: pointer;
+        align-items: center;
 
-        &:hover {
-          color: @newMainColor;
-          background-color: #eef6fe;
+        &:hover:not(.is-disabled) {
+          color: @primary-color;
+          background-color: @transfer-item-hover-background-color;
 
           .icon-wrapper {
             visibility: visible;
@@ -122,21 +163,37 @@
         .icon-wrapper {
           visibility: hidden;
 
-          .bk-icon {
+          .@{bk-prefix}-icon {
             display: flex;
-            font-size: @iconNormalSize;
+            font-size: 30px;
           }
+
+          .icon-delete {
+            margin-right: 6px;
+            font-size: 16px;
+          }
+        }
+
+        &.is-disabled {
+          color: @light-gray;
+          cursor: not-allowed;
+        }
+      }
+
+      .checkbox-item {
+        .item-content {
+          display: flex;
+          align-items: center;
         }
       }
 
       &::-webkit-scrollbar {
         width: 4px;
-        // background-color: color(transparent lightness(80%));
       }
 
       &::-webkit-scrollbar-thumb {
         height: 5px;
-        background-color: #e6e9ea;
+        background-color: #dcdee5;
         border-radius: 2px;
       }
     }