quasar 2.3.2 → 2.4.1

package/src/components/drawer/QDrawer.js

@@ -330,6 +330,13 @@ export default createComponent({
       ] ]
     })
 
+    function updateBelowBreakpoint () {
+      updateLocal(belowBreakpoint, (
+        props.behavior === 'mobile'
+        || (props.behavior !== 'desktop' && $layout.totalWidth.value <= props.breakpoint)
+      ))
+    }
+
     watch(belowBreakpoint, val => {
       if (val === true) { // from lg to xs
         lastDesktopState = showing.value
@@ -351,13 +358,6 @@ export default createComponent({
       }
     })
 
-    watch($layout.totalWidth, val => {
-      updateLocal(belowBreakpoint, (
-        props.behavior === 'mobile'
-        || (props.behavior !== 'desktop' && val <= props.breakpoint)
-      ))
-    })
-
     watch(() => props.side, (newSide, oldSide) => {
       if ($layout.instances[ oldSide ] === instance) {
         $layout.instances[ oldSide ] = void 0
@@ -371,10 +371,20 @@ export default createComponent({
       $layout[ newSide ].offset = offset.value
     })
 
-    watch(() => props.behavior + props.breakpoint, updateBelowBreakpoint)
+    watch($layout.totalWidth, () => {
+      if ($layout.isContainer.value === true || document.qScrollPrevented !== true) {
+        updateBelowBreakpoint()
+      }
+    })
+
+    watch(
+      () => props.behavior + props.breakpoint,
+      updateBelowBreakpoint
+    )
 
     watch($layout.isContainer, val => {
       showing.value === true && preventBodyScroll(val !== true)
+      val === true && updateBelowBreakpoint()
     })
 
     watch($layout.scrollbarWidth, () => {
@@ -430,13 +440,6 @@ export default createComponent({
       }
     }
 
-    function updateBelowBreakpoint () {
-      updateLocal(belowBreakpoint, (
-        props.behavior === 'mobile'
-        || (props.behavior !== 'desktop' && $layout.totalWidth.value <= props.breakpoint)
-      ))
-    }
-
     function applyBackdrop (x) {
       flagBackdropBg.value = x
     }

package/src/components/editor/QEditor.js

@@ -502,7 +502,7 @@ export default createComponent({
       return h('div', {
         ref: rootRef,
         class: classes.value,
-        style: { height: inFullscreen.value === true ? '100vh' : null },
+        style: { height: inFullscreen.value === true ? '100%' : null },
         ...attributes.value,
         onFocusin,
         onFocusout

package/src/components/editor/QEditor.sass

@@ -6,7 +6,9 @@
   &.disabled
     border-style: dashed
 
-  > div:first-child, &__toolbars-container, &__toolbars-container > div:first-child
+  > div:first-child,
+  &__toolbars-container,
+  &__toolbars-container > div:first-child
     border-top-left-radius: inherit
     border-top-right-radius: inherit
 
@@ -17,14 +19,18 @@
     border-bottom-left-radius: inherit
     border-bottom-right-radius: inherit
     overflow: auto
+    max-width: 100%
+
     pre
       white-space: pre-wrap
+
     hr
       border: 0
       outline: 0
       margin: 1px
       height: 1px
       background: $editor-hr-color
+
     &:empty:not(:focus):before
       content: attr(placeholder)
       opacity: .7
@@ -33,6 +39,9 @@
     border-bottom: 1px solid $editor-border-color
     min-height: 32px
 
+  &__toolbars-container
+    max-width: 100%
+
   .q-btn
     margin: $editor-button-gutter
 

package/src/components/expansion-item/QExpansionItem.js

@@ -96,7 +96,10 @@ export default createComponent({
     })
 
     const hasLink = computed(() =>
-      props.disable !== true && props.to !== void 0 && props.to !== null && props.to !== ''
+      props.disable !== true && (
+        props.href !== void 0
+        || (props.to !== void 0 && props.to !== null && props.to !== '')
+      )
     )
 
     const linkProps = computed(() => {

package/src/components/expansion-item/QExpansionItem.json

@@ -7,8 +7,9 @@
 
   "props": {
     "model-value": {
+      "extends": "model-value",
       "desc": "Model of the component defining 'open' state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "category": "model"
+      "required": false
     },
 
     "icon": {

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

@@ -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/field/QField.json

@@ -30,9 +30,8 @@
           "examples": [ "qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa" ]
         },
         "field": {
-          "type": "Object",
-          "desc": "DOM element of the field",
-          "__exemption": [ "examples" ]
+          "type": "Element",
+          "desc": "DOM element of the field"
         },
         "editable": {
           "type": "Boolean",
@@ -57,6 +56,7 @@
           "params": {
             "value": {
               "type": "Any",
+              "required": true,
               "desc": "Value to be emitted",
               "examples": [ 0, "Changed text" ]
             }

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

@@ -42,16 +42,19 @@
           "definition": {
             "totalSize": {
               "type": "String",
+              "required": true,
               "desc": "The total size of files in human readable format",
               "examples": [ "1.42MB" ]
             },
             "filesNumber": {
               "type": "Number",
+              "required": true,
               "desc": "Number of picked files",
               "examples": [ 5 ]
             },
             "maxFiles": {
               "type": [ "Number", "String" ],
+              "required": true,
               "desc": "Maximum number of files (same as 'max-files' prop, if specified); When 'max-files' is not specified, this has 'void 0' as value",
               "examples": [ 5 ]
             }
@@ -111,9 +114,9 @@
         },
 
         "ref": {
-          "type": "Object",
-          "desc": "Reference to the QFile component",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QFile",
+          "desc": "Reference to the QFile component"
         }
       }
     },
@@ -128,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/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)
         : (