README
doz-searchfield
A search field component for DOZ
Install
npm install doz-searchfield --save
Live here
Usage
Globally
import Doz from 'doz'
import 'doz-searchfield'
new Doz({
root: '#app',
template: `
<doz-searchfield></doz-searchfield>
`
})
Locally
import Doz from 'doz'
import DozSearchfield from 'doz-searchfield/lib'
Doz.component('my-wrapper', {
components: {
'also-a-custom-name': DozSearchfield
},
template() {
return `
<also-a-custom-name></also-a-custom-name>
`
}
});
new Doz({
root: '#app',
template: `
<my-wrapper></my-wrapper>
`
})
Props
Name | Default | Description |
---|---|---|
name | Input name | |
value | value | |
show-button | false | If true show search button |
button-label | Search | Search button label |
placeholder | Search here... | Input placeholder |
button-class | CSS button class | |
input-class | CSS input class | |
input-id | Input ID | |
show-clear-button | true | Show clear button |
typeahead | 0 | Chars number to start to searching, if 0 it's disabled |
force-search | false | Force search event if value is already searched |
Events
Name | Args | Description |
---|---|---|
search | value | Triggered when search |
clear | Triggered when clear value |
Example
Doz.component('app-wrapper', {
props: {
log: ''
},
template() {
return `
<div>
<doz-searchfield
d:on-search="$onSearch"
d:on-clear="$onClear"
></doz-searchfield>
<p><strong>Log:</strong> ${this.props.log}</p>
</div>
`
},
$onSearch(value) {
this.props.log = value;
},
$onClear() {
this.props.log = '';
}
});
Changelog
You can view the changelog here
License
DozSearchfield is open-sourced software licensed under the MIT license