quasar 2.3.4 → 2.4.3

package/src/components/fab/QFab.js

@@ -59,6 +59,8 @@ export default createComponent({
       hideOnRouteChange
     })
 
+    const slotScope = computed(() => ({ opened: showing.value }))
+
     const classes = computed(() =>
       'q-fab z-fab row inline justify-center'
       + ` q-fab--align-${ props.verticalActionsAlign } ${ formClass.value }`
@@ -76,26 +78,30 @@ export default createComponent({
       + ` q-fab__icon-holder--${ showing.value === true ? 'opened' : 'closed' }`
     )
 
+    function getIcon (kebab, camel) {
+      const slotFn = slots[ kebab ]
+      const classes = `q-fab__${ kebab } absolute-full`
+
+      return slotFn === void 0
+        ? h(QIcon, { class: classes, name: props[ kebab ] || $q.iconSet.fab[ camel ] })
+        : h('div', { class: classes }, slotFn(slotScope.value))
+    }
+
     function getTriggerContent () {
       const child = []
 
       props.hideIcon !== true && child.push(
         h('div', { class: iconHolderClass.value }, [
-          h(QIcon, {
-            class: 'q-fab__icon absolute-full',
-            name: props.icon || $q.iconSet.fab.icon
-          }),
-
-          h(QIcon, {
-            class: 'q-fab__active-icon absolute-full',
-            name: props.activeIcon || $q.iconSet.fab.activeIcon
-          })
+          getIcon('icon', 'icon'),
+          getIcon('active-icon', 'activeIcon')
         ])
       )
 
-      props.label !== '' && child[ labelProps.value.action ](
-        h('div', labelProps.value.data, [ props.label ])
-      )
+      if (props.label !== '' || slots.label !== void 0) {
+        child[ labelProps.value.action ](
+          h('div', labelProps.value.data, slots.label !== void 0 ? slots.label(slotScope.value) : [ props.label ])
+        )
+      }
 
       return hMergeSlot(slots.tooltip, child)
     }

package/src/components/fab/QFab.json

@@ -54,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.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/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,7 +29,7 @@ const matMap = {
 
 const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')')
 const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')')
-const mRE = /^[Mm] ?\d/
+const mRE = /^[Mm]\s?[-+]?\.?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/

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.json

@@ -70,7 +70,7 @@
 
     "animation-speed": {
       "extends": "animation-speed",
-      "default": 300,
+      "default": 2100,
       "addedIn": "v2.3"
     }
   },

package/src/components/menu/QMenu.js

@@ -98,7 +98,7 @@ export default createComponent({
     )
 
     const isDark = useDark(props, $q)
-    const { registerTick, removeTick, prepareTick } = useTick()
+    const { registerTick, removeTick } = useTick()
     const { registerTimeout, removeTimeout } = useTimeout()
     const { transition, transitionStyle } = useTransition(props, showing)
     const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget)
@@ -225,7 +225,6 @@ export default createComponent({
         updatePosition()
         props.noFocus !== true && focus()
       })
-      prepareTick()
 
       registerTimeout(() => {
         // required in order to avoid the "double-tap needed" issue
@@ -258,6 +257,7 @@ export default createComponent({
         )
       ) {
         refocusTarget.focus()
+        refocusTarget = null
       }
 
       registerTimeout(() => {
@@ -280,6 +280,10 @@ export default createComponent({
         removeClickOutside(clickOutsideProps)
         removeEscapeKey(onEscapeKey)
       }
+
+      if (hiding !== true) {
+        refocusTarget = null
+      }
     }
 
     function configureScrollTarget () {

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