Refactor #3922 - For Calendar

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.'
     }
 ];
 

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;
 }
 
 /**