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

chore: 3.0.0-beta.0 release: update dependencies

Browse Source
This commit is contained in:
woothu
2019-11-19 17:40:48 +01:00
parent c4a941d714
commit f020186152
101 changed files with 19230 additions and 26476 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+367 -102
View File
@@ -1,6 +1,6 @@
{ {
"name": "@coreui/coreui-free-vue-admin-template", "name": "@coreui/coreui-free-vue-admin-template",
"version": "3.0.0-alpha.6", "version": "3.0.0-beta.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@@ -14,25 +14,122 @@
} }
}, },
"@babel/core": { "@babel/core": {
"version": "7.6.4", "version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.6.4.tgz", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.7.2.tgz",
"integrity": "sha512-Rm0HGw101GY8FTzpWSyRbki/jzq+/PkNQJ+nSulrdY6gFGOsNseCqD6KHRYe2E+EdzuBdr2pxCp6s4Uk6eJ+XQ==", "integrity": "sha512-eeD7VEZKfhK1KUXGiyPFettgF3m513f8FoBSWiQ1xTvl1RAopLs42Wp9+Ze911I6H0N9lNqJMDgoZT7gHsipeQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/code-frame": "^7.5.5", "@babel/code-frame": "^7.5.5",
"@babel/generator": "^7.6.4", "@babel/generator": "^7.7.2",
"@babel/helpers": "^7.6.2", "@babel/helpers": "^7.7.0",
"@babel/parser": "^7.6.4", "@babel/parser": "^7.7.2",
"@babel/template": "^7.6.0", "@babel/template": "^7.7.0",
"@babel/traverse": "^7.6.3", "@babel/traverse": "^7.7.2",
"@babel/types": "^7.6.3", "@babel/types": "^7.7.2",
"convert-source-map": "^1.1.0", "convert-source-map": "^1.7.0",
"debug": "^4.1.0", "debug": "^4.1.0",
"json5": "^2.1.0", "json5": "^2.1.0",
"lodash": "^4.17.13", "lodash": "^4.17.13",
"resolve": "^1.3.2", "resolve": "^1.3.2",
"semver": "^5.4.1", "semver": "^5.4.1",
"source-map": "^0.5.0" "source-map": "^0.5.0"
},
"dependencies": {
"@babel/generator": {
"version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.2.tgz",
"integrity": "sha512-WthSArvAjYLz4TcbKOi88me+KmDJdKSlfwwN8CnUYn9jBkzhq0ZEPuBfkAWIvjJ3AdEV1Cf/+eSQTnp3IDJKlQ==",
"dev": true,
"requires": {
"@babel/types": "^7.7.2",
"jsesc": "^2.5.1",
"lodash": "^4.17.13",
"source-map": "^0.5.0"
}
},
"@babel/helper-function-name": {
"version": "7.7.0",
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.0.tgz",
"integrity": "sha512-tDsJgMUAP00Ugv8O2aGEua5I2apkaQO7lBGUq1ocwN3G23JE5Dcq0uh3GvFTChPa4b40AWiAsLvCZOA2rdnQ7Q==",
"dev": true,
"requires": {
"@babel/helper-get-function-arity": "^7.7.0",
"@babel/template": "^7.7.0",
"@babel/types": "^7.7.0"
}
},
"@babel/helper-get-function-arity": {
"version": "7.7.0",
"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.0.tgz",
"integrity": "sha512-tLdojOTz4vWcEnHWHCuPN5P85JLZWbm5Fx5ZsMEMPhF3Uoe3O7awrbM2nQ04bDOUToH/2tH/ezKEOR8zEYzqyw==",
"dev": true,
"requires": {
"@babel/types": "^7.7.0"
}
},
"@babel/helper-split-export-declaration": {
"version": "7.7.0",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.0.tgz",
"integrity": "sha512-HgYSI8rH08neWlAH3CcdkFg9qX9YsZysZI5GD8LjhQib/mM0jGOZOVkoUiiV2Hu978fRtjtsGsW6w0pKHUWtqA==",
"dev": true,
"requires": {
"@babel/types": "^7.7.0"
}
},
"@babel/parser": {
"version": "7.7.3",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.3.tgz",
"integrity": "sha512-bqv+iCo9i+uLVbI0ILzKkvMorqxouI+GbV13ivcARXn9NNEabi2IEz912IgNpT/60BNXac5dgcfjb94NjsF33A==",
"dev": true
},
"@babel/template": {
"version": "7.7.0",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.0.tgz",
"integrity": "sha512-OKcwSYOW1mhWbnTBgQY5lvg1Fxg+VyfQGjcBduZFljfc044J5iDlnDSfhQ867O17XHiSCxYHUxHg2b7ryitbUQ==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.0.0",
"@babel/parser": "^7.7.0",
"@babel/types": "^7.7.0"
}
},
"@babel/traverse": {
"version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.2.tgz",
"integrity": "sha512-TM01cXib2+rgIZrGJOLaHV/iZUAxf4A0dt5auY6KNZ+cm6aschuJGqKJM3ROTt3raPUdIDk9siAufIFEleRwtw==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.5.5",
"@babel/generator": "^7.7.2",
"@babel/helper-function-name": "^7.7.0",
"@babel/helper-split-export-declaration": "^7.7.0",
"@babel/parser": "^7.7.2",
"@babel/types": "^7.7.2",
"debug": "^4.1.0",
"globals": "^11.1.0",
"lodash": "^4.17.13"
}
},
"@babel/types": {
"version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.2.tgz",
"integrity": "sha512-YTf6PXoh3+eZgRCBzzP25Bugd2ngmpQVrk7kXX0i5N9BO7TFBtIgZYs7WtxtOGs8e6A4ZI7ECkbBCEHeXocvOA==",
"dev": true,
"requires": {
"esutils": "^2.0.2",
"lodash": "^4.17.13",
"to-fast-properties": "^2.0.0"
}
},
"convert-source-map": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
"integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
"dev": true,
"requires": {
"safe-buffer": "~5.1.1"
}
}
} }
}, },
"@babel/generator": { "@babel/generator": {
@@ -254,14 +351,102 @@
} }
}, },
"@babel/helpers": { "@babel/helpers": {
"version": "7.6.2", "version": "7.7.0",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.6.2.tgz", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.7.0.tgz",
"integrity": "sha512-3/bAUL8zZxYs1cdX2ilEE0WobqbCmKWr/889lf2SS0PpDcpEIY8pb1CCyz0pEcX3pEb+MCbks1jIokz2xLtGTA==", "integrity": "sha512-VnNwL4YOhbejHb7x/b5F39Zdg5vIQpUUNzJwx0ww1EcVRt41bbGRZWhAURrfY32T5zTT3qwNOQFWpn+P0i0a2g==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/template": "^7.6.0", "@babel/template": "^7.7.0",
"@babel/traverse": "^7.6.2", "@babel/traverse": "^7.7.0",
"@babel/types": "^7.6.0" "@babel/types": "^7.7.0"
},
"dependencies": {
"@babel/generator": {
"version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.2.tgz",
"integrity": "sha512-WthSArvAjYLz4TcbKOi88me+KmDJdKSlfwwN8CnUYn9jBkzhq0ZEPuBfkAWIvjJ3AdEV1Cf/+eSQTnp3IDJKlQ==",
"dev": true,
"requires": {
"@babel/types": "^7.7.2",
"jsesc": "^2.5.1",
"lodash": "^4.17.13",
"source-map": "^0.5.0"
}
},
"@babel/helper-function-name": {
"version": "7.7.0",
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.0.tgz",
"integrity": "sha512-tDsJgMUAP00Ugv8O2aGEua5I2apkaQO7lBGUq1ocwN3G23JE5Dcq0uh3GvFTChPa4b40AWiAsLvCZOA2rdnQ7Q==",
"dev": true,
"requires": {
"@babel/helper-get-function-arity": "^7.7.0",
"@babel/template": "^7.7.0",
"@babel/types": "^7.7.0"
}
},
"@babel/helper-get-function-arity": {
"version": "7.7.0",
"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.0.tgz",
"integrity": "sha512-tLdojOTz4vWcEnHWHCuPN5P85JLZWbm5Fx5ZsMEMPhF3Uoe3O7awrbM2nQ04bDOUToH/2tH/ezKEOR8zEYzqyw==",
"dev": true,
"requires": {
"@babel/types": "^7.7.0"
}
},
"@babel/helper-split-export-declaration": {
"version": "7.7.0",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.0.tgz",
"integrity": "sha512-HgYSI8rH08neWlAH3CcdkFg9qX9YsZysZI5GD8LjhQib/mM0jGOZOVkoUiiV2Hu978fRtjtsGsW6w0pKHUWtqA==",
"dev": true,
"requires": {
"@babel/types": "^7.7.0"
}
},
"@babel/parser": {
"version": "7.7.3",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.3.tgz",
"integrity": "sha512-bqv+iCo9i+uLVbI0ILzKkvMorqxouI+GbV13ivcARXn9NNEabi2IEz912IgNpT/60BNXac5dgcfjb94NjsF33A==",
"dev": true
},
"@babel/template": {
"version": "7.7.0",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.0.tgz",
"integrity": "sha512-OKcwSYOW1mhWbnTBgQY5lvg1Fxg+VyfQGjcBduZFljfc044J5iDlnDSfhQ867O17XHiSCxYHUxHg2b7ryitbUQ==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.0.0",
"@babel/parser": "^7.7.0",
"@babel/types": "^7.7.0"
}
},
"@babel/traverse": {
"version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.2.tgz",
"integrity": "sha512-TM01cXib2+rgIZrGJOLaHV/iZUAxf4A0dt5auY6KNZ+cm6aschuJGqKJM3ROTt3raPUdIDk9siAufIFEleRwtw==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.5.5",
"@babel/generator": "^7.7.2",
"@babel/helper-function-name": "^7.7.0",
"@babel/helper-split-export-declaration": "^7.7.0",
"@babel/parser": "^7.7.2",
"@babel/types": "^7.7.2",
"debug": "^4.1.0",
"globals": "^11.1.0",
"lodash": "^4.17.13"
}
},
"@babel/types": {
"version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.2.tgz",
"integrity": "sha512-YTf6PXoh3+eZgRCBzzP25Bugd2ngmpQVrk7kXX0i5N9BO7TFBtIgZYs7WtxtOGs8e6A4ZI7ECkbBCEHeXocvOA==",
"dev": true,
"requires": {
"esutils": "^2.0.2",
"lodash": "^4.17.13",
"to-fast-properties": "^2.0.0"
}
}
} }
}, },
"@babel/highlight": { "@babel/highlight": {
@@ -874,27 +1059,49 @@
} }
}, },
"@coreui/coreui": { "@coreui/coreui": {
"version": "3.0.0-beta.0", "version": "3.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-3.0.0-beta.0.tgz", "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-3.0.0-beta.3.tgz",
"integrity": "sha512-7qYuZyQ3H9soaXMtP+34YkqN7VveDJrPhb+FzfJ9OOk663vF47grvNjWSn1AqAv5JCU0mLHhH0+eu0chp+k6vA==" "integrity": "sha512-oZ6XRJEYvUuGB3lCPrDkIVXGComXC95rvhrEHROSfG+EduJz8VYTfJqtTGmnUqnKUR5FfzCKPJKJksLEM0aDrg=="
}, },
"@coreui/coreui-chartjs": { "@coreui/coreui-chartjs": {
"version": "github:coreui/coreui-chartjs#4bf74100097d797de9d136b7d718d10f2ce46220", "version": "2.0.0-beta.0",
"from": "github:coreui/coreui-chartjs#v2", "resolved": "https://registry.npmjs.org/@coreui/coreui-chartjs/-/coreui-chartjs-2.0.0-beta.0.tgz",
"integrity": "sha512-Svua1A5YQNPbxcTMN/1TLiie/HJvT+iJ8VB3zPcy/c+ihJvFlIf7D0I5JcRL6LvQkZydq2xQiZ9/73Q+Z5BV6Q==",
"requires": { "requires": {
"@coreui/coreui": "^3.0.0-beta.1",
"chart.js": "^2.8.0" "chart.js": "^2.8.0"
} }
}, },
"@coreui/coreui-vue-chartjs": {
"version": "1.0.0-alpha.2",
"resolved": "https://registry.npmjs.org/@coreui/coreui-vue-chartjs/-/coreui-vue-chartjs-1.0.0-alpha.2.tgz",
"integrity": "sha512-BMMb8biyQlyDO8LcunmMdjKI5fIDmpL0GTdtX2mT7beG6lGmfE1gVqWzOTDQpg7UY7rUr19ZQq53awxKssyUhA==",
"requires": {
"@coreui/coreui-chartjs": "2.0.0-beta.0",
"chart.js": "^2.9.2",
"vue": "^2.6.10"
}
},
"@coreui/icons": { "@coreui/icons": {
"version": "github:coreui/coreui-icons#d79c60ee18b4cf4fba0047a59be103705e674ed7", "version": "1.0.0-beta.3",
"from": "github:coreui/coreui-icons#v1-alpha" "resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-1.0.0-beta.3.tgz",
"integrity": "sha512-jaNQSIYPcrC2RxgUqdVGGh4aGz6GaJNODa3cqBw7HTP3AdHm8NyejrgmO/ILmY3J8JldVqdTMfUwegaTc0kQmA=="
},
"@coreui/icons-vue": {
"version": "github:coreui/coreui-icons-vue#01dd086fa9cd9f6a3ee3fa19c6a6b1920b544746",
"from": "github:coreui/coreui-icons-vue#1.0.0-alpha.1",
"requires": {
"vue": "^2.6.10"
}
}, },
"@coreui/vue": { "@coreui/vue": {
"version": "github:coreui/coreui-vue#bfa7a79909653af30c00ba34da1e4d3f744b4d35", "version": "3.0.0-beta.0",
"from": "github:coreui/coreui-vue#3.0.0-alpha.6", "resolved": "https://registry.npmjs.org/@coreui/vue/-/vue-3.0.0-beta.0.tgz",
"integrity": "sha512-G0L7IxTS/hYqNzCTUjyaVjkyEoku5/efbYF8sj/0R4MJyOJzxVY5vTovzIKD9+25RtCj+g3FAKxQGF0lZURn5w==",
"requires": { "requires": {
"@coreui/coreui": "3.0.0-beta.0", "@coreui/coreui": "3.0.0-beta.3",
"@coreui/icons": "github:coreui/coreui-icons#v1-alpha", "@coreui/icons": "github:coreui/coreui-icons#1.0.0-beta.1",
"@coreui/icons-vue": "github:coreui/coreui-icons-vue#1.0.0-alpha.1",
"clone": "^2.1.2", "clone": "^2.1.2",
"perfect-scrollbar": "^1.4.0", "perfect-scrollbar": "^1.4.0",
"popper.js": "^1.16.0", "popper.js": "^1.16.0",
@@ -904,6 +1111,10 @@
"vue-functional-data-merge": "^3.1.0" "vue-functional-data-merge": "^3.1.0"
}, },
"dependencies": { "dependencies": {
"@coreui/icons": {
"version": "github:coreui/coreui-icons#0f38dfed6b56e10791285792f0b9df06372a6661",
"from": "github:coreui/coreui-icons#1.0.0-beta.1"
},
"clone": { "clone": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@@ -3636,28 +3847,21 @@
"dev": true "dev": true
}, },
"chart.js": { "chart.js": {
"version": "2.8.0", "version": "2.9.3",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
"integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==", "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
"requires": { "requires": {
"chartjs-color": "^2.1.0", "chartjs-color": "^2.1.0",
"moment": "^2.10.2" "moment": "^2.10.2"
} }
}, },
"chartjs-color": { "chartjs-color": {
"version": "2.3.0", "version": "2.4.1",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz", "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
"integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==", "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
"requires": { "requires": {
"chartjs-color-string": "^0.6.0", "chartjs-color-string": "^0.6.0",
"color-convert": "^0.5.3" "color-convert": "^1.9.3"
},
"dependencies": {
"color-convert": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
"integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
}
} }
}, },
"chartjs-color-string": { "chartjs-color-string": {
@@ -3710,9 +3914,9 @@
} }
}, },
"chromedriver": { "chromedriver": {
"version": "77.0.0", "version": "78.0.1",
"resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-77.0.0.tgz", "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-78.0.1.tgz",
"integrity": "sha512-mZa1IVx4HD8rDaItWbnS470mmypgiWsDiu98r0NkiT4uLm3qrANl4vOU6no6vtWtLQiW5kt1POcIbjeNpsLbXA==", "integrity": "sha512-eOsyFk4xb9EECs1VMrDbxO713qN+Bu1XUE8K9AuePc3839TPdAegg72kpXSzkeNqRNZiHbnJUItIVCLFkDqceA==",
"dev": true, "dev": true,
"requires": { "requires": {
"del": "^4.1.1", "del": "^4.1.1",
@@ -3903,7 +4107,6 @@
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": { "requires": {
"color-name": "1.1.3" "color-name": "1.1.3"
} }
@@ -4240,9 +4443,9 @@
} }
}, },
"core-js": { "core-js": {
"version": "3.3.4", "version": "3.4.1",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.3.4.tgz", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.4.1.tgz",
"integrity": "sha512-BtibooaAmSOptGLRccsuX/dqgPtXwNgqcvYA6kOTTMzonRxZ+pJS4e+6mvVutESfXMeTnK8m3M+aBu3bkJbR+w==", "integrity": "sha512-KX/dnuY/J8FtEwbnrzmAjUYgLqtk+cxM86hfG60LGiW3MmltIc2yAmDgBgEkfm0blZhUrdr1Zd84J2Y14mLxzg==",
"dev": true "dev": true
}, },
"core-js-compat": { "core-js-compat": {
@@ -5424,9 +5627,9 @@
} }
}, },
"eslint": { "eslint": {
"version": "6.5.1", "version": "6.6.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-6.5.1.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.6.0.tgz",
"integrity": "sha512-32h99BoLYStT1iq1v2P9uwpyznQ4M2jRiFB6acitKz52Gqn+vPaMDUTB1bYi1WN4Nquj2w+t+bimYUG83DC55A==", "integrity": "sha512-PpEBq7b6qY/qrOmpYQ/jTMDYfuQMELR4g4WI1M/NaSDDD/bdcMb+dj4Hgks7p41kW2caXsPsEZAEAyAgjVVC0g==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/code-frame": "^7.0.0", "@babel/code-frame": "^7.0.0",
@@ -5436,9 +5639,9 @@
"debug": "^4.0.1", "debug": "^4.0.1",
"doctrine": "^3.0.0", "doctrine": "^3.0.0",
"eslint-scope": "^5.0.0", "eslint-scope": "^5.0.0",
"eslint-utils": "^1.4.2", "eslint-utils": "^1.4.3",
"eslint-visitor-keys": "^1.1.0", "eslint-visitor-keys": "^1.1.0",
"espree": "^6.1.1", "espree": "^6.1.2",
"esquery": "^1.0.1", "esquery": "^1.0.1",
"esutils": "^2.0.2", "esutils": "^2.0.2",
"file-entry-cache": "^5.0.1", "file-entry-cache": "^5.0.1",
@@ -5448,7 +5651,7 @@
"ignore": "^4.0.6", "ignore": "^4.0.6",
"import-fresh": "^3.0.0", "import-fresh": "^3.0.0",
"imurmurhash": "^0.1.4", "imurmurhash": "^0.1.4",
"inquirer": "^6.4.1", "inquirer": "^7.0.0",
"is-glob": "^4.0.0", "is-glob": "^4.0.0",
"js-yaml": "^3.13.1", "js-yaml": "^3.13.1",
"json-stable-stringify-without-jsonify": "^1.0.1", "json-stable-stringify-without-jsonify": "^1.0.1",
@@ -5488,9 +5691,9 @@
} }
}, },
"import-fresh": { "import-fresh": {
"version": "3.1.0", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.1.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
"integrity": "sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==", "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"parent-module": "^1.0.0", "parent-module": "^1.0.0",
@@ -5531,12 +5734,12 @@
} }
}, },
"eslint-plugin-vue": { "eslint-plugin-vue": {
"version": "5.2.3", "version": "6.0.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-5.2.3.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.0.1.tgz",
"integrity": "sha512-mGwMqbbJf0+VvpGR5Lllq0PMxvTdrZ/ZPjmhkacrCHbubJeJOt+T6E3HUzAifa2Mxi7RSdJfC9HFpOeSYVMMIw==", "integrity": "sha512-5tgFPcxGDKjfVB/6Yi56bKiWxygUibfZmzSh26Np3kuwAk/lfaGbVld+Yt+MPgD84ppvcachtiL4/winsXLjXA==",
"dev": true, "dev": true,
"requires": { "requires": {
"vue-eslint-parser": "^5.0.0" "vue-eslint-parser": "^6.0.5"
} }
}, },
"eslint-scope": { "eslint-scope": {
@@ -6027,9 +6230,9 @@
"dev": true "dev": true
}, },
"figures": { "figures": {
"version": "2.0.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", "resolved": "https://registry.npmjs.org/figures/-/figures-3.1.0.tgz",
"integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=", "integrity": "sha512-ravh8VRXqHuMvZt/d8GblBeqDMkdJMBdv/2KntFH+ra5MXkO7nxNKpzQ3n6QD/2da1kH0aWmNISdvhM7gl2gVg==",
"dev": true, "dev": true,
"requires": { "requires": {
"escape-string-regexp": "^1.0.5" "escape-string-regexp": "^1.0.5"
@@ -7770,52 +7973,114 @@
"dev": true "dev": true
}, },
"inquirer": { "inquirer": {
"version": "6.5.2", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.0.tgz",
"integrity": "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==", "integrity": "sha512-rSdC7zelHdRQFkWnhsMu2+2SO41mpv2oF2zy4tMhmiLWkcKbOAs87fWAJhVXttKVwhdZvymvnuM95EyEXg2/tQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"ansi-escapes": "^3.2.0", "ansi-escapes": "^4.2.1",
"chalk": "^2.4.2", "chalk": "^2.4.2",
"cli-cursor": "^2.1.0", "cli-cursor": "^3.1.0",
"cli-width": "^2.0.0", "cli-width": "^2.0.0",
"external-editor": "^3.0.3", "external-editor": "^3.0.3",
"figures": "^2.0.0", "figures": "^3.0.0",
"lodash": "^4.17.12", "lodash": "^4.17.15",
"mute-stream": "0.0.7", "mute-stream": "0.0.8",
"run-async": "^2.2.0", "run-async": "^2.2.0",
"rxjs": "^6.4.0", "rxjs": "^6.4.0",
"string-width": "^2.1.0", "string-width": "^4.1.0",
"strip-ansi": "^5.1.0", "strip-ansi": "^5.1.0",
"through": "^2.3.6" "through": "^2.3.6"
}, },
"dependencies": { "dependencies": {
"ansi-regex": { "ansi-escapes": {
"version": "3.0.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "integrity": "sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==",
"dev": true
},
"string-width": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
"dev": true, "dev": true,
"requires": { "requires": {
"is-fullwidth-code-point": "^2.0.0", "type-fest": "^0.8.1"
"strip-ansi": "^4.0.0" }
},
"ansi-regex": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
"dev": true
},
"cli-cursor": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
"dev": true,
"requires": {
"restore-cursor": "^3.1.0"
}
},
"emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true
},
"is-fullwidth-code-point": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
"dev": true
},
"mimic-fn": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
"dev": true
},
"onetime": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
"integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
"dev": true,
"requires": {
"mimic-fn": "^2.1.0"
}
},
"restore-cursor": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
"dev": true,
"requires": {
"onetime": "^5.1.0",
"signal-exit": "^3.0.2"
}
},
"string-width": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
"integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
"dev": true,
"requires": {
"emoji-regex": "^8.0.0",
"is-fullwidth-code-point": "^3.0.0",
"strip-ansi": "^6.0.0"
}, },
"dependencies": { "dependencies": {
"strip-ansi": { "strip-ansi": {
"version": "4.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
"dev": true, "dev": true,
"requires": { "requires": {
"ansi-regex": "^3.0.0" "ansi-regex": "^5.0.0"
} }
} }
} }
},
"type-fest": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
"dev": true
} }
} }
}, },
@@ -10113,9 +10378,9 @@
"dev": true "dev": true
}, },
"mute-stream": { "mute-stream": {
"version": "0.0.7", "version": "0.0.8",
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
"integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=", "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
"dev": true "dev": true
}, },
"mz": { "mz": {
@@ -14606,26 +14871,26 @@
} }
}, },
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "5.0.0", "version": "6.0.5",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-6.0.5.tgz",
"integrity": "sha512-JlHVZwBBTNVvzmifwjpZYn0oPWH2SgWv5dojlZBsrhablDu95VFD+hriB1rQGwbD+bms6g+rAFhQHk6+NyiS6g==", "integrity": "sha512-Bvjlx7rH1Ulvus56KHeLXOjEi3JMOYTa1GAqZr9lBQhd8weK8mV7U7V2l85yokBZEWHJQjLn6X3nosY8TzkOKg==",
"dev": true, "dev": true,
"requires": { "requires": {
"debug": "^4.1.0", "debug": "^4.1.1",
"eslint-scope": "^4.0.0", "eslint-scope": "^4.0.0",
"eslint-visitor-keys": "^1.0.0", "eslint-visitor-keys": "^1.0.0",
"espree": "^4.1.0", "espree": "^5.0.0",
"esquery": "^1.0.1", "esquery": "^1.0.1",
"lodash": "^4.17.11" "lodash": "^4.17.11"
}, },
"dependencies": { "dependencies": {
"espree": { "espree": {
"version": "4.1.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/espree/-/espree-4.1.0.tgz", "resolved": "https://registry.npmjs.org/espree/-/espree-5.0.1.tgz",
"integrity": "sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==", "integrity": "sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==",
"dev": true, "dev": true,
"requires": { "requires": {
"acorn": "^6.0.2", "acorn": "^6.0.7",
"acorn-jsx": "^5.0.0", "acorn-jsx": "^5.0.0",
"eslint-visitor-keys": "^1.0.0" "eslint-visitor-keys": "^1.0.0"
} }
package.json
+10 -10
View File
@@ -1,6 +1,6 @@
{ {
"name": "@coreui/coreui-free-vue-admin-template", "name": "@coreui/coreui-free-vue-admin-template",
"version": "3.0.0-alpha.6", "version": "3.0.0-beta.0",
"description": "Open Source Bootstrap Admin Template", "description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek", "author": "Łukasz Holeczek",
"homepage": "http://coreui.io", "homepage": "http://coreui.io",
@@ -14,10 +14,10 @@
"test:e2e": "vue-cli-service test:e2e" "test:e2e": "vue-cli-service test:e2e"
}, },
"dependencies": { "dependencies": {
"@coreui/coreui": "3.0.0-beta.0", "@coreui/coreui": "3.0.0-beta.3",
"@coreui/coreui-chartjs": "coreui/coreui-chartjs#v2", "@coreui/coreui-vue-chartjs": "1.0.0-alpha.2",
"@coreui/icons": "coreui/coreui-icons#v1-alpha", "@coreui/icons": "1.0.0-beta.3",
"@coreui/vue": "coreui/coreui-vue#3.0.0-alpha.6", "@coreui/vue": "3.0.0-beta.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.1.3" "vue-router": "^3.1.3"
}, },
@@ -28,13 +28,13 @@
"@vue/cli-plugin-unit-jest": "^4.0.5", "@vue/cli-plugin-unit-jest": "^4.0.5",
"@vue/cli-service": "^4.0.5", "@vue/cli-service": "^4.0.5",
"@vue/test-utils": "^1.0.0-beta.29", "@vue/test-utils": "^1.0.0-beta.29",
"@babel/core": "7.6.4", "@babel/core": "7.7.2",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0", "babel-jest": "^24.9.0",
"core-js": "^3.3.4", "core-js": "^3.4.1",
"chromedriver": "^77.0.0", "chromedriver": "^78.0.1",
"eslint": "^6.5.1", "eslint": "^6.6.0",
"eslint-plugin-vue": "^5.2.3", "eslint-plugin-vue": "^6.0.1",
"node-sass": "^4.13.0", "node-sass": "^4.13.0",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.10"
src/App.vue
-2
View File
@@ -9,8 +9,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
// CoreUI Icons Set
@import '~@coreui/icons/css/coreui-icons.min.css';
// Import Main styles for this application // Import Main styles for this application
@import 'assets/scss/style'; @import 'assets/scss/style';
</style> </style>
src/assets/icons/icons.js
+154 -41
View File
@@ -1,48 +1,161 @@
import { import {
facebook, cibFacebook,
twitter, cibTwitter,
linkedin, cibLinkedin,
flickr, cibFlickr,
tumblr, cibTumblr,
xing, cibXing,
github, cibGithub,
stackOverflow, cibStackOverflow,
youtube, cibYoutube,
dribbble, cibDribbble,
instagram, cibInstagram,
pinterest, cibPinterest,
vk, cibVk,
yahoo, cibYahoo,
behance, cibBehance,
reddit, cibReddit,
vimeo, cibVimeo,
ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex cibCcMastercard,
} from '@coreui/icons/brands' cibCcVisa,
import { US, BR, IN, FR, ES, PL } from '@coreui/icons/flags' cibStripe,
import { iconSet } from '@coreui/icons' cibPaypal,
cibGooglePay,
cibCcAmex
} from '@coreui/icons'
import {
cifUs,
cifBr,
cifIn,
cifFr,
cifEs,
cifPl
} from '@coreui/icons'
import {
cilArrowRight,
cilBan,
cilBasket,
cilBell,
cilCalculator,
cilCalendar,
cilCloudDownload,
cilChartPie,
cilCheck,
cilChevronBottom,
cilChevronTop,
// cilCircleCheck,
cilCommentSquare,
cilCursor,
cilDrop,
cilDollar,
cilEnvelopeClosed,
cilEnvelopeOpen,
cilEuro,
cilGlobeAlt,
cilFile,
cilJustifyCenter,
cilLaptop,
cilLayers,
cilLightbulb,
cilList,
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMoon,
cilPencil,
cilPeople,
cilPuzzle,
cilSettings,
cilShieldAlt,
cilSpeech,
cilSpeedometer,
cilStar,
cilTask,
cilUser,
cilUserFemale,
cilUserFollow,
cilXCircle
} from '@coreui/icons'
export const iconsSet = Object.assign( export const iconsSet = Object.assign(
{}, {},
iconSet,
{ US, BR, IN, FR, ES, PL },
{ {
facebook, cilArrowRight,
twitter, cilBan,
linkedin, cilBasket,
flickr, cilBell,
tumblr, cilCalculator,
xing, cilCalendar,
github, cilCloudDownload,
stackOverflow, cilChartPie,
youtube, cilCheck,
dribbble, cilChevronBottom,
instagram, cilChevronTop,
pinterest, // cilCircleCheck,
vk, cilCommentSquare,
yahoo, cilCursor,
behance, cilDrop,
reddit, cilDollar,
vimeo, cilEnvelopeClosed,
ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex cilEnvelopeOpen,
cilEuro,
cilGlobeAlt,
cilFile,
cilJustifyCenter,
cilLaptop,
cilLayers,
cilLightbulb,
cilList,
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMoon,
cilPencil,
cilPeople,
cilPuzzle,
cilSettings,
cilShieldAlt,
cilSpeech,
cilSpeedometer,
cilStar,
cilTask,
cilUser,
cilUserFemale,
cilUserFollow,
cilXCircle
},
{
cifUs,
cifBr,
cifIn,
cifFr,
cifEs,
cifPl
},
{
cibFacebook,
cibTwitter,
cibLinkedin,
cibFlickr,
cibTumblr,
cibXing,
cibGithub,
cibStackOverflow,
cibYoutube,
cibDribbble,
cibInstagram,
cibPinterest,
cibVk,
cibYahoo,
cibBehance,
cibReddit,
cibVimeo,
cibCcMastercard,
cibCcVisa,
cibStripe,
cibPaypal,
cibGooglePay,
cibCcAmex
} }
) )
src/assets/scss/style.scss
-3
View File
@@ -4,8 +4,5 @@
// Import styles // Import styles
@import "~@coreui/coreui/scss/coreui"; @import "~@coreui/coreui/scss/coreui";
// Import custom tooltips styles
@import "~@coreui/coreui-chartjs/custom-tooltips/dist/css/coreui-chartjs.css";
// If you want to add something do it here // If you want to add something do it here
@import "custom"; @import "custom";
src/containers/TheHeader.vue
+24 -6
View File
@@ -19,19 +19,37 @@
:wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}" :wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
/> />
<CHeaderNav class="d-md-down-none mr-auto"> <CHeaderNav class="d-md-down-none mr-auto">
<CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem> <CHeaderNavItem class="px-3" to="/dashboard">
<CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem> <CHeaderNavLink>
<CHeaderNavItem class="px-3">Settings</CHeaderNavItem> Dashboard
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="px-3" to="/users" exact>
<CHeaderNavLink>
Users
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="px-3">
<CHeaderNavLink>
Settings
</CHeaderNavLink>
</CHeaderNavItem>
</CHeaderNav> </CHeaderNav>
<CHeaderNav class="mr-4"> <CHeaderNav class="mr-4">
<CHeaderNavItem class="d-md-down-none mx-2"> <CHeaderNavItem class="d-md-down-none mx-2">
<i class="cui-bell"></i> <CHeaderNavLink>
<CIcon name="cil-bell"/>
</CHeaderNavLink>
</CHeaderNavItem> </CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2"> <CHeaderNavItem class="d-md-down-none mx-2">
<i class="cui-list"></i> <CHeaderNavLink>
<CIcon name="cil-list"/>
</CHeaderNavLink>
</CHeaderNavItem> </CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2"> <CHeaderNavItem class="d-md-down-none mx-2">
<i class="cui-envelope-open"></i> <CHeaderNavLink>
<CIcon name="cil-envelope-open"/>
</CHeaderNavLink>
</CHeaderNavItem> </CHeaderNavItem>
<TheHeaderDropdownAccnt/> <TheHeaderDropdownAccnt/>
</CHeaderNav> </CHeaderNav>
src/containers/TheHeaderDropdownAccnt.vue
+19 -14
View File
@@ -1,38 +1,37 @@
<template> <template>
<CDropdown <CDropdown
nav inNav
no-caret
class="c-header-nav-items" class="c-header-nav-items"
placement="bottom-end" placement="bottom-end"
add-menu-classes="pt-0" add-menu-classes="pt-0"
> >
<template #toggler> <template #toggler>
<CHeaderNavItem only-link> <CHeaderNavLink>
<div class="c-avatar"> <div class="c-avatar">
<img <img
src="img/avatars/6.jpg" src="img/avatars/6.jpg"
class="c-avatar-img " class="c-avatar-img "
/> />
</div> </div>
</CHeaderNavItem> </CHeaderNavLink>
</template> </template>
<CDropdownHeader tag="div" class="text-center" color="light"> <CDropdownHeader tag="div" class="text-center" color="light">
<strong>Account</strong> <strong>Account</strong>
</CDropdownHeader> </CDropdownHeader>
<CDropdownItem> <CDropdownItem>
<i class="cui-bell mr-2"/> Updates <CIcon name="cil-bell"/> Updates
<CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge> <CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="cui-envelope-open mr-2" /> Messages <CIcon name="cil-envelope-open" /> Messages
<CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge> <CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="cui-task mr-2" /> Tasks <CIcon name="cil-task" /> Tasks
<CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge> <CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="cui-comment-square mr-2" /> Comments <CIcon name="cil-comment-square" /> Comments
<CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge> <CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownHeader <CDropdownHeader
@@ -43,25 +42,25 @@
<strong>Settings</strong> <strong>Settings</strong>
</CDropdownHeader> </CDropdownHeader>
<CDropdownItem> <CDropdownItem>
<i class="cui-user mr-2" /> Profile <CIcon name="cil-user" /> Profile
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="cui-wrench mr-2" /> Settings <CIcon name="cil-settings" /> Settings
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="cui-dollar mr-2" /> Payments <CIcon name="cil-dollar" /> Payments
<CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge> <CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="cui-file mr-2" /> Projects <CIcon name="cil-file" /> Projects
<CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge> <CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownDivider/> <CDropdownDivider/>
<CDropdownItem> <CDropdownItem>
<i class="cui-shield mr-2" /> Lock Account <CIcon name="cil-shield-alt" /> Lock Account
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="cui-lock-locked mr-2" /> Logout <CIcon name="cil-lock-locked" /> Logout
</CDropdownItem> </CDropdownItem>
</CDropdown> </CDropdown>
</template> </template>
@@ -76,3 +75,9 @@ export default {
} }
} }
</script> </script>
<style scoped>
.c-icon {
margin-right: 0.3rem;
}
</style>
src/containers/TheSidebar.vue
+3 -5
View File
@@ -9,11 +9,8 @@
:imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}" :imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}"
:wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}" :wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
/> />
<!-- <CSidebarHeader/> --> <CRenderFunction flat :content-to-render="nav"/>
<!-- <CSidebarForm/> --> <CSidebarMinimizer
<CRenderFunction :contentToRender="nav"/>
<!-- <CSidebarFooter/> -->
<CSidebarMinimizer
class="d-md-down-none" class="d-md-down-none"
@click.native="minimize = !minimize" @click.native="minimize = !minimize"
/> />
@@ -22,6 +19,7 @@
<script> <script>
import nav from './_nav' import nav from './_nav'
export default { export default {
name: 'TheSidebar', name: 'TheSidebar',
data () { data () {
src/containers/_nav.js
+233 -433
View File
@@ -1,471 +1,271 @@
export default [ export default [
'CSidebarNav', {
[ _name: 'CSidebarNav',
[ _children: [
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavItem',
name: 'Dashboard', name: 'Dashboard',
to: '/dashboard', to: '/dashboard',
icon: 'cui-speedometer', icon: 'cil-speedometer',
badge: { badge: {
color: 'primary', color: 'primary',
text: 'NEW' text: 'NEW'
}
}
}
],
[
'CSidebarNavTitle',
['Theme']
],
[
'CSidebarNavLink',
{
props: {
name: 'Colors',
to: '/theme/colors',
icon: 'cui-drop'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Typography',
to: '/theme/typography',
icon: 'cui-pencil'
}
}
],
[
'CSidebarNavTitle',
['Components']
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Base',
route: '/base',
icon: 'cui-puzzle',
} }
}, },
[ {
[ _name: 'CSidebarNavTitle',
'CSidebarNavLink', _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: [
{ {
props: { name: 'Breadcrumbs',
name: 'Breadcrumbs', to: '/base/breadcrumbs',
to: '/base/breadcrumbs', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Cards',
name: 'Cards', to: '/base/cards',
to: '/base/cards', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Carousels',
name: 'Carousels', to: '/base/carousels',
to: '/base/carousels', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Collapses',
name: 'Collapses', to: '/base/collapses',
to: '/base/collapses', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Forms',
name: 'Forms', to: '/base/forms',
to: '/base/forms', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Jumbotrons',
name: 'Jumbotrons', to: '/base/jumbotrons',
to: '/base/jumbotrons', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'List Groups',
name: 'List Groups', to: '/base/list-groups',
to: '/base/list-groups', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Navs',
name: 'Navs', to: '/base/navs',
to: '/base/navs', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Navbars',
name: 'Navbars', to: '/base/navbars',
to: '/base/navbars', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Paginations',
name: 'Paginations', to: '/base/paginations',
to: '/base/paginations', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Popovers',
name: 'Popovers', to: '/base/popovers',
to: '/base/popovers', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Progress Bars',
name: 'Progress Bars', to: '/base/progress-bars',
to: '/base/progress-bars', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Switches',
name: 'Switches', to: '/base/switches',
to: '/base/switches', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Tables',
name: 'Tables', to: '/base/tables',
to: '/base/tables', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Tabs',
name: 'Tabs', to: '/base/tabs',
to: '/base/tabs', icon: 'cil-puzzle'
icon: 'cui-puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Tooltips',
name: 'Tooltips', to: '/base/tooltips',
to: '/base/tooltips', icon: 'cil-puzzle'
icon: 'cui-puzzle'
}
} }
] ]
] },
],
[
'CSidebarNavDropdown',
{ {
props: { _name: 'CSidebarNavDropdown',
name: 'Buttons', name: 'Buttons',
route: '/buttons', route: '/buttons',
icon: 'cui-cursor', icon: 'cil-cursor',
items: [
{
name: 'Buttons',
to: '/buttons/standard-buttons',
icon: 'cil-cursor'
},
{
name: 'Button Dropdowns',
to: '/buttons/dropdowns',
icon: 'cil-cursor'
},
{
name: 'Button Groups',
to: '/buttons/button-groups',
icon: 'cil-cursor'
},
{
name: 'Brand Buttons',
to: '/buttons/brand-buttons',
icon: 'cil-cursor'
}
]
},
{
_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',
icon: 'cil-star',
badge: {
color: 'info',
text: 'NEW'
}
},
{
name: 'Brands',
to: '/icons/brands',
icon: 'cil-star'
},
{
name: 'Flags',
to: '/icons/flags',
icon: 'cil-star'
}
]
},
{
_name: 'CSidebarNavDropdown',
name: 'Notifications',
route: '/notifications',
icon: 'cil-bell',
items: [
{
name: 'Alerts',
to: '/notifications/alerts',
icon: 'cil-bell'
},
{
name: 'Badges',
to: '/notifications/badges',
icon: 'cil-bell'
},
{
name: 'Modals',
to: '/notifications/modals',
icon: 'cil-bell'
}
]
},
{
_name: 'CSidebarNavItem',
name: 'Widgets',
to: '/widgets',
icon: 'cil-calculator',
badge: {
color: 'primary',
text: 'NEW',
shape: 'pill'
} }
}, },
[
[
'CSidebarNavLink',
{
props: {
name: 'Buttons',
to: '/buttons/standard-buttons',
icon: 'cui-cursor'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Button Dropdowns',
to: '/buttons/dropdowns',
icon: 'cui-cursor'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Button Groups',
to: '/buttons/button-groups',
icon: 'cui-cursor'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Brand Buttons',
to: '/buttons/brand-buttons',
icon: 'cui-cursor'
}
}
]
]
],
[
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavDivider'
name: 'Charts',
to: '/charts',
icon: 'cui-pie-chart'
}
}
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Icons',
route: '/icons',
icon: 'cui-star',
}
}, },
[
[
'CSidebarNavLink',
{
props: {
name: 'CoreUI Icons',
to: '/icons/coreui-icons',
icon: 'cui-star',
badge: {
color: 'info',
text: 'NEW'
}
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Brands',
to: '/icons/brands',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Flags',
to: '/icons/flags',
icon: 'cui-star'
}
}
]
]
],
[
'CSidebarNavDropdown',
{ {
props: { _name: 'CSidebarNavTitle',
name: 'Notifications', _children: ['Extras']
route: '/notifications',
icon: 'cui-bell',
}
}, },
[ {
[ _name: 'CSidebarNavDropdown',
'CSidebarNavLink', name: 'Pages',
route: '/pages',
icon: 'cil-star',
items: [
{ {
props: { name: 'Login',
name: 'Alerts', to: '/pages/login',
to: '/notifications/alerts', icon: 'cil-star'
icon: 'cui-bell' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Register',
name: 'Badges', to: '/pages/register',
to: '/notifications/badges', icon: 'cil-star'
icon: 'cui-bell' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Error 404',
name: 'Modals', to: '/pages/404',
to: '/notifications/modals', icon: 'cil-star'
icon: 'cui-bell' },
} {
name: 'Error 500',
to: '/pages/500',
icon: 'cil-star'
} }
] ]
]
],
[
'CSidebarNavLink',
{
props: {
name: 'Widgets',
to: '/widgets',
icon: 'cui-calculator',
badge: {
color: 'primary',
text: 'NEW',
pill: true
}
}
}
],
[
'CSidebarNavDivider',
],
[
'CSidebarNavTitle',
['Extras']
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Pages',
route: '/pages',
icon: 'cui-star',
}
}, },
[
[
'CSidebarNavLink',
{
props: {
name: 'Login',
to: '/pages/login',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Register',
to: '/pages/register',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Error 404',
to: '/pages/404',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Error 500',
to: '/pages/500',
icon: 'cui-star'
}
}
]
]
],
[
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavItem',
name: 'Download CoreUI', name: 'Download CoreUI',
href: 'http://coreui.io/vue/', href: 'http://coreui.io/vue/',
icon: 'cui-cloud-download', icon: { name: 'cil-cloud-download', class: 'text-white' },
addLinkClasses: 'c-nav-link-success', _class: 'bg-success text-white',
target: '_blank' target: '_blank'
}, },
attrs: { {
class: 'mt-auto', _name: 'CSidebarNavItem',
} name: 'Try CoreUI PRO',
} href: 'http://coreui.io/pro/vue/',
], icon: { name: 'cil-layers', class: 'text-white' },
[ _class: 'bg-danger text-white',
'CSidebarNavLink', target: '_blank'
{
props: {
name: 'Try CoreUI PRO',
href: 'http://coreui.io/pro/vue/',
icon: 'cui-layers',
addLinkClasses: 'c-nav-link-danger',
target: '_blank'
}
} }
] ]
] }
] ]
src/main.js
+2 -3
View File
@@ -2,16 +2,15 @@ import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import CoreuiVue from '@coreui/vue' import CoreuiVue from '@coreui/vue'
import { CIconPlugin } from '@coreui/icons/vue' import { iconsSet as icons } from './assets/icons/icons.js'
import { iconsSet } from './assets/icons/icons.js'
Vue.config.performance = true Vue.config.performance = true
Vue.use(CoreuiVue) Vue.use(CoreuiVue)
Vue.use(CIconPlugin, iconsSet)
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,
icons,
template: '<App/>', template: '<App/>',
components: { components: {
App App
src/views/Dashboard.vue
+328 -323
View File
@@ -10,7 +10,7 @@
</CCol> </CCol>
<CCol sm="7" class="d-none d-md-block"> <CCol sm="7" class="d-none d-md-block">
<CButton color="primary" class="float-right"> <CButton color="primary" class="float-right">
<i class="cui-cloud-download"></i> <CIcon name="cil-cloud-download"/>
</CButton> </CButton>
<CButtonGroup class="float-right mr-3"> <CButtonGroup class="float-right mr-3">
<CButton <CButton
@@ -85,363 +85,368 @@
<WidgetsBrand/> <WidgetsBrand/>
<CRow> <CRow>
<CCol md="12"> <CCol md="12">
<CCard header-html="Traffic &amp; Sales" body-wrapper> <CCard>
<CRow> <CCardHeader>
<CCol sm="12" lg="6"> Traffic &amp; Sales
<CRow> </CCardHeader>
<CCol sm="6"> <CCardBody>
<CCallout color="info"> <CRow>
<small class="text-muted">New Clients</small><br> <CCol sm="12" lg="6">
<strong class="h4">9,123</strong> <CRow>
</CCallout> <CCol sm="6">
</CCol> <CCallout color="info">
<CCol sm="6"> <small class="text-muted">New Clients</small><br>
<CCallout color="danger"> <strong class="h4">9,123</strong>
<small class="text-muted">Recurring Clients</small><br> </CCallout>
<strong class="h4">22,643</strong> </CCol>
</CCallout> <CCol sm="6">
</CCol> <CCallout color="danger">
</CRow> <small class="text-muted">Recurring Clients</small><br>
<hr class="mt-0"> <strong class="h4">22,643</strong>
<div class="progress-group mb-4"> </CCallout>
<div class="progress-group-prepend"> </CCol>
<span class="progress-group-text"> </CRow>
Monday <hr class="mt-0">
</span> <div class="progress-group mb-4">
</div> <div class="progress-group-prepend">
<div class="progress-group-bars"> <span class="progress-group-text">
<CProgress Monday
class="progress-xs" </span>
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 pill color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;&nbsp;
<sup><CBadge 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">
<i class="cui-user progress-group-icon"></i>
<span class="title">Male</span>
<span class="ml-auto font-weight-bold">43%</span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="progress-xs" class="progress-xs"
:value="43" color="info"
color="warning" :value="34"
/> />
</div>
</div>
<div class="progress-group mb-5">
<div class="progress-group-header">
<i class="cui-user-female progress-group-icon"></i>
<span class="title">Female</span>
<span class="ml-auto font-weight-bold">37%</span>
</div>
<div class="progress-group-bars">
<CProgress <CProgress
class="progress-xs" class="progress-xs"
:value="37" color="danger"
color="warning" :value="78"
/> />
</div> </div>
</div> </div>
<div class="progress-group"> <div class="progress-group mb-4">
<div class="progress-group-header"> <div class="progress-group-prepend">
<i class="cui-globe progress-group-icon"></i> <span class="progress-group-text">
<span class="title">Organic Search</span> Tuesday
<span class="ml-auto font-weight-bold">
191,235<span class="text-muted small">(56%)</span>
</span> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="progress-xs" class="progress-xs"
:value="56" :value="56"
color="success" color="info"
/>
<CProgress
class="progress-xs"
:value="94"
color="danger"
/> />
</div> </div>
</div> </div>
<div class="progress-group"> <div class="progress-group mb-4">
<div class="progress-group-header"> <div class="progress-group-prepend">
<CIcon <span class="progress-group-text">
name="socialFacebook" Wednesday
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> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="progress-xs" class="progress-xs"
:value="15" :value="12"
color="success" color="info"
/>
<CProgress
class="progress-xs"
:value="67"
color="danger"
/> />
</div> </div>
</div> </div>
<div class="progress-group"> <div class="progress-group mb-4">
<div class="progress-group-header"> <div class="progress-group-prepend">
<CIcon <span class="progress-group-text">
name="socialTwitter" Thursday
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> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="progress-xs" class="progress-xs"
:value="11" :value="43"
color="success" color="info"
/>
<CProgress
class="progress-xs"
:value="91"
color="danger"
/> />
</div> </div>
</div> </div>
<div class="progress-group"> <div class="progress-group mb-4">
<div class="progress-group-header"> <div class="progress-group-prepend">
<CIcon <span class="progress-group-text">
name="socialLinkedin" Friday
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> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="progress-xs" class="progress-xs"
:value="8" :value="22"
color="success" color="info"
/>
<CProgress
class="progress-xs"
:value="73"
color="danger"
/> />
</div> </div>
</div> </div>
<div class="divider text-center"> <div class="progress-group mb-4">
<CButton color="link" size="sm" class="text-muted"> <div class="progress-group-prepend">
<i class="cui-options"></i> <span class="progress-group-text">
</CButton> 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>
</ul> <div class="progress-group mb-4">
</CCol> <div class="progress-group-prepend">
</CRow> <span class="progress-group-text">
<br/> Sunday
<CTable </span>
class="mb-0 table-outline" </div>
hover <div class="progress-group-bars">
:items="tableItems" <CProgress
:fields="tableFields" class="progress-xs"
head-color="light" :value="9"
no-sorting color="info"
> />
<td slot="avatar" class="text-center" slot-scope="{item}"> <CProgress
<div class="c-avatar"> class="progress-xs"
<img :src="item.avatar.url" class="c-avatar-img" alt=""> :value="69"
<span color="danger"
class="c-avatar-status" />
:class="`bg-${item.avatar.status || 'secondary'}`" </div>
></span> </div>
</div> <div class="legend text-center">
</td> <small>
<td slot="user" slot-scope="{item}"> <sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
<div>{{item.user.name}}</div> New clients
<div class="small text-muted"> &nbsp;&nbsp;
<span> <sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
<template v-if="item.user.new">New</template> Recurring clients
<template v-else>Recurring</template> </small>
</span> | Registered: {{item.user.registered}} </div>
</div> </CCol>
</td> <CCol sm="12" lg="6">
<td <CRow>
slot="country" <CCol sm="6">
slot-scope="{item}" <CCallout color="warning">
class="text-center" <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
> >
<CIcon <td slot="avatar" class="text-center" slot-scope="{item}">
:name="item.country.flag" <div class="c-avatar">
height="25" <img :src="item.avatar.url" class="c-avatar-img" alt="">
/> <span
</td> class="c-avatar-status"
<td slot="usage" slot-scope="{item}"> :class="`bg-${item.avatar.status || 'secondary'}`"
<div class="clearfix"> ></span>
<div class="float-left">
<strong>{{item.usage.value}}%</strong>
</div> </div>
<div class="float-right"> </td>
<small class="text-muted">{{item.usage.period}}</small> <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> </div>
</div> </td>
<CProgress <td
class="progress-xs" slot="country"
v-model="item.usage.value" slot-scope="{item}"
:color="color(item.usage.value)" class="text-center"
/> >
</td> <CIcon
<td :name="item.country.flag"
slot="payment" height="25"
slot-scope="{item}" />
class="text-center" </td>
> <td slot="usage" slot-scope="{item}">
<CIcon <div class="clearfix">
:name="item.payment.icon" <div class="float-left">
height="25" <strong>{{item.usage.value}}%</strong>
/> </div>
</td> <div class="float-right">
<td slot="activity" slot-scope="{item}"> <small class="text-muted">{{item.usage.period}}</small>
<div class="small text-muted">Last login</div> </div>
<strong>{{item.activity}}</strong> </div>
</td> <CProgress
</CTable> 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> </CCard>
</CCol> </CCol>
</CRow> </CRow>
@@ -467,49 +472,49 @@ export default {
{ {
avatar: { url: 'img/avatars/1.jpg', status: 'success' }, avatar: { url: 'img/avatars/1.jpg', status: 'success' },
user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' }, user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
country: { name: 'USA', flag: 'US' }, country: { name: 'USA', flag: 'cif-us' },
usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' }, usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Mastercard', icon: 'cc-mastercard' }, payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
activity: '10 sec ago' activity: '10 sec ago'
}, },
{ {
avatar: { url: 'img/avatars/2.jpg', status: 'danger' }, avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' }, user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
country: { name: 'Brazil', flag: 'BR' }, country: { name: 'Brazil', flag: 'cif-br' },
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' }, usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Visa', icon: 'cc-visa' }, payment: { name: 'Visa', icon: 'cib-cc-visa' },
activity: '5 minutes ago' activity: '5 minutes ago'
}, },
{ {
avatar: { url: 'img/avatars/3.jpg', status: 'warning' }, avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' }, user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
country: { name: 'India', flag: 'IN' }, country: { name: 'India', flag: 'cif-in' },
usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' }, usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Stripe', icon: 'stripe' }, payment: { name: 'Stripe', icon: 'cib-stripe' },
activity: '1 hour ago' activity: '1 hour ago'
}, },
{ {
avatar: { url: 'img/avatars/4.jpg', status: '' }, avatar: { url: 'img/avatars/4.jpg', status: '' },
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' }, user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
country: { name: 'France', flag: 'FR' }, country: { name: 'France', flag: 'cif-fr' },
usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' }, usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'PayPal', icon: 'paypal' }, payment: { name: 'PayPal', icon: 'cib-paypal' },
activity: 'Last month' activity: 'Last month'
}, },
{ {
avatar: { url: 'img/avatars/5.jpg', status: 'success' }, avatar: { url: 'img/avatars/5.jpg', status: 'success' },
user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' }, user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
country: { name: 'Spain', flag: 'ES' }, country: { name: 'Spain', flag: 'cif-es' },
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' }, usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Google Wallet', icon: 'google-wallet' }, payment: { name: 'Google Wallet', icon: 'cib-google-pay' },
activity: 'Last week' activity: 'Last week'
}, },
{ {
avatar: { url: 'img/avatars/6.jpg', status: 'danger' }, avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' }, user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
country: { name: 'Poland', flag: 'PL' }, country: { name: 'Poland', flag: 'cif-pl' },
usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' }, usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Amex', icon: 'cc-amex' }, payment: { name: 'Amex', icon: 'cib-cc-amex' },
activity: 'Last week' activity: 'Last week'
} }
], ],
src/views/base/Breadcrumbs.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<CCol col> <CCol col>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong> <CIcon name="cil-justify-center"/><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
src/views/base/Cards.vue
+71 -64
View File
@@ -22,13 +22,16 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard footer-html="Card Footer" :body-html="loremIpsum" /> <CCard>
<CCardBody>{{loremIpsum}}</CCardBody>
<CCardFooter>Card Footer</CCardFooter>
</CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard <CCard>
headerHtml="<i class='cui-check'></i> Card with icon" <CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader>
:bodyHtml="loremIpsum" <CCardBody>{{loremIpsum}}</CCardBody>
/> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard> <CCard>
@@ -64,7 +67,7 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Card with label Card with label
<CBadge pill color="danger" class="float-right">42</CBadge> <CBadge shape="pill" color="danger" class="float-right">42</CBadge>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
{{loremIpsum}} {{loremIpsum}}
@@ -74,80 +77,84 @@
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard <CCard border-color="primary">
header="Card outline primary" <CCardHeader>Card outline primary</CCardHeader>
border-color="primary" <CCardBody>{{loremIpsum}}</CCardBody>
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline secondary"
border-color="secondary"
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline success"
border-color="success"
body-wrapper
>
{{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card outline info" border-color="info" body-wrapper> <CCard border-color="secondary">
{{loremIpsum}} <CCardHeader>Card outline secondary</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card outline warning" border-color="warning" body-wrapper> <CCard border-color="success">
{{loremIpsum}} <CCardHeader>Card outline success</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card outline danger" border-color="danger" body-wrapper> <CCard border-color="info">
{{loremIpsum}} <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> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-primary" header="Card with primary accent" body-wrapper> <CCard accent-color="primary">
{{loremIpsum}} <CCardHeader>Card with primary accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper> <CCard accent-color="secondary">
{{loremIpsum}} <CCardHeader>Card with secondary accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-success" header="Card with success accent" body-wrapper> <CCard accent-color="success">
{{loremIpsum}} <CCardHeader>Card with success accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-info" header="Card with info accent" body-wrapper> <CCard accent-color="info">
{{loremIpsum}} <CCardHeader>Card with info accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-warning" header="Card with warning accent" body-wrapper> <CCard accent-color="info">
{{loremIpsum}} <CCardHeader>Card with info accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-danger" header="Card with danger accent" body-wrapper> <CCard accent-color="danger">
{{loremIpsum}} <CCardHeader>Card with danger accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-primary text-center" body-wrapper> <CCard color="primary" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -157,7 +164,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-success text-center" body-wrapper> <CCard color="success" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -167,7 +174,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-info text-center" body-wrapper> <CCard color="info" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -177,7 +184,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-warning text-center" body-wrapper> <CCard color="warning" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -187,7 +194,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-danger text-center" body-wrapper> <CCard color="danger" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -197,7 +204,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-secondary text-center" body-wrapper> <CCard color="secondary" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -209,44 +216,44 @@
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-primary" body-wrapper> <CCard color="primary" body-wrapper>
{{loremIpsum}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-success" body-wrapper> <CCard color="success" body-wrapper>
{{loremIpsum}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-info" body-wrapper> <CCard color="info" body-wrapper>
{{loremIpsum}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-warning" body-wrapper> <CCard color="warning" body-wrapper>
{{loremIpsum}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-danger" body-wrapper> <CCard color="danger" body-wrapper>
{{loremIpsum}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<transition name="fade"> <transition name="fade">
<CCard class="bg-secondary" v-if="show"> <CCard v-if="show" color="secondary">
<CCardHeader> <CCardHeader>
Card with header actions Card with header actions
<div class="card-header-actions"> <div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting"> <CLink href="#" class="card-header-action btn-setting">
<i class="cui-settings"></i> <CIcon name="cil-settings"/>
</CLink> </CLink>
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed"> <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i> <CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
</CLink> </CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false"> <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
<i class="cui-circle-x"></i> <CIcon name="cil-x-circle"/>
</CLink> </CLink>
</div> </div>
</CCardHeader> </CCardHeader>
src/views/base/Carousels.vue
+8 -8
View File
@@ -3,7 +3,7 @@
<CCol md="12" lg="7"> <CCol md="12" lg="7">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Carousel</strong> <strong> Bootstrap Carousel</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -24,17 +24,17 @@
height="400px" height="400px"
> >
<CCarouselItem <CCarouselItem
captionHeader="First Slide" captionHeader="First Slide"
image="https://lorempixel.com/1024/480/technics/2/" image="https://picsum.photos/1024/480/?image=52"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum." captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/> />
<CCarouselItem <CCarouselItem
captionHeader="Blank page" captionHeader="Blank page"
:image="{ blankColor: 'grey' }" :image="{ placeholderColor: 'grey' }"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum." captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/> />
<CCarouselItem <CCarouselItem
image="https://lorempixel.com/1024/480/technics/8/" image="https://picsum.photos/1024/480/?image=54"
/> />
</CCarousel> </CCarousel>
</CCardBody> </CCardBody>
src/views/base/Collapses.vue
+2 -2
View File
@@ -3,7 +3,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Collapse </strong> <strong> Bootstrap Collapse </strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -22,7 +22,7 @@
</CButton> </CButton>
<CCollapse :show="collapse" class="mt-2"> <CCollapse :show="collapse" class="mt-2">
<CCard body-wrapper> <CCard body-wrapper>
<p class="card-text">Collapse contents Here</p> <CCardText>Collapse contents Here</CCardText>
<CButton <CButton
@click="innerCollapse = !innerCollapse" @click="innerCollapse = !innerCollapse"
size="sm" size="sm"
src/views/base/Forms.vue
+72 -68
View File
@@ -190,13 +190,13 @@
</CCol> </CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''"> <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CInputCheckbox <CInputCheckbox
v-for="option in options" v-for="(option, optionIndex) in options"
:key="option" :key="key + option"
:label="option" :label="option"
:value="option" :value="option"
:custom="key > 1" :custom="key > 1"
:name="`Option 1${key}`" :name="`Option 1${key}`"
:checked="Math.random() > 0.6" :checked="optionIndex === key"
:inline="key % 2 === 1" :inline="key % 2 === 1"
/> />
</CCol> </CCol>
@@ -210,7 +210,7 @@
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''"> <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CInputRadio <CInputRadio
v-for="(option, optionIndex) in options" v-for="(option, optionIndex) in options"
:key="option" :key="key + option"
:label="option" :label="option"
type="radio" type="radio"
:value="option" :value="option"
@@ -245,8 +245,8 @@
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton> <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard>
@@ -276,8 +276,8 @@
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton> <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@@ -307,8 +307,8 @@
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton> <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard>
@@ -337,8 +337,8 @@
/> />
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton> <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter> </CCardFooter>
</CForm> </CForm>
</CCard> </CCard>
@@ -399,8 +399,8 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-user"></i> Login</CButton> <CButton type="submit" size="sm" color="primary"><CIcon name="cil-user"/> Login</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard>
@@ -427,8 +427,8 @@
/> />
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton> <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@@ -488,25 +488,26 @@
<strong>Icon/Text</strong> Groups <strong>Icon/Text</strong> Groups
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CInput <CInput placeholder="Username">
placeholder="Username" <template #prepend-content><CIcon name="cil-user"/></template>
prependHtml="<i class='cui-user'></i>" </CInput>
/>
<CInput <CInput
type="email" type="email"
placeholder="Email" placeholder="Email"
autocomplete="email" autocomplete="email"
append-html="<i class='cui-envelope-open'></i>" >
/> <template #append-content><CIcon name="cil-envelope-open"/></template>
</CInput>
<CInput <CInput
prependHtml="<i class='cui-euro'></i>"
placeholder="ex. $1.000.000" placeholder="ex. $1.000.000"
append-html=".00" append=".00"
/> >
<template #prepend-content><CIcon name="cil-euro"/></template>
</CInput>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton> <CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@@ -519,7 +520,7 @@
<CInput placeholder="Username"> <CInput placeholder="Username">
<template #prepend> <template #prepend>
<CButton color="primary"> <CButton color="primary">
<i class="cui-magnifying-glass"></i> Search <CIcon name="cil-magnifying-glass"/> Search
</CButton> </CButton>
</template> </template>
</CInput> </CInput>
@@ -538,16 +539,16 @@
autocomplete="email" autocomplete="email"
> >
<template #prepend> <template #prepend>
<CButton color="primary"><CIcon name="facebook" height="14"/></CButton> <CButton color="primary"><CIcon name="cil-facebook" height="14"/></CButton>
</template> </template>
<template #append> <template #append>
<CButton color="primary"><CIcon name="twitter" height="14"/></CButton> <CButton color="primary"><CIcon name="cil-twitter" height="14"/></CButton>
</template> </template>
</CInput> </CInput>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton> <CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@@ -619,8 +620,8 @@
</CInput> </CInput>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton> <CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@@ -691,22 +692,23 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CForm> <CForm>
<CInput prepend="Username">
<template #append-content><CIcon name="cil-user"/></template>
</CInput>
<CInput <CInput
prepend-html="Username"
append-html="<i class='cui-user'></i>"
/>
<CInput
prepend-html="Email"
type="email" type="email"
autocomplete="email" autocomplete="email"
append-html="<i class='cui-envelope-closed'></i>" prepend="Email"
/> >
<template #append-content><CIcon name="cil-envelope-closed"/></template>
</CInput>
<CInput <CInput
prepend-html="Password"
type="password" type="password"
autocomplete="current-password" autocomplete="current-password"
append-html="<i class='cui-shield'></i>" prepend="Password"
/> >
<template #append-content><CIcon name="cil-shield-alt"/></template>
</CInput>
<div class="form-group form-actions"> <div class="form-group form-actions">
<CButton type="submit" size="sm" color="primary"> <CButton type="submit" size="sm" color="primary">
Submit Submit
@@ -723,22 +725,23 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CForm> <CForm>
<CInput <CInput placeholder="Username">
placeholder="Username" <template #append-content><CIcon name="cil-user"/></template>
append-html="<i class='cui-user'></i>" </CInput>
/>
<CInput <CInput
placeholder="Email" placeholder="Email"
type="email" type="email"
autocomplete="email" autocomplete="email"
append-html="<i class='cui-envelope-closed'></i>" >
/> <template #append-content><CIcon name="cil-envelope-closed"/></template>
</CInput>
<CInput <CInput
placeholder="Password" placeholder="Password"
type="password" type="password"
autocomplete="current-password" autocomplete="current-password"
append-html="<i class='cui-shield'></i>" >
/> <template #append-content><CIcon name="cil-shield-alt"/></template>
</CInput>
<div class="form-group form-actions"> <div class="form-group form-actions">
<CButton type="submit" class="btn btn-sm btn-secondary"> <CButton type="submit" class="btn btn-sm btn-secondary">
Submit Submit
@@ -755,22 +758,23 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CForm> <CForm>
<CInput <CInput placeholder="Username">
placeholder="Username" <template #prepend-content><CIcon name="cil-user"/></template>
prependHtml="<i class='cui-user'></i>" </CInput>
/>
<CInput <CInput
placeholder="Email" placeholder="Email"
type="email" type="email"
autocomplete="email" autocomplete="email"
prependHtml="<i class='cui-envelope-closed'></i>" >
/> <template #prepend-content><CIcon name="cil-envelope-closed"/></template>
</CInput>
<CInput <CInput
placeholder="Password" placeholder="Password"
type="password" type="password"
autocomplete="current-password" autocomplete="current-password"
prependHtml="<i class='cui-shield'></i>" >
/> <template #prepend-content><CIcon name="cil-shield-alt"/></template>
</CInput>
<div class="form-group form-actions"> <div class="form-group form-actions">
<CButton type="submit" size="sm" color="success"> <CButton type="submit" size="sm" color="success">
Submit Submit
@@ -786,19 +790,19 @@
<transition name="fade"> <transition name="fade">
<CCard v-if="show"> <CCard v-if="show">
<CCardHeader> <CCardHeader>
<i class="cui-pencil"></i> Form Elements <CIcon name="cil-pencil"/> Form Elements
<div class="card-header-actions"> <div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting"> <CLink href="#" class="card-header-action btn-setting">
<i class="cui-settings"></i> <CIcon name="cil-settings"/>
</CLink> </CLink>
<CLink <CLink
class="card-header-action btn-minimize" class="card-header-action btn-minimize"
@click="formCollapsed=!formCollapsed" @click="formCollapsed=!formCollapsed"
> >
<i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i> <CIcon :name="`cil-chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
</CLink> </CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show"> <CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
<i class="cui-circle-x"></i> <CIcon name="cil-x-circle"/>
</CLink> </CLink>
</div> </div>
</CCardHeader> </CCardHeader>
@@ -806,21 +810,21 @@
<CCardBody> <CCardBody>
<CInput <CInput
label="Prepended text" label="Prepended text"
prepend-html="@"
description="Here's some help text" description="Here's some help text"
type="email" type="email"
autocomplete="email" autocomplete="email"
prepend="@"
/> />
<CInput <CInput
label="Appended text" label="Appended text"
append-html=".00" append=".00"
description="Here's some help text" description="Here's some help text"
/> />
<CInput <CInput
label="Appended and prepended text" label="Appended and prepended text"
prepend-html="$" append=".00"
append-html=".00"
description="Here's some help text" description="Here's some help text"
prepend="$"
/> />
<CInput <CInput
label="Append with button" label="Append with button"
src/views/base/Jumbotrons.vue
+4 -4
View File
@@ -4,7 +4,7 @@
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Jumbotron </strong> <strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -20,7 +20,7 @@
<CCardBody> <CCardBody>
<CJumbotron> <CJumbotron>
<h1 class="display-3">Bootstrap 4</h1> <h1 class="display-3">Bootstrap 4</h1>
<p class="lead">Bootstrap 4 Components for Vue.js 2</p> <p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
<p>For more information visit website</p> <p>For more information visit website</p>
<CButton color="primary" href="#">More Info</CButton> <CButton color="primary" href="#">More Info</CButton>
</CJumbotron> </CJumbotron>
@@ -30,7 +30,7 @@
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong> <CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
<small>with slots</small> <small>with slots</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -56,7 +56,7 @@
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong> <CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
<small>colors</small> <small>colors</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
src/views/base/ListGroups.vue
+32 -26
View File
@@ -4,7 +4,7 @@
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap list group </strong> <strong> Bootstrap list group </strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -31,7 +31,7 @@
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small> <CIcon name="cil-justify-center"/><strong> List group </strong><small>active items</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CListGroup> <CListGroup>
@@ -49,7 +49,7 @@
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> List group </strong> <strong> List group </strong>
<small>disabled items</small> <small>disabled items</small>
</CCardHeader> </CCardHeader>
@@ -67,7 +67,7 @@
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> List group </strong> <strong> List group </strong>
<small>actionable items</small> <small>actionable items</small>
</CCardHeader> </CCardHeader>
@@ -86,7 +86,7 @@
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> List group </strong> <strong> List group </strong>
<small>buttons</small> <small>buttons</small>
</CCardHeader> </CCardHeader>
@@ -103,7 +103,7 @@
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> List group </strong> <strong> List group </strong>
<small>with badges</small> <small>with badges</small>
</CCardHeader> </CCardHeader>
@@ -113,19 +113,19 @@
class="d-flex justify-content-between align-items-center" class="d-flex justify-content-between align-items-center"
> >
Cras justo odio Cras justo odio
<CBadge color="primary" pill>14</CBadge> <CBadge color="primary" shape="pill">14</CBadge>
</CListGroupItem> </CListGroupItem>
<CListGroupItem <CListGroupItem
class="d-flex justify-content-between align-items-center" class="d-flex justify-content-between align-items-center"
> >
Dapibus ac facilisis in Dapibus ac facilisis in
<CBadge color="primary" pill>2</CBadge> <CBadge color="primary" shape="pill">2</CBadge>
</CListGroupItem> </CListGroupItem>
<CListGroupItem <CListGroupItem
class="d-flex justify-content-between align-items-center" class="d-flex justify-content-between align-items-center"
> >
Morbi leo risus Morbi leo risus
<CBadge color="primary" pill>1</CBadge> <CBadge color="primary" shape="pill">1</CBadge>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</CCardBody> </CCardBody>
@@ -136,7 +136,7 @@
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> List group </strong> <strong> List group </strong>
<small>colors</small> <small>colors</small>
</CCardHeader> </CCardHeader>
@@ -158,7 +158,7 @@
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> List group </strong> <strong> List group </strong>
<small>colors active</small> <small>colors active</small>
</CCardHeader> </CCardHeader>
@@ -182,26 +182,32 @@
<CCol col="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> List group </strong> <strong> List group </strong>
<small>inside cards</small> <small>inside cards</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCardGroup deck> <CCardGroup deck>
<CCard headerHtml="<b>Card with list group</b>"> <CCard>
<CListGroup> <CCardHeader>
<CListGroupItem href="#">Cras justo odio</CListGroupItem> <b>Card with list group</b>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> </CCardHeader>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem> <CCardBody>
</CListGroup> <CListGroup>
<p class="card-text mt-2"> <CListGroupItem href="#">Cras justo odio</CListGroupItem>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris </CListGroup>
ad sit ipsum anim Lorem. <CCardText class="mt-2">
</p> 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>
<CCard header="<b>Card with flush list group</b>"> <CCard>
<CCardHeader><b>Card with flush list group</b></CCardHeader>
<CListGroup flush> <CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem> <CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
@@ -223,7 +229,7 @@
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small> <CIcon name="cil-justify-center"/><strong> List group </strong><small>custom content</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CListGroup> <CListGroup>
src/views/base/Navbars.vue
+6 -6
View File
@@ -2,7 +2,7 @@
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Navbar </strong> <strong> Bootstrap Navbar </strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -67,7 +67,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
<small>brand</small> <small>brand</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -82,7 +82,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
<small>text</small> <small>text</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -99,7 +99,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
<small>dropdown</small> <small>dropdown</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -135,7 +135,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
<small>form</small> <small>form</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -153,7 +153,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
<small>input group</small> <small>input group</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
src/views/base/Navs.vue
+13 -13
View File
@@ -2,7 +2,7 @@
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong> <CIcon name="cil-justify-center"/><strong> Bootstrap Navs</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Nav" href="https://coreui.io/vue/docs/3.0/components/Nav"
@@ -25,14 +25,14 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong> <strong> Bootstrap Navs </strong>
<small>icons</small> <small>icons</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNav> <CNav>
<CNavItem active> <CNavItem active>
<i class="cui-basket-loaded"></i> <CIcon name="cil-basket"/>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
Link Link
@@ -46,12 +46,12 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong> <strong> Bootstrap Navs </strong>
<small>tab style</small> <small>tab style</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNav tabs> <CNav variant="tabs">
<CNavItem active> <CNavItem active>
Active Active
</CNavItem> </CNavItem>
@@ -67,12 +67,12 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader @click="item++"> <CCardHeader @click="item++">
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong> <strong> Bootstrap Navs </strong>
<small>pill style</small> <small>pill style</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNav pills> <CNav variant="pills">
<CNavItem active>Active</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem> <CNavItem>Another Link</CNavItem>
@@ -82,12 +82,12 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong> <strong> Bootstrap Navs </strong>
<small>fill tabs</small> <small>fill tabs</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNav fill tabs> <CNav fill variant="tabs">
<CNavItem active>Active</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem> <CNavItem>Link with a long name </CNavItem>
@@ -97,12 +97,12 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong> <strong> Bootstrap Navs </strong>
<small>justified tabs</small> <small>justified tabs</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNav justified tabs> <CNav justified variant="tabs">
<CNavItem active>Active</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem> <CNavItem>Link with a long name </CNavItem>
@@ -112,7 +112,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong> <strong> Bootstrap Navs </strong>
<small>dropdown support</small> <small>dropdown support</small>
</CCardHeader> </CCardHeader>
@@ -137,7 +137,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong> <strong> Bootstrap Navs </strong>
<small>vertical variation</small> <small>vertical variation</small>
</CCardHeader> </CCardHeader>
src/views/base/Paginations.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Responsive bootstrap Pagination</strong> <strong> Responsive bootstrap Pagination</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -47,7 +47,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Pagination </strong> <strong> Pagination </strong>
<small>alignment</small> <small>alignment</small>
</CCardHeader> </CCardHeader>
src/views/base/Popovers.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Popovers</strong> <strong> Bootstrap Popovers</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -49,7 +49,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Popovers </strong> <strong> Popovers </strong>
<small>placement</small> <small>placement</small>
</CCardHeader> </CCardHeader>
src/views/base/ProgressBars.vue
+8 -8
View File
@@ -2,7 +2,7 @@
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Progress</strong> <strong> Bootstrap Progress</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -33,7 +33,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small> <CIcon name="cil-justify-center"/> <strong> Progress </strong><small>labels</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>No label</h6> <h6>No label</h6>
@@ -50,7 +50,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Progress </strong> <strong> Progress </strong>
<small>width</small> <small>width</small>
</CCardHeader> </CCardHeader>
@@ -65,7 +65,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Progress </strong> <strong> Progress </strong>
<small>height</small> <small>height</small>
</CCardHeader> </CCardHeader>
@@ -80,7 +80,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Progress </strong> <strong> Progress </strong>
<small>colors</small> <small>colors</small>
</CCardHeader> </CCardHeader>
@@ -99,7 +99,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Progress </strong> <strong> Progress </strong>
<small>striped</small> <small>striped</small>
</CCardHeader> </CCardHeader>
@@ -135,7 +135,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Progress </strong> <strong> Progress </strong>
<small>animated</small> <small>animated</small>
</CCardHeader> </CCardHeader>
@@ -174,7 +174,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Progress </strong> <strong> Progress </strong>
<small>multiple bars</small> <small>multiple bars</small>
</CCardHeader> </CCardHeader>
src/views/base/Switches.vue
+115 -279
View File
@@ -23,8 +23,7 @@
:key="'radio' + key" :key="'radio' + key"
class="mx-1" class="mx-1"
:color="color" :color="color"
shape="3d" variant="3d"
outline="alt"
v-bind="labelIcon" v-bind="labelIcon"
type="radio" type="radio"
name="radio" name="radio"
@@ -85,15 +84,15 @@
3d Switch 3d Switch
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked shape="3d" /> <CSwitch class="mx-1" color="primary" checked variant="3d" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" /> <CSwitch class="mx-1" color="secondary" checked variant="3d" />
<CSwitch class="mx-1" color="success" checked shape="3d" /> <CSwitch class="mx-1" color="success" checked variant="3d" />
<CSwitch class="mx-1" color="warning" checked shape="3d" /> <CSwitch class="mx-1" color="warning" checked variant="3d" />
<CSwitch class="mx-1" color="info" checked shape="3d" /> <CSwitch class="mx-1" color="info" checked variant="3d" />
<CSwitch class="mx-1" color="danger" checked shape="3d" /> <CSwitch class="mx-1" color="danger" checked variant="3d" />
<CSwitch class="mx-1" color="light" checked shape="3d" /> <CSwitch class="mx-1" color="light" checked variant="3d" />
<CSwitch class="mx-1" color="dark" checked shape="3d" /> <CSwitch class="mx-1" color="dark" checked variant="3d" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" /> <CSwitch class="mx-1" color="primary" disabled variant="3d" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -103,33 +102,15 @@
3d Switch <small><code>disabled</code></small> 3d Switch <small><code>disabled</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked shape="3d" disabled /> <CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
<CSwitch class="mx-1" color="secondary" checked shape="3d" disabled /> <CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
<CSwitch class="mx-1" color="success" checked shape="3d" disabled /> <CSwitch class="mx-1" color="success" checked variant="3d" disabled />
<CSwitch class="mx-1" color="warning" checked shape="3d" disabled /> <CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
<CSwitch class="mx-1" color="info" checked shape="3d" disabled /> <CSwitch class="mx-1" color="info" checked variant="3d" disabled />
<CSwitch class="mx-1" color="danger" checked shape="3d" disabled /> <CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
<CSwitch class="mx-1" color="light" checked shape="3d" disabled /> <CSwitch class="mx-1" color="light" checked variant="3d" disabled />
<CSwitch class="mx-1" color="dark" checked shape="3d" disabled /> <CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
<CSwitch class="mx-1" color="primary" disabled shape="3d" /> <CSwitch class="mx-1" color="primary" disabled variant="3d" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -139,235 +120,90 @@
3d Switch <small><code>label</code></small> 3d Switch <small><code>label</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" shape="3d" checked v-bind="labelIcon"/> <CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
3d Switch <small><code>outline="alt"</code></small> Switch <small><code>variant="outline"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" checked variant="outline" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="secondary" checked variant="outline" />
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="success" checked variant="outline" />
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="warning" checked variant="outline" />
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="info" checked variant="outline" />
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="danger" checked variant="outline" />
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="light" checked variant="outline" />
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="dark" checked variant="outline" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" variant="outline" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
3d Switch <small><code>outline="alt"</code></small> Switch <small><code>variant="outline" shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" /> <CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Switch <small><code>outline</code></small> Switch <small><code>variant="opposite"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked outline /> <CSwitch class="mx-1" color="primary" checked variant="opposite" />
<CSwitch class="mx-1" color="secondary" checked outline /> <CSwitch class="mx-1" color="secondary" checked variant="opposite" />
<CSwitch class="mx-1" color="success" checked outline /> <CSwitch class="mx-1" color="success" checked variant="opposite" />
<CSwitch class="mx-1" color="warning" checked outline /> <CSwitch class="mx-1" color="warning" checked variant="opposite" />
<CSwitch class="mx-1" color="info" checked outline /> <CSwitch class="mx-1" color="info" checked variant="opposite" />
<CSwitch class="mx-1" color="danger" checked outline /> <CSwitch class="mx-1" color="danger" checked variant="opposite" />
<CSwitch class="mx-1" color="light" checked outline /> <CSwitch class="mx-1" color="light" checked variant="opposite" />
<CSwitch class="mx-1" color="dark" checked outline /> <CSwitch class="mx-1" color="dark" checked variant="opposite" />
<CSwitch class="mx-1" color="primary" outline disabled /> <CSwitch class="mx-1" color="primary" variant="opposite" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Switch <small><code>outline shape="pill"</code></small> Switch <small><code>variant="opposite" shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked outline shape="pill"/> <CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" /> <CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="success" checked outline shape="pill" /> <CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline shape="pill" /> <CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="info" checked outline shape="pill" /> <CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline shape="pill" /> <CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="light" checked outline shape="pill" /> <CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline shape="pill" /> <CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled /> <CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked outline="alt" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
<CSwitch class="mx-1" color="success" checked outline="alt" />
<CSwitch class="mx-1" color="warning" checked outline="alt" />
<CSwitch class="mx-1" color="info" checked outline="alt" />
<CSwitch class="mx-1" color="danger" checked outline="alt" />
<CSwitch class="mx-1" color="light" checked outline="alt" />
<CSwitch class="mx-1" color="dark" checked outline="alt" />
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>outline="alt" shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked />
<CSwitch class="mx-1" color="secondary" checked />
<CSwitch class="mx-1" color="success" checked />
<CSwitch class="mx-1" color="warning" checked />
<CSwitch class="mx-1" color="info" checked />
<CSwitch class="mx-1" color="danger" checked />
<CSwitch class="mx-1" color="light" checked />
<CSwitch class="mx-1" color="dark" checked />
<CSwitch class="mx-1" color="primary" disabled />
</CCardBody>
</CCard>
</CCol>
<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" />
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
<CSwitch class="mx-1" color="success" checked shape="pill" />
<CSwitch class="mx-1" color="warning" checked shape="pill" />
<CSwitch class="mx-1" color="info" checked shape="pill" />
<CSwitch class="mx-1" color="danger" checked shape="pill" />
<CSwitch class="mx-1" color="light" checked shape="pill" />
<CSwitch class="mx-1" color="dark" checked shape="pill" />
<CSwitch class="mx-1" color="primary" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked outline />
<CSwitch class="mx-1" color="secondary" checked outline />
<CSwitch class="mx-1" color="success" checked outline />
<CSwitch class="mx-1" color="warning" checked outline />
<CSwitch class="mx-1" color="info" checked outline />
<CSwitch class="mx-1" color="danger" checked outline />
<CSwitch class="mx-1" color="light" checked outline />
<CSwitch class="mx-1" color="dark" checked outline />
<CSwitch class="mx-1" color="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked outline shape="pill" />
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked outline="alt" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
<CSwitch class="mx-1" color="success" checked outline="alt" />
<CSwitch class="mx-1" color="warning" checked outline="alt" />
<CSwitch class="mx-1" color="info" checked outline="alt" />
<CSwitch class="mx-1" color="danger" checked outline="alt" />
<CSwitch class="mx-1" color="light" checked outline="alt" />
<CSwitch class="mx-1" color="dark" checked outline="alt" />
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
@@ -389,7 +225,7 @@
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Switch <small><code>label shape="pill"</code></small> Switch <small><code>label shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
@@ -407,72 +243,72 @@
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label variant="outline"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label variant="outline"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked outline shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked 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 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 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 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 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 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 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" outline shape="pill" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label variant="opposite"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label variant="opposite"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" /> <CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline="alt" 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 outline="alt" 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 outline="alt" 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 outline="alt" 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 outline="alt" 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 outline="alt" 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" outline="alt" shape="pill" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -483,7 +319,7 @@
Sizes Sizes
</CCardHeader> </CCardHeader>
<CCardBody class="p-0"> <CCardBody class="p-0">
<CTable <CDataTable
hover hover
striped striped
class="table-align-middle mb-0" class="table-align-middle mb-0"
@@ -494,7 +330,7 @@
<template #example="{item}"> <template #example="{item}">
<td> <td>
<CSwitch <CSwitch
:shape="item.example.shape" :variant="item.example.variant"
:color="item.example.color" :color="item.example.color"
:size="item.example.size" :size="item.example.size"
:checked="item.example.checked" :checked="item.example.checked"
@@ -506,7 +342,7 @@
<span v-html="item.size_prop"></span> <span v-html="item.size_prop"></span>
</td> </td>
</template> </template>
</CTable> </CDataTable>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -530,17 +366,17 @@ export default {
items: [ items: [
{ {
size: 'Large', size: 'Large',
example: { shape: '3d', color: 'primary', size: 'lg', checked: true }, example: { variant: '3d', color: 'primary', size: 'lg', checked: true },
size_prop: 'Add following prop <code>size="lg"</code>' size_prop: 'Add following prop <code>size="lg"</code>'
}, },
{ {
size: 'Normal', size: 'Normal',
example: { shape: '3d', color: 'primary', size: '', checked: true }, example: { variant: '3d', color: 'primary', size: '', checked: true },
size_prop: '-' size_prop: '-'
}, },
{ {
size: 'Small', size: 'Small',
example: {shape: '3d', color: 'primary', size: 'sm', checked: true}, example: { variant: '3d', color: 'primary', size: 'sm', checked: true},
size_prop: 'Add following prop <code>size="sm"</code>' size_prop: 'Add following prop <code>size="sm"</code>'
} }
], ],
src/views/base/Table.vue
+24 -19
View File
@@ -1,23 +1,28 @@
<template> <template>
<CCard :header="caption" body-wrapper> <CCard>
<CTable <CCardHeader>
:hover="hover" <CIcon name="cil-justify-center"/> {{caption}}
:striped="striped" </CCardHeader>
:bordered="bordered" <CCardBody>
:small="small" <CDataTable
:fixed="fixed" :hover="hover"
:items="items" :striped="striped"
:fields="fields" :bordered="bordered"
:items-per-page="small ? 10 : 5" :small="small"
:dark="dark" :fixed="fixed"
pagination :items="items"
> :fields="fields"
<template #status="{item}"> :items-per-page="small ? 10 : 5"
<td> :dark="dark"
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge> pagination
</td> >
</template> <template #status="{item}">
</CTable> <td>
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
</td>
</template>
</CDataTable>
</CCardBody>
</CCard> </CCard>
</template> </template>
src/views/base/Tables.vue
+6 -6
View File
@@ -4,7 +4,7 @@
<CCol lg="6"> <CCol lg="6">
<CTableWrapper <CTableWrapper
:items="getShuffledUsersData()" :items="getShuffledUsersData()"
caption="<i class='fa fa-align-justify'></i> Simple Table" caption="Simple Table"
/> />
</CCol> </CCol>
@@ -12,7 +12,7 @@
<CTableWrapper <CTableWrapper
:items="getShuffledUsersData()" :items="getShuffledUsersData()"
striped striped
caption="<i class='fa fa-align-justify'></i> Striped Table" caption="Striped Table"
/> />
</CCol> </CCol>
</CRow> </CRow>
@@ -22,7 +22,7 @@
<CTableWrapper <CTableWrapper
:items="getShuffledUsersData()" :items="getShuffledUsersData()"
small small
caption="<i class='fa fa-align-justify'></i> Condensed Table" caption="Condensed Table"
/> />
</CCol> </CCol>
@@ -31,7 +31,7 @@
:items="getShuffledUsersData()" :items="getShuffledUsersData()"
fixed fixed
bordered bordered
caption="<i class='fa fa-align-justify'></i> Bordered Table" caption="Bordered Table"
/> />
</CCol> </CCol>
</CRow> </CRow>
@@ -45,7 +45,7 @@
bordered bordered
small small
fixed fixed
caption="<i class='fa fa-align-justify'></i> Combined All Table" caption="Combined All Table"
/> />
</CCol> </CCol>
</CRow> </CRow>
@@ -60,7 +60,7 @@
small small
fixed fixed
dark dark
caption="<i class='fa fa-align-justify'></i> Combined All Table" caption="Combined All Table"
/> />
</CCol> </CCol>
</CRow> </CRow>
src/views/base/Tabs.vue
+17 -17
View File
@@ -18,21 +18,21 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CTabs> <CTabs>
<CTab title-html="Home" active> <CTab title="Home" active>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 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 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</CTab> </CTab>
<CTab title-html="Profile"> <CTab title="Profile">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 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 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</CTab> </CTab>
<CTab title-html="Disabled" disabled> <CTab title="Disabled" disabled>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -49,22 +49,22 @@
Tabs Tabs
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CTabs pills> <CTabs variant="pills">
<CTab title-html="Home" active> <CTab title="Home" active>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 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 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</CTab> </CTab>
<CTab title-html="Profile"> <CTab title="Profile">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 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 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</CTab> </CTab>
<CTab title-html="Disabled" disabled> <CTab title="Disabled" disabled>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -84,7 +84,7 @@
<CTabs> <CTabs>
<CTab active> <CTab active>
<template slot="title"> <template slot="title">
<i class="cui-calculator"></i> <CIcon name="cil-calculator"/>
</template> </template>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -94,7 +94,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="cui-basket-loaded"></i> <CIcon name="cil-basket"/>
</template> </template>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -104,7 +104,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="cui-pie-chart"></i> <CIcon name="cil-chart-pie"/>
</template> </template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -125,7 +125,7 @@
<CTabs add-tab-classes="mt-1"> <CTabs add-tab-classes="mt-1">
<CTab active> <CTab active>
<template slot="title"> <template slot="title">
<i class="cui-calculator"></i> {{tabs[0]}} <CIcon name="cil-calculator"/> {{tabs[0]}}
</template> </template>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -135,7 +135,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="cui-basket-loaded"></i> {{tabs[1]}} <CIcon name="cil-basket"/> {{tabs[1]}}
</template> </template>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -145,7 +145,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="cui-pie-chart"></i> {{tabs[2]}} <CIcon name="cil-chart-pie"/> {{tabs[2]}}
</template> </template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -163,10 +163,10 @@
Tabs vertical Tabs vertical
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CTabs pills vertical> <CTabs variant="pills" vertical>
<CTab active> <CTab active>
<template slot="title"> <template slot="title">
<i class="cui-calculator"></i> {{tabs[0]}} <CIcon name="cil-calculator"/> {{tabs[0]}}
</template> </template>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -176,7 +176,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="cui-basket-loaded"></i> {{tabs[1]}} <CIcon name="cil-basket"/> {{tabs[1]}}
</template> </template>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -186,7 +186,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="cui-pie-chart"></i> {{tabs[2]}} <CIcon name="cil-chart-pie"/> {{tabs[2]}}
</template> </template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
src/views/base/Tooltips.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Tooltips </strong> <strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small> <small><code>v-c-tooltip</code> directive</small>
<div class="card-header-actions"> <div class="card-header-actions">
@@ -43,7 +43,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Tooltips </strong> <strong> Tooltips </strong>
<small>placement</small> <small>placement</small>
</CCardHeader> </CCardHeader>
src/views/buttons/BrandButtons.vue
+8 -11
View File
@@ -31,7 +31,7 @@
:key="key" :key="key"
:color="brandName" :color="brandName"
> >
<CIcon size="sm" :name="brandName"/> <CIcon size="sm" :name="'cib-' + brandName"/>
<span>{{brandName}}</span> <span>{{brandName}}</span>
</CButton> </CButton>
</template> </template>
@@ -44,7 +44,7 @@
:key="key" :key="key"
:color="brandName" :color="brandName"
> >
<CIcon :name="brandName"/> <CIcon :name="'cib-' + brandName"/>
<span>{{brandName}}</span> <span>{{brandName}}</span>
</CButton> </CButton>
</template> </template>
@@ -58,7 +58,7 @@
:key="key" :key="key"
:color="brandName" :color="brandName"
> >
<CIcon size="lg" :name="brandName"/> <CIcon size="lg" :name="'cib-' + brandName"/>
<span>{{brandName}}</span> <span>{{brandName}}</span>
</CButton> </CButton>
</template> </template>
@@ -84,7 +84,7 @@
:key="key" :key="key"
:color="brandName" :color="brandName"
> >
<CIcon size="sm" :name="brandName"/> <CIcon size="sm" :name="'cib-' + brandName"/>
</CButton> </CButton>
</template> </template>
</p> </p>
@@ -96,7 +96,7 @@
:key="key" :key="key"
:color="brandName" :color="brandName"
> >
<CIcon :name="brandName"/> <CIcon :name="'cib-' + brandName"/>
</CButton> </CButton>
</template> </template>
</p> </p>
@@ -109,7 +109,7 @@
:key="key" :key="key"
:color="brandName" :color="brandName"
> >
<CIcon size="lg" :name="brandName"/> <CIcon size="lg" :name="'cib-' + brandName"/>
</CButton> </CButton>
</template> </template>
</p> </p>
@@ -132,7 +132,6 @@
<p> <p>
<template v-for="(brandName, key) in $options.brands"> <template v-for="(brandName, key) in $options.brands">
<CButton <CButton
:name="brandName"
size="sm" size="sm"
:key="key" :key="key"
:color="brandName" :color="brandName"
@@ -145,7 +144,6 @@
<p> <p>
<template v-for="(brandName, key) in $options.brands"> <template v-for="(brandName, key) in $options.brands">
<CButton <CButton
:name="brandName"
:key="key" :key="key"
:color="brandName" :color="brandName"
> >
@@ -157,7 +155,6 @@
<p> <p>
<template v-for="(brandName, key) in $options.brands"> <template v-for="(brandName, key) in $options.brands">
<CButton <CButton
:name="brandName"
size="lg" size="lg"
:key="key" :key="key"
:color="brandName" :color="brandName"
@@ -176,8 +173,8 @@
export default { export default {
name: 'BrandButtons', name: 'BrandButtons',
usage: '<CButton color="facebook"><span>Facebook</span></CButton>', usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>', iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
textOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>', textOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
brands: [ brands: [
'facebook', 'facebook',
'twitter', 'twitter',
src/views/buttons/ButtonGroups.vue
+8 -8
View File
@@ -3,7 +3,7 @@
<CCol col="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap button group</strong> <strong> Bootstrap button group</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -41,7 +41,7 @@
<CCol col="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Button group </strong>sizing <strong> Button group </strong>sizing
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -70,7 +70,7 @@
<CCol col="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support <CIcon name="cil-justify-center"/><strong> Button group </strong>dropdown support
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<div> <div>
@@ -98,7 +98,7 @@
<CCol col="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Button group </strong>vertical variation <strong> Button group </strong>vertical variation
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -115,7 +115,7 @@
<CCol col="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Button toolbar </strong> <strong> Button toolbar </strong>
<small>with button groups</small> <small>with button groups</small>
<!-- <div class="card-header-actions"> <!-- <div class="card-header-actions">
@@ -152,17 +152,17 @@
<CInput <CInput
class="mb-0 w-25 mx-1" class="mb-0 w-25 mx-1"
size="sm" size="sm"
prepend-html="$" append=".00"
append-html=".00"
value="100" value="100"
prepend="$"
/> />
<CSelect <CSelect
class="mb-0 w-25 mx-1" class="mb-0 w-25 mx-1"
size="sm" size="sm"
prepend-html="Size"
value="Medium" value="Medium"
:options="['Large','Medium','Small']" :options="['Large','Medium','Small']"
custom custom
prepend="Size"
/> />
<CButtonGroup size="sm" class="mx-1"> <CButtonGroup size="sm" class="mx-1">
<CButton color="secondary">Save</CButton> <CButton color="secondary">Save</CButton>
src/views/buttons/Dropdowns.vue
+6 -6
View File
@@ -4,7 +4,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Dropdown</strong> <strong> Bootstrap Dropdown</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -69,7 +69,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Dropdown </strong> <strong> Dropdown </strong>
<small>positioning</small> <small>positioning</small>
</CCardHeader> </CCardHeader>
@@ -140,7 +140,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Dropdown </strong> <strong> Dropdown </strong>
<small>hidden caret</small> <small>hidden caret</small>
</CCardHeader> </CCardHeader>
@@ -165,7 +165,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Dropdown </strong> <strong> Dropdown </strong>
<small>sizing</small> <small>sizing</small>
</CCardHeader> </CCardHeader>
@@ -222,7 +222,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Dropdown </strong> <strong> Dropdown </strong>
<small>headers and accessibility</small> <small>headers and accessibility</small>
</CCardHeader> </CCardHeader>
@@ -254,7 +254,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Dropdown </strong> <strong> Dropdown </strong>
<small><code>color</code></small> <small><code>color</code></small>
</CCardHeader> </CCardHeader>
src/views/buttons/StandardButtons.vue
+106 -106
View File
@@ -119,35 +119,35 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p> <p>
Use <code>outline</code> prop Use <code>variant="outline"</code> prop
</p> </p>
<CRow class="align-items-center"> <CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Normal Normal
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="primary">Primary</CButton> <CButton block variant="outline" color="primary">Primary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="secondary">Secondary</CButton> <CButton block variant="outline" color="secondary">Secondary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="success">Success</CButton> <CButton block variant="outline" color="success">Success</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="warning">Warning</CButton> <CButton block variant="outline" color="warning">Warning</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="danger">Danger</CButton> <CButton block variant="outline" color="danger">Danger</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="info">Info</CButton> <CButton block variant="outline" color="info">Info</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="light">Light</CButton> <CButton block variant="outline" color="light">Light</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="dark">Dark</CButton> <CButton block variant="outline" color="dark">Dark</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow> </CRow>
@@ -156,28 +156,28 @@
Active State Active State
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline color="primary" aria-pressed="true">Primary</CButton> <CButton block pressed variant="outline" color="primary" aria-pressed="true">Primary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline color="secondary" aria-pressed="true">Secondary</CButton> <CButton block pressed variant="outline" color="secondary" aria-pressed="true">Secondary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline color="success" aria-pressed="true">Success</CButton> <CButton block pressed variant="outline" color="success" aria-pressed="true">Success</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline color="warning" aria-pressed="true">Warning</CButton> <CButton block pressed variant="outline" color="warning" aria-pressed="true">Warning</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline color="danger" aria-pressed="true">Danger</CButton> <CButton block pressed variant="outline" color="danger" aria-pressed="true">Danger</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline color="info" aria-pressed="true">Info</CButton> <CButton block pressed variant="outline" color="info" aria-pressed="true">Info</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline color="light" aria-pressed="true">Light</CButton> <CButton block pressed variant="outline" color="light" aria-pressed="true">Light</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline color="dark" aria-pressed="true">Dark</CButton> <CButton block pressed variant="outline" color="dark" aria-pressed="true">Dark</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow> </CRow>
@@ -186,28 +186,28 @@
Disabled Disabled
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="primary" disabled>Primary</CButton> <CButton block variant="outline" color="primary" disabled>Primary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="secondary" disabled>Secondary</CButton> <CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="success" disabled>Success</CButton> <CButton block variant="outline" color="success" disabled>Success</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="warning" disabled>Warning</CButton> <CButton block variant="outline" color="warning" disabled>Warning</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="danger" disabled>Danger</CButton> <CButton block variant="outline" color="danger" disabled>Danger</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="info" disabled>Info</CButton> <CButton block variant="outline" color="info" disabled>Info</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="light" disabled>Light</CButton> <CButton block variant="outline" color="light" disabled>Light</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="dark" disabled>Dark</CButton> <CButton block variant="outline" color="dark" disabled>Dark</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow> </CRow>
@@ -220,35 +220,35 @@
<CCardBody> <CCardBody>
<p> <p>
Use Use
<code>ghost</code> prop for ghost buttons. <code>variant="ghost"</code> prop for ghost buttons.
</p> </p>
<CRow class="align-items-center"> <CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Normal Normal
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="primary">Primary</CButton> <CButton block variant="ghost" color="primary">Primary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="secondary">Secondary</CButton> <CButton block variant="ghost" color="secondary">Secondary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="success">Success</CButton> <CButton block variant="ghost" color="success">Success</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="warning">Warning</CButton> <CButton block variant="ghost" color="warning">Warning</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="danger">Danger</CButton> <CButton block variant="ghost" color="danger">Danger</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="info">Info</CButton> <CButton block variant="ghost" color="info">Info</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="light">Light</CButton> <CButton block variant="ghost" color="light">Light</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="dark">Dark</CButton> <CButton block variant="ghost" color="dark">Dark</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow> </CRow>
@@ -257,28 +257,28 @@
Active State Active State
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost color="primary" aria-pressed="true">Primary</CButton> <CButton block pressed variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost color="secondary" aria-pressed="true">Secondary</CButton> <CButton block pressed variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost color="success" aria-pressed="true">Success</CButton> <CButton block pressed variant="ghost" color="success" aria-pressed="true">Success</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost color="warning" aria-pressed="true">Warning</CButton> <CButton block pressed variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost color="danger" aria-pressed="true">Danger</CButton> <CButton block pressed variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost color="info" aria-pressed="true">Info</CButton> <CButton block pressed variant="ghost" color="info" aria-pressed="true">Info</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost color="light" aria-pressed="true">Light</CButton> <CButton block pressed variant="ghost" color="light" aria-pressed="true">Light</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost color="dark" aria-pressed="true">Dark</CButton> <CButton block pressed variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow> </CRow>
@@ -287,28 +287,28 @@
Disabled Disabled
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="primary" disabled>Primary</CButton> <CButton block variant="ghost" color="primary" disabled>Primary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="secondary" disabled>Secondary</CButton> <CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="success" disabled>Success</CButton> <CButton block variant="ghost" color="success" disabled>Success</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="warning" disabled>Warning</CButton> <CButton block variant="ghost" color="warning" disabled>Warning</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="danger" disabled>Danger</CButton> <CButton block variant="ghost" color="danger" disabled>Danger</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="info" disabled>Info</CButton> <CButton block variant="ghost" color="info" disabled>Info</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="light" disabled>Light</CButton> <CButton block variant="ghost" color="light" disabled>Light</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="dark" disabled>Dark</CButton> <CButton block variant="ghost" color="dark" disabled>Dark</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow> </CRow>
@@ -435,31 +435,31 @@
Normal Normal
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="primary" pill>Primary</CButton> <CButton block color="primary" shape="pill">Primary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="secondary" pill>Secondary</CButton> <CButton block color="secondary" shape="pill">Secondary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="success" pill>Success</CButton> <CButton block color="success" shape="pill">Success</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="warning" pill>Warning</CButton> <CButton block color="warning" shape="pill">Warning</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="danger" pill>Danger</CButton> <CButton block color="danger" shape="pill">Danger</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="info" pill>Info</CButton> <CButton block color="info" shape="pill">Info</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="light" pill>Light</CButton> <CButton block color="light" shape="pill">Light</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="dark" pill>Dark</CButton> <CButton block color="dark" shape="pill">Dark</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="link" pill>Link</CButton> <CButton block color="link" shape="pill">Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <CRow class="align-items-center mt-3">
@@ -467,31 +467,31 @@
Active State Active State
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="primary" pill aria-pressed="true">Primary</CButton> <CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="secondary" pill aria-pressed="true">Secondary</CButton> <CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="success" pill aria-pressed="true">Success</CButton> <CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="warning" pill aria-pressed="true">Warning</CButton> <CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="danger" pill aria-pressed="true">Danger</CButton> <CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="info" pill aria-pressed="true">Info</CButton> <CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="light" pill aria-pressed="true">Light</CButton> <CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="dark" pill aria-pressed="true">Dark</CButton> <CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="link" pill aria-pressed="true">Link</CButton> <CButton pressed block color="link" shape="pill" aria-pressed="true">Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <CRow class="align-items-center mt-3">
@@ -499,31 +499,31 @@
Disabled Disabled
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="primary" pill disabled>Primary</CButton> <CButton block color="primary" shape="pill" disabled>Primary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="secondary" pill disabled>Secondary</CButton> <CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="success" pill disabled>Success</CButton> <CButton block color="success" shape="pill" disabled>Success</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="warning" pill disabled>Warning</CButton> <CButton block color="warning" shape="pill" disabled>Warning</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="danger" pill disabled>Danger</CButton> <CButton block color="danger" shape="pill" disabled>Danger</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="info" pill disabled>Info</CButton> <CButton block color="info" shape="pill" disabled>Info</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="light" pill disabled>Light</CButton> <CButton block color="light" shape="pill" disabled>Light</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="dark" pill disabled>Dark</CButton> <CButton block color="dark" shape="pill" disabled>Dark</CButton>
</CCol> </CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="link" pill disabled>Link</CButton> <CButton block color="link" shape="pill" disabled>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody> </CCardBody>
@@ -542,16 +542,16 @@
<CButton color="primary" size="sm">Standard Button</CButton> <CButton color="primary" size="sm">Standard Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline color="secondary" size="sm">Outline Button</CButton> <CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton size="sm" ghost color="success">Ghost Button</CButton> <CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="warning" size="sm" square>Square Button</CButton> <CButton color="warning" size="sm" square>Square Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="danger" size="sm" pill>Pill Button</CButton> <CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <CRow class="align-items-center mt-3">
@@ -562,16 +562,16 @@
<CButton color="primary">Standard Button</CButton> <CButton color="primary">Standard Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline color="secondary">Outline Button</CButton> <CButton variant="outline" color="secondary">Outline Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost color="success">Ghost Button</CButton> <CButton variant="ghost" color="success">Ghost Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="warning" square>Square Button</CButton> <CButton color="warning" square>Square Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="danger" pill>Pill Button</CButton> <CButton color="danger" shape="pill">Pill Button</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <CRow class="align-items-center mt-3">
@@ -582,16 +582,16 @@
<CButton color="primary" size="lg">Standard Button</CButton> <CButton color="primary" size="lg">Standard Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline color="secondary" size="lg">Outline Button</CButton> <CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost color="success" size="lg">Ghost Button</CButton> <CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="warning" size="lg" square>Square Button</CButton> <CButton color="warning" size="lg" square>Square Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center"> <CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="danger" size="lg" pill>Pill Button</CButton> <CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody> </CCardBody>
@@ -604,27 +604,27 @@
<CRow class="align-items-center"> <CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton color="primary"> <CButton color="primary">
<i class="cui-lightbulb"></i>&nbsp;Standard Button <CIcon name="cil-lightbulb"/>&nbsp;Standard Button
</CButton> </CButton>
</CCol> </CCol>
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton color="secondary" outline> <CButton color="secondary" variant="outline">
<i class="cui-lightbulb"></i>&nbsp;Outline Button <CIcon name="cil-lightbulb"/>&nbsp;Outline Button
</CButton> </CButton>
</CCol> </CCol>
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton color="success"> <CButton color="success">
<i class="cui-lightbulb"></i>&nbsp;Ghost Button <CIcon name="cil-lightbulb"/>&nbsp;Ghost Button
</CButton> </CButton>
</CCol> </CCol>
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton color="warning" square> <CButton color="warning" square>
<i class="cui-lightbulb"></i>&nbsp;Square Button <CIcon name="cil-lightbulb"/>&nbsp;Square Button
</CButton> </CButton>
</CCol> </CCol>
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton color="danger" pill> <CButton color="danger" shape="pill">
<i class="cui-lightbulb"></i>&nbsp;Pill Button <CIcon name="cil-lightbulb"/>&nbsp;Pill Button
</CButton> </CButton>
</CCol> </CCol>
</CRow> </CRow>
@@ -637,22 +637,22 @@
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton outline color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton> <CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </CCol>
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton outline color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton> <CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </CCol>
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton outline color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton> <CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </CCol>
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton outline color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton> <CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </CCol>
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton outline color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton> <CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </CCol>
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton outline color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton> <CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody> </CCardBody>
@@ -680,13 +680,13 @@
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small> <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CButton size="lg" outline color="secondary" block>Block level button</CButton> <CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
<CButton size="lg" outline color="primary" block>Block level button</CButton> <CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
<CButton size="lg" outline color="success" block>Block level button</CButton> <CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
<CButton size="lg" outline color="info" block>Block level button</CButton> <CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
<CButton size="lg" outline color="warning" block>Block level button</CButton> <CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
<CButton size="lg" outline color="danger" block>Block level button</CButton> <CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
<CButton size="lg" ghost color="info" block>Block level button</CButton> <CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
src/views/charts/CChartBarExample.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</template> </template>
<script> <script>
import { CChartBar } from '@coreui/coreui-chartjs/vue' import { CChartBar } from '@coreui/coreui-vue-chartjs'
export default { export default {
name: 'CChartBarExample', name: 'CChartBarExample',
src/views/charts/CChartBarSimple.vue
+1 -1
View File
@@ -7,7 +7,7 @@
</template> </template>
<script> <script>
import { CChartBar } from '@coreui/coreui-chartjs/vue' import { CChartBar } from '@coreui/coreui-vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities' import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
export default { export default {
name: 'CChartBarSimple', name: 'CChartBarSimple',
src/views/charts/CChartDoughnutExample.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</template> </template>
<script> <script>
import { CChartDoughnut } from '@coreui/coreui-chartjs/vue' import { CChartDoughnut } from '@coreui/coreui-vue-chartjs'
export default { export default {
name: 'CChartDoughnutExample', name: 'CChartDoughnutExample',
src/views/charts/CChartLineExample.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</template> </template>
<script> <script>
import { CChartLine } from '@coreui/coreui-chartjs/vue' import { CChartLine } from '@coreui/coreui-vue-chartjs'
export default { export default {
name: 'CChartLineExample', name: 'CChartLineExample',
src/views/charts/CChartLineSimple.vue
+1 -1
View File
@@ -7,7 +7,7 @@
</template> </template>
<script> <script>
import { CChartLine } from '@coreui/coreui-chartjs/vue' import { CChartLine } from '@coreui/coreui-vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities' import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
export default { export default {
name: 'CChartLineSimple', name: 'CChartLineSimple',
src/views/charts/CChartPieExample.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</template> </template>
<script> <script>
import { CChartPie } from '@coreui/coreui-chartjs/vue' import { CChartPie } from '@coreui/coreui-vue-chartjs'
export default { export default {
name: 'CChartPieExample', name: 'CChartPieExample',
src/views/charts/CChartPolarAreaExample.vue
+1 -1
View File
@@ -10,7 +10,7 @@
</template> </template>
<script> <script>
import { CChartPolarArea } from '@coreui/coreui-chartjs/vue' import { CChartPolarArea } from '@coreui/coreui-vue-chartjs'
export default { export default {
name: 'CChartPolarAreaExample', name: 'CChartPolarAreaExample',
src/views/charts/CChartRadarExample.vue
+1 -1
View File
@@ -10,7 +10,7 @@
</template> </template>
<script> <script>
import { CChartRadar } from '@coreui/coreui-chartjs/vue' import { CChartRadar } from '@coreui/coreui-vue-chartjs'
export default { export default {
name: 'CChartRadarExample', name: 'CChartRadarExample',
src/views/charts/Charts.vue
+26 -16
View File
@@ -19,29 +19,39 @@
<CChartLineExample/> <CChartLineExample/>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard header-html="Bar Chart" body-wrapper> <CCard>
<CChartBarExample/> <CCardHeader>Bar Chart</CCardHeader>
<CCardBody><CChartBarExample/></CCardBody>
</CCard> </CCard>
<CCard header-html="Doughnut Chart" body-wrapper> <CCard>
<CChartDoughnutExample/> <CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody><CChartDoughnutExample/></CCardBody>
</CCard> </CCard>
<CCard header-html="Radar Chart" body-wrapper> <CCard>
<CChartRadarExample/> <CCardHeader>Radar Chart</CCardHeader>
<CCardBody><CChartRadarExample/></CCardBody>
</CCard> </CCard>
<CCard header-html="Pie Chart" body-wrapper> <CCard>
<CChartPieExample/> <CCardHeader>Pie Chart</CCardHeader>
<CCardBody><CChartPieExample/></CCardBody>
</CCard> </CCard>
<CCard header-html="Polar Area Chart" body-wrapper> <CCard>
<CChartPolarAreaExample/> <CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody><CChartPolarAreaExample/></CCardBody>
</CCard> </CCard>
<CCard header-html="Simple line chart" body-wrapper> <CCard>
<CChartLineSimple border-color="success" labels="months"/> <CCardHeader>Simple line chart</CCardHeader>
<CCardBody>
<CChartLineSimple border-color="success" labels="months"/>
</CCardBody>
</CCard> </CCard>
<CCard header-html="Simple pointed chart" body-wrapper> <CCard>
<CChartLineSimple pointed border-color="warning"/> <CCardHeader>Simple pointed chart</CCardHeader>
<CCardBody><CChartLineSimple pointed border-color="warning"/></CCardBody>
</CCard> </CCard>
<CCard header-html="Simple bar chart" body-wrapper> <CCard>
<CChartBarSimple background-color="danger"/> <CCardHeader>Simple bar chart</CCardHeader>
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
</CCard> </CCard>
</CCardGroup> </CCardGroup>
</div> </div>
src/views/charts/MainChartExample.vue
+1 -1
View File
@@ -7,7 +7,7 @@
</template> </template>
<script> <script>
import { CChartLine } from '@coreui/coreui-chartjs/vue' import { CChartLine } from '@coreui/coreui-vue-chartjs'
import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities' import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
function random (min, max) { function random (min, max) {
src/views/icons/Brands.vue
+3 -3
View File
@@ -2,7 +2,7 @@
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="cui-globe"></i>Font Awesome brand icons <CIcon name="cil-globe-alt"/>Brand icons
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
@@ -13,7 +13,7 @@
sm="2" sm="2"
:key="brandName" :key="brandName"
> >
<CIcon :height="42" :content="$options.brands[brandName]"/> <CIcon :height="42" :content="brand"/>
<div>{{brandName}}</div> <div>{{brandName}}</div>
</CCol> </CCol>
</template> </template>
@@ -24,7 +24,7 @@
</template> </template>
<script> <script>
import { iconSet as brands } from '@coreui/icons/brands' import { brandSet as brands } from '@coreui/icons'
export default { export default {
name: 'Brands', name: 'Brands',
brands brands
src/views/icons/CoreUIIcons.vue
+15 -413
View File
@@ -1,8 +1,9 @@
<template> <template>
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="cui-pencil"></i>CoreUI Icons <CIcon :content="$options.freeSet.pencil"/>CoreUI Icons
<CBadge color="info">New</CBadge> <CBadge color="info">New</CBadge>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -16,427 +17,28 @@
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<!-- <CRow class="text-center mb-5"> <CRow class="text-center">
<template v-for="(name, key) in $options.iconNames"> <template v-for="(icon, iconName) in $options.freeSet">
<CCol :key="key" col="6" sm="4" md="3" xl="2"> <CCol
<CIcon :name="name" width="24" class="mt-4"/> class="mb-5"
<div>{{name}}</div> col="3"
sm="2"
:key="iconName"
>
<CIcon :height="42" :content="icon"/>
<div>{{iconName}}</div>
</CCol> </CCol>
</template> </template>
</CRow> </CRow>
-->
<CRow class="text-center ">
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-account-logout icons font-2xl d-block mt-4"></i>
<div>account-logout</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-action-redo icons font-2xl d-block mt-4"></i>
<div>action-redo</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-action-undo icons font-2xl d-block mt-4"></i>
<div>action-undo</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-center icons font-2xl d-block mt-4"></i>
<div>align-center</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-left icons font-2xl d-block mt-4"></i>
<div>align-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-right icons font-2xl d-block mt-4"></i>
<div>align-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
<div>arrow-bottom</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
<div>arrow-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
<div>arrow-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
<div>arrow-top</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-ban icons font-2xl d-block mt-4"></i>
<div>ban</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
<div>basket-loaded</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bell icons font-2xl d-block mt-4"></i>
<div>bell</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bold icons font-2xl d-block mt-4"></i>
<div>bold</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bookmark icons font-2xl d-block mt-4"></i>
<div>bookmark</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-briefcase icons font-2xl d-block mt-4"></i>
<div>briefcase</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-british-pound icons font-2xl d-block mt-4"></i>
<div>british-pound</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-brush icons font-2xl d-block mt-4"></i>
<div>brush</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-calculator icons font-2xl d-block mt-4"></i>
<div>calculator</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-calendar icons font-2xl d-block mt-4"></i>
<div>calendar</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cart icons font-2xl d-block mt-4"></i>
<div>cart</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chart icons font-2xl d-block mt-4"></i>
<div>chart</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-check icons font-2xl d-block mt-4"></i>
<div>check</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
<div>chevron-bottom</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
<div>chevron-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
<div>chevron-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
<div>chevron-top</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-circle-check icons font-2xl d-block mt-4"></i>
<div>circle-check</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-circle-x icons font-2xl d-block mt-4"></i>
<div>circle-x</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud icons font-2xl d-block mt-4"></i>
<div>cloud</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
<div>cloud-download</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
<div>cloud-upload</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-code icons font-2xl d-block mt-4"></i>
<div>code</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cog icons font-2xl d-block mt-4"></i>
<div>cog</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-comment-square icons font-2xl d-block mt-4"></i>
<div>comment-square</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-credit-card icons font-2xl d-block mt-4"></i>
<div>credit-card</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cursor icons font-2xl d-block mt-4"></i>
<div>cursor</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-dashboard icons font-2xl d-block mt-4"></i>
<div>dashboard</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-delete icons font-2xl d-block mt-4"></i>
<div>delete</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-dollar icons font-2xl d-block mt-4"></i>
<div>dollar</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-drop icons font-2xl d-block mt-4"></i>
<div>drop</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
<div>envelope-closed</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
<div>envelope-letter</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
<div>envelope-open</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-euro icons font-2xl d-block mt-4"></i>
<div>euro</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-file icons font-2xl d-block mt-4"></i>
<div>file</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-globe icons font-2xl d-block mt-4"></i>
<div>globe</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-graph icons font-2xl d-block mt-4"></i>
<div>graph</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-home icons font-2xl d-block mt-4"></i>
<div>home</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-inbox icons font-2xl d-block mt-4"></i>
<div>inbox</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-info icons font-2xl d-block mt-4"></i>
<div>info</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-italic icons font-2xl d-block mt-4"></i>
<div>italic</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-center icons font-2xl d-block mt-4"></i>
<div>justify-center</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-left icons font-2xl d-block mt-4"></i>
<div>justify-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-right icons font-2xl d-block mt-4"></i>
<div>justify-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-laptop icons font-2xl d-block mt-4"></i>
<div>laptop</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-layers icons font-2xl d-block mt-4"></i>
<div>layers</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
<div>lightbulb</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-list icons font-2xl d-block mt-4"></i>
<div>list</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-location-pin icons font-2xl d-block mt-4"></i>
<div>location-pin</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
<div>lock-locked</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
<div>lock-unlocked</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
<div>magnifying-glass</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-map icons font-2xl d-block mt-4"></i>
<div>map</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-monitor icons font-2xl d-block mt-4"></i>
<div>monitor</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-moon icons font-2xl d-block mt-4"></i>
<div>moon</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-note icons font-2xl d-block mt-4"></i>
<div>note</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-options icons font-2xl d-block mt-4"></i>
<div>options</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-paperclip icons font-2xl d-block mt-4"></i>
<div>paperclip</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-pencil icons font-2xl d-block mt-4"></i>
<div>pencil</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-people icons font-2xl d-block mt-4"></i>
<div>people</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-phone icons font-2xl d-block mt-4"></i>
<div>phone</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
<div>pie-chart</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-print icons font-2xl d-block mt-4"></i>
<div>print</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-puzzle icons font-2xl d-block mt-4"></i>
<div>puzzle</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-rss icons font-2xl d-block mt-4"></i>
<div>rss</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
<div>screen-desktop</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
<div>screen-smartphone</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-settings icons font-2xl d-block mt-4"></i>
<div>settings</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-share icons font-2xl d-block mt-4"></i>
<div>share</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-shield icons font-2xl d-block mt-4"></i>
<div>shield</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
<div>sort-ascending</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
<div>sort-descending</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-speech icons font-2xl d-block mt-4"></i>
<div>speech</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-speedometer icons font-2xl d-block mt-4"></i>
<div>speedometer</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-star icons font-2xl d-block mt-4"></i>
<div>star</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sun icons font-2xl d-block mt-4"></i>
<div>sun</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-tablet icons font-2xl d-block mt-4"></i>
<div>tablet</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-tags icons font-2xl d-block mt-4"></i>
<div>tags</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-task icons font-2xl d-block mt-4"></i>
<div>task</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
<div>thumb-down</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
<div>thumb-up</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-trash icons font-2xl d-block mt-4"></i>
<div>trash</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-underline icons font-2xl d-block mt-4"></i>
<div>underline</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user icons font-2xl d-block mt-4"></i>
<div>user</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-female icons font-2xl d-block mt-4"></i>
<div>user-female</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-follow icons font-2xl d-block mt-4"></i>
<div>user-follow</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
<div>user-unfollow</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-wrench icons font-2xl d-block mt-4"></i>
<div>wrench</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-yen icons font-2xl d-block mt-4"></i>
<div>yen</div>
</CCol>
</CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
</div> </div>
</template> </template>
<script>
// import { iconSet } from '@coreui/icons'
// const iconNames = Object.keys(iconSet)
<script>
import { freeSet } from '@coreui/icons'
export default { export default {
name: 'CoreUIIcons', name: 'CoreUIIcons',
// iconNames, freeSet
} }
</script> </script>
src/views/icons/Flags.vue
+6 -6
View File
@@ -2,7 +2,7 @@
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="cui-globe"></i> Flags <CIcon name="cil-globe-alt"/> Flags
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
@@ -20,8 +20,8 @@
sm="2" sm="2"
:key="key" :key="key"
> >
<CIcon :height="42" :content="$options.iconSet[flag]"/> <CIcon :height="42" :content="flag"/>
<div>{{flag}}</div> <div>{{key}}</div>
</CCol> </CCol>
</template> </template>
</CRow> </CRow>
@@ -31,15 +31,15 @@
</template> </template>
<script> <script>
import { iconSet } from '@coreui/icons/flags' import { flagSet } from '@coreui/icons'
export default { export default {
name: 'Flags', name: 'Flags',
iconSet, flagSet,
computed: { computed: {
// Avoid duplication caused by displaying 1x1 and 4x3 formats // Avoid duplication caused by displaying 1x1 and 4x3 formats
// (adding Q to name makes icon quadratic) // (adding Q to name makes icon quadratic)
displayedFlags () { displayedFlags () {
return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q')) return this.$options.flagSet
} }
} }
} }
src/views/notifications/Alerts.vue
+7 -17
View File
@@ -3,7 +3,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Alert</strong> <strong> Bootstrap Alert</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -34,7 +34,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Alert <CIcon name="cil-justify-center"/> Alert
<small> use <code>.alert-link</code> to provide links</small> <small> use <code>.alert-link</code> to provide links</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -72,7 +72,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small> <CIcon name="cil-justify-center"/> Alerts <small>with additional content</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CAlert show color="success"> <CAlert show color="success">
@@ -93,7 +93,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <CIcon name="cil-justify-center"/> Alerts
<small>dismissible</small> <small>dismissible</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -107,16 +107,7 @@
<CAlert <CAlert
color="secondary" color="secondary"
closeButton
fade
:show.sync="alert2" :show.sync="alert2"
>
Dismissible Alert with fade effect!
</CAlert>
<CAlert
color="secondary"
:show.sync="alert3"
class="alert-dismissible" class="alert-dismissible"
> >
Dismissible Alert with custom button! Dismissible Alert with custom button!
@@ -124,7 +115,7 @@
class="position-absolute" class="position-absolute"
color="secondary" color="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);" style="right:10px;top: 50%;transform: translateY(-50%);"
@click="alert3 = false" @click="alert2 = false"
> >
Close Close
</CButton> </CButton>
@@ -140,7 +131,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <CIcon name="cil-justify-center"/> Alerts
<small>auto dismissible</small> <small>auto dismissible</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -186,8 +177,7 @@ export default {
dismissSecs: 10, dismissSecs: 10,
dismissCountDown: 10, dismissCountDown: 10,
alert1: true, alert1: true,
alert2: true, alert2: true
alert3: true
} }
}, },
methods: { methods: {
src/views/notifications/Badges.vue
+13 -13
View File
@@ -3,7 +3,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <CIcon name="cil-justify-center"/>
<strong> Bootstrap Badge</strong> <strong> Bootstrap Badge</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
@@ -34,7 +34,7 @@
<CCol col="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Badge <CIcon name="cil-justify-center"/> Badge
<small>contextual variations</small> <small>contextual variations</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -50,23 +50,23 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Badge <CIcon name="cil-justify-center"/> Badge
<small>pills</small> <small>shape="pill"</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBadge pill color="primary">Primary</CBadge> <CBadge shape="pill" color="primary">Primary</CBadge>
<CBadge pill color="secondary">Secondary</CBadge> <CBadge shape="pill" color="secondary">Secondary</CBadge>
<CBadge pill color="success">Success</CBadge> <CBadge shape="pill" color="success">Success</CBadge>
<CBadge pill color="danger">Danger</CBadge> <CBadge shape="pill" color="danger">Danger</CBadge>
<CBadge pill color="warning">Warning</CBadge> <CBadge shape="pill" color="warning">Warning</CBadge>
<CBadge pill color="info">Info</CBadge> <CBadge shape="pill" color="info">Info</CBadge>
<CBadge pill color="light">Light</CBadge> <CBadge shape="pill" color="light">Light</CBadge>
<CBadge pill color="dark">Dark</CBadge> <CBadge shape="pill" color="dark">Dark</CBadge>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Badge <CIcon name="cil-justify-center"/> Badge
<small>actionable</small> <small>actionable</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
src/views/notifications/Modals.vue
+2 -1
View File
@@ -5,7 +5,7 @@
<CCol col="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Bootstrap Modals <CIcon name="cil-justify-center"/> Bootstrap Modals
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Modal" href="https://coreui.io/vue/docs/3.0/components/Modal"
@@ -91,6 +91,7 @@
<CModal <CModal
title="Modal title" title="Modal title"
:show.sync="primaryModal" :show.sync="primaryModal"
color="primary"
> >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
src/views/pages/Login.vue
+9 -5
View File
@@ -9,16 +9,18 @@
<h1>Login</h1> <h1>Login</h1>
<p class="text-muted">Sign In to your account</p> <p class="text-muted">Sign In to your account</p>
<CInput <CInput
prependHtml="<i class='cui-user'></i>"
placeholder="Username" placeholder="Username"
autocomplete="username email" autocomplete="username email"
/> >
<template #prepend-content><CIcon name="cil-user"/></template>
</CInput>
<CInput <CInput
prependHtml="<i class='cui-lock-locked'></i>"
placeholder="Password" placeholder="Password"
type="password" type="password"
autocomplete="curent-password" autocomplete="curent-password"
/> >
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
</CInput>
<CRow> <CRow>
<CCol col="6"> <CCol col="6">
<CButton color="primary" class="px-4">Login</CButton> <CButton color="primary" class="px-4">Login</CButton>
@@ -31,7 +33,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard <CCard
class="text-white text-center bg-primary py-5 d-md-down-none" color="primary"
text-color="white"
class="text-center py-5 d-md-down-none"
style="width:44%" style="width:44%"
body-wrapper body-wrapper
> >
src/views/pages/Page404.vue
+1 -1
View File
@@ -10,9 +10,9 @@
</div> </div>
<CInput <CInput
class="mb-3" class="mb-3"
prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?" placeholder="What are you looking for?"
> >
<template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
<template #append> <template #append>
<CButton color="info">Search</CButton> <CButton color="info">Search</CButton>
</template> </template>
src/views/pages/Page500.vue
+1 -1
View File
@@ -9,9 +9,9 @@
</div> </div>
<CInput <CInput
class="mb-3" class="mb-3"
prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?" placeholder="What are you looking for?"
> >
<template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
<template #append> <template #append>
<CButton color="info">Search</CButton> <CButton color="info">Search</CButton>
</template> </template>
src/views/pages/Register.vue
+10 -7
View File
@@ -9,27 +9,30 @@
<p class="text-muted">Create your account</p> <p class="text-muted">Create your account</p>
<CInput <CInput
placeholder="Username" placeholder="Username"
prependHtml="<i class='cui-user'></i>"
autocomplete="username" autocomplete="username"
/> >
<template #prepend-content><CIcon name="cil-user"/></template>
</CInput>
<CInput <CInput
placeholder="Email" placeholder="Email"
prepend-html="@"
autocomplete="email" autocomplete="email"
prepend="@"
/> />
<CInput <CInput
placeholder="Password" placeholder="Password"
type="password" type="password"
prependHtml="<i class='cui-lock-locked'></i>"
autocomplete="new-password" autocomplete="new-password"
/> >
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
</CInput>
<CInput <CInput
placeholder="Repeat password" placeholder="Repeat password"
type="password" type="password"
prependHtml="<i class='cui-lock-locked'></i>"
autocomplete="new-password" autocomplete="new-password"
class="mb-4" class="mb-4"
/> >
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
</CInput>
<CButton color="success" block>Create Account</CButton> <CButton color="success" block>Create Account</CButton>
</CForm> </CForm>
</CCardBody> </CCardBody>
src/views/theme/Colors.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="cui-drop"></i> Theme colors <CIcon name="cil-drop"/> Theme colors
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
@@ -21,7 +21,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="cui-drop"></i> Grays <CIcon name="cil-drop"/> Grays
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
src/views/users/User.vue
+1 -1
View File
@@ -6,7 +6,7 @@
User id: {{ $route.params.id }} User id: {{ $route.params.id }}
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CTable <CDataTable
striped striped
small small
fixed fixed
src/views/users/Users.vue
+31 -26
View File
@@ -2,32 +2,37 @@
<CRow> <CRow>
<CCol col="12" xl="8"> <CCol col="12" xl="8">
<transition name="slide"> <transition name="slide">
<CCard header-html="Users" body-wrapper> <CCard>
<CTable <CCardHeader>
hover Users
striped </CCardHeader>
:items="items" <CCardBody>
:fields="fields" <CDataTable
:items-per-page="perPage" hover
@row-clicked="rowClicked" striped
:pagination="$options.paginationProps" :items="items"
index-column :fields="fields"
clickable-rows :items-per-page="perPage"
> @row-clicked="rowClicked"
<template #username="data"> :pagination="$options.paginationProps"
<td> index-column
<strong>{{data.item.username}}</strong> clickable-rows
</td> >
</template> <template #username="data">
<td>
<template #status="data"> <strong>{{data.item.username}}</strong>
<td> </td>
<CBadge :color="getBadge(data.item.status)"> </template>
{{data.item.status}}
</CBadge> <template #status="data">
</td> <td>
</template> <CBadge :color="getBadge(data.item.status)">
</CTable> {{data.item.status}}
</CBadge>
</td>
</template>
</CDataTable>
</CCardBody>
</CCard> </CCard>
</transition> </transition>
</CCol> </CCol>
src/views/widgets/Widgets.vue
+37 -87
View File
@@ -103,7 +103,7 @@
text="Income" text="Income"
color="primary" color="primary"
> >
<CIcon name="settings" width="24"/> <CIcon name="cil-settings" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
@@ -112,7 +112,7 @@
text="Income" text="Income"
color="info" color="info"
> >
<CIcon name="laptop" width="24"/> <CIcon name="cil-laptop" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
@@ -121,7 +121,7 @@
text="Income" text="Income"
color="warning" color="warning"
> >
<CIcon name="moon" width="24"/> <CIcon name="cil-moon" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
@@ -130,7 +130,7 @@
text="Income" text="Income"
color="danger" color="danger"
> >
<CIcon name="bell" width="24"/> <CIcon name="cil-bell" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
</CRow> </CRow>
@@ -142,7 +142,7 @@
color="primary" color="primary"
:icon-padding="false" :icon-padding="false"
> >
<CIcon name="settings" width="24"/> <CIcon name="cil-settings" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
@@ -152,7 +152,7 @@
color="info" color="info"
:icon-padding="false" :icon-padding="false"
> >
<CIcon name="laptop" width="24"/> <CIcon name="cil-laptop" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
@@ -162,7 +162,7 @@
color="warning" color="warning"
:icon-padding="false" :icon-padding="false"
> >
<CIcon name="moon" width="24"/> <CIcon name="cil-moon" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
@@ -172,7 +172,7 @@
color="danger" color="danger"
:icon-padding="false" :icon-padding="false"
> >
<CIcon name="bell" width="24"/> <CIcon name="cil-bell" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
</CRow> </CRow>
@@ -184,7 +184,7 @@
color="primary" color="primary"
:icon-padding="false" :icon-padding="false"
> >
<CIcon name="settings" class="mx-5 " width="24"/> <CIcon name="cil-settings" class="mx-5 " width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
@@ -194,7 +194,7 @@
color="info" color="info"
:icon-padding="false" :icon-padding="false"
> >
<CIcon name="laptop" class="mx-5 " width="24"/> <CIcon name="cil-laptop" class="mx-5 " width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
@@ -204,7 +204,7 @@
color="warning" color="warning"
:icon-padding="false" :icon-padding="false"
> >
<CIcon name="moon" class="mx-5 " width="24"/> <CIcon name="cil-moon" class="mx-5 " width="24"/>
<template #footer> <template #footer>
<CCardFooter class="card-footer px-3 py-2"> <CCardFooter class="card-footer px-3 py-2">
<CLink <CLink
@@ -212,7 +212,7 @@
href="https://coreui.io/" href="https://coreui.io/"
> >
View more View more
<CIcon name="arrowRight" class="float-right" width="16"/> <CIcon name="cil-arrowRight" class="float-right" width="16"/>
</CLink> </CLink>
</CCardFooter> </CCardFooter>
</template> </template>
@@ -228,7 +228,7 @@
:icon-padding="false" :icon-padding="false"
link="#" link="#"
> >
<CIcon name="settings" class="mx-5 " width="24"/> <CIcon name="cil-settings" class="mx-5 " width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
@@ -239,7 +239,7 @@
:icon-padding="false" :icon-padding="false"
link="#" link="#"
> >
<CIcon name="laptop" class="mx-5 " width="24"/> <CIcon name="cil-laptop" class="mx-5 " width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
@@ -250,7 +250,7 @@
:icon-padding="false" :icon-padding="false"
link="#" link="#"
> >
<CIcon name="moon" class="mx-5" width="24"/> <CIcon name="cil-moon" class="mx-5" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
</CRow> --> </CRow> -->
@@ -262,34 +262,34 @@
text="Visitors" text="Visitors"
color="info" color="info"
> >
<CIcon name="people" height="36"/> <CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
header="385" header="385"
text="New Clients" text="New Clients"
color="success" color="success"
> >
<CIcon name="userFollow" height="36"/> <CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
header="1238" header="1238"
text="Products sold" text="Products sold"
color="warning" color="warning"
> >
<CIcon name="basketLoaded" height="36"/> <CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
header="28%" header="28%"
text="Returning Visitors" text="Returning Visitors"
> >
<CIcon name="chartPie" height="36"/> <CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
header="5:34:11" header="5:34:11"
text="Avg. Time" text="Avg. Time"
color="danger" color="danger"
> >
<CIcon name="speedometer" height="36"/> <CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCardGroup> </CCardGroup>
<CCardGroup class="mb-4"> <CCardGroup class="mb-4">
@@ -299,7 +299,7 @@
color="info" color="info"
inverse inverse
> >
<CIcon name="people" height="36"/> <CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
header="385" header="385"
@@ -307,7 +307,7 @@
color="success" color="success"
inverse inverse
> >
<CIcon name="userFollow" height="36"/> <CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
header="1238" header="1238"
@@ -315,7 +315,7 @@
color="warning" color="warning"
inverse inverse
> >
<CIcon name="basketLoaded" height="36"/> <CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
header="28%" header="28%"
@@ -323,7 +323,7 @@
color="primary" color="primary"
inverse inverse
> >
<CIcon name="chartPie" height="36"/> <CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
header="5:34:11" header="5:34:11"
@@ -331,7 +331,7 @@
color="danger" color="danger"
inverse inverse
> >
<CIcon name="speedometer" height="36"/> <CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCardGroup> </CCardGroup>
<CRow> <CRow>
@@ -341,7 +341,7 @@
text="Visitors" text="Visitors"
color="info" color="info"
> >
<CIcon name="people" height="36"/> <CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@@ -350,7 +350,7 @@
text="New Clients" text="New Clients"
color="success" color="success"
> >
<CIcon name="userFollow" height="36"/> <CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@@ -359,7 +359,7 @@
text="Products sold" text="Products sold"
color="warning" color="warning"
> >
<CIcon name="basketLoaded" height="36"/> <CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@@ -368,7 +368,7 @@
text="Returning Visitors" text="Returning Visitors"
color="primary" color="primary"
> >
<CIcon name="chartPie" height="36"/> <CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@@ -377,7 +377,7 @@
text="Avg. Time" text="Avg. Time"
color="danger" color="danger"
> >
<CIcon name="speedometer" height="36"/> <CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@@ -386,7 +386,7 @@
text="comments" text="comments"
color="info" color="info"
> >
<CIcon name="speech" height="36"/> <CIcon name="cil-speech" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
</CRow> </CRow>
@@ -398,7 +398,7 @@
color="info" color="info"
inverse inverse
> >
<CIcon name="people" height="36"/> <CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@@ -408,7 +408,7 @@
color="success" color="success"
inverse inverse
> >
<CIcon name="userFollow" height="36"/> <CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@@ -418,7 +418,7 @@
color="warning" color="warning"
inverse inverse
> >
<CIcon name="basketLoaded" height="36"/> <CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@@ -428,7 +428,7 @@
color="primary" color="primary"
inverse inverse
> >
<CIcon name="chartPie" height="36"/> <CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@@ -438,7 +438,7 @@
color="danger" color="danger"
inverse inverse
> >
<CIcon name="speedometer" height="36"/> <CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@@ -448,61 +448,11 @@
color="info" color="info"
inverse inverse
> >
<CIcon name="speech" height="36"/> <CIcon name="cil-speech" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
</CRow> </CRow>
<WidgetsDropdown/> <WidgetsDropdown/>
<CRow>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="primary"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="success"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="danger"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="warning"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
</CRow>
<CRow> <CRow>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123"> <CWidgetSimple header="title" text="1,123">
src/views/widgets/WidgetsBrand.vue
+8 -8
View File
@@ -10,7 +10,7 @@
left-footer="feeds" left-footer="feeds"
> >
<CIcon <CIcon
name="facebook" name="cib-facebook"
height="52" height="52"
class="my-4" class="my-4"
/> />
@@ -32,7 +32,7 @@
left-footer="tweets" left-footer="tweets"
> >
<CIcon <CIcon
name="twitter" name="cib-twitter"
height="52" height="52"
class="my-4" class="my-4"
/> />
@@ -54,7 +54,7 @@
left-footer="feeds" left-footer="feeds"
> >
<CIcon <CIcon
name="linkedin" name="cib-linkedin"
height="52" height="52"
class="my-4" class="my-4"
/> />
@@ -76,7 +76,7 @@
color="warning" color="warning"
> >
<CIcon <CIcon
name="calendar" name="cil-calendar"
height="52" height="52"
class="my-4" class="my-4"
/> />
@@ -100,7 +100,7 @@
left-footer="feeds" left-footer="feeds"
> >
<CIcon <CIcon
name="facebook" name="cib-facebook"
height="56" height="56"
class="my-4" class="my-4"
/> />
@@ -115,7 +115,7 @@
left-footer="tweets" left-footer="tweets"
> >
<CIcon <CIcon
name="twitter" name="cib-twitter"
height="56" height="56"
class="my-4" class="my-4"
/> />
@@ -130,7 +130,7 @@
left-footer="feeds" left-footer="feeds"
> >
<CIcon <CIcon
name="linkedin" name="cib-linkedin"
height="56" height="56"
class="my-4" class="my-4"
/> />
@@ -145,7 +145,7 @@
color="warning" color="warning"
> >
<CIcon <CIcon
name="calendar" name="cil-calendar"
height="56" height="56"
class="my-4" class="my-4"
/> />
src/views/widgets/WidgetsDropdown.vue
+4 -5
View File
@@ -9,7 +9,7 @@
placement="bottom-end" placement="bottom-end"
> >
<template #toggler-content> <template #toggler-content>
<i class="cui-settings"></i> <CIcon name="cil-settings"/>
</template> </template>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -38,10 +38,9 @@
color="transparent p-0" color="transparent p-0"
placement="bottom-end" placement="bottom-end"
:caret="false" :caret="false"
buttonHtml="<i class='cui-location-pin'></i>"
> >
<template #toggler-content> <template #toggler-content>
<i class="cui-location-pin"></i> <CIcon name="cil-location-pin"/>
</template> </template>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -76,7 +75,7 @@
placement="bottom-end" placement="bottom-end"
> >
<template #toggler-content> <template #toggler-content>
<i class="cui-settings"></i> <CIcon name="cil-settings"/>
</template> </template>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -110,7 +109,7 @@
placement="bottom-end" placement="bottom-end"
> >
<template #toggler-content> <template #toggler-content>
<i class="cui-settings"></i> <CIcon name="cil-settings"/>
</template> </template>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
+67 -49
View File
@@ -33,42 +33,54 @@ exports[`TheHeader.vue renders correctly 1`] = `
class="d-md-down-none mr-auto" class="d-md-down-none mr-auto"
> >
<cheadernavitem-stub <cheadernavitem-stub
activeclass="active"
class="px-3" class="px-3"
event="click"
exactactiveclass="active"
routertag="a"
tag="span"
target="_self"
to="/dashboard" to="/dashboard"
> >
Dashboard <cheadernavlink-stub
activeclass="active"
event="click"
exactactiveclass="active"
routertag="a"
target="_self"
>
Dashboard
</cheadernavlink-stub>
</cheadernavitem-stub> </cheadernavitem-stub>
<cheadernavitem-stub <cheadernavitem-stub
activeclass="active"
class="px-3" class="px-3"
event="click" exact=""
exact="true"
exactactiveclass="active"
routertag="a"
tag="span"
target="_self"
to="/users" to="/users"
> >
Users <cheadernavlink-stub
activeclass="active"
event="click"
exactactiveclass="active"
routertag="a"
target="_self"
>
Users
</cheadernavlink-stub>
</cheadernavitem-stub> </cheadernavitem-stub>
<cheadernavitem-stub <cheadernavitem-stub
activeclass="active"
class="px-3" class="px-3"
event="click"
exactactiveclass="active"
routertag="a"
tag="span"
target="_self"
> >
Settings <cheadernavlink-stub
activeclass="active"
event="click"
exactactiveclass="active"
routertag="a"
target="_self"
>
Settings
</cheadernavlink-stub>
</cheadernavitem-stub> </cheadernavitem-stub>
</cheadernav-stub> </cheadernav-stub>
@@ -76,45 +88,51 @@ exports[`TheHeader.vue renders correctly 1`] = `
class="mr-4" class="mr-4"
> >
<cheadernavitem-stub <cheadernavitem-stub
activeclass="active"
class="d-md-down-none mx-2" class="d-md-down-none mx-2"
event="click"
exactactiveclass="active"
routertag="a"
tag="span"
target="_self"
> >
<i <cheadernavlink-stub
class="cui-bell" activeclass="active"
/> event="click"
exactactiveclass="active"
routertag="a"
target="_self"
>
<cicon-stub
name="cil-bell"
/>
</cheadernavlink-stub>
</cheadernavitem-stub> </cheadernavitem-stub>
<cheadernavitem-stub <cheadernavitem-stub
activeclass="active"
class="d-md-down-none mx-2" class="d-md-down-none mx-2"
event="click"
exactactiveclass="active"
routertag="a"
tag="span"
target="_self"
> >
<i <cheadernavlink-stub
class="cui-list" activeclass="active"
/> event="click"
exactactiveclass="active"
routertag="a"
target="_self"
>
<cicon-stub
name="cil-list"
/>
</cheadernavlink-stub>
</cheadernavitem-stub> </cheadernavitem-stub>
<cheadernavitem-stub <cheadernavitem-stub
activeclass="active"
class="d-md-down-none mx-2" class="d-md-down-none mx-2"
event="click"
exactactiveclass="active"
routertag="a"
tag="span"
target="_self"
> >
<i <cheadernavlink-stub
class="cui-envelope-open" activeclass="active"
/> event="click"
exactactiveclass="active"
routertag="a"
target="_self"
>
<cicon-stub
name="cil-envelope-open"
/>
</cheadernavlink-stub>
</cheadernavitem-stub> </cheadernavitem-stub>
<theheaderdropdownaccnt-stub /> <theheaderdropdownaccnt-stub />
tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
+21 -22
View File
@@ -6,8 +6,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
caret="true" caret="true"
class="c-header-nav-items" class="c-header-nav-items"
flip="true" flip="true"
nav="" innav="true"
no-caret=""
placement="bottom-end" placement="bottom-end"
togglertext="Dropdown" togglertext="Dropdown"
> >
@@ -29,8 +28,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
routertag="a" routertag="a"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-bell mr-2" name="cil-bell"
/> />
Updates Updates
@@ -55,8 +54,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
routertag="a" routertag="a"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-envelope-open mr-2" name="cil-envelope-open"
/> />
Messages Messages
@@ -81,8 +80,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
routertag="a" routertag="a"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-task mr-2" name="cil-task"
/> />
Tasks Tasks
@@ -107,8 +106,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
routertag="a" routertag="a"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-comment-square mr-2" name="cil-comment-square"
/> />
Comments Comments
@@ -143,8 +142,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
routertag="a" routertag="a"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-user mr-2" name="cil-user"
/> />
Profile Profile
@@ -157,8 +156,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
routertag="a" routertag="a"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-wrench mr-2" name="cil-settings"
/> />
Settings Settings
@@ -171,8 +170,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
routertag="a" routertag="a"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-dollar mr-2" name="cil-dollar"
/> />
Payments Payments
@@ -197,8 +196,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
routertag="a" routertag="a"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-file mr-2" name="cil-file"
/> />
Projects Projects
@@ -227,8 +226,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
routertag="a" routertag="a"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-shield mr-2" name="cil-shield-alt"
/> />
Lock Account Lock Account
@@ -241,8 +240,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
routertag="a" routertag="a"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-lock-locked mr-2" name="cil-lock-locked"
/> />
Logout Logout
tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
+2 -1
View File
@@ -16,7 +16,8 @@ exports[`TheSidebar.vue renders correctly 1`] = `
/> />
<crenderfunction-stub <crenderfunction-stub
contenttorender="CSidebarNav,CSidebarNavLink,[object Object],CSidebarNavTitle,Theme,CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavTitle,Components,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDivider,CSidebarNavTitle,Extras,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object]" contenttorender="[object Object]"
flat="true"
/> />
<csidebarminimizer-stub <csidebarminimizer-stub
tests/unit/views/Dashboard.spec.js
-3
View File
@@ -1,13 +1,10 @@
import Vue from 'vue' import Vue from 'vue'
import { shallowMount } from '@vue/test-utils' import { shallowMount } from '@vue/test-utils'
import CoreuiVue from '@coreui/vue' import CoreuiVue from '@coreui/vue'
import { CIconPlugin } from '@coreui/icons/vue'
import Dashboard from '@/views/Dashboard' import Dashboard from '@/views/Dashboard'
import { iconsSet } from '@/assets/icons/icons.js'
Vue.use(CoreuiVue) Vue.use(CoreuiVue)
Vue.use(CIconPlugin, iconsSet)
describe('Dashboard.vue', () => { describe('Dashboard.vue', () => {
it('has a name', () => { it('has a name', () => {
tests/unit/views/__snapshots__/Dashboard.spec.js.snap
+611 -606
View File
File diff suppressed because it is too large Load Diff
tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
+4 -4
View File
@@ -10,12 +10,13 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
<strong> <strong>
Bootstrap Breadcrumb Bootstrap Breadcrumb
@@ -165,7 +166,6 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
</li> </li>
</ol> </ol>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
tests/unit/views/base/__snapshots__/Cards.spec.js.snap
+88 -126
View File
@@ -11,7 +11,6 @@ exports[`Cards.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
@@ -43,7 +42,6 @@ exports[`Cards.vue renders correctly 1`] = `
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -53,12 +51,12 @@ exports[`Cards.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<footer <footer
class="card-footer" class="card-footer"
> >
@@ -76,17 +74,19 @@ exports[`Cards.vue renders correctly 1`] = `
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="cui-check" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
Card with icon Card with icon
</header> </header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -96,7 +96,6 @@ exports[`Cards.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
@@ -104,14 +103,13 @@ exports[`Cards.vue renders correctly 1`] = `
Card with switch Card with switch
<label <label
class="float-right c-switch form-check-label c-switch-info c-switch-sm c-switch-pill" class="float-right c-switch form-check-label c-switch-sm c-switch-pill c-switch-info"
> >
<input <input
class="c-switch-input form-check-input" class="c-switch-input form-check-input"
data-off="Off" data-off="Off"
data-on="On" data-on="On"
type="checkbox" type="checkbox"
value=""
/> />
<span <span
class="c-switch-slider" class="c-switch-slider"
@@ -126,7 +124,6 @@ exports[`Cards.vue renders correctly 1`] = `
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -136,7 +133,6 @@ exports[`Cards.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
@@ -157,7 +153,6 @@ exports[`Cards.vue renders correctly 1`] = `
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -167,7 +162,6 @@ exports[`Cards.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
@@ -188,7 +182,6 @@ exports[`Cards.vue renders correctly 1`] = `
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@@ -201,15 +194,18 @@ exports[`Cards.vue renders correctly 1`] = `
> >
<div <div
class="card border-primary" class="card border-primary"
header="Card outline primary"
> >
<!----> <header
class="card-header"
>
Card outline primary
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -218,15 +214,18 @@ exports[`Cards.vue renders correctly 1`] = `
> >
<div <div
class="card border-secondary" class="card border-secondary"
header="Card outline secondary"
> >
<!----> <header
class="card-header"
>
Card outline secondary
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -235,17 +234,18 @@ exports[`Cards.vue renders correctly 1`] = `
> >
<div <div
class="card border-success" class="card border-success"
header="Card outline success"
> >
<!----> <header
class="card-header"
>
Card outline success
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -260,14 +260,12 @@ exports[`Cards.vue renders correctly 1`] = `
> >
Card outline info Card outline info
</header> </header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -282,14 +280,12 @@ exports[`Cards.vue renders correctly 1`] = `
> >
Card outline warning Card outline warning
</header> </header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -304,14 +300,12 @@ exports[`Cards.vue renders correctly 1`] = `
> >
Card outline danger Card outline danger
</header> </header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@@ -324,17 +318,18 @@ exports[`Cards.vue renders correctly 1`] = `
> >
<div <div
class="card card-accent-primary" class="card card-accent-primary"
header="Card with primary accent"
> >
<!----> <header
class="card-header"
>
Card with primary accent
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -343,17 +338,18 @@ exports[`Cards.vue renders correctly 1`] = `
> >
<div <div
class="card card-accent-secondary" class="card card-accent-secondary"
header="Card with secondary accent"
> >
<!----> <header
class="card-header"
>
Card with secondary accent
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -362,17 +358,18 @@ exports[`Cards.vue renders correctly 1`] = `
> >
<div <div
class="card card-accent-success" class="card card-accent-success"
header="Card with success accent"
> >
<!----> <header
class="card-header"
>
Card with success accent
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -381,17 +378,18 @@ exports[`Cards.vue renders correctly 1`] = `
> >
<div <div
class="card card-accent-info" class="card card-accent-info"
header="Card with info accent"
> >
<!----> <header
class="card-header"
>
Card with info accent
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -399,18 +397,19 @@ exports[`Cards.vue renders correctly 1`] = `
class="col-sm-6 col-md-4" class="col-sm-6 col-md-4"
> >
<div <div
class="card card-accent-warning" class="card card-accent-info"
header="Card with warning accent"
> >
<!----> <header
class="card-header"
>
Card with info accent
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -419,17 +418,18 @@ exports[`Cards.vue renders correctly 1`] = `
> >
<div <div
class="card card-accent-danger" class="card card-accent-danger"
header="Card with danger accent"
> >
<!----> <header
class="card-header"
>
Card with danger accent
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@@ -441,9 +441,8 @@ exports[`Cards.vue renders correctly 1`] = `
class="col-sm-6 col-md-4" class="col-sm-6 col-md-4"
> >
<div <div
class="card bg-primary text-center" class="card text-center bg-primary"
> >
<!---->
<div <div
class="card-body" class="card-body"
> >
@@ -465,7 +464,6 @@ exports[`Cards.vue renders correctly 1`] = `
</footer> </footer>
</blockquote> </blockquote>
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -473,9 +471,8 @@ exports[`Cards.vue renders correctly 1`] = `
class="col-sm-6 col-md-4" class="col-sm-6 col-md-4"
> >
<div <div
class="card bg-success text-center" class="card text-center bg-success"
> >
<!---->
<div <div
class="card-body" class="card-body"
> >
@@ -497,7 +494,6 @@ exports[`Cards.vue renders correctly 1`] = `
</footer> </footer>
</blockquote> </blockquote>
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -505,9 +501,8 @@ exports[`Cards.vue renders correctly 1`] = `
class="col-sm-6 col-md-4" class="col-sm-6 col-md-4"
> >
<div <div
class="card bg-info text-center" class="card text-center bg-info"
> >
<!---->
<div <div
class="card-body" class="card-body"
> >
@@ -529,7 +524,6 @@ exports[`Cards.vue renders correctly 1`] = `
</footer> </footer>
</blockquote> </blockquote>
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -537,9 +531,8 @@ exports[`Cards.vue renders correctly 1`] = `
class="col-sm-6 col-md-4" class="col-sm-6 col-md-4"
> >
<div <div
class="card bg-warning text-center" class="card text-center bg-warning"
> >
<!---->
<div <div
class="card-body" class="card-body"
> >
@@ -561,7 +554,6 @@ exports[`Cards.vue renders correctly 1`] = `
</footer> </footer>
</blockquote> </blockquote>
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -569,9 +561,8 @@ exports[`Cards.vue renders correctly 1`] = `
class="col-sm-6 col-md-4" class="col-sm-6 col-md-4"
> >
<div <div
class="card bg-danger text-center" class="card text-center bg-danger"
> >
<!---->
<div <div
class="card-body" class="card-body"
> >
@@ -593,7 +584,6 @@ exports[`Cards.vue renders correctly 1`] = `
</footer> </footer>
</blockquote> </blockquote>
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -601,9 +591,8 @@ exports[`Cards.vue renders correctly 1`] = `
class="col-sm-6 col-md-4" class="col-sm-6 col-md-4"
> >
<div <div
class="card bg-secondary text-center" class="card text-center bg-secondary"
> >
<!---->
<div <div
class="card-body" class="card-body"
> >
@@ -625,7 +614,6 @@ exports[`Cards.vue renders correctly 1`] = `
</footer> </footer>
</blockquote> </blockquote>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@@ -639,19 +627,13 @@ exports[`Cards.vue renders correctly 1`] = `
<div <div
class="card bg-primary" class="card bg-primary"
> >
<header
class="card-header"
>
Card title
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -661,19 +643,13 @@ exports[`Cards.vue renders correctly 1`] = `
<div <div
class="card bg-success" class="card bg-success"
> >
<header
class="card-header"
>
Card title
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -683,19 +659,13 @@ exports[`Cards.vue renders correctly 1`] = `
<div <div
class="card bg-info" class="card bg-info"
> >
<header
class="card-header"
>
Card title
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -705,19 +675,13 @@ exports[`Cards.vue renders correctly 1`] = `
<div <div
class="card bg-warning" class="card bg-warning"
> >
<header
class="card-header"
>
Card title
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -727,19 +691,13 @@ exports[`Cards.vue renders correctly 1`] = `
<div <div
class="card bg-danger" class="card bg-danger"
> >
<header
class="card-header"
>
Card title
</header>
<div <div
class="card-body" class="card-body"
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -750,7 +708,6 @@ exports[`Cards.vue renders correctly 1`] = `
class="card bg-secondary" class="card bg-secondary"
name="fade" name="fade"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
@@ -765,8 +722,10 @@ exports[`Cards.vue renders correctly 1`] = `
href="#" href="#"
target="_self" target="_self"
> >
<i <svg
class="cui-settings" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
</a> </a>
@@ -775,8 +734,10 @@ exports[`Cards.vue renders correctly 1`] = `
href="#" href="#"
target="_self" target="_self"
> >
<i <svg
class="cui-chevron-bottom" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
</a> </a>
@@ -785,8 +746,10 @@ exports[`Cards.vue renders correctly 1`] = `
href="#" href="#"
target="_self" target="_self"
> >
<i <svg
class="cui-circle-x" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
</a> </a>
</div> </div>
@@ -803,7 +766,6 @@ exports[`Cards.vue renders correctly 1`] = `
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
+7 -8
View File
@@ -10,12 +10,13 @@ exports[`Carousels.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
<strong> <strong>
@@ -68,7 +69,7 @@ exports[`Carousels.vue renders correctly 1`] = `
> >
<img <img
class="d-block w-100 h-100 img-fluid" class="d-block w-100 h-100 img-fluid"
src="https://lorempixel.com/1024/480/technics/2/" src="https://picsum.photos/1024/480/?image=52"
/> />
<div <div
class="carousel-caption" class="carousel-caption"
@@ -86,9 +87,8 @@ exports[`Carousels.vue renders correctly 1`] = `
class="carousel-item" class="carousel-item"
> >
<svg <svg
blankColor="grey"
class="d-block w-100 h-100 img-fluid" class="d-block w-100 h-100 img-fluid"
style="background-color: transparent;" style="background-color: grey;"
/> />
<div <div
class="carousel-caption" class="carousel-caption"
@@ -107,7 +107,7 @@ exports[`Carousels.vue renders correctly 1`] = `
> >
<img <img
class="d-block w-100 h-100 img-fluid" class="d-block w-100 h-100 img-fluid"
src="https://lorempixel.com/1024/480/technics/8/" src="https://picsum.photos/1024/480/?image=54"
/> />
<!----> <!---->
</div> </div>
@@ -130,7 +130,6 @@ exports[`Carousels.vue renders correctly 1`] = `
</a> </a>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
+4 -8
View File
@@ -10,12 +10,13 @@ exports[`Collapses.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
<strong> <strong>
@@ -59,7 +60,6 @@ exports[`Collapses.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<div <div
class="card-body" class="card-body"
> >
@@ -85,21 +85,17 @@ exports[`Collapses.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<div <div
class="card-body" class="card-body"
> >
Hello! Hello!
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
+7 -7
View File
@@ -10,8 +10,8 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -49,7 +49,7 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
<p <p
class="lead" class="lead"
> >
Bootstrap 4 Components for Vue.js 2 Bootstrap 4 Components for Vue.js 2.6+
</p> </p>
<p> <p>
@@ -78,8 +78,8 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -162,8 +162,8 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
+87 -77
View File
@@ -11,8 +11,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -106,8 +106,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
List group List group
@@ -191,8 +191,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -275,8 +275,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -356,8 +356,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -428,8 +428,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -462,8 +462,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
color="primary" color="primary"
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
pill="true"
routertag="a" routertag="a"
shape="pill"
tag="span" tag="span"
target="_self" target="_self"
> >
@@ -488,8 +488,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
color="primary" color="primary"
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
pill="true"
routertag="a" routertag="a"
shape="pill"
tag="span" tag="span"
target="_self" target="_self"
> >
@@ -514,8 +514,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
color="primary" color="primary"
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
pill="true"
routertag="a" routertag="a"
shape="pill"
tag="span" tag="span"
target="_self" target="_self"
> >
@@ -537,8 +537,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -671,8 +671,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -818,8 +818,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -835,64 +835,74 @@ exports[`ListGroups.vue renders correctly 1`] = `
<ccardgroup-stub <ccardgroup-stub
deck="true" deck="true"
> >
<ccard-stub <ccard-stub>
headerhtml=<b>Card with list group</b> <ccardheader-stub>
> <b>
<clistgroup-stub Card with list group
tag="ul" </b>
> </ccardheader-stub>
<clistgroupitem-stub
activeclass="active"
event="click"
exactactiveclass="active"
href="#"
routertag="a"
tag="li"
target="_self"
>
Cras justo odio
</clistgroupitem-stub>
<clistgroupitem-stub
activeclass="active"
event="click"
exactactiveclass="active"
href="#"
routertag="a"
tag="li"
target="_self"
>
Dapibus ac facilisis in
</clistgroupitem-stub>
<clistgroupitem-stub
activeclass="active"
event="click"
exactactiveclass="active"
href="#"
routertag="a"
tag="li"
target="_self"
>
Vestibulum at eros
</clistgroupitem-stub>
</clistgroup-stub>
<p <ccardbody-stub>
class="card-text mt-2" <clistgroup-stub
> tag="ul"
>
<clistgroupitem-stub
activeclass="active"
event="click"
exactactiveclass="active"
href="#"
routertag="a"
tag="li"
target="_self"
>
Cras justo odio
</clistgroupitem-stub>
<clistgroupitem-stub
activeclass="active"
event="click"
exactactiveclass="active"
href="#"
routertag="a"
tag="li"
target="_self"
>
Dapibus ac facilisis in
</clistgroupitem-stub>
<clistgroupitem-stub
activeclass="active"
event="click"
exactactiveclass="active"
href="#"
routertag="a"
tag="li"
target="_self"
>
Vestibulum at eros
</clistgroupitem-stub>
</clistgroup-stub>
<ccardtext-stub
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.
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex </ccardtext-stub>
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua </ccardbody-stub>
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</p>
</ccard-stub> </ccard-stub>
<ccard-stub <ccard-stub>
header=<b>Card with flush list group</b> <ccardheader-stub>
> <b>
Card with flush list group
</b>
</ccardheader-stub>
<clistgroup-stub <clistgroup-stub
flush="true" flush="true"
tag="ul" tag="ul"
@@ -958,8 +968,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
List group List group
tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
+12 -16
View File
@@ -4,8 +4,8 @@ exports[`Navbars.vue renders correctly 1`] = `
<div> <div>
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -66,7 +66,6 @@ exports[`Navbars.vue renders correctly 1`] = `
exactactiveclass="active" exactactiveclass="active"
href="#" href="#"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Link Link
@@ -79,7 +78,6 @@ exports[`Navbars.vue renders correctly 1`] = `
exactactiveclass="active" exactactiveclass="active"
href="#" href="#"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Disabled Disabled
@@ -201,8 +199,8 @@ exports[`Navbars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -243,8 +241,8 @@ exports[`Navbars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -299,8 +297,8 @@ exports[`Navbars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -337,7 +335,6 @@ exports[`Navbars.vue renders correctly 1`] = `
exactactiveclass="active" exactactiveclass="active"
href="#" href="#"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Home Home
@@ -349,7 +346,6 @@ exports[`Navbars.vue renders correctly 1`] = `
exactactiveclass="active" exactactiveclass="active"
href="#" href="#"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Link Link
@@ -438,8 +434,8 @@ exports[`Navbars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -487,8 +483,8 @@ exports[`Navbars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
tests/unit/views/base/__snapshots__/Navs.spec.js.snap
+24 -54
View File
@@ -4,8 +4,8 @@ exports[`Navs.vue renders correctly 1`] = `
<div> <div>
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
Bootstrap Navs Bootstrap Navs
@@ -37,7 +37,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Active Active
@@ -48,7 +47,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
title="Link" title="Link"
/> />
@@ -58,7 +56,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Another Link Another Link
@@ -70,7 +67,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Disabled Disabled
@@ -81,8 +77,8 @@ exports[`Navs.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -102,11 +98,10 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
<i <cicon-stub
class="cui-basket-loaded" name="cil-basket"
/> />
</cnavitem-stub> </cnavitem-stub>
@@ -115,7 +110,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
@@ -128,7 +122,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
@@ -142,7 +135,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Disabled Disabled
@@ -153,8 +145,8 @@ exports[`Navs.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -168,7 +160,7 @@ exports[`Navs.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<cnav-stub <cnav-stub
tabs="true" variant="tabs"
> >
<cnavitem-stub <cnavitem-stub
active="true" active="true"
@@ -176,7 +168,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
@@ -189,7 +180,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
@@ -202,7 +192,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
@@ -216,7 +205,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Disabled Disabled
@@ -227,8 +215,8 @@ exports[`Navs.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -242,7 +230,7 @@ exports[`Navs.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<cnav-stub <cnav-stub
pills="true" variant="pills"
> >
<cnavitem-stub <cnavitem-stub
active="true" active="true"
@@ -250,7 +238,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Active Active
@@ -261,7 +248,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Link Link
@@ -272,7 +258,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Another Link Another Link
@@ -284,7 +269,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Disabled Disabled
@@ -295,8 +279,8 @@ exports[`Navs.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -311,7 +295,7 @@ exports[`Navs.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<cnav-stub <cnav-stub
fill="true" fill="true"
tabs="true" variant="tabs"
> >
<cnavitem-stub <cnavitem-stub
active="true" active="true"
@@ -319,7 +303,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Active Active
@@ -330,7 +313,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Link Link
@@ -341,7 +323,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Link with a long name Link with a long name
@@ -353,7 +334,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Disabled Disabled
@@ -364,8 +344,8 @@ exports[`Navs.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -380,7 +360,7 @@ exports[`Navs.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<cnav-stub <cnav-stub
justified="true" justified="true"
tabs="true" variant="tabs"
> >
<cnavitem-stub <cnavitem-stub
active="true" active="true"
@@ -388,7 +368,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Active Active
@@ -399,7 +378,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Link Link
@@ -410,7 +388,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Link with a long name Link with a long name
@@ -422,7 +399,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Disabled Disabled
@@ -433,8 +409,8 @@ exports[`Navs.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -448,7 +424,7 @@ exports[`Navs.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<cnav-stub <cnav-stub
pills="true" pills=""
> >
<cnavitem-stub <cnavitem-stub
active="true" active="true"
@@ -456,7 +432,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Active Active
@@ -467,7 +442,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Link Link
@@ -522,8 +496,8 @@ exports[`Navs.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -545,7 +519,7 @@ exports[`Navs.vue renders correctly 1`] = `
tag="div" tag="div"
> >
<cnav-stub <cnav-stub
pills="true" pills=""
vertical="true" vertical="true"
> >
<cnavitem-stub <cnavitem-stub
@@ -554,7 +528,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Active Active
@@ -565,7 +538,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Link Link
@@ -576,7 +548,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Another Link Another Link
@@ -588,7 +559,6 @@ exports[`Navs.vue renders correctly 1`] = `
event="click" event="click"
exactactiveclass="active" exactactiveclass="active"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
Disabled Disabled
tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
+4 -32
View File
@@ -4,8 +4,8 @@ exports[`Paginations.vue renders correctly 1`] = `
<div> <div>
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -41,14 +41,9 @@ exports[`Paginations.vue renders correctly 1`] = `
arrows="true" arrows="true"
dots="true" dots="true"
doublearrows="true" doublearrows="true"
firstbuttonhtml="&laquo;"
lastbuttonhtml="&raquo;"
limit="5" limit="5"
nextbuttonhtml="&rsaquo;"
pages="10" pages="10"
previousbuttonhtml="&lsaquo;"
responsive="" responsive=""
size="md"
/> />
<br /> <br />
@@ -63,12 +58,8 @@ exports[`Paginations.vue renders correctly 1`] = `
arrows="true" arrows="true"
dots="true" dots="true"
doublearrows="true" doublearrows="true"
firstbuttonhtml="&laquo;"
lastbuttonhtml="&raquo;"
limit="5" limit="5"
nextbuttonhtml="&rsaquo;"
pages="10" pages="10"
previousbuttonhtml="&lsaquo;"
size="sm" size="sm"
/> />
@@ -85,12 +76,8 @@ exports[`Paginations.vue renders correctly 1`] = `
arrows="true" arrows="true"
dots="true" dots="true"
doublearrows="true" doublearrows="true"
firstbuttonhtml="&laquo;"
lastbuttonhtml="&raquo;"
limit="5" limit="5"
nextbuttonhtml="&rsaquo;"
pages="10" pages="10"
previousbuttonhtml="&lsaquo;"
responsive="" responsive=""
size="lg" size="lg"
/> />
@@ -106,8 +93,8 @@ exports[`Paginations.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -130,13 +117,8 @@ exports[`Paginations.vue renders correctly 1`] = `
arrows="true" arrows="true"
dots="true" dots="true"
doublearrows="true" doublearrows="true"
firstbuttonhtml="&laquo;"
lastbuttonhtml="&raquo;"
limit="5" limit="5"
nextbuttonhtml="&rsaquo;"
pages="10" pages="10"
previousbuttonhtml="&lsaquo;"
size="md"
/> />
<br /> <br />
@@ -151,13 +133,8 @@ exports[`Paginations.vue renders correctly 1`] = `
arrows="true" arrows="true"
dots="true" dots="true"
doublearrows="true" doublearrows="true"
firstbuttonhtml="&laquo;"
lastbuttonhtml="&raquo;"
limit="5" limit="5"
nextbuttonhtml="&rsaquo;"
pages="10" pages="10"
previousbuttonhtml="&lsaquo;"
size="md"
/> />
<br /> <br />
@@ -172,13 +149,8 @@ exports[`Paginations.vue renders correctly 1`] = `
arrows="true" arrows="true"
dots="true" dots="true"
doublearrows="true" doublearrows="true"
firstbuttonhtml="&laquo;"
lastbuttonhtml="&raquo;"
limit="5" limit="5"
nextbuttonhtml="&rsaquo;"
pages="10" pages="10"
previousbuttonhtml="&lsaquo;"
size="md"
/> />
<br /> <br />
tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
+16 -16
View File
@@ -4,8 +4,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
<div> <div>
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -87,8 +87,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -163,8 +163,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -217,8 +217,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -276,8 +276,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -435,8 +435,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -503,8 +503,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -574,8 +574,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
tests/unit/views/base/__snapshots__/Switches.spec.js.snap
+119 -1008
View File
File diff suppressed because it is too large Load Diff
tests/unit/views/base/__snapshots__/Table.spec.js.snap
+18 -11
View File
@@ -1,16 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Table.vue renders correctly 1`] = ` exports[`Table.vue renders correctly 1`] = `
<ccard-stub <ccard-stub>
bodywrapper="true" <ccardheader-stub>
header="Table" <cicon-stub
> name="cil-justify-center"
<ctable-stub />
defaultsorter="[object Object]" Table
fields="username,registered,role,status"
itemsperpage="5" </ccardheader-stub>
pagination="true"
responsive="true" <ccardbody-stub>
/> <cdatatable-stub
fields="username,registered,role,status"
itemsperpage="5"
pagination="true"
responsive="true"
sortervalue="[object Object]"
/>
</ccardbody-stub>
</ccard-stub> </ccard-stub>
`; `;
tests/unit/views/base/__snapshots__/Tables.spec.js.snap
+6 -6
View File
@@ -10,7 +10,7 @@ exports[`Tables.vue renders correctly 1`] = `
tag="div" tag="div"
> >
<ctablewrapper-stub <ctablewrapper-stub
caption=<i class='fa fa-align-justify'></i> Simple Table caption="Simple Table"
fields="username,registered,role,status" fields="username,registered,role,status"
items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
/> />
@@ -21,7 +21,7 @@ exports[`Tables.vue renders correctly 1`] = `
tag="div" tag="div"
> >
<ctablewrapper-stub <ctablewrapper-stub
caption=<i class='fa fa-align-justify'></i> Striped Table caption="Striped Table"
fields="username,registered,role,status" fields="username,registered,role,status"
items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
striped="true" striped="true"
@@ -37,7 +37,7 @@ exports[`Tables.vue renders correctly 1`] = `
tag="div" tag="div"
> >
<ctablewrapper-stub <ctablewrapper-stub
caption=<i class='fa fa-align-justify'></i> Condensed Table caption="Condensed Table"
fields="username,registered,role,status" fields="username,registered,role,status"
items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
small="true" small="true"
@@ -50,7 +50,7 @@ exports[`Tables.vue renders correctly 1`] = `
> >
<ctablewrapper-stub <ctablewrapper-stub
bordered="true" bordered="true"
caption=<i class='fa fa-align-justify'></i> Bordered Table caption="Bordered Table"
fields="username,registered,role,status" fields="username,registered,role,status"
fixed="true" fixed="true"
items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
@@ -67,7 +67,7 @@ exports[`Tables.vue renders correctly 1`] = `
> >
<ctablewrapper-stub <ctablewrapper-stub
bordered="true" bordered="true"
caption=<i class='fa fa-align-justify'></i> Combined All Table caption="Combined All Table"
fields="username,registered,role,status" fields="username,registered,role,status"
fixed="true" fixed="true"
hover="true" hover="true"
@@ -87,7 +87,7 @@ exports[`Tables.vue renders correctly 1`] = `
> >
<ctablewrapper-stub <ctablewrapper-stub
bordered="true" bordered="true"
caption=<i class='fa fa-align-justify'></i> Combined All Table caption="Combined All Table"
dark="true" dark="true"
fields="username,registered,role,status" fields="username,registered,role,status"
fixed="true" fixed="true"
tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
+29 -31
View File
@@ -36,11 +36,11 @@ exports[`Tabs.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<ctabs-stub <ctabs-stub
fade="true" fade="true"
tabs="true" variant="tabs"
> >
<ctab-stub <ctab-stub
active="true" active="true"
titlehtml="Home" title="Home"
> >
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -52,7 +52,7 @@ exports[`Tabs.vue renders correctly 1`] = `
</ctab-stub> </ctab-stub>
<ctab-stub <ctab-stub
titlehtml="Profile" title="Profile"
> >
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -65,7 +65,7 @@ exports[`Tabs.vue renders correctly 1`] = `
<ctab-stub <ctab-stub
disabled="true" disabled="true"
titlehtml="Disabled" title="Disabled"
> >
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -95,12 +95,11 @@ exports[`Tabs.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<ctabs-stub <ctabs-stub
fade="true" fade="true"
pills="true" variant="pills"
tabs="true"
> >
<ctab-stub <ctab-stub
active="true" active="true"
titlehtml="Home" title="Home"
> >
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -112,7 +111,7 @@ exports[`Tabs.vue renders correctly 1`] = `
</ctab-stub> </ctab-stub>
<ctab-stub <ctab-stub
titlehtml="Profile" title="Profile"
> >
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -125,7 +124,7 @@ exports[`Tabs.vue renders correctly 1`] = `
<ctab-stub <ctab-stub
disabled="true" disabled="true"
titlehtml="Disabled" title="Disabled"
> >
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -155,14 +154,14 @@ exports[`Tabs.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<ctabs-stub <ctabs-stub
fade="true" fade="true"
tabs="true" variant="tabs"
> >
<ctab-stub <ctab-stub
active="true" active="true"
> >
<template> <template>
<i <cicon-stub
class="cui-calculator" name="cil-calculator"
/> />
</template> </template>
@@ -176,8 +175,8 @@ exports[`Tabs.vue renders correctly 1`] = `
<ctab-stub> <ctab-stub>
<template> <template>
<i <cicon-stub
class="cui-basket-loaded" name="cil-basket"
/> />
</template> </template>
@@ -191,8 +190,8 @@ exports[`Tabs.vue renders correctly 1`] = `
<ctab-stub> <ctab-stub>
<template> <template>
<i <cicon-stub
class="cui-pie-chart" name="cil-chart-pie"
/> />
</template> </template>
@@ -224,14 +223,14 @@ exports[`Tabs.vue renders correctly 1`] = `
<ctabs-stub <ctabs-stub
addtabclasses="mt-1" addtabclasses="mt-1"
fade="true" fade="true"
tabs="true" variant="tabs"
> >
<ctab-stub <ctab-stub
active="true" active="true"
> >
<template> <template>
<i <cicon-stub
class="cui-calculator" name="cil-calculator"
/> />
Calculator Calculator
@@ -247,8 +246,8 @@ exports[`Tabs.vue renders correctly 1`] = `
<ctab-stub> <ctab-stub>
<template> <template>
<i <cicon-stub
class="cui-basket-loaded" name="cil-basket"
/> />
Shopping cart Shopping cart
@@ -264,8 +263,8 @@ exports[`Tabs.vue renders correctly 1`] = `
<ctab-stub> <ctab-stub>
<template> <template>
<i <cicon-stub
class="cui-pie-chart" name="cil-chart-pie"
/> />
Charts Charts
@@ -298,16 +297,15 @@ exports[`Tabs.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<ctabs-stub <ctabs-stub
fade="true" fade="true"
pills="true" variant="pills"
tabs="true"
vertical="true" vertical="true"
> >
<ctab-stub <ctab-stub
active="true" active="true"
> >
<template> <template>
<i <cicon-stub
class="cui-calculator" name="cil-calculator"
/> />
Calculator Calculator
@@ -323,8 +321,8 @@ exports[`Tabs.vue renders correctly 1`] = `
<ctab-stub> <ctab-stub>
<template> <template>
<i <cicon-stub
class="cui-basket-loaded" name="cil-basket"
/> />
Shopping cart Shopping cart
@@ -340,8 +338,8 @@ exports[`Tabs.vue renders correctly 1`] = `
<ctab-stub> <ctab-stub>
<template> <template>
<i <cicon-stub
class="cui-pie-chart" name="cil-chart-pie"
/> />
Charts Charts
tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap
+4 -4
View File
@@ -4,8 +4,8 @@ exports[`Tooltips.vue renders correctly 1`] = `
<div> <div>
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -92,8 +92,8 @@ exports[`Tooltips.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
tests/unit/views/buttons/BrandButtons.spec.js
-4
View File
@@ -2,11 +2,7 @@ import Vue from 'vue'
import { shallowMount, mount } from '@vue/test-utils' import { shallowMount, mount } from '@vue/test-utils'
import CoreuiVue from '@coreui/vue' import CoreuiVue from '@coreui/vue'
import BrandButtons from '@/views/buttons/BrandButtons' import BrandButtons from '@/views/buttons/BrandButtons'
import { CIconPlugin } from '@coreui/icons/vue'
import { iconsSet } from '@/assets/icons/icons.js'
Vue.use(CIconPlugin, iconsSet)
Vue.use(CoreuiVue) Vue.use(CoreuiVue)
describe('BrandButtons.vue', () => { describe('BrandButtons.vue', () => {
tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
+206 -671
View File
File diff suppressed because it is too large Load Diff
tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
+47 -24
View File
@@ -11,12 +11,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
<strong> <strong>
@@ -52,6 +53,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-secondary" class="btn dropdown-toggle btn-secondary"
type="button"
> >
Dropdown Button Dropdown Button
</button> </button>
@@ -122,6 +124,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-secondary" class="btn dropdown-toggle btn-secondary"
type="button"
> >
Dropdown with divider Dropdown with divider
</button> </button>
@@ -172,6 +175,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-secondary" class="btn dropdown-toggle btn-secondary"
type="button"
> >
Dropdown with header Dropdown with header
</button> </button>
@@ -206,7 +210,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -216,12 +219,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
<strong> <strong>
@@ -244,6 +248,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-primary" class="btn dropdown-toggle btn-primary"
type="button"
> >
Left align Left align
</button> </button>
@@ -287,6 +292,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-primary" class="btn dropdown-toggle btn-primary"
type="button"
> >
Right align Right align
</button> </button>
@@ -332,6 +338,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-info" class="btn dropdown-toggle btn-info"
type="button"
> >
Drop-Up Drop-Up
</button> </button>
@@ -377,6 +384,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-secondary" class="btn dropdown-toggle btn-secondary"
type="button"
> >
Offset Dropdown Offset Dropdown
</button> </button>
@@ -427,6 +435,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="dropdown-toggle dropdown-toggle-split btn btn-secondary" class="dropdown-toggle dropdown-toggle-split btn btn-secondary"
type="button"
/> />
<div <div
class="dropdown-menu" class="dropdown-menu"
@@ -461,7 +470,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@@ -475,12 +483,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
<strong> <strong>
@@ -503,6 +512,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn btn-lg btn-link" class="btn btn-lg btn-link"
type="button"
> >
🔍 🔍
@@ -547,7 +557,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -557,12 +566,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
<strong> <strong>
@@ -585,6 +595,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-lg btn-secondary" class="btn dropdown-toggle btn-lg btn-secondary"
type="button"
> >
Large Large
</button> </button>
@@ -633,6 +644,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="dropdown-toggle dropdown-toggle-split btn btn-lg btn-secondary" class="dropdown-toggle dropdown-toggle-split btn btn-lg btn-secondary"
type="button"
/> />
<div <div
class="dropdown-menu" class="dropdown-menu"
@@ -675,6 +687,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-sm btn-secondary" class="btn dropdown-toggle btn-sm btn-secondary"
type="button"
> >
Small Small
</button> </button>
@@ -723,6 +736,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="dropdown-toggle dropdown-toggle-split btn btn-sm btn-secondary" class="dropdown-toggle dropdown-toggle-split btn btn-sm btn-secondary"
type="button"
/> />
<div <div
class="dropdown-menu" class="dropdown-menu"
@@ -757,7 +771,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@@ -771,12 +784,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
<strong> <strong>
@@ -799,6 +813,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-primary" class="btn dropdown-toggle btn-primary"
type="button"
> >
Dropdown ARIA Dropdown ARIA
</button> </button>
@@ -885,7 +900,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
@@ -895,12 +909,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
<strong> <strong>
@@ -924,6 +939,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-sm btn-primary" class="btn dropdown-toggle btn-sm btn-primary"
type="button"
> >
Primary Primary
</button> </button>
@@ -967,6 +983,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-sm btn-secondary" class="btn dropdown-toggle btn-sm btn-secondary"
type="button"
> >
Secondary Secondary
</button> </button>
@@ -1010,6 +1027,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-sm btn-success" class="btn dropdown-toggle btn-sm btn-success"
type="button"
> >
Success Success
</button> </button>
@@ -1053,6 +1071,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-sm btn-warning" class="btn dropdown-toggle btn-sm btn-warning"
type="button"
> >
Warning Warning
</button> </button>
@@ -1096,6 +1115,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-sm btn-danger" class="btn dropdown-toggle btn-sm btn-danger"
type="button"
> >
Danger Danger
</button> </button>
@@ -1139,6 +1159,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-sm btn-info" class="btn dropdown-toggle btn-sm btn-info"
type="button"
> >
Info Info
</button> </button>
@@ -1182,6 +1203,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-sm btn-light" class="btn dropdown-toggle btn-sm btn-light"
type="button"
> >
Light Light
</button> </button>
@@ -1225,6 +1247,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-sm btn-dark" class="btn dropdown-toggle btn-sm btn-dark"
type="button"
> >
Dark Dark
</button> </button>
@@ -1268,6 +1291,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-sm btn-link" class="btn dropdown-toggle btn-sm btn-link"
type="button"
> >
Link Link
</button> </button>
@@ -1304,7 +1328,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
+13 -13
View File
@@ -10,8 +10,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -190,8 +190,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -337,8 +337,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
Button group Button group
@@ -489,8 +489,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -552,8 +552,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -707,10 +707,10 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
</cbuttongroup-stub> </cbuttongroup-stub>
<cinput-stub <cinput-stub
appendhtml=".00" append=".00"
class="mb-0 w-25 mx-1" class="mb-0 w-25 mx-1"
lazy="400" lazy="400"
prependhtml="$" prepend="$"
size="sm" size="sm"
type="text" type="text"
value="100" value="100"
@@ -720,7 +720,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
class="mb-0 w-25 mx-1" class="mb-0 w-25 mx-1"
custom="true" custom="true"
options="Large,Medium,Small" options="Large,Medium,Small"
prependhtml="Size" prepend="Size"
size="sm" size="sm"
value="Medium" value="Medium"
/> />
tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
+142 -142
View File
File diff suppressed because it is too large Load Diff
tests/unit/views/charts/__snapshots__/Charts.spec.js.snap
+80 -56
View File
@@ -34,76 +34,100 @@ exports[`Charts.vue renders correctly 1`] = `
</ccardbody-stub> </ccardbody-stub>
</ccard-stub> </ccard-stub>
<ccard-stub <ccard-stub>
bodywrapper="true" <ccardheader-stub>
headerhtml="Bar Chart" Bar Chart
> </ccardheader-stub>
<cchartbarexample-stub />
<ccardbody-stub>
<cchartbarexample-stub />
</ccardbody-stub>
</ccard-stub> </ccard-stub>
<ccard-stub <ccard-stub>
bodywrapper="true" <ccardheader-stub>
headerhtml="Doughnut Chart" Doughnut Chart
> </ccardheader-stub>
<cchartdoughnutexample-stub />
<ccardbody-stub>
<cchartdoughnutexample-stub />
</ccardbody-stub>
</ccard-stub> </ccard-stub>
<ccard-stub <ccard-stub>
bodywrapper="true" <ccardheader-stub>
headerhtml="Radar Chart" Radar Chart
> </ccardheader-stub>
<cchartradarexample-stub />
<ccardbody-stub>
<cchartradarexample-stub />
</ccardbody-stub>
</ccard-stub> </ccard-stub>
<ccard-stub <ccard-stub>
bodywrapper="true" <ccardheader-stub>
headerhtml="Pie Chart" Pie Chart
> </ccardheader-stub>
<cchartpieexample-stub />
<ccardbody-stub>
<cchartpieexample-stub />
</ccardbody-stub>
</ccard-stub> </ccard-stub>
<ccard-stub <ccard-stub>
bodywrapper="true" <ccardheader-stub>
headerhtml="Polar Area Chart" Polar Area Chart
> </ccardheader-stub>
<cchartpolarareaexample-stub />
<ccardbody-stub>
<cchartpolarareaexample-stub />
</ccardbody-stub>
</ccard-stub> </ccard-stub>
<ccard-stub <ccard-stub>
bodywrapper="true" <ccardheader-stub>
headerhtml="Simple line chart" Simple line chart
> </ccardheader-stub>
<cchartlinesimple-stub
backgroundcolor="transparent" <ccardbody-stub>
bordercolor="success" <cchartlinesimple-stub
datapoints="10,22,34,46,58,70,46,23,45,78,34,12" backgroundcolor="transparent"
label="Sales" bordercolor="success"
labels="months" datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
/> label="Sales"
labels="months"
/>
</ccardbody-stub>
</ccard-stub> </ccard-stub>
<ccard-stub <ccard-stub>
bodywrapper="true" <ccardheader-stub>
headerhtml="Simple pointed chart" Simple pointed chart
> </ccardheader-stub>
<cchartlinesimple-stub
backgroundcolor="transparent" <ccardbody-stub>
bordercolor="warning" <cchartlinesimple-stub
datapoints="10,22,34,46,58,70,46,23,45,78,34,12" backgroundcolor="transparent"
label="Sales" bordercolor="warning"
pointed="true" datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
/> label="Sales"
pointed="true"
/>
</ccardbody-stub>
</ccard-stub> </ccard-stub>
<ccard-stub <ccard-stub>
bodywrapper="true" <ccardheader-stub>
headerhtml="Simple bar chart" Simple bar chart
> </ccardheader-stub>
<cchartbarsimple-stub
backgroundcolor="danger" <ccardbody-stub>
datapoints="10,22,34,46,58,70,46,23,45,78,34,12" <cchartbarsimple-stub
label="Sales" backgroundcolor="danger"
/> datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
label="Sales"
/>
</ccardbody-stub>
</ccard-stub> </ccard-stub>
</ccardgroup-stub> </ccardgroup-stub>
</div> </div>
tests/unit/views/icons/Brands.spec.js
-2
View File
@@ -2,9 +2,7 @@ import Vue from 'vue'
import { shallowMount, mount } from '@vue/test-utils' import { shallowMount, mount } from '@vue/test-utils'
import CoreuiVue from '@coreui/vue' import CoreuiVue from '@coreui/vue'
import Brands from '@/views/icons/Brands' import Brands from '@/views/icons/Brands'
import { CIconPlugin } from '@coreui/icons/vue'
Vue.use(CIconPlugin)
Vue.use(CoreuiVue) Vue.use(CoreuiVue)
describe('Brands.vue', () => { describe('Brands.vue', () => {
tests/unit/views/icons/Flags.spec.js
-2
View File
@@ -1,11 +1,9 @@
import Vue from 'vue' import Vue from 'vue'
import { shallowMount } from '@vue/test-utils' import { shallowMount } from '@vue/test-utils'
import CoreuiVue from '@coreui/vue' import CoreuiVue from '@coreui/vue'
import { CIconPlugin } from '@coreui/icons/vue'
import Flags from '@/views/icons/Flags' import Flags from '@/views/icons/Flags'
Vue.use(CoreuiVue) Vue.use(CoreuiVue)
Vue.use(CIconPlugin)
describe('Flags.vue', () => { describe('Flags.vue', () => {
it('has a name', () => { it('has a name', () => {
tests/unit/views/icons/__snapshots__/Brands.spec.js.snap
+8531 -1290
View File
File diff suppressed because one or more lines are too long
tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
+6732 -803
View File
File diff suppressed because one or more lines are too long
tests/unit/views/icons/__snapshots__/Flags.spec.js.snap
+394 -18897
View File
File diff suppressed because one or more lines are too long
tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
+30 -22
View File
@@ -11,8 +11,8 @@ exports[`Alerts.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
<strong> <strong>
@@ -43,6 +43,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="primary" color="primary"
fade="true"
show="true" show="true"
> >
Primary Alert Primary Alert
@@ -50,6 +51,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="secondary" color="secondary"
fade="true"
show="true" show="true"
> >
Secondary Alert Secondary Alert
@@ -57,6 +59,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="success" color="success"
fade="true"
show="true" show="true"
> >
Success Alert Success Alert
@@ -64,6 +67,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="danger" color="danger"
fade="true"
show="true" show="true"
> >
Danger Alert Danger Alert
@@ -71,6 +75,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="warning" color="warning"
fade="true"
show="true" show="true"
> >
Warning Alert Warning Alert
@@ -78,6 +83,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="info" color="info"
fade="true"
show="true" show="true"
> >
Info Alert Info Alert
@@ -85,6 +91,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="light" color="light"
fade="true"
show="true" show="true"
> >
Light Alert Light Alert
@@ -92,6 +99,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="dark" color="dark"
fade="true"
show="true" show="true"
> >
Dark Alert Dark Alert
@@ -108,8 +116,8 @@ exports[`Alerts.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
Alert Alert
@@ -126,6 +134,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<div> <div>
<calert-stub <calert-stub
color="primary" color="primary"
fade="true"
show="true" show="true"
> >
@@ -142,6 +151,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="secondary" color="secondary"
fade="true"
show="true" show="true"
> >
@@ -158,6 +168,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="success" color="success"
fade="true"
show="true" show="true"
> >
@@ -174,6 +185,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="danger" color="danger"
fade="true"
show="true" show="true"
> >
@@ -190,6 +202,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="warning" color="warning"
fade="true"
show="true" show="true"
> >
@@ -206,6 +219,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="info" color="info"
fade="true"
show="true" show="true"
> >
@@ -222,6 +236,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="light" color="light"
fade="true"
show="true" show="true"
> >
@@ -238,6 +253,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
color="dark" color="dark"
fade="true"
show="true" show="true"
> >
@@ -250,7 +266,6 @@ exports[`Alerts.vue renders correctly 1`] = `
exactactiveclass="active" exactactiveclass="active"
href="#" href="#"
routertag="a" routertag="a"
tag="span"
target="_self" target="_self"
> >
an example link an example link
@@ -271,8 +286,8 @@ exports[`Alerts.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
Alerts Alerts
<small> <small>
@@ -283,6 +298,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<calert-stub <calert-stub
color="success" color="success"
fade="true"
show="true" show="true"
> >
<h4 <h4
@@ -320,8 +336,8 @@ exports[`Alerts.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
Alerts Alerts
@@ -334,6 +350,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
closebutton="true" closebutton="true"
color="secondary" color="secondary"
fade="true"
show="true" show="true"
> >
@@ -341,20 +358,10 @@ exports[`Alerts.vue renders correctly 1`] = `
</calert-stub> </calert-stub>
<calert-stub
closebutton="true"
color="secondary"
fade="true"
show="true"
>
Dismissible Alert with fade effect!
</calert-stub>
<calert-stub <calert-stub
class="alert-dismissible" class="alert-dismissible"
color="secondary" color="secondary"
fade="true"
show="true" show="true"
> >
@@ -395,8 +402,8 @@ exports[`Alerts.vue renders correctly 1`] = `
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
Alerts Alerts
@@ -426,6 +433,7 @@ exports[`Alerts.vue renders correctly 1`] = `
<calert-stub <calert-stub
closebutton="true" closebutton="true"
color="info" color="info"
fade="true"
show="10" show="10"
> >
tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
+17 -17
View File
@@ -10,12 +10,13 @@ exports[`Badges.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
<strong> <strong>
@@ -106,7 +107,6 @@ exports[`Badges.vue renders correctly 1`] = `
</span> </span>
</button> </button>
</footer> </footer>
<!---->
</div> </div>
</div> </div>
@@ -116,12 +116,13 @@ exports[`Badges.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
Badge Badge
@@ -181,23 +182,23 @@ exports[`Badges.vue renders correctly 1`] = `
Dark Dark
</span> </span>
</div> </div>
<!---->
</div> </div>
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
Badge Badge
<small> <small>
pills shape="pill"
</small> </small>
</header> </header>
@@ -252,18 +253,18 @@ exports[`Badges.vue renders correctly 1`] = `
Dark Dark
</span> </span>
</div> </div>
<!---->
</div> </div>
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="fa fa-align-justify" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
Badge Badge
@@ -339,7 +340,6 @@ exports[`Badges.vue renders correctly 1`] = `
Dark Dark
</a> </a>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
+3 -2
View File
@@ -14,8 +14,8 @@ exports[`Modals.vue renders correctly 1`] = `
> >
<ccard-stub> <ccard-stub>
<ccardheader-stub> <ccardheader-stub>
<i <cicon-stub
class="fa fa-align-justify" name="cil-justify-center"
/> />
Bootstrap Modals Bootstrap Modals
@@ -233,6 +233,7 @@ exports[`Modals.vue renders correctly 1`] = `
<cmodal-stub <cmodal-stub
backdrop="true" backdrop="true"
closeonbackdrop="true" closeonbackdrop="true"
color="primary"
fade="true" fade="true"
title="Modal title" title="Modal title"
> >
tests/unit/views/pages/__snapshots__/Login.spec.js.snap
+3 -3
View File
@@ -32,7 +32,6 @@ exports[`Login.vue renders correctly 1`] = `
autocomplete="username email" autocomplete="username email"
lazy="400" lazy="400"
placeholder="Username" placeholder="Username"
prependhtml=<i class='cui-user'></i>
type="text" type="text"
/> />
@@ -40,7 +39,6 @@ exports[`Login.vue renders correctly 1`] = `
autocomplete="curent-password" autocomplete="curent-password"
lazy="400" lazy="400"
placeholder="Password" placeholder="Password"
prependhtml=<i class='cui-lock-locked'></i>
type="password" type="password"
/> />
@@ -90,7 +88,9 @@ exports[`Login.vue renders correctly 1`] = `
<ccard-stub <ccard-stub
bodywrapper="true" bodywrapper="true"
class="text-white text-center bg-primary py-5 d-md-down-none" class="text-center py-5 d-md-down-none"
color="primary"
textcolor="white"
> >
<h2> <h2>
Sign up Sign up
tests/unit/views/pages/__snapshots__/Page404.spec.js.snap
-1
View File
@@ -41,7 +41,6 @@ exports[`Page404.vue renders correctly 1`] = `
class="mb-3" class="mb-3"
lazy="400" lazy="400"
placeholder="What are you looking for?" placeholder="What are you looking for?"
prependhtml=<i class='cui-magnifying-glass'></i>
type="text" type="text"
/> />
</div> </div>
tests/unit/views/pages/__snapshots__/Page500.spec.js.snap
-1
View File
@@ -38,7 +38,6 @@ exports[`Page500.vue renders correctly 1`] = `
class="mb-3" class="mb-3"
lazy="400" lazy="400"
placeholder="What are you looking for?" placeholder="What are you looking for?"
prependhtml=<i class='cui-magnifying-glass'></i>
type="text" type="text"
/> />
</ccol-stub> </ccol-stub>
tests/unit/views/pages/__snapshots__/Register.spec.js.snap
+1 -4
View File
@@ -34,7 +34,6 @@ exports[`Register.vue renders correctly 1`] = `
autocomplete="username" autocomplete="username"
lazy="400" lazy="400"
placeholder="Username" placeholder="Username"
prependhtml=<i class='cui-user'></i>
type="text" type="text"
/> />
@@ -42,7 +41,7 @@ exports[`Register.vue renders correctly 1`] = `
autocomplete="email" autocomplete="email"
lazy="400" lazy="400"
placeholder="Email" placeholder="Email"
prependhtml="@" prepend="@"
type="text" type="text"
/> />
@@ -50,7 +49,6 @@ exports[`Register.vue renders correctly 1`] = `
autocomplete="new-password" autocomplete="new-password"
lazy="400" lazy="400"
placeholder="Password" placeholder="Password"
prependhtml=<i class='cui-lock-locked'></i>
type="password" type="password"
/> />
@@ -59,7 +57,6 @@ exports[`Register.vue renders correctly 1`] = `
class="mb-4" class="mb-4"
lazy="400" lazy="400"
placeholder="Repeat password" placeholder="Repeat password"
prependhtml=<i class='cui-lock-locked'></i>
type="password" type="password"
/> />
tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
+8 -8
View File
@@ -5,12 +5,13 @@ exports[`Colors.vue renders correctly 1`] = `
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="cui-drop" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
Theme colors Theme colors
@@ -399,18 +400,18 @@ exports[`Colors.vue renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<!---->
</div> </div>
<div <div
class="card" class="card"
> >
<!---->
<header <header
class="card-header" class="card-header"
> >
<i <svg
class="cui-drop" class="c-icon"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
/> />
Grays Grays
@@ -846,7 +847,6 @@ exports[`Colors.vue renders correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
`; `;
tests/unit/views/users/__snapshots__/User.spec.js.snap
+2 -2
View File
@@ -17,14 +17,14 @@ exports[`User.vue renders correctly 1`] = `
</ccardheader-stub> </ccardheader-stub>
<ccardbody-stub> <ccardbody-stub>
<ctable-stub <cdatatable-stub
defaultsorter="[object Object]"
fields="[object Object],[object Object]" fields="[object Object],[object Object]"
fixed="true" fixed="true"
items="[object Object]" items="[object Object]"
itemsperpage="10" itemsperpage="10"
responsive="true" responsive="true"
small="" small=""
sortervalue="[object Object]"
striped="true" striped="true"
/> />
</ccardbody-stub> </ccardbody-stub>
tests/unit/views/users/__snapshots__/Users.spec.js.snap
+20 -14
View File
@@ -10,22 +10,28 @@ exports[`Users.vue renders correctly 1`] = `
xl="8" xl="8"
> >
<ccard-stub <ccard-stub
bodywrapper="true"
headerhtml="Users"
name="slide" name="slide"
> >
<ctable-stub <ccardheader-stub>
clickablerows="true"
defaultsorter="[object Object]" Users
fields="[object Object],[object Object],[object Object],[object Object]"
hover="true" </ccardheader-stub>
indexcolumn="true"
items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" <ccardbody-stub>
itemsperpage="5" <cdatatable-stub
pagination="[object Object]" clickablerows="true"
responsive="true" fields="[object Object],[object Object],[object Object],[object Object]"
striped="true" hover="true"
/> index-column=""
items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
itemsperpage="5"
pagination="[object Object]"
responsive="true"
sortervalue="[object Object]"
striped="true"
/>
</ccardbody-stub>
</ccard-stub> </ccard-stub>
</ccol-stub> </ccol-stub>
</crow-stub> </crow-stub>
tests/unit/views/widgets/Widgets.spec.js
-2
View File
@@ -2,9 +2,7 @@ import Vue from 'vue'
import { shallowMount } from '@vue/test-utils' import { shallowMount } from '@vue/test-utils'
import CoreuiVue from '@coreui/vue' import CoreuiVue from '@coreui/vue'
import Widgets from '@/views/widgets/Widgets' import Widgets from '@/views/widgets/Widgets'
import { CIconPlugin } from '@coreui/icons/vue'
Vue.use(CIconPlugin)
Vue.use(CoreuiVue) Vue.use(CoreuiVue)
describe('Widgets.vue', () => { describe('Widgets.vue', () => {

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