UNPKG

@ramstack/alpinegear-main

Version:

@ramstack/alpinegear-main is a combined plugin that includes several Alpine.js directives, providing a convenient all-in-one package.

1 lines 7.19 kB
!function(){"use strict";const e=(...e)=>console.warn("alpinegear.js:",...e),t=Array.isArray,n=e=>null==e,o=e=>"checkbox"===e.type||"radio"===e.type,a=e=>e.matches("template"),r=e=>e.nodeType===Node.ELEMENT_NODE,i=e=>t(e)?e:[e],c=(e,t)=>e==t,l=(e,t)=>e.findIndex(e=>e==t),u=(e,t)=>e.includes(t),s=(e,t,n,o)=>(e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)),d=e=>"object"==typeof e?JSON.parse(JSON.stringify(e)):e;function f(e,...t){const n=e(...t);return()=>{let e;return n(t=>e=t),t=e,"function"==typeof t?.get?e.get():e;var t}}function p(e,...t){const n=e(...t);t[t.length-1]=`${t.at(-1)} = __val`;const o=e(...t);return e=>{let t;n(e=>t=e),function(e){return"function"==typeof e?.set}(t)?t.set(e):o(()=>{},{scope:{__val:e}})}}const m=Symbol();let h;function v(e,t,n=null){const{effect:o,release:a}=Alpine;let r,i,c,l=!1;const u=o(()=>{r=e(),l||(n?.deep&&JSON.stringify(r),i=r),(l||(n?.immediate??1))&&(c=setTimeout(()=>{t(r,i),i=r})),l=!0});return()=>{clearTimeout(c),a(u)}}const b=new Map("value,checked,files,innerHTML,innerText,textContent,videoHeight,videoWidth,naturalHeight,naturalWidth,clientHeight,clientWidth,offsetHeight,offsetWidth,indeterminate,open,group".split(",").map(e=>[e.trim().toLowerCase(),e.trim()]));function g(e,t,{addScopeToNode:n,cleanup:o,initTree:i,mutateDom:c,scope:l={}}){if(e._r_block)return;document.body._r_block??=(()=>{const e=new MutationObserver(e=>{for(let t of e)for(let e of t.addedNodes)e._r_block?.update()});return e.observe(document.body,{childList:!0,subtree:!0}),e})();let u=a(t)?[...t.content.cloneNode(!0).childNodes]:[t.cloneNode(!0)];c(()=>{for(let t of u)r(t)&&n(t,l,e),e.parentElement.insertBefore(t,e),r(t)&&i(t)}),e._r_block={template:t,update(){c(()=>{for(let t of u??[])e.parentElement.insertBefore(t,e)})},delete(){e._r_block=null;for(let e of u??[])e.remove();u=null}},o(()=>e._r_block?.delete())}function x(r){(function({directive:a,entangle:r,evaluateLater:g,mapAttributes:x,mutateDom:T,prefixed:_}){x(e=>({name:e.name.replace(/^&/,_("bound:")),value:e.value})),a("bound",(a,{expression:x,value:_,modifiers:k},{effect:N,cleanup:y})=>{if(!_)return void e("x-bound directive expects the presence of a bound property name");const E=a.tagName.toUpperCase();x=x?.trim();const L=b.get(_.trim().replace("-","").toLowerCase());x||=L;const w=f(g,a,x),D=p(g,a,x),S=()=>c(a[L],w())||T(()=>a[L]=w()),A=()=>D((e=>"number"===e.type||"range"===e.type)(a)?function(e){return""===e?null:+e}(a[L]):a[L]);let C;switch(L){case"value":!function(){switch(E){case"INPUT":case"TEXTAREA":n(w())&&A(),N(S),y(s(a,"input",A)),C=!0;break;case"SELECT":setTimeout(()=>{n(w())&&A(),N(()=>function(e,t){for(const n of e.options)n.selected=l(t,n.value)>=0}(a,i(w()??[]))),y(s(a,"change",()=>D(function(e){return e.multiple?[...e.selectedOptions].map(e=>e.value):e.value}(a))))}),C=!0}}();break;case"checked":o(a)&&(N(S),y(s(a,"change",A)),C=!0);break;case"files":"file"===a.type&&(w()instanceof FileList||A(),N(S),y(s(a,"input",A)),C=!0);break;case"innerHTML":case"innerText":case"textContent":a.isContentEditable&&(n(w())&&A(),N(S),y(s(a,"input",A)),C=!0);break;case"videoHeight":case"videoWidth":H("VIDEO","resize");break;case"naturalHeight":case"naturalWidth":H("IMG","load");break;case"clientHeight":case"clientWidth":case"offsetHeight":case"offsetWidth":y(function(e,t){return h??=new ResizeObserver(e=>{for(const t of e)for(const e of t.target[m]?.values()??[])e(t)}),e[m]??=new Set,e[m].add(t),h.observe(e),()=>{e[m].delete(t),e[m].size||(h.unobserve(e),e[m]=null)}}(a,A)),C=!0;break;case"indeterminate":"checkbox"===a.type&&(n(w())&&A(),N(S),y(s(a,"change",A)),C=!0);break;case"open":!function(){const[e,t]=["DETAILS"===E,"DIALOG"===E];(e||t)&&((t||n(w()))&&A(),e&&N(S),y(s(a,"toggle",A)),C=!0)}();break;case"group":o(a)&&(a.name||T(()=>a.name=x),N(()=>T(()=>function(e,n){e.checked=t(n)?l(n,e.value)>=0:c(e.value,n)}(a,w()??[]))),y(s(a,"input",()=>D(function(e,t){if("radio"===e.type)return e.value;t=i(t);const n=l(t,e.value);return e.checked?n>=0||t.push(e.value):n>=0&&t.splice(n,1),t}(a,w())))),C=!0)}if(!C){const t=u(k,"in")?"in":u(k,"out")?"out":"inout",n=x===_?((e,t)=>{for(;e&&!t(e);)e=(e._x_teleportBack??e).parentElement;return e})(a.parentNode,e=>e._x_dataStack):a;if(!a._x_dataStack)return void e("x-bound directive requires the presence of the x-data directive to bind component properties");if(!n)return void e(`x-bound directive cannot find the parent scope where the '${_}' property is defined`);const o={get:f(g,n,x),set:p(g,n,x)},i={get:f(g,a,_),set:p(g,a,_)};switch(t){case"in":y(v(()=>o.get(),e=>i.set(d(e))));break;case"out":y(v(()=>i.get(),e=>o.set(d(e))));break;default:y(r(o,i))}}function H(e,t){E===e&&(A(),y(s(a,t,A)),C=!0)}})})(r),function({directive:e,evaluateLater:t,mutateDom:n}){e("format",(e,{modifiers:o},{effect:a})=>{const r=u(o,"once"),i=e=>e.hasAttribute("x-format");function c(e){r?n(()=>e()):a(()=>n(()=>e()))}!function o(a){switch(a.nodeType){case Node.TEXT_NODE:!function(e){const o=e.textContent.split(/{{(?<expr>.+?)}}/g);if(o.length>1){const a=new DocumentFragment;for(let n=0;o.length>n;n++)if(n%2==0)a.appendChild(document.createTextNode(o[n]));else{const r=f(t,e.parentNode,o[n]),i=document.createTextNode("");a.append(i),c(()=>i.textContent=r())}n(()=>e.parentElement.replaceChild(a,e))}}(a);break;case Node.ELEMENT_NODE:if(a!==e&&(a.hasAttribute("x-data")&&!i(a)&&a.setAttribute("x-format",""),i(a)))break;!function(e){for(let t of e.childNodes)o(t)}(a),function(e){for(let n of e.attributes){const o=[...n.value.matchAll(/{{(?<expr>.+?)}}/g)];if(o.length){const a=new Map(o.map(n=>[n.groups.expr,f(t,e,n.groups.expr)])),r=n.value;c(()=>n.value=r.replace(/{{(?<expr>.+?)}}/g,(e,t)=>a.get(t)()))}}}(a)}}(e)})}(r),function({addScopeToNode:t,directive:n,initTree:o,mutateDom:r}){n("fragment",(n,{},{cleanup:i})=>{a(n)?g(n,n,{addScopeToNode:t,cleanup:i,initTree:o,mutateDom:r}):e("x-fragment can only be used on a 'template' tag")})}(r),function({addScopeToNode:t,directive:n,initTree:o,mutateDom:r}){n("match",(n,{},{cleanup:i,effect:c,evaluateLater:l})=>{if(!a(n))return void e("x-match can only be used on a 'template' tag");const u=[];for(let e of n.content.children){const t=e.getAttribute("x-case");null!==t?u.push({el:e,get_value:f(l,t)}):e.hasAttribute("x-default")&&u.push({el:e,get_value:()=>!0,default:!0})}const s=()=>n._r_block?.delete();c(()=>{let e;for(let t of u)t.get_value()&&!e&&(e=t);var a;e?(a=e,n._r_block?.template!==a.el&&(s(),g(n,a.el,{addScopeToNode:t,cleanup:i,initTree:o,mutateDom:r}))):s()})})}(r),function(t){t.directive("template",(t,{expression:n})=>{if(a(t))return void e("x-template cannot be used on a 'template' tag");const o=document.getElementById(n);o&&a(o)?queueMicrotask(()=>{t.innerHTML="",t.append(o.content.cloneNode(!0))}):e("x-template directive can only reference the template tag")})}(r),function({addScopeToNode:t,directive:n,initTree:o,mutateDom:r}){n("when",(n,{expression:i},{cleanup:c,effect:l,evaluateLater:u})=>{if(!a(n))return void e("x-when can only be used on a 'template' tag");const s=f(u,i);l(()=>s()?g(n,n,{addScopeToNode:t,cleanup:c,initTree:o,mutateDom:r}):n._r_block?.delete())})}(r)}s(document,"alpine:init",()=>Alpine.plugin(x))}();