feat(InputNumber): add increment-disabled / decrement-disabled props (#4141)

This commit is contained in:
Hugo Richard
2025-05-14 17:41:34 +02:00
committed by GitHub
parent 4167f04205
commit c7fba2e0eb

View File

@@ -36,6 +36,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
* @IconifyIcon * @IconifyIcon
*/ */
incrementIcon?: string incrementIcon?: string
/** Disable the increment button. */
incrementDisabled?: boolean
/** /**
* Configure the decrement button. The `color` and `size` are inherited. * Configure the decrement button. The `color` and `size` are inherited.
* @defaultValue { variant: 'link' } * @defaultValue { variant: 'link' }
@@ -47,6 +49,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
* @IconifyIcon * @IconifyIcon
*/ */
decrementIcon?: string decrementIcon?: string
/** Disable the decrement button. */
decrementDisabled?: boolean
autofocus?: boolean autofocus?: boolean
autofocusDelay?: number autofocusDelay?: number
/** /**
@@ -83,7 +87,9 @@ import UButton from './Button.vue'
defineOptions({ inheritAttrs: false }) defineOptions({ inheritAttrs: false })
const props = withDefaults(defineProps<InputNumberProps>(), { const props = withDefaults(defineProps<InputNumberProps>(), {
orientation: 'horizontal' orientation: 'horizontal',
disabledIncrement: false,
disabledDecrement: false
}) })
const emits = defineEmits<InputNumberEmits>() const emits = defineEmits<InputNumberEmits>()
defineSlots<InputNumberSlots>() defineSlots<InputNumberSlots>()
@@ -162,7 +168,7 @@ defineExpose({
/> />
<div :class="ui.increment({ class: props.ui?.increment })"> <div :class="ui.increment({ class: props.ui?.increment })">
<NumberFieldIncrement as-child :disabled="disabled"> <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
<slot name="increment"> <slot name="increment">
<UButton <UButton
:icon="incrementIcon" :icon="incrementIcon"
@@ -177,7 +183,7 @@ defineExpose({
</div> </div>
<div :class="ui.decrement({ class: props.ui?.decrement })"> <div :class="ui.decrement({ class: props.ui?.decrement })">
<NumberFieldDecrement as-child :disabled="disabled"> <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
<slot name="decrement"> <slot name="decrement">
<UButton <UButton
:icon="decrementIcon" :icon="decrementIcon"