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

Refactored datepicker

pull/5701/head
Cagatay Civici 2024-05-05 20:35:03 +03:00
parent 1a4c249b97
commit 30fa452525
3 changed files with 68 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/datepicker/BaseDatePicker.vue
View File

@ -231,13 +231,13 @@ export default {
navigatorButtonProps: { navigatorButtonProps: {
type: Object, type: Object,
default() { default() {
return { severity: 'secondary', text: true }; return { severity: 'secondary', text: true, rounded: true };
} }
}, },
timepickerButtonProps: { timepickerButtonProps: {
type: Object, type: Object,
default() { default() {
return { severity: 'secondary', text: true }; return { severity: 'secondary', text: true, rounded: true };
} }
}, },
ariaLabelledby: { ariaLabelledby: {

36
components/lib/datepicker/style/DatePickerStyle.js
View File

@ -122,22 +122,22 @@ const theme = ({ dt }) => `
.p-datepicker-view-month { .p-datepicker-view-month {
margin-right: 0.5rem; margin-right: 0.5rem;
color: ${dt('datepicker.month.picker.color')}; color: ${dt('datepicker.view.month.color')};
} }
.p-datepicker-view-year { .p-datepicker-view-year {
margin-right: 0.5rem; margin-right: 0.5rem;
color: ${dt('datepicker.year.picker.color')}; color: ${dt('datepicker.view.year.color')};
} }
.p-datepicker-view-month:enabled:hover { .p-datepicker-view-month:enabled:hover {
background: ${dt('datepicker.month.picker.hover.background')}; background: ${dt('datepicker.view.month.hover.background')};
color: ${dt('datepicker.month.picker.hover.color')}; color: ${dt('datepicker.view.month.hover.color')};
} }
.p-datepicker-view-year:enabled:hover { .p-datepicker-view-year:enabled:hover {
background: ${dt('datepicker.year.picker.hover.background')}; background: ${dt('datepicker.view.year.hover.background')};
color: ${dt('datepicker.year.picker.hover.color')}; color: ${dt('datepicker.view.year.hover.color')};
} }
.p-datepicker-datepicker-container { .p-datepicker-datepicker-container {
@ -239,17 +239,17 @@ const theme = ({ dt }) => `
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
outline-color: transparent; outline-color: transparent;
color: ${dt('datepicker.month.color')}; color: ${dt('datepicker.date.color')};
} }
.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover { .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
color: ${dt('datepicker.month.hover.color')}; color: ${dt('datepicker.date.hover.color')};
background: ${dt('datepicker.month.hover.background')}; background: ${dt('datepicker.date.hover.background')};
} }
.p-datepicker-month-selected { .p-datepicker-month-selected {
color: ${dt('datepicker.month.selected.color')}; color: ${dt('datepicker.date.selected.color')};
background: ${dt('datepicker.month.selected.background')}; background: ${dt('datepicker.date.selected.background')};
} }
.p-datepicker-month:not(.p-disabled):focus-visible { .p-datepicker-month:not(.p-disabled):focus-visible {
@ -273,17 +273,17 @@ const theme = ({ dt }) => `
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
outline-color: transparent; outline-color: transparent;
color: ${dt('datepicker.year.color')}; color: ${dt('datepicker.date.color')};
} }
.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover { .p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
color: ${dt('datepicker.year.hover.color')}; color: ${dt('datepicker.date.hover.color')};
background: ${dt('datepicker.year.hover.background')}; background: ${dt('datepicker.date.hover.background')};
} }
.p-datepicker-year-selected { .p-datepicker-year-selected {
color: ${dt('datepicker.year.selected.color')}; color: ${dt('datepicker.date.selected.color')};
background: ${dt('datepicker.year.selected.background')}; background: ${dt('datepicker.date.selected.background')};
} }
.p-datepicker-year:not(.p-disabled):focus-visible { .p-datepicker-year:not(.p-disabled):focus-visible {
@ -307,11 +307,11 @@ const theme = ({ dt }) => `
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-top: 1px solid ${dt('datepicker.timepicker.border.color')}; border-top: 1px solid ${dt('datepicker.time.picker.border.color')};
padding: 0; padding: 0;
} }
.p-datepicker-datepicker-group + .p-timepicker { .p-datepicker-datepicker-group + .p-datepicker-time-picker {
margin-top: 0.5rem; margin-top: 0.5rem;
padding-top: 0.5rem; padding-top: 0.5rem;
} }

151
components/lib/themes/aura/datepicker/index.js
View File

