@ruby-native/vue 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -0
- package/index.js +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# @ruby-native/vue
|
|
2
|
+
|
|
3
|
+
Vue components for [Ruby Native](https://rubynative.com). Use these in an Inertia.js + Vue app to emit the signal elements that Ruby Native's iOS and Android apps read to render native tabs, navigation bars, forms, and more.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install @ruby-native/vue
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```vue
|
|
14
|
+
<script setup>
|
|
15
|
+
import { NativeTabs, NativeNavbar, NativeButton, NativeForm } from "@ruby-native/vue"
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<template>
|
|
19
|
+
<NativeNavbar :title="product.name">
|
|
20
|
+
<NativeButton icon="bag" href="/cart" />
|
|
21
|
+
</NativeNavbar>
|
|
22
|
+
|
|
23
|
+
<NativeForm />
|
|
24
|
+
|
|
25
|
+
<!-- your page content -->
|
|
26
|
+
</template>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Each component renders a hidden `data-native-*` signal element that the Ruby Native runtime picks up and turns into the corresponding native UI.
|
|
30
|
+
|
|
31
|
+
## Components
|
|
32
|
+
|
|
33
|
+
- `NativeTabs` - show the native tab bar
|
|
34
|
+
- `NativePush` - request push notification permission
|
|
35
|
+
- `NativeForm` - mark the current page as a form so back navigation skips it
|
|
36
|
+
- `NativeNavbar` - native navigation bar with title and buttons
|
|
37
|
+
- `NativeButton` - native nav bar button (icon, title, href, or click target)
|
|
38
|
+
- `NativeMenuItem` - item inside a native menu
|
|
39
|
+
- `NativeSubmitButton` - native "Save" button that submits a form
|
|
40
|
+
- `NativeOverscroll` - per-page overscroll colors
|
|
41
|
+
|
|
42
|
+
## Docs
|
|
43
|
+
|
|
44
|
+
Full guides at [rubynative.com/docs](https://rubynative.com/docs).
|
|
45
|
+
|
|
46
|
+
## License
|
|
47
|
+
|
|
48
|
+
MIT
|
package/index.js
CHANGED
|
@@ -29,7 +29,7 @@ export const NativeForm = defineComponent({
|
|
|
29
29
|
|
|
30
30
|
export const NativeNavbar = defineComponent({
|
|
31
31
|
name: "NativeNavbar",
|
|
32
|
-
props: { title: { type: String,
|
|
32
|
+
props: { title: { type: String, default: "" } },
|
|
33
33
|
render() {
|
|
34
34
|
return h("div", { "data-native-navbar": this.title, hidden: true }, this.$slots.default?.())
|
|
35
35
|
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ruby-native/vue",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Vue components for Ruby Native",
|
|
5
5
|
"main": "index.js",
|
|
6
|
-
"files": ["index.js"],
|
|
6
|
+
"files": ["index.js", "README.md"],
|
|
7
7
|
"peerDependencies": {
|
|
8
8
|
"vue": ">=3",
|
|
9
9
|
"@inertiajs/vue3": ">=2"
|