From 4e1fd70b45bb41a4a72622cafeff6ee8de2504dc Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Mon, 8 Jul 2019 11:26:05 +0200
Subject: [PATCH] refactor: small changes

---
 src/containers/TheSidebar.vue      |  2 +-
 src/{ => containers}/_nav.js       |  0
 src/views/base/Carousels.vue       | 10 +++++----
 src/views/base/Forms.vue           | 33 ++++++++++--------------------
 src/views/base/Navbars.vue         | 11 +++++-----
 src/views/base/Paginations.vue     |  4 +++-
 src/views/base/Tabs.vue            | 11 ++++------
 src/views/notifications/Alerts.vue | 22 ++++----------------
 src/views/notifications/Modals.vue | 24 +++++++---------------
 9 files changed, 42 insertions(+), 75 deletions(-)
 rename src/{ => containers}/_nav.js (100%)

diff --git a/src/containers/TheSidebar.vue b/src/containers/TheSidebar.vue
index 16f24aaa..feb0ec3a 100644
--- a/src/containers/TheSidebar.vue
+++ b/src/containers/TheSidebar.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import nav from '@/_nav'
+import nav from './_nav'
 export default {
   name: 'TheSidebar',
   computed: {
diff --git a/src/_nav.js b/src/containers/_nav.js
similarity index 100%
rename from src/_nav.js
rename to src/containers/_nav.js
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 17cb636e..2a3c0686 100644
--- a/src/views/base/Carousels.vue
+++ b/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
-                  img-src="https://lorempixel.com/1024/480/technics/4/"
+                  caption="Blank page"
+                  :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>
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index a2935045..c8f73703 100644
--- a/src/views/base/Forms.vue
+++ b/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
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index f53741ab..790fd1f0 100644
--- a/src/views/base/Navbars.vue
+++ b/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"
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 0a40d664..b192cf94 100644
--- a/src/views/base/Paginations.vue
+++ b/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>
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 5899de5b..680a850d 100644
--- a/src/views/base/Tabs.vue
+++ b/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
-              pills
-              add-nav-classes="c-mb-3"
-            >
+            <CTabs pills>
               <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]}}
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index 53e1856e..369f34fc 100644
--- a/src/views/notifications/Alerts.vue
+++ b/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: {
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index 1ad9d44c..cd6d8f03 100644
--- a/src/views/notifications/Modals.vue
+++ b/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="fsalse"
-      :no-fade="false"
+      :no-close-on-backdrop="true"
       :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>