mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Refactor #3965 - For Calendar
This commit is contained in:
mertsincan
parent
9e1f1b5194
commit
b13d188e4f
5 changed files with 643 additions and 505 deletions
459
components/lib/calendar/BaseCalendar.vue
Normal file
459
components/lib/calendar/BaseCalendar.vue
Normal file
|
|
@ -0,0 +1,459 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-calendar {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.p-calendar .p-inputtext {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-calendar-w-btn .p-inputtext {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-calendar-w-btn .p-datepicker-trigger {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* Fluid */
|
||||
.p-fluid .p-calendar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-calendar .p-inputtext {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
/* Datepicker */
|
||||
.p-calendar .p-datepicker {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-datepicker {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-datepicker-inline {
|
||||
display: inline-block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.p-datepicker-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.p-datepicker-header .p-datepicker-title {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.p-datepicker-prev,
|
||||
.p-datepicker-next {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Multiple Month DatePicker */
|
||||
.p-datepicker-multiple-month .p-datepicker-group-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* DatePicker Table */
|
||||
.p-datepicker table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.p-datepicker td > span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Month Picker */
|
||||
.p-monthpicker-month {
|
||||
width: 33.3%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Year Picker */
|
||||
.p-yearpicker-year {
|
||||
width: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Button Bar */
|
||||
.p-datepicker-buttonbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Time Picker */
|
||||
.p-timepicker {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-timepicker button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-timepicker > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Touch UI */
|
||||
.p-datepicker-touch-ui,
|
||||
.p-calendar .p-datepicker-touch-ui {
|
||||
min-width: 80vw;
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||
};
|
||||
|
||||
const classes = {
|
||||
root: ({ props, state }) => [
|
||||
'p-calendar p-component p-inputwrapper',
|
||||
{
|
||||
'p-calendar-w-btn': props.showIcon,
|
||||
'p-calendar-timeonly': props.timeOnly,
|
||||
'p-calendar-disabled': props.disabled,
|
||||
'p-inputwrapper-filled': props.modelValue,
|
||||
'p-inputwrapper-focus': state.focused
|
||||
}
|
||||
],
|
||||
input: 'p-inputtext p-component',
|
||||
dropdownButton: 'p-datepicker-trigger',
|
||||
panel: ({ instance, props, state }) => [
|
||||
'p-datepicker p-component',
|
||||
props.panelClass,
|
||||
{
|
||||
'p-datepicker-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-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
groupContainer: 'p-datepicker-group-container',
|
||||
group: 'p-datepicker-group',
|
||||
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',
|
||||
decadeTitle: 'p-datepicker-decade',
|
||||
nextButton: 'p-datepicker-next p-link',
|
||||
nextIcon: 'p-datepicker-next-icon',
|
||||
container: 'p-datepicker-calendar-container',
|
||||
table: 'p-datepicker-calendar',
|
||||
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), 'p-disabled': !date.selectable }],
|
||||
ariaSelectedDay: 'p-hidden-accessible',
|
||||
monthPicker: 'p-monthpicker',
|
||||
month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
|
||||
ariaMonth: 'p-hidden-accessible',
|
||||
yearPicker: 'p-yearpicker',
|
||||
year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
|
||||
ariaYear: 'p-hidden-accessible',
|
||||
timePicker: 'p-timepicker',
|
||||
hourPicker: 'p-hour-picker',
|
||||
incrementButton: 'p-link',
|
||||
decrementButton: 'p-link',
|
||||
separatorContainer: 'p-separator',
|
||||
minutePicker: 'p-minute-picker',
|
||||
incrementButton: 'p-link',
|
||||
decrementButton: 'p-link',
|
||||
secondPicker: 'p-second-picker',
|
||||
ampmPicker: 'p-ampm-picker',
|
||||
buttonbar: 'p-datepicker-buttonbar',
|
||||
todayButton: 'p-button-text',
|
||||
clearButton: 'p-button-text'
|
||||
};
|
||||
|
||||
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_calendar_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseCalendar',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
modelValue: null,
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
dateFormat: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showOtherMonths: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
selectOtherMonths: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
previousIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
nextIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
incrementIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
decrementIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
numberOfMonths: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
responsiveOptions: Array,
|
||||
view: {
|
||||
type: String,
|
||||
default: 'date'
|
||||
},
|
||||
touchUI: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
monthNavigator: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
yearNavigator: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
yearRange: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
minDate: {
|
||||
type: Date,
|
||||
value: null
|
||||
},
|
||||
maxDate: {
|
||||
type: Date,
|
||||
value: null
|
||||
},
|
||||
disabledDates: {
|
||||
type: Array,
|
||||
value: null
|
||||
},
|
||||
disabledDays: {
|
||||
type: Array,
|
||||
value: null
|
||||
},
|
||||
maxDateCount: {
|
||||
type: Number,
|
||||
value: null
|
||||
},
|
||||
showOnFocus: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoZIndex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
showButtonBar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
shortYearCutoff: {
|
||||
type: String,
|
||||
default: '+10'
|
||||
},
|
||||
showTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
timeOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hourFormat: {
|
||||
type: String,
|
||||
default: '24'
|
||||
},
|
||||
stepHour: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
stepMinute: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
stepSecond: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showSeconds: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hideOnDateTimeSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hideOnRangeSelection: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
timeSeparator: {
|
||||
type: String,
|
||||
default: ':'
|
||||
},
|
||||
showWeek: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
manualInput: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
appendTo: {
|
||||
type: String,
|
||||
default: 'body'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
inputStyle: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
inputProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
panelClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
panelStyle: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
panelProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
style: {
|
||||
inlineStyles,
|
||||
classes
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue