vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #6474

pull/6480/head
tugcekucukoglu 2024-09-25 14:41:05 +03:00
parent 2ebdea92d3
commit a5cad903b9
1 changed files with 3 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/primevue/src/dialog/Dialog.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @mousedown="onMaskMouseDown" @mouseup="onMaskMouseUp" v-bind="ptm('mask')"> <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @mousedown="onMaskMouseDown" @mouseup="onMaskMouseUp" v-bind="ptm('mask')">
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')"> <transition name="p-dialog" @enter="onEnter" @after-enter="onAfterEnter" @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="ptmi('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="ptmi('root')">
<slot v-if="$slots.container" name="container" :closeCallback="close" :maximizeCallback="(event) => maximize(event)"></slot> <slot v-if="$slots.container" name="container" :closeCallback="close" :maximizeCallback="(event) => maximize(event)"></slot>
<template v-else> <template v-else>
@ -62,7 +62,7 @@
</template> </template>
<script> <script>
import { addClass, addStyle, blockBodyScroll, focus, getOuterHeight, getOuterWidth, getViewport, isClient, setAttribute, unblockBodyScroll } from '@primeuix/utils/dom'; import { addClass, addStyle, blockBodyScroll, focus, getOuterHeight, getOuterWidth, getViewport, setAttribute, unblockBodyScroll } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex'; import { ZIndex } from '@primeuix/utils/zindex';
import { UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import TimesIcon from '@primevue/icons/times'; import TimesIcon from '@primevue/icons/times';
@ -134,7 +134,6 @@ export default {
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId(); this.id = this.id || UniqueComponentId();
isClient() && (this.attributeSelector = UniqueComponentId());
if (this.breakpoints) { if (this.breakpoints) {
this.createStyle(); this.createStyle();
@ -144,9 +143,6 @@ export default {
close() { close() {
this.$emit('update:visible', false); this.$emit('update:visible', false);
}, },
onBeforeEnter(el) {
el.setAttribute(this.attributeSelector, '');
},
onEnter() { onEnter() {
this.$emit('show'); this.$emit('show');
this.target = document.activeElement; this.target = document.activeElement;
@ -296,7 +292,7 @@ export default {
for (let breakpoint in this.breakpoints) { for (let breakpoint in this.breakpoints) {
innerHTML += ` innerHTML += `
@media screen and (max-width: ${breakpoint}) { @media screen and (max-width: ${breakpoint}) {
.p-dialog[${this.attributeSelector}] { .p-dialog[${this.$attrSelector}] {
width: ${this.breakpoints[breakpoint]} !important; width: ${this.breakpoints[breakpoint]} !important;
} }
} }