fix/feat(ui): Fix and improve Dialog plugin types (fix: #14766) (#14781)

ui/.eslintignore

@@ -0,0 +1,2 @@
+# We don't have TS-related plugins&rules, so disable to avoid annoyance
+types/

ui/src/plugins/Dialog.json

@@ -42,6 +42,7 @@
 
             "prompt": {
               "type": "Object",
+              "tsType": "QDialogInputPrompt",
               "desc": "An object definition of the input field for the prompting question.",
               "examples": [ "prompt: { model: this.promptVal, type: 'number' }" ],
               "definition": {
@@ -95,6 +96,7 @@
 
             "options": {
               "type": "Object",
+              "tsType": "QDialogSelectionPrompt",
               "desc": "An object definition for creating the selection form content",
               "examples": [ "{ model: this.dialogSelection, type: 'radio', items: [...listOfItems] }" ],
               "definition": {
@@ -114,7 +116,7 @@
 
                 "items": {
                   "type": "Array",
-                  "desc": "The list of options to interact with; Equivalent to options prop of the QOptionsGroup component",
+                  "desc": "The list of options to interact with; Equivalent to options prop of the QOptionGroup component",
                   "examples": [
                     "[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3' } ]"
                   ]

ui/types/api.d.ts

@@ -1,5 +1,6 @@
 export * from "./api/vue-prop-types";
 export * from "./api/cookies";
+export * from "./api/dialog";
 export * from "./api/qfile";
 export * from "./api/qselect";
 export * from "./api/qtable";

ui/types/api/dialog.d.ts

@@ -0,0 +1,101 @@
+// 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, QOptionGroupProps } from "quasar";
+
+// Taken from https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#distributive-conditional-types
+type NonFunctionPropertyNames<T> = {
+  [K in keyof T]: T[K] extends Function ? never : K;
+}[keyof T];
+type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;
+
+// https://html.spec.whatwg.org/multipage/input.html#attr-input-type
+type InputType =
+  | "button"
+  | "checkbox"
+  | "color"
+  | "date"
+  | "datetime-local"
+  | "email"
+  | "file"
+  | "hidden"
+  | "image"
+  | "month"
+  | "number"
+  | "password"
+  | "radio"
+  | "range"
+  | "reset"
+  | "search"
+  | "submit"
+  | "tel"
+  | "text"
+  | "time"
+  | "url"
+  | "week";
+type DatalessInputType = Extract<InputType, "submit" | "reset">;
+
+type PromptInputType = "textarea" | Exclude<InputType, DatalessInputType>;
+
+export type QDialogInputPrompt<T = string> = {
+  /**
+   * The initial value of the input
+   */
+  model: T;
+  /**
+   * Optional property to determine the input field type
+   *
+   * @defaultValue "text"
+   */
+  type?: PromptInputType;
+
+  /**
+   * Is typed content valid?
+   *
+   * @param val The value of the input
+   * @returns The text passed validation or not
+   */
+  isValid?: (value: T) => boolean;
+} & Partial<Omit<QInputProps, "modelValue" | "onUpdate:modelValue" | "type">> &
+  Partial<NonFunctionProperties<HTMLInputElement>>;
+
+type SelectionPromptType = NonNullable<QOptionGroupProps["type"]>
+export type QDialogSelectionPrompt<
+  // As this gets used as is in generated types, we must define default values for generic params.
+  // Example: `options?: QDialogSelectionPrompt;` <- notice the missing type params.
+  // We can't use "radio" as the default either, because that would make it the only value.
+  TType extends SelectionPromptType = SelectionPromptType,
+  TModel = TType extends "radio" ? string : readonly any[]
+> = {
+  /**
+   * The value of the selection
+   * If the `type` is "radio"(default), the value is a string, otherwise it's an array
+   */
+  model: TModel;
+
+  /**
+   * The type of the selection
+   *
+   * @defaultValue "radio"
+   */
+  type?: TType;
+
+  /**
+   * The list of options to interact with
+   * Equivalent to `options` prop of the `QOptionGroup` component
+   */
+  items?: QOptionGroupProps["options"];
+
+  /**
+   * Is the model valid?
+   *
+   * @param model The current model (If the `type` is "radio"(default), the value is a string, otherwise it's an array)
+   * @returns The selection passed validation or not
+   */
+  isValid?: (value: TModel) => boolean;
+} & Partial<
+  Omit<
+    QOptionGroupProps,
+    "modelValue" | "onUpdate:modelValue" | "type" | "options"
+  >
+> &
+  Partial<NonFunctionProperties<HTMLElement>>;