Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

custom placeholder style #31

Merged
merged 4 commits into from Mar 31, 2023
Merged

custom placeholder style #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cc21111
add WithInputPlaceholder
koki-develop Mar 31, 2023
1b562f5
add input placeholder style flags
koki-develop Mar 31, 2023
53ddcde
update docs
koki-develop Mar 31, 2023
5a47c85
update docs
koki-develop Mar 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 31 additions & 3 deletions cmd/gofzf/main.go
View file
Open in desktop
Expand Up @@ -29,10 +29,10 @@ var (
flagCaseSensitive bool

flagPrompt string
flagInputPlaceholder string
flagCursor string
flagSelectedPrefix string
flagUnselectedPrefix string
flagInputPlaceholder string

flagCountView bool

Expand All @@ -45,6 +45,15 @@ var (
flagPromptUnderline bool
flagPromptFaint bool

flagInputPlaceholderFg string
flagInputPlaceholderBg string
flagInputPlaceholderBold bool
flagInputPlaceholderBlink bool
flagInputPlaceholderItalic bool
flagInputPlaceholderStrikethrough bool
flagInputPlaceholderUnderline bool
flagInputPlaceholderFaint bool

flagCursorFg string
flagCursorBg string
flagCursorBold bool
Expand Down Expand Up @@ -106,10 +115,10 @@ var rootCmd = &cobra.Command{
fzf.WithHotReload(mu.RLocker()),

fzf.WithPrompt(flagPrompt),
fzf.WithInputPlaceholder(flagInputPlaceholder),
fzf.WithCursor(flagCursor),
fzf.WithSelectedPrefix(flagSelectedPrefix),
fzf.WithUnselectedPrefix(flagUnselectedPrefix),
fzf.WithInputPlaceholder(flagInputPlaceholder),

fzf.WithCountViewEnabled(flagCountView),

Expand All @@ -124,6 +133,16 @@ var rootCmd = &cobra.Command{
Underline: flagPromptUnderline,
Faint: flagPromptFaint,
}),
fzf.WithStyleInputPlaceholder(fzf.Style{
ForegroundColor: flagInputPlaceholderFg,
BackgroundColor: flagInputPlaceholderBg,
Bold: flagInputPlaceholderBold,
Blink: flagInputPlaceholderBlink,
Italic: flagInputPlaceholderItalic,
Strikethrough: flagInputPlaceholderStrikethrough,
Underline: flagInputPlaceholderUnderline,
Faint: flagInputPlaceholderFaint,
}),
fzf.WithStyleCursor(fzf.Style{
ForegroundColor: flagCursorFg,
BackgroundColor: flagCursorBg,
Expand Down Expand Up @@ -297,10 +316,10 @@ func init() {
rootCmd.Flags().BoolVar(&flagCaseSensitive, "case-sensitive", false, "case sensitive search")

rootCmd.Flags().StringVar(&flagPrompt, "prompt", "> ", "")
rootCmd.Flags().StringVar(&flagInputPlaceholder, "input-placeholder", "Filter...", "")
rootCmd.Flags().StringVar(&flagCursor, "cursor", "> ", "")
rootCmd.Flags().StringVar(&flagSelectedPrefix, "selected-prefix", "● ", "")
rootCmd.Flags().StringVar(&flagUnselectedPrefix, "unselected-prefix", "◯ ", "")
rootCmd.Flags().StringVar(&flagInputPlaceholder, "input-placeholder", "Filter...", "")

rootCmd.Flags().BoolVar(&flagCountView, "count-view", true, "")

Expand All @@ -313,6 +332,15 @@ func init() {
rootCmd.Flags().BoolVar(&flagPromptUnderline, "prompt-underline", false, "")
rootCmd.Flags().BoolVar(&flagPromptFaint, "prompt-faint", false, "")

rootCmd.Flags().StringVar(&flagInputPlaceholderFg, "input-placeholder-fg", "", "")
rootCmd.Flags().StringVar(&flagInputPlaceholderBg, "input-placeholder-bg", "", "")
rootCmd.Flags().BoolVar(&flagInputPlaceholderBold, "input-placeholder-bold", false, "")
rootCmd.Flags().BoolVar(&flagInputPlaceholderBlink, "input-placeholder-blink", false, "")
rootCmd.Flags().BoolVar(&flagInputPlaceholderItalic, "input-placeholder-italic", false, "")
rootCmd.Flags().BoolVar(&flagInputPlaceholderStrikethrough, "input-placeholder-strike", false, "")
rootCmd.Flags().BoolVar(&flagInputPlaceholderUnderline, "input-placeholder-underline", false, "")
rootCmd.Flags().BoolVar(&flagInputPlaceholderFaint, "input-placeholder-faint", true, "")

rootCmd.Flags().StringVar(&flagCursorFg, "cursor-fg", mainColor, "")
rootCmd.Flags().StringVar(&flagCursorBg, "cursor-bg", "", "")
rootCmd.Flags().BoolVar(&flagCursorBold, "cursor-bold", false, "")
Expand Down
36 changes: 26 additions & 10 deletions docs/cli/README.ja.md
View file
Open in desktop
Expand Up @@ -54,17 +54,39 @@ $ go install github.com/koki-develop/go-fzf/cmd/gofzf@latest
`gofzf` CLI はフラグを使用して様々な見た目のカスタマイズができます。

- [プロンプト](#プロンプト)
- [インプットのプレースホルダ](#インプットのプレースホルダ)
- [カーソル](#カーソル)
- [カーソル行](#カーソル行)
- [選択中 / 未選択アイテムの接頭辞](#選択中--未選択アイテムの接頭辞)
- [インプットのプレースホルダ](#インプットのプレースホルダ)
- [一致文字](#一致文字)

#### プロンプト

| フラグ | デフォルト | 説明 |
| ---------- | ---------- | -------------------- |
| `--prompt` | `"> "` | プロンプトの文字列。 |
| フラグ | デフォルト | 説明 |
| -------------------- | ---------- | -------------------------------- |
| `--prompt` | `"> "` | プロンプトの文字列。 |
| `--prompt-fg` | N/A | プロンプトの文字色。 |
| `--prompt-bg` | N/A | プロンプトの背景色。 |
| `--prompt-bold` | `false` | プロンプトを太字にする。 |
| `--prompt-blink` | `false` | プロンプトを点滅させる。 |
| `--prompt-italic` | `false` | プロンプトをイタリック体にする。 |
| `--prompt-strike` | `false` | プロンプトに取り消し線を引く。 |
| `--prompt-underline` | `false` | プロンプトに下線を引く。 |
| `--prompt-faint` | `false` | プロンプトを薄く表示する。 |

#### インプットのプレースホルダ

| フラグ | デフォルト | 説明 |
| ------------------------------- | ------------- | ------------------------------------------------ |
| `--input-placeholder` | `"Filter..."` | インプットのプレースホルダ。 |
| `--input-placeholder-fg` | N/A | インプットのプレースホルダの文字色。 |
| `--input-placeholder-bg` | N/A | インプットのプレースホルダの背景色。 |
| `--input-placeholder-bold` | `false` | インプットのプレースホルダを太字にする。 |
| `--input-placeholder-blink` | `false` | インプットのプレースホルダを点滅させる。 |
| `--input-placeholder-italic` | `false` | インプットのプレースホルダをイタリック体にする。 |
| `--input-placeholder-strike` | `false` | インプットのプレースホルダに取り消し線を引く。 |
| `--input-placeholder-underline` | `false` | インプットのプレースホルダに下線を引く。 |
| `--input-placeholder-faint` | `true` | インプットのプレースホルダを薄く表示する。 |

#### カーソル

Expand Down Expand Up @@ -119,12 +141,6 @@ $ go install github.com/koki-develop/go-fzf/cmd/gofzf@latest
| `--unselected-prefix-underline` | `false` | 未選択アイテムの接頭辞に下線を引く。 |
| `--unselected-prefix-faint` | `true` | 未選択アイテムの接頭辞を薄く表示する。 |

#### インプットのプレースホルダ

| フラグ | デフォルト | 説明 |
| --------------------- | ------------- | ---------------------------- |
| `--input-placeholder` | `"Filter..."` | インプットのプレースホルダ。 |

#### 一致文字

| フラグ | デフォルト | 説明 |
Expand Down
22 changes: 15 additions & 7 deletions docs/cli/README.md
View file
Open in desktop
Expand Up @@ -54,10 +54,10 @@ Setting the `--no-limit` flag allows unlimited item selection.
The `gofzf` CLI allows for various visual customizations using flags.

- [Prompt](#prompt)
- [Placeholder for input](#placeholder-for-input)
- [Cursor](#cursor)
- [Cursor Line](#cursor-line)
- [Prefix of selected/unselected items](#prefix-of-selectedunselected-items)
- [Placeholder for input](#placeholder-for-input)
- [Matched characters](#matched-characters)

#### Prompt
Expand All @@ -74,6 +74,20 @@ The `gofzf` CLI allows for various visual customizations using flags.
| `--prompt-underline` | `false` | Underline prompt. |
| `--prompt-faint` | `false` | Faint prompt. |

#### Placeholder for input

| Flag | Default | Description |
| ------------------------------- | ------------- | ------------------------------------------ |
| `--input-placeholder` | `"Filter..."` | Placeholder for input. |
| `--input-placeholder-fg` | N/A | Foreground color of placeholder for input. |
| `--input-placeholder-bg` | N/A | Background color of placeholder for input. |
| `--input-placeholder-bold` | `false` | Bold placeholder for input. |
| `--input-placeholder-blink` | `false` | Blink placeholder for input. |
| `--input-placeholder-italic` | `false` | Italicize placeholder for input. |
| `--input-placeholder-strike` | `false` | Strkethrough placeholder for input. |
| `--input-placeholder-underline` | `false` | Underline placeholder for input. |
| `--input-placeholder-faint` | `true` | Faint placeholder for input. |

#### Cursor

| Flag | Default | Description |
Expand Down Expand Up @@ -127,12 +141,6 @@ The `gofzf` CLI allows for various visual customizations using flags.
| `--unselected-prefix-underline` | `false` | Underline prefix of unselected items. |
| `--unselected-prefix-faint` | `true` | Faint prefix of unselected items. |

#### Placeholder for input

| Flag | Default | Description |
| --------------------- | ------------- | ---------------------- |
| `--input-placeholder` | `"Filter..."` | Placeholder for input. |

#### Matched characters

| Flag | Default | Description |
Expand Down
13 changes: 7 additions & 6 deletions docs/library/README.ja.md
View file
Open in desktop
Expand Up @@ -244,12 +244,13 @@ if err != nil {
f, err := fzf.New(
fzf.WithNoLimit(true),
fzf.WithStyles(
fzf.WithStylePrompt(fzf.Style{Faint: true}), // プロンプト
fzf.WithStyleCursor(fzf.Style{Bold: true}), // カーソル
fzf.WithStyleCursorLine(fzf.Style{Bold: true}), // カーソル行
fzf.WithStyleMatches(fzf.Style{ForegroundColor: "#ff0000"}), // 一致文字
fzf.WithStyleSelectedPrefix(fzf.Style{ForegroundColor: "#ff0000"}), // 選択中アイテムの接頭辞
fzf.WithStyleUnselectedPrefix(fzf.Style{Faint: true}), // 未選択のアイテムの接頭辞
fzf.WithStylePrompt(fzf.Style{Faint: true}), // プロンプト
fzf.WithStyleInputPlaceholder(fzf.Style{Faint: true, ForegroundColor: "#ff0000"}), // インプットのプレースホルダ
fzf.WithStyleCursor(fzf.Style{Bold: true}), // カーソル
fzf.WithStyleCursorLine(fzf.Style{Bold: true}), // カーソル行
fzf.WithStyleMatches(fzf.Style{ForegroundColor: "#ff0000"}), // 一致文字
fzf.WithStyleSelectedPrefix(fzf.Style{ForegroundColor: "#ff0000"}), // 選択中アイテムの接頭辞
fzf.WithStyleUnselectedPrefix(fzf.Style{Faint: true}), // 未選択のアイテムの接頭辞
),
)
if err != nil {
Expand Down
13 changes: 7 additions & 6 deletions docs/library/README.md
View file
Open in desktop
Expand Up @@ -246,12 +246,13 @@ See [reference](https://pkg.go.dev/github.com/koki-develop/go-fzf#Style) for ava
f, err := fzf.New(
fzf.WithNoLimit(true),
fzf.WithStyles(
fzf.WithStylePrompt(fzf.Style{Faint: true}), // Prompt
fzf.WithStyleCursor(fzf.Style{Bold: true}), // Cursor
fzf.WithStyleCursorLine(fzf.Style{Bold: true}), // Cursor line
fzf.WithStyleMatches(fzf.Style{ForegroundColor: "#ff0000"}), // Matched characters
fzf.WithStyleSelectedPrefix(fzf.Style{ForegroundColor: "#ff0000"}), // Prefix of selected items
fzf.WithStyleUnselectedPrefix(fzf.Style{Faint: true}), // Prefix of unselected items
fzf.WithStylePrompt(fzf.Style{Faint: true}), // Prompt
fzf.WithStyleInputPlaceholder(fzf.Style{Faint: true, ForegroundColor: "#ff0000"}), // Placeholder for input
fzf.WithStyleCursor(fzf.Style{Bold: true}), // Cursor
fzf.WithStyleCursorLine(fzf.Style{Bold: true}), // Cursor line
fzf.WithStyleMatches(fzf.Style{ForegroundColor: "#ff0000"}), // Matched characters
fzf.WithStyleSelectedPrefix(fzf.Style{ForegroundColor: "#ff0000"}), // Prefix of selected items
fzf.WithStyleUnselectedPrefix(fzf.Style{Faint: true}), // Prefix of unselected items
),
)
if err != nil {
Expand Down
13 changes: 7 additions & 6 deletions examples/styles/main.go
View file
Open in desktop
Expand Up @@ -13,12 +13,13 @@ func main() {
f, err := fzf.New(
fzf.WithNoLimit(true),
fzf.WithStyles(
fzf.WithStylePrompt(fzf.Style{Faint: true}), // Prompt
fzf.WithStyleCursor(fzf.Style{Bold: true}), // Cursor
fzf.WithStyleCursorLine(fzf.Style{Bold: true}), // Cursor line
fzf.WithStyleMatches(fzf.Style{ForegroundColor: "#ff0000"}), // Matched characters
fzf.WithStyleSelectedPrefix(fzf.Style{ForegroundColor: "#ff0000"}), // Prefix of selected items
fzf.WithStyleUnselectedPrefix(fzf.Style{Faint: true}), // Prefix of unselected items
fzf.WithStylePrompt(fzf.Style{Faint: true}), // Prompt
fzf.WithStyleInputPlaceholder(fzf.Style{Faint: true, ForegroundColor: "#ff0000"}), // Placeholder for input
fzf.WithStyleCursor(fzf.Style{Bold: true}), // Cursor
fzf.WithStyleCursorLine(fzf.Style{Bold: true}), // Cursor line
fzf.WithStyleMatches(fzf.Style{ForegroundColor: "#ff0000"}), // Matched characters
fzf.WithStyleSelectedPrefix(fzf.Style{ForegroundColor: "#ff0000"}), // Prefix of selected items
fzf.WithStyleUnselectedPrefix(fzf.Style{Faint: true}), // Prefix of unselected items
),
)
if err != nil {
Expand Down
1 change: 1 addition & 0 deletions model.go
View file
Open in desktop
Expand Up @@ -53,6 +53,7 @@ func newModel(opt *option) *model {
input.Prompt = opt.prompt
input.PromptStyle = opt.styles.option.prompt
input.Placeholder = opt.inputPlaceholder
input.PlaceholderStyle = opt.styles.option.inputPlaceholder
input.Focus()

if !opt.multiple() {
Expand Down
9 changes: 9 additions & 0 deletions styles.go
View file
Open in desktop
Expand Up @@ -6,6 +6,7 @@ var (
defaultColor = "#00ADD8"
defaultStylesOption = stylesOption{
prompt: lipgloss.NewStyle(),
inputPlaceholder: lipgloss.NewStyle().Faint(true),
cursor: lipgloss.NewStyle().Foreground(lipgloss.Color(defaultColor)),
cursorLine: lipgloss.NewStyle().Bold(true),
matches: lipgloss.NewStyle().Foreground(lipgloss.Color(defaultColor)),
Expand Down Expand Up @@ -67,6 +68,7 @@ type StylesOption func(o *stylesOption)

type stylesOption struct {
prompt lipgloss.Style
inputPlaceholder lipgloss.Style
cursor lipgloss.Style
cursorLine lipgloss.Style
selectedPrefix lipgloss.Style
Expand All @@ -90,6 +92,13 @@ func WithStylePrompt(s Style) StylesOption {
}
}

// WithInputPlaceholder sets the placeholder for input.
func WithStyleInputPlaceholder(s Style) StylesOption {
return func(o *stylesOption) {
o.inputPlaceholder = s.lipgloss()
}
}

// WithStyleCursor sets the style of cursor.
func WithStyleCursor(s Style) StylesOption {
return func(o *stylesOption) {
Expand Down