add LoadingBar component

add LoadingBar component

README.md

@@ -1,15 +1,10 @@
-# iview
+# iView
 
 ### A high quality  UI components Library with Vue.js
 
 ## Docs
 
-### [中文文档](https://iview.github.io)
+### [中文文档](https://www.iviewui.com)
-
-## Tip
-
-### Most of the components are not yet UI, so stay tuned.
-###部分组件还没有UI,敬请期待。
 
 ## Programming 
 

components/loading-bar/index.js

@@ -0,0 +1,110 @@
+import LoadingBar from './loading-bar';
+
+let loadingBarInstance;
+let color = 'primary';
+let failedColor = 'error';
+let height = 2;
+let timer;
+
+function getLoadingBarInstance () {
+    loadingBarInstance = loadingBarInstance || LoadingBar.newInstance({
+        color: color,
+        failedColor: failedColor,
+        height: height
+    });
+
+    return loadingBarInstance;
+}
+
+function update(options) {
+    let instance  = getLoadingBarInstance();
+
+    instance.update(options);
+}
+
+function hide() {
+    setTimeout(() => {
+        update({
+            show: false
+        });
+        setTimeout(() => {
+            update({
+                percent: 0
+            });
+        }, 200)
+    }, 800);
+}
+
+function clearTimer() {
+    if (timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+}
+
+export default {
+    start () {
+        let percent = 0;
+
+        update({
+            percent: percent,
+            status: 'success',
+            show: true
+        });
+
+        timer = setInterval(() => {
+            percent += Math.floor(Math.random () * 3 + 5);
+            if (percent > 95) {
+                clearTimer();
+            }
+            update({
+                percent: percent,
+                status: 'success',
+                show: true
+            });
+        }, 200);
+    },
+    update (percent) {
+        clearTimer();
+        update({
+            percent: percent,
+            status: 'success',
+            show: true
+        });
+    },
+    finish () {
+        clearTimer();
+        update({
+            percent: 100,
+            status: 'success',
+            show: true
+        });
+        hide();
+    },
+    error () {
+        clearTimer();
+        update({
+            percent: 100,
+            status: 'error',
+            show: true
+        });
+        hide();
+    },
+    config (options) {
+        if (options.color) {
+            color = options.color;
+        }
+        if (options.failedColor) {
+            failedColor = options.failedColor;
+        }
+        if (options.height) {
+            height = options.height;
+        }
+    },
+    destroy () {
+        clearTimer();
+        let instance = getLoadingBarInstance();
+        loadingBarInstance = null;
+        instance.destroy();
+    }
+}

components/loading-bar/loading-bar.js

@@ -0,0 +1,42 @@
+import LoadingBar from './loading-bar.vue';
+import Vue from 'vue';
+import { camelcaseToHyphen } from '../../utils/assist';
+
+LoadingBar.newInstance = properties => {
+    const _props = properties || {};
+
+    let props = '';
+    Object.keys(_props).forEach(prop => {
+        props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
+    });
+
+    const div = document.createElement('div');
+    div.innerHTML = `<loading-bar${props}></loading-bar>`;
+    document.body.appendChild(div);
+
+    const loading_bar = new Vue({
+        el: div,
+        data: _props,
+        components: { LoadingBar }
+    }).$children[0];
+
+    return {
+        update (options) {
+            if ('percent' in options) {
+                loading_bar.percent = options.percent;
+            }
+            if (options.status) {
+                loading_bar.status = options.status;
+            }
+            if ('show' in options) {
+                loading_bar.show = options.show;
+            }
+        },
+        component: loading_bar,
+        destroy () {
+            document.body.removeChild(div);
+        }
+    }
+};
+
+export default LoadingBar;

components/loading-bar/loading-bar.vue

@@ -0,0 +1,77 @@
+<template>
+    <div :class="classes" :style="outerStyles" v-show="show" transition="fade">
+        <div :class="innerClasses" :style="styles"></div>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-loading-bar';
+
+    export default {
+        props: {
+            percent: {
+                type: Number,
+                default: 0
+            },
+            color: {
+                type: String,
+                default: 'primary'
+            },
+            failedColor: {
+                type: String,
+                default: 'error'
+            },
+            height: {
+                type: Number,
+                default: 2
+            },
+            status: {
+                type: String,
+                validator (value) {
+                    return oneOf(value, ['success', 'error']);
+                },
+                default: 'success'
+            },
+            show: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            classes () {
+                return `${prefixCls}`;
+            },
+            innerClasses () {
+                return [
+                    `${prefixCls}-inner`,
+                    {
+                        [`${prefixCls}-inner-color-primary`]: this.color === 'primary' && this.status === 'success',
+                        [`${prefixCls}-inner-failed-color-error`]: this.failedColor === 'error' && this.status === 'error'
+                    }
+                ]
+            },
+            outerStyles () {
+                return {
+                    height: `${this.height}px`
+                }
+            },
+            styles () {
+                let style = {
+                    width: `${this.percent}%`,
+                    height: `${this.height}px`
+                };
+
+                if (this.color !== 'primary' && this.status === 'success') {
+                    style.backgroundColor = this.color;
+                }
+
+                if (this.failedColor !== 'error' && this.status === 'error') {
+                    style.backgroundColor = this.failedColor;
+                }
+
+                return style;
+            }
+        }
+    }
+</script>

index.js

@@ -22,6 +22,7 @@ import Collapse from './components/collapse';
 import Card from './components/card';
 import Message from './components/message';
 import Notice from './components/notice';
+import LoadingBar from './components/loading-bar';
 
 const iview = {
     Button,
@@ -48,7 +49,8 @@ const iview = {
     Collapse,
     Card,
     Message,
-    Notice
+    Notice,
+    LoadingBar
 };
 
 module.exports = iview;

local/routers/radio.vue

@@ -150,7 +150,7 @@
     </Breadcrumb>
 </template>
 <script>
-    import { Radio, Alert, Icon, Collapse, Button, Checkbox, Switch, InputNumber, Breadcrumb } from 'iview';
+    import { Radio, Alert, Icon, Collapse, Button, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
 
     const RadioGroup = Radio.Group;
     const Panel = Collapse.Panel;
@@ -171,7 +171,8 @@
             Switch,
             InputNumber,
             Breadcrumb,
-            BreadcrumbItem
+            BreadcrumbItem,
+            LoadingBar
         },
         props: {
         
@@ -201,6 +202,9 @@
             change (status) {
                 console.log(status);
             }
+        },
+        ready () {
+            LoadingBar.start();
         }
     }
 </script>

local/routers/tag.vue

@@ -1,18 +1,18 @@
 <template>
-    <Tag>标签一</Tag>
+    <div>
-    <Tag>标签二</Tag>
+        <Button @click="start">start</Button>
-    <Tag closable>标签三</Tag>
+        <Button @click="destroy">destroy</Button>
-    <Tag closable color="blue">标签一</Tag>
+        <Button @click="finish">finish</Button>
-    <Tag closable color="green">标签二</Tag>
+        <Button @click="error">error</Button>
-    <Tag closable color="red">标签三</Tag>
+        <Button @click="update">update</Button>
-    <Tag color="red">标签三</Tag>
+    </div>
-    <Tag closable color="yellow">标签四</Tag>
 </template>
 <script>
-    import { Tag } from 'iview';
+    import { Tag, LoadingBar, Button } from 'iview';
     export default {
         components: {
-            Tag
+            Tag,
+            Button
         },
         props: {
         
@@ -26,7 +26,27 @@
         
         },
         methods: {
-        
+            start () {
+                LoadingBar.start();
+            },
+            destroy () {
+                LoadingBar.destroy();
+            },
+            finish () {
+                LoadingBar.finish();
+            },
+            error () {
+                LoadingBar.error();
+            },
+            update () {
+                LoadingBar.update(50);
+            }
+        },
+        ready () {
+            LoadingBar.start();
+            setTimeout(function () {
+                LoadingBar.finish();
+            }, 2000)
         }
     }
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

styles/components/index.less

@@ -14,3 +14,4 @@
 @import "switch";
 @import "input-number";
 @import "tag";
+@import "loading-bar";

styles/components/loading-bar.less

@@ -0,0 +1,22 @@
+@loading-bar-prefix-cls: ~"@{css-prefix}loading-bar";
+
+.@{loading-bar-prefix-cls} {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: @zindex-loading-bar;
+
+    &-inner {
+        .transition(width @transition-time linear);
+
+        &-color-primary {
+            background-color: @primary-color;
+        }
+
+        &-failed-color-error {
+            background-color: @error-color;
+        }
+    }
+}

styles/themes/default/custom.less

@@ -104,6 +104,7 @@
 @zindex-spin            : 8;
 @zindex-message         : 1010;
 @zindex-notification    : 1010;
+@zindex-loading-bar     : 2000;
 
 // Animation
 @animation-time         : .3s;