notiwind - npm explorer

`

Then in any of your .vue files:

`javascript
// Error notification
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,
)
`

$3

You can render different types of notifications in the same group using a conditional, for example v-if="notification.type === 'info'"

`vue



v-slot="{ notifications }"
enter="transform ease-out duration-300 transition"
enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4"
enter-to="translate-y-0 opacity-100 sm:translate-x-0"
leave="transition ease-in duration-500"
leave-from="opacity-100"
leave-to="opacity-0"
move="transition duration-500"
move-delay="delay-300"
>

v-if="notification.type === 'info'"
class="flex w-full max-w-sm mx-auto mt-4 overflow-hidden bg-white rounded-lg shadow-md"
>

class="w-6 h-6 text-white fill-current"
viewBox="0 0 40 40"
xmlns="http://www.w3.org/2000/svg"
>
d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
/>



{{ notification.title }}

{{ notification.text }}




class="flex w-full max-w-sm mx-auto mt-4 overflow-hidden bg-white rounded-lg shadow-md"
v-if="notification.type === 'warning'"
>


class="w-6 h-6 text-white fill-current"
viewBox="0 0 40 40"
xmlns="http://www.w3.org/2000/svg"
>
d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
/>



{{ notification.title }}

{{ notification.text }}










`

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,
)

// Generic notification
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. |

Check the Vue docs to know more about Enter & Leave Transitions and List Move Transitions.

##### Props for NotificationGroup component, all are optional.

| Name | Type | Description |
| -------- | ------ | ----------------------------------------- |
| position | String | "bottom" or "top" are the posible values. |
| 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 |
| 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). |

$3

`vue
v-slot="{ notifications, close, hovering }"
enter="transform ease-out duration-300 transition"
enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4"
enter-to="translate-y-0 opacity-100 sm:translate-x-0"
leave="transition ease-in duration-500"
leave-from="opacity-100"
leave-to="opacity-0"
move="transition duration-500"
move-delay="delay-300"
>
v-for="notification in notifications"
:key="notification.id"
class="relative px-4 py-3 mt-4 text-red-700 bg-red-100 border border-red-400 rounded"
role="alert"
@mouseover="hovering(notification.id, true)"
@mouseleave="hovering(notification.id, false)"
>
Holy smokes!
Something seriously bad happened.




`

Typescript

Typed notifications supported using the Composition API only.

`typescript
// notiwind.ts
import { createNotifier, NotificationGroup, defineNotificationComponent } from 'notiwind'

export type NotificationSchema = {
title: string
text: string
}

export const notify = createNotifier()
export const Notification = defineNotificationComponent()
export { NotificationGroup }
`

`vue


`

TODO

- Add tests

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Added some feature')
4. Push to the branch (git push origin my-new-feature`)
5. Create new Pull Request

License

MIT