Merge pull request #43 from jingsam/build

sort components

src/index.js

@@ -1,76 +1,83 @@
+import Affix from './components/affix';
+import Alert from './components/alert';
+import BackTop from './components/back-top';
+import Badge from './components/badge';
+import Breadcrumb from './components/breadcrumb';
 import Button from './components/button';
+import Card from './components/card';
+import Checkbox from './components/checkbox';
+import Circle from './components/circle';
+import Collapse from './components/collapse';
 import Icon from './components/icon';
 import Input from './components/input';
-import Switch from './components/switch';
-import Radio from './components/radio';
-import Checkbox from './components/checkbox';
 import InputNumber from './components/input-number';
-import { Row, Col } from './components/layout';
+import LoadingBar from './components/loading-bar';
+import Message from './components/message';
+import Modal from './components/modal';
+import Notice from './components/notice';
 import Page from './components/page';
-import Badge from './components/badge';
-import Tag from './components/tag';
+import Poptip from './components/poptip';
 import Progress from './components/progress';
-import Circle from './components/circle';
-import Timeline from './components/timeline';
-import Affix from './components/affix';
-import BackTop from './components/back-top';
+import Radio from './components/radio';
+import Slider from './components/slider';
 import Spin from './components/spin';
 import Steps from './components/steps';
-import Breadcrumb from './components/breadcrumb';
-import Alert from './components/alert';
-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';
-import Modal from './components/modal';
-import { Select, Option, OptionGroup } from './components/select';
+import Switch from './components/switch';
+import Tag from './components/tag';
+import Timeline from './components/timeline';
 import Tooltip from './components/tooltip';
-import Poptip from './components/poptip';
-import Slider from './components/slider';
+import { Row, Col } from './components/layout';
+import { Select, Option, OptionGroup } from './components/select';
 
 const iview = {
-    Button,
-    iButton: Button,
-    ButtonGroup: Button.Group,
-    Icon,
-    Input,
-    Switch,
-    Radio,
-    RadioGroup: Radio.Group,
-    Checkbox,
-    CheckboxGroup: Checkbox.Group,
-    InputNumber,
-    Row,
-    iCol: Col,
-    Page,
-    Badge,
-    Tag,
-    Progress,
-    Circle,
-    Timeline,
-    TimelineItem: Timeline.Item,
     Affix,
+    Alert,
     BackTop,
-    Spin,
-    Steps,
-    Step: Steps.Step,
+    Badge,
     Breadcrumb,
     BreadcrumbItem: Breadcrumb.Item,
-    Alert,
-    Collapse,
-    Panel: Collapse.Panel,
+    Button,
+    ButtonGroup: Button.Group,
     Card,
-    Message,
-    Notice,
+    Checkbox,
+    CheckboxGroup: Checkbox.Group,
+    Circle,
+    Col,
+    Collapse,
+    Icon,
+    Input,
+    InputNumber,
     LoadingBar,
+    Message,
     Modal,
-    iSelect: Select,
+    Notice,
+    Option,
+    OptionGroup: OptionGroup,
+    Page,
+    Panel: Collapse.Panel,
+    Poptip,
+    Progress,
+    Radio,
+    RadioGroup: Radio.Group,
+    Row,
+    Select,
+    Slider,
+    Spin,
+    Step: Steps.Step,
+    Steps,
+    Switch,
+    Tag,
+    Timeline,
+    TimelineItem: Timeline.Item,
+    Tooltip,
+
+    iButton: Button,
+    iButtonGroup: Button.Group,
+    iCol: Col,
+    iInput: Input,
     iOption: Option,
     iOptionGroup: OptionGroup,
-    Tooltip,
-    Poptip,
-    Slider
+    iSelect: Select
 };
 
-module.exports = iview;
+module.exports = iview;

test/app.vue

@@ -2,8 +2,41 @@
     @import "../src/styles/index.less";
     @import "../src/styles/package.less";
 </style>
+<style scoped>
+nav {
+    margin-bottom: 40px;
+}
+
+li {
+    display: inline-block;
+}
+
+li + li {
+    border-left: solid 1px #bbb;
+    padding-left: 5px;
+    margin-left: 5px;
+}
+
+.v-link-active {
+    color: #bbb;
+}
+</style>
 <template>
     <div>
+        <nav>
+            <ul>
+                <li><a v-link="'/button'">Button</a></li>
+                <li><a v-link="'/card'">Card</a></li>
+                <li><a v-link="'/message'">Message</a></li>
+                <li><a v-link="'/more'">More</a></li>
+                <li><a v-link="'/page'">Page</a></li>
+                <li><a v-link="'/poptip'">Poptip</a></li>
+                <li><a v-link="'/radio'">Radio</a></li>
+                <li><a v-link="'/select'">Select</a></li>
+                <li><a v-link="'/slider'">Slider</a></li>
+                <li><a v-link="'/step'">Step</a></li>
+            </ul>
+        </nav>
         <router-view></router-view>
     </div>
 </template>

