From d5a0511652527ba491b599f1640c8dc5d30b561f Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Thu, 4 Apr 2019 09:46:15 +0200
Subject: [PATCH] refactor: change v-model to .sync modifier, other small
 changes

---
 src/containers/DefaultHeaderDropdownAccnt.vue |  2 +-
 src/views/Dashboard.vue                       |  2 +-
 src/views/base/Paginations.vue                | 46 +++++++---
 src/views/base/Switches.vue                   | 20 ++---
 src/views/base/Table.vue                      |  2 +-
 src/views/base/Tables.vue                     | 74 ++++++++--------
 src/views/base/Tabs.vue                       |  2 -
 src/views/notifications/Modals.vue            | 85 ++++++++++---------
 8 files changed, 124 insertions(+), 109 deletions(-)

diff --git a/src/containers/DefaultHeaderDropdownAccnt.vue b/src/containers/DefaultHeaderDropdownAccnt.vue
index aefc2c8f..c2080738 100644
--- a/src/containers/DefaultHeaderDropdownAccnt.vue
+++ b/src/containers/DefaultHeaderDropdownAccnt.vue
@@ -6,7 +6,7 @@
     noPopper
     addMenuClasses="dropdown-menu-right"
   >
-    <template #buttonContent>
+    <template #button-content>
       <img
         src="img/avatars/6.jpg"
         class="img-avatar"
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 8b92032e..0b605359 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -55,7 +55,7 @@
         </CRow>
       </CCardFooter>
     </CCard>
-    <Widgets04/>
+    <WidgetsSocial/>
     <CRow>
       <CCol md="12">
         <CCard headerHtml="Traffic &amp; Sales" bodyWrapper>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 9d9fe189..484f9093 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -3,7 +3,8 @@
     <div class="animated fadeIn">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Pagination</strong>
           <!-- <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -12,16 +13,26 @@
         </CCardHeader>
         <CCardBody>
           <h6>Default</h6>
-          <CPagination v-model="currentPage" :pages="10"/>
+          <CPagination
+            :activePage.sync="currentPage"
+            :pages="10"
+          />
           <br>
 
           <h6>Small</h6>
-          <CPagination size="sm" v-model="currentPage" :pages="10"/>
+          <CPagination
+            size="sm"
+            :activePage.sync="currentPage"
+            :pages="10"/>
           <br>
 
           <div class="d-sm-down-none">
             <h6>Large</h6>
-            <CPagination size="lg" v-model="currentPage" :pages="10"/>
+            <CPagination
+              size="lg"
+              :activePage.sync="currentPage"
+              :pages="10"
+            />
             <br>
           </div>
 
@@ -30,20 +41,32 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Pagination </strong>
+          <i class="fa fa-align-justify"></i>
+          <strong> Pagination </strong>
           <small>alignment</small>
         </CCardHeader>
         <CCardBody>
           <h6>Left alignment (default)</h6>
-          <CPagination v-model="currentPage" :pages="10"/>
+          <CPagination
+            :activePage.sync="currentPage"
+            :pages="10"
+          />
           <br>
 
           <h6>Center alignment</h6>
-          <CPagination align="center" :pages="10" v-model="currentPage"/>
+          <CPagination
+            align="center"
+            :pages="10"
+            :activePage.sync="currentPage"
+          />
           <br>
 
           <h6>Right (end) alignment</h6>
-          <CPagination align="end" v-model="currentPage" :pages="10"/>
+          <CPagination
+            align="end"
+            :activePage.sync="currentPage"
+            :pages="10"
+          />
           <br>
 
           <div>currentPage: {{currentPage}}</div>
@@ -60,11 +83,6 @@ export default {
     return {
       currentPage: 3,
     }
-  },
-  // methods: {
-  //   linkGen (pageNum) {
-  //     return '#page/' + pageNum + '/foobar'
-  //   },
-  // }
+  }
 }
 </script>
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index 4cf0b1b7..cbbf714d 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -12,7 +12,7 @@
             </h5>
           </CCardHeader>
           <CCardBody>
-            <!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/> -->
+            <!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" trueValue="primary"/> -->
             <CSwitch class="mx-1"
                      :key="key"
                      :variant="variant"
@@ -21,7 +21,7 @@
                      v-bind="labelIcon"
                      type="radio"
                      name="radio"
-                     v-model="radio"
+                     :checked.sync="radio"
                      :value="variant"
                      v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
             />
@@ -37,27 +37,19 @@
             <CBadge variant="primary">{{checker}}</CBadge>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1"
+            <CSwitch
+              class="mx-1"
               variant="primary"
-              checked
               name="switch1"
-              v-model="checker"
-              value="someValue"
+              :checked.sync="checker"
               trueValue="yes"
               falseValue="no"
             />
-            <CSwitch class="mx-1"
-              variant="primary"
-              checked
-              name="switch1"
-              :checked="true"
-              value="someValue"
-            />
             <CSwitch class="mx-1"
                      :variant="variant"
                      checked
                      :key="key"
-                     v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
+                     v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
             />
             <CSwitch class="mx-1" variant="primary" disabled />
           </CCardBody>
diff --git a/src/views/base/Table.vue b/src/views/base/Table.vue
index 7322814e..d11ef264 100644
--- a/src/views/base/Table.vue
+++ b/src/views/base/Table.vue
@@ -12,7 +12,7 @@
       :dark="dark"
       noSorting
     >
-      <template v-slot:status="{item}">
+      <template #status="{item}">
         <td>
           <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
         </td>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 4d489c96..a92d6a80 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -14,44 +14,44 @@
                   :defaultSorter="{ name:'username', direction:'desc'}"
                   :defaultColumnFilter="{ role:'staff' }"
           >
