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

Refactored Calendar Styles

pull/5677/head
Cagatay Civici 2024-04-07 01:44:28 +03:00
parent 53779ce3ff
commit d5e7c91109
3 changed files with 137 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/lib/calendar/Calendar.vue
View File

@ -69,8 +69,8 @@
v-bind="ptm('panel')" v-bind="ptm('panel')"
> >
<template v-if="!timeOnly"> <template v-if="!timeOnly">
<div :class="cx('groupContainer')" v-bind="ptm('groupContainer')"> <div :class="cx('group')" v-bind="ptm('group')">
<div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="cx('group')" v-bind="ptm('group')"> <div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="cx('calendar')" v-bind="ptm('calendar')">
<div :class="cx('header')" v-bind="ptm('header')"> <div :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot> <slot name="header"></slot>
<button <button
@ -169,8 +169,7 @@
</slot> </slot>
</button> </button>
</div> </div>
<div v-if="currentView === 'date'" :class="cx('container')" v-bind="ptm('container')"> <table v-if="currentView === 'date'" :class="cx('grid')" role="grid" v-bind="ptm('grid')">
<table :class="cx('table')" role="grid" v-bind="ptm('table')">
<thead v-bind="ptm('tableHeader')"> <thead v-bind="ptm('tableHeader')">
<tr v-bind="ptm('tableHeaderRow')"> <tr v-bind="ptm('tableHeaderRow')">
<th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tableheadercell"> <th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tableheadercell">
@ -180,8 +179,8 @@
</span> </span>
</slot> </slot>
</th> </th>
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell"> <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell" :class="cx('weekDay')">
<span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel">{{ weekDay }}</span> <span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel" :class="cx('weekDay')">{{ weekDay }}</span>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -249,7 +248,6 @@
</table> </table>
</div> </div>
</div> </div>
</div>
<div v-if="currentView === 'month'" :class="cx('monthPicker')" v-bind="ptm('monthPicker')"> <div v-if="currentView === 'month'" :class="cx('monthPicker')" v-bind="ptm('monthPicker')">
<span <span
v-for="(m, i) of monthPickerValues" v-for="(m, i) of monthPickerValues"

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

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

105
components/lib/themes/primeone/base/calendar/index.js
View File

