Merge pull request #354 from Efficy/main

Fix toast examples

Author: mariusa

docs/components/Toast.md

@@ -76,7 +76,7 @@ Use `toast.show()` method to generate your toasts. The method accepts the follow
 
 ## Variants
 
-Toasts can be displayed as variants thru various helper methods or be set in `ToastOptions.varaint`
+Toasts can be displayed as variants thru various helper methods or be set in `ToastOptions.variant`
 
 ```html
 <b-container
@@ -96,16 +96,25 @@ Toasts can be displayed as variants thru various helper methods or be set in `To
   import {useToast} from 'bootstrap-vue-3'
   let toast = useToast()
   let variantshow1 = () => {
-    toast.danger({title: 'Item Deleted'}, {pos: 'bottom-center'})
+    toast.show({title: 'Item Deleted'}, {pos: 'bottom-center', variant: 'danger'})
   }
   let variantshow2 = () => {
-    toast.info({title: 'New Message', body: 'This is a toast'}, {pos: 'bottom-right'})
+    toast.show(
+      {title: 'New Message', body: 'This is a toast'},
+      {pos: 'bottom-right', variant: 'info'}
+    )
   }
   let variantshow3 = () => {
-    toast.warning({title: 'Warning for Item', body: 'Please check list'}, {pos: 'bottom-right'})
+    toast.show(
+      {title: 'Warning for Item', body: 'Please check list'},
+      {pos: 'bottom-right', variant: 'warning'}
+    )
   }
   let variantshow4 = () => {
-    toast.success({title: 'Event Created!', body: 'Bootstrap Event'}, {pos: 'bottom-right'})
+    toast.show(
+      {title: 'Event Created!', body: 'Bootstrap Event'},
+      {pos: 'bottom-right', variant: 'success'}
+    )
   }
 </script>
 ```
@@ -128,17 +137,17 @@ Toasts can be displayed as variants thru various helper methods or be set in `To
 <ClientOnly>
 
 <script lang='ts' setup>
-  import {ref, computed} from 'vue'
-  import {useToast} from 'bootstrap-vue-3'
+  import {ref, computed} from 'vue';
+  import {useToast} from 'bootstrap-vue-3';
 
 
-    let show1 = () => {toast.show({title: 'example title'})}
-    let show2 = () => {toast.info({title: 'example title', body: "This is a toast"})}
+    let show1 = () => {toast.show({title: 'example title'})};
+    let show2 = () => {toast.show({title: 'example title', body: "This is a toast"}, {variant: 'info'})};
 
-    let variantshow1 = () => {toast.danger({title: 'Item Deleted'}, {pos: 'bottom-center'})}
-    let variantshow2 = () => {toast.info({title: 'New Message', body: "This is a toast"}, {pos: 'bottom-right'})}
-    let variantshow3 = () => {toast.warning({title: 'Warning for Item', body: "Please check list"},{pos: 'bottom-right'})}
-    let variantshow4 = () => {toast.success({title: 'Event Created!', body: "Bootstrap Event"},{pos: 'bottom-right'})}
+    let variantshow1 = () => {toast.show({title: 'Item Deleted'}, {pos: 'bottom-center', variant: 'danger'})};
+    let variantshow2 = () => {toast.show({title: 'New Message', body: "This is a toast"}, {pos: 'bottom-right', variant: 'info'})};
+    let variantshow3 = () => {toast.show({title: 'Warning for Item', body: "Please check list"},{pos: 'bottom-right', variant: 'warning'})};
+    let variantshow4 = () => {toast.show({title: 'Event Created!', body: "Bootstrap Event"},{pos: 'bottom-right', variant: 'success'})};
 </script>
 
 </ClientOnly>

src/App.vue

@@ -1842,7 +1842,7 @@
     <b-toast v-model="showToast" title="Hello" body="cow"></b-toast>
     <b-button class="mt-3" @click="createToast()">Show Toast</b-button>
     <b-button class="mt-3" @click="createToast2()">Show Toast 2</b-button>
-
+    <b-button class="mt-3" @click="createToastError()">Show a danger Toast</b-button>
     <b-button class="mt-3" @click="consoleLog">Hide Toast</b-button>
     <div id="demo"></div>
   </b-container>
@@ -2039,6 +2039,15 @@ export default defineComponent({
       )
     }
 
+    const createToastError = () => {
+      c?.show(
+        {
+          body: 'This is a danger toast!!',
+        },
+        {variant: 'danger'}
+      )
+    }
+
     function tagValidator(tag: string) {
       // Individual tag validator function
       return tag === tag.toLowerCase() && tag.length > 2 && tag.length < 6
@@ -2061,6 +2070,7 @@ export default defineComponent({
       loading,
       createToast,
       createToast2,
+      createToastError,
       password,
       showPassword,
       description,