Use useBottomSheet to access global funcs

Author: Logikgate

demo-snippets/vue3/BottomSheet.vue

@@ -18,14 +18,14 @@
 import { EventData, View } from '@nativescript/core';
 import * as frameModule from '@nativescript/core/ui/frame';
 import { NativeScriptVue } from 'nativescript-vue';
-import { inject } from 'vue';
 import BottomSheetInner from './BottomSheetInner.vue';
 import BottomSheetInnerKeyboard from './BottomSheetInnerKeyboard.vue';
+import { useBottomSheet } from "@nativescript-community/ui-material-bottomsheet/vue3";
 
 const title = 'BottomSheet sample';
 const name = 'BottomSheet';
-const $showBottomSheet = inject('$showBottomSheet')
 
+const { showBottomSheet, closeBottomSheet } = useBottomSheet()
 function onNavigationButtonTap() {
     frameModule.Frame.topmost().goBack();
 }
@@ -36,7 +36,7 @@ function onTap(args: EventData) {
     console.log('onTap', objId, obj);
     switch (objId) {
         case 'bottomsheet': {
-            $showBottomSheet(BottomSheetInner, {
+            showBottomSheet(BottomSheetInner, {
                 // transparent: true,
                 on: {
                     indexChanged: (x) => { console.log('listener', x) }
@@ -48,7 +48,7 @@ function onTap(args: EventData) {
             break;
         }
         case 'dont_ignore_top_safe_area': {
-            $showBottomSheet(BottomSheetInner, {
+            showBottomSheet(BottomSheetInner, {
                 ignoreTopSafeArea: false,
                 // transparent:true,
                 closeCallback: (...args) => {
@@ -58,7 +58,7 @@ function onTap(args: EventData) {
             break;
         }
         case 'ignore_bottom_safe_area': {
-            $showBottomSheet(BottomSheetInner, {
+            showBottomSheet(BottomSheetInner, {
                 // transparent:true,
                 ignoreBottomSafeArea: true,
                 closeCallback: (...args) => {
@@ -68,7 +68,7 @@ function onTap(args: EventData) {
             break;
         }
         case 'dont_ignore_top_ignore_bottom_safe_area': {
-            $showBottomSheet(BottomSheetInner, {
+            showBottomSheet(BottomSheetInner, {
                 // transparent:true,
                 ignoreTopSafeArea: false,
                 ignoreBottomSafeArea: true,
@@ -79,15 +79,15 @@ function onTap(args: EventData) {
             break;
         }
         case 'bottomsheet-keyboard': {
-            $showBottomSheet(BottomSheetInnerKeyboard, {
+            showBottomSheet(BottomSheetInnerKeyboard, {
                 closeCallback: (...args) => {
                     console.log('bottom sheet closed', args);
                 }
             });
             break;
         }
         case 'bottomsheet-peekheight': {
-            $showBottomSheet(BottomSheetInner, {
+            showBottomSheet(BottomSheetInner, {
                 peekHeight: 100,
                 trackingScrollView: 'scrollView',
                 // transparent: true,

demo-snippets/vue3/BottomSheetInner.vue

@@ -12,15 +12,6 @@
                 <MDTextField hint="Edit text to filter..." style="font-size: 16" />
                 <MDActivityIndicator *ngIf="processing" width="50" height="50" />
             </StackLayout>
-            <ListView height="150" :items="items" id="scrollView">
-                <v-template let-item="item" let-odd="odd" let-even="even">
-                    <GridLayout height="64" backgroundColor="green">
-                        <Image horizontalAlignment="left" width="64" />
-                        <Label horizontalAlignment="center" />
-                        <Label horizontalAlignment="right" />
-                    </GridLayout>
-                </v-template>
-            </ListView>
             <Button text="Cancel" horizontalAlignment="center" />
         </StackLayout>
     </GridLayout>
@@ -30,16 +21,14 @@
 <script lang="ts" setup>
 import * as frameModule from '@nativescript/core/ui/frame';
 import BottomSheetInnerKeyboardVue from './BottomSheetInnerKeyboard.vue';
-import { inject } from 'vue';
-
-const $closeBottomSheet = inject('$closeBottomSheet');
-const $showBottomSheet = inject('$showBottomSheet');
+import { useBottomSheet } from "@nativescript-community/ui-material-bottomsheet/vue3";
+const { showBottomSheet, closeBottomSheet } = useBottomSheet()
 
 const showExtraContent = false;
 const items = [{}, {}, {}, {}, {}, {}]
 
 function onButtonTap(event) {
-    $closeBottomSheet(event.object.id);
+    closeBottomSheet(event.object.id);
 }
 
 function onShownInBottomSheet(args) {
@@ -51,7 +40,7 @@ function toggleExtraContent() {
 }
 
 function openAnotherInner() {
-    $showBottomSheet(BottomSheetInnerKeyboardVue, {
+    showBottomSheet(BottomSheetInnerKeyboardVue, {
         // transparent:true,
         ignoreBottomSafeArea: true,
         closeCallback: (...args) => {

demo-snippets/vue3/BottomSheetInnerKeyboard.vue

@@ -10,15 +10,14 @@
 
 <script lang="ts" setup>
 import * as frameModule from '@nativescript/core/ui/frame';
-import { inject } from 'vue';
-
-const $closeBottomSheet = inject('$closeBottomSheet');
+import { useBottomSheet } from "@nativescript-community/ui-material-bottomsheet/vue3";
+const { showBottomSheet, closeBottomSheet } = useBottomSheet()
 
 function onShownInBottomSheet(args) {
     console.log('onShownInBottomSheet');
 }
 
 function onButtonTap(event) {
-    $closeBottomSheet(event.object.id);
+    closeBottomSheet(event.object.id);
 }
 </script>

src/bottomsheet/vue3/index.ts

@@ -77,8 +77,6 @@ const BottomSheetPlugin = {
 
         globals.$showBottomSheet = showSheet;
         globals.$closeBottomSheet = closeSheet;
-        app.provide('$showBottomSheet', showSheet);
-        app.provide('$closeBottomSheet', closeSheet);
     }
 };