first

packages/collapse/index.js

@@ -0,0 +1,9 @@
+import ElCollapse from './src/collapse';
+
+/* istanbul ignore next */
+ElCollapse.install = function(Vue) {
+  Vue.component(ElCollapse.name, ElCollapse);
+};
+
+export default ElCollapse;
+

packages/collapse/src/collapse-item.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="el-collapse-item"
+    :class="{'is-active': isActive, 'is-disabled': disabled }">
+    <div
+      role="tab"
+      :aria-expanded="isActive"
+      :aria-controls="`el-collapse-content-${id}`"
+      :aria-describedby ="`el-collapse-content-${id}`"
+    >
+      <div
+        class="el-collapse-item__header"
+        @click="handleHeaderClick"
+        role="button"
+        :id="`el-collapse-head-${id}`"
+        :tabindex="disabled ? undefined : 0"
+        @keyup.space.enter.stop="handleEnterClick"
+        :class="{
+          'focusing': focusing,
+          'is-active': isActive
+        }"
+        @focus="handleFocus"
+        @blur="focusing = false"
+      >
+        <slot name="title">{{title}}</slot>
+        <i
+          class="el-collapse-item__arrow el-icon-arrow-right"
+          :class="{'is-active': isActive}">
+        </i>
+      </div>
+    </div>
+    <el-collapse-transition>
+      <div
+        class="el-collapse-item__wrap"
+        v-show="isActive"
+        role="tabpanel"
+        :aria-hidden="!isActive"
+        :aria-labelledby="`el-collapse-head-${id}`"
+        :id="`el-collapse-content-${id}`"
+      >
+        <div class="el-collapse-item__content">
+          <slot></slot>
+        </div>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+<script>
+  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
+  import Emitter from 'element-ui/src/mixins/emitter';
+  import { generateId } from 'element-ui/src/utils/util';
+
+  export default {
+    name: 'ElCollapseItem',
+
+    componentName: 'ElCollapseItem',
+
+    mixins: [Emitter],
+
+    components: { ElCollapseTransition },
+
+    data() {
+      return {
+        contentWrapStyle: {
+          height: 'auto',
+          display: 'block'
+        },
+        contentHeight: 0,
+        focusing: false,
+        isClick: false,
+        id: generateId()
+      };
+    },
+
+    inject: ['collapse'],
+
+    props: {
+      title: String,
+      name: {
+        type: [String, Number],
+        default() {
+          return this._uid;
+        }
+      },
+      disabled: Boolean
+    },
+
+    computed: {
+      isActive() {
+        return this.collapse.activeNames.indexOf(this.name) > -1;
+      }
+    },
+
+    methods: {
+      handleFocus() {
+        setTimeout(() => {
+          if (!this.isClick) {
+            this.focusing = true;
+          } else {
+            this.isClick = false;
+          }
+        }, 50);
+      },
+      handleHeaderClick() {
+        if (this.disabled) return;
+        this.dispatch('ElCollapse', 'item-click', this);
+        this.focusing = false;
+        this.isClick = true;
+      },
+      handleEnterClick() {
+        this.dispatch('ElCollapse', 'item-click', this);
+      }
+    }
+  };
+</script>

packages/collapse/src/collapse.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="el-collapse" role="tablist" aria-multiselectable="true">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElCollapse',
+
+    componentName: 'ElCollapse',
+
+    props: {
+      accordion: Boolean,
+      value: {
+        type: [Array, String, Number],
+        default() {
+          return [];
+        }
+      }
+    },
+
+    data() {
+      return {
+        activeNames: [].concat(this.value)
+      };
+    },
+
+    provide() {
+      return {
+        collapse: this
+      };
+    },
+
+    watch: {
+      value(value) {
+        this.activeNames = [].concat(value);
+      }
+    },
+
+    methods: {
+      setActiveNames(activeNames) {
+        activeNames = [].concat(activeNames);
+        let value = this.accordion ? activeNames[0] : activeNames;
+        this.activeNames = activeNames;
+        this.$emit('input', value);
+        this.$emit('change', value);
+      },
+      handleItemClick(item) {
+        if (this.accordion) {
+          this.setActiveNames(
+            (this.activeNames[0] || this.activeNames[0] === 0) &&
+            this.activeNames[0] === item.name
+              ? '' : item.name
+          );
+        } else {
+          let activeNames = this.activeNames.slice(0);
+          let index = activeNames.indexOf(item.name);
+
+          if (index > -1) {
+            activeNames.splice(index, 1);
+          } else {
+            activeNames.push(item.name);
+          }
+          this.setActiveNames(activeNames);
+        }
+      }
+    },
+
+    created() {
+      this.$on('item-click', this.handleItemClick);
+    }
+  };
+</script>