Refactor #3965 - Refactor on class implementation

pull/4101/head^2
Tuğçe Küçükoğlu 2023-07-06 15:13:28 +03:00
parent eddfa1a5ef
commit b4d07f0176
11 changed files with 12 additions and 17 deletions

View File

@ -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,

View File

@ -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'"

View File

@ -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 });

View File

@ -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>

View File

@ -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',

View File

@ -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>

View File

@ -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 });

View File

@ -35,7 +35,6 @@ export default {
extends: BaseToast,
inheritAttrs: false,
emits: ['close', 'life-end'],
data() {
return {
messages: []

View File

@ -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>

View File

@ -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,

View File

@ -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>