In the next release I'm going to introduce new sel...

# kvision

[Robert Jaros]

In the next release I'm going to introduce new select and typeahead components, based on Tom Select library (https://tom-select.js.org/). It's lightweight, modern and doesn't depend on Bootstrap or jQuery. It's also just one dependency for both select and typeahead. Fullstack versions will be available as well.
At the same time I'm going to deprecate current Bootstrap Select and Bootstrap Typeahead components, because the JS libraries used by them are not well supported anymore. They will be gone forever with KVision 6.
The API is unfortunately a bit different, but most features should be possible to implement with new components (Tom Select is fully customizable).

[ashmelev]

@Robert Jaros Can these new components be backed by data from the server-side? Or do we need to independently bring the data forward to the JS components?

[Robert Jaros]

Yes, remote data can be used without problems.

[Robert Jaros]

To give you an example from the showcase, this:

Select(label = tr("Select with remote data source")) {
    ajaxOptions = AjaxOptions("<https://api.github.com/search/repositories>", preprocessData = {
        it.items.map { item ->
            obj {
                this.value = item.id
                this.text = item.name
                this.data = obj {
                    this.subtext = item.owner.login
                }
            }
        }
    }, data = obj {
        q = "{{{q}}}"
    })
}

will change to this:

TomSelect(label = tr("Select with remote data source")) {
    tsCallbacks = TomSelectCallbacks(
        load = { query, callback ->
            restClient.callDynamic("<https://api.github.com/search/repositories>") {
                data = obj { q = query }
                resultTransform = { it.items }
            }.then { items: dynamic ->
                @Suppress("UnsafeCastFromDynamic")
                callback(items.map { item ->
                    obj {
                        this.value = item.id
                        this.text = item.name
                        this.subtext = item.owner.login
                    }
                })
            }
        }
    )
    tsRenders = TomSelectRenders(option = { item, escape ->
        """
            <div>
                <span class="title">${escape(item.text)}</span>
                <small>(${escape(item.subtext)})</small>
            </div>
        """.trimIndent()
    })
}

[Robert Jaros]

A little more verbose, but you can render your options any way you want.

[ashmelev]

Thank you. The verbosity does not hinder anything - Kotlin has a multitude of ways to "hide" that in a reusable way.