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

Refactor #5437 - Removed shared classes

pull/5507/head
tugcekucukoglu 2024-03-22 11:53:44 +03:00
parent 6e2280009f
commit 4d640c4442
16 changed files with 50 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/lib/calendar/Calendar.vue
View File

@ -482,8 +482,12 @@
</div> </div>
</div> </div>
<div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')"> <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" @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" /> {{ 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> </div>
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>

4
components/lib/calendar/style/CalendarStyle.js
View File

@ -66,8 +66,8 @@ const classes = {
secondPicker: 'p-second-picker', secondPicker: 'p-second-picker',
ampmPicker: 'p-ampm-picker', ampmPicker: 'p-ampm-picker',
buttonbar: 'p-datepicker-buttonbar', buttonbar: 'p-datepicker-buttonbar',
todayButton: 'p-button-text', todayButton: 'p-buttonbar-button',
clearButton: 'p-button-text' clearButton: 'p-buttonbar-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

2
components/lib/cascadeselect/style/CascadeSelectStyle.js
View File

@ -18,7 +18,7 @@ const classes = {
} }
], ],
label: ({ instance, props }) => [ label: ({ instance, props }) => [
'p-cascadeselect-label p-inputtext', 'p-cascadeselect-label',
{ {
'p-placeholder': instance.label === props.placeholder, 'p-placeholder': instance.label === props.placeholder,
'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0) 'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)

2
components/lib/chips/style/ChipsStyle.js
View File

@ -12,7 +12,7 @@ const classes = {
} }
], ],
container: ({ props, instance }) => [ 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' 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
} }

2
components/lib/colorpicker/style/ColorPickerStyle.js
View File

