@salvadormedinadinamic/custom-filters

Custom filters form component for Vue 3 and Quasar 2.

Installation

npm install @salvadormedinadinamic/custom-filters

Configuración de Columnas

El componente recibe un array de objetos en la propiedad columns. Aquí tienes un ejemplo con todos los tipos de filtros soportados y sus opciones:

const columns = [
  {
    name: "search",
    type: "text",
  },
  {
    name: "category",
    type: "select",
    multiple: true, // Habilita selección múltiple y chips
    options: [
      { text: "Electrónica", value: "elec" },
      { text: "Hogar", value: "home" },
    ],
  },
  {
    name: "status",
    type: "select",
    options: [
      { text: "Activo", value: "active" },
      { text: "Inactivo", value: "inactive" },
    ],
  },
  {
    name: "active",
    type: "boolean", // Renderiza un toggle
  },
  {
    name: "quantity",
    type: "number",
    min: 0,
    max: 100,
  },
  {
    name: "startDate",
    type: "date",
    format: "DD/MM/YYYY", // Formato visual y de guardado (opcional)
    min: "01/01/2024", // Fecha mínima seleccionable
    max: "31/12/2025", // Fecha máxima seleccionable
  },
];

Uso

<script setup>
import { CustomFiltersForm } from "@salvadormedinadinamic/custom-filters";
import "@salvadormedinadinamic/custom-filters/dist/custom-filters.css";

const handleFilter = (payload) => {
  console.log("Datos del filtro:", payload);
};

const handleReset = () => {
  console.log("Filtros limpiados");
};
</script>

<template>
  <CustomFiltersForm
    :columns="columns"
    @applyFilter="handleFilter"
    @cleanFilter="handleReset"
  />
</template>

Características

Tipos de Filtros Soportados

• text: Campo de búsqueda estándar.
• select: Selector unitario o múltiple (añadiendo multiple: true). Las opciones deben ser un array de objetos { text, value }.
• boolean: Un interruptor (toggle) binario.
• number: Selector numérico con soporte para min y max.
• date: Selector de fecha con popup, soporte para formatos personalizados y límites de fecha.

Personalización (CSS Variables)

Puedes ajustar la estética del componente utilizando variables CSS (próximamente):

:root {
  --cf-primary: #ff5722;
  --cf-border-radius: 4px;
}

Development

1. Install dependencies: npm install
2. Build for production: npm run build
3. Preview build: npm run preview

Git Integration

To upload this project to Git:

1. Initialize repository: git init
2. Add files: git add .
3. Commit: git commit -m "Initial library setup with v-model and slots"
4. Add remote: git remote add origin YOUR_REPO_URL
5. Push: git push -u origin main