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

Refactor #5548 - For Calendar

pull/5677/head
tugcekucukoglu 2024-04-09 09:05:44 +03:00
parent 296280c54a
commit c0076f770c
3 changed files with 163 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -232,6 +232,18 @@ export default {
return { severity: 'secondary', text: true, size: 'small' }; return { severity: 'secondary', text: true, size: 'small' };
} }
}, },
navigatorButtonProps: {
type: Object,
default() {
return { severity: 'secondary', text: true };
}
},
timepickerButtonProps: {
type: Object,
default() {
return { severity: 'secondary', text: true };
}
},
ariaLabelledby: { ariaLabelledby: {
type: String, type: String,
default: null default: null

24
components/lib/calendar/Calendar.d.ts vendored
View File

@ -161,8 +161,9 @@ export interface CalendarPassThroughOptions {
header?: CalendarPassThroughOptionType; header?: CalendarPassThroughOptionType;
/** /**
* Used to pass attributes to the previous button's DOM element. * Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/ */
previousButton?: CalendarPassThroughOptionType; previousButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the title's DOM element. * Used to pass attributes to the title's DOM element.
*/ */
@ -180,9 +181,10 @@ export interface CalendarPassThroughOptions {
*/ */
decadeTitle?: CalendarPassThroughOptionType; decadeTitle?: CalendarPassThroughOptionType;
/** /**
* Used to pass attributes to the previous button's DOM element. * Used to pass attributes to the next button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/ */
nextButton?: CalendarPassThroughOptionType; nextButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the container's DOM element. * Used to pass attributes to the container's DOM element.
*/ */
@ -766,15 +768,27 @@ export interface CalendarProps {
/** /**
* Used to pass all properties of the ButtonProps to the today button component. * Used to pass all properties of the ButtonProps to the today button component.
* @type {ButtonProps} * @type {ButtonProps}
* @defaultValue { severity: 'secondary', text: true } * @defaultValue { severity: 'secondary', text: true, size: 'small' }
*/ */
todayButtonProps?: object | undefined; todayButtonProps?: object | undefined;
/** /**
* Used to pass all properties of the ButtonProps to the clear button component. * Used to pass all properties of the ButtonProps to the clear button component.
* @type {ButtonProps} * @type {ButtonProps}
* @defaultValue { severity: 'secondary', text: true } * @defaultValue { severity: 'secondary', text: true, size: 'small' }
*/ */
clearButtonProps?: object | undefined; clearButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the navigator button component.
* @type {ButtonProps}
* @defaultValue { severity: 'secondary', text: true }
*/
navigatorButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the timepicker button component.
* @type {ButtonProps}
* @defaultValue { severity: 'secondary', text: true }
*/
timepickerButtonProps?: object | undefined;
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */

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

@ -73,23 +73,25 @@
<div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="cx('calendar')" v-bind="ptm('calendar')"> <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
v-show="showOtherMonths ? groupIndex === 0 : false" v-show="showOtherMonths ? groupIndex === 0 : false"
:ref="previousButtonRef" :ref="previousButtonRef"
v-ripple
:class="cx('previousButton')" :class="cx('previousButton')"
@click="onPrevButtonClick"
type="button"
@keydown="onContainerButtonKeydown"
:disabled="disabled" :disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth" :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
v-bind="ptm('previousButton')" :unstyled="unstyled"
@click="onPrevButtonClick"
@keydown="onContainerButtonKeydown"
v-bind="navigatorButtonProps"
:pt="ptm('previousButton')"
data-pc-group-section="navigator" data-pc-group-section="navigator"
> >
<slot name="previousicon" :class="cx('previousIcon')"> <template #icon="slotProps">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[cx('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" /> <slot name="previousicon">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('previousButton')['icon']" />
</slot> </slot>
</button> </template>
</Button>
<div :class="cx('title')" v-bind="ptm('title')"> <div :class="cx('title')" v-bind="ptm('title')">
<template v-if="$primevue.config.locale.showMonthAfterYear"> <template v-if="$primevue.config.locale.showMonthAfterYear">
<button <button
@ -151,23 +153,25 @@
<slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot> <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
</span> </span>
</div> </div>
<button <Button
v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false" v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
:ref="nextButtonRef" :ref="nextButtonRef"
v-ripple
:class="cx('nextButton')" :class="cx('nextButton')"
@click="onNextButtonClick"
type="button"
@keydown="onContainerButtonKeydown"
:disabled="disabled" :disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth" :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
v-bind="ptm('nextButton')" :unstyled="unstyled"
@click="onNextButtonClick"
@keydown="onContainerButtonKeydown"
v-bind="navigatorButtonProps"
:pt="ptm('nextButton')"
data-pc-group-section="navigator" data-pc-group-section="navigator"
> >
<slot name="nexticon" :class="cx('nextIcon')"> <template #icon="slotProps">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" /> <slot name="nexticon">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('nextButton')['icon']" />
</slot> </slot>
</button> </template>
</Button>
</div> </div>
<table v-if="currentView === 'date'" :class="cx('grid')" role="grid" v-bind="ptm('grid')"> <table v-if="currentView === 'date'" :class="cx('grid')" role="grid" v-bind="ptm('grid')">
<thead v-bind="ptm('tableHeader')"> <thead v-bind="ptm('tableHeader')">
@ -304,10 +308,10 @@
</template> </template>
<div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')"> <div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')">
<div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer"> <div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer">
<button <Button
v-ripple
:class="cx('incrementButton')" :class="cx('incrementButton')"
:aria-label="$primevue.config.locale.nextHour" :aria-label="$primevue.config.locale.nextHour"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 0, 1)" @mousedown="onTimePickerElementMouseDown($event, 0, 1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
@ -316,19 +320,21 @@
@keydown.space="onTimePickerElementMouseDown($event, 0, 1)" @keydown.space="onTimePickerElementMouseDown($event, 0, 1)"
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" v-bind="timepickerButtonProps"
v-bind="ptm('incrementButton')" :pt="ptm('incrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps">
<slot name="incrementicon"> <slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </template>
</Button>
<span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span> <span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span>
<button <Button
v-ripple
:class="cx('decrementButton')" :class="cx('decrementButton')"
:aria-label="$primevue.config.locale.prevHour" :aria-label="$primevue.config.locale.prevHour"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 0, -1)" @mousedown="onTimePickerElementMouseDown($event, 0, -1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
@ -337,151 +343,181 @@
@keydown.space="onTimePickerElementMouseDown($event, 0, -1)" @keydown.space="onTimePickerElementMouseDown($event, 0, -1)"
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" v-bind="timepickerButtonProps"
v-bind="ptm('decrementButton')" :pt="ptm('decrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps">
<slot name="decrementicon"> <slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </template>
</Button>
</div> </div>
<div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer"> <div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span> <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div> </div>
<div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer"> <div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer">
<button <Button
v-ripple
:class="cx('incrementButton')" :class="cx('incrementButton')"
:aria-label="$primevue.config.locale.nextMinute" :aria-label="$primevue.config.locale.nextMinute"
:disabled="disabled"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 1, 1)" @mousedown="onTimePickerElementMouseDown($event, 1, 1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:disabled="disabled"
@mouseleave="onTimePickerElementMouseLeave()" @mouseleave="onTimePickerElementMouseLeave()"
@keydown.enter="onTimePickerElementMouseDown($event, 1, 1)" @keydown.enter="onTimePickerElementMouseDown($event, 1, 1)"
@keydown.space="onTimePickerElementMouseDown($event, 1, 1)" @keydown.space="onTimePickerElementMouseDown($event, 1, 1)"
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" v-bind="timepickerButtonProps"
v-bind="ptm('incrementButton')" :pt="ptm('incrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps">
<slot name="incrementicon"> <slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </template>
</Button>
<span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span> <span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span>
<button <Button
v-ripple
:class="cx('decrementButton')" :class="cx('decrementButton')"
:aria-label="$primevue.config.locale.prevMinute" :aria-label="$primevue.config.locale.prevMinute"
:disabled="disabled"
@mousedown="onTimePickerElementMouseDown($event, 1, -1)" @mousedown="onTimePickerElementMouseDown($event, 1, -1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:disabled="disabled"
@mouseleave="onTimePickerElementMouseLeave()" @mouseleave="onTimePickerElementMouseLeave()"
@keydown.enter="onTimePickerElementMouseDown($event, 1, -1)" @keydown.enter="onTimePickerElementMouseDown($event, 1, -1)"
@keydown.space="onTimePickerElementMouseDown($event, 1, -1)" @keydown.space="onTimePickerElementMouseDown($event, 1, -1)"
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" v-bind="timepickerButtonProps"
v-bind="ptm('decrementButton')" :pt="ptm('decrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps">
<slot name="decrementicon"> <slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </template>
</Button>
</div> </div>
<div v-if="showSeconds" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer"> <div v-if="showSeconds" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span> <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div> </div>
<div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer"> <div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer">
<button <Button
v-ripple
:class="cx('incrementButton')" :class="cx('incrementButton')"
:aria-label="$primevue.config.locale.nextSecond" :aria-label="$primevue.config.locale.nextSecond"
:disabled="disabled"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 2, 1)" @mousedown="onTimePickerElementMouseDown($event, 2, 1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:disabled="disabled"
@mouseleave="onTimePickerElementMouseLeave()" @mouseleave="onTimePickerElementMouseLeave()"
@keydown.enter="onTimePickerElementMouseDown($event, 2, 1)" @keydown.enter="onTimePickerElementMouseDown($event, 2, 1)"
@keydown.space="onTimePickerElementMouseDown($event, 2, 1)" @keydown.space="onTimePickerElementMouseDown($event, 2, 1)"
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" v-bind="timepickerButtonProps"
v-bind="ptm('incrementButton')" :pt="ptm('incrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps">
<slot name="incrementicon"> <slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </template>
</Button>
<span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span> <span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span>
<button <Button
v-ripple
:class="cx('decrementButton')" :class="cx('decrementButton')"
:aria-label="$primevue.config.locale.prevSecond" :aria-label="$primevue.config.locale.prevSecond"
:disabled="disabled"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 2, -1)" @mousedown="onTimePickerElementMouseDown($event, 2, -1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:disabled="disabled"
@mouseleave="onTimePickerElementMouseLeave()" @mouseleave="onTimePickerElementMouseLeave()"
@keydown.enter="onTimePickerElementMouseDown($event, 2, -1)" @keydown.enter="onTimePickerElementMouseDown($event, 2, -1)"
@keydown.space="onTimePickerElementMouseDown($event, 2, -1)" @keydown.space="onTimePickerElementMouseDown($event, 2, -1)"
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" v-bind="timepickerButtonProps"
v-bind="ptm('decrementButton')" :pt="ptm('decrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps">
<slot name="decrementicon"> <slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </template>
</Button>
</div> </div>
<div v-if="hourFormat == '12'" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer"> <div v-if="hourFormat == '12'" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span> <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div> </div>
<div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')"> <div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
<button <Button
v-ripple
:class="cx('incrementButton')" :class="cx('incrementButton')"
:aria-label="$primevue.config.locale.am" :aria-label="$primevue.config.locale.am"
:disabled="disabled"
:unstyled="unstyled"
@click="toggleAMPM($event)" @click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
type="button" v-bind="timepickerButtonProps"
:disabled="disabled" :pt="ptm('incrementButton')"
v-bind="ptm('incrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps">
<slot name="incrementicon" :class="cx('incrementIcon')"> <slot name="incrementicon" :class="cx('incrementIcon')">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </template>
</Button>
<span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span> <span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<button <Button
v-ripple
:class="cx('decrementButton')" :class="cx('decrementButton')"
:aria-label="$primevue.config.locale.pm" :aria-label="$primevue.config.locale.pm"
:disabled="disabled"
@click="toggleAMPM($event)" @click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
type="button" v-bind="timepickerButtonProps"
:disabled="disabled" :pt="ptm('decrementButton')"
v-bind="ptm('decrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps">
<slot name="decrementicon" :class="cx('decrementIcon')"> <slot name="decrementicon" :class="cx('decrementIcon')">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </template>
</Button>
</div> </div>
</div> </div>
<div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')"> <div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
<Button :label="todayLabel" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" v-bind="todayButtonProps" :pt="ptm('todayButton')" data-pc-group-section="button" /> <Button
<Button :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" v-bind="clearButtonProps" :pt="ptm('clearButton')" data-pc-group-section="button" /> :label="todayLabel"
@click="onTodayButtonClick($event)"
:class="cx('todayButton')"
:unstyled="unstyled"
@keydown="onContainerButtonKeydown"
v-bind="todayButtonProps"
:pt="ptm('todayButton')"
data-pc-group-section="button"
/>
<Button
:label="clearLabel"
@click="onClearButtonClick($event)"
:class="cx('clearButton')"
:unstyled="unstyled"
@keydown="onContainerButtonKeydown"
v-bind="clearButtonProps"
:pt="ptm('clearButton')"
data-pc-group-section="button"
/>
</div> </div>
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
@ -491,6 +527,7 @@
</template> </template>
<script> <script>
import Button from 'primevue/button';
import CalendarIcon from 'primevue/icons/calendar'; import CalendarIcon from 'primevue/icons/calendar';
import ChevronDownIcon from 'primevue/icons/chevrondown'; import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronLeftIcon from 'primevue/icons/chevronleft'; import ChevronLeftIcon from 'primevue/icons/chevronleft';
@ -2677,10 +2714,10 @@ export default {
this.input = el ? el.$el : undefined; this.input = el ? el.$el : undefined;
}, },
previousButtonRef(el) { previousButtonRef(el) {
this.previousButton = el; this.previousButton = el ? el.$el : undefined;
}, },
nextButtonRef(el) { nextButtonRef(el) {
this.nextButton = el; this.nextButton = el ? el.$el : undefined;
}, },
getMonthName(index) { getMonthName(index) {
return this.$primevue.config.locale.monthNames[index]; return this.$primevue.config.locale.monthNames[index];
@ -2997,6 +3034,7 @@ export default {
}, },
components: { components: {
InputText, InputText,
Button,
Portal, Portal,
CalendarIcon, CalendarIcon,
ChevronLeftIcon, ChevronLeftIcon,