text-fields - npm Package Compare versions

Comparing version 3.1.3 to 3.2.0

package.json

 {
   "name": "text-fields",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "The TextFields class is designed to manage and design text fields (input and textarea) according to Material Design principles. The main function of the class is to add visual and functional enhancements to standard HTML form elements.",
@@ -16,5 +16,5 @@ "author": "ux-ui.pro",
   "sideEffects": false,
-  "css": "dist/text-fields.css",
-  "main": "dist/text-fields.js",
-  "module": "dist/text-fields.module.js",
+  "css": "dist/index.css",
+  "main": "dist/index.js",
+  "module": "dist/index.module.js",
   "targets": {
@@ -44,3 +44,3 @@ "css": {
     "parcel": "^2.12.0",
-    "stylelint": "^16.5.0",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0",
@@ -47,0 +47,0 @@ "stylelint-selector-bem-pattern": "^4.0.0"

README.md

@@ -30,3 +30,3 @@ <br>
 ```javascript
-import 'text-fields/dist/text-fields.css';
+import 'text-fields/dist/index.css';
 ```
@@ -33,0 +33,0 @@ <sub>if your bundler supports SCSS</sub>

src/TextFields.js

 class TextFields {
-  #notches;
+  #textFieldContainer;
 
+  #floatingLabel;
+
+  #resizeObserver;
+
+  #notches = [];
+
   constructor() {
-    this.#notches = [];
-  }
+    this.#textFieldContainer = [...document.querySelectorAll('.text-field-container input, .text-field-container textarea')];
+    this.#floatingLabel = [...document.querySelectorAll('.floating-label')];
 
-  async init() {
-    await this.#notched();
-    await this.#handleEvents();
+    this.#resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        const notch = entry.target.closest('.notched-outline')?.querySelector('.notched-outline__notch');
 
-    this.#initialNotchWidths();
+        if (notch) this.#setNotchWidth(notch, this.#getNotchWidth(notch));
+      });
+    });
   }
 
   #notched() {
-    document.querySelectorAll('.floating-label').forEach(label => {
-      const notchedOutline = label.closest('.notched-outline');
-      const outline = notchedOutline ?? document.createElement('div');
+    this.#floatingLabel.forEach(label => {
+      const notchedOutline = label.closest('.notched-outline') ?? this.#createNotchedOutline(label);
 
-      if (!notchedOutline) {
-        outline.classList.add('notched-outline');
-        outline.innerHTML = `
-          <div class="notched-outline__leading"></div>
-          <div class="notched-outline__notch">${label.outerHTML}</div>
-          <div class="notched-outline__trailing"></div>
-        `;
-        label.replaceWith(outline);
-      }
+      this.#notches.push({ container: notchedOutline.parentNode, notch: notchedOutline.querySelector('.notched-outline__notch') });
 
-      this.#notches.push({
-        container: outline.parentNode,
-        notch: outline.querySelector('.notched-outline__notch'),
-      });
+      const lastNotch = this.#notches.at(-1).notch;
 
-      this.#setNotchWidth(this.#notches[this.#notches.length - 1].notch, this.#getNotchWidth(this.#notches[this.#notches.length - 1].notch));
+      this.#setNotchWidth(lastNotch, this.#getNotchWidth(lastNotch));
+      this.#resizeObserver.observe(notchedOutline.querySelector('.floating-label'));
     });
   }
 
+  #createNotchedOutline(label) {
+    const notchedOutline = document.createElement('div');
+
+    notchedOutline.classList.add('notched-outline');
+    notchedOutline.innerHTML = `
+      <div class="notched-outline__leading"></div>
+      <div class="notched-outline__notch">${label.outerHTML}</div>
+      <div class="notched-outline__trailing"></div>
+    `;
+    label.replaceWith(notchedOutline);
+
+    return notchedOutline;
+  }
+
+  #setNotchWidth = (notch, width) => {
+    notch.style.width = width;
+  };
+
+  #getNotchWidth = (notch) => {
+    const label = notch.querySelector('.floating-label');
+
+    return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : 'auto';
+  };
+
   #handleEvents() {
-    document.querySelectorAll('.text-field-container input, .text-field-container textarea').forEach(field => {
+    this.#textFieldContainer.forEach(field => {
       const notchData = this.#notches.find(data => data.container.contains(field));
@@ -51,4 +72,4 @@
   #initialNotchWidths() {
-    this.#notches.forEach(notchData => {
-      this.#setNotchWidth(notchData.notch, this.#getNotchWidth(notchData.notch));
+    this.#notches.forEach(({ notch }) => {
+      this.#setNotchWidth(notch, this.#getNotchWidth(notch));
     });
@@ -58,5 +79,4 @@ }
   #setupObserver(field, container) {
-    const fieldType = field instanceof HTMLTextAreaElement;
     const fieldObserver = new MutationObserver(() => {
-      this.#updateStyles(field, container, fieldType);
+      this.#updateStyles(field, container, field instanceof HTMLTextAreaElement);
     });
@@ -79,7 +99,3 @@
 
-      if (field.value.trim()) {
-        this.#setNotchWidth(notch, this.#getNotchWidth(notch));
-      } else {
-        this.#setNotchWidth(notch, 'auto');
-      }
+      this.#setNotchWidth(notch, field.value.trim() ? this.#getNotchWidth(notch) : 'auto');
     });
@@ -89,3 +105,4 @@
       this.#updateStyles(field, container, fieldType);
-      this.#textareaResizeable(field, container, fieldType);
+
+      if (fieldType) this.#resizeTextarea(field, container);
     });
@@ -102,14 +119,4 @@
 
-  #setNotchWidth(notch, width) {
-    notch.style.width = width;
-  }
-
-  #getNotchWidth(notch) {
-    const label = notch.querySelector('.floating-label');
-
-    return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : 'auto';
-  }
-
-  #textareaResizeable(field, container, fieldType) {
-    if (fieldType && container.classList.contains('textarea--auto-resizeable')) {
+  #resizeTextarea(field, container) {
+    if (container.classList.contains('textarea--auto-resizeable')) {
       field.style.height = 'auto';
@@ -119,4 +126,10 @@ field.style.height = `${field.scrollHeight}px`;
   }
+
+  async init() {
+    this.#notched();
+    this.#handleEvents();
+    this.#initialNotchWidths();
+  }
 }
 
 export default TextFields;

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

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

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

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

79118

increased by3.69%

Lines of code

366

increased by10.57%

No dependency changes