@brightspace-ui-labs/multi-select
Advanced tools
Readme
Note: this is a "labs" component. While functional, these tasks are prerequisites to promotion to BrightspaceUI "official" status:
- Design organization buy-in
- design.d2l entry
- Architectural sign-off
- Continuous integration
- Cross-browser testing
- Unit tests (if applicable)
- Accessibility tests
- Visual diff tests
- Localization with Serge (if applicable)
- Demo page
- README documentation
Polymer-based web component for D2L multi select and related components.
npm install @brightspace-ui-labs/multi-select
Include the webcomponents.js polyfill loader (for browsers who don't natively support web components), then import the appropriate multi-select components as needed:
<head>
<script src="node_modules/webcomponentsjs/webcomponents-loader.js"></script>
</head>
d2l-labs-multi-select-input-textd2l-labs-multi-select-input-text includes a d2l-input-text that is hooked up to add items when 'Enter' is pressed.
<d2l-labs-multi-select-input-text>
<d2l-labs-multi-select-list-item deletable text="Item 1"></d2l-labs-multi-select-list-item>
</d2l-labs-multi-select-input-text>
d2l-labs-multi-select-inputYou can use your own input component instead by putting it as a child of d2l-labs-multi-select-input and setting slot="input" on your input element. To add items to the list, call addItem with the item text.
<d2l-labs-multi-select-input id="multi-select-input">
<div slot="input">
<input>
<button>Add</button>
</div>
</d2l-labs-multi-select-input>
button.addEventListener('click', () => {
multiSelectInput.addItem(input.value)
})
d2l-labs-multi-select-list-itemd2l-labs-multi-select-list-item is a compact representation of information.
A deletable property can be set to enable the option of deleting the item, although there is no wire-up.
<d2l-labs-multi-select-list-item deletable text="List item"></d2l-labs-multi-select-list-item>
A 'show-delete-hover-focus' property can be set to allow delete icon to show on hover or focus only.
<d2l-labs-multi-select-list-item deletable show-delete-hover-focus text="List item"></d2l-labs-multi-select-list-item>
Also the following css variables are exposed to clients and can be use to override some of the appearance of the list item.
--d2l-labs-multi-select-list-item-font
--d2l-labs-multi-select-list-item-padding
--d2l-labs-multi-select-list-item-padding-rtl
--d2l-labs-multi-select-list-item-padding-deletable
--d2l-labs-multi-select-list-item-padding-deletable-rtl
d2l-labs-multi-select-listd2l-labs-multi-select-list wraps a list of items, and provides spacing between the items, as well as keyboard navigation (arrow keys) and handling of item deletion (backspace/delete).
<d2l-labs-multi-select-list>
<d2l-labs-multi-select-list-item text="List item 1"></d2l-labs-multi-select-list-item>
<d2l-labs-multi-select-list-item text="List item 2"></d2l-labs-multi-select-list-item>
...
</d2l-labs-multi-select-list>
You can opt for a condensed view by adding the collapsable attribute, which limits the element to the first line of items and provides a button for viewing the remaining items.
d2l-labs-multi-select-list-item-deleted: fired on item deletion
d2l-labs-multi-select-list-item-added: fired on item added to the d2l-labs-multi-select-list
After cloning the repo, run npm install to install dependencies.
If you don't have it already, install the Polymer CLI globally:
npm install -g polymer-cli
To start a local web server that hosts the demo page and tests:
polymer serve
To lint (eslint and Polymer lint):
npm run lint
To run unit tests locally using Polymer test:
npm run test:polymer:local
To lint AND run local unit tests:
npm test
All version changes should obey semantic versioning rules.
Include either [increment major], [increment minor] or [increment patch] in your merge commit message to automatically increment the package.json version, create a tag, and trigger a deployment to NPM.
FAQs
Polymer-based web component for D2L multi select and related components
The npm package @brightspace-ui-labs/multi-select receives a total of 734 weekly downloads. As such, @brightspace-ui-labs/multi-select popularity was classified as not popular.
We found that @brightspace-ui-labs/multi-select demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers 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
A new report explores how advancements in LLMs are enhancing cyber threats, including polymorphic malware, personalized spearphishing, and the risk of hijacking customer service bots.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.
Security News
The NVD is facing a significant backlog with over 12,500 CVEs awaiting analysis, and more than 50% of known exploited vulnerabilities (KEVs) left unenriched since mid-February.