A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
Installations
npm install @vaadin/vaadin-themable-mixinScore
99.6
Supply Chain
70.3
Quality
98.6
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Developer
Developer Guide
Module System
ESM
Min. Node Version
Typescript Support
No
Node Version
18.17.0
NPM Version
lerna/4.0.0/node@v18.17.0+x64 (linux)
Statistics
470 Stars
18,524 Commits
82 Forks
17 Watching
304 Branches
143 Contributors
Updated on 29 Nov 2024
Languages
JavaScript (93.06%)
TypeScript (4.17%)
HTML (2.76%)
Shell (0.01%)
Total Downloads
Cumulative downloads
Total Downloads
11,453,269
Last day
-19.2%
16,061
Compared to previous day
Last week
0.6%
103,785
Compared to previous week
Last month
4.2%
442,215
Compared to previous month
Last year
63.4%
3,895,936
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
4
Vaadin web components
Vaadin components is an evolving set of high-quality web components for business web applications.
Installation
Install the components that you need from npm:
1npm install @vaadin/grid
Usage
Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript:
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Vaadin example</title> 6 </head> 7 <body> 8 <!-- Use web components in your HTML like regular built-in elements. --> 9 <vaadin-grid column-reordering-allowed multi-sort> 10 <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column> 11 <vaadin-grid-sort-column width="9rem" path="firstName"></vaadin-grid-sort-column> 12 <vaadin-grid-sort-column width="9rem" path="lastName"></vaadin-grid-sort-column> 13 <vaadin-grid-column width="9rem" path="address.city"></vaadin-grid-column> 14 </vaadin-grid> 15 16 <!-- Vaadin web components use standard JavaScript modules. --> 17 <script type="module"> 18 // Importing the following modules registers <vaadin-grid> and its column 19 // elements so that you can use them in this page. 20 import '@vaadin/grid/vaadin-grid.js'; 21 import '@vaadin/grid/vaadin-grid-selection-column.js'; 22 import '@vaadin/grid/vaadin-grid-sort-column.js'; 23 24 // Use component's properties to populate data. 25 const grid = document.querySelector('vaadin-grid'); 26 fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200') 27 .then((res) => res.json()) 28 .then((json) => (grid.items = json.result)); 29 </script> 30 </body> 31</html>
Serve your HTML with a development server that supports bare module specifiers, such as @web/dev-server:
1npm i -g @web/dev-server 2web-dev-server --node-resolve --open
Components
This project contains components for Vaadin 20+. Please see individual repositories for older Vaadin versions.
Core Components
The components below are licensed under the Apache License 2.0.
Pro Components
The components below are licensed under Vaadin Commercial License and Service Terms and available as part of the Vaadin Pro Subscription.
| Component | npm version (latest) | npm version (next) | Issues |
|---|---|---|---|
<vaadin-board> | Issues | ||
<vaadin-charts> | Issues | ||
<vaadin-cookie-consent> | Issues | ||
<vaadin-crud> | Issues | ||
<vaadin-dashboard> | Issues | ||
<vaadin-grid-pro> | Issues | ||
<vaadin-map> | Issues | ||
<vaadin-rich-text-editor> | Issues |
Browser support
Desktop:
- Chrome (evergreen)
- Firefox (evergreen)
- Safari 15 or newer
- Edge (Chromium, evergreen)
Mobile:
- Chrome (evergreen) for Android (4.4 or newer)
- Safari for iOS (15 or newer)
Documentation
Check out our design system documentation.
Examples
Are you looking for an example project to get started? Visit start.vaadin.com to create a Vaadin app.
Questions
For help and support questions, please use Vaadin Forum.
Big Thanks
Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.
Contributing
Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
Development
See the Development guide for how to set up and develop this project locally.
LICENSE
For specific package(s), check the LICENSE file under the package folder.
No vulnerabilities found.
Reason
30 commit(s) and 13 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
GitHub workflow tokens follow principle of least privilege
Details
- Info: topLevel 'contents' permission set to 'read': .github/workflows/coverage.yml:10
- Info: topLevel 'contents' permission set to 'read': .github/workflows/unit-tests.yml:6
- Info: topLevel 'contents' permission set to 'read': .github/workflows/verify.yml:6
- Info: topLevel 'contents' permission set to 'read': .github/workflows/visual-tests.yml:6
- Info: no jobLevel write permissions found
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/vaadin/.github/SECURITY.md:1
- Info: Found linked content: github.com/vaadin/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/vaadin/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/vaadin/.github/SECURITY.md:1
Reason
no binaries found in the repo
Reason
SAST tool is run on all commits
Details
- Info: all commits (28) are checked with a SAST tool
Reason
Found 28/30 approved changesets -- score normalized to 9
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/coverage.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/coverage.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/coverage.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/coverage.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/unit-tests.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/unit-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/unit-tests.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/unit-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/unit-tests.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/unit-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/unit-tests.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/unit-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/unit-tests.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/unit-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/unit-tests.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/unit-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/verify.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/verify.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/verify.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/verify.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/verify.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/verify.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/visual-tests.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/visual-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/visual-tests.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/visual-tests.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/visual-tests.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/visual-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/visual-tests.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/visual-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/visual-tests.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/visual-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/visual-tests.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/visual-tests.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/visual-tests.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/visual-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/visual-tests.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/vaadin/web-components/visual-tests.yml/main?enable=pin
- Info: 0 out of 20 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
20 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Score
6.8
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to @vaadin/vaadin-themable-mixin
@vaadin/themable-element
This package provides `ThemableElement`, a version of [Vaadin.ThemableMixin](https://github.com/vaadin/vaadin-themable-mixin) re-implemented using [LitElement](https://github.com/Polymer/lit-element).
@vaadin/vaadin-element-mixin
vaadin-element-mixin
@vaadin/vaadin-list-mixin
vaadin-list-mixin
@scoped-vaadin/vaadin-themable-mixin
vaadin-themable-mixin