fix: template fixes, updates and refactors

src/views/base/Breadcrumbs.vue

@@ -32,7 +32,7 @@ export default {
     return {
       items: [
         {
-          text: '<b>Admin</b>',
+          text: 'Admin',
           href: '#'
         }, 
         {

src/views/base/Collapses.vue

@@ -17,16 +17,20 @@
           </div>
         </CCardHeader>
         <CCardBody>
-          <CButton id="collapse1" color="primary">
+          <CButton @click="collapse = !collapse" color="primary">
             Toggle Collapse
           </CButton>
-          <CCollapse toggler="collapse1" class="mt-2">
+          <CCollapse :show="collapse" class="mt-2">
             <CCard body-wrapper>
               <p class="card-text">Collapse contents Here</p>
-              <CButton id="collapse2" size="sm" color="secondary">
+              <CButton  
+                @click="innerCollapse = !innerCollapse" 
+                size="sm" 
+                color="secondary"
+              >
                 Toggle Inner Collapse
               </CButton>
-              <CCollapse toggler="collapse2" class="mt-2">
+              <CCollapse :show="innerCollapse" class="mt-2">
                 <CCard body-wrapper>Hello!</CCard>
               </CCollapse>
             </CCard>
@@ -42,7 +46,8 @@ export default {
   name: 'Collapses',
   data () {
     return {
-      showCollapse: true,
+      collapse: false,
+      innerCollapse: false,
       text: `
         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
         richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor

src/views/base/Forms.vue

@@ -149,11 +149,10 @@
                 horizontal
                 disabled
               />
-              <CInput
+              <CTextarea
                 label="Textarea"
                 placeholder="Content..."
                 horizontal
-                textarea="true"
                 rows="9"
               />
               <CSelect

src/views/base/Jumbotrons.vue

@@ -18,7 +18,9 @@
             </div>
           </CCardHeader>
           <CCardBody>
-            <CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
+            <CJumbotron>
+              <h1 class="display-3">Bootstrap 4</h1>
+              <p class="lead">Bootstrap 4 Components for Vue.js 2</p>
               <p>For more information visit website</p>
               <CButton color="primary" href="#">More Info</CButton>
             </CJumbotron>
@@ -33,7 +35,8 @@
           </CCardHeader>
           <CCardBody>
             <CJumbotron header="Bootstrap 4" lead="">
-              <p slot="lead" class="lead">
+              <h1 class="display-3">Bootstrap 4</h1>
+              <p class="lead">
                 This is a simple hero unit, a simple jumbotron-style component for
                 calling extra attention to featured content or information.
               </p>
@@ -61,9 +64,9 @@
               color="info"
               text-color="white"
               border-color="dark"
-              header="Bootstrap 4"
             >
-              <p slot="lead" class="lead">
+              <h1 class="display-3">Bootstrap 4</h1>
+              <p class="lead">
                 This is a simple hero unit, a simple jumbotron-style component for
                 calling extra attention to featured content or information.
               </p>

src/views/base/Navbars.vue

@@ -91,7 +91,7 @@
           <CNavbarBrand>CoreuiVue</CNavbarBrand>
           <CCollapse :show="navbarText" navbar>
             <CNavbarNav>
-              <span class="navbar-text">Navbar text</span>
+              <CNavbarText>Navbar text</CNavbarText>
             </CNavbarNav>
           </CCollapse>
         </CNavbar>

src/views/notifications/Alerts.vue

@@ -100,7 +100,7 @@
           <CAlert
             color="secondary"
             closeButton
-            :show.sync="dismissibleAlerts[0]"
+            :show.sync="alert1"
           >
             Dismissible Alert!
           </CAlert>
@@ -109,15 +109,14 @@
             color="secondary"
             closeButton
             fade
-            :show.sync="dismissibleAlerts[1]"
+            :show.sync="alert2"
           >
             Dismissible Alert with fade effect!
           </CAlert>
 
           <CAlert
             color="secondary"
-            :show.sync="dismissibleAlerts[2]"
-            v-slot="{dismiss}"
+            :show.sync="alert3"
             class="alert-dismissible"
           >
             Dismissible Alert with custom button!
@@ -125,9 +124,9 @@
               class="position-absolute"
               color="secondary"
               style="right:10px;top: 50%;transform: translateY(-50%);"
-              @click="dismiss"
+              @click="alert3 = false"
             >
-              <i>Close</i>
+              Close
             </CButton>
           </CAlert>
           <CButton
@@ -186,7 +185,9 @@ export default {
     return {
       dismissSecs: 10,
       dismissCountDown: 10,
-      dismissibleAlerts: [true, true, true],
+      alert1: true,
+      alert2: true,
+      alert3: true
     }
   },
   methods: {
@@ -197,7 +198,7 @@ export default {
       this.dismissCountDown = this.dismissSecs
     },
     showDismissibleAlerts () {
-      this.dismissibleAlerts = this.dismissibleAlerts.map(el => el = true)
+      ['alert1', 'alert2', 'alert3'].forEach(alert => this[alert] = true)
     }
   }
 }