quasar 2.3.4 → 2.4.3

package/dist/api/QSlider.json

@@ -12,22 +12,9 @@
       ],
       "category": "behavior"
     },
-    "model-value": {
-      "desc": "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",
-      "required": true,
-      "category": "model",
-      "type": [
-        "Number",
-        "null",
-        "undefined"
-      ],
-      "examples": [
-        "v-model=\"positionModel\""
-      ]
-    },
     "min": {
       "type": "Number",
-      "desc": "Minimum value of the model",
+      "desc": "Minimum value of the model; Set track's minimum value",
       "default": 0,
       "examples": [
         ":min=\"0\""
@@ -37,7 +24,7 @@
     },
     "max": {
       "type": "Number",
-      "desc": "Maximum value of the model",
+      "desc": "Maximum value of the model; Set track's maximum value",
       "default": 100,
       "examples": [
         ":max=\"100\""
@@ -45,6 +32,24 @@
       "category": "model",
       "required": false
     },
+    "inner-min": {
+      "type": "Number",
+      "desc": "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",
+      "examples": [
+        ":inner-min=\"0\""
+      ],
+      "category": "model",
+      "addedIn": "v2.4"
+    },
+    "inner-max": {
+      "type": "Number",
+      "desc": "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",
+      "examples": [
+        ":max-value=\"100\""
+      ],
+      "category": "model",
+      "addedIn": "v2.4"
+    },
     "step": {
       "type": "Number",
       "desc": "Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity",
@@ -55,6 +60,11 @@
       "category": "model",
       "required": false
     },
+    "snap": {
+      "type": "Boolean",
+      "desc": "Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop",
+      "category": "behavior"
+    },
     "reverse": {
       "type": "Boolean",
       "desc": "Work in reverse (changes direction)",
@@ -74,6 +84,66 @@
       ],
       "category": "style"
     },
+    "track-color": {
+      "type": "String",
+      "desc": "Color name for the track (can be 'transparent' too) from the Quasar Color Palette",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "style",
+      "addedIn": "v2.4"
+    },
+    "track-img": {
+      "type": "String",
+      "desc": "Apply a pattern image on the track",
+      "transformAssetUrls": true,
+      "examples": [
+        "~assets/my-pattern.png"
+      ],
+      "category": "style",
+      "addedIn": "v2.4"
+    },
+    "inner-track-color": {
+      "type": "String",
+      "desc": "Color name for the inner track (can be 'transparent' too) from the Quasar Color Palette",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "style",
+      "addedIn": "v2.4"
+    },
+    "inner-track-img": {
+      "type": "String",
+      "desc": "Apply a pattern image on the inner track",
+      "transformAssetUrls": true,
+      "examples": [
+        "~assets/my-pattern.png"
+      ],
+      "category": "style",
+      "addedIn": "v2.4"
+    },
+    "selection-color": {
+      "type": "String",
+      "desc": "Color name for the selection bar (can be 'transparent' too) from the Quasar Color Palette",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "style",
+      "addedIn": "v2.4"
+    },
+    "selection-img": {
+      "type": "String",
+      "desc": "Apply a pattern image on the selection bar",
+      "transformAssetUrls": true,
+      "examples": [
+        "~assets/my-pattern.png"
+      ],
+      "category": "style",
+      "addedIn": "v2.4"
+    },
     "label": {
       "type": "Boolean",
       "desc": "Popup a label when user clicks/taps on the slider thumb and moves it",
@@ -97,16 +167,11 @@
       ],
       "category": "style"
     },
-    "label-value": {
-      "type": [
-        "String",
-        "Number"
-      ],
-      "desc": "Override default label value",
-      "examples": [
-        ":label-value=\"model + 'px'\""
-      ],
-      "category": "content"
+    "switch-label-side": {
+      "type": "Boolean",
+      "desc": "Switch the position of the label (top <-> bottom or left <-> right)",
+      "category": "style",
+      "addedIn": "v2.4"
     },
     "label-always": {
       "type": "Boolean",
@@ -125,10 +190,151 @@
         ":markers=\"5\""
       ]
     },
