@vaadin/checkbox
Advanced tools
@vaadin/checkbox - npm Package Compare versions
Comparing version
| { | ||
| "name": "@vaadin/checkbox", | ||
| "version": "24.8.0-alpha9", | ||
| "version": "25.0.0-alpha1", | ||
| "publishConfig": { | ||
@@ -34,19 +34,16 @@ "access": "public" | ||
| "web-components", | ||
| "web-component", | ||
| "polymer" | ||
| "web-component" | ||
| ], | ||
| "dependencies": { | ||
| "@open-wc/dedupe-mixin": "^1.3.0", | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/a11y-base": "24.8.0-alpha9", | ||
| "@vaadin/component-base": "24.8.0-alpha9", | ||
| "@vaadin/field-base": "24.8.0-alpha9", | ||
| "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9", | ||
| "@vaadin/vaadin-material-styles": "24.8.0-alpha9", | ||
| "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9", | ||
| "@vaadin/a11y-base": "25.0.0-alpha1", | ||
| "@vaadin/component-base": "25.0.0-alpha1", | ||
| "@vaadin/field-base": "25.0.0-alpha1", | ||
| "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1", | ||
| "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1", | ||
| "lit": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@vaadin/chai-plugins": "24.8.0-alpha9", | ||
| "@vaadin/test-runner-commands": "24.8.0-alpha9", | ||
| "@vaadin/chai-plugins": "25.0.0-alpha1", | ||
| "@vaadin/test-runner-commands": "25.0.0-alpha1", | ||
| "@vaadin/testing-helpers": "^1.1.0", | ||
@@ -59,3 +56,3 @@ "sinon": "^18.0.0" | ||
| ], | ||
| "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770" | ||
| "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49" | ||
| } |
@@ -31,25 +31,2 @@ # @vaadin/checkbox | ||
| ## Themes | ||
| Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material. | ||
| The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/checkbox/vaadin-checkbox.js) of the package uses the Lumo theme. | ||
| To use the Material theme, import the component from the `theme/material` folder: | ||
| ```js | ||
| import '@vaadin/checkbox/theme/material/vaadin-checkbox.js'; | ||
| ``` | ||
| You can also import the Lumo version of the component explicitly: | ||
| ```js | ||
| import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js'; | ||
| ``` | ||
| Finally, you can import the un-themed component from the `src` folder to get a minimal starting point: | ||
| ```js | ||
| import '@vaadin/checkbox/src/vaadin-checkbox.js'; | ||
| ``` | ||
| ## Contributing | ||
@@ -56,0 +33,0 @@ |
@@ -12,3 +12,2 @@ /** | ||
| import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js'; | ||
| import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js'; | ||
| import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js'; | ||
@@ -30,3 +29,2 @@ import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js'; | ||
| Constructor<CheckedMixinClass> & | ||
| Constructor<ControllerMixinClass> & | ||
| Constructor<DelegateFocusMixinClass> & | ||
@@ -33,0 +31,0 @@ Constructor<DelegateStateMixinClass> & |
@@ -6,12 +6,11 @@ /** | ||
| */ | ||
| import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
| import { html, LitElement } from 'lit'; | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; | ||
| import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; | ||
| import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js'; | ||
| import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { CheckboxMixin } from './vaadin-checkbox-mixin.js'; | ||
| import { checkboxStyles } from './vaadin-checkbox-styles.js'; | ||
| registerStyles('vaadin-checkbox', checkboxStyles, { moduleId: 'vaadin-checkbox-styles' }); | ||
| /** | ||
@@ -64,3 +63,3 @@ * `<vaadin-checkbox>` is an input field representing a binary choice. | ||
| */ | ||
| export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolymerElement))) { | ||
| export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) { | ||
| static get is() { | ||
@@ -70,3 +69,8 @@ return 'vaadin-checkbox'; | ||
| static get template() { | ||
| static get styles() { | ||
| return checkboxStyles; | ||
| } | ||
| /** @protected */ | ||
| render() { | ||
| return html` | ||
@@ -78,3 +82,3 @@ <div class="vaadin-checkbox-container"> | ||
| <slot name="label"></slot> | ||
| <div part="required-indicator" on-click="_onRequiredIndicatorClick"></div> | ||
| <div part="required-indicator" @click="${this._onRequiredIndicatorClick}"></div> | ||
| </div> | ||
@@ -81,0 +85,0 @@ <div part="helper-text"> |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/checkbox", | ||
| "version": "24.8.0-alpha9", | ||
| "version": "25.0.0-alpha1", | ||
| "description-markup": "markdown", | ||
@@ -6,0 +6,0 @@ "contributions": { |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/checkbox", | ||
| "version": "24.8.0-alpha9", | ||
| "version": "25.0.0-alpha1", | ||
| "description-markup": "markdown", | ||
@@ -6,0 +6,0 @@ "framework": "lit", |
Improved metrics
- Dependency count
7
-22.22%Worsened metrics
- Total package byte prevSize
66865
-11.67%- Number of package files
17
-41.38%- Lines of code
1427
-14.35%- Number of lines in readme file
41
-35.94%Dependency changes
+ Added
@vaadin/a11y-base@25.0.0-alpha1(transitive)+ Added
@vaadin/component-base@25.0.0-alpha1(transitive)+ Added
@vaadin/field-base@25.0.0-alpha1(transitive)+ Added
@vaadin/icon@25.0.0-alpha1(transitive)+ Added
@vaadin/vaadin-lumo-styles@25.0.0-alpha1(transitive)+ Added
@vaadin/vaadin-themable-mixin@25.0.0-alpha1(transitive)+ Added
style-observer@0.0.8(transitive)- Removed
@polymer/polymer@^3.0.0- Removed
@polymer/polymer@3.5.2(transitive)- Removed
@vaadin/a11y-base@24.8.0-alpha9(transitive)- Removed
@vaadin/component-base@24.8.0-alpha9(transitive)- Removed
@vaadin/field-base@24.8.0-alpha9(transitive)- Removed
@vaadin/icon@24.8.0-alpha9(transitive)- Removed
@vaadin/vaadin-lumo-styles@24.8.0-alpha9(transitive)- Removed
@vaadin/vaadin-material-styles@24.8.0-alpha9(transitive)- Removed
@vaadin/vaadin-themable-mixin@24.8.0-alpha9(transitive)- Removed
@webcomponents/shadycss@1.11.2(transitive)