npm i @cocreate/filter

Or you can use cdn link:

<script>https://cdn.cocreate.app/filter/latest/CoCreate-filter.min.js</script>

Dependencies components

CoCreate.js, CoCreate-utils.js

CoCreate-filter is basic component that make the the readDocuments parameters to fetch the data from db by attributes.

Example

HTML Template

	<div template_id="filter" filter-query-key="name" filter-query-value="testing" filter-operator="$eq"></div>
	<div template_id="filter" filter-query-key="age" filter-query-value="10" filter-operator="$gt"></div>
	<div template_id="filter" filter-sort-key="age" filter-sort-direction="asc"></div>
	...
	<input template_id="filter" filter-query-key="description" filter-operator="$in"/>
	....
	
	<div array="testing" template_id="filter"
	        filter-query-key="filter"
	        filter-query-value="testing"
	        data-fitler_operator="$ne"
	>....</div>
					

CoCreate-render usage

Description.

	//. Function
	
					

• {container_id} string required

  This attribute should be defined. This attribute name is difference for each component.

  Template wrapper case: the attribute name is template_id

• filter-query-key string optional

  Collections's field name for filter.

• filter-value string optional

  Collection's field value for filter. If filter-query-key defined, this attribute should defined too

• filter-value-type string optional

  string | raw . Default value is string

  raw case, it will make values array from string by "," separation

• filter-operator string optional

  Define the filter operator.

  Operators: includes | $range | $eq | $ne | $lt | $lte | $gt | $gte | $in | $nin | $geoWithin

• filter-sort-name string optional

  Field name to sorting.

• value string optional

  The value for sorting.

  value="asc | desc". Default value is asc

• filter-on string optional

  Available value: loadmore | scroll | total.

• export_type string optional

  To export the fetched data, This attribute will be use

  Available value: json | cvs

• import string optional

  When import the file content into selected array, This attribute will be use

  Available value: true

Functions

• init(elements, mainAttri, type)

  To apply filter into the componentis, the component should call this function

  - elements Type:Noderequired

  Dom elements for container

  - mainAttr Type:stringrequired

  This is the container's attribute name. Ex: template wrapper case- template_id

  - typeType:stringoptional

• fetchData(item)

  To fetch the data, the component should call this function.

  - item Type:objectrequired

  This paramter is the returned value by init() function

How Does It Works

CoCreate-filter build the filter object based on attributes

To make filter object , Filter should define data-{container_id}

Effects and Styles

Events

fetchData