Toast usage clarification

[mariusa]

What you are trying to do Showing a close button on a toast having set only body, similar to https://getbootstrap.com/docs/5.2/components/toasts/#custom-content

What you have already tried

toast.show({ body: msg }, {pos: 'bottom-center'}) // docs say close button should show by default
toast.show({ body: msg, noCloseButton: false }, {pos: 'bottom-center'}) // docs mention `no-close-button`, but that's not a valid object property? Source code has `noCloseButton`
toast.show({ body: msg }, {pos: 'bottom-center', noCloseButton: false}) // not clear where Component reference -> properties should be passed, first or second param? Or on `b-container` ?

https://cdmoro.github.io/bootstrap-vue-3/components/Toast.html#toasts-on-demand

Thanks

[aceofwings]

have to look into this.

[VividLemon]

The docs referenced appear to be for the BToast/BToast.vue component, while the style appears to be using the BToast/plugin.ts useToast. Which appear to have inconsistencies in functionality. At this moment, I don't know how to fix

[mariusa]

Thank you both!

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. Either remove stale label or comment, otherwise this will be closed in 14 days

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity

[mariusa]

Bump as toasts don't work anymore after https://github.com/cdmoro/bootstrap-vue-3/commit/c91801dee1e9264588d88d8998288d13b3a64402 @VividLemon

The docs still explain the old way of using toasts; "Show toast" doesn't work anymore https://cdmoro.github.io/bootstrap-vue-3/components/Toast.html#toasts-on-demand

Even playground still has the old way: https://github.com/cdmoro/bootstrap-vue-3/blob/main/apps/playground/src/App.vue <b-container id="container" ref="container" :toast="{root: true}" class="mt-4" fluid="sm">

[VividLemon]

Ngl I didn't think that stuff on the container even worked so I removed it. But I guess it did work. Honestly, I thought the toasts didn't work at all.

[mariusa]

They did work...

Would you please add that back and make a new release?

[VividLemon]

They did work...

Would you please add that back and make a new release?

https://github.com/cdmoro/bootstrap-vue-3/pull/806

[mariusa]

Thanks, it's working again!

[xmatthias]

is the new release not available on the documentation, or is there something else broken with toasts?

trying the toasts doc page doesn't render ANY toast...

[VividLemon]

is the new release not available on the documentation, or is there something else broken with toasts?

trying the toasts doc page doesn't render ANY toast...

Toast broken

[batmanhit]

Toast is still not working with useToast and is there any expectations on fixing this?

[aceofwings]

Did a quick PR simplifying the toast functionality. With server side rendering users were reporting errors with the injection key return an undefined controller. The toast functionality should be up and running. Tests to come in the next few days.

[soorajsprakash]

so does toast works? Tried right now with useToast() and it was not working, even adding <b-toast> in template is not working.

Any leads?

[adholland]

@soorajsprakash They are working for me on version 0.9.26.

I had issues with the toaster so just handled that minor aspect myself. As an example showing my template: -

<template>
    <div>
        <div v-if="displayToast" class="b-toaster position-fixed p-3" style="z-index: 11" :class="toastPosition">
            <b-toast :id="toastId" 
                :title="toastTitle"
                v-model="displayToast"
                :auto-hide=false
                @destroyed="toastNotificationHidden">
                <div>
                    <b-progress class="mt-2" >
                        <b-progress-bar :value="getSuccessPercentage" variant="success"></b-progress-bar>
                        <b-progress-bar :value="getFailurePercentage" variant="danger"></b-progress-bar>
                    </b-progress>
                    <div v-if="this.resultsArray && this.resultsArray.length">
                        <p id="link-status" @click="showResults" href="#" class="status">
                            {{ getI18n('attachment.workspace.moveAttachment.progress.view') }}
                        </p>
                    </div>
                </div>
            </b-toast>
        </div>
        <div v-show="canShow">
            <DetailsPopup :items="resultsArray" 
                          @closed="modalClosed"
                          ref="progressNotificationResultsPopup" />
        </div>
    </div>
</template>