[Feature Request] Add more ripple options

Problem to solve

The ripple can’t be customized

Proposed solution

Add global and local options.

Here is a full example:

Vue.use(Vuetify, {
    ripple: {
        duration: 1000, // the duration of the animation from start to finish
        center: "top right", // start at a fixed position instead of the mouse position
        alwaysFinish: false, // always finish the animation, even when the mouse button is released
        activator: "click", // start when this event occurs (available options: "click", "hover", "dbclick", "mouseout", "none" (disables the ripple effect))
        transitionTiming: "ease-in-out", // any transition-timing-function
        from: {
            fill: .1, // the initial fill percentage (0 = no ripple visible, 1 = ripple fills the element)
            color: "primary", // the animation starts with the primary color
            stay: 100, // the ripple effect stays in the from state for .1 second before transitioning to the to state
            shape: "circle", // a predefined shape (like circle, square, triangle) or a svg path (like "M 200 300 L 150 300 L 100 350 L 250 350 L 200 300"),
            shapeOutline: false, // false or any number; if false, the shape will be filled, otherwise, the shape will only have a x px outline and no fill color        
        },
        to:{
            fill: .8, // the fill percentage at the end of the animation (animation reverses if this number is lower than from.fill)
            color: "accent", // the animation transitions to the accent color
            stay: 2000, // the ripple effect stays on this element for 2 seconds after finishing if you don't release the mouse button
            shape: "square", // morph the circle into a square
            shapeOutline: false, // same as above    
        }
    }
})

The ripple color should also be editable using this.$vuetify.theme.ripple = '#4caf50'.

You should also be able to shorten the ripple options a bit:

{
    duration: 1000,
    center: "top right",
    alwaysFinish: false,
    activator: "click",
    transitionTiming: "cubic-bezier(0.25, 0.1, 0.25, 1)",
    shape: "square",
    shapeOutline: 10, // 10px outline
    fill: .5 // from.fill is set to 0 and to.fill is set to .5
    color: "primary", // from.color and to.color are set to "primary", use "auto" to set the color to gray on a bright background and white on a dim background
    stay: 100, // from.stay and to.stay are set to 100
}

<v-btn :ripple="{duration: 100, ...}" />

<div v-ripple="{center: 'bottom right', ...}" />

[nekosaur]

This is quite bit more than what we actually need internally, feature-wise, from ripple. I am not opposed to integrating some of these options. But in my opinion it’s a bit of a “you want it, you do it” feature, when it comes to priority.

[gijswijs]

The following may be slightly off topic, but still: I’m building a tab strip where I’m able to remove tabs by clicking on a close icon inside the tab. The ripple effect throws an error:

Cannot set property 'touched' of undefined

This is to be expected because it tries to set a property of a tab that by then is already removed. The easy fix is to turn of the ripple effect and that works.

But I like the ripple effect. Would it be possible to have a ripple callback of sorts? Or should I just work with a timeout?