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> <template>
<Portal> <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')"> <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> <slot v-if="$slots.container" name="container" :message="confirmation" :onAccept="accept" :onReject="reject" :acceptCallback="accept" :rejectCallback="reject"></slot>
<template v-else> <template v-else>
@ -207,8 +207,8 @@ export default {
this.container.style.setProperty($dt('overlay.arrow.left').name, `${arrowLeft}px`); this.container.style.setProperty($dt('overlay.arrow.left').name, `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) { if (containerOffset.top < targetOffset.top) {
this.container.setAttribute('data-p-confirm-popup-flipped', 'true'); this.container.setAttribute('data-p-confirmpopup-flipped', 'true');
!this.isUnstyled && DomHandler.addClass(this.container, 'p-confirm-popup-flipped'); !this.isUnstyled && DomHandler.addClass(this.container, 'p-confirmpopup-flipped');
} }
}, },
bindOutsideClickListener() { bindOutsideClickListener() {

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

@ -11,17 +11,16 @@ const theme = ({ dt }) => `
} }
.p-password-meter { .p-password-meter {
height: 10px; height: ${dt('password.meter.height')};
margin-bottom: 0.75rem;
background: ${dt('password.meter.border.color')}; background: ${dt('password.meter.border.color')};
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('password.meter.border.radius')};
} }
.p-password-meter-label { .p-password-meter-label {
height: 100%; height: 100%;
width: 0; width: 0;
transition: width 1s ease-in-out; transition: width 1s ease-in-out;
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('password.meter.border.radius')};
} }
.p-password-meter-weak { .p-password-meter-weak {
@ -46,26 +45,29 @@ const theme = ({ dt }) => `
} }
.p-password-overlay { .p-password-overlay {
padding: 0.75rem; padding: ${dt('password.overlay.padding')};
background: ${dt('password.overlay.background')}; background: ${dt('password.overlay.background')};
color: ${dt('password.overlay.color')}; color: ${dt('password.overlay.color')};
border: 1px solid ${dt('password.overlay.border.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); box-shadow: ${dt('password.overlay.shadow')};
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('password.overlay.border.radius')};
display: flex;
flex-direction: column;
gap: ${dt('password.overlay.gap')}
} }
.p-password-toggle-mask-icon { .p-password-toggle-mask-icon {
right: 0.75rem; right: ${dt('form.field.padding.x')};
color: ${dt('password.icon.color')}; color: ${dt('password.icon.color')};
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -0.5rem; margin-top: calc(-1 * calc(${dt('icon.size')} / 2));
width: 1rem; width: ${dt('icon.size')};
height: 1rem; height: ${dt('icon.size')};
} }
.p-password:has(.p-password-toggle-mask-icon) .p-password-input { .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 { .p-slider {
position: relative; position: relative;
background: ${dt('slider.track.background')}; background: ${dt('slider.track.background')};
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('slider.border.radius')};
} }
.p-slider-handle { .p-slider-handle {
@ -13,43 +13,48 @@ const theme = ({ dt }) => `
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 20px; height: ${dt('slider.handle.height')};
width: 20px; width: ${dt('slider.handle.width')};
background: ${dt('slider.handle.background')}; background: ${dt('slider.handle.background')};
border: 0 none; border-radius: ${dt('slider.handle.border.radius')};
border-radius: 50%;
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; 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; outline-color: transparent;
} }
.p-slider-handle::before { .p-slider-handle::before {
content: ""; content: "";
width: 16px; width: ${dt('slider.handle.content.width')};
height: 16px; height: ${dt('slider.handle.content.height')};
display: block; display: block;
background-color: ${dt('slider.handle.content.background')}; background: ${dt('slider.handle.content.background')};
border-radius: 50%; border-radius: ${dt('slider.handle.content.border.radius')};
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); box-shadow: ${dt('slider.handle.content.shadow')};
transition: background ${dt('transition.duration')};
} }
.p-slider:not(.p-disabled) .p-slider-handle:hover { .p-slider:not(.p-disabled) .p-slider-handle:hover {
background: ${dt('slider.handle.hover.background')}; 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 { .p-slider-handle:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; border-color: ${dt('slider.handle.focus.border.color')};
outline-offset: 0; 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 { .p-slider-range {
display: block; display: block;
background: ${dt('slider.range.background')}; background: ${dt('slider.range.background')};
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('slider.border.radius')};
} }
.p-slider.p-slider-horizontal { .p-slider.p-slider-horizontal {
height: 3px; height: ${dt('slider.track.size')};
} }
.p-slider-horizontal .p-slider-range { .p-slider-horizontal .p-slider-range {
@ -60,19 +65,19 @@ const theme = ({ dt }) => `
.p-slider-horizontal .p-slider-handle { .p-slider-horizontal .p-slider-handle {
top: 50%; top: 50%;
margin-top: -10px; margin-top: calc(-1 * calc(${dt('slider.handle.height')} / 2));
margin-left: -10px; margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2));
} }
.p-slider-vertical { .p-slider-vertical {
height: 100px; min-height: 100px;
width: 3px; height: ${dt('slider.track.size')};
} }
.p-slider-vertical .p-slider-handle { .p-slider-vertical .p-slider-handle {
left: 50%; left: 50%;
margin-left: -10px; margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2));
margin-bottom: -10px; margin-bottom: calc(-1 * calc(${dt('slider.handle.height')} / 2));
} }
.p-slider-vertical .p-slider-range { .p-slider-vertical .p-slider-range {

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

@ -170,7 +170,13 @@ export default {
}, },
overlay: { overlay: {
select: { 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: { colorScheme: {
@ -343,8 +349,7 @@ export default {
select: { select: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
color: '{text.color}', color: '{text.color}'
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
}, },
popover: { popover: {
background: '{surface.900}', background: '{surface.900}',

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

@ -1,6 +1,8 @@
export default { export default {
meter: { meter: {
borderColor: '{content.border.color}' borderColor: '{content.border.color}',
borderRadius: '{border.radius.md}',
height: '.75rem'
}, },
icon: { icon: {
color: '{form.field.icon.color}' color: '{form.field.icon.color}'
@ -8,7 +10,11 @@ export default {
overlay: { overlay: {
background: '{overlay.popover.background}', background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}', 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: { colorScheme: {
light: { light: {

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

@ -1,13 +1,33 @@
export default { export default {
track: { track: {
background: '{content.border.color}' background: '{content.border.color}',
borderRadius: '{border.radius.md}',
size: '3px'
}, },
range: { range: {
background: '{primary.color}' background: '{primary.color}'
}, },
handle: { handle: {
width: '20px',
height: '20px',
borderRadius: '50%',
background: '{content.border.color}', 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: { colorScheme: {
light: { light: {

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

@ -169,7 +169,13 @@ export default {
}, },
overlay: { overlay: {
select: { 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: { colorScheme: {
@ -239,8 +245,7 @@ export default {
select: { select: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
color: '{text.color}', color: '{text.color}'
shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
}, },
popover: { popover: {
background: '{surface.0}', background: '{surface.0}',
@ -348,8 +353,7 @@ export default {
select: { select: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
color: '{text.color}', 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'
}, },
popover: { popover: {
background: '{surface.900}', background: '{surface.900}',

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

@ -1,6 +1,8 @@
export default { export default {
meter: { meter: {
borderColor: '{content.border.color}' borderColor: '{content.border.color}',
borderRadius: '{border.radius.sm}',
height: '.75rem'
}, },
icon: { icon: {
color: '{form.field.icon.color}' color: '{form.field.icon.color}'
@ -8,7 +10,11 @@ export default {
overlay: { overlay: {
background: '{overlay.popover.background}', background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}', 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: { colorScheme: {
light: { light: {

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

@ -1,13 +1,33 @@
export default { export default {
track: { track: {
background: '{content.border.color}' background: '{content.border.color}',
borderRadius: '{border.radius.sm}',
size: '3px'
}, },
range: { range: {
background: '{primary.color}' background: '{primary.color}'
}, },
handle: { handle: {
background: '{content.border.color}', width: '16px',
hoverBackground: '{content.border.color}' 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: { colorScheme: {
light: { light: {