From c4764394c8db7ce4d489ea3e80124654f642aec6 Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Mon, 23 Jul 2018 16:10:59 +0800
Subject: [PATCH 1/3] Panel: Refactor logic for inserting caret inside custom
 header

---
 src/Panel.vue | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index 43aa2cf81..fac33e7ce 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -216,19 +216,10 @@
           // if the header content is wrapped by a <p> or any <h1>, <h2>, ...
           // then it must be inserted inside these HTML tags, otherwise the
           // header content will not be in the same line as caret
-          const tags = [
-            ['<p>', '</p>'],
-            ['<h1>', '</h1>'],
-            ['<h2>', '</h2>'],
-            ['<h3>', '</h3>'],
-            ['<h4>', '</h4>'],
-            ['<h5>', '</h5>'],
-            ['<h6>', '</h6>']];
-
-          tags.forEach(header => {
-            if (!caretAdded && htmlRenderedHeader.startsWith(header[0]))  {
-              htmlRenderedHeader = jQuery(htmlRenderedHeader).unwrap().prepend(this.caretHtml + ' ')
-                .wrap(header[0] + header[1]).parent().html();
+          const tags = ['<p>', '<h1>', '<h2>', '<h3>', '<h4>', '<h5>', '<h6>'];
+          tags.forEach(tag => {
+            if (!caretAdded && htmlRenderedHeader.startsWith(tag))  {
+              htmlRenderedHeader = this.insertCaretInsideHeader(htmlRenderedHeader);
               caretAdded = true;
             }
           });
@@ -301,6 +292,11 @@
         if (isOpen && this.hasSrc) {
           this.$refs.retriever.fetch()
         }
+      },
+      insertCaretInsideHeader(originalHeaderHTML) {
+        const wrappedElementName = jQuery(originalHeaderHTML).attr("name");
+        return jQuery(originalHeaderHTML).unwrap().prepend(this.caretHtml + ' ')
+            .wrap(`<${wrappedElementName}></${wrappedElementName}>`).parent().html();
       }
     },
     watch: {

From 9a908c6e46f521ec45b185e4604e3ff9c8d7d6a0 Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Mon, 23 Jul 2018 15:41:16 +0800
Subject: [PATCH 2/3] Panel: Add caret insertion logic for custom header slots

---
 src/Panel.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index fac33e7ce..7588b0e36 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -16,8 +16,7 @@
             <div :class="['card-header',{'header-toggle':isExpandableCard}, cardType, borderType]"
                  @click.prevent.stop="isExpandableCard && toggle()"
                  @mouseover="onHeaderHover = true" @mouseleave="onHeaderHover = false">
-                <div class="header-wrapper">
-                    <span :class="['glyphicon', localExpanded ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right']" v-if="showCaret && hasCustomHeader" aria-hidden="true"></span>
+                <div class="header-wrapper" ref="headerWrapper">
                     <slot name="header">
                         <div :class="['card-title', cardType, {'text-white':!isLightBg}]" v-html="headerContent"></div>
                     </slot>
@@ -325,6 +324,11 @@
         if (this.hasSrc && (this.preloadBool || this.expandedBool)) {
           this.$refs.retriever.fetch()
         }
+
+        if (this.hasCustomHeader) {
+          this.$refs.headerWrapper.innerHTML =
+            this.insertCaretInsideHeader(this.$refs.headerWrapper.innerHTML);
+        }
       })
     },
   }

From 11e6bee43f4773daa8a81b6c7e5e6786bd51f55f Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Mon, 23 Jul 2018 15:41:44 +0800
Subject: [PATCH 3/3] Panel: Handle case when this.header is empty for
 renderedHeader()

---
 src/Panel.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Panel.vue b/src/Panel.vue
index 7588b0e36..0f7290bd4 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -206,6 +206,10 @@
         return this.alt && md.render(this.alt) || this.renderedHeader;
       },
       renderedHeader () {
+        if (!this.header) {
+          return '';
+        }
+
         let htmlRenderedHeader = md.render(this.header).trim();
 
         if (this.isSeamless) {