Skip to content

Commit 3d75959

Browse files
farfromrefugfarfromrefug
committed
test: demo app show vue issue
1 parent db3fd52 commit 3d75959

File tree

7 files changed

+128
-57
lines changed

7 files changed

+128
-57
lines changed

‎demo-vue/app/app.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import Vue from 'nativescript-vue';
22
import App from './components/App.vue';
3+
import { Trace } from '@nativescript/core';
4+
import {CollectionViewTraceCategory } from '@nativescript-community/ui-collectionview';
35

46
import CollectionView from '@nativescript-community/ui-collectionview/vue';
57
Vue.use(CollectionView);
8+
Trace.addCategories(CollectionViewTraceCategory);
9+
Trace.enable();
610

711
Vue.config.silent = true;
812

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

Lines changed: 75 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -8,68 +8,91 @@
88
<CollectionView
99
automationText="collectionView"
1010
iosOverflowSafeArea="true"
11-
:items="itemList"
12-
@itemTap="onItemTap"
13-
@loadMoreItems="onLoadMoreItems"
14-
@itemLoadingEvent="onItemLoadingEvent"
15-
itemIdGenerator="index"
16-
colWidth="50%"
17-
rowHeight="200"
11+
:items="items"
12+
@loaded="onLoaded"
13+
rowHeight="50"
1814
>
1915
<v-template>
20-
<GridLayout rows="*, auto" :backgroundColor="item.color" class="item">
21-
<StackLayout row="1">
22-
<Label row="1" :text="item.name" class="title" />
23-
<Label row="1" :text="item.color" class="subtitle" />
24-
</StackLayout>
25-
</GridLayout>
16+
<ListItem :rightValue="itemConnected(item)" :title="itemTitle(item)" :subtitle="itemSubtitle(item)" />
2617
</v-template>
2718
</CollectionView>
2819
</GridLayout>
2920
</Page>
3021
</template>
3122

