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> </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')" @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"> <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')" @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"> <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']" />

View File

@ -13,14 +13,14 @@
</template> </template>
<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')" :unstyled="unstyled" :pt="ptm('rejectButton')">
<template v-if="rejectIcon || $slots.rejecticon" #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')" :unstyled="unstyled" :pt="ptm('acceptButton')">
<template v-if="acceptIcon || $slots.accepticon" #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']" />

View File

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

View File

@ -2,7 +2,7 @@
<div :class="cx('root')" v-bind="ptm('root')"> <div :class="cx('root')" v-bind="ptm('root')">
<div :class="cx('controls')" v-bind="ptm('controls')"> <div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot> <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> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" /> <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" />

View File

@ -20,6 +20,7 @@
@keyup="onKeyUp" @keyup="onKeyUp"
@invalid="onInvalid" @invalid="onInvalid"
v-bind="{ ...inputProps, ...ptm('input') }" v-bind="{ ...inputProps, ...ptm('input') }"
:unstyled="unstyled"
/> />
<slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle"> <slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle">
<component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" v-bind="ptm('hideIcon')" /> <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 :class="cx('root')" v-bind="ptm('root')">
<div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')"> <div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')">
<slot name="sourcecontrolsstart"></slot> <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> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" /> <AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </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> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" /> <AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </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> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" /> <AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </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> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" /> <AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" />
@ -74,28 +74,28 @@
</div> </div>
<div :class="cx('buttons')" v-bind="ptm('buttons')"> <div :class="cx('buttons')" v-bind="ptm('buttons')">
<slot name="movecontrolsstart"></slot> <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> <template #icon>
<slot name="movetotargeticon" :viewChanged="viewChanged"> <slot name="movetotargeticon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" /> <component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </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> <template #icon>
<slot name="movealltotargeticon" :viewChanged="viewChanged"> <slot name="movealltotargeticon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" /> <component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </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> <template #icon>
<slot name="movetosourceicon" :viewChanged="viewChanged"> <slot name="movetosourceicon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" /> <component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </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> <template #icon>
<slot name="movealltosourceicon" :viewChanged="viewChanged"> <slot name="movealltosourceicon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" /> <component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" />
@ -147,28 +147,28 @@
</div> </div>
<div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')"> <div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')">
<slot name="targetcontrolsstart"></slot> <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> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" /> <AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </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> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" /> <AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </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> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" /> <AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </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> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" /> <AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" />

View File

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

View File

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