Skip to content
This repository was archived by the owner on Dec 5, 2022. It is now read-only.

Commit 8684da8

Browse files
authored
feat: multiple presets (#91)
1 parent 5cfac63 commit 8684da8

File tree

11 files changed

+190
-223
lines changed

11 files changed

+190
-223
lines changed

meta.js

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,18 +78,35 @@ module.exports = {
7878
default: 'MIT',
7979
when: '!inPlace',
8080
},
81-
router: {
82-
type: 'confirm',
83-
label: 'Install vue-router? (experimental)',
84-
default: false,
81+
preset: {
82+
type: 'list',
83+
label: 'Select a preset (more coming soon)',
84+
choices: [
85+
'Simple',
86+
'TabView',
87+
'SideDrawer',
88+
],
89+
default: 'Simple',
8590
when: '!inPlace',
8691
},
92+
// router: {
93+
// type: 'confirm',
94+
// label: 'Install vue-router? (experimental)',
95+
// default: false,
96+
// when: '!inPlace',
97+
// },
8798
store: {
8899
type: 'confirm',
89100
label: 'Install vuex? (state management)',
90101
default: false,
91102
when: '!inPlace',
92103
},
104+
devtools: {
105+
type: 'confirm',
106+
label: 'Install vue-devtools?',
107+
default: true,
108+
when: '!inPlace',
109+
},
93110
color_scheme: {
94111
type: 'list',
95112
label: 'Color scheme',
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
33
<color name="ns_primary">#F5F5F5</color>
4-
<color name="ns_primaryDark">#757575</color>
5-
<color name="ns_accent">#33B5E5</color>
4+
<color name="ns_primaryDark">#53ba82</color>
5+
<color name="ns_accent">#33B5E5</color>
66
<color name="ns_blue">#272734</color>
7-
</resources>
7+
</resources>

template/app/components/App.vue

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
{{#if_eq preset "Simple"}}<template>
2+
<Page>
3+
<ActionBar title="Welcome to NativeScript-Vue!"/>
4+
<GridLayout colums="*" rows="*">
5+
<Label class="message" :text="msg" col="0" row="0"/>
6+
</GridLayout>
7+
</Page>
8+
</template>
9+
10+
<script>
11+
export default {
12+
data() {
13+
return {
14+
msg: 'Hello World!'
15+
}
16+
}
17+
}
18+
</script>
19+
20+
<style scoped>
21+
ActionBar {
22+
background-color: #53ba82;
23+
color: #ffffff;
24+
}
25+
26+
.message {
27+
vertical-align: center;
28+
text-align: center;
29+
font-size: 20;
30+
color: #333333;
31+
}
32+
</style>{{/if_eq}}{{#if_eq preset "TabView"}}<template>
33+
<Page>
34+
<ActionBar title="Welcome to NativeScript-Vue!" android:flat="true"/>
35+
<TabView android:tabBackgroundColor="#53ba82"
36+
android:tabTextColor="#c4ffdf"
37+
android:selectedTabTextColor="#ffffff"
38+
androidSelectedTabHighlightColor="#ffffff">
39+
<TabViewItem title="Tab 1">
40+
<GridLayout colums="*" rows="*">
41+
<Label class="message" :text="msg" col="0" row="0"/>
42+
</GridLayout>
43+
</TabViewItem>
44+
<TabViewItem title="Tab 2">
45+
<GridLayout colums="*" rows="*">
46+
<Label class="message" text="Tab 2 Content" col="0" row="0"/>
47+
</GridLayout>
48+
</TabViewItem>
49+
<TabViewItem title="Tab 3">
50+
<GridLayout colums="*" rows="*">
51+
<Label class="message" text="Tab 3 Content" col="0" row="0"/>
52+
</GridLayout>
53+
</TabViewItem>
54+
</TabView>
55+
</Page>
56+
</template>
57+
58+
<script>
59+
export default {
60+
data() {
61+
return {
62+
msg: 'Hello World!'
63+
}
64+
}
65+
}
66+
</script>
67+
68+
<style scoped>
69+
ActionBar {
70+
background-color: #53ba82;
71+
color: #ffffff;
72+
}
73+
74+
.message {
75+
vertical-align: center;
76+
text-align: center;
77+
font-size: 20;
78+
color: #333333;
79+
}
80+
</style>{{/if_eq}}{{#if_eq preset "SideDrawer"}}<template>
81+
<Page>
82+
<ActionBar>
83+
<GridLayout width="100%" columns="auto, *">
84+
<Label text="MENU" @tap="$refs.drawer.nativeView.showDrawer()" col="0"/>
85+
<Label class="title" text="Welcome to NativeScript-Vue!" col="1"/>
86+
</GridLayout>
87+
</ActionBar>
88+
89+
<RadSideDrawer ref="drawer">
90+
<StackLayout ~drawerContent backgroundColor="#ffffff">
91+
<Label class="drawer-header" text="Drawer"/>
92+
93+
<Label class="drawer-item" text="Item 1"/>
94+
<Label class="drawer-item" text="Item 2"/>
95+
<Label class="drawer-item" text="Item 3"/>
96+
</StackLayout>
97+
98+
<GridLayout ~mainContent colums="*" rows="*">
99+
<Label class="message" :text="msg" col="0" row="0"/>
100+
</GridLayout>
101+
</RadSideDrawer>
102+
</Page>
103+
</template>
104+
105+
<script>
106+
export default {
107+
data() {
108+
return {
109+
msg: 'Hello World!'
110+
}
111+
}
112+
}
113+
</script>
114+
115+
<style scoped>
116+
ActionBar {
117+
background-color: #53ba82;
118+
color: #ffffff;
119+
}
120+
121+
.title {
122+
text-align: left;
123+
padding-left: 16;
124+
}
125+
126+
.message {
127+
vertical-align: center;
128+
text-align: center;
129+
font-size: 20;
130+
color: #333333;
131+
}
132+
133+
.drawer-header {
134+
padding: 50 16 16 16;
135+
margin-bottom: 16;
136+
background-color: #53ba82;
137+
color: #ffffff;
138+
font-size: 24;
139+
}
140+
141+
.drawer-item {
142+
padding: 8 16;
143+
color: #333333;
144+
font-size: 16;
145+
}
146+
</style>{{/if_eq}}

template/app/components/Counter.vue

Lines changed: 0 additions & 38 deletions
This file was deleted.

template/app/components/HelloWorld.vue

Lines changed: 0 additions & 39 deletions
This file was deleted.

template/app/components/Home.vue

Lines changed: 0 additions & 13 deletions
This file was deleted.

template/app/main.js

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,14 @@
1-
import Vue from 'nativescript-vue';
2-
3-
{{#router}}
4-
import router from './router';
5-
{{else}}
6-
{{#store}}
7-
import Counter from './components/Counter';
8-
{{else}}
9-
import HelloWorld from './components/HelloWorld';
10-
{{/store}}
11-
{{/router}}
12-
13-
{{#store}}
14-
import store from './store';
15-
{{/store}}
16-
17-
import './styles.scss';
18-
1+
import Vue from 'nativescript-vue'
2+
import App from './components/App'
3+
{{#devtools}}import VueDevtools from 'nativescript-vue-devtools'
4+
5+
if(TNS_ENV !== 'production') {
6+
Vue.use(VueDevtools)
7+
}
8+
{{/devtools}}
199
// Prints Vue logs when --env.production is *NOT* set while building
20-
Vue.config.silent = (TNS_ENV === 'production');
10+
Vue.config.silent = (TNS_ENV === 'production')
2111

2212
new Vue({
23-
24-
{{#router}}
25-
router,
26-
template: `<Frame><router-view/></Frame>`,
27-
{{else}}
28-
render: h => h('frame',[h({{#store}}Counter{{else}}HelloWorld{{/store}})]),
29-
{{/router}}
30-
31-
{{#store}}
32-
store,
33-
{{/store}}
34-
35-
}).$start();
13+
render: h => h('frame', [h(App)])
14+
}).$start()

template/app/router/index.js

Lines changed: 0 additions & 43 deletions
This file was deleted.

0 commit comments

Comments
 (0)