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

Refactored Button

pull/5677/head
Cagatay Civici 2024-04-08 00:10:48 +03:00
parent 03ca6c89ab
commit b635047cd0
3 changed files with 4 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/button/Button.vue
View File

@ -8,7 +8,7 @@
<slot v-else name="icon" :class="[cx('icon')]"> <slot v-else name="icon" :class="[cx('icon')]">
<span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span> <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
</slot> </slot>
<span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span> <span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
<Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('badge')"></Badge> <Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
</slot> </slot>
</button> </button>

9
components/lib/button/style/ButtonStyle.js
View File

@ -6,9 +6,7 @@ const classes = {
{ {
'p-button-icon-only': instance.hasIcon && !props.label && !props.badge, 'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label, 'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
'p-disabled': instance.$attrs.disabled || instance.$attrs.disabled === '' || props.loading,
'p-button-loading': props.loading, 'p-button-loading': props.loading,
'p-button-loading-label-only': props.loading && !instance.hasIcon && props.label,
'p-button-link': props.link, 'p-button-link': props.link,
[`p-button-${props.severity}`]: props.severity, [`p-button-${props.severity}`]: props.severity,
'p-button-raised': props.raised, 'p-button-raised': props.raised,
@ -20,14 +18,11 @@ const classes = {
'p-button-plain': props.plain 'p-button-plain': props.plain
} }
], ],
loadingIcon: 'p-button-loading-icon pi-spin', loadingIcon: 'p-button-loading-icon',
icon: ({ props }) => [ icon: ({ props }) => [
'p-button-icon', 'p-button-icon',
{ {
'p-button-icon-left': props.iconPos === 'left' && props.label, [`p-button-icon-${props.iconPos}`]: props.label
'p-button-icon-right': props.iconPos === 'right' && props.label,
'p-button-icon-top': props.iconPos === 'top' && props.label,
'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
} }
], ],
label: 'p-button-label' label: 'p-button-label'

29
components/lib/themes/primeone/base/button/index.js
View File

@ -18,28 +18,19 @@ export default {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
outline-color: transparent; outline-color: transparent;
gap: 0.5rem;
} }
.p-button:disabled { .p-button:disabled {
cursor: default; cursor: default;
} }
.p-button-icon-left {
margin-right: 0.5rem;
}
.p-button-icon-right { .p-button-icon-right {
order: 1; order: 1;
margin-left: 0.5rem;
}
.p-button-icon-top {
margin-bottom: 0.5rem;
} }
.p-button-icon-bottom { .p-button-icon-bottom {
order: 2; order: 2;
margin-top: 0.5rem;
} }
.p-button-icon-only { .p-button-icon-only {
@ -48,16 +39,6 @@ export default {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
.p-button-icon-only .p-button-label {
visibility: hidden;
width: 0;
}
.p-button.p-button-icon-only .p-button-icon-left,
.p-button.p-button-icon-only .p-button-icon-right {
margin: 0;
}
.p-button-icon-only.p-button-rounded { .p-button-icon-only.p-button-rounded {
border-radius: 50%; border-radius: 50%;
height: 2.5rem; height: 2.5rem;
@ -81,14 +62,6 @@ export default {
font-size: 1.25rem; font-size: 1.25rem;
} }
.p-button-loading-label-only .p-button-label {
margin-left: 0.5rem;
}
.p-button-loading-label-only .p-button-loading-icon {
margin-right: 0;
}
.p-button-vertical { .p-button-vertical {
flex-direction: column; flex-direction: column;
} }