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

Fixed #6779 - Drawer: dismissable mode behaviour defects

pull/6798/head
tugcekucukoglu 2024-11-13 14:29:13 +03:00
parent d2d6d07f62
commit 142882f091
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/primevue/src/drawer/Drawer.vue
View File

@ -1,8 +1,8 @@
<template>
<Portal>
<div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
<div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position, modal })" v-bind="ptm('mask')">
<transition name="p-drawer" @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 :class="cx('root')" role="complementary" :aria-modal="modal" v-bind="ptmi('root')">
<div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" :style="sx('root')" role="complementary" :aria-modal="modal" v-bind="ptmi('root')">
<slot v-if="$slots.container" name="container" :closeCallback="hide"></slot>
<template v-else>
<div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">

11
packages/primevue/src/drawer/style/DrawerStyle.js
View File

@ -4,7 +4,6 @@ const theme = ({ dt }) => `
.p-drawer {
display: flex;
flex-direction: column;
pointer-events: auto;
transform: translate3d(0px, 0px, 0px);
position: relative;
transition: transform 0.3s;
@ -120,7 +119,7 @@ const theme = ({ dt }) => `
`;
const inlineStyles = {
mask: ({ position }) => ({
mask: ({ position, modal }) => ({
position: 'fixed',
height: '100%',
width: '100%',
@ -128,8 +127,12 @@ const inlineStyles = {
top: 0,
display: 'flex',
justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
})
alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center',
pointerEvents: modal ? 'auto' : 'none'
}),
root: {
pointerEvents: 'auto'
}
};
const classes = {