Refactor #3832 - Button icon template updates
Tuğçe Küçükoğlu
parent
f6c520c53d
commit
813fa97075
|
|
@ -38,9 +38,11 @@
|
|||
:aria-expanded="overlayVisible"
|
||||
:aria-controls="panelId"
|
||||
>
|
||||
<slot name="triggericon">
|
||||
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="triggericon">
|
||||
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" />
|
||||
</slot>
|
||||
</template>
|
||||
</CalendarButton>
|
||||
<Portal :appendTo="appendTo" :disabled="inline">
|
||||
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
|
||||
|
|
|
|||
|
|
@ -27,25 +27,33 @@
|
|||
/>
|
||||
<span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group">
|
||||
<INButton :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
|
||||
<template #icon>
|
||||
<slot name="incrementbuttonicon">
|
||||
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
|
||||
</slot>
|
||||
</template>
|
||||
</INButton>
|
||||
<INButton :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
|
||||
<template #icon>
|
||||
<slot name="decrementbuttonicon">
|
||||
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
|
||||
</slot>
|
||||
</template>
|
||||
</INButton>
|
||||
</span>
|
||||
<INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
|
||||
<template #icon>
|
||||
<slot name="incrementbuttonicon">
|
||||
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
|
||||
</slot>
|
||||
</INButton>
|
||||
<INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
|
||||
</template>
|
||||
</INButton>
|
||||
<INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
|
||||
<template #icon>
|
||||
<slot name="decrementbuttonicon">
|
||||
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
|
||||
</slot>
|
||||
</INButton>
|
||||
</span>
|
||||
<INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
|
||||
<slot name="incrementbuttonicon">
|
||||
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
|
||||
</slot>
|
||||
</INButton>
|
||||
<INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
|
||||
<slot name="decrementbuttonicon">
|
||||
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
|
||||
</slot>
|
||||
</template>
|
||||
</INButton>
|
||||
</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,24 +3,32 @@
|
|||
<div class="p-orderlist-controls">
|
||||
<slot name="controlsstart"></slot>
|
||||
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps">
|
||||
<slot>
|
||||
<component :is="$slots.moveupicon || 'AngleUpIcon'" />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="moveupicon">
|
||||
<AngleUpIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</OLButton>
|
||||
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps">
|
||||
<slot name="movetopicon">
|
||||
<AngleDoubleUpIcon />
|
||||
</slot>
|
||||
<template #icon
|
||||
><slot name="movetopicon">
|
||||
<AngleDoubleUpIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</OLButton>
|
||||
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps">
|
||||
<slot name="movedownicon">
|
||||
<AngleDownIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movedownicon">
|
||||
<AngleDownIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</OLButton>
|
||||
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps">
|
||||
<slot name="movebottomicon">
|
||||
<AngleDoubleDownIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movebottomicon">
|
||||
<AngleDoubleDownIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</OLButton>
|
||||
<slot name="controlsend"></slot>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,24 +3,32 @@
|
|||
<div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls">
|
||||
<slot name="sourcecontrolsstart"></slot>
|
||||
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps">
|
||||
<slot name="moveupicon">
|
||||
<AngleUpIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="moveupicon">
|
||||
<AngleUpIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps">
|
||||
<slot name="movetopicon">
|
||||
<AngleDoubleUpIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movetopicon">
|
||||
<AngleDoubleUpIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps">
|
||||
<slot name="movedownicon">
|
||||
<AngleDownIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movedownicon">
|
||||
<AngleDownIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps">
|
||||
<slot name="movebottomicon">
|
||||
<AngleDoubleDownIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movebottomicon">
|
||||
<AngleDoubleDownIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<slot name="sourcecontrolsend"></slot>
|
||||
</div>
|
||||
|
|
@ -64,24 +72,32 @@
|
|||
<div class="p-picklist-buttons p-picklist-transfer-buttons">
|
||||
<slot name="movecontrolsstart"></slot>
|
||||
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps">
|
||||
<slot name="movetotargeticon">
|
||||
<AngleRightIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movetotargeticon">
|
||||
<AngleRightIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps">
|
||||
<slot name="movealltotargeticon">
|
||||
<AngleDoubleRightIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movealltotargeticon">
|
||||
<AngleDoubleRightIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps">
|
||||
<slot name="movetosourceicon">
|
||||
<AngleLeftIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movetosourceicon">
|
||||
<AngleLeftIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps">
|
||||
<slot name="movealltosourceicon">
|
||||
<AngleDoubleLeftIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movealltosourceicon">
|
||||
<AngleDoubleLeftIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<slot name="movecontrolsend"></slot>
|
||||
</div>
|
||||
|
|
@ -126,24 +142,32 @@
|
|||
<div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls">
|
||||
<slot name="targetcontrolsstart"></slot>
|
||||
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps">
|
||||
<slot name="moveupicon">
|
||||
<AngleUpIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="moveupicon">
|
||||
<AngleUpIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps">
|
||||
<slot name="movetopicon">
|
||||
<AngleDoubleUpIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movetopicon">
|
||||
<AngleDoubleUpIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps">
|
||||
<slot name="movedownicon">
|
||||
<AngleDownIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movedownicon">
|
||||
<AngleDownIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps">
|
||||
<slot name="movebottomicon">
|
||||
<AngleDoubleDownIcon />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="movebottomicon">
|
||||
<AngleDoubleDownIcon />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<slot name="targetcontrolsend"></slot>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,10 @@
|
|||
:aria-label="ariaLabel"
|
||||
:aria-labelledby="ariaLabelledby"
|
||||
>
|
||||
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
|
||||
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
|
||||
<template #icon>
|
||||
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
|
||||
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
|
||||
</template>
|
||||
</SDButton>
|
||||
</slot>
|
||||
<ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1">
|
||||
|
|
|
|||
|
|
@ -15,9 +15,11 @@
|
|||
@keydown="onDropdownKeydown"
|
||||
v-bind="menuButtonProps"
|
||||
>
|
||||
<slot name="menubuttonicon">
|
||||
<component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="menuButtonIcon" />
|
||||
</slot>
|
||||
<template #icon>
|
||||
<slot name="menubuttonicon">
|
||||
<component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="menuButtonIcon" />
|
||||
</slot>
|
||||
</template>
|
||||
</PVSButton>
|
||||
<PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue