vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 01:12:37 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactored Calendar Styles

Browse source
This commit is contained in:
Cagatay Civici 2024-04-07 01:44:28 +03:00
parent 53779ce3ff
commit d5e7c91109
3 changed files with 137 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

46
components/lib/calendar/style/CalendarStyle.js
View file

@ -6,57 +6,51 @@ const inlineStyles = {
const classes = {
root: ({ props, state }) => [
'p-calendar p-component p-inputwrapper',
'p-datepicker p-component p-inputwrapper',
{
'p-calendar-w-btn': props.showIcon && props.iconDisplay === 'button',
'p-calendar-input-icon-field': props.showIcon && props.iconDisplay === 'input',
'p-calendar-timeonly': props.timeOnly,
'p-calendar-disabled': props.disabled,
'p-invalid': props.invalid,
'p-inputwrapper-filled': props.modelValue,
'p-inputwrapper-focus': state.focused,
'p-focus': state.focused || state.overlayVisible
}
],
input: 'p-calendar-input',
dropdownButton: 'p-datepicker-trigger',
inputIcon: 'p-datepicker-trigger-icon p-input-icon',
panel: ({ instance, props, state }) => [
'p-datepicker p-component',
input: 'p-datepicker-input',
dropdownButton: 'p-datepicker-dropdown',
inputIcon: 'p-datepicker-input-icon',
panel: ({ instance, props }) => [
'p-datepicker-panel p-component',
{
'p-datepicker-mobile': instance.queryMatches,
'p-datepicker-inline': props.inline,
'p-datepicker-panel-inline': props.inline,
'p-disabled': props.disabled,
'p-datepicker-timeonly': props.timeOnly,
'p-datepicker-multiple-month': props.numberOfMonths > 1,
'p-datepicker-monthpicker': state.currentView === 'month',
'p-datepicker-yearpicker': state.currentView === 'year',
'p-datepicker-touch-ui': props.touchUI,
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
groupContainer: 'p-datepicker-group-container',
group: 'p-datepicker-group',
group: 'p-datepicker-calendar-container',
calendar: 'p-datepicker-calendar',
header: 'p-datepicker-header',
previousButton: 'p-datepicker-prev p-link',
previousIcon: 'p-datepicker-prev-icon',
title: 'p-datepicker-title',
monthTitle: 'p-datepicker-month p-link',
yearTitle: 'p-datepicker-year p-link',
monthTitle: 'p-datepicker-view-month p-link',
yearTitle: 'p-datepicker-view-year p-link',
decadeTitle: 'p-datepicker-decade',
nextButton: 'p-datepicker-next p-link',
nextIcon: 'p-datepicker-next-icon',
container: 'p-datepicker-calendar-container',
table: 'p-datepicker-calendar',
grid: 'p-datepicker-day-view',
weekHeader: 'p-datepicker-weekheader p-disabled',
weekNumber: 'p-datepicker-weeknumber',
weekLabelContainer: 'p-disabled',
day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
monthPicker: 'p-monthpicker',
month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
yearPicker: 'p-yearpicker',
year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
weekDay: 'p-datepicker-weekday-cell',
weekDayLabel: 'p-date-picker-weekday',
day: ({ date }) => ['p-datepicker-day-cell', { 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
dayLabel: ({ instance, props, date }) => ['p-datepicker-day', { 'p-datepicker-day-selected': instance.isSelected(date) && date.selectable, 'p-disabled': props.disabled || !date.selectable }],
monthPicker: 'p-datepicker-month-view',
month: ({ instance, props, month, index }) => ['p-datepicker-month', { 'p-datepicker-month-selected': instance.isMonthSelected(index), 'p-disabled': props.disabled || !month.selectable }],
yearPicker: 'p-datepicker-year-view',
year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }],
timePicker: 'p-timepicker',
hourPicker: 'p-hour-picker',
incrementButton: 'p-link',