feat: add useNotification (#177)

Author: Tarek Touati

README.md

@@ -63,9 +63,11 @@ Each composition function is designed to degrade gracefully so you can safely us
 - [Window Scroll Position](https://Tarektouati.github.io/vue-use-web/functions/scroll-position.html).
 - [Window Size](https://Tarektouati.github.io/vue-use-web/functions/window-size.html).
 - [Worker](https://Tarektouati.github.io/vue-use-web/functions/worker.html).
-- Bluetooth (WIP).
-- Notification (WIP).
-- Share (WIP).
+- [Notification](https://Tarektouati.github.io/vue-use-web/functions/worker.html).
+- Bluetooth (TODO).
+- Share (TODO).
+- MediaDevices (WIP)
+- ResizeObserver (WIP)
 
 ## Inspiration
 

docs/.vuepress/config.js

@@ -78,7 +78,8 @@ module.exports = {
           '/functions/script',
           '/functions/websocket',
           '/functions/scroll-position',
-          '/functions/window-size'
+          '/functions/window-size',
+          '/functions/notification'
         ]
       },
       {

docs/README.md

@@ -61,8 +61,8 @@ npm install @vue/composition-api vue-use-web
 - [Window Scroll Position](./functions/scroll-position.md).
 - [Window Size](./functions/window-size.md).
 - [Worker](./functions/worker.md).
+- [Notification](./functions/notification.md).
 - Bluetooth <Badge text="WIP" type="warn" />.
-- Notification <Badge text="WIP" type="warn" />.
 - Share <Badge text="WIP" type="warn" />.
 
 ## Usage

docs/functions/notification.md

@@ -0,0 +1,70 @@
+# Web Notification
+
+This functions provides simple web notifications that are displayed outside the page at the system level.
+
+## Methods
+
+`useNotification` exposes the following methods:
+
+```js
+import { useNotification } from 'vue-use-web';
+
+const { showNotifcation } = useNotification('notification title', {
+  icon: 'url of icon',
+  body: 'body of the notification'
+});
+```
+
+| Method          | Signature    | Description              |
+| --------------- | ------------ | ------------------------ |
+| showNotifcation | `() => void` | toggle the notification. |
+
+## Config
+
+`useNotification` function takes a required parameter that is the notification tilte and [optional config](https://developer.mozilla.org/en-US/docs/Web/API/Notification)
+
+```js
+import { useNotification } from 'vue-use-web';
+
+const { showNotifcation } = useNotification(
+  'notification title',
+  {
+    icon: 'url of icon',
+    body: 'body of the notification'
+  },
+  {
+    onClick: () => alert('Notification clicked'),
+    onClose: () => alert('Notification closed')
+  }
+);
+```
+
+## Example
+
+```vue
+<template>
+	<div>
+		<button @click="showNotifcation">Toggle notification</button>
+	</div>
+</template>
+<script>
+import { useNotification } from 'vue-use-web';
+import vueLogo from './logo.png'
+export default {
+	setup() {
+		const { showNotifcation } = useNotification(
+			'notification title',
+			{
+				icon: vueLogo,
+				body: 'body of the notification',
+			},
+			{
+				onClick: () => alert('Notification clicked'),
+				onClose: () => alert('Notification closed'),
+			}
+		);
+		return { showNotifcation };
+	},
+};
+</script>
+```

docs/functions/worker.md

@@ -68,6 +68,4 @@ export default {
 </script>
 ```
 
-## Demo
-
-TODO: Cool Chat app maybe
+<!-- TODO: Demo Cool Chat app maybe -->

scripts/build.js

@@ -1,12 +1,12 @@
-const mkdirpNode = require('mkdirp');
 const chalk = require('chalk');
 const { promisify } = require('util');
+const fs  = require('fs');
 const { configs, utils, paths } = require('./config');
 
-const mkdirp = promisify(mkdirpNode);
+const mkdir = promisify(fs.mkdir);
 
 async function build () {
-  await mkdirp(paths.dist);
+  await mkdir(paths.dist, { recursive: true })
   // eslint-disable-next-line
   console.log(chalk.cyan('Generating ESM build...'));
   await utils.writeBundle(configs.esm, 'vue-use-web.esm.js');

scripts/defs.sh

@@ -6,10 +6,5 @@ mkdir -p ./dist/types
 echo "\e[92mDone"
 
 echo "\e[34mGenerating main declarations..."
-tsc --emitDeclarationOnly
-echo "\e[92mDone"
-
-echo "\e[34mCleaning up declaration folder..."
-mv ./dist/types/src/* ./dist/types
-rm -rf ./dist/types/src
+tsc ./src/*.ts --emitDeclarationOnly --skipLibCheck --declaration --outDir ./dist/types/
 echo "\e[92mDone"

src/Notification.ts

@@ -0,0 +1,52 @@
+import { onMounted, Ref, ref, onUnmounted } from '@vue/composition-api';
+
+type NotificationOptions = {
+  dir?: 'auto' | 'ltr' | 'rtl';
+  lang?: string;
+  body?: string;
+  tag?: string;
+  icon?: string;
+};
+
+type NotificationMethods = {
+  onClick: ((e: Event) => void) | null;
+  onShow: ((e: Event) => void) | null;
+  onError: ((e: Event) => void) | null;
+  onClose: ((e: Event) => void) | null;
+};
+
+const defaultNotificationOptions = {
+  onClick: null,
+  onShow: null,
+  onError: null,
+  onClose: null
+};
+
+export function useNotification(
+  title: string,
+  options: NotificationOptions = {},
+  methods: NotificationMethods = defaultNotificationOptions
+) {
+  const notification: Ref<Notification | null> = ref(null);
+  const requestPermission = async () => {
+    if ('permission' in Notification && Notification.permission !== 'denied') {
+      await Notification.requestPermission();
+    }
+  };
+
+  onMounted(requestPermission);
+
+  onUnmounted(() => {
+    notification.value = null;
+  });
+
+  const showNotifcation = (): void => {
+    notification.value = new Notification(title, options);
+    notification.value.onclick = methods.onClick;
+    notification.value.onshow = methods.onShow;
+    notification.value.onerror = methods.onError;
+    notification.value.onclose = methods.onClose;
+  };
+
+  return { showNotifcation };
+}

src/index.ts

@@ -22,3 +22,4 @@ export * from './WebSocket';
 export * from './WindowScrollPosition';
 export * from './WindowSize';
 export * from './Worker';
+export * from './Notification';