refactor: small fixes and refactors, update coreui styles

package.json

@@ -14,7 +14,7 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "3.0.0-alpha.13",
+    "@coreui/coreui": "3.0.0-alpha.14",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
     "@coreui/coreui-vue-chartjs": "../coreui-vue-chartjs",
     "@coreui/icons": "github:coreui/coreui-icons#v1-alpha",

src/containers/TheHeader.vue

@@ -2,7 +2,7 @@
   <CHeader fixed with-subheader light>
     <CSidebarToggler 
       class="c-header-toggler ml-3"
-      v-c-emit-root-event:c-sidebar-toggle
+      v-c-emit-root-event:toggle-sidebar
     />
     <img
       class="c-header-brand mx-auto d-lg-none" 
@@ -11,12 +11,12 @@
       height="46" 
       alt="CoreUI Logo"
     />
-    <ul class="c-header-nav d-md-down-none mr-auto">
+    <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>
-    </ul>
-    <ul class="c-header-nav mr-4">
+    </CHeaderNav>
+    <CHeaderNav class="mr-4">
       <CHeaderNavItem class="d-md-down-none mx-2">
         <i class="cui-bell"></i>
       </CHeaderNavItem>
@@ -27,7 +27,7 @@
         <i class="cui-envelope-open"></i>
       </CHeaderNavItem>
       <TheHeaderDropdownAccnt/>
-    </ul>
+    </CHeaderNav>
     <div class="c-subheader px-3">
       <CBreadcrumbRouter class="border-0"/>
     </div>

src/containers/TheSidebar.vue

@@ -13,7 +13,7 @@
     <CRenderFunction :contentToRender="nav"/>
     <!-- <CSidebarFooter/> -->
     <CSidebarMinimizer 
-      class="d-md-down-none" 
+      class="d-md-down-none c-sidebar-minimized-unfoldable"
       @click.native="minimize = !minimize"
     />
   </CSidebar>
@@ -26,8 +26,12 @@ export default {
   data () {
     return {
       minimize: false,
-      nav
+      nav,
+      show: null
     }
+  },
+  mounted () {
+    this.$root.$on('toggle-sidebar', () => this.show = !this.show)
   }
 }
 </script>

src/views/base/Cards.vue

@@ -66,7 +66,9 @@
             Card with label
             <CBadge pill variant="danger" class="float-right">42</CBadge>
           </CCardHeader>
-          <CCardBody :body-html="loremIpsum"/>
+          <CCardBody>
+            {{loremIpsum}}
+          </CCardBody>
         </CCard>
       </CCol>
     </CRow>

src/views/base/Forms.vue

@@ -210,14 +210,14 @@
                   </CCol>
                   <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CFormRadio
-                      v-for="option in options"
+                      v-for="(option, optionIndex) in options"
                       :key="option"
                       :label="option"
                       type="radio"
                       :value="option"
                       :custom="key > 1"
                       :name="`Option 1${key}`"
-                      checked="Option 1"
+                      :checked="optionIndex === key"
                       :inline="key % 2 === 1"
                     />
                   </CCol>
@@ -561,7 +561,7 @@
             <CFormInput placeholder="Username">
               <template #prepend>
                 <CDropdown
-                  button-html="Action"
+                  togglerText="Action"
                   variant="primary"
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -578,7 +578,7 @@
             >
               <template #append>
                 <CDropdown
-                  button-html="Action"
+                  togglerText="Action"
                   variant="primary"
                   right
                 >
@@ -593,7 +593,7 @@
 
               <template #prepend>
                 <CDropdown
-                  button-html="Split"
+                  togglerText="Split"
                   variant="primary"
                   split
                 >
@@ -606,7 +606,7 @@
 
               <template #append>
                 <CDropdown
-                  button-html="Action"
+                  togglerText="Action"
                   variant="primary"
                   right
                 >
@@ -861,7 +861,11 @@ export default {
       options: ['Option 1', 'Option 2', 'Option 3'],
       selectOptions: [
         'Option 1', 'Option 2', 'Option 3',
-        { value: ['some value', 'another value'], label: 'Option 4' }],
+        { 
+          value: ['some value', 'another value'], 
+          label: 'Selected option'
+        }
+      ],
       selectedOption: ['some value', 'another value'],
 
       formCollapsed: true,

