Tokens for Ripple

components/lib/ripple/Ripple.js

@@ -9,6 +9,8 @@ const Ripple = BaseRipple.extend('ripple', {
                 this.bindEvents(this.$host);
 
                 this.$host.setAttribute('data-pd-ripple', true);
+                this.$host.style['overflow'] = 'hidden';
+                this.$host.style['position'] = 'relative';
             } else {
                 this.remove(this.$host);
                 this.$host.removeAttribute('data-pd-ripple');
@@ -46,6 +48,9 @@ const Ripple = BaseRipple.extend('ripple', {
             let ink = this.getInk(el);
 
             if (ink) {
+                this.$host.style['overflow'] = '';
+                this.$host.style['position'] = '';
+
                 this.unbindEvents(el);
                 ink.removeEventListener('animationend', this.onAnimationEnd);
                 ink.remove();

components/lib/ripple/style/RippleStyle.js

@@ -1,15 +1,10 @@
 import BaseStyle from 'primevue/base/style';
 
 const theme = ({ dt }) => `
-.p-ripple {
-    overflow: hidden;
-    position: relative;
-}
-
 .p-ink {
     display: block;
     position: absolute;
-    background: rgba(255, 255, 255, 0.5);
+    background: ${dt('ripple.background')};
     border-radius: 100%;
     transform: scale(0);
     pointer-events: none;

components/lib/themes/aura/index.js

@@ -56,6 +56,7 @@ import progressbar from 'primevue/themes/aura/progressbar';
 import progressspinner from 'primevue/themes/aura/progressspinner';
 import radiobutton from 'primevue/themes/aura/radiobutton';
 import rating from 'primevue/themes/aura/rating';
+import ripple from 'primevue/themes/aura/ripple';
 import scrollpanel from 'primevue/themes/aura/scrollpanel';
 import scrolltop from 'primevue/themes/aura/scrolltop';
 import select from 'primevue/themes/aura/select';
@@ -542,6 +543,7 @@ export default {
         toolbar
     },
     directives: {
-        tooltip
+        tooltip,
+        ripple
     }
 };

components/lib/themes/aura/ripple/index.js

@@ -0,0 +1,10 @@
+export default {
+    colorScheme: {
+        light: {
+            background: 'rgba(0,0,0,0.5)'
+        },
+        dark: {
+            background: 'rgba(255,255,255,0.5)'
+        }
+    }
+};

components/lib/themes/aura/ripple/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/lara/index.js

@@ -56,6 +56,7 @@ import progressbar from 'primevue/themes/lara/progressbar';
 import progressspinner from 'primevue/themes/lara/progressspinner';
 import radiobutton from 'primevue/themes/lara/radiobutton';
 import rating from 'primevue/themes/lara/rating';
+import ripple from 'primevue/themes/lara/ripple';
 import scrollpanel from 'primevue/themes/lara/scrollpanel';
 import scrolltop from 'primevue/themes/lara/scrolltop';
 import select from 'primevue/themes/lara/select';
@@ -547,6 +548,7 @@ export default {
         toolbar
     },
     directives: {
-        tooltip
+        tooltip,
+        ripple
     }
 };

components/lib/themes/lara/ripple/index.js

@@ -0,0 +1,10 @@
+export default {
+    colorScheme: {
+        light: {
+            background: 'rgba(0,0,0,0.5)'
+        },
+        dark: {
+            background: 'rgba(255,255,255,0.5)'
+        }
+    }
+};

components/lib/themes/lara/ripple/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

doc/ripple/CustomDoc.vue

@@ -5,39 +5,9 @@
     <div class="card flex flex-column gap-3 align-items-center">
         <span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
         <div class="flex justify-content-center gap-2">
-            <div
+            <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
-                v-ripple="{
+            <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
-                    pt: {
+            <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
-                        root: { style: 'background: rgba(75, 175, 80, 0.3)' }
-                    }
-                }"
-                class="p-ripple box"
-                style="border: 1px solid rgba(75, 175, 80, 0.3)"
-            >
-                Green
-            </div>
-            <div
-                v-ripple="{
-                    pt: {
-                        root: { style: 'background: rgba(255, 193, 6, 0.3)' }
-                    }
-                }"
-                class="p-ripple box"
-                style="border: 1px solid rgba(255, 193, 6, 0.3)"
-            >
-                Orange
-            </div>
-            <div
-                v-ripple="{
-                    pt: {
-                        root: { style: 'background: rgba(156, 39, 176, 0.3)' }
-                    }
-                }"
-                class="p-ripple box"
-                style="border: 1px solid rgba(156, 39, 176, 0.3)"
-            >
-                Purple
-            </div>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -49,76 +19,16 @@ export default {
         return {
             code: {
                 basic: `
-<div
+<div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
-    v-ripple="{
+<div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
-        pt: {
+<div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
-            root: { style: 'background: rgba(75, 175, 80, 0.3)' }
-        }
-    }"
-    class="p-ripple box"
-    style="border: 1px solid rgba(75, 175, 80, 0.3)"
->
-    Green
-</div>
-<div
-    v-ripple="{
-        pt: {
-            root: { style: 'background: rgba(255, 193, 6, 0.3)' }
-        }
-    }"
-    class="p-ripple box"
-    style="border: 1px solid rgba(255, 193, 6, 0.3)"
->
-    Orange
-</div>
-<div
-    v-ripple="{
-        pt: {
-            root: { style: 'background: rgba(156, 39, 176, 0.3)' }
-        }
-    }"
-    class="p-ripple box"
-    style="border: 1px solid rgba(156, 39, 176, 0.3)"
->
-    Purple
-</div>
 `,
                 options: `
 <template>
     <div class="flex justify-content-center align-items-center gap-2">
-        <div
+        <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
-            v-ripple="{
+        <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
-                pt: {
+        <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
-                    root: { style: 'background: rgba(75, 175, 80, 0.3)' }
-                }
-            }"
-            class="p-ripple box"
-            style="border: 1px solid rgba(75, 175, 80, 0.3)"
-        >
-            Green
-        </div>
-        <div
-            v-ripple="{
-                pt: {
-                    root: { style: 'background: rgba(255, 193, 6, 0.3)' }
-                }
-            }"
-            class="p-ripple box"
-            style="border: 1px solid rgba(255, 193, 6, 0.3)"
-        >
-            Orange
-        </div>
-        <div
-            v-ripple="{
-                pt: {
-                    root: { style: 'background: rgba(156, 39, 176, 0.3)' }
-                }
-            }"
-            class="p-ripple box"
-            style="border: 1px solid rgba(156, 39, 176, 0.3)"
-        >
-            Purple
-        </div>
     </div>
 </template>
 
