update: vuejs-templates/webpack to v1.3.1
This commit is contained in:
xidedix
@@ -5,44 +5,44 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
|
||||
// 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
|
||||
}
|
||||
export default {
|
||||
name: 'AppAside',
|
||||
props: {
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mounted: function () {
|
||||
this.isFixed(this.fixed)
|
||||
this.isOffCanvas(this.offCanvas)
|
||||
// this.displayBreakpoint(this.display)
|
||||
display: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
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)
|
||||
// }
|
||||
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>
|
||||
|
||||
@@ -10,46 +10,46 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
|
||||
import toggleClasses from '../../shared/toggle-classes'
|
||||
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: ''
|
||||
}
|
||||
export default {
|
||||
name: 'AsideToggler',
|
||||
props: {
|
||||
mobile: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'navbar-toggler'
|
||||
// 'd-none',
|
||||
// 'd-lg-inline-block'
|
||||
]
|
||||
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)
|
||||
},
|
||||
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()
|
||||
}
|
||||
asideToggle (e) {
|
||||
e.preventDefault()
|
||||
this.toggle()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -8,27 +8,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isLast (index) {
|
||||
return index === this.list.length - 1
|
||||
},
|
||||
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
|
||||
showName (item) {
|
||||
if (item.meta && item.meta.label) {
|
||||
item = item.meta && item.meta.label
|
||||
}
|
||||
if (item.name) {
|
||||
item = item.name
|
||||
}
|
||||
return item
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -14,28 +14,28 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppFooter',
|
||||
props: {
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.isFixed()
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'app-footer'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isFixed () {
|
||||
this.fixed ? document.body.classList.add('footer-fixed') : document.body.classList.remove('footer-fixed')
|
||||
}
|
||||
export default {
|
||||
name: 'AppFooter',
|
||||
props: {
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.isFixed()
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'app-footer'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isFixed () {
|
||||
this.fixed ? document.body.classList.add('footer-fixed') : document.body.classList.remove('footer-fixed')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
<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>
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
<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>
|
||||
@@ -6,30 +6,30 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppHeader',
|
||||
props: {
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'app-header',
|
||||
'navbar'
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.isFixed(this.fixed)
|
||||
},
|
||||
methods: {
|
||||
isFixed (fixed) {
|
||||
fixed ? document.body.classList.add('header-fixed') : document.body.classList.remove('header-fixed')
|
||||
return fixed
|
||||
}
|
||||
export default {
|
||||
name: 'AppHeader',
|
||||
props: {
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'app-header',
|
||||
'navbar'
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.isFixed(this.fixed)
|
||||
},
|
||||
methods: {
|
||||
isFixed (fixed) {
|
||||
fixed ? document.body.classList.add('header-fixed') : document.body.classList.remove('header-fixed')
|
||||
return fixed
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -14,21 +14,20 @@
|
||||
</b-nav-item-dropdown>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderDropdown',
|
||||
props: {
|
||||
right: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
noCaret: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
export default {
|
||||
name: 'HeaderDropdown',
|
||||
props: {
|
||||
right: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: () => {
|
||||
return { itemsCount: 42 }
|
||||
noCaret: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return { itemsCount: 42 }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
<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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<!-- <div class="sidebar-footer"></div> -->
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'sidebar-footer'
|
||||
}
|
||||
</script>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<!-- <div class="sidebar-form"></div> -->
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'sidebar-form'
|
||||
}
|
||||
</script>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<!-- <div class="sidebar-header"></div> -->
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'sidebar-header'
|
||||
}
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
<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>
|
||||
@@ -1,26 +0,0 @@
|
||||
<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>
|
||||
@@ -1,33 +0,0 @@
|
||||
<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>
|
||||
@@ -1,35 +0,0 @@
|
||||
<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>
|
||||
@@ -1,59 +0,0 @@
|
||||
<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>
|
||||
@@ -1,68 +0,0 @@
|
||||
<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>
|
||||
@@ -1,42 +0,0 @@
|
||||
<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>
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable */
|
||||
<template>
|
||||
<!--<div class="sidebar-footer"></div>-->
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable */
|
||||
<template>
|
||||
<!-- <div class="sidebar-form"></div> -->
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable */
|
||||
<template>
|
||||
<!-- <div class="sidebar-header"></div> -->
|
||||
</template>
|
||||
|
||||
@@ -4,29 +4,29 @@
|
||||
<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"/>
|
||||
<SidebarNavTitle :key="index" :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
|
||||
</template>
|
||||
<template v-else-if="item.divider">
|
||||
<SidebarNavDivider :classes="item.class"/>
|
||||
<SidebarNavDivider :key="index" :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"/>
|
||||
<SidebarNavLabel :key="index" :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">
|
||||
<SidebarNavDropdown :key="index" :name="item.name" :url="item.url" :icon="item.icon">
|
||||
<template v-for="(childL1, index1) 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">
|
||||
<SidebarNavDropdown :key="index1" :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
|
||||
<li :key="index2" class="nav-item" v-for="(childL2, index2) 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">
|
||||
<SidebarNavItem :key="index1" :classes="item.class">
|
||||
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
|
||||
</SidebarNavItem>
|
||||
</template>
|
||||
@@ -34,7 +34,7 @@
|
||||
</SidebarNavDropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<SidebarNavItem :classes="item.class">
|
||||
<SidebarNavItem :key="index" :classes="item.class">
|
||||
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
|
||||
</SidebarNavItem>
|
||||
</template>
|
||||
@@ -46,30 +46,30 @@
|
||||
</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
|
||||
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">
|
||||
|
||||
@@ -3,24 +3,24 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar-nav-divider',
|
||||
props: {
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
export default {
|
||||
name: 'sidebar-nav-divider',
|
||||
props: {
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'divider',
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'divider',
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : ''
|
||||
}
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -5,31 +5,31 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar-nav-item',
|
||||
props: {
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
export default {
|
||||
name: 'sidebar-nav-item',
|
||||
props: {
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'nav-item',
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
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')
|
||||
}
|
||||
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>
|
||||
|
||||
@@ -5,55 +5,55 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SidebarNavItem from './SidebarNavItem'
|
||||
import SidebarNavLink from './SidebarNavLink'
|
||||
export default {
|
||||
name: 'sidebar-nav-label',
|
||||
components: {
|
||||
SidebarNavItem,
|
||||
SidebarNavLink
|
||||
import SidebarNavItem from './SidebarNavItem'
|
||||
import SidebarNavLink from './SidebarNavLink'
|
||||
export default {
|
||||
name: 'sidebar-nav-label',
|
||||
components: {
|
||||
SidebarNavItem,
|
||||
SidebarNavLink
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
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: () => {}
|
||||
}
|
||||
url: {
|
||||
type: String,
|
||||
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
|
||||
}
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'fa fa-circle'
|
||||
},
|
||||
methods: {
|
||||
getClasses (classes) {
|
||||
return classes ? classes.split(' ') : []
|
||||
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>
|
||||
|
||||
@@ -14,61 +14,61 @@
|
||||
</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: ''
|
||||
}
|
||||
export default {
|
||||
name: 'sidebar-nav-link',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'nav-link',
|
||||
this.linkVariant,
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
classIcon () {
|
||||
return [
|
||||
'nav-icon',
|
||||
this.icon
|
||||
]
|
||||
},
|
||||
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
|
||||
}
|
||||
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
|
||||
]
|
||||
},
|
||||
classIcon () {
|
||||
return [
|
||||
'nav-icon',
|
||||
this.icon
|
||||
]
|
||||
},
|
||||
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>
|
||||
|
||||
@@ -12,31 +12,31 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
wrapper: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'nav-title',
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : ''
|
||||
}
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
wrapper: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'nav-title',
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -10,46 +10,46 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { sidebarCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
|
||||
import toggleClasses from '../../shared/toggle-classes'
|
||||
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'
|
||||
}
|
||||
export default {
|
||||
name: 'SidebarToggler',
|
||||
props: {
|
||||
mobile: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'navbar-toggler'
|
||||
// 'd-none',
|
||||
// 'd-lg-inline-block'
|
||||
]
|
||||
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)
|
||||
},
|
||||
mounted: function () {
|
||||
sidebarToggle (e) {
|
||||
e.preventDefault()
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user