Gathering detailed insights and metrics for @tradeshift/elements.select-menu
Gathering detailed insights and metrics for @tradeshift/elements.select-menu
Tradeshift Elements - Reusable Tradeshift UI Components as Web Components https://tradeshift.github.io/elements
Installations
npm install @tradeshift/elements.select-menuDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, UMD
Node Version
16.18.0
NPM Version
lerna/5.1.4/node@v16.18.0+x64 (linux)
Score
67.3
Supply Chain
66.3
Quality
82.8
Maintenance
100
Vulnerability
88
License
Languages
4
JavaScript
CSS
HTML
Shell
JavaScript (71.71%)
CSS (18.77%)
HTML (9.2%)
Shell (0.32%)
🚀 npmpackage.info for sale
Built with Next.js • Fully responsive • SEO optimized • Open source ready
Developer
Tradeshift
Download Statistics
Total Downloads
4,216
Last Day
1
Last Week
3
Last Month
14
Last Year
504
GitHub Statistics
NOASSERTION License
17 Stars
1,164 Commits
16 Forks
7 Watchers
39 Branches
119 Contributors
Updated on Sep 01, 2025
Maintainers
8
Package Meta Information
Latest Version
0.40.2
Package Id
@tradeshift/elements.select-menu@0.40.2
Unpacked Size
63.92 kB
Size
15.95 kB
File Count
7
NPM Version
lerna/5.1.4/node@v16.18.0+x64 (linux)
Node Version
16.18.0
Total Downloads
Cumulative downloads
Total Downloads
4,216
Last Day
0%
1
Compared to previous day
Last Week
-25%
3
Compared to previous week
Last Month
-80.8%
14
Compared to previous month
Last Year
-41.2%
504
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Elements - select-menu
Part of the reusable Tradeshift UI Components as Web Components. Demo
➤ Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
| dir | dir | String | ltr | Direction of the component 'rtl' or 'ltr'. |
| disabled | disabled | Boolean | false | Is component disabled or not. |
| items | items | Array | List of available options. Item must have 'id' and 'title', it can also have an 'icon' which is the name of the icon | |
| filteredItems | filtered-items | Array | List of filtered options based on the select filter input value. items should be updated to always include all filtered items. | |
| multiselect | multiselect | Boolean | false | Allow users to select several options or not. |
| noApplyButton | no-apply-button | Boolean | false | Do not show the apply button and directly emit select-menu-changed when the selection changes. Only affects the behaviour when multiselect is enabled, for single selection this is the default behavior. |
| selected | selected | Array | [] | List of selected items' ids |
| translations | translations | Object | Translated messages for the user locale | |
| loading | loading | Boolean | false | Set component in loading state and render a spinner instead of list of items |
| caseSensitive | case-sensitive | Boolean | false | Make client side filtering case sensitive which by default is case-insensitive |
| dirty | dirty | Boolean | false | INTERNAL Does component has uncommited changes or not. |
| currentSelection | currentSelection | Array | [] | INTERNAL List of currently selected changes that user not commited yet. |
| filterValue | filterValue | String | '' | INTERNAL Latest input value that was used to filter. |
| showSelectedOnly | showSelectedOnly | Boolean | false | INTERNAL Filter to show only selected items. |
➤ Events
| Name | Description | Payload |
|---|---|---|
| select-menu-changed | Emitted when user applies the selected changes |
➤ How to use it
- Install the package of selectMenu
1$ npm i @tradeshift/elements.select-menu --save
- Import the component
1import '@tradeshift/elements.select-menu';
or
1<script src="node_modules/@tradeshift/elements.select-menu/lib/select-menu.umd.js"></script>
-
Use it like demo
-
Our components rely on having the
Open Sansavailable, You can see thefont-weightandfont-styleyou need to load here, or you can just load it from our package (for now)
1<link rel="stylesheet" href="node_modules/@tradeshift/elements/src/fonts.css" />
➤ Polyfills
For supporting IE11 you need to add couple of things
- Don't shim CSS Custom Properties in IE11
1<!-- Place this in the <head>, before the Web Component polyfills are loaded --> 2<script> 3 if (!window.Promise) { 4 window.ShadyCSS = { nativeCss: true }; 5 } 6</script>
You have two options for polyfills library:
- Installation
1$ npm i @open-wc/polyfills-loader
- Load it
1import loadPolyfills from '@open-wc/polyfills-loader'; 2 3loadPolyfills().then(() => import('./my-app.js'));
- Installation
1$ npm i @webcomponents/webcomponentsjs --save
- Enable ES5 class-less Custom Elements
1<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
- Load appropriate polyfills and shims with
@webcomponents/webcomponentsjs
1<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>
➤ How to contribute
Thanks for your interest and help!
- First thing you need to do is read this [Component Checklist] which contains lots of important information about what you need to consider when you are creating/changing components
General info
You can find some links to useful materials about what we are using and some tutorials and articles that can help you get started.
➤ Polyfill Limitations
You can see a list of limitations that we should watch out for, here
➤ License
- You can always create forks on GitHub, submit Issues and Pull Requests.
- You can only use Tradeshift Elements to make apps on a Tradeshift platform, e.g. tradeshift.com.
- You can fix a bug until the bugfix is deployed by Tradeshift.
- You can host Tradeshift Elements yourself.
- If you want to make a bigger change or just want to talk with us, reach out to our team here on GitHub.
You can read the full license agreement in the LICENSE.md.
No vulnerabilities found.