Skip to content

Interactive dialogΒ #2

@ThatOneCalculator

Description

@ThatOneCalculator

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions