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.

CleanShot 2021-11-22 at 12 08 29

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