quasar 2.4.11 → 2.5.1

package/src/composables/private/use-validate.js

@@ -37,12 +37,16 @@ export default function (focused, innerLoading) {
   let validateIndex = 0, unwatchRules
 
   const hasRules = computed(() =>
-    props.disable !== true
-    && props.rules !== void 0
+    props.rules !== void 0
     && props.rules !== null
     && props.rules.length > 0
   )
 
+  const hasActiveRules = computed(() =>
+    props.disable !== true
+    && hasRules.value === true
+  )
+
   const hasError = computed(() =>
     props.error === true || innerError.value === true
   )
@@ -80,7 +84,14 @@ export default function (focused, innerLoading) {
     else if (isDirtyModel.value === false) {
       isDirtyModel.value = true
 
-      if (hasRules.value === true && props.lazyRules !== 'ondemand') {
+      if (
+        hasActiveRules.value === true
+        && props.lazyRules !== 'ondemand'
+        // Don't re-trigger if it's already in progress;
+        // It might mean that focus switched to submit btn and
+        // QForm's submit() has been called already (ENTER key)
+        && innerLoading.value === false
+      ) {
         debouncedValidate()
       }
     }
@@ -102,11 +113,11 @@ export default function (focused, innerLoading) {
    *   - Promise (pending async validation)
    */
   function validate (val = props.modelValue) {
-    if (hasRules.value !== true) {
+    if (hasActiveRules.value !== true) {
       return true
     }
 
-    validateIndex++
+    const index = ++validateIndex
 
     if (innerLoading.value !== true && props.lazyRules !== true) {
       isDirtyModel.value = true
@@ -123,9 +134,7 @@ export default function (focused, innerLoading) {
         innerErrorMessage.value = m
       }
 
-      if (innerLoading.value !== false) {
-        innerLoading.value = false
-      }
+      innerLoading.value = false
     }
 
     const promises = []
@@ -155,42 +164,33 @@ export default function (focused, innerLoading) {
       return true
     }
 
-    if (innerLoading.value !== true) {
-      innerLoading.value = true
-    }
-
-    const index = validateIndex
+    innerLoading.value = true
 
     return Promise.all(promises).then(
       res => {
-        if (index !== validateIndex) {
-          return true
-        }
-
         if (res === void 0 || Array.isArray(res) === false || res.length === 0) {
-          update(false)
+          index === validateIndex && update(false)
           return true
         }
 
         const msg = res.find(r => r === false || typeof r === 'string')
-        update(msg !== void 0, msg)
+        index === validateIndex && update(msg !== void 0, msg)
         return msg === void 0
       },
       e => {
         if (index === validateIndex) {
           console.error(e)
           update(true)
-          return false
         }
 
-        return true
+        return false
       }
     )
   }
 
   function validateIfNeeded (changedRules) {
     if (
-      hasRules.value === true
+      hasActiveRules.value === true
       && props.lazyRules !== 'ondemand'
       && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
     ) {

package/src/plugins/BottomSheet.json

@@ -33,6 +33,7 @@
               "definition": {
                 "classes": {
                   "type": [ "String", "Array", "Object" ],
+                  "tsType": "VueClassProp",
                   "desc": "CSS classes for this action",
                   "examples": [ "my-class" ]
                 },

package/src/plugins/Dialog.json

@@ -14,6 +14,7 @@
         "opts": {
           "desc": "Dialog options",
           "tsType": "QDialogOptions",
+          "autoDefineTsType": true,
           "definition": {
             "title": {
               "type": "String",

package/src/plugins/Meta.js

@@ -140,7 +140,7 @@ function apply ({ add, remove }) {
 function getAttr (seed) {
   return att => {
     const val = seed[ att ]
-    return att + (val !== void 0 ? `="${ val }"` : '')
+    return att + (val !== true && val !== void 0 ? `="${ val }"` : '')
   }
 }
 

package/src/plugins/Notify.json

@@ -254,7 +254,8 @@
               ]
             },
             "badgeStyle": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueStyleProp",
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
@@ -262,7 +263,8 @@
               ]
             },
             "badgeClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
@@ -275,7 +277,8 @@
               "desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)"
             },
             "progressClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",
@@ -406,7 +409,8 @@
                 "desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)"
               },
               "progressClass": {
-                "type": [ "Array", "String", "Object" ],
+                "type": [ "String", "Array", "Object" ],
+                "tsType": "VueClassProp",
                 "desc": "Class definitions to be attributed to the progress bar",
                 "examples": [
                   "my-special-class",
@@ -566,7 +570,8 @@
               "examples": [ "bottom-right" ]
             },
             "badgeStyle": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueStyleProp",
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
@@ -574,7 +579,8 @@
               ]
             },
             "badgeClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
@@ -587,7 +593,8 @@
               "desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)"
             },
             "progressClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",
@@ -746,7 +753,8 @@
               "examples": [ "bottom-right" ]
             },
             "badgeStyle": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueStyleProp",
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
@@ -754,7 +762,8 @@
               ]
             },
             "badgeClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
@@ -767,7 +776,8 @@
               "desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)"
             },
             "progressClass": {
-              "type": [ "Array", "String", "Object" ],
+              "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",

package/src/plugins/Screen.js

@@ -58,12 +58,19 @@ export default defineReactivePlugin({
       return
     }
 
+    const { visualViewport } = window
+    const target = visualViewport || window
+    const getSize = visualViewport === void 0
+      ? () => [ window.innerWidth, window.innerHeight ]
+      : () => [
+          visualViewport.width * visualViewport.scale + window.innerWidth - document.scrollingElement.clientWidth,
+          visualViewport.height * visualViewport.scale + window.innerHeight - document.scrollingElement.clientHeight
+        ]
+
     const classes = $q.config.screen !== void 0 && $q.config.screen.bodyClasses === true
 
     this.__update = force => {
-      const
-        w = window.innerWidth,
-        h = window.innerHeight
+      const [ w, h ] = getSize()
 
       if (h !== this.height) {
         this.height = h
@@ -121,11 +128,7 @@ export default defineReactivePlugin({
     }
 
     const start = () => {
-      const
-        style = getComputedStyle(document.body),
-        target = window.visualViewport !== void 0
-          ? window.visualViewport
-          : window
+      const style = getComputedStyle(document.body)
 
       // if css props available
       if (style.getPropertyValue('--q-size-sm')) {

package/src/utils/date.js

@@ -174,19 +174,18 @@ function formatTimezone (offset, delimeter = '') {
 function applyYearMonthDayChange (date, mod, sign) {
   let
     year = date.getFullYear(),
-    month = date.getMonth(),
-    day = date.getDate()
+    month = date.getMonth()
 
-  if (mod.years !== void 0) {
-    year += sign * mod.years
-  }
+  const day = date.getDate()
 
-  if (mod.months !== void 0) {
-    month += sign * mod.months
+  if (mod.year !== void 0) {
+    year += sign * mod.year
+    delete mod.year
   }
 
-  if (mod.days !== void 0) {
-    day += sign * mod.days
+  if (mod.month !== void 0) {
+    month += sign * mod.month
+    delete mod.month
   }
 
   date.setDate(1)
@@ -194,26 +193,14 @@ function applyYearMonthDayChange (date, mod, sign) {
 
   date.setFullYear(year)
   date.setMonth(month)
-  date.setDate(day)
-
-  return date
-}
+  date.setDate(Math.min(day, daysInMonth(date)))
 
-function getChange (date, mod, sign) {
-  const
-    d = new Date(date),
-    t = mod.years !== void 0 || mod.months !== void 0 || mod.days !== void 0
-      ? applyYearMonthDayChange(d, mod, sign)
-      : d
-
-  for (const key in mod) {
-    if (key !== 'years' && key !== 'months' && key !== 'days') {
-      const op = capitalize(key)
-      t[ `set${ op }` ](t[ `get${ op }` ]() + sign * mod[ key ])
-    }
+  if (mod.date !== void 0) {
+    date.setDate(date.getDate() + sign * mod.date)
+    delete mod.date
   }
 
-  return t
+  return date
 }
 
 function applyYearMonthDay (date, mod, middle) {
@@ -230,22 +217,86 @@ function applyYearMonthDay (date, mod, middle) {
   date[ `set${ middle }Month` ](month)
   date[ `set${ middle }Date` ](day)
 
+  delete mod.year
+  delete mod.month
+  delete mod.date
+
   return date
 }
 
-export function adjustDate (date, mod, utc) {
+function getChange (date, rawMod, sign) {
   const
+    mod = normalizeMod(rawMod),
+    d = new Date(date),
+    t = mod.year !== void 0 || mod.month !== void 0 || mod.date !== void 0
+      ? applyYearMonthDayChange(d, mod, sign) // removes year/month/day
+      : d
+
+  for (const key in mod) {
+    const op = capitalize(key)
+    t[ `set${ op }` ](t[ `get${ op }` ]() + sign * mod[ key ])
+  }
+
+  return t
+}
+
+function normalizeMod (mod) {
+  const acc = { ...mod }
+
+  if (mod.years !== void 0) {
+    acc.year = mod.years
+    delete acc.years
+  }
+
+  if (mod.months !== void 0) {
+    acc.month = mod.months
+    delete acc.months
+  }
+
+  if (mod.days !== void 0) {
+    acc.date = mod.days
+    delete acc.days
+  }
+  if (mod.day !== void 0) {
+    acc.date = mod.day
+    delete acc.day
+  }
+
+  if (mod.hour !== void 0) {
+    acc.hours = mod.hour
+    delete acc.hour
+  }
+
+  if (mod.minute !== void 0) {
+    acc.minutes = mod.minute
+    delete acc.minute
+  }
+
+  if (mod.second !== void 0) {
+    acc.seconds = mod.second
+    delete acc.second
+  }
+
+  if (mod.millisecond !== void 0) {
+    acc.milliseconds = mod.millisecond
+    delete acc.millisecond
+  }
+
+  return acc
+}
+
+export function adjustDate (date, rawMod, utc) {
+  const
+    mod = normalizeMod(rawMod),
     middle = utc === true ? 'UTC' : '',
     d = new Date(date),
     t = mod.year !== void 0 || mod.month !== void 0 || mod.date !== void 0
-      ? applyYearMonthDay(d, mod, middle)
+      ? applyYearMonthDay(d, mod, middle) // removes year/month/day
       : d
 
   for (const key in mod) {
-    if (key !== 'year' && key !== 'month' && key !== 'date') {
-      const op = key.charAt(0).toUpperCase() + key.slice(1)
-      t[ `set${ middle }${ op }` ](mod[ key ])
-    }
+    const op = key.charAt(0).toUpperCase() + key.slice(1)
+    t[ `set${ middle }${ op }` ](mod[ key ])
   }
 
   return t
@@ -479,16 +530,23 @@ export function startOfDate (date, unit, utc) {
 
   switch (unit) {
     case 'year':
+    case 'years':
       t[ `${ prefix }Month` ](0)
     case 'month':
+    case 'months':
       t[ `${ prefix }Date` ](1)
     case 'day':
+    case 'days':
+    case 'date':
       t[ `${ prefix }Hours` ](0)
     case 'hour':
+    case 'hours':
       t[ `${ prefix }Minutes` ](0)
     case 'minute':
+    case 'minutes':
       t[ `${ prefix }Seconds` ](0)
     case 'second':
+    case 'seconds':
       t[ `${ prefix }Milliseconds` ](0)
   }
   return t
@@ -501,16 +559,23 @@ export function endOfDate (date, unit, utc) {
 
   switch (unit) {
     case 'year':
+    case 'years':
       t[ `${ prefix }Month` ](11)
     case 'month':
+    case 'months':
       t[ `${ prefix }Date` ](daysInMonth(t))
     case 'day':
+    case 'days':
+    case 'date':
       t[ `${ prefix }Hours` ](23)
     case 'hour':
+    case 'hours':
       t[ `${ prefix }Minutes` ](59)
     case 'minute':
+    case 'minutes':
       t[ `${ prefix }Seconds` ](59)
     case 'second':
+    case 'seconds':
       t[ `${ prefix }Milliseconds` ](999)
   }
   return t
@@ -546,21 +611,28 @@ export function getDateDiff (date, subtract, unit = 'days') {
 
   switch (unit) {
     case 'years':
+    case 'year':
       return (t.getFullYear() - sub.getFullYear())
 
     case 'months':
+    case 'month':
       return (t.getFullYear() - sub.getFullYear()) * 12 + t.getMonth() - sub.getMonth()
 
     case 'days':
+    case 'day':
+    case 'date':
       return getDiff(startOfDate(t, 'day'), startOfDate(sub, 'day'), MILLISECONDS_IN_DAY)
 
     case 'hours':
+    case 'hour':
       return getDiff(startOfDate(t, 'hour'), startOfDate(sub, 'hour'), MILLISECONDS_IN_HOUR)
 
     case 'minutes':
+    case 'minute':
       return getDiff(startOfDate(t, 'minute'), startOfDate(sub, 'minute'), MILLISECONDS_IN_MINUTE)
 
     case 'seconds':
+    case 'second':
       return getDiff(startOfDate(t, 'second'), startOfDate(sub, 'second'), 1000)
   }
 }
@@ -606,26 +678,33 @@ export function isSameDate (date, date2, unit) {
 
   switch (unit) {
     case 'second':
+    case 'seconds':
       if (t.getSeconds() !== d.getSeconds()) {
         return false
       }
     case 'minute': // intentional fall-through
+    case 'minutes':
       if (t.getMinutes() !== d.getMinutes()) {
         return false
       }
     case 'hour': // intentional fall-through
+    case 'hours':
       if (t.getHours() !== d.getHours()) {
         return false
       }
     case 'day': // intentional fall-through
+    case 'days':
+    case 'date':
       if (t.getDate() !== d.getDate()) {
         return false
       }
     case 'month': // intentional fall-through
+    case 'months':
       if (t.getMonth() !== d.getMonth()) {
         return false
       }
     case 'year': // intentional fall-through
+    case 'years':
       if (t.getFullYear() !== d.getFullYear()) {
         return false
       }

package/src/utils/private/global-dialog.json

@@ -9,12 +9,14 @@
           "definition": {
             "class": {
               "type": [ "String", "Array", "Object" ],
+              "tsType": "VueClassProp",
               "desc": "CSS Class name to apply to the Dialog's QCard",
               "examples": [ "my-class" ]
             },
 
             "style": {
               "type": [ "String", "Array", "Object" ],
+              "tsType": "VueStyleProp",
               "desc": "CSS style to apply to the Dialog's QCard",
               "examples": [ "border: 2px solid black" ]
             }
@@ -26,6 +28,7 @@
         "type": "Object",
         "desc": "Chainable Object",
         "tsType": "DialogChainObject",
+        "autoDefineTsType": true,
         "definition": {
           "onOk": {
             "type": "Function",

package/src/utils/private/vm.js

@@ -15,19 +15,25 @@ export function getParentVm (vm) {
   }
 }
 
+function fillNormalizedVNodes (children, vnode) {
+  if (typeof vnode.type === 'symbol') {
+    if (Array.isArray(vnode.children) === true) {
+      vnode.children.forEach(child => {
+        fillNormalizedVNodes(children, child)
+      })
+    }
+  }
+  else {
+    children.add(vnode)
+  }
+}
+
 // vnodes from rendered in advanced slots
 export function getNormalizedVNodes (vnodes) {
   const children = new Set()
 
   vnodes.forEach(vnode => {
-    if (typeof vnode.type === 'symbol' && Array.isArray(vnode.children) === true) {
-      vnode.children.forEach(child => {
-        children.add(child)
-      })
-    }
-    else {
-      children.add(vnode)
-    }
+    fillNormalizedVNodes(children, vnode)
   })
 
   return Array.from(children)