diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js index 69a17995a..12d41892f 100644 --- a/components/lib/ripple/Ripple.js +++ b/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(); diff --git a/components/lib/ripple/style/RippleStyle.js b/components/lib/ripple/style/RippleStyle.js index 5a8902ae1..d5246b6ee 100644 --- a/components/lib/ripple/style/RippleStyle.js +++ b/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; diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js index 325e40b68..75a2897db 100644 --- a/components/lib/themes/aura/index.js +++ b/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 } }; diff --git a/components/lib/themes/aura/ripple/index.d.ts b/components/lib/themes/aura/ripple/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/aura/ripple/index.js b/components/lib/themes/aura/ripple/index.js new file mode 100644 index 000000000..f760c8d3d --- /dev/null +++ b/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)' + } + } +}; diff --git a/components/lib/themes/aura/ripple/package.json b/components/lib/themes/aura/ripple/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/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" +} diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js index a44ec3487..ee5a2b41f 100644 --- a/components/lib/themes/lara/index.js +++ b/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 } }; diff --git a/components/lib/themes/lara/ripple/index.d.ts b/components/lib/themes/lara/ripple/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/lara/ripple/index.js b/components/lib/themes/lara/ripple/index.js new file mode 100644 index 000000000..f760c8d3d --- /dev/null +++ b/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)' + } + } +}; diff --git a/components/lib/themes/lara/ripple/package.json b/components/lib/themes/lara/ripple/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/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" +} diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue index 6d3859572..1328341ab 100644 --- a/doc/ripple/CustomDoc.vue +++ b/doc/ripple/CustomDoc.vue @@ -5,39 +5,9 @@
Ripple option at the configurator needs to be turned on for the demo.
-
- Green -
-
- Orange -
-
- Purple -
+
Green
+
Orange
+
Purple
@@ -49,76 +19,16 @@ export default { return { code: { basic: ` -
- Green -
-
- Orange -
-
- Purple -
+
Green
+
Orange
+
Purple
`, options: ` @@ -134,39 +44,9 @@ export default { composition: ` diff --git a/doc/ripple/DefaultDoc.vue b/doc/ripple/DefaultDoc.vue index db3494c04..4871169d5 100644 --- a/doc/ripple/DefaultDoc.vue +++ b/doc/ripple/DefaultDoc.vue @@ -4,7 +4,7 @@
Ripple option at the configurator needs to be turned on for the demo. -
Default
+
Default
@@ -15,30 +15,72 @@ export default { return { code: { basic: ` -
Default
+
Default
`, options: ` + + diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index 3edc21fb7..0164500d2 100644 --- a/nuxt-vite.config.js +++ b/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) => {