From c0a4ff12459d0f51781737adb42d4d5d26699de7 Mon Sep 17 00:00:00 2001
From: mitch <mitch@xmission.com>
Date: Wed, 26 Oct 2016 14:44:35 -0600
Subject: [PATCH] Add the collapse option to Panel component. Closes issue #21

---
 docs/example/accordionDocs.vue |  6 ++++++
 src/Panel.vue                  | 17 +++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/example/accordionDocs.vue b/docs/example/accordionDocs.vue
index 99b8d0d0..d4671193 100644
--- a/docs/example/accordionDocs.vue
+++ b/docs/example/accordionDocs.vue
@@ -90,6 +90,12 @@
         <p><code>null</code></p>
         <p>Define the type of color for the tab (single).</p>
       </div>
+      <div>
+        <p>collapse</p>
+        <p><code>Boolean</code></p>
+        <p><code>null</code></p>
+        <p>Define whether this panel can be collapsed. This will default to true if in an accordion.</p>
+      </div>
     </doc-table>
     <p>If you want to personalice your header with some html you can use the slot instead of header attribute (panel&nbsp;#1 in the example).</p>
   </doc-section>
diff --git a/src/Panel.vue b/src/Panel.vue
index 548bdc18..5338304c 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel {{panelType}}">
-    <div :class="['panel-heading',{'accordion-toggle':inAccordion}]" @click.prevent="inAccordion&&toggle()">
+    <div :class="['panel-heading',{'toggle-collapse':collapse}]" @click.prevent="collapse&&toggle()">
       <slot name="header">
         <h4 class="panel-title">{{ header }}</h4>
       </slot>
@@ -32,12 +32,17 @@ export default {
     },
     type: {
       type: String,
-      default : null
+      default: null
+    },
+    collapse: {
+      type: Boolean,
+      coerce: coerce.boolean,
+      default: null
     }
   },
   computed: {
     inAccordion () {
-      return this.$parent && this.$parent._isAccordion
+      return this.$parent != null && this.$parent._isAccordion === true
     },
     panelType () {
       return 'panel-' + (this.type || (this.$parent && this.$parent.type) || 'default')
@@ -64,6 +69,10 @@ export default {
     }
   },
   created () {
+    // Set as collapsible if in accordion by default
+    if (this.collapse === null) {
+      this.collapse = this.inAccordion
+    }
     if (this.isOpen === null) {
       this.isOpen = !this.inAccordion
     }
@@ -72,7 +81,7 @@ export default {
 </script>
 
 <style>
-.accordion-toggle {
+.toggle-collapse {
   cursor: pointer;
 }
 .collapse-transition {