@vaadin/custom-field
Advanced tools
@vaadin/custom-field - npm Package Compare versions
Comparing version 22.0.0-beta1 to 22.0.0-beta2
| { | ||
| "name": "@vaadin/custom-field", | ||
| "version": "22.0.0-beta1", | ||
| "version": "22.0.0-beta2", | ||
| "publishConfig": { | ||
@@ -35,26 +35,26 @@ "access": "public" | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/component-base": "22.0.0-beta1", | ||
| "@vaadin/field-base": "22.0.0-beta1", | ||
| "@vaadin/vaadin-lumo-styles": "22.0.0-beta1", | ||
| "@vaadin/vaadin-material-styles": "22.0.0-beta1", | ||
| "@vaadin/vaadin-themable-mixin": "22.0.0-beta1" | ||
| "@vaadin/component-base": "22.0.0-beta2", | ||
| "@vaadin/field-base": "22.0.0-beta2", | ||
| "@vaadin/vaadin-lumo-styles": "22.0.0-beta2", | ||
| "@vaadin/vaadin-material-styles": "22.0.0-beta2", | ||
| "@vaadin/vaadin-themable-mixin": "22.0.0-beta2" | ||
| }, | ||
| "devDependencies": { | ||
| "@esm-bundle/chai": "^4.3.4", | ||
| "@vaadin/combo-box": "22.0.0-beta1", | ||
| "@vaadin/date-picker": "22.0.0-beta1", | ||
| "@vaadin/email-field": "22.0.0-beta1", | ||
| "@vaadin/form-layout": "22.0.0-beta1", | ||
| "@vaadin/list-box": "22.0.0-beta1", | ||
| "@vaadin/number-field": "22.0.0-beta1", | ||
| "@vaadin/password-field": "22.0.0-beta1", | ||
| "@vaadin/polymer-legacy-adapter": "22.0.0-beta1", | ||
| "@vaadin/select": "22.0.0-beta1", | ||
| "@vaadin/combo-box": "22.0.0-beta2", | ||
| "@vaadin/date-picker": "22.0.0-beta2", | ||
| "@vaadin/email-field": "22.0.0-beta2", | ||
| "@vaadin/form-layout": "22.0.0-beta2", | ||
| "@vaadin/list-box": "22.0.0-beta2", | ||
| "@vaadin/number-field": "22.0.0-beta2", | ||
| "@vaadin/password-field": "22.0.0-beta2", | ||
| "@vaadin/polymer-legacy-adapter": "22.0.0-beta2", | ||
| "@vaadin/select": "22.0.0-beta2", | ||
| "@vaadin/testing-helpers": "^0.3.0", | ||
| "@vaadin/text-area": "22.0.0-beta1", | ||
| "@vaadin/text-field": "22.0.0-beta1", | ||
| "@vaadin/time-picker": "22.0.0-beta1", | ||
| "@vaadin/text-area": "22.0.0-beta2", | ||
| "@vaadin/text-field": "22.0.0-beta2", | ||
| "@vaadin/time-picker": "22.0.0-beta2", | ||
| "sinon": "^9.2.1" | ||
| }, | ||
| "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e" | ||
| "gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4" | ||
| } |
| # @vaadin/custom-field | ||
| > ⚠️ Work in progress, please do not use this component yet. | ||
| A web component for wrapping multiple components as a single field. | ||
| The new version of `vaadin-custom-field` component. | ||
| [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/custom-field) | ||
| [](https://www.npmjs.com/package/@vaadin/custom-field) | ||
| [](https://discord.gg/PHmkCKC) | ||
| ```html | ||
| <vaadin-custom-field label="Enrollment period" helper-text="Cannot be longer than 30 days" required> | ||
| <vaadin-date-picker id="start" placeholder="Start date"></vaadin-date-picker> | ||
| – | ||
| <vaadin-date-picker id="end" placeholder="End date"></vaadin-date-picker> | ||
| </vaadin-custom-field> | ||
| ``` | ||
| [<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/custom-field/screenshot.png" width="401" alt="Screenshot of vaadin-custom-field">](https://vaadin.com/docs/latest/ds/components/custom-field) | ||
| ## Installation | ||
| Install the component: | ||
| ```sh | ||
| npm i @vaadin/custom-field | ||
| ``` | ||
| Once installed, import the component in your application: | ||
| ```js | ||
| import '@vaadin/custom-field'; | ||
| ``` | ||
| ## Themes | ||
| Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material. | ||
| The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/custom-field/vaadin-custom-field.js) of the package uses the Lumo theme. | ||
| To use the Material theme, import the component from the `theme/material` folder: | ||
| ```js | ||
| import '@vaadin/custom-field/theme/material/vaadin-custom-field.js'; | ||
| ``` | ||
| You can also import the Lumo version of the component explicitly: | ||
| ```js | ||
| import '@vaadin/custom-field/theme/lumo/vaadin-custom-field.js'; | ||
| ``` | ||
| Finally, you can import the un-themed component from the `src` folder to get a minimal starting point: | ||
| ```js | ||
| import '@vaadin/custom-field/src/vaadin-custom-field.js'; | ||
| ``` | ||
| ## Contributing | ||
| Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components. | ||
| ## License | ||
| Apache License 2.0 | ||
| Vaadin collects usage statistics at development time to improve this product. | ||
| For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics. |
@@ -6,4 +6,4 @@ /** | ||
| */ | ||
| import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; | ||
| import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js'; | ||
| import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
| import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; | ||
@@ -10,0 +10,0 @@ import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js'; |
@@ -6,3 +6,2 @@ /** | ||
| */ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-lumo-styles/color.js'; | ||
@@ -14,2 +13,3 @@ import '@vaadin/vaadin-lumo-styles/sizing.js'; | ||
| import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js'; | ||
| import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
@@ -16,0 +16,0 @@ const customField = css` |
@@ -6,3 +6,2 @@ /** | ||
| */ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-material-styles/color.js'; | ||
@@ -12,2 +11,3 @@ import '@vaadin/vaadin-material-styles/typography.js'; | ||
| import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js'; | ||
| import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
@@ -14,0 +14,0 @@ const customField = css` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.28%
37233
- Number of lines in readme file
- increased by1016.67%
67
Dependency changes
+ Added@open-wc/dedupe-mixin@1.4.0(transitive)
+ Added@vaadin/component-base@22.0.0-beta2(transitive)
+ Added@vaadin/field-base@22.0.0-beta2(transitive)
+ Added@vaadin/icon@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-lumo-styles@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-material-styles@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-themable-mixin@22.0.0-beta2(transitive)
- Removed@vaadin/component-base@22.0.0-beta1(transitive)
- Removed@vaadin/field-base@22.0.0-beta1(transitive)
- Removed@vaadin/icon@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-lumo-styles@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-material-styles@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-themable-mixin@22.0.0-beta1(transitive)