From 0f219f46450da8337f53521a1e601a9df185cff9 Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Fri, 27 Jul 2018 12:26:24 +0800
Subject: [PATCH 1/7] Revert "Merge pull request #83 from
 yamgent/seamless-panel-caret"

This reverts commit 576952c970517c309929f32d68652b5da039e88e, reversing
changes made to 1ce9ce37fce666fb3d22ffa0a5d370d09875eb14.
---
 src/Panel.vue | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index bea25ed4..c8e4a636 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -16,7 +16,8 @@
             <div :class="['card-header',{'header-toggle':isExpandableCard}, cardType, borderType]"
                  @click.prevent.stop="isExpandableCard && toggle()"
                  @mouseover="onHeaderHover = true" @mouseleave="onHeaderHover = false">
-                <div class="header-wrapper" ref="headerWrapper">
+                <div class="header-wrapper">
+                    <span :class="['glyphicon', localExpanded ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right']" v-if="showCaret && hasCustomHeader" aria-hidden="true"></span>
                     <slot name="header">
                         <div :class="['card-title', cardType, {'text-white':!isLightBg}]" v-html="headerContent"></div>
                     </slot>
@@ -210,10 +211,6 @@
         return this.alt && md.render(this.alt) || this.renderedHeader;
       },
       renderedHeader () {
-        if (!this.header) {
-          return '';
-        }
-
         let htmlRenderedHeader = md.render(this.header).trim();
 
         if (this.isSeamless) {
@@ -223,10 +220,19 @@
           // 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>', '<h1>', '<h2>', '<h3>', '<h4>', '<h5>', '<h6>'];
-          tags.forEach(tag => {
-            if (!caretAdded && htmlRenderedHeader.startsWith(tag))  {
-              htmlRenderedHeader = this.insertCaretInsideHeader(htmlRenderedHeader);
+          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();
               caretAdded = true;
             }
           });
@@ -299,11 +305,6 @@
         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: {
@@ -332,11 +333,6 @@
         if (this.hasSrc && (this.preloadBool || this.expandedBool)) {
           this.$refs.retriever.fetch()
         }
-
-        if (this.hasCustomHeader) {
-          this.$refs.headerWrapper.innerHTML =
-            this.insertCaretInsideHeader(this.$refs.headerWrapper.innerHTML);
-        }
       });
       const panelHeader = this.$slots.header ? this.$refs.headerWrapper.innerHTML : this.headerContent;
       const panelHeaderText = jQuery(panelHeader).wrap('<div></div>').parent().find(':header').text();

From 8c596b6344e48b1f1706aa45ee1692bbff9341a2 Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Fri, 27 Jul 2018 13:43:45 +0800
Subject: [PATCH 2/7] Revert "Merge pull request #81 from
 yamgent/fix-panel-heading"

This reverts commit 6b87950c3897476560dfdf818e6ff062a5ac4769, reversing
changes made to 5afeb2087da4f8315cf4d4c756c76d1f19baab00.
---
 src/Panel.vue | 35 ++++-------------------------------
 1 file changed, 4 insertions(+), 31 deletions(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index c8e4a636..affbe489 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -205,43 +205,16 @@
         return this.cardType === 'bg-light' || this.cardType === 'bg-white' || this.cardType === 'bg-warning';
       },
       headerContent () {
+        if (this.isSeamless) {
+            return this.caretHtml + ' ' + this.renderedHeader;
+        }
         return this.renderedHeader;
       },
       altContent () {
         return this.alt && md.render(this.alt) || this.renderedHeader;
       },
       renderedHeader () {
-        let htmlRenderedHeader = md.render(this.header).trim();
-
-        if (this.isSeamless) {
-          // insert the caret to the header content
-          let caretAdded = false;
-
-          // 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();
-              caretAdded = true;
-            }
-          });
-
-          if (!caretAdded) {
-            htmlRenderedHeader = this.caretHtml + ' ' + htmlRenderedHeader;
-          }
-        }
-        return htmlRenderedHeader;
+        return md.renderInline(this.header);
       },
       hasSrc () {
         return this.src && this.src.length > 0;

From b11037f9b4053264df4f1cb6877dbc23fca0387d Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Fri, 27 Jul 2018 13:44:59 +0800
Subject: [PATCH 3/7] Revert "Merge pull request #74 from
 Chng-Zhi-Xuan/337-seamless-panel"

This reverts commit d7626b30fb4b83a184f4d995194b0ca4245c1473, reversing
changes made to a0bae9ef0b51f59b30263d505b51f8d8dfa0ab92.
---
 src/Panel.vue | 26 +++++---------------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index affbe489..f4059ec1 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -17,7 +17,7 @@
                  @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>
+                    <span :class="['glyphicon', localExpanded ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right']" v-show="showCaret"></span>
                     <slot name="header">
                         <div :class="['card-title', cardType, {'text-white':!isLightBg}]" v-html="headerContent"></div>
                     </slot>
@@ -28,12 +28,12 @@
                                       @click.native.stop.prevent="expand()"
                                       @is-open-event="retrieveOnOpen" :is-light-bg="isLightBg"></panel-switch>
                         <button type="button" :class="['close-button', 'btn', isLightBg ? 'btn-outline-secondary' : 'btn-outline-light']"
-                                v-show="isSeamless ? onHeaderHover : (!noCloseBool)"
+                                v-show="!isSeamless ? (!noCloseBool) : onHeaderHover"
                                 @click.stop="close()">
                             <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                         </button>
                         <button type="button" :class="['popup-button', 'btn', isLightBg ? 'btn-outline-secondary' : 'btn-outline-light']"
-                                v-show="((this.popupUrl !== null) && (!isSeamless || onHeaderHover))"
+                                v-show="this.popupUrl !== null"
                                 @click.stop="openPopup()">
                             <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
                         </button>
@@ -205,16 +205,10 @@
         return this.cardType === 'bg-light' || this.cardType === 'bg-white' || this.cardType === 'bg-warning';
       },
       headerContent () {
-        if (this.isSeamless) {
-            return this.caretHtml + ' ' + this.renderedHeader;
-        }
-        return this.renderedHeader;
+        return md.render(this.header);
       },
       altContent () {
-        return this.alt && md.render(this.alt) || this.renderedHeader;
-      },
-      renderedHeader () {
-        return md.renderInline(this.header);
+        return this.alt && md.render(this.alt) || md.render(this.header);
       },
       hasSrc () {
         return this.src && this.src.length > 0;
@@ -225,16 +219,6 @@
         } else {
           return onHeaderHover;
         }
