Filter Item

A flexible and extensible Vue 3 component for rendering individual filter fields in different layouts (inline or vertical) and types (checkbox, radio, or text). It acts as a building block inside a filter panel or toolbar.

<filter-field
    name="search"
    type="text"
    layout="inline"
    label="Search"
    placeHolder="Enter keyword"
    v-model="searchQuery"
/>

Features

• Supports three input types: text, checkbox, radio
• Adapts layout: inline (popover-based) or vertical (sidebar-style)
• Custom UI wrapper (PopoverLayout or VerticalLayout) depending on mode
• Emits standard change, clear, and update:modelValue events
• Accepts limit and placeholder for more control

Component API

Prop	Type	Default	Description
modelValue	string | string[] | number[]	—	Bound model value
type	'text' | 'checkbox' | 'radio' | 'range' | 'date'	—	Input type
label	string	—	Label for the filter
width	number	220	Filter width
name	string	—	Field name (used in events)
layout	'inline' | 'vertical' | 'popover'	inline	Display mode
placeholder	string	—	Placeholder text
disabled	boolean	false	Disables the input
default	string | string[] | number[]	—	Default value for uncontrolled usage

Events

Event	Payload	Description
update:modelValue	string | string[]	v-model binding
change	{ name: string, value: string | string[] }	Emitted when value changes
clear	name: string	Emitted when clear button is triggered