quasar 2.3.1 → 2.4.0

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]? /
+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/layout/QLayout.json

@@ -37,11 +37,13 @@
           "definition": {
             "height": {
               "type": "Number",
+              "required": true,
               "desc": "Layout height",
               "examples": [ 575 ]
             },
             "width": {
               "type": "Number",
+              "required": true,
               "desc": "Layout height",
               "examples": [ 575 ]
             }
@@ -59,27 +61,32 @@
           "definition": {
             "position": {
               "type": "Number",
+              "required": true,
               "desc": "Scroll offset from top (vertical)",
               "examples": [ 120 ]
             },
 
             "direction": {
               "type": "String",
+              "required": true,
               "desc": "Direction of scroll",
               "values": [ "up", "down" ]
             },
             "directionChanged": {
               "type": "Boolean",
+              "required": true,
               "desc": "Has scroll direction changed since event was last emitted?"
             },
             "delta": {
               "type": "Number",
+              "required": true,
               "desc": "Vertical delta distance since event was last emitted",
               "examples": [ 120 ]
             },
 
             "inflectionPoint": {
               "type": "Number",
+              "required": true,
               "desc": "Scroll offset from top (vertical)",
               "examples": [ 120 ]
             }
@@ -94,7 +101,7 @@
         "height": {
           "type": "Number",
           "desc": "New scroll height of layout",
-          "examples": [1442]
+          "examples": [ 1442 ]
         }
       }
     }

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/linear-progress/QLinearProgress.sass

@@ -51,7 +51,7 @@
       background: rgba(255,255,255,.6)
 
   &__stripe
-    transition: width .3s
+    transition: width var(--q-linear-progress-speed)
     background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0)) !important
     background-size: 40px 40px !important
 

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/pagination/QPagination.json

@@ -22,7 +22,6 @@
     "max": {
       "type": "Number",
       "desc": "Number of last page (must be higher than 'min')",
-      "default": 100,
       "required": true,
       "examples": [ 10 ],
       "category": "model"

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-edit/QPopupEdit.json

@@ -173,6 +173,7 @@
           "params": {
             "value": {
               "type": "Any",
+              "required": true,
               "desc": "Value to be checked",
               "examples": [ 0, "Changed text" ]
             }

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) {