text-fields - npm Package Compare versions

Comparing version 3.3.3 to 3.4.0

dist/index.js

@@ -18,22 +18,45 @@
     notches = [];
+    mutationObserver;
     constructor(){
+        this.textFieldContainer = [];
+        this.floatingLabel = [];
+        this.resizeObserver = new ResizeObserver($a196c1ed25598f0e$var$TextFields.handleResize.bind(this));
+        this.mutationObserver = new MutationObserver(this.initializeElements.bind(this));
+        this.observeDOMChanges();
+    }
+    observeDOMChanges() {
+        this.mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    }
+    static handleResize(entries) {
+        entries.forEach((entry)=>{
+            const notch = entry.target.closest(".notched-outline")?.querySelector(".notched-outline__notch");
+            if (notch) $a196c1ed25598f0e$var$TextFields.setNotchWidth(notch, $a196c1ed25598f0e$var$TextFields.getNotchWidth(notch));
+        });
+    }
+    initializeElements() {
         this.textFieldContainer = Array.from(document.querySelectorAll(".text-field-container input, .text-field-container textarea"));
         this.floatingLabel = Array.from(document.querySelectorAll(".floating-label"));
-        this.resizeObserver = new ResizeObserver((entries)=>{
-            entries.forEach((entry)=>{
-                const notch = entry.target.closest(".notched-outline")?.querySelector(".notched-outline__notch");
-                if (notch) $a196c1ed25598f0e$var$TextFields.setNotchWidth(notch, $a196c1ed25598f0e$var$TextFields.getNotchWidth(notch));
-            });
-        });
+        if (this.textFieldContainer.length > 0 && this.floatingLabel.length > 0) {
+            this.setupNotches();
+            this.handleEvents();
+            this.updateInitialNotchWidths();
+        }
     }
-    notched() {
+    setupNotches() {
         this.floatingLabel.forEach((label)=>{
             const notchedOutline = label.closest(".notched-outline") ?? $a196c1ed25598f0e$var$TextFields.createNotchedOutline(label);
-            this.notches.push({
-                container: notchedOutline.parentNode,
-                notch: notchedOutline.querySelector(".notched-outline__notch")
-            });
-            const lastNotch = this.notches.at(-1).notch;
-            $a196c1ed25598f0e$var$TextFields.setNotchWidth(lastNotch, $a196c1ed25598f0e$var$TextFields.getNotchWidth(lastNotch));
-            this.resizeObserver.observe(notchedOutline.querySelector(".floating-label"));
+            if (notchedOutline) {
+                const notch = notchedOutline.querySelector(".notched-outline__notch");
+                if (notch) {
+                    this.notches.push({
+                        container: notchedOutline.parentElement,
+                        notch: notch
+                    });
+                    $a196c1ed25598f0e$var$TextFields.setNotchWidth(notch, $a196c1ed25598f0e$var$TextFields.getNotchWidth(notch));
+                    this.resizeObserver.observe(label);
+                }
+            }
         });
@@ -53,4 +76,4 @@ }
     static setNotchWidth(notch, width) {
-        const notchElement = notch;
-        notchElement.style.width = width;
+        const newNotch = notch;
+        newNotch.style.width = width;
     }
@@ -64,8 +87,6 @@ static getNotchWidth(notch) {
             const notchData = this.notches.find((data)=>data.container.contains(field));
-            if (!notchData) return;
-            this.setupObserver(field, notchData.container);
-            this.addListeners(field, notchData.container, notchData.notch, field instanceof HTMLTextAreaElement);
+            if (notchData) $a196c1ed25598f0e$var$TextFields.setupFieldEvents(field, notchData.container, notchData.notch);
         });
     }
