JSPM

  • Created
  • Published
  • Downloads 121
  • Score
    100M100P100Q45890F
  • License ISC

Source list

Package Exports

  • @ppci/source-list

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ppci/source-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Source List

A grid of all available sources

Table of contents

  1. Installation
  2. Usage
  3. Theme | Styling
  4. Properties
  5. Events
  6. Changelog

Installation

NPM

  npm i @ppci/custom-input

Usage

Javascript

import '@ppci/source-list'

Browser

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

<source-list
  .sources=${Array}
  @card-click=${Function}
></source-list>

Theme | Styling

source-list {
  --grid-columns: 4;
  --grid--column-width: 1f;

  /* Responsive */
  @media (max-width: 600px) {
     --grid-columns: 2;
  }
}

Properties

Property Type Description Possible Values
*total* number Total number of sources in the system
*sources* Array Currently loaded sources ```javascript [ { "id":1," "name":"Mark Prince", "city":"Amsterdam", "image":"http://imageurl.com"/1.jpg, "description":"Powerpeers COO", categoryId":1, "deviceId":"1015", "status":"ACTIVE", "latitude":52.368, "longitude":4.9036, "website":null, "type":"SUN", "supply":9500, "start":"2016-04-10T00:00:00", "end":null, "soldOut":false, "weight":1 }, ] ```

Events

Name Description Detail / Payload
@card-click Source card clicked ```{ id: 1 // id of the source }```

Changelog

1.0.1 | 1.0.2

  • Bundle and minify related fixes

1.0.0

  • Initial version of the source list component.