chore(example): Add Haptics page (tauri-apps#2032)

Author: FabianLars

examples/api/src-tauri/capabilities/mobile.json

@@ -15,6 +15,10 @@
     "geolocation:allow-check-permissions",
     "geolocation:allow-request-permissions",
     "geolocation:allow-watch-position",
-    "geolocation:allow-get-current-position"
+    "geolocation:allow-get-current-position",
+    "haptics:allow-impact-feedback",
+    "haptics:allow-notification-feedback",
+    "haptics:allow-selection-feedback",
+    "haptics:allow-vibrate"
   ]
 }

examples/api/src/App.svelte

@@ -21,6 +21,7 @@
   import Scanner from './views/Scanner.svelte'
   import Biometric from './views/Biometric.svelte'
   import Geolocation from './views/Geolocation.svelte'
+  import Haptics from './views/Haptics.svelte'
 
   import { onMount, tick } from 'svelte'
   import { ask } from '@tauri-apps/plugin-dialog'
@@ -130,6 +131,11 @@
       label: 'Geolocation',
       component: Geolocation,
       icon: 'i-ph-map-pin'
+    },
+    isMobile && {
+      label: 'Haptics',
+      component: Haptics,
+      icon: 'i-ph-vibrate'
     }
   ]
 

examples/api/src/views/Haptics.svelte

@@ -0,0 +1,46 @@
+<script>
+  import {
+    vibrate,
+    impactFeedback,
+    notificationFeedback,
+    selectionFeedback
+  } from '@tauri-apps/plugin-haptics'
+
+  export let onMessage
+</script>
+
+<div>
+  <button
+    class="btn"
+    on:click={() => vibrate(300).then(onMessage).catch(onMessage)}
+    >vibrate short</button
+  >
+  <button
+    class="btn"
+    on:click={() => vibrate(1500).then(onMessage).catch(onMessage)}
+    >vibrate long</button
+  >
+  <button
+    class="btn"
+    on:click={() => impactFeedback('medium').then(onMessage).catch(onMessage)}
+    >impact medium</button
+  >
+  <button
+    class="btn"
+    on:click={() =>
+      notificationFeedback('warning').then(onMessage).catch(onMessage)}
+    >notification warning</button
+  >
+  <button
+    class="btn"
+    on:click={() => selectionFeedback().then(onMessage).catch(onMessage)}
+    >selection</button
+  >
+</div>
+
+<br />
+
+<p>
+  Depending on your device settings for haptic feedback some of the buttons may
+  not work.
+</p>