Add ripple

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>

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,6 +491,9 @@ export default {
 		indicatorsContentClasses() {
 			return ['p-carousel-indicators p-reset', this.indicatorsContentClass];
 		},
+    },
+    directives: {
+        'ripple': Ripple
     },
 	name: "Carousel"
 }
@@ -515,6 +519,8 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-carousel-container {

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;

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 {

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>

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] {

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 {
@@ -274,6 +275,8 @@ export default {
     display: flex;
     justify-content: 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 {

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>

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>

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>

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 {

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 {

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>

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 {

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>

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 {

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 {
+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>

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 {
 
+<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>

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 {
+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>

src/components/paginator/PageLinks.vue

@@ -1,11 +1,13 @@
 <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 {
+import Ripple from '../ripple/Ripple';
+
+export default {
     inheritAttrs: false,
     props: {
         value: Array,
@@ -18,6 +20,9 @@
                 value: pageLink
             });
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
-	}
+}
 </script>

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 {

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 {
+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>

src/components/sidebar/Sidebar.vue

@@ -159,7 +159,6 @@ export default {
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    position: relative;
 }
 
 .p-sidebar-mask {

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 {

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>

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 {

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>

src/views/dialog/DialogDemo.vue

@@ -160,4 +160,8 @@ export default {
     margin: .5em .5em .5em 0;
     width: 140px;
 }
+
+p {
+    margin: 0;
+}
 </style>