@@ -134,39 +44,9 @@ export default {
                 composition: `
 <template>
     <div class="flex justify-content-center align-items-center gap-2">
-        <div
+        <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
-            v-ripple="{
+        <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
-                pt: {
+        <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
-                    root: { style: 'background: rgba(75, 175, 80, 0.3)' }
-                }
-            }"
-            class="p-ripple box"
-            style="border: 1px solid rgba(75, 175, 80, 0.3)"
-        >
-            Green
-        </div>
-        <div
-            v-ripple="{
-                pt: {
-                    root: { style: 'background: rgba(255, 193, 6, 0.3)' }
-                }
-            }"
-            class="p-ripple box"
-            style="border: 1px solid rgba(255, 193, 6, 0.3)"
-        >
-            Orange
-        </div>
-        <div
-            v-ripple="{
-                pt: {
-                    root: { style: 'background: rgba(156, 39, 176, 0.3)' }
-                }
-            }"
-            class="p-ripple box"
-            style="border: 1px solid rgba(156, 39, 176, 0.3)"
-        >
-            Purple
-        </div>
     </div>
 </template>
 

doc/ripple/DefaultDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex flex-column align-items-center gap-3">
         <span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
-        <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
+        <div v-ripple class="ripple-box">Default</div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,30 +15,72 @@ export default {
         return {
             code: {
                 basic: `
-<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
+<div v-ripple class="ripple-box">Default</div>
 `,
                 options: `
 <template>
-    <div class="card card-container flex justify-content-center align-items-center">
+    <div class="card flex flex-column align-items-center gap-3">
-        <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
+        <div v-ripple class="ripple-box">Default</div>
     </div>
 </template>
 
 <script>
 <\/script>
+
+<style scoped>
+.ripple-box {
+    display: flex;
+    user-select: none;
+    justify-content: center;
+    align-items: center;
+    padding: 3rem;
+    font-weight: bold;
+    background: var(--p-content-background);
+    border: 1px solid var(--p-content-border-color);
+    border-radius: var(--p-content-border-radius);
+}
+<\/style>
 `,
                 composition: `
 <template>
-    <div class="card card-container flex justify-content-center align-items-center">
+    <div class="card flex flex-column align-items-center gap-3">
-        <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
+        <div v-ripple class="ripple-box">Default</div>
     </div>
 </template>
 
 <script setup>
 <\/script>
+
+<style scoped>
+.ripple-box {
+    display: flex;
+    user-select: none;
+    justify-content: center;
+    align-items: center;
+    padding: 3rem;
+    font-weight: bold;
+    background: var(--p-content-background);
+    border: 1px solid var(--p-content-border-color);
+    border-radius: var(--p-content-border-radius);
+}
+<\/style>
 `
             }
         };
     }
 };
 </script>
+
+<style scoped>
+.ripple-box {
+    display: flex;
+    user-select: none;
+    justify-content: center;
+    align-items: center;
+    padding: 3rem;
+    font-weight: bold;
+    background: var(--p-content-background);
+    border: 1px solid var(--p-content-border-color);
+    border-radius: var(--p-content-border-radius);
+}
+</style>

nuxt-vite.config.js

@@ -177,7 +177,7 @@ const ICON_ALIAS = {
 };
 
 // prettier-ignore
-const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabs','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
+const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','ripple','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabs','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
 
 const createThemeAlias = (presets) => {
     const presetAlias = presets?.reduce((p_acc, p_name) => {