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

* feat(ui): Improve QInput.nativeEl types
Also exposing QInputNativeElement type with generics for more flexibility

* feat(ui): Improve QFile.nativeEl types
Also exposing QFileNativeElement type

* feat(ui): Improve QInputNativeElement with file type handling

ui/src/components/file/QFile.json

@@ -168,6 +168,7 @@
       "desc": "DEPRECATED; Access 'nativeEl' directly; Gets the native input DOM Element",
       "returns": {
         "type": "Element",
+        "tsType": "QFileNativeElement",
         "desc": "The underlying native input DOM Element"
       }
     }
@@ -176,6 +177,7 @@
   "computedProps": {
     "nativeEl": {
       "type": "Element",
+      "tsType": "QFileNativeElement",
       "desc": "The native input DOM Element",
       "addedIn": "v2.10.1"
     }

ui/src/components/input/QInput.json

@@ -118,6 +118,7 @@
       "desc": "DEPRECATED; Access 'nativeEl' directly instead; Get the native input/textarea DOM Element",
       "returns": {
         "type": "Element",
+        "tsType": "QInputNativeElement",
         "desc": "The underlying native input/textarea DOM Element"
       }
     }
@@ -126,6 +127,7 @@
   "computedProps": {
     "nativeEl": {
       "type": "Element",
+      "tsType": "QInputNativeElement",
       "desc": "The native input/textarea DOM Element",
       "addedIn": "v2.10.1"
     }

ui/types/api.d.ts

@@ -2,6 +2,7 @@ export * from "./api/vue-prop-types";
 export * from "./api/cookies";
 export * from "./api/dialog";
 export * from "./api/qfile";
+export * from "./api/qinput";
 export * from "./api/qselect";
 export * from "./api/qtable";
 export * from "./api/qtree";

ui/types/api/qfile.d.ts

@@ -6,3 +6,8 @@ export interface QRejectedEntry {
     | "filter";
   file: File;
 }
+
+export type QFileNativeElement = Omit<
+  Omit<HTMLInputElement, "files"> & { files: FileList },
+  "type"
+> & { type: "file" };

ui/types/api/qinput.d.ts

@@ -0,0 +1,27 @@
+// Error on "quasar" import shown in IDE is normal, as we only have Components/Directives/Plugins types after the build step
+// The import will work correctly at runtime
+import { QInputProps } from "quasar";
+
+type QInputType = NonNullable<QInputProps["type"]>;
+
+type WithKnownType<
+  TElement extends HTMLInputElement | HTMLTextAreaElement,
+  TType extends QInputType
+> = Omit<TElement, "type"> & { type: TType };
+
+/**
+ * @example
+ * ```ts
+ * 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
+ * ```
+ */
+export type QInputNativeElement<T extends QInputType = QInputType> =
+  T extends "textarea"
+    ? WithKnownType<HTMLTextAreaElement, "textarea">
+    : Omit<WithKnownType<HTMLInputElement, T>, "files"> & {
+        files: T extends "file" ? FileList : null;
+      };