Skip to content

Commit 895094f

Browse files
vallemarvallemar
committed
feat: add useRootLayout
1 parent 2a53226 commit 895094f

File tree

7 files changed

+154
-4
lines changed

7 files changed

+154
-4
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@akylas/nativescript": "^8.5.2",
15-
"@vallemar/nativescript-vueuse": "^0.0.8",
15+
"@vallemar/nativescript-vueuse": "^0.0.9",
1616
"nativescript-vue": "3.0.0-beta.8"
1717
},
1818
"devDependencies": {

‎src/components/Home.vue

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { StackLayout } from "@nativescript/core";
66
import ElementSizeView from "~/components/ElementSizeView.vue";
77
import ColorModeView from "~/components/ColorModeView.vue";
88
import EventListenerComponent from "~/components/EventListenerComponent.vue";
9+
import RootLayoutView from './rootLayout/RootLayoutView.vue';
910
1011
function onUseElementSize() {
1112
$navigateTo(ElementSizeView)
@@ -18,6 +19,10 @@ function onUseEventListener() {
1819
$navigateTo(EventListenerComponent)
1920
}
2021
22+
function onUseRootLayout() {
23+
$navigateTo(RootLayoutView)
24+
}
25+
2126
</script>
2227

2328
<template>
@@ -26,9 +31,10 @@ function onUseEventListener() {
2631
<StackLayout ref="test" class="px-4">
2732
<Label text="NativeScript-VueUse APP" class="text-2xl font-bold mt-3" />
2833

29-
<Button @tap="onUseElementSize" text="UseElementSize" class="mt-12 m-1"></Button>
30-
<Button @tap="onUseColorMode" text="UseColorMode" class="mt-8 m-1"></Button>
31-
<Button @tap="onUseEventListener" text="UseEventListener" class="mt-8 m-1"></Button>
34+
<Button @tap="onUseElementSize" text="Use Element Size" class="mt-12 m-1"></Button>
35+
<Button @tap="onUseColorMode" text="Use Color Mode" class="mt-8 m-1"></Button>
36+
<Button @tap="onUseEventListener" text="Use Event Listener" class="mt-8 m-1"></Button>
37+
<Button @tap="onUseRootLayout" text="Use Root Layout" class="mt-8 m-1"></Button>
3238
</StackLayout>
3339
</Page>
3440
</Frame>

‎src/components/rootLayout/BottomSheet.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<GridLayout rows="auto, auto" verticalAlignment="bottom" height="455" class="bg-white rounded-t-xl p-6 text-black">
3+
<Label row="0" class="mt-8 text-2xl" text="Hello 👋!"></Label>
4+
<Label row="1" class="mt-8 text-lg" text="I am a BottomSheet built with RootLayout 💪" textWrap="true"></Label>
5+
</GridLayout>
6+
</template>

‎src/components/rootLayout/Modal.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<StackLayout verticalAlignment="center" horizontalAlignment="center" height="250" class="p-4">
3+
<GridLayout rows="auto, auto" class="bg-white rounded-xl p-8 text-black">
4+
<Label row="0" class="text-2xl" text="Hello 👋!"></Label>
5+
<Label row="1" class="mt-8 text-lg" text="I am a Modal built with RootLayout 💪" textWrap="true"></Label>
6+
</GridLayout>
7+
</StackLayout>
8+
</template>

‎src/components/rootLayout/RootLayoutView.vue

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<script lang="ts" setup>
2+
import { ref, onMounted } from 'nativescript-vue'
3+
import { useRootLayout } from '@vallemar/nativescript-vueuse'
4+
import BottomSheet from "./BottomSheet.vue";
5+
import Modal from './Modal.vue';
6+
import SideBar from './SideBar.vue';
7+
import SnackBar from './SnackBar.vue';
8+
9+
10+
const { show: showBottomSheet } = useRootLayout(BottomSheet, {
11+
rootLayoutOption: {
12+
shadeCover: {
13+
color: '#282C34',
14+
opacity: 0.7,
15+
tapToClose: true,
16+
},
17+
animation: {
18+
enterFrom: {
19+
translateY: 500,
20+
duration: 300,
21+
},
22+
exitTo: {
23+
translateY: 500,
24+
duration: 300,
25+
},
26+
},
27+
},
28+
onClose: () => {
29+
console.log("onClose BottomSheet")
30+
}
31+
});
32+
33+
const { show: showModal } = useRootLayout(Modal, {
34+
rootLayoutOption: {
35+
shadeCover: {
36+
color: '#282C34',
37+
opacity: 0.7,
38+
tapToClose: true,
39+
},
40+
animation: {
41+
enterFrom: {
42+
translateY: -200,
43+
duration: 300,
44+
},
45+
exitTo: {
46+
translateY: -200,
47+
opacity: 0,
48+
duration: 300,
49+
},
50+
},
51+
},
52+
onClose: () => {
53+
console.log("onClose Modal")
54+
}
55+
});
56+
57+
const { show: showSideBar } = useRootLayout(SideBar, {
58+
rootLayoutOption: {
59+
shadeCover: {
60+
color: '#282C34',
61+
opacity: 0.7,
62+
tapToClose: true,
63+
},
64+
animation: {
65+
enterFrom: {
66+
translateX: -300,
67+
duration: 300,
68+
},
69+
exitTo: {
70+
translateX: -300,
71+
duration: 300,
72+
},
73+
},
74+
},
75+
onClose: () => {
76+
console.log("onClose SideBar")
77+
}
78+
});
79+
const { show: showSnackbar } = useRootLayout(SnackBar, {
80+
rootLayoutOption: {
81+
shadeCover: {
82+
color: '#282C34',
83+
opacity: 0.7,
84+
tapToClose: true,
85+
},
86+
animation: {
87+
enterFrom: {
88+
translateY: -300,
89+
duration: 300,
90+
},
91+
exitTo: {
92+
translateY: -300,
93+
duration: 300,
94+
},
95+
},
96+
},
97+
onClose: () => {
98+
console.log("onClose SnackBar")
99+
}
100+
});
101+
</script>
102+
103+
<template>
104+
<Page actionBarHidden="true">
105+
<RootLayout>
106+
<StackLayout class="p-3">
107+
<Label class="text-center text-2xl">RootLayout example</Label>
108+
<Button @tap="showBottomSheet" class="mx-1 mt-8" text="Open BottomSheet"></Button>
109+
<Button @tap="showModal" class="mx-1 mt-8" text="Open Modal"></Button>
110+
<Button @tap="showSideBar" class="mx-1 mt-8" text="Open Sidebar"></Button>
111+
<Button @tap="showSnackbar" class="mx-1 mt-8" text="Open Snackbar"></Button>
112+
113+
</StackLayout>
114+
</RootLayout>
115+
</Page>
116+
</template>

‎src/components/rootLayout/SideBar.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<StackLayout height="100%" width="75%" class="rounded-r-2xl bg-white pt-8 px-4 text-black" horizontalAlignment="left">
3+
<Label row="0" class="text-2xl" text="Hello 👋!"></Label>
4+
<Label row="1" class="mt-6 text-lg" text="I am a Sidebar built with RootLayout 💪" textWrap="true"></Label>
5+
</StackLayout>
6+
</template>
7+

‎src/components/rootLayout/Snackbar.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
<template>
3+
<GridLayout rows="auto, auto" class="bg-white rounded-b-2xl p-6 text-black" verticalAlignment="top">
4+
<Label row="0" class="text-2xl" text="Hello 👋!"></Label>
5+
<Label row="1" class="mt-6 text-lg" text="I am a Snackbar built with RootLayout 💪" textWrap="true"></Label>
6+
</GridLayout>
7+
</template>

0 commit comments

Comments
 (0)