Fixed #4042 - Positioning defect PrimeVue Button with icon slot

pull/3984/head^2
Tuğçe Küçükoğlu 2023-06-09 15:09:21 +03:00
parent 2b63693a68
commit 66b08abf06
3 changed files with 9 additions and 9 deletions

View File

@ -23,15 +23,15 @@
</template> </template>
<component v-else :is="$slots.message" :message="confirmation"></component> <component v-else :is="$slots.message" :message="confirmation"></component>
<template #footer> <template #footer>
<CDButton :label="rejectLabel" :class="cx('rejectButton')" iconPos="left" @click="reject()" :autofocus="autoFocusReject" :pt="ptm('rejectButton')"> <CDButton :label="rejectLabel" :class="cx('rejectButton')" @click="reject()" :autofocus="autoFocusReject" :pt="ptm('rejectButton')">
<template #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']" /> <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
</slot> </slot>
</template> </template>
</CDButton> </CDButton>
<CDButton :label="acceptLabel" :class="cx('acceptButton')" iconPos="left" @click="accept()" :autofocus="autoFocusAccept" :pt="ptm('acceptButton')"> <CDButton :label="acceptLabel" :class="cx('acceptButton')" @click="accept()" :autofocus="autoFocusAccept" :pt="ptm('acceptButton')">
<template #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']" /> <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
</slot> </slot>
@ -42,10 +42,10 @@
</template> </template>
<script> <script>
import BaseConfirmDialog from './BaseConfirmDialog.vue';
import Button from 'primevue/button'; import Button from 'primevue/button';
import ConfirmationEventBus from 'primevue/confirmationeventbus'; import ConfirmationEventBus from 'primevue/confirmationeventbus';
import Dialog from 'primevue/dialog'; import Dialog from 'primevue/dialog';
import BaseConfirmDialog from './BaseConfirmDialog.vue';
export default { export default {
name: 'ConfirmDialog', name: 'ConfirmDialog',

View File

@ -14,14 +14,14 @@
<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')" :pt="ptm('rejectButton')"> <CPButton :label="rejectLabel" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" :class="cx('rejectButton')" :pt="ptm('rejectButton')">
<template #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']" /> <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
</slot> </slot>
</template> </template>
</CPButton> </CPButton>
<CPButton :label="acceptLabel" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :class="cx('acceptButton')" :pt="ptm('acceptButton')"> <CPButton :label="acceptLabel" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :class="cx('acceptButton')" :pt="ptm('acceptButton')">
<template #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']" /> <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
</slot> </slot>
@ -34,13 +34,13 @@
</template> </template>
<script> <script>
import BaseConfirmPopup from './BaseConfirmPopup.vue';
import Button from 'primevue/button'; import Button from 'primevue/button';
import ConfirmationEventBus from 'primevue/confirmationeventbus'; import ConfirmationEventBus from 'primevue/confirmationeventbus';
import FocusTrap from 'primevue/focustrap'; import FocusTrap from 'primevue/focustrap';
import OverlayEventBus from 'primevue/overlayeventbus'; import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils'; import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
import BaseConfirmPopup from './BaseConfirmPopup.vue';
export default { export default {
name: 'ConfirmPopup', name: 'ConfirmPopup',

View File

@ -2,7 +2,7 @@
<div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="splitbutton" :data-pc-severity="severity"> <div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="splitbutton" :data-pc-severity="severity">
<slot> <slot>
<PVSButton type="button" :class="cx('button')" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" :unstyled="unstyled" :pt="ptm('button')" v-bind="buttonProps"> <PVSButton type="button" :class="cx('button')" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" :unstyled="unstyled" :pt="ptm('button')" v-bind="buttonProps">
<template #icon="slotProps"> <template v-if="icon" #icon="slotProps">
<slot name="icon" :class="slotProps.class"> <slot name="icon" :class="slotProps.class">
<span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" /> <span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" />
</slot> </slot>