quasar 2.19.3 → 2.20.1

package/src/components/time/QTime.js

@@ -1,12 +1,12 @@
 import {
+  Transition,
+  computed,
+  getCurrentInstance,
   h,
+  nextTick,
   ref,
-  computed,
   watch,
-  withDirectives,
-  Transition,
-  nextTick,
-  getCurrentInstance
+  withDirectives
 } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
@@ -16,28 +16,30 @@ import useDark, {
   useDarkProps
 } from '../../composables/private.use-dark/use-dark.js'
 import {
-  useFormProps,
   useFormAttrs,
-  useFormInject
+  useFormInject,
+  useFormProps
 } from '../../composables/use-form/private.use-form.js'
 import useDatetime, {
-  useDatetimeProps,
+  getDayHash,
   useDatetimeEmits,
-  getDayHash
+  useDatetimeProps
 } from '../date/use-datetime.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
-import { formatDate, __splitDate } from '../../utils/date/date.js'
+import { __splitDate, formatDate } from '../../utils/date/date.js'
 import { position } from '../../utils/event/event.js'
 import { pad } from '../../utils/format/format.js'
 import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
+const defaultDateRE = /^-?[\d]+\/[0-1]\d\/[0-3]\d$/
+
 function getViewByModel(model, withSeconds) {
   if (model.hour !== null) {
     if (model.minute === null) {
       return 'minute'
-    } else if (withSeconds === true && model.second === null) {
+    } else if (withSeconds && model.second === null) {
       return 'second'
     }
   }
@@ -56,6 +58,25 @@ function getCurrentTime() {
   }
 }
 
