Add Timeline (replace Steps) Stepper, Steps, Feed)

[techniq]

Replace Steps component with new Timeline component

Examples

• https://svelte.dev/repl/13447bfb43e04c63a951dbae8dcab30f?version=3.44.2
• https://codepen.io/mackorichardson/pen/qBEyZwd
• https://daisyui.com/components/timeline/
• https://daisyui.com/components/steps/
• https://flowbite.com/docs/components/timeline/
• https://codepen.io/jkantner/pen/KKLXjbK
• https://ant.design/components/steps

[JonathonRP]

i like the idea of having stepper and timeline

[techniq]

New Timeline (replaces old Steps component) and new Steps components now available.

Differences between them

• Steps
  • Consistent width (horizontal) or height (vertical) for each step based on orientation
  • Preceding line is controlled by subsequent step
  • Simple configuration (default slot controls label, content/icon prop content content of point
• Timeline
  • Variable width (horizontal) or height (vertical) for each event based on orientation
  • Half the line before and half the line after event is controlled by event. When an event is marked as completed, the line after the event is styled. This is mostly due to the inability to to style preceding items in the DOM.
  • More complex configuration as each event can have start and/or end label (which can be a simple string or use a named slot). Using compact and snapPoint also enables additional layout refinements.

They both overlap in some use cases and mostly comes down to needs of the design, and some tradeoffs (simpler/easier to work with vs more complexity/flexibility)