https://github.com/obadakhalili/vue-visual-filter

:male_detective: A headless unopinionated advanced visual filtering component for Vue 2 and 3
https://github.com/obadakhalili/vue-visual-filter

component library visual-filter vue

Last synced: 3 months ago
JSON representation

:male_detective: A headless unopinionated advanced visual filtering component for Vue 2 and 3

• Host: GitHub
• URL: https://github.com/obadakhalili/vue-visual-filter
• Owner: obadakhalili
• Created: 2021-02-26T07:59:56.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-16T05:23:36.000Z (about 2 years ago)
• Last Synced: 2024-08-04T02:07:26.458Z (3 months ago)
• Topics: component, library, visual-filter, vue
• Language: Vue
• Homepage:
• Size: 256 KB
• Stars: 100
• Watchers: 3
• Forks: 6
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

• awesome-vue-3 - vue-visual-filter - An unopinionated visual filtering component for Vue 3. (Packages)

README

        
# The What

A headless unopinionated advanced Vue visual filtering component. It's built with customizability in mind.

# Demo and Code Example

- GIF.




![Demo GIF](https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/27996/vue-visual-filter-k.gif)

# Prerequisites

- Node version 12.0.0 or higher.

- NPM.

# Installation, and Setting Up The Component

- [@visual-filter/vue2](https://github.com/obadakhalili/vue-visual-filter/tree/main/packages/vue2)

- [@visual-filter/vue3](https://github.com/obadakhalili/vue-visual-filter/tree/main/packages/vue3)

# Usage (for both @visual-filter/vue2, and @visual-filter/vue3)

Once you're set up, and ready to start using the component. Reference the component's name in your template:

```vue

  

```

## The `filteringOptions` Prop

It contains two options:

- `data`: An array of objects that stores the data to be filtered. Definition:

```ts

interface Data {

  name: string

  type: "numeric" | "nominal"

  values: any[]

}

;[]

```

- `methods`: An object that contains the methods to be used to filter the data. Definition:

```ts

interface Methods {

  numeric: Record boolean>

  nominal: Record boolean>

}

```

## The `filter-update` Event

An event prop that receives a function to be called whenever the filter updates. The function contains one parameter, `ctx`, which has in-reactive clones of `filter`, and `data` objects.

## Filter `slots`

Vue provides a content distribution API called slots. And it's leveraged here to build a custom filter that its elements and styling are provided by you.

Example:

```vue

  

    

      

        

      

    

    

      

        

        

          

            

              {{ filter }}

            

          

        

      

    

    

      

    

    

      

        

      

    

    

      

        

      

      

        

      

    

    

      

    

    

      

    

  

```

The example above uses the [element-plus](http://element-plus.org/) UI framework for the filter components. But you can provide whichever content fits your need best.