src/views/base/Navbars.vue

@@ -20,7 +20,7 @@
           toggleable="md"
           variant="info"
         >
-          <CNavbarToggle @click="show=!show"/>
+          <CNavbarToggler @click="show=!show"/>
           <CNavbarBrand href="#">NavBar</CNavbarBrand>
           <CCollapse :show="show" navbar>
             <CNavbarNav>
@@ -42,7 +42,7 @@
               </CForm>
 
               <CDropdown
-                button-html="Lang"
+                toggler-text="Lang"
                 nav
                 placement="bottom-end"
               >
@@ -54,7 +54,7 @@
 
               <CDropdown
                 nav
-                buttonHtml="<em>User</em>"
+                toggler-text="User"
                 placement="bottom-end"
               >
                 <CDropdownItem>Profile</CDropdownItem>
@@ -111,7 +111,7 @@
               <CNavItem href="#">Link</CNavItem>
               <!-- Navbar dropdowns -->
               <CDropdown
-                button-html="Lang"
+                toggler-text="Lang"
                 right
                 nav
               >
@@ -121,7 +121,7 @@
                 <CDropdownItem>FA</CDropdownItem>
               </CDropdown>
               <CDropdown
-                button-html="User"
+                toggler-text="User"
                 right
                 nav
               >

src/views/base/ProgressBars.vue

@@ -16,7 +16,7 @@
         </div>
       </CCardHeader>
       <CCardBody>
-        <CProgress :value="counter" :max="max" show-progress animated></CProgress>
+        <CProgress :value="counter" :max="max" show-percentage animated></CProgress>
         <CProgress class="mt-1" :max="max" show-value>
           <CProgressBar :value="counter*(6/10)" variant="success"/>
           <CProgressBar :value="counter*(2.5/10)" variant="warning"/>
@@ -41,11 +41,11 @@
         <h6>Value label</h6>
         <CProgress :value="value" :max="max2" show-value class="mb-3"/>
         <h6>Progress label</h6>
-        <CProgress :value="value" :max="max2" show-progress class="mb-3"/>
+        <CProgress :value="value" :max="max2" show-percentage class="mb-3"/>
         <h6>Value label with precision</h6>
         <CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
         <h6>Progress label with precision</h6>
-        <CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
+        <CProgress :value="value" :max="max2" :precision="2" show-percentage class="mb-3"/>
       </CCardBody>
     </CCard>
     <CCard>
@@ -71,10 +71,10 @@
       </CCardHeader>
       <CCardBody>
         <h6>Default height</h6>
-        <CProgress :value="value3" show-progress class="mb-3"/>
+        <CProgress :value="value3" show-percentage class="mb-3"/>
         <h6>Custom heights</h6>
-        <CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
-        <CProgress height="20px" :value="value3" show-progress class="mb-2"/>
+        <CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
+        <CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
         <CProgress height="2px" :value="value3"/>
       </CCardBody>
     </CCard>
@@ -184,7 +184,7 @@
           <CProgressBar variant="success" :value="values[1]"/>
           <CProgressBar variant="info" :value="values[2]"/>
         </CProgress>
-        <CProgress show-progress :max="max3" class="mb-3">
+        <CProgress show-percentage :max="max3" class="mb-3">
           <CProgressBar variant="primary" :value="values[0]"/>
           <CProgressBar variant="success" :value="values[1]"/>
           <CProgressBar variant="info" :value="values[2]"/>
@@ -195,9 +195,9 @@
           <CProgressBar variant="info" :value="values[2]"/>
         </CProgress>
         <CProgress :max="max3" class="mb-3">
-          <CProgressBar variant="primary" :value="values[0]" show-progress/>
-          <CProgressBar variant="success" :value="values[1]" animated show-progress/>
-          <CProgressBar variant="info" :value="values[2]" striped show-progress/>
+          <CProgressBar variant="primary" :value="values[0]" show-percentage/>
+          <CProgressBar variant="success" :value="values[1]" animated show-percentage/>
+          <CProgressBar variant="info" :value="values[2]" striped show-percentage/>
         </CProgress>
       </CCardBody>
     </CCard>

