Merge pull request #429 from vallemar/bottomsheet-vue-3

feat(BottomSheet): add vue 3 support

Author: farfromrefug

packages/bottomsheet/README.md

@@ -122,7 +122,7 @@ export function openBottomSheet(args) {
 
 ##
 
-### NativeScript + Vue
+### NativeScript + Vue 2
 ```typescript
 import Vue from 'nativescript-vue';
 import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
@@ -141,6 +141,32 @@ const options: VueBottomSheetOptions = {
 this.$showBottomSheet(MyComponent, options)
 ```
 
+### NativeScript + Vue 3
+```typescript
+import { createApp } from 'nativescript-vue';
+import { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3';
+import { install } from "@nativescript-community/ui-material-bottomsheet";
+install();
+
+const app = createApp(...);
+app.use(BottomSheetPlugin);
+```
+Then you can show a Vue component:
+```typescript 
+import { useBottomSheet } from "@nativescript-community/ui-material-bottomsheet/vue3";
+import MyComponent from 'MyComponent.vue';
+
+
+const options: VueBottomSheetOptions = {
+    ...
+};
+
+const { showBottomSheet, closeBottomSheet } = useBottomSheet()
+
+showBottomSheet(MyComponent, options);
+closeBottomSheet();
+```
+
 ##
 
 ### NativeScript + Angular

src/bottomsheet/vue3/index.ts

@@ -0,0 +1,78 @@
+import { App, createApp } from 'nativescript-vue3';
+import { Frame, View, ViewBase } from '@nativescript/core';
+import { BottomSheetOptions } from '../bottomsheet';
+
+const modalStack = [];
+
+const useBottomSheet = () => {
+    const showBottomSheet = (component: any, options: VueBottomSheetOptions) => showSheet(component, options);
+    const closeBottomSheet = (...args) => closeSheet(args);
+
+    return {
+        showBottomSheet,
+        closeBottomSheet
+    };
+};
+
+const showSheet = (component, options: VueBottomSheetOptions) =>
+    new Promise((resolve: any) => {
+        let resolved = false;
+
+        let navEntryInstance = createNativeView(component, {
+            props: options.props
+        }).mount();
+
+        const viewAttached = (options.view as View) ?? Frame.topmost().currentPage;
+
+        viewAttached.showBottomSheet(
+            Object.assign({}, options, {
+                view: navEntryInstance.$el.nativeView,
+                closeCallback: (...args) => {
+                    if (resolved) {
+                        return;
+                    }
+                    resolved = true;
+                    if (navEntryInstance && navEntryInstance) {
+                        options.closeCallback && options.closeCallback.apply(undefined, args);
+                        resolve(...args);
+                        navEntryInstance.$emit('bottomsheet:close');
+                        navEntryInstance.$el = null;
+                        navEntryInstance = null;
+                        modalStack.splice(modalStack.length, 1);
+                    }
+                }
+            })
+        );
+        modalStack.push(navEntryInstance);
+    });
+const closeSheet = (...args) => {
+    const modalPageInstanceInfo = modalStack[modalStack.length - 1];
+    if (modalPageInstanceInfo) {
+        modalPageInstanceInfo.$el.nativeView.closeBottomSheet(args);
+    }
+};
+
+const BottomSheetPlugin = {
+    install(app) {
+        const globals = app.config.globalProperties;
+
+        globals.$showBottomSheet = showSheet;
+        globals.$closeBottomSheet = closeSheet;
+    }
+};
+
+const createNativeView = (component: any, props?: any): App => createApp(component, props);
+
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $showBottomSheet: (component: any, options: VueBottomSheetOptions) => Promise<any>;
+        $closeBottomSheet(...args);
+    }
+}
+
+interface VueBottomSheetOptions extends Partial<BottomSheetOptions> {
+    view?: string | ViewBase;
+    props?: any;
+}
+
+export { BottomSheetPlugin, VueBottomSheetOptions, useBottomSheet };