Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michaelbrauner/choosy
A lightweight choice-picker written in typescript.
https://github.com/michaelbrauner/choosy
choice-picker choices javascript typescript
Last synced: 24 days ago
JSON representation
A lightweight choice-picker written in typescript.
- Host: GitHub
- URL: https://github.com/michaelbrauner/choosy
- Owner: MichaelBrauner
- Created: 2021-04-13T19:02:19.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-27T05:59:29.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T13:55:58.557Z (2 months ago)
- Topics: choice-picker, choices, javascript, typescript
- Language: TypeScript
- Homepage:
- Size: 1.26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Choosy
A lightweight vanilla-js choice-picker written in typescript.
- [Setup](#setup)
- [Options](#options)
- [enabled](#enabled)
- [limit](#limit)
- [Contributing](#contributing)
- [Testing](#testing)
# Setup
```
npm i @michael-brauner/choosy
yarn add @michael-brauner/choosy
```
```javascript
import Choosy from "@michael-brauner/choosy";
new Choosy(document.getElementById("cars"));
```
```html
Volvo
Saab
Mercedes
Audi
```
> Be aware that Choosy automatically restricts the input limit to `1` as soon as the `multiple` attribute is not set
> onto the `select` element.
# Options
Your choosy widget can be configured with some options.
Just pass your options object as second argument into the `Choosy` constructor.
After the widget got initialized the full `Choosy` object got stored inside a `__x` variable.
This way you can access all public methods even after initialisation.
## enabled
Enable or disable your Choosy.
This causes that no input is possible anymore, the widget is locked at the current state and can't be focused anymore.
A greyed-out effect visualizes this behavior and the cursor shows `not-allowed`.
```javascript
new Choosy(document.getElementById("cars_disabled"), {
enabled: false
});
```
It is possible to enable / disable the whole widget after initialisation:
```javascript
// enable the widget
getElementById("cars_disabled").__x.enable()
// disable the widget again
getElementById("cars_disabled").__x.disable()
```
## limit
Limits the items you can select with your `Choosy` widget.
```javascript
new Choosy(document.getElementById("cars_limited_2"), {
limit: 2
})
```
# Contributing
Since Choosy is an open-source project you are very welcome to contribute by sending a PR.
## Compiling
To apply the latest changes and compile it to a ready-to-go package into the `dist` folder you can use the following commands:
```shell
postcss ./src/style/choosy.css -o ./dist/choosy.min.css
rollup -c
```
## Testing
Choosy uses [Cypress](https://www.cypress.io/) for testing.
So you are able to start the testsuite with this command:
```shell
yarn tests
```
If you want to use the cypress client to debug your tests in a real browser, you have to start the `http-server` first
then you can open the cypress-suite:
```shell
yarn http-server -c-1 &
yarn cypress open
```
Actually you can use the `test` script for testing:
```shell
sh test
```
Don't forget to stop the server after you are done:
```shell
CTRL + c # to stop the cypress suite
fg # to bring the http-server in the foreground
CTRL + c # stop the http-server
```