Add basic Pill UI control

/**

 * Pill UI component (has multiple items, <=1 can be active).

 * 

 * Initialize as:

 * 

 * m(Pill, { items: [...] })

 * 

 * - If an item has the property `label`, that is used in the DOM. Otherwise, the item itself is used.

 * - If an item has the property `class`, that string is added to the CSS classes of the item.

 * - If an item has the property `title`, that string is used as the title (appears on hover).

 */

export const Pill = {

    view(vnode) {

        return m("ul.pill", vnode.attrs.items.map(it => 

            m("li", { 

                onclick: () => this.active = it, 

                class: (this.active === it ? "active" : "") + " " + (it.class || ""),

                title: it.title,

            }, it.label || it)

        ))

    },

}