text-fields - npm Package Compare versions

Comparing version 1.2.2 to 2.0.0

dist/index.js

@@ -0,4 +1,6 @@
+
 function $parcel$defineInteropFlag(a) {
   Object.defineProperty(a, '__esModule', {value: true, configurable: true});
 }
+
 function $parcel$export(e, n, v, s) {
@@ -11,10 +13,8 @@ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 $parcel$export(module.exports, "default", () => $4fa36e821943b400$export$2e2bcd8739ae039);
-class $4fa36e821943b400$var$TextFields {
-    constructor(){
-        this.notches = [];
+const $4fa36e821943b400$var$TextFields = {
+    notches: [],
+    labels: null,
+    inputs: null,
+    wrap () {
         this.labels = document.querySelectorAll(".floating-label");
-        this.wrap();
-        this.handleFields();
-    }
-    wrap = ()=>{
         this.labels.forEach((label)=>{
@@ -27,9 +27,9 @@ const notchedOutline = label.closest(".notched-outline");
             else {
-                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);
+                const outline = document.createElement("div");
+                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")
+                    container: outline.parentNode,
+                    notch: outline.querySelector(".notched-outline__notch")
                 });
@@ -39,4 +39,4 @@ }
         this.update();
-    };
-    handleFields = ()=>{
+    },
+    handleFields () {
         const fields = [
@@ -46,5 +46,5 @@ ...document.querySelectorAll(".text-field-container input, .text-field-container textarea")
         fields.forEach((field)=>{
-            const notchData = this.notches.find((notchData)=>notchData.container.contains(field));
+            const notchData = this.notches.find((data)=>data.container.contains(field));
             if (!notchData) return;
-            const { container: container , notch: notch  } = notchData;
+            const { container: container, notch: notch } = notchData;
             const label = notch.querySelector(".floating-label");
@@ -54,37 +54,52 @@ const fieldType = field instanceof HTMLTextAreaElement;
             if (field.required) label.classList.add("floating-label--required");
-            if (field.value.trim().length > 0) {
-                container.classList.add(fieldType ? "textarea--filled" : "input--filled");
-                notch.style.width = this.getNotchWidth(notch);
-            }
-            field.addEventListener("focus", ()=>{
-                container.classList.add(fieldType ? "textarea--focused" : "input--focused");
-                notch.style.width = this.getNotchWidth(notch);
-            });
-            field.addEventListener("blur", ()=>{
-                container.classList.remove(fieldType ? "textarea--focused" : "input--focused");
-                if (field.value.trim().length <= 0) notch.style.width = "auto";
-            });
-            field.addEventListener("change", ()=>{
-                this.toggleFilledClass(field, container, fieldType);
-            });
-            if (fieldType && container.classList.contains("textarea--auto-resizeable")) field.addEventListener("input", ()=>{
-                field.style.height = "auto";
-                field.style.height = `${field.scrollHeight}px`;
-            });
-            else field.addEventListener("input", ()=>{
-                this.toggleFilledClass(field, container, fieldType);
-            });
+            this.toggleFilledClass(field, container, fieldType);
+            this.addEventListeners(field, container, notch, fieldType);
         });
-    };
-    update = ()=>{
+        this.notches.forEach(({ notch: notch })=>{
+            const notchElement = notch;
+            notchElement.style.width = this.getNotchWidth(notchElement);
+        });
+    },
+    addEventListeners (field, container, notch, fieldType) {
+        const eventType = fieldType ? "input" : "change";
+        const notchWidth = this.getNotchWidth(notch);
+        const notchStyle = notch.style;
+        field.addEventListener("focus", ()=>{
+            container.classList.add(fieldType ? "textarea--focused" : "input--focused");
+            notchStyle.width = notchWidth;
+        });
+        field.addEventListener("blur", ()=>{
+            container.classList.remove(fieldType ? "textarea--focused" : "input--focused");
+            if (field.value.trim().length <= 0) notchStyle.width = "auto";
+        });
+        field.addEventListener(eventType, ()=>{
+            this.toggleFilledClass(field, container, fieldType);
+        });
+        if (fieldType && container.classList.contains("textarea--auto-resizeable")) field.addEventListener(eventType, ()=>{
+            const currentField = field;
+            currentField.style.height = "auto";
+            currentField.style.height = `${currentField.scrollHeight}px`;
+        });
+    },
+    toggleFilledClass (field, container, fieldType) {
+        if (field.value.trim().length > 0) container.classList.add(fieldType ? "textarea--filled" : "input--filled");
+        else container.classList.remove(fieldType ? "textarea--filled" : "input--filled");
+    },
+    getNotchWidth (notch) {
+        const label = notch.querySelector(".floating-label");
+        return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : "auto";
+    },
+    update () {
         this.inputs = document.querySelectorAll(".text-field-container input, .text-field-container textarea");
-    };
-    toggleFilledClass = (field, container, fieldType)=>{
-        field.value.trim().length > 0 ? container.classList.add(fieldType ? "textarea--filled" : "input--filled") : container.classList.remove(fieldType ? "textarea--filled" : "input--filled");
-    };
-    getNotchWidth = (notch)=>{
-        const label = notch.querySelector(".floating-label");
-        return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * .75}px` : "auto";
-    };
-}
+    },
+    init () {
+        this.wrap();
+        this.handleFields();
+    },
+    destroy () {
+        this.notches = [];
+        this.labels = null;
+        this.inputs = null;
+    }
+};
 var $4fa36e821943b400$export$2e2bcd8739ae039 = $4fa36e821943b400$var$TextFields;
@@ -91,0 +106,0 @@

dist/index.module.js

@@ -1,9 +0,7 @@
-class $cf838c15c8b009ba$var$TextFields {
-    constructor(){
-        this.notches = [];
+const $cf838c15c8b009ba$var$TextFields = {
+    notches: [],
+    labels: null,
+    inputs: null,
+    wrap () {
         this.labels = document.querySelectorAll(".floating-label");
-        this.wrap();
-        this.handleFields();
-    }
-    wrap = ()=>{
         this.labels.forEach((label)=>{
@@ -16,9 +14,9 @@ const notchedOutline = label.closest(".notched-outline");
             else {
-                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);
+                const outline = document.createElement("div");
+                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")
+                    container: outline.parentNode,
+                    notch: outline.querySelector(".notched-outline__notch")
                 });
@@ -28,4 +26,4 @@ }
         this.update();
-    };
-    handleFields = ()=>{
+    },
+    handleFields () {
         const fields = [
@@ -35,5 +33,5 @@ ...document.querySelectorAll(".text-field-container input, .text-field-container textarea")
         fields.forEach((field)=>{
-            const notchData = this.notches.find((notchData)=>notchData.container.contains(field));
+            const notchData = this.notches.find((data)=>data.container.contains(field));
             if (!notchData) return;
-            const { container: container , notch: notch  } = notchData;
+            const { container: container, notch: notch } = notchData;
             const label = notch.querySelector(".floating-label");
@@ -43,37 +41,52 @@ const fieldType = field instanceof HTMLTextAreaElement;
             if (field.required) label.classList.add("floating-label--required");
-            if (field.value.trim().length > 0) {
-                container.classList.add(fieldType ? "textarea--filled" : "input--filled");
-                notch.style.width = this.getNotchWidth(notch);
-            }
-            field.addEventListener("focus", ()=>{
-                container.classList.add(fieldType ? "textarea--focused" : "input--focused");
-                notch.style.width = this.getNotchWidth(notch);
-            });
-            field.addEventListener("blur", ()=>{
-                container.classList.remove(fieldType ? "textarea--focused" : "input--focused");
-                if (field.value.trim().length <= 0) notch.style.width = "auto";
-            });
-            field.addEventListener("change", ()=>{
-                this.toggleFilledClass(field, container, fieldType);
-            });
-            if (fieldType && container.classList.contains("textarea--auto-resizeable")) field.addEventListener("input", ()=>{
-                field.style.height = "auto";
-                field.style.height = `${field.scrollHeight}px`;
-            });
-            else field.addEventListener("input", ()=>{
-                this.toggleFilledClass(field, container, fieldType);
-            });
+            this.toggleFilledClass(field, container, fieldType);
+            this.addEventListeners(field, container, notch, fieldType);
         });
-    };
-    update = ()=>{
+        this.notches.forEach(({ notch: notch })=>{
+            const notchElement = notch;
+            notchElement.style.width = this.getNotchWidth(notchElement);
+        });
+    },
+    addEventListeners (field, container, notch, fieldType) {
+        const eventType = fieldType ? "input" : "change";
+        const notchWidth = this.getNotchWidth(notch);
+        const notchStyle = notch.style;
+        field.addEventListener("focus", ()=>{
+            container.classList.add(fieldType ? "textarea--focused" : "input--focused");
+            notchStyle.width = notchWidth;
+        });
+        field.addEventListener("blur", ()=>{
+            container.classList.remove(fieldType ? "textarea--focused" : "input--focused");
+            if (field.value.trim().length <= 0) notchStyle.width = "auto";
+        });
+        field.addEventListener(eventType, ()=>{
+            this.toggleFilledClass(field, container, fieldType);
+        });
+        if (fieldType && container.classList.contains("textarea--auto-resizeable")) field.addEventListener(eventType, ()=>{
+            const currentField = field;
+            currentField.style.height = "auto";
+            currentField.style.height = `${currentField.scrollHeight}px`;
+        });
+    },
+    toggleFilledClass (field, container, fieldType) {
+        if (field.value.trim().length > 0) container.classList.add(fieldType ? "textarea--filled" : "input--filled");
+        else container.classList.remove(fieldType ? "textarea--filled" : "input--filled");
+    },
+    getNotchWidth (notch) {
+        const label = notch.querySelector(".floating-label");
+        return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : "auto";
+    },
+    update () {
         this.inputs = document.querySelectorAll(".text-field-container input, .text-field-container textarea");
-    };
-    toggleFilledClass = (field, container, fieldType)=>{
-        field.value.trim().length > 0 ? container.classList.add(fieldType ? "textarea--filled" : "input--filled") : container.classList.remove(fieldType ? "textarea--filled" : "input--filled");
-    };
-    getNotchWidth = (notch)=>{
-        const label = notch.querySelector(".floating-label");
-        return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * .75}px` : "auto";
-    };
-}
+    },
+    init () {
+        this.wrap();
+        this.handleFields();
+    },
+    destroy () {
+        this.notches = [];
+        this.labels = null;
+        this.inputs = null;
+    }
+};
 var $cf838c15c8b009ba$export$2e2bcd8739ae039 = $cf838c15c8b009ba$var$TextFields;
