quasar 2.18.7 → 2.19.0

package/src/css/core/helpers.sass

@@ -13,18 +13,13 @@
   background-image: linear-gradient(to bottom, rgba(#fff, .3), rgba(#fff, 0) 50%, rgba(#000, .12) 51%, rgba(#000, .04)) !important
 
 .q-placeholder
-  &::-webkit-input-placeholder
-    color: inherit
-    opacity: .7
-  &::-moz-placeholder
-    color: inherit
-    opacity: .7
   &:-ms-input-placeholder
     color: inherit !important
     opacity: .7 !important
-  &::-ms-input-placeholder
-    color: inherit
-    opacity: .7
+
+  &::-webkit-input-placeholder,
+  &::-moz-placeholder,
+  &::-ms-input-placeholder,
   &::placeholder
     color: inherit
     opacity: .7

package/src/directives/close-popup/ClosePopup.js

@@ -1,5 +1,8 @@
 import { createDirective } from '../../utils/private.create/create.js'
-import { closePortals, getPortalProxy } from '../../utils/private.portal/portal.js'
+import {
+  closePortals,
+  getPortalProxy
+} from '../../utils/private.portal/portal.js'
 import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
 import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
@@ -10,7 +13,7 @@ import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-s
  *   > 0  --> close chain up to N parent
  */
 
-function getDepth (value) {
+function getDepth(value) {
   if (value === false) {
     return 0
   }
@@ -22,47 +25,50 @@ function getDepth (value) {
   return isNaN(depth) ? 0 : depth
 }
 
-export default createDirective(__QUASAR_SSR_SERVER__
-  ? { name: 'close-popup', getSSRProps }
-  : {
-      name: 'close-popup',
+export default createDirective(
+  __QUASAR_SSR_SERVER__
+    ? { name: 'close-popup', getSSRProps }
+    : {
+        name: 'close-popup',
 
-      beforeMount (el, { value }) {
-        const ctx = {
-          depth: getDepth(value),
+        beforeMount(el, { value }) {
+          const ctx = {
+            depth: getDepth(value),
 
-          handler (evt) {
-            // allow @click to be emitted
-            ctx.depth !== 0 && setTimeout(() => {
-              const proxy = getPortalProxy(el)
-              if (proxy !== void 0) {
-                closePortals(proxy, evt, ctx.depth)
+            handler(evt) {
+              // allow @click to be emitted
+              if (ctx.depth !== 0) {
+                setTimeout(() => {
+                  const proxy = getPortalProxy(el)
+                  if (proxy !== void 0) {
+                    closePortals(proxy, evt, ctx.depth)
+                  }
+                })
               }
-            })
-          },
+            },
 
-          handlerKey (evt) {
-            isKeyCode(evt, 13) === true && ctx.handler(evt)
+            handlerKey(evt) {
+              if (isKeyCode(evt, 13) === true) ctx.handler(evt)
+            }
           }
-        }
 
-        el.__qclosepopup = ctx
+          el.__qclosepopup = ctx
 
-        el.addEventListener('click', ctx.handler)
-        el.addEventListener('keyup', ctx.handlerKey)
-      },
+          el.addEventListener('click', ctx.handler)
+          el.addEventListener('keyup', ctx.handlerKey)
+        },
 
-      updated (el, { value, oldValue }) {
-        if (value !== oldValue) {
-          el.__qclosepopup.depth = getDepth(value)
-        }
-      },
+        updated(el, { value, oldValue }) {
+          if (value !== oldValue) {
+            el.__qclosepopup.depth = getDepth(value)
+          }
+        },
 
-      beforeUnmount (el) {
-        const ctx = el.__qclosepopup
-        el.removeEventListener('click', ctx.handler)
-        el.removeEventListener('keyup', ctx.handlerKey)
-        delete el.__qclosepopup
+        beforeUnmount(el) {
+          const ctx = el.__qclosepopup
+          el.removeEventListener('click', ctx.handler)
+          el.removeEventListener('keyup', ctx.handlerKey)
+          delete el.__qclosepopup
+        }
       }
-    }
 )

package/src/directives/close-popup/ClosePopup.json

@@ -4,7 +4,7 @@
   },
 
   "value": {
-    "type": [ "Boolean", "Number", "String" ],
+    "type": ["Boolean", "Number", "String"],
     "desc": "If value is 0 or 'false' then directive is disabled; if value is < 0 then it closes all popups in the chain; if value is 1 or 'true' or undefined then it closes only the parent popup; if value is > 1 it closes the specified number of parent popups in the chain (note that chained QMenus are considered 1 popup only & QPopupProxy separates chained menus)",
     "examples": [
       "# v-close-popup",

package/src/directives/intersection/Intersection.js

@@ -8,15 +8,14 @@ const defaultCfg = {
   rootMargin: '0px'
 }
 
-function update (el, ctx, value) {
+function update(el, ctx, value) {
   let handler, cfg, changed
 
   if (typeof value === 'function') {
     handler = value
     cfg = defaultCfg
     changed = ctx.cfg === void 0
-  }
-  else {
+  } else {
     handler = value.handler
     cfg = Object.assign({}, defaultCfg, value.cfg)
     changed = ctx.cfg === void 0 || isDeepEqual(ctx.cfg, cfg) === false
@@ -30,14 +29,11 @@ function update (el, ctx, value) {
     ctx.cfg = cfg
     ctx.observer?.unobserve(el)
 
-    ctx.observer = new IntersectionObserver(([ entry ]) => {
+    ctx.observer = new IntersectionObserver(([entry]) => {
       if (typeof ctx.handler === 'function') {
         // if observed element is part of a vue transition
         // then we need to be careful...
-        if (
-          entry.rootBounds === null
-          && document.body.contains(el) === true
-        ) {
+        if (entry.rootBounds === null && document.body.contains(el) === true) {
           ctx.observer.unobserve(el)
           ctx.observer.observe(el)
           return
@@ -46,8 +42,8 @@ function update (el, ctx, value) {
         const res = ctx.handler(entry, ctx.observer)
 
         if (
-          res === false
-          || (ctx.once === true && entry.isIntersecting === true)
+          res === false ||
+          (ctx.once === true && entry.isIntersecting === true)
         ) {
           destroy(el)
         }
@@ -58,7 +54,7 @@ function update (el, ctx, value) {
   }
 }
 
-function destroy (el) {
+function destroy(el) {
   const ctx = el.__qvisible
 
   if (ctx !== void 0) {
@@ -67,26 +63,27 @@ function destroy (el) {
   }
 }
 
-export default createDirective(__QUASAR_SSR_SERVER__
-  ? { name: 'intersection', getSSRProps }
-  : {
-      name: 'intersection',
+export default createDirective(
+  __QUASAR_SSR_SERVER__
+    ? { name: 'intersection', getSSRProps }
+    : {
+        name: 'intersection',
 
-      mounted (el, { modifiers, value }) {
-        const ctx = {
-          once: modifiers.once === true
-        }
+        mounted(el, { modifiers, value }) {
+          const ctx = {
+            once: modifiers.once === true
+          }
 
-        update(el, ctx, value)
+          update(el, ctx, value)
 
-        el.__qvisible = ctx
-      },
+          el.__qvisible = ctx
+        },
 
-      updated (el, binding) {
-        const ctx = el.__qvisible
-        ctx !== void 0 && update(el, ctx, binding.value)
-      },
+        updated(el, binding) {
+          const ctx = el.__qvisible
+          if (ctx !== void 0) update(el, ctx, binding.value)
+        },
 
-      beforeUnmount: destroy
-    }
+        beforeUnmount: destroy
+      }
 )

package/src/directives/intersection/Intersection.json

@@ -4,7 +4,7 @@
   },
 
   "value": {
-    "type": [ "Object", "Function" ],
+    "type": ["Object", "Function"],
     "desc": "Function to call when scrolling occurs (identical to description of 'handler' prop of the Object form); If using the Object form, it is HIGHLY recommended to reference it from your vue component scope, otherwise the directive update cycle will continuously recreate the observer which hits performance hard",
     "examples": [
       "# v-intersection=\"myFunction\"",
@@ -160,7 +160,7 @@
               "time": {
                 "type": "Number",
                 "desc": "The timestamp of the event",
-                "examples": [ "6316.879999998491" ]
+                "examples": ["6316.879999998491"]
               }
             }
           }
@@ -174,19 +174,19 @@
           "root": {
             "type": "Element",
             "desc": "Lets you define an alternative to the viewport as your root (through its DOM element); It is important to keep in mind that root needs to be an ancestor of the observed element",
-            "examples": [ "myScrollingParentEl" ]
+            "examples": ["myScrollingParentEl"]
           },
 
           "rootMargin": {
             "type": "String",
             "desc": "Allows you to specify the margins for the root, effectively allowing you to either grow or shrink the area used for intersections",
-            "examples": [ "'10px 20px 30px 40px'" ]
+            "examples": ["'10px 20px 30px 40px'"]
           },
 
           "threshold": {
             "type": "Array",
             "desc": "Threshold(s) at which to trigger callback, specified as a ratio, or list of ratios, of (visible area / total area) of the observed element",
-            "examples": [ "[ 0, 0.25, 0.5, 0.75, 1 ]" ]
+            "examples": ["[0, 0.25, 0.5, 0.75, 1]"]
           }
         }
       }
@@ -209,7 +209,7 @@
     "once": {
       "type": "Boolean",
       "desc": "Call handler only once, when the conditions are first met",
-      "examples": [ "# v-intersection.once" ]
+      "examples": ["# v-intersection.once"]
     }
   }
 }

package/src/directives/morph/Morph.js

@@ -3,30 +3,36 @@ import morph from '../../utils/morph/morph.js'
 
 const morphGroups = {}
 const props = [
-  'duration', 'delay', 'easing', 'fill',
-  'classes', 'style', 'duration', 'resize',
-  'useCSS', 'hideFromClone', 'keepToClone', 'tween',
-  'tweenFromOpacity', 'tweenToOpacity',
-  'waitFor', 'onEnd'
-]
-const mods = [
-  'resize', 'useCSS', 'hideFromClone', 'keepToClone', 'tween'
+  'duration',
+  'delay',
+  'easing',
+  'fill',
+  'classes',
+  'style',
+  'duration',
+  'resize',
+  'useCSS',
+  'hideFromClone',
+  'keepToClone',
+  'tween',
+  'tweenFromOpacity',
+  'tweenToOpacity',
+  'waitFor',
+  'onEnd'
 ]
+const mods = ['resize', 'useCSS', 'hideFromClone', 'keepToClone', 'tween']
 
-function changeClass (ctx, action) {
+function changeClass(ctx, action) {
   if (ctx.clsAction !== action) {
     ctx.clsAction = action
-    ctx.el.classList[ action ]('q-morph--invisible')
+    ctx.el.classList[action]('q-morph--invisible')
   }
 }
 
-function trigger (group) {
-  if (
-    group.animating === true
-    || group.queue.length < 2
-  ) return
+function trigger(group) {
+  if (group.animating === true || group.queue.length < 2) return
 
-  const [ from, to ] = group.queue
+  const [from, to] = group.queue
 
   group.animating = true
   from.animating = true
@@ -38,12 +44,12 @@ function trigger (group) {
   const cancelFn = morph({
     from: from.el,
     to: to.el,
-    onToggle () {
+    onToggle() {
       changeClass(from, 'add')
       changeClass(to, 'remove')
     },
     ...to.opts,
-    onEnd (dir, aborted) {
+    onEnd(dir, aborted) {
       to.opts.onEnd?.(dir, aborted)
 
       if (aborted === true) return
@@ -65,30 +71,27 @@ function trigger (group) {
   }
 }
 
-function updateModifiers (mod, ctx) {
+function updateModifiers(mod, ctx) {
   const opts = ctx.opts
 
   mods.forEach(name => {
-    opts[ name ] = mod[ name ] === true
+    opts[name] = mod[name] === true
   })
 }
 
-function insertArgs (arg, ctx) {
-  const opts = typeof arg === 'string' && arg.length !== 0
-    ? arg.split(':') : []
+function insertArgs(arg, ctx) {
+  const opts = typeof arg === 'string' && arg.length !== 0 ? arg.split(':') : []
 
-  ctx.name = opts[ 0 ]
-  ctx.group = opts[ 1 ]
+  ctx.name = opts[0]
+  ctx.group = opts[1]
 
   Object.assign(ctx.opts, {
-    duration: isNaN(opts[ 2 ]) === true
-      ? 300
-      : parseFloat(opts[ 2 ]),
-    waitFor: opts[ 3 ]
+    duration: isNaN(opts[2]) === true ? 300 : parseFloat(opts[2]),
+    waitFor: opts[3]
   })
 }
 
-function updateArgs (arg, ctx) {
+function updateArgs(arg, ctx) {
   if (arg.group !== void 0) {
     ctx.group = arg.group
   }
@@ -99,22 +102,22 @@ function updateArgs (arg, ctx) {
   const opts = ctx.opts
 
   props.forEach(name => {
-    if (arg[ name ] !== void 0) {
-      opts[ name ] = arg[ name ]
+    if (arg[name] !== void 0) {
+      opts[name] = arg[name]
     }
   })
 }
 
-function updateModel (name, ctx) {
+function updateModel(name, ctx) {
   if (ctx.name === name) {
-    const group = morphGroups[ ctx.group ]
+    const group = morphGroups[ctx.group]
 
     // if group is not registered
     if (group === void 0) {
-      morphGroups[ ctx.group ] = {
+      morphGroups[ctx.group] = {
         name: ctx.group,
         model: name,
-        queue: [ ctx ],
+        queue: [ctx],
         animating: false
       }
 
@@ -138,85 +141,82 @@ function updateModel (name, ctx) {
   }
 }
 
-function updateValue (ctx, value) {
+function updateValue(ctx, value) {
   let model
 
   if (Object(value) === value) {
-    model = '' + value.model
+    model = String(value.model)
     updateArgs(value, ctx)
     updateModifiers(value, ctx)
-  }
-  else {
-    model = '' + value
+  } else {
+    model = String(value)
   }
 
   if (model !== ctx.model) {
     ctx.model = model
     updateModel(model, ctx)
-  }
-  else if (ctx.animating === false && ctx.clsAction !== void 0) {
+  } else if (ctx.animating === false && ctx.clsAction !== void 0) {
     // ensure HMR
-    ctx.el.classList[ ctx.clsAction ]('q-morph--invisible')
+    ctx.el.classList[ctx.clsAction]('q-morph--invisible')
   }
 }
 
-export default createDirective(__QUASAR_SSR_SERVER__
-  ? {
-      name: 'morph',
-      getSSRProps: binding => {
-        const name = binding.arg
-          ? binding.arg.split(':')[ 0 ]
-          : false
+export default createDirective(
+  __QUASAR_SSR_SERVER__
+    ? {
+        name: 'morph',
+        getSSRProps: binding => {
+          const name = binding.arg ? binding.arg.split(':')[0] : false
 
-        return {
-          class: name === binding.value ? '' : 'q-morph--invisible'
+          return {
+            class: name === binding.value ? '' : 'q-morph--invisible'
+          }
         }
       }
-    }
-  : {
-      name: 'morph',
-
-      mounted (el, binding) {
-        const ctx = {
-          el,
-          animating: false,
-          opts: {}
-        }
+    : {
+        name: 'morph',
+
+        mounted(el, binding) {
+          const ctx = {
+            el,
+            animating: false,
+            opts: {}
+          }
 
-        updateModifiers(binding.modifiers, ctx)
-        insertArgs(binding.arg, ctx)
-        updateValue(ctx, binding.value)
+          updateModifiers(binding.modifiers, ctx)
+          insertArgs(binding.arg, ctx)
+          updateValue(ctx, binding.value)
 
-        el.__qmorph = ctx
-      },
+          el.__qmorph = ctx
+        },
 
-      updated (el, binding) {
-        updateValue(el.__qmorph, binding.value)
-      },
+        updated(el, binding) {
+          updateValue(el.__qmorph, binding.value)
+        },
 
-      beforeUnmount (el) {
-        const ctx = el.__qmorph
+        beforeUnmount(el) {
+          const ctx = el.__qmorph
 
-        const group = morphGroups[ ctx.group ]
+          const group = morphGroups[ctx.group]
 
-        if (group !== void 0) {
-          const index = group.queue.indexOf(ctx)
+          if (group !== void 0) {
+            const index = group.queue.indexOf(ctx)
 
-          if (index !== -1) {
-            group.queue = group.queue.filter(item => item !== ctx)
+            if (index !== -1) {
+              group.queue = group.queue.filter(item => item !== ctx)
 
-            if (group.queue.length === 0) {
-              group.cancel?.()
-              delete morphGroups[ ctx.group ]
+              if (group.queue.length === 0) {
+                group.cancel?.()
+                delete morphGroups[ctx.group]
+              }
             }
           }
-        }
 
-        if (ctx.clsAction === 'add') {
-          el.classList.remove('q-morph--invisible')
-        }
+          if (ctx.clsAction === 'add') {
+            el.classList.remove('q-morph--invisible')
+          }
 
-        delete el.__qmorph
+          delete el.__qmorph
+        }
       }
-    }
 )

package/src/directives/morph/Morph.json

@@ -4,25 +4,25 @@
   },
 
   "value": {
-    "type": [ "Object", "Any" ],
+    "type": ["Object", "Any"],
     "desc": "Configuration object or trigger value",
     "definition": {
       "group": {
         "type": "String",
         "desc": "Name of the morph group the element belongs to",
-        "examples": [ "'dialogGroup'" ]
+        "examples": ["'dialogGroup'"]
       },
 
       "name": {
         "type": "String",
         "desc": "Name of the morph inside the group that the element belongs to",
-        "examples": [ "'btn'" ]
+        "examples": ["'btn'"]
       },
 
       "model": {
         "type": "String",
         "desc": "Current value of the group model; when it becomes the same as the 'name' it triggers the morphing",
-        "examples": [ "'btn'" ]
+        "examples": ["'btn'"]
       },
 
       "duration": {
@@ -41,26 +41,26 @@
         "type": "String",
         "desc": "Timing function for the animation (CSS easing format)",
         "default": "'ease-in-out'",
-        "examples": [ "'ease-out'" ]
+        "examples": ["'ease-out'"]
       },
 
       "fill": {
         "type": "String",
         "desc": "Fill mode for the animation",
         "default": "'none'",
-        "examples": [ "'forward'" ]
+        "examples": ["'forward'"]
       },
 
       "classes": {
         "type": "String",
         "desc": "Class names to be added to the destination element during the animation",
-        "examples": [ "'bg-grey-2'" ]
+        "examples": ["'bg-grey-2'"]
       },
 
       "style": {
-        "type": [ "String", "Object" ],
+        "type": ["String", "Object"],
         "desc": "Styles to be added to the destination element during the animation",
-        "examples": [ "'border-radius: 20px'" ]
+        "examples": ["'border-radius: 20px'"]
       },
 
       "resize": {
@@ -101,10 +101,10 @@
       },
 
       "waitFor": {
-        "type": [ "Number", "String", "Promise<void>" ],
+        "type": ["Number", "String", "Promise<void>"],
         "desc": "Delay animation start for that number of milliseconds, or until a 'transitionend' event is emitted by the destination element, or until the promise is resolved (if the promise is rejected the morphing will abort, but the 'toggle function' was already called)",
         "default": "0",
-        "examples": [ "300", "'200'", "'transitionend'" ]
+        "examples": ["300", "'200'", "'transitionend'"]
       },
 
       "onEnd": {
@@ -115,14 +115,16 @@
           "direction": {
             "type": "String",
             "desc": "'to' if the morphing was finished in the final state or 'from' if it was finished in the initial state",
-            "values": [ "'to'", "'from'" ]
+            "values": ["'to'", "'from'"]
           },
           "aborted": {
             "type": "Boolean",
             "desc": "Was the morphing aborted?"
           }
         },
-        "examples": [ "(direction, _aborted) => { if (direction !== 'to') { /* revertLogic() */ } }" ]
+        "examples": [
+          "(direction, _aborted) => { if (direction !== 'to') { /* revertLogic() */ } }"
+        ]
       }
     },