beta.114 - Info, Settings, Choice Events 🎛

beta.114 - Info, Settings, Choice Events

Displaying Temporary Info

Until now, await div() worked by waiting for the user to hit enter/escape. This still works fine, but if you want to "timeout" a div to display temporary info without user input, this entire script will run without any user interaction:

Install non-blocking-div

import "@johnlindquist/kit"

let classes = `p-5 text-3xl flex justify-center items-center text-center`

div(`Wait 1 second...`, classes)
await wait(1000)

div(`Just 2 more seconds...`, classes)
await wait(2000)

div(`Almost there...`, classes)
await wait(3000)

Remember Selection

I needed to build a settings "panel", so I wanted to make a list that could toggle.

The solution was to remember the previous choice by id. Any time arg is invoked, it will check to see if a choice has an id that matched the previously submitted choice and focus back on it. This enables you to hit enter repeatedly to toggle a choice on and off.

Install remember-selection

import "@johnlindquist/kit"

let data = [
  {
    id: uuid(),
    name: "On",
  },
  {
    id: uuid(),
    name: "Off",
  },
  {
    id: uuid(),
    name: "On",
  },
]

let argConfig = {
  placeholder: "Toggle items",
  flags: {
    end: {
      shortcut: "cmd+enter",
    },
  },
}

while (true) {
  let item = await arg(argConfig, data)
  data.find(i => i.id === item.id).name =
    item.name === "On" ? "Off" : "On"

  if (flag.end) break
}

await div(JSON.stringify(data), "p-2 text-sm")

You could also use this when making a sequence of selections:

Install remember-sequence

import "@johnlindquist/kit"

let data = [
  {
    id: uuid(),
    name: "One",
  },
  {
    id: uuid(),
    name: "Two",
  },
  {
    id: uuid(),
    name: "Three",
  },
]

let selections = []

let one = await arg(`First selection`, data)
selections.push(one)

let two = await arg(
  {
    placeholder: `Second selection`,
    hint: selections.map(s => s.name).join(", "),
  },
  data
)
selections.push(two)

let three = await arg(
  {
    placeholder: `Third selection`,
    hint: selections.map(s => s.name).join(", "),
  },
  data
)
selections.push(three)

await div(
  selections.map(s => s.name).join(", "),
  "p-2 text-sm"
)

Install no-choices-event

Choice Events

onNoChoices and onChoices allows Kit.app to tell your script when the user has typed something that filtered out every choice. Most commonly, you'll want to provide a setHint (I almost made it a default), but you can add any logic you want.

import "@johnlindquist/kit"

await arg(
  {
    placeholder: `Pick a fruit`,
    onChoices: async () => {
      setHint(``)
    },
    onNoChoices: async input => {
      setHint(`No choices matched ${input}`)
    },
  },
  [`Apple`, `Orange`, `Banana`]
)

Discuss Post