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

Fixed #4470 - Dialog/Toast: new container template

pull/4476/head
Tuğçe Küçükoğlu 2023-09-19 12:36:33 +03:00
parent 98afeacb55
commit 962ddb1353
6 changed files with 86 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api-generator/components/dialog.js
View File

@ -215,6 +215,10 @@ const DialogSlots = [
{ {
name: 'maximizeicon', name: 'maximizeicon',
description: 'Custom maximizeicon icon template of dialog.' description: 'Custom maximizeicon icon template of dialog.'
},
{
name: 'container',
description: 'Custom container template.'
} }
]; ];

4
api-generator/components/toast.js
View File

@ -80,6 +80,10 @@ const ToastSlots = [
{ {
name: 'closeicon', name: 'closeicon',
description: 'Custom close icon template.' description: 'Custom close icon template.'
},
{
name: 'container',
description: 'Custom container template.'
} }
]; ];

15
components/lib/dialog/Dialog.d.ts vendored
View File

@ -332,6 +332,21 @@ export interface DialogSlots {
*/ */
class: any; class: any;
}): VNode[]; }): 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[];
} }
/** /**

91
components/lib/dialog/Dialog.vue
View File

@ -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')"> <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')"> <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="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 v-if="$slots.container" name="container" :onClose="close" :onMaximize="(event) => maximize(event)"></slot>
<slot name="header" :class="cx('headerTitle')"> <template v-else>
<span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span> <div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
</slot> <slot name="header" :class="cx('headerTitle')">
<div :class="cx('headerIcons')" v-bind="ptm('headerIcons')"> <span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
<button </slot>
v-if="maximizable" <div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
:ref="maximizableRef" <button
v-ripple v-if="maximizable"
:autofocus="focusableMax" :ref="maximizableRef"
:class="cx('maximizableButton')" v-ripple
@click="maximize" :autofocus="focusableMax"
type="button" :class="cx('maximizableButton')"
:tabindex="maximizable ? '0' : '-1'" @click="maximize"
v-bind="ptm('maximizableButton')" type="button"
data-pc-group-section="headericon" :tabindex="maximizable ? '0' : '-1'"
> v-bind="ptm('maximizableButton')"
<slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')"> data-pc-group-section="headericon"
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" /> >
</slot> <slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
</button> <component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
<button </slot>
v-if="closable" </button>
:ref="closeButtonRef" <button
v-ripple v-if="closable"
:autofocus="focusableClose" :ref="closeButtonRef"
:class="cx('closeButton')" v-ripple
@click="close" :autofocus="focusableClose"
:aria-label="closeAriaLabel" :class="cx('closeButton')"
type="button" @click="close"
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }" :aria-label="closeAriaLabel"
data-pc-group-section="headericon" type="button"
> v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
<slot name="closeicon" :class="cx('closeButtonIcon')"> data-pc-group-section="headericon"
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component> >
</slot> <slot name="closeicon" :class="cx('closeButtonIcon')">
</button> <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
</slot>
</button>
</div>
</div> </div>
</div> <div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
<div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }"> <slot></slot>
<slot></slot> </div>
</div> <div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
<div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')"> <slot name="footer">{{ footer }}</slot>
<slot name="footer">{{ footer }}</slot> </div>
</div> </template>
</div> </div>
</transition> </transition>
</div> </div>

14
components/lib/toast/Toast.d.ts vendored
View File

@ -289,6 +289,20 @@ export interface ToastSlots {
*/ */
class: any; class: any;
}): VNode[]; }): 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[];
} }
/** /**

3
components/lib/toast/ToastMessage.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div :class="cx('container')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')"> <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"> <template v-if="!templates.message">
<component :is="templates.icon ? templates.icon : iconComponent && iconComponent.name ? iconComponent : 'span'" :class="cx('icon')" v-bind="ptm('icon')" /> <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')"> <div :class="cx('text')" v-bind="ptm('text')">