update the master branch to the latest

src/components/steps/index.js

@@ -0,0 +1,5 @@
+import Steps from './steps.vue';
+import Step from './step.vue';
+
+Steps.Step = Step;
+export default Steps;

src/components/steps/step.vue

@@ -0,0 +1,110 @@
+<template>
+    <div :class="wrapClasses" :style="styles">
+        <div :class="[prefixCls + '-tail']"><i></i></div>
+        <div :class="[prefixCls + '-head']">
+            <div :class="[prefixCls + '-head-inner']">
+                <span v-if="!icon && currentStatus != 'finish' && currentStatus != 'error'">{{ stepNumber }}</span>
+                <span v-else :class="iconClasses"></span>
+            </div>
+        </div>
+        <div :class="[prefixCls + '-main']">
+            <div :class="[prefixCls + '-title']">{{ title }}</div>
+            <slot>
+                <div v-if="content" :class="[prefixCls + '-content']">{{ content }}</div>
+            </slot>
+        </div>
+    </div>
+</template>
+<script>
+    import Emitter from '../../mixins/emitter';
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-steps';
+    const iconPrefixCls = 'ivu-icon';
+
+    export default {
+        name: 'Step',
+        mixins: [ Emitter ],
+        props: {
+            status: {
+                validator (value) {
+                    return oneOf(value, ['wait', 'process', 'finish', 'error']);
+                }
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            content: {
+                type: String
+            },
+            icon: {
+                type: String
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                stepNumber: '',
+                nextError: false,
+                total: 1,
+                currentStatus: ''
+            };
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-item`,
+                    `${prefixCls}-status-${this.currentStatus}`,
+                    {
+                        [`${prefixCls}-custom`]: !!this.icon,
+                        [`${prefixCls}-next-error`]: this.nextError
+                    }
+                ];
+            },
+            iconClasses () {
+                let icon = '';
+
+                if (this.icon) {
+                    icon = this.icon;
+                } else {
+                    if (this.currentStatus == 'finish') {
+                        icon = 'ios-checkmark';
+                    } else if (this.currentStatus == 'error') {
+                        icon = 'ios-close';
+                    }
+                }
+
+                return [
+                    `${prefixCls}-icon`,
+                    `${iconPrefixCls}`,
+                    {
+                        [`${iconPrefixCls}-${icon}`]: icon != ''
+                    }
+                ];
+            },
+            styles () {
+                return {
+                    width: `${1/this.total*100}%`
+                };
+            }
+        },
+        watch: {
+            status (val) {
+                this.currentStatus = val;
+                if (this.currentStatus == 'error') {
+                    this.$parent.setNextError();
+                }
+            }
+        },
+        created () {
+            this.currentStatus = this.status;
+        },
+        mounted () {
+            this.dispatch('Steps', 'append');
+        },
+        beforeDestroy () {
+            this.dispatch('Steps', 'remove');
+        }
+    };
+</script>

src/components/steps/steps.vue

@@ -0,0 +1,137 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-steps';
+
+    function debounce(fn) {
+        let waiting;
+        return function() {
+            if (waiting) return;
+            waiting = true;
+            const context = this,
+                args = arguments;
+            const later = function() {
+                waiting = false;
+                fn.apply(context, args);
+            };
+            this.$nextTick(later);
+        };
+    }
+
+    export default {
+        name: 'Steps',
+        props: {
+            current: {
+                type: Number,
+                default: 0
+            },
+            status: {
+                validator (value) {
+                    return oneOf(value, ['wait', 'process', 'finish', 'error']);
+                },
+                default: 'process'
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small']);
+                }
+            },
+            direction: {
+                validator (value) {
+                    return oneOf(value, ['horizontal', 'vertical']);
+                },
+                default: 'horizontal'
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.direction}`,
+                    {
+                        [`${prefixCls}-${this.size}`]: !!this.size
+                    }
+                ];
+            }
+        },
+        methods: {
+            updateChildProps (isInit) {
+                const total = this.$children.length;
+                this.$children.forEach((child, index) => {
+                    child.stepNumber = index + 1;
+
+                    if (this.direction === 'horizontal') {
+                        child.total = total;
+                    }
+
+                    // 如果已存在status,且在初始化时,则略过
+                    // todo 如果当前是error,在current改变时需要处理
+                    if (!(isInit && child.currentStatus)) {
+                        if (index == this.current) {
+                            if (this.status != 'error') {
+                                child.currentStatus = 'process';
+                            }
+                        } else if (index < this.current) {
+                            child.currentStatus = 'finish';
+                        } else {
+                            child.currentStatus = 'wait';
+                        }
+                    }
+
+                    if (child.currentStatus != 'error' && index != 0) {
+                        this.$children[index - 1].nextError = false;
+                    }
+                });
+            },
+            setNextError () {
+                this.$children.forEach((child, index) => {
+                    if (child.currentStatus == 'error' && index != 0) {
+                        this.$children[index - 1].nextError = true;
+                    }
+                });
+            },
+            updateCurrent (isInit) {
+                // 防止溢出边界
+                if (this.current < 0 || this.current >= this.$children.length ) {
+                    return;
+                }
+                if (isInit) {
+                    const current_status = this.$children[this.current].currentStatus;
+                    if (!current_status) {
+                        this.$children[this.current].currentStatus = this.status;
+                    }
+                } else {
+                    this.$children[this.current].currentStatus = this.status;
+                }
+            },
+            debouncedAppendRemove () {
+                return debounce(function () {
+                    this.updateSteps();
+                });
+            },
+            updateSteps () {
+                this.updateChildProps(true);
+                this.setNextError();
+                this.updateCurrent(true);
+            }
+        },
+        mounted () {
+            this.updateSteps();
+            this.$on('append', this.debouncedAppendRemove());
+            this.$on('remove', this.debouncedAppendRemove());
+        },
+        watch: {
+            current () {
+                this.updateChildProps();
+            },
+            status () {
+                this.updateCurrent();
+            }
+        }
+    };
+</script>