quasar 2.3.3 → 2.4.2

package/src/components/fab/QFab.json

@@ -3,8 +3,10 @@
 
   "props": {
     "model-value": {
+      "extends": "model-value",
       "desc": "Controls state of fab actions (showing/hidden); Works best with v-model directive, otherwise use along listening to 'update:modelValue' event",
-      "category": "model"
+      "category": "model",
+      "required": false
     },
 
     "icon": {
@@ -52,6 +54,39 @@
 
     "tooltip": {
       "desc": "Slot specifically designed for a QTooltip"
+    },
+
+    "icon": {
+      "desc": "Slot for icon shown when FAB is closed; Suggestion: QIcon",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      },
+      "addedIn": "v2.4"
+    },
+
+    "active-icon": {
+      "desc": "Slot for icon shown when FAB is opened; Suggestion: QIcon",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      },
+      "addedIn": "v2.4"
+    },
+
+    "label": {
+      "desc": "Slot for label",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      },
+      "addedIn": "v2.4"
     }
   },
 

package/src/components/fab/QFab.sass

@@ -134,7 +134,7 @@
     &--up, &--down
       left: 50%
       margin-left: -28px
-    
+
     &--opened
       opacity: 1
       transform: scale(1) translate(0, 0)

package/src/components/fab/QFabAction.js

