Skip to content

Commit baa7e5f

Browse files
farfromrefugfarfromrefug
committed
Merge remote-tracking branch 'origin/master'
# Conflicts: # docs/assets/search.js
2 parents aa93345 + b24131b commit baa7e5f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+912
-226
lines changed

‎CHANGELOG.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,42 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [7.0.41](https://github.com/nativescript-community/ui-material-component/compare/v7.0.40...v7.0.41) (2023-02-17)
7+
8+
9+
### Bug Fixes
10+
11+
* **android:** TabStrip style for the unselected item is not working ([73ff6de](https://github.com/nativescript-community/ui-material-component/commit/73ff6deca54c74c3f590ef9d1aa48e105e8a25a2))
12+
* **tabs:** Android, restore state issue ([b363af2](https://github.com/nativescript-community/ui-material-component/commit/b363af2de18a9207683f0fa8dae824d2388f5922))
13+
14+
15+
### Features
16+
17+
* add vue2 listener support to bottomsheet ([55a51fd](https://github.com/nativescript-community/ui-material-component/commit/55a51fd35eb6b49e85d01e61676d234f4480d608))
18+
19+
20+
21+
22+
23+
## [7.0.40](https://github.com/nativescript-community/ui-material-component/compare/v7.0.39...v7.0.40) (2023-02-14)
24+
25+
**Note:** Version bump only for package @nativescript-community/ui-material-components
26+
27+
28+
29+
30+
31+
## [7.0.39](https://github.com/nativescript-community/ui-material-component/compare/v7.0.38...v7.0.39) (2023-02-13)
32+
33+
34+
### Bug Fixes
35+
36+
* **snackbar:** android options.view can be any view now ([763db37](https://github.com/nativescript-community/ui-material-component/commit/763db372ea5add56cde366cc51714d161bb848d6))
37+
38+
39+
40+
41+
642
## [7.0.38](https://github.com/nativescript-community/ui-material-component/compare/v7.0.37...v7.0.38) (2023-02-07)
743

844

‎README.md

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

942942
//inside another Vue component
943943
const options: VueBottomSheetOptions = {
944+
// props to be passed to MyComponent
945+
props: {
946+
someProp: true,
947+
anotherProp: false
948+
},
949+
// listeners to be connected to MyComponent
950+
on: {
951+
someEvent: (value) => { console.log(value) }
952+
}
944953
};
945954
this.$showBottomSheet(MyComponent, options)
946955
```
@@ -962,7 +971,15 @@ import MyComponent from 'MyComponent.vue';
962971

963972

964973
const options: VueBottomSheetOptions = {
965-
...
974+
// props to be passed to MyComponent
975+
props: {
976+
someProp: true,
977+
anotherProp: false
978+
},
979+
// listeners to be connected to MyComponent
980+
on: {
981+
someEvent: (value) => { console.log(value) }
982+
}
966983
};
967984

968985
const { showBottomSheet, closeBottomSheet } = useBottomSheet()

‎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/vue/Speeddial.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<MDButton dock="bottom" text="test2" />
4242
<MDButton class="btn" dock="right" text="test3" />
4343
</DockLayout>
44-
<MDSpeedDial text="mdi-one-up" buttonClass="mdi">
44+
<MDSpeedDial text="mdi-one-up" buttonClass="mdi" horizontalAlignment="right">
4545
<MDSpeedDialItem icon="res://ic_action_add" title="test1" backgroundColor="red" @tap="onTap" />
4646
<MDSpeedDialItem text="mdi-card-account-mail" title="test2" buttonClass="mdi" backgroundColor="green" @tap="onTap" />
4747
<MDSpeedDialItem backgroundImage="~/images/iu.jpg" backgroundColor="blue" @tap="onTap" />

‎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>

0 commit comments

Comments
 (0)