@ppci/source-filter

Source Filter

Table of contents

1. Installation
2. Usage
3. Properties
4. Events
5. Changelog

Installation

NPM

npm i @ppci/source-filter

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci/source-filter';

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/source-filter/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/source-filter/builds/legacy.min.js" />

<!-- Component -->
<source-filter
  .categories=${Array}
  @change="${Function}"
  @filter="${Function}"
  @sort="${Function}"
></source-filter>

Properties

Property	Type	Description	Possible Values
categories	Array	Categories you can filter on	```[{ name: 'name', 'label': 'label' }]```

Events

Name	Description	Payload
@change	On input changed	```{ ..., detail: { value: String } }```
@filter	On filter changed	```{ ..., detail: { name: String, checked: Boolean } }```
@sorting	On sorting selected	```{ ..., detail: { value: String } }```