From 1c3be8b84251b8723417ee894702a6bba0cc9ac1 Mon Sep 17 00:00:00 2001 From: Tarek Touati <209480@supinfo.com> Date: Fri, 8 May 2020 14:59:11 +0200 Subject: [PATCH] feat: add useNotification (#177) --- README.md | 8 ++-- docs/.vuepress/config.js | 3 +- docs/README.md | 2 +- docs/functions/notification.md | 70 ++++++++++++++++++++++++++++++++++ docs/functions/worker.md | 4 +- scripts/build.js | 6 +-- scripts/defs.sh | 7 +--- src/Notification.ts | 52 +++++++++++++++++++++++++ src/index.ts | 1 + 9 files changed, 136 insertions(+), 17 deletions(-) create mode 100644 docs/functions/notification.md create mode 100644 src/Notification.ts diff --git a/README.md b/README.md index 9e8d2cc..17a39e2 100644 --- a/README.md +++ b/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 diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 465c9b2..5264e01 100644 --- a/docs/.vuepress/config.js +++ b/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' ] }, { diff --git a/docs/README.md b/docs/README.md index 74c129f..dd83dd9 100644 --- a/docs/README.md +++ b/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 . -- Notification . - Share . ## Usage diff --git a/docs/functions/notification.md b/docs/functions/notification.md new file mode 100644 index 0000000..08f2c44 --- /dev/null +++ b/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 + + +``` \ No newline at end of file diff --git a/docs/functions/worker.md b/docs/functions/worker.md index 6c56805..e0ba5f8 100644 --- a/docs/functions/worker.md +++ b/docs/functions/worker.md @@ -68,6 +68,4 @@ export default { ``` -## Demo - -TODO: Cool Chat app maybe + diff --git a/scripts/build.js b/scripts/build.js index fa0d899..06cc178 100644 --- a/scripts/build.js +++ b/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'); diff --git a/scripts/defs.sh b/scripts/defs.sh index bb26818..9324d3c 100755 --- a/scripts/defs.sh +++ b/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" diff --git a/src/Notification.ts b/src/Notification.ts new file mode 100644 index 0000000..0d96f31 --- /dev/null +++ b/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 = 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 }; +} diff --git a/src/index.ts b/src/index.ts index b47ae42..4280b6f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -22,3 +22,4 @@ export * from './WebSocket'; export * from './WindowScrollPosition'; export * from './WindowSize'; export * from './Worker'; +export * from './Notification';