Refactor #3924 - For Timeline

api-generator/components/timeline.js

@@ -22,6 +22,12 @@ const TimelineProps = [
         type: 'string',
         default: 'null',
         description: 'Name of the field that uniquely identifies the a record in the data.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -70,6 +70,7 @@ import { TagPassThroughOptions } from '../tag';
 import { TerminalPassThroughOptions } from '../terminal';
 import { TextareaPassThroughOptions } from '../textarea';
 import { TieredMenuPassThroughOptions } from '../tieredmenu';
+import { TimelinePassThroughOptions } from '../timeline';
 import { ToastPassThroughOptions } from '../toast';
 import { ToolbarPassThroughOptions } from '../toolbar';
 import { TreePassThroughOptions } from '../tree';
@@ -166,6 +167,7 @@ interface PrimeVuePTOptions {
     terminal?: TerminalPassThroughOptions;
     textarea?: TextareaPassThroughOptions;
     tieredmenu?: TieredMenuPassThroughOptions;
+    timeline?: TimelinePassThroughOptions;
     toast?: ToastPassThroughOptions;
     toolbar?: ToolbarPassThroughOptions;
     tree?: TreePassThroughOptions;

components/lib/timeline/Timeline.d.ts

@@ -9,6 +9,50 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TimelinePassThroughOptionType = TimelinePassThroughAttributes | null | undefined;
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TimelineProps.pt}
+ */
+export interface TimelinePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the event's DOM element.
+     */
+    event?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the opposite's DOM element.
+     */
+    opposite?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the marker's DOM element.
+     */
+    marker?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the connector's DOM element.
+     */
+    connector?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TimelinePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TimelinePassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Timeline component.
  */
@@ -31,6 +75,11 @@ export interface TimelineProps {
      * Name of the field that uniquely identifies the a record in the data.
      */
     dataKey?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TimelinePassThroughOptions}
+     */
+    pt?: TimelinePassThroughOptions;
 }
 
 /**

components/lib/timeline/Timeline.vue

@@ -1,18 +1,18 @@
 <template>
-    <div :class="containerClass">
-        <div v-for="(item, index) of value" :key="getKey(item, index)" class="p-timeline-event">
-            <div class="p-timeline-event-opposite">
+    <div :class="containerClass" v-bind="ptm('root')">
+        <div v-for="(item, index) of value" :key="getKey(item, index)" class="p-timeline-event" v-bind="ptm('event')">
+            <div class="p-timeline-event-opposite" v-bind="ptm('opposite')">
                 <slot name="opposite" :item="item" :index="index"></slot>
             </div>
-            <div class="p-timeline-event-separator">
+            <div class="p-timeline-event-separator" v-bind="ptm('separator')">
                 <slot name="marker" :item="item" :index="index">
-                    <div class="p-timeline-event-marker"></div>
+                    <div class="p-timeline-event-marker" v-bind="ptm('marker')"></div>
                 </slot>
                 <slot v-if="index !== value.length - 1" name="connector" :item="item" :index="index">
-                    <div class="p-timeline-event-connector"></div>
+                    <div class="p-timeline-event-connector" v-bind="ptm('connector')"></div>
                 </slot>
             </div>
-            <div class="p-timeline-event-content">
+            <div class="p-timeline-event-content" v-bind="ptm('content')">
                 <slot name="content" :item="item" :index="index"></slot>
             </div>
         </div>
@@ -20,10 +20,12 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Timeline',
+    extends: BaseComponent,
     props: {
         value: null,
         align: {