Skip to content

Commit

Permalink
fix(VNumberInput): fix inc/dec slots with split control variant (#20072)
Browse files Browse the repository at this point in the history
fixes #20056
  • Loading branch information
SonTT19 authored Jul 2, 2024
1 parent 620a0d9 commit 4ac8aa4
Showing 1 changed file with 73 additions and 81 deletions.
154 changes: 73 additions & 81 deletions packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
return props.hideInput ? 'stacked' : props.controlVariant
})

const incrementIcon = computed(() => controlVariant.value === 'split' ? '$plus' : '$collapse')
const decrementIcon = computed(() => controlVariant.value === 'split' ? '$minus' : '$expand')
const controlNodeSize = computed(() => controlVariant.value === 'split' ? 'default' : 'small')
const controlNodeDefaultHeight = computed(() => controlVariant.value === 'stacked' ? 'auto' : '100%')

const incrementSlotProps = computed(() => ({ click: onClickUp }))

const decrementSlotProps = computed(() => ({ click: onClickDown }))
Expand Down Expand Up @@ -160,77 +165,80 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
useRender(() => {
const { modelValue: _, ...textFieldProps } = VTextField.filterProps(props)

function incrementControlNode () {
return !slots.increment ? (
<VBtn
disabled={ !canIncrease.value }
flat
key="increment-btn"
height={ controlNodeDefaultHeight.value }
name="increment-btn"
icon={ incrementIcon.value }
onClick={ onClickUp }
onMousedown={ onControlMousedown }
size={ controlNodeSize.value }
tabindex="-1"
/>
) : (
<VDefaultsProvider
key="increment-defaults"
defaults={{
VBtn: {
disabled: !canIncrease.value,
flat: true,
height: controlNodeDefaultHeight.value,
size: controlNodeSize.value,
icon: incrementIcon.value,
},
}}
>
{ slots.increment(incrementSlotProps.value) }
</VDefaultsProvider>
)
}

function decrementControlNode () {
return !slots.decrement ? (
<VBtn
disabled={ !canDecrease.value }
flat
key="decrement-btn"
height={ controlNodeDefaultHeight.value }
name="decrement-btn"
icon={ decrementIcon.value }
size={ controlNodeSize.value }
tabindex="-1"
onClick={ onClickDown }
onMousedown={ onControlMousedown }
/>
) : (
<VDefaultsProvider
key="decrement-defaults"
defaults={{
VBtn: {
disabled: !canDecrease.value,
flat: true,
height: controlNodeDefaultHeight.value,
size: controlNodeSize.value,
icon: decrementIcon.value,
},
}}
>
{ slots.decrement(decrementSlotProps.value) }
</VDefaultsProvider>
)
}

function controlNode () {
const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%'
return (
<div class="v-number-input__control">
{
!slots.decrement ? (
<VBtn
disabled={ !canDecrease.value }
flat
key="decrement-btn"
height={ defaultHeight }
name="decrement-btn"
icon="$expand"
size="small"
tabindex="-1"
onClick={ onClickDown }
onMousedown={ onControlMousedown }
/>
) : (
<VDefaultsProvider
key="decrement-defaults"
defaults={{
VBtn: {
disabled: !canDecrease.value,
flat: true,
height: defaultHeight,
size: 'small',
icon: '$expand',
},
}}
>
{ slots.decrement(decrementSlotProps.value) }
</VDefaultsProvider>
)
}
{ decrementControlNode() }

<VDivider
vertical={ controlVariant.value !== 'stacked' }
/>

{
!slots.increment ? (
<VBtn
disabled={ !canIncrease.value }
flat
key="increment-btn"
height={ defaultHeight }
name="increment-btn"
icon="$collapse"
onClick={ onClickUp }
onMousedown={ onControlMousedown }
size="small"
tabindex="-1"
/>
) : (
<VDefaultsProvider
key="increment-defaults"
defaults={{
VBtn: {
disabled: !canIncrease.value,
flat: true,
height: defaultHeight,
size: 'small',
icon: '$collapse',
},
}}
>
{ slots.increment(incrementSlotProps.value) }
</VDefaultsProvider>
)
}
{ incrementControlNode() }
</div>
)
}
Expand All @@ -245,15 +253,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
<div class="v-number-input__control">
<VDivider vertical />

<VBtn
flat
height="100%"
icon="$plus"
tile
tabindex="-1"
onClick={ onClickUp }
onMousedown={ onControlMousedown }
/>
{ incrementControlNode() }
</div>
) : (!props.reverse
? <>{ dividerNode() }{ controlNode() }</>
Expand All @@ -265,15 +265,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
controlVariant.value === 'split'
? (
<div class="v-number-input__control">
<VBtn
flat
height="100%"
icon="$minus"
tile
tabindex="-1"
onClick={ onClickDown }
onMousedown={ onControlMousedown }
/>
{ decrementControlNode() }

<VDivider vertical />
</div>
Expand Down

0 comments on commit 4ac8aa4

Please sign in to comment.