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

Merge branch 'v4' of https://github.com/primefaces/primevue into v4

pull/5756/head
Mert Sincan 2024-05-08 15:28:02 +01:00
parent ce0300b464 1305a23abf
commit a9d46ba470
9 changed files with 121 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/confirmpopup/ConfirmPopup.vue
View File

@ -1,6 +1,6 @@
<template>
<Portal>
<transition name="p-confirm-popup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<transition name="p-confirmpopup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="cx('root')" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="ptmi('root')">
<slot v-if="$slots.container" name="container" :message="confirmation" :onAccept="accept" :onReject="reject" :acceptCallback="accept" :rejectCallback="reject"></slot>
<template v-else>
@ -207,8 +207,8 @@ export default {
this.container.style.setProperty($dt('overlay.arrow.left').name, `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) {
this.container.setAttribute('data-p-confirm-popup-flipped', 'true');
!this.isUnstyled && DomHandler.addClass(this.container, 'p-confirm-popup-flipped');
this.container.setAttribute('data-p-confirmpopup-flipped', 'true');
!this.isUnstyled && DomHandler.addClass(this.container, 'p-confirmpopup-flipped');
}
},
bindOutsideClickListener() {

26
components/lib/password/style/PasswordStyle.js
View File

@ -11,17 +11,16 @@ const theme = ({ dt }) => `
}
.p-password-meter {
height: 10px;
margin-bottom: 0.75rem;
height: ${dt('password.meter.height')};
background: ${dt('password.meter.border.color')};
border-radius: ${dt('border.radius.md')};
border-radius: ${dt('password.meter.border.radius')};
}
.p-password-meter-label {
height: 100%;
width: 0;
transition: width 1s ease-in-out;
border-radius: ${dt('border.radius.md')};
border-radius: ${dt('password.meter.border.radius')};
}
.p-password-meter-weak {
@ -46,26 +45,29 @@ const theme = ({ dt }) => `
}
.p-password-overlay {
padding: 0.75rem;
padding: ${dt('password.overlay.padding')};
background: ${dt('password.overlay.background')};
color: ${dt('password.overlay.color')};
border: 1px solid ${dt('password.overlay.border.color')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
border-radius: ${dt('border.radius.md')};
box-shadow: ${dt('password.overlay.shadow')};
border-radius: ${dt('password.overlay.border.radius')};
display: flex;
flex-direction: column;
gap: ${dt('password.overlay.gap')}
}
.p-password-toggle-mask-icon {
right: 0.75rem;
right: ${dt('form.field.padding.x')};
color: ${dt('password.icon.color')};
position: absolute;
top: 50%;
margin-top: -0.5rem;
width: 1rem;
height: 1rem;
margin-top: calc(-1 * calc(${dt('icon.size')} / 2));
width: ${dt('icon.size')};
height: ${dt('icon.size')};
}
.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
padding-right: 2.5rem;
padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
}
`;

47
components/lib/slider/style/SliderStyle.js
View File

@ -4,7 +4,7 @@ const theme = ({ dt }) => `
.p-slider {
position: relative;
background: ${dt('slider.track.background')};
border-radius: ${dt('border.radius.md')};
border-radius: ${dt('slider.border.radius')};
}
.p-slider-handle {
@ -13,43 +13,48 @@ const theme = ({ dt }) => `
display: flex;
justify-content: center;
align-items: center;
height: 20px;
width: 20px;
height: ${dt('slider.handle.height')};
width: ${dt('slider.handle.width')};
background: ${dt('slider.handle.background')};
border: 0 none;
border-radius: 50%;
border-radius: ${dt('slider.handle.border.radius')};
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-slider-handle::before {
content: "";
width: 16px;
height: 16px;
width: ${dt('slider.handle.content.width')};
height: ${dt('slider.handle.content.height')};
display: block;
background-color: ${dt('slider.handle.content.background')};
border-radius: 50%;
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14);
background: ${dt('slider.handle.content.background')};
border-radius: ${dt('slider.handle.content.border.radius')};
box-shadow: ${dt('slider.handle.content.shadow')};
transition: background ${dt('transition.duration')};
}
.p-slider:not(.p-disabled) .p-slider-handle:hover {
background: ${dt('slider.handle.hover.background')};
border-color: transparent;
}
.p-slider:not(.p-disabled) .p-slider-handle:hover::before {
background: ${dt('slider.handle.content.hover.background')};
}
.p-slider-handle:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: 0;
border-color: ${dt('slider.handle.focus.border.color')};
box-shadow: ${dt('slider.handle.focus.ring.shadow')};
outline: ${dt('slider.handle.focus.ring.width')} ${dt('slider.handle.focus.ring.style')} ${dt('slider.handle.focus.ring.color')};
outline-offset: ${dt('slider.handle.focus.ring.offset')};
}
.p-slider-range {
display: block;
background: ${dt('slider.range.background')};
border-radius: ${dt('border.radius.md')};
border-radius: ${dt('slider.border.radius')};
}
.p-slider.p-slider-horizontal {
height: 3px;
height: ${dt('slider.track.size')};
}
.p-slider-horizontal .p-slider-range {
@ -60,19 +65,19 @@ const theme = ({ dt }) => `
.p-slider-horizontal .p-slider-handle {
top: 50%;
margin-top: -10px;
margin-left: -10px;
margin-top: calc(-1 * calc(${dt('slider.handle.height')} / 2));
margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2));
}
.p-slider-vertical {
height: 100px;
width: 3px;
min-height: 100px;
height: ${dt('slider.track.size')};
}
.p-slider-vertical .p-slider-handle {
left: 50%;
margin-left: -10px;
margin-bottom: -10px;
margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2));
margin-bottom: calc(-1 * calc(${dt('slider.handle.height')} / 2));
}
.p-slider-vertical .p-slider-range {

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

@ -170,7 +170,13 @@ export default {
},
overlay: {
select: {
borderRadius: '{border.radius.md}'
borderRadius: '{border.radius.md}',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
},
popover: {
borderRadius: '{border.radius.md}',
padding: '0.75rem',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
}
},
colorScheme: {
@ -343,8 +349,7 @@ export default {
select: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{text.color}',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
color: '{text.color}'
},
popover: {
background: '{surface.900}',

10
components/lib/themes/aura/password/index.js
View File

@ -1,6 +1,8 @@
export default {
meter: {
borderColor: '{content.border.color}'
borderColor: '{content.border.color}',
borderRadius: '{border.radius.md}',
height: '.75rem'
},
icon: {
color: '{form.field.icon.color}'
@ -8,7 +10,11 @@ export default {
overlay: {
background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}',
color: '{overlay.popover.color}'
borderRadius: '{overlay.popover.border.radius}',
color: '{overlay.popover.color}',
padding: '{overlay.popover.padding}',
shadow: '{overlay.popover.shadow}',
gap: '0.5rem'
},
colorScheme: {
light: {

24
components/lib/themes/aura/slider/index.js
View File

@ -1,13 +1,33 @@
export default {
track: {
background: '{content.border.color}'
background: '{content.border.color}',
borderRadius: '{border.radius.md}',
size: '3px'
},
range: {
background: '{primary.color}'
},
handle: {
width: '20px',
height: '20px',
borderRadius: '50%',
background: '{content.border.color}',
hoverBackground: '{content.border.color}'
hoverBackground: '{content.border.color}',
content: {
borderRadius: '50%',
background: '{content.background}',
hoverBackground: '{content.background}',
width: '16px',
height: '16px',
shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)'
},
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
colorScheme: {
light: {

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

@ -169,7 +169,13 @@ export default {
},
overlay: {
select: {
borderRadius: '{border.radius.sm}'
borderRadius: '{border.radius.sm}',
shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
},
popover: {
borderRadius: '{border.radius.sm}',
padding: '1rem',
shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
}
},
colorScheme: {
@ -239,8 +245,7 @@ export default {
select: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{text.color}',
shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
color: '{text.color}'
},
popover: {
background: '{surface.0}',
@ -348,8 +353,7 @@ export default {
select: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{text.color}',
shadow: 'rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px'
color: '{text.color}'
},
popover: {
background: '{surface.900}',

10
components/lib/themes/lara/password/index.js
View File

@ -1,6 +1,8 @@
export default {
meter: {
borderColor: '{content.border.color}'
borderColor: '{content.border.color}',
borderRadius: '{border.radius.sm}',
height: '.75rem'
},
icon: {
color: '{form.field.icon.color}'
@ -8,7 +10,11 @@ export default {
overlay: {
background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}',
color: '{overlay.popover.color}'
borderRadius: '{overlay.popover.border.radius}',
color: '{overlay.popover.color}',
padding: '{overlay.popover.padding}',
shadow: '{overlay.popover.shadow}',
gap: '0.75rem'
},
colorScheme: {
light: {

26
components/lib/themes/lara/slider/index.js
View File

@ -1,13 +1,33 @@
export default {
track: {
background: '{content.border.color}'
background: '{content.border.color}',
borderRadius: '{border.radius.sm}',
size: '3px'
},
range: {
background: '{primary.color}'
},
handle: {
background: '{content.border.color}',
hoverBackground: '{content.border.color}'
width: '16px',
height: '16px',
borderRadius: '50%',
background: '{primary.color}',
hoverBackground: '{primary.color}',
content: {
background: '{content.background}',
hoverBackground: '{primary.color}',
borderRadius: '50%',
width: '12px',
height: '12px',
shadow: 'none'
},
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
}
},
colorScheme: {
light: {