@@ -80,0 +93,0 @@

package.json

 {
   "name": "text-fields",
-  "version": "1.2.2",
-  "description": "Input, textarea, material, vanilla",
+  "version": "2.0.0",
+  "description": "Input, textarea, material",
   "author": "ux-ui.pro",
@@ -34,4 +34,4 @@ "license": "MIT",
   "devDependencies": {
-    "@parcel/transformer-sass": "~2.9.2",
-    "parcel": "~2.9.2"
+    "@parcel/transformer-sass": "~2.10.0",
+    "parcel": "~2.10.0"
   },
@@ -38,0 +38,0 @@ "keywords": [

README.md

@@ -1,8 +0,6 @@
-<div align="center">
 <br>
+<p align="center"><strong>text-fields</strong></p>
 
-<h1>text-fields</h1>
+<div align="center">
 
-<p><sup>Input, textarea, material, vanilla</sup></p>
-
 [![npm](https://img.shields.io/npm/v/text-fields.svg?colorB=brightgreen)](https://www.npmjs.com/package/text-fields)
@@ -12,28 +10,26 @@ [![GitHub package version](https://img.shields.io/github/package-json/v/ux-ui-pro/text-fields.svg)](https://github.com/ux-ui-pro/text-fields)
 
-<sup>700B gzipped</sup>
-<h3><a href="https://codepen.io/ux-ui/full/PoxqOvp">Demo</a></h3>
 </div>
+
+<p align="center">Input, textarea, material</p>
+<p align="center"><sup>700B gzipped</sup></p>
+<p align="center"><a href="https://codepen.io/ux-ui/full/PoxqOvp">Demo</a></p>
 <br>
 
-### Installation
+&#10148; **Install**
+
+```console
+yarn add text-fields
 ```
-$ yarn add text-fields
-```
 <br>
 
-### Import
+&#10148; **Import**
+
 ```javascript
-import TextField from 'text-fields'
+import TextFields from 'text-fields';
 ```
-```javascript
-const textFields = new TextFields()
-```
-<br>
-
-### SCSS
-<sup>Import files if your bundler supports SCSS</sup>
+<sub>Import files if your bundler supports SCSS</sub>
 ```CSS
 @import "node_modules/text-fields/src";
 ```
-<sup>or</sup>
+<sub>or compiled CSS</sub>
 ```CSS
@@ -44,3 +40,14 @@ @import "node_modules/text-fields/dist/index.css";
 
-### License
+&#10148; **Usage**
+
+```javascript
+TextFields.init();
+```
+```javascript
+TextFields.destroy();
+```
+<br>
+
+&#10148; **License**
+
 text-fields is released under MIT license

src/index.js

@@ -1,12 +0,10 @@
-class TextFields {
-    constructor() {
-        this.notches = []
-        this.labels = document.querySelectorAll('.floating-label')
-        this.wrap()
-        this.handleFields()
-    }
+const TextFields = {
+    notches: [],
+    labels: null,
+    inputs: null,
 
-    wrap = () => {
-        this.labels.forEach(label => {
-            const notchedOutline = label.closest('.notched-outline')
+    wrap() {
+        this.labels = document.querySelectorAll('.floating-label');
+        this.labels.forEach((label) => {
+            const notchedOutline = label.closest('.notched-outline');
 
@@ -16,92 +14,113 @@ if (notchedOutline) {
                     container: notchedOutline.parentNode,
-                    notch: notchedOutline.querySelector('.notched-outline__notch')
-                })
+                    notch: notchedOutline.querySelector('.notched-outline__notch'),
+                });
             } else {
-                const notchedOutline = document.createElement('div')
+                const outline = 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)
+                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')
-                })
+                    container: outline.parentNode,
+                    notch: outline.querySelector('.notched-outline__notch'),
+                });
             }
-        })
+        });
 
-        this.update()
-    }
+        this.update();
+    },
 