-              <template #index-col="{index}">
-                <td
+            <template #index-column="{index}">
+              <td
+                @click="toggleDetails(index)"
+                style="cursor:pointer"
+                class="text-center"
+              >
+                <i
+                  class="icons font-lg d-block cui-chevron-right"
+                  style="transition: transform 0.4s"
+                  :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
+                ></i>
+              </td>
+            </template>
+            <template #status="{item}">
+              <td>
+                <CBadge :variant="getBadge(item.status)">
+                  {{item.status}}
+                </CBadge>
+              </td>
+            </template>
+            <template #show_details="{item, index}">
+              <td class="py-2">
+                <CButton
+                  variant="outline-primary"
+                  square
+                  size="sm"
                   @click="toggleDetails(index)"
-                  style="cursor:pointer"
-                  class="text-center"
-                >
-                  <i
-                    class="icons font-lg d-block cui-chevron-right"
-                    style="transition: transform 0.4s"
-                    :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
-                  ></i>
-                </td>
-              </template>
-              <template #status="{item}">
-                <td>
-                  <CBadge :variant="getBadge(item.status)">
-                    {{item.status}}
-                  </CBadge>
-                </td>
-              </template>
-              <template #show_details="{item, index}">
-                <td class="py-2">
-                  <CButton
-                    variant="outline-primary"
-                    square
-                    size="sm"
-                    @click="toggleDetails(index)"
-                    :textHtml="details.includes(index) ? 'Hide' : 'Show'"
-                  />
-                </td>
-              </template>
-              <template #details="{item, index}">
-                <CCollapse :show="details.includes(index)">
-                  <CCardBody>
-                    {{index + 1}} - {{item}}
-                  </CCardBody>
-                </CCollapse>
-              </template>
+                  :textHtml="details.includes(index) ? 'Hide' : 'Show'"
+                />
+              </td>
+            </template>
+            <template #details="{item, index}">
+              <CCollapse :show="details.includes(index)">
+                <CCardBody>
+                  {{index + 1}} - {{item}}
+                </CCardBody>
+              </CCollapse>
+            </template>
           </CTable>
         </CCard>
       </CCol>
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 4aa332f3..0e636d7b 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -163,7 +163,6 @@
               card
               pills
               vertical="4"
-              v-model="tabIndex[1]"
             >
               <CTab active>
                 <template slot="title">
@@ -208,7 +207,6 @@ export default {
   name: 'tabs',
   data () {
     return {
-      tabIndex: [0, 0],
       tabs: [
         'Calculator',
         'Shopping cart',
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index f01ee6bc..a673ac1c 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -42,9 +42,9 @@
       </CRow>
     </div>
     <!-- Modal Component -->
-    <CModal title="Modal title"
-            :visible="myModal"
-            @hide="myModal = false"
+    <CModal
+      title="Modal title"
+      :visible.sync="myModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -53,9 +53,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
-            size="lg"
-            v-model="largeModal"
+    <CModal
+      title="Modal title"
+      size="lg"
+      :visible.sync="largeModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -66,7 +67,7 @@
     </CModal>
     <CModal title="Modal title"
             size="sm"
-            v-model="smallModal"
+            :visible.sync="smallModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -76,9 +77,10 @@
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
 
-    <CModal title="Modal title"
-            class="modal-primary"
-            v-model="primaryModal"
+    <CModal
+      title="Modal title"
+      class="modal-primary"
+      :visible.sync="primaryModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -87,9 +89,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
-            class="modal-success"
-            v-model="successModal"
+    <CModal
+      title="Modal title"
+      class="modal-success"
+      :visible.sync="successModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -98,9 +101,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
-            class="modal-warning"
-            v-model="warningModal"
+    <CModal
+      title="Modal title"
+      class="modal-warning"
+      :visible.sync="warningModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -109,9 +113,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
-            class="modal-danger"
-            v-model="dangerModal"
+    <CModal
+      title="Modal title"
+      class="modal-danger"
+      :visible.sync="dangerModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -120,9 +125,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
-            class="modal-info"
-            v-model="infoModal"
+    <CModal
+      title="Modal title"
+      class="modal-info"
+      :visible.sync="infoModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -131,21 +137,22 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal v-model="darkModal"
-            :noBackdrop="false"
-            :noCloseOnBackdrop="false"
-            :noFade="false"
-            :centered="true"
-            title="Modal title 2"
-            size="lg"
-            variant="dark"
-            borderVariant="danger2"
-            addModalClasses="hehe1"
-            addDialogClasses="hehe2"
-            addContentClasses="hehe3"
-            :noHeader="false"
-            :noBody="false"
-            :noFooter="false"
+    <CModal
+      :visible.sync="darkModal"
+      :noBackdrop="false"
+      :noCloseOnBackdrop="false"
+      :noFade="false"
+      :centered="true"
+      title="Modal title 2"
+      size="lg"
+      variant="dark"
+      borderVariant="danger2"
+      addModalClasses="hehe1"
+      addDialogClasses="hehe2"
+      addContentClasses="hehe3"
+      :noHeader="false"
+      :noBody="false"
+      :noFooter="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,
@@ -153,11 +160,11 @@
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      <template v-slot:header="{hide}">
+      <template #header="{hide}">
         <h5 class="modal-title">Custom modal title</h5>
         <CButtonClose @click="hide()" class="text-white"/>
       </template>
-      <template v-slot:footer="{hide}">
+      <template #footer="{hide}">
         <CButton @click="hide()" variant="danger">Discard</CButton>
         <CButton @click="hide()" variant="success">Accept</CButton>
       </template>