Skip to content

Releases: charmbracelet/bubbles

v0.21.0

09 Apr 18:44
8b55efb
Compare
Choose a tag to compare

Viewport improvements

Finally, viewport finally has horizontal scrolling ✨!1
To enable it, use SetHorizontalStep (default in v2 will be 6).

You can also scroll manually with ScrollLeft and ScrollRight, and use
SetXOffset to scroll to a specific position (or 0 to reset):

vp := viewport.New()
vp.SetHorizontalStep(10) // how many columns to scroll on each key press
vp.ScrollRight(30)       // pan 30 columns to the right!
vp.ScrollLeft(10)        // pan 10 columns to the left!
vp.SetXOffset(0)         // back to the left edge

To make the API more consistent, vertical scroll functions were also renamed,
and the old ones were deprecated (and will be removed in v2):

// Scroll n lines up/down:
func (m Model) LineUp(int)     // deprecated
func (m Model) ScrollUp(int)   // new!
func (m Model) LineDown(int)   // deprecated
func (m Model) ScrollDown(int) // new!

// Scroll half page up/down:
func (m Model) HalfViewUp() []string   // deprecated
func (m Model) HalfPageUp() []string   // new!
func (m Model) HalfViewDown() []string // deprecated
func (m Model) HalfPageDown() []string // new!

// Scroll a full page up/down:
func (m Model) ViewUp(int) []string   // deprecated
func (m Model) PageUp(int) []string   // new!
func (m Model) ViewDown(int) []string // deprecated
func (m Model) PageDown(int) []string // new!

Note

In v2, these functions will not return lines []string anymore, as it is no
longer needed due to HighPerformanceRendering being deprecated as well.

Other improvements

The list bubble got a couple of new functions: SetFilterText,
SetFilterState, and GlobalIndex - which you can use to get the index of the
item in the unfiltered, original item list.

On textinput, you can now get the matched suggestions and more with
MatchedSuggestions and CurrentSuggestionIndex.

To put the cherry on top, this release also includes numerous bug fixes.
You can read about each of them in the linked commits/PRs below.

Changelog

New Features

Bug fixes

Dependency updates

Documentation updates

Other work


The Charm logo

Thoughts? Questions? We love hearing from you. Feel free to reach out on Twitter, The Fediverse, or on Discord.

  1. It is disabled by default in v1, but will be enabled in v2.

v2.0.0-beta.1

26 Mar 18:55
v2.0.0-beta.1
6010391
Compare
Choose a tag to compare
v2.0.0-beta.1 Pre-release
Pre-release

Ready for Bubbles v2 Beta?

We're excited to share Bubbles v2.0.0-beta.1 with you! This release builds on the last alpha release and includes a few more API changes and improvements. As usual, the upgrade path is pretty straightforward, but let us know if you have any questions.

Bear in mind you’ll want to use this updates alongside v2.0.0-beta.1 versions of Bubble Tea and Lip Gloss.

# Collect them all
go get github.com/charmbracelet/[email protected]
go get github.com/charmbracelet/[email protected]
go get github.com/charmbracelet/[email protected]

Let’s dive in!

The Init you know and love is back

After spending time with many different forms of Init, we've decided the v1 signature is the right way to go after all. Init is a bit too redundant for our tastes given that initialization is already happening in New. Note that this change is in alignment with current shape of Init in Bubble Tea.

// Before in alpha.2
func (m Model) Init() (Model, tea.Cmd)

// After
func (m Model) Init() tea.Cmd

What’s Changed?

In general, we've made a lot of small changes to Bubbles for consistency and future proofing. There are a lot of changes here, but we've found upgrading pretty easy regardless. If you're having trouble with anything let us know in the discussions.

🥕 List

  • Styles.FilterCursor and Styles.FilterPrompt have been removed and consolidated into the new Styles.Filter

👟 Progress

  • The Model.EmptyColor and Model.FullColor members have been changed from string to image/color.Color
  • Model.Update now returns a Model instead of a tea.Model
  • WithColorProfile has been removed (Bubble Tea now manages this automatically)
  • WithSolidFill now takes an color.Color (from the image package) instead of a string

✏️ Textarea

The big change to textarea is that you now have the option to use a real cursor per Bubble Tea v2.0.0-beta1. The feature is opt-in, so by default if you don't do anything your programs will continue to use the easy-breezy virtual cursor.

