@politico/vue-accessible-selects v2.0.1-alpha.17
vue-accessible-selects
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.
References
- Current guiding blogpost: https://www.24a11y.com/2019/select-your-poison-part-2/
- Select single implementation: https://github.com/microsoft/sonder-ui/tree/master/src/components/select
- Select multiple implementation: https://github.com/microsoft/sonder-ui/tree/master/src/components/multiselect
Current Usage (updated 9/14/20)
// In component
import { SelectSingle, SelectMultiple, 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, SelectMultiple },
data() {
return {
sampleOptions,
selectSingleValue: {} as SelectOption,
selectMultipleValues: [] 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"
/>
<SelectMultiple
v-model="selectMultipleValues"
: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
)
2 months ago
5 months ago
7 months ago
6 months ago
8 months ago
8 months ago
10 months ago
9 months ago
10 months ago
6 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
1 year ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago