refactor: small changes

src/containers/TheSidebar.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import nav from '@/_nav'
+import nav from './_nav'
 export default {
   name: 'TheSidebar',
   computed: {

src/views/base/Carousels.vue

@@ -23,18 +23,20 @@
                 arrows
                 indicators
                 animate
+                height="400px"
               >
                 <CCarouselItem
                   caption="First Slide"
-                  img-src="https://lorempixel.com/1024/480/technics/2/"
+                  image="https://lorempixel.com/1024/480/technics/2/"
                   text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                 />
                 <CCarouselItem
-                  active
+                  caption="Blank page"
-                  img-src="https://lorempixel.com/1024/480/technics/4/"
+                  :image="{ blankColor: 'grey' }"
+                  text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                 />
                 <CCarouselItem
-                 img-src="https://lorempixel.com/1024/480/technics/8/"
+                 image="https://lorempixel.com/1024/480/technics/8/"
                 />
               </CCarousel>
             </CCardBody>

src/views/base/Forms.vue

@@ -487,12 +487,12 @@
               type="email"
               placeholder="Email"
               autocomplete="email"
-              appendHtml="<i class='cui-envelope-open'></i>"
+              append-html="<i class='cui-envelope-open'></i>"
             />
             <CFormInput
               prependHtml="<i class='cui-euro'></i>"
               placeholder="ex. $1.000.000"
-              appendHtml=".00"
+              append-html=".00"
             />
           </CCardBody>
           <CCardFooter>
@@ -529,10 +529,10 @@
               autocomplete="email"
             >
               <template #prepend>
-                <CButton variant="primary"><i class="fa fa-facebook"></i></CButton>
+                <CButton variant="primary"><CIcon name="facebook" height="14"/></CButton>
               </template>
               <template #append>
-                <CButton variant="primary"><i class="fa fa-twitter"></i></CButton>
+                <CButton variant="primary"><CIcon name="twitter" height="14"/></CButton>
               </template>
             </CFormInput>
           </CCardBody>
@@ -684,19 +684,19 @@
             <CForm>
               <CFormInput
                 prepend-html="Username"
-                appendHtml="<i class='cui-user'></i>"
+                append-html="<i class='cui-user'></i>"
               />
               <CFormInput
                 prepend-html="Email"
                 type="email"
                 autocomplete="email"
-                appendHtml="<i class='cui-envelope-closed'></i>"
+                append-html="<i class='cui-envelope-closed'></i>"
               />
               <CFormInput
                 prepend-html="Password"
                 type="password"
                 autocomplete="current-password"
-                appendHtml="<i class='fa fa-asterisk'></i>"
+                append-html="<i class='cui-shield'></i>"
               />
               <div class="c-form-group c-form-actions">
                 <CButton type="submit" size="sm" variant="primary">
@@ -716,19 +716,19 @@
             <CForm>
               <CFormInput
                 placeholder="Username"
-                appendHtml="<i class='cui-user'></i>"
+                append-html="<i class='cui-user'></i>"
               />
               <CFormInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
-                appendHtml="<i class='cui-envelope-closed'></i>"
+                append-html="<i class='cui-envelope-closed'></i>"
               />
               <CFormInput
                 placeholder="Password"
                 type="password"
                 autocomplete="current-password"
-                appendHtml="<i class='fa fa-asterisk'></i>"
+                append-html="<i class='cui-shield'></i>"
               />
               <div class="c-form-group c-form-actions">
                 <CButton type="submit" class="c-btn c-btn-sm c-btn-secondary">
@@ -760,7 +760,7 @@
                 placeholder="Password"
                 type="password"
                 autocomplete="current-password"
-                prependHtml="<i class='fa fa-asterisk'></i>"
+                prependHtml="<i class='cui-shield'></i>"
               />
               <div class="c-form-group c-form-actions">
                 <CButton type="submit" size="sm" variant="success">
@@ -847,14 +847,6 @@ export default {
     return {
       selected: [], // Must be an array reference!
       show: true,
-      id: 'sdfjosdf22',
-      cInput: '',
-      smh: 'shnsad',
-      trueValue:'someTrueValue',
-      falseValue:'someFalseValue',
-      checks: ['someTrueValue','hehehe2','',1,1,1,1,1,1,1,1,1,1,1,1],
-      isValid: '',
-      testkkk: 2,
       horizontal: { label:'col-3', input:'col-9' },
       options: ['Option 1', 'Option 2', 'Option 3'],
       selectOptions: [
@@ -869,9 +861,6 @@ export default {
                     'Radios - custom', 'Inline Radios - custom']
     }
   },
-  updated () {
-    console.log('parent updated')
-  },
   methods: {
     validator (val) {
       return val ? val.length >= 4 : false

src/views/base/Navbars.vue

@@ -43,7 +43,6 @@
         <CCardBody>
           <CNavbar
             toggleable="md"
-            type="dark"
             variant="info"
             sticky
           >
@@ -63,7 +62,9 @@
                     placeholder="Search"
                     size="sm"
                   />
-                  <CButton size="sm" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
+                  <CButton variant="light" size="sm" class="c-my-2 c-my-sm-0">
+                    Search
+                  </CButton>
                 </CForm>
 
                 <CDropdown
@@ -128,7 +129,7 @@
           <small>dropdown</small>
         </CCardHeader>
         <CCardBody>
-          <CNavbar type="dark" variant="primary">
+          <CNavbar>
             <!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
             <CCollapse :show="navbarDropdown" navbar> -->
               <CNavbarNav>
@@ -164,7 +165,7 @@
           <small>form</small>
         </CCardHeader>
         <CCardBody>
-          <CNavbar type="light" variant="light">
+          <CNavbar light variant="light">
             <CForm inline>
               <CFormInput
                 class="c-mr-sm-2"
@@ -182,7 +183,7 @@
           <small>input group</small>
         </CCardHeader>
         <CCardBody>
-          <CNavbar type="light" variant="light">
+          <CNavbar light variant="light">
             <CForm inline>
               <CFormInput
                 class="c-mr-sm-2"

src/views/base/Paginations.vue

@@ -4,7 +4,7 @@
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Pagination</strong>
+          <strong> Responsive bootstrap Pagination</strong>
           <!-- <div class="c-card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="c-text-muted">docs</small>
@@ -16,6 +16,7 @@
           <CPagination
             :active-page.sync="currentPage"
             :pages="10"
+            responsive
           />
           <br>
 
@@ -32,6 +33,7 @@
               size="lg"
               :active-page.sync="currentPage"
               :pages="10"
+              responsive
             />
             <br>
           </div>

src/views/base/Tabs.vue

@@ -7,7 +7,7 @@
             Tabs
           </CCardHeader>
           <CCardBody>
-            <CTabs add-tab-classes="c-mt-1">
+            <CTabs>
               <CTab title-html="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -39,10 +39,7 @@
             Tabs
           </CCardHeader>
           <CCardBody>
-            <CTabs
+            <CTabs pills>
-              pills
-              add-nav-classes="c-mb-3"
-            >
               <CTab title-html="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -74,7 +71,7 @@
             Tabs with icons
           </CCardHeader>
           <CCardBody>
-            <CTabs add-tab-classes="c-mt-1">
+            <CTabs>
               <CTab active>
                 <template slot="title">
                   <i class="cui-calculator"></i>
@@ -156,7 +153,7 @@
             Tabs vertical
           </CCardHeader>
           <CCardBody>
-            <CTabs pills vertical="4">
+            <CTabs pills vertical add-tabs-wrapper-classes="c-pl-3">
               <CTab active>
                 <template slot="title">
                   <i class="cui-calculator"></i> {{tabs[0]}}

src/views/notifications/Alerts.vue

@@ -111,32 +111,18 @@
 
               <CAlert
                 :show.sync="dismissibleAlerts[2]"
-                dismissible
-                iconHtml="<i>Close</i>"
-              >
-                Dismissible Alert with custom icon!
-              </CAlert>
-
-              <CAlert
-                :show.sync="dismissibleAlerts[3]"
-                dismissible="customButton"
                 v-slot="{dismiss}"
+                class="c-alert-dismissible"
               >
                 Dismissible Alert with custom button!
                 <CButton
-                  class="c-position-absolute c-bg-primary"
+                  class="c-position-absolute"
+                  variant="primary"
                   style="right:10px;top: 50%;transform: translateY(-50%);"
                   textHtml="<i>Close</i>"
                   @click="dismiss"
                 />
               </CAlert>
-
-              <CAlert
-                :show.sync="dismissibleAlerts[4]"
-                dismissible="disabled"
-              >
-                Disabled dismissible Alert!
-              </CAlert>
               <CButton
                 @click="showDismissibleAlerts"
                 variant="info"
@@ -195,7 +181,7 @@ export default {
     return {
       dismissSecs: 10,
       dismissCountDown: 10,
-      dismissibleAlerts: [true, true, true, true, true],
+      dismissibleAlerts: [true, true, true],
     }
   },
   methods: {

src/views/notifications/Modals.vue

@@ -80,7 +80,6 @@
 
     <CModal
       title="Modal title"
-      class="c-modal-primary"
       :visible.sync="primaryModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -92,7 +91,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      class="c-modal-success"
+      variant="success"
       :visible.sync="successModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -104,7 +103,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      class="c-modal-warning"
+      variant="warning"
       :visible.sync="warningModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -116,7 +115,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      class="c-modal-danger"
+      variant="danger"
       :visible.sync="dangerModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -128,7 +127,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      class="c-modal-info"
+      variant="info"
       :visible.sync="infoModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -140,20 +139,11 @@
     </CModal>
     <CModal
       :visible.sync="darkModal"
-      :no-backdrop="false"
+      :no-close-on-backdrop="true"
-      :no-close-on-backdrop="fsalse"
-      :no-fade="false"
       :centered="true"
       title="Modal title 2"
       size="lg"
       variant="dark"
-      border-variant="danger2"
-      add-modal-classess="hehe1"
-      add-dialog-classess="hehe2"
-      add-content-classess="hehe3"
-      :no-header="false"
-      :no-body="false"
-      :no-footer="false"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -162,12 +152,12 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       <template #header="{hide}">
-        <h5 class="c-modal-title">Custom modal title</h5>
+        <h6 class="c-modal-title">Custom smaller modal title</h6>
         <CButtonClose @click="hide()" class="c-text-white"/>
       </template>
       <template #footer="{hide}">
         <CButton @click="hide()" variant="danger">Discard</CButton>
-        <CButton @click="hide()" variant="success">Accept</CButton>
+        <CButton @click="hide(true)" variant="success">Accept</CButton>
       </template>
     </CModal>
   </div>