@ -1,21 +1,21 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-calendar { .p-datepicker {
display: inline-flex; display: inline-flex;
max-width: 100%; max-width: 100%;
} }
.p-calendar .p-inputtext { .p-datepicker-input {
flex: 1 1 auto; flex: 1 1 auto;
width: 1%; width: 1%;
} }
.p-calendar-w-btn .p-inputtext { .p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.p-datepicker-trigger { .p-datepicker-dropdown {
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
cursor: pointer; cursor: pointer;
@ -35,32 +35,32 @@ export default {
outline-color: transparent; outline-color: transparent;
} }
.p-datepicker-trigger:not(:disabled):hover { .p-datepicker-dropdown:not(:disabled):hover {
background: ${dt('calendar.dropdown.hover.background')}; background: ${dt('calendar.dropdown.hover.background')};
border-color: ${dt('calendar.dropdown.hover.border.color')}; border-color: ${dt('calendar.dropdown.hover.border.color')};
background: ${dt('calendar.dropdown.hover.background')}; background: ${dt('calendar.dropdown.hover.background')};
} }
.p-datepicker-trigger:not(:disabled):active { .p-datepicker-dropdown:not(:disabled):active {
background: ${dt('calendar.dropdown.active.background')}; background: ${dt('calendar.dropdown.active.background')};
border-color: ${dt('calendar.dropdown.active.border.color')}; border-color: ${dt('calendar.dropdown.active.border.color')};
background: ${dt('calendar.dropdown.active.background')}; background: ${dt('calendar.dropdown.active.background')};
} }
.p-datepicker-trigger:focus-visible { .p-datepicker-dropdown:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-calendar:has(.p-input-icon) { .p-datepicker:has(.p-datepicker-input-icon) {
position: relative; position: relative;
} }
.p-calendar:has(.p-input-icon) .p-calendar-input { .p-datepicker:has(.p-datepicker-input-icon) .p-datepicker-input {
padding-right: 2.5rem; padding-right: 2.5rem;
} }
.p-calendar .p-input-icon { .p-datepicker-input-icon {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -68,19 +68,19 @@ export default {
margin-top: -.5rem; margin-top: -.5rem;
} }
.p-fluid .p-calendar { .p-fluid .p-datepicker {
display: flex; display: flex;
} }
.p-fluid .p-calendar .p-inputtext { .p-fluid .p-datepicker-input {
width: 1%; width: 1%;
} }
.p-calendar .p-datepicker { .p-datepicker .p-datepicker-panel {
min-width: 100%; min-width: 100%;
} }
.p-datepicker { .p-datepicker-panel {
width: auto; width: auto;
padding: 0.75rem; padding: 0.75rem;
background: ${dt('calendar.background')}; background: ${dt('calendar.background')};
@ -90,7 +90,7 @@ export default {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
} }
.p-datepicker-inline { .p-datepicker-panel-inline {
display: inline-block; display: inline-block;
overflow-x: auto; overflow-x: auto;
box-shadow: none; box-shadow: none;
@ -142,38 +142,38 @@ export default {
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-datepicker-year, .p-datepicker-view-year,
.p-datepicker-month { .p-datepicker-view-month {
font-weight: 500; font-weight: 500;
padding: 0.25rem; padding: 0.25rem;
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')};
} }
.p-datepicker-month { .p-datepicker-view-month {
margin-right: 0.5rem; margin-right: 0.5rem;
color: ${dt('calendar.month.picker.color')}; color: ${dt('calendar.month.picker.color')};
} }
.p-datepicker-year { .p-datepicker-view-year {
margin-right: 0.5rem; margin-right: 0.5rem;
color: ${dt('calendar.year.picker.color')}; color: ${dt('calendar.year.picker.color')};
} }
.p-datepicker-month:enabled:hover { .p-datepicker-view-month:enabled:hover {
background: ${dt('calendar.month.picker.hover.background')}; background: ${dt('calendar.month.picker.hover.background')};
color: ${dt('calendar.month.picker.hover.color')}; color: ${dt('calendar.month.picker.hover.color')};
} }
.p-datepicker-year:enabled:hover { .p-datepicker-view-year:enabled:hover {
background: ${dt('calendar.year.picker.hover.background')}; background: ${dt('calendar.year.picker.hover.background')};
color: ${dt('calendar.year.picker.hover.color')}; color: ${dt('calendar.year.picker.hover.color')};
} }
.p-datepicker-multiple-month .p-datepicker-group-container { .p-datepicker-calendar-container {
display: flex; display: flex;
} }
.p-datepicker-multiple-month .p-datepicker-group { .p-datepicker-calendar-container .p-datepicker-calendar {
flex: 1 1 auto; flex: 1 1 auto;
border-left: 1px solid ${dt('calendar.group.border.color')}; border-left: 1px solid ${dt('calendar.group.border.color')};
padding-right: 0.75rem; padding-right: 0.75rem;
@ -182,37 +182,35 @@ export default {
padding-bottom: 0; padding-bottom: 0;
} }
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { .p-datepicker-calendar-container .p-datepicker-calendar:first-child {
padding-left: 0; padding-left: 0;
border-left: 0 none; border-left: 0 none;
} }
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { .p-datepicker-calendar-container .p-datepicker-calendar:last-child {
padding-right: 0; padding-right: 0;
} }
.p-datepicker table { .p-datepicker-day-view {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: 1rem; font-size: 1rem;
margin: 0.5rem 0 0 0; margin: 0.5rem 0 0 0;
} }
.p-datepicker table th { .p-datepicker-weekday-cell {
padding: 0.25rem; padding: 0.25rem;
}
.p-datepicker-weekday {
font-weight: 500; font-weight: 500;
} }
.p-datepicker table th > span { .p-datepicker-day-cell {
width: 2rem;
height: 2rem;
}
.p-datepicker table td {
padding: 0.25rem; padding: 0.25rem;
} }
.p-datepicker td > span { .p-datepicker-day {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -229,36 +227,36 @@ export default {
color: ${dt('calendar.date.color')}; color: ${dt('calendar.date.color')};
} }
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
background: ${dt('calendar.date.hover.background')}; background: ${dt('calendar.date.hover.background')};
color: ${dt('calendar.date.hover.color')}; color: ${dt('calendar.date.hover.color')};
} }
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus-visible { .p-datepicker-day:focus-visible {
outline: 1px solid ${dt('focus.ring.color')}; outline: 1px solid ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-datepicker table td > span.p-highlight { .p-datepicker-day-selected {
background: ${dt('calendar.date.selected.background')}; background: ${dt('calendar.date.selected.background')};
color: ${dt('calendar.date.selected.color')}; color: ${dt('calendar.date.selected.color')};
} }
.p-datepicker table td.p-datepicker-today > span { .p-datepicker-today > .p-datepicker-day {
background: ${dt('calendar.today.background')}; background: ${dt('calendar.today.background')};
color: ${dt('calendar.today.color')}; color: ${dt('calendar.today.color')};
} }
.p-datepicker table td.p-datepicker-today > span.p-highlight { .p-datepicker-today > .p-datepicker-day-selected {
background: ${dt('calendar.date.selected.background')}; background: ${dt('calendar.date.selected.background')};
color: ${dt('calendar.date.selected.color')}; color: ${dt('calendar.date.selected.color')};
} }
.p-monthpicker { .p-datepicker-month-view {
margin: 0.5rem 0 0 0; margin: 0.5rem 0 0 0;
} }
.p-monthpicker-month { .p-datepicker-month {
width: 33.3%; width: 33.3%;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -273,27 +271,26 @@ export default {
color: ${dt('calendar.month.color')}; color: ${dt('calendar.month.color')};
} }
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
color: ${dt('calendar.month.hover.color')}; color: ${dt('calendar.month.hover.color')};
background: ${dt('calendar.month.hover.background')}; background: ${dt('calendar.month.hover.background')};
} }
.p-monthpicker-month.p-highlight { .p-datepicker-month-selected {
color: ${dt('calendar.month.selected.color')}; color: ${dt('calendar.month.selected.color')};
background: ${dt('calendar.month.selected.background')}; background: ${dt('calendar.month.selected.background')};
} }
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus-visible { .p-datepicker-month:not(.p-disabled):focus-visible {
outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')};
outline-offset: 0; outline-offset: 0;
} }
/* Year Picker */ .p-datepicker-year-view {
.p-yearpicker {
margin: 0.5rem 0 0 0; margin: 0.5rem 0 0 0;
} }
.p-yearpicker-year { .p-datepicker-year {
width: 50%; width: 50%;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -308,17 +305,17 @@ export default {
color: ${dt('calendar.year.color')}; color: ${dt('calendar.year.color')};
} }
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { .p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
color: ${dt('calendar.year.hover.color')}; color: ${dt('calendar.year.hover.color')};
background: ${dt('calendar.year.hover.background')}; background: ${dt('calendar.year.hover.background')};
} }
.p-yearpicker-year.p-highlight { .p-datepicker-year-selected {
color: ${dt('calendar.year.selected.color')}; color: ${dt('calendar.year.selected.color')};
background: ${dt('calendar.year.selected.background')}; background: ${dt('calendar.year.selected.background')};
} }
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus-visible { .p-datepicker-year:not(.p-disabled):focus-visible {
outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')};
outline-offset: 0; outline-offset: 0;
} }
@ -333,8 +330,6 @@ export default {
.p-datepicker-buttonbar .p-button { .p-datepicker-buttonbar .p-button {
width: auto; width: auto;
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
} }
.p-timepicker { .p-timepicker {
@ -345,12 +340,12 @@ export default {
padding: 0; padding: 0;
} }
.p-datepicker .p-datepicker-group-container+.p-timepicker { .p-datepicker-calendar-group + .p-timepicker {
margin-top: 0.5rem; margin-top: 0.5rem;
padding-top: 0.5rem; padding-top: 0.5rem;
} }
.p-timepicker>div { .p-timepicker > div {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;