vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Tokens for Ripple

pull/5756/head
Cagatay Civici 2024-05-13 14:17:01 +03:00
parent 2bbc5cc232
commit 51df79c306
13 changed files with 105 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/lib/ripple/Ripple.js
View File

@ -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();

7
components/lib/ripple/style/RippleStyle.js
View File

@ -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;

4
components/lib/themes/aura/index.js
View File

@ -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
}
};

0
components/lib/themes/aura/ripple/index.d.ts vendored Normal file
View File

10
components/lib/themes/aura/ripple/index.js Normal file
View File

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

6
components/lib/themes/aura/ripple/package.json Normal file
View File

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

4
components/lib/themes/lara/index.js
View File

@ -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
}
};

0
components/lib/themes/lara/ripple/index.d.ts vendored Normal file
View File

10
components/lib/themes/lara/ripple/index.js Normal file
View File

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

6
components/lib/themes/lara/ripple/package.json Normal file
View File

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

144
doc/ripple/CustomDoc.vue
View File

@ -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
v-ripple="{
pt: {
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 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>
<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>
<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>
</div>
</div>
<DocSectionCode :code="code" />
@ -49,76 +19,16 @@ export default {
return {
code: {
basic: `
<div
v-ripple="{
pt: {
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 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>
<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>
<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>
`,
options: `
<template>
<div class="flex justify-content-center align-items-center gap-2">
<div
v-ripple="{
pt: {
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 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>
<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>
<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>
</div>
</template>
@ -134,39 +44,9 @@ export default {
composition: `
<template>
<div class="flex justify-content-center align-items-center gap-2">
<div
v-ripple="{
pt: {
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 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>
<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>
<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>
</div>
</template>

54
doc/ripple/DefaultDoc.vue
View File

@ -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 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 class="card flex flex-column align-items-center gap-3">
<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 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 class="card flex flex-column align-items-center gap-3">
<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>

2
nuxt-vite.config.js
View File

@ -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) => {