Vuetify: [Feature Request] Add more ripple options

[lukas-tr]

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.

[MacZel]

I've already did enable some of listed configs in my project. I'm open to contribute to this issue if possible.

[MacZel]

However I can't see the point adding some of listed configs.
To start with I would only list the config entries necessary to implement.
I find myself 'color' and 'duration' configs really useful.
However:

duration: 1000,

OK

center: "top right", // start at a fixed position instead of the mouse position

I can't see the point of this config. Ripple should start at mouse position. Starting elsewhere is bad design and misleading to user.

alwaysFinish: false, // always finish the animation, even when the mouse button is released

What are you trying to achieve here? Animation already finishes once mouse button is released

activator: "click", // start when this event occurs (available options: "click", "hover", "dbclick", "mouseout", "none" (disables the ripple effect))

This should rather be in the form of a list.

fill: .1, // the initial fill percentage (0 = no ripple visible, 1 = ripple fills the element)

Once 'color' config enabled, suppling of rgba value would be sufficient

Rest of the configs are unnecessary IMO.

[lukas-tr]

center: "top right", // start at a fixed position instead of the mouse position

I can't see the point of this config. Ripple should start at mouse position. Starting elsewhere is bad design and misleading to user.

Material-UI for example uses centered ripples for its Icon Buttons and it looks great. I don't see how this would be bad design.

alwaysFinish: false, // always finish the animation, even when the mouse button is released

What are you trying to achieve here? Animation already finishes once mouse button is released

If the value is true, the ripple fills the whole container before disappearing. Otherwise, the ripple starts disappearing immediately (before finishing filling the container).

fill: .1, // the initial fill percentage (0 = no ripple visible, 1 = ripple fills the element)

Once 'color' config enabled, suppling of rgba value would be sufficient

I should have called this radius to make it clearer.

[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?