text-fields - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/index.js

@@ -13,28 +13,76 @@
 $parcel$export(module.exports, "default", () => $4fa36e821943b400$export$2e2bcd8739ae039);
+function $598d57897adea35a$var$notched() {
+    const labels = document.querySelectorAll(".floating-label");
+    labels.forEach((label)=>{
+        const notchedOutline = label.closest(".notched-outline");
+        if (notchedOutline) this.notches.push({
+            container: notchedOutline.parentNode,
+            notch: notchedOutline.querySelector(".notched-outline__notch")
+        });
+        else {
+            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: outline.parentNode,
+                notch: outline.querySelector(".notched-outline__notch")
+            });
+        }
+    });
+}
+var $598d57897adea35a$export$2e2bcd8739ae039 = $598d57897adea35a$var$notched;
+
+
+function $b4201eebdf0099a8$var$observers(field, container) {
+    const fieldType = field instanceof HTMLTextAreaElement;
+    const observer = new MutationObserver(()=>{
+        if (field.required) container.classList.add(fieldType ? "textarea--error" : "input--error");
+        else container.classList.remove(fieldType ? "textarea--error" : "input--error");
+        if (field.disabled) container.classList.add(fieldType ? "textarea--disabled" : "input--disabled");
+        else container.classList.remove(fieldType ? "textarea--disabled" : "input--disabled");
+    });
+    observer.observe(field, {
+        attributes: true,
+        attributeFilter: [
+            "required",
+            "disabled"
+        ]
+    });
+}
+var $b4201eebdf0099a8$export$2e2bcd8739ae039 = $b4201eebdf0099a8$var$observers;
+
+
+function $3a21e1140688247a$var$getNotchWidth(notch) {
+    const label = notch.querySelector(".floating-label");
+    return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : "auto";
+}
+function $3a21e1140688247a$var$listeners(field, container, notch, fieldType) {
+    const eventType = fieldType ? "input" : "change";
+    const notchStyle = notch.style;
+    field.addEventListener("focus", ()=>{
+        container.classList.add(fieldType ? "textarea--focused" : "input--focused");
+        notchStyle.width = $3a21e1140688247a$var$getNotchWidth(notch);
+    });
+    field.addEventListener("blur", ()=>{
+        container.classList.remove(fieldType ? "textarea--focused" : "input--focused");
+        if (field.value.trim().length <= 0) notchStyle.width = "auto";
+    });
+    field.addEventListener(eventType, ()=>{
+        if (field.value.trim().length > 0) container.classList.add(fieldType ? "textarea--filled" : "input--filled");
+        else container.classList.remove(fieldType ? "textarea--filled" : "input--filled");
+        if (fieldType && container.classList.contains("textarea--auto-resizeable")) {
+            const currentField = field;
+            currentField.style.height = "auto";
+            currentField.style.height = `${currentField.scrollHeight}px`;
+        }
+    });
+}
+var $3a21e1140688247a$export$2e2bcd8739ae039 = $3a21e1140688247a$var$listeners;
+
+
 const $4fa36e821943b400$var$TextFields = {
     notches: [],
-    labels: null,
-    inputs: null,
-    wrap () {
-        this.labels = document.querySelectorAll(".floating-label");
-        this.labels.forEach((label)=>{
-            const notchedOutline = label.closest(".notched-outline");
-            if (notchedOutline) this.notches.push({
-                container: notchedOutline.parentNode,
-                notch: notchedOutline.querySelector(".notched-outline__notch")
-            });
-            else {
-                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: outline.parentNode,
-                    notch: outline.querySelector(".notched-outline__notch")
-                });
-            }
-        });
-        this.update();
-    },
-    handleFields () {
+    notched: $598d57897adea35a$export$2e2bcd8739ae039,
+    handlers () {
         const fields = [
@@ -47,54 +95,13 @@ ...document.querySelectorAll(".text-field-container input, .text-field-container textarea")
             const { container: container, notch: notch } = notchData;
-            const label = notch.querySelector(".floating-label");
             const fieldType = field instanceof HTMLTextAreaElement;
-            if (field.disabled) container.classList.add(fieldType ? "textarea--disabled" : "input--disabled");
-            if (field.required) label.classList.add("floating-label--required");
-            this.toggleFilledClass(field, container, fieldType);
-            this.addEventListeners(field, container, notch, fieldType);
+            (0, $b4201eebdf0099a8$export$2e2bcd8739ae039)(field, container, notch);
+            (0, $3a21e1140688247a$export$2e2bcd8739ae039)(field, container, notch, fieldType);
         });
-        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");
-    },
     init () {
-        this.wrap();
-        this.handleFields();
+        this.notched();
+        this.handlers();
     },
     destroy () {
         this.notches = [];
-        this.labels = null;
-        this.inputs = null;
     }
@@ -101,0 +108,0 @@ };

dist/index.module.js

@@ -0,27 +1,75 @@
+function $85068ae01dc596ad$var$notched() {
+    const labels = document.querySelectorAll(".floating-label");
+    labels.forEach((label)=>{
+        const notchedOutline = label.closest(".notched-outline");
+        if (notchedOutline) this.notches.push({
+            container: notchedOutline.parentNode,
+            notch: notchedOutline.querySelector(".notched-outline__notch")
+        });
+        else {
+            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: outline.parentNode,
+                notch: outline.querySelector(".notched-outline__notch")
+            });
+        }
+    });
+}
+var $85068ae01dc596ad$export$2e2bcd8739ae039 = $85068ae01dc596ad$var$notched;
+
+
+function $12b7859a657b7ab7$var$observers(field, container) {
+    const fieldType = field instanceof HTMLTextAreaElement;
+    const observer = new MutationObserver(()=>{
+        if (field.required) container.classList.add(fieldType ? "textarea--error" : "input--error");
+        else container.classList.remove(fieldType ? "textarea--error" : "input--error");
+        if (field.disabled) container.classList.add(fieldType ? "textarea--disabled" : "input--disabled");
+        else container.classList.remove(fieldType ? "textarea--disabled" : "input--disabled");
+    });
+    observer.observe(field, {
+        attributes: true,
+        attributeFilter: [
+            "required",
+            "disabled"
+        ]
+    });
+}
+var $12b7859a657b7ab7$export$2e2bcd8739ae039 = $12b7859a657b7ab7$var$observers;
+
+
+function $8290bb03cd88138a$var$getNotchWidth(notch) {
+    const label = notch.querySelector(".floating-label");
+    return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * 0.75}px` : "auto";
+}
+function $8290bb03cd88138a$var$listeners(field, container, notch, fieldType) {
+    const eventType = fieldType ? "input" : "change";
+    const notchStyle = notch.style;
+    field.addEventListener("focus", ()=>{
+        container.classList.add(fieldType ? "textarea--focused" : "input--focused");
+        notchStyle.width = $8290bb03cd88138a$var$getNotchWidth(notch);
+    });
+    field.addEventListener("blur", ()=>{
+        container.classList.remove(fieldType ? "textarea--focused" : "input--focused");
+        if (field.value.trim().length <= 0) notchStyle.width = "auto";
+    });
+    field.addEventListener(eventType, ()=>{
+        if (field.value.trim().length > 0) container.classList.add(fieldType ? "textarea--filled" : "input--filled");
+        else container.classList.remove(fieldType ? "textarea--filled" : "input--filled");
+        if (fieldType && container.classList.contains("textarea--auto-resizeable")) {
+            const currentField = field;
+            currentField.style.height = "auto";
+            currentField.style.height = `${currentField.scrollHeight}px`;
+        }
+    });
+}
+var $8290bb03cd88138a$export$2e2bcd8739ae039 = $8290bb03cd88138a$var$listeners;
+
+
 const $cf838c15c8b009ba$var$TextFields = {
     notches: [],
-    labels: null,
-    inputs: null,
-    wrap () {
-        this.labels = document.querySelectorAll(".floating-label");
-        this.labels.forEach((label)=>{
-            const notchedOutline = label.closest(".notched-outline");
-            if (notchedOutline) this.notches.push({
-                container: notchedOutline.parentNode,
-                notch: notchedOutline.querySelector(".notched-outline__notch")
-            });
-            else {
-                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: outline.parentNode,
-                    notch: outline.querySelector(".notched-outline__notch")
-                });
-            }
-        });
-        this.update();
-    },
-    handleFields () {
+    notched: $85068ae01dc596ad$export$2e2bcd8739ae039,
+    handlers () {
         const fields = [
@@ -34,54 +82,13 @@ ...document.querySelectorAll(".text-field-container input, .text-field-container textarea")
             const { container: container, notch: notch } = notchData;
-            const label = notch.querySelector(".floating-label");
             const fieldType = field instanceof HTMLTextAreaElement;
-            if (field.disabled) container.classList.add(fieldType ? "textarea--disabled" : "input--disabled");
-            if (field.required) label.classList.add("floating-label--required");
-            this.toggleFilledClass(field, container, fieldType);
-            this.addEventListeners(field, container, notch, fieldType);
+            (0, $12b7859a657b7ab7$export$2e2bcd8739ae039)(field, container, notch);
+            (0, $8290bb03cd88138a$export$2e2bcd8739ae039)(field, container, notch, fieldType);
         });
-        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");
-    },
     init () {
-        this.wrap();
-        this.handleFields();
+        this.notched();
+        this.handlers();
     },
     destroy () {
         this.notches = [];
-        this.labels = null;
-        this.inputs = null;
     }
@@ -88,0 +95,0 @@ };

package.json

 {
   "name": "text-fields",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Input, textarea, material",
@@ -14,6 +14,9 @@ "author": "ux-ui.pro",
   },
+  "css": "dist/index.css",
   "main": "dist/index.js",
-  "css": "dist/index.css",
   "module": "dist/index.module.js",
   "targets": {
+    "css": {
+      "source": "src/index.scss"
+    },
     "main": {
@@ -24,5 +27,2 @@ "source": "src/index.js"
       "source": "src/index.js"
-    },
-    "css": {
-      "source": "src/index.scss"
     }
@@ -29,0 +29,0 @@ },

README.md

@@ -13,3 +13,3 @@ <br>
 <p align="center">Input, textarea, material</p>
-<p align="center"><sup>700B gzipped</sup></p>
+<p align="center"><sup>1kB gzipped</sup></p>
 <p align="center"><a href="https://codepen.io/ux-ui/full/PoxqOvp">Demo</a></p>
@@ -16,0 +16,0 @@ <br>

src/index.js

@@ -0,34 +1,11 @@
+import notched from './utils/notched';
+import observers from './utils/observers';
+import listeners from './utils/listeners';
+
 const TextFields = {
     notches: [],
-    labels: null,
-    inputs: null,
 
-    wrap() {
-        this.labels = document.querySelectorAll('.floating-label');
-        this.labels.forEach((label) => {
-            const notchedOutline = label.closest('.notched-outline');
+    notched,
 
-            if (notchedOutline) {
-                this.notches.push({
-                    container: notchedOutline.parentNode,
-                    notch: notchedOutline.querySelector('.notched-outline__notch'),
-                });
-            } else {
-                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: outline.parentNode,
-                    notch: outline.querySelector('.notched-outline__notch'),
-                });
-            }
-        });
-
-        this.update();
-    },
-
-    handleFields() {
+    handlers() {
         const fields = [...document.querySelectorAll('.text-field-container input, .text-field-container textarea')];
@@ -42,76 +19,12 @@
             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');
-            }
-
-            if (field.required) {
-                label.classList.add('floating-label--required');
-            }
-
-            this.toggleFilledClass(field, container, fieldType);
-            this.addEventListeners(field, container, notch, fieldType);
+            observers(field, container, notch);
+            listeners(field, container, notch, fieldType);
         });
-
-        this.notches.forEach(({ 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');
-    },
-
     init() {
-        this.wrap();
-        this.handleFields();
+        this.notched();
+        this.handlers();
     },
@@ -121,4 +34,2 @@
         this.notches = [];
-        this.labels = null;
-        this.inputs = null;
     },
@@ -125,0 +36,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

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

Number of package files

24

increased by14.29%

Worsened metrics

Total package byte prevSize

74837

decreased by-2.39%

No dependency changes