quasar 2.18.7 → 2.19.0

package/src/components/time/QTime.js

@@ -1,11 +1,30 @@
-import { h, ref, computed, watch, withDirectives, Transition, nextTick, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  withDirectives,
+  Transition,
+  nextTick,
+  getCurrentInstance
+} from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
-import { useFormProps, useFormAttrs, useFormInject } from '../../composables/use-form/private.use-form.js'
-import useDatetime, { useDatetimeProps, useDatetimeEmits, getDayHash } from '../date/use-datetime.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
+import {
+  useFormProps,
+  useFormAttrs,
+  useFormInject
+} from '../../composables/use-form/private.use-form.js'
+import useDatetime, {
+  useDatetimeProps,
+  useDatetimeEmits,
+  getDayHash
+} from '../date/use-datetime.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
@@ -14,12 +33,11 @@ import { position } from '../../utils/event/event.js'
 import { pad } from '../../utils/format/format.js'
 import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
-function getViewByModel (model, withSeconds) {
+function getViewByModel(model, withSeconds) {
   if (model.hour !== null) {
     if (model.minute === null) {
       return 'minute'
-    }
-    else if (withSeconds === true && model.second === null) {
+    } else if (withSeconds === true && model.second === null) {
       return 'second'
     }
   }
@@ -27,7 +45,7 @@ function getViewByModel (model, withSeconds) {
   return 'hour'
 }
 
-function getCurrentTime () {
+function getCurrentTime() {
   const d = new Date()
 
   return {
@@ -48,7 +66,7 @@ export default createComponent({
 
     modelValue: {
       required: true,
-      validator: val => (typeof val === 'string' || val === null)
+      validator: val => typeof val === 'string' || val === null
     },
 
     mask: {
@@ -77,12 +95,15 @@ export default createComponent({
 
   emits: useDatetimeEmits,
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const vm = getCurrentInstance()
     const { $q } = vm.proxy
 
     const isDark = useDark(props, $q)
-    const { tabindex, headerClass, getLocale, getCurrentDate } = useDatetime(props, $q)
+    const { tabindex, headerClass, getLocale, getCurrentDate } = useDatetime(
+      props,
+      $q
+    )
 
     const formAttrs = useFormAttrs(props)
     const injectFormInput = useFormInject(formAttrs)
@@ -108,58 +129,59 @@ export default createComponent({
     const innerModel = ref(model)
     const isAM = ref(model.hour === null || model.hour < 12)
 
-    const classes = computed(() =>
-      `q-time q-time--${ props.landscape === true ? 'landscape' : 'portrait' }`
-      + (isDark.value === true ? ' q-time--dark q-dark' : '')
-      + (props.disable === true ? ' disabled' : (props.readonly === true ? ' 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' : '')
+    const classes = computed(
+      () =>
+        `q-time q-time--${props.landscape === true ? 'landscape' : 'portrait'}` +
+        (isDark.value === true ? ' q-time--dark q-dark' : '') +
+        (props.disable === true
+          ? ' disabled'
+          : props.readonly === true
+            ? ' 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' : '')
     )
 
     const stringModel = computed(() => {
       const time = innerModel.value
 
       return {
-        hour: time.hour === null
-          ? '--'
-          : (
-              computedFormat24h.value === true
-                ? pad(time.hour)
-                : String(
+        hour:
+          time.hour === null
+            ? '--'
+            : computedFormat24h.value === true
+              ? pad(time.hour)
+              : String(
                   isAM.value === true
-                    ? (time.hour === 0 ? 12 : time.hour)
-                    : (time.hour > 12 ? time.hour - 12 : time.hour)
-                )
-            ),
-        minute: time.minute === null
-          ? '--'
-          : pad(time.minute),
-        second: time.second === null
-          ? '--'
-          : pad(time.second)
+                    ? time.hour === 0
+                      ? 12
+                      : time.hour
+                    : time.hour > 12
+                      ? time.hour - 12
+                      : time.hour
+                ),
+        minute: time.minute === null ? '--' : pad(time.minute),
+        second: time.second === null ? '--' : pad(time.second)
       }
     })
 
-    const computedFormat24h = computed(() => (
-      props.format24h !== null
-        ? props.format24h
-        : $q.lang.date.format24h
-    ))
+    const computedFormat24h = computed(() =>
+      props.format24h !== null ? props.format24h : $q.lang.date.format24h
+    )
 
     const pointerStyle = computed(() => {
-      const
-        forHour = view.value === 'hour',
+      const forHour = view.value === 'hour',
         divider = forHour === true ? 12 : 60,
-        amount = innerModel.value[ view.value ],
+        amount = innerModel.value[view.value],
         degrees = Math.round(amount * (360 / divider)) - 180
 
-      let transform = `rotate(${ degrees }deg) translateX(-50%)`
+      let transform = `rotate(${degrees}deg) translateX(-50%)`
 
       if (
-        forHour === true
-        && computedFormat24h.value === true
-        && innerModel.value.hour >= 12
+        forHour === true &&
+        computedFormat24h.value === true &&
+        innerModel.value.hour >= 12
       ) {
         transform += ' scale(.7)'
       }
@@ -168,37 +190,34 @@ export default createComponent({
     })
 
     const minLink = computed(() => innerModel.value.hour !== null)
-    const secLink = computed(() => minLink.value === true && innerModel.value.minute !== null)
+    const secLink = computed(
+      () => minLink.value === true && innerModel.value.minute !== null
+    )
 
-    const hourInSelection = computed(() => (
+    const hourInSelection = computed(() =>
       props.hourOptions !== void 0
         ? val => props.hourOptions.includes(val)
-        : (
-            props.options !== void 0
-              ? val => props.options(val, null, null)
-              : null
-          )
-    ))
+        : props.options !== void 0
+          ? val => props.options(val, null, null)
+          : null
+    )
 
-    const minuteInSelection = computed(() => (
+    const minuteInSelection = computed(() =>
       props.minuteOptions !== void 0
         ? val => props.minuteOptions.includes(val)
-        : (
-            props.options !== void 0
-              ? val => props.options(innerModel.value.hour, val, null)
-              : null
-          )
-    ))
+        : props.options !== void 0
+          ? val => props.options(innerModel.value.hour, val, null)
+          : null
+    )
 
-    const secondInSelection = computed(() => (
+    const secondInSelection = computed(() =>
       props.secondOptions !== void 0
         ? val => props.secondOptions.includes(val)
-        : (
-            props.options !== void 0
-              ? val => props.options(innerModel.value.hour, innerModel.value.minute, val)
-              : null
-          )
-    ))
+        : props.options !== void 0
+          ? val =>
+              props.options(innerModel.value.hour, innerModel.value.minute, val)
+          : null
+    )
 
     const validHours = computed(() => {
       if (hourInSelection.value === null) {
@@ -210,17 +229,17 @@ export default createComponent({
       return { am, pm, values: am.values.concat(pm.values) }
     })
 
-    const validMinutes = computed(() => (
+    const validMinutes = computed(() =>
       minuteInSelection.value !== null
         ? getValidValues(0, 59, minuteInSelection.value)
         : null
-    ))
+    )
 
-    const validSeconds = computed(() => (
+    const validSeconds = computed(() =>
       secondInSelection.value !== null
         ? getValidValues(0, 59, secondInSelection.value)
         : null
-    ))
+    )
 
     const viewValidOptions = computed(() => {
       switch (view.value) {
@@ -234,17 +253,18 @@ export default createComponent({
     })
 
     const positions = computed(() => {
-      let start, end, offset = 0, step = 1
-      const values = viewValidOptions.value !== null
-        ? viewValidOptions.value.values
-        : void 0
+      let start,
+        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
           end = 23
-        }
-        else {
+        } else {
           start = 0
           end = 11
 
@@ -252,8 +272,7 @@ export default createComponent({
             offset = 12
           }
         }
-      }
-      else {
+      } else {
         start = 0
         end = 55
         step = 5
@@ -262,12 +281,14 @@ export default createComponent({
       const pos = []
 
       for (let val = start, index = start; val <= end; val += step, index++) {
-        const
-          actualVal = val + offset,
+        const actualVal = val + offset,
           disable = values?.includes(actualVal) === false,
-          label = view.value === 'hour' && val === 0
-            ? (computedFormat24h.value === true ? '00' : '12')
-            : val
+          label =
+            view.value === 'hour' && val === 0
+              ? computedFormat24h.value === true
+                ? '00'
+                : '12'
+              : val
 
         pos.push({ val: actualVal, index, disable, label })
       }
@@ -275,8 +296,8 @@ export default createComponent({
       return pos
     })
 
-    const clockDirectives = computed(() => {
-      return [ [
+    const clockDirectives = computed(() => [
+      [
         TouchPan,
         onPan,
         void 0,
@@ -285,40 +306,42 @@ export default createComponent({
           prevent: true,
           mouse: true
         }
-      ] ]
-    })
+      ]
+    ])
 
-    watch(() => props.modelValue, v => {
-      const model = __splitDate(
-        v,
-        mask.value,
-        locale.value,
-        props.calendar,
-        defaultDateModel.value
-      )
+    watch(
+      () => props.modelValue,
+      v => {
+        const val = __splitDate(
+          v,
+          mask.value,
+          locale.value,
+          props.calendar,
+          defaultDateModel.value
+        )
 
-      if (
-        model.dateHash !== innerModel.value.dateHash
-        || model.timeHash !== innerModel.value.timeHash
-      ) {
-        innerModel.value = model
+        if (
+          val.dateHash !== innerModel.value.dateHash ||
+          val.timeHash !== innerModel.value.timeHash
+        ) {
+          innerModel.value = val
 
-        if (model.hour === null) {
-          view.value = 'hour'
-        }
-        else {
-          isAM.value = model.hour < 12
+          if (val.hour === null) {
+            view.value = 'hour'
+          } else {
+            isAM.value = val.hour < 12
+          }
         }
       }
-    })
+    )
 
-    watch([ mask, locale ], () => {
+    watch([mask, locale], () => {
       nextTick(() => {
         updateValue()
       })
     })
 
-    function setNow () {
+    function setNow() {
       const date = {
         ...getCurrentDate(),
         ...getCurrentTime()
@@ -330,7 +353,7 @@ export default createComponent({
       view.value = 'hour'
     }
 
-    function getValidValues (start, count, testFn) {
+    function getValidValues(start, count, testFn) {
       const values = Array.apply(null, { length: count + 1 })
         .map((_, index) => {
           const i = index + start
@@ -343,73 +366,73 @@ export default createComponent({
         .map(v => v.index)
 
       return {
-        min: values[ 0 ],
-        max: values[ values.length - 1 ],
+        min: values[0],
+        max: values[values.length - 1],
         values,
         threshold: count + 1
       }
     }
 
-    function getWheelDist (a, b, threshold) {
+    function getWheelDist(a, b, threshold) {
       const diff = Math.abs(a - b)
       return Math.min(diff, threshold - diff)
     }
 
-    function getNormalizedClockValue (val, { min, max, values, threshold }) {
+    function getNormalizedClockValue(val, { min, max, values, threshold }) {
       if (val === min) {
         return min
       }
 
       if (val < min || val > max) {
-        return getWheelDist(val, min, threshold) <= getWheelDist(val, max, threshold)
+        return getWheelDist(val, min, threshold) <=
+          getWheelDist(val, max, threshold)
           ? min
           : max
       }
 
-      const
-        index = values.findIndex(v => val <= v),
-        before = values[ index - 1 ],
-        after = values[ index ]
+      const index = values.findIndex(v => val <= v),
+        before = values[index - 1],
+        after = values[index]
 
-      return val - before <= after - val
-        ? before
-        : after
+      return val - before <= after - val ? before : after
     }
 
-    function getMask () {
+    function getMask() {
       return props.calendar !== 'persian' && props.mask !== null
         ? props.mask
-        : `HH:mm${ props.withSeconds === true ? ':ss' : '' }`
+        : `HH:mm${props.withSeconds === true ? ':ss' : ''}`
     }
 
-    function getDefaultDateModel () {
+    function getDefaultDateModel() {
       if (typeof props.defaultDate !== 'string') {
         const date = getCurrentDate(true)
         date.dateHash = getDayHash(date)
         return date
       }
 
-      return __splitDate(props.defaultDate, 'YYYY/MM/DD', void 0, props.calendar)
+      return __splitDate(
+        props.defaultDate,
+        'YYYY/MM/DD',
+        void 0,
+        props.calendar
+      )
     }
 
-    function shouldAbortInteraction () {
-      return vmIsDestroyed(vm) === true
+    function shouldAbortInteraction() {
+      return (
+        vmIsDestroyed(vm) === true ||
         // 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
-            )
-          )
-        )
+        (viewValidOptions.value !== null &&
+          (viewValidOptions.value.values.length === 0 ||
+            (view.value === 'hour' &&
+              computedFormat24h.value !== true &&
+              validHours.value[isAM.value === true ? 'am' : 'pm'].values
+                .length === 0)))
+      )
     }
 
-    function getClockRect () {
-      const
-        clock = clockRef.value,
+    function getClockRect() {
+      const clock = clockRef.value,
         { top, left, width } = clock.getBoundingClientRect(),
         dist = width / 2
 
@@ -420,7 +443,7 @@ export default createComponent({
       }
     }
 
-    function onPan (event) {
+    function onPan(event) {
       if (shouldAbortInteraction() === true) return
 
       if (event.isFirst === true) {
@@ -438,32 +461,28 @@ export default createComponent({
       }
     }
 
-    function goToNextView () {
+    function goToNextView() {
       if (view.value === 'hour') {
         view.value = 'minute'
-      }
-      else if (props.withSeconds && view.value === 'minute') {
+      } else if (props.withSeconds && view.value === 'minute') {
         view.value = 'second'
       }
     }
 
-    function updateClock (evt, clockRect, cacheVal) {
-      const
-        pos = position(evt),
+    function updateClock(evt, clockRect, cacheVal) {
+      const pos = position(evt),
         height = Math.abs(pos.top - clockRect.top),
         distance = Math.sqrt(
-          Math.pow(Math.abs(pos.top - clockRect.top), 2)
-          + Math.pow(Math.abs(pos.left - clockRect.left), 2)
+          Math.abs(pos.top - clockRect.top) ** 2 +
+            Math.abs(pos.left - clockRect.left) ** 2
         )
 
-      let
-        val,
+      let val,
         angle = Math.asin(height / distance) * (180 / Math.PI)
 
       if (pos.top < clockRect.top) {
         angle = clockRect.left < pos.left ? 90 - angle : 270 + angle
-      }
-      else {
+      } else {
         angle = clockRect.left < pos.left ? angle + 90 : 270 - angle
       }
 
@@ -471,20 +490,19 @@ 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 !== 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
 
           val = getNormalizedClockValue(
             val + (am === true ? 0 : 12),
-            validHours.value[ am === true ? 'am' : 'pm' ]
+            validHours.value[am === true ? 'am' : 'pm']
           )
-        }
-        else {
+        } else {
           val = Math.round(val)
 
           if (computedFormat24h.value === true) {
@@ -492,15 +510,12 @@ export default createComponent({
               if (val < 12) {
                 val += 12
               }
-            }
-            else if (val === 12) {
+            } else if (val === 12) {
               val = 0
             }
-          }
-          else if (isAM.value === true && val === 12) {
+          } else if (isAM.value === true && val === 12) {
             val = 0
-          }
-          else if (isAM.value === false && val !== 12) {
+          } else if (isAM.value === false && val !== 12) {
             val += 12
           }
         }
@@ -508,40 +523,44 @@ export default createComponent({
         if (computedFormat24h.value === true) {
           isAM.value = val < 12
         }
-      }
-      else {
+      } else {
         val = Math.round(angle / 6) % 60
 
         if (view.value === 'minute' && validMinutes.value !== null) {
           val = getNormalizedClockValue(val, validMinutes.value)
-        }
-        else if (view.value === 'second' && validSeconds.value !== null) {
+        } else if (view.value === 'second' && validSeconds.value !== null) {
           val = getNormalizedClockValue(val, validSeconds.value)
         }
       }
 
       if (cacheVal !== val) {
-        setModel[ view.value ](val)
+        setModel[view.value](val)
       }
 
       return val
     }
 
     const setView = {
-      hour () { view.value = 'hour' },
-      minute () { view.value = 'minute' },
-      second () { view.value = 'second' }
+      hour() {
+        view.value = 'hour'
+      },
+      minute() {
+        view.value = 'minute'
+      },
+      second() {
+        view.value = 'second'
+      }
     }
 
-    function setAmOnKey (e) {
-      e.keyCode === 13 && setAm()
+    function setAmOnKey(e) {
+      if (e.keyCode === 13) setAm()
     }
 
-    function setPmOnKey (e) {
-      e.keyCode === 13 && setPm()
+    function setPmOnKey(e) {
+      if (e.keyCode === 13) setPm()
     }
 
-    function onClick (evt) {
+    function onClick(evt) {
       if (shouldAbortInteraction() !== true) {
         // onMousedown() has already updated the offset
         // (on desktop only, through mousedown event)
@@ -553,55 +572,55 @@ export default createComponent({
       }
     }
 
-    function onMousedown (evt) {
+    function onMousedown(evt) {
       if (shouldAbortInteraction() !== true) {
         updateClock(evt, getClockRect())
       }
     }
 
-    function onKeyupHour (e) {
-      if (e.keyCode === 13) { // ENTER
+    function onKeyupHour(e) {
+      if (e.keyCode === 13) {
+        // ENTER
         view.value = 'hour'
-      }
-      else if ([ 37, 39 ].includes(e.keyCode)) {
+      } else if ([37, 39].includes(e.keyCode)) {
         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 === true
+              ? validHours.value.values
+              : validHours.value[isAM.value === true ? 'am' : 'pm'].values
 
           if (values.length === 0) return
 
           if (innerModel.value.hour === null) {
-            setHour(values[ 0 ])
-          }
-          else {
-            const index = (
+            setHour(values[0])
+          } else {
+            const index =
+              (values.length +
+                values.indexOf(innerModel.value.hour) +
+                payload) %
               values.length
-              + values.indexOf(innerModel.value.hour)
-              + payload
-            ) % values.length
 
-            setHour(values[ index ])
+            setHour(values[index])
           }
-        }
-        else {
-          const
-            wrap = computedFormat24h.value === true ? 24 : 12,
-            offset = computedFormat24h.value !== true && isAM.value === false ? 12 : 0,
-            val = innerModel.value.hour === null ? -payload : innerModel.value.hour
-
-          setHour(offset + (24 + val + payload) % wrap)
+        } else {
+          const wrap = computedFormat24h.value === true ? 24 : 12,
+            offset =
+              computedFormat24h.value !== true && isAM.value === false ? 12 : 0,
+            val =
+              innerModel.value.hour === null ? -payload : innerModel.value.hour
+
+          setHour(offset + ((24 + val + payload) % wrap))
         }
       }
     }
 
-    function onKeyupMinute (e) {
-      if (e.keyCode === 13) { // ENTER
+    function onKeyupMinute(e) {
+      if (e.keyCode === 13) {
+        // ENTER
         view.value = 'minute'
-      }
-      else if ([ 37, 39 ].includes(e.keyCode)) {
+      } else if ([37, 39].includes(e.keyCode)) {
         const payload = e.keyCode === 37 ? -1 : 1
 
         if (validMinutes.value !== null) {
@@ -610,30 +629,31 @@ export default createComponent({
           if (values.length === 0) return
 
           if (innerModel.value.minute === null) {
-            setMinute(values[ 0 ])
-          }
-          else {
-            const index = (
+            setMinute(values[0])
+          } else {
+            const index =
+              (values.length +
+                values.indexOf(innerModel.value.minute) +
+                payload) %
               values.length
-              + values.indexOf(innerModel.value.minute)
-              + payload
-            ) % values.length
 
-            setMinute(values[ index ])
+            setMinute(values[index])
           }
-        }
-        else {
-          const val = innerModel.value.minute === null ? -payload : innerModel.value.minute
+        } else {
+          const val =
+            innerModel.value.minute === null
+              ? -payload
+              : innerModel.value.minute
           setMinute((60 + val + payload) % 60)
         }
       }
     }
 
-    function onKeyupSecond (e) {
-      if (e.keyCode === 13) { // ENTER
+    function onKeyupSecond(e) {
+      if (e.keyCode === 13) {
+        // ENTER
         view.value = 'second'
-      }
-      else if ([ 37, 39 ].includes(e.keyCode)) {
+      } else if ([37, 39].includes(e.keyCode)) {
         const payload = e.keyCode === 37 ? -1 : 1
 
         if (validSeconds.value !== null) {
@@ -642,40 +662,41 @@ export default createComponent({
           if (values.length === 0) return
 
           if (innerModel.value.seconds === null) {
-            setSecond(values[ 0 ])
-          }
-          else {
-            const index = (
+            setSecond(values[0])
+          } else {
+            const index =
+              (values.length +
+                values.indexOf(innerModel.value.second) +
+                payload) %
               values.length
-              + values.indexOf(innerModel.value.second)
-              + payload
-            ) % values.length
 
-            setSecond(values[ index ])
+            setSecond(values[index])
           }
-        }
-        else {
-          const val = innerModel.value.second === null ? -payload : innerModel.value.second
+        } else {
+          const val =
+            innerModel.value.second === null
+              ? -payload
+              : innerModel.value.second
           setSecond((60 + val + payload) % 60)
         }
       }
     }
 
-    function setHour (hour) {
+    function setHour(hour) {
       if (innerModel.value.hour !== hour) {
         innerModel.value.hour = hour
         verifyAndUpdate()
       }
     }
 
-    function setMinute (minute) {
+    function setMinute(minute) {
       if (innerModel.value.minute !== minute) {
         innerModel.value.minute = minute
         verifyAndUpdate()
       }
     }
 
-    function setSecond (second) {
+    function setSecond(second) {
       if (innerModel.value.second !== second) {
         innerModel.value.second = second
         verifyAndUpdate()
@@ -688,7 +709,7 @@ export default createComponent({
       second: setSecond
     }
 
-    function setAm () {
+    function setAm() {
       if (isAM.value === false) {
         isAM.value = true
 
@@ -699,7 +720,7 @@ export default createComponent({
       }
     }
 
-    function setPm () {
+    function setPm() {
       if (isAM.value === true) {
         isAM.value = false
 
@@ -710,84 +731,105 @@ export default createComponent({
       }
     }
 
-    function goToViewWhenHasModel (newView) {
-      const model = props.modelValue
+    function goToViewWhenHasModel(newView) {
+      const val = props.modelValue
       if (
-        view.value !== newView
-        && model !== void 0
-        && model !== null
-        && model !== ''
-        && typeof model !== 'string'
+        view.value !== newView &&
+        val !== void 0 &&
+        val !== null &&
+        val !== '' &&
+        typeof val !== 'string'
       ) {
         view.value = newView
       }
     }
 
-    function verifyAndUpdate () {
-      if (hourInSelection.value !== null && hourInSelection.value(innerModel.value.hour) !== true) {
+    function verifyAndUpdate() {
+      if (
+        hourInSelection.value !== null &&
+        hourInSelection.value(innerModel.value.hour) !== true
+      ) {
         innerModel.value = __splitDate()
         goToViewWhenHasModel('hour')
         return
       }
 
-      if (minuteInSelection.value !== null && minuteInSelection.value(innerModel.value.minute) !== true) {
+      if (
+        minuteInSelection.value !== null &&
+        minuteInSelection.value(innerModel.value.minute) !== true
+      ) {
         innerModel.value.minute = null
         innerModel.value.second = null
         goToViewWhenHasModel('minute')
         return
       }
 
-      if (props.withSeconds === true && secondInSelection.value !== null && secondInSelection.value(innerModel.value.second) !== true) {
+      if (
+        props.withSeconds === true &&
+        secondInSelection.value !== null &&
+        secondInSelection.value(innerModel.value.second) !== true
+      ) {
         innerModel.value.second = null
         goToViewWhenHasModel('second')
         return
       }
 
       if (
-        innerModel.value.hour === null
-        || innerModel.value.minute === null
-        || (props.withSeconds === true && innerModel.value.second === null)
-      ) return
+        innerModel.value.hour === null ||
+        innerModel.value.minute === null ||
+        (props.withSeconds === true && innerModel.value.second === null)
+      ) {
+        return
+      }
 
       updateValue()
     }
 
-    function updateValue (obj) {
+    function updateValue(obj) {
       const date = Object.assign({ ...innerModel.value }, obj)
 
-      const val = props.calendar === 'persian'
-        ? pad(date.hour) + ':'
-          + pad(date.minute)
-          + (props.withSeconds === true ? ':' + pad(date.second) : '')
-        : formatDate(
-          new Date(
-            date.year,
-            date.month === null ? null : date.month - 1,
-            date.day,
-            date.hour,
-            date.minute,
-            date.second,
-            date.millisecond
-          ),
-          mask.value,
-          locale.value,
-          date.year,
-          date.timezoneOffset
-        )
+      const val =
+        props.calendar === 'persian'
+          ? pad(date.hour) +
+            ':' +
+            pad(date.minute) +
+            (props.withSeconds === true ? ':' + pad(date.second) : '')
+          : formatDate(
+              new Date(
+                date.year,
+                date.month === null ? null : date.month - 1,
+                date.day,
+                date.hour,
+                date.minute,
+                date.second,
+                date.millisecond
+              ),
+              mask.value,
+              locale.value,
+              date.year,
+              date.timezoneOffset
+            )
 
       date.changed = val !== props.modelValue
       emit('update:modelValue', val, date)
     }
 
-    function getHeader () {
+    function getHeader() {
       const label = [
-        h('div', {
-          class: 'q-time__link '
-            + (view.value === 'hour' ? 'q-time__link--active' : 'cursor-pointer'),
-          tabindex: tabindex.value,
-          onClick: setView.hour,
-          onKeyup: onKeyupHour
-        }, stringModel.value.hour),
+        h(
+          'div',
+          {
+            class:
+              'q-time__link ' +
+              (view.value === 'hour'
+                ? 'q-time__link--active'
+                : 'cursor-pointer'),
+            tabindex: tabindex.value,
+            onClick: setView.hour,
+            onKeyup: onKeyupHour
+          },
+          stringModel.value.hour
+        ),
 
         h('div', ':'),
 
@@ -795,8 +837,11 @@ export default createComponent({
           'div',
           minLink.value === true
             ? {
-                class: 'q-time__link '
-                + (view.value === 'minute' ? 'q-time__link--active' : 'cursor-pointer'),
+                class:
+                  'q-time__link ' +
+                  (view.value === 'minute'
+                    ? 'q-time__link--active'
+                    : 'cursor-pointer'),
                 tabindex: tabindex.value,
                 onKeyup: onKeyupMinute,
                 onClick: setView.minute
@@ -814,8 +859,11 @@ export default createComponent({
             'div',
             secLink.value === true
               ? {
-                  class: 'q-time__link '
-                  + (view.value === 'second' ? 'q-time__link--active' : 'cursor-pointer'),
+                  class:
+                    'q-time__link ' +
+                    (view.value === 'second'
+                      ? 'q-time__link--active'
+                      : 'cursor-pointer'),
                   tabindex: tabindex.value,
                   onKeyup: onKeyupSecond,
                   onClick: setView.second
@@ -827,117 +875,188 @@ export default createComponent({
       }
 
       const child = [
-        h('div', {
-          class: 'q-time__header-label row items-center no-wrap',
-          dir: 'ltr'
-        }, label)
+        h(
+          'div',
+          {
+            class: 'q-time__header-label row items-center no-wrap',
+            dir: 'ltr'
+          },
+          label
+        )
       ]
 
-      computedFormat24h.value === false && child.push(
-        h('div', {
-          class: 'q-time__header-ampm column items-between no-wrap'
-        }, [
-          h('div', {
-            class: 'q-time__link '
-              + (isAM.value === true ? 'q-time__link--active' : 'cursor-pointer'),
-            tabindex: tabindex.value,
-            onClick: setAm,
-            onKeyup: setAmOnKey
-          }, 'AM'),
+      if (computedFormat24h.value === false) {
+        child.push(
+          h(
+            'div',
+            {
+              class: 'q-time__header-ampm column items-between no-wrap'
+            },
+            [
+              h(
+                'div',
+                {
+                  class:
+                    'q-time__link ' +
+                    (isAM.value === true
+                      ? 'q-time__link--active'
+                      : 'cursor-pointer'),
+                  tabindex: tabindex.value,
+                  onClick: setAm,
+                  onKeyup: setAmOnKey
+                },
+                'AM'
+              ),
+
+              h(
+                'div',
+                {
+                  class:
+                    'q-time__link ' +
+                    (isAM.value !== true
+                      ? 'q-time__link--active'
+                      : 'cursor-pointer'),
+                  tabindex: tabindex.value,
+                  onClick: setPm,
+                  onKeyup: setPmOnKey
+                },
+                'PM'
+              )
+            ]
+          )
+        )
+      }
 
-          h('div', {
-            class: 'q-time__link '
-              + (isAM.value !== true ? 'q-time__link--active' : 'cursor-pointer'),
-            tabindex: tabindex.value,
-            onClick: setPm,
-            onKeyup: setPmOnKey
-          }, 'PM')
-        ])
+      return h(
+        'div',
+        {
+          class: 'q-time__header flex flex-center no-wrap ' + headerClass.value
+        },
+        child
       )
+    }
 
-      return h('div', {
-        class: 'q-time__header flex flex-center no-wrap ' + headerClass.value
-      }, child)
-    }
-
-    function getClock () {
-      const current = innerModel.value[ view.value ]
-
-      return h('div', {
-        class: 'q-time__content col relative-position'
-      }, [
-        h(Transition, {
-          name: 'q-transition--scale'
-        }, () => h('div', {
-          key: 'clock' + view.value,
-          class: 'q-time__container-parent absolute-full'
-        }, [
-          h('div', {
-            ref: clockRef,
-            class: 'q-time__container-child fit overflow-hidden'
-          }, [
-            withDirectives(
-              h('div', {
-                class: 'q-time__clock cursor-pointer non-selectable',
-                onClick,
-                onMousedown
-              }, [
-                h('div', { class: 'q-time__clock-circle fit' }, [
-                  h('div', {
-                    class: 'q-time__clock-pointer'
-                      + (innerModel.value[ view.value ] === null ? ' hidden' : (props.color !== void 0 ? ` text-${ props.color }` : '')),
-                    style: pointerStyle.value
-                  }),
-
-                  positions.value.map(pos => h('div', {
-                    class: `q-time__clock-position row flex-center q-time__clock-pos-${ pos.index }`
-                      + (pos.val === current
-                        ? ' q-time__clock-position--active ' + headerClass.value
-                        : (pos.disable === true ? ' q-time__clock-position--disable' : ''))
-                  }, [ h('span', pos.label) ]))
-                ])
-              ]),
-              clockDirectives.value
-            )
-          ])
-        ])),
-
-        props.nowBtn === true ? h(QBtn, {
-          class: 'q-time__now-button absolute',
-          icon: $q.iconSet.datetime.now,
-          unelevated: true,
-          size: 'sm',
-          round: true,
-          color: props.color,
-          textColor: props.textColor,
-          tabindex: tabindex.value,
-          onClick: setNow
-        }) : null
-      ])
+    function getClock() {
+      const current = innerModel.value[view.value]
+
+      return h(
+        'div',
+        {
+          class: 'q-time__content col relative-position'
+        },
+        [
+          h(
+            Transition,
+            {
+              name: 'q-transition--scale'
+            },
+            () =>
+              h(
+                'div',
+                {
+                  key: 'clock' + view.value,
+                  class: 'q-time__container-parent absolute-full'
+                },
+                [
+                  h(
+                    'div',
+                    {
+                      ref: clockRef,
+                      class: 'q-time__container-child fit overflow-hidden'
+                    },
+                    [
+                      withDirectives(
+                        h(
+                          'div',
+                          {
+                            class:
+                              'q-time__clock cursor-pointer non-selectable',
+                            onClick,
+                            onMousedown
+                          },
+                          [
+                            h('div', { class: 'q-time__clock-circle fit' }, [
+                              h('div', {
+                                class:
+                                  'q-time__clock-pointer' +
+                                  (innerModel.value[view.value] === null
+                                    ? ' hidden'
+                                    : props.color !== void 0
+                                      ? ` text-${props.color}`
+                                      : ''),
+                                style: pointerStyle.value
+                              }),
+
+                              positions.value.map(pos =>
+                                h(
+                                  'div',
+                                  {
+                                    class:
+                                      `q-time__clock-position row flex-center q-time__clock-pos-${pos.index}` +
+                                      (pos.val === current
+                                        ? ' q-time__clock-position--active ' +
+                                          headerClass.value
+                                        : pos.disable === true
+                                          ? ' q-time__clock-position--disable'
+                                          : '')
+                                  },
+                                  [h('span', pos.label)]
+                                )
+                              )
+                            ])
+                          ]
+                        ),
+                        clockDirectives.value
+                      )
+                    ]
+                  )
+                ]
+              )
+          ),
+
+          props.nowBtn === true
+            ? h(QBtn, {
+                class: 'q-time__now-button absolute',
+                icon: $q.iconSet.datetime.now,
+                unelevated: true,
+                size: 'sm',
+                round: true,
+                color: props.color,
+                textColor: props.textColor,
+                tabindex: tabindex.value,
+                onClick: setNow
+              })
+            : null
+        ]
+      )
     }
 
     // expose public method
     vm.proxy.setNow = setNow
 
     return () => {
-      const child = [ getClock() ]
+      const child = [getClock()]
 
       const def = hSlot(slots.default)
-      def !== void 0 && child.push(
-        h('div', { class: 'q-time__actions' }, def)
-      )
+      if (def !== void 0) {
+        child.push(h('div', { class: 'q-time__actions' }, def))
+      }
 
       if (props.name !== void 0 && props.disable !== true) {
         injectFormInput(child, 'push')
       }
 
-      return h('div', {
-        class: classes.value,
-        tabindex: -1
-      }, [
-        getHeader(),
-        h('div', { class: 'q-time__main col overflow-auto' }, child)
-      ])
+      return h(
+        'div',
+        {
+          class: classes.value,
+          tabindex: -1
+        },
+        [
+          getHeader(),
+          h('div', { class: 'q-time__main col overflow-auto' }, child)
+        ]
+      )
     }
   }
 })