add Collapse component

add Collapse component

components/collapse/collapse.vue

@@ -0,0 +1,98 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-collapse';
+
+    export default {
+        props: {
+            accordion: {
+                type: Boolean,
+                default: false
+            },
+            activeKey: {
+                type: [Array, String]
+            }
+        },
+        computed: {
+            classes () {
+                return `${prefixCls}`;
+            }
+        },
+        compiled () {
+            this.setActive();
+        },
+        methods: {
+            setActive () {
+                const activeKey = this.getActiveKey();
+
+                this.$children.forEach((child, index) => {
+                    const key = child.key || index.toString();
+                    let isActive = false;
+
+                    if (self.accordion) {
+                        isActive = activeKey === key;
+                    } else {
+                        isActive = activeKey.indexOf(key) > -1;
+                    }
+
+                    child.isActive = isActive;
+                    child.index = index;
+                })
+            },
+            getActiveKey () {
+                let activeKey = this.activeKey || [];
+                const accordion = this.accordion;
+
+                if (!Array.isArray(activeKey)) {
+                    activeKey = [activeKey];
+                }
+
+                if (accordion && activeKey.length > 1) {
+                    activeKey = [activeKey[0]];
+                }
+
+                for (let i = 0; i < activeKey.length; i++) {
+                    activeKey[i] = activeKey[i].toString();
+                }
+
+                return activeKey;
+            },
+            toggle (data) {
+                const key = data.key.toString();
+                let newActiveKey = [];
+
+                if (this.accordion) {
+                    if (!data.isActive) {
+                        newActiveKey.push(key);
+                    }
+                } else {
+                    let activeKey = this.getActiveKey();
+                    const keyIndex = activeKey.indexOf(key);
+
+                    if (data.isActive) {
+                        if (keyIndex > -1) {
+                            activeKey.splice(keyIndex, 1);
+                        }
+                    } else {
+                        if (keyIndex < 0) {
+                            activeKey.push(key);
+                        }
+                    }
+
+                    newActiveKey = activeKey;
+                }
+
+                this.activeKey = newActiveKey;
+                this.$emit('on-change', newActiveKey);
+            }
+        },
+        watch: {
+            activeKey () {
+                this.setActive();
+            }
+        }
+    }
+</script>

components/collapse/index.js

@@ -0,0 +1,5 @@
+import Collapse from './collapse.vue';
+import Panel from './panel.vue';
+
+Collapse.Panel = Panel;
+export default Collapse;

components/collapse/panel.vue

@@ -0,0 +1,57 @@
+<template>
+    <div :class="itemClasses">
+        <div :class="headerClasses" @click="toggle">
+            <Icon type="arrow-right-b"></Icon>
+            <slot></slot>
+        </div>
+        <div :class="concentClasses" v-show="isActive" transition="height">
+            <div :class="boxClasses"><slot name="content"></slot></div>
+        </div>
+    </div>
+</template>
+<script>
+    import Icon from '../icon';
+    const prefixCls = 'ivu-collapse';
+
+    export default {
+        components: { Icon },
+        props: {
+            key: {
+                type: String
+            }
+        },
+        data () {
+            return {
+                index: 0, // use index for default when key is null
+                isActive: false
+            }
+        },
+        computed: {
+            itemClasses () {
+                return [
+                    `${prefixCls}-item`,
+                    {
+                        [`${prefixCls}-item-active`]: this.isActive
+                    }
+                ]
+            },
+            headerClasses () {
+                return `${prefixCls}-header`;
+            },
+            concentClasses () {
+                return `${prefixCls}-content`;
+            },
+            boxClasses () {
+                return `${prefixCls}-content-box`;
+            }
+        },
+        methods: {
+            toggle () {
+                this.$parent.toggle({
+                    key: this.key || this.index,
+                    isActive: this.isActive
+                });
+            }
+        }
+    }
+</script>

index.js

