From c547b037fd9993ab002b5cfbcb560a2aaaf785d2 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 27 Jun 2020 12:36:55 +0300
Subject: [PATCH] Add ripple

---
 src/AppMenu.vue                               |  2 +-
 src/components/carousel/Carousel.vue          | 14 +++++--
 src/components/common/Common.css              |  7 ----
 src/components/contextmenu/ContextMenu.vue    |  2 +
 src/components/contextmenu/ContextMenuSub.vue |  8 +++-
 src/components/fileupload/FileUpload.vue      |  9 ++++-
 src/components/galleria/Galleria.vue          |  6 ++-
 src/components/galleria/GalleriaContent.vue   |  6 ++-
 src/components/galleria/GalleriaItem.vue      |  8 +++-
 .../galleria/GalleriaThumbnails.vue           |  8 +++-
 src/components/megamenu/MegaMenu.vue          | 12 ++++--
 src/components/menu/Menu.vue                  |  2 +
 src/components/menu/Menuitem.vue              |  9 ++++-
 src/components/menubar/Menubar.vue            |  2 +
 src/components/menubar/MenubarSub.vue         |  8 +++-
 src/components/message/Message.vue            |  6 ++-
 src/components/paginator/FirstPageLink.vue    | 26 ++++++++-----
 src/components/paginator/LastPageLink.vue     | 27 ++++++++------
 src/components/paginator/NextPageLink.vue     | 26 ++++++++-----
 src/components/paginator/PageLinks.vue        | 37 +++++++++++--------
 src/components/paginator/Paginator.vue        |  2 +
 src/components/paginator/PrevPageLink.vue     | 26 ++++++++-----
 src/components/sidebar/Sidebar.vue            |  1 -
 src/components/tieredmenu/TieredMenu.vue      |  2 +
 src/components/tieredmenu/TieredMenuSub.vue   |  8 +++-
 src/components/toast/Toast.vue                |  2 +
 src/components/toast/ToastMessage.vue         |  7 +++-
 src/views/dialog/DialogDemo.vue               |  4 ++
 28 files changed, 185 insertions(+), 92 deletions(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index e1aa0e868..da3ef2904 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -53,7 +53,6 @@
 
             <div class="menu-category">Data</div>
             <div class="menu-items">
-                <router-link to="/carousel">Carousel</router-link>
                 <router-link to="/datatable" v-slot="{ href, route, navigate, isActive }">
                     <div>
                         <a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>
@@ -198,6 +197,7 @@
 
             <div class="menu-category">Media</div>
             <div class="menu-items">
+                <router-link to="/carousel">Carousel</router-link>
                 <router-link to="/galleria" v-slot="{ href, route, navigate, isActive }">
                     <div>
                         <a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>
diff --git a/src/components/carousel/Carousel.vue b/src/components/carousel/Carousel.vue
index ad1df419b..b5ba0110e 100755
--- a/src/components/carousel/Carousel.vue
+++ b/src/components/carousel/Carousel.vue
@@ -5,7 +5,7 @@
 		</div>
 		<div :class="contentClasses">
 			<div :class="containerClasses">
-				<button :class="['p-carousel-prev p-link', {'p-disabled': backwardIsDisabled}]" :disabled="backwardIsDisabled" @click="navBackward" type="button">
+				<button :class="['p-carousel-prev p-link', {'p-disabled': backwardIsDisabled}]" :disabled="backwardIsDisabled" @click="navBackward" type="button" v-ripple>
 					<span :class="['p-carousel-prev-icon pi', {'pi-chevron-left': !isVertical(),'pi-chevron-up': isVertical()}]"></span>
 				</button>
 
@@ -36,7 +36,7 @@
 					</div>
 				</div>
 
-				<button :class="['p-carousel-next p-link', {'p-disabled': forwardIsDisabled}]" :disabled="forwardIsDisabled" @click="navForward" type="button">
+				<button :class="['p-carousel-next p-link', {'p-disabled': forwardIsDisabled}]" :disabled="forwardIsDisabled" @click="navForward" type="button" v-ripple>
 					<span :class="['p-carousel-prev-icon pi', {'pi-chevron-right': !isVertical(),'pi-chevron-down': isVertical()}]"></span>
 				</button>
 			</div>
@@ -55,6 +55,7 @@
 <script>
 import UniqueComponentId from '../utils/UniqueComponentId';
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
 	props: {
@@ -490,7 +491,10 @@ export default {
 		indicatorsContentClasses() {
 			return ['p-carousel-indicators p-reset', this.indicatorsContentClass];
 		},
-	},
+    },
+    directives: {
+        'ripple': Ripple
+    },
 	name: "Carousel"
 }
 </script>
