blipgloss icon indicating copy to clipboard operation
blipgloss copied to clipboard

Interactive dialog

Open ThatOneCalculator opened this issue 6 months ago • 0 comments

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")));

ThatOneCalculator avatar Jan 02 '24 21:01 ThatOneCalculator