chore: 3.0.0-alpha.5 version
This commit is contained in:
woothu
@@ -5,6 +5,7 @@ node_modules
|
|||||||
|
|
||||||
/tests/e2e/reports/
|
/tests/e2e/reports/
|
||||||
selenium-debug.log
|
selenium-debug.log
|
||||||
|
chromedriver.log
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
|
|||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [
|
presets: [
|
||||||
['@vue/app']
|
['@babel/preset-env']
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
+7
-9
@@ -8,24 +8,22 @@ module.exports = {
|
|||||||
transform: {
|
transform: {
|
||||||
'^.+\\.vue$': 'vue-jest',
|
'^.+\\.vue$': 'vue-jest',
|
||||||
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
|
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
|
||||||
'^.+\\.jsx?$': 'babel-jest'
|
'^.+\\.(js|jsx)?$': '<rootDir>/node_modules/babel-jest'
|
||||||
},
|
},
|
||||||
|
transformIgnorePatterns: ['/node_modules/(?!@coreui/icons/vue|coreui)'],
|
||||||
moduleNameMapper: {
|
moduleNameMapper: {
|
||||||
'^@/(.*)$': '<rootDir>/src/$1'
|
'^@/(.*)$': '<rootDir>/src/$1'
|
||||||
},
|
},
|
||||||
snapshotSerializers: [
|
snapshotSerializers: [
|
||||||
'jest-serializer-vue'
|
'jest-serializer-vue'
|
||||||
],
|
],
|
||||||
testMatch: [
|
testMatch: ['<rootDir>/tests/unit/**/*.spec.js'],
|
||||||
'<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
|
|
||||||
'<rootDir>/tests/unit/Dashboard.spec.js'
|
|
||||||
],
|
|
||||||
verbose: true,
|
verbose: true,
|
||||||
testURL: "http://localhost/",
|
testURL: 'http://localhost/',
|
||||||
collectCoverage: true,
|
collectCoverage: true,
|
||||||
collectCoverageFrom: [
|
collectCoverageFrom: [
|
||||||
"src/**/*.{js,vue}",
|
'src/**/*.{js,vue}',
|
||||||
"!**/node_modules/**"
|
'!**/node_modules/**'
|
||||||
],
|
],
|
||||||
coverageReporters: ["html", "text-summary"]
|
coverageReporters: ['html', 'text-summary']
|
||||||
}
|
}
|
||||||
|
|||||||
Generated
+5966
-30394
File diff suppressed because it is too large
Load Diff
+19
-20
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@coreui/coreui-free-vue-admin-template",
|
"name": "@coreui/coreui-free-vue-admin-template",
|
||||||
"version": "3.0.0-alpha.4",
|
"version": "3.0.0-alpha.5",
|
||||||
"description": "Open Source Bootstrap Admin Template",
|
"description": "Open Source Bootstrap Admin Template",
|
||||||
"author": "Łukasz Holeczek",
|
"author": "Łukasz Holeczek",
|
||||||
"homepage": "http://coreui.io",
|
"homepage": "http://coreui.io",
|
||||||
@@ -14,30 +14,29 @@
|
|||||||
"test:e2e": "vue-cli-service test:e2e"
|
"test:e2e": "vue-cli-service test:e2e"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@coreui/coreui": "next",
|
"@coreui/coreui": "3.0.0-alpha.14",
|
||||||
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
|
"@coreui/coreui-chartjs": "coreui/coreui-chartjs#v2",
|
||||||
"@coreui/coreui-vue-chartjs": "coreui/coreui-vue-chartjs",
|
|
||||||
"@coreui/icons": "coreui/coreui-icons#v1-alpha",
|
"@coreui/icons": "coreui/coreui-icons#v1-alpha",
|
||||||
"@coreui/vue": "coreui/coreui-vue#3.0.0-alpha.4",
|
"@coreui/vue": "coreui/coreui-vue#3.0.0-alpha.5",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vue-router": "^3.0.7"
|
"vue-router": "^3.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "^3.9.2",
|
"@vue/cli-plugin-babel": "^4.0.4",
|
||||||
"@vue/cli-plugin-e2e-nightwatch": "^3.9.2",
|
"@vue/cli-plugin-e2e-nightwatch": "^4.0.4",
|
||||||
"@vue/cli-plugin-eslint": "^3.9.2",
|
"@vue/cli-plugin-eslint": "^4.0.4",
|
||||||
"@vue/cli-plugin-unit-jest": "^3.9.0",
|
"@vue/cli-plugin-unit-jest": "^4.0.4",
|
||||||
"@vue/cli-service": "^3.9.2",
|
"@vue/cli-service": "^4.0.4",
|
||||||
"@vue/test-utils": "^1.0.0-beta.25",
|
"@vue/test-utils": "^1.0.0-beta.29",
|
||||||
"babel-core": "^6.26.3",
|
"@babel/core": "7.6.4",
|
||||||
"babel-plugin-dynamic-import-node": "^2.3.0",
|
"babel-eslint": "^10.0.3",
|
||||||
"babel-plugin-module-resolver": "^3.2.0",
|
"babel-jest": "24.9.0",
|
||||||
"babel-preset-vue-app": "^2.0.0",
|
"core-js": "3.3.2",
|
||||||
"babel-jest": "23.6.0",
|
"chromedriver": "^77.0.0",
|
||||||
"growl": "^1.10.5",
|
"eslint": "^6.5.1",
|
||||||
"https-proxy-agent": "^2.2.2",
|
"eslint-plugin-vue": "^5.2.3",
|
||||||
"node-sass": "^4.12.0",
|
"node-sass": "^4.12.0",
|
||||||
"sass-loader": "^7.1.0",
|
"sass-loader": "^8.0.0",
|
||||||
"vue-template-compiler": "^2.6.10"
|
"vue-template-compiler": "^2.6.10"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
|
|||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<svg id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376 178">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-2 {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<title>Base_negative</title>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="cls-2" d="M128,56.1244,89,33.6077a12,12,0,0,0-12,0L38,56.1243a12.0339,12.0339,0,0,0-6,10.3924V111.55a12.0333,12.0333,0,0,0,6,10.3923L77,144.459a12,12,0,0,0,12,0l39-22.5167a12.0333,12.0333,0,0,0,6-10.3923V66.5167A12.0336,12.0336,0,0,0,128,56.1244ZM126,111.55a4,4,0,0,1-2,3.4641L85,137.5308a4,4,0,0,1-4,0L42,115.0141a4,4,0,0,1-2-3.4641V66.5167a4,4,0,0,1,2-3.4641L81,40.5359a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
|
||||||
|
<path class="cls-2" d="M106.0216,102.0713h-2.866a3.9993,3.9993,0,0,0-1.9246.4935L83.95,112.05,64,100.5315V77.554L83.95,66.0354l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V71.2691a2,2,0,0,0-1.04-1.7547L87.793,59.0188a8.0391,8.0391,0,0,0-7.8428.09L60,70.6262A8.0245,8.0245,0,0,0,56,77.5549v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,106.0216,102.0713Z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="cls-2" d="M200.7447,65.4285a15.0166,15.0166,0,0,0-15,14.9995V97.7054a15,15,0,1,0,30,0V80.428A15.0166,15.0166,0,0,0,200.7447,65.4285Zm7,32.2769a7,7,0,1,1-14,0V80.428a7,7,0,0,1,14,0Z"/>
|
||||||
|
<path class="cls-2" d="M164.0788,73.4878a7.01,7.01,0,0,1,7.8681,6.0752.9893.9893,0,0,0,.9843.865h6.0305a1.0109,1.0109,0,0,0,.9987-1.0971,15.0183,15.0183,0,0,0-15.7162-13.8837A15.288,15.288,0,0,0,150,80.8635V97.27a15.288,15.288,0,0,0,14.2441,15.4163A15.0184,15.0184,0,0,0,179.96,98.8025a1.0108,1.0108,0,0,0-.9987-1.0971h-6.0305a.9893.9893,0,0,0-.9843.865,7.01,7.01,0,0,1-7.868,6.0757A7.1642,7.1642,0,0,1,158,97.4612V80.6724A7.1638,7.1638,0,0,1,164.0788,73.4878Z"/>
|
||||||
|
<path class="cls-2" d="M246.9222,92.9944a12.1584,12.1584,0,0,0,7.1842-11.0771V78.2161A12.1494,12.1494,0,0,0,241.957,66.0667H225a1,1,0,0,0-1,1v44a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1v-17h6.6215l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8158-11.0771a4.1538,4.1538,0,0,1-4.1489,4.1494h-9.8511v-12h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
|
||||||
|
<path class="cls-2" d="M289,66.0667H263a1,1,0,0,0-1,1v44a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1H270v-12h13a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1H270v-10h19a1,1,0,0,0,1-1v-6A1,1,0,0,0,289,66.0667Z"/>
|
||||||
|
<path class="cls-2" d="M327,66.0667h-6a1,1,0,0,0-1,1V89.7142a7.0066,7.0066,0,1,1-14,0V67.0667a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V89.7142a15.0031,15.0031,0,1,0,30,0V67.0667A1,1,0,0,0,327,66.0667Z"/>
|
||||||
|
<rect class="cls-2" x="336" y="66.0667" width="8" height="38" rx="1"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,24 @@
|
|||||||
|
<svg id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376.0106 178">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #3c4b64;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<title>Base</title>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="cls-1" d="M128,56.1244,89,33.6077a12,12,0,0,0-12,0L38,56.1243a12.0339,12.0339,0,0,0-6,10.3924V111.55a12.0333,12.0333,0,0,0,6,10.3923L77,144.459a12,12,0,0,0,12,0l39-22.5167a12.0333,12.0333,0,0,0,6-10.3923V66.5167A12.0336,12.0336,0,0,0,128,56.1244ZM126,111.55a4,4,0,0,1-2,3.4641L85,137.5308a4,4,0,0,1-4,0L42,115.0141a4,4,0,0,1-2-3.4641V66.5167a4,4,0,0,1,2-3.4641L81,40.5359a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
|
||||||
|
<path class="cls-1" d="M106.0216,102.0713h-2.866a3.9993,3.9993,0,0,0-1.9246.4935L83.95,112.05,64,100.5315V77.554L83.95,66.0354l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V71.2691a2,2,0,0,0-1.04-1.7547L87.793,59.0188a8.0391,8.0391,0,0,0-7.8428.09L60,70.6262A8.0245,8.0245,0,0,0,56,77.5549v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,106.0216,102.0713Z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="cls-1" d="M200.7447,65.4285a15.0166,15.0166,0,0,0-15,14.9995V97.7054a15,15,0,1,0,30,0V80.428A15.0166,15.0166,0,0,0,200.7447,65.4285Zm7,32.2769a7,7,0,1,1-14,0V80.428a7,7,0,0,1,14,0Z"/>
|
||||||
|
<path class="cls-1" d="M164.0788,73.4878a7.01,7.01,0,0,1,7.8681,6.0752.9893.9893,0,0,0,.9843.865h6.0305a1.0109,1.0109,0,0,0,.9987-1.0971,15.0183,15.0183,0,0,0-15.7162-13.8837A15.288,15.288,0,0,0,150,80.8635V97.27a15.288,15.288,0,0,0,14.2441,15.4163A15.0184,15.0184,0,0,0,179.96,98.8025a1.0108,1.0108,0,0,0-.9987-1.0971h-6.0305a.9893.9893,0,0,0-.9843.865,7.01,7.01,0,0,1-7.868,6.0757A7.1642,7.1642,0,0,1,158,97.4612V80.6724A7.1638,7.1638,0,0,1,164.0788,73.4878Z"/>
|
||||||
|
<path class="cls-1" d="M246.9222,92.9944a12.1584,12.1584,0,0,0,7.1842-11.0771V78.2161A12.1494,12.1494,0,0,0,241.957,66.0667H225a1,1,0,0,0-1,1v44a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1v-17h6.6215l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8158-11.0771a4.1538,4.1538,0,0,1-4.1489,4.1494h-9.8511v-12h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
|
||||||
|
<path class="cls-1" d="M289,66.0667H263a1,1,0,0,0-1,1v44a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1H270v-12h13a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1H270v-10h19a1,1,0,0,0,1-1v-6A1,1,0,0,0,289,66.0667Z"/>
|
||||||
|
<path class="cls-1" d="M327,66.0667h-6a1,1,0,0,0-1,1V89.7142a7.0066,7.0066,0,1,1-14,0V67.0667a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V89.7142a15.0031,15.0031,0,1,0,30,0V67.0667A1,1,0,0,0,327,66.0667Z"/>
|
||||||
|
<rect class="cls-1" x="336" y="66.0667" width="8" height="38" rx="1"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<title>signet_white</title>
|
||||||
|
<g id="Warstwa_1" data-name="Warstwa 1">
|
||||||
|
<g>
|
||||||
|
<path class="cls-1" d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
|
||||||
|
<path class="cls-1" d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #3c4b64;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<title>signet</title>
|
||||||
|
<g id="Warstwa_1" data-name="Warstwa 1">
|
||||||
|
<g>
|
||||||
|
<path class="cls-1" d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
|
||||||
|
<path class="cls-1" d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -1,53 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
width="707.1px" height="200px" viewBox="0 0 707.1 200" style="enable-background:new 0 0 707.1 200;" xml:space="preserve">
|
|
||||||
<style type="text/css">
|
|
||||||
.st0{fill:#1FA8D7;}
|
|
||||||
.st1{fill:#FFFFFF;}
|
|
||||||
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st5{fill:#333333;}
|
|
||||||
.st6{fill:#1EA7D6;}
|
|
||||||
</style>
|
|
||||||
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
|
|
||||||
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
|
|
||||||
86.6,166.7 144.3,133.3 115.5,116.7 "/>
|
|
||||||
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
|
|
||||||
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
|
|
||||||
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
|
|
||||||
<polygon class="st4" points="86.6,100 0,50 0,150 "/>
|
|
||||||
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
|
|
||||||
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
|
|
||||||
<g>
|
|
||||||
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
|
|
||||||
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
|
|
||||||
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
|
|
||||||
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
|
|
||||||
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
|
|
||||||
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
|
|
||||||
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
|
|
||||||
C289.3,127.4,289.9,127.3,290.4,127.3z"/>
|
|
||||||
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
|
|
||||||
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
|
|
||||||
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
|
|
||||||
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
|
|
||||||
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
|
|
||||||
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
|
|
||||||
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
|
|
||||||
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
|
|
||||||
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
|
|
||||||
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
|
|
||||||
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
|
|
||||||
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
|
|
||||||
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
|
|
||||||
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
|
|
||||||
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
|
|
||||||
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
|
|
||||||
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
|
|
||||||
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
|
|
||||||
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB |
@@ -1,53 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
width="173.2px" height="200px" viewBox="0 0 173.2 200" style="enable-background:new 0 0 173.2 200;" xml:space="preserve">
|
|
||||||
<style type="text/css">
|
|
||||||
.st0{fill:#1FA8D7;}
|
|
||||||
.st1{fill:#FFFFFF;}
|
|
||||||
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st5{fill:#333333;}
|
|
||||||
.st6{fill:#1EA7D6;}
|
|
||||||
</style>
|
|
||||||
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
|
|
||||||
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
|
|
||||||
86.6,166.7 144.3,133.3 115.5,116.7 "/>
|
|
||||||
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
|
|
||||||
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
|
|
||||||
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
|
|
||||||
<polygon class="st4" points="86.6,100 0,50 0,150 "/>
|
|
||||||
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
|
|
||||||
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
|
|
||||||
<g>
|
|
||||||
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
|
|
||||||
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
|
|
||||||
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
|
|
||||||
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
|
|
||||||
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
|
|
||||||
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
|
|
||||||
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
|
|
||||||
C289.3,127.4,289.9,127.3,290.4,127.3z"/>
|
|
||||||
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
|
|
||||||
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
|
|
||||||
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
|
|
||||||
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
|
|
||||||
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
|
|
||||||
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
|
|
||||||
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
|
|
||||||
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
|
|
||||||
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
|
|
||||||
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
|
|
||||||
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
|
|
||||||
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
|
|
||||||
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
|
|
||||||
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
|
|
||||||
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
|
|
||||||
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
|
|
||||||
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
|
|
||||||
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
|
|
||||||
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB |
+1
-1
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'app'
|
name: 'App'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -4,5 +4,8 @@
|
|||||||
// Import styles
|
// Import styles
|
||||||
@import "~@coreui/coreui/scss/coreui";
|
@import "~@coreui/coreui/scss/coreui";
|
||||||
|
|
||||||
|
// Import custom tooltips styles
|
||||||
|
@import "~@coreui/coreui-chartjs/custom-tooltips/dist/css/coreui-chartjs.css";
|
||||||
|
|
||||||
// If you want to add something do it here
|
// If you want to add something do it here
|
||||||
@import "custom";
|
@import "custom";
|
||||||
|
|||||||
@@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<CDropdown
|
|
||||||
nav
|
|
||||||
no-caret
|
|
||||||
no-popper
|
|
||||||
add-menu-classes="c-dropdown-menu-right"
|
|
||||||
>
|
|
||||||
<template #button-content>
|
|
||||||
<img
|
|
||||||
src="img/avatars/6.jpg"
|
|
||||||
class="c-img-avatar"
|
|
||||||
alt="admin@bootstrapmaster.com"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<CDropdownHeader tag="div" class="c-text-center">
|
|
||||||
<strong>Account</strong>
|
|
||||||
</CDropdownHeader>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-bell"/> Updates
|
|
||||||
<CBadge variant="info" additional-classes="hehe">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-envelope-open" /> Messages
|
|
||||||
<CBadge variant="success">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-task" /> Tasks
|
|
||||||
<CBadge variant="danger">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-comment-square" /> Comments
|
|
||||||
<CBadge variant="warning">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownHeader
|
|
||||||
tag="div"
|
|
||||||
class="c-text-center"
|
|
||||||
>
|
|
||||||
<strong>Settings</strong>
|
|
||||||
</CDropdownHeader>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-user" /> Profile
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-wrench" /> Settings
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-dollar" /> Payments
|
|
||||||
<CBadge variant="secondary">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-file" /> Projects
|
|
||||||
<CBadge variant="primary">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownDivider/>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-shield" /> Lock Account
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-lock-locked" /> Logout
|
|
||||||
</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'DefaultHeaderDropdownAccnt',
|
|
||||||
data: () => {
|
|
||||||
return { itemsCount: 42 }
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-app c-default-layout">
|
<div class="c-app">
|
||||||
<TheHeader/>
|
|
||||||
<TheSidebar/>
|
<TheSidebar/>
|
||||||
|
<div class="c-wrapper">
|
||||||
|
<TheHeader/>
|
||||||
<div class="c-body">
|
<div class="c-body">
|
||||||
<main class="c-main">
|
<main class="c-main">
|
||||||
<CBreadcrumbRouter/>
|
|
||||||
<CContainer fluid>
|
<CContainer fluid>
|
||||||
<transition name="fade">
|
<transition name="fade">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
@@ -14,6 +14,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<TheFooter/>
|
<TheFooter/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -22,7 +23,7 @@ import TheHeader from './TheHeader'
|
|||||||
import TheFooter from './TheFooter'
|
import TheFooter from './TheFooter'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'full',
|
name: 'TheContainer',
|
||||||
components: {
|
components: {
|
||||||
TheSidebar,
|
TheSidebar,
|
||||||
TheHeader,
|
TheHeader,
|
||||||
@@ -2,10 +2,10 @@
|
|||||||
<CFooter>
|
<CFooter>
|
||||||
<div>
|
<div>
|
||||||
<a href="https://coreui.io">CoreUI</a>
|
<a href="https://coreui.io">CoreUI</a>
|
||||||
<span class="c-ml-1">© 2018 creativeLabs.</span>
|
<span class="ml-1">© 2019 creativeLabs.</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-ml-auto">
|
<div class="ml-auto">
|
||||||
<span class="c-mr-1">Powered by</span>
|
<span class="mr-1">Powered by</span>
|
||||||
<a href="https://coreui.io">CoreUI for Vue</a>
|
<a href="https://coreui.io">CoreUI for Vue</a>
|
||||||
</div>
|
</div>
|
||||||
</CFooter>
|
</CFooter>
|
||||||
|
|||||||
@@ -1,43 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<CHeader fixed>
|
<CHeader fixed with-subheader light>
|
||||||
<CSidebarToggler class="c-header-toggler c-d-lg-none"/>
|
<CToggler
|
||||||
<CLink class="c-header-brand" to="#">
|
in-header
|
||||||
<img class="c-navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
|
class="c-header-toggler ml-3"
|
||||||
<!-- <img class="c-navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo"> -->
|
v-c-emit-root-event:toggle-sidebar
|
||||||
</CLink>
|
/>
|
||||||
<CSidebarToggler class="c-header-toggler c-d-md-down-none"/>
|
<img
|
||||||
<ul class="c-header-nav c-d-md-down-none">
|
class="c-header-brand mx-auto d-lg-none"
|
||||||
<CNavItem class="c-px-3" to="/dashboard">Dashboard</CNavItem>
|
src="img/brand/coreui-base.svg"
|
||||||
<CNavItem class="c-px-3" to="/users" exact>Users</CNavItem>
|
width="97"
|
||||||
<CNavItem class="c-px-3">Settings</CNavItem>
|
height="46"
|
||||||
</ul>
|
alt="CoreUI Logo"
|
||||||
<CNav class="c-header-nav c-ml-auto">
|
/>
|
||||||
<CNavItem class="c-d-md-down-none">
|
<CHeaderNav class="d-md-down-none mr-auto">
|
||||||
|
<CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
|
||||||
|
<CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
|
||||||
|
<CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
|
||||||
|
</CHeaderNav>
|
||||||
|
<CHeaderNav class="mr-4">
|
||||||
|
<CHeaderNavItem class="d-md-down-none mx-2">
|
||||||
<i class="cui-bell"></i>
|
<i class="cui-bell"></i>
|
||||||
<CBadge pill variant="danger">5</CBadge>
|
</CHeaderNavItem>
|
||||||
</CNavItem>
|
<CHeaderNavItem class="d-md-down-none mx-2">
|
||||||
<CNavItem class="c-d-md-down-none">
|
|
||||||
<i class="cui-list"></i>
|
<i class="cui-list"></i>
|
||||||
</CNavItem>
|
</CHeaderNavItem>
|
||||||
<CNavItem class="d-md-down-none">
|
<CHeaderNavItem class="d-md-down-none mx-2">
|
||||||
<i class="cui-location-pin"></i>
|
<i class="cui-envelope-open"></i>
|
||||||
</CNavItem>
|
</CHeaderNavItem>
|
||||||
<DefaultHeaderDropdownAccnt/>
|
<TheHeaderDropdownAccnt/>
|
||||||
</CNav>
|
</CHeaderNav>
|
||||||
<!-- <CSidebarToggler
|
<div class="c-subheader px-3">
|
||||||
class="c-header-toggler c-d-md-down-none"
|
<CBreadcrumbRouter class="border-0"/>
|
||||||
aside
|
</div>
|
||||||
/> -->
|
|
||||||
</CHeader>
|
</CHeader>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
|
import TheHeaderDropdownAccnt from './TheHeaderDropdownAccnt'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TheHeader',
|
name: 'TheHeader',
|
||||||
components: {
|
components: {
|
||||||
DefaultHeaderDropdownAccnt
|
TheHeaderDropdownAccnt
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -0,0 +1,80 @@
|
|||||||
|
<template>
|
||||||
|
<CDropdown
|
||||||
|
nav
|
||||||
|
no-caret
|
||||||
|
class="c-header-nav-items"
|
||||||
|
placement="bottom-end"
|
||||||
|
add-menu-classes="pt-0"
|
||||||
|
:show.sync="show"
|
||||||
|
>
|
||||||
|
<template #toggler>
|
||||||
|
<CLink class="c-header-nav-link" @click="show = !show">
|
||||||
|
<div class="c-avatar">
|
||||||
|
<img
|
||||||
|
src="img/avatars/6.jpg"
|
||||||
|
class="c-avatar-img "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CLink>
|
||||||
|
</template>
|
||||||
|
<CDropdownHeader tag="div" class="text-center" color="light">
|
||||||
|
<strong>Account</strong>
|
||||||
|
</CDropdownHeader>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-bell mr-2"/> Updates
|
||||||
|
<CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-envelope-open mr-2" /> Messages
|
||||||
|
<CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-task mr-2" /> Tasks
|
||||||
|
<CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-comment-square mr-2" /> Comments
|
||||||
|
<CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownHeader
|
||||||
|
tag="div"
|
||||||
|
class="text-center"
|
||||||
|
color="light"
|
||||||
|
>
|
||||||
|
<strong>Settings</strong>
|
||||||
|
</CDropdownHeader>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-user mr-2" /> Profile
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-wrench mr-2" /> Settings
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-dollar mr-2" /> Payments
|
||||||
|
<CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-file mr-2" /> Projects
|
||||||
|
<CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownDivider/>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-shield mr-2" /> Lock Account
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-lock-locked mr-2" /> Logout
|
||||||
|
</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TheHeaderDropdownAccnt',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
itemsCount: 42,
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,10 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<CSidebar fixed>
|
<CSidebar
|
||||||
<CSidebarHeader/>
|
fixed
|
||||||
<CSidebarForm/>
|
:minimize="minimize"
|
||||||
<CSidebarNav :nav-items="computedNav"/>
|
:show="show"
|
||||||
<CSidebarFooter/>
|
>
|
||||||
<CSidebarMinimizer/>
|
<CSidebarBrand
|
||||||
|
fullSrc="img/brand/coreui-base-white.svg"
|
||||||
|
minimizedSrc="img/brand/coreui-signet-white.svg"
|
||||||
|
:wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
|
||||||
|
/>
|
||||||
|
<!-- <CSidebarHeader/> -->
|
||||||
|
<!-- <CSidebarForm/> -->
|
||||||
|
<CRenderFunction :contentToRender="nav"/>
|
||||||
|
<!-- <CSidebarFooter/> -->
|
||||||
|
<CSidebarMinimizer
|
||||||
|
class="d-md-down-none"
|
||||||
|
@click.native="minimize = !minimize"
|
||||||
|
/>
|
||||||
</CSidebar>
|
</CSidebar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -12,10 +24,15 @@
|
|||||||
import nav from './_nav'
|
import nav from './_nav'
|
||||||
export default {
|
export default {
|
||||||
name: 'TheSidebar',
|
name: 'TheSidebar',
|
||||||
computed: {
|
data () {
|
||||||
computedNav () {
|
return {
|
||||||
return nav.items.filter(item => item.name !== 'Dashboard')
|
minimize: false,
|
||||||
|
nav,
|
||||||
|
show: true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$root.$on('toggle-sidebar', () => this.show = !this.show)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+351
-144
@@ -1,264 +1,471 @@
|
|||||||
export default {
|
export default [
|
||||||
items: [
|
'CSidebarNav',
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Dashboard',
|
name: 'Dashboard',
|
||||||
url: '/dashboard',
|
to: '/dashboard',
|
||||||
icon: 'cui-speedometer',
|
icon: 'cui-speedometer',
|
||||||
badge: {
|
badge: {
|
||||||
variant: 'primary',
|
color: 'primary',
|
||||||
text: 'NEW'
|
text: 'NEW'
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
title: true,
|
|
||||||
name: 'Theme',
|
|
||||||
class: '',
|
|
||||||
wrapper: {
|
|
||||||
element: '',
|
|
||||||
attributes: {}
|
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavTitle',
|
||||||
|
['Theme']
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Colors',
|
name: 'Colors',
|
||||||
url: '/theme/colors',
|
to: '/theme/colors',
|
||||||
icon: 'cui-drop'
|
icon: 'cui-drop'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Typography',
|
name: 'Typography',
|
||||||
url: '/theme/typography',
|
to: '/theme/typography',
|
||||||
icon: 'cui-pencil'
|
icon: 'cui-pencil'
|
||||||
},
|
|
||||||
{
|
|
||||||
title: true,
|
|
||||||
name: 'Components',
|
|
||||||
class: '',
|
|
||||||
wrapper: {
|
|
||||||
element: '',
|
|
||||||
attributes: {}
|
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavTitle',
|
||||||
|
['Components']
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavDropdown',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Base',
|
name: 'Base',
|
||||||
url: '/base',
|
route: '/base',
|
||||||
icon: 'cui-puzzle',
|
icon: 'cui-puzzle',
|
||||||
children: [
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Breadcrumbs',
|
name: 'Breadcrumbs',
|
||||||
url: '/base/breadcrumbs',
|
to: '/base/breadcrumbs',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Cards',
|
name: 'Cards',
|
||||||
url: '/base/cards',
|
to: '/base/cards',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Carousels',
|
name: 'Carousels',
|
||||||
url: '/base/carousels',
|
to: '/base/carousels',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Collapses',
|
name: 'Collapses',
|
||||||
url: '/base/collapses',
|
to: '/base/collapses',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Forms',
|
name: 'Forms',
|
||||||
url: '/base/forms',
|
to: '/base/forms',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Jumbotrons',
|
name: 'Jumbotrons',
|
||||||
url: '/base/jumbotrons',
|
to: '/base/jumbotrons',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'List Groups',
|
name: 'List Groups',
|
||||||
url: '/base/list-groups',
|
to: '/base/list-groups',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Navs',
|
name: 'Navs',
|
||||||
url: '/base/navs',
|
to: '/base/navs',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Navbars',
|
name: 'Navbars',
|
||||||
url: '/base/navbars',
|
to: '/base/navbars',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Paginations',
|
name: 'Paginations',
|
||||||
url: '/base/paginations',
|
to: '/base/paginations',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Popovers',
|
name: 'Popovers',
|
||||||
url: '/base/popovers',
|
to: '/base/popovers',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Progress Bars',
|
name: 'Progress Bars',
|
||||||
url: '/base/progress-bars',
|
to: '/base/progress-bars',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Switches',
|
name: 'Switches',
|
||||||
url: '/base/switches',
|
to: '/base/switches',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Tables',
|
name: 'Tables',
|
||||||
url: '/base/tables',
|
to: '/base/tables',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Tabs',
|
name: 'Tabs',
|
||||||
url: '/base/tabs',
|
to: '/base/tabs',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Tooltips',
|
name: 'Tooltips',
|
||||||
url: '/base/tooltips',
|
to: '/base/tooltips',
|
||||||
icon: 'cui-puzzle'
|
icon: 'cui-puzzle'
|
||||||
}
|
}
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Buttons',
|
|
||||||
url: '/buttons',
|
|
||||||
icon: 'cui-cursor',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Buttons',
|
|
||||||
url: '/buttons/standard-buttons',
|
|
||||||
icon: 'cui-cursor'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Button Dropdowns',
|
|
||||||
url: '/buttons/dropdowns',
|
|
||||||
icon: 'cui-cursor'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Button Groups',
|
|
||||||
url: '/buttons/button-groups',
|
|
||||||
icon: 'cui-cursor'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Brand Buttons',
|
|
||||||
url: '/buttons/brand-buttons',
|
|
||||||
icon: 'cui-cursor'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
]
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavDropdown',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Buttons',
|
||||||
|
route: '/buttons',
|
||||||
|
icon: 'cui-cursor',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Buttons',
|
||||||
|
to: '/buttons/standard-buttons',
|
||||||
|
icon: 'cui-cursor'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Button Dropdowns',
|
||||||
|
to: '/buttons/dropdowns',
|
||||||
|
icon: 'cui-cursor'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Button Groups',
|
||||||
|
to: '/buttons/button-groups',
|
||||||
|
icon: 'cui-cursor'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Brand Buttons',
|
||||||
|
to: '/buttons/brand-buttons',
|
||||||
|
icon: 'cui-cursor'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
name: 'Charts',
|
name: 'Charts',
|
||||||
url: '/charts',
|
to: '/charts',
|
||||||
icon: 'cui-pie-chart'
|
icon: 'cui-pie-chart'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavDropdown',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Icons',
|
name: 'Icons',
|
||||||
url: '/icons',
|
route: '/icons',
|
||||||
icon: 'cui-star',
|
icon: 'cui-star',
|
||||||
children: [
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'CoreUI Icons',
|
name: 'CoreUI Icons',
|
||||||
url: '/icons/coreui-icons',
|
to: '/icons/coreui-icons',
|
||||||
icon: 'cui-star',
|
icon: 'cui-star',
|
||||||
badge: {
|
badge: {
|
||||||
variant: 'info',
|
color: 'info',
|
||||||
text: 'NEW'
|
text: 'NEW'
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Brands',
|
name: 'Brands',
|
||||||
url: '/icons/brands',
|
to: '/icons/brands',
|
||||||
icon: 'cui-star'
|
icon: 'cui-star'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Flags',
|
name: 'Flags',
|
||||||
url: '/icons/flags',
|
to: '/icons/flags',
|
||||||
icon: 'cui-star'
|
icon: 'cui-star'
|
||||||
}
|
}
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Notifications',
|
|
||||||
url: '/notifications',
|
|
||||||
icon: 'cui-bell',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Alerts',
|
|
||||||
url: '/notifications/alerts',
|
|
||||||
icon: 'cui-bell'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Badges',
|
|
||||||
url: '/notifications/badges',
|
|
||||||
icon: 'cui-bell'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Modals',
|
|
||||||
url: '/notifications/modals',
|
|
||||||
icon: 'cui-bell'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
]
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavDropdown',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Notifications',
|
||||||
|
route: '/notifications',
|
||||||
|
icon: 'cui-bell',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Alerts',
|
||||||
|
to: '/notifications/alerts',
|
||||||
|
icon: 'cui-bell'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Badges',
|
||||||
|
to: '/notifications/badges',
|
||||||
|
icon: 'cui-bell'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Modals',
|
||||||
|
to: '/notifications/modals',
|
||||||
|
icon: 'cui-bell'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
name: 'Widgets',
|
name: 'Widgets',
|
||||||
url: '/widgets',
|
to: '/widgets',
|
||||||
icon: 'cui-calculator',
|
icon: 'cui-calculator',
|
||||||
badge: {
|
badge: {
|
||||||
variant: 'primary',
|
color: 'primary',
|
||||||
text: 'NEW'
|
text: 'NEW',
|
||||||
|
pill: true
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
{
|
}
|
||||||
divider: true
|
],
|
||||||
},
|
[
|
||||||
{
|
'CSidebarNavDivider',
|
||||||
title: true,
|
],
|
||||||
name: 'Extras'
|
[
|
||||||
},
|
'CSidebarNavTitle',
|
||||||
|
['Extras']
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavDropdown',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Pages',
|
name: 'Pages',
|
||||||
url: '/pages',
|
route: '/pages',
|
||||||
icon: 'cui-star',
|
icon: 'cui-star',
|
||||||
children: [
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
url: '/pages/login',
|
to: '/pages/login',
|
||||||
icon: 'cui-star'
|
icon: 'cui-star'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Register',
|
name: 'Register',
|
||||||
url: '/pages/register',
|
to: '/pages/register',
|
||||||
icon: 'cui-star'
|
icon: 'cui-star'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Error 404',
|
name: 'Error 404',
|
||||||
url: '/pages/404',
|
to: '/pages/404',
|
||||||
icon: 'cui-star'
|
icon: 'cui-star'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Error 500',
|
name: 'Error 500',
|
||||||
url: '/pages/500',
|
to: '/pages/500',
|
||||||
icon: 'cui-star'
|
icon: 'cui-star'
|
||||||
}
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
]
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Download CoreUI',
|
name: 'Download CoreUI',
|
||||||
url: 'http://coreui.io/vue/',
|
href: 'http://coreui.io/vue/',
|
||||||
icon: 'cui-cloud-download',
|
icon: 'cui-cloud-download',
|
||||||
class: 'mt-auto',
|
addLinkClasses: 'c-nav-link-success',
|
||||||
variant: 'success'
|
target: '_blank'
|
||||||
},
|
},
|
||||||
|
attrs: {
|
||||||
|
class: 'mt-auto',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
{
|
{
|
||||||
|
props: {
|
||||||
name: 'Try CoreUI PRO',
|
name: 'Try CoreUI PRO',
|
||||||
url: 'http://coreui.io/pro/vue/',
|
href: 'http://coreui.io/pro/vue/',
|
||||||
icon: 'cui-layers',
|
icon: 'cui-layers',
|
||||||
variant: 'danger'
|
addLinkClasses: 'c-nav-link-danger',
|
||||||
|
target: '_blank'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|||||||
+11
-6
@@ -2,7 +2,7 @@ import Vue from 'vue'
|
|||||||
import Router from 'vue-router'
|
import Router from 'vue-router'
|
||||||
|
|
||||||
// Containers
|
// Containers
|
||||||
const DefaultContainer = () => import('@/containers/DefaultContainer')
|
const TheContainer = () => import('@/containers/TheContainer')
|
||||||
|
|
||||||
// Views
|
// Views
|
||||||
const Dashboard = () => import('@/views/Dashboard')
|
const Dashboard = () => import('@/views/Dashboard')
|
||||||
@@ -10,7 +10,7 @@ const Dashboard = () => import('@/views/Dashboard')
|
|||||||
const Colors = () => import('@/views/theme/Colors')
|
const Colors = () => import('@/views/theme/Colors')
|
||||||
const Typography = () => import('@/views/theme/Typography')
|
const Typography = () => import('@/views/theme/Typography')
|
||||||
|
|
||||||
const Charts = () => import('@/views/Charts')
|
const Charts = () => import('@/views/charts/Charts')
|
||||||
const Widgets = () => import('@/views/widgets/Widgets')
|
const Widgets = () => import('@/views/widgets/Widgets')
|
||||||
|
|
||||||
// Views - Components
|
// Views - Components
|
||||||
@@ -61,14 +61,18 @@ Vue.use(Router)
|
|||||||
|
|
||||||
export default new Router({
|
export default new Router({
|
||||||
mode: 'hash', // https://router.vuejs.org/api/#mode
|
mode: 'hash', // https://router.vuejs.org/api/#mode
|
||||||
linkActiveClass: 'c-active',
|
linkActiveClass: 'active',
|
||||||
scrollBehavior: () => ({ y: 0 }),
|
scrollBehavior: () => ({ y: 0 }),
|
||||||
routes: [
|
routes: configRoutes()
|
||||||
|
})
|
||||||
|
|
||||||
|
function configRoutes () {
|
||||||
|
return [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
redirect: '/dashboard',
|
redirect: '/dashboard',
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
component: DefaultContainer,
|
component: TheContainer,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'dashboard',
|
path: 'dashboard',
|
||||||
@@ -327,4 +331,5 @@ export default new Router({
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
}
|
||||||
|
|
||||||
|
|||||||
+180
-189
@@ -5,19 +5,19 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="5">
|
<CCol sm="5">
|
||||||
<h4 id="traffic" class="c-card-title c-mb-0">Traffic</h4>
|
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||||
<div class="c-small c-text-muted">November 2017</div>
|
<div class="small text-muted">November 2017</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="7" class="c-d-none c-d-md-block">
|
<CCol sm="7" class="d-none d-md-block">
|
||||||
<CButton variant="primary" class="c-float-right">
|
<CButton color="primary" class="float-right">
|
||||||
<i class="cui-cloud-download"></i>
|
<i class="cui-cloud-download"></i>
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButtonGroup class="c-float-right c-mr-3">
|
<CButtonGroup class="float-right mr-3">
|
||||||
<CButton
|
<CButton
|
||||||
variant="outline-secondary"
|
color="outline-secondary"
|
||||||
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
||||||
:key="key"
|
:key="key"
|
||||||
class="c-mx-0"
|
class="mx-0"
|
||||||
:pressed="value === selected ? true : false"
|
:pressed="value === selected ? true : false"
|
||||||
@click="selected = value"
|
@click="selected = value"
|
||||||
>
|
>
|
||||||
@@ -29,52 +29,52 @@
|
|||||||
<MainChartExample style="height:300px;margin-top:40px;"/>
|
<MainChartExample style="height:300px;margin-top:40px;"/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CRow class="c-text-center">
|
<CRow class="text-center">
|
||||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||||
<div class="c-text-muted">Visits</div>
|
<div class="text-muted">Visits</div>
|
||||||
<strong>29.703 Users (40%)</strong>
|
<strong>29.703 Users (40%)</strong>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs c-mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="success"
|
color="success"
|
||||||
:value="40"
|
:value="40"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
|
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||||
<div class="c-text-muted">Unique</div>
|
<div class="text-muted">Unique</div>
|
||||||
<strong>24.093 Users (20%)</strong>
|
<strong>24.093 Users (20%)</strong>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs c-mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="info"
|
color="info"
|
||||||
:value="20"
|
:value="20"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||||
<div class="c-text-muted">Pageviews</div>
|
<div class="text-muted">Pageviews</div>
|
||||||
<strong>78.706 Views (60%)</strong>
|
<strong>78.706 Views (60%)</strong>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs c-mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="warning"
|
color="warning"
|
||||||
:value="60"
|
:value="60"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||||
<div class="c-text-muted">New Users</div>
|
<div class="text-muted">New Users</div>
|
||||||
<strong>22.123 Users (80%)</strong>
|
<strong>22.123 Users (80%)</strong>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs c-mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:value="80"
|
:value="80"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
|
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||||
<div class="c-text-muted">Bounce Rate</div>
|
<div class="text-muted">Bounce Rate</div>
|
||||||
<strong>Average Rate (40.15%)</strong>
|
<strong>Average Rate (40.15%)</strong>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs c-mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
:value="40"
|
:value="40"
|
||||||
/>
|
/>
|
||||||
@@ -90,158 +90,158 @@
|
|||||||
<CCol sm="12" lg="6">
|
<CCol sm="12" lg="6">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="info">
|
<CCallout color="info">
|
||||||
<small class="c-text-muted">New Clients</small><br>
|
<small class="text-muted">New Clients</small><br>
|
||||||
<strong class="c-h4">9,123</strong>
|
<strong class="h4">9,123</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="danger">
|
<CCallout color="danger">
|
||||||
<small class="c-text-muted">Recurring Clients</small><br>
|
<small class="text-muted">Recurring Clients</small><br>
|
||||||
<strong class="c-h4">22,643</strong>
|
<strong class="h4">22,643</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<hr class="c-mt-0">
|
<hr class="mt-0">
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Monday
|
Monday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
variant="info"
|
color="info"
|
||||||
:value="34"
|
:value="34"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:value="78"
|
:value="78"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Tuesday
|
Tuesday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="56"
|
:value="56"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="94"
|
:value="94"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Wednesday
|
Wednesday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="12"
|
:value="12"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="67"
|
:value="67"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Thursday
|
Thursday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="43"
|
:value="43"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="91"
|
:value="91"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Friday
|
Friday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="22"
|
:value="22"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="73"
|
:value="73"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Saturday
|
Saturday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="53"
|
:value="53"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="82"
|
:value="82"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Sunday
|
Sunday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="9"
|
:value="9"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="69"
|
:value="69"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-legend c-text-center">
|
<div class="legend text-center">
|
||||||
<small>
|
<small>
|
||||||
<sup><CBadge pill variant="info"> </CBadge></sup>
|
<sup><CBadge pill color="info"> </CBadge></sup>
|
||||||
New clients
|
New clients
|
||||||
|
|
||||||
<sup><CBadge pill variant="danger"> </CBadge></sup>
|
<sup><CBadge pill color="danger"> </CBadge></sup>
|
||||||
Recurring clients
|
Recurring clients
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
@@ -249,126 +249,126 @@
|
|||||||
<CCol sm="12" lg="6">
|
<CCol sm="12" lg="6">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="warning">
|
<CCallout color="warning">
|
||||||
<small class="c-text-muted">Pageviews</small><br>
|
<small class="text-muted">Pageviews</small><br>
|
||||||
<strong class="c-h4">78,623</strong>
|
<strong class="h4">78,623</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="success">
|
<CCallout color="success">
|
||||||
<small class="c-text-muted">Organic</small><br>
|
<small class="text-muted">Organic</small><br>
|
||||||
<strong class="c-h4">49,123</strong>
|
<strong class="h4">49,123</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<hr class="c-mt-0">
|
<hr class="mt-0">
|
||||||
<ul class="c-horizontal-bars c-type-2">
|
<ul class="horizontal-bars type-2">
|
||||||
<div class="c-progress-group">
|
<div class="progress-group">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<i class="cui-user c-progress-group-icon"></i>
|
<i class="cui-user progress-group-icon"></i>
|
||||||
<span class="c-title">Male</span>
|
<span class="title">Male</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">43%</span>
|
<span class="ml-auto font-weight-bold">43%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="43"
|
:value="43"
|
||||||
variant="warning"
|
color="warning"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-5">
|
<div class="progress-group mb-5">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<i class="cui-user-female c-progress-group-icon"></i>
|
<i class="cui-user-female progress-group-icon"></i>
|
||||||
<span class="c-title">Female</span>
|
<span class="title">Female</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">37%</span>
|
<span class="ml-auto font-weight-bold">37%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="37"
|
:value="37"
|
||||||
variant="warning"
|
color="warning"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group">
|
<div class="progress-group">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<i class="cui-globe c-progress-group-icon"></i>
|
<i class="cui-globe progress-group-icon"></i>
|
||||||
<span class="c-title">Organic Search</span>
|
<span class="title">Organic Search</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">
|
<span class="ml-auto font-weight-bold">
|
||||||
191,235<span class="text-muted small">(56%)</span>
|
191,235<span class="text-muted small">(56%)</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="56"
|
:value="56"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group">
|
<div class="progress-group">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialFacebook"
|
name="socialFacebook"
|
||||||
height="17"
|
height="17"
|
||||||
class="c-progress-group-icon"
|
class="progress-group-icon"
|
||||||
/>
|
/>
|
||||||
<span class="c-title">Facebook</span>
|
<span class="title">Facebook</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">
|
<span class="ml-auto font-weight-bold">
|
||||||
51,223 <span class="c-text-muted small">(15%)</span>
|
51,223 <span class="text-muted small">(15%)</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="15"
|
:value="15"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group">
|
<div class="progress-group">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialTwitter"
|
name="socialTwitter"
|
||||||
height="17"
|
height="17"
|
||||||
class="c-progress-group-icon"
|
class="progress-group-icon"
|
||||||
/>
|
/>
|
||||||
<span class="c-title">Twitter</span>
|
<span class="title">Twitter</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">
|
<span class="ml-auto font-weight-bold">
|
||||||
37,564 <span class="c-text-muted c-small">(11%)</span>
|
37,564 <span class="text-muted small">(11%)</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="11"
|
:value="11"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group">
|
<div class="progress-group">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialLinkedin"
|
name="socialLinkedin"
|
||||||
height="17"
|
height="17"
|
||||||
class="c-progress-group-icon"
|
class="progress-group-icon"
|
||||||
/>
|
/>
|
||||||
<span class="c-title">LinkedIn</span>
|
<span class="title">LinkedIn</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">
|
<span class="ml-auto font-weight-bold">
|
||||||
27,319 <span class="c-text-muted small"> (8%)</span>
|
27,319 <span class="text-muted small"> (8%)</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="8"
|
:value="8"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-divider c-text-center">
|
<div class="divider text-center">
|
||||||
<CButton variant="link" size="sm" class="c-text-muted">
|
<CButton color="link" size="sm" class="text-muted">
|
||||||
<i class="cui-options"></i>
|
<i class="cui-options"></i>
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -377,25 +377,25 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<br/>
|
<br/>
|
||||||
<CTable
|
<CTable
|
||||||
class="c-mb-0 c-table-outline"
|
class="mb-0 table-outline"
|
||||||
hover
|
hover
|
||||||
:items="tableItems"
|
:items="tableItems"
|
||||||
:fields="tableFields"
|
:fields="tableFields"
|
||||||
head-variant="light"
|
head-color="light"
|
||||||
no-sorting
|
no-sorting
|
||||||
>
|
>
|
||||||
<td slot="avatar" class="c-text-center" slot-scope="{item}">
|
<td slot="avatar" class="text-center" slot-scope="{item}">
|
||||||
<div class="c-avatar">
|
<div class="c-avatar">
|
||||||
<img :src="item.avatar.url" class="c-img-avatar" alt="">
|
<img :src="item.avatar.url" class="c-avatar-img" alt="">
|
||||||
<span
|
<span
|
||||||
class="c-avatar-status"
|
class="c-avatar-status"
|
||||||
:class="`c-bg-${item.avatar.status || 'secondary'}`"
|
:class="`bg-${item.avatar.status || 'secondary'}`"
|
||||||
></span>
|
></span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td slot="user" slot-scope="{item}">
|
<td slot="user" slot-scope="{item}">
|
||||||
<div>{{item.user.name}}</div>
|
<div>{{item.user.name}}</div>
|
||||||
<div class="c-small c-text-muted">
|
<div class="small text-muted">
|
||||||
<span>
|
<span>
|
||||||
<template v-if="item.user.new">New</template>
|
<template v-if="item.user.new">New</template>
|
||||||
<template v-else>Recurring</template>
|
<template v-else>Recurring</template>
|
||||||
@@ -405,7 +405,7 @@
|
|||||||
<td
|
<td
|
||||||
slot="country"
|
slot="country"
|
||||||
slot-scope="{item}"
|
slot-scope="{item}"
|
||||||
class="c-text-center"
|
class="text-center"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
:name="item.country.flag"
|
:name="item.country.flag"
|
||||||
@@ -413,24 +413,24 @@
|
|||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td slot="usage" slot-scope="{item}">
|
<td slot="usage" slot-scope="{item}">
|
||||||
<div class="c-clearfix">
|
<div class="clearfix">
|
||||||
<div class="c-float-left">
|
<div class="float-left">
|
||||||
<strong>{{item.usage.value}}%</strong>
|
<strong>{{item.usage.value}}%</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-float-right">
|
<div class="float-right">
|
||||||
<small class="c-text-muted">{{item.usage.period}}</small>
|
<small class="text-muted">{{item.usage.period}}</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
v-model="item.usage.value"
|
v-model="item.usage.value"
|
||||||
:variant="variant(item.usage.value)"
|
:color="color(item.usage.value)"
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
slot="payment"
|
slot="payment"
|
||||||
slot-scope="{item}"
|
slot-scope="{item}"
|
||||||
class="c-text-center"
|
class="text-center"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
:name="item.payment.icon"
|
:name="item.payment.icon"
|
||||||
@@ -438,7 +438,7 @@
|
|||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td slot="activity" slot-scope="{item}">
|
<td slot="activity" slot-scope="{item}">
|
||||||
<div class="c-small c-text-muted">Last login</div>
|
<div class="small text-muted">Last login</div>
|
||||||
<strong>{{item.activity}}</strong>
|
<strong>{{item.activity}}</strong>
|
||||||
</td>
|
</td>
|
||||||
</CTable>
|
</CTable>
|
||||||
@@ -452,15 +452,13 @@
|
|||||||
import MainChartExample from './charts/MainChartExample'
|
import MainChartExample from './charts/MainChartExample'
|
||||||
import WidgetsDropdown from './widgets/WidgetsDropdown'
|
import WidgetsDropdown from './widgets/WidgetsDropdown'
|
||||||
import WidgetsBrand from './widgets/WidgetsBrand'
|
import WidgetsBrand from './widgets/WidgetsBrand'
|
||||||
import CChartLineSimple from './charts/CChartLineSimple'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Dashboard',
|
name: 'Dashboard',
|
||||||
components: {
|
components: {
|
||||||
MainChartExample,
|
MainChartExample,
|
||||||
WidgetsDropdown,
|
WidgetsDropdown,
|
||||||
WidgetsBrand,
|
WidgetsBrand
|
||||||
CChartLineSimple
|
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
@@ -516,36 +514,29 @@ export default {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
tableFields: [
|
tableFields: [
|
||||||
{ key: 'avatar', label: '', _classes: 'c-text-center' },
|
{ key: 'avatar', label: '', _classes: 'text-center' },
|
||||||
{ key: 'user' },
|
{ key: 'user' },
|
||||||
{ key: 'country', _classes: 'c-text-center' },
|
{ key: 'country', _classes: 'text-center' },
|
||||||
{ key: 'usage' },
|
{ key: 'usage' },
|
||||||
{ key: 'payment', label: 'Payment method', _classes: 'c-text-center' },
|
{ key: 'payment', label: 'Payment method', _classes: 'text-center' },
|
||||||
{ key: 'activity' },
|
{ key: 'activity' },
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
variant (value) {
|
color (value) {
|
||||||
let $variant
|
let $color
|
||||||
if (value <= 25) {
|
if (value <= 25) {
|
||||||
$variant = 'info'
|
$color = 'info'
|
||||||
} else if (value > 25 && value <= 50) {
|
} else if (value > 25 && value <= 50) {
|
||||||
$variant = 'success'
|
$color = 'success'
|
||||||
} else if (value > 50 && value <= 75) {
|
} else if (value > 50 && value <= 75) {
|
||||||
$variant = 'warning'
|
$color = 'warning'
|
||||||
} else if (value > 75 && value <= 100) {
|
} else if (value > 75 && value <= 100) {
|
||||||
$variant = 'danger'
|
$color = 'danger'
|
||||||
}
|
}
|
||||||
return $variant
|
return $color
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
/* IE fix */
|
|
||||||
#card-chart-01, #card-chart-02 {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,74 +1,96 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col>
|
<CCol col>
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
|
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
|
||||||
<!-- <div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
<small class="text-muted">docs</small>
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CBreadcrumb :items="items" add-link-classes="sss" last-item-classes="aaa"/>
|
<CBreadcrumb :items="items"/>
|
||||||
<CBreadcrumb :items="items2"/>
|
<CBreadcrumb :items="items2"/>
|
||||||
<CBreadcrumb :items="items3"/>
|
<CBreadcrumb :items="items3"/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'breadcrumbs',
|
name: 'Breadcrumbs',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
items: [{
|
items: [
|
||||||
textHtml: '<b>Admin</b>',
|
{
|
||||||
|
text: '<b>Admin</b>',
|
||||||
href: '#'
|
href: '#'
|
||||||
}, {
|
},
|
||||||
textHtml: 'Manage',
|
{
|
||||||
|
text: 'Manage',
|
||||||
href: '#'
|
href: '#'
|
||||||
}, {
|
},
|
||||||
textHtml: 'Library'
|
{
|
||||||
}],
|
text: 'Library'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
items2: [{
|
items2: [
|
||||||
textHtml: 'Go to dashboard',
|
{
|
||||||
|
text: 'Go to dashboard',
|
||||||
to: '/dashboard'
|
to: '/dashboard'
|
||||||
}, {
|
},
|
||||||
textHtml: 'Go to widgets',
|
{
|
||||||
|
text: 'Go to widgets',
|
||||||
to: '/Widgets'
|
to: '/Widgets'
|
||||||
}, {
|
},
|
||||||
textHtml: 'Go to Google',
|
{
|
||||||
|
text: 'Go to Google',
|
||||||
href: 'http://google.com'
|
href: 'http://google.com'
|
||||||
},{
|
},
|
||||||
textHtml: 'Current page'
|
{
|
||||||
}],
|
text: 'Current page'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
items3: [{
|
items3: [
|
||||||
textHtml: 'Link',
|
{
|
||||||
|
text: 'Added',
|
||||||
to: '#2',
|
to: '#2',
|
||||||
activeClass: 'c-bg-info c-p-1'
|
addClasses: 'font-xl'
|
||||||
}, {
|
},
|
||||||
textHtml: 'Active',
|
{
|
||||||
|
text: 'Custom',
|
||||||
to: '#3',
|
to: '#3',
|
||||||
activeClass: 'c-bg-warning c-p-1',
|
addClasses: 'font-xl'
|
||||||
addLinkClasses: 'c-bg-info c-p-1'
|
},
|
||||||
},{
|
{
|
||||||
textHtml: 'Classes',
|
text: 'Classes',
|
||||||
to: '#4',
|
to: '#4',
|
||||||
activeClass: 'c-bg-danger c-p-1',
|
addClasses: 'font-xl text-danger'
|
||||||
}]
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.breadcrumb-item + .font-xl.breadcrumb-item::before {
|
||||||
|
color: rgb(140, 195, 38);
|
||||||
|
content: '>>';
|
||||||
|
padding: 0px 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
+78
-88
@@ -2,7 +2,24 @@
|
|||||||
<div>
|
<div>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" :body-html="loremIpsum"/>
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
Card title
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/CardComponents"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
{{loremIpsum}}
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard footer-html="Card Footer" :body-html="loremIpsum" />
|
<CCard footer-html="Card Footer" :body-html="loremIpsum" />
|
||||||
@@ -18,17 +35,17 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with switch
|
Card with switch
|
||||||
<CSwitch
|
<CSwitch
|
||||||
class="c-float-right"
|
class="float-right"
|
||||||
size="sm"
|
size="sm"
|
||||||
shape="pill"
|
shape="pill"
|
||||||
variant="info"
|
color="info"
|
||||||
data-on="On"
|
data-on="On"
|
||||||
data-off="Off"
|
data-off="Off"
|
||||||
:checked="true"
|
:checked="true"
|
||||||
/>
|
/>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -36,10 +53,10 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with label
|
Card with label
|
||||||
<CBadge variant="success" class="c-float-right">Success</CBadge>
|
<CBadge color="success" class="float-right">Success</CBadge>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -47,9 +64,11 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with label
|
Card with label
|
||||||
<CBadge pill variant="danger" class="c-float-right">42</CBadge>
|
<CBadge pill color="danger" class="float-right">42</CBadge>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody :body-html="loremIpsum"/>
|
<CCardBody>
|
||||||
|
{{loremIpsum}}
|
||||||
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
@@ -57,79 +76,79 @@
|
|||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard
|
<CCard
|
||||||
header="Card outline primary"
|
header="Card outline primary"
|
||||||
border-variant="primary"
|
border-color="primary"
|
||||||
:body-html="loremIpsum"
|
:body-html="loremIpsum"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard
|
<CCard
|
||||||
header="Card outline secondary"
|
header="Card outline secondary"
|
||||||
border-variant="secondary"
|
border-color="secondary"
|
||||||
:body-html="loremIpsum"
|
:body-html="loremIpsum"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard
|
<CCard
|
||||||
header="Card outline success"
|
header="Card outline success"
|
||||||
border-variant="success"
|
border-color="success"
|
||||||
body-wrapper
|
body-wrapper
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline info" border-variant="info" body-wrapper>
|
<CCard header-html="Card outline info" border-color="info" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
|
<CCard header-html="Card outline warning" border-color="warning" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
|
<CCard header-html="Card outline danger" border-color="danger" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-primary" header="Card with primary accent" body-wrapper>
|
<CCard class="card-accent-primary" header="Card with primary accent" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-secondary" header="Card with secondary accent" body-wrapper>
|
<CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-success" header="Card with success accent" body-wrapper>
|
<CCard class="card-accent-success" header="Card with success accent" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-info" header="Card with info accent" body-wrapper>
|
<CCard class="card-accent-info" header="Card with info accent" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-warning" header="Card with warning accent" body-wrapper>
|
<CCard class="card-accent-warning" header="Card with warning accent" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-danger" header="Card with danger accent" body-wrapper>
|
<CCard class="card-accent-danger" header="Card with danger accent" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-primary c-text-center" body-wrapper>
|
<CCard class="bg-primary text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -138,8 +157,8 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-success c-text-center" body-wrapper>
|
<CCard class="bg-success text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -148,8 +167,8 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-info c-text-center" body-wrapper>
|
<CCard class="bg-info text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -158,8 +177,8 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-warning c-text-center" body-wrapper>
|
<CCard class="bg-warning text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -168,8 +187,8 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-danger c-text-center" body-wrapper>
|
<CCard class="bg-danger text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -178,8 +197,8 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-secondary c-text-center" body-wrapper>
|
<CCard class="bg-secondary text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -190,79 +209,63 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="c-bg-primary" body-wrapper>
|
<CCard header-html="Card title" class="bg-primary" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="c-bg-success" body-wrapper>
|
<CCard header-html="Card title" class="bg-success" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="c-bg-info" body-wrapper>
|
<CCard header-html="Card title" class="bg-info" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="c-bg-warning" body-wrapper>
|
<CCard header-html="Card title" class="bg-warning" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="c-bg-danger" body-wrapper>
|
<CCard header-html="Card title" class="bg-danger" body-wrapper>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<transition name="fade">
|
<transition name="fade">
|
||||||
<CCard class="c-bg-secondary" v-if="show" >
|
<CCard class="bg-secondary" v-if="show">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with header actions
|
Card with header actions
|
||||||
<div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<CLink href="#" class="c-card-header-action btn-setting" >
|
<CLink href="#" class="card-header-action btn-setting">
|
||||||
<i class="cui-settings"></i>
|
<i class="cui-settings"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
<CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
||||||
<i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
|
<i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
|
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
|
||||||
<i class="cui-circle-x"></i>
|
<i class="cui-circle-x"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCollapse :show="isCollapsed" :duration="400">
|
<CCollapse :show="isCollapsed" :duration="400">
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCollapse>
|
</CCollapse>
|
||||||
</CCard>
|
</CCard>
|
||||||
</transition>
|
</transition>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<!-- <CRow>
|
|
||||||
<CCol sm="6" md="4">
|
|
||||||
<CCard >
|
|
||||||
<CCardImg img-src="https://picsum.photos/600/300/?image=25"/>
|
|
||||||
<CCardHeader header-html="Card title"/>
|
|
||||||
<CCardBody style="max-height:200px;overflow-y:auto">
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow> -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'cards',
|
name: 'Cards',
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
show: true,
|
show: true,
|
||||||
@@ -272,16 +275,3 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.fade-enter-active {
|
|
||||||
transition: all .3s ease;
|
|
||||||
}
|
|
||||||
.fade-leave-active {
|
|
||||||
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
|
||||||
}
|
|
||||||
.fade-enter, .fade-leave-to {
|
|
||||||
transform: translateX(10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,22 +1,20 @@
|
|||||||
<template functional>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol md="12" lg="9" >
|
<CCol md="12" lg="7">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap Carousel</strong>
|
<strong> Bootstrap Carousel</strong>
|
||||||
<!-- <div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a
|
<a
|
||||||
href="https://bootstrap-vue.js.org/docs/components/carousel"
|
href="https://coreui.io/vue/docs/3.0/components/Carousel"
|
||||||
class="card-header-action"
|
class="card-header-action"
|
||||||
rel="noreferrer noopener"
|
rel="noreferrer noopener"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
<small class="text-muted">docs</small>
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCarousel
|
<CCarousel
|
||||||
@@ -26,14 +24,14 @@
|
|||||||
height="400px"
|
height="400px"
|
||||||
>
|
>
|
||||||
<CCarouselItem
|
<CCarouselItem
|
||||||
caption="First Slide"
|
captionHeader="First Slide"
|
||||||
image="https://lorempixel.com/1024/480/technics/2/"
|
image="https://lorempixel.com/1024/480/technics/2/"
|
||||||
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||||
/>
|
/>
|
||||||
<CCarouselItem
|
<CCarouselItem
|
||||||
caption="Blank page"
|
captionHeader="Blank page"
|
||||||
:image="{ blankColor: 'grey' }"
|
:image="{ blankColor: 'grey' }"
|
||||||
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||||
/>
|
/>
|
||||||
<CCarouselItem
|
<CCarouselItem
|
||||||
image="https://lorempixel.com/1024/480/technics/8/"
|
image="https://lorempixel.com/1024/480/technics/8/"
|
||||||
@@ -43,12 +41,10 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'carousels'
|
name: 'Carousels'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,29 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12" md="6">
|
<CCol col="12" md="6">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap Collapse </strong>
|
<strong> Bootstrap Collapse </strong>
|
||||||
<!-- <div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
<CLink class="card-header-action">
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Collapse"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
<small class="text-muted">docs</small>
|
<small class="text-muted">docs</small>
|
||||||
</CLink>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CButton id="collapse1" variant="primary">
|
<CButton id="collapse1" color="primary">
|
||||||
Toggle Collapse
|
Toggle Collapse
|
||||||
</CButton>
|
</CButton>
|
||||||
<CCollapse toggler="collapse1" class="c-mt-2">
|
<CCollapse toggler="collapse1" class="mt-2">
|
||||||
<CCard body-wrapper>
|
<CCard body-wrapper>
|
||||||
<p class="c-card-text">Collapse contents Here</p>
|
<p class="card-text">Collapse contents Here</p>
|
||||||
<CButton id="collapse2" size="sm">
|
<CButton id="collapse2" size="sm" color="secondary">
|
||||||
Toggle Inner Collapse
|
Toggle Inner Collapse
|
||||||
</CButton>
|
</CButton>
|
||||||
<CCollapse toggler="collapse2" class="c-mt-2">
|
<CCollapse toggler="collapse2" class="mt-2">
|
||||||
<CCard body-wrapper>Hello!</CCard>
|
<CCard body-wrapper>Hello!</CCard>
|
||||||
</CCollapse>
|
</CCollapse>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -32,13 +35,11 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'collapses',
|
name: 'Collapses',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
showCollapse: true,
|
showCollapse: true,
|
||||||
|
|||||||
+181
-178
@@ -5,11 +5,21 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<strong>Credit Card </strong> <small>Form</small>
|
<strong>Credit Card </strong> <small>Form</small>
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/FormComponents"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="12">
|
<CCol sm="12">
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Name"
|
label="Name"
|
||||||
placeholder="Enter your name"
|
placeholder="Enter your name"
|
||||||
/>
|
/>
|
||||||
@@ -17,7 +27,7 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="12">
|
<CCol sm="12">
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Credit Card Number"
|
label="Credit Card Number"
|
||||||
placeholder="0000 0000 0000 0000"
|
placeholder="0000 0000 0000 0000"
|
||||||
/>
|
/>
|
||||||
@@ -25,19 +35,19 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="4">
|
<CCol sm="4">
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Month"
|
label="Month"
|
||||||
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
|
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4">
|
<CCol sm="4">
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Year"
|
label="Year"
|
||||||
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
|
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4">
|
<CCol sm="4">
|
||||||
<CFormInput
|
<CInput
|
||||||
label="CVV/CVC"
|
label="CVV/CVC"
|
||||||
placeholder="123"
|
placeholder="123"
|
||||||
/>
|
/>
|
||||||
@@ -52,33 +62,33 @@
|
|||||||
<strong>Company </strong><small>Form</small>
|
<strong>Company </strong><small>Form</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Company"
|
label="Company"
|
||||||
placeholder="Enter your company name"
|
placeholder="Enter your company name"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="VAT"
|
label="VAT"
|
||||||
placeholder="PL1234567890"
|
placeholder="PL1234567890"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Street"
|
label="Street"
|
||||||
placeholder="Enter street name"
|
placeholder="Enter street name"
|
||||||
/>
|
/>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="8">
|
<CCol sm="8">
|
||||||
<CFormInput
|
<CInput
|
||||||
label="City"
|
label="City"
|
||||||
placeholder="Enter your city"
|
placeholder="Enter your city"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4">
|
<CCol sm="4">
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Postal code"
|
label="Postal code"
|
||||||
placeholder="Postal code"
|
placeholder="Postal code"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Country"
|
label="Country"
|
||||||
placeholder="Country name"
|
placeholder="Country name"
|
||||||
/>
|
/>
|
||||||
@@ -94,30 +104,30 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
description="Let us know your full name."
|
description="Let us know your full name."
|
||||||
label="Enter your name"
|
label="Enter your name"
|
||||||
horizontal
|
horizontal
|
||||||
autocomplete="name"
|
autocomplete="name"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Static"
|
label="Static"
|
||||||
value="Username"
|
value="Username"
|
||||||
horizontal
|
horizontal
|
||||||
plaintext
|
plaintext
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Text input"
|
label="Text input"
|
||||||
description="This is a help text"
|
description="This is a help text"
|
||||||
placeholder="Text"
|
placeholder="Text"
|
||||||
horizontal
|
horizontal
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Date"
|
label="Date"
|
||||||
type="date"
|
type="date"
|
||||||
horizontal
|
horizontal
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Email input"
|
label="Email input"
|
||||||
description="Please enter your email"
|
description="Please enter your email"
|
||||||
placeholder="Enter your email"
|
placeholder="Enter your email"
|
||||||
@@ -125,7 +135,7 @@
|
|||||||
horizontal
|
horizontal
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Password Input"
|
label="Password Input"
|
||||||
description="Please enter a complex password"
|
description="Please enter a complex password"
|
||||||
placeholder="Enter your password"
|
placeholder="Enter your password"
|
||||||
@@ -133,26 +143,26 @@
|
|||||||
horizontal
|
horizontal
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Disabled Input"
|
label="Disabled Input"
|
||||||
placeholder="Disabled"
|
placeholder="Disabled"
|
||||||
horizontal
|
horizontal
|
||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Textarea"
|
label="Textarea"
|
||||||
placeholder="Content..."
|
placeholder="Content..."
|
||||||
horizontal
|
horizontal
|
||||||
textarea="true"
|
textarea="true"
|
||||||
rows="9"
|
rows="9"
|
||||||
/>
|
/>
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Select"
|
label="Select"
|
||||||
horizontal
|
horizontal
|
||||||
:options="options"
|
:options="options"
|
||||||
placeholder="Please select"
|
placeholder="Please select"
|
||||||
/>
|
/>
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Large select"
|
label="Large select"
|
||||||
size="lg"
|
size="lg"
|
||||||
horizontal
|
horizontal
|
||||||
@@ -160,14 +170,14 @@
|
|||||||
:options="selectOptions"
|
:options="selectOptions"
|
||||||
placeholder="Please select"
|
placeholder="Please select"
|
||||||
/>
|
/>
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Small select"
|
label="Small select"
|
||||||
size="sm"
|
size="sm"
|
||||||
horizontal
|
horizontal
|
||||||
:options="options"
|
:options="options"
|
||||||
placeholder="Please select"
|
placeholder="Please select"
|
||||||
/>
|
/>
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Select"
|
label="Select"
|
||||||
horizontal
|
horizontal
|
||||||
:options="options"
|
:options="options"
|
||||||
@@ -175,12 +185,12 @@
|
|||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
<template v-for="(name, key) in checkboxNames">
|
<template v-for="(name, key) in checkboxNames">
|
||||||
<div class="c-form-group c-form-row" :key="name">
|
<div class="form-group form-row" :key="name">
|
||||||
<CCol tag="label" sm="3" class="c-col-form-label">
|
<CCol tag="label" sm="3" class="col-form-label">
|
||||||
{{name}}
|
{{name}}
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
|
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
|
||||||
<CFormCheckbox
|
<CInputCheckbox
|
||||||
v-for="option in options"
|
v-for="option in options"
|
||||||
:key="option"
|
:key="option"
|
||||||
:label="option"
|
:label="option"
|
||||||
@@ -194,40 +204,40 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-for="(name, key) in radioNames">
|
<template v-for="(name, key) in radioNames">
|
||||||
<div class="c-form-row c-form-group" :key="name">
|
<div class="form-row form-group" :key="name">
|
||||||
<CCol sm="3">
|
<CCol sm="3">
|
||||||
{{name}}
|
{{name}}
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
|
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
|
||||||
<CFormRadio
|
<CInputRadio
|
||||||
v-for="option in options"
|
v-for="(option, optionIndex) in options"
|
||||||
:key="option"
|
:key="option"
|
||||||
:label="option"
|
:label="option"
|
||||||
type="radio"
|
type="radio"
|
||||||
:value="option"
|
:value="option"
|
||||||
:custom="key > 1"
|
:custom="key > 1"
|
||||||
:name="`Option 1${key}`"
|
:name="`Option 1${key}`"
|
||||||
checked="Option 1"
|
:checked="optionIndex === key"
|
||||||
:inline="key % 2 === 1"
|
:inline="key % 2 === 1"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<CFormFile
|
<CInputFile
|
||||||
label="File input"
|
label="File input"
|
||||||
horizontal
|
horizontal
|
||||||
/>
|
/>
|
||||||
<CFormFile
|
<CInputFile
|
||||||
label="Multiple file input"
|
label="Multiple file input"
|
||||||
horizontal
|
horizontal
|
||||||
multiple
|
multiple
|
||||||
/>
|
/>
|
||||||
<CFormFile
|
<CInputFile
|
||||||
label="File custom input"
|
label="File custom input"
|
||||||
horizontal
|
horizontal
|
||||||
custom
|
custom
|
||||||
/>
|
/>
|
||||||
<CFormFile
|
<CInputFile
|
||||||
label="Multiple file custom input"
|
label="Multiple file custom input"
|
||||||
horizontal
|
horizontal
|
||||||
multiple
|
multiple
|
||||||
@@ -236,8 +246,8 @@
|
|||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -248,27 +258,27 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
|
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
|
||||||
<CForm inline>
|
<CForm inline>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mr-2"
|
class="mr-2"
|
||||||
placeholder="Jane Doe"
|
placeholder="Jane Doe"
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<small>Name: </small>
|
<small>Name: </small>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="jane.doe@example.com"
|
placeholder="jane.doe@example.com"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<small>Email: </small>
|
<small>Email: </small>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -279,7 +289,7 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
description="Please enter your email."
|
description="Please enter your email."
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
@@ -287,7 +297,7 @@
|
|||||||
horizontal
|
horizontal
|
||||||
placeholder="Enter Email..."
|
placeholder="Enter Email..."
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="password"
|
type="password"
|
||||||
description="Please enter your password."
|
description="Please enter your password."
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
@@ -298,8 +308,8 @@
|
|||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -308,7 +318,7 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CForm novalidate>
|
<CForm novalidate>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
description="Please enter your email."
|
description="Please enter your email."
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
@@ -317,7 +327,7 @@
|
|||||||
required
|
required
|
||||||
was-validated
|
was-validated
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="password"
|
type="password"
|
||||||
description="Please enter your password."
|
description="Please enter your password."
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
@@ -328,8 +338,8 @@
|
|||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -338,60 +348,60 @@
|
|||||||
Input <strong>Grid</strong>
|
Input <strong>Grid</strong>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="3">
|
<CCol sm="3">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-3"/>
|
<CInput class="mb-0" placeholder=".col-sm-3"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="4">
|
<CCol sm="4">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-4"/>
|
<CInput class="mb-0" placeholder=".col-sm-4"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="5">
|
<CCol sm="5">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-5"/>
|
<CInput class="mb-0" placeholder=".col-sm-5"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-6"/>
|
<CInput class="mb-0" placeholder=".col-sm-6"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="7">
|
<CCol sm="7">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-7"/>
|
<CInput class="mb-0" placeholder=".col-sm-7"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="8">
|
<CCol sm="8">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-8"/>
|
<CInput class="mb-0" placeholder=".col-sm-8"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="9">
|
<CCol sm="9">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-9"/>
|
<CInput class="mb-0" placeholder=".col-sm-9"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="10">
|
<CCol sm="10">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-10"/>
|
<CInput class="mb-0" placeholder=".col-sm-10"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="11">
|
<CCol sm="11">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-11"/>
|
<CInput class="mb-0" placeholder=".col-sm-11"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="12">
|
<CCol sm="12">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-12"/>
|
<CInput class="mb-0" placeholder=".col-sm-12"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-user"></i> Login</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-user"></i> Login</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -399,18 +409,18 @@
|
|||||||
Input <strong>Sizes</strong>
|
Input <strong>Sizes</strong>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Small input"
|
label="Small input"
|
||||||
size="sm"
|
size="sm"
|
||||||
horizontal
|
horizontal
|
||||||
placeholder="size='sm'"
|
placeholder="size='sm'"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Default input"
|
label="Default input"
|
||||||
horizontal
|
horizontal
|
||||||
placeholder="normal"
|
placeholder="normal"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Large input"
|
label="Large input"
|
||||||
size="lg"
|
size="lg"
|
||||||
horizontal
|
horizontal
|
||||||
@@ -418,8 +428,8 @@
|
|||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -433,11 +443,11 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm validated novalidate>
|
<CForm validated novalidate>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Input is valid"
|
label="Input is valid"
|
||||||
valid-feedback="Input is not required."
|
valid-feedback="Input is not required."
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Input is invalid"
|
label="Input is invalid"
|
||||||
required
|
required
|
||||||
valid-feedback="Thank you :)"
|
valid-feedback="Thank you :)"
|
||||||
@@ -454,14 +464,14 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Input is valid"
|
label="Input is valid"
|
||||||
valid-feedback="Input is valid."
|
valid-feedback="Input is valid."
|
||||||
invalid-feedback="Please provide at least 4 characters."
|
invalid-feedback="Please provide at least 4 characters."
|
||||||
value="Valid value"
|
value="Valid value"
|
||||||
:is-valid="validator"
|
:is-valid="validator"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Input is invalid"
|
label="Input is invalid"
|
||||||
valid-feedback="Thank you :)"
|
valid-feedback="Thank you :)"
|
||||||
invalid-feedback="Please provide at least 4 characters."
|
invalid-feedback="Please provide at least 4 characters."
|
||||||
@@ -479,25 +489,25 @@
|
|||||||
<strong>Icon/Text</strong> Groups
|
<strong>Icon/Text</strong> Groups
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
prependHtml="<i class='cui-user'></i>"
|
prependHtml="<i class='cui-user'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
append-html="<i class='cui-envelope-open'></i>"
|
append-html="<i class='cui-envelope-open'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
prependHtml="<i class='cui-euro'></i>"
|
prependHtml="<i class='cui-euro'></i>"
|
||||||
placeholder="ex. $1.000.000"
|
placeholder="ex. $1.000.000"
|
||||||
append-html=".00"
|
append-html=".00"
|
||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -507,38 +517,38 @@
|
|||||||
<strong>Buttons</strong> Groups
|
<strong>Buttons</strong> Groups
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput placeholder="Username">
|
<CInput placeholder="Username">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CButton variant="primary">
|
<CButton color="primary">
|
||||||
<i class="cui-magnifying-glass"></i> Search
|
<i class="cui-magnifying-glass"></i> Search
|
||||||
</CButton>
|
</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton type="submit" variant="primary">Submit</CButton>
|
<CButton type="submit" color="primary">Submit</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
>
|
>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CButton variant="primary"><CIcon name="facebook" height="14"/></CButton>
|
<CButton color="primary"><CIcon name="facebook" height="14"/></CButton>
|
||||||
</template>
|
</template>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="primary"><CIcon name="twitter" height="14"/></CButton>
|
<CButton color="primary"><CIcon name="twitter" height="14"/></CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -548,11 +558,11 @@
|
|||||||
<strong>Dropdowns</strong> Groups
|
<strong>Dropdowns</strong> Groups
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput placeholder="Username">
|
<CInput placeholder="Username">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Action"
|
togglerText="Action"
|
||||||
variant="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
@@ -560,16 +570,16 @@
|
|||||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Action"
|
togglerText="Action"
|
||||||
variant="primary"
|
color="primary"
|
||||||
right
|
right
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
@@ -578,13 +588,13 @@
|
|||||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput placeholder="...">
|
<CInput placeholder="...">
|
||||||
|
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Split"
|
togglerText="Split"
|
||||||
variant="primary"
|
color="primary"
|
||||||
split
|
split
|
||||||
>
|
>
|
||||||
<CDropdownItem href="#">Action</CDropdownItem>
|
<CDropdownItem href="#">Action</CDropdownItem>
|
||||||
@@ -596,8 +606,8 @@
|
|||||||
|
|
||||||
<template #append>
|
<template #append>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Action"
|
togglerText="Action"
|
||||||
variant="primary"
|
color="primary"
|
||||||
right
|
right
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
@@ -607,11 +617,11 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</CFormInput>
|
</CInput>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -624,24 +634,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow
|
<CRow
|
||||||
class="c-form-group"
|
class="form-group"
|
||||||
v-for="(number, key) in [4,5,6,7,8]"
|
v-for="(number, key) in [4,5,6,7,8]"
|
||||||
:key="key"
|
:key="key"
|
||||||
>
|
>
|
||||||
<CCol :col="12 - number">
|
<CCol :col="12 - number">
|
||||||
<CFormInput class="c-mb-0" :placeholder="`.col-md-${12 - number}`"/>
|
<CInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :col="number">
|
<CCol :col="number">
|
||||||
<CFormInput class="c-mb-0" :placeholder="`.col-md-${number}`"/>
|
<CInput class="mb-0" :placeholder="`.col-md-${number}`"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton size="sm" variant="primary">Action</CButton>
|
<CButton size="sm" color="primary">Action</CButton>
|
||||||
<CButton size="sm" variant="danger">Action</CButton>
|
<CButton size="sm" color="danger">Action</CButton>
|
||||||
<CButton size="sm" variant="warning">Action</CButton>
|
<CButton size="sm" color="warning">Action</CButton>
|
||||||
<CButton size="sm" variant="info">Action</CButton>
|
<CButton size="sm" color="info">Action</CButton>
|
||||||
<CButton size="sm" variant="success">Action</CButton>
|
<CButton size="sm" color="success">Action</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -652,24 +662,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow
|
<CRow
|
||||||
class="c-form-group"
|
class="form-group"
|
||||||
v-for="(number, key) in [4,5,6,7,8]"
|
v-for="(number, key) in [4,5,6,7,8]"
|
||||||
:key="key"
|
:key="key"
|
||||||
>
|
>
|
||||||
<CCol :col="number">
|
<CCol :col="number">
|
||||||
<CFormInput class="c-mb-0" :placeholder="`.col-${number}`"/>
|
<CInput class="mb-0" :placeholder="`.col-${number}`"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :col="12 - number">
|
<CCol :col="12 - number">
|
||||||
<CFormInput class="c-mb-0" :placeholder="`.col-${12 - number}`"/>
|
<CInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton size="sm" variant="primary">Action</CButton>
|
<CButton size="sm" color="primary">Action</CButton>
|
||||||
<CButton size="sm" variant="danger">Action</CButton>
|
<CButton size="sm" color="danger">Action</CButton>
|
||||||
<CButton size="sm" variant="warning">Action</CButton>
|
<CButton size="sm" color="warning">Action</CButton>
|
||||||
<CButton size="sm" variant="info">Action</CButton>
|
<CButton size="sm" color="info">Action</CButton>
|
||||||
<CButton size="sm" variant="success">Action</CButton>
|
<CButton size="sm" color="success">Action</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -682,24 +692,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
prepend-html="Username"
|
prepend-html="Username"
|
||||||
append-html="<i class='cui-user'></i>"
|
append-html="<i class='cui-user'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
prepend-html="Email"
|
prepend-html="Email"
|
||||||
type="email"
|
type="email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
append-html="<i class='cui-envelope-closed'></i>"
|
append-html="<i class='cui-envelope-closed'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
prepend-html="Password"
|
prepend-html="Password"
|
||||||
type="password"
|
type="password"
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
append-html="<i class='cui-shield'></i>"
|
append-html="<i class='cui-shield'></i>"
|
||||||
/>
|
/>
|
||||||
<div class="c-form-group c-form-actions">
|
<div class="form-group form-actions">
|
||||||
<CButton type="submit" size="sm" variant="primary">
|
<CButton type="submit" size="sm" color="primary">
|
||||||
Submit
|
Submit
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -714,24 +724,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
append-html="<i class='cui-user'></i>"
|
append-html="<i class='cui-user'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
type="email"
|
type="email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
append-html="<i class='cui-envelope-closed'></i>"
|
append-html="<i class='cui-envelope-closed'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
type="password"
|
type="password"
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
append-html="<i class='cui-shield'></i>"
|
append-html="<i class='cui-shield'></i>"
|
||||||
/>
|
/>
|
||||||
<div class="c-form-group c-form-actions">
|
<div class="form-group form-actions">
|
||||||
<CButton type="submit" class="c-btn c-btn-sm c-btn-secondary">
|
<CButton type="submit" class="btn btn-sm btn-secondary">
|
||||||
Submit
|
Submit
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -746,24 +756,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
prependHtml="<i class='cui-user'></i>"
|
prependHtml="<i class='cui-user'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
type="email"
|
type="email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
prependHtml="<i class='cui-envelope-closed'></i>"
|
prependHtml="<i class='cui-envelope-closed'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
type="password"
|
type="password"
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
prependHtml="<i class='cui-shield'></i>"
|
prependHtml="<i class='cui-shield'></i>"
|
||||||
/>
|
/>
|
||||||
<div class="c-form-group c-form-actions">
|
<div class="form-group form-actions">
|
||||||
<CButton type="submit" size="sm" variant="success">
|
<CButton type="submit" size="sm" color="success">
|
||||||
Submit
|
Submit
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -778,58 +788,58 @@
|
|||||||
<CCard v-if="show">
|
<CCard v-if="show">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="cui-pencil"></i> Form Elements
|
<i class="cui-pencil"></i> Form Elements
|
||||||
<div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<CLink href="#" class="c-card-header-action c-btn-setting">
|
<CLink href="#" class="card-header-action btn-setting">
|
||||||
<i class="cui-settings"></i>
|
<i class="cui-settings"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
<CLink
|
<CLink
|
||||||
class="c-card-header-action c-btn-minimize"
|
class="card-header-action btn-minimize"
|
||||||
@click="formCollapsed=!formCollapsed"
|
@click="formCollapsed=!formCollapsed"
|
||||||
>
|
>
|
||||||
<i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
|
<i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = !show">
|
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
||||||
<i class="cui-circle-x"></i>
|
<i class="cui-circle-x"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCollapse :show="formCollapsed">
|
<CCollapse :show="formCollapsed">
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Prepended text"
|
label="Prepended text"
|
||||||
prepend-html="@"
|
prepend-html="@"
|
||||||
description="Here's some help text"
|
description="Here's some help text"
|
||||||
type="email"
|
type="email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Appended text"
|
label="Appended text"
|
||||||
append-html=".00"
|
append-html=".00"
|
||||||
description="Here's some help text"
|
description="Here's some help text"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Appended and prepended text"
|
label="Appended and prepended text"
|
||||||
prepend-html="$"
|
prepend-html="$"
|
||||||
append-html=".00"
|
append-html=".00"
|
||||||
description="Here's some help text"
|
description="Here's some help text"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Append with button"
|
label="Append with button"
|
||||||
description="Here's some help text"
|
description="Here's some help text"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="primary">Go!</CButton>
|
<CButton color="primary">Go!</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput label="Two-buttons append">
|
<CInput label="Two-buttons append">
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="primary">Search</CButton>
|
<CButton color="primary">Search</CButton>
|
||||||
<CButton variant="danger">Options</CButton>
|
<CButton color="danger">Options</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<div class="c-form-actions">
|
<div class="form-actions">
|
||||||
<CButton type="submit" variant="primary">Save changes</CButton>
|
<CButton type="submit" color="primary">Save changes</CButton>
|
||||||
<CButton variant="secondary">Cancel</CButton>
|
<CButton color="secondary">Cancel</CButton>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCollapse>
|
</CCollapse>
|
||||||
@@ -842,7 +852,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'forms',
|
name: 'Forms',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
selected: [], // Must be an array reference!
|
selected: [], // Must be an array reference!
|
||||||
@@ -851,7 +861,11 @@ export default {
|
|||||||
options: ['Option 1', 'Option 2', 'Option 3'],
|
options: ['Option 1', 'Option 2', 'Option 3'],
|
||||||
selectOptions: [
|
selectOptions: [
|
||||||
'Option 1', 'Option 2', 'Option 3',
|
'Option 1', 'Option 2', 'Option 3',
|
||||||
{ value: ['some value', 'another value'], label: 'Option 4' }],
|
{
|
||||||
|
value: ['some value', 'another value'],
|
||||||
|
label: 'Selected option'
|
||||||
|
}
|
||||||
|
],
|
||||||
selectedOption: ['some value', 'another value'],
|
selectedOption: ['some value', 'another value'],
|
||||||
|
|
||||||
formCollapsed: true,
|
formCollapsed: true,
|
||||||
@@ -868,14 +882,3 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.fade-enter-active,
|
|
||||||
.fade-leave-active {
|
|
||||||
transition: opacity 0.5s;
|
|
||||||
}
|
|
||||||
.fade-enter,
|
|
||||||
.fade-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
<div>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol>
|
<CCol>
|
||||||
@@ -7,16 +6,21 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap Jumbotron </strong>
|
<strong> Bootstrap Jumbotron </strong>
|
||||||
<!-- <div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
<small class="c-text-muted">docs</small>
|
href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
||||||
<p>For more information visit website</p>
|
<p>For more information visit website</p>
|
||||||
<CButton variant="primary" href="#">More Info</CButton>
|
<CButton color="primary" href="#">More Info</CButton>
|
||||||
</CJumbotron>
|
</CJumbotron>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -29,17 +33,17 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CJumbotron header="Bootstrap 4" lead="">
|
<CJumbotron header="Bootstrap 4" lead="">
|
||||||
<p slot="lead" class="c-lead">
|
<p slot="lead" class="lead">
|
||||||
This is a simple hero unit, a simple jumbotron-style component for
|
This is a simple hero unit, a simple jumbotron-style component for
|
||||||
calling extra attention to featured content or information.
|
calling extra attention to featured content or information.
|
||||||
</p>
|
</p>
|
||||||
<hr class="c-my-4">
|
<hr class="my-4">
|
||||||
<p>
|
<p>
|
||||||
It uses utility classes for typography and spacing to space content
|
It uses utility classes for typography and spacing to space content
|
||||||
out within the larger container.
|
out within the larger container.
|
||||||
</p>
|
</p>
|
||||||
<CButton variant="primary" href="#">Do Something</CButton>
|
<CButton color="primary" href="#">Do Something</CButton>
|
||||||
<CButton variant="success" href="#">Do Something Else</CButton>
|
<CButton color="success" href="#">Do Something Else</CButton>
|
||||||
</CJumbotron>
|
</CJumbotron>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -50,20 +54,20 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
||||||
<small>variants</small>
|
<small>colors</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CJumbotron
|
<CJumbotron
|
||||||
variant="info"
|
color="info"
|
||||||
text-variant="white"
|
text-color="white"
|
||||||
border-variant="dark"
|
border-color="dark"
|
||||||
header="Bootstrap 4"
|
header="Bootstrap 4"
|
||||||
>
|
>
|
||||||
<p slot="lead" class="c-lead">
|
<p slot="lead" class="lead">
|
||||||
This is a simple hero unit, a simple jumbotron-style component for
|
This is a simple hero unit, a simple jumbotron-style component for
|
||||||
calling extra attention to featured content or information.
|
calling extra attention to featured content or information.
|
||||||
</p>
|
</p>
|
||||||
<hr class="c-my-4">
|
<hr class="my-4">
|
||||||
<p>
|
<p>
|
||||||
It uses utility classes for typography and spacing to space content
|
It uses utility classes for typography and spacing to space content
|
||||||
out within the larger container.
|
out within the larger container.
|
||||||
@@ -74,11 +78,10 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'jumbotrons'
|
name: 'Jumbotrons'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
<div>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol md="6">
|
<CCol md="6">
|
||||||
@@ -7,11 +6,16 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap list group </strong>
|
<strong> Bootstrap list group </strong>
|
||||||
<!-- <div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
<small class="c-text-muted">docs</small>
|
href="https://coreui.io/vue/docs/3.0/components/ListGroup"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CListGroup>
|
<CListGroup>
|
||||||
@@ -106,22 +110,22 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CListGroup>
|
<CListGroup>
|
||||||
<CListGroupItem
|
<CListGroupItem
|
||||||
class="c-d-flex c-justify-content-between c-align-items-center"
|
class="d-flex justify-content-between align-items-center"
|
||||||
>
|
>
|
||||||
Cras justo odio
|
Cras justo odio
|
||||||
<CBadge variant="primary" pill>14</CBadge>
|
<CBadge color="primary" pill>14</CBadge>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
<CListGroupItem
|
<CListGroupItem
|
||||||
class="c-d-flex c-justify-content-between c-align-items-center"
|
class="d-flex justify-content-between align-items-center"
|
||||||
>
|
>
|
||||||
Dapibus ac facilisis in
|
Dapibus ac facilisis in
|
||||||
<CBadge variant="primary" pill>2</CBadge>
|
<CBadge color="primary" pill>2</CBadge>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
<CListGroupItem
|
<CListGroupItem
|
||||||
class="c-d-flex c-justify-content-between c-align-items-center"
|
class="d-flex justify-content-between align-items-center"
|
||||||
>
|
>
|
||||||
Morbi leo risus
|
Morbi leo risus
|
||||||
<CBadge variant="primary" pill>1</CBadge>
|
<CBadge color="primary" pill>1</CBadge>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
</CListGroup>
|
</CListGroup>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -134,19 +138,19 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> List group </strong>
|
<strong> List group </strong>
|
||||||
<small>variants</small>
|
<small>colors</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CListGroup>
|
<CListGroup>
|
||||||
<CListGroupItem>This is a default list group item</CListGroupItem>
|
<CListGroupItem>This is a default list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
|
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
|
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="success">This is a success list group item</CListGroupItem>
|
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
|
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
|
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="info">This is a info list group item</CListGroupItem>
|
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
|
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
|
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
|
||||||
</CListGroup>
|
</CListGroup>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -156,19 +160,19 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> List group </strong>
|
<strong> List group </strong>
|
||||||
<small>variants active</small>
|
<small>colors active</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CListGroup>
|
<CListGroup>
|
||||||
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
|
<CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
|
<CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
|
<CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
|
<CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
|
<CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
|
<CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
|
<CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
|
<CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
|
||||||
</CListGroup>
|
</CListGroup>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -190,7 +194,7 @@
|
|||||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||||
</CListGroup>
|
</CListGroup>
|
||||||
<p class="c-card-text c-mt-2">
|
<p class="card-text mt-2">
|
||||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||||
@@ -226,39 +230,39 @@
|
|||||||
<CListGroupItem
|
<CListGroupItem
|
||||||
href="#"
|
href="#"
|
||||||
active
|
active
|
||||||
class="c-flex-column c-align-items-start"
|
class="flex-column align-items-start"
|
||||||
>
|
>
|
||||||
<div class="c-d-flex c-w-100 c-justify-content-between">
|
<div class="d-flex w-100 justify-content-between">
|
||||||
<h5 class="c-mb-1">List group item heading</h5>
|
<h5 class="mb-1">List group item heading</h5>
|
||||||
<small>3 days ago</small>
|
<small>3 days ago</small>
|
||||||
</div>
|
</div>
|
||||||
<p class="c-mb-1">
|
<p class="mb-1">
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||||
sed diam eget risus varius blandit.
|
sed diam eget risus varius blandit.
|
||||||
</p>
|
</p>
|
||||||
<small>Donec id elit non mi porta.</small>
|
<small>Donec id elit non mi porta.</small>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
<CListGroupItem href="#" class="c-flex-column c-align-items-start">
|
<CListGroupItem href="#" class="flex-column align-items-start">
|
||||||
<div class="c-d-flex c-w-100 c-justify-content-between">
|
<div class="d-flex w-100 justify-content-between">
|
||||||
<h5 class="c-mb-1">List group item heading</h5>
|
<h5 class="mb-1">List group item heading</h5>
|
||||||
<small class="c-text-muted">3 days ago</small>
|
<small class="text-muted">3 days ago</small>
|
||||||
</div>
|
</div>
|
||||||
<p class="c-mb-1">
|
<p class="mb-1">
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||||
sed diam eget risus varius blandit.
|
sed diam eget risus varius blandit.
|
||||||
</p>
|
</p>
|
||||||
<small class="c-text-muted">Donec id elit non mi porta.</small>
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
<CListGroupItem href="#" disabled class="c-flex-column c-align-items-start">
|
<CListGroupItem href="#" disabled class="flex-column align-items-start">
|
||||||
<div class="c-d-flex c-w-100 c-justify-content-between">
|
<div class="d-flex w-100 justify-content-between">
|
||||||
<h5 class="c-mb-1">Disabled List group item</h5>
|
<h5 class="mb-1">Disabled List group item</h5>
|
||||||
<small class="c-text-muted">3 days ago</small>
|
<small class="text-muted">3 days ago</small>
|
||||||
</div>
|
</div>
|
||||||
<p class="c-mb-1">
|
<p class="mb-1">
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||||
sed diam eget risus varius blandit.
|
sed diam eget risus varius blandit.
|
||||||
</p>
|
</p>
|
||||||
<small class="c-text-muted">Donec id elit non mi porta.</small>
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
</CListGroup>
|
</CListGroup>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -266,11 +270,10 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'list-groups'
|
name: 'ListGroups'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+45
-76
@@ -1,52 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
<div>
|
||||||
<!-- <CCard>
|
|
||||||
<CNavbar toggleable="md" light variant="light">
|
|
||||||
<CNavbarToggle class="hehe" @click="test2 = !test2"/>
|
|
||||||
<CLink class="navbar-brand">NavBar</CLink>
|
|
||||||
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
|
|
||||||
<CNavbarNav pills class="navbar-nav">
|
|
||||||
<CNavItem>
|
|
||||||
hehehe1
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem class="nav-item">
|
|
||||||
hehehe1
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem class="nav-item">
|
|
||||||
hehehe2
|
|
||||||
</CNavItem>
|
|
||||||
<DefaultHeaderDropdownAccnt/>
|
|
||||||
</CNavbarNav>
|
|
||||||
<CNavbarNav class="ml-auto">
|
|
||||||
<CDropdown right class="c-nav-item " toggle-classes="c-nav-link">
|
|
||||||
<CDropdownItem><i class="cui-file" /> Projects
|
|
||||||
<CBadge variant="primary">32</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem><i class="cui-shield" /> Lock Account</CDropdownItem>
|
|
||||||
<CDropdownItem><i class="cui-lock-locked" /> Logout</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</CNavbarNav>
|
|
||||||
</CCollapse>
|
|
||||||
</CNavbar>
|
|
||||||
</CCard> -->
|
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap Navbar </strong>
|
<strong> Bootstrap Navbar </strong>
|
||||||
<!-- <div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
<small class="c-text-muted">docs</small>
|
href="https://coreui.io/vue/docs/3.0/components/Navbar"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNavbar
|
<CNavbar
|
||||||
toggleable="md"
|
expandable="md"
|
||||||
variant="info"
|
color="info"
|
||||||
sticky
|
|
||||||
>
|
>
|
||||||
<CNavbarToggle @click="show=!show"/>
|
<CToggler inNavbar @click="show=!show"/>
|
||||||
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
||||||
<CCollapse :show="show" navbar>
|
<CCollapse :show="show" navbar>
|
||||||
<CNavbarNav>
|
<CNavbarNav>
|
||||||
@@ -55,21 +29,21 @@
|
|||||||
</CNavbarNav>
|
</CNavbarNav>
|
||||||
|
|
||||||
<!-- Right aligned nav items -->
|
<!-- Right aligned nav items -->
|
||||||
<CNavbarNav class="c-ml-auto">
|
<CNavbarNav class="ml-auto">
|
||||||
<CForm inline>
|
<CForm inline>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mr-sm-2"
|
class="mr-sm-2"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
size="sm"
|
size="sm"
|
||||||
/>
|
/>
|
||||||
<CButton variant="light" size="sm" class="c-my-2 c-my-sm-0">
|
<CButton color="light" size="sm" class="my-2 my-sm-0">
|
||||||
Search
|
Search
|
||||||
</CButton>
|
</CButton>
|
||||||
</CForm>
|
</CForm>
|
||||||
|
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Lang"
|
toggler-text="Lang"
|
||||||
nav
|
in-nav
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
>
|
>
|
||||||
<CDropdownItem>EN</CDropdownItem>
|
<CDropdownItem>EN</CDropdownItem>
|
||||||
@@ -79,8 +53,8 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
|
|
||||||
<CDropdown
|
<CDropdown
|
||||||
nav
|
in-nav
|
||||||
buttonHtml="<em>User</em>"
|
toggler-text="User"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Profile</CDropdownItem>
|
<CDropdownItem>Profile</CDropdownItem>
|
||||||
@@ -98,10 +72,10 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<!-- Image and text -->
|
<!-- Image and text -->
|
||||||
<CNavbar variant="faded" light>
|
<CNavbar color="faded" light>
|
||||||
<CNavbarBrand href="#">
|
<CNavbarBrand href="#">
|
||||||
<img src="https://placekitten.com/g/30/30" class="c-d-inline-block c-align-top" alt="BV">
|
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
|
||||||
BootstrapVue
|
CoreuiVue
|
||||||
</CNavbarBrand>
|
</CNavbarBrand>
|
||||||
</CNavbar>
|
</CNavbar>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -112,12 +86,12 @@
|
|||||||
<small>text</small>
|
<small>text</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNavbar toggleable="sm" light variant="light">
|
<CNavbar toggleable="sm" light color="light">
|
||||||
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
|
<CToggler inNavbar @click="navbarText=!navbarText"/>
|
||||||
<CNavbarBrand>BootstrapVue</CNavbarBrand>
|
<CNavbarBrand>CoreuiVue</CNavbarBrand>
|
||||||
<CCollapse :show="navbarText" navbar>
|
<CCollapse :show="navbarText" navbar>
|
||||||
<CNavbarNav>
|
<CNavbarNav>
|
||||||
<span class="c-navbar-text">Navbar text</span>
|
<span class="navbar-text">Navbar text</span>
|
||||||
</CNavbarNav>
|
</CNavbarNav>
|
||||||
</CCollapse>
|
</CCollapse>
|
||||||
</CNavbar>
|
</CNavbar>
|
||||||
@@ -129,17 +103,17 @@
|
|||||||
<small>dropdown</small>
|
<small>dropdown</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNavbar>
|
<CNavbar expandable="sm" color="primary" >
|
||||||
<!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
|
<CToggler inNavbar @click="navbarDropdown = !navbarDropdown"/>
|
||||||
<CCollapse :show="navbarDropdown" navbar> -->
|
<CCollapse :show="navbarDropdown" navbar>
|
||||||
<CNavbarNav>
|
<CNavbarNav>
|
||||||
<CNavItem href="#">Home</CNavItem>
|
<CNavItem href="#">Home</CNavItem>
|
||||||
<CNavItem href="#">Link</CNavItem>
|
<CNavItem href="#">Link</CNavItem>
|
||||||
<!-- Navbar dropdowns -->
|
<!-- Navbar dropdowns -->
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Lang"
|
toggler-text="Lang"
|
||||||
right
|
placement="bottom-end"
|
||||||
nav
|
in-nav
|
||||||
>
|
>
|
||||||
<CDropdownItem>EN</CDropdownItem>
|
<CDropdownItem>EN</CDropdownItem>
|
||||||
<CDropdownItem>ES</CDropdownItem>
|
<CDropdownItem>ES</CDropdownItem>
|
||||||
@@ -147,15 +121,15 @@
|
|||||||
<CDropdownItem>FA</CDropdownItem>
|
<CDropdownItem>FA</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="User"
|
toggler-text="User"
|
||||||
right
|
placement="bottom-end"
|
||||||
nav
|
in-nav
|
||||||
>
|
>
|
||||||
<CDropdownItem>Account</CDropdownItem>
|
<CDropdownItem>Account</CDropdownItem>
|
||||||
<CDropdownItem>Settings</CDropdownItem>
|
<CDropdownItem>Settings</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
</CNavbarNav>
|
</CNavbarNav>
|
||||||
<!-- </CCollapse> -->
|
</CCollapse>
|
||||||
</CNavbar>
|
</CNavbar>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -165,14 +139,14 @@
|
|||||||
<small>form</small>
|
<small>form</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNavbar light variant="light">
|
<CNavbar light color="light">
|
||||||
<CForm inline>
|
<CForm inline>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mr-sm-2"
|
class="mr-sm-2"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
size="sm"
|
size="sm"
|
||||||
/>
|
/>
|
||||||
<CButton variant="outline-success" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
|
<CButton color="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CNavbar>
|
</CNavbar>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -183,10 +157,10 @@
|
|||||||
<small>input group</small>
|
<small>input group</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNavbar light variant="light">
|
<CNavbar light color="light">
|
||||||
<CForm inline>
|
<CForm inline>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mr-sm-2"
|
class="mr-sm-2"
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
/>
|
/>
|
||||||
</CForm>
|
</CForm>
|
||||||
@@ -194,15 +168,10 @@
|
|||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'navbars',
|
name: 'Navbars',
|
||||||
components: {
|
|
||||||
DefaultHeaderDropdownAccnt
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
show: false,
|
show: false,
|
||||||
|
|||||||
+12
-12
@@ -1,17 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
<div>
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
|
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
|
||||||
<!-- <div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<CLink
|
<a
|
||||||
href="#"
|
href="https://coreui.io/vue/docs/3.0/components/Nav"
|
||||||
class="c-card-header-action"
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
>
|
>
|
||||||
<small class="c-text-muted">docs</small>
|
<small class="text-muted">docs</small>
|
||||||
</CLink>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNav>
|
<CNav>
|
||||||
@@ -125,7 +126,7 @@
|
|||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
button-content="Dropdown"
|
button-content="Dropdown"
|
||||||
>
|
>
|
||||||
<!-- <a class="c-nav-link c-dropdown-toggle" slot="button">Dropdown</a> -->
|
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
|
||||||
<CDropdownItem>one</CDropdownItem>
|
<CDropdownItem>one</CDropdownItem>
|
||||||
<CDropdownItem>two</CDropdownItem>
|
<CDropdownItem>two</CDropdownItem>
|
||||||
<CDropdownDivider/>
|
<CDropdownDivider/>
|
||||||
@@ -142,7 +143,7 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="3" class="c-m-0">
|
<CCol col="3" class="m-0">
|
||||||
<CNav vertical pills >
|
<CNav vertical pills >
|
||||||
<CNavItem active>Active</CNavItem>
|
<CNavItem active>Active</CNavItem>
|
||||||
<CNavItem>Link</CNavItem>
|
<CNavItem>Link</CNavItem>
|
||||||
@@ -154,12 +155,11 @@
|
|||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'navs',
|
name: 'Navs',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
item: 2
|
item: 2
|
||||||
|
|||||||
@@ -1,15 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
<div>
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Responsive bootstrap Pagination</strong>
|
<strong> Responsive bootstrap Pagination</strong>
|
||||||
<!-- <div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
<small class="c-text-muted">docs</small>
|
href="https://coreui.io/vue/docs/3.0/components/Pagination"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<h6>Default</h6>
|
<h6>Default</h6>
|
||||||
@@ -75,12 +79,11 @@
|
|||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'paginations',
|
name: 'Paginations',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
currentPage: 3,
|
currentPage: 3,
|
||||||
|
|||||||
+20
-30
@@ -1,53 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
<div>
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap Popovers</strong>
|
<strong> Bootstrap Popovers</strong>
|
||||||
<!-- <div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
<small class="c-text-muted">docs</small>
|
href="https://coreui.io/vue/docs/3.0/components/Popover"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="4">
|
<CCol col="6">
|
||||||
<div class="c-my-3 c-text-center">
|
<div class="my-3 text-center">
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
v-c-popover="{
|
v-c-popover="{
|
||||||
header: 'Popover header',
|
header: 'Popover header',
|
||||||
content: 'I am popover content!'
|
content: 'I am popover content!'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
Hover Me
|
Click Me
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="4">
|
<CCol col="6">
|
||||||
<div class="c-my-3 c-text-center">
|
<div class="my-3 text-center">
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
v-c-popover="{
|
v-c-popover="{
|
||||||
header: 'Popover!',
|
header: 'Popover!',
|
||||||
content: 'I start <strong>open</strong>',
|
content: 'I start <strong>open</strong>',
|
||||||
active: true
|
active: true
|
||||||
}"
|
}"
|
||||||
textHtml="Hover me"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="4">
|
|
||||||
<div class="c-my-3 c-text-center">
|
|
||||||
<CButton
|
|
||||||
variant="primary"
|
|
||||||
v-c-popover.click="{
|
|
||||||
header: 'Popover!',
|
|
||||||
content: 'I am showing on click and hiding on click outside tooltip!',
|
|
||||||
placement: 'bottom'
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
Click me
|
Click me
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -62,16 +53,16 @@
|
|||||||
<strong> Popovers </strong>
|
<strong> Popovers </strong>
|
||||||
<small>placement</small>
|
<small>placement</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody class="c-my-3">
|
<CCardBody class="my-3">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol
|
<CCol
|
||||||
md="4"
|
md="4"
|
||||||
class="c-py-4 c-text-center"
|
class="py-4 text-center"
|
||||||
v-for="placement in placements"
|
v-for="placement in placements"
|
||||||
:key="placement"
|
:key="placement"
|
||||||
>
|
>
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
v-c-popover="{
|
v-c-popover="{
|
||||||
header: 'Popover!',
|
header: 'Popover!',
|
||||||
content: `Placement ${placement}`,
|
content: `Placement ${placement}`,
|
||||||
@@ -85,12 +76,11 @@
|
|||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'popovers',
|
name: 'Popovers',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
placements: [
|
placements: [
|
||||||
|
|||||||
@@ -1,24 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
<div>
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap Progress</strong>
|
<strong> Bootstrap Progress</strong>
|
||||||
<!-- <div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
<small class="c-text-muted">docs</small>
|
href="https://coreui.io/vue/docs/3.0/components/Progress"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
|
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
|
||||||
<CProgress class="c-mt-1" :max="max" show-value>
|
<CProgress class="mt-1" :max="max" show-value>
|
||||||
<CProgressBar :value="counter*(6/10)" variant="success"/>
|
<CProgressBar :value="counter*(6/10)" color="success"/>
|
||||||
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
|
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
|
||||||
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
|
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
|
||||||
</CProgress>
|
</CProgress>
|
||||||
<CButton class="c-mt-4" @click="clicked">Click me</CButton>
|
<CButton
|
||||||
|
@click="clicked"
|
||||||
|
color="secondary"
|
||||||
|
class="mt-4"
|
||||||
|
>
|
||||||
|
Click me to animate progress bars
|
||||||
|
</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -27,15 +37,15 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<h6>No label</h6>
|
<h6>No label</h6>
|
||||||
<CProgress :value="value" :max="max2" class="c-mb-3"/>
|
<CProgress :value="value" :max="max2" class="mb-3"/>
|
||||||
<h6>Value label</h6>
|
<h6>Value label</h6>
|
||||||
<CProgress :value="value" :max="max2" show-value class="c-mb-3"/>
|
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
|
||||||
<h6>Progress label</h6>
|
<h6>Progress label</h6>
|
||||||
<CProgress :value="value" :max="max2" show-progress class="c-mb-3"/>
|
<CProgress :value="value" :max="max2" show-percentage class="mb-3"/>
|
||||||
<h6>Value label with precision</h6>
|
<h6>Value label with precision</h6>
|
||||||
<CProgress :value="value" :max="max2" :precision="2" show-value class="c-mb-3"/>
|
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
|
||||||
<h6>Progress label with precision</h6>
|
<h6>Progress label with precision</h6>
|
||||||
<CProgress :value="value" :max="max2" :precision="2" show-progress class="c-mb-3"/>
|
<CProgress :value="value" :max="max2" :precision="2" show-percentage class="mb-3"/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -46,11 +56,11 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<h6>Default width</h6>
|
<h6>Default width</h6>
|
||||||
<CProgress :value="value3" class="c-mb-3"/>
|
<CProgress :value="value3" class="mb-3"/>
|
||||||
<h6>Custom widths</h6>
|
<h6>Custom widths</h6>
|
||||||
<CProgress :value="value3" class="c-w-75 c-mb-2"/>
|
<CProgress :value="value3" class="w-75 mb-2"/>
|
||||||
<CProgress :value="value3" class="c-w-50 c-mb-2"/>
|
<CProgress :value="value3" class="w-50 mb-2"/>
|
||||||
<CProgress :value="value3" class="c-w-25"/>
|
<CProgress :value="value3" class="w-25"/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -61,10 +71,10 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<h6>Default height</h6>
|
<h6>Default height</h6>
|
||||||
<CProgress :value="value3" show-progress class="c-mb-3"/>
|
<CProgress :value="value3" show-percentage class="mb-3"/>
|
||||||
<h6>Custom heights</h6>
|
<h6>Custom heights</h6>
|
||||||
<CProgress height="2rem" :value="value3" show-progress class="c-mb-2"/>
|
<CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
|
||||||
<CProgress height="20px" :value="value3" show-progress class="c-mb-2"/>
|
<CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
|
||||||
<CProgress height="2px" :value="value3"/>
|
<CProgress height="2px" :value="value3"/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -72,16 +82,16 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Progress </strong>
|
<strong> Progress </strong>
|
||||||
<small>variants</small>
|
<small>colors</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div :key="index" v-for="(bar, index) in bars" class="c-row c-mb-1">
|
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
|
||||||
<div class="c-col-sm-2">{{ bar.variant }}:</div>
|
<div class="col-sm-2">{{ bar.color }}:</div>
|
||||||
<div class="c-col-sm-10 c-pt-1">
|
<div class="col-sm-10 pt-1">
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="bar.value"
|
:value="bar.value"
|
||||||
:variant="bar.variant"
|
:color="bar.color"
|
||||||
:key="bar.variant"
|
:key="bar.color"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -96,29 +106,29 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="25"
|
:value="25"
|
||||||
variant="success"
|
color="success"
|
||||||
:striped="striped"
|
:striped="striped"
|
||||||
class="c-mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="50"
|
:value="50"
|
||||||
variant="info"
|
color="info"
|
||||||
:striped="striped"
|
:striped="striped"
|
||||||
class="c-mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="75"
|
:value="75"
|
||||||
variant="warning"
|
color="warning"
|
||||||
:striped="striped"
|
:striped="striped"
|
||||||
class="c-mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="100"
|
:value="100"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:striped="striped"
|
:striped="striped"
|
||||||
class="c-mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CButton variant="secondary" @click="striped = !striped">
|
<CButton color="secondary" @click="striped = !striped">
|
||||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -132,32 +142,32 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="25"
|
:value="25"
|
||||||
variant="success"
|
color="success"
|
||||||
striped
|
striped
|
||||||
:animated="animate"
|
:animated="animate"
|
||||||
class="c-mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="50"
|
:value="50"
|
||||||
variant="info"
|
color="info"
|
||||||
striped
|
striped
|
||||||
:animated="animate"
|
:animated="animate"
|
||||||
class="c-mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="75"
|
:value="75"
|
||||||
variant="warning"
|
color="warning"
|
||||||
striped
|
striped
|
||||||
:animated="animate"
|
:animated="animate"
|
||||||
class="c-mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="100"
|
:value="100"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:animated="animate"
|
:animated="animate"
|
||||||
class="c-mb-3"
|
class="mb-3"
|
||||||
/>
|
/>
|
||||||
<CButton variant="secondary" @click="animate = !animate">
|
<CButton color="secondary" @click="animate = !animate">
|
||||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -169,50 +179,49 @@
|
|||||||
<small>multiple bars</small>
|
<small>multiple bars</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CProgress :max="max3" class="c-mb-3">
|
<CProgress :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="primary" :value="values[0]"/>
|
<CProgressBar color="primary" :value="values[0]"/>
|
||||||
<CProgressBar variant="success" :value="values[1]"/>
|
<CProgressBar color="success" :value="values[1]"/>
|
||||||
<CProgressBar variant="info" :value="values[2]"/>
|
<CProgressBar color="info" :value="values[2]"/>
|
||||||
</CProgress>
|
</CProgress>
|
||||||
<CProgress show-progress :max="max3" class="c-mb-3">
|
<CProgress show-percentage :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="primary" :value="values[0]"/>
|
<CProgressBar color="primary" :value="values[0]"/>
|
||||||
<CProgressBar variant="success" :value="values[1]"/>
|
<CProgressBar color="success" :value="values[1]"/>
|
||||||
<CProgressBar variant="info" :value="values[2]"/>
|
<CProgressBar color="info" :value="values[2]"/>
|
||||||
</CProgress>
|
</CProgress>
|
||||||
<CProgress show-value striped :max="max3" class="c-mb-3">
|
<CProgress show-value striped :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="primary" :value="values[0]"/>
|
<CProgressBar color="primary" :value="values[0]"/>
|
||||||
<CProgressBar variant="success" :value="values[1]"/>
|
<CProgressBar color="success" :value="values[1]"/>
|
||||||
<CProgressBar variant="info" :value="values[2]"/>
|
<CProgressBar color="info" :value="values[2]"/>
|
||||||
</CProgress>
|
</CProgress>
|
||||||
<CProgress :max="max3" class="c-mb-3">
|
<CProgress :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="primary" :value="values[0]" show-progress/>
|
<CProgressBar color="primary" :value="values[0]" show-percentage/>
|
||||||
<CProgressBar variant="success" :value="values[1]" animated show-progress/>
|
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
|
||||||
<CProgressBar variant="info" :value="values[2]" striped show-progress/>
|
<CProgressBar color="info" :value="values[2]" striped show-percentage/>
|
||||||
</CProgress>
|
</CProgress>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'progress-bars',
|
name: 'ProgressBars',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
counter: 45,
|
counter: 73,
|
||||||
max: 100,
|
max: 100,
|
||||||
max2: 50,
|
max2: 50,
|
||||||
value: 33.333333333,
|
value: 33.333333333,
|
||||||
value3: 75,
|
value3: 75,
|
||||||
bars: [
|
bars: [
|
||||||
{variant: 'success', value: 75},
|
{color: 'success', value: 75},
|
||||||
{variant: 'info', value: 75},
|
{color: 'info', value: 75},
|
||||||
{variant: 'warning', value: 75},
|
{color: 'warning', value: 75},
|
||||||
{variant: 'danger', value: 75},
|
{color: 'danger', value: 75},
|
||||||
{variant: 'primary', value: 75},
|
{color: 'primary', value: 75},
|
||||||
{variant: 'secondary', value: 75},
|
{color: 'secondary', value: 75},
|
||||||
{variant: 'dark', value: 75}
|
{color: 'dark', value: 75}
|
||||||
],
|
],
|
||||||
timer: null,
|
timer: null,
|
||||||
striped: true,
|
striped: true,
|
||||||
@@ -224,8 +233,6 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
clicked () {
|
clicked () {
|
||||||
this.counter = Math.random() * this.max
|
this.counter = Math.random() * this.max
|
||||||
// console.log('Change progress to ' +
|
|
||||||
// Math.round(this.counter * 100) / 100)
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|||||||
+255
-247
@@ -4,34 +4,33 @@
|
|||||||
<CCol xs="12" md="6">
|
<CCol xs="12" md="6">
|
||||||
<CCard v-if="true">
|
<CCard v-if="true">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<h5>
|
|
||||||
Radio switches
|
Radio switches
|
||||||
<CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
|
<CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
|
||||||
<CBadge variant="danger" class="c-float-right">NEW</CBadge>
|
<div class="card-header-actions">
|
||||||
</h5>
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Switch"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<!-- <CSwitch
|
|
||||||
:checked.sync="test11"
|
|
||||||
true-value="yes"
|
|
||||||
false-value="no"
|
|
||||||
id="alt"
|
|
||||||
name="lg"
|
|
||||||
required
|
|
||||||
/> -->
|
|
||||||
<!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
|
|
||||||
<CSwitch
|
<CSwitch
|
||||||
class="c-mx-1"
|
v-for="(color, key) in colors"
|
||||||
:key="key"
|
:key="'radio' + key"
|
||||||
:variant="variant"
|
class="mx-1"
|
||||||
|
:color="color"
|
||||||
shape="3d"
|
shape="3d"
|
||||||
outline="alt"
|
outline="alt"
|
||||||
v-bind="labelIcon"
|
v-bind="labelIcon"
|
||||||
type="radio"
|
type="radio"
|
||||||
name="radio"
|
name="radio"
|
||||||
:checked.sync="radio"
|
:checked="key === 2"
|
||||||
:value="variant"
|
@update:checked="(val) => val ? radio = color : null"
|
||||||
v-for="(variant, key) in variants"
|
:value="color"
|
||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -42,25 +41,23 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Switch default
|
Switch default
|
||||||
<CBadge variant="primary">{{checker}}</CBadge>
|
<CBadge color="primary">{{checker}}</CBadge>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch
|
<CSwitch
|
||||||
class="c-mx-1"
|
class="mx-1"
|
||||||
variant="primary"
|
color="primary"
|
||||||
name="switch1"
|
name="switch1"
|
||||||
:checked.sync="checker"
|
:checked.sync="checker"
|
||||||
true-value="yes"
|
|
||||||
false-value="no"
|
|
||||||
/>
|
/>
|
||||||
<CSwitch
|
<CSwitch
|
||||||
class="c-mx-1"
|
class="mx-1"
|
||||||
:variant="variant"
|
:color="color"
|
||||||
checked
|
checked
|
||||||
:key="key"
|
:key="key"
|
||||||
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
v-for="(color, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
||||||
/>
|
/>
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled />
|
<CSwitch class="mx-1" color="primary" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -70,15 +67,15 @@
|
|||||||
Switch pills
|
Switch pills
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="pill"/>
|
<CSwitch class="mx-1" color="primary" checked shape="pill"/>
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
|
<CSwitch class="mx-1" color="success" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
|
<CSwitch class="mx-1" color="info" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
|
<CSwitch class="mx-1" color="light" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="pill" />
|
<CSwitch class="mx-1" color="primary" disabled shape="pill" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -88,15 +85,15 @@
|
|||||||
3d Switch
|
3d Switch
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -106,15 +103,15 @@
|
|||||||
3d Switch <small><code>disabled</code></small>
|
3d Switch <small><code>disabled</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="success" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="info" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="light" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -124,15 +121,15 @@
|
|||||||
3d Switch <small><code>outline="alt"</code></small>
|
3d Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -142,15 +139,15 @@
|
|||||||
3d Switch <small><code>label</code></small>
|
3d Switch <small><code>label</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
|
<CSwitch class="mx-1" color="primary" shape="3d" checked v-bind="labelIcon"/>
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -160,15 +157,15 @@
|
|||||||
3d Switch <small><code>outline="alt"</code></small>
|
3d Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -178,15 +175,15 @@
|
|||||||
3d Switch <small><code>outline="alt"</code></small>
|
3d Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -196,15 +193,15 @@
|
|||||||
Switch <small><code>outline</code></small>
|
Switch <small><code>outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline />
|
<CSwitch class="mx-1" color="primary" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline />
|
<CSwitch class="mx-1" color="secondary" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline />
|
<CSwitch class="mx-1" color="success" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline />
|
<CSwitch class="mx-1" color="warning" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline />
|
<CSwitch class="mx-1" color="info" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline />
|
<CSwitch class="mx-1" color="danger" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline />
|
<CSwitch class="mx-1" color="light" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline />
|
<CSwitch class="mx-1" color="dark" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline disabled />
|
<CSwitch class="mx-1" color="primary" outline disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -214,15 +211,15 @@
|
|||||||
Switch <small><code>outline shape="pill"</code></small>
|
Switch <small><code>outline shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/>
|
<CSwitch class="mx-1" color="primary" checked outline shape="pill"/>
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -232,15 +229,15 @@
|
|||||||
Switch <small><code>outline="alt"</code></small>
|
Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -250,15 +247,15 @@
|
|||||||
Switch <small><code>outline="alt" shape="pill"</code></small>
|
Switch <small><code>outline="alt" shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill"/>
|
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -268,15 +265,15 @@
|
|||||||
Switch <small><code>label</code></small>
|
Switch <small><code>label</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked />
|
<CSwitch class="mx-1" color="primary" checked />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked />
|
<CSwitch class="mx-1" color="secondary" checked />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked />
|
<CSwitch class="mx-1" color="success" checked />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked />
|
<CSwitch class="mx-1" color="warning" checked />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked />
|
<CSwitch class="mx-1" color="info" checked />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked />
|
<CSwitch class="mx-1" color="danger" checked />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked />
|
<CSwitch class="mx-1" color="light" checked />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked />
|
<CSwitch class="mx-1" color="dark" checked />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled />
|
<CSwitch class="mx-1" color="primary" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -286,15 +283,15 @@
|
|||||||
Switch <small><code>label shape="pill"</code></small>
|
Switch <small><code>label shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" />
|
<CSwitch class="mx-1" color="primary" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
|
<CSwitch class="mx-1" color="success" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
|
<CSwitch class="mx-1" color="info" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
|
<CSwitch class="mx-1" color="light" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -304,15 +301,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline />
|
<CSwitch class="mx-1" color="primary" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline />
|
<CSwitch class="mx-1" color="secondary" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline />
|
<CSwitch class="mx-1" color="success" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline />
|
<CSwitch class="mx-1" color="warning" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline />
|
<CSwitch class="mx-1" color="info" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline />
|
<CSwitch class="mx-1" color="danger" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline />
|
<CSwitch class="mx-1" color="light" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline />
|
<CSwitch class="mx-1" color="dark" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline disabled />
|
<CSwitch class="mx-1" color="primary" outline disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -322,15 +319,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="primary" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -340,15 +337,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -358,15 +355,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -377,15 +374,15 @@
|
|||||||
Switch <small><code>label</code></small>
|
Switch <small><code>label</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked v-bind="labelIcon"/>
|
<CSwitch class="mx-1" color="primary" checked v-bind="labelIcon"/>
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>shape
|
</CCard>shape
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -395,15 +392,15 @@
|
|||||||
Switch <small><code>label shape="pill"</code></small>
|
Switch <small><code>label shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -413,15 +410,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -431,15 +428,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -449,15 +446,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -467,15 +464,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -485,11 +482,11 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Sizes
|
Sizes
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody class="c-p-0">
|
<CCardBody class="p-0">
|
||||||
<CTable
|
<CTable
|
||||||
hover
|
hover
|
||||||
striped
|
striped
|
||||||
class="c-table-align-middle c-mb-0"
|
class="table-align-middle mb-0"
|
||||||
:items="items"
|
:items="items"
|
||||||
:fields="fields"
|
:fields="fields"
|
||||||
no-sorting
|
no-sorting
|
||||||
@@ -498,7 +495,7 @@
|
|||||||
<td>
|
<td>
|
||||||
<CSwitch
|
<CSwitch
|
||||||
:shape="item.example.shape"
|
:shape="item.example.shape"
|
||||||
:variant="item.example.variant"
|
:color="item.example.color"
|
||||||
:size="item.example.size"
|
:size="item.example.size"
|
||||||
:checked="item.example.checked"
|
:checked="item.example.checked"
|
||||||
/>
|
/>
|
||||||
@@ -519,10 +516,10 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'switches',
|
name: 'Switches',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
variants:[
|
colors: [
|
||||||
'primary','secondary','warning','success','info','danger','light','dark'
|
'primary','secondary','warning','success','info','danger','light','dark'
|
||||||
],
|
],
|
||||||
fields: [
|
fields: [
|
||||||
@@ -531,12 +528,24 @@ export default {
|
|||||||
{ key: 'size_prop', label: 'Size prop' }
|
{ key: 'size_prop', label: 'Size prop' }
|
||||||
],
|
],
|
||||||
items: [
|
items: [
|
||||||
{size: 'Large', example: {shape: '3d', variant: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
|
{
|
||||||
{size: 'Normal', example: {shape: '3d', variant: 'primary', size: '', checked: true}, size_prop: '-'},
|
size: 'Large',
|
||||||
{size: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
|
example: { shape: '3d', color: 'primary', size: 'lg', checked: true },
|
||||||
|
size_prop: 'Add following prop <code>size="lg"</code>'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
size: 'Normal',
|
||||||
|
example: { shape: '3d', color: 'primary', size: '', checked: true },
|
||||||
|
size_prop: '-'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
size: 'Small',
|
||||||
|
example: {shape: '3d', color: 'primary', size: 'sm', checked: true},
|
||||||
|
size_prop: 'Add following prop <code>size="sm"</code>'
|
||||||
|
}
|
||||||
],
|
],
|
||||||
checker: 'yes',
|
checker: true,
|
||||||
radio: 'primary',
|
radio: 'warning',
|
||||||
labelIcon: {
|
labelIcon: {
|
||||||
labelOn: '\u2713',
|
labelOn: '\u2713',
|
||||||
labelOff: '\u2715'
|
labelOff: '\u2715'
|
||||||
@@ -544,8 +553,7 @@ export default {
|
|||||||
labelTxt: {
|
labelTxt: {
|
||||||
labelOn: 'yes',
|
labelOn: 'yes',
|
||||||
labelOff: 'no'
|
labelOff: 'no'
|
||||||
},
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,13 +8,13 @@
|
|||||||
:fixed="fixed"
|
:fixed="fixed"
|
||||||
:items="items"
|
:items="items"
|
||||||
:fields="fields"
|
:fields="fields"
|
||||||
:per-page="small ? 10 : 5"
|
:items-per-page="small ? 10 : 5"
|
||||||
:dark="dark"
|
:dark="dark"
|
||||||
no-sorting
|
pagination
|
||||||
>
|
>
|
||||||
<template #status="{item}">
|
<template #status="{item}">
|
||||||
<td>
|
<td>
|
||||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
|
||||||
</td>
|
</td>
|
||||||
</template>
|
</template>
|
||||||
</CTable>
|
</CTable>
|
||||||
@@ -23,7 +23,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'TableWrapper',
|
name: 'Table',
|
||||||
props: {
|
props: {
|
||||||
items: Array,
|
items: Array,
|
||||||
fields: {
|
fields: {
|
||||||
@@ -49,7 +49,7 @@ export default {
|
|||||||
: status === 'Inactive' ? 'secondary'
|
: status === 'Inactive' ? 'secondary'
|
||||||
: status === 'Pending' ? 'warning'
|
: status === 'Pending' ? 'warning'
|
||||||
: status === 'Banned' ? 'danger' : 'primary'
|
: status === 'Banned' ? 'danger' : 'primary'
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+11
-152
@@ -1,102 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<CRow>
|
|
||||||
<CCol sm="12">
|
|
||||||
<CCard header-html="CTable power presentation" body-wrapper>
|
|
||||||
<CTable
|
|
||||||
:items="getItems()"
|
|
||||||
:fields="fields"
|
|
||||||
:per-page="6"
|
|
||||||
index-column
|
|
||||||
filter-row
|
|
||||||
options-row
|
|
||||||
hover
|
|
||||||
:default-column-filter="{ role:'staff' }"
|
|
||||||
:default-sorters="['username', 'asc']"
|
|
||||||
:default-filter="2012"
|
|
||||||
dark-header
|
|
||||||
footer
|
|
||||||
pagination
|
|
||||||
>
|
|
||||||
<template #index-column="{index}">
|
|
||||||
<td
|
|
||||||
@click="toggleDetails(index)"
|
|
||||||
style="cursor:pointer"
|
|
||||||
class="c-text-center"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="c-icons c-font-lg c-d-block cui-chevron-right"
|
|
||||||
style="transition: transform 0.4s"
|
|
||||||
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"
|
|
||||||
></i>
|
|
||||||
</td>
|
|
||||||
</template>
|
|
||||||
<template #status="{item}">
|
|
||||||
<td>
|
|
||||||
<CBadge :variant="getBadge(item.status)">
|
|
||||||
{{item.status}}
|
|
||||||
</CBadge>
|
|
||||||
</td>
|
|
||||||
</template>
|
|
||||||
<template #show_details="{item, index}">
|
|
||||||
<td class="c-py-2">
|
|
||||||
<CButton
|
|
||||||
variant="outline-primary"
|
|
||||||
square
|
|
||||||
size="sm"
|
|
||||||
@click="toggleDetails(index)"
|
|
||||||
:text-html="details.includes(index) ? 'Hide' : 'Show'"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
</template>
|
|
||||||
<template #details="{item, index}">
|
|
||||||
<CCollapse :show="details.includes(index)">
|
|
||||||
<CCardBody>
|
|
||||||
{{index + 1}} - {{item}}
|
|
||||||
</CCardBody>
|
|
||||||
</CCollapse>
|
|
||||||
</template>
|
|
||||||
</CTable>
|
|
||||||
<!-- <CPagination
|
|
||||||
v-show="pages > 1"
|
|
||||||
:activePage.sync="page"
|
|
||||||
:pages="pages"
|
|
||||||
/> -->
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<!-- <CRow>
|
|
||||||
<CCol sm="12">
|
|
||||||
<CCard header-html="test2">
|
|
||||||
<CTable
|
|
||||||
:items="items.slice(0)"
|
|
||||||
:fields="fields"
|
|
||||||
:per-page="5"
|
|
||||||
index-col="onlyCleaner"
|
|
||||||
filter-row
|
|
||||||
options-row="onlyFiltesr"
|
|
||||||
:pagination-props="{align:'center'}"
|
|
||||||
>
|
|
||||||
<td slot="status" slot-scope="{item}">
|
|
||||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
|
||||||
</td>
|
|
||||||
</CTable>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow> -->
|
|
||||||
|
|
||||||
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol lg="6">
|
<CCol lg="6">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
caption="<i class='fa fa-align-justify'></i> Simple Table"
|
caption="<i class='fa fa-align-justify'></i> Simple Table"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
|
||||||
<CCol lg="6">
|
<CCol lg="6">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
striped
|
striped
|
||||||
caption="<i class='fa fa-align-justify'></i> Striped Table"
|
caption="<i class='fa fa-align-justify'></i> Striped Table"
|
||||||
/>
|
/>
|
||||||
@@ -106,7 +20,7 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol lg="6">
|
<CCol lg="6">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
small
|
small
|
||||||
caption="<i class='fa fa-align-justify'></i> Condensed Table"
|
caption="<i class='fa fa-align-justify'></i> Condensed Table"
|
||||||
/>
|
/>
|
||||||
@@ -114,7 +28,7 @@
|
|||||||
|
|
||||||
<CCol lg="6">
|
<CCol lg="6">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
fixed
|
fixed
|
||||||
bordered
|
bordered
|
||||||
caption="<i class='fa fa-align-justify'></i> Bordered Table"
|
caption="<i class='fa fa-align-justify'></i> Bordered Table"
|
||||||
@@ -125,7 +39,7 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="12">
|
<CCol sm="12">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
hover
|
hover
|
||||||
striped
|
striped
|
||||||
bordered
|
bordered
|
||||||
@@ -139,7 +53,7 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="12">
|
<CCol sm="12">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
hover
|
hover
|
||||||
striped
|
striped
|
||||||
bordered
|
bordered
|
||||||
@@ -150,69 +64,17 @@
|
|||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CTableWrapper from './Table.vue'
|
import CTableWrapper from './Table.vue'
|
||||||
|
import usersData from '../users/UsersData'
|
||||||
const fields = [
|
|
||||||
{ key: 'username', _style:'width:40%' },
|
|
||||||
'registered',
|
|
||||||
{ key: 'role', _style:'width:20%;' },
|
|
||||||
{ key: 'status', _style:'width:20%;' },
|
|
||||||
{ key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
|
|
||||||
]
|
|
||||||
const items = [
|
|
||||||
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
|
||||||
{number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
|
||||||
{number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
|
||||||
{number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
|
||||||
{number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
|
||||||
{number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
|
||||||
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'c-table-success'},
|
|
||||||
{number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
|
||||||
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
|
||||||
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
|
||||||
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'c-table-info'},
|
|
||||||
{number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
|
||||||
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
|
||||||
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
|
||||||
{number:1.3, username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
|
||||||
{number:1.3, username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
|
||||||
{number:1.3, username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
|
||||||
{number:1.3, username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
|
||||||
{number:2.3, username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
|
||||||
{number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
|
||||||
{number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
|
||||||
{number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
|
||||||
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'c-table-danger'},
|
|
||||||
{number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
|
||||||
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'tables',
|
name: 'Tables',
|
||||||
components: { CTableWrapper },
|
components: { CTableWrapper },
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
items: items,
|
|
||||||
fields: fields,
|
|
||||||
page: 1,
|
|
||||||
pages: null,
|
|
||||||
details: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
getBadge (status) {
|
|
||||||
return status === 'Active' ? 'success'
|
|
||||||
: status === 'Inactive' ? 'secondary'
|
|
||||||
: status === 'Pending' ? 'warning'
|
|
||||||
: status === 'Banned' ? 'danger' : 'primary'
|
|
||||||
},
|
|
||||||
shuffleArray (array) {
|
shuffleArray (array) {
|
||||||
for (let i = array.length - 1; i > 0; i--) {
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
let j = Math.floor(Math.random() * (i + 1))
|
let j = Math.floor(Math.random() * (i + 1))
|
||||||
@@ -222,12 +84,9 @@ export default {
|
|||||||
}
|
}
|
||||||
return array
|
return array
|
||||||
},
|
},
|
||||||
toggleDetails (index) {
|
|
||||||
const position = this.details.indexOf(index)
|
getShuffledUsersData () {
|
||||||
position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
|
return this.shuffleArray(usersData.slice(0))
|
||||||
},
|
|
||||||
getItems () {
|
|
||||||
return this.shuffleArray(this.items.slice(0))
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+15
-5
@@ -5,6 +5,16 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Tabs
|
Tabs
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Tabs"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CTabs>
|
<CTabs>
|
||||||
@@ -106,13 +116,13 @@
|
|||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<!-- <CCol xs="12" lg="6">
|
<CCol xs="12" lg="6">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Tabs with icons
|
Tabs with icons
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CTabs add-tab-classes="c-mt-1">
|
<CTabs add-tab-classes="mt-1">
|
||||||
<CTab active>
|
<CTab active>
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<i class="cui-calculator"></i> {{tabs[0]}}
|
<i class="cui-calculator"></i> {{tabs[0]}}
|
||||||
@@ -146,14 +156,14 @@
|
|||||||
</CTabs>
|
</CTabs>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol> -->
|
</CCol>
|
||||||
<CCol xs="12" lg="6">
|
<CCol xs="12" lg="6">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Tabs vertical
|
Tabs vertical
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CTabs pills vertical add-tabs-wrapper-classes="c-pl-3">
|
<CTabs pills vertical>
|
||||||
<CTab active>
|
<CTab active>
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<i class="cui-calculator"></i> {{tabs[0]}}
|
<i class="cui-calculator"></i> {{tabs[0]}}
|
||||||
@@ -194,7 +204,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'tabs',
|
name: 'Tabs',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
tabs: [
|
tabs: [
|
||||||
|
|||||||
+25
-25
@@ -1,42 +1,43 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
<div>
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap Tooltips </strong>
|
<strong> Bootstrap Tooltips </strong>
|
||||||
<small><code>v-c-tooltip</code> directive</small>
|
<small><code>v-c-tooltip</code> directive</small>
|
||||||
<!-- <div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
<small class="c-text-muted">docs</small>
|
href="https://coreui.io/vue/docs/3.0/components/Tooltip"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="4">
|
<CCol col="6">
|
||||||
<div class="c-text-center c-my-3">
|
<div class="text-center my-3">
|
||||||
<CButton v-c-tooltip.hover.click="'I am a tooltip!'">
|
<CButton
|
||||||
|
color="secondary"
|
||||||
|
v-c-tooltip.hover.click="'I am a tooltip!'"
|
||||||
|
>
|
||||||
Hover Me
|
Hover Me
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="4">
|
<CCol col="6">
|
||||||
<div class="c-text-center c-my-3">
|
<div class="text-center my-3">
|
||||||
<CButton v-c-tooltip="{content: 'I start open!', active:true }">
|
<CButton
|
||||||
|
v-c-tooltip="{content: 'I start open!', active:true }"
|
||||||
|
color="secondary"
|
||||||
|
>
|
||||||
Hover me
|
Hover me
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="4">
|
|
||||||
<div class="c-text-center c-my-3">
|
|
||||||
<CButton v-c-tooltip.click="
|
|
||||||
'I am showing on click and hiding on click outside tooltip!'
|
|
||||||
">
|
|
||||||
Click me
|
|
||||||
</CButton>
|
|
||||||
</div>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -47,16 +48,16 @@
|
|||||||
<small>placement</small>
|
<small>placement</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div class="c-my-3">
|
<div class="my-3">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol
|
<CCol
|
||||||
md="4"
|
md="4"
|
||||||
class="c-py-4 c-text-center"
|
class="py-4 text-center"
|
||||||
v-for="placement in placements"
|
v-for="placement in placements"
|
||||||
:key="placement"
|
:key="placement"
|
||||||
>
|
>
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
v-c-tooltip.hover="{
|
v-c-tooltip.hover="{
|
||||||
content: `Placement ${placement}`,
|
content: `Placement ${placement}`,
|
||||||
placement
|
placement
|
||||||
@@ -70,12 +71,11 @@
|
|||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'tooltips',
|
name: 'Tooltips',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
placements: [
|
placements: [
|
||||||
|
|||||||
@@ -1,16 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12">
|
<CCol col="12">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<strong>Brand Button</strong>
|
<strong>Brand Button</strong>
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<small>Usage </small>
|
<small>Usage </small>
|
||||||
<code>
|
<code>{{ $options.usage }}</code>
|
||||||
<CButton variant="facebook"><span>Facebook</span></CButton>
|
|
||||||
</code>
|
|
||||||
<hr/>
|
<hr/>
|
||||||
<h6>
|
<h6>
|
||||||
Size Small
|
Size Small
|
||||||
@@ -22,9 +29,9 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="sm"
|
size="sm"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon size="sm" :name="brandName"/>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
</CButton>
|
</CButton>
|
||||||
</template>
|
</template>
|
||||||
@@ -35,7 +42,7 @@
|
|||||||
<CButton
|
<CButton
|
||||||
:name="brandName"
|
:name="brandName"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon :name="brandName"/>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
@@ -49,9 +56,9 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="lg"
|
size="lg"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon size="lg" :name="brandName"/>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
</CButton>
|
</CButton>
|
||||||
</template>
|
</template>
|
||||||
@@ -66,9 +73,7 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<small>Usage </small>
|
<small>Usage </small>
|
||||||
<code>
|
<code>{{ $options.iconsOnlyUsage }}</code>
|
||||||
{{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
|
|
||||||
</code>
|
|
||||||
<hr/>
|
<hr/>
|
||||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||||
<p>
|
<p>
|
||||||
@@ -77,9 +82,9 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="sm"
|
size="sm"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon size="sm" :name="brandName"/>
|
||||||
</CButton>
|
</CButton>
|
||||||
</template>
|
</template>
|
||||||
</p>
|
</p>
|
||||||
@@ -89,7 +94,7 @@
|
|||||||
<CButton
|
<CButton
|
||||||
:name="brandName"
|
:name="brandName"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon :name="brandName"/>
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -102,9 +107,9 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="lg"
|
size="lg"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon size="lg" :name="brandName"/>
|
||||||
</CButton>
|
</CButton>
|
||||||
</template>
|
</template>
|
||||||
</p>
|
</p>
|
||||||
@@ -118,7 +123,10 @@
|
|||||||
<strong>Brand Button </strong> <small>Text only</small>
|
<strong>Brand Button </strong> <small>Text only</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<small>Usage </small> <code><CButton variant="facebook"><span>Facebook</span></CButton></code>
|
<small>Usage </small>
|
||||||
|
<code>
|
||||||
|
{{ $options.textOnlyUsage }}
|
||||||
|
</code>
|
||||||
<hr/>
|
<hr/>
|
||||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||||
<p>
|
<p>
|
||||||
@@ -127,7 +135,7 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="sm"
|
size="sm"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -139,7 +147,7 @@
|
|||||||
<CButton
|
<CButton
|
||||||
:name="brandName"
|
:name="brandName"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -152,7 +160,7 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="lg"
|
size="lg"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -162,12 +170,14 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'brand-buttons',
|
name: 'BrandButtons',
|
||||||
|
usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
|
||||||
|
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
|
||||||
|
textOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
|
||||||
brands: [
|
brands: [
|
||||||
'facebook',
|
'facebook',
|
||||||
'twitter',
|
'twitter',
|
||||||
@@ -209,12 +219,9 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="css">
|
<style scoped>
|
||||||
.c-btn {
|
.btn {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
.c-btn svg + span {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,35 +1,38 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12">
|
<CCol col="12">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap button group</strong>
|
<strong> Bootstrap button group</strong>
|
||||||
<!-- <div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
<small class="text-muted">docs</small>
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CButtonGroup>
|
<CButtonGroup>
|
||||||
<CButton>One</CButton>
|
<CButton color="secondary">One</CButton>
|
||||||
<CButton>Two</CButton>
|
<CButton color="secondary">Two</CButton>
|
||||||
<CButton>Three</CButton>
|
<CButton color="secondary">Three</CButton>
|
||||||
<CButton>Four</CButton>
|
<CButton color="secondary">Four</CButton>
|
||||||
<CButton class="c-d-sm-down-none">Five</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Five</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<br><br>
|
<br><br>
|
||||||
<CButtonGroup>
|
<CButtonGroup>
|
||||||
<CButton class="c-d-sm-down-none" variant="success">Success</CButton>
|
<CButton class="d-sm-down-none" color="success">Success</CButton>
|
||||||
<CButton variant="info">Info</CButton>
|
<CButton color="info">Info</CButton>
|
||||||
<CButton variant="warning">Warn</CButton>
|
<CButton color="warning">Warn</CButton>
|
||||||
<CButton class="c-d-sm-down-none" variant="primary">Primary</CButton>
|
<CButton class="d-sm-down-none" color="primary">Primary</CButton>
|
||||||
<CButton variant="danger">Danger</CButton>
|
<CButton color="danger">Danger</CButton>
|
||||||
<CButton variant="link">Link</CButton>
|
<CButton color="link">Link</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -44,21 +47,21 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CButtonGroup>
|
<CButtonGroup>
|
||||||
<CButton>Left</CButton>
|
<CButton color="secondary">Left</CButton>
|
||||||
<CButton>Middle</CButton>
|
<CButton color="secondary">Middle</CButton>
|
||||||
<CButton>Right</CButton>
|
<CButton color="secondary">Right</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<br><br>
|
<br><br>
|
||||||
<CButtonGroup size="sm">
|
<CButtonGroup size="sm">
|
||||||
<CButton>Left</CButton>
|
<CButton color="secondary">Left</CButton>
|
||||||
<CButton>Middle</CButton>
|
<CButton color="secondary">Middle</CButton>
|
||||||
<CButton>Right</CButton>
|
<CButton color="secondary">Right</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<br><br>
|
<br><br>
|
||||||
<CButtonGroup size="lg">
|
<CButtonGroup size="lg">
|
||||||
<CButton>Left</CButton>
|
<CButton color="secondary">Left</CButton>
|
||||||
<CButton>Middle</CButton>
|
<CButton color="secondary">Middle</CButton>
|
||||||
<CButton>Right</CButton>
|
<CButton color="secondary">Right</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -72,16 +75,16 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CButtonGroup>
|
<CButtonGroup>
|
||||||
<CButton class="c-d-sm-down-none">Button 1</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
|
||||||
<CButton class="c-d-sm-down-none">Button 2</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
|
||||||
<CDropdown right text="Menu" variant="success">
|
<CDropdown right text="Menu" color="success">
|
||||||
<CDropdownItem>Item 1</CDropdownItem>
|
<CDropdownItem>Item 1</CDropdownItem>
|
||||||
<CDropdownItem>Item 2</CDropdownItem>
|
<CDropdownItem>Item 2</CDropdownItem>
|
||||||
<CDropdownDivider></CDropdownDivider>
|
<CDropdownDivider></CDropdownDivider>
|
||||||
<CDropdownItem>Item 3</CDropdownItem>
|
<CDropdownItem>Item 3</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CButton class="c-d-sm-down-none">Button 3</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
|
||||||
<CDropdown right split text="Split Menu" variant="info">
|
<CDropdown right split text="Split Menu" color="info">
|
||||||
<CDropdownItem>Item 1</CDropdownItem>
|
<CDropdownItem>Item 1</CDropdownItem>
|
||||||
<CDropdownItem>Item 2</CDropdownItem>
|
<CDropdownItem>Item 2</CDropdownItem>
|
||||||
<CDropdownDivider></CDropdownDivider>
|
<CDropdownDivider></CDropdownDivider>
|
||||||
@@ -101,9 +104,9 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CButtonGroup vertical>
|
<CButtonGroup vertical>
|
||||||
<CButton>Top</CButton>
|
<CButton color="secondary">Top</CButton>
|
||||||
<CButton>Middle</CButton>
|
<CButton color="secondary">Middle</CButton>
|
||||||
<CButton>Bottom</CButton>
|
<CButton color="secondary">Bottom</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -122,64 +125,60 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
|
||||||
<CButtonToolbar aria-label="Toolbar with button groups" >
|
<CButtonToolbar aria-label="Toolbar with button groups" >
|
||||||
<CButtonGroup class="c-mx-1">
|
<CButtonGroup class="mx-1">
|
||||||
<CButton class="c-d-sm-down-none">«</CButton>
|
<CButton color="secondary" class="d-sm-down-none">«</CButton>
|
||||||
<CButton>‹</CButton>
|
<CButton color="secondary">‹</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<CButtonGroup class="c-mx-1">
|
<CButtonGroup class="mx-1">
|
||||||
<CButton class="c-d-sm-down-none">Edit</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Edit</CButton>
|
||||||
<CButton>Undo</CButton>
|
<CButton color="secondary">Undo</CButton>
|
||||||
<CButton>Redo</CButton>
|
<CButton color="secondary">Redo</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<CButtonGroup class="c-mx-1">
|
<CButtonGroup class="mx-1">
|
||||||
<CButton>›</CButton>
|
<CButton color="secondary">›</CButton>
|
||||||
<CButton class="c-d-sm-down-none">»</CButton>
|
<CButton color="secondary" class="d-sm-down-none">»</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</CButtonToolbar>
|
</CButtonToolbar>
|
||||||
</div>
|
<hr class="d-sm-down-none"/>
|
||||||
<hr class="c-d-sm-down-none"/>
|
|
||||||
<div>
|
|
||||||
<CButtonToolbar
|
<CButtonToolbar
|
||||||
aria-label="Toolbar with button groups and input groups"
|
aria-label="Toolbar with button groups and input groups"
|
||||||
class="c-d-sm-down-none"
|
class="d-sm-down-none"
|
||||||
>
|
>
|
||||||
<CButtonGroup size="sm" class="c-mx-1">
|
<CButtonGroup size="sm" class="mx-1">
|
||||||
<CButton>New</CButton>
|
<CButton color="secondary">New</CButton>
|
||||||
<CButton>Edit</CButton>
|
<CButton color="secondary">Edit</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mb-0 c-w-25 c-mx-1"
|
class="mb-0 w-25 mx-1"
|
||||||
size="sm"
|
size="sm"
|
||||||
prepend-html="$"
|
prepend-html="$"
|
||||||
append-html=".00"
|
append-html=".00"
|
||||||
value="100"
|
value="100"
|
||||||
/>
|
/>
|
||||||
<CFormSelect
|
<CSelect
|
||||||
class="c-mb-0 c-w-25 c-mx-1"
|
class="mb-0 w-25 mx-1"
|
||||||
size="sm"
|
size="sm"
|
||||||
prepend-html="Size"
|
prepend-html="Size"
|
||||||
value="Medium"
|
value="Medium"
|
||||||
:options="['Large','Medium','Small']"
|
:options="['Large','Medium','Small']"
|
||||||
custom
|
custom
|
||||||
/>
|
/>
|
||||||
<CButtonGroup size="sm" class="c-mx-1">
|
<CButtonGroup size="sm" class="mx-1">
|
||||||
<CButton>Save</CButton>
|
<CButton color="secondary">Save</CButton>
|
||||||
<CButton>Cancel</CButton>
|
<CButton color="secondary">Cancel</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</CButtonToolbar>
|
</CButtonToolbar>
|
||||||
</div>
|
|
||||||
<hr/>
|
<hr/>
|
||||||
<div>
|
|
||||||
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||||
<CButtonGroup class="c-mx-1 c-d-sm-down-none">
|
<CButtonGroup class="mx-1 d-sm-down-none">
|
||||||
<CButton>New</CButton>
|
<CButton color="secondary">New</CButton>
|
||||||
<CButton>Edit</CButton>
|
<CButton color="secondary">Edit</CButton>
|
||||||
<CButton>Undo</CButton>
|
<CButton color="secondary">Undo</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="c-mx-1"
|
color="secondary"
|
||||||
|
class="mx-1"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
button-content="Menu"
|
button-content="Menu"
|
||||||
>
|
>
|
||||||
@@ -187,29 +186,18 @@
|
|||||||
<CDropdownItem>Item 2</CDropdownItem>
|
<CDropdownItem>Item 2</CDropdownItem>
|
||||||
<CDropdownItem>Item 3</CDropdownItem>
|
<CDropdownItem>Item 3</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CButtonGroup class="c-mx-1">
|
<CButtonGroup class="mx-1">
|
||||||
<CButton>Save</CButton>
|
<CButton color="secondary">Save</CButton>
|
||||||
<CButton>Cancel</CButton>
|
<CButton color="secondary">Cancel</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</CButtonToolbar>
|
</CButtonToolbar>
|
||||||
</div>
|
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'button-groups',
|
name: 'ButtonGroups',
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
myToggle: false,
|
|
||||||
myToggle2: false,
|
|
||||||
itemsCount: 33
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
<div>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12" md="6">
|
<CCol col="12" md="6">
|
||||||
@@ -7,15 +6,24 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap Dropdown</strong>
|
<strong> Bootstrap Dropdown</strong>
|
||||||
<!-- <div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Dropdown"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
<small class="text-muted">docs</small>
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown button-html="Dropdown Button" class="c-m-2">
|
<CDropdown
|
||||||
|
toggler-text="Dropdown Button"
|
||||||
|
class="m-2"
|
||||||
|
color="secondary"
|
||||||
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
@@ -25,7 +33,7 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div>
|
<!-- <div>
|
||||||
<CDropdown button-html="Dropdown using buttons as menu items" class="c-m-2">
|
<CDropdown toggler-text="Dropdown using buttons as menu items" class="m-2">
|
||||||
<CDropdownItem>I'm a button</CDropdownItem>
|
<CDropdownItem>I'm a button</CDropdownItem>
|
||||||
<CDropdownItem>I'm also a button</CDropdownItem>
|
<CDropdownItem>I'm also a button</CDropdownItem>
|
||||||
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
|
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
|
||||||
@@ -33,7 +41,11 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div>
|
<div>
|
||||||
<CDropdown button-html="Dropdown with divider" class="c-m-2">
|
<CDropdown
|
||||||
|
toggler-text="Dropdown with divider"
|
||||||
|
class="m-2"
|
||||||
|
color="secondary"
|
||||||
|
>
|
||||||
<CDropdownItem>First item</CDropdownItem>
|
<CDropdownItem>First item</CDropdownItem>
|
||||||
<CDropdownItem>Second item</CDropdownItem>
|
<CDropdownItem>Second item</CDropdownItem>
|
||||||
<CDropdownDivider></CDropdownDivider>
|
<CDropdownDivider></CDropdownDivider>
|
||||||
@@ -41,7 +53,11 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown button-html="Dropdown with header" class="c-m-2">
|
<CDropdown
|
||||||
|
toggler-text="Dropdown with header"
|
||||||
|
class="m-2"
|
||||||
|
color="secondary"
|
||||||
|
>
|
||||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||||
<CDropdownItem>First item</CDropdownItem>
|
<CDropdownItem>First item</CDropdownItem>
|
||||||
<CDropdownItem>Second Item</CDropdownItem>
|
<CDropdownItem>Second Item</CDropdownItem>
|
||||||
@@ -60,9 +76,9 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Left align"
|
toggler-text="Left align"
|
||||||
variant="primary"
|
color="primary"
|
||||||
class="c-m-2"
|
class="m-2 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
@@ -70,9 +86,9 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
button-html="Right align"
|
toggler-text="Right align"
|
||||||
variant="primary"
|
color="primary"
|
||||||
class="c-m-2"
|
class="m-2 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
@@ -81,10 +97,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Drop-Up"
|
toggler-text="Drop-Up"
|
||||||
variant="info"
|
color="info"
|
||||||
class="c-m-2"
|
class="m-2"
|
||||||
dropup
|
placement="top-start"
|
||||||
|
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
@@ -93,9 +110,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
:offset="25"
|
:offset="25"
|
||||||
button-html="Offset Dropdown"
|
toggler-text="Offset Dropdown"
|
||||||
class="c-m-2"
|
class="m-2"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
@@ -104,9 +122,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
split
|
split
|
||||||
button-html="Split Dropdown"
|
toggler-text="Split Dropdown"
|
||||||
class="c-m-2"
|
class="m-2"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
@@ -128,11 +147,13 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
variant="link"
|
color="link"
|
||||||
size="lg"
|
size="lg"
|
||||||
buttonHtml="🔍<span class='sr-only'>Search</span>"
|
:caret="false"
|
||||||
no-caret
|
|
||||||
>
|
>
|
||||||
|
<template #toggler-content>
|
||||||
|
🔍<span class="sr-only">Search</span>
|
||||||
|
</template>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
@@ -151,19 +172,21 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
size="lg"
|
size="lg"
|
||||||
button-html="Large"
|
toggler-text="Large"
|
||||||
class="c-m-2"
|
class="m-2 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here</CDropdownItem>
|
<CDropdownItem>Something else here</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
size="lg"
|
size="lg"
|
||||||
split
|
split
|
||||||
button-html="Large Split"
|
toggler-text="Large Split"
|
||||||
class="c-m-2"
|
class="m-2"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
@@ -171,18 +194,20 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<br>
|
<br>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Small"
|
toggler-text="Small"
|
||||||
class="c-m-2"
|
class="m-2 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
size="sm"
|
size="sm"
|
||||||
split button-html="Small Split"
|
split toggler-text="Small Split"
|
||||||
class="c-m-2"
|
class="m-2"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
@@ -194,7 +219,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<!-- <CCol col="12" md="6">
|
<CCol col="12" md="6">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
@@ -204,8 +229,8 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Dropdown ARIA" variant="primary"
|
toggler-text="Dropdown ARIA" color="primary"
|
||||||
class="c-m-2"
|
class="m-2"
|
||||||
>
|
>
|
||||||
<div role="group">
|
<div role="group">
|
||||||
<CDropdownHeader>Groups</CDropdownHeader>
|
<CDropdownHeader>Groups</CDropdownHeader>
|
||||||
@@ -225,20 +250,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol> -->
|
</CCol>
|
||||||
<CCol col="12" md="6">
|
<CCol col="12" md="6">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Dropdown </strong>
|
<strong> Dropdown </strong>
|
||||||
<small><code>variant</code></small>
|
<small><code>color</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Primary"
|
toggler-text="Primary"
|
||||||
variant="primary"
|
color="primary"
|
||||||
class="c-m-0"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
@@ -246,9 +271,9 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Secondary"
|
toggler-text="Secondary"
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
class="c-m-0"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
@@ -256,9 +281,9 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Success"
|
toggler-text="Success"
|
||||||
variant="success"
|
color="success"
|
||||||
class="c-m-0"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
@@ -266,9 +291,9 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Warning"
|
toggler-text="Warning"
|
||||||
variant="warning"
|
color="warning"
|
||||||
class="c-m-0"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
@@ -276,9 +301,9 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Danger"
|
toggler-text="Danger"
|
||||||
variant="danger"
|
color="danger"
|
||||||
class="c-m-0"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
@@ -286,9 +311,9 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Info"
|
toggler-text="Info"
|
||||||
variant="info"
|
color="info"
|
||||||
class="c-m-0"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
@@ -296,9 +321,9 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Light"
|
toggler-text="Light"
|
||||||
variant="light"
|
color="light"
|
||||||
class="c-m-0"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
@@ -306,9 +331,9 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Dark"
|
toggler-text="Dark"
|
||||||
variant="dark"
|
color="dark"
|
||||||
class="c-m-0"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
@@ -316,9 +341,9 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Link"
|
toggler-text="Link"
|
||||||
variant="link"
|
color="link"
|
||||||
class="c-m-0"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
@@ -329,7 +354,6 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -6,7 +6,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartBar } from '@coreui/coreui-vue-chartjs'
|
import { CChartBar } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartBarExample',
|
name: 'CChartBarExample',
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartBar } from '@coreui/coreui-vue-chartjs'
|
import { CChartBar } from '@coreui/coreui-chartjs/vue'
|
||||||
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
|
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartBarSimple',
|
name: 'CChartBarSimple',
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartDoughnut } from '@coreui/coreui-vue-chartjs'
|
import { CChartDoughnut } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartDoughnutExample',
|
name: 'CChartDoughnutExample',
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartLine } from '@coreui/coreui-vue-chartjs'
|
import { CChartLine } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartLineExample',
|
name: 'CChartLineExample',
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartLine } from '@coreui/coreui-vue-chartjs'
|
import { CChartLine } from '@coreui/coreui-chartjs/vue'
|
||||||
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
|
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartLineSimple',
|
name: 'CChartLineSimple',
|
||||||
@@ -30,9 +30,18 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'Sales'
|
default: 'Sales'
|
||||||
},
|
},
|
||||||
pointed: Boolean
|
pointed: Boolean,
|
||||||
|
pointHoverBackgroundColor: String
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
pointHoverColor () {
|
||||||
|
if (this.pointHoverBackgroundColor) {
|
||||||
|
return this.pointHoverBackgroundColor
|
||||||
|
} else if (this.backgroundColor !== 'transparent') {
|
||||||
|
return this.backgroundColor
|
||||||
|
}
|
||||||
|
return this.borderColor
|
||||||
|
},
|
||||||
defaultDatasets () {
|
defaultDatasets () {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@@ -40,7 +49,7 @@ export default {
|
|||||||
borderColor: getColor(this.borderColor),
|
borderColor: getColor(this.borderColor),
|
||||||
backgroundColor: getColor(this.backgroundColor),
|
backgroundColor: getColor(this.backgroundColor),
|
||||||
pointBackgroundColor: this.pointBackgroundColor,
|
pointBackgroundColor: this.pointBackgroundColor,
|
||||||
pointHoverBackgroundColor: getColor(this.borderColor),
|
pointHoverBackgroundColor: getColor(this.pointHoverColor),
|
||||||
label: this.label
|
label: this.label
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartPie } from '@coreui/coreui-vue-chartjs'
|
import { CChartPie } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartPieExample',
|
name: 'CChartPieExample',
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartPolarArea } from '@coreui/coreui-vue-chartjs'
|
import { CChartPolarArea } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartPolarAreaExample',
|
name: 'CChartPolarAreaExample',
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartRadar } from '@coreui/coreui-vue-chartjs'
|
import { CChartRadar } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartRadarExample',
|
name: 'CChartRadarExample',
|
||||||
|
|||||||
@@ -1,8 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<CCardGroup columns class="c-card-columns c-cols-2">
|
<CCardGroup columns class="card-columns cols-2">
|
||||||
<CCard header-html="Line Chart" body-wrapper>
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
Line Chart
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Charts"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
<CChartLineExample/>
|
<CChartLineExample/>
|
||||||
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header-html="Bar Chart" body-wrapper>
|
<CCard header-html="Bar Chart" body-wrapper>
|
||||||
<CChartBarExample/>
|
<CChartBarExample/>
|
||||||
@@ -32,7 +47,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as Charts from './charts/index.js'
|
import * as Charts from './index.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Charts',
|
name: 'Charts',
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartLine } from '@coreui/coreui-vue-chartjs'
|
import { CChartLine } from '@coreui/coreui-chartjs/vue'
|
||||||
import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
|
import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||||
|
|
||||||
function random (min, max) {
|
function random (min, max) {
|
||||||
@@ -15,6 +15,7 @@ function random (min, max) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: 'MainChartExample',
|
||||||
components: {
|
components: {
|
||||||
CChartLine
|
CChartLine
|
||||||
},
|
},
|
||||||
@@ -39,7 +40,7 @@ export default {
|
|||||||
label: 'My First dataset',
|
label: 'My First dataset',
|
||||||
backgroundColor: hexToRgba(brandInfo, 10),
|
backgroundColor: hexToRgba(brandInfo, 10),
|
||||||
borderColor: brandInfo,
|
borderColor: brandInfo,
|
||||||
pointHoverBackgroundColor: '#fff',
|
pointHoverBackgroundColor: brandInfo,
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
data: data1
|
data: data1
|
||||||
},
|
},
|
||||||
@@ -47,7 +48,7 @@ export default {
|
|||||||
label: 'My Second dataset',
|
label: 'My Second dataset',
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
borderColor: brandSuccess,
|
borderColor: brandSuccess,
|
||||||
pointHoverBackgroundColor: '#fff',
|
pointHoverBackgroundColor: brandSuccess,
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
data: data2
|
data: data2
|
||||||
},
|
},
|
||||||
@@ -55,7 +56,7 @@ export default {
|
|||||||
label: 'My Third dataset',
|
label: 'My Third dataset',
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
borderColor: brandDanger,
|
borderColor: brandDanger,
|
||||||
pointHoverBackgroundColor: '#fff',
|
pointHoverBackgroundColor: brandDanger,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderDash: [8, 5],
|
borderDash: [8, 5],
|
||||||
data: data3
|
data: data3
|
||||||
@@ -97,94 +98,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
// mounted () {
|
|
||||||
// const brandSuccess = getStyle('--success') || '#4dbd74'
|
|
||||||
// const brandInfo = getStyle('--info') || '#20a8d8'
|
|
||||||
// const brandDanger = getStyle('--danger') || '#f86c6b'
|
|
||||||
//
|
|
||||||
// let elements = 27
|
|
||||||
// const data1 = []
|
|
||||||
// const data2 = []
|
|
||||||
// const data3 = []
|
|
||||||
//
|
|
||||||
// for (let i = 0; i <= elements; i++) {
|
|
||||||
// data1.push(random(50, 200))
|
|
||||||
// data2.push(random(80, 100))
|
|
||||||
// data3.push(65)
|
|
||||||
// }
|
|
||||||
// this.renderChart({
|
|
||||||
// datasets: [
|
|
||||||
// {
|
|
||||||
// label: 'My First dataset',
|
|
||||||
// backgroundColor: hexToRgba(brandInfo, 10),
|
|
||||||
// borderColor: brandInfo,
|
|
||||||
// pointHoverBackgroundColor: '#fff',
|
|
||||||
// borderWidth: 2,
|
|
||||||
// data: data1
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: 'My Second dataset',
|
|
||||||
// backgroundColor: 'transparent',
|
|
||||||
// borderColor: brandSuccess,
|
|
||||||
// pointHoverBackgroundColor: '#fff',
|
|
||||||
// borderWidth: 2,
|
|
||||||
// data: data2
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: 'My Third dataset',
|
|
||||||
// backgroundColor: 'transparent',
|
|
||||||
// borderColor: brandDanger,
|
|
||||||
// pointHoverBackgroundColor: '#fff',
|
|
||||||
// borderWidth: 1,
|
|
||||||
// borderDash: [8, 5],
|
|
||||||
// data: data3
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }, {
|
|
||||||
// tooltips: {
|
|
||||||
// enabled: false,
|
|
||||||
// custom: CustomTooltips,
|
|
||||||
// intersect: true,
|
|
||||||
// mode: 'index',
|
|
||||||
// position: 'nearest',
|
|
||||||
// callbacks: {
|
|
||||||
// labelColor: function (tooltipItem, chart) {
|
|
||||||
// return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// maintainAspectRatio: false,
|
|
||||||
// legend: {
|
|
||||||
// display: false
|
|
||||||
// },
|
|
||||||
// scales: {
|
|
||||||
// xAxes: [{
|
|
||||||
// gridLines: {
|
|
||||||
// drawOnChartArea: false
|
|
||||||
// }
|
|
||||||
// }],
|
|
||||||
// yAxes: [{
|
|
||||||
// ticks: {
|
|
||||||
// beginAtZero: true,
|
|
||||||
// maxTicksLimit: 5,
|
|
||||||
// stepSize: Math.ceil(250 / 5),
|
|
||||||
// max: 250
|
|
||||||
// },
|
|
||||||
// gridLines: {
|
|
||||||
// display: true
|
|
||||||
// }
|
|
||||||
// }]
|
|
||||||
// },
|
|
||||||
// elements: {
|
|
||||||
// point: {
|
|
||||||
// radius: 0,
|
|
||||||
// hitRadius: 10,
|
|
||||||
// hoverRadius: 4,
|
|
||||||
// hoverBorderWidth: 3
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -5,17 +5,10 @@
|
|||||||
<i class="cui-globe"></i>Font Awesome brand icons
|
<i class="cui-globe"></i>Font Awesome brand icons
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow class="c-text-center">
|
<CRow class="text-center">
|
||||||
<CCol class="c-mb-5" col="12">
|
|
||||||
<!-- For using the flags inline with text add the classes
|
|
||||||
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
|
||||||
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
|
||||||
span. If you want to have a squared version flag then add the class
|
|
||||||
flag-icon-squared as well. -->
|
|
||||||
</CCol>
|
|
||||||
<template v-for="(brand, brandName) in $options.brands">
|
<template v-for="(brand, brandName) in $options.brands">
|
||||||
<CCol
|
<CCol
|
||||||
class="c-mb-5"
|
class="mb-5"
|
||||||
col="3"
|
col="3"
|
||||||
sm="2"
|
sm="2"
|
||||||
:key="brandName"
|
:key="brandName"
|
||||||
|
|||||||
+107
-107
@@ -3,427 +3,427 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="cui-pencil"></i>CoreUI Icons
|
<i class="cui-pencil"></i>CoreUI Icons
|
||||||
<CBadge variant="info">New</CBadge>
|
<CBadge color="info">New</CBadge>
|
||||||
<div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a
|
<a
|
||||||
href="https://github.com/coreui/coreui-icons"
|
href="https://github.com/coreui/coreui-icons"
|
||||||
rel="noreferrer noopener"
|
rel="noreferrer noopener"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="c-card-header-action"
|
class="card-header-action"
|
||||||
>
|
>
|
||||||
<small class="c-text-muted">Github</small>
|
<small class="text-muted">Github</small>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<!-- <CRow class="c-text-center c-mb-5">
|
<!-- <CRow class="text-center mb-5">
|
||||||
<template v-for="(name, key) in $options.iconNames">
|
<template v-for="(name, key) in $options.iconNames">
|
||||||
<CCol :key="key" col="6" sm="4" md="3" xl="2">
|
<CCol :key="key" col="6" sm="4" md="3" xl="2">
|
||||||
<CIcon :name="name" width="24" class="c-mt-4"/>
|
<CIcon :name="name" width="24" class="mt-4"/>
|
||||||
<div>{{name}}</div>
|
<div>{{name}}</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
</template>
|
</template>
|
||||||
</CRow>
|
</CRow>
|
||||||
-->
|
-->
|
||||||
<CRow class="c-text-center ">
|
<CRow class="text-center ">
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-account-logout c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-account-logout icons font-2xl d-block mt-4"></i>
|
||||||
<div>account-logout</div>
|
<div>account-logout</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-action-redo c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-action-redo icons font-2xl d-block mt-4"></i>
|
||||||
<div>action-redo</div>
|
<div>action-redo</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-action-undo c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-action-undo icons font-2xl d-block mt-4"></i>
|
||||||
<div>action-undo</div>
|
<div>action-undo</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-align-center c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-align-center icons font-2xl d-block mt-4"></i>
|
||||||
<div>align-center</div>
|
<div>align-center</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-align-left c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-align-left icons font-2xl d-block mt-4"></i>
|
||||||
<div>align-left</div>
|
<div>align-left</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-align-right c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-align-right icons font-2xl d-block mt-4"></i>
|
||||||
<div>align-right</div>
|
<div>align-right</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-arrow-bottom c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
|
||||||
<div>arrow-bottom</div>
|
<div>arrow-bottom</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-arrow-left c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
|
||||||
<div>arrow-left</div>
|
<div>arrow-left</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-arrow-right c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
|
||||||
<div>arrow-right</div>
|
<div>arrow-right</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-arrow-top c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
|
||||||
<div>arrow-top</div>
|
<div>arrow-top</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-ban c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-ban icons font-2xl d-block mt-4"></i>
|
||||||
<div>ban</div>
|
<div>ban</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-basket-loaded c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
|
||||||
<div>basket-loaded</div>
|
<div>basket-loaded</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-bell c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-bell icons font-2xl d-block mt-4"></i>
|
||||||
<div>bell</div>
|
<div>bell</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-bold c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-bold icons font-2xl d-block mt-4"></i>
|
||||||
<div>bold</div>
|
<div>bold</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-bookmark c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-bookmark icons font-2xl d-block mt-4"></i>
|
||||||
<div>bookmark</div>
|
<div>bookmark</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-briefcase c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-briefcase icons font-2xl d-block mt-4"></i>
|
||||||
<div>briefcase</div>
|
<div>briefcase</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-british-pound c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-british-pound icons font-2xl d-block mt-4"></i>
|
||||||
<div>british-pound</div>
|
<div>british-pound</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-brush c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-brush icons font-2xl d-block mt-4"></i>
|
||||||
<div>brush</div>
|
<div>brush</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-calculator c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-calculator icons font-2xl d-block mt-4"></i>
|
||||||
<div>calculator</div>
|
<div>calculator</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-calendar c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-calendar icons font-2xl d-block mt-4"></i>
|
||||||
<div>calendar</div>
|
<div>calendar</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cart c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cart icons font-2xl d-block mt-4"></i>
|
||||||
<div>cart</div>
|
<div>cart</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-chart c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-chart icons font-2xl d-block mt-4"></i>
|
||||||
<div>chart</div>
|
<div>chart</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-check c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-check icons font-2xl d-block mt-4"></i>
|
||||||
<div>check</div>
|
<div>check</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-chevron-bottom c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
|
||||||
<div>chevron-bottom</div>
|
<div>chevron-bottom</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-chevron-left c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
|
||||||
<div>chevron-left</div>
|
<div>chevron-left</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-chevron-right c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
|
||||||
<div>chevron-right</div>
|
<div>chevron-right</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-chevron-top c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
|
||||||
<div>chevron-top</div>
|
<div>chevron-top</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-circle-check c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-circle-check icons font-2xl d-block mt-4"></i>
|
||||||
<div>circle-check</div>
|
<div>circle-check</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-circle-x c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-circle-x icons font-2xl d-block mt-4"></i>
|
||||||
<div>circle-x</div>
|
<div>circle-x</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cloud c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cloud icons font-2xl d-block mt-4"></i>
|
||||||
<div>cloud</div>
|
<div>cloud</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cloud-download c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
|
||||||
<div>cloud-download</div>
|
<div>cloud-download</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cloud-upload c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
|
||||||
<div>cloud-upload</div>
|
<div>cloud-upload</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-code c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-code icons font-2xl d-block mt-4"></i>
|
||||||
<div>code</div>
|
<div>code</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cog c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cog icons font-2xl d-block mt-4"></i>
|
||||||
<div>cog</div>
|
<div>cog</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-comment-square c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-comment-square icons font-2xl d-block mt-4"></i>
|
||||||
<div>comment-square</div>
|
<div>comment-square</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-credit-card c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-credit-card icons font-2xl d-block mt-4"></i>
|
||||||
<div>credit-card</div>
|
<div>credit-card</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cursor c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cursor icons font-2xl d-block mt-4"></i>
|
||||||
<div>cursor</div>
|
<div>cursor</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-dashboard c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-dashboard icons font-2xl d-block mt-4"></i>
|
||||||
<div>dashboard</div>
|
<div>dashboard</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-delete c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-delete icons font-2xl d-block mt-4"></i>
|
||||||
<div>delete</div>
|
<div>delete</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-dollar c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-dollar icons font-2xl d-block mt-4"></i>
|
||||||
<div>dollar</div>
|
<div>dollar</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-drop c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-drop icons font-2xl d-block mt-4"></i>
|
||||||
<div>drop</div>
|
<div>drop</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-envelope-closed c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
|
||||||
<div>envelope-closed</div>
|
<div>envelope-closed</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-envelope-letter c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
|
||||||
<div>envelope-letter</div>
|
<div>envelope-letter</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-envelope-open c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
|
||||||
<div>envelope-open</div>
|
<div>envelope-open</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-euro c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-euro icons font-2xl d-block mt-4"></i>
|
||||||
<div>euro</div>
|
<div>euro</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-file c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-file icons font-2xl d-block mt-4"></i>
|
||||||
<div>file</div>
|
<div>file</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-globe c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-globe icons font-2xl d-block mt-4"></i>
|
||||||
<div>globe</div>
|
<div>globe</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-graph c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-graph icons font-2xl d-block mt-4"></i>
|
||||||
<div>graph</div>
|
<div>graph</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-home c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-home icons font-2xl d-block mt-4"></i>
|
||||||
<div>home</div>
|
<div>home</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-inbox c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-inbox icons font-2xl d-block mt-4"></i>
|
||||||
<div>inbox</div>
|
<div>inbox</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-info c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-info icons font-2xl d-block mt-4"></i>
|
||||||
<div>info</div>
|
<div>info</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-italic c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-italic icons font-2xl d-block mt-4"></i>
|
||||||
<div>italic</div>
|
<div>italic</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-justify-center c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-justify-center icons font-2xl d-block mt-4"></i>
|
||||||
<div>justify-center</div>
|
<div>justify-center</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-justify-left c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-justify-left icons font-2xl d-block mt-4"></i>
|
||||||
<div>justify-left</div>
|
<div>justify-left</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-justify-right c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-justify-right icons font-2xl d-block mt-4"></i>
|
||||||
<div>justify-right</div>
|
<div>justify-right</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-laptop c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-laptop icons font-2xl d-block mt-4"></i>
|
||||||
<div>laptop</div>
|
<div>laptop</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-layers c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-layers icons font-2xl d-block mt-4"></i>
|
||||||
<div>layers</div>
|
<div>layers</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-lightbulb c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
|
||||||
<div>lightbulb</div>
|
<div>lightbulb</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-list c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-list icons font-2xl d-block mt-4"></i>
|
||||||
<div>list</div>
|
<div>list</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-location-pin c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-location-pin icons font-2xl d-block mt-4"></i>
|
||||||
<div>location-pin</div>
|
<div>location-pin</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-lock-locked c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
|
||||||
<div>lock-locked</div>
|
<div>lock-locked</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-lock-unlocked c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
|
||||||
<div>lock-unlocked</div>
|
<div>lock-unlocked</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-magnifying-glass c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
|
||||||
<div>magnifying-glass</div>
|
<div>magnifying-glass</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-map c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-map icons font-2xl d-block mt-4"></i>
|
||||||
<div>map</div>
|
<div>map</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-monitor c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-monitor icons font-2xl d-block mt-4"></i>
|
||||||
<div>monitor</div>
|
<div>monitor</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-moon c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-moon icons font-2xl d-block mt-4"></i>
|
||||||
<div>moon</div>
|
<div>moon</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-note c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-note icons font-2xl d-block mt-4"></i>
|
||||||
<div>note</div>
|
<div>note</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-options c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-options icons font-2xl d-block mt-4"></i>
|
||||||
<div>options</div>
|
<div>options</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-paperclip c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-paperclip icons font-2xl d-block mt-4"></i>
|
||||||
<div>paperclip</div>
|
<div>paperclip</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-pencil c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-pencil icons font-2xl d-block mt-4"></i>
|
||||||
<div>pencil</div>
|
<div>pencil</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-people c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-people icons font-2xl d-block mt-4"></i>
|
||||||
<div>people</div>
|
<div>people</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-phone c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-phone icons font-2xl d-block mt-4"></i>
|
||||||
<div>phone</div>
|
<div>phone</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-pie-chart c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
|
||||||
<div>pie-chart</div>
|
<div>pie-chart</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-print c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-print icons font-2xl d-block mt-4"></i>
|
||||||
<div>print</div>
|
<div>print</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-puzzle c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-puzzle icons font-2xl d-block mt-4"></i>
|
||||||
<div>puzzle</div>
|
<div>puzzle</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-rss c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-rss icons font-2xl d-block mt-4"></i>
|
||||||
<div>rss</div>
|
<div>rss</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-screen-desktop c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
|
||||||
<div>screen-desktop</div>
|
<div>screen-desktop</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-screen-smartphone c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
|
||||||
<div>screen-smartphone</div>
|
<div>screen-smartphone</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-settings c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-settings icons font-2xl d-block mt-4"></i>
|
||||||
<div>settings</div>
|
<div>settings</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-share c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-share icons font-2xl d-block mt-4"></i>
|
||||||
<div>share</div>
|
<div>share</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-shield c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-shield icons font-2xl d-block mt-4"></i>
|
||||||
<div>shield</div>
|
<div>shield</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-sort-ascending c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
|
||||||
<div>sort-ascending</div>
|
<div>sort-ascending</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-sort-descending c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
|
||||||
<div>sort-descending</div>
|
<div>sort-descending</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-speech c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-speech icons font-2xl d-block mt-4"></i>
|
||||||
<div>speech</div>
|
<div>speech</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-speedometer c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-speedometer icons font-2xl d-block mt-4"></i>
|
||||||
<div>speedometer</div>
|
<div>speedometer</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-star c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-star icons font-2xl d-block mt-4"></i>
|
||||||
<div>star</div>
|
<div>star</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-sun c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-sun icons font-2xl d-block mt-4"></i>
|
||||||
<div>sun</div>
|
<div>sun</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-tablet c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-tablet icons font-2xl d-block mt-4"></i>
|
||||||
<div>tablet</div>
|
<div>tablet</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-tags c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-tags icons font-2xl d-block mt-4"></i>
|
||||||
<div>tags</div>
|
<div>tags</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-task c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-task icons font-2xl d-block mt-4"></i>
|
||||||
<div>task</div>
|
<div>task</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-thumb-down c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
|
||||||
<div>thumb-down</div>
|
<div>thumb-down</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-thumb-up c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
|
||||||
<div>thumb-up</div>
|
<div>thumb-up</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-trash c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-trash icons font-2xl d-block mt-4"></i>
|
||||||
<div>trash</div>
|
<div>trash</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-underline c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-underline icons font-2xl d-block mt-4"></i>
|
||||||
<div>underline</div>
|
<div>underline</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-user c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-user icons font-2xl d-block mt-4"></i>
|
||||||
<div>user</div>
|
<div>user</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-user-female c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-user-female icons font-2xl d-block mt-4"></i>
|
||||||
<div>user-female</div>
|
<div>user-female</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-user-follow c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-user-follow icons font-2xl d-block mt-4"></i>
|
||||||
<div>user-follow</div>
|
<div>user-follow</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-user-unfollow c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
|
||||||
<div>user-unfollow</div>
|
<div>user-unfollow</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-wrench c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-wrench icons font-2xl d-block mt-4"></i>
|
||||||
<div>wrench</div>
|
<div>wrench</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-yen c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-yen icons font-2xl d-block mt-4"></i>
|
||||||
<div>yen</div>
|
<div>yen</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
|
|||||||
@@ -5,8 +5,8 @@
|
|||||||
<i class="cui-globe"></i> Flags
|
<i class="cui-globe"></i> Flags
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow class="c-text-center">
|
<CRow class="text-center">
|
||||||
<CCol class="c-mb-5" col="12">
|
<CCol class="mb-5" col="12">
|
||||||
<!-- For using the flags inline with text add the classes
|
<!-- For using the flags inline with text add the classes
|
||||||
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
||||||
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<template v-for="(flag, key) in displayedFlags">
|
<template v-for="(flag, key) in displayedFlags">
|
||||||
<CCol
|
<CCol
|
||||||
class="c-mb-5"
|
class="mb-5"
|
||||||
col="3"
|
col="3"
|
||||||
sm="2"
|
sm="2"
|
||||||
:key="key"
|
:key="key"
|
||||||
@@ -33,9 +33,11 @@
|
|||||||
<script>
|
<script>
|
||||||
import { iconSet } from '@coreui/icons/flags'
|
import { iconSet } from '@coreui/icons/flags'
|
||||||
export default {
|
export default {
|
||||||
name: 'flags',
|
name: 'Flags',
|
||||||
iconSet,
|
iconSet,
|
||||||
computed: {
|
computed: {
|
||||||
|
// Avoid duplication caused by displaying 1x1 and 4x3 formats
|
||||||
|
// (adding Q to name makes icon quadratic)
|
||||||
displayedFlags () {
|
displayedFlags () {
|
||||||
return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
|
return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,29 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12" md="6">
|
<CCol col="12" md="6">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap Alert</strong>
|
<strong> Bootstrap Alert</strong>
|
||||||
<!-- <div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Alert"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
<small class="text-muted">docs</small>
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<p></p>
|
<p></p>
|
||||||
<CAlert show variant="primary">Primary Alert</CAlert>
|
<CAlert show color="primary">Primary Alert</CAlert>
|
||||||
<CAlert show variant="secondary">Secondary Alert</CAlert>
|
<CAlert show color="secondary">Secondary Alert</CAlert>
|
||||||
<CAlert show variant="success">Success Alert</CAlert>
|
<CAlert show color="success">Success Alert</CAlert>
|
||||||
<CAlert show variant="danger">Danger Alert</CAlert>
|
<CAlert show color="danger">Danger Alert</CAlert>
|
||||||
<CAlert show variant="warning">Warning Alert</CAlert>
|
<CAlert show color="warning">Warning Alert</CAlert>
|
||||||
<CAlert show variant="info">Info Alert</CAlert>
|
<CAlert show color="info">Info Alert</CAlert>
|
||||||
<CAlert show variant="light">Light Alert</CAlert>
|
<CAlert show color="light">Light Alert</CAlert>
|
||||||
<CAlert show variant="dark">Dark Alert</CAlert>
|
<CAlert show color="dark">Dark Alert</CAlert>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -32,34 +35,34 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i> Alert
|
<i class="fa fa-align-justify"></i> Alert
|
||||||
<small> use <code>.c-alert-link</code> to provide links</small>
|
<small> use <code>.alert-link</code> to provide links</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CAlert show variant="primary">
|
<CAlert show color="primary">
|
||||||
Primary Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="secondary">
|
<CAlert show color="secondary">
|
||||||
Secondary Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="success">
|
<CAlert show color="success">
|
||||||
Success Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="danger">
|
<CAlert show color="danger">
|
||||||
Danger Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="warning">
|
<CAlert show color="warning">
|
||||||
Warning Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="info">
|
<CAlert show color="info">
|
||||||
Info Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="light">
|
<CAlert show color="light">
|
||||||
Light Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="dark">
|
<CAlert show color="dark">
|
||||||
Dark Alert with
|
Dark Alert with
|
||||||
<CLink href="#" class="c-alert-link">an example link</CLink>
|
<CLink href="#" class="alert-link">an example link</CLink>
|
||||||
.
|
.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
</div>
|
</div>
|
||||||
@@ -72,15 +75,15 @@
|
|||||||
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CAlert show variant="success">
|
<CAlert show color="success">
|
||||||
<h4 class="c-alert-heading">Well done!</h4>
|
<h4 class="alert-heading">Well done!</h4>
|
||||||
<p>
|
<p>
|
||||||
Aww yeah, you successfully read this important alert message.
|
Aww yeah, you successfully read this important alert message.
|
||||||
This example text is going to run a bit longer so that you can see
|
This example text is going to run a bit longer so that you can see
|
||||||
how spacing within an alert works with this kind of content.
|
how spacing within an alert works with this kind of content.
|
||||||
</p>
|
</p>
|
||||||
<hr>
|
<hr>
|
||||||
<p class="c-mb-0">
|
<p class="mb-0">
|
||||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||||
</p>
|
</p>
|
||||||
</CAlert>
|
</CAlert>
|
||||||
@@ -95,14 +98,16 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CAlert
|
<CAlert
|
||||||
dismissible
|
color="secondary"
|
||||||
|
closeButton
|
||||||
:show.sync="dismissibleAlerts[0]"
|
:show.sync="dismissibleAlerts[0]"
|
||||||
>
|
>
|
||||||
Dismissible Alert!
|
Dismissible Alert!
|
||||||
</CAlert>
|
</CAlert>
|
||||||
|
|
||||||
<CAlert
|
<CAlert
|
||||||
dismissible
|
color="secondary"
|
||||||
|
closeButton
|
||||||
fade
|
fade
|
||||||
:show.sync="dismissibleAlerts[1]"
|
:show.sync="dismissibleAlerts[1]"
|
||||||
>
|
>
|
||||||
@@ -110,23 +115,25 @@
|
|||||||
</CAlert>
|
</CAlert>
|
||||||
|
|
||||||
<CAlert
|
<CAlert
|
||||||
|
color="secondary"
|
||||||
:show.sync="dismissibleAlerts[2]"
|
:show.sync="dismissibleAlerts[2]"
|
||||||
v-slot="{dismiss}"
|
v-slot="{dismiss}"
|
||||||
class="c-alert-dismissible"
|
class="alert-dismissible"
|
||||||
>
|
>
|
||||||
Dismissible Alert with custom button!
|
Dismissible Alert with custom button!
|
||||||
<CButton
|
<CButton
|
||||||
class="c-position-absolute"
|
class="position-absolute"
|
||||||
variant="primary"
|
color="secondary"
|
||||||
style="right:10px;top: 50%;transform: translateY(-50%);"
|
style="right:10px;top: 50%;transform: translateY(-50%);"
|
||||||
textHtml="<i>Close</i>"
|
|
||||||
@click="dismiss"
|
@click="dismiss"
|
||||||
/>
|
>
|
||||||
|
<i>Close</i>
|
||||||
|
</CButton>
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CButton
|
<CButton
|
||||||
@click="showDismissibleAlerts"
|
@click="showDismissibleAlerts"
|
||||||
variant="info"
|
color="info"
|
||||||
class="c-m-1"
|
class="m-1"
|
||||||
>
|
>
|
||||||
Show dismissible alerts
|
Show dismissible alerts
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -141,8 +148,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<CAlert
|
<CAlert
|
||||||
:show.sync="dismissCountDown"
|
:show.sync="dismissCountDown"
|
||||||
dismissible
|
closeButton
|
||||||
variant="warning"
|
color="warning"
|
||||||
fade
|
fade
|
||||||
>
|
>
|
||||||
Alert will dismiss after
|
Alert will dismiss after
|
||||||
@@ -151,18 +158,18 @@
|
|||||||
|
|
||||||
<CAlert
|
<CAlert
|
||||||
:show.sync="dismissCountDown"
|
:show.sync="dismissCountDown"
|
||||||
dismissible
|
closeButton
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||||
<CProgress
|
<CProgress
|
||||||
variant="info"
|
color="info"
|
||||||
:max="dismissSecs"
|
:max="dismissSecs"
|
||||||
:value="dismissCountDown"
|
:value="dismissCountDown"
|
||||||
height="4px"
|
height="4px"
|
||||||
/>
|
/>
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CButton @click="showAlert" variant="info" class="c-m-1">
|
<CButton @click="showAlert" color="info" class="m-1">
|
||||||
Show alert with timer
|
Show alert with timer
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -170,13 +177,11 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'alerts',
|
name: 'Alerts',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dismissSecs: 10,
|
dismissSecs: 10,
|
||||||
|
|||||||
@@ -1,29 +1,32 @@
|
|||||||
<template functional>
|
<template functional>
|
||||||
<div class="c-wrapper">
|
|
||||||
<div>
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12" md="6">
|
<CCol col="12" md="6">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Bootstrap Badge</strong>
|
<strong> Bootstrap Badge</strong>
|
||||||
<!-- <div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Badge"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
<small class="text-muted">docs</small>
|
<small class="text-muted">docs</small>
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<h2>Example heading <CBadge>New</CBadge></h2>
|
<h2>Example heading <CBadge color="primary">New</CBadge></h2>
|
||||||
<h3>Example heading <CBadge>New</CBadge></h3>
|
<h3>Example heading <CBadge color="primary">New</CBadge></h3>
|
||||||
<h4>Example heading <CBadge>New</CBadge></h4>
|
<h4>Example heading <CBadge color="primary">New</CBadge></h4>
|
||||||
<h5>Example heading <CBadge>New</CBadge></h5>
|
<h5>Example heading <CBadge color="primary">New</CBadge></h5>
|
||||||
<h6>Example heading <CBadge>New</CBadge></h6>
|
<h6>Example heading <CBadge color="primary">New</CBadge></h6>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton variant="primary">
|
<CButton color="primary">
|
||||||
Notifications
|
Notifications
|
||||||
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
|
<CBadge color="light" class="ml-2 position-static">4</CBadge>
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -35,14 +38,14 @@
|
|||||||
<small>contextual variations</small>
|
<small>contextual variations</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CBadge variant="primary">Primary</CBadge>
|
<CBadge color="primary">Primary</CBadge>
|
||||||
<CBadge variant="secondary">Secondary</CBadge>
|
<CBadge color="secondary">Secondary</CBadge>
|
||||||
<CBadge variant="success">Success</CBadge>
|
<CBadge color="success">Success</CBadge>
|
||||||
<CBadge variant="danger">Danger</CBadge>
|
<CBadge color="danger">Danger</CBadge>
|
||||||
<CBadge variant="warning">Warning</CBadge>
|
<CBadge color="warning">Warning</CBadge>
|
||||||
<CBadge variant="info">Info</CBadge>
|
<CBadge color="info">Info</CBadge>
|
||||||
<CBadge variant="light">Light</CBadge>
|
<CBadge color="light">Light</CBadge>
|
||||||
<CBadge variant="dark">Dark</CBadge>
|
<CBadge color="dark">Dark</CBadge>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -51,14 +54,14 @@
|
|||||||
<small>pills</small>
|
<small>pills</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CBadge pill variant="primary">Primary</CBadge>
|
<CBadge pill color="primary">Primary</CBadge>
|
||||||
<CBadge pill variant="secondary">Secondary</CBadge>
|
<CBadge pill color="secondary">Secondary</CBadge>
|
||||||
<CBadge pill variant="success">Success</CBadge>
|
<CBadge pill color="success">Success</CBadge>
|
||||||
<CBadge pill variant="danger">Danger</CBadge>
|
<CBadge pill color="danger">Danger</CBadge>
|
||||||
<CBadge pill variant="warning">Warning</CBadge>
|
<CBadge pill color="warning">Warning</CBadge>
|
||||||
<CBadge pill variant="info">Info</CBadge>
|
<CBadge pill color="info">Info</CBadge>
|
||||||
<CBadge pill variant="light">Light</CBadge>
|
<CBadge pill color="light">Light</CBadge>
|
||||||
<CBadge pill variant="dark">Dark</CBadge>
|
<CBadge pill color="dark">Dark</CBadge>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -67,24 +70,22 @@
|
|||||||
<small>actionable</small>
|
<small>actionable</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CBadge href="#" variant="primary">Primary</CBadge>
|
<CBadge href="#" color="primary">Primary</CBadge>
|
||||||
<CBadge href="#" variant="secondary">Secondary</CBadge>
|
<CBadge href="#" color="secondary">Secondary</CBadge>
|
||||||
<CBadge href="#" variant="success">Success</CBadge>
|
<CBadge href="#" color="success">Success</CBadge>
|
||||||
<CBadge href="#" variant="danger">Danger</CBadge>
|
<CBadge href="#" color="danger">Danger</CBadge>
|
||||||
<CBadge href="#" variant="warning">Warning</CBadge>
|
<CBadge href="#" color="warning">Warning</CBadge>
|
||||||
<CBadge href="#" variant="info">Info</CBadge>
|
<CBadge href="#" color="info">Info</CBadge>
|
||||||
<CBadge href="#" variant="light">Light</CBadge>
|
<CBadge href="#" color="light">Light</CBadge>
|
||||||
<CBadge href="#" variant="dark">Dark</CBadge>
|
<CBadge href="#" color="dark">Dark</CBadge>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'badges'
|
name: 'Badges'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,39 +1,49 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div class="wrapper">
|
||||||
<div>
|
<div>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12">
|
<CCol col="12">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i> Bootstrap Modals
|
<i class="fa fa-align-justify"></i> Bootstrap Modals
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Modal"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CButton variant="secondary" @click="myModal = true" class="c-mr-1">
|
<CButton color="secondary" @click="myModal = true" class="mr-1">
|
||||||
Launch demo modal
|
Launch demo modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="secondary" @click="largeModal = true" class="c-mr-1">
|
<CButton color="secondary" @click="largeModal = true" class="mr-1">
|
||||||
Launch large modal
|
Launch large modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="secondary" @click="smallModal = true" class="c-mr-1">
|
<CButton color="secondary" @click="smallModal = true" class="mr-1">
|
||||||
Launch small modal
|
Launch small modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<hr>
|
<hr>
|
||||||
<CButton variant="primary" @click="primaryModal = true" class="c-mr-1">
|
<CButton color="primary" @click="primaryModal = true" class="mr-1">
|
||||||
Launch primary modal
|
Launch primary modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="success" @click="successModal = true" class="c-mr-1">
|
<CButton color="success" @click="successModal = true" class="mr-1">
|
||||||
Launch success modal
|
Launch success modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="warning" @click="warningModal = true" class="c-mr-1">
|
<CButton color="warning" @click="warningModal = true" class="mr-1">
|
||||||
Launch warning modal
|
Launch warning modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="danger" @click="dangerModal = true" class="c-mr-1">
|
<CButton color="danger" @click="dangerModal = true" class="mr-1">
|
||||||
Launch danger modal
|
Launch danger modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="info" @click="infoModal = true" class="c-mr-1">
|
<CButton color="info" @click="infoModal = true" class="mr-1">
|
||||||
Launch info modal
|
Launch info modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="dark" @click="darkModal = true" class="c-mr-1">
|
<CButton color="dark" @click="darkModal = true" class="mr-1">
|
||||||
Launch dark modal
|
Launch dark modal
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -44,7 +54,7 @@
|
|||||||
<!-- Modal Component -->
|
<!-- Modal Component -->
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
:visible.sync="myModal"
|
:show.sync="myModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -56,7 +66,7 @@
|
|||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
size="lg"
|
size="lg"
|
||||||
:visible.sync="largeModal"
|
:show.sync="largeModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -68,7 +78,7 @@
|
|||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
size="sm"
|
size="sm"
|
||||||
:visible.sync="smallModal"
|
:show.sync="smallModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -80,7 +90,7 @@
|
|||||||
|
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
:visible.sync="primaryModal"
|
:show.sync="primaryModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -91,8 +101,8 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="success"
|
color="success"
|
||||||
:visible.sync="successModal"
|
:show.sync="successModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -103,8 +113,8 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="warning"
|
color="warning"
|
||||||
:visible.sync="warningModal"
|
:show.sync="warningModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -115,8 +125,8 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:visible.sync="dangerModal"
|
:show.sync="dangerModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -127,8 +137,8 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="info"
|
color="info"
|
||||||
:visible.sync="infoModal"
|
:show.sync="infoModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -138,12 +148,12 @@
|
|||||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
:visible.sync="darkModal"
|
:show.sync="darkModal"
|
||||||
:no-close-on-backdrop="true"
|
:no-close-on-backdrop="true"
|
||||||
:centered="true"
|
:centered="true"
|
||||||
title="Modal title 2"
|
title="Modal title 2"
|
||||||
size="lg"
|
size="lg"
|
||||||
variant="dark"
|
color="dark"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -151,13 +161,13 @@
|
|||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
<template #header="{hide}">
|
<template #header>
|
||||||
<h6 class="c-modal-title">Custom smaller modal title</h6>
|
<h6 class="modal-title">Custom smaller modal title</h6>
|
||||||
<CButtonClose @click="hide()" class="c-text-white"/>
|
<CButtonClose @click="darkModal = false" class="text-white"/>
|
||||||
</template>
|
</template>
|
||||||
<template #footer="{hide}">
|
<template #footer>
|
||||||
<CButton @click="hide()" variant="danger">Discard</CButton>
|
<CButton @click="darkModal = false" color="danger">Discard</CButton>
|
||||||
<CButton @click="hide(true)" variant="success">Accept</CButton>
|
<CButton @click="darkModal = false" color="success">Accept</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CModal>
|
</CModal>
|
||||||
</div>
|
</div>
|
||||||
@@ -166,7 +176,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'modals',
|
name: 'Modals',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
myModal: false,
|
myModal: false,
|
||||||
|
|||||||
+12
-12
@@ -1,19 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
|
<CContainer class="d-flex align-items-center min-vh-100">
|
||||||
<CRow class="c-justify-content-center">
|
<CRow class="justify-content-center">
|
||||||
<CCol md="8">
|
<CCol md="8">
|
||||||
<CCardGroup>
|
<CCardGroup>
|
||||||
<CCard class="c-p-4">
|
<CCard class="p-4">
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
<p class="c-text-muted">Sign In to your account</p>
|
<p class="text-muted">Sign In to your account</p>
|
||||||
<CFormInput
|
<CInput
|
||||||
prependHtml="<i class='cui-user'></i>"
|
prependHtml="<i class='cui-user'></i>"
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
autocomplete="username email"
|
autocomplete="username email"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
prependHtml="<i class='cui-lock-locked'></i>"
|
prependHtml="<i class='cui-lock-locked'></i>"
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
type="password"
|
type="password"
|
||||||
@@ -21,25 +21,25 @@
|
|||||||
/>
|
/>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="6">
|
<CCol col="6">
|
||||||
<CButton variant="primary" class="c-px-4">Login</CButton>
|
<CButton color="primary" class="px-4">Login</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" class="c-text-right">
|
<CCol col="6" class="text-right">
|
||||||
<CButton variant="link" class="c-px-0">Forgot password?</CButton>
|
<CButton color="link" class="px-0">Forgot password?</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard
|
<CCard
|
||||||
class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
|
class="text-white text-center bg-primary py-5 d-md-down-none"
|
||||||
style="width:44%"
|
style="width:44%"
|
||||||
body-wrapper
|
body-wrapper
|
||||||
>
|
>
|
||||||
<h2>Sign up</h2>
|
<h2>Sign up</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
class="c-active c-mt-3"
|
class="active mt-3"
|
||||||
>
|
>
|
||||||
Register Now!
|
Register Now!
|
||||||
</CButton>
|
</CButton>
|
||||||
|
|||||||
+11
-11
@@ -1,22 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
|
<CContainer class="d-flex align-items-center min-vh-100">
|
||||||
<CRow class="c-w-100 c-justify-content-center">
|
<CRow class="w-100 justify-content-center">
|
||||||
<CCol md="6">
|
<CCol md="6">
|
||||||
<div class="c-w-100">
|
<div class="w-100">
|
||||||
<div class="c-clearfix">
|
<div class="clearfix">
|
||||||
<h1 class="c-float-left c-display-3 c-mr-4">404</h1>
|
<h1 class="float-left display-3 mr-4">404</h1>
|
||||||
<h4 class="c-pt-3">Oops! You're lost.</h4>
|
<h4 class="pt-3">Oops! You're lost.</h4>
|
||||||
<p class="c-text-muted">The page you are looking for was not found.</p>
|
<p class="text-muted">The page you are looking for was not found.</p>
|
||||||
</div>
|
</div>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mb-0"
|
class="mb-3"
|
||||||
prependHtml="<i class='cui-magnifying-glass'></i>"
|
prependHtml="<i class='cui-magnifying-glass'></i>"
|
||||||
placeholder="What are you looking for?"
|
placeholder="What are you looking for?"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="info">Search</CButton>
|
<CButton color="info">Search</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
</div>
|
</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
|
|||||||
+10
-10
@@ -1,21 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
|
<CContainer class="d-flex align-items-center min-vh-100">
|
||||||
<CRow class="c-w-100 c-justify-content-center">
|
<CRow class="w-100 justify-content-center">
|
||||||
<CCol md="6">
|
<CCol md="6">
|
||||||
<div class="c-clearfix">
|
<div class="clearfix">
|
||||||
<h1 class="c-float-left c-display-3 c-mr-4">500</h1>
|
<h1 class="float-left display-3 mr-4">500</h1>
|
||||||
<h4 class="c-pt-3">Houston, we have a problem!</h4>
|
<h4 class="pt-3">Houston, we have a problem!</h4>
|
||||||
<p class="c-text-muted">The page you are looking for is temporarily unavailable.</p>
|
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
|
||||||
</div>
|
</div>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mb-0"
|
class="mb-3"
|
||||||
prependHtml="<i class='cui-magnifying-glass'></i>"
|
prependHtml="<i class='cui-magnifying-glass'></i>"
|
||||||
placeholder="What are you looking for?"
|
placeholder="What are you looking for?"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="info">Search</CButton>
|
<CButton color="info">Search</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CContainer>
|
</CContainer>
|
||||||
|
|||||||
@@ -1,45 +1,49 @@
|
|||||||
<template>
|
<template>
|
||||||
<CContainer class="c-min-vh-100 c-d-flex c-align-items-center">
|
<CContainer class="min-vh-100 d-flex align-items-center">
|
||||||
<CRow class="c-w-100 c-justify-content-center">
|
<CRow class="w-100 justify-content-center">
|
||||||
<CCol md="6" sm="8">
|
<CCol md="6" sm="8">
|
||||||
<CCard class="c-mx-4">
|
<CCard class="mx-4 mb-0">
|
||||||
<CCardBody class="c-p-4">
|
<CCardBody class="p-4">
|
||||||
<CForm>
|
<CForm>
|
||||||
<h1>Register</h1>
|
<h1>Register</h1>
|
||||||
<p class="c-text-muted">Create your account</p>
|
<p class="text-muted">Create your account</p>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
prependHtml="<i class='cui-user'></i>"
|
prependHtml="<i class='cui-user'></i>"
|
||||||
autocomplete="username"
|
autocomplete="username"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
prepend-html="@"
|
prepend-html="@"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
type="password"
|
type="password"
|
||||||
prependHtml="<i class='cui-lock-locked'></i>"
|
prependHtml="<i class='cui-lock-locked'></i>"
|
||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Repeat password"
|
placeholder="Repeat password"
|
||||||
type="password"
|
type="password"
|
||||||
prependHtml="<i class='cui-lock-locked'></i>"
|
prependHtml="<i class='cui-lock-locked'></i>"
|
||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
class="c-mb-4"
|
class="mb-4"
|
||||||
/>
|
/>
|
||||||
<CButton variant="success" block>Create Account</CButton>
|
<CButton color="success" block>Create Account</CButton>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter class="c-p-4">
|
<CCardFooter class="p-4">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="6">
|
<CCol col="6">
|
||||||
<CButton block variant="facebook" textHtml="Facebook"/>
|
<CButton block color="facebook">
|
||||||
|
Facebook
|
||||||
|
</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6">
|
<CCol col="6">
|
||||||
<CButton block variant="twitter" textHtml="Twitter"/>
|
<CButton block color="twitter">
|
||||||
|
Twitter
|
||||||
|
</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<CCol xl="2" md="4" sm="6" xs="12" class="c-mb-4">
|
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
|
||||||
<div
|
<div
|
||||||
:class="['c-theme-color c-w-75 c-rounded c-mb-3', color]"
|
:class="['theme-color w-75 rounded mb-3', color]"
|
||||||
:style="{ paddingTop: '75%' }"
|
:style="{ paddingTop: '75%' }"
|
||||||
></div>
|
></div>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
@@ -15,10 +15,7 @@ export default {
|
|||||||
name: 'ColorTheme',
|
name: 'ColorTheme',
|
||||||
components: { ColorView },
|
components: { ColorView },
|
||||||
props: {
|
props: {
|
||||||
color: {
|
color: String,
|
||||||
type: String,
|
|
||||||
default: 'c-bg-secondary'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<table class="c-w-100">
|
<table class="w-100">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="c-text-muted">HEX:</td>
|
<td class="text-muted">HEX:</td>
|
||||||
<td class="c-font-weight-bold">{{this.hexColor}}</td>
|
<td class="font-weight-bold">{{this.hexColor}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="c-text-muted">RGB:</td>
|
<td class="text-muted">RGB:</td>
|
||||||
<td class="c-font-weight-bold">{{this.bgColor}}</td>
|
<td class="font-weight-bold">{{this.bgColor}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
+18
-37
@@ -6,16 +6,16 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<ColorTheme color="c-bg-primary">
|
<ColorTheme color="bg-primary">
|
||||||
<h6>Brand Primary Color</h6>
|
<h6>Brand Primary Color</h6>
|
||||||
</ColorTheme>
|
</ColorTheme>
|
||||||
<ColorTheme color="c-bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -25,34 +25,15 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<ColorTheme color="c-bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard >
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="cui-drop"></i> Additional colors
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CRow>
|
|
||||||
<ColorTheme color="c-bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-red"><h6>Brand Red Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-green"><h6>Brand Green Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
|
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -62,7 +43,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import ColorTheme from './ColorTheme'
|
import ColorTheme from './ColorTheme'
|
||||||
export default {
|
export default {
|
||||||
name: 'colors',
|
name: 'Colors',
|
||||||
components: { ColorTheme }
|
components: { ColorTheme }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="c-card">
|
<div class="card">
|
||||||
<div class="c-card-header">
|
<div class="card-header">
|
||||||
Headings
|
Headings
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card-body">
|
<div class="card-body">
|
||||||
<p>Documentation and examples for Bootstrap typography,
|
<p>Documentation and examples for Bootstrap typography,
|
||||||
including global settings, headings, body text, lists, and more.</p>
|
including global settings, headings, body text, lists, and more.</p>
|
||||||
<table class="c-table">
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Heading</th>
|
<th>Heading</th>
|
||||||
@@ -18,131 +18,131 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h1></h1>
|
<h1></h1>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h1">h1. Bootstrap heading</span></td>
|
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h2></h2>
|
<h2></h2>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h2">h2. Bootstrap heading</span></td>
|
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h3></h3>
|
<h3></h3>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h3">h3. Bootstrap heading</span></td>
|
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h4></h4>
|
<h4></h4>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h4">h4. Bootstrap heading</span></td>
|
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h5></h5>
|
<h5></h5>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h5">h5. Bootstrap heading</span></td>
|
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h6></h6>
|
<h6></h6>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h6">h6. Bootstrap heading</span></td>
|
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card">
|
<div class="card">
|
||||||
<div class="c-card-header">
|
<div class="card-header">
|
||||||
Headings
|
Headings
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card-body">
|
<div class="card-body">
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">.h1</code> through
|
<code class="highlighter-rouge">.h1</code> through
|
||||||
<code class="c-highlighter-rouge">.h6</code>
|
<code class="highlighter-rouge">.h6</code>
|
||||||
classes are also available, for when you want to match the font
|
classes are also available, for when you want to match the font
|
||||||
styling of a heading but cannot use the associated HTML element.
|
styling of a heading but cannot use the associated HTML element.
|
||||||
</p>
|
</p>
|
||||||
<div class="c-bd-example">
|
<div class="bd-example">
|
||||||
<p class="c-h1">h1. Bootstrap heading</p>
|
<p class="h1">h1. Bootstrap heading</p>
|
||||||
<p class="c-h2">h2. Bootstrap heading</p>
|
<p class="h2">h2. Bootstrap heading</p>
|
||||||
<p class="c-h3">h3. Bootstrap heading</p>
|
<p class="h3">h3. Bootstrap heading</p>
|
||||||
<p class="c-h4">h4. Bootstrap heading</p>
|
<p class="h4">h4. Bootstrap heading</p>
|
||||||
<p class="c-h5">h5. Bootstrap heading</p>
|
<p class="h5">h5. Bootstrap heading</p>
|
||||||
<p class="c-h6">h6. Bootstrap heading</p>
|
<p class="h6">h6. Bootstrap heading</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card">
|
<div class="card">
|
||||||
<div class="c-card-header">
|
<div class="card-header">
|
||||||
Display headings
|
Display headings
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card-body">
|
<div class="card-body">
|
||||||
<p>
|
<p>
|
||||||
Traditional heading elements are designed to work best in the meat
|
Traditional heading elements are designed to work best in the meat
|
||||||
of your page content. When you need a heading to stand out,
|
of your page content. When you need a heading to stand out,
|
||||||
consider using a <strong>display heading</strong>—a larger,
|
consider using a <strong>display heading</strong>—a larger,
|
||||||
slightly more opinionated heading style.
|
slightly more opinionated heading style.
|
||||||
</p>
|
</p>
|
||||||
<div class="c-bd-example c-bd-example-type">
|
<div class="bd-example bd-example-type">
|
||||||
<table class="c-table">
|
<table class="table">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><span class="c-display-1">Display 1</span></td>
|
<td><span class="display-1">Display 1</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><span class="c-display-2">Display 2</span></td>
|
<td><span class="display-2">Display 2</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><span class="c-display-3">Display 3</span></td>
|
<td><span class="display-3">Display 3</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><span class="c-display-4">Display 4</span></td>
|
<td><span class="display-4">Display 4</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card">
|
<div class="card">
|
||||||
<div class="c-card-header">
|
<div class="card-header">
|
||||||
Inline text elements
|
Inline text elements
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card-body">
|
<div class="card-body">
|
||||||
<p>
|
<p>
|
||||||
Traditional heading elements are designed to work best in the meat
|
Traditional heading elements are designed to work best in the meat
|
||||||
of your page content. When you need a heading to stand out,
|
of your page content. When you need a heading to stand out,
|
||||||
consider using a <strong>display heading</strong>—a larger,
|
consider using a <strong>display heading</strong>—a larger,
|
||||||
slightly more opinionated heading style.
|
slightly more opinionated heading style.
|
||||||
</p>
|
</p>
|
||||||
<div class="c-bd-example">
|
<div class="bd-example">
|
||||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||||
<p><del>
|
<p><del>
|
||||||
This line of text is meant to be treated as deleted text.
|
This line of text is meant to be treated as deleted text.
|
||||||
@@ -162,46 +162,46 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card">
|
<div class="card">
|
||||||
<div class="c-card-header">
|
<div class="card-header">
|
||||||
Description list alignment
|
Description list alignment
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card-body">
|
<div class="card-body">
|
||||||
<p>
|
<p>
|
||||||
Align terms and descriptions horizontally by using our grid system’s
|
Align terms and descriptions horizontally by using our grid system’s
|
||||||
predefined classes (or semantic mixins). For longer terms, you can
|
predefined classes (or semantic mixins). For longer terms, you can
|
||||||
optionally add a <code class="highlighter-rouge">.text-truncate</code>
|
optionally add a <code class="highlighter-rouge">.text-truncate</code>
|
||||||
class to truncate the text with an ellipsis.
|
class to truncate the text with an ellipsis.
|
||||||
</p>
|
</p>
|
||||||
<div class="c-bd-example">
|
<div class="bd-example">
|
||||||
<dl class="c-row">
|
<dl class="row">
|
||||||
<dt class="c-col-sm-3">Description lists</dt>
|
<dt class="col-sm-3">Description lists</dt>
|
||||||
<dd class="c-col-sm-9">
|
<dd class="col-sm-9">
|
||||||
A description list is perfect for defining terms.
|
A description list is perfect for defining terms.
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="c-col-sm-3">Euismod</dt>
|
<dt class="col-sm-3">Euismod</dt>
|
||||||
<dd class="c-col-sm-9">
|
<dd class="col-sm-9">
|
||||||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
||||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="c-col-sm-3">Malesuada porta</dt>
|
<dt class="col-sm-3">Malesuada porta</dt>
|
||||||
<dd class="c-col-sm-9">
|
<dd class="col-sm-9">
|
||||||
Etiam porta sem malesuada magna mollis euismod.
|
Etiam porta sem malesuada magna mollis euismod.
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="c-col-sm-3 text-truncate">Truncated term is truncated</dt>
|
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||||
<dd class="c-col-sm-9">
|
<dd class="col-sm-9">
|
||||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||||
condimentum nibh, ut fermentum massa justo sit amet risus.
|
condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="c-col-sm-3">Nesting</dt>
|
<dt class="col-sm-3">Nesting</dt>
|
||||||
<dd class="c-col-sm-9">
|
<dd class="col-sm-9">
|
||||||
<dl class="c-row">
|
<dl class="row">
|
||||||
<dt class="c-col-sm-4">Nested definition list</dt>
|
<dt class="col-sm-4">Nested definition list</dt>
|
||||||
<dd class="c-col-sm-8">
|
<dd class="col-sm-8">
|
||||||
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
|
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
@@ -215,6 +215,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'typography'
|
name: 'Typography'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -10,12 +10,12 @@
|
|||||||
striped
|
striped
|
||||||
small
|
small
|
||||||
fixed
|
fixed
|
||||||
:items="items($route.params.id)"
|
:items="getUserData($route.params.id)"
|
||||||
:fields="$options.fields"
|
:fields="$options.fields"
|
||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton @click="goBack">Back</CButton>
|
<CButton color="primary" @click="goBack">Back</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -26,25 +26,18 @@
|
|||||||
import usersData from './UsersData'
|
import usersData from './UsersData'
|
||||||
export default {
|
export default {
|
||||||
name: 'User',
|
name: 'User',
|
||||||
props: {
|
|
||||||
caption: {
|
|
||||||
type: String,
|
|
||||||
default: 'User id'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fields: [
|
fields: [
|
||||||
{ key: 'key', _style: 'width:150px' },
|
{ key: 'key', _style: 'width:150px' },
|
||||||
{ key: 'value' , _style:'width:150px;', _classes:'font-weight-bold'}
|
{ key: 'value' , _style: 'width:150px;' }
|
||||||
],
|
],
|
||||||
methods: {
|
methods: {
|
||||||
items (id) {
|
getUserData (id) {
|
||||||
const user = usersData.find( user => user.id.toString() === id)
|
const user = usersData.find((user, index) => index + 1 == id)
|
||||||
const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
|
const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
|
||||||
return userDetails.map(([key, value]) => {return {key: key, value: value}})
|
return userDetails.map(([key, value]) => { return { key, value } })
|
||||||
},
|
},
|
||||||
goBack() {
|
goBack() {
|
||||||
this.$router.go(-1)
|
this.$router.go(-1)
|
||||||
// this.$router.replace({path: '/users'})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+18
-25
@@ -2,28 +2,31 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12" xl="8">
|
<CCol col="12" xl="8">
|
||||||
<transition name="slide">
|
<transition name="slide">
|
||||||
<CCard header-html="users" body-wrapper>
|
<CCard header-html="Users" body-wrapper>
|
||||||
<CTable
|
<CTable
|
||||||
hover
|
hover
|
||||||
striped
|
striped
|
||||||
:items="items"
|
:items="items"
|
||||||
:fields="fields"
|
:fields="fields"
|
||||||
:current-page="currentPage"
|
:items-per-page="perPage"
|
||||||
:per-page="perPage"
|
|
||||||
@row-clicked="rowClicked"
|
@row-clicked="rowClicked"
|
||||||
:pagination="$options.paginationProps"
|
:pagination="$options.paginationProps"
|
||||||
|
index-column
|
||||||
|
clickable-rows
|
||||||
>
|
>
|
||||||
<td slot="id" slot-scope="data">
|
<template #username="data">
|
||||||
<strong>{{data.item.id}}</strong>
|
<td>
|
||||||
|
<strong>{{data.item.username}}</strong>
|
||||||
</td>
|
</td>
|
||||||
<td slot="name" slot-scope="data">
|
</template>
|
||||||
<strong>{{data.item.name}}</strong>
|
|
||||||
</td>
|
<template #status="data">
|
||||||
<td slot="status" slot-scope="data">
|
<td>
|
||||||
<CBadge :variant="getBadge(data.item.status)">
|
<CBadge :color="getBadge(data.item.status)">
|
||||||
{{data.item.status}}
|
{{data.item.status}}
|
||||||
</CBadge>
|
</CBadge>
|
||||||
</td>
|
</td>
|
||||||
|
</template>
|
||||||
</CTable>
|
</CTable>
|
||||||
</CCard>
|
</CCard>
|
||||||
</transition>
|
</transition>
|
||||||
@@ -37,22 +40,19 @@ export default {
|
|||||||
name: 'Users',
|
name: 'Users',
|
||||||
data: () => {
|
data: () => {
|
||||||
return {
|
return {
|
||||||
items: usersData.filter((user) => user.id < 42),
|
items: usersData,
|
||||||
fields: [
|
fields: [
|
||||||
{key: 'id'},
|
{ key: 'username', label: 'Name' },
|
||||||
{key: 'name'},
|
|
||||||
{ key: 'registered' },
|
{ key: 'registered' },
|
||||||
{ key: 'role' },
|
{ key: 'role' },
|
||||||
{ key: 'status' }
|
{ key: 'status' }
|
||||||
],
|
],
|
||||||
currentPage: 1,
|
|
||||||
perPage: 5,
|
perPage: 5,
|
||||||
totalRows: 0
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
paginationProps: {
|
paginationProps: {
|
||||||
align: 'center',
|
align: 'center',
|
||||||
hideDoubleArrows: true,
|
doubleArrows: false,
|
||||||
previousButtonHtml: 'prev',
|
previousButtonHtml: 'prev',
|
||||||
nextButtonHtml: 'next'
|
nextButtonHtml: 'next'
|
||||||
},
|
},
|
||||||
@@ -66,17 +66,10 @@ export default {
|
|||||||
userLink (id) {
|
userLink (id) {
|
||||||
return `users/${id.toString()}`
|
return `users/${id.toString()}`
|
||||||
},
|
},
|
||||||
rowClicked (item) {
|
rowClicked (item, index) {
|
||||||
const userLink = this.userLink(item.id)
|
const userLink = this.userLink(index + 1)
|
||||||
this.$router.push({path: userLink})
|
this.$router.push({path: userLink})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.c-card-body >>> table > tbody > tr > td {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,31 +1,31 @@
|
|||||||
const usersData = [
|
const usersData = [
|
||||||
// {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
|
{ username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
{ username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
{ username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
{ username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
{id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
{ username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
{id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
{ username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
{id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
{ username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
|
||||||
{id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
{ username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
{id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
{ username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
{id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
{ username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
{id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
{ username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-success'},
|
||||||
{id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
{ username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
{id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
{ username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
{id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
{ username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
{id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
{ username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
{id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
{ username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
{id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
{ username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
{id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
{ username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
{id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
{ username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
{id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
{ username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
{id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
{ username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
{id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
{ username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
{id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
{ username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
|
||||||
{id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
{ username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||||
{id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
|
{ username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||||
{id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
|
|
||||||
{id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default usersData
|
export default usersData
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -8,10 +8,23 @@
|
|||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
>
|
>
|
||||||
<CProgress
|
<CProgress
|
||||||
variant="success"
|
color="success"
|
||||||
:value="25"
|
:value="25"
|
||||||
class="c-progress-xs c-my-3 c-mb-0"
|
class="progress-xs my-3 mb-0"
|
||||||
/>
|
/>
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
|
||||||
|
class="card-header-action position-absolute"
|
||||||
|
style="right:10px; top:10px"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</CWidgetProgress>
|
</CWidgetProgress>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
@@ -19,7 +32,7 @@
|
|||||||
header="12.124"
|
header="12.124"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="info"
|
color="info"
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -28,7 +41,7 @@
|
|||||||
header="$98.111,00"
|
header="$98.111,00"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="warning"
|
color="warning"
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -37,7 +50,7 @@
|
|||||||
header="2 TB"
|
header="2 TB"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="danger"
|
color="danger"
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -48,7 +61,7 @@
|
|||||||
header="89.9%"
|
header="89.9%"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="success"
|
color="success"
|
||||||
inverse :value="25"
|
inverse :value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -57,7 +70,7 @@
|
|||||||
header="12.124"
|
header="12.124"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
@@ -67,7 +80,7 @@
|
|||||||
header="$98.111,00"
|
header="$98.111,00"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
@@ -77,7 +90,7 @@
|
|||||||
header="2 TB"
|
header="2 TB"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="danger"
|
color="danger"
|
||||||
inverse
|
inverse
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
@@ -88,7 +101,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
<CIcon name="settings" width="24"/>
|
<CIcon name="settings" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -97,7 +110,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" width="24"/>
|
<CIcon name="laptop" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -106,7 +119,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon name="moon" width="24"/>
|
<CIcon name="moon" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -115,7 +128,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="danger"
|
color="danger"
|
||||||
>
|
>
|
||||||
<CIcon name="bell" width="24"/>
|
<CIcon name="bell" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -126,8 +139,8 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="settings" width="24"/>
|
<CIcon name="settings" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -136,8 +149,8 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" width="24"/>
|
<CIcon name="laptop" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -146,8 +159,8 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="moon" width="24"/>
|
<CIcon name="moon" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -156,8 +169,8 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="danger"
|
color="danger"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="bell" width="24"/>
|
<CIcon name="bell" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -168,38 +181,38 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="settings" class="c-mx-5 " width="24"/>
|
<CIcon name="settings" class="mx-5 " width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="4">
|
<CCol col="12" sm="6" lg="4">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" class="c-mx-5 " width="24"/>
|
<CIcon name="laptop" class="mx-5 " width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="4">
|
<CCol col="12" sm="6" lg="4">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="moon" class="c-mx-5 " width="24"/>
|
<CIcon name="moon" class="mx-5 " width="24"/>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<CCardFooter class="c-card-footer c-px-3 c-py-2">
|
<CCardFooter class="card-footer px-3 py-2">
|
||||||
<CLink
|
<CLink
|
||||||
class="c-font-weight-bold c-font-xs c-btn-block c-text-muted"
|
class="font-weight-bold font-xs btn-block text-muted"
|
||||||
href="https://coreui.io/"
|
href="https://coreui.io/"
|
||||||
>
|
>
|
||||||
View more
|
View more
|
||||||
<CIcon name="arrowRight" class="c-float-right" width="16"/>
|
<CIcon name="arrowRight" class="float-right" width="16"/>
|
||||||
</CLink>
|
</CLink>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</template>
|
</template>
|
||||||
@@ -211,57 +224,57 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
link="#"
|
link="#"
|
||||||
>
|
>
|
||||||
<CIcon name="settings" class="c-mx-5 " width="24"/>
|
<CIcon name="settings" class="mx-5 " width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="4">
|
<CCol col="12" sm="6" lg="4">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
link="#"
|
link="#"
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" class="c-mx-5 " width="24"/>
|
<CIcon name="laptop" class="mx-5 " width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="4">
|
<CCol col="12" sm="6" lg="4">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
link="#"
|
link="#"
|
||||||
>
|
>
|
||||||
<CIcon name="moon" class="c-mx-5" width="24"/>
|
<CIcon name="moon" class="mx-5" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow> -->
|
</CRow> -->
|
||||||
<WidgetsBrand noCharts/>
|
<WidgetsBrand noCharts/>
|
||||||
<WidgetsBrand/>
|
<WidgetsBrand/>
|
||||||
<CCardGroup class="c-mb-4">
|
<CCardGroup class="mb-4">
|
||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -274,16 +287,16 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
</CCardGroup>
|
</CCardGroup>
|
||||||
<CCardGroup class="c-mb-4">
|
<CCardGroup class="mb-4">
|
||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
@@ -291,7 +304,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
@@ -299,7 +312,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
@@ -307,7 +320,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="28%"
|
header="28%"
|
||||||
text="Returning Visitors"
|
text="Returning Visitors"
|
||||||
variant="primary"
|
color="primary"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="chartPie" height="36"/>
|
<CIcon name="chartPie" height="36"/>
|
||||||
@@ -315,7 +328,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
@@ -326,7 +339,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -335,7 +348,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -344,7 +357,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -353,7 +366,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="28%"
|
header="28%"
|
||||||
text="Returning Visitors"
|
text="Returning Visitors"
|
||||||
variant="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
<CIcon name="chartPie" height="36"/>
|
<CIcon name="chartPie" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -362,7 +375,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -371,7 +384,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="972"
|
header="972"
|
||||||
text="comments"
|
text="comments"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="speech" height="36"/>
|
<CIcon name="speech" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -382,7 +395,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
@@ -392,7 +405,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
@@ -402,7 +415,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
@@ -412,7 +425,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="28%"
|
header="28%"
|
||||||
text="Returning Visitors"
|
text="Returning Visitors"
|
||||||
variant="primary"
|
color="primary"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="chartPie" height="36"/>
|
<CIcon name="chartPie" height="36"/>
|
||||||
@@ -422,7 +435,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
@@ -432,7 +445,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="972"
|
header="972"
|
||||||
text="comments"
|
text="comments"
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="speech" height="36"/>
|
<CIcon name="speech" height="36"/>
|
||||||
@@ -443,6 +456,7 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
|
color="primary"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
@@ -454,7 +468,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
variant="success"
|
color="success"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
@@ -466,7 +480,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
variant="danger"
|
color="danger"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
@@ -478,7 +492,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
variant="warning"
|
color="warning"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
|
|||||||
@@ -3,20 +3,19 @@
|
|||||||
<template v-if="!noCharts">
|
<template v-if="!noCharts">
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="facebook"
|
color="facebook"
|
||||||
right-header="89k"
|
right-header="89k"
|
||||||
right-footer="friends"
|
right-footer="friends"
|
||||||
left-header="459"
|
left-header="459"
|
||||||
left-footer="feeds"
|
left-footer="feeds"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialFacebook"
|
name="facebook"
|
||||||
height="56"
|
height="52"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
style="height:100px"
|
class="c-chart-brand"
|
||||||
class="c-position-absolute"
|
|
||||||
background-color="rgba(255,255,255,.1)"
|
background-color="rgba(255,255,255,.1)"
|
||||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||||
label="Friends"
|
label="Friends"
|
||||||
@@ -26,20 +25,19 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="twitter"
|
color="twitter"
|
||||||
right-header="973k"
|
right-header="973k"
|
||||||
right-footer="followers"
|
right-footer="followers"
|
||||||
left-header="1.792"
|
left-header="1.792"
|
||||||
left-footer="tweets"
|
left-footer="tweets"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialTwitter"
|
name="twitter"
|
||||||
height="56"
|
height="52"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
style="height:100px"
|
class="c-chart-brand"
|
||||||
class="c-position-absolute"
|
|
||||||
background-color="rgba(255,255,255,.1)"
|
background-color="rgba(255,255,255,.1)"
|
||||||
:data-points="[1, 13, 9, 17, 34, 41, 38]"
|
:data-points="[1, 13, 9, 17, 34, 41, 38]"
|
||||||
label="Followers"
|
label="Followers"
|
||||||
@@ -49,20 +47,19 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="linkedin"
|
color="linkedin"
|
||||||
right-header="500+"
|
right-header="500+"
|
||||||
right-footer="contracts"
|
right-footer="contracts"
|
||||||
left-header="292"
|
left-header="292"
|
||||||
left-footer="feeds"
|
left-footer="feeds"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialLinkedin"
|
name="linkedin"
|
||||||
height="56"
|
height="52"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
style="height:100px"
|
class="c-chart-brand"
|
||||||
class="c-position-absolute"
|
|
||||||
background-color="rgba(255,255,255,.1)"
|
background-color="rgba(255,255,255,.1)"
|
||||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||||
label="Contracts"
|
label="Contracts"
|
||||||
@@ -76,16 +73,15 @@
|
|||||||
right-footer="events"
|
right-footer="events"
|
||||||
left-header="4"
|
left-header="4"
|
||||||
left-footer="meetings"
|
left-footer="meetings"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="calendar"
|
name="calendar"
|
||||||
height="56"
|
height="52"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
style="height:100px"
|
class="c-chart-brand"
|
||||||
class="c-position-absolute"
|
|
||||||
background-color="rgba(255,255,255,.1)"
|
background-color="rgba(255,255,255,.1)"
|
||||||
:data-points="[35, 23, 56, 22, 97, 23, 64]"
|
:data-points="[35, 23, 56, 22, 97, 23, 64]"
|
||||||
label="Followers"
|
label="Followers"
|
||||||
@@ -97,46 +93,46 @@
|
|||||||
<template v-else>
|
<template v-else>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="facebook"
|
color="facebook"
|
||||||
right-header="89k"
|
right-header="89k"
|
||||||
right-footer="friends"
|
right-footer="friends"
|
||||||
left-header="459"
|
left-header="459"
|
||||||
left-footer="feeds"
|
left-footer="feeds"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialFacebook"
|
name="facebook"
|
||||||
height="56"
|
height="56"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
</CWidgetBrand>
|
</CWidgetBrand>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="twitter"
|
color="twitter"
|
||||||
right-header="973k"
|
right-header="973k"
|
||||||
right-footer="followers"
|
right-footer="followers"
|
||||||
left-header="1.792"
|
left-header="1.792"
|
||||||
left-footer="tweets"
|
left-footer="tweets"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialTwitter"
|
name="twitter"
|
||||||
height="56"
|
height="56"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
</CWidgetBrand>
|
</CWidgetBrand>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="linkedin"
|
color="linkedin"
|
||||||
right-header="500+"
|
right-header="500+"
|
||||||
right-footer="contracts"
|
right-footer="contracts"
|
||||||
left-header="292"
|
left-header="292"
|
||||||
left-footer="feeds"
|
left-footer="feeds"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialLinkedin"
|
name="linkedin"
|
||||||
height="56"
|
height="56"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
</CWidgetBrand>
|
</CWidgetBrand>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -146,12 +142,12 @@
|
|||||||
right-footer="events"
|
right-footer="events"
|
||||||
left-header="4"
|
left-header="4"
|
||||||
left-footer="meetings"
|
left-footer="meetings"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="calendar"
|
name="calendar"
|
||||||
height="56"
|
height="56"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
</CWidgetBrand>
|
</CWidgetBrand>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -163,7 +159,7 @@
|
|||||||
import { CChartLineSimple } from '../charts/index.js'
|
import { CChartLineSimple } from '../charts/index.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'WidgetsSocial',
|
name: 'WidgetsBrand',
|
||||||
components: {
|
components: {
|
||||||
CChartLineSimple
|
CChartLineSimple
|
||||||
},
|
},
|
||||||
@@ -172,3 +168,11 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.c-chart-brand {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,14 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown header="9.823" text="Members online">
|
<CWidgetDropdown color="primary" header="9.823" text="Members online">
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="c-float-right"
|
class="float-right"
|
||||||
variant="transparent c-p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
buttonHtml="<i class='cui-settings'></i>"
|
|
||||||
>
|
>
|
||||||
|
<template #toggler-content>
|
||||||
|
<i class="cui-settings"></i>
|
||||||
|
</template>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
@@ -18,7 +20,7 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
pointed
|
pointed
|
||||||
class="c-px-3"
|
class="px-3"
|
||||||
style="height:70px"
|
style="height:70px"
|
||||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||||
background-color="primary"
|
background-color="primary"
|
||||||
@@ -29,15 +31,18 @@
|
|||||||
</CWidgetDropdown>
|
</CWidgetDropdown>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown variant="info" header="9.823" text="Members online">
|
<CWidgetDropdown color="info" header="9.823" text="Members online">
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="c-float-right"
|
class="float-right"
|
||||||
variant="transparent c-p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
no-caret
|
:caret="false"
|
||||||
buttonHtml="<i class='cui-location-pin'></i>"
|
buttonHtml="<i class='cui-location-pin'></i>"
|
||||||
>
|
>
|
||||||
|
<template #toggler-content>
|
||||||
|
<i class="cui-location-pin"></i>
|
||||||
|
</template>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
@@ -47,7 +52,7 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
pointed
|
pointed
|
||||||
class="c-px-3"
|
class="px-3"
|
||||||
style="height:70px"
|
style="height:70px"
|
||||||
:data-points="[1, 18, 9, 17, 34, 22, 11]"
|
:data-points="[1, 18, 9, 17, 34, 22, 11]"
|
||||||
background-color="info"
|
background-color="info"
|
||||||
@@ -60,17 +65,19 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown
|
<CWidgetDropdown
|
||||||
variant="warning"
|
color="warning"
|
||||||
header="9.823"
|
header="9.823"
|
||||||
text="Members online"
|
text="Members online"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="c-float-right"
|
class="float-right"
|
||||||
variant="transparent c-p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
buttonHtml="<i class='cui-settings'></i>"
|
|
||||||
>
|
>
|
||||||
|
<template #toggler-content>
|
||||||
|
<i class="cui-settings"></i>
|
||||||
|
</template>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
@@ -92,17 +99,19 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown
|
<CWidgetDropdown
|
||||||
variant="danger"
|
color="danger"
|
||||||
header="9.823"
|
header="9.823"
|
||||||
text="Members online"
|
text="Members online"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="c-float-right"
|
class="float-right"
|
||||||
variant="transparent c-p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
buttonHtml="<i class='cui-settings'></i>"
|
|
||||||
>
|
>
|
||||||
|
<template #toggler-content>
|
||||||
|
<i class="cui-settings"></i>
|
||||||
|
</template>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
|
|||||||
@@ -0,0 +1,2 @@
|
|||||||
|
// empty custom assertion needed for git to keep track of the folder
|
||||||
|
module.exports.assertion = function () {}
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
// A custom Nightwatch assertion.
|
|
||||||
// The assertion name is the filename.
|
|
||||||
// Example usage:
|
|
||||||
//
|
|
||||||
// browser.assert.elementCount(selector, count)
|
|
||||||
//
|
|
||||||
// For more information on custom assertions see:
|
|
||||||
// http://nightwatchjs.org/guide#writing-custom-assertions
|
|
||||||
|
|
||||||
exports.assertion = function elementCount (selector, count) {
|
|
||||||
this.message = `Testing if element <${selector}> has count: ${count}`
|
|
||||||
this.expected = count
|
|
||||||
this.pass = val => val === count
|
|
||||||
this.value = res => res.value
|
|
||||||
function evaluator (_selector) {
|
|
||||||
return document.querySelectorAll(_selector).length
|
|
||||||
}
|
|
||||||
this.command = cb => this.api.execute(evaluator, [selector], cb)
|
|
||||||
}
|
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
// empty custom command needed for git to keep track of the folder
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
// empty page-object needed for git to keep track of the folder
|
||||||
+18
-76
@@ -22,83 +22,25 @@ module.exports = {
|
|||||||
|
|
||||||
browser.url(devServer).pause(500).expect.element('body').to.be.present
|
browser.url(devServer).pause(500).expect.element('body').to.be.present
|
||||||
|
|
||||||
// browser.waitForElementVisible('.app', 10000)
|
browser.waitForElementVisible('.c-app', 2000)
|
||||||
// .assert.elementPresent('.app-header')
|
.assert.elementPresent('.c-header')
|
||||||
// .assert.elementPresent('.app-header > .navbar-brand')
|
.assert.elementPresent('.c-sidebar')
|
||||||
// .assert.elementPresent('.app-body')
|
.assert.elementPresent('.c-footer')
|
||||||
// .assert.elementPresent('.app-body > .main > .breadcrumb')
|
.assert.elementPresent('.c-sidebar')
|
||||||
// .assert.elementPresent('.app-body > .main > .container-fluid > .animated')
|
.assert.elementPresent('.c-body')
|
||||||
// .assert.elementPresent('.app-body > .sidebar > .sidebar-nav')
|
|
||||||
// .assert.elementPresent('.app-body > .sidebar > .sidebar-minimizer')
|
|
||||||
// .assert.elementPresent('.app-footer')
|
|
||||||
// .assert.containsText('.app-footer > div > span', 'creativeLabs')
|
|
||||||
// .assert.containsText('.app-footer > div.ml-auto > span', 'Powered by')
|
|
||||||
// .assert.elementCount('button', 10)
|
|
||||||
// .resizeWindow(1024, 800)
|
|
||||||
// .pause(500)
|
|
||||||
|
|
||||||
// browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
|
// browser.resizeWindow(700, 800)
|
||||||
// console.log('response', typeof response)
|
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('-256px')
|
||||||
// this.assert.ok(browser === this, 'Check if the context is right.')
|
// browser.resizeWindow(1900, 800)
|
||||||
// this.assert.cssClassPresent('body', 'aside-menu-show')
|
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('0px')
|
||||||
// })
|
// browser.pause(1500)
|
||||||
//
|
// browser.click('.c-sidebar-minimizer')
|
||||||
// browser.pause(500)
|
// browser.pause(1000)
|
||||||
|
// browser.expect.element('.c-sidebar').to.have.css('width').which.equals('56px')
|
||||||
// browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
|
// browser.click('button.c-header-toggler')
|
||||||
// console.log('response', typeof response)
|
// browser.pause(1000)
|
||||||
// this.assert.cssClassNotPresent('body', 'aside-menu-show')
|
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('-256px')
|
||||||
// })
|
// browser.pause(1000)
|
||||||
//
|
|
||||||
// browser.pause(500)
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .useXpath()
|
|
||||||
// .click('/html/body/div/header/button[2]', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassNotPresent('/html/body', 'sidebar-lg-show')
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .pause(500)
|
|
||||||
// .click('/html/body/div/header/button[2]', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassPresent('/html/body', 'sidebar-lg-show')
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .pause(500)
|
|
||||||
// .click('/html/body/div/div/div/button', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassPresent('/html/body', 'sidebar-minimized')
|
|
||||||
// this.assert.cssClassPresent('/html/body', 'brand-minimized')
|
|
||||||
// })
|
|
||||||
// .pause(500)
|
|
||||||
// .click('/html/body/div/div/div/button', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassNotPresent('/html/body', 'sidebar-minimized')
|
|
||||||
// this.assert.cssClassNotPresent('/html/body', 'brand-minimized')
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .resizeWindow(800, 600)
|
|
||||||
// .pause(500)
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .pause(500)
|
|
||||||
// .click('/html/body/div/header/button[1]', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassPresent('/html/body', 'sidebar-show')
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .pause(500)
|
|
||||||
// .click('/html/body/div/div/div/nav/section/ul/li[1]/div/a', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassNotPresent('/html/body', 'sidebar-show')
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// browser.pause(5000)
|
|
||||||
|
|
||||||
browser.end()
|
browser.end()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,8 @@
|
|||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
jest: true
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'import/no-extraneous-dependencies': 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { shallowMount, createLocalVue } from '@vue/test-utils'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import App from '@/App'
|
||||||
|
|
||||||
|
const localVue = createLocalVue()
|
||||||
|
localVue.use(VueRouter)
|
||||||
|
const router = new VueRouter()
|
||||||
|
|
||||||
|
|
||||||
|
localVue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('App.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(App.name).toBe('App')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(App, {
|
||||||
|
localVue,
|
||||||
|
router
|
||||||
|
})
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is App', () => {
|
||||||
|
const wrapper = shallowMount(App, {
|
||||||
|
localVue,
|
||||||
|
router
|
||||||
|
})
|
||||||
|
expect(wrapper.is(App)).toBe(true)
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import { shallowMount, createLocalVue } from '@vue/test-utils';
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import TheContainer from '@/containers/TheContainer'
|
||||||
|
|
||||||
|
const localVue = createLocalVue()
|
||||||
|
localVue.use(VueRouter)
|
||||||
|
const router = new VueRouter()
|
||||||
|
|
||||||
|
localVue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('TheContainer.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(TheContainer.name).toBe('TheContainer')
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(TheContainer, {
|
||||||
|
localVue,
|
||||||
|
router
|
||||||
|
})
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(TheContainer, {
|
||||||
|
localVue,
|
||||||
|
router
|
||||||
|
})
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import TheFooter from '@/containers/TheFooter'
|
||||||
|
import { shallowMount } from '@vue/test-utils';
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('TheFooter.vue', () => {
|
||||||
|
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(TheFooter)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import TheHeader from '@/containers/TheHeader'
|
||||||
|
import { shallowMount } from '@vue/test-utils';
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('TheHeader.vue', () => {
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(TheHeader)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import TheHeaderDropdownAccnt from '@/containers/TheHeaderDropdownAccnt'
|
||||||
|
import { shallowMount } from '@vue/test-utils';
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('TheHeaderDropdownAccnt.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(TheHeaderDropdownAccnt.name).toBe('TheHeaderDropdownAccnt')
|
||||||
|
})
|
||||||
|
it('has a created hook', () => {
|
||||||
|
expect(typeof TheHeaderDropdownAccnt.data).toMatch('function')
|
||||||
|
})
|
||||||
|
it('sets the correct default data', () => {
|
||||||
|
expect(typeof TheHeaderDropdownAccnt.data).toMatch('function')
|
||||||
|
const defaultData = TheHeaderDropdownAccnt.data()
|
||||||
|
expect(defaultData.itemsCount).toBe(42)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(TheHeaderDropdownAccnt)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils';
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import TheSidebar from '@/containers/TheSidebar'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('TheSidebar.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(TheSidebar.name).toBe('TheSidebar')
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(TheSidebar)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TheContainer.vue renders correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="c-app"
|
||||||
|
>
|
||||||
|
<thesidebar-stub />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="c-wrapper"
|
||||||
|
>
|
||||||
|
<theheader-stub />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="c-body"
|
||||||
|
>
|
||||||
|
<main
|
||||||
|
class="c-main"
|
||||||
|
>
|
||||||
|
<ccontainer-stub
|
||||||
|
fluid="true"
|
||||||
|
>
|
||||||
|
<router-view-stub
|
||||||
|
name="fade"
|
||||||
|
/>
|
||||||
|
</ccontainer-stub>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<thefooter-stub />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TheFooter.vue renders correctly 1`] = `
|
||||||
|
<cfooter-stub
|
||||||
|
tag="footer"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href="https://coreui.io"
|
||||||
|
>
|
||||||
|
CoreUI
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-1"
|
||||||
|
>
|
||||||
|
© 2019 creativeLabs.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="ml-auto"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="mr-1"
|
||||||
|
>
|
||||||
|
Powered by
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://coreui.io"
|
||||||
|
>
|
||||||
|
CoreUI for Vue
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</cfooter-stub>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,124 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TheHeader.vue renders correctly 1`] = `
|
||||||
|
<cheader-stub
|
||||||
|
colorscheme="light"
|
||||||
|
fixed="true"
|
||||||
|
light=""
|
||||||
|
tag="header"
|
||||||
|
withsubheader="true"
|
||||||
|
>
|
||||||
|
<ctoggler-stub
|
||||||
|
class="c-header-toggler ml-3"
|
||||||
|
inheader="true"
|
||||||
|
tag="button"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<img
|
||||||
|
alt="CoreUI Logo"
|
||||||
|
class="c-header-brand mx-auto d-lg-none"
|
||||||
|
height="46"
|
||||||
|
src="img/brand/coreui-base.svg"
|
||||||
|
width="97"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cheadernav-stub
|
||||||
|
class="d-md-down-none mr-auto"
|
||||||
|
>
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="px-3"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
to="/dashboard"
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="px-3"
|
||||||
|
event="click"
|
||||||
|
exact="true"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
to="/users"
|
||||||
|
>
|
||||||
|
Users
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="px-3"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
</cheadernav-stub>
|
||||||
|
|
||||||
|
<cheadernav-stub
|
||||||
|
class="mr-4"
|
||||||
|
>
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="d-md-down-none mx-2"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-bell"
|
||||||
|
/>
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="d-md-down-none mx-2"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-list"
|
||||||
|
/>
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="d-md-down-none mx-2"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-envelope-open"
|
||||||
|
/>
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
|
||||||
|
<theheaderdropdownaccnt-stub />
|
||||||
|
</cheadernav-stub>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="c-subheader px-3"
|
||||||
|
>
|
||||||
|
<cbreadcrumbrouter-stub
|
||||||
|
class="border-0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</cheader-stub>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,251 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
|
||||||
|
<cdropdown-stub
|
||||||
|
addmenuclasses="pt-0"
|
||||||
|
caret="true"
|
||||||
|
class="c-header-nav-items"
|
||||||
|
flip="true"
|
||||||
|
nav=""
|
||||||
|
no-caret=""
|
||||||
|
placement="bottom-end"
|
||||||
|
togglertext="Dropdown"
|
||||||
|
>
|
||||||
|
|
||||||
|
<cdropdownheader-stub
|
||||||
|
class="text-center"
|
||||||
|
color="light"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<strong>
|
||||||
|
Account
|
||||||
|
</strong>
|
||||||
|
</cdropdownheader-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-bell mr-2"
|
||||||
|
/>
|
||||||
|
Updates
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="info"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-envelope-open mr-2"
|
||||||
|
/>
|
||||||
|
Messages
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="success"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-task mr-2"
|
||||||
|
/>
|
||||||
|
Tasks
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="danger"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-comment-square mr-2"
|
||||||
|
/>
|
||||||
|
Comments
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="warning"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownheader-stub
|
||||||
|
class="text-center"
|
||||||
|
color="light"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<strong>
|
||||||
|
Settings
|
||||||
|
</strong>
|
||||||
|
</cdropdownheader-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-user mr-2"
|
||||||
|
/>
|
||||||
|
Profile
|
||||||
|
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-wrench mr-2"
|
||||||
|
/>
|
||||||
|
Settings
|
||||||
|
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-dollar mr-2"
|
||||||
|
/>
|
||||||
|
Payments
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="secondary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-file mr-2"
|
||||||
|
/>
|
||||||
|
Projects
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="primary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdowndivider-stub
|
||||||
|
tag="div"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-shield mr-2"
|
||||||
|
/>
|
||||||
|
Lock Account
|
||||||
|
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-lock-locked mr-2"
|
||||||
|
/>
|
||||||
|
Logout
|
||||||
|
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
</cdropdown-stub>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TheSidebar.vue renders correctly 1`] = `
|
||||||
|
<csidebar-stub
|
||||||
|
breakpoint="lg"
|
||||||
|
colorscheme="dark"
|
||||||
|
dropdownmode="openActive"
|
||||||
|
fixed="true"
|
||||||
|
hideonmobileclick="true"
|
||||||
|
show="true"
|
||||||
|
>
|
||||||
|
<csidebarbrand-stub
|
||||||
|
fullsrc="img/brand/coreui-base-white.svg"
|
||||||
|
minimizedsrc="img/brand/coreui-signet-white.svg"
|
||||||
|
wrappedinlink="[object Object]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<crenderfunction-stub
|
||||||
|
contenttorender="CSidebarNav,CSidebarNavLink,[object Object],CSidebarNavTitle,Theme,CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavTitle,Components,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDivider,CSidebarNavTitle,Extras,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<csidebarminimizer-stub
|
||||||
|
class="d-md-down-none"
|
||||||
|
/>
|
||||||
|
</csidebar-stub>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import { CIconPlugin } from '@coreui/icons/vue'
|
||||||
|
import Dashboard from '@/views/Dashboard'
|
||||||
|
import { iconsSet } from '@/assets/icons/icons.js'
|
||||||
|
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
Vue.use(CIconPlugin, iconsSet)
|
||||||
|
|
||||||
|
describe('Dashboard.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Dashboard.name).toBe('Dashboard')
|
||||||
|
})
|
||||||
|
it('has a created hook', () => {
|
||||||
|
expect(typeof Dashboard.data).toMatch('function')
|
||||||
|
})
|
||||||
|
it('sets the correct default data', () => {
|
||||||
|
expect(typeof Dashboard.data).toMatch('function')
|
||||||
|
const defaultData = Dashboard.data()
|
||||||
|
expect(defaultData.selected).toMatch('Month')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Dashboard)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Dashboard', () => {
|
||||||
|
const wrapper = shallowMount(Dashboard)
|
||||||
|
expect(wrapper.is(Dashboard)).toBe(true)
|
||||||
|
})
|
||||||
|
it('should render correct content', () => {
|
||||||
|
const wrapper = shallowMount(Dashboard)
|
||||||
|
expect(wrapper.find('#traffic').text()).toMatch('Traffic')
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(Dashboard)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,954 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Dashboard.vue renders correctly 1`] = `
|
||||||
|
<div>
|
||||||
|
<widgetsdropdown-stub />
|
||||||
|
|
||||||
|
<ccard-stub>
|
||||||
|
<ccardbody-stub>
|
||||||
|
<crow-stub
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
sm="5"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<h4
|
||||||
|
class="card-title mb-0"
|
||||||
|
id="traffic"
|
||||||
|
>
|
||||||
|
Traffic
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="small text-muted"
|
||||||
|
>
|
||||||
|
November 2017
|
||||||
|
</div>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
class="d-none d-md-block"
|
||||||
|
sm="7"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<cbutton-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="float-right"
|
||||||
|
color="primary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-cloud-download"
|
||||||
|
/>
|
||||||
|
</cbutton-stub>
|
||||||
|
|
||||||
|
<cbuttongroup-stub
|
||||||
|
class="float-right mr-3"
|
||||||
|
>
|
||||||
|
<cbutton-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="mx-0"
|
||||||
|
color="outline-secondary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
|
||||||
|
Day
|
||||||
|
|
||||||
|
</cbutton-stub>
|
||||||
|
<cbutton-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="mx-0"
|
||||||
|
color="outline-secondary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
pressed="true"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
|
||||||
|
Month
|
||||||
|
|
||||||
|
</cbutton-stub>
|
||||||
|
<cbutton-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="mx-0"
|
||||||
|
color="outline-secondary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
|
||||||
|
Year
|
||||||
|
|
||||||
|
</cbutton-stub>
|
||||||
|
</cbuttongroup-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
|
||||||
|
<mainchartexample-stub
|
||||||
|
style="height: 300px; margin-top: 40px;"
|
||||||
|
/>
|
||||||
|
</ccardbody-stub>
|
||||||
|
|
||||||
|
<ccardfooter-stub>
|
||||||
|
<crow-stub
|
||||||
|
class="text-center"
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
class="mb-sm-2 mb-0"
|
||||||
|
md="true"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Visits
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
29.703 Users (40%)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs mt-2"
|
||||||
|
color="success"
|
||||||
|
max="100"
|
||||||
|
precision="1"
|
||||||
|
value="40"
|
||||||
|
/>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
class="mb-sm-2 mb-0 d-md-down-none"
|
||||||
|
md="true"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Unique
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
24.093 Users (20%)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs mt-2"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="1"
|
||||||
|
value="20"
|
||||||
|
/>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
class="mb-sm-2 mb-0"
|
||||||
|
md="true"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Pageviews
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
78.706 Views (60%)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs mt-2"
|
||||||
|
color="warning"
|
||||||
|
max="100"
|
||||||
|
precision="1"
|
||||||
|
value="60"
|
||||||
|
/>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
class="mb-sm-2 mb-0"
|
||||||
|
md="true"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
New Users
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
22.123 Users (80%)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs mt-2"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="1"
|
||||||
|
value="80"
|
||||||
|
/>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
class="mb-sm-2 mb-0 d-md-down-none"
|
||||||
|
md="true"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Bounce Rate
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
Average Rate (40.15%)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs mt-2"
|
||||||
|
max="100"
|
||||||
|
precision="1"
|
||||||
|
value="40"
|
||||||
|
/>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
</ccardfooter-stub>
|
||||||
|
</ccard-stub>
|
||||||
|
|
||||||
|
<widgetsbrand-stub />
|
||||||
|
|
||||||
|
<crow-stub
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
md="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<ccard-stub
|
||||||
|
bodywrapper="true"
|
||||||
|
headerhtml="Traffic & Sales"
|
||||||
|
>
|
||||||
|
<crow-stub
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
lg="6"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<crow-stub
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
sm="6"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<ccallout-stub
|
||||||
|
color="info"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
New Clients
|
||||||
|
</small>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<strong
|
||||||
|
class="h4"
|
||||||
|
>
|
||||||
|
9,123
|
||||||
|
</strong>
|
||||||
|
</ccallout-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
sm="6"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<ccallout-stub
|
||||||
|
color="danger"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Recurring Clients
|
||||||
|
</small>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<strong
|
||||||
|
class="h4"
|
||||||
|
>
|
||||||
|
22,643
|
||||||
|
</strong>
|
||||||
|
</ccallout-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
|
||||||
|
<hr
|
||||||
|
class="mt-0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Monday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="34"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="78"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Tuesday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="56"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="94"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Wednesday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="12"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="67"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Thursday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="43"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="91"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Friday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="22"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="73"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Saturday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="53"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="82"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Sunday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="9"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="69"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="legend text-center"
|
||||||
|
>
|
||||||
|
<small>
|
||||||
|
<sup>
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
color="info"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
pill="true"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
|
||||||
|
</cbadge-stub>
|
||||||
|
</sup>
|
||||||
|
|
||||||
|
New clients
|
||||||
|
|
||||||
|
|
||||||
|
<sup>
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
color="danger"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
pill="true"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
|
||||||
|
</cbadge-stub>
|
||||||
|
</sup>
|
||||||
|
|
||||||
|
Recurring clients
|
||||||
|
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
lg="6"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<crow-stub
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
sm="6"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<ccallout-stub
|
||||||
|
color="warning"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Pageviews
|
||||||
|
</small>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<strong
|
||||||
|
class="h4"
|
||||||
|
>
|
||||||
|
78,623
|
||||||
|
</strong>
|
||||||
|
</ccallout-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
sm="6"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<ccallout-stub
|
||||||
|
color="success"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Organic
|
||||||
|
</small>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<strong
|
||||||
|
class="h4"
|
||||||
|
>
|
||||||
|
49,123
|
||||||
|
</strong>
|
||||||
|
</ccallout-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
|
||||||
|
<hr
|
||||||
|
class="mt-0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ul
|
||||||
|
class="horizontal-bars type-2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-user progress-group-icon"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
Male
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
43%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="warning"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="43"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-user-female progress-group-icon"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
Female
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
37%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="warning"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="37"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-globe progress-group-icon"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
Organic Search
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
|
||||||
|
191,235
|
||||||
|
<span
|
||||||
|
class="text-muted small"
|
||||||
|
>
|
||||||
|
(56%)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="success"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="56"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<cicon-stub
|
||||||
|
class="progress-group-icon"
|
||||||
|
fonticontag="i"
|
||||||
|
height="17"
|
||||||
|
name="socialFacebook"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
Facebook
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
|
||||||
|
51,223
|
||||||
|
<span
|
||||||
|
class="text-muted small"
|
||||||
|
>
|
||||||
|
(15%)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="success"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="15"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<cicon-stub
|
||||||
|
class="progress-group-icon"
|
||||||
|
fonticontag="i"
|
||||||
|
height="17"
|
||||||
|
name="socialTwitter"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
Twitter
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
|
||||||
|
37,564
|
||||||
|
<span
|
||||||
|
class="text-muted small"
|
||||||
|
>
|
||||||
|
(11%)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="success"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="11"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<cicon-stub
|
||||||
|
class="progress-group-icon"
|
||||||
|
fonticontag="i"
|
||||||
|
height="17"
|
||||||
|
name="socialLinkedin"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
LinkedIn
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
|
||||||
|
27,319
|
||||||
|
<span
|
||||||
|
class="text-muted small"
|
||||||
|
>
|
||||||
|
(8%)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="success"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="divider text-center"
|
||||||
|
>
|
||||||
|
<cbutton-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="text-muted"
|
||||||
|
color="link"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
size="sm"
|
||||||
|
target="_self"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-options"
|
||||||
|
/>
|
||||||
|
</cbutton-stub>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<ctable-stub
|
||||||
|
class="mb-0 table-outline"
|
||||||
|
defaultsorter="[object Object]"
|
||||||
|
fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
|
||||||
|
head-color="light"
|
||||||
|
hover="true"
|
||||||
|
items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
|
||||||
|
itemsperpage="10"
|
||||||
|
no-sorting=""
|
||||||
|
responsive="true"
|
||||||
|
/>
|
||||||
|
</ccard-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount, mount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Breadcrumbs from '@/views/base/Breadcrumbs'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Breadcrumbs.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Breadcrumbs.name).toBe('Breadcrumbs')
|
||||||
|
})
|
||||||
|
it('has a created hook', () => {
|
||||||
|
expect(typeof Breadcrumbs.data).toMatch('function')
|
||||||
|
})
|
||||||
|
it('sets the correct default data', () => {
|
||||||
|
expect(typeof Breadcrumbs.data).toMatch('function')
|
||||||
|
const defaultData = Breadcrumbs.data()
|
||||||
|
expect(typeof defaultData.items).toMatch('object')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Breadcrumbs)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Breadcrumbs', () => {
|
||||||
|
const wrapper = shallowMount(Breadcrumbs)
|
||||||
|
expect(wrapper.is(Breadcrumbs)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = mount(Breadcrumbs)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount, mount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Cards from '@/views/base/Cards'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Cards.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Cards.name).toBe('Cards')
|
||||||
|
})
|
||||||
|
it('has a created hook', () => {
|
||||||
|
expect(typeof Cards.data).toMatch('function')
|
||||||
|
})
|
||||||
|
it('sets the correct default data', () => {
|
||||||
|
expect(typeof Cards.data).toMatch('function')
|
||||||
|
const defaultData = Cards.data()
|
||||||
|
expect(defaultData.show).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Cards)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Cards', () => {
|
||||||
|
const wrapper = shallowMount(Cards)
|
||||||
|
expect(wrapper.is(Cards)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = mount(Cards)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount, mount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Carousels from '@/views/base/Carousels'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Carousels.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Carousels.name).toBe('Carousels')
|
||||||
|
})
|
||||||
|
it('is Carousels', () => {
|
||||||
|
const wrapper = shallowMount(Carousels)
|
||||||
|
expect(wrapper.is(Carousels)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = mount(Carousels)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount, mount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Collapses from '@/views/base/Collapses'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Collapses.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Collapses.name).toBe('Collapses')
|
||||||
|
})
|
||||||
|
it('has a created hook', () => {
|
||||||
|
expect(typeof Collapses.data).toMatch('function')
|
||||||
|
})
|
||||||
|
it('sets the correct default data', () => {
|
||||||
|
expect(typeof Collapses.data).toMatch('function')
|
||||||
|
const defaultData = Collapses.data()
|
||||||
|
expect(defaultData.showCollapse).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Collapses)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
// it('is Collapses', () => {
|
||||||
|
// const wrapper = shallowMount(Collapses)
|
||||||
|
// expect(wrapper.is(Collapses)).toBe(true)
|
||||||
|
// })
|
||||||
|
// it('should render correct content', () => {
|
||||||
|
// const wrapper = mount(Collapses)
|
||||||
|
// expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Collapse')
|
||||||
|
// })
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = mount(Collapses)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Forms from '@/views/base/Forms'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Forms.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Forms.name).toBe('Forms')
|
||||||
|
})
|
||||||
|
it('is Forms', () => {
|
||||||
|
const wrapper = shallowMount(Forms)
|
||||||
|
expect(wrapper.is(Forms)).toBe(true)
|
||||||
|
})
|
||||||
|
// render random chackboxes
|
||||||
|
// test('renders correctly', () => {
|
||||||
|
// const wrapper = shallowMount(Forms)
|
||||||
|
// expect(wrapper.element).toMatchSnapshot()
|
||||||
|
// })
|
||||||
|
})
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Jumbotrons from '@/views/base/Jumbotrons'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Jumbotrons.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Jumbotrons.name).toBe('Jumbotrons')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Jumbotrons)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Jumbotrons', () => {
|
||||||
|
const wrapper = shallowMount(Jumbotrons)
|
||||||
|
expect(wrapper.is(Jumbotrons)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(Jumbotrons)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import ListGroups from '@/views/base/ListGroups'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('ListGroups.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(ListGroups.name).toBe('ListGroups')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(ListGroups)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is ListGroups', () => {
|
||||||
|
const wrapper = shallowMount(ListGroups)
|
||||||
|
expect(wrapper.is(ListGroups)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(ListGroups)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Navbars from '@/views/base/Navbars'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Navbars.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Navbars.name).toBe('Navbars')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Navbars)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Navbars', () => {
|
||||||
|
const wrapper = shallowMount(Navbars)
|
||||||
|
expect(wrapper.is(Navbars)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(Navbars)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user