fix: template fixes, updates and refactors

src/containers/TheFooter.vue

@@ -1,12 +1,12 @@
 <template>
   <CFooter>
     <div>
-      <a href="https://coreui.io">CoreUI</a>
+      <a href="https://coreui.io" target="_blank">CoreUI</a>
       <span class="ml-1">&copy; 2019 creativeLabs.</span>
     </div>
     <div class="ml-auto">
       <span class="mr-1">Powered by</span>
-      <a href="https://coreui.io">CoreUI for Vue</a>
+      <a href="https://coreui.io/vue" target="_blank">CoreUI for Vue</a>
     </div>
   </CFooter>
 </template>

src/containers/TheHeader.vue

@@ -2,20 +2,21 @@
   <CHeader fixed with-subheader light>
     <CToggler
       in-header
-      class="c-header-toggler ml-3 d-lg-none"
+      class="ml-3 d-lg-none"
       v-c-emit-root-event:toggle-sidebar-mobile
     />
     <CToggler
       in-header
-      class="c-header-toggler ml-3 d-md-down-none"
+      class="ml-3 d-md-down-none"
       v-c-emit-root-event:toggle-sidebar
     />
-    <img
+    <CHeaderBrand
-      class="c-header-brand mx-auto d-lg-none" 
+      class="mx-auto d-lg-none" 
       src="img/brand/coreui-base.svg"
       width="97"
       height="46"
       alt="CoreUI Logo"
+      :wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
     />
     <CHeaderNav class="d-md-down-none mr-auto">
       <CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
@@ -34,9 +35,9 @@
       </CHeaderNavItem>
       <TheHeaderDropdownAccnt/>
     </CHeaderNav>
-    <div class="c-subheader px-3">
+    <CSubheader class="px-3">
       <CBreadcrumbRouter class="border-0"/>
-    </div>
+    </CSubheader>
   </CHeader>
 </template>
 

src/containers/TheHeaderDropdownAccnt.vue

@@ -5,17 +5,16 @@
     class="c-header-nav-items"
     placement="bottom-end"
     add-menu-classes="pt-0"
-    :show.sync="show"
   >
     <template #toggler>
-      <CLink class="c-header-nav-link" @click="show = !show">
+      <CHeaderNavItem only-link>
         <div class="c-avatar">
           <img
             src="img/avatars/6.jpg"
             class="c-avatar-img "
           />
         </div>
-      </CLink>
+      </CHeaderNavItem>
     </template>
     <CDropdownHeader tag="div" class="text-center" color="light">
       <strong>Account</strong>
@@ -72,8 +71,7 @@ export default {
   name: 'TheHeaderDropdownAccnt',
   data () {
     return { 
-      itemsCount: 42,
+      itemsCount: 42
-      show: false
     }
   }
 }

src/containers/TheSidebar.vue

@@ -5,8 +5,8 @@
     :show.sync="show"
   >
     <CSidebarBrand 
-      fullSrc="img/brand/coreui-base-white.svg" 
+      :imgFull="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-base-white.svg'}"
-      minimizedSrc="img/brand/coreui-signet-white.svg"
+      :imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}"
       :wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
     />
     <!-- <CSidebarHeader/> -->

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]"
+            :show.sync="alert3"
-            v-slot="{dismiss}"
             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)
     }
   }
 }

tests/unit/containers/__snapshots__/TheFooter.spec.js.snap

@@ -7,6 +7,7 @@ exports[`TheFooter.vue renders correctly 1`] = `
   <div>
     <a
       href="https://coreui.io"
+      target="_blank"
     >
       CoreUI
     </a>
@@ -28,7 +29,8 @@ exports[`TheFooter.vue renders correctly 1`] = `
     </span>
      
     <a
-      href="https://coreui.io"
+      href="https://coreui.io/vue"
+      target="_blank"
     >
       CoreUI for Vue
     </a>

tests/unit/containers/__snapshots__/TheHeader.spec.js.snap

@@ -9,23 +9,24 @@ exports[`TheHeader.vue renders correctly 1`] = `
   withsubheader="true"
 >
   <ctoggler-stub
-    class="c-header-toggler ml-3 d-lg-none"
+    class="ml-3 d-lg-none"
     inheader="true"
     tag="button"
   />
    
   <ctoggler-stub
-    class="c-header-toggler ml-3 d-md-down-none"
+    class="ml-3 d-md-down-none"
     inheader="true"
     tag="button"
   />
    
-  <img
+  <cheaderbrand
     alt="CoreUI Logo"
-    class="c-header-brand mx-auto d-lg-none"
+    class="mx-auto d-lg-none"
     height="46"
     src="img/brand/coreui-base.svg"
     width="97"
+    wrappedinlink="[object Object]"
   />
    
   <cheadernav-stub
@@ -119,12 +120,12 @@ exports[`TheHeader.vue renders correctly 1`] = `
     <theheaderdropdownaccnt-stub />
   </cheadernav-stub>
    
