AuthFormField does not support "number" as a valid type

[haltuuramees]

Environment

• Operating System: Linux
• Node Version: v20.19.2
• Nuxt Version: 4.1.2
• CLI Version: 3.28.0
• Nitro Version: 2.12.6
• Package Manager: npm@9.2.0
• Builder: -
• User Config: compatibilityDate, devtools, modules, css
• Runtime Modules: @nuxt/ui@4.0.0-alpha.2, nuxt-auth-utils@0.5.25
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.0.0-alpha.x

Version

v4.0.0-alpha.2

Reproduction

Description

As the title says, you can't use "number" as a input type without TypeScript yelling at you.

Additional context

No response

Logs

[Shooteger]

What happens when you type "number as const", instead of only "number" as type?

[HugoRCD]

@haltuuramees I didn't plan to manage the type number when I made the component, but what's the use case of having a type number in an auth form? 🤔

[haltuuramees]

@HugoRCD That's fair. We use Tax Identification Number as part of the authentication.

[haltuuramees]

As a small sidenote, AuthFormProps FormFieldProps(?) seems to be missing the placeholder prop.

Edit: I'm clearly not good at this stuff 😅

[HugoRCD]

I'll take a look at it, thank

[HugoRCD]

@haltuuramees I don't really know about the type number, but I don't think it's so relevant, given that you end up with increment/decrement, which doesn't make sense in your case, for example 🤔 Why not use a text type and add a validation to check that it's just numbers?

[haltuuramees]

@HugoRCD I use css to remove those decorators, but yeah, I was so fixated on the number field, that I didn't even think about using regex. I guess we can close this issue, if there's nothing more to add. Thank you for your time.

EDIT: That is valid tho?

[HugoRCD]

@haltuuramees Why put a placeholder props on the FormField, it's up to the input to manage that 🤔

[haltuuramees]

@HugoRCD What am I missing here?

[HugoRCD]

@haltuuramees Can you send me your code and tell me exactly what you're trying to do?

[haltuuramees]

@HugoRCD

const registrationFields: AuthFormProps["fields"] = [{
  name: "firstName",
  type: "text" as const,
  label: "Eesnimi",
  placeholder: "Sisetage oma eesnimi",
  required: true,
}, {
  name: "lastName",
  type: "text" as const,
  label: "Perekonnanimi",
  placeholder: "Sisetage oma perekonnanimi",
  required: true
}, {
  name: "tin",
  type: "number" as const,
  label: "Isikukood",
  placeholder: "Sisetage oma isikukood",
  required: true
}, {
  name: "email",
  type: "email" as const,
  label: "E-posti aadress",
  placeholder: "Sisetage oma e-posti aadress",
  required: true
}, {
  name: "password",
  label: "Parool",
  type: "password" as const,
  placeholder: "Sisetage oma parool",
  required: true
}]

[HugoRCD]

@HugoRCD

const registrationFields: AuthFormProps["fields"] = [{
name: "firstName",
type: "text" as const,
label: "Eesnimi",
placeholder: "Sisetage oma eesnimi",
required: true,
}, {
name: "lastName",
type: "text" as const,
label: "Perekonnanimi",
placeholder: "Sisetage oma perekonnanimi",
required: true
}, {
name: "tin",
type: "number" as const,
label: "Isikukood",
placeholder: "Sisetage oma isikukood",
required: true
}, {
name: "email",
type: "email" as const,
label: "E-posti aadress",
placeholder: "Sisetage oma e-posti aadress",
required: true
}, {
name: "password",
label: "Parool",
type: "password" as const,
placeholder: "Sisetage oma parool",
required: true
}]

Ok I see the problem now I think we can close that issue then and open another one for that 😁