From 2acf800b43bfbb21fbd5a54cece3044ef1cdf7bc Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 14 May 2021 12:50:55 +0300
Subject: [PATCH] Fixed #931 - Customizing the line of Timeline component

---
 api-generator/components/timeline.js  |  4 ++++
 src/components/timeline/Timeline.d.ts |  1 +
 src/components/timeline/Timeline.vue  |  4 +++-
 src/views/timeline/TimelineDoc.vue    | 32 ++++++++++++++++++++++-----
 4 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/api-generator/components/timeline.js b/api-generator/components/timeline.js
index 843d0f5f5f..3443c78a62 100644
--- a/api-generator/components/timeline.js
+++ b/api-generator/components/timeline.js
@@ -37,6 +37,10 @@ const TimelineSlots = [
     {
         name: "content",
         description: "Custom content"
+    },
+    {
+        name: "connector",
+        description: "Connector element"
     }
 ];
 
diff --git a/src/components/timeline/Timeline.d.ts b/src/components/timeline/Timeline.d.ts
index 8d1a0c9e8a..c76e133c01 100644
--- a/src/components/timeline/Timeline.d.ts
+++ b/src/components/timeline/Timeline.d.ts
@@ -13,6 +13,7 @@ declare class Timeline {
         content: VNode[];
         opposite: VNode[];
         marker: VNode[];
+        connector: VNode[];
     }
 }
 
diff --git a/src/components/timeline/Timeline.vue b/src/components/timeline/Timeline.vue
index 25a1836844..a534daec9e 100644
--- a/src/components/timeline/Timeline.vue
+++ b/src/components/timeline/Timeline.vue
@@ -8,7 +8,9 @@
                 <slot name="marker" :item="item" :index="index">
                     <div class="p-timeline-event-marker"></div>
                 </slot>
-                <div v-if="index !== (value.length - 1)" class="p-timeline-event-connector"></div>
+                <slot name="connector" v-if="index !== (value.length - 1)">
+                    <div class="p-timeline-event-connector"></div>
+                </slot>
             </div>
             <div class="p-timeline-event-content">
                 <slot name="content" :item="item" :index="index"></slot>
diff --git a/src/views/timeline/TimelineDoc.vue b/src/views/timeline/TimelineDoc.vue
index 9b723ba569..62ec0b1676 100644
--- a/src/views/timeline/TimelineDoc.vue
+++ b/src/views/timeline/TimelineDoc.vue
@@ -110,6 +110,21 @@ export default {
 	&lt;/template&gt;
 &lt;/Timeline&gt;
 </template>
+</code></pre>
+
+        <h5>Custom Connectors</h5>
+        <p>Connector is an element that binds two events together, use the <i>connector</i> slot to use your own element instead of the default one. If you just require to customize simple properties like the 
+        color and width, apply the "p-timeline-event-connector" class to your element to use the built-in positioning.</p>
+<pre v-code><code><template v-pre>
+&lt;Timeline :value="events"&gt;
+	&lt;template #content="slotProps"&gt;
+		&#123;&#123;slotProps.item.status&#125;&#125;
+	&lt;/template&gt;
+    &lt;template #connector&gt;
+		&lt;div class="p-timeline-event-connector" style="width:4px; color: blue"&gt;&lt;/div&gt;
+	&lt;/template&gt;
+&lt;/Timeline&gt;
+</template>
 </code></pre>
 
 		<h5>Properties</h5>
@@ -164,18 +179,23 @@ export default {
 				<tbody>
                     <tr>
                         <td>opposite</td>
-                        <td>item: Position of the component<br />
-							index: Index of the item</td>
+                        <td>item: Position of the event<br />
+							index: Index of the event</td>
                     </tr>
                     <tr>
                         <td>marker</td>
-                        <td>item: Custom marker of the component<br />
-							index: Index of the item</td>
+                        <td>item: Custom marker of the event<br />
+							index: Index of the event</td>
                     </tr>
 					<tr>
                         <td>content</td>
-                        <td>item: Content of the component<br />
-							index: Index of the item</td>
+                        <td>item: Content of the event<br />
+							index: Index of the event</td>
+                    </tr>
+                    <tr>
+                        <td>connector</td>
+                        <td>item: Content of the event<br />
+							index: Index of the event</td>
                     </tr>
 				</tbody>
 			</table>