Refactor #3965 - For Dialog

components/lib/dialog/BaseDialog.vue

@@ -0,0 +1,330 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-dialog-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+}
+
+.p-dialog-mask.p-component-overlay {
+    pointer-events: auto;
+}
+
+.p-dialog {
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+    max-height: 90%;
+    transform: scale(1);
+}
+
+.p-dialog-content {
+    overflow-y: auto;
+}
+
+.p-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+}
+
+.p-dialog-footer {
+    flex-shrink: 0;
+}
+
+.p-dialog .p-dialog-header-icons {
+    display: flex;
+    align-items: center;
+}
+
+.p-dialog .p-dialog-header-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Fluid */
+.p-fluid .p-dialog-footer .p-button {
+    width: auto;
+}
+
+/* Animation */
+/* Center */
+.p-dialog-enter-active {
+    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+.p-dialog-leave-active {
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.p-dialog-enter-from,
+.p-dialog-leave-to {
+    opacity: 0;
+    transform: scale(0.7);
+}
+
+/* Top, Bottom, Left, Right, Top* and Bottom* */
+.p-dialog-top .p-dialog,
+.p-dialog-bottom .p-dialog,
+.p-dialog-left .p-dialog,
+.p-dialog-right .p-dialog,
+.p-dialog-topleft .p-dialog,
+.p-dialog-topright .p-dialog,
+.p-dialog-bottomleft .p-dialog,
+.p-dialog-bottomright .p-dialog {
+    margin: 0.75rem;
+    transform: translate3d(0px, 0px, 0px);
+}
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-top .p-dialog-leave-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-leave-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-left .p-dialog-leave-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-right .p-dialog-leave-active,
+.p-dialog-topleft .p-dialog-enter-active,
+.p-dialog-topleft .p-dialog-leave-active,
+.p-dialog-topright .p-dialog-enter-active,
+.p-dialog-topright .p-dialog-leave-active,
+.p-dialog-bottomleft .p-dialog-enter-active,
+.p-dialog-bottomleft .p-dialog-leave-active,
+.p-dialog-bottomright .p-dialog-enter-active,
+.p-dialog-bottomright .p-dialog-leave-active {
+    transition: all 0.3s ease-out;
+}
+.p-dialog-top .p-dialog-enter-from,
+.p-dialog-top .p-dialog-leave-to {
+    transform: translate3d(0px, -100%, 0px);
+}
+.p-dialog-bottom .p-dialog-enter-from,
+.p-dialog-bottom .p-dialog-leave-to {
+    transform: translate3d(0px, 100%, 0px);
+}
+.p-dialog-left .p-dialog-enter-from,
+.p-dialog-left .p-dialog-leave-to,
+.p-dialog-topleft .p-dialog-enter-from,
+.p-dialog-topleft .p-dialog-leave-to,
+.p-dialog-bottomleft .p-dialog-enter-from,
+.p-dialog-bottomleft .p-dialog-leave-to {
+    transform: translate3d(-100%, 0px, 0px);
+}
+.p-dialog-right .p-dialog-enter-from,
+.p-dialog-right .p-dialog-leave-to,
+.p-dialog-topright .p-dialog-enter-from,
+.p-dialog-topright .p-dialog-leave-to,
+.p-dialog-bottomright .p-dialog-enter-from,
+.p-dialog-bottomright .p-dialog-leave-to {
+    transform: translate3d(100%, 0px, 0px);
+}
+
+/* Maximize */
+.p-dialog-maximized {
+    -webkit-transition: none;
+    transition: none;
+    transform: none;
+    width: 100vw !important;
+    height: 100vh !important;
+    top: 0px !important;
+    left: 0px !important;
+    max-height: 100%;
+    height: 100%;
+}
+.p-dialog-maximized .p-dialog-content {
+    flex-grow: 1;
+}
+
+/* Position */
+.p-dialog-left {
+    justify-content: flex-start;
+}
+.p-dialog-right {
+    justify-content: flex-end;
+}
+.p-dialog-top {
+    align-items: flex-start;
+}
+.p-dialog-topleft {
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+.p-dialog-topright {
+    justify-content: flex-end;
+    align-items: flex-start;
+}
+.p-dialog-bottom {
+    align-items: flex-end;
+}
+.p-dialog-bottomleft {
+    justify-content: flex-start;
+    align-items: flex-end;
+}
+.p-dialog-bottomright {
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+.p-confirm-dialog .p-dialog-content {
+    display: flex;
+    align-items: center;
+}
+`;
+
+const classes = {
+    mask: ({ props, instance }) => ['p-dialog-mask', { 'p-component-overlay p-component-overlay-enter': props.modal }, instance.getPositionClass()],
+    root: ({ props, instance }) => [
+        'p-dialog p-component',
+        {
+            'p-dialog-rtl': props.rtl,
+            'p-dialog-maximized': props.maximizable && instance.maximized,
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    header: 'p-dialog-header',
+    headerTitle: 'p-dialog-title',
+    headerIcons: 'p-dialog-header-icons',
+    maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
+    maximizableIcon: ({ props, instance }) => `p-dialog-header-maximize-icon ${instance.maximized ? props.minimizeIcon : props.maximizeIcon}`,
+    closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
+    closeButtonIcon: ({ props }) => ['p-dialog-header-close-icon', props.closeIcon],
+    content: ({ props }) => ['p-dialog-content', props.contentClass],
+    footer: 'p-dialog-footer'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatar_style', manual: true });
+
+export default {
+    name: 'BaseAvatar',
+    extends: BaseComponent,
+    props: {
+        header: {
+            type: null,
+            default: null
+        },
+        footer: {
+            type: null,
+            default: null
+        },
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        modal: {
+            type: Boolean,
+            default: null
+        },
+        contentStyle: {
+            type: null,
+            default: null
+        },
+        contentClass: {
+            type: String,
+            default: null
+        },
+        contentProps: {
+            type: null,
+            default: null
+        },
+        rtl: {
+            type: Boolean,
+            default: null
+        },
+        maximizable: {
+            type: Boolean,
+            default: false
+        },
+        dismissableMask: {
+            type: Boolean,
+            default: false
+        },
+        closable: {
+            type: Boolean,
+            default: true
+        },
+        closeOnEscape: {
+            type: Boolean,
+            default: true
+        },
+        showHeader: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        position: {
+            type: String,
+            default: 'center'
+        },
+        breakpoints: {
+            type: Object,
+            default: null
+        },
+        draggable: {
+            type: Boolean,
+            default: true
+        },
+        keepInViewport: {
+            type: Boolean,
+            default: true
+        },
+        minX: {
+            type: Number,
+            default: 0
+        },
+        minY: {
+            type: Number,
+            default: 0
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        closeIcon: {
+            type: String,
+            default: undefined
+        },
+        maximizeIcon: {
+            type: String,
+            default: undefined
+        },
+        minimizeIcon: {
+            type: String,
+            default: undefined
+        },
+        closeButtonProps: {
+            type: null,
+            default: null
+        },
+        _instance: null
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>