InputSearch

Basic Usage

Search Input

<script setup>
import { InputSearch } from '@8ctavio/vergil/components'
import { useModel } from '@8ctavio/vergil'
const search = useModel('')
</script>

<template>
    <InputSearch v-model="search" label="Search Input"/>
</template>

Props

All InputText props are available for InputSearch. The btn-before and btn-after props have restrictions depending on the btn-position prop value.

Search Icon

icon-search: string = 'search'

<InputSearch icon-search="rocket_launch"/>

Clear Icon

icon-clear: string = 'search_off'

<InputSearch icon-clear="cancel"/>

Btn Position

btn-position: ('before' | 'after') = 'after'

Position of the built-in search button. The prop for the button in the selected position (btn-before or btn-after) only accepts the following Btn props:

• label
• variant
• mask
• outline
• underline
• fill
• squared
• If btn-position is 'before', iconLeft, otherwise iconRight.

The prop for the other button can be normally passed.

<InputSearch
    btn-position="before"
    :btn-before="{
        label: 'Search',
        iconLeft: 'rocket_launch',
        iconRight: 'star', // ignored
    }"
/>

Events

Search

onSearch: (searchQuery: string) => void

<script setup>
async function handleSearch() {
    await new Promise(r => setTimeout(r,3000))
    toast('warn', 'Not found')
}
</script>

<template>
    <InputSearch @search="handleSearch"/>
</template>

Clear

onClear: () => void

<script setup>
function handleClear() {
    toast('info', 'Search query cleared')
}
</script>

<template>
    <InputSearch @clear="handleClear"/>
</template>

Exposed

Clear

Method to properly clear InputSearch's text field.

<script setup>
import { useExposed } from '@8ctavio/vergil'

const exposed = useExposed()
function handleClear() {
    exposed.clear?.()
}
</script>

<template>
    <InputSearch :exposed/>
    <Btn @click="handleClear" label="Clear"/>
</template>

Elements

element	tag	description
input	<input[type="text"]>	InputSearch's underlying input element.

Anatomy

<div.form-field.input-text.input-search/>

<div.form-field-label-wrapper/>

<label.form-field-label/>

<span.form-field-hint/>

<p.form-field-details.form-field-description/>

<div.input-text-outer/>

<Btn.btn/>

<div.input-text-wrapper/>

<Icon.icon/>

<p/>

<input[type="text"]/>

<label/>

<p/>

<Icon.icon/>

<Btn.btn/>

<p.form-field-details.form-field-help/>

API Reference

Props

prop	type	default
icon-search	string	'search'
icon-clear	string	'search_off'
btn-position	'before' | 'after'	'after'
exposed	object

Configuration options

InputSearch's configuration options allow to overwrite some InputSearch props' default values and may be overwritten under the inputSearch root-level configuration option.

inputSearch.<option>	type	default	global
btnPosition	'before' | 'after'	'after'

Other configuration options are inherited from InputText.