quasar 2.18.7 → 2.19.0

package/src/directives/mutation/Mutation.js

@@ -10,7 +10,7 @@ const defaultCfg = {
   characterDataOldValue: true
 }
 
-function update (el, ctx, value) {
+function update(el, ctx, value) {
   ctx.handler = value
   ctx.observer?.disconnect()
 
@@ -26,7 +26,7 @@ function update (el, ctx, value) {
   ctx.observer.observe(el, ctx.opts)
 }
 
-function destroy (el) {
+function destroy(el) {
   const ctx = el.__qmutation
 
   if (ctx !== void 0) {
@@ -35,31 +35,30 @@ function destroy (el) {
   }
 }
 
-export default createDirective(__QUASAR_SSR_SERVER__
-  ? { name: 'mutation', getSSRProps }
-  : {
-      name: 'mutation',
+export default createDirective(
+  __QUASAR_SSR_SERVER__
+    ? { name: 'mutation', getSSRProps }
+    : {
+        name: 'mutation',
 
-      mounted (el, { modifiers: { once, ...mod }, value }) {
-        const ctx = {
-          once,
-          opts: Object.keys(mod).length === 0
-            ? defaultCfg
-            : mod
-        }
+        mounted(el, { modifiers: { once, ...mod }, value }) {
+          const ctx = {
+            once,
+            opts: Object.keys(mod).length === 0 ? defaultCfg : mod
+          }
 
-        update(el, ctx, value)
+          update(el, ctx, value)
 
-        el.__qmutation = ctx
-      },
+          el.__qmutation = ctx
+        },
 
-      updated (el, { oldValue, value }) {
-        const ctx = el.__qmutation
-        if (ctx !== void 0 && oldValue !== value) {
-          update(el, ctx, value)
-        }
-      },
+        updated(el, { oldValue, value }) {
+          const ctx = el.__qmutation
+          if (ctx !== void 0 && oldValue !== value) {
+            update(el, ctx, value)
+          }
+        },
 
-      beforeUnmount: destroy
-    }
+        beforeUnmount: destroy
+      }
 )

package/src/directives/mutation/Mutation.json

@@ -4,9 +4,9 @@
   },
 
   "value": {
-    "type": [ "Function" ],
+    "type": ["Function"],
     "desc": "Function to call when mutation occurs; 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=\"myHandler\"" ],
+    "examples": ["# v-intersection=\"myHandler\""],
 
     "returns": {
       "type": "Boolean",
@@ -21,7 +21,7 @@
           "type": {
             "type": "String",
             "desc": "Type of mutation",
-            "values": [ "'childList'", "'attributes'", "'characterData'" ]
+            "values": ["'childList'", "'attributes'", "'characterData'"]
           },
 
           "target": {
@@ -52,7 +52,7 @@
           "attributeName": {
             "type": "String",
             "desc": "The local name of the changed attribute, or null",
-            "examples": [ "'some-attribute'" ]
+            "examples": ["'some-attribute'"]
           },
 
           "attributeNamespace": {
@@ -73,43 +73,43 @@
     "once": {
       "type": "Boolean",
       "desc": "Call handler only once, when the first mutation was triggered, then stop monitoring",
-      "examples": [ "# v-mutation.once" ]
+      "examples": ["# v-mutation.once"]
     },
 
     "childList": {
       "type": "Boolean",
       "desc": "Monitor the target node (and, if 'subtree' is also set, its descendants) for the addition of new child nodes or removal of existing child nodes",
-      "examples": [ "# v-mutation.childList" ]
+      "examples": ["# v-mutation.childList"]
     },
 
     "subtree": {
       "type": "Boolean",
       "desc": "Extend monitoring to the entire subtree of nodes rooted at target",
-      "examples": [ "# v-mutation.subtree" ]
+      "examples": ["# v-mutation.subtree"]
     },
 
     "attributes": {
       "type": "Boolean",
       "desc": "Watch for changes to the value of attributes on the node or nodes being monitored",
-      "examples": [ "# v-mutation.attributes" ]
+      "examples": ["# v-mutation.attributes"]
     },
 
     "characterData": {
       "type": "Boolean",
       "desc": "Monitor the specified target node or subtree for changes to the character data contained within the node or nodes",
-      "examples": [ "# v-mutation.characterData" ]
+      "examples": ["# v-mutation.characterData"]
     },
 
     "attributeOldValue": {
       "type": "Boolean",
       "desc": "Record the previous value of any attribute that changes when monitoring the node or nodes for attribute changes",
-      "examples": [ "# v-mutation.attributeOldValue" ]
+      "examples": ["# v-mutation.attributeOldValue"]
     },
 
     "characterDataOldValue": {
       "type": "Boolean",
       "desc": "Record the previous value of a node's text whenever the text changes on nodes being monitored",
-      "examples": [ "# v-mutation.characterDataOldValue" ]
+      "examples": ["# v-mutation.characterDataOldValue"]
     }
   }
 }

package/src/directives/ripple/Ripple.js

@@ -5,34 +5,33 @@ import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
 import throttle from '../../utils/throttle/throttle.js'
 import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
-function showRipple (evt, el, ctx, forceCenter) {
-  ctx.modifiers.stop === true && stop(evt)
+function showRipple(evt, el, ctx, forceCenter) {
+  if (ctx.modifiers.stop === true) stop(evt)
 
   const color = ctx.modifiers.color
   let center = ctx.modifiers.center
   center = center === true || forceCenter === true
 
-  const
-    node = document.createElement('span'),
+  const node = document.createElement('span'),
     innerNode = document.createElement('span'),
     pos = position(evt),
     { left, top, width, height } = el.getBoundingClientRect(),
     diameter = Math.sqrt(width * width + height * height),
     radius = diameter / 2,
-    centerX = `${ (width - diameter) / 2 }px`,
-    x = center ? centerX : `${ pos.left - left - radius }px`,
-    centerY = `${ (height - diameter) / 2 }px`,
-    y = center ? centerY : `${ pos.top - top - radius }px`
+    centerX = `${(width - diameter) / 2}px`,
+    x = center ? centerX : `${pos.left - left - radius}px`,
+    centerY = `${(height - diameter) / 2}px`,
+    y = center ? centerY : `${pos.top - top - radius}px`
 
   innerNode.className = 'q-ripple__inner'
   css(innerNode, {
-    height: `${ diameter }px`,
-    width: `${ diameter }px`,
-    transform: `translate3d(${ x },${ y },0) scale3d(.2,.2,1)`,
+    height: `${diameter}px`,
+    width: `${diameter}px`,
+    transform: `translate3d(${x},${y},0) scale3d(.2,.2,1)`,
     opacity: 0
   })
 
-  node.className = `q-ripple${ color ? ' text-' + color : '' }`
+  node.className = `q-ripple${color ? ' text-' + color : ''}`
   node.setAttribute('dir', 'ltr')
   node.appendChild(innerNode)
   el.appendChild(node)
@@ -45,7 +44,7 @@ function showRipple (evt, el, ctx, forceCenter) {
 
   let timer = setTimeout(() => {
     innerNode.classList.add('q-ripple__inner--enter')
-    innerNode.style.transform = `translate3d(${ centerX },${ centerY },0) scale3d(1,1,1)`
+    innerNode.style.transform = `translate3d(${centerX},${centerY},0) scale3d(1,1,1)`
     innerNode.style.opacity = 0.2
 
     timer = setTimeout(() => {
@@ -61,7 +60,7 @@ function showRipple (evt, el, ctx, forceCenter) {
   }, 50)
 }
 
-function updateModifiers (ctx, { modifiers, value, arg }) {
+function updateModifiers(ctx, { modifiers, value, arg }) {
   const cfg = Object.assign({}, ctx.cfg.ripple, modifiers, value)
   ctx.modifiers = {
     early: cfg.early === true,
@@ -72,76 +71,86 @@ function updateModifiers (ctx, { modifiers, value, arg }) {
   }
 }
 
-export default createDirective(__QUASAR_SSR_SERVER__
-  ? { name: 'ripple', getSSRProps }
-  : {
-      name: 'ripple',
-
-      beforeMount (el, binding) {
-        const cfg = binding.instance.$.appContext.config.globalProperties.$q.config || {}
-
-        if (cfg.ripple === false) return
-
-        const ctx = {
-          cfg,
-          enabled: binding.value !== false,
-          modifiers: {},
-          abort: [],
-
-          start (evt) {
-            if (
-              ctx.enabled === true
-              && evt.qSkipRipple !== true
-              && evt.type === (ctx.modifiers.early === true ? 'pointerdown' : 'click')
-            ) {
-              showRipple(evt, el, ctx, evt.qKeyEvent === true)
-            }
-          },
-
-          keystart: throttle(evt => {
-            if (
-              ctx.enabled === true
-              && evt.qSkipRipple !== true
-              && isKeyCode(evt, ctx.modifiers.keyCodes) === true
-              && evt.type === `key${ ctx.modifiers.early === true ? 'down' : 'up' }`
-            ) {
-              showRipple(evt, el, ctx, true)
-            }
-          }, 300)
-        }
-
-        updateModifiers(ctx, binding)
-
-        el.__qripple = ctx
+export default createDirective(
+  __QUASAR_SSR_SERVER__
+    ? { name: 'ripple', getSSRProps }
+    : {
+        name: 'ripple',
+
+        beforeMount(el, binding) {
+          const cfg =
+            binding.instance.$.appContext.config.globalProperties.$q.config ||
+            {}
+
+          if (cfg.ripple === false) return
+
+          const ctx = {
+            cfg,
+            enabled: binding.value !== false,
+            modifiers: {},
+            abort: [],
+
+            start(evt) {
+              if (
+                ctx.enabled === true &&
+                evt.qSkipRipple !== true &&
+                evt.type ===
+                  (ctx.modifiers.early === true ? 'pointerdown' : 'click')
+              ) {
+                showRipple(evt, el, ctx, evt.qKeyEvent === true)
+              }
+            },
+
+            keystart: throttle(evt => {
+              if (
+                ctx.enabled === true &&
+                evt.qSkipRipple !== true &&
+                isKeyCode(evt, ctx.modifiers.keyCodes) === true &&
+                evt.type ===
+                  `key${ctx.modifiers.early === true ? 'down' : 'up'}`
+              ) {
+                showRipple(evt, el, ctx, true)
+              }
+            }, 300)
+          }
 
-        addEvt(ctx, 'main', [
-          [ el, 'pointerdown', 'start', 'passive' ],
-          [ el, 'click', 'start', 'passive' ],
-          [ el, 'keydown', 'keystart', 'passive' ],
-          [ el, 'keyup', 'keystart', 'passive' ]
-        ])
-      },
+          updateModifiers(ctx, binding)
+
+          el.__qripple = ctx
+
+          addEvt(ctx, 'main', [
+            [el, 'pointerdown', 'start', 'passive'],
+            [el, 'click', 'start', 'passive'],
+            [el, 'keydown', 'keystart', 'passive'],
+            [el, 'keyup', 'keystart', 'passive']
+          ])
+        },
+
+        updated(el, binding) {
+          if (binding.oldValue !== binding.value) {
+            const ctx = el.__qripple
+            if (ctx !== void 0) {
+              ctx.enabled = binding.value !== false
+
+              if (
+                ctx.enabled === true &&
+                Object(binding.value) === binding.value
+              ) {
+                updateModifiers(ctx, binding)
+              }
+            }
+          }
+        },
 
-      updated (el, binding) {
-        if (binding.oldValue !== binding.value) {
+        beforeUnmount(el) {
           const ctx = el.__qripple
           if (ctx !== void 0) {
-            ctx.enabled = binding.value !== false
-
-            if (ctx.enabled === true && Object(binding.value) === binding.value) {
-              updateModifiers(ctx, binding)
-            }
+            ctx.abort.forEach(fn => {
+              fn()
+            })
+            cleanEvt(ctx, 'main')
+            delete el._qripple
           }
         }
-      },
-
-      beforeUnmount (el) {
-        const ctx = el.__qripple
-        if (ctx !== void 0) {
-          ctx.abort.forEach(fn => { fn() })
-          cleanEvt(ctx, 'main')
-          delete el._qripple
-        }
       }
-    }
 )

package/src/directives/ripple/Ripple.json

@@ -25,19 +25,19 @@
       "color": {
         "type": "String",
         "desc": "Color name from Quasar Color Palette; Overrides default dynamic color",
-        "examples": [ "'orange-5'" ]
+        "examples": ["'orange-5'"]
       },
 
       "keyCodes": {
-        "type": [ "Array", "Number" ],
+        "type": ["Array", "Number"],
         "desc": "List of keyCode that should trigger the ripple",
-        "examples": [ "[]", "[ 13, 32 ]" ]
+        "examples": ["[]", "[13, 32]"]
       }
     }
   },
 
   "value": {
-    "type": [ "Boolean", "Object" ],
+    "type": ["Boolean", "Object"],
     "desc": "Boolean (if just wanting to enable/disable) or Object for configuring more options",
     "definition": {
       "early": {
@@ -58,13 +58,13 @@
       "color": {
         "type": "String",
         "desc": "Color name from Quasar Color Palette; Overrides default dynamic color",
-        "examples": [ "'orange-5'" ]
+        "examples": ["'orange-5'"]
       },
 
       "keyCodes": {
-        "type": [ "Array", "Number" ],
+        "type": ["Array", "Number"],
         "desc": "List of keyCode that should trigger the ripple",
-        "examples": [ "[]", "[ 13, 32 ]" ]
+        "examples": ["[]", "[13, 32]"]
       }
     },
     "examples": [
@@ -76,7 +76,7 @@
   "arg": {
     "type": "String",
     "desc": "Color name from Quasar Color Palette; Overrides default dynamic color",
-    "examples": [ "# v-ripple:orange-5" ]
+    "examples": ["# v-ripple:orange-5"]
   },
 
   "modifiers": {
@@ -88,13 +88,13 @@
     "stop": {
       "type": "Boolean",
       "desc": "Stop click/touch event propagation",
-      "examples": [ "# v-ripple.stop" ]
+      "examples": ["# v-ripple.stop"]
     },
 
     "center": {
       "type": "Boolean",
       "desc": "Ripple starts from the absolute center",
-      "examples": [ "# v-ripple.center" ]
+      "examples": ["# v-ripple.center"]
     }
   }
 }