Merge pull request #34 from iview/2.0

update

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-present iView
+Copyright (c) 2016-present TalkingData
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -20,39 +20,6 @@ iView
 [![Sponers on Open Collective](https://opencollective.com/iview/tiers/sponsor/badge.svg?label=sponsor&color=brightgreen)](#sponers)
 
 
-<h2 align="center">Special Sponsors</h2>
-<table>
-      <tbody>
-        <tr>
-          <td align="center" valign="middle">
-            <a href="https://segmentfault.com/ls/1650000016424063" target="_blank">
-              <img width="300" src="https://file.iviewui.com/asd/asd-i-2.png">
-            </a>
-          </td>
-          <td align="center" valign="middle">
-            <a href="https://e.coding.net/?utm_source=iview" target="_blank">
-              <img width="300" src="https://file.iviewui.com/asd/asd-coding5.png">
-            </a>
-          </td>
-            <td align="center" valign="middle">
-            <a href="https://cn.udacity.com/fend/?utm_source=iviewui&utm_medium=banner&utm_campaign=fend" target="_blank">
-              <img width="300" src="https://file.iviewui.com/asd/asd-u-new-2.png">
-            </a>
-          </td>
-        </tr>
-        <tr>
-            </td>
-            <td align="center" valign="middle">
-            <a href="https://uniapp.dcloud.io/?hmsr=iview&hmpl=&hmcu=&hmkw=&hmci=" target="_blank">
-              <img width="300" src="https://file.iviewui.com/asd/asd-uniapp2.png">
-            </a>
-          </td>
-        </tr>
-      </tbody>
-</table>
-
-> If you'd like be a sponsor, to show your ads in GitHub and iView doc, please email admin@aresn.com to get more infomation.
-
 ## Docs
 
 **[3.x](https://www.iviewui.com)** | [2.x](http://v2.iviewui.com) | [1.x](http://v1.iviewui.com)
@@ -142,7 +109,7 @@ If you want to contribute or have questions or bugs to report:
 
 **Questions:** Find other users at the [Gitter chat](https://gitter.im/iview/iview) or post on [StackOverflow using `[iview-ui]` tag](https://stackoverflow.com/questions/tagged/iview-ui)  
 **Bugs:** [File a issue here](https://github.com/iview/iview/issues) - please provide a example so we can help you better  
-**Contribute:** Contact us in [Gitter chat](https://gitter.im/iview/iview), WeChat or via mail to `admin@aresn.com`. PRs welcome!
+**Contribute:** Contact us in [Gitter chat](https://gitter.im/iview/iview), WeChat or via mail to `iview@tendcloud.com`. PRs welcome!
 
 ## Major Contributors
 |Name|Avatar|Name|Avatar|Name|Avatar|
@@ -172,4 +139,4 @@ If you want to contribute or have questions or bugs to report:
 ## License
 [MIT](http://opensource.org/licenses/MIT)
 
-Copyright (c) 2016-present, iView
+Copyright (c) 2016-present, TalkingData

examples/app.vue

@@ -69,6 +69,7 @@ nav {
                 <li><router-link to="/cell">Cell</router-link></li>
                 <li><router-link to="/drawer">Drawer</router-link></li>
                 <li><router-link to="/icon">Icon</router-link></li>
+                <li><router-link to="/list">List</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/main.js

@@ -233,6 +233,10 @@ const router = new VueRouter({
         {
             path: '/icon',
             component: (resolve) => require(['./routers/icon.vue'], resolve)
+        },
+        {
+            path: '/list',
+            component: (resolve) => require(['./routers/list.vue'], resolve)
         }
     ]
 });

examples/routers/list.vue

@@ -0,0 +1,120 @@
+<template>
+    <div>
+        <h2>small size</h2>
+        <List header="Header" footer="Footer" size="small" :split="false">
+            <ListItem v-for="item in data1" :key="item">
+                {{ item }}
+            </ListItem>
+        </List>
+        <h2>default size</h2>
+        <List header="Header" footer="Footer">
+            <ListItem v-for="item in data1" :key="item">
+                {{ item }}
+            </ListItem>
+        </List>
+        <h2>large size</h2>
+        <List header="Header" footer="Footer" border size="large">
+            <ListItem v-for="item in data1" :key="item">
+                {{ item }}
+            </ListItem>
+        </List>
+
+        <Divider>没有 </Divider>
+
+        <List>
+            <ListItem v-for="item in data2" :key="item.title">
+                <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">
+                </ListItemMeta>
+                一段内容
+            </ListItem>
+        </List>
+
+        <Divider>带有 Action</Divider>
+
+        <List>
+            <ListItem v-for="item in data2" :key="item.title">
+                <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">
+
+                </ListItemMeta>
+                一段内容
+                <template slot="action">
+                    <li>
+                        <a href="">edit</a>
+<!--                        <Button typr="primary">编辑</Button>-->
+                    </li>
+                    <li>
+                        <a href="">more</a>
+<!--                        <Button>删除</Button>-->
+                    </li>
+                </template>
+            </ListItem>
+        </List>
+
+        <Divider>带图片</Divider>
+        <List item-layout="vertical">
+            <ListItem v-for="item in data2" :key="item.title">
+                <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">
+
+                </ListItemMeta>
+                We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
+                <template slot="action">
+                    <li>
+                        <Icon type="ios-star-outline" /> 156
+                    </li>
+                    <li>
+                        <Icon type="ios-thumbs-up-outline" /> 156
+                    </li>
+                    <li>
+                        <Icon type="ios-chatbubbles-outline" /> 10
+                    </li>
+                </template>
+                <template slot="extra">
+                    <img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
+                </template>
+            </ListItem>
+        </List>
+
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                data1: [
+                    'Racing car sprays burning fuel into crowd.',
+                    'Japanese princess to wed commoner.',
+                    'Australian walks 100km after outback crash.',
+                    'Man charged over missing wedding girl.',
+                    'Los Angeles battles huge wildfires.',
+                ],
+                data2: [
+                    {
+                        title: 'This is a title 1',
+                        description: 'This is the description, This is the description, This is the description.',
+                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
+                    },
+                    {
+                        title: 'This is a title 2',
+                        description: 'This is the description, This is the description, This is the description.',
+                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
+                    },
+                    {
+                        title: 'This is a title 3',
+                        description: 'This is the description, This is the description, This is the description.',
+                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
+                    },
+                    {
+                        title: 'This is a title 4',
+                        description: 'This is the description, This is the description, This is the description.',
+                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
+                    },
+                    {
+                        title: 'This is a title 5',
+                        description: 'This is the description, This is the description, This is the description.',
+                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
+                    }
+                ]
+            };
+        }
+    };
+</script>

examples/routers/slider.vue

@@ -49,7 +49,7 @@
         </FormItem>
         <FormItem>
             <Button type="primary">Submit</Button>
-            <Button type="ghost" style="margin-left: 8px">Cancel</Button>
+            <Button type="default" ghost style="margin-left: 8px">Cancel</Button>
         </FormItem>
     </Form>
 </template>

src/components/list/index.js

@@ -0,0 +1,8 @@
+import List from './list.vue';
+import ListItem from './list-item.vue';
+import ListItemMeta from './list-item-meta.vue';
+
+List.Item = ListItem;
+List.Item.Meta = ListItemMeta;
+
+export default List;

src/components/list/list-item-meta.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="ivu-list-item-meta">
+        <div class="ivu-list-item-meta-avatar" v-if="avatar || $slots.avatar">
+            <slot name="avatar">
+                <Avatar :src="avatar" />
+            </slot>
+        </div>
+        <div class="ivu-list-item-meta-content">
+            <div v-if="title || $slots.title" class="ivu-list-item-meta-title"><slot name="title">{{ title }}</slot></div>
+            <div v-if="description || $slots.description" class="ivu-list-item-meta-description"><slot name="description">{{ description }}</slot></div>
+        </div>
+    </div>
+</template>
+<script>
+    import Avatar from '../../components/avatar/avatar.vue';
+
+    export default {
+        name: 'ListItemMeta',
+        components: { Avatar },
+        props: {
+            avatar: {
+                type: String,
+                default: ''
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            description: {
+                type: String,
+                default: ''
+            }
+        }
+    };
+</script>

src/components/list/list-item.vue

@@ -0,0 +1,63 @@
+<template>
+    <li class="ivu-list-item" :class="classes">
+        <template v-if="itemLayout === 'vertical' && $slots.extra">
+            <div class="ivu-list-item-main">
+                <slot></slot>
+                <ul class="ivu-list-item-action" v-if="$slots.action">
+                    <slot name="action"></slot>
+                </ul>
+            </div>
+            <div class="ivu-list-item-extra">
+                <slot name="extra"></slot>
+            </div>
+        </template>
+        <template v-else>
+            <slot></slot>
+            <ul class="ivu-list-item-action" v-if="$slots.action">
+                <slot name="action"></slot>
+            </ul>
+            <div class="ivu-list-item-extra">
+                <slot name="extra"></slot>
+            </div>
+        </template>
+    </li>
+</template>
+<script>
+    export default {
+        name: 'ListItem',
+        inject: ['ListInstance'],
+        props: {
+
+        },
+        computed: {
+            itemLayout () {
+                return this.ListInstance.itemLayout;
+            },
+            isItemContainsTextNode () {
+                let result;
+                this.$slots.default.forEach(item => {
+                    if (typeof item === 'string') {
+                        result = true;
+                    }
+                });
+                return result;
+            },
+            isFlexMode () {
+                const extra = this.$slots.extra;
+
+                if (this.itemLayout === 'vertical') {
+                    return !!extra;
+                }
+
+                return !this.isItemContainsTextNode;
+            },
+            classes () {
+                return [
+                    {
+                        'ivu-list-item-no-flex': !this.isFlexMode
+                    }
+                ];
+            }
+        }
+    };
+</script>

src/components/list/list.vue

@@ -0,0 +1,84 @@
+<template>
+    <div :class="classes">
+        <div class="ivu-list-header" v-if="header || $slots.header"><slot name="header">{{ header }}</slot></div>
+        <div class="ivu-list-container">
+            <ul class="ivu-list-items"><slot></slot></ul>
+        </div>
+        <Spin v-if="loading" fix size="large"><slot name="spin"></slot></Spin>
+        <div class="ivu-list-footer" v-if="footer || $slots.footer"><slot name="footer">{{ footer }}</slot></div>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-list';
+
+    export default {
+        name: 'List',
+        provide () {
+            return {
+                ListInstance: this
+            };
+        },
+        props: {
+            border: {
+                type: Boolean,
+                default: false
+            },
+            itemLayout: {
+                validator (value) {
+                    return oneOf(value, ['horizontal', 'vertical']);
+                },
+                default: 'horizontal'
+            },
+            // 或 slot
+            header: {
+                type: String,
+                default: ''
+            },
+            // 或 slot
+            footer: {
+                type: String,
+                default: ''
+            },
+            // 含 slot: spin
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return !this.$IVIEW || this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
+                }
+            },
+            split: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data () {
+            return {
+
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.size}`,
+                    `${prefixCls}-${this.itemLayout}`,
+                    {
+                        [`${prefixCls}-bordered`]: this.border,
+                        [`${prefixCls}-split`]: this.split
+                    }
+                ];
+            },
+        },
+        methods: {
+
+        }
+    };
+</script>

src/components/modal/confirm.js

@@ -23,7 +23,8 @@ Modal.newInstance = properties => {
             loading: false,
             buttonLoading: false,
             scrollable: false,
-            closable: false
+            closable: false,
+            closing: false // 关闭有动画，期间使用此属性避免重复点击
         }),
         render (h) {
             let footerVNodes = [];
@@ -158,12 +159,14 @@ Modal.newInstance = properties => {
         },
         methods: {
             cancel () {
+                if (this.closing) return;
                 this.$children[0].visible = false;
                 this.buttonLoading = false;
                 this.onCancel();
                 this.remove();
             },
             ok () {
+                if (this.closing) return;
                 if (this.loading) {
                     this.buttonLoading = true;
                 } else {
@@ -173,7 +176,9 @@ Modal.newInstance = properties => {
                 this.onOk();
             },
             remove () {
+                this.closing = true;
                 setTimeout(() => {
+                    this.closing = false;
                     this.destroy();
                 }, 300);
             },
@@ -270,4 +275,4 @@ Modal.newInstance = properties => {
     };
 };
 
-export default Modal;
+export default Modal;

src/index.js

@@ -30,6 +30,7 @@ import InputNumber from './components/input-number';
 import Scroll from './components/scroll';
 import Split from './components/split';
 import Layout from './components/layout';
+import List from './components/list';
 import LoadingBar from './components/loading-bar';
 import Menu from './components/menu';
 import Message from './components/message';
@@ -102,6 +103,9 @@ const components = {
     Split,
     Submenu: Menu.Sub,
     Layout: Layout,
+    List,
+    ListItem: List.Item,
+    ListItemMeta: List.Item.Meta,
     LoadingBar,
     Menu,
     MenuGroup: Menu.Group,

src/styles/components/index.less

@@ -50,4 +50,5 @@
 @import "time";
 @import "cell";
 @import "drawer";
-@import "breadcrumb";
+@import "breadcrumb";
+@import "list";

src/styles/components/list.less

@@ -0,0 +1,267 @@
+@list-prefix-cls: ~"@{css-prefix}list";
+
+.@{list-prefix-cls} {
+    position: relative;
+
+    &-items {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    &-item{
+        display: flex;
+        align-items: center;
+        padding: @list-item-padding;
+
+        &-content {
+            color: @text-color;
+        }
+
+        &-meta{
+            display: flex;
+            flex: 1;
+            align-items: flex-start;
+            font-size: 0;
+
+            &-avatar {
+                margin-right: @list-item-meta-avatar-margin-right;
+            }
+            &-content {
+                flex: 1 0;
+            }
+            &-title {
+                font-weight: bold;
+                margin-bottom: 4px;
+                color: @text-color;
+                font-size: @font-size-base;
+                line-height: 22px;
+                > a {
+                    color: @text-color;
+                    transition: all @transition-time;
+                    &:hover {
+                        color: @primary-color;
+                    }
+                }
+            }
+            &-description {
+                color: @text-color-secondary;
+                font-size: @font-size-base;
+                line-height: 22px;
+            }
+        }
+
+        &-action {
+            flex: 0 0 auto;
+            margin-left: 48px;
+            padding: 0;
+            font-size: 0;
+            list-style: none;
+            & > li {
+                position: relative;
+                display: inline-block;
+                padding: 0 8px;
+                color: @text-color-secondary;
+                font-size: @font-size-base;
+                line-height: 22px;
+                text-align: center;
+                cursor: pointer;
+
+                &:after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    width: 1px;
+                    height: 14px;
+                    margin-top: -7px;
+                    background-color: @border-color-split;
+                }
+            }
+            & > li:first-child {
+                padding-left: 0;
+            }
+            & > li:last-child {
+                &:after{
+                    display: none;
+                }
+            }
+            &-split {
+
+            }
+        }
+    }
+
+    &-header {
+        background: @list-header-background;
+    }
+
+    &-footer {
+        background: @list-footer-background;
+    }
+
+    &-header,
+    &-footer {
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+
+    &-split &-item {
+        border-bottom: 1px solid @border-color-split;
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    &-split &-header {
+        border-bottom: 1px solid @border-color-split;
+    }
+    &-split &-footer{
+        border-top: 1px solid @border-color-split;
+    }
+
+    &-large &-item {
+        padding-top: 16px;
+        padding-bottom: 16px;
+    }
+
+    &-small &-item {
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
+
+    &-vertical &-item {
+        align-items: initial;
+
+        &-main {
+            display: block;
+            flex: 1;
+        }
+
+        &-extra {
+            margin-left: 40px;
+        }
+
+        &-meta {
+            margin-bottom: @list-item-meta-margin-bottom;
+
+            &-title {
+                margin-bottom: @list-item-meta-title-margin-bottom;
+                color: @heading-color;
+                font-size: @font-size-large;
+                line-height: 24px;
+            }
+        }
+
+        &-action {
+            margin-top: @padding-md;
+            margin-left: auto;
+
+            > li {
+                padding: 0 16px;
+                &:first-child {
+                    padding-left: 0;
+                }
+            }
+        }
+    }
+
+    // without flex
+    &-item-no-flex {
+        display: block;
+    }
+
+    // Horizontal
+    &:not(.@{list-prefix-cls}-vertical) {
+        .@{list-prefix-cls}-item-no-flex {
+            .@{list-prefix-cls}-item-action {
+                float: right;
+            }
+        }
+    }
+}
+
+.@{list-prefix-cls}-bordered {
+    border: 1px solid @border-color-base;
+    border-radius: @border-radius-base;
+    .@{list-prefix-cls}-header {
+        padding-right: 24px;
+        padding-left: 24px;
+    }
+
+    .@{list-prefix-cls}-footer {
+        padding-right: 24px;
+        padding-left: 24px;
+    }
+
+    .@{list-prefix-cls}-item {
+        padding-right: 24px;
+        padding-left: 24px;
+        border-bottom: 1px solid @border-color-split;
+    }
+
+    .@{list-prefix-cls}-pagination {
+        margin: 16px 24px;
+    }
+
+    &.@{list-prefix-cls}-small {
+        .@{list-prefix-cls}-item {
+            padding-right: 16px;
+            padding-left: 16px;
+        }
+        .@{list-prefix-cls}-header,
+        .@{list-prefix-cls}-footer {
+            padding: 8px 16px;
+        }
+    }
+
+    &.@{list-prefix-cls}-large {
+        .@{list-prefix-cls}-header,
+        .@{list-prefix-cls}-footer {
+            padding: 16px 24px;
+        }
+    }
+}
+
+// responsive
+
+@media screen and (max-width: @screen-md) {
+    .@{list-prefix-cls} {
+        &-item {
+            &-action {
+                margin-left: 24px;
+            }
+        }
+    }
+
+    .@{list-prefix-cls}-vertical {
+        .@{list-prefix-cls}-item {
+            &-extra {
+                margin-left: 24px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: @screen-sm) {
+    .@{list-prefix-cls} {
+        &-item {
+            flex-wrap: wrap;
+            &-action {
+                margin-left: 12px;
+            }
+        }
+    }
+
+    .@{list-prefix-cls}-vertical {
+        .@{list-prefix-cls}-item {
+            flex-wrap: wrap-reverse;
+            &-main {
+                min-width: 220px;
+            }
+            &-extra {
+                margin: auto auto 16px;
+            }
+        }
+    }
+}

src/styles/custom.less

@@ -19,6 +19,8 @@
 @tooltip-color          : #fff;
 @subsidiary-color       : #808695;
 @rate-star-color        : #f5a623;
+@white: #fff;
+@black: #000;
 
 // Base
 @body-background        : #fff;
@@ -27,6 +29,9 @@
 @code-family            : Consolas,Menlo,Courier,monospace;
 @title-color            : #17233d;
 @text-color             : #515a6e;
+@text-color-secondary: fade(@black, 45%);
+@heading-color: fade(#000, 85%);
+@heading-color-dark: fade(@white, 100%);
 @font-size-base         : 14px;
 @font-size-small        : 12px;
 @font-size-large        : 16px;
@@ -36,6 +41,12 @@
 @border-radius-small    : 4px;
 @cursor-disabled        : not-allowed;
 
+// vertical paddings
+@padding-lg: 24px; // containers
+@padding-md: 16px; // small containers and buttons
+@padding-sm: 12px; // Form controls and items
+@padding-xs: 8px; // small items
+
 // Border color
 @border-color-base      : #dcdee2;  // outside
 @border-color-split     : #e8eaec;  // inside
@@ -211,3 +222,13 @@
 
 // Anchor
 @anchor-border-width: 2px;
+
+// List
+// ---
+@list-header-background: transparent;
+@list-footer-background: transparent;
+@list-empty-text-padding: @padding-md;
+@list-item-padding: @padding-sm 0;
+@list-item-meta-margin-bottom: @padding-md;
+@list-item-meta-avatar-margin-right: @padding-md;
+@list-item-meta-title-margin-bottom: @padding-sm;