JSPM

@powerpeers-test/source-filter

0.0.0
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
      • 0
    • Score
      100M100P100Q21704F
    • License ISC

    source filter

    Package Exports

    • @powerpeers-test/source-filter

    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 (@powerpeers-test/source-filter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    Source Filter

    A custom input field

    Table of contents

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

    Installation

    CDN

      <script src="http://developer.powerpeers.com/social/1.0.0/custom-input.js" />

    NPM

      npm i @ppci/custom-input

    Usage

    // Javascript import
import '@ppci/custom-input'
// or module import
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/custom-input.js" />

const onChange = (event) => {
  const { name, value } = event.detail;
}

const onChangeDelayed = (event) => {
  const { name, value } = event.detail;
}

<custom-input
  name='firstname'
  placeholder='First name'
  @change="${onChange}"
  @change-delayed='${onChangeDelayed}'>
</custom-input>

    Properties

    Property Type Description Possible Values
    name string Name of the input field. Which could be used in a form as field identifier. first name, surname, email, etc.
    value string The value of the input field.
    label string Label of the input field. Which is placed above the input field itself.
    placeholder string Placeholder value. Visible when the input field is empty.

    Events

    Name Description Detail / Payload
    @change Every time something changes on the input field this event is triggered. The name and value of the input field are passed in the detail section of the event. 
      The value in the response reflects the current state of the input field.
</td>
<td>```{ name: 'firstname', value: 'p' }```</td>
    @change-delayed This is exactly like the change event. However, it's not triggered immediately after every key change. It's delayed so that it could capture more than one key change. 
      This could be useful to prevent too many network requests on a search box.
</td>
<td>```{ name: 'firstname', value: 'powerpeers' }```</td>

    Changelog

    1.0.1 ( Patch )

    • Firefox style bug fix

    1.0.0 ( Major )

    • Initial version of the custom input field.