quasar 2.1.0

package/src/directives/ClosePopup.js

@@ -0,0 +1,66 @@
+import { closePortals, getPortalVm } from '../utils/private/portal.js'
+import { isKeyCode } from '../utils/private/key-composition.js'
+import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+
+/*
+ * depth
+ *   < 0  --> close all chain
+ *   0    --> disabled
+ *   > 0  --> close chain up to N parent
+ */
+
+function getDepth (value) {
+  if (value === false) {
+    return 0
+  }
+  if (value === true || value === void 0) {
+    return 1
+  }
+
+  const depth = parseInt(value, 10)
+  return isNaN(depth) ? 0 : depth
+}
+
+export default __QUASAR_SSR_SERVER__
+  ? { name: 'close-popup', getSSRProps }
+  : {
+      name: 'close-popup',
+
+      beforeMount (el, { value }) {
+        const ctx = {
+          depth: getDepth(value),
+
+          handler (evt) {
+            // allow @click to be emitted
+            ctx.depth !== 0 && setTimeout(() => {
+              const vm = getPortalVm(el)
+              if (vm !== void 0) {
+                closePortals(vm, evt, ctx.depth)
+              }
+            })
+          },
+
+          handlerKey (evt) {
+            isKeyCode(evt, 13) === true && ctx.handler(evt)
+          }
+        }
+
+        el.__qclosepopup = ctx
+
+        el.addEventListener('click', ctx.handler)
+        el.addEventListener('keyup', ctx.handlerKey)
+      },
+
+      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
+      }
+    }

package/src/directives/ClosePopup.json

@@ -0,0 +1,17 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-directives/close-popup"
+  },
+
+  "value": {
+    "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",
+      "v-close-popup=\"booleanState\"",
+      "v-close-popup=\"-1\"",
+      "v-close-popup=\"2\"",
+      "v-close-popup=\"0\""
+    ]
+  }
+}

package/src/directives/Intersection.js

@@ -0,0 +1,90 @@
+import { isDeepEqual } from '../utils/private/is.js'
+import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+
+const defaultCfg = {
+  threshold: 0,
+  root: null,
+  rootMargin: '0px'
+}
+
+function update (el, ctx, value) {
+  let handler, cfg, changed
+
+  if (typeof value === 'function') {
+    handler = value
+    cfg = defaultCfg
+    changed = ctx.cfg === void 0
+  }
+  else {
+    handler = value.handler
+    cfg = Object.assign({}, defaultCfg, value.cfg)
+    changed = ctx.cfg === void 0 || isDeepEqual(ctx.cfg, cfg) === false
+  }
+
+  if (ctx.handler !== handler) {
+    ctx.handler = handler
+  }
+
+  if (changed === true) {
+    ctx.cfg = cfg
+    ctx.observer !== void 0 && ctx.observer.unobserve(el)
+
+    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
+        ) {
+          ctx.observer.unobserve(el)
+          ctx.observer.observe(el)
+          return
+        }
+
+        const res = ctx.handler(entry, ctx.observer)
+
+        if (
+          res === false
+          || (ctx.once === true && entry.isIntersecting === true)
+        ) {
+          destroy(el)
+        }
+      }
+    }, cfg)
+
+    ctx.observer.observe(el)
+  }
+}
+
+function destroy (el) {
+  const ctx = el.__qvisible
+
+  if (ctx !== void 0) {
+    ctx.observer !== void 0 && ctx.observer.unobserve(el)
+    delete el.__qvisible
+  }
+}
+
+export default __QUASAR_SSR_SERVER__
+  ? { name: 'intersection', getSSRProps }
+  : {
+      name: 'intersection',
+
+      mounted (el, { modifiers, value }) {
+        const ctx = {
+          once: modifiers.once === true
+        }
+
+        update(el, ctx, value)
+
+        el.__qvisible = ctx
+      },
+
+      updated (el, binding) {
+        const ctx = el.__qvisible
+        ctx !== void 0 && update(el, ctx, binding.value)
+      },
+
+      beforeUnmount: destroy
+    }

package/src/directives/Intersection.json

