Refactor #3965 - For Message

components/lib/message/BaseMessage.vue

@@ -0,0 +1,107 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-message-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.p-message-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-message-close.p-link {
+    margin-left: auto;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-message-enter-from {
+    opacity: 0;
+}
+
+.p-message-enter-active {
+    transition: opacity 0.3s;
+}
+
+.p-message.p-message-leave-from {
+    max-height: 1000px;
+}
+
+.p-message.p-message-leave-to {
+    max-height: 0;
+    opacity: 0;
+    margin: 0 !important;
+}
+
+.p-message-leave-active {
+    overflow: hidden;
+    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
+}
+
+.p-message-leave-active .p-message-close {
+    display: none;
+}
+`;
+
+const classes = {
+    root: ({ props }) => 'p-message p-component p-message-' + props.severity,
+    wrapper: 'p-message-wrapper',
+    icon: ({ props }) => ['p-message-icon', props.icon],
+    text: 'p-message-text',
+    button: 'p-message-close p-link',
+    buttonIcon: ({ props }) => ['p-message-close-icon', props.closeIcon]
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_message_style', manual: true });
+
+export default {
+    name: 'BaseMessage',
+    extends: BaseComponent,
+    props: {
+        severity: {
+            type: String,
+            default: 'info'
+        },
+        closable: {
+            type: Boolean,
+            default: true
+        },
+        sticky: {
+            type: Boolean,
+            default: true
+        },
+        life: {
+            type: Number,
+            default: 3000
+        },
+        icon: {
+            type: String,
+            default: undefined
+        },
+        closeIcon: {
+            type: String,
+            default: undefined
+        },
+        closeButtonProps: {
+            type: null,
+            default: null
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>