nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
3.4k stars 374 forks source link

Allow multiple notifications containers #1706

Open DarioRega opened 3 weeks ago

DarioRega commented 3 weeks ago

Description

Hello!

I think it would be nice to allow multiple notifications containers, so that we could have different placements for toasts based on the container they are sent to.

After digging in the components i think this changes wouldn't be heavy and i could contribute for this if you agree with this feature request.

My idea would be to allow to pass a custom key for the the useToast and the notifications state and therefore they would have their own references:

Notifications.vue
const toast = useToast(aCustomKey)
const notifications = useState<Notification[]>(aCustomKey, () => [])

So now we could have:

App.vue
<UNotifications :ui="{position:'bottom-auto top-0' }"/>
<UNotifications state-key="aCustomKey" :ui="{position:'bottom-0 top-auto' }"/>

And then within your app we could call the toast handler we want:

Random.vue
const toast = useToast(aCustomKey)

Let me know what you think and if you'll be interested on this knowing that i could contribute fully to it.

Thanks!

Additional context

No response

noook commented 3 weeks ago

That could be interesting :)