@@ -0,0 +1,231 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-directives/intersection"
+  },
+
+  "value": {
+    "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\"",
+      "v-intersection=\"{ handler: myFunction, cfg: { root: myScrollingParentEl, rootMargin: '10px 20px 30px 40px', threshold: [0, 0.25, 0.5, 0.75, 1] } }\""
+    ],
+
+    "definition": {
+      "handler": {
+        "type": "Function",
+        "desc": "The handler function to be called",
+        "returns": {
+          "type": "Boolean",
+          "desc": "If you return Boolean false from the handler, the observer stops"
+        },
+        "params": {
+          "entry": {
+            "type": "Object",
+            "desc": "The IntersectionObserverEntry object",
+            "definition": {
+              "boundingClientRect": {
+                "type": "Object",
+                "desc": "Object containing the client rect information",
+                "__exemption": [ "examples" ],
+                "definition": {
+                  "bottom": {
+                    "type": "Number",
+                    "desc": "The bottom of the client rect",
+                    "examples": [ "1770" ]
+                  },
+                  "height": {
+                    "type": "Number",
+                    "desc": "The height of the client rect",
+                    "examples": [ "50" ]
+                  },
+                  "left": {
+                    "type": "Number",
+                    "desc": "The left of the client rect",
+                    "examples": [ "49" ]
+                  },
+                  "right": {
+                    "type": "Number",
+                    "desc": "The right of the client rect",
+                    "examples": [ "384" ]
+                  },
+                  "top": {
+                    "type": "Number",
+                    "desc": "The top of the client rect",
+                    "examples": [ "1720" ]
+                  },
+                  "width": {
+                    "type": "Number",
+                    "desc": "The width of the client rect",
+                    "examples": [ "335" ]
+                  },
+                  "x": {
+                    "type": "Number",
+                    "desc": "The x position of the client rect",
+                    "examples": [ "49" ]
+                  },
+                  "y": {
+                    "type": "Number",
+                    "desc": "The y position of the client rect",
+                    "examples": [ "1720" ]
+                  }
+                }
+              },
+
+              "intersectionRatio": {
+                "type": "Number",
+                "desc": "The ratio of the observed objects visibility",
+                "examples": [ "0.5" ]
+              },
+
+              "intersectionRect": {
+                "type": "Object",
+                "desc": "Object containing the client rect information",
+                "definition": {
+                  "bottom": {
+                    "type": "Number",
+                    "desc": "The bottom of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "height": {
+                    "type": "Number",
+                    "desc": "The height of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "left": {
+                    "type": "Number",
+                    "desc": "The left of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "right": {
+                    "type": "Number",
+                    "desc": "The right of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "top": {
+                    "type": "Number",
+                    "desc": "The top of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "width": {
+                    "type": "Number",
+                    "desc": "The width of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "x": {
+                    "type": "Number",
+                    "desc": "The x position of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "y": {
+                    "type": "Number",
+                    "desc": "The y position of the client rect",
+                    "examples": [ "0" ]
+                  }
+                }
+              },
+
+              "isIntersecting": {
+                "type": "Boolean",
+                "desc": "It is Boolean true if intersecting the scrollable area"
+              },
+
+              "rootBounds": {
+                "type": "Object",
+                "desc": "Object containing the client rect information",
+                "definition": {
+                  "bottom": {
+                    "type": "Number",
+                    "desc": "The bottom of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "height": {
+                    "type": "Number",
+                    "desc": "The height of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "left": {
+                    "type": "Number",
+                    "desc": "The left of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "right": {
+                    "type": "Number",
+                    "desc": "The right of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "top": {
+                    "type": "Number",
+                    "desc": "The top of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "width": {
+                    "type": "Number",
+                    "desc": "The width of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "x": {
+                    "type": "Number",
+                    "desc": "The x position of the client rect",
+                    "examples": [ "0" ]
+                  },
+                  "y": {
+                    "type": "Number",
+                    "desc": "The y position of the client rect",
+                    "examples": [ "0" ]
+                  }
+                }
+              },
+
+              "target": {
+                "type": "Element",
+                "desc": "The target element",
+                "__exemption": [ "examples" ]
+              },
+
+              "time": {
+                "type": "Number",
+                "desc": "The timestamp of the event",
+                "examples": [ "6316.879999998491" ]
+              }
+            }
+          }
+        }
+      },
+
+      "cfg": {
+        "type": "Object",
+        "desc": "Intersection observer options (can be omitted and all its props are optional)",
+        "definition": {
+          "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" ]
+          },
+
+          "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" ]
+          },
+
+          "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 ]" ]
+          }
+        }
+      }
+    }
+  },
+
+  "modifiers": {
+    "once": {
+      "type": "Boolean",
+      "desc": "Call handler only once, when the conditions are first met",
+      "examples": [
+        "v-intersection.once"
+      ]
+    }
+  }
+}

package/src/directives/Morph.js

