timeline element

nicegui/elements/timeline.js

@@ -0,0 +1,31 @@
+export default {
+    template: `
+    <div class="q-px-lg q-py-md">
+      <q-timeline :color="timelinecolor">
+        <q-timeline-entry v-for="item in items" :key="item.id" 
+                            :title="item.title"
+                            :subtitle="item.subtitle"
+                            :icon="item.icon">
+              <div v-if="item.body">
+                {{item.body}}
+              </div>
+            </q-timeline-entry>
+          </q-timeline>
+        </div>`,
+    props: {
+      initialItems: Array,
+      timelinecolor: String,
+    },
+    data() {
+      return {
+        items: []
+      };
+    },
+    
+    mounted() {
+      if (this.initialItems && this.initialItems.length > 0) {
+        this.items = this.initialItems;
+      }
+    },
+    };
+  

nicegui/elements/timeline.py

@@ -0,0 +1,29 @@
+import uuid
+
+from nicegui.element import Element
+
+
+class Timeline(Element, component='timeline.js'):
+
+    def __init__(self, initial_items: list = None, timelinecolor: str = "secondary") -> None:
+        super().__init__()
+        if initial_items:
+            self._props['initialItems'] = initial_items
+            self._props['timelinecolor'] = timelinecolor
+
+    """Timeline
+
+    :param initialItems: Items of the timeline. Should be an Array of dictionarys and contain the id, title, subtitle, icon, body
+    :param timelinecolor: Color of the Icons. Should be an quasar color
+
+    See `here <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#events>`_
+    for a list of events you can subscribe to using the generic event subscription `on()`.
+    """
+
+    def _generate_id(self):
+        """Generate a unique ID for each timeline item."""
+        return str(uuid.uuid4())
+
+# Example Usage:
+# timeline = Timeline()
+# timeline.add_item(heading="Timeline Heading", title="Event Title", subtitle="Date", body="Description")