-    "snap": {
+    "marker-labels": {
+      "type": [
+        "Boolean",
+        "Array",
+        "Object",
+        "Function"
+      ],
+      "tsType": "SliderMarkerLabels",
+      "desc": "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",
+      "definition": {
+        "value": {
+          "type": "Number",
+          "required": true,
+          "desc": "Value of equivalent model where to position the marker"
+        },
+        "label": {
+          "type": [
+            "Number",
+            "String"
+          ],
+          "desc": "Label to use"
+        },
+        "classes": {
+          "type": [
+            "String",
+            "Array",
+            "Object"
+          ],
+          "desc": "CSS classes to be attributed to the marker label",
+          "examples": [
+            "my-class-name"
+          ]
+        },
+        "style": {
+          "type": "Object",
+          "desc": "Style definitions to be attributed to the marker label",
+          "examples": [
+            "{ height: '24px' }"
+          ]
+        }
+      },
+      "params": {
+        "value": {
+          "type": "Number",
+          "desc": "The marker value to transform",
+          "required": true,
+          "examples": [
+            "5"
+          ]
+        }
+      },
+      "returns": {
+        "type": [
+          "String",
+          "Object"
+        ],
+        "desc": "Marker definition Object or directly a String for the label of the marker",
+        "definition": {
+          "value": {
+            "type": "Number",
+            "desc": "Value of equivalent model where to position the marker"
+          },
+          "label": {
+            "type": [
+              "Number",
+              "String"
+            ],
+            "desc": "Label to use"
+          },
+          "classes": {
+            "type": [
+              "String",
+              "Array",
+              "Object"
+            ],
+            "desc": "CSS classes to be attributed to the marker label",
+            "examples": [
+              "my-class-name"
+            ]
+          },
+          "style": {
+            "type": "Object",
+            "desc": "Style definitions to be attributed to the marker label",
+            "examples": [
+              "{ height: '24px' }"
+            ]
+          }
+        }
+      },
+      "category": "content",
+      "examples": [
+        true,
+        "[ { value: 0, label: '0%' }, { value: 5, classes: 'my-class', style: { width: '24px' } } ]",
+        "{ 0: '0%', 5: { label: '5%', classes: 'my-class', style: { width: '24px' } } }",
+        "val => (10 * val) + '%'",
+        "val => ({ label: (10 * val) + '%', classes: 'my-class', style: { width: '24px' } })"
+      ],
+      "addedIn": "v2.4"
+    },
+    "marker-labels-class": {
+      "type": "String",
+      "desc": "CSS class(es) to apply to the marker labels container",
+      "examples": [
+        "text-orange"
+      ],
+      "category": "style",
+      "addedIn": "v2.4"
+    },
+    "switch-marker-labels-side": {
       "type": "Boolean",
-      "desc": "Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop",
-      "category": "behavior"
+      "desc": "Switch the position of the marker labels (top <-> bottom or left <-> right)",
+      "category": "style",
+      "addedIn": "v2.4"
+    },
+    "track-size": {
+      "type": "String",
+      "desc": "Track size (including CSS unit)",
+      "default": "4px",
+      "examples": [
+        "35px"
+      ],
+      "category": "style",
+      "addedIn": "v2.4",
+      "required": false
+    },
+    "thumb-size": {
+      "type": "String",
+      "desc": "Thumb size (including CSS unit)",
+      "default": "20px",
+      "examples": [
+        "20px"
+      ],
+      "category": "style",
+      "addedIn": "v2.4",
+      "required": false
+    },
+    "thumb-color": {
+      "type": "String",
+      "desc": "Color name for component from the Quasar Color Palette",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "style",
+      "addedIn": "v2.4"
     },
     "thumb-path": {
       "type": "String",
@@ -171,22 +377,268 @@
         "100"
       ],
       "category": "general"
+    },
+    "model-value": {
+      "desc": "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",
+      "required": true,
+      "category": "model",
+      "type": [
+        "Number",
+        "null",
+        "undefined"
+      ],
+      "examples": [
+        "v-model=\"positionModel\""
+      ]
+    },
+    "label-value": {
+      "type": [
+        "String",
+        "Number"
+      ],
+      "desc": "Override default label value",
+      "examples": [
+        ":label-value=\"model + 'px'\""
+      ],
+      "category": "content"
     }
   },
