sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: 3.0.0-alpha.5 version

Browse Source
This commit is contained in:
woothu
2019-10-21 17:06:51 +02:00
parent 847c09ddfc 307400dfa8
commit 13630a630e
164 changed files with 65142 additions and 35097 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -5,6 +5,7 @@ node_modules
/tests/e2e/reports/
selenium-debug.log
chromedriver.log
# local env files
.env.local
babel.config.js
+1 -1
View File
@@ -1,5 +1,5 @@
module.exports = {
presets: [
['@vue/app']
['@babel/preset-env']
]
}
jest.config.js
+7 -9
View File
@@ -8,24 +8,22 @@ module.exports = {
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(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: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
'<rootDir>/tests/unit/Dashboard.spec.js'
],
testMatch: ['<rootDir>/tests/unit/**/*.spec.js'],
verbose: true,
testURL: "http://localhost/",
testURL: 'http://localhost/',
collectCoverage: true,
collectCoverageFrom: [
"src/**/*.{js,vue}",
"!**/node_modules/**"
'src/**/*.{js,vue}',
'!**/node_modules/**'
],
coverageReporters: ["html", "text-summary"]
coverageReporters: ['html', 'text-summary']
}
package-lock.json
Generated
+5989 -30417
View File
File diff suppressed because it is too large Load Diff
package.json
+19 -20
View File
@@ -1,6 +1,6 @@
{
"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",
"author": "Łukasz Holeczek",
"homepage": "http://coreui.io",
@@ -14,30 +14,29 @@
"test:e2e": "vue-cli-service test:e2e"
},
"dependencies": {
"@coreui/coreui": "next",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"@coreui/coreui-vue-chartjs": "coreui/coreui-vue-chartjs",
"@coreui/coreui": "3.0.0-alpha.14",
"@coreui/coreui-chartjs": "coreui/coreui-chartjs#v2",
"@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-router": "^3.0.7"
"vue-router": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.9.2",
"@vue/cli-plugin-e2e-nightwatch": "^3.9.2",
"@vue/cli-plugin-eslint": "^3.9.2",
"@vue/cli-plugin-unit-jest": "^3.9.0",
"@vue/cli-service": "^3.9.2",
"@vue/test-utils": "^1.0.0-beta.25",
"babel-core": "^6.26.3",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-module-resolver": "^3.2.0",
"babel-preset-vue-app": "^2.0.0",
"babel-jest": "23.6.0",
"growl": "^1.10.5",
"https-proxy-agent": "^2.2.2",
"@vue/cli-plugin-babel": "^4.0.4",
"@vue/cli-plugin-e2e-nightwatch": "^4.0.4",
"@vue/cli-plugin-eslint": "^4.0.4",
"@vue/cli-plugin-unit-jest": "^4.0.4",
"@vue/cli-service": "^4.0.4",
"@vue/test-utils": "^1.0.0-beta.29",
"@babel/core": "7.6.4",
"babel-eslint": "^10.0.3",
"babel-jest": "24.9.0",
"core-js": "3.3.2",
"chromedriver": "^77.0.0",
"eslint": "^6.5.1",
"eslint-plugin-vue": "^5.2.3",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"browserslist": [
public/img/brand/coreui-base-white.svg
+24
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

public/img/brand/coreui-base.svg
+24
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

public/img/brand/coreui-signet-white.svg
+16
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/img/brand/coreui-signet.svg
+16
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/img/brand/logo.svg
-53
View File
@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

public/img/brand/sygnet.svg
-53
View File
@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

src/App.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<script>
export default {
name: 'app'
name: 'App'
}
</script>
src/assets/scss/style.scss
+3
View File
@@ -4,5 +4,8 @@
// Import styles
@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
@import "custom";
src/containers/DefaultHeaderDropdownAccnt.vue
-71
View File
@@ -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>
src/containers/DefaultContainer.vue → src/containers/TheContainer.vue
+14 -13
View File
@@ -1,18 +1,19 @@
<template>
<div class="c-app c-default-layout">
<TheHeader/>
<div class="c-app">
<TheSidebar/>
<div class="c-body">
<main class="c-main">
<CBreadcrumbRouter/>
<CContainer fluid>
<transition name="fade">
<router-view></router-view>
</transition>
</CContainer>
</main>
<div class="c-wrapper">
<TheHeader/>
<div class="c-body">
<main class="c-main">
<CContainer fluid>
<transition name="fade">
<router-view></router-view>
</transition>
</CContainer>
</main>
</div>
<TheFooter/>
</div>
<TheFooter/>
</div>
</template>
@@ -22,7 +23,7 @@ import TheHeader from './TheHeader'
import TheFooter from './TheFooter'
export default {
name: 'full',
name: 'TheContainer',
components: {
TheSidebar,
TheHeader,
src/containers/TheFooter.vue
+3 -3
View File
@@ -2,10 +2,10 @@
<CFooter>
<div>
<a href="https://coreui.io">CoreUI</a>
<span class="c-ml-1">&copy; 2018 creativeLabs.</span>
<span class="ml-1">&copy; 2019 creativeLabs.</span>
</div>
<div class="c-ml-auto">
<span class="c-mr-1">Powered by</span>
<div class="ml-auto">
<span class="mr-1">Powered by</span>
<a href="https://coreui.io">CoreUI for Vue</a>
</div>
</CFooter>
src/containers/TheHeader.vue
+33 -29
View File
@@ -1,43 +1,47 @@
<template>
<CHeader fixed>
<CSidebarToggler class="c-header-toggler c-d-lg-none"/>
<CLink class="c-header-brand" to="#">
<img class="c-navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
<!-- <img class="c-navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo"> -->
</CLink>
<CSidebarToggler class="c-header-toggler c-d-md-down-none"/>
<ul class="c-header-nav c-d-md-down-none">
<CNavItem class="c-px-3" to="/dashboard">Dashboard</CNavItem>
<CNavItem class="c-px-3" to="/users" exact>Users</CNavItem>
<CNavItem class="c-px-3">Settings</CNavItem>
</ul>
<CNav class="c-header-nav c-ml-auto">
<CNavItem class="c-d-md-down-none">
<CHeader fixed with-subheader light>
<CToggler
in-header
class="c-header-toggler ml-3"
v-c-emit-root-event:toggle-sidebar
/>
<img
class="c-header-brand mx-auto d-lg-none"
src="img/brand/coreui-base.svg"
width="97"
height="46"
alt="CoreUI Logo"
/>
<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>
<CBadge pill variant="danger">5</CBadge>
</CNavItem>
<CNavItem class="c-d-md-down-none">
</CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2">
<i class="cui-list"></i>
</CNavItem>
<CNavItem class="d-md-down-none">
<i class="cui-location-pin"></i>
</CNavItem>
<DefaultHeaderDropdownAccnt/>
</CNav>
<!-- <CSidebarToggler
class="c-header-toggler c-d-md-down-none"
aside
/> -->
</CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2">
<i class="cui-envelope-open"></i>
</CHeaderNavItem>
<TheHeaderDropdownAccnt/>
</CHeaderNav>
<div class="c-subheader px-3">
<CBreadcrumbRouter class="border-0"/>
</div>
</CHeader>
</template>
<script>
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
import TheHeaderDropdownAccnt from './TheHeaderDropdownAccnt'
export default {
name: 'TheHeader',
components: {
DefaultHeaderDropdownAccnt
TheHeaderDropdownAccnt
}
}
</script>
src/containers/TheHeaderDropdownAccnt.vue
+80
View File
@@ -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>
src/containers/TheSidebar.vue
+26 -9
View File
@@ -1,10 +1,22 @@
<template>
<CSidebar fixed>
<CSidebarHeader/>
<CSidebarForm/>
<CSidebarNav :nav-items="computedNav"/>
<CSidebarFooter/>
<CSidebarMinimizer/>
<CSidebar
fixed
:minimize="minimize"
:show="show"
>
<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>
</template>
@@ -12,10 +24,15 @@
import nav from './_nav'
export default {
name: 'TheSidebar',
computed: {
computedNav () {
return nav.items.filter(item => item.name !== 'Dashboard')
data () {
return {
minimize: false,
nav,
show: true
}
},
mounted () {
this.$root.$on('toggle-sidebar', () => this.show = !this.show)
}
}
</script>
src/containers/_nav.js
+463 -256
View File
@@ -1,264 +1,471 @@
export default {
items: [
{
name: 'Dashboard',
url: '/dashboard',
icon: 'cui-speedometer',
badge: {
variant: 'primary',
text: 'NEW'
}
},
{
title: true,
name: 'Theme',
class: '',
wrapper: {
element: '',
attributes: {}
}
},
{
name: 'Colors',
url: '/theme/colors',
icon: 'cui-drop'
},
{
name: 'Typography',
url: '/theme/typography',
icon: 'cui-pencil'
},
{
title: true,
name: 'Components',
class: '',
wrapper: {
element: '',
attributes: {}
}
},
{
name: 'Base',
url: '/base',
icon: 'cui-puzzle',
children: [
{
name: 'Breadcrumbs',
url: '/base/breadcrumbs',
icon: 'cui-puzzle'
},
{
name: 'Cards',
url: '/base/cards',
icon: 'cui-puzzle'
},
{
name: 'Carousels',
url: '/base/carousels',
icon: 'cui-puzzle'
},
{
name: 'Collapses',
url: '/base/collapses',
icon: 'cui-puzzle'
},
{
name: 'Forms',
url: '/base/forms',
icon: 'cui-puzzle'
},
{
name: 'Jumbotrons',
url: '/base/jumbotrons',
icon: 'cui-puzzle'
},
{
name: 'List Groups',
url: '/base/list-groups',
icon: 'cui-puzzle'
},
{
name: 'Navs',
url: '/base/navs',
icon: 'cui-puzzle'
},
{
name: 'Navbars',
url: '/base/navbars',
icon: 'cui-puzzle'
},
{
name: 'Paginations',
url: '/base/paginations',
icon: 'cui-puzzle'
},
{
name: 'Popovers',
url: '/base/popovers',
icon: 'cui-puzzle'
},
{
name: 'Progress Bars',
url: '/base/progress-bars',
icon: 'cui-puzzle'
},
{
name: 'Switches',
url: '/base/switches',
icon: 'cui-puzzle'
},
{
name: 'Tables',
url: '/base/tables',
icon: 'cui-puzzle'
},
{
name: 'Tabs',
url: '/base/tabs',
icon: 'cui-puzzle'
},
{
name: 'Tooltips',
url: '/base/tooltips',
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'
}
]
},
{
name: 'Charts',
url: '/charts',
icon: 'cui-pie-chart'
},
{
name: 'Icons',
url: '/icons',
icon: 'cui-star',
children: [
{
name: 'CoreUI Icons',
url: '/icons/coreui-icons',
icon: 'cui-star',
export default [
'CSidebarNav',
[
[
'CSidebarNavLink',
{
props: {
name: 'Dashboard',
to: '/dashboard',
icon: 'cui-speedometer',
badge: {
variant: 'info',
color: 'primary',
text: 'NEW'
}
},
{
name: 'Brands',
url: '/icons/brands',
icon: 'cui-star'
},
{
name: 'Flags',
url: '/icons/flags',
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'
}
]
},
{
name: 'Widgets',
url: '/widgets',
icon: 'cui-calculator',
badge: {
variant: 'primary',
text: 'NEW'
}
},
{
divider: true
},
{
title: true,
name: 'Extras'
},
{
name: 'Pages',
url: '/pages',
icon: 'cui-star',
children: [
{
name: 'Login',
url: '/pages/login',
icon: 'cui-star'
},
{
name: 'Register',
url: '/pages/register',
icon: 'cui-star'
},
{
name: 'Error 404',
url: '/pages/404',
icon: 'cui-star'
},
{
name: 'Error 500',
url: '/pages/500',
icon: 'cui-star'
],
[
'CSidebarNavTitle',
['Theme']
],
[
'CSidebarNavLink',
{
props: {
name: 'Colors',
to: '/theme/colors',
icon: 'cui-drop'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Typography',
to: '/theme/typography',
icon: 'cui-pencil'
}
}
],
[
'CSidebarNavTitle',
['Components']
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Base',
route: '/base',
icon: 'cui-puzzle',
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'Breadcrumbs',
to: '/base/breadcrumbs',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Cards',
to: '/base/cards',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Carousels',
to: '/base/carousels',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Collapses',
to: '/base/collapses',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Forms',
to: '/base/forms',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Jumbotrons',
to: '/base/jumbotrons',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'List Groups',
to: '/base/list-groups',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Navs',
to: '/base/navs',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Navbars',
to: '/base/navbars',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Paginations',
to: '/base/paginations',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Popovers',
to: '/base/popovers',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Progress Bars',
to: '/base/progress-bars',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Switches',
to: '/base/switches',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Tables',
to: '/base/tables',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Tabs',
to: '/base/tabs',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Tooltips',
to: '/base/tooltips',
icon: 'cui-puzzle'
}
}
]
]
},
{
name: 'Download CoreUI',
url: 'http://coreui.io/vue/',
icon: 'cui-cloud-download',
class: 'mt-auto',
variant: 'success'
},
{
name: 'Try CoreUI PRO',
url: 'http://coreui.io/pro/vue/',
icon: 'cui-layers',
variant: 'danger'
}
],
[
'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',
to: '/charts',
icon: 'cui-pie-chart'
}
}
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Icons',
route: '/icons',
icon: 'cui-star',
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'CoreUI Icons',
to: '/icons/coreui-icons',
icon: 'cui-star',
badge: {
color: 'info',
text: 'NEW'
}
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Brands',
to: '/icons/brands',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Flags',
to: '/icons/flags',
icon: 'cui-star'
}
}
]
]
],
[
'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',
to: '/widgets',
icon: 'cui-calculator',
badge: {
color: 'primary',
text: 'NEW',
pill: true
}
}
}
],
[
'CSidebarNavDivider',
],
[
'CSidebarNavTitle',
['Extras']
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Pages',
route: '/pages',
icon: 'cui-star',
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'Login',
to: '/pages/login',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Register',
to: '/pages/register',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Error 404',
to: '/pages/404',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Error 500',
to: '/pages/500',
icon: 'cui-star'
}
}
]
]
],
[
'CSidebarNavLink',
{
props: {
name: 'Download CoreUI',
href: 'http://coreui.io/vue/',
icon: 'cui-cloud-download',
addLinkClasses: 'c-nav-link-success',
target: '_blank'
},
attrs: {
class: 'mt-auto',
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Try CoreUI PRO',
href: 'http://coreui.io/pro/vue/',
icon: 'cui-layers',
addLinkClasses: 'c-nav-link-danger',
target: '_blank'
}
}
]
]
}
]
src/router/index.js
+11 -6
View File
@@ -2,7 +2,7 @@ import Vue from 'vue'
import Router from 'vue-router'
// Containers
const DefaultContainer = () => import('@/containers/DefaultContainer')
const TheContainer = () => import('@/containers/TheContainer')
// Views
const Dashboard = () => import('@/views/Dashboard')
@@ -10,7 +10,7 @@ const Dashboard = () => import('@/views/Dashboard')
const Colors = () => import('@/views/theme/Colors')
const Typography = () => import('@/views/theme/Typography')
const Charts = () => import('@/views/Charts')
const Charts = () => import('@/views/charts/Charts')
const Widgets = () => import('@/views/widgets/Widgets')
// Views - Components
@@ -61,14 +61,18 @@ Vue.use(Router)
export default new Router({
mode: 'hash', // https://router.vuejs.org/api/#mode
linkActiveClass: 'c-active',
linkActiveClass: 'active',
scrollBehavior: () => ({ y: 0 }),
routes: [
routes: configRoutes()
})
function configRoutes () {
return [
{
path: '/',
redirect: '/dashboard',
name: 'Home',
component: DefaultContainer,
component: TheContainer,
children: [
{
path: 'dashboard',
@@ -327,4 +331,5 @@ export default new Router({
]
}
]
})
}
src/views/Dashboard.vue
+180 -189
View File
@@ -5,19 +5,19 @@
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" class="c-card-title c-mb-0">Traffic</h4>
<div class="c-small c-text-muted">November 2017</div>
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
<div class="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" class="c-d-none c-d-md-block">
<CButton variant="primary" class="c-float-right">
<CCol sm="7" class="d-none d-md-block">
<CButton color="primary" class="float-right">
<i class="cui-cloud-download"></i>
</CButton>
<CButtonGroup class="c-float-right c-mr-3">
<CButtonGroup class="float-right mr-3">
<CButton
variant="outline-secondary"
color="outline-secondary"
v-for="(value, key) in ['Day', 'Month', 'Year']"
:key="key"
class="c-mx-0"
class="mx-0"
:pressed="value === selected ? true : false"
@click="selected = value"
>
@@ -29,52 +29,52 @@
<MainChartExample style="height:300px;margin-top:40px;"/>
</CCardBody>
<CCardFooter>
<CRow class="c-text-center">
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
<div class="c-text-muted">Visits</div>
<CRow class="text-center">
<CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<CProgress
class="c-progress-xs c-mt-2"
class="progress-xs mt-2"
:precision="1"
variant="success"
color="success"
:value="40"
/>
</CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
<div class="c-text-muted">Unique</div>
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
<div class="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<CProgress
class="c-progress-xs c-mt-2"
class="progress-xs mt-2"
:precision="1"
variant="info"
color="info"
:value="20"
/>
</CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
<div class="c-text-muted">Pageviews</div>
<CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<CProgress
class="c-progress-xs c-mt-2"
class="progress-xs mt-2"
:precision="1"
variant="warning"
color="warning"
:value="60"
/>
</CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
<div class="c-text-muted">New Users</div>
<CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<CProgress
class="c-progress-xs c-mt-2"
class="progress-xs mt-2"
:precision="1"
variant="danger"
color="danger"
:value="80"
/>
</CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
<div class="c-text-muted">Bounce Rate</div>
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
<div class="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<CProgress
class="c-progress-xs c-mt-2"
class="progress-xs mt-2"
:precision="1"
:value="40"
/>
@@ -90,158 +90,158 @@
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<CCallout variant="info">
<small class="c-text-muted">New Clients</small><br>
<strong class="c-h4">9,123</strong>
<CCallout color="info">
<small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout variant="danger">
<small class="c-text-muted">Recurring Clients</small><br>
<strong class="c-h4">22,643</strong>
<CCallout color="danger">
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
</CCallout>
</CCol>
</CRow>
<hr class="c-mt-0">
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<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="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
variant="info"
class="progress-xs"
color="info"
:value="34"
/>
<CProgress
class="c-progress-xs"
variant="danger"
class="progress-xs"
color="danger"
:value="78"
/>
</div>
</div>
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Tuesday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="56"
variant="info"
color="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="94"
variant="danger"
color="danger"
/>
</div>
</div>
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Wednesday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="12"
variant="info"
color="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="67"
variant="danger"
color="danger"
/>
</div>
</div>
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Thursday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="43"
variant="info"
color="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="91"
variant="danger"
color="danger"
/>
</div>
</div>
<div class="c-progress-group mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Friday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="22"
variant="info"
color="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="73"
variant="danger"
color="danger"
/>
</div>
</div>
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Saturday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="53"
variant="info"
color="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="82"
variant="danger"
color="danger"
/>
</div>
</div>
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Sunday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="9"
variant="info"
color="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="69"
variant="danger"
color="danger"
/>
</div>
</div>
<div class="c-legend c-text-center">
<div class="legend text-center">
<small>
<sup><CBadge pill variant="info">&nbsp;</CBadge></sup>
<sup><CBadge pill color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;&nbsp;
<sup><CBadge pill variant="danger">&nbsp;</CBadge></sup>
<sup><CBadge pill color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
@@ -249,126 +249,126 @@
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<CCallout variant="warning">
<small class="c-text-muted">Pageviews</small><br>
<strong class="c-h4">78,623</strong>
<CCallout color="warning">
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout variant="success">
<small class="c-text-muted">Organic</small><br>
<strong class="c-h4">49,123</strong>
<CCallout color="success">
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
</CCallout>
</CCol>
</CRow>
<hr class="c-mt-0">
<ul class="c-horizontal-bars c-type-2">
<div class="c-progress-group">
<div class="c-progress-group-header">
<i class="cui-user c-progress-group-icon"></i>
<span class="c-title">Male</span>
<span class="c-ml-auto c-font-weight-bold">43%</span>
<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"></i>
<span class="title">Male</span>
<span class="ml-auto font-weight-bold">43%</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="43"
variant="warning"
color="warning"
/>
</div>
</div>
<div class="c-progress-group c-mb-5">
<div class="c-progress-group-header">
<i class="cui-user-female c-progress-group-icon"></i>
<span class="c-title">Female</span>
<span class="c-ml-auto c-font-weight-bold">37%</span>
<div class="progress-group mb-5">
<div class="progress-group-header">
<i class="cui-user-female progress-group-icon"></i>
<span class="title">Female</span>
<span class="ml-auto font-weight-bold">37%</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="37"
variant="warning"
color="warning"
/>
</div>
</div>
<div class="c-progress-group">
<div class="c-progress-group-header">
<i class="cui-globe c-progress-group-icon"></i>
<span class="c-title">Organic Search</span>
<span class="c-ml-auto c-font-weight-bold">
<div class="progress-group">
<div class="progress-group-header">
<i class="cui-globe progress-group-icon"></i>
<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="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="56"
variant="success"
color="success"
/>
</div>
</div>
<div class="c-progress-group">
<div class="c-progress-group-header">
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="socialFacebook"
height="17"
class="c-progress-group-icon"
class="progress-group-icon"
/>
<span class="c-title">Facebook</span>
<span class="c-ml-auto c-font-weight-bold">
51,223 <span class="c-text-muted small">(15%)</span>
<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="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="15"
variant="success"
color="success"
/>
</div>
</div>
<div class="c-progress-group">
<div class="c-progress-group-header">
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="socialTwitter"
height="17"
class="c-progress-group-icon"
class="progress-group-icon"
/>
<span class="c-title">Twitter</span>
<span class="c-ml-auto c-font-weight-bold">
37,564 <span class="c-text-muted c-small">(11%)</span>
<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="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="11"
variant="success"
color="success"
/>
</div>
</div>
<div class="c-progress-group">
<div class="c-progress-group-header">
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="socialLinkedin"
height="17"
class="c-progress-group-icon"
class="progress-group-icon"
/>
<span class="c-title">LinkedIn</span>
<span class="c-ml-auto c-font-weight-bold">
27,319 <span class="c-text-muted small">&nbsp;(8%)</span>
<span class="title">LinkedIn</span>
<span class="ml-auto font-weight-bold">
27,319 <span class="text-muted small">&nbsp;(8%)</span>
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="8"
variant="success"
color="success"
/>
</div>
</div>
<div class="c-divider c-text-center">
<CButton variant="link" size="sm" class="c-text-muted">
<div class="divider text-center">
<CButton color="link" size="sm" class="text-muted">
<i class="cui-options"></i>
</CButton>
</div>
@@ -377,25 +377,25 @@
</CRow>
<br/>
<CTable
class="c-mb-0 c-table-outline"
class="mb-0 table-outline"
hover
:items="tableItems"
:fields="tableFields"
head-variant="light"
head-color="light"
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">
<img :src="item.avatar.url" class="c-img-avatar" alt="">
<img :src="item.avatar.url" class="c-avatar-img" alt="">
<span
class="c-avatar-status"
:class="`c-bg-${item.avatar.status || 'secondary'}`"
:class="`bg-${item.avatar.status || 'secondary'}`"
></span>
</div>
</td>
<td slot="user" slot-scope="{item}">
<div>{{item.user.name}}</div>
<div class="c-small c-text-muted">
<div class="small text-muted">
<span>
<template v-if="item.user.new">New</template>
<template v-else>Recurring</template>
@@ -405,7 +405,7 @@
<td
slot="country"
slot-scope="{item}"
class="c-text-center"
class="text-center"
>
<CIcon
:name="item.country.flag"
@@ -413,24 +413,24 @@
/>
</td>
<td slot="usage" slot-scope="{item}">
<div class="c-clearfix">
<div class="c-float-left">
<div class="clearfix">
<div class="float-left">
<strong>{{item.usage.value}}%</strong>
</div>
<div class="c-float-right">
<small class="c-text-muted">{{item.usage.period}}</small>
<div class="float-right">
<small class="text-muted">{{item.usage.period}}</small>
</div>
</div>
<CProgress
class="c-progress-xs"
class="progress-xs"
v-model="item.usage.value"
:variant="variant(item.usage.value)"
:color="color(item.usage.value)"
/>
</td>
<td
slot="payment"
slot-scope="{item}"
class="c-text-center"
class="text-center"
>
<CIcon
:name="item.payment.icon"
@@ -438,7 +438,7 @@
/>
</td>
<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>
</td>
</CTable>
@@ -452,15 +452,13 @@
import MainChartExample from './charts/MainChartExample'
import WidgetsDropdown from './widgets/WidgetsDropdown'
import WidgetsBrand from './widgets/WidgetsBrand'
import CChartLineSimple from './charts/CChartLineSimple'
export default {
name: 'Dashboard',
components: {
MainChartExample,
WidgetsDropdown,
WidgetsBrand,
CChartLineSimple
WidgetsBrand
},
data () {
return {
@@ -516,36 +514,29 @@ export default {
}
],
tableFields: [
{ key: 'avatar', label: '', _classes: 'c-text-center' },
{ key: 'avatar', label: '', _classes: 'text-center' },
{ key: 'user' },
{ key: 'country', _classes: 'c-text-center' },
{ key: 'country', _classes: 'text-center' },
{ key: 'usage' },
{ key: 'payment', label: 'Payment method', _classes: 'c-text-center' },
{ key: 'payment', label: 'Payment method', _classes: 'text-center' },
{ key: 'activity' },
]
}
},
methods: {
variant (value) {
let $variant
color (value) {
let $color
if (value <= 25) {
$variant = 'info'
$color = 'info'
} else if (value > 25 && value <= 50) {
$variant = 'success'
$color = 'success'
} else if (value > 50 && value <= 75) {
$variant = 'warning'
$color = 'warning'
} else if (value > 75 && value <= 100) {
$variant = 'danger'
$color = 'danger'
}
return $variant
return $color
}
}
}
</script>
<style>
/* IE fix */
#card-chart-01, #card-chart-02 {
width: 100% !important;
}
</style>
src/views/base/Breadcrumbs.vue
+81 -59
View File
@@ -1,74 +1,96 @@
<template>
<div class="c-wrapper">
<div>
<CRow>
<CCol col>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<CBreadcrumb :items="items" add-link-classes="sss" last-item-classes="aaa"/>
<CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
<CRow>
<CCol col>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions">
<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>
</a>
</div>
</CCardHeader>
<CCardBody>
<CBreadcrumb :items="items"/>
<CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'breadcrumbs',
name: 'Breadcrumbs',
data () {
return {
items: [{
textHtml: '<b>Admin</b>',
href: '#'
}, {
textHtml: 'Manage',
href: '#'
}, {
textHtml: 'Library'
}],
items: [
{
text: '<b>Admin</b>',
href: '#'
},
{
text: 'Manage',
href: '#'
},
{
text: 'Library'
}
],
items2: [{
textHtml: 'Go to dashboard',
to: '/dashboard'
}, {
textHtml: 'Go to widgets',
to: '/Widgets'
}, {
textHtml: 'Go to Google',
href: 'http://google.com'
},{
textHtml: 'Current page'
}],
items2: [
{
text: 'Go to dashboard',
to: '/dashboard'
},
{
text: 'Go to widgets',
to: '/Widgets'
},
{
text: 'Go to Google',
href: 'http://google.com'
},
{
text: 'Current page'
}
],
items3: [{
textHtml: 'Link',
to: '#2',
activeClass: 'c-bg-info c-p-1'
}, {
textHtml: 'Active',
to: '#3',
activeClass: 'c-bg-warning c-p-1',
addLinkClasses: 'c-bg-info c-p-1'
},{
textHtml: 'Classes',
to: '#4',
activeClass: 'c-bg-danger c-p-1',
}]
items3: [
{
text: 'Added',
to: '#2',
addClasses: 'font-xl'
},
{
text: 'Custom',
to: '#3',
addClasses: 'font-xl'
},
{
text: 'Classes',
to: '#4',
addClasses: 'font-xl text-danger'
}
]
}
}
}
</script>
<style>
.breadcrumb-item + .font-xl.breadcrumb-item::before {
color: rgb(140, 195, 38);
content: '>>';
padding: 0px 10px;
}
</style>
src/views/base/Cards.vue
+78 -88
View File
@@ -2,7 +2,24 @@
<div>
<CRow>
<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 sm="6" md="4">
<CCard footer-html="Card Footer" :body-html="loremIpsum" />
@@ -18,17 +35,17 @@
<CCardHeader>
Card with switch
<CSwitch
class="c-float-right"
class="float-right"
size="sm"
shape="pill"
variant="info"
color="info"
data-on="On"
data-off="Off"
:checked="true"
/>
</CCardHeader>
<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>
</CCard>
</CCol>
@@ -36,10 +53,10 @@
<CCard>
<CCardHeader>
Card with label
<CBadge variant="success" class="c-float-right">Success</CBadge>
<CBadge color="success" class="float-right">Success</CBadge>
</CCardHeader>
<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>
</CCard>
</CCol>
@@ -47,9 +64,11 @@
<CCard>
<CCardHeader>
Card with label
<CBadge pill variant="danger" class="c-float-right">42</CBadge>
<CBadge pill color="danger" class="float-right">42</CBadge>
</CCardHeader>
<CCardBody :body-html="loremIpsum"/>
<CCardBody>
{{loremIpsum}}
</CCardBody>
</CCard>
</CCol>
</CRow>
@@ -57,79 +76,79 @@
<CCol sm="6" md="4">
<CCard
header="Card outline primary"
border-variant="primary"
border-color="primary"
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline secondary"
border-variant="secondary"
border-color="secondary"
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline success"
border-variant="success"
border-color="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>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card outline info" border-variant="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.
<CCard header-html="Card outline info" border-color="info" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card outline warning" border-variant="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.
<CCard header-html="Card outline warning" border-color="warning" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card outline danger" border-variant="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.
<CCard header-html="Card outline danger" border-color="danger" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard class="c-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.
<CCard class="card-accent-primary" header="Card with primary accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-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.
<CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-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.
<CCard class="card-accent-success" header="Card with success accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-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.
<CCard class="card-accent-info" header="Card with info accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-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.
<CCard class="card-accent-warning" header="Card with warning accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-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.
<CCard class="card-accent-danger" header="Card with danger accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard class="c-bg-primary c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-primary text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -138,8 +157,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-success c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-success text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -148,8 +167,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-info c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-info text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -158,8 +177,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-warning c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-warning text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -168,8 +187,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-danger c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-danger text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -178,8 +197,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-secondary c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-secondary text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -190,79 +209,63 @@
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="c-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.
<CCard header-html="Card title" class="bg-primary" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="c-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.
<CCard header-html="Card title" class="bg-success" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="c-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.
<CCard header-html="Card title" class="bg-info" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="c-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.
<CCard header-html="Card title" class="bg-warning" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="c-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.
<CCard header-html="Card title" class="bg-danger" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<transition name="fade">
<CCard class="c-bg-secondary" v-if="show" >
<CCard class="bg-secondary" v-if="show">
<CCardHeader>
Card with header actions
<div class="c-card-header-actions">
<CLink href="#" class="c-card-header-action btn-setting" >
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
<i class="cui-settings"></i>
</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>
</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>
</CLink>
</div>
</CCardHeader>
<CCollapse :show="isCollapsed" :duration="400">
<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>
</CCollapse>
</CCard>
</transition>
</CCol>
</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>
</template>
<script>
export default {
name: 'cards',
name: 'Cards',
data: function () {
return {
show: true,
@@ -272,16 +275,3 @@ export default {
}
}
</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>
src/views/base/Carousels.vue
+44 -48
View File
@@ -1,54 +1,50 @@
<template functional>
<div class="c-wrapper">
<div>
<CRow>
<CCol md="12" lg="9" >
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Carousel</strong>
<!-- <div class="card-header-actions">
<a
href="https://bootstrap-vue.js.org/docs/components/carousel"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<CCarousel
arrows
indicators
animate
height="400px"
>
<CCarouselItem
caption="First Slide"
image="https://lorempixel.com/1024/480/technics/2/"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
caption="Blank page"
:image="{ blankColor: 'grey' }"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
image="https://lorempixel.com/1024/480/technics/8/"
/>
</CCarousel>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
<template>
<CRow>
<CCol md="12" lg="7">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Carousel</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Carousel"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CCarousel
arrows
indicators
animate
height="400px"
>
<CCarouselItem
captionHeader="First Slide"
image="https://lorempixel.com/1024/480/technics/2/"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
captionHeader="Blank page"
:image="{ blankColor: 'grey' }"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
image="https://lorempixel.com/1024/480/technics/8/"
/>
</CCarousel>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'carousels'
name: 'Carousels'
}
</script>
src/views/base/Collapses.vue
+35 -34
View File
@@ -1,44 +1,45 @@
<template>
<div class="c-wrapper">
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Collapse </strong>
<!-- <div class="card-header-actions">
<CLink class="card-header-action">
<small class="text-muted">docs</small>
</CLink>
</div> -->
</CCardHeader>
<CCardBody>
<CButton id="collapse1" variant="primary">
Toggle Collapse
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Collapse </strong>
<div class="card-header-actions">
<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>
</a>
</div>
</CCardHeader>
<CCardBody>
<CButton id="collapse1" color="primary">
Toggle Collapse
</CButton>
<CCollapse toggler="collapse1" class="mt-2">
<CCard body-wrapper>
<p class="card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm" color="secondary">
Toggle Inner Collapse
</CButton>
<CCollapse toggler="collapse1" class="c-mt-2">
<CCard body-wrapper>
<p class="c-card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm">
Toggle Inner Collapse
</CButton>
<CCollapse toggler="collapse2" class="c-mt-2">
<CCard body-wrapper>Hello!</CCard>
</CCollapse>
</CCard>
<CCollapse toggler="collapse2" class="mt-2">
<CCard body-wrapper>Hello!</CCard>
</CCollapse>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
</CCard>
</CCollapse>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'collapses',
name: 'Collapses',
data () {
return {
showCollapse: true,
src/views/base/Forms.vue
+181 -178
View File
@@ -5,11 +5,21 @@
<CCard>
<CCardHeader>
<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>
<CCardBody>
<CRow>
<CCol sm="12">
<CFormInput
<CInput
label="Name"
placeholder="Enter your name"
/>
@@ -17,7 +27,7 @@
</CRow>
<CRow>
<CCol sm="12">
<CFormInput
<CInput
label="Credit Card Number"
placeholder="0000 0000 0000 0000"
/>
@@ -25,19 +35,19 @@
</CRow>
<CRow>
<CCol sm="4">
<CFormSelect
<CSelect
label="Month"
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
/>
</CCol>
<CCol sm="4">
<CFormSelect
<CSelect
label="Year"
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
/>
</CCol>
<CCol sm="4">
<CFormInput
<CInput
label="CVV/CVC"
placeholder="123"
/>
@@ -52,33 +62,33 @@
<strong>Company </strong><small>Form</small>
</CCardHeader>
<CCardBody>
<CFormInput
<CInput
label="Company"
placeholder="Enter your company name"
/>
<CFormInput
<CInput
label="VAT"
placeholder="PL1234567890"
/>
<CFormInput
<CInput
label="Street"
placeholder="Enter street name"
/>
<CRow>
<CCol sm="8">
<CFormInput
<CInput
label="City"
placeholder="Enter your city"
/>
</CCol>
<CCol sm="4">
<CFormInput
<CInput
label="Postal code"
placeholder="Postal code"
/>
</CCol>
</CRow>
<CFormInput
<CInput
label="Country"
placeholder="Country name"
/>
@@ -94,30 +104,30 @@
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
<CInput
description="Let us know your full name."
label="Enter your name"
horizontal
autocomplete="name"
/>
<CFormInput
<CInput
label="Static"
value="Username"
horizontal
plaintext
/>
<CFormInput
<CInput
label="Text input"
description="This is a help text"
placeholder="Text"
horizontal
/>
<CFormInput
<CInput
label="Date"
type="date"
horizontal
/>
<CFormInput
<CInput
label="Email input"
description="Please enter your email"
placeholder="Enter your email"
@@ -125,7 +135,7 @@
horizontal
autocomplete="email"
/>
<CFormInput
<CInput
label="Password Input"
description="Please enter a complex password"
placeholder="Enter your password"
@@ -133,26 +143,26 @@
horizontal
autocomplete="current-password"
/>
<CFormInput
<CInput
label="Disabled Input"
placeholder="Disabled"
horizontal
disabled
/>
<CFormInput
<CInput
label="Textarea"
placeholder="Content..."
horizontal
textarea="true"
rows="9"
/>
<CFormSelect
<CSelect
label="Select"
horizontal
:options="options"
placeholder="Please select"
/>
<CFormSelect
<CSelect
label="Large select"
size="lg"
horizontal
@@ -160,14 +170,14 @@
:options="selectOptions"
placeholder="Please select"
/>
<CFormSelect
<CSelect
label="Small select"
size="sm"
horizontal
:options="options"
placeholder="Please select"
/>
<CFormSelect
<CSelect
label="Select"
horizontal
:options="options"
@@ -175,12 +185,12 @@
disabled
/>
<template v-for="(name, key) in checkboxNames">
<div class="c-form-group c-form-row" :key="name">
<CCol tag="label" sm="3" class="c-col-form-label">
<div class="form-group form-row" :key="name">
<CCol tag="label" sm="3" class="col-form-label">
{{name}}
</CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
<CFormCheckbox
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CInputCheckbox
v-for="option in options"
:key="option"
:label="option"
@@ -194,40 +204,40 @@
</div>
</template>
<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">
{{name}}
</CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
<CFormRadio
v-for="option in options"
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CInputRadio
v-for="(option, optionIndex) in options"
:key="option"
:label="option"
type="radio"
:value="option"
:custom="key > 1"
:name="`Option 1${key}`"
checked="Option 1"
:checked="optionIndex === key"
:inline="key % 2 === 1"
/>
</CCol>
</div>
</template>
<CFormFile
<CInputFile
label="File input"
horizontal
/>
<CFormFile
<CInputFile
label="Multiple file input"
horizontal
multiple
/>
<CFormFile
<CInputFile
label="File custom input"
horizontal
custom
/>
<CFormFile
<CInputFile
label="Multiple file custom input"
horizontal
multiple
@@ -236,8 +246,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="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="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -248,27 +258,27 @@
<CCardBody>
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
<CForm inline>
<CFormInput
class="c-mr-2"
<CInput
class="mr-2"
placeholder="Jane Doe"
>
<template #label>
<small>Name:&nbsp;</small>
</template>
</CFormInput>
<CFormInput
</CInput>
<CInput
placeholder="jane.doe@example.com"
autocomplete="email"
>
<template #label>
<small>Email:&nbsp;</small>
</template>
</CFormInput>
</CInput>
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="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="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -279,7 +289,7 @@
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
<CInput
type="email"
description="Please enter your email."
autocomplete="email"
@@ -287,7 +297,7 @@
horizontal
placeholder="Enter Email..."
/>
<CFormInput
<CInput
type="password"
description="Please enter your password."
autocomplete="current-password"
@@ -298,8 +308,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="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="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -308,7 +318,7 @@
</CCardHeader>
<CForm novalidate>
<CCardBody>
<CFormInput
<CInput
type="email"
description="Please enter your email."
autocomplete="email"
@@ -317,7 +327,7 @@
required
was-validated
/>
<CFormInput
<CInput
type="password"
description="Please enter your password."
autocomplete="current-password"
@@ -328,8 +338,8 @@
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="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="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CForm>
</CCard>
@@ -338,60 +348,60 @@
Input <strong>Grid</strong>
</CCardHeader>
<CCardBody>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="3">
<CFormInput class="c-mb-0" placeholder=".col-sm-3"/>
<CInput class="mb-0" placeholder=".col-sm-3"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="4">
<CFormInput class="c-mb-0" placeholder=".col-sm-4"/>
<CInput class="mb-0" placeholder=".col-sm-4"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="5">
<CFormInput class="c-mb-0" placeholder=".col-sm-5"/>
<CInput class="mb-0" placeholder=".col-sm-5"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="6">
<CFormInput class="c-mb-0" placeholder=".col-sm-6"/>
<CInput class="mb-0" placeholder=".col-sm-6"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="7">
<CFormInput class="c-mb-0" placeholder=".col-sm-7"/>
<CInput class="mb-0" placeholder=".col-sm-7"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="8">
<CFormInput class="c-mb-0" placeholder=".col-sm-8"/>
<CInput class="mb-0" placeholder=".col-sm-8"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="9">
<CFormInput class="c-mb-0" placeholder=".col-sm-9"/>
<CInput class="mb-0" placeholder=".col-sm-9"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="10">
<CFormInput class="c-mb-0" placeholder=".col-sm-10"/>
<CInput class="mb-0" placeholder=".col-sm-10"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="11">
<CFormInput class="c-mb-0" placeholder=".col-sm-11"/>
<CInput class="mb-0" placeholder=".col-sm-11"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="12">
<CFormInput class="c-mb-0" placeholder=".col-sm-12"/>
<CInput class="mb-0" placeholder=".col-sm-12"/>
</CCol>
</CRow>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="cui-user"></i> Login</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><i class="cui-user"></i> Login</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -399,18 +409,18 @@
Input <strong>Sizes</strong>
</CCardHeader>
<CCardBody>
<CFormInput
<CInput
label="Small input"
size="sm"
horizontal
placeholder="size='sm'"
/>
<CFormInput
<CInput
label="Default input"
horizontal
placeholder="normal"
/>
<CFormInput
<CInput
label="Large input"
size="lg"
horizontal
@@ -418,8 +428,8 @@
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="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="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -433,11 +443,11 @@
</CCardHeader>
<CCardBody>
<CForm validated novalidate>
<CFormInput
<CInput
label="Input is valid"
valid-feedback="Input is not required."
/>
<CFormInput
<CInput
label="Input is invalid"
required
valid-feedback="Thank you :)"
@@ -454,14 +464,14 @@
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
<CInput
label="Input is valid"
valid-feedback="Input is valid."
invalid-feedback="Please provide at least 4 characters."
value="Valid value"
:is-valid="validator"
/>
<CFormInput
<CInput
label="Input is invalid"
valid-feedback="Thank you :)"
invalid-feedback="Please provide at least 4 characters."
@@ -479,25 +489,25 @@
<strong>Icon/Text</strong> Groups
</CCardHeader>
<CCardBody>
<CFormInput
<CInput
placeholder="Username"
prependHtml="<i class='cui-user'></i>"
/>
<CFormInput
<CInput
type="email"
placeholder="Email"
autocomplete="email"
append-html="<i class='cui-envelope-open'></i>"
/>
<CFormInput
<CInput
prependHtml="<i class='cui-euro'></i>"
placeholder="ex. $1.000.000"
append-html=".00"
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="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="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -507,38 +517,38 @@
<strong>Buttons</strong> Groups
</CCardHeader>
<CCardBody>
<CFormInput placeholder="Username">
<CInput placeholder="Username">
<template #prepend>
<CButton variant="primary">
<CButton color="primary">
<i class="cui-magnifying-glass"></i> Search
</CButton>
</template>
</CFormInput>
<CFormInput
</CInput>
<CInput
type="email"
placeholder="Email"
autocomplete="email"
>
<template #append>
<CButton type="submit" variant="primary">Submit</CButton>
<CButton type="submit" color="primary">Submit</CButton>
</template>
</CFormInput>
<CFormInput
</CInput>
<CInput
type="email"
placeholder="Email"
autocomplete="email"
>
<template #prepend>
<CButton variant="primary"><CIcon name="facebook" height="14"/></CButton>
<CButton color="primary"><CIcon name="facebook" height="14"/></CButton>
</template>
<template #append>
<CButton variant="primary"><CIcon name="twitter" height="14"/></CButton>
<CButton color="primary"><CIcon name="twitter" height="14"/></CButton>
</template>
</CFormInput>
</CInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="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="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -548,11 +558,11 @@
<strong>Dropdowns</strong> Groups
</CCardHeader>
<CCardBody>
<CFormInput placeholder="Username">
<CInput placeholder="Username">
<template #prepend>
<CDropdown
button-html="Action"
variant="primary"
togglerText="Action"
color="primary"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -560,16 +570,16 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
</CFormInput>
<CFormInput
</CInput>
<CInput
type="email"
placeholder="Email"
autocomplete="email"
>
<template #append>
<CDropdown
button-html="Action"
variant="primary"
togglerText="Action"
color="primary"
right
>
<CDropdownItem>Action</CDropdownItem>
@@ -578,13 +588,13 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
</CFormInput>
<CFormInput placeholder="...">
</CInput>
<CInput placeholder="...">
<template #prepend>
<CDropdown
button-html="Split"
variant="primary"
togglerText="Split"
color="primary"
split
>
<CDropdownItem href="#">Action</CDropdownItem>
@@ -596,8 +606,8 @@
<template #append>
<CDropdown
button-html="Action"
variant="primary"
togglerText="Action"
color="primary"
right
>
<CDropdownItem>Action</CDropdownItem>
@@ -607,11 +617,11 @@
</CDropdown>
</template>
</CFormInput>
</CInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="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="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -624,24 +634,24 @@
</CCardHeader>
<CCardBody>
<CRow
class="c-form-group"
class="form-group"
v-for="(number, key) in [4,5,6,7,8]"
:key="key"
>
<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 :col="number">
<CFormInput class="c-mb-0" :placeholder="`.col-md-${number}`"/>
<CInput class="mb-0" :placeholder="`.col-md-${number}`"/>
</CCol>
</CRow>
</CCardBody>
<CCardFooter>
<CButton size="sm" variant="primary">Action</CButton>
<CButton size="sm" variant="danger">Action</CButton>
<CButton size="sm" variant="warning">Action</CButton>
<CButton size="sm" variant="info">Action</CButton>
<CButton size="sm" variant="success">Action</CButton>
<CButton size="sm" color="primary">Action</CButton>
<CButton size="sm" color="danger">Action</CButton>
<CButton size="sm" color="warning">Action</CButton>
<CButton size="sm" color="info">Action</CButton>
<CButton size="sm" color="success">Action</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -652,24 +662,24 @@
</CCardHeader>
<CCardBody>
<CRow
class="c-form-group"
class="form-group"
v-for="(number, key) in [4,5,6,7,8]"
:key="key"
>
<CCol :col="number">
<CFormInput class="c-mb-0" :placeholder="`.col-${number}`"/>
<CInput class="mb-0" :placeholder="`.col-${number}`"/>
</CCol>
<CCol :col="12 - number">
<CFormInput class="c-mb-0" :placeholder="`.col-${12 - number}`"/>
<CInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
</CCol>
</CRow>
</CCardBody>
<CCardFooter>
<CButton size="sm" variant="primary">Action</CButton>
<CButton size="sm" variant="danger">Action</CButton>
<CButton size="sm" variant="warning">Action</CButton>
<CButton size="sm" variant="info">Action</CButton>
<CButton size="sm" variant="success">Action</CButton>
<CButton size="sm" color="primary">Action</CButton>
<CButton size="sm" color="danger">Action</CButton>
<CButton size="sm" color="warning">Action</CButton>
<CButton size="sm" color="info">Action</CButton>
<CButton size="sm" color="success">Action</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -682,24 +692,24 @@
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
<CInput
prepend-html="Username"
append-html="<i class='cui-user'></i>"
/>
<CFormInput
<CInput
prepend-html="Email"
type="email"
autocomplete="email"
append-html="<i class='cui-envelope-closed'></i>"
/>
<CFormInput
<CInput
prepend-html="Password"
type="password"
autocomplete="current-password"
append-html="<i class='cui-shield'></i>"
/>
<div class="c-form-group c-form-actions">
<CButton type="submit" size="sm" variant="primary">
<div class="form-group form-actions">
<CButton type="submit" size="sm" color="primary">
Submit
</CButton>
</div>
@@ -714,24 +724,24 @@
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
<CInput
placeholder="Username"
append-html="<i class='cui-user'></i>"
/>
<CFormInput
<CInput
placeholder="Email"
type="email"
autocomplete="email"
append-html="<i class='cui-envelope-closed'></i>"
/>
<CFormInput
<CInput
placeholder="Password"
type="password"
autocomplete="current-password"
append-html="<i class='cui-shield'></i>"
/>
<div class="c-form-group c-form-actions">
<CButton type="submit" class="c-btn c-btn-sm c-btn-secondary">
<div class="form-group form-actions">
<CButton type="submit" class="btn btn-sm btn-secondary">
Submit
</CButton>
</div>
@@ -746,24 +756,24 @@
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
<CInput
placeholder="Username"
prependHtml="<i class='cui-user'></i>"
/>
<CFormInput
<CInput
placeholder="Email"
type="email"
autocomplete="email"
prependHtml="<i class='cui-envelope-closed'></i>"
/>
<CFormInput
<CInput
placeholder="Password"
type="password"
autocomplete="current-password"
prependHtml="<i class='cui-shield'></i>"
/>
<div class="c-form-group c-form-actions">
<CButton type="submit" size="sm" variant="success">
<div class="form-group form-actions">
<CButton type="submit" size="sm" color="success">
Submit
</CButton>
</div>
@@ -778,58 +788,58 @@
<CCard v-if="show">
<CCardHeader>
<i class="cui-pencil"></i> Form Elements
<div class="c-card-header-actions">
<CLink href="#" class="c-card-header-action c-btn-setting">
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
<i class="cui-settings"></i>
</CLink>
<CLink
class="c-card-header-action c-btn-minimize"
class="card-header-action btn-minimize"
@click="formCollapsed=!formCollapsed"
>
<i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
</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>
</CLink>
</div>
</CCardHeader>
<CCollapse :show="formCollapsed">
<CCardBody>
<CFormInput
<CInput
label="Prepended text"
prepend-html="@"
description="Here's some help text"
type="email"
autocomplete="email"
/>
<CFormInput
<CInput
label="Appended text"
append-html=".00"
description="Here's some help text"
/>
<CFormInput
<CInput
label="Appended and prepended text"
prepend-html="$"
append-html=".00"
description="Here's some help text"
/>
<CFormInput
<CInput
label="Append with button"
description="Here's some help text"
>
<template #append>
<CButton variant="primary">Go!</CButton>
<CButton color="primary">Go!</CButton>
</template>
</CFormInput>
<CFormInput label="Two-buttons append">
</CInput>
<CInput label="Two-buttons append">
<template #append>
<CButton variant="primary">Search</CButton>
<CButton variant="danger">Options</CButton>
<CButton color="primary">Search</CButton>
<CButton color="danger">Options</CButton>
</template>
</CFormInput>
<div class="c-form-actions">
<CButton type="submit" variant="primary">Save changes</CButton>
<CButton variant="secondary">Cancel</CButton>
</CInput>
<div class="form-actions">
<CButton type="submit" color="primary">Save changes</CButton>
<CButton color="secondary">Cancel</CButton>
</div>
</CCardBody>
</CCollapse>
@@ -842,7 +852,7 @@
<script>
export default {
name: 'forms',
name: 'Forms',
data () {
return {
selected: [], // Must be an array reference!
@@ -851,7 +861,11 @@ export default {
options: ['Option 1', 'Option 2', 'Option 3'],
selectOptions: [
'Option 1', 'Option 2', 'Option 3',
{ value: ['some value', 'another value'], label: 'Option 4' }],
{
value: ['some value', 'another value'],
label: 'Selected option'
}
],
selectedOption: ['some value', 'another value'],
formCollapsed: true,
@@ -868,14 +882,3 @@ export default {
}
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
src/views/base/Jumbotrons.vue
+78 -75
View File
@@ -1,84 +1,87 @@
<template>
<div class="c-wrapper">
<div>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Jumbotron </strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<p>For more information visit website</p>
<CButton variant="primary" href="#">More Info</CButton>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>with slots</small>
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="c-lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="c-my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
<CButton variant="primary" href="#">Do Something</CButton>
<CButton variant="success" href="#">Do Something Else</CButton>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>variants</small>
</CCardHeader>
<CCardBody>
<CJumbotron
variant="info"
text-variant="white"
border-variant="dark"
header="Bootstrap 4"
<div>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<p slot="lead" class="c-lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="c-my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<p>For more information visit website</p>
<CButton color="primary" href="#">More Info</CButton>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>with slots</small>
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
<CButton color="primary" href="#">Do Something</CButton>
<CButton color="success" href="#">Do Something Else</CButton>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>colors</small>
</CCardHeader>
<CCardBody>
<CJumbotron
color="info"
text-color="white"
border-color="dark"
header="Bootstrap 4"
>
<p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</template>
<script>
export default {
name: 'jumbotrons'
name: 'Jumbotrons'
}
</script>
src/views/base/ListGroups.vue
+271 -268
View File
@@ -1,276 +1,279 @@
<template>
<div class="c-wrapper">
<div>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap list group </strong>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>disabled items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>actionable items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
<CListGroupItem href="#">Action links are easy</CListGroupItem>
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>buttons</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem tag="button">Button item</CListGroupItem>
<CListGroupItem tag="button">I am a button</CListGroupItem>
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
<CListGroupItem tag="button">This is a button too</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>with badges</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem
class="c-d-flex c-justify-content-between c-align-items-center"
>
Cras justo odio
<CBadge variant="primary" pill>14</CBadge>
</CListGroupItem>
<CListGroupItem
class="c-d-flex c-justify-content-between c-align-items-center"
>
Dapibus ac facilisis in
<CBadge variant="primary" pill>2</CBadge>
</CListGroupItem>
<CListGroupItem
class="c-d-flex c-justify-content-between c-align-items-center"
>
Morbi leo risus
<CBadge variant="primary" pill>1</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>This is a default list group item</CListGroupItem>
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants active</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>inside cards</small>
</CCardHeader>
<CCardBody>
<CCardGroup deck>
<CCard headerHtml="<b>Card with list group</b>">
<CListGroup>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<p class="c-card-text c-mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</p>
</CCard>
<CCard header="<b>Card with flush list group</b>">
<CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<CCardBody>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</CCardBody>
</CCard>
</CCardGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem
href="#"
active
class="c-flex-column c-align-items-start"
>
<div class="c-d-flex c-w-100 c-justify-content-between">
<h5 class="c-mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="c-mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" class="c-flex-column c-align-items-start">
<div class="c-d-flex c-w-100 c-justify-content-between">
<h5 class="c-mb-1">List group item heading</h5>
<small class="c-text-muted">3 days ago</small>
</div>
<p class="c-mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="c-text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" disabled class="c-flex-column c-align-items-start">
<div class="c-d-flex c-w-100 c-justify-content-between">
<h5 class="c-mb-1">Disabled List group item</h5>
<small class="c-text-muted">3 days ago</small>
</div>
<p class="c-mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="c-text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
<div>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap list group </strong>
<div class="card-header-actions">
<a
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>
</div>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>disabled items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>actionable items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
<CListGroupItem href="#">Action links are easy</CListGroupItem>
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>buttons</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem tag="button">Button item</CListGroupItem>
<CListGroupItem tag="button">I am a button</CListGroupItem>
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
<CListGroupItem tag="button">This is a button too</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>with badges</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Cras justo odio
<CBadge color="primary" pill>14</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Dapibus ac facilisis in
<CBadge color="primary" pill>2</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Morbi leo risus
<CBadge color="primary" pill>1</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>colors</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>This is a default list group item</CListGroupItem>
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>colors active</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
<CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>inside cards</small>
</CCardHeader>
<CCardBody>
<CCardGroup deck>
<CCard headerHtml="<b>Card with list group</b>">
<CListGroup>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<p class="card-text mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</p>
</CCard>
<CCard header="<b>Card with flush list group</b>">
<CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<CCardBody>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</CCardBody>
</CCard>
</CCardGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem
href="#"
active
class="flex-column align-items-start"
>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" disabled class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Disabled List group item</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</template>
<script>
export default {
name: 'list-groups'
name: 'ListGroups'
}
</script>
src/views/base/Navbars.vue
+162 -193
View File
@@ -1,208 +1,177 @@
<template>
<div class="c-wrapper">
<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>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navbar </strong>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<CNavbar
toggleable="md"
variant="info"
sticky
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navbar </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Navbar"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<CNavbarToggle @click="show=!show"/>
<CNavbarBrand href="#">NavBar</CNavbarBrand>
<CCollapse :show="show" navbar>
<CNavbarNav>
<CNavItem href="#">Link</CNavItem>
<CNavItem href="#" disabled>Disabled</CNavItem>
</CNavbarNav>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CNavbar
expandable="md"
color="info"
>
<CToggler inNavbar @click="show=!show"/>
<CNavbarBrand href="#">NavBar</CNavbarBrand>
<CCollapse :show="show" navbar>
<CNavbarNav>
<CNavItem href="#">Link</CNavItem>
<CNavItem href="#" disabled>Disabled</CNavItem>
</CNavbarNav>
<!-- Right aligned nav items -->
<CNavbarNav class="c-ml-auto">
<CForm inline>
<CFormInput
class="c-mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton variant="light" size="sm" class="c-my-2 c-my-sm-0">
Search
</CButton>
</CForm>
<!-- Right aligned nav items -->
<CNavbarNav class="ml-auto">
<CForm inline>
<CInput
class="mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton color="light" size="sm" class="my-2 my-sm-0">
Search
</CButton>
</CForm>
<CDropdown
button-html="Lang"
nav
placement="bottom-end"
>
<CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown
nav
buttonHtml="<em>User</em>"
placement="bottom-end"
>
<CDropdownItem>Profile</CDropdownItem>
<CDropdownItem>Signout</CDropdownItem>
</CDropdown>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>brand</small>
</CCardHeader>
<CCardBody>
<!-- Image and text -->
<CNavbar variant="faded" light>
<CNavbarBrand href="#">
<img src="https://placekitten.com/g/30/30" class="c-d-inline-block c-align-top" alt="BV">
BootstrapVue
</CNavbarBrand>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>text</small>
</CCardHeader>
<CCardBody>
<CNavbar toggleable="sm" light variant="light">
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
<CNavbarBrand>BootstrapVue</CNavbarBrand>
<CCollapse :show="navbarText" navbar>
<CNavbarNav>
<span class="c-navbar-text">Navbar text</span>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>dropdown</small>
</CCardHeader>
<CCardBody>
<CNavbar>
<!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
<CCollapse :show="navbarDropdown" navbar> -->
<CNavbarNav>
<CNavItem href="#">Home</CNavItem>
<CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns -->
<CDropdown
button-html="Lang"
right
nav
>
<CDropdown
toggler-text="Lang"
in-nav
placement="bottom-end"
>
<CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown
button-html="User"
right
nav
>
<CDropdownItem>Account</CDropdownItem>
<CDropdownItem>Settings</CDropdownItem>
</CDropdown>
</CNavbarNav>
<!-- </CCollapse> -->
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>form</small>
</CCardHeader>
<CCardBody>
<CNavbar light variant="light">
<CForm inline>
<CFormInput
class="c-mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton variant="outline-success" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
</CForm>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>input group</small>
</CCardHeader>
<CCardBody>
<CNavbar light variant="light">
<CForm inline>
<CFormInput
class="c-mr-sm-2"
placeholder="Username"
/>
</CForm>
</CNavbar>
</CCardBody>
</CCard>
</div>
</CDropdown>
<CDropdown
in-nav
toggler-text="User"
placement="bottom-end"
>
<CDropdownItem>Profile</CDropdownItem>
<CDropdownItem>Signout</CDropdownItem>
</CDropdown>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>brand</small>
</CCardHeader>
<CCardBody>
<!-- Image and text -->
<CNavbar color="faded" light>
<CNavbarBrand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
CoreuiVue
</CNavbarBrand>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>text</small>
</CCardHeader>
<CCardBody>
<CNavbar toggleable="sm" light color="light">
<CToggler inNavbar @click="navbarText=!navbarText"/>
<CNavbarBrand>CoreuiVue</CNavbarBrand>
<CCollapse :show="navbarText" navbar>
<CNavbarNav>
<span class="navbar-text">Navbar text</span>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>dropdown</small>
</CCardHeader>
<CCardBody>
<CNavbar expandable="sm" color="primary" >
<CToggler inNavbar @click="navbarDropdown = !navbarDropdown"/>
<CCollapse :show="navbarDropdown" navbar>
<CNavbarNav>
<CNavItem href="#">Home</CNavItem>
<CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns -->
<CDropdown
toggler-text="Lang"
placement="bottom-end"
in-nav
>
<CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown
toggler-text="User"
placement="bottom-end"
in-nav
>
<CDropdownItem>Account</CDropdownItem>
<CDropdownItem>Settings</CDropdownItem>
</CDropdown>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>form</small>
</CCardHeader>
<CCardBody>
<CNavbar light color="light">
<CForm inline>
<CInput
class="mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton color="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>input group</small>
</CCardHeader>
<CCardBody>
<CNavbar light color="light">
<CForm inline>
<CInput
class="mr-sm-2"
placeholder="Username"
/>
</CForm>
</CNavbar>
</CCardBody>
</CCard>
</div>
</template>
<script>
import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
export default {
name: 'navbars',
components: {
DefaultHeaderDropdownAccnt
},
name: 'Navbars',
data () {
return {
show: false,
src/views/base/Navs.vue
+156 -156
View File
@@ -1,165 +1,165 @@
<template>
<div class="c-wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<!-- <div class="c-card-header-actions">
<CLink
href="#"
class="c-card-header-action"
>
<small class="c-text-muted">docs</small>
</CLink>
</div> -->
</CCardHeader>
<CCardBody>
<CNav>
<CNavItem active>Active</CNavItem>
<CNavItem title="Link"/>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader>
<CCardBody>
<CNav>
<CNavItem active>
<i class="cui-basket-loaded"></i>
</CNavItem>
<CNavItem>
Link
</CNavItem>
<CNavItem>
Another Link
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader>
<CCardBody>
<CNav tabs>
<CNavItem active>
Active
</CNavItem>
<CNavItem>
Link
</CNavItem>
<CNavItem>
Another Link
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader @click="item++">
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader>
<CCardBody>
<CNav fill tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader>
<CCardBody>
<CNav justified tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CDropdown
id="nav7_ddown"
nav
placement="bottom-end"
button-content="Dropdown"
>
<!-- <a class="c-nav-link c-dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem>
<CDropdownItem>two</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem>three</CDropdownItem>
</CDropdown>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>vertical variation</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="3" class="c-m-0">
<CNav vertical pills >
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Nav"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CNav>
<CNavItem active>Active</CNavItem>
<CNavItem title="Link"/>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader>
<CCardBody>
<CNav>
<CNavItem active>
<i class="cui-basket-loaded"></i>
</CNavItem>
<CNavItem>
Link
</CNavItem>
<CNavItem>
Another Link
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader>
<CCardBody>
<CNav tabs>
<CNavItem active>
Active
</CNavItem>
<CNavItem>
Link
</CNavItem>
<CNavItem>
Another Link
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader @click="item++">
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader>
<CCardBody>
<CNav fill tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader>
<CCardBody>
<CNav justified tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CDropdown
id="nav7_ddown"
nav
placement="bottom-end"
button-content="Dropdown"
>
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem>
<CDropdownItem>two</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem>three</CDropdownItem>
</CDropdown>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>vertical variation</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="3" class="m-0">
<CNav vertical pills >
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'navs',
name: 'Navs',
data () {
return {
item: 2
src/views/base/Paginations.vue
+70 -67
View File
@@ -1,86 +1,89 @@
<template>
<div class="c-wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Responsive bootstrap Pagination</strong>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<h6>Default</h6>
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Responsive bootstrap Pagination</strong>
<div class="card-header-actions">
<a
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>
</div>
</CCardHeader>
<CCardBody>
<h6>Default</h6>
<CPagination
:active-page.sync="currentPage"
:pages="10"
responsive
/>
<br>
<h6>Small</h6>
<CPagination
size="sm"
:active-page.sync="currentPage"
:pages="10"/>
<br>
<div>
<h6>Large</h6>
<CPagination
size="lg"
:active-page.sync="currentPage"
:pages="10"
responsive
/>
<br>
</div>
<h6>Small</h6>
<CPagination
size="sm"
:active-page.sync="currentPage"
:pages="10"/>
<br>
<div>currentPage: {{currentPage}}</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Pagination </strong>
<small>alignment</small>
</CCardHeader>
<CCardBody>
<h6>Left alignment (default)</h6>
<CPagination
:active-page.sync="currentPage"
:pages="10"
/>
<br>
<div>
<h6>Large</h6>
<CPagination
size="lg"
:active-page.sync="currentPage"
:pages="10"
responsive
/>
<br>
</div>
<h6>Center alignment</h6>
<CPagination
align="center"
:pages="10"
:active-page.sync="currentPage"
/>
<br>
<div>currentPage: {{currentPage}}</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Pagination </strong>
<small>alignment</small>
</CCardHeader>
<CCardBody>
<h6>Left alignment (default)</h6>
<CPagination
:active-page.sync="currentPage"
:pages="10"
/>
<br>
<h6>Right (end) alignment</h6>
<CPagination
align="end"
:active-page.sync="currentPage"
:pages="10"
/>
<br>
<h6>Center alignment</h6>
<CPagination
align="center"
:pages="10"
:active-page.sync="currentPage"
/>
<br>
<h6>Right (end) alignment</h6>
<CPagination
align="end"
:active-page.sync="currentPage"
:pages="10"
/>
<br>
<div>currentPage: {{currentPage}}</div>
</CCardBody>
</CCard>
</div>
<div>currentPage: {{currentPage}}</div>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'paginations',
name: 'Paginations',
data () {
return {
currentPage: 3,
src/views/base/Popovers.vue
+72 -82
View File
@@ -1,96 +1,86 @@
<template>
<div class="c-wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Popovers</strong>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="4">
<div class="c-my-3 c-text-center">
<CButton
variant="primary"
v-c-popover="{
header: 'Popover header',
content: 'I am popover content!'
}"
>
Hover Me
</CButton>
</div>
</CCol>
<CCol col="4">
<div class="c-my-3 c-text-center">
<CButton
variant="primary"
v-c-popover="{
header: 'Popover!',
content: 'I start <strong>open</strong>',
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
</CButton>
</div>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Popovers </strong>
<small>placement</small>
</CCardHeader>
<CCardBody class="c-my-3">
<CRow>
<CCol
md="4"
class="c-py-4 c-text-center"
v-for="placement in placements"
:key="placement"
>
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Popovers</strong>
<div class="card-header-actions">
<a
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>
</div>
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="6">
<div class="my-3 text-center">
<CButton
variant="primary"
color="primary"
v-c-popover="{
header: 'Popover!',
content: `Placement ${placement}`,
placement
header: 'Popover header',
content: 'I am popover content!'
}"
>
{{ placement }}
Click Me
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</div>
</CCol>
<CCol col="6">
<div class="my-3 text-center">
<CButton
color="primary"
v-c-popover="{
header: 'Popover!',
content: 'I start <strong>open</strong>',
active: true
}"
>
Click me
</CButton>
</div>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Popovers </strong>
<small>placement</small>
</CCardHeader>
<CCardBody class="my-3">
<CRow>
<CCol
md="4"
class="py-4 text-center"
v-for="placement in placements"
:key="placement"
>
<CButton
color="primary"
v-c-popover="{
header: 'Popover!',
content: `Placement ${placement}`,
placement
}"
>
{{ placement }}
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'popovers',
name: 'Popovers',
data () {
return {
placements: [
src/views/base/ProgressBars.vue
+210 -203
View File
@@ -1,218 +1,227 @@
<template>
<div class="c-wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Progress</strong>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
<CProgress class="c-mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" variant="success"/>
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
</CProgress>
<CButton class="c-mt-4" @click="clicked">Click me</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
</CCardHeader>
<CCardBody>
<h6>No label</h6>
<CProgress :value="value" :max="max2" class="c-mb-3"/>
<h6>Value label</h6>
<CProgress :value="value" :max="max2" show-value class="c-mb-3"/>
<h6>Progress label</h6>
<CProgress :value="value" :max="max2" show-progress class="c-mb-3"/>
<h6>Value label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-value class="c-mb-3"/>
<h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="c-mb-3"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>width</small>
</CCardHeader>
<CCardBody>
<h6>Default width</h6>
<CProgress :value="value3" class="c-mb-3"/>
<h6>Custom widths</h6>
<CProgress :value="value3" class="c-w-75 c-mb-2"/>
<CProgress :value="value3" class="c-w-50 c-mb-2"/>
<CProgress :value="value3" class="c-w-25"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>height</small>
</CCardHeader>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-progress class="c-mb-3"/>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-progress class="c-mb-2"/>
<CProgress height="20px" :value="value3" show-progress class="c-mb-2"/>
<CProgress height="2px" :value="value3"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>variants</small>
</CCardHeader>
<CCardBody>
<div :key="index" v-for="(bar, index) in bars" class="c-row c-mb-1">
<div class="c-col-sm-2">{{ bar.variant }}:</div>
<div class="c-col-sm-10 c-pt-1">
<CProgress
:value="bar.value"
:variant="bar.variant"
:key="bar.variant"
/>
</div>
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Progress</strong>
<div class="card-header-actions">
<a
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>
</div>
</CCardHeader>
<CCardBody>
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" color="success"/>
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
</CProgress>
<CButton
@click="clicked"
color="secondary"
class="mt-4"
>
Click me to animate progress bars
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
</CCardHeader>
<CCardBody>
<h6>No label</h6>
<CProgress :value="value" :max="max2" class="mb-3"/>
<h6>Value label</h6>
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
<h6>Progress label</h6>
<CProgress :value="value" :max="max2" show-percentage class="mb-3"/>
<h6>Value label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
<h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-percentage class="mb-3"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>width</small>
</CCardHeader>
<CCardBody>
<h6>Default width</h6>
<CProgress :value="value3" class="mb-3"/>
<h6>Custom widths</h6>
<CProgress :value="value3" class="w-75 mb-2"/>
<CProgress :value="value3" class="w-50 mb-2"/>
<CProgress :value="value3" class="w-25"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>height</small>
</CCardHeader>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-percentage class="mb-3"/>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
<CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
<CProgress height="2px" :value="value3"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>colors</small>
</CCardHeader>
<CCardBody>
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.color }}:</div>
<div class="col-sm-10 pt-1">
<CProgress
:value="bar.value"
:color="bar.color"
:key="bar.color"
/>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>striped</small>
</CCardHeader>
<CCardBody>
<CProgress
:value="25"
variant="success"
:striped="striped"
class="c-mb-2"
/>
<CProgress
:value="50"
variant="info"
:striped="striped"
class="c-mb-2"
/>
<CProgress
:value="75"
variant="warning"
:striped="striped"
class="c-mb-2"
/>
<CProgress
:value="100"
variant="danger"
:striped="striped"
class="c-mb-2"
/>
<CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>animated</small>
</CCardHeader>
<CCardBody>
<CProgress
:value="25"
variant="success"
striped
:animated="animate"
class="c-mb-2"
/>
<CProgress
:value="50"
variant="info"
striped
:animated="animate"
class="c-mb-2"
/>
<CProgress
:value="75"
variant="warning"
striped
:animated="animate"
class="c-mb-2"
/>
<CProgress
:value="100"
variant="danger"
:animated="animate"
class="c-mb-3"
/>
<CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>multiple bars</small>
</CCardHeader>
<CCardBody>
<CProgress :max="max3" class="c-mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-progress :max="max3" class="c-mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-value striped :max="max3" class="c-mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="c-mb-3">
<CProgressBar variant="primary" :value="values[0]" show-progress/>
<CProgressBar variant="success" :value="values[1]" animated show-progress/>
<CProgressBar variant="info" :value="values[2]" striped show-progress/>
</CProgress>
</CCardBody>
</CCard>
</div>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>striped</small>
</CCardHeader>
<CCardBody>
<CProgress
:value="25"
color="success"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="50"
color="info"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="75"
color="warning"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="100"
color="danger"
:striped="striped"
class="mb-2"
/>
<CButton color="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>animated</small>
</CCardHeader>
<CCardBody>
<CProgress
:value="25"
color="success"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="50"
color="info"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="75"
color="warning"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="100"
color="danger"
:animated="animate"
class="mb-3"
/>
<CButton color="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>multiple bars</small>
</CCardHeader>
<CCardBody>
<CProgress :max="max3" class="mb-3">
<CProgressBar color="primary" :value="values[0]"/>
<CProgressBar color="success" :value="values[1]"/>
<CProgressBar color="info" :value="values[2]"/>
</CProgress>
<CProgress show-percentage :max="max3" class="mb-3">
<CProgressBar color="primary" :value="values[0]"/>
<CProgressBar color="success" :value="values[1]"/>
<CProgressBar color="info" :value="values[2]"/>
</CProgress>
<CProgress show-value striped :max="max3" class="mb-3">
<CProgressBar color="primary" :value="values[0]"/>
<CProgressBar color="success" :value="values[1]"/>
<CProgressBar color="info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="mb-3">
<CProgressBar color="primary" :value="values[0]" show-percentage/>
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
<CProgressBar color="info" :value="values[2]" striped show-percentage/>
</CProgress>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'progress-bars',
name: 'ProgressBars',
data () {
return {
counter: 45,
counter: 73,
max: 100,
max2: 50,
value: 33.333333333,
value3: 75,
bars: [
{variant: 'success', value: 75},
{variant: 'info', value: 75},
{variant: 'warning', value: 75},
{variant: 'danger', value: 75},
{variant: 'primary', value: 75},
{variant: 'secondary', value: 75},
{variant: 'dark', value: 75}
{color: 'success', value: 75},
{color: 'info', value: 75},
{color: 'warning', value: 75},
{color: 'danger', value: 75},
{color: 'primary', value: 75},
{color: 'secondary', value: 75},
{color: 'dark', value: 75}
],
timer: null,
striped: true,
@@ -224,8 +233,6 @@ export default {
methods: {
clicked () {
this.counter = Math.random() * this.max
// console.log('Change progress to ' +
// Math.round(this.counter * 100) / 100)
}
},
mounted () {
src/views/base/Switches.vue
+259 -251
View File
@@ -4,34 +4,33 @@
<CCol xs="12" md="6">
<CCard v-if="true">
<CCardHeader>
<h5>
Radio switches
<CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
<CBadge variant="danger" class="c-float-right">NEW</CBadge>
</h5>
Radio switches
<CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
<div class="card-header-actions">
<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>
<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
class="c-mx-1"
:key="key"
:variant="variant"
v-for="(color, key) in colors"
:key="'radio' + key"
class="mx-1"
:color="color"
shape="3d"
outline="alt"
v-bind="labelIcon"
type="radio"
name="radio"
:checked.sync="radio"
:value="variant"
v-for="(variant, key) in variants"
:checked="key === 2"
@update:checked="(val) => val ? radio = color : null"
:value="color"
/>
</CCardBody>
</CCard>
@@ -42,25 +41,23 @@
<CCard>
<CCardHeader>
Switch default
<CBadge variant="primary">{{checker}}</CBadge>
<CBadge color="primary">{{checker}}</CBadge>
</CCardHeader>
<CCardBody>
<CSwitch
class="c-mx-1"
variant="primary"
class="mx-1"
color="primary"
name="switch1"
:checked.sync="checker"
true-value="yes"
false-value="no"
/>
<CSwitch
class="c-mx-1"
:variant="variant"
class="mx-1"
:color="color"
checked
: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>
</CCard>
</CCol>
@@ -70,15 +67,15 @@
Switch pills
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="pill" />
<CSwitch class="mx-1" color="primary" checked shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
<CSwitch class="mx-1" color="success" checked shape="pill" />
<CSwitch class="mx-1" color="warning" checked shape="pill" />
<CSwitch class="mx-1" color="info" checked shape="pill" />
<CSwitch class="mx-1" color="danger" checked shape="pill" />
<CSwitch class="mx-1" color="light" checked shape="pill" />
<CSwitch class="mx-1" color="dark" checked shape="pill" />
<CSwitch class="mx-1" color="primary" disabled shape="pill" />
</CCardBody>
</CCard>
</CCol>
@@ -88,15 +85,15 @@
3d Switch
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
<CSwitch class="mx-1" color="primary" checked shape="3d" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" />
<CSwitch class="mx-1" color="success" checked shape="3d" />
<CSwitch class="mx-1" color="warning" checked shape="3d" />
<CSwitch class="mx-1" color="info" checked shape="3d" />
<CSwitch class="mx-1" color="danger" checked shape="3d" />
<CSwitch class="mx-1" color="light" checked shape="3d" />
<CSwitch class="mx-1" color="dark" checked shape="3d" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -106,15 +103,15 @@
3d Switch <small><code>disabled</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
<CSwitch class="mx-1" color="primary" checked shape="3d" disabled />
<CSwitch class="mx-1" color="secondary" checked shape="3d" disabled />
<CSwitch class="mx-1" color="success" checked shape="3d" disabled />
<CSwitch class="mx-1" color="warning" checked shape="3d" disabled />
<CSwitch class="mx-1" color="info" checked shape="3d" disabled />
<CSwitch class="mx-1" color="danger" checked shape="3d" disabled />
<CSwitch class="mx-1" color="light" checked shape="3d" disabled />
<CSwitch class="mx-1" color="dark" checked shape="3d" disabled />
<CSwitch class="mx-1" color="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -124,15 +121,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
@@ -142,15 +139,15 @@
3d Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="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" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -160,15 +157,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="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="c-mx-1" variant="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="c-mx-1" variant="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="c-mx-1" variant="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="c-mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -178,15 +175,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
@@ -196,15 +193,15 @@
Switch <small><code>outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline />
<CSwitch class="c-mx-1" variant="secondary" checked outline />
<CSwitch class="c-mx-1" variant="success" checked outline />
<CSwitch class="c-mx-1" variant="warning" checked outline />
<CSwitch class="c-mx-1" variant="info" checked outline />
<CSwitch class="c-mx-1" variant="danger" checked outline />
<CSwitch class="c-mx-1" variant="light" checked outline />
<CSwitch class="c-mx-1" variant="dark" checked outline />
<CSwitch class="c-mx-1" variant="primary" outline disabled />
<CSwitch class="mx-1" color="primary" checked outline />
<CSwitch class="mx-1" color="secondary" checked outline />
<CSwitch class="mx-1" color="success" checked outline />
<CSwitch class="mx-1" color="warning" checked outline />
<CSwitch class="mx-1" color="info" checked outline />
<CSwitch class="mx-1" color="danger" checked outline />
<CSwitch class="mx-1" color="light" checked outline />
<CSwitch class="mx-1" color="dark" checked outline />
<CSwitch class="mx-1" color="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
@@ -214,15 +211,15 @@
Switch <small><code>outline shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
<CSwitch class="mx-1" color="primary" checked outline shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -232,15 +229,15 @@
Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
<CSwitch class="mx-1" color="primary" checked outline="alt" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
<CSwitch class="mx-1" color="success" checked outline="alt" />
<CSwitch class="mx-1" color="warning" checked outline="alt" />
<CSwitch class="mx-1" color="info" checked outline="alt" />
<CSwitch class="mx-1" color="danger" checked outline="alt" />
<CSwitch class="mx-1" color="light" checked outline="alt" />
<CSwitch class="mx-1" color="dark" checked outline="alt" />
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -250,15 +247,15 @@
Switch <small><code>outline="alt" shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -268,15 +265,15 @@
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked />
<CSwitch class="c-mx-1" variant="secondary" checked />
<CSwitch class="c-mx-1" variant="success" checked />
<CSwitch class="c-mx-1" variant="warning" checked />
<CSwitch class="c-mx-1" variant="info" checked />
<CSwitch class="c-mx-1" variant="danger" checked />
<CSwitch class="c-mx-1" variant="light" checked />
<CSwitch class="c-mx-1" variant="dark" checked />
<CSwitch class="c-mx-1" variant="primary" disabled />
<CSwitch class="mx-1" color="primary" checked />
<CSwitch class="mx-1" color="secondary" checked />
<CSwitch class="mx-1" color="success" checked />
<CSwitch class="mx-1" color="warning" checked />
<CSwitch class="mx-1" color="info" checked />
<CSwitch class="mx-1" color="danger" checked />
<CSwitch class="mx-1" color="light" checked />
<CSwitch class="mx-1" color="dark" checked />
<CSwitch class="mx-1" color="primary" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -286,15 +283,15 @@
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
<CSwitch class="c-mx-1" variant="primary" shape="pill" disabled />
<CSwitch class="mx-1" color="primary" checked shape="pill" />
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
<CSwitch class="mx-1" color="success" checked shape="pill" />
<CSwitch class="mx-1" color="warning" checked shape="pill" />
<CSwitch class="mx-1" color="info" checked shape="pill" />
<CSwitch class="mx-1" color="danger" checked shape="pill" />
<CSwitch class="mx-1" color="light" checked shape="pill" />
<CSwitch class="mx-1" color="dark" checked shape="pill" />
<CSwitch class="mx-1" color="primary" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -304,15 +301,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline />
<CSwitch class="c-mx-1" variant="secondary" checked outline />
<CSwitch class="c-mx-1" variant="success" checked outline />
<CSwitch class="c-mx-1" variant="warning" checked outline />
<CSwitch class="c-mx-1" variant="info" checked outline />
<CSwitch class="c-mx-1" variant="danger" checked outline />
<CSwitch class="c-mx-1" variant="light" checked outline />
<CSwitch class="c-mx-1" variant="dark" checked outline />
<CSwitch class="c-mx-1" variant="primary" outline disabled />
<CSwitch class="mx-1" color="primary" checked outline />
<CSwitch class="mx-1" color="secondary" checked outline />
<CSwitch class="mx-1" color="success" checked outline />
<CSwitch class="mx-1" color="warning" checked outline />
<CSwitch class="mx-1" color="info" checked outline />
<CSwitch class="mx-1" color="danger" checked outline />
<CSwitch class="mx-1" color="light" checked outline />
<CSwitch class="mx-1" color="dark" checked outline />
<CSwitch class="mx-1" color="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
@@ -322,15 +319,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
<CSwitch class="mx-1" color="primary" checked outline shape="pill" />
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -340,15 +337,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
<CSwitch class="mx-1" color="primary" checked outline="alt" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
<CSwitch class="mx-1" color="success" checked outline="alt" />
<CSwitch class="mx-1" color="warning" checked outline="alt" />
<CSwitch class="mx-1" color="info" checked outline="alt" />
<CSwitch class="mx-1" color="danger" checked outline="alt" />
<CSwitch class="mx-1" color="light" checked outline="alt" />
<CSwitch class="mx-1" color="dark" checked outline="alt" />
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -358,15 +355,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -377,15 +374,15 @@
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked v-bind="labelIcon"/>
<CSwitch class="c-mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" disabled v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" color="secondary" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>shape
</CCol>
@@ -395,15 +392,15 @@
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="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" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -413,15 +410,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" outline disabled v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -431,15 +428,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="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" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -449,15 +446,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="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" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -467,15 +464,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="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="c-mx-1" variant="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="c-mx-1" variant="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="c-mx-1" variant="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="c-mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -485,11 +482,11 @@
<CCardHeader>
Sizes
</CCardHeader>
<CCardBody class="c-p-0">
<CCardBody class="p-0">
<CTable
hover
striped
class="c-table-align-middle c-mb-0"
class="table-align-middle mb-0"
:items="items"
:fields="fields"
no-sorting
@@ -498,7 +495,7 @@
<td>
<CSwitch
:shape="item.example.shape"
:variant="item.example.variant"
:color="item.example.color"
:size="item.example.size"
:checked="item.example.checked"
/>
@@ -519,24 +516,36 @@
<script>
export default {
name: 'switches',
name: 'Switches',
data () {
return {
variants:[
colors: [
'primary','secondary','warning','success','info','danger','light','dark'
],
fields: [
{key: 'size'},
{key: 'example'},
{key: 'size_prop', label: 'Size prop'}
{ key: 'size' },
{ key: 'example' },
{ key: 'size_prop', label: 'Size prop' }
],
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: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
{
size: 'Large',
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',
radio: 'primary',
checker: true,
radio: 'warning',
labelIcon: {
labelOn: '\u2713',
labelOff: '\u2715'
@@ -544,8 +553,7 @@ export default {
labelTxt: {
labelOn: 'yes',
labelOff: 'no'
},
}
}
}
}
src/views/base/Table.vue
+5 -5
View File
@@ -8,13 +8,13 @@
:fixed="fixed"
:items="items"
:fields="fields"
:per-page="small ? 10 : 5"
:items-per-page="small ? 10 : 5"
:dark="dark"
no-sorting
pagination
>
<template #status="{item}">
<td>
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
</td>
</template>
</CTable>
@@ -23,7 +23,7 @@
<script>
export default {
name: 'TableWrapper',
name: 'Table',
props: {
items: Array,
fields: {
@@ -49,7 +49,7 @@ export default {
: status === 'Inactive' ? 'secondary'
: status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary'
},
}
}
}
</script>
src/views/base/Tables.vue
+11 -152
View File
@@ -1,102 +1,16 @@
<template>
<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>
<CCol lg="6">
<CTableWrapper
:items="getItems()"
:items="getShuffledUsersData()"
caption="<i class='fa fa-align-justify'></i> Simple Table"
/>
</CCol>
<CCol lg="6">
<CTableWrapper
:items="getItems()"
:items="getShuffledUsersData()"
striped
caption="<i class='fa fa-align-justify'></i> Striped Table"
/>
@@ -106,7 +20,7 @@
<CRow>
<CCol lg="6">
<CTableWrapper
:items="getItems()"
:items="getShuffledUsersData()"
small
caption="<i class='fa fa-align-justify'></i> Condensed Table"
/>
@@ -114,7 +28,7 @@
<CCol lg="6">
<CTableWrapper
:items="getItems()"
:items="getShuffledUsersData()"
fixed
bordered
caption="<i class='fa fa-align-justify'></i> Bordered Table"
@@ -125,7 +39,7 @@
<CRow>
<CCol sm="12">
<CTableWrapper
:items="getItems()"
:items="getShuffledUsersData()"
hover
striped
bordered
@@ -139,7 +53,7 @@
<CRow>
<CCol sm="12">
<CTableWrapper
:items="getItems()"
:items="getShuffledUsersData()"
hover
striped
bordered
@@ -150,69 +64,17 @@
/>
</CCol>
</CRow>
</div>
</template>
<script>
import CTableWrapper from './Table.vue'
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'}
]
import usersData from '../users/UsersData'
export default {
name: 'tables',
name: 'Tables',
components: { CTableWrapper },
data () {
return {
items: items,
fields: fields,
page: 1,
pages: null,
details: [],
}
},
methods: {
getBadge (status) {
return status === 'Active' ? 'success'
: status === 'Inactive' ? 'secondary'
: status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary'
},
shuffleArray (array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1))
@@ -222,12 +84,9 @@ export default {
}
return array
},
toggleDetails (index) {
const position = this.details.indexOf(index)
position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
},
getItems () {
return this.shuffleArray(this.items.slice(0))
getShuffledUsersData () {
return this.shuffleArray(usersData.slice(0))
}
}
}
src/views/base/Tabs.vue
+17 -7
View File
@@ -5,6 +5,16 @@
<CCard>
<CCardHeader>
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>
<CCardBody>
<CTabs>
@@ -15,7 +25,7 @@
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab title-html="Profile" >
<CTab title-html="Profile">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -47,7 +57,7 @@
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab title-html="Profile" >
<CTab title-html="Profile">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -106,13 +116,13 @@
</CCardBody>
</CCard>
</CCol>
<!-- <CCol xs="12" lg="6">
<CCol xs="12" lg="6">
<CCard>
<CCardHeader>
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs add-tab-classes="c-mt-1">
<CTabs add-tab-classes="mt-1">
<CTab active>
<template slot="title">
<i class="cui-calculator"></i> {{tabs[0]}}
@@ -146,14 +156,14 @@
</CTabs>
</CCardBody>
</CCard>
</CCol> -->
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader>
Tabs vertical
</CCardHeader>
<CCardBody>
<CTabs pills vertical add-tabs-wrapper-classes="c-pl-3">
<CTabs pills vertical>
<CTab active>
<template slot="title">
<i class="cui-calculator"></i> {{tabs[0]}}
@@ -194,7 +204,7 @@
<script>
export default {
name: 'tabs',
name: 'Tabs',
data () {
return {
tabs: [
src/views/base/Tooltips.vue
+69 -69
View File
@@ -1,81 +1,81 @@
<template>
<div class="c-wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small>
<div class="card-header-actions">
<a
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>
</div>
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="6">
<div class="text-center my-3">
<CButton
color="secondary"
v-c-tooltip.hover.click="'I am a tooltip!'"
>
Hover Me
</CButton>
</div>
</CCol>
<CCol col="6">
<div class="text-center my-3">
<CButton
v-c-tooltip="{content: 'I start open!', active:true }"
color="secondary"
>
Hover me
</CButton>
</div>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Tooltips </strong>
<small>placement</small>
</CCardHeader>
<CCardBody>
<div class="my-3">
<CRow>
<CCol col="4">
<div class="c-text-center c-my-3">
<CButton v-c-tooltip.hover.click="'I am a tooltip!'">
Hover Me
</CButton>
</div>
</CCol>
<CCol col="4">
<div class="c-text-center c-my-3">
<CButton v-c-tooltip="{content: 'I start open!', active:true }">
Hover me
</CButton>
</div>
</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
md="4"
class="py-4 text-center"
v-for="placement in placements"
:key="placement"
>
<CButton
color="primary"
v-c-tooltip.hover="{
content: `Placement ${placement}`,
placement
}"
>
{{ placement }}
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Tooltips </strong>
<small>placement</small>
</CCardHeader>
<CCardBody>
<div class="c-my-3">
<CRow>
<CCol
md="4"
class="c-py-4 c-text-center"
v-for="placement in placements"
:key="placement"
>
<CButton
variant="primary"
v-c-tooltip.hover="{
content: `Placement ${placement}`,
placement
}"
>
{{ placement }}
</CButton>
</CCol>
</CRow>
</div>
</CCardBody>
</CCard>
</div>
</div>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'tooltips',
name: 'Tooltips',
data () {
return {
placements: [
src/views/buttons/BrandButtons.vue
+176 -169
View File
@@ -1,173 +1,183 @@
<template>
<div>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button</strong>
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>
&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
</code>
<hr/>
<h6>
Size Small
<small>Add <code>size="sm"</code></small>
</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button </strong> <small>Icons only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>
{{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<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>
<CCardBody>
<small>Usage </small>
<code>{{ $options.usage }}</code>
<hr/>
<h6>
Size Small
<small>Add <code>size="sm"</code></small>
</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:color="brandName"
>
<CIcon size="sm" :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:color="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:color="brandName"
>
<CIcon size="lg" :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button </strong> <small>Icons only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>{{ $options.iconsOnlyUsage }}</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:color="brandName"
>
<CIcon size="sm" :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:color="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:color="brandName"
>
<CIcon size="lg" :name="brandName"/>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button </strong> <small>Text only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button </strong> <small>Text only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>
{{ $options.textOnlyUsage }}
</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:color="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:color="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:color="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
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: [
'facebook',
'twitter',
@@ -209,12 +219,9 @@ export default {
}
</script>
<style scoped lang="css">
.c-btn {
<style scoped>
.btn {
margin-bottom: 4px;
margin-right: 6px;
}
.c-btn svg + span {
margin-left: 8px;
}
</style>
src/views/buttons/ButtonGroups.vue
+197 -209
View File
@@ -1,215 +1,203 @@
<template>
<div class="c-wrapper">
<div>
<CRow>
<CCol col="12" >
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap button group</strong>
<!-- <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">
<small class="text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton>One</CButton>
<CButton>Two</CButton>
<CButton>Three</CButton>
<CButton>Four</CButton>
<CButton class="c-d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="c-d-sm-down-none" variant="success">Success</CButton>
<CButton variant="info">Info</CButton>
<CButton variant="warning">Warn</CButton>
<CButton class="c-d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="danger">Danger</CButton>
<CButton variant="link">Link</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button group </strong>sizing
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="sm">
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="lg">
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton class="c-d-sm-down-none">Button 1</CButton>
<CButton class="c-d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" variant="success">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton class="c-d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button group </strong>vertical variation
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup vertical>
<CButton>Top</CButton>
<CButton>Middle</CButton>
<CButton>Bottom</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button toolbar </strong>
<small>with button groups</small>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<CButtonToolbar aria-label="Toolbar with button groups">
<CButtonGroup class="c-mx-1">
<CButton class="c-d-sm-down-none">&laquo;</CButton>
<CButton>&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="c-mx-1">
<CButton class="c-d-sm-down-none">Edit</CButton>
<CButton>Undo</CButton>
<CButton>Redo</CButton>
</CButtonGroup>
<CButtonGroup class="c-mx-1">
<CButton>&rsaquo;</CButton>
<CButton class="c-d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr class="c-d-sm-down-none"/>
<div>
<CButtonToolbar
aria-label="Toolbar with button groups and input groups"
class="c-d-sm-down-none"
>
<CButtonGroup size="sm" class="c-mx-1">
<CButton>New</CButton>
<CButton>Edit</CButton>
</CButtonGroup>
<CFormInput
class="c-mb-0 c-w-25 c-mx-1"
size="sm"
prepend-html="$"
append-html=".00"
value="100"
/>
<CFormSelect
class="c-mb-0 c-w-25 c-mx-1"
size="sm"
prepend-html="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="c-mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="c-mx-1 c-d-sm-down-none">
<CButton>New</CButton>
<CButton>Edit</CButton>
<CButton>Undo</CButton>
</CButtonGroup>
<CDropdown
class="c-mx-1"
placement="bottom-end"
button-content="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="c-mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap button group</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>
<CCardBody>
<div>
<CButtonGroup>
<CButton color="secondary">One</CButton>
<CButton color="secondary">Two</CButton>
<CButton color="secondary">Three</CButton>
<CButton color="secondary">Four</CButton>
<CButton color="secondary" class="d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="d-sm-down-none" color="success">Success</CButton>
<CButton color="info">Info</CButton>
<CButton color="warning">Warn</CButton>
<CButton class="d-sm-down-none" color="primary">Primary</CButton>
<CButton color="danger">Danger</CButton>
<CButton color="link">Link</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button group </strong>sizing
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="sm">
<CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="lg">
<CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
<CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" color="success">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" color="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button group </strong>vertical variation
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup vertical>
<CButton color="secondary">Top</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Bottom</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button toolbar </strong>
<small>with button groups</small>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<CButtonToolbar aria-label="Toolbar with button groups" >
<CButtonGroup class="mx-1">
<CButton color="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton color="secondary">&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton color="secondary" class="d-sm-down-none">Edit</CButton>
<CButton color="secondary">Undo</CButton>
<CButton color="secondary">Redo</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton color="secondary">&rsaquo;</CButton>
<CButton color="secondary" class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
<hr class="d-sm-down-none"/>
<CButtonToolbar
aria-label="Toolbar with button groups and input groups"
class="d-sm-down-none"
>
<CButtonGroup size="sm" class="mx-1">
<CButton color="secondary">New</CButton>
<CButton color="secondary">Edit</CButton>
</CButtonGroup>
<CInput
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="$"
append-html=".00"
value="100"
/>
<CSelect
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="mx-1">
<CButton color="secondary">Save</CButton>
<CButton color="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
<hr/>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton color="secondary">New</CButton>
<CButton color="secondary">Edit</CButton>
<CButton color="secondary">Undo</CButton>
</CButtonGroup>
<CDropdown
color="secondary"
class="mx-1"
placement="bottom-end"
button-content="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="mx-1">
<CButton color="secondary">Save</CButton>
<CButton color="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'button-groups',
data () {
return {
myToggle: false,
myToggle2: false,
itemsCount: 33
}
}
name: 'ButtonGroups',
}
</script>
src/views/buttons/Dropdowns.vue
+335 -311
View File
@@ -1,334 +1,358 @@
<template>
<div class="c-wrapper">
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Dropdown</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<CDropdown button-html="Dropdown Button" class="c-m-2">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</div>
<!-- <div>
<CDropdown button-html="Dropdown using buttons as menu items" class="c-m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
</CDropdown>
</div> -->
<div>
<CDropdown button-html="Dropdown with divider" class="c-m-2">
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Separated Item</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown button-html="Dropdown with header" class="c-m-2">
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>positioning</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
button-html="Left align"
variant="primary"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
placement="bottom-end"
button-html="Right align"
variant="primary"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
button-html="Drop-Up"
variant="info"
class="c-m-2"
dropup
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
:offset="25"
button-html="Offset Dropdown"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
split
button-html="Split Dropdown"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>hidden caret</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
variant="link"
size="lg"
buttonHtml="&#x1f50d;<span class='sr-only'>Search</span>"
no-caret
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>sizing</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
size="lg"
button-html="Large"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
size="lg"
split
button-html="Large Split"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<br>
<CDropdown
size="sm"
button-html="Small"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
split button-html="Small Split"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<!-- <CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>headers and accessibility</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
button-html="Dropdown ARIA" variant="primary"
class="c-m-2"
>
<div role="group">
<CDropdownHeader>Groups</CDropdownHeader>
<CDropdownItem>Add</CDropdownItem>
<CDropdownItem>Delete</CDropdownItem>
</div>
<div role="group">
<CDropdownHeader>Users</CDropdownHeader>
<CDropdownItem>Add</CDropdownItem>
<CDropdownItem>Delete</CDropdownItem>
</div>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>
Something <strong>not</strong> associated with user
</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol> -->
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small><code>variant</code></small>
</CCardHeader>
<CCardBody>
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Dropdown</strong>
<div class="card-header-actions">
<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>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
size="sm"
button-html="Primary"
variant="primary"
class="c-m-0"
toggler-text="Dropdown Button"
class="m-2"
color="secondary"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</div>
<!-- <div>
<CDropdown toggler-text="Dropdown using buttons as menu items" class="m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
</CDropdown>
</div> -->
<div>
<CDropdown
toggler-text="Dropdown with divider"
class="m-2"
color="secondary"
>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Separated Item</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
toggler-text="Dropdown with header"
class="m-2"
color="secondary"
>
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>positioning</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
toggler-text="Left align"
color="primary"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
button-html="Secondary"
variant="secondary"
class="c-m-0"
placement="bottom-end"
toggler-text="Right align"
color="primary"
class="m-2 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
toggler-text="Drop-Up"
color="info"
class="m-2"
placement="top-start"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
color="secondary"
:offset="25"
toggler-text="Offset Dropdown"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
color="secondary"
split
toggler-text="Split Dropdown"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>hidden caret</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
color="link"
size="lg"
:caret="false"
>
<template #toggler-content>
&#x1f50d;<span class="sr-only">Search</span>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>sizing</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
color="secondary"
size="lg"
toggler-text="Large"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
button-html="Success"
variant="success"
class="c-m-0"
color="secondary"
size="lg"
split
toggler-text="Large Split"
class="m-2"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<br>
<CDropdown
color="secondary"
size="sm"
toggler-text="Small"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown
color="secondary"
size="sm"
button-html="Warning"
variant="warning"
class="c-m-0"
split toggler-text="Small Split"
class="m-2"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>headers and accessibility</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
size="sm"
button-html="Danger"
variant="danger"
class="c-m-0"
toggler-text="Dropdown ARIA" color="primary"
class="m-2"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<div role="group">
<CDropdownHeader>Groups</CDropdownHeader>
<CDropdownItem>Add</CDropdownItem>
<CDropdownItem>Delete</CDropdownItem>
</div>
<div role="group">
<CDropdownHeader>Users</CDropdownHeader>
<CDropdownItem>Add</CDropdownItem>
<CDropdownItem>Delete</CDropdownItem>
</div>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>
Something <strong>not</strong> associated with user
</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
button-html="Info"
variant="info"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
button-html="Light"
variant="light"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
button-html="Dark"
variant="dark"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
button-html="Link"
variant="link"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small><code>color</code></small>
</CCardHeader>
<CCardBody>
<CDropdown
size="sm"
toggler-text="Primary"
color="primary"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Secondary"
color="secondary"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Success"
color="success"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Warning"
color="warning"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Danger"
color="danger"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Info"
color="info"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Light"
color="light"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Dark"
color="dark"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Link"
color="link"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</template>
src/views/buttons/StandardButtons.vue
+385 -381
View File
File diff suppressed because it is too large Load Diff
src/views/charts/CChartBarExample.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</template>
<script>
import { CChartBar } from '@coreui/coreui-vue-chartjs'
import { CChartBar } from '@coreui/coreui-chartjs/vue'
export default {
name: 'CChartBarExample',
src/views/charts/CChartBarSimple.vue
+1 -1
View File
@@ -7,7 +7,7 @@
</template>
<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'
export default {
name: 'CChartBarSimple',
src/views/charts/CChartDoughnutExample.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</template>
<script>
import { CChartDoughnut } from '@coreui/coreui-vue-chartjs'
import { CChartDoughnut } from '@coreui/coreui-chartjs/vue'
export default {
name: 'CChartDoughnutExample',
src/views/charts/CChartLineExample.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</template>
<script>
import { CChartLine } from '@coreui/coreui-vue-chartjs'
import { CChartLine } from '@coreui/coreui-chartjs/vue'
export default {
name: 'CChartLineExample',
src/views/charts/CChartLineSimple.vue
+12 -3
View File
@@ -7,7 +7,7 @@
</template>
<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'
export default {
name: 'CChartLineSimple',
@@ -30,9 +30,18 @@ export default {
type: String,
default: 'Sales'
},
pointed: Boolean
pointed: Boolean,
pointHoverBackgroundColor: String
},
computed: {
pointHoverColor () {
if (this.pointHoverBackgroundColor) {
return this.pointHoverBackgroundColor
} else if (this.backgroundColor !== 'transparent') {
return this.backgroundColor
}
return this.borderColor
},
defaultDatasets () {
return [
{
@@ -40,7 +49,7 @@ export default {
borderColor: getColor(this.borderColor),
backgroundColor: getColor(this.backgroundColor),
pointBackgroundColor: this.pointBackgroundColor,
pointHoverBackgroundColor: getColor(this.borderColor),
pointHoverBackgroundColor: getColor(this.pointHoverColor),
label: this.label
}
]
src/views/charts/CChartPieExample.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</template>
<script>
import { CChartPie } from '@coreui/coreui-vue-chartjs'
import { CChartPie } from '@coreui/coreui-chartjs/vue'
export default {
name: 'CChartPieExample',
src/views/charts/CChartPolarAreaExample.vue
+1 -1
View File
@@ -10,7 +10,7 @@
</template>
<script>
import { CChartPolarArea } from '@coreui/coreui-vue-chartjs'
import { CChartPolarArea } from '@coreui/coreui-chartjs/vue'
export default {
name: 'CChartPolarAreaExample',
src/views/charts/CChartRadarExample.vue
+1 -1
View File
@@ -10,7 +10,7 @@
</template>
<script>
import { CChartRadar } from '@coreui/coreui-vue-chartjs'
import { CChartRadar } from '@coreui/coreui-chartjs/vue'
export default {
name: 'CChartRadarExample',
src/views/Charts.vue → src/views/charts/Charts.vue
+19 -4
View File
@@ -1,8 +1,23 @@
<template>
<div>
<CCardGroup columns class="c-card-columns c-cols-2">
<CCard header-html="Line Chart" body-wrapper>
<CChartLineExample/>
<CCardGroup columns class="card-columns cols-2">
<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/>
</CCardBody>
</CCard>
<CCard header-html="Bar Chart" body-wrapper>
<CChartBarExample/>
@@ -32,7 +47,7 @@
</div>
</template>
<script>
import * as Charts from './charts/index.js'
import * as Charts from './index.js'
export default {
name: 'Charts',
src/views/charts/MainChartExample.vue
+6 -93
View File
@@ -7,7 +7,7 @@
</template>
<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'
function random (min, max) {
@@ -15,6 +15,7 @@ function random (min, max) {
}
export default {
name: 'MainChartExample',
components: {
CChartLine
},
@@ -39,7 +40,7 @@ export default {
label: 'My First dataset',
backgroundColor: hexToRgba(brandInfo, 10),
borderColor: brandInfo,
pointHoverBackgroundColor: '#fff',
pointHoverBackgroundColor: brandInfo,
borderWidth: 2,
data: data1
},
@@ -47,7 +48,7 @@ export default {
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: brandSuccess,
pointHoverBackgroundColor: '#fff',
pointHoverBackgroundColor: brandSuccess,
borderWidth: 2,
data: data2
},
@@ -55,7 +56,7 @@ export default {
label: 'My Third dataset',
backgroundColor: 'transparent',
borderColor: brandDanger,
pointHoverBackgroundColor: '#fff',
pointHoverBackgroundColor: brandDanger,
borderWidth: 1,
borderDash: [8, 5],
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>
src/views/icons/Brands.vue
+2 -9
View File
@@ -5,17 +5,10 @@
<i class="cui-globe"></i>Font Awesome brand icons
</CCardHeader>
<CCardBody>
<CRow class="c-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>
<CRow class="text-center">
<template v-for="(brand, brandName) in $options.brands">
<CCol
class="c-mb-5"
class="mb-5"
col="3"
sm="2"
:key="brandName"
src/views/icons/CoreUIIcons.vue
+109 -109
View File
@@ -1,429 +1,429 @@
<template>
<div>
<CCard >
<CCard>
<CCardHeader>
<i class="cui-pencil"></i>CoreUI Icons
<CBadge variant="info">New</CBadge>
<div class="c-card-header-actions">
<CBadge color="info">New</CBadge>
<div class="card-header-actions">
<a
href="https://github.com/coreui/coreui-icons"
rel="noreferrer noopener"
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>
</div>
</CCardHeader>
<CCardBody>
<!-- <CRow class="c-text-center c-mb-5">
<!-- <CRow class="text-center mb-5">
<template v-for="(name, key) in $options.iconNames">
<CCol :key="key" col="6" sm="4" md="3" xl="2" >
<CIcon :name="name" width="24" class="c-mt-4"/>
<CCol :key="key" col="6" sm="4" md="3" xl="2">
<CIcon :name="name" width="24" class="mt-4"/>
<div>{{name}}</div>
</CCol>
</template>
</CRow>
-->
<CRow class="c-text-center ">
<CRow class="text-center ">
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
<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>
</CCol>
</CRow>
src/views/icons/Flags.vue
+6 -4
View File
@@ -5,8 +5,8 @@
<i class="cui-globe"></i> Flags
</CCardHeader>
<CCardBody>
<CRow class="c-text-center">
<CCol class="c-mb-5" col="12">
<CRow class="text-center">
<CCol class="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
@@ -15,7 +15,7 @@
</CCol>
<template v-for="(flag, key) in displayedFlags">
<CCol
class="c-mb-5"
class="mb-5"
col="3"
sm="2"
:key="key"
@@ -33,9 +33,11 @@
<script>
import { iconSet } from '@coreui/icons/flags'
export default {
name: 'flags',
name: 'Flags',
iconSet,
computed: {
// Avoid duplication caused by displaying 1x1 and 4x3 formats
// (adding Q to name makes icon quadratic)
displayedFlags () {
return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
}
src/views/notifications/Alerts.vue
+176 -171
View File
@@ -1,182 +1,187 @@
<template>
<div class="c-wrapper">
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Alert</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<p></p>
<CAlert show variant="primary">Primary Alert</CAlert>
<CAlert show variant="secondary">Secondary Alert</CAlert>
<CAlert show variant="success">Success Alert</CAlert>
<CAlert show variant="danger">Danger Alert</CAlert>
<CAlert show variant="warning">Warning Alert</CAlert>
<CAlert show variant="info">Info Alert</CAlert>
<CAlert show variant="light">Light Alert</CAlert>
<CAlert show variant="dark">Dark Alert</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alert
<small> use <code>.c-alert-link</code> to provide links</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert show variant="primary">
Primary Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="secondary">
Secondary Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="success">
Success Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="danger">
Danger Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="warning">
Warning Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="info">
Info Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="light">
Light Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="dark">
Dark Alert with
<CLink href="#" class="c-alert-link">an example link</CLink>
.
</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
</CCardHeader>
<CCardBody>
<CAlert show variant="success">
<h4 class="c-alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message.
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.
</p>
<hr>
<p class="c-mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</CAlert>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts
<small>dismissible</small>
</CCardHeader>
<CCardBody>
<CAlert
dismissible
:show.sync="dismissibleAlerts[0]"
>
Dismissible Alert!
</CAlert>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Alert</strong>
<div class="card-header-actions">
<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>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<p></p>
<CAlert show color="primary">Primary Alert</CAlert>
<CAlert show color="secondary">Secondary Alert</CAlert>
<CAlert show color="success">Success Alert</CAlert>
<CAlert show color="danger">Danger Alert</CAlert>
<CAlert show color="warning">Warning Alert</CAlert>
<CAlert show color="info">Info Alert</CAlert>
<CAlert show color="light">Light Alert</CAlert>
<CAlert show color="dark">Dark Alert</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alert
<small> use <code>.alert-link</code> to provide links</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert show color="primary">
Primary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show color="secondary">
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show color="success">
Success Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show color="danger">
Danger Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show color="warning">
Warning Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show color="info">
Info Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show color="light">
Light Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show color="dark">
Dark Alert with
<CLink href="#" class="alert-link">an example link</CLink>
.
</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
</CCardHeader>
<CCardBody>
<CAlert show color="success">
<h4 class="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message.
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.
</p>
<hr>
<p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</CAlert>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts
<small>dismissible</small>
</CCardHeader>
<CCardBody>
<CAlert
color="secondary"
closeButton
:show.sync="dismissibleAlerts[0]"
>
Dismissible Alert!
</CAlert>
<CAlert
dismissible
fade
:show.sync="dismissibleAlerts[1]"
>
Dismissible Alert with fade effect!
</CAlert>
<CAlert
color="secondary"
closeButton
fade
:show.sync="dismissibleAlerts[1]"
>
Dismissible Alert with fade effect!
</CAlert>
<CAlert
:show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}"
class="c-alert-dismissible"
>
Dismissible Alert with custom button!
<CButton
class="c-position-absolute"
variant="primary"
style="right:10px;top: 50%;transform: translateY(-50%);"
textHtml="<i>Close</i>"
@click="dismiss"
/>
</CAlert>
<CButton
@click="showDismissibleAlerts"
variant="info"
class="c-m-1"
>
Show dismissible alerts
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts
<small>auto dismissible</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert
:show.sync="dismissCountDown"
dismissible
variant="warning"
fade
>
Alert will dismiss after
<strong>{{dismissCountDown}}</strong> seconds...
</CAlert>
<CAlert
color="secondary"
:show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}"
class="alert-dismissible"
>
Dismissible Alert with custom button!
<CButton
class="position-absolute"
color="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);"
@click="dismiss"
>
<i>Close</i>
</CButton>
</CAlert>
<CButton
@click="showDismissibleAlerts"
color="info"
class="m-1"
>
Show dismissible alerts
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts
<small>auto dismissible</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert
:show.sync="dismissCountDown"
closeButton
color="warning"
fade
>
Alert will dismiss after
<strong>{{dismissCountDown}}</strong> seconds...
</CAlert>
<CAlert
:show.sync="dismissCountDown"
dismissible
variant="info"
>
Alert will dismiss after {{dismissCountDown}} seconds...
<CProgress
variant="info"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
/>
</CAlert>
<CButton @click="showAlert" variant="info" class="c-m-1">
Show alert with timer
</CButton>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
<CAlert
:show.sync="dismissCountDown"
closeButton
color="info"
>
Alert will dismiss after {{dismissCountDown}} seconds...
<CProgress
color="info"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
/>
</CAlert>
<CButton @click="showAlert" color="info" class="m-1">
Show alert with timer
</CButton>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'alerts',
name: 'Alerts',
data () {
return {
dismissSecs: 10,
src/views/notifications/Badges.vue
+84 -83
View File
@@ -1,90 +1,91 @@
<template functional>
<div class="c-wrapper">
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<h2>Example heading <CBadge>New</CBadge></h2>
<h3>Example heading <CBadge>New</CBadge></h3>
<h4>Example heading <CBadge>New</CBadge></h4>
<h5>Example heading <CBadge>New</CBadge></h5>
<h6>Example heading <CBadge>New</CBadge></h6>
</CCardBody>
<CCardFooter>
<CButton variant="primary">
Notifications
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge variant="primary">Primary</CBadge>
<CBadge variant="secondary">Secondary</CBadge>
<CBadge variant="success">Success</CBadge>
<CBadge variant="danger">Danger</CBadge>
<CBadge variant="warning">Warning</CBadge>
<CBadge variant="info">Info</CBadge>
<CBadge variant="light">Light</CBadge>
<CBadge variant="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>pills</small>
</CCardHeader>
<CCardBody>
<CBadge pill variant="primary">Primary</CBadge>
<CBadge pill variant="secondary">Secondary</CBadge>
<CBadge pill variant="success">Success</CBadge>
<CBadge pill variant="danger">Danger</CBadge>
<CBadge pill variant="warning">Warning</CBadge>
<CBadge pill variant="info">Info</CBadge>
<CBadge pill variant="light">Light</CBadge>
<CBadge pill variant="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>actionable</small>
</CCardHeader>
<CCardBody>
<CBadge href="#" variant="primary">Primary</CBadge>
<CBadge href="#" variant="secondary">Secondary</CBadge>
<CBadge href="#" variant="success">Success</CBadge>
<CBadge href="#" variant="danger">Danger</CBadge>
<CBadge href="#" variant="warning">Warning</CBadge>
<CBadge href="#" variant="info">Info</CBadge>
<CBadge href="#" variant="light">Light</CBadge>
<CBadge href="#" variant="dark">Dark</CBadge>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong>
<div class="card-header-actions">
<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>
</a>
</div>
</CCardHeader>
<CCardBody>
<h2>Example heading <CBadge color="primary">New</CBadge></h2>
<h3>Example heading <CBadge color="primary">New</CBadge></h3>
<h4>Example heading <CBadge color="primary">New</CBadge></h4>
<h5>Example heading <CBadge color="primary">New</CBadge></h5>
<h6>Example heading <CBadge color="primary">New</CBadge></h6>
</CCardBody>
<CCardFooter>
<CButton color="primary">
Notifications
<CBadge color="light" class="ml-2 position-static">4</CBadge>
</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge color="primary">Primary</CBadge>
<CBadge color="secondary">Secondary</CBadge>
<CBadge color="success">Success</CBadge>
<CBadge color="danger">Danger</CBadge>
<CBadge color="warning">Warning</CBadge>
<CBadge color="info">Info</CBadge>
<CBadge color="light">Light</CBadge>
<CBadge color="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>pills</small>
</CCardHeader>
<CCardBody>
<CBadge pill color="primary">Primary</CBadge>
<CBadge pill color="secondary">Secondary</CBadge>
<CBadge pill color="success">Success</CBadge>
<CBadge pill color="danger">Danger</CBadge>
<CBadge pill color="warning">Warning</CBadge>
<CBadge pill color="info">Info</CBadge>
<CBadge pill color="light">Light</CBadge>
<CBadge pill color="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>actionable</small>
</CCardHeader>
<CCardBody>
<CBadge href="#" color="primary">Primary</CBadge>
<CBadge href="#" color="secondary">Secondary</CBadge>
<CBadge href="#" color="success">Success</CBadge>
<CBadge href="#" color="danger">Danger</CBadge>
<CBadge href="#" color="warning">Warning</CBadge>
<CBadge href="#" color="info">Info</CBadge>
<CBadge href="#" color="light">Light</CBadge>
<CBadge href="#" color="dark">Dark</CBadge>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'badges'
name: 'Badges'
}
</script>
src/views/notifications/Modals.vue
+41 -31
View File
@@ -1,39 +1,49 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<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>
<CCardBody>
<CButton variant="secondary" @click="myModal = true" class="c-mr-1">
<CButton color="secondary" @click="myModal = true" class="mr-1">
Launch demo modal
</CButton>
<CButton variant="secondary" @click="largeModal = true" class="c-mr-1">
<CButton color="secondary" @click="largeModal = true" class="mr-1">
Launch large modal
</CButton>
<CButton variant="secondary" @click="smallModal = true" class="c-mr-1">
<CButton color="secondary" @click="smallModal = true" class="mr-1">
Launch small modal
</CButton>
<hr>
<CButton variant="primary" @click="primaryModal = true" class="c-mr-1">
<CButton color="primary" @click="primaryModal = true" class="mr-1">
Launch primary modal
</CButton>
<CButton variant="success" @click="successModal = true" class="c-mr-1">
<CButton color="success" @click="successModal = true" class="mr-1">
Launch success modal
</CButton>
<CButton variant="warning" @click="warningModal = true" class="c-mr-1">
<CButton color="warning" @click="warningModal = true" class="mr-1">
Launch warning modal
</CButton>
<CButton variant="danger" @click="dangerModal = true" class="c-mr-1">
<CButton color="danger" @click="dangerModal = true" class="mr-1">
Launch danger modal
</CButton>
<CButton variant="info" @click="infoModal = true" class="c-mr-1">
<CButton color="info" @click="infoModal = true" class="mr-1">
Launch info modal
</CButton>
<CButton variant="dark" @click="darkModal = true" class="c-mr-1">
<CButton color="dark" @click="darkModal = true" class="mr-1">
Launch dark modal
</CButton>
</CCardBody>
@@ -44,7 +54,7 @@
<!-- Modal Component -->
<CModal
title="Modal title"
:visible.sync="myModal"
:show.sync="myModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -56,7 +66,7 @@
<CModal
title="Modal title"
size="lg"
:visible.sync="largeModal"
:show.sync="largeModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -68,7 +78,7 @@
<CModal
title="Modal title"
size="sm"
:visible.sync="smallModal"
:show.sync="smallModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -80,7 +90,7 @@
<CModal
title="Modal title"
:visible.sync="primaryModal"
:show.sync="primaryModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -91,8 +101,8 @@
</CModal>
<CModal
title="Modal title"
variant="success"
:visible.sync="successModal"
color="success"
:show.sync="successModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -103,8 +113,8 @@
</CModal>
<CModal
title="Modal title"
variant="warning"
:visible.sync="warningModal"
color="warning"
:show.sync="warningModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -115,8 +125,8 @@
</CModal>
<CModal
title="Modal title"
variant="danger"
:visible.sync="dangerModal"
color="danger"
:show.sync="dangerModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -127,8 +137,8 @@
</CModal>
<CModal
title="Modal title"
variant="info"
:visible.sync="infoModal"
color="info"
:show.sync="infoModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -138,12 +148,12 @@
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CModal>
<CModal
:visible.sync="darkModal"
:show.sync="darkModal"
:no-close-on-backdrop="true"
:centered="true"
title="Modal title 2"
size="lg"
variant="dark"
color="dark"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
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
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<template #header="{hide}">
<h6 class="c-modal-title">Custom smaller modal title</h6>
<CButtonClose @click="hide()" class="c-text-white"/>
<template #header>
<h6 class="modal-title">Custom smaller modal title</h6>
<CButtonClose @click="darkModal = false" class="text-white"/>
</template>
<template #footer="{hide}">
<CButton @click="hide()" variant="danger">Discard</CButton>
<CButton @click="hide(true)" variant="success">Accept</CButton>
<template #footer>
<CButton @click="darkModal = false" color="danger">Discard</CButton>
<CButton @click="darkModal = false" color="success">Accept</CButton>
</template>
</CModal>
</div>
@@ -166,7 +176,7 @@
<script>
export default {
name: 'modals',
name: 'Modals',
data () {
return {
myModal: false,
src/views/pages/Login.vue
+12 -12
View File
@@ -1,19 +1,19 @@
<template>
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
<CRow class="c-justify-content-center">
<CContainer class="d-flex align-items-center min-vh-100">
<CRow class="justify-content-center">
<CCol md="8">
<CCardGroup>
<CCard class="c-p-4">
<CCard class="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p class="c-text-muted">Sign In to your account</p>
<CFormInput
<p class="text-muted">Sign In to your account</p>
<CInput
prependHtml="<i class='cui-user'></i>"
placeholder="Username"
autocomplete="username email"
/>
<CFormInput
<CInput
prependHtml="<i class='cui-lock-locked'></i>"
placeholder="Password"
type="password"
@@ -21,25 +21,25 @@
/>
<CRow>
<CCol col="6">
<CButton variant="primary" class="c-px-4">Login</CButton>
<CButton color="primary" class="px-4">Login</CButton>
</CCol>
<CCol col="6" class="c-text-right">
<CButton variant="link" class="c-px-0">Forgot password?</CButton>
<CCol col="6" class="text-right">
<CButton color="link" class="px-0">Forgot password?</CButton>
</CCol>
</CRow>
</CForm>
</CCardBody>
</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%"
body-wrapper
>
<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>
<CButton
variant="primary"
class="c-active c-mt-3"
color="primary"
class="active mt-3"
>
Register Now!
</CButton>
src/views/pages/Page404.vue
+11 -11
View File
@@ -1,22 +1,22 @@
<template>
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
<CRow class="c-w-100 c-justify-content-center">
<CContainer class="d-flex align-items-center min-vh-100">
<CRow class="w-100 justify-content-center">
<CCol md="6">
<div class="c-w-100">
<div class="c-clearfix">
<h1 class="c-float-left c-display-3 c-mr-4">404</h1>
<h4 class="c-pt-3">Oops! You're lost.</h4>
<p class="c-text-muted">The page you are looking for was not found.</p>
<div class="w-100">
<div class="clearfix">
<h1 class="float-left display-3 mr-4">404</h1>
<h4 class="pt-3">Oops! You're lost.</h4>
<p class="text-muted">The page you are looking for was not found.</p>
</div>
<CFormInput
class="c-mb-0"
<CInput
class="mb-3"
prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?"
>
<template #append>
<CButton variant="info">Search</CButton>
<CButton color="info">Search</CButton>
</template>
</CFormInput>
</CInput>
</div>
</CCol>
</CRow>
src/views/pages/Page500.vue
+10 -10
View File
@@ -1,21 +1,21 @@
<template>
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
<CRow class="c-w-100 c-justify-content-center">
<CContainer class="d-flex align-items-center min-vh-100">
<CRow class="w-100 justify-content-center">
<CCol md="6">
<div class="c-clearfix">
<h1 class="c-float-left c-display-3 c-mr-4">500</h1>
<h4 class="c-pt-3">Houston, we have a problem!</h4>
<p class="c-text-muted">The page you are looking for is temporarily unavailable.</p>
<div class="clearfix">
<h1 class="float-left display-3 mr-4">500</h1>
<h4 class="pt-3">Houston, we have a problem!</h4>
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
</div>
<CFormInput
class="c-mb-0"
<CInput
class="mb-3"
prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?"
>
<template #append>
<CButton variant="info">Search</CButton>
<CButton color="info">Search</CButton>
</template>
</CFormInput>
</CInput>
</CCol>
</CRow>
</CContainer>
src/views/pages/Register.vue
+18 -14
View File
@@ -1,45 +1,49 @@
<template>
<CContainer class="c-min-vh-100 c-d-flex c-align-items-center">
<CRow class="c-w-100 c-justify-content-center">
<CContainer class="min-vh-100 d-flex align-items-center">
<CRow class="w-100 justify-content-center">
<CCol md="6" sm="8">
<CCard class="c-mx-4">
<CCardBody class="c-p-4">
<CCard class="mx-4 mb-0">
<CCardBody class="p-4">
<CForm>
<h1>Register</h1>
<p class="c-text-muted">Create your account</p>
<CFormInput
<p class="text-muted">Create your account</p>
<CInput
placeholder="Username"
prependHtml="<i class='cui-user'></i>"
autocomplete="username"
/>
<CFormInput
<CInput
placeholder="Email"
prepend-html="@"
autocomplete="email"
/>
<CFormInput
<CInput
placeholder="Password"
type="password"
prependHtml="<i class='cui-lock-locked'></i>"
autocomplete="new-password"
/>
<CFormInput
<CInput
placeholder="Repeat password"
type="password"
prependHtml="<i class='cui-lock-locked'></i>"
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>
</CCardBody>
<CCardFooter class="c-p-4">
<CCardFooter class="p-4">
<CRow>
<CCol col="6">
<CButton block variant="facebook" textHtml="Facebook"/>
<CButton block color="facebook">
Facebook
</CButton>
</CCol>
<CCol col="6">
<CButton block variant="twitter" textHtml="Twitter"/>
<CButton block color="twitter">
Twitter
</CButton>
</CCol>
</CRow>
</CCardFooter>
src/views/theme/ColorTheme.vue
+3 -6
View File
@@ -1,7 +1,7 @@
<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
: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%' }"
></div>
<slot></slot>
@@ -15,10 +15,7 @@ export default {
name: 'ColorTheme',
components: { ColorView },
props: {
color: {
type: String,
default: 'c-bg-secondary'
}
color: String,
}
}
</script>
src/views/theme/ColorView.vue
+5 -5
View File
@@ -1,13 +1,13 @@
<template>
<table class="c-w-100">
<table class="w-100">
<tbody>
<tr>
<td class="c-text-muted">HEX:</td>
<td class="c-font-weight-bold">{{this.hexColor}}</td>
<td class="text-muted">HEX:</td>
<td class="font-weight-bold">{{this.hexColor}}</td>
</tr>
<tr>
<td class="c-text-muted">RGB:</td>
<td class="c-font-weight-bold">{{this.bgColor}}</td>
<td class="text-muted">RGB:</td>
<td class="font-weight-bold">{{this.bgColor}}</td>
</tr>
</tbody>
</table>
src/views/theme/Colors.vue
+19 -38
View File
@@ -1,21 +1,21 @@
<template>
<div>
<CCard >
<CCard>
<CCardHeader>
<i class="cui-drop"></i> Theme colors
</CCardHeader>
<CCardBody>
<CRow>
<ColorTheme color="c-bg-primary">
<ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6>
</ColorTheme>
<ColorTheme color="c-bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
<ColorTheme color="c-bg-success"><h6>Brand Success Color</h6></ColorTheme>
<ColorTheme color="c-bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
<ColorTheme color="c-bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
<ColorTheme color="c-bg-info"><h6>Brand Info Color</h6></ColorTheme>
<ColorTheme color="c-bg-light"><h6>Brand Light Color</h6></ColorTheme>
<ColorTheme color="c-bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
</CRow>
</CCardBody>
</CCard>
@@ -25,34 +25,15 @@
</CCardHeader>
<CCardBody>
<CRow>
<ColorTheme color="c-bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
<ColorTheme color="c-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>
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
</CRow>
</CCardBody>
</CCard>
@@ -62,7 +43,7 @@
<script>
import ColorTheme from './ColorTheme'
export default {
name: 'colors',
name: 'Colors',
components: { ColorTheme }
}
</script>
src/views/theme/Typography.vue
+60 -60
View File
@@ -1,13 +1,13 @@
<template>
<div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Headings
</div>
<div class="c-card-body">
<div class="card-body">
<p>Documentation and examples for Bootstrap typography,
including global settings, headings, body text, lists, and more.</p>
<table class="c-table">
<table class="table">
<thead>
<tr>
<th>Heading</th>
@@ -18,131 +18,131 @@
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h1&gt;&lt;/h1&gt;
</code>
</p>
</td>
<td><span class="c-h1">h1. Bootstrap heading</span></td>
<td><span class="h1">h1. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h2&gt;&lt;/h2&gt;
</code>
</p>
</td>
<td><span class="c-h2">h2. Bootstrap heading</span></td>
<td><span class="h2">h2. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h3&gt;&lt;/h3&gt;
</code>
</p>
</td>
<td><span class="c-h3">h3. Bootstrap heading</span></td>
<td><span class="h3">h3. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h4&gt;&lt;/h4&gt;
</code>
</p>
</td>
<td><span class="c-h4">h4. Bootstrap heading</span></td>
<td><span class="h4">h4. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h5&gt;&lt;/h5&gt;
</code>
</p>
</td>
<td><span class="c-h5">h5. Bootstrap heading</span></td>
<td><span class="h5">h5. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h6&gt;&lt;/h6&gt;
</code>
</p>
</td>
<td><span class="c-h6">h6. Bootstrap heading</span></td>
<td><span class="h6">h6. Bootstrap heading</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Headings
</div>
<div class="c-card-body">
<div class="card-body">
<p>
<code class="c-highlighter-rouge">.h1</code> through
<code class="c-highlighter-rouge">.h6</code>
<code class="highlighter-rouge">.h1</code> through
<code class="highlighter-rouge">.h6</code>
classes are also available, for when you want to match the font
styling of a heading but cannot use the associated HTML element.
</p>
<div class="c-bd-example">
<p class="c-h1">h1. Bootstrap heading</p>
<p class="c-h2">h2. Bootstrap heading</p>
<p class="c-h3">h3. Bootstrap heading</p>
<p class="c-h4">h4. Bootstrap heading</p>
<p class="c-h5">h5. Bootstrap heading</p>
<p class="c-h6">h6. Bootstrap heading</p>
<div class="bd-example">
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
</div>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Display headings
</div>
<div class="c-card-body">
<div class="card-body">
<p>
Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out,
consider using a <strong>display heading</strong>—a larger,
slightly more opinionated heading style.
</p>
<div class="c-bd-example c-bd-example-type">
<table class="c-table">
<div class="bd-example bd-example-type">
<table class="table">
<tbody>
<tr>
<td><span class="c-display-1">Display 1</span></td>
<td><span class="display-1">Display 1</span></td>
</tr>
<tr>
<td><span class="c-display-2">Display 2</span></td>
<td><span class="display-2">Display 2</span></td>
</tr>
<tr>
<td><span class="c-display-3">Display 3</span></td>
<td><span class="display-3">Display 3</span></td>
</tr>
<tr>
<td><span class="c-display-4">Display 4</span></td>
<td><span class="display-4">Display 4</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Inline text elements
</div>
<div class="c-card-body">
<div class="card-body">
<p>
Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out,
consider using a <strong>display heading</strong>—a larger,
slightly more opinionated heading style.
</p>
<div class="c-bd-example">
<div class="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>
This line of text is meant to be treated as deleted text.
@@ -162,46 +162,46 @@
</div>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Description list alignment
</div>
<div class="c-card-body">
<div class="card-body">
<p>
Align terms and descriptions horizontally by using our grid system’s
predefined classes (or semantic mixins). For longer terms, you can
optionally add a <code class="highlighter-rouge">.text-truncate</code>
class to truncate the text with an ellipsis.
</p>
<div class="c-bd-example">
<dl class="c-row">
<dt class="c-col-sm-3">Description lists</dt>
<dd class="c-col-sm-9">
<div class="bd-example">
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">
A description list is perfect for defining terms.
</dd>
<dt class="c-col-sm-3">Euismod</dt>
<dd class="c-col-sm-9">
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<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>
</dd>
<dt class="c-col-sm-3">Malesuada porta</dt>
<dd class="c-col-sm-9">
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">
Etiam porta sem malesuada magna mollis euismod.
</dd>
<dt class="c-col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="c-col-sm-9">
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</dd>
<dt class="c-col-sm-3">Nesting</dt>
<dd class="c-col-sm-9">
<dl class="c-row">
<dt class="c-col-sm-4">Nested definition list</dt>
<dd class="c-col-sm-8">
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
</dd>
</dl>
@@ -215,6 +215,6 @@
<script>
export default {
name: 'typography'
name: 'Typography'
}
</script>
src/views/users/User.vue
+7 -14
View File
@@ -10,12 +10,12 @@
striped
small
fixed
:items="items($route.params.id)"
:items="getUserData($route.params.id)"
:fields="$options.fields"
/>
</CCardBody>
<CCardFooter>
<CButton @click="goBack">Back</CButton>
<CButton color="primary" @click="goBack">Back</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -26,25 +26,18 @@
import usersData from './UsersData'
export default {
name: 'User',
props: {
caption: {
type: String,
default: 'User id'
},
},
fields: [
{ key: 'key', _style:'width:150px'},
{ key: 'value' , _style:'width:150px;', _classes:'font-weight-bold'}
{ key: 'key', _style: 'width:150px' },
{ key: 'value' , _style: 'width:150px;' }
],
methods: {
items (id) {
const user = usersData.find( user => user.id.toString() === id)
getUserData (id) {
const user = usersData.find((user, index) => index + 1 == id)
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() {
this.$router.go(-1)
// this.$router.replace({path: '/users'})
}
}
}
src/views/users/Users.vue
+25 -32
View File
@@ -2,28 +2,31 @@
<CRow>
<CCol col="12" xl="8">
<transition name="slide">
<CCard header-html="users" body-wrapper>
<CCard header-html="Users" body-wrapper>
<CTable
hover
striped
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:items-per-page="perPage"
@row-clicked="rowClicked"
:pagination="$options.paginationProps"
index-column
clickable-rows
>
<td slot="id" slot-scope="data">
<strong>{{data.item.id}}</strong>
</td>
<td slot="name" slot-scope="data">
<strong>{{data.item.name}}</strong>
</td>
<td slot="status" slot-scope="data">
<CBadge :variant="getBadge(data.item.status)">
{{data.item.status}}
</CBadge>
</td>
<template #username="data">
<td>
<strong>{{data.item.username}}</strong>
</td>
</template>
<template #status="data">
<td>
<CBadge :color="getBadge(data.item.status)">
{{data.item.status}}
</CBadge>
</td>
</template>
</CTable>
</CCard>
</transition>
@@ -37,22 +40,19 @@ export default {
name: 'Users',
data: () => {
return {
items: usersData.filter((user) => user.id < 42),
items: usersData,
fields: [
{key: 'id'},
{key: 'name'},
{key: 'registered'},
{key: 'role'},
{key: 'status'}
{ key: 'username', label: 'Name' },
{ key: 'registered' },
{ key: 'role' },
{ key: 'status' }
],
currentPage: 1,
perPage: 5,
totalRows: 0
}
},
paginationProps: {
align: 'center',
hideDoubleArrows: true,
doubleArrows: false,
previousButtonHtml: 'prev',
nextButtonHtml: 'next'
},
@@ -66,17 +66,10 @@ export default {
userLink (id) {
return `users/${id.toString()}`
},
rowClicked (item) {
const userLink = this.userLink(item.id)
rowClicked (item, index) {
const userLink = this.userLink(index + 1)
this.$router.push({path: userLink})
}
}
}
</script>
<style scoped>
.c-card-body >>> table > tbody > tr > td {
cursor: pointer;
}
</style>
src/views/users/UsersData.js
+27 -27
View File
@@ -1,31 +1,31 @@
const usersData = [
// {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
{id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
{id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
{ username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
{ username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-success'},
{ username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
{ username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
{ username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
]
export default usersData
src/views/widgets/Widgets.vue
+82 -68
View File
@@ -8,10 +8,23 @@
footer="Lorem ipsum dolor sit amet enim."
>
<CProgress
variant="success"
color="success"
: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>
</CCol>
<CCol sm="6" lg="3">
@@ -19,7 +32,7 @@
header="12.124"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="info"
color="info"
:value="25"
/>
</CCol>
@@ -28,7 +41,7 @@
header="$98.111,00"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="warning"
color="warning"
:value="25"
/>
</CCol>
@@ -37,7 +50,7 @@
header="2 TB"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="danger"
color="danger"
:value="25"
/>
</CCol>
@@ -48,7 +61,7 @@
header="89.9%"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="success"
color="success"
inverse :value="25"
/>
</CCol>
@@ -57,7 +70,7 @@
header="12.124"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="info"
color="info"
inverse
:value="25"
/>
@@ -67,7 +80,7 @@
header="$98.111,00"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="warning"
color="warning"
inverse
:value="25"
/>
@@ -77,7 +90,7 @@
header="2 TB"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="danger"
color="danger"
inverse
:value="25"
/>
@@ -88,7 +101,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="primary"
color="primary"
>
<CIcon name="settings" width="24"/>
</CWidgetIcon>
@@ -97,7 +110,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="info"
color="info"
>
<CIcon name="laptop" width="24"/>
</CWidgetIcon>
@@ -106,7 +119,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="warning"
color="warning"
>
<CIcon name="moon" width="24"/>
</CWidgetIcon>
@@ -115,7 +128,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="danger"
color="danger"
>
<CIcon name="bell" width="24"/>
</CWidgetIcon>
@@ -126,8 +139,8 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="primary"
no-padding
color="primary"
:icon-padding="false"
>
<CIcon name="settings" width="24"/>
</CWidgetIcon>
@@ -136,8 +149,8 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="info"
no-padding
color="info"
:icon-padding="false"
>
<CIcon name="laptop" width="24"/>
</CWidgetIcon>
@@ -146,8 +159,8 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="warning"
no-padding
color="warning"
:icon-padding="false"
>
<CIcon name="moon" width="24"/>
</CWidgetIcon>
@@ -156,8 +169,8 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="danger"
no-padding
color="danger"
:icon-padding="false"
>
<CIcon name="bell" width="24"/>
</CWidgetIcon>
@@ -168,38 +181,38 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="primary"
no-padding
color="primary"
:icon-padding="false"
>
<CIcon name="settings" class="c-mx-5 " width="24"/>
<CIcon name="settings" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="info"
no-padding
color="info"
:icon-padding="false"
>
<CIcon name="laptop" class="c-mx-5 " width="24"/>
<CIcon name="laptop" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="warning"
no-padding
color="warning"
:icon-padding="false"
>
<CIcon name="moon" class="c-mx-5 " width="24"/>
<CIcon name="moon" class="mx-5 " width="24"/>
<template #footer>
<CCardFooter class="c-card-footer c-px-3 c-py-2">
<CCardFooter class="card-footer px-3 py-2">
<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/"
>
View more
<CIcon name="arrowRight" class="c-float-right" width="16"/>
<CIcon name="arrowRight" class="float-right" width="16"/>
</CLink>
</CCardFooter>
</template>
@@ -211,57 +224,57 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="primary"
no-padding
color="primary"
:icon-padding="false"
link="#"
>
<CIcon name="settings" class="c-mx-5 " width="24"/>
<CIcon name="settings" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="info"
no-padding
color="info"
:icon-padding="false"
link="#"
>
<CIcon name="laptop" class="c-mx-5 " width="24"/>
<CIcon name="laptop" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="warning"
no-padding
color="warning"
:icon-padding="false"
link="#"
>
<CIcon name="moon" class="c-mx-5" width="24"/>
<CIcon name="moon" class="mx-5" width="24"/>
</CWidgetIcon>
</CCol>
</CRow> -->
<WidgetsBrand noCharts/>
<WidgetsBrand/>
<CCardGroup class="c-mb-4">
<CCardGroup class="mb-4">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
variant="info"
color="info"
>
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
text="New Clients"
variant="success"
color="success"
>
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
text="Products sold"
variant="warning"
color="warning"
>
<CIcon name="basketLoaded" height="36"/>
</CWidgetProgressIcon>
@@ -274,16 +287,16 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
variant="danger"
color="danger"
>
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup>
<CCardGroup class="c-mb-4">
<CCardGroup class="mb-4">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
variant="info"
color="info"
inverse
>
<CIcon name="people" height="36"/>
@@ -291,7 +304,7 @@
<CWidgetProgressIcon
header="385"
text="New Clients"
variant="success"
color="success"
inverse
>
<CIcon name="userFollow" height="36"/>
@@ -299,7 +312,7 @@
<CWidgetProgressIcon
header="1238"
text="Products sold"
variant="warning"
color="warning"
inverse
>
<CIcon name="basketLoaded" height="36"/>
@@ -307,7 +320,7 @@
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
variant="primary"
color="primary"
inverse
>
<CIcon name="chartPie" height="36"/>
@@ -315,7 +328,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
variant="danger"
color="danger"
inverse
>
<CIcon name="speedometer" height="36"/>
@@ -326,7 +339,7 @@
<CWidgetProgressIcon
header="87.500"
text="Visitors"
variant="info"
color="info"
>
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
@@ -335,7 +348,7 @@
<CWidgetProgressIcon
header="385"
text="New Clients"
variant="success"
color="success"
>
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
@@ -344,7 +357,7 @@
<CWidgetProgressIcon
header="1238"
text="Products sold"
variant="warning"
color="warning"
>
<CIcon name="basketLoaded" height="36"/>
</CWidgetProgressIcon>
@@ -353,7 +366,7 @@
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
variant="primary"
color="primary"
>
<CIcon name="chartPie" height="36"/>
</CWidgetProgressIcon>
@@ -362,7 +375,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
variant="danger"
color="danger"
>
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
@@ -371,7 +384,7 @@
<CWidgetProgressIcon
header="972"
text="comments"
variant="info"
color="info"
>
<CIcon name="speech" height="36"/>
</CWidgetProgressIcon>
@@ -382,7 +395,7 @@
<CWidgetProgressIcon
header="87.500"
text="Visitors"
variant="info"
color="info"
inverse
>
<CIcon name="people" height="36"/>
@@ -392,7 +405,7 @@
<CWidgetProgressIcon
header="385"
text="New Clients"
variant="success"
color="success"
inverse
>
<CIcon name="userFollow" height="36"/>
@@ -402,7 +415,7 @@
<CWidgetProgressIcon
header="1238"
text="Products sold"
variant="warning"
color="warning"
inverse
>
<CIcon name="basketLoaded" height="36"/>
@@ -412,7 +425,7 @@
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
variant="primary"
color="primary"
inverse
>
<CIcon name="chartPie" height="36"/>
@@ -422,7 +435,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
variant="danger"
color="danger"
inverse
>
<CIcon name="speedometer" height="36"/>
@@ -432,7 +445,7 @@
<CWidgetProgressIcon
header="972"
text="comments"
variant="info"
color="info"
inverse
>
<CIcon name="speech" height="36"/>
@@ -443,6 +456,7 @@
<CRow>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="primary"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
@@ -454,7 +468,7 @@
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
variant="success"
color="success"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
@@ -466,7 +480,7 @@
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
variant="danger"
color="danger"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
@@ -478,7 +492,7 @@
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
variant="warning"
color="warning"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
src/views/widgets/WidgetsBrand.vue
+39 -35
View File
@@ -3,20 +3,19 @@
<template v-if="!noCharts">
<CCol md="3" sm="6">
<CWidgetBrand
variant="facebook"
color="facebook"
right-header="89k"
right-footer="friends"
left-header="459"
left-footer="feeds"
>
<CIcon
name="socialFacebook"
height="56"
class="c-my-4"
name="facebook"
height="52"
class="my-4"
/>
<CChartLineSimple
style="height:100px"
class="c-position-absolute"
class="c-chart-brand"
background-color="rgba(255,255,255,.1)"
:data-points="[65, 59, 84, 84, 51, 55, 40]"
label="Friends"
@@ -26,20 +25,19 @@
</CCol>
<CCol md="3" sm="6">
<CWidgetBrand
variant="twitter"
color="twitter"
right-header="973k"
right-footer="followers"
left-header="1.792"
left-footer="tweets"
>
<CIcon
name="socialTwitter"
height="56"
class="c-my-4"
name="twitter"
height="52"
class="my-4"
/>
<CChartLineSimple
style="height:100px"
class="c-position-absolute"
class="c-chart-brand"
background-color="rgba(255,255,255,.1)"
:data-points="[1, 13, 9, 17, 34, 41, 38]"
label="Followers"
@@ -49,20 +47,19 @@
</CCol>
<CCol md="3" sm="6">
<CWidgetBrand
variant="linkedin"
color="linkedin"
right-header="500+"
right-footer="contracts"
left-header="292"
left-footer="feeds"
>
<CIcon
name="socialLinkedin"
height="56"
class="c-my-4"
name="linkedin"
height="52"
class="my-4"
/>
<CChartLineSimple
style="height:100px"
class="c-position-absolute"
class="c-chart-brand"
background-color="rgba(255,255,255,.1)"
:data-points="[78, 81, 80, 45, 34, 12, 40]"
label="Contracts"
@@ -76,16 +73,15 @@
right-footer="events"
left-header="4"
left-footer="meetings"
variant="warning"
color="warning"
>
<CIcon
name="calendar"
height="56"
class="c-my-4"
height="52"
class="my-4"
/>
<CChartLineSimple
style="height:100px"
class="c-position-absolute"
class="c-chart-brand"
background-color="rgba(255,255,255,.1)"
:data-points="[35, 23, 56, 22, 97, 23, 64]"
label="Followers"
@@ -97,46 +93,46 @@
<template v-else>
<CCol md="3" sm="6">
<CWidgetBrand
variant="facebook"
color="facebook"
right-header="89k"
right-footer="friends"
left-header="459"
left-footer="feeds"
>
<CIcon
name="socialFacebook"
name="facebook"
height="56"
class="c-my-4"
class="my-4"
/>
</CWidgetBrand>
</CCol>
<CCol md="3" sm="6">
<CWidgetBrand
variant="twitter"
color="twitter"
right-header="973k"
right-footer="followers"
left-header="1.792"
left-footer="tweets"
>
<CIcon
name="socialTwitter"
name="twitter"
height="56"
class="c-my-4"
class="my-4"
/>
</CWidgetBrand>
</CCol>
<CCol md="3" sm="6">
<CWidgetBrand
variant="linkedin"
color="linkedin"
right-header="500+"
right-footer="contracts"
left-header="292"
left-footer="feeds"
>
<CIcon
name="socialLinkedin"
name="linkedin"
height="56"
class="c-my-4"
class="my-4"
/>
</CWidgetBrand>
</CCol>
@@ -146,12 +142,12 @@
right-footer="events"
left-header="4"
left-footer="meetings"
variant="warning"
color="warning"
>
<CIcon
name="calendar"
height="56"
class="c-my-4"
class="my-4"
/>
</CWidgetBrand>
</CCol>
@@ -163,7 +159,7 @@
import { CChartLineSimple } from '../charts/index.js'
export default {
name: 'WidgetsSocial',
name: 'WidgetsBrand',
components: {
CChartLineSimple
},
@@ -172,3 +168,11 @@ export default {
}
}
</script>
<style scoped>
.c-chart-brand {
position: absolute;
width: 100%;
height: 100px;
}
</style>
src/views/widgets/WidgetsDropdown.vue
+27 -18
View File
@@ -1,14 +1,16 @@
<template>
<CRow>
<CCol sm="6" lg="3">
<CWidgetDropdown header="9.823" text="Members online">
<CWidgetDropdown color="primary" header="9.823" text="Members online">
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
class="float-right"
color="transparent p-0"
placement="bottom-end"
buttonHtml="<i class='cui-settings'></i>"
>
<template #toggler-content>
<i class="cui-settings"></i>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
@@ -18,7 +20,7 @@
<template #footer>
<CChartLineSimple
pointed
class="c-px-3"
class="px-3"
style="height:70px"
:data-points="[65, 59, 84, 84, 51, 55, 40]"
background-color="primary"
@@ -29,15 +31,18 @@
</CWidgetDropdown>
</CCol>
<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>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
class="float-right"
color="transparent p-0"
placement="bottom-end"
no-caret
:caret="false"
buttonHtml="<i class='cui-location-pin'></i>"
>
<template #toggler-content>
<i class="cui-location-pin"></i>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
@@ -47,7 +52,7 @@
<template #footer>
<CChartLineSimple
pointed
class="c-px-3"
class="px-3"
style="height:70px"
:data-points="[1, 18, 9, 17, 34, 22, 11]"
background-color="info"
@@ -60,17 +65,19 @@
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
variant="warning"
color="warning"
header="9.823"
text="Members online"
>
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
class="float-right"
color="transparent p-0"
placement="bottom-end"
buttonHtml="<i class='cui-settings'></i>"
>
<template #toggler-content>
<i class="cui-settings"></i>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
@@ -92,17 +99,19 @@
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
variant="danger"
color="danger"
header="9.823"
text="Members online"
>
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
class="float-right"
color="transparent p-0"
placement="bottom-end"
buttonHtml="<i class='cui-settings'></i>"
>
<template #toggler-content>
<i class="cui-settings"></i>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
tests/e2e/custom-assertions/custom-assertion.js
+2
View File
@@ -0,0 +1,2 @@
// empty custom assertion needed for git to keep track of the folder
module.exports.assertion = function () {}
tests/e2e/custom-assertions/elementCount.js
-19
View File
@@ -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)
}
tests/e2e/custom-commands/custom-command.js
+1
View File
@@ -0,0 +1 @@
// empty custom command needed for git to keep track of the folder
tests/e2e/page-objects/page-object.js
+1
View File
@@ -0,0 +1 @@
// empty page-object needed for git to keep track of the folder
tests/e2e/specs/test.js
+18 -76
View File
@@ -22,83 +22,25 @@ module.exports = {
browser.url(devServer).pause(500).expect.element('body').to.be.present
// browser.waitForElementVisible('.app', 10000)
// .assert.elementPresent('.app-header')
// .assert.elementPresent('.app-header > .navbar-brand')
// .assert.elementPresent('.app-body')
// .assert.elementPresent('.app-body > .main > .breadcrumb')
// .assert.elementPresent('.app-body > .main > .container-fluid > .animated')
// .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.waitForElementVisible('.c-app', 2000)
.assert.elementPresent('.c-header')
.assert.elementPresent('.c-sidebar')
.assert.elementPresent('.c-footer')
.assert.elementPresent('.c-sidebar')
.assert.elementPresent('.c-body')
// browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
// console.log('response', typeof response)
// this.assert.ok(browser === this, 'Check if the context is right.')
// this.assert.cssClassPresent('body', 'aside-menu-show')
// })
//
// browser.pause(500)
// browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
// console.log('response', typeof response)
// this.assert.cssClassNotPresent('body', 'aside-menu-show')
// })
//
// 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.resizeWindow(700, 800)
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('-256px')
// browser.resizeWindow(1900, 800)
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('0px')
// browser.pause(1500)
// browser.click('.c-sidebar-minimizer')
// browser.pause(1000)
// browser.expect.element('.c-sidebar').to.have.css('width').which.equals('56px')
// browser.click('button.c-header-toggler')
// browser.pause(1000)
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('-256px')
// browser.pause(1000)
browser.end()
}
tests/unit/.eslintrc.js
+8
View File
@@ -0,0 +1,8 @@
module.exports = {
env: {
jest: true
},
rules: {
'import/no-extraneous-dependencies': 'off'
}
}
tests/unit/App.spec.js
+31
View File
@@ -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)
})
})
tests/unit/containers/TheContainer.spec.js
+30
View File
@@ -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)
})
})
tests/unit/containers/TheFooter.spec.js
+14
View File
@@ -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()
})
})
tests/unit/containers/TheHeader.spec.js
+13
View File
@@ -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()
})
})
tests/unit/containers/TheHeaderDropdownAccnt.spec.js
+24
View File
@@ -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()
})
})
tests/unit/containers/TheSidebar.spec.js
+16
View File
@@ -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()
})
})
tests/unit/containers/__snapshots__/TheContainer.spec.js.snap
+33
View File
@@ -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>
`;
tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
+37
View File
@@ -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>
`;
tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
+124
View File
@@ -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>
`;
tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
+251
View File
@@ -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>
`;
tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
+26
View File
@@ -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>
`;
tests/unit/views/Dashboard.spec.js
+40
View File
@@ -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()
})
})
tests/unit/views/__snapshots__/Dashboard.spec.js.snap
+954
View File
@@ -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>
`;
tests/unit/views/base/Breadcrumbs.spec.js
+32
View File
@@ -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()
})
})
tests/unit/views/base/Cards.spec.js
+32
View File
@@ -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()
})
})
tests/unit/views/base/Carousels.spec.js
+20
View File
@@ -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()
})
})
tests/unit/views/base/Collapses.spec.js
+36
View File
@@ -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()
})
})
tests/unit/views/base/Forms.spec.js
+21
View File
@@ -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()
// })
})
tests/unit/views/base/Jumbotrons.spec.js
+24
View File
@@ -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()
})
})
tests/unit/views/base/ListGroups.spec.js
+24
View File
@@ -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()
})
})
tests/unit/views/base/Navbars.spec.js
+24
View File
@@ -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