Skip to content

Commit 15141f0

Browse files
farfromrefugfarfromrefug
committed
test: demo vue fix
1 parent 3c25475 commit 15141f0

File tree

8 files changed

+237
-51
lines changed

8 files changed

+237
-51
lines changed

‎demo-vue/app/app.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Vue from 'nativescript-vue';
2+
import App from './components/App.vue';
3+
import Home from './components/Home.vue';
4+
5+
// import { Label as HTMLLabel } from 'nativescript-htmllabel'; // require first to get Font res loading override
6+
// Vue.registerElement('Label', () => HTMLLabel);
7+
8+
import CollectionView from '@nativescript-community/ui-collectionview/vue';
9+
Vue.use(CollectionView);
10+
// Prints Vue logs when --env.production is *NOT* set while building
11+
Vue.config.silent = true;
12+
// Vue.config.silent = (TNS_ENV === 'production')
13+
14+
new Vue({
15+
render: h => h(App)
16+
}).$start();

‎demo-vue/app/components/App.vue‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<template>
2+
<Page>
3+
<StackLayout>
4+
<Label :text="currentSection" height="60" width="100%" backgroundColor="red" />
5+
<CollectionView width="100%" height="100%" colWidth="50%" ref="listView" :items="itemList" @itemTap="onItemTap" itemIdGenerator="index" :spanSize="index => (index % 5 === 0 ? 2 : 1)">
6+
<v-template if="$index % 5 === 0">
7+
<Label fontSize="17" :text="item.title" verticalAlignment="center" height="30" />
8+
</v-template>
9+
<v-template>
10+
<GridLayout columns="16,auto,*,auto,16" rows="12,auto,*,auto" rippleColor="red" backgroundColor="white" height="80">
11+
<Label
12+
v-show="!!item.leftIcon"
13+
col="1"
14+
row="0"
15+
rowSpan="5"
16+
fontSize="24"
17+
marginRight="16"
18+
textAlignment="left"
19+
:text="item.leftIcon"
20+
horizontalAlignment="left"
21+
verticalAlignment="center"
22+
color="gray"
23+
class="mdi"
24+
/>
25+
<Image
26+
v-show="item.avatar"
27+
backgroundColor="gray"
28+
col="1"
29+
row="1"
30+
rowSpan="3"
31+
width="40"
32+
height="40"
33+
stretch="aspectFill"
34+
marginRight="16"
35+
:src="item.avatar"
36+
verticalAlignment="center"
37+
borderRadius="20"
38+
android:roundAsCircle="true"
39+
/>
40+
41+
<StackLayout col="2" row="1" rowSpan="2" verticalAlignment="center">
42+
<Label col="2" row="1" :fontSize="10" v-show="!!item.overText" :text="item.overText | uppercase" verticalAlignment="center" color="gray" />
43+
<Label :fontSize="17" :text="item.title" textWrap="true" verticalTextAlignment="top" maxLines="2" lineBreak="end" />
44+
<Label v-show="!!item.subtitle" :fontSize="14" :text="item.subtitle" verticalTextAlignment="top" color="gray" maxLines="2" lineBreak="end" />
45+
</StackLayout>
46+
47+
<Label col="3" row="1" fontSize="10" v-show="!!item.date" :text="item.date" verticalAlignment="top" />
48+
<GridLayout col="3" row="1" rowSpan="2" verticalAlignment="center">
49+
<Label v-show="!!item.rightIcon" class="mdi" :fontSize="24" textAlignment="right" color="gray" :text="item.rightIcon" verticalAlignment="center" />
50+
<Button variant="flat" v-show="!!item.rightButton" class="icon-themed-btn" :text="item.rightButton" verticalAlignment="center" @tap="$emit('rightTap')" />
51+
</GridLayout>
52+
53+
<AbsoluteLayout row="3" colSpan="5" marginTop="12" marginLeft="20" backgroundColor="gray" height="1" verticalAlignment="bottom" />
54+
</GridLayout>
55+
</v-template>
56+
</CollectionView>
57+
</StackLayout>
58+
</Page>
59+
</template>
60+
61+
<script lang="ts">
62+
const DetailsPage = {
63+
template: `
64+
<Page>
65+
<ActionBar class="action-bar" title="Details Page">
66+
<ActionItem text="Action"></ActionItem>
67+
</ActionBar>
68+
<StackLayout>
69+
<Label :text="'Details ' + Math.random()" />
70+
<Button text="another" @tap="openDetails" />
71+
<Button text="back" @tap="goBack" />
72+
</StackLayout>
73+
</Page>
74+
`,
75+
76+
methods: {
77+
openDetails() {
78+
this.$navigateTo(DetailsPage);
79+
},
80+
goBack() {
81+
this.$navigateBack();
82+
}
83+
}
84+
};
85+
86+
export default {
87+
data() {
88+
const items = [];
89+
for (let loop = 0; loop < 1000; loop++) {
90+
items.push({
91+
// width: loop % 5 === 0 ? '100%' : '50%',
92+
index: loop,
93+
leftIcon: 'mdi-magnify',
94+
title: 'title ' + loop.toString(),
95+
subtitle: 'subtitle ' + loop.toString()
96+
// visible: loop % 10 !== 0
97+
});
98+
}
99+
return {
100+
currentSection: 0,
101+
itemList: items
102+
};
103+
},
104+
methods: {
105+
onItemTap({ index, item }) {
106+
console.log(`Tapped on ${index} ${item.title}`);
107+
this.$navigateTo(DetailsPage);
108+
},
109+
logEvent(e) {
110+
console.log('logEvent', e.eventName, e.extraData);
111+
}
112+
// onDisplayEvent(e) {
113+
// console.log('onDisplayEvent', e.eventName, e.index);
114+
// if (e.index % 5 === 0 && this.currentSection !== e.index) {
115+
// // this.currentSection = e.index;
116+
// }
117+
// }
118+
// itemIdGenerator(item, i) {
119+
// return item.index;
120+
// }
121+
}
122+
};
123+
</script>
124+
125+
<style scoped>
126+
ActionBar {
127+
background-color: #53ba82;
128+
color: #ffffff;
129+
}
130+
131+
.message {
132+
vertical-align: center;
133+
text-align: center;
134+
font-size: 20;
135+
color: #333333;
136+
}
137+
</style>

