Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
alpinejs - npm Package Compare versions
Comparing version 1.1.5 to 1.2.0
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Alpine=t()}(this,(function(){"use strict";function e(){return navigator.userAgent.includes("Node.js")||navigator.userAgent.includes("jsdom")}function t(e,n,i=!0){if(e.hasAttribute("x-data")&&!i)return;n(e);let s=e.firstElementChild;for(;s;)t(s,n,!1),s=s.nextElementSibling}function n(e,t,n={}){return new Function(["$data",...Object.keys(n)],`var result; with($data) { result = ${e} }; return result`)(t,...Object.values(n))}function i(e){return/x-(on|bind|data|text|model|if|show|cloak|transition|ref)/.test(e.name)}function s(e,t){return Array.from(e.attributes).filter(i).map(e=>{const t=e.name.match(/x-(on|bind|data|text|model|if|show|cloak|transition|ref)/),n=e.name.match(/:([a-zA-Z\-]+)/),i=e.name.match(/\.[^.\]]+(?=[^\]]*$)/g)||[];return{type:t?t[1]:null,value:n?n[1]:null,modifiers:i.map(e=>e.replace(".","")),expression:e.value}}).filter(e=>!t||e.type===t)}function r(e,t,n=!1){n&&t();const i=s(e,"transition");i.length<1&&t(),o(e,(i.find(e=>"enter"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"enter-start"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"enter-end"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),t,()=>{})}function a(e,t,n=!1){n&&t();const i=s(e,"transition");i.length<1&&t(),o(e,(i.find(e=>"leave"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"leave-start"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"leave-end"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),()=>{},t)}function o(e,t,n,i,s,r){e.classList.add(...n),e.classList.add(...t),requestAnimationFrame(()=>{const a=1e3*Number(getComputedStyle(e).transitionDuration.replace("s",""));s(),requestAnimationFrame(()=>{e.classList.remove(...n),e.classList.add(...i),setTimeout(()=>{r(),e.isConnected&&(e.classList.remove(...t),e.classList.remove(...i))},a)})})}class l{constructor(e){this.el=e;const t=n(this.el.getAttribute("x-data"),{});t.$refs=this.getRefsProxy(),this.data=this.wrapDataInObservable(t),this.initialize(),this.listenForNewElementsToInitialize()}wrapDataInObservable(e){this.concernedData=[];var t=this;const n=e=>({set(n,i,s){const r=e?`${e}.${i}`:i,a=Reflect.set(n,i,s);return-1===t.concernedData.indexOf(r)&&t.concernedData.push(r),t.refresh(),a},get(t,i){if("object"==typeof t[i]&&null!==t[i]){const s=e?`${e}.${i}`:i;return new Proxy(t[i],n(s))}return t[i]}});return new Proxy(e,n())}initialize(){t(this.el,e=>{this.initializeElement(e)})}initializeElement(e){s(e).forEach(({type:t,value:n,modifiers:i,expression:s})=>{switch(t){case"on":var r=n;this.registerListener(e,r,i,s);break;case"model":r="select"===e.tagName.toLowerCase()||["checkbox","radio"].includes(e.type)||i.includes("lazy")?"change":"input";const t=this.generateExpressionForXModelListener(e,i,s);this.registerListener(e,r,i,t);var a="value",{output:o}=this.evaluateReturnExpression(s);this.updateAttributeValue(e,a,o);break;case"bind":a=n;var{output:o}=this.evaluateReturnExpression(s);this.updateAttributeValue(e,a,o);break;case"text":var{output:o}=this.evaluateReturnExpression(s);this.updateTextValue(e,o);break;case"show":var{output:o}=this.evaluateReturnExpression(s);this.updateVisibility(e,o,!0);break;case"if":var{output:o}=this.evaluateReturnExpression(s);this.updatePresence(e,o);break;case"cloak":e.removeAttribute("x-cloak")}})}listenForNewElementsToInitialize(){const e=this.el;new MutationObserver(e=>{for(let t=0;t<e.length;t++){if(!e[t].target.closest("[x-data]").isSameNode(this.el))return;if("attributes"===e[t].type&&"x-data"===e[t].attributeName){const i=n(e[t].target.getAttribute("x-data"),{});Object.keys(i).forEach(e=>{this.data[e]!==i[e]&&(this.data[e]=i[e])})}e[t].addedNodes.length>0&&e[t].addedNodes.forEach(e=>{1===e.nodeType&&(e.matches("[x-data]")||s(e).length>0&&this.initializeElement(e))})}}).observe(e,{childList:!0,attributes:!0,subtree:!0})}refresh(){var e=this;const n={model:({el:t,output:n})=>{e.updateAttributeValue(t,"value",n)},bind:({el:t,attrName:n,output:i})=>{e.updateAttributeValue(t,n,i)},text:({el:t,output:n})=>{e.updateTextValue(t,n)},show:({el:t,output:n})=>{e.updateVisibility(t,n)},if:({el:t,output:n})=>{e.updatePresence(t,n)}};var i,r,a,o;(i=(n,i)=>{t(n,i),e.concernedData=[]},r=5,function(){var e=this,t=arguments,n=function(){o=null,a||i.apply(e,t)},s=a&&!o;clearTimeout(o),o=setTimeout(n,r),s&&i.apply(e,t)})(this.el,(function(t){s(t).forEach(({type:i,value:s,expression:r})=>{if(n[i]){var{output:a,deps:o}=e.evaluateReturnExpression(r);e.concernedData.filter(e=>o.includes(e)).length>0&&n[i]({el:t,attrName:s,output:a})}})}))}generateExpressionForXModelListener(e,t,n){var i="";return i="checkbox"===e.type?Array.isArray(this.data[n])?`$event.target.checked ? ${n}.concat([$event.target.value]) : ${n}.filter(i => i !== $event.target.value)`:"$event.target.checked":"select"===e.tagName.toLowerCase()&&e.multiple?t.includes("number")?"Array.from($event.target.selectedOptions).map(option => { return parseFloat(option.value || option.text) })":"Array.from($event.target.selectedOptions).map(option => { return option.value || option.text })":t.includes("number")?"parseFloat($event.target.value)":t.includes("trim")?"$event.target.value.trim()":"$event.target.value","radio"===e.type&&(e.hasAttribute("name")||e.setAttribute("name",n)),`${n} = ${i}`}registerListener(e,t,n,i){if(n.includes("away")){const s=r=>{e.contains(r.target)||e.offsetWidth<1&&e.offsetHeight<1||(this.runListenerHandler(i,r),n.includes("once")&&document.removeEventListener(t,s))};document.addEventListener(t,s)}else{const s=n.includes("window")?window:n.includes("document")?document:e,r=e=>{const a=n.filter(e=>"window"!==e).filter(e=>"document"!==e);"keydown"===t&&a.length>0&&!a.includes(e.key.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase())||(n.includes("prevent")&&e.preventDefault(),n.includes("stop")&&e.stopPropagation(),this.runListenerHandler(i,e),n.includes("once")&&s.removeEventListener(t,r))};s.addEventListener(t,r)}}runListenerHandler(e,t){this.evaluateCommandExpression(e,{$event:t})}evaluateReturnExpression(e){var t=[];const i=e=>({get(n,s){if("symbol"==typeof s)return;const r=e?`${e}.${s}`:s;return"object"!=typeof n[s]||null===n[s]||Array.isArray(n[s])?(t.push(r),n[s]):new Proxy(n[s],i(r))}});return{output:n(e,new Proxy(this.data,i())),deps:t}}evaluateCommandExpression(e,t){!function(e,t,n={}){new Function(["$data",...Object.keys(n)],`with($data) { ${e} }`)(t,...Object.values(n))}(e,this.data,t)}updateTextValue(e,t){e.innerText=t}updateVisibility(e,t,n=!1){t?r(e,()=>{1===e.style.length&&""!==e.style.display?e.removeAttribute("style"):e.style.removeProperty("display")},n):a(e,()=>{e.style.display="none"},n)}updatePresence(e,t){"template"!==e.nodeName.toLowerCase()&&console.warn("Alpine: [x-if] directive should only be added to <template> tags.");const n=e.nextElementSibling&&!0===e.nextElementSibling.__x_inserted_me;if(t&&!n){const t=document.importNode(e.content,!0);e.parentElement.insertBefore(t,e.nextElementSibling),e.nextElementSibling.__x_inserted_me=!0,r(e.nextElementSibling,()=>{})}else!t&&n&&a(e.nextElementSibling,()=>{e.nextElementSibling.remove()})}updateAttributeValue(e,t,n){if("value"===t)if("radio"===e.type)e.checked=e.value==n;else if("checkbox"===e.type)if(Array.isArray(n)){let t=!1;n.forEach(n=>{n==e.value&&(t=!0)}),e.checked=t}else e.checked=!!n;else"SELECT"===e.tagName?this.updateSelect(e,n):e.value=n;else"class"===t?Array.isArray(n)?e.setAttribute("class",n.join(" ")):Object.keys(n).forEach(t=>{n[t]?t.split(" ").forEach(t=>e.classList.add(t)):t.split(" ").forEach(t=>e.classList.remove(t))}):["disabled","readonly","required","checked","hidden"].includes(t)?n?e.setAttribute(t,""):e.removeAttribute(t):e.setAttribute(t,n)}updateSelect(e,t){const n=[].concat(t).map(e=>e+"");Array.from(e.options).forEach(e=>{e.selected=n.includes(e.value||e.text)})}getRefsProxy(){var e=this;return new Proxy({},{get(n,i){var s;return t(e.el,e=>{e.hasAttribute("x-ref")&&e.getAttribute("x-ref")===i&&(s=e)}),s}})}}const u={start:async function(){e()||await new Promise(e=>{"loading"==document.readyState?document.addEventListener("DOMContentLoaded",e):e()}),this.discoverComponents(e=>{this.initializeComponent(e)}),document.addEventListener("turbolinks:load",()=>{this.discoverUninitializedComponents(e=>{this.initializeComponent(e)})}),this.listenForNewUninitializedComponentsAtRunTime(e=>{this.initializeComponent(e)})},discoverComponents:function(e){document.querySelectorAll("[x-data]").forEach(t=>{e(t)})},discoverUninitializedComponents:function(e){const t=document.querySelectorAll("[x-data]");Array.from(t).filter(e=>void 0===e.__x).forEach(t=>{e(t)})},listenForNewUninitializedComponentsAtRunTime:function(e){const t=document.querySelector("body");new MutationObserver(t=>{for(let n=0;n<t.length;n++)t[n].addedNodes.length>0&&t[n].addedNodes.forEach(t=>{1===t.nodeType&&t.matches("[x-data]")&&e(t)})}).observe(t,{childList:!0,attributes:!0,subtree:!0})},initializeComponent:function(e){e.__x=new l(e)}};return e()||(window.Alpine=u,window.Alpine.start()),u})); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Alpine=t()}(this,(function(){"use strict";function e(){return navigator.userAgent.includes("Node.js")||navigator.userAgent.includes("jsdom")}function t(e,n,i=!0){if(e.hasAttribute("x-data")&&!i)return;n(e);let a=e.firstElementChild;for(;a;)t(a,n,!1),a=a.nextElementSibling}function n(e,t,n={}){return new Function(["$data",...Object.keys(n)],`var result; with($data) { result = ${e} }; return result`)(t,...Object.values(n))}function i(e){return/x-(on|bind|data|text|html|model|if|show|cloak|transition|ref)/.test(e.name)}function a(e,t){return Array.from(e.attributes).filter(i).map(e=>{const t=e.name.match(/x-(on|bind|data|text|html|model|if|show|cloak|transition|ref)/),n=e.name.match(/:([a-zA-Z\-]+)/),i=e.name.match(/\.[^.\]]+(?=[^\]]*$)/g)||[];return{type:t?t[1]:null,value:n?n[1]:null,modifiers:i.map(e=>e.replace(".","")),expression:e.value}}).filter(e=>!t||e.type===t)}function s(e,t,n=!1){n&&t();const i=a(e,"transition");i.length<1&&t(),o(e,(i.find(e=>"enter"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"enter-start"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"enter-end"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),t,()=>{})}function r(e,t,n=!1){n&&t();const i=a(e,"transition");i.length<1&&t(),o(e,(i.find(e=>"leave"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"leave-start"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"leave-end"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),()=>{},t)}function o(e,t,n,i,a,s){e.classList.add(...n),e.classList.add(...t),requestAnimationFrame(()=>{const r=1e3*Number(getComputedStyle(e).transitionDuration.replace("s",""));a(),requestAnimationFrame(()=>{e.classList.remove(...n),e.classList.add(...i),setTimeout(()=>{s(),e.isConnected&&(e.classList.remove(...t),e.classList.remove(...i))},r)})})}class l{constructor(e){this.el=e;const t=n(this.el.getAttribute("x-data"),{});t.$refs=this.getRefsProxy(),this.data=this.wrapDataInObservable(t),this.initialize(),this.listenForNewElementsToInitialize()}wrapDataInObservable(e){this.concernedData=[];var t=this;const n=e=>({set(n,i,a){const s=e?`${e}.${i}`:i,r=Reflect.set(n,i,a);return-1===t.concernedData.indexOf(s)&&t.concernedData.push(s),t.refresh(),r},get(t,i){if("object"==typeof t[i]&&null!==t[i]){const a=e?`${e}.${i}`:i;return new Proxy(t[i],n(a))}return t[i]}});return new Proxy(e,n())}initialize(){t(this.el,e=>{this.initializeElement(e)})}initializeElement(e){a(e).forEach(({type:t,value:n,modifiers:i,expression:a})=>{switch(t){case"on":var s=n;this.registerListener(e,s,i,a);break;case"model":s="select"===e.tagName.toLowerCase()||["checkbox","radio"].includes(e.type)||i.includes("lazy")?"change":"input";const t=this.generateExpressionForXModelListener(e,i,a);this.registerListener(e,s,i,t);var r="value",{output:o}=this.evaluateReturnExpression(a);this.updateAttributeValue(e,r,o);break;case"bind":r=n;var{output:o}=this.evaluateReturnExpression(a);this.updateAttributeValue(e,r,o);break;case"text":var{output:o}=this.evaluateReturnExpression(a);this.updateTextValue(e,o);break;case"html":var{output:o}=this.evaluateReturnExpression(a);this.updateHtmlValue(e,o);break;case"show":var{output:o}=this.evaluateReturnExpression(a);this.updateVisibility(e,o,!0);break;case"if":var{output:o}=this.evaluateReturnExpression(a);this.updatePresence(e,o);break;case"cloak":e.removeAttribute("x-cloak")}})}listenForNewElementsToInitialize(){const e=this.el;new MutationObserver(e=>{for(let t=0;t<e.length;t++){if(!e[t].target.closest("[x-data]").isSameNode(this.el))return;if("attributes"===e[t].type&&"x-data"===e[t].attributeName){const i=n(e[t].target.getAttribute("x-data"),{});Object.keys(i).forEach(e=>{this.data[e]!==i[e]&&(this.data[e]=i[e])})}e[t].addedNodes.length>0&&e[t].addedNodes.forEach(e=>{1===e.nodeType&&(e.matches("[x-data]")||a(e).length>0&&this.initializeElement(e))})}}).observe(e,{childList:!0,attributes:!0,subtree:!0})}refresh(){var e=this;const n={model:({el:t,output:n})=>{e.updateAttributeValue(t,"value",n)},bind:({el:t,attrName:n,output:i})=>{e.updateAttributeValue(t,n,i)},text:({el:t,output:n})=>{e.updateTextValue(t,n)},html:({el:t,output:n})=>{e.updateHtmlValue(t,n)},show:({el:t,output:n})=>{e.updateVisibility(t,n)},if:({el:t,output:n})=>{e.updatePresence(t,n)}};var i,s,r,o;(i=(n,i)=>{t(n,i),e.concernedData=[]},s=5,function(){var e=this,t=arguments,n=function(){o=null,r||i.apply(e,t)},a=r&&!o;clearTimeout(o),o=setTimeout(n,s),a&&i.apply(e,t)})(this.el,(function(t){a(t).forEach(({type:i,value:a,expression:s})=>{if(n[i]){var{output:r,deps:o}=e.evaluateReturnExpression(s);e.concernedData.filter(e=>o.includes(e)).length>0&&n[i]({el:t,attrName:a,output:r})}})}))}generateExpressionForXModelListener(e,t,n){var i="";return i="checkbox"===e.type?Array.isArray(this.data[n])?`$event.target.checked ? ${n}.concat([$event.target.value]) : ${n}.filter(i => i !== $event.target.value)`:"$event.target.checked":"select"===e.tagName.toLowerCase()&&e.multiple?t.includes("number")?"Array.from($event.target.selectedOptions).map(option => { return parseFloat(option.value || option.text) })":"Array.from($event.target.selectedOptions).map(option => { return option.value || option.text })":t.includes("number")?"parseFloat($event.target.value)":t.includes("trim")?"$event.target.value.trim()":"$event.target.value","radio"===e.type&&(e.hasAttribute("name")||e.setAttribute("name",n)),`${n} = ${i}`}registerListener(e,t,n,i){if(n.includes("away")){const a=s=>{e.contains(s.target)||e.offsetWidth<1&&e.offsetHeight<1||(this.runListenerHandler(i,s),n.includes("once")&&document.removeEventListener(t,a))};document.addEventListener(t,a)}else{const a=n.includes("window")?window:n.includes("document")?document:e,s=e=>{const r=n.filter(e=>"window"!==e).filter(e=>"document"!==e);"keydown"===t&&r.length>0&&!r.includes(e.key.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase())||(n.includes("prevent")&&e.preventDefault(),n.includes("stop")&&e.stopPropagation(),this.runListenerHandler(i,e),n.includes("once")&&a.removeEventListener(t,s))};a.addEventListener(t,s)}}runListenerHandler(e,t){this.evaluateCommandExpression(e,{$event:t})}evaluateReturnExpression(e){var t=[];const i=e=>({get(n,a){if("symbol"==typeof a)return;const s=e?`${e}.${a}`:a;return"object"!=typeof n[a]||null===n[a]||Array.isArray(n[a])?(t.push(s),n[a]):new Proxy(n[a],i(s))}});return{output:n(e,new Proxy(this.data,i())),deps:t}}evaluateCommandExpression(e,t){!function(e,t,n={}){new Function(["$data",...Object.keys(n)],`with($data) { ${e} }`)(t,...Object.values(n))}(e,this.data,t)}updateTextValue(e,t){e.innerText=t}updateHtmlValue(e,t){e.innerHTML=t}updateVisibility(e,t,n=!1){t?s(e,()=>{1===e.style.length&&""!==e.style.display?e.removeAttribute("style"):e.style.removeProperty("display")},n):r(e,()=>{e.style.display="none"},n)}updatePresence(e,t){"template"!==e.nodeName.toLowerCase()&&console.warn("Alpine: [x-if] directive should only be added to <template> tags.");const n=e.nextElementSibling&&!0===e.nextElementSibling.__x_inserted_me;if(t&&!n){const t=document.importNode(e.content,!0);e.parentElement.insertBefore(t,e.nextElementSibling),e.nextElementSibling.__x_inserted_me=!0,s(e.nextElementSibling,()=>{})}else!t&&n&&r(e.nextElementSibling,()=>{e.nextElementSibling.remove()})}updateAttributeValue(e,t,n){if("value"===t)if("radio"===e.type)e.checked=e.value==n;else if("checkbox"===e.type)if(Array.isArray(n)){let t=!1;n.forEach(n=>{n==e.value&&(t=!0)}),e.checked=t}else e.checked=!!n;else"SELECT"===e.tagName?this.updateSelect(e,n):e.value=n;else"class"===t?Array.isArray(n)?e.setAttribute("class",n.join(" ")):Object.keys(n).forEach(t=>{n[t]?t.split(" ").forEach(t=>e.classList.add(t)):t.split(" ").forEach(t=>e.classList.remove(t))}):["disabled","readonly","required","checked","hidden"].includes(t)?n?e.setAttribute(t,""):e.removeAttribute(t):e.setAttribute(t,n)}updateSelect(e,t){const n=[].concat(t).map(e=>e+"");Array.from(e.options).forEach(e=>{e.selected=n.includes(e.value||e.text)})}getRefsProxy(){var e=this;return new Proxy({},{get(n,i){var a;return t(e.el,e=>{e.hasAttribute("x-ref")&&e.getAttribute("x-ref")===i&&(a=e)}),a}})}}const u={start:async function(){e()||await new Promise(e=>{"loading"==document.readyState?document.addEventListener("DOMContentLoaded",e):e()}),this.discoverComponents(e=>{this.initializeComponent(e)}),document.addEventListener("turbolinks:load",()=>{this.discoverUninitializedComponents(e=>{this.initializeComponent(e)})}),this.listenForNewUninitializedComponentsAtRunTime(e=>{this.initializeComponent(e)})},discoverComponents:function(e){document.querySelectorAll("[x-data]").forEach(t=>{e(t)})},discoverUninitializedComponents:function(e){const t=document.querySelectorAll("[x-data]");Array.from(t).filter(e=>void 0===e.__x).forEach(t=>{e(t)})},listenForNewUninitializedComponentsAtRunTime:function(e){const t=document.querySelector("body");new MutationObserver(t=>{for(let n=0;n<t.length;n++)t[n].addedNodes.length>0&&t[n].addedNodes.forEach(t=>{1===t.nodeType&&t.matches("[x-data]")&&e(t)})}).observe(t,{childList:!0,attributes:!0,subtree:!0})},initializeComponent:function(e){e.__x=new l(e)}};return e()||(window.Alpine=u,window.Alpine.start()),u})); | ||
| //# sourceMappingURL=alpine.js.map |
| { | ||
| "main": "dist/alpine.js", | ||
| "name": "alpinejs", | ||
| "version": "1.1.5", | ||
| "version": "1.2.0", | ||
| "repository": { | ||
@@ -13,3 +13,4 @@ "type": "git", | ||
| "test": "npx jest", | ||
| "test:debug": "node --inspect node_modules/.bin/jest --runInBand" | ||
| "test:debug": "node --inspect node_modules/.bin/jest --runInBand", | ||
| "postpublish" : "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags" | ||
| }, | ||
@@ -16,0 +17,0 @@ "author": "Caleb Porzio", |
@@ -15,3 +15,3 @@ # Alpine.js | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.1.5/dist/alpine.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.2.0/dist/alpine.js" defer></script> | ||
| ``` | ||
@@ -86,3 +86,3 @@ | ||
| There are 9 directives available to you: | ||
| There are 10 directives available to you: | ||
@@ -97,4 +97,6 @@ | Directive | ||
| | [`x-text`](#x-text) | | ||
| | [`x-html`](#x-html) | | ||
| | [`x-ref`](#x-ref) | | ||
| | [`x-if`](#x-if) | | ||
| | [`x-transition`](#x-transition) | | ||
| | [`x-cloak`](#x-cloak) | | ||
@@ -261,2 +263,11 @@ | ||
| ### `x-html` | ||
| **Example:** `<span x-html="foo"></span>` | ||
| **Structure:** `<span x-html="[expression]"` | ||
| `x-html` works similarly to `x-bind`, except instead of updating the value of an attribute, it will update the `innerHTML` of an element. | ||
| --- | ||
| ### `x-ref` | ||
@@ -286,2 +297,44 @@ **Example:** `<div x-ref="foo"></div><button x-on:click="$refs.foo.innerText = 'bar'"></button>` | ||
| ### `x-transition` | ||
| **Example:** | ||
| ```html | ||
| <div | ||
| x-show="open" | ||
| x-transition:enter="ease-out transition-slow" | ||
| x-transition:enter-start="opacity-0 scale-90" | ||
| x-transition:enter-end="opacity-100 scale-100" | ||
| x-transition:leave="ease-in transition-slow" | ||
| x-transition:leave-start="opacity-100 scale-100" | ||
| x-transition:leave-end="opacity-0 scale-90" | ||
| >...</div> | ||
| ``` | ||
| ```html | ||
| <template x-if="open"> | ||
| <div | ||
| x-transition:enter="ease-out transition-slow" | ||
| x-transition:enter-start="opacity-0 scale-90" | ||
| x-transition:enter-end="opacity-100 scale-100" | ||
| x-transition:leave="ease-in transition-slow" | ||
| x-transition:leave-start="opacity-100 scale-100" | ||
| x-transition:leave-end="opacity-0 scale-90" | ||
| >...</div> | ||
| </template> | ||
| ``` | ||
| Alpine offers 6 different transition directives for applying classes to various stages of an element's transition between "hidden" and "shown" states. These directives work both with `x-show` AND `x-if`. | ||
| These behave exactly like VueJs's transition directives, except they have different, more sensible names: | ||
| | Directive | Description | | ||
| | --- | --- | | ||
| | `:enter` | Applied during the entire entering phase. | | ||
| | `:enter-start` | Added before element is inserted, removed one frame after element is inserted. | | ||
| | `:enter-end` | Added one frame after element is inserted (at the same time `enter-start` is removed), removed when transition/animation finishes. | ||
| | `:leave` | Applied during the entire leaving phase. | | ||
| | `:leave-start` | Added immediately when a leaving transition is triggered, removed after one frame. | | ||
| | `:leave-end` | Added one frame after a leaving transition is triggered (at the same time `leave-start` is removed), removed when the transition/animation finishes. | ||
| --- | ||
| ### `x-cloak` | ||
@@ -288,0 +341,0 @@ **Example:** `<div x-data="{}" x-cloak></div>` |
@@ -93,2 +93,7 @@ import { walkSkippingNestedComponents, kebabCase, saferEval, saferEvalNoReturn, getXAttrs, debounce, transitionIn, transitionOut } from './utils' | ||
| case 'html': | ||
| var { output } = this.evaluateReturnExpression(expression) | ||
| this.updateHtmlValue(el, output) | ||
| break; | ||
| case 'show': | ||
@@ -162,2 +167,3 @@ var { output } = this.evaluateReturnExpression(expression) | ||
| 'text': ({el, output}) => { self.updateTextValue(el, output) }, | ||
| 'html': ({el, output}) => { self.updateHtmlValue(el, output) }, | ||
| 'show': ({el, output}) => { self.updateVisibility(el, output) }, | ||
@@ -306,2 +312,6 @@ 'if': ({el, output}) => { self.updatePresence(el, output) }, | ||
| updateHtmlValue(el, value) { | ||
| el.innerHTML = value | ||
| } | ||
| updateVisibility(el, value, initialUpdate = false) { | ||
@@ -308,0 +318,0 @@ if (! value) { |
@@ -69,3 +69,3 @@ | ||
| export function isXAttr(attr) { | ||
| const xAttrRE = /x-(on|bind|data|text|model|if|show|cloak|transition|ref)/ | ||
| const xAttrRE = /x-(on|bind|data|text|html|model|if|show|cloak|transition|ref)/ | ||
@@ -79,3 +79,3 @@ return xAttrRE.test(attr.name) | ||
| .map(attr => { | ||
| const typeMatch = attr.name.match(/x-(on|bind|data|text|model|if|show|cloak|transition|ref)/) | ||
| const typeMatch = attr.name.match(/x-(on|bind|data|text|html|model|if|show|cloak|transition|ref)/) | ||
| const valueMatch = attr.name.match(/:([a-zA-Z\-]+)/) | ||
@@ -82,0 +82,0 @@ const modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [] |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis 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
- increased by2.62%
132642
- Number of package files
- increased by6.9%
31
- Lines of code
- increased by2.3%
1559
- Number of lines in readme file
- increased by18.15%
345
No dependency changes