add test.
This commit is contained in:
30
test/dashboard2/src/AppNavigator.vue
Normal file
30
test/dashboard2/src/AppNavigator.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<v-ons-navigator
|
||||
:page-stack="pageStack"
|
||||
:pop-page="storePop"
|
||||
:options="options"
|
||||
></v-ons-navigator>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppSplitter from './AppSplitter.vue'
|
||||
|
||||
export default {
|
||||
beforeCreate () {
|
||||
this.$store.commit('navigator/push', AppSplitter)
|
||||
},
|
||||
computed: {
|
||||
pageStack () {
|
||||
return this.$store.state.navigator.stack
|
||||
},
|
||||
options () {
|
||||
return this.$store.state.navigator.options
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
storePop () {
|
||||
this.$store.commit('navigator/pop')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
40
test/dashboard2/src/AppSplitter.vue
Normal file
40
test/dashboard2/src/AppSplitter.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<v-ons-splitter>
|
||||
<v-ons-splitter-side swipeable side="right" collapse="" width="260px" :animation="$ons.platform.isAndroid() ? 'overlay' : 'reveal'"
|
||||
:open.sync="isOpen"
|
||||
>
|
||||
<menu-page></menu-page>
|
||||
</v-ons-splitter-side>
|
||||
|
||||
<v-ons-splitter-content>
|
||||
<app-tabbar></app-tabbar>
|
||||
</v-ons-splitter-content>
|
||||
</v-ons-splitter>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppTabbar from './AppTabbar.vue'
|
||||
import MenuPage from './pages/Menu.vue'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
isOpen: {
|
||||
get () {
|
||||
return this.$store.state.splitter.open
|
||||
},
|
||||
set (newValue) {
|
||||
this.$store.commit('splitter/toggle', newValue)
|
||||
}
|
||||
}
|
||||
},
|
||||
components: { AppTabbar, MenuPage }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
ons-splitter-side[animation=overlay] {
|
||||
border-left: 1px solid #bbb;
|
||||
}
|
||||
</style>
|
||||
64
test/dashboard2/src/AppTabbar.vue
Normal file
64
test/dashboard2/src/AppTabbar.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar>
|
||||
{{ title }}
|
||||
<v-ons-toolbar-button slot="right" @click="$store.commit('splitter/toggle')">
|
||||
<v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
|
||||
</v-ons-toolbar-button>
|
||||
</custom-toolbar>
|
||||
|
||||
<v-ons-tabbar
|
||||
position="auto"
|
||||
:tabs="tabs"
|
||||
:index.sync="index"
|
||||
></v-ons-tabbar>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Home from './pages/Home.vue'
|
||||
import Forms from './pages/Forms.vue'
|
||||
import Animations from './pages/Animations.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tabs: [
|
||||
{
|
||||
label: 'Home',
|
||||
icon: this.md() ? null : 'ion-home',
|
||||
page: Home
|
||||
},
|
||||
{
|
||||
label: 'Forms',
|
||||
icon: this.md() ? null : 'ion-edit',
|
||||
page: Forms
|
||||
},
|
||||
{
|
||||
label: 'Anim',
|
||||
icon: this.md() ? null : 'ion-film-marker',
|
||||
page: Animations
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
md () {
|
||||
return this.$ons.platform.isAndroid()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
index: {
|
||||
get () {
|
||||
return this.$store.state.tabbar.index
|
||||
},
|
||||
set (newValue) {
|
||||
this.$store.commit('tabbar/set', newValue)
|
||||
}
|
||||
},
|
||||
title () {
|
||||
return this.md() ? 'Kitchen Sink' : this.tabs[this.index].label
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
BIN
test/dashboard2/src/assets/logo.png
Normal file
BIN
test/dashboard2/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
test/dashboard2/src/assets/onsenui-logo.png
Normal file
BIN
test/dashboard2/src/assets/onsenui-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
test/dashboard2/src/assets/vue-onsenui.png
Normal file
BIN
test/dashboard2/src/assets/vue-onsenui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
21
test/dashboard2/src/main.js
Normal file
21
test/dashboard2/src/main.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import VueOnsen from 'vue-onsenui'
|
||||
import CustomToolbar from './partials/CustomToolbar.vue'
|
||||
import storeLike from './store.js'
|
||||
import AppNavigator from './AppNavigator.vue'
|
||||
// Onsen UI basic CSS
|
||||
import 'onsenui/css/onsenui.css'
|
||||
// Onsen UI CSS components source (requires cssnext)
|
||||
import 'onsenui/css/onsen-css-components.css'
|
||||
|
||||
Vue.use(Vuex)
|
||||
Vue.use(VueOnsen)
|
||||
Vue.component('custom-toolbar', CustomToolbar) // Common toolbar
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(AppNavigator),
|
||||
store: new Vuex.Store(storeLike)
|
||||
})
|
||||
55
test/dashboard2/src/pages/Animations.vue
Normal file
55
test/dashboard2/src/pages/Animations.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<v-ons-list>
|
||||
<v-ons-list-header>Transitions</v-ons-list-header>
|
||||
<v-ons-list-item v-for="animation in animations" :key="animation"
|
||||
modifier="chevron"
|
||||
@click="transition(animation)"
|
||||
>
|
||||
{{ animation }}
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const transitionPage = {
|
||||
template: `
|
||||
<v-ons-page>
|
||||
<custom-toolbar backLabel="Anim">
|
||||
{{ animation }}
|
||||
</custom-toolbar>
|
||||
<p style="text-align: center">
|
||||
Use the VOnsBackButton
|
||||
</p>
|
||||
</v-ons-page>
|
||||
`
|
||||
}
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
animations: ['none', 'default', 'slide-ios', 'slide-md', 'lift-ios', 'lift-md', 'fade-ios', 'fade-md']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
transition (name) {
|
||||
this.$store.commit('navigator/options', {
|
||||
// Sets animations
|
||||
animation: name,
|
||||
// Resets default options
|
||||
callback: () => this.$store.commit('navigator/options', {})
|
||||
})
|
||||
|
||||
this.$store.commit('navigator/push', {
|
||||
extends: transitionPage,
|
||||
data () {
|
||||
return {
|
||||
animation: name
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
71
test/dashboard2/src/pages/Buttons.vue
Normal file
71
test/dashboard2/src/pages/Buttons.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
|
||||
|
||||
<section style="margin: 16px">
|
||||
<v-ons-button class="button-margin">Normal</v-ons-button>
|
||||
<v-ons-button modifier="quiet" class="button-margin">Quiet</v-ons-button>
|
||||
<v-ons-button modifier="outline" class="button-margin">Outline</v-ons-button>
|
||||
<v-ons-button modifier="cta" class="button-margin">Call to action</v-ons-button>
|
||||
<v-ons-button modifier="light" class="button-margin">Light</v-ons-button>
|
||||
<v-ons-button modifier="large" class="button-margin">Large</v-ons-button>
|
||||
</section>
|
||||
|
||||
<section style="margin: 16px">
|
||||
<v-ons-button class="button-margin" disabled>Normal</v-ons-button>
|
||||
<v-ons-button modifier="quiet" class="button-margin" disabled>Quiet</v-ons-button>
|
||||
<v-ons-button modifier="outline" class="button-margin" disabled>Outline</v-ons-button>
|
||||
<v-ons-button modifier="cta" class="button-margin" disabled>Call to action</v-ons-button>
|
||||
<v-ons-button modifier="light" class="button-margin" disabled>Light</v-ons-button>
|
||||
<v-ons-button modifier="large" class="button-margin" disabled>Large</v-ons-button>
|
||||
</section>
|
||||
|
||||
<v-ons-fab position="top right" :style="spdStyle">
|
||||
<v-ons-icon icon="md-face"></v-ons-icon>
|
||||
</v-ons-fab>
|
||||
|
||||
<v-ons-fab position="bottom left" :style="spdStyle" disabled>
|
||||
<v-ons-icon icon="md-car"></v-ons-icon>
|
||||
</v-ons-fab>
|
||||
|
||||
<v-ons-speed-dial position="bottom right" direction="up"
|
||||
:open.sync="spdOpen"
|
||||
>
|
||||
<v-ons-fab :style="spdStyle">
|
||||
<v-ons-icon icon="md-share"></v-ons-icon>
|
||||
</v-ons-fab>
|
||||
|
||||
<v-ons-speed-dial-item v-for="(icon, name) in shareItems" :key="name"
|
||||
:style="spdStyle"
|
||||
@click="$ons.notification.confirm(`Share on ${name}?`)"
|
||||
>
|
||||
<v-ons-icon :icon="icon"></v-ons-icon>
|
||||
</v-ons-speed-dial-item>
|
||||
|
||||
</v-ons-speed-dial>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
spdOpen: false,
|
||||
spdStyle: {
|
||||
backgroundColor: this.$ons.platform.isAndroid() ? null : '#4282cc'
|
||||
},
|
||||
shareItems: {
|
||||
'Twitter': 'md-twitter',
|
||||
'Facebook': 'md-facebook',
|
||||
'Google+': 'md-google-plus'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button-margin {
|
||||
margin: 6px 0;
|
||||
}
|
||||
</style>
|
||||
70
test/dashboard2/src/pages/Carousel.vue
Normal file
70
test/dashboard2/src/pages/Carousel.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
|
||||
|
||||
<v-ons-carousel fullscreen swipeable auto-scroll overscrollable
|
||||
:index.sync="carouselIndex"
|
||||
>
|
||||
<v-ons-carousel-item v-for="(value, key) in items" :key="key"
|
||||
class="carousel-item"
|
||||
:style="{ backgroundColor: value }"
|
||||
>
|
||||
<div class="color-tag">{{key}}</div>
|
||||
</v-ons-carousel-item>
|
||||
</v-ons-carousel>
|
||||
|
||||
<div class="dots">
|
||||
<span v-for="dotIndex in Object.keys(items).length" :key="dotIndex"
|
||||
@click="carouselIndex = dotIndex - 1"
|
||||
>
|
||||
{{ carouselIndex === dotIndex - 1 ? '\u25CF' : '\u25CB' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
carouselIndex: 0,
|
||||
items: {
|
||||
gray: 'gray',
|
||||
blue: '#085078',
|
||||
dark: '#373B44',
|
||||
orange: '#D38312'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.carousel-item {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-tag {
|
||||
color: #fff;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dots {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dots > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
210
test/dashboard2/src/pages/Dialogs.vue
Normal file
210
test/dashboard2/src/pages/Dialogs.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo">
|
||||
<v-ons-toolbar-button slot="right" id="info-button" @click="popoverVisible = true">
|
||||
<v-ons-icon v-if="$ons.platform.isAndroid()" icon="md-more-vert"></v-ons-icon>
|
||||
<span v-else>More</span>
|
||||
</v-ons-toolbar-button>
|
||||
</custom-toolbar>
|
||||
|
||||
<v-ons-fab v-if="$ons.platform.isAndroid()" position="bottom right">
|
||||
<v-ons-icon icon="md-face"></v-ons-icon>
|
||||
</v-ons-fab>
|
||||
|
||||
<v-ons-list-title>Notifications</v-ons-list-title>
|
||||
<v-ons-list modifier="inset">
|
||||
<v-ons-list-item
|
||||
tappable modifier="longdivider"
|
||||
@click="$ons.notification.alert('Hello, world!')"
|
||||
>
|
||||
<div class="center">
|
||||
Alert
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item
|
||||
tappable modifier="longdivider"
|
||||
@click="$ons.notification.confirm('Are you ready?')"
|
||||
>
|
||||
<div class="center">
|
||||
Simple Confirmation
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item
|
||||
tappable modifier="longdivider"
|
||||
@click="$ons.notification.prompt('What is your name?')"
|
||||
>
|
||||
<div class="center">
|
||||
Prompt
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item
|
||||
tappable modifier="longdivider"
|
||||
@click="$ons.notification.toast('Hi there!', { buttonLabel: 'Dismiss', timeout: 1500 })"
|
||||
>
|
||||
<div class="center">
|
||||
Toast
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item
|
||||
tappable modifier="longdivider"
|
||||
@click="$ons.openActionSheet({ buttons: ['Label 1', 'Label 2', 'Label 3', 'Cancel'], destructive: 2, cancelable: true })"
|
||||
>
|
||||
<div class="center">
|
||||
Action/Bottom Sheet
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
<v-ons-list-title>Components</v-ons-list-title>
|
||||
<v-ons-list modifier="inset">
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="dialogVisible = true"
|
||||
>
|
||||
<div class="center">
|
||||
Simple Dialog
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="alertDialogVisible = true"
|
||||
>
|
||||
<div class="center">
|
||||
Alert Dialog
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="toastVisible = true"
|
||||
>
|
||||
<div class="center">
|
||||
Toast (top)
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="showModal"
|
||||
>
|
||||
<div class="center">
|
||||
Modal
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="popoverVisible = true"
|
||||
>
|
||||
<div class="center">
|
||||
Popover - MD Menu
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="actionSheetVisible = true"
|
||||
>
|
||||
<div class="center">
|
||||
Action/Bottom Sheet
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
<!-- Components -->
|
||||
|
||||
<v-ons-dialog cancelable
|
||||
class="lorem-dialog"
|
||||
:visible.sync="dialogVisible"
|
||||
>
|
||||
<!-- Optional page. This could contain a Navigator as well. -->
|
||||
<v-ons-page>
|
||||
<v-ons-toolbar>
|
||||
<div class="center">Simple Dialog</div>
|
||||
</v-ons-toolbar>
|
||||
<p style="text-align: center">Lorem ipsum dolor</p>
|
||||
<p style="text-align: center">
|
||||
<v-ons-button modifier="light" @click="dialogVisible = false">Close</v-ons-button>
|
||||
</p>
|
||||
</v-ons-page>
|
||||
</v-ons-dialog>
|
||||
|
||||
<v-ons-alert-dialog cancelable
|
||||
:modifier="$ons.platform.isAndroid() ? '' : 'rowfooter'"
|
||||
:title="'Hey!!'"
|
||||
:footer="{
|
||||
'Wat': () => alertDialogVisible = false,
|
||||
'Hmm': () => alertDialogVisible = false,
|
||||
'Sure': () => alertDialogVisible = false
|
||||
}"
|
||||
:visible.sync="alertDialogVisible"
|
||||
>
|
||||
Lorem ipsum <v-ons-icon icon="fa-commenting-o"></v-ons-icon>
|
||||
</v-ons-alert-dialog>
|
||||
|
||||
<v-ons-toast :visible="toastVisible" animation="fall">Supercalifragilisticexpialidocious<button @click="toastVisible = false">No way</button></v-ons-toast>
|
||||
|
||||
<v-ons-modal
|
||||
:visible="modalVisible"
|
||||
@click="modalVisible = false"
|
||||
>
|
||||
<p style="text-align: center">
|
||||
Loading <v-ons-icon icon="fa-spinner" spin></v-ons-icon>
|
||||
<br><br>
|
||||
Click or wait
|
||||
</p>
|
||||
</v-ons-modal>
|
||||
|
||||
<v-ons-popover cancelable direction="down" cover-target
|
||||
target="#info-button"
|
||||
:visible.sync="popoverVisible"
|
||||
>
|
||||
<v-ons-list>
|
||||
<v-ons-list-item tappable
|
||||
v-for="label in ['Call history', 'Import/export', 'New contact', 'Settings']"
|
||||
@click="popoverVisible = false"
|
||||
:key="label"
|
||||
:modifier="$ons.platform.isAndroid() ? 'nodivider' : 'longdivider'"
|
||||
>
|
||||
<div class="center">{{ label }}</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
</v-ons-popover>
|
||||
|
||||
<v-ons-action-sheet :visible.sync="actionSheetVisible" cancelable>
|
||||
<v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Action 1</v-ons-action-sheet-button>
|
||||
<v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Action 2</v-ons-action-sheet-button>
|
||||
<v-ons-action-sheet-button @click="actionSheetVisible = false" modifier="destructive" icon="md-square-o">Action 3</v-ons-action-sheet-button>
|
||||
<v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Cancel</v-ons-action-sheet-button>
|
||||
</v-ons-action-sheet>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
alertDialogVisible: false,
|
||||
toastVisible: false,
|
||||
modalVisible: false,
|
||||
popoverVisible: false,
|
||||
actionSheetVisible: false,
|
||||
timeoutID: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showModal () {
|
||||
this.modalVisible = true
|
||||
clearTimeout(this.timeoutID)
|
||||
this.timeoutID = setTimeout(() => (this.modalVisible = false), 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.lorem-dialog .dialog-container {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
ons-list-title {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
160
test/dashboard2/src/pages/Forms.vue
Normal file
160
test/dashboard2/src/pages/Forms.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
|
||||
<v-ons-list>
|
||||
<v-ons-list-header>Text input</v-ons-list-header>
|
||||
<v-ons-list-item :modifier="$ons.platform.isAndroid() ? 'nodivider' : ''">
|
||||
<div class="left">
|
||||
<v-ons-icon icon="md-face" class="list-item__icon"></v-ons-icon>
|
||||
</div>
|
||||
<label class="center">
|
||||
<v-ons-input float maxlength="20"
|
||||
placeholder="Name"
|
||||
v-model="name"
|
||||
>
|
||||
</v-ons-input>
|
||||
</label>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item :modifier="$ons.platform.isAndroid() ? 'nodivider' : ''">
|
||||
<div class="left">
|
||||
<v-ons-icon icon="fa-question-circle-o" class="list-item__icon"></v-ons-icon>
|
||||
</div>
|
||||
<label class="center">
|
||||
<v-ons-search-input maxlength="20"
|
||||
placeholder="Search"
|
||||
v-model="name"
|
||||
>
|
||||
</v-ons-search-input>
|
||||
</label>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item>
|
||||
<div class="right right-label">
|
||||
Hello {{ name || 'anonymous' }}!<v-ons-icon icon="fa-hand-spock-o" size="lg" class="right-icon"></v-ons-icon>
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-header>Switches</v-ons-list-header>
|
||||
<ons-list-item>
|
||||
<label class="center" for="switch1">
|
||||
Switch ({{ switchOn ? 'on' : 'off' }})
|
||||
</label>
|
||||
<div class="right">
|
||||
<v-ons-switch input-id="switch1" v-model="switchOn">
|
||||
</v-ons-switch>
|
||||
</div>
|
||||
</ons-list-item>
|
||||
<ons-list-item>
|
||||
<label class="center" for="switch2">
|
||||
{{ switchOn ? 'Enabled switch' : 'Disabled switch' }}
|
||||
</label>
|
||||
<div class="right">
|
||||
<v-ons-switch input-id="switch2" :disabled="!switchOn">
|
||||
</v-ons-switch>
|
||||
</div>
|
||||
</ons-list-item>
|
||||
|
||||
<v-ons-list-header>Select</v-ons-list-header>
|
||||
<ons-list-item>
|
||||
<div class="center">
|
||||
<v-ons-select style="width: 120px" v-model="selectedItem">
|
||||
<option v-for="item in items" :value="item.value">
|
||||
{{ item.text }}
|
||||
</option>
|
||||
</v-ons-select>
|
||||
|
||||
</div>
|
||||
<div class="right right-label">
|
||||
<s v-show="selectedItem !== 'Vue'">{{ selectedItem }}</s> Vue is awesome!
|
||||
</div>
|
||||
</ons-list-item>
|
||||
|
||||
<v-ons-list-header>Radio buttons</v-ons-list-header>
|
||||
<v-ons-list-item v-for="(vegetable, $index) in vegetables" :key="vegetable"
|
||||
tappable
|
||||
:modifier="($index === vegetables.length - 1) ? 'longdivider' : ''"
|
||||
>
|
||||
<label class="left">
|
||||
<v-ons-radio
|
||||
:input-id="'radio-' + $index"
|
||||
:value="vegetable"
|
||||
v-model=" selectedVegetable"
|
||||
>
|
||||
</v-ons-radio>
|
||||
</label>
|
||||
<label :for="'radio-' + $index" class="center">
|
||||
{{ vegetable }}
|
||||
</label>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item>
|
||||
<div class="center">
|
||||
I love {{ selectedVegetable }}!
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-header>Checkboxes - {{checkedColors}}</v-ons-list-header>
|
||||
<v-ons-list-item v-for="(color, $index) in colors" :key="color" tappable>
|
||||
<label class="left">
|
||||
<v-ons-checkbox
|
||||
:input-id="'checkbox-' + $index"
|
||||
:value="color"
|
||||
v-model="checkedColors"
|
||||
>
|
||||
</v-ons-checkbox>
|
||||
</label>
|
||||
<label class="center" :for="'checkbox-' + $index">
|
||||
{{ color }}
|
||||
</label>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-header>Range slider</v-ons-list-header>
|
||||
<v-ons-list-item>
|
||||
Adjust the volume:
|
||||
<v-ons-row>
|
||||
<v-ons-col width="40px" style="text-align: center; line-height: 31px;">
|
||||
<v-ons-icon icon="md-volume-down"></v-ons-icon>
|
||||
</v-ons-col>
|
||||
<v-ons-col>
|
||||
|
||||
<v-ons-range v-model="volume" style="width: 100%;"></v-ons-range>
|
||||
|
||||
</v-ons-col>
|
||||
<v-ons-col width="40px" style="text-align: center; line-height: 31px;">
|
||||
<v-ons-icon icon="md-volume-up"></v-ons-icon>
|
||||
</v-ons-col>
|
||||
</v-ons-row>
|
||||
Volume: {{ volume }} <span v-show="Number(volume) > 80"> (careful, that's loud)</span>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
name: '',
|
||||
switchOn: true,
|
||||
items: [
|
||||
{ text: 'Vue', value: 'Vue' },
|
||||
{ text: 'React', value: 'React' },
|
||||
{ text: 'Angular', value: 'Angular' }
|
||||
],
|
||||
selectedItem: 'Vue',
|
||||
vegetables: ['Apples', 'Bananas', 'Oranges'],
|
||||
selectedVegetable: 'Bananas',
|
||||
colors: ['Red', 'Green', 'Blue'],
|
||||
checkedColors: ['Green', 'Blue'],
|
||||
volume: 25
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.right-icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.right-label {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
95
test/dashboard2/src/pages/Home.vue
Normal file
95
test/dashboard2/src/pages/Home.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<p class="intro">
|
||||
This is a kitchen sink example that shows off the Vue bindings for Onsen UI.<br><br>
|
||||
</p>
|
||||
|
||||
<v-ons-card v-for="page of pages" :key="page.label"
|
||||
@click="push(page.component, page.label)"
|
||||
>
|
||||
<div class="title">{{ page.label }}</div>
|
||||
<div class="content">{{ page.desc }}</div>
|
||||
</v-ons-card>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PullHook from './PullHook.vue'
|
||||
import Dialogs from './Dialogs.vue'
|
||||
import Buttons from './Buttons.vue'
|
||||
import Carousel from './Carousel.vue'
|
||||
import InfiniteScroll from './InfiniteScroll.vue'
|
||||
import Progress from './Progress.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
component: PullHook,
|
||||
label: 'Pull Hook',
|
||||
desc: 'Simple "pull to refresh" functionality to update data.'
|
||||
},
|
||||
{
|
||||
component: Dialogs,
|
||||
label: 'Dialogs',
|
||||
desc: 'Components and utility methods to display many types of dialogs.'
|
||||
},
|
||||
{
|
||||
component: Buttons,
|
||||
label: 'Buttons',
|
||||
desc: 'Different styles for buttons, floating action buttons and speed dials.'
|
||||
},
|
||||
{
|
||||
component: Carousel,
|
||||
label: 'Carousel',
|
||||
desc: 'Customizable carousel that can be optionally fullscreen.'
|
||||
},
|
||||
{
|
||||
component: InfiniteScroll,
|
||||
label: 'Infinite Scroll',
|
||||
desc: 'Two types of infinite lists: "Load More" and "Lazy Repeat".'
|
||||
},
|
||||
{
|
||||
component: Progress,
|
||||
label: 'Progress',
|
||||
desc: 'Linear progress, circular progress and spinners.'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
push (page, key) {
|
||||
this.$store.commit('navigator/push', {
|
||||
extends: page,
|
||||
data () {
|
||||
return {
|
||||
toolbarInfo: {
|
||||
backLabel: 'Home',
|
||||
title: key
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.intro {
|
||||
text-align: center;
|
||||
padding: 0 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
ons-card {
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card__title, .card--material__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
97
test/dashboard2/src/pages/InfiniteScroll.vue
Normal file
97
test/dashboard2/src/pages/InfiniteScroll.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
|
||||
|
||||
<v-ons-tabbar position="auto">
|
||||
<template slot="pages">
|
||||
|
||||
<!-- Load more items on scroll bottom -->
|
||||
<v-ons-page :infinite-scroll="loadMore">
|
||||
<p class="intro">
|
||||
Useful for loading more items when the scroll reaches the bottom of the page, typically after an asynchronous API call.<br><br>
|
||||
</p>
|
||||
|
||||
<v-ons-list>
|
||||
<v-ons-list-item v-for="item in list" :key="item">
|
||||
Item #{{ item }}
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
<div class="after-list">
|
||||
<v-ons-icon icon="fa-spinner" size="26px" spin></v-ons-icon>
|
||||
</div>
|
||||
</v-ons-page>
|
||||
|
||||
<!-- Lazy load thousands of items -->
|
||||
<v-ons-page>
|
||||
<p class="intro">
|
||||
Automatically unloads items that are not visible and loads new ones. Useful when the list contains thousands of items.<br><br>
|
||||
</p>
|
||||
|
||||
<v-ons-list>
|
||||
<v-ons-lazy-repeat :render-item="renderItem" :length="3000"></v-ons-lazy-repeat>
|
||||
</v-ons-list>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<v-ons-tab label="Load More"></v-ons-tab>
|
||||
<v-ons-tab label="Lazy Repeat" active></v-ons-tab>
|
||||
</v-ons-tabbar>
|
||||
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
beforeMount () {
|
||||
for (let i = 0; i < 30; i++) {
|
||||
this.list.push(i)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadMore (done) {
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.list.push(this.list.length + i)
|
||||
}
|
||||
done()
|
||||
}, 600)
|
||||
},
|
||||
|
||||
renderItem (i) {
|
||||
return new Vue({
|
||||
template: `
|
||||
<v-ons-list-item :key="index">
|
||||
Item #{{ index }}
|
||||
</v-ons-list-item>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
index: i
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.intro {
|
||||
text-align: center;
|
||||
padding: 0 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.after-list {
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
119
test/dashboard2/src/pages/Menu.vue
Normal file
119
test/dashboard2/src/pages/Menu.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<div class="profile-pic">
|
||||
<img src="../assets/vue-onsenui.png">
|
||||
</div>
|
||||
|
||||
<v-ons-list-title>Access</v-ons-list-title>
|
||||
<v-ons-list>
|
||||
<v-ons-list-item v-for="(item, index) in access" :key="item.title"
|
||||
@click="loadView(index)"
|
||||
>
|
||||
<div class="left">
|
||||
<v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
|
||||
</div>
|
||||
<div class="center">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<v-ons-icon icon="fa-link"></v-ons-icon>
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
<v-ons-list-title style="margin-top: 10px">Links</v-ons-list-title>
|
||||
<v-ons-list>
|
||||
<v-ons-list-item v-for="item in links" :key="item.title"
|
||||
@click="loadLink(item.url)"
|
||||
>
|
||||
<div class="left">
|
||||
<v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
|
||||
</div>
|
||||
<div class="center">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<v-ons-icon icon="fa-external-link"></v-ons-icon>
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
loadView (index) {
|
||||
this.$store.commit('tabbar/set', index)
|
||||
this.$store.commit('splitter/toggle')
|
||||
},
|
||||
loadLink (url) {
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
links: [
|
||||
{
|
||||
title: 'Docs',
|
||||
icon: 'ion-document-text',
|
||||
url: 'https://onsen.io/v2/docs/guide/vue/'
|
||||
},
|
||||
{
|
||||
title: 'Github',
|
||||
icon: 'ion-social-github',
|
||||
url: 'https://github.com/OnsenUI/OnsenUI'
|
||||
},
|
||||
{
|
||||
title: 'Code',
|
||||
icon: 'ion-code',
|
||||
url: 'https://github.com/frandiox/vue-onsenui-kitchensink'
|
||||
},
|
||||
{
|
||||
title: 'Forum',
|
||||
icon: 'ion-chatboxes',
|
||||
url: 'https://community.onsen.io/'
|
||||
},
|
||||
{
|
||||
title: 'Twitter',
|
||||
icon: 'ion-social-twitter',
|
||||
url: 'https://twitter.com/Onsen_UI'
|
||||
}
|
||||
],
|
||||
access: [
|
||||
{
|
||||
title: 'Home',
|
||||
icon: 'ion-home, material:md-home'
|
||||
},
|
||||
{
|
||||
title: 'Forms',
|
||||
icon: 'ion-edit, material:md-edit'
|
||||
},
|
||||
{
|
||||
title: 'Animations',
|
||||
icon: 'ion-film-marker, material: md-movie-alt'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-pic {
|
||||
width: 200px;
|
||||
background-color: #fff;
|
||||
margin: 20px auto 10px;
|
||||
border: 1px solid #999;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.profile-pic > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ons-list-item {
|
||||
color: #444;
|
||||
}
|
||||
</style>
|
||||
106
test/dashboard2/src/pages/Progress.vue
Normal file
106
test/dashboard2/src/pages/Progress.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
|
||||
|
||||
<v-ons-progress-bar :modifier="!md() && 'ios' || ''" :value="progress"></v-ons-progress-bar>
|
||||
|
||||
<section style="margin: 40px 16px">
|
||||
<p>
|
||||
Progress: {{ progress }}%
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-progress-bar value="20" :modifier="!md() && 'ios' || ''"></v-ons-progress-bar>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-progress-bar value="40" secondary-value="80" :modifier="!md() && 'ios' || ''"></v-ons-progress-bar>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-progress-bar indeterminate :modifier="!md() && 'ios' || ''"></v-ons-progress-bar>
|
||||
</p>
|
||||
|
||||
<div style="text-align: center; margin: 40px; color: #666">
|
||||
<p>
|
||||
<v-ons-progress-circular value="20" :modifier="!md() && 'ios' || ''"></v-ons-progress-circular>
|
||||
<v-ons-progress-circular value="40" secondary-value="80" :modifier="!md() && 'ios' || ''"></v-ons-progress-circular>
|
||||
<v-ons-progress-circular indeterminate :modifier="!md() && 'ios' || ''"></v-ons-progress-circular>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-icon icon="ion-load-a" spin size="30px"></v-ons-icon>
|
||||
<v-ons-icon icon="ion-load-b" spin size="30px"></v-ons-icon>
|
||||
<v-ons-icon icon="ion-load-c" spin size="30px"></v-ons-icon>
|
||||
<v-ons-icon icon="ion-load-d" spin size="30px"></v-ons-icon>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-icon icon="fa-spinner" spin size="26px"></v-ons-icon>
|
||||
<v-ons-icon icon="circle-o-notch" spin size="26px"></v-ons-icon>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-icon icon="md-spinner" spin size="30px"></v-ons-icon>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<v-ons-button modifier="large">
|
||||
<v-ons-icon icon="ion-load-c" spin size="26px"></v-ons-icon>
|
||||
</v-ons-button>
|
||||
<br><br>
|
||||
<v-ons-button modifier="large" disabled>
|
||||
<v-ons-icon icon="ion-load-c" spin size="26px"></v-ons-icon>
|
||||
</v-ons-button>
|
||||
</p>
|
||||
</section>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
progress: 0,
|
||||
intervalID: 0
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.intervalID = setInterval(() => {
|
||||
if (this.progress === 100) {
|
||||
clearInterval(this.intervalID)
|
||||
return
|
||||
}
|
||||
|
||||
this.progress++
|
||||
}, 40)
|
||||
},
|
||||
methods: {
|
||||
md () {
|
||||
return this.$ons.platform.isAndroid()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 'ios' modifier */
|
||||
.progress-bar--ios__primary,
|
||||
.progress-bar--ios.progress-bar--indeterminate::before,
|
||||
.progress-bar--ios.progress-bar--indeterminate::after {
|
||||
background-color: #4282cc
|
||||
}
|
||||
|
||||
.progress-bar--ios__secondary {
|
||||
background-color: #87b6eb;
|
||||
}
|
||||
|
||||
.progress-circular--ios__primary {
|
||||
stroke: #4282cc
|
||||
}
|
||||
|
||||
.progress-circular--ios__secondary {
|
||||
stroke: #87b6eb;
|
||||
}
|
||||
</style>
|
||||
85
test/dashboard2/src/pages/PullHook.vue
Normal file
85
test/dashboard2/src/pages/PullHook.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
|
||||
|
||||
<v-ons-pull-hook
|
||||
threshold-height="120px"
|
||||
:action="onAction"
|
||||
@changestate="state = $event.state"
|
||||
>
|
||||
|
||||
<v-ons-icon
|
||||
size="22px"
|
||||
class="pull-hook-content"
|
||||
:icon="state === 'action' ? 'fa-spinner' : 'fa-arrow-down'"
|
||||
:rotate="state === 'preaction' && 180"
|
||||
:spin="state === 'action'"
|
||||
></v-ons-icon>
|
||||
|
||||
</v-ons-pull-hook>
|
||||
|
||||
<v-ons-list>
|
||||
<v-ons-list-header>Pull to refresh</v-ons-list-header>
|
||||
<v-ons-list-item v-for="kitten in kittens" :key="kitten">
|
||||
<div class="left">
|
||||
<img class="list-item__thumbnail" :src="kitten.url">
|
||||
</div>
|
||||
<div class="center">{{ kitten.name }}</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
state: 'initial',
|
||||
kittens: this.getRandomData()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAction (done) {
|
||||
setTimeout(() => {
|
||||
this.kittens = [...this.kittens, this.getRandomKitten()]
|
||||
done()
|
||||
}, 400)
|
||||
},
|
||||
getRandomName () {
|
||||
const names = ['Oscar', 'Max', 'Tiger', 'Sam', 'Misty', 'Simba', 'Coco', 'Chloe', 'Lucy', 'Missy']
|
||||
|
||||
return names[Math.floor(Math.random() * names.length)]
|
||||
},
|
||||
getRandomUrl () {
|
||||
const width = 40 + Math.floor(20 * Math.random())
|
||||
const height = 40 + Math.floor(20 * Math.random())
|
||||
|
||||
return `https://placekitten.com/g/${width}/${height}`
|
||||
},
|
||||
getRandomKitten () {
|
||||
return {
|
||||
name: this.getRandomName(),
|
||||
url: this.getRandomUrl()
|
||||
}
|
||||
},
|
||||
getRandomData () {
|
||||
const data = []
|
||||
|
||||
for (let i = 0; i < 8; i++) {
|
||||
data.push(this.getRandomKitten())
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pull-hook-content {
|
||||
color: #666;
|
||||
transition: transform .25s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
19
test/dashboard2/src/partials/CustomToolbar.vue
Normal file
19
test/dashboard2/src/partials/CustomToolbar.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<v-ons-toolbar>
|
||||
<div class="left">
|
||||
<slot name="left">
|
||||
<v-ons-back-button v-if="backLabel">
|
||||
{{ backLabel }}
|
||||
</v-ons-back-button>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="center"><slot>{{ title }}</slot></div>
|
||||
<div class="right"><slot name="right"></slot></div>
|
||||
</v-ons-toolbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['title', 'backLabel']
|
||||
}
|
||||
</script>
|
||||
62
test/dashboard2/src/store.js
Normal file
62
test/dashboard2/src/store.js
Normal file
@@ -0,0 +1,62 @@
|
||||
export default {
|
||||
modules: {
|
||||
navigator: {
|
||||
strict: true,
|
||||
namespaced: true,
|
||||
state: {
|
||||
stack: [],
|
||||
options: {}
|
||||
},
|
||||
mutations: {
|
||||
push (state, page) {
|
||||
state.stack.push(page)
|
||||
},
|
||||
pop (state) {
|
||||
if (state.stack.length > 1) {
|
||||
state.stack.pop()
|
||||
}
|
||||
},
|
||||
replace (state, page) {
|
||||
state.stack.pop()
|
||||
state.stack.push(page)
|
||||
},
|
||||
reset (state, page) {
|
||||
state.stack = [page || state.stack[0]]
|
||||
},
|
||||
options (state, newOptions = {}) {
|
||||
state.options = newOptions
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
splitter: {
|
||||
strict: true,
|
||||
namespaced: true,
|
||||
state: {
|
||||
open: false
|
||||
},
|
||||
mutations: {
|
||||
toggle (state, shouldOpen) {
|
||||
if (shouldOpen instanceof Boolean) {
|
||||
state.open = shouldOpen
|
||||
} else {
|
||||
state.open = !state.open
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
tabbar: {
|
||||
strict: true,
|
||||
namespaced: true,
|
||||
state: {
|
||||
index: 0
|
||||
},
|
||||
mutations: {
|
||||
set (state, index) {
|
||||
state.index = index
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user