npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

everright-filter

v1.1.1

Published

🦮Vue3 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(Vue 高级筛选器组件)

Downloads

185

Readme

简体中文 | 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

| | 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 |

Docs

Examples

  • linear Application Scenario: Suitable for data filtering
  • matrix Application Scenario: Suitable for data filtering
  • quick-search Application Scenario: Suitable for search
  • quick-filter Application Scenario: Suitable for filtering in a column of the list

Sample screenshot

text

text

number

number

time

time

date

date

cascader

cascader

select

cascader

linear

image

matrix

image

quick-search

image

quick-filter

image