`Unbounded` modifier for Ripple

[meibegger]

Is your feature request related to a problem? Please describe. In the MDC documentation (https://material.io/develop/web/components/ripples/) they mention, that there is a radius-unbounded mixin. When diving deeper into this, i found, that an unbounded option is already implemented in @material/ripple/_mixins.scss line 49.

Adding data-mdc-ripple-is-unbounded to the element with v-ripple works as expected.

Describe the solution you'd like It would be nice to have a modifier unbounded on the ripple plugin.

[tychenjiajun]

Have you tried

<button v-ripple ref="ripple">Button</button> <!--ref name can be any string-->

this.$refs.ripple.mdcRipple.unbounded = true

[tychenjiajun]

If both the js approach and the data-mdc-ripple-is-unbounded approach work. I don't see the benefit of making it part of the Vue directive.

[meibegger]

No I haven't. But i prefer the data-attribute over the JS, because then i have all "options" in one place. It would be nice to have a consistent way for specifying options and to expose all @material functionality.

[tychenjiajun]

It will be confusing to make it a modifier. Consider the following

<button v-ripple.unbounded ref="ripple">Button</button> <!--ref name can be any string-->

this.$refs.ripple.mdcRipple.unbounded = false

Though the button has unbounded modifier, it's actually bounded. Make it part of the value will be more reasonable, like

<button v-ripple="{ unbounded: true }">Button</button>

There's might be more things that should be taken into considerations. So this feature won't be implemented soon.