{"id":13810570,"url":"https://github.com/obadakhalili/visual-filter","last_synced_at":"2025-04-29T20:30:47.191Z","repository":{"id":41888240,"uuid":"342504024","full_name":"obadakhalili/visual-filter","owner":"obadakhalili","description":":male_detective: A headless unopinionated advanced visual filtering component for Vue 2 and 3","archived":false,"fork":false,"pushed_at":"2022-10-16T05:23:36.000Z","size":262,"stargazers_count":100,"open_issues_count":18,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-28T15:08:08.409Z","etag":null,"topics":["component","library","visual-filter","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/obadakhalili.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-26T07:59:56.000Z","updated_at":"2025-04-11T07:58:55.000Z","dependencies_parsed_at":"2022-09-12T01:01:21.072Z","dependency_job_id":null,"html_url":"https://github.com/obadakhalili/visual-filter","commit_stats":null,"previous_names":["obadakhalili/vue-visual-filter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obadakhalili%2Fvisual-filter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obadakhalili%2Fvisual-filter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obadakhalili%2Fvisual-filter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obadakhalili%2Fvisual-filter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/obadakhalili","download_url":"https://codeload.github.com/obadakhalili/visual-filter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251336387,"owners_count":21573188,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","library","visual-filter","vue"],"created_at":"2024-08-04T02:01:00.735Z","updated_at":"2025-04-29T20:30:46.704Z","avatar_url":"https://github.com/obadakhalili.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# The What\n\nA headless unopinionated advanced Vue visual filtering component. It's built with customizability in mind.\n\n# Demo and Code Example\n\n- GIF.\n\n\u003cbr\u003e\n\n![Demo GIF](https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/27996/vue-visual-filter-k.gif)\n\n# Prerequisites\n\n- Node version 12.0.0 or higher.\n- NPM.\n\n# Installation, and Setting Up The Component\n\n- [@visual-filter/vue2](https://github.com/obadakhalili/vue-visual-filter/tree/main/packages/vue2)\n- [@visual-filter/vue3](https://github.com/obadakhalili/vue-visual-filter/tree/main/packages/vue3)\n\n# Usage (for both @visual-filter/vue2, and @visual-filter/vue3)\n\nOnce you're set up, and ready to start using the component. Reference the component's name in your template:\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-visual-filter\n    :filtering-options=\"filteringOptions\"\n    @filter-update=\"captureFilterUpdate\"\n  \u003e\u003c/vue-visual-filter\u003e\n\u003c/template\u003e\n```\n\n## The `filteringOptions` Prop\n\nIt contains two options:\n\n- `data`: An array of objects that stores the data to be filtered. Definition:\n\n```ts\ninterface Data {\n  name: string\n  type: \"numeric\" | \"nominal\"\n  values: any[]\n}\n;[]\n```\n\n- `methods`: An object that contains the methods to be used to filter the data. Definition:\n\n```ts\ninterface Methods {\n  numeric: Record\u003cstring, (cellValue: any, argument: string) =\u003e boolean\u003e\n  nominal: Record\u003cstring, (cellValue: any, argument: string) =\u003e boolean\u003e\n}\n```\n\n## The `filter-update` Event\n\nAn 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.\n\n## Filter `slots`\n\nVue 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.\n\nExample:\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-visual-filter\n    :filtering-options=\"filteringOptions\"\n    @filter-update=\"captureFilterUpdate\"\n  \u003e\n    \u003ctemplate #groupTypes=\"{ groupTypes, group }\"\u003e\n      \u003cel-select v-model=\"group.groupType\" size=\"small\"\u003e\n        \u003cel-option\n          v-for=\"type in groupTypes\"\n          :key=\"type\"\n          :value=\"type\"\n        \u003e\u003c/el-option\u003e\n      \u003c/el-select\u003e\n    \u003c/template\u003e\n\n    \u003ctemplate #filterAddition=\"{ filterTypes, addFilter }\"\u003e\n      \u003cel-dropdown\n        @command=\"addFilter\"\n        split-button\n        trigger=\"click\"\n        type=\"primary\"\n        size=\"mini\"\n      \u003e\n        \u003ci class=\"el-icon-plus\"\u003e\u003c/i\u003e\n        \u003ctemplate #dropdown\u003e\n          \u003cel-dropdown-menu\u003e\n            \u003cel-dropdown-item\n              v-for=\"filter in filterTypes\"\n              :key=\"filter\"\n              :command=\"filter\"\n            \u003e\n              {{ filter }}\n            \u003c/el-dropdown-item\u003e\n          \u003c/el-dropdown-menu\u003e\n        \u003c/template\u003e\n      \u003c/el-dropdown\u003e\n    \u003c/template\u003e\n\n    \u003ctemplate #groupDeletion=\"{ deleteGroup }\"\u003e\n      \u003cel-button\n        @click=\"deleteGroup\"\n        type=\"danger\"\n        icon=\"el-icon-close\"\n        size=\"mini\"\n        circle\n      \u003e\u003c/el-button\u003e\n    \u003c/template\u003e\n\n    \u003ctemplate #fieldUpdation=\"{ fieldNames, condition, updateField }\"\u003e\n      \u003cel-select\n        @change=\"updateField\"\n        v-model=\"condition.fieldName\"\n        size=\"small\"\n      \u003e\n        \u003cel-option\n          v-for=\"name in fieldNames\"\n          :key=\"name\"\n          :value=\"name\"\n        \u003e\u003c/el-option\u003e\n      \u003c/el-select\u003e\n    \u003c/template\u003e\n\n    \u003ctemplate\n      #methodUpdation=\"{ numericMethodNames, nominalMethodNames, condition }\"\n    \u003e\n      \u003cel-select\n        v-if=\"numericMethodNames\"\n        v-model=\"condition.method\"\n        no-data-text=\"No methods\"\n        size=\"small\"\n      \u003e\n        \u003cel-option\n          v-for=\"method in numericMethodNames\"\n          :key=\"method\"\n          :value=\"method\"\n        \u003e\u003c/el-option\u003e\n      \u003c/el-select\u003e\n      \u003cel-select\n        v-else\n        v-model=\"condition.method\"\n        no-data-text=\"No methods\"\n        size=\"small\"\n      \u003e\n        \u003cel-option\n          v-for=\"method in nominalMethodNames\"\n          :key=\"method\"\n          :value=\"method\"\n        \u003e\u003c/el-option\u003e\n      \u003c/el-select\u003e\n    \u003c/template\u003e\n\n    \u003ctemplate #argumentUpdation=\"{ condition }\"\u003e\n      \u003cel-input\n        v-model=\"condition.argument\"\n        size=\"mini\"\n        placeholder=\"Argument\"\n        :style=\"{ width: 'auto' }\"\n      \u003e\u003c/el-input\u003e\n    \u003c/template\u003e\n\n    \u003ctemplate #conditionDeletion=\"{ deleteCondition }\"\u003e\n      \u003cel-button\n        @click=\"deleteCondition\"\n        type=\"danger\"\n        icon=\"el-icon-close\"\n        size=\"mini\"\n        circle\n      \u003e\u003c/el-button\u003e\n    \u003c/template\u003e\n  \u003c/vue-visual-filter\u003e\n\u003c/template\u003e\n```\n\nThe 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobadakhalili%2Fvisual-filter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fobadakhalili%2Fvisual-filter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobadakhalili%2Fvisual-filter/lists"}