Refactored Button
parent
03ca6c89ab
commit
b635047cd0
|
@ -8,7 +8,7 @@
|
|||
<slot v-else name="icon" :class="[cx('icon')]">
|
||||
<span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
|
||||
</slot>
|
||||
<span :class="cx('label')" v-bind="ptm('label')">{{ label || ' ' }}</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>
|
||||
</slot>
|
||||
</button>
|
||||
|
|
|
@ -6,9 +6,7 @@ const classes = {
|
|||
{
|
||||
'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
|
||||
'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-label-only': props.loading && !instance.hasIcon && props.label,
|
||||
'p-button-link': props.link,
|
||||
[`p-button-${props.severity}`]: props.severity,
|
||||
'p-button-raised': props.raised,
|
||||
|
@ -20,14 +18,11 @@ const classes = {
|
|||
'p-button-plain': props.plain
|
||||
}
|
||||
],
|
||||
loadingIcon: 'p-button-loading-icon pi-spin',
|
||||
loadingIcon: 'p-button-loading-icon',
|
||||
icon: ({ props }) => [
|
||||
'p-button-icon',
|
||||
{
|
||||
'p-button-icon-left': props.iconPos === 'left' && 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
|
||||
[`p-button-icon-${props.iconPos}`]: props.label
|
||||
}
|
||||
],
|
||||
label: 'p-button-label'
|
||||
|
|
|
@ -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')};
|
||||
border-radius: ${dt('rounded.base')};
|
||||
outline-color: transparent;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.p-button:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-button-icon-left {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.p-button-icon-right {
|
||||
order: 1;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.p-button-icon-top {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.p-button-icon-bottom {
|
||||
order: 2;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.p-button-icon-only {
|
||||
|
@ -48,16 +39,6 @@ export default {
|
|||
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 {
|
||||
border-radius: 50%;
|
||||
height: 2.5rem;
|
||||
|
@ -81,14 +62,6 @@ export default {
|
|||
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 {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue