feat(Ripple): "early" modifier (or Boolean prop when using Object form) quasarframework#6524

Author: rstoenescu

ui/dev/src/pages/components/tabs.vue

@@ -13,14 +13,14 @@
         </q-tabs>
 
         <q-tabs :dense="dense" vertical inline-label class="vertical-tabs" v-model="vtab" style="margin-right: 25px;">
-          <q-tab name="one" label="wifi" icon="wifi" />
-          <q-tab name="two" label="bluetooth" icon="bluetooth" />
-          <q-tab name="three" label="map" icon="map" />
-          <q-tab name="four" label="phone" icon="phone" />
-          <q-tab name="five" label="location" icon="location_on" />
-          <q-tab name="six" label="favorite" icon="favorite" />
-          <q-tab name="seven" label="home" icon="home" />
-          <q-tab name="eight" label="info" icon="info" />
+          <q-tab :ripple="{ early: true }" name="one" label="wifi" icon="wifi" />
+          <q-tab :ripple="{ early: true }" name="two" label="bluetooth" icon="bluetooth" />
+          <q-tab :ripple="{ early: true }" name="three" label="map" icon="map" />
+          <q-tab :ripple="{ early: true }" name="four" label="phone" icon="phone" />
+          <q-tab :ripple="{ early: true }" name="five" label="location" icon="location_on" />
+          <q-tab :ripple="{ early: true }" name="six" label="favorite" icon="favorite" />
+          <q-tab :ripple="{ early: true }" name="seven" label="home" icon="home" />
+          <q-tab :ripple="{ early: true }" name="eight" label="info" icon="info" />
         </q-tabs>
 
         <q-tabs :dense="dense" vertical class="vertical-tabs" v-model="vtab" style="margin-right: 25px;">

ui/dev/src/pages/css/material-ripples.vue …dev/src/pages/css/material-ripples-1.vueui/dev/src/pages/css/material-ripples.vue renamed to ui/dev/src/pages/css/material-ripples-1.vue ui/dev/src/pages/css/material-ripples.vue renamed to ui/dev/src/pages/css/material-ripples-1.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="q-layout-padding">
+    <div class="q-gutter-sm">
+      <q-btn label="Regular" @click="onClick" />
+      <q-btn label="Regular" loading @click="onClick" />
+      <q-btn label="Link" type="a" href="about:blank" target="_blank" @click="onClick" />
+    </div>
+
+    <div class="q-gutter-sm q-pt-md">
+      <q-btn label="Regular early" :ripple="{ early: true }" @click="onClick" />
+      <q-btn label="Regular early" loading :ripple="{ early: true }" @click="onClick" />
+      <q-btn label="Link early" :ripple="{ early: true }" type="a" href="about:blank" target="_blank" @click="onClick" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    onClick () {
+      console.log('onClick')
+    }
+  }
+}
+</script>

ui/dev/src/pages/css/material-ripples-2.vue

@@ -38,7 +38,7 @@ export default Vue.extend({
       return this.ripple === false
         ? false
         : Object.assign(
-          { keyCodes: [] },
+          { keyCodes: this.isLink === true ? [ 13, 32 ] : [ 13 ] },
           this.ripple === true ? {} : this.ripple
         )
     },
@@ -48,6 +48,16 @@ export default Vue.extend({
       if (val > 0) {
         return { transition: 'transform 0.6s', transform: `translateX(${val - 100}%)` }
       }
+    },
+
+    onLoadingEvents () {
+      return {
+        mousedown: this.__onLoadingEvt,
+        touchstart: this.__onLoadingEvt,
+        click: this.__onLoadingEvt,
+        keydown: this.__onLoadingEvt,
+        keyup: this.__onLoadingEvt
+      }
     }
   },
 
@@ -290,10 +300,7 @@ export default Vue.extend({
 
     if (this.loading === true) {
       // stop propagation and ripple
-      data.on = {
-        click: this.__onLoadingEvt,
-        keyup: this.__onLoadingEvt
-      }
+      data.on = this.onLoadingEvents
 
       this.percentage !== void 0 && child.push(
         h('div', {

ui/src/components/btn/QBtn.js

@@ -1,7 +1,9 @@
 import { css } from '../utils/dom.js'
-import { position, stop, listenOpts } from '../utils/event.js'
+import { position, stop } from '../utils/event.js'
+import { addEvt, cleanEvt } from '../utils/touch.js'
 import { isKeyCode } from '../utils/key-composition.js'
 import { client } from '../plugins/Platform.js'
+import throttle from '../utils/throttle.js'
 
 function showRipple (evt, el, ctx, forceCenter) {
   ctx.modifiers.stop === true && stop(evt)
@@ -64,16 +66,18 @@ function updateCtx (ctx, { value, modifiers, arg }) {
   if (ctx.enabled === true) {
     ctx.modifiers = Object(value) === value
       ? {
+        early: value.early === true || modifiers.early === true,
         stop: value.stop === true || modifiers.stop === true,
         center: value.center === true || modifiers.center === true,
         color: value.color || arg,
         keyCodes: [].concat(value.keyCodes || 13)
       }
       : {
+        early: modifiers.early,
         stop: modifiers.stop,
         center: modifiers.center,
         color: arg,
-        keyCodes: [13]
+        keyCodes: [ 13 ]
       }
   }
 }
@@ -86,26 +90,32 @@ export default {
       modifiers: {},
       abort: [],
 
-      click (evt) {
-        // on ENTER in form IE emits a PointerEvent with negative client cordinates
+      start (evt) {
         if (
           ctx.enabled === true &&
           evt.qSkipRipple !== true &&
-          (client.is.ie !== true || evt.clientX >= 0)
+          // on ENTER in form IE emits a PointerEvent with negative client cordinates
+          (client.is.ie !== true || evt.clientX >= 0) &&
+          (
+            ctx.modifiers.early === true
+              ? ['mousedown', 'touchstart'].includes(evt.type) === true
+              : evt.type === 'click'
+          )
         ) {
           showRipple(evt, el, ctx, evt.qKeyEvent === true)
         }
       },
 
-      keyup (evt) {
+      keystart: throttle(evt => {
         if (
           ctx.enabled === true &&
           evt.qSkipRipple !== true &&
-          isKeyCode(evt, ctx.modifiers.keyCodes) === true
+          isKeyCode(evt, ctx.modifiers.keyCodes) === true &&
+          evt.type === `key${ctx.modifiers.early === true ? 'down' : 'up'}`
         ) {
           showRipple(evt, el, ctx, true)
         }
-      }
+      }, 300)
     }
 
     updateCtx(ctx, binding)
@@ -115,8 +125,14 @@ export default {
     }
 
     el.__qripple = ctx
-    el.addEventListener('click', ctx.click, listenOpts.passive)
-    el.addEventListener('keyup', ctx.keyup, listenOpts.passive)
+
+    addEvt(ctx, 'main', [
+      [ el, 'mousedown', 'start', 'passive' ],
+      [ el, 'touchstart', 'start', 'passive' ],
+      [ el, 'click', 'start', 'passive' ],
+      [ el, 'keydown', 'keystart', 'passive' ],
+      [ el, 'keyup', 'keystart', 'passive' ]
+    ])
   },
 
   update (el, binding) {
@@ -127,8 +143,7 @@ export default {
     const ctx = el.__qripple_old || el.__qripple
     if (ctx !== void 0) {
       ctx.abort.forEach(fn => { fn() })
-      el.removeEventListener('click', ctx.click, listenOpts.passive)
-      el.removeEventListener('keyup', ctx.keyup, listenOpts.passive)
+      cleanEvt(ctx, 'main')
       delete el[el.__qripple_old ? '__qripple_old' : '__qripple']
     }
   }