Filter Bar | getdom.studio

Data workflows

Controlled customer query

The filter bar owns accessible controls and emits a stable query. The resource layer decides whether to filter local rows, update a route, call an API, or dispatch a Pinia action.

Northstar Labs

Maya Chen · Europe

Active

Enterprise plan

Arc Studio

Priya Shah · North America

Active

Growth plan

Canopy Systems

Owen Reed · Europe

Paused

Starter plan

Harbour Health

Nadia Ali · Asia Pacific

Active

Enterprise plan

CustomerDirectory.vuevue

Playground

Definitions and controlled values

Filter bar playground

Edit logical definitions, active filter values, free-text search, density, labels, and disabled state.

Playground.vuevue

vue

<script setup>
import { reactive } from 'vue';
import { DomFilterBar } from '@getdom/studio/vue';

const data = reactive({
	  "definitions": [
	    {
	      "key": "status",
	      "label": "Status",
	      "type": "select",
	      "options": [
	        "Active",
	        "Paused",
	        "Archived"
	      ]
	    },
	    {
	      "key": "ownerId",
	      "label": "Owner",
	      "type": "select",
	      "options": [
	        {
	          "label": "Maya Chen",
	          "value": "usr_42"
	        },
	        {
	          "label": "Owen Reed",
	          "value": "usr_86"
	        }
	      ]
	    },
	    {
	      "key": "billable",
	      "label": "Billable",
	      "type": "boolean"
	    }
	  ],
	  "filters": {
	    "status": "Active"
	  },
	  "search": "",
	  "searchable": true,
	  "searchPlaceholder": "Search records",
	  "clearLabel": "Clear filters",
	  "ariaLabel": "Filter records",
	  "density": "comfortable",
	  "disabled": false
	});
</script>

<template>
	<DomFilterBar
		v-bind="data"
	/>
</template>

API shape

Map one query at the resource boundary

DomFilterBar is a Data component because its public value is a query contract shared by grids, lists, timelines, search results, and resource stores—not merely the arrangement of form controls.

The emitted FilterBarQuery contains normalized search text and logical filters. Translate that object once at the API or store boundary. Debouncing, route synchronization, cancellation, persistence, and result loading remain application responsibilities.

project-resource-query.jsjs

Reference

Props

Control props

Name	Type	TS	Default	Description
`definitions`	array	Array<FilterBarDefinition `type FilterBarDefinition = { key: string; // Stable filter and API query key. label?: string; // Human-readable filter label. type?: 'text' \| 'select' \| 'date' \| 'number' \| 'boolean'; // Built-in control type. placeholder?: string; // Empty control label. options?: Array<FilterBarOption \| string \| number \| boolean>; // Select options. width?: string; // CSS width applied to the built-in control. disabled?: boolean; // Disable this filter control. };` >	[]	Logical filter definitions rendered as controlled query inputs.
`filters`	object	Record<string, unknown>	{}	Controlled active filter values keyed by definition key.
`search`	string	string	''	Controlled free-text search value.
`searchable`	boolean	boolean	true	Show the built-in search input.

Labels

Name	Type	TS	Default	Description
`searchPlaceholder`	string	string	'Search records'	Placeholder for the built-in search input.
`clearLabel`	string	string	'Clear filters'	Label for clearing the complete query.
`ariaLabel`	string	string	'Filter records'	Accessible label for the filter controls.

Layout

Name	Type	TS	Default	Description
`density`	'compact' \| 'comfortable'	string	'comfortable'	Spacing and control density.

State

Name	Type	TS	Default	Description
`disabled`	boolean	boolean	false	Disable all built-in query controls.

Auto-generated from Filter bar.props and inline _edit hints.

Events

Name	Payload	Description
@update:filters	Record<string, unknown>	Fired when one logical filter value changes or is cleared.
@update:search	string	Fired when the free-text search value changes.
@query-change	FilterBarQuery	Fired with the complete normalized query after any control changes.
@clear	FilterBarQuery	Fired after the complete query is cleared.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Slots

Name	Scope	Description
#leading	{ query }	Content before the built-in search and filters.
#filter	{ definition, value, setValue, clear }	Replace the control for each filter definition.
#trailing	{ query, clear }	Application actions after the built-in controls.
#active-filter	{ definition, value, label, clear }	Replace an active filter chip.