fix(VNumberInput): fix inc/dec slots with split control variant (#20072)

fixes #20056
vuetifyjs · Jul 2, 2024 · 4ac8aa4 · 4ac8aa4
1 parent 620a0d9
commit 4ac8aa4
Showing 1 changed file with 73 additions and 81 deletions.
diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -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 }))
@@ -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>
         )
       }
@@ -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() }</>
@@ -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>