Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
alpinejs - npm Package Compare versions
Comparing version 1.0.0 to 1.1.1
@@ -891,3 +891,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| set: function set(obj, property, value) { | ||
| var propertyName = keyPrefix + '.' + property; | ||
| var propertyName = keyPrefix ? "".concat(keyPrefix, ".").concat(property) : property; | ||
| var setWasSuccessful = Reflect.set(obj, property, value); | ||
@@ -904,3 +904,4 @@ | ||
| if (_typeof(target[key]) === 'object' && target[key] !== null) { | ||
| return new Proxy(target[key], proxyHandler(keyPrefix + '.' + key)); | ||
| var propertyName = keyPrefix ? "".concat(keyPrefix, ".").concat(key) : key; | ||
| return new Proxy(target[key], proxyHandler(propertyName)); | ||
| } | ||
@@ -987,2 +988,10 @@ | ||
| case 'if': | ||
| var _this2$evaluateReturn5 = _this2.evaluateReturnExpression(expression), | ||
| output = _this2$evaluateReturn5.output; | ||
| _this2.updatePresence(el, output); | ||
| break; | ||
| case 'cloak': | ||
@@ -1005,3 +1014,3 @@ el.removeAttribute('x-cloak'); | ||
| childList: true, | ||
| attributes: false, | ||
| attributes: true, | ||
| subtree: true | ||
@@ -1011,2 +1020,16 @@ }; | ||
| for (var i = 0; i < mutations.length; i++) { | ||
| // Filter out mutations triggered from child components. | ||
| if (!mutations[i].target.closest('[x-data]').isSameNode(_this3.el)) return; | ||
| if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'x-data') { | ||
| (function () { | ||
| var rawData = Object(_utils__WEBPACK_IMPORTED_MODULE_0__["saferEval"])(mutations[i].target.getAttribute('x-data'), {}); | ||
| Object.keys(rawData).forEach(function (key) { | ||
| if (_this3.data[key] !== rawData[key]) { | ||
| _this3.data[key] = rawData[key]; | ||
| } | ||
| }); | ||
| })(); | ||
| } | ||
| if (mutations[i].addedNodes.length > 0) { | ||
@@ -1030,2 +1053,30 @@ mutations[i].addedNodes.forEach(function (node) { | ||
| var self = this; | ||
| var actionByDirectiveType = { | ||
| 'model': function model(_ref2) { | ||
| var el = _ref2.el, | ||
| output = _ref2.output; | ||
| self.updateAttributeValue(el, 'value', output); | ||
| }, | ||
| 'bind': function bind(_ref3) { | ||
| var el = _ref3.el, | ||
| attrName = _ref3.attrName, | ||
| output = _ref3.output; | ||
| self.updateAttributeValue(el, attrName, output); | ||
| }, | ||
| 'text': function text(_ref4) { | ||
| var el = _ref4.el, | ||
| output = _ref4.output; | ||
| self.updateTextValue(el, output); | ||
| }, | ||
| 'show': function show(_ref5) { | ||
| var el = _ref5.el, | ||
| output = _ref5.output; | ||
| self.updateVisibility(el, output); | ||
| }, | ||
| 'if': function _if(_ref6) { | ||
| var el = _ref6.el, | ||
| output = _ref6.output; | ||
| self.updatePresence(el, output); | ||
| } | ||
| }; | ||
@@ -1038,65 +1089,20 @@ var walkThenClearDependancyTracker = function walkThenClearDependancyTracker(rootEl, callback) { | ||
| Object(_utils__WEBPACK_IMPORTED_MODULE_0__["debounce"])(walkThenClearDependancyTracker, 5)(this.el, function (el) { | ||
| Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el).forEach(function (_ref2) { | ||
| var type = _ref2.type, | ||
| value = _ref2.value, | ||
| modifiers = _ref2.modifiers, | ||
| expression = _ref2.expression; | ||
| Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el).forEach(function (_ref7) { | ||
| var type = _ref7.type, | ||
| value = _ref7.value, | ||
| expression = _ref7.expression; | ||
| if (!actionByDirectiveType[type]) return; | ||
| switch (type) { | ||
| case 'model': | ||
| var _self$evaluateReturnE = self.evaluateReturnExpression(expression), | ||
| output = _self$evaluateReturnE.output, | ||
| deps = _self$evaluateReturnE.deps; | ||
| var _self$evaluateReturnE = self.evaluateReturnExpression(expression), | ||
| output = _self$evaluateReturnE.output, | ||
| deps = _self$evaluateReturnE.deps; | ||
| if (self.concernedData.filter(function (i) { | ||
| return deps.includes(i); | ||
| }).length > 0) { | ||
| self.updateAttributeValue(el, 'value', output); | ||
| } | ||
| break; | ||
| case 'bind': | ||
| var attrName = value; | ||
| var _self$evaluateReturnE2 = self.evaluateReturnExpression(expression), | ||
| output = _self$evaluateReturnE2.output, | ||
| deps = _self$evaluateReturnE2.deps; | ||
| if (self.concernedData.filter(function (i) { | ||
| return deps.includes(i); | ||
| }).length > 0) { | ||
| self.updateAttributeValue(el, attrName, output); | ||
| } | ||
| break; | ||
| case 'text': | ||
| var _self$evaluateReturnE3 = self.evaluateReturnExpression(expression), | ||
| output = _self$evaluateReturnE3.output, | ||
| deps = _self$evaluateReturnE3.deps; | ||
| if (self.concernedData.filter(function (i) { | ||
| return deps.includes(i); | ||
| }).length > 0) { | ||
| self.updateTextValue(el, output); | ||
| } | ||
| break; | ||
| case 'show': | ||
| var _self$evaluateReturnE4 = self.evaluateReturnExpression(expression), | ||
| output = _self$evaluateReturnE4.output, | ||
| deps = _self$evaluateReturnE4.deps; | ||
| if (self.concernedData.filter(function (i) { | ||
| return deps.includes(i); | ||
| }).length > 0) { | ||
| self.updateVisibility(el, output); | ||
| } | ||
| break; | ||
| default: | ||
| break; | ||
| if (self.concernedData.filter(function (i) { | ||
| return deps.includes(i); | ||
| }).length > 0) { | ||
| actionByDirectiveType[type]({ | ||
| el: el, | ||
| attrName: value, | ||
| output: output | ||
| }); | ||
| } | ||
@@ -1114,3 +1120,3 @@ }); | ||
| if (Array.isArray(this.data[dataKey])) { | ||
| rightSideOfExpression = "$event.target.checked ? ".concat(dataKey, ".concat([$event.target.value]) : [...").concat(dataKey, ".splice(0, ").concat(dataKey, ".indexOf($event.target.value)), ...").concat(dataKey, ".splice(").concat(dataKey, ".indexOf($event.target.value)+1)]"); | ||
| rightSideOfExpression = "$event.target.checked ? ".concat(dataKey, ".concat([$event.target.value]) : ").concat(dataKey, ".filter(i => i !== $event.target.value)"); | ||
| } else { | ||
@@ -1157,5 +1163,9 @@ rightSideOfExpression = "$event.target.checked"; | ||
| } else { | ||
| var node = modifiers.includes('window') ? window : el; | ||
| var listenerTarget = modifiers.includes('window') ? window : el; | ||
| var _handler = function _handler(e) { | ||
| var modifiersWithoutWindow = modifiers.filter(function (i) { | ||
| return i !== 'window'; | ||
| }); | ||
| if (event === 'keydown' && modifiersWithoutWindow.length > 0 && !modifiersWithoutWindow.includes(Object(_utils__WEBPACK_IMPORTED_MODULE_0__["kebabCase"])(e.key))) return; | ||
| if (modifiers.includes('prevent')) e.preventDefault(); | ||
@@ -1167,7 +1177,7 @@ if (modifiers.includes('stop')) e.stopPropagation(); | ||
| if (modifiers.includes('once')) { | ||
| node.removeEventListener(event, _handler); | ||
| listenerTarget.removeEventListener(event, _handler); | ||
| } | ||
| }; | ||
| node.addEventListener(event, _handler); | ||
| listenerTarget.addEventListener(event, _handler); | ||
| } | ||
@@ -1191,16 +1201,13 @@ } | ||
| get: function get(object, prop) { | ||
| // Sometimes non-proxyable values are accessed. These are of type "symbol". | ||
| // We can ignore them. | ||
| if (_typeof(prop) === 'symbol') return; | ||
| var propertyName = prefix ? "".concat(prefix, ".").concat(prop) : prop; // If we are accessing an object prop, we'll make this proxy recursive to build | ||
| // a nested dependancy key. | ||
| if (_typeof(object[prop]) === 'object' && object[prop] !== null && !Array.isArray(object[prop])) { | ||
| return new Proxy(object[prop], proxyHandler(prefix + '.' + prop)); | ||
| return new Proxy(object[prop], proxyHandler(propertyName)); | ||
| } | ||
| if (typeof prop === 'string') { | ||
| affectedDataKeys.push(prefix + '.' + prop); | ||
| } else { | ||
| affectedDataKeys.push(prop); | ||
| } | ||
| if (_typeof(object[prop]) === 'object' && object[prop] !== null) { | ||
| return new Proxy(object[prop], proxyHandler(prefix + '.' + prop)); | ||
| } | ||
| affectedDataKeys.push(propertyName); | ||
| return object[prop]; | ||
@@ -1242,2 +1249,16 @@ } | ||
| }, { | ||
| key: "updatePresence", | ||
| value: function updatePresence(el, expressionResult) { | ||
| if (el.nodeName.toLowerCase() !== 'template') console.warn("Alpine: [x-if] directive should only be added to <template> tags."); | ||
| var elementHasAlreadyBeenAdded = el.nextElementSibling && el.nextElementSibling.__x_inserted_me === true; | ||
| if (expressionResult && !elementHasAlreadyBeenAdded) { | ||
| var clone = document.importNode(el.content, true); | ||
| el.parentElement.insertBefore(clone, el.nextElementSibling); | ||
| el.nextElementSibling.__x_inserted_me = true; | ||
| } else if (!expressionResult && elementHasAlreadyBeenAdded) { | ||
| el.nextElementSibling.remove(); | ||
| } | ||
| } | ||
| }, { | ||
| key: "updateAttributeValue", | ||
@@ -1273,7 +1294,11 @@ value: function updateAttributeValue(el, attrName, value) { | ||
| // Use the class object syntax that vue uses to toggle them. | ||
| Object.keys(value).forEach(function (className) { | ||
| if (value[className]) { | ||
| el.classList.add(className); | ||
| Object.keys(value).forEach(function (classNames) { | ||
| if (value[classNames]) { | ||
| classNames.split(' ').forEach(function (className) { | ||
| return el.classList.add(className); | ||
| }); | ||
| } else { | ||
| el.classList.remove(className); | ||
| classNames.split(' ').forEach(function (className) { | ||
| return el.classList.remove(className); | ||
| }); | ||
| } | ||
@@ -1306,3 +1331,3 @@ }); | ||
| value: function getRefsProxy() { | ||
| var self = this; // One of the goals of this is to not hold elements in memory, but rather re-evaluate | ||
| var self = this; // One of the goals of this is to not hold elements in memory, but rather re-evaluate | ||
| // the DOM when the system needs something from it. This way, the framework is flexible and | ||
@@ -1350,5 +1375,3 @@ // friendly to outside DOM changes from libraries like Vue/Livewire. | ||
| /* @flow */ | ||
| var Alpine = { | ||
@@ -1372,3 +1395,3 @@ start: function start() { | ||
| this.discoverComponents(function (el) { | ||
| _this.initializeElement(el); | ||
| _this.initializeComponent(el); | ||
| }); // It's easier and more performant to just support Turbolinks than listen | ||
@@ -1379,7 +1402,7 @@ // to MutationOberserver mutations at the document level. | ||
| _this.discoverUninitializedComponents(function (el) { | ||
| _this.initializeElement(el); | ||
| _this.initializeComponent(el); | ||
| }); | ||
| }); | ||
| this.listenForNewUninitializedComponentsAtRunTime(function (el) { | ||
| _this.initializeElement(el); | ||
| _this.initializeComponent(el); | ||
| }); | ||
@@ -1420,6 +1443,3 @@ | ||
| if (node.nodeType !== 1) return; | ||
| if (node.matches('[x-data]')) { | ||
| callback(node); | ||
| } | ||
| if (node.matches('[x-data]')) callback(node); | ||
| }); | ||
@@ -1431,3 +1451,3 @@ } | ||
| }, | ||
| initializeElement: function initializeElement(el) { | ||
| initializeComponent: function initializeComponent(el) { | ||
| el.__x = new _component__WEBPACK_IMPORTED_MODULE_1__["default"](el); | ||
@@ -1437,3 +1457,3 @@ } | ||
| if (!window.Alpine && !Object(_utils__WEBPACK_IMPORTED_MODULE_2__["isTesting"])()) { | ||
| if (window !== undefined && !window.Alpine && !Object(_utils__WEBPACK_IMPORTED_MODULE_2__["isTesting"])()) { | ||
| window.Alpine = Alpine; | ||
@@ -1451,3 +1471,3 @@ window.Alpine.start(); | ||
| \**********************/ | ||
| /*! exports provided: domReady, isTesting, walkSkippingNestedComponents, debounce, onlyUnique, saferEval, saferEvalNoReturn, isXAttr, getXAttrs */ | ||
| /*! exports provided: domReady, isTesting, kebabCase, walkSkippingNestedComponents, debounce, onlyUnique, saferEval, saferEvalNoReturn, isXAttr, getXAttrs */ | ||
| /***/ (function(module, __webpack_exports__, __webpack_require__) { | ||
@@ -1459,2 +1479,3 @@ | ||
| /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isTesting", function() { return isTesting; }); | ||
| /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "kebabCase", function() { return kebabCase; }); | ||
| /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "walkSkippingNestedComponents", function() { return walkSkippingNestedComponents; }); | ||
@@ -1489,2 +1510,5 @@ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "debounce", function() { return debounce; }); | ||
| } | ||
| function kebabCase(subject) { | ||
| return subject.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/[_\s]/, '-').toLowerCase(); | ||
| } | ||
| function walkSkippingNestedComponents(el, callback) { | ||
@@ -1531,3 +1555,3 @@ var isRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; | ||
| function isXAttr(attr) { | ||
| var xAttrRE = /x-(on|bind|data|text|model|show|cloak|ref)/; | ||
| var xAttrRE = /x-(on|bind|data|text|model|if|show|cloak|ref)/; | ||
| return xAttrRE.test(attr.name); | ||
@@ -1537,3 +1561,3 @@ } | ||
| return Array.from(el.attributes).filter(isXAttr).map(function (attr) { | ||
| var typeMatch = attr.name.match(/x-(on|bind|data|text|model|show|cloak|ref)/); | ||
| var typeMatch = attr.name.match(/x-(on|bind|data|text|model|if|show|cloak|ref)/); | ||
| var valueMatch = attr.name.match(/:([a-zA-Z\-]+)/); | ||
@@ -1540,0 +1564,0 @@ var modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []; |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=0)}({0:function(e,t,n){e.exports=n("tjUo")},ls82:function(e,t,n){var r=function(e){"use strict";var t,n=Object.prototype,r=n.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",u=o.toStringTag||"@@toStringTag";function c(e,t,n,r){var o=t&&t.prototype instanceof v?t:v,i=Object.create(o.prototype),a=new O(r||[]);return i._invoke=function(e,t,n){var r=l;return function(o,i){if(r===d)throw new Error("Generator is already running");if(r===p){if("throw"===o)throw i;return _()}for(n.method=o,n.arg=i;;){var a=n.delegate;if(a){var u=L(a,n);if(u){if(u===h)continue;return u}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(r===l)throw r=p,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r=d;var c=s(e,t,n);if("normal"===c.type){if(r=n.done?p:f,c.arg===h)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(r=p,n.method="throw",n.arg=c.arg)}}}(e,n,a),i}function s(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}e.wrap=c;var l="suspendedStart",f="suspendedYield",d="executing",p="completed",h={};function v(){}function y(){}function m(){}var g={};g[i]=function(){return this};var b=Object.getPrototypeOf,x=b&&b(b(S([])));x&&x!==n&&r.call(x,i)&&(g=x);var w=m.prototype=v.prototype=Object.create(g);function E(e){["next","throw","return"].forEach((function(t){e[t]=function(e){return this._invoke(t,e)}}))}function k(e){var t;this._invoke=function(n,o){function i(){return new Promise((function(t,i){!function t(n,o,i,a){var u=s(e[n],e,o);if("throw"!==u.type){var c=u.arg,l=c.value;return l&&"object"==typeof l&&r.call(l,"__await")?Promise.resolve(l.__await).then((function(e){t("next",e,i,a)}),(function(e){t("throw",e,i,a)})):Promise.resolve(l).then((function(e){c.value=e,i(c)}),(function(e){return t("throw",e,i,a)}))}a(u.arg)}(n,o,t,i)}))}return t=t?t.then(i,i):i()}}function L(e,n){var r=e.iterator[n.method];if(r===t){if(n.delegate=null,"throw"===n.method){if(e.iterator.return&&(n.method="return",n.arg=t,L(e,n),"throw"===n.method))return h;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return h}var o=s(r,e.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,h;var i=o.arg;return i?i.done?(n[e.resultName]=i.value,n.next=e.nextLoc,"return"!==n.method&&(n.method="next",n.arg=t),n.delegate=null,h):i:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,h)}function A(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function j(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function O(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(A,this),this.reset(!0)}function S(e){if(e){var n=e[i];if(n)return n.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function n(){for(;++o<e.length;)if(r.call(e,o))return n.value=e[o],n.done=!1,n;return n.value=t,n.done=!0,n};return a.next=a}}return{next:_}}function _(){return{value:t,done:!0}}return y.prototype=w.constructor=m,m.constructor=y,m[u]=y.displayName="GeneratorFunction",e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===y||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,m):(e.__proto__=m,u in e||(e[u]="GeneratorFunction")),e.prototype=Object.create(w),e},e.awrap=function(e){return{__await:e}},E(k.prototype),k.prototype[a]=function(){return this},e.AsyncIterator=k,e.async=function(t,n,r,o){var i=new k(c(t,n,r,o));return e.isGeneratorFunction(n)?i:i.next().then((function(e){return e.done?e.value:i.next()}))},E(w),w[u]="Generator",w[i]=function(){return this},w.toString=function(){return"[object Generator]"},e.keys=function(e){var t=[];for(var n in e)t.push(n);return t.reverse(),function n(){for(;t.length;){var r=t.pop();if(r in e)return n.value=r,n.done=!1,n}return n.done=!0,n}},e.values=S,O.prototype={constructor:O,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(j),!e)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=t)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var n=this;function o(r,o){return u.type="throw",u.arg=e,n.next=r,o&&(n.method="next",n.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],u=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var c=r.call(a,"catchLoc"),s=r.call(a,"finallyLoc");if(c&&s){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(c){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(e,t){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=t&&t<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=e,a.arg=t,i?(this.method="next",this.next=i.finallyLoc,h):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),h},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),j(n),h}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var o=r.arg;j(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,n,r){return this.delegate={iterator:S(e),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=t),h}},e}(e.exports);try{regeneratorRuntime=r}catch(e){Function("r","regeneratorRuntime = r")(r)}},o0o1:function(e,t,n){e.exports=n("ls82")},tjUo:function(e,t,n){"use strict";n.r(t);var r=n("o0o1"),o=n.n(r);function i(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function a(){return navigator.userAgent,navigator.userAgent.includes("Node.js")||navigator.userAgent.includes("jsdom")}function u(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];if(!e.hasAttribute("x-data")||n){t(e);for(var r=e.firstElementChild;r;)u(r,t,!1),r=r.nextElementSibling}}function c(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return new Function(["$data"].concat(i(Object.keys(n))),"var result; with($data) { result = ".concat(e," }; return result")).apply(void 0,[t].concat(i(Object.values(n))))}function s(e){return/x-(on|bind|data|text|model|show|cloak|ref)/.test(e.name)}function l(e,t){return Array.from(e.attributes).filter(s).map((function(e){var t=e.name.match(/x-(on|bind|data|text|model|show|cloak|ref)/),n=e.name.match(/:([a-zA-Z\-]+)/),r=e.name.match(/\.[^.\]]+(?=[^\]]*$)/g)||[];return{type:t?t[1]:null,value:n?n[1]:null,modifiers:r.map((function(e){return e.replace(".","")})),expression:e.value}})).filter((function(e){return!t||e.type===name}))}function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var p=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.el=t;var n=c(this.el.getAttribute("x-data"),{});this.data=this.wrapDataInObservable(n),this.initialize(),this.listenForNewElementsToInitialize()}var t,n,r;return t=e,(n=[{key:"wrapDataInObservable",value:function(e){this.concernedData=[];var t=this;return new Proxy(e,function e(n){return{set:function(e,r,o){var i=n+"."+r,a=Reflect.set(e,r,o);return-1===t.concernedData.indexOf(i)&&t.concernedData.push(i),t.refresh(),a},get:function(t,r){return"object"===f(t[r])&&null!==t[r]?new Proxy(t[r],e(n+"."+r)):t[r]}}}())}},{key:"initialize",value:function(){var e=this;u(this.el,(function(t){e.initializeElement(t)}))}},{key:"initializeElement",value:function(e){var t=this;l(e).forEach((function(n){var r=n.type,o=n.value,i=n.modifiers,a=n.expression;switch(r){case"on":var u=o;t.registerListener(e,u,i,a);break;case"model":u="select"===e.tagName.toLowerCase()||["checkbox","radio"].includes(e.type)||i.includes("lazy")?"change":"input";var c=t.generateExpressionForXModelListener(e,i,a);t.registerListener(e,u,i,c);var s="value",l=t.evaluateReturnExpression(a).output;t.updateAttributeValue(e,s,l);break;case"bind":s=o,l=t.evaluateReturnExpression(a).output,t.updateAttributeValue(e,s,l);break;case"text":l=t.evaluateReturnExpression(a).output,t.updateTextValue(e,l);break;case"show":l=t.evaluateReturnExpression(a).output,t.updateVisibility(e,l);break;case"cloak":e.removeAttribute("x-cloak")}}))}},{key:"listenForNewElementsToInitialize",value:function(){var e=this,t=this.el;new MutationObserver((function(t){for(var n=0;n<t.length;n++)t[n].addedNodes.length>0&&t[n].addedNodes.forEach((function(t){1===t.nodeType&&(t.matches("[x-data]")||l(t).length>0&&e.initializeElement(t))}))})).observe(t,{childList:!0,attributes:!1,subtree:!0})}},{key:"refresh",value:function(){var e,t,n,r,o=this;(e=function(e,t){u(e,t),o.concernedData=[]},t=5,function(){var o=this,i=arguments,a=function(){r=null,n||e.apply(o,i)},u=n&&!r;clearTimeout(r),r=setTimeout(a,t),u&&e.apply(o,i)})(this.el,(function(e){l(e).forEach((function(t){var n=t.type,r=t.value,i=(t.modifiers,t.expression);switch(n){case"model":var a=o.evaluateReturnExpression(i),u=a.output,c=a.deps;o.concernedData.filter((function(e){return c.includes(e)})).length>0&&o.updateAttributeValue(e,"value",u);break;case"bind":var s=r,l=o.evaluateReturnExpression(i);u=l.output,c=l.deps,o.concernedData.filter((function(e){return c.includes(e)})).length>0&&o.updateAttributeValue(e,s,u);break;case"text":var f=o.evaluateReturnExpression(i);u=f.output,c=f.deps,o.concernedData.filter((function(e){return c.includes(e)})).length>0&&o.updateTextValue(e,u);break;case"show":var d=o.evaluateReturnExpression(i);u=d.output,c=d.deps,o.concernedData.filter((function(e){return c.includes(e)})).length>0&&o.updateVisibility(e,u)}}))}))}},{key:"generateExpressionForXModelListener",value:function(e,t,n){var r="";return r="checkbox"===e.type?Array.isArray(this.data[n])?"$event.target.checked ? ".concat(n,".concat([$event.target.value]) : [...").concat(n,".splice(0, ").concat(n,".indexOf($event.target.value)), ...").concat(n,".splice(").concat(n,".indexOf($event.target.value)+1)]"):"$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)),"".concat(n," = ").concat(r)}},{key:"registerListener",value:function(e,t,n,r){var o=this;if(n.includes("away"))document.addEventListener(t,(function i(a){e.contains(a.target)||e.offsetWidth<1&&e.offsetHeight<1||(o.runListenerHandler(r,a),n.includes("once")&&document.removeEventListener(t,i))}));else{var i=n.includes("window")?window:e;i.addEventListener(t,(function e(a){n.includes("prevent")&&a.preventDefault(),n.includes("stop")&&a.stopPropagation(),o.runListenerHandler(r,a),n.includes("once")&&i.removeEventListener(t,e)}))}}},{key:"runListenerHandler",value:function(e,t){this.evaluateCommandExpression(e,{$event:t,$refs:this.getRefsProxy()})}},{key:"evaluateReturnExpression",value:function(e){var t=[];return{output:c(e,new Proxy(this.data,function e(n){return{get:function(r,o){return"object"!==f(r[o])||null===r[o]||Array.isArray(r[o])?("string"==typeof o?t.push(n+"."+o):t.push(o),"object"===f(r[o])&&null!==r[o]?new Proxy(r[o],e(n+"."+o)):r[o]):new Proxy(r[o],e(n+"."+o))}}}())),deps:t}}},{key:"evaluateCommandExpression",value:function(e,t){!function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};new Function(["$data"].concat(i(Object.keys(n))),"with($data) { ".concat(e," }")).apply(void 0,[t].concat(i(Object.values(n))))}(e,this.data,t)}},{key:"updateTextValue",value:function(e,t){e.innerText=t}},{key:"updateVisibility",value:function(e,t){t?1===e.style.length&&""!==e.style.display?e.removeAttribute("style"):e.style.removeProperty("display"):e.style.display="none"}},{key:"updateAttributeValue",value:function(e,t,n){if("value"===t)if("radio"===e.type)e.checked=e.value==n;else if("checkbox"===e.type)if(Array.isArray(n)){var r=!1;n.forEach((function(t){t==e.value&&(r=!0)})),e.checked=r}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((function(t){n[t]?e.classList.add(t):e.classList.remove(t)})):["disabled","readonly","required","checked","hidden"].includes(t)?n?e.setAttribute(t,""):e.removeAttribute(t):e.setAttribute(t,n)}},{key:"updateSelect",value:function(e,t){var n=[].concat(t).map((function(e){return e+""}));Array.from(e.options).forEach((function(e){e.selected=n.includes(e.value||e.text)}))}},{key:"getRefsProxy",value:function(){var e=this;return new Proxy({},{get:function(t,n){var r;return u(e.el,(function(e){e.hasAttribute("x-ref")&&e.getAttribute("x-ref")===n&&(r=e)})),r}})}}])&&d(t.prototype,n),r&&d(t,r),e}(),h={start:function(){var e=this;return o.a.async((function(t){for(;;)switch(t.prev=t.next){case 0:if(a()){t.next=3;break}return t.next=3,o.a.awrap(new Promise((function(e){"loading"==document.readyState?document.addEventListener("DOMContentLoaded",e):e()})));case 3:this.discoverComponents((function(t){e.initializeElement(t)})),document.addEventListener("turbolinks:load",(function(){e.discoverUninitializedComponents((function(t){e.initializeElement(t)}))})),this.listenForNewUninitializedComponentsAtRunTime((function(t){e.initializeElement(t)}));case 6:case"end":return t.stop()}}),null,this)},discoverComponents:function(e){document.querySelectorAll("[x-data]").forEach((function(t){e(t)}))},discoverUninitializedComponents:function(e){var t=document.querySelectorAll("[x-data]");Array.from(t).filter((function(e){return void 0===e.__x})).forEach((function(t){e(t)}))},listenForNewUninitializedComponentsAtRunTime:function(e){var t=document.querySelector("body");new MutationObserver((function(t){for(var n=0;n<t.length;n++)t[n].addedNodes.length>0&&t[n].addedNodes.forEach((function(t){1===t.nodeType&&t.matches("[x-data]")&&e(t)}))})).observe(t,{childList:!0,attributes:!0,subtree:!0})},initializeElement:function(e){e.__x=new p(e)}};window.Alpine||a()||(window.Alpine=h,window.Alpine.start());t.default=h}})})); | ||
| !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}(window,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=0)}({0:function(t,e,n){t.exports=n("tjUo")},ls82:function(t,e,n){var r=function(t){"use strict";var e,n=Object.prototype,r=n.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",u=o.toStringTag||"@@toStringTag";function c(t,e,n,r){var o=e&&e.prototype instanceof v?e:v,i=Object.create(o.prototype),a=new O(r||[]);return i._invoke=function(t,e,n){var r=l;return function(o,i){if(r===d)throw new Error("Generator is already running");if(r===p){if("throw"===o)throw i;return S()}for(n.method=o,n.arg=i;;){var a=n.delegate;if(a){var u=L(a,n);if(u){if(u===h)continue;return u}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(r===l)throw r=p,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r=d;var c=s(t,e,n);if("normal"===c.type){if(r=n.done?p:f,c.arg===h)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(r=p,n.method="throw",n.arg=c.arg)}}}(t,n,a),i}function s(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=c;var l="suspendedStart",f="suspendedYield",d="executing",p="completed",h={};function v(){}function y(){}function m(){}var g={};g[i]=function(){return this};var b=Object.getPrototypeOf,x=b&&b(b(_([])));x&&x!==n&&r.call(x,i)&&(g=x);var w=m.prototype=v.prototype=Object.create(g);function E(t){["next","throw","return"].forEach((function(e){t[e]=function(t){return this._invoke(e,t)}}))}function k(t){var e;this._invoke=function(n,o){function i(){return new Promise((function(e,i){!function e(n,o,i,a){var u=s(t[n],t,o);if("throw"!==u.type){var c=u.arg,l=c.value;return l&&"object"==typeof l&&r.call(l,"__await")?Promise.resolve(l.__await).then((function(t){e("next",t,i,a)}),(function(t){e("throw",t,i,a)})):Promise.resolve(l).then((function(t){c.value=t,i(c)}),(function(t){return e("throw",t,i,a)}))}a(u.arg)}(n,o,e,i)}))}return e=e?e.then(i,i):i()}}function L(t,n){var r=t.iterator[n.method];if(r===e){if(n.delegate=null,"throw"===n.method){if(t.iterator.return&&(n.method="return",n.arg=e,L(t,n),"throw"===n.method))return h;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return h}var o=s(r,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,h;var i=o.arg;return i?i.done?(n[t.resultName]=i.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,h):i:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,h)}function A(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function j(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function O(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(A,this),this.reset(!0)}function _(t){if(t){var n=t[i];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,a=function n(){for(;++o<t.length;)if(r.call(t,o))return n.value=t[o],n.done=!1,n;return n.value=e,n.done=!0,n};return a.next=a}}return{next:S}}function S(){return{value:e,done:!0}}return y.prototype=w.constructor=m,m.constructor=y,m[u]=y.displayName="GeneratorFunction",t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===y||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,m):(t.__proto__=m,u in t||(t[u]="GeneratorFunction")),t.prototype=Object.create(w),t},t.awrap=function(t){return{__await:t}},E(k.prototype),k.prototype[a]=function(){return this},t.AsyncIterator=k,t.async=function(e,n,r,o){var i=new k(c(e,n,r,o));return t.isGeneratorFunction(n)?i:i.next().then((function(t){return t.done?t.value:i.next()}))},E(w),w[u]="Generator",w[i]=function(){return this},w.toString=function(){return"[object Generator]"},t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=_,O.prototype={constructor:O,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(j),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function o(r,o){return u.type="throw",u.arg=t,n.next=r,o&&(n.method="next",n.arg=e),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],u=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var c=r.call(a,"catchLoc"),s=r.call(a,"finallyLoc");if(c&&s){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(c){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,h):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),h},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),j(n),h}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var o=r.arg;j(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:_(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),h}},t}(t.exports);try{regeneratorRuntime=r}catch(t){Function("r","regeneratorRuntime = r")(r)}},o0o1:function(t,e,n){t.exports=n("ls82")},tjUo:function(t,e,n){"use strict";n.r(e);var r=n("o0o1"),o=n.n(r);function i(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function a(){return navigator.userAgent,navigator.userAgent.includes("Node.js")||navigator.userAgent.includes("jsdom")}function u(t,e){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];if(!t.hasAttribute("x-data")||n){e(t);for(var r=t.firstElementChild;r;)u(r,e,!1),r=r.nextElementSibling}}function c(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return new Function(["$data"].concat(i(Object.keys(n))),"var result; with($data) { result = ".concat(t," }; return result")).apply(void 0,[e].concat(i(Object.values(n))))}function s(t){return/x-(on|bind|data|text|model|if|show|cloak|ref)/.test(t.name)}function l(t,e){return Array.from(t.attributes).filter(s).map((function(t){var e=t.name.match(/x-(on|bind|data|text|model|if|show|cloak|ref)/),n=t.name.match(/:([a-zA-Z\-]+)/),r=t.name.match(/\.[^.\]]+(?=[^\]]*$)/g)||[];return{type:e?e[1]:null,value:n?n[1]:null,modifiers:r.map((function(t){return t.replace(".","")})),expression:t.value}})).filter((function(t){return!e||t.type===name}))}function f(t){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function d(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var p=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.el=e;var n=c(this.el.getAttribute("x-data"),{});this.data=this.wrapDataInObservable(n),this.initialize(),this.listenForNewElementsToInitialize()}var e,n,r;return e=t,(n=[{key:"wrapDataInObservable",value:function(t){this.concernedData=[];var e=this;return new Proxy(t,function t(n){return{set:function(t,r,o){var i=n?"".concat(n,".").concat(r):r,a=Reflect.set(t,r,o);return-1===e.concernedData.indexOf(i)&&e.concernedData.push(i),e.refresh(),a},get:function(e,r){if("object"===f(e[r])&&null!==e[r]){var o=n?"".concat(n,".").concat(r):r;return new Proxy(e[r],t(o))}return e[r]}}}())}},{key:"initialize",value:function(){var t=this;u(this.el,(function(e){t.initializeElement(e)}))}},{key:"initializeElement",value:function(t){var e=this;l(t).forEach((function(n){var r=n.type,o=n.value,i=n.modifiers,a=n.expression;switch(r){case"on":var u=o;e.registerListener(t,u,i,a);break;case"model":u="select"===t.tagName.toLowerCase()||["checkbox","radio"].includes(t.type)||i.includes("lazy")?"change":"input";var c=e.generateExpressionForXModelListener(t,i,a);e.registerListener(t,u,i,c);var s="value",l=e.evaluateReturnExpression(a).output;e.updateAttributeValue(t,s,l);break;case"bind":s=o,l=e.evaluateReturnExpression(a).output,e.updateAttributeValue(t,s,l);break;case"text":l=e.evaluateReturnExpression(a).output,e.updateTextValue(t,l);break;case"show":l=e.evaluateReturnExpression(a).output,e.updateVisibility(t,l);break;case"if":l=e.evaluateReturnExpression(a).output,e.updatePresence(t,l);break;case"cloak":t.removeAttribute("x-cloak")}}))}},{key:"listenForNewElementsToInitialize",value:function(){var t=this,e=this.el;new MutationObserver((function(e){for(var n=0;n<e.length;n++){if(!e[n].target.closest("[x-data]").isSameNode(t.el))return;"attributes"===e[n].type&&"x-data"===e[n].attributeName&&function(){var r=c(e[n].target.getAttribute("x-data"),{});Object.keys(r).forEach((function(e){t.data[e]!==r[e]&&(t.data[e]=r[e])}))}(),e[n].addedNodes.length>0&&e[n].addedNodes.forEach((function(e){1===e.nodeType&&(e.matches("[x-data]")||l(e).length>0&&t.initializeElement(e))}))}})).observe(e,{childList:!0,attributes:!0,subtree:!0})}},{key:"refresh",value:function(){var t,e,n,r,o=this,i={model:function(t){var e=t.el,n=t.output;o.updateAttributeValue(e,"value",n)},bind:function(t){var e=t.el,n=t.attrName,r=t.output;o.updateAttributeValue(e,n,r)},text:function(t){var e=t.el,n=t.output;o.updateTextValue(e,n)},show:function(t){var e=t.el,n=t.output;o.updateVisibility(e,n)},if:function(t){var e=t.el,n=t.output;o.updatePresence(e,n)}};(t=function(t,e){u(t,e),o.concernedData=[]},e=5,function(){var o=this,i=arguments,a=function(){r=null,n||t.apply(o,i)},u=n&&!r;clearTimeout(r),r=setTimeout(a,e),u&&t.apply(o,i)})(this.el,(function(t){l(t).forEach((function(e){var n=e.type,r=e.value,a=e.expression;if(i[n]){var u=o.evaluateReturnExpression(a),c=u.output,s=u.deps;o.concernedData.filter((function(t){return s.includes(t)})).length>0&&i[n]({el:t,attrName:r,output:c})}}))}))}},{key:"generateExpressionForXModelListener",value:function(t,e,n){var r="";return r="checkbox"===t.type?Array.isArray(this.data[n])?"$event.target.checked ? ".concat(n,".concat([$event.target.value]) : ").concat(n,".filter(i => i !== $event.target.value)"):"$event.target.checked":"select"===t.tagName.toLowerCase()&&t.multiple?e.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 })":e.includes("number")?"parseFloat($event.target.value)":e.includes("trim")?"$event.target.value.trim()":"$event.target.value","radio"===t.type&&(t.hasAttribute("name")||t.setAttribute("name",n)),"".concat(n," = ").concat(r)}},{key:"registerListener",value:function(t,e,n,r){var o=this;if(n.includes("away"))document.addEventListener(e,(function i(a){t.contains(a.target)||t.offsetWidth<1&&t.offsetHeight<1||(o.runListenerHandler(r,a),n.includes("once")&&document.removeEventListener(e,i))}));else{var i=n.includes("window")?window:t;i.addEventListener(e,(function t(a){var u=n.filter((function(t){return"window"!==t}));"keydown"===e&&u.length>0&&!u.includes(a.key.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase())||(n.includes("prevent")&&a.preventDefault(),n.includes("stop")&&a.stopPropagation(),o.runListenerHandler(r,a),n.includes("once")&&i.removeEventListener(e,t))}))}}},{key:"runListenerHandler",value:function(t,e){this.evaluateCommandExpression(t,{$event:e,$refs:this.getRefsProxy()})}},{key:"evaluateReturnExpression",value:function(t){var e=[];return{output:c(t,new Proxy(this.data,function t(n){return{get:function(r,o){if("symbol"!==f(o)){var i=n?"".concat(n,".").concat(o):o;return"object"!==f(r[o])||null===r[o]||Array.isArray(r[o])?(e.push(i),r[o]):new Proxy(r[o],t(i))}}}}())),deps:e}}},{key:"evaluateCommandExpression",value:function(t,e){!function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};new Function(["$data"].concat(i(Object.keys(n))),"with($data) { ".concat(t," }")).apply(void 0,[e].concat(i(Object.values(n))))}(t,this.data,e)}},{key:"updateTextValue",value:function(t,e){t.innerText=e}},{key:"updateVisibility",value:function(t,e){e?1===t.style.length&&""!==t.style.display?t.removeAttribute("style"):t.style.removeProperty("display"):t.style.display="none"}},{key:"updatePresence",value:function(t,e){"template"!==t.nodeName.toLowerCase()&&console.warn("Alpine: [x-if] directive should only be added to <template> tags.");var n=t.nextElementSibling&&!0===t.nextElementSibling.__x_inserted_me;if(e&&!n){var r=document.importNode(t.content,!0);t.parentElement.insertBefore(r,t.nextElementSibling),t.nextElementSibling.__x_inserted_me=!0}else!e&&n&&t.nextElementSibling.remove()}},{key:"updateAttributeValue",value:function(t,e,n){if("value"===e)if("radio"===t.type)t.checked=t.value==n;else if("checkbox"===t.type)if(Array.isArray(n)){var r=!1;n.forEach((function(e){e==t.value&&(r=!0)})),t.checked=r}else t.checked=!!n;else"SELECT"===t.tagName?this.updateSelect(t,n):t.value=n;else"class"===e?Array.isArray(n)?t.setAttribute("class",n.join(" ")):Object.keys(n).forEach((function(e){n[e]?e.split(" ").forEach((function(e){return t.classList.add(e)})):e.split(" ").forEach((function(e){return t.classList.remove(e)}))})):["disabled","readonly","required","checked","hidden"].includes(e)?n?t.setAttribute(e,""):t.removeAttribute(e):t.setAttribute(e,n)}},{key:"updateSelect",value:function(t,e){var n=[].concat(e).map((function(t){return t+""}));Array.from(t.options).forEach((function(t){t.selected=n.includes(t.value||t.text)}))}},{key:"getRefsProxy",value:function(){var t=this;return new Proxy({},{get:function(e,n){var r;return u(t.el,(function(t){t.hasAttribute("x-ref")&&t.getAttribute("x-ref")===n&&(r=t)})),r}})}}])&&d(e.prototype,n),r&&d(e,r),t}(),h={start:function(){var t=this;return o.a.async((function(e){for(;;)switch(e.prev=e.next){case 0:if(a()){e.next=3;break}return e.next=3,o.a.awrap(new Promise((function(t){"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()})));case 3:this.discoverComponents((function(e){t.initializeComponent(e)})),document.addEventListener("turbolinks:load",(function(){t.discoverUninitializedComponents((function(e){t.initializeComponent(e)}))})),this.listenForNewUninitializedComponentsAtRunTime((function(e){t.initializeComponent(e)}));case 6:case"end":return e.stop()}}),null,this)},discoverComponents:function(t){document.querySelectorAll("[x-data]").forEach((function(e){t(e)}))},discoverUninitializedComponents:function(t){var e=document.querySelectorAll("[x-data]");Array.from(e).filter((function(t){return void 0===t.__x})).forEach((function(e){t(e)}))},listenForNewUninitializedComponentsAtRunTime:function(t){var e=document.querySelector("body");new MutationObserver((function(e){for(var n=0;n<e.length;n++)e[n].addedNodes.length>0&&e[n].addedNodes.forEach((function(e){1===e.nodeType&&e.matches("[x-data]")&&t(e)}))})).observe(e,{childList:!0,attributes:!0,subtree:!0})},initializeComponent:function(t){t.__x=new p(t)}};void 0===window||window.Alpine||a()||(window.Alpine=h,window.Alpine.start());e.default=h}})})); |
| { | ||
| "/alpine.min.js": "/alpine.min.js?id=7adbda4e32b0fe66797a", | ||
| "/alpine.js": "/alpine.js?id=6aaefe3b77e1795daab9" | ||
| "/alpine.min.js": "/alpine.min.js?id=6596bbe10c6e799d6058", | ||
| "/alpine.js": "/alpine.js?id=7e232940b8cde263a3a7" | ||
| } |
| { | ||
| "main": "dist/alpine.js", | ||
| "name": "alpinejs", | ||
| "version": "1.0.0", | ||
| "version": "1.1.1", | ||
| "repository": { | ||
@@ -6,0 +6,0 @@ "type": "git", |
@@ -12,7 +12,29 @@ # Alpine.js | ||
| ## Install | ||
| Add the following script to the end of your `<head>` section. | ||
| **From CDN:** Add the following script to the end of your `<head>` section. | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.0.0/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.1.1/dist/alpine.min.js" defer></script> | ||
| ``` | ||
| That's it. It will initialize itself. | ||
| **From NPM:** Install the package from NPM. | ||
| ```js | ||
| npm i alpinejs | ||
| ``` | ||
| Include, and start it in your scripts: | ||
| ```js | ||
| import Alpine from 'alpinejs' | ||
| Alpine.start() | ||
| ``` | ||
| For IE11, polyfills will need to be provided. Please load the following scripts before the Alpine script above. | ||
| ```html | ||
| <script src="https://polyfill.io/v3/polyfill.min.js?features=MutationObserver%2CArray.from%2CArray.prototype.forEach%2CMap%2CSet%2CArray.prototype.includes%2CString.prototype.includes%2CPromise%2CNodeList.prototype.forEach%2CObject.values%2CReflect%2CReflect.set"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script> | ||
| ``` | ||
| ## Use | ||
@@ -45,5 +67,24 @@ | ||
| You can even use it for non-trivial things: | ||
| *Pre-fetching a dropdown's HTML content on hover* | ||
| ```html | ||
| <div x-data="{ open: false }"> | ||
| <button | ||
| x-on:mouseenter.once=" | ||
| fetch('/dropdown-partial.html') | ||
| .then(response => response.text()) | ||
| .then(html => { $refs.dropdown.innerHTML = html }) | ||
| " | ||
| x-on:click="open = true" | ||
| >Show Dropdown</button> | ||
| <div x-ref="dropdown" x-show="open" x-on:click.away="open = false"> | ||
| Loading Spinner... | ||
| </div> | ||
| </div> | ||
| ``` | ||
| ## Learn | ||
| There are 7 directives available to you: | ||
| There are 9 directives available to you: | ||
@@ -59,2 +100,3 @@ | Directive | ||
| | [`x-ref`](#x-ref) | | ||
| | [`x-if`](#x-if) | | ||
| | [`x-cloak`](#x-cloak) | | ||
@@ -78,3 +120,3 @@ | ||
| You can extract data (and behavior) into reausable functions: | ||
| You can extract data (and behavior) into reusable functions: | ||
@@ -126,3 +168,3 @@ ```html | ||
| > Note: attribute bindings ONLY update when their dependancies update. The framework is smart enough to observe data changes and detect which bindings care about them. | ||
| > Note: attribute bindings ONLY update when their dependencies update. The framework is smart enough to observe data changes and detect which bindings care about them. | ||
@@ -163,2 +205,10 @@ **`x-bind` for class attributes** | ||
| **`keydown` modifiers** | ||
| **Example:** `<input type="text" x-on:keydown.escape="open = false">` | ||
| You can specify specific keys to listen for using keydown modifiers appended to the `x-on:keydown` directive. Note that the modifiers are kebab-cased versions of `Event.key` values. | ||
| Examples: `enter`, `escape`, `arrow-up`, `arrow-down` | ||
| **`.away` modifier** | ||
@@ -225,2 +275,13 @@ | ||
| ### `x-if` | ||
| **Example:** `<template x-if="true"><div>Some Element</div></template>` | ||
| **Structure:** `<template x-if="[expression]"><div>Some Element</div></template>` | ||
| For cases where `x-show` isn't sufficient (`x-show` sets an element to `display: none` if it's false), `x-if` can be used to actually remove an element completely from the DOM. | ||
| It's important that `x-if` is used on a `<template></template>` tag because Alpine doesn't use a virtual DOM. This implementation allows Alpine to stay rugged and use the real DOM to work it's magic. | ||
| --- | ||
| ### `x-cloak` | ||
@@ -227,0 +288,0 @@ **Example:** `<div x-data="{}" x-cloak></div>` |
@@ -1,2 +0,2 @@ | ||
| import { walkSkippingNestedComponents, saferEval, saferEvalNoReturn, getXAttrs, debounce } from './utils' | ||
| import { walkSkippingNestedComponents, kebabCase, saferEval, saferEvalNoReturn, getXAttrs, debounce } from './utils' | ||
@@ -23,3 +23,3 @@ export default class Component { | ||
| set(obj, property, value) { | ||
| const propertyName = keyPrefix + '.' + property | ||
| const propertyName = keyPrefix ? `${keyPrefix}.${property}` : property | ||
@@ -38,3 +38,5 @@ const setWasSuccessful = Reflect.set(obj, property, value) | ||
| if (typeof target[key] === 'object' && target[key] !== null) { | ||
| return new Proxy(target[key], proxyHandler(keyPrefix + '.' + key)) | ||
| const propertyName = keyPrefix ? `${keyPrefix}.${key}` : key | ||
| return new Proxy(target[key], proxyHandler(propertyName)) | ||
| } | ||
@@ -96,2 +98,7 @@ | ||
| case 'if': | ||
| var { output } = this.evaluateReturnExpression(expression) | ||
| this.updatePresence(el, output) | ||
| break; | ||
| case 'cloak': | ||
@@ -108,12 +115,25 @@ el.removeAttribute('x-cloak') | ||
| listenForNewElementsToInitialize() { | ||
| var targetNode = this.el | ||
| const targetNode = this.el | ||
| var observerOptions = { | ||
| const observerOptions = { | ||
| childList: true, | ||
| attributes: false, | ||
| attributes: true, | ||
| subtree: true, | ||
| } | ||
| var observer = new MutationObserver((mutations) => { | ||
| for (var i=0; i < mutations.length; i++){ | ||
| const observer = new MutationObserver((mutations) => { | ||
| for (let i=0; i < mutations.length; i++){ | ||
| // Filter out mutations triggered from child components. | ||
| if (! mutations[i].target.closest('[x-data]').isSameNode(this.el)) return | ||
| if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'x-data') { | ||
| const rawData = saferEval(mutations[i].target.getAttribute('x-data'), {}) | ||
| Object.keys(rawData).forEach(key => { | ||
| if (this.data[key] !== rawData[key]) { | ||
| this.data[key] = rawData[key] | ||
| } | ||
| }) | ||
| } | ||
| if (mutations[i].addedNodes.length > 0) { | ||
@@ -131,3 +151,3 @@ mutations[i].addedNodes.forEach(node => { | ||
| } | ||
| }); | ||
| }) | ||
@@ -140,2 +160,10 @@ observer.observe(targetNode, observerOptions); | ||
| const actionByDirectiveType = { | ||
| 'model': ({el, output}) => { self.updateAttributeValue(el, 'value', output) }, | ||
| 'bind': ({el, attrName, output}) => { self.updateAttributeValue(el, attrName, output) }, | ||
| 'text': ({el, output}) => { self.updateTextValue(el, output) }, | ||
| 'show': ({el, output}) => { self.updateVisibility(el, output) }, | ||
| 'if': ({el, output}) => { self.updatePresence(el, output) }, | ||
| } | ||
| const walkThenClearDependancyTracker = (rootEl, callback) => { | ||
@@ -148,38 +176,9 @@ walkSkippingNestedComponents(rootEl, callback) | ||
| debounce(walkThenClearDependancyTracker, 5)(this.el, function (el) { | ||
| getXAttrs(el).forEach(({ type, value, modifiers, expression }) => { | ||
| switch (type) { | ||
| case 'model': | ||
| var { output, deps } = self.evaluateReturnExpression(expression) | ||
| getXAttrs(el).forEach(({ type, value, expression }) => { | ||
| if (! actionByDirectiveType[type]) return | ||
| if (self.concernedData.filter(i => deps.includes(i)).length > 0) { | ||
| self.updateAttributeValue(el, 'value', output) | ||
| } | ||
| break; | ||
| case 'bind': | ||
| const attrName = value | ||
| var { output, deps } = self.evaluateReturnExpression(expression) | ||
| var { output, deps } = self.evaluateReturnExpression(expression) | ||
| if (self.concernedData.filter(i => deps.includes(i)).length > 0) { | ||
| self.updateAttributeValue(el, attrName, output) | ||
| } | ||
| break; | ||
| case 'text': | ||
| var { output, deps } = self.evaluateReturnExpression(expression) | ||
| if (self.concernedData.filter(i => deps.includes(i)).length > 0) { | ||
| self.updateTextValue(el, output) | ||
| } | ||
| break; | ||
| case 'show': | ||
| var { output, deps } = self.evaluateReturnExpression(expression) | ||
| if (self.concernedData.filter(i => deps.includes(i)).length > 0) { | ||
| self.updateVisibility(el, output) | ||
| } | ||
| break; | ||
| default: | ||
| break; | ||
| if (self.concernedData.filter(i => deps.includes(i)).length > 0) { | ||
| (actionByDirectiveType[type])({ el, attrName: value, output }) | ||
| } | ||
@@ -195,3 +194,3 @@ }) | ||
| if (Array.isArray(this.data[dataKey])) { | ||
| rightSideOfExpression = `$event.target.checked ? ${dataKey}.concat([$event.target.value]) : [...${dataKey}.splice(0, ${dataKey}.indexOf($event.target.value)), ...${dataKey}.splice(${dataKey}.indexOf($event.target.value)+1)]` | ||
| rightSideOfExpression = `$event.target.checked ? ${dataKey}.concat([$event.target.value]) : ${dataKey}.filter(i => i !== $event.target.value)` | ||
| } else { | ||
@@ -241,5 +240,9 @@ rightSideOfExpression = `$event.target.checked` | ||
| } else { | ||
| const node = modifiers.includes('window') ? window : el | ||
| const listenerTarget = modifiers.includes('window') ? window : el | ||
| const handler = e => { | ||
| const modifiersWithoutWindow = modifiers.filter(i => i !== 'window') | ||
| if (event === 'keydown' && modifiersWithoutWindow.length > 0 && ! modifiersWithoutWindow.includes(kebabCase(e.key))) return | ||
| if (modifiers.includes('prevent')) e.preventDefault() | ||
@@ -251,7 +254,7 @@ if (modifiers.includes('stop')) e.stopPropagation() | ||
| if (modifiers.includes('once')) { | ||
| node.removeEventListener(event, handler) | ||
| listenerTarget.removeEventListener(event, handler) | ||
| } | ||
| } | ||
| node.addEventListener(event, handler) | ||
| listenerTarget.addEventListener(event, handler) | ||
| } | ||
@@ -263,3 +266,3 @@ } | ||
| '$event': e, | ||
| '$refs': this.getRefsProxy() | ||
| '$refs': this.getRefsProxy(), | ||
| }) | ||
@@ -273,16 +276,16 @@ } | ||
| get(object, prop) { | ||
| if (typeof object[prop] === 'object' && object[prop] !== null && !Array.isArray(object[prop])) { | ||
| return new Proxy(object[prop], proxyHandler(prefix + '.' + prop)) | ||
| } | ||
| // Sometimes non-proxyable values are accessed. These are of type "symbol". | ||
| // We can ignore them. | ||
| if (typeof prop === 'symbol') return | ||
| if (typeof prop === 'string') { | ||
| affectedDataKeys.push(prefix + '.' + prop) | ||
| } else { | ||
| affectedDataKeys.push(prop) | ||
| } | ||
| const propertyName = prefix ? `${prefix}.${prop}` : prop | ||
| if (typeof object[prop] === 'object' && object[prop] !== null) { | ||
| return new Proxy(object[prop], proxyHandler(prefix + '.' + prop)) | ||
| // If we are accessing an object prop, we'll make this proxy recursive to build | ||
| // a nested dependancy key. | ||
| if (typeof object[prop] === 'object' && object[prop] !== null && ! Array.isArray(object[prop])) { | ||
| return new Proxy(object[prop], proxyHandler(propertyName)) | ||
| } | ||
| affectedDataKeys.push(propertyName) | ||
| return object[prop] | ||
@@ -322,2 +325,18 @@ } | ||
| updatePresence(el, expressionResult) { | ||
| if (el.nodeName.toLowerCase() !== 'template') console.warn(`Alpine: [x-if] directive should only be added to <template> tags.`) | ||
| const elementHasAlreadyBeenAdded = el.nextElementSibling && el.nextElementSibling.__x_inserted_me === true | ||
| if (expressionResult && ! elementHasAlreadyBeenAdded) { | ||
| const clone = document.importNode(el.content, true); | ||
| el.parentElement.insertBefore(clone, el.nextElementSibling) | ||
| el.nextElementSibling.__x_inserted_me = true | ||
| } else if (! expressionResult && elementHasAlreadyBeenAdded) { | ||
| el.nextElementSibling.remove() | ||
| } | ||
| } | ||
| updateAttributeValue(el, attrName, value) { | ||
@@ -353,7 +372,7 @@ if (attrName === 'value') { | ||
| // Use the class object syntax that vue uses to toggle them. | ||
| Object.keys(value).forEach(className => { | ||
| if (value[className]) { | ||
| el.classList.add(className) | ||
| Object.keys(value).forEach(classNames => { | ||
| if (value[classNames]) { | ||
| classNames.split(' ').forEach(className => el.classList.add(className)) | ||
| } else { | ||
| el.classList.remove(className) | ||
| classNames.split(' ').forEach(className => el.classList.remove(className)) | ||
| } | ||
@@ -385,3 +404,3 @@ }) | ||
| // One of the goals of this is to not hold elements in memory, but rather re-evaluate | ||
| // One of the goals of this is to not hold elements in memory, but rather re-evaluate | ||
| // the DOM when the system needs something from it. This way, the framework is flexible and | ||
@@ -388,0 +407,0 @@ // friendly to outside DOM changes from libraries like Vue/Livewire. |
@@ -1,2 +0,1 @@ | ||
| /* @flow */ | ||
| import Component from './component' | ||
@@ -12,3 +11,3 @@ import { domReady, isTesting } from './utils' | ||
| this.discoverComponents(el => { | ||
| this.initializeElement(el) | ||
| this.initializeComponent(el) | ||
| }) | ||
@@ -20,3 +19,3 @@ | ||
| this.discoverUninitializedComponents(el => { | ||
| this.initializeElement(el) | ||
| this.initializeComponent(el) | ||
| }) | ||
@@ -26,3 +25,3 @@ }) | ||
| this.listenForNewUninitializedComponentsAtRunTime(el => { | ||
| this.initializeElement(el) | ||
| this.initializeComponent(el) | ||
| }) | ||
@@ -50,5 +49,5 @@ }, | ||
| listenForNewUninitializedComponentsAtRunTime: function (callback) { | ||
| var targetNode = document.querySelector('body'); | ||
| const targetNode = document.querySelector('body'); | ||
| var observerOptions = { | ||
| const observerOptions = { | ||
| childList: true, | ||
@@ -59,4 +58,4 @@ attributes: true, | ||
| var observer = new MutationObserver((mutations) => { | ||
| for (var i=0; i < mutations.length; i++){ | ||
| const observer = new MutationObserver((mutations) => { | ||
| for (let i=0; i < mutations.length; i++){ | ||
| if (mutations[i].addedNodes.length > 0) { | ||
@@ -66,9 +65,7 @@ mutations[i].addedNodes.forEach(node => { | ||
| if (node.matches('[x-data]')) { | ||
| callback(node) | ||
| } | ||
| if (node.matches('[x-data]')) callback(node) | ||
| }) | ||
| } | ||
| } | ||
| }); | ||
| }) | ||
@@ -78,3 +75,3 @@ observer.observe(targetNode, observerOptions) | ||
| initializeElement: function (el) { | ||
| initializeComponent: function (el) { | ||
| el.__x = new Component(el) | ||
@@ -84,3 +81,3 @@ } | ||
| if (! window.Alpine && ! isTesting()) { | ||
| if (window !== undefined && ! window.Alpine && ! isTesting()) { | ||
| window.Alpine = Alpine | ||
@@ -87,0 +84,0 @@ window.Alpine.start() |
@@ -19,2 +19,6 @@ | ||
| export function kebabCase(subject) { | ||
| return subject.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/[_\s]/, '-').toLowerCase() | ||
| } | ||
| export function walkSkippingNestedComponents(el, callback, isRoot = true) { | ||
@@ -66,3 +70,3 @@ if (el.hasAttribute('x-data') && ! isRoot) return | ||
| export function isXAttr(attr) { | ||
| const xAttrRE = /x-(on|bind|data|text|model|show|cloak|ref)/ | ||
| const xAttrRE = /x-(on|bind|data|text|model|if|show|cloak|ref)/ | ||
@@ -76,3 +80,3 @@ return xAttrRE.test(attr.name) | ||
| .map(attr => { | ||
| const typeMatch = attr.name.match(/x-(on|bind|data|text|model|show|cloak|ref)/) | ||
| const typeMatch = attr.name.match(/x-(on|bind|data|text|model|if|show|cloak|ref)/) | ||
| const valueMatch = attr.name.match(/:([a-zA-Z\-]+)/) | ||
@@ -79,0 +83,0 @@ const modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [] |
@@ -43,2 +43,28 @@ import Alpine from 'alpinejs' | ||
| test('multiple classes are added by object syntax', async () => { | ||
| document.body.innerHTML = ` | ||
| <div x-data="{ isOn: false }"> | ||
| <span class="foo bar" x-bind:class="{ 'foo bar': isOn }"></span> | ||
| </div> | ||
| ` | ||
| Alpine.start() | ||
| expect(document.querySelector('span').classList.contains('foo')).toBeFalsy() | ||
| expect(document.querySelector('span').classList.contains('bar')).toBeFalsy() | ||
| }) | ||
| test('multiple classes are removed by object syntax', async () => { | ||
| document.body.innerHTML = ` | ||
| <div x-data="{ isOn: true }"> | ||
| <span x-bind:class="{ 'foo bar': isOn }"></span> | ||
| </div> | ||
| ` | ||
| Alpine.start() | ||
| expect(document.querySelector('span').classList.contains('foo')).toBeTruthy() | ||
| expect(document.querySelector('span').classList.contains('bar')).toBeTruthy() | ||
| }) | ||
| test('class attribute bindings are added by nested object syntax', async () => { | ||
@@ -45,0 +71,0 @@ document.body.innerHTML = ` |
| import Alpine from 'alpinejs' | ||
| import { fireEvent, wait } from '@testing-library/dom' | ||
| test('auto-detect new components and dont lose state of existing ones', async () => { | ||
@@ -73,3 +72,3 @@ var runObservers = [] | ||
| runObservers[0]([ | ||
| { addedNodes: [ | ||
| { target: document.querySelector('#target'), addedNodes: [ | ||
| document.querySelector('#target span'), | ||
@@ -87,1 +86,33 @@ document.querySelector('#target button'), | ||
| }) | ||
| test('auto-detect x-data property changes at run-time', async () => { | ||
| var runObservers = [] | ||
| global.MutationObserver = class { | ||
| constructor(callback) { runObservers.push(callback) } | ||
| observe() {} | ||
| } | ||
| document.body.innerHTML = ` | ||
| <div x-data="{ count: 0 }"> | ||
| <span x-text="count"></span> | ||
| </div> | ||
| ` | ||
| Alpine.start() | ||
| expect(document.querySelector('span').innerText).toEqual(0) | ||
| document.querySelector('div').setAttribute('x-data', '{ count: 1 }') | ||
| runObservers[0]([ | ||
| { | ||
| addedNodes: [], | ||
| type: 'attributes', | ||
| attributeName: 'x-data', | ||
| target: document.querySelector('div') | ||
| } | ||
| ]) | ||
| await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) }) | ||
| }) |
| import Alpine from 'alpinejs' | ||
| import { wait } from '@testing-library/dom' | ||
| import { wait, fireEvent } from '@testing-library/dom' | ||
| const timeout = ms => new Promise(resolve => setTimeout(resolve, ms)) | ||
@@ -124,2 +124,24 @@ | ||
| test('keydown modifiers', async () => { | ||
| document.body.innerHTML = ` | ||
| <div x-data="{ count: 0 }"> | ||
| <input type="text" x-on:keydown="count++" x-on:keydown.enter="count++"> | ||
| <span x-text="count"></span> | ||
| </div> | ||
| ` | ||
| Alpine.start() | ||
| expect(document.querySelector('span').innerText).toEqual(0) | ||
| fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' }) | ||
| await wait(() => { expect(document.querySelector('span').innerText).toEqual(2) }) | ||
| fireEvent.keyDown(document.querySelector('input'), { key: 'Escape' }) | ||
| await wait(() => { expect(document.querySelector('span').innerText).toEqual(3) }) | ||
| }) | ||
| test('click away', async () => { | ||
@@ -126,0 +148,0 @@ // Because jsDom doesn't support .offsetHeight and offsetWidth, we have to |
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 by6.45%
149086
- Number of package files
- increased by3.7%
28
- Lines of code
- increased by4.71%
2648
- Number of lines in readme file
- increased by26.64%
290
No dependency changes