To get an idea of how to use a real cursor with textarea see
the v2 textarea example.

  • Model.Cursor is now a function that returns a *tea.Cursor (formerly, it was the virtual cursor model)
  • Model.SetCursor has been renamed to Model.SetCursorColumn
  • CursorStyle has been added to define the cursor style
  • Model.VirtualCursor (a bool) has been added to define whether the textarea should render a virtual cursor; set to false when using a real cursor
  • Styles.Cursor has been added to define the cursor style

📜 Textinput

Most of the changes in textinput are to bring it to parity with textarea,
including support for a real cursor. For an example illustrating the use of
textinput with a real cursor see
the v2 textinput example.

Most styling has been moved into StyleState which contains styling for
focused and blurred states.

  • Model.CompletionStyle has been moved to StylesState.Suggestion
  • Model.PlaceholderStyle has been moved to StylesState.Placeholder
  • Model.PromptStyle has been and moved to StyleState.Prompt
  • Model.TextStyle has been moved to StyleState.Text
  • CursorStyle has been added to define the cursor style
  • Model.VirtualCursor was added; use it to disable the virtual cursor
  • Model.Styles (and Styles) was added to house all styling.
  • StyleState was added to manage styling for focused and blurred states
  • Model.Cursor is now a func() *tea.Cursor for real cursor support (formerly, it was the virtual cursor model)
  • DefaultStyles has been added
  • DefaultDarkStyles has been added
  • DefaultLightStyles has been added

📦 Viewport

The new viewport now supports horizontal scrolling as well as setting a custom gutter column! You can also now scroll horizontally with the left and right arrow keys. Finally, you can now highlight parts of what's being viewed based on regex.

vp := viewport.New()
vp.SetContent("hello world")

// Show line numbers:
vp.LeftGutterFunc = func(info viewport.GutterContext) string {
  if info.Soft {
    return "     │ "
  }
  if info.Index >= info.TotalLines {
    return "   ~ │ "
  }
  return fmt.Sprintf("%4d │ ", info.Index+1)
}

// Highlight things:
vp.SetHighlights(regexp.MustCompile("hello").FindAllStringIndex(vp.GetContent(), -1))
vp.HighlightNext()      // highlight and navigate to next match
vp.HighlightPrevious()  // highlight and navigate to previous match
vp.ClearHighlights()    // clear all highlights

You may now also let viewport do the soft wrapping for you:

vp := viewport.New()
vp.SoftWrap = true
vp.SetContent("hello world from a very long line")

But, if you need more fine control on soft wrapping, you can also use the SetContentLines method. This method allows you to set "virtual lines", which may contain \n in them. These lines are automatically treated as soft wraps, and scrolling also takes then into consideration.

Like details?

Here’s the full changelog since v2.0.0-alpha.2

💝 That’s a wrap!

Feel free to reach out, ask questions, give feedback, and let us know how it's going. We’d love to know what you think.


Part of Charm.

The Charm logo

Charm热爱开源 • Charm loves open source • نحنُ نحب المصادر المفتوحة

v2.0.0-alpha.2

12 Nov 22:09
v2.0.0-alpha.2
0719711
Compare
Choose a tag to compare
v2.0.0-alpha.2 Pre-release
Pre-release

Smells like Bubbles v2 Alpha 2!

Thanks for trying out Bubbles v2.0.0-alpha.2! This release was designed to work with Bubble Tea and Lip Gloss v2 alphas with the same tag, so make sure you catch ’em all:

go get github.com/charmbracelet/bubbletea/[email protected]
go get github.com/charmbracelet/bubbles/[email protected]
go get github.com/charmbracelet/lipgloss/[email protected]

There are a lot of small API changes in this release, around two general ideas:

  • Consistency across Bubbles
  • Manual light/dark background management for Lip Gloss v2 (see below)

We've found upgrading pretty easy, especially with a linter, but let us know how it goes for you. Read on for the breakdown.

Note

When in doubt, check the examples for reference: they've all been updated for v2.

A Note on Light and Dark Styles

Some Bubbles, like help, offer defaults for light and dark background colors. Selecting one or the other now a manual process, and you have two options.

🎩 The Best Way

Ideally, you have Bubble Tea query the background color for you. This means that you'll be properly querying the correct input and outputs with your program, and the query will happen in lockstep with the application.

// Query for the background color.
func (m model) Init() (tea.Model, tea.Cmd) {
	return m, tea.RequestBackgroundColor
}

