Fixed #4470 - Dialog/Toast: new container template
Tuğçe Küçükoğlu
parent
98afeacb55
commit
962ddb1353
|
|
@ -215,6 +215,10 @@ const DialogSlots = [
|
|||
{
|
||||
name: 'maximizeicon',
|
||||
description: 'Custom maximizeicon icon template of dialog.'
|
||||
},
|
||||
{
|
||||
name: 'container',
|
||||
description: 'Custom container template.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -80,6 +80,10 @@ const ToastSlots = [
|
|||
{
|
||||
name: 'closeicon',
|
||||
description: 'Custom close icon template.'
|
||||
},
|
||||
{
|
||||
name: 'container',
|
||||
description: 'Custom container template.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -332,6 +332,21 @@ export interface DialogSlots {
|
|||
*/
|
||||
class: any;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom container slot.
|
||||
* @param {Object} scope - container slot's params.
|
||||
*/
|
||||
container(scope: {
|
||||
/**
|
||||
* Close dialog function.
|
||||
*/
|
||||
onClose: () => void;
|
||||
/**
|
||||
* Maximize/minimize dialog function.
|
||||
* @param {Event} event - Browser event
|
||||
*/
|
||||
onMaximize: (event: Event) => void;
|
||||
}): VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -3,51 +3,54 @@
|
|||
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @click="onMaskClick" v-bind="ptm('mask')">
|
||||
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @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="{ ...$attrs, ...ptm('root') }">
|
||||
<div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
|
||||
<slot name="header" :class="cx('headerTitle')">
|
||||
<span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
|
||||
</slot>
|
||||
<div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
|
||||
<button
|
||||
v-if="maximizable"
|
||||
:ref="maximizableRef"
|
||||
v-ripple
|
||||
:autofocus="focusableMax"
|
||||
:class="cx('maximizableButton')"
|
||||
@click="maximize"
|
||||
type="button"
|
||||
:tabindex="maximizable ? '0' : '-1'"
|
||||
v-bind="ptm('maximizableButton')"
|
||||
data-pc-group-section="headericon"
|
||||
>
|
||||
<slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
|
||||
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
<button
|
||||
v-if="closable"
|
||||
:ref="closeButtonRef"
|
||||
v-ripple
|
||||
:autofocus="focusableClose"
|
||||
:class="cx('closeButton')"
|
||||
@click="close"
|
||||
:aria-label="closeAriaLabel"
|
||||
type="button"
|
||||
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
|
||||
data-pc-group-section="headericon"
|
||||
>
|
||||
<slot name="closeicon" :class="cx('closeButtonIcon')">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
|
||||
</slot>
|
||||
</button>
|
||||
<slot v-if="$slots.container" name="container" :onClose="close" :onMaximize="(event) => maximize(event)"></slot>
|
||||
<template v-else>
|
||||
<div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
|
||||
<slot name="header" :class="cx('headerTitle')">
|
||||
<span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
|
||||
</slot>
|
||||
<div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
|
||||
<button
|
||||
v-if="maximizable"
|
||||
:ref="maximizableRef"
|
||||
v-ripple
|
||||
:autofocus="focusableMax"
|
||||
:class="cx('maximizableButton')"
|
||||
@click="maximize"
|
||||
type="button"
|
||||
:tabindex="maximizable ? '0' : '-1'"
|
||||
v-bind="ptm('maximizableButton')"
|
||||
data-pc-group-section="headericon"
|
||||
>
|
||||
<slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
|
||||
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
<button
|
||||
v-if="closable"
|
||||
:ref="closeButtonRef"
|
||||
v-ripple
|
||||
:autofocus="focusableClose"
|
||||
:class="cx('closeButton')"
|
||||
@click="close"
|
||||
:aria-label="closeAriaLabel"
|
||||
type="button"
|
||||
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
|
||||
data-pc-group-section="headericon"
|
||||
>
|
||||
<slot name="closeicon" :class="cx('closeButtonIcon')">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
|
||||
<slot name="footer">{{ footer }}</slot>
|
||||
</div>
|
||||
<div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
|
||||
<slot name="footer">{{ footer }}</slot>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -289,6 +289,20 @@ export interface ToastSlots {
|
|||
*/
|
||||
class: any;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom container slot.
|
||||
* @param {Object} scope - container slot's params.
|
||||
*/
|
||||
container(scope: {
|
||||
/**
|
||||
* Message of the component
|
||||
*/
|
||||
message: any;
|
||||
/**
|
||||
* Close toast function
|
||||
*/
|
||||
onClose: () => void;
|
||||
}): VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div :class="cx('container')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')">
|
||||
<div :class="[cx('content'), message.contentStyleClass]" v-bind="ptm('content')">
|
||||
<component v-if="templates.container" :is="templates.container" :message="message" :onClose="onCloseClick" />
|
||||
<div v-else :class="[cx('content'), message.contentStyleClass]" v-bind="ptm('content')">
|
||||
<template v-if="!templates.message">
|
||||
<component :is="templates.icon ? templates.icon : iconComponent && iconComponent.name ? iconComponent : 'span'" :class="cx('icon')" v-bind="ptm('icon')" />
|
||||
<div :class="cx('text')" v-bind="ptm('text')">
|
||||
|
|
|
|||
Loading…
Reference in New Issue