Doz-searchfield NPM

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 = '';
    }
});