chip-selector

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

Chip selector is a universal tool that helps you display a chip selector to your project. The chip selector has an input where you can filter out results. It can be linked to a form <input type="checkbox"> that can be manipulated in real time.

(back to top)

Works With

This component has been made to be versatile, it includes both ES6 and UMD builds ( module / bundled ).

• Vanilla javascript / html via UMD embed
• Typescript
• Next.js
• React.js
• • example - Functional
• Angular
• Bootstrap
• JQuery

(back to top)

Getting Started

Git clone this repository.

Prerequisites

Install npm - tested with at least version 8.

• npm

  npm install npm@latest -g

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

1. Clone the repo

   git clone https://github.com/raduzoom/dzs-chip-selector

2. Install NPM packages

   npm install

3. To develop -

   npm run dev

(back to top)

Projects

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

(back to top)

Code explanation

Can be used as a web component for creating a chip selector.

Allows the chip selector to feed from multiple origins. The chip selector allows the user to select one or more options from a list of items. It can either get the options from a form element or from the "data-persistentOptions" attribute on the main element.

The class has various methods for initializing the structure of the component, handling user input, and updating the view. The class also uses several imported functions and constants from other modules for specific tasks such as removing children from a DOM element, getting the computed style of an element, and inserting HTML.

The class also extends the HTMLElement interface to add a webComponent property and the Window interface to add a global function "dzs_initDzsChipSelector" which can be used to initialize the component on an HTML element.

(back to top)

Options

propName	description
placeholderNoItemsFound?: string	text for no items found
middlewareFilterResults?: any	include a middleware function like filtering the results
viewSkin?: string	the skin can be "skin-default", "skin-flat" - also needs css file being loaded
inputPlaceholderText?: string	the placeholder for Filter Results ... text
onUpdateFunction?: (...args: any[]) => any	custom function for onUpdate
viewIsWrapping?: boolean	wrap false or true
persistentOptions?: ChipSelectorItem[]	the persistent options

(back to top)

Roadmap

• [x] Add Changelog
• [x] Add back to top links
• [] Add Additional Templates w/ Examples

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Your Name - @ZoomItFlash - email@example.com

Project Link: https://github.com/raduzoom/dzs-chip-selector#readme

(back to top)