创建过滤器

@cocreate/filter 将 HTML 属性变成可重复使用的数据过滤器。 它是Coreate应用程序中由列表,表格,搜索,页码,无限滚动,自定义数据传输组件使用的过滤层.

模块本身不获取或提供记录。 它从一个或多个元素中收集过滤状态,使该状态暴露于拥有结果集的元素或数据模块.

文档和演示 | 更改日志 | 问题

安装

光盘N

<script src="https://cdn.CoCreateJS.com/filter/latest/CoCreate-filter.min.js"></script>

无

npm install @cocreate/filter

import "@cocreate/filter";

线条

yarn add @cocreate/filter

如何运作

模块监视带有一个或多个元素的元素 filter-* 属性。 它读取其当前值,创建过滤对象,并通过其 setFilter 一体化.

有两个共同的安排:

1. 将过滤属性直接放入结果元素上.
2. 将输入、选择和按钮等控件放在结果元素内或相邻处,并与之连接 filter-query。 。 。 .

当一个控制器改变时,模块在发送更新后过滤器前等待一秒钟. 普通更新重排结果索引和组合 overwrite;加载更新保留了现有结果.

最小示例

<input
    type="search"
    filter-query-key="name.$regex"
    placeholder="Search names"
>

<div
    id="users"
    filter-query
    database="app"
    collection="users"
    filter-limit="20"
></div>

输入提供了查询键并从输入值中获取其值. 结果元素是过滤目标. 拥有的数据或渲染模块 #users 消耗产生的过滤器.

过滤属性

该模块目前使用连字符 filter-* 属性名称。 它们是与点指派语法分开的 @cocreate/events。 。 。 .

查询过滤

使用 filter-query 结果要素和 filter-query-key 控制系统 控制权 getValue() 结果成为查询值.

<input
    filter-query-key="email.$regex"
    filter-query-options="i"
    type="search"
>
<section id="results" filter-query></section>

由此产生的查询概念如下:

{
    email: {
        $regex: "value",
        $options: "i"
    }
}

被嵌入的密钥会通过CoCreate的点注释工具进行转换. 空数组值去掉相应的查询密钥 。 缺少密钥、 空值或被拒绝的值 checkValue 禁用贡献.

使用 filter-query-value 以加价方式提供的值:

<button filter-query-key="status" filter-query-value="published">
    Published
</button>

明确管制 filter-query-value 未从输入事件更新。 值变化时更改属性或调用过滤器更新集成.

密钥和搜索过滤

filter-key 为过滤器提供值 key 对象。 数字值转换为数字;无效的数字值返回到 1 在目前执行过程中.

<button filter-key="page" filter-value="2">Next page</button>
<div filter-query filter-limit="20"></div>

添加 filter-search 用于输入或具有共生成的其他元素 getValue() 方法 :

<input
    filter-search
    filter-operator="or"
    filter-case-sensitive="false"
    placeholder="Search all fields"
>
<div filter-query></div>

过滤器包含有当前值、操作符和大小写敏感性设置的搜索条目。 消耗数据模块决定适用哪些字段和搜索执行.

排序

排序表示为 { key, direction } 条目。 在一个 INPUT, (中文(简体) ), TEXTAREA,或 SELECT 的排序属性触发过滤器更新.

<select filter-sort-key="createdAt" filter-sort-direction="desc">
    <option value="desc">Newest</option>
    <option value="asc">Oldest</option>
</select>
<div filter-query></div>

多类控件可以贡献出不同的字段. 如果两个控件使用相同的排序密钥,后置值将取代更早的方向.

再加载多加载

结果元素的 filter-limit 默认为 20。 。 。 . filter-index 默认为 0。 。 。 .

<div id="results" filter-query filter-limit="25"></div>
<button filter-on="click">Load more</button>

filter-on="scroll" 用途 IntersectionObserver 当触发器完全可见时请求更多数据. filter-on="fetched" 将获取的计数写入触发器 setValue 之后 fetchedData 活动.

