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

Overview

vue-accessible-selects

npm version Netlify Status

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 Usage (updated 9/25/20)

npm i @politico/vue-accessible-selects
// In component

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

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

export default {
	components: { SelectSingle, SelectMulti },
	data() {
		return {
			sampleOptions,
			selectSingleValue: {},
			selectMultiValues: []
		}
	},
}

<SelectSingle
	v-model="selectSingleValue"
	:options="sampleOptions"
	label="My Single Select"
	:labelIsVisible="true"
/>

<SelectMulti
	v-model="selectMultiValues"
	:options="sampleOptions"
	label="My Multiple Select"
	:labelIsVisible="true"
	placeholder="Default Text to Display"
/>
// In any .scss file
// Simple, use default styles provided by lib
@import '[email protected]/vue-accessible-selects/styles';

@include selects();
@include select-single();
@include select-multi();

for more detailed implementations, checkout the docs site

Custom Styling

As we determine the most-commonly externally-referenced classes, we'll add them here

  • .combo-input
  • .combo-menu
Comments
  • Adding labelField and valueField props to enable users to pass custom objec…

    Adding labelField and valueField props to enable users to pass custom objec…

    • Adding labelField and valueField props to enable users to pass custom objects. ex: {id: 1 ,text: 'some label'}
    • Updated labelField and valueField props in storybook
    opened by Felixclement 6
  • Adding labelField and valueField props to enable users to pass custom objects

    Adding labelField and valueField props to enable users to pass custom objects

    ex: {id:1,text:'some label'}

    See original PR review here, all of which still applies: #53

    A huge thank you to @felixclement for the excellent work & great patience!

    Fresh branch, after cherry-pick from https://github.com/politico/vue-accessible-selects/pull/53/commits/32481963c7d4013699552037260ec5c182050a48 to avoid tricky indentation merge conflict resolutions

    opened by jackkoppa 3
  • js example as default in readme

    js example as default in readme

    If popularity of this library is desired, I would use javascript (latest release is probably fine) for the initial/first/default example of usage (and correspondingly forego unnecessary complications like export default Vue.extend({})). I would also include all possible implementation approaches (e.g. I just had to look up props for SelectMulti because I was not able to use v-model and luckily saw that values is a prop). If you want to additionally show one in typescript then I would call it out as a ts example.

    Further, I would reduce the indents to 2 spaces in the examples.

    documentation enhancement 
    opened by wickkidd 3
  • TEST - Docs-only change to confirm Netlify checks

    TEST - Docs-only change to confirm Netlify checks

    Hi all 👋

    Checking if the Netlify changes I made (deleting the https://app.netlify.com/sites/vue-accessible-selects-jackkoppa Netlify site) have taken effect yet in terms of the checks run against this repo; coordinating w/ @wickkidd

    opened by jackkoppa 2
  • Set placeholder color explicitly with SCSS

    Set placeholder color explicitly with SCSS

    We should be explicitly setting the color of the placeholder text for SelectSingle and SelectMulti; currently it just relies on the browser default, leading to color contrast issues.

    There's no real way to "enforce" this color contrast behavior for the placeholder text (because it's just SCSS that a user will set elsewhere, we can't validate it using JS - note that this is probably an argument for using CSS variables), but we should still be at least setting it explicitly based on a default value.

    bug enhancement good first issue 
    opened by jackkoppa 2
  • Fix `maintainScrollVisibility` method, to fix 'property of undefined' error

    Fix `maintainScrollVisibility` method, to fix 'property of undefined' error

    Just copying over an error from one of our Sentry instances; looks like we'll just need an existence check:

    TypeError: Cannot read property 'offsetHeight' of undefined
      at maintainScrollVisibility (./node_modules/@politico/vue-accessible-selects/dist/index.js:153:38)
      at call (./node_modules/@politico/vue-accessible-selects/dist/index.js:586:13)
      at invokeWithErrorHandling (./node_modules/vue/dist/vue.runtime.esm.js:1854:57)
      at callHook (./node_modules/vue/dist/vue.runtime.esm.js:4219:7)
      at callUpdatedHooks (./node_modules/vue/dist/vue.runtime.esm.js:4351:7)
    
    bug good first issue 
    opened by jackkoppa 2
  • Can't find repo in npm

    Can't find repo in npm

    I did the following:

    npm i @politico/vue-accessible-components           
    

    And that returned:

    npm ERR! code E404
    npm ERR! 404 Not Found - GET https://registry.npmjs.org/@politico%2fvue-accessible-components - Not found
    npm ERR! 404 
    npm ERR! 404  '@politico/[email protected]' is not in the npm registry.
    npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
    

    I don't know if this matters, but I'm running a docker image that starts with:

    FROM node
    

    Which reports the OS as:

    $ cat /etc/os-release
    PRETTY_NAME="Debian GNU/Linux 9 (stretch)"
    NAME="Debian GNU/Linux"
    VERSION_ID="9"
    VERSION="9 (stretch)"
    VERSION_CODENAME=stretch
    ID=debian
    HOME_URL="https://www.debian.org/"
    SUPPORT_URL="https://www.debian.org/support"
    BUG_REPORT_URL="https://bugs.debian.org/"
    
    opened by paulrosen 2
  • feature (#38): Add optional no results msg

    feature (#38): Add optional no results msg

    When a user is typing into the multiselect, and their string does not return any options (or, when no options at all are passed in), we normally just close the dropdown. After #39, we'll be notifying SR users that no results have been returned. However, we also want consuming projects to be able to set a custom message about no results having been returned, to display visually; we do that here

    opened by jackkoppa 2
  • docs (#35): Improve JSDoc comments for components

    docs (#35): Improve JSDoc comments for components

    In addition to improving comments for props, events, and slots, also move 'custom options' stories to be within the primary stories Reduces complexity in left nav, while grouping all alike-stories together in UI main pain (i.e. all stories related to SelectMulti get to be together)

    Closes #35

    opened by jackkoppa 2
  • docs: Use HTML tags to demo custom slots

    docs: Use HTML tags to demo custom slots

    Rather than [], which at first glance looks a little like a rendering bug, and we just want to demo primarily that you can write whatever you want in there, including HTML

    opened by jackkoppa 2
  • feature (#15): Begin consolidation of multiple styling approaches within Politico into one shared mixin file

    feature (#15): Begin consolidation of multiple styling approaches within Politico into one shared mixin file

    TODO: Further refine which styles should be made single or multi-specific, and determine whether we'd want to move any further styles out of this repo into Politico-specific repos, such that these components can be more generic

    opened by jackkoppa 2
  • Support for Vue 3

    Support for Vue 3

    When attempting to put this in a Vue 3 project, I get the following during npm install:

    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]"2.x" from @politico/[email protected]
    

    I'm not sure if there is more to it than just updating the package.json file - I will experiment with that in a couple days.

    opened by paulrosen 0
  • In SelectMulti (& confirm in SelectSingle), determine currently selected options by *value*, rather than by *reference*

    In SelectMulti (& confirm in SelectSingle), determine currently selected options by *value*, rather than by *reference*

    Currently, SelectMulti uses a simple indexOf to determine if a given option is currently selected.

    It does this by checking "is this item from the options array, present in the current selectedOptions?"

    See here: https://github.com/politico/vue-accessible-selects/blob/v0.12.0/src/SelectMulti.vue#L272

    const optionIndex = this.selectedOptions.indexOf(option)
    

    Or here: https://github.com/politico/vue-accessible-selects/blob/v0.12.0/src/SelectMulti.vue#L356

    'option-selected': selectedOptions.indexOf(option) > -1,
    

    This works fine for most cases: we expect that the options passed into the component will remain the same as when the component was initialized, and as such, it should be safe to compare by reference, as indexOf does, to see "is this specific object reference in the selected array"

    A problem occurs, however, as soon as we start to have more complicated parent components, that might update the list of options passed into SelectMulti - perhaps based on an API call. Now, even though the original values of the options list may still exist, they now have a new reference. And thus, indexOf is no longer an accurate way to find these options & determine if they are in the selectedOptions array

    Solution

    Allow for "find by value", rather than "find by reference". i.e. let's choose a way to reliably compare the items in the options array, with those that have been added to the selectedOptions array. That does not rely on objects in each array having the same reference. Since the reference approach won't be terribly maintainable, and will quickly lead to the types of confusing bugs we've already begun to experience @ Politico.

    In this issue, then, let's first write a failing test: "When I update the options prop to be an array full of new references, selected options are still correctly displayed as long as they match the value of current selectedOptions"

    Then, let's fix the code so the spec passes

    Note: SelectSingle is already doing compare-by-value here, but let's make sure it has the appropriate specs & testing regardless

    bug enhancement tests 
    opened by jackkoppa 0
  • Add specs for testing labelField & uniqueIdField

    Add specs for testing labelField & uniqueIdField

    As of #75 (which was a cherry-pick of #53), we will begin allowing users to set:

    1. a labelField prop, to identify which property on their options should be used for display
    2. a uniqueIdField prop, to identify which property on their options is guaranteed to be unique, and thus can be used for tracking selected options

    We now need to ensure there are functional specs in place for those props

    tests 
    opened by jackkoppa 0
  • Specs: add spec for

    Specs: add spec for "when I press enter, the component behaves as expected"

    Per this comment: https://github.com/politico/vue-accessible-selects/pull/71#discussion_r566815626

    There are a couple things we'll want to test. Right now, SelectMulti.spec.ts only checks for behavior when clicking options. Let's add some initial specs for pressing enter, and lets add them to both SelectMulti.spec.ts and SelectSingle.spec.ts. Things like:

    1. When I press enter on an option, it's selected.
    2. When I press enter on an option, it emits the correct event(s)
    3. (multi) When I press enter on a selected option, it's unselected
    4. (multi) When I press enter not on an option, no event is emitted/nothing happens
    5. (multi) When I press enter while on a selected pill, it's unselected
    good first issue tests 
    opened by jackkoppa 0
Owner
POLITICO
POLITICO Technology
POLITICO
This component gives you a multi/single select with the power of Vuejs components.

This component gives you a multi/single select with the power of Vuejs components. Demo and doc site vue-multi-select https://github.com/IneoO/vue-mul

Valère 95 Apr 20, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 39 Jul 10, 2022
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.4k Nov 30, 2022
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 25, 2022
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
A vue version of bootstrap select

@alfsnd/vue-bootstrap-select A vue version of bootstrap select Demo Install npm install @alfsnd/vue-bootstrap-select --save Usage import VSelect from

Luis Sandoval 47 Apr 6, 2022
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 347 Aug 31, 2022
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 71 Nov 11, 2022
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Vueform 541 Nov 21, 2022
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 26, 2022
A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Searchable-Select-Dropdown A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html t

Rahul Gaba 13 Sep 15, 2022
Super awesome select dropdown vue.js component.

v-super-select An accessible and customizable select/drop down component that features searching, grouping, and virtual scrolling. Try out the demo sa

Will 7 Mar 31, 2022
An vue select components,vselect是基于vue编写的select组件

vselect An vue select components Demo Live Demo Installation: npm install --save-dev vselect-component How to use 1、To include this project you need t

web_harry 5 Jan 17, 2021
A better way to display select boxes when using `v-for` on objects.

vue-dropdowns A better way to handle v-for on objects. No special dependencies, no jquery, no bootstrap, just VueJS and CSS goodness. Demo Demo - http

Mike Rodham 93 Nov 16, 2022
Select with autocomplete, slots, bootstrap and material design themes.

The current version is 3.x, if you are looking for 2.x, you can find it here (also, see breaking changes). Flexible select Demo + Documentation Featur

Илья 239 Nov 18, 2022
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 26 Sep 19, 2022