// Listen for the response and initialize your styles accordigly.
func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.BackgroundColorMsg:
		// Initialize your styles now that you know the background color.
		m.help = help.DefaultStyles(msg.IsDark())
		return m, nil
	}
}

If you're using Wish you must do it this way in to get the background color of the client.

🤠 The Quick Way

The quick way is to use detect the background color via the compat package in Lip Gloss. It's less recommended because it contains blocking I/O that operates independently of Bubble Tea and, when used with Wish it will not return the background color of the client (because it's running locally on the server).

import "github.com/charmbracelet/lipgloss/v2/compat"

var hasDarkBG = compat.HasDarkBackground()

func main() {
    var m model

    h := help.New()
    h.Styles = help.DefaultStyles(hasDarkBG)

    // And so on...
    m.help = h
}

For details on the compat package see the Lip Gloss v2.0.0-alpha.2 release notes.

👀 Also Note

You can also just apply defaults manually.

h.Styles = help.DefaultLightStyles() // light mode!
h.Styles = help.DefaultDarkStyles()  // jk dark mode

What’s Changed: the Laundry List

Filepicker

  • Removed: DefaultStylesWithRenderer(). Lip Gloss is pure now, so just use DefaultStyles().
  • Model.Height has been broken into a getter and setter; use Model.SetHeight(int) and Model.Height() int instead

Help

help now defaults to using colors for dark backgrounds. You can manually change them with DefaultLightStyles() and DefaultDarkStyles():

h := help.New()
h.Styles = help.DefaultDarkStyles()  // dark mode
h.Styles = help.DefaultLightStyles() // light mode

Or, just detect the background color and apply the appropriate set of styles accordingly:

func (m Model) Init() (tea.Model, tea.Cmd) {
	// Ask for the background color.
	return m, tea.RequestBackgroundColor
}

func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.BackgroundColorMsg:
		// We know the background color, so let’s update our styling.
		m.help.Styles = help.DefaultStyles(msg.IsDark())
	}
}

List

  • DefaultStyles() now takes a boolean to determine whether it should be rendered with light or dark styles: DefaultStyles(isDark bool)
  • DefaultItemStyles() now takes a boolean to determine whether it should be rendered with light or dark styles: DefaultItemStyles(isDark bool)

Paginator

  • The global variable DefaultKeyMap is now a function: func DefaultKeyMap() KeyMap

Progress

  • Model.Width has been broken into a getter and setter; use Model.SetWidth(int) and Model.Width() int instead
p := progress.New()

// Before
p.Width = 25
fmt.Printf("%w is a good width", p.Width)

// After
p.SetWidth(25)
fmt.Printf("%w is a good width", p.Width())

Stopwatch

  • NewWithInterval(time.Duration) has been removed. Pass an Option to New() instead: New(WithInterval(time.Duration))

Table

  • Model.Width has been broken into a getter and setter; use Model.SetWidth(int) and Model.Width() int instead
  • Model.Height has been broken into a getter and setter; use Model.SetHeight(int) and Model.Height() int instead

Textarea

  • The global variable DefaultKeyMap is now a function: func DefaultKeyMap() KeyMap
  • Model.FocusedStyle and Model.BlurredStyle have been replaced by Model.Styles.Focused and Model.Styles.Blurred
  • DefaultStyles() (blurred, focused Style) is now DefaultStyles(isDark bool) Styles. See help above for an example on how to work with this.

Textinput

  • The global variable DefaultKeyMap is now a function: func DefaultKeyMap() KeyMap
  • Model.Width has been broken into a getter and setter; use Model.SetWidth(int) and Model.Width() int instead

Timer

  • NewWithInterval(time.Duration) has been removed. Pass an Option to New() instead: New(time.Duration, WithInterval(time.Duration))

Viewport

  • Model.Width and Model.Height have been replaced with getters and setters:
m := v.New()

// Before
vp.Width = 40
vp.Height = 80
fmt.Println("%d is my favorite width", vp.Width)

// After
vp.SetWidth(40)
vp.SetHeight(80)
fmt.Println("%d is my favorite width", vp.Width())
  • New() doesn’t have deafult args anymore: New(width, height int) is now New(...Option). To set an initial width and height do one of the following:
