Coder Social home page Coder Social logo

mohammadsiabbouforwork / right-filter Goto Github PK

View Code? Open in Web Editor NEW

This project forked from liberty-liu/everright-filter

0.0 0.0 0.0 1.03 MB

🦮vue query builder/filter builder ui component for building complex queries and filters with nested conditionals.Supports filtering of multiple data types, including string, number, dropdown, cascade, region, date and time

Home Page: https://everright.site/en/filter/introduction.html

License: MIT License

Shell 0.08% JavaScript 61.50% HTML 0.22% Vue 33.22% SCSS 4.97%

right-filter's Introduction

Everright-filter

简体中文 | English

vue element-plus @vant/area-data @vue/shared lodash async @vuelidate/core @vuelidate/validators axios nzh written-number vite unplugin-vue-components

中文主页 | ENGLISH HOMEPAGE

Everright-filter is a user interface that easily generates any type of query statement, making filtering and filtering data a breeze. Provide a variety of UI interfaces to enable different business scenarios.

filter

Features

  • 1.Supports filtering of multiple data types, including string, number, dropdown, cascade, region, date and time. Whether you need to filter different types of data, it can meet your needs.
  • 2.Provides a wealth of operators, such as equal to, not equal to, greater than, less than, interval, etc., allowing you to flexibly define filtering rules based on specific conditions.
  • 3.Provides great flexibility. It supports filtering on date, year, month and day. It also supports the selection of relative time and absolute time, such as today, this week, this month, this year, past N days/hours, future N days/hours, etc. This makes date filtering more flexible and can meet the needs of various time dimensions.
  • 4.Support conditional grouping settings, you can use logical operators (AND/OR) to combine multiple conditions to implement complex data filtering logic. Data that meets multiple conditions can be filtered out more precisely to meet the needs of advanced data analysis and mining.
  • 5.For behavioral data, it supports setting start and end time, limit times and limit attributes. You can precisely filter out actions that occurred within a specific time period, and further filter based on frequency and attribute conditions.
  • 6.Each filter type is extracted and used separately, and can be easily embedded into different UI interfaces. Whether it is a search box, a filter panel or a table header, everright-filter can provide consistent functions and data structures, eliminating the need to develop separate filter functions for different interfaces, saving development resources and time.
  • 7.Developers can easily configure the data structure of the required functions according to the document UI interface, saving the tedious manual coding and debugging process.
  • 8.Support Chinese and English

Explanation of the different builds

In the dist/ directory of the npm package you will find the different builds

  • without-element-plus(element-plus is required) Default
  • with-element-plus(Built-in element-plus)
Excludes element-plus(default) Includes element-plus(v2.3.3)
UMD EverrightFilter-without-element-plus.umd.cjs EverrightFilter-with-element-plus.umd.cjs
ES EverrightFilter-without-element-plus.js EverrightFilter-with-element-plus.js
IIFE EverrightFilter-without-element-plus.iife.js EverrightFilter-with-element-plus.iife.js
css EverrightFilter-without-element-plus.css EverrightFilter-with-element-plus.css
Click Me to see which components are built in

Includes element-plus(v2.3.3)

Based on ES modules tree shaking

element-plus components
ElButton
ElCascader
ElCheckbox
ElCheckboxGroup
ElDatePicker
ElIcon
ElInput
ElInputNumber
ElOption
ElPopover
ElScrollbar
ElSelect
ElSwitch
ElTabPane
ElTabs
ElTag
ElTimePicker
ElTooltip
vLoading

Docs

Examples

Sample screenshot

text

text

number

number

time

time

date

date

cascader

cascader

select

cascader

linear

image

matrix

image

quick-search

image

quick-filter

image

right-filter's People

Contributors

liberty-liu avatar mohammadsiabbouforwork avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.