Skip to content

Commit 5449e27

Browse files
bage2014bage2014
committed
init main
1 parent caca756 commit 5449e27

File tree

11 files changed

+433
-16
lines changed

11 files changed

+433
-16
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
# my-app
44

5+
E:\Data\Chrome Download\laravel-spa-vuetify-starter-master\laravel-spa-vuetify-starter-master\resources\assets\js\plugins
6+
57
> my-app
68
79
## Build Setup

‎src/App.vue‎

Lines changed: 45 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,52 @@
11
<template>
2-
<div id="app">
3-
<img src="./assets/logo.png">
4-
<router-view/>
5-
</div>
2+
<v-app light>
3+
<v-navigation-drawer
4+
v-if="authenticated"
5+
persistent
6+
v-model="drawer"
7+
enable-resize-watcher
8+
app
9+
>
10+
<nav-menu></nav-menu>
11+
</v-navigation-drawer>
12+
<tool-bar v-on:toggleDrawer="drawer = !drawer" :drawer="drawer"></tool-bar>
13+
<v-content>
14+
<v-container fluid>
15+
<transition name="page" mode="out-in">
16+
<router-view></router-view>
17+
</transition>
18+
</v-container>
19+
</v-content>
20+
<feedback-message></feedback-message>
21+
<page-footer></page-footer>
22+
</v-app>
623
</template>
724

25+
826
<script>
27+
import { mapGetters } from 'vuex'
28+
29+
import NavMenu from './components/NavMenu'
30+
import ToolBar from './components/ToolBar'
31+
import FeedbackMessage from './components/FeedbackMessage'
32+
import PageFooter from './components/PageFooter'
33+
934
export default {
10-
name: 'App'
11-
}
12-
</script>
35+
components: {
36+
'nav-menu': NavMenu,
37+
'tool-bar': ToolBar,
38+
'feedback-message': FeedbackMessage,
39+
'page-footer': PageFooter
40+
},
41+
42+
computed: mapGetters({
43+
authenticated: 'authCheck'
44+
}),
1345
14-
<style>
15-
#app {
16-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
17-
-webkit-font-smoothing: antialiased;
18-
-moz-osx-font-smoothing: grayscale;
19-
text-align: center;
20-
color: #2c3e50;
21-
margin-top: 60px;
46+
data () {
47+
return {
48+
drawer: true
49+
}
50+
}
2251
}
23-
</style>
52+
</script>

‎src/components/FeedbackMessage.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<v-layout row justify-center>
3+
<v-dialog v-if="responseMessage.modal" :value.sync="responseMessage.show" persistent>
4+
<v-card>
5+
<v-card-title class="headline white--text" :class="responseMessage.type">{{ responseMessage.title }}</v-card-title>
6+
<v-divider></v-divider>
7+
<v-card-text>{{ responseMessage.text }}</v-card-text>
8+
<v-layout row justify-center>
9+
<v-btn :color="responseMessage.type" flat="flat" @click.native="close">{{ $t('ok') }}</v-btn>
10+
</v-layout>
11+
</v-card>
12+
</v-dialog>
13+
<v-snackbar v-else top v-model="responseMessage.show" :color="responseMessage.type">
14+
{{ responseMessage.text }}
15+
<v-btn dark flat @click.native="close">{{ $t('close') }}</v-btn>
16+
</v-snackbar>
17+
</v-layout>
18+
</template>
19+
20+
<script>
21+
import { mapGetters } from 'vuex'
22+
23+
export default {
24+
name: 'feedback-message',
25+
computed: mapGetters([
26+
'responseMessage'
27+
]),
28+
methods: {
29+
close () {
30+
this.$store.dispatch('clearMessage')
31+
}
32+
}
33+
}
34+
</script>

‎src/components/Icon.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<svg class="icon" :class="{ 'icon-spin': spin, [`icon-${name}`]: name }">
3+
<use :xlink:href="`#${name}`"></use>
4+
</svg>
5+
</template>
6+
7+
<script>
8+
const files = require.context('!svg-sprite-loader!./../../icons', false, /.*\.svg$/)
9+
10+
files.keys().forEach(files)
11+
12+
export default {
13+
name: 'svg-icon',
14+
15+
props: {
16+
name: {
17+
type: String,
18+
required: true
19+
}
20+
},
21+
22+
data: () => ({
23+
spin: false
24+
}),
25+
26+
created () {
27+
if (this.name.startsWith('spinner')) {
28+
this.spin = true
29+
}
30+
}
31+
}
32+
</script>
33+
34+
<style scoped>
35+
.icon {
36+
display: inline-block;
37+
width: 1em;
38+
height: 1em;
39+
stroke-width: 0;
40+
stroke: currentColor;
41+
fill: currentColor;
42+
}
43+
44+
.icon-spin {
45+
animation: icon-spin 2s infinite linear;
46+
}
47+
48+
.btn .icon {
49+
margin-right: 5px;
50+
margin-left: -3px;
51+
vertical-align: middle;
52+
}
53+
54+
@keyframes icon-spin {
55+
0% {
56+
transform: rotate(0deg);
57+
}
58+
100% {
59+
transform: rotate(359deg);
60+
}
61+
}
62+
</style>