test/main.js

@@ -16,19 +16,19 @@ var router = new VueRouter({
 });
 
 router.map({
-    '/index': {
-        component: function (resolve) {
-            require(['./routers/index.vue'], resolve);
-        }
-    },
     '/button': {
         component: function (resolve) {
             require(['./routers/button.vue'], resolve);
         }
     },
-    '/page': {
+    '/card': {
         component: function (resolve) {
-            require(['./routers/page.vue'], resolve);
+            require(['./routers/card.vue'], resolve);
+        }
+    },
+    '/message': {
+        component: function (resolve) {
+            require(['./routers/message.vue'], resolve);
         }
     },
     '/more': {
@@ -36,9 +36,14 @@ router.map({
             require(['./routers/more.vue'], resolve);
         }
     },
-    '/layout': {
+    '/page': {
         component: function (resolve) {
-            require(['./routers/layout.vue'], resolve);
+            require(['./routers/page.vue'], resolve);
+        }
+    },
+    '/poptip': {
+        component: function (resolve) {
+            require(['./routers/poptip.vue'], resolve);
         }
     },
     '/radio': {
@@ -46,25 +51,20 @@ router.map({
             require(['./routers/radio.vue'], resolve);
         }
     },
-    '/msg': {
-        component: function (resolve) {
-            require(['./routers/msg.vue'], resolve);
-        }
-    },
-    '/notice': {
-        component: function (resolve) {
-            require(['./routers/notice.vue'], resolve);
-        }
-    },
-    '/tag': {
-        component: function (resolve) {
-            require(['./routers/tag.vue'], resolve);
-        }
-    },
     '/select': {
         component: function (resolve) {
             require(['./routers/select.vue'], resolve);
         }
+    },
+    '/slider': {
+        component: function (resolve) {
+            require(['./routers/slider.vue'], resolve);
+        }
+    },
+    '/step': {
+        component: function (resolve) {
+            require(['./routers/step.vue'], resolve);
+        }
     }
 });
 
@@ -77,6 +77,6 @@ router.afterEach(function (transition) {
 });
 
 router.redirect({
-    '*': "/index"
+    '*': "/button"
 });
 router.start(App, '#app');

test/routers/card.vue

@@ -0,0 +1,38 @@
+<template>
+    <Card :bordered="true" style="width:300px">
+        <template slot="title">
+            <p>放寒假的发货会计师</p>
+        </template>
+        <a href="#" slot="extra">More</a>
+    </Card>
+    <Card style="width:300px">
+        <p>hello</p>
+        <p>hndshf</p>
+        <h3>jfds</h3>
+    </Card>
+</template>
+<script>
+    import { Row, Col, Card } from 'iview';
+
+    export default {
+        components: {
+            Row,
+            iCol: Col,
+            Card
+        },
+        props: {
+        
+        },
+        data () {
+            return {
+            
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+        
+        }
+    }
+</script>

test/routers/index.vue

@@ -1,58 +0,0 @@
-<style>
-
-</style>
-<template>
-    <Page :total="40" size="small"></Page>
-    <Page :total="40" size="small" show-elevator show-sizer></Page>
-    <Page :total="40" size="small" show-total></Page>
-</template>
-<script>
-    import { Modal, Button, Message, Page } from 'iview';
-
-    export default {
-        components: { Modal, Button, Page },
-        props: {
-        
-        },
-        data () {
-            return {
-
-            }        
-        },
-        methods: {
-            info () {
-                Modal.info({
-                    title: '这是对话框标题',
-                    content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
-                });
-            },
-            success () {
-                Modal.success();
-            },
-            warning () {
-                Modal.warning();
-            },
-            error () {
-                Modal.error();
-            },
-            confirm () {
-                Modal.confirm({
-//                    okText: 'OK',
-//                    cancelText: 'Cancel',
-                    title: '删除提示',
-                    content: '删除后将不可找回，您确定要删除吗？',
-                    onCancel () {
-                        Message.info('cancel it');
-                    },
-                    onOk () {
-                        setTimeout(() => {
-                            Modal.remove();
-                            Message.success('OK!');
-                        }, 2000);
-                    },
-                    loading: true
-                });
-            }
-        }
-    }
-</script>

test/routers/page.vue

@@ -2,95 +2,56 @@
 
 </style>
 <template>
-    <Steps :current="1" size="small">
-        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-    </Steps>
-    <br>
-    <Steps :current="2">
-        <Step title="已完成"></Step>
-        <Step title="进行中"></Step>
-        <Step title="待进行"></Step>
-        <Step title="待进行"></Step>
-    </Steps>
-    <br>
-    <Steps :current="1" size="small">
-        <Step title="已完成"></Step>
-        <Step title="进行中"></Step>
-        <Step title="待进行"></Step>
-        <Step title="待进行"></Step>
-    </Steps>
-    <br>
-    <Steps :current="1" direction="vertical" size="small">
-        <Step title="注册" icon="person-add"></Step>
-        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="验证邮箱" icon="email"></Step>
-    </Steps>
-    <Steps :current="1" direction="vertical">
-        <Step title="注册" icon="person-add"></Step>
-        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="验证邮箱" icon="email"></Step>
-    </Steps>
-    <br>
-    <p>当前正在进行第 {{ current + 1 }} 步</p>
-    <Steps :current="current">
-        <Step title="步骤1"></Step>
-        <Step title="步骤2"></Step>
-        <Step title="步骤3"></Step>
-        <Step title="步骤4"></Step>
-    </Steps>
-    <i-button type="primary" @click="next">下一步</i-button>
-    <br><br>
-    <Steps :current="1" direction="vertical" size="small">
-        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-    </Steps>
-    <br><br>
-    <Steps :current="1" status="error">
-        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-    </Steps>
+    <Page :total="40" size="small"></Page>
+    <Page :total="40" size="small" show-elevator show-sizer></Page>
+    <Page :total="40" size="small" show-total></Page>
 </template>
 <script>
-    import { Page, Steps, Button } from 'iview';
-
-    const Step = Steps.Step;
+    import { Modal, Button, Message, Page } from 'iview';
 
     export default {
-        components: {
-            Page,
-            Steps,
-            Step,
-            iButton: Button
-        },
+        components: { Modal, Button, Page },
         props: {
-
+        
         },
         data () {
             return {
-                total: 512,
-                current: 0
-            }
-        },
-        computed: {
 
+            }        
         },
         methods: {
-            setPage (page) {
-                console.log(page)
+            info () {
+                Modal.info({
+                    title: '这是对话框标题',
+                    content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
+                });
             },
-            next () {
-                if (this.current == 3) {
-                    this.current = 0;
-                } else {
-                    this.current += 1;
-                }
+            success () {
+                Modal.success();
+            },
+            warning () {
+                Modal.warning();
+            },
+            error () {
+                Modal.error();
+            },
+            confirm () {
+                Modal.confirm({
+//                    okText: 'OK',
+//                    cancelText: 'Cancel',
+                    title: '删除提示',
+                    content: '删除后将不可找回，您确定要删除吗？',
+                    onCancel () {
+                        Message.info('cancel it');
+                    },
+                    onOk () {
+                        setTimeout(() => {
+                            Modal.remove();
+                            Message.success('OK!');
+                        }, 2000);
+                    },
+                    loading: true
+                });
             }
         }
     }

test/routers/slider.vue

@@ -1,8 +1,3 @@
-<style>
-    body{
-        padding: 50px;
-    }
-</style>
 <template>
     <Slider :value="10" :tip-format="format">
 

test/routers/step.vue

@@ -0,0 +1,97 @@
+<style>
+
+</style>
+<template>
+    <Steps :current="1" size="small">
+        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
+    </Steps>
+    <br>
+    <Steps :current="2">
+        <Step title="已完成"></Step>
+        <Step title="进行中"></Step>
+        <Step title="待进行"></Step>
+        <Step title="待进行"></Step>
+    </Steps>
+    <br>
+    <Steps :current="1" size="small">
+        <Step title="已完成"></Step>
+        <Step title="进行中"></Step>
+        <Step title="待进行"></Step>
+        <Step title="待进行"></Step>
+    </Steps>
+    <br>
+    <Steps :current="1" direction="vertical" size="small">
+        <Step title="注册" icon="person-add"></Step>
+        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="验证邮箱" icon="email"></Step>
+    </Steps>
+    <Steps :current="1" direction="vertical">
+        <Step title="注册" icon="person-add"></Step>
+        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="验证邮箱" icon="email"></Step>
+    </Steps>
+    <br>
+    <p>当前正在进行第 {{ current + 1 }} 步</p>
+    <Steps :current="current">
+        <Step title="步骤1"></Step>
+        <Step title="步骤2"></Step>
+        <Step title="步骤3"></Step>
+        <Step title="步骤4"></Step>
+    </Steps>
+    <i-button type="primary" @click="next">下一步</i-button>
+    <br><br>
+    <Steps :current="1" direction="vertical" size="small">
+        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
+    </Steps>
+    <br><br>
+    <Steps :current="1" status="error">
+        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
+        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
+    </Steps>
+</template>
+<script>
+    import { Page, Steps, Button } from 'iview';
+
+    const Step = Steps.Step;
+
+    export default {
+        components: {
+            Page,
+            Steps,
+            Step,
+            iButton: Button
+        },
+        props: {
+
+        },
+        data () {
+            return {
+                total: 512,
+                current: 0
+            }
+        },
+        computed: {
+
+        },
+        methods: {
+            setPage (page) {
+                console.log(page)
+            },
+            next () {
+                if (this.current == 3) {
+                    this.current = 0;
+                } else {
+                    this.current += 1;
+                }
+            }
+        }
+    }
+</script>