quasar 1.16.3 → 1.17.0

package/src/components/range/QRange.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "mixins/form" ],
+  "mixins": [ "components/slider/slider-utils" ],
 
   "meta": {
     "docsUrl": "https://v1.quasar.dev/vue-components/range"
@@ -25,44 +25,6 @@
       "category": "model"
     },
 
-    "min": {
-      "type": "Number",
-      "desc": "Minimum value of the model",
-      "default": 0,
-      "examples": [ ":min=\"0\"" ],
-      "category": "model"
-    },
-
-    "max": {
-      "type": "Number",
-      "desc": "Maximum value of the model",
-      "default": 100,
-      "examples": [ ":max=\"100\"" ],
-      "category": "model"
-    },
-
-    "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"
-    },
-
-    "reverse": {
-      "type": "Boolean",
-      "desc": "Work in reverse (changes direction)",
-      "category": "behavior",
-      "addedIn": "v1.5.0"
-    },
-
-    "vertical": {
-      "type": "Boolean",
-      "desc": "Display in vertical direction",
-      "category": "behavior",
-      "addedIn": "v1.10.0"
-    },
-
     "drag-range": {
       "type": "Boolean",
       "desc": "User can drag range instead of just the two thumbs",
@@ -75,29 +37,6 @@
       "category": "content"
     },
 
-    "color": {
-      "extends": "color"
-    },
-
-    "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": {
-      "extends": "color",
-      "desc": "Color name for labels background from the Quasar Color Palette; Applies to both labels, unless specific label color props are used",
-      "category": "labels"
-    },
-
-    "label-text-color": {
-      "extends": "color",
-      "desc": "Color name for labels text from the Quasar Color Palette; Applies to both labels, unless specific label text color props are used",
-      "category": "labels",
-      "addedIn": "v1.1.0"
-    },
-
     "left-label-color": {
       "extends": "color",
       "desc": "Color name for left label background from the Quasar Color Palette",
@@ -142,74 +81,24 @@
       "category": "labels"
     },
 
-    "label-always": {
-      "type": "Boolean",
-      "desc": "Always display the labels",
-      "category": "labels"
-    },
-
-    "markers": {
-      "type": "Boolean",
-      "desc": "Display markers on the track, one for each possible value for the model",
-      "category": "content"
-    },
-
-    "snap": {
-      "type": "Boolean",
-      "desc": "Snap thumbs on valid values, rather than sliding freely; Suggestion: use with 'step' prop",
-      "category": "content"
-    },
-
-    "thumb-path": {
-      "type": "String",
-      "desc": "Set custom thumbs 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",
-      "addedIn": "v1.5.10"
-    },
-
-    "dark": {
-      "extends": "dark"
-    },
-
-    "dense": {
-      "extends": "dense"
-    },
-
-    "disable": {
-      "extends": "disable"
-    },
-
-    "readonly": {
-      "extends": "readonly"
+    "left-thumb-color": {
+      "extends": "color",
+      "desc": "Color name (from the Quasar Color Palette) for left thumb",
+      "category": "labels",
+      "addedIn": "v1.17"
     },
 
-    "tabindex": {
-      "extends": "tabindex"
+    "right-thumb-color": {
+      "extends": "color",
+      "desc": "Color name (from the Quasar Color Palette) for right thumb",
+      "category": "labels",
+      "addedIn": "v1.17"
     }
   },
 
   "events": {
     "input": {
       "extends": "input"
-    },
-
-    "change": {
-      "extends": "input",
-      "desc": "Emitted on lazy model value change (after user slides then releases thumb)"
-    },
-
-    "pan": {
-      "desc": "Triggered when user starts panning on the component",
-      "params": {
-        "phase": {
-          "type": "String",
-          "desc": "Phase of panning",
-          "values": [ "start", "end" ]
-        }
-      },
-      "addedIn": "v1.14.0"
     }
   }
 }

package/src/components/rating/QRating.js

@@ -9,7 +9,7 @@ import FormMixin from '../../mixins/form.js'
 import ListenersMixin from '../../mixins/listeners.js'
 
 import cache from '../../utils/cache.js'
-import { slot } from '../../utils/slot.js'
+import { mergeSlot } from '../../utils/slot.js'
 
 export default Vue.extend({
   name: 'QRating',
@@ -85,6 +85,51 @@ export default Vue.extend({
       }
     },
 
+    stars () {
+      const
+        acc = [],
+        icons = this.iconData,
+        ceil = Math.ceil(this.value)
+
+      const halfIndex = this.iconHalf === void 0 || ceil === this.value
+        ? -1
+        : ceil
+
+      for (let i = 1; i <= this.max; i++) {
+        const
+          active = (this.mouseModel === 0 && this.value >= i) || (this.mouseModel > 0 && this.mouseModel >= i),
+          half = halfIndex === i && this.mouseModel < i,
+          exSelected = this.mouseModel > 0 && (half === true ? ceil : this.value) >= i && this.mouseModel < i,
+          color = half === true
+            ? (i <= icons.halfColorLen ? this.colorHalf[i - 1] : icons.halfColor)
+            : (
+              icons.selColor !== void 0 && active === true
+                ? (i <= icons.selColorLen ? this.colorSelected[i - 1] : icons.selColor)
+                : (i <= icons.colorLen ? this.color[i - 1] : icons.color)
+            )
+
+        acc.push({
+          name: (
+            half === true
+              ? (i <= icons.halfIconLen ? this.iconHalf[i - 1] : icons.halfIcon)
+              : (
+                icons.selIcon !== void 0 && (active === true || exSelected === true)
+                  ? (i <= icons.selIconLen ? this.iconSelected[i - 1] : icons.selIcon)
+                  : (i <= icons.iconLen ? this.icon[i - 1] : icons.icon)
+              )
+          ) || this.$q.iconSet.rating.icon,
+
+          classes: 'q-rating__icon' +
+            (active === true || half === true ? ' q-rating__icon--active' : '') +
+            (exSelected === true ? ' q-rating__icon--exselected' : '') +
+            (this.mouseModel === i ? ' q-rating__icon--hovered' : '') +
+            (color !== void 0 ? ` text-${color}` : '')
+        })
+      }
+
+      return acc
+    },
+
     attrs () {
       if (this.disable === true) {
         return { 'aria-disabled': 'true' }
@@ -138,46 +183,16 @@ export default Vue.extend({
   render (h) {
     const
       child = [],
-      tabindex = this.editable === true ? 0 : null,
-      icons = this.iconData,
-      ceil = Math.ceil(this.value)
+      tabindex = this.editable === true ? 0 : null
 
-    const halfIndex = this.iconHalf === void 0 || ceil === this.value
-      ? -1
-      : ceil
-
-    for (let i = 1; i <= this.max; i++) {
-      const
-        active = (this.mouseModel === 0 && this.value >= i) || (this.mouseModel > 0 && this.mouseModel >= i),
-        half = halfIndex === i && this.mouseModel < i,
-        exSelected = this.mouseModel > 0 && (half === true ? ceil : this.value) >= i && this.mouseModel < i,
-        name = half === true
-          ? (i <= icons.halfIconLen ? this.iconHalf[i - 1] : icons.halfIcon)
-          : (
-            icons.selIcon !== void 0 && (active === true || exSelected === true)
-              ? (i <= icons.selIconLen ? this.iconSelected[i - 1] : icons.selIcon)
-              : (i <= icons.iconLen ? this.icon[i - 1] : icons.icon)
-          ),
-        color = half === true
-          ? (i <= icons.halfColorLen ? this.colorHalf[i - 1] : icons.halfColor)
-          : (
-            icons.selColor !== void 0 && active === true
-              ? (i <= icons.selColorLen ? this.colorSelected[i - 1] : icons.selColor)
-              : (i <= icons.colorLen ? this.color[i - 1] : icons.color)
-          )
+    this.stars.forEach(({ classes, name }, index) => {
+      const i = index + 1
 
       child.push(
-        h(QIcon, {
+        h('div', {
           key: i,
           ref: `rt${i}`,
-          staticClass: 'q-rating__icon',
-          class: {
-            'q-rating__icon--active': active === true || half === true,
-            'q-rating__icon--exselected': exSelected,
-            'q-rating__icon--hovered': this.mouseModel === i,
-            [`text-${color}`]: color !== void 0
-          },
-          props: { name: name || this.$q.iconSet.rating.icon },
+          class: 'q-rating__icon-container flex flex-center',
           attrs: { tabindex },
           on: cache(this, 'i#' + i, {
             click: () => { this.__set(i) },
@@ -187,9 +202,12 @@ export default Vue.extend({
             blur: () => { this.mouseModel = 0 },
             keyup: e => { this.__keyup(e, i) }
           })
-        }, slot(this, `tip-${i}`))
+        }, mergeSlot(
+          [h(QIcon, { class: classes, props: { name } })],
+          this, `tip-${i}`
+        ))
       )
-    }
+    })
 
     if (this.name !== void 0 && this.disable !== true) {
       this.__injectFormInput(child, 'push')

package/src/components/rating/QRating.json

@@ -31,7 +31,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"
     },
@@ -43,7 +43,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",
       "addedIn": "v1.1.0"
@@ -56,7 +56,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",
       "addedIn": "v1.7.4"

package/src/components/rating/QRating.sass

@@ -2,6 +2,13 @@
   color: $rating-grade-color
   vertical-align: middle
 
+  &__icon-container
+    height: 1em
+    outline: 0
+
+    & + &
+      margin-left: 2px
+
   &__icon
     color: currentColor
     text-shadow: $rating-shadow
@@ -17,13 +24,8 @@
     &--exselected
       opacity: .7
 
-    & + &
-      margin-left: 2px
-
   &--no-dimming .q-rating__icon
     opacity: 1
 
-  &--editable .q-icon
+  &--editable .q-rating__icon-container
     cursor: pointer
-  &--non-editable span, .q-icon
-    outline: 0

package/src/components/rating/QRating.styl

@@ -2,6 +2,13 @@
   color: $rating-grade-color
   vertical-align: middle
 
+  &__icon-container
+    height: 1em
+    outline: 0
+
+    & + &
+      margin-left: 2px
+
   &__icon
     color: currentColor
     text-shadow: $rating-shadow
@@ -17,13 +24,8 @@
     &--exselected
       opacity: .7
 
-    & + &
-      margin-left: 2px
-
   &--no-dimming .q-rating__icon
     opacity: 1
 
-  &--editable .q-icon
+  &--editable .q-rating__icon-container
     cursor: pointer
-  &--non-editable span, .q-icon
-    outline: 0

package/src/components/resize-observer/QResizeObserver.js

@@ -24,17 +24,20 @@ export default Vue.extend({
   },
 
   methods: {
-    trigger (now) {
-      if (now === true || this.debounce === 0 || this.debounce === '0') {
-        this.__onResize()
+    trigger (immediately) {
+      if (immediately === true || this.debounce === 0 || this.debounce === '0') {
+        this.__emit()
       }
-      else if (!this.timer) {
-        this.timer = setTimeout(this.__onResize, this.debounce)
+      else if (this.timer === null) {
+        this.timer = setTimeout(this.__emit, this.debounce)
       }
     },
 
-    __onResize () {
-      this.timer = null
+    __emit () {
+      if (this.timer !== null) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
 
       if (!this.$el || !this.$el.parentNode) {
         return
@@ -73,7 +76,7 @@ export default Vue.extend({
         this.curDocView.addEventListener('resize', this.trigger, listenOpts.passive)
       }
 
-      this.__onResize()
+      this.__emit()
     }
   },
 
@@ -108,16 +111,18 @@ export default Vue.extend({
   },
 
   mounted () {
+    this.timer = null
+
     if (this.hasObserver === true) {
       this.observer = new ResizeObserver(this.trigger)
       this.observer.observe(this.$el.parentNode)
-      this.__onResize()
+      this.__emit()
       return
     }
 
     if (this.$q.platform.is.ie === true) {
       this.url = 'about:blank'
-      this.__onResize()
+      this.__emit()
     }
     else {
       this.__onObjLoad()