Refactor #3965 - Refactor on class implementation

components/lib/calendar/BaseCalendar.vue

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

components/lib/calendar/Calendar.vue

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

components/lib/message/BaseMessage.vue

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

components/lib/message/Message.vue

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

components/lib/speeddial/BaseSpeedDial.vue

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

components/lib/speeddial/SpeedDial.vue

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

components/lib/toast/BaseToast.vue

@@ -108,15 +108,14 @@ 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',
             'p-toast-message-error': props.message.severity === 'error',
             '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 });

components/lib/toast/Toast.vue

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

components/lib/toast/ToastMessage.vue

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

components/lib/togglebutton/BaseToggleButton.vue

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

components/lib/togglebutton/ToggleButton.vue

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