// Use functional arguments:
vp := viewport.New(viewport.WithWidth(40), viewport.WithHeight(80)

// Or just:
vp := viewport.New()
vp.SetWidth(40)
vp.SetHeight(80)

Changelog

New Contributors

Full Changelog: v2.0.0-alpha.1...v2.0.0-alpha.2

💝 That’s a wrap!

Feel free to reach out, ask questions, give feedback, and let us know how it's going. We’d love to know what you think.


Part of Charm.

<img alt="The Charm logo" src="https://stuff....

Read more

v2.0.0-alpha.1

18 Sep 18:57
v2.0.0-alpha.1
f81fd52
Compare
Choose a tag to compare
v2.0.0-alpha.1 Pre-release
Pre-release

Changelog

New Features

Bug fixes

Dependency updates

Other work


The Charm logo

Thoughts? Questions? We love hearing from you. Feel free to reach out on Twitter, The Fediverse, or on Discord.

v0.20.0

06 Sep 16:18
d3bd075
Compare
Choose a tag to compare

Focus. Breathe.

This features support for Bubble Tea's new focus-blur feature as well as a quality-of-life update to paginator. Enjoy!

Focus

You heard that right. Focus-blur window events are now enabled for textinput and textarea which were recently added to Bubble Tea v1.1.0. As long as WithReportFocus is enabled in your Program you'll automatically get nicer inputs.

To enable focus reporting:

p := tea.NewProgram(model{}, tea.WithReportFocus())

Remember to stay focused and hydrated!

Paginator opts

Speaking of functional arguments, paginator also received some some new quality-of-life startup options, courtesy @nervo.

p := paginator.New(
	paginator.WithPerPage(42),
	paginator.WithTotalPages(42),
)

Of course, you can still set the values on the model directly too:

p := paginator.New()
p.PerPage = 42
p.TotalPages = 24

Happy paging!

Changelog

New!

Deps


The Charm logo

Thoughts? Questions? We love hearing from you. Feel free to reach out on Twitter, The Fediverse, or on Discord.

v0.19.0

20 Aug 20:13
Compare
Choose a tag to compare

Bugs? Squashed (along with a few nice lil’ features).

Community-Driven Development?! Yep, the majority of the changes in this release were done by the community. Thank you all for your contributions that made this release possible.

Progress: custom chars

You can now customize the filled and empty characters of the progress bar.

p := progress.New(progress.WithFillCharacters('>', '.'))

progress bar example

Table improvements

Help is on the way

Table now includes a short and full help view so it's easier than ever to tell your users how to interact with the table.

// Render a table with its help.
t := table.New()
view := t.View() + "\n" + t.HelpView()

Accessing columns

You can also now get the table's columns (this already existed for rows).

package table

// Columns returns the current columns.
func (m Model) Columns() []Column

List: page navigation is fixed!

Previously, list.NextPage() and list.PrevPage() didn't work because the methods did not have pointer receivers. We've fixed this…by making them pointer receivers!

⚠️ Note that this is a minor API change and you might need to update your app to pass a pointer receiver to your model rather than a copy. Details in #458.

package progress

// NextPage moves to the next page, if available.
func (m *Model) NextPage()

// PrevPage moves to the previous page, if available.
func (m *Model) PrevPage()

What’s Changed

Changed

  • Textarea: Improve setting width by @mikelorant in #496
  • Textinput: fix out of range panic if no matched suggestions by @rdnt in #473
  • List: Fix no-op list pagination functions by @nekopy in #458
  • Table: Clarify position constant in JoinHorizontal by @aditipatelpro in #577
  • Progress: make full/empty fill characters configurable by @rwinkhart in #409
  • Dependencies: switch to x/ansi for text manipulation by @aymanbagabas in #505

Added

Fixed

  • Table: Render Row Tests by @maaslalani in #487
  • Table: Only render columns with a positive width by @fabio42 in #465
  • Table: Fix inheritence of SelectedStyle in StyleFunc by @gabrielfu in #539
  • Table: Don't include header height in the total table size by @prgres in #434
  • Table: Fix premature viewport scroll by @dzeleniak in #429
  • Textarea: Fix end of buffer character by @mikelorant in #491
  • Textarea: Set textarea default EndOfBufferCharacter to ' ' by @blvrd in #510
  • Textarea: End of Buffer alignment by @maaslalani in #486
  • Textinput: don't block input on validation by @GabrielNagy in #185
  • Viewport: Fix division by zero in scrollpercentage by @zMoooooritz in #494
  • Help: Fix centering by @gabe565 in #516
  • Progress: Stop spring defaults from overriding WithStringOptions by @nervo in #540
  • Cursor: Make SetMode method in cursor library handle invalid mode values correctly by @anirudhaCodes in #477

Test coverage ✅

New Contributors

Full Changelog: v0.18.0...v0.19.0


The Charm logo

Thoughts? Questions? We love hearing from you. Feel free to reach out on Twitter, The Fediverse, or on Discord.

v0.18.0

01 Feb 18:54
364eac9
Compare
Choose a tag to compare

Textarea, but faster

This release features several fixes and big performance improvements for the textarea bubble.

What's Changed

New

Improved

Fixed

  • fix(textarea): correctly trim incoming paste by @muesli in #469
  • fix(textinput): Placeholder No Longer Changes Width + Paste Calculation by @hopefulTex in #451
  • fix(viewport): pad width to contentWidth by @ivanvc in #388

New Contributors

Full Changelog: v0.17.1...v0.18.0


The Charm logo

Thoughts? Questions? We love hearing from you. Feel free to reach out on Twitter, The Fediverse, or on Discord.

v0.17.1

13 Dec 18:41
Compare
Choose a tag to compare

Bumping Bubble Tea

This is just a little update to update to the latest version of Bubble Tea.

What's Changed

Full Changelog: v0.17.0...v0.17.1


The Charm logo

Thoughts? Questions? We love hearing from you. Feel free to reach out on Twitter, The Fediverse, or on Discord.

v0.17.0

13 Dec 16:28
v0.17.0
167e906
Compare
Choose a tag to compare

Text input autocompletions and various improvements

Autocompletion in Text Input

So @toadle wanted textinputs to support autocompletion in a ghost-text kind of a way. Rather than wait for us to do it he did what any dedicated open source developer would: he sent a PR! And now we can all benefit from his hard work.

Autocompletion is super easy to use:

ti := textinput.New()
ti.SetSuggestions([]string{"meow", "purr"})

By default you can press ctrl+n and ctrl+p to cycle through suggestions, but those keybindings can be changed as you, the application developer, see fit. For details check out textinput.SetSuggestions and the corresponding KeyMap in the docs.

Is the progress bar done yet?

@yrashk acutely noticed that to nicely transition from one state to another after an animated progress bar fills up it's helpful to know when the animated has finished animating before transitioning. To solve for this he added an IsAnimating method to the progress model. Thanks, @yrashk!

Changelog

New!

  • Support suggestions and autocompletion in textinput by @toadle in #407
  • Add method for determining if progress bar is animating by @yrashk in #386

Improved

Fixed

Full Changelog: v0.16.1...v0.17.0

New Contributors


The Charm logo

Thoughts? Questions? We love hearing from you. Feel free to reach out on Twitter, The Fediverse, or on Discord.

v0.16.1

31 May 18:42
v0.16.1
afd7868
Compare
Choose a tag to compare

File Picker Bubble 📁 🫧

This release introduces a brand new filepicker bubble, new features, and a tonne of bugfixes.
Let us know what you think, ask questions, or just say hello in our Discord.

File picker example

For a quick start on how to use this bubble, take a look at the Example code.

Getting Started

Create a new file picker and add it to your Bubble Tea model.

picker := filepicker.New()
picker.CurrentDirectory, err = os.UserHomeDir()
if err != nil {
    // ...
}

m := model{
    picker: picker,
    // ...
}

Initialize the file picker in your Model's Init function.

func (m model) Init() tea.Cmd {
    return tea.Batch(
        m.picker.Init(),
        // ...
    )
}

Update the filepicker as any other bubble in the Update function.
After the picker.Update, use the DidSelectFile(msg tea.Msg) function to perform an action when the user selects a valid file.
You may allow only certain file types to be selected with the AllowedTypes property and allow directories to be selected with the DirAllowed property. To see the currently selected file/directory use the Path property.

var cmd tea.Cmd
m.picker, cmd = m.picker.Update(msg)

// Did the user select a file?
if didSelect, path := m.picker.DidSelectFile(msg); didSelect {
	// Get the path of the selected file.
	return m, tea.Println("You selected: " + selectedPath)
}

return m, cmd

For the full example on how to use this bubble, take a look at the Example code.

New

Fixed

New Contributors

Full Changelog: v0.15.0...v0.16.0


The Charm logo

Thoughts? Questions? We love hearing from you. Feel free to reach out on Twitter, The Fediverse, or on Discord.