Uso

El componente SFilter permite construir interfaces de filtrado dinámicas. Los usuarios pueden agregar, configurar y aplicar filtros sobre diferentes campos usando varios operadores y tipos de entrada.

Interfaces

Un campo puede tener una o más interfaces. Cada interfaz define una forma diferente en que el usuario puede ingresar un valor de filtro.

oneInput

Para campos que requieren un solo valor. Soporta texto, números, fechas y montos. Cuando se omite type, el input es de texto por defecto.

twoInputs

Para campos que requieren un rango de valores (ej: rangos de fechas, rangos de precios).

options

Para campos con un conjunto predefinido de opciones. Soporta selección simple y múltiple.

Las opciones pueden ser objetos con id y label, o strings simples.

selection

Para campos donde el usuario ingresa sus propios valores como tags. Ideal para palabras clave, categorías dinámicas o cualquier campo donde el usuario necesite definir valores personalizados.

none

Para verificaciones de existencia (no se necesita valor de entrada).

Múltiples Interfaces

Un solo campo puede tener múltiples interfaces, permitiendo al usuario elegir entre diferentes modos de entrada según el operador.

Operadores Personalizados

Puedes definir operadores personalizados como objetos con id, label, y un tag opcional (string o función) que se muestra en el badge.

Filtros Permanentes

Establece permanent: true en un campo para evitar que sea eliminado o limpiado por el usuario.

Ocultar Botones

Usa hideApplyButton y hideClearButton para controlar la visibilidad de los botones de acción.

Validación

Los campos soportan validación personalizada a través de la función validate. Recibe el valor actual y el operador, y debe retornar un string con el mensaje de error (o null si es válido). Soporta validación asíncrona.

<template>
  <SFilter :fields="fields" @apply="onApply" />
</template>

<script setup lang="ts">
import { SFilter, type TField } from '@placetopay/spartan-vue';

const fields: TField[] = [
  {
    id: 'bin',
    name: 'BIN de Tarjeta',
    interfaces: {
      oneInput: {
        operators: ['equal'],
      },
    },
    validate: async (value) => {
      const binRegex = /^\d{6}$/;
      return !binRegex.test(value) ? 'El BIN debe tener exactamente 6 dígitos' : null;
    },
  },
  {
    id: 'amount',
    name: 'Monto',
    interfaces: {
      twoInputs: {
        type: 'amount',
        currency: 'USD',
        operators: ['between'],
      },
    },
    validate: (value, operator) => {
      return operator === 'between' && parseFloat(value[0]) > parseFloat(value[1])
        ? 'El valor mínimo debe ser menor al máximo'
        : null;
    },
  },
];
</script>

Filtros Guardados

El componente soporta guardar y cargar configuraciones de filtros mediante la prop saved y los eventos save/load.

<template>
  <SFilter
    :fields="fields"
    :saved="savedFilters"
    @apply="onApply"
    @save="onSave"
    @load="onLoad"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { TField, TSaveData } from '@placetopay/spartan-vue';

const savedFilters = ref<TSaveData[]>([]);

const onSave = (data: TSaveData[]) => {
  savedFilters.value = data;
};

const onLoad = (filters: TField[]) => {
  console.log('Filtros cargados:', filters);
};
</script>

Métodos Expuestos

El componente expone los métodos apply y clear que pueden ser llamados mediante template ref.

<template>
  <SFilter ref="filterRef" :fields="fields" @apply="onApply" />
  <button @click="filterRef?.apply()">Aplicar</button>
  <button @click="filterRef?.clear()">Limpiar</button>
</template>

Operadores

Operadores Predefinidos

Props

Eventos