LxInputSearch

Visão geral

O componente LxInputSearch é utilizado para exibir um campo de entrada de texto com funcionalidade de pesquisa, incluindo rótulo, mensagens de erro, texto de ajuda, e validações. Ele também suporta slots para customização do conteúdo do rótulo, mensagem de erro e texto de ajuda.

Clique para visualizar o código

<script setup>
import { ref, useAttrs } from 'vue';
import { LxInputSearch } from '@lde/lxcomponents';
import LxInputSearchResultExample from './LxInputSearchResultExample.vue';

defineOptions({
	inheritAttrs: false
});

const attrs = useAttrs();

const props = defineProps({
	modelValue: {
		type: String,
		default: ''
	}
});

const searchResult = ref('');
const isLoading = ref(false);
const value = ref(props.modelValue);

function setSearchResult(value) {
	// Aqui você irá substituir pela ação que deseja realizar com o resultado da busca
	searchResult.value = `<div class="alert alert-info small text-center mt-2">Buscou por <b>${value}</b> depois de ${
		!attrs['immediate'] && attrs['delay'] ? attrs['delay'] : 0
	}ms.</div>`;
}

function setIsLoading(value) {
	isLoading.value = value;
}
</script>
<template>
	<LxInputSearch v-bind="attrs" v-model="value" @search="setSearchResult" @update:isLoading="setIsLoading" />
	<LxInputSearchResultExample :searchResult="searchResult" :isLoading="isLoading" />
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
id	Identificador único do campo de entrada.	String	Required
modelValue	Valor do campo de entrada. . Nota: Utilizar a implementação padrão com o v-model.	String ou Number	Required
disabled	Indica se o campo está desabilitado.	Boolean	false
delay	Indica se a pesquisa deve ser realizada imediatamente ao digitar (0) ou com um delay proposital, em ms, para não realizar requisições sequenciais sem intervalo.	Number	0
inputSearch	Objeto de configuração para a funcionalidade de pesquisa com os seguintes parâmetros opcionais: active: Boolean, label: String, placeholder: String, size: String (sm | md | lg), disabled: Boolean,	Object	null
noResult	Objeto de configuração para a definir o que irá aparecer abaixo do campo de busca, caso a mesma não retorne resultados, com os seguintes parâmetros opcionais: show: Boolean, text: String, a lógica para setar o show para true ou false deve ser feita na implementação, pois o componente não tem acesso aos possíveis resultados da busca, apenas gerencia quando ela deve ser feita, evitando requisições repetidas	Object	{show: false}

Eventos

Nome	Descrição
update:modelValue	Emitido quando o valor do campo de entrada é atualizado. Nota: Utilizar a implementação padrão com o v-model.
update:isLoading	Emitido para indicar que existe algo em digitação mas ainda não foi emitida a busca
search	Emitido quando o valor é alterado respeitando o intervalo de delay. Envia o próprio modelValue

Slots

Nome	Descrição
no-result-content	Conteúdo personalizado para a área abaixo do campo quando a busca não traz resultado, caso não queira enviar apenas o texto dentro do objeto da prop noResult.

Classes Padrão

O componente LxInputSearch utiliza uma série de classes CSS padrão que podem ser personalizadas. Essas classes permitem que você estilize qualquer parte do campo de entrada usando ::v-deep com a classe desejada.

Nome	Descrição
lx-input-search-no-result	Conteúdo personalizado para a área abaixo do campo quando a busca não traz resultado.

Playground

Desabilitado

Busca imediata

Delay:

Config. Campo busca:Exemplo no console

Config. Quando sem resultado:Exemplo no console