Refactor #3965 - Refactor on Toast

components/lib/toast/BaseToast.vue

@@ -4,7 +4,6 @@ import { useStyle } from 'primevue/usestyle';
 
 const styles = `
 .p-toast {
-    position: fixed;
     width: 25rem;
 }
 
@@ -17,41 +16,15 @@ const styles = `
     flex: 1 1 auto;
 }
 
-.p-toast-top-right {
-    top: 20px;
-    right: 20px;
-}
-
-.p-toast-top-left {
-    top: 20px;
-    left: 20px;
-}
-
-.p-toast-bottom-left {
-    bottom: 20px;
-    left: 20px;
-}
-
-.p-toast-bottom-right {
-    bottom: 20px;
-    right: 20px;
-}
-
 .p-toast-top-center {
-    top: 20px;
-    left: 50%;
     transform: translateX(-50%);
 }
 
 .p-toast-bottom-center {
-    bottom: 20px;
-    left: 50%;
     transform: translateX(-50%);
 }
 
 .p-toast-center {
-    left: 50%;
-    top: 50%;
     min-width: 20vw;
     transform: translate(-50%, -50%);
 }
@@ -98,6 +71,17 @@ const styles = `
 }
 `;
 
+// Position
+const inlineStyles = {
+    root: ({ position }) => ({
+        position: 'fixed',
+        top: position === 'top-right' || position === 'top-left' || position === 'top-center' ? '20px' : position === 'center' ? '50%' : null,
+        right: (position === 'top-right' || position === 'bottom-right') && '20px',
+        bottom: (position === 'bottom-left' || position === 'bottom-right' || position === 'bottom-center') && '20px',
+        left: position === 'top-left' || position === 'bottom-left' ? '20px' : position === 'center' || position === 'top-center' || position === 'bottom-center' ? '50%' : null
+    })
+};
+
 const classes = {
     root: ({ props, instance }) => [
         'p-toast p-component p-toast-' + props.position,
@@ -185,6 +169,7 @@ export default {
     },
     css: {
         classes,
+        inlineStyles,
         loadStyle
     },
     provide() {

components/lib/toast/Toast.vue

@@ -1,6 +1,6 @@
 <template>
     <Portal>
-        <div ref="container" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }">
+        <div ref="container" :class="cx('root')" :style="sx('root', true, { position })" v-bind="{ ...$attrs, ...ptm('root') }">
             <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="ptm('message')">
                 <ToastMessage
                     v-for="msg of messages"