Expose ripple as a directive

exports/ripple.d.ts

@@ -0,0 +1 @@
+export * from './components/ripple/Ripple';

exports/ripple.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/ripple/Ripple.js');

src/AppMenu.vue

@@ -236,6 +236,7 @@
                 <router-link to="/inplace">Inplace</router-link>
                 <router-link to="/progressbar">ProgressBar</router-link>
                 <router-link to="/progressspinner">ProgressSpinner</router-link>
+                <router-link to="/ripple">Ripple</router-link>
                 <router-link to="/terminal">Terminal</router-link>
             </div>
         </div>

src/assets/styles/primevue.css

@@ -6,4 +6,5 @@
 @import '../../components/inputtext/InputText.css';
 @import '../../components/password/Password.css';
 @import '../../components/radiobutton/RadioButton.css';
+@import '../../components/ripple/Ripple.css';
 @import '../../components/tooltip/Tooltip.css';

src/components/common/Common.css

@@ -152,26 +152,3 @@ button {
     width: 1px;
     word-wrap: normal !important;
 }
-
-.p-ink {
-    display: block;
-    position: absolute;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 100%;
-    transform: scale(0);
-}
-  
-.p-ink-active {
-    animation: ripple 0.4s linear;
-}
-
-.p-ripple-disabled .p-ink {
-    display: none !important;
-}
-  
-@keyframes ripple {  
-    100% {
-        opacity: 0;
-        transform: scale(2.5);
-    }
-}

src/components/ripple/Ripple.css

@@ -0,0 +1,27 @@
+.p-ripple {
+    overflow: hidden;
+    position: relative;
+}
+
+.p-ink {
+    display: block;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 100%;
+    transform: scale(0);
+}
+  
+.p-ink-active {
+    animation: ripple 0.4s linear;
+}
+
+.p-ripple-disabled .p-ink {
+    display: none !important;
+}
+  
+@keyframes ripple {  
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}

src/components/ripple/Ripple.d.ts

@@ -0,0 +1,3 @@
+import Directive from 'vue';
+
+export declare interface Ripple extends Directive {}

src/main.js

@@ -52,6 +52,7 @@ import ProgressSpinner from './components/progressspinner/ProgressSpinner';
 import Rating from './components/rating/Rating';
 import RadioButton from './components/radiobutton/RadioButton';
 import Row from './components/row/Row';
+import Ripple from './components/ripple/Ripple';
 import ScrollPanel from './components/scrollpanel/ScrollPanel';
 import SelectButton from './components/selectbutton/SelectButton';
 import Slider from './components/slider/Slider';
@@ -90,6 +91,7 @@ import Vuelidate from 'vuelidate';
 Vue.use(Vuelidate);
 Vue.use(ToastService);
 Vue.directive('tooltip', Tooltip);
+Vue.directive('ripple', Ripple);
 
 Vue.prototype.$appState = Vue.observable({inputStyle: 'outlined', darkTheme: false});
 Vue.prototype.$primevue = Vue.observable({ripple: true});

src/router.js