-  <div
+  <csubheader
-    class="c-subheader px-3"
+    class="px-3"
   >
     <cbreadcrumbrouter-stub
       class="border-0"
     />
-  </div>
+  </csubheader>
 </cheader-stub>
 `;

tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap

@@ -10,8 +10,8 @@ exports[`TheSidebar.vue renders correctly 1`] = `
   show="responsive"
 >
   <csidebarbrand-stub
-    fullsrc="img/brand/coreui-base-white.svg"
+    imgfull="[object Object]"
-    minimizedsrc="img/brand/coreui-signet-white.svg"
+    imgminimized="[object Object]"
     wrappedinlink="[object Object]"
   />
    

tests/unit/views/base/Collapses.spec.js

@@ -9,26 +9,10 @@ describe('Collapses.vue', () => {
   it('has a name', () => {
     expect(Collapses.name).toBe('Collapses')
   })
-  it('has a created hook', () => {
-    expect(typeof Collapses.data).toMatch('function')
-  })
-  it('sets the correct default data', () => {
-    expect(typeof Collapses.data).toMatch('function')
-    const defaultData = Collapses.data()
-    expect(defaultData.showCollapse).toBe(true)
-  })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Collapses)
     expect(wrapper.isVueInstance()).toBe(true)
   })
-  // it('is Collapses', () => {
-  //   const wrapper = shallowMount(Collapses)
-  //   expect(wrapper.is(Collapses)).toBe(true)
-  // })
-  // it('should render correct content', () => {
-  //   const wrapper = mount(Collapses)
-  //   expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Collapse')
-  // })
   test('renders correctly', () => {
     const wrapper = mount(Collapses)
     expect(wrapper.element).toMatchSnapshot()

tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap

@@ -54,7 +54,7 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
               href="#"
               target="_self"
             >
-               <b>Admin</b> 
+               Admin 
             </a>
           </li>
           <li

tests/unit/views/base/__snapshots__/Collapses.spec.js.snap

@@ -45,7 +45,6 @@ exports[`Collapses.vue renders correctly 1`] = `
       >
         <button
           class="btn btn-primary"
-          id="collapse1"
           type="button"
         >
           
@@ -56,7 +55,6 @@ exports[`Collapses.vue renders correctly 1`] = `
         <div
           class="mt-2"
           style="display: none;"
-          toggler="collapse1"
         >
           <div
             class="card"
@@ -73,7 +71,6 @@ exports[`Collapses.vue renders correctly 1`] = `
                
               <button
                 class="btn btn-secondary btn-sm"
-                id="collapse2"
                 type="button"
               >
                 
@@ -84,7 +81,6 @@ exports[`Collapses.vue renders correctly 1`] = `
               <div
                 class="mt-2"
                 style="display: none;"
-                toggler="collapse2"
               >
                 <div
                   class="card"

tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap

@@ -38,10 +38,20 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
          
         <ccardbody-stub>
           <cjumbotron-stub
-            header="Bootstrap 4"
-            lead="Bootstrap 4 Components for Vue.js 2"
             tag="div"
           >
+            <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>
@@ -87,9 +97,14 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
             lead=""
             tag="div"
           >
+            <h1
+              class="display-3"
+            >
+              Bootstrap 4
+            </h1>
+             
             <p
               class="lead"
-              slot="lead"
             >
               
               This is a simple hero unit, a simple jumbotron-style component for
@@ -164,13 +179,17 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
           <cjumbotron-stub
             bordercolor="dark"
             color="info"
-            header="Bootstrap 4"
             tag="div"
             textcolor="white"
           >
+            <h1
+              class="display-3"
+            >
+              Bootstrap 4
+            </h1>
+             
             <p
               class="lead"
-              slot="lead"
             >
               
               This is a simple hero unit, a simple jumbotron-style component for

tests/unit/views/base/__snapshots__/Navbars.spec.js.snap

@@ -286,11 +286,11 @@ exports[`Navbars.vue renders correctly 1`] = `
           <cnavbarnav-stub
             tag="ul"
           >
-            <span
+            <cnavbartext-stub
-              class="navbar-text"
+              tag="div"
             >
               Navbar text
-            </span>
+            </cnavbartext-stub>
           </cnavbarnav-stub>
         </ccollapse-stub>
       </cnavbar-stub>

tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap

@@ -356,7 +356,25 @@ exports[`Alerts.vue renders correctly 1`] = `
           class="alert-dismissible"
           color="secondary"
           show="true"
-        />
+        >
+          
+          Dismissible Alert with custom button!
+          
+          <cbutton-stub
+            activeclass="active"
+            class="position-absolute"
+            color="secondary"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+          >
+            
+            Close
+          
+          </cbutton-stub>
+        </calert-stub>
          
         <cbutton-stub
           activeclass="active"