quasar 2.3.4 → 2.4.3

package/src/components/range/QRange.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-form" ],
+  "mixins": [ "components/slider/use-slider" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/range"
@@ -25,42 +25,6 @@
       "examples": [ "v-model=\"positionModel\"" ]
     },
 
-    "min": {
-      "type": "Number",
-      "desc": "Minimum value of the model",
-      "default": 0,
-      "examples": [ ":min=\"0\"" ],
-      "category": "model"
-    },
-
-    "max": {
-      "type": "Number",
-      "desc": "Maximum value of the model",
-      "default": 100,
-      "examples": [ ":max=\"100\"" ],
-      "category": "model"
-    },
-
-    "step": {
-      "type": "Number",
-      "desc": "Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity",
-      "default": 1,
-      "examples": [ ":step=\"1\"" ],
-      "category": "model"
-    },
-
-    "reverse": {
-      "type": "Boolean",
-      "desc": "Work in reverse (changes direction)",
-      "category": "behavior"
-    },
-
-    "vertical": {
-      "type": "Boolean",
-      "desc": "Display in vertical direction",
-      "category": "behavior"
-    },
-
     "drag-range": {
       "type": "Boolean",
       "desc": "User can drag range instead of just the two thumbs",
@@ -73,28 +37,6 @@
       "category": "content"
     },
 
-    "color": {
-      "extends": "color"
-    },
-
-    "label": {
-      "type": "Boolean",
-      "desc": "Popup labels (for left and right thumbs) when user clicks/taps on the slider thumb and moves it",
-      "category": "labels"
-    },
-
-    "label-color": {
-      "extends": "color",
-      "desc": "Color name for labels background from the Quasar Color Palette; Applies to both labels, unless specific label color props are used",
-      "category": "labels"
-    },
-
-    "label-text-color": {
-      "extends": "color",
-      "desc": "Color name for labels text from the Quasar Color Palette; Applies to both labels, unless specific label text color props are used",
-      "category": "labels"
-    },
-
     "left-label-color": {
       "extends": "color",
       "desc": "Color name for left label background from the Quasar Color Palette",
@@ -137,76 +79,24 @@
       "category": "labels"
     },
 
-    "label-always": {
-      "type": "Boolean",
-      "desc": "Always display the labels",
-      "category": "labels"
-    },
-
-    "markers": {
-      "type": [ "Boolean", "Number" ],
-      "desc": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)",
-      "category": "content",
-      "examples": [
-        "markers",
-        ":markers=\"5\""
-      ]
-    },
-
-    "snap": {
-      "type": "Boolean",
-      "desc": "Snap thumbs on valid values, rather than sliding freely; Suggestion: use with 'step' prop",
-      "category": "content"
-    },
-
-    "thumb-path": {
-      "type": "String",
-      "desc": "Set custom thumbs svg path",
-      "default": "M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0",
-      "examples": [ "M5 5 h10 v10 h-10 v-10" ],
-      "category": "style"
-    },
-
-    "dark": {
-      "extends": "dark"
-    },
-
-    "dense": {
-      "extends": "dense"
-    },
-
-    "disable": {
-      "extends": "disable"
-    },
-
-    "readonly": {
-      "extends": "readonly"
+    "left-thumb-color": {
+      "extends": "color",
+      "desc": "Color name (from the Quasar Color Palette) for left thumb",
+      "category": "labels",
+      "addedIn": "v2.4"
     },
 
-    "tabindex": {
-      "extends": "tabindex"
+    "right-thumb-color": {
+      "extends": "color",
+      "desc": "Color name (from the Quasar Color Palette) for right thumb",
+      "category": "labels",
+      "addedIn": "v2.4"
     }
   },
 
   "events": {
     "update:model-value": {
       "extends": "update:model-value"
-    },
-
-    "change": {
-      "extends": "update:model-value",
-      "desc": "Emitted on lazy model value change (after user slides then releases thumb)"
-    },
-
-    "pan": {
-      "desc": "Triggered when user starts panning on the component",
-      "params": {
-        "phase": {
-          "type": "String",
-          "desc": "Phase of panning",
-          "values": [ "start", "end" ]
-        }
-      }
     }
   }
 }

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, withDirectives, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
@@ -375,6 +375,8 @@ export default createComponent({
       }
     })
 
+    onBeforeUnmount(emitScroll.cancel)
+
     return () => {
       return h('div', {
         class: classes.value,
@@ -391,6 +393,7 @@ export default createComponent({
             style: mainStyle.value
           }, hMergeSlot(slots.default, [
             h(QResizeObserver, {
+              debounce: 0,
               onResize: updateScrollSize
             })
           ])),
@@ -401,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-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/slider/QSlider.js

@@ -1,26 +1,24 @@
 import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
-import { useFormInject, useFormProps, useFormAttrs } from '../../composables/private/use-form.js'
+import { useFormAttrs } from '../../composables/private/use-form.js'
 
 import useSlider, {
   useSliderProps,
   useSliderEmits,
-  getRatio,
-  getModel,
   keyCodes
 } from './use-slider.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'
 import { stopAndPrevent } from '../../utils/event.js'
-import { hDir } from '../../utils/private/render.js'
+
+const getNodeData = () => ({})
 
 export default createComponent({
   name: 'QSlider',
 
   props: {
     ...useSliderProps,
-    ...useFormProps,
 
     modelValue: {
       required: true,
@@ -36,49 +34,57 @@ export default createComponent({
   setup (props, { emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const formAttrs = useFormAttrs(props)
-    const injectFormInput = useFormInject(formAttrs)
+    const { state, methods } = useSlider({
+      updateValue, updatePosition, getDragging,
+      formAttrs: useFormAttrs(props)
+    })
 
     const rootRef = ref(null)
-    const model = ref(props.modelValue === null ? props.min : props.modelValue)
     const curRatio = ref(0)
+    const model = ref(0)
 
-    const { state, methods } = useSlider({
-      updateValue, updatePosition, getDragging
-    })
+    function normalizeModel () {
+      model.value = props.modelValue === null
+        ? state.innerMin.value
+        : between(props.modelValue, state.innerMin.value, state.innerMax.value)
+    }
+
+    watch(
+      () => `${ props.modelValue }|${ state.innerMin.value }|${ state.innerMax.value }`,
+      normalizeModel
+    )
 
-    const modelRatio = computed(() => (
-      state.minMaxDiff.value === 0 ? 0 : (model.value - props.min) / state.minMaxDiff.value
-    ))
+    normalizeModel()
+
+    const modelRatio = computed(() => methods.convertModelToRatio(model.value))
     const ratio = computed(() => (state.active.value === true ? curRatio.value : modelRatio.value))
 
-    const trackStyle = computed(() => ({
-      [ state.positionProp.value ]: 0,
-      [ state.sizeProp.value ]: `${ 100 * ratio.value }%`
-    }))
-
-    const thumbStyle = computed(() => ({
-      [ state.positionProp.value ]: `${ 100 * ratio.value }%`
-    }))
-
-    const thumbClass = computed(() => (
-      state.preventFocus.value === false && state.focus.value === true
-        ? ' q-slider--focus'
-        : ''
-    ))
-
-    const pinClass = computed(() => (
-      props.labelColor !== void 0
-        ? `text-${ props.labelColor }`
-        : ''
-    ))
-
-    const pinTextClass = computed(() =>
-      'q-slider__pin-value-marker-text'
-      + (props.labelTextColor !== void 0 ? ` text-${ props.labelTextColor }` : '')
-    )
+    const selectionBarStyle = computed(() => {
+      const acc = {
+        [ state.positionProp.value ]: `${ 100 * state.innerMinRatio.value }%`,
+        [ state.sizeProp.value ]: `${ 100 * (ratio.value - state.innerMinRatio.value) }%`
+      }
+      if (props.selectionImg !== void 0) {
+        acc.backgroundImage = `url(${ props.selectionImg }) !important`
+      }
+      return acc
+    })
+
+    const getThumb = methods.getThumbRenderFn({
+      focusValue: true,
+      getNodeData,
+      ratio,
+      label: computed(() => (
+        props.labelValue !== void 0
+          ? props.labelValue
+          : model.value
+      )),
+      thumbColor: computed(() => props.thumbColor || props.color),
+      labelColor: computed(() => props.labelColor),
+      labelTextColor: computed(() => props.labelTextColor)
+    })
 
-    const events = computed(() => {
+    const trackContainerEvents = computed(() => {
       if (state.editable.value !== true) {
         return {}
       }
@@ -94,27 +100,6 @@ export default createComponent({
           }
     })
 
-    const label = computed(() => (
-      props.labelValue !== void 0
-        ? props.labelValue
-        : model.value
-    ))
-
-    const pinStyle = computed(() => {
-      const percent = (props.reverse === true ? -ratio.value : ratio.value - 1)
-      return methods.getPinStyle(percent, ratio.value)
-    })
-
-    watch(() => props.modelValue, v => {
-      model.value = v === null
-        ? 0
-        : between(v, props.min, props.max)
-    })
-
-    watch(() => props.min + props.max, () => {
-      model.value = between(model.value, props.min, props.max)
-    })
-
     function updateValue (change) {
       if (model.value !== props.modelValue) {
         emit('update:modelValue', model.value)
@@ -127,19 +112,13 @@ export default createComponent({
     }
 
     function updatePosition (event, dragging = state.dragging.value) {
-      const ratio = getRatio(
-        event,
-        dragging,
-        state.isReversed.value,
-        props.vertical
-      )
+      const ratio = methods.getDraggingRatio(event, dragging)
+
+      model.value = methods.convertRatioToModel(ratio)
 
-      model.value = getModel(ratio, props.min, props.max, props.step, state.decimals.value)
       curRatio.value = props.snap !== true || props.step === 0
         ? ratio
-        : (
-            state.minMaxDiff.value === 0 ? 0 : (model.value - props.min) / state.minMaxDiff.value
-          )
+        : methods.convertModelToRatio(model.value)
     }
 
     function onFocus () {
@@ -155,86 +134,31 @@ 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)),
-        props.min,
-        props.max
+        state.innerMin.value,
+        state.innerMax.value
       )
 
       updateValue()
     }
 
     return () => {
-      const child = [
-        methods.getThumbSvg(),
-        h('div', { class: 'q-slider__focus-ring' })
-      ]
-
-      if (props.label === true || props.labelAlways === true) {
-        child.push(
-          h('div', {
-            class: `q-slider__pin q-slider__pin${ state.axis.value } absolute ` + pinClass.value,
-            style: pinStyle.value.pin
-          }, [
-            h('div', {
-              class: `q-slider__pin-text-container q-slider__pin-text-container${ state.axis.value }`,
-              style: pinStyle.value.pinTextContainer
-            }, [
-              h('span', {
-                class: 'q-slider__pin-text ' + pinTextClass.value
-              }, [
-                label.value
-              ])
-            ])
-          ]),
-
-          h('div', {
-            class: `q-slider__arrow q-slider__arrow${ state.axis.value } ${ pinClass.value }`
-          })
-        )
-      }
-
-      if (props.name !== void 0 && props.disable !== true) {
-        injectFormInput(child, 'push')
-      }
-
-      const track = [
-        h('div', {
-          class: `q-slider__track q-slider__track${ state.axis.value } absolute`,
-          style: trackStyle.value
-        })
-      ]
-
-      props.markers !== false && track.push(
-        h('div', {
-          class: `q-slider__track-markers q-slider__track-markers${ state.axis.value } absolute-full fit`,
-          style: state.markerStyle.value
-        })
+      const content = methods.getContent(
+        selectionBarStyle,
+        state.tabindex,
+        trackContainerEvents,
+        node => { node.push(getThumb()) }
       )
 
-      const content = [
-        h('div', {
-          class: `q-slider__track-container q-slider__track-container${ state.axis.value } absolute`
-        }, track),
-
-        h('div', {
-          class: `q-slider__thumb-container q-slider__thumb-container${ state.axis.value } absolute non-selectable` + thumbClass.value,
-          style: thumbStyle.value
-        }, child)
-      ]
-
-      const data = {
+      return h('div', {
         ref: rootRef,
         class: state.classes.value + (props.modelValue === null ? ' q-slider--no-value' : ''),
         ...state.attributes.value,
-        'aria-valuenow': props.modelValue,
-        tabindex: state.tabindex.value,
-        ...events.value
-      }
-
-      return hDir('div', data, content, 'slide', state.editable.value, () => state.panDirective.value)
+        'aria-valuenow': props.modelValue
+      }, content)
     }
   }
 })