https://github.com/michalsnik/vue-listbox
Experimental rewrite of vue-listbox component from Tailwind
https://github.com/michalsnik/vue-listbox
Last synced: about 2 months ago
JSON representation
Experimental rewrite of vue-listbox component from Tailwind
- Host: GitHub
- URL: https://github.com/michalsnik/vue-listbox
- Owner: michalsnik
- Created: 2020-06-07T19:44:07.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T08:18:39.000Z (over 2 years ago)
- Last Synced: 2025-02-09T02:15:38.703Z (4 months ago)
- Language: Vue
- Size: 3.16 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-listbox
This is a rewrite attempt of the Listbox component originally created as an [experiment by Adam Wathan](https://github.com/tailwindui/vue/blob/c056086a9fedddef5cd671681e2b8f8ea48094e3/src/Listbox.js).
It was inspired by [recent rewrite in Ember by Gavin Joyce](https://gist.github.com/GavinJoyce/5e495a171fd99931095b856e08ae31f0).
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](https://cli.vuejs.org/config/).