type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>

export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {

type InputNumberValue = number | null

export interface InputNumberProps<T extends InputNumberValue = InputNumberValue> extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {

/**

* The element or component this component should render as.

* @defaultValue 'div'

decrementDisabled?: boolean

autofocus?: boolean

autofocusDelay?: number

modelModifiers?: Pick<ModelModifiers, 'optional'>

modelModifiers?: Pick<ModelModifiers<T>, 'optional'>

/**

* The locale to use for formatting and parsing numbers.

* @defaultValue UApp.locale.code

ui?: InputNumber['slots']

}

export interface InputNumberEmits {

'update:modelValue': [value: number]

export interface InputNumberEmits<T extends InputNumberValue = InputNumberValue> {

'update:modelValue': [value: T]

'blur': [event: FocusEvent]

'change': [event: Event]

}

}

</script>

<script setup lang="ts">

<script setup lang="ts" generic="T extends InputNumberValue = InputNumberValue">

import { onMounted, ref, computed } from 'vue'

import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'reka-ui'

import { reactivePick, useVModel } from '@vueuse/core'

defineOptions({ inheritAttrs: false })

const props = withDefaults(defineProps<InputNumberProps>(), {

const props = withDefaults(defineProps<InputNumberProps<T>>(), {

orientation: 'horizontal',

increment: true,

decrement: true

})

const emits = defineEmits<InputNumberEmits>()

const emits = defineEmits<InputNumberEmits<T>>()

defineSlots<InputNumberSlots>()

const modelValue = useVModel<InputNumberProps, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })

const modelValue = useVModel<InputNumberProps<T>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })

const { t, code: codeLocale } = useLocale()

const appConfig = useAppConfig() as InputNumber['AppConfig']

const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange', 'invertWheelChange', 'readonly'), emits)

const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)

const { orientation, size: fieldGroupSize } = useFieldGroup<InputNumberProps>(props)

const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps<T>>(props)

const { orientation, size: fieldGroupSize } = useFieldGroup<InputNumberProps<T>>(props)

const locale = computed(() => props.locale || codeLocale.value)

const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value)