drow.min.js

var DrowElements=[];const Drow={store:{state:new Proxy({},{set:(t,e,s)=>(t[e]=s,Drow.store.listeners.forEach(t=>t.render()),!0)}),listeners:[],subscribe(t){this.listeners.push(t)},unsubscribe(t){this.listeners=this.listeners.filter(e=>e!==t)}},register(t){for(const e of DrowElements)if(e===t.name)return void console.log(`Drow ${t.name} already Registered`);return DrowElements.push(t.name),window.customElements.define(t.name,class extends HTMLElement{static get observedAttributes(){return t.props||[]}constructor(){super(),this.setAttribute("Drow-component",!0),this.setAttribute("Drow-name",t.name),this.init=typeof t.init==="function"?t.init:function(){},this.refs={},this.state=new Proxy(t.state||{},{set:(t,e,s)=>(t[e]=s,this.render(),!0)})}connectedCallback(){t.shadow&&!this.shadowRoot&&this.attachShadow({mode:"open"}),t.useStore&&Drow.store.subscribe(this),void 0===this._originalContent&&(this._originalContent=this.innerHTML),this.render(),typeof this.init==="function"&&this.init(t),void 0!==t.append&&""!==t.append&&document.querySelector("head").replaceChild(this,document.querySelector("head"))}disconnectedCallback(){t.useStore&&Drow.store.unsubscribe(this),t.disconnected&&"function"==typeof t.disconnected&&t.disconnected.call(this)}render(){let e=t.template,s={...this.state};if(t.computed&&Object.keys(t.computed).forEach(e=>{s[e]=t.computed[e].call(this,this.state)}),s)for(const[t,r]of Object.entries(s))e=e.replaceAll(`{{${t}}}`,r);if(t.props&&t.props.forEach(t=>{const s=this.getAttribute(t)||"";e=e.replaceAll(`{{${t}}}`,s)}),t.shadow)e=e.replaceAll("{{bind}}","<slot></slot>");else if(e.includes("<slot")||e.includes("{{bind}}")){const t=document.createElement("template");t.innerHTML=e;const s=t.content,r=document.createElement("div");r.innerHTML=this._originalContent||"",s.querySelectorAll("slot[name]").forEach(t=>{const e=t.getAttribute("name"),s=r.querySelectorAll(`[slot="${e}"]`);if(s.length>0){const e=document.createDocumentFragment();s.forEach(t=>e.appendChild(t)),t.replaceWith(e)}else{const e=document.createDocumentFragment();for(;t.firstChild;)e.appendChild(t.firstChild);t.replaceWith(e)}});const o=s.querySelector("slot:not([name])");if(o){const t=document.createDocumentFragment();for(;r.firstChild;)t.appendChild(r.firstChild);o.replaceWith(t)}e=t.innerHTML,this._originalContent&&(e=e.replaceAll("{{bind}}",this._originalContent))}let r="";if(t.css)if(t.shadow)r=`<style>${t.css}</style>`;else{const e=t.css.replaceAll(":host","&");r=`<style>${t.name} { ${e} }</style>`}const o=`<drow-wrapper>${r}${e}</drow-wrapper>`;let i=(this.shadowRoot||document).activeElement;this.shadowRoot||i&&this.contains(i)||(i=null);let n=null,a=0,l=0;if(i&&(n=i.getAttribute("ref")||i.getAttribute("d-ref")||i.getAttribute("d-model"),!n||"text"!==i.type&&"TEXTAREA"!==i.tagName||(a=i.selectionStart,l=i.selectionEnd)),t.shadow&&this.shadowRoot?this.shadowRoot.innerHTML=o:this.innerHTML=o,this.processDirectives(),this.applyEvents(),n&&this.refs[n]){const t=this.refs[n];t.focus(),!t.setSelectionRange||"text"!==t.type&&"TEXTAREA"!==t.tagName||t.setSelectionRange(a,l)}}updateVars(t){let e=t;for(let t=0;t<this.getAttributeNames().length;t++){let s=this.getAttributeNames()[t],r=this.getAttribute(s);"bind"!=s&&(e.template=e.template.replaceAll("{{"+s+"}}",r))}return e}processDirectives(){const t=this.shadowRoot||this;t.querySelectorAll("[d-for]").forEach(t=>{const e=t.getAttribute("d-for"),[s,r]=e.split(" in ").map(t=>t.trim()),o=this.state[r];if(Array.isArray(o)){const e=t.parentNode;o.forEach(r=>{const o=t.cloneNode(!0);o.removeAttribute("d-for");let i=o.outerHTML;"object"==typeof r?Object.keys(r).forEach(t=>{i=i.replaceAll(`{{${s}.${t}}}`,r[t])}):i=i.replaceAll(`{{${s}}}`,r),e.insertAdjacentHTML("beforebegin",i)}),t.remove()}}),t.querySelectorAll("[d-if]").forEach(t=>{const e=t.getAttribute("d-if"),s=e.startsWith("!"),r=s?e.substring(1):e,o=this.state[r];(s?o:!o)?t.remove():t.removeAttribute("d-if")}),t.querySelectorAll("[d-show]").forEach(t=>{const e=t.getAttribute("d-show"),s=e.startsWith("!"),r=s?e.substring(1):e,o=this.state[r];t.style.display=(s?o:!o)?"none":"",t.removeAttribute("d-show")}),t.querySelectorAll("*").forEach(t=>{Array.from(t.attributes).forEach(e=>{if(e.name.startsWith("d-class:")){const s=e.name.substring(8),r=e.value,o=r.startsWith("!"),i=o?r.substring(1):r,n=this.state[i];(o?!n:n)?t.classList.add(s):t.classList.remove(s),t.removeAttribute(e.name)}})}),t.querySelectorAll("*").forEach(t=>{Array.from(t.attributes).forEach(e=>{if(e.name.startsWith("d-bind:")){const s=e.name.substring(7),r=e.value;void 0!==this.state[r]&&t.setAttribute(s,this.state[r]),t.removeAttribute(e.name)}})}),t.querySelectorAll("[d-html]").forEach(t=>{const e=t.getAttribute("d-html");void 0!==this.state[e]&&(t.innerHTML=this.state[e]),t.removeAttribute("d-html")})}applyEvents(){const e=this.shadowRoot||this;this.refs={};e.querySelectorAll("*").forEach(e=>{Array.from(e.attributes).forEach(s=>{if(s.name.startsWith("@")){let r=s.name.substring(1),o=[];if(r.includes(".")){const t=r.split(".");r=t[0],o=t.slice(1)}const i=s.value;t.methods&&"function"==typeof t.methods[i]&&(e.addEventListener(r,e=>{o.includes("prevent")&&e.preventDefault(),o.includes("stop")&&e.stopPropagation(),t.methods[i].call(this,e)}),e.removeAttribute(s.name))}if("ref"!==s.name&&"d-ref"!==s.name||(this.refs[s.value]=e),"d-model"===s.name){const t=s.value;e.hasAttribute("ref")||e.hasAttribute("d-ref")||(this.refs[t]=e);const r="checkbox"===e.type?"checked":"value",o="checkbox"===e.type||"radio"===e.type?"change":"input";void 0!==this.state[t]&&(e[r]=this.state[t]),e.addEventListener(o,e=>{this.state[t]=e.target[r]})}})})}getWrap(){return(this.shadowRoot||this).querySelector("drow-wrapper")}getProp(t){return this.getAttribute(t)}getComp(){return this}attributeChangedCallback(e,s,r){var o={name:e,oldValue:s,newValue:r,comp:this.getComp()};this.render();try{t.watch(o)}catch(t){}}}),console.log(`Drow ${t.name} Registered`),this}};"undefined"!=typeof process&&"node"===process.release.name?module.exports=Drow:window.Drow=Drow;