sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 3 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`
###### `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
Vue_Full_Project/package.json
+40 -40
View File
@@ -1,7 +1,7 @@
{
"name": "@coreui/vue",
"version": "1.0.5",
"description": "",
"version": "1.0.6",
"description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek",
"homepage": "http://coreui.io",
"copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",
@@ -18,66 +18,66 @@
},
"dependencies": {
"bootstrap": "4.0.0-beta.2",
"bootstrap-vue": "1.0.0-beta.9",
"chart.js": "2.7.0",
"bootstrap-vue": "1.1.0",
"chart.js": "2.7.1",
"font-awesome": "^4.7.0",
"simple-line-icons": "^2.4.1",
"vue": "^2.5.2",
"vue-chartjs": "^3.0.0",
"vue-router": "^3.0.1"
"vue": "2.5.6",
"vue-chartjs": "3.0.2",
"vue-router": "3.0.1"
},
"devDependencies": {
"autoprefixer": "7.1.5",
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "8.0.1",
"babel-eslint": "8.0.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-stage-2": "6.24.1",
"babel-register": "6.26.0",
"chalk": "2.2.0",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.1.1",
"chalk": "2.3.0",
"connect-history-api-fallback": "1.5.0",
"copy-webpack-plugin": "4.2.1",
"css-loader": "0.28.7",
"eslint": "^4.9.0",
"eslint": "4.11.0",
"eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-html": "3.2.2",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-node": "5.2.0",
"eslint-plugin-html": "4.0.0",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-node": "5.2.1",
"eslint-config-standard": "10.2.1",
"eslint-plugin-promise": "3.6.0",
"eslint-plugin-standard": "3.0.1",
"eventsource-polyfill": "^0.9.6",
"eventsource-polyfill": "0.9.6",
"express": "4.16.2",
"extract-text-webpack-plugin": "3.0.1",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"friendly-errors-webpack-plugin": "1.6.1",
"html-webpack-plugin": "2.30.1",
"http-proxy-middleware": "0.17.4",
"webpack-bundle-analyzer": "2.9.0",
"cross-env": "^5.1.0",
"webpack-bundle-analyzer": "2.9.1",
"cross-env": "5.1.1",
"karma": "1.7.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-coverage": "1.1.1",
"karma-mocha": "1.3.0",
"karma-phantomjs-launcher": "1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-phantomjs-shim": "1.5.0",
"karma-sinon-chai": "1.3.3",
"karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5",
"lolex": "2.1.3",
"karma-webpack": "2.0.6",
"lolex": "2.3.0",
"mocha": "4.0.1",
"chai": "4.1.2",
"sinon": "4.0.1",
"sinon": "4.1.2",
"sinon-chai": "2.14.0",
"inject-loader": "3.0.1",
"babel-plugin-istanbul": "4.1.5",
"phantomjs-prebuilt": "^2.1.15",
"chromedriver": "2.33.1",
"cross-spawn": "^5.1.0",
"phantomjs-prebuilt": "^2.1.16",
"chromedriver": "2.33.2",
"cross-spawn": "5.1.0",
"nightwatch": "0.9.16",
"selenium-server": "3.6.0",
"selenium-server": "3.7.1",
"semver": "5.4.1",
"shelljs": "0.7.8",
"opn": "5.1.0",
@@ -85,18 +85,18 @@
"ora": "1.3.0",
"rimraf": "2.6.2",
"url-loader": "0.6.2",
"vue-loader": "13.3.0",
"vue-loader": "13.5.0",
"vue-style-loader": "3.0.3",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.8.1",
"vue-template-compiler": "2.5.6",
"webpack": "3.8.1",
"webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.20.0",
"webpack-merge": "4.1.0",
"node-sass": "4.5.3",
"webpack-merge": "4.1.1",
"node-sass": "4.7.1",
"sass-loader": "6.0.6"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
"node": ">= 6.4.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
* @version v1.0.5
* @version v1.0.6
* @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @license MIT
Vue_Full_Project/src/components/Aside.vue
+4 -4
View File
@@ -201,16 +201,16 @@
<hr>
<h6>System Utilization</h6>
<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>
<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>
<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>
<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>
</div>
</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">
<span class="navbar-toggler-icon"></span>
</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">Users</b-nav-item>
<b-nav-item class="px-3">Settings</b-nav-item>
</b-nav>
<b-nav is-nav-bar class="ml-auto">
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item class="d-md-down-none">
<i class="icon-bell"></i>
<b-badge pill variant="danger">5</b-badge>
@@ -24,7 +24,7 @@
<i class="icon-location-pin"></i>
</b-nav-item>
<HeaderDropdown/>
</b-nav>
</b-navbar-nav>
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
<span class="navbar-toggler-icon"></span>
</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"/>
</template>
<template v-else-if="item.divider">
<li class="divider"></li>
<SidebarNavDivider :classes="item.class"/>
</template>
<template v-else>
<template v-if="item.children">
@@ -52,6 +52,7 @@ import SidebarFooter from './SidebarFooter'
import SidebarForm from './SidebarForm'
import SidebarHeader from './SidebarHeader'
import SidebarMinimizer from './SidebarMinimizer'
import SidebarNavDivider from './SidebarNavDivider'
import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle'
@@ -70,6 +71,7 @@ export default {
SidebarForm,
SidebarHeader,
SidebarMinimizer,
SidebarNavDivider,
SidebarNavDropdown,
SidebarNavLink,
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: {
type: String,
default: ''
},
classes: {
type: String,
default: ''
}
},
computed: {
classList () {
return [
'nav-link',
this.linkVariant
this.linkVariant,
...this.itemClasses
]
},
linkVariant () {
return this.variant ? `nav-link-${this.variant}` : ''
},
itemClasses () {
return this.classes ? this.classes.split(' ') : []
},
isExternalLink () {
if (this.url.substring(0, 4) === 'http') {
return true
Vue_Full_Project/src/views/Charts.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="animated fadeIn">
<div class="card-columns cols-2">
<b-card-group columns class="card-columns cols-2">
<b-card header="Line Chart">
<div class="chart-wrapper">
<line-example/>
@@ -31,7 +31,7 @@
<polar-area-example/>
</div>
</b-card>
</div>
</b-card-group>
</div>
</template>
<script>
Vue_Full_Project/src/views/Dashboard.vue
+103 -103
View File
@@ -1,9 +1,9 @@
<template>
<div class="animated fadeIn">
<div class="row">
<div class="col-sm-6 col-lg-3">
<b-card class="bg-primary" :no-body="true">
<div class="card-body pb-0">
<b-row>
<b-col sm="6" lg="3">
<b-card no-body class="bg-primary" :no-body="true">
<b-card-body class="pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
<i class="icon-settings"></i>
@@ -15,13 +15,13 @@
</b-dropdown>
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</div>
</b-card-body>
<card-line1-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<b-card class="bg-info" :no-body="true">
<div class="card-body pb-0">
</b-col>
<b-col sm="6" lg="3">
<b-card no-body class="bg-info" :no-body="true">
<b-card-body class="pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
<template slot="button-content">
<i class="icon-location-pin"></i>
@@ -33,13 +33,13 @@
</b-dropdown>
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</div>
</b-card-body>
<card-line2-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<b-card class="bg-warning" :no-body="true">
<div class="card-body pb-0">
</b-col>
<b-col sm="6" lg="3">
<b-card no-body class="bg-warning" :no-body="true">
<b-card-body class="pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
<i class="icon-settings"></i>
@@ -51,13 +51,13 @@
</b-dropdown>
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</div>
</b-card-body>
<card-line3-chart-example class="chart-wrapper" style="height:70px;" height="70"/>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<b-card class="bg-danger" :no-body="true">
<div class="card-body pb-0">
</b-col>
<b-col sm="6" lg="3">
<b-card no-body class="bg-danger" :no-body="true">
<b-card-body class="pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
<i class="icon-settings"></i>
@@ -69,19 +69,19 @@
</b-dropdown>
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</div>
</b-card-body>
<card-bar-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
</b-col>
</b-row>
<b-card>
<div class="row">
<div class="col-sm-5">
<b-row>
<b-col sm="5">
<h4 class="card-title mb-0">Traffic</h4>
<div class="small text-muted">November 2016</div>
</div><!--/.col-->
<div class="col-sm-7 d-none d-md-block">
</b-col>
<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-toolbar class="float-right" aria-label="Toolbar with button groups">
<b-button-group class="mr-3" aria-label="First group">
@@ -90,41 +90,41 @@
<b-button variant="outline-secondary">Year</b-button>
</b-button-group>
</b-button-toolbar>
</div><!--/.col-->
</div><!--/.row-->
</b-col>
</b-row>
<main-chart-example class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
<div slot="footer">
<ul>
<li>
<div class="text-muted">Visits</div>
<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 class="d-none d-md-table-cell">
<div class="text-muted">Unique</div>
<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>
<div class="text-muted">Pageviews</div>
<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 class="d-none d-md-table-cell">
<div class="text-muted">New Users</div>
<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 class="d-none d-md-table-cell">
<div class="text-muted">Bounce Rate</div>
<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>
</ul>
</div>
</b-card>
<div class="row">
<div class="col-sm-6 col-lg-3">
<b-row>
<b-col sm="6" lg="3">
<div class="social-box facebook">
<i class="fa fa-facebook"></i>
<div class="chart-wrapper">
@@ -141,8 +141,8 @@
</li>
</ul>
</div><!--/.social-box-->
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
</b-col>
<b-col sm="6" lg="3">
<div class="social-box twitter">
<i class="fa fa-twitter"></i>
<div class="chart-wrapper">
@@ -159,8 +159,8 @@
</li>
</ul>
</div><!--/.social-box-->
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
</b-col>
<b-col sm="6" lg="3">
<div class="social-box linkedin">
<i class="fa fa-linkedin"></i>
<div class="chart-wrapper">
@@ -177,8 +177,8 @@
</li>
</ul>
</div><!--/.social-box-->
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
</b-col>
<b-col sm="6" lg="3">
<div class="social-box google-plus">
<i class="fa fa-google-plus"></i>
<div class="chart-wrapper">
@@ -195,15 +195,15 @@
</li>
</ul>
</div><!--/.social-box-->
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-md-12">
</b-col>
</b-row>
<b-row>
<b-col md="12">
<b-card header="Traffic &amp; Sales">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="row">
<div class="col-sm-6">
<b-row>
<b-col sm="12" lg="4">
<b-row>
<b-col sm="6">
<Callout variant="info">
<small class="text-muted">New Clients</small><br>
<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" />
</div>
</Callout>
</div><!--/.col-->
<div class="col-sm-6">
</b-col>
<b-col sm="6">
<Callout variant="danger">
<small class="text-muted">Recurring Clients</small><br>
<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" />
</div>
</Callout>
</div><!--/.col-->
</div><!--/.row-->
</b-col>
</b-row>
<hr class="mt-0">
<ul class="horizontal-bars">
<li>
@@ -229,8 +229,8 @@
Monday
</div>
<div class="bars">
<b-progress 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="34" variant="info"></b-progress>
<b-progress height={} class="progress-xs" :value="78" variant="danger"></b-progress>
</div>
</li>
<li>
@@ -238,8 +238,8 @@
Tuesday
</div>
<div class="bars">
<b-progress 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="56" variant="info"></b-progress>
<b-progress height={} class="progress-xs" :value="94" variant="danger"></b-progress>
</div>
</li>
<li>
@@ -247,8 +247,8 @@
Wednesday
</div>
<div class="bars">
<b-progress 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="12" variant="info"></b-progress>
<b-progress height={} class="progress-xs" :value="67" variant="danger"></b-progress>
</div>
</li>
<li>
@@ -256,8 +256,8 @@
Thursday
</div>
<div class="bars">
<b-progress 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="43" variant="info"></b-progress>
<b-progress height={} class="progress-xs" :value="91" variant="danger"></b-progress>
</div>
</li>
<li>
@@ -265,8 +265,8 @@
Friday
</div>
<div class="bars">
<b-progress 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="22" variant="info"></b-progress>
<b-progress height={} class="progress-xs" :value="73" variant="danger"></b-progress>
</div>
</li>
<li>
@@ -274,8 +274,8 @@
Saturday
</div>
<div class="bars">
<b-progress 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="53" variant="info"></b-progress>
<b-progress height={} class="progress-xs" :value="82" variant="danger"></b-progress>
</div>
</li>
<li>
@@ -283,18 +283,18 @@
Sunday
</div>
<div class="bars">
<b-progress 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="9" variant="info"></b-progress>
<b-progress height={} class="progress-xs" :value="69" variant="danger"></b-progress>
</div>
</li>
<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>
</li>
</ul>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="row">
<div class="col-sm-6">
</b-col>
<b-col sm="6" lg="4">
<b-row>
<b-col sm="6">
<Callout variant="warning">
<small class="text-muted">Pageviews</small><br>
<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" />
</div>
</Callout>
</div><!--/.col-->
<div class="col-sm-6">
</b-col>
<b-col sm="6">
<Callout variant="success">
<small class="text-muted">Organic</small><br>
<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" />
</div>
</Callout>
</div><!--/.col-->
</div><!--/.row-->
</b-col>
</b-row>
<hr class="mt-0">
<ul class="horizontal-bars type-2">
<li>
@@ -320,7 +320,7 @@
<span class="title">Male</span>
<span class="value">43%</span>
<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>
</li>
<li>
@@ -328,7 +328,7 @@
<span class="title">Female</span>
<span class="value">37%</span>
<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>
</li>
<li class="divider"></li>
@@ -337,7 +337,7 @@
<span class="title">Organic Search</span>
<span class="value">191,235 <span class="text-muted small">(56%)</span></span>
<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>
</li>
<li>
@@ -345,7 +345,7 @@
<span class="title">Facebook</span>
<span class="value">51,223 <span class="text-muted small">(15%)</span></span>
<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>
</li>
<li>
@@ -353,7 +353,7 @@
<span class="title">Twitter</span>
<span class="value">37,564 <span class="text-muted small">(11%)</span></span>
<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>
</li>
<li>
@@ -361,17 +361,17 @@
<span class="title">LinkedIn</span>
<span class="value">27,319 <span class="text-muted small">(8%)</span></span>
<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>
</li>
<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>
</ul>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="row">
<div class="col-sm-6">
</b-col>
<b-col sm="6" lg="4">
<b-row>
<b-col sm="6">
<Callout>
<small class="text-muted">CTR</small><br>
<strong class="h4">23%</strong>
@@ -379,8 +379,8 @@
<callout-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" width="80px" height="30" />
</div>
</Callout>
</div><!--/.col-->
<div class="col-sm-6">
</b-col>
<b-col sm="6">
<Callout variant="primary">
<small class="text-muted">Bounce Rate</small><br>
<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" />
</div>
</Callout>
</div><!--/.col-->
</div><!--/.row-->
</b-col>
</b-row>
<hr class="mt-0">
<ul class="icons-list">
<li>
@@ -403,7 +403,7 @@
<strong>1.924</strong>
</div>
<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>
</li>
<li>
@@ -417,7 +417,7 @@
<strong>1.224</strong>
</div>
<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>
</li>
<li>
@@ -431,7 +431,7 @@
<strong>1.163</strong>
</div>
<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>
</li>
<li>
@@ -445,7 +445,7 @@
<strong>928</strong>
</div>
<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>
</li>
<li>
@@ -459,7 +459,7 @@
<strong>893</strong>
</div>
<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>
</li>
<li>
@@ -473,7 +473,7 @@
<strong>121.924</strong>
</div>
<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>
</li>
<li>
@@ -487,15 +487,15 @@
<strong>12.125</strong>
</div>
<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>
</li>
<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>
</ul>
</div><!--/.col-->
</div><!--/.row-->
</b-col>
</b-row>
<br/>
<b-table class="table-outline table-responsive-sm mb-0" hover
:items="tableItems"
@@ -525,7 +525,7 @@
<small class="text-muted">{{item.value.period}}</small>
</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>
<i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
<div slot="activity" slot-scope="item">
@@ -534,8 +534,8 @@
</div>
</b-table>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
</b-col>
</b-row>
</div>
</template>
Vue_Full_Project/src/views/Widgets.vue
+153 -153
View File
@@ -1,235 +1,235 @@
<template>
<div class="animated fadeIn">
<div class="row">
<div class="col-sm-6 col-lg-3">
<b-row>
<b-col sm="6" lg="3">
<b-card>
<div class="h4 m-0">89.9%</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>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
</b-col>
<b-col sm="6" lg="3">
<b-card>
<div class="h4 m-0">12.124</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>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
</b-col>
<b-col sm="6" lg="3">
<b-card>
<div class="h4 m-0">$98.111,00</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>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
</b-col>
<b-col sm="6" lg="3">
<b-card>
<div class="h4 m-0">2 TB</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>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-sm-6 col-lg-3">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col sm="6" lg="3">
<b-card class="text-white bg-primary">
<div class="h4 m-0">89.9%</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>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
</b-col>
<b-col sm="6" lg="3">
<b-card class="text-white bg-warning">
<div class="h4 m-0">12.124</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>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
</b-col>
<b-col sm="6" lg="3">
<b-card class="text-white bg-danger">
<div class="h4 m-0">$98.111,00</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>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
</b-col>
<b-col sm="6" lg="3">
<b-card class="text-white bg-info">
<div class="h4 m-0">2 TB</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>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-6 col-lg-3">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
<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>
</div>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
<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>
</div>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
<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>
</div>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
<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>
</div>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-6 col-lg-3">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
</b-col>
<b-col cols="6" lg="3">
<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>
<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>
</b-card-body>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-md-3 col-sm-6">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col md="3" sm="6">
<div class="social-box facebook">
<i class="fa fa-facebook"></i>
<ul>
@@ -243,8 +243,8 @@
</li>
</ul>
</div><!--/social-box-->
</div><!--/.col-->
<div class="col-md-3 col-sm-6">
</b-col>
<b-col md="3" sm="6">
<div class="social-box twitter">
<i class="fa fa-twitter"></i>
<ul>
@@ -258,8 +258,8 @@
</li>
</ul>
</div><!--/social-box-->
</div><!--/.col-->
<div class="col-md-3 col-sm-6">
</b-col>
<b-col md="3" sm="6">
<div class="social-box linkedin">
<i class="fa fa-linkedin"></i>
<ul>
@@ -273,8 +273,8 @@
</li>
</ul>
</div><!--/social-box-->
</div><!--/.col-->
<div class="col-md-3 col-sm-6">
</b-col>
<b-col md="3" sm="6">
<div class="social-box google-plus">
<i class="fa fa-google-plus"></i>
<ul>
@@ -288,16 +288,16 @@
</li>
</ul>
</div><!--/social-box-->
</div><!--/.col-->
</div><!--/.row-->
<div class="card-group mb-4">
</b-col>
</b-row><!--/.row-->
<b-card-group class="mb-4">
<b-card>
<div class="h1 text-muted text-right mb-4">
<i class="icon-people"></i>
</div>
<div class="h4 mb-0">87.500</div>
<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 class="h1 text-muted text-right mb-4">
@@ -305,7 +305,7 @@
</div>
<div class="h4 mb-0">385</div>
<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 class="h1 text-muted text-right mb-4">
@@ -313,7 +313,7 @@
</div>
<div class="h4 mb-0">1238</div>
<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 class="h1 text-muted text-right mb-4">
@@ -321,7 +321,7 @@
</div>
<div class="h4 mb-0">28%</div>
<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 class="h1 text-muted text-right mb-4">
@@ -329,133 +329,133 @@
</div>
<div class="h4 mb-0">5:34:11</div>
<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>
</div>
<div class="row">
<div class="col-sm-6 col-md-2">
</b-card-group>
<b-row>
<b-col sm="6" md="2">
<b-card>
<div class="h1 text-muted text-right mb-4">
<i class="icon-people"></i>
</div>
<div class="h4 mb-0">87.500</div>
<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>
</div><!--/.col-->
<div class="col-sm-6 col-md-2">
</b-col>
<b-col sm="6" md="2">
<b-card>
<div class="h1 text-muted text-right mb-4">
<i class="icon-user-follow"></i>
</div>
<div class="h4 mb-0">385</div>
<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>
</div><!--/.col-->
<div class="col-sm-6 col-md-2">
</b-col>
<b-col sm="6" md="2">
<b-card>
<div class="h1 text-muted text-right mb-4">
<i class="icon-basket-loaded"></i>
</div>
<div class="h4 mb-0">1238</div>
<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>
</div><!--/.col-->
<div class="col-sm-6 col-md-2">
</b-col>
<b-col sm="6" md="2">
<b-card>
<div class="h1 text-muted text-right mb-4">
<i class="icon-pie-chart"></i>
</div>
<div class="h4 mb-0">28%</div>
<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>
</div><!--/.col-->
<div class="col-sm-6 col-md-2">
</b-col>
<b-col sm="6" md="2">
<b-card>
<div class="h1 text-muted text-right mb-4">
<i class="icon-speedometer"></i>
</div>
<div class="h4 mb-0">5:34:11</div>
<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>
</div><!--/.col-->
<div class="col-sm-6 col-md-2">
</b-col>
<b-col sm="6" md="2">
<b-card>
<div class="h1 text-muted text-right mb-4">
<i class="icon-speech"></i>
</div>
<div class="h4 mb-0">972</div>
<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>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-2">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col sm="6" md="2">
<b-card class="text-white bg-info">
<div class="h1 text-muted text-right mb-4">
<i class="icon-people"></i>
</div>
<div class="h4 mb-0">87.500</div>
<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>
</div><!--/.col-->
<div class="col-sm-6 col-md-2">
</b-col>
<b-col sm="6" md="2">
<b-card class="text-white bg-success">
<div class="h1 text-muted text-right mb-4">
<i class="icon-user-follow"></i>
</div>
<div class="h4 mb-0">385</div>
<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>
</div><!--/.col-->
<div class="col-sm-6 col-md-2">
</b-col>
<b-col sm="6" md="2">
<b-card class="text-white bg-warning">
<div class="h1 text-muted text-right mb-4">
<i class="icon-basket-loaded"></i>
</div>
<div class="h4 mb-0">1238</div>
<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>
</div><!--/.col-->
<div class="col-sm-6 col-md-2">
</b-col>
<b-col sm="6" md="2">
<b-card class="text-white bg-primary">
<div class="h1 text-muted text-right mb-4">
<i class="icon-pie-chart"></i>
</div>
<div class="h4 mb-0">28%</div>
<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>
</div><!--/.col-->
<div class="col-sm-6 col-md-2">
</b-col>
<b-col sm="6" md="2">
<b-card class="text-white bg-danger">
<div class="h1 text-muted text-right mb-4">
<i class="icon-speedometer"></i>
</div>
<div class="h4 mb-0">5:34:11</div>
<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>
</div><!--/.col-->
<div class="col-sm-6 col-md-2">
</b-col>
<b-col sm="6" md="2">
<b-card class="text-white bg-info">
<div class="h1 text-muted text-right mb-4">
<i class="icon-speech"></i>
</div>
<div class="h4 mb-0">972</div>
<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>
</div><!--/.col-->
</div><!--/.row-->
</b-col>
</b-row><!--/.row-->
</div>
</template>
Vue_Full_Project/src/views/components/Buttons.vue
+6 -6
View File
@@ -1,7 +1,7 @@
<template>
<div class="animated fadeIn">
<div class="row">
<div class="col-md-6">
<b-row>
<b-col md="6">
<b-card>
<div slot="header">
<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="link" :block="true">Block level button</b-button>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col><!--/.col-->
<b-col md="6">
<b-card>
<div slot="header">
<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-danger" :block="true">Block level button</b-button>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
</b-col><!--/.col-->
</b-row><!--/.row-->
</div>
</template>
Vue_Full_Project/src/views/components/Cards.vue
+82 -82
View File
@@ -1,23 +1,23 @@
<template>
<div class="animated fadeIn">
<div class="row">
<div class="col-sm-6 col-md-4">
<b-row>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<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.
<div slot="footer">Card footer</div>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<b-card>
<div slot="header">
Card with switch
@@ -29,8 +29,8 @@
</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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<b-card>
<div slot="header">
Card with label
@@ -38,8 +38,8 @@
</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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<b-card>
<div slot="header">
Card with label
@@ -47,75 +47,75 @@
</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.
</b-card>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-4">
<b-card header="Card outline" class="border-primary">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<b-card header="Card outline" class="border-secondary">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<b-card header="Card outline" class="border-success">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<b-card header="Card outline" class="border-info">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<b-card header="Card outline" class="border-warning">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<b-card header="Card outline" class="border-danger">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
</div><!--/.row-->
</b-col>
</b-row><!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-4">
<b-card variant="accent-primary" header="Card with accent">
<b-row>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<b-card variant="accent-secondary" header="Card with accent">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<b-card variant="accent-success" header="Card with accent">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<b-card variant="accent-info" header="Card with accent">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<b-card variant="accent-warning" header="Card with accent">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<b-card variant="accent-danger" header="Card with accent">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-4">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col sm="6" md="4">
<b-card class="bg-primary text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -124,8 +124,8 @@
</footer>
</blockquote>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<b-card class="bg-success text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -134,8 +134,8 @@
</footer>
</blockquote>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<b-card class="bg-info text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -144,8 +144,8 @@
</footer>
</blockquote>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<b-card class="bg-warning text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -154,8 +154,8 @@
</footer>
</blockquote>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<b-card class="bg-danger text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -164,8 +164,8 @@
</footer>
</blockquote>
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<b-card class="bg-secondary text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -174,40 +174,40 @@
</footer>
</blockquote>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-4">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
</b-col>
<b-col sm="6" md="4">
<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.
</b-card>
</div><!--/.col-->
</div><!--/.row-->
</b-col>
</b-row><!--/.row-->
</div>
</template>
Vue_Full_Project/src/views/components/Forms.vue
+216 -187
View File
@@ -1,51 +1,51 @@
<template>
<div class="animated fadeIn">
<div class="row">
<div class="col-sm-6">
<b-row>
<b-col sm="6">
<b-card>
<div slot="header">
<strong>Credit Card</strong> <small>Form</small>
</div>
<div class="row">
<div class="col-sm-12">
<b-row>
<b-col sm="12">
<b-form-fieldset label="Name">
<b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
</b-form-fieldset>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-sm-12">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col sm="12">
<b-form-fieldset label="Credit Card Number">
<b-form-input type="text" id="ccnumber" placeholder="0000 0000 0000 0000"></b-form-input>
</b-form-fieldset>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-sm-4">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col sm="4">
<b-form-fieldset label="Month">
<b-form-select
:plain="true"
:options="[1,2,3,4,5,6,7,8,9,10,11,12]">
</b-form-select>
</b-form-fieldset>
</div><!--/.col-->
<div class="col-sm-4">
</b-col><!--/.col-->
<b-col sm="4">
<b-form-fieldset label="Year">
<b-form-select
:plain="true"
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]">
</b-form-select>
</b-form-fieldset>
</div><!--/.col-->
<div class="col-sm-4">
</b-col><!--/.col-->
<b-col sm="4">
<b-form-fieldset label="CVV/CVC">
<b-form-input type="text" id="cvv" placeholder="123"></b-form-input>
</b-form-fieldset>
</div><!--/.col-->
</div><!--/.row-->
</b-col><!--/.col-->
</b-row><!--/.row-->
</b-card>
</div><!--/.col-->
<div class="col-sm-6">
</b-col><!--/.col-->
<b-col sm="6">
<b-card>
<div slot="header">
<strong>Company</strong> <small>Form</small>
@@ -59,26 +59,26 @@
<b-form-fieldset label="Street">
<b-form-input type="text" id="street" placeholder="Enter street name"></b-form-input>
</b-form-fieldset>
<div class="row">
<div class="col-sm-8">
<b-row>
<b-col sm="8">
<b-form-fieldset label="City">
<b-form-input type="text" id="city" placeholder="Enter your city"></b-form-input>
</b-form-fieldset>
</div><!--/.col-->
<div class="col-sm-4">
</b-col><!--/.col-->
<b-col sm="4">
<b-form-fieldset label="Postal Code">
<b-form-input type="text" id="postal-code" placeholder="Postal Code"></b-form-input>
</b-form-fieldset>
</div><!--/.col-->
</div><!--/.row-->
</b-col><!--/.col-->
</b-row><!--/.row-->
<b-form-fieldset label="Country">
<b-form-input type="text" id="country" placeholder="Country name"></b-form-input>
</b-form-fieldset>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-md-6">
</b-col><!--/.col-->
</b-row><!--/.row-->
<b-row>
<b-col md="6">
<b-card>
<div slot="header">
<strong>Basic Form</strong> Elements
@@ -311,23 +311,19 @@
<strong>Inline</strong> Form
</div>
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
<b-form :inline="true">
<div class="form-group">
<label>Name</label>
<b-form-input type="text" placeholder="Jane Doe"></b-form-input>
</div>
<div class="form-group">
<label>Email</label>
<b-form-input type="email" placeholder="ane.doe@example.com"></b-form-input>
</div>
<b-form inline>
<label class="mr-sm-2" for="inlineInput1">Name: </label>
<b-input id="inlineInput1" type="text" placeholder="Jane Doe"></b-input>
<label class="mr-sm-2" for="inlineInput2">Email: </label>
<b-input id="inlineInput2" type="email" placeholder="jane.doe@example.com"></b-input>
</b-form>
<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="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
</div>
</b-card>
</div>
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card>
<div slot="header">
<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>
</div>
</b-card>
<b-card :no-block="true">
<b-card no-body :no-block="true">
<div slot="header">
Input <strong>Grid</strong>
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-sm-3">
<b-card-body>
<b-row class="form-group">
<b-col sm="3">
<b-form-input type="text" placeholder=".col-sm-3"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
</b-col>
</b-row>
<b-row class="form-group">
<b-col sm="4">
<b-form-input type="text" placeholder=".col-sm-4"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-sm-5">
</b-col>
</b-row>
<b-row class="form-group">
<b-col sm="5">
<b-form-input type="text" placeholder=".col-sm-5"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
</b-col>
</b-row>
<b-row class="form-group">
<b-col sm="6">
<b-form-input type="text" placeholder=".col-sm-6"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-sm-7">
</b-col>
</b-row>
<b-row class="form-group">
<b-col sm="7">
<b-form-input type="text" placeholder=".col-sm-7"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-sm-8">
</b-col>
</b-row>
<b-row class="form-group">
<b-col sm="8">
<b-form-input type="text" placeholder=".col-sm-8"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-sm-9">
</b-col>
</b-row>
<b-row class="form-group">
<b-col sm="9">
<b-form-input type="text" placeholder=".col-sm-9"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
</b-col>
</b-row>
<b-row class="form-group">
<b-col sm="10">
<b-form-input type="text" placeholder=".col-sm-10"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-sm-11">
</b-col>
</b-row>
<b-row class="form-group">
<b-col sm="11">
<b-form-input type="text" placeholder=".col-sm-11"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
</b-col>
</b-row>
<b-row class="form-group">
<b-col sm="12">
<b-form-input type="text" placeholder=".col-sm-12"></b-form-input>
</div>
</div>
</div>
</b-col>
</b-row>
</b-card-body>
<div slot="footer">
<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>
@@ -458,28 +454,61 @@
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
</div>
</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">
<strong>Validation states</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>
<strong>Validation feedback</strong> Form
</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>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-sm-4">
</b-col>
<b-col sm="12" md="6">
<b-card no-body :no-block="true">
<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>
<div slot="header">
<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>
</div>
</b-card>
</div>
<div class="col-sm-4">
</b-col>
<b-col sm="4">
<b-card>
<div slot="header">
<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>
</div>
</b-card>
</div>
<div class="col-sm-4">
</b-col>
<b-col sm="4">
<b-card>
<div slot="header">
<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>
</div>
</b-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
</b-col>
</b-row>
<b-row>
<b-col md="6">
<b-card>
<div slot="header">
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</div>
<div class="form-group row">
<div class="col-md-8">
<b-row class="form-group">
<b-col md="8">
<b-form-input type="text" placeholder=".col-md-8"></b-form-input>
</div>
<div class="col-md-4">
</b-col>
<b-col md="4">
<b-form-input type="text" placeholder=".col-md-4"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-md-7">
</b-col>
</b-row>
<b-row class="form-group">
<b-col md="7">
<b-form-input type="text" placeholder=".col-md-7"></b-form-input>
</div>
<div class="col-md-5">
</b-col>
<b-col md="5">
<b-form-input type="text" placeholder=".col-md-5"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
</b-col>
</b-row>
<b-row class="form-group">
<b-col md="6">
<b-form-input type="text" placeholder=".col-md-6"></b-form-input>
</div>
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-form-input type="text" placeholder=".col-md-6"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-md-5">
</b-col>
</b-row>
<b-row class="form-group">
<b-col md="5">
<b-form-input type="text" placeholder=".col-md-5"></b-form-input>
</div>
<div class="col-md-7">
</b-col>
<b-col md="7">
<b-form-input type="text" placeholder=".col-md-7"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
</b-col>
</b-row>
<b-row class="form-group">
<b-col md="4">
<b-form-input type="text" placeholder=".col-md-4"></b-form-input>
</div>
<div class="col-md-8">
</b-col>
<b-col md="8">
<b-form-input type="text" placeholder=".col-md-8"></b-form-input>
</div>
</div>
</b-col>
</b-row>
<div slot="footer">
<b-button type="submit" size="sm" variant="primary">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>
</div>
</b-card>
</div>
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card>
<div slot="header">
Input Grid for small devices! <small> <code>.col-*</code></small>
</div>
<div class="form-group row">
<div class="col-4">
<b-row class="form-group">
<b-col cols="4">
<b-form-input type="text" placeholder=".col-4"></b-form-input>
</div>
<div class="col-8">
</b-col>
<b-col cols="8">
<b-form-input type="text" placeholder=".col-8"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-5">
</b-col>
</b-row>
<b-row class="form-group">
<b-col cols="5">
<b-form-input type="text" placeholder=".col-5"></b-form-input>
</div>
<div class="col-7">
</b-col>
<b-col cols="7">
<b-form-input type="text" placeholder=".col-7"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-6">
</b-col>
</b-row>
<b-row class="form-group">
<b-col cols="6">
<b-form-input type="text" placeholder=".col-6"></b-form-input>
</div>
<div class="col-6">
</b-col>
<b-col cols="6">
<b-form-input type="text" placeholder=".col-6"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-7">
</b-col>
</b-row>
<b-row class="form-group">
<b-col cols="7">
<b-form-input type="text" placeholder=".col-5"></b-form-input>
</div>
<div class="col-5">
</b-col>
<b-col cols="5">
<b-form-input type="text" placeholder=".col-5"></b-form-input>
</div>
</div>
<div class="form-group row">
<div class="col-8">
</b-col>
</b-row>
<b-row class="form-group">
<b-col cols="8">
<b-form-input type="text" placeholder=".col-8"></b-form-input>
</div>
<div class="col-4">
</b-col>
<b-col cols="4">
<b-form-input type="text" placeholder=".col-4"></b-form-input>
</div>
</div>
</b-col>
</b-row>
<div slot="footer">
<b-button type="submit" size="sm" variant="primary">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>
</div>
</b-card>
</div>
</div>
<div class="row">
<div class="col-sm-4">
</b-col>
</b-row>
<b-row>
<b-col sm="4">
<b-card>
<div slot="header">
Example Form
@@ -746,8 +775,8 @@
<b-button type="submit" size="sm" variant="primary">Submit</b-button>
</div>
</b-card>
</div>
<div class="col-sm-4">
</b-col>
<b-col sm="4">
<b-card>
<div slot="header">
Example Form
@@ -771,8 +800,8 @@
<b-button type="submit" class="btn btn-sm btn-secondary">Submit</b-button>
</div>
</b-card>
</div>
<div class="col-sm-4">
</b-col>
<b-col sm="4">
<b-card>
<div slot="header">
Example Form
@@ -796,10 +825,10 @@
<b-button type="submit" size="sm" variant="success">Submit</b-button>
</div>
</b-card>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-lg-12">
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col lg="12">
<b-card>
<div slot="header">
<i class="fa fa-edit"></i> Form Elements
@@ -843,8 +872,8 @@
<b-button type="button" variant="secondary">Cancel</b-button>
</div>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
</b-col><!--/.col-->
</b-row><!--/.row-->
</div>
</template>
Vue_Full_Project/src/views/components/Modals.vue
+8 -8
View File
@@ -1,8 +1,8 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="row">
<div class="col-12">
<b-row>
<b-col cols="12">
<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="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="info" @click="infoModal = true">Launch info modal</b-button>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
</b-col><!--/.col-->
</b-row><!--/.row-->
</div>
<!-- Modal Component -->
@@ -52,7 +52,7 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</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
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
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
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</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
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
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
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</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
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
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
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</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
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
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>
<div class="animated fadeIn">
<div class="row">
<div class="col-12">
<b-row>
<b-col cols="12">
<b-card>
<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>
@@ -91,8 +91,8 @@
<b-button size="lg" variant="vimeo"><span>Vimeo</span></b-button>
</p>
</b-card>
</div><!--/.col-->
<div class="col-12">
</b-col><!--/.col-->
<b-col cols="12">
<b-card>
<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>
@@ -182,9 +182,9 @@
<b-button size="lg" variant="vimeo icon"><span>Vimeo</span></b-button>
</p>
</b-card>
</div><!--/.col-->
</b-col><!--/.col-->
<div class="col-12">
<b-col cols="12">
<b-card>
<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>
@@ -274,8 +274,8 @@
<b-button size="lg" variant="vimeo text"><span>Vimeo</span></b-button>
</p>
</b-card>
</div><!--/.col-->
</div><!--/.row-->
</b-col><!--/.col-->
</b-row><!--/.row-->
</div>
</template>
Vue_Full_Project/src/views/components/Switches.vue
+71 -103
View File
@@ -1,7 +1,7 @@
<template>
<div class="animated fadeIn">
<div class="row">
<div class="col-md-12">
<b-row>
<b-col md="12">
<b-card header="3d Switch">
<c-switch type="3d" variant="primary" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -15,8 +15,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="3d" variant="danger" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch default">
<c-switch type="default" variant="primary" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -30,8 +30,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch default - pills">
<c-switch type="default" variant="primary" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -45,8 +45,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger" :pill="true" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch outline">
<c-switch type="default" variant="primary-outline" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -60,8 +60,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger-outline" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch outline - pills">
<c-switch type="default" variant="primary-outline" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -75,8 +75,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger-outline" :pill="true" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch outline alternative">
<c-switch type="default" variant="primary-outline-alt" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -90,8 +90,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger-outline-alt" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch outline alternative - pills">
<c-switch type="default" variant="primary-outline-alt" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -105,9 +105,9 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="default" variant="danger-outline-alt" :pill="true" :checked="true"/>
</b-card>
</div><!--/.col-->
</b-col>
<div class="col-md-6">
<b-col md="6">
<b-card header="Switch with text">
<c-switch type="text" variant="primary" on="On" off="Off" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -121,8 +121,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger" on="On" off="Off" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch with text - pills">
<c-switch type="text" variant="primary" on="On" off="Off" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -136,8 +136,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger" on="On" off="Off" :pill="true" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch with text outline">
<c-switch type="text" variant="primary-outline" on="On" off="Off" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -151,8 +151,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger-outline" on="On" off="Off" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch with text outline - pills">
<c-switch type="text" variant="primary-outline" on="On" off="Off" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -166,8 +166,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger-outline" on="On" off="Off" :pill="true" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch with text outline alternative">
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -181,8 +181,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<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"/>
&nbsp;&nbsp;&nbsp;
@@ -196,9 +196,9 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
</b-card>
</div><!--/.col-->
</b-col>
<div class="col-md-6">
<b-col md="6">
<b-card header="Switch with icon">
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -212,8 +212,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch with icon - pills">
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -227,8 +227,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch with icon outline">
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -242,8 +242,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<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"/>
&nbsp;&nbsp;&nbsp;
@@ -257,8 +257,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<b-card header="Switch with icon outline alternative">
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
&nbsp;&nbsp;&nbsp;
@@ -272,8 +272,8 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
</b-card>
</div><!--/.col-->
<div class="col-md-6">
</b-col>
<b-col md="6">
<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"/>
&nbsp;&nbsp;&nbsp;
@@ -287,77 +287,30 @@
&nbsp;&nbsp;&nbsp;
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
</b-card>
</div><!--/.col-->
</b-col>
<div class="col-md-12">
<div class="card">
<div class="card-header">
<b-col md="12">
<b-card no-body>
<div slot="header">
Sizes
</div>
<div class="card-body p-0">
<table class="table table-hover table-striped table-align-middle mb-0">
<thead>
<th>Size</th>
<th>Example</th>
<th>CSS Class</th>
</thead>
<tbody>
<tr>
<td>
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-->
<b-card-body class="p-0">
<b-table hover striped class="table-responsive-sm table-align-middle mb-0" :items="items" :fields="fields">
<template slot="example" slot-scope="data">
<c-switch :type="data.value.type" :variant="data.value.variant" :size="data.value.size" :checked="data.value.checked"/>
</template>
</b-table>
</b-card-body>
</b-card>
</b-col>
</b-row><!--/.row-->
</div>
</template>
<script>
import cSwitch from '../../components/Switch'
export default {
import cSwitch from '../../components/Switch'
export default {
name: 'switches',
components: {
cSwitch
@@ -366,6 +319,21 @@ export default {
icon (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>
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
+27 -342
View File
@@ -1,355 +1,40 @@
<template>
<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-card header="<i class='fa fa-align-justify'></i> Striped Table">
<table class="table table-striped">
<thead>
<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-->
<b-row>
<b-col lg="6">
<c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
</b-col><!--/.col-->
<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-card header="<i class='fa fa-align-justify'></i> Condensed Table">
<table class="table table-sm">
<thead>
<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-->
<b-row>
<b-col lg="6">
<c-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
</b-col><!--/.col-->
<div class="col-lg-6">
<b-card header="<i class='fa fa-align-justify'></i> Bordered Table">
<table class="table table-bordered">
<thead>
<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>
<b-col lg="6">
<c-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
</b-col><!--/.col-->
</b-row><!--/.row-->
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-12">
<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-->
<b-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>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'tables'
}
import cTable from './Table.vue'
export default {
name: 'tables',
components: {cTable}
}
</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>
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-group">
<div class="card p-4">
<div class="card-body">
<b-row class="justify-content-center">
<b-col md="8">
<b-card-group>
<b-card no-body class="p-4">
<b-card-body>
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-3">
@@ -16,28 +16,28 @@
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-primary px-4">Login</button>
</div>
<div class="col-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</div>
</div>
<div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
<div class="card-body text-center">
<b-row>
<b-col cols="6">
<b-button variant="primary" class="px-4">Login</b-button>
</b-col>
<b-col cols="6" class="text-right">
<b-button variant="link" class="px-0">Forgot password?</b-button>
</b-col>
</b-row>
</b-card-body>
</b-card>
<b-card no-body class="text-white bg-primary py-5 d-md-down-none" style="width:44%">
<b-card-body class="text-center">
<div>
<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>
<button type="button" class="btn btn-primary active mt-3">Register Now!</button>
</div>
</div>
</div>
</div>
</div>
<b-button variant="primary" class="active mt-3">Register Now!</b-button>
</div>
</b-card-body>
</b-card>
</b-card-group>
</b-col>
</b-row>
</div>
</div>
</template>
Vue_Full_Project/src/views/pages/Page404.vue
+5 -5
View File
@@ -1,8 +1,8 @@
<template>
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<b-row class="justify-content-center">
<b-col md="6">
<div class="clearfix">
<h1 class="float-left display-3 mr-4">404</h1>
<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>
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
<span class="input-group-btn">
<button class="btn btn-info" type="button">Search</button>
<b-button variant="info">Search</b-button>
</span>
</div>
</div>
</div>
</b-col>
</b-row>
</div>
</div>
</template>
Vue_Full_Project/src/views/pages/Page500.vue
+5 -5
View File
@@ -1,8 +1,8 @@
<template>
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<b-row class="justify-content-center">
<b-col md="6">
<div class="clearfix">
<h1 class="float-left display-3 mr-4">500</h1>
<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>
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
<span class="input-group-btn">
<button class="btn btn-info" type="button">Search</button>
<b-button variant="info">Search</b-button>
</span>
</div>
</div>
</div>
</b-col>
</b-row>
</div>
</div>
</template>
Vue_Full_Project/src/views/pages/Register.vue
+19 -19
View File
@@ -1,10 +1,10 @@
<template>
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card mx-4">
<div class="card-body p-4">
<b-row class="justify-content-center">
<b-col md="6" sm="8">
<b-card no-body class="mx-4">
<b-card-body class="p-4">
<h1>Register</h1>
<p class="text-muted">Create your account</p>
<div class="input-group mb-3">
@@ -27,21 +27,21 @@
<input type="password" class="form-control" placeholder="Repeat password">
</div>
<button type="button" class="btn btn-block btn-success">Create Account</button>
</div>
<div class="card-footer p-4">
<div class="row">
<div class="col-6">
<button class="btn btn-block btn-facebook" type="button"><span>facebook</span></button>
</div>
<div class="col-6">
<button class="btn btn-block btn-twitter" type="button"><span>twitter</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<b-button variant="success" block>Create Account</b-button>
</b-card-body>
<b-card-footer class="p-4">
<b-row>
<b-col cols="6">
<b-button block class="btn btn-facebook"><span>facebook</span></b-button>
</b-col>
<b-col cols="6">
<b-button block class="btn btn-twitter" type="button"><span>twitter</span></b-button>
</b-col>
</b-row>
</b-card-footer>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
Vue_Starter/package.json
+39 -39
View File
@@ -1,6 +1,6 @@
{
"name": "@coreui/vue",
"version": "1.0.5",
"version": "1.0.6",
"description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek",
"homepage": "http://coreui.io",
@@ -18,66 +18,66 @@
},
"dependencies": {
"bootstrap": "4.0.0-beta.2",
"bootstrap-vue": "1.0.0-beta.9",
"chart.js": "2.7.0",
"bootstrap-vue": "1.1.0",
"chart.js": "2.7.1",
"font-awesome": "^4.7.0",
"simple-line-icons": "^2.4.1",
"vue": "^2.5.2",
"vue-chartjs": "^3.0.0",
"vue-router": "^3.0.1"
"vue": "2.5.6",
"vue-chartjs": "3.0.2",
"vue-router": "3.0.1"
},
"devDependencies": {
"autoprefixer": "7.1.5",
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "8.0.1",
"babel-eslint": "8.0.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-stage-2": "6.24.1",
"babel-register": "6.26.0",
"chalk": "2.2.0",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.1.1",
"chalk": "2.3.0",
"connect-history-api-fallback": "1.5.0",
"copy-webpack-plugin": "4.2.1",
"css-loader": "0.28.7",
"eslint": "^4.9.0",
"eslint": "4.11.0",
"eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-html": "3.2.2",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-node": "5.2.0",
"eslint-plugin-html": "4.0.0",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-node": "5.2.1",
"eslint-config-standard": "10.2.1",
"eslint-plugin-promise": "3.6.0",
"eslint-plugin-standard": "3.0.1",
"eventsource-polyfill": "^0.9.6",
"eventsource-polyfill": "0.9.6",
"express": "4.16.2",
"extract-text-webpack-plugin": "3.0.1",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"friendly-errors-webpack-plugin": "1.6.1",
"html-webpack-plugin": "2.30.1",
"http-proxy-middleware": "0.17.4",
"webpack-bundle-analyzer": "2.9.0",
"cross-env": "^5.1.0",
"webpack-bundle-analyzer": "2.9.1",
"cross-env": "5.1.1",
"karma": "1.7.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-coverage": "1.1.1",
"karma-mocha": "1.3.0",
"karma-phantomjs-launcher": "1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-phantomjs-shim": "1.5.0",
"karma-sinon-chai": "1.3.3",
"karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5",
"lolex": "2.1.3",
"karma-webpack": "2.0.6",
"lolex": "2.3.0",
"mocha": "4.0.1",
"chai": "4.1.2",
"sinon": "4.0.1",
"sinon": "4.1.2",
"sinon-chai": "2.14.0",
"inject-loader": "3.0.1",
"babel-plugin-istanbul": "4.1.5",
"phantomjs-prebuilt": "^2.1.15",
"chromedriver": "2.33.1",
"cross-spawn": "^5.1.0",
"phantomjs-prebuilt": "^2.1.16",
"chromedriver": "2.33.2",
"cross-spawn": "5.1.0",
"nightwatch": "0.9.16",
"selenium-server": "3.6.0",
"selenium-server": "3.7.1",
"semver": "5.4.1",
"shelljs": "0.7.8",
"opn": "5.1.0",
@@ -85,18 +85,18 @@
"ora": "1.3.0",
"rimraf": "2.6.2",
"url-loader": "0.6.2",
"vue-loader": "13.3.0",
"vue-loader": "13.5.0",
"vue-style-loader": "3.0.3",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.8.1",
"vue-template-compiler": "2.5.6",
"webpack": "3.8.1",
"webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.20.0",
"webpack-merge": "4.1.0",
"node-sass": "4.5.3",
"webpack-merge": "4.1.1",
"node-sass": "4.7.1",
"sass-loader": "6.0.6"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
"node": ">= 6.4.0",
"npm": ">= 5.0.0"
}
}
Vue_Starter/scss/style.scss
+1 -1
View File
@@ -1,6 +1,6 @@
/*!
* CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.5
* @version v1.0.6
* @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @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"/>
</template>
<template v-else-if="item.divider">
<li class="divider"></li>
<SidebarNavDivider :classes="item.class"/>
</template>
<template v-else>
<template v-if="item.children">
@@ -52,6 +52,7 @@ import SidebarFooter from './SidebarFooter'
import SidebarForm from './SidebarForm'
import SidebarHeader from './SidebarHeader'
import SidebarMinimizer from './SidebarMinimizer'
import SidebarNavDivider from './SidebarNavDivider'
import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle'
@@ -70,6 +71,7 @@ export default {
SidebarForm,
SidebarHeader,
SidebarMinimizer,
SidebarNavDivider,
SidebarNavDropdown,
SidebarNavLink,
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: {
type: String,
default: ''
},
classes: {
type: String,
default: ''
}
},
computed: {
classList () {
return [
'nav-link',
this.linkVariant
this.linkVariant,
...this.itemClasses
]
},
linkVariant () {
return this.variant ? `nav-link-${this.variant}` : ''
},
itemClasses () {
return this.classes ? this.classes.split(' ') : []
},
isExternalLink () {
if (this.url.substring(0, 4) === 'http') {
return true
Vue_Starter/src/views/Dashboard.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="animated fadeIn">
Hello World
<p class="text-info">Hello World</p>
</div>
</template>
Vue_Starter/test/unit/specs/Hello.spec.js
+5 -5
View File
@@ -1,11 +1,11 @@
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', () => {
const Constructor = Vue.extend(Hello)
const Constructor = Vue.extend(Dashboard)
const vm = new Constructor().$mount()
expect(vm.$el.querySelector('.hello h1').textContent)
.to.equal('Welcome to Your Vue.js App')
expect(vm.$el.querySelector('.text-info').textContent)
.to.equal('Hello World')
})
})
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@coreui/vue",
"version": "1.0.5",
"version": "1.0.6",
"description": "Open Source Vue Admin Template",
"main": "",
"homepage": "http://coreui.io/vue/",