quasar 2.19.2 → 2.20.0

package/src/components/date/QDate.js

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
-  computed,
-  watch,
   Transition,
+  computed,
+  getCurrentInstance,
+  h,
   nextTick,
-  getCurrentInstance
+  ref,
+  watch
 } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
@@ -15,19 +15,19 @@ import useDark, {
 } from '../../composables/private.use-dark/use-dark.js'
 import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
 import {
-  useFormProps,
   useFormAttrs,
-  useFormInject
+  useFormInject,
+  useFormProps
 } from '../../composables/use-form/private.use-form.js'
 import useDatetime, {
-  useDatetimeProps,
+  getDayHash,
   useDatetimeEmits,
-  getDayHash
+  useDatetimeProps
 } from './use-datetime.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
-import { formatDate, __splitDate, getDateDiff } from '../../utils/date/date.js'
+import { __splitDate, formatDate, getDateDiff } from '../../utils/date/date.js'
 import { pad } from '../../utils/format/format.js'
 import {
   jalaaliMonthLength,
@@ -38,13 +38,18 @@ import { isObject } from '../../utils/is/is.js'
 const yearsInterval = 20
 const views = ['Calendar', 'Years', 'Months']
 const viewIsValid = v => views.includes(v)
-const yearMonthValidator = v => /^-?[\d]+\/[0-1]\d$/.test(v)
+const yearMonthRE = /^-?[\d]+\/[0-1]\d$/
+const yearMonthValidator = v => yearMonthRE.test(v)
 const lineStr = ' \u2014 '
 
 function getMonthHash(date) {
   return date.year + '/' + pad(date.month)
 }
 
+function getShortDate(date) {
+  return { year: date.year, month: date.month, day: date.day }
+}
+
 export default createComponent({
   name: 'QDate',
 
@@ -57,7 +62,7 @@ export default createComponent({
       required: true,
       validator: val =>
         typeof val === 'string' ||
-        Array.isArray(val) === true ||
+        Array.isArray(val) ||
         Object(val) === val ||
         val === null
     },
@@ -143,7 +148,7 @@ export default createComponent({
 
     const view = ref(props.defaultView)
 
-    const direction = computed(() => ($q.lang.rtl === true ? 'right' : 'left'))
+    const direction = computed(() => ($q.lang.rtl ? 'right' : 'left'))
     const monthDirection = ref(direction.value)
     const yearDirection = ref(direction.value)
 
@@ -156,16 +161,16 @@ export default createComponent({
     const editRange = ref(null)
 
     const classes = computed(() => {
-      const type = props.landscape === true ? 'landscape' : 'portrait'
+      const type = props.landscape ? 'landscape' : 'portrait'
       return (
-        `q-date q-date--${type} q-date--${type}-${props.minimal === true ? 'minimal' : 'standard'}` +
-        (isDark.value === true ? ' q-date--dark q-dark' : '') +
-        (props.bordered === true ? ' q-date--bordered' : '') +
-        (props.square === true ? ' q-date--square no-border-radius' : '') +
-        (props.flat === true ? ' q-date--flat no-shadow' : '') +
-        (props.disable === true
+        `q-date q-date--${type} q-date--${type}-${props.minimal ? 'minimal' : 'standard'}` +
+        (isDark.value ? ' q-date--dark q-dark' : '') +
+        (props.bordered ? ' q-date--bordered' : '') +
+        (props.square ? ' q-date--square no-border-radius' : '') +
+        (props.flat ? ' q-date--flat no-shadow' : '') +
+        (props.disable
           ? ' disabled'
-          : props.readonly === true
+          : props.readonly
             ? ' q-date--readonly'
             : '')
       )
@@ -176,14 +181,11 @@ export default createComponent({
     const computedTextColor = computed(() => props.textColor || 'white')
 
     const isImmediate = computed(
-      () =>
-        props.emitImmediately === true &&
-        props.multiple !== true &&
-        props.range !== true
+      () => props.emitImmediately && !props.multiple && !props.range
     )
 
     const normalizedModel = computed(() =>
-      Array.isArray(props.modelValue) === true
+      Array.isArray(props.modelValue)
         ? props.modelValue
         : props.modelValue !== null && props.modelValue !== void 0
           ? [props.modelValue]
@@ -207,10 +209,7 @@ export default createComponent({
       const fn = date => decodeString(date, innerMask.value, innerLocale.value)
       return normalizedModel.value
         .filter(
-          date =>
-            isObject(date) === true &&
-            date.from !== void 0 &&
-            date.to !== void 0
+          date => isObject(date) && date.from !== void 0 && date.to !== void 0
         )
         .map(range => ({ from: fn(range.from), to: fn(range.to) }))
         .filter(
@@ -290,9 +289,7 @@ export default createComponent({
         )
       }
 
-      if (daysInModel.value === 0) {
-        return lineStr
-      }
+      if (daysInModel.value === 0) return lineStr
 
       if (daysInModel.value > 1) {
         return `${daysInModel.value} ${innerLocale.value.pluralDay}`
@@ -301,9 +298,7 @@ export default createComponent({
       const model = daysModel.value[0]
       const date = getNativeDateFn.value(model)
 
-      if (isNaN(date.valueOf()) === true) {
-        return lineStr
-      }
+      if (Number.isNaN(date.valueOf())) return lineStr
 
       if (innerLocale.value.headerTitle !== void 0) {
         return innerLocale.value.headerTitle(date, model)
@@ -319,17 +314,19 @@ export default createComponent({
     })
 
     const minSelectedModel = computed(() => {
-      const model = daysModel.value
-        .concat(rangeModel.value.map(range => range.from))
-        .sort((a, b) => a.year - b.year || a.month - b.month)
+      const model = [
+        ...daysModel.value,
+        ...rangeModel.value.map(range => range.from)
+      ].sort((a, b) => a.year - b.year || a.month - b.month)
 
       return model[0]
     })
 
     const maxSelectedModel = computed(() => {
-      const model = daysModel.value
-        .concat(rangeModel.value.map(range => range.to))
-        .sort((a, b) => b.year - a.year || b.month - a.month)
+      const model = [
+        ...daysModel.value,
+        ...rangeModel.value.map(range => range.to)
+      ].sort((a, b) => b.year - a.year || b.month - a.month)
 
       return model[0]
     })
@@ -372,7 +369,7 @@ export default createComponent({
         $q.iconSet.datetime.arrowLeft,
         $q.iconSet.datetime.arrowRight
       ]
-      return $q.lang.rtl === true ? val.reverse() : val
+      return $q.lang.rtl ? val.reverse() : val
     })
 
     const computedFirstDayOfWeek = computed(() =>
@@ -386,7 +383,7 @@ export default createComponent({
         first = computedFirstDayOfWeek.value
 
       return first > 0
-        ? days.slice(first, 7).concat(days.slice(0, first))
+        ? [...days.slice(first, 7), ...days.slice(0, first)]
         : days
     })
 
@@ -409,7 +406,10 @@ export default createComponent({
       }
 
       const data = props.navigationMinYearMonth.split('/')
-      return { year: parseInt(data[0], 10), month: parseInt(data[1], 10) }
+      return {
+        year: Number.parseInt(data[0], 10),
+        month: Number.parseInt(data[1], 10)
+      }
     })
 
     const maxNav = computed(() => {
@@ -418,7 +418,10 @@ export default createComponent({
       }
 
       const data = props.navigationMaxYearMonth.split('/')
-      return { year: parseInt(data[0], 10), month: parseInt(data[1], 10) }
+      return {
+        year: Number.parseInt(data[0], 10),
+        month: Number.parseInt(data[1], 10)
+      }
     })
 
     const navBoundaries = computed(() => {
@@ -588,7 +591,7 @@ export default createComponent({
 
         for (let i = 1; i <= daysInMonth.value; i++) {
           const dayHash = viewMonthHash.value + '/' + pad(i)
-          map[i] = fn(dayHash) === true && evtColor.value(dayHash)
+          map[i] = fn(dayHash) && evtColor.value(dayHash)
         }
       }
 
@@ -636,7 +639,7 @@ export default createComponent({
       for (let i = 1; i <= daysInMonth.value; i++) {
         const day = { i, event: eventDaysMap.value[i], classes: [] }
 
-        if (selectionDaysMap.value[i] === true) {
+        if (selectionDaysMap.value[i]) {
           day.in = true
           day.flat = true
         }
@@ -724,10 +727,10 @@ export default createComponent({
           res[day].editRange = true
         }
 
-        if (rangeView.value.includeFrom === true) {
+        if (rangeView.value.includeFrom) {
           res[from].editRangeFrom = true
         }
-        if (rangeView.value.includeTo === true) {
+        if (rangeView.value.includeTo) {
           res[to].editRangeTo = true
         }
       }
@@ -750,20 +753,20 @@ export default createComponent({
       res.forEach(day => {
         let cls = 'q-date__calendar-item '
 
-        if (day.fill === true) {
+        if (day.fill) {
           cls += 'q-date__calendar-item--fill'
         } else {
-          cls += `q-date__calendar-item--${day.in === true ? 'in' : 'out'}`
+          cls += `q-date__calendar-item--${day.in ? 'in' : 'out'}`
 
           if (day.range !== void 0) {
-            cls += ` q-date__range${day.rangeTo === true ? '-to' : day.rangeFrom === true ? '-from' : ''}`
+            cls += ` q-date__range${day.rangeTo ? '-to' : day.rangeFrom ? '-from' : ''}`
           }
 
-          if (day.editRange === true) {
-            cls += ` q-date__edit-range${day.editRangeFrom === true ? '-from' : ''}${day.editRangeTo === true ? '-to' : ''}`
+          if (day.editRange) {
+            cls += ` q-date__edit-range${day.editRangeFrom ? '-from' : ''}${day.editRangeTo ? '-to' : ''}`
           }
 
-          if (day.range !== void 0 || day.editRange === true) {
+          if (day.range !== void 0 || day.editRange) {
             cls += ` text-${day.color}`
           }
         }
@@ -775,7 +778,7 @@ export default createComponent({
     })
 
     const attributes = computed(() =>
-      props.disable === true ? { 'aria-disabled': 'true' } : {}
+      props.disable ? { 'aria-disabled': 'true' } : {}
     )
 
     watch(
@@ -793,7 +796,7 @@ export default createComponent({
     watch(view, () => {
       if (
         blurTargetRef.value !== null &&
-        proxy.$el.contains(document.activeElement) === true
+        proxy.$el.contains(document.activeElement)
       ) {
         blurTargetRef.value.focus()
       }
@@ -839,7 +842,7 @@ export default createComponent({
 
       const monthMap = daysMap.value[getMonthHash(date)]
 
-      if (monthMap === void 0 || monthMap.includes(date.day) === false) {
+      if (monthMap === void 0 || !monthMap.includes(date.day)) {
         addToModel(date)
       }
 
@@ -847,15 +850,13 @@ export default createComponent({
     }
 
     function setView(viewMode) {
-      if (viewIsValid(viewMode) === true) {
-        view.value = viewMode
-      }
+      if (viewIsValid(viewMode)) view.value = viewMode
     }
 
     function offsetCalendar(type, descending) {
       if (['month', 'year'].includes(type)) {
         const fn = type === 'month' ? goToMonth : goToYear
-        fn(descending === true ? -1 : 1)
+        fn(descending ? -1 : 1)
       }
     }
 
@@ -865,14 +866,13 @@ export default createComponent({
     }
 
     function setEditingRange(from, to) {
-      if (props.range === false || !from) {
+      if (!props.range || !from) {
         editRange.value = null
         return
       }
 
-      const init = Object.assign({ ...viewModel.value }, from)
-      const final =
-        to !== void 0 ? Object.assign({ ...viewModel.value }, to) : init
+      const init = { ...viewModel.value, ...from }
+      const final = to !== void 0 ? { ...viewModel.value, ...to } : init
 
       editRange.value = {
         init,
@@ -898,18 +898,17 @@ export default createComponent({
     }
 
     function getViewModel(dateMask, dateLocale) {
-      const model =
-        Array.isArray(props.modelValue) === true
-          ? props.modelValue
-          : props.modelValue
-            ? [props.modelValue]
-            : []
+      const model = Array.isArray(props.modelValue)
+        ? props.modelValue
+        : props.modelValue
+          ? [props.modelValue]
+          : []
 
       if (model.length === 0) {
         return getDefaultViewModel()
       }
 
-      const target = model[model.length - 1]
+      const target = model.at(-1)
       const decoded = decodeString(
         target.from !== void 0 ? target.from : target,
         dateMask,
@@ -924,8 +923,8 @@ export default createComponent({
 
       if (props.defaultYearMonth !== void 0) {
         const d = props.defaultYearMonth.split('/')
-        year = parseInt(d[0], 10)
-        month = parseInt(d[1], 10)
+        year = Number.parseInt(d[0], 10)
+        month = Number.parseInt(d[1], 10)
       } else {
         // may come from data() where computed
         // props are not yet available
@@ -960,25 +959,25 @@ export default createComponent({
       }
 
       updateViewModel(year, month)
-      if (isImmediate.value === true) emitImmediately('month')
+      if (isImmediate.value) emitImmediately('month')
     }
 
     function goToYear(offset) {
       const year = Number(viewModel.value.year) + offset
       updateViewModel(year, viewModel.value.month)
-      if (isImmediate.value === true) emitImmediately('year')
+      if (isImmediate.value) emitImmediately('year')
     }
 
     function setYear(year) {
       updateViewModel(year, viewModel.value.month)
       view.value = props.defaultView === 'Years' ? 'Months' : 'Calendar'
-      if (isImmediate.value === true) emitImmediately('year')
+      if (isImmediate.value) emitImmediately('year')
     }
 
     function setMonth(month) {
       updateViewModel(viewModel.value.year, month)
       view.value = 'Calendar'
-      if (isImmediate.value === true) emitImmediately('month')
+      if (isImmediate.value) emitImmediately('month')
     }
 
     function toggleDate(date, monthHash) {
@@ -989,10 +988,6 @@ export default createComponent({
       fn(date)
     }
 
-    function getShortDate(date) {
-      return { year: date.year, month: date.month, day: date.day }
-    }
-
     function updateViewModel(year, month, time) {
       if (minNav.value !== null && year <= minNav.value.year) {
         if (month < minNav.value.month || year < minNav.value.year) {
@@ -1047,9 +1042,7 @@ export default createComponent({
 
     function emitValue(val, action, date) {
       const value =
-        val !== null && val.length === 1 && props.multiple === false
-          ? val[0]
-          : val
+        val !== null && val.length === 1 && !props.multiple ? val[0] : val
 
       const { reason, details } = getEmitParams(action, date)
 
@@ -1111,7 +1104,7 @@ export default createComponent({
     function addToModel(date) {
       let value
 
-      if (props.multiple === true) {
+      if (props.multiple) {
         if (date.from !== void 0) {
           // we also need to filter out intersections
 
@@ -1126,14 +1119,11 @@ export default createComponent({
             ({ from, to }) => to.dateHash < fromHash || from.dateHash > toHash
           )
 
-          value = localDays
-            .concat(ranges)
-            .concat(date)
-            .map(entry => encodeEntry(entry))
+          value = [...localDays, ...ranges, date].map(entry =>
+            encodeEntry(entry)
+          )
         } else {
-          const model = normalizedModel.value.slice()
-          model.push(encodeEntry(date))
-          value = model
+          value = [...normalizedModel.value, encodeEntry(date)]
         }
       } else {
         value = encodeEntry(date)
@@ -1143,22 +1133,21 @@ export default createComponent({
     }
 
     function removeFromModel(date) {
-      if (props.noUnset === true) return
+      if (props.noUnset) return
 
       let model = null
 
-      if (props.multiple === true && Array.isArray(props.modelValue) === true) {
+      if (props.multiple && Array.isArray(props.modelValue)) {
         const val = encodeEntry(date)
 
-        if (date.from !== void 0) {
-          model = props.modelValue.filter(item =>
-            item.from !== void 0
-              ? item.from !== val.from && item.to !== val.to
-              : true
-          )
-        } else {
-          model = props.modelValue.filter(item => item !== val)
-        }
+        model =
+          date.from !== void 0
+            ? props.modelValue.filter(item =>
+                item.from !== void 0
+                  ? item.from !== val.from && item.to !== val.to
+                  : true
+              )
+            : props.modelValue.filter(item => item !== val)
 
         if (model.length === 0) {
           model = null
@@ -1169,8 +1158,7 @@ export default createComponent({
     }
 
     function updateValue(dateMask, dateLocale, reason) {
-      const model = daysModel.value
-        .concat(rangeModel.value)
+      const model = [...daysModel.value, ...rangeModel.value]
         .map(entry => encodeEntry(entry, dateMask, dateLocale))
         .filter(entry =>
           entry.from !== void 0
@@ -1178,14 +1166,14 @@ export default createComponent({
             : entry.dateHash !== null
         )
 
-      const value = (props.multiple === true ? model : model[0]) || null
+      const value = (props.multiple ? model : model[0]) || null
 
       setLastValue(value)
       emit('update:modelValue', value, reason)
     }
 
     function getHeader() {
-      if (props.minimal === true) return
+      if (props.minimal) return
 
       return h(
         'div',
@@ -1277,7 +1265,7 @@ export default createComponent({
                 ]
               ),
 
-              props.todayBtn === true
+              props.todayBtn
                 ? h(QBtn, {
                     class: 'q-date__header-today self-start',
                     icon: $q.iconSet.datetime.today,
@@ -1314,7 +1302,7 @@ export default createComponent({
                   ? $q.lang.date.prevYear
                   : $q.lang.date.prevMonth,
               tabindex: tabindex.value,
-              disable: boundaries.prev === false,
+              disable: !boundaries.prev,
               ...getCache('go-#' + type, {
                 onClick() {
                   goTo(-1)
@@ -1371,7 +1359,7 @@ export default createComponent({
                   ? $q.lang.date.nextYear
                   : $q.lang.date.nextMonth,
               tabindex: tabindex.value,
-              disable: boundaries.next === false,
+              disable: !boundaries.next,
               ...getCache('go+#' + type, {
                 onClick() {
                   goTo(1)
@@ -1397,16 +1385,17 @@ export default createComponent({
               {
                 class: 'q-date__navigation row items-center no-wrap'
               },
-              getNavigation({
-                label: innerLocale.value.months[viewModel.value.month - 1],
-                type: 'Months',
-                key: viewModel.value.month,
-                dir: monthDirection.value,
-                goTo: goToMonth,
-                boundaries: navBoundaries.value.month,
-                cls: ' col'
-              }).concat(
-                getNavigation({
+              [
+                ...getNavigation({
+                  label: innerLocale.value.months[viewModel.value.month - 1],
+                  type: 'Months',
+                  key: viewModel.value.month,
+                  dir: monthDirection.value,
+                  goTo: goToMonth,
+                  boundaries: navBoundaries.value.month,
+                  cls: ' col'
+                }),
+                ...getNavigation({
                   label: viewModel.value.year,
                   type: 'Years',
                   key: viewModel.value.year,
@@ -1415,7 +1404,7 @@ export default createComponent({
                   boundaries: navBoundaries.value.year,
                   cls: ''
                 })
-              )
+              ]
             ),
 
             h(
@@ -1449,12 +1438,11 @@ export default createComponent({
                       },
                       days.value.map(day =>
                         h('div', { class: day.classes }, [
-                          day.in === true
+                          day.in
                             ? h(
                                 QBtn,
                                 {
-                                  class:
-                                    day.today === true ? 'q-date__today' : '',
+                                  class: day.today ? 'q-date__today' : '',
                                   dense: true,
                                   flat: day.flat,
                                   unelevated: day.unelevated,
@@ -1471,7 +1459,7 @@ export default createComponent({
                                     }
                                   })
                                 },
-                                day.event !== false
+                                day.event
                                   ? () =>
                                       h('div', {
                                         class: 'q-date__event bg-' + day.event
@@ -1510,14 +1498,14 @@ export default createComponent({
             [
               h(QBtn, {
                 class:
-                  currentYear === true && today.value.month === i + 1
+                  currentYear && today.value.month === i + 1
                     ? 'q-date__today'
                     : null,
-                flat: active !== true,
+                flat: !active,
                 label: month,
                 unelevated: active,
-                color: active === true ? computedColor.value : null,
-                textColor: active === true ? computedTextColor.value : null,
+                color: active ? computedColor.value : null,
+                textColor: active ? computedTextColor.value : null,
                 tabindex: tabindex.value,
                 disable: isDisabled(i + 1),
                 ...getCache('month#' + i, {
@@ -1530,7 +1518,7 @@ export default createComponent({
           )
         })
 
-        if (props.yearsInMonthView === true) {
+        if (props.yearsInMonthView) {
           content.unshift(
             h('div', { class: 'row no-wrap full-width' }, [
               getNavigation({
@@ -1582,8 +1570,8 @@ export default createComponent({
                   label: i,
                   dense: true,
                   unelevated: active,
-                  color: active === true ? computedColor.value : null,
-                  textColor: active === true ? computedTextColor.value : null,
+                  color: active ? computedColor.value : null,
+                  textColor: active ? computedTextColor.value : null,
                   tabindex: tabindex.value,
                   disable: isDisabled(i),
                   ...getCache('yr#' + i, {
@@ -1664,17 +1652,17 @@ export default createComponent({
     function onDayClick(dayIndex) {
       const day = { ...viewModel.value, day: dayIndex }
 
-      if (props.range === false) {
+      if (!props.range) {
         toggleDate(day, viewMonthHash.value)
         return
       }
 
       if (editRange.value === null) {
         const dayProps = days.value.find(
-          item => item.fill !== true && item.i === dayIndex
+          item => !item.fill && item.i === dayIndex
         )
 
-        if (props.noUnset !== true && dayProps.range !== void 0) {
+        if (!props.noUnset && dayProps.range !== void 0) {
           removeFromModel({
             target: day,
             from: dayProps.range.from,
@@ -1683,7 +1671,7 @@ export default createComponent({
           return
         }
 
-        if (dayProps.selected === true) {
+        if (dayProps.selected) {
           removeFromModel(day)
           return
         }
@@ -1760,7 +1748,7 @@ export default createComponent({
         content.push(h('div', { class: 'q-date__actions' }, def))
       }
 
-      if (props.name !== void 0 && props.disable !== true) {
+      if (props.name !== void 0 && !props.disable) {
         injectFormInput(content, 'push')
       }