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

Refactor #3922 - For Calendar

pull/3925/head
Tuğçe Küçükoğlu 2023-05-04 17:50:30 +03:00
parent f0dbc3d33c
commit 60aa4aca39
4 changed files with 351 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/calendar.js
View File

@ -316,6 +316,12 @@ const CalendarProps = [
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -8,8 +8,19 @@
*
*/
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { ButtonPassThroughOptionType } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface CalendarPassThroughMethodOptions {
props: CalendarProps;
state: CalendarState;
}
/**
* Custom Calendar responsive options metadata.
*/
@ -69,6 +80,259 @@ export interface CalendarBlurEvent {
value: string;
}
/**
* Custom passthrough(pt) options.
* @see {@link CalendarProps.pt}
*/
export interface CalendarPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
*/
input?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
dropdownButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the panel's DOM element.
*/
panel?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the group container's DOM element.
*/
groupContainer?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the group's DOM element.
*/
group?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
*/
header?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
previousButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the title's DOM element.
*/
title?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the month title's DOM element.
*/
monthTitle?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the year title's DOM element.
*/
yearTitle?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the decade title's DOM element.
*/
decadeTitle?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
nextButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the container's DOM element.
*/
container?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table's DOM element.
*/
table?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table header's DOM element.
*/
tableHeader?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table header row's DOM element.
*/
tableHeaderRow?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table header cell's DOM element.
*/
tableHeaderCell?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the week label's DOM element.
*/
weekLabel?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the week day's DOM element.
*/
weekDay?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table body's DOM element.
*/
tableBody?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table body row's DOM element.
*/
tableBodyRow?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the week number's DOM element.
*/
weekNumber?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the week label container's DOM element.
*/
weekLabelContainer?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the day's DOM element.
*/
day?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the day label's DOM element.
*/
dayLabel?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the aria selected day's DOM element.
*/
ariaSelectedDay?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the month picker's DOM element.
*/
monthPicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the month's DOM element.
*/
month?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the aria month's DOM element.
*/
ariaMonth?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the year picker's DOM element.
*/
yearPicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the year's DOM element.
*/
year?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the aria year's DOM element.
*/
ariaYear?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the time picker's DOM element.
*/
timePicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the hour picker's DOM element.
*/
hourPicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the hour's DOM element.
*/
hour?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the separatorc ontainer's DOM element.
*/
separatorContainer?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the separator's DOM element.
*/
separator?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the minute picker's DOM element.
*/
minutePicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the minute's DOM element.
*/
minute?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the second picker's DOM element.
*/
secondPicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the second's DOM element.
*/
second?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the ampm picker's DOM element.
*/
ampmPicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the ampm's DOM element.
*/
ampm?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the buttonbar's DOM element.
*/
buttonbar?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
todayButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
clearButton?: ButtonPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface CalendarPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in Calendar component.
*/
export interface CalendarState {
/**
* Current month as a number.
*/
currentMonth: number;
/**
* Current year as a number.
*/
currentYear: number;
/**
* Current hour as a number.
*/
currentHour: number;
/**
* Current minute as a number.
*/
currentMinute: number;
/**
* Current second as a number.
*/
currentSecond: number;
/**
* Current pm state as a boolean.
* @defaultValue false
*/
pm: boolean;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current overlay visible state as a boolean.
* @defaultValue false
*/
overlayVisible: boolean;
/**
* Current view state as a string.
* @defaultValue 'date'
*/
currentView: string;
}
/**
* Defines valid properties in Calendar component.
*/
@ -336,6 +600,11 @@ export interface CalendarProps {
* Establishes a string value that labels the component.
*/
'aria-label'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {CalendarPassThroughOptions}
*/
pt?: CalendarPassThroughOptions;
}
/**

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

@ -1,5 +1,5 @@
<template>
<span ref="container" :id="id" :class="containerClass">
<span ref="container" :id="id" :class="containerClass" v-bind="ptm('root')">
<input
v-if="!inline"
:ref="inputRef"
@ -25,7 +25,7 @@
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
v-bind="inputProps"
v-bind="{ ...inputProps, ...ptm('input') }"
/>
<CalendarButton
v-if="showIcon"
@ -37,10 +37,11 @@
aria-haspopup="dialog"
:aria-expanded="overlayVisible"
:aria-controls="panelId"
:pt="ptm('dropdownButton')"
>
<template #icon>
<slot name="dropdownicon">
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" />
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButton')['icon']" />
</slot>
</template>
</CalendarButton>
@ -58,12 +59,12 @@
@click="onOverlayClick"
@keydown="onOverlayKeyDown"
@mouseup="onOverlayMouseUp"
v-bind="panelProps"
v-bind="{ ...panelProps, ...ptm('panel') }"
>
<template v-if="!timeOnly">
<div class="p-datepicker-group-container">
<div v-for="(month, groupIndex) of months" :key="month.month + month.year" class="p-datepicker-group">
<div class="p-datepicker-header">
<div class="p-datepicker-group-container" v-bind="ptm('groupContainer')">
<div v-for="(month, groupIndex) of months" :key="month.month + month.year" class="p-datepicker-group" v-bind="ptm('group')">
<div class="p-datepicker-header" v-bind="ptm('header')">
<slot name="header"></slot>
<button
v-show="showOtherMonths ? groupIndex === 0 : false"
@ -74,12 +75,13 @@
@keydown="onContainerButtonKeydown"
:disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
v-bind="ptm('previousButton')"
>
<slot name="previousicon">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="['p-datepicker-prev-icon', previousIcon]" />
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="['p-datepicker-prev-icon', previousIcon]" v-bind="ptm('previousIcon')" />
</slot>
</button>
<div class="p-datepicker-title">
<div class="p-datepicker-title" v-bind="ptm('title')">
<button
v-if="currentView === 'date'"
type="button"
@ -88,6 +90,7 @@
class="p-datepicker-month p-link"
:disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseMonth"
v-bind="ptm('monthTitle')"
>
{{ getMonthName(month.month) }}
</button>
@ -99,10 +102,11 @@
class="p-datepicker-year p-link"
:disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseYear"
v-bind="ptm('yearTitle')"
>
{{ getYear(month) }}
</button>
<span v-if="currentView === 'year'" class="p-datepicker-decade">
<span v-if="currentView === 'year'" class="p-datepicker-decade" v-bind="ptm('decadeTitle')">
<slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
</span>
</div>
@ -115,33 +119,34 @@
@keydown="onContainerButtonKeydown"
:disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
v-bind="ptm('nextButton')"
>
<slot name="nexticon">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="['p-datepicker-next-icon', nextIcon]" />
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="['p-datepicker-next-icon', nextIcon]" v-bind="ptm('nextIcon')" />
</slot>
</button>
</div>
<div v-if="currentView === 'date'" class="p-datepicker-calendar-container">
<table class="p-datepicker-calendar" role="grid">
<thead>
<tr>
<th v-if="showWeek" scope="col" class="p-datepicker-weekheader p-disabled">
<span>{{ weekHeaderLabel }}</span>
<div v-if="currentView === 'date'" class="p-datepicker-calendar-container" v-bind="ptm('container')">
<table class="p-datepicker-calendar" role="grid" v-bind="ptm('table')">
<thead v-bind="ptm('tableHeader')">
<tr v-bind="ptm('tableHeaderRow')">
<th v-if="showWeek" scope="col" class="p-datepicker-weekheader p-disabled" v-bind="ptm('tableHeaderCell')">
<span v-bind="ptm('weekLabel')">{{ weekHeaderLabel }}</span>
</th>
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay">
<span>{{ weekDay }}</span>
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')">
<span v-bind="ptm('weekDay')">{{ weekDay }}</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month">
<td v-if="showWeek" class="p-datepicker-weeknumber">
<span class="p-disabled">
<span v-if="month.weekNumbers[i] < 10" style="visibility: hidden">0</span>
<tbody v-bind="ptm('tableBody')">
<tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
<td v-if="showWeek" class="p-datepicker-weeknumber" v-bind="ptm('weekNumber')">
<span class="p-disabled" v-bind="ptm('weekLabelContainer')">
<span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
{{ month.weekNumbers[i] }}
</span>
</td>
<td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }">
<td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }" v-bind="ptm('day')">
<span
v-ripple
:class="{ 'p-highlight': isSelected(date), 'p-disabled': !date.selectable }"
@ -149,10 +154,11 @@
draggable="false"
@keydown="onDateCellKeydown($event, date, groupIndex)"
:aria-selected="isSelected(date)"
v-bind="ptm('dayLabel')"
>
<slot name="date" :date="date">{{ date.day }}</slot>
</span>
<div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
<div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('ariaSelectedDay')">
{{ date.day }}
</div>
</td>
@ -162,7 +168,7 @@
</div>
</div>
</div>
<div v-if="currentView === 'month'" class="p-monthpicker">
<div v-if="currentView === 'month'" class="p-monthpicker" v-bind="ptm('monthPicker')">
<span
v-for="(m, i) of monthPickerValues"
:key="m"
@ -171,14 +177,15 @@
@keydown="onMonthCellKeydown($event, { month: m, index: i })"
class="p-monthpicker-month"
:class="{ 'p-highlight': isMonthSelected(i), 'p-disabled': !m.selectable }"
v-bind="ptm('month')"
>
{{ m.value }}
<div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
<div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('ariaMonth')">
{{ m.value }}
</div>
</span>
</div>
<div v-if="currentView === 'year'" class="p-yearpicker">
<div v-if="currentView === 'year'" class="p-yearpicker" v-bind="ptm('yearPicker')">
<span
v-for="y of yearPickerValues"
:key="y.value"
@ -187,16 +194,17 @@
@keydown="onYearCellKeydown($event, y)"
class="p-yearpicker-year"
:class="{ 'p-highlight': isYearSelected(y.value), 'p-disabled': !y.selectable }"
v-bind="ptm('year')"
>
{{ y.value }}
<div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite">
<div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('ariaYear')">
{{ y.value }}
</div>
</span>
</div>
</template>
<div v-if="(showTime || timeOnly) && currentView === 'date'" class="p-timepicker">
<div class="p-hour-picker">
<div v-if="(showTime || timeOnly) && currentView === 'date'" class="p-timepicker" v-bind="ptm('timePicker')">
<div class="p-hour-picker" v-bind="ptm('hourPicker')">
<button
v-ripple
class="p-link"
@ -210,12 +218,13 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('incrementButton')"
>
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
</slot>
</button>
<span>{{ formattedCurrentHour }}</span>
<span v-bind="ptm('hour')">{{ formattedCurrentHour }}</span>
<button
v-ripple
class="p-link"
@ -229,16 +238,17 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('decrementButton')"
>
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
</slot>
</button>
</div>
<div class="p-separator">
<span>{{ timeSeparator }}</span>
<div class="p-separator" v-bind="ptm('separatorContainer')">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span>
</div>
<div class="p-minute-picker">
<div class="p-minute-picker" v-bind="ptm('minutePicker')">
<button
v-ripple
class="p-link"
@ -253,12 +263,13 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('incrementButton')"
>
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
</slot>
</button>
<span>{{ formattedCurrentMinute }}</span>
<span v-bind="ptm('minute')">{{ formattedCurrentMinute }}</span>
<button
v-ripple
class="p-link"
@ -273,16 +284,17 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('decrementButton')"
>
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
</slot>
</button>
</div>
<div v-if="showSeconds" class="p-separator">
<span>{{ timeSeparator }}</span>
<div v-if="showSeconds" class="p-separator" v-bind="ptm('separatorContainer')">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span>
</div>
<div v-if="showSeconds" class="p-second-picker">
<div v-if="showSeconds" class="p-second-picker" v-bind="ptm('secondPicker')">
<button
v-ripple
class="p-link"
@ -297,12 +309,13 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('incrementButton')"
>
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
</slot>
</button>
<span>{{ formattedCurrentSecond }}</span>
<span v-bind="ptm('second')">{{ formattedCurrentSecond }}</span>
<button
v-ripple
class="p-link"
@ -317,32 +330,33 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('decrementButton')"
>
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
</slot>
</button>
</div>
<div v-if="hourFormat == '12'" class="p-separator">
<span>{{ timeSeparator }}</span>
<div v-if="hourFormat == '12'" class="p-separator" v-bind="ptm('separatorContainer')">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span>
</div>
<div v-if="hourFormat == '12'" class="p-ampm-picker">
<button v-ripple class="p-link" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled">
<div v-if="hourFormat == '12'" class="p-ampm-picker" v-bind="ptm('ampmPicker')">
<button v-ripple class="p-link" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('incrementButton')">
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
</slot>
</button>
<span>{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<button v-ripple class="p-link" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled">
<span v-bind="ptm('ampm')">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<button v-ripple class="p-link" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('decrementButton')">
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
</slot>
</button>
</div>
</div>
<div v-if="showButtonBar" class="p-datepicker-buttonbar">
<CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown" />
<CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown" />
<div v-if="showButtonBar" class="p-datepicker-buttonbar" v-bind="ptm('buttonbar')">
<CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown" :pt="ptm('todayButton')" />
<CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown" :pt="ptm('clearButton')" />
</div>
<slot name="footer"></slot>
</div>
@ -352,6 +366,7 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import Button from 'primevue/button';
import CalendarIcon from 'primevue/icons/calendar';
import ChevronDownIcon from 'primevue/icons/chevrondown';
@ -365,6 +380,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
export default {
name: 'Calendar',
extends: BaseComponent,
emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
props: {
modelValue: null,

2
components/lib/config/PrimeVue.d.ts vendored
View File

@ -6,6 +6,7 @@ import { BadgePassThroughOptions } from '../badge';
import { BlockUIPassThroughOptions } from '../blockui';
import { BreadcrumbPassThroughOptions } from '../breadcrumb';
import { ButtonPassThroughOptions } from '../button';
import { CalendarPassThroughOptions } from '../calendar';
import { CardPassThroughOptions } from '../card';
import { CarouselPassThroughOptions } from '../carousel';
import { ChartPassThroughOptions } from '../chart';
@ -72,6 +73,7 @@ interface PrimeVuePTOptions {
blockui?: BlockUIPassThroughOptions;
breadcrumb?: BreadcrumbPassThroughOptions;
button?: ButtonPassThroughOptions;
calendar?: CalendarPassThroughOptions;
card?: CardPassThroughOptions;
carousel?: CarouselPassThroughOptions;
chart?: ChartPassThroughOptions;