Skip to content

Commit 1a3e843

Browse files
farfromrefugfarfromrefug
committed
Merge branch 'master' of github.com:nativescript-community/ui-material-components
2 parents 1ebe7ad + fa114fd commit 1a3e843

File tree

11 files changed

+158
-138
lines changed

11 files changed

+158
-138
lines changed

‎demo-snippets/vue/BottomSheet.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@ export default Vue.extend({
4343
case 'bottomsheet': {
4444
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
4545
// transparent: true,
46+
on: {
47+
indexChanged: (x) => { console.log('listener', x) }
48+
},
4649
closeCallback: (...args) => {
4750
console.log('bottom sheet closed', args);
4851
}

‎demo-snippets/vue/BottomSheetInner.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<GridLayout id="test1" rows="auto auto" backgroundColor="yellow">
33
<!-- highlighted in red to demonstrate movement -->
44
<Stacklayout id="test2" row="0" backgroundColor="red" verticalAlignment="top" marginLeft="10" marginRight="10">
5+
<Button @tap="$emit('indexChanged', 200)" text="Emit value"></Button>
56
<Button @tap="toggleExtraContent" text="Toggle extra content"></Button>
67
<Button @tap="openAnotherInner" text="Open second"></Button>
78
<Button id="innerButton" @tap="onButtonTap" text="close with result"></Button>

‎demo-snippets/vue3/BottomSheet.vue‎

Lines changed: 71 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<Page>
33
<ActionBar :title="title">
4-
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
4+
<NavigationButton text="Back" @tap="onNavigationButtonTap"></NavigationButton>
55
</ActionBar>
66
<StackLayout>
77
<MDButton id="bottomsheet" text="bottomsheet" @tap="onTap" />
@@ -14,93 +14,89 @@
1414
</Page>
1515
</template>
1616

17-
<script lang="ts">
17+
<script lang="ts" setup>
1818
import { EventData, View } from '@nativescript/core';
1919
import * as frameModule from '@nativescript/core/ui/frame';
2020
import { NativeScriptVue } from 'nativescript-vue';
21-
import Vue from 'vue';
2221
import BottomSheetInner from './BottomSheetInner.vue';
2322
import BottomSheetInnerKeyboard from './BottomSheetInnerKeyboard.vue';
23+
import { useBottomSheet } from "@nativescript-community/ui-material-bottomsheet/vue3";
2424
25-
export const title = 'BottomSheet sample';
25+
const title = 'BottomSheet sample';
26+
const name = 'BottomSheet';
2627
27-
export default Vue.extend({
28-
data() {
29-
return {
30-
name: 'BottomSheet',
31-
title
32-
};
33-
},
34-
methods: {
35-
onNavigationButtonTap() {
36-
frameModule.Frame.topmost().goBack();
37-
},
38-
onTap(args: EventData) {
39-
const obj = args.object as View;
40-
const objId = obj.id;
41-
console.log('onTap', objId, obj);
42-
switch (objId) {
43-
case 'bottomsheet': {
44-
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
45-
// transparent: true,
46-
closeCallback: (...args) => {
47-
console.log('bottom sheet closed', args);
48-
}
49-
});
50-
break;
28+
const { showBottomSheet, closeBottomSheet } = useBottomSheet()
29+
function onNavigationButtonTap() {
30+
frameModule.Frame.topmost().goBack();
31+
}
32+
33+
function onTap(args: EventData) {
34+
const obj = args.object as View;
35+
const objId = obj.id;
36+
console.log('onTap', objId, obj);
37+
switch (objId) {
38+
case 'bottomsheet': {
39+
showBottomSheet(BottomSheetInner, {
40+
// transparent: true,
41+
on: {
42+
indexChanged: (x) => { console.log('listener', x) }
43+
},
44+
closeCallback: (...args) => {
45+
console.log('bottom sheet closed', args);
5146
}
52-
case 'dont_ignore_top_safe_area': {
53-
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
54-
ignoreTopSafeArea: false,
55-
// transparent:true,
56-
closeCallback: (...args) => {
57-
console.log('bottom sheet closed', args);
58-
}
59-
});
60-
break;
47+
});
48+
break;
49+
}
50+
case 'dont_ignore_top_safe_area': {
51+
showBottomSheet(BottomSheetInner, {
52+
ignoreTopSafeArea: false,
53+
// transparent:true,
54+
closeCallback: (...args) => {
55+
console.log('bottom sheet closed', args);
6156
}
62-
case 'ignore_bottom_safe_area': {
63-
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
64-
// transparent:true,
65-
ignoreBottomSafeArea: true,
66-
closeCallback: (...args) => {
67-
console.log('bottom sheet closed', args);
68-
}
69-
});
70-
break;
57+
});
58+
break;
59+
}
60+
case 'ignore_bottom_safe_area': {
61+
showBottomSheet(BottomSheetInner, {
62+
// transparent:true,
63+
ignoreBottomSafeArea: true,
64+
closeCallback: (...args) => {
65+
console.log('bottom sheet closed', args);
7166
}
72-
case 'dont_ignore_top_ignore_bottom_safe_area': {
73-
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
74-
// transparent:true,
75-
ignoreTopSafeArea: false,
76-
ignoreBottomSafeArea: true,
77-
closeCallback: (...args) => {
78-
console.log('bottom sheet closed', args);
79-
}
80-
});
81-
break;
67+
});
68+
break;
69+
}
70+
case 'dont_ignore_top_ignore_bottom_safe_area': {
71+
showBottomSheet(BottomSheetInner, {
72+
// transparent:true,
73+
ignoreTopSafeArea: false,
74+
ignoreBottomSafeArea: true,
75+
closeCallback: (...args) => {
76+
console.log('bottom sheet closed', args);
8277
}
83-
case 'bottomsheet-keyboard': {
84-
(this as NativeScriptVue).$showBottomSheet(BottomSheetInnerKeyboard, {
85-
closeCallback: (...args) => {
86-
console.log('bottom sheet closed', args);
87-
}
88-
});
89-
break;
78+
});
79+
break;
80+
}
81+
case 'bottomsheet-keyboard': {
82+
showBottomSheet(BottomSheetInnerKeyboard, {
83+
closeCallback: (...args) => {
84+
console.log('bottom sheet closed', args);
9085
}
91-
case 'bottomsheet-peekheight': {
92-
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
93-
peekHeight: 100,
94-
trackingScrollView: 'scrollView',
95-
// transparent: true,
96-
closeCallback: (...args) => {
97-
console.log('bottom sheet closed', args);
98-
}
99-
});
100-
break;
86+
});
87+
break;
88+
}
89+
case 'bottomsheet-peekheight': {
90+
showBottomSheet(BottomSheetInner, {
91+
peekHeight: 100,
92+
trackingScrollView: 'scrollView',
93+
// transparent: true,
94+
closeCallback: (...args) => {
95+
console.log('bottom sheet closed', args);
10196
}
102-
}
97+
});
98+
break;
10399
}
104100
}
105-
});
101+
}
106102
</script>

‎demo-snippets/vue3/BottomSheetInner.vue‎

Lines changed: 33 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<GridLayout id="test1" rows="auto auto" backgroundColor="yellow">
33
<!-- highlighted in red to demonstrate movement -->
44
<Stacklayout id="test2" row="0" backgroundColor="red" verticalAlignment="top" marginLeft="10" marginRight="10">
5+
<Button @tap="$emit('indexChanged', 200)" text="Emit value"></Button>
56
<Button @tap="toggleExtraContent" text="Toggle extra content"></Button>
67
<Button @tap="openAnotherInner" text="Open second"></Button>
78
<Button id="innerButton" @tap="onButtonTap" text="close with result"></Button>
@@ -12,52 +13,45 @@
1213
<MDActivityIndicator *ngIf="processing" width="50" height="50" />
1314
</StackLayout>
1415
<ListView height="150" :items="items" id="scrollView">
15-
<v-template let-item="item" let-odd="odd" let-even="even">
16-
<GridLayout height="64" backgroundColor="green">
17-
<Image horizontalAlignment="left" width="64" />
18-
<Label horizontalAlignment="center" />
19-
<Label horizontalAlignment="right" />
20-
</GridLayout>
21-
</v-template>
16+
<GridLayout height="64" backgroundColor="green">
17+
<Image horizontalAlignment="left" width="64" />
18+
<Label horizontalAlignment="center" />
19+
<Label horizontalAlignment="right" />
20+
</GridLayout>
2221
</ListView>
2322
<Button text="Cancel" horizontalAlignment="center" />
2423
</StackLayout>
2524
</GridLayout>
26-
<!-- </MDCardView> -->
2725
</template>
2826

29-
<script lang="ts">
30-
import * as frameModule from '@nativescript/core/ui/frame';
31-
import Vue from 'vue';
32-
import NativeScriptVue from 'nativescript-vue';
27+
<script lang="ts" setup>
3328
import BottomSheetInnerKeyboardVue from './BottomSheetInnerKeyboard.vue';
29+
import { useBottomSheet } from "@nativescript-community/ui-material-bottomsheet/vue3";
30+
const { showBottomSheet, closeBottomSheet } = useBottomSheet()
31+
import { ref } from 'nativescript-vue';
3432
35-
export default Vue.extend({
36-
data() {
37-
return {
38-
showExtraContent: false,
39-
items: [{}, {}, {}, {}, {}, {}]
40-
};
41-
},
42-
methods: {
43-
onButtonTap(event) {
44-
this.$closeBottomSheet(event.object.id);
45-
},
46-
onShownInBottomSheet(args) {
47-
console.log('onShownInBottomSheet');
48-
},
49-
toggleExtraContent() {
50-
this.showExtraContent = !this.showExtraContent;
51-
},
52-
openAnotherInner() {
53-
(this as NativeScriptVue).$showBottomSheet(BottomSheetInnerKeyboardVue, {
54-
// transparent:true,
55-
ignoreBottomSafeArea: true,
56-
closeCallback: (...args) => {
57-
console.log('bottom sheet closed', args);
58-
}
59-
});
33+
const showExtraContent = ref(false);
34+
const items = [{}, {}, {}, {}, {}, {}]
35+
36+
function onButtonTap(event) {
37+
closeBottomSheet(event.object.id);
38+
}
39+
40+
function onShownInBottomSheet(args) {
41+
console.log('onShownInBottomSheet');
42+
}
43+
44+
function toggleExtraContent() {
45+
showExtraContent.value = !showExtraContent.value;
46+
}
47+
48+
function openAnotherInner() {
49+
showBottomSheet(BottomSheetInnerKeyboardVue, {
50+
// transparent:true,
51+
ignoreBottomSafeArea: true,
52+
closeCallback: (...args) => {
53+
console.log('bottom sheet closed', args);
6054
}
61-
}
62-
});
55+
});
56+
}
6357
</script>

‎demo-snippets/vue3/BottomSheetInnerKeyboard.vue‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,19 @@
44
<Button id="innerButtonK" @tap="onButtonTap" text="close with result k"></Button>
55
</Stacklayout>
66
<MDTextField margin="10" variant="filled" hint="Working TextView hint 🤪" />
7-
<PreviousNextView />
87
</StackLayout>
98
</template>
109

11-
<script lang="ts">
10+
<script lang="ts" setup>
1211
import * as frameModule from '@nativescript/core/ui/frame';
13-
import Vue from 'vue';
12+
import { useBottomSheet } from "@nativescript-community/ui-material-bottomsheet/vue3";
13+
const { showBottomSheet, closeBottomSheet } = useBottomSheet()
1414
15-
export default Vue.extend({
16-
data() {
17-
return {};
18-
},
19-
methods: {
20-
onShownInBottomSheet(args) {
21-
console.log('onShownInBottomSheet');
22-
},
23-
onButtonTap(event) {
24-
this.$closeBottomSheet(event.object.id);
25-
}
26-
}
27-
});
15+
function onShownInBottomSheet(args) {
16+
console.log('onShownInBottomSheet');
17+
}
18+
19+
function onButtonTap(event) {
20+
closeBottomSheet(event.object.id);
21+
}
2822
</script>

‎demo-snippets/vue3/install.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activit
44
import BottomNavigationPlugin from '@nativescript-community/ui-material-bottom-navigation/vue';
55
import BottomNavigationBarPlugin from '@nativescript-community/ui-material-bottomnavigationbar/vue';
66
import { install as installBottomSheet } from '@nativescript-community/ui-material-bottomsheet';
7-
/*import {BottomSheetPlugin} from '@nativescript-community/ui-material-bottomsheet/vue3';*/
7+
import { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3';
88
import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
99

1010
import CardViewPlugin from '@nativescript-community/ui-material-cardview/vue';
@@ -72,7 +72,7 @@ export function installPlugin(app: any) {
7272
app.use(TextFieldPlugin);
7373
app.use(TextViewPlugin);
7474
// TODO: wait for publish new version BottomSheetPlugin
75-
//app.use(BottomSheetPlugin);
75+
app.use(BottomSheetPlugin);
7676
}
7777

7878
export const demos = [
@@ -88,7 +88,7 @@ export const demos = [
8888
{ name: 'SnackBar', path: 'SnackBar', component: SnackBar },
8989
{ name: 'TextFields', path: 'TextFields', component: TextFields },
9090
{ name: 'TextViews', path: 'TextViews', component: TextViews },
91-
// { name: 'BottomSheet', path: 'BottomSheet', component: BottomSheet },
91+
{ name: 'BottomSheet', path: 'BottomSheet', component: BottomSheet },
9292
// { name: 'SpeedDial', path: 'SpeedDial', component: SpeedDial },
9393
// { name: 'Tabs', path: 'Tabs', component: Tabs },
9494
{ name: 'Mixins', path: 'Mixins', component: Mixins }

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
"workspaces": [
8989
"packages/*",
9090
"demo-vue",
91+
"demo-vue3",
9192
"demo-ng",
9293
"demo-svelte",
9394
"demo-react",

‎packages/bottomsheet/README.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,15 @@ import MyComponent from 'MyComponent.vue';
137137

138138
//inside another Vue component
139139
const options: VueBottomSheetOptions = {
140+
// props to be passed to MyComponent
141+
props: {
142+
someProp: true,
143+
anotherProp: false
144+
},
145+
// listeners to be connected to MyComponent
146+
on: {
147+
someEvent: (value) => { console.log(value) }
148+
}
140149
};
141150
this.$showBottomSheet(MyComponent, options)
142151
```
@@ -158,7 +167,15 @@ import MyComponent from 'MyComponent.vue';
158167

159168

160169
const options: VueBottomSheetOptions = {
161-
...
170+
// props to be passed to MyComponent
171+
props: {
172+
someProp: true,
173+
anotherProp: false
174+
},
175+
// listeners to be connected to MyComponent
176+
on: {
177+
someEvent: (value) => { console.log(value) }
178+
}
162179
};
163180

164181
const { showBottomSheet, closeBottomSheet } = useBottomSheet()

0 commit comments

Comments
 (0)