refactor: refactoring template
This commit is contained in:
woothu
+8
-1
@@ -1,5 +1,12 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
['@vue/app', {
|
||||
polyfills: [
|
||||
'es6.promise', // already default included now
|
||||
'es6.array.iterator', // already default included now
|
||||
'es6.symbol',
|
||||
'es6.object.assign'
|
||||
]
|
||||
}]
|
||||
]
|
||||
}
|
||||
+9
-9
@@ -14,13 +14,13 @@
|
||||
"test:e2e": "vue-cli-service test:e2e"
|
||||
},
|
||||
"dependencies": {
|
||||
"@coreui/coreui": "^2.0.14",
|
||||
"@coreui/coreui": "^2.0.20",
|
||||
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
|
||||
"@coreui/icons": "0.3.0",
|
||||
"@coreui/vue": "^2.0.2",
|
||||
"@coreui/vue": "github:coreui/coreui-vue#vue_cli3",
|
||||
"bootstrap": "^4.1.3",
|
||||
"bootstrap-vue": "^2.0.0-rc.11",
|
||||
"chart.js": "^2.7.2",
|
||||
"chart.js": "^2.7.3",
|
||||
"core-js": "^2.5.7",
|
||||
"css-vars-ponyfill": "^1.11.1",
|
||||
"flag-icon-css": "^3.2.0",
|
||||
@@ -33,17 +33,17 @@
|
||||
"vue-router": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.4",
|
||||
"@vue/cli-plugin-e2e-nightwatch": "^3.0.4",
|
||||
"@vue/cli-plugin-eslint": "^3.0.4",
|
||||
"@vue/cli-plugin-unit-jest": "^3.0.4",
|
||||
"@vue/cli-service": "^3.0.4",
|
||||
"@vue/cli-plugin-babel": "^3.0.5",
|
||||
"@vue/cli-plugin-e2e-nightwatch": "^3.0.5",
|
||||
"@vue/cli-plugin-eslint": "^3.0.5",
|
||||
"@vue/cli-plugin-unit-jest": "^3.0.5",
|
||||
"@vue/cli-service": "^3.0.5",
|
||||
"@vue/test-utils": "^1.0.0-beta.25",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"babel-jest": "^23.6.0",
|
||||
"growl": "^1.10.5",
|
||||
"https-proxy-agent": "^2.2.1",
|
||||
"node-sass": "^4.9.3",
|
||||
"node-sass": "^4.9.4",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue-template-compiler": "^2.5.17"
|
||||
},
|
||||
|
||||
@@ -102,7 +102,7 @@
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<b-badge variant="success" class="avatar-status"></b-badge>
|
||||
<CBadge variant="success" class="avatar-status"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -117,7 +117,7 @@
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<b-badge variant="danger" class="avatar-status"></b-badge>
|
||||
<c-badge variant="danger" class="avatar-status"></c-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -132,7 +132,7 @@
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<b-badge variant="info" class="avatar-status"></b-badge>
|
||||
<c-badge variant="info" class="avatar-status"></c-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -147,7 +147,7 @@
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<b-badge variant="warning" class="avatar-status"></b-badge>
|
||||
<c-badge variant="warning" class="avatar-status"></c-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -162,7 +162,7 @@
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<b-badge variant="dark" class="avatar-status"></b-badge>
|
||||
<c-badge variant="dark" class="avatar-status"></c-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<SidebarMinimizer/>
|
||||
</AppSidebar>
|
||||
<main class="main">
|
||||
<Breadcrumb :list="list"/>
|
||||
<CBreadcrumbRouter/>
|
||||
<div class="container-fluid">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
<script>
|
||||
import nav from '@/_nav'
|
||||
import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
|
||||
import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter,SidebarNav, SidebarForm, SidebarHeader, SidebarMinimizer, Aside as AppAside, AsideToggler, Footer as TheFooter } from '@coreui/vue'
|
||||
import DefaultAside from './DefaultAside'
|
||||
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
|
||||
|
||||
@@ -75,7 +75,6 @@ export default {
|
||||
AppSidebar,
|
||||
AppAside,
|
||||
TheFooter,
|
||||
Breadcrumb,
|
||||
DefaultAside,
|
||||
DefaultHeaderDropdownAccnt,
|
||||
SidebarForm,
|
||||
@@ -89,14 +88,6 @@ export default {
|
||||
return {
|
||||
nav: nav.items
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
name () {
|
||||
return this.$route.name
|
||||
},
|
||||
list () {
|
||||
return this.$route.matched.filter((route) => route.name || route.meta.label )
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<AppHeaderDropdown right no-caret>
|
||||
<template slot="header">
|
||||
<c-nav-item-dropdown no-caret right>
|
||||
<template slot="button-content">
|
||||
<img
|
||||
src="img/avatars/6.jpg"
|
||||
class="img-avatar"
|
||||
alt="admin@bootstrapmaster.com" />
|
||||
</template>\
|
||||
<template slot="dropdown">
|
||||
</template>
|
||||
|
||||
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
|
||||
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
|
||||
<b-badge variant="info">{{ itemsCount }}</b-badge>
|
||||
<c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
|
||||
<b-badge variant="success">{{ itemsCount }}</b-badge>
|
||||
<c-badge variant="success">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
|
||||
<b-badge variant="danger">{{ itemsCount }}</b-badge>
|
||||
<c-badge variant="danger">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-comments" /> Comments
|
||||
<b-badge variant="warning">{{ itemsCount }}</b-badge>
|
||||
<c-badge variant="warning">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-header
|
||||
tag="div"
|
||||
@@ -28,27 +28,23 @@
|
||||
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-usd" /> Payments
|
||||
<b-badge variant="secondary">{{ itemsCount }}</b-badge>
|
||||
<c-badge variant="secondary">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-file" /> Projects
|
||||
<b-badge variant="primary">{{ itemsCount }}</b-badge>
|
||||
<c-badge variant="primary">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-divider />
|
||||
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
|
||||
</template>
|
||||
</AppHeaderDropdown>
|
||||
</c-nav-item-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { HeaderDropdown as AppHeaderDropdown } from '@coreui/vue'
|
||||
|
||||
export default {
|
||||
name: 'DefaultHeaderDropdownAccnt',
|
||||
components: {
|
||||
AppHeaderDropdown
|
||||
},
|
||||
data: () => {
|
||||
return { itemsCount: 42 }
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
+8
-3
@@ -3,23 +3,28 @@
|
||||
import 'core-js/es6/promise'
|
||||
import 'core-js/es6/string'
|
||||
import 'core-js/es7/array'
|
||||
|
||||
// import cssVars from 'css-vars-ponyfill'
|
||||
import Vue from 'vue'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import CoreuiVue from '@coreui/vue'
|
||||
|
||||
Vue.config.performance = true
|
||||
|
||||
// todo
|
||||
// cssVars()
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
Vue.use(CoreuiVue)
|
||||
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
template: '<App/>',
|
||||
components: {
|
||||
App
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
import { deepObjectsMerge, getColor } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||
|
||||
const generatedLabels = {
|
||||
computed:{
|
||||
generatedLabels() {
|
||||
if(this.labels !== undefined)
|
||||
return this.labels
|
||||
let labels = [];
|
||||
for(let i=1; i<=this.data.length; i++)
|
||||
labels.push('')
|
||||
return labels
|
||||
},
|
||||
},
|
||||
}
|
||||
const generatedBackgroundColor = {
|
||||
computed:{
|
||||
generatedBackgroundColor(){
|
||||
return getColor(this.backgroundColor)
|
||||
},
|
||||
},
|
||||
}
|
||||
const generatedBorderColor = {
|
||||
computed:{
|
||||
generatedBorderColor(){
|
||||
return getColor(this.borderColor)
|
||||
},
|
||||
},
|
||||
}
|
||||
const generatedPointHoverBackgroundColor = {
|
||||
computed:{
|
||||
generatedPointHoverBackgroundColor () {
|
||||
if(this.$options.propsData.pointHoverBackgroundColor === undefined)
|
||||
return this.generatedBorderColor
|
||||
return getColor(this.pointHoverBackgroundColor)
|
||||
},
|
||||
},
|
||||
}
|
||||
const generatedOptions = {
|
||||
computed:{
|
||||
generatedOptions () {
|
||||
if(this.$options.propsData.options !== undefined)
|
||||
deepObjectsMerge(this.finalOptions, this.options)
|
||||
return this.finalOptions
|
||||
},
|
||||
},
|
||||
}
|
||||
export{
|
||||
generatedLabels,
|
||||
generatedBackgroundColor,
|
||||
generatedBorderColor,
|
||||
generatedPointHoverBackgroundColor,
|
||||
generatedOptions
|
||||
}
|
||||
+20
-19
@@ -2,34 +2,35 @@
|
||||
<div class="animated fadeIn">
|
||||
<b-card-group columns class="card-columns">
|
||||
<b-card header="Line Chart">
|
||||
<div class="chart-wrapper">
|
||||
<line-example chartId="chart-line-01"/>
|
||||
</div>
|
||||
<line-example/>
|
||||
</b-card>
|
||||
<b-card header="Bar Chart">
|
||||
<div class="chart-wrapper">
|
||||
<bar-example chartId="chart-bar-01"/>
|
||||
</div>
|
||||
<bar-example/>
|
||||
</b-card>
|
||||
<b-card header="Doughnut Chart">
|
||||
<div class="chart-wrapper">
|
||||
<doughnut-example chartId="chart-doughnut-01"/>
|
||||
</div>
|
||||
<doughnut-example/>
|
||||
</b-card>
|
||||
<b-card header="Radar Chart">
|
||||
<div class="chart-wrapper">
|
||||
<radar-example chartId="chart-radar-01"/>
|
||||
</div>
|
||||
<radar-example/>
|
||||
</b-card>
|
||||
<b-card header="Pie Chart">
|
||||
<div class="chart-wrapper">
|
||||
<pie-example chartId="chart-pie-01"/>
|
||||
</div>
|
||||
<pie-example/>
|
||||
</b-card>
|
||||
<b-card header="Polar Area Chart">
|
||||
<div class="chart-wrapper">
|
||||
<polar-area-example chartId="chart-polar-area-01"/>
|
||||
</div>
|
||||
<polar-area-example/>
|
||||
</b-card>
|
||||
<b-card header="Simple line chart">
|
||||
<c-simple-line-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' borderColor='success'/>
|
||||
</b-card>
|
||||
<b-card header="Simple pointed chart">
|
||||
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
|
||||
</b-card>
|
||||
<b-card header="Simple bar chart">
|
||||
<c-simple-bar-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' color='danger'/>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</div>
|
||||
@@ -43,7 +44,7 @@ import PieExample from './charts/PieExample'
|
||||
import PolarAreaExample from './charts/PolarAreaExample'
|
||||
|
||||
export default {
|
||||
name: 'charts',
|
||||
name: 'Charts',
|
||||
components: {
|
||||
BarExample,
|
||||
LineExample,
|
||||
|
||||
+46
-69
@@ -2,9 +2,8 @@
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<c-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
|
||||
<b-dropdown slot='dropdown' class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
@@ -13,16 +12,14 @@
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template>
|
||||
<template slot='chart'>
|
||||
<line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:70px' label='Members' pointHoverBackgroundColor='primary'/>
|
||||
</template>
|
||||
</widget06>
|
||||
style='height:70px' label='Members' pointHoverColor='primary'/>
|
||||
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
|
||||
<c-widget06 cardClasses="bg-info" header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
|
||||
<template slot="button-content">
|
||||
@@ -34,16 +31,14 @@
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template>
|
||||
<template slot='chart'>
|
||||
<line-chart2 chartId='widget06_2' slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
|
||||
<c-simple-pointed-chart 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}}}'
|
||||
pointHoverBackgroundColor='info'/>
|
||||
</template>
|
||||
</widget06>
|
||||
pointHoverColor='info'/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
|
||||
<c-widget06 cardClasses="bg-warning" header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
@@ -55,17 +50,15 @@
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template>
|
||||
<template slot='chart'>
|
||||
<line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
|
||||
<c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'
|
||||
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverBackgroundColor='warning'/>
|
||||
</template>
|
||||
</widget06>
|
||||
style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
|
||||
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
|
||||
<template name='dropdown'>
|
||||
<c-widget06 cardClasses="bg-danger" header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
@@ -76,11 +69,9 @@
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template>
|
||||
<template name='chart'>
|
||||
<bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px' />
|
||||
</template>
|
||||
</widget06>
|
||||
<c-simple-bar-chart :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Members' color='rgb(250, 152, 152)' style='height:70px' />
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-card>
|
||||
@@ -100,7 +91,7 @@
|
||||
</b-button-toolbar>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<main-chart-example chartId="main-chart-01" class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
|
||||
<main-chart-example style="height:300px;margin-top:40px;" height="300"></main-chart-example>
|
||||
<div slot="footer">
|
||||
<b-row class="text-center">
|
||||
<b-col class="mb-sm-2 mb-0">
|
||||
@@ -133,32 +124,32 @@
|
||||
</b-card>
|
||||
<b-row>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
|
||||
<line-chart1 chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
|
||||
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
|
||||
<c-simple-line-chart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
|
||||
</widget04>
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
|
||||
<line-chart1 chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
|
||||
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
|
||||
<c-simple-line-chart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
|
||||
</widget04>
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
|
||||
<line-chart1 chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
|
||||
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
|
||||
<c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
|
||||
</widget04>
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
|
||||
<line-chart1 chartId="google-plus" :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
|
||||
<c-widget04 variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
|
||||
<c-simple-line-chart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
|
||||
</widget04>
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
@@ -171,9 +162,9 @@
|
||||
<Callout variant="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<div class="chart-wrapper" :style="{ top: '-10px'}">
|
||||
<div :style="{ top: '-10px'}">
|
||||
<!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
|
||||
<callout-chart-example chartId="callout-chart-01" :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
@@ -181,8 +172,8 @@
|
||||
<Callout variant="danger">
|
||||
<small class="text-muted">Recurring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<div class="chart-wrapper" :style="{ top: '-10px'}">
|
||||
<callout-chart-example chartId="callout-chart-02" :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
|
||||
<div :style="{ top: '-10px'}">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
@@ -281,8 +272,8 @@
|
||||
<Callout variant="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<div class="chart-wrapper" :style="{ top: '-10px'}">
|
||||
<callout-chart-example chartId="callout-chart-03" :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
@@ -290,8 +281,8 @@
|
||||
<Callout variant="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<div class="chart-wrapper" :style="{ top: '-10px'}">
|
||||
<callout-chart-example chartId="callout-chart-04" :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
|
||||
<div :style="{ top: '-10px'}">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
@@ -408,27 +399,13 @@
|
||||
import MainChartExample from './dashboard/MainChartExample'
|
||||
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
|
||||
import CalloutChartExample from './dashboard/CalloutChartExample'
|
||||
import { Callout } from '@coreui/vue'
|
||||
import Widget04 from './widgets/Widget04'
|
||||
import Widget06 from './widgets/Widget06'
|
||||
import LineChart1 from './dashboard/LineChart1'
|
||||
import LineChart2 from './dashboard/LineChart2'
|
||||
|
||||
import BarChart1 from './dashboard/BarChart1'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
Callout,
|
||||
MainChartExample,
|
||||
SocialBoxChartExample,
|
||||
CalloutChartExample,
|
||||
Widget04,
|
||||
Widget06,
|
||||
LineChart1,
|
||||
LineChart2,
|
||||
BarChart1
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
||||
+157
-179
@@ -1,189 +1,207 @@
|
||||
<template>
|
||||
<div class="animated fadeIn" @dblclick="copyTry($event)">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="success" :value="25"/>
|
||||
<c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
|
||||
<CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
|
||||
</c-widget01>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
<c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="info" :value="25"/>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
<c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="warning" :value="25"/>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
<c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="danger" :value="25"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="background-success" :value="25"/>
|
||||
<c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="success" inverse :value="25"/>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="background-info" :value="25"/>
|
||||
<c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="info" inverse :value="25"/>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="background-warning" :value="25"/>
|
||||
<c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="warning" inverse :value="25"/>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="background-danger" :value="25"/>
|
||||
<c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="danger" inverse :value="25"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" :showLink="true"/>
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" :showLink="true"/>
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" :showLink="true"/>
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" :showLink="true"/>
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col cols="12" sm="6" lg="4">
|
||||
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="4">
|
||||
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="4">
|
||||
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
|
||||
</b-col>
|
||||
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
|
||||
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
|
||||
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
|
||||
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6" class="codeContainer" data-code="<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'/>">
|
||||
<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'/>
|
||||
<b-col md="3" sm="6" class="codeContainer">
|
||||
<c-widget04 variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
|
||||
<i slot="icon" class="fa fa-battery-1"></i>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
|
||||
<line-chart1 chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
|
||||
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
|
||||
<c-simple-line-chart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
|
||||
</widget04>
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
|
||||
<line-chart1 chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
|
||||
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
|
||||
<c-simple-line-chart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
|
||||
</widget04>
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
|
||||
<line-chart1 chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
|
||||
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
|
||||
<c-simple-line-chart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
|
||||
</widget04>
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
|
||||
<line-chart1 chartId="google-plus" :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
|
||||
<c-widget04 variant='google-plus'
|
||||
rightHeader='894'
|
||||
rightFooter='followers'
|
||||
leftHeader='92' leftFooter='circles'>
|
||||
<c-simple-line-chart chartId="google-plus"
|
||||
:data='[35, 23, 56, 22, 97, 23, 64]'
|
||||
label='Followers'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
|
||||
</widget04>
|
||||
style='height:100px'
|
||||
color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-card-group class="mb-4">
|
||||
<widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
|
||||
<widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
||||
<widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
||||
<widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
||||
<widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
|
||||
<c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
|
||||
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
||||
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
||||
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
||||
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
|
||||
</b-card-group>
|
||||
<b-card-group class="mb-4">
|
||||
<c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
|
||||
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
|
||||
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
|
||||
<c-widget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
|
||||
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
|
||||
</b-card-group>
|
||||
<b-row>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
|
||||
<c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
||||
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
||||
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
||||
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
|
||||
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
|
||||
<CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
|
||||
</c-widget05>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
|
||||
<c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/>
|
||||
<c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/>
|
||||
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
|
||||
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/>
|
||||
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/>
|
||||
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<widget05 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
|
||||
<c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
|
||||
<c-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
@@ -195,36 +213,34 @@
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template>
|
||||
<template slot='chart'>
|
||||
<line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:70px' label='Members' pointHoverBackgroundColor='primary'/>
|
||||
</template>
|
||||
</widget06>
|
||||
style='height:70px' label='Members' pointHoverColor='primary'/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
|
||||
<template slot="button-content">
|
||||
<i class="icon-location-pin"></i>
|
||||
</template>
|
||||
<c-widget06 cardClasses="bg-info" header="9.823" text="Members online">
|
||||
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
|
||||
<i slot="button-content"
|
||||
class="icon-location-pin"
|
||||
></i>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template>
|
||||
<template slot='chart'>
|
||||
<line-chart2 chartId='widget06_2' slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
|
||||
<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}}}'
|
||||
pointHoverBackgroundColor='info'/>
|
||||
</template>
|
||||
</widget06>
|
||||
style="height:70px"
|
||||
label="Members"
|
||||
:options="{elements: {line: {tension: 0.00001}}}"
|
||||
pointHoverColor="info"
|
||||
/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
|
||||
<c-widget06 cardClasses="bg-warning" header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
@@ -236,17 +252,15 @@
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template>
|
||||
<template slot='chart'>
|
||||
<line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
|
||||
<c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'
|
||||
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverBackgroundColor='warning'/>
|
||||
</template>
|
||||
</widget06>
|
||||
style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
|
||||
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
|
||||
<template name='dropdown'>
|
||||
<c-widget06 cardClasses="bg-danger" header="9.823" text="Members online">
|
||||
<template slot="dropdown">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
@@ -257,122 +271,86 @@
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template>
|
||||
<template name='chart'>
|
||||
<bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px' />
|
||||
</template>
|
||||
</widget06>
|
||||
<c-simple-bar-chart 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' />
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<line-chart1 style="height:40px" chartId="widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<bar-chart1 style="height:40px" chartId="widget07_bar1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</widget07>
|
||||
<c-widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<c-simple-line-chart style="height:40px" chartId="c-widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<CSimpleBarChart style="height:40px"
|
||||
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
|
||||
label="Sales"
|
||||
/>
|
||||
</c-widget07>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<line-chart1 style="height:40px" chartId="widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<bar-chart1 style="height:40px" chartId="widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</widget07>
|
||||
<c-widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<c-simple-line-chart style="height:40px" chartId="c-widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</c-widget07>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<line-chart1 style="height:40px" chartId="widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<bar-chart1 style="height:40px" chartId="widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</widget07>
|
||||
<c-widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<c-simple-line-chart style="height:40px" chartId="c-widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</c-widget07>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<line-chart1 style="height:40px" chartId="widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<bar-chart1 style="height:40px" chartId="widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</widget07>
|
||||
<c-widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<c-simple-line-chart style="height:40px" chartId="c-widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</c-widget07>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="4" lg="2">
|
||||
<widget08 header='title' text='1,123'>
|
||||
<line-chart1 style="height:40px" chartId="widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<c-simple-line-chart style="height:40px" chartId="c-widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' borderColor='danger'/>
|
||||
</widget08>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
<b-col sm="4" lg="2">
|
||||
<widget08 header='title' text='1,123'>
|
||||
<line-chart1 style="height:40px" chartId="widget08_2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<c-simple-line-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' borderColor='primary'/>
|
||||
</widget08>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
<b-col sm="4" lg="2">
|
||||
<widget08 header='title' text='1,123'>
|
||||
<line-chart1 style="height:40px" chartId="widget08_3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' borderColor='success'/>
|
||||
</widget08>
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<CSimpleLineChart style="height:40px"
|
||||
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
|
||||
label="Sales"
|
||||
borderColor="success"
|
||||
/>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
<b-col sm="4" lg="2">
|
||||
<widget08 header='title' text='1,123'>
|
||||
<bar-chart1 style="height:40px" chartId="widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' backgroundColor='danger'/>
|
||||
</widget08>
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<c-simple-bar-chart style="height:40px" chartId="c-widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' color='danger'/>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
<b-col sm="4" lg="2">
|
||||
<widget08 header='title' text='1,123'>
|
||||
<bar-chart1 style="height:40px" chartId="widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' backgroundColor='primary'/>
|
||||
</widget08>
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<c-simple-bar-chart style="height:40px" chartId="c-widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' color='primary'/>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
<b-col sm="4" lg="2">
|
||||
<widget08 header='title' text='1,123'>
|
||||
<bar-chart1 style="height:40px" chartId="widget08_6" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' backgroundColor='success'/>
|
||||
</widget08>
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<c-simple-bar-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' color='success'/>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Widget01 from './widgets/Widget01'
|
||||
import Widget02 from './widgets/Widget02'
|
||||
import Widget03 from './widgets/Widget03'
|
||||
import Widget04 from './widgets/Widget04'
|
||||
import Widget05 from './widgets/Widget05'
|
||||
import Widget06 from './widgets/Widget06'
|
||||
import Widget07 from './widgets/Widget07'
|
||||
import Widget08 from './widgets/Widget08'
|
||||
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
|
||||
import LineChart1 from './dashboard/LineChart1'
|
||||
import LineChart2 from './dashboard/LineChart2'
|
||||
import BarChart1 from './dashboard/BarChart1'
|
||||
|
||||
export default {
|
||||
name: 'Widgets',
|
||||
components: {
|
||||
Widget01,
|
||||
Widget02,
|
||||
Widget03,
|
||||
Widget04,
|
||||
Widget05,
|
||||
Widget06,
|
||||
Widget07,
|
||||
Widget08,
|
||||
SocialBoxChartExample,
|
||||
LineChart1,
|
||||
LineChart2,
|
||||
BarChart1,
|
||||
},
|
||||
methods:{
|
||||
copyTry:function($event){
|
||||
var componentCode = $event.target.closest('.col-md-3').getAttribute('data-code')
|
||||
if(componentCode)
|
||||
console.log(componentCode)
|
||||
const el = document.createElement('textarea');
|
||||
el.value = componentCode;
|
||||
document.body.appendChild(el);
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(el);
|
||||
},
|
||||
}
|
||||
name: 'Widgets'
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -14,7 +14,11 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-breadcrumb :items="items"/>
|
||||
<CBreadcrumb :items="items"/>
|
||||
<CBreadcrumb :items="items2"/>
|
||||
<CBreadcrumb :items="items3"/>
|
||||
<Breadcrumb :list="items3"/>
|
||||
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@@ -23,8 +27,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CBreadcrumb from './CBreadcrumb'
|
||||
export default {
|
||||
name: 'breadcrumbs',
|
||||
// components: {
|
||||
// CBreadcrumb
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
items: [{
|
||||
@@ -34,8 +42,33 @@ export default {
|
||||
text: 'Manage',
|
||||
href: '#'
|
||||
}, {
|
||||
text: 'Library',
|
||||
active: true
|
||||
text: 'Library'
|
||||
}],
|
||||
items2: [{
|
||||
text: 'Go to dashboard',
|
||||
to: '/dashboard'
|
||||
}, {
|
||||
text: 'Go to widgets',
|
||||
to: '/Widgets'
|
||||
}, {
|
||||
text: 'Go to Google',
|
||||
href: 'http://google.com'
|
||||
},{
|
||||
text: 'Current page'
|
||||
}],
|
||||
items3: ['sd', {
|
||||
text: 'Link',
|
||||
to: '#2',
|
||||
activeClass: 'bg-info p-1'
|
||||
}, {
|
||||
text: 'Active',
|
||||
to: '#3',
|
||||
activeClass: 'bg-warning p-1'
|
||||
},{
|
||||
text: 'Classes',
|
||||
to: '#4',
|
||||
activeClass: 'bg-danger p-1',
|
||||
current: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,170 @@
|
||||
import { mergeData } from 'vue-functional-data-merge'
|
||||
|
||||
/**
|
||||
* The Link component is used in many other BV components.
|
||||
* As such, sharing its props makes supporting all its features easier.
|
||||
* However, some components need to modify the defaults for their own purpose.
|
||||
* Prefer sharing a fresh copy of the props to ensure mutations
|
||||
* do not affect other component references to the props.
|
||||
*
|
||||
* https://github.com/vuejs/vue-router/blob/dev/src/components/link.js
|
||||
* @return {{}}
|
||||
*/
|
||||
export function propsFactory () {
|
||||
return {
|
||||
href: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
rel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
target: {
|
||||
type: String,
|
||||
default: '_self'
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
activeClass: {
|
||||
type: String,
|
||||
default: 'active'
|
||||
},
|
||||
append: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
event: {
|
||||
type: [String, Array],
|
||||
default: 'click'
|
||||
},
|
||||
exact: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
exactActiveClass: {
|
||||
type: String,
|
||||
default: 'active'
|
||||
},
|
||||
replace: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
routerTag: {
|
||||
type: String,
|
||||
default: 'a'
|
||||
},
|
||||
to: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const props = propsFactory()
|
||||
|
||||
|
||||
function computeTag (props, parent) {
|
||||
return Boolean(parent.$router) && props.to && !props.disabled ? 'router-link' : 'a'
|
||||
}
|
||||
|
||||
/*eslint no-unused-vars: ["error", {"args": "none"}]*/
|
||||
function computeHref ({ disabled, href, to }, tag) {
|
||||
// We've already checked the parent.$router in computeTag,
|
||||
// so router-link means live router.
|
||||
// When deferring to Vue Router's router-link,
|
||||
// don't use the href attr at all.
|
||||
// Must return undefined for router-link to populate href.
|
||||
if (tag === 'router-link') return void 0
|
||||
// If href explicitly provided
|
||||
if (href) return href
|
||||
// Reconstruct href when `to` used, but no router
|
||||
if (to) {
|
||||
// Fallback to `to` prop (if `to` is a string)
|
||||
if (typeof to === 'string') return to
|
||||
// Fallback to `to.path` prop (if `to` is an object)
|
||||
if (typeof to === 'object' && typeof to.path === 'string') return to.path
|
||||
}
|
||||
// If nothing is provided use '#'
|
||||
return '#'
|
||||
}
|
||||
|
||||
function computeRel ({ target, rel }) {
|
||||
if (target === '_blank' && rel === null) {
|
||||
return 'noopener'
|
||||
}
|
||||
return rel || null
|
||||
}
|
||||
|
||||
function clickHandlerFactory ({ disabled, tag, href, suppliedHandler, parent }) {
|
||||
const isRouterLink = tag === 'router-link'
|
||||
|
||||
return function onClick (e) {
|
||||
if (disabled && e instanceof Event) {
|
||||
// Stop event from bubbling up.
|
||||
e.stopPropagation()
|
||||
// Kill the event loop attached to this specific EventTarget.
|
||||
e.stopImmediatePropagation()
|
||||
} else {
|
||||
parent.$root.$emit('clicked::link', e)
|
||||
|
||||
if (isRouterLink && e.target.__vue__) {
|
||||
e.target.__vue__.$emit('click', e)
|
||||
}
|
||||
if (typeof suppliedHandler === 'function') {
|
||||
suppliedHandler(...arguments)
|
||||
}
|
||||
}
|
||||
|
||||
if ((!isRouterLink && href === '#') || disabled) {
|
||||
// Stop scroll-to-top behavior or navigation.
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
functional: true,
|
||||
name: 'CLink',
|
||||
props: propsFactory(),
|
||||
render (h, { props, data, parent, children }) {
|
||||
const tag = computeTag(props, parent)
|
||||
const rel = computeRel(props)
|
||||
const href = computeHref(props, tag)
|
||||
const eventType = tag === 'router-link' ? 'nativeOn' : 'on'
|
||||
const suppliedHandler = (data[eventType] || {}).click
|
||||
const handlers = { click: clickHandlerFactory({ tag, href, disabled: props.disabled, suppliedHandler, parent }) }
|
||||
|
||||
const componentData = mergeData(data, {
|
||||
class: [
|
||||
props.active ? (props.exact ? props.exactActiveClass : props.activeClass) : null,
|
||||
{ disabled: props.disabled }
|
||||
],
|
||||
attrs: {
|
||||
rel,
|
||||
href,
|
||||
target: props.target,
|
||||
tabindex: props.disabled ? '-1' : (data.attrs ? data.attrs.tabindex : null),
|
||||
'aria-disabled': (tag === 'a' && props.disabled) ? 'true' : null
|
||||
},
|
||||
props: Object.assign(props, { tag: props.routerTag })
|
||||
})
|
||||
|
||||
// If href prop exists on router-link (even undefined or null) it fails working on SSR
|
||||
if (!componentData.attrs.href) {
|
||||
delete componentData.attrs.href
|
||||
}
|
||||
|
||||
// We want to overwrite any click handler since our callback
|
||||
// will invoke the supplied handler if !props.disabled
|
||||
componentData[eventType] = Object.assign(componentData[eventType] || {}, handlers)
|
||||
|
||||
return h(tag, componentData, children)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<li :class='dropdownClasses' :id="safeId">
|
||||
<a href="#" :id="'C-' + safeId" aria-haspopup="true" :aria-expanded="visible"
|
||||
:class="toggleClasses" @click="toggle(!visible)" @blur="toggle(false)">
|
||||
<slot name="button-content">{{text}}</slot>
|
||||
</a>
|
||||
<div :class='menuClasses' :aria-labbeledby="'C-' + safeId">
|
||||
<slot></slot>
|
||||
<slot name="dropdown"></slot>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'CNavItemDropdown',
|
||||
data () {
|
||||
return {
|
||||
visible: this.show
|
||||
}
|
||||
},
|
||||
props: {
|
||||
noCaret: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
extraToggleClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
extraMenuClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'Dropdown'
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dropup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
right: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
toggle (visible) {
|
||||
if(this.disabled)
|
||||
return
|
||||
this.visible = visible
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dropdownClasses () {
|
||||
return [
|
||||
'nav-item',
|
||||
'dropdown',
|
||||
this.dropup ? 'dropup' : '',
|
||||
this.visible ? 'show' : ''
|
||||
]
|
||||
},
|
||||
toggleClasses () {
|
||||
return [
|
||||
'nav-link',
|
||||
this.noCaret ? '' : 'dropdown-toggle',
|
||||
this.disabled ? 'disabled' : '',
|
||||
this.extraToggleClasses ? this.extraToggleClasses : ''
|
||||
]
|
||||
},
|
||||
menuClasses () {
|
||||
return [
|
||||
'dropdown-menu',
|
||||
this.right ? 'dropdown-menu-right' : 'dropdown-menu-left',
|
||||
this.visible ? 'show' : '',
|
||||
this.extraMenuClasses ? this.extraMenuClasses : ''
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<label :class="classList">
|
||||
<input
|
||||
:id="id"
|
||||
:name="name"
|
||||
:type="type"
|
||||
:checked="isChecked"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:value="value"
|
||||
class="switch-input form-check-input"
|
||||
@change="toggle"
|
||||
>
|
||||
<span
|
||||
:data-checked="dataOn"
|
||||
:data-unchecked="dataOff"
|
||||
class="switch-slider"
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'CSwitch',
|
||||
model: {
|
||||
prop: 'passedValue',
|
||||
event: 'change'
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
isChecked: null,
|
||||
passedValue: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'secondary'
|
||||
},
|
||||
outline: {
|
||||
type: [Boolean, String],
|
||||
default: null,
|
||||
validator: value => [false, true, '', 'alt'].indexOf(value) !== -1
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: value => ['', 'lg', 'sm'].indexOf(value) !== -1
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: value => [null, '3d', 'pill'].indexOf(value) !== -1
|
||||
},
|
||||
id: String,
|
||||
name: String,
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: Boolean,
|
||||
required: Boolean,
|
||||
value: String,
|
||||
trueValue: [String, Number, Array, Object],
|
||||
falseValue: [String, Number, Array, Object],
|
||||
dataOn: String,
|
||||
dataOff: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'checkbox'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'switch',
|
||||
this.dataOn || this.dataOff ? 'switch-label' : '',
|
||||
this.size ? `switch-${this.size}` : '',
|
||||
this.shape ? `switch-${this.shape}` : '',
|
||||
`switch${this.outline ? '-outline' : ''}-${this.variant}${this.outline==='alt' ? '-alt' : ''}`,
|
||||
'form-check-label'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle (event) {
|
||||
this.setValues(event.target.checked)
|
||||
this.$emit('change', this.passedValue, event);
|
||||
},
|
||||
setValues (checked) {
|
||||
this.isChecked = checked
|
||||
if(checked)
|
||||
this.passedValue = this.trueValue !== undefined ? this.trueValue : checked
|
||||
else
|
||||
this.passedValue = this.falseValue !== undefined ? this.falseValue : checked
|
||||
},
|
||||
detectPassedCheck (modelValue) {
|
||||
if(typeof modelValue === 'boolean')
|
||||
this.isChecked = modelValue
|
||||
else if (modelValue === this.falseValue)
|
||||
this.isChecked = false
|
||||
else if (modelValue === this.trueValue)
|
||||
this.isChecked = true
|
||||
else if (this.type === 'checkbox')
|
||||
console.warn('Value passed to CSwitch component by v-model property is not of boolean type and does not equal trueValue or falseValue property.')
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if(this.$vnode.data.model)
|
||||
this.detectPassedCheck(this.$vnode.data.model.value)
|
||||
else
|
||||
this.isChecked = this.checked
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -33,12 +33,20 @@
|
||||
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
|
||||
<b-nav-item-dropdown text="Lang" right>
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
<c-nav-item-dropdown text="Lang">
|
||||
<!-- <template slot="button-content">
|
||||
<img
|
||||
src="img/avatars/6.jpg"
|
||||
class="img-avatar"
|
||||
alt="admin@bootstrapmaster.com" />
|
||||
</template> -->
|
||||
<template slot="dropdown">
|
||||
<a href="#" class='dropdown-item'>EN</a>
|
||||
<a href="#" class='dropdown-item'>ES</a>
|
||||
<a href="#" class='dropdown-item'>RU</a>
|
||||
<a href="#" class='dropdown-item'>FA</a>
|
||||
</template>
|
||||
</c-nav-item-dropdown>
|
||||
|
||||
<b-nav-item-dropdown right>
|
||||
<!-- Using button-content slot -->
|
||||
@@ -157,8 +165,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CNavItemDropdown from './CNavItemDropdown'
|
||||
|
||||
export default {
|
||||
name: 'navbars'
|
||||
name: 'navbars',
|
||||
components:{
|
||||
CNavItemDropdown
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -13,12 +13,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-progress :value="counter" :max="max" show-progress animated></b-progress>
|
||||
<b-progress class="mt-1" :max="max" show-value>
|
||||
<b-progress-bar :value="counter*(6/10)" variant="success"></b-progress-bar>
|
||||
<b-progress-bar :value="counter*(2.5/10)" variant="warning"></b-progress-bar>
|
||||
<b-progress-bar :value="counter*(1.5/10)" variant="danger"></b-progress-bar>
|
||||
</b-progress>
|
||||
<c-progress :value="counter" :max="max" show-progress animated></c-progress>
|
||||
<CProgress class="mt-1" :max="max" show-value>
|
||||
<CProgressBar :value="counter*(6/10)" color="success"/>
|
||||
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
|
||||
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
|
||||
</CProgress>
|
||||
<b-btn class="mt-4" @click="clicked">Click me</b-btn>
|
||||
</div>
|
||||
</b-card>
|
||||
@@ -200,4 +200,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+275
-227
@@ -1,5 +1,36 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<!-- <p>myFlag1: {{radio}}</p>
|
||||
<p>myFlag1: {{myFlag1}}</p>
|
||||
<p>myFlag2: {{myFlag2}}</p>
|
||||
<CSwitch v-model="myFlag1"/>
|
||||
<CSwitch v-model="myFlag2" checked @change="test" /> -->
|
||||
<b-row>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<h5>
|
||||
Radio switches
|
||||
<b-badge :variant="radio" class="mr-auto">{{radio}}</b-badge>
|
||||
<b-badge variant="danger" class="float-right">NEW</b-badge>
|
||||
</h5>
|
||||
</div>
|
||||
<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"
|
||||
:key="key"
|
||||
:variant="variant"
|
||||
shape="3d"
|
||||
outline="alt"
|
||||
v-bind="labelIcon"
|
||||
type="radio"
|
||||
name="radio"
|
||||
v-model="radio"
|
||||
:trueValue="variant"
|
||||
v-for="(variant, key) in ['secondary','warning','success','info','danger','light','dark']"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
@@ -7,15 +38,22 @@
|
||||
Switch default
|
||||
<b-badge variant="primary">{{checker}}</b-badge>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked name="switch1" v-model="checker" value="yes" uncheckedValue="no"/>
|
||||
<c-switch class="mx-1" color="secondary" checked />
|
||||
<c-switch class="mx-1" color="success" checked />
|
||||
<c-switch class="mx-1" color="warning" checked />
|
||||
<c-switch class="mx-1" color="info" checked />
|
||||
<c-switch class="mx-1" color="danger" checked />
|
||||
<c-switch class="mx-1" color="light" checked />
|
||||
<c-switch class="mx-1" color="dark" checked />
|
||||
<c-switch class="mx-1" color="primary" disabled />
|
||||
<CSwitch class="mx-1"
|
||||
variant="primary"
|
||||
checked
|
||||
name="switch1"
|
||||
v-model="checker"
|
||||
value="someValue"
|
||||
trueValue="yes"
|
||||
falseValue="no"
|
||||
/>
|
||||
<CSwitch class="mx-1"
|
||||
:variant="variant"
|
||||
checked
|
||||
:key="key"
|
||||
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
|
||||
/>
|
||||
<CSwitch class="mx-1" variant="primary" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -23,15 +61,15 @@
|
||||
<div slot="header">
|
||||
Switch pills
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="secondary" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="success" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="warning" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="info" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="danger" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="light" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="dark" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="pill" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="pill" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -39,15 +77,15 @@
|
||||
<div slot="header">
|
||||
3d Switch
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="secondary" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="success" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="warning" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="info" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="danger" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="light" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="dark" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="3d" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -55,15 +93,15 @@
|
||||
<div slot="header">
|
||||
3d Switch <small><code>disabled</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="secondary" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="success" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="warning" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="info" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="danger" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="light" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="dark" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="3d" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -71,15 +109,15 @@
|
||||
<div slot="header">
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" color="secondary" checked variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" color="success" checked variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" color="warning" checked variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" color="info" checked variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" color="danger" checked variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" color="light" checked variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" color="dark" checked variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -87,47 +125,47 @@
|
||||
<div slot="header">
|
||||
3d Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="secondary" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="success" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="warning" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="info" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="danger" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="light" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="dark" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="3d" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
3d Switch <small><code>outline="alt" label</code></small>
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="secondary" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="success" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="warning" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="info" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="danger" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="light" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="dark" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
3d Switch <small><code>outline="alt" label</code></small>
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" defaultChecked variant="3d" outline="alt" label />
|
||||
<c-switch class="mx-1" color="secondary" defaultChecked variant="3d" outline="alt" label />
|
||||
<c-switch class="mx-1" color="success" defaultChecked variant="3d" outline="alt" label />
|
||||
<c-switch class="mx-1" color="warning" defaultChecked variant="3d" outline="alt" label />
|
||||
<c-switch class="mx-1" color="info" defaultChecked variant="3d" outline="alt" label />
|
||||
<c-switch class="mx-1" color="danger" defaultChecked variant="3d" outline="alt" label />
|
||||
<c-switch class="mx-1" color="light" defaultChecked variant="3d" outline="alt" label />
|
||||
<c-switch class="mx-1" color="dark" defaultChecked variant="3d" outline="alt" label />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" label />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -135,31 +173,31 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked outline />
|
||||
<c-switch class="mx-1" color="secondary" checked outline />
|
||||
<c-switch class="mx-1" color="success" checked outline />
|
||||
<c-switch class="mx-1" color="warning" checked outline />
|
||||
<c-switch class="mx-1" color="info" checked outline />
|
||||
<c-switch class="mx-1" color="danger" checked outline />
|
||||
<c-switch class="mx-1" color="light" checked outline />
|
||||
<c-switch class="mx-1" color="dark" checked outline />
|
||||
<c-switch class="mx-1" color="primary" outline disabled />
|
||||
<c-switch class="mx-1" variant="primary" checked outline />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline />
|
||||
<c-switch class="mx-1" variant="success" checked outline />
|
||||
<c-switch class="mx-1" variant="warning" checked outline />
|
||||
<c-switch class="mx-1" variant="info" checked outline />
|
||||
<c-switch class="mx-1" variant="danger" checked outline />
|
||||
<c-switch class="mx-1" variant="light" checked outline />
|
||||
<c-switch class="mx-1" variant="dark" checked outline />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Switch <small><code>outline variant="pill"</code></small>
|
||||
Switch <small><code>outline shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked outline variant="pill"/>
|
||||
<c-switch class="mx-1" color="secondary" checked outline variant="pill" />
|
||||
<c-switch class="mx-1" color="success" checked outline variant="pill" />
|
||||
<c-switch class="mx-1" color="warning" checked outline variant="pill" />
|
||||
<c-switch class="mx-1" color="info" checked outline variant="pill" />
|
||||
<c-switch class="mx-1" color="danger" checked outline variant="pill" />
|
||||
<c-switch class="mx-1" color="light" checked outline variant="pill" />
|
||||
<c-switch class="mx-1" color="dark" checked outline variant="pill" />
|
||||
<c-switch class="mx-1" color="primary" outline variant="pill" disabled />
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -167,31 +205,31 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked outline="alt" />
|
||||
<c-switch class="mx-1" color="secondary" checked outline="alt" />
|
||||
<c-switch class="mx-1" color="success" checked outline="alt" />
|
||||
<c-switch class="mx-1" color="warning" checked outline="alt" />
|
||||
<c-switch class="mx-1" color="info" checked outline="alt" />
|
||||
<c-switch class="mx-1" color="danger" checked outline="alt" />
|
||||
<c-switch class="mx-1" color="light" checked outline="alt" />
|
||||
<c-switch class="mx-1" color="dark" checked outline="alt" />
|
||||
<c-switch class="mx-1" color="primary" outline="alt" disabled />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Switch <small><code>outline="alt" variant="pill"</code></small>
|
||||
Switch <small><code>outline="alt" shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked outline="alt" variant="pill"/>
|
||||
<c-switch class="mx-1" color="secondary" checked outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="success" checked outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="warning" checked outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="info" checked outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="danger" checked outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="light" checked outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="dark" checked outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="primary" outline="alt" variant="pill" disabled />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -199,31 +237,31 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label />
|
||||
<c-switch class="mx-1" color="secondary" checked label />
|
||||
<c-switch class="mx-1" color="success" checked label />
|
||||
<c-switch class="mx-1" color="warning" checked label />
|
||||
<c-switch class="mx-1" color="info" checked label />
|
||||
<c-switch class="mx-1" color="danger" checked label />
|
||||
<c-switch class="mx-1" color="light" checked label />
|
||||
<c-switch class="mx-1" color="dark" checked label />
|
||||
<c-switch class="mx-1" color="primary" label disabled />
|
||||
<c-switch class="mx-1" variant="primary" checked />
|
||||
<c-switch class="mx-1" variant="secondary" checked />
|
||||
<c-switch class="mx-1" variant="success" checked />
|
||||
<c-switch class="mx-1" variant="warning" checked />
|
||||
<c-switch class="mx-1" variant="info" checked />
|
||||
<c-switch class="mx-1" variant="danger" checked />
|
||||
<c-switch class="mx-1" variant="light" checked />
|
||||
<c-switch class="mx-1" variant="dark" checked />
|
||||
<c-switch class="mx-1" variant="primary" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Switch <small><code>label variant="pill"</code></small>
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label variant="pill" />
|
||||
<c-switch class="mx-1" color="secondary" checked label variant="pill" />
|
||||
<c-switch class="mx-1" color="success" checked label variant="pill" />
|
||||
<c-switch class="mx-1" color="warning" checked label variant="pill" />
|
||||
<c-switch class="mx-1" color="info" checked label variant="pill" />
|
||||
<c-switch class="mx-1" color="danger" checked label variant="pill" />
|
||||
<c-switch class="mx-1" color="light" checked label variant="pill" />
|
||||
<c-switch class="mx-1" color="dark" checked label variant="pill" />
|
||||
<c-switch class="mx-1" color="primary" label variant="pill" disabled />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -231,15 +269,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline />
|
||||
<c-switch class="mx-1" color="secondary" checked label outline />
|
||||
<c-switch class="mx-1" color="success" checked label outline />
|
||||
<c-switch class="mx-1" color="warning" checked label outline />
|
||||
<c-switch class="mx-1" color="info" checked label outline />
|
||||
<c-switch class="mx-1" color="danger" checked label outline />
|
||||
<c-switch class="mx-1" color="light" checked label outline />
|
||||
<c-switch class="mx-1" color="dark" checked label outline />
|
||||
<c-switch class="mx-1" color="primary" label outline disabled />
|
||||
<c-switch class="mx-1" variant="primary" checked outline />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline />
|
||||
<c-switch class="mx-1" variant="success" checked outline />
|
||||
<c-switch class="mx-1" variant="warning" checked outline />
|
||||
<c-switch class="mx-1" variant="info" checked outline />
|
||||
<c-switch class="mx-1" variant="danger" checked outline />
|
||||
<c-switch class="mx-1" variant="light" checked outline />
|
||||
<c-switch class="mx-1" variant="dark" checked outline />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -247,15 +285,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline variant="pill" />
|
||||
<c-switch class="mx-1" color="secondary" checked label outline variant="pill" />
|
||||
<c-switch class="mx-1" color="success" checked label outline variant="pill" />
|
||||
<c-switch class="mx-1" color="warning" checked label outline variant="pill" />
|
||||
<c-switch class="mx-1" color="info" checked label outline variant="pill" />
|
||||
<c-switch class="mx-1" color="danger" checked label outline variant="pill" />
|
||||
<c-switch class="mx-1" color="light" checked label outline variant="pill" />
|
||||
<c-switch class="mx-1" color="dark" checked label outline variant="pill" />
|
||||
<c-switch class="mx-1" color="primary" label outline variant="pill" disabled />
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -263,15 +301,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline="alt" />
|
||||
<c-switch class="mx-1" color="secondary" checked label outline="alt" />
|
||||
<c-switch class="mx-1" color="success" checked label outline="alt" />
|
||||
<c-switch class="mx-1" color="warning" checked label outline="alt" />
|
||||
<c-switch class="mx-1" color="info" checked label outline="alt" />
|
||||
<c-switch class="mx-1" color="danger" checked label outline="alt" />
|
||||
<c-switch class="mx-1" color="light" checked label outline="alt" />
|
||||
<c-switch class="mx-1" color="dark" checked label outline="alt" />
|
||||
<c-switch class="mx-1" color="primary" label outline="alt" disabled />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -279,15 +317,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="secondary" checked label outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="success" checked label outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="warning" checked label outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="info" checked label outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="danger" checked label outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="light" checked label outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="dark" checked label outline="alt" variant="pill" />
|
||||
<c-switch class="mx-1" color="primary" label outline="alt" variant="pill" disabled />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
@@ -296,31 +334,31 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label dataOn="yes" dataOff="no"/>
|
||||
<c-switch class="mx-1" color="secondary" checked label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="success" checked label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="warning" checked label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="info" checked label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="danger" checked label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="light" checked label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="dark" checked label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" label disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
<c-switch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
|
||||
<c-switch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
|
||||
</b-card>shape
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Switch <small><code>label variant="pill"</code></small>
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="secondary" checked label variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="success" checked label variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="warning" checked label variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="info" checked label variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="danger" checked label variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="light" checked label variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="dark" checked label variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" label variant="pill" disabled v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -328,15 +366,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="secondary" checked label outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="success" checked label outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="warning" checked label outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="info" checked label outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="danger" checked label outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="light" checked label outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="dark" checked label outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" label outline disabled v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -344,15 +382,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="secondary" checked label outline variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="success" checked label outline variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="warning" checked label outline variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="info" checked label outline variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="danger" checked label outline variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="light" checked label outline variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="dark" checked label outline variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" label outline variant="pill" disabled v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -360,15 +398,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="secondary" checked label outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="success" checked label outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="warning" checked label outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="info" checked label outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="danger" checked label outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="light" checked label outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="dark" checked label outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" label outline="alt" disabled v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -376,15 +414,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline="alt" variant="pill" v-bind="labelTxt" />
|
||||
<c-switch class="mx-1" color="secondary" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="success" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="warning" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="info" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="danger" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="light" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="dark" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" label outline="alt" variant="pill" disabled v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
@@ -410,18 +448,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Switch as cSwitch } from '@coreui/vue'
|
||||
// import CSwitch from './CSwitch'
|
||||
|
||||
export default {
|
||||
name: 'switches',
|
||||
components: {
|
||||
cSwitch
|
||||
},
|
||||
computed: {
|
||||
icon (icon) {
|
||||
return icon
|
||||
}
|
||||
},
|
||||
// components: {
|
||||
// CSwitch
|
||||
// },
|
||||
data: () => {
|
||||
return {
|
||||
fields: [
|
||||
@@ -435,6 +473,9 @@ export default {
|
||||
{size: 'Small', example: {variant: '3d', color: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
|
||||
],
|
||||
checker: 'yes',
|
||||
radio: 'primary',
|
||||
myFlag1: true,
|
||||
myFlag2: false,
|
||||
picker: '',
|
||||
labelIcon: {
|
||||
dataOn: '\u2713',
|
||||
@@ -445,6 +486,13 @@ export default {
|
||||
dataOff: 'no'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
test (a, event) {
|
||||
console.log(a)
|
||||
console.log(typeof a)
|
||||
console.log(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<b-row>
|
||||
<b-col lg="6">
|
||||
<c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
|
||||
<c-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></c-table>
|
||||
</b-col><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
|
||||
@@ -233,6 +233,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'dropdowns'
|
||||
name: 'Dropdowns'
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Bar } from 'vue-chartjs'
|
||||
import { Bar } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
|
||||
export default {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import { Doughnut } from '@coreui/vue/src/extends/BaseCharts'
|
||||
|
||||
export default {
|
||||
name: 'DoughnutExample',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { Line } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Pie } from 'vue-chartjs'
|
||||
import { Pie } from '@coreui/vue/src/extends/BaseCharts'
|
||||
|
||||
export default {
|
||||
extends: Pie,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { PolarArea } from 'vue-chartjs'
|
||||
import { PolarArea } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
|
||||
export default {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Radar } from 'vue-chartjs'
|
||||
import { Radar } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
|
||||
export default {
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
<script>
|
||||
import { Bar } from 'vue-chartjs'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
import { generatedLabels, generatedBackgroundColor,generatedBorderColor, generatedOptions } from '@/mixins/charts/chartMixins'
|
||||
|
||||
export default {
|
||||
name: 'BarChart',
|
||||
extends: Bar,
|
||||
mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedOptions],
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
label:{
|
||||
type: String,
|
||||
default: 'label|string'
|
||||
},
|
||||
borderColor:{
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
backgroundColor:{
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,.2)'
|
||||
},
|
||||
labels: Array,
|
||||
options:Object,
|
||||
finalOptions:{
|
||||
type: Object,
|
||||
default: () => ({
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
custom: CustomTooltips
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
categoryPercentage: 1,
|
||||
barPercentage: 0.5
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const dataset = [
|
||||
{
|
||||
label: this.label,
|
||||
backgroundColor: this.generatedBackgroundColor,
|
||||
borderColor: this.generatedBorderColor,
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
this.renderChart(
|
||||
{
|
||||
labels: this.generatedLabels,
|
||||
datasets: dataset
|
||||
},
|
||||
this.generatedOptions
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { Line } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Bar } from 'vue-chartjs'
|
||||
import { Bar } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
|
||||
export default {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { Line } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { Line } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { Line } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
|
||||
export default {
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
import { generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions } from '@/mixins/charts/chartMixins'
|
||||
|
||||
export default {
|
||||
name: 'LineChart1',
|
||||
extends: Line,
|
||||
mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions],
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
label:{
|
||||
type: String,
|
||||
default: 'label|string'
|
||||
},
|
||||
borderColor:{
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
labels: Array,
|
||||
backgroundColor:{
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
pointHoverBackgroundColor:{
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
options:Object,
|
||||
finalOptions:{
|
||||
type: Object,
|
||||
default: () => ({
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
custom: CustomTooltips
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const datasets = [
|
||||
{
|
||||
label: this.label,
|
||||
borderColor: this.generatedBorderColor,
|
||||
backgroundColor: this.generatedBackgroundColor,
|
||||
pointHoverBackgroundColor: this.generatedPointHoverBackgroundColor,
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
this.renderChart(
|
||||
{
|
||||
labels: this.generatedLabels,
|
||||
datasets: datasets
|
||||
},
|
||||
this.generatedOptions
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,105 +0,0 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
import { generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions } from '@/mixins/charts/chartMixins'
|
||||
|
||||
export default {
|
||||
name: 'LineChart2',
|
||||
extends: Line,
|
||||
mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions],
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
label:{
|
||||
type: String,
|
||||
default: 'label|string'
|
||||
},
|
||||
borderColor:{
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
labels: Array,
|
||||
backgroundColor:{
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
pointHoverBackgroundColor:{
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
options:Object,
|
||||
},
|
||||
computed:{
|
||||
finalOptions () {
|
||||
return{
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
custom: CustomTooltips
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, this.data) - 5,
|
||||
max: Math.max.apply(Math, this.data) + 5
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const datasets1 = [
|
||||
{
|
||||
label: this.label,
|
||||
borderColor: this.generatedBorderColor,
|
||||
backgroundColor: this.generatedBackgroundColor,
|
||||
pointHoverBackgroundColor: this.generatedPointHoverBackgroundColor,
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
this.renderChart(
|
||||
{
|
||||
labels: this.generatedLabels,
|
||||
datasets: datasets1
|
||||
},
|
||||
this.generatedOptions
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { Line } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { Line } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
|
||||
export default {
|
||||
name: 'SocialBoxChartExample',
|
||||
extends: Line,
|
||||
props: {
|
||||
data: {
|
||||
|
||||
@@ -15,14 +15,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert show variant="primary">Primary Alert</b-alert>
|
||||
<b-alert show variant="secondary">Secondary Alert</b-alert>
|
||||
<b-alert show variant="success">Success Alert</b-alert>
|
||||
<b-alert show variant="danger">Danger Alert</b-alert>
|
||||
<b-alert show variant="warning">Warning Alert</b-alert>
|
||||
<b-alert show variant="info">Info Alert</b-alert>
|
||||
<b-alert show variant="light">Light Alert</b-alert>
|
||||
<b-alert show variant="dark">Dark Alert</b-alert>
|
||||
<p></p>
|
||||
<CAlert show variant="primary">Primary Alert</CAlert>
|
||||
<CAlert show variant="secondary">Secondary Alert</CAlert>
|
||||
<CAlert show variant="success">Success Alert</CAlert>
|
||||
<CAlert show variant="danger">Danger Alert</CAlert>
|
||||
<CAlert show variant="warning">Warning Alert</CAlert>
|
||||
<CAlert show variant="info">Info Alert</CAlert>
|
||||
<CAlert show variant="light">Light Alert</CAlert>
|
||||
<CAlert show variant="dark">Dark Alert</CAlert>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
@@ -35,32 +36,32 @@
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert show variant="primary">
|
||||
<CAlert show variant="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="secondary">
|
||||
</CAlert>
|
||||
<CAlert show variant="secondary">
|
||||
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="success">
|
||||
</CAlert>
|
||||
<CAlert show variant="success">
|
||||
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="danger">
|
||||
</CAlert>
|
||||
<CAlert show variant="danger">
|
||||
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="warning">
|
||||
</CAlert>
|
||||
<CAlert show variant="warning">
|
||||
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="info">
|
||||
</CAlert>
|
||||
<CAlert show variant="info">
|
||||
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="light">
|
||||
</CAlert>
|
||||
<CAlert show variant="light">
|
||||
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="dark">
|
||||
</CAlert>
|
||||
<CAlert show variant="dark">
|
||||
Dark Alert with
|
||||
<b-link href="#" class="alert-link">an example link</b-link>
|
||||
.
|
||||
</b-alert>
|
||||
</CAlert>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
@@ -71,7 +72,7 @@
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
||||
</div>
|
||||
<b-alert show variant="success">
|
||||
<CAlert show variant="success">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>
|
||||
Aww yeah, you successfully read this important alert message.
|
||||
@@ -82,7 +83,7 @@
|
||||
<p class="mb-0">
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
</p>
|
||||
</b-alert>
|
||||
</CAlert>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
@@ -93,15 +94,30 @@
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert show dismissible>
|
||||
<CAlert :show="true" dismissible disabled>
|
||||
Dismissible Alert!
|
||||
</b-alert>
|
||||
<b-alert variant="danger"
|
||||
</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="showDismissibleAlert"
|
||||
@dismissed="showDismissibleAlert=false">
|
||||
Dismissible Alert!
|
||||
</b-alert>
|
||||
</CAlert>
|
||||
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
|
||||
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
|
||||
</b-btn>
|
||||
@@ -114,14 +130,15 @@
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert :show="dismissCountDown"
|
||||
<CAlert :show="dismissCountDown"
|
||||
dismissible
|
||||
variant="warning"
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
|
||||
</b-alert>
|
||||
<b-alert :show="dismissCountDown"
|
||||
</CAlert>
|
||||
|
||||
<CAlert :show="dismissCountDown"
|
||||
dismissible
|
||||
variant="info"
|
||||
@dismissed="dismissCountdown=0"
|
||||
@@ -132,7 +149,7 @@
|
||||
:value="dismissCountDown"
|
||||
height="4px">
|
||||
</b-progress>
|
||||
</b-alert>
|
||||
</CAlert>
|
||||
<b-btn @click="showAlert" variant="info" class="m-1">
|
||||
Show alert with timer
|
||||
</b-btn>
|
||||
@@ -145,8 +162,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CAlert from './CAlert'
|
||||
// import CButtonClose from './CButtonClose'
|
||||
export default {
|
||||
name: 'alerts',
|
||||
// components: {
|
||||
// CAlert,
|
||||
// CButtonClose
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
dismissSecs: 10,
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
import CButtonClose from './CButtonClose'
|
||||
|
||||
export default {
|
||||
name: 'CAlert',
|
||||
components: {CButtonClose},
|
||||
render (h) {
|
||||
if (!this.localShow) {
|
||||
// If not showing, render placeholder
|
||||
return h(false)
|
||||
}
|
||||
let dismissBtn = h(false)
|
||||
if (this.dismissible) {
|
||||
dismissBtn = this.$scopedSlots.default ?
|
||||
this.$scopedSlots.default({dismiss: this.dismiss}) :
|
||||
h(
|
||||
'CButtonClose',
|
||||
{ on: { click: this.dismiss }},
|
||||
[ this.$slots.dismiss ]
|
||||
)
|
||||
}
|
||||
const alert = h(
|
||||
'div',
|
||||
{class: this.classObject, attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}},
|
||||
[dismissBtn, this.$slots.default]
|
||||
)
|
||||
return !this.fade ? alert : h(
|
||||
'transition',
|
||||
{ props: { name: 'fade', appear: true } },
|
||||
[ alert ]
|
||||
)
|
||||
},
|
||||
model: {
|
||||
prop: 'show',
|
||||
event: 'input'
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
countDownTimerId: null,
|
||||
dismissed: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classObject () {
|
||||
return ['alert', `alert-${this.variant}`, this.dismissible ? 'alert-dismissible' : '']
|
||||
},
|
||||
localShow () {
|
||||
return !this.dismissed && (this.countDownTimerId || this.show)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'info'
|
||||
},
|
||||
dismissible: {
|
||||
type: [Boolean, Object],
|
||||
default: false
|
||||
},
|
||||
show: {
|
||||
type: [Boolean, Number],
|
||||
default: false
|
||||
},
|
||||
fade: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show () {
|
||||
this.showChanged()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.showChanged()
|
||||
},
|
||||
destroyed /* istanbul ignore next */ () {
|
||||
this.clearCounter()
|
||||
},
|
||||
methods: {
|
||||
dismiss () {
|
||||
this.clearCounter()
|
||||
this.dismissed = true
|
||||
this.$emit('dismissed')
|
||||
this.$emit('input', false)
|
||||
if (typeof this.show === 'number') {
|
||||
this.$emit('dismiss-count-down', 0)
|
||||
this.$emit('input', 0)
|
||||
} else {
|
||||
this.$emit('input', false)
|
||||
}
|
||||
},
|
||||
clearCounter () {
|
||||
if (this.countDownTimerId) {
|
||||
clearInterval(this.countDownTimerId)
|
||||
this.countDownTimerId = null
|
||||
}
|
||||
},
|
||||
showChanged () {
|
||||
// Reset counter status
|
||||
this.clearCounter()
|
||||
// Reset dismiss status
|
||||
this.dismissed = false
|
||||
// No timer for boolean values
|
||||
if (this.show === true || this.show === false || this.show === null || this.show === 0) {
|
||||
return
|
||||
}
|
||||
// Start counter (ensure we have an integer value)
|
||||
let dismissCountDown = parseInt(this.show, 10) || 1
|
||||
this.countDownTimerId = setInterval(() => {
|
||||
if (dismissCountDown < 1) {
|
||||
this.dismiss()
|
||||
return
|
||||
}
|
||||
dismissCountDown--
|
||||
this.$emit('dismiss-count-down', dismissCountDown)
|
||||
this.$emit('input', dismissCountDown)
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { mergeData } from 'vue-functional-data-merge'
|
||||
export default {
|
||||
name: 'CButtonClose',
|
||||
functional: true,
|
||||
render (h, { data, props, slots }) {
|
||||
const componentData = {
|
||||
staticClass: 'close',
|
||||
attrs: {
|
||||
type: props.type || 'button',
|
||||
'aria-label': props.ariaLabel || 'Close'
|
||||
}
|
||||
}
|
||||
if (!slots().default)
|
||||
componentData.domProps = { innerHTML: '×' }
|
||||
return h('button', mergeData(data, componentData), slots().default)
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
### Widget01
|
||||
|
||||
This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
|
||||
|
||||
Value is the procentage value of displayed progress-bar.
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
variant | `''`
|
||||
value | `25`
|
||||
header| `'header:string'`
|
||||
text | `'text:string'`
|
||||
footer | `'footer:string'`
|
||||
|
||||
#### Example:
|
||||
> <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
> variant="info" :value="30"/>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<b-card :class="styleClasses">
|
||||
<div class="h4 m-0">{{header}}</div>
|
||||
<div>{{text}}</div>
|
||||
<b-progress height={} :variant="variant" :value="value"
|
||||
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||
<small class="text-muted">{{footer}}</small>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget01',
|
||||
data () {
|
||||
return{
|
||||
backgroundColor: '',
|
||||
styleClasses: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if(this.variant.includes('background')){
|
||||
this.backgroundColor = this.variant.replace('background-','');
|
||||
this.styleClasses = 'text-white bg-' + this.backgroundColor
|
||||
}
|
||||
},
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
footer: {
|
||||
type: String,
|
||||
default: 'footer:string'
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 25
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +0,0 @@
|
||||
### Widget02
|
||||
This widget can be display with or without link. If you want to display link set showLink property to true.
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
iconClasses | `'fa fa-cogs bg-primary'`
|
||||
showLink | `true`
|
||||
header| `'header:string'`
|
||||
text | `'text:string'`
|
||||
link | `'#'`
|
||||
|
||||
#### Example:
|
||||
> <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"
|
||||
:showLink="true" link="#"/>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
||||
<b-card-body class="p-3 clearfix">
|
||||
<i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 mt-2">{{header}}</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
|
||||
</b-card-body>
|
||||
<div slot="footer" v-if="showLink">
|
||||
<b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
|
||||
</div>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget02',
|
||||
props: {
|
||||
iconClasses: {
|
||||
type: String,
|
||||
default: 'fa fa-cogs bg-primary'
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
showLink: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
link: {
|
||||
type: String,
|
||||
default: '#'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,11 +0,0 @@
|
||||
### Widget03
|
||||
This widget style depends classes attached to iconClasses property. If you want to get diffrent size of icon block just add padding utility classes (i.e. 'px-5').
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
iconClasses | `'fa fa-cogs bg-primary'`
|
||||
header| `'header:string'`
|
||||
text | `'text:string'`
|
||||
|
||||
#### Example:
|
||||
> <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="p-0 clearfix">
|
||||
<i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 pt-3">{{header}}</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget03',
|
||||
props: {
|
||||
iconClasses: {
|
||||
type: String,
|
||||
default: 'fa fa-cogs bg-primary'
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,15 +0,0 @@
|
||||
### Widget04
|
||||
This widget style depends on type property which defines which social widget background color and icon will be used (i.e facebook, twitter, linkedin, google-plus). Inside component there is default slot for placing data chart.
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
type | `facebook`
|
||||
rightHeader | `'rightHeader:string'`
|
||||
rightFooter | `'rightFooter:string'`
|
||||
leftHeader | `'leftHeader:string'`
|
||||
leftFooter | `'leftFooter:string'`
|
||||
|
||||
|
||||
#### Example:
|
||||
> <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts"
|
||||
> leftHeader="292" leftFooter="feeds"/>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div class="brand-card">
|
||||
<div :class="'bg-' + type" class="brand-card-header">
|
||||
<i class="fa" :class="'fa-'+ type"></i>
|
||||
<div class="chart-wrapper">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-card-body">
|
||||
<div>
|
||||
<div class="text-value">{{rightHeader}}</div>
|
||||
<div class="text-uppercase text-muted small">{{rightFooter}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-value">{{leftHeader}}</div>
|
||||
<div class="text-uppercase text-muted small">{{leftFooter}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget04',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'facebook'
|
||||
},
|
||||
rightHeader: {
|
||||
type: String,
|
||||
default: 'rightHeader:string'
|
||||
},
|
||||
rightFooter: {
|
||||
type: String,
|
||||
default: 'rightFooter:string'
|
||||
},
|
||||
leftHeader: {
|
||||
type: String,
|
||||
default: 'leftHeader:string'
|
||||
},
|
||||
leftFooter: {
|
||||
type: String,
|
||||
default: 'leftFooter:string'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,15 +0,0 @@
|
||||
### Widget05
|
||||
|
||||
This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
|
||||
|
||||
Value is the procentage value of displayed progress-bar.
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
variant | `success`
|
||||
value | `30`
|
||||
iconClasses | `icon-people`
|
||||
header| `header:string`
|
||||
text | `text:string`
|
||||
|
||||
> <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<b-card :class="styleClasses">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i :class="iconClasses"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">{{header}}</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
|
||||
<b-progress height={} :variant="variant" :value="value"
|
||||
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget05',
|
||||
data () {
|
||||
return{
|
||||
backgroundColor: '',
|
||||
styleClasses: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if(this.variant.includes('background')){
|
||||
this.backgroundColor = this.variant.replace('background-','');
|
||||
this.styleClasses = 'text-white bg-' + this.backgroundColor
|
||||
}
|
||||
},
|
||||
props: {
|
||||
iconClasses: {
|
||||
type: String,
|
||||
default: 'icon-people'
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 25
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,21 +0,0 @@
|
||||
### Widget06
|
||||
|
||||
This widget can style is defined by cardClasses. Inside component there is additional slot for chart (name="chart").
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
cardClasses | `''`
|
||||
header| `header:string`
|
||||
text | `text:string`
|
||||
|
||||
> <widget06 cardClasses="bg-primary" header="9.823" text="Members online">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</widget06>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<b-card no-body :class="cardClasses">
|
||||
<b-card-body class="pb-0">
|
||||
<slot name='dropdown'></slot>
|
||||
<h4 class="mb-0">{{header}}</h4>
|
||||
<p>{{text}}</p>
|
||||
</b-card-body>
|
||||
<div class="chart-wrapper">
|
||||
<slot name='chart'></slot>
|
||||
</div>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget06',
|
||||
data () {
|
||||
return{
|
||||
backgroundColor: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
props: {
|
||||
cardClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,19 +0,0 @@
|
||||
### Widget07
|
||||
|
||||
This widget can style is defined by cardClasses. Inside component there is default slot for additional data (i.e. chart).
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
cardClasses | `'bg-primary'`
|
||||
rightHeader | `'rightHeader:string'`
|
||||
rightFooter | `'rightFooter:string'`
|
||||
leftHeader | `'leftHeader:string'`
|
||||
leftFooter | `'leftFooter:string'`
|
||||
|
||||
> <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM'
|
||||
leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<line-chart1 style="height:40px" chartId="widget07_line1" label='Sales'
|
||||
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' />
|
||||
<bar-chart1 style="height:40px" chartId="widget07_bar1" label='Sales'
|
||||
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'/>
|
||||
</widget07>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div :class="cardClasses" class="card-header">
|
||||
<div class="font-weight-bold">
|
||||
<span>{{rightHeader}}</span>
|
||||
<span class="float-right">{{leftHeader}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<small>{{rightFooter}}</small>
|
||||
</span>
|
||||
<span class="float-right">
|
||||
<small>{{leftFooter}}</small>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget07',
|
||||
props: {
|
||||
cardClasses: {
|
||||
type: String,
|
||||
default: 'bg-primary'
|
||||
},
|
||||
rightHeader: {
|
||||
type: String,
|
||||
default: 'rightHeader:string'
|
||||
},
|
||||
rightFooter: {
|
||||
type: String,
|
||||
default: 'rightFooter:string'
|
||||
},
|
||||
leftHeader: {
|
||||
type: String,
|
||||
default: 'leftHeader:string'
|
||||
},
|
||||
leftFooter: {
|
||||
type: String,
|
||||
default: 'leftFooter:string'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,19 +0,0 @@
|
||||
### Widget08
|
||||
|
||||
This widget can style is defined by cardClasses. Inside component there is default slot for additional data (i.e. chart).
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
cardClasses | `'bg-primary'`
|
||||
rightHeader | `'rightHeader:string'`
|
||||
rightFooter | `'rightFooter:string'`
|
||||
leftHeader | `'leftHeader:string'`
|
||||
leftFooter | `'leftFooter:string'`
|
||||
|
||||
> <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM'
|
||||
leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<line-chart1 style="height:40px" chartId="widget07_line1" label='Sales'
|
||||
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' />
|
||||
<bar-chart1 style="height:40px" chartId="widget07_bar1" label='Sales'
|
||||
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'/>
|
||||
</widget07>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="text-muted small text-uppercase font-weight-bold">{{header}}</div>
|
||||
<div class="h2 py-3">{{text}}</div>
|
||||
<div class="chart-wrapper">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget08',
|
||||
props: {
|
||||
cardClasses: {
|
||||
type: String,
|
||||
default: 'bg-primary'
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
// import Vue from 'vue'
|
||||
import CoreuiVueModule from '@coreui/vue'
|
||||
// Vue.use(CoreuiVueModule)
|
||||
|
||||
test("Should register all components when installed", () => {
|
||||
|
||||
const component = jest.fn();
|
||||
const Vue = { component };
|
||||
|
||||
CoreuiVueModule.install(Vue);
|
||||
|
||||
// Test if a particular component was registered
|
||||
expect(component).toBeCalledWith("Aside", expect.any(Object));
|
||||
expect(component).toBeCalledWith("AsideToggler", expect.any(Object));
|
||||
expect(component).toBeCalledWith("Breadcrumb", expect.any(Object));
|
||||
expect(component).toBeCalledWith("Callout", expect.any(Object));
|
||||
expect(component).toBeCalledWith("Footer", expect.any(Object));
|
||||
expect(component).toBeCalledWith("Header", expect.any(Object));
|
||||
expect(component).toBeCalledWith("HeaderDropdown", expect.any(Object));
|
||||
expect(component).toBeCalledWith("Sidebar", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarFooter", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarForm", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarHeader", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarMinimizer", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarNav", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarNavDivider", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarNavItem", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarNavDropdown", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarNavLabel", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarNavLink", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarNavTitle", expect.any(Object));
|
||||
expect(component).toBeCalledWith("SidebarToggler", expect.any(Object));
|
||||
expect(component).toBeCalledWith("Switch", expect.any(Object));
|
||||
|
||||
// Test how many times component got registered
|
||||
// const totalOfComponents = 21;
|
||||
// expect(component).toHaveBeenCalledTimes(totalOfComponents);
|
||||
});
|
||||
@@ -1,37 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import Component from '@/views/widgets/Widget01'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
const ComponentName = 'Widget01'
|
||||
const wrapper = shallowMount(Component)
|
||||
|
||||
describe(ComponentName + '.vue', () => {
|
||||
it('has a name', () => {
|
||||
expect(Component.name).toMatch(ComponentName)
|
||||
})
|
||||
it('has a created hook', () => {
|
||||
expect(typeof Component.data).toMatch('function')
|
||||
})
|
||||
it('is Vue instance', () => {
|
||||
expect(wrapper.isVueInstance()).toBe(true)
|
||||
})
|
||||
it('correctly sets default props and data when created', () => {
|
||||
const vm = new Vue(Component).$mount()
|
||||
expect(vm.backgroundColor).toBe('')
|
||||
expect(vm.styleClasses).toBe('')
|
||||
expect(vm.header).toBe('header:string')
|
||||
expect(vm.text).toBe('text:string')
|
||||
expect(vm.variant).toBe('')
|
||||
expect(vm.footer).toBe('footer:string')
|
||||
expect(vm.value == 25).toBe(true)
|
||||
})
|
||||
it('correctly sets variant when background is not white', () => {
|
||||
const Constructor = Vue.extend(Component)
|
||||
const vm = new Constructor({ propsData: {variant : 'background-success'}}).$mount()
|
||||
expect(vm.backgroundColor).toBe('success')
|
||||
expect(vm.styleClasses).toBe('text-white bg-success')
|
||||
})
|
||||
})
|
||||
@@ -1,26 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import Component from '@/views/widgets/Widget02'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
const ComponentName = 'Widget02'
|
||||
const wrapper = shallowMount(Component)
|
||||
|
||||
describe(ComponentName + '.vue', () => {
|
||||
it('has a name', () => {
|
||||
expect(Component.name).toMatch(ComponentName)
|
||||
})
|
||||
it('is Vue instance', () => {
|
||||
expect(wrapper.isVueInstance()).toBe(true)
|
||||
})
|
||||
it('correctly sets default props when created', () => {
|
||||
const vm = new Vue(Component).$mount()
|
||||
expect(vm.header).toBe('header:string')
|
||||
expect(vm.text).toBe('text:string')
|
||||
expect(vm.link).toBe('#')
|
||||
expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
|
||||
expect(vm.showLink).toBe(false)
|
||||
})
|
||||
})
|
||||
@@ -1,24 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import Component from '@/views/widgets/Widget03'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
const ComponentName = 'Widget03'
|
||||
const wrapper = shallowMount(Component)
|
||||
|
||||
describe(ComponentName + '.vue', () => {
|
||||
it('has a name', () => {
|
||||
expect(Component.name).toMatch(ComponentName)
|
||||
})
|
||||
it('is Vue instance', () => {
|
||||
expect(wrapper.isVueInstance()).toBe(true)
|
||||
})
|
||||
it('correctly sets default props when created', () => {
|
||||
const vm = new Vue(Component).$mount()
|
||||
expect(vm.header).toBe('header:string')
|
||||
expect(vm.text).toBe('text:string')
|
||||
expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
|
||||
})
|
||||
})
|
||||
@@ -1,24 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import Component from '@/views/widgets/Widget04'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
const ComponentName = 'Widget04'
|
||||
const wrapper = shallowMount(Component)
|
||||
|
||||
describe(ComponentName + '.vue', () => {
|
||||
it('has a name', () => {
|
||||
expect(Component.name).toMatch(ComponentName)
|
||||
})
|
||||
it('is Vue instance', () => {
|
||||
expect(wrapper.isVueInstance()).toBe(true)
|
||||
})
|
||||
it('correctly sets default props and data when created', () => {
|
||||
expect(wrapper.props().rightHeader).toBe('rightHeader:string')
|
||||
expect(wrapper.props().rightFooter).toBe('rightFooter:string')
|
||||
expect(wrapper.props().leftHeader).toBe('leftHeader:string')
|
||||
expect(wrapper.props().leftFooter).toBe('leftFooter:string')
|
||||
})
|
||||
})
|
||||
@@ -1,36 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import Component from '@/views/widgets/Widget05'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
const ComponentName = 'Widget05'
|
||||
const wrapper = shallowMount(Component)
|
||||
|
||||
describe(ComponentName + '.vue', () => {
|
||||
it('has a name', () => {
|
||||
expect(Component.name).toMatch(ComponentName)
|
||||
})
|
||||
it('is Vue instance', () => {
|
||||
expect(wrapper.isVueInstance()).toBe(true)
|
||||
})
|
||||
it('has a created hook', () => {
|
||||
expect(typeof Component.data).toMatch('function')
|
||||
})
|
||||
it('correctly sets default props and data when created', () => {
|
||||
const vm = new Vue(Component).$mount()
|
||||
expect(vm.backgroundColor).toBe('')
|
||||
expect(vm.styleClasses).toBe('')
|
||||
expect(vm.header).toBe('header:string')
|
||||
expect(vm.text).toBe('text:string')
|
||||
expect(vm.variant).toBe('')
|
||||
expect(vm.value == 25).toBe(true)
|
||||
})
|
||||
it('correctly sets variant when background is not white', () => {
|
||||
const Constructor = Vue.extend(Component)
|
||||
const vm = new Constructor({ propsData: {variant : 'background-success'}}).$mount()
|
||||
expect(vm.backgroundColor).toBe('success')
|
||||
expect(vm.styleClasses).toBe('text-white bg-success')
|
||||
})
|
||||
})
|
||||
@@ -1,23 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import Component from '@/views/widgets/Widget06'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
const ComponentName = 'Widget06'
|
||||
const wrapper = shallowMount(Component)
|
||||
|
||||
describe(ComponentName + '.vue', () => {
|
||||
it('has a name', () => {
|
||||
expect(Component.name).toMatch(ComponentName)
|
||||
})
|
||||
it('is Vue instance', () => {
|
||||
expect(wrapper.isVueInstance()).toBe(true)
|
||||
})
|
||||
it('correctly sets default props and data when created', () => {
|
||||
expect(wrapper.props().cardClasses).toBe('')
|
||||
expect(wrapper.props().header).toBe('header:string')
|
||||
expect(wrapper.props().text).toBe('text:string')
|
||||
})
|
||||
})
|
||||
@@ -1,18 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import Component from '@/views/widgets/Widget07'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
const ComponentName = 'Widget07'
|
||||
const wrapper = shallowMount(Component)
|
||||
|
||||
describe(ComponentName + '.vue', () => {
|
||||
it('has a name', () => {
|
||||
expect(Component.name).toMatch(ComponentName)
|
||||
})
|
||||
it('is Vue instance', () => {
|
||||
expect(wrapper.isVueInstance()).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -1,18 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import Component from '@/views/widgets/Widget08'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
const ComponentName = 'Widget08'
|
||||
const wrapper = shallowMount(Component)
|
||||
|
||||
describe(ComponentName + '.vue', () => {
|
||||
it('has a name', () => {
|
||||
expect(Component.name).toMatch(ComponentName)
|
||||
})
|
||||
it('is Vue instance', () => {
|
||||
expect(wrapper.isVueInstance()).toBe(true)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user