Modify the directory structure

Modify the directory structure

src/components/progress/index.js

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

src/components/progress/progress.vue

@@ -0,0 +1,121 @@
+<template>
+    <div :class="wrapClasses">
+        <div :class="outerClasses">
+            <div :class="innerClasses">
+                <div :class="bgClasses" :style="bgStyle"></div>
+            </div>
+        </div>
+        <span v-if="!hideInfo" :class="textClasses">
+            <slot>
+                <span v-if="isStatus" :class="textInnerClasses">
+                    <Icon :type="statusIcon"></Icon>
+                </span>
+                <span v-else :class="textInnerClasses">
+                    {{ percent }}%
+                </span>
+            </slot>
+        </span>
+    </div>
+</template>
+<script>
+    import Icon from '../icon';
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-progress';
+
+    export default {
+        components: { Icon },
+        props: {
+            percent: {
+                type: Number,
+                default: 0
+            },
+            status: {
+                validator (value) {
+                    return oneOf(value, ['normal', 'active', 'wrong', 'success']);
+                },
+                default: 'normal'
+            },
+            hideInfo: {
+                type: Boolean,
+                default: false
+            },
+            strokeWidth: {
+                type: Number,
+                default: 10
+            }
+        },
+        computed: {
+            isStatus () {
+                return this.status == 'wrong' || this.status == 'success';
+            },
+            statusIcon () {
+                let type = '';
+                switch (this.status) {
+                    case 'wrong':
+                        type = 'ios-close';
+                        break;
+                    case 'success':
+                         type = 'ios-checkmark';
+                        break;
+                }
+
+                return type;
+            },
+            bgStyle () {
+                return {
+                    width: `${this.percent}%`,
+                    height: `${this.strokeWidth}px`
+                }
+            },
+            wrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.status}`,
+                    {
+                        [`${prefixCls}-show-info`]: !this.hideInfo,
+
+                    }
+                ]
+            },
+            textClasses () {
+                return `${prefixCls}-text`;
+            },
+            textInnerClasses () {
+                return `${prefixCls}-text-inner`;
+            },
+            outerClasses () {
+                return `${prefixCls}-outer`;
+            },
+            innerClasses () {
+                return `${prefixCls}-inner`;
+            },
+            bgClasses () {
+                return `${prefixCls}-bg`;
+            }
+        },
+        compiled () {
+            this.handleStatus();
+        },
+        methods: {
+            handleStatus (isDown) {
+                if (isDown) {
+                    this.status = 'normal';
+                } else {
+                    if (parseInt(this.percent, 10) == 100) {
+                        this.status = 'success';
+                    }
+                }
+            }
+        },
+        watch: {
+            percent (val, oldVal) {
+                if (val < oldVal) {
+                    this.handleStatus(true);
+                } else {
+                    this.handleStatus();
+                }
+            }
+        }
+    }
+</script>