axentix/dist/components/forms/forms.min.js

Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.

(function(l,c){typeof exports=="object"&&typeof module!="undefined"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(l=typeof globalThis!="undefined"?globalThis:l||self,c(l.Forms={}))})(this,function(l){"use strict";const c={components:[],plugins:[],prefix:"ax",mode:""},u=e=>`--${c.prefix}-${e}`,S=e=>e.checkValidity()||e.validationMessage,R=(e,t)=>{const s=document.createElement("div");s.axGenerated=!0,e.appendChild(s),s.classList.add("form-helper-invalid"),s.innerHTML=t},w=e=>{const t=e.querySelector(".form-helper-invalid");t&&t.axGenerated&&t.remove()},m=e=>{e.classList.remove("form-valid","form-invalid","form-no-helper"),w(e)},h=(e,t)=>{const s=e.getAttribute("data-form-validate");let r=!1;if(s){const a=s.toLowerCase().split(",");if(r=a.includes("auto"),a.includes("lazy")&&t==="input")return}const n=S(e),o=e.closest(".form-field, .form-file");return m(o),n!==!0?(r&&typeof n=="string"?R(o,n):o.querySelector(".form-helper-invalid")||o.classList.add("form-no-helper"),o.classList.add("form-invalid"),!1):(o.classList.add("form-valid"),o.querySelector(".form-helper-valid")||o.classList.add("form-no-helper"),!0)},C=e=>{e.querySelectorAll("[data-form-validate]").forEach(s=>m(s.closest(".form-field, .form-file")))},T=e=>[...e.querySelectorAll("[data-form-validate]")].map(s=>h(s,"change")).every(s=>s);let p=!0;const f=e=>{e.forEach(y)},v=e=>{if(p){p=!1;return}setTimeout(()=>{f(e)},10)},y=e=>{const t=e.closest(".form-field"),s=t.querySelector(".form-custom-select"),r=t.classList.contains("active"),n=["date","month","week","time"];let o=s&&e.tagName==="DIV"&&e.innerText.length>0;s||(o=e.value.length>0||e.tagName!=="SELECT"&&e.placeholder.length>0||e.tagName==="SELECT"||n.some(d=>e.matches(`[type="${d}"]`)));const a=document.activeElement===e,i=e.hasAttribute("disabled")||e.hasAttribute("readonly");e.firstInit?(L(e,r,o,a,t,s),e.firstInit=!1,e.isInit=!0):i||L(e,r,o,a,t,s)},L=(e,t,s,r,n,o)=>{const a=e.type==="textarea",i=n.querySelector("label:not(.form-check)");!t&&(s||r)?n.classList.add("active"):t&&!(s||r)&&n.classList.remove("active"),a?i&&(i.style.backgroundColor=I(i)):q(e,n,o,i),r&&!a?n.classList.add("is-focused"):o||n.classList.remove("is-focused"),r&&a?n.classList.add("is-textarea-focused"):n.classList.remove("is-textarea-focused")},q=(e,t,s,r)=>{const n=e.clientWidth,o=e.offsetLeft,a=e.clientHeight+(s?s.offsetTop:e.offsetTop)+"px",i=e.closest(".form-material").classList.contains("form-material-bordered");t.style.setProperty(u("form-material-position"),a);let d=o,E="left",B=n+"px",A=0;t.classList.contains("form-rtl")&&(E="right",d=t.clientWidth-n-o),t.style.setProperty(u(`form-material-${E}-offset`),d+"px"),d!=0&&(A=o),t.style.setProperty(u("form-material-width"),B),r&&(r.style.left=A+"px",i&&(r.style.backgroundColor=I(r)))},g=e=>{const t=window.getComputedStyle(e).backgroundColor;if(t&&!["transparent","rgba(0, 0, 0, 0)"].includes(t))return t},I=e=>{e.style.backgroundColor="";let t=e;for(;t.parentElement;){const r=g(t);if(r)return r;t=t.parentElement}const s=g(document.documentElement);return s||"white"},b=(e,t)=>{e.hasAttribute("data-form-validate")&&h(e,t.type)},M=(e,t)=>{e.forEach(s=>{s===t.target&&y(s)})},k=(e,t)=>{t.target.tagName==="FORM"&&t.target.classList.contains("form-material")&&v(e)},V=e=>{e.forEach(o=>{o.firstInit=!0,o.validateRef=b.bind(null,o),o.addEventListener("input",o.validateRef),o.addEventListener("change",o.validateRef)}),f(e);const t=M.bind(null,e);document.addEventListener("focus",t,!0),document.addEventListener("blur",t,!0);const s=v.bind(null,e);window.addEventListener("pageshow",s);const r=k.bind(null,e);document.addEventListener("reset",r);const n=f.bind(null,e);window.addEventListener("resize",n)},D=(e,t)=>{const s=e.files;s.length>1?t.innerHTML=Array.from(s).map(r=>r.name).join(", "):s[0]&&(t.innerHTML=s[0].name)},O=e=>{if(e.isInit)return;e.isInit=!0;const t=e.querySelector('input[type="file"]'),s=e.querySelector(".form-file-path");t.handleRef=D.bind(null,t,s),t.validateRef=b.bind(null,t),t.addEventListener("change",t.handleRef),t.addEventListener("input",t.validateRef),t.addEventListener("change",t.validateRef)},P=()=>{const e=Array.from(document.querySelectorAll(".form-file"));try{e.forEach(O)}catch(t){console.error("[Axentix] Form file error",t)}},x=(e=document.querySelectorAll(".form-material .form-field:not(.form-default) .form-control:not(.form-custom-select)"))=>{const{setupInputs:t,detectInputs:s}=Array.from(e).reduce((r,n)=>(n.isInit?r.detectInputs.push(n):r.setupInputs.push(n),r),{setupInputs:[],detectInputs:[]});P();try{t.length>0&&V(t),s.length>0&&f(s)}catch(r){console.error("[Axentix] Material forms error",r)}};document.addEventListener("DOMContentLoaded",()=>x());const $={updateInputs:x,validate:T,resetValidation:C};l.Forms=$,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});