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

prod
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> <template>
<Portal> <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')"> <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> <slot v-if="$slots.container" name="container" :closeCallback="hide"></slot>
<template v-else> <template v-else>
<div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')"> <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 { .p-drawer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
pointer-events: auto;
transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
position: relative; position: relative;
transition: transform 0.3s; transition: transform 0.3s;
@ -120,7 +119,7 @@ const theme = ({ dt }) => `
`; `;
const inlineStyles = { const inlineStyles = {
mask: ({ position }) => ({ mask: ({ position, modal }) => ({
position: 'fixed', position: 'fixed',
height: '100%', height: '100%',
width: '100%', width: '100%',
@ -128,8 +127,12 @@ const inlineStyles = {
top: 0, top: 0,
display: 'flex', display: 'flex',
justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center', 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 = { const classes = {