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

refactor: CoreUI components

Browse Source
This commit is contained in:
xidedix
2018-04-04 19:56:04 +02:00
parent 7dcd6bff72
commit 2313d9421e
89 changed files with 2975 additions and 4372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+2 -4
View File
@@ -8,7 +8,7 @@ export default {
}
</script>
<style>
<style lang="scss">
/* Import Font Awesome Icons Set */
@import '~flag-icon-css/css/flag-icon.min.css';
/* Import Font Awesome Icons Set */
@@ -19,8 +19,6 @@ export default {
@import '~simple-line-icons/css/simple-line-icons.css';
/* Import Bootstrap Vue Styles */
@import '~bootstrap-vue/dist/bootstrap-vue.css';
</style>
<style lang="scss">
// Import Main styles for this application
@import './scss/style';
@import '../scss/style';
</style>
src/_nav.js
+5 -5
View File
@@ -141,6 +141,11 @@ export default {
}
]
},
{
name: 'Charts',
url: '/charts',
icon: 'icon-pie-chart'
},
{
name: 'Icons',
url: '/icons',
@@ -171,11 +176,6 @@ export default {
}
]
},
{
name: 'Charts',
url: '/charts',
icon: 'icon-pie-chart'
},
{
name: 'Notifications',
url: '/notifications',
src/components/Aside.vue
-231
View File
@@ -1,231 +0,0 @@
<template>
<aside class="aside-menu">
<b-tabs>
<b-tab title="<i class='icon-list'></i>">
<Callout class="m-0 py-2 text-muted text-center bg-light text-uppercase">
<small><b>Today</b></small>
</Callout>
<hr class="transparent mx-3 my-0">
<Callout variant="warning" class="m-0 py-3">
<div class="avatar float-right">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div>Meeting with <strong>Lucas</strong></div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
<small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA </small>
</Callout>
<hr class="mx-3 my-0">
<Callout variant="info" class="m-0 py-3">
<div class="avatar float-right">
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div>Skype with <strong>Megan</strong></div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 5pm</small>
<small class="text-muted"><i class="icon-social-skype"></i>&nbsp; On-line </small>
</Callout>
<hr class="transparent mx-3 my-0">
<Callout class="m-0 py-2 text-muted text-center bg-light text-uppercase">
<small><b>Tomorrow</b></small>
</Callout>
<hr class="transparent mx-3 my-0">
<Callout variant="danger" class="m-0 py-3">
<div>New UI Project - <strong>deadline</strong></div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 10 - 11pm</small>
<small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ </small>
<div class="avatars-stack mt-2">
<div class="avatar avatar-xs">
<img src="static/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
</div>
</Callout>
<hr class="mx-3 my-0">
<Callout variant="success" class="m-0 py-3">
<div><strong>#10 Startups.Garden</strong> Meetup</div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
<small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA </small>
</Callout>
<hr class="mx-3 my-0">
<Callout variant="primary" class="m-0 py-3">
<div><strong>Team meeting</strong></div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
<small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ </small>
<div class="avatars-stack mt-2">
<div class="avatar avatar-xs">
<img src="static/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
</div>
</Callout>
<hr class="mx-3 my-0">
</b-tab>
<b-tab title="<i class='icon-speech'></i>">
<div class="p-3">
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status" ></b-badge>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status" ></b-badge>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status" ></b-badge>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status" ></b-badge>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status" ></b-badge>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
</div>
</b-tab>
<b-tab title="<i class='icon-settings'></i>">
<div class="p-3">
<h6>Settings</h6>
<div class="aside-options">
<div class="clearfix mt-4">
<small><b>Option 1</b></small>
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" :checked="true"/>
</div>
<div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
</div>
</div>
<div class="aside-options">
<div class="clearfix mt-3">
<small><b>Option 2</b></small>
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right"/>
</div>
<div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
</div>
</div>
<div class="aside-options">
<div class="clearfix mt-3">
<small><b>Option 3</b></small>
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right"/>
</div>
</div>
<div class="aside-options">
<div class="clearfix mt-3">
<small><b>Option 4</b></small>
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" :checked="true"/>
</div>
</div>
<hr>
<h6>System Utilization</h6>
<div class="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
<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 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 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 height={} class="progress-xs" variant="success" :value="10"></b-progress>
<small class="text-muted">25GB/256GB</small>
</div>
</b-tab>
</b-tabs>
</aside>
</template>
<script>
import Callout from './Callout'
import cSwitch from './Switch'
export default {
name: 'c-aside',
components: {
Callout,
cSwitch
}
}
</script>
src/components/Aside/Aside.vue
+48
View File
@@ -0,0 +1,48 @@
<template>
<aside class="aside-menu">
<slot>Aside</slot>
</aside>
</template>
<script>
// import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
export default {
name: 'AppAside',
props: {
fixed: {
type: Boolean,
default: false
},
display: {
type: String,
default: ''
},
offCanvas: {
type: Boolean,
default: true
}
},
mounted: function () {
this.isFixed(this.fixed)
this.isOffCanvas(this.offCanvas)
// this.displayBreakpoint(this.display)
},
methods: {
isFixed (fixed) {
fixed ? document.body.classList.add('aside-menu-fixed') : document.body.classList.remove('aside-menu-fixed')
return fixed
},
isOffCanvas (offCanvas) {
offCanvas ? document.body.classList.add('aside-menu-off-canvas') : document.body.classList.remove('aside-menu-off-canvas')
}
// displayBreakpoint (display) {
// let cssClass = asideMenuCssClasses[0]
// if (display && checkBreakpoint(display, validBreakpoints)) {
// cssClass = `aside-menu-${display}-show`
// }
// document.body.classList.add(cssClass)
// }
}
}
</script>
src/components/Aside/AsideToggler.vue
+55
View File
@@ -0,0 +1,55 @@
<template>
<button
:display="display"
:mobile="mobile"
:class="classList"
type="button"
@click="asideToggle">
<span class="navbar-toggler-icon" />
</button>
</template>
<script>
import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
import toggleClasses from '../../shared/toggle-classes'
export default {
name: 'AsideToggler',
props: {
mobile: {
type: Boolean,
default: false
},
display: {
type: String,
default: ''
}
},
computed: {
classList () {
return [
'navbar-toggler'
// 'd-none',
// 'd-lg-inline-block'
]
}
},
mounted: function () {
// this.toggle()
},
methods: {
toggle () {
const [display, mobile] = [this.display, this.mobile]
let cssClass = asideMenuCssClasses[0]
if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
cssClass = `aside-menu-${display}-show`
}
toggleClasses(cssClass, asideMenuCssClasses)
},
asideToggle (e) {
e.preventDefault()
this.toggle()
}
}
}
</script>
src/components/Aside/index.js
+7
View File
@@ -0,0 +1,7 @@
import Aside from './Aside'
import AsideToggler from './AsideToggler'
export {
Aside,
AsideToggler
}
src/components/Breadcrumb.vue
-34
View File
@@ -1,34 +0,0 @@
<template>
<ol class="breadcrumb">
<li class="breadcrumb-item" v-for="(item, index) in list">
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
<router-link :to="item" v-else>{{ showName(item) }}</router-link>
</li>
</ol>
</template>
<script>
export default {
props: {
list: {
type: Array,
required: true,
default: () => []
}
},
methods: {
isLast (index) {
return index === this.list.length - 1
},
showName (item) {
if (item.meta && item.meta.label) {
item = item.meta && item.meta.label
}
if (item.name) {
item = item.name
}
return item
}
}
}
</script>
src/components/Breadcrumb/Breadcrumb.vue
+34
View File
@@ -0,0 +1,34 @@
<template>
<ol class="breadcrumb">
<li class="breadcrumb-item" :key="index" v-for="(item, index) in list">
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
<router-link :to="item" v-else>{{ showName(item) }}</router-link>
</li>
</ol>
</template>
<script>
export default {
props: {
list: {
type: Array,
required: true,
default: () => []
}
},
methods: {
isLast (index) {
return index === this.list.length - 1
},
showName (item) {
if (item.meta && item.meta.label) {
item = item.meta && item.meta.label
}
if (item.name) {
item = item.name
}
return item
}
}
}
</script>
src/components/Callout.vue → src/components/Callout/Callout.vue
+3 -2
View File
@@ -1,6 +1,6 @@
<template>
<div :class="classList">
<slot></slot>
<slot>Callout</slot>
</div>
</template>
@@ -8,7 +8,8 @@
export default {
props: {
variant: {
type: String
type: String,
default: ''
}
},
computed: {
src/components/Footer.vue
-11
View File
@@ -1,11 +0,0 @@
<template>
<footer class="app-footer">
<span><a href="http://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
<span class="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer>
</template>
<script>
export default {
name: 'c-footer'
}
</script>
src/components/Footer/Footer.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<footer :class="classList">
<slot>
<div>
<a href="https://coreui.io">CoreUI</a>
<span>&copy; 2018 creativeLabs.</span>
</div>
<div class="ml-auto">
<span>Powered by</span>
<a href="https://coreui.io">CoreUI for Vue</a>
</div>
</slot>
</footer>
</template>
<script>
export default {
name: 'AppFooter',
props: {
fixed: {
type: Boolean,
default: false
}
},
computed: {
classList () {
return [
'app-footer'
]
}
}
}
</script>
src/components/Header v1/HeaderDropdown_v1.vue
+29
View File
@@ -0,0 +1,29 @@
<template>
<b-nav-item-dropdown right no-caret>
<template slot="button-content">
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</template>
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-bell-o"></i> Updates<b-badge variant="info">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-header tag="div" class="text-center"><strong>Settings</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-user"></i> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench"></i> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="secondary">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item><i class="fa fa-shield"></i> Lock Account</b-dropdown-item>
<b-dropdown-item><i class="fa fa-lock"></i> Logout</b-dropdown-item>
</b-nav-item-dropdown>
</template>
<script>
export default {
name: 'header-dropdown',
data: () => {
return { itemsCount: 42 }
}
}
</script>
src/components/Header v1/Header_v1.vue
+60
View File
@@ -0,0 +1,60 @@
<template>
<header class="app-header navbar">
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
<span class="navbar-toggler-icon"></span>
</button>
<b-link class="navbar-brand" to="#"></b-link>
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
<span class="navbar-toggler-icon"></span>
</button>
<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-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>
</b-nav-item>
<b-nav-item class="d-md-down-none">
<i class="icon-list"></i>
</b-nav-item>
<b-nav-item class="d-md-down-none">
<i class="icon-location-pin"></i>
</b-nav-item>
<HeaderDropdown/>
</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>
</header>
</template>
<script>
import HeaderDropdown from '../Header/HeaderDropdown.vue'
export default {
name: 'c-header',
components: {
HeaderDropdown
},
methods: {
sidebarToggle (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-hidden')
},
sidebarMinimize (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-minimized')
},
mobileSidebarToggle (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-mobile-show')
},
asideToggle (e) {
e.preventDefault()
document.body.classList.toggle('aside-menu-hidden')
}
}
}
</script>
src/components/Header/Header.vue
+24 -49
View File
@@ -1,59 +1,34 @@
<template>
<header class="app-header navbar">
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
<span class="navbar-toggler-icon"></span>
</button>
<b-link class="navbar-brand" to="#"></b-link>
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
<span class="navbar-toggler-icon"></span>
</button>
<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-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>
</b-nav-item>
<b-nav-item class="d-md-down-none">
<i class="icon-list"></i>
</b-nav-item>
<b-nav-item class="d-md-down-none">
<i class="icon-location-pin"></i>
</b-nav-item>
<HeaderDropdown/>
</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>
<header
:class="classList">
<slot>Header</slot>
</header>
</template>
<script>
import HeaderDropdown from './HeaderDropdown.vue'
<script>
export default {
name: 'c-header',
components: {
HeaderDropdown
name: 'AppHeader',
props: {
fixed: {
type: Boolean,
default: false
}
},
computed: {
classList () {
return [
'app-header',
'navbar'
]
}
},
mounted: function () {
this.isFixed(this.fixed)
},
methods: {
sidebarToggle (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-hidden')
},
sidebarMinimize (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-minimized')
},
mobileSidebarToggle (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-mobile-show')
},
asideToggle (e) {
e.preventDefault()
document.body.classList.toggle('aside-menu-hidden')
isFixed (fixed) {
fixed ? document.body.classList.add('header-fixed') : document.body.classList.remove('header-fixed')
return fixed
}
}
}
src/components/Header/HeaderDropdown.vue
+24 -19
View File
@@ -1,26 +1,31 @@
<template>
<b-nav-item-dropdown right no-caret>
<template slot="button-content">
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</template>
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-bell-o"></i> Updates<b-badge variant="info">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-header tag="div" class="text-center"><strong>Settings</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-user"></i> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench"></i> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="secondary">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item><i class="fa fa-shield"></i> Lock Account</b-dropdown-item>
<b-dropdown-item><i class="fa fa-lock"></i> Logout</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown :right="right" :no-caret="noCaret">
<template slot="button-content">
<slot name="button-content">
<img
src="static/img/avatars/6.jpg"
class="img-avatar"
alt="admin@bootstrapmaster.com" />
</slot>
</template>
<slot>
<div :style="{ right: 'auto', height: '400px' }">dropdown</div>
</slot>
</b-nav-item-dropdown>
</template>
<script>
export default {
name: 'header-dropdown',
name: 'HeaderDropdown',
props: {
right: {
type: Boolean,
default: false
},
noCaret: {
type: Boolean,
default: false
}
},
data: () => {
return { itemsCount: 42 }
}
src/components/Header/index.js
+7
View File
@@ -0,0 +1,7 @@
import Header from './Header'
import HeaderDropdown from './HeaderDropdown'
export {
Header,
HeaderDropdown
}
src/components/Sidebar v1/Sidebar.vue
+98
View File
@@ -0,0 +1,98 @@
<template>
<div class="sidebar">
<SidebarHeader/>
<SidebarForm/>
<nav class="sidebar-nav">
<div slot="header"></div>
<ul class="nav">
<template v-for="(item, index) in navItems">
<template v-if="item.title">
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template>
<template v-else-if="item.divider">
<SidebarNavDivider :classes="item.class"/>
</template>
<template v-else-if="item.label">
<SidebarNavLabel :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
</template>
<template v-else>
<template v-if="item.children">
<!-- First level dropdown -->
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
<template v-for="(childL1, index) in item.children">
<template v-if="childL1.children">
<!-- Second level dropdown -->
<SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
<li class="nav-item" v-for="(childL2, index) in childL1.children">
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
</li>
</SidebarNavDropdown>
</template>
<template v-else>
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
</template>
</SidebarNavDropdown>
</template>
<template v-else>
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
</template>
</template>
</ul>
<slot></slot>
</nav>
<SidebarFooter/>
<SidebarMinimizer/>
</div>
</template>
<script>
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'
import SidebarNavItem from './SidebarNavItem'
import SidebarNavLabel from './SidebarNavLabel'
export default {
name: 'sidebar',
props: {
navItems: {
type: Array,
required: true,
default: () => []
}
},
components: {
SidebarFooter,
SidebarForm,
SidebarHeader,
SidebarMinimizer,
SidebarNavDivider,
SidebarNavDropdown,
SidebarNavLink,
SidebarNavTitle,
SidebarNavItem,
SidebarNavLabel
},
methods: {
handleClick (e) {
e.preventDefault()
e.target.parentElement.classList.toggle('open')
}
}
}
</script>
<style lang="css">
.nav-link {
cursor:pointer;
}
</style>
src/components/Sidebar v1/SidebarFooter.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<!-- <div class="sidebar-footer"></div> -->
</template>
<script>
export default {
name: 'sidebar-footer'
}
</script>
src/components/Sidebar v1/SidebarForm.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<!-- <div class="sidebar-form"></div> -->
</template>
<script>
export default {
name: 'sidebar-form'
}
</script>
src/components/Sidebar v1/SidebarHeader.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<!-- <div class="sidebar-header"></div> -->
</template>
<script>
export default {
name: 'sidebar-header'
}
</script>
src/components/Sidebar v1/SidebarMinimizer.vue
+17
View File
@@ -0,0 +1,17 @@
<template>
<button class="sidebar-minimizer" type="button" @click="sidebarMinimize();brandMinimize()"></button>
</template>
<script>
export default {
name: 'sidebar-minimizer',
methods: {
sidebarMinimize () {
document.body.classList.toggle('sidebar-minimized')
},
brandMinimize () {
document.body.classList.toggle('brand-minimized')
}
}
}
</script>
src/components/Sidebar v1/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>
src/components/Sidebar v1/SidebarNavDropdown.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
<ul class="nav-dropdown-items">
<slot></slot>
</ul>
</router-link>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
},
url: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
}
},
methods: {
handleClick (e) {
e.preventDefault()
e.target.parentElement.classList.toggle('open')
}
}
}
</script>
src/components/Sidebar v1/SidebarNavItem.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<li :class="classList" @click="hideMobile">
<slot></slot>
</li>
</template>
<script>
export default {
name: 'sidebar-nav-item',
props: {
classes: {
type: String,
default: ''
}
},
computed: {
classList () {
return [
'nav-item',
...this.itemClasses
]
},
itemClasses () {
return this.classes ? this.classes.split(' ') : ''
}
},
methods: {
hideMobile () {
if (document.body.classList.contains('sidebar-mobile-show')) {
document.body.classList.toggle('sidebar-mobile-show')
}
}
}
}
</script>
src/components/Sidebar v1/SidebarNavLabel.vue
+59
View File
@@ -0,0 +1,59 @@
<template>
<SidebarNavItem :classes="classList.navItem">
<a :class="classList.navLink" :href="url"><i :class="classList.icon"></i> {{name}}</a>
</SidebarNavItem>
</template>
<script>
import SidebarNavItem from './SidebarNavItem'
import SidebarNavLink from './SidebarNavLink'
export default {
name: 'sidebar-nav-label',
components: {
SidebarNavItem,
SidebarNavLink
},
props: {
name: {
type: String,
default: ''
},
url: {
type: String,
default: '#'
},
icon: {
type: String,
default: 'fa fa-circle'
},
classes: {
type: String,
default: ''
},
label: {
type: Object,
required: true,
default: () => {}
}
},
computed: {
classList () {
const classes = {
navItem: ['hidden-cn', ...this.getClasses(this.classes)].join(' '),
navLink: 'nav-label',
icon: [
this.icon ? this.icon : 'fa fa-circle',
this.label.variant ? `text-${this.label.variant}` : '',
this.label.class ? this.label.class : ''
].join(' ')
}
return classes
}
},
methods: {
getClasses (classes) {
return classes ? classes.split(' ') : []
}
}
}
</script>
src/components/Sidebar v1/SidebarNavLink.vue
+68
View File
@@ -0,0 +1,68 @@
<template>
<div v-if="isExternalLink">
<a :href="url" :class="classList">
<i :class="icon"></i> {{name}}
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
</a>
</div>
<div v-else>
<router-link :to="url" :class="classList">
<i :class="icon"></i> {{name}}
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
</router-link>
</div>
</template>
<script>
export default {
name: 'sidebar-nav-link',
props: {
name: {
type: String,
default: ''
},
url: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
},
badge: {
type: Object,
default: () => {}
},
variant: {
type: String,
default: ''
},
classes: {
type: String,
default: ''
}
},
computed: {
classList () {
return [
'nav-link',
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
} else {
return false
}
}
}
}
</script>
src/components/Sidebar v1/SidebarNavTitle.vue
+42
View File
@@ -0,0 +1,42 @@
<template>
<li :class="classList">
<template v-if="wrapper && wrapper.element">
<component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
{{name}}
</component>
</template>
<template v-else>
{{name}}
</template>
</li>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
},
classes: {
type: String,
default: ''
},
wrapper: {
type: Object,
default: () => {}
}
},
computed: {
classList () {
return [
'nav-title',
...this.itemClasses
]
},
itemClasses () {
return this.classes ? this.classes.split(' ') : ''
}
}
}
</script>
src/components/Sidebar/Sidebar.vue
+9 -82
View File
@@ -1,98 +1,25 @@
<template>
<div class="sidebar">
<SidebarHeader/>
<SidebarForm/>
<nav class="sidebar-nav">
<div slot="header"></div>
<ul class="nav">
<template v-for="(item, index) in navItems">
<template v-if="item.title">
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template>
<template v-else-if="item.divider">
<SidebarNavDivider :classes="item.class"/>
</template>
<template v-else-if="item.label">
<SidebarNavLabel :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
</template>
<template v-else>
<template v-if="item.children">
<!-- First level dropdown -->
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
<template v-for="(childL1, index) in item.children">
<template v-if="childL1.children">
<!-- Second level dropdown -->
<SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
<li class="nav-item" v-for="(childL2, index) in childL1.children">
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
</li>
</SidebarNavDropdown>
</template>
<template v-else>
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
</template>
</SidebarNavDropdown>
</template>
<template v-else>
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
</template>
</template>
</ul>
<slot></slot>
</nav>
<SidebarFooter/>
<SidebarMinimizer/>
<slot>Sidebar</slot>
</div>
</template>
<script>
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'
import SidebarNavItem from './SidebarNavItem'
import SidebarNavLabel from './SidebarNavLabel'
export default {
name: 'sidebar',
props: {
navItems: {
type: Array,
required: true,
default: () => []
fixed: {
type: Boolean,
default: false
}
},
components: {
SidebarFooter,
SidebarForm,
SidebarHeader,
SidebarMinimizer,
SidebarNavDivider,
SidebarNavDropdown,
SidebarNavLink,
SidebarNavTitle,
SidebarNavItem,
SidebarNavLabel
mounted: function () {
this.isFixed()
},
methods: {
handleClick (e) {
e.preventDefault()
e.target.parentElement.classList.toggle('open')
isFixed () {
this.fixed ? document.body.classList.add('sidebar-fixed') : document.body.classList.remove('sidebar-fixed')
return this.fixed
}
}
}
</script>
<style lang="css">
.nav-link {
cursor:pointer;
}
</style>
src/components/Sidebar/SidebarFooter.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<template>
<!-- <div class="sidebar-footer"></div> -->
<!--<div class="sidebar-footer"></div>-->
</template>
<script>
<script>
export default {
name: 'sidebar-footer'
}
src/components/Sidebar/SidebarNav.vue
+79
View File
@@ -0,0 +1,79 @@
<template>
<nav class="sidebar-nav">
<div slot="header"></div>
<ul class="nav">
<template v-for="(item, index) in navItems">
<template v-if="item.title">
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template>
<template v-else-if="item.divider">
<SidebarNavDivider :classes="item.class"/>
</template>
<template v-else-if="item.label">
<SidebarNavLabel :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
</template>
<template v-else>
<template v-if="item.children">
<!-- First level dropdown -->
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
<template v-for="(childL1, index) in item.children">
<template v-if="childL1.children">
<!-- Second level dropdown -->
<SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
<li class="nav-item" v-for="(childL2, index) in childL1.children">
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
</li>
</SidebarNavDropdown>
</template>
<template v-else>
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
</template>
</SidebarNavDropdown>
</template>
<template v-else>
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
</template>
</template>
</ul>
<slot></slot>
</nav>
</template>
<script>
import SidebarNavDivider from './SidebarNavDivider'
import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle'
import SidebarNavItem from './SidebarNavItem'
import SidebarNavLabel from './SidebarNavLabel'
export default {
name: 'SidebarNav',
props: {
navItems: {
type: Array,
required: true,
default: () => []
}
},
components: {
SidebarNavDivider,
SidebarNavDropdown,
SidebarNavLink,
SidebarNavTitle,
SidebarNavItem,
SidebarNavLabel
}
}
</script>
<style scoped lang="css">
.nav-link {
cursor:pointer;
}
</style>
src/components/Sidebar/SidebarNavDropdown.vue
+9 -1
View File
@@ -1,6 +1,6 @@
<template>
<router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="classIcon"></i> {{name}}</div>
<ul class="nav-dropdown-items">
<slot></slot>
</ul>
@@ -23,6 +23,14 @@ export default {
default: ''
}
},
computed: {
classIcon () {
return [
'nav-icon',
this.icon
]
}
},
methods: {
handleClick (e) {
e.preventDefault()
src/components/Sidebar/SidebarNavLink.vue
+8 -2
View File
@@ -1,13 +1,13 @@
<template>
<div v-if="isExternalLink">
<a :href="url" :class="classList">
<i :class="icon"></i> {{name}}
<i :class="classIcon"></i> {{name}}
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
</a>
</div>
<div v-else>
<router-link :to="url" :class="classList">
<i :class="icon"></i> {{name}}
<i :class="classIcon"></i> {{name}}
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
</router-link>
</div>
@@ -50,6 +50,12 @@
...this.itemClasses
]
},
classIcon () {
return [
'nav-icon',
this.icon
]
},
linkVariant () {
return this.variant ? `nav-link-${this.variant}` : ''
},
src/components/Sidebar/SidebarToggler.vue
+55
View File
@@ -0,0 +1,55 @@
<template>
<button
:display="display"
:mobile="mobile"
:class="classList"
type="button"
@click="sidebarToggle">
<span class="navbar-toggler-icon" />
</button>
</template>
<script>
import { sidebarCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
import toggleClasses from '../../shared/toggle-classes'
export default {
name: 'SidebarToggler',
props: {
mobile: {
type: Boolean,
default: false
},
display: {
type: String,
default: 'lg'
}
},
computed: {
classList () {
return [
'navbar-toggler'
// 'd-none',
// 'd-lg-inline-block'
]
}
},
mounted: function () {
this.toggle()
},
methods: {
toggle () {
const [display, mobile] = [this.display, this.mobile]
let cssClass = sidebarCssClasses[0]
if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
cssClass = `sidebar-${display}-show`
}
toggleClasses(cssClass, sidebarCssClasses)
},
sidebarToggle (e) {
e.preventDefault()
this.toggle()
}
}
}
</script>
src/components/Sidebar/index.js
+17
View File
@@ -0,0 +1,17 @@
import Sidebar from './Sidebar.vue'
import SidebarFooter from './SidebarFooter'
import SidebarForm from './SidebarForm'
import SidebarHeader from './SidebarHeader'
import SidebarMinimizer from './SidebarMinimizer'
import SidebarNav from './SidebarNav'
import SidebarNavDivider from './SidebarNavDivider'
import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavItem from './SidebarNavItem'
import SidebarNavLabel from './SidebarNavLabel'
import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle'
import SidebarToggler from './SidebarToggler'
export {
Sidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, SidebarNavDivider, SidebarNavItem, SidebarNavDropdown, SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler
}
src/components/Switch.vue → src/components/Switch/Switch.vue
+26 -10
View File
@@ -1,17 +1,22 @@
<template>
<label :class="classList">
<input type="checkbox"
class="switch-input"
:value="value"
:checked="isChecked"
@change="handleChange">
<input
:value="value"
:checked="isChecked"
:disabled="isDisabled"
type="checkbox"
class="switch-input"
@change="handleChange">
<template v-if="isOn">
<span class="switch-label" :data-on="on" :data-off="off"></span>
<span
:data-on="on"
:data-off="off"
class="switch-label" />
</template>
<template v-else>
<span class="switch-label"></span>
<span class="switch-label" />
</template>
<span class="switch-handle"></span>
<span class="switch-handle" />
</label>
</template>
@@ -23,12 +28,15 @@ export default {
},
props: {
value: {
type: Boolean,
default: true
},
uncheckedValue: {
type: Boolean,
default: false
},
checked: {
type: Boolean,
default: false
},
type: {
@@ -54,7 +62,12 @@ export default {
size: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
classList () {
@@ -73,7 +86,7 @@ export default {
return this.variant ? `switch-${this.variant}` : `switch-secondary`
},
switchPill () {
return !this.pill ? null : `switch-pill`
return this.pill ? `switch-pill` : null
},
switchSize () {
return this.size ? `switch-${this.size}` : ''
@@ -81,8 +94,11 @@ export default {
isChecked () {
return this.checked === this.value
},
isDisabled () {
return this.disabled ? true : null
},
isOn () {
return !this.on ? null : true
return this.on ? true : null
}
},
methods: {
src/components/index.js
+22 -7
View File
@@ -1,17 +1,32 @@
import Aside from './Aside.vue'
import Breadcrumb from './Breadcrumb.vue'
import Callout from './Callout.vue'
import Footer from './Footer.vue'
import Header from './Header/Header.vue'
import Sidebar from './Sidebar/Sidebar.vue'
import Switch from './Switch.vue'
import Breadcrumb from './Breadcrumb/Breadcrumb'
import Callout from './Callout/Callout'
import Footer from './Footer/Footer'
import Switch from './Switch/Switch'
import { Aside, AsideToggler } from './Aside'
import { Header, HeaderDropdown } from './Header'
import { Sidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, SidebarNavDivider, SidebarNavItem, SidebarNavDropdown, SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler } from './Sidebar'
export {
Aside,
AsideToggler,
Breadcrumb,
Callout,
Footer,
Header,
HeaderDropdown,
Sidebar,
SidebarFooter,
SidebarForm,
SidebarHeader,
SidebarMinimizer,
SidebarNav,
SidebarNavDivider,
SidebarNavItem,
SidebarNavDropdown,
SidebarNavLabel,
SidebarNavLink,
SidebarNavTitle,
SidebarToggler,
Switch
}
src/containers/Full.vue
+95 -8
View File
@@ -1,36 +1,123 @@
<template>
<div class="app">
<AppHeader/>
<AppHeader fixed>
<SidebarToggler class="d-lg-none" display="md" mobile />
<b-link class="navbar-brand" to="#">
<img class="navbar-brand-full" src="static/img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
<img class="navbar-brand-minimized" src="static/img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
</b-link>
<SidebarToggler class="d-md-down-none" display="lg" />
<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-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>
</b-nav-item>
<b-nav-item class="d-md-down-none">
<i class="icon-list"></i>
</b-nav-item>
<b-nav-item class="d-md-down-none">
<i class="icon-location-pin"></i>
</b-nav-item>
<AppHeaderDropdown right no-caret>
<div>
<template slot="button-content">
<img
src="static/img/avatars/6.jpg"
class="img-avatar"
alt="admin@bootstrapmaster.com" />
</template>
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
<b-badge variant="info">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
<b-badge variant="success">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
<b-badge variant="danger">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-comments" /> Comments
<b-badge variant="warning">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-header
tag="div"
class="text-center">
<strong>Settings</strong>
</b-dropdown-header>
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd" /> Payments
<b-badge variant="secondary">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-file" /> Projects
<b-badge variant="primary">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-divider />
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
</div>
</AppHeaderDropdown>
</b-navbar-nav>
<AsideToggler class="d-none d-lg-block" />
<!--<AsideToggler class="d-lg-none" mobile />-->
</AppHeader>
<div class="app-body">
<Sidebar :navItems="nav"/>
<AppSidebar fixed>
<SidebarHeader/>
<SidebarForm/>
<SidebarNav :navItems="nav"></SidebarNav>
<SidebarFooter/>
<SidebarMinimizer/>
</AppSidebar>
<main class="main">
<breadcrumb :list="list"/>
<div class="container-fluid">
<router-view></router-view>
</div>
</main>
<AppAside/>
<AppAside fixed>
<!--aside-->
<FullAside/>
</AppAside>
</div>
<AppFooter/>
<AppFooter>
<!--footer-->
</AppFooter>
</div>
</template>
<script>
import nav from '../_nav'
import { Header as AppHeader, Sidebar, Aside as AppAside, Footer as AppFooter, Breadcrumb } from '../components/'
import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as AppFooter, Breadcrumb } from '../components/'
import FullAside from './FullAside'
export default {
name: 'full',
components: {
AsideToggler,
AppHeader,
Sidebar,
AppHeaderDropdown,
AppSidebar,
AppAside,
AppFooter,
Breadcrumb
Breadcrumb,
FullAside,
SidebarForm,
SidebarFooter,
SidebarToggler,
SidebarHeader,
SidebarNav,
SidebarMinimizer
},
data () {
return {
nav: nav.items
nav: nav.items,
itemsCount: 42
}
},
computed: {
src/containers/FullAside.vue
+252
View File
@@ -0,0 +1,252 @@
<template>
<b-tabs>
<b-tab>
<template slot="title">
<i class='icon-list'></i>
</template>
<b-list-group class="list-group-accent">
<b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
Today
</b-list-group-item>
<b-list-group-item class="list-group-item list-group-item-accent-warning list-group-item-divider">
<div class="avatar float-right">
<img class="img-avatar" src="static/img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
</div>
<div>Meeting with
<strong>Lucas</strong>
</div>
<small class="text-muted mr-3">
<i class="icon-calendar"></i>  1 - 3pm
</small>
<small class="text-muted">
<i class="icon-location-pin"></i>  Palo Alto, CA
</small>
</b-list-group-item>
<b-list-group-item class="list-group-item-accent-info">
<div class="avatar float-right">
<img class="img-avatar" src="static/img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
</div>
<div>Skype with <strong>Megan</strong>
</div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>  4 - 5pm</small>
<small class="text-muted"><i class="icon-social-skype"></i>  On-line</small>
</b-list-group-item>
<hr class="transparent mx-3 my-0">
<b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
Tomorrow
</b-list-group-item>
<b-list-group-item class="list-group-item-accent-danger list-group-item-divider">
<div>New UI Project - <strong>deadline</strong>
</div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>  10 - 11pm</small>
<small class="text-muted"><i class="icon-home"></i>  creativeLabs HQ</small>
<div class="avatars-stack mt-2">
<div class="avatar avatar-xs">
<img class="img-avatar" src="static/img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img class="img-avatar" src="static/img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img class="img-avatar" src="static/img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img class="img-avatar" src="static/img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img class="img-avatar" src="static/img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
</div>
</div>
</b-list-group-item>
<b-list-group-item class="list-group-item-accent-success list-group-item-divider">
<div><strong>#10 Startups.Garden</strong> Meetup</div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
<small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
</b-list-group-item>
<b-list-group-item class="list-group-item-accent-primary list-group-item-divider">
<div><strong>Team meeting</strong></div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
<small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small>
<div class="avatars-stack mt-2">
<div class="avatar avatar-xs">
<img src="static/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="static/img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
</div>
</b-list-group-item>
</b-list-group>
</b-tab>
<b-tab>
<template slot="title">
<i class='icon-speech'></i>
</template>
<div class="p-3">
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status"></b-badge>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status"></b-badge>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status"></b-badge>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status"></b-badge>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status"></b-badge>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
</div>
</b-tab>
<b-tab>
<template slot="title">
<i class='icon-settings'></i>
</template>
<div class="p-3">
<h6>Settings</h6>
<div class="aside-options">
<div class="clearfix mt-4">
<small><b>Option 1</b></small>
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" :checked="true" />
</div>
<div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
</div>
</div>
<div class="aside-options">
<div class="clearfix mt-3">
<small><b>Option 2</b></small>
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" />
</div>
<div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
</div>
</div>
<div class="aside-options">
<div class="clearfix mt-3">
<small><b>Option 3</b></small>
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" disabled />
</div>
<div>
<small class="text-muted">Disabled option.</small>
</div>
</div>
<div class="aside-options">
<div class="clearfix mt-3">
<small><b>Option 4</b></small>
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" checked />
</div>
</div>
<hr>
<h6>System Utilization</h6>
<div class="text-uppercase mb-1 mt-4">
<small><b>CPU Usage</b></small>
</div>
<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 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 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 height={} class="progress-xs" variant="success" :value="10"></b-progress>
<small class="text-muted">25GB/256GB</small>
</div>
</b-tab>
</b-tabs>
</template>
<script>
import {Switch as cSwitch} from '../components'
export default {
name: 'FullAside',
components: {
cSwitch
}
}
</script>
src/shared/classes.js
+21
View File
@@ -0,0 +1,21 @@
export const sidebarCssClasses = [
'sidebar-show',
'sidebar-sm-show',
'sidebar-md-show',
'sidebar-lg-show',
'sidebar-xl-show'
]
export const asideMenuCssClasses = [
'aside-menu-show',
'aside-menu-sm-show',
'aside-menu-md-show',
'aside-menu-lg-show',
'aside-menu-xl-show'
]
export const validBreakpoints = [ 'sm', 'md', 'lg', 'xl' ]
export function checkBreakpoint (breakpoint, list) {
return list.indexOf(breakpoint) > -1
}
src/shared/toggle-classes.js
+6
View File
@@ -0,0 +1,6 @@
export default function toggleClasses (toggleClass, classList) {
const level = classList.indexOf(toggleClass)
const removeClassList = classList.slice(0, level)
removeClassList.map((className) => document.body.classList.remove(className))
document.body.classList.toggle(toggleClass)
}
src/views/base/Switches.vue
+1 -1
View File
@@ -308,7 +308,7 @@
</template>
<script>
import cSwitch from '../../components/Switch'
import { Switch as cSwitch } from '../../components'
export default {
name: 'switches',