-    initialNotchWidths() {
+    updateInitialNotchWidths() {
         this.notches.forEach(({ notch: notch })=>{
@@ -75,15 +96,4 @@ $a196c1ed25598f0e$var$TextFields.setNotchWidth(notch, $a196c1ed25598f0e$var$TextFields.getNotchWidth(notch));
     }
-    /* eslint-disable class-methods-use-this */ setupObserver(field, container) {
-        const fieldObserver = new MutationObserver(()=>{
-            $a196c1ed25598f0e$var$TextFields.updateStyles(field, container, field instanceof HTMLTextAreaElement);
-        });
-        fieldObserver.observe(field, {
-            attributes: true,
-            attributeFilter: [
-                "required",
-                "disabled"
-            ]
-        });
-    }
-    addListeners(field, container, notch, fieldType) {
+    static setupFieldEvents(field, container, notch) {
+        const fieldType = field instanceof HTMLTextAreaElement;
         const eventType = fieldType ? "input" : "change";
@@ -104,3 +114,3 @@ field.addEventListener("focus", ()=>{
     }
-    /* eslint-enable class-methods-use-this */ static updateStyles(field, container, fieldType) {
+    static updateStyles(field, container, fieldType) {
         container.classList.toggle(fieldType ? "textarea--filled" : "input--filled", field.value.trim().length > 0);
@@ -118,5 +128,8 @@ container.classList.toggle(fieldType ? "textarea--disabled" : "input--disabled", field.disabled);
     async init() {
-        this.notched();
-        this.handleEvents();
-        this.initialNotchWidths();
+        await new Promise((resolve)=>{
+            setTimeout(()=>{
+                resolve();
+            }, 0);
+        });
+        this.initializeElements();
     }
@@ -123,0 +136,0 @@ }

dist/index.module.js

@@ -6,22 +6,45 @@ class $643fcf18b2d2e76f$var$TextFields {
     notches = [];
+    mutationObserver;
     constructor(){
+        this.textFieldContainer = [];
+        this.floatingLabel = [];
+        this.resizeObserver = new ResizeObserver($643fcf18b2d2e76f$var$TextFields.handleResize.bind(this));
+        this.mutationObserver = new MutationObserver(this.initializeElements.bind(this));
+        this.observeDOMChanges();
+    }
+    observeDOMChanges() {
+        this.mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    }
+    static handleResize(entries) {
+        entries.forEach((entry)=>{
+            const notch = entry.target.closest(".notched-outline")?.querySelector(".notched-outline__notch");
+            if (notch) $643fcf18b2d2e76f$var$TextFields.setNotchWidth(notch, $643fcf18b2d2e76f$var$TextFields.getNotchWidth(notch));
+        });
+    }
+    initializeElements() {
         this.textFieldContainer = Array.from(document.querySelectorAll(".text-field-container input, .text-field-container textarea"));
         this.floatingLabel = Array.from(document.querySelectorAll(".floating-label"));
-        this.resizeObserver = new ResizeObserver((entries)=>{
-            entries.forEach((entry)=>{
-                const notch = entry.target.closest(".notched-outline")?.querySelector(".notched-outline__notch");
-                if (notch) $643fcf18b2d2e76f$var$TextFields.setNotchWidth(notch, $643fcf18b2d2e76f$var$TextFields.getNotchWidth(notch));
-            });
-        });
+        if (this.textFieldContainer.length > 0 && this.floatingLabel.length > 0) {
+            this.setupNotches();
+            this.handleEvents();
+            this.updateInitialNotchWidths();
+        }
     }
-    notched() {
+    setupNotches() {
         this.floatingLabel.forEach((label)=>{
             const notchedOutline = label.closest(".notched-outline") ?? $643fcf18b2d2e76f$var$TextFields.createNotchedOutline(label);
-            this.notches.push({
-                container: notchedOutline.parentNode,
-                notch: notchedOutline.querySelector(".notched-outline__notch")
-            });
-            const lastNotch = this.notches.at(-1).notch;
-            $643fcf18b2d2e76f$var$TextFields.setNotchWidth(lastNotch, $643fcf18b2d2e76f$var$TextFields.getNotchWidth(lastNotch));
-            this.resizeObserver.observe(notchedOutline.querySelector(".floating-label"));
+            if (notchedOutline) {
+                const notch = notchedOutline.querySelector(".notched-outline__notch");
+                if (notch) {
+                    this.notches.push({
+                        container: notchedOutline.parentElement,
+                        notch: notch
+                    });
+                    $643fcf18b2d2e76f$var$TextFields.setNotchWidth(notch, $643fcf18b2d2e76f$var$TextFields.getNotchWidth(notch));
+                    this.resizeObserver.observe(label);
+                }
+            }
         });
@@ -41,4 +64,4 @@ }
     static setNotchWidth(notch, width) {
-        const notchElement = notch;
-        notchElement.style.width = width;
+        const newNotch = notch;
+        newNotch.style.width = width;
     }
@@ -52,8 +75,6 @@ static getNotchWidth(notch) {
             const notchData = this.notches.find((data)=>data.container.contains(field));
-            if (!notchData) return;
-            this.setupObserver(field, notchData.container);
-            this.addListeners(field, notchData.container, notchData.notch, field instanceof HTMLTextAreaElement);
+            if (notchData) $643fcf18b2d2e76f$var$TextFields.setupFieldEvents(field, notchData.container, notchData.notch);
         });
     }
-    initialNotchWidths() {
+    updateInitialNotchWidths() {
         this.notches.forEach(({ notch: notch })=>{
@@ -63,15 +84,4 @@ $643fcf18b2d2e76f$var$TextFields.setNotchWidth(notch, $643fcf18b2d2e76f$var$TextFields.getNotchWidth(notch));
     }
-    /* eslint-disable class-methods-use-this */ setupObserver(field, container) {
-        const fieldObserver = new MutationObserver(()=>{
-            $643fcf18b2d2e76f$var$TextFields.updateStyles(field, container, field instanceof HTMLTextAreaElement);
-        });
-        fieldObserver.observe(field, {
-            attributes: true,
-            attributeFilter: [
-                "required",
-                "disabled"
-            ]
-        });
-    }
-    addListeners(field, container, notch, fieldType) {
+    static setupFieldEvents(field, container, notch) {
+        const fieldType = field instanceof HTMLTextAreaElement;
         const eventType = fieldType ? "input" : "change";
@@ -92,3 +102,3 @@ field.addEventListener("focus", ()=>{
     }
-    /* eslint-enable class-methods-use-this */ static updateStyles(field, container, fieldType) {
+    static updateStyles(field, container, fieldType) {
         container.classList.toggle(fieldType ? "textarea--filled" : "input--filled", field.value.trim().length > 0);
@@ -106,5 +116,8 @@ container.classList.toggle(fieldType ? "textarea--disabled" : "input--disabled", field.disabled);
     async init() {
-        this.notched();
-        this.handleEvents();
-        this.initialNotchWidths();
+        await new Promise((resolve)=>{
+            setTimeout(()=>{
+                resolve();
+            }, 0);
+        });
+        this.initializeElements();
     }
@@ -111,0 +124,0 @@ }

package.json

 {
   "name": "text-fields",
-  "version": "3.3.3",
+  "version": "3.4.0",
   "description": "TextFields is designed to create and manage text fields with advanced visuals and functionality, including dynamic notched outlines, floating labels, and adaptive text areas.",
@@ -5,0 +5,0 @@ "author": "ux-ui.pro",

src/index.ts

@@ -10,25 +10,52 @@ class TextFields {
 
+  private mutationObserver: MutationObserver;
+
   constructor() {
-    this.textFieldContainer = Array.from(document.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>('.text-field-container input, .text-field-container textarea'));
-    this.floatingLabel = Array.from(document.querySelectorAll<HTMLElement>('.floating-label'));
+    this.textFieldContainer = [];
+    this.floatingLabel = [];
+    this.resizeObserver = new ResizeObserver(TextFields.handleResize.bind(this));
+    this.mutationObserver = new MutationObserver(this.initializeElements.bind(this));
+    this.observeDOMChanges();
+  }
 
-    this.resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        const notch = entry.target.closest('.notched-outline')?.querySelector<HTMLElement>('.notched-outline__notch');
+  private observeDOMChanges() {
+    this.mutationObserver.observe(document.body, { childList: true, subtree: true });
+  }
 
-        if (notch) TextFields.setNotchWidth(notch, TextFields.getNotchWidth(notch));
-      });
+  private static handleResize(entries: ResizeObserverEntry[]) {
+    entries.forEach((entry) => {
+      const notch = entry.target.closest('.notched-outline')?.querySelector<HTMLElement>('.notched-outline__notch');
+
+      if (notch) {
+        TextFields.setNotchWidth(notch, TextFields.getNotchWidth(notch));
+      }
     });
   }
 
-  private notched() {
+  private initializeElements() {
+    this.textFieldContainer = Array.from(document.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>('.text-field-container input, .text-field-container textarea'));
+    this.floatingLabel = Array.from(document.querySelectorAll<HTMLElement>('.floating-label'));
+
+    if (this.textFieldContainer.length > 0 && this.floatingLabel.length > 0) {
+      this.setupNotches();
+      this.handleEvents();
+      this.updateInitialNotchWidths();
+    }
+  }
+
+  private setupNotches() {
     this.floatingLabel.forEach((label) => {
       const notchedOutline = label.closest('.notched-outline') ?? TextFields.createNotchedOutline(label);
 
-      this.notches.push({ container: notchedOutline.parentNode as HTMLElement, notch: notchedOutline.querySelector<HTMLElement>('.notched-outline__notch')! });
+      if (notchedOutline) {
+        const notch = notchedOutline.querySelector<HTMLElement>('.notched-outline__notch');
 
-      const lastNotch = this.notches.at(-1)!.notch;
+        if (notch) {
+          this.notches.push({ container: notchedOutline.parentElement as HTMLElement, notch });
 
-      TextFields.setNotchWidth(lastNotch, TextFields.getNotchWidth(lastNotch));
-      this.resizeObserver.observe(notchedOutline.querySelector<HTMLElement>('.floating-label')!);
+          TextFields.setNotchWidth(notch, TextFields.getNotchWidth(notch));
+
+          this.resizeObserver.observe(label);
+        }
+      }
     });
@@ -52,4 +79,5 @@ }
   private static setNotchWidth(notch: HTMLElement, width: string) {
-    const notchElement = notch;
-    notchElement.style.width = width;
+    const newNotch = notch;
+
+    newNotch.style.width = width;
   }
@@ -59,2 +87,3 @@
     const label = notch.querySelector<HTMLElement>('.floating-label');
+
     return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : 'auto';
@@ -67,10 +96,9 @@ }
 
-      if (!notchData) return;
-
-      this.setupObserver(field, notchData.container);
-      this.addListeners(field, notchData.container, notchData.notch, field instanceof HTMLTextAreaElement);
+      if (notchData) {
+        TextFields.setupFieldEvents(field, notchData.container, notchData.notch);
+      }
     });
   }
 
-  private initialNotchWidths() {
+  private updateInitialNotchWidths() {
     this.notches.forEach(({ notch }) => {
@@ -81,12 +109,4 @@ TextFields.setNotchWidth(notch, TextFields.getNotchWidth(notch));
 
-  /* eslint-disable class-methods-use-this */
-  private setupObserver(field: HTMLInputElement | HTMLTextAreaElement, container: HTMLElement) {
-    const fieldObserver = new MutationObserver(() => {
-      TextFields.updateStyles(field, container, field instanceof HTMLTextAreaElement);
-    });
-
-    fieldObserver.observe(field, { attributes: true, attributeFilter: ['required', 'disabled'] });
-  }
-
-  private addListeners(field: HTMLInputElement | HTMLTextAreaElement, container: HTMLElement, notch: HTMLElement, fieldType: boolean) {
+  private static setupFieldEvents(field: HTMLInputElement | HTMLTextAreaElement, container: HTMLElement, notch: HTMLElement) {
+    const fieldType = field instanceof HTMLTextAreaElement;
     const eventType = fieldType ? 'input' : 'change';
@@ -96,3 +116,2 @@
       container.classList.add(fieldType ? 'textarea--focused' : 'input--focused');
-
       TextFields.setNotchWidth(notch, TextFields.getNotchWidth(notch));
@@ -103,3 +122,2 @@ });
       container.classList.remove(fieldType ? 'textarea--focused' : 'input--focused');
-
       TextFields.setNotchWidth(notch, field.value.trim() ? TextFields.getNotchWidth(notch) : 'auto');
@@ -110,4 +128,5 @@ });
       TextFields.updateStyles(field, container, fieldType);
-
-      if (fieldType) TextFields.resizeTextarea(field as HTMLTextAreaElement, container);
+      if (fieldType) {
+        TextFields.resizeTextarea(field as HTMLTextAreaElement, container);
+      }
     });
@@ -117,3 +136,2 @@
   }
-  /* eslint-enable class-methods-use-this */
 
@@ -129,2 +147,3 @@ private static updateStyles(field: HTMLInputElement | HTMLTextAreaElement, container: HTMLElement, fieldType: boolean) {
       const newField = field;
+
       newField.style.height = 'auto';
@@ -136,5 +155,9 @@ newField.style.height = `${field.scrollHeight}px`;
   public async init() {
-    this.notched();
-    this.handleEvents();
-    this.initialNotchWidths();
+    await new Promise<void>((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 0);
+    });
+
+    this.initializeElements();
   }
@@ -141,0 +164,0 @@ }

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

90564

increased by2.47%

Lines of code

450

increased by11.39%

No dependency changes