├── .browserslistrc
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── build
    └── rollup.config.js
├── dev
    ├── serve.ts
    └── serve.vue
├── package-lock.json
├── package.json
├── shims-vue.d.ts
├── src
    ├── ConfettiExplosion.vue
    ├── entry.esm.ts
    └── entry.ts
└── tsconfig.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | current node
2 | last 2 versions and > 2%
3 | ie > 10
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Valgeir Björnsson
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-confetti-explosion
  2 | 
  3 | > This library is the Vue 3 port of [svelte-confetti-explosion](https://www.npmjs.com/package/svelte-confetti-explosion) which in turn is ported from the [@reonomy/react-confetti-explosion](https://www.npmjs.com/package/@reonomy/react-confetti-explosion) package.
  4 | 
  5 | ![confetti-large-edit](https://user-images.githubusercontent.com/5460067/111782964-0c6bed80-8890-11eb-8a8b-0a4fdbc30cbd.gif)
  6 | 
  7 | ## Installing
  8 | 
  9 | ```bash
 10 | # pnpm
 11 | pnpm add vue-confetti-explosion
 12 | 
 13 | # npm
 14 | npm install vue-confetti-explosion
 15 | 
 16 | # yarn
 17 | yarn add vue-confetti-explosion
 18 | ```
 19 | 
 20 | ## Usage
 21 | 
 22 | Basic usage:
 23 | 
 24 | ```html
 25 | <script setup>
 26 |   import ConfettiExplosion from "vue-confetti-explosion";
 27 | </script>
 28 | 
 29 | <template>
 30 |   <ConfettiExplosion />
 31 | </template>
 32 | ```
 33 | 
 34 | Customizing behavior with options:
 35 | 
 36 | ```html
 37 | <ConfettiExplosion :particleCount="200" :force="0.3" />
 38 | ```
 39 | 
 40 | ## Props
 41 | 
 42 | There's tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.
 43 | 
 44 | ### particleCount
 45 | 
 46 | Number of confetti particles to create.
 47 | 
 48 | **type:** `number`
 49 | 
 50 | **Default value:** 150
 51 | 
 52 | **Example:**
 53 | 
 54 | ```html
 55 | <ConfettiExplosion :particleCount="200" />
 56 | ```
 57 | 
 58 | ### particleSize
 59 | 
 60 | Size of the confetti particles in pixels
 61 | 
 62 | **type:** `number`
 63 | 
 64 | **Default value:** 12
 65 | 
 66 | **Example:**
 67 | 
 68 | ```html
 69 | <ConfettiExplosion :particleSize="20" />
 70 | ```
 71 | 
 72 | ### duration
 73 | 
 74 | Duration of the animation in milliseconds
 75 | 
 76 | **type:** `number`
 77 | 
 78 | **Default value:** 3500
 79 | 
 80 | **Example:**
 81 | 
 82 | ```html
 83 | <ConfettiExplosion :duration="5000" />
 84 | ```
 85 | 
 86 | ### colors
 87 | 
 88 | Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.
 89 | 
 90 | **type:** `Array<string>`
 91 | 
 92 | **Default value:** `['#FFC700', '#FF0000', '#2E3191', '#41BBC7']`
 93 | 
 94 | **Example:**
 95 | 
 96 | ```html
 97 | <ConfettiExplosion :colors=['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']
 98 | />
 99 | ```
100 | 
101 | ### force
102 | 
103 | Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.
104 | 
105 | **type:** `number`
106 | 
107 | **Default value:** 0.5
108 | 
109 | **Example:**
110 | 
111 | ```html
112 | <ConfettiExplosion :force="0.3" />
113 | ```
114 | 
115 | ### stageHeight
116 | 
117 | Height of the stage in pixels. Confetti will only fall within this height.
118 | 
119 | **type:** `number`
120 | 
121 | **Default value:** 800
122 | 
123 | **Example:**
124 | 
125 | ```html
126 | <ConfettiExplosion :stageHeight="500" />
127 | ```
128 | 
129 | ### stageWidth
130 | 
131 | Width of the stage in pixels. Confetti will only fall within this width.
132 | 
133 | **type:** `number`
134 | 
135 | **Default value:** 1600
136 | 
137 | **Example:**
138 | 
139 | ```html
140 | <ConfettiExplosion :stageWidth="500" />
141 | ```
142 | 
143 | ### shouldDestroyAfterDone
144 | 
145 | Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to free up memory.
146 | 
147 | **type:** `boolean`
148 | 
149 | **Default value:** `true`
150 | 
151 | **Example:**
152 | 
153 | ```html
154 | <ConfettiExplosion :shouldDestroyAfterDone="false" />
155 | ```
156 | 
157 | ~~## Style Props~~
158 | 
159 | > This is Svelte specific, still not implemented for this Vue 3 component
160 | 
161 | ~~You can specify two style props on the component: `--x` and `--y`. These will shift the confetti particles on the x and y axis. by how much you specify, These can be in `px`, `em`, `rem`, `vh`, `vw`, literally any valid CSS unit.~~
162 | 
163 | ~~**USAGE:**~~
164 | 
165 | ```html
166 | <ConfettiExplosion --x="10px" --y="10px" />
167 | ```
168 | 
169 | ## Examples
170 | 
171 | ```html
172 | <script setup>
173 |   import { nextTick, ref } from "vue";
174 |   import ConfettiExplosion from "vue-confetti-explosion";
175 | 
176 |   const visible = ref(false);
177 | 
178 |   const explode = async () => {
179 |     visible.value = false;
180 |     await nextTick();
181 |     visible.value = true;
182 |   };
183 | </script>
184 | 
185 | <template>
186 |   <div>
187 |     <button @click="explode">Show confetti</button>
188 |     <ConfettiExplosion v-if="visible" />
189 |   </div>
190 | </template>
191 | ```
192 | 
193 | ## Potential gotchas
194 | 
195 | - Your container must be `overflow: visible` in order to allow elements to fully spread across area.
196 | - If your `floorHeight` is too small, particles may visibly land on the floor instead of disappearing off-screen.
197 | 
198 | ## Performance
199 | 
200 | This library functions by creating 2 DOM nodes for every single confetti. By default, if the `particlesCount` is set to 150, it will create 300 nodes. This is a lot of nodes. For most devices, these many nodes are not a big issue, but I recommend checking your target devices' performance if you choose to go with a higher number, like 400 or 500.
201 | 
202 | Also, after the specified `duration`, all the confetti DOM nodes will be destroyed. This is to free up memory. If you wish to keep them around, set `shouldDestroyAfterDone` to `false`.
203 | 
204 | ## License
205 | 
206 | MIT License
207 | © [Valgeir Björnsson](https://valgeir.dev/)
208 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | const devPresets = ['@vue/babel-preset-app'];
 2 | const buildPresets = [
 3 |   [
 4 |     '@babel/preset-env',
 5 |     // Config for @babel/preset-env
 6 |     {
 7 |       // Example: Always transpile optional chaining/nullish coalescing
 8 |       // include: [
 9 |       //   /(optional-chaining|nullish-coalescing)/
10 |       // ],
11 |     },
12 |   ],
13 |   '@babel/preset-typescript',
14 | ];
15 | module.exports = {
16 |   presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
17 | };
18 | 


--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
  1 | // rollup.config.js
  2 | import fs from 'fs';
  3 | import path from 'path';
  4 | import vue from 'rollup-plugin-vue';
  5 | import alias from '@rollup/plugin-alias';
  6 | import commonjs from '@rollup/plugin-commonjs';
  7 | import resolve from '@rollup/plugin-node-resolve';
  8 | import replace from '@rollup/plugin-replace';
  9 | import babel from '@rollup/plugin-babel';
 10 | import PostCSS from 'rollup-plugin-postcss';
 11 | import { terser } from 'rollup-plugin-terser';
 12 | import ttypescript from 'ttypescript';
 13 | import typescript from 'rollup-plugin-typescript2';
 14 | import minimist from 'minimist';
 15 | 
 16 | // Get browserslist config and remove ie from es build targets
 17 | const esbrowserslist = fs.readFileSync('./.browserslistrc')
 18 |   .toString()
 19 |   .split('\n')
 20 |   .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
 21 | 
 22 | // Extract babel preset-env config, to combine with esbrowserslist
 23 | const babelPresetEnvConfig = require('../babel.config')
 24 |   .presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];
 25 | 
 26 | const argv = minimist(process.argv.slice(2));
 27 | 
 28 | const projectRoot = path.resolve(__dirname, '..');
 29 | 
 30 | const baseConfig = {
 31 |   input: 'src/entry.ts',
 32 |   plugins: {
 33 |     preVue: [
 34 |       alias({
 35 |         entries: [
 36 |           {
 37 |             find: '@',
 38 |             replacement: `${path.resolve(projectRoot, 'src')}`,
 39 |           },
 40 |         ],
 41 |       }),
 42 |     ],
 43 |     replace: {
 44 |       'process.env.NODE_ENV': JSON.stringify('production'),
 45 |     },
 46 |     vue: {
 47 |     },
 48 |     postVue: [
 49 |       resolve({
 50 |         extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 51 |       }),
 52 |       // Process only `<style module>` blocks.
 53 |       PostCSS({
 54 |         modules: {
 55 |           generateScopedName: '[local]___[hash:base64:5]',
 56 |         },
 57 |         include: /&module=.*\.css$/,
 58 |       }),
 59 |       // Process all `<style>` blocks except `<style module>`.
 60 |       PostCSS({ include: /(?<!&module=.*)\.css$/ }),
 61 |       commonjs(),
 62 |     ],
 63 |     babel: {
 64 |       exclude: 'node_modules/**',
 65 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 66 |       babelHelpers: 'bundled',
 67 |     },
 68 |   },
 69 | };
 70 | 
 71 | // ESM/UMD/IIFE shared settings: externals
 72 | // Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
 73 | const external = [
 74 |   // list external dependencies, exactly the way it is written in the import statement.
 75 |   // eg. 'jquery'
 76 |   'vue',
 77 | ];
 78 | 
 79 | // UMD/IIFE shared settings: output.globals
 80 | // Refer to https://rollupjs.org/guide/en#output-globals for details
 81 | const globals = {
 82 |   // Provide global variable names to replace your external imports
 83 |   // eg. jquery: '$'
 84 |   vue: 'Vue',
 85 | };
 86 | 
 87 | // Customize configs for individual targets
 88 | const buildFormats = [];
 89 | if (!argv.format || argv.format === 'es') {
 90 |   const esConfig = {
 91 |     ...baseConfig,
 92 |     input: 'src/entry.esm.ts',
 93 |     external,
 94 |     output: {
 95 |       file: 'dist/confetti-explosion.esm.js',
 96 |       format: 'esm',
 97 |       exports: 'named',
 98 |     },
 99 |     plugins: [
100 |       replace(baseConfig.plugins.replace),
101 |       ...baseConfig.plugins.preVue,
102 |       vue(baseConfig.plugins.vue),
103 |       ...baseConfig.plugins.postVue,
104 |       // Only use typescript for declarations - babel will
105 |       // do actual js transformations
106 |       typescript({
107 |         typescript: ttypescript,
108 |         useTsconfigDeclarationDir: true,
109 |         emitDeclarationOnly: true,
110 |       }),
111 |       babel({
112 |         ...baseConfig.plugins.babel,
113 |         presets: [
114 |           [
115 |             '@babel/preset-env',
116 |             {
117 |               ...babelPresetEnvConfig,
118 |               targets: esbrowserslist,
119 |             },
120 |           ],
121 |         ],
122 |       }),
123 |     ],
124 |   };
125 |   buildFormats.push(esConfig);
126 | }
127 | 
128 | if (!argv.format || argv.format === 'cjs') {
129 |   const umdConfig = {
130 |     ...baseConfig,
131 |     external,
132 |     output: {
133 |       compact: true,
134 |       file: 'dist/confetti-explosion.ssr.js',
135 |       format: 'cjs',
136 |       name: 'ConfettiExplosion',
137 |       exports: 'auto',
138 |       globals,
139 |     },
140 |     plugins: [
141 |       replace(baseConfig.plugins.replace),
142 |       ...baseConfig.plugins.preVue,
143 |       vue(baseConfig.plugins.vue),
144 |       ...baseConfig.plugins.postVue,
145 |       babel(baseConfig.plugins.babel),
146 |     ],
147 |   };
148 |   buildFormats.push(umdConfig);
149 | }
150 | 
151 | if (!argv.format || argv.format === 'iife') {
152 |   const unpkgConfig = {
153 |     ...baseConfig,
154 |     external,
155 |     output: {
156 |       compact: true,
157 |       file: 'dist/confetti-explosion.min.js',
158 |       format: 'iife',
159 |       name: 'ConfettiExplosion',
160 |       exports: 'auto',
161 |       globals,
162 |     },
163 |     plugins: [
164 |       replace(baseConfig.plugins.replace),
165 |       ...baseConfig.plugins.preVue,
166 |       vue(baseConfig.plugins.vue),
167 |       ...baseConfig.plugins.postVue,
168 |       babel(baseConfig.plugins.babel),
169 |       terser({
170 |         output: {
171 |           ecma: 5,
172 |         },
173 |       }),
174 |     ],
175 |   };
176 |   buildFormats.push(unpkgConfig);
177 | }
178 | 
179 | // Export config
180 | export default buildFormats;
181 | 


--------------------------------------------------------------------------------
/dev/serve.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import Dev from './serve.vue';
3 | 
4 | const app = createApp(Dev);
5 | app.mount('#app');
6 | 


--------------------------------------------------------------------------------
/dev/serve.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { nextTick, ref } from "vue";
 3 | import ConfettiExplosion from "@/ConfettiExplosion.vue";
 4 | 
 5 | const visible = ref(false);
 6 | const explode = async () => {
 7 |   visible.value = false;
 8 |   await nextTick();
 9 |   visible.value = true;
10 | };
11 | </script>
12 | 
13 | <template>
14 |   <div id="app">
15 |     <button @click="explode">Show confetti</button>
16 |     <ConfettiExplosion v-if="visible" />
17 |   </div>
18 | </template>
19 | 
20 | <style>
21 | html,
22 | body {
23 |   height: 100%;
24 | }
25 | #app {
26 |   height: 100%;
27 |   display: flex;
28 |   justify-content: center;
29 |   align-items: center;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-confetti-explosion",
 3 |   "version": "1.0.2",
 4 |   "description": "Confetti explosion in Vue 3 🎉🎊",
 5 |   "author": {
 6 |     "name": "Valgeir Björnsson",
 7 |     "email": "valgeir@hey.com",
 8 |     "url": "https://github.com/valgeirb"
 9 |   },
10 |   "repository": "github:valgeirb/vue-confetti-explosion",
11 |   "keywords": [
12 |     "confetti",
13 |     "party",
14 |     "fun",
15 |     "badass",
16 |     "badassery",
17 |     "vue",
18 |     "vue3",
19 |     "small",
20 |     "tiny",
21 |     "performant"
22 |   ],
23 |   "main": "dist/confetti-explosion.ssr.js",
24 |   "browser": "dist/confetti-explosion.esm.js",
25 |   "module": "dist/confetti-explosion.esm.js",
26 |   "unpkg": "dist/confetti-explosion.min.js",
27 |   "types": "dist/types/src/entry.esm.d.ts",
28 |   "files": [
29 |     "dist/*",
30 |     "src/**/*.vue"
31 |   ],
32 |   "sideEffects": false,
33 |   "scripts": {
34 |     "serve": "vue-cli-service serve dev/serve.ts",
35 |     "prebuild": "rimraf ./dist",
36 |     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
37 |     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
38 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
39 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
40 |     "postbuild": "rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"
41 |   },
42 |   "dependencies": {},
43 |   "devDependencies": {
44 |     "@babel/core": "^7.14.6",
45 |     "@babel/preset-env": "^7.14.7",
46 |     "@babel/preset-typescript": "^7.14.5",
47 |     "@rollup/plugin-alias": "^3.1.2",
48 |     "@rollup/plugin-babel": "^5.3.0",
49 |     "@rollup/plugin-commonjs": "^14.0.0",
50 |     "@rollup/plugin-node-resolve": "^9.0.0",
51 |     "@rollup/plugin-replace": "^2.4.2",
52 |     "@vue/cli-plugin-babel": "^4.5.13",
53 |     "@vue/cli-plugin-typescript": "^4.5.13",
54 |     "@vue/cli-service": "^4.5.13",
55 |     "@vue/compiler-sfc": "^3.0.11",
56 |     "@zerollup/ts-transform-paths": "^1.7.18",
57 |     "cross-env": "^7.0.3",
58 |     "minimist": "^1.2.5",
59 |     "postcss": "^8.2.10",
60 |     "rimraf": "^3.0.2",
61 |     "rollup": "^2.52.8",
62 |     "rollup-plugin-postcss": "^4.0.0",
63 |     "rollup-plugin-terser": "^7.0.2",
64 |     "rollup-plugin-vue": "^6.0.0",
65 |     "rollup-plugin-typescript2": "^0.30.0",
66 |     "ttypescript": "^1.5.12",
67 |     "typescript": "^4.0.3",
68 |     "vue": "^3.2.22"
69 |   },
70 |   "peerDependencies": {
71 |     "vue": "^3.0.5"
72 |   },
73 |   "engines": {
74 |     "node": ">=12"
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import { DefineComponent } from 'vue';
3 | 
4 |   const Component: DefineComponent<{}, {}, any>;
5 |   export default Component;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/ConfettiExplosion.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import { computed, onMounted, watchEffect, ref, PropType } from "vue";
  3 | 
  4 | const ROTATION_SPEED_MIN = 200; // minimum possible duration of single particle full rotation
  5 | const ROTATION_SPEED_MAX = 800; // maximum possible duration of single particle full rotation
  6 | const CRAZY_PARTICLES_FREQUENCY = 0.1; // 0-1 frequency of crazy curvy unpredictable particles
  7 | const CRAZY_PARTICLE_CRAZINESS = 0.3; // 0-1 how crazy these crazy particles are
  8 | const BEZIER_MEDIAN = 0.5; // utility for mid-point bezier curves, to ensure smooth motion paths
  9 | 
 10 | const FORCE = 0.5; // 0-1 roughly the vertical force at which particles initially explode
 11 | const SIZE = 12; // max height for particle rectangles, diameter for particle circles
 12 | const FLOOR_HEIGHT = 800; // pixels the particles will fall from initial explosion point
 13 | const FLOOR_WIDTH = 1600; // horizontal spread of particles in pixels
 14 | const PARTICLE_COUNT = 150;
 15 | const DURATION = 3500;
 16 | const COLORS = ["#FFC700", "#FF0000", "#2E3191", "#41BBC7"];
 17 | 
 18 | export default {
 19 |   props: {
 20 |     particleCount: {
 21 |       type: Number,
 22 |       default: PARTICLE_COUNT,
 23 |     },
 24 |     particleSize: {
 25 |       type: Number,
 26 |       default: SIZE,
 27 |     },
 28 |     duration: {
 29 |       type: Number,
 30 |       default: DURATION,
 31 |     },
 32 |     colors: {
 33 |       type: Array as PropType<Array<string>>,
 34 |       default: COLORS,
 35 |     },
 36 |     force: {
 37 |       type: Number,
 38 |       default: FORCE,
 39 |     },
 40 |     stageHeight: {
 41 |       type: Number,
 42 |       default: FLOOR_HEIGHT,
 43 |     },
 44 |     stageWidth: {
 45 |       type: Number,
 46 |       default: FLOOR_WIDTH,
 47 |     },
 48 |     shouldDestroyAfterDone: {
 49 |       type: Boolean,
 50 |       default: true,
 51 |     },
 52 |   },
 53 |   setup(props: any) {
 54 |     const isVisible = ref(true);
 55 |     const setItemRef = (el: HTMLDivElement, degree: number) => {
 56 |       confettiStyles(el, { degree });
 57 |     };
 58 | 
 59 |     const particles = computed(() =>
 60 |       createParticles(props.particleCount, props.colors)
 61 |     );
 62 | 
 63 |     watchEffect(() => {
 64 |       props.particleCount > 300 &&
 65 |         console.log(
 66 |           "[VUE-CONFETTI-EXPLOSION] That's a lot of confetti, you sure about that? A lesser number" +
 67 |             " like 200 will still give off the party vibes while still not bricking the device 😉"
 68 |         );
 69 |     });
 70 | 
 71 |     const isValid = computed(() =>
 72 |       validate(
 73 |         props.particleCount,
 74 |         props.duration,
 75 |         props.colors,
 76 |         props.particleSize,
 77 |         props.force,
 78 |         props.stageHeight,
 79 |         props.stageWidth
 80 |       )
 81 |     );
 82 | 
 83 |     onMounted(async () => {
 84 |       await waitFor(props.duration);
 85 | 
 86 |       if (props.shouldDestroyAfterDone) {
 87 |         isVisible.value = false;
 88 |       }
 89 |     });
 90 | 
 91 |     type Particle = {
 92 |       color: string; // color of particle
 93 |       degree: number; // vector direction, between 0-360 (0 being straight up ↑)
 94 |     };
 95 | 
 96 |     type Rotate3dTransform = [number, number, number];
 97 | 
 98 |     const createParticles = (count: number, colors: string[]): Particle[] => {
 99 |       const increment = 360 / count;
100 |       return Array.from({ length: count }, (_, i) => ({
101 |         color: colors[i % colors.length],
102 |         degree: i * increment,
103 |       }));
104 |     };
105 | 
106 |     const waitFor = (ms: number) =>
107 |       new Promise((resolve) => setTimeout(resolve, ms));
108 | 
109 |     // From here: https://stackoverflow.com/a/11832950
110 |     function round(num: number, precision: number = 2) {
111 |       return (
112 |         Math.round((num + Number.EPSILON) * 10 ** precision) / 10 ** precision
113 |       );
114 |     }
115 | 
116 |     function arraysEqual<ItemType>(a: ItemType[], b: ItemType[]) {
117 |       if (a === b) return true;
118 |       if (a == null || b == null) return false;
119 |       if (a.length !== b.length) return false;
120 | 
121 |       for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
122 | 
123 |       return true;
124 |     }
125 | 
126 |     const mapRange = (
127 |       value: number,
128 |       x1: number,
129 |       y1: number,
130 |       x2: number,
131 |       y2: number
132 |     ) => ((value - x1) * (y2 - x2)) / (y1 - x1) + x2;
133 | 
134 |     const rotate = (degree: number, amount: number) => {
135 |       const result = degree + amount;
136 |       return result > 360 ? result - 360 : result;
137 |     };
138 | 
139 |     const coinFlip = () => Math.random() > 0.5;
140 | 
141 |     // avoid this for circles, as it will have no visual effect
142 |     const zAxisRotation: Rotate3dTransform = [0, 0, 1];
143 | 
144 |     const rotationTransforms: Rotate3dTransform[] = [
145 |       // dual axis rotations (a bit more realistic)
146 |       [1, 1, 0],
147 |       [1, 0, 1],
148 |       [0, 1, 1],
149 |       // single axis rotations (a bit dumber)
150 |       [1, 0, 0],
151 |       [0, 1, 0],
152 |       zAxisRotation,
153 |     ];
154 | 
155 |     const shouldBeCircle = (rotationIndex: number) =>
156 |       !arraysEqual(rotationTransforms[rotationIndex], zAxisRotation) &&
157 |       coinFlip();
158 | 
159 |     const isUndefined = (value: any) => typeof value === "undefined";
160 | 
161 |     const error = (message: string) => {
162 |       console.error(message);
163 |     };
164 | 
165 |     function validate(
166 |       particleCount: number,
167 |       duration: number,
168 |       colors: string[],
169 |       particleSize: number,
170 |       force: number,
171 |       floorHeight: number,
172 |       floorWidth: number
173 |     ) {
174 |       const isSafeInteger = Number.isSafeInteger;
175 |       if (
176 |         !isUndefined(particleCount) &&
177 |         isSafeInteger(particleCount) &&
178 |         particleCount < 0
179 |       ) {
180 |         error("particleCount must be a positive integer");
181 |         return false;
182 |       }
183 | 
184 |       if (!isUndefined(duration) && isSafeInteger(duration) && duration < 0) {
185 |         error("duration must be a positive integer");
186 |         return false;
187 |       }
188 | 
189 |       if (!isUndefined(colors) && !Array.isArray(colors)) {
190 |         error("colors must be an array of strings");
191 |         return false;
192 |       }
193 | 
194 |       if (
195 |         !isUndefined(particleSize) &&
196 |         isSafeInteger(particleSize) &&
197 |         particleSize < 0
198 |       ) {
199 |         error("particleSize must be a positive integer");
200 |         return false;
201 |       }
202 | 
203 |       if (
204 |         !isUndefined(force) &&
205 |         isSafeInteger(force) &&
206 |         (force < 0 || force > 1)
207 |       ) {
208 |         error("force must be a positive integer and should be within 0 and 1");
209 |         return false;
210 |       }
211 | 
212 |       if (
213 |         !isUndefined(floorHeight) &&
214 |         typeof floorHeight === "number" &&
215 |         isSafeInteger(floorHeight) &&
216 |         floorHeight < 0
217 |       ) {
218 |         error("floorHeight must be a positive integer");
219 |         return false;
220 |       }
221 | 
222 |       if (
223 |         !isUndefined(floorWidth) &&
224 |         typeof floorWidth === "number" &&
225 |         isSafeInteger(floorWidth) &&
226 |         floorWidth < 0
227 |       ) {
228 |         error("floorWidth must be a positive integer");
229 |         return false;
230 |       }
231 | 
232 |       return true;
233 |     }
234 | 
235 |     function confettiStyles(
236 |       node: HTMLDivElement,
237 |       { degree }: { degree: number }
238 |     ) {
239 |       // Get x landing point for it
240 |       const landingPoint = mapRange(
241 |         Math.abs(rotate(degree, 90) - 180),
242 |         0,
243 |         180,
244 |         -props.stageWidth / 2,
245 |         props.stageWidth / 2
246 |       );
247 | 
248 |       // Crazy calculations for generating styles
249 |       const rotation =
250 |         Math.random() * (ROTATION_SPEED_MAX - ROTATION_SPEED_MIN) +
251 |         ROTATION_SPEED_MIN;
252 |       const rotationIndex = Math.round(
253 |         Math.random() * (rotationTransforms.length - 1)
254 |       );
255 |       const durationChaos = props.duration - Math.round(Math.random() * 1000);
256 |       const shouldBeCrazy = Math.random() < CRAZY_PARTICLES_FREQUENCY;
257 |       const isCircle = shouldBeCircle(rotationIndex);
258 | 
259 |       // x-axis disturbance, roughly the distance the particle will initially deviate from its target
260 |       const x1 = shouldBeCrazy
261 |         ? round(Math.random() * CRAZY_PARTICLE_CRAZINESS, 2)
262 |         : 0;
263 |       const x2 = x1 * -1;
264 |       const x3 = x1;
265 |       // x-axis arc of explosion, so 90deg and 270deg particles have curve of 1, 0deg and 180deg have 0
266 |       const x4 = round(
267 |         Math.abs(mapRange(Math.abs(rotate(degree, 90) - 180), 0, 180, -1, 1)),
268 |         4
269 |       );
270 | 
271 |       // roughly how fast particle reaches end of its explosion curve
272 |       const y1 = round(Math.random() * BEZIER_MEDIAN, 4);
273 |       // roughly maps to the distance particle goes before reaching free-fall
274 |       const y2 = round(Math.random() * props.force * (coinFlip() ? 1 : -1), 4);
275 |       // roughly how soon the particle transitions from explosion to free-fall
276 |       const y3 = BEZIER_MEDIAN;
277 |       // roughly the ease of free-fall
278 |       const y4 = round(
279 |         Math.max(
280 |           mapRange(Math.abs(degree - 180), 0, 180, props.force, -props.force),
281 |           0
282 |         ),
283 |         4
284 |       );
285 | 
286 |       const setCSSVar = (key: string, val: string | number) =>
287 |         node?.style.setProperty(key, val + "");
288 | 
289 |       setCSSVar("--x-landing-point", `${landingPoint}px`);
290 | 
291 |       setCSSVar("--duration-chaos", `${durationChaos}ms`);
292 | 
293 |       setCSSVar("--x1", `${x1}`);
294 |       setCSSVar("--x2", `${x2}`);
295 |       setCSSVar("--x3", `${x3}`);
296 |       setCSSVar("--x4", `${x4}`);
297 | 
298 |       setCSSVar("--y1", `${y1}`);
299 |       setCSSVar("--y2", `${y2}`);
300 |       setCSSVar("--y3", `${y3}`);
301 |       setCSSVar("--y4", `${y4}`);
302 | 
303 |       // set --width and --height here
304 |       setCSSVar(
305 |         "--width",
306 |         `${
307 |           isCircle
308 |             ? props.particleSize
309 |             : Math.round(Math.random() * 4) + props.particleSize / 2
310 |         }px`
311 |       );
312 |       setCSSVar(
313 |         "--height",
314 |         (isCircle
315 |           ? props.particleSize
316 |           : Math.round(Math.random() * 2) + props.particleSize) + "px"
317 |       );
318 | 
319 |       setCSSVar("--rotation", `${rotationTransforms[rotationIndex].join()}`);
320 |       setCSSVar("--rotation-duration", `${rotation}ms`);
321 |       setCSSVar("--border-radius", `${isCircle ? "50%" : "0"}`);
322 |     }
323 | 
324 |     return {
325 |       isVisible,
326 |       isValid,
327 |       stageHeight: props.stageHeight,
328 |       particles,
329 |       setItemRef,
330 |     };
331 |   },
332 | };
333 | </script>
334 | 
335 | <template>
336 |   <div
337 |     v-if="isVisible && isValid"
338 |     class="confetti-container"
339 |     :style="`--floor-height: ${stageHeight}px;`"
340 |   >
341 |     <div
342 |       v-for="{ color, degree } in particles"
343 |       :key="degree"
344 |       class="particle"
345 |       :ref="(el) => setItemRef(el, degree)"
346 |     >
347 |       <div :style="`--bgcolor: ${color};`" />
348 |     </div>
349 |   </div>
350 | </template>
351 | 
352 | <style scoped>
353 | @keyframes y-axis {
354 |   to {
355 |     transform: translate3d(0, var(--floor-height), 0);
356 |   }
357 | }
358 | @keyframes x-axis {
359 |   to {
360 |     transform: translate3d(var(--x-landing-point), 0, 0);
361 |   }
362 | }
363 | @keyframes rotation {
364 |   to {
365 |     transform: rotate3d(var(--rotation), 360deg);
366 |   }
367 | }
368 | .confetti-container {
369 |   width: 0;
370 |   height: 0;
371 |   overflow: visible;
372 |   position: relative;
373 |   transform: translate3d(var(--x, 0), var(--y, 0), 0);
374 |   z-index: 1200;
375 | }
376 | .confetti-container > .particle {
377 |   animation: x-axis var(--duration-chaos) forwards
378 |     cubic-bezier(var(--x1), var(--x2), var(--x3), var(--x4));
379 | }
380 | .confetti-container > .particle div {
381 |   position: absolute;
382 |   top: 0;
383 |   left: 0;
384 |   animation: y-axis var(--duration-chaos) forwards
385 |     cubic-bezier(var(--y1), var(--y2), var(--y3), var(--y4));
386 |   width: var(--width);
387 |   height: var(--height);
388 | }
389 | .confetti-container > .particle div:before {
390 |   display: block;
391 |   height: 100%;
392 |   width: 100%;
393 |   content: "";
394 |   background-color: var(--bgcolor);
395 |   animation: rotation var(--rotation-duration) infinite linear;
396 |   border-radius: var(--border-radius);
397 | }
398 | </style>
399 | 


--------------------------------------------------------------------------------
/src/entry.esm.ts:
--------------------------------------------------------------------------------
 1 | import { App, Plugin } from "vue";
 2 | 
 3 | // Import vue component
 4 | import component from "@/ConfettiExplosion.vue";
 5 | 
 6 | // Define typescript interfaces for installable component
 7 | type InstallableComponent = typeof component & {
 8 |   install: Exclude<Plugin["install"], undefined>;
 9 | };
10 | 
11 | // Default export is installable instance of component.
12 | // IIFE injects install function into component, allowing component
13 | // to be registered via Vue.use() as well as Vue.component(),
14 | export default /*#__PURE__*/ ((): InstallableComponent => {
15 |   // Assign InstallableComponent type
16 |   const installable = component as unknown as InstallableComponent;
17 | 
18 |   // Attach install function executed by Vue.use()
19 |   installable.install = (app: App) => {
20 |     app.component("ConfettiExplosion", installable);
21 |   };
22 |   return installable;
23 | })();
24 | 
25 | // It's possible to expose named exports when writing components that can
26 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
27 | // export const RollupDemoDirective = directive;
28 | 


--------------------------------------------------------------------------------
/src/entry.ts:
--------------------------------------------------------------------------------
 1 | // iife/cjs usage extends esm default export - so import it all
 2 | import component, * as namedExports from '@/entry.esm';
 3 | 
 4 | // Attach named exports directly to component. IIFE/CJS will
 5 | // only expose one global var, with named exports exposed as properties of
 6 | // that global var (eg. plugin.namedExport)
 7 | Object.entries(namedExports).forEach(([exportName, exported]) => {
 8 |   if (exportName !== 'default') component[exportName] = exported;
 9 | });
10 | 
11 | export default component as typeof component & Exclude<typeof namedExports, 'default'>;
12 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "esnext",
 4 |         "module": "esnext",
 5 |         "strict": true,
 6 |         "declaration": true,
 7 |         "declarationDir": "dist/types",
 8 |         "noUnusedLocals": true,
 9 |         "noUnusedParameters": true,
10 |         "importHelpers": true,
11 |         "moduleResolution": "node",
12 |         "experimentalDecorators": true,
13 |         "esModuleInterop": true,
14 |         "allowSyntheticDefaultImports": true,
15 |         "sourceMap": true,
16 |         "baseUrl": ".",
17 |         "newLine": "lf",
18 |         "types": [
19 |             "node",
20 |             "vue"
21 |         ],
22 |         "paths": {
23 |             "@/*": [
24 |                 "src/*"
25 |             ]
26 |         },
27 |         "plugins": [
28 |             {
29 |                 "transform":"@zerollup/ts-transform-paths",
30 |                 "exclude": ["*"]
31 |             }
32 |         ],
33 |         "lib": [
34 |             "esnext",
35 |             "dom",
36 |             "dom.iterable",
37 |             "scripthost"
38 |         ]
39 |     },
40 |     "exclude": [
41 |         "node_modules",
42 |         "dist"
43 |     ]
44 | }
45 | 


--------------------------------------------------------------------------------