quasar 2.3.1 → 2.4.0

package/dist/api/QRange.json

@@ -12,58 +12,43 @@
       ],
       "category": "behavior"
     },
-    "model-value": {
-      "desc": "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",
-      "required": true,
-      "category": "model",
-      "type": [
-        "Object",
-        "null",
-        "undefined"
-      ],
-      "definition": {
-        "min": {
-          "type": [
-            "Number",
-            "null"
-          ],
-          "desc": "Model value for left thumb",
-          "examples": [
-            2
-          ]
-        },
-        "max": {
-          "type": [
-            "Number",
-            "null"
-          ],
-          "desc": "Model value for right thumb",
-          "examples": [
-            12
-          ]
-        }
-      },
-      "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",
@@ -72,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",
@@ -84,16 +75,6 @@
       "desc": "Display in vertical direction",
       "category": "behavior"
     },
-    "drag-range": {
-      "type": "Boolean",
-      "desc": "User can drag range instead of just the two thumbs",
-      "category": "content"
-    },
-    "drag-only-range": {
-      "type": "Boolean",
-      "desc": "User can drag only the range instead and NOT the two thumbs",
-      "category": "content"
-    },
     "color": {
       "type": "String",
       "desc": "Color name for component from the Quasar Color Palette",
@@ -103,91 +84,99 @@
       ],
       "category": "style"
     },
