add Transfer component

add Transfer component

src/components/button/button.vue

@@ -71,7 +71,7 @@
             }
         },
         ready () {
-            this.showSlot = this.$els.slot.innerHTML !== '';
+            this.showSlot = this.$els.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
         }
     }
 </script>

src/components/transfer/index.js

@@ -0,0 +1,2 @@
+import Transfer from './transfer.vue';
+export default Transfer;

src/components/transfer/list.vue

@@ -0,0 +1,108 @@
+<template>
+    <div :class="prefixCls" :style="style">
+        <div :class="prefixCls + '-header'">
+            <Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll">{{ title }}</Checkbox>
+            <span :class="prefixCls + '-header-count'">{{ count }}</span>
+        </div>
+        <div :class="bodyClasses">
+            <div :class="prefixCls + '-body-search-wrapper'" v-if="filterable">
+                <Search
+                    :prefix-cls="prefixCls + '-search'"
+                    :query.sync="query"
+                    :placeholder="filterPlaceholder"></Search>
+            </div>
+            <ul :class="prefixCls + '-content'" v-if="showItems.length">
+                <li
+                    v-for="item in showItems | filterBy filterData"
+                    :class="[prefixCls + '-content-item', {[prefixCls + '-content-item-disabled']: item.disabled}]"
+                    @click.prevent="select(item)"><Checkbox :checked="isCheck(item)" :disabled="item.disabled">{{ showLabel(item) }}</Checkbox></li>
+            </ul>
+            <div :class="prefixCls + '-body-not-found'" v-else>{{ notFoundText }}</div>
+        </div>
+        <div :class="prefixCls + '-footer'">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script>
+    import Search from './search.vue';
+    import Checkbox from '../checkbox/checkbox.vue';
+
+    export default {
+        components: { Search, Checkbox },
+//        filters: { filterData: this.filterData },
+        props: {
+            prefixCls: String,
+            data: Array,
+            renderFormat: Function,
+            checkedKeys: Array,
+            style: Object,
+            title: [String, Number],
+            filterable: Boolean,
+            filterPlaceholder: String,
+            filterMethod: Function,
+            notFoundText: String,
+            validKeysCount: Number
+        },
+        data () {
+            return {
+                showItems: [],
+                query: ''
+            }
+        },
+        computed: {
+            bodyClasses () {
+                return [
+                    `${this.prefixCls}-body`,
+                    {
+                        [`${this.prefixCls}-body-with-search`]: this.filterable
+                    }
+                ]
+            },
+            count () {
+                const validKeysCount = this.validKeysCount;
+                return (validKeysCount > 0 ? `${validKeysCount}/` : '') + `${this.data.length}条`;
+            },
+            checkedAll () {
+                return this.data.filter(data => !data.disabled).length === this.validKeysCount && this.validKeysCount !== 0;
+            },
+            checkedAllDisabled () {
+                return this.data.filter(data => !data.disabled).length <= 0;
+            }
+        },
+        methods: {
+            showLabel (item) {
+                return this.renderFormat(item);
+            },
+            isCheck (item) {
+                return this.checkedKeys.some(key => key === item.key);
+            },
+            select (item) {
+                if (item.disabled) return;
+                const index = this.checkedKeys.indexOf(item.key);
+                index > -1 ? this.checkedKeys.splice(index, 1) : this.checkedKeys.push(item.key);
+            },
+            updateFilteredData () {
+                this.showItems = this.data.map(item => {
+                    return item;
+                })
+            },
+            toggleSelectAll (status) {
+                this.checkedKeys = status ?
+                        this.data.filter(data => !data.disabled || this.checkedKeys.indexOf(data.key) > -1).map(data => data.key) :
+                        this.data.filter(data => data.disabled && this.checkedKeys.indexOf(data.key) > -1).map(data => data.key);
+            },
+            filterData (value) {
+                return this.filterMethod(value, this.query);
+            }
+        },
+        created () {
+            this.updateFilteredData();
+        },
+        watch: {
+            data () {
+                this.updateFilteredData();
+            }
+        }
+    }
+</script>

src/components/transfer/operation.vue

