Refactor #5437 - Removed shared classes

2024-03-22 11:53:44 +03:00 · 2024-03-22 11:53:44 +03:00 · 4d640c4442
parent 6e2280009f
commit 4d640c4442
16 changed files with 50 additions and 37 deletions
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@ -482,8 +482,12 @@
                        </div>
                    </div>
                    <div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
-                        <button type="button" :label="todayLabel" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('todayButton')" data-pc-group-section="button" />
-                        <button type="button" :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('clearButton')" data-pc-group-section="button" />
+                        <button type="button" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('todayButton')" data-pc-group-section="button">
+                            {{ todayLabel }}
+                        </button>
+                        <button type="button" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('clearButton')" data-pc-group-section="button">
+                            {{ clearLabel }}
+                        </button>
                    </div>
                    <slot name="footer"></slot>
                </div>
--- a/components/lib/calendar/style/CalendarStyle.js
+++ b/components/lib/calendar/style/CalendarStyle.js
@ -66,8 +66,8 @@ const classes = {
    secondPicker: 'p-second-picker',
    ampmPicker: 'p-ampm-picker',
    buttonbar: 'p-datepicker-buttonbar',
-    todayButton: 'p-button-text',
-    clearButton: 'p-button-text'
+    todayButton: 'p-buttonbar-button',
+    clearButton: 'p-buttonbar-button'
 };

 export default BaseStyle.extend({
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@ -18,7 +18,7 @@ const classes = {
        }
    ],
    label: ({ instance, props }) => [
-        'p-cascadeselect-label p-inputtext',
+        'p-cascadeselect-label',
        {
            'p-placeholder': instance.label === props.placeholder,
            'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
--- a/components/lib/chips/style/ChipsStyle.js
+++ b/components/lib/chips/style/ChipsStyle.js
@ -12,7 +12,7 @@ const classes = {
        }
    ],
    container: ({ props, instance }) => [
-        'p-inputtext p-chips-multiple-container',
+        'p-chips-multiple-container',
        {
            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
        }
--- a/components/lib/colorpicker/style/ColorPickerStyle.js
+++ b/components/lib/colorpicker/style/ColorPickerStyle.js
@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';

 const classes = {
    root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
-    input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
+    input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
    panel: ({ instance, props }) => [
        'p-colorpicker-panel',
        {
--- a/components/lib/confirmdialog/ConfirmDialog.vue
+++ b/components/lib/confirmdialog/ConfirmDialog.vue
@ -28,7 +28,7 @@
            <component v-else :is="$slots.message" :message="confirmation"></component>
        </template>
        <template v-if="!$slots.container" #footer>
-            <CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')">
+            <CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :text="!confirmation.rejectClass" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')">
                <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                    <slot name="rejecticon">
                        <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
--- a/components/lib/confirmdialog/style/ConfirmDialogStyle.js
+++ b/components/lib/confirmdialog/style/ConfirmDialogStyle.js
@ -4,7 +4,7 @@ const classes = {
    root: 'p-confirm-dialog',
    icon: 'p-confirm-dialog-icon',
    message: 'p-confirm-dialog-message',
-    rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
+    rejectButton: 'p-confirm-dialog-reject',
    acceptButton: 'p-confirm-dialog-accept'
 };

--- a/components/lib/confirmpopup/ConfirmPopup.vue
+++ b/components/lib/confirmpopup/ConfirmPopup.vue
@ -15,14 +15,33 @@
                    </template>
                    <component v-else :is="$slots.message" :message="confirmation"></component>
                    <div :class="cx('footer')" v-bind="ptm('footer')">
-                        <CPButton :label="rejectLabel" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" :class="[cx('rejectButton'), confirmation.rejectClass]" :unstyled="unstyled" :pt="ptm('rejectButton')">
+                        <CPButton
+                            :label="rejectLabel"
+                            @click="reject()"
+                            @keydown="onRejectKeydown"
+                            :autofocus="autoFocusReject"
+                            :class="[cx('rejectButton'), confirmation.rejectClass]"
+                            :size="{ small: !confirmation.rejectClass }"
+                            :text="!confirmation.rejectClass"
+                            :unstyled="unstyled"
+                            :pt="ptm('rejectButton')"
+                        >
                            <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                                <slot name="rejecticon">
                                    <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
                                </slot>
                            </template>
                        </CPButton>
-                        <CPButton :label="acceptLabel" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :class="[cx('acceptButton'), confirmation.acceptClass]" :unstyled="unstyled" :pt="ptm('acceptButton')">
+                        <CPButton
+                            :label="acceptLabel"
+                            @click="accept()"
+                            @keydown="onAcceptKeydown"
+                            :autofocus="autoFocusAccept"
+                            :class="[cx('acceptButton'), confirmation.acceptClass]"
+                            :size="{ small: !confirmation.acceptClass }"
+                            :unstyled="unstyled"
+                            :pt="ptm('acceptButton')"
+                        >
                            <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
                                <slot name="accepticon">
                                    <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
--- a/components/lib/confirmpopup/style/ConfirmPopupStyle.js
+++ b/components/lib/confirmpopup/style/ConfirmPopupStyle.js
@ -11,8 +11,8 @@ const classes = {
    icon: 'p-confirm-popup-icon',
    message: 'p-confirm-popup-message',
    footer: 'p-confirm-popup-footer',
-    rejectButton: ({ instance }) => ['p-confirm-popup-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-sm p-button-text' : null],
-    acceptButton: ({ instance }) => ['p-confirm-popup-accept', instance.confirmation && !instance.confirmation.acceptClass ? 'p-button-sm' : null]
+    rejectButton: 'p-confirm-popup-reject',
+    acceptButton: 'p-confirm-popup-accept'
 };

 export default BaseStyle.extend({
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@ -100,12 +100,12 @@ const classes = {
    filterConstraints: 'p-column-filter-constraints',
    filterConstraint: 'p-column-filter-constraint',
    filterMatchModeDropdown: 'p-column-filter-matchmode-dropdown',
-    filterRemoveButton: 'p-column-filter-remove-button p-button-text p-button-danger p-button-sm',
+    filterRemoveButton: 'p-column-filter-remove-button',
    filterAddRule: 'p-column-filter-add-rule',
-    filterAddRuleButton: 'p-column-filter-add-button p-button-text p-button-sm',
+    filterAddRuleButton: 'p-column-filter-add-button',
    filterButtonbar: 'p-column-filter-buttonbar',
-    filterClearButton: 'p-button-outlined p-button-sm',
-    filterApplyButton: 'p-button-sm',
+    filterClearButton: 'p-column-filter-clear-button',
+    filterApplyButton: 'p-column-filter-apply-button',
    //tablebody
    tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
    rowgroupHeader: 'p-rowgroup-header',
--- a/components/lib/fileupload/style/FileUploadStyle.js
+++ b/components/lib/fileupload/style/FileUploadStyle.js
@ -4,19 +4,19 @@ const classes = {
    root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
    buttonbar: 'p-fileupload-buttonbar',
    chooseButton: ({ instance, props }) => [
-        'p-button p-component p-fileupload-choose',
+        'p-component p-fileupload-choose',
        {
            'p-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles,
            'p-disabled': props.disabled,
            'p-focus': instance.focused
        }
    ],
-    chooseIcon: 'p-button-icon p-button-icon-left',
-    chooseButtonLabel: 'p-button-label',
+    chooseIcon: 'p-fileupload-choose-icon',
+    chooseButtonLabel: 'p-fileupload-choosebutton-label',
    content: 'p-fileupload-content',
    empty: 'p-fileupload-empty',
-    uploadIcon: 'p-button-icon p-button-icon-left',
-    label: 'p-button-label',
+    uploadIcon: 'p-fileupload-upload-icon',
+    label: 'p-fileupload-button-label',
    file: 'p-fileupload-file',
    thumbnail: 'p-fileupload-file-thumbnail',
    details: 'p-fileupload-file-details',
--- a/components/lib/password/style/PasswordStyle.js
+++ b/components/lib/password/style/PasswordStyle.js
@ -10,7 +10,7 @@ const classes = {
        {
            'p-inputwrapper-filled': instance.filled,
            'p-inputwrapper-focus': instance.focused,
-            'p-icon-field p-icon-field-right': props.toggleMask
+            'p-password-icon-field': props.toggleMask
        }
    ],
    input: ({ props }) => [
--- a/components/lib/speeddial/style/SpeedDialStyle.js
+++ b/components/lib/speeddial/style/SpeedDialStyle.js
@ -22,7 +22,7 @@ const classes = {
        }
    ],
    button: ({ props }) => [
-        'p-speeddial-button p-button-rounded',
+        'p-speeddial-button',
        {
            'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
        }
--- a/components/lib/splitbutton/style/SplitButtonStyle.js
+++ b/components/lib/splitbutton/style/SplitButtonStyle.js
@ -1,17 +1,7 @@
 import BaseStyle from 'primevue/base/style';

 const classes = {
-    root: ({ props }) => [
-        'p-splitbutton p-component',
-        {
-            'p-button-raised': props.raised,
-            'p-button-rounded': props.rounded,
-            'p-button-text': props.text,
-            'p-button-outlined': props.outlined,
-            'p-button-sm': props.size === 'small',
-            'p-button-lg': props.size === 'large'
-        }
-    ],
+    root: 'p-splitbutton p-component',
    button: 'p-splitbutton-defaultbutton',
    menuButton: 'p-splitbutton-menubutton'
 };
--- a/components/lib/textarea/style/TextareaStyle.js
+++ b/components/lib/textarea/style/TextareaStyle.js
@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';

 const classes = {
    root: ({ instance, props }) => [
-        'p-inputtextarea p-inputtext p-component',
+        'p-inputtextarea p-component',
        {
            'p-filled': instance.filled,
            'p-inputtextarea-resizable ': props.autoResize,
--- a/components/lib/tree/style/TreeStyle.js
+++ b/components/lib/tree/style/TreeStyle.js
@ -12,7 +12,7 @@ const classes = {
    loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
    loadingIcon: 'p-tree-loading-icon',
    filterContainer: 'p-tree-filter-container',
-    input: 'p-tree-filter p-inputtext p-component',
+    input: 'p-tree-filter p-component',
    searchIcon: 'p-tree-filter-icon',
    wrapper: 'p-tree-wrapper',
    container: 'p-tree-container',