@@ -18,6 +18,7 @@ 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';
 
 const iview = {
     Button,
@@ -40,7 +41,8 @@ const iview = {
     Spin,
     Steps,
     Breadcrumb,
-    Alert
+    Alert,
+    Collapse
 };
 
 module.exports = iview;

local/routers/radio.vue

@@ -1,37 +1,50 @@
 <template>
     <div>
-        <Alert show-icon>
+        <Collapse active-key="2">
-            成功的提示
+            <Panel key="1">
-        </Alert>
+                Header1
-        <Alert closable show-icon>
+                <Collapse active-key="2" slot="content">
-            成功的提示
+                    <Panel key="1">
-            <span slot="desc">这里是成功的内容</span>
+                        inHeader1
-        </Alert>
+                        <p slot="content">inContent1</p>
-        <Alert type="warning" closable show-icon>
+                    </Panel>
-            成功的提示
+                    <Panel key="2">
-            <span slot="desc">这里是成功的内容</span>
+                        inHeader2
-        </Alert>
+                        <p slot="content">inContent2</p>
-        <Alert type="success" closable show-icon>
+                    </Panel>
-            成功的提示
+                    <Panel key="3">
-            <span slot="desc">这里是成功的内容</span>
+                        inHeader3
-        </Alert>
+                        <p slot="content">inContent3</p>
-        <Alert type="error" closable show-icon @on-close="closed">
+                    </Panel>
-            成功的提示
+                </Collapse>
-            <span slot="desc">这里是成功的内容</span>
+            </Panel>
-        </Alert>
+            <Panel key="2">
+                Header2
+                <p slot="content">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
+            </Panel>
+            <Panel key="3">
+                Header3
+                <p slot="content">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
+            </Panel>
+        </Collapse>
+        <Button @click="activeKey = '2'">换</Button>
     </div>
 </template>
 <script>
-    import { Radio, Alert, Icon } from 'iview';
+    import { Radio, Alert, Icon, Collapse, Button } from 'iview';
 
     const RadioGroup = Radio.Group;
+    const Panel = Collapse.Panel;
 
     export default {
         components: {
             Radio,
             RadioGroup,
             Alert,
-            Icon
+            Icon,
+            Collapse,
+            Panel,
+            Button
         },
         props: {
         
@@ -39,7 +52,8 @@
         data () {
             return {
                 radio: true,
-                radioGroup: '段模'
+                radioGroup: '段模',
+                activeKey: [1,2]
             }
         },
         computed: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "title": "iView",
   "description": "An UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

styles/common/transition.less

@@ -5,4 +5,12 @@
 }
 .fade-enter, .fade-leave {
     opacity: 0;
+}
+
+.height-transition{
+    .transition(all @transition-time @ease-in-out);
+}
+
+.height-enter, .height-leave {
+    height: 0;
 }

styles/components/collapse.less

@@ -0,0 +1,51 @@
+@collapse-prefix-cls: ~"@{css-prefix}collapse";
+
+.@{collapse-prefix-cls}{
+    background-color: @background-color-base;
+    border-radius: 3px;
+    border: 1px solid @border-color-base;
+
+    & > &-item{
+        border-top: 1px solid @border-color-base;
+        &:first-child {
+            border-top: 0;
+        }
+
+        > .@{collapse-prefix-cls}-header{
+            height: 38px;
+            line-height: 38px;
+            padding-left: 32px;
+            color: #666;
+            cursor: pointer;
+            position: relative;
+
+            > i{
+                .transition(transform @transition-time @ease-in-out);
+            }
+        }
+    }
+    &  > &-item&-item-active > &-header > i{
+        .transform(rotate(90deg));
+    }
+
+    &-content{
+        //display: none;
+        overflow: hidden;
+        color: @text-color;
+        padding: 0 16px;
+        background-color: #fff;
+
+        & > &-box {
+            padding-top: 16px;
+            padding-bottom: 16px;
+        }
+    }
+    &-item-active > &-content{
+        //display: block;
+    }
+    &-item:last-child {
+        > .@{collapse-prefix-cls}-content {
+            border-radius: 0 0 3px 3px;
+        }
+    }
+}

styles/components/index.less

@@ -4,4 +4,5 @@
 @import "badge";
 @import "circle";
 @import "spin";
-@import "alert";
+@import "alert";
+@import "collapse";

styles/themes/default/custom.less

@@ -14,6 +14,11 @@
 // Base
 @body-background        : #fff;
 
+// Border color
+@border-color-base      : #d9d9d9;  // base
+// Background color
+@background-color-base  : #f7f7f7;  // base
+
 @font-family            : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
 @code-family            : Consolas,Menlo,Courier,monospace;
 @text-color             : #525558;