blipgloss
blipgloss copied to clipboard
Interactive dialog
Right now I'm doing this, which prints out the dialog, but doesn't make it interactive. Is there any built-in way to do interactive dialogs?
import blipgloss from "blipgloss";
// Adapted from https://github.com/wobsoriano/blipgloss/blob/main/examples/layout.ts
const docStyle = blipgloss.NewStyle().Padding(1, 2, 1, 2);
const doc: string[] = [];
const width = 72;
const dialogBoxStyle = blipgloss
.NewStyle()
.Border(blipgloss.Border.Rounded)
.BorderForeground("#56949f")
.Padding(1, 0)
.BorderTop(true)
.BorderLeft(true)
.BorderRight(true)
.BorderBottom(true);
const buttonStyle = blipgloss
.NewStyle()
.Foreground("#faf4ed")
.Background("#575279")
.Padding(0, 3)
.MarginTop(1);
const activeButtonStyle = buttonStyle
.Copy()
.Foreground("#faf4ed")
.Background("#b4637a")
.MarginRight(2)
.Underline(true);
const okButton = activeButtonStyle.Render("Yes");
const cancelButton = buttonStyle.Render("No");
const question = blipgloss
.NewStyle()
.Width(50)
.Align(blipgloss.Position.Center)
.Render(`Update ${outdated.map((model) => model.name).join(", ")}?`);
const buttons = blipgloss.JoinHorizontal(
blipgloss.Position.Top,
okButton,
cancelButton
);
const ui = blipgloss.JoinVertical(
blipgloss.Position.Center,
question,
buttons
);
const dialog = blipgloss.Place(
width,
9,
blipgloss.Position.Center,
blipgloss.Position.Center,
dialogBoxStyle.Render(ui),
blipgloss.WithWhitespaceChars("🦙"),
);
doc.push(dialog);
console.log(docStyle.Render(doc.join("\n\n")));