chore: readme

Author: farfromrefug

README.md

@@ -926,7 +926,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';
@@ -945,6 +945,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
@@ -2811,4 +2837,101 @@ An attribute to set the helper text of the textview.
 
 A boolean attribute to set the floating state of the textview.
 
-</details>
+</details>
+
+[](#demos-and-development)
+
+## Demos and Development
+
+
+### Repo Setup
+
+The repo uses submodules. If you did not clone with ` --recursive` then you need to call
+```
+git submodule update --init
+```
+
+The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.
+
+To develop and test:
+if you use `yarn` then run `yarn`
+if you use `pnpm` then run `pnpm i`
+
+**Interactive Menu:**
+
+To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
+
+### Build
+
+```bash
+npm run build.all
+```
+WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`
+
+### Demos
+
+```bash
+npm run demo.[ng|react|svelte|vue].[ios|android]
+
+npm run demo.svelte.ios # Example
+```
+
+Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`
+Instead you work in `demo-snippets/[ng|react|svelte|vue]`
+You can start from the `install.ts` of each flavor to see how to register new demos 
+
+
+[](#contributing)
+
+## Contributing
+
+### Update repo 
+
+You can update the repo files quite easily
+
+First update the submodules
+
+```bash
+npm run update
+```
+
+Then commit the changes
+Then update common files
+
+```bash
+npm run sync
+```
+Then you can run `yarn|pnpm`, commit changed files if any
+
+### Update readme 
+```bash
+npm run readme
+```
+
+### Update doc 
+```bash
+npm run doc
+```
+
+### Publish
+
+The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)
+Simply run 
+```shell
+npm run publish
+```
+
+### modifying submodules
+
+The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
+One easy solution is t modify `~/.gitconfig` and add
+```
+[url "ssh://[email protected]/"]
+	pushInsteadOf = https://github.com/
+```
+
+[](#questions)
+
+## Questions
+
+If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

docs/assets/highlight.css

@@ -35,6 +35,8 @@
     --dark-hl-16: #4EC9B0;
     --light-hl-17: #000000FF;
     --dark-hl-17: #D4D4D4;
+    --light-hl-18: #000000;
+    --dark-hl-18: #C8C8C8;
     --light-code-background: #FFFFFF;
     --dark-code-background: #1E1E1E;
 }
@@ -58,6 +60,7 @@
     --hl-15: var(--light-hl-15);
     --hl-16: var(--light-hl-16);
     --hl-17: var(--light-hl-17);
+    --hl-18: var(--light-hl-18);
     --code-background: var(--light-code-background);
 } }
 
@@ -80,6 +83,7 @@
     --hl-15: var(--dark-hl-15);
     --hl-16: var(--dark-hl-16);
     --hl-17: var(--dark-hl-17);
+    --hl-18: var(--dark-hl-18);
     --code-background: var(--dark-code-background);
 } }
 
@@ -102,6 +106,7 @@
     --hl-15: var(--light-hl-15);
     --hl-16: var(--light-hl-16);
     --hl-17: var(--light-hl-17);
+    --hl-18: var(--light-hl-18);
     --code-background: var(--light-code-background);
 }
 
@@ -124,6 +129,7 @@
     --hl-15: var(--dark-hl-15);
     --hl-16: var(--dark-hl-16);
     --hl-17: var(--dark-hl-17);
+    --hl-18: var(--dark-hl-18);
     --code-background: var(--dark-code-background);
 }
 
@@ -145,4 +151,5 @@
 .hl-15 { color: var(--hl-15); }
 .hl-16 { color: var(--hl-16); }
 .hl-17 { color: var(--hl-17); }
+.hl-18 { color: var(--hl-18); }
 pre, code { background: var(--code-background); }