mirror of
https://github.com/charmbracelet/gum.git
synced 2024-08-17 02:00:46 +03:00
refactor: use embedded style struct for all lipgloss styling
This commit uses the embedded style struct for styling in all components. The most notable example is `gum write` where there are many styles that are used and composed for each component of the command.
This commit is contained in:
parent
569c2cc622
commit
02e925ea57
@ -6,7 +6,6 @@ import (
|
||||
|
||||
"github.com/charmbracelet/bubbles/list"
|
||||
tea "github.com/charmbracelet/bubbletea"
|
||||
"github.com/charmbracelet/lipgloss"
|
||||
"github.com/mattn/go-runewidth"
|
||||
)
|
||||
|
||||
@ -25,9 +24,9 @@ func (o Options) Run() {
|
||||
|
||||
id := itemDelegate{
|
||||
indicator: o.Indicator,
|
||||
indicatorStyle: lipgloss.NewStyle().Foreground(lipgloss.Color(o.IndicatorColor)),
|
||||
itemStyle: lipgloss.NewStyle().Padding(0, runewidth.StringWidth(o.Indicator)).Foreground(lipgloss.Color(o.UnselectedColor)),
|
||||
selectedItemStyle: lipgloss.NewStyle().Foreground(lipgloss.Color(o.SelectedColor)),
|
||||
indicatorStyle: o.IndicatorStyle.ToLipgloss(),
|
||||
selectedItemStyle: o.SelectedStyle.ToLipgloss(),
|
||||
itemStyle: o.ItemStyle.ToLipgloss().MarginLeft(runewidth.StringWidth(o.Indicator)),
|
||||
}
|
||||
|
||||
l := list.New(items, id, defaultWidth, o.Height)
|
||||
|
@ -1,13 +1,15 @@
|
||||
package choose
|
||||
|
||||
import "github.com/charmbracelet/gum/style"
|
||||
|
||||
// Options is the customization options for the choose command.
|
||||
type Options struct {
|
||||
Options []string `arg:"" optional:"" help:"Options to choose from."`
|
||||
|
||||
Height int `help:"Height of the list." default:"10"`
|
||||
HidePagination bool `help:"Hide pagination." default:"false"`
|
||||
Indicator string `help:"Prefix to show on selected item" default:"> "`
|
||||
IndicatorColor string `help:"Indicator foreground color" default:"212"`
|
||||
SelectedColor string `help:"Selected item foreground color" default:"212"`
|
||||
UnselectedColor string `help:"Unselected item foreground color" default:""`
|
||||
Height int `help:"Height of the list" default:"10"`
|
||||
HidePagination bool `help:"Hide pagination" default:"false"`
|
||||
Indicator string `help:"Prefix to show on selected item" default:"> "`
|
||||
IndicatorStyle style.Styles `embed:"" prefix:"indicator." set:"defaultForeground=212" set:"name=indicator"`
|
||||
ItemStyle style.Styles `embed:"" prefix:"item." hidden:"" set:"defaultForeground=255" set:"name=item"`
|
||||
SelectedStyle style.Styles `embed:"" prefix:"selected." set:"defaultForeground=212" set:"name=selected item"`
|
||||
}
|
||||
|
@ -8,9 +8,7 @@ import (
|
||||
"github.com/charmbracelet/bubbles/textinput"
|
||||
tea "github.com/charmbracelet/bubbletea"
|
||||
"github.com/charmbracelet/gum/internal/files"
|
||||
"github.com/charmbracelet/gum/internal/log"
|
||||
"github.com/charmbracelet/gum/internal/stdin"
|
||||
"github.com/charmbracelet/lipgloss"
|
||||
)
|
||||
|
||||
// Run provides a shell script interface for filtering through options, powered
|
||||
@ -20,16 +18,11 @@ func (o Options) Run() {
|
||||
i.Focus()
|
||||
|
||||
i.Prompt = o.Prompt
|
||||
i.PromptStyle = lipgloss.NewStyle().Foreground(lipgloss.Color(o.PromptColor))
|
||||
i.PromptStyle = o.PromptStyle.ToLipgloss()
|
||||
i.Placeholder = o.Placeholder
|
||||
i.Width = o.Width
|
||||
|
||||
input, err := stdin.Read()
|
||||
if err != nil {
|
||||
log.Error("Could not read stdin.")
|
||||
return
|
||||
}
|
||||
|
||||
input, _ := stdin.Read()
|
||||
var choices []string
|
||||
if input != "" {
|
||||
choices = strings.Split(string(input), "\n")
|
||||
@ -38,12 +31,13 @@ func (o Options) Run() {
|
||||
}
|
||||
|
||||
p := tea.NewProgram(model{
|
||||
textinput: i,
|
||||
choices: choices,
|
||||
matches: matchAll(choices),
|
||||
indicator: o.Indicator,
|
||||
highlightStyle: lipgloss.NewStyle().Foreground(lipgloss.Color(o.HighlightColor)),
|
||||
indicatorStyle: lipgloss.NewStyle().Foreground(lipgloss.Color(o.IndicatorColor)),
|
||||
matches: matchAll(choices),
|
||||
textinput: i,
|
||||
indicatorStyle: o.IndicatorStyle.ToLipgloss(),
|
||||
matchStyle: o.MatchStyle.ToLipgloss(),
|
||||
textStyle: o.TextStyle.ToLipgloss(),
|
||||
}, tea.WithOutput(os.Stderr))
|
||||
|
||||
tm, _ := p.StartReturningModel()
|
||||
|
@ -18,7 +18,8 @@ type model struct {
|
||||
indicator string
|
||||
height int
|
||||
quitting bool
|
||||
highlightStyle lipgloss.Style
|
||||
matchStyle lipgloss.Style
|
||||
textStyle lipgloss.Style
|
||||
indicatorStyle lipgloss.Style
|
||||
}
|
||||
|
||||
@ -50,13 +51,13 @@ func (m model) View() string {
|
||||
// Check if the current character index matches the current matched
|
||||
// index. If so, color the character to indicate a match.
|
||||
if mi < len(match.MatchedIndexes) && ci == match.MatchedIndexes[mi] {
|
||||
s.WriteString(m.highlightStyle.Render(string(c)))
|
||||
s.WriteString(m.matchStyle.Render(string(c)))
|
||||
// We have matched this character, so we never have to check it
|
||||
// again. Move on to the next match.
|
||||
mi++
|
||||
} else {
|
||||
// Not a match, simply show the character, unstyled.
|
||||
s.WriteRune(c)
|
||||
s.WriteString(m.textStyle.Render(string(c)))
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,12 +1,15 @@
|
||||
package filter
|
||||
|
||||
import "github.com/charmbracelet/gum/style"
|
||||
|
||||
// Options is the customization options for the filter command.
|
||||
type Options struct {
|
||||
HighlightColor string `help:"Color for highlighted matches" default:"212"`
|
||||
Indicator string `help:"Character for selection" default:"•"`
|
||||
IndicatorColor string `help:"Color for indicator" default:"212"`
|
||||
Placeholder string `help:"Placeholder value" default:"Search..."`
|
||||
Prompt string `help:"Prompt to display" default:"> "`
|
||||
PromptColor string `help:"Color for prompt" default:"240"`
|
||||
Width int `help:"Input width" default:"20"`
|
||||
Indicator string `help:"Character for selection" default:"•"`
|
||||
IndicatorStyle style.Styles `embed:"" prefix:"indicator." set:"defaultForeground=212" set:"name=indicator"`
|
||||
TextStyle style.Styles `embed:"" prefix:"text."`
|
||||
MatchStyle style.Styles `embed:"" prefix:"match." set:"defaultForeground=212" set:"name=matched text"`
|
||||
Placeholder string `help:"Placeholder value" default:"Search..."`
|
||||
Prompt string `help:"Prompt to display" default:"> "`
|
||||
PromptStyle style.Styles `embed:"" prefix:"prompt." set:"defaultForeground=240" set:"name=prompt"`
|
||||
Width int `help:"Input width" default:"20"`
|
||||
}
|
||||
|
@ -6,7 +6,6 @@ import (
|
||||
|
||||
"github.com/charmbracelet/bubbles/textinput"
|
||||
tea "github.com/charmbracelet/bubbletea"
|
||||
"github.com/charmbracelet/lipgloss"
|
||||
)
|
||||
|
||||
// Run provides a shell script interface for the text input bubble.
|
||||
@ -19,8 +18,8 @@ func (o Options) Run() {
|
||||
i.Prompt = o.Prompt
|
||||
i.Placeholder = o.Placeholder
|
||||
i.Width = o.Width
|
||||
i.PromptStyle = lipgloss.NewStyle().Foreground(lipgloss.Color(o.PromptColor))
|
||||
i.CursorStyle = lipgloss.NewStyle().Foreground(lipgloss.Color(o.CursorColor))
|
||||
i.PromptStyle = o.PromptStyle.ToLipgloss()
|
||||
i.CursorStyle = o.CursorStyle.ToLipgloss()
|
||||
|
||||
p := tea.NewProgram(model{i}, tea.WithOutput(os.Stderr))
|
||||
m, _ := p.StartReturningModel()
|
||||
|
@ -1,11 +1,13 @@
|
||||
package input
|
||||
|
||||
import "github.com/charmbracelet/gum/style"
|
||||
|
||||
// Options are the customization options for the input.
|
||||
type Options struct {
|
||||
CursorColor string `help:"Color of prompt" default:"212"`
|
||||
Placeholder string `help:"Placeholder value" default:"Type something..."`
|
||||
Prompt string `help:"Prompt to display" default:"> "`
|
||||
PromptColor string `help:"Color of prompt" default:"7"`
|
||||
Value string `help:"Initial value" default:""`
|
||||
Width int `help:"Input width" default:"20"`
|
||||
Placeholder string `help:"Placeholder value" default:"Type something..."`
|
||||
Prompt string `help:"Prompt to display" default:"> "`
|
||||
PromptStyle style.Styles `embed:"" prefix:"prompt." set:"name=prompt"`
|
||||
CursorStyle style.Styles `embed:"" prefix:"cursor." set:"defaultForeground=212" set:"name=cursor"`
|
||||
Value string `help:"Initial value" default:""`
|
||||
Width int `help:"Input width" default:"20"`
|
||||
}
|
||||
|
9
main.go
9
main.go
@ -16,10 +16,11 @@ func main() {
|
||||
kong.Name("gum"),
|
||||
kong.Description("Tasty Bubble Gum for your shell."),
|
||||
kong.UsageOnError(),
|
||||
kong.ConfigureHelp(kong.HelpOptions{
|
||||
Compact: true,
|
||||
Summary: false,
|
||||
}))
|
||||
kong.Vars{
|
||||
"defaultBackground": "",
|
||||
"defaultForeground": "",
|
||||
},
|
||||
)
|
||||
switch ctx.Command() {
|
||||
case "input":
|
||||
gum.Input.Run()
|
||||
|
@ -3,18 +3,17 @@ package spin
|
||||
import (
|
||||
"github.com/charmbracelet/bubbles/spinner"
|
||||
tea "github.com/charmbracelet/bubbletea"
|
||||
"github.com/charmbracelet/lipgloss"
|
||||
)
|
||||
|
||||
// Run provides a shell script interface for the spinner bubble.
|
||||
// https://github.com/charmbracelet/bubbles/spinner
|
||||
func (o Options) Run() {
|
||||
s := spinner.New()
|
||||
s.Style = lipgloss.NewStyle().Foreground(lipgloss.Color(o.Color))
|
||||
s.Style = o.SpinnerStyle.ToLipgloss()
|
||||
s.Spinner = spinnerMap[o.Spinner]
|
||||
m := model{
|
||||
spinner: s,
|
||||
title: o.Title,
|
||||
title: o.TitleStyle.ToLipgloss().Render(o.Title),
|
||||
command: o.Command,
|
||||
}
|
||||
p := tea.NewProgram(m)
|
||||
|
@ -1,10 +1,13 @@
|
||||
package spin
|
||||
|
||||
import "github.com/charmbracelet/gum/style"
|
||||
|
||||
// Options is the customization options for the spin command.
|
||||
type Options struct {
|
||||
Command []string `arg:"" help:"Command to run"`
|
||||
|
||||
Color string `help:"Spinner color" default:"212"`
|
||||
Spinner string `help:"Spinner type" type:"spinner" enum:"line,dot,minidot,jump,pulse,points,globe,moon,monkey,meter,hamburger" default:"dot"`
|
||||
Title string `help:"Text to display to user while spinning" default:"Loading..."`
|
||||
Spinner string `help:"Spinner type" type:"spinner" enum:"line,dot,minidot,jump,pulse,points,globe,moon,monkey,meter,hamburger" default:"dot"`
|
||||
SpinnerStyle style.Styles `embed:"" prefix:"spinner." set:"defaultForeground=212" set:"name=spinner"`
|
||||
Title string `help:"Text to display to user while spinning" default:"Loading..."`
|
||||
TitleStyle style.Styles `embed:"" prefix:"title." set:"name=title"`
|
||||
}
|
||||
|
@ -3,30 +3,11 @@ package style
|
||||
import (
|
||||
"fmt"
|
||||
"strings"
|
||||
|
||||
"github.com/charmbracelet/gum/internal/decode"
|
||||
"github.com/charmbracelet/lipgloss"
|
||||
)
|
||||
|
||||
// Run provides a shell script interface for the Lip Gloss styling.
|
||||
// https://github.com/charmbracelet/lipgloss
|
||||
func (o Options) Run() {
|
||||
text := strings.Join(o.Text, "\n")
|
||||
|
||||
fmt.Println(lipgloss.NewStyle().
|
||||
Foreground(lipgloss.Color(o.Style.Foreground)).
|
||||
Background(lipgloss.Color(o.Style.Background)).
|
||||
BorderBackground(lipgloss.Color(o.Style.BorderBackground)).
|
||||
BorderForeground(lipgloss.Color(o.Style.BorderForeground)).
|
||||
Align(decode.Align[o.Style.Align]).
|
||||
Bold(o.Style.Bold).
|
||||
Border(border[o.Style.Border]).
|
||||
Margin(parseMargin(o.Style.Margin)).
|
||||
Padding(parsePadding(o.Style.Padding)).
|
||||
Height(o.Style.Height).
|
||||
Width(o.Style.Width).
|
||||
Faint(o.Style.Faint).
|
||||
Italic(o.Style.Italic).
|
||||
Strikethrough(o.Style.Strikethrough).
|
||||
Render(text))
|
||||
fmt.Println(o.Style.ToLipgloss().Render(text))
|
||||
}
|
||||
|
@ -3,23 +3,5 @@ package style
|
||||
// Options is the customization options for the style command.
|
||||
type Options struct {
|
||||
Text []string `arg:"" optional:"" help:"Text to style"`
|
||||
Style Style `embed:""`
|
||||
}
|
||||
|
||||
// Style is a flag set of the options for a lipgloss.Style.
|
||||
type Style struct {
|
||||
Background string `help:"Background color"`
|
||||
Foreground string `help:"Foreground color"`
|
||||
BorderBackground string `help:"Border background color"`
|
||||
BorderForeground string `help:"Border foreground color"`
|
||||
Align string `help:"Text alignment" enum:"left,center,right,bottom,middle,top" default:"left"`
|
||||
Border string `help:"Border style to apply" enum:"none,hidden,normal,rounded,thick,double" default:"none"`
|
||||
Height int `help:"Height of output"`
|
||||
Width int `help:"Width of output"`
|
||||
Margin string `help:"Margin to apply around the text."`
|
||||
Padding string `help:"Padding to apply around the text."`
|
||||
Bold bool `help:"Apply bold formatting"`
|
||||
Faint bool `help:"Apply faint formatting"`
|
||||
Italic bool `help:"Apply italic formatting"`
|
||||
Strikethrough bool `help:"Apply strikethrough formatting"`
|
||||
Style Styles `help:"Style to apply" embed:""`
|
||||
}
|
||||
|
52
style/style.go
Normal file
52
style/style.go
Normal file
@ -0,0 +1,52 @@
|
||||
package style
|
||||
|
||||
import (
|
||||
"github.com/charmbracelet/gum/internal/decode"
|
||||
"github.com/charmbracelet/lipgloss"
|
||||
)
|
||||
|
||||
// Styles is a flag set of possible styles.
|
||||
// It corresponds to the available options in the lipgloss.Style struct.
|
||||
type Styles struct {
|
||||
// Colors
|
||||
Background string `help:"Background color of the ${name=element}" default:"${defaultBackground}" hidden:""`
|
||||
Foreground string `help:"Foreground color of the ${name=element}" default:"${defaultForeground}"`
|
||||
|
||||
// Border
|
||||
Border string `help:"Border style to apply" enum:"none,hidden,normal,rounded,thick,double" default:"none" hidden:""`
|
||||
BorderBackground string `help:"Border background color" hidden:""`
|
||||
BorderForeground string `help:"Border foreground color" hidden:""`
|
||||
|
||||
// Layout
|
||||
Align string `help:"Text alignment" enum:"left,center,right,bottom,middle,top" default:"left" hidden:""`
|
||||
Height int `help:"Height of output" hidden:""`
|
||||
Width int `help:"Width of output" hidden:""`
|
||||
Margin string `help:"Margin to apply around the text." default:"0 0" hidden:""`
|
||||
Padding string `help:"Padding to apply around the text." default:"0 0" hidden:""`
|
||||
|
||||
// Format
|
||||
Bold bool `help:"Apply bold formatting" hidden:""`
|
||||
Faint bool `help:"Apply faint formatting" hidden:""`
|
||||
Italic bool `help:"Apply italic formatting" hidden:""`
|
||||
Strikethrough bool `help:"Apply strikethrough formatting" hidden:""`
|
||||
}
|
||||
|
||||
// ToLipgloss takes a Styles flag set and returns the corresponding
|
||||
// lipgloss.Style.
|
||||
func (s Styles) ToLipgloss() lipgloss.Style {
|
||||
return lipgloss.NewStyle().
|
||||
Background(lipgloss.Color(s.Background)).
|
||||
Foreground(lipgloss.Color(s.Foreground)).
|
||||
BorderBackground(lipgloss.Color(s.BorderBackground)).
|
||||
BorderForeground(lipgloss.Color(s.BorderForeground)).
|
||||
Align(decode.Align[s.Align]).
|
||||
Border(border[s.Border]).
|
||||
Height(s.Height).
|
||||
Width(s.Width).
|
||||
Margin(parseMargin(s.Margin)).
|
||||
Padding(parsePadding(s.Padding)).
|
||||
Bold(s.Bold).
|
||||
Faint(s.Faint).
|
||||
Italic(s.Italic).
|
||||
Strikethrough(s.Strikethrough)
|
||||
}
|
@ -6,7 +6,6 @@ import (
|
||||
|
||||
"github.com/charmbracelet/bubbles/textarea"
|
||||
tea "github.com/charmbracelet/bubbletea"
|
||||
"github.com/charmbracelet/lipgloss"
|
||||
)
|
||||
|
||||
// Run provides a shell script interface for the text area bubble.
|
||||
@ -18,15 +17,20 @@ func (o Options) Run() {
|
||||
a.Prompt = o.Prompt
|
||||
a.Placeholder = o.Placeholder
|
||||
a.ShowLineNumbers = o.ShowLineNumbers
|
||||
if !o.ShowCursorLine {
|
||||
a.FocusedStyle.CursorLine = lipgloss.NewStyle()
|
||||
a.BlurredStyle.CursorLine = lipgloss.NewStyle()
|
||||
|
||||
style := textarea.Style{
|
||||
Base: o.BaseStyle.ToLipgloss(),
|
||||
Placeholder: o.PlaceholderStyle.ToLipgloss(),
|
||||
CursorLine: o.CursorLineStyle.ToLipgloss(),
|
||||
CursorLineNumber: o.CursorLineNumberStyle.ToLipgloss(),
|
||||
EndOfBuffer: o.EndOfBufferStyle.ToLipgloss(),
|
||||
LineNumber: o.LineNumberStyle.ToLipgloss(),
|
||||
Prompt: o.PromptStyle.ToLipgloss(),
|
||||
}
|
||||
|
||||
a.Cursor.Style = lipgloss.NewStyle().Foreground(lipgloss.Color(o.CursorColor))
|
||||
|
||||
a.FocusedStyle.Prompt = lipgloss.NewStyle().Foreground(lipgloss.Color(o.PromptColor))
|
||||
a.BlurredStyle.Prompt = lipgloss.NewStyle().Foreground(lipgloss.Color(o.PromptColor))
|
||||
a.BlurredStyle = style
|
||||
a.FocusedStyle = style
|
||||
a.Cursor.Style = o.CursorStyle.ToLipgloss()
|
||||
|
||||
a.SetWidth(o.Width)
|
||||
a.SetHeight(o.Height)
|
||||
|
@ -1,14 +1,23 @@
|
||||
package write
|
||||
|
||||
import "github.com/charmbracelet/gum/style"
|
||||
|
||||
// Options are the customization options for the textarea.
|
||||
type Options struct {
|
||||
CursorColor string `help:"Cursor color" default:"212"`
|
||||
Width int `help:"Text area width" default:"50"`
|
||||
Height int `help:"Text area height" default:"5"`
|
||||
Placeholder string `help:"Placeholder value" default:"Write something..."`
|
||||
Prompt string `help:"Prompt to display" default:"┃ "`
|
||||
PromptColor string `help:"Prompt color" default:"238"`
|
||||
ShowCursorLine bool `help:"Show cursor line" default:"false"`
|
||||
ShowLineNumbers bool `help:"Show line numbers" default:"false"`
|
||||
Value string `help:"Initial value" default:""`
|
||||
Width int `help:"Text area width" default:"50"`
|
||||
|
||||
BaseStyle style.Styles `embed:"" prefix:"base." set:"name=base"`
|
||||
CursorLineNumberStyle style.Styles `embed:"" prefix:"cursor-line-number." set:"defaultForeground=7" set:"name=cursor line number"`
|
||||
CursorLineStyle style.Styles `embed:"" prefix:"cursor-line." set:"name=cursor line"`
|
||||
CursorStyle style.Styles `embed:"" prefix:"cursor." set:"defaultForeground=212" set:"name=cursor"`
|
||||
EndOfBufferStyle style.Styles `embed:"" prefix:"end-of-buffer." set:"defaultForeground=0" set:"name=end of buffer"`
|
||||
LineNumberStyle style.Styles `embed:"" prefix:"line-number." set:"defaultForeground=7" set:"name=line number"`
|
||||
PlaceholderStyle style.Styles `embed:"" prefix:"placeholder." set:"defaultForeground=240" set:"name=placeholder"`
|
||||
PromptStyle style.Styles `embed:"" prefix:"prompt." set:"defaultForeground=7" set:"name=prompt"`
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user