‎src/components/Loading.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<div :style="{
3+
width: `${percent}%`,
4+
height: height,
5+
opacity: show ? 1 : 0,
6+
'background-color': canSuccess ? color : failedColor
7+
}" class="progress"/>
8+
</template>
9+
10+
<script>
11+
// Based on https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-loading.vue
12+
import Vue from 'vue'
13+
14+
export default {
15+
name: 'v-loading',
16+
data: () => ({
17+
percent: 0,
18+
show: false,
19+
canSuccess: true,
20+
duration: 3000,
21+
height: '2px',
22+
color: '#77b6ff',
23+
failedColor: 'red'
24+
}),
25+
26+
methods: {
27+
start () {
28+
this.show = true
29+
this.canSuccess = true
30+
if (this._timer) {
31+
clearInterval(this._timer)
32+
this.percent = 0
33+
}
34+
this._cut = 10000 / Math.floor(this.duration)
35+
this._timer = setInterval(() => {
36+
this.increase(this._cut * Math.random())
37+
if (this.percent > 95) {
38+
this.finish()
39+
}
40+
}, 100)
41+
return this
42+
},
43+
set (num) {
44+
this.show = true
45+
this.canSuccess = true
46+
this.percent = Math.floor(num)
47+
return this
48+
},
49+
get () {
50+
return Math.floor(this.percent)
51+
},
52+
increase (num) {
53+
this.percent = this.percent + Math.floor(num)
54+
return this
55+
},
56+
decrease (num) {
57+
this.percent = this.percent - Math.floor(num)
58+
return this
59+
},
60+
finish () {
61+
this.percent = 100
62+
this.hide()
63+
return this
64+
},
65+
pause () {
66+
clearInterval(this._timer)
67+
return this
68+
},
69+
hide () {
70+
clearInterval(this._timer)
71+
this._timer = null
72+
setTimeout(() => {
73+
this.show = false
74+
Vue.nextTick(() => {
75+
setTimeout(() => {
76+
this.percent = 0
77+
}, 200)
78+
})
79+
}, 500)
80+
return this
81+
},
82+
fail () {
83+
this.canSuccess = false
84+
return this
85+
}
86+
}
87+
}
88+
</script>

‎src/components/NavMenu.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div>
3+
<v-toolbar flat>
4+
<v-list>
5+
<v-list-tile>
6+
<v-list-tile-title class="title">
7+
{{ name }}
8+
</v-list-tile-title>
9+
</v-list-tile>
10+
</v-list>
11+
</v-toolbar>
12+
<v-divider></v-divider>
13+
<v-list>
14+
<v-list-tile
15+
value="true"
16+
v-for="(item, i) in items"
17+
:key="i"
18+
:to="item.route"
19+
>
20+
<v-list-tile-action>
21+
<v-icon light v-html="item.icon"></v-icon>
22+
</v-list-tile-action>
23+
<v-list-tile-content>
24+
<v-list-tile-title v-text="item.title"></v-list-tile-title>
25+
</v-list-tile-content>
26+
</v-list-tile>
27+
</v-list>
28+
</div>
29+
</template>
30+
31+
<script>
32+
export default {
33+
data () {
34+
return {
35+
name: this.$t('nav_menu_title'),
36+
items: [
37+
{ title: 'Dashboard', icon: 'dashboard', route: { name: 'home' } },
38+
{ title: 'Account', icon: 'account_box', route: { name: 'settings.profile' } }
39+
]
40+
}
41+
}
42+
}
43+
</script>

‎src/components/PageFooter.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<v-footer :fixed="fixed" app>
3+
<span>&copy; 2017</span>
4+
</v-footer>
5+
</template>
6+
7+
<script>
8+
export default {
9+
data () {
10+
return {
11+
fixed: false
12+
}
13+
}
14+
}
15+
</script>

‎src/components/ProgressBar.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<v-progress-linear
3+
:indeterminate="true"
4+
:color="color"
5+
height="4"
6+
v-if="show"
7+
>
8+
</v-progress-linear>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name: 'progress-bar',
14+
props: {
15+
show: {
16+
type: [Boolean, String],
17+
required: true
18+
},
19+
color: {
20+
type: String,
21+
default: 'accent'
22+
}
23+
}
24+
}
25+
</script>

0 commit comments

Comments
 (0)