refactor: minor code refactors and fixes, update packages

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Open Source Bootstrap Admin Template",
   "author": {
     "name": "CoreUI",
@@ -27,29 +27,29 @@
     "release": "npm-run-all clearCache lint build test:unit test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "~3.0.0",
-    "@coreui/icons": "~1.0.1",
-    "@coreui/utils": "~1.2.2",
-    "@coreui/vue": "~3.0.0",
-    "@coreui/vue-chartjs": "~1.0.3",
+    "@coreui/coreui": "^3.0.0",
+    "@coreui/icons": "^1.0.1",
+    "@coreui/utils": "^1.2.4",
+    "@coreui/vue": "^3.0.5",
+    "@coreui/vue-chartjs": "^1.0.4",
     "vue": "~2.6.11",
-    "vue-router": "~3.1.5",
-    "vuex": "~3.1.2"
+    "vue-router": "~3.1.6",
+    "vuex": "~3.1.3"
   },
   "devDependencies": {
-    "@babel/core": "~7.8.4",
-    "@vue/cli-plugin-babel": "~4.2.2",
-    "@vue/cli-plugin-e2e-nightwatch": "~4.2.2",
-    "@vue/cli-plugin-eslint": "~4.2.2",
-    "@vue/cli-plugin-unit-jest": "~4.2.2",
-    "@vue/cli-service": "~4.2.2",
+    "@babel/core": "~7.8.7",
+    "@vue/cli-plugin-babel": "~4.2.3",
+    "@vue/cli-plugin-e2e-nightwatch": "~4.2.3",
+    "@vue/cli-plugin-eslint": "~4.2.3",
+    "@vue/cli-plugin-unit-jest": "~4.2.3",
+    "@vue/cli-service": "~4.2.3",
     "@vue/test-utils": "1.0.0-beta.29",
-    "babel-eslint": "~10.0.3",
+    "babel-eslint": "~10.1.0",
     "babel-jest": "~25.1.0",
     "chromedriver": "~80.0.1",
     "core-js": "~3.6.4",
     "eslint": "~6.8.0",
-    "eslint-plugin-vue": "~6.2.1",
+    "eslint-plugin-vue": "~6.2.2",
     "node-sass": "~4.13.1",
     "npm-run-all": "~4.1.5",
     "sass-loader": "~8.0.2",

src/assets/icons/logo.js

@@ -1,3 +1,6 @@
+// Example of SVG converted to js array, so it can be used with CIcon.
+// the first argument is two last values of svg viewBox, 
+// the second argument is the SVG content stripped of SVG tags
 export const logo = ['556 134',`
   <g>
     <g style="fill:#1bbd93;">
@@ -23,4 +26,4 @@ export const logo = ['556 134',`
       </g>
     </g>
   </g>
-`];
+`]

src/containers/TheSidebar.vue

@@ -7,11 +7,18 @@
   >
     <CSidebarBrand class="d-md-down-none" to="/">
       <CIcon 
-        class="d-block" 
+        class="c-sidebar-brand-full" 
         name="logo" 
         size="custom-size" 
         :height="35" 
-        :viewBox="`0 0 ${minimize ? 110 : 556} 134`"
+        viewBox="0 0 556 134"
+      />
+      <CIcon 
+        class="c-sidebar-brand-minimized" 
+        name="logo" 
+        size="custom-size" 
+        :height="35" 
+        viewBox="0 0 110 134"
       />
     </CSidebarBrand>
 

src/main.js

@@ -8,6 +8,7 @@ import store from './store'
 
 Vue.config.performance = true
 Vue.use(CoreuiVue)
+Vue.prototype.$log = console.log.bind(console)
 
 new Vue({
   el: '#app',

src/views/base/Collapses.vue

@@ -17,10 +17,10 @@
           </div>
         </CCardHeader>
         <CCardBody>
-          <CButton @click="collapse = !collapse" color="primary">
+          <CButton @click="collapse = !collapse" color="primary" class="mb-2">
             Toggle Collapse
           </CButton>
-          <CCollapse :show="collapse" class="mt-2">
+          <CCollapse :show="collapse" :duration="400">
             <CCard body-wrapper>
               <CCardText>Collapse contents Here</CCardText>
               <CButton  
@@ -37,15 +37,20 @@
           </CCollapse>
         </CCardBody>
       </CCard>
+    </CCol>
+    <CCol col="12" md="6">
       <CCard>
-        <CCardHeader @click.native="cardCollapse = !cardCollapse"> 
+        <CCardHeader 
+          @click="cardCollapse = !cardCollapse" 
+          class="btn text-left"
+        > 
           <strong>Collapsible card</strong>
         </CCardHeader>
-        <CCardBody>
-          <CCollapse :show="cardCollapse" class="mt-2">
-            <CCardText>Collapse contents Here</CCardText>
+        <CCollapse :show="cardCollapse">
+          <CCardBody class="m-1">
+            {{text}}
+          </CCardBody>
           </CCollapse>
-        </CCardBody>
       </CCard>
     </CCol>
   </CRow>

src/views/base/Forms.vue

@@ -184,7 +184,7 @@
                 disabled
               />
               <template v-for="(name, key) in checkboxNames">
-                <div class="form-group form-row" :key="name">
+                <CRow form class="form-group" :key="name">
                   <CCol tag="label" sm="3" class="col-form-label">
                     {{name}}
                   </CCol>
@@ -200,27 +200,21 @@
                       :inline="key % 2 === 1"
                     />
                   </CCol>
-                </div>
+                </CRow>
               </template>
               <template v-for="(name, key) in radioNames">
-                <div class="form-row form-group" :key="name">
+                <CRow form class="form-group" :key="name">
                   <CCol sm="3">
                     {{name}}
                   </CCol>
-                  <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
-                    <CInputRadio
-                      v-for="(option, optionIndex) in options"
-                      :key="key + option"
-                      :label="option"
-                      type="radio"
-                      :value="option"
-                      :custom="key > 1"
-                      :name="`Option 1${key}`"
-                      :checked="optionIndex === key"
-                      :inline="key % 2 === 1"
-                    />
-                  </CCol>
-                </div>
+                  <CInputRadioGroup
+                    class="col-sm-9"
+                    :options="options"
+                    :custom="key > 1"
+                    :checked="`Option ${key}`"
+                    :inline="key % 2 === 1"
+                  />
+                </CRow>
               </template>
               <CInputFile
                 label="File input"

src/views/users/Users.vue

@@ -15,7 +15,7 @@
             clickable-rows
             :active-page="activePage"
             @row-clicked="rowClicked"
-            :pagination="{ doubleArrows: false, align: center}"
+            :pagination="{ doubleArrows: false, align: 'center'}"
             @page-change="pageChange"
           >
             <template #status="data">

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

@@ -20,12 +20,20 @@ exports[`TheSidebar.vue renders correctly 1`] = `
     to="/"
   >
     <cicon-stub
-      class="d-block"
+      class="c-sidebar-brand-full"
       height="35"
       name="logo"
       size="custom-size"
       viewbox="0 0 556 134"
     />
+     
+    <cicon-stub
+      class="c-sidebar-brand-minimized"
+      height="35"
+      name="logo"
+      size="custom-size"
+      viewbox="0 0 110 134"
+    />
   </csidebarbrand-stub>
    
   <crenderfunction-stub

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

@@ -48,7 +48,7 @@ exports[`Collapses.vue renders correctly 1`] = `
         class="card-body"
       >
         <button
-          class="btn btn-primary"
+          class="btn mb-2 btn-primary"
           type="button"
         >
           
@@ -57,7 +57,7 @@ exports[`Collapses.vue renders correctly 1`] = `
         </button>
          
         <div
-          class="mt-2"
+          class=""
           style="display: none;"
         >
           <div
@@ -100,12 +100,16 @@ exports[`Collapses.vue renders correctly 1`] = `
         </div>
       </div>
     </div>
-     
+  </div>
+   
+  <div
+    class="col-12 col-md-6"
+  >
     <div
       class="card"
     >
       <header
-        class="card-header"
+        class="card-header btn text-left"
       >
         <strong>
           Collapsible card
@@ -113,16 +117,23 @@ exports[`Collapses.vue renders correctly 1`] = `
       </header>
        
       <div
-        class="card-body"
+        class=""
       >
         <div
-          class="mt-2"
+          class="card-body m-1"
         >
-          <p
-            class="card-text"
-          >
-            Collapse contents Here
-          </p>
+          
+          
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
+        brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
+        tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+        assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
+        wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
+        vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
+        synth nesciunt you probably haven't heard of them accusamus labore VHS.
+      
+        
         </div>
       </div>
     </div>