@ -1,138 +1,63 @@
export default { export default {
colorScheme: {
light: {
root: { root: {
background: '{surface.0}', background: '{content.background}',
borderColor: '{surface.200}', borderColor: '{content.border.color}',
color: '{surface.700}' color: '{content.color}'
}, },
header: { header: {
background: '{surface.0}', background: '{content.background}',
borderColor: '{surface.200}', borderColor: '{content.border.color}',
color: '{surface.700}' color: '{content.color}'
},
monthPicker: {
hoverBackground: '{surface.100}',
color: '{surface.700}',
hoverColor: '{surface.800}'
},
yearPicker: {
hoverBackground: '{surface.100}',
color: '{surface.700}',
hoverColor: '{surface.800}'
},
group: {
borderColor: '{surface.200}'
},
date: {
hoverBackground: '{surface.100}',
selectedBackground: '{highlight.background}',
color: '{surface.700}',
hoverColor: '{surface.800}',
selectedColor: '{highlight.color}'
},
today: {
background: '{surface.200}',
color: '{surface.900}'
},
month: {
hoverBackground: '{surface.100}',
selectedBackground: '{highlight.background}',
color: '{surface.700}',
hoverColor: '{surface.800}',
selectedColor: '{highlight.color}'
},
year: {
hoverBackground: '{surface.100}',
selectedBackground: '{highlight.background}',
color: '{surface.700}',
hoverColor: '{surface.800}',
selectedColor: '{highlight.color}'
},
buttonbar: {
borderColor: '{surface.200}'
},
timepicker: {
borderColor: '{surface.200}'
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',
background: '{surface.100}',
hoverBackground: '{surface.200}',
activeBackground: '{surface.300}',
borderColor: '{form.field.border.color}', borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}', hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}', activeBorderColor: '{form.field.border.color}',
color: '{surface.600}', background: '{button.secondary.background}',
hoverColor: '{surface.700}', hoverBackground: '{button.secondary.hover.background}',
activeColor: '{surface.800}' activeBackground: '{button.secondary.active.background}',
} color: '{button.secondary.color}',
hoverColor: '{button.secondary.hover.color}',
activeColor: '{button.secondary.active.color}'
}, },
dark: { viewMonth: {
root: { hoverBackground: '{content.hover.background}',
background: '{surface.900}', color: '{content.color}',
borderColor: '{surface.700}', hoverColor: '{content.hover.color}'
color: '{surface.0}'
}, },
header: { viewYear: {
background: '{surface.900}', hoverBackground: '{content.hover.background}',
borderColor: '{surface.700}', color: '{content.color}',
color: '{surface.0}' hoverColor: '{content.hover.color}'
},
monthPicker: {
hoverBackground: '{surface.800}',
color: '{surface.0}',
hoverColor: '{surface.0}'
},
yearPicker: {
hoverBackground: '{surface.800}',
color: '{surface.0}',
hoverColor: '{surface.0}'
}, },
group: { group: {
borderColor: '{surface.700}' borderColor: '{content.border.color}'
}, },
date: { date: {
hoverBackground: '{surface.800}', hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
color: '{surface.0}', color: '{content.color}',
hoverColor: '{surface.0}', hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}'
},
today: {
background: '{surface.700}',
color: '{surface.0}'
},
month: {
hoverBackground: '{surface.800}',
selectedBackground: '{highlight.background}',
color: '{surface.0}',
hoverColor: '{surface.0}',
selectedColor: '{highlight.color}'
},
year: {
hoverBackground: '{surface.800}',
selectedBackground: '{highlight.background}',
color: '{surface.0}',
hoverColor: '{surface.0}',
selectedColor: '{highlight.color}' selectedColor: '{highlight.color}'
}, },
buttonbar: { buttonbar: {
borderColor: '{surface.700}' borderColor: '{content.border.color}'
}, },
timepicker: { timePicker: {
borderColor: '{surface.700}' borderColor: '{content.border.color}'
}, },
dropdown: { colorScheme: {
background: '{surface.800}', light: {
hoverBackground: '{surface.700}', today: {
activeBackground: '{surface.600}', background: '{surface.200}',
borderColor: '{form.field.border.color}', color: '{surface.900}'
hoverBorderColor: '{form.field.border.color}', }
activeBorderColor: '{form.field.border.color}', },
color: '{surface.300}', dark: {
hoverColor: '{surface.200}', today: {
activeColor: '{surface.100}' background: '{surface.700}',
color: '{surface.0}'
} }
} }
} }