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

Author

Fabio Ricali