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

package/lib/transfer/index.d.ts

@@ -30,6 +30,7 @@ declare const Transfer: {
         $props: Partial<{
             title: string[];
             extCls: string;
+            multiple: boolean;
             displayKey: string;
             searchPlaceholder: string;
             sortable: boolean;
@@ -93,10 +94,15 @@ declare const Transfer: {
             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;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "extCls" | "displayKey" | "searchPlaceholder" | "sortable" | "settingKey" | "sortKey" | "showOverflowTips" | "searchable" | "sourceList" | "targetList" | "emptyContent">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "extCls" | "multiple" | "displayKey" | "searchPlaceholder" | "sortable" | "settingKey" | "sortKey" | "showOverflowTips" | "searchable" | "sourceList" | "targetList" | "emptyContent">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -163,6 +169,11 @@ declare const Transfer: {
             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;
@@ -186,9 +197,21 @@ declare const Transfer: {
                 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;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:targetList")[], string, {
             title: string[];
             extCls: string;
+            multiple: boolean;
             displayKey: string;
             searchPlaceholder: string;
             sortable: boolean;
@@ -272,6 +295,11 @@ declare const Transfer: {
         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;
@@ -295,6 +323,17 @@ declare const Transfer: {
             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;
     }> & {} & {} & import("vue").ComponentCustomProperties;
     __isFragment?: never;
     __isTeleport?: never;
@@ -352,6 +391,11 @@ declare const Transfer: {
     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;
@@ -375,9 +419,21 @@ declare const Transfer: {
         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;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:targetList")[], "change" | "update:targetList", {
     title: string[];
     extCls: string;
+    multiple: boolean;
     displayKey: string;
     searchPlaceholder: string;
     sortable: boolean;

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("../config-provider"),require("../icon/"),require("../input"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../config-provider","../icon/","../input"],t);else{var r="object"==typeof exports?t(require("../shared"),require("vue"),require("../config-provider"),require("../icon/"),require("../input")):t(e["../shared"],e.vue,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,o)=>(()=>{"use strict";var a={2717:e=>{e.exports=r},7685:e=>{e.exports=n},8133:e=>{e.exports=o},4212:t=>{t.exports=e},748:e=>{e.exports=t}},i={};function u(e){var t=i[e];if(void 0!==t)return t.exports;var r=i[e]={exports:{}};return a[e](r,r.exports,u),r.exports}u.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return u.d(t,{a:t}),t},u.d=(e,t)=>{for(var r in t)u.o(t,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},u.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),u.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{u.r(l),u.d(l,{default:()=>p});var e=u(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=u(748),a=u(2717),i=u(7685),s=u(8133),c=u.n(s);!function(e){e.OBJECT_ARRAY="objectArray",e.BASE_ARRAY="baseArray",e.NOT_ARRAY="notArray"}(n||(n={}));var d={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 f=(0,o.defineComponent)({name:"Transfer",props:d,emits:["change","update:targetList"],setup:function(e,t){var i=t.emit,u=(0,a.useLocale)("transfer"),l=(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})),s=(0,o.computed)((function(){return l.value===n.BASE_ARRAY?"value":e.settingKey})),c=(0,o.computed)((function(){return l.value===n.BASE_ARRAY?"value":e.displayKey})),d=(0,o.computed)((function(){return e.sortKey||c.value})),f=(0,o.computed)((function(){switch(l.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[]}})),p=(0,o.toRefs)(e).targetList,v=function(e,t,r){var n=(0,o.ref)([]),a=(0,o.ref)([]),i=function(){arguments.length>0&&void 0!==arguments[0]&&arguments[0]&&(n.value=[],a.value=[]),e.value.forEach((function(e){var o=e[r.value];t.value.includes(o)?a.value.push(e):n.value.push(e)}))};return i(),(0,o.watch)((function(){return[e,t,r]}),(function(){i(!0)}),{deep:!0}),{selectList:n,selectedList:a}}(f,p,s),y=v.selectList,h=v.selectedList,m=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}}(y,c),g=m.selectSearchQuery,A=m.selectListSearch,b=(0,o.computed)((function(){return r(A.value).sort((function(e,t){return e[d.value]>t[d.value]?1:-1}))})),S=(0,o.computed)((function(){return r(h.value).sort((function(e,t){return e[d.value]>t[d.value]?1:-1}))}));(0,o.watch)((function(){return[y,h]}),(function(){R()}),{deep:!0});var T=function(e,t){var r=s.value;return e.some((function(e){return e[r]===t[r]}))&&t.disabled},R=function(){var e=y.value.map((function(e){return e[s.value]})),t=h.value.map((function(e){return e[s.value]}));i("update:targetList",t),i("change",l.value===n.BASE_ARRAY?e:y.value.map((function(e){return(0,o.toRaw)(e)})),l.value===n.BASE_ARRAY?t:h.value.map((function(e){return(0,o.toRaw)(e)})),t)};return{selectSearchQuery:g,selectListSearch:A,selectedList:h,selectListSort:b,selectedListSort:S,settingCode:s,displayCode:c,allToRight:function(){y.value=r(f.value.filter((function(e){return T(y.value,e)}))),h.value=r(f.value.filter((function(e){return!T(y.value,e)}))),R()},allToLeft:function(){y.value=r(f.value.filter((function(e){return!T(h.value,e)}))),h.value=r(f.value.filter((function(e){return T(h.value,e)}))),R()},handleItemClick:function(e,t){var n;if(!e.disabled){var o=e[s.value],a=t?y:h,i=t?h:y,u=a.value.findIndex((function(e){return e[s.value]===o}));(n=i.value).push.apply(n,r(a.value.splice(u,1))),R()}},t:u}},render:function(){var e=this,t=this.sortable?this.selectListSort:this.selectListSearch,r=this.sortable?this.selectedListSort:this.selectedList,n=function(n){var a,i,u="left-header"===n,l="".concat(u?null!==(a=e.title[0])&&void 0!==a?a:e.t.sourceList:null!==(i=e.title[1])&&void 0!==i?i:e.t.targetList),s=u?!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(l,"（").concat(u?t.length:r.length,"）"),(0,o.createVNode)("span",{class:{disabled:s},onClick:function(){s||(u?e.allToRight():e.allToLeft())}},[u?e.t.selectAll:e.t.removeAll])])},a=function(t){var r=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return(0,o.createVNode)("div",{class:["item-content",{"is-disabled":t.disabled}]},[(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)(i.ArrowsRight,{class:"bk-icon icon-move"},null):(0,o.createVNode)(i.Error,{class:"bk-icon icon-delete"},null)])])},u=function(n){var i="left"===n,u=i?t:r,l=i?"source-option":"target-option",s=i?"left-empty-content":"right-empty-content";return u.length?(0,o.createVNode)("ul",{class:["content",e.searchable&&i?"is-search":""]},[u.map((function(t){var r,n,u;return(0,o.createVNode)("li",{key:t[e.settingCode],class:[e.$slots[l]?"custom-item":""],onClick:function(){return e.handleItemClick(t,i)}},[null!==(u=null===(n=(r=e.$slots)[l])||void 0===n?void 0:n.call(r,t))&&void 0!==u?u:a(t,i)])}))]):function(t){var r,n="left-empty-content"===t,a=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,o.createVNode)("div",null,[e.$slots[t]()]):(0,o.createVNode)("div",{class:"empty"},[a])}(s)};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)(c(),{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,o.createVNode)(i.Search,{class:"icon-search"},null)}}),u("left")]),(0,o.createVNode)(i.Transfer,{class:"transfer"},null),(0,o.createVNode)("div",{class:"target-list"},[n("right-header"),u("right")])])}}),p=(0,e.withInstall)(f)})(),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,y=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),m=y.selectList,g=y.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}}(m,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}))})),L=(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[m,g]}),(function(){e.multiple||T()}),{deep:!0});var N=function(e,t){var r=d.value;return e.some((function(e){return e[r]===t[r]}))&&t.disabled},T=function(){var e=m.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:m.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)};return{selectSearchQuery:A,selectListSearch:S,selectedList:g,selectListSort:V,selectedListSort:L,settingCode:d,displayCode:f,allToRight:function(){m.value=r(v.value.filter((function(e){return N(m.value,e)}))),g.value=r(v.value.filter((function(e){return!N(m.value,e)}))),T()},allToLeft:function(){m.value=r(v.value.filter((function(e){return!N(g.value,e)}))),g.value=r(v.value.filter((function(e){return N(g.value,e)}))),T()},handleItemClick:function(e,t){var n;if(!e.disabled){var l=e[d.value],o=t?m:g,a=t?g:m,u=o.value.findIndex((function(e){return e[d.value]===l}));(n=a.value).push.apply(n,r(o.value.splice(u,1))),T()}},t:a,handleAllChecked:function(e,t){var r="source"===t?m: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?m:g,o=n?g:m,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"]=[],T()},handleItemChecked:function(e){var t="source"===e?m:g;c.value[e]=i.value[e].length===t.value.length}}},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:"bk-icon icon-move"},null):(0,l.createVNode)(s.Error,{class:"bk-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",y=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?y: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:["bk-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

@@ -9,6 +9,33 @@
   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 {
   flex: 1;
@@ -37,18 +64,23 @@
   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 {
   width: calc(100% - 32px);
@@ -89,10 +121,17 @@
   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;
   height: 32px;
   padding: 0 10px 0 16px;
@@ -103,20 +142,26 @@
 .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 .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: #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 .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;
@@ -125,30 +170,43 @@
 .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 .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 .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;
+  align-items: center;
+}
 .bk-transfer .source-list .content::-webkit-scrollbar,
 .bk-transfer .target-list .content::-webkit-scrollbar {
   width: 4px;

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>;
@@ -96,6 +101,17 @@ declare const _default: import("vue").DefineComponent<{
         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;
 }, 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[];
@@ -149,12 +165,18 @@ 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;
     searchPlaceholder: string;
     sortable: boolean;

package/lib/transfer/transfer.less

@@ -14,6 +14,38 @@
     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,
   .target-list {
     flex: 1;
@@ -40,7 +72,7 @@
       justify-content: space-between;
       font-weight: 700;
 
-      span {
+      .select-all {
         font-size: 12px;
         font-weight: normal;
         color: @primary-color;
@@ -51,6 +83,11 @@
           cursor: not-allowed;
         }
       }
+
+      .select-total-count {
+        font-weight: normal;
+        color: @gray-color;
+      }
     }
     
     .transfer-search-input {
@@ -92,8 +129,14 @@
       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;
         height: 32px;
         padding: 0 10px 0 16px;
@@ -137,6 +180,13 @@
         }
       }
 
+      .checkbox-item {
+        .item-content {
+          display: flex;
+          align-items: center;
+        }
+      }
+
       &::-webkit-scrollbar {
         width: 4px;
       }

package/lib/transfer/transfer.variable.css

@@ -131,6 +131,33 @@
   font-size: 24px;
   color: var(--light-gray);
 }
+.bk-transfer .transfer-button-group {
+  margin: 0 8px;
+}
+.bk-transfer .transfer-button-group .transfer-button {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  color: var(--white-color);
+  cursor: pointer;
+  background-color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  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: var(--light-gray);
+  cursor: not-allowed;
+  background-color: var(--whitesmoke-color);
+  border-color: var(--disable-color);
+}
+.bk-transfer .transfer-button-group .transfer-button span {
+  font-size: 18px;
+}
 .bk-transfer .source-list,
 .bk-transfer .target-list {
   flex: 1;
@@ -159,18 +186,23 @@
   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: var(--primary-color);
   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: var(--light-gray);
   cursor: not-allowed;
 }
+.bk-transfer .source-list .header .select-total-count,
+.bk-transfer .target-list .header .select-total-count {
+  font-weight: normal;
+  color: var(--gray-color);
+}
 .bk-transfer .source-list .transfer-search-input,
 .bk-transfer .target-list .transfer-search-input {
   width: calc(100% - 32px);
@@ -211,10 +243,17 @@
   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;
   height: 32px;
   padding: 0 10px 0 16px;
@@ -225,20 +264,26 @@
 .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 .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: var(--primary-color);
   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 .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;
@@ -247,30 +292,43 @@
 .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 .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 .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: var(--light-gray);
   cursor: not-allowed;
 }
+.bk-transfer .source-list .content .checkbox-item .item-content,
+.bk-transfer .target-list .content .checkbox-item .item-content {
+  display: flex;
+  align-items: center;
+}
 .bk-transfer .source-list .content::-webkit-scrollbar,
 .bk-transfer .target-list .content::-webkit-scrollbar {
   width: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "0.0.1-beta.425",
+  "version": "0.0.1-beta.426",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",