32-
<script>
33-
export default {
34-
data() {
35-
const items = [
36-
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
37-
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
38-
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
39-
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
40-
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
41-
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
42-
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
43-
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
44-
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
45-
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
46-
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
47-
{ index: 11, name: 'CARROT', color: '#e67e22' },
48-
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
49-
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
50-
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
51-
{ index: 15, name: 'ORANGE', color: '#f39c12' },
52-
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
53-
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
54-
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
55-
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
56-
];
57-
return {
58-
itemList: items
23+
<script lang="ts">
24+
import { ObservableArray } from '@nativescript/core';
25+
import { Component, Prop } from 'vue-property-decorator';
26+
27+
import Vue from 'nativescript-vue';
28+
import ListItem from './ListItem.vue';
29+
30+
@Component({
31+
components: { ListItem }
32+
})
33+
export default class App extends Vue {
34+
items = new ObservableArray([
35+
{ index: 0, name: 'TURQUOISE', color: '#1abc9c', subTitle: '', connected: true },
36+
{ index: 1, name: 'EMERALD', color: '#2ecc71', subTitle: '', connected: false },
37+
{ index: 2, name: 'PETER RIVER', color: '#3498db', subTitle: '', connected: true },
38+
{ index: 3, name: 'AMETHYST', color: '#9b59b6', subTitle: '' , connected: false},
39+
{ index: 4, name: 'WET ASPHALT', color: '#34495e', subTitle: '', connected: false }
40+
// { index: 5, name: 'GREEN SEA', color: '#16a085' },
41+
// { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
42+
// { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
43+
// { index: 8, name: 'WISTERIA', color: '#8e44ad' },
44+
// { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
45+
// { index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
46+
// { index: 11, name: 'CARROT', color: '#e67e22' },
47+
// { index: 12, name: 'ALIZARIN', color: '#e74c3c' },
48+
// { index: 13, name: 'CLOUDS', color: '#ecf0f1' },
49+
// { index: 14, name: 'CONCRETE', color: '#95a5a6' },
50+
// { index: 15, name: 'ORANGE', color: '#f39c12' },
51+
// { index: 16, name: 'PUMPKIN', color: '#d35400' },
52+
// { index: 17, name: 'POMEGRANATE', color: '#c0392b' },
53+
// { index: 18, name: 'SILVER', color: '#bdc3c7' },
54+
// { index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
55+
]);
56+
get itemTitle() {
57+
return item => item.name;
58+
}
59+
get itemSubtitle() {
60+
return item => item.subTitle || item.UUID;
61+
}
62+
get itemConnected() {
63+
return item => {
64+
console.log('itemConnected', item.index, item.connected);
65+
return (item.connected ? 'connected' : 'disconnected')
5966
};
60-
},
61-
methods: {
62-
onItemTap({ index, item }) {
63-
console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
64-
},
65-
onLoadMoreItems() {
66-
console.log('EVENT TRIGGERED: onLoadMoreItems()');
67-
},
68-
logEvent(e) {
69-
console.log('logEvent', e.eventName, e.extraData);
70-
}
7167
}
72-
};
68+
onLoaded() {
69+
// start to stress timer
70+
setInterval(() => {
71+
const index = Math.round(Math.random() * 4);
72+
73+
this.items.some((d, i) => {
74+
if (i === index) {
75+
d.subTitle = Math.random().toFixed(2) + 'asdasdagƒ';
76+
this.items.setItem(index, d);
77+
return true;
78+
}
79+
return false;
80+
});
81+
// const item = this.items.getItem(index);
82+
// item.name = Math.random() + '';
83+
// this.items.setItem(index, item);
84+
}, 100);
85+
}
86+
onItemTap({ index, item }) {
87+
console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
88+
}
89+
onLoadMoreItems() {
90+
console.log('EVENT TRIGGERED: onLoadMoreItems()');
91+
}
92+
logEvent(e) {
93+
console.log('logEvent', e.eventName, e.extraData);
94+
}
95+
}
7396
</script>
7497

7598
<style scoped lang="scss">

‎demo-vue/app/components/ListItem.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Component, Prop } from 'vue-property-decorator';
2+
import Vue from 'nativescript-vue';
3+
4+
@Component({
5+
inheritAttrs: false
6+
})
7+
export default class ListItem extends Vue {
8+
@Prop({})
9+
title: string;
10+
@Prop({})
11+
subtitle: string;
12+
@Prop({})
13+
date: string;
14+
@Prop({})
15+
rightValue: string;
16+
17+
@Prop({ default: false })
18+
selected: boolean;
19+
20+
onLongPress(event) {
21+
// this.selected = !this.selected;
22+
this.$emit('longPress', event);
23+
}
24+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<GridLayout
3+
columns="20%,*,auto,20%"
4+
rows="*,auto,auto,*,1"
5+
:rippleColor="accentColor"
6+
:backgroundColor="selected ? accentColor : undefined"
7+
@tap="$emit('tap', $event)"
8+
@longPress="onLongPress($event)"
9+
>
10+
<Label col="1" row="1" fontSize="16" :text="title" verticalAlignment="center" textWrap maxLines="2" />
11+
<Label v-show="!!subtitle" col="1" row="2" fontSize="14" class="roboto" :text="subtitle" verticalAlignment="top" />
12+
<Label col="2" row="1" fontSize="12" class="roboto" :text="date" verticalAlignment="top" />
13+
<Label backgroundColor="red" col="2" rowSpan="4" v-show="!!rightValue" class="listRightValue" :text="rightValue" />
14+
15+
</GridLayout>
16+
</template>
17+
18+
<script lang="ts" src="./ListItem.ts"></script>

‎demo-vue/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@
3535
"@nativescript/core": "~7.0.13",
3636
"@nativescript/detox": "~1.0.0",
3737
"@nativescript/theme": "~3.0.0",
38-
"nativescript-vue": "~2.8.1"
38+
"nativescript-vue": "~2.8.1",
39+
"vue-class-component": "^7.2.6",
40+
"vue-property-decorator": "^9.1.2"
3941
},
4042
"devDependencies": {
4143
"@babel/core": "~7.1.6",

‎demo-vue/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"es2017"
1717
],
1818
"types": [
19-
"svelte"
19+
"vue"
2020
],
2121
"baseUrl": ".",
2222
"paths": {

‎demo-vue/webpack.config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,9 @@ module.exports = env => {
8888
entries.bundle = entryPath;
8989

9090
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
91-
if (platform === "ios" && !areCoreModulesExternal && !testing) {
92-
entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
93-
};
91+
// if (platform === "ios" && !areCoreModulesExternal && !testing) {
92+
// entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
93+
// };
9494
console.log(`Bundling application for entryPath ${entryPath}...`);
9595

9696
let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);

0 commit comments

Comments
 (0)