@vaadin/vaadin-form-layout - npm Package Compare versions

Comparing version 2.1.3 to 2.1.4

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-form-layout",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "main": "vaadin-form-layout.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-form-layout.js

@@ -155,10 +155,3 @@ /**
       #layout ::slotted(br) {
-        /*
-          Line break element wraps the following item on a new line. Makes
-          a block with zero height, stretched to fill all the available width
-          of layout, so that the next sibling item is wrapped for sure.
-        */
-        display: block;
-        content: '';
-        flex: 1 1 100%;
+        display: none;
       }
@@ -177,3 +170,3 @@ </style>
   static get version() {
-    return '2.1.3';
+    return '2.1.4';
   }
@@ -475,25 +468,22 @@
     let col = 0;
-    Array.from(this.children).forEach((child) => {
-      if (getComputedStyle(child).display !== 'none') {
+    Array.from(this.children)
+      .filter(child => child.localName === 'br' || getComputedStyle(child).display !== 'none')
+      .forEach((child, index, children) => {
+        if (child.localName === 'br') {
+          // Reset column count on line break
+          col = 0;
+          return;
+        }
+
         let colspan;
+        colspan = this._naturalNumberOrOne(parseFloat(child.getAttribute('colspan')));
 
-        if (child.localName === 'br') {
-          colspan = this._columnCount - col;
-        } else {
-          colspan = this._naturalNumberOrOne(parseFloat(child.getAttribute('colspan')));
+        // Never span further than the number of columns
+        colspan = Math.min(colspan, this._columnCount);
 
-          // Never span further than the number of columns
-          colspan = Math.min(colspan, this._columnCount);
-        }
-
         const childRatio = colspan / this._columnCount;
 
-        if (child.localName === 'br') {
-          // IE and Edge only accept fixed padding
-          child.style.paddingRight = `calc(${childRatio * containerWidth}px - ${1 - childRatio} * ${columnSpacing})`;
-        } else {
-          // Note: using 99.9% for 100% fixes rounding errors in MS Edge
-          // (< v16), otherwise the items might wrap, resizing is wobbly.
-          child.style.width = `calc(${childRatio * 99.9}% - ${1 - childRatio} * ${columnSpacing})`;
-        }
+        // Note: using 99.9% for 100% fixes rounding errors in MS Edge
+        // (< v16), otherwise the items might wrap, resizing is wobbly.
+        child.style.width = `calc(${childRatio * 99.9}% - ${1 - childRatio} * ${columnSpacing})`;
 
@@ -505,2 +495,3 @@ if (col + colspan > this._columnCount) {
 
+
         // At the start edge
@@ -513,5 +504,11 @@ if (col === 0) {
 
+        const nextIndex = index + 1;
+        const nextLineBreak = nextIndex < children.length && children[nextIndex].localName === 'br';
+
         // At the end edge
         if (col + colspan === this._columnCount) {
           child.style.setProperty(marginEndProp, '0px');
+        } else if (nextLineBreak) {
+          const colspanRatio = (this._columnCount - col - colspan) / this._columnCount;
+          child.style.setProperty(marginEndProp, `calc(${colspanRatio * containerWidth}px + ${colspanRatio} * ${columnSpacing})`);
         } else {
@@ -531,4 +528,3 @@ child.style.removeProperty(marginEndProp);
         }
-      }
-    });
+      });
   }
@@ -535,0 +531,0 @@ }

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

43217

decreased by-0.16%

Lines of code

719

decreased by-0.83%

No dependency changes