@@ -0,0 +1,31 @@
+<template>
+    <div :class="prefixCls + '-operation'">
+        <i-button type="primary" size="small" :disabled="!rightActive" @click="moveToLeft">
+            <Icon type="ios-arrow-left"></Icon> {{ operations[0] }}
+        </i-button>
+        <i-button type="primary" size="small" :disabled="!leftActive" @click="moveToRight">
+            {{ operations[1] }} <Icon type="ios-arrow-right"></Icon>
+        </i-button>
+    </div>
+</template>
+<script>
+    import iButton from '../button/button.vue';
+    import Icon from '../icon/icon.vue';
+
+    export default {
+        props: {
+            prefixCls: String,
+            operations: Array,
+            leftActive: Boolean,
+            rightActive: Boolean
+        },
+        methods: {
+            moveToLeft () {
+                this.$parent.moveTo('left');
+            },
+            moveToRight () {
+                this.$parent.moveTo('right');
+            }
+        }
+    }
+</script>

src/components/transfer/search.vue

@@ -0,0 +1,32 @@
+<template>
+    <div :class="prefixCls">
+        <i-input
+            :value.sync="query"
+            size="small"
+            :icon="icon"
+            :placeholder="placeholder"
+            @on-click="handleClick"></i-input>
+    </div>
+</template>
+<script>
+    import iInput from '../input/input.vue';
+
+    export default {
+        props: {
+            prefixCls: String,
+            placeholder: String,
+            query: String
+        },
+        computed: {
+            icon () {
+                return this.query === '' ? 'ios-search' : 'ios-close';
+            }
+        },
+        methods: {
+            handleClick () {
+                if (this.query === '') return;
+                this.query = '';
+            }
+        }
+    }
+</script>

src/components/transfer/transfer.vue

@@ -0,0 +1,186 @@
+<template>
+    <div :class="classes">
+        <List
+            v-ref:left
+            :prefix-cls="prefixCls + '-list'"
+            :data="leftData"
+            :render-format="renderFormat"
+            :checked-keys.sync="leftCheckedKeys"
+            :valid-keys-count.sync="leftValidKeysCount"
+            :style="listStyle"
+            :title="titles[0]"
+            :filterable="filterable"
+            :filter-placeholder="filterPlaceholder"
+            :filter-method="filterMethod"
+            :not-found-text="notFoundText">
+            <slot></slot>
+        </List><Operation
+            :prefix-cls="prefixCls"
+            :operations="operations"
+            :left-active="leftValidKeysCount > 0"
+            :right-active="rightValidKeysCount > 0"></Operation><List
+            v-ref:right
+            :prefix-cls="prefixCls + '-list'"
+            :data="rightData"
+            :render-format="renderFormat"
+            :checked-keys.sync="rightCheckedKeys"
+            :valid-keys-count.sync="rightValidKeysCount"
+            :style="listStyle"
+            :title="titles[1]"
+            :filterable="filterable"
+            :filter-placeholder="filterPlaceholder"
+            :filter-method="filterMethod"
+            :not-found-text="notFoundText">
+            <slot></slot>
+        </List>
+    </div>
+</template>
+<script>
+    import List from './list.vue';
+    import Operation from './operation.vue';
+
+    const prefixCls = 'ivu-transfer';
+
+    export default {
+        components: { List, Operation },
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            renderFormat: {
+                type: Function,
+                default (item) {
+                    return item.label || item.key;
+                }
+            },
+            targetKeys: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            selectedKeys: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            listStyle: {
+                type: Object,
+                default () {
+                    return {}
+                }
+            },
+            titles: {
+                type: Array,
+                default () {
+                    return ['源列表', '目的列表']
+                }
+            },
+            operations: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            filterable: {
+                type: Boolean,
+                default: false
+            },
+            filterPlaceholder: {
+                type: String,
+                default: '请输入搜索内容'
+            },
+            filterMethod: {
+                type: Function,
+                default (data, query) {
+                    const type = ('label' in data) ? 'label' : 'key';
+                    return data[type].indexOf(query) > -1;
+                }
+            },
+            notFoundText: {
+                type: String,
+                default: '列表为空'
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                leftData: [],
+                rightData: [],
+                leftCheckedKeys: [],
+                rightCheckedKeys: []
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            leftValidKeysCount () {
+                return this.getValidKeys('left').length;
+            },
+            rightValidKeysCount () {
+                return this.getValidKeys('right').length;
+            }
+        },
+        methods: {
+            getValidKeys (direction) {
+                return this[`${direction}Data`].filter(data => !data.disabled && this[`${direction}CheckedKeys`].indexOf(data.key) > -1).map(data => data.key);
+            },
+            splitData (init = false) {
+                this.leftData = [...this.data];
+                this.rightData = [];
+                if (this.targetKeys.length > 0) {
+                    this.targetKeys.forEach((targetKey) => {
+                        this.rightData.push(
+                                this.leftData.filter((data, index) => {
+                                    if (data.key === targetKey) {
+                                        this.leftData.splice(index, 1);
+                                        return true;
+                                    }
+                                    return false;
+                                })[0]);
+                    });
+                }
+                if (init) {
+                    this.splitSelectedKey();
+                }
+            },
+            splitSelectedKey () {
+                const selectedKeys = this.selectedKeys;
+                if (selectedKeys.length > 0) {
+                    this.leftCheckedKeys = this.leftData
+                            .filter(data => selectedKeys.indexOf(data.key) > -1)
+                            .map(data => data.key);
+                    this.rightCheckedKeys = this.rightData
+                            .filter(data => selectedKeys.indexOf(data.key) > -1)
+                            .map(data => data.key);
+                }
+            },
+            moveTo (direction) {
+                const targetKeys = this.targetKeys;
+                const opposite = direction === 'left' ? 'right' : 'left';
+                const moveKeys = this.getValidKeys(opposite);
+                const newTargetKeys = direction === 'right' ?
+                        moveKeys.concat(targetKeys) :
+                        targetKeys.filter(targetKey => !moveKeys.some(checkedKey => targetKey === checkedKey));
+
+                this.$refs[opposite].toggleSelectAll(false);
+                this.$emit('on-change', newTargetKeys, direction, moveKeys);
+            }
+        },
+        watch: {
+            targetKeys () {
+                this.splitData(false);
+            }
+        },
+        created () {
+            this.splitData(true);
+        }
+    }
+</script>

