From 48b4ad4c4d5aa2feef905899d3f78c733dc64ddc Mon Sep 17 00:00:00 2001
From: Drew Bartlett <drewb9@gmail.com>
Date: Tue, 24 Mar 2020 11:02:06 -0500
Subject: [PATCH 1/2] fix: add minor fix to allow target being passed to

---
 platform/nativescript/plugins/modal-plugin.js | 18 ++--
 samples/app/modals-on-top-of-modals.js        | 86 +++++++++++++++++++
 2 files changed, 98 insertions(+), 6 deletions(-)
 create mode 100644 samples/app/modals-on-top-of-modals.js

diff --git a/platform/nativescript/plugins/modal-plugin.js b/platform/nativescript/plugins/modal-plugin.js
index b3ad00da..ae15052f 100644
--- a/platform/nativescript/plugins/modal-plugin.js
+++ b/platform/nativescript/plugins/modal-plugin.js
@@ -65,14 +65,20 @@ export default {
         }
 
         // build options object with defaults
-        options = Object.assign({}, options, {
-          context: null,
-          closeCallback: closeCb
-        })
+        options = Object.assign(
+          {
+            target: this.$root
+          },
+          options,
+          {
+            context: null,
+            closeCallback: closeCb
+          }
+        )
 
         const navEntryInstance = new Vue({
           name: 'ModalEntry',
-          parent: this.$root,
+          parent: options.target,
           methods: {
             closeCb
           },
@@ -85,7 +91,7 @@ export default {
         const modalPage = navEntryInstance.$mount().$el.nativeView
         updateDevtools()
 
-        this.$root.nativeView.showModal(modalPage, options)
+        options.target.nativeView.showModal(modalPage, options)
       })
     }
   }
diff --git a/samples/app/modals-on-top-of-modals.js b/samples/app/modals-on-top-of-modals.js
new file mode 100644
index 00000000..ec513057
--- /dev/null
+++ b/samples/app/modals-on-top-of-modals.js
@@ -0,0 +1,86 @@
+const Vue = require('nativescript-vue')
+// const VueDevtools = require('nativescript-vue-devtools')
+
+// Vue.use(VueDevtools)
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+const SecondaryModal = {
+  name: 'SecondaryModalComponent',
+  template: `
+   <Frame>
+    <Page>
+        <ActionBar title="Secondary Modal ActionBar"/>
+        <StackLayout>
+            <Label text="I'm a modal that should appear above the other."/>
+            <Button text="Close only this modal" @tap="$modal.close"/>
+        </StackLayout>
+    </Page>
+</Frame>
+  `
+}
+
+const ModalComponent = {
+  props: ['foo'],
+  name: 'ModalComponent',
+  template: `
+   <Frame>
+    <Page>
+        <ActionBar title="Modal ActionBar"/>
+        <StackLayout>
+            <Button text="Open another modal" @tap="openModal"/>
+        </StackLayout>
+    </Page>
+</Frame>
+  `,
+
+  methods: {
+    openModal() {
+      this.$showModal(SecondaryModal, { target: this })
+    }
+  }
+}
+new Vue({
+  data() {
+    return {
+      modalResult: 'No result yet.',
+      animated: true,
+      fullscreen: false,
+      stretched: false
+    }
+  },
+  template: `
+    <Frame>
+      <Page>
+        <ActionBar title="Modals" />
+
+        <StackLayout>
+          <FlexboxLayout justifyContent="center">
+            <Label text="Animated" />
+            <Switch v-model="animated" />
+          </FlexboxLayout>
+          <FlexboxLayout justifyContent="center">
+            <Label text="Stretched" />
+            <Switch v-model="stretched" />
+          </FlexboxLayout>
+          <FlexboxLayout justifyContent="center">
+            <Label text="Fullscreen" />
+            <Switch v-model="fullscreen" />
+          </FlexboxLayout>
+          <Button text="Open Modal" @tap="openModal"/>
+        </StackLayout>
+      </Page>
+    </Frame>
+  `,
+  methods: {
+    openModal() {
+      this.$showModal(ModalComponent, {
+        props: { foo: 'bar' },
+        animated: this.animated,
+        fullscreen: this.fullscreen,
+        stretched: this.stretched
+      })
+    }
+  }
+}).$start()

From fdc4caa1a12a43ddc296725c7038019cf0294b14 Mon Sep 17 00:00:00 2001
From: rigor789 <rigor789@gmail.com>
Date: Sat, 28 Mar 2020 09:20:46 +0100
Subject: [PATCH 2/2] feat(modals): allow passing in target component, ref, or
 view

---
 platform/nativescript/plugins/modal-plugin.js | 14 +++++++++++++-
 samples/app/modals-on-top-of-modals.js        |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/platform/nativescript/plugins/modal-plugin.js b/platform/nativescript/plugins/modal-plugin.js
index ae15052f..0f18d0a7 100644
--- a/platform/nativescript/plugins/modal-plugin.js
+++ b/platform/nativescript/plugins/modal-plugin.js
@@ -1,4 +1,6 @@
+import { isObject, isDef, isPrimitive } from 'shared/util'
 import { updateDevtools } from '../util'
+import { VUE_ELEMENT_REF } from '../renderer/ElementNode'
 
 let sequentialCounter = 0
 
@@ -18,6 +20,16 @@ function serializeModalOptions(options) {
     .join(', ')
 }
 
+function getTargetView(target) {
+  if (isObject(target) && isDef(target.$el)) {
+    return target.$el.nativeView
+  } else if (isDef(target.nativeView)) {
+    return target.nativeView
+  } else if (target[VUE_ELEMENT_REF]) {
+    return target
+  }
+}
+
 function _findParentModalEntry(vm) {
   if (!vm) {
     return false
@@ -91,7 +103,7 @@ export default {
         const modalPage = navEntryInstance.$mount().$el.nativeView
         updateDevtools()
 
-        options.target.nativeView.showModal(modalPage, options)
+        getTargetView(options.target).showModal(modalPage, options)
       })
     }
   }
diff --git a/samples/app/modals-on-top-of-modals.js b/samples/app/modals-on-top-of-modals.js
index ec513057..a87d31ab 100644
--- a/samples/app/modals-on-top-of-modals.js
+++ b/samples/app/modals-on-top-of-modals.js
@@ -30,6 +30,7 @@ const ModalComponent = {
         <ActionBar title="Modal ActionBar"/>
         <StackLayout>
             <Button text="Open another modal" @tap="openModal"/>
+            <Button text="Close this modal" @tap="$modal.close"/>
         </StackLayout>
     </Page>
 </Frame>