bkui-vue 0.0.1-beta.22 → 0.0.1-beta.221

package/lib/transfer/index.d.ts

@@ -23,5 +23,343 @@
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-import Transfer from './transfer';
+declare const Transfer: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            title: string[];
+            extCls: string;
+            searchPlaceholder: string;
+            displayKey: string;
+            sortable: boolean;
+            settingKey: string;
+            sortKey: string;
+            showOverflowTips: boolean;
+            searchable: boolean;
+            sourceList: any[];
+            targetList: any[];
+            emptyContent: string[];
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            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[];
+            };
+        }>> & {
+            onChange?: (...args: any[]) => any;
+            "onUpdate:targetList"?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "extCls" | "searchPlaceholder" | "displayKey" | "sortable" | "settingKey" | "sortKey" | "showOverflowTips" | "searchable" | "sourceList" | "targetList" | "emptyContent">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $emit: (event: "change" | "update:targetList", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            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[];
+            };
+        }>> & {
+            onChange?: (...args: any[]) => any;
+            "onUpdate:targetList"?: (...args: any[]) => any;
+        }, {
+            selectSearchQuery: import("vue").Ref<string>;
+            selectListSearch: import("vue").ComputedRef<any>;
+            selectedList: import("vue").Ref<any[]>;
+            selectListSort: import("vue").ComputedRef<any[]>;
+            selectedListSort: import("vue").ComputedRef<any[]>;
+            settingCode: import("vue").ComputedRef<string>;
+            displayCode: import("vue").ComputedRef<string>;
+            allToRight: () => void;
+            allToLeft: () => void;
+            handleItemClick: (itemKey: any, isLeft: any) => void;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:targetList")[], string, {
+            title: string[];
+            extCls: string;
+            searchPlaceholder: string;
+            displayKey: string;
+            sortable: boolean;
+            settingKey: string;
+            sortKey: string;
+            showOverflowTips: boolean;
+            searchable: boolean;
+            sourceList: any[];
+            targetList: any[];
+            emptyContent: string[];
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        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[];
+        };
+    }>> & {
+        onChange?: (...args: any[]) => any;
+        "onUpdate:targetList"?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<{
+        selectSearchQuery: import("vue").Ref<string>;
+        selectListSearch: import("vue").ComputedRef<any>;
+        selectedList: import("vue").Ref<any[]>;
+        selectListSort: import("vue").ComputedRef<any[]>;
+        selectedListSort: import("vue").ComputedRef<any[]>;
+        settingCode: import("vue").ComputedRef<string>;
+        displayCode: import("vue").ComputedRef<string>;
+        allToRight: () => void;
+        allToLeft: () => void;
+        handleItemClick: (itemKey: any, isLeft: any) => void;
+    }> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    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[];
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:targetList"?: (...args: any[]) => any;
+}, {
+    selectSearchQuery: import("vue").Ref<string>;
+    selectListSearch: import("vue").ComputedRef<any>;
+    selectedList: import("vue").Ref<any[]>;
+    selectListSort: import("vue").ComputedRef<any[]>;
+    selectedListSort: import("vue").ComputedRef<any[]>;
+    settingCode: import("vue").ComputedRef<string>;
+    displayCode: import("vue").ComputedRef<string>;
+    allToRight: () => void;
+    allToLeft: () => void;
+    handleItemClick: (itemKey: any, isLeft: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:targetList")[], "change" | "update:targetList", {
+    title: string[];
+    extCls: string;
+    searchPlaceholder: string;
+    displayKey: string;
+    sortable: boolean;
+    settingKey: string;
+    sortKey: string;
+    showOverflowTips: boolean;
+    searchable: boolean;
+    sourceList: any[];
+    targetList: any[];
+    emptyContent: string[];
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
 export default Transfer;

package/lib/transfer/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../icon/"),require("../input")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../icon/","../input"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e._,e.Input)}(this,(function(e,t,r,n,o){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=a(o);function l(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var s={exports:{}},i={exports:{}};!function(e){e.exports=function(e){if(Array.isArray(e))return e},e.exports.__esModule=!0,e.exports.default=e.exports}(i);var c={exports:{}};!function(e){e.exports=function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a=[],u=!0,l=!1;try{for(r=r.call(e);!(u=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);u=!0);}catch(e){l=!0,o=e}finally{try{u||null==r.return||r.return()}finally{if(l)throw o}}return a}},e.exports.__esModule=!0,e.exports.default=e.exports}(c);var f={exports:{}},p={exports:{}};!function(e){e.exports=function(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},e.exports.__esModule=!0,e.exports.default=e.exports}(p),function(e){var t=p.exports;e.exports=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.exports.__esModule=!0,e.exports.default=e.exports}(f);var d={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports}(d),function(e){var t=i.exports,r=c.exports,n=f.exports,o=d.exports;e.exports=function(e,a){return t(e)||r(e,a)||n(e,a)||o()},e.exports.__esModule=!0,e.exports.default=e.exports}(s);var v=l(s.exports),h={exports:{}},y={exports:{}};!function(e){var t=p.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(y);var x={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(x);var g={exports:{}};!function(e){e.exports=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.")},e.exports.__esModule=!0,e.exports.default=e.exports}(g),function(e){var t=y.exports,r=x.exports,n=f.exports,o=g.exports;e.exports=function(e){return t(e)||r(e)||n(e)||o()},e.exports.__esModule=!0,e.exports.default=e.exports}(h);var m=l(h.exports);r.PropTypes.string,r.PropTypes.string,r.PropTypes.string,r.PropTypes.string,r.PropTypes.bool,r.PropTypes.bool,r.PropTypes.string,r.PropTypes.bool;var L=t.defineComponent({name:"Transfer",props:{title:{type:Array,default:function(){return[]}},extCls:{type:String,default:""},searchPlaceholder:{type:String,default:""},settingKey:{type:String,default:"id"},displayKey:{type:String,default:"value"},sortKey:{type:String,default:""},showOverflowTips:{type:Boolean,default:!1},searchable:{type:Boolean,default:!1},sortable:{type:Boolean,default:!1},sourceList:{type:Array,default:function(){return[]}},targetList:{type:Array,default:function(){return[]}},emptyContent:{type:Array,default:function(){return[]}}},emits:["change"],slots:["left-header","right-header","source-option","target-option","left-empty-content","right-empty-content"],setup:function(e,n){var o=n.emit,a=[],u=e.sortKey,l=e.sortable,s=t.ref(""),i=t.ref(null),c=t.ref([]),f=t.ref([]),p=t.ref(-1),d=t.ref(-1),h=t.computed((function(){return e.sourceList&&Array.isArray(e.sourceList)?-1!==e.sourceList.toString().indexOf("[object Object]"):"empty"})),y=t.computed((function(){return h.value?e.settingKey:"index"})),x=t.computed((function(){return h.value?e.displayKey:"value"})),g=t.computed((function(){return s.value?c.value.filter((function(e){return!r.isEmpty(e[x.value])&&String(e[x.value]).indexOf(s.value)>-1})):c.value}));t.watch((function(){return e.sourceList}),(function(){"empty"!==h.value&&(L(),V())}),{deep:!0}),t.watch((function(){return e.targetList}),(function(){L(),V()}),{deep:!0}),t.watch((function(){return[x.value,y.value]}),(function(){L()})),t.watch((function(){return e.sortKey}),(function(e){u=e,V()})),t.watch((function(){return e.sortable}),(function(e){l=e,V()}));var L=function(){"empty"!==h.value&&(h.value?_():b())},b=function(){if(!e.targetList.length||e.targetList.length>e.sourceList.length){for(var t,r=[],n=0;n<e.sourceList.length;n++)r.push({index:n,value:e.sourceList[n]});c.value=[].concat(r),(t=f.value).splice.apply(t,[0,f.value.length].concat([])),o("change",c.value,[],[])}else{for(var a=[],u=[],l=0;l<e.sourceList.length;l++)a.push({index:l,value:e.sourceList[l]});e.targetList.forEach((function(e){var t=a.find((function(t){return t.value===e}));t&&u.push(t)})),f.value=[].concat(u);var s=a.filter((function(e){return u.every((function(t){return t.index!==e.index}))}));c.value=m(s),o("change",c.value,m(w(f.value,!1)),[])}},_=function(){if(!e.targetList.length||e.targetList.length>e.sourceList.length){var t;(t=c.value).splice.apply(t,[0,c.value.length].concat(m(e.sourceList))),f.value=[],o("change",c.value,[],[])}else{var r=e.sourceList.filter((function(t){return e.targetList.every((function(e){return e!==t[y.value]}))})),n=[];e.sourceList.forEach((function(t){e.targetList.forEach((function(e){t[y.value]===e&&n.push(t)}))})),f.value=[].concat(n),c.value=m(r);var a=m(w(f.value));o("change",c.value,f.value,a)}},V=function(){var t=[];if(h.value)l||(u=""),t=m(e.sourceList);else{u=l?"index":"";for(var r=0;r<e.sourceList.length;r++)t.push({index:r,value:e.sourceList[r]})}if(u){var n=[];if(t.forEach((function(e){n.push(e[u])})),(a=[].concat(n)).length===e.sourceList.length){var o=m(c.value);c.value=m(M(o,u,a))}}},S=function(){var e=c.value,t=h.value?f.value:m(w(f.value,!1)),r=h.value?m(w(f.value)):[];o("change",e,t,r)},w=function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=[];if(!e.length)return[];var n=m(e);return n.forEach((function(e){if(t)for(var n=0,o=Object.entries(e);n<o.length;n++){var a=v(o[n],2),u=a[0],l=a[1];u===y.value&&r.push(l)}else r.push(e.value)})),r},M=function(e,t,r){var n=r;return e.sort((function(e,r){return n.indexOf(e[t])-n.indexOf(r[t])>=0}))},N=function(e){c.value=c.value.filter((function(t){return t[y.value]!==e[y.value]}))};return"empty"!==h.value&&(h.value?_():b(),V()),{keyword:s,transferRef:i,dataList:c,allToRight:function(){p.value=-1;var t=g.value,r=f.value;t.forEach((function(e){r.push(e),N(e)})),a.length===e.sourceList.length?f.value=m(M(r,u,a)):f.value=m(r),S()},allToLeft:function(){d.value=-1;for(var t=f.value,r=c.value;t.length;){var n=t.shift();r.push(n),a.length===e.sourceList.length?c.value=m(M(r,u,a)):c.value=m(r)}S()},displayDataList:g,displayCode:x,leftHoverIndex:p,rightHoverIndex:d,handleItemMouseEvent:function(e,t,r,n){t.preventDefault(),t.stopPropagation();var o="over"===e?n:-1;r?p.value=o:d.value=o},handleItemClick:function(t,r,n){t.preventDefault(),t.stopPropagation(),n?p.value=-1:d.value=-1;var o=n?g.value[r]:f.value.splice(r,1)[0],l=n?f.value:c.value;l.push(o),n&&N(o);var s=a.length===e.sourceList.length?m(M(l,u,a)):m(l);n?f.value=m(s):c.value=m(s),S()},hasSelectedList:f}},render:function(){var e=this,r=this.$props,o=r.extCls,a=r.title,l=r.emptyContent,s=r.searchable,i=r.searchPlaceholder,c=function(r){var n,o,u="left-header"===r,l="".concat(u?null!==(n=a[0])&&void 0!==n?n:"左侧列表":null!==(o=a[1])&&void 0!==o?o:"右侧列表"),s=u?!e.dataList.length:!e.hasSelectedList.length;return e.$slots[r]?t.createVNode("div",{class:"slot-header"},[t.createVNode("div",{class:"slot-content"},[e.$slots[r]()])]):t.createVNode("div",{class:"header"},["".concat(l,"（共").concat(e.dataList.length,"条）"),t.createVNode("span",{class:{disabled:s},onClick:function(){return u&&e.dataList.length&&e.allToRight(),void(!u&&e.hasSelectedList.length&&e.allToLeft())}},[u?"全部添加":"清空"])])},f=function(r,o){var a=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],u=a?e.leftHoverIndex:e.rightHoverIndex;return t.createVNode("div",{class:"item-content"},[t.createVNode("span",{class:"content-text",title:r[e.displayCode]},[r[e.displayCode]]),t.createVNode("span",{class:["icon-wrapper",o===u?"hover":""]},[a?t.createVNode(n.ArrowsRight,{class:"bk-icon"},null):t.createVNode(n.Error,{class:"bk-icon"},null)])])},p=function(r){var n="left"===r,o=n?e.displayDataList:e.hasSelectedList,a=n?"source-option":"target-option",u=n?"left-empty-content":"right-empty-content";return o.length?t.createVNode("ul",{class:["content",s&&n?"is-search":""]},[o.map((function(r,o){var u,l,s;return t.createVNode("li",{key:o,class:[e.$slots[a]?"custom-item":""],onClick:function(t){return e.handleItemClick(t,o,n)},onMouseover:function(t){return e.handleItemMouseEvent("over",t,n,o)},onMouseleave:function(t){return e.handleItemMouseEvent("leave",t,n,o)}},[null!==(s=null===(l=(u=e.$slots)[a])||void 0===l?void 0:l.call(u,r))&&void 0!==s?s:f(r,o,n)])}))]):function(r){var n,o="left-empty-content"===r,a=null!==(n=o?l[0]:l[1])&&void 0!==n?n:o?"无数据":"未选择任何项";return e.$slots[r]?t.createVNode("div",null,[e.$slots[r]()]):t.createVNode("div",{class:"empty"},[a])}(u)};return t.createVNode("div",{class:["bk-transfer",o],ref:"transferRef"},[t.createVNode("div",{class:"source-list"},[c("left-header"),s&&t.createVNode(u.default,{modelValue:e.keyword,"onUpdate:modelValue":function(t){return e.keyword=t},class:"transfer-search-input",clearable:!0,placeholder:i||"请输入搜索关键字",type:"search","left-icon":"bk-icon icon-search"},null),p("left")]),t.createVNode("div",{class:"transfer"},null),t.createVNode("div",{class:"target-list"},[c("right-header"),p("right")])])}});L.install=function(e){e.component(L.name,L)},e.default=L,Object.defineProperty(e,"__esModule",{value:!0})}));
+!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})()));

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[];
+    };
+};