@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }], 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 }) => [ panel: ({ instance, props }) => [
'p-colorpicker-panel', 'p-colorpicker-panel',
{ {

2
components/lib/confirmdialog/ConfirmDialog.vue
View File

@ -28,7 +28,7 @@
<component v-else :is="$slots.message" :message="confirmation"></component> <component v-else :is="$slots.message" :message="confirmation"></component>
</template> </template>
<template v-if="!$slots.container" #footer> <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"> <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon"> <slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" /> <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />

2
components/lib/confirmdialog/style/ConfirmDialogStyle.js
View File

@ -4,7 +4,7 @@ const classes = {
root: 'p-confirm-dialog', root: 'p-confirm-dialog',
icon: 'p-confirm-dialog-icon', icon: 'p-confirm-dialog-icon',
message: 'p-confirm-dialog-message', 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' acceptButton: 'p-confirm-dialog-accept'
}; };

23
components/lib/confirmpopup/ConfirmPopup.vue
View File

@ -15,14 +15,33 @@
</template> </template>
<component v-else :is="$slots.message" :message="confirmation"></component> <component v-else :is="$slots.message" :message="confirmation"></component>
<div :class="cx('footer')" v-bind="ptm('footer')"> <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"> <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon"> <slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" /> <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
</slot> </slot>
</template> </template>
</CPButton> </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"> <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon"> <slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" /> <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />

4
components/lib/confirmpopup/style/ConfirmPopupStyle.js
View File

@ -11,8 +11,8 @@ const classes = {
icon: 'p-confirm-popup-icon', icon: 'p-confirm-popup-icon',
message: 'p-confirm-popup-message', message: 'p-confirm-popup-message',
footer: 'p-confirm-popup-footer', footer: 'p-confirm-popup-footer',
rejectButton: ({ instance }) => ['p-confirm-popup-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-sm p-button-text' : null], rejectButton: 'p-confirm-popup-reject',
acceptButton: ({ instance }) => ['p-confirm-popup-accept', instance.confirmation && !instance.confirmation.acceptClass ? 'p-button-sm' : null] acceptButton: 'p-confirm-popup-accept'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

8
components/lib/datatable/style/DataTableStyle.js
View File

@ -100,12 +100,12 @@ const classes = {
filterConstraints: 'p-column-filter-constraints', filterConstraints: 'p-column-filter-constraints',
filterConstraint: 'p-column-filter-constraint', filterConstraint: 'p-column-filter-constraint',
filterMatchModeDropdown: 'p-column-filter-matchmode-dropdown', 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', 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', filterButtonbar: 'p-column-filter-buttonbar',
filterClearButton: 'p-button-outlined p-button-sm', filterClearButton: 'p-column-filter-clear-button',
filterApplyButton: 'p-button-sm', filterApplyButton: 'p-column-filter-apply-button',
//tablebody //tablebody
tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'), tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
rowgroupHeader: 'p-rowgroup-header', rowgroupHeader: 'p-rowgroup-header',

10
components/lib/fileupload/style/FileUploadStyle.js
View File

@ -4,19 +4,19 @@ const classes = {
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`], root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
buttonbar: 'p-fileupload-buttonbar', buttonbar: 'p-fileupload-buttonbar',
chooseButton: ({ instance, props }) => [ 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-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles,
'p-disabled': props.disabled, 'p-disabled': props.disabled,
'p-focus': instance.focused 'p-focus': instance.focused
} }
], ],
chooseIcon: 'p-button-icon p-button-icon-left', chooseIcon: 'p-fileupload-choose-icon',
chooseButtonLabel: 'p-button-label', chooseButtonLabel: 'p-fileupload-choosebutton-label',
content: 'p-fileupload-content', content: 'p-fileupload-content',
empty: 'p-fileupload-empty', empty: 'p-fileupload-empty',
uploadIcon: 'p-button-icon p-button-icon-left', uploadIcon: 'p-fileupload-upload-icon',
label: 'p-button-label', label: 'p-fileupload-button-label',
file: 'p-fileupload-file', file: 'p-fileupload-file',
thumbnail: 'p-fileupload-file-thumbnail', thumbnail: 'p-fileupload-file-thumbnail',
details: 'p-fileupload-file-details', details: 'p-fileupload-file-details',

2
components/lib/password/style/PasswordStyle.js
View File

@ -10,7 +10,7 @@ const classes = {
{ {
'p-inputwrapper-filled': instance.filled, 'p-inputwrapper-filled': instance.filled,
'p-inputwrapper-focus': instance.focused, 'p-inputwrapper-focus': instance.focused,
'p-icon-field p-icon-field-right': props.toggleMask 'p-password-icon-field': props.toggleMask
} }
], ],
input: ({ props }) => [ input: ({ props }) => [

2
components/lib/speeddial/style/SpeedDialStyle.js
View File

@ -22,7 +22,7 @@ const classes = {
} }
], ],
button: ({ props }) => [ button: ({ props }) => [
'p-speeddial-button p-button-rounded', 'p-speeddial-button',
{ {
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon 'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
} }

12
components/lib/splitbutton/style/SplitButtonStyle.js
View File

@ -1,17 +1,7 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ props }) => [ root: 'p-splitbutton p-component',
'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'
}
],
button: 'p-splitbutton-defaultbutton', button: 'p-splitbutton-defaultbutton',
menuButton: 'p-splitbutton-menubutton' menuButton: 'p-splitbutton-menubutton'
}; };

2
components/lib/textarea/style/TextareaStyle.js
View File

@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ instance, props }) => [ root: ({ instance, props }) => [
'p-inputtextarea p-inputtext p-component', 'p-inputtextarea p-component',
{ {
'p-filled': instance.filled, 'p-filled': instance.filled,
'p-inputtextarea-resizable ': props.autoResize, 'p-inputtextarea-resizable ': props.autoResize,

2
components/lib/tree/style/TreeStyle.js
View File

@ -12,7 +12,7 @@ const classes = {
loadingOverlay: 'p-tree-loading-overlay p-component-overlay', loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
loadingIcon: 'p-tree-loading-icon', loadingIcon: 'p-tree-loading-icon',
filterContainer: 'p-tree-filter-container', filterContainer: 'p-tree-filter-container',
input: 'p-tree-filter p-inputtext p-component', input: 'p-tree-filter p-component',
searchIcon: 'p-tree-filter-icon', searchIcon: 'p-tree-filter-icon',
wrapper: 'p-tree-wrapper', wrapper: 'p-tree-wrapper',
container: 'p-tree-container', container: 'p-tree-container',