Update Multiple and Sticky samples

doc/toast/MultipleDoc.vue

@@ -3,10 +3,7 @@
         <p>Multiple messages are displayed by passing an array to the <i>show</i> method.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <div class="flex flex-wrap gap-2">
+        <Button label="Multiple" severity="warning" @click="showMultiple()" />
-            <Button label="Multiple" severity="warning" @click="showMultiple()" />
-            <Button label="Clear" @click="clear()" />
-        </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,18 +15,13 @@ export default {
             code: {
                 basic: `
 <Toast />
-<div class="flex flex-wrap gap-2">
+<Button label="Multiple" severity="warning" @click="showMultiple()" />
-    <Button label="Multiple" severity="warning" @click="showMultiple()" />
+`,
-    <Button label="Clear" @click="clear()" />
-</div>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <div class="flex flex-wrap gap-2">
+        <Button label="Multiple" severity="warning" @click="showMultiple()" />
-            <Button label="Multiple" severity="warning" @click="showMultiple()" />
-            <Button label="Clear" @click="clear()" />
-        </div>
     </div>
 </template>
 
@@ -41,9 +33,6 @@ export default {
             this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
             this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
             this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
-        },
-        clear() {
-            this.$toast.removeAllGroups();
         }
     }
 };
@@ -52,10 +41,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <div class="flex flex-wrap gap-2">
+        <Button label="Multiple" severity="warning" @click="showMultiple()" />
-            <Button label="Multiple" severity="warning" @click="showMultiple()" />
-            <Button label="Clear" @click="clear()" />
-        </div>
     </div>
 </template>
 
@@ -69,10 +55,6 @@ const showMultiple = () => {
     toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
     toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
 };
-
-const clear = () => {
-    toast.removeAllGroups();
-};
 <\/script>`
             }
         };
@@ -83,9 +65,6 @@ const clear = () => {
             this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
             this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
             this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
-        },
-        clear() {
-            this.$toast.removeAllGroups();
         }
     }
 };

doc/toast/StickyDoc.vue

@@ -3,7 +3,10 @@
         <p>A message disappears after 3000ms defined the <i>life</i> option, set <i>sticky</i> option to display messages that do not hide automatically.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Button @click="showSticky" label="Sticky" />
+        <div class="flex flex-wrap gap-2">
+            <Button @click="showSticky" label="Sticky" severity="success" />
+            <Button label="Clear" @click="clear()" />
+        </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +18,16 @@ export default {
             code: {
                 basic: `
 <Toast />
-<Button @click="showSticky" label="Sticky" />`,
+<Button @click="showSticky" label="Sticky" />
+<Button label="Clear" @click="clear()" />`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <Button @click="showSticky" label="Sticky" />
+        <div class="flex flex-wrap gap-2">
+            <Button @click="showSticky" label="Sticky" severity="success" />
+            <Button label="Clear" @click="clear()" />
+        </div>
     </div>
 </template>
 
@@ -29,6 +36,9 @@ export default {
     methods: {
         showSticky() {
             this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
+        },
+        clear() {
+            this.$toast.removeAllGroups();
         }
     }
 };
@@ -37,7 +47,10 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <Button @click="showSticky" label="Sticky" />
+        <div class="flex flex-wrap gap-2">
+            <Button @click="showSticky" label="Sticky" severity="success" />
+            <Button label="Clear" @click="clear()" />
+        </div>
     </div>
 </template>
 
@@ -47,7 +60,11 @@ const toast = useToast();
 
 const showSticky = () => {
     toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
-};
+}
+
+const clear = () => {
+    toast.removeAllGroups();
+}
 <\/script>`
             }
         };
@@ -55,6 +72,9 @@ const showSticky = () => {
     methods: {
         showSticky() {
             this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content' });
+        },
+        clear() {
+            this.$toast.removeAllGroups();
         }
     }
 };