diff --git a/api-generator/components/calendar.js b/api-generator/components/calendar.js index 7e9d3b28ee..79614b5dff 100644 --- a/api-generator/components/calendar.js +++ b/api-generator/components/calendar.js @@ -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.' } ]; diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts index 00f5d28555..6a5f8edae9 100755 --- a/components/lib/calendar/Calendar.d.ts +++ b/components/lib/calendar/Calendar.d.ts @@ -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; } /** diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue index fd2b6ce87a..19a5b86486 100755 --- a/components/lib/calendar/Calendar.vue +++ b/components/lib/calendar/Calendar.vue @@ -1,5 +1,5 @@