add useKeyboard example

Author: vallemar

Diff for: package-lock.json

@@ -8,12 +8,11 @@
     "android": "ns run android --env.watchNodeModules",
     "ios": "ns run ios --env.watchNodeModules",
     "android:debug": "ns debug android --env.watchNodeModules",
-    "ios:debug": "ns debug ios --env.watchNodeModules",
-    "postinstall": "npm link ../publish"
+    "ios:debug": "ns debug ios --env.watchNodeModules"
   },
   "dependencies": {
     "@nativescript/core": "^8.5.3",
-    "@vallemar/nativescript-vueuse": "^0.0.12",
+    "@vallemar/nativescript-vueuse": "^0.0.13",
     "nativescript-vue": "3.0.0-beta.8"
   },
   "devDependencies": {

Diff for: package.json

@@ -4,13 +4,15 @@ import {
 } from 'nativescript-vue';
 import ElementSizeView from "./ElementSizeView.vue";
 import ColorModeView from "./ColorModeView.vue";
-import EventListenerComponent from "./EventListenerComponent.vue";
+import EventListenerView from "./EventListenerView.vue";
 import RootLayoutView from './RootLayoutView.vue';
-import ScreenOrientationComponent from './ScreenOrientationComponent.vue';
+import ScreenOrientationView from './ScreenOrientationView.vue';
 import CustomPage from '@/components/CustomPage.vue';
+import KeyboardView from './KeyboardView.vue';
 import { useColorPalette } from '@vallemar/nativescript-vueuse';
 import { Patelle } from '~/data';
 
+
 const { palette } = useColorPalette<string, Patelle>()
 
 function onUseElementSize() {
@@ -21,17 +23,20 @@ function onUseColorMode() {
 }
 
 function onUseEventListener() {
-  $navigateTo(EventListenerComponent)
+  $navigateTo(EventListenerView)
 }
 
 function onUseRootLayout() {
   $navigateTo(RootLayoutView)
 }
 
 function onUseScreenOrientation() {
-  $navigateTo(ScreenOrientationComponent)
+  $navigateTo(ScreenOrientationView)
 }
 
+function onUseKeyboard() {
+  $navigateTo(KeyboardView)
+}
 </script>
 
 <template>
@@ -43,6 +48,7 @@ function onUseScreenOrientation() {
           <Button @tap="onUseElementSize" text="Use Element Size" class="mt-12 m-1"></Button>
           <Button @tap="onUseColorMode" text="Use Color Mode" class="mt-8 m-1"></Button>
           <Button @tap="onUseEventListener" text="Use Event Listener" class="mt-8 m-1"></Button>
+          <Button @tap="onUseKeyboard" text="Use Keyboard" class="mt-8 m-1"></Button>
           <Button @tap="onUseRootLayout" text="Use Root Layout" class="mt-8 m-1"></Button>
           <Button @tap="onUseScreenOrientation" text="Use Screen Orientation" class="mt-8 m-1"></Button>
         </StackLayout>

Diff for: src/views/EventListenerComponent.vue renamed to src/views/EventListenerView.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import CustomPage from "@/components/CustomPage.vue";
+import { ref } from "nativescript-vue";
+import { useKeyboard } from "@vallemar/nativescript-vueuse";
+
+const el = ref()
+
+const { isOpen, open, close } = useKeyboard({
+  onChange: (isOpenKeyboard: boolean) => {
+    console.log("Keyboard onChange " + isOpenKeyboard);
+  },
+  defaultTarget: el
+});
+
+const openKeyboard = () => open()
+</script>
+
+<template>
+  <CustomPage>
+    <StackLayout class="p-3">
+      <Label class="text-center text-2xl">Keyboard example</Label>
+
+      <FlexboxLayout class=" justify-center items-center mt-10">
+        <Label class="text-center text-lg bg-variant rounded-2xl p-10">Reactive status {{ isOpen }}</Label>
+      </FlexboxLayout>
+      <TextField ref="el" class="bg-variant rounded-full mt-8 pl-3 ios:py-2" hint="Write on me ✍️" />
+      <Button @tap="openKeyboard()" class="mx-1 mt-8 w-1/2" text="Open keyboard"></Button>
+      <Button @tap="close" class="mx-1 mt-8 w-1/2" text="Close keyboard"></Button>
+    </StackLayout>
+  </CustomPage>
+</template>

Diff for: src/views/Home.vue

@@ -1,12 +1,18 @@
-/** @type {import('tailwindcss').Config} */
+const plugin = require("tailwindcss/plugin");
+
 module.exports = {
   content: ['./src/**/*.{css,xml,html,vue,svelte,ts,tsx}'],
   // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
   darkMode: ['class', '.ns-dark'],
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ addVariant }) {
+      addVariant("ios", ".ns-ios &");
+      addVariant("android", ".ns-android &");
+    }),
+  ],
   corePlugins: {
     preflight: false, // disables browser-specific resets
   },