src/index.js

@@ -27,6 +27,7 @@ import Switch from './components/switch';
 import Tag from './components/tag';
 import Timeline from './components/timeline';
 import Tooltip from './components/tooltip';
+import Transfer from './components/transfer';
 import { Row, Col } from './components/layout';
 import { Select, Option, OptionGroup } from './components/select';
 
@@ -71,7 +72,8 @@ const iview = {
     Tag,
     Timeline,
     TimelineItem: Timeline.Item,
-    Tooltip
+    Tooltip,
+    Transfer
 };
 
 const install = function (Vue) {

src/styles/components/index.less

@@ -26,4 +26,5 @@
 @import "poptip";
 @import "input";
 @import "slider";
-@import "cascader";
+@import "cascader";
+@import "transfer";

src/styles/components/input.less

@@ -19,6 +19,10 @@
         z-index: 1;
     }
 
+    &-icon + &{
+        padding-right: 32px;
+    }
+
     &-wrapper-large &-icon{
         font-size: 18px;
         height: @input-height-large;
@@ -29,10 +33,10 @@
         font-size: 14px;
         height: @input-height-small;
         line-height: @input-height-small;
-    }
 
-    &-icon + &{
+        + .@{input-prefix-cls} {
-        padding-right: 32px;
+            padding-right: 24px;
+        }
     }
 }
 

src/styles/components/transfer.less

