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`]
)