Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moreta/vue-search-select
A Vue.js search select component
https://github.com/moreta/vue-search-select
select vue vue-component
Last synced: 12 days ago
JSON representation
A Vue.js search select component
- Host: GitHub
- URL: https://github.com/moreta/vue-search-select
- Owner: moreta
- License: mit
- Created: 2016-05-19T17:09:41.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2023-09-24T09:40:15.000Z (about 1 year ago)
- Last Synced: 2024-05-16T05:09:07.611Z (6 months ago)
- Topics: select, vue, vue-component
- Language: CSS
- Homepage: https://vue-search-select.netlify.com
- Size: 6.17 MB
- Stars: 405
- Watchers: 12
- Forks: 126
- Open Issues: 53
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-search-select
A Vue.js search select component with NO dependencies.
+ CSS borrowed from
## Version 3
+ Support Vue.js 3.x
### export files
There are three file.
+ VueSearchSelect.js
+ VueSearchSelect.umd.js
+ VueSearchSelect.css
### Components
+ ModelSelect (from v2.3.8)
+ value set through v-model
+ value can be string, number, boolean and object
+ If you v-model type is string, onInput set by string. (Not option object)
+ ModelListSelect (from v2.3.8)
+ value set through v-model
+ Can pass custom list and customize display text to Component
+ Wrap ModelSelect component
+ MultiSelect
+ search select for multiple select
+ MultiListSelect
+ ListSelect for MultiSelect
Version2's BasicSelect, ListSelect components are removed.
### Styles
```js
import "vue-search-select/dist/VueSearchSelect.css"
```
Semantic-ui-css compatible html and css classes used.
If you already use semantic-ui(or fomantic-ui) VueSearchSelect.css import is unnecessary.
If you want use vue-search-select without semantic-ui-css, import VueSearchSelect.css.
### Release Notes
# Demo
# Usage
## Install
```bash
npm install --save vue-search-select
yarn add vue-search-select
pnpm add vue-search-select
```
# Props
| Component | Name | Type | Default | Description |
|-----------------|---------------------|----------|----------------------------|-------------------------------------|
| ModelSelect | options | Array | | option list |
| | isError | Boolean | false | error style |
| | isDisabled | Boolean | false | disable component |
| | placeholder | String | '' | |
| | filterPredicate | String | new RegExp(inputText, 'i') | |
| | customAttr | Function | () => '' | Add custom html attribute |
| | name | String | | input form name attribute |
| | id | String | | id attribute |
| | searchchange | Event | | event triggered on search change |
| | blur | Event | | event triggered on input blur |
| ModelListSelect | list | Array | | option list |
| | optionValue | String | | value key |
| | optionText | String | | text key |
| | customText | Function | | custom text function |
| | optionDisabled | String | false | disabled key |
| | isError | Boolean | false | error style |
| | isDisabled | Boolean | false | disable component |
| | placeholder | String | '' | |
| | filterPredicate | String | new RegExp(inputText, 'i') | |
| | name | String | | input form name attribute |
| | id | String | | id attribute |
| | searchchange | Event | | event triggered on search change |
| | blur | Event | | event triggered on input blur |
| MultiSelect | options | Array | | option list |
| | selectedOptions | Array | | default option list |
| | isError | Boolean | false | error style |
| | isDisabled | Boolean | false | disable component |
| | placeholder | String | '' | |
| | filterPredicate | String | new RegExp(inputText, 'i') | |
| | customAttr | Function | () => '' | Add custom html attribute |
| | hideSelectedOptions | Boolean | false | Hide Option list that item selected |
| | name | String | | input form name attribute |
| | id | String | | id attribute |
| | searchchange | Event | | event triggered on search change |
| | blur | Event | | event triggered on input blur |
| | select | Event | | event triggered when item selected |
| MultiListSelect | list | Array | | option list |
| | optionValue | String | | value key |
| | optionText | String | | text key |
| | customText | Function | | custom text function |
| | optionDisabled | String | false | disabled key |
| | selectedItems | Array | | default option(raw object) |
| | isError | String | false | error style |
| | isDisabled | Boolean | false | disable component |
| | placeholder | String | '' | |
| | filterPredicate | String | new RegExp(inputText, 'i') | |
| | name | String | | input form name attribute |
| | id | String | | id attribute |
| | searchchange | Event | | event triggered on search change |
| | blur | Event | | event triggered on input blur |
| | select | Event | | event triggered when item selected |
# Run examples
```bash
pnpm run build
pnpm run dev:docs
```