michalsnik/vue-listbox

vue-listbox

This is a rewrite attempt of the Listbox component originally created as an experiment by Adam Wathan. It was inspired by recent rewrite in Ember by Gavin Joyce.

The approach taken here takes advantage of Vue SFC, and doesn't use context feature, by leveraging simple HoC created in computed properties that allow us to rely strictly on props and events, without having to operate on the context itself. This approach is well known in Ember ecosystem, where the yield feature allows passing components with pre-programmed attributes and event handlers.

This approach has several advantages like:

• we have to import only one component, the rest of the components will come from the slot
• we don't need to use context
• we don't need to pass bunch of props to all sub components in place we want to render our component
• sub components rely strictly on props and events, so unit testing is much simpler

The main disadvantage is that whenever props change in the main component, due to reactivity the HoC is recreated.

Note: Use this pattern with caution. While I like this idea a lot, it's more of an experiment than a recommended practice. Using context for such cases is still the recommended approach.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.