sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

v4 initial commit

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-02 23:57:02 +02:00
parent 9d65013c0f
commit 79559ae334
225 changed files with 13242 additions and 32434 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.browserslistrc
+3
View File
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead
.editorconfig
+14
View File
@@ -0,0 +1,14 @@
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
.eslintignore
+8
View File
@@ -0,0 +1,8 @@
node_modules/*
./node_modules/**
**/node_modules/**
/dist/**
.eslintrc.js
/Users/lukaszholeczek/CoreUI/@coreui/icons-vue/**/*
/Users/lukaszholeczek/CoreUI/@coreui/icons-vue/
**/*
.eslintrc.js
+20 -12
View File
@@ -1,17 +1,25 @@
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
node: true,
},
extends: ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: 'babel-eslint'
}
}
parser: "babel-eslint",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
overrides: [
{
files: [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)",
],
env: {
jest: true,
},
},
],
};
.gitattributes
+2
View File
@@ -0,0 +1,2 @@
# Enforce Unix newlines
* text=auto eol=lf
.gitignore
+7 -4
View File
@@ -1,12 +1,12 @@
.DS_Store
node_modules
package-lock.json
node_modules/
/dist
/coverage
/tests/e2e/reports/
selenium-debug.log
chromedriver.log
geckodriver.log
# local env files
.env.local
@@ -16,6 +16,7 @@ chromedriver.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
@@ -24,4 +25,6 @@ yarn-error.log*
*.ntvs*
*.njsproj
*.sln
*.sw*
*.sw?
__old
.postcssrc.js
-5
View File
@@ -1,5 +0,0 @@
module.exports = {
plugins: {
autoprefixer: {}
}
}
.prettierrc.js
+6
View File
@@ -0,0 +1,6 @@
// module.exports = {
// semi: false,
// trailingComma: "all",
// singleQuote: true,
// tabWidth: 2
// };
CHANGELOG.md
-147
View File
@@ -1,147 +0,0 @@
### Changelog
All notable changes to this project will be documented in this file. Dates are displayed in UTC.
#### [3.1.4](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.1.2...3.1.4)
> 12 March 2021
- test: snapshot update, createRange mock [`0370878`](https://github.com/coreui/coreui-free-vue-admin-template/commit/0370878bff47bcdfb48090437e6f836d373e7691)
- chore: dependencies update [`c22a75b`](https://github.com/coreui/coreui-free-vue-admin-template/commit/c22a75b3cd733e1fa95808a17b91a3bdbea5c44e)
- chore: github workflows update [`405b7c8`](https://github.com/coreui/coreui-free-vue-admin-template/commit/405b7c814bdb4ca87569f024bef26bf0334d83ec)
#### [3.1.2](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.1.1...3.1.2)
> 4 January 2021
- chore: dependencies update, drop node v10, ie10 [`4f96324`](https://github.com/coreui/coreui-free-vue-admin-template/commit/4f96324e8547682b2f0af6fcf211fea86bb88fcc)
- test: snaps update [`9286d67`](https://github.com/coreui/coreui-free-vue-admin-template/commit/9286d67e8d0a92f1db57b97b46514606fea0faa3)
- fix(BrandButtons): icon spacing tempfix [`3a315ad`](https://github.com/coreui/coreui-free-vue-admin-template/commit/3a315addbd0573ab64cf349a8167713ef4857a45)
- chore: changelog update, version bump [`bff8968`](https://github.com/coreui/coreui-free-vue-admin-template/commit/bff8968386dfafdf451f64657ca89a6ca5d1ab85)
- chore: project checks update [`999e22b`](https://github.com/coreui/coreui-free-vue-admin-template/commit/999e22b7e141a55da666c4cfa826150b51b41c7f)
- fix(vue.config): teanspileDependencies update [`9e3876f`](https://github.com/coreui/coreui-free-vue-admin-template/commit/9e3876fd7d212496b2b05165fc69a7869b858721)
- chore: 3.1.2 version release [`5fa4ddb`](https://github.com/coreui/coreui-free-vue-admin-template/commit/5fa4ddbd9149e62daa8f4c0b5f7601aaf67da19f)
#### [3.1.1](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.1.0...3.1.1)
> 8 September 2020
- test: Improve code, coverage for ProgressBar & Forms [`#230`](https://github.com/coreui/coreui-free-vue-admin-template/pull/230)
- chore: 3.1.1 release: update dependencies [`d41f8ea`](https://github.com/coreui/coreui-free-vue-admin-template/commit/d41f8ea967e2bd35ef1126465d3c757634ac75fa)
- chore: update package-lock.json [`e48528f`](https://github.com/coreui/coreui-free-vue-admin-template/commit/e48528fb3d777345cd9bd0ab2ca867404c0d5713)
- chore: remove e2e tests from CI [`70a33b9`](https://github.com/coreui/coreui-free-vue-admin-template/commit/70a33b9c9180ced8cc298fd46a736bc06a033c2e)
#### [3.1.0](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.0.2...3.1.0)
> 16 July 2020
- chore: update dependencies [`e152666`](https://github.com/coreui/coreui-free-vue-admin-template/commit/e152666a27a1c8059a29f90b7c47721132b55f04)
- refactor: view fixes and changes, update packages, add e2e sidebar tests [`8c14ca9`](https://github.com/coreui/coreui-free-vue-admin-template/commit/8c14ca9331753ed98ec18f8e193166423e7e219a)
- chore: update package-lock.json [`3c0f06f`](https://github.com/coreui/coreui-free-vue-admin-template/commit/3c0f06fd5ae323f958dad39384ab145fc1bac53e)
- fix: minor refactors and fixes [`5a23cd1`](https://github.com/coreui/coreui-free-vue-admin-template/commit/5a23cd1890b6eb747c74048d677bb5ac0c4e1db1)
- chore: update changelog [`94d642e`](https://github.com/coreui/coreui-free-vue-admin-template/commit/94d642ef80550de293870f99fba9e01850674158)
- chore: update login page snapshot [`a6b04a6`](https://github.com/coreui/coreui-free-vue-admin-template/commit/a6b04a6657d55165ae20b3a6e5b654b6451d1e31)
- chore: update snapshots [`7ee3b0f`](https://github.com/coreui/coreui-free-vue-admin-template/commit/7ee3b0f4dbadecabc3558de106858c4cbfd64f92)
- test: update tests [`a4a0b68`](https://github.com/coreui/coreui-free-vue-admin-template/commit/a4a0b68f1926315a864ad89ec57ad0d18e856fc0)
- fix: fix login page on edge browser #204 [`d919129`](https://github.com/coreui/coreui-free-vue-admin-template/commit/d919129ba7293341e7b34b6a10a4162243e51a82)
- refactor: small fixes [`4ca4c90`](https://github.com/coreui/coreui-free-vue-admin-template/commit/4ca4c900cca5664a4f419b59b8bda5054854ff42)
- Update README.md [`1355022`](https://github.com/coreui/coreui-free-vue-admin-template/commit/13550221f6973aa3a1a3475caf669cd5e26ba6fb)
- fix: fix Table border prop #224 [`d756323`](https://github.com/coreui/coreui-free-vue-admin-template/commit/d756323b917eecd661592d0d2b270eed24b226f5)
- chore: 3.1.0 version release [`5f5a2f7`](https://github.com/coreui/coreui-free-vue-admin-template/commit/5f5a2f79d184d4b9783698b88cf22fdb82cf148b)
- chore: merge branch 'master' into dev [`bb71694`](https://github.com/coreui/coreui-free-vue-admin-template/commit/bb71694960f86443c1b8454bf1d73d50cc15ce35)
- chore: fix daily-project-check CI [`d86cba1`](https://github.com/coreui/coreui-free-vue-admin-template/commit/d86cba17ea7c3bb3b1f385130e986b82c7cd33d7)
- chore: check if CI works on node 10 [`86dfcb2`](https://github.com/coreui/coreui-free-vue-admin-template/commit/86dfcb26e8a16fb438b33701fc8a02fcf32fdbb9)
- chore: restore node 8/10 CI [`fed84e8`](https://github.com/coreui/coreui-free-vue-admin-template/commit/fed84e858b0fb01b487d938f7eb624a6ca090bd6)
- chore: check if CI works on node 12 [`d06f05c`](https://github.com/coreui/coreui-free-vue-admin-template/commit/d06f05cf0f253b00a18c3ebb82c8d85ab589d1be)
- chore: delete .npmrc [`c428f91`](https://github.com/coreui/coreui-free-vue-admin-template/commit/c428f911512edf14748a32576f40e68a63e2ca83)
- chore: force chromedriver download [`abb50db`](https://github.com/coreui/coreui-free-vue-admin-template/commit/abb50db9cf1209def2df0a52fc793849dd22c288)
#### [3.0.2](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.0.1...3.0.2)
> 8 April 2020
- chore: 3.0.1 release - update dependencies and small fixes [`36ea31a`](https://github.com/coreui/coreui-free-vue-admin-template/commit/36ea31a37d8cd285f72602be13da561f192542d5)
- chore: 3.0.2 version release [`a281552`](https://github.com/coreui/coreui-free-vue-admin-template/commit/a28155262a2f692ba73e116ec851f7ea356b420c)
- fix: update package-lock.json [`12789d1`](https://github.com/coreui/coreui-free-vue-admin-template/commit/12789d1c12a8a4d9875d214b4b5d1cf4ebc12947)
- fix: lock chromedriver on 80.0.1 [`d17297e`](https://github.com/coreui/coreui-free-vue-admin-template/commit/d17297e23df1b294893168a8bf5eea76a67c9daa)
#### [3.0.1](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.0.0...3.0.1)
> 19 March 2020
- chore: replace comment with template string in example js icon [`#201`](https://github.com/coreui/coreui-free-vue-admin-template/pull/201)
- test: improve test coverage alert [`#192`](https://github.com/coreui/coreui-free-vue-admin-template/pull/192)
- test: add CChartBarExample unit test [`#193`](https://github.com/coreui/coreui-free-vue-admin-template/pull/193)
- refactor: minor code refactors and fixes, update packages [`0d2b619`](https://github.com/coreui/coreui-free-vue-admin-template/commit/0d2b619677ba170898ec19ae9ad0a99db22b5d51)
- fix: fix user view routing, refactor users view [`e1972c2`](https://github.com/coreui/coreui-free-vue-admin-template/commit/e1972c2ceaf0917f3c5567c04ab9369ea4d69cbb)
- chore: update readme and license [`db2fd31`](https://github.com/coreui/coreui-free-vue-admin-template/commit/db2fd31fbd1489a1b6f05aecdaab44f017567b3f)
#### [3.0.0](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.0.0-beta.3...3.0.0)
> 24 February 2020
- test: Improve test coverage to 100% for users views [`#188`](https://github.com/coreui/coreui-free-vue-admin-template/pull/188)
- chore: merge branch 'dev' into v3-next [`9132c2f`](https://github.com/coreui/coreui-free-vue-admin-template/commit/9132c2f449f367dc81e0ee6f39c6ec7958f0280a)
- fix: fix ie11 compatibility and update dependencies [`d57a73a`](https://github.com/coreui/coreui-free-vue-admin-template/commit/d57a73a8a1e6495a94646b268aaddf3967ffdb47)
- refactor: small fixes [`9ea0664`](https://github.com/coreui/coreui-free-vue-admin-template/commit/9ea06648416b505edd347166d7961ca8550deeae)
- feat: add vuex state managment [`6d530f7`](https://github.com/coreui/coreui-free-vue-admin-template/commit/6d530f74ee02884e69a60a4b74fcfd45bdbc7bc8)
- feat: copy features from pro template [`7e9d384`](https://github.com/coreui/coreui-free-vue-admin-template/commit/7e9d384af2beb2700909f5eb957b4a35609c10bd)
- test: fix snapshots and sidebar test [`5960f11`](https://github.com/coreui/coreui-free-vue-admin-template/commit/5960f11f6ce864a5ce492f49195d8504eb977933)
- refactor: view refactors, snapshot update [`f0533a9`](https://github.com/coreui/coreui-free-vue-admin-template/commit/f0533a9b2e467d7ed9bcecfd0ca37fc4478b81d8)
- refactor: change brand logos [`58fa7d6`](https://github.com/coreui/coreui-free-vue-admin-template/commit/58fa7d633e4a9770740fda013b410911538d7e4f)
- feat: Users: add query param for current page, refactor code [`c68263b`](https://github.com/coreui/coreui-free-vue-admin-template/commit/c68263b85f458c5a5c45656b837999c7c6314727)
- chore: refactor CI workflows [`08f8f01`](https://github.com/coreui/coreui-free-vue-admin-template/commit/08f8f0195a2385217aedc7a2920c3de1bbf45cce)
- refactor: minor changes [`f3a1e22`](https://github.com/coreui/coreui-free-vue-admin-template/commit/f3a1e2269f65edf3a67f9770a4697024a6a124a9)
- chore: add github CI [`94f3108`](https://github.com/coreui/coreui-free-vue-admin-template/commit/94f31082eb4ebede00f4e86302de8f6a4fd43f31)
- refactor: small refactors [`0493a99`](https://github.com/coreui/coreui-free-vue-admin-template/commit/0493a99c315b0a10053476c2a13897158bbfeb93)
- chore: update CI [`f661fb4`](https://github.com/coreui/coreui-free-vue-admin-template/commit/f661fb42571cb88ab3fb0158c9b212235ed01d45)
- chore: update CI of e2e test [`d65c8cc`](https://github.com/coreui/coreui-free-vue-admin-template/commit/d65c8ccf5e357230b6f4c7ab9c8000fe7a769f55)
- chore: 3.0.0 version release [`c473182`](https://github.com/coreui/coreui-free-vue-admin-template/commit/c473182f6c92811d9adb07401f3753b62facaedb)
- chore: update contributing guide [`e5dc6e2`](https://github.com/coreui/coreui-free-vue-admin-template/commit/e5dc6e2bfc84353e3581a98b66ba7dfc03e22cc2)
- chore: e2e test CI: fix run command [`c496b32`](https://github.com/coreui/coreui-free-vue-admin-template/commit/c496b32cb0e91bf15ad2da6d5585f5282fdcf675)
- chore: fix CI of e2e tests [`79f8a3b`](https://github.com/coreui/coreui-free-vue-admin-template/commit/79f8a3b315e76b24978559d5a71c400095709508)
#### [3.0.0-beta.3](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.0.0-beta.2...3.0.0-beta.3)
> 11 December 2019
- chore: 3.0.0-beta.3 release merge [`7eb5cd5`](https://github.com/coreui/coreui-free-vue-admin-template/commit/7eb5cd5406a9c8f2e88cc65401e6e394281ee086)
- chore: 3.0.0-beta.3 release: update descriptions, tests, dependencies [`72f6c4e`](https://github.com/coreui/coreui-free-vue-admin-template/commit/72f6c4e86f133c230bcd82018517c6218eeafe49)
- chore: update import paths and snapshots [`860d8d5`](https://github.com/coreui/coreui-free-vue-admin-template/commit/860d8d525699628e611cc1cc7d6909d5bb936b7f)
- refactor: update WidgetDropdown view [`b564797`](https://github.com/coreui/coreui-free-vue-admin-template/commit/b564797ad98dadfc825229ab75852c6ac23d960c)
#### [3.0.0-beta.2](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.0.0-beta.1...3.0.0-beta.2)
> 4 December 2019
- chore: 3.0.0-beta.2 release [`6dcf544`](https://github.com/coreui/coreui-free-vue-admin-template/commit/6dcf544f8650eae5ce82e5cf7036ad267c2d6a79)
- refactor: minor refactors, fixes, code clean and snapshots update [`cbeebb7`](https://github.com/coreui/coreui-free-vue-admin-template/commit/cbeebb7152218813126268181a253250b5e54b18)
- chore: update package.json file [`20a24e9`](https://github.com/coreui/coreui-free-vue-admin-template/commit/20a24e934d47849a3fdc147a7d5b4c30407b89b6)
- refactor: change header logo, delete obsolete images [`6657f03`](https://github.com/coreui/coreui-free-vue-admin-template/commit/6657f03a584a86222e7d82fe9ece7bf6418230a7)
- fix: change coloured cards text color to white [`6c91472`](https://github.com/coreui/coreui-free-vue-admin-template/commit/6c91472ae574ff36baec9eb9bb995aa1038655b7)
#### [3.0.0-beta.1](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.0.0-beta.0...3.0.0-beta.1)
> 21 November 2019
- chore: 3.0.0-beta.1 release - update dependencies and snapshots [`0aaae3d`](https://github.com/coreui/coreui-free-vue-admin-template/commit/0aaae3d34d2de5d04e10a3272dd84d7d5232e397)
- refactor: fix small bugs, update unit tests [`b696666`](https://github.com/coreui/coreui-free-vue-admin-template/commit/b6966668069d91aeeb4fbeb33f0a1f5a9f5c374e)
- refactor: replace font icons with svg icons [`bc82261`](https://github.com/coreui/coreui-free-vue-admin-template/commit/bc822612da823bee9a0f3f113c7d6e49d6a61496)
- refactor: add prefixes to icons [`0bf951c`](https://github.com/coreui/coreui-free-vue-admin-template/commit/0bf951c64d8065a0ee9bc5da6d00ca4079a2e37b)
- refacor: update dashboard to coreui-vue changes [`1c7b133`](https://github.com/coreui/coreui-free-vue-admin-template/commit/1c7b133ae5b97957cd6522dbd20250e60b383154)
- refactor: minor refactors, update snapshots [`07e4966`](https://github.com/coreui/coreui-free-vue-admin-template/commit/07e4966ad2ca181c9501a29b48486478131aee96)
- refactor: update base views [`70058e8`](https://github.com/coreui/coreui-free-vue-admin-template/commit/70058e8c2912a83bef675c03c9507d5f275fc87f)
- refactor: change sidebar nav generation to flat structure [`760dc7b`](https://github.com/coreui/coreui-free-vue-admin-template/commit/760dc7ba79114727987e6917097e045c0f122b7b)
- chore: update dependencies [`2226c3b`](https://github.com/coreui/coreui-free-vue-admin-template/commit/2226c3ba55912ae420aa8fe096edfd3d804d4c95)
- chore: add new favicons [`281c4b9`](https://github.com/coreui/coreui-free-vue-admin-template/commit/281c4b97fb93597db46599aaa098ff3b47cffa59)
- refactor: change icon descriptions, fix header, add card icon styles [`2310a0e`](https://github.com/coreui/coreui-free-vue-admin-template/commit/2310a0ef005aa4298fea082fa3b22ca621a9c8e5)
- chore: fix documentation links [`cdfef77`](https://github.com/coreui/coreui-free-vue-admin-template/commit/cdfef77bab0f02eaa9db0c27729fa5dc9b92120e)
- chore: update packages and tests [`cb5f6ec`](https://github.com/coreui/coreui-free-vue-admin-template/commit/cb5f6ec3a2d4842f10c9c9b4e5c6facf9fc46e11)
- chore: charts - change import paths [`e875893`](https://github.com/coreui/coreui-free-vue-admin-template/commit/e8758931fd349c3849831a39366dfb57701572a8)
- fix: fix charts [`07a6b95`](https://github.com/coreui/coreui-free-vue-admin-template/commit/07a6b9538081615b2380e1a3e930e1420921544c)
#### [3.0.0-beta.0](https://github.com/coreui/coreui-free-vue-admin-template/compare/3.0.0-alpha.6...3.0.0-beta.0)
> 19 November 2019
- chore: 3.0.0-beta.0 release: update dependencies [`f020186`](https://github.com/coreui/coreui-free-vue-admin-template/commit/f0201861520db3560794405da2606ba2473a1858)
LICENSE
-21
View File
@@ -1,21 +0,0 @@
The MIT License (MIT)
Copyright (c) 2020 creativeLabs Łukasz Holeczek.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
README.md
+25 -150
View File
@@ -1,159 +1,34 @@
# CoreUI Free Vue Bootstrap Admin Template
# @coreui/coreui-free-vue-admin-template
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Vue%20Admin%20Template%20&url=http://coreui.io/vue/&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
[![NPM][npm-coreui-vue-badge-latest]][npm-coreui-vue]
[![Downloads](https://img.shields.io/npm/dm/@coreui/vue.svg?style=flat-square)][coreui]
[![Vue](https://img.shields.io/badge/Vue-^2.6.11-brightgreen.svg?style=flat-square)][coreui]
[![Project check](https://github.com/coreui/coreui-free-vue-admin-template/actions/workflows/project-check.yml/badge.svg)](https://github.com/coreui/coreui-free-vue-admin-template/actions/workflows/project-check.yml)
[![Daily project check](https://github.com/coreui/coreui-free-vue-admin-template/actions/workflows/daily-project-check.yml/badge.svg)](https://github.com/coreui/coreui-free-vue-admin-template/actions/workflows/daily-project-check.yml)
[npm-coreui-vue]: https://www.npmjs.com/package/@coreui/vue
[npm-coreui-vue-badge-latest]: https://img.shields.io/npm/v/@coreui/vue/latest?style=flat-square&color=brightgreen
[coreui]: https://coreui.io/vue
![Template](https://coreui.io/images/github/vue-free-template-3.gif)
## Description
Why we decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Boostrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8)
**This is not just another Admin Template.** It goes way beyond hitherto admin templates thanks to:
- Wonderful styling delivered by bootstrap compatible css library [CoreUI](https://coreui.io/docs/3.0-beta/),
- Dedicated [component library](https://coreui.io/vue/docs/),
- Dedicated vue tooling libraries ([coreui-vue-chartjs](https://coreui.io/vue/docs/components/charts), [coreui-icons-vue](https://github.com/coreui/coreui-icons-vue)),
- Over 500 [free svg icons](https://coreui.io/icons) consistent with our styling,
- Transparent code and file structure
- Possibility of extension to [pro version](https://coreui.io/vue) which offers even more!
CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
**NOTE:** Please remember to star this project to get new versions updates of this template.
### Demo
A fully functional demo is available at [CoreUI](http://coreui.io/vue/)
### Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Documentation](#documentation)
- [Contributing](#contributing)
- [Versioning](#versioning)
- [Our other products](#our-other-products)
- [Community](#community)
- [Community Projects](#community-projects)
- [License](#copyright-and-license)
- [Support CoreUI Development](#support-coreui-development)
### Installation
#### Clone repo
``` bash
# clone the repo
$ git clone https://github.com/coreui/coreui-free-vue-admin-template.git CoreUI-Vue
# go into app's directory
$ cd CoreUI-Vue
# install app's dependencies
$ npm install
## Project setup
```
yarn install
```
#### Usage
``` bash
# serve with hot reload at localhost:8080
npm run serve
# build for production with minification
npm run build
# run linter
npm run lint
# run unit tests
npm run test:unit
# run e2e tests
npm run test:e2e
### Compiles and hot-reloads for development
```
yarn serve
```
For a detailed explanation on how things work, check out the [Vue CLI Guide](https://cli.vuejs.org/guide/).
### Compiles and minifies for production
```
yarn build
```
### Documentation
### Run your unit tests
```
yarn test:unit
```
CoreUI tools documentation:
### Run your end-to-end tests
```
yarn test:e2e
```
- Components documentation: [CoreUI Vue library](https://coreui.io/vue/docs)
- Styles documentation: [CoreUI styles](https://coreui.io/docs/3.0-beta/)
- Icons documentation: [CoreUI Icons](http://coreui.io/icons)
### Lints and fixes files
```
yarn lint
```
### Bugs and feature requests
Have a bug or a feature request? [Please open a new issue](https://github.com/coreui/coreui-free-vue-admin-template/issues).
### Contributing
Please read through our [contributing guidelines](https://github.com/coreui/coreui-free-vue-admin-template/blob/master/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
### Versioning
For transparency into our release cycle and in striving to maintain backward compatibility,CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/).
See [the Releases section of our project](https://github.com/coreui/coreui-free-vue-admin-template/releases) for changelogs for each release version.
### Our other products
CoreUI is built on top of Bootstrap 4 and supports popular frameworks.
#### Free version products
* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
* [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
* [CoreUI Free Laravel Admin Template](https://github.com/coreui/coreui-free-laravel-admin-template)
* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
* [CoreUI Free Vue.js + Laravel Admin Template](https://github.com/coreui/coreui-free-vue-laravel-admin-template)
#### Pro version products
* 💪 [CoreUI Pro Bootstrap Admin Template](https://coreui.io/pro/)
* 💪 [CoreUI Pro Angular Admin Template](https://coreui.io/pro/angular)
* 💪 [CoreUI Pro Laravel Admin Template](https://coreui.io/pro/laravel)
* 💪 [CoreUI Pro React Admin Template](https://coreui.io/pro/react)
* 💪 [CoreUI Pro Vue Admin Template](https://coreui.io/pro/vue)
* 💪 [CoreUI Pro Vue + Laravel Admin Template](https://coreui.io/pro/vue-laravel)
## CoreUI PRO Vue.js Admin Templates
| Default Theme | Legacy Theme | Dark Layout |
| --- | --- | --- |
| [![CoreUI Pro Bootstrap Admin Template](https://coreui.io/images/mockups/mockup_3_1_default.png)](https://coreui.io/pro/vue/) | [![CoreUI Pro Bootstrap Admin Template](https://coreui.io/images/mockups/mockup_3_1_legacy.png)](https://coreui.io/pro/vue/)| [![CoreUI Pro Bootstrap Admin Template](https://coreui.io/images/mockups/mockup_3_1_dark.png)](https://coreui.io/pro/vue/)
## Community
Get updates on CoreUI's development and chat with the project maintainers and community members.
- Follow [@core_ui on Twitter](https://twitter.com/core_ui).
- Read and subscribe to [CoreUI Blog](https://coreui.ui/blog/).
### Community Projects
Some of projects created by community but not maintained by CoreUI team.
- [NuxtJS + Vue CoreUI](https://github.com/muhibbudins/nuxt-coreui)
- [Colmena](https://github.com/colmena/colmena)
## Copyright and license
Copyright 2020 creativeLabs Łukasz Holeczek. Code released under [the MIT license](https://github.com/coreui/coreui-free-vue-admin-template/blob/master/LICENSE).
There is only one limitation - you cannot re-distribute the `CoreUI` as stock nor if you modify the `CoreUI`. In the past we faced some problems with persons who tried to sell `CoreUI` based templates.
## Support CoreUI Development
CoreUI is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying [PRO version](https://coreui.io/pro/).
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js
+2 -10
View File
@@ -1,11 +1,3 @@
module.exports = {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'entry',
corejs: 3
}
]
]
}
presets: ["@vue/cli-plugin-babel/preset"],
};
jest.config.js
+3 -28
View File
@@ -1,31 +1,6 @@
const ignoredModules = ['@coreui/icons', '@coreui/utils'].join('|')
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
preset: "@vue/cli-plugin-unit-jest",
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.(js|jsx)?$': '<rootDir>/node_modules/babel-jest'
"^.+\\.vue$": "vue-jest",
},
transformIgnorePatterns: [`<rootDir>/node_modules/(?!${ignoredModules})`],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: ['<rootDir>/tests/unit/**/*.spec.js'],
verbose: true,
testURL: 'http://localhost/',
collectCoverage: true,
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!**/node_modules/**'
],
coverageReporters: ['html', 'text-summary']
}
};
package.json
+45 -58
View File
@@ -1,73 +1,60 @@
{
"name": "@coreui/coreui-free-vue-admin-template",
"version": "3.1.4",
"description": "Open Source Bootstrap Admin Template",
"author": {
"name": "CoreUI",
"url": "https://coreui.io",
"github": "https://github.com/coreui",
"twitter": "https://twitter.com/core_ui"
"version": "4.0.0-alpha.0",
"config": {
"coreui_library_short_version": "4.0"
},
"contributors": [
{
"name": "CoreUI Team",
"url": "https://github.com/orgs/coreui/people"
}
],
"repository": {
"type": "git",
"url": "git@github.com:coreui/coreui-free-vue-admin-template.git"
},
"homepage": "http://coreui.io",
"copyright": "Copyright 2021 creativeLabs Łukasz Holeczek",
"license": "MIT",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"clearCache": "jest --clearCache",
"release": "npm-run-all clearCache lint build test:unit test:e2e",
"auto-changelog": "auto-changelog --hide-credit --commit-limit false --package --backfill-limit 0 --starting-version 3.0.0-beta.0"
"lint": "vue-cli-service lint"
},
"dependencies": {
"@coreui/coreui": "^3.4.0",
"@coreui/icons": "^2.0.0-rc.0",
"@coreui/utils": "^1.3.1",
"@coreui/vue": "^3.2.9",
"@coreui/vue-chartjs": "^1.0.6",
"vue": "~2.6.12",
"vue-router": "^3.5.1",
"vuex": "~3.6.2"
"@coreui/coreui": "^4.0.1",
"@coreui/icons": "^2.0.1",
"@coreui/icons-vue": "2.0.0-alpha.0",
"@coreui/vue": "^4.0.0-alpha.0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@babel/core": "^7.13.10",
"@vue/cli-plugin-babel": "^4.5.11",
"@vue/cli-plugin-e2e-nightwatch": "^4.5.11",
"@vue/cli-plugin-eslint": "^4.5.11",
"@vue/cli-plugin-unit-jest": "^4.5.11",
"@vue/cli-service": "^4.5.11",
"@vue/test-utils": "^1.1.3",
"auto-changelog": "~2.2.1",
"babel-eslint": "~10.1.0",
"babel-jest": "~26.6.3",
"chromedriver": "latest",
"core-js": "^3.9.1",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"npm-run-all": "~4.1.5",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"vue-template-compiler": "~2.6.12"
"@typescript-eslint/eslint-plugin": "^4.28.5",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-e2e-nightwatch": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/test-utils": "^2.0.0-0",
"babel-eslint": "^10.1.0",
"chromedriver": "92",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"geckodriver": "^1.20.0",
"lint-staged": "^9.5.0",
"prettier": "^2.2.1",
"rollup-plugin-vue": "^6.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie < 11"
],
"engines": {
"node": ">= 12.x",
"npm": ">= 6.x"
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
public/android-icon-144x144.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

public/android-icon-192x192.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

public/android-icon-36x36.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

public/android-icon-48x48.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

public/android-icon-72x72.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

public/android-icon-96x96.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

public/apple-icon-114x114.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.7 KiB

public/apple-icon-120x120.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

public/apple-icon-144x144.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

public/apple-icon-152x152.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

public/apple-icon-180x180.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

public/apple-icon-57x57.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

public/apple-icon-60x60.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 KiB

public/apple-icon-72x72.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

public/apple-icon-76x76.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

public/apple-icon-precomposed.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

public/apple-icon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

public/browserconfig.xml
-2
View File
@@ -1,2 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
public/favicon-16x16.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

public/favicon-32x32.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

public/favicon-96x96.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

public/img/avatars/1.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

public/img/avatars/2.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

public/img/avatars/3.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

public/img/avatars/4.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

public/img/avatars/5.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

public/img/avatars/6.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

public/img/avatars/7.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

public/img/avatars/8.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

public/index.html
+4 -45
View File
@@ -1,58 +1,17 @@
<!DOCTYPE html>
<!--
* CoreUI Free - Vue.js Admin Template
* @version 3.1.4
* @link https://coreui.io/vue/
* Copyright (c) 2021 creativeLabs Łukasz Holeczek
-->
<html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>CoreUI - Vue Open Source Bootstrap Admin Template</title>
<!-- favicons for all devices -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- geotagging -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
// Shared ID
gtag('config', 'UA-118965717-3');
// Vue.js ID
gtag('config', 'UA-118965717-7');
</script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
public/manifest.json
-41
View File
@@ -1,41 +0,0 @@
{
"name": "App",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
public/ms-icon-144x144.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

public/ms-icon-150x150.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

public/ms-icon-310x310.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

public/ms-icon-70x70.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.0 KiB

src/App.vue
+2 -7
View File
@@ -1,14 +1,9 @@
<template>
<router-view></router-view>
<router-view />
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="scss">
// Import Main styles for this application
@import 'assets/scss/style';
</style>
src/_nav.js
+267
View File
@@ -0,0 +1,267 @@
export default [
{
_name: 'CNavItem',
name: 'Dashboard',
to: '/dashboard',
icon: 'cil-speedometer',
badge: {
color: 'primary',
text: 'NEW'
}
},
// {
// _name: 'CNavTitle',
// name: 'Theme'
// },
// {
// _name: 'CNavItem',
// name: 'Colors',
// to: '/theme/colors',
// icon: 'cil-drop'
// },
// {
// _name: 'CNavItem',
// name: 'Typography',
// to: '/theme/typography',
// icon: 'cil-pencil'
// },
// {
// _name: 'CNavTitle',
// name: 'Components'
// },
{
_name: 'CNavGroup',
name: 'Base',
route: '/base',
icon: 'cil-puzzle',
children: [
{
_name: 'CNavItem',
name: 'Breadcrumbs',
to: '/base/breadcrumbs'
},
// {
// _name: 'CNavItem',
// name: 'Cards',
// to: '/base/cards'
// },
// {
// _name: 'CNavItem',
// name: 'Carousels',
// to: '/base/carousels'
// },
// {
// _name: 'CNavItem',
// name: 'Collapses',
// to: '/base/collapses'
// },
// {
// _name: 'CNavItem',
// name: 'Forms',
// to: '/base/forms'
// },
// {
// _name: 'CNavItem',
// name: 'Jumbotrons',
// to: '/base/jumbotrons'
// },
// {
// _name: 'CNavItem',
// name: 'List Groups',
// to: '/base/list-groups'
// },
// {
// _name: 'CNavItem',
// name: 'Navs',
// to: '/base/navs'
// },
// {
// _name: 'CNavItem',
// name: 'Navbars',
// to: '/base/navbars'
// },
// {
// _name: 'CNavItem',
// name: 'Paginations',
// to: '/base/paginations'
// },
// {
// _name: 'CNavItem',
// name: 'Popovers',
// to: '/base/popovers'
// },
// {
// _name: 'CNavItem',
// name: 'Progress Bars',
// to: '/base/progress-bars'
// },
// {
// _name: 'CNavItem',
// name: 'Switches',
// to: '/base/switches'
// },
// {
// _name: 'CNavItem',
// name: 'Tables',
// to: '/base/tables'
// },
// {
// _name: 'CNavItem',
// name: 'Tabs',
// to: '/base/tabs'
// },
// {
// _name: 'CNavItem',
// name: 'Tooltips',
// to: '/base/tooltips'
// }
]
},
// {
// _name: 'CNavGroup',
// name: 'Buttons',
// route: '/buttons',
// icon: 'cil-cursor',
// children: [
// {
// _name: 'CNavItem',
// name: 'Buttons',
// to: '/buttons/standard-buttons'
// },
// {
// _name: 'CNavItem',
// name: 'Button Dropdowns',
// to: '/buttons/dropdowns'
// },
// {
// _name: 'CNavItem',
// name: 'Button Groups',
// to: '/buttons/button-groups'
// },
// {
// _name: 'CNavItem',
// name: 'Brand Buttons',
// to: '/buttons/brand-buttons'
// }
// ]
// },
// {
// _name: 'CNavItem',
// name: 'Charts',
// to: '/charts',
// icon: 'cil-chart-pie'
// },
// {
// _name: 'CNavGroup',
// name: 'Icons',
// route: '/icons',
// icon: 'cil-star',
// children: [
// {
// _name: 'CNavItem',
// name: 'CoreUI Icons',
// to: '/icons/coreui-icons',
// badge: {
// color: 'info',
// text: 'NEW'
// }
// },
// {
// _name: 'CNavItem',
// name: 'Brands',
// to: '/icons/brands'
// },
// {
// _name: 'CNavItem',
// name: 'Flags',
// to: '/icons/flags'
// }
// ]
// },
// {
// _name: 'CNavGroup',
// name: 'Notifications',
// route: '/notifications',
// icon: 'cil-bell',
// children: [
// {
// _name: 'CNavItem',
// name: 'Alerts',
// to: '/notifications/alerts'
// },
// {
// _name: 'CNavItem',
// name: 'Badges',
// to: '/notifications/badges'
// },
// {
// _name: 'CNavItem',
// name: 'Modals',
// to: '/notifications/modals'
// }
// ]
// },
// {
// _name: 'CNavItem',
// name: 'Widgets',
// to: '/widgets',
// icon: 'cil-calculator',
// badge: {
// color: 'primary',
// text: 'NEW',
// shape: 'pill'
// }
// },
// {
// _name: 'CSidebarNavDivider',
// _class: 'm-2'
// },
// {
// _name: 'CNavTitle',
// name: 'Extras'
// },
// {
// _name: 'CNavGroup',
// name: 'Pages',
// route: '/pages',
// icon: 'cil-star',
// children: [
// {
// _name: 'CNavItem',
// name: 'Login',
// to: '/pages/login'
// },
// {
// _name: 'CNavItem',
// name: 'Register',
// to: '/pages/register'
// },
// {
// _name: 'CNavItem',
// name: 'Error 404',
// to: '/pages/404'
// },
// {
// _name: 'CNavItem',
// name: 'Error 500',
// to: '/pages/500'
// }
// ]
// },
// {
// _name: 'CNavItem',
// name: 'Download CoreUI',
// href: 'http://coreui.io/vue/',
// icon: { name: 'cil-cloud-download', class: 'text-white' },
// _class: 'bg-success text-white',
// target: '_blank'
// },
// {
// _name: 'CNavItem',
// name: 'Try CoreUI PRO',
// href: 'http://coreui.io/pro/vue/',
// icon: { name: 'cil-layers', class: 'text-white' },
// _class: 'bg-danger text-white',
// target: '_blank'
// }
]
src/assets/.gitkeep
View File
src/assets/icons/icons.js
+11 -13
View File
@@ -22,15 +22,8 @@ import {
cibPaypal,
cibGooglePay,
cibCcAmex
} from '@coreui/icons'
import {
cifUs,
cifBr,
cifIn,
cifFr,
cifEs,
cifPl
} from '@coreui/icons'
} from "@coreui/icons";
import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from "@coreui/icons";
import {
cilArrowRight,
cilBan,
@@ -44,6 +37,7 @@ import {
cilChevronBottom,
cilChevronTop,
cilCheckCircle,
cilCode,
cilCommentSquare,
cilCursor,
cilDrop,
@@ -62,6 +56,8 @@ import {
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMediaPlay,
cilMenu,
cilMoon,
cilOptions,
cilPencil,
@@ -77,9 +73,8 @@ import {
cilUserFemale,
cilUserFollow,
cilXCircle
} from '@coreui/icons'
import { logo } from './logo'
} from "@coreui/icons";
import { logo } from "./logo";
export const iconsSet = Object.assign(
{},
@@ -97,6 +92,7 @@ export const iconsSet = Object.assign(
cilChevronBottom,
cilChevronTop,
cilCheckCircle,
cilCode,
cilCommentSquare,
cilCursor,
cilDrop,
@@ -115,6 +111,8 @@ export const iconsSet = Object.assign(
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMediaPlay,
cilMenu,
cilMoon,
cilOptions,
cilPencil,
@@ -164,4 +162,4 @@ export const iconsSet = Object.assign(
cibGooglePay,
cibCcAmex
}
)
);
src/assets/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

src/assets/scss/_example.scss
+109
View File
@@ -0,0 +1,109 @@
.example {
&:not(:first-child) {
margin-top: 1.5rem;
}
.tab-content {
background-color: $light-50 !important;
@at-root .dark-theme & {
background-color: rgba(255, 255, 255, .1) !important;
}
}
code[class*="language-"],
pre[class*="language-"] {
font-size: .875rem !important;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: transparent;
}
& + p {
margin-top: 1.5rem
}
// Components examples
.preview,
.preview .col {
+ p {
margin-top: 2rem;
}
> .form-control {
+ .form-control {
margin-top: .5rem;
}
}
> .nav + .nav,
> .alert + .alert,
> .navbar + .navbar,
> .progress + .progress {
margin-top: 1rem;
}
> .dropdown-menu {
position: static;
display: block;
}
> :last-child {
margin-bottom: 0;
}
// Images
> svg + svg,
> img + img {
margin-left: .5rem;
}
// Buttons
> .btn,
> .btn-group {
margin: .25rem .125rem;
}
> .btn-toolbar + .btn-toolbar {
margin-top: .5rem;
}
// List groups
> .list-group {
max-width: 400px;
}
> [class*="list-group-horizontal"] {
max-width: 100%;
}
// Navbars
.fixed-top,
.sticky-top {
position: static;
margin: -1rem -1rem 1rem;
}
.fixed-bottom {
position: static;
margin: 1rem -1rem -1rem;
}
@include media-breakpoint-up(sm) {
.fixed-top,
.sticky-top {
margin: -1.5rem -1.5rem 1rem;
}
.fixed-bottom {
margin: 1rem -1.5rem -1.5rem;
}
}
// Pagination
.pagination {
margin-top: .5rem;
margin-bottom: .5rem;
}
}
}
src/assets/scss/_layout.scss
+6
View File
@@ -0,0 +1,6 @@
.wrapper {
width: 100%;
@include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
will-change: auto;
@include transition(padding .15s);
}
src/assets/scss/style.scss
+6 -9
View File
@@ -1,17 +1,14 @@
// If you want to override variables do it here
@import "variables";
$enable-ltr: true;
$enable-rtl: true;
// Import styles
@import "~@coreui/coreui/scss/coreui";
@import "layout";
@import "example";
// If you want to add something do it here
@import "custom";
.card-header:not(.content-center) > .c-icon:first-child {
margin-right: 0.1rem;
margin-top: 0.1rem;
vertical-align: top;
width: 1.2rem;
height: 1.2rem;
font-size: 1.2rem;
}
src/containers/TheFooter.vue → src/components/AppFooter.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<template>
<CFooter :fixed="false">
<CFooter>
<div>
<a href="https://coreui.io" target="_blank">CoreUI</a>
<span class="ml-1">&copy; {{new Date().getFullYear()}} creativeLabs.</span>
@@ -13,6 +13,6 @@
<script>
export default {
name: 'TheFooter'
}
name: "AppFooter",
};
</script>
src/components/AppHeader.vue
+52
View File
@@ -0,0 +1,52 @@
<template>
<CHeader position="sticky" class="mb-4">
<CHeaderToggler class="ms-md-3" @click="$store.commit('toggleSidebar')">
<CIcon name="cil-menu" size="lg" />
</CHeaderToggler>
<CHeaderBrand class="mx-auto d-lg-none" to="/">
<CIcon name="logo" height="48" alt="Logo" />
</CHeaderBrand>
<CHeaderNav class="d-md-down-none me-auto">
<CNavItem>
<CNavLink
href="/dashboard"
>
Dashboard
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Users</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Settings</CNavLink>
</CNavItem>
</CHeaderNav>
<CHeaderNav class="me-4">
<CNavItem class="d-md-down-none mx-2">
<CNavLink>
<CIcon name="cil-bell" size="lg" />
</CNavLink>
</CNavItem>
<CNavItem class="d-md-down-none mx-2">
<CNavLink>
<CIcon name="cil-list" />
</CNavLink>
</CNavItem>
<CNavItem class="d-md-down-none mx-2">
<CNavLink>
<CIcon name="cil-envelope-open" />
</CNavLink>
</CNavItem>
<!-- <TheHeaderDropdownAccnt/> -->
</CHeaderNav>
</CHeader>
</template>
<script>
// import TheHeaderDropdownAccnt from './TheHeaderDropdownAccnt'
export default {
name: "AppHeader",
components: {},
};
</script>
src/components/AppSidebar.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<CSidebar position="fixed" selfHiding="md">
<CSidebarBrand>
<CIcon
customClasses="sidebar-brand-full"
name="logo"
size="custom-size"
:height="35"
viewBox="0 0 556 134" />
<CIcon
customClasses="sidebar-brand-narrow"
name="logo"
size="custom-size"
:height="35"
viewBox="0 0 110 134"
/></CSidebarBrand>
<AppSidebarNav />
</CSidebar>
</template>
<script>
import { AppSidebarNav } from "./AppSidebarNav";
export default {
name: "AppSidebar",
components: {
AppSidebarNav,
},
};
</script>
src/components/AppSidebarNav.js
+89
View File
@@ -0,0 +1,89 @@
import { defineComponent, h, resolveComponent } from "vue";
import { RouterLink } from "vue-router";
import { CSidebarNav, CNavItem, CNavGroup, CNavTitle } from "@coreui/vue";
import nav from "@/_nav.js";
const AppSidebarNav = defineComponent({
name: "AppSidebarNav",
components: {
CNavItem,
CNavGroup,
CNavTitle,
},
setup() {
const singleItem = (item) =>
item.to
? h(
RouterLink,
{
to: item.to,
custom: true,
},
{
default: (props) =>
h(
resolveComponent(item._name),
{
active: props.isActive,
href: props.href,
icon: "cil-speedometer",
onClick: () => props.navigate(),
},
[
item.icon &&
h(resolveComponent("CIcon"), {
customClasses: "nav-icon",
name: item.icon,
}),
item.name,
item.badge &&
h(resolveComponent("CBadge"), {
class: 'ms-auto',
color: item.badge.color,
}, item.badge.text),
]
),
}
)
: h(resolveComponent(item._name), {}, item.name);
const group = (item) =>
h(
RouterLink,
{
to: item.route,
custom: true,
},
{
default: (props) =>
h(
resolveComponent("CNavGroup"),
{
visible: props.isActive
},
{
togglerContent: () => [
h(resolveComponent("CIcon"), {
customClasses: "nav-icon",
name: item.icon,
}),
item.name,
],
default: () => item.children.map((child) => singleItem(child)),
}
),
}
);
return () =>
h(
CSidebarNav,
{},
nav.map((item) =>
typeof item.children === "undefined" ? singleItem(item) : group(item)
)
);
},
});
export { AppSidebarNav };
src/components/Example.vue
+43
View File
@@ -0,0 +1,43 @@
<template>
<div class="example">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" active>
<CIcon name="cil-media-play" class="me-2" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink :href="href" target="_blank">
<CIcon name="cil-code" class="me-2" />
Code
</CNavLink>
</CNavItem>
</CNav>
<CTabContent class="rounded-bottom">
<CTabPane class="p-3 preview" visible>
<slot></slot>
</CTabPane>
</CTabContent>
</div>
</template>
<script>
import packageJson from "../../package.json";
export default {
name: "Example",
props: {
href: {
type: String,
default: undefined,
required: false,
},
},
setup(props) {
const href = `https://coreui.io/vue/docs/${packageJson.config.coreui_library_short_version}/${props.href}`;
return {
href,
};
},
};
</script>
src/containers/TheContainer.vue
-44
View File
@@ -1,44 +0,0 @@
<template>
<div class="c-app">
<TheSidebar/>
<CWrapper>
<TheHeader/>
<div class="c-body">
<main class="c-main">
<CContainer fluid>
<transition name="fade" mode="out-in">
<router-view :key="$route.path"></router-view>
</transition>
</CContainer>
</main>
</div>
<TheFooter/>
</CWrapper>
</div>
</template>
<script>
import TheSidebar from './TheSidebar'
import TheHeader from './TheHeader'
import TheFooter from './TheFooter'
export default {
name: 'TheContainer',
components: {
TheSidebar,
TheHeader,
TheFooter
}
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
src/containers/TheHeader.vue
-66
View File
@@ -1,66 +0,0 @@
<template>
<CHeader fixed with-subheader light>
<CToggler
in-header
class="ml-3 d-lg-none"
@click="$store.commit('toggleSidebarMobile')"
/>
<CToggler
in-header
class="ml-3 d-md-down-none"
@click="$store.commit('toggleSidebarDesktop')"
/>
<CHeaderBrand class="mx-auto d-lg-none" to="/">
<CIcon name="logo" height="48" alt="Logo"/>
</CHeaderBrand>
<CHeaderNav class="d-md-down-none mr-auto">
<CHeaderNavItem class="px-3">
<CHeaderNavLink to="/dashboard">
Dashboard
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="px-3">
<CHeaderNavLink to="/users" exact>
Users
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="px-3">
<CHeaderNavLink>
Settings
</CHeaderNavLink>
</CHeaderNavItem>
</CHeaderNav>
<CHeaderNav class="mr-4">
<CHeaderNavItem class="d-md-down-none mx-2">
<CHeaderNavLink>
<CIcon name="cil-bell"/>
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2">
<CHeaderNavLink>
<CIcon name="cil-list"/>
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2">
<CHeaderNavLink>
<CIcon name="cil-envelope-open"/>
</CHeaderNavLink>
</CHeaderNavItem>
<TheHeaderDropdownAccnt/>
</CHeaderNav>
<CSubheader class="px-3">
<CBreadcrumbRouter class="border-0 mb-0"/>
</CSubheader>
</CHeader>
</template>
<script>
import TheHeaderDropdownAccnt from './TheHeaderDropdownAccnt'
export default {
name: 'TheHeader',
components: {
TheHeaderDropdownAccnt
}
}
</script>
src/containers/TheHeaderDropdownAccnt.vue
-83
View File
@@ -1,83 +0,0 @@
<template>
<CDropdown
inNav
class="c-header-nav-items"
placement="bottom-end"
add-menu-classes="pt-0"
>
<template #toggler>
<CHeaderNavLink>
<div class="c-avatar">
<img
src="img/avatars/6.jpg"
class="c-avatar-img "
/>
</div>
</CHeaderNavLink>
</template>
<CDropdownHeader tag="div" class="text-center" color="light">
<strong>Account</strong>
</CDropdownHeader>
<CDropdownItem>
<CIcon name="cil-bell"/> Updates
<CBadge color="info" class="mfs-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-envelope-open" /> Messages
<CBadge color="success" class="mfs-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-task" /> Tasks
<CBadge color="danger" class="mfs-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-comment-square" /> Comments
<CBadge color="warning" class="mfs-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownHeader
tag="div"
class="text-center"
color="light"
>
<strong>Settings</strong>
</CDropdownHeader>
<CDropdownItem>
<CIcon name="cil-user" /> Profile
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-settings" /> Settings
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-dollar" /> Payments
<CBadge color="secondary" class="mfs-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-file" /> Projects
<CBadge color="primary" class="mfs-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem>
<CIcon name="cil-shield-alt" /> Lock Account
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-lock-locked" /> Logout
</CDropdownItem>
</CDropdown>
</template>
<script>
export default {
name: 'TheHeaderDropdownAccnt',
data () {
return {
itemsCount: 42
}
}
}
</script>
<style scoped>
.c-icon {
margin-right: 0.3rem;
}
</style>
src/containers/TheSidebar.vue
-48
View File
@@ -1,48 +0,0 @@
<template>
<CSidebar
fixed
:minimize="minimize"
:show="show"
@update:show="(value) => $store.commit('set', ['sidebarShow', value])"
>
<CSidebarBrand class="d-md-down-none" to="/">
<CIcon
class="c-sidebar-brand-full"
name="logo"
size="custom-size"
:height="35"
viewBox="0 0 556 134"
/>
<CIcon
class="c-sidebar-brand-minimized"
name="logo"
size="custom-size"
:height="35"
viewBox="0 0 110 134"
/>
</CSidebarBrand>
<CRenderFunction flat :content-to-render="$options.nav"/>
<CSidebarMinimizer
class="d-md-down-none"
@click.native="$store.commit('set', ['sidebarMinimize', !minimize])"
/>
</CSidebar>
</template>
<script>
import nav from './_nav'
export default {
name: 'TheSidebar',
nav,
computed: {
show () {
return this.$store.state.sidebarShow
},
minimize () {
return this.$store.state.sidebarMinimize
}
}
}
</script>
src/containers/_nav.js
-242
View File
@@ -1,242 +0,0 @@
export default [
{
_name: 'CSidebarNav',
_children: [
{
_name: 'CSidebarNavItem',
name: 'Dashboard',
to: '/dashboard',
icon: 'cil-speedometer',
badge: {
color: 'primary',
text: 'NEW'
}
},
{
_name: 'CSidebarNavTitle',
_children: ['Theme']
},
{
_name: 'CSidebarNavItem',
name: 'Colors',
to: '/theme/colors',
icon: 'cil-drop'
},
{
_name: 'CSidebarNavItem',
name: 'Typography',
to: '/theme/typography',
icon: 'cil-pencil'
},
{
_name: 'CSidebarNavTitle',
_children: ['Components']
},
{
_name: 'CSidebarNavDropdown',
name: 'Base',
route: '/base',
icon: 'cil-puzzle',
items: [
{
name: 'Breadcrumbs',
to: '/base/breadcrumbs'
},
{
name: 'Cards',
to: '/base/cards'
},
{
name: 'Carousels',
to: '/base/carousels'
},
{
name: 'Collapses',
to: '/base/collapses'
},
{
name: 'Forms',
to: '/base/forms'
},
{
name: 'Jumbotrons',
to: '/base/jumbotrons'
},
{
name: 'List Groups',
to: '/base/list-groups'
},
{
name: 'Navs',
to: '/base/navs'
},
{
name: 'Navbars',
to: '/base/navbars'
},
{
name: 'Paginations',
to: '/base/paginations'
},
{
name: 'Popovers',
to: '/base/popovers'
},
{
name: 'Progress Bars',
to: '/base/progress-bars'
},
{
name: 'Switches',
to: '/base/switches'
},
{
name: 'Tables',
to: '/base/tables'
},
{
name: 'Tabs',
to: '/base/tabs'
},
{
name: 'Tooltips',
to: '/base/tooltips'
}
]
},
{
_name: 'CSidebarNavDropdown',
name: 'Buttons',
route: '/buttons',
icon: 'cil-cursor',
items: [
{
name: 'Buttons',
to: '/buttons/standard-buttons'
},
{
name: 'Button Dropdowns',
to: '/buttons/dropdowns'
},
{
name: 'Button Groups',
to: '/buttons/button-groups'
},
{
name: 'Brand Buttons',
to: '/buttons/brand-buttons'
}
]
},
{
_name: 'CSidebarNavItem',
name: 'Charts',
to: '/charts',
icon: 'cil-chart-pie'
},
{
_name: 'CSidebarNavDropdown',
name: 'Icons',
route: '/icons',
icon: 'cil-star',
items: [
{
name: 'CoreUI Icons',
to: '/icons/coreui-icons',
badge: {
color: 'info',
text: 'NEW'
}
},
{
name: 'Brands',
to: '/icons/brands'
},
{
name: 'Flags',
to: '/icons/flags'
}
]
},
{
_name: 'CSidebarNavDropdown',
name: 'Notifications',
route: '/notifications',
icon: 'cil-bell',
items: [
{
name: 'Alerts',
to: '/notifications/alerts'
},
{
name: 'Badges',
to: '/notifications/badges'
},
{
name: 'Modals',
to: '/notifications/modals'
}
]
},
{
_name: 'CSidebarNavItem',
name: 'Widgets',
to: '/widgets',
icon: 'cil-calculator',
badge: {
color: 'primary',
text: 'NEW',
shape: 'pill'
}
},
{
_name: 'CSidebarNavDivider',
_class: 'm-2'
},
{
_name: 'CSidebarNavTitle',
_children: ['Extras']
},
{
_name: 'CSidebarNavDropdown',
name: 'Pages',
route: '/pages',
icon: 'cil-star',
items: [
{
name: 'Login',
to: '/pages/login'
},
{
name: 'Register',
to: '/pages/register'
},
{
name: 'Error 404',
to: '/pages/404'
},
{
name: 'Error 500',
to: '/pages/500'
}
]
},
{
_name: 'CSidebarNavItem',
name: 'Download CoreUI',
href: 'http://coreui.io/vue/',
icon: { name: 'cil-cloud-download', class: 'text-white' },
_class: 'bg-success text-white',
target: '_blank'
},
{
_name: 'CSidebarNavItem',
name: 'Try CoreUI PRO',
href: 'http://coreui.io/pro/vue/',
icon: { name: 'cil-layers', class: 'text-white' },
_class: 'bg-danger text-white',
target: '_blank'
}
]
}
]
src/layouts/DefaultLayout.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<div>
<AppSidebar />
<div class="wrapper d-flex flex-column min-vh-100 bg-light">
<AppHeader />
<div className="body flex-grow-1 px-3">
<CContainer lg>
<router-view />
</CContainer>
</div>
<AppFooter />
</div>
</div>
</template>
<script>
import { CContainer, CDropdown, CDropdownItem } from "@coreui/vue";
import AppFooter from "@/components/AppFooter.vue";
import AppHeader from "@/components/AppHeader.vue";
import AppSidebar from "@/components/AppSidebar.vue";
export default {
name: "DefaultLayout",
components: {
AppFooter,
AppHeader,
AppSidebar,
CContainer,
},
};
</script>
src/main.js
+18 -20
View File
@@ -1,22 +1,20 @@
import 'core-js/stable'
import Vue from 'vue'
import App from './App'
import router from './router'
import CoreuiVue from '@coreui/vue'
import { iconsSet as icons } from './assets/icons/icons.js'
import store from './store'
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.performance = true
Vue.use(CoreuiVue)
Vue.prototype.$log = console.log.bind(console)
import CoreuiVue from "@coreui/vue";
import { CIcon } from "@coreui/icons-vue";
import { iconsSet as icons } from "@/assets/icons/icons.js";
import Example from "@/components/Example";
new Vue({
el: '#app',
router,
store,
icons,
template: '<App/>',
components: {
App
}
})
const app = createApp(App);
app.use(store);
app.use(router);
app.use(CoreuiVue);
app.provide('icons', icons);
app.component("CIcon", CIcon);
app.component("Example", Example);
app.mount("#app");
src/router/index.js
+44 -324
View File
@@ -1,342 +1,62 @@
import Vue from 'vue'
import Router from 'vue-router'
import { h, resolveComponent } from "vue";
import { createRouter, createWebHistory } from "vue-router";
// import Home from "../views/Home.vue";
// Containers
const TheContainer = () => import('@/containers/TheContainer')
// Views
const Dashboard = () => import('@/views/Dashboard')
const Colors = () => import('@/views/theme/Colors')
const Typography = () => import('@/views/theme/Typography')
const Charts = () => import('@/views/charts/Charts')
const Widgets = () => import('@/views/widgets/Widgets')
import DefaultLayout from "@/layouts/DefaultLayout";
// Views - Components
const Cards = () => import('@/views/base/Cards')
const Forms = () => import('@/views/base/Forms')
const Switches = () => import('@/views/base/Switches')
const Tables = () => import('@/views/base/Tables')
const Tabs = () => import('@/views/base/Tabs')
const Breadcrumbs = () => import('@/views/base/Breadcrumbs')
const Carousels = () => import('@/views/base/Carousels')
const Collapses = () => import('@/views/base/Collapses')
const Jumbotrons = () => import('@/views/base/Jumbotrons')
const ListGroups = () => import('@/views/base/ListGroups')
const Navs = () => import('@/views/base/Navs')
const Navbars = () => import('@/views/base/Navbars')
const Paginations = () => import('@/views/base/Paginations')
const Popovers = () => import('@/views/base/Popovers')
const ProgressBars = () => import('@/views/base/ProgressBars')
const Tooltips = () => import('@/views/base/Tooltips')
// const Breadcrumbs = () => import("@/views/base/Breadcrumbs");
// Views - Buttons
const StandardButtons = () => import('@/views/buttons/StandardButtons')
const ButtonGroups = () => import('@/views/buttons/ButtonGroups')
const Dropdowns = () => import('@/views/buttons/Dropdowns')
const BrandButtons = () => import('@/views/buttons/BrandButtons')
// Views - Icons
const CoreUIIcons = () => import('@/views/icons/CoreUIIcons')
const Brands = () => import('@/views/icons/Brands')
const Flags = () => import('@/views/icons/Flags')
// Views - Notifications
const Alerts = () => import('@/views/notifications/Alerts')
const Badges = () => import('@/views/notifications/Badges')
const Modals = () => import('@/views/notifications/Modals')
// Views - Pages
const Page404 = () => import('@/views/pages/Page404')
const Page500 = () => import('@/views/pages/Page500')
const Login = () => import('@/views/pages/Login')
const Register = () => import('@/views/pages/Register')
// Users
const Users = () => import('@/views/users/Users')
const User = () => import('@/views/users/User')
Vue.use(Router)
export default new Router({
mode: 'hash', // https://router.vuejs.org/api/#mode
linkActiveClass: 'active',
scrollBehavior: () => ({ y: 0 }),
routes: configRoutes()
})
function configRoutes () {
return [
const routes = [
{
path: '/',
redirect: '/dashboard',
name: 'Home',
component: TheContainer,
path: "/",
name: "Home",
component: DefaultLayout,
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: Dashboard
path: "dashboard",
name: "Dashboard",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "dashboard" */ "@/views/Dashboard.vue"),
},
{
path: 'theme',
redirect: '/theme/colors',
name: 'Theme',
path: "/base",
name: "Base",
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'colors',
name: 'Colors',
component: Colors
},
{
path: 'typography',
name: 'Typography',
component: Typography
}
]
},
{
path: 'charts',
name: 'Charts',
component: Charts
},
{
path: 'widgets',
name: 'Widgets',
component: Widgets
},
{
path: 'users',
meta: {
label: 'Users'
},
component: {
render(c) {
return c('router-view')
render() {
return h(resolveComponent('router-view'))
}
},
children: [
{
path: '',
name: 'Users',
component: Users
path: "/base/breadcrumbs",
name: "Breadcrumbs",
component: () =>
import(
/* webpackChunkName: "dashboard" */ "@/views/base/Breadcrumbs.vue"
),
},
{
path: ':id',
meta: {
label: 'User Details'
],
},
name: 'User',
component: User
}
]
],
},
{
path: 'base',
redirect: '/base/cards',
name: 'Base',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'cards',
name: 'Cards',
component: Cards
},
{
path: 'forms',
name: 'Forms',
component: Forms
},
{
path: 'switches',
name: 'Switches',
component: Switches
},
{
path: 'tables',
name: 'Tables',
component: Tables
},
{
path: 'tabs',
name: 'Tabs',
component: Tabs
},
{
path: 'breadcrumbs',
name: 'Breadcrumbs',
component: Breadcrumbs
},
{
path: 'carousels',
name: 'Carousels',
component: Carousels
},
{
path: 'collapses',
name: 'Collapses',
component: Collapses
},
{
path: 'jumbotrons',
name: 'Jumbotrons',
component: Jumbotrons
},
{
path: 'list-groups',
name: 'List Groups',
component: ListGroups
},
{
path: 'navs',
name: 'Navs',
component: Navs
},
{
path: 'navbars',
name: 'Navbars',
component: Navbars
},
{
path: 'paginations',
name: 'Paginations',
component: Paginations
},
{
path: 'popovers',
name: 'Popovers',
component: Popovers
},
{
path: 'progress-bars',
name: 'Progress Bars',
component: ProgressBars
},
{
path: 'tooltips',
name: 'Tooltips',
component: Tooltips
}
]
},
{
path: 'buttons',
redirect: '/buttons/standard-buttons',
name: 'Buttons',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'standard-buttons',
name: 'Standard Buttons',
component: StandardButtons
},
{
path: 'button-groups',
name: 'Button Groups',
component: ButtonGroups
},
{
path: 'dropdowns',
name: 'Dropdowns',
component: Dropdowns
},
{
path: 'brand-buttons',
name: 'Brand Buttons',
component: BrandButtons
}
]
},
{
path: 'icons',
redirect: '/icons/coreui-icons',
name: 'CoreUI Icons',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'coreui-icons',
name: 'Icons library',
component: CoreUIIcons
},
{
path: 'brands',
name: 'Brands',
component: Brands
},
{
path: 'flags',
name: 'Flags',
component: Flags
}
]
},
{
path: 'notifications',
redirect: '/notifications/alerts',
name: 'Notifications',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'alerts',
name: 'Alerts',
component: Alerts
},
{
path: 'badges',
name: 'Badges',
component: Badges
},
{
path: 'modals',
name: 'Modals',
component: Modals
}
]
}
]
},
{
path: '/pages',
redirect: '/pages/404',
name: 'Pages',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: '404',
name: 'Page404',
component: Page404
},
{
path: '500',
name: 'Page500',
component: Page500
},
{
path: 'login',
name: 'Login',
component: Login
},
{
path: 'register',
name: 'Register',
component: Register
}
]
}
]
}
// {
// path: "/about",
// name: "About",
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () =>
// import(/* webpackChunkName: "about" */ "../views/About.vue")
// }
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
src/store.js
-27
View File
@@ -1,27 +0,0 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
sidebarShow: 'responsive',
sidebarMinimize: false
}
const mutations = {
toggleSidebarDesktop (state) {
const sidebarOpened = [true, 'responsive'].includes(state.sidebarShow)
state.sidebarShow = sidebarOpened ? false : 'responsive'
},
toggleSidebarMobile (state) {
const sidebarClosed = [false, 'responsive'].includes(state.sidebarShow)
state.sidebarShow = sidebarClosed ? true : 'responsive'
},
set (state, [variable, value]) {
state[variable] = value
}
}
export default new Vuex.Store({
state,
mutations
})
src/store/index.js
+10
View File
@@ -0,0 +1,10 @@
import { createStore } from "vuex";
export default createStore({
state: {
sidebarShow: true,
},
mutations: {},
actions: {},
modules: {},
});
src/views/Dashboard.vue
+2 -544
View File
@@ -1,547 +1,5 @@
<template>
<div>
<WidgetsDropdown/>
<CCard>
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
<div class="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" class="d-none d-md-block">
<CButton color="primary" class="float-right">
<CIcon name="cil-cloud-download"/>
</CButton>
<CButtonGroup class="float-right mr-3">
<CButton
color="outline-secondary"
v-for="(value, key) in ['Day', 'Month', 'Year']"
:key="key"
class="mx-0"
:pressed="value === selected ? true : false"
@click="selected = value"
>
{{value}}
</CButton>
</CButtonGroup>
</CCol>
</CRow>
<MainChartExample style="height:300px;margin-top:40px;"/>
</CCardBody>
<CCardFooter>
<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="progress-xs mt-2"
:precision="1"
color="success"
:value="40"
/>
</CCol>
<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="progress-xs mt-2"
:precision="1"
color="info"
:value="20"
/>
</CCol>
<CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<CProgress
class="progress-xs mt-2"
:precision="1"
color="warning"
:value="60"
/>
</CCol>
<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="progress-xs mt-2"
:precision="1"
color="danger"
:value="80"
/>
</CCol>
<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="progress-xs mt-2"
:precision="1"
:value="40"
/>
</CCol>
</CRow>
</CCardFooter>
</CCard>
<WidgetsBrand/>
<CRow>
<CCol md="12">
<CCard>
<CCardHeader>
Traffic &amp; Sales
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<CCallout color="info">
<small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="danger">
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
</CCallout>
</CCol>
</CRow>
<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
class="progress-xs"
color="info"
:value="34"
/>
<CProgress
class="progress-xs"
color="danger"
: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
class="progress-xs"
:value="56"
color="info"
/>
<CProgress
class="progress-xs"
:value="94"
color="danger"
/>
</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
class="progress-xs"
:value="12"
color="info"
/>
<CProgress
class="progress-xs"
:value="67"
color="danger"
/>
</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
class="progress-xs"
:value="43"
color="info"
/>
<CProgress
class="progress-xs"
:value="91"
color="danger"
/>
</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
class="progress-xs"
:value="22"
color="info"
/>
<CProgress
class="progress-xs"
:value="73"
color="danger"
/>
</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
class="progress-xs"
:value="53"
color="info"
/>
<CProgress
class="progress-xs"
:value="82"
color="danger"
/>
</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
class="progress-xs"
:value="9"
color="info"
/>
<CProgress
class="progress-xs"
:value="69"
color="danger"
/>
</div>
</div>
<div class="legend text-center">
<small>
<sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;&nbsp;
<sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
</CCol>
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<CCallout color="warning">
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="success">
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
</CCallout>
</CCol>
</CRow>
<hr class="mt-0">
<ul class="horizontal-bars type-2">
<div class="progress-group">
<div class="progress-group-header">
<CIcon name="cil-user" class="progress-group-icon"/>
<span class="title">Male</span>
<span class="ml-auto font-weight-bold">43%</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="43"
color="warning"
/>
</div>
</div>
<div class="progress-group mb-5">
<div class="progress-group-header">
<CIcon name="cil-user-female" class="progress-group-icon"/>
<span class="title">Female</span>
<span class="ml-auto font-weight-bold">37%</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="37"
color="warning"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon name="cil-globe-alt" class="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
class="progress-xs"
:value="56"
color="success"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="cib-facebook"
height="17"
class="progress-group-icon"
/>
<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
class="progress-xs"
:value="15"
color="success"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="cib-twitter"
height="17"
class="progress-group-icon"
/>
<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
class="progress-xs"
:value="11"
color="success"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="cib-linkedin"
height="17"
class="progress-group-icon"
/>
<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="progress-group-bars">
<CProgress
class="progress-xs"
:value="8"
color="success"
/>
</div>
</div>
<div class="divider text-center">
<CButton color="link" size="sm" class="text-muted">
<CIcon name="cil-options"/>
</CButton>
</div>
</ul>
</CCol>
</CRow>
<br/>
<CDataTable
class="mb-0 table-outline"
hover
:items="tableItems"
:fields="tableFields"
head-color="light"
no-sorting
>
<td slot="avatar" class="text-center" slot-scope="{item}">
<div class="c-avatar">
<img :src="item.avatar.url" class="c-avatar-img" alt="">
<span
class="c-avatar-status"
:class="`bg-${item.avatar.status || 'secondary'}`"
></span>
</div>
</td>
<td slot="user" slot-scope="{item}">
<div>{{item.user.name}}</div>
<div class="small text-muted">
<span>
<template v-if="item.user.new">New</template>
<template v-else>Recurring</template>
</span> | Registered: {{item.user.registered}}
</div>
</td>
<td
slot="country"
slot-scope="{item}"
class="text-center"
>
<CIcon
:name="item.country.flag"
height="25"
/>
</td>
<td slot="usage" slot-scope="{item}">
<div class="clearfix">
<div class="float-left">
<strong>{{item.usage.value}}%</strong>
</div>
<div class="float-right">
<small class="text-muted">{{item.usage.period}}</small>
</div>
</div>
<CProgress
class="progress-xs"
v-model="item.usage.value"
:color="color(item.usage.value)"
/>
</td>
<td
slot="payment"
slot-scope="{item}"
class="text-center"
>
<CIcon
:name="item.payment.icon"
height="25"
/>
</td>
<td slot="activity" slot-scope="{item}">
<div class="small text-muted">Last login</div>
<strong>{{item.activity}}</strong>
</td>
</CDataTable>
</CCardBody>
</CCard>
</CCol>
</CRow>
<div class="dashboard">
<h1>Dashboard</h1>
</div>
</template>
<script>
import MainChartExample from './charts/MainChartExample'
import WidgetsDropdown from './widgets/WidgetsDropdown'
import WidgetsBrand from './widgets/WidgetsBrand'
export default {
name: 'Dashboard',
components: {
MainChartExample,
WidgetsDropdown,
WidgetsBrand
},
data () {
return {
selected: 'Month',
tableItems: [
{
avatar: { url: 'img/avatars/1.jpg', status: 'success' },
user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
country: { name: 'USA', flag: 'cif-us' },
usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
activity: '10 sec ago'
},
{
avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
country: { name: 'Brazil', flag: 'cif-br' },
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Visa', icon: 'cib-cc-visa' },
activity: '5 minutes ago'
},
{
avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
country: { name: 'India', flag: 'cif-in' },
usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Stripe', icon: 'cib-stripe' },
activity: '1 hour ago'
},
{
avatar: { url: 'img/avatars/4.jpg', status: '' },
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
country: { name: 'France', flag: 'cif-fr' },
usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'PayPal', icon: 'cib-paypal' },
activity: 'Last month'
},
{
avatar: { url: 'img/avatars/5.jpg', status: 'success' },
user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
country: { name: 'Spain', flag: 'cif-es' },
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Google Wallet', icon: 'cib-google-pay' },
activity: 'Last week'
},
{
avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
country: { name: 'Poland', flag: 'cif-pl' },
usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Amex', icon: 'cib-cc-amex' },
activity: 'Last week'
}
],
tableFields: [
{ key: 'avatar', label: '', _classes: 'text-center' },
{ key: 'user' },
{ key: 'country', _classes: 'text-center' },
{ key: 'usage' },
{ key: 'payment', label: 'Payment method', _classes: 'text-center' },
{ key: 'activity' },
]
}
},
methods: {
color (value) {
let $color
if (value <= 25) {
$color = 'info'
} else if (value > 25 && value <= 50) {
$color = 'success'
} else if (value > 50 && value <= 75) {
$color = 'warning'
} else if (value > 75 && value <= 100) {
$color = 'danger'
}
return $color
}
}
}
</script>
src/views/base/Breadcrumbs.vue
+18 -81
View File
@@ -1,24 +1,25 @@
<template>
<CRow>
<CCol col>
<CCol>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/breadcrumb"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
<strong>Vue Breadcrumb</strong>
</CCardHeader>
<CCardBody>
<CBreadcrumb :items="items"/>
<CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
<Example href="breadcrumbs">
<CBreadcrumb>
<CBreadcrumbItem active>Home</CBreadcrumbItem>
</CBreadcrumb>
<CBreadcrumb>
<CBreadcrumbItem href="#">Home</CBreadcrumbItem>
<CBreadcrumbItem active>Library</CBreadcrumbItem>
</CBreadcrumb>
<CBreadcrumb>
<CBreadcrumbItem href="#">Home</CBreadcrumbItem>
<CBreadcrumbItem href="#">Library</CBreadcrumbItem>
<CBreadcrumbItem active>Data</CBreadcrumbItem>
</CBreadcrumb>
</Example>
</CCardBody>
</CCard>
</CCol>
@@ -27,70 +28,6 @@
<script>
export default {
name: 'Breadcrumbs',
data () {
return {
items: [
{
text: 'Admin',
href: '#'
},
{
text: 'Manage',
href: '#'
},
{
text: 'Library'
}
],
items2: [
{
text: 'Go to dashboard',
to: '/dashboard'
},
{
text: 'Go to widgets',
to: '/Widgets'
},
{
text: 'Go to Google',
href: 'http://google.com'
},
{
text: 'Current page'
}
],
items3: [
{
text: 'Added',
to: '#2',
addClasses: 'font-xl'
},
{
text: 'Custom',
to: '#3',
addClasses: 'font-xl'
},
{
text: 'Classes',
to: '#4',
addClasses: 'font-xl text-danger'
}
]
}
}
}
name: "Breadcrumbs",
};
</script>
<style>
.breadcrumb-item + .font-xl.breadcrumb-item::before {
color: rgb(140, 195, 38);
content: '>>';
padding: 0px 10px;
}
</style>
src/views/base/Cards.vue
-289
View File
@@ -1,289 +0,0 @@
<template>
<div>
<CRow>
<CCol sm="6" md="4">
<CCard>
<CCardHeader>
Card title
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/card-components"
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>
<CCardBody>{{loremIpsum}}</CCardBody>
<CCardFooter>Card Footer</CCardFooter>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader>
Card with switch
<CSwitch
class="float-right"
size="sm"
shape="pill"
color="info"
data-on="On"
data-off="Off"
:checked="true"
/>
</CCardHeader>
<CCardBody>
{{loremIpsum}}
</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader>
Card with label
<CBadge color="success" class="float-right">Success</CBadge>
</CCardHeader>
<CCardBody>
{{loremIpsum}}
</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader>
Card with label
<CBadge shape="pill" color="danger" class="float-right">42</CBadge>
</CCardHeader>
<CCardBody>
{{loremIpsum}}
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard border-color="primary">
<CCardHeader>Card outline primary</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard border-color="secondary">
<CCardHeader>Card outline secondary</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard border-color="success">
<CCardHeader>Card outline success</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard border-color="info">
<CCardHeader>Card outline info</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard border-color="warning">
<CCardHeader>Card outline warning</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard border-color="danger">
<CCardHeader>Card outline danger</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard accent-color="primary">
<CCardHeader>Card with primary accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard accent-color="secondary">
<CCardHeader>Card with secondary accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard accent-color="success">
<CCardHeader>Card with success accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard accent-color="info">
<CCardHeader>Card with info accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard accent-color="info">
<CCardHeader>Card with info accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard accent-color="danger">
<CCardHeader>Card with danger accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard color="primary" class="text-center" body-wrapper text-color="white">
<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>
</footer>
</blockquote>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard
color="success"
class="text-center"
body-wrapper
text-color="white"
>
<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>
</footer>
</blockquote>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard color="info" class="text-center" body-wrapper text-color="white">
<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>
</footer>
</blockquote>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard color="warning" class="text-center" body-wrapper text-color="white">
<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>
</footer>
</blockquote>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard color="danger" class="text-center" body-wrapper text-color="white">
<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>
</footer>
</blockquote>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard color="secondary" class="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>
</footer>
</blockquote>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard color="primary" body-wrapper text-color="white">
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard color="success" body-wrapper text-color="white">
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard color="info" body-wrapper text-color="white">
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard color="warning" body-wrapper text-color="white">
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard color="danger" body-wrapper text-color="white">
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<transition name="fade">
<CCard v-if="show" color="secondary">
<CCardHeader>
Card with header actions
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
<CIcon name="cil-settings"/>
</CLink>
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
</CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
<CIcon name="cil-x-circle"/>
</CLink>
</div>
</CCardHeader>
<CCollapse :show="isCollapsed" :duration="400">
<CCardBody>
{{loremIpsum}}
</CCardBody>
</CCollapse>
</CCard>
</transition>
</CCol>
</CRow>
</div>
</template>
<script>
export default {
name: 'Cards',
data: function () {
return {
show: true,
isCollapsed: true,
loremIpsum: '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.'
}
}
}
</script>
src/views/base/Carousels.vue
-50
View File
@@ -1,50 +0,0 @@
<template>
<CRow>
<CCol md="12" lg="7">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Carousel</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/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
captionHeader="First Slide"
image="https://picsum.photos/1024/480/?image=52"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
captionHeader="Blank page"
:image="{ placeholderColor: 'grey' }"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
image="https://picsum.photos/1024/480/?image=54"
/>
</CCarousel>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Carousels'
}
</script>
src/views/base/Collapses.vue
-153
View File
@@ -1,153 +0,0 @@
<template>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Collapse </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/collapse"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CButton @click="collapse = !collapse" color="primary" class="mb-2">
Toggle Collapse
</CButton>
<CCollapse :show="collapse" :duration="400">
<CCard body-wrapper>
<CCardText>Collapse contents Here</CCardText>
<CButton
@click="innerCollapse = !innerCollapse"
size="sm"
color="secondary"
>
Toggle Inner Collapse
</CButton>
<CCollapse :show="innerCollapse" class="mt-2">
<CCard body-wrapper>Hello!</CCard>
</CCollapse>
</CCard>
</CCollapse>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CButton
@click="cardCollapse = !cardCollapse"
tag="button"
color="link"
block
class="text-left shadow-none card-header"
>
<h5 class="m-0">Collapsible card</h5>
</CButton>
<CCollapse :show="cardCollapse">
<CCardBody class="m-1">
{{text}}
</CCardBody>
</CCollapse>
</CCard>
</CCol>
<CCol xl="6">
<CCard>
<CCardHeader>
Collapse
<small> accordion</small>
</CCardHeader>
<CCardBody>
<div>
<CCard class="mb-0">
<CButton
block
color="link"
class="text-left shadow-none card-header"
@click="accordion = accordion === 0 ? false : 0"
>
<h5 class="m-0">Collapsible Group Item #1</h5>
</CButton>
<CCollapse :show="accordion === 0">
<CCardBody>
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
</CCardBody>
</CCollapse>
</CCard>
<CCard class="mb-0">
<CButton
block
color="link"
class="text-left shadow-none card-header"
@click="accordion = accordion === 1 ? false : 1"
>
<h5 class="m-0">Collapsible Group Item #2</h5>
</CButton>
<CCollapse :show="accordion === 1">
<CCardBody>
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
</CCardBody>
</CCollapse>
</CCard>
<CCard class="mb-0">
<CButton
block
color="link"
class="text-left shadow-none card-header"
@click="accordion = accordion === 2 ? false : 2"
>
<h5 class="m-0">Collapsible Group Item #3</h5>
</CButton>
<CCollapse :show="accordion === 2">
<CCardBody>
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus labore sustainable VHS.
</CCardBody>
</CCollapse>
</CCard>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Collapses',
data () {
return {
collapse: false,
cardCollapse: true,
innerCollapse: false,
accordion: 0,
text: `
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
synth nesciunt you probably haven't heard of them accusamus labore VHS.
`
}
}
}
</script>
src/views/base/Forms.vue
-926
View File
@@ -1,926 +0,0 @@
<template>
<div>
<CRow>
<CCol sm="6">
<CCard>
<CCardHeader>
<strong>Credit Card </strong> <small>Form</small>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/form-components"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm="12">
<CInput
label="Name"
placeholder="Enter your name"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="12">
<CInput
label="Credit Card Number"
placeholder="0000 0000 0000 0000"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="4">
<CSelect
label="Month"
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
/>
</CCol>
<CCol sm="4">
<CSelect
label="Year"
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
/>
</CCol>
<CCol sm="4">
<CInput
label="CVV/CVC"
placeholder="123"
/>
</CCol>
</CRow>
</CCardBody>
</CCard>
</CCol>
<CCol sm="6">
<CCard>
<CCardHeader>
<strong>Company </strong><small>Form</small>
</CCardHeader>
<CCardBody>
<CInput
label="Company"
placeholder="Enter your company name"
/>
<CInput
label="VAT"
placeholder="PL1234567890"
/>
<CInput
label="Street"
placeholder="Enter street name"
/>
<CRow>
<CCol sm="8">
<CInput
label="City"
placeholder="Enter your city"
/>
</CCol>
<CCol sm="4">
<CInput
label="Postal code"
placeholder="Postal code"
/>
</CCol>
</CRow>
<CInput
label="Country"
placeholder="Country name"
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<strong>Basic Form</strong> Elements
</CCardHeader>
<CCardBody>
<CForm>
<CInput
description="Let us know your full name."
label="Enter your name"
horizontal
autocomplete="name"
/>
<CInput
label="Static"
value="Username"
horizontal
plaintext
/>
<CInput
label="Text input"
description="This is a help text"
placeholder="Text"
horizontal
/>
<CInput
label="Date"
type="date"
horizontal
/>
<CInput
label="Email input"
description="Please enter your email"
placeholder="Enter your email"
type="email"
horizontal
autocomplete="email"
/>
<CInput
label="Password Input"
description="Please enter a complex password"
placeholder="Enter your password"
type="password"
horizontal
autocomplete="current-password"
/>
<CInput
label="Disabled Input"
placeholder="Disabled"
horizontal
disabled
/>
<CTextarea
label="Textarea"
placeholder="Content..."
horizontal
rows="9"
/>
<CSelect
label="Select"
horizontal
:options="options"
placeholder="Please select"
/>
<CSelect
label="Large select"
size="lg"
horizontal
:value.sync="selectedOption"
:options="selectOptions"
placeholder="Please select"
/>
<CSelect
label="Small select"
size="sm"
horizontal
:options="options"
placeholder="Please select"
custom
/>
<CSelect
label="Select"
horizontal
:options="options"
placeholder="Please select"
disabled
/>
<template v-for="(name, key) in checkboxNames">
<CRow form class="form-group" :key="name">
<CCol tag="label" sm="3" class="col-form-label">
{{name}}
</CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CInputCheckbox
v-for="(option, optionIndex) in options"
:key="key + option"
:label="option"
:value="option"
:custom="key > 1"
:name="`Option 1${key}`"
:checked="optionIndex === key"
:inline="key % 2 === 1"
/>
</CCol>
</CRow>
</template>
<CRow form class="form-group">
<CCol tag="label" sm="3" class="col-form-label">
Switch checkboxes
</CCol>
<CCol sm="9">
<CSwitch
class="mr-1"
color="primary"
:checked="true"
/>
<CSwitch
class="mr-1"
color="success"
:checked="true"
variant="outline"
/>
<CSwitch
class="mr-1"
color="warning"
:checked="true"
variant="opposite"
/>
<CSwitch
class="mr-1"
color="danger"
:checked="true"
shape="pill"
/>
<CSwitch
class="mr-1"
color="info"
:checked="true"
shape="pill"
variant="outline"
/>
<CSwitch
class="mr-1"
color="dark"
:checked="true"
shape="pill"
variant="opposite"
/>
</CCol>
</CRow>
<template v-for="(name, key) in radioNames">
<CRow form class="form-group" :key="name">
<CCol sm="3">
{{name}}
</CCol>
<CInputRadioGroup
class="col-sm-9"
:options="options"
:custom="key > 1"
:checked="`Option ${key}`"
:inline="key % 2 === 1"
/>
</CRow>
</template>
<CInputFile
label="File input"
horizontal
/>
<CInputFile
label="Multiple file input"
horizontal
multiple
/>
<CInputFile
label="File custom input"
horizontal
custom
/>
<CInputFile
label="Multiple file custom input"
horizontal
multiple
custom
/>
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
<CCardHeader>
<strong>Inline</strong> Form
</CCardHeader>
<CCardBody>
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
<CForm inline>
<CInput
class="mr-2"
placeholder="Jane Doe"
>
<template #label>
<small>Name:&nbsp;</small>
</template>
</CInput>
<CInput
placeholder="jane.doe@example.com"
autocomplete="email"
>
<template #label>
<small>Email:&nbsp;</small>
</template>
</CInput>
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<strong>Horizontal</strong> Form
</CCardHeader>
<CCardBody>
<CForm>
<CInput
type="email"
description="Please enter your email."
autocomplete="email"
label="Email"
horizontal
placeholder="Enter Email..."
/>
<CInput
type="password"
description="Please enter your password."
autocomplete="current-password"
label="Password"
horizontal
placeholder="Enter Password..."
/>
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
<CCardHeader>
<strong>Normal</strong> Form
</CCardHeader>
<CForm novalidate>
<CCardBody>
<CInput
type="email"
description="Please enter your email."
autocomplete="email"
label="Email"
placeholder="Enter Email..."
required
was-validated
/>
<CInput
type="password"
description="Please enter your password."
autocomplete="current-password"
label="Password"
placeholder="Enter Password..."
required
was-validated
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CForm>
</CCard>
<CCard>
<CCardHeader>
Input <strong>Grid</strong>
</CCardHeader>
<CCardBody>
<CRow class="form-group">
<CCol sm="3">
<CInput class="mb-0" placeholder=".col-sm-3"/>
</CCol>
</CRow>
<CRow class="form-group">
<CCol sm="4">
<CInput class="mb-0" placeholder=".col-sm-4"/>
</CCol>
</CRow>
<CRow class="form-group">
<CCol sm="5">
<CInput class="mb-0" placeholder=".col-sm-5"/>
</CCol>
</CRow>
<CRow class="form-group">
<CCol sm="6">
<CInput class="mb-0" placeholder=".col-sm-6"/>
</CCol>
</CRow>
<CRow class="form-group">
<CCol sm="7">
<CInput class="mb-0" placeholder=".col-sm-7"/>
</CCol>
</CRow>
<CRow class="form-group">
<CCol sm="8">
<CInput class="mb-0" placeholder=".col-sm-8"/>
</CCol>
</CRow>
<CRow class="form-group">
<CCol sm="9">
<CInput class="mb-0" placeholder=".col-sm-9"/>
</CCol>
</CRow>
<CRow class="form-group">
<CCol sm="10">
<CInput class="mb-0" placeholder=".col-sm-10"/>
</CCol>
</CRow>
<CRow class="form-group">
<CCol sm="11">
<CInput class="mb-0" placeholder=".col-sm-11"/>
</CCol>
</CRow>
<CRow class="form-group">
<CCol sm="12">
<CInput class="mb-0" placeholder=".col-sm-12"/>
</CCol>
</CRow>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-user"/> Login</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
<CCardHeader>
Input <strong>Sizes</strong>
</CCardHeader>
<CCardBody>
<CInput
label="Small input"
size="sm"
horizontal
placeholder="size='sm'"
/>
<CInput
label="Default input"
horizontal
placeholder="normal"
/>
<CInput
label="Large input"
size="lg"
horizontal
placeholder="size='lg'"
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="12" md="6">
<CCard>
<CCardHeader>
<strong>Basic Validation</strong> Form
</CCardHeader>
<CCardBody>
<CForm validated novalidate>
<CInput
label="Input is valid"
valid-feedback="Input is not required."
/>
<CInput
label="Input is invalid"
required
valid-feedback="Thank you :)"
invalid-feedback="Please provide a required input."
/>
</CForm>
</CCardBody>
</CCard>
</CCol>
<CCol sm="12" md="6">
<CCard>
<CCardHeader>
<strong>Custom Validation</strong> Form
</CCardHeader>
<CCardBody>
<CForm>
<CInput
label="Input is valid"
valid-feedback="Input is valid."
invalid-feedback="Please provide at least 4 characters."
value="Valid value"
:is-valid="validator"
/>
<CInput
label="Input is invalid"
valid-feedback="Thank you :)"
invalid-feedback="Please provide at least 4 characters."
:is-valid="validator"
/>
</CForm>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="4">
<CCard>
<CCardHeader>
<strong>Icon/Text</strong> Groups
</CCardHeader>
<CCardBody>
<CInput placeholder="Username">
<template #prepend-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
type="email"
placeholder="Email"
autocomplete="email"
>
<template #append-content><CIcon name="cil-envelope-open"/></template>
</CInput>
<CInput
placeholder="ex. $1.000.000"
append=".00"
>
<template #prepend-content><CIcon name="cil-euro"/></template>
</CInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol sm="4">
<CCard>
<CCardHeader>
<strong>Buttons</strong> Groups
</CCardHeader>
<CCardBody>
<CInput placeholder="Username">
<template #prepend>
<CButton color="primary">
<CIcon name="cil-magnifying-glass"/> Search
</CButton>
</template>
</CInput>
<CInput
type="email"
placeholder="Email"
autocomplete="email"
>
<template #append>
<CButton type="submit" color="primary">Submit</CButton>
</template>
</CInput>
<CInput
type="email"
placeholder="Email"
autocomplete="email"
>
<template #prepend>
<CButton color="primary"><CIcon name="cib-facebook"/></CButton>
</template>
<template #append>
<CButton color="primary"><CIcon name="cib-twitter"/></CButton>
</template>
</CInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol sm="4">
<CCard>
<CCardHeader>
<strong>Dropdowns</strong> Groups
</CCardHeader>
<CCardBody>
<CInput placeholder="Username">
<template #prepend>
<CDropdown
togglerText="Action"
color="primary"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
</CInput>
<CInput
type="email"
placeholder="Email"
autocomplete="email"
>
<template #append>
<CDropdown
togglerText="Action"
color="primary"
right
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
</CInput>
<CInput placeholder="...">
<template #prepend>
<CDropdown
togglerText="Split"
color="primary"
split
>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<template #append>
<CDropdown
togglerText="Action"
color="primary"
right
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
</CInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</CCardHeader>
<CCardBody>
<CRow
class="form-group"
v-for="(number, key) in [4,5,6,7,8]"
:key="key"
>
<CCol :col="12 - number">
<CInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
</CCol>
<CCol :col="number">
<CInput class="mb-0" :placeholder="`.col-md-${number}`"/>
</CCol>
</CRow>
</CCardBody>
<CCardFooter>
<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>
<CCol md="6">
<CCard>
<CCardHeader>
Input Grid for small devices! <small> <code>.col-*</code></small>
</CCardHeader>
<CCardBody>
<CRow
class="form-group"
v-for="(number, key) in [4,5,6,7,8]"
:key="key"
>
<CCol :col="number">
<CInput class="mb-0" :placeholder="`.col-${number}`"/>
</CCol>
<CCol :col="12 - number">
<CInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
</CCol>
</CRow>
</CCardBody>
<CCardFooter>
<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>
</CRow>
<CRow>
<CCol sm="4">
<CCard>
<CCardHeader>
Example Form
</CCardHeader>
<CCardBody>
<CForm>
<CInput prepend="Username">
<template #append-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
type="email"
autocomplete="email"
prepend="Email"
>
<template #append-content><CIcon name="cil-envelope-closed"/></template>
</CInput>
<CInput
type="password"
autocomplete="current-password"
prepend="Password"
>
<template #append-content><CIcon name="cil-shield-alt"/></template>
</CInput>
<div class="form-group form-actions">
<CButton type="submit" size="sm" color="primary">
Submit
</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
<CCol sm="4">
<CCard>
<CCardHeader>
Example Form
</CCardHeader>
<CCardBody>
<CForm>
<CInput placeholder="Username">
<template #append-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
placeholder="Email"
type="email"
autocomplete="email"
>
<template #append-content><CIcon name="cil-envelope-closed"/></template>
</CInput>
<CInput
placeholder="Password"
type="password"
autocomplete="current-password"
>
<template #append-content><CIcon name="cil-shield-alt"/></template>
</CInput>
<div class="form-group form-actions">
<CButton type="submit" class="btn btn-sm btn-secondary">
Submit
</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
<CCol sm="4">
<CCard>
<CCardHeader>
Example Form
</CCardHeader>
<CCardBody>
<CForm>
<CInput placeholder="Username">
<template #prepend-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
placeholder="Email"
type="email"
autocomplete="email"
>
<template #prepend-content><CIcon name="cil-envelope-closed"/></template>
</CInput>
<CInput
placeholder="Password"
type="password"
autocomplete="current-password"
>
<template #prepend-content><CIcon name="cil-shield-alt"/></template>
</CInput>
<div class="form-group form-actions">
<CButton type="submit" size="sm" color="success">
Submit
</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol lg="12">
<transition name="fade">
<CCard v-if="show">
<CCardHeader>
<CIcon name="cil-pencil"/> Form Elements
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
<CIcon name="cil-settings"/>
</CLink>
<CLink
class="card-header-action btn-minimize"
@click="formCollapsed=!formCollapsed"
>
<CIcon :name="`cil-chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
</CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
<CIcon name="cil-x-circle"/>
</CLink>
</div>
</CCardHeader>
<CCollapse :show="formCollapsed">
<CCardBody>
<CInput
label="Prepended text"
description="Here's some help text"
type="email"
autocomplete="email"
prepend="@"
/>
<CInput
label="Appended text"
append=".00"
description="Here's some help text"
/>
<CInput
label="Appended and prepended text"
append=".00"
description="Here's some help text"
prepend="$"
/>
<CInput
label="Append with button"
description="Here's some help text"
>
<template #append>
<CButton color="primary">Go!</CButton>
</template>
</CInput>
<CInput label="Two-buttons append">
<template #append>
<CButton color="primary">Search</CButton>
<CButton color="danger">Options</CButton>
</template>
</CInput>
<div class="form-actions">
<CButton type="submit" color="primary">Save changes</CButton>
<CButton color="secondary">Cancel</CButton>
</div>
</CCardBody>
</CCollapse>
</CCard>
</transition>
</CCol>
</CRow>
</div>
</template>
<script>
export default {
name: 'Forms',
data () {
return {
selected: [], // Must be an array reference!
show: true,
horizontal: { label:'col-3', input:'col-9' },
options: ['Option 1', 'Option 2', 'Option 3'],
selectOptions: [
'Option 1', 'Option 2', 'Option 3',
{
value: 'some value',
label: 'Selected option'
}
],
selectedOption: 'some value',
formCollapsed: true,
checkboxNames: ['Checkboxes', 'Inline Checkboxes',
'Checkboxes - custom', 'Inline Checkboxes - custom'],
radioNames: ['Radios', 'Inline Radios',
'Radios - custom', 'Inline Radios - custom']
}
},
methods: {
validator (val) {
return val ? val.length >= 4 : false
}
}
}
</script>
src/views/base/Jumbotrons.vue
-90
View File
@@ -1,90 +0,0 @@
<template>
<div>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/jumbotron"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CJumbotron>
<h1 class="display-3">Bootstrap 4</h1>
<p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
<p>For more information visit website</p>
<CButton color="primary" href="#">More Info</CButton>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
<CCol>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
<small>with slots</small>
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="">
<h1 class="display-3">Bootstrap 4</h1>
<p 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>
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
<small>colors</small>
</CCardHeader>
<CCardBody>
<CJumbotron
color="info"
text-color="white"
border-color="dark"
>
<h1 class="display-3">Bootstrap 4</h1>
<p 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'
}
</script>
src/views/base/ListGroups.vue
-241
View File
@@ -1,241 +0,0 @@
<template>
<div>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<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>
<CListGroupItemDivider/>
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<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>
<CIcon name="cil-justify-center"/>
<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>
<CIcon name="cil-justify-center"/>
<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" shape="pill">14</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Dapibus ac facilisis in
<CBadge color="primary" shape="pill">2</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Morbi leo risus
<CBadge color="primary" shape="pill">1</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<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>
<CIcon name="cil-justify-center"/>
<strong> List group </strong>
<small>colors active accent</small>
</CCardHeader>
<CCardBody>
<CListGroup accent>
<CListGroupItem href="#" accent="light">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" color="primary" accent="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" color="secondary" accent="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" color="success" accent="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" color="danger" accent="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" color="warning" accent="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" color="info" accent="info">This is a info list group item</CListGroupItem>
<CListGroupItem href="#" color="light" accent="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" color="dark" accent="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> List group </strong>
<small>inside cards</small>
</CCardHeader>
<CCardBody>
<CCardGroup deck>
<CCard>
<CCardHeader>
<b>Card with list group</b>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<CCardText class="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.
</CCardText>
</CCardBody>
</CCard>
<CCard>
<CCardHeader><b>Card with flush list group</b></CCardHeader>
<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>
<CIcon name="cil-justify-center"/><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: 'ListGroups'
}
</script>
src/views/base/Navbars.vue
-179
View File
@@ -1,179 +0,0 @@
<template>
<div>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navbar </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/navbar"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<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="ml-auto">
<CForm inline class="align-middle">
<CInput
class="mr-2 my-0"
placeholder="Search"
size="sm"
/>
<CButton color="light" size="sm">
Search
</CButton>
</CForm>
<CDropdown
toggler-text="Lang"
in-nav
>
<CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown
in-nav
toggler-text="User"
>
<CDropdownItem>Profile</CDropdownItem>
<CDropdownItem>Signout</CDropdownItem>
</CDropdown>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/> <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>
<CIcon name="cil-justify-center"/> <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>
<CNavbarText>Navbar text</CNavbarText>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/> <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"
in-nav
>
<CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown
toggler-text="User"
in-nav
>
<CDropdownItem>Account</CDropdownItem>
<CDropdownItem>Settings</CDropdownItem>
</CDropdown>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/> <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>
<CIcon name="cil-justify-center"/> <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>
export default {
name: 'Navbars',
data () {
return {
show: false,
navbarText: false,
navbarDropdown: false
}
}
}
</script>
src/views/base/Navs.vue
-164
View File
@@ -1,164 +0,0 @@
<template>
<div>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/><strong> Bootstrap Navs</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/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>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader>
<CCardBody>
<CNav variant="pills">
<CNavItem active>
<CIcon name="cil-basket"/>
</CNavItem>
<CNavItem>
<CIcon name="cil-settings"/>
</CNavItem>
<CNavItem>
<CIcon name="cil-bell"/>
</CNavItem>
<CNavItem disabled>
<CIcon name="cil-envelope-closed"/>
</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader>
<CCardBody>
<CNav variant="tabs">
<CNavItem active>
Active
</CNavItem>
<CNavItem>
Link
</CNavItem>
<CNavItem>
Another Link
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader @click="item++">
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader>
<CCardBody>
<CNav variant="pills">
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader>
<CCardBody>
<CNav fill variant="tabs">
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader>
<CCardBody>
<CNav justified variant="tabs">
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
<CCardBody>
<CNav variant="pills">
<CNavItem>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CDropdown
in-nav
placement="bottom-end"
button-content="Dropdown"
>
<CDropdownItem>one</CDropdownItem>
<CDropdownItem>two</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem>three</CDropdownItem>
</CDropdown>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>vertical variation</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="12" class="m-0">
<CNav vertical="lg" 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'
}
</script>
src/views/base/Paginations.vue
-92
View File
@@ -1,92 +0,0 @@
<template>
<div>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Pagination </strong>
<small>size</small>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/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"
/>
<br>
<h6>Small</h6>
<CPagination
size="sm"
:active-page.sync="currentPage"
:pages="10"/>
<br>
<div class="d-md-down-none">
<h6>Large</h6>
<CPagination
size="lg"
:active-page.sync="currentPage"
:pages="10"
/>
<br>
</div>
<div>currentPage: {{currentPage}}</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Pagination </strong>
<small>alignment</small>
</CCardHeader>
<CCardBody>
<h6>Left alignment (default)</h6>
<CPagination
: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>
</template>
<script>
export default {
name: 'Paginations',
data () {
return {
currentPage: 3
}
}
}
</script>
src/views/base/Popovers.vue
-95
View File
@@ -1,95 +0,0 @@
<template>
<div>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Popovers</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/directives/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
color="primary"
v-c-popover="{
header: 'Popover header',
content: 'I am popover content!'
}"
>
Click Me
</CButton>
</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>
<CIcon name="cil-justify-center"/>
<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',
data () {
return {
placements: [
'top-start', 'top', 'top-end',
'bottom-start', 'bottom', 'bottom-end',
'right-start', 'right', 'right-end',
'left-start', 'left', 'left-end'
]
}
}
}
</script>
src/views/base/ProgressBars.vue
-252
View File
@@ -1,252 +0,0 @@
<template>
<div>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Progress</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/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="gradient-success"/>
<CProgressBar :value="counter*(2.5/10)" color="gradient-warning"/>
<CProgressBar :value="counter*(1.5/10)" color="gradient-danger"/>
</CProgress>
<CButton
@click="clicked"
color="secondary"
class="mt-4"
>
Click me to animate progress bars
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/> <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>
<CIcon name="cil-justify-center"/>
<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>
<CIcon name="cil-justify-center"/>
<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 size="xs" :value="value3" show-percentage class="mb-2"/>
<CProgress size="sm" :value="value3" show-percentage class="mb-2"/>
<CProgress style="height:2rem" :value="value3" show-percentage class="mb-2"/>
<CProgress style="height:20px" :value="value3" show-percentage class="mb-2"/>
<CProgress style="height:2px" :value="value3"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<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>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<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>
<CIcon name="cil-justify-center"/>
<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>
<CIcon name="cil-justify-center"/>
<strong> Progress </strong>
<small>multiple bars</small>
</CCardHeader>
<CCardBody>
<CProgress :max="max3" class="mb-3">
<CProgressBar color="gradient-primary" :value="values[0]"/>
<CProgressBar color="gradient-success" :value="values[1]"/>
<CProgressBar color="gradient-info" :value="values[2]"/>
</CProgress>
<CProgress show-percentage :max="max3" class="mb-3">
<CProgressBar color="gradient-primary" :value="values[0]"/>
<CProgressBar color="gradient-success" :value="values[1]"/>
<CProgressBar color="gradient-info" :value="values[2]"/>
</CProgress>
<CProgress show-value striped :max="max3" class="mb-3">
<CProgressBar color="gradient-primary" :value="values[0]"/>
<CProgressBar color="gradient-success" :value="values[1]"/>
<CProgressBar color="gradient-info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="mb-3">
<CProgressBar color="gradient-primary" :value="values[0]" show-percentage/>
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
<CProgressBar color="gradient-info" :value="values[2]" striped show-percentage/>
</CProgress>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'ProgressBars',
data () {
return {
counter: 73,
max: 100,
max2: 50,
value: 33.333333333,
value3: 75,
bars: [
{color: 'gradient-success', value: 75},
{color: 'gradient-info', value: 75},
{color: 'gradient-warning', value: 75},
{color: 'gradient-danger', value: 75},
{color: 'gradient-primary', value: 75},
{color: 'gradient-secondary', value: 75},
{color: 'gradient-dark', value: 75}
],
timer: null,
striped: true,
animate: true,
max3: 100,
values: [ 15, 30, 20 ]
}
},
methods: {
clicked () {
this.counter = Math.random() * this.max
}
},
mounted () {
this.timer = setInterval(() => {
this.bars.forEach(bar => {
bar.value = 25 + (Math.random() * 75)
})
}, 2000)
},
beforeDestroy () {
clearInterval(this.timer)
this.timer = null
}
}
</script>
src/views/base/Switches.vue
-396
View File
@@ -1,396 +0,0 @@
<template>
<div>
<CRow>
<CCol xs="12" md="6">
<CCard v-if="true">
<CCardHeader>
Radio switches
<CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/switch"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CSwitch
v-for="(color, key) in colors"
:key="'radio' + key"
class="mx-1"
:color="color"
variant="3d"
v-bind="labelIcon"
type="radio"
name="radio"
:checked="key === 2"
@update:checked="(val) => val ? radio = color : null"
:value="color"
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch default
<CBadge color="primary">{{checker}}</CBadge>
</CCardHeader>
<CCardBody>
<CSwitch
class="mx-1"
color="primary"
name="switch1"
:checked.sync="checker"
/>
<CSwitch
class="mx-1"
:color="color"
checked
:key="key"
v-for="(color, key) in ['secondary', 'success','warning','info','danger','light','dark']"
/>
<CSwitch class="mx-1" color="primary" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch pills
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
3d Switch
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked variant="3d" />
<CSwitch class="mx-1" color="secondary" checked variant="3d" />
<CSwitch class="mx-1" color="success" checked variant="3d" />
<CSwitch class="mx-1" color="warning" checked variant="3d" />
<CSwitch class="mx-1" color="info" checked variant="3d" />
<CSwitch class="mx-1" color="danger" checked variant="3d" />
<CSwitch class="mx-1" color="light" checked variant="3d" />
<CSwitch class="mx-1" color="dark" checked variant="3d" />
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
3d Switch <small><code>disabled</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
<CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
<CSwitch class="mx-1" color="success" checked variant="3d" disabled />
<CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
<CSwitch class="mx-1" color="info" checked variant="3d" disabled />
<CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
<CSwitch class="mx-1" color="light" checked variant="3d" disabled />
<CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
3d Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>variant="outline"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked variant="outline" />
<CSwitch class="mx-1" color="secondary" checked variant="outline" />
<CSwitch class="mx-1" color="success" checked variant="outline" />
<CSwitch class="mx-1" color="warning" checked variant="outline" />
<CSwitch class="mx-1" color="info" checked variant="outline" />
<CSwitch class="mx-1" color="danger" checked variant="outline" />
<CSwitch class="mx-1" color="light" checked variant="outline" />
<CSwitch class="mx-1" color="dark" checked variant="outline" />
<CSwitch class="mx-1" color="primary" variant="outline" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>variant="outline" shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>variant="opposite"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked variant="opposite" />
<CSwitch class="mx-1" color="secondary" checked variant="opposite" />
<CSwitch class="mx-1" color="success" checked variant="opposite" />
<CSwitch class="mx-1" color="warning" checked variant="opposite" />
<CSwitch class="mx-1" color="info" checked variant="opposite" />
<CSwitch class="mx-1" color="danger" checked variant="opposite" />
<CSwitch class="mx-1" color="light" checked variant="opposite" />
<CSwitch class="mx-1" color="dark" checked variant="opposite" />
<CSwitch class="mx-1" color="primary" variant="opposite" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>variant="opposite" shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label variant="outline"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label variant="outline"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label variant="opposite"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label variant="opposite"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<CCard>
<CCardHeader>
Sizes
</CCardHeader>
<CCardBody class="p-0">
<CDataTable
hover
striped
class="table-align-middle mb-0"
:items="items"
:fields="fields"
no-sorting
>
<template #example="{item}">
<td>
<CSwitch
:variant="item.example.variant"
:color="item.example.color"
:size="item.example.size"
:checked="item.example.checked"
/>
</td>
</template>
<template #size_prop="{item}">
<td>
<span v-html="item.size_prop"></span>
</td>
</template>
</CDataTable>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</template>
<script>
export default {
name: 'Switches',
data () {
return {
colors: [
'primary','secondary','warning','success','info','danger','light','dark'
],
fields: [
{ key: 'size' },
{ key: 'example' },
{ key: 'size_prop', label: 'Size prop' }
],
items: [
{
size: 'Large',
example: { variant: '3d', color: 'primary', size: 'lg', checked: true },
size_prop: 'Add following prop <code>size="lg"</code>'
},
{
size: 'Normal',
example: { variant: '3d', color: 'primary', size: '', checked: true },
size_prop: '-'
},
{
size: 'Small',
example: { variant: '3d', color: 'primary', size: 'sm', checked: true},
size_prop: 'Add following prop <code>size="sm"</code>'
}
],
checker: true,
radio: 'warning',
labelIcon: {
labelOn: '\u2713',
labelOff: '\u2715'
},
labelTxt: {
labelOn: 'yes',
labelOff: 'no'
}
}
}
}
</script>
src/views/base/Table.vue
-62
View File
@@ -1,62 +0,0 @@
<template>
<CCard>
<CCardHeader>
<slot name="header">
<CIcon name="cil-grid"/> {{caption}}
</slot>
</CCardHeader>
<CCardBody>
<CDataTable
:hover="hover"
:striped="striped"
:border="border"
:small="small"
:fixed="fixed"
:items="items"
:fields="fields"
:items-per-page="small ? 10 : 5"
:dark="dark"
pagination
>
<template #status="{item}">
<td>
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
</td>
</template>
</CDataTable>
</CCardBody>
</CCard>
</template>
<script>
export default {
name: 'Table',
props: {
items: Array,
fields: {
type: Array,
default () {
return ['username', 'registered', 'role', 'status']
}
},
caption: {
type: String,
default: 'Table'
},
hover: Boolean,
striped: Boolean,
border: Boolean,
small: Boolean,
fixed: Boolean,
dark: Boolean
},
methods: {
getBadge (status) {
return status === 'Active' ? 'success'
: status === 'Inactive' ? 'secondary'
: status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary'
}
}
}
</script>
src/views/base/Tables.vue
-104
View File
@@ -1,104 +0,0 @@
<template>
<div>
<CRow>
<CCol lg="6">
<CTableWrapper :items="getShuffledUsersData()">
<template #header>
<CIcon name="cil-grid"/> Simple Table
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/nav"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</template>
</CTableWrapper>
</CCol>
<CCol lg="6">
<CTableWrapper
:items="getShuffledUsersData()"
striped
caption="Striped Table"
/>
</CCol>
</CRow>
<CRow>
<CCol lg="6">
<CTableWrapper
:items="getShuffledUsersData()"
small
caption="Condensed Table"
/>
</CCol>
<CCol lg="6">
<CTableWrapper
:items="getShuffledUsersData()"
fixed
border
caption="Bordered Table"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="12">
<CTableWrapper
:items="getShuffledUsersData()"
hover
striped
border
small
fixed
caption="Combined All Table"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="12">
<CTableWrapper
:items="getShuffledUsersData()"
hover
striped
border
small
fixed
dark
caption="Combined All dark Table"
/>
</CCol>
</CRow>
</div>
</template>
<script>
import CTableWrapper from './Table.vue'
import usersData from '../users/UsersData'
export default {
name: 'Tables',
components: { CTableWrapper },
methods: {
shuffleArray (array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1))
let temp = array[i]
array[i] = array[j]
array[j] = temp
}
return array
},
getShuffledUsersData () {
return this.shuffleArray(usersData.slice(0))
}
}
}
</script>
src/views/base/Tabs.vue
-219
View File
@@ -1,219 +0,0 @@
<template>
<div>
<CRow>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader>
Tabs
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/tabs"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CTabs>
<CTab title="Home" active>
1. 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
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="Profile" active>
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
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="Disabled" disabled>
3. 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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader>
Tabs
</CCardHeader>
<CCardBody>
<CTabs variant="pills">
<CTab title="Home" active>
1. 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
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="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
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="Disabled" disabled>
3. 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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader>
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs :active-tab.sync="activeTab">
<CTab active>
<template slot="title">
<CIcon name="cil-calculator"/>
</template>
1. 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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab>
<template slot="title">
<CIcon name="cil-basket"/>
</template>
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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab>
<template slot="title">
<CIcon name="cil-chart-pie"/>
</template>
3. 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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader>
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs add-tab-classes="mt-1">
<CTab>
<template slot="title">
<CIcon name="cil-calculator"/> {{tabs[0]}}
</template>
1. 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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab active>
<template slot="title">
<CIcon name="cil-basket"/> {{tabs[1]}}
</template>
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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab>
<template slot="title">
<CIcon name="cil-chart-pie"/> {{tabs[2]}}
</template>
3. 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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader>
Tabs vertical
</CCardHeader>
<CCardBody>
<CTabs variant="pills" vertical>
<CTab active>
<template slot="title">
<CIcon name="cil-calculator"/> {{tabs[0]}}
</template>
1. 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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab>
<template slot="title">
<CIcon name="cil-basket"/> {{tabs[1]}}
</template>
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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab>
<template slot="title">
<CIcon name="cil-chart-pie"/> {{tabs[2]}}
</template>
3. 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
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</template>
<script>
export default {
name: 'Tabs',
data () {
return {
tabs: [
'Calculator',
'Shopping cart',
'Charts'
],
activeTab: 1
}
}
}
</script>
src/views/base/Tooltips.vue
-90
View File
@@ -1,90 +0,0 @@
<template>
<div>
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/directives/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>
<CIcon name="cil-justify-center"/>
<strong> Tooltips </strong>
<small>placement</small>
</CCardHeader>
<CCardBody>
<div class="my-3">
<CRow>
<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>
</div>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'Tooltips',
data () {
return {
placements: [
'top-start', 'top', 'top-end',
'bottom-start', 'bottom', 'bottom-end',
'right-start', 'right', 'right-end',
'left-start', 'left', 'left-end'
]
}
}
}
</script>
src/views/buttons/BrandButtons.vue
-240
View File
@@ -1,240 +0,0 @@
<template>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/button-components"
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"
class="btn-brand"
>
<CIcon size="sm" :name="'cib-' + 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"
class="btn-brand"
>
<CIcon :name="'cib-' + 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"
class="btn-brand"
>
<CIcon size="lg" :name="'cib-' + 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="'cib-' + 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="'cib-' + 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="'cib-' + 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>
{{ $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
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
: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
size="lg"
:key="key"
:color="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'BrandButtons',
usage: '<CButton color="facebook"><CIcon name="cib-facebook"/><span>Facebook</span></CButton>',
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
textOnlyUsage: '<CButton color="facebook"><span>Facebook</span></CButton>',
brands: [
'facebook',
'twitter',
'linkedin',
'flickr',
'tumblr',
'xing',
'github',
'stackoverflow',
'youtube',
'dribbble',
'instagram',
'pinterest',
'vk',
'yahoo',
'behance',
'reddit',
'vimeo'
]
// labels: {
// facebook: 'Facebook',
// twitter: 'Twitter',
// linkedin: 'LinkedIn',
// flickr: 'Flickr',
// tumblr: 'Tumblr',
// xing: 'Xing',
// github: 'Github',
// stackoverflow: 'StackOverflow',
// youtube: 'YouTube',
// dribbble: 'Dribbble',
// instagram: 'Instagram',
// pinterest: 'Pinterest',
// vk: 'VK',
// yahoo: 'Yahoo',
// behance: 'Behance',
// reddit: 'Reddit',
// vimeo: 'Vimeo'
// }
}
</script>
<style scoped lang="scss">
.btn {
margin-bottom: 4px;
margin-right: 6px;
}
// todo
.btn-brand:not(:only-child) {
.c-icon {
margin-top: 0 !important;
margin-right: 8px;
}
.c-icon-sm {
margin-right: 5px;
}
.c-icon-lg {
margin-right: 12px;
}
}
</style>
src/views/buttons/ButtonGroups.vue
-198
View File
@@ -1,198 +0,0 @@
<template>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap button group</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/button-components"
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>
<CIcon name="cil-justify-center"/>
<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>
<CIcon name="cil-justify-center"/><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/>
<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/>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<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>
<CIcon name="cil-justify-center"/>
<strong> Button toolbar </strong>
<small>with button groups</small>
</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"
append=".00"
value="100"
prepend="$"
/>
<CSelect
class="mb-0 w-25 mx-1"
size="sm"
value="Medium"
:options="['Large','Medium','Small']"
custom
prepend="Size"
/>
<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: 'ButtonGroups',
}
</script>
src/views/buttons/Dropdowns.vue
-363
View File
@@ -1,363 +0,0 @@
<template>
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Dropdown</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/dropdown"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
toggler-text="Dropdown Button"
class="m-2"
color="secondary"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<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/>
<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>
<CIcon name="cil-justify-center"/>
<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
placement="bottom-end"
toggler-text="Right align"
color="primary"
class="m-2 d-inline-block"
>
<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="[10, 5]"
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>
<CIcon name="cil-justify-center"/>
<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>
<CIcon name="cil-justify-center"/>
<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
color="secondary"
size="lg"
split
toggler-text="Large Split"
class="m-2"
>
<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"
split toggler-text="Small Split"
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>
<CIcon name="cil-justify-center"/>
<strong> Dropdown </strong>
<small>headers and accessibility</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
toggler-text="Dropdown ARIA" color="primary"
class="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/>
<CDropdownItem>
Something <strong>not</strong> associated with user
</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<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>
<script>
export default {
name: 'Dropdowns'
}
</script>
src/views/buttons/StandardButtons.vue
-704
View File
@@ -1,704 +0,0 @@
<template>
<div>
<CCard>
<CCardHeader>
<strong>Standard buttons</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/button-components"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="link">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="link" aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="link" disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<strong>Outline Buttons</strong>
</CCardHeader>
<CCardBody>
<p>
Use <code>variant="outline"</code> prop
</p>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline" color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline" color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline" color="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline" color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline" color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline" color="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline" color="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline" color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline" color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<strong>Ghost Buttons</strong>
</CCardHeader>
<CCardBody>
<p>
Use
<code>variant="ghost"</code> prop for ghost buttons.
</p>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="ghost" color="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="ghost" color="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="ghost" color="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="ghost" color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<strong>Square Buttons</strong>
</CCardHeader>
<CCardBody>
<p>
Use
<code>square</code> prop for square buttons.
</p>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="primary" square>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="secondary" square>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="success" square>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="warning" square>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="danger" square>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="info" square>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="light" square>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="dark" square>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="link" square>Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="primary" square aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="secondary" square aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="success" square aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="warning" square aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="danger" square aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="info" square aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="light" square aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="dark" square aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="link" square aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="primary" square disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="secondary" square disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="success" square disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="warning" square disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="danger" square disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="info" square disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="light" square disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="dark" square disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="link" square disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<strong>Pill Buttons</strong>
</CCardHeader>
<CCardBody>
<p>
Use
<code>pill</code> prop for pill buttons.
</p>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="primary" shape="pill">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="secondary" shape="pill">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="success" shape="pill">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="warning" shape="pill">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="danger" shape="pill">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="info" shape="pill">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="light" shape="pill">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="dark" shape="pill">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="link" shape="pill">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="link" shape="pill" aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="primary" shape="pill" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="success" shape="pill" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="warning" shape="pill" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="danger" shape="pill" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="info" shape="pill" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="light" shape="pill" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="dark" shape="pill" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="link" shape="pill" disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<strong>Sizes</strong>
</CCardHeader>
<CCardBody>
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
<CRow class="align-items-center">
<CCol col="2" xl class="mb-3 mb-xl-0">
Small
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="primary" size="sm">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="warning" size="sm" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="2" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="primary">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="outline" color="secondary">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="ghost" color="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="warning" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="danger" shape="pill">Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="2" xl class="mb-3 mb-xl-0">
Large
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="primary" size="lg">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="warning" size="lg" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<strong>With Icons</strong>
</CCardHeader>
<CCardBody>
<CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3">
<CButton color="primary">
<CIcon name="cil-lightbulb"/>&nbsp;Standard Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="secondary" variant="outline">
<CIcon name="cil-lightbulb"/>&nbsp;Outline Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="success">
<CIcon name="cil-lightbulb"/>&nbsp;Ghost Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="warning" square>
<CIcon name="cil-lightbulb"/>&nbsp;Square Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="danger" shape="pill">
<CIcon name="cil-lightbulb"/>&nbsp;Pill Button
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<strong>Toggle pressed state</strong>
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CRow>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<CButton size="lg" color="secondary" block>Block level button</CButton>
<CButton size="lg" color="primary" block>Block level button</CButton>
<CButton size="lg" color="success" block>Block level button</CButton>
<CButton size="lg" color="info" block>Block level button</CButton>
<CButton size="lg" color="warning" block>Block level button</CButton>
<CButton size="lg" color="danger" block>Block level button</CButton>
<CButton size="lg" color="link" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
<CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
<CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
<CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
<CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
<CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
<CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</template>
<script>
export default {
name: 'StandardButtons',
data () {
return { togglePress: false }
}
}
</script>
src/views/charts/CChartBarExample.vue
-26
View File
@@ -1,26 +0,0 @@
<template>
<CChartBar
:datasets="defaultDatasets"
labels="months"
/>
</template>
<script>
import { CChartBar } from '@coreui/vue-chartjs'
export default {
name: 'CChartBarExample',
components: { CChartBar },
computed: {
defaultDatasets () {
return [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
}
}
}
</script>
src/views/charts/CChartBarSimple.vue
-70
View File
@@ -1,70 +0,0 @@
<template>
<CChartBar
:datasets="computedDatasets"
:options="computedOptions"
:labels="labels"
/>
</template>
<script>
import { CChartBar } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartBarSimple',
components: { CChartBar },
props: {
...CChartBar.props,
backgroundColor: {
type: String,
default: 'rgba(0,0,0,.2)'
},
pointHoverBackgroundColor: String,
dataPoints: {
type: Array,
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
label: {
type: String,
default: 'Sales'
},
pointed: Boolean
},
computed: {
defaultDatasets () {
return [
{
data: this.dataPoints,
backgroundColor: getColor(this.backgroundColor),
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
label: this.label,
barPercentage: 0.5,
categoryPercentage: 1
}
]
},
defaultOptions () {
return {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
}
}
},
computedDatasets () {
return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
},
computedOptions () {
return deepObjectsMerge(this.defaultOptions, this.options || {})
}
}
}
</script>
src/views/charts/CChartDoughnutExample.vue
-30
View File
@@ -1,30 +0,0 @@
<template>
<CChartDoughnut
:datasets="defaultDatasets"
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
/>
</template>
<script>
import { CChartDoughnut } from '@coreui/vue-chartjs'
export default {
name: 'CChartDoughnutExample',
components: { CChartDoughnut },
computed: {
defaultDatasets () {
return [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
}
}
}
</script>
src/views/charts/CChartLineExample.vue
-31
View File
@@ -1,31 +0,0 @@
<template>
<CChartLine
:datasets="defaultDatasets"
labels="months"
/>
</template>
<script>
import { CChartLine } from '@coreui/vue-chartjs'
export default {
name: 'CChartLineExample',
components: { CChartLine },
computed: {
defaultDatasets () {
return [
{
label: 'Data One',
backgroundColor: 'rgb(228,102,81,0.9)',
data: [30, 39, 10, 50, 30, 70, 35]
},
{
label: 'Data Two',
backgroundColor: 'rgb(0,216,255,0.9)',
data: [39, 80, 40, 35, 40, 20, 45]
}
]
}
}
}
</script>
src/views/charts/CChartLineSimple.vue
-136
View File
@@ -1,136 +0,0 @@
<template>
<CChartLine
:datasets="computedDatasets"
:options="computedOptions"
:labels="labels"
/>
</template>
<script>
import { CChartLine } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartLineSimple',
components: { CChartLine },
props: {
...CChartLine.props,
borderColor: {
type: String,
default: 'rgba(255,255,255,.55)'
},
backgroundColor: {
type: String,
default: 'transparent'
},
dataPoints: {
type: Array,
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
label: {
type: String,
default: 'Sales'
},
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 [
{
data: this.dataPoints,
borderColor: getColor(this.borderColor),
backgroundColor: getColor(this.backgroundColor),
pointBackgroundColor: getColor(this.pointHoverColor),
pointHoverBackgroundColor: getColor(this.pointHoverColor),
label: this.label
}
]
},
pointedOptions () {
return {
scales: {
xAxes: [
{
offset: true,
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
},
ticks: {
fontSize: 2,
fontColor: 'transparent'
}
}
],
yAxes: [
{
display: false,
ticks: {
display: false,
min: Math.min.apply(Math, this.dataPoints) - 5,
max: Math.max.apply(Math, this.dataPoints) + 5
}
}
]
},
elements: {
line: {
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4
}
}
}
},
straightOptions () {
return {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4
}
}
}
},
defaultOptions () {
const options = this.pointed ? this.pointedOptions : this.straightOptions
return Object.assign({}, options, {
maintainAspectRatio: false,
legend: {
display: false
}
})
},
computedDatasets () {
return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
},
computedOptions () {
return deepObjectsMerge(this.defaultOptions, this.options || {})
}
}
}
</script>

Some files were not shown because too many files have changed in this diff Show More