Filter Panel

A flexible and extensible filter component system for Vue 3. Ideal for building customizable filter UIs with checkbox, radio, or custom slot fields.

Features

• Schema-based filter rendering (radio, checkbox)
• Slot-based extensibility for custom filters
• Built-in clear/reset support
• Emits change and clear events
• Popover support with positioning logic
• Show more / limit options logic
• Written in TypeScript
• Fully styleable with Tailwind CSS
• Mobile-friendly and responsive

Documentation

Check out the documentation and live demo here: Live Demo & Docs

Install & Usage

Install

npm i @opengis/filter

Usage

<template>
  <VsFilter :schema="schema" @change="console.log($event.data)" />    
</template>

<script setup lang="ts">
 
 import {ref} from 'vue'  
 import VsFilter from "@opengis/filter";

 // import { Filter, FilterField } from '@opengis/filter'; // component import 

 const schema = ref([
   {name: 'media', type: 'checkbox', label: 'Media type', options: [...] },
   {name: 'source', type: 'radio', label: 'Source', options: [...] }
 ]);
</script>

Register

// main.ts
import VsFilter from '@opengis/filter'; 
app.use(VsFilter); // Register: Filter, VsFilter, FilterField

Style

<script src="https://cdn.tailwindcss.com"></script>

Contributions

We welcome contributions! Feel free to open issues, suggest features, or submit pull requests.