quasar 2.4.2 → 2.4.6

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

package/src/components/slider/use-slider.js

@@ -142,7 +142,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
   const positionProp = computed(() => (
     props.vertical === true
       ? (isReversed.value === true ? 'bottom' : 'top')
-      : isReversed.value === true ? 'right' : 'left'
+      : (isReversed.value === true ? 'right' : 'left')
   ))
 
   const sizeProp = computed(() => (props.vertical === true ? 'height' : 'width'))
@@ -152,8 +152,8 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
   const attributes = computed(() => {
     const acc = {
       role: 'slider',
-      'aria-valuemin': props.min,
-      'aria-valuemax': props.max,
+      'aria-valuemin': innerMin.value,
+      'aria-valuemax': innerMax.value,
       'aria-orientation': orientation.value,
       'data-step': props.step
     }
@@ -344,15 +344,19 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       })
     }
 
+    const filterFn = ({ value }) => value >= props.min && value <= props.max
+
     if (Array.isArray(def) === true) {
-      return def.map(item => (Object(item) === item ? item : { value: item }))
+      return def
+        .map(item => (Object(item) === item ? item : { value: item }))
+        .filter(filterFn)
     }
 
     return Object.keys(def).map(key => {
       const item = def[ key ]
       const value = Number(key)
       return Object(item) === item ? { ...item, value } : { value, label: item }
-    })
+    }).filter(filterFn)
   }
 
   function getMarkerLabelStyle (val) {
@@ -407,6 +411,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
         emit('pan', 'end')
       }
       active.value = false
+      focus.value = false
     }
     else if (event.isFirst === true) {
       dragging.value = getDragging(event.evt)
@@ -467,7 +472,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
 
   function getThumbRenderFn (thumb) {
     const focusClass = computed(() => (
-      preventFocus.value === false && focus.value === thumb.focusValue
+      preventFocus.value === false && (focus.value === thumb.focusValue || focus.value === 'both')
         ? ' q-slider--focus'
         : ''
     ))
@@ -482,9 +487,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       width: props.thumbSize,
       height: props.thumbSize,
       [ positionProp.value ]: `${ 100 * thumb.ratio.value }%`,
-      'z-index': thumb.nextFocus !== void 0
-        ? thumb.nextFocus.value === 'min' ? 2 : void 0
-        : void 0
+      zIndex: focus.value === thumb.focusValue ? 2 : void 0
     }))
 
     const pinColor = computed(() => (
@@ -540,12 +543,12 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       return h('div', {
         class: classes.value,
         style: style.value,
-        ...(thumb.getNodeData !== void 0 ? thumb.getNodeData() : {})
+        ...thumb.getNodeData()
       }, thumbContent)
     }
   }
 
-  function getContent (selectionBarStyle, events, injectThumb) {
+  function getContent (selectionBarStyle, trackContainerTabindex, trackContainerEvents, injectThumb) {
     const trackContent = []
 
     props.innerTrackColor !== 'transparent' && trackContent.push(
@@ -580,15 +583,14 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
         {
           key: 'trackC',
           class: trackContainerClass.value,
-          tabindex: tabindex.value,
-          ...events.value
+          tabindex: trackContainerTabindex.value,
+          ...trackContainerEvents.value
         },
         [
           h('div', {
             class: trackClass.value,
             style: trackStyle.value
-          },
-          trackContent)
+          }, trackContent)
         ],
         'slide',
         editable.value, () => panDirective.value
@@ -635,7 +637,8 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       innerMax,
       innerMaxRatio,
       positionProp,
-      sizeProp
+      sizeProp,
+      isReversed
     },
 
     methods: {