Revisiting issue 15: Slots/labels

[njvb]

Hi @laurens94,

I wanted to revisit this topic: #15 - as the proposed solution was to add information outside the component. It's viable for small information, such as a label, but becomes a challenge to maintain consistency on the row heights, especially if there is a lot of information to match on a row (task, assignee, date, etc.). Could you please reconsider adding a slot (#beforerow - or similar), so any HTML can be added to the same row?

Thanks again for the great library!

BR,
N.

[laurens94]

I see, that's indeed tricky.

I'd love to simply add additional slots for you, however I tested it out a bit and it would require a refactor of the internal logic to get your desired outcome.

Currently the logic to determine positioning of items / mousepos etc is all based on a single element (.timeline). Whenever we add an element to the rows in a way that the row height would be adjusted to that element, items in the row are pushed away and it would break all positioning/zooming logic.

What you might want to try is adding the elements (as labels) or outside of the element (as you probably already did), watch their height with a resizeObserver (very easy to add with VueUse), sync that height to each group's cssVariables and apply it by overwriting the css (I just added the possiblity to set cssVariables prop to groups as well since v2.5.0).

I added the #timestamps-before and #timestamps-after slots in this release as well so you can insert your own content into the timestamps element now.

Adding something like a #beforerow would result in the same structure as the #group-label, so I don't think it makes sense to add it at the moment.

I'll keep this feature request on the roadmap, but probably won't be working on it soon. So let me know if the syncing of heights using cssVariables works!