Refactor #4433 - OverlayPanel
parent
5a1ce104c5
commit
66cfbe54fc
|
@ -76,6 +76,10 @@ const OverlayPanelEvents = [
|
||||||
{
|
{
|
||||||
name: 'hide',
|
name: 'hide',
|
||||||
description: 'Callback to invoke before the overlay is hidden.'
|
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.
|
* Callback to invoke when the overlay is hidden.
|
||||||
*/
|
*/
|
||||||
hide(): void;
|
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">
|
<Portal :appendTo="appendTo">
|
||||||
<transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
|
<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 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 v-if="$slots.container" name="container" :onClose="hide" :onKeydown="(event) => onButtonKeydown(event)"></slot>
|
||||||
<slot></slot>
|
<template v-else>
|
||||||
</div>
|
<div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
|
||||||
<button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
|
<slot></slot>
|
||||||
<slot name="closeicon">
|
</div>
|
||||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
|
<button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
|
||||||
</slot>
|
<slot name="closeicon">
|
||||||
</button>
|
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
|
||||||
|
</slot>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</Portal>
|
</Portal>
|
||||||
|
|
Loading…
Reference in New Issue