1.0.0 • Published 3 years ago
@shapla/vue-select v1.0.0
Shapla Select Field
A simple customized select field.
Table of contents
Installation
npm install --save @shapla/vue-selectUsage
Styles
with Sass:
import '@shapla/vue-select/src/index.scss';with CSS:
import '@shapla/vue-select/dist/style.css';Javascript Instantiation
import ShaplaSelect from '@shapla/vue-select';
export default {
name: 'Hello',
components: {
ShaplaSelect
},
data(){
return {
options:['Sayful Islam', 3, true, {label: 'Bangladesh', value: 'BD'}],
}
},
}<shapla-select
v-model="option"
:options="options"
label="Choose a option"
help-text="Help text goes here"
/>Props
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
options | Array | yes | | |
label | String | yes | | |
modelValue | String | no | | |
labelKey | String | no | label | If options contain object, then which key should show as label |
valueKey | String | no | value | If options contain object, then which key should show as value |
clearable | Boolean | no | true | If set true, clear icon will be shown when there is a value |
autocomplete | String | no | | |
name | String | no | | |
id | String | no | | |
helpText | String | no | | |
validationText | String | no | | |
hasError | Boolean | no | false | If set true, field will show validationText |
hasSuccess | Boolean | no | false | If set true, field will show success status |
disabled | Boolean | no | false | If set true, field will be read only |
required | Boolean | no | false | If set true, field must be filled |
searchable | Boolean | no | false | If set true, a search input will be available to filter |
closeOnSelect | Boolean | no | true | If set true, on selecting value dropdown will be closed |
clearSearchOnSelect | Boolean | no | true | If set true, search value will be cleared on select |
multiple | Boolean | no | false | If set true, multiple value can be selected |
noOptionsText | String | no | Sorry, no matching options. | Text for no options text |
singularSelectedText | String | no | item selected. | Placeholder text for singular selected options text |
pluralSelectedText | String | no | items selected. | Placeholder text for plural selected options text |
Listeners
The select component fires the following events:
update:modelValue: When you choose a value
<!-- template -->
<select-field @update:modelValue="handleChangeEvent"/>
<!-- method -->
methods: {
handleChangeEvent(value){
// Handle input event
}
}1.0.0
3 years ago