Select & Multi Select implementations for Vue

by Vue.js Examples

vue-accessible-selects

Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices.

View Demo View Github

Current Development

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.

Current Usage (updated 9/14/20)

// In component

import { SelectSingle, SelectMulti, SelectOption } from '@politico/vue-accessible-selects'

const sampleOptions: SelectOption[] = [{
	label: 'One Option',
	value: 'one_option'
}, {
	label: 'Another Option',
	value: 'another_option'
}]

export default Vue.extend({
	components: { SelectSingle, SelectMulti },
	data() {
		return {
			sampleOptions,
			selectSingleValue: {} as SelectOption,
			selectMultiValues: [] as SelectOption[]
		}
	},
	methods: {
		handleSelectEvent(selectedValue: SelectOption) {
			// selectedValue will be the most recently selected value
			// *generally not necessary*, if state can be handled w/ v-model alone
		},
		handleRemoveEvent(selectedValue: SelectOption) {
			// selectedValue will be the most recently removed value
			// *generally not necessary*, if state can be handled w/ v-model alone
		},
		handleSearchChangeEvent(inputValue: string) {
			// inputValue will be the current user-provided search string
			// primarily useful for making autocomplete calls
		}
	}
})


<SelectSingle
	v-model="selectSingleValue"
	:options="sampleOptions"
	label="My Single Select"
	:labelisVisible="true"
	@select="handleSelectEvent"
/>

<SelectMulti
	v-model="selectMultiValues"
	:options="sampleOptions"
	label="My Multiple Select"
	:labelIsVisible="true"
	placeholder="Default Text to Display"
	@select="handleSelectEvent"
	@remove="handleRemoveEvent"
	@searchChange="handleSearchChangeEvent"
/>

// For now, we provide SCSS mixins to customize w/ colors
// Soon, we'll add documentation for the primary classes to target, as well as a default .css file to include
// So in a .scss file used by your project...

// Using Webpack syntax: `~` indicates "look in the current working directory"
@import '~@politico/vue-accessible-selects/dist/mixins.scss';

@include select(
	$primary-background-color: white,
	$focus-background-color: green,
)
@include select-multi(
	$selected-option-pill-color: blue,
	$selected-option-pill-background-color: lightblue
)

GitHub