Refactor #3885 - For Dialog
Tuğçe Küçükoğlu
parent
4e8315e57b
commit
d9dd436c36
|
|
@ -130,6 +130,12 @@ const DialogProps = [
|
|||
type: 'string',
|
||||
default: 'body',
|
||||
description: 'A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.'
|
||||
},
|
||||
{
|
||||
name: 'pt',
|
||||
type: 'any',
|
||||
default: 'null',
|
||||
description: 'Uses to pass attributes to DOM elements inside the component.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,90 @@
|
|||
import { HTMLAttributes, VNode } from 'vue';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes) | null | undefined;
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) option method.
|
||||
*/
|
||||
export interface DialogPassThroughMethodOptions {
|
||||
props: DialogProps;
|
||||
state: DialogState;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) options.
|
||||
* @see {@link DialogProps.pt}
|
||||
*/
|
||||
export interface DialogPassThroughOptions {
|
||||
/**
|
||||
* Uses to pass attributes to the mask's DOM element.
|
||||
*/
|
||||
mask?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header's DOM element.
|
||||
*/
|
||||
header?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header title's DOM element.
|
||||
*/
|
||||
headerTitle?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header icons' DOM element.
|
||||
*/
|
||||
headerIcons?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the maximizable button's DOM element.
|
||||
*/
|
||||
maximizableButton?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the maximizable icon's DOM element.
|
||||
*/
|
||||
maximizableIcon?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the close button's DOM element.
|
||||
*/
|
||||
closeButton?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the close icon's DOM element.
|
||||
*/
|
||||
closeIcon?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the content's DOM element.
|
||||
*/
|
||||
content?: DialogPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the footer's DOM element.
|
||||
*/
|
||||
footer?: DialogPassThroughOptionType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough attributes for each DOM elements
|
||||
*/
|
||||
export interface DialogPassThroughAttributes {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines current inline state in Dialog component.
|
||||
*/
|
||||
export interface DialogState {
|
||||
/**
|
||||
* Current visible state of the container as a boolean.
|
||||
* @defaultValue false
|
||||
*/
|
||||
containerVisible: boolean;
|
||||
/**
|
||||
* Current maximized state as a boolean.
|
||||
* @defaultValue false
|
||||
*/
|
||||
maximized: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom breakpoint metadata.
|
||||
*/
|
||||
|
|
@ -159,6 +243,11 @@ export interface DialogProps {
|
|||
* @deprecated since v3.27.0. Use 'minimizeicon' slot.
|
||||
*/
|
||||
minimizeIcon?: string | undefined;
|
||||
/**
|
||||
* Uses to pass attributes to DOM elements inside the component.
|
||||
* @type {DialogPassThroughOptions}
|
||||
*/
|
||||
pt?: DialogPassThroughOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,16 +1,26 @@
|
|||
<template>
|
||||
<Portal :appendTo="appendTo">
|
||||
<div v-if="containerVisible" :ref="maskRef" :class="maskClass" @click="onMaskClick">
|
||||
<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">
|
||||
<div v-if="showHeader" :ref="headerContainerRef" class="p-dialog-header" @mousedown="initDrag">
|
||||
<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')">
|
||||
<slot name="header">
|
||||
<span v-if="header" :id="ariaLabelledById" class="p-dialog-title">{{ header }}</span>
|
||||
<span v-if="header" :id="ariaLabelledById" class="p-dialog-title" v-bind="ptm('headerTitle')">{{ header }}</span>
|
||||
</slot>
|
||||
<div class="p-dialog-header-icons">
|
||||
<button v-if="maximizable" :ref="maximizableRef" v-ripple :autofocus="focusableMax" class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" type="button" :tabindex="maximizable ? '0' : '-1'">
|
||||
<div class="p-dialog-header-icons" 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"
|
||||
@click="maximize"
|
||||
type="button"
|
||||
:tabindex="maximizable ? '0' : '-1'"
|
||||
v-bind="ptm('maximizableButton')"
|
||||
>
|
||||
<slot name="maximizeicon" :maximized="maximized">
|
||||
<component :is="maximizeIconComponent" :class="maximizeIconClass" />
|
||||
<component :is="maximizeIconComponent" :class="maximizeIconClass" v-bind="ptm('maximizableIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -22,18 +32,18 @@
|
|||
@click="close"
|
||||
:aria-label="closeAriaLabel"
|
||||
type="button"
|
||||
v-bind="closeButtonProps"
|
||||
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
|
||||
>
|
||||
<slot name="closeicon">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-dialog-header-close-icon', closeIcon]"></component>
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-dialog-header-close-icon', closeIcon]" v-bind="ptm('closeIcon')"></component>
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div :ref="contentRef" :class="contentStyleClass" :style="contentStyle" v-bind="contentProps">
|
||||
<div :ref="contentRef" :class="contentStyleClass" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-if="footer || $slots.footer" :ref="footerContainerRef" class="p-dialog-footer">
|
||||
<div v-if="footer || $slots.footer" :ref="footerContainerRef" class="p-dialog-footer" v-bind="ptm('footer')">
|
||||
<slot name="footer">{{ footer }}</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,6 +53,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import FocusTrap from 'primevue/focustrap';
|
||||
import TimesIcon from 'primevue/icons/times';
|
||||
import WindowMaximizeIcon from 'primevue/icons/windowmaximize';
|
||||
|
|
@ -54,6 +65,7 @@ import { computed } from 'vue';
|
|||
|
||||
export default {
|
||||
name: 'Dialog',
|
||||
extends: BaseComponent,
|
||||
inheritAttrs: false,
|
||||
emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
|
||||
props: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue