Nomnom Pumpernickle Muffins
    Have ideas to improve npm?Join in the discussion! »

    simple-chip

    1.3.0 • Public • Published

    <simple-chip>

    Web-component chip input

    Install the Polymer-CLI

    First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install the element's dependencies, then run polymer serve to serve the element locally.

    Interface

    Create

    import ChipElement from 'simple-chip';
    // Or use `<simple-chip>` and querySelector
    const chip = new ChipElement();
    document.appendChild(chip);

    Add chips

    chip.addChips('by', 'parameters');
    // or 
    chip.addChips(['array', 'of', ['nested', 'items']]);
    // or
    let newChips = ['spread', 'syntax'];
    chip.addChips(...newChips);

    Get chip values

    chip.values
    // -> ['by', 'parameters', 'array', 'of', 'nested', 'items', 'spread', 'syntax']

    Get chip nodes

    chip.chips
    // -> (8) [chip-element, chip-element, chip-element ... ]

    Listen for new chips added

    Useful for validation

    chip.addEventListener('chip-added', (e) => {
        e.detail.text; // new chip text content
    
        // Cancel this chip adding
        e.preventDefault();
    })

    Remove the last chip

    // Chip element is returned
    const removed = chip.removeLast();
    removed.value
    // -> 'syntax'

    Remove specific chips

    const removeThese = chip.chips.filter(c => ['by', 'of'].includes(c.value));
    for (const specific of removeThese) {
        specific.remove();
    }
    
    chip.values
    // -> ['parameters', 'array', 'nested', 'items', 'spread']

    Change the commit keys

    Note that keys can be specified either by key or by keycode, for example ';' is equivalent to 'Semicolon', and either 'b' or 'KeyB' works. However, since lists can be specified ' ' must be provided as 'Space'.

    <!-- With the attribute ->
    <simple-chip commitkeycode="Space">

    or

    // With the property
    chip.commitKeycode = 'Insert';
    
    // Both versions also take comma delimited lists
    chip.commitKeycode = 'Enter, Tab, Space';

    Viewing the Element

    $ polymer serve
    

    Running Tests

    Tests haven't been build yet, of course..

    $ polymer test
    

    This application is already set up to be tested via web-component-tester. Run polymer test to run it's test suite locally.

    Install

    npm i simple-chip

    DownloadsWeekly Downloads

    8

    Version

    1.3.0

    License

    ISC

    Unpacked Size

    14.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar