From 125d62bee1c99b9035f1dba41e7172d7541dda60 Mon Sep 17 00:00:00 2001 From: emmanuelsw Date: Tue, 10 Dec 2024 18:00:07 -0500 Subject: [PATCH] Release v2.1.0 --- CHANGELOG.md | 11 ++- README.md | 203 ++++++++++++++++++++++++++++----------------------- package.json | 2 +- 3 files changed, 122 insertions(+), 94 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f89269..a9ae1a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,20 @@ # CHANGELOG + + +### 2.1.0 (2024-12-10) + +- Update core and example dependencies ([#51](https://github.com/emmanuelsw/notiwind/pull/51)) +- New linter/formatting configuration with ESlint v9 ([#51](https://github.com/emmanuelsw/notiwind/pull/51)) +- Use pnpm instead of yarn ([#51](https://github.com/emmanuelsw/notiwind/pull/51)) +- NotificationGroup: fix extraneous non-props warning in Vue 3.5+ ([#49](https://github.com/emmanuelsw/notiwind/pull/49)). Thanks [Nebual](https://github.com/Nebual)! + ### 2.0.2 (2023-07-04) - Prevent notification to be closed if hovered ([#38](https://github.com/emmanuelsw/notiwind/pull/38)). Thanks [Joao-VictorF](https://github.com/Joao-VictorF)! -- Immediate effect max notifications ([#41](https://github.com/emmanuelsw/notiwind/pull/41)). Thanks [Tamas-hi](Tamas-hi)! +- Immediate effect max notifications ([#41](https://github.com/emmanuelsw/notiwind/pull/41)). Thanks [Tamas-hi](https://github.com/Tamas-hi)! - Update core and example dependencies diff --git a/README.md b/README.md index 36ddea7..2a6efdd 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ - # Notiwind @@ -19,7 +18,7 @@ This is a fork and port of [vue3-vt-notifications](https://github.com/killmenot/ - 100% Customizable - Composition API support - Create different groups of notifications -- Tailwind's JIT support +- Permanent and stay on hover options ## 🤖 Demo @@ -28,7 +27,7 @@ This is a fork and port of [vue3-vt-notifications](https://github.com/killmenot/ ## ⚡️ Installation ```bash -yarn add notiwind +pnpm add notiwind ``` or @@ -44,9 +43,7 @@ import { createApp } from 'vue' import Notifications from 'notiwind' import App from './App.vue' -createApp(App) - .use(Notifications) - .mount('#app') +createApp(App).use(Notifications).mount('#app') ``` ## 🍞 How to use @@ -69,23 +66,29 @@ Then, trigger notifications from your `.vue` files: ###### Options API ```javascript -this.$notify({ - group: "foo", - title: "Success", - text: "Your account was registered!" -}, 2000) // 2s +this.$notify( + { + group: 'foo', + title: 'Success', + text: 'Your account was registered!', + }, + 2000, +) // 2s ``` ###### Composition API ```javascript -import { notify } from "notiwind" - -notify({ - group: "foo", - title: "Success", - text: "Your account was registered!" -}, 4000) // 4s +import { notify } from 'notiwind' + +notify( + { + group: 'foo', + title: 'Success', + text: 'Your account was registered!', + }, + 4000, +) // 4s ``` ### Basic example @@ -136,11 +139,14 @@ For example in your `App.vue` Then in any of your `.vue` files: ```javascript -this.$notify({ - group: "foo", - title: "Success", - text: "Your account was registered!" -}, 2000) // 2s +this.$notify( + { + group: 'foo', + title: 'Success', + text: 'Your account was registered!', + }, + 2000, +) // 2s ``` The first argument is an object containing the data for the `Notification` element, it's important to specify the group where the notificatoins are going to be displayed, the second argument is the timeout. The default timeout is 3 seconds. @@ -148,14 +154,16 @@ The first argument is an object containing the data for the `Notification` eleme If you need to keep the notification on the screen forever use `-1` as a timeout: ```javascript -this.$notify({ - group: "foo", - title: "Success", - text: "Your account was registered!" -}, -1) // it's not going to disappear automatically +this.$notify( + { + group: 'foo', + title: 'Success', + text: 'Your account was registered!', + }, + -1, +) // it's not going to disappear automatically ``` - ### Example with differents groups You can use the `NotificationGroup` component to have different types of notifications. For example, notifications error messages in top center and generic app notifications in bottom-right corner. @@ -244,18 +252,24 @@ Then in any of your `.vue` files: ```javascript // Error notification -this.$notify({ - group: "error", - title: "Error", - text: "Your email is already used!" -}, 4000) +this.$notify( + { + group: 'error', + title: 'Error', + text: 'Your email is already used!', + }, + 4000, +) // Generic notification -this.$notify({ - group: "generic", - title: "Info", - text: "This channel archived by the owner" -}, 4000) +this.$notify( + { + group: 'generic', + title: 'Info', + text: 'This channel archived by the owner', + }, + 4000, +) ``` ### Using different types of notifications @@ -336,55 +350,61 @@ Then in any of your `.vue` files: ```javascript // Error notification -this.$notify({ - title: "Info", - text: "This channel archived by the owner!", - type: "info", - group: "foo", -}, 4000) +this.$notify( + { + title: 'Info', + text: 'This channel archived by the owner!', + type: 'info', + group: 'foo', + }, + 4000, +) // Generic notification -this.$notify({ - title: "Warning", - text: "Your image size is too large!", - type: "warning", - group: "foo", -}, 4000) +this.$notify( + { + title: 'Warning', + text: 'Your image size is too large!', + type: 'warning', + group: 'foo', + }, + 4000, +) ``` ## Props ##### Props for the `Notification` component, all are optional. -| Name | Type | Default | Description | -| ---------------- | ------ | ---------- | ----------------------------------------------- | -| maxNotifications | Number | 10 | Maximum notifications displayed simultaneously | -| enter | String | "" | *enter-active-class* transition classes. Applied during the entire entering phase. | -| enterFrom | String | "" | *enter-from-class* transition classes. Starting state for enter. | -| enterTo | String | "" | *enter-to-class* transition classes. Ending state for enter. | -| leave | String | "" | *leave-active-class* transition classes. Applied during the entire leaving phase. | -| leaveFrom | String | "" | *leave-from-class* transition classes. Starting state for leave. | -| leaveTo | String | "" | *leave-to-class* transition classes. Ending state for leave. | -| move | String | "" | *move-class* transition classes. Added when items are changing positions. | -| moveDelay | String | "" | Delay between the position change. `delay-300` recommended value. | +| Name | Type | Default | Description | +| ---------------- | ------ | ------- | ---------------------------------------------------------------------------------- | +| maxNotifications | Number | 10 | Maximum notifications displayed simultaneously | +| enter | String | "" | _enter-active-class_ transition classes. Applied during the entire entering phase. | +| enterFrom | String | "" | _enter-from-class_ transition classes. Starting state for enter. | +| enterTo | String | "" | _enter-to-class_ transition classes. Ending state for enter. | +| leave | String | "" | _leave-active-class_ transition classes. Applied during the entire leaving phase. | +| leaveFrom | String | "" | _leave-from-class_ transition classes. Starting state for leave. | +| leaveTo | String | "" | _leave-to-class_ transition classes. Ending state for leave. | +| move | String | "" | _move-class_ transition classes. Added when items are changing positions. | +| moveDelay | String | "" | Delay between the position change. `delay-300` recommended value. | Check the Vue docs to know more about [Enter & Leave Transitions](https://v3.vuejs.org/guide/transitions-enterleave.html#transition-classes) and [List Move Transitions](https://v3.vuejs.org/guide/transitions-list.html#list-move-transitions). ##### Props for `NotificationGroup` component, all are optional. -| Name | Type | Description | -| -------- | ------ | --------------------------------------- | +| Name | Type | Description | +| -------- | ------ | ----------------------------------------- | | position | String | "bottom" or "top" are the posible values. | -| group | String | Name of the group of notifications. | +| group | String | Name of the group of notifications. | ## Defualt scoped slots Scope props: -| Name | Type | Description | -| ------------- | -------- | ------------------------------------------------------------------------ | -| notifications | Array | Array of notification objects. | -| close | Function | Closes the notification. Expects the notification ID as parameter | +| Name | Type | Description | +| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| notifications | Array | Array of notification objects. | +| close | Function | Closes the notification. Expects the notification ID as parameter | | hovering | Function | Prevents notification from closing if being hovered. Expected the notification ID, the hover value (true or false) and optionally, a timeout to be used in the mouse leave (hover ended). | ### Example @@ -435,44 +455,43 @@ Typed notifications supported using the Composition API only. ```typescript // notiwind.ts -import { - createNotifier, - NotificationGroup, - defineNotificationComponent, -} from "notiwind"; +import { createNotifier, NotificationGroup, defineNotificationComponent } from 'notiwind' export type NotificationSchema = { - title: string; - text: string; -}; + title: string + text: string +} -export const notify = createNotifier(); -export const Notification = defineNotificationComponent(); -export { NotificationGroup }; +export const notify = createNotifier() +export const Notification = defineNotificationComponent() +export { NotificationGroup } ``` ```vue ``` ## TODO -* Add tests +- Add tests ## Contributing diff --git a/package.json b/package.json index ba007e7..d6e306d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "notiwind", "description": "A headless Vue 3 notification library to use with Tailwind CSS.", - "version": "2.0.3", + "version": "2.1.0", "main": "dist/index.common.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts",