select

select component with option search

template

<script>
export default {
	data () {
		return {
			selection: '',
			complexOptions: [
				{id: 1, name: 'One', color: 'red'},
				{id: 2, name: 'Two', color: 'blue'},
				{id: 3, name: 'Three', color: 'green'},
				{id: 5, name: 'Five', color: 'orange'},
			],
			activeComplexOption: 2,
		}
	}
}
</script>

<bunt-select name="a-select" label="Select something" v-model="selection" :options="['Delicious Pizza', 'All The Kebab', 'Burrrrrrito!', 'Noodles, Peking Duck', 'McKingC', 'Linsa mit Spätzle und Saita', 'Ice, Ice, Baby', 'Egg and bacon', 'Egg, sausage and bacon', 'Egg and Spam', 'Egg, bacon and Spam', 'Egg, bacon, sausage and Spam', 'Spam, bacon, sausage and Spam', 'Spam, egg, Spam, Spam, bacon and Spam', 'Spam, Spam, Spam, egg and Spam', 'Spam, Spam, Spam, Spam, Spam, Spam, baked beans, Spam, Spam, Spam and Spam', 'Lobster Thermidor aux crevettes with a Mornay sauce, garnished with truffle pâté, brandy and a fried egg on top, and Spam.']" />
<p>{{ selection }}</p>
<bunt-select id="select-complex" name="complex-select" label="complex select" v-model="activeComplexOption" :options="complexOptions" option-label="name">
	<template slot-scope="{ option }">
		<div class="name">{{ option.name }}</div>
		<div class="id" :style="{'background-color': option.color}">{{ option.id }}</div>
	</template>
</bunt-select>

style

#select-none, #select-complex
	select-style()
#select-complex
	ul li
		display: flex
		justify-content: space-between
		.id
			width: 120px
			text-align: right
			padding: 0 8px
			color: $clr-secondary-text-dark

props

prop type required default description
name string true native input name
label string false floating label
placeholder string false native placeholder text
hint string false hint text
hintIsHtml boolean false false pass hint through v-html (potentially unsave)
icon string false mdi icon name to display
value string|number|object false nell value (or use v-model)
options array false [] array of strings or objects of all choices
option-label string false 'label' label attribute of option object
get-option-label function false using option-label function to generate label from option objects
option-value string false 'id' value attribute of option object
get-option-value function false using option-value function to get value from option object
disabled boolean false false disables input
validation object false vuelidate object (see validation)

slots

slot scope description
default { option } render a single option in the dropdown
result-header optional area before the options list inside dropdown
no-options renders when search does not match

events

event args description
input value emitted on every keypress or input (or use v-model)
blur after dropdown closes

functions

TODO

style mixin parameters

parameter type default description
style 'light', 'dark' 'link' button style
size 'dense', 'large', 'compact' 'dense' input size (compact does not reserve space for a hint)