quasar 2.19.3 → 2.20.0

package/src/components/range/QRange.js

@@ -1,9 +1,9 @@
-import { h, ref, computed, watch, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, ref, watch } from 'vue'
 
 import useSlider, {
-  useSliderProps,
+  keyCodes,
   useSliderEmits,
-  keyCodes
+  useSliderProps
 } from '../slider/use-slider.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
@@ -102,10 +102,10 @@ export default createComponent({
     )
 
     const ratioMin = computed(() =>
-      state.active.value === true ? curMinRatio.value : modelMinRatio.value
+      state.active.value ? curMinRatio.value : modelMinRatio.value
     )
     const ratioMax = computed(() =>
-      state.active.value === true ? curMaxRatio.value : modelMaxRatio.value
+      state.active.value ? curMaxRatio.value : modelMaxRatio.value
     )
 
     const selectionBarStyle = computed(() => {
@@ -120,17 +120,15 @@ export default createComponent({
     })
 
     const trackContainerEvents = computed(() => {
-      if (state.editable.value !== true) {
-        return {}
-      }
+      if (!state.editable.value) return {}
 
-      if ($q.platform.is.mobile === true) {
+      if ($q.platform.is.mobile) {
         return { onClick: methods.onMobileClick }
       }
 
       const evt = { onMousedown: methods.onActivate }
 
-      if (props.dragRange === true || props.dragOnlyRange === true) {
+      if (props.dragRange || props.dragOnlyRange) {
         Object.assign(evt, {
           onFocus: () => {
             state.focus.value = 'both'
@@ -145,9 +143,9 @@ export default createComponent({
     })
 
     function getEvents(side) {
-      return $q.platform.is.mobile !== true &&
-        state.editable.value === true &&
-        props.dragOnlyRange !== true
+      return !$q.platform.is.mobile &&
+        state.editable.value &&
+        !props.dragOnlyRange
         ? {
             onFocus: () => {
               state.focus.value = side
@@ -160,11 +158,10 @@ export default createComponent({
     }
 
     const thumbTabindex = computed(() =>
-      props.dragOnlyRange !== true ? state.tabindex.value : null
+      props.dragOnlyRange ? null : state.tabindex.value
     )
     const trackContainerTabindex = computed(() =>
-      $q.platform.is.mobile !== true &&
-      (props.dragRange || props.dragOnlyRange === true)
+      !$q.platform.is.mobile && (props.dragRange || props.dragOnlyRange)
         ? state.tabindex.value
         : null
     )
@@ -223,18 +220,17 @@ export default createComponent({
         emit('update:modelValue', { ...model.value })
       }
 
-      if (change === true) emit('change', { ...model.value })
+      if (change) emit('change', { ...model.value })
     }
 
     function getDragging(event) {
       const { left, top, width, height } =
           rootRef.value.getBoundingClientRect(),
-        sensitivity =
-          props.dragOnlyRange === true
-            ? 0
-            : props.vertical === true
-              ? minThumbRef.value.offsetHeight / (2 * height)
-              : minThumbRef.value.offsetWidth / (2 * width)
+        sensitivity = props.dragOnlyRange
+          ? 0
+          : props.vertical
+            ? minThumbRef.value.offsetHeight / (2 * height)
+            : minThumbRef.value.offsetWidth / (2 * width)
 
       const dragging = {
         left,
@@ -249,16 +245,13 @@ export default createComponent({
 
       const ratio = methods.getDraggingRatio(event, dragging)
 
-      if (
-        props.dragOnlyRange !== true &&
-        ratio < dragging.ratioMin + sensitivity
-      ) {
+      if (!props.dragOnlyRange && ratio < dragging.ratioMin + sensitivity) {
         dragging.type = dragType.MIN
       } else if (
-        props.dragOnlyRange === true ||
+        props.dragOnlyRange ||
         ratio < dragging.ratioMax - sensitivity
       ) {
-        if (props.dragRange === true || props.dragOnlyRange === true) {
+        if (props.dragRange || props.dragOnlyRange) {
           dragging.type = dragType.RANGE
           Object.assign(dragging, {
             offsetRatio: ratio,
@@ -285,7 +278,7 @@ export default createComponent({
       const localModel = methods.convertRatioToModel(ratio)
 
       switch (dragging.type) {
-        case dragType.MIN:
+        case dragType.MIN: {
           if (ratio <= dragging.ratioMax) {
             pos = {
               minR: ratio,
@@ -304,8 +297,9 @@ export default createComponent({
             state.focus.value = 'max'
           }
           break
+        }
 
-        case dragType.MAX:
+        case dragType.MAX: {
           if (ratio >= dragging.ratioMin) {
             pos = {
               minR: dragging.ratioMin,
@@ -324,8 +318,9 @@ export default createComponent({
             state.focus.value = 'min'
           }
           break
+        }
 
-        case dragType.RANGE:
+        case dragType.RANGE: {
           const ratioDelta = ratio - dragging.offsetRatio,
             minR = between(
               dragging.ratioMin + ratioDelta,
@@ -348,6 +343,7 @@ export default createComponent({
 
           state.focus.value = 'both'
           break
+        }
       }
 
       // If either of the values to be emitted are null, set them to the defaults the user has entered.
@@ -356,7 +352,7 @@ export default createComponent({
           ? { min: pos.min || props.min, max: pos.max || props.max }
           : { min: pos.min, max: pos.max }
 
-      if (props.snap !== true || props.step === 0) {
+      if (!props.snap || props.step === 0) {
         curMinRatio.value = pos.minR
         curMaxRatio.value = pos.maxR
       } else {
@@ -366,7 +362,7 @@ export default createComponent({
     }
 
     function onKeydown(evt) {
-      if (keyCodes.includes(evt.keyCode) === false) return
+      if (!keyCodes.includes(evt.keyCode)) return
 
       stopAndPrevent(evt)
 
@@ -374,8 +370,8 @@ export default createComponent({
           ([34, 33].includes(evt.keyCode) ? 10 : 1) * state.keyStep.value,
         offset =
           ([34, 37, 40].includes(evt.keyCode) ? -1 : 1) *
-          (state.isReversed.value === true ? -1 : 1) *
-          (props.vertical === true ? -1 : 1) *
+          (state.isReversed.value ? -1 : 1) *
+          (props.vertical ? -1 : 1) *
           stepVal
 
       if (state.focus.value === 'both') {
@@ -390,7 +386,7 @@ export default createComponent({
           min,
           max: state.roundValueFn.value(min + interval)
         }
-      } else if (state.focus.value === false) {
+      } else if (!state.focus.value) {
         return
       } else {
         const which = state.focus.value

package/src/components/rating/QRating.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, onBeforeUpdate, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, onBeforeUpdate, ref } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -6,9 +6,9 @@ import useSize, {
   useSizeProps
 } from '../../composables/private.use-size/use-size.js'
 import {
-  useFormProps,
   useFormAttrs,
-  useFormInject
+  useFormInject,
+  useFormProps
 } from '../../composables/use-form/private.use-form.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
@@ -65,37 +65,32 @@ export default createComponent({
 
     let iconRefs = {}
 
-    const editable = computed(
-      () => props.readonly !== true && props.disable !== true
-    )
+    const editable = computed(() => !props.readonly && !props.disable)
 
     const classes = computed(
       () =>
         'q-rating row inline items-center' +
-        ` q-rating--${editable.value === true ? '' : 'non-'}editable` +
-        (props.noDimming === true ? ' q-rating--no-dimming' : '') +
-        (props.disable === true ? ' disabled' : '') +
-        (props.color !== void 0 && Array.isArray(props.color) === false
+        ` q-rating--${editable.value ? '' : 'non-'}editable` +
+        (props.noDimming ? ' q-rating--no-dimming' : '') +
+        (props.disable ? ' disabled' : '') +
+        (props.color !== void 0 && !Array.isArray(props.color)
           ? ` text-${props.color}`
           : '')
     )
 
     const iconData = computed(() => {
-      const iconLen =
-          Array.isArray(props.icon) === true ? props.icon.length : 0,
-        selIconLen =
-          Array.isArray(props.iconSelected) === true
-            ? props.iconSelected.length
-            : 0,
-        halfIconLen =
-          Array.isArray(props.iconHalf) === true ? props.iconHalf.length : 0,
-        colorLen = Array.isArray(props.color) === true ? props.color.length : 0,
-        selColorLen =
-          Array.isArray(props.colorSelected) === true
-            ? props.colorSelected.length
-            : 0,
-        halfColorLen =
-          Array.isArray(props.colorHalf) === true ? props.colorHalf.length : 0
+      const iconLen = Array.isArray(props.icon) ? props.icon.length : 0,
+        selIconLen = Array.isArray(props.iconSelected)
+          ? props.iconSelected.length
+          : 0,
+        halfIconLen = Array.isArray(props.iconHalf) ? props.iconHalf.length : 0,
+        colorLen = Array.isArray(props.color) ? props.color.length : 0,
+        selColorLen = Array.isArray(props.colorSelected)
+          ? props.colorSelected.length
+          : 0,
+        halfColorLen = Array.isArray(props.colorHalf)
+          ? props.colorHalf.length
+          : 0
 
       return {
         iconLen,
@@ -128,7 +123,7 @@ export default createComponent({
         return i => `${label}${i}`
       }
 
-      if (Array.isArray(props.iconAriaLabel) === true) {
+      if (Array.isArray(props.iconAriaLabel)) {
         const iMax = props.iconAriaLabel.length
 
         if (iMax > 0) {
@@ -143,7 +138,7 @@ export default createComponent({
       const acc = [],
         icons = iconData.value,
         ceil = Math.ceil(props.modelValue),
-        tabindex = editable.value === true ? 0 : null
+        tabindex = editable.value ? 0 : null
 
       const halfIndex =
         props.iconHalf === void 0 || ceil === props.modelValue ? -1 : ceil
@@ -155,27 +150,25 @@ export default createComponent({
           half = halfIndex === i && mouseModel.value < i,
           exSelected =
             mouseModel.value > 0 &&
-            (half === true ? ceil : props.modelValue) >= i &&
+            (half ? ceil : props.modelValue) >= i &&
             mouseModel.value < i,
-          color =
-            half === true
-              ? i <= icons.halfColorLen
-                ? props.colorHalf[i - 1]
-                : icons.halfColor
-              : icons.selColor !== void 0 && active === true
-                ? i <= icons.selColorLen
-                  ? props.colorSelected[i - 1]
-                  : icons.selColor
-                : i <= icons.colorLen
-                  ? props.color[i - 1]
-                  : icons.color,
+          color = half
+            ? i <= icons.halfColorLen
+              ? props.colorHalf[i - 1]
+              : icons.halfColor
+            : icons.selColor !== void 0 && active
+              ? i <= icons.selColorLen
+                ? props.colorSelected[i - 1]
+                : icons.selColor
+              : i <= icons.colorLen
+                ? props.color[i - 1]
+                : icons.color,
           name =
-            (half === true
+            (half
               ? i <= icons.halfIconLen
                 ? props.iconHalf[i - 1]
                 : icons.halfIcon
-              : icons.selIcon !== void 0 &&
-                  (active === true || exSelected === true)
+              : icons.selIcon !== void 0 && (active || exSelected)
                 ? i <= icons.selIconLen
                   ? props.iconSelected[i - 1]
                   : icons.selIcon
@@ -185,12 +178,11 @@ export default createComponent({
 
         acc.push({
           name:
-            (half === true
+            (half
               ? i <= icons.halfIconLen
                 ? props.iconHalf[i - 1]
                 : icons.halfIcon
-              : icons.selIcon !== void 0 &&
-                  (active === true || exSelected === true)
+              : icons.selIcon !== void 0 && (active || exSelected)
                 ? i <= icons.selIconLen
                   ? props.iconSelected[i - 1]
                   : icons.selIcon
@@ -207,10 +199,8 @@ export default createComponent({
 
           iconClass:
             'q-rating__icon' +
-            (active === true || half === true
-              ? ' q-rating__icon--active'
-              : '') +
-            (exSelected === true ? ' q-rating__icon--exselected' : '') +
+            (active || half ? ' q-rating__icon--active' : '') +
+            (exSelected ? ' q-rating__icon--exselected' : '') +
             (mouseModel.value === i ? ' q-rating__icon--hovered' : '') +
             (color !== void 0 ? ` text-${color}` : '')
         })
@@ -222,10 +212,10 @@ export default createComponent({
     const attributes = computed(() => {
       const attrs = { role: 'radiogroup' }
 
-      if (props.disable === true) {
+      if (props.disable) {
         attrs['aria-disabled'] = 'true'
       }
-      if (props.readonly === true) {
+      if (props.readonly) {
         attrs['aria-readonly'] = 'true'
       }
 
@@ -233,10 +223,13 @@ export default createComponent({
     })
 
     function set(value) {
-      if (editable.value === true) {
-        const model = between(parseInt(value, 10), 1, parseInt(props.max, 10)),
-          newVal =
-            props.noReset !== true && props.modelValue === model ? 0 : model
+      if (editable.value) {
+        const model = between(
+            Number.parseInt(value, 10),
+            1,
+            Number.parseInt(props.max, 10)
+          ),
+          newVal = !props.noReset && props.modelValue === model ? 0 : model
 
         if (newVal !== props.modelValue) emit('update:modelValue', newVal)
         mouseModel.value = 0
@@ -244,7 +237,7 @@ export default createComponent({
     }
 
     function setHoverValue(value) {
-      if (editable.value === true) {
+      if (editable.value) {
         mouseModel.value = value
       }
     }
@@ -252,21 +245,26 @@ export default createComponent({
     function onKeyup(e, i) {
       switch (e.keyCode) {
         case 13:
-        case 32:
+        case 32: {
           set(i)
           return stopAndPrevent(e)
+        }
         case 37: // LEFT ARROW
-        case 40: // DOWN ARROW
+        case 40: {
+          // DOWN ARROW
           if (iconRefs[`rt${i - 1}`]) {
             iconRefs[`rt${i - 1}`].focus()
           }
           return stopAndPrevent(e)
+        }
         case 39: // RIGHT ARROW
-        case 38: // UP ARROW
+        case 38: {
+          // UP ARROW
           if (iconRefs[`rt${i + 1}`]) {
             iconRefs[`rt${i + 1}`].focus()
           }
           return stopAndPrevent(e)
+        }
       }
     }
 
@@ -316,7 +314,7 @@ export default createComponent({
         )
       })
 
-      if (props.name !== void 0 && props.disable !== true) {
+      if (props.name !== void 0 && !props.disable) {
         injectFormInput(child, 'push')
       }
 

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

@@ -1,9 +1,9 @@
 import {
+  getCurrentInstance,
   h,
-  onMounted,
+  nextTick,
   onBeforeUnmount,
-  getCurrentInstance,
-  nextTick
+  onMounted
 } from 'vue'
 
 import useHydration from '../../composables/use-hydration/use-hydration.js'
@@ -12,14 +12,13 @@ import { createComponent } from '../../utils/private.create/create.js'
 import { listenOpts, noop } from '../../utils/event/event.js'
 
 const hasObserver = typeof ResizeObserver !== 'undefined'
-const resizeProps =
-  hasObserver === true
-    ? {}
-    : {
-        style:
-          'display:block;position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1;',
-        url: 'about:blank'
-      }
+const resizeProps = hasObserver
+  ? {}
+  : {
+      style:
+        'display:block;position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1;',
+      url: 'about:blank'
+    }
 
 export default createComponent({
   name: 'QResizeObserver',
@@ -34,9 +33,7 @@ export default createComponent({
   emits: ['resize'],
 
   setup(props, { emit }) {
-    if (__QUASAR_SSR_SERVER__) {
-      return noop
-    }
+    if (__QUASAR_SSR_SERVER__) return noop
 
     let timer = null,
       targetEl,
@@ -75,7 +72,7 @@ export default createComponent({
     // expose public method
     proxy.trigger = trigger
 
-    if (hasObserver === true) {
+    if (hasObserver) {
       let observer
 
       // initialize as soon as possible
@@ -86,7 +83,7 @@ export default createComponent({
           observer = new ResizeObserver(trigger)
           observer.observe(targetEl)
           emitEvent()
-        } else if (stop !== true) {
+        } else if (!stop) {
           nextTick(() => {
             init(true)
           })
@@ -111,62 +108,58 @@ export default createComponent({
       })
 
       return noop
-    } else {
-      // no observer, so fallback to old iframe method
-      const { isHydrated } = useHydration()
+    }
 
-      let curDocView
+    // no observer, so fallback to old iframe method
+    const { isHydrated } = useHydration()
 
-      function cleanup() {
-        if (timer !== null) {
-          clearTimeout(timer)
-          timer = null
-        }
+    let curDocView
 
-        if (curDocView !== void 0) {
-          // iOS is fuzzy, need to check it first
-          if (curDocView.removeEventListener !== void 0) {
-            curDocView.removeEventListener(
-              'resize',
-              trigger,
-              listenOpts.passive
-            )
-          }
-          curDocView = void 0
+    const cleanup = () => {
+      if (timer !== null) {
+        clearTimeout(timer)
+        timer = null
+      }
+
+      if (curDocView !== void 0) {
+        // iOS is fuzzy, need to check it first
+        if (curDocView.removeEventListener !== void 0) {
+          curDocView.removeEventListener('resize', trigger, listenOpts.passive)
         }
+        curDocView = void 0
       }
+    }
 
-      function onObjLoad() {
-        cleanup()
+    const onObjLoad = () => {
+      cleanup()
 
-        if (targetEl?.contentDocument) {
-          curDocView = targetEl.contentDocument.defaultView
-          curDocView.addEventListener('resize', trigger, listenOpts.passive)
-          emitEvent()
-        }
+      if (targetEl?.contentDocument) {
+        curDocView = targetEl.contentDocument.defaultView
+        curDocView.addEventListener('resize', trigger, listenOpts.passive)
+        emitEvent()
       }
+    }
 
-      onMounted(() => {
-        nextTick(() => {
-          targetEl = proxy.$el
-          if (targetEl) onObjLoad()
-        })
+    onMounted(() => {
+      nextTick(() => {
+        targetEl = proxy.$el
+        if (targetEl) onObjLoad()
       })
-
-      onBeforeUnmount(cleanup)
-
-      return () => {
-        if (isHydrated.value === true) {
-          return h('object', {
-            class: 'q--avoid-card-border',
-            style: resizeProps.style,
-            tabindex: -1, // fix for Firefox
-            type: 'text/html',
-            data: resizeProps.url,
-            'aria-hidden': 'true',
-            onLoad: onObjLoad
-          })
-        }
+    })
+
+    onBeforeUnmount(cleanup)
+
+    return () => {
+      if (isHydrated.value) {
+        return h('object', {
+          class: 'q--avoid-card-border',
+          style: resizeProps.style,
+          tabindex: -1, // fix for Firefox
+          type: 'text/html',
+          data: resizeProps.url,
+          'aria-hidden': 'true',
+          onLoad: onObjLoad
+        })
       }
     }
   }