-      },
-      caretHtml () {
-        if (this.localExpanded) {
-          return '<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>'
-        } else {
-          return '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>'
-        }
-      },
-      hasCustomHeader () {
-        return this.$slots.header !== undefined;
       }
     },
     data () {

From 2f7d2b5b8c786fac5c0b900b38edc97261cd6cf1 Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Fri, 27 Jul 2018 13:50:59 +0800
Subject: [PATCH 4/7] Panel: Move caret to its own wrapper

The caret is combined with the header content. It is usually rendered
like this:

> Some heading

However, custom header contents, after markdown rendering, will be
wrapped with block HTML tags such as <p> and <h1>, which will make
browsers render a line break between the caret and header content:

>
Some heading

Let's fix this by moving the caret to a separate div. Then, make
everything inside a panel header be on a single line by using CSS
'display: inline-block' and 'width: ...', such that the width adds up to
100%.

    +--------+-----------------+---------+
    | caret  |  header-content | buttons |
    | (32px) | (100% - 32 - 32)|  (32px) |
    +--------+-----------------+---------+

Thanks to @nusjzx for providing the fix to the button-wrapper in PR
https://github.com/MarkBind/vue-strap/pull/86, in which his use of
'calc(100% - 32px)' provided a source of inspiration for this fix. His
fix in that PR is incorporated into this commit because without it, the
responsive design will not work.

An alternative fix considered was to use md.renderInline(). However,
md.renderInline() does not render markdown headings.

Another alternative fix was to insert the caret directly inside the
header content. However, after PR #74, #81 and #83 were merged, new
problems continue to emerge.

These problems are reported as comments in these pages:
- https://github.com/MarkBind/vue-strap/pull/74
- https://github.com/MarkBind/vue-strap/pull/81
- https://github.com/MarkBind/vue-strap/pull/83
- https://github.com/MarkBind/markbind/issues/373
- https://github.com/MarkBind/markbind/issues/383

As such, the PRs for this alternative fix has been reverted by the
previous commits before this commit.
---
 src/Panel.vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index f4059ec1..4f855d4c 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -16,8 +16,10 @@
             <div :class="['card-header',{'header-toggle':isExpandableCard}, cardType, borderType]"
                  @click.prevent.stop="isExpandableCard && toggle()"
                  @mouseover="onHeaderHover = true" @mouseleave="onHeaderHover = false">
-                <div class="header-wrapper">
+                <div class="caret-wrapper">
                     <span :class="['glyphicon', localExpanded ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right']" v-show="showCaret"></span>
+                </div>
+                <div class="header-wrapper">
                     <slot name="header">
                         <div :class="['card-title', cardType, {'text-white':!isLightBg}]" v-html="headerContent"></div>
                     </slot>
@@ -316,15 +318,21 @@
         margin: 0px !important;
     }
 
