Ripple for list components

src/components/fieldset/Fieldset.vue

@@ -4,7 +4,7 @@
             <slot name="legend" v-if="!toggleable">
                 <span class="p-fieldset-legend-text" :id="ariaId + '_header'">{{legend}}</span>
             </slot>
-            <a tabindex="0" v-if="toggleable" @click="toggle" @keydown.enter="toggle"
+            <a tabindex="0" v-if="toggleable" @click="toggle" @keydown.enter="toggle" v-ripple
                 :id="ariaId +  '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed">
                 <span :class="iconClass"></span>
                 <slot name="legend">
@@ -25,6 +25,7 @@
 
 <script>
 import UniqueComponentId from '../utils/UniqueComponentId';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -57,7 +58,10 @@ export default {
         ariaId() {
             return UniqueComponentId();
         }
-	}
+    },
+    directives: {
+        'ripple': Ripple
+    }
 }
 </script>
 
@@ -72,6 +76,8 @@ export default {
 .p-fieldset-toggleable .p-fieldset-legend a {
     cursor: pointer;
     user-select: none;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-fieldset-legend-text {

src/components/orderlist/OrderList.vue

@@ -12,7 +12,7 @@
             </div>
             <transition-group ref="list" name="p-orderlist-flip" tag="ul" class="p-orderlist-list" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of value">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]"
+                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]" v-ripple
                         @click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd"
                         role="option" :aria-selected="isSelected(item)">
                         <slot name="item" :item="item" :index="i"> </slot>
@@ -27,6 +27,7 @@
 import Button from '../button/Button';
 import ObjectUtils from '../utils/ObjectUtils';
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -294,6 +295,9 @@ export default {
     },
     components: {
         'OLButton': Button
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
@@ -324,6 +328,8 @@ export default {
 
 .p-orderlist-item {
     cursor: pointer;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-orderlist.p-state-disabled .p-orderlist-item,

src/components/picklist/PickList.vue

@@ -12,7 +12,7 @@
             </div>
             <transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of sourceList">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]"
+                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]" v-ripple
                         @click="onItemClick($event, item, i, 0)" @keydown="onItemKeyDown($event, item, i, 0)" @touchend="onItemTouchEnd" role="option" :aria-selected="isSelected(item, 0)">
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
@@ -31,7 +31,7 @@
             </div>
             <transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of targetList">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]"
+                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]" v-ripple
                         @click="onItemClick($event, item, i, 1)" @keydown="onItemKeyDown($event, item, i, 1)" @touchend="onItemTouchEnd" role="option" :aria-selected="isSelected(item, 1)">
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
@@ -51,6 +51,7 @@
 import Button from '../button/Button';
 import ObjectUtils from '../utils/ObjectUtils';
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -471,6 +472,9 @@ export default {
     },
     components: {
         'PLButton': Button
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
@@ -501,6 +505,8 @@ export default {
 
 .p-picklist-item {
     cursor: pointer;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,