@@ -0,0 +1,89 @@
+@transfer-prefix-cls: ~"@{css-prefix}transfer";
+@transfer-item-prefix-cls: ~"@{css-prefix}transfer-list-content-item";
+
+.@{transfer-prefix-cls} {
+    position: relative;
+    line-height: @line-height-base;
+
+    &-list{
+        display: inline-block;
+        width: 180px;
+        height: 210px;
+        font-size: @font-size-small;
+        vertical-align: middle;
+        border: 1px solid @border-color-base;
+        border-radius: @border-radius-base;
+        position: relative;
+        padding-top: 35px;
+
+        &-header {
+            padding: 8px 16px;
+            border-radius: @border-radius-base @border-radius-base 0 0;
+            background: #fff;
+            color: @text-color;
+            border-bottom: 1px solid @border-color-split;
+            overflow: hidden;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+
+            &-count {
+                margin: 0 !important;
+                float: right;
+            }
+        }
+
+        &-body{
+            height: 100%;
+            position: relative;
+
+            &-with-search{
+                padding-top: 40px;
+            }
+        }
+
+        &-content{
+            height: 100%;
+            padding: 4px 0;
+            overflow: auto;
+
+            &-item{
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+        &-body-with-search &-content{
+            padding: 0;
+        }
+
+        &-body-search-wrapper{
+            padding: 8px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+        }
+
+        &-search{
+            position: relative;
+        }
+    }
+    &-operation {
+        display: inline-block;
+        overflow: hidden;
+        margin: 0 16px;
+        vertical-align: middle;
+
+        .@{btn-prefix-cls} {
+            display: block;
+            min-width: @btn-circle-size-small;
+
+            &:first-child {
+                margin-bottom: 12px;
+            }
+        }
+    }
+}
+.select-item(@transfer-prefix-cls, @transfer-item-prefix-cls);

src/styles/mixins/checkbox.less

@@ -11,6 +11,10 @@
         line-height: 1;
         position: relative;
 
+        &-disabled{
+            cursor: @cursor-disabled;
+        }
+
         &:hover {
             .@{checkbox-inner-prefix-cls} {
                 border-color: #bcbcbc;
@@ -56,6 +60,10 @@
             z-index: 1;
             cursor: pointer;
             opacity: 0;
+
+            &[disabled]{
+                cursor: @cursor-disabled;
+            }
         }
     }
 
@@ -141,6 +149,9 @@
         & + & {
             margin-left: 8px;
         }
+        &-disabled{
+            cursor: @cursor-disabled;
+        }
     }
 
     .@{checkbox-prefix-cls}-wrapper + span,

test/app.vue

@@ -42,6 +42,7 @@ li + li {
                 <li><a v-link="'/tag'">Tag</a></li>
                 <li><a v-link="'/input'">Input</a></li>
                 <li><a v-link="'/cascader'">Cascader</a></li>
+                <li><a v-link="'/transfer'">Transfer</a></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -97,6 +97,11 @@ router.map({
         component: function (resolve) {
             require(['./routers/cascader.vue'], resolve);
         }
+    },
+    '/transfer': {
+        component: function (resolve) {
+            require(['./routers/transfer.vue'], resolve);
+        }
     }
 });
 

test/routers/transfer.vue

@@ -0,0 +1,41 @@
+<style>
+    body{
+        height: auto;
+    }
+</style>
+<template>
+    <div style="margin: 50px;">
+        <Transfer
+            :data="data"
+            filterable
+            :target-keys.sync="targetKeys"
+            :selected-keys="selectedKeys"
+            :operations="['向左移动','向右移动']"
+            @on-change="change"></Transfer>
+    </div>
+</template>
+<script>
+    import { Transfer } from 'iview';
+
+    export default {
+        props: {
+        
+        },
+        data () {
+            return {
+                data: [{"key":"0","label":"content1","description":"description of content1","disabled":true},{"key":"1","label":"content2","description":"description of content2","disabled": false},{"key":"2","label":"content3","description":"description of content3","disabled":false},{"key":"3","label":"content4","description":"description of content4","disabled":false},{"key":"4","label":"content5","description":"description of content5","disabled":true},{"key":"5","label":"content6","description":"description of content6","disabled":false},{"key":"6","label":"content7","description":"description of content7","disabled":false},{"key":"7","label":"content8","description":"description of content8","disabled":false},{"key":"8","label":"content9","description":"description of content9","disabled":true},{"key":"9","label":"content10","description":"description of content10","disabled":false},{"key":"10","label":"content11","description":"description of content11","disabled":false},{"key":"11","label":"content12","description":"description of content12","disabled":false},{"key":"12","label":"content13","description":"description of content13","disabled":true},{"key":"13","label":"content14","description":"description of content14","disabled":false},{"key":"14","label":"content15","description":"description of content15","disabled":false},{"key":"15","label":"content16","description":"description of content16","disabled":false},{"key":"16","label":"content17","description":"description of content17","disabled":false},{"key":"17","label":"content18","description":"description of content18","disabled":true},{"key":"18","label":"content19","description":"description of content19","disabled":false},{"key":"19","label":"content20","description":"description of content20","disabled":false}],
+                targetKeys: ['1','2','3','5','8'],
+                selectedKeys: ['0','1','4', '5','6','9']
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+            change (newTargetKeys, direction, moveKeys) {
+//                console.log(newTargetKeys)
+                this.targetKeys = newTargetKeys;
+            }
+        }
+    }
+</script>