@@ -514,7 +518,9 @@ export default {
     flex-shrink: 0;
     display: flex;
     justify-content: center;
-	align-items: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-carousel-container {
diff --git a/src/components/common/Common.css b/src/components/common/Common.css
index abe233e69..6c1821f8a 100755
--- a/src/components/common/Common.css
+++ b/src/components/common/Common.css
@@ -175,13 +175,6 @@ button {
     display: none !important;
 }
   
-@-webkit-keyframes ripple {  
-    100% {
-        opacity: 0;
-        -webkit-transform: scale(2.5);
-    }
-}
-  
 @keyframes ripple {  
     100% {
         opacity: 0;
diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue
index 0569ff31c..b45e10087 100755
--- a/src/components/contextmenu/ContextMenu.vue
+++ b/src/components/contextmenu/ContextMenu.vue
@@ -231,6 +231,8 @@ export default {
     display: flex;
     align-items: center;
     text-decoration: none;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-contextmenu .p-menuitem-text {
diff --git a/src/components/contextmenu/ContextMenuSub.vue b/src/components/contextmenu/ContextMenuSub.vue
index 7ea2de84b..86841cd01 100755
--- a/src/components/contextmenu/ContextMenuSub.vue
+++ b/src/components/contextmenu/ContextMenuSub.vue
@@ -4,11 +4,11 @@
             <template v-for="(item, i) of model">
                 <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
                     @mouseenter="onItemMouseEnter($event, item)">
-                    <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)" role="menuitem">
+                    <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)" role="menuitem" v-ripple>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
                     </router-link>
-                    <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)"
+                    <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple
                          :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem"  :tabindex="item.disabled ? null : '0'">
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
@@ -25,6 +25,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     name: 'sub-menu',
@@ -125,6 +126,9 @@ export default {
         containerClass() {
             return {'p-submenu-list': !this.root};
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
index 2c0f3456e..fd70498be 100755
--- a/src/components/fileupload/FileUpload.vue
+++ b/src/components/fileupload/FileUpload.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="p-fileupload p-component" v-if="isAdvanced">
         <div class="p-fileupload-buttonbar">
-            <span icon="pi pi-plus" :class="advancedChooseButtonClass">
+            <span icon="pi pi-plus" :class="advancedChooseButtonClass" v-ripple>
                 <input ref="fileInput" type="file" @change="onFileSelect" @focus="onFocus" @blur="onBlur"
                     :multiple="multiple" :accept="accept" :disabled="disabled" />
                 <span class="p-button-icon p-button-icon-left pi pi-fw pi-plus"></span>
@@ -31,7 +31,7 @@
             </div>
         </div>
     </div>
-    <span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic">
+    <span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic" v-ripple>
         <span :class="basicChooseButtonIconClass"></span>
         <span class="p-button-text">{{basicChooseButtonLabel}}</span>
         <input ref="fileInput" type="file" :accept="accept" :disabled="disabled" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-if="!hasFiles" />
@@ -43,6 +43,7 @@ import Button from '../button/Button';
 import ProgressBar from '../progressbar/ProgressBar';
 import Message from '../message/Message';
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -343,6 +344,9 @@ export default {
         'FileUploadProgressBar': ProgressBar,
         'FileUploadMessage': Message
     },
+    directives: {
+        'ripple': Ripple
+    }
 }
 </script>
 
@@ -380,6 +384,7 @@ export default {
     filter: alpha(opacity=0);
     direction: ltr;
     cursor: pointer;
+    display: none;
 }
 
 .p-fileupload-choose.p-fileupload-choose-selected input[type=file] {
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index fc67b17f3..4ccf3c308 100755
--- a/src/components/galleria/Galleria.vue
+++ b/src/components/galleria/Galleria.vue
@@ -215,6 +215,7 @@ export default {
     display: inline-flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
 }
 
 .p-galleria-item-prev {
@@ -273,7 +274,9 @@ export default {
     flex: 0 0 auto;
     display: flex;
     justify-content: center;
-	align-items: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-galleria-thumbnail-prev span,
@@ -435,6 +438,7 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
 }
 
 .p-galleria-mask .p-galleria-item-nav {
diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
index db08f01f8..a044b385f 100755
--- a/src/components/galleria/GalleriaContent.vue
+++ b/src/components/galleria/GalleriaContent.vue
@@ -1,6 +1,6 @@
 <template>
     <div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.containerStyle">
-        <button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('maskHide')">
+        <button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('maskHide')" v-ripple>
             <span class="p-galleria-close-icon pi pi-times"></span>
         </button>
         <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
@@ -28,6 +28,7 @@ import UniqueComponentId from '../utils/UniqueComponentId';
 import GalleriaItem from './GalleriaItem';
 import GalleriaThumbnails from './GalleriaThumbnails';
 import GalleriaItemSlot from './GalleriaItemSlot';
+import Ripple from '../ripple/Ripple';
 
 export default {
     inheritAttrs: false,
@@ -97,6 +98,9 @@ export default {
         'GalleriaItem': GalleriaItem,
         'GalleriaThumbnails': GalleriaThumbnails,
         'GalleriaItemSlot': GalleriaItemSlot
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
diff --git a/src/components/galleria/GalleriaItem.vue b/src/components/galleria/GalleriaItem.vue
index ad7ba6e9c..f1cfa6cec 100755
--- a/src/components/galleria/GalleriaItem.vue
+++ b/src/components/galleria/GalleriaItem.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="p-galleria-item-wrapper">
     <div class="p-galleria-item-container">
-        <button v-if="showItemNavigators" type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
+        <button v-if="showItemNavigators" type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-ripple>
             <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
         </button>
         <div class="p-galleria-item">
             <GalleriaItemSlot type="item" :item="activeItem" :templates="templates" />
         </div>
-        <button v-if="showItemNavigators" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
+        <button v-if="showItemNavigators" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-ripple>
             <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
         </button>
         <div class="p-galleria-caption" v-if="templates['caption']">
@@ -27,6 +27,7 @@
 
 <script>
 import GalleriaItemSlot from './GalleriaItemSlot';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -153,6 +154,9 @@ export default {
     },
     components: {
         'GalleriaItemSlot': GalleriaItemSlot
+    },
+    directives: {
+        'ripple': Ripple
     }
 };
 </script>
diff --git a/src/components/galleria/GalleriaThumbnails.vue b/src/components/galleria/GalleriaThumbnails.vue
index 33b72e9a3..5326b532a 100755
--- a/src/components/galleria/GalleriaThumbnails.vue
+++ b/src/components/galleria/GalleriaThumbnails.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="p-galleria-thumbnail-wrapper">
         <div class="p-galleria-thumbnail-container">
-            <button v-if="showThumbnailNavigators" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
+            <button v-if="showThumbnailNavigators" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-ripple>
                 <span :class="navBackwardIconClass"></span>
             </button>
             <div class="p-galleria-thumbnail-items-container" :style="{'height': isVertical ? contentHeight : ''}">
@@ -18,7 +18,7 @@
                     </div>
                 </div>
             </div>
-            <button v-if="showThumbnailNavigators" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
+            <button v-if="showThumbnailNavigators" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-ripple>
                 <span :class="navForwardIconClass"></span>
             </button>
         </div>
@@ -28,6 +28,7 @@
 <script>
 import GalleriaItemSlot from './GalleriaItemSlot';
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -406,6 +407,9 @@ export default {
     },
     components: {
         'GalleriaItemSlot': GalleriaItemSlot
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index 5dceb6179..f21c81703 100755
--- a/src/components/megamenu/MegaMenu.vue
+++ b/src/components/megamenu/MegaMenu.vue
@@ -5,7 +5,7 @@
                 <li v-if="visible(category)" :key="category.label + '_' + index" :class="getCategoryClass(category)" :style="category.style"
                     @mouseenter="onCategoryMouseEnter($event, category)" role="none">
                     <a :href="category.url" :class="getLinkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
-                        role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="category.disabled ? null : '0'">
+                        role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="category.disabled ? null : '0'" v-ripple>
                         <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
                         <span class="p-menuitem-text">{{category.label}}</span>
                         <span v-if="category.items" :class="getCategorySubMenuIcon()"></span>
@@ -17,11 +17,11 @@
                                     <li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
                                     <template v-for="(item, i) of submenu.items">
                                         <li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i">
-                                            <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onLeafClick($event, item)" role="menuitem">
+                                            <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onLeafClick($event, item)" role="menuitem" v-ripple>
                                                 <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
                                                 <span class="p-menuitem-text">{{item.label}}</span>
                                             </router-link>
-                                            <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'">
+                                            <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
                                                 <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
                                                 <span class="p-menuitem-text">{{item.label}}</span>
                                                 <span :class="getSubmenuIcon()" v-if="item.items"></span>
@@ -44,6 +44,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -294,6 +295,9 @@ export default {
         vertical() {
             return this.orientation === 'vertical';
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
@@ -318,6 +322,8 @@ export default {
     display: flex;
     align-items: center;
     text-decoration: none;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-megamenu .p-menuitem-text {
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index 0c05f4595..4e70708a6 100755
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -195,6 +195,8 @@ export default {
     display: flex;
     align-items: center;
     text-decoration: none;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-menu .p-menuitem-text {
diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
index 52a83b68a..b56df556d 100755
--- a/src/components/menu/Menuitem.vue
+++ b/src/components/menu/Menuitem.vue
@@ -1,10 +1,10 @@
 <template>
     <li :class="containerClass" role="none" :style="item.style" v-if="visible()">
-        <router-link v-if="item.to && !item.disabled" :to="item.to" :class="linkClass" role="menuitem">
+        <router-link v-if="item.to && !item.disabled" :to="item.to" :class="linkClass" role="menuitem" v-ripple>
             <span :class="['p-menuitem-icon', item.icon]"></span>
             <span class="p-menuitem-text">{{item.label}}</span>
         </router-link>
-        <a v-else :href="item.url" :class="linkClass" @click="onClick" :target="item.target" role="menuitem" :tabindex="item.disabled ? null : '0'">
+        <a v-else :href="item.url" :class="linkClass" @click="onClick" :target="item.target" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
             <span :class="['p-menuitem-icon', item.icon]"></span>
             <span class="p-menuitem-text">{{item.label}}</span>
         </a>
@@ -12,6 +12,8 @@
 </template>
 
 <script>
+import Ripple from '../ripple/Ripple';
+
 export default {
     props: {
         item: null
@@ -34,6 +36,9 @@ export default {
         linkClass() {
             return ['p-menuitem-link', {'p-disabled': this.item.disabled}];
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
index 2b05fee82..e585c4e62 100755
--- a/src/components/menubar/Menubar.vue
+++ b/src/components/menubar/Menubar.vue
@@ -90,6 +90,8 @@ export default {
     display: flex;
     align-items: center;
     text-decoration: none;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-menubar .p-menuitem-text {
diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue
index 5dceee26d..71484397a 100755
--- a/src/components/menubar/MenubarSub.vue
+++ b/src/components/menubar/MenubarSub.vue
@@ -3,13 +3,13 @@
         <template v-for="(item, i) of model">
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
                 @mouseenter="onItemMouseEnter($event, item)">
-                <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)"
+                <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
                     @click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                 </router-link>
                 <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
-                    @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'">
+                    @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                     <span :class="getSubmenuIcon()" v-if="item.items"></span>
@@ -24,6 +24,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     name: 'sub-menu',
@@ -274,6 +275,9 @@ export default {
         containerClass() {
             return {'p-submenu-list': !this.root, 'p-menubar-root-list': this.root};
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index 2e56a64c5..942b3746e 100755
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -6,7 +6,7 @@
                 <div class="p-message-text">
                     <slot></slot>
                 </div>
-                <button class="p-message-close p-link" @click="visible = false" v-if="closable" type="button">
+                <button class="p-message-close p-link" @click="visible = false" v-if="closable" type="button" v-ripple>
                     <i class="p-message-close-icon pi pi-times"></i>
                 </button>
             </div>
@@ -76,7 +76,9 @@ export default {
 }
 
 .p-message-close.p-link {
-    margin-left: auto
+    margin-left: auto;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-message-enter {
diff --git a/src/components/paginator/FirstPageLink.vue b/src/components/paginator/FirstPageLink.vue
index 1621aa1e8..ef25bfd14 100755
--- a/src/components/paginator/FirstPageLink.vue
+++ b/src/components/paginator/FirstPageLink.vue
@@ -1,16 +1,22 @@
 <template>
-	<button :class="containerClass" v-on="$listeners" type="button">
+	<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
 		<span class="p-paginator-icon pi pi-angle-double-left"></span>
 	</button>
 </template>
+
 <script>
-	export default {
-		computed: {
-			containerClass() {
-				return ['p-paginator-first p-paginator-element p-link', {
-					'p-disabled': this.$attrs.disabled
-				}];
-			}
-		}
-	}
+import Ripple from '../ripple/Ripple';
+
+export default {
+    computed: {
+        containerClass() {
+            return ['p-paginator-first p-paginator-element p-link', {
+                'p-disabled': this.$attrs.disabled
+            }];
+        }
+    },
+    directives: {
+        'ripple': Ripple
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/components/paginator/LastPageLink.vue b/src/components/paginator/LastPageLink.vue
index 52451c662..5ff5563de 100755
--- a/src/components/paginator/LastPageLink.vue
+++ b/src/components/paginator/LastPageLink.vue
@@ -1,17 +1,22 @@
 <template>
-	<button :class="containerClass" v-on="$listeners" type="button">
+	<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
 		<span class="p-paginator-icon pi pi-angle-double-right"></span>
 	</button>
 </template>
-<script>
-	export default {
 
-		computed: {
-			containerClass() {
-				return ['p-paginator-last p-paginator-element p-link', {
-					'p-disabled': this.$attrs.disabled
-				}];
-			}
-		}
-	}
+<script>
+import Ripple from '../ripple/Ripple';
+
+export default {
+    computed: {
+        containerClass() {
+            return ['p-paginator-last p-paginator-element p-link', {
+                'p-disabled': this.$attrs.disabled
+            }];
+        }
+    },
+    directives: {
+        'ripple': Ripple
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/components/paginator/NextPageLink.vue b/src/components/paginator/NextPageLink.vue
index 97bdec1de..b06c6b911 100755
--- a/src/components/paginator/NextPageLink.vue
+++ b/src/components/paginator/NextPageLink.vue
@@ -1,16 +1,22 @@
 <template>
-	<button :class="containerClass" v-on="$listeners" type="button">
+	<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
 		<span class="p-paginator-icon pi pi-angle-right"></span>
 	</button>
 </template>
+
 <script>
-	export default {
-		computed: {
-			containerClass() {
-				return ['p-paginator-next p-paginator-element p-link', {
-					'p-disabled': this.$attrs.disabled
-				}];
-			}
-		}
-	}
+import Ripple from '../ripple/Ripple';
+
+export default {
+    computed: {
+        containerClass() {
+            return ['p-paginator-next p-paginator-element p-link', {
+                'p-disabled': this.$attrs.disabled
+            }];
+        }
+    },
+    directives: {
+        'ripple': Ripple
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/components/paginator/PageLinks.vue b/src/components/paginator/PageLinks.vue
index 8ca154744..48c9b310d 100755
--- a/src/components/paginator/PageLinks.vue
+++ b/src/components/paginator/PageLinks.vue
@@ -1,23 +1,28 @@
 <template>
     <span class="p-paginator-pages">
         <button v-for="pageLink of value" :key="pageLink" :class="['p-paginator-page p-paginator-element p-link', {'p-highlight': ((pageLink - 1) === page)}]" type="button"
-            @click="onPageLinkClick($event, pageLink)">{{pageLink}}</button>
+            @click="onPageLinkClick($event, pageLink)" v-ripple>{{pageLink}}</button>
     </span>
 </template>
 <script>
-	export default {
-		inheritAttrs: false,
-		props: {
-			value: Array,
-			page: Number
-		},
-		methods: {
-			onPageLinkClick(event, pageLink) {
-				this.$emit('click', {
-					originalEvent: event,
-					value: pageLink
-				});
-			}
-		}
-	}
+import Ripple from '../ripple/Ripple';
+
+export default {
+    inheritAttrs: false,
+    props: {
+        value: Array,
+        page: Number
+    },
+    methods: {
+        onPageLinkClick(event, pageLink) {
+            this.$emit('click', {
+                originalEvent: event,
+                value: pageLink
+            });
+        }
+    },
+    directives: {
+        'ripple': Ripple
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index a7e8fe1ed..99edb0e84 100755
--- a/src/components/paginator/Paginator.vue
+++ b/src/components/paginator/Paginator.vue
@@ -226,6 +226,8 @@ export default {
     justify-content: center;
     line-height: 1;
     user-select: none;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-paginator-element:focus {
diff --git a/src/components/paginator/PrevPageLink.vue b/src/components/paginator/PrevPageLink.vue
index f935e183e..4be8201d2 100755
--- a/src/components/paginator/PrevPageLink.vue
+++ b/src/components/paginator/PrevPageLink.vue
@@ -1,16 +1,22 @@
 <template>
-	<button :class="containerClass" v-on="$listeners" type="button">
+	<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
 		<span class="p-paginator-icon pi pi-angle-left"></span>
 	</button>
 </template>
+
 <script>
-	export default {
-		computed: {
-			containerClass() {
-				return ['p-paginator-prev p-paginator-element p-link', {
-					'p-disabled': this.$attrs.disabled
-				}];
-			}
-		}
-	}
+import Ripple from '../ripple/Ripple';
+
+export default {
+    computed: {
+        containerClass() {
+            return ['p-paginator-prev p-paginator-element p-link', {
+                'p-disabled': this.$attrs.disabled
+            }];
+        }
+    },
+    directives: {
+        'ripple': Ripple
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 605e12924..29696e58e 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -159,7 +159,6 @@ export default {
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    position: relative;
 }
 
 .p-sidebar-mask {
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index ad4407a92..d8f4e1141 100755
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/src/components/tieredmenu/TieredMenu.vue
@@ -179,6 +179,8 @@ export default {
     display: flex;
     align-items: center;
     text-decoration: none;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-tieredmenu .p-menuitem-text {
diff --git a/src/components/tieredmenu/TieredMenuSub.vue b/src/components/tieredmenu/TieredMenuSub.vue
index ac96dc31e..236cfc0d4 100755
--- a/src/components/tieredmenu/TieredMenuSub.vue
+++ b/src/components/tieredmenu/TieredMenuSub.vue
@@ -3,13 +3,13 @@
         <template v-for="(item, i) of model">
             <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
                 @mouseenter="onItemMouseEnter($event, item)" role="none">
-                <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)"
+                <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
                     @click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                 </router-link>
                 <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
-                    @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'">
+                    @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                     <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
@@ -24,6 +24,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     name: 'sub-menu',
@@ -219,6 +220,9 @@ export default {
         containerClass() {
             return {'p-submenu-list': !this.root};
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index 085f773b7..85956de34 100755
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -132,6 +132,8 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-toast-icon-close.p-link {
diff --git a/src/components/toast/ToastMessage.vue b/src/components/toast/ToastMessage.vue
index ec8abb673..be68b1bf4 100755
--- a/src/components/toast/ToastMessage.vue
+++ b/src/components/toast/ToastMessage.vue
@@ -6,7 +6,7 @@
                 <span class="p-toast-title">{{message.summary}}</span>
                 <div class="p-toast-detail">{{message.detail}}</div>
             </div>
-            <button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button">
+            <button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button" v-ripple>
                 <span class="p-toast-icon-close-icon pi pi-times"></span>
             </button>
         </div>
@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import Ripple from '../ripple/Ripple';
+
 export default {
     props: {
         message: null
@@ -55,6 +57,9 @@ export default {
                 'pi-check': this.message.severity === 'success'
             }];
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
index 2f5c972b6..b8b73b3c8 100755
--- a/src/views/dialog/DialogDemo.vue
+++ b/src/views/dialog/DialogDemo.vue
@@ -160,4 +160,8 @@ export default {
     margin: .5em .5em .5em 0;
     width: 140px;
 }
+
+p {
+    margin: 0;
+}
 </style>