Refactor #4433 - OverlayPanel
parent
5a1ce104c5
commit
66cfbe54fc
|
@ -76,6 +76,10 @@ const OverlayPanelEvents = [
|
|||
{
|
||||
name: 'hide',
|
||||
description: 'Callback to invoke before the overlay is hidden.'
|
||||
},
|
||||
{
|
||||
name: 'container',
|
||||
description: 'Custom container template.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -191,6 +191,21 @@ export interface OverlayPanelEmits {
|
|||
* Callback to invoke when the overlay is hidden.
|
||||
*/
|
||||
hide(): void;
|
||||
/**
|
||||
* Custom container slot.
|
||||
* @param {Object} scope - container slot's params.
|
||||
*/
|
||||
container(scope: {
|
||||
/**
|
||||
* Close overlay panel function.
|
||||
*/
|
||||
onClose: () => void;
|
||||
/**
|
||||
* Close button keydown function.
|
||||
* @param {Event} event - Browser event
|
||||
*/
|
||||
onKeydown: (event: Event) => void;
|
||||
}): VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -2,14 +2,17 @@
|
|||
<Portal :appendTo="appendTo">
|
||||
<transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
|
||||
<div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :aria-modal="visible" @click="onOverlayClick" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }">
|
||||
<div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
|
||||
<slot name="closeicon">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
|
||||
</slot>
|
||||
</button>
|
||||
<slot v-if="$slots.container" name="container" :onClose="hide" :onKeydown="(event) => onButtonKeydown(event)"></slot>
|
||||
<template v-else>
|
||||
<div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
|
||||
<slot name="closeicon">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
|
||||
</slot>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</Portal>
|
||||
|
|
Loading…
Reference in New Issue