<script setup>
import { reactiveOmit } from "@vueuse/core";
import { NumberFieldInput } from "reka-ui";
import { NumberField } from "../number-field";
import { cn } from "../../../utils/cn";
const props = defineProps({
  defaultValue: { type: Number, required: false },
  modelValue: { type: [Number, null], required: false },
  min: { type: Number, required: false },
  max: { type: Number, required: false },
  step: { type: Number, required: false },
  stepSnapping: { type: Boolean, required: false },
  focusOnChange: { type: Boolean, required: false },
  formatOptions: { type: null, required: false },
  locale: { type: String, required: false },
  disabled: { type: Boolean, required: false },
  readonly: { type: Boolean, required: false },
  disableWheelChange: { type: Boolean, required: false },
  invertWheelChange: { type: Boolean, required: false },
  id: { type: String, required: false },
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
  name: { type: String, required: false },
  required: { type: Boolean, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
  inputClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
  invalid: { type: Boolean, required: false },
  placeholder: { type: String, required: false }
});
const emits = defineEmits([
  "update:modelValue",
  "blur"
]);
const delegatedProps = reactiveOmit(props, "class", "inputClass", "invalid", "id", "placeholder");
</script>

<template>
  <NumberField
    v-bind="delegatedProps"
    :class="cn('flex-1 contents', props.class)"
    @update:model-value="emits('update:modelValue', $event)"
  >
    <NumberFieldInput
      :id="id"
      :placeholder="placeholder"
      data-slot="input-group-control"
      data-1p-ignore
      :data-value="typeof delegatedProps.modelValue === 'number'"
      :aria-invalid="props.invalid ? 'true' : void 0"
      :class="cn(
  'flex-1 px-2 py-1 text-center rounded-none w-full text-sm text-zinc-700 border-0 bg-transparent shadow-none outline-none peer disabled:cursor-not-allowed disabled:text-zinc-600 disabled:opacity-100',
  props.inputClass
)"
      @blur="emits('blur', $event)"
    />
  </NumberField>
</template>
