Skip to content

Commit 0ced8ce

Browse files
author
farfromrefug
committed
chore: tsc
1 parent b2287cf commit 0ced8ce

File tree

10 files changed

+185
-162
lines changed

10 files changed

+185
-162
lines changed

‎demo-snippets/vue3/CardHome.vue‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script lang="ts" setup>
2-
import { ref, $navigateTo, $showModal } from 'nativescript-vue';
3-
import { HEIGH_CARD, dataCards } from './carddata';
4-
import { isAndroid, ObservableArray, PageTransition, SharedTransition, View, ModalTransition, Screen } from '@nativescript/core';
5-
import { animateView, configHomeSharedTransition } from './animation';
2+
import { ObservableArray, Screen, View } from '@nativescript/core';
3+
import { ref } from 'nativescript-vue';
4+
import { animateView } from './animation';
65
import Card from './Card.vue';
6+
import { HEIGH_CARD, dataCards } from './carddata';
77
// import Details from "./Details.vue";
88
99
const isOpen = ref(false);
@@ -31,7 +31,7 @@ function toggleStatus() {
3131
const textHeader: View = refTextHeader.value.nativeView;
3232
3333
if (isOpen.value) {
34-
viewCards.forEach((cardView, index) => index == 0 || close(cardView, index));
34+
viewCards.forEach((cardView, index) => index === 0 || close(cardView, index));
3535
animateView(addBtn, { translate: { y: 0, x: 0 }, alpha: 1, rotation: 0 });
3636
animateView(addWalletBtn, { rotation: 0 });
3737
animateView(showBtn, { rotation: 90, alpha: 0 });
@@ -92,13 +92,22 @@ function toggleItemHeight(item) {
9292
<GridLayout rows="auto,*,auto">
9393
<GridLayout height="50" android:marginop="3">
9494
<Label ref="refTextHeader" text="Wallet" class="text-3xl font-bold text-black" horizontalAlignment="center"></Label>
95-
<Label ref="refShowBtn" text="close" style="font-size: 24;" height="45" width="45" rotate="90" class="m-icon-round bg-[#0666eb] rounded-full text-white text-center opacity-0 mr-2" horizontalAlignment="right" @tap="toggleStatus"></Label>
95+
<Label
96+
ref="refShowBtn"
97+
text="close"
98+
style="font-size: 24"
99+
height="45"
100+
width="45"
101+
rotate="90"
102+
class="m-icon-round bg-[#0666eb] rounded-full text-white text-center opacity-0 mr-2"
103+
horizontalAlignment="right"
104+
@tap="toggleStatus"
105+
></Label>
96106
</GridLayout>
97107
<CollectionView row="1" height="100%" :items="items" itemIdGenerator="index">
98108
<template #default="{ item }">
99-
<AbsoluteLayout :height="item.expanded ? HEIGH_CARD: 60">
100-
<Card :height="HEIGH_CARD" :data="item" :sharedTransitionTag="`card_${item.id}`" @tap="toggleItemHeight(item)" verticalAlignment="top" width="100%">
101-
</Card>
109+
<AbsoluteLayout :height="item.expanded ? HEIGH_CARD : 60">
110+
<Card :height="HEIGH_CARD" :data="item" :sharedTransitionTag="`card_${item.id}`" @tap="toggleItemHeight(item)" verticalAlignment="top" width="100%"> </Card>
102111
</AbsoluteLayout>
103112
</template>
104113
</CollectionView>
@@ -111,4 +120,4 @@ function toggleItemHeight(item) {
111120
</FlexboxLayout>
112121
</GridLayout>
113122
</Page>
114-
</template>
123+
</template>

‎demo-snippets/vue3/HorizontalGrid.vue‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
</ActionBar>
66

77
<GridLayout>
8-
<CollectionView :items="itemList" @itemTap="onItemTap" @loadMoreItems="onLoadMoreItems" itemIdGenerator="index"
9-
colWidth="50%" rowHeight="50%" orientation="horizontal">
8+
<CollectionView :items="itemList" @itemTap="onItemTap" @loadMoreItems="onLoadMoreItems" itemIdGenerator="index" colWidth="50%" rowHeight="50%" orientation="horizontal">
109
<template #default="{ item }">
1110
<GridLayout id="test" rows="*, auto" :backgroundColor="item.color" class="item">
1211
<StackLayout row="1">
@@ -22,30 +21,32 @@
2221

2322
<script setup lang="ts">
2423
import { ObservableArray } from '@nativescript/core';
25-
import { ref } from "nativescript-vue"
24+
import { ref } from 'nativescript-vue';
2625
27-
const itemList = ref(new ObservableArray([
28-
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
29-
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
30-
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
31-
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
32-
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
33-
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
34-
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
35-
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
36-
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
37-
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
38-
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
39-
{ index: 11, name: 'CARROT', color: '#e67e22' },
40-
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
41-
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
42-
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
43-
{ index: 15, name: 'ORANGE', color: '#f39c12' },
44-
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
45-
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
46-
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
47-
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
48-
]))
26+
const itemList = ref(
27+
new ObservableArray([
28+
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
29+
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
30+
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
31+
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
32+
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
33+
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
34+
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
35+
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
36+
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
37+
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
38+
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
39+
{ index: 11, name: 'CARROT', color: '#e67e22' },
40+
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
41+
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
42+
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
43+
{ index: 15, name: 'ORANGE', color: '#f39c12' },
44+
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
45+
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
46+
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
47+
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
48+
])
49+
);
4950
5051
function onItemTap({ index, item }) {
5152
console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
@@ -74,4 +75,4 @@ ActionBar {
7475
font-size: 14;
7576
}
7677
}
77-
</style>
78+
</style>

‎demo-snippets/vue3/Reorder.vue‎

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,20 @@
22
<Page>
33
<ActionBar>
44
<Label text="Simple Templates" />
5-
<ActionItem @tap="switchLongPress" :text="useLongPress ? 'Use Press' : 'Use Long Press'" />
5+
<ActionItem @tap="switchLongPress" :text="useLongPress ? 'Use Press' : 'Use Long Press'" />
66
</ActionBar>
77

88
<GridLayout>
9-
<CollectionView ref="collectionView" :items="itemList" itemIdGenerator="color" rowHeight="100" reorderEnabled
10-
@itemReorderStarting="onItemReorderStarting" @itemReordered="onItemReordered"
11-
:reorderLongPressEnabled="useLongPress">
9+
<CollectionView
10+
ref="collectionView"
11+
:items="itemList"
12+
itemIdGenerator="color"
13+
rowHeight="100"
14+
reorderEnabled
15+
@itemReorderStarting="onItemReorderStarting"
16+
@itemReordered="onItemReordered"
17+
:reorderLongPressEnabled="useLongPress"
18+
>
1219
<template #default="{ item }">
1320
<GridLayout id="test" rows="*, auto" :backgroundColor="item.color">
1421
<StackLayout row="1" class="item" @touch="onTouch(item, $event)">
@@ -23,37 +30,39 @@
2330
</template>
2431

2532
<script setup lang="ts">
26-
import { ObservableArray, ContentView } from '@nativescript/core';
27-
import { ref } from "nativescript-vue"
33+
import { ContentView, ObservableArray } from '@nativescript/core';
34+
import { ref } from 'nativescript-vue';
2835
2936
const useLongPress = ref(false);
3037
const collectionView = ref();
31-
const itemList = ref(new ObservableArray([
32-
{ type: 'item', name: 'TURQUOISE', color: '#1abc9c' },
33-
{ type: 'item', name: 'EMERALD', color: '#2ecc71' },
34-
{ type: 'item', name: 'PETER RIVER', color: '#3498db' },
35-
{ type: 'item', name: 'AMETHYST', color: '#9b59b6' },
36-
{ type: 'item', name: 'GREEN SEA', color: '#16a085' },
37-
{ type: 'item', name: 'NEPHRITIS', color: '#27ae60' },
38-
{ type: 'item', name: 'BELIZE HOLE', color: '#2980b9' },
39-
{ type: 'item', name: 'ASBESTOS', color: '#7f8c8d' },
40-
{ type: 'item', name: 'MIDNIGHT BLUE', color: '#2c3e50' },
41-
{ type: 'item', name: 'SUN FLOWER', color: '#f1c40f' },
42-
{ type: 'item', name: 'CARROT', color: '#e67e22' },
43-
{ type: 'item', name: 'POMEGRANATE', color: '#c0392b' },
44-
{ type: 'item', name: 'CLOUDS', color: '#ecf0f1' },
45-
{ type: 'item', name: 'CONCRETE', color: '#95a5a6' },
46-
{ type: 'item', name: 'ORANGE', color: '#f39c12' },
47-
{ type: 'item', name: 'PUMPKIN', color: '#d35400' }
48-
]));
38+
const itemList = ref(
39+
new ObservableArray([
40+
{ type: 'item', name: 'TURQUOISE', color: '#1abc9c' },
41+
{ type: 'item', name: 'EMERALD', color: '#2ecc71' },
42+
{ type: 'item', name: 'PETER RIVER', color: '#3498db' },
43+
{ type: 'item', name: 'AMETHYST', color: '#9b59b6' },
44+
{ type: 'item', name: 'GREEN SEA', color: '#16a085' },
45+
{ type: 'item', name: 'NEPHRITIS', color: '#27ae60' },
46+
{ type: 'item', name: 'BELIZE HOLE', color: '#2980b9' },
47+
{ type: 'item', name: 'ASBESTOS', color: '#7f8c8d' },
48+
{ type: 'item', name: 'MIDNIGHT BLUE', color: '#2c3e50' },
49+
{ type: 'item', name: 'SUN FLOWER', color: '#f1c40f' },
50+
{ type: 'item', name: 'CARROT', color: '#e67e22' },
51+
{ type: 'item', name: 'POMEGRANATE', color: '#c0392b' },
52+
{ type: 'item', name: 'CLOUDS', color: '#ecf0f1' },
53+
{ type: 'item', name: 'CONCRETE', color: '#95a5a6' },
54+
{ type: 'item', name: 'ORANGE', color: '#f39c12' },
55+
{ type: 'item', name: 'PUMPKIN', color: '#d35400' }
56+
])
57+
);
4958
50-
function onItemReordered(e) {
59+
function onItemReordered(e) {
5160
console.log('onItemReordered', e.index);
5261
(e.view as ContentView).opacity = 1;
5362
}
5463
5564
function onItemReorderStarting(e) {
56-
console.log('onItemReorderStarting', e.index, e.view, (e.view as ContentView));
65+
console.log('onItemReorderStarting', e.index, e.view, e.view as ContentView);
5766
(e.view as ContentView).opacity = 0.7;
5867
}
5968
@@ -67,5 +76,4 @@ function onTouch(item, event) {
6776
function switchLongPress() {
6877
useLongPress.value = !useLongPress.value;
6978
}
70-
7179
</script>

‎demo-snippets/vue3/ResizeCell.vue‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88
<GridLayout rows="auto,*">
99
<CollectionView ref="collectionView" :items="itemList" row="1" :autoReloadItemOnLayout="true">
1010
<template #default="{ item }">
11-
<GridLayout class="item" rows="101,100" @tap="resizeCell(item, $event)" :height="getItemHeight(item)"
12-
:backgroundColor="item.color">
11+
<GridLayout class="item" rows="101,100" @tap="resizeCell(item, $event)" :height="getItemHeight(item)" :backgroundColor="item.color">
1312
<Stacklayout row="0">
1413
<Label row="1" :text="item.name" class="title" />
1514
<Label row="1" :text="item.color" class="subtitle" />
@@ -21,42 +20,43 @@
2120
</GridLayout>
2221
</template>
2322
</CollectionView>
24-
2523
</GridLayout>
2624
</Page>
2725
</template>
2826

2927
<script setup lang="ts">
3028
//FIXME: Not work in ios
3129
import { ObservableArray, View } from '@nativescript/core';
32-
import { ref } from "nativescript-vue"
30+
import { $navigateBack, ref } from 'nativescript-vue';
3331
3432
const collectionView = ref();
35-
const itemList = ref(new ObservableArray([
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-
]));
33+
const itemList = ref(
34+
new ObservableArray([
35+
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
36+
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
37+
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
38+
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
39+
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
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+
);
5757
5858
function getItemHeight(item) {
59-
return item.showMenu === true ? 200 : 100
59+
return item.showMenu === true ? 200 : 100;
6060
}
6161
6262
async function resizeCell(item, event) {
@@ -67,11 +67,10 @@ async function resizeCell(item, event) {
6767
const newHeight = actualItem.showMenu ? 200 : 100;
6868
return (event.object as View).animate({ height: newHeight, ...options, duration: 300 });
6969
}
70-
70+
7171
await animate();
7272
} catch (error) {
7373
console.error(error);
7474
}
7575
}
7676
</script>
77-

‎demo-snippets/vue3/SimpleGrid.vue‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
</ActionBar>
66

77
<GridLayout>
8-
<CollectionView :items="itemList" @itemTap="onItemTap" @loadMoreItems="onLoadMoreItems" itemIdGenerator="index"
9-
colWidth="50%" rowHeight="200" @loaded="onCollectionViewLoaded">
8+
<CollectionView :items="itemList" @itemTap="onItemTap" @loadMoreItems="onLoadMoreItems" itemIdGenerator="index" colWidth="50%" rowHeight="200" @loaded="onCollectionViewLoaded">
109
<template #default="{ item }">
1110
<GridLayout id="scroller" rowSpan="2" rows="*, auto" :backgroundColor="item.color" class="item">
1211
<StackLayout row="1">
@@ -21,31 +20,33 @@
2120
</template>
2221

2322
<script setup lang="ts">
24-
import { ObservableArray } from '@nativescript/core';
25-
import { ref } from "nativescript-vue"
23+
import { ObservableArray } from '@nativescript/core';
24+
import { ref } from 'nativescript-vue';
2625
27-
const itemList = ref(new ObservableArray([
28-
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
29-
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
30-
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
31-
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
32-
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
33-
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
34-
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
35-
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
36-
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
37-
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
38-
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
39-
{ index: 11, name: 'CARROT', color: '#e67e22' },
40-
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
41-
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
42-
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
43-
{ index: 15, name: 'ORANGE', color: '#f39c12' },
44-
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
45-
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
46-
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
47-
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
48-
]));
26+
const itemList = ref(
27+
new ObservableArray([
28+
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
29+
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
30+
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
31+
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
32+
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
33+
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
34+
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
35+
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
36+
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
37+
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
38+
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
39+
{ index: 11, name: 'CARROT', color: '#e67e22' },
40+
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
41+
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
42+
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
43+
{ index: 15, name: 'ORANGE', color: '#f39c12' },
44+
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
45+
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
46+
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
47+
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
48+
])
49+
);
4950
5051
function onCollectionViewLoaded() {
5152
console.log('onCollectionViewLoaded');
@@ -58,7 +59,6 @@ function onItemTap({ index, item }) {
5859
function onLoadMoreItems() {
5960
console.log('EVENT TRIGGERED: onLoadMoreItems()');
6061
}
61-
6262
</script>
6363

6464
<style scoped lang="scss">

0 commit comments

Comments
 (0)