-    "label": {
-      "type": "Boolean",
-      "desc": "Popup labels (for left and right thumbs) when user clicks/taps on the slider thumb and moves it",
-      "category": "labels"
-    },
-    "label-color": {
+    "track-color": {
       "type": "String",
-      "desc": "Color name for labels background from the Quasar Color Palette; Applies to both labels, unless specific label color props are used",
+      "desc": "Color name for the track (can be 'transparent' too) from the Quasar Color Palette",
       "examples": [
         "primary",
         "teal-10"
       ],
-      "category": "labels"
+      "category": "style",
+      "addedIn": "v2.4"
     },
-    "label-text-color": {
+    "track-img": {
       "type": "String",
-      "desc": "Color name for labels text from the Quasar Color Palette; Applies to both labels, unless specific label text color props are used",
+      "desc": "Apply a pattern image on the track",
+      "transformAssetUrls": true,
       "examples": [
-        "primary",
-        "teal-10"
+        "~assets/my-pattern.png"
       ],
-      "category": "labels"
+      "category": "style",
+      "addedIn": "v2.4"
     },
-    "left-label-color": {
+    "inner-track-color": {
       "type": "String",
-      "desc": "Color name for left label background from the Quasar Color Palette",
+      "desc": "Color name for the inner track (can be 'transparent' too) from the Quasar Color Palette",
       "examples": [
         "primary",
         "teal-10"
       ],
-      "category": "labels"
+      "category": "style",
+      "addedIn": "v2.4"
     },
-    "left-label-text-color": {
+    "inner-track-img": {
       "type": "String",
-      "desc": "Color name for left label text from the Quasar Color Palette",
+      "desc": "Apply a pattern image on the inner track",
+      "transformAssetUrls": true,
       "examples": [
-        "primary",
-        "teal-10"
+        "~assets/my-pattern.png"
       ],
-      "category": "labels"
+      "category": "style",
+      "addedIn": "v2.4"
     },
-    "right-label-color": {
+    "selection-color": {
       "type": "String",
-      "desc": "Color name for right label background from the Quasar Color Palette",
+      "desc": "Color name for the selection bar (can be 'transparent' too) from the Quasar Color Palette",
       "examples": [
         "primary",
         "teal-10"
       ],
-      "category": "labels"
+      "category": "style",
+      "addedIn": "v2.4"
     },
-    "right-label-text-color": {
+    "selection-img": {
       "type": "String",
-      "desc": "Color name for right label text from the Quasar Color Palette",
+      "desc": "Apply a pattern image on the selection bar",
+      "transformAssetUrls": true,
       "examples": [
-        "primary",
-        "teal-10"
+        "~assets/my-pattern.png"
       ],
-      "category": "labels"
+      "category": "style",
+      "addedIn": "v2.4"
     },
-    "left-label-value": {
-      "type": [
-        "String",
-        "Number"
-      ],
-      "desc": "Override default label for min value",
+    "label": {
+      "type": "Boolean",
+      "desc": "Popup a label when user clicks/taps on the slider thumb and moves it",
+      "category": "content"
+    },
+    "label-color": {
+      "type": "String",
+      "desc": "Color name for component from the Quasar Color Palette",
       "examples": [
-        ":left-label-value=\"model.min + 'px'\""
+        "primary",
+        "teal-10"
       ],
-      "category": "labels"
+      "category": "style"
     },
-    "right-label-value": {
-      "type": [
-        "String",
-        "Number"
-      ],
-      "desc": "Override default label for max value",
+    "label-text-color": {
+      "type": "String",
+      "desc": "Color name for component from the Quasar Color Palette",
       "examples": [
-        ":right-label-value=\"model.max + 'px'\""
+        "primary",
+        "teal-10"
       ],
-      "category": "labels"
+      "category": "style"
+    },
+    "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",
-      "desc": "Always display the labels",
-      "category": "labels"
+      "desc": "Always display the label",
+      "category": "behavior|content"
     },
     "markers": {
       "type": [
@@ -201,19 +190,161 @@
         ":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 thumbs on valid values, rather than sliding freely; Suggestion: use with 'step' prop",
-      "category": "content"
+      "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",
-      "desc": "Set custom thumbs svg path",
+      "desc": "Set custom thumb svg path",
       "default": "M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0",
       "examples": [
         "M5 5 h10 v10 h-10 v-10"
       ],
-      "category": "style"
+      "category": "style",
+      "required": false
     },
     "dark": {
       "type": "Boolean",
@@ -246,21 +377,369 @@
         "100"
       ],
       "category": "general"
+    },
+    "model-value": {
+      "desc": "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",
+      "required": true,
+      "category": "model",
+      "type": [
+        "Object",
+        "null",
+        "undefined"
+      ],
+      "definition": {
+        "min": {
+          "type": [
+            "Number",
+            "null"
+          ],
+          "desc": "Model value for left thumb",
+          "examples": [
+            2
+          ]
+        },
+        "max": {
+          "type": [
+            "Number",
+            "null"
+          ],
+          "desc": "Model value for right thumb",
+          "examples": [
+            12
+          ]
+        }
+      },
+      "examples": [
+        "v-model=\"positionModel\""
+      ]
+    },
+    "drag-range": {
+      "type": "Boolean",
+      "desc": "User can drag range instead of just the two thumbs",
+      "category": "content"
+    },
+    "drag-only-range": {
+      "type": "Boolean",
+      "desc": "User can drag only the range instead and NOT the two thumbs",
+      "category": "content"
+    },
+    "left-label-color": {
+      "type": "String",
+      "desc": "Color name for left label background from the Quasar Color Palette",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "labels"
+    },
+    "left-label-text-color": {
+      "type": "String",
+      "desc": "Color name for left label text from the Quasar Color Palette",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "labels"
+    },
+    "right-label-color": {
+      "type": "String",
+      "desc": "Color name for right label background from the Quasar Color Palette",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "labels"
+    },
+    "right-label-text-color": {
+      "type": "String",
+      "desc": "Color name for right label text from the Quasar Color Palette",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "labels"
+    },
+    "left-label-value": {
+      "type": [
+        "String",
+        "Number"
+      ],
+      "desc": "Override default label for min value",
+      "examples": [
+        ":left-label-value=\"model.min + 'px'\""
+      ],
+      "category": "labels"
+    },
+    "right-label-value": {
+      "type": [
+        "String",
+        "Number"
+      ],
+      "desc": "Override default label for max value",
+      "examples": [
+        ":right-label-value=\"model.max + 'px'\""
+      ],
+      "category": "labels"
+    },
+    "left-thumb-color": {
+      "type": "String",
+      "desc": "Color name (from the Quasar Color Palette) for left thumb",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "labels",
+      "addedIn": "v2.4"
+    },
+    "right-thumb-color": {
+      "type": "String",
+      "desc": "Color name (from the Quasar Color Palette) for right thumb",
+      "examples": [
+        "primary",
+        "teal-10"
+      ],
+      "category": "labels",
+      "addedIn": "v2.4"
     }
   },
-  "events": {
-    "update:model-value": {
-      "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
+  "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 thumb)",
+      "desc": "Emitted on lazy model value change (after user slides then releases the thumb)",
       "params": {
         "value": {
           "type": "Any",
@@ -281,6 +760,16 @@
           ]
         }
       }
+    },
+    "update:model-value": {
+      "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
+        }
+      }
     }
   }
 }