bombshell-dev / clack

Effortlessly build beautiful command-line apps
https://clack.cc
5.23k stars 88 forks source link

feat: Inactive group headers for `GroupMultiSelectPrompt` #199

Open AdrianGonz97 opened 2 weeks ago

AdrianGonz97 commented 2 weeks ago

Closes #197

By default, group headers are selectable, allowing you to quickly select all of the options within that group. Setting the new option, selectableGroups, to false will disable them, making the group headers inactive.

the following code snippet:

import { groupMultiselect } from "@clack/prompts";

await groupMultiselect({
    message: "Which libraries would you like to setup?",
    selectableGroups: false,
    cursorAt: "Bootstrap",
    options: {
        CSS: [
            { label: "Bootstrap", value: "Bootstrap" },
            { label: "TailwindCSS", value: "TailwindCSS" },
            { label: "UnoCSS", value: "UnoCSS" },
            { label: "Bulma", value: "Bulma" },
        ],
        Testing: [
            { label: "Playwright", value: "Playwright" },
            { label: "Vitest", value: "Vitest" },
        ],
        Database: [
            { label: "Drizzle", value: "Drizzle" },
            { label: "Prisma", value: "Prisma" },
        ],
        Auth: [
            { label: "Lucia", value: "Lucia" },
            { label: "Auth.js", value: "Auth.js" },
        ],
    },
});

will now produce this prompt: img

Vertical spacing can also be adjusted with a spacedGroups option as well: img

Mist3rBru commented 1 day ago

Hey @AdrianGonz97, great work!

I just wanted to point out that the first group shouldn't have an empty line before it. In my opinion, this option should only add empty lines between the groups, not before or after. It looks a bit odd compared to the other prompts.