charmbracelet / bubbles

TUI components for Bubble Tea 🫧
MIT License
5.24k stars 247 forks source link

feat: introduce vertical scrollbar #536

Open nervo opened 2 months ago

nervo commented 2 months ago

Well, here is a pull request on a component i really found missing in the bubbletea ecosystem: a scrollbar \o/

Only a vertical one, available as a model, is provided:

sb := scrollbar.NewVertical()

It is easily customizable with styles

sb.Style = sb.Style.Border(lipgloss.RoundedBorder(), true) // Beautiful rounded borders around the bar
sb.ThumbStyle = sb.ThumbStyle.SetString("≡") // Change thumb apperance

It can updated by dedicated messages...

m.scrollbar, cmd = m.scrollbar.Update(scrollbar.HeightMsg(12))
m.scrollbar, cmd = m.scrollbar.Update(scrollbar.Msg{
    Total:   test.total,
    Visible: test.visible,
    Offset:  test.offset,
})

...or directly linked to a viewport:

m.scrollbar, cmd = m.scrollbar.Update(viewport.Height)
m.scrollbar, cmd = m.scrollbar.Update(viewport) // Get the total, visible and offset parameters from viewport

If you're interested, feel free to review, comment, etc... ❤️

That being said, there are several points on which I would like advice:

  1. Do i have to make the scrollbar struct a real model (Update method returns a tea.Model) or an hybrid one (Update method returns the struct itself) ?
  2. Is it better to provide some options to the constructor ? something like:
    sb := scrollbar.NewVertical(scrollbar.WithStyle(...), scrollbar.WithThumbStyle(...), ...)
  3. Are you ok with the scrollbar/track/thumb wording ? It's actually inspired by browsers wording (see: https://developer.chrome.com/docs/css-ui/scrollbar-styling)
  4. I really think mouse integration could be a killer feature, but i'm not sure how to (properly) handle it in a portable manner...
  5. I'm experiencing screen blinkings with vhs (see example.gif). Is there something i can do ?

huh, and I almost forgot the demo :)

example

meowgorithm commented 2 months ago

This is so nice. It may take us a moment to get to this one, but it's on our radar. In the meantime do you mind fixing the lint stuff?

nervo commented 1 month ago

@meowgorithm rebased, and lint fixed 👍