fixed: unexpected escaping label and caption header

Author: adenvt

resources/js/coreui/views/sample/Dashboard.vue

@@ -961,6 +961,10 @@
             hover
             head-variant="light"
           >
+            <div slot="HEAD_avatar">
+              <i class="icon-people"></i>
+            </div>
+
             <div
               slot="avatar"
               slot-scope="item"

resources/js/coreui/views/sample/base/Cards.vue

@@ -24,7 +24,10 @@
         sm="6"
         md="4"
       >
-        <b-card header="<i class='fa fa-check'></i> Card with icon">
+        <b-card>
+          <template slot="header">
+            <i class='fa fa-check'></i> Card with icon
+          </template>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </b-card>
       </b-col>

resources/js/coreui/views/sample/base/Table.vue

@@ -1,5 +1,10 @@
 <template>
-  <b-card :header="caption">
+  <b-card>
+    <template slot="header">
+      <slot name="caption">
+        Table
+      </slot>
+    </template>
     <b-table
       :hover="hover"
       :striped="striped"
@@ -52,10 +57,6 @@ const shuffleArray = (array) => {
 export default {
   name : 'CTable',
   props: {
-    caption: {
-      type   : String,
-      default: 'Table',
-    },
     hover: {
       type   : Boolean,
       default: false,

resources/js/coreui/views/sample/base/Tables.vue

@@ -2,31 +2,40 @@
   <div class="animated fadeIn">
     <b-row>
       <b-col lg="6">
-        <c-table caption="<i class='fa fa-align-justify'></i> Simple Table" />
+        <c-table>
+          <template slot="caption">
+            <i class="fa fa-align-justify"></i> Simple Table
+          </template>
+        </c-table>
       </b-col><!--/.col-->
 
       <b-col lg="6">
-        <c-table
-          striped
-          caption="<i class='fa fa-align-justify'></i> Striped Table"
-        />
+        <c-table striped>
+          <template slot="caption">
+            <i class='fa fa-align-justify'></i> Striped Table
+          </template>
+        </c-table>
       </b-col><!--/.col-->
     </b-row><!--/.row-->
 
     <b-row>
       <b-col lg="6">
-        <c-table
-          small
-          caption="<i class='fa fa-align-justify'></i> Condensed Table"
-        />
+        <c-table small >
+          <template slot="caption">
+            <i class='fa fa-align-justify'></i> Condensed Table
+          </template>
+        </c-table>
       </b-col><!--/.col-->
 
       <b-col lg="6">
         <c-table
           fixed
           bordered
-          caption="<i class='fa fa-align-justify'></i> Bordered Table"
-        />
+        >
+          <template slot="caption">
+            <i class='fa fa-align-justify'></i> Bordered Table
+          </template>
+        </c-table>
       </b-col><!--/.col-->
     </b-row><!--/.row-->
 
@@ -38,8 +47,11 @@
           bordered
           small
           fixed
-          caption="<i class='fa fa-align-justify'></i> Combined All Table"
-        />
+        >
+          <template slot="caption">
+            <i class='fa fa-align-justify'></i> Combined All Table
+          </template>
+        </c-table>
       </b-col>
     </b-row>
   </div>

resources/js/coreui/views/sample/notifications/Badges.vue

@@ -47,10 +47,12 @@
           md="6"
         >
           <b-card
-            header="Badge <small>contextual variations</small>"
             header-tag="header"
             footer-tag="footer"
           >
+            <template slot="header">
+              Badge <small>contextual variations</small>
+            </template>
             <div>
               <b-badge variant="primary">
                 Primary
@@ -79,10 +81,12 @@
             </div>
           </b-card>
           <b-card
-            header="Badge <small>pills</small>"
             header-tag="header"
             footer-tag="footer"
           >
+            <template slot="header">
+              Badge <small>pills</small>
+            </template>
             <div>
               <b-badge
                 pill
@@ -135,10 +139,12 @@
             </div>
           </b-card>
           <b-card
-            header="Badge <small>actionable</small>"
             header-tag="header"
             footer-tag="footer"
           >
+            <template slot="header">
+              Badge <small>actionable</small>
+            </template>
             <div>
               <b-badge
                 href="#"