package/lib/transfer/transfer.css

@@ -5,57 +5,46 @@
 /* 重点表示、强调、链接以及带有明确指示性 */
 /* 正常尺寸图标 */
 .bk-transfer {
-  position: relative;
   display: flex;
-  font-size: 14px;
-  flex-direction: row;
   justify-content: center;
+  align-items: center;
+  font-size: 14px;
 }
 .bk-transfer .transfer {
-  position: absolute;
-  top: 50%;
-  left: 50%;
   width: 30px;
   height: 30px;
+  margin: 0 2px;
   background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
-  transform: translate(-50%, -50%);
 }
 .bk-transfer .source-list,
 .bk-transfer .target-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   height: 400px;
   min-width: 200px;
   overflow: hidden;
   background-color: #fff;
   border: 1px solid #dde4eb;
   border-radius: 2px;
-  flex: 1;
 }
 .bk-transfer .source-list .slot-header,
-.bk-transfer .target-list .slot-header {
-  position: relative;
+.bk-transfer .target-list .slot-header,
+.bk-transfer .source-list .header,
+.bk-transfer .target-list .header {
   height: 43px;
   padding: 0 20px;
-  line-height: 43px;
   background-color: #fafbfd;
   border-bottom: 1px solid #dde4eb;
 }
-.bk-transfer .source-list .slot-header .slot-content,
-.bk-transfer .target-list .slot-header .slot-content {
-  position: relative;
-}
 .bk-transfer .source-list .header,
 .bk-transfer .target-list .header {
-  position: relative;
-  height: 43px;
-  padding: 0 20px;
-  line-height: 43px;
-  background-color: #fafbfd;
-  border-bottom: 1px solid #dde4eb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 .bk-transfer .source-list .header span,
 .bk-transfer .target-list .header span {
-  position: absolute;
-  right: 10px;
   font-size: 12px;
   color: #3a84ff;
   cursor: pointer;
@@ -65,39 +54,43 @@
   color: #c4c6cc;
   cursor: not-allowed;
 }
+.bk-transfer .source-list .transfer-search-input,
+.bk-transfer .target-list .transfer-search-input {
+  height: 36px;
+  border-bottom: 1px solid #f0f1f5;
+  border-width: 0 0 1px 0;
+  border-radius: 0;
+  outline: none;
+}
+.bk-transfer .source-list .transfer-search-input.is-focused,
+.bk-transfer .target-list .transfer-search-input.is-focused {
+  box-shadow: none;
+}
 .bk-transfer .source-list .empty,
 .bk-transfer .target-list .empty {
-  position: relative;
-  top: 40%;
-  width: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 30px;
   color: #c4c6cc;
-  text-align: center;
   cursor: default;
 }
 .bk-transfer .source-list .content,
 .bk-transfer .target-list .content {
-  position: relative;
-  max-height: calc(100% - 50px);
-  padding: 0;
+  flex: 1;
   margin: 6px 0;
   overflow-y: auto;
 }
-.bk-transfer .source-list .content.is-search,
-.bk-transfer .target-list .content.is-search {
-  max-height: calc(100% - 86px);
-}
 .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 {
-  position: relative;
   display: flex;
+  align-items: center;
   height: 40px;
   padding: 0 20px;
-  line-height: 40px;
-  list-style: none;
   cursor: pointer;
-  align-items: center;
 }
 .bk-transfer .source-list .content li.custom-item:hover,
 .bk-transfer .target-list .content li.custom-item:hover,
@@ -106,27 +99,33 @@
   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 {
+  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 {
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 1;
 }
 .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 {
-  display: none;
-  flex: 22px 0 0;
+  visibility: hidden;
 }
-.bk-transfer .source-list .content li.custom-item .icon-wrapper.hover,
-.bk-transfer .target-list .content li.custom-item .icon-wrapper.hover,
-.bk-transfer .source-list .content li .item-content .icon-wrapper.hover,
-.bk-transfer .target-list .content li .item-content .icon-wrapper.hover {
-  display: inline-block;
+.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 {
+  display: flex;
+  font-size: 22px;
 }
 .bk-transfer .source-list .content::-webkit-scrollbar,
 .bk-transfer .target-list .content::-webkit-scrollbar {
@@ -138,21 +137,3 @@
   background-color: #e6e9ea;
   border-radius: 2px;
 }
-.bk-transfer .source-list .content .bk-icon,
-.bk-transfer .target-list .content .bk-icon {
-  font-size: 22px;
-}
-.bk-transfer .target-list {
-  margin-left: 33px;
-}
-.bk-transfer .transfer-search-input {
-  height: 36px;
-  line-height: 34px;
-  border: none;
-  border-bottom: 1px solid #f0f1f5;
-  outline: none;
-}
-.bk-transfer .transfer-search-input.is-focused {
-  border-color: #f0f1f5;
-  box-shadow: 0px 0px 3px 0px transparent;
-}