Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/obadakhalili/visual-filter
:male_detective: A headless unopinionated advanced visual filtering component for Vue 2 and 3
https://github.com/obadakhalili/visual-filter
component library visual-filter vue
Last synced: about 2 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/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 (over 1 year ago)
- Last Synced: 2024-04-11T04:32:32.320Z (about 2 months ago)
- Topics: component, library, visual-filter, vue
- Language: Vue
- Homepage:
- Size: 256 KB
- Stars: 98
- Watchers: 3
- Forks: 6
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Lists
- awesome-vue - vue-visual-filter - 🕵️♂️ An unopinionated advanced visual filtering component for Vue 2 and 3. (Components & Libraries / UI Components)
- awesome-stars - obadakhalili/visual-filter - :male_detective: A headless unopinionated advanced visual filtering component for Vue 2 and 3 (Vue)
README
# The What
A headless unopinionated advanced Vue visual filtering component. It's built with customizability in mind.
# Demo and Code Example
- 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.