src/views/base/Table.vue

@@ -8,7 +8,7 @@
       :fixed="fixed"
       :items="items"
       :fields="fields"
-      :per-page="small ? 10 : 5"
+      :items-per-page="small ? 10 : 5"
       :dark="dark"
       pagination
     >

src/views/buttons/ButtonGroups.vue

@@ -125,78 +125,72 @@
           </div> -->
         </CCardHeader>
         <CCardBody>
-          <div>
-            <CButtonToolbar aria-label="Toolbar with button groups">
-              <CButtonGroup class="mx-1">
-                <CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
-                <CButton variant="secondary">&lsaquo;</CButton>
-              </CButtonGroup>
-              <CButtonGroup class="mx-1">
-                <CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
-                <CButton variant="secondary">Undo</CButton>
-                <CButton variant="secondary">Redo</CButton>
-              </CButtonGroup>
-              <CButtonGroup class="mx-1">
-                <CButton variant="secondary">&rsaquo;</CButton>
-                <CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
-              </CButtonGroup>
-            </CButtonToolbar>
-          </div>
+          <CButtonToolbar aria-label="Toolbar with button groups" >
+            <CButtonGroup class="mx-1">
+              <CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
+              <CButton variant="secondary">&lsaquo;</CButton>
+            </CButtonGroup>
+            <CButtonGroup class="mx-1">
+              <CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
+              <CButton variant="secondary">Undo</CButton>
+              <CButton variant="secondary">Redo</CButton>
+            </CButtonGroup>
+            <CButtonGroup class="mx-1">
+              <CButton variant="secondary">&rsaquo;</CButton>
+              <CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
+            </CButtonGroup>
+          </CButtonToolbar>
           <hr class="d-sm-down-none"/>
-          <div>
-            <CButtonToolbar
-              aria-label="Toolbar with button groups and input groups"
-              class="d-sm-down-none"
-            >
-              <CButtonGroup size="sm" class="mx-1">
-                <CButton variant="secondary">New</CButton>
-                <CButton variant="secondary">Edit</CButton>
-              </CButtonGroup>
-              <CFormInput
-                class="mb-0 w-25 mx-1"
-                size="sm"
-                prepend-html="$"
-                append-html=".00"
-                value="100"
-              />
-              <CFormSelect
-                class="mb-0 w-25 mx-1"
-                size="sm"
-                prepend-html="Size"
-                value="Medium"
-                :options="['Large','Medium','Small']"
-                custom
-              />
-              <CButtonGroup size="sm" class="mx-1">
-                <CButton variant="secondary">Save</CButton>
-                <CButton variant="secondary">Cancel</CButton>
-              </CButtonGroup>
-            </CButtonToolbar>
-          </div>
+          <CButtonToolbar
+            aria-label="Toolbar with button groups and input groups"
+            class="d-sm-down-none"
+          >
+            <CButtonGroup size="sm" class="mx-1">
+              <CButton variant="secondary">New</CButton>
+              <CButton variant="secondary">Edit</CButton>
+            </CButtonGroup>
+            <CFormInput
+              class="mb-0 w-25 mx-1"
+              size="sm"
+              prepend-html="$"
+              append-html=".00"
+              value="100"
+            />
+            <CFormSelect
+              class="mb-0 w-25 mx-1"
+              size="sm"
+              prepend-html="Size"
+              value="Medium"
+              :options="['Large','Medium','Small']"
+              custom
+            />
+            <CButtonGroup size="sm" class="mx-1">
+              <CButton variant="secondary">Save</CButton>
+              <CButton variant="secondary">Cancel</CButton>
+            </CButtonGroup>
+          </CButtonToolbar>
           <hr/>
