quasar 2.3.4 → 2.4.0

package/src/components/slider/use-slider.json

@@ -0,0 +1,546 @@
+{
+  "mixins": [ "composables/private/use-form" ],
+
+  "props": {
+    "min": {
+      "type": "Number",
+      "desc": "Minimum value of the model; Set track's minimum value",
+      "default": 0,
+      "examples": [ ":min=\"0\"" ],
+      "category": "model"
+    },
+
+    "max": {
+      "type": "Number",
+      "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": "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",
+      "default": 1,
+      "examples": [ ":step=\"1\"" ],
+      "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)",
+      "category": "behavior"
+    },
+
+    "vertical": {
+      "type": "Boolean",
+      "desc": "Display in vertical direction",
+      "category": "behavior"
+    },
+
+    "color": {
+      "extends": "color"
+    },
+
+    "track-color": {
+      "extends": "color",
+      "desc": "Color name for the track (can be 'transparent' too) from the Quasar Color Palette",
+      "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": {
+      "extends": "color",
+      "desc": "Color name for the inner track (can be 'transparent' too) from the Quasar Color Palette",
+      "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": {
+      "extends": "color",
+      "desc": "Color name for the selection bar (can be 'transparent' too) from the Quasar Color Palette",
+      "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",
+      "category": "content"
+    },
+
+    "label-color": {
+      "extends": "color"
+    },
+
+    "label-text-color": {
+      "extends": "color"
+    },
+
+    "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 label",
+      "category": "behavior|content"
+    },
+
+    "markers": {
+      "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\""
+      ]
+    },
+
+    "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",
+          "__exemption": [ "examples" ]
+        },
+        "label": {
+          "type": [ "Number", "String" ],
+          "desc": "Label to use",
+          "__exemption": [ "examples" ]
+        },
+        "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",
+            "__exemption": [ "examples" ]
+          },
+          "label": {
+            "type": [ "Number", "String" ],
+            "desc": "Label to use",
+            "__exemption": [ "examples" ]
+          },
+          "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": "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"
+    },
+
+    "thumb-size": {
+      "type": "String",
+      "desc": "Thumb size (including CSS unit)",
+      "default": "20px",
+      "examples": [ "20px" ],
+      "category": "style",
+      "addedIn": "v2.4"
+    },
+
+    "thumb-color": {
+      "extends": "color",
+      "addedIn": "v2.4"
+    },
+
+    "thumb-path": {
+      "type": "String",
+      "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"
+    },
+
+    "dark": {
+      "extends": "dark"
+    },
+
+    "dense": {
+      "extends": "dense"
+    },
+
+    "disable": {
+      "extends": "disable"
+    },
+
+    "readonly": {
+      "extends": "readonly"
+    },
+
+    "tabindex": {
+      "extends": "tabindex"
+    }
+  },
+
+  "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)",
+              "__exemption": [ "examples" ]
+            },
+            "value": {
+              "type": "Number",
+              "desc": "Equivalent model value for the marker label",
+              "__exemption": [ "examples" ]
+            },
+            "label": {
+              "type": [ "Number", "String" ],
+              "desc": "Configured label for the marker",
+              "__exemption": [ "examples" ]
+            },
+            "classes": {
+              "type": "String",
+              "desc": "Required CSS classes to be applied to the marker element",
+              "__exemption": [ "examples" ]
+            },
+            "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)",
+              "__exemption": [ "examples" ]
+            },
+            "value": {
+              "type": "Number",
+              "desc": "Equivalent model value for the marker label",
+              "__exemption": [ "examples" ]
+            },
+            "label": {
+              "type": [ "Number", "String" ],
+              "desc": "Configured label for the marker",
+              "__exemption": [ "examples" ]
+            },
+            "classes": {
+              "type": "String",
+              "desc": "Required CSS classes to be applied to the marker element",
+              "__exemption": [ "examples" ]
+            },
+            "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)",
+                  "__exemption": [ "examples" ]
+                },
+                "value": {
+                  "type": "Number",
+                  "desc": "Equivalent model value for the marker label",
+                  "__exemption": [ "examples" ]
+                },
+                "label": {
+                  "type": [ "Number", "String" ],
+                  "desc": "Configured label for the marker",
+                  "__exemption": [ "examples" ]
+                },
+                "classes": {
+                  "type": "String",
+                  "desc": "Required CSS classes to be applied to the marker element",
+                  "__exemption": [ "examples" ]
+                },
+                "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",
+          "__exemption": [ "examples" ]
+        },
+
+        "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",
+            "__exemption": [ "examples" ]
+          },
+          "__exemption": [ "examples" ]
+        }
+      }
+    },
+
+    "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)",
+              "__exemption": [ "examples" ]
+            },
+            "value": {
+              "type": "Number",
+              "desc": "Equivalent model value for the marker label",
+              "__exemption": [ "examples" ]
+            },
+            "label": {
+              "type": [ "Number", "String" ],
+              "desc": "Configured label for the marker",
+              "__exemption": [ "examples" ]
+            },
+            "classes": {
+              "type": "String",
+              "desc": "Required CSS classes to be applied to the marker element",
+              "__exemption": [ "examples" ]
+            },
+            "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)",
+                  "__exemption": [ "examples" ]
+                },
+                "value": {
+                  "type": "Number",
+                  "desc": "Equivalent model value for the marker label",
+                  "__exemption": [ "examples" ]
+                },
+                "label": {
+                  "type": [ "Number", "String" ],
+                  "desc": "Configured label for the marker",
+                  "__exemption": [ "examples" ]
+                },
+                "classes": {
+                  "type": "String",
+                  "desc": "Required CSS classes to be applied to the marker element",
+                  "__exemption": [ "examples" ]
+                },
+                "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",
+          "__exemption": [ "examples" ]
+        },
+
+        "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",
+            "__exemption": [ "examples" ]
+          },
+          "__exemption": [ "examples" ]
+        }
+      }
+    }
+  },
+
+  "events": {
+    "change": {
+      "extends": "update:model-value",
+      "desc": "Emitted on lazy model value change (after user slides then releases the thumb)"
+    },
+
+    "pan": {
+      "desc": "Triggered when user starts panning on the component",
+      "params": {
+        "phase": {
+          "type": "String",
+          "desc": "Phase of panning",
+          "values": [ "start", "end" ]
+        }
+      }
+    }
+  }
+}

package/src/components/stepper/QStepper.js

@@ -13,10 +13,10 @@ const camelRE = /(-\w)/g
 
 function camelizeProps (props) {
   const acc = {}
-  Object.keys(props).forEach(key => {
+  for (const key in props) {
     const newKey = key.replace(camelRE, m => m[ 1 ].toUpperCase())
     acc[ newKey ] = props[ key ]
-  })
+  }
   return acc
 }
 
@@ -68,7 +68,6 @@ export default createComponent({
       `q-stepper q-stepper--${ props.vertical === true ? 'vertical' : 'horizontal' }`
       + (props.flat === true || isDark.value === true ? ' q-stepper--flat no-shadow' : '')
       + (props.bordered === true || (isDark.value === true && props.flat === false) ? ' q-stepper--bordered' : '')
-      + (props.contracted === true ? ' q-stepper--contracted' : '')
       + (isDark.value === true ? ' q-stepper--dark q-dark' : '')
     )
 
@@ -76,6 +75,7 @@ export default createComponent({
       'q-stepper__header row items-stretch justify-between'
       + ` q-stepper__header--${ props.alternativeLabels === true ? 'alternative' : 'standard' }-labels`
       + (props.flat === false || props.bordered === true ? ' q-stepper__header--border' : '')
+      + (props.contracted === true ? ' q-stepper__header--contracted' : '')
       + (props.headerClass !== void 0 ? ` ${ props.headerClass }` : '')
     )
 

package/src/components/stepper/QStepper.sass

@@ -87,6 +87,30 @@
         text-align: center
         &:before, &:after
           display: none
+    &--contracted
+      min-height: 72px
+      &.q-stepper__header--alternative-labels
+        .q-stepper__tab
+          min-height: 72px
+          &:first-child
+            align-items: flex-start
+          &:last-child
+            align-items: flex-end
+      .q-stepper__tab
+        padding: 24px 0
+        &:first-child
+          .q-stepper__dot
+            transform: translateX(24px)
+        &:last-child
+          .q-stepper__dot
+            transform: translateX(-24px)
+      .q-stepper__tab:not(:last-child)
+        .q-stepper__dot:after
+          display: block !important
+      .q-stepper__dot
+        margin: 0
+      .q-stepper__label
+        display: none
 
   &__nav
     padding-top: 24px
@@ -182,29 +206,3 @@
           background: $separator-dark-color
         .q-stepper__label
           color: rgba(255,255,255,.54)
-
-  &--contracted
-    .q-stepper__header
-      min-height: 72px
-      &--alternative-labels
-        .q-stepper__tab
-          min-height: 72px
-          &:first-child
-            align-items: flex-start
-          &:last-child
-            align-items: flex-end
-      .q-stepper__tab
-        padding: 24px 0
-        &:first-child
-          .q-stepper__dot
-            transform: translateX(24px)
-        &:last-child
-          .q-stepper__dot
-            transform: translateX(-24px)
-    .q-stepper__tab:not(:last-child)
-      .q-stepper__dot:after
-        display: block !important
-    .q-stepper__dot
-      margin: 0
-    .q-stepper__label
-      display: none