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

Update to v1.0.6

Browse Source 
- refactor: raw html to b-row, b-col, b-card, b-button components
- fix: Cards change variant="accent- to class="card-accent-
- refactor: Modal's ok-button variants
- refactor: forms with validation feedback
- update: bootstrap-vue to 1.1.0 closes #28
- update: to vue 2.5.6

from build v1.0.5
- update: bootstrap-vue to 1.0.x
- fix: use <b-form-radio-group> instead of <b-form-radio>
- refactor: <b-table> bootstrap-vue component in Tables closes #24
- refactor: extract Table component from Tables
- refactor: <b-table> bootstrap-vue component in Switches
- fix: add table-responsive-sm class to Tables closes #26
- refactor: use component <b-navbar-nav> instead of deprecated prop is-nav-bar
- fix: b-progress height property workaround (bootstrap-vue)
- chore: dependencies update
This commit is contained in:
xidedix
2017-11-21 18:28:34 +01:00
parent a1db02c4d0
commit 683cf9bb92
34 changed files with 3325 additions and 4220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+37
View File
@@ -0,0 +1,37 @@
## [vue](./README.md) version `changelog`
###### `v1.0.6`
- refactor: raw html to `b-row`, `b-col`, `b-card`, `b-button` components
- fix: Cards.vue: change `variant="accent-` to `class="card-accent-`
- refactor: Modal's ok-button variants
- refactor: forms with validation feedback
- update: bootstrap-vue to `1.1.0`
- update: to vue: `2.5.6`
###### `v1.0.5`
- update: bootstrap-vue to `1.0.x`
- fix: use `<b-form-radio-group>` instead of `<b-form-radio>` **[breaking change](https://bootstrap-vue.js.org/docs/components/form-radios)** :fire:
- refactor: `<b-table>` bootstrap-vue component in `Tables` #24
- refactor: extract `Table` component from `Tables`
- refactor: `<b-table>` bootstrap-vue component in `Switches` #24
- fix: add `table-responsive-sm` class to `Tables` #26
- refactor: use component `<b-navbar-nav>` instead of deprecated prop `is-nav-bar`
- fix: `b-progress` `height` property workaround (bootstrap-vue)
- chore: dependencies update
###### `v1.0.4`
- refactor: import Bootstrap 4 SCSS files from node_modules
- fix: callouts styles
###### `v1.0.3`
- update: Bootstrap version to `4.0.0-beta.2`
- update: vue-chartjs to `3.0.0` **[breaking change](https://github.com/apertureless/vue-chartjs/releases/tag/v3.0.0)** :fire:
###### `v1.0.2`
- update: to vue: `^2.5.x`
- update: bootstrap-vue to `1.0.0-beta.9`
- refactor: (vue `v2.5.x`) deprecated `<template scope="props">` replace with `<div slot-scope="props">`
- refactor: `HeaderDropdown` component added to `Header`
- refactor: `b-badge` component added (bootstrap-vue)
- chore: `package.json` project dependencies update
Vue_Full_Project/CHANGELOG.md
+16
View File
@@ -1,7 +1,23 @@
## [vue](./README.md) version `changelog` ## [vue](./README.md) version `changelog`
###### `v1.0.6`
- refactor: raw html to `b-row`, `b-col`, `b-card`, `b-button` components
- fix: Cards.vue: change `variant="accent-` to `class="card-accent-`
- refactor: Modal's ok-button variants
- refactor: forms with validation feedback
- update: bootstrap-vue to `1.1.0`
- update: to vue: `2.5.6`
###### `v1.0.5` ###### `v1.0.5`
- update: bootstrap-vue to `1.0.x`
- fix: use `<b-form-radio-group>` instead of `<b-form-radio>` **[breaking change](https://bootstrap-vue.js.org/docs/components/form-radios)** :fire: - fix: use `<b-form-radio-group>` instead of `<b-form-radio>` **[breaking change](https://bootstrap-vue.js.org/docs/components/form-radios)** :fire:
- refactor: `<b-table>` bootstrap-vue component in `Tables` #24
- refactor: extract `Table` component from `Tables`
- refactor: `<b-table>` bootstrap-vue component in `Switches` #24
- fix: add `table-responsive-sm` class to `Tables` #26
- refactor: use component `<b-navbar-nav>` instead of deprecated prop `is-nav-bar`
- fix: `b-progress` `height` property workaround (bootstrap-vue)
- chore: dependencies update
###### `v1.0.4` ###### `v1.0.4`
- refactor: import Bootstrap 4 SCSS files from node_modules - refactor: import Bootstrap 4 SCSS files from node_modules
Vue_Full_Project/package.json
+40 -40
View File
@@ -1,7 +1,7 @@
{ {
"name": "@coreui/vue", "name": "@coreui/vue",
"version": "1.0.5", "version": "1.0.6",
"description": "", "description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek", "author": "Łukasz Holeczek",
"homepage": "http://coreui.io", "homepage": "http://coreui.io",
"copyright": "Copyright 2017 creativeLabs Łukasz Holeczek", "copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",
@@ -18,66 +18,66 @@
}, },
"dependencies": { "dependencies": {
"bootstrap": "4.0.0-beta.2", "bootstrap": "4.0.0-beta.2",
"bootstrap-vue": "1.0.0-beta.9", "bootstrap-vue": "1.1.0",
"chart.js": "2.7.0", "chart.js": "2.7.1",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"simple-line-icons": "^2.4.1", "simple-line-icons": "^2.4.1",
"vue": "^2.5.2", "vue": "2.5.6",
"vue-chartjs": "^3.0.0", "vue-chartjs": "3.0.2",
"vue-router": "^3.0.1" "vue-router": "3.0.1"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "7.1.5", "autoprefixer": "7.1.6",
"babel-core": "6.26.0", "babel-core": "6.26.0",
"babel-eslint": "8.0.1", "babel-eslint": "8.0.2",
"babel-loader": "7.1.2", "babel-loader": "7.1.2",
"babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-runtime": "6.23.0",
"babel-preset-env": "1.6.1", "babel-preset-env": "1.6.1",
"babel-preset-stage-2": "6.24.1", "babel-preset-stage-2": "6.24.1",
"babel-register": "6.26.0", "babel-register": "6.26.0",
"chalk": "2.2.0", "chalk": "2.3.0",
"connect-history-api-fallback": "^1.4.0", "connect-history-api-fallback": "1.5.0",
"copy-webpack-plugin": "^4.1.1", "copy-webpack-plugin": "4.2.1",
"css-loader": "0.28.7", "css-loader": "0.28.7",
"eslint": "^4.9.0", "eslint": "4.11.0",
"eslint-friendly-formatter": "3.0.0", "eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.9.0", "eslint-loader": "1.9.0",
"eslint-plugin-html": "3.2.2", "eslint-plugin-html": "4.0.0",
"eslint-plugin-import": "2.7.0", "eslint-plugin-import": "2.8.0",
"eslint-plugin-node": "5.2.0", "eslint-plugin-node": "5.2.1",
"eslint-config-standard": "10.2.1", "eslint-config-standard": "10.2.1",
"eslint-plugin-promise": "3.6.0", "eslint-plugin-promise": "3.6.0",
"eslint-plugin-standard": "3.0.1", "eslint-plugin-standard": "3.0.1",
"eventsource-polyfill": "^0.9.6", "eventsource-polyfill": "0.9.6",
"express": "4.16.2", "express": "4.16.2",
"extract-text-webpack-plugin": "3.0.1", "extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5", "file-loader": "1.1.5",
"friendly-errors-webpack-plugin": "1.6.1", "friendly-errors-webpack-plugin": "1.6.1",
"html-webpack-plugin": "2.30.1", "html-webpack-plugin": "2.30.1",
"http-proxy-middleware": "0.17.4", "http-proxy-middleware": "0.17.4",
"webpack-bundle-analyzer": "2.9.0", "webpack-bundle-analyzer": "2.9.1",
"cross-env": "^5.1.0", "cross-env": "5.1.1",
"karma": "1.7.1", "karma": "1.7.1",
"karma-coverage": "^1.1.1", "karma-coverage": "1.1.1",
"karma-mocha": "^1.3.0", "karma-mocha": "1.3.0",
"karma-phantomjs-launcher": "1.0.4", "karma-phantomjs-launcher": "1.0.4",
"karma-phantomjs-shim": "^1.5.0", "karma-phantomjs-shim": "1.5.0",
"karma-sinon-chai": "1.3.2", "karma-sinon-chai": "1.3.3",
"karma-sourcemap-loader": "^0.3.7", "karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.31", "karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5", "karma-webpack": "2.0.6",
"lolex": "2.1.3", "lolex": "2.3.0",
"mocha": "4.0.1", "mocha": "4.0.1",
"chai": "4.1.2", "chai": "4.1.2",
"sinon": "4.0.1", "sinon": "4.1.2",
"sinon-chai": "2.14.0", "sinon-chai": "2.14.0",
"inject-loader": "3.0.1", "inject-loader": "3.0.1",
"babel-plugin-istanbul": "4.1.5", "babel-plugin-istanbul": "4.1.5",
"phantomjs-prebuilt": "^2.1.15", "phantomjs-prebuilt": "^2.1.16",
"chromedriver": "2.33.1", "chromedriver": "2.33.2",
"cross-spawn": "^5.1.0", "cross-spawn": "5.1.0",
"nightwatch": "0.9.16", "nightwatch": "0.9.16",
"selenium-server": "3.6.0", "selenium-server": "3.7.1",
"semver": "5.4.1", "semver": "5.4.1",
"shelljs": "0.7.8", "shelljs": "0.7.8",
"opn": "5.1.0", "opn": "5.1.0",
@@ -85,18 +85,18 @@
"ora": "1.3.0", "ora": "1.3.0",
"rimraf": "2.6.2", "rimraf": "2.6.2",
"url-loader": "0.6.2", "url-loader": "0.6.2",
"vue-loader": "13.3.0", "vue-loader": "13.5.0",
"vue-style-loader": "3.0.3", "vue-style-loader": "3.0.3",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "2.5.6",
"webpack": "^3.8.1", "webpack": "3.8.1",
"webpack-dev-middleware": "1.12.0", "webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.20.0", "webpack-hot-middleware": "2.20.0",
"webpack-merge": "4.1.0", "webpack-merge": "4.1.1",
"node-sass": "4.5.3", "node-sass": "4.7.1",
"sass-loader": "6.0.6" "sass-loader": "6.0.6"
}, },
"engines": { "engines": {
"node": ">= 4.0.0", "node": ">= 6.4.0",
"npm": ">= 3.0.0" "npm": ">= 5.0.0"
} }
} }
Vue_Full_Project/scss/style.scss
+1 -1
View File
@@ -1,6 +1,6 @@
/*! /*!
* CoreUI - Open Source Bootstrap Admin Template * CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.5 * @version v1.0.6
* @link http://coreui.io * @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek * Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @license MIT * @license MIT
Vue_Full_Project/src/components/Aside.vue
+4 -4
View File
@@ -201,16 +201,16 @@
<hr> <hr>
<h6>System Utilization</h6> <h6>System Utilization</h6>
<div class="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div> <div class="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
<b-progress class="progress-xs" variant="info" :value="25"></b-progress> <b-progress height={} class="progress-xs" variant="info" :value="25"></b-progress>
<small class="text-muted">348 Processes. 1/4 Cores.</small> <small class="text-muted">348 Processes. 1/4 Cores.</small>
<div class="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div> <div class="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
<b-progress class="progress-xs" variant="warning" :value="70"></b-progress> <b-progress height={} class="progress-xs" variant="warning" :value="70"></b-progress>
<small class="text-muted">11444GB/16384MB</small> <small class="text-muted">11444GB/16384MB</small>
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div> <div class="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
<b-progress class="progress-xs" variant="danger" :value="95"></b-progress> <b-progress height={} class="progress-xs" variant="danger" :value="95"></b-progress>
<small class="text-muted">243GB/256GB</small> <small class="text-muted">243GB/256GB</small>
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div> <div class="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
<b-progress class="progress-xs" variant="success" :value="10"></b-progress> <b-progress height={} class="progress-xs" variant="success" :value="10"></b-progress>
<small class="text-muted">25GB/256GB</small> <small class="text-muted">25GB/256GB</small>
</div> </div>
</b-tab> </b-tab>
Vue_Full_Project/src/components/Header.vue
+4 -4
View File
@@ -7,12 +7,12 @@
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle"> <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<b-nav is-nav-bar class="d-md-down-none"> <b-navbar-nav class="d-md-down-none">
<b-nav-item class="px-3">Dashboard</b-nav-item> <b-nav-item class="px-3">Dashboard</b-nav-item>
<b-nav-item class="px-3">Users</b-nav-item> <b-nav-item class="px-3">Users</b-nav-item>
<b-nav-item class="px-3">Settings</b-nav-item> <b-nav-item class="px-3">Settings</b-nav-item>
</b-nav> </b-navbar-nav>
<b-nav is-nav-bar class="ml-auto"> <b-navbar-nav class="ml-auto">
<b-nav-item class="d-md-down-none"> <b-nav-item class="d-md-down-none">
<i class="icon-bell"></i> <i class="icon-bell"></i>
<b-badge pill variant="danger">5</b-badge> <b-badge pill variant="danger">5</b-badge>
@@ -24,7 +24,7 @@
<i class="icon-location-pin"></i> <i class="icon-location-pin"></i>
</b-nav-item> </b-nav-item>
<HeaderDropdown/> <HeaderDropdown/>
</b-nav> </b-navbar-nav>
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle"> <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
Vue_Full_Project/src/components/Sidebar.vue
+3 -1
View File
@@ -10,7 +10,7 @@
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/> <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template> </template>
<template v-else-if="item.divider"> <template v-else-if="item.divider">
<li class="divider"></li> <SidebarNavDivider :classes="item.class"/>
</template> </template>
<template v-else> <template v-else>
<template v-if="item.children"> <template v-if="item.children">
@@ -52,6 +52,7 @@ import SidebarFooter from './SidebarFooter'
import SidebarForm from './SidebarForm' import SidebarForm from './SidebarForm'
import SidebarHeader from './SidebarHeader' import SidebarHeader from './SidebarHeader'
import SidebarMinimizer from './SidebarMinimizer' import SidebarMinimizer from './SidebarMinimizer'
import SidebarNavDivider from './SidebarNavDivider'
import SidebarNavDropdown from './SidebarNavDropdown' import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink' import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle' import SidebarNavTitle from './SidebarNavTitle'
@@ -70,6 +71,7 @@ export default {
SidebarForm, SidebarForm,
SidebarHeader, SidebarHeader,
SidebarMinimizer, SidebarMinimizer,
SidebarNavDivider,
SidebarNavDropdown, SidebarNavDropdown,
SidebarNavLink, SidebarNavLink,
SidebarNavTitle, SidebarNavTitle,
Vue_Full_Project/src/components/SidebarNavDivider.vue
+26
View File
@@ -0,0 +1,26 @@
<template>
<li :class="classList"></li>
</template>
<script>
export default {
name: 'sidebar-nav-divider',
props: {
classes: {
type: String,
default: ''
}
},
computed: {
classList () {
return [
'divider',
...this.itemClasses
]
},
itemClasses () {
return this.classes ? this.classes.split(' ') : ''
}
}
}
</script>
Vue_Full_Project/src/components/SidebarNavLink.vue
+9 -1
View File
@@ -36,18 +36,26 @@
variant: { variant: {
type: String, type: String,
default: '' default: ''
},
classes: {
type: String,
default: ''
} }
}, },
computed: { computed: {
classList () { classList () {
return [ return [
'nav-link', 'nav-link',
this.linkVariant this.linkVariant,
...this.itemClasses
] ]
}, },
linkVariant () { linkVariant () {
return this.variant ? `nav-link-${this.variant}` : '' return this.variant ? `nav-link-${this.variant}` : ''
}, },
itemClasses () {
return this.classes ? this.classes.split(' ') : []
},
isExternalLink () { isExternalLink () {
if (this.url.substring(0, 4) === 'http') { if (this.url.substring(0, 4) === 'http') {
return true return true
Vue_Full_Project/src/views/Charts.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="card-columns cols-2"> <b-card-group columns class="card-columns cols-2">
<b-card header="Line Chart"> <b-card header="Line Chart">
<div class="chart-wrapper"> <div class="chart-wrapper">
<line-example/> <line-example/>
@@ -31,7 +31,7 @@
<polar-area-example/> <polar-area-example/>
</div> </div>
</b-card> </b-card>
</div> </b-card-group>
</div> </div>
</template> </template>
<script> <script>
Vue_Full_Project/src/views/Dashboard.vue
+103 -103
View File
@@ -1,9 +1,9 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <b-row>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card class="bg-primary" :no-body="true"> <b-card no-body class="bg-primary" :no-body="true">
<div class="card-body pb-0"> <b-card-body class="pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right> <b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="button-content">
<i class="icon-settings"></i> <i class="icon-settings"></i>
@@ -15,13 +15,13 @@
</b-dropdown> </b-dropdown>
<h4 class="mb-0">9.823</h4> <h4 class="mb-0">9.823</h4>
<p>Members online</p> <p>Members online</p>
</div> </b-card-body>
<card-line1-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/> <card-line1-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card class="bg-info" :no-body="true"> <b-card no-body class="bg-info" :no-body="true">
<div class="card-body pb-0"> <b-card-body class="pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right no-caret> <b-dropdown class="float-right" variant="transparent p-0" right no-caret>
<template slot="button-content"> <template slot="button-content">
<i class="icon-location-pin"></i> <i class="icon-location-pin"></i>
@@ -33,13 +33,13 @@
</b-dropdown> </b-dropdown>
<h4 class="mb-0">9.823</h4> <h4 class="mb-0">9.823</h4>
<p>Members online</p> <p>Members online</p>
</div> </b-card-body>
<card-line2-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/> <card-line2-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card class="bg-warning" :no-body="true"> <b-card no-body class="bg-warning" :no-body="true">
<div class="card-body pb-0"> <b-card-body class="pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right> <b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="button-content">
<i class="icon-settings"></i> <i class="icon-settings"></i>
@@ -51,13 +51,13 @@
</b-dropdown> </b-dropdown>
<h4 class="mb-0">9.823</h4> <h4 class="mb-0">9.823</h4>
<p>Members online</p> <p>Members online</p>
</div> </b-card-body>
<card-line3-chart-example class="chart-wrapper" style="height:70px;" height="70"/> <card-line3-chart-example class="chart-wrapper" style="height:70px;" height="70"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card class="bg-danger" :no-body="true"> <b-card no-body class="bg-danger" :no-body="true">
<div class="card-body pb-0"> <b-card-body class="pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right> <b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="button-content">
<i class="icon-settings"></i> <i class="icon-settings"></i>
@@ -69,19 +69,19 @@
</b-dropdown> </b-dropdown>
<h4 class="mb-0">9.823</h4> <h4 class="mb-0">9.823</h4>
<p>Members online</p> <p>Members online</p>
</div> </b-card-body>
<card-bar-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/> <card-bar-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row>
<b-card> <b-card>
<div class="row"> <b-row>
<div class="col-sm-5"> <b-col sm="5">
<h4 class="card-title mb-0">Traffic</h4> <h4 class="card-title mb-0">Traffic</h4>
<div class="small text-muted">November 2016</div> <div class="small text-muted">November 2016</div>
</div><!--/.col--> </b-col>
<div class="col-sm-7 d-none d-md-block"> <b-col sm="7" class="d-none d-md-block">
<b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button> <b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
<b-button-toolbar class="float-right" aria-label="Toolbar with button groups"> <b-button-toolbar class="float-right" aria-label="Toolbar with button groups">
<b-button-group class="mr-3" aria-label="First group"> <b-button-group class="mr-3" aria-label="First group">
@@ -90,41 +90,41 @@
<b-button variant="outline-secondary">Year</b-button> <b-button variant="outline-secondary">Year</b-button>
</b-button-group> </b-button-group>
</b-button-toolbar> </b-button-toolbar>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row>
<main-chart-example class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example> <main-chart-example class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
<div slot="footer"> <div slot="footer">
<ul> <ul>
<li> <li>
<div class="text-muted">Visits</div> <div class="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong> <strong>29.703 Users (40%)</strong>
<b-progress class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress> <b-progress height={} class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress>
</li> </li>
<li class="d-none d-md-table-cell"> <li class="d-none d-md-table-cell">
<div class="text-muted">Unique</div> <div class="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong> <strong>24.093 Users (20%)</strong>
<b-progress class="progress-xs mt-2" :precision="1" variant="info" :value="20"></b-progress> <b-progress height={} class="progress-xs mt-2" :precision="1" variant="info" :value="20"></b-progress>
</li> </li>
<li> <li>
<div class="text-muted">Pageviews</div> <div class="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong> <strong>78.706 Views (60%)</strong>
<b-progress class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress> <b-progress height={} class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress>
</li> </li>
<li class="d-none d-md-table-cell"> <li class="d-none d-md-table-cell">
<div class="text-muted">New Users</div> <div class="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong> <strong>22.123 Users (80%)</strong>
<b-progress class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress> <b-progress height={} class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress>
</li> </li>
<li class="d-none d-md-table-cell"> <li class="d-none d-md-table-cell">
<div class="text-muted">Bounce Rate</div> <div class="text-muted">Bounce Rate</div>
<strong>40.15%</strong> <strong>40.15%</strong>
<b-progress class="progress-xs mt-2" :precision="1" :value="40"></b-progress> <b-progress height={} class="progress-xs mt-2" :precision="1" :value="40"></b-progress>
</li> </li>
</ul> </ul>
</div> </div>
</b-card> </b-card>
<div class="row"> <b-row>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<div class="social-box facebook"> <div class="social-box facebook">
<i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i>
<div class="chart-wrapper"> <div class="chart-wrapper">
@@ -141,8 +141,8 @@
</li> </li>
</ul> </ul>
</div><!--/.social-box--> </div><!--/.social-box-->
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<div class="social-box twitter"> <div class="social-box twitter">
<i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i>
<div class="chart-wrapper"> <div class="chart-wrapper">
@@ -159,8 +159,8 @@
</li> </li>
</ul> </ul>
</div><!--/.social-box--> </div><!--/.social-box-->
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<div class="social-box linkedin"> <div class="social-box linkedin">
<i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i>
<div class="chart-wrapper"> <div class="chart-wrapper">
@@ -177,8 +177,8 @@
</li> </li>
</ul> </ul>
</div><!--/.social-box--> </div><!--/.social-box-->
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<div class="social-box google-plus"> <div class="social-box google-plus">
<i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i>
<div class="chart-wrapper"> <div class="chart-wrapper">
@@ -195,15 +195,15 @@
</li> </li>
</ul> </ul>
</div><!--/.social-box--> </div><!--/.social-box-->
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row>
<div class="row"> <b-row>
<div class="col-md-12"> <b-col md="12">
<b-card header="Traffic &amp; Sales"> <b-card header="Traffic &amp; Sales">
<div class="row"> <b-row>
<div class="col-sm-12 col-lg-4"> <b-col sm="12" lg="4">
<div class="row"> <b-row>
<div class="col-sm-6"> <b-col sm="6">
<Callout variant="info"> <Callout variant="info">
<small class="text-muted">New Clients</small><br> <small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong> <strong class="h4">9,123</strong>
@@ -211,8 +211,8 @@
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" /> <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />
</div> </div>
</Callout> </Callout>
</div><!--/.col--> </b-col>
<div class="col-sm-6"> <b-col sm="6">
<Callout variant="danger"> <Callout variant="danger">
<small class="text-muted">Recurring Clients</small><br> <small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong> <strong class="h4">22,643</strong>
@@ -220,8 +220,8 @@
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#f86c6b" width="80" height="30" /> <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#f86c6b" width="80" height="30" />
</div> </div>
</Callout> </Callout>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row>
<hr class="mt-0"> <hr class="mt-0">
<ul class="horizontal-bars"> <ul class="horizontal-bars">
<li> <li>
@@ -229,8 +229,8 @@
Monday Monday
</div> </div>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="34" variant="info"></b-progress> <b-progress height={} class="progress-xs" :value="34" variant="info"></b-progress>
<b-progress class="progress-xs" :value="78" variant="danger"></b-progress> <b-progress height={} class="progress-xs" :value="78" variant="danger"></b-progress>
</div> </div>
</li> </li>
<li> <li>
@@ -238,8 +238,8 @@
Tuesday Tuesday
</div> </div>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="56" variant="info"></b-progress> <b-progress height={} class="progress-xs" :value="56" variant="info"></b-progress>
<b-progress class="progress-xs" :value="94" variant="danger"></b-progress> <b-progress height={} class="progress-xs" :value="94" variant="danger"></b-progress>
</div> </div>
</li> </li>
<li> <li>
@@ -247,8 +247,8 @@
Wednesday Wednesday
</div> </div>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="12" variant="info"></b-progress> <b-progress height={} class="progress-xs" :value="12" variant="info"></b-progress>
<b-progress class="progress-xs" :value="67" variant="danger"></b-progress> <b-progress height={} class="progress-xs" :value="67" variant="danger"></b-progress>
</div> </div>
</li> </li>
<li> <li>
@@ -256,8 +256,8 @@
Thursday Thursday
</div> </div>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="43" variant="info"></b-progress> <b-progress height={} class="progress-xs" :value="43" variant="info"></b-progress>
<b-progress class="progress-xs" :value="91" variant="danger"></b-progress> <b-progress height={} class="progress-xs" :value="91" variant="danger"></b-progress>
</div> </div>
</li> </li>
<li> <li>
@@ -265,8 +265,8 @@
Friday Friday
</div> </div>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="22" variant="info"></b-progress> <b-progress height={} class="progress-xs" :value="22" variant="info"></b-progress>
<b-progress class="progress-xs" :value="73" variant="danger"></b-progress> <b-progress height={} class="progress-xs" :value="73" variant="danger"></b-progress>
</div> </div>
</li> </li>
<li> <li>
@@ -274,8 +274,8 @@
Saturday Saturday
</div> </div>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="53" variant="info"></b-progress> <b-progress height={} class="progress-xs" :value="53" variant="info"></b-progress>
<b-progress class="progress-xs" :value="82" variant="danger"></b-progress> <b-progress height={} class="progress-xs" :value="82" variant="danger"></b-progress>
</div> </div>
</li> </li>
<li> <li>
@@ -283,18 +283,18 @@
Sunday Sunday
</div> </div>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="9" variant="info"></b-progress> <b-progress height={} class="progress-xs" :value="9" variant="info"></b-progress>
<b-progress class="progress-xs" :value="69" variant="danger"></b-progress> <b-progress height={} class="progress-xs" :value="69" variant="danger"></b-progress>
</div> </div>
</li> </li>
<li class="legend"> <li class="legend">
<b-badge pill variant="info"></b-badge> <small>New clients</small> &nbsp; <b-badge pill variant="danger"></b-badge> <small>Recurring clients</small> <b-badge pill variant="info"></b-badge> <small>New clients</small> &nbsp; <b-badge pill variant="danger"></b-badge> <small>Recurring clients</small>
</li> </li>
</ul> </ul>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-4"> <b-col sm="6" lg="4">
<div class="row"> <b-row>
<div class="col-sm-6"> <b-col sm="6">
<Callout variant="warning"> <Callout variant="warning">
<small class="text-muted">Pageviews</small><br> <small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong> <strong class="h4">78,623</strong>
@@ -302,8 +302,8 @@
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30" /> <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30" />
</div> </div>
</Callout> </Callout>
</div><!--/.col--> </b-col>
<div class="col-sm-6"> <b-col sm="6">
<Callout variant="success"> <Callout variant="success">
<small class="text-muted">Organic</small><br> <small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong> <strong class="h4">49,123</strong>
@@ -311,8 +311,8 @@
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80px" height="30" /> <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80px" height="30" />
</div> </div>
</Callout> </Callout>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row>
<hr class="mt-0"> <hr class="mt-0">
<ul class="horizontal-bars type-2"> <ul class="horizontal-bars type-2">
<li> <li>
@@ -320,7 +320,7 @@
<span class="title">Male</span> <span class="title">Male</span>
<span class="value">43%</span> <span class="value">43%</span>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="43" variant="warning"></b-progress> <b-progress height={} class="progress-xs" :value="43" variant="warning"></b-progress>
</div> </div>
</li> </li>
<li> <li>
@@ -328,7 +328,7 @@
<span class="title">Female</span> <span class="title">Female</span>
<span class="value">37%</span> <span class="value">37%</span>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="37" variant="warning"></b-progress> <b-progress height={} class="progress-xs" :value="37" variant="warning"></b-progress>
</div> </div>
</li> </li>
<li class="divider"></li> <li class="divider"></li>
@@ -337,7 +337,7 @@
<span class="title">Organic Search</span> <span class="title">Organic Search</span>
<span class="value">191,235 <span class="text-muted small">(56%)</span></span> <span class="value">191,235 <span class="text-muted small">(56%)</span></span>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="56" variant="success"></b-progress> <b-progress height={} class="progress-xs" :value="56" variant="success"></b-progress>
</div> </div>
</li> </li>
<li> <li>
@@ -345,7 +345,7 @@
<span class="title">Facebook</span> <span class="title">Facebook</span>
<span class="value">51,223 <span class="text-muted small">(15%)</span></span> <span class="value">51,223 <span class="text-muted small">(15%)</span></span>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="15" variant="success"></b-progress> <b-progress height={} class="progress-xs" :value="15" variant="success"></b-progress>
</div> </div>
</li> </li>
<li> <li>
@@ -353,7 +353,7 @@
<span class="title">Twitter</span> <span class="title">Twitter</span>
<span class="value">37,564 <span class="text-muted small">(11%)</span></span> <span class="value">37,564 <span class="text-muted small">(11%)</span></span>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="11" variant="success"></b-progress> <b-progress height={} class="progress-xs" :value="11" variant="success"></b-progress>
</div> </div>
</li> </li>
<li> <li>
@@ -361,17 +361,17 @@
<span class="title">LinkedIn</span> <span class="title">LinkedIn</span>
<span class="value">27,319 <span class="text-muted small">(8%)</span></span> <span class="value">27,319 <span class="text-muted small">(8%)</span></span>
<div class="bars"> <div class="bars">
<b-progress class="progress-xs" :value="8" variant="success"></b-progress> <b-progress height={} class="progress-xs" :value="8" variant="success"></b-progress>
</div> </div>
</li> </li>
<li class="divider text-center"> <li class="divider text-center">
<button type="button" class="btn btn-sm btn-link text-muted"><i class="icon-options"></i></button> <b-button variant="link" size="sm" class="text-muted"><i class="icon-options"></i></b-button>
</li> </li>
</ul> </ul>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-4"> <b-col sm="6" lg="4">
<div class="row"> <b-row>
<div class="col-sm-6"> <b-col sm="6">
<Callout> <Callout>
<small class="text-muted">CTR</small><br> <small class="text-muted">CTR</small><br>
<strong class="h4">23%</strong> <strong class="h4">23%</strong>
@@ -379,8 +379,8 @@
<callout-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" width="80px" height="30" /> <callout-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" width="80px" height="30" />
</div> </div>
</Callout> </Callout>
</div><!--/.col--> </b-col>
<div class="col-sm-6"> <b-col sm="6">
<Callout variant="primary"> <Callout variant="primary">
<small class="text-muted">Bounce Rate</small><br> <small class="text-muted">Bounce Rate</small><br>
<strong class="h4">5%</strong> <strong class="h4">5%</strong>
@@ -388,8 +388,8 @@
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80px" height="30" /> <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80px" height="30" />
</div> </div>
</Callout> </Callout>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row>
<hr class="mt-0"> <hr class="mt-0">
<ul class="icons-list"> <ul class="icons-list">
<li> <li>
@@ -403,7 +403,7 @@
<strong>1.924</strong> <strong>1.924</strong>
</div> </div>
<div class="actions"> <div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button> <b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
</div> </div>
</li> </li>
<li> <li>
@@ -417,7 +417,7 @@
<strong>1.224</strong> <strong>1.224</strong>
</div> </div>
<div class="actions"> <div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button> <b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
</div> </div>
</li> </li>
<li> <li>
@@ -431,7 +431,7 @@
<strong>1.163</strong> <strong>1.163</strong>
</div> </div>
<div class="actions"> <div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button> <b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
</div> </div>
</li> </li>
<li> <li>
@@ -445,7 +445,7 @@
<strong>928</strong> <strong>928</strong>
</div> </div>
<div class="actions"> <div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button> <b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
</div> </div>
</li> </li>
<li> <li>
@@ -459,7 +459,7 @@
<strong>893</strong> <strong>893</strong>
</div> </div>
<div class="actions"> <div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button> <b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
</div> </div>
</li> </li>
<li> <li>
@@ -473,7 +473,7 @@
<strong>121.924</strong> <strong>121.924</strong>
</div> </div>
<div class="actions"> <div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button> <b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
</div> </div>
</li> </li>
<li> <li>
@@ -487,15 +487,15 @@
<strong>12.125</strong> <strong>12.125</strong>
</div> </div>
<div class="actions"> <div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button> <b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
</div> </div>
</li> </li>
<li class="divider text-center"> <li class="divider text-center">
<button type="button" class="btn btn-sm btn-link text-muted"><i class="icon-options"></i></button> <b-button size="sm" variant="link" class="text-muted"><i class="icon-options"></i></b-button>
</li> </li>
</ul> </ul>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row>
<br/> <br/>
<b-table class="table-outline table-responsive-sm mb-0" hover <b-table class="table-outline table-responsive-sm mb-0" hover
:items="tableItems" :items="tableItems"
@@ -525,7 +525,7 @@
<small class="text-muted">{{item.value.period}}</small> <small class="text-muted">{{item.value.period}}</small>
</div> </div>
</div> </div>
<b-progress class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress> <b-progress height={} class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
</div> </div>
<i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i> <i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
<div slot="activity" slot-scope="item"> <div slot="activity" slot-scope="item">
@@ -534,8 +534,8 @@
</div> </div>
</b-table> </b-table>
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row>
</div> </div>
</template> </template>
Vue_Full_Project/src/views/Widgets.vue
+153 -153
View File
@@ -1,235 +1,235 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <b-row>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card> <b-card>
<div class="h4 m-0">89.9%</div> <div class="h4 m-0">89.9%</div>
<div>Lorem ipsum...</div> <div>Lorem ipsum...</div>
<b-progress class="progress-xs my-3" variant="success" :value="25"/> <b-progress height={} class="progress-xs my-3" variant="success" :value="25"/>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card> <b-card>
<div class="h4 m-0">12.124</div> <div class="h4 m-0">12.124</div>
<div>Lorem ipsum...</div> <div>Lorem ipsum...</div>
<b-progress class="progress-xs my-3" variant="info" :value="25"/> <b-progress height={} class="progress-xs my-3" variant="info" :value="25"/>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card> <b-card>
<div class="h4 m-0">$98.111,00</div> <div class="h4 m-0">$98.111,00</div>
<div>Lorem ipsum...</div> <div>Lorem ipsum...</div>
<b-progress class="progress-xs my-3" variant="warning" :value="25"/> <b-progress height={} class="progress-xs my-3" variant="warning" :value="25"/>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card> <b-card>
<div class="h4 m-0">2 TB</div> <div class="h4 m-0">2 TB</div>
<div>Lorem ipsum...</div> <div>Lorem ipsum...</div>
<b-progress class="progress-xs my-3" variant="danger" :value="25"/> <b-progress height={} class="progress-xs my-3" variant="danger" :value="25"/>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card class="text-white bg-primary"> <b-card class="text-white bg-primary">
<div class="h4 m-0">89.9%</div> <div class="h4 m-0">89.9%</div>
<div>Lorem ipsum...</div> <div>Lorem ipsum...</div>
<b-progress class="progress-white progress-xs my-3" :value="25"/> <b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card class="text-white bg-warning"> <b-card class="text-white bg-warning">
<div class="h4 m-0">12.124</div> <div class="h4 m-0">12.124</div>
<div>Lorem ipsum...</div> <div>Lorem ipsum...</div>
<b-progress class="progress-white progress-xs my-3" :value="25"/> <b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card class="text-white bg-danger"> <b-card class="text-white bg-danger">
<div class="h4 m-0">$98.111,00</div> <div class="h4 m-0">$98.111,00</div>
<div>Lorem ipsum...</div> <div>Lorem ipsum...</div>
<b-progress class="progress-white progress-xs my-3" :value="25"/> <b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-lg-3"> <b-col sm="6" lg="3">
<b-card class="text-white bg-info"> <b-card class="text-white bg-info">
<div class="h4 m-0">2 TB</div> <div class="h4 m-0">2 TB</div>
<div>Lorem ipsum...</div> <div>Lorem ipsum...</div>
<b-progress class="progress-white progress-xs my-3" :value="25"/> <b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small> <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-3 clearfix"> <b-card-body class="p-3 clearfix">
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i> <i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div> <div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-3 clearfix"> <b-card-body class="p-3 clearfix">
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i> <i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-info mb-0 mt-2">$1.999,50</div> <div class="h5 text-info mb-0 mt-2">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-3 clearfix"> <b-card-body class="p-3 clearfix">
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i> <i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div> <div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-3 clearfix"> <b-card-body class="p-3 clearfix">
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i> <i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div> <div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true" footer-class="px-3 py-2"> <b-card :no-body="true" footer-class="px-3 py-2">
<div class="card-body p-3 clearfix"> <b-card-body class="p-3 clearfix">
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i> <i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div> <div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
<div slot="footer"> <div slot="footer">
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a> <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
</div> </div>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true" footer-class="px-3 py-2"> <b-card :no-body="true" footer-class="px-3 py-2">
<div class="card-body p-3 clearfix"> <b-card-body class="p-3 clearfix">
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i> <i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-info mb-0 mt-2">$1.999,50</div> <div class="h5 text-info mb-0 mt-2">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
<div slot="footer"> <div slot="footer">
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a> <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
</div> </div>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true" footer-class="px-3 py-2"> <b-card :no-body="true" footer-class="px-3 py-2">
<div class="card-body p-3 clearfix"> <b-card-body class="p-3 clearfix">
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i> <i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div> <div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
<div slot="footer"> <div slot="footer">
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a> <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
</div> </div>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true" footer-class="px-3 py-2"> <b-card :no-body="true" footer-class="px-3 py-2">
<div class="card-body p-3 clearfix"> <b-card-body class="p-3 clearfix">
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i> <i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div> <div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
<div slot="footer"> <div slot="footer">
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a> <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
</div> </div>
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <b-card-body class="p-0 clearfix">
<i class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"></i> <i class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"></i>
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div> <div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <b-card-body class="p-0 clearfix">
<i class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"></i> <i class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"></i>
<div class="h5 text-info mb-0 pt-3">$1.999,50</div> <div class="h5 text-info mb-0 pt-3">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <b-card-body class="p-0 clearfix">
<i class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"></i> <i class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"></i>
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div> <div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <b-card-body class="p-0 clearfix">
<i class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"></i> <i class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"></i>
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div> <div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <b-card-body class="p-0 clearfix">
<i class="fa fa-cogs bg-primary p-4 px-5 font-2xl mr-3 float-left"></i> <i class="fa fa-cogs bg-primary p-4 px-5 font-2xl mr-3 float-left"></i>
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div> <div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <b-card-body class="p-0 clearfix">
<i class="fa fa-laptop bg-info p-4 px-5 font-2xl mr-3 float-left"></i> <i class="fa fa-laptop bg-info p-4 px-5 font-2xl mr-3 float-left"></i>
<div class="h5 text-info mb-0 pt-3">$1.999,50</div> <div class="h5 text-info mb-0 pt-3">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <b-card-body class="p-0 clearfix">
<i class="fa fa-moon-o bg-warning p-4 px-5 font-2xl mr-3 float-left"></i> <i class="fa fa-moon-o bg-warning p-4 px-5 font-2xl mr-3 float-left"></i>
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div> <div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-6 col-lg-3"> <b-col cols="6" lg="3">
<b-card :no-body="true"> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <b-card-body class="p-0 clearfix">
<i class="fa fa-bell bg-danger p-4 px-5 font-2xl mr-3 float-left"></i> <i class="fa fa-bell bg-danger p-4 px-5 font-2xl mr-3 float-left"></i>
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div> <div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div> <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
</div> </b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-md-3 col-sm-6"> <b-col md="3" sm="6">
<div class="social-box facebook"> <div class="social-box facebook">
<i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i>
<ul> <ul>
@@ -243,8 +243,8 @@
</li> </li>
</ul> </ul>
</div><!--/social-box--> </div><!--/social-box-->
</div><!--/.col--> </b-col>
<div class="col-md-3 col-sm-6"> <b-col md="3" sm="6">
<div class="social-box twitter"> <div class="social-box twitter">
<i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i>
<ul> <ul>
@@ -258,8 +258,8 @@
</li> </li>
</ul> </ul>
</div><!--/social-box--> </div><!--/social-box-->
</div><!--/.col--> </b-col>
<div class="col-md-3 col-sm-6"> <b-col md="3" sm="6">
<div class="social-box linkedin"> <div class="social-box linkedin">
<i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i>
<ul> <ul>
@@ -273,8 +273,8 @@
</li> </li>
</ul> </ul>
</div><!--/social-box--> </div><!--/social-box-->
</div><!--/.col--> </b-col>
<div class="col-md-3 col-sm-6"> <b-col md="3" sm="6">
<div class="social-box google-plus"> <div class="social-box google-plus">
<i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i>
<ul> <ul>
@@ -288,16 +288,16 @@
</li> </li>
</ul> </ul>
</div><!--/social-box--> </div><!--/social-box-->
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="card-group mb-4"> <b-card-group class="mb-4">
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-people"></i> <i class="icon-people"></i>
</div> </div>
<div class="h4 mb-0">87.500</div> <div class="h4 mb-0">87.500</div>
<small class="text-muted text-uppercase font-weight-bold">Visitors</small> <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
<b-progress class="progress-xs mt-3 mb-0" variant="info" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
</b-card> </b-card>
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
@@ -305,7 +305,7 @@
</div> </div>
<div class="h4 mb-0">385</div> <div class="h4 mb-0">385</div>
<small class="text-muted text-uppercase font-weight-bold">New Clients</small> <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
<b-progress class="progress-xs mt-3 mb-0" variant="success" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0" variant="success" :value="25"/>
</b-card> </b-card>
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
@@ -313,7 +313,7 @@
</div> </div>
<div class="h4 mb-0">1238</div> <div class="h4 mb-0">1238</div>
<small class="text-muted text-uppercase font-weight-bold">Products sold</small> <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
<b-progress class="progress-xs mt-3 mb-0" variant="warning" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0" variant="warning" :value="25"/>
</b-card> </b-card>
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
@@ -321,7 +321,7 @@
</div> </div>
<div class="h4 mb-0">28%</div> <div class="h4 mb-0">28%</div>
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small> <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
<b-progress class="progress-xs mt-3 mb-0" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0" :value="25"/>
</b-card> </b-card>
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
@@ -329,133 +329,133 @@
</div> </div>
<div class="h4 mb-0">5:34:11</div> <div class="h4 mb-0">5:34:11</div>
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small> <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
<b-progress class="progress-xs mt-3 mb-0" variant="danger" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0" variant="danger" :value="25"/>
</b-card> </b-card>
</div> </b-card-group>
<div class="row"> <b-row>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-people"></i> <i class="icon-people"></i>
</div> </div>
<div class="h4 mb-0">87.500</div> <div class="h4 mb-0">87.500</div>
<small class="text-muted text-uppercase font-weight-bold">Visitors</small> <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
<b-progress class="progress-xs mt-3 mb-0" variant="info" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-user-follow"></i> <i class="icon-user-follow"></i>
</div> </div>
<div class="h4 mb-0">385</div> <div class="h4 mb-0">385</div>
<small class="text-muted text-uppercase font-weight-bold">New Clients</small> <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
<b-progress class="progress-xs mt-3 mb-0" variant="success" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0" variant="success" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-basket-loaded"></i> <i class="icon-basket-loaded"></i>
</div> </div>
<div class="h4 mb-0">1238</div> <div class="h4 mb-0">1238</div>
<small class="text-muted text-uppercase font-weight-bold">Products sold</small> <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
<b-progress class="progress-xs mt-3 mb-0" variant="warning" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0" variant="warning" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-pie-chart"></i> <i class="icon-pie-chart"></i>
</div> </div>
<div class="h4 mb-0">28%</div> <div class="h4 mb-0">28%</div>
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small> <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
<b-progress class="progress-xs mt-3 mb-0" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-speedometer"></i> <i class="icon-speedometer"></i>
</div> </div>
<div class="h4 mb-0">5:34:11</div> <div class="h4 mb-0">5:34:11</div>
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small> <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
<b-progress class="progress-xs mt-3 mb-0" variant="danger" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0" variant="danger" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card> <b-card>
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-speech"></i> <i class="icon-speech"></i>
</div> </div>
<div class="h4 mb-0">972</div> <div class="h4 mb-0">972</div>
<small class="text-muted text-uppercase font-weight-bold">Comments</small> <small class="text-muted text-uppercase font-weight-bold">Comments</small>
<b-progress class="progress-xs mt-3 mb-0"variant="info" :value="25"/> <b-progress height={} class="progress-xs mt-3 mb-0"variant="info" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card class="text-white bg-info"> <b-card class="text-white bg-info">
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-people"></i> <i class="icon-people"></i>
</div> </div>
<div class="h4 mb-0">87.500</div> <div class="h4 mb-0">87.500</div>
<small class="text-muted text-uppercase font-weight-bold">Visitors</small> <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
<b-progress class="progress-white progress-xs mt-3" :value="25"/> <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card class="text-white bg-success"> <b-card class="text-white bg-success">
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-user-follow"></i> <i class="icon-user-follow"></i>
</div> </div>
<div class="h4 mb-0">385</div> <div class="h4 mb-0">385</div>
<small class="text-muted text-uppercase font-weight-bold">New Clients</small> <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
<b-progress class="progress-white progress-xs mt-3" :value="25"/> <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card class="text-white bg-warning"> <b-card class="text-white bg-warning">
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-basket-loaded"></i> <i class="icon-basket-loaded"></i>
</div> </div>
<div class="h4 mb-0">1238</div> <div class="h4 mb-0">1238</div>
<small class="text-muted text-uppercase font-weight-bold">Products sold</small> <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
<b-progress class="progress-white progress-xs mt-3" :value="25"/> <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card class="text-white bg-primary"> <b-card class="text-white bg-primary">
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-pie-chart"></i> <i class="icon-pie-chart"></i>
</div> </div>
<div class="h4 mb-0">28%</div> <div class="h4 mb-0">28%</div>
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small> <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
<b-progress class="progress-white progress-xs mt-3" :value="25"/> <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card class="text-white bg-danger"> <b-card class="text-white bg-danger">
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-speedometer"></i> <i class="icon-speedometer"></i>
</div> </div>
<div class="h4 mb-0">5:34:11</div> <div class="h4 mb-0">5:34:11</div>
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small> <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
<b-progress class="progress-white progress-xs mt-3" :value="25"/> <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-2"> <b-col sm="6" md="2">
<b-card class="text-white bg-info"> <b-card class="text-white bg-info">
<div class="h1 text-muted text-right mb-4"> <div class="h1 text-muted text-right mb-4">
<i class="icon-speech"></i> <i class="icon-speech"></i>
</div> </div>
<div class="h4 mb-0">972</div> <div class="h4 mb-0">972</div>
<small class="text-muted text-uppercase font-weight-bold">Comments</small> <small class="text-muted text-uppercase font-weight-bold">Comments</small>
<b-progress class="progress-white progress-xs mt-3" :value="25"/> <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
</div> </div>
</template> </template>
Vue_Full_Project/src/views/components/Buttons.vue
+6 -6
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <b-row>
<div class="col-md-6"> <b-col md="6">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Options</strong> <strong>Options</strong>
@@ -114,8 +114,8 @@
<b-button size="lg" variant="danger" :block="true">Block level button</b-button> <b-button size="lg" variant="danger" :block="true">Block level button</b-button>
<b-button size="lg" variant="link" :block="true">Block level button</b-button> <b-button size="lg" variant="link" :block="true">Block level button</b-button>
</b-card> </b-card>
</div><!--/.col--> </b-col><!--/.col-->
<div class="col-md-6"> <b-col md="6">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Options</strong> <strong>Options</strong>
@@ -218,8 +218,8 @@
<b-button size="lg" variant="outline-warning" :block="true">Block level button</b-button> <b-button size="lg" variant="outline-warning" :block="true">Block level button</b-button>
<b-button size="lg" variant="outline-danger" :block="true">Block level button</b-button> <b-button size="lg" variant="outline-danger" :block="true">Block level button</b-button>
</b-card> </b-card>
</div><!--/.col--> </b-col><!--/.col-->
</div><!--/.row--> </b-row><!--/.row-->
</div> </div>
</template> </template>
Vue_Full_Project/src/views/components/Cards.vue
+82 -82
View File
@@ -1,23 +1,23 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <b-row>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card title"> <b-card header="Card title">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card show-footer> <b-card show-footer>
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 slot="footer">Card footer</div> <div slot="footer">Card footer</div>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="<i class='fa fa-check'></i> Card with icon"> <b-card header="<i class='fa fa-check'></i> Card with icon">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card> <b-card>
<div slot="header"> <div slot="header">
Card with switch Card with switch
@@ -29,8 +29,8 @@
</div> </div>
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card> <b-card>
<div slot="header"> <div slot="header">
Card with label Card with label
@@ -38,8 +38,8 @@
</div> </div>
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card> <b-card>
<div slot="header"> <div slot="header">
Card with label Card with label
@@ -47,75 +47,75 @@
</div> </div>
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card outline" class="border-primary"> <b-card header="Card outline" border-variant="primary">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card outline" class="border-secondary"> <b-card header="Card outline" border-variant="secondary">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card outline" class="border-success"> <b-card header="Card outline" border-variant="success">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card outline" class="border-info"> <b-card header="Card outline" border-variant="info">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card outline" class="border-warning"> <b-card header="Card outline" border-variant="warning">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card outline" class="border-danger"> <b-card header="Card outline" border-variant="danger">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card variant="accent-primary" header="Card with accent"> <b-card class="card-accent-primary" header="Card with accent">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card variant="accent-secondary" header="Card with accent"> <b-card class="card-accent-secondary" header="Card with accent">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card variant="accent-success" header="Card with accent"> <b-card class="card-accent-success" header="Card with accent">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card variant="accent-info" header="Card with accent"> <b-card class="card-accent-info" header="Card with accent">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card variant="accent-warning" header="Card with accent"> <b-card class="card-accent-warning" header="Card with accent">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card variant="accent-danger" header="Card with accent"> <b-card class="card-accent-danger" header="Card with accent">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card class="bg-primary text-center"> <b-card class="bg-primary text-center">
<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>
@@ -124,8 +124,8 @@
</footer> </footer>
</blockquote> </blockquote>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card class="bg-success text-center"> <b-card class="bg-success text-center">
<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>
@@ -134,8 +134,8 @@
</footer> </footer>
</blockquote> </blockquote>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card class="bg-info text-center"> <b-card class="bg-info text-center">
<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>
@@ -144,8 +144,8 @@
</footer> </footer>
</blockquote> </blockquote>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card class="bg-warning text-center"> <b-card class="bg-warning text-center">
<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>
@@ -154,8 +154,8 @@
</footer> </footer>
</blockquote> </blockquote>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card class="bg-danger text-center"> <b-card class="bg-danger text-center">
<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>
@@ -164,8 +164,8 @@
</footer> </footer>
</blockquote> </blockquote>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card class="bg-secondary text-center"> <b-card class="bg-secondary text-center">
<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>
@@ -174,40 +174,40 @@
</footer> </footer>
</blockquote> </blockquote>
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card title" class="bg-primary"> <b-card header="Card title" class="bg-primary">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card title" class="bg-success"> <b-card header="Card title" class="bg-success">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card title" class="bg-info"> <b-card header="Card title" class="bg-info">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card title" class="bg-warning"> <b-card header="Card title" class="bg-warning">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card title" class="bg-danger"> <b-card header="Card title" class="bg-danger">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-sm-6 col-md-4"> <b-col sm="6" md="4">
<b-card header="Card title" class="bg-secondary"> <b-card header="Card title" class="bg-secondary">
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.
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
</div> </div>
</template> </template>
Vue_Full_Project/src/views/components/Forms.vue
+216 -187
View File
@@ -1,51 +1,51 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <b-row>
<div class="col-sm-6"> <b-col sm="6">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Credit Card</strong> <small>Form</small> <strong>Credit Card</strong> <small>Form</small>
</div> </div>
<div class="row"> <b-row>
<div class="col-sm-12"> <b-col sm="12">
<b-form-fieldset label="Name"> <b-form-fieldset label="Name">
<b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input> <b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
</b-form-fieldset> </b-form-fieldset>
</div> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-sm-12"> <b-col sm="12">
<b-form-fieldset label="Credit Card Number"> <b-form-fieldset label="Credit Card Number">
<b-form-input type="text" id="ccnumber" placeholder="0000 0000 0000 0000"></b-form-input> <b-form-input type="text" id="ccnumber" placeholder="0000 0000 0000 0000"></b-form-input>
</b-form-fieldset> </b-form-fieldset>
</div> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-sm-4"> <b-col sm="4">
<b-form-fieldset label="Month"> <b-form-fieldset label="Month">
<b-form-select <b-form-select
:plain="true" :plain="true"
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"> :options="[1,2,3,4,5,6,7,8,9,10,11,12]">
</b-form-select> </b-form-select>
</b-form-fieldset> </b-form-fieldset>
</div><!--/.col--> </b-col><!--/.col-->
<div class="col-sm-4"> <b-col sm="4">
<b-form-fieldset label="Year"> <b-form-fieldset label="Year">
<b-form-select <b-form-select
:plain="true" :plain="true"
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"> :options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]">
</b-form-select> </b-form-select>
</b-form-fieldset> </b-form-fieldset>
</div><!--/.col--> </b-col><!--/.col-->
<div class="col-sm-4"> <b-col sm="4">
<b-form-fieldset label="CVV/CVC"> <b-form-fieldset label="CVV/CVC">
<b-form-input type="text" id="cvv" placeholder="123"></b-form-input> <b-form-input type="text" id="cvv" placeholder="123"></b-form-input>
</b-form-fieldset> </b-form-fieldset>
</div><!--/.col--> </b-col><!--/.col-->
</div><!--/.row--> </b-row><!--/.row-->
</b-card> </b-card>
</div><!--/.col--> </b-col><!--/.col-->
<div class="col-sm-6"> <b-col sm="6">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Company</strong> <small>Form</small> <strong>Company</strong> <small>Form</small>
@@ -59,26 +59,26 @@
<b-form-fieldset label="Street"> <b-form-fieldset label="Street">
<b-form-input type="text" id="street" placeholder="Enter street name"></b-form-input> <b-form-input type="text" id="street" placeholder="Enter street name"></b-form-input>
</b-form-fieldset> </b-form-fieldset>
<div class="row"> <b-row>
<div class="col-sm-8"> <b-col sm="8">
<b-form-fieldset label="City"> <b-form-fieldset label="City">
<b-form-input type="text" id="city" placeholder="Enter your city"></b-form-input> <b-form-input type="text" id="city" placeholder="Enter your city"></b-form-input>
</b-form-fieldset> </b-form-fieldset>
</div><!--/.col--> </b-col><!--/.col-->
<div class="col-sm-4"> <b-col sm="4">
<b-form-fieldset label="Postal Code"> <b-form-fieldset label="Postal Code">
<b-form-input type="text" id="postal-code" placeholder="Postal Code"></b-form-input> <b-form-input type="text" id="postal-code" placeholder="Postal Code"></b-form-input>
</b-form-fieldset> </b-form-fieldset>
</div><!--/.col--> </b-col><!--/.col-->
</div><!--/.row--> </b-row><!--/.row-->
<b-form-fieldset label="Country"> <b-form-fieldset label="Country">
<b-form-input type="text" id="country" placeholder="Country name"></b-form-input> <b-form-input type="text" id="country" placeholder="Country name"></b-form-input>
</b-form-fieldset> </b-form-fieldset>
</b-card> </b-card>
</div><!--/.col--> </b-col><!--/.col-->
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-md-6"> <b-col md="6">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Basic Form</strong> Elements <strong>Basic Form</strong> Elements
@@ -311,23 +311,19 @@
<strong>Inline</strong> Form <strong>Inline</strong> Form
</div> </div>
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes --> <!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
<b-form :inline="true"> <b-form inline>
<div class="form-group"> <label class="mr-sm-2" for="inlineInput1">Name: </label>
<label>Name</label> <b-input id="inlineInput1" type="text" placeholder="Jane Doe"></b-input>
<b-form-input type="text" placeholder="Jane Doe"></b-form-input> <label class="mr-sm-2" for="inlineInput2">Email: </label>
</div> <b-input id="inlineInput2" type="email" placeholder="jane.doe@example.com"></b-input>
<div class="form-group">
<label>Email</label>
<b-form-input type="email" placeholder="ane.doe@example.com"></b-form-input>
</div>
</b-form> </b-form>
<div slot="footer"> <div slot="footer">
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button> <b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button> <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
</div> </div>
</b-card> </b-card>
</div> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Horizontal</strong> Form <strong>Horizontal</strong> Form
@@ -370,62 +366,62 @@
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button> <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
</div> </div>
</b-card> </b-card>
<b-card :no-block="true"> <b-card no-body :no-block="true">
<div slot="header"> <div slot="header">
Input <strong>Grid</strong> Input <strong>Grid</strong>
</div> </div>
<div class="card-body"> <b-card-body>
<div class="form-group row"> <b-row class="form-group">
<div class="col-sm-3"> <b-col sm="3">
<b-form-input type="text" placeholder=".col-sm-3"></b-form-input> <b-form-input type="text" placeholder=".col-sm-3"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-sm-4"> <b-col sm="4">
<b-form-input type="text" placeholder=".col-sm-4"></b-form-input> <b-form-input type="text" placeholder=".col-sm-4"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-sm-5"> <b-col sm="5">
<b-form-input type="text" placeholder=".col-sm-5"></b-form-input> <b-form-input type="text" placeholder=".col-sm-5"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-sm-6"> <b-col sm="6">
<b-form-input type="text" placeholder=".col-sm-6"></b-form-input> <b-form-input type="text" placeholder=".col-sm-6"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-sm-7"> <b-col sm="7">
<b-form-input type="text" placeholder=".col-sm-7"></b-form-input> <b-form-input type="text" placeholder=".col-sm-7"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-sm-8"> <b-col sm="8">
<b-form-input type="text" placeholder=".col-sm-8"></b-form-input> <b-form-input type="text" placeholder=".col-sm-8"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-sm-9"> <b-col sm="9">
<b-form-input type="text" placeholder=".col-sm-9"></b-form-input> <b-form-input type="text" placeholder=".col-sm-9"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-sm-10"> <b-col sm="10">
<b-form-input type="text" placeholder=".col-sm-10"></b-form-input> <b-form-input type="text" placeholder=".col-sm-10"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-sm-11"> <b-col sm="11">
<b-form-input type="text" placeholder=".col-sm-11"></b-form-input> <b-form-input type="text" placeholder=".col-sm-11"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-sm-12"> <b-col sm="12">
<b-form-input type="text" placeholder=".col-sm-12"></b-form-input> <b-form-input type="text" placeholder=".col-sm-12"></b-form-input>
</div> </b-col>
</div> </b-row>
</div> </b-card-body>
<div slot="footer"> <div slot="footer">
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</b-button> <b-button type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</b-button>
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button> <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
@@ -458,28 +454,61 @@
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button> <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
</div> </div>
</b-card> </b-card>
<b-card :no-block="true"> </b-col>
</b-row>
<b-row>
<b-col sm="12" md="6">
<b-card no-body :no-block="true">
<div slot="header"> <div slot="header">
<strong>Validation states</strong> Form <strong>Validation feedback</strong> Form
</div>
<div class="card-body">
<div class="form-group">
<label class="col-form-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control is-valid" id="inputSuccess1">
</div>
<div class="form-group">
<label class="col-form-label" for="inputError1">Input with error</label>
<input type="text" class="form-control is-invalid" id="inputError1">
<div class="invalid-feedback">
Please provide a valid informations.
</div>
</div>
</div> </div>
<b-card-body>
<b-form-group>
<label class="col-form-label" for="inputIsValid">Input is valid</label>
<input type="text" class="form-control is-valid" id="inputIsValid">
<b-form-valid-feedback>
Input is valid.
</b-form-valid-feedback>
</b-form-group>
<b-form-group>
<label class="col-form-label" for="inputIsInvalid">Input is invalid</label>
<input type="text" class="form-control is-invalid" id="inputIsInvalid">
<b-form-invalid-feedback>
Please provide a valid information.
</b-form-invalid-feedback>
</b-form-group>
</b-card-body>
</b-card> </b-card>
</div><!--/.col--> </b-col>
</div><!--/.row--> <b-col sm="12" md="6">
<div class="row"> <b-card no-body :no-block="true">
<div class="col-sm-4"> <div slot="header">
<strong>Validation feedback</strong> Form
</div>
<b-card-body>
<b-form validated novalidate>
<b-form-group label-for="inputSuccess2" label="Non-required input">
<b-form-input type="text" class="form-control-success" id="inputSuccess2"></b-form-input>
<b-form-valid-feedback>
Input is not required.
</b-form-valid-feedback>
</b-form-group>
<b-form-group label-for="inputError2" label="Required input">
<b-form-input type="text" class="form-control-warning" id="inputError2" required></b-form-input>
<b-form-valid-feedback>
Input provided.
</b-form-valid-feedback>
<b-form-invalid-feedback>
Please provide a required input.
</b-form-invalid-feedback>
</b-form-group>
</b-form>
</b-card-body>
</b-card>
</b-col><!--/.col-->
</b-row><!--/.row-->
<b-row>
<b-col sm="4">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Icon/Text</strong> Groups <strong>Icon/Text</strong> Groups
@@ -504,8 +533,8 @@
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button> <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
</div> </div>
</b-card> </b-card>
</div> </b-col>
<div class="col-sm-4"> <b-col sm="4">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Buttons</strong> Groups <strong>Buttons</strong> Groups
@@ -547,8 +576,8 @@
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button> <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
</div> </div>
</b-card> </b-card>
</div> </b-col>
<div class="col-sm-4"> <b-col sm="4">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Dropdowns</strong> Groups <strong>Dropdowns</strong> Groups
@@ -609,54 +638,54 @@
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button> <b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
</div> </div>
</b-card> </b-card>
</div> </b-col>
</div> </b-row>
<div class="row"> <b-row>
<div class="col-md-6"> <b-col md="6">
<b-card> <b-card>
<div slot="header"> <div slot="header">
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small> Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</div> </div>
<div class="form-group row"> <b-row class="form-group">
<div class="col-md-8"> <b-col md="8">
<b-form-input type="text" placeholder=".col-md-8"></b-form-input> <b-form-input type="text" placeholder=".col-md-8"></b-form-input>
</div> </b-col>
<div class="col-md-4"> <b-col md="4">
<b-form-input type="text" placeholder=".col-md-4"></b-form-input> <b-form-input type="text" placeholder=".col-md-4"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-md-7"> <b-col md="7">
<b-form-input type="text" placeholder=".col-md-7"></b-form-input> <b-form-input type="text" placeholder=".col-md-7"></b-form-input>
</div> </b-col>
<div class="col-md-5"> <b-col md="5">
<b-form-input type="text" placeholder=".col-md-5"></b-form-input> <b-form-input type="text" placeholder=".col-md-5"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-md-6"> <b-col md="6">
<b-form-input type="text" placeholder=".col-md-6"></b-form-input> <b-form-input type="text" placeholder=".col-md-6"></b-form-input>
</div> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-form-input type="text" placeholder=".col-md-6"></b-form-input> <b-form-input type="text" placeholder=".col-md-6"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-md-5"> <b-col md="5">
<b-form-input type="text" placeholder=".col-md-5"></b-form-input> <b-form-input type="text" placeholder=".col-md-5"></b-form-input>
</div> </b-col>
<div class="col-md-7"> <b-col md="7">
<b-form-input type="text" placeholder=".col-md-7"></b-form-input> <b-form-input type="text" placeholder=".col-md-7"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-md-4"> <b-col md="4">
<b-form-input type="text" placeholder=".col-md-4"></b-form-input> <b-form-input type="text" placeholder=".col-md-4"></b-form-input>
</div> </b-col>
<div class="col-md-8"> <b-col md="8">
<b-form-input type="text" placeholder=".col-md-8"></b-form-input> <b-form-input type="text" placeholder=".col-md-8"></b-form-input>
</div> </b-col>
</div> </b-row>
<div slot="footer"> <div slot="footer">
<b-button type="submit" size="sm" variant="primary">Action</b-button> <b-button type="submit" size="sm" variant="primary">Action</b-button>
<b-button type="button" size="sm" variant="danger">Action</b-button> <b-button type="button" size="sm" variant="danger">Action</b-button>
@@ -665,52 +694,52 @@
<b-button type="button" size="sm" variant="success">Action</b-button> <b-button type="button" size="sm" variant="success">Action</b-button>
</div> </div>
</b-card> </b-card>
</div> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card> <b-card>
<div slot="header"> <div slot="header">
Input Grid for small devices! <small> <code>.col-*</code></small> Input Grid for small devices! <small> <code>.col-*</code></small>
</div> </div>
<div class="form-group row"> <b-row class="form-group">
<div class="col-4"> <b-col cols="4">
<b-form-input type="text" placeholder=".col-4"></b-form-input> <b-form-input type="text" placeholder=".col-4"></b-form-input>
</div> </b-col>
<div class="col-8"> <b-col cols="8">
<b-form-input type="text" placeholder=".col-8"></b-form-input> <b-form-input type="text" placeholder=".col-8"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-5"> <b-col cols="5">
<b-form-input type="text" placeholder=".col-5"></b-form-input> <b-form-input type="text" placeholder=".col-5"></b-form-input>
</div> </b-col>
<div class="col-7"> <b-col cols="7">
<b-form-input type="text" placeholder=".col-7"></b-form-input> <b-form-input type="text" placeholder=".col-7"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-6"> <b-col cols="6">
<b-form-input type="text" placeholder=".col-6"></b-form-input> <b-form-input type="text" placeholder=".col-6"></b-form-input>
</div> </b-col>
<div class="col-6"> <b-col cols="6">
<b-form-input type="text" placeholder=".col-6"></b-form-input> <b-form-input type="text" placeholder=".col-6"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-7"> <b-col cols="7">
<b-form-input type="text" placeholder=".col-5"></b-form-input> <b-form-input type="text" placeholder=".col-5"></b-form-input>
</div> </b-col>
<div class="col-5"> <b-col cols="5">
<b-form-input type="text" placeholder=".col-5"></b-form-input> <b-form-input type="text" placeholder=".col-5"></b-form-input>
</div> </b-col>
</div> </b-row>
<div class="form-group row"> <b-row class="form-group">
<div class="col-8"> <b-col cols="8">
<b-form-input type="text" placeholder=".col-8"></b-form-input> <b-form-input type="text" placeholder=".col-8"></b-form-input>
</div> </b-col>
<div class="col-4"> <b-col cols="4">
<b-form-input type="text" placeholder=".col-4"></b-form-input> <b-form-input type="text" placeholder=".col-4"></b-form-input>
</div> </b-col>
</div> </b-row>
<div slot="footer"> <div slot="footer">
<b-button type="submit" size="sm" variant="primary">Action</b-button> <b-button type="submit" size="sm" variant="primary">Action</b-button>
<b-button type="button" size="sm" variant="danger">Action</b-button> <b-button type="button" size="sm" variant="danger">Action</b-button>
@@ -719,10 +748,10 @@
<b-button type="button" size="sm" variant="success">Action</b-button> <b-button type="button" size="sm" variant="success">Action</b-button>
</div> </div>
</b-card> </b-card>
</div> </b-col>
</div> </b-row>
<div class="row"> <b-row>
<div class="col-sm-4"> <b-col sm="4">
<b-card> <b-card>
<div slot="header"> <div slot="header">
Example Form Example Form
@@ -746,8 +775,8 @@
<b-button type="submit" size="sm" variant="primary">Submit</b-button> <b-button type="submit" size="sm" variant="primary">Submit</b-button>
</div> </div>
</b-card> </b-card>
</div> </b-col>
<div class="col-sm-4"> <b-col sm="4">
<b-card> <b-card>
<div slot="header"> <div slot="header">
Example Form Example Form
@@ -771,8 +800,8 @@
<b-button type="submit" class="btn btn-sm btn-secondary">Submit</b-button> <b-button type="submit" class="btn btn-sm btn-secondary">Submit</b-button>
</div> </div>
</b-card> </b-card>
</div> </b-col>
<div class="col-sm-4"> <b-col sm="4">
<b-card> <b-card>
<div slot="header"> <div slot="header">
Example Form Example Form
@@ -796,10 +825,10 @@
<b-button type="submit" size="sm" variant="success">Submit</b-button> <b-button type="submit" size="sm" variant="success">Submit</b-button>
</div> </div>
</b-card> </b-card>
</div> </b-col>
</div><!--/.row--> </b-row><!--/.row-->
<div class="row"> <b-row>
<div class="col-lg-12"> <b-col lg="12">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<i class="fa fa-edit"></i> Form Elements <i class="fa fa-edit"></i> Form Elements
@@ -843,8 +872,8 @@
<b-button type="button" variant="secondary">Cancel</b-button> <b-button type="button" variant="secondary">Cancel</b-button>
</div> </div>
</b-card> </b-card>
</div><!--/.col--> </b-col><!--/.col-->
</div><!--/.row--> </b-row><!--/.row-->
</div> </div>
</template> </template>
Vue_Full_Project/src/views/components/Modals.vue
+8 -8
View File
@@ -1,8 +1,8 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <b-row>
<div class="col-12"> <b-col cols="12">
<b-card header="Bootstrap Modals"> <b-card header="Bootstrap Modals">
<b-button type="button" variant="secondary" @click="myModal = true">Launch demo modal</b-button> <b-button type="button" variant="secondary" @click="myModal = true">Launch demo modal</b-button>
<b-button type="button" variant="secondary" @click="largeModal = true">Launch large modal</b-button> <b-button type="button" variant="secondary" @click="largeModal = true">Launch large modal</b-button>
@@ -14,8 +14,8 @@
<b-button type="button" variant="danger" @click="dangerModal = true">Launch danger modal</b-button> <b-button type="button" variant="danger" @click="dangerModal = true">Launch danger modal</b-button>
<b-button type="button" variant="info" @click="infoModal = true">Launch info modal</b-button> <b-button type="button" variant="info" @click="infoModal = true">Launch info modal</b-button>
</b-card> </b-card>
</div><!--/.col--> </b-col><!--/.col-->
</div><!--/.row--> </b-row><!--/.row-->
</div> </div>
<!-- Modal Component --> <!-- Modal Component -->
@@ -52,7 +52,7 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</b-modal> </b-modal>
<b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false"> <b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false" ok-variant="success">
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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -60,7 +60,7 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</b-modal> </b-modal>
<b-modal title="Modal title" class="modal-warning" v-model="warningModal" @ok="warningModal = false"> <b-modal title="Modal title" class="modal-warning" v-model="warningModal" @ok="warningModal = false" ok-variant="warning">
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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -68,7 +68,7 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</b-modal> </b-modal>
<b-modal title="Modal title" class="modal-danger" v-model="dangerModal" @ok="dangerModal = false"> <b-modal title="Modal title" class="modal-danger" v-model="dangerModal" @ok="dangerModal = false" ok-variant="danger">
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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -76,7 +76,7 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</b-modal> </b-modal>
<b-modal title="Modal title" class="modal-info" v-model="infoModal" @ok="infoModal = false"> <b-modal title="Modal title" class="modal-info" v-model="infoModal" @ok="infoModal = false" ok-variant="info">
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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Vue_Full_Project/src/views/components/SocialButtons.vue
+8 -8
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <b-row>
<div class="col-12"> <b-col cols="12">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Social Media Button</strong> <small>Usage ex.</small><code style="text-transform:lowercase">&lt;b-button variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code> <strong>Social Media Button</strong> <small>Usage ex.</small><code style="text-transform:lowercase">&lt;b-button variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
@@ -91,8 +91,8 @@
<b-button size="lg" variant="vimeo"><span>Vimeo</span></b-button> <b-button size="lg" variant="vimeo"><span>Vimeo</span></b-button>
</p> </p>
</b-card> </b-card>
</div><!--/.col--> </b-col><!--/.col-->
<div class="col-12"> <b-col cols="12">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Social Media Button</strong> <small>Only icons. Usage ex.</small> <code style="text-transform:lowercase">&lt;b-button variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code> <strong>Social Media Button</strong> <small>Only icons. Usage ex.</small> <code style="text-transform:lowercase">&lt;b-button variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
@@ -182,9 +182,9 @@
<b-button size="lg" variant="vimeo icon"><span>Vimeo</span></b-button> <b-button size="lg" variant="vimeo icon"><span>Vimeo</span></b-button>
</p> </p>
</b-card> </b-card>
</div><!--/.col--> </b-col><!--/.col-->
<div class="col-12"> <b-col cols="12">
<b-card> <b-card>
<div slot="header"> <div slot="header">
<strong>Social Media Button</strong> <small>Only text. Usage ex.</small> <code style="text-transform:lowercase">&lt;b-button variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code> <strong>Social Media Button</strong> <small>Only text. Usage ex.</small> <code style="text-transform:lowercase">&lt;b-button variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
@@ -274,8 +274,8 @@
<b-button size="lg" variant="vimeo text"><span>Vimeo</span></b-button> <b-button size="lg" variant="vimeo text"><span>Vimeo</span></b-button>
</p> </p>
</b-card> </b-card>
</div><!--/.col--> </b-col><!--/.col-->
</div><!--/.row--> </b-row><!--/.row-->
</div> </div>
</template> </template>
Vue_Full_Project/src/views/components/Switches.vue
+68 -100
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <b-row>
<div class="col-md-12"> <b-col md="12">
<b-card header="3d Switch"> <b-card header="3d Switch">
<c-switch type="3d" variant="primary" :checked="true"/> <c-switch type="3d" variant="primary" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -15,8 +15,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="3d" variant="danger" :checked="true"/> <c-switch type="3d" variant="danger" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch default"> <b-card header="Switch default">
<c-switch type="default" variant="primary" :checked="true"/> <c-switch type="default" variant="primary" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -30,8 +30,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger" :checked="true"/> <c-switch type="default" variant="danger" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch default - pills"> <b-card header="Switch default - pills">
<c-switch type="default" variant="primary" :pill="true" :checked="true"/> <c-switch type="default" variant="primary" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -45,8 +45,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger" :pill="true" :checked="true"/> <c-switch type="default" variant="danger" :pill="true" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch outline"> <b-card header="Switch outline">
<c-switch type="default" variant="primary-outline" :checked="true"/> <c-switch type="default" variant="primary-outline" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -60,8 +60,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger-outline" :checked="true"/> <c-switch type="default" variant="danger-outline" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch outline - pills"> <b-card header="Switch outline - pills">
<c-switch type="default" variant="primary-outline" :pill="true" :checked="true"/> <c-switch type="default" variant="primary-outline" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -75,8 +75,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger-outline" :pill="true" :checked="true"/> <c-switch type="default" variant="danger-outline" :pill="true" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch outline alternative"> <b-card header="Switch outline alternative">
<c-switch type="default" variant="primary-outline-alt" :checked="true"/> <c-switch type="default" variant="primary-outline-alt" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -90,8 +90,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger-outline-alt" :checked="true"/> <c-switch type="default" variant="danger-outline-alt" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch outline alternative - pills"> <b-card header="Switch outline alternative - pills">
<c-switch type="default" variant="primary-outline-alt" :pill="true" :checked="true"/> <c-switch type="default" variant="primary-outline-alt" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -105,9 +105,9 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger-outline-alt" :pill="true" :checked="true"/> <c-switch type="default" variant="danger-outline-alt" :pill="true" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with text"> <b-card header="Switch with text">
<c-switch type="text" variant="primary" on="On" off="Off" :checked="true"/> <c-switch type="text" variant="primary" on="On" off="Off" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -121,8 +121,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger" on="On" off="Off" :checked="true"/> <c-switch type="text" variant="danger" on="On" off="Off" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with text - pills"> <b-card header="Switch with text - pills">
<c-switch type="text" variant="primary" on="On" off="Off" :pill="true" :checked="true"/> <c-switch type="text" variant="primary" on="On" off="Off" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -136,8 +136,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger" on="On" off="Off" :pill="true" :checked="true"/> <c-switch type="text" variant="danger" on="On" off="Off" :pill="true" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with text outline"> <b-card header="Switch with text outline">
<c-switch type="text" variant="primary-outline" on="On" off="Off" :checked="true"/> <c-switch type="text" variant="primary-outline" on="On" off="Off" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -151,8 +151,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger-outline" on="On" off="Off" :checked="true"/> <c-switch type="text" variant="danger-outline" on="On" off="Off" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with text outline - pills"> <b-card header="Switch with text outline - pills">
<c-switch type="text" variant="primary-outline" on="On" off="Off" :pill="true" :checked="true"/> <c-switch type="text" variant="primary-outline" on="On" off="Off" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -166,8 +166,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger-outline" on="On" off="Off" :pill="true" :checked="true"/> <c-switch type="text" variant="danger-outline" on="On" off="Off" :pill="true" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with text outline alternative"> <b-card header="Switch with text outline alternative">
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :checked="true"/> <c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -181,8 +181,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :checked="true"/> <c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with text outline alternative - pills"> <b-card header="Switch with text outline alternative - pills">
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :pill="true" :checked="true"/> <c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -196,9 +196,9 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :pill="true" :checked="true"/> <c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with icon"> <b-card header="Switch with icon">
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/> <c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -212,8 +212,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/> <c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with icon - pills"> <b-card header="Switch with icon - pills">
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/> <c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -227,8 +227,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/> <c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with icon outline"> <b-card header="Switch with icon outline">
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/> <c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -242,8 +242,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/> <c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with icon outline - pills"> <b-card header="Switch with icon outline - pills">
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/> <c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -257,8 +257,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/> <c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with icon outline alternative"> <b-card header="Switch with icon outline alternative">
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/> <c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -272,8 +272,8 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/> <c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-6"> <b-col md="6">
<b-card header="Switch with icon outline alternative - pills"> <b-card header="Switch with icon outline alternative - pills">
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/> <c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
@@ -287,76 +287,29 @@
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/> <c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
</b-card> </b-card>
</div><!--/.col--> </b-col>
<div class="col-md-12"> <b-col md="12">
<div class="card"> <b-card no-body>
<div class="card-header"> <div slot="header">
Sizes Sizes
</div> </div>
<div class="card-body p-0"> <b-card-body class="p-0">
<table class="table table-hover table-striped table-align-middle mb-0"> <b-table hover striped class="table-responsive-sm table-align-middle mb-0" :items="items" :fields="fields">
<thead> <template slot="example" slot-scope="data">
<th>Size</th> <c-switch :type="data.value.type" :variant="data.value.variant" :size="data.value.size" :checked="data.value.checked"/>
<th>Example</th> </template>
<th>CSS Class</th> </b-table>
</thead> </b-card-body>
<tbody> </b-card>
<tr> </b-col>
<td> </b-row><!--/.row-->
Large
</td>
<td>
<c-switch type="3d" variant="primary" size="lg" :checked="true"/>
</td>
<td>
Add following code <code>size="lg"</code>
</td>
</tr>
<tr>
<td>
Normal
</td>
<td>
<c-switch type="3d" variant="primary" :checked="true"/>
</td>
<td>
-
</td>
</tr>
<tr>
<td>
Small
</td>
<td>
<c-switch type="3d" variant="primary" size="sm" :checked="true"/>
</td>
<td>
Add following code <code>size="sm"</code>
</td>
</tr>
<tr>
<td>
Extra small
</td>
<td>
<c-switch type="3d" variant="primary" size="xs" :checked="true"/>
</td>
<td>
Add following code <code>size="xs"</code>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
</div> </div>
</template> </template>
<script> <script>
import cSwitch from '../../components/Switch' import cSwitch from '../../components/Switch'
export default { export default {
name: 'switches', name: 'switches',
components: { components: {
@@ -366,6 +319,21 @@ export default {
icon (icon) { icon (icon) {
return icon return icon
} }
},
data: () => {
return {
fields: [
{key: 'size'},
{key: 'example'},
{key: 'css_class', label: 'CSS Class'}
],
items: [
{size: 'Large', example: {type: '3d', variant: 'primary', size: 'lg', checked: true}, css_class: 'Add following code <code>size="lg"</code>'},
{size: 'Normal', example: {type: '3d', variant: 'primary', size: '', checked: true}, css_class: '-'},
{size: 'Small', example: {type: '3d', variant: 'primary', size: 'sm', checked: true}, css_class: 'Add following code <code>size="sm"</code>'},
{size: 'Extra small', example: {type: '3d', variant: 'primary', size: 'xs', checked: true}, css_class: 'Add following code <code>size="xs"</code>'}
]
}
} }
} }
</script> </script>
Vue_Full_Project/src/views/components/Table.vue
+109
View File
@@ -0,0 +1,109 @@
<template>
<b-card :header="caption">
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" class="table-responsive-sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
<template slot="status" slot-scope="data">
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
</template>
</b-table>
<nav>
<b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
</nav>
</b-card>
</template>
<script>
/**
* Randomize array element order in-place.
* Using Durstenfeld shuffle algorithm.
*/
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1))
let temp = array[i]
array[i] = array[j]
array[j] = temp
}
return array
}
export default {
name: 'table',
props: {
caption: {
type: String,
default: 'Table'
},
hover: {
type: Boolean,
default: false
},
striped: {
type: Boolean,
default: false
},
bordered: {
type: Boolean,
default: false
},
small: {
type: Boolean,
default: false
},
fixed: {
type: Boolean,
default: false
}
},
data: () => {
return {
items: shuffleArray([
{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
{username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
{username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
{username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
{username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
{username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
{username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
]),
fields: [
{key: 'username'},
{key: 'registered'},
{key: 'role'},
{key: 'status'}
],
currentPage: 1,
perPage: 5,
totalRows: 0
}
},
methods: {
getBadge (status) {
return status === 'Active' ? 'success'
: status === 'Inactive' ? 'secondary'
: status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary'
},
getRowCount (items) {
return items.length
}
}
}
</script>
Vue_Full_Project/src/views/components/Tables.vue
+25 -340
View File
@@ -1,355 +1,40 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row">
<div class="col-lg-6">
<b-card header="<i class='fa fa-align-justify'></i> Simple Table">
<table class="table">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Samppa Nori</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
<tr>
<td>Estavan Lykos</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<b-badge variant="danger">Banned</b-badge>
</td>
</tr>
<tr>
<td>Chetan Mohamed</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<b-badge variant="secondary">Inactive</b-badge>
</td>
</tr>
<tr>
<td>Derick Maximinus</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<b-badge variant="warning">Pending</b-badge>
</td>
</tr>
<tr>
<td>Friderik Dávid</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</b-card>
</div><!--/.col-->
<div class="col-lg-6"> <b-row>
<b-card header="<i class='fa fa-align-justify'></i> Striped Table"> <b-col lg="6">
<table class="table table-striped"> <c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
<thead> </b-col><!--/.col-->
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yiorgos Avraamu</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
<tr>
<td>Avram Tarasios</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<b-badge variant="danger">Banned</b-badge>
</td>
</tr>
<tr>
<td>Quintin Ed</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<b-badge variant="secondary">Inactive</b-badge>
</td>
</tr>
<tr>
<td>Enéas Kwadwo</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<b-badge variant="warning">Pending</b-badge>
</td>
</tr>
<tr>
<td>Agapetus Tadeáš</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
<div class="row"> <b-col lg="6">
<c-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
</b-col><!--/.col-->
</b-row><!--/.row-->
<div class="col-lg-6"> <b-row>
<b-card header="<i class='fa fa-align-justify'></i> Condensed Table"> <b-col lg="6">
<table class="table table-sm"> <c-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
<thead> </b-col><!--/.col-->
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Carwyn Fachtna</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
<tr>
<td>Nehemiah Tatius</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<b-badge variant="danger">Banned</b-badge>
</td>
</tr>
<tr>
<td>Ebbe Gemariah</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<b-badge variant="secondary">Inactive</b-badge>
</td>
</tr>
<tr>
<td>Eustorgios Amulius</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<b-badge variant="warning">Pending</b-badge>
</td>
</tr>
<tr>
<td>Leopold Gáspár</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</b-card>
</div><!--/.col-->
<div class="col-lg-6"> <b-col lg="6">
<b-card header="<i class='fa fa-align-justify'></i> Bordered Table"> <c-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
<table class="table table-bordered"> </b-col><!--/.col-->
<thead> </b-row><!--/.row-->
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pompeius René</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
<tr>
<td>Paĉjo Jadon</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<b-badge variant="danger">Banned</b-badge>
</td>
</tr>
<tr>
<td>Micheal Mercurius</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<b-badge variant="secondary">Inactive</b-badge>
</td>
</tr>
<tr>
<td>Ganesha Dubhghall</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<b-badge variant="warning">Pending</b-badge>
</td>
</tr>
<tr>
<td>Hiroto Šimun</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</b-card>
</div><!--/.col--> <b-row>
</div><!--/.row--> <b-col sm="12">
<c-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
<div class="row"> </b-col>
<div class="col-12"> </b-row>
<b-card header="<i class='fa fa-align-justify'></i> Combined All Table">
<table class="table table-bordered table-striped table-sm">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishnu Serghei</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
<tr>
<td>Zbyněk Phoibos</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<b-badge variant="danger">Banned</b-badge>
</td>
</tr>
<tr>
<td>Einar Randall</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<b-badge variant="secondary">Inactive</b-badge>
</td>
</tr>
<tr>
<td>Félix Troels</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<b-badge variant="warning">Pending</b-badge>
</td>
</tr>
<tr>
<td>Aulus Agmundr</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
</tbody>
</table>
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
</div> </div>
</template> </template>
<script> <script>
import cTable from './Table.vue'
export default { export default {
name: 'tables' name: 'tables',
components: {cTable}
} }
</script> </script>
Vue_Full_Project/src/views/icons/FontAwesome.vue
+1883 -2694
View File
File diff suppressed because it is too large Load Diff
Vue_Full_Project/src/views/icons/SimpleLineIcons.vue
+373 -373
View File
File diff suppressed because it is too large Load Diff
Vue_Full_Project/src/views/pages/Login.vue
+23 -23
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="app flex-row align-items-center"> <div class="app flex-row align-items-center">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <b-row class="justify-content-center">
<div class="col-md-8"> <b-col md="8">
<div class="card-group"> <b-card-group>
<div class="card p-4"> <b-card no-body class="p-4">
<div class="card-body"> <b-card-body>
<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>
<div class="input-group mb-3"> <div class="input-group mb-3">
@@ -16,28 +16,28 @@
<span class="input-group-addon"><i class="icon-lock"></i></span> <span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" placeholder="Password"> <input type="password" class="form-control" placeholder="Password">
</div> </div>
<div class="row"> <b-row>
<div class="col-6"> <b-col cols="6">
<button type="button" class="btn btn-primary px-4">Login</button> <b-button variant="primary" class="px-4">Login</b-button>
</div> </b-col>
<div class="col-6 text-right"> <b-col cols="6" class="text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button> <b-button variant="link" class="px-0">Forgot password?</b-button>
</div> </b-col>
</div> </b-row>
</div> </b-card-body>
</div> </b-card>
<div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%"> <b-card no-body class="text-white bg-primary py-5 d-md-down-none" style="width:44%">
<div class="card-body text-center"> <b-card-body class="text-center">
<div> <div>
<h2>Sign up</h2> <h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-primary active mt-3">Register Now!</button> <b-button variant="primary" class="active mt-3">Register Now!</b-button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</b-card-body>
</b-card>
</b-card-group>
</b-col>
</b-row>
</div> </div>
</div> </div>
</template> </template>
Vue_Full_Project/src/views/pages/Page404.vue
+5 -5
View File
@@ -1,8 +1,8 @@
<template> <template>
<div class="app flex-row align-items-center"> <div class="app flex-row align-items-center">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <b-row class="justify-content-center">
<div class="col-md-6"> <b-col md="6">
<div class="clearfix"> <div class="clearfix">
<h1 class="float-left display-3 mr-4">404</h1> <h1 class="float-left display-3 mr-4">404</h1>
<h4 class="pt-3">Oops! You're lost.</h4> <h4 class="pt-3">Oops! You're lost.</h4>
@@ -12,11 +12,11 @@
<span class="input-group-addon"><i class="fa fa-search"></i></span> <span class="input-group-addon"><i class="fa fa-search"></i></span>
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?"> <input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-info" type="button">Search</button> <b-button variant="info">Search</b-button>
</span> </span>
</div> </div>
</div> </b-col>
</div> </b-row>
</div> </div>
</div> </div>
</template> </template>
Vue_Full_Project/src/views/pages/Page500.vue
+5 -5
View File
@@ -1,8 +1,8 @@
<template> <template>
<div class="app flex-row align-items-center"> <div class="app flex-row align-items-center">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <b-row class="justify-content-center">
<div class="col-md-6"> <b-col md="6">
<div class="clearfix"> <div class="clearfix">
<h1 class="float-left display-3 mr-4">500</h1> <h1 class="float-left display-3 mr-4">500</h1>
<h4 class="pt-3">Houston, we have a problem!</h4> <h4 class="pt-3">Houston, we have a problem!</h4>
@@ -12,11 +12,11 @@
<span class="input-group-addon"><i class="fa fa-search"></i></span> <span class="input-group-addon"><i class="fa fa-search"></i></span>
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?"> <input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-info" type="button">Search</button> <b-button variant="info">Search</b-button>
</span> </span>
</div> </div>
</div> </b-col>
</div> </b-row>
</div> </div>
</div> </div>
</template> </template>
Vue_Full_Project/src/views/pages/Register.vue
+19 -19
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="app flex-row align-items-center"> <div class="app flex-row align-items-center">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <b-row class="justify-content-center">
<div class="col-md-6"> <b-col md="6" sm="8">
<div class="card mx-4"> <b-card no-body class="mx-4">
<div class="card-body p-4"> <b-card-body class="p-4">
<h1>Register</h1> <h1>Register</h1>
<p class="text-muted">Create your account</p> <p class="text-muted">Create your account</p>
<div class="input-group mb-3"> <div class="input-group mb-3">
@@ -27,21 +27,21 @@
<input type="password" class="form-control" placeholder="Repeat password"> <input type="password" class="form-control" placeholder="Repeat password">
</div> </div>
<button type="button" class="btn btn-block btn-success">Create Account</button> <b-button variant="success" block>Create Account</b-button>
</div> </b-card-body>
<div class="card-footer p-4"> <b-card-footer class="p-4">
<div class="row"> <b-row>
<div class="col-6"> <b-col cols="6">
<button class="btn btn-block btn-facebook" type="button"><span>facebook</span></button> <b-button block class="btn btn-facebook"><span>facebook</span></b-button>
</div> </b-col>
<div class="col-6"> <b-col cols="6">
<button class="btn btn-block btn-twitter" type="button"><span>twitter</span></button> <b-button block class="btn btn-twitter" type="button"><span>twitter</span></b-button>
</div> </b-col>
</div> </b-row>
</div> </b-card-footer>
</div> </b-card>
</div> </b-col>
</div> </b-row>
</div> </div>
</div> </div>
</template> </template>
Vue_Starter/package.json
+39 -39
View File
@@ -1,6 +1,6 @@
{ {
"name": "@coreui/vue", "name": "@coreui/vue",
"version": "1.0.5", "version": "1.0.6",
"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",
@@ -18,66 +18,66 @@
}, },
"dependencies": { "dependencies": {
"bootstrap": "4.0.0-beta.2", "bootstrap": "4.0.0-beta.2",
"bootstrap-vue": "1.0.0-beta.9", "bootstrap-vue": "1.1.0",
"chart.js": "2.7.0", "chart.js": "2.7.1",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"simple-line-icons": "^2.4.1", "simple-line-icons": "^2.4.1",
"vue": "^2.5.2", "vue": "2.5.6",
"vue-chartjs": "^3.0.0", "vue-chartjs": "3.0.2",
"vue-router": "^3.0.1" "vue-router": "3.0.1"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "7.1.5", "autoprefixer": "7.1.6",
"babel-core": "6.26.0", "babel-core": "6.26.0",
"babel-eslint": "8.0.1", "babel-eslint": "8.0.2",
"babel-loader": "7.1.2", "babel-loader": "7.1.2",
"babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-runtime": "6.23.0",
"babel-preset-env": "1.6.1", "babel-preset-env": "1.6.1",
"babel-preset-stage-2": "6.24.1", "babel-preset-stage-2": "6.24.1",
"babel-register": "6.26.0", "babel-register": "6.26.0",
"chalk": "2.2.0", "chalk": "2.3.0",
"connect-history-api-fallback": "^1.4.0", "connect-history-api-fallback": "1.5.0",
"copy-webpack-plugin": "^4.1.1", "copy-webpack-plugin": "4.2.1",
"css-loader": "0.28.7", "css-loader": "0.28.7",
"eslint": "^4.9.0", "eslint": "4.11.0",
"eslint-friendly-formatter": "3.0.0", "eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.9.0", "eslint-loader": "1.9.0",
"eslint-plugin-html": "3.2.2", "eslint-plugin-html": "4.0.0",
"eslint-plugin-import": "2.7.0", "eslint-plugin-import": "2.8.0",
"eslint-plugin-node": "5.2.0", "eslint-plugin-node": "5.2.1",
"eslint-config-standard": "10.2.1", "eslint-config-standard": "10.2.1",
"eslint-plugin-promise": "3.6.0", "eslint-plugin-promise": "3.6.0",
"eslint-plugin-standard": "3.0.1", "eslint-plugin-standard": "3.0.1",
"eventsource-polyfill": "^0.9.6", "eventsource-polyfill": "0.9.6",
"express": "4.16.2", "express": "4.16.2",
"extract-text-webpack-plugin": "3.0.1", "extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5", "file-loader": "1.1.5",
"friendly-errors-webpack-plugin": "1.6.1", "friendly-errors-webpack-plugin": "1.6.1",
"html-webpack-plugin": "2.30.1", "html-webpack-plugin": "2.30.1",
"http-proxy-middleware": "0.17.4", "http-proxy-middleware": "0.17.4",
"webpack-bundle-analyzer": "2.9.0", "webpack-bundle-analyzer": "2.9.1",
"cross-env": "^5.1.0", "cross-env": "5.1.1",
"karma": "1.7.1", "karma": "1.7.1",
"karma-coverage": "^1.1.1", "karma-coverage": "1.1.1",
"karma-mocha": "^1.3.0", "karma-mocha": "1.3.0",
"karma-phantomjs-launcher": "1.0.4", "karma-phantomjs-launcher": "1.0.4",
"karma-phantomjs-shim": "^1.5.0", "karma-phantomjs-shim": "1.5.0",
"karma-sinon-chai": "1.3.2", "karma-sinon-chai": "1.3.3",
"karma-sourcemap-loader": "^0.3.7", "karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.31", "karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5", "karma-webpack": "2.0.6",
"lolex": "2.1.3", "lolex": "2.3.0",
"mocha": "4.0.1", "mocha": "4.0.1",
"chai": "4.1.2", "chai": "4.1.2",
"sinon": "4.0.1", "sinon": "4.1.2",
"sinon-chai": "2.14.0", "sinon-chai": "2.14.0",
"inject-loader": "3.0.1", "inject-loader": "3.0.1",
"babel-plugin-istanbul": "4.1.5", "babel-plugin-istanbul": "4.1.5",
"phantomjs-prebuilt": "^2.1.15", "phantomjs-prebuilt": "^2.1.16",
"chromedriver": "2.33.1", "chromedriver": "2.33.2",
"cross-spawn": "^5.1.0", "cross-spawn": "5.1.0",
"nightwatch": "0.9.16", "nightwatch": "0.9.16",
"selenium-server": "3.6.0", "selenium-server": "3.7.1",
"semver": "5.4.1", "semver": "5.4.1",
"shelljs": "0.7.8", "shelljs": "0.7.8",
"opn": "5.1.0", "opn": "5.1.0",
@@ -85,18 +85,18 @@
"ora": "1.3.0", "ora": "1.3.0",
"rimraf": "2.6.2", "rimraf": "2.6.2",
"url-loader": "0.6.2", "url-loader": "0.6.2",
"vue-loader": "13.3.0", "vue-loader": "13.5.0",
"vue-style-loader": "3.0.3", "vue-style-loader": "3.0.3",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "2.5.6",
"webpack": "^3.8.1", "webpack": "3.8.1",
"webpack-dev-middleware": "1.12.0", "webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.20.0", "webpack-hot-middleware": "2.20.0",
"webpack-merge": "4.1.0", "webpack-merge": "4.1.1",
"node-sass": "4.5.3", "node-sass": "4.7.1",
"sass-loader": "6.0.6" "sass-loader": "6.0.6"
}, },
"engines": { "engines": {
"node": ">= 4.0.0", "node": ">= 6.4.0",
"npm": ">= 3.0.0" "npm": ">= 5.0.0"
} }
} }
Vue_Starter/scss/style.scss
+1 -1
View File
@@ -1,6 +1,6 @@
/*! /*!
* CoreUI - Open Source Bootstrap Admin Template * CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.5 * @version v1.0.6
* @link http://coreui.io * @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek * Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @license MIT * @license MIT
Vue_Starter/src/components/Sidebar.vue
+3 -1
View File
@@ -10,7 +10,7 @@
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/> <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template> </template>
<template v-else-if="item.divider"> <template v-else-if="item.divider">
<li class="divider"></li> <SidebarNavDivider :classes="item.class"/>
</template> </template>
<template v-else> <template v-else>
<template v-if="item.children"> <template v-if="item.children">
@@ -52,6 +52,7 @@ import SidebarFooter from './SidebarFooter'
import SidebarForm from './SidebarForm' import SidebarForm from './SidebarForm'
import SidebarHeader from './SidebarHeader' import SidebarHeader from './SidebarHeader'
import SidebarMinimizer from './SidebarMinimizer' import SidebarMinimizer from './SidebarMinimizer'
import SidebarNavDivider from './SidebarNavDivider'
import SidebarNavDropdown from './SidebarNavDropdown' import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink' import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle' import SidebarNavTitle from './SidebarNavTitle'
@@ -70,6 +71,7 @@ export default {
SidebarForm, SidebarForm,
SidebarHeader, SidebarHeader,
SidebarMinimizer, SidebarMinimizer,
SidebarNavDivider,
SidebarNavDropdown, SidebarNavDropdown,
SidebarNavLink, SidebarNavLink,
SidebarNavTitle, SidebarNavTitle,
Vue_Starter/src/components/SidebarNavDivider.vue
+26
View File
@@ -0,0 +1,26 @@
<template>
<li :class="classList"></li>
</template>
<script>
export default {
name: 'sidebar-nav-divider',
props: {
classes: {
type: String,
default: ''
}
},
computed: {
classList () {
return [
'divider',
...this.itemClasses
]
},
itemClasses () {
return this.classes ? this.classes.split(' ') : ''
}
}
}
</script>
Vue_Starter/src/components/SidebarNavLink.vue
+9 -1
View File
@@ -36,18 +36,26 @@
variant: { variant: {
type: String, type: String,
default: '' default: ''
},
classes: {
type: String,
default: ''
} }
}, },
computed: { computed: {
classList () { classList () {
return [ return [
'nav-link', 'nav-link',
this.linkVariant this.linkVariant,
...this.itemClasses
] ]
}, },
linkVariant () { linkVariant () {
return this.variant ? `nav-link-${this.variant}` : '' return this.variant ? `nav-link-${this.variant}` : ''
}, },
itemClasses () {
return this.classes ? this.classes.split(' ') : []
},
isExternalLink () { isExternalLink () {
if (this.url.substring(0, 4) === 'http') { if (this.url.substring(0, 4) === 'http') {
return true return true
Vue_Starter/src/views/Dashboard.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
Hello World <p class="text-info">Hello World</p>
</div> </div>
</template> </template>
Vue_Starter/test/unit/specs/Hello.spec.js
+5 -5
View File
@@ -1,11 +1,11 @@
import Vue from 'vue' import Vue from 'vue'
import Hello from '@/components/Hello' import Dashboard from '@/views/Dashboard'
describe('Hello.vue', () => { describe('Dashboard.vue', () => {
it('should render correct contents', () => { it('should render correct contents', () => {
const Constructor = Vue.extend(Hello) const Constructor = Vue.extend(Dashboard)
const vm = new Constructor().$mount() const vm = new Constructor().$mount()
expect(vm.$el.querySelector('.hello h1').textContent) expect(vm.$el.querySelector('.text-info').textContent)
.to.equal('Welcome to Your Vue.js App') .to.equal('Hello World')
}) })
}) })
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@coreui/vue", "name": "@coreui/vue",
"version": "1.0.5", "version": "1.0.6",
"description": "Open Source Vue Admin Template", "description": "Open Source Vue Admin Template",
"main": "", "main": "",
"homepage": "http://coreui.io/vue/", "homepage": "http://coreui.io/vue/",