support Transfer

support Transfer

examples/app.vue

@@ -46,6 +46,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/select">Select</router-link></li>
                 <li><router-link to="/backtop">Backtop</router-link></li>
                 <li><router-link to="/page">Page</router-link></li>
+                <li><router-link to="/transfer">Transfer</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/main.js

@@ -148,6 +148,10 @@ const router = new VueRouter({
         {
             path: '/page',
             component: require('./routers/page.vue')
+        },
+        {
+            path: '/transfer',
+            component: require('./routers/transfer.vue')
         }
     ]
 });

examples/routers/transfer.vue

@@ -1,18 +1,77 @@
+<!--<template>-->
+    <!--<div>-->
+        <!--<Transfer-->
+            <!--:data="data1"-->
+            <!--filterable-->
+            <!--:target-keys="targetKeys1"-->
+            <!--:render-format="render1"-->
+            <!--@on-change="handleChange1"></Transfer>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--data1: this.getMockData(),-->
+                <!--targetKeys1: this.getTargetKeys()-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--getMockData () {-->
+                <!--let mockData = [];-->
+                <!--for (let i = 1; i <= 20; i++) {-->
+                    <!--mockData.push({-->
+                        <!--key: i.toString(),-->
+                        <!--label: '内容' + i,-->
+                        <!--description: '内容' + i + '的描述信息',-->
+                        <!--disabled: Math.random() * 3 < 1-->
+                    <!--});-->
+                <!--}-->
+                <!--return mockData;-->
+            <!--},-->
+            <!--getTargetKeys () {-->
+                <!--return this.getMockData()-->
+                    <!--.filter(() => Math.random() * 2 > 1)-->
+                    <!--.map(item => item.key);-->
+            <!--},-->
+            <!--render1 (item) {-->
+                <!--return item.label;-->
+            <!--},-->
+            <!--handleChange1 (newTargetKeys, direction, moveKeys) {-->
+                <!--console.log(newTargetKeys);-->
+                <!--console.log(direction);-->
+                <!--console.log(moveKeys);-->
+                <!--this.targetKeys1 = newTargetKeys;-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+
+
 <template>
     <Transfer
-            :data="data2"
+            :data="data3"
-            :target-keys="targetKeys2"
+            :target-keys="targetKeys3"
+            :list-style="listStyle"
+            :render-format="render3"
+            :operations="['向左移动','向右移动']"
             filterable
-            :render-format="rf"
+            @on-change="handleChange3">
-            :filter-method="filterMethod"
+        <div :style="{float: 'right', margin: '5px'}">
-            @on-change="handleChange2"></Transfer>
+            <Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button>
+        </div>
+    </Transfer>
 </template>
 <script>
     export default {
         data () {
             return {
-                data2: this.getMockData(),
+                data3: this.getMockData(),
-                targetKeys2: this.getTargetKeys()
+                targetKeys3: this.getTargetKeys(),
+                listStyle: {
+                    width: '250px',
+                    height: '300px'
+                }
             }
         },
         methods: {
@@ -33,15 +92,59 @@
                     .filter(() => Math.random() * 2 > 1)
                     .map(item => item.key);
             },
-            handleChange2 (newTargetKeys) {
+            handleChange3 (newTargetKeys) {
-                this.targetKeys2 = newTargetKeys;
+                this.targetKeys3 = newTargetKeys;
             },
-            filterMethod (data, query) {
+            render3 (item) {
-                return data.label.indexOf(query) > -1;
+                return item.label + ' - ' + item.description;
             },
-            rf (data) {
+            reloadMockData () {
-                return '<i class="ivu-icon ivu-icon-alert"></i>' + data.label;
+                this.data3 = this.getMockData();
+                this.targetKeys3 = this.getTargetKeys();
             }
         }
     }
 </script>
+
+<!--<template>-->
+    <!--<Transfer-->
+            <!--:data="data4"-->
+            <!--:target-keys="targetKeys4"-->
+            <!--:render-format="render4"-->
+            <!--@on-change="handleChange4"></Transfer>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--data4: this.getMockData(),-->
+                <!--targetKeys4: this.getTargetKeys()-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--getMockData () {-->
+                <!--let mockData = [];-->
+                <!--for (let i = 1; i <= 20; i++) {-->
+                    <!--mockData.push({-->
+                        <!--key: i.toString(),-->
+                        <!--label: '内容' + i,-->
+                        <!--description: '内容' + i + '的描述信息',-->
+                        <!--disabled: Math.random() * 3 < 1-->
+                    <!--});-->
+                <!--}-->
+                <!--return mockData;-->
+            <!--},-->
+            <!--getTargetKeys () {-->
+                <!--return this.getMockData()-->
+                    <!--.filter(() => Math.random() * 2 > 1)-->
+                    <!--.map(item => item.key);-->
+            <!--},-->
+            <!--handleChange4 (newTargetKeys) {-->
+                <!--this.targetKeys4 = newTargetKeys;-->
+            <!--},-->
+            <!--render4 (item) {-->
+                <!--return item.label + ' - ' + item.description;-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->

src/components/transfer/list.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="classes" :style="style">
         <div :class="prefixCls + '-header'">
-            <Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
+            <Checkbox :value="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
             <span>{{ title }}</span>
             <span :class="prefixCls + '-header-count'">{{ count }}</span>
         </div>
@@ -9,21 +9,23 @@
             <div :class="prefixCls + '-body-search-wrapper'" v-if="filterable">
                 <Search
                     :prefix-cls="prefixCls + '-search'"
-                    :query.sync="query"
+                    :query="query"
+                    @on-query-clear="handleQueryClear"
+                    @on-query-change="handleQueryChange"
                     :placeholder="filterPlaceholder"></Search>
             </div>
             <ul :class="prefixCls + '-content'">
                 <li
-                    v-for="item in showItems | filterBy filterData"
+                    v-for="item in filterData"
                     :class="itemClasses(item)"
                     @click.prevent="select(item)">
-                    <Checkbox :checked="isCheck(item)" :disabled="item.disabled"></Checkbox>
+                    <Checkbox :value="isCheck(item)" :disabled="item.disabled"></Checkbox>
-                    <span>{{{ showLabel(item) }}}</span>
+                    <span v-html="showLabel(item)"></span>
                 </li>
                 <li :class="prefixCls + '-content-not-found'">{{ notFoundText }}</li>
             </ul>
         </div>
-        <div :class="prefixCls + '-footer'" v-if="showFooter" v-el:footer><slot></slot></div>
+        <div :class="prefixCls + '-footer'" v-if="showFooter"><slot></slot></div>
     </div>
 </template>
 <script>
@@ -31,6 +33,7 @@
     import Checkbox from '../checkbox/checkbox.vue';
 
     export default {
+        name: 'TransferList',
         components: { Search, Checkbox },
         props: {
             prefixCls: String,
@@ -52,6 +55,11 @@
                 showFooter: true
             };
         },
+        watch: {
+            data () {
+                this.updateFilteredData();
+            }
+        },
         computed: {
             classes () {
                 return [
@@ -79,6 +87,9 @@
             },
             checkedAllDisabled () {
                 return this.data.filter(data => !data.disabled).length <= 0;
+            },
+            filterData () {
+                return this.showItems.filter(item => this.filterMethod(item, this.query));
             }
         },
         methods: {
@@ -105,25 +116,23 @@
                 this.showItems = this.data;
             },
             toggleSelectAll (status) {
-                this.checkedKeys = status ?
+                const keys = 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);
+                this.$emit('on-checked-keys-change', keys);
             },
-            filterData (value) {
+            handleQueryClear () {
-                return this.filterMethod(value, this.query);
+                this.query = '';
+            },
+            handleQueryChange (val) {
+                this.query = val;
             }
         },
         created () {
             this.updateFilteredData();
-
         },
-        compiled () {
+        mounted () {
-            this.showFooter = this.$els.footer.innerHTML !== '';
+            this.showFooter = this.$slots.default !== undefined;
-        },
-        watch: {
-            data () {
-                this.updateFilteredData();
-            }
         }
     };
 </script>

src/components/transfer/operation.vue

@@ -1,9 +1,9 @@
 <template>
     <div :class="prefixCls + '-operation'">
-        <i-button type="primary" size="small" :disabled="!rightActive" @click="moveToLeft">
+        <i-button type="primary" size="small" :disabled="!rightActive" @click.native="moveToLeft">
             <Icon type="ios-arrow-left"></Icon> {{ operations[0] }}
         </i-button>
-        <i-button type="primary" size="small" :disabled="!leftActive" @click="moveToRight">
+        <i-button type="primary" size="small" :disabled="!leftActive" @click.native="moveToRight">
             {{ operations[1] }} <Icon type="ios-arrow-right"></Icon>
         </i-button>
     </div>
@@ -13,6 +13,7 @@
     import Icon from '../icon/icon.vue';
 
     export default {
+        name: 'Operation',
         components: { iButton, Icon },
         props: {
             prefixCls: String,

src/components/transfer/search.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="prefixCls">
         <i-input
-            :value.sync="query"
+            v-model="currentQuery"
             size="small"
             :icon="icon"
             :placeholder="placeholder"
@@ -12,12 +12,26 @@
     import iInput from '../input/input.vue';
 
     export default {
+        name: 'Search',
         components: { iInput },
         props: {
             prefixCls: String,
             placeholder: String,
             query: String
         },
+        data () {
+            return {
+                currentQuery: this.query
+            };
+        },
+        watch: {
+            query (val) {
+                this.currentQuery = val;
+            },
+            currentQuery (val) {
+                this.$emit('on-query-change', val);
+            }
+        },
         computed: {
             icon () {
                 return this.query === '' ? 'ios-search' : 'ios-close';
@@ -25,17 +39,19 @@
         },
         methods: {
             handleClick () {
-                if (this.query === '') return;
+                if (this.currentQuery === '') return;
-                this.query = '';
+                this.currentQuery = '';
-            }
+                this.$emit('on-query-clear');
-        },
-        events: {
-            'on-form-blur' () {
-                return false;
-            },
-            'on-form-change' () {
-                return false;
             }
         }
+        // todo 事件
+//        events: {
+//            'on-form-blur' () {
+//                return false;
+//            },
+//            'on-form-change' () {
+//                return false;
+//            }
+//        }
     };
 </script>

src/components/transfer/transfer.vue

@@ -1,12 +1,13 @@
 <template>
     <div :class="classes">
         <List
-            v-ref:left
+            ref="left"
             :prefix-cls="prefixCls + '-list'"
             :data="leftData"
             :render-format="renderFormat"
-            :checked-keys.sync="leftCheckedKeys"
+            :checked-keys="leftCheckedKeys"
-            :valid-keys-count.sync="leftValidKeysCount"
+            @on-checked-keys-change="handleLeftCheckedKeysChange"
+            :valid-keys-count="leftValidKeysCount"
             :style="listStyle"
             :title="titles[0]"
             :filterable="filterable"
@@ -19,19 +20,20 @@
             :operations="operations"
             :left-active="leftValidKeysCount > 0"
             :right-active="rightValidKeysCount > 0"></Operation><List
-            v-ref:right
+            ref="right"
             :prefix-cls="prefixCls + '-list'"
             :data="rightData"
             :render-format="renderFormat"
-            :checked-keys.sync="rightCheckedKeys"
+            :checked-keys="rightCheckedKeys"
-            :valid-keys-count.sync="rightValidKeysCount"
+            @on-checked-keys-change="handleRightCheckedKeysChange"
+            :valid-keys-count="rightValidKeysCount"
             :style="listStyle"
             :title="titles[1]"
             :filterable="filterable"
             :filter-placeholder="filterPlaceholder"
             :filter-method="filterMethod"
             :not-found-text="notFoundText">
-            <slot></slot>
+            <slot name="right"></slot>
         </List>
     </div>
 </template>
@@ -177,7 +179,14 @@
 
                 this.$refs[opposite].toggleSelectAll(false);
                 this.$emit('on-change', newTargetKeys, direction, moveKeys);
-                this.$dispatch('on-form-change', newTargetKeys, direction, moveKeys);
+                // todo 事件
+//                this.$dispatch('on-form-change', newTargetKeys, direction, moveKeys);
+            },
+            handleLeftCheckedKeysChange (keys) {
+                this.leftCheckedKeys = keys;
+            },
+            handleRightCheckedKeysChange (keys) {
+                this.rightCheckedKeys = keys;
             }
         },
         watch: {

src/index.js

@@ -39,7 +39,7 @@ import Tag from './components/tag';
 import Timeline from './components/timeline';
 // import TimePicker from './components/time-picker';
 import Tooltip from './components/tooltip';
-// import Transfer from './components/transfer';
+import Transfer from './components/transfer';
 import Tree from './components/tree';
 import Upload from './components/upload';
 import { Row, Col } from './components/grid';
@@ -107,7 +107,7 @@ const iview = {
     TimelineItem: Timeline.Item,
     // TimePicker,
     Tooltip,
-    // Transfer,
+    Transfer,
     Tree,
     Upload
 };