+    .caret-wrapper {
+        float: left;
+        display: inline-block;
+        width: 32px;
+    }
+
     .header-wrapper {
         display: inline-block;
-        width: 72%;
+        width: calc(100% - 32px - 96px);
     }
 
     .button-wrapper {
         float: right;
         display: inline-block;
-        width: 28%;
+        width: 96px;
     }
 
     .header-toggle {
@@ -403,12 +411,21 @@
     /* Bootstrap extra small(xs) responsive breakpoint */
     @media (max-width: 575.98px) {
 
+        .caret-wrapper {
+            float: left;
+            display: inline-block;
+            width: 32px;
+        }
+
         .header-wrapper {
-            width: 88%;
+            display: inline-block;
+            width: calc(100% - 32px - 32px);
         }
 
         .button-wrapper {
-            width: 12%;
+            float: right;
+            display: inline-block;
+            width: 32px;
         }
 
         .card-body {

From 7d470c6ce94fc42f8150bbd07e6da585b634af68 Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Mon, 30 Jul 2018 09:52:22 +0800
Subject: [PATCH 5/7] Panel: Change caret from `v-show` to `v-if`

This change will improve rendering performance, as `v-if` will ensure
that the caret will never get rendered if it shouldn't appear in the
first place.
---
 src/Panel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index 4f855d4c..efad3b0f 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -17,7 +17,7 @@
                  @click.prevent.stop="isExpandableCard && toggle()"
                  @mouseover="onHeaderHover = true" @mouseleave="onHeaderHover = false">
                 <div class="caret-wrapper">
-                    <span :class="['glyphicon', localExpanded ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right']" v-show="showCaret"></span>
+                    <span :class="['glyphicon', localExpanded ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right']" v-if="showCaret"></span>
                 </div>
                 <div class="header-wrapper">
                     <slot name="header">

From 2e44d7f63073e0a9f75d117d5524d815711e39f4 Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Mon, 30 Jul 2018 09:54:57 +0800
Subject: [PATCH 6/7] Panel: Invert `if` condition

---
 src/Panel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index efad3b0f..361f77e4 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -30,7 +30,7 @@
                                       @click.native.stop.prevent="expand()"
                                       @is-open-event="retrieveOnOpen" :is-light-bg="isLightBg"></panel-switch>
                         <button type="button" :class="['close-button', 'btn', isLightBg ? 'btn-outline-secondary' : 'btn-outline-light']"
-                                v-show="!isSeamless ? (!noCloseBool) : onHeaderHover"
+                                v-show="isSeamless ? onHeaderHover : (!noCloseBool)"
                                 @click.stop="close()">
                             <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                         </button>

From 93515d4bb582d241287537aced0ac89403142cd1 Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Mon, 30 Jul 2018 09:55:48 +0800
Subject: [PATCH 7/7] Panel: Fix popup button always showing when on seamless

For seamless panels, header buttons should only show when the user
hovers over the title.

However, the popup button is always shown to the user regardless of
whether the user hovers over it or not.

Let's fix the popup button showing behavior so that it will only show
when the user hovers over it.
---
 src/Panel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index 361f77e4..e676a0db 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -35,7 +35,7 @@
                             <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                         </button>
                         <button type="button" :class="['popup-button', 'btn', isLightBg ? 'btn-outline-secondary' : 'btn-outline-light']"
-                                v-show="this.popupUrl !== null"
+                                v-show="((this.popupUrl !== null) && (!isSeamless || onHeaderHover))"
                                 @click.stop="openPopup()">
                             <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
                         </button>