Filter

The VFilter component is a dropdown filter menu that allows users to select multiple options from different categories. It includes an "Apply" button to confirm selections and a "Clear Selected" button to reset the filters.

Props

Name	Type	Required	Description
`items`	`IVFilter[]` (Array)	true	Array of filter objects containing values, titles, options, and models.
`disabled`	`Boolean`	false	Disables the filter button if `true`.

IVFilter Interface

export interface IVFilter {
  value: string;
  title: string;
  options: string[];
  model: string[];
}

Emits

apply: IVFilter[] - Emitted when the user clicks the "Apply" button, passing the selected filters.

Example

vue

<script setup lang="ts">
import VFilter from 'UiKit/components/VFilter.vue';

const filterItems = [
  {
    value: 'category',
    title: 'Category',
    options: ['Electronics', 'Books', 'Clothing'],
    model: [],
  },
  {
    value: 'brand',
    title: 'Brand',
    options: ['Apple', 'Samsung', 'Sony'],
    model: [],
  },
];
</script>

<template>
  <VFilter :items="filterItems" @apply="handleApply" />
</template>