@umbraco-ui/uui-base - npm Package Compare versions

Comparing version 0.0.17 to 0.1.0

lib/mixins/ActiveMixin.d.ts

@@ -6,3 +6,9 @@ import { LitElement } from 'lit';
 }
+/**
+ * This mixin provides functionality to other components to be active using a common `active` property.
+ *
+ * @param {Object} superClass - superclass to be extended.
+ * @mixin
+ */
 export declare const ActiveMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ActiveMixinInterface> & T;
 export {};

lib/mixins/FormControlMixin.d.ts

 import { LitElement } from 'lit';
 declare type Constructor<T = {}> = new (...args: any[]) => T;
+declare type NativeFormControlElement = HTMLInputElement;
 export declare abstract class FormControlMixinInterface extends LitElement {
@@ -9,7 +10,10 @@ formAssociated: boolean;
     formResetCallback(): void;
-    checkValidity: () => boolean;
+    checkValidity(): boolean;
     get validationMessage(): string;
+    setCustomValidity(error: string): void;
     protected _value: FormDataEntryValue;
     protected _internals: any;
     protected abstract getFormElement(): HTMLElement | undefined;
+    protected addValidator: (flagKey: FlagTypes, getMessageMethod: () => String, checkMethod: () => boolean) => void;
+    protected addFormControlElement(element: NativeFormControlElement): void;
     pristine: boolean;
@@ -21,2 +25,3 @@ required: boolean;
 }
+declare type FlagTypes = 'badInput' | 'customError' | 'patternMismatch' | 'rangeOverflow' | 'rangeUnderflow' | 'stepMismatch' | 'tooLong' | 'tooShort' | 'typeMismatch' | 'valueMissing' | 'badInput' | 'valid';
 /**
@@ -23,0 +28,0 @@ * The mixin allows a custom element to participate in HTML forms.

lib/mixins/index.js

@@ -266,2 +266,3 @@ import { property, state } from 'lit/decorators.js';
       this._validators = [];
+      this._formCtrlElements = [];
       this._onFormSubmit = () => {
@@ -301,15 +302,42 @@ this.pristine = false;
     addValidator(flagKey, getMessageMethod, checkMethod) {
-      this._validators.push({
+      const obj = {
         flagKey,
-        getMessage: getMessageMethod,
+        getMessageMethod,
         checkMethod
-      });
+      };
+      this._validators.push(obj);
+      return obj;
     }
+    removeValidator(validator) {
+      const index = this._validators.indexOf(validator);
+      if (index !== -1) {
+        this._validators.splice(index, 1);
+      }
+    }
+    addFormControlElement(element) {
+      this._formCtrlElements.push(element);
+    }
+    setCustomValidity(message) {
+      if (this._customValidityObject) {
+        this.removeValidator(this._customValidityObject);
+      }
+      if (message != null && message !== "") {
+        this._customValidityObject = this.addValidator("customError", () => message, () => true);
+      }
+      this._runValidators();
+    }
     _runValidators() {
+      this._validityState = {};
+      this._formCtrlElements.forEach((formCtrlEl) => {
+        for (const key in formCtrlEl.validity) {
+          if (key !== "valid" && formCtrlEl.validity[key]) {
+            this._validityState[key] = true;
+            this._internals.setValidity(this._validityState, formCtrlEl.validationMessage, formCtrlEl);
+          }
+        }
+      });
       this._validators.forEach((validator) => {
         if (validator.checkMethod()) {
           this._validityState[validator.flagKey] = true;
-          this._internals.setValidity(this._validityState, validator.getMessage(), this.getFormElement());
-        } else {
-          this._validityState[validator.flagKey] = false;
+          this._internals.setValidity(this._validityState, validator.getMessageMethod(), this.getFormElement());
         }
@@ -333,3 +361,3 @@ });
       if (this._form) {
-        if (this._form.hasAttribute("invalid-submit")) {
+        if (this._form.hasAttribute("submit-invalid")) {
           this.pristine = false;
@@ -346,2 +374,7 @@ }
       var _a;
+      for (const key in this._formCtrlElements) {
+        if (this._formCtrlElements[key].checkValidity() === false) {
+          return false;
+        }
+      }
       return (_a = this._internals) == null ? void 0 : _a.checkValidity();
@@ -348,0 +381,0 @@ }

lib/registration/index.js

@@ -9,5 +9,3 @@ function defineElement(name, options) {
     const existingElement = window.customElements.get(name);
-    if (existingElement) {
-      console.warn(`${name} is already defined`, existingElement);
-    } else {
+    if (!existingElement) {
       window.customElements.define(name, constructor, options);
@@ -14,0 +12,0 @@ }

package.json

 {
   "name": "@umbraco-ui/uui-base",
-  "version": "0.0.17",
+  "version": "0.1.0",
   "license": "MIT",
@@ -37,3 +37,3 @@ "keywords": [
   "homepage": "https://uui.umbraco.com/?path=/story/uui-base",
-  "gitHead": "3b7c6cf892e89054b2980b19d8c2f8bead2752e8"
+  "gitHead": "9ed7860ce865d310b85bd1718f37b59db873aefd"
 }

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

30569

increased by5.99%

Lines of code

768

increased by5.79%

No dependency changes