vue-confetti-explosion/dist/confetti-explosion.min.js

Confetti explosion in Vue 3 🎉🎊

var ConfettiExplosion=function(t){"use strict";function e(t,e,n,r,a,o,i){try{var u=t[o](i),c=u.value}catch(t){return void n(t)}u.done?e(c):Promise.resolve(c).then(r,a)}function n(t){return function(){var n=this,r=arguments;return new Promise((function(a,o){var i=t.apply(n,r);function u(t){e(i,a,o,u,c,"next",t)}function c(t){e(i,a,o,u,c,"throw",t)}u(void 0)}))}}function r(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var r,a,o=[],i=!0,u=!1;try{for(n=n.call(t);!(i=(r=n.next()).done)&&(o.push(r.value),!e||o.length!==e);i=!0);}catch(t){u=!0,a=t}finally{try{i||null==n.return||n.return()}finally{if(u)throw a}}return o}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return a(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return a(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var o=200,i=.5,u={props:{particleCount:{type:Number,default:150},particleSize:{type:Number,default:12},duration:{type:Number,default:3500},colors:{type:Array,default:["#FFC700","#FF0000","#2E3191","#41BBC7"]},force:{type:Number,default:.5},stageHeight:{type:Number,default:800},stageWidth:{type:Number,default:1600},shouldDestroyAfterDone:{type:Boolean,default:!0}},setup:function(e){var r=t.ref(!0),a=t.computed((function(){return c(e.particleCount,e.colors)}));t.watchEffect((function(){e.particleCount>300&&console.log("[VUE-CONFETTI-EXPLOSION] That's a lot of confetti, you sure about that? A lesser number like 200 will still give off the party vibes while still not bricking the device 😉")}));var u=t.computed((function(){return function(t,e,n,r,a,o,i){var u=Number.isSafeInteger;if(!v(t)&&u(t)&&t<0)return y("particleCount must be a positive integer"),!1;if(!v(e)&&u(e)&&e<0)return y("duration must be a positive integer"),!1;if(!v(n)&&!Array.isArray(n))return y("colors must be an array of strings"),!1;if(!v(r)&&u(r)&&r<0)return y("particleSize must be a positive integer"),!1;if(!v(a)&&u(a)&&(a<0||a>1))return y("force must be a positive integer and should be within 0 and 1"),!1;if(!v(o)&&"number"==typeof o&&u(o)&&o<0)return y("floorHeight must be a positive integer"),!1;if(!v(i)&&"number"==typeof i&&u(i)&&i<0)return y("floorWidth must be a positive integer"),!1;return!0}(e.particleCount,e.duration,e.colors,e.particleSize,e.force,e.stageHeight,e.stageWidth)}));t.onMounted(n(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,l(e.duration);case 2:e.shouldDestroyAfterDone&&(r.value=!1);case 3:case"end":return t.stop()}}),t)}))));var c=function(t,e){var n=360/t;return Array.from({length:t},(function(t,r){return{color:e[r%e.length],degree:r*n}}))},l=function(t){return new Promise((function(e){return setTimeout(e,t)}))};function f(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;return Math.round((t+Number.EPSILON)*Math.pow(10,e))/Math.pow(10,e)}var s=function(t,e,n,r,a){return(t-e)*(a-r)/(n-e)+r},d=function(t,e){var n=t+e;return n>360?n-360:n},h=function(){return Math.random()>.5},p=[0,0,1],m=[[1,1,0],[1,0,1],[0,1,1],[1,0,0],[0,1,0],p],v=function(t){return void 0===t},y=function(t){console.error(t)};return{isVisible:r,isValid:u,stageHeight:e.stageHeight,particles:a,setItemRef:function(t,n){!function(t,n){var r=n.degree,a=s(Math.abs(d(r,90)-180),0,180,-e.stageWidth/2,e.stageWidth/2),u=600*Math.random()+o,c=Math.round(Math.random()*(m.length-1)),l=e.duration-Math.round(1e3*Math.random()),v=Math.random()<.1,y=function(t){return!function(t,e){if(t===e)return!0;if(null==t||null==e)return!1;if(t.length!==e.length)return!1;for(var n=0;n<t.length;n++)if(t[n]!==e[n])return!1;return!0}(m[t],p)&&h()}(c),g=v?f(.3*Math.random(),2):0,b=-1*g,x=g,M=f(Math.abs(s(Math.abs(d(r,90)-180),0,180,-1,1)),4),w=f(Math.random()*i,4),S=f(Math.random()*e.force*(h()?1:-1),4),k=i,C=f(Math.max(s(Math.abs(r-180),0,180,e.force,-e.force),0),4),E=function(e,n){return null==t?void 0:t.style.setProperty(e,n+"")};E("--x-landing-point","".concat(a,"px")),E("--duration-chaos","".concat(l,"ms")),E("--x1","".concat(g)),E("--x2","".concat(b)),E("--x3","".concat(x)),E("--x4","".concat(M)),E("--y1","".concat(w)),E("--y2","".concat(S)),E("--y3","".concat(k)),E("--y4","".concat(C)),E("--width","".concat(y?e.particleSize:Math.round(4*Math.random())+e.particleSize/2,"px")),E("--height",(y?e.particleSize:Math.round(2*Math.random())+e.particleSize)+"px"),E("--rotation","".concat(m[c].join())),E("--rotation-duration","".concat(u,"ms")),E("--border-radius","".concat(y?"50%":"0"))}(t,{degree:n})}}}};!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}('\n@keyframes y-axis-4ff796ae {\nto {\n    transform: translate3d(0, var(--floor-height), 0);\n}\n}\n@keyframes x-axis-4ff796ae {\nto {\n    transform: translate3d(var(--x-landing-point), 0, 0);\n}\n}\n@keyframes rotation-4ff796ae {\nto {\n    transform: rotate3d(var(--rotation), 360deg);\n}\n}\n.confetti-container[data-v-4ff796ae] {\n  width: 0;\n  height: 0;\n  overflow: visible;\n  position: relative;\n  transform: translate3d(var(--x, 0), var(--y, 0), 0);\n  z-index: 1200;\n}\n.confetti-container > .particle[data-v-4ff796ae] {\n  animation: x-axis-4ff796ae var(--duration-chaos) forwards cubic-bezier(var(--x1), var(--x2), var(--x3), var(--x4));\n}\n.confetti-container > .particle div[data-v-4ff796ae] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  animation: y-axis-4ff796ae var(--duration-chaos) forwards cubic-bezier(var(--y1), var(--y2), var(--y3), var(--y4));\n  width: var(--width);\n  height: var(--height);\n}\n.confetti-container > .particle div[data-v-4ff796ae]:before {\n  display: block;\n  height: 100%;\n  width: 100%;\n  content: "";\n  background-color: var(--bgcolor);\n  animation: rotation-4ff796ae var(--rotation-duration) infinite linear;\n  border-radius: var(--border-radius);\n}\n'),u.render=function(e,n,r,a,o,i){return a.isVisible&&a.isValid?(t.openBlock(),t.createElementBlock("div",{key:0,class:"confetti-container",style:t.normalizeStyle("--floor-height: ".concat(a.stageHeight,"px;"))},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(a.particles,(function(e){var n=e.color,r=e.degree;return t.openBlock(),t.createElementBlock("div",{key:r,class:"particle",ref:function(t){return a.setItemRef(t,r)}},[t.createElementVNode("div",{style:t.normalizeStyle("--bgcolor: ".concat(n,";"))},null,4)],512)})),128))],4)):t.createCommentVNode("",!0)},u.__scopeId="data-v-4ff796ae";var c=function(){var t=u;return t.install=function(e){e.component("ConfettiExplosion",t)},t}(),l=Object.freeze({__proto__:null,default:c});return Object.entries(l).forEach((function(t){var e=r(t,2),n=e[0],a=e[1];"default"!==n&&(c[n]=a)})),c}(Vue);