
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
choicesjs-stencil
Advanced tools
Select component which just wraps ChoicesJS in a real Web Component. It has been created using StencilJS, and written with Typescript and JSX.
This component allows the user to select from dropdowns, to browser between multiple options, to add tags to an input, etc.
Play with it on the demo page.
The purpose of this project is to create a simple Web Component wrapper from the ChoicesJS library.
All the available use cases of the original library can be perform using this Web Component.
For more information read the library documentation.
[NodeJS and NPM][node] are required to work with the repository.
The library is based on ChoicesJS, but it is not bundle along with the wrapper. It has been defined as part of peerDependencies
, therefore it has to be included in your own dependencies
.
This dependency can be added to the bundle as external library, or it can just be added to the page via GitHub script:
<script src="https://rawgit.com/jshjohnson/Choices/v7.0.0/public/assets/scripts/choices.js"></script>
This component is available via NPM.
npm install choicesjs-stencil
Include the component in your application via HTML script:
<script src="choicesjs-stencil/dist/choicesjsstencil.js"></script>
Use it as a new HTML element in your template:
<choicesjs-stencil values="foo,bar"></choicesjs-stencil>
To be able to work with the component in a form it needs a name:
<form name="form">
<choicesjs-stencil name="select" values="foo,bar"></choicesjs-stencil>
</form>
The component is also available as module to be loaded via module bundler:
require('choicesjs-stencil');
Some of this component properties must be set via JavaScript (non primitive types). As well as properties, the component provides public methods and events (see the library documentation).
<choicesjs-stencil type="single"></choicesjs-stencil>
<script>
var element = document.querySelector('choicesjs-stencil');
element.choices = [
{
value: '',
label: 'Pick an item...',
placeholder: true
}, {
value: 'foo',
label: 'Foo'
}, {
value: 'bar',
label: 'Bar'
}, {
value: 'qux',
label: 'Qux'
}
];
element.disable();
</script>
It is a good decision to create a wrapper of the Web Component to be ready to use by the application framework.
The wrapper has to cover at least:
type
: type of selector (see values in configuration section).choices
: values to display in the selector.name?
: name of the element (recommended).choices
property to update the values of choices
in the Web Component:change
event of the Web Component to be able to propagate it.// Loading ChoicesJS library and ChoicesJS Stencil Web Component
import 'expose-loader?Choices!choices.js';
import { defineCustomElements } from 'choicesjs-stencil/dist/loader';
defineCustomElements(window);
// VueJS component
<template>
<choicesjs-stencil class="choicesjs-stencil"
:type="type"
:name="name"
...
/>
</template>
<script>
export default {
props: [ 'type', 'name', 'choices' ],
watch: {
choices: {
immediate: true,
handler(newChoices, oldChoices) {
const select = this.$el;
if (select && oldChoices !== newChoices) {
select.choices = newChoices;
}
}
}
},
mounted() {
const select = this.$el;
select.choices = this.choices;
select.addEventListener('change', () => this.$emit('change'));
}
};
</script>
type
: the type of selector to render, defaults to text
. Options: text
, single
, multiple
.items
: a list of preselected values for text
type select. It must be set via JavaScript.choices
: a list of available values for single
and multiple
type selects. It must be set via JavaScript.Additionally, more options can be set, check the documentation for further details.
Chrome (and all Chrome based browsers), Safari, Firefox and Edge (IE11 is also supported).
Open index.html
file after running npm run build
.
To contribute to this project it is necessary to work with NodeJS v8 or later.
Install dependencies:
npm install
Run npm run build
to build the minified version (the same as npm run build:min
).
Also, if you want to work with the library and have it live built, you can run npm run build:dev
which creates a live server ready to be used: http://localhost:3333/
.
The example is located in src/index.html
.
The development server is included:
npm run start
<rootDir>/
├── dist/ (distribution folder)
├── docs/ (generated documentation)
├── [example]/ (files to use the public demo)
├── src/ (sources folder)
│ ├── components/ (folder with the different components)
│ │ └── [name]/ (folder for a component)
│ ├── [components.d.ts] (autogenerated file with types for the components)
│ └── index.html (dev index)
├── test/ (test folder)
│ ├── specs/ (test scripts)
│ │ └── TEST-TYPE/
│ └── results/ (test results)
│ └── TEST-TYPE/
├── [www]/ (autogenerated dev server directory)
├── index.html (public demo)
├── jest.config.js
├── stencil.config.js
├── tsconfig.json
├── tslint.json
├── package.json
├── README.md
└── ...
Jest is the test tool, it is run via scripts:
npm run test
npm run test:TYPE
npm run test:coverage
npm run test:coverage:TYPE
Test results found in tests/results/TYPE/coverage
folder.
npm run lint
Generate documentation with typedoc: npm run doc
Documentation found in docs
folder.
Check the contributor list and you will be welcome if you want to contribute.
Check out the CONTRIBUTING.md to know how to contribute to this project.
© adidas AG
adidas AG publishes this software and accompanied documentation (if any) subject to the terms of the MIT license with the aim of helping the community with our tools and libraries which we think can be also useful for other people. You will find a copy of the MIT license in the root folder of this package. All rights not explicitly granted to you under the MIT license remain the sole and exclusive property of adidas AG.
NOTICE: The software has been designed solely for the purpose of wrapping the ChoicesJS library as Web Component. The software is NOT designed, tested or verified for productive use whatsoever, nor or for any use related to high risk environments, such as health care, highly or fully autonomous driving, power plants, or other critical infrastructures or services.
If you want to contact adidas regarding the software, you can mail us at opensourcesoftware@adidas.com.
For further information open the [adidas terms and conditions][terms-and-conditions] page.
FAQs
Select and multi-select Web Component using ChoicesJS library as core
The npm package choicesjs-stencil receives a total of 171 weekly downloads. As such, choicesjs-stencil popularity was classified as not popular.
We found that choicesjs-stencil demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.