@nativescript-community/ui-material-bottomsheet 7.0.34 → 7.0.36

package/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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-material-bottomsheet",
-    "version": "7.0.34",
+    "version": "7.0.36",
     "description": "Material Design Bottom Sheets slide up from the bottom of the screen to reveal more content. Bottom sheets integrate with the app to display supporting content or present deep-linked content from other apps.",
     "main": "./bottomsheet",
     "sideEffects": false,
@@ -46,7 +46,7 @@
     },
     "readmeFilename": "README.md",
     "dependencies": {
-        "@nativescript-community/ui-material-core": "^7.0.34"
+        "@nativescript-community/ui-material-core": "^7.0.36"
     },
-    "gitHead": "e0ccc861d2f6da556d045b069ebc6c8f32a6872a"
+    "gitHead": "aad043ae2a45c79505da543aeca02074b05373e6"
 }

package/platforms/android/native-api-usage.json

@@ -1,6 +1,6 @@
 {
     "uses": [
-        "com.google.android.material.bottomsheet:BottomSheetBehavior*",
-        "com.google.android.material.bottomsheet.BottomSheetBehavior:BottomSheetCallback*"
+        "com.google.android.material.bottomsheet:BottomSheetBehavior",
+        "com.google.android.material.bottomsheet:BottomSheetBehavior.BottomSheetCallback"
     ]
 }

package/vue3/index.d.ts

@@ -0,0 +1,20 @@
+import { ViewBase } from '@nativescript/core';
+import { BottomSheetOptions } from '../bottomsheet';
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $showBottomSheet: (component: any, options: VueBottomSheetOptions) => Promise<any>;
+        $closeBottomSheet(...args: any[]): any;
+    }
+}
+declare const useBottomSheet: () => {
+    showBottomSheet: (component: any, options: VueBottomSheetOptions) => Promise<unknown>;
+    closeBottomSheet: (...args: any[]) => void;
+};
+declare const BottomSheetPlugin: {
+    install(app: any): void;
+};
+interface VueBottomSheetOptions extends Partial<BottomSheetOptions> {
+    view?: string | ViewBase;
+    props?: any;
+}
+export { BottomSheetPlugin, VueBottomSheetOptions, useBottomSheet };

package/vue3/index.js

@@ -0,0 +1,52 @@
+import { App, createApp } from 'nativescript-vue3';
+import { Frame, View, ViewBase } from '@nativescript/core';
+const modalStack = [];
+const useBottomSheet = () => {
+    const showBottomSheet = (component, options) => showSheet(component, options);
+    const closeBottomSheet = (...args) => closeSheet(args);
+    return {
+        showBottomSheet,
+        closeBottomSheet
+    };
+};
+const showSheet = (component, options) => new Promise((resolve) => {
+    let resolved = false;
+    let navEntryInstance = createNativeView(component, {
+        props: options.props
+    }).mount();
+    const viewAttached = options.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, props) => createApp(component, props);
+export { BottomSheetPlugin, useBottomSheet };
+//# sourceMappingURL=index.js.map

package/vue3/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["vue3/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAW3D,MAAM,UAAU,GAAG,EAAE,CAAC;AAEtB,MAAM,cAAc,GAAG,GAAG,EAAE;IACxB,MAAM,eAAe,GAAG,CAAC,SAAc,EAAE,OAA8B,EAAE,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC1G,MAAM,gBAAgB,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAEvD,OAAO;QACH,eAAe;QACf,gBAAgB;KACnB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,OAA8B,EAAE,EAAE,CAC5D,IAAI,OAAO,CAAC,CAAC,OAAY,EAAE,EAAE;IACzB,IAAI,QAAQ,GAAG,KAAK,CAAC;IAErB,IAAI,gBAAgB,GAAG,gBAAgB,CAAC,SAAS,EAAE;QAC/C,KAAK,EAAE,OAAO,CAAC,KAAK;KACvB,CAAC,CAAC,KAAK,EAAE,CAAC;IAEX,MAAM,YAAY,GAAI,OAAO,CAAC,IAAa,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC,WAAW,CAAC;IAE3E,YAAY,CAAC,eAAe,CACxB,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE;QACvB,IAAI,EAAE,gBAAgB,CAAC,GAAG,CAAC,UAAU;QACrC,aAAa,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE;YACvB,IAAI,QAAQ,EAAE;gBACV,OAAO;aACV;YACD,QAAQ,GAAG,IAAI,CAAC;YAChB,IAAI,gBAAgB,IAAI,gBAAgB,EAAE;gBACtC,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;gBACtE,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC;gBACjB,gBAAgB,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;gBAC5C,gBAAgB,CAAC,GAAG,GAAG,IAAI,CAAC;gBAC5B,gBAAgB,GAAG,IAAI,CAAC;gBACxB,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;aAC3C;QACL,CAAC;KACJ,CAAC,CACL,CAAC;IACF,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC,CAAC,CAAC;AACP,MAAM,UAAU,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE;IAC3B,MAAM,qBAAqB,GAAG,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAChE,IAAI,qBAAqB,EAAE;QACvB,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;KAC/D;AACL,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG;IACtB,OAAO,CAAC,GAAG;QACP,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC;QAE5C,OAAO,CAAC,gBAAgB,GAAG,SAAS,CAAC;QACrC,OAAO,CAAC,iBAAiB,GAAG,UAAU,CAAC;IAC3C,CAAC;CACJ,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,SAAc,EAAE,KAAW,EAAO,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAQ3F,OAAO,EAAE,iBAAiB,EAAyB,cAAc,EAAE,CAAC"}