@@ -290,6 +290,11 @@ export default new Router({
 			path: '/dialog',
 			name: 'dialog',
 			component: () => import('./views/dialog/DialogDemo.vue')
+        },
+        {
+			path: '/display',
+			name: 'display',
+			component: () => import('./views/display/DisplayDemo.vue')
         },
 		{
 			path: '/dropdown',
@@ -366,6 +371,16 @@ export default new Router({
 			name: 'listbox',
 			component: () => import('./views/listbox/ListboxDemo.vue')
         },
+        {
+			path: '/flexbox',
+			name: 'flexbox',
+			component: () => import('./views/flexbox/FlexBoxDemo.vue')
+        },
+        {
+			path: '/floatlabel',
+			name: 'floatlabel',
+			component: () => import('./views/floatlabel/FloatLabelDemo.vue')
+		},
         {
 			path: '/megamenu',
 			name: 'megamenu',
@@ -456,6 +471,11 @@ export default new Router({
 			name: 'rating',
 			component: () => import('./views/rating/RatingDemo.vue')
         },
+        {
+			path: '/ripple',
+			name: 'ripple',
+			component: () => import('./views/ripple/RippleDemo.vue')
+		},
         {
 			path: '/scrollpanel',
 			name: 'scrollpanel',
@@ -481,26 +501,6 @@ export default new Router({
 			name: 'spacing',
 			component: () => import('./views/spacing/SpacingDemo.vue')
         },
-        {
-			path: '/display',
-			name: 'display',
-			component: () => import('./views/display/DisplayDemo.vue')
-        },
-        {
-			path: '/flexbox',
-			name: 'flexbox',
-			component: () => import('./views/flexbox/FlexBoxDemo.vue')
-        },
-        {
-			path: '/floatlabel',
-			name: 'floatlabel',
-			component: () => import('./views/floatlabel/FloatLabelDemo.vue')
-		},
-        {
-			path: '/text',
-			name: 'text',
-			component: () => import('./views/text/TextDemo.vue')
-		},
 		{
 			path: '/splitbutton',
 			name: 'splitbutton',
@@ -525,11 +525,6 @@ export default new Router({
                 path: '/steps/confirmation',
                 component: () => import('./views/steps/ConfirmationDemo.vue')
             }]
-        },
-		{
-			path: '/textarea',
-			name: 'textarea',
-			component: () => import('./views/textarea/TextareaDemo.vue')
         },
         {
 			path: '/tabmenu',
@@ -560,6 +555,16 @@ export default new Router({
 			name: 'tabview',
 			component: () => import('./views/tabview/TabViewDemo.vue')
         },
+        {
+			path: '/text',
+			name: 'text',
+			component: () => import('./views/text/TextDemo.vue')
+        },
+        {
+			path: '/textarea',
+			name: 'textarea',
+			component: () => import('./views/textarea/TextareaDemo.vue')
+        },
         {
 			path: '/terminal',
 			name: 'terminal',

src/views/ripple/RippleDemo.vue

@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Ripple</h1>
+                <p>Ripple directive adds ripple effect to the host element.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card-container p-d-flex">
+                <div class="card primary-box p-ripple" v-ripple>Default</div>
+                <div class="card styled-box-green p-ripple" v-ripple>Green</div>
+                <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
+                <div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
+            </div>
+        </div>
+
+        <RippleDoc />
+    </div>
+</template>
+
+<script>
+import RippleDoc from './RippleDoc';
+
+export default {
+	components: {
+		'RippleDoc': RippleDoc
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/ .card-container {
+    .card {
+        width: 75px;
+        height: 75px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+        user-select: none;
+        padding: 0;
+    
+        &.primary-box {
+            background-color: var(--primary-color);
+            padding: 0;
+            color: var(--primary-color-text);
+        }
+    
+        &.styled-box-green {
+            .p-ink {
+                background: rgba(#4baf50, 0.3);
+            }
+        }
+
+        &.styled-box-orange {
+            .p-ink {
+                background: rgba(#ffc106, 0.3);
+            }
+        }
+
+        &.styled-box-purple {
+            .p-ink {
+                background: rgba(#9c27b0, 0.3);
+            }
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+</style>

src/views/ripple/RippleDoc.vue

@@ -0,0 +1,146 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h5>Getting Started</h5>
+                <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
+                your app's entry file (e.g. main.js) using the <i>$primevue</i> instance variable.
+            </p>
+<CodeHighlight class="language-javascript">
+Vue.prototype.$primevue = {ripple: true};
+</CodeHighlight>
+
+                <p><span class="p-text-bold">Note</span>: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.</p>
+
+                <h5>Directive</h5>
+				<p>Ripple is directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
+<CodeHighlight lang="js">
+import Ripple from 'primevue/ripple';
+
+Vue.directive('ripple', Ripple);
+</CodeHighlight>
+
+                <p>Ripple can also be configured locally using the directives property of your component.</p>
+<CodeHighlight lang="js">
+directives: {
+    'ripple': Ripple
+}
+</CodeHighlight>
+
+                <p>Once the ripple is configured, add <i>.p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
+<CodeHighlight>
+<template v-pre>
+&lt;div class="p-ripple" v-ripple&gt;&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+				<h5>Styling</h5>
+				<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>.p-ink</i> element.</p>
+<CodeHighlight>
+<template v-pre>
+&lt;div class="p-ripple purple" v-ripple&gt;&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+.p-ripple.purple .p-ink {
+    background: rgba(256,39,176,.3);
+}
+</CodeHighlight>
+
+
+				<h5>Styling</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-ripple</td>
+                                <td>Host element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-ink</td>
+                                <td>Ripple element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-ink-active</td>
+                                <td>Ripple element during animating.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/ripple" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;div class="card-container p-d-flex"&gt;
+    &lt;div class="card primary-box p-ripple" v-ripple&gt;Default&lt;/div&gt;
+    &lt;div class="card styled-box-green p-ripple" v-ripple&gt;Green&lt;/div&gt;
+    &lt;div class="card styled-box-orange p-ripple" v-ripple&gt;Orange&lt;/div&gt;
+    &lt;div class="card styled-box-purple p-ripple" v-ripple&gt;Purple&lt;/div&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {}
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+/deep/ .card-container {
+    .card {
+        width: 75px;
+        height: 75px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+        user-select: none;
+        padding: 0;
+    
+        &.primary-box {
+            background-color: var(--primary-color);
+            padding: 0;
+            color: var(--primary-color-text);
+        }
+    
+        &.styled-box-green {
+            .p-ink {
+                background: rgba(#4baf50, 0.3);
+            }
+        }
+
+        &.styled-box-orange {
+            .p-ink {
+                background: rgba(#ffc106, 0.3);
+            }
+        }
+
+        &.styled-box-purple {
+            .p-ink {
+                background: rgba(#9c27b0, 0.3);
+            }
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>

src/views/tooltip/TooltipDoc.vue

@@ -13,7 +13,7 @@ Vue.directive('tooltip', Tooltip);
                 <p>Tooltip can also be configured locally using the directives property of your component.</p>
 <CodeHighlight lang="js">
 directives: {
-    tooltip: Tooltip
+    'tooltip': Tooltip
 }
 </CodeHighlight>