+function getWheelDist(a, b, threshold) {
+  const diff = Math.abs(a - b)
+  return Math.min(diff, threshold - diff)
+}
+
+function getValidValues(start, count, testFn) {
+  const values = Array.from(
+    { length: count + 1 },
+    (_, index) => index + start
+  ).filter(i => testFn(i))
+
+  return {
+    min: values[0],
+    max: values.at(-1),
+    values,
+    threshold: count + 1
+  }
+}
+
 export default createComponent({
   name: 'QTime',
 
@@ -81,7 +102,7 @@ export default createComponent({
 
     defaultDate: {
       type: String,
-      validator: v => /^-?[\d]+\/[0-1]\d\/[0-3]\d$/.test(v)
+      validator: v => defaultDateRE.test(v)
     },
 
     options: Function,
@@ -128,19 +149,22 @@ export default createComponent({
     const view = ref(getViewByModel(model))
     const innerModel = ref(model)
     const isAM = ref(model.hour === null || model.hour < 12)
+    const computedFormat24h = computed(() =>
+      props.format24h !== null ? props.format24h : $q.lang.date.format24h
+    )
 
     const classes = computed(
       () =>
-        `q-time q-time--${props.landscape === true ? 'landscape' : 'portrait'}` +
-        (isDark.value === true ? ' q-time--dark q-dark' : '') +
-        (props.disable === true
+        `q-time q-time--${props.landscape ? 'landscape' : 'portrait'}` +
+        (isDark.value ? ' q-time--dark q-dark' : '') +
+        (props.disable
           ? ' disabled'
-          : props.readonly === true
+          : props.readonly
             ? ' q-time--readonly'
             : '') +
-        (props.bordered === true ? ' q-time--bordered' : '') +
-        (props.square === true ? ' q-time--square no-border-radius' : '') +
-        (props.flat === true ? ' q-time--flat no-shadow' : '')
+        (props.bordered ? ' q-time--bordered' : '') +
+        (props.square ? ' q-time--square no-border-radius' : '') +
+        (props.flat ? ' q-time--flat no-shadow' : '')
     )
 
     const stringModel = computed(() => {
@@ -150,10 +174,10 @@ export default createComponent({
         hour:
           time.hour === null
             ? '--'
-            : computedFormat24h.value === true
+            : computedFormat24h.value
               ? pad(time.hour)
               : String(
-                  isAM.value === true
+                  isAM.value
                     ? time.hour === 0
                       ? 12
                       : time.hour
@@ -166,23 +190,15 @@ export default createComponent({
       }
     })
 
-    const computedFormat24h = computed(() =>
-      props.format24h !== null ? props.format24h : $q.lang.date.format24h
-    )
-
     const pointerStyle = computed(() => {
       const forHour = view.value === 'hour',
-        divider = forHour === true ? 12 : 60,
+        divider = forHour ? 12 : 60,
         amount = innerModel.value[view.value],
         degrees = Math.round(amount * (360 / divider)) - 180
 
       let transform = `rotate(${degrees}deg) translateX(-50%)`
 
-      if (
-        forHour === true &&
-        computedFormat24h.value === true &&
-        innerModel.value.hour >= 12
-      ) {
+      if (forHour && computedFormat24h.value && innerModel.value.hour >= 12) {
         transform += ' scale(.7)'
       }
 
@@ -191,7 +207,7 @@ export default createComponent({
 
     const minLink = computed(() => innerModel.value.hour !== null)
     const secLink = computed(
-      () => minLink.value === true && innerModel.value.minute !== null
+      () => minLink.value && innerModel.value.minute !== null
     )
 
     const hourInSelection = computed(() =>
@@ -220,13 +236,11 @@ export default createComponent({
     )
 
     const validHours = computed(() => {
-      if (hourInSelection.value === null) {
-        return null
-      }
+      if (hourInSelection.value === null) return null
 
       const am = getValidValues(0, 11, hourInSelection.value)
       const pm = getValidValues(12, 11, hourInSelection.value)
-      return { am, pm, values: am.values.concat(pm.values) }
+      return { am, pm, values: [...am.values, ...pm.values] }
     })
 
     const validMinutes = computed(() =>
@@ -243,49 +257,45 @@ export default createComponent({
 
     const viewValidOptions = computed(() => {
       switch (view.value) {
-        case 'hour':
+        case 'hour': {
           return validHours.value
-        case 'minute':
+        }
+        case 'minute': {
           return validMinutes.value
-        case 'second':
+        }
+        case 'second': {
           return validSeconds.value
+        }
       }
     })
 
     const positions = computed(() => {
-      let start,
-        end,
+      let end,
         offset = 0,
         step = 1
       const values =
         viewValidOptions.value !== null ? viewValidOptions.value.values : void 0
 
       if (view.value === 'hour') {
-        if (computedFormat24h.value === true) {
-          start = 0
+        if (computedFormat24h.value) {
           end = 23
         } else {
-          start = 0
           end = 11
-
-          if (isAM.value === false) {
-            offset = 12
-          }
+          if (!isAM.value) offset = 12
         }
       } else {
-        start = 0
         end = 55
         step = 5
       }
 
       const pos = []
 
-      for (let val = start, index = start; val <= end; val += step, index++) {
+      for (let val = 0, index = 0; val <= end; val += step, index++) {
         const actualVal = val + offset,
           disable = values?.includes(actualVal) === false,
           label =
             view.value === 'hour' && val === 0
-              ? computedFormat24h.value === true
+              ? computedFormat24h.value
                 ? '00'
                 : '12'
               : val
@@ -353,31 +363,6 @@ export default createComponent({
       view.value = 'hour'
     }
 
-    function getValidValues(start, count, testFn) {
-      const values = Array.apply(null, { length: count + 1 })
-        .map((_, index) => {
-          const i = index + start
-          return {
-            index: i,
-            val: testFn(i) === true // force boolean
-          }
-        })
-        .filter(v => v.val === true)
-        .map(v => v.index)
-
-      return {
-        min: values[0],
-        max: values[values.length - 1],
-        values,
-        threshold: count + 1
-      }
-    }
-
-    function getWheelDist(a, b, threshold) {
-      const diff = Math.abs(a - b)
-      return Math.min(diff, threshold - diff)
-    }
-
     function getNormalizedClockValue(val, { min, max, values, threshold }) {
       if (val === min) {
         return min
@@ -400,7 +385,7 @@ export default createComponent({
     function getMask() {
       return props.calendar !== 'persian' && props.mask !== null
         ? props.mask
-        : `HH:mm${props.withSeconds === true ? ':ss' : ''}`
+        : `HH:mm${props.withSeconds ? ':ss' : ''}`
     }
 
     function getDefaultDateModel() {
@@ -420,14 +405,13 @@ export default createComponent({
 
     function shouldAbortInteraction() {
       return (
-        vmIsDestroyed(vm) === true ||
+        vmIsDestroyed(vm) ||
         // if we have limited options, can we actually set any?
         (viewValidOptions.value !== null &&
           (viewValidOptions.value.values.length === 0 ||
             (view.value === 'hour' &&
-              computedFormat24h.value !== true &&
-              validHours.value[isAM.value === true ? 'am' : 'pm'].values
-                .length === 0)))
+              !computedFormat24h.value &&
+              validHours.value[isAM.value ? 'am' : 'pm'].values.length === 0)))
       )
     }
 
@@ -444,9 +428,9 @@ export default createComponent({
     }
 
     function onPan(event) {
-      if (shouldAbortInteraction() === true) return
+      if (shouldAbortInteraction()) return
 
-      if (event.isFirst === true) {
+      if (event.isFirst) {
         draggingClockRect = getClockRect()
         dragCache = updateClock(event.evt, draggingClockRect)
         return
@@ -454,7 +438,7 @@ export default createComponent({
 
       dragCache = updateClock(event.evt, draggingClockRect, dragCache)
 
-      if (event.isFinal === true) {
+      if (event.isFinal) {
         draggingClockRect = false
         dragCache = null
         goToNextView()
@@ -472,9 +456,9 @@ export default createComponent({
     function updateClock(evt, clockRect, cacheVal) {
       const pos = position(evt),
         height = Math.abs(pos.top - clockRect.top),
-        distance = Math.sqrt(
-          Math.abs(pos.top - clockRect.top) ** 2 +
-            Math.abs(pos.left - clockRect.left) ** 2
+        distance = Math.hypot(
+          pos.top - clockRect.top,
+          pos.left - clockRect.left
         )
 
       let val,
@@ -490,22 +474,21 @@ export default createComponent({
         val = angle / 30
 
         if (validHours.value !== null) {
-          const am =
-            computedFormat24h.value !== true
-              ? isAM.value === true
-              : validHours.value.am.values.length !== 0 &&
-                  validHours.value.pm.values.length !== 0
-                ? distance >= clockRect.dist
-                : validHours.value.am.values.length !== 0
+          const am = !computedFormat24h.value
+            ? isAM.value
+            : validHours.value.am.values.length !== 0 &&
+                validHours.value.pm.values.length !== 0
+              ? distance >= clockRect.dist
+              : validHours.value.am.values.length !== 0
 
           val = getNormalizedClockValue(
-            val + (am === true ? 0 : 12),
-            validHours.value[am === true ? 'am' : 'pm']
+            val + (am ? 0 : 12),
+            validHours.value[am ? 'am' : 'pm']
           )
         } else {
           val = Math.round(val)
 
-          if (computedFormat24h.value === true) {
+          if (computedFormat24h.value) {
             if (distance < clockRect.dist) {
               if (val < 12) {
                 val += 12
@@ -513,14 +496,14 @@ export default createComponent({
             } else if (val === 12) {
               val = 0
             }
-          } else if (isAM.value === true && val === 12) {
+          } else if (isAM.value && val === 12) {
             val = 0
-          } else if (isAM.value === false && val !== 12) {
+          } else if (!isAM.value && val !== 12) {
             val += 12
           }
         }
 
-        if (computedFormat24h.value === true) {
+        if (computedFormat24h.value) {
           isAM.value = val < 12
         }
       } else {
@@ -561,10 +544,10 @@ export default createComponent({
     }
 
     function onClick(evt) {
-      if (shouldAbortInteraction() !== true) {
+      if (!shouldAbortInteraction()) {
         // onMousedown() has already updated the offset
         // (on desktop only, through mousedown event)
-        if ($q.platform.is.desktop !== true) {
+        if (!$q.platform.is.desktop) {
           updateClock(evt, getClockRect())
         }
 
@@ -573,7 +556,7 @@ export default createComponent({
     }
 
     function onMousedown(evt) {
-      if (shouldAbortInteraction() !== true) {
+      if (!shouldAbortInteraction()) {
         updateClock(evt, getClockRect())
       }
     }
@@ -586,10 +569,9 @@ export default createComponent({
         const payload = e.keyCode === 37 ? -1 : 1
 
         if (validHours.value !== null) {
-          const values =
-            computedFormat24h.value === true
-              ? validHours.value.values
-              : validHours.value[isAM.value === true ? 'am' : 'pm'].values
+          const values = computedFormat24h.value
+            ? validHours.value.values
+            : validHours.value[isAM.value ? 'am' : 'pm'].values
 
           if (values.length === 0) return
 
@@ -605,9 +587,8 @@ export default createComponent({
             setHour(values[index])
           }
         } else {
-          const wrap = computedFormat24h.value === true ? 24 : 12,
-            offset =
-              computedFormat24h.value !== true && isAM.value === false ? 12 : 0,
+          const wrap = computedFormat24h.value ? 24 : 12,
+            offset = !computedFormat24h.value && !isAM.value ? 12 : 0,
             val =
               innerModel.value.hour === null ? -payload : innerModel.value.hour
 
@@ -710,7 +691,7 @@ export default createComponent({
     }
 
     function setAm() {
-      if (isAM.value === false) {
+      if (!isAM.value) {
         isAM.value = true
 
         if (innerModel.value.hour !== null) {
@@ -721,7 +702,7 @@ export default createComponent({
     }
 
     function setPm() {
-      if (isAM.value === true) {
+      if (isAM.value) {
         isAM.value = false
 
         if (innerModel.value.hour !== null) {
@@ -747,7 +728,7 @@ export default createComponent({
     function verifyAndUpdate() {
       if (
         hourInSelection.value !== null &&
-        hourInSelection.value(innerModel.value.hour) !== true
+        !hourInSelection.value(innerModel.value.hour)
       ) {
         innerModel.value = __splitDate()
         goToViewWhenHasModel('hour')
@@ -756,7 +737,7 @@ export default createComponent({
 
       if (
         minuteInSelection.value !== null &&
-        minuteInSelection.value(innerModel.value.minute) !== true
+        !minuteInSelection.value(innerModel.value.minute)
       ) {
         innerModel.value.minute = null
         innerModel.value.second = null
@@ -765,9 +746,9 @@ export default createComponent({
       }
 
       if (
-        props.withSeconds === true &&
+        props.withSeconds &&
         secondInSelection.value !== null &&
-        secondInSelection.value(innerModel.value.second) !== true
+        !secondInSelection.value(innerModel.value.second)
       ) {
         innerModel.value.second = null
         goToViewWhenHasModel('second')
@@ -777,7 +758,7 @@ export default createComponent({
       if (
         innerModel.value.hour === null ||
         innerModel.value.minute === null ||
-        (props.withSeconds === true && innerModel.value.second === null)
+        (props.withSeconds && innerModel.value.second === null)
       ) {
         return
       }
@@ -786,14 +767,14 @@ export default createComponent({
     }
 
     function updateValue(obj) {
-      const date = Object.assign({ ...innerModel.value }, obj)
+      const date = { ...innerModel.value, ...obj }
 
       const val =
         props.calendar === 'persian'
           ? pad(date.hour) +
             ':' +
             pad(date.minute) +
-            (props.withSeconds === true ? ':' + pad(date.second) : '')
+            (props.withSeconds ? ':' + pad(date.second) : '')
           : formatDate(
               new Date(
                 date.year,
@@ -835,7 +816,7 @@ export default createComponent({
 
         h(
           'div',
-          minLink.value === true
+          minLink.value
             ? {
                 class:
                   'q-time__link ' +
@@ -851,13 +832,13 @@ export default createComponent({
         )
       ]
 
-      if (props.withSeconds === true) {
+      if (props.withSeconds) {
         label.push(
           h('div', ':'),
 
           h(
             'div',
-            secLink.value === true
+            secLink.value
               ? {
                   class:
                     'q-time__link ' +
@@ -885,7 +866,7 @@ export default createComponent({
         )
       ]
 
-      if (computedFormat24h.value === false) {
+      if (!computedFormat24h.value) {
         child.push(
           h(
             'div',
@@ -898,9 +879,7 @@ export default createComponent({
                 {
                   class:
                     'q-time__link ' +
-                    (isAM.value === true
-                      ? 'q-time__link--active'
-                      : 'cursor-pointer'),
+                    (isAM.value ? 'q-time__link--active' : 'cursor-pointer'),
                   tabindex: tabindex.value,
                   onClick: setAm,
                   onKeyup: setAmOnKey
@@ -913,9 +892,7 @@ export default createComponent({
                 {
                   class:
                     'q-time__link ' +
-                    (isAM.value !== true
-                      ? 'q-time__link--active'
-                      : 'cursor-pointer'),
+                    (isAM.value ? 'cursor-pointer' : 'q-time__link--active'),
                   tabindex: tabindex.value,
                   onClick: setPm,
                   onKeyup: setPmOnKey
@@ -996,7 +973,7 @@ export default createComponent({
                                       (pos.val === current
                                         ? ' q-time__clock-position--active ' +
                                           headerClass.value
-                                        : pos.disable === true
+                                        : pos.disable
                                           ? ' q-time__clock-position--disable'
                                           : '')
                                   },
@@ -1014,7 +991,7 @@ export default createComponent({
               )
           ),
 
-          props.nowBtn === true
+          props.nowBtn
             ? h(QBtn, {
                 class: 'q-time__now-button absolute',
                 icon: $q.iconSet.datetime.now,
@@ -1042,7 +1019,7 @@ export default createComponent({
         child.push(h('div', { class: 'q-time__actions' }, def))
       }
 
-      if (props.name !== void 0 && props.disable !== true) {
+      if (props.name !== void 0 && !props.disable) {
         injectFormInput(child, 'push')
       }
 

package/src/components/timeline/QTimeline.js

@@ -1,4 +1,4 @@
-import { h, computed, provide, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, provide } from 'vue'
 
 import useDark, {
   useDarkProps
@@ -8,6 +8,9 @@ import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import { timelineKey } from '../../utils/private.symbols/symbols.js'
 
+const sideValues = ['left', 'right']
+const layoutValues = ['dense', 'comfortable', 'loose']
+
 export default createComponent({
   name: 'QTimeline',
 
@@ -21,12 +24,12 @@ export default createComponent({
     side: {
       type: String,
       default: 'right',
-      validator: v => ['left', 'right'].includes(v)
+      validator: v => sideValues.includes(v)
     },
     layout: {
       type: String,
       default: 'dense',
-      validator: v => ['dense', 'comfortable', 'loose'].includes(v)
+      validator: v => layoutValues.includes(v)
     }
   },
 
@@ -39,7 +42,7 @@ export default createComponent({
     const classes = computed(
       () =>
         `q-timeline q-timeline--${props.layout} q-timeline--${props.layout}--${props.side}` +
-        (isDark.value === true ? ' q-timeline--dark' : '')
+        (isDark.value ? ' q-timeline--dark' : '')
     )
 
     return () => h('ul', { class: classes.value }, hSlot(slots.default))

package/src/components/timeline/QTimelineEntry.js

@@ -1,12 +1,12 @@
-import { h, computed, inject } from 'vue'
+import { computed, h, inject } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot, hUniqueSlot } from '../../utils/private.render/render.js'
 import {
-  timelineKey,
-  emptyRenderFn
+  emptyRenderFn,
+  timelineKey
 } from '../../utils/private.symbols/symbols.js'
 
 export default createComponent({
@@ -64,7 +64,7 @@ export default createComponent({
         child.unshift(props.body)
       }
 
-      if (props.heading === true) {
+      if (props.heading) {
         const content = [
           h('div'),
           h('div'),
@@ -76,7 +76,7 @@ export default createComponent({
           {
             class: 'q-timeline__heading'
           },
-          reverse.value === true ? content.reverse() : content
+          reverse.value ? content.reverse() : content
         )
       }
 
@@ -108,6 +108,7 @@ export default createComponent({
         h(
           'div',
           { class: 'q-timeline__content' },
+          // oxlint-disable-next-line unicorn/prefer-spread
           [
             h(
               'h6',
@@ -123,7 +124,7 @@ export default createComponent({
         {
           class: classes.value
         },
-        reverse.value === true ? content.reverse() : content
+        reverse.value ? content.reverse() : content
       )
     }
   }

package/src/components/timeline/QTimelineEntry.json

@@ -35,7 +35,7 @@
       "transformAssetUrls": true,
       "examples": [
         "# (public folder) src=\"img/my-bg.png\"",
-        "# (assets folder) src=\"~assets/my-img.png\"",
+        "# (assets folder) src=\"~@/assets/my-img.png\"",
         "# (relative path format) :src=\"require('./my_img.jpg')\"",
         "# (URL) src=\"https://picsum.photos/500/300\""
       ],