quasar 2.3.1 → 2.4.0

package/dist/api/QSlider.json

@@ -12,36 +12,43 @@
       ],
       "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\""
       ],
-      "category": "model"
+      "category": "model",
+      "required": false
     },
     "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"
+      "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",
@@ -50,7 +57,13 @@
       "examples": [
         ":step=\"1\""
       ],
-      "category": "model"
+      "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",
@@ -71,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",
@@ -94,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",
@@ -122,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",
@@ -134,7 +343,8 @@
       "examples": [
         "M5 5 h10 v10 h-10 v-10"
       ],
-      "category": "style"
+      "category": "style",
+      "required": false
     },
     "dark": {
       "type": "Boolean",
@@ -167,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": {
@@ -205,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/QSpinner.json

@@ -32,7 +32,8 @@
         "2",
         "5"
       ],
-      "category": "style"
+      "category": "style",
+      "required": false
     }
   }
 }

package/dist/api/QSplitter.json

@@ -26,7 +26,8 @@
         "%",
         "px"
       ],
-      "category": "model"
+      "category": "model",
+      "required": false
     },
     "emit-immediately": {
       "type": "Boolean",
@@ -46,7 +47,8 @@
         ":limits=\"[30, 70]\"",
         ":limits=\"[0, Infinity]\""
       ],
-      "category": "content|model"
+      "category": "content|model",
+      "required": false
     },
     "disable": {
       "type": "Boolean",

package/dist/api/QStep.json

@@ -137,7 +137,8 @@
       "type": "Boolean",
       "default": true,
       "desc": "Allow navigation through the header",
-      "category": "behavior"
+      "category": "behavior",
+      "required": false
     },
     "done": {
       "type": "Boolean",