Refactor #3965 - Refactor on Dialog

This commit is contained in:
Tuğçe Küçükoğlu 2023-07-05 17:31:59 +03:00
parent 18662adebd
commit 3014b22550
2 changed files with 32 additions and 47 deletions

View file

@ -1,8 +1,8 @@
<template>
<Portal :appendTo="appendTo">
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" @click="onMaskClick" v-bind="ptm('mask')">
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position })" @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="cx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
<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="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
@ -10,7 +10,7 @@
<div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
<button v-if="maximizable" :ref="maximizableRef" v-ripple :autofocus="focusableMax" :class="cx('maximizableButton')" @click="maximize" type="button" :tabindex="maximizable ? '0' : '-1'" v-bind="ptm('maximizableButton')">
<slot name="maximizeicon" :maximized="maximized">
<component :is="maximizeIconComponent" :class="cx('maximizableIcon')" v-bind="ptm('maximizableIcon')" />
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
</slot>
</button>
<button
@ -25,7 +25,7 @@
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
>
<slot name="closeicon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="cx('closeButtonIcon')" v-bind="ptm('closeButtonIcon')"></component>
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
</slot>
</button>
</div>