@@ -66,13 +66,20 @@ export default createComponent({
     function getContent () {
       const child = []
 
-      props.icon !== '' && child.push(
-        h(QIcon, { name: props.icon })
-      )
-
-      props.label !== '' && child[ labelProps.value.action ](
-        h('div', labelProps.value.data, [ props.label ])
-      )
+      if (slots.icon !== void 0) {
+        child.push(slots.icon())
+      }
+      else if (props.icon !== '') {
+        child.push(
+          h(QIcon, { name: props.icon })
+        )
+      }
+
+      if (props.label !== '' || slots.label !== void 0) {
+        child[ labelProps.value.action ](
+          h('div', labelProps.value.data, slots.label !== void 0 ? slots.label() : [ props.label ])
+        )
+      }
 
       return hMergeSlot(slots.default, child)
     }

package/src/components/fab/QFabAction.json

@@ -35,6 +35,16 @@
   "slots": {
     "default": {
       "desc": "Suggestion for this slot: QTooltip"
+    },
+
+    "icon": {
+      "desc": "Slot for icon; Suggestion: QIcon",
+      "addedIn": "v2.4"
+    },
+
+    "label": {
+      "desc": "Slot for label",
+      "addedIn": "v2.4"
     }
   },
 

package/src/components/file/QFile.js

@@ -9,6 +9,7 @@ import useFileFormDomProps from '../../composables/private/use-file-dom-props.js
 
 import { createComponent } from '../../utils/private/create.js'
 import { humanStorageSize } from '../../utils/format.js'
+import { prevent } from '../../utils/event.js'
 
 export default createComponent({
   name: 'QFile',
@@ -122,9 +123,16 @@ export default createComponent({
       emit('update:modelValue', props.multiple === true ? files : files[ 0 ])
     }
 
+    function onKeydown (e) {
+      // prevent form submit if ENTER is pressed
+      e.keyCode === 13 && prevent(e)
+    }
+
     function onKeyup (e) {
-      // only on ENTER
-      e.keyCode === 13 && pickFiles(e)
+      // only on ENTER and SPACE to match native input field
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        pickFiles(e)
+      }
     }
 
     function getFileInput () {
@@ -158,8 +166,7 @@ export default createComponent({
       return [
         h('input', {
           class: [ props.inputClass, 'q-file__filler' ],
-          style: props.inputStyle,
-          tabindex: -1
+          style: props.inputStyle
         })
       ]
     }
@@ -256,7 +263,7 @@ export default createComponent({
         }
 
         if (state.editable.value === true) {
-          Object.assign(data, { onDragover, onKeyup })
+          Object.assign(data, { onDragover, onKeydown, onKeyup })
         }
 
         return h('div', data, [ getInput() ].concat(getSelection()))

package/src/components/file/QFile.json

@@ -114,9 +114,9 @@
         },
 
         "ref": {
-          "type": "Object",
-          "desc": "Reference to the QFile component",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QFile",
+          "desc": "Reference to the QFile component"
         }
       }
     },
@@ -131,9 +131,9 @@
         },
 
         "ref": {
-          "type": "Object",
-          "desc": "Reference to the QFile component",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QFile",
+          "desc": "Reference to the QFile component"
         }
       }
     }

package/src/components/file/QFile.sass

@@ -11,8 +11,10 @@
       cursor: pointer
 
   &__filler
-    opacity: 0
-    pointer-events: none
+    visibility: hidden
+    width: 100%
+    border: none
+    padding: 0
 
   &__dnd
     outline: 1px dashed currentColor

package/src/components/footer/QFooter.js

@@ -46,7 +46,7 @@ export default createComponent({
     const fixed = computed(() =>
       props.reveal === true
       || $layout.view.value.indexOf('F') > -1
-      || $layout.isContainer.value === true
+      || ($q.platform.is.ios && $layout.isContainer.value === true)
     )
 
     const containerHeight = computed(() => (

package/src/components/form/QForm.json

@@ -52,9 +52,8 @@
       "desc": "Emitted after a validation was triggered and at least one of the inner Quasar components models are NOT valid",
       "params": {
         "ref": {
-          "type": "Object",
-          "desc": "Vue reference to the first component that triggered the validation error",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "desc": "Vue reference to the first component that triggered the validation error"
         }
       }
     }

package/src/components/header/QHeader.js

@@ -43,7 +43,7 @@ export default createComponent({
     const fixed = computed(() =>
       props.reveal === true
       || $layout.view.value.indexOf('H') > -1
-      || $layout.isContainer.value === true
+      || ($q.platform.is.ios && $layout.isContainer.value === true)
     )
 
     const offset = computed(() => {

package/src/components/icon/QIcon.js

@@ -29,11 +29,11 @@ const matMap = {
 
 const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')')
 const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')')
-const mRE = /^M/
+const mRE = /^[Mm]\s?[-+]?\.?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
-const faLaRE = /^[l|f]a[s|r|l|b|d|k]? /
+const faLaRE = /^[lf]a[srlbdk]? /
 
 export default createComponent({
   name: 'QIcon',

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -60,14 +60,12 @@ export default createComponent({
         containerHeight = height(localScrollTarget)
 
       if (props.reverse === false) {
-        if (scrollPosition + containerHeight + props.offset >= scrollHeight) {
+        if (Math.round(scrollPosition + containerHeight + props.offset) >= Math.round(scrollHeight)) {
           trigger()
         }
       }
-      else {
-        if (scrollPosition < props.offset) {
-          trigger()
-        }
+      else if (Math.round(scrollPosition) <= props.offset) {
+        trigger()
       }
     }
 
@@ -123,6 +121,7 @@ export default createComponent({
         isWorking.value = false
         isFetching.value = false
         localScrollTarget.removeEventListener('scroll', poll, passive)
+        poll !== void 0 && poll.cancel()
       }
     }
 

package/src/components/item/QItem.js

@@ -38,7 +38,7 @@ export default createComponent({
     const { proxy: { $q } } = getCurrentInstance()
 
     const isDark = useDark(props, $q)
-    const { hasLink, linkProps, linkClass, linkTag, navigateToLink } = useRouterLink()
+    const { hasRouterLink, hasLink, linkProps, linkClass, linkTag, navigateToRouterLink } = useRouterLink()
 
     const rootRef = ref(null)
     const blurTargetRef = ref(null)
@@ -46,7 +46,6 @@ export default createComponent({
     const isActionable = computed(() =>
       props.clickable === true
         || hasLink.value === true
-        || props.tag === 'a'
         || props.tag === 'label'
     )
 
@@ -99,7 +98,7 @@ export default createComponent({
           }
         }
 
-        hasLink.value === true && navigateToLink(e)
+        hasRouterLink.value === true && navigateToRouterLink(e)
         emit('click', e)
       }
     }

package/src/components/linear-progress/QLinearProgress.js

@@ -58,6 +58,7 @@ export default createComponent({
     const sizeStyle = useSize(props, defaultSizes)
 
     const motion = computed(() => props.indeterminate === true || props.query === true)
+    const widthReverse = computed(() => props.reverse !== props.query)
     const style = computed(() => ({
       ...(sizeStyle.value !== null ? sizeStyle.value : {}),
       '--q-linear-progress-speed': `${ props.animationSpeed }ms`
@@ -70,7 +71,7 @@ export default createComponent({
       + (props.rounded === true ? ' rounded-borders' : '')
     )
 
-    const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, props.reverse, proxy.$q))
+    const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, widthReverse.value, proxy.$q))
     const trackClass = computed(() =>
       'q-linear-progress__track absolute-full'
       + ` q-linear-progress__track--with${ props.instantFeedback === true ? 'out' : '' }-transition`
@@ -78,7 +79,7 @@ export default createComponent({
       + (props.trackColor !== void 0 ? ` bg-${ props.trackColor }` : '')
     )
 
-    const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, props.reverse, proxy.$q))
+    const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, widthReverse.value, proxy.$q))
     const modelClass = computed(() =>
       'q-linear-progress__model absolute-full'
       + ` q-linear-progress__model--with${ props.instantFeedback === true ? 'out' : '' }-transition`

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

@@ -95,6 +95,9 @@ export default createComponent({
       class: classes.value,
       ...attrs.value
     }, props.options.map((opt, i) => {
+      // TODO: (Qv3) Make the 'opt' a separate property instead of
+      // the whole scope for consistency and flexibility
+      // (e.g. { opt } instead of opt)
       const child = slots[ 'label-' + i ] !== void 0
         ? () => slots[ 'label-' + i ](opt)
         : (

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

@@ -99,9 +99,32 @@
     "label": {
       "desc": "Generic slot for all labels",
       "scope": {
-        "opt": {
+        "...self": {
           "type": "Object",
           "desc": "The corresponding option entry from the 'options' prop",
+          "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\"" ]
+            }
+          },
           "__exemption": [ "examples" ]
         }
       },
@@ -111,9 +134,32 @@
     "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": {
+        "...self": {
           "type": "Object",
           "desc": "The corresponding option entry from the 'options' prop",
+          "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\"" ]
+            }
+          },
           "__exemption": [ "examples" ]
         }
       },

package/src/components/parallax/QParallax.js

@@ -60,8 +60,7 @@ export default createComponent({
 
       if (localScrollTarget === window) {
         containerTop = 0
-        containerHeight = window.innerHeight
-        containerBottom = containerHeight
+        containerBottom = containerHeight = window.innerHeight
       }
       else {
         containerTop = offset(localScrollTarget).top
@@ -103,6 +102,9 @@ export default createComponent({
         localScrollTarget.removeEventListener('scroll', updatePos, passive)
         window.removeEventListener('resize', resizeHandler, passive)
         localScrollTarget = void 0
+        setPos.cancel()
+        update.cancel()
+        resizeHandler.cancel()
       }
     }
 

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

@@ -6,6 +6,7 @@ import QBtn from '../btn/QBtn.js'
 import { createComponent } from '../../utils/private/create.js'
 import clone from '../../utils/clone.js'
 import { isDeepEqual } from '../../utils/private/is.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 export default createComponent({
   name: 'QPopupEdit',
@@ -65,11 +66,7 @@ export default createComponent({
         updatePosition
       }
 
-      Object.defineProperty(acc, 'value', {
-        get: () => currentModel.value,
-        set: val => { currentModel.value = val }
-      })
-
+      injectProp(acc, 'value', () => currentModel.value, val => { currentModel.value = val })
       return acc
     })
 

package/src/components/popup-proxy/QPopupProxy.json

@@ -7,9 +7,10 @@
 
   "props": {
     "model-value": {
+      "extends": "model-value",
       "type": "Boolean",
       "desc": "Defines the state of the component (shown/hidden); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "category": "model"
+      "required": false
     },
 
     "breakpoint": {

package/src/components/radio/QRadio.js

@@ -92,6 +92,7 @@ export default createComponent({
       const prop = { type: 'radio' }
 
       props.name !== void 0 && Object.assign(prop, {
+        '^checked': isTrue.value === true ? 'checked' : void 0,
         name: props.name,
         value: props.val
       })
@@ -99,13 +100,7 @@ export default createComponent({
       return prop
     })
 
-    const formDomProps = computed(() => (
-      props.name !== void 0 && isTrue.value === true
-        ? { checked: true }
-        : {}
-    ))
-
-    const injectFormInput = useFormInject(formAttrs, formDomProps)
+    const injectFormInput = useFormInject(formAttrs)
 
     function onClick (e) {
       if (e !== void 0) {