readme/doc

Author: farfromrefug

README.md

@@ -941,6 +941,15 @@ import MyComponent from 'MyComponent.vue';
 
 //inside another Vue component
 const options: VueBottomSheetOptions = {
+    // props to be passed to MyComponent
+    props: {
+        someProp: true,
+        anotherProp: false
+    },
+    // listeners to be connected to MyComponent
+    on: {
+        someEvent: (value) => { console.log(value) }
+    }
 };
 this.$showBottomSheet(MyComponent, options)
 ```
@@ -962,7 +971,15 @@ import MyComponent from 'MyComponent.vue';
 
 
 const options: VueBottomSheetOptions = {
-    ...
+    // props to be passed to MyComponent
+    props: {
+        someProp: true,
+        anotherProp: false
+    },
+    // listeners to be connected to MyComponent
+    on: {
+        someEvent: (value) => { console.log(value) }
+    }
 };
 
 const { showBottomSheet, closeBottomSheet } = useBottomSheet()

docs/assets/search.js

@@ -795,7 +795,7 @@ <h3>NativeScript + Vue 2</h3>
 <pre><code class="language-typescript"><span class="hl-6">import</span><span class="hl-2"> </span><span class="hl-7">Vue</span><span class="hl-2"> </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&#39;nativescript-vue&#39;</span><span class="hl-2">;</span><br/><span class="hl-6">import</span><span class="hl-2"> </span><span class="hl-7">BottomSheetPlugin</span><span class="hl-2"> </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&#39;@nativescript-community/ui-material-bottomsheet/vue&#39;</span><span class="hl-2">;</span><br/><span class="hl-6">import</span><span class="hl-2"> { </span><span class="hl-7">install</span><span class="hl-2"> } </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&quot;@nativescript-community/ui-material-bottomsheet&quot;</span><span class="hl-2">;</span><br/><span class="hl-9">install</span><span class="hl-2">();</span><br/><br/><span class="hl-7">Vue</span><span class="hl-2">.</span><span class="hl-9">use</span><span class="hl-2">(</span><span class="hl-7">BottomSheetPlugin</span><span class="hl-2">);</span>
 </code></pre>
 <p>Then you can show a Vue component:</p>
-<pre><code class="language-typescript"><span class="hl-6">import</span><span class="hl-2"> </span><span class="hl-7">MyComponent</span><span class="hl-2"> </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&#39;MyComponent.vue&#39;</span><span class="hl-2">;</span><br/><br/><span class="hl-11">//inside another Vue component</span><br/><span class="hl-12">const</span><span class="hl-2"> </span><span class="hl-15">options</span><span class="hl-2">: </span><span class="hl-16">VueBottomSheetOptions</span><span class="hl-2"> = {</span><br/><span class="hl-2">};</span><br/><span class="hl-12">this</span><span class="hl-2">.</span><span class="hl-9">$showBottomSheet</span><span class="hl-2">(</span><span class="hl-7">MyComponent</span><span class="hl-2">, </span><span class="hl-7">options</span><span class="hl-2">)</span>
+<pre><code class="language-typescript"><span class="hl-6">import</span><span class="hl-2"> </span><span class="hl-7">MyComponent</span><span class="hl-2"> </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&#39;MyComponent.vue&#39;</span><span class="hl-2">;</span><br/><br/><span class="hl-11">//inside another Vue component</span><br/><span class="hl-12">const</span><span class="hl-2"> </span><span class="hl-15">options</span><span class="hl-2">: </span><span class="hl-16">VueBottomSheetOptions</span><span class="hl-2"> = {</span><br/><span class="hl-2">    </span><span class="hl-11">// props to be passed to MyComponent</span><br/><span class="hl-2">    </span><span class="hl-7">props:</span><span class="hl-2"> {</span><br/><span class="hl-2">        </span><span class="hl-7">someProp:</span><span class="hl-2"> </span><span class="hl-12">true</span><span class="hl-2">,</span><br/><span class="hl-2">        </span><span class="hl-7">anotherProp:</span><span class="hl-2"> </span><span class="hl-12">false</span><br/><span class="hl-2">    },</span><br/><span class="hl-2">    </span><span class="hl-11">// listeners to be connected to MyComponent</span><br/><span class="hl-2">    </span><span class="hl-7">on:</span><span class="hl-2"> {</span><br/><span class="hl-2">        </span><span class="hl-9">someEvent</span><span class="hl-7">:</span><span class="hl-2"> (</span><span class="hl-7">value</span><span class="hl-2">) </span><span class="hl-12">=&gt;</span><span class="hl-2"> { </span><span class="hl-7">console</span><span class="hl-2">.</span><span class="hl-9">log</span><span class="hl-2">(</span><span class="hl-7">value</span><span class="hl-2">) }</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">};</span><br/><span class="hl-12">this</span><span class="hl-2">.</span><span class="hl-9">$showBottomSheet</span><span class="hl-2">(</span><span class="hl-7">MyComponent</span><span class="hl-2">, </span><span class="hl-7">options</span><span class="hl-2">)</span>
 </code></pre>
 
 <a href="#nativescript--vue-3" id="nativescript--vue-3" style="color: inherit; text-decoration: none;">
@@ -804,7 +804,7 @@ <h3>NativeScript + Vue 3</h3>
 <pre><code class="language-typescript"><span class="hl-6">import</span><span class="hl-2"> { </span><span class="hl-7">createApp</span><span class="hl-2"> } </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&#39;nativescript-vue&#39;</span><span class="hl-2">;</span><br/><span class="hl-6">import</span><span class="hl-2"> { </span><span class="hl-7">BottomSheetPlugin</span><span class="hl-2"> } </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&#39;@nativescript-community/ui-material-bottomsheet/vue3&#39;</span><span class="hl-2">;</span><br/><span class="hl-6">import</span><span class="hl-2"> { </span><span class="hl-7">install</span><span class="hl-2"> } </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&quot;@nativescript-community/ui-material-bottomsheet&quot;</span><span class="hl-2">;</span><br/><span class="hl-9">install</span><span class="hl-2">();</span><br/><br/><span class="hl-12">const</span><span class="hl-2"> </span><span class="hl-15">app</span><span class="hl-2"> = </span><span class="hl-9">createApp</span><span class="hl-2">(...);</span><br/><span class="hl-7">app</span><span class="hl-2">.</span><span class="hl-9">use</span><span class="hl-2">(</span><span class="hl-7">BottomSheetPlugin</span><span class="hl-2">);</span>
 </code></pre>
 <p>Then you can show a Vue component:</p>
-<pre><code class="language-typescript"><span class="hl-6">import</span><span class="hl-2"> { </span><span class="hl-7">useBottomSheet</span><span class="hl-2"> } </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&quot;@nativescript-community/ui-material-bottomsheet/vue3&quot;</span><span class="hl-2">;</span><br/><span class="hl-6">import</span><span class="hl-2"> </span><span class="hl-7">MyComponent</span><span class="hl-2"> </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&#39;MyComponent.vue&#39;</span><span class="hl-2">;</span><br/><br/><br/><span class="hl-12">const</span><span class="hl-2"> </span><span class="hl-15">options</span><span class="hl-2">: </span><span class="hl-16">VueBottomSheetOptions</span><span class="hl-2"> = {</span><br/><span class="hl-2">    ...</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-12">const</span><span class="hl-2"> { </span><span class="hl-15">showBottomSheet</span><span class="hl-2">, </span><span class="hl-15">closeBottomSheet</span><span class="hl-2"> } = </span><span class="hl-9">useBottomSheet</span><span class="hl-2">()</span><br/><br/><span class="hl-9">showBottomSheet</span><span class="hl-2">(</span><span class="hl-7">MyComponent</span><span class="hl-2">, </span><span class="hl-7">options</span><span class="hl-2">);</span><br/><span class="hl-9">closeBottomSheet</span><span class="hl-2">();</span>
+<pre><code class="language-typescript"><span class="hl-6">import</span><span class="hl-2"> { </span><span class="hl-7">useBottomSheet</span><span class="hl-2"> } </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&quot;@nativescript-community/ui-material-bottomsheet/vue3&quot;</span><span class="hl-2">;</span><br/><span class="hl-6">import</span><span class="hl-2"> </span><span class="hl-7">MyComponent</span><span class="hl-2"> </span><span class="hl-6">from</span><span class="hl-2"> </span><span class="hl-8">&#39;MyComponent.vue&#39;</span><span class="hl-2">;</span><br/><br/><br/><span class="hl-12">const</span><span class="hl-2"> </span><span class="hl-15">options</span><span class="hl-2">: </span><span class="hl-16">VueBottomSheetOptions</span><span class="hl-2"> = {</span><br/><span class="hl-2">    </span><span class="hl-11">// props to be passed to MyComponent</span><br/><span class="hl-2">    </span><span class="hl-7">props:</span><span class="hl-2"> {</span><br/><span class="hl-2">        </span><span class="hl-7">someProp:</span><span class="hl-2"> </span><span class="hl-12">true</span><span class="hl-2">,</span><br/><span class="hl-2">        </span><span class="hl-7">anotherProp:</span><span class="hl-2"> </span><span class="hl-12">false</span><br/><span class="hl-2">    },</span><br/><span class="hl-2">    </span><span class="hl-11">// listeners to be connected to MyComponent</span><br/><span class="hl-2">    </span><span class="hl-7">on:</span><span class="hl-2"> {</span><br/><span class="hl-2">        </span><span class="hl-9">someEvent</span><span class="hl-7">:</span><span class="hl-2"> (</span><span class="hl-7">value</span><span class="hl-2">) </span><span class="hl-12">=&gt;</span><span class="hl-2"> { </span><span class="hl-7">console</span><span class="hl-2">.</span><span class="hl-9">log</span><span class="hl-2">(</span><span class="hl-7">value</span><span class="hl-2">) }</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-12">const</span><span class="hl-2"> { </span><span class="hl-15">showBottomSheet</span><span class="hl-2">, </span><span class="hl-15">closeBottomSheet</span><span class="hl-2"> } = </span><span class="hl-9">useBottomSheet</span><span class="hl-2">()</span><br/><br/><span class="hl-9">showBottomSheet</span><span class="hl-2">(</span><span class="hl-7">MyComponent</span><span class="hl-2">, </span><span class="hl-7">options</span><span class="hl-2">);</span><br/><span class="hl-9">closeBottomSheet</span><span class="hl-2">();</span>
 </code></pre>
 
 <a href="#-13" id="-13" style="color: inherit; text-decoration: none;">