Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): Improve QInput and QFile nativeEl types (fix #15128) #15129

Conversation

yusufkandemir
Copy link
Member

What kind of change does this PR introduce?

  • Feature

Does this PR introduce a breaking change?

  • No

The PR fulfills these requirements:

  • It's submitted to the dev branch (or v[X] branch)

Other information:
Resolves #15128

Ships two new types: QFileNativeElement and QInputNativeElement

QInputNativeElement accepts a generic parameter:

QInputNativeElement                      // HTMLInputElement | HTMLTextAreaElement
QInputNativeElement<"textarea">          // HTMLTextAreaElement
QInputNativeElement<"text">              // Omit<HTMLInputElement, "type"> & { type: "text" }
QInputNativeElement<"text" | "number">   // Omit<HTMLInputElement, "type"> & { type: "text" | "number" }
QInputNativeElement<"text" | "textarea"> // (Omit<HTMLInputElement, "type"> & { type: "text" }) | HTMLTextAreaElement

We can't make use of the generic param for QInput.nativeEl because we don't have generic component types yet(not fully complete in Vue in a straightforward either). But, users can use this type for advanced/flexible use cases by casting their types, typing their helper functions parameters, etc. Also, further narrowing is possible by checking against the type prop:

const inputRef = ref() as Ref<QInput>;
// ...
const { nativeEl } = inputRef.value
if (nativeEl.type === 'textarea') {
  nativeEl // HTMLTextAreaElement
} else if (nativeEl.type === 'files') {
  nativeEl.files // FileList
} else {
  nativeEl.files // null
}

Also exposing QInputNativeElement type with generics for more flexibility
Also exposing QFileNativeElement type
@rstoenescu rstoenescu merged commit ee25829 into quasarframework:dev Dec 17, 2022
@rstoenescu
Copy link
Member

Nice!

@yusufkandemir yusufkandemir deleted the feat-ui-improve-qinput-and-qfile-native-el-types branch December 17, 2022 15:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve QInput.nativeEl and QFile.nativeEl types by narrowing
2 participants