Skip to content

Commit ece1ac8

Browse files
farfromrefugfarfromrefug
committed
demo: update
1 parent feff416 commit ece1ac8

File tree

13 files changed

+316
-83
lines changed

13 files changed

+316
-83
lines changed

‎demo-vue/app/App_Resources/iOS/build.xcconfig

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,5 @@
66
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
77
ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
88
IPHONEOS_DEPLOYMENT_TARGET = 12.0
9+
10+
DEVELOPMENT_TEAM = 3UUB5NM43K

‎demo-vue/app/examples/AutoSize.vue

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,23 @@
88
<HTMLLabel
99
ref="textView"
1010
:text="text"
11-
:textWrap="true"
12-
lineBreak="end"
13-
textAlignment="center" verticalTextAlignment="center" fontSize="20" :autoFontSize="true" backgroundColor="red" />
11+
textWrap="true"
12+
textAlignment="center" verticalTextAlignment="center" :autoFontSize="true" backgroundColor="red" selectable="true" lineBreak="end" :class="testClass"/>
1413
<Button ref="nextButton" row="4" text="next" @onTap="onTap" />
1514

1615
</GridLayout>
1716

1817

1918
</Page>
2019
</template>
20+
<style scoped>
2121
22+
.testClass {
23+
font-size: 40;
24+
color: green;
25+
}
26+
27+
</style>
2228
<script lang="ts">
2329
import { Frame } from '@nativescript/core';
2430
import Vue from 'vue';
@@ -30,6 +36,7 @@ export default Vue.extend({
3036
return {
3137
title: title,
3238
index:0,
39+
testClass:'testClass',
3340
text:'247 characters azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiof'
3441
};
3542
},
@@ -38,6 +45,9 @@ export default Vue.extend({
3845
Frame.topmost().goBack();
3946
},
4047
onTap(event) {
48+
// this.testClass = this.testClass ? null: 'testClass';
49+
// console.log('onTap', this.testClass)
50+
// return;
4151
this.index = (this.index+1) %3;
4252
console.log('onTap', this.index)
4353
switch(this.index) {
@@ -47,7 +57,7 @@ export default Vue.extend({
4757
break;
4858
case 1:
4959
this.text='this is a test text'
50-
this.$refs.textView.nativeView.style = 'font-size:48pt;'
60+
this.$refs.textView.nativeView.style = 'font-size:88pt;'
5161
break;
5262
case 2:
5363
this.text='247 characters azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiof'

‎demo-vue/app/examples/Base.vue

Lines changed: 77 additions & 11 deletions
Large diffs are not rendered by default.

‎demo-vue/app/examples/LinkTap.vue

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,48 @@
55
</ActionBar>
66
<ScrollView>
77
<StackLayout>
8-
<HTMLLabel textAlignment="left" width="100%" margin="50">
8+
<HTMLLabel textAlignment="left" width="100%" margin="50" backgroundColor="red">
99
<Span text="Click to open link" @linkTap="openLink">
1010
</Span>
1111
</HTMLLabel>
1212
<!-- Centered label with multiple lines -->
13-
<HTMLLabel textAlignment="center" textWrap="true" margin="50">
13+
<HTMLLabel horizontalAlignment="center" textAlignment="center" textWrap="true" width="80%" height="290" paddingRight="10" verticalTextAlignment="top" backgroundColor="yellow" fontSize='12' paddingTop="20" autoFontSize="true" selectable="true" borderWidth="30">
14+
<!-- <FormattedString> -->
1415
<Span text="I am a paragraph with looots of words that wastes your time reading because I'm a humble little sample. If you are brave enough to lose more time, click this">
1516
</Span>
1617
<Span text=" link" @linkTap="openLink">
1718
</Span>
19+
<!-- </FormattedString> -->
1820
</HTMLLabel>
1921
<!-- Centered label with multiple lines -->
2022
<HTMLLabel textAlignment="center" margin="50" html="<a href='urltest'>toot</a>" @linkTap="openLink">
2123
</HTMLLabel>
24+
<HTMLLabel text="This is a test" color="#ff0000" row="0"/>
25+
26+
<HTMLLabel html="This is a test" color="#ff0000" row="1"/>
27+
28+
<HTMLLabel
29+
:html="someBindedUrl"
30+
linkColor="#ff0000"
31+
linkUnderline="false"
32+
fontFamily="OpenSans"
33+
fontSize="16"
34+
margin="2 5 5 5"
35+
textWrap="true"
36+
row="2"
37+
@linkTap="openLink"
38+
></HTMLLabel>
39+
40+
<HTMLLabel
41+
:html="someBindedUrl"
42+
linkColor="#ff0000"
43+
fontFamily="OpenSans"
44+
fontSize="16"
45+
margin="2 5 5 5"
46+
textWrap="true"
47+
row="3"
48+
@linkTap="openLink"
49+
></HTMLLabel>
2250
</StackLayout>
2351
</ScrollView>
2452
</Page>
@@ -33,7 +61,8 @@ export const title = 'LinkTap sample';
3361
export default Vue.extend({
3462
data() {
3563
return {
36-
title: title
64+
title: title,
65+
someBindedUrl: '<a href=\"https://youtube.com\">Open Youtube.com</a> + <a href=\"https://google.com\">Open Google.com</a>'
3766
};
3867
},
3968
methods: {

‎demo-vue/app/examples/PerfsTest.vue

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<Page>
3+
<ScrollView>
4+
<StackLayout>
5+
<FlexboxLayout
6+
style="height: 50dip; flex-shrink: 0; align-items: center; justify-content: space-between; background-color: orange;"
7+
>
8+
<FlexboxLayout
9+
style="margin: 10dip; height: 10dip; flex-shrink: 0; border-width: 2dip; border-color: white; padding: 4dip; font-weight: bold; color: white;"
10+
>
11+
<Label disableCss="true" text="Y" />
12+
</FlexboxLayout>
13+
14+
<FlexboxLayout style="flex-shrink: 2; flex-direction: column;">
15+
<Label disableCss="true" style="font-size: 16dip; font-weight: bold; max-lines: 0;" text="Hacker News" />
16+
<Label disableCss="true" style="font-size: 12dip; max-lines: 0;" text="new | threads | past | comments | ask | show | jobs | submit" />
17+
</FlexboxLayout>
18+
<FlexboxLayout style="flex-shrink: 1;">
19+
<Label disableCss="true" style="max-lines: 0;" text="LinguaBrowse (336) | logout" />
20+
</FlexboxLayout>
21+
</FlexboxLayout>
22+
<GridLayout v-for="index in 100" :key="index + ''" backgroundColor="white"
23+
padding="10"
24+
columns="auto,*"
25+
rows="auto,auto"
26+
>
27+
<Label disableCss="true" text="1. ▲" marginRight="1" color="gray" verticalAlignment="top"/>
28+
<Label disableCss="true" col="1" fontSize="12" lineHeight="1" maxLines="0" color="black">
29+
<FormattedString>
30+
<Span text="Largest island in a lake on an island in a lake on an island" />
31+
<Span text="(elbruz.org)" />
32+
<Span fontSize="14" :text="'\n' + '123 points by whoever 3 hours ago | flag | hide | 12 comments'" />
33+
</FormattedString>
34+
</Label >
35+
</GridLayout>
36+
37+
38+
</StackLayout>
39+
</ScrollView>
40+
</Page>
41+
</template>
42+
<script lang="ts">
43+
import { getExamples } from '../examples';
44+
import Vue from 'vue';
45+
// import BottomSheetInnerVue from './BottomSheetInner.vue';
46+
import { NativeScriptVue } from 'nativescript-vue';
47+
48+
export default Vue.extend({
49+
name: 'Home',
50+
data() {
51+
return {
52+
counter:0,
53+
someBindedUrl: '<a href=\"https://youtube.com\">Open Youtube.com</a>',
54+
color:'yellow',
55+
examples: getExamples()
56+
};
57+
},
58+
computed: {
59+
htmlText() {
60+
return `<span style="font-weight:800;">collect</span><br><span style="font-weight:800;color:red;">${this.counter}</span>dabbas`
61+
}
62+
},
63+
methods: {
64+
async goToExample({ item }) {
65+
console.log('goToExample', !!item.component)
66+
try {
67+
this.$navigateTo(item.component);
68+
69+
} catch (error) {
70+
console.error(error)
71+
}
72+
},
73+
// showBottomSheet() {
74+
// (this as NativeScriptVue).$showBottomSheet(BottomSheetInnerVue, {
75+
// // transparent: true,
76+
// closeCallback: (...args) => {
77+
// console.log('bottom sheet closed', args);
78+
// }
79+
// });
80+
81+
// }
82+
}
83+
});
84+
</script>

‎demo-vue/app/examples/Tests.vue

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<Page>
3+
<ActionBar :title="title">
4+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
5+
</ActionBar>
6+
<ScrollView>
7+
<StackLayout>
8+
<Label/>
9+
<HTMLLabel fontSize="20" width="100%" backgroundColor="red" height="100" lineHeight="0" color="green" textWrap="true" html='Hello <strong>World</strong>!' verticalTextAlignment="top"/>
10+
<HTMLLabel fontSize="10" width="100%" backgroundColor="green" height="100" color="black" textWrap="true" text="left textAlignment, center verticalAlignment" verticalTextAlignment="center"/>
11+
<HTMLLabel fontSize="20" width="100%" backgroundColor="blue" height="100" color="black" textWrap="true" text="left textAlignment, bottom verticalAlignment" verticalTextAlignment="bottom"/>
12+
<HTMLLabel fontSize="20" width="100%" backgroundColor="red" isUserInteractionEnabled="false" height="100" textAlignment="right" color="black" textWrap="false" text="right textAlignment, top verticalAlignment" verticalTextAlignment="top"/>
13+
<HTMLLabel fontSize="20" width="100%" backgroundColor="green" height="100" color="black" textWrap="false" text="left textAlignment, center verticalAlignment" verticalTextAlignment="center"/>
14+
<HTMLLabel fontSize="20" width="100%" backgroundColor="yellow" height="100" color="black" textWrap="false" verticalTextAlignment="center">
15+
<Span text="left textAlignment"/>
16+
<Span text=", center verticalAlignment" color="red" fontSize="20"/>
17+
</HTMLLabel>
18+
<HTMLLabel fontSize="20" width="100%" backgroundColor="blue" height="100" textAlignment="center" color="black" textWrap="false" text="center textAlignment, bottom verticalAlignment" verticalTextAlignment="bottom"/>
19+
20+
</StackLayout>
21+
</ScrollView>
22+
23+
24+
</Page>
25+
</template>
26+
27+
<script lang="ts">
28+
import { Frame } from '@nativescript/core';
29+
import Vue from 'vue';
30+
31+
export const title = 'verticalAlignment sample';
32+
33+
export default Vue.extend({
34+
data() {
35+
return {
36+
title: title
37+
};
38+
},
39+
methods: {
40+
onNavigationButtonTap() {
41+
Frame.topmost().goBack();
42+
}
43+
}
44+
});
45+
</script>

‎demo-vue/app/examples/VerticalAlignment.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
</ActionBar>
66
<ScrollView>
77
<StackLayout>
8-
<HTMLLabel fontSize="20" width="100%" backgroundColor="red" height="100" lineHeight="0" color="green" textWrap="true" html='Hello <strong>World</strong>!' verticalTextAlignment="top"/>
9-
<HTMLLabel fontSize="10" width="100%" backgroundColor="green" height="100" color="black" textWrap="true" text="left textAlignment, center verticalAlignment" verticalTextAlignment="center"/>
10-
<HTMLLabel fontSize="20" width="100%" backgroundColor="blue" height="100" color="black" textWrap="true" text="left textAlignment, bottom verticalAlignment" verticalTextAlignment="bottom"/>
8+
<HTMLLabel fontSize="20" width="100%" backgroundColor="red" height="100" color="green" textWrap="true" html='Hello <strong>World</strong>!' verticalTextAlignment="top" paddingTop="10"/>
9+
<HTMLLabel fontSize="10" width="100%" backgroundColor="green" height="100" color="black" textWrap="true" text="left textAlignment, center verticalAlignment" verticalTextAlignment="center" paddingTop="10"/>
10+
<HTMLLabel fontSize="20" width="100%" backgroundColor="blue" height="100" color="black" textWrap="true" text="left textAlignment, bottom verticalAlignment" verticalTextAlignment="bottom" paddingBottom="10"/>
1111
<HTMLLabel fontSize="20" width="100%" backgroundColor="red" isUserInteractionEnabled="false" height="100" textAlignment="right" color="black" textWrap="false" text="right textAlignment, top verticalAlignment" verticalTextAlignment="top"/>
12-
<HTMLLabel fontSize="20" width="100%" backgroundColor="green" height="100" color="black" textWrap="false" text="left textAlignment, center verticalAlignment" verticalTextAlignment="center"/>
12+
<HTMLLabel fontSize="20" width="100%" backgroundColor="green" height="100" color="black" textWrap="false" text="left textAlignment, center verticalAlignment" verticalTextAlignment="center" paddingBottom="10"/>
1313
<HTMLLabel fontSize="20" width="100%" backgroundColor="yellow" height="100" color="black" textWrap="false" verticalTextAlignment="center">
1414
<Span text="left textAlignment"/>
1515
<Span text=", center verticalAlignment" color="red" fontSize="20"/>

‎demo-vue/app/examples/index.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import BaseDemo, { title as BaseDemoTitle } from './Base.vue';
22
import VerticalAlignment, { title as VerticalAlignmentTitle } from './VerticalAlignment.vue';
33
import AutoSize from './AutoSize.vue';
44
import LinkTap from './LinkTap.vue';
5+
import PerfTest from './PerfsTest.vue';
56

67
export const getExamples = () => [
78
{
@@ -18,6 +19,10 @@ export const getExamples = () => [
1819
},
1920
{
2021
title: 'linkTap',
21-
component: LinkTap
22+
component: LinkTap,
23+
},
24+
{
25+
title: 'perfTest',
26+
component: PerfTest
2227
}
2328
];

‎demo-vue/app/main.ts

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
11
import Vue from 'nativescript-vue';
2-
import { overrideSpanAndFormattedString } from '@nativescript-community/text';
3-
overrideSpanAndFormattedString();
2+
import CollectionViewPlugin from '@nativescript-community/ui-collectionview/vue';
43
Vue.registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
4+
Vue.use(CollectionViewPlugin);
55
import * as views from './views/index';
6-
7-
import { install as installBottomSheet } from '@nativescript-community/ui-material-bottomsheet';
8-
import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
9-
installBottomSheet();
6+
// require('@nativescript-community/ui-label').enableIOSDTCoreText();
7+
// import { install as installBottomSheet } from '@nativescript-community/ui-material-bottomsheet';
8+
// import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
9+
// installBottomSheet();
1010

1111
Vue.component('Home', views.Home);
12-
Vue.use(BottomSheetPlugin);
12+
// Vue.use(BottomSheetPlugin);
13+
14+
// let start = Date.now();
15+
// for (let index = 0; index < 1000; index++) {
16+
// //@ts-ignore
17+
// const element = UITextView.new();
18+
// }
19+
// console.log('creating 1000 UITextView took', Date.now() - start, 'ms');
20+
// start = Date.now();
21+
// for (let index = 0; index < 1000; index++) {
22+
// //@ts-ignore
23+
// const element = UILabel.new();
24+
// }
25+
// console.log('creating 1000 UILabel took', Date.now() - start, 'ms');
1326

1427
Vue.config.silent = true;
1528
new Vue({

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

Lines changed: 2 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,8 @@
22
<Page>
33
<ActionBar title="Material Vue">
44
</ActionBar>
5-
<GridLayout rows="auto,auto,auto,*">
6-
<GridLayout rows="50, 50, 50, 50">
7-
<HTMLLabel text="This is a test" color="#ff0000" row="0"/>
8-
9-
<HTMLLabel html="This is a test" color="#ff0000" row="1"/>
10-
11-
<HTMLLabel
12-
:html="someBindedUrl"
13-
@linkTap="()=>{}"
14-
linkColor="#ff0000"
15-
linkUnderline="false"
16-
fontFamily="OpenSans"
17-
fontSize="16"
18-
margin="2 5 5 5"
19-
textWrap="true"
20-
row="2"
21-
></HTMLLabel>
22-
23-
<HTMLLabel
24-
:html="someBindedUrl"
25-
@linkTap="()=>{}"
26-
linkColor="#ff0000"
27-
fontFamily="OpenSans"
28-
fontSize="16"
29-
margin="2 5 5 5"
30-
textWrap="true"
31-
row="3"
32-
></HTMLLabel>
33-
</GridLayout>
34-
35-
<ListView row="3" ref="listView" itemRowHeight="80" for="example in examples" separatorColor="transparent" @itemTap="goToExample">
5+
<GridLayout>
6+
<ListView ref="listView" itemRowHeight="80" for="example in examples" separatorColor="transparent" @itemTap="goToExample">
367
<v-template>
378
<StackLayout class="item" orientation="horizontal">
389
<Label :text="example.title" class="title" verticalAlignment="center" />
@@ -58,11 +29,6 @@ export default Vue.extend({
5829
examples: getExamples()
5930
};
6031
},
61-
computed: {
62-
htmlText() {
63-
return `<span style="font-weight:800;">collect</span><br><span style="font-weight:800;color:red;">${this.counter}</span>dabbas`
64-
}
65-
},
6632
methods: {
6733
async goToExample({ item }) {
6834
console.log('goToExample', !!item.component)
@@ -72,15 +38,6 @@ export default Vue.extend({
7238
} catch (error) {
7339
console.error(error)
7440
}
75-
},
76-
showBottomSheet() {
77-
(this as NativeScriptVue).$showBottomSheet(BottomSheetInnerVue, {
78-
// transparent: true,
79-
closeCallback: (...args) => {
80-
console.log('bottom sheet closed', args);
81-
}
82-
});
83-
8441
}
8542
}
8643
});

0 commit comments

Comments
 (0)