@@ -0,0 +1,211 @@
+import morph from '../utils/morph.js'
+import getSSRProps from './Morph.ssr.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'
+]
+
+function changeClass (ctx, action) {
+  if (ctx.clsAction !== action) {
+    ctx.clsAction = action
+    ctx.el.classList[ action ]('q-morph--invisible')
+  }
+}
+
+function trigger (group) {
+  if (group.animating === true || group.queue.length < 2) {
+    return
+  }
+
+  const [ from, to ] = group.queue
+
+  group.animating = true
+  from.animating = true
+  to.animating = true
+
+  changeClass(from, 'remove')
+  changeClass(to, 'remove')
+
+  const cancelFn = morph({
+    from: from.el,
+    to: to.el,
+    onToggle () {
+      changeClass(from, 'add')
+      changeClass(to, 'remove')
+    },
+    ...to.opts,
+    onEnd (dir, aborted) {
+      to.opts.onEnd !== void 0 && to.opts.onEnd(dir, aborted)
+
+      if (aborted === true) {
+        return
+      }
+
+      from.animating = false
+      to.animating = false
+
+      group.animating = false
+      group.cancel = void 0
+      group.queue.shift()
+
+      trigger(group)
+    }
+  })
+
+  group.cancel = () => {
+    cancelFn(true) // abort
+    group.cancel = void 0
+  }
+}
+
+function updateModifiers (mod, ctx) {
+  const opts = ctx.opts
+
+  mods.forEach(name => {
+    opts[ name ] = mod[ name ] === true
+  })
+}
+
+function insertArgs (arg, ctx) {
+  const opts = typeof arg === 'string' && arg.length > 0
+    ? arg.split(':') : []
+
+  ctx.name = opts[ 0 ]
+  ctx.group = opts[ 1 ]
+
+  Object.assign(ctx.opts, {
+    duration: isNaN(opts[ 2 ]) === true
+      ? 300
+      : parseFloat(opts[ 2 ]),
+    waitFor: opts[ 3 ]
+  })
+}
+
+function updateArgs (arg, ctx) {
+  if (arg.group !== void 0) {
+    ctx.group = arg.group
+  }
+  if (arg.name !== void 0) {
+    ctx.name = arg.name
+  }
+
+  const opts = ctx.opts
+
+  props.forEach(name => {
+    if (arg[ name ] !== void 0) {
+      opts[ name ] = arg[ name ]
+    }
+  })
+}
+
+function updateModel (name, ctx) {
+  if (ctx.name === name) {
+    const group = morphGroups[ ctx.group ]
+
+    // if group is not registered
+    if (group === void 0) {
+      morphGroups[ ctx.group ] = {
+        name: ctx.group,
+        model: name,
+        queue: [ ctx ],
+        animating: false
+      }
+
+      changeClass(ctx, 'remove')
+    }
+    // if model changed
+    else if (group.model !== name) {
+      group.model = name
+      group.queue.push(ctx)
+
+      if (group.animating === false && group.queue.length === 2) {
+        trigger(group)
+      }
+    }
+
+    return
+  }
+
+  if (ctx.animating === false) {
+    changeClass(ctx, 'add')
+  }
+}
+
+function updateValue (ctx, value) {
+  let model
+
+  if (Object(value) === value) {
+    model = '' + value.model
+    updateArgs(value, ctx)
+    updateModifiers(value, ctx)
+  }
+  else {
+    model = '' + value
+  }
+
+  if (model !== ctx.model) {
+    ctx.model = model
+    updateModel(model, ctx)
+  }
+  else if (ctx.animating === false && ctx.clsAction !== void 0) {
+    // ensure HMR
+    ctx.el.classList[ ctx.clsAction ]('q-morph--invisible')
+  }
+}
+
+export default __QUASAR_SSR_SERVER__
+  ? { name: 'morph', getSSRProps }
+  : {
+      name: 'morph',
+
+      mounted (el, binding) {
+        const ctx = {
+          el,
+          animating: false,
+          opts: {}
+        }
+
+        updateModifiers(binding.modifiers, ctx)
+        insertArgs(binding.arg, ctx)
+        updateValue(ctx, binding.value)
+
+        el.__qmorph = ctx
+      },
+
+      updated (el, binding) {
+        updateValue(el.__qmorph, binding.value)
+      },
+
+      beforeUnmount (el) {
+        const ctx = el.__qmorph
+
+        const group = morphGroups[ ctx.group ]
+
+        if (group !== void 0) {
+          const index = group.queue.indexOf(ctx)
+
+          if (index !== -1) {
+            group.queue = group.queue.filter(item => item !== ctx)
+
+            if (group.queue.length === 0) {
+              group.cancel !== void 0 && group.cancel()
+              delete morphGroups[ ctx.group ]
+            }
+          }
+        }
+
+        if (ctx.clsAction === 'add') {
+          el.classList.remove('q-morph--invisible')
+        }
+
+        delete el.__qmorph
+      }
+    }