add Cascader

add Cascader

src/components/cascader/cascader.vue

@@ -1,22 +1,39 @@
 <template>
-    <div :class="[prefixCls]">
+    <div :class="classes" v-clickoutside="handleClose">
         <i-input
             readonly
             :disabled="disabled"
             :value.sync="displayRender"
             :size="size"
-            :placeholder="placeholder"></i-input>
+            :placeholder="placeholder"
+            @on-focus="onFocus"></i-input>
+        <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
+        <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
+        <Dropdown v-show="visible" transition="slide-up">
+            <div>
+                <Caspanel
+                    :prefix-cls="prefixCls"
+                    :data.sync="data"
+                    :disabled="disabled"
+                    :trigger="trigger"
+                    @on-update-result="updateResult"></Caspanel>
+            </div>
+        </Dropdown>
     </div>
 </template>
 <script>
     import iInput from '../input/input.vue';
     import Dropdown from '../select/dropdown.vue';
+    import Icon from '../icon/icon.vue';
+    import Caspanel from './caspanel.vue';
     import clickoutside from '../../directives/clickoutside';
-    import { oneOf, MutationObserver } from '../../utils/assist';
+    import { oneOf } from '../../utils/assist';
 
     const prefixCls = 'ivu-cascader';
 
     export default {
+        components: { iInput, Dropdown, Icon, Caspanel },
+        directives: { clickoutside },
         props: {
             data: {
                 type: Array,
@@ -33,7 +50,7 @@
             },
             clearable: {
                 type: Boolean,
-                default: false
+                default: true
             },
             placeholder: {
                 type: String,
@@ -56,18 +73,31 @@
             },
             renderFormat: {
                 type: Function,
-                default: (label, selectedData) => {
-                    label.join('/');
+                default (label, selectedData) {
+                    return label.join('/');
                 }
             }
         },
         data () {
             return {
                 prefixCls: prefixCls,
-                selected: []
+                visible: false,
+                selected: [],
+                tmpSelected: []
             }
         },
         computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-show-clear`]: this.showCloseIcon
+                    }
+                ]
+            },
+            showCloseIcon () {
+                return this.value && this.value.length && this.clearable;
+            },
             displayRender () {
                 let label = [];
                 for (let i = 0; i < this.selected.length; i++) {
@@ -78,7 +108,22 @@
             }
         },
         methods: {
-        
+            clearSelect () {
+
+            },
+            handleClose () {
+                this.visible = false;
+            },
+            onFocus () {
+                this.visible = true;
+            },
+            updateResult (result) {
+                console.log(JSON.stringify(result))
+                this.selected = result;
+            }
+        },
+        ready () {
+
         }
     }
 </script>

src/components/cascader/casitem.vue

@@ -0,0 +1,25 @@
+<template>
+    <li :class="classes">{{ data.label }}<i v-if="data.children && data.children.length" class="ivu-icon ivu-icon-ios-arrow-right"></i></li>
+</template>
+<script>
+    export default {
+        props: {
+            data: Object,
+            prefixCls: String,
+            tmpItem: Object
+        },
+        computed: {
+            classes () {
+                return [
+                    `${this.prefixCls}-menu-item`,
+                    {
+                        [`${this.prefixCls}-menu-item-active`]: this.tmpItem.value === this.data.value
+                    }
+                ]
+            }
+        },
+        ready () {
+
+        }
+    }
+</script>

src/components/cascader/caspanel.vue

@@ -0,0 +1,95 @@
+<template>
+    <ul v-if="data && data.length" :class="[prefixCls + '-menu']">
+        <Casitem
+            v-for="item in data"
+            :prefix-cls="prefixCls"
+            :data.sync="item"
+            :tmp-item="tmpItem"
+            @click.stop="handleClickItem(item)"
+            @mouseenter.stop="handleHoverItem(item)"></Casitem>
+    </ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data.sync="sublist" :disabled="disabled" :trigger="trigger" @on-update-result="updateResult"></Caspanel>
+</template>
+<script>
+    import Casitem from './casitem.vue';
+    import { oneOf } from '../../utils/assist';
+
+    export default {
+        name: 'Caspanel',
+        components: { Casitem },
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            sublist: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            disabled: Boolean,
+            changeOnSelect: Boolean,
+            trigger: {
+                validator (value) {
+                    return oneOf(value, ['click', 'hover']);
+                }
+            },
+            prefixCls: String
+        },
+        data () {
+            return {
+                tmpItem: {},
+                result: []
+            }
+        },
+        methods: {
+            handleClickItem (item) {
+                if (this.trigger !== 'click') return;
+                this.handleTriggerItem(item);
+            },
+            handleHoverItem (item) {
+                if (this.trigger !== 'hover') return;
+                this.handleTriggerItem(item);
+            },
+            handleTriggerItem (item) {
+                if (item.disabled) return;
+
+                if (item.children && item.children.length){
+                    this.sublist = item.children;
+                    // todo 实时选择
+                } else {
+                    this.sublist = [];
+                    // todo 选择
+                }
+
+                // return value back
+                const backItem = this.getBaseItem(item);
+
+                this.tmpItem = backItem;
+                this.$emit('on-update-result', [backItem]);
+            },
+            updateResult (item) {
+                this.result = [this.tmpItem].concat(item);
+                this.$emit('on-update-result', this.result);
+            },
+            getBaseItem (item) {
+                let backItem = Object.assign({}, item);
+                if (backItem.children) {
+                    delete backItem.children;
+                }
+
+                return backItem;
+            }
+        },
+        watch: {
+            data () {
+                this.sublist = [];
+            }
+        },
+        ready () {
+            // todo 初始化时，判断预设的值
+        }
+    }
+</script>