text-fields - npm Package Compare versions

Comparing version 3.3.0 to 3.3.1

dist/index.js

@@ -24,3 +24,3 @@
                 const notch = entry.target.closest(".notched-outline")?.querySelector(".notched-outline__notch");
-                if (notch) this.setNotchWidth(notch, this.getNotchWidth(notch));
+                if (notch) $a196c1ed25598f0e$var$TextFields.setNotchWidth(notch, $a196c1ed25598f0e$var$TextFields.getNotchWidth(notch));
             });
@@ -31,3 +31,3 @@ });
         this.floatingLabel.forEach((label)=>{
-            const notchedOutline = label.closest(".notched-outline") ?? this.createNotchedOutline(label);
+            const notchedOutline = label.closest(".notched-outline") ?? $a196c1ed25598f0e$var$TextFields.createNotchedOutline(label);
             this.notches.push({
@@ -38,7 +38,7 @@ container: notchedOutline.parentNode,
             const lastNotch = this.notches.at(-1).notch;
-            this.setNotchWidth(lastNotch, this.getNotchWidth(lastNotch));
+            $a196c1ed25598f0e$var$TextFields.setNotchWidth(lastNotch, $a196c1ed25598f0e$var$TextFields.getNotchWidth(lastNotch));
             this.resizeObserver.observe(notchedOutline.querySelector(".floating-label"));
         });
     }
-    createNotchedOutline(label) {
+    static createNotchedOutline(label) {
         const notchedOutline = document.createElement("div");
@@ -54,9 +54,10 @@ notchedOutline.classList.add("notched-outline");
     }
-    setNotchWidth = (notch, width)=>{
-        notch.style.width = width;
-    };
-    getNotchWidth = (notch)=>{
+    static setNotchWidth(notch, width) {
+        const notchElement = notch; // Используем временную переменную
+        notchElement.style.width = width;
+    }
+    static getNotchWidth(notch) {
         const label = notch.querySelector(".floating-label");
         return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : "auto";
-    };
+    }
     handleEvents() {
@@ -72,8 +73,8 @@ this.textFieldContainer.forEach((field)=>{
         this.notches.forEach(({ notch: notch })=>{
-            this.setNotchWidth(notch, this.getNotchWidth(notch));
+            $a196c1ed25598f0e$var$TextFields.setNotchWidth(notch, $a196c1ed25598f0e$var$TextFields.getNotchWidth(notch));
         });
     }
-    setupObserver(field, container) {
+    /* eslint-disable class-methods-use-this */ setupObserver(field, container) {
         const fieldObserver = new MutationObserver(()=>{
-            this.updateStyles(field, container, field instanceof HTMLTextAreaElement);
+            $a196c1ed25598f0e$var$TextFields.updateStyles(field, container, field instanceof HTMLTextAreaElement);
         });
@@ -92,15 +93,15 @@ fieldObserver.observe(field, {
             container.classList.add(fieldType ? "textarea--focused" : "input--focused");
-            this.setNotchWidth(notch, this.getNotchWidth(notch));
+            $a196c1ed25598f0e$var$TextFields.setNotchWidth(notch, $a196c1ed25598f0e$var$TextFields.getNotchWidth(notch));
         });
         field.addEventListener("blur", ()=>{
             container.classList.remove(fieldType ? "textarea--focused" : "input--focused");
-            this.setNotchWidth(notch, field.value.trim() ? this.getNotchWidth(notch) : "auto");
+            $a196c1ed25598f0e$var$TextFields.setNotchWidth(notch, field.value.trim() ? $a196c1ed25598f0e$var$TextFields.getNotchWidth(notch) : "auto");
         });
         field.addEventListener(eventType, ()=>{
-            this.updateStyles(field, container, fieldType);
-            if (fieldType) this.resizeTextarea(field, container);
+            $a196c1ed25598f0e$var$TextFields.updateStyles(field, container, fieldType);
+            if (fieldType) $a196c1ed25598f0e$var$TextFields.resizeTextarea(field, container);
         });
-        this.updateStyles(field, container, fieldType);
+        $a196c1ed25598f0e$var$TextFields.updateStyles(field, container, fieldType);
     }
-    updateStyles(field, container, fieldType) {
+    /* eslint-enable class-methods-use-this */ static updateStyles(field, container, fieldType) {
         container.classList.toggle(fieldType ? "textarea--filled" : "input--filled", field.value.trim().length > 0);
@@ -110,6 +111,7 @@ container.classList.toggle(fieldType ? "textarea--disabled" : "input--disabled", field.disabled);
     }
-    resizeTextarea(field, container) {
+    static resizeTextarea(field, container) {
         if (container.classList.contains("textarea--auto-resizeable")) {
-            field.style.height = "auto";
-            field.style.height = `${field.scrollHeight}px`;
+            const newField = field;
+            newField.style.height = "auto";
+            newField.style.height = `${field.scrollHeight}px`;
         }
@@ -116,0 +118,0 @@ }

dist/index.module.js

@@ -12,3 +12,3 @@ class $643fcf18b2d2e76f$var$TextFields {
                 const notch = entry.target.closest(".notched-outline")?.querySelector(".notched-outline__notch");
-                if (notch) this.setNotchWidth(notch, this.getNotchWidth(notch));
+                if (notch) $643fcf18b2d2e76f$var$TextFields.setNotchWidth(notch, $643fcf18b2d2e76f$var$TextFields.getNotchWidth(notch));
             });
@@ -19,3 +19,3 @@ });
         this.floatingLabel.forEach((label)=>{
-            const notchedOutline = label.closest(".notched-outline") ?? this.createNotchedOutline(label);
+            const notchedOutline = label.closest(".notched-outline") ?? $643fcf18b2d2e76f$var$TextFields.createNotchedOutline(label);
             this.notches.push({
@@ -26,7 +26,7 @@ container: notchedOutline.parentNode,
             const lastNotch = this.notches.at(-1).notch;
-            this.setNotchWidth(lastNotch, this.getNotchWidth(lastNotch));
+            $643fcf18b2d2e76f$var$TextFields.setNotchWidth(lastNotch, $643fcf18b2d2e76f$var$TextFields.getNotchWidth(lastNotch));
             this.resizeObserver.observe(notchedOutline.querySelector(".floating-label"));
         });
     }
-    createNotchedOutline(label) {
+    static createNotchedOutline(label) {
         const notchedOutline = document.createElement("div");
@@ -42,9 +42,10 @@ notchedOutline.classList.add("notched-outline");
     }
-    setNotchWidth = (notch, width)=>{
-        notch.style.width = width;
-    };
-    getNotchWidth = (notch)=>{
+    static setNotchWidth(notch, width) {
+        const notchElement = notch; // Используем временную переменную
+        notchElement.style.width = width;
+    }
+    static getNotchWidth(notch) {
         const label = notch.querySelector(".floating-label");
         return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : "auto";
-    };
+    }
     handleEvents() {
@@ -60,8 +61,8 @@ this.textFieldContainer.forEach((field)=>{
         this.notches.forEach(({ notch: notch })=>{
-            this.setNotchWidth(notch, this.getNotchWidth(notch));
+            $643fcf18b2d2e76f$var$TextFields.setNotchWidth(notch, $643fcf18b2d2e76f$var$TextFields.getNotchWidth(notch));
         });
     }
-    setupObserver(field, container) {
+    /* eslint-disable class-methods-use-this */ setupObserver(field, container) {
         const fieldObserver = new MutationObserver(()=>{
-            this.updateStyles(field, container, field instanceof HTMLTextAreaElement);
+            $643fcf18b2d2e76f$var$TextFields.updateStyles(field, container, field instanceof HTMLTextAreaElement);
         });
@@ -80,15 +81,15 @@ fieldObserver.observe(field, {
             container.classList.add(fieldType ? "textarea--focused" : "input--focused");
-            this.setNotchWidth(notch, this.getNotchWidth(notch));
+            $643fcf18b2d2e76f$var$TextFields.setNotchWidth(notch, $643fcf18b2d2e76f$var$TextFields.getNotchWidth(notch));
         });
         field.addEventListener("blur", ()=>{
             container.classList.remove(fieldType ? "textarea--focused" : "input--focused");
-            this.setNotchWidth(notch, field.value.trim() ? this.getNotchWidth(notch) : "auto");
+            $643fcf18b2d2e76f$var$TextFields.setNotchWidth(notch, field.value.trim() ? $643fcf18b2d2e76f$var$TextFields.getNotchWidth(notch) : "auto");
         });
         field.addEventListener(eventType, ()=>{
-            this.updateStyles(field, container, fieldType);
-            if (fieldType) this.resizeTextarea(field, container);
+            $643fcf18b2d2e76f$var$TextFields.updateStyles(field, container, fieldType);
+            if (fieldType) $643fcf18b2d2e76f$var$TextFields.resizeTextarea(field, container);
         });
-        this.updateStyles(field, container, fieldType);
+        $643fcf18b2d2e76f$var$TextFields.updateStyles(field, container, fieldType);
     }
-    updateStyles(field, container, fieldType) {
+    /* eslint-enable class-methods-use-this */ static updateStyles(field, container, fieldType) {
         container.classList.toggle(fieldType ? "textarea--filled" : "input--filled", field.value.trim().length > 0);
@@ -98,6 +99,7 @@ container.classList.toggle(fieldType ? "textarea--disabled" : "input--disabled", field.disabled);
     }
-    resizeTextarea(field, container) {
+    static resizeTextarea(field, container) {
         if (container.classList.contains("textarea--auto-resizeable")) {
-            field.style.height = "auto";
-            field.style.height = `${field.scrollHeight}px`;
+            const newField = field;
+            newField.style.height = "auto";
+            newField.style.height = `${field.scrollHeight}px`;
         }
@@ -104,0 +106,0 @@ }

package.json

 {
   "name": "text-fields",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "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.",
@@ -19,3 +19,3 @@ "author": "ux-ui.pro",
     "build": "yarn clean && parcel build",
-    "lint:js": "eslint --ext .js",
+    "lint:js": "eslint **/*.{ts,js}",
     "lint:scss": "stylelint **/*.scss",
@@ -47,8 +47,11 @@ "lintfix": "yarn lint:js --fix && yarn lint:scss --fix"
     "@parcel/transformer-typescript-types": "2.12.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "eslint": "^7.32.0 || ^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "parcel": "^2.12.0",
+    "eslint-plugin-import": "^2.29.1",
     "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-selector-bem-pattern": "^4.0.0",
+    "parcel": "^2.12.0",
     "typescript": "^5.4.5"
@@ -55,0 +58,0 @@ },

src/index.ts

 class TextFields {
   private textFieldContainer: (HTMLInputElement | HTMLTextAreaElement)[];
+
   private floatingLabel: HTMLElement[];
+
   private resizeObserver: ResizeObserver;
+
   private notches: { container: HTMLElement; notch: HTMLElement }[] = [];
@@ -11,7 +14,7 @@
 
-    this.resizeObserver = new ResizeObserver(entries => {
-      entries.forEach(entry => {
+    this.resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
         const notch = entry.target.closest('.notched-outline')?.querySelector<HTMLElement>('.notched-outline__notch');
 
-        if (notch) this.setNotchWidth(notch, this.getNotchWidth(notch));
+        if (notch) TextFields.setNotchWidth(notch, TextFields.getNotchWidth(notch));
       });
@@ -22,4 +25,4 @@ });
   private notched() {
-    this.floatingLabel.forEach(label => {
-      const notchedOutline = label.closest('.notched-outline') ?? this.createNotchedOutline(label);
+    this.floatingLabel.forEach((label) => {
+      const notchedOutline = label.closest('.notched-outline') ?? TextFields.createNotchedOutline(label);
 
@@ -30,3 +33,3 @@ this.notches.push({ container: notchedOutline.parentNode as HTMLElement, notch: notchedOutline.querySelector<HTMLElement>('.notched-outline__notch')! });
 
-      this.setNotchWidth(lastNotch, this.getNotchWidth(lastNotch));
+      TextFields.setNotchWidth(lastNotch, TextFields.getNotchWidth(lastNotch));
       this.resizeObserver.observe(notchedOutline.querySelector<HTMLElement>('.floating-label')!);
@@ -36,3 +39,3 @@ });
 
-  private createNotchedOutline(label: HTMLElement): HTMLElement {
+  private static createNotchedOutline(label: HTMLElement): HTMLElement {
     const notchedOutline = document.createElement('div');
@@ -51,14 +54,15 @@
 
-  private setNotchWidth = (notch: HTMLElement, width: string) => {
-    notch.style.width = width;
-  };
+  private static setNotchWidth(notch: HTMLElement, width: string) {
+    const notchElement = notch; // Используем временную переменную
+    notchElement.style.width = width;
+  }
 
-  private getNotchWidth = (notch: HTMLElement): string => {
+  private static getNotchWidth(notch: HTMLElement): string {
     const label = notch.querySelector<HTMLElement>('.floating-label');
     return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : 'auto';
-  };
+  }
 
   private handleEvents() {
-    this.textFieldContainer.forEach(field => {
-      const notchData = this.notches.find(data => data.container.contains(field));
+    this.textFieldContainer.forEach((field) => {
+      const notchData = this.notches.find((data) => data.container.contains(field));
 
@@ -74,9 +78,10 @@ if (!notchData) return;
     this.notches.forEach(({ notch }) => {
-      this.setNotchWidth(notch, this.getNotchWidth(notch));
+      TextFields.setNotchWidth(notch, TextFields.getNotchWidth(notch));
     });
   }
 
+  /* eslint-disable class-methods-use-this */
   private setupObserver(field: HTMLInputElement | HTMLTextAreaElement, container: HTMLElement) {
     const fieldObserver = new MutationObserver(() => {
-      this.updateStyles(field, container, field instanceof HTMLTextAreaElement);
+      TextFields.updateStyles(field, container, field instanceof HTMLTextAreaElement);
     });
@@ -93,3 +98,3 @@
 
-      this.setNotchWidth(notch, this.getNotchWidth(notch));
+      TextFields.setNotchWidth(notch, TextFields.getNotchWidth(notch));
     });
@@ -100,15 +105,16 @@
 
-      this.setNotchWidth(notch, field.value.trim() ? this.getNotchWidth(notch) : 'auto');
+      TextFields.setNotchWidth(notch, field.value.trim() ? TextFields.getNotchWidth(notch) : 'auto');
     });
 
     field.addEventListener(eventType, () => {
-      this.updateStyles(field, container, fieldType);
+      TextFields.updateStyles(field, container, fieldType);
 
-      if (fieldType) this.resizeTextarea(field as HTMLTextAreaElement, container);
+      if (fieldType) TextFields.resizeTextarea(field as HTMLTextAreaElement, container);
     });
 
-    this.updateStyles(field, container, fieldType);
+    TextFields.updateStyles(field, container, fieldType);
   }
+  /* eslint-enable class-methods-use-this */
 
-  private updateStyles(field: HTMLInputElement | HTMLTextAreaElement, container: HTMLElement, fieldType: boolean) {
+  private static updateStyles(field: HTMLInputElement | HTMLTextAreaElement, container: HTMLElement, fieldType: boolean) {
     container.classList.toggle(fieldType ? 'textarea--filled' : 'input--filled', field.value.trim().length > 0);
@@ -119,6 +125,7 @@ container.classList.toggle(fieldType ? 'textarea--disabled' : 'input--disabled', field.disabled);
 
-  private resizeTextarea(field: HTMLTextAreaElement, container: HTMLElement) {
+  private static resizeTextarea(field: HTMLTextAreaElement, container: HTMLElement) {
     if (container.classList.contains('textarea--auto-resizeable')) {
-      field.style.height = 'auto';
-      field.style.height = `${field.scrollHeight}px`;
+      const newField = field;
+      newField.style.height = 'auto';
+      newField.style.height = `${field.scrollHeight}px`;
     }
@@ -125,0 +132,0 @@ }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89402

increased by4.18%

Number of package files

27

increased by8%

Lines of code

404

increased by9.19%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

13

increased by30%

No dependency changes