Refactor #3965 - Refactor on class implementation
parent
eddfa1a5ef
commit
b4d07f0176
|
@ -169,7 +169,6 @@ const classes = {
|
|||
dropdownButton: 'p-datepicker-trigger',
|
||||
panel: ({ instance, props, state }) => [
|
||||
'p-datepicker p-component',
|
||||
props.panelClass,
|
||||
{
|
||||
'p-datepicker-inline': props.inline,
|
||||
'p-disabled': props.disabled,
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
v-if="inline || overlayVisible"
|
||||
:ref="overlayRef"
|
||||
:id="panelId"
|
||||
:class="cx('panel')"
|
||||
:class="[cx('panel'), panelClass]"
|
||||
:style="panelStyle"
|
||||
:role="inline ? null : 'dialog'"
|
||||
:aria-modal="inline ? null : 'true'"
|
||||
|
|
|
@ -51,10 +51,10 @@ const styles = `
|
|||
const classes = {
|
||||
root: ({ props }) => 'p-message p-component p-message-' + props.severity,
|
||||
wrapper: 'p-message-wrapper',
|
||||
icon: ({ props }) => ['p-message-icon', props.icon],
|
||||
icon: 'p-message-icon',
|
||||
text: 'p-message-text',
|
||||
button: 'p-message-close p-link',
|
||||
buttonIcon: ({ props }) => ['p-message-close-icon', props.closeIcon]
|
||||
buttonIcon: 'p-message-close-icon'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'message', manual: true });
|
||||
|
|
|
@ -3,15 +3,15 @@
|
|||
<div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')" data-pc-name="message">
|
||||
<div :class="cx('wrapper')" v-bind="ptm('wrapper')">
|
||||
<slot name="messageicon" class="p-message-icon">
|
||||
<component :is="icon ? 'span' : iconComponent" :class="cx('icon')" v-bind="ptm('icon')"></component>
|
||||
<component :is="icon ? 'span' : iconComponent" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component>
|
||||
</slot>
|
||||
<div class="p-message-text" :class="cx('text')" v-bind="ptm('text')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<button v-if="closable" v-ripple :class="cx('button')" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('button') }">
|
||||
<slot name="closeicon">
|
||||
<i v-if="closeIcon" :class="cx('buttonIcon')" v-bind="ptm('buttonIcon')" />
|
||||
<TimesIcon v-else :class="cx('buttonIcon')" v-bind="ptm('buttonIcon')" />
|
||||
<i v-if="closeIcon" :class="[cx('buttonIcon'), closeIcon]" v-bind="ptm('buttonIcon')" />
|
||||
<TimesIcon v-else :class="[cx('buttonIcon'), closeIcon]" v-bind="ptm('buttonIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -133,7 +133,6 @@ const classes = {
|
|||
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
|
||||
}
|
||||
],
|
||||
buttonIcon: ({ instance, props }) => (instance.d_visible && !!props.hideIcon ? props.hideIcon : props.showIcon),
|
||||
menu: 'p-speeddial-list',
|
||||
menuitem: ({ instance, id }) => [
|
||||
'p-speeddial-item',
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
<template #icon>
|
||||
<slot name="icon" :visible="d_visible">
|
||||
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="cx('buttonIcon')" v-bind="ptm('button')['icon']" />
|
||||
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="cx('buttonIcon')" v-bind="ptm('button')['icon']" />
|
||||
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="d_visible && !!hideIcon ? hideIcon : showIcon" v-bind="ptm('button')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</SDButton>
|
||||
|
|
|
@ -108,7 +108,6 @@ const classes = {
|
|||
],
|
||||
container: ({ props }) => [
|
||||
'p-toast-message',
|
||||
props.message.styleClass,
|
||||
{
|
||||
'p-toast-message-info': props.message.severity === 'info' || props.message.severity === undefined,
|
||||
'p-toast-message-warn': props.message.severity === 'warn',
|
||||
|
@ -116,7 +115,7 @@ const classes = {
|
|||
'p-toast-message-success': props.message.severity === 'success'
|
||||
}
|
||||
],
|
||||
content: ({ props }) => `p-toast-message-content ${props.message.contentStyleClass || ''}`,
|
||||
content: 'p-toast-message-content',
|
||||
icon: ({ props }) => [
|
||||
'p-toast-message-icon',
|
||||
{
|
||||
|
@ -130,7 +129,7 @@ const classes = {
|
|||
summary: 'p-toast-summary',
|
||||
detail: 'p-toast-detail',
|
||||
button: 'p-toast-icon-close p-link',
|
||||
buttonIcon: ({ props }) => ['p-toast-icon-close-icon', props.closeIcon]
|
||||
buttonIcon: 'p-toast-icon-close-icon'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'toast', manual: true });
|
||||
|
|
|
@ -35,7 +35,6 @@ export default {
|
|||
extends: BaseToast,
|
||||
inheritAttrs: false,
|
||||
emits: ['close', 'life-end'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
messages: []
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="cx('container')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')">
|
||||
<div :class="cx('content')" v-bind="ptm('content')">
|
||||
<div :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')">
|
||||
|
@ -11,7 +11,7 @@
|
|||
<component v-else :is="templates.message" :message="message"></component>
|
||||
<div v-if="message.closable !== false" v-bind="ptm('buttonContainer')">
|
||||
<button v-ripple :class="cx('button')" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button') }">
|
||||
<component :is="templates.closeicon || 'TimesIcon'" :class="cx('buttonIcon')" v-bind="ptm('buttonIcon')" />
|
||||
<component :is="templates.closeicon || 'TimesIcon'" :class="[cx('buttonIcon'), closeIcon]" v-bind="ptm('buttonIcon')" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -12,7 +12,6 @@ const classes = {
|
|||
}
|
||||
],
|
||||
icon: ({ instance, props }) => [
|
||||
props.modelValue ? props.onIcon : props.offIcon,
|
||||
'p-button-icon',
|
||||
{
|
||||
'p-button-icon-left': props.iconPos === 'left' && instance.label,
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
/>
|
||||
</span>
|
||||
<slot name="icon" :value="modelValue" :class="cx('icon')">
|
||||
<span v-if="onIcon || offIcon" :class="cx('icon')" v-bind="ptm('icon')" />
|
||||
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="ptm('icon')" />
|
||||
</slot>
|
||||
<span :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue