Hello World!
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,231 @@
|
||||
<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> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> 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> 4 - 5pm</small>
|
||||
<small class="text-muted"><i class="icon-social-skype"></i> 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> 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 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> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> 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> 4 - 6pm</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 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">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</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">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</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">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</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">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</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">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</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 class="progress-xs" variant="info" :value="25"></b-progress>
|
||||
<small class="text-muted">348 Processes. 1/4 Cores.</small>
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
|
||||
<b-progress class="progress-xs" variant="warning" :value="70"></b-progress>
|
||||
<small class="text-muted">11444GB/16384MB</small>
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
|
||||
<b-progress class="progress-xs" variant="danger" :value="95"></b-progress>
|
||||
<small class="text-muted">243GB/256GB</small>
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
|
||||
<b-progress class="progress-xs" variant="success" :value="10"></b-progress>
|
||||
<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: 'aside',
|
||||
components: {
|
||||
Callout,
|
||||
cSwitch
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<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.path" 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>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div :class="classList">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
variant: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'callout',
|
||||
this.calloutVariant
|
||||
]
|
||||
},
|
||||
calloutVariant () {
|
||||
return this.variant ? `callout-${this.variant}` : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<footer class="app-footer">
|
||||
<a href="http://coreui.io">CoreUI</a> © 2017 creativeLabs.
|
||||
<span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
||||
</footer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'footer'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<header class="app-header navbar">
|
||||
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">☰</button>
|
||||
<b-link class="navbar-brand" to="#"></b-link>
|
||||
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarMinimize">☰</button>
|
||||
<b-nav is-nav-bar class="d-md-down-none">
|
||||
<b-nav-item class="px-3">Dashboard</b-nav-item>
|
||||
<b-nav-item class="px-3">Users</b-nav-item>
|
||||
<b-nav-item class="px-3">Settings</b-nav-item>
|
||||
</b-nav>
|
||||
<b-nav is-nav-bar class="ml-auto">
|
||||
<b-nav-item class="d-md-down-none">
|
||||
<i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span>
|
||||
</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>
|
||||
<b-nav-item-dropdown right>
|
||||
<template slot="button-content">
|
||||
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="d-md-down-none">admin</span>
|
||||
</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<span class="badge badge-info">42</span></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></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<span class="badge badge-default">42</span></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></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>
|
||||
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">☰</button>
|
||||
</header>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'header',
|
||||
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>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<nav class="sidebar-nav">
|
||||
<div slot="header"></div>
|
||||
<ul class="nav">
|
||||
<li class="nav-item" v-for="(item, index) in navItems">
|
||||
<template v-if="item.title">
|
||||
<SidebarNavTitle :name="item.name"/>
|
||||
</template>
|
||||
<template v-else-if="item.divider">
|
||||
<li class="divider"></li>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="item.children">
|
||||
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
|
||||
<template v-for="(child, index) in item.children">
|
||||
<template v-if="child.children">
|
||||
<SidebarNavDropdown :name="child.name" :url="child.url" :icon="child.icon">
|
||||
<li class="nav-item" v-for="(child, index) in item.children">
|
||||
<SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/>
|
||||
</li>
|
||||
</SidebarNavDropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<li class="nav-item">
|
||||
<SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
</SidebarNavDropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
|
||||
</template>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<slot></slot>
|
||||
<div slot="footer"></div>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SidebarNavDropdown from './SidebarNavDropdown'
|
||||
import SidebarNavLink from './SidebarNavLink'
|
||||
import SidebarNavTitle from './SidebarNavTitle'
|
||||
export default {
|
||||
name: 'sidebar',
|
||||
props: {
|
||||
navItems: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SidebarNavDropdown,
|
||||
SidebarNavLink,
|
||||
SidebarNavTitle
|
||||
},
|
||||
methods: {
|
||||
handleClick (e) {
|
||||
e.preventDefault()
|
||||
e.target.parentElement.classList.toggle('open')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.nav-link {
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<router-link :to="url" class="nav-link">
|
||||
<i :class="icon"></i> {{name}}
|
||||
<b-badge :variant="badge.variant">{{badge.text}}</b-badge>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar-nav-link',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
badge: {
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<li class="nav-title">
|
||||
{{name}}
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<label :class="classList">
|
||||
<input type="checkbox"
|
||||
class="switch-input"
|
||||
:value="value"
|
||||
:checked="isChecked"
|
||||
@change="handleChange">
|
||||
<template v-if="isOn">
|
||||
<span class="switch-label" :data-on="on" :data-off="off"></span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="switch-label"></span>
|
||||
</template>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
model: {
|
||||
prop: 'checked',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
default: true
|
||||
},
|
||||
uncheckedValue: {
|
||||
default: false
|
||||
},
|
||||
checked: {
|
||||
default: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
pill: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
on: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
off: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'switch',
|
||||
this.switchType,
|
||||
this.switchVariant,
|
||||
this.switchPill,
|
||||
this.switchSize
|
||||
]
|
||||
},
|
||||
switchType () {
|
||||
return this.type ? `switch-${this.type}` : `switch-default`
|
||||
},
|
||||
switchVariant () {
|
||||
return this.variant ? `switch-${this.variant}` : `switch-secondary`
|
||||
},
|
||||
switchPill () {
|
||||
return !this.pill ? null : `switch-pill`
|
||||
},
|
||||
switchSize () {
|
||||
return this.size ? `switch-${this.size}` : ''
|
||||
},
|
||||
isChecked () {
|
||||
return this.checked === this.value
|
||||
},
|
||||
isOn () {
|
||||
return !this.on ? null : true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange ({ target: { checked } }) {
|
||||
this.$emit('change', checked ? this.value : this.uncheckedValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,17 @@
|
||||
import Aside from './Aside.vue'
|
||||
import Breadcrumb from './Breadcrumb.vue'
|
||||
import Callout from './Callout.vue'
|
||||
import Footer from './Footer.vue'
|
||||
import Header from './Header.vue'
|
||||
import Sidebar from './Sidebar.vue'
|
||||
import Switch from './Switch.vue'
|
||||
|
||||
export {
|
||||
Aside,
|
||||
Breadcrumb,
|
||||
Callout,
|
||||
Footer,
|
||||
Header,
|
||||
Sidebar,
|
||||
Switch
|
||||
}
|
||||
Reference in New Issue
Block a user