quasar 2.3.3 → 2.4.2

package/dist/types/index.d.ts

@@ -254,7 +254,6 @@ export interface Loading {
     message?: string;
     /**
      * Render the message as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
-     * Default value: false
      */
     html?: boolean;
     /**
@@ -1383,25 +1382,33 @@ export interface QBreadcrumbs
 
 export interface QBreadcrumbsElProps {
   /**
-   * Equivalent to Vue Router <router-link> 'to' property
+   * Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used
    */
   to?: string | LooseDictionary | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'exact' property
+   * Equivalent to Vue Router <router-link> 'exact' property; Superseeded by 'href' prop if used
    */
   exact?: boolean | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'replace' property
+   * Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used
    */
   replace?: boolean | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'active-class' property
+   * Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used
    */
   activeClass?: string | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'active-class' property
+   * Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used
    */
   exactActiveClass?: string | undefined;
+  /**
+   * Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
+   */
+  href?: string | undefined;
+  /**
+   * Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
+   */
+  target?: string | undefined;
   /**
    * Put component in disabled mode
    */
@@ -1440,28 +1447,32 @@ export interface QBtnDropdownProps {
   /**
    * Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
    */
-  modelValue: boolean;
+  modelValue?: boolean;
   /**
    * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
    */
   size?: string | undefined;
   /**
-   * Define the button HTML DOM type
+   * 1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag
    * Default value: button
    */
-  type?: "a" | "submit" | "button" | "reset" | undefined;
+  type?: string | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'to' property
+   * Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used
    */
   to?: string | LooseDictionary | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'replace' property
+   * Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used
    */
   replace?: boolean | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'append' property
+   * Native <a> link href attribute; Has priority over the 'to' and 'replace' props
    */
-  append?: boolean | undefined;
+  href?: string | undefined;
+  /**
+   * Native <a> link target attribute; Use it only with 'to' or 'href' props
+   */
+  target?: string | undefined;
   /**
    * The text that will be shown on the button
    */
@@ -1796,7 +1807,10 @@ export interface QBtnToggleProps {
      * Slot name to use for this button content; Useful for customizing content or even add tooltips
      */
     slot?: string;
-    [index: string]: any;
+    /**
+     * Any other QBtn props (including class and style)
+     */
+    [props: string]: any;
   }[];
   /**
    * Color name for component from the Quasar Color Palette
@@ -1904,6 +1918,10 @@ export interface QBtnToggleSlots {
    * Suggestions: QTooltip, QBadge
    */
   default: () => VNode[];
+  /**
+   * Any other dynamic slots to be used with 'slot' property of the 'options' prop
+   */
+  [key: string]: () => VNode[];
 }
 
 export interface QBtnToggle extends ComponentPublicInstance<QBtnToggleProps> {}
@@ -1914,22 +1932,26 @@ export interface QBtnProps {
    */
   size?: string | undefined;
   /**
-   * Define the button HTML DOM type
+   * 1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag
    * Default value: button
    */
-  type?: "a" | "submit" | "button" | "reset" | undefined;
+  type?: string | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'to' property
+   * Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used
    */
   to?: string | LooseDictionary | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'replace' property
+   * Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used
    */
   replace?: boolean | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'append' property
+   * Native <a> link href attribute; Has priority over the 'to' and 'replace' props
    */
-  append?: boolean | undefined;
+  href?: string | undefined;
+  /**
+   * Native <a> link target attribute; Use it only with 'to' or 'href' props
+   */
+  target?: string | undefined;
   /**
    * The text that will be shown on the button
    */
@@ -2474,22 +2496,18 @@ export interface QChatMessageProps {
   size?: string | undefined;
   /**
    * Render the label as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
-   * Default value: false
    */
   labelHtml?: boolean | undefined;
   /**
    * Render the name as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
-   * Default value: false
    */
   nameHtml?: boolean | undefined;
   /**
    * Render the text as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
-   * Default value: false
    */
   textHtml?: boolean | undefined;
   /**
    * Render the stamp as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
-   * Default value: false
    */
   stampHtml?: boolean | undefined;
 }
@@ -3746,25 +3764,33 @@ export interface QEditor extends ComponentPublicInstance<QEditorProps> {
 
 export interface QExpansionItemProps {
   /**
-   * Equivalent to Vue Router <router-link> 'to' property
+   * Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used
    */
   to?: string | LooseDictionary | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'exact' property
+   * Equivalent to Vue Router <router-link> 'exact' property; Superseeded by 'href' prop if used
    */
   exact?: boolean | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'replace' property
+   * Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used
    */
   replace?: boolean | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'active-class' property
+   * Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used
    */
   activeClass?: string | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'active-class' property
+   * Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used
    */
   exactActiveClass?: string | undefined;
+  /**
+   * Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
+   */
+  href?: string | undefined;
+  /**
+   * Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
+   */
+  target?: string | undefined;
   /**
    * Put component in disabled mode
    */
@@ -4067,6 +4093,36 @@ export interface QFabSlots {
    * Slot specifically designed for a QTooltip
    */
   tooltip: () => VNode[];
+  /**
+   * Slot for icon shown when FAB is closed; Suggestion: QIcon
+   * @param scope
+   */
+  icon: (scope: {
+    /**
+     * FAB is opened
+     */
+    opened: boolean;
+  }) => VNode[];
+  /**
+   * Slot for icon shown when FAB is opened; Suggestion: QIcon
+   * @param scope
+   */
+  "active-icon": (scope: {
+    /**
+     * FAB is opened
+     */
+    opened: boolean;
+  }) => VNode[];
+  /**
+   * Slot for label
+   * @param scope
+   */
+  label: (scope: {
+    /**
+     * FAB is opened
+     */
+    opened: boolean;
+  }) => VNode[];
 }
 
 export interface QFab extends ComponentPublicInstance<QFabProps> {
@@ -4189,6 +4245,14 @@ export interface QFabActionSlots {
    * Suggestion for this slot: QTooltip
    */
   default: () => VNode[];
+  /**
+   * Slot for icon; Suggestion: QIcon
+   */
+  icon: () => VNode[];
+  /**
+   * Slot for label
+   */
+  label: () => VNode[];
 }
 
 export interface QFabAction extends ComponentPublicInstance<QFabActionProps> {
@@ -4219,7 +4283,7 @@ export interface QFieldProps {
   /**
    * Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
    */
-  rules?: any[] | undefined;
+  rules?: ValidationRule[] | undefined;
   /**
    * By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
    */
@@ -4531,7 +4595,7 @@ export interface QFileProps {
   /**
    * Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
    */
-  rules?: any[] | undefined;
+  rules?: ValidationRule[] | undefined;
   /**
    * By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
    */
@@ -4775,7 +4839,7 @@ export interface QFileSlots {
     /**
      * Reference to the QFile component
      */
-    ref: LooseDictionary;
+    ref: QFile;
   }) => VNode[];
   /**
    * Override default selection slot; Suggestion: QChip
@@ -4789,7 +4853,7 @@ export interface QFileSlots {
     /**
      * Reference to the QFile component
      */
-    ref: LooseDictionary;
+    ref: QFile;
   }) => VNode[];
 }
 
@@ -4911,7 +4975,7 @@ export interface QFormProps {
    * Emitted after a validation was triggered and at least one of the inner Quasar components models are NOT valid
    * @param ref Vue reference to the first component that triggered the validation error
    */
-  onValidationError?: (ref: LooseDictionary) => void;
+  onValidationError?: (ref: Component) => void;
 }
 
 export interface QFormSlots {
@@ -5352,7 +5416,7 @@ export interface QInputProps {
   /**
    * Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
    */
-  rules?: any[] | undefined;
+  rules?: ValidationRule[] | undefined;
   /**
    * By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
    */
@@ -5671,25 +5735,33 @@ export interface QIntersection
 
 export interface QItemProps {
   /**
-   * Equivalent to Vue Router <router-link> 'to' property
+   * Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used
    */
   to?: string | LooseDictionary | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'exact' property
+   * Equivalent to Vue Router <router-link> 'exact' property; Superseeded by 'href' prop if used
    */
   exact?: boolean | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'replace' property
+   * Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used
    */
   replace?: boolean | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'active-class' property
+   * Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used
    */
   activeClass?: string | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'active-class' property
+   * Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used
    */
   exactActiveClass?: string | undefined;
+  /**
+   * Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
+   */
+  href?: string | undefined;
+  /**
+   * Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
+   */
+  target?: string | undefined;
   /**
    * Put component in disabled mode
    */
@@ -6355,7 +6427,10 @@ export interface QOptionGroupProps {
          * If true, the option will be disabled
          */
         disable?: boolean;
-        [index: string]: any;
+        /**
+         * Any other props from QToggle, QCheckbox, or QRadio
+         */
+        [props: string]: any;
       }[]
     | undefined;
   /**
@@ -6405,19 +6480,48 @@ export interface QOptionGroupProps {
 export interface QOptionGroupSlots {
   /**
    * Generic slot for all labels
-   * @param scope
+   * @param scope The corresponding option entry from the 'options' prop
    */
   label: (scope: {
     /**
-     * The corresponding option entry from the 'options' prop
+     * Label to display along the component
+     */
+    label: string;
+    /**
+     * Value of the option that will be used by the component model
+     */
+    value: any;
+    /**
+     * If true, the option will be disabled
+     */
+    disable?: boolean;
+    /**
+     * Any other props from QToggle, QCheckbox, or QRadio
      */
-    opt: LooseDictionary;
+    [props: string]: any;
   }) => VNode[];
   /**
    * Slot to define the specific label for the option at '[name]' where name is a 0-based index; Overrides the generic 'label' slot if used
-   * @param scope
+   * @param scope The corresponding option entry from the 'options' prop
    */
-  [key: `label-${string}`]: (scope: { [index: string]: any }) => VNode[];
+  [key: `label-${string}`]: (scope: {
+    /**
+     * Label to display along the component
+     */
+    label: string;
+    /**
+     * Value of the option that will be used by the component model
+     */
+    value: any;
+    /**
+     * If true, the option will be disabled
+     */
+    disable?: boolean;
+    /**
+     * Any other props from QToggle, QCheckbox, or QRadio
+     */
+    [props: string]: any;
+  }) => VNode[];
 }
 
 export interface QOptionGroup
@@ -7168,35 +7272,31 @@ export interface QRangeProps {
    */
   name?: string | undefined;
   /**
-   * Model of the component of type { min, max } (both values must be between global min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
-   */
-  modelValue:
-    | {
-        /**
-         * Model value for left thumb
-         */
-        min?: number | null;
-        /**
-         * Model value for right thumb
-         */
-        max?: number | null;
-      }
-    | null
-    | undefined;
-  /**
-   * Minimum value of the model
+   * Minimum value of the model; Set track's minimum value
    */
   min?: number | undefined;
   /**
-   * Maximum value of the model
+   * Maximum value of the model; Set track's maximum value
    * Default value: 100
    */
   max?: number | undefined;
+  /**
+   * Inner minimum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be higher or equal to 'min' prop; Defaults to 'min' prop
+   */
+  innerMin?: number | undefined;
+  /**
+   * Inner maximum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be lower or equal to 'max' prop; Defaults to 'max' prop
+   */
+  innerMax?: number | undefined;
   /**
    * Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity
    * Default value: 1
    */
   step?: number | undefined;
+  /**
+   * Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop
+   */
+  snap?: boolean | undefined;
   /**
    * Work in reverse (changes direction)
    */
@@ -7206,67 +7306,92 @@ export interface QRangeProps {
    */
   vertical?: boolean | undefined;
   /**
-   * User can drag range instead of just the two thumbs
+   * Color name for component from the Quasar Color Palette
    */
-  dragRange?: boolean | undefined;
+  color?: string | undefined;
   /**
-   * User can drag only the range instead and NOT the two thumbs
+   * Color name for the track (can be 'transparent' too) from the Quasar Color Palette
    */
-  dragOnlyRange?: boolean | undefined;
+  trackColor?: string | undefined;
   /**
-   * Color name for component from the Quasar Color Palette
+   * Apply a pattern image on the track
    */
-  color?: string | undefined;
+  trackImg?: string | undefined;
+  /**
+   * Color name for the inner track (can be 'transparent' too) from the Quasar Color Palette
+   */
+  innerTrackColor?: string | undefined;
   /**
-   * Popup labels (for left and right thumbs) when user clicks/taps on the slider thumb and moves it
+   * Apply a pattern image on the inner track
+   */
+  innerTrackImg?: string | undefined;
+  /**
+   * Color name for the selection bar (can be 'transparent' too) from the Quasar Color Palette
+   */
+  selectionColor?: string | undefined;
+  /**
+   * Apply a pattern image on the selection bar
+   */
+  selectionImg?: string | undefined;
+  /**
+   * Popup a label when user clicks/taps on the slider thumb and moves it
    */
   label?: boolean | undefined;
   /**
-   * Color name for labels background from the Quasar Color Palette; Applies to both labels, unless specific label color props are used
+   * Color name for component from the Quasar Color Palette
    */
   labelColor?: string | undefined;
   /**
-   * Color name for labels text from the Quasar Color Palette; Applies to both labels, unless specific label text color props are used
+   * Color name for component from the Quasar Color Palette
    */
   labelTextColor?: string | undefined;
   /**
-   * Color name for left label background from the Quasar Color Palette
+   * Switch the position of the label (top <-> bottom or left <-> right)
    */
-  leftLabelColor?: string | undefined;
+  switchLabelSide?: boolean | undefined;
   /**
-   * Color name for left label text from the Quasar Color Palette
+   * Always display the label
    */
-  leftLabelTextColor?: string | undefined;
+  labelAlways?: boolean | undefined;
   /**
-   * Color name for right label background from the Quasar Color Palette
+   * Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
    */
-  rightLabelColor?: string | undefined;
+  markers?: boolean | number | undefined;
   /**
-   * Color name for right label text from the Quasar Color Palette
+   * Configure the marker labels (or show the default ones if 'true'); Array of definition Objects or Object with key-value where key is the model and the value is the marker label definition
+   * @param value The marker value to transform
+   * @returns Marker definition Object or directly a String for the label of the marker
    */
-  rightLabelTextColor?: string | undefined;
+  markerLabels?:
+    | SliderMarkerLabels
+    | SliderMarkerLabels
+    | SliderMarkerLabels
+    | SliderMarkerLabels
+    | undefined;
   /**
-   * Override default label for min value
+   * CSS class(es) to apply to the marker labels container
    */
-  leftLabelValue?: string | number | undefined;
+  markerLabelsClass?: string | undefined;
   /**
-   * Override default label for max value
+   * Switch the position of the marker labels (top <-> bottom or left <-> right)
    */
-  rightLabelValue?: string | number | undefined;
+  switchMarkerLabelsSide?: boolean | undefined;
   /**
-   * Always display the labels
+   * Track size (including CSS unit)
+   * Default value: 4px
    */
-  labelAlways?: boolean | undefined;
+  trackSize?: string | undefined;
   /**
-   * Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
+   * Thumb size (including CSS unit)
+   * Default value: 20px
    */
-  markers?: boolean | number | undefined;
+  thumbSize?: string | undefined;
   /**
-   * Snap thumbs on valid values, rather than sliding freely; Suggestion: use with 'step' prop
+   * Color name for component from the Quasar Color Palette
    */
-  snap?: boolean | undefined;
+  thumbColor?: string | undefined;
   /**
-   * Set custom thumbs svg path
+   * Set custom thumb svg path
    * Default value: M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0
    */
   thumbPath?: string | undefined;
@@ -7291,12 +7416,63 @@ export interface QRangeProps {
    */
   tabindex?: number | string | undefined;
   /**
-   * Emitted when the component needs to change the model; Is also used by v-model
-   * @param value New model value
+   * Model of the component of type { min, max } (both values must be between global min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
    */
-  "onUpdate:modelValue"?: (value: any) => void;
+  modelValue:
+    | {
+        /**
+         * Model value for left thumb
+         */
+        min?: number | null;
+        /**
+         * Model value for right thumb
+         */
+        max?: number | null;
+      }
+    | null
+    | undefined;
+  /**
+   * User can drag range instead of just the two thumbs
+   */
+  dragRange?: boolean | undefined;
+  /**
+   * User can drag only the range instead and NOT the two thumbs
+   */
+  dragOnlyRange?: boolean | undefined;
+  /**
+   * Color name for left label background from the Quasar Color Palette
+   */
+  leftLabelColor?: string | undefined;
+  /**
+   * Color name for left label text from the Quasar Color Palette
+   */
+  leftLabelTextColor?: string | undefined;
+  /**
+   * Color name for right label background from the Quasar Color Palette
+   */
+  rightLabelColor?: string | undefined;
+  /**
+   * Color name for right label text from the Quasar Color Palette
+   */
+  rightLabelTextColor?: string | undefined;
+  /**
+   * Override default label for min value
+   */
+  leftLabelValue?: string | number | undefined;
+  /**
+   * Override default label for max value
+   */
+  rightLabelValue?: string | number | undefined;
+  /**
+   * Color name (from the Quasar Color Palette) for left thumb
+   */
+  leftThumbColor?: string | undefined;
+  /**
+   * Color name (from the Quasar Color Palette) for right thumb
+   */
+  rightThumbColor?: string | undefined;
   /**
-   * Emitted on lazy model value change (after user slides then releases thumb)
+   * Emitted on lazy model value change (after user slides then releases the thumb)
    * @param value New model value
    */
   onChange?: (value: any) => void;
@@ -7305,9 +7481,67 @@ export interface QRangeProps {
    * @param phase Phase of panning
    */
   onPan?: (phase: "start" | "end") => void;
+  /**
+   * Emitted when the component needs to change the model; Is also used by v-model
+   * @param value New model value
+   */
+  "onUpdate:modelValue"?: (value: any) => void;
 }
 
-export interface QRangeSlots {}
+export interface QRangeSlots {
+  /**
+   * What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>
+   * @param scope
+   */
+  "marker-label": (scope: {
+    /**
+     * Config for current marker label
+     */
+    marker: SliderMarkerLabelConfig;
+    /**
+     * Array of marker label configs
+     */
+    markerList: SliderMarkerLabelArrayConfig[];
+    /**
+     * Object with key-value where key is the model and the value is the marker label config
+     */
+    markerMap: SliderMarkerLabelObjectConfig;
+    /**
+     * Required CSS classes to be applied to the marker element
+     */
+    classes: string;
+    /**
+     * Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap
+     * @param value The marker label equivalent model value
+     * @returns CSS style Object to apply to a marker element at respective model value
+     */
+    getStyle: (value: number) => LooseDictionary;
+  }) => VNode[];
+  /**
+   * What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>
+   * @param scope
+   */
+  "marker-label-group": (scope: {
+    /**
+     * Array of marker label configs
+     */
+    markerList: SliderMarkerLabelArrayConfig[];
+    /**
+     * Object with key-value where key is the model and the value is the marker label config
+     */
+    markerMap: SliderMarkerLabelObjectConfig;
+    /**
+     * Required CSS classes to be applied to the marker element
+     */
+    classes: string;
+    /**
+     * Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap
+     * @param value The marker label equivalent model value
+     * @returns CSS style Object to apply to a marker element at respective model value
+     */
+    getStyle: (value: number) => LooseDictionary;
+  }) => VNode[];
+}
 
 export interface QRange extends ComponentPublicInstance<QRangeProps> {}
 
@@ -7493,7 +7727,7 @@ export interface QScrollAreaProps {
     /**
      * Vue reference to the QScrollArea which triggered the event
      */
-    ref: LooseDictionary;
+    ref: QScrollArea;
     /**
      * Vertical scroll position (in px)
      */
@@ -7541,7 +7775,7 @@ export interface QScrollArea extends ComponentPublicInstance<QScrollAreaProps> {
    * Get the scrolling DOM element target
    * @returns DOM element upon which scrolling takes place
    */
-  getScrollTarget: () => LooseDictionary;
+  getScrollTarget: () => Element;
   /**
    * Get the current scroll information
    * @returns Scroll information
@@ -7762,7 +7996,7 @@ export interface QSelectProps {
   /**
    * Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
    */
-  modelValue: number | string | any[] | null | undefined;
+  modelValue: any;
   /**
    * Does field have validation errors?
    */
@@ -7778,7 +8012,7 @@ export interface QSelectProps {
   /**
    * Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
    */
-  rules?: any[] | undefined;
+  rules?: ValidationRule[] | undefined;
   /**
    * By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
    */
@@ -7913,7 +8147,6 @@ export interface QSelectProps {
   displayValue?: number | string | undefined;
   /**
    * Force render the selected option(s) as HTML; This can lead to XSS attacks so make sure that you sanitize the content; Does NOT apply when using 'selected' or 'selected-item' slots!
-   * Default value: false
    */
   displayValueHtml?: boolean | undefined;
   /**
@@ -7981,7 +8214,6 @@ export interface QSelectProps {
   optionsSelectedClass?: string | undefined;
   /**
    * Force render the options as HTML; This can lead to XSS attacks so make sure that you sanitize the content; Does NOT apply when using 'option' slot!
-   * Default value: false
    */
   optionsHtml?: boolean | undefined;
   /**
@@ -8131,9 +8363,9 @@ export interface QSelectProps {
      */
     direction: "increase" | "decrease";
     /**
-     * Vue reference to the QVirtualList which triggered the event
+     * Vue reference to the QSelect
      */
-    ref: LooseDictionary;
+    ref: QSelect;
   }) => void;
   /**
    * When using the 'clearable' property, this event is emitted when the clear icon is clicked
@@ -8195,10 +8427,7 @@ export interface QSelectProps {
    */
   onFilter?: (
     inputValue: string,
-    doneFn: (
-      callbackFn: () => void,
-      afterFn?: (ref: LooseDictionary) => void
-    ) => void,
+    doneFn: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
     abortFn: () => void
   ) => void;
   /**
@@ -8748,23 +8977,31 @@ export interface QSliderProps {
    */
   name?: string | undefined;
   /**
-   * Model of the component (must be between min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
-   */
-  modelValue: number | null | undefined;
-  /**
-   * Minimum value of the model
+   * Minimum value of the model; Set track's minimum value
    */
   min?: number | undefined;
   /**
-   * Maximum value of the model
+   * Maximum value of the model; Set track's maximum value
    * Default value: 100
    */
   max?: number | undefined;
+  /**
+   * Inner minimum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be higher or equal to 'min' prop; Defaults to 'min' prop
+   */
+  innerMin?: number | undefined;
+  /**
+   * Inner maximum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be lower or equal to 'max' prop; Defaults to 'max' prop
+   */
+  innerMax?: number | undefined;
   /**
    * Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity
    * Default value: 1
    */
   step?: number | undefined;
+  /**
+   * Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop
+   */
+  snap?: boolean | undefined;
   /**
    * Work in reverse (changes direction)
    */
@@ -8777,6 +9014,30 @@ export interface QSliderProps {
    * Color name for component from the Quasar Color Palette
    */
   color?: string | undefined;
+  /**
+   * Color name for the track (can be 'transparent' too) from the Quasar Color Palette
+   */
+  trackColor?: string | undefined;
+  /**
+   * Apply a pattern image on the track
+   */
+  trackImg?: string | undefined;
+  /**
+   * Color name for the inner track (can be 'transparent' too) from the Quasar Color Palette
+   */
+  innerTrackColor?: string | undefined;
+  /**
+   * Apply a pattern image on the inner track
+   */
+  innerTrackImg?: string | undefined;
+  /**
+   * Color name for the selection bar (can be 'transparent' too) from the Quasar Color Palette
+   */
+  selectionColor?: string | undefined;
+  /**
+   * Apply a pattern image on the selection bar
+   */
+  selectionImg?: string | undefined;
   /**
    * Popup a label when user clicks/taps on the slider thumb and moves it
    */
@@ -8790,9 +9051,9 @@ export interface QSliderProps {
    */
   labelTextColor?: string | undefined;
   /**
-   * Override default label value
+   * Switch the position of the label (top <-> bottom or left <-> right)
    */
-  labelValue?: string | number | undefined;
+  switchLabelSide?: boolean | undefined;
   /**
    * Always display the label
    */
@@ -8802,9 +9063,38 @@ export interface QSliderProps {
    */
   markers?: boolean | number | undefined;
   /**
-   * Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop
+   * Configure the marker labels (or show the default ones if 'true'); Array of definition Objects or Object with key-value where key is the model and the value is the marker label definition
+   * @param value The marker value to transform
+   * @returns Marker definition Object or directly a String for the label of the marker
    */
-  snap?: boolean | undefined;
+  markerLabels?:
+    | SliderMarkerLabels
+    | SliderMarkerLabels
+    | SliderMarkerLabels
+    | SliderMarkerLabels
+    | undefined;
+  /**
+   * CSS class(es) to apply to the marker labels container
+   */
+  markerLabelsClass?: string | undefined;
+  /**
+   * Switch the position of the marker labels (top <-> bottom or left <-> right)
+   */
+  switchMarkerLabelsSide?: boolean | undefined;
+  /**
+   * Track size (including CSS unit)
+   * Default value: 4px
+   */
+  trackSize?: string | undefined;
+  /**
+   * Thumb size (including CSS unit)
+   * Default value: 20px
+   */
+  thumbSize?: string | undefined;
+  /**
+   * Color name for component from the Quasar Color Palette
+   */
+  thumbColor?: string | undefined;
   /**
    * Set custom thumb svg path
    * Default value: M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0
@@ -8831,10 +9121,13 @@ export interface QSliderProps {
    */
   tabindex?: number | string | undefined;
   /**
-   * Emitted when the component needs to change the model; Is also used by v-model
-   * @param value New model value
+   * Model of the component (must be between min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
    */
-  "onUpdate:modelValue"?: (value: number | null) => void;
+  modelValue: number | null | undefined;
+  /**
+   * Override default label value
+   */
+  labelValue?: string | number | undefined;
   /**
    * Emitted on lazy model value change (after user slides then releases the thumb)
    * @param value New model value
@@ -8845,9 +9138,67 @@ export interface QSliderProps {
    * @param phase Phase of panning
    */
   onPan?: (phase: "start" | "end") => void;
+  /**
+   * Emitted when the component needs to change the model; Is also used by v-model
+   * @param value New model value
+   */
+  "onUpdate:modelValue"?: (value: number | null) => void;
 }
 
-export interface QSliderSlots {}
+export interface QSliderSlots {
+  /**
+   * What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>
+   * @param scope
+   */
+  "marker-label": (scope: {
+    /**
+     * Config for current marker label
+     */
+    marker: SliderMarkerLabelConfig;
+    /**
+     * Array of marker label configs
+     */
+    markerList: SliderMarkerLabelArrayConfig[];
+    /**
+     * Object with key-value where key is the model and the value is the marker label config
+     */
+    markerMap: SliderMarkerLabelObjectConfig;
+    /**
+     * Required CSS classes to be applied to the marker element
+     */
+    classes: string;
+    /**
+     * Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap
+     * @param value The marker label equivalent model value
+     * @returns CSS style Object to apply to a marker element at respective model value
+     */
+    getStyle: (value: number) => LooseDictionary;
+  }) => VNode[];
+  /**
+   * What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>
+   * @param scope
+   */
+  "marker-label-group": (scope: {
+    /**
+     * Array of marker label configs
+     */
+    markerList: SliderMarkerLabelArrayConfig[];
+    /**
+     * Object with key-value where key is the model and the value is the marker label config
+     */
+    markerMap: SliderMarkerLabelObjectConfig;
+    /**
+     * Required CSS classes to be applied to the marker element
+     */
+    classes: string;
+    /**
+     * Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap
+     * @param value The marker label equivalent model value
+     * @returns CSS style Object to apply to a marker element at respective model value
+     */
+    getStyle: (value: number) => LooseDictionary;
+  }) => VNode[];
+}
 
 export interface QSlider extends ComponentPublicInstance<QSliderProps> {}
 
@@ -11327,25 +11678,33 @@ export interface QTr extends ComponentPublicInstance<QTrProps> {}
 
 export interface QRouteTabProps {
   /**
-   * Equivalent to Vue Router <router-link> 'to' property
+   * Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used
    */
-  to: string | LooseDictionary;
+  to?: string | LooseDictionary | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'exact' property
+   * Equivalent to Vue Router <router-link> 'exact' property; Superseeded by 'href' prop if used
    */
   exact?: boolean | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'replace' property
+   * Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used
    */
   replace?: boolean | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'active-class' property
+   * Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used
    */
   activeClass?: string | undefined;
   /**
-   * Equivalent to Vue Router <router-link> 'active-class' property
+   * Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used
    */
   exactActiveClass?: string | undefined;
+  /**
+   * Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
+   */
+  href?: string | undefined;
+  /**
+   * Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
+   */
+  target?: string | undefined;
   /**
    * Put component in disabled mode
    */
@@ -12286,7 +12645,7 @@ export interface QTreeSlots {
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
@@ -12320,7 +12679,7 @@ export interface QTreeSlots {
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
@@ -12354,7 +12713,7 @@ export interface QTreeSlots {
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
@@ -12388,7 +12747,7 @@ export interface QTreeSlots {
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
@@ -12694,12 +13053,14 @@ export interface QUploaderProps {
 export interface QUploaderSlots {
   /**
    * Slot for custom header; Scope is the QUploader instance itself
+   * @param scope QUploader instance
    */
-  header: () => VNode[];
+  header: (scope: QUploader) => VNode[];
   /**
    * Slot for custom list; Scope is the QUploader instance itself
+   * @param scope QUploader instance
    */
-  list: () => VNode[];
+  list: (scope: QUploader) => VNode[];
 }
 
 export interface QUploader extends ComponentPublicInstance<QUploaderProps> {
@@ -12849,9 +13210,9 @@ export interface QVirtualScrollProps {
      */
     direction: "increase" | "decrease";
     /**
-     * Vue reference to the QVirtualList which triggered the event
+     * Vue reference to the QVirtualScroll
      */
-    ref: LooseDictionary;
+    ref: QVirtualScroll;
   }) => void;
 }
 
@@ -13077,11 +13438,27 @@ export interface QDialogOptions {
   /**
    * Props for an 'OK' button
    */
-  ok?: string | { [index: string]: any } | boolean;
+  ok?:
+    | string
+    | {
+        /**
+         * See QBtn for available props
+         */
+        [props: string]: any;
+      }
+    | boolean;
   /**
    * Props for a 'CANCEL' button
    */
-  cancel?: string | { [index: string]: any } | boolean;
+  cancel?:
+    | string
+    | {
+        /**
+         * See QBtn for available props
+         */
+        [props: string]: any;
+      }
+    | boolean;
   /**
    * What button to focus, unless you also have 'prompt' or 'options'
    * Default value: ok
@@ -13144,7 +13521,7 @@ export interface QDialogOptions {
   /**
    * Use custom dialog component; use along with 'componentProps' prop where possible
    */
-  component?: any;
+  component?: Component;
   /**
    * User defined props which will be forwarded to underlying custom component if 'component' prop is used
    */
@@ -13155,6 +13532,100 @@ import { WebStorageGetItemMethodType } from "./api";
 import { WebStorageGetIndexMethodType } from "./api";
 import { WebStorageGetKeyMethodType } from "./api";
 import { WebStorageGetAllKeysMethodType } from "./api";
+import { ValidationRule } from "./api";
+export interface SliderMarkerLabels {
+  /**
+   * Value of equivalent model where to position the marker
+   */
+  value: number;
+  /**
+   * Label to use
+   */
+  label?: number | string;
+  /**
+   * CSS classes to be attributed to the marker label
+   */
+  classes?: string | any[] | LooseDictionary;
+  /**
+   * Style definitions to be attributed to the marker label
+   */
+  style?: LooseDictionary;
+}
+
+export interface SliderMarkerLabelConfig {
+  /**
+   * Index of the marker label (0-based)
+   */
+  index?: number;
+  /**
+   * Equivalent model value for the marker label
+   */
+  value?: number;
+  /**
+   * Configured label for the marker
+   */
+  label?: number | string;
+  /**
+   * Required CSS classes to be applied to the marker element
+   */
+  classes?: string;
+  /**
+   * Style definitions to be attributed to the marker label
+   */
+  style?: LooseDictionary;
+}
+
+export interface SliderMarkerLabelArrayConfig {
+  /**
+   * Index of the marker label (0-based)
+   */
+  index?: number;
+  /**
+   * Equivalent model value for the marker label
+   */
+  value?: number;
+  /**
+   * Configured label for the marker
+   */
+  label?: number | string;
+  /**
+   * Required CSS classes to be applied to the marker element
+   */
+  classes?: string;
+  /**
+   * Style definitions to be attributed to the marker label
+   */
+  style?: LooseDictionary;
+}
+
+export interface SliderMarkerLabelObjectConfig {
+  /**
+   * Marker label config
+   */
+  [key: string]: {
+    /**
+     * Index of the marker label (0-based)
+     */
+    index?: number;
+    /**
+     * Equivalent model value for the marker label
+     */
+    value?: number;
+    /**
+     * Configured label for the marker
+     */
+    label?: number | string;
+    /**
+     * Required CSS classes to be applied to the marker element
+     */
+    classes?: string;
+    /**
+     * Style definitions to be attributed to the marker label
+     */
+    style?: LooseDictionary;
+  };
+}
+
 import { QVueGlobals, QSingletonGlobals } from "./globals";
 declare module "./globals" {
   export interface QVueGlobals {