Kappa / Filter Bar

4 resources

Turbine cooling study

Thermal analysis

Mach 2 inlet

Aerodynamics

Cryogenic transfer line

Two-phase flow

Pump validation

Rotating machinery

<script setup lang="ts">
import { ref } from "vue";
import { FilterBar, type FilterBarView, type FilterBarSortDirection } from "@dicehub/kappa/components/filter-bar";

const query = ref("");
const sortBy = ref("updated");
const direction = ref<FilterBarSortDirection>("desc");
const view = ref<FilterBarView>("list");
const sortOptions = [
  { value: "updated", label: "Updated date" },
  { value: "name", label: "Name" },
];
</script>

<template>
  <FilterBar
    v-model="query"
    v-model:sort-by="sortBy"
    v-model:sort-direction="direction"
    v-model:view="view"
    :sort-options="sortOptions"
    show-view
  />
  <!-- Filter and sort your data with these values, then render the results. -->
</template>

Installation

import { FilterBar } from "@dicehub/kappa";
// Or use the component entry point:
import { FilterBar } from "@dicehub/kappa/components/filter-bar";

Usage

Filter Bar manages control values. Your application filters, sorts, loads, and renders the data. Search updates are immediate; debounce network requests in the application when needed.

Use v-model for the search text and named models for sorting and the view. Omit a controlled prop to let the component store that value. The matching default* prop sets its initial value only.

<FilterBar
  default-value="thermal"
  default-sort-by="name"
  default-sort-direction="asc"
  default-view="grid"
  :sort-options="sortOptions"
  show-view
  @update:model-value="searchResources"
/>

Place Filter Bar in the toolbar slot of Resource List, or above any list or table. The bar wraps to fit narrow containers.

Composition

Built from Kappa Input, Button, Dropdown, and Toggle Group. Dropdown and Toggle Group retain their Ark UI menu and toggle group behavior.

Examples

Search only

Use the search input on its own. Sorting and view controls appear only when requested.

4 resources

Turbine cooling study

Thermal analysis

Mach 2 inlet

Aerodynamics

Cryogenic transfer line

Two-phase flow

Pump validation

Rotating machinery

<FilterBar v-model="query" :labels="{ search: 'Search projects', searchPlaceholder: 'Find a project...' }" />

Uncontrolled

Set initial values and receive changes. The controls keep their own current values.

1 resource

Turbine cooling study

Thermal analysis

<FilterBar
  default-value="thermal"
  default-sort-by="name"
  default-sort-direction="asc"
  default-view="grid"
  :sort-options="sortOptions"
  show-view
  @update:model-value="searchResources"
/>

Filters and actions

Add domain filters and primary actions through slots. These controls filter the list and add a project.

4 resources

Turbine cooling study

Thermal analysis

Mach 2 inlet

Aerodynamics

Cryogenic transfer line

Two-phase flow

Pump validation

Rotating machinery

<FilterBar v-model="query" :sort-options="sortOptions" show-view>
  <template #filters="{ disabled }">
    <Button size="sm" variant="outline" :disabled="disabled" :aria-pressed="onlyMine" @click="onlyMine = !onlyMine">
      My projects
    </Button>
  </template>
  <template #actions="{ disabled }">
    <Button size="sm" variant="primary" :disabled="disabled" @click="createProject">
      New project
    </Button>
  </template>
</FilterBar>

Disabled

Disable built-in controls while an operation is in progress. Pass the slot's disabled value to custom controls.

<FilterBar :sort-options="sortOptions" show-view disabled />

The bar is a labeled group. Each icon button has an accessible name. The sort menu supports arrow keys, typeahead, and Escape. The view toggle uses arrow-key navigation and always keeps one view selected. Normal Tab order connects the search, sorting, custom filters, and actions.

Override the labels object to translate all built-in labels. Use a different root label when a page has several filter bars. Additional attributes and listeners are forwarded to the root group.

API Reference

FilterBar

Prop	Type	Default	Description
`modelValue / defaultValue`	`string`	`""`	Controlled search text / initial search text.
`showSearch`	`boolean`	`true`	Show the search input.
`sortOptions`	`FilterBarSortOption[]`	`[]`	Sort choices with value, label, and optional disabled state. An empty list hides sorting.
`sortBy / defaultSortBy`	`string`	`First enabled option`	Controlled sort field / initial field.
`sortDirection / defaultSortDirection`	`"asc" \| "desc"`	`"desc"`	Controlled sort direction / initial direction.
`showView`	`boolean`	`false`	Show the list/grid toggle.
`view / defaultView`	`"list" \| "grid"`	`"list"`	Controlled view / initial view.
`disabled`	`boolean`	`false`	Disable built-in controls. Slot content receives this state.
`labels`	`Partial<FilterBarLabels>`	`English labels`	Override root, search, searchPlaceholder, sort, ascending, descending, view, list, and grid labels.

Events

Event	Payload	Description
`update:modelValue`	`string`	Search input changes, emitted immediately.
`update:sortBy`	`string`	An enabled sort option is selected.
`update:sortDirection`	`"asc" \| "desc"`	The sort direction button is activated.
`update:view`	`"list" \| "grid"`	The selected view changes.

Slots

filters appears after sorting. actions appears after the view toggle and aligns to the end. Both receive { disabled: boolean }.

Exports

FilterBar, FILTER_BAR_DEFAULT_LABELS, and the types FilterBarProps, FilterBarEmits, FilterBarSlots, FilterBarLabels, FilterBarSortOption, FilterBarSortDirection, and FilterBarView.

Data slots

filter-bar, filter-bar-search, filter-bar-sort, filter-bar-sort-direction, filter-bar-filters, and filter-bar-actions.