Extend base pill logic, reformat file

 *

 * 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).

 * An item can have the following optional properties:

 *

 * - `label`: used in the DOM (otherwise, the item itself is used)

 * - `class`: added to the CSS classes of the item

 * - `title`: appears on hover

 * - `id`

 */

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 || ""),

        return m(

            "ul.pill",

            vnode.attrs.items.map(it =>

                m(

                    "li",

                    {

                        onclick: () => {

                            this.active = it.id || it

                        },

                        class:

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

                            " " +

                            (it.class || ""),

                        title: it.title,

            }, it.label || it)

        ))

                    },

                    it.label || it,

                ),

            ),

        )

    },

}