quasar 1.16.0 → 1.17.0

package/src/components/option-group/QOptionGroup.js

@@ -106,27 +106,37 @@ export default Vue.extend({
       class: this.classes,
       attrs: this.attrs,
       on: { ...this.qListeners }
-    }, this.options.map(opt => h('div', [
-      h(this.component, {
-        props: {
-          value: this.value,
-          val: opt.value,
-          name: opt.name === void 0 ? this.name : opt.name,
-          disable: this.disable || opt.disable,
-          label: opt.label,
-          leftLabel: opt.leftLabel === void 0 ? this.leftLabel : opt.leftLabel,
-          color: opt.color === void 0 ? this.color : opt.color,
-          checkedIcon: opt.checkedIcon,
-          uncheckedIcon: opt.uncheckedIcon,
-          dark: opt.dark || this.isDark,
-          size: opt.size === void 0 ? this.size : opt.size,
-          dense: this.dense,
-          keepColor: opt.keepColor === void 0 ? this.keepColor : opt.keepColor
-        },
-        on: cache(this, 'inp', {
-          input: this.__update
-        })
-      })
-    ])))
+    }, this.options.map((opt, i) => {
+      const child = this.$scopedSlots[ 'label-' + i ] !== void 0
+        ? this.$scopedSlots[ 'label-' + i ](opt)
+        : (
+          this.$scopedSlots.label !== void 0
+            ? this.$scopedSlots.label(opt)
+            : void 0
+        )
+
+      return h('div', [
+        h(this.component, {
+          props: {
+            value: this.value,
+            val: opt.value,
+            name: opt.name === void 0 ? this.name : opt.name,
+            disable: this.disable || opt.disable,
+            label: child === void 0 ? opt.label : void 0,
+            leftLabel: opt.leftLabel === void 0 ? this.leftLabel : opt.leftLabel,
+            color: opt.color === void 0 ? this.color : opt.color,
+            checkedIcon: opt.checkedIcon,
+            uncheckedIcon: opt.uncheckedIcon,
+            dark: opt.dark || this.isDark,
+            size: opt.size === void 0 ? this.size : opt.size,
+            dense: this.dense,
+            keepColor: opt.keepColor === void 0 ? this.keepColor : opt.keepColor
+          },
+          on: cache(this, 'inp', {
+            input: this.__update
+          })
+        }, child)
+      ])
+    }))
   }
 })

package/src/components/option-group/QOptionGroup.json

@@ -19,7 +19,30 @@
 
     "options": {
       "type": "Array",
-      "desc": "Array of objects with value and label props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly",
+      "desc": "Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly",
+      "definition": {
+        "label": {
+          "type": "String",
+          "desc": "Label to display along the component",
+          "required": true,
+          "examples": [ "Option 1", "Option 2", "Option 3" ]
+        },
+        "value": {
+          "type": "Any",
+          "desc": "Value of the option that will be used by the component model",
+          "required": true,
+          "examples": [ "op1", "op2", "op3" ]
+        },
+        "disable": {
+          "type": "Boolean",
+          "desc": "If true, the option will be disabled"
+        },
+        "...props": {
+          "type": "Any",
+          "desc": "Any other props from QToggle, QCheckbox, or QRadio",
+          "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ]
+        }
+      },
       "examples": [
         ":options=\"[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3', disable: true } ]\""
       ],
@@ -82,6 +105,32 @@
     }
   },
 
+  "scopedSlots": {
+    "label": {
+      "desc": "Generic slot for all labels",
+      "scope": {
+        "opt": {
+          "type": "Object",
+          "desc": "The corresponding option entry from the 'options' prop",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "addedIn": "v1.17"
+    },
+
+    "label-[name]": {
+      "desc": "Slot to define the specific label for the option at '[name]' where name is a 0-based index; Overrides the generic 'label' slot if used",
+      "scope": {
+        "opt": {
+          "type": "Object",
+          "desc": "The corresponding option entry from the 'options' prop",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "addedIn": "v1.17"
+    }
+  },
+
   "events": {
     "input": {
       "extends": "input"

package/src/components/parallax/QParallax.js

@@ -103,6 +103,9 @@ export default Vue.extend({
     __stop () {
       if (this.working === true) {
         this.working = false
+        this.__setPos.cancel()
+        this.__update.cancel()
+        this.__resizeHandler.cancel()
         this.__scrollTarget.removeEventListener('scroll', this.__updatePos, passive)
         window.removeEventListener('resize', this.__resizeHandler, passive)
         this.__scrollTarget = void 0

package/src/components/parallax/QParallax.json

@@ -13,7 +13,7 @@
       "desc": "Path to image (unless a 'media' slot is used)",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/something.png\"",
+        "(public folder) src=\"img/something.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://some-site.net/some-img.jpg\""

package/src/components/popup-edit/QPopupEdit.js

@@ -49,7 +49,8 @@ export default Vue.extend({
 
   data () {
     return {
-      initialValue: ''
+      modelChanged: false,
+      model: null
     }
   },
 
@@ -59,15 +60,30 @@ export default Vue.extend({
         (this.contentClass !== void 0 ? ` ${this.contentClass}` : '')
     },
 
+    modelValue () {
+      return this.modelChanged === true ? this.model : this.value
+    },
+
+    initialValue () {
+      return this.modelChanged !== true ? this.model : this.value
+    },
+
     defaultSlotScope () {
-      return {
+      const acc = {
         initialValue: this.initialValue,
-        value: this.value,
-        emitValue: this.__emitValue,
+        updatePosition: this.__reposition,
+        emitValue: this.__changeModel,
         validate: this.validate,
         set: this.set,
         cancel: this.cancel
       }
+
+      Object.defineProperty(acc, 'value', {
+        get: () => this.modelValue,
+        set: this.__changeModel
+      })
+
+      return acc
     },
 
     menuProps () {
@@ -81,19 +97,20 @@ export default Vue.extend({
 
   methods: {
     set () {
-      if (this.validate(this.value) !== true) {
+      if (this.validate(this.modelValue) !== true) {
         return
       }
       if (this.__hasChanged() === true) {
-        this.$emit('save', this.value, this.initialValue)
+        this.$emit('save', this.modelValue, this.initialValue)
+        this.modelChanged === true && this.$emit('input', this.modelValue)
       }
       this.__close()
     },
 
     cancel () {
       if (this.__hasChanged() === true) {
-        this.$emit('input', this.initialValue)
-        this.$emit('cancel', this.value, this.initialValue)
+        this.$emit('cancel', this.modelValue, this.initialValue)
+        this.modelChanged !== true && this.$emit('input', this.initialValue)
       }
       this.__close()
     },
@@ -107,12 +124,13 @@ export default Vue.extend({
     },
 
     __hasChanged () {
-      return isDeepEqual(this.value, this.initialValue) === false
+      return isDeepEqual(this.modelValue, this.initialValue) === false
     },
 
-    __emitValue (val) {
+    __changeModel (val) {
       if (this.disable !== true) {
-        this.$emit('input', val)
+        this.model = val
+        this.modelChanged = true
       }
     },
 
@@ -172,32 +190,39 @@ export default Vue.extend({
       on: cache(this, 'menu', {
         'before-show': () => {
           this.validated = false
-          this.initialValue = clone(this.value)
+          this.modelChanged = false
+          this.model = clone(this.value)
           this.watcher = this.$watch('value', this.__reposition)
           this.$emit('before-show')
         },
+
         show: () => {
           this.$emit('show')
         },
+
         'escape-key': this.cancel,
+
         'before-hide': () => {
           this.watcher()
 
           if (this.validated === false && this.__hasChanged() === true) {
-            if (this.autoSave === true && this.validate(this.value) === true) {
-              this.$emit('save', this.value, this.initialValue)
+            if (this.autoSave === true && this.validate(this.model) === true) {
+              this.$emit('save', this.modelValue, this.initialValue)
+              this.modelChanged === true && this.$emit('input', this.modelValue)
             }
             else {
-              this.$emit('cancel', this.value, this.initialValue)
-              this.$emit('input', this.initialValue)
+              this.$emit('cancel', this.modelValue, this.initialValue)
+              this.modelChanged !== true && this.$emit('input', this.initialValue)
             }
           }
 
           this.$emit('before-hide')
         },
+
         hide: () => {
           this.$emit('hide')
         },
+
         keyup: e => {
           isKeyCode(e, 13) === true && this.set()
         }

package/src/components/popup-edit/QPopupEdit.json

@@ -11,13 +11,6 @@
       "category": "model"
     },
 
-    "auto-save": {
-      "type": "Boolean",
-      "desc": "Automatically save the model (if changed) when user clicks/taps outside of the popup; It does not apply to ESC key",
-      "category": "behavior",
-      "addedIn": "v1.9.0"
-    },
-
     "title": {
       "type": "String",
       "desc": "Optional title (unless 'title' slot is used)",
@@ -45,6 +38,13 @@
       "category": "content"
     },
 
+    "auto-save": {
+      "type": "Boolean",
+      "desc": "Automatically save the model (if changed) when user clicks/taps outside of the popup; It does not apply to ESC key",
+      "category": "behavior",
+      "addedIn": "v1.9.0"
+    },
+
     "content-class": {
       "type": "String",
       "desc": "Class definitions to be attributed to the content",
@@ -182,7 +182,7 @@
 
   "scopedSlots": {
     "default": {
-      "desc": "Used for injecting the form component",
+      "desc": "Used for injecting the form component; Do NOT destructure it",
       "scope": {
         "initialValue": {
           "type": "Any",
@@ -232,6 +232,13 @@
           "desc": "Function that cancels the editing and reverts the value to the initialValue",
           "params": null,
           "returns": null
+        },
+        "updatePosition": {
+          "type": "Function",
+          "desc": "There are some custom scenarios for which Quasar cannot automatically reposition the component without significant performance drawbacks so the optimal solution is for you to call this method when you need it",
+          "params": null,
+          "returns": null,
+          "addedIn": "v1.17"
         }
       }
     }