Chore: v3-alpha.2 version merge

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",

src/App.vue

@@ -19,8 +19,6 @@ export default {
   @import '~simple-line-icons/scss/simple-line-icons.scss';
   /* Import Flag Icons Set */
   @import '~flag-icon-css/css/flag-icon.min.css';
-  /* Import Bootstrap Vue Styles */
-  @import '~bootstrap-vue/dist/bootstrap-vue.css';
   // Import Main styles for this application
   @import 'assets/scss/style';
 </style>

src/router/index.js

@@ -11,7 +11,7 @@ const Colors = () => import('@/views/theme/Colors')
 const Typography = () => import('@/views/theme/Typography')
 
 const Charts = () => import('@/views/Charts')
-const Widgets = () => import('@/views/Widgets')
+const Widgets = () => import('@/views/widgets/Widgets')
 
 // Views - Components
 const Cards = () => import('@/views/base/Cards')

src/views/Dashboard.vue

@@ -1,102 +1,6 @@
 <template>
   <div class="animated fadeIn">
-    <CRow>
+    <Widgets06/>
-      <CCol sm="6" lg="3">
-        <CWidget06 header="9.823" text="Members online">
-          <template slot="dropdown">
-            <CDropdown class="float-right"
-                       variant="transparent p-0"
-                       right
-                       buttonContent="<i class='icon-settings'></i>"
-                       tag="div"
-            >
-              <!-- <template slot="buttonContent">
-
-              </template> -->
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdown>
-          </template>
-          <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
-                         :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' label='Members' pointHoverColor='primary'/>
-        </CWidget06>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidget06 variant="info" header="9.823" text="Members online">
-          <CDropdown slot="dropdown"
-                     class="float-right"
-                     variant="transparent p-0"
-                     right
-                     no-caret
-                     buttonContent="<i class='icon-location-pin'></i>"
-                     tag="div"
-          >
-            <!-- <i slot="buttonContent"
-               class="icon-location-pin"
-            ></i> -->
-            <CDropdownItem>Action</CDropdownItem>
-            <CDropdownItem>Another action</CDropdownItem>
-            <CDropdownItem>Something else here...</CDropdownItem>
-            <CDropdownItem disabled>Disabled action</CDropdownItem>
-          </CDropdown>
-          <CSimplePointedChart class="px-3"
-                               :data="[1, 18, 9, 17, 34, 22, 11]"
-                               :labels="['January', 'February', 'March', 'April',  'May', 'June', 'July']"
-                               style="height:70px"
-                               label="Members"
-                               :options="{ elements: { line: { tension: 0.00001 }}}"
-                               pointHoverColor="info"
-          />
-        </CWidget06>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidget06 variant="warning" header="9.823" text="Members online">
-          <template slot='dropdown'>
-            <CDropdown class="float-right"
-                       variant="transparent p-0"
-                       right
-                       buttonContent="<i class='icon-settings'></i>"
-                       tag="div"
-             >
-
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdown>
-          </template>
-          <CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
-                         :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
-                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
-        </CWidget06>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidget06 variant="danger" header="9.823" text="Members online">
-          <template slot="dropdown">
-            <CDropdown class="float-right"
-                       variant="transparent p-0"
-                       right
-                       buttonContent="<i class='icon-settings'></i>"
-            >
-              <!-- <template slot="buttonContent">
-                <i class="icon-settings"></i>
-              </template> -->
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdown>
-          </template>
-          <CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                        label='Members' color='rgb(250, 152, 152)' style='height:70px' />
-        </CWidget06>
-      </CCol>
-    </CRow>
-
     <CCard>
       <CCardBody>
         <CRow>
@@ -151,36 +55,7 @@
         </CRow>
       </CCardFooter>
     </CCard>
-    <CRow>
+    <Widgets04/>
-      <CCol md="3" sm="6">
-        <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <CSimpleLineChart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <CSimpleLineChart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <CSimpleLineChart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04  variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
-          <CSimpleLineChart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-    </CRow><!--/.row-->
     <CRow>
       <CCol md="12">
         <CCard header="Traffic &amp; Sales" bodyWrapper>
@@ -459,6 +334,8 @@
 
 <script>
 import MainChartExample from './dashboard/MainChartExample'
+import Widgets06 from './widgets/Widgets06'
+import Widgets04 from './widgets/Widgets04'
 import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
 import CalloutChartExample from './dashboard/CalloutChartExample'
 
@@ -468,6 +345,8 @@ export default {
     MainChartExample,
     SocialBoxChartExample,
     CalloutChartExample,
+    Widgets06,
+    Widgets04
   },
   data: function () {
     return {

src/views/notifications/Alerts.vue

@@ -90,39 +90,60 @@
         <CCol cols="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
+              <i class="fa fa-align-justify"></i> Alerts
+              <small>dismissible</small>
             </CCardHeader>
             <CCardBody>
-              <div>
+              <CAlert
-                <CAlert :show="true" dismissible disabled>
-                  Dismissible Alert!
-                </CAlert>
-                <!-- :dismissible="{attrs: {disabled:'disabled', 'aria-label':'close it'}, class:'hehe' } -->
-                <CAlert :show="true"
-                        dismissible>
-                  Dismissible Alert!
-                  <CButtonClose slot-scope="{ dismiss }"
-                                @click="dismiss"
-                                aria-label="close it"
-                                style="color:red">
-                    ok
-                  </CButtonClose>
-                </CAlert>
-                <CAlert show dismissible>
-                  Dismissible Alert!
-                </CAlert>
-              <CAlert variant="danger"
                 dismissible
-                       fade
+                :show.sync="dismissibleAlerts[0]"
-                       :show="showDismissibleAlert"
-                       @dismissed="showDismissibleAlert=false"
               >
                 Dismissible Alert!
               </CAlert>
-              <CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
+
-                Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
+              <CAlert
+                dismissible
+                fade
+                :show.sync="dismissibleAlerts[1]"
+              >
+                Dismissible Alert with fade effect!
+              </CAlert>
+
+              <CAlert
+                :show.sync="dismissibleAlerts[2]"
+                dismissible
+                iconHtml="<i>Close</i>"
+              >
+                Dismissible Alert with custom icon!
+              </CAlert>
+
+              <CAlert
+                :show.sync="dismissibleAlerts[3]"
+                class="alert-dismissible"
+                v-slot="{dismiss}"
+              >
+                Dismissible Alert with custom button!
+                <CButton
+                  class="position-absolute bg-primary"
+                  style="right:10px;top: 50%;transform: translateY(-50%);"
+                  text="<i>Close</i>"
+                  @click="dismiss"
+                />
+              </CAlert>
+
+              <CAlert
+                :show.sync="dismissibleAlerts[4]"
+                dismissible="disabled"
+              >
+                Disabled dismissible Alert!
+              </CAlert>
+              <CButton
+                @click="showDismissibleAlerts"
+                variant="info"
+                class="m-1"
+              >
+                Show dismissible alerts
               </CButton>
-              </div>
             </CCardBody>
           </CCard>
           <CCard>
@@ -131,19 +152,20 @@
             </CCardHeader>
             <CCardBody>
               <div>
-                <CAlert :show="dismissCountDown"
+                <CAlert
+                  :show.sync="dismissCountDown"
                   dismissible
                   variant="warning"
-                         @dismissed="dismissCountdown=0"
+                  fade
-                         @dismiss-count-down="countDownChanged">
+                >
-                  Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
+                  Alert will dismiss after
+                  <strong>{{dismissCountDown}}</strong> seconds...
                 </CAlert>
 
-                <CAlert :show="dismissCountDown"
+                <CAlert :show.sync="dismissCountDown"
                          dismissible
                          variant="info"
-                         @dismissed="dismissCountdown=0"
+                >
-                         @dismiss-count-down="countDownChanged">
                   Alert will dismiss after {{dismissCountDown}} seconds...
                   <CProgress variant="info"
                               :max="dismissSecs"
@@ -169,8 +191,11 @@ export default {
   data () {
     return {
       dismissSecs: 10,
-      dismissCountDown: 0,
+      dismissCountDown: 10,
-      showDismissibleAlert: false
+      dismissibleAlerts: [true, true, true, true, true],
+      // dismissibleAlert: true,
+      // dismissibleAlert2: true,
+      // dismissibleAlert3: true
     }
   },
   methods: {
@@ -179,6 +204,14 @@ export default {
     },
     showAlert () {
       this.dismissCountDown = this.dismissSecs
+    },
+    showDismissibleAlerts () {
+      // this.dismissibleAlert = true
+      // this.dismissibleAlert2 = true
+      // this.dismissibleAlert3 = true
+      this.dismissibleAlerts = this.dismissibleAlerts.map(
+        alert => alert = true
+      )
     }
   }
 }

src/views/widgets/Widgets.vue

@@ -91,58 +91,8 @@
       </CCol>
 
     </CRow><!--/.row-->
-    <CRow>
+    <Widgets04 noCharts/>
-      <CCol md="3" sm="6">
+    <Widgets04/>
-        <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
-       </CCol>
-       <CCol md="3" sm="6" class="codeContainer">
-        <CWidget04  variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
-          <i slot="icon" class="fa fa-battery-1"></i>
-        </CWidget04>
-       </CCol>
-    </CRow><!--/.row-->
-    <CRow>
-      <CCol md="3" sm="6">
-        <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <CSimpleLineChart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <CSimpleLineChart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <CSimpleLineChart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant='google-plus'
-                    rightHeader='894'
-                    rightFooter='followers'
-                    leftHeader='92' leftFooter='circles'>
-          <CSimpleLineChart chartId="google-plus"
-                               :data='[35, 23, 56, 22, 97, 23, 64]'
-                               label='Followers'
-                               :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                               style='height:100px'
-                               color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-    </CRow><!--/.row-->
     <CCardGroup class="mb-4">
       <CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
       <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
@@ -202,9 +152,13 @@
     <CRow>
       <CCol sm="6" lg="3">
         <CWidget06 header="9.823" text="Members online">
-          <template slot='dropdown'>
+          <template #dropdown>
-            <CDropdown class="float-right" variant="transparent p-0" right>
+            <CDropdown
-              <template slot="buttonContent">
+              class="float-right"
+              variant="transparent p-0"
+              placement="bottom-end"
+            >
+              <template #buttonContent>
                 <i class="icon-settings"></i>
               </template>
               <CDropdownItem>Action</CDropdownItem>
@@ -219,8 +173,16 @@
         </CWidget06>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget06 variant="info" header="9.823" text="Members online">
+        <CWidget06
-          <CDropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
+          variant="info"
+          header="9.823"
+          text="Members online"
+        >
+          <template #dropdown>
+            <CDropdown
+              class="float-right"
+              variant="transparent p-0"
+             right no-caret>
               <i slot="buttonContent"
                  class="icon-location-pin"
               ></i>
@@ -229,6 +191,8 @@
               <CDropdownItem>Something else here...</CDropdownItem>
               <CDropdownItem disabled>Disabled action</CDropdownItem>
             </CDropdown>
+          </template>
+
           <CSimplePointedChart class="px-3"
                                :data="[1, 18, 9, 17, 34, 22, 11]"
                                :labels="['January', 'February', 'March', 'April',  'May', 'June', 'July']"
@@ -350,7 +314,11 @@
 </template>
 
 <script>
+import Widgets04 from './Widgets04'
 export default {
   name: 'Widgets',
+  components: {
+    Widgets04
+  }
 }
 </script>

src/views/widgets/Widgets04.vue

@@ -0,0 +1,126 @@
+<template functional>
+  <CRow>
+    <template v-if="!props.noCharts">
+      <CCol md="3" sm="6">
+        <CWidget04
+          variant="facebook"
+          rightHeader="89k"
+          rightFooter="friends"
+          leftHeader="459"
+          leftFooter="feeds"
+        >
+          <CSimpleLineChart
+            chartId="facebook"
+            :data="[65, 59, 84, 84, 51, 55, 40]"
+            label="Friends"
+            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+            style="height:100px"
+            color="rgba(255,255,255,.1)"
+          />
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04
+          variant="twitter"
+          rightHeader="973k"
+          rightFooter="followers"
+          leftHeader="1.792"
+          leftFooter="tweets"
+        >
+          <CSimpleLineChart
+            chartId="twitter"
+            :data="[1, 13, 9, 17, 34, 41, 38]"
+            label="Followers"
+            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+            style="height:100px"
+            color="rgba(255,255,255,.1)"
+          />
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04
+          variant="linkedin"
+          rightHeader="500+"
+          rightFooter="contracts"
+          leftHeader="292"
+          leftFooter="feeds"
+        >
+          <CSimpleLineChart
+            chartId="linkedIn"
+            :data="[78, 81, 80, 45, 34, 12, 40]"
+            label="Contracts"
+            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+            style="height:100px"
+            color="rgba(255,255,255,.1)"
+          />
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04
+          variant="google-plus"
+          rightHeader="894"
+          rightFooter="followers"
+          leftHeader="92"
+          leftFooter="circles"
+        >
+          <CSimpleLineChart
+            chartId="google-plus"
+            :data="[35, 23, 56, 22, 97, 23, 64]"
+            label="Followers"
+            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+            style="height:100px"
+            color="rgba(255,255,255,.1)"
+          />
+        </CWidget04>
+      </CCol>
+    </template>
+    <template v-else>
+      <CCol md="3" sm="6">
+        <CWidget04
+          variant="facebook"
+          rightHeader="89k"
+          rightFooter="friends"
+          leftHeader="459"
+          leftFooter="feeds"
+        />
+      </CCol>
+      <CCol md="3" sm="6">
+        <CWidget04
+          variant="twitter"
+          rightHeader="973k"
+          rightFooter="followers"
+          leftHeader="1.792"
+          leftFooter="tweets"
+        />
+      </CCol>
+      <CCol md="3" sm="6">
+        <CWidget04
+          variant="linkedin"
+          rightHeader="500+"
+          rightFooter="contracts"
+          leftHeader="292"
+          leftFooter="feeds"
+        />
+      </CCol>
+      <CCol md="3" sm="6">
+        <CWidget04
+          variant="warning"
+          iconClasses="fa fa-battery-1"
+          rightHeader="0:57"
+          rightFooter="time"
+          leftHeader="17"
+          leftFooter="percentage"
+        />
+      </CCol>
+    </template>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: 'Widgets04',
+  props: {
+    noCharts: Boolean
+  }
+}
+</script>

src/views/widgets/Widgets06.vue

@@ -0,0 +1,130 @@
+<template>
+  <CRow>
+    <CCol sm="6" lg="3">
+      <CWidget06 header="9.823" text="Members online">
+
+        <template #dropdown>
+          <CDropdown
+            class="float-right"
+            variant="transparent p-0"
+            placement="bottom-end"
+            buttonContent="<i class='icon-settings'></i>"
+          >
+            <CDropdownItem>Action</CDropdownItem>
+            <CDropdownItem>Another action</CDropdownItem>
+            <CDropdownItem>Something else here...</CDropdownItem>
+            <CDropdownItem disabled>Disabled action</CDropdownItem>
+          </CDropdown>
+        </template>
+
+        <CSimplePointedChart
+          class="px-3"
+          :data="[65, 59, 84, 84, 51, 55, 40]"
+          :labels="months"
+          style="height:70px"
+          label="Members"
+          pointHoverColor="primary"
+        />
+      </CWidget06>
+    </CCol>
+    <CCol sm="6" lg="3">
+      <CWidget06 variant="info" header="9.823" text="Members online">
+        <template #dropdown>
+          <CDropdown
+            class="float-right"
+            variant="transparent p-0"
+            placement="bottom-end"
+            noCaret
+            buttonContent="<i class='icon-location-pin'></i>"
+          >
+            <CDropdownItem>Action</CDropdownItem>
+            <CDropdownItem>Another action</CDropdownItem>
+            <CDropdownItem>Something else here...</CDropdownItem>
+            <CDropdownItem disabled>Disabled action</CDropdownItem>
+          </CDropdown>
+        </template>
+        <CSimplePointedChart
+          class="px-3"
+          :data="[1, 18, 9, 17, 34, 22, 11]"
+          :labels="months"
+          style="height:70px"
+          label="Members"
+          :options="{ elements: { line: { tension: 0.00001 }}}"
+          pointHoverColor="info"
+        />
+      </CWidget06>
+    </CCol>
+    <CCol sm="6" lg="3">
+      <CWidget06
+        variant="warning"
+        header="9.823"
+        text="Members online"
+      >
+
+        <template #dropdown>
+          <CDropdown
+            class="float-right"
+            variant="transparent p-0"
+            placement="bottom-end"
+            buttonContent="<i class='icon-settings'></i>"
+          >
+            <CDropdownItem>Action</CDropdownItem>
+            <CDropdownItem>Another action</CDropdownItem>
+            <CDropdownItem>Something else here...</CDropdownItem>
+            <CDropdownItem disabled>Disabled action</CDropdownItem>
+          </CDropdown>
+        </template>
+
+        <CSimpleLineChart
+          chartId="CWidget06_3"
+          :data="[78, 81, 80, 45, 34, 12, 40]"
+          :labels="months"
+          style="height:70px"
+          color="rgba(255,255,255,.2)"
+          label="Members"
+          :options="{elements: {line: {borderWidth: 2.5}}}"
+          pointHoverColor="warning"
+        />
+      </CWidget06>
+    </CCol>
+    <CCol sm="6" lg="3">
+      <CWidget06
+        variant="danger"
+        header="9.823"
+        text="Members online"
+      >
+
+        <template #dropdown>
+          <CDropdown
+            class="float-right"
+            variant="transparent p-0"
+            placement="bottom-end"
+            buttonContent="<i class='icon-settings'></i>"
+          >
+            <CDropdownItem>Action</CDropdownItem>
+            <CDropdownItem>Another action</CDropdownItem>
+            <CDropdownItem>Something else here...</CDropdownItem>
+            <CDropdownItem disabled>Disabled action</CDropdownItem>
+          </CDropdown>
+        </template>
+
+        <CSimpleBarChart
+          chartId="CWidget06_4"
+          :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
+          label="Members"
+          color="rgb(250, 152, 152)"
+          style="height:70px"
+        />
+      </CWidget06>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: 'Widgets06',
+  props: {
+    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
+  }
+}
+</script>