huh
huh copied to clipboard
charmbracelet
feat: multicolumn layout forms
over at @terminaldotshop we've got some huh forms used for payment and shipping info and they'd look a lot better in our app if they were spread over a couple of columns. this pr adds form.WithColumns(count) and splits the groups over the defined columns.
This is so awesome @adamdottv! We were thinking about adding different layouts and I think this is great. One thing we might want to do is make the API more "layout" based to allow swapping later on:
For example:
form.WithLayout(huh.LayoutColumns(2))
form.WithLayout(huh.LayoutGrid(2, 2))
form.WithLayout(huh.LayoutAuto) // would automatically layout the groups to fit the screen width
form.WithLayout(huh.LayoutStack) // vertically stack the groups (for tall and narrow terminals)
Obviously don't need to add the other layouts now but want to make sure the API supports future expansion, what do you think?
Also, the column layouts are so great, excited to get that in! Thank you for the awesome addition!
alright @maaslalani, i reworked to use a Layout api and implemented LayoutDefault (one group at a time), LayoutColumns(columns int) and LayoutStack; lmk what you think!
i tried to implement LayoutAuto and LayoutGrid but i'm not smart enough lol; also not a lot of go experience, so that doesn't help
This is so great @adamdottv! I'll try to review this shortly, we can totally merge this without needing LayoutAuto and LayoutGrid, those can come later.
We'll have to think about what happens when someone specifies something like a Form width of 40 and group width of 30 and columns of 2. My general thinking is that the form width overrides everything and both the groups get adjusted to 20 columns.
We'll need to make sure all the columns are evenly divided to fit within that width, and respect the form width, group widths, and field width (I wonder if we can leverage lipgloss tables here. https://github.com/charmbracelet/lipgloss/releases/tag/v0.9.0, we did a lot of work on auto-resizing tables to fit a given height and to evenly distribute the columns)
I have never seen a rounded font in a terminal before, @adamdottv. What typeface is this?
I have never seen a rounded font in a terminal before, @adamdottv. What typeface is this?
it's gt maru mono!
it's gt maru mono!
Fancy! I really never expected to see Grillitype and Open Source together (and yet it makes sense).
fyi, i went ahead and added a LayoutGrid for funsies! tried taking a stab at LayoutAuto but struggled lol
That's so fantastic! Thank you so much, sorry for taking a while to get to this one.