refactor: minor code refactors and fixes, update packages

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">