-          <div>
-            <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
-              <CButtonGroup class="mx-1 d-sm-down-none">
-                <CButton variant="secondary">New</CButton>
-                <CButton variant="secondary">Edit</CButton>
-                <CButton variant="secondary">Undo</CButton>
-              </CButtonGroup>
-              <CDropdown
-                variant="secondary"
-                class="mx-1"
-                placement="bottom-end"
-                button-content="Menu"
-              >
-                <CDropdownItem>Item 1</CDropdownItem>
-                <CDropdownItem>Item 2</CDropdownItem>
-                <CDropdownItem>Item 3</CDropdownItem>
-              </CDropdown>
-              <CButtonGroup class="mx-1">
-                <CButton variant="secondary">Save</CButton>
-                <CButton variant="secondary">Cancel</CButton>
-              </CButtonGroup>
-            </CButtonToolbar>
-          </div>
+          <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
+            <CButtonGroup class="mx-1 d-sm-down-none">
+              <CButton variant="secondary">New</CButton>
+              <CButton variant="secondary">Edit</CButton>
+              <CButton variant="secondary">Undo</CButton>
+            </CButtonGroup>
+            <CDropdown
+              variant="secondary"
+              class="mx-1"
+              placement="bottom-end"
+              button-content="Menu"
+            >
+              <CDropdownItem>Item 1</CDropdownItem>
+              <CDropdownItem>Item 2</CDropdownItem>
+              <CDropdownItem>Item 3</CDropdownItem>
+            </CDropdown>
+            <CButtonGroup class="mx-1">
+              <CButton variant="secondary">Save</CButton>
+              <CButton variant="secondary">Cancel</CButton>
+            </CButtonGroup>
+          </CButtonToolbar>
         </CCardBody>
       </CCard>
     </CCol>

src/views/notifications/Modals.vue

@@ -54,7 +54,7 @@
     <!-- Modal Component -->
     <CModal
       title="Modal title"
-      :visible.sync="myModal"
+      :show.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,
@@ -66,7 +66,7 @@
     <CModal
       title="Modal title"
       size="lg"
-      :visible.sync="largeModal"
+      :show.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,
@@ -78,7 +78,7 @@
     <CModal
       title="Modal title"
       size="sm"
-      :visible.sync="smallModal"
+      :show.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,
@@ -90,7 +90,7 @@
 
     <CModal
       title="Modal title"
-      :visible.sync="primaryModal"
+      :show.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,
@@ -102,7 +102,7 @@
     <CModal
       title="Modal title"
       variant="success"
-      :visible.sync="successModal"
+      :show.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,
@@ -114,7 +114,7 @@
     <CModal
       title="Modal title"
       variant="warning"
-      :visible.sync="warningModal"
+      :show.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,
@@ -126,7 +126,7 @@
     <CModal
       title="Modal title"
       variant="danger"
-      :visible.sync="dangerModal"
+      :show.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,
@@ -138,7 +138,7 @@
     <CModal
       title="Modal title"
       variant="info"
-      :visible.sync="infoModal"
+      :show.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,
@@ -148,7 +148,7 @@
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
     <CModal
-      :visible.sync="darkModal"
+      :show.sync="darkModal"
       :no-close-on-backdrop="true"
       :centered="true"
       title="Modal title 2"
@@ -166,8 +166,8 @@
         <CButtonClose @click="hide()" class="text-white"/>
       </template>
       <template #footer="{hide}">
-        <CButton @click="hide()" variant="danger">Discard</CButton>
-        <CButton @click="hide(true)" variant="success">Accept</CButton>
+        <CButton @click="darkModal = false" variant="danger">Discard</CButton>
+        <CButton @click="darkModal = false" variant="success">Accept</CButton>
       </template>
     </CModal>
   </div>

src/views/users/UsersData.js

@@ -1,30 +1,31 @@
 const usersData = [
-  {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
-  {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
-  {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
-  {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
-  {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
-  {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
-  {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
-  {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
-  {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
-  {id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
-  {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
-  {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
-  {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
-  {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
-  {id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
-  {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
-  {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
-  {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
-  {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
-  {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
-  {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
-  {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
-  {id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
-  {id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
-  {id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
-  {id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
+  { username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
+  { username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-success'},
+  { username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
+  { username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
+  { username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
 ]
 
 export default usersData
+
+