quasar 1.16.3 → 1.17.3

package/dist/api/QSlider.json

@@ -13,17 +13,9 @@
       "category": "behavior",
       "addedIn": "v1.9.0"
     },
-    "value": {
-      "type": "Number",
-      "desc": "Model of the component (must be between min/max); Either use this property (along with a listener for 'input' event) OR use v-model directive",
-      "examples": [
-        "v-model=\"positionModel\""
-      ],
-      "category": "model"
-    },
     "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\""
@@ -32,13 +24,31 @@
     },
     "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\""
       ],
       "category": "model"
     },
+    "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": "v1.17"
+    },
+    "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": "v1.17"
+    },
     "step": {
       "type": "Number",
       "desc": "Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity",
@@ -48,6 +58,11 @@
       ],
       "category": "model"
     },
+    "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)",
@@ -69,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": "v1.17"
+    },
+    "track-img": {
+      "type": "String",
+      "desc": "Apply a pattern image on the track",
+      "transformAssetUrls": true,
+      "examples": [
+        "~assets/my-pattern.png"
+      ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
+    "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": "v1.17"
+    },
+    "inner-track-img": {
+      "type": "String",
+      "desc": "Apply a pattern image on the inner track",
+      "transformAssetUrls": true,
+      "examples": [
+        "~assets/my-pattern.png"
+      ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
+    "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": "v1.17"
+    },
+    "selection-img": {
+      "type": "String",
+      "desc": "Apply a pattern image on the selection bar",
+      "transformAssetUrls": true,
+      "examples": [
+        "~assets/my-pattern.png"
+      ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
     "label": {
       "type": "Boolean",
       "desc": "Popup a label when user clicks/taps on the slider thumb and moves it",
@@ -93,16 +168,11 @@
       "category": "style",
       "addedIn": "v1.1.0"
     },
-    "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": "v1.17"
     },
     "label-always": {
       "type": "Boolean",
@@ -110,14 +180,160 @@
       "category": "behavior|content"
     },
     "markers": {
-      "type": "Boolean",
-      "desc": "Display markers on the track, one for each possible value for the model",
-      "category": "content"
+      "type": [
+        "Boolean",
+        "Number"
+      ],
+      "desc": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)",
+      "category": "content",
+      "examples": [
+        "markers",
+        ":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": "v1.17"
+    },
+    "marker-labels-class": {
+      "type": "String",
+      "desc": "CSS class(es) to apply to the marker labels container",
+      "examples": [
+        "text-orange"
+      ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
+    "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": "v1.17"
+    },
+    "track-size": {
+      "type": "String",
+      "desc": "Track size (including CSS unit)",
+      "default": "4px",
+      "examples": [
+        "35px"
+      ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
+    "thumb-size": {
+      "type": "String",
+      "desc": "Thumb size (including CSS unit)",
+      "default": "20px",
+      "examples": [
+        "20px"
+      ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
+    "thumb-color": {
+      "type": "String",
+      "desc": "Color name for component from the Quasar Color Palette",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "style",
+      "addedIn": "v1.17"
     },
     "thumb-path": {
       "type": "String",
@@ -160,19 +376,258 @@
         "100"
       ],
       "category": "general"
+    },
+    "value": {
+      "type": "Number",
+      "desc": "Model of the component (must be between min/max); Either use this property (along with a listener for 'input' event) OR use v-model directive",
+      "examples": [
+        "v-model=\"positionModel\""
+      ],
+      "category": "model"
+    },
+    "label-value": {
+      "type": [
+        "String",
+        "Number"
+      ],
+      "desc": "Override default label value",
+      "examples": [
+        ":label-value=\"model + 'px'\""
+      ],
+      "category": "content"
     }
   },
-  "events": {
-    "input": {
-      "desc": "Emitted when the component needs to change the model; Is also used by v-model",
-      "params": {
-        "value": {
-          "type": "Any",
-          "desc": "New model value",
-          "required": true
+  "scopedSlots": {
+    "marker-label": {
+      "desc": "What to be used to display the marker label",
+      "addedIn": "v1.17",
+      "scope": {
+        "marker": {
+          "type": "Object",
+          "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",
+          "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",
+          "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 to be used to display the marker label group",
+      "addedIn": "v1.17",
+      "scope": {
+        "markerList": {
+          "type": "Array",
+          "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",
+          "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": {
@@ -196,6 +651,16 @@
         }
       },
       "addedIn": "v1.14.0"
+    },
+    "input": {
+      "desc": "Emitted when the component needs to change the model; Is also used by v-model",
+      "params": {
+        "value": {
+          "type": "Any",
+          "desc": "New model value",
+          "required": true
+        }
+      }
     }
   }
 }

package/dist/api/QStep.json

@@ -32,7 +32,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -85,7 +85,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -105,7 +105,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -125,7 +125,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },

package/dist/api/QStepper.json

@@ -138,7 +138,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -158,7 +158,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -178,7 +178,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },
@@ -198,7 +198,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "header"
     },

package/dist/api/QTab.json

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