@vaadin/form-layout - npm Package Compare versions

Comparing version 22.0.0-rc1 to 23.0.0-alpha1

package.json

 {
   "name": "@vaadin/form-layout",
-  "version": "22.0.0-rc1",
+  "version": "23.0.0-alpha1",
   "publishConfig": {
@@ -37,6 +37,6 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-rc1",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-rc1",
-    "@vaadin/vaadin-material-styles": "22.0.0-rc1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-rc1"
+    "@vaadin/component-base": "23.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha1"
   },
@@ -46,6 +46,6 @@ "devDependencies": {
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "22.0.0-rc1",
+    "@vaadin/text-field": "23.0.0-alpha1",
     "sinon": "^9.2.1"
   },
-  "gitHead": "7b6f44bcd2c0fd415028ace666feeb0fedb1d540"
+  "gitHead": "fbcb07328fdf88260e3b461088d207426b21c710"
 }

src/vaadin-form-item.js

@@ -150,6 +150,7 @@ /**
         <slot name="label" id="labelSlot"></slot>
+        <span part="required-indicator" aria-hidden="true"></span>
       </div>
       <div id="spacing"></div>
       <div id="content">
-        <slot id="contentSlot"></slot>
+        <slot id="contentSlot" on-slotchange="__onContentSlotChange"></slot>
       </div>
@@ -163,8 +164,11 @@ `;
 
+  constructor() {
+    super();
+    this.__updateInvalidState = this.__updateInvalidState.bind(this);
+    this.__contentFieldObserver = new MutationObserver(() => this.__updateRequiredState(this.__contentField.required));
+  }
+
   /** @private */
   _onLabelClick() {
-    const firstContentElementChild = Array.prototype.find.call(
-      this.$.contentSlot.assignedNodes(),
-      (e) => e.nodeType === Node.ELEMENT_NODE
-    );
+    const firstContentElementChild = this.$.contentSlot.assignedElements()[0];
     if (firstContentElementChild) {
@@ -175,2 +179,47 @@ firstContentElementChild.focus();
   }
+
+  /** @private */
+  __getValidateFunction(field) {
+    return field.validate || field.checkValidity;
+  }
+
+  /** @private */
+  __onContentSlotChange() {
+    if (this.__contentField) {
+      // Discard the old field
+      this.__updateRequiredState(false);
+      this.__contentFieldObserver.disconnect();
+      delete this.__contentField;
+    }
+
+    const contentFields = this.$.contentSlot.assignedElements().filter((node) => !!this.__getValidateFunction(node));
+    if (contentFields.length === 1) {
+      // There's only one child field
+      this.__contentField = contentFields[0];
+      this.__updateRequiredState(this.__contentField.required);
+      this.__contentFieldObserver.observe(this.__contentField, { attributes: true, attributeFilter: ['required'] });
+    }
+  }
+
+  /** @private */
+  __updateRequiredState(required) {
+    if (required) {
+      this.setAttribute('required', '');
+      this.__contentField.addEventListener('blur', this.__updateInvalidState);
+      this.__contentField.addEventListener('change', this.__updateInvalidState);
+    } else {
+      this.removeAttribute('invalid');
+      this.removeAttribute('required');
+      this.__contentField.removeEventListener('blur', this.__updateInvalidState);
+      this.__contentField.removeEventListener('change', this.__updateInvalidState);
+    }
+  }
+
+  /** @private */
+  __updateInvalidState() {
+    this.toggleAttribute(
+      'invalid',
+      this.__getValidateFunction(this.__contentField).call(this.__contentField) === false
+    );
+  }
 }
@@ -177,0 +226,0 @@

theme/lumo/vaadin-form-item-styles.js

@@ -26,4 +26,22 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     }
+
+    [part='required-indicator']::after {
+      content: var(--lumo-required-field-indicator, '•');
+      transition: opacity 0.2s;
+      opacity: 0;
+      color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+      position: relative;
+      width: 1em;
+      text-align: center;
+    }
+
+    :host([required]) [part='required-indicator']::after {
+      opacity: 1;
+    }
+
+    :host([invalid]) [part='required-indicator']::after {
+      color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    }
   `,
   { moduleId: 'lumo-form-item' }
 );

theme/material/vaadin-form-item-styles.js

@@ -17,4 +17,13 @@ import '@vaadin/vaadin-material-styles/color.js';
     }
+
+    :host([required]) [part='required-indicator']::after {
+      content: ' *';
+      color: inherit;
+    }
+
+    :host([invalid]) [part='label'] {
+      color: var(--material-error-text-color);
+    }
   `,
   { moduleId: 'material-form-item' }
 );

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

Total package byte prevSize

49272

increased by5.42%

Lines of code

1022

increased by6.79%

Dependency changes

• + Added@vaadin/component-base@23.0.0-alpha1(transitive)

• + Added@vaadin/icon@23.0.0-alpha1(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.0.0-alpha1(transitive)

• + Added@vaadin/vaadin-material-styles@23.0.0-alpha1(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.0.0-alpha1(transitive)

• - Removed@vaadin/component-base@22.0.0-rc1(transitive)

• - Removed@vaadin/icon@22.0.0-rc1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@22.0.0-rc1(transitive)

• - Removed@vaadin/vaadin-material-styles@22.0.0-rc1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@22.0.0-rc1(transitive)

• Updated@vaadin/component-base@23.0.0-alpha1

• Updated@vaadin/vaadin-lumo-styles@23.0.0-alpha1

• Updated@vaadin/vaadin-material-styles@23.0.0-alpha1

• Updated@vaadin/vaadin-themable-mixin@23.0.0-alpha1