-  "events": {
-    "update:model-value": {
-      "desc": "Emitted when the component needs to change the model; Is also used by v-model",
-      "params": {
-        "value": {
-          "type": [
-            "Number",
-            "null"
-          ],
-          "desc": "New model value",
-          "required": true
+  "slots": {
+    "marker-label": {
+      "desc": "What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>",
+      "addedIn": "v2.4",
+      "scope": {
+        "marker": {
+          "type": "Object",
+          "tsType": "SliderMarkerLabelConfig",
+          "desc": "Config for current marker label",
+          "definition": {
+            "index": {
+              "type": "Number",
+              "desc": "Index of the marker label (0-based)"
+            },
+            "value": {
+              "type": "Number",
+              "desc": "Equivalent model value for the marker label"
+            },
+            "label": {
+              "type": [
+                "Number",
+                "String"
+              ],
+              "desc": "Configured label for the marker"
+            },
+            "classes": {
+              "type": "String",
+              "desc": "Required CSS classes to be applied to the marker element"
+            },
+            "style": {
+              "type": "Object",
+              "desc": "Style definitions to be attributed to the marker label",
+              "examples": [
+                "{ height: '24px' }"
+              ]
+            }
+          }
+        },
+        "markerList": {
+          "type": "Array",
+          "tsType": "SliderMarkerLabelArrayConfig",
+          "desc": "Array of marker label configs",
+          "definition": {
+            "index": {
+              "type": "Number",
+              "desc": "Index of the marker label (0-based)"
+            },
+            "value": {
+              "type": "Number",
+              "desc": "Equivalent model value for the marker label"
+            },
+            "label": {
+              "type": [
+                "Number",
+                "String"
+              ],
+              "desc": "Configured label for the marker"
+            },
+            "classes": {
+              "type": "String",
+              "desc": "Required CSS classes to be applied to the marker element"
+            },
+            "style": {
+              "type": "Object",
+              "desc": "Style definitions to be attributed to the marker label",
+              "examples": [
+                "{ height: '24px' }"
+              ]
+            }
+          }
+        },
+        "markerMap": {
+          "type": "Object",
+          "tsType": "SliderMarkerLabelObjectConfig",
+          "desc": "Object with key-value where key is the model and the value is the marker label config",
+          "definition": {
+            "...key": {
+              "type": "Object",
+              "desc": "Marker label config",
+              "definition": {
+                "index": {
+                  "type": "Number",
+                  "desc": "Index of the marker label (0-based)"
+                },
+                "value": {
+                  "type": "Number",
+                  "desc": "Equivalent model value for the marker label"
+                },
+                "label": {
+                  "type": [
+                    "Number",
+                    "String"
+                  ],
+                  "desc": "Configured label for the marker"
+                },
+                "classes": {
+                  "type": "String",
+                  "desc": "Required CSS classes to be applied to the marker element"
+                },
+                "style": {
+                  "type": "Object",
+                  "desc": "Style definitions to be attributed to the marker label",
+                  "examples": [
+                    "{ height: '24px' }"
+                  ]
+                }
+              }
+            }
+          }
+        },
+        "classes": {
+          "type": "String",
+          "desc": "Required CSS classes to be applied to the marker element"
+        },
+        "getStyle": {
+          "type": "Function",
+          "desc": "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",
+          "params": {
+            "value": {
+              "type": "Number",
+              "desc": "The marker label equivalent model value",
+              "required": true,
+              "examples": [
+                "5"
+              ]
+            }
+          },
+          "returns": {
+            "type": "Object",
+            "desc": "CSS style Object to apply to a marker element at respective model value"
+          }
         }
       }
     },
+    "marker-label-group": {
+      "desc": "What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>",
+      "addedIn": "v2.4",
+      "scope": {
+        "markerList": {
+          "type": "Array",
+          "tsType": "SliderMarkerLabelArrayConfig",
+          "desc": "Array of marker label configs",
+          "definition": {
+            "index": {
+              "type": "Number",
+              "desc": "Index of the marker label (0-based)"
+            },
+            "value": {
+              "type": "Number",
+              "desc": "Equivalent model value for the marker label"
+            },
+            "label": {
+              "type": [
+                "Number",
+                "String"
+              ],
+              "desc": "Configured label for the marker"
+            },
+            "classes": {
+              "type": "String",
+              "desc": "Required CSS classes to be applied to the marker element"
+            },
+            "style": {
+              "type": "Object",
+              "desc": "Style definitions to be attributed to the marker label",
+              "examples": [
+                "{ height: '24px' }"
+              ]
+            }
+          }
+        },
+        "markerMap": {
+          "type": "Object",
+          "tsType": "SliderMarkerLabelObjectConfig",
+          "desc": "Object with key-value where key is the model and the value is the marker label config",
+          "definition": {
+            "...key": {
+              "type": "Object",
+              "desc": "Marker label config",
+              "definition": {
+                "index": {
+                  "type": "Number",
+                  "desc": "Index of the marker label (0-based)"
+                },
+                "value": {
+                  "type": "Number",
+                  "desc": "Equivalent model value for the marker label"
+                },
+                "label": {
+                  "type": [
+                    "Number",
+                    "String"
+                  ],
+                  "desc": "Configured label for the marker"
+                },
+                "classes": {
+                  "type": "String",
+                  "desc": "Required CSS classes to be applied to the marker element"
+                },
+                "style": {
+                  "type": "Object",
+                  "desc": "Style definitions to be attributed to the marker label",
+                  "examples": [
+                    "{ height: '24px' }"
+                  ]
+                }
+              }
+            }
+          }
+        },
+        "classes": {
+          "type": "String",
+          "desc": "Required CSS classes to be applied to the marker element"
+        },
+        "getStyle": {
+          "type": "Function",
+          "desc": "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",
+          "params": {
+            "value": {
+              "type": "Number",
+              "desc": "The marker label equivalent model value",
+              "required": true,
+              "examples": [
+                "5"
+              ]
+            }
+          },
+          "returns": {
+            "type": "Object",
+            "desc": "CSS style Object to apply to a marker element at respective model value"
+          }
+        }
+      }
+    }
+  },
+  "events": {
     "change": {
       "desc": "Emitted on lazy model value change (after user slides then releases the thumb)",
       "params": {
@@ -209,6 +661,19 @@
           ]
         }
       }
+    },
+    "update:model-value": {
+      "desc": "Emitted when the component needs to change the model; Is also used by v-model",
+      "params": {
+        "value": {
+          "type": [
+            "Number",
+            "null"
+          ],
+          "desc": "New model value",
+          "required": true
+        }
+      }
     }
   }
 }

package/dist/api/QStep.json

@@ -27,7 +27,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -80,7 +80,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -100,7 +100,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -120,7 +120,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },

package/dist/api/QStepper.json

@@ -147,7 +147,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -167,7 +167,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -187,7 +187,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -207,7 +207,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },

package/dist/api/QTab.json

@@ -11,7 +11,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "content"
     },