-    handleFields = () => {
-        const fields = [...document.querySelectorAll('.text-field-container input, .text-field-container textarea')]
+    handleFields() {
+        const fields = [...document.querySelectorAll('.text-field-container input, .text-field-container textarea')];
 
-        fields.forEach(field => {
-            const notchData = this.notches.find(notchData => notchData.container.contains(field))
+        fields.forEach((field) => {
+            const notchData = this.notches.find((data) => data.container.contains(field));
 
-            if (!notchData) return
+            if (!notchData) return;
 
-            const { container, notch } = notchData
-            const label = notch.querySelector('.floating-label')
-            const fieldType = field instanceof HTMLTextAreaElement
+            const { container, notch } = notchData;
+            const label = notch.querySelector('.floating-label');
+            const fieldType = field instanceof HTMLTextAreaElement;
 
             if (field.disabled) {
-                container.classList.add(fieldType ? 'textarea--disabled' : 'input--disabled')
+                container.classList.add(fieldType ? 'textarea--disabled' : 'input--disabled');
             }
 
             if (field.required) {
-                label.classList.add('floating-label--required')
+                label.classList.add('floating-label--required');
             }
 
-            if (field.value.trim().length > 0) {
-                container.classList.add(fieldType ? 'textarea--filled' : 'input--filled')
-                notch.style.width = this.getNotchWidth(notch)
-            }
+            this.toggleFilledClass(field, container, fieldType);
+            this.addEventListeners(field, container, notch, fieldType);
+        });
 
-            field.addEventListener('focus', () => {
-                container.classList.add(fieldType ? 'textarea--focused' : 'input--focused')
-                notch.style.width = this.getNotchWidth(notch)
-            })
+        this.notches.forEach(({ notch }) => {
+            const notchElement = notch;
 
-            field.addEventListener('blur', () => {
-                container.classList.remove(fieldType ? 'textarea--focused' : 'input--focused')
+            notchElement.style.width = this.getNotchWidth(notchElement);
+        });
+    },
 
-                if (field.value.trim().length <= 0) {
-                    notch.style.width = 'auto'
-                }
-            })
+    addEventListeners(field, container, notch, fieldType) {
+        const eventType = fieldType ? 'input' : 'change';
+        const notchWidth = this.getNotchWidth(notch);
+        const notchStyle = notch.style;
 
-            field.addEventListener('change', () => {
-                this.toggleFilledClass(field, container, fieldType)
-            })
+        field.addEventListener('focus', () => {
+            container.classList.add(fieldType ? 'textarea--focused' : 'input--focused');
+            notchStyle.width = notchWidth;
+        });
 
-            if (fieldType && container.classList.contains('textarea--auto-resizeable')) {
-                field.addEventListener('input', () => {
-                    field.style.height = 'auto'
-                    field.style.height = `${field.scrollHeight}px`
-                })
-            } else {
-                field.addEventListener('input', () => {
-                    this.toggleFilledClass(field, container, fieldType)
-                })
+        field.addEventListener('blur', () => {
+            container.classList.remove(fieldType ? 'textarea--focused' : 'input--focused');
+
+            if (field.value.trim().length <= 0) {
+                notchStyle.width = 'auto';
             }
-        })
-    }
+        });
 
-    update = () => {
-        this.inputs = document.querySelectorAll('.text-field-container input, .text-field-container textarea')
-    }
+        field.addEventListener(eventType, () => {
+            this.toggleFilledClass(field, container, fieldType);
+        });
 
-    toggleFilledClass = (field, container, fieldType) => {
-        field.value.trim().length > 0
-            ? container.classList.add(fieldType ? 'textarea--filled' : 'input--filled')
-            : container.classList.remove(fieldType ? 'textarea--filled' : 'input--filled')
-    }
+        if (fieldType && container.classList.contains('textarea--auto-resizeable')) {
+            field.addEventListener(eventType, () => {
+                const currentField = field;
 
-    getNotchWidth = (notch) => {
-        const label = notch.querySelector('.floating-label')
-        return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * .75}px` : 'auto'
-    }
-}
+                currentField.style.height = 'auto';
+                currentField.style.height = `${currentField.scrollHeight}px`;
+            });
+        }
+    },
 
-export default TextFields
+    toggleFilledClass(field, container, fieldType) {
+        if (field.value.trim().length > 0) {
+            container.classList.add(fieldType ? 'textarea--filled' : 'input--filled');
+        } else {
+            container.classList.remove(fieldType ? 'textarea--filled' : 'input--filled');
+        }
+    },
+
+    getNotchWidth(notch) {
+        const label = notch.querySelector('.floating-label');
+        return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : 'auto';
+    },
+
+    update() {
+        this.inputs = document.querySelectorAll('.text-field-container input, .text-field-container textarea');
+    },
+
+    init() {
+        this.wrap();
+        this.handleFields();
+    },
+
+    destroy() {
+        this.notches = [];
+        this.labels = null;
+        this.inputs = null;
+    },
+};
+
+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

Improved metrics

Total package byte prevSize

76670

increased by3.64%

Lines of code

323

increased by14.13%

Number of lines in readme file

52

increased by15.56%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes