Refactor #3965 - Update for unstyled prop

pull/4048/head
Tuğçe Küçükoğlu 2023-06-12 10:11:42 +03:00
parent 350d5c21a7
commit 10f83fbe88
8 changed files with 26 additions and 19 deletions

View File

@ -23,14 +23,14 @@
</template>
<component v-else :is="$slots.message" :message="confirmation"></component>
<template #footer>
<CDButton :label="rejectLabel" :class="cx('rejectButton')" @click="reject()" :autofocus="autoFocusReject" :pt="ptm('rejectButton')">
<CDButton :label="rejectLabel" :class="cx('rejectButton')" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')">
<template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
</slot>
</template>
</CDButton>
<CDButton :label="acceptLabel" :class="cx('acceptButton')" @click="accept()" :autofocus="autoFocusAccept" :pt="ptm('acceptButton')">
<CDButton :label="acceptLabel" :class="cx('acceptButton')" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" :pt="ptm('acceptButton')">
<template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />

View File

@ -13,14 +13,14 @@
</template>
<component v-else :is="$slots.message" :message="confirmation"></component>
<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')" :unstyled="unstyled" :pt="ptm('rejectButton')">
<template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
</slot>
</template>
</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')" :unstyled="unstyled" :pt="ptm('acceptButton')">
<template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />

View File

@ -23,6 +23,7 @@
@focus="onInputFocus"
@blur="onInputBlur"
v-bind="{ ...inputProps, ...ptm('input') }"
:unstyled="unstyled"
data-pc-section="input"
/>
<span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
@ -33,6 +34,7 @@
:tabindex="-1"
aria-hidden="true"
v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }"
:unstyled="unstyled"
data-pc-section="incrementbutton"
>
<template #icon>
@ -48,6 +50,7 @@
:tabindex="-1"
aria-hidden="true"
v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }"
:unstyled="unstyled"
data-pc-section="decrementbutton"
>
<template #icon>
@ -65,6 +68,7 @@
:tabindex="-1"
aria-hidden="true"
v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }"
:unstyled="unstyled"
data-pc-section="incrementbutton"
>
<template #icon>
@ -81,6 +85,7 @@
:tabindex="-1"
aria-hidden="true"
v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }"
:unstyled="unstyled"
data-pc-section="decrementbutton"
>
<template #icon>

View File

@ -2,7 +2,7 @@
<div :class="cx('root')" v-bind="ptm('root')">
<div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot>
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :unstyled="unstyled" v-bind="{ ...moveUpButtonProps, ...ptm('moveUpButton') }">
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="{ ...moveUpButtonProps, ...ptm('moveUpButton') }" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" />

View File

@ -20,6 +20,7 @@
@keyup="onKeyUp"
@invalid="onInvalid"
v-bind="{ ...inputProps, ...ptm('input') }"
:unstyled="unstyled"
/>
<slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle">
<component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" v-bind="ptm('hideIcon')" />

View File

@ -2,28 +2,28 @@
<div :class="cx('root')" v-bind="ptm('root')">
<div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')">
<slot name="sourcecontrolsstart"></slot>
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="{ ...moveUpButtonProps, ...ptm('sourceMoveUpButton') }">
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="{ ...moveUpButtonProps, ...ptm('sourceMoveUpButton') }" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="{ ...moveTopButtonProps, ...ptm('sourceMoveTopButton') }">
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="{ ...moveTopButtonProps, ...ptm('sourceMoveTopButton') }" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="{ ...moveDownButtonProps, ...ptm('sourceMoveDownButton') }">
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="{ ...moveDownButtonProps, ...ptm('sourceMoveDownButton') }" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="{ ...moveBottomButtonProps, ...ptm('sourceMoveBottomButton') }">
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="{ ...moveBottomButtonProps, ...ptm('sourceMoveBottomButton') }" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" />
@ -74,28 +74,28 @@
</div>
<div :class="cx('buttons')" v-bind="ptm('buttons')">
<slot name="movecontrolsstart"></slot>
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="{ ...moveToTargetProps, ...ptm('moveToTargetButton') }">
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="{ ...moveToTargetProps, ...ptm('moveToTargetButton') }" :unstyled="unstyled">
<template #icon>
<slot name="movetotargeticon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="{ ...moveAllToTargetProps, ...ptm('moveAllToTargetButton') }">
<PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="{ ...moveAllToTargetProps, ...ptm('moveAllToTargetButton') }" :unstyled="unstyled">
<template #icon>
<slot name="movealltotargeticon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="{ ...moveToSourceProps, ...ptm('moveToSourceButton') }">
<PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="{ ...moveToSourceProps, ...ptm('moveToSourceButton') }" :unstyled="unstyled">
<template #icon>
<slot name="movetosourceicon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="{ ...moveAllToSourceProps, ...ptm('moveAllToSourceButton') }">
<PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="{ ...moveAllToSourceProps, ...ptm('moveAllToSourceButton') }" :unstyled="unstyled">
<template #icon>
<slot name="movealltosourceicon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" />
@ -147,28 +147,28 @@
</div>
<div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')">
<slot name="targetcontrolsstart"></slot>
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="{ ...moveUpButtonProps, ...ptm('targetMoveUpButton') }">
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="{ ...moveUpButtonProps, ...ptm('targetMoveUpButton') }" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="{ ...moveTopButtonProps, ...ptm('targetMoveTopButton') }">
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="{ ...moveTopButtonProps, ...ptm('targetMoveTopButton') }" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="{ ...moveDownButtonProps, ...ptm('targetMoveDownButton') }">
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="{ ...moveDownButtonProps, ...ptm('targetMoveDownButton') }" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="{ ...moveBottomButtonProps, ...ptm('targetMoveBottomButton') }">
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="{ ...moveBottomButtonProps, ...ptm('targetMoveBottomButton') }" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" />

View File

@ -13,6 +13,7 @@
:aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby"
:pt="ptm('button')"
:unstyled="unstyled"
>
<template #icon>
<slot name="icon" :visible="d_visible">

View File

@ -1,7 +1,7 @@
<template>
<div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="splitbutton" :data-pc-severity="severity">
<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" :pt="ptm('button')" v-bind="buttonProps" :unstyled="unstyled">
<template v-if="icon" #icon="slotProps">
<slot name="icon" :class="slotProps.class">
<span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" />
@ -19,9 +19,9 @@
:aria-controls="ariaId + '_overlay'"
@click="onDropdownButtonClick"
@keydown="onDropdownKeydown"
:unstyled="unstyled"
:pt="ptm('menuButton')"
v-bind="menuButtonProps"
:unstyled="unstyled"
>
<template #icon="slotProps">
<slot name="menubuttonicon" :class="slotProps.class">