‎demo-vue/app/components/Home.vue‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,17 @@
55
</ActionBar>
66

77
<GridLayout>
8-
<CollectionView
8+
<CollectionView
99
iosOverflowSafeArea="true"
10-
:items="itemList"
11-
@itemTap="onItemTap"
10+
:items="itemList"
11+
@itemTap="onItemTap"
1212
@loadMoreItems="onLoadMoreItems"
1313
@itemLoadingEvent="onItemLoadingEvent"
14-
itemIdGenerator="index"
15-
colWidth="50%"
14+
itemIdGenerator="index"
15+
colWidth="50%"
1616
rowHeight="200"
1717
>
18-
<v-template >
18+
<v-template>
1919
<GridLayout rows="*, auto" :backgroundColor="item.color" class="item">
2020
<StackLayout row="1">
2121
<Label row="1" :text="item.name" class="title" />
@@ -29,7 +29,7 @@
2929
</template>
3030

3131
<script>
32-
export default {
32+
export default {
3333
data() {
3434
const items = [
3535
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
@@ -68,28 +68,25 @@
6868
console.log('logEvent', e.eventName, e.extraData);
6969
}
7070
}
71-
72-
};
71+
};
7372
</script>
7473

7574
<style scoped lang="scss">
75+
ActionBar {
76+
background-color: #42b883;
77+
}
7678
77-
ActionBar {
78-
background-color: #42b883;
79-
}
80-
81-
.item {
82-
padding: 10;
83-
color: white;
79+
.item {
80+
padding: 10;
81+
color: white;
8482
85-
.title {
86-
font-size: 17;
87-
font-weight: bold;
88-
}
89-
90-
.subtitle {
91-
font-size: 14;
92-
}
83+
.title {
84+
font-size: 17;
85+
font-weight: bold;
9386
}
9487
88+
.subtitle {
89+
font-size: 14;
90+
}
91+
}
9592
</style>

‎demo-vue/app/vue-shims.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.vue' {
2+
import Vue from 'vue';
3+
export const title;
4+
export default Vue;
5+
}

‎demo-vue/jsconfig.json‎

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

‎demo-vue/nativescript.config.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { NativeScriptConfig } from '@nativescript/core';
22

33
export default {
4-
id: 'org.nativescript.vuedemo',
5-
appResourcesPath: 'App_Resources',
6-
android: {
7-
v8Flags: '--expose_gc',
8-
markingMode: 'none'
9-
}
10-
} as NativeScriptConfig;
4+
id: 'org.nativescript.vuedemo',
5+
appResourcesPath: 'App_Resources',
6+
profiling: 'timeline',
7+
android: {
8+
v8Flags: '--expose_gc',
9+
markingMode: 'none'
10+
}
11+
} as NativeScriptConfig;

‎demo-vue/package.json‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
"publishConfig": {
1515
"access": "public"
1616
},
17+
"scripts": {
18+
"run.android.production": "cross-var tns run android --clean --bundle --release --key-store-path $KEYSTORE_PATH --key-store-password $KEYSTORE_PASSWORD --key-store-alias $KEYSTORE_ALIAS --key-store-alias-password $KEYSTORE_ALIAS_PASSWORD --env.adhoc"
19+
},
1720
"keywords": [
1821
"nstudio",
1922
"nativescript",
@@ -28,23 +31,24 @@
2831
"category-general"
2932
],
3033
"dependencies": {
31-
"@nativescript/core": "~7.0.0",
32-
"@nativescript/theme": "~2.3.0",
3334
"@nativescript-community/ui-collectionview": "../plugin",
34-
"nativescript-vue": "~2.8.0"
35+
"@nativescript/core": "~7.0.13",
36+
"@nativescript/theme": "~3.0.0",
37+
"nativescript-vue": "~2.8.1"
3538
},
3639
"devDependencies": {
37-
"@babel/core": "~7.1.0",
38-
"@babel/preset-env": "~7.1.0",
40+
"@babel/core": "~7.1.6",
41+
"@babel/preset-env": "~7.1.6",
3942
"@nativescript/android": "7.0.1",
4043
"@nativescript/ios": "7.0.4",
41-
"@nativescript/webpack": "~3.0.0",
42-
"babel-loader": "~8.0.0",
43-
"nativescript-vue-template-compiler": "~2.8.0",
44-
"node-sass": "^4.7.1",
45-
"vue-loader": "~15.9.3"
44+
"@nativescript/webpack": "~3.0.8",
45+
"babel-loader": "~8.1.0",
46+
"cross-var": "^1.1.0",
47+
"nativescript-vue-template-compiler": "~2.8.1",
48+
"node-sass": "^4.14.1",
49+
"vue-loader": "~15.9.4"
4650
},
4751
"gitHead": "f282c57dc05817a655bca5e81ce9d7228ae70d4c",
4852
"private": "true",
4953
"readme": "NativeScript Application"
50-
}
54+
}

‎demo-vue/tsconfig.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"target": "es2017",
5+
"moduleResolution": "node",
6+
"allowSyntheticDefaultImports": true,
7+
"esModuleInterop": false,
8+
"experimentalDecorators": true,
9+
"emitDecoratorMetadata": true,
10+
"noEmitHelpers": true,
11+
"noEmitOnError": true,
12+
"skipLibCheck": true,
13+
"lib": [
14+
"es6",
15+
"dom",
16+
"es2017"
17+
],
18+
"types": [
19+
"svelte"
20+
],
21+
"baseUrl": ".",
22+
"paths": {
23+
"~/*": [
24+
"app/*"
25+
]
26+
}
27+
},
28+
"include": [
29+
"app/**/*"
30+
],
31+
"exclude": [
32+
"node_modules",
33+
"platforms"
34+
]
35+
}

0 commit comments

Comments
 (0)