装入更多更新集 loadMore 并保存现有结果集。 普通查询、搜索、排序或密钥更改重置 index 设置 overwrite 所以旧纪录被替换了.

过滤对象形状

运行时间维护一个类似于以下的过滤对象:

{
    query: { status: "published" },
    key: { page: 1 },
    search: [
        { value: "co", operator: "or", caseSensitive: false }
    ],
    sort: [
        { key: "createdAt", direction: "desc" }
    ],
    index: 0,
    limit: 20,
    overwrite: true
}

只有人口密集的部分。 准确解释 query, (中文(简体) ), key,以及 search 属于消耗过滤器的数据模块.

Java 脚本 API

包导出一个默认对象, 包含以下成员:

import CoCreateFilter from "@cocreate/filter";

await CoCreateFilter.init(document.querySelector("#results"));
const filter = await CoCreateFilter.getFilter(
    document.querySelector("#results")
);

init(element)

初始化一个元素, a HTMLCollection页:1 NodeList,或一系列元素。 元素在匹配模块的过滤选择器时进行处理.

getFilter(element)

构建并返回一个元素的有效过滤器,包括从相关控制中解析的贡献。 该模块还暴露了其内部 elements 财务报告和审定财务报表 filters 用于检查运行时状态的集成图.

数据助手

默认导出也会被曝光 queryData, (中文(简体) ), searchData,以及 sortData 从 @cocreate/utils。这些帮助器可供定制的消费者使用,将相同的语义应用到一个内语数组中.

生命周期和时间

• 匹配元素在启动和添加到文档时初始化.
• 支助 filter-* 属性变化触发过滤器更新.
• 输入更改为 1000ms。 。 。 .
• filter-on="scroll" 用途 IntersectionObserver 阈值为 1。 。 。 .
• 删除的节点从模块的元素注册被删除 .

因为过滤器是同步组装的,在CoCreate装入后初始化所依赖的数据/发送模块,或者使用它们的生命周期钩,而不是假设在HTML解析时可以同步使用过滤器.

目前的限制和执行说明

• 过滤器更新延迟一秒钟 。 这影响到方案更新和文本输入.
• 空值在多条路径中被视为无效贡献 。 使用删除过滤器属性或一个空数组, 其中消耗性集成需要清除查询 .
• filter-on="fetched" 取决于 fetchedData 事件和a setValue 由周围数据部分提供的方法.
• 来源重复 value === "true" 键转换中的分支。 计划转换 "false" 改为 0 未执行;无效的数字值返回到 1。 。 。 .
• 此包协调过滤状态 。 它没有定义数据库权限,传输,记录渲染,或页码UI.

解决问题

过滤器永远不会改变

检查控件是否支持 filter-* 属性,解决 a filter-query 结果元素,并曝光 getValue() 当没有明确 filter-query-value 提供。 记住,更新延迟了1秒钟.

查询缺少一个字段

检查 filter-query-key 和返回的值 getValue()空值和被 checkValue 被跳过。 对于巢地,使用点名,例如: profile.name 或者说 profile.name.$regex。 。 。 .

装入更多替换列表

确定更新来自一个元素 filter-on="click" 或者说 filter-on="scroll"。一个普通输入、查询、排序或密钥故意更新集 overwrite 并重置索引.

排序无效

排序控件只附加他们的自动更改收听器 INPUT, (中文(简体) ), TEXTAREA,以及 SELECT 要素。 确认两者 filter-sort-key 财务报告和审定财务报表 filter-sort-direction 是现相而非空相.

捐款

请读一下 贡献指南打开 问题,或者提交拉动请求。 属性名称的改变,过滤形状,解跳行为,和生命周期事件都是相容性的,应该包括文档和实例.

许可证

该软件在GNU Affero通用公共许可证版本3(AGPLv3)和商业许可证下获得双许可证.

• 开源使用 : 对于开源项目和非商业用途,该软件可在AGPLv3下提供. 见 自由文件。 。 。 .
• 商业用途: 营利性用途需要从 创造。 。 。 .