refacor: update dashboard to coreui-vue changes

coreui · Nov 8, 2019 · 1c7b133 · 1c7b133
1 parent cb5f6ec
commit 1c7b133
Show file tree

Hide file tree

Showing 42 changed files with 549 additions and 4,034 deletions.
diff --git a/src/containers/TheHeader.vue b/src/containers/TheHeader.vue
@@ -19,19 +19,37 @@
       :wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
     />
     <CHeaderNav class="d-md-down-none mr-auto">
-      <CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
-      <CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
-      <CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/dashboard">
+        <CHeaderNavLink>
+          Dashboard
+        </CHeaderNavLink>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/users" exact>
+        <CHeaderNavLink>
+          Users
+        </CHeaderNavLink>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="px-3">
+        <CHeaderNavLink>
+          Settings
+        </CHeaderNavLink>
+      </CHeaderNavItem>
     </CHeaderNav>
     <CHeaderNav class="mr-4">
       <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-bell"></i>
+        <CHeaderNavLink>
+          <i class="cui-bell"></i>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-list"></i>
+        <CHeaderNavLink>
+          <i class="cui-list"></i>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-envelope-open"></i>
+        <CHeaderNavLink>
+          <i class="cui-envelope-open"></i>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <TheHeaderDropdownAccnt/>
     </CHeaderNav>

diff --git a/src/containers/TheHeaderDropdownAccnt.vue b/src/containers/TheHeaderDropdownAccnt.vue
@@ -1,20 +1,19 @@
 <template>
   <CDropdown
-    nav
-    no-caret
+    inNav
     class="c-header-nav-items"
     placement="bottom-end"
     add-menu-classes="pt-0"
   >
     <template #toggler>
-      <CHeaderNavItem only-link>
+      <CHeaderNavLink>
         <div class="c-avatar">
           <img
             src="img/avatars/6.jpg"
             class="c-avatar-img "
           />
         </div>
-      </CHeaderNavItem>
+      </CHeaderNavLink>
     </template>
     <CDropdownHeader tag="div" class="text-center" color="light">
       <strong>Account</strong>

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -238,10 +238,10 @@
               </div>
               <div class="legend text-center">
                 <small>
-                  <sup><CBadge pill color="info">&nbsp;</CBadge></sup>
+                  <sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
                   New clients
                   &nbsp;&nbsp;
-                  <sup><CBadge pill color="danger">&nbsp;</CBadge></sup>
+                  <sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
                   Recurring clients
                 </small>
               </div>
@@ -310,7 +310,7 @@
                 <div class="progress-group">
                   <div class="progress-group-header">
                     <CIcon
-                      name="socialFacebook"
+                      name="facebook"
                       height="17"
                       class="progress-group-icon"
                     />
@@ -330,7 +330,7 @@
                 <div class="progress-group">
                   <div class="progress-group-header">
                     <CIcon
-                      name="socialTwitter"
+                      name="twitter"
                       height="17"
                       class="progress-group-icon"
                     />
@@ -350,7 +350,7 @@
                 <div class="progress-group">
                   <div class="progress-group-header">
                     <CIcon
-                      name="socialLinkedin"
+                      name="linkedin"
                       height="17"
                       class="progress-group-icon"
                     />
@@ -376,7 +376,7 @@
             </CCol>
           </CRow>
           <br/>
-          <CTable
+          <CDataTable
             class="mb-0 table-outline"
             hover
             :items="tableItems"
@@ -441,7 +441,7 @@
               <div class="small text-muted">Last login</div>
               <strong>{{item.activity}}</strong>
             </td>
-          </CTable>
+          </CDataTable>
         </CCard>
       </CCol>
     </CRow>

diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
@@ -64,7 +64,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge pill color="danger" class="float-right">42</CBadge>
+            <CBadge shape="pill" color="danger" class="float-right">42</CBadge>
           </CCardHeader>
           <CCardBody>
             {{loremIpsum}}

diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
@@ -24,17 +24,17 @@
             height="400px"
           >
             <CCarouselItem
-            captionHeader="First Slide"
-              image="https://lorempixel.com/1024/480/technics/2/"
-            captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
+              captionHeader="First Slide"
+              image="https://picsum.photos/1024/480/?image=52"
+              captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
             />
             <CCarouselItem
-            captionHeader="Blank page"
-              :image="{ blankColor: 'grey' }"
-            captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
+              captionHeader="Blank page"
+              :image="{ placeholderColor: 'grey' }"
+              captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
             />
             <CCarouselItem
-              image="https://lorempixel.com/1024/480/technics/8/"
+            image="https://picsum.photos/1024/480/?image=54"
             />
           </CCarousel>
         </CCardBody>

diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
@@ -190,13 +190,13 @@
                   </CCol>
                   <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CInputCheckbox
-                      v-for="option in options"
-                      :key="option"
+                      v-for="(option, optionIndex) in options"
+                      :key="key + option"
                       :label="option"
                       :value="option"
                       :custom="key > 1"
                       :name="`Option 1${key}`"
-                      :checked="Math.random() > 0.6"
+                      :checked="optionIndex === key"
                       :inline="key % 2 === 1"
                     />
                   </CCol>
@@ -210,7 +210,7 @@
                   <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CInputRadio
                       v-for="(option, optionIndex) in options"
-                      :key="option"
+                      :key="key + option"
                       :label="option"
                       type="radio"
                       :value="option"

diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
@@ -20,7 +20,7 @@
           <CCardBody>
             <CJumbotron>
               <h1 class="display-3">Bootstrap 4</h1>
-              <p class="lead">Bootstrap 4 Components for Vue.js 2</p>
+              <p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
               <p>For more information visit website</p>
               <CButton color="primary" href="#">More Info</CButton>
             </CJumbotron>

diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
@@ -113,19 +113,19 @@
                 class="d-flex justify-content-between align-items-center"
               >
                 Cras justo odio
-                <CBadge color="primary" pill>14</CBadge>
+                <CBadge color="primary" shape="pill">14</CBadge>
               </CListGroupItem>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
               >
                 Dapibus ac facilisis in
-                <CBadge color="primary" pill>2</CBadge>
+                <CBadge color="primary" shape="pill">2</CBadge>
               </CListGroupItem>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
               >
                 Morbi leo risus
-                <CBadge color="primary" pill>1</CBadge>
+                <CBadge color="primary" shape="pill">1</CBadge>
               </CListGroupItem>
             </CListGroup>
           </CCardBody>

diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
@@ -51,7 +51,7 @@
         <small>tab style</small>
       </CCardHeader>
       <CCardBody>
-        <CNav tabs>
+        <CNav variant="tabs">
           <CNavItem active>
             Active
           </CNavItem>
@@ -72,7 +72,7 @@
         <small>pill style</small>
       </CCardHeader>
       <CCardBody>
-        <CNav pills>
+        <CNav variant="pills">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Another Link</CNavItem>
@@ -87,7 +87,7 @@
         <small>fill tabs</small>
       </CCardHeader>
       <CCardBody>
-        <CNav fill tabs>
+        <CNav fill variant="tabs">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Link with a long name </CNavItem>
@@ -102,7 +102,7 @@
         <small>justified tabs</small>
       </CCardHeader>
       <CCardBody>
-        <CNav justified tabs>
+        <CNav justified variant="tabs">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Link with a long name </CNavItem>