quasar 2.4.0 → 2.4.4

package/src/components/dialog/QDialog.js

@@ -94,7 +94,7 @@ export default createComponent({
 
     const { preventBodyScroll } = usePreventScroll()
     const { registerTimeout, removeTimeout } = useTimeout()
-    const { registerTick, removeTick, prepareTick } = useTick()
+    const { registerTick, removeTick } = useTick()
 
     const { showPortal, hidePortal, portalIsActive, renderPortal } = usePortal(
       vm, innerRef, renderPortalContent, /* pls do check if on a global dialog */ true
@@ -193,7 +193,6 @@ export default createComponent({
       if (props.noFocus !== true) {
         document.activeElement !== null && document.activeElement.blur()
         registerTick(focus)
-        prepareTick()
       }
 
       registerTimeout(() => {
@@ -239,6 +238,7 @@ export default createComponent({
 
       if (refocusTarget !== null) {
         refocusTarget.focus()
+        refocusTarget = null
       }
 
       registerTimeout(() => {
@@ -306,6 +306,10 @@ export default createComponent({
           removeEscapeKey(onEscapeKey)
         }
       }
+
+      if (hiding !== true) {
+        refocusTarget = null
+      }
     }
 
     function updateMaximized (active) {
@@ -364,9 +368,7 @@ export default createComponent({
       }
     })
 
-    onBeforeUnmount(() => {
-      cleanup()
-    })
+    onBeforeUnmount(cleanup)
 
     function renderPortalContent () {
       return h('div', {

package/src/components/img/QImg.json

@@ -11,7 +11,7 @@
       "desc": "Path to image",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/something.png\"",
+        "(public folder) src=\"img/something.png\"",
         "(assets folder) src=\"~assets/my-img.gif\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://placeimg.com/500/300/nature\""
@@ -44,7 +44,7 @@
       "desc": "While waiting for your image to load, you can use a placeholder image",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/some-placeholder.png\"",
+        "(public folder) src=\"img/some-placeholder.png\"",
         "(assets folder) src=\"~assets/my-placeholder.gif\"",
         "(relative path format) :src=\"require('./placeholder.jpg')\"",
         "(URL) src=\"https://placeimg.com/500/300/nature\""

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/parallax/QParallax.json

@@ -9,7 +9,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/range/QRange.js

@@ -24,13 +24,8 @@ export default createComponent({
 
     modelValue: {
       type: Object,
-      default: () => ({
-        min: null,
-        max: null
-      }),
-      validator (val) {
-        return 'min' in val && 'max' in val
-      }
+      default: () => ({ min: null, max: null }),
+      validator: v => 'min' in v && 'max' in v
     },
 
     dragRange: Boolean,
@@ -65,13 +60,24 @@ export default createComponent({
     const rootRef = ref(null)
     const curMinRatio = ref(0)
     const curMaxRatio = ref(0)
+    const model = ref({ min: 0, max: 0 })
 
-    const model = ref({
-      min: props.modelValue.min === null ? state.innerMin.value : props.modelValue.min,
-      max: props.modelValue.max === null ? state.innerMax.value : props.modelValue.max
-    })
+    function normalizeModel () {
+      model.value.min = props.modelValue.min === null
+        ? state.innerMin.value
+        : between(props.modelValue.min, state.innerMin.value, state.innerMax.value)
 
-    const nextFocus = ref(null)
+      model.value.max = props.modelValue.max === null
+        ? state.innerMax.value
+        : between(props.modelValue.max, state.innerMin.value, state.innerMax.value)
+    }
+
+    watch(
+      () => `${ props.modelValue.min }|${ props.modelValue.max }|${ state.innerMin.value }|${ state.innerMax.value }`,
+      normalizeModel
+    )
+
+    normalizeModel()
 
     const modelMinRatio = computed(() => methods.convertModelToRatio(model.value.min))
     const modelMaxRatio = computed(() => methods.convertModelToRatio(model.value.max))
@@ -94,7 +100,7 @@ export default createComponent({
       return acc
     })
 
-    const events = computed(() => {
+    const trackContainerEvents = computed(() => {
       if (state.editable.value !== true) {
         return {}
       }
@@ -105,34 +111,45 @@ export default createComponent({
 
       const evt = { onMousedown: methods.onActivate }
 
-      props.dragOnlyRange === true && Object.assign(evt, {
-        onFocus: () => { onFocus('both') },
-        onBlur: methods.onBlur,
-        onKeydown,
-        onKeyup: methods.onKeyup
-      })
+      if (props.dragRange === true || props.dragOnlyRange === true) {
+        Object.assign(evt, {
+          onFocus: () => { state.focus.value = 'both' },
+          onBlur: methods.onBlur,
+          onKeydown,
+          onKeyup: methods.onKeyup
+        })
+      }
 
       return evt
     })
 
-    const minThumbRef = ref(null)
-    const minEvents = computed(() => (
-      state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
+    function getEvents (side) {
+      return $q.platform.is.mobile !== true && state.editable.value === true && props.dragOnlyRange !== true
         ? {
-            onFocus: () => { onFocus('min') },
+            onFocus: () => { state.focus.value = side },
             onBlur: methods.onBlur,
             onKeydown,
             onKeyup: methods.onKeyup
           }
         : {}
+    }
+
+    const thumbTabindex = computed(() => (props.dragOnlyRange !== true ? state.tabindex.value : null))
+    const trackContainerTabindex = computed(() => (
+      $q.platform.is.mobile !== true && (props.dragRange || props.dragOnlyRange === true)
+        ? state.tabindex.value
+        : null
     ))
+
+    const minThumbRef = ref(null)
+    const minEvents = computed(() => getEvents('min'))
     const getMinThumb = methods.getThumbRenderFn({
       focusValue: 'min',
-      nextFocus,
       getNodeData: () => ({
         ref: minThumbRef,
+        key: 'tmin',
         ...minEvents.value,
-        tabindex: props.dragOnlyRange !== true ? state.tabindex.value : null
+        tabindex: thumbTabindex.value
       }),
       ratio: ratioMin,
       label: computed(() => (
@@ -145,22 +162,13 @@ export default createComponent({
       labelTextColor: computed(() => props.leftLabelTextColor || props.labelTextColor)
     })
 
-    const maxEvents = computed(() => (
-      state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
-        ? {
-            onFocus: () => { onFocus('max') },
-            onBlur: methods.onBlur,
-            onKeydown,
-            onKeyup: methods.onKeyup
-          }
-        : {}
-    ))
+    const maxEvents = computed(() => getEvents('max'))
     const getMaxThumb = methods.getThumbRenderFn({
       focusValue: 'max',
-      nextFocus,
       getNodeData: () => ({
         ...maxEvents.value,
-        tabindex: props.dragOnlyRange !== true ? state.tabindex.value : null
+        key: 'tmax',
+        tabindex: thumbTabindex.value
       }),
       ratio: ratioMax,
       label: computed(() => (
@@ -173,19 +181,6 @@ export default createComponent({
       labelTextColor: computed(() => props.rightLabelTextColor || props.labelTextColor)
     })
 
-    watch(
-      () => props.modelValue.min + props.modelValue.max + state.innerMin.value + state.innerMax.value,
-      () => {
-        model.value.min = props.modelValue.min === null
-          ? state.innerMin.value
-          : between(props.modelValue.min, state.innerMin.value, state.innerMax.value)
-
-        model.value.max = props.modelValue.max === null
-          ? state.innerMax.value
-          : between(props.modelValue.max, state.innerMin.value, state.innerMax.value)
-      }
-    )
-
     function updateValue (change) {
       if (model.value.min !== props.modelValue.min || model.value.max !== props.modelValue.max) {
         emit('update:modelValue', { ...model.value })
@@ -214,15 +209,14 @@ export default createComponent({
         ratioMax: modelMaxRatio.value
       }
 
-      let type
       const ratio = methods.getDraggingRatio(event, dragging)
 
       if (props.dragOnlyRange !== true && ratio < dragging.ratioMin + sensitivity) {
-        type = dragType.MIN
+        dragging.type = dragType.MIN
       }
       else if (props.dragOnlyRange === true || ratio < dragging.ratioMax - sensitivity) {
         if (props.dragRange === true || props.dragOnlyRange === true) {
-          type = dragType.RANGE
+          dragging.type = dragType.RANGE
           Object.assign(dragging, {
             offsetRatio: ratio,
             offsetModel: methods.convertRatioToModel(ratio),
@@ -231,18 +225,15 @@ export default createComponent({
           })
         }
         else {
-          type = dragging.ratioMax - ratio < ratio - dragging.ratioMin
+          dragging.type = dragging.ratioMax - ratio < ratio - dragging.ratioMin
             ? dragType.MAX
             : dragType.MIN
         }
       }
       else {
-        type = dragType.MAX
+        dragging.type = dragType.MAX
       }
 
-      dragging.type = type
-      nextFocus.value = null
-
       return dragging
     }
 
@@ -260,7 +251,7 @@ export default createComponent({
               min: localModel,
               max: dragging.valueMax
             }
-            nextFocus.value = 'min'
+            state.focus.value = 'min'
           }
           else {
             pos = {
@@ -269,7 +260,7 @@ export default createComponent({
               min: dragging.valueMax,
               max: localModel
             }
-            nextFocus.value = 'max'
+            state.focus.value = 'max'
           }
           break
 
@@ -281,7 +272,7 @@ export default createComponent({
               min: dragging.valueMin,
               max: localModel
             }
-            nextFocus.value = 'max'
+            state.focus.value = 'max'
           }
           else {
             pos = {
@@ -290,7 +281,7 @@ export default createComponent({
               min: localModel,
               max: dragging.valueMin
             }
-            nextFocus.value = 'min'
+            state.focus.value = 'min'
           }
           break
 
@@ -307,34 +298,26 @@ export default createComponent({
             min: parseFloat(min.toFixed(state.decimals.value)),
             max: parseFloat((min + dragging.rangeValue).toFixed(state.decimals.value))
           }
-          break
-      }
 
-      model.value = {
-        min: pos.min,
-        max: pos.max
+          state.focus.value = 'both'
+          break
       }
 
       // If either of the values to be emitted are null, set them to the defaults the user has entered.
-      if (model.value.min === null || model.value.max === null) {
-        model.value.min = pos.min || props.min
-        model.value.max = pos.max || props.max
-      }
+      model.value = model.value.min === null || model.value.max === null
+        ? { min: pos.min || props.min, max: pos.max || props.max }
+        : { min: pos.min, max: pos.max }
 
       if (props.snap !== true || props.step === 0) {
         curMinRatio.value = pos.minR
         curMaxRatio.value = pos.maxR
       }
       else {
-        curMinRatio.value = state.trackLen.value === 0 ? 0 : (model.value.min - props.min) / state.trackLen.value
-        curMaxRatio.value = state.trackLen.value === 0 ? 0 : (model.value.max - props.min) / state.trackLen.value
+        curMinRatio.value = methods.convertModelToRatio(model.value.min)
+        curMaxRatio.value = methods.convertModelToRatio(model.value.max)
       }
     }
 
-    function onFocus (which) {
-      state.focus.value = which
-    }
-
     function onKeydown (evt) {
       if (!keyCodes.includes(evt.keyCode)) {
         return
@@ -343,14 +326,11 @@ export default createComponent({
       stopAndPrevent(evt)
 
       const
-        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * props.step,
-        offset = [ 34, 37, 40 ].includes(evt.keyCode) ? -stepVal : stepVal
-
-      if (props.dragOnlyRange) {
-        const interval = props.dragOnlyRange
-          ? model.value.max - model.value.min
-          : 0
+        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
+        offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * stepVal
 
+      if (state.focus.value === 'both') {
+        const interval = model.value.max - model.value.min
         const min = between(
           parseFloat((model.value.min + offset).toFixed(state.decimals.value)),
           state.innerMin.value,
@@ -384,7 +364,8 @@ export default createComponent({
     return () => {
       const content = methods.getContent(
         selectionBarStyle,
-        events,
+        trackContainerTabindex,
+        trackContainerEvents,
         node => {
           node.push(
             getMinThumb(),
@@ -401,10 +382,7 @@ export default createComponent({
             : ''
         ),
         ...state.attributes.value,
-        'aria-valuenow': props.modelValue.min + '|' + props.modelValue.max,
-        tabindex: props.dragOnlyRange === true && $q.platform.is.mobile !== true
-          ? state.tabindex.value
-          : null
+        'aria-valuenow': props.modelValue.min + '|' + props.modelValue.max
       }, content)
     }
   }

package/src/components/rating/QRating.json

@@ -27,7 +27,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "content"
     },
@@ -39,7 +39,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "content"
     },
@@ -51,7 +51,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "content"
     },

package/src/components/resize-observer/QResizeObserver.js

@@ -28,19 +28,20 @@ export default createComponent({
   setup (props, { emit }) {
     if (__QUASAR_SSR_SERVER__) { return noop }
 
-    let timer, targetEl, size = { width: -1, height: -1 }
+    let timer = null, targetEl, size = { width: -1, height: -1 }
 
-    function trigger (now) {
-      if (now === true || props.debounce === 0 || props.debounce === '0') {
-        onResize()
+    function trigger (immediately) {
+      if (immediately === true || props.debounce === 0 || props.debounce === '0') {
+        emitEvent()
       }
-      else if (!timer) {
-        timer = setTimeout(onResize, props.debounce)
+      else if (timer === null) {
+        timer = setTimeout(emitEvent, props.debounce)
       }
     }
 
-    function onResize () {
-      timer = void 0
+    function emitEvent () {
+      clearTimeout(timer)
+      timer = null
 
       if (targetEl) {
         const { offsetWidth: width, offsetHeight: height } = targetEl
@@ -67,7 +68,7 @@ export default createComponent({
           if (targetEl) {
             observer = new ResizeObserver(trigger)
             observer.observe(targetEl)
-            onResize()
+            emitEvent()
           }
         })
       })
@@ -110,7 +111,7 @@ export default createComponent({
         if (targetEl && targetEl.contentDocument) {
           curDocView = targetEl.contentDocument.defaultView
           curDocView.addEventListener('resize', trigger, listenOpts.passive)
-          onResize()
+          emitEvent()
         }
       }
 

package/src/components/scroll-area/QScrollArea.js

@@ -393,6 +393,7 @@ export default createComponent({
             style: mainStyle.value
           }, hMergeSlot(slots.default, [
             h(QResizeObserver, {
+              debounce: 0,
               onResize: updateScrollSize
             })
           ])),
@@ -403,7 +404,10 @@ export default createComponent({
           })
         ]),
 
-        h(QResizeObserver, { onResize: updateContainer }),
+        h(QResizeObserver, {
+          debounce: 0,
+          onResize: updateContainer
+        }),
 
         h('div', {
           class: scroll.vertical.barClass.value,

package/src/components/scroll-area/QScrollArea.sass

@@ -1,5 +1,6 @@
 .q-scrollarea
   position: relative
+  contain: strict
 
   &__bar,
   &__thumb

package/src/components/scroll-observer/QScrollObserver.js

@@ -55,6 +55,8 @@ export default createComponent({
     })
 
     function emitEvent () {
+      clearTimeout(timer)
+      cancelAnimationFrame(timer)
       timer = null
 
       const top = Math.max(0, getVerticalScrollPosition(localScrollTarget))

package/src/components/select/QSelect.js

@@ -511,7 +511,10 @@ export default createComponent({
 
         targetRef.value !== null && targetRef.value.focus()
 
-        if (isDeepEqual(getOptionValue.value(innerValue.value[ 0 ]), optValue) !== true) {
+        if (
+          innerValue.value.length === 0
+          || isDeepEqual(getOptionValue.value(innerValue.value[ 0 ]), optValue) !== true
+        ) {
           emit('update:modelValue', props.emitValue === true ? optValue : opt)
         }
         return

package/src/components/select/QSelect.json

@@ -228,7 +228,7 @@
       "desc": "Style definitions to be attributed to the popup content",
       "examples": [
         "background-color: #ff0000",
-        ":content-style=\"{ backgroundColor: '#ff0000' }\""
+        ":popup-content-style=\"{ backgroundColor: '#ff0000' }\""
       ],
       "category": "style"
     },

package/src/components/slider/QSlider.js

@@ -12,6 +12,8 @@ import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'
 import { stopAndPrevent } from '../../utils/event.js'
 
+const getNodeData = () => ({})
+
 export default createComponent({
   name: 'QSlider',
 
@@ -39,8 +41,20 @@ export default createComponent({
 
     const rootRef = ref(null)
     const curRatio = ref(0)
+    const model = ref(0)
+
+    function normalizeModel () {
+      model.value = props.modelValue === null
+        ? state.innerMin.value
+        : between(props.modelValue, state.innerMin.value, state.innerMax.value)
+    }
 
-    const model = ref(props.modelValue === null ? state.innerMin.value : props.modelValue)
+    watch(
+      () => `${ props.modelValue }|${ state.innerMin.value }|${ state.innerMax.value }`,
+      normalizeModel
+    )
+
+    normalizeModel()
 
     const modelRatio = computed(() => methods.convertModelToRatio(model.value))
     const ratio = computed(() => (state.active.value === true ? curRatio.value : modelRatio.value))
@@ -58,6 +72,7 @@ export default createComponent({
 
     const getThumb = methods.getThumbRenderFn({
       focusValue: true,
+      getNodeData,
       ratio,
       label: computed(() => (
         props.labelValue !== void 0
@@ -69,7 +84,7 @@ export default createComponent({
       labelTextColor: computed(() => props.labelTextColor)
     })
 
-    const events = computed(() => {
+    const trackContainerEvents = computed(() => {
       if (state.editable.value !== true) {
         return {}
       }
@@ -85,12 +100,6 @@ export default createComponent({
           }
     })
 
-    watch(() => props.modelValue + state.innerMin.value + state.innerMax.value, () => {
-      model.value = props.modelValue === null
-        ? state.innerMin.value
-        : between(props.modelValue, state.innerMin.value, state.innerMax.value)
-    })
-
     function updateValue (change) {
       if (model.value !== props.modelValue) {
         emit('update:modelValue', model.value)
@@ -125,7 +134,7 @@ export default createComponent({
 
       const
         stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
-        offset = [ 34, 37, 40 ].includes(evt.keyCode) ? -stepVal : stepVal
+        offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * stepVal
 
       model.value = between(
         parseFloat((model.value + offset).toFixed(state.decimals.value)),
@@ -139,7 +148,8 @@ export default createComponent({
     return () => {
       const content = methods.getContent(
         selectionBarStyle,
-        events,
+        state.tabindex,
+        trackContainerEvents,
         node => { node.push(getThumb()) }
       )
 

package/src/components/slider/QSlider.sass

@@ -107,6 +107,9 @@
     color: var(--q-primary)
     transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
 
+    &.q-slider--focus
+      opacity: 1 !important
+
     &--h
       top: 50%
       will-change: left
@@ -224,11 +227,7 @@
     .q-slider__thumb,
     .q-slider__inner,
     .q-slider__selection
-      visibility: hidden
-
-  &--focus
-    .q-slider__thumb
-      transform: scale(1)
+      opacity: 0
 
   &--focus,
   body.desktop &.q-slider--editable .q-slider__track-container:hover
@@ -239,7 +238,7 @@
     .q-slider__thumb,
     .q-slider__inner,
     .q-slider__selection
-      visibility: visible
+      opacity: 1
 
   &--inactive
     .q-slider__thumb