Can I pass a tailwind color to UNotifications with toast.add() ?

[khalidzamer]

Hello,
I am trying to find the best way to pass color to the notification component which sits in app.vue, but the toast.add() is in a different component, and if this only works if timeout is applied, is there a config change that allows me to globally use it like so:

    toast.add({
        id: 'success-submit',
        color: 'bg-emerald-400', // or green
        title: 'Success is Colorful!',
        timeout: 5000,
        icon: 'i-heroicons-check-circle',
    })

I tried safe listing colors as mentioned here , it worked with red, on the icon, but not on the progress animation as it did not show at all , but did not work with green or blue .

My goal is to be able to use toasts with different colors in different occasions, if I use color in the toast.add() it will not show the colored timeout animation,

[benjamincanac]

Yes you can! However, we have an issue with the smart safelisting that doesn't detect when the color is passed to toast.add but only when using <UNotification color="..." />.

You can read more here: #375

I was thinking of safelisting all the colors for the notification component only.

[khalidzamer]

@benjamincanac

I was thinking of safelisting all the colors for the notification component only.

That sounds good, what about an additional app.config that could be a globally agreed-upon and satisfactory convention like:

ui: {
        primary: 'orange',
        gray: 'slate',

        success: 'bg-emerald-500 dark:bg-emerald-400', // greenish
        error: 'bg-rose-500 dark:bg-rose-400 ',      // reddish 
        warning: ' ',  //yellowish
        info: ' '        // blueish ,
        MyCustom: ' ', // a shade of primary
            }

what do you think about such an approach?

[khalidzamer]

@benjamincanac
Also this color maybe should automatically impact the icon inside the notification in addition to the progress bar.

In a situation where I'm using toast.add() inside a submit form function along with validation using if / else

const submitForm = async () => {
    console.log('Submitting...')
    const result = await v$.value.$validate();
    if (result) {
        submitting.value = true
        toast.add({
            id: 'update_downloaded',
            title: 'Noice!',
            description: 'It will be ',
            timeout: 5000,
            icon: 'i-heroicons-check-circle',
            ui: {
                "progress": {
                    "base": 'absolute bottom-0 end-0 start-0 h-1',
                    "background": 'bg-emerald-500 dark:bg-emerald-400',
                },
                "icon": {
                    color: 'text-emerald-500 dark:text-emerald-400'
                }
            }
        })
        setTimeout(() => {
            submitting.value = false
        }, 1000)
        setTimeout(() => {
            usePinia().state.value.interface.isSlideOverOpen = false
        }, 1000)
    } else {
        toast.add({
            id: 'update_downloaded',
            title: 'Something is not right!',
            description: 'Double check your inputs ',
            timeout: 5000,
            icon: 'i-heroicons-exclamation-triangle',
            ui: {
                "progress": {
                    "base": 'absolute bottom-0 end-0 start-0 h-1',
                    "background": 'bg-rose-500 dark:bg-rose-400',
                },
                "icon": {
                    color: 'text-rose-500 dark:text-rose-400'
                }
            }
        })
    }
};

If there is a way to combine the app.config customization for colors to use corresponding icons, such as :

success-icon: 'i-heroicons-check-circle',
error-icon: 'i-heroicons-exclamation-triangle',
warning-icon: 'i-heroicons-exclamation-triangle',

this might help condense the code a lot and keep app-wide consistency.

[benjamincanac]

Sure thing, we could add a type entry in the app.config.ts for the toast.add specifically that would set the icon and color.