From 60aa4aca39c0b034fc70b5d1b22d53184c553750 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Thu, 4 May 2023 17:50:30 +0300 Subject: [PATCH] Refactor #3922 - For Calendar --- api-generator/components/calendar.js | 6 + components/lib/calendar/Calendar.d.ts | 269 ++++++++++++++++++++++++++ components/lib/calendar/Calendar.vue | 132 +++++++------ components/lib/config/PrimeVue.d.ts | 2 + 4 files changed, 351 insertions(+), 58 deletions(-) diff --git a/api-generator/components/calendar.js b/api-generator/components/calendar.js index 7e9d3b28e..79614b5df 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 00f5d2855..6a5f8edae 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 fd2b6ce87..19a5b8648 100755 --- a/components/lib/calendar/Calendar.vue +++ b/components/lib/calendar/Calendar.vue @@ -1,5 +1,5 @@