@vaadin/vaadin-checkbox - npm Package Compare versions

Comparing version 2.2.1 to 2.2.2

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-checkbox",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "main": "vaadin-checkbox.js",
@@ -21,2 +21,7 @@ "author": "Vaadin Ltd",
   },
+  "files": [
+    "vaadin-*.js",
+    "src",
+    "theme"
+  ],
   "resolutions": {
@@ -32,4 +37,4 @@ "inherits": "2.0.3",
     "@vaadin/vaadin-themable-mixin": "^1.2.1",
-    "@vaadin/vaadin-lumo-styles": "^1.1.0-beta1",
-    "@vaadin/vaadin-material-styles": "^1.1.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "^1.2.0",
+    "@vaadin/vaadin-material-styles": "^1.2.0",
     "@vaadin/vaadin-element-mixin": "^2.0.0"
@@ -36,0 +41,0 @@ },

README.md

@@ -120,2 +120,7 @@ [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-checkbox)](https://www.npmjs.com/package/@vaadin/vaadin-checkbox)
 
+## Big Thanks
+
+Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
+
+
 ## Contributing
@@ -122,0 +127,0 @@

src/vaadin-checkbox-group.js

@@ -39,2 +39,3 @@ /**
  * `has-label` | Set when the element has a label | :host
+ * `has-value` | Set when the element has a value | :host
  * `required` | Set when the element is required | :host
@@ -167,2 +168,9 @@ * `invalid` | Set when the element is invalid | :host
 
+    this.addEventListener('focusout', e => {
+      // validate when stepping out of the checkbox group
+      if (!this._checkboxes.some(checkbox => e.relatedTarget === checkbox || checkbox.shadowRoot.contains(e.relatedTarget))) {
+        this.validate();
+      }
+    });
+
     const checkedChangedListener = (e) => {
@@ -254,2 +262,9 @@ this._changeSelectedCheckbox(e.target);
     }
+
+    if (value.length) {
+      this.setAttribute('has-value', '');
+    } else {
+      this.removeAttribute('has-value');
+    }
+
     this._oldValue = value;
@@ -256,0 +271,0 @@ // set a flag to avoid updating loop

src/vaadin-checkbox.js

@@ -109,3 +109,3 @@ /**
   static get version() {
-    return '2.2.1';
+    return '2.2.2';
   }
@@ -112,0 +112,0 @@

theme/lumo/vaadin-checkbox-group-styles.js

@@ -0,1 +1,2 @@
+import '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
 const $_documentContainer = document.createElement('template');
@@ -5,3 +6,3 @@
   <template>
-    <style>
+    <style include="lumo-required-field">
       :host {
@@ -24,28 +25,2 @@ color: var(--lumo-body-text-color);
 
-      [part="label"] {
-        display: block;
-      }
-
-      /* Used for required and invalid indicators */
-      [part="label"]::after {
-        content: var(--lumo-required-field-indicator, "•");
-        transition: opacity 0.2s;
-        opacity: 0;
-        color: var(--lumo-primary-text-color);
-        position: absolute;
-        right: 0;
-        width: 1em;
-        text-align: center;
-      }
-
-      [part="error-message"] {
-        max-height: 0;
-        overflow: hidden;
-        font-size: var(--lumo-font-size-xs);
-        line-height: var(--lumo-line-height-xs);
-        color: var(--lumo-error-text-color);
-        will-change: max-height;
-        transition: 0.4s max-height;
-      }
-
       :host([theme~="vertical"]) [part="group-field"] {
@@ -56,37 +31,5 @@ display: flex;
 
-      :host([has-label])::before {
-        margin-top: calc(var(--lumo-font-size-s) * 1.5);
-      }
-
-      :host([has-label]) {
-        padding-top: var(--lumo-space-m);
-      }
-
       [part="label"] {
-        align-self: flex-start;
-        color: var(--lumo-secondary-text-color);
-        font-weight: 500;
-        font-size: var(--lumo-font-size-s);
-        margin-left: calc(var(--lumo-border-radius) / 4);
-        transition: color 0.2s;
-        line-height: 1;
         padding-bottom: 0.7em;
-        padding-right: 1em;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        position: relative;
-        max-width: 100%;
-        box-sizing: border-box;
       }
-
-      :host([invalid]) [part="label"]::after {
-        color: var(--lumo-error-text-color);
-        opacity: 1;
-      }
-
-      [part="error-message"][aria-hidden="false"] {
-        color: var(--lumo-error-text-color);
-        max-height: 5em;
-      }
     </style>
@@ -93,0 +36,0 @@ </template>

theme/material/vaadin-checkbox-group-styles.js

@@ -0,1 +1,2 @@
+import '@vaadin/vaadin-material-styles/mixins/required-field.js';
 const $_documentContainer = document.createElement('template');
@@ -5,3 +6,3 @@
   <template>
-    <style>
+    <style include="material-required-field">
       :host {
@@ -19,3 +20,2 @@ display: inline-flex;
         -moz-osx-font-smoothing: grayscale;
-        contain: content;
       }
@@ -49,45 +49,2 @@
       }
-
-      [part="label"] {
-        display: block;
-        position: absolute;
-        top: 8px;
-        font-size: 1em;
-        line-height: 1;
-        height: 20px;
-        margin-bottom: -4px;
-        white-space: nowrap;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        color: var(--material-secondary-text-color);
-        transform-origin: 0 75%;
-        transform: scale(0.75);
-      }
-
-      :host([invalid]) [part="label"] {
-        color: var(--material-error-text-color);
-      }
-
-      [part="error-message"] {
-        font-size: .75em;
-        line-height: 1;
-        color: var(--material-error-text-color);
-        margin-top: 6px;
-      }
-
-      :host(:not([invalid])) [part="error-message"] {
-        margin-top: 0;
-        max-height: 0;
-        overflow: hidden;
-      }
-
-      :host([invalid]) [part="error-message"] {
-        animation: reveal 0.2s;
-      }
-
-      @keyframes reveal {
-        0% {
-          opacity: 0;
-        }
-      }
     </style>
@@ -94,0 +51,0 @@ </template>

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

135

increased by3.85%

Worsened metrics

Total package byte prevSize

44147

decreased by-40.09%

Number of package files

15

decreased by-25%

Lines of code

865

decreased by-8.47%

Dependency changes

• Updated@vaadin/vaadin-lumo-styles@^1.2.0

• Updated@vaadin/vaadin-material-styles@^1.2.0