mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Merge branch 'master' into issue-3940
This commit is contained in:
Tuğçe Küçükoğlu
commit
5283d49b98
1063 changed files with 61270 additions and 23347 deletions
315
components/lib/dialog/BaseDialog.vue
Normal file
315
components/lib/dialog/BaseDialog.vue
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-dialog-mask.p-component-overlay {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.p-dialog {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-confirm-dialog .p-dialog-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
/* Position */
|
||||
const inlineStyles = {
|
||||
mask: ({ position, modal }) => ({
|
||||
position: 'fixed',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
left: 0,
|
||||
top: 0,
|
||||
display: 'flex',
|
||||
justifyContent: position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
|
||||
alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
|
||||
pointerEvents: modal ? 'auto' : 'none'
|
||||
}),
|
||||
root: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
pointerEvents: 'auto'
|
||||
}
|
||||
};
|
||||
|
||||
const classes = {
|
||||
mask: ({ props }) => {
|
||||
const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
|
||||
const pos = positions.find((item) => item === props.position);
|
||||
|
||||
return [
|
||||
'p-dialog-mask',
|
||||
{
|
||||
'p-component-overlay p-component-overlay-enter': props.modal
|
||||
},
|
||||
pos ? `p-dialog-${pos}` : ''
|
||||
];
|
||||
},
|
||||
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: 'p-dialog-header-maximize-icon',
|
||||
closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
|
||||
closeButtonIcon: 'p-dialog-header-close-icon',
|
||||
content: 'p-dialog-content',
|
||||
footer: 'p-dialog-footer'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'dialog', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseDialog',
|
||||
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,
|
||||
inlineStyles,
|
||||
loadStyle
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
48
components/lib/dialog/Dialog.d.ts
vendored
48
components/lib/dialog/Dialog.d.ts
vendored
|
|
@ -7,15 +7,19 @@
|
|||
* @module dialog
|
||||
*
|
||||
*/
|
||||
import { HTMLAttributes, VNode } from 'vue';
|
||||
import { HTMLAttributes, TransitionProps, VNode } from 'vue';
|
||||
import { ComponentHooks } from '../basecomponent';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes) | null | undefined;
|
||||
export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes | string) | string | null | undefined;
|
||||
|
||||
export declare type DialogPassThroughTransitionType = TransitionProps | ((options: DialogPassThroughMethodOptions) => TransitionProps) | undefined;
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) option method.
|
||||
*/
|
||||
export interface DialogPassThroughMethodOptions {
|
||||
instance: any;
|
||||
props: DialogProps;
|
||||
state: DialogState;
|
||||
}
|
||||
|
|
@ -26,49 +30,58 @@ export interface DialogPassThroughMethodOptions {
|
|||
*/
|
||||
export interface DialogPassThroughOptions {
|
||||
/**
|
||||
* Uses to pass attributes to the root's DOM element.
|
||||
* Used to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header's DOM element.
|
||||
* Used to pass attributes to the header's DOM element.
|
||||
*/
|
||||
header?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header title's DOM element.
|
||||
* Used to pass attributes to the header title's DOM element.
|
||||
*/
|
||||
headerTitle?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header icons' DOM element.
|
||||
* Used to pass attributes to the header icons' DOM element.
|
||||
*/
|
||||
headerIcons?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the maximizable button's DOM element.
|
||||
* Used to pass attributes to the maximizable button's DOM element.
|
||||
*/
|
||||
maximizableButton?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the maximizable icon's DOM element.
|
||||
* Used to pass attributes to the maximizable icon's DOM element.
|
||||
*/
|
||||
maximizableIcon?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the close button's component.
|
||||
* Used to pass attributes to the close button's component.
|
||||
*/
|
||||
closeButton?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the close button icon's component.
|
||||
* Used to pass attributes to the close button icon's component.
|
||||
*/
|
||||
closeButtonIcon?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the content's DOM element.
|
||||
* Used to pass attributes to the content's DOM element.
|
||||
*/
|
||||
content?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the footer's DOM element.
|
||||
* Used to pass attributes to the footer's DOM element.
|
||||
*/
|
||||
footer?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the mask's DOM element.
|
||||
* Used to pass attributes to the mask's DOM element.
|
||||
*/
|
||||
mask?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Used to manage all lifecycle hooks
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
*/
|
||||
hooks?: ComponentHooks;
|
||||
/**
|
||||
* Used to control Vue Transition API.
|
||||
*/
|
||||
transition?: DialogPassThroughTransitionType;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -147,7 +160,7 @@ export interface DialogProps {
|
|||
*/
|
||||
contentClass?: any;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.
|
||||
* Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
|
||||
*/
|
||||
contentProps?: HTMLAttributes | undefined;
|
||||
/**
|
||||
|
|
@ -244,10 +257,15 @@ export interface DialogProps {
|
|||
*/
|
||||
minimizeIcon?: string | undefined;
|
||||
/**
|
||||
* Uses to pass attributes to DOM elements inside the component.
|
||||
* Used to pass attributes to DOM elements inside the component.
|
||||
* @type {DialogPassThroughOptions}
|
||||
*/
|
||||
pt?: DialogPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
<template>
|
||||
<Portal :appendTo="appendTo">
|
||||
<div v-if="containerVisible" :ref="maskRef" :class="maskClass" @click="onMaskClick" v-bind="ptm('mask')">
|
||||
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
|
||||
<div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="dialogClass" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
|
||||
<div v-if="showHeader" :ref="headerContainerRef" class="p-dialog-header" @mousedown="initDrag" v-bind="ptm('header')">
|
||||
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @click="onMaskClick" v-bind="ptm('mask')">
|
||||
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
|
||||
<div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
|
||||
<div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
|
||||
<slot name="header">
|
||||
<span v-if="header" :id="ariaLabelledById" class="p-dialog-title" v-bind="ptm('headerTitle')">{{ header }}</span>
|
||||
<span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
|
||||
</slot>
|
||||
<div class="p-dialog-header-icons" v-bind="ptm('headerIcons')">
|
||||
<div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
|
||||
<button
|
||||
v-if="maximizable"
|
||||
:ref="maximizableRef"
|
||||
v-ripple
|
||||
:autofocus="focusableMax"
|
||||
class="p-dialog-header-icon p-dialog-header-maximize p-link"
|
||||
:class="cx('maximizableButton')"
|
||||
@click="maximize"
|
||||
type="button"
|
||||
:tabindex="maximizable ? '0' : '-1'"
|
||||
v-bind="ptm('maximizableButton')"
|
||||
data-pc-group-section="headericon"
|
||||
>
|
||||
<slot name="maximizeicon" :maximized="maximized">
|
||||
<component :is="maximizeIconComponent" :class="maximizeIconClass" v-bind="ptm('maximizableIcon')" />
|
||||
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -28,22 +29,23 @@
|
|||
:ref="closeButtonRef"
|
||||
v-ripple
|
||||
:autofocus="focusableClose"
|
||||
class="p-dialog-header-icon p-dialog-header-close p-link"
|
||||
:class="cx('closeButton')"
|
||||
@click="close"
|
||||
:aria-label="closeAriaLabel"
|
||||
type="button"
|
||||
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
|
||||
data-pc-group-section="headericon"
|
||||
>
|
||||
<slot name="closeicon">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-dialog-header-close-icon', closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div :ref="contentRef" :class="contentStyleClass" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
|
||||
<div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-if="footer || $slots.footer" :ref="footerContainerRef" class="p-dialog-footer" v-bind="ptm('footer')">
|
||||
<div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
|
||||
<slot name="footer">{{ footer }}</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -53,7 +55,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import FocusTrap from 'primevue/focustrap';
|
||||
import TimesIcon from 'primevue/icons/times';
|
||||
import WindowMaximizeIcon from 'primevue/icons/windowmaximize';
|
||||
|
|
@ -62,119 +63,13 @@ import Portal from 'primevue/portal';
|
|||
import Ripple from 'primevue/ripple';
|
||||
import { DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
|
||||
import { computed } from 'vue';
|
||||
import BaseDialog from './BaseDialog.vue';
|
||||
|
||||
export default {
|
||||
name: 'Dialog',
|
||||
extends: BaseComponent,
|
||||
extends: BaseDialog,
|
||||
inheritAttrs: false,
|
||||
emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
|
||||
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
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
dialogRef: computed(() => this._instance)
|
||||
|
|
@ -243,7 +138,7 @@ export default {
|
|||
},
|
||||
onBeforeLeave() {
|
||||
if (this.modal) {
|
||||
DomHandler.addClass(this.mask, 'p-component-overlay-leave');
|
||||
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
|
||||
}
|
||||
},
|
||||
onLeave() {
|
||||
|
|
@ -305,8 +200,11 @@ export default {
|
|||
}
|
||||
|
||||
if (!this.modal) {
|
||||
if (this.maximized) DomHandler.addClass(document.body, 'p-overflow-hidden');
|
||||
else DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
||||
if (this.maximized) {
|
||||
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
||||
} else {
|
||||
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
||||
}
|
||||
}
|
||||
},
|
||||
enableDocumentSettings() {
|
||||
|
|
@ -336,12 +234,6 @@ export default {
|
|||
this.documentKeydownListener = null;
|
||||
}
|
||||
},
|
||||
getPositionClass() {
|
||||
const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
|
||||
const pos = positions.find((item) => item === this.position);
|
||||
|
||||
return pos ? `p-dialog-${pos}` : '';
|
||||
},
|
||||
containerRef(el) {
|
||||
this.container = el;
|
||||
},
|
||||
|
|
@ -364,9 +256,10 @@ export default {
|
|||
this.closeButton = el;
|
||||
},
|
||||
createStyle() {
|
||||
if (!this.styleElement) {
|
||||
if (!this.styleElement && !this.isUnstyled) {
|
||||
this.styleElement = document.createElement('style');
|
||||
this.styleElement.type = 'text/css';
|
||||
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
|
||||
document.head.appendChild(this.styleElement);
|
||||
|
||||
let innerHTML = '';
|
||||
|
|
@ -391,7 +284,7 @@ export default {
|
|||
}
|
||||
},
|
||||
initDrag(event) {
|
||||
if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
|
||||
if (DomHandler.findSingle(event.target, '[data-pc-section="headeraction"]') || DomHandler.findSingle(event.target.parentElement, '[data-pc-section="headeraction"]')) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -401,7 +294,7 @@ export default {
|
|||
this.lastPageY = event.pageY;
|
||||
|
||||
this.container.style.margin = '0';
|
||||
DomHandler.addClass(document.body, 'p-unselectable-text');
|
||||
!this.isUnstyled && DomHandler.addClass(document.body, 'p-unselectable-text');
|
||||
}
|
||||
},
|
||||
bindGlobalListeners() {
|
||||
|
|
@ -430,24 +323,27 @@ export default {
|
|||
let leftPos = offset.left + deltaX;
|
||||
let topPos = offset.top + deltaY;
|
||||
let viewport = DomHandler.getViewport();
|
||||
let getComputedStyle = getComputedStyle(this.container);
|
||||
let marginLeft = parseFloat(getComputedStyle.marginLeft);
|
||||
let marginTop = parseFloat(getComputedStyle.marginTop);
|
||||
|
||||
this.container.style.position = 'fixed';
|
||||
|
||||
if (this.keepInViewport) {
|
||||
if (leftPos >= this.minX && leftPos + width < viewport.width) {
|
||||
this.lastPageX = event.pageX;
|
||||
this.container.style.left = leftPos + 'px';
|
||||
this.container.style.left = leftPos - marginLeft + 'px';
|
||||
}
|
||||
|
||||
if (topPos >= this.minY && topPos + height < viewport.height) {
|
||||
this.lastPageY = event.pageY;
|
||||
this.container.style.top = topPos + 'px';
|
||||
this.container.style.top = topPos - marginTop + 'px';
|
||||
}
|
||||
} else {
|
||||
this.lastPageX = event.pageX;
|
||||
this.container.style.left = leftPos + 'px';
|
||||
this.container.style.left = leftPos - marginLeft + 'px';
|
||||
this.lastPageY = event.pageY;
|
||||
this.container.style.top = topPos + 'px';
|
||||
this.container.style.top = topPos - marginTop + 'px';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -464,7 +360,7 @@ export default {
|
|||
this.documentDragEndListener = (event) => {
|
||||
if (this.dragging) {
|
||||
this.dragging = false;
|
||||
DomHandler.removeClass(document.body, 'p-unselectable-text');
|
||||
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-unselectable-text');
|
||||
|
||||
this.$emit('dragend', event);
|
||||
}
|
||||
|
|
@ -480,28 +376,10 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
maskClass() {
|
||||
return ['p-dialog-mask', { 'p-component-overlay p-component-overlay-enter': this.modal }, this.getPositionClass()];
|
||||
},
|
||||
dialogClass() {
|
||||
return [
|
||||
'p-dialog p-component',
|
||||
{
|
||||
'p-dialog-rtl': this.rtl,
|
||||
'p-dialog-maximized': this.maximizable && this.maximized,
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}
|
||||
];
|
||||
},
|
||||
maximizeIconComponent() {
|
||||
return this.maximized ? (this.minimizeIcon ? 'span' : 'WindowMinimizeIcon') : this.maximizeIcon ? 'span' : 'WindowMaximizeIcon';
|
||||
},
|
||||
maximizeIconClass() {
|
||||
const maximizeClasses = this.maximized ? this.minimizeIcon : this.maximizeIcon;
|
||||
|
||||
return `p-dialog-header-maximize-icon ${maximizeClasses}`;
|
||||
},
|
||||
ariaId() {
|
||||
return UniqueComponentId();
|
||||
},
|
||||
|
|
@ -530,181 +408,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue