quasar 2.3.3 → 2.4.2

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

@@ -2,6 +2,8 @@ import { ref, computed, watch, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useFormChild from '../use-form-child.js'
 import { testPattern } from '../../utils/patterns.js'
+import { debounce } from '../../utils.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 const lazyRulesValues = [ true, false, 'ondemand' ]
 
@@ -35,7 +37,8 @@ export default function (focused, innerLoading) {
   let validateIndex = 0, unwatchRules
 
   const hasRules = computed(() =>
-    props.rules !== void 0
+    props.disable !== true
+    && props.rules !== void 0
     && props.rules !== null
     && props.rules.length > 0
   )
@@ -44,7 +47,7 @@ export default function (focused, innerLoading) {
     props.error === true || innerError.value === true
   )
 
-  const computedErrorMessage = computed(() => (
+  const errorMessage = computed(() => (
     typeof props.errorMessage === 'string' && props.errorMessage.length > 0
       ? props.errorMessage
       : innerErrorMessage.value
@@ -69,15 +72,16 @@ export default function (focused, innerLoading) {
   }, { immediate: true })
 
   watch(focused, val => {
-    if (props.lazyRules !== 'ondemand') {
-      if (val === true) {
-        if (isDirtyModel.value === null) {
-          isDirtyModel.value = false
-        }
+    if (val === true) {
+      if (isDirtyModel.value === null) {
+        isDirtyModel.value = false
       }
-      else if (isDirtyModel.value === false && hasRules.value === true) {
-        isDirtyModel.value = true
-        validate()
+    }
+    else if (isDirtyModel.value === false) {
+      isDirtyModel.value = true
+
+      if (hasRules.value === true && props.lazyRules !== 'ondemand') {
+        debouncedValidate()
       }
     }
   })
@@ -88,6 +92,7 @@ export default function (focused, innerLoading) {
     isDirtyModel.value = null
     innerError.value = false
     innerErrorMessage.value = null
+    debouncedValidate.cancel()
   }
 
   /*
@@ -189,25 +194,26 @@ export default function (focused, innerLoading) {
       && props.lazyRules !== 'ondemand'
       && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
     ) {
-      validate()
+      debouncedValidate()
     }
   }
 
+  const debouncedValidate = debounce(validate, 0)
+
   onBeforeUnmount(() => {
     unwatchRules !== void 0 && unwatchRules()
+    debouncedValidate.cancel()
   })
 
   // expose public methods & props
   Object.assign(proxy, { resetValidation, validate })
-  Object.defineProperty(proxy, 'hasError', {
-    get: () => hasError.value
-  })
+  injectProp(proxy, 'hasError', () => hasError.value)
 
   return {
     isDirtyModel,
     hasRules,
     hasError,
-    computedErrorMessage,
+    errorMessage,
 
     validate,
     resetValidation

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

@@ -28,6 +28,7 @@
 
     "rules": {
       "type": "Array",
+      "tsType": "ValidationRule",
       "desc": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules",
       "examples": [
         ":rules=\"[ val => val.length <= 3 || 'Please use maximum 3 characters' ]\"",

package/src/css/core/helpers.sass

@@ -49,6 +49,9 @@
   outline: 0
   text-decoration: none
 
+  &--focusable:focus-visible
+    text-decoration: underline dashed currentColor 1px
+
 body.electron
   .q-electron-drag
     -webkit-user-select: none

package/src/css/core/positioning.sass

@@ -69,6 +69,11 @@
   max-width: 100vw
   max-height: 100vh
 
+body.q-ios-padding .fullscreen
+  padding-top: $ios-statusbar-height !important
+  padding-top: env(safe-area-inset-top) !important
+  padding-bottom: env(safe-area-inset-bottom) !important
+
 .absolute-full, .fullscreen, .fixed-full
   top: 0
   right: 0

package/src/css/variables.sass

@@ -39,20 +39,18 @@ $flex-gutter: ('none': 0, 'xs': $flex-gutter-xs, 'sm': $flex-gutter-sm, 'md': $f
 // sorry for long line; we need .sass and it doesn't support multi-line list
 $sizes: ('xs': 0, 'sm': ($breakpoint-xs + 1), 'md': ($breakpoint-sm + 1), 'lg': ($breakpoint-md + 1), 'xl': ($breakpoint-lg + 1)) !default
 
-$breakpoint-xs-min: 0 !default
-$breakpoint-xs-max: $breakpoint-xs !default
+$breakpoint-xs-max: (map-get($sizes, "sm") - 0.02) !default
 
 $breakpoint-sm-min: map-get($sizes, "sm") !default
-$breakpoint-sm-max: $breakpoint-sm !default
+$breakpoint-sm-max: (map-get($sizes, "md") - 0.02) !default
 
 $breakpoint-md-min: map-get($sizes, "md") !default
-$breakpoint-md-max: $breakpoint-md !default
+$breakpoint-md-max: (map-get($sizes, "lg") - 0.02) !default
 
 $breakpoint-lg-min: map-get($sizes, "lg") !default
-$breakpoint-lg-max: $breakpoint-lg !default
+$breakpoint-lg-max: (map-get($sizes, "xl") - 0.02) !default
 
 $breakpoint-xl-min: map-get($sizes, "xl") !default
-$breakpoint-xl-max: 9999px !default
 
 $h1:        (size: 6rem,     line-height: 6rem,     letter-spacing: -.01562em, weight: 300) !default
 $h2:        (size: 3.75rem,  line-height: 3.75rem,  letter-spacing: -.00833em, weight: 300) !default

package/src/directives/ScrollFire.js

@@ -61,6 +61,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
       beforeUnmount (el) {
         const ctx = el.__qscrollfire
         ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, passive)
+        ctx.scroll.cancel()
         delete el.__qscrollfire
       }
     }

package/src/icon-set.js

@@ -1,5 +1,6 @@
 import defineReactivePlugin from './utils/private/define-reactive-plugin.js'
 import materialIcons from '../icon-set/material-icons.js'
+import { injectProp } from './utils/private/inject-obj-prop.js'
 
 const Plugin = defineReactivePlugin({
   iconMapFn: null,
@@ -42,10 +43,7 @@ const Plugin = defineReactivePlugin({
 
       $q.iconSet = this.__icons
 
-      Object.defineProperty($q, 'iconMapFn', {
-        get: () => this.iconMapFn,
-        set: val => { this.iconMapFn = val }
-      })
+      injectProp($q, 'iconMapFn', () => this.iconMapFn, val => { this.iconMapFn = val })
 
       if (this.__installed === true) {
         iconSet !== void 0 && this.set(iconSet)

package/src/plugins/AppFullscreen.js

@@ -3,15 +3,41 @@ import { changeGlobalNodesTarget } from '../utils/private/global-nodes.js'
 
 const prefixes = {}
 
+function assignFn (fn) {
+  Object.assign(Plugin, {
+    request: fn,
+    exit: fn,
+    toggle: fn
+  })
+}
+
 function getFullscreenElement () {
   return (
     document.fullscreenElement
     || document.mozFullScreenElement
     || document.webkitFullscreenElement
     || document.msFullscreenElement
+    || null
   )
 }
 
+function updateEl () {
+  const newEl = Plugin.activeEl = Plugin.isActive === false
+    ? null
+    : getFullscreenElement()
+
+  changeGlobalNodesTarget(
+    newEl === null || newEl === document.documentElement
+      ? document.body
+      : newEl
+  )
+}
+
+function togglePluginState () {
+  Plugin.isActive = Plugin.isActive === false
+  updateEl()
+}
+
 // needed for consistency across browsers
 function promisify (target, fn) {
   try {
@@ -31,80 +57,71 @@ const Plugin = defineReactivePlugin({
 }, {
   isCapable: false,
 
-  request (target) {
-    if (Plugin.isCapable === true && Plugin.isActive === false) {
-      const el = target || document.documentElement
-      return promisify(el, prefixes.request)
-    }
-
-    return Plugin.__getErr()
-  },
-
-  exit () {
-    return Plugin.isCapable === true && Plugin.isActive === true
-      ? promisify(document, prefixes.exit)
-      : Plugin.__getErr()
-  },
-
-  toggle (target) {
-    return Plugin.isActive === true
-      ? Plugin.exit()
-      : Plugin.request(target)
-  },
-
   install ({ $q }) {
     $q.fullscreen = this
   }
 })
 
-if (__QUASAR_SSR_SERVER__ !== true) {
-  function init () {
-    prefixes.request = [
-      'requestFullscreen',
-      'msRequestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen'
-    ].find(request => document.documentElement[ request ] !== void 0)
+if (__QUASAR_SSR_SERVER__ === true) {
+  assignFn(() => Promise.resolve())
+}
+else {
+  prefixes.request = [
+    'requestFullscreen',
+    'msRequestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen'
+  ].find(request => document.documentElement[ request ] !== void 0)
 
-    Plugin.isCapable = prefixes.request !== void 0
+  Plugin.isCapable = prefixes.request !== void 0
 
-    if (Plugin.isCapable === false) {
-      // it means the browser does NOT support it
-      Plugin.__getErr = () => Promise.reject('Not capable')
-      return
-    }
+  if (Plugin.isCapable === false) {
+    // it means the browser does NOT support it
+    assignFn(() => Promise.reject('Not capable'))
+  }
+  else {
+    Object.assign(Plugin, {
+      request (target) {
+        const el = target || document.documentElement
+        const { activeEl } = Plugin
+
+        if (el === activeEl) {
+          return Promise.resolve()
+        }
+
+        const queue = activeEl !== null && el.contains(activeEl) === true
+          ? Plugin.exit()
+          : Promise.resolve()
 
-    Plugin.__getErr = () => Promise.resolve()
+        return queue.finally(() => promisify(el, prefixes.request))
+      },
+
+      exit () {
+        return Plugin.isActive === true
+          ? promisify(document, prefixes.exit)
+          : Promise.resolve()
+      },
+
+      toggle (target) {
+        return Plugin.isActive === true
+          ? Plugin.exit()
+          : Plugin.request(target)
+      }
+    })
 
     prefixes.exit = [
       'exitFullscreen',
       'msExitFullscreen', 'mozCancelFullScreen', 'webkitExitFullscreen'
     ].find(exit => document[ exit ])
 
-    Plugin.isActive = !!getFullscreenElement()
+    Plugin.isActive = Boolean(getFullscreenElement())
+    Plugin.isActive === true && updateEl()
 
     ;[
       'onfullscreenchange',
       'onmsfullscreenchange', 'onwebkitfullscreenchange'
     ].forEach(evt => {
-      document[ evt ] = () => {
-        Plugin.isActive = Plugin.isActive === false
-
-        if (Plugin.isActive === false) {
-          Plugin.activeEl = null
-          changeGlobalNodesTarget(document.body)
-        }
-        else {
-          Plugin.activeEl = getFullscreenElement()
-          changeGlobalNodesTarget(
-            Plugin.activeEl === document.documentElement
-              ? document.body
-              : Plugin.activeEl
-          )
-        }
-      }
+      document[ evt ] = togglePluginState
     })
   }
-
-  init()
 }
 
 export default Plugin

package/src/plugins/AppVisibility.js

@@ -1,4 +1,5 @@
 import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
+import { injectProp } from '../utils/private/inject-obj-prop.js'
 
 const Plugin = defineReactivePlugin({
   appVisible: true
@@ -9,9 +10,7 @@ const Plugin = defineReactivePlugin({
       return
     }
 
-    Object.defineProperty($q, 'appVisible', {
-      get: () => this.appVisible
-    })
+    injectProp($q, 'appVisible', () => this.appVisible)
   }
 })
 

package/src/plugins/BottomSheet.js

@@ -3,11 +3,9 @@ import globalDialog from '../utils/private/global-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {
-    if (this.__installed === true) {
-      $q.bottomSheet = globalDialog(BottomSheet, false, parentApp)
-    }
-    else {
-      this.create = $q.bottomSheet = globalDialog(BottomSheet, false, parentApp)
+    $q.bottomSheet = globalDialog(BottomSheet, false, parentApp)
+    if (this.__installed !== true) {
+      this.create = $q.bottomSheet
     }
   }
 }

package/src/plugins/Dialog.js

@@ -3,11 +3,9 @@ import globalDialog from '../utils/private/global-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {
-    if (this.__installed === true) {
-      $q.dialog = globalDialog(DialogPlugin, true, parentApp)
-    }
-    else {
-      this.create = $q.dialog = globalDialog(DialogPlugin, true, parentApp)
+    $q.dialog = globalDialog(DialogPlugin, true, parentApp)
+    if (this.__installed !== true) {
+      this.create = $q.dialog
     }
   }
 }

package/src/plugins/Dialog.json

@@ -306,9 +306,8 @@
             },
 
             "component": {
-              "type": "Any",
-              "desc": "Use custom dialog component; use along with 'componentProps' prop where possible",
-              "__exemption": [ "examples" ]
+              "type": "Component",
+              "desc": "Use custom dialog component; use along with 'componentProps' prop where possible"
             },
 
             "componentProps": {

package/src/plugins/LoadingBar.js

@@ -7,9 +7,9 @@ import { createChildApp } from '../install-quasar.js'
 
 import QAjaxBar from '../components/ajax-bar/QAjaxBar.js'
 
-const reqProps = { ref: 'bar' }
+const barRef = ref(null)
 
-export default defineReactivePlugin({
+const Plugin = defineReactivePlugin({
   isActive: false
 }, {
   start: noop,
@@ -31,41 +31,40 @@ export default defineReactivePlugin({
 
     const props = ref(
       $q.config.loadingBar !== void 0
-        ? { ...$q.config.loadingBar, ...reqProps }
-        : { ...reqProps }
+        ? { ...$q.config.loadingBar }
+        : {}
     )
 
     const el = createGlobalNode('q-loading-bar')
 
-    const vm = createChildApp({
+    createChildApp({
       name: 'LoadingBar',
 
       // hide App from Vue devtools
       devtools: { hide: true },
 
-      setup: () => () => h(QAjaxBar, props.value)
+      setup: () => () => h(QAjaxBar, { ...props.value, ref: barRef })
     }, parentApp).mount(el)
 
     Object.assign(this, {
-      start: speed => {
-        const bar = vm.$refs.bar
-        bar.start(speed)
-        this.isActive = bar.calls > 0
+      start (speed) {
+        barRef.value.start(speed)
+        Plugin.isActive = barRef.value.calls > 0
       },
-      stop: () => {
-        const bar = vm.$refs.bar
-        bar.stop()
-        this.isActive = bar.calls > 0
+      stop () {
+        barRef.value.stop()
+        Plugin.isActive = barRef.value.calls > 0
       },
       increment () {
-        const bar = vm.$refs.bar
-        bar.increment.apply(null, arguments)
+        barRef.value.increment.apply(null, arguments)
       },
-      setDefaults: opts => {
+      setDefaults (opts) {
         if (opts === Object(opts)) {
-          props.value = { ...props.value, ...opts, ...reqProps }
+          Object.assign(props.value, opts)
         }
       }
     })
   }
 })
+
+export default Plugin