@konfetti-js/vue 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Andrea Bettich
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @konfetti-js/vue
+
+Vue composable and directive for [konfetti.js](https://andreabettich.github.io/konfetti.js/). Installs `@konfetti-js/core` for you.
+
+```bash
+npm install @konfetti-js/vue
+```
+
+```vue
+<script setup>
+import { useKonfetti, vKonfetti } from '@konfetti-js/vue';
+
+const { fire } = useKonfetti();
+</script>
+
+<template>
+  <button @click="fire({ particleCount: 100 })">Celebrate!</button>
+
+  <!-- Fires from the element on click; reacts to changes in the bound options -->
+  <button v-konfetti="{ preset: 'fireworks' }">Fireworks!</button>
+</template>
+```
+
+The directive also accepts `trigger` (default `'click'`) and every core option. See the [full documentation](https://github.com/andreabettich/konfetti.js#readme).
+
+MIT licensed.

package/dist/index.cjs

@@ -0,0 +1,99 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useKonfetti: () => useKonfetti,
+  vKonfetti: () => vKonfetti
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/directive.ts
+var import_core = require("@konfetti-js/core");
+var states = /* @__PURE__ */ new WeakMap();
+function bindTrigger(el, state) {
+  const trigger = state.options.trigger ?? "click";
+  if (trigger === state.trigger) return;
+  el.removeEventListener(state.trigger, state.handler);
+  el.addEventListener(trigger, state.handler);
+  state.trigger = trigger;
+}
+var vKonfetti = {
+  mounted(el, binding) {
+    const state = {
+      options: binding.value ?? {},
+      trigger: binding.value?.trigger ?? "click",
+      handler: () => {
+        const { trigger: _trigger, ...options } = state.options;
+        (0, import_core.fireFromElement)(el, options);
+      }
+    };
+    el.addEventListener(state.trigger, state.handler);
+    states.set(el, state);
+  },
+  updated(el, binding) {
+    const state = states.get(el);
+    if (!state) return;
+    state.options = binding.value ?? {};
+    bindTrigger(el, state);
+  },
+  unmounted(el) {
+    const state = states.get(el);
+    if (!state) return;
+    el.removeEventListener(state.trigger, state.handler);
+    states.delete(el);
+  }
+};
+
+// src/useKonfetti.ts
+var import_core2 = require("@konfetti-js/core");
+var import_vue = require("vue");
+function useKonfetti() {
+  let stop = null;
+  const stopStream = () => {
+    stop?.();
+    stop = null;
+  };
+  if ((0, import_vue.getCurrentScope)()) (0, import_vue.onScopeDispose)(stopStream);
+  return {
+    fire: import_core2.fire,
+    cannon: import_core2.cannon,
+    explosion: import_core2.explosion,
+    fireworks: import_core2.fireworks,
+    rain: import_core2.rain,
+    snow: import_core2.snow,
+    sideCannons: import_core2.sideCannons,
+    pride: import_core2.pride,
+    continuous: (options, interval) => {
+      stopStream();
+      stop = (0, import_core2.continuous)(options, interval);
+      return stop;
+    },
+    reset: () => {
+      stopStream();
+      (0, import_core2.reset)();
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useKonfetti,
+  vKonfetti
+});

package/dist/index.d.cts

@@ -0,0 +1,73 @@
+import { FireFromElementOptions, KonfettiOptions } from '@konfetti-js/core';
+import { Directive } from 'vue';
+
+interface KonfettiDirectiveOptions extends FireFromElementOptions {
+    /** Event to trigger konfetti (default: 'click') */
+    trigger?: string;
+}
+/**
+ * Vue directive for konfetti.js. Fires from the element on click (or `trigger`),
+ * and picks up changes to the bound options.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Basic usage -->
+ *   <button v-konfetti>Click me!</button>
+ *
+ *   <!-- With options -->
+ *   <button v-konfetti="{ particleCount: 100, spread: 70 }">
+ *     Celebrate!
+ *   </button>
+ *
+ *   <!-- With preset -->
+ *   <button v-konfetti="{ preset: 'fireworks' }">
+ *     Fireworks!
+ *   </button>
+ * </template>
+ * ```
+ */
+declare const vKonfetti: Directive<HTMLElement, KonfettiDirectiveOptions | undefined>;
+
+type FireFn = (options?: KonfettiOptions) => void;
+interface UseKonfettiReturn {
+    /** Fire konfetti with optional options */
+    fire: FireFn;
+    /** Fire cannon preset */
+    cannon: FireFn;
+    /** Fire explosion preset */
+    explosion: FireFn;
+    /** Fire fireworks preset */
+    fireworks: FireFn;
+    /** Fire rain preset */
+    rain: FireFn;
+    /** Fire snow preset */
+    snow: FireFn;
+    /** Fire side cannons preset */
+    sideCannons: FireFn;
+    /** Fire pride preset */
+    pride: FireFn;
+    /** Start a stream (stopped automatically on unmount); returns a stop function */
+    continuous: (options?: KonfettiOptions, interval?: number) => () => void;
+    /** Clear all konfetti and stop streams */
+    reset: () => void;
+}
+/**
+ * Vue composable for konfetti.js
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useKonfetti } from '@konfetti-js/vue';
+ *
+ * const { fire, cannon } = useKonfetti();
+ * </script>
+ *
+ * <template>
+ *   <button @click="fire({ particleCount: 100 })">Celebrate!</button>
+ * </template>
+ * ```
+ */
+declare function useKonfetti(): UseKonfettiReturn;
+
+export { type UseKonfettiReturn, useKonfetti, vKonfetti };

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import { FireFromElementOptions, KonfettiOptions } from '@konfetti-js/core';
+import { Directive } from 'vue';
+
+interface KonfettiDirectiveOptions extends FireFromElementOptions {
+    /** Event to trigger konfetti (default: 'click') */
+    trigger?: string;
+}
+/**
+ * Vue directive for konfetti.js. Fires from the element on click (or `trigger`),
+ * and picks up changes to the bound options.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Basic usage -->
+ *   <button v-konfetti>Click me!</button>
+ *
+ *   <!-- With options -->
+ *   <button v-konfetti="{ particleCount: 100, spread: 70 }">
+ *     Celebrate!
+ *   </button>
+ *
+ *   <!-- With preset -->
+ *   <button v-konfetti="{ preset: 'fireworks' }">
+ *     Fireworks!
+ *   </button>
+ * </template>
+ * ```
+ */
+declare const vKonfetti: Directive<HTMLElement, KonfettiDirectiveOptions | undefined>;
+
+type FireFn = (options?: KonfettiOptions) => void;
+interface UseKonfettiReturn {
+    /** Fire konfetti with optional options */
+    fire: FireFn;
+    /** Fire cannon preset */
+    cannon: FireFn;
+    /** Fire explosion preset */
+    explosion: FireFn;
+    /** Fire fireworks preset */
+    fireworks: FireFn;
+    /** Fire rain preset */
+    rain: FireFn;
+    /** Fire snow preset */
+    snow: FireFn;
+    /** Fire side cannons preset */
+    sideCannons: FireFn;
+    /** Fire pride preset */
+    pride: FireFn;
+    /** Start a stream (stopped automatically on unmount); returns a stop function */
+    continuous: (options?: KonfettiOptions, interval?: number) => () => void;
+    /** Clear all konfetti and stop streams */
+    reset: () => void;
+}
+/**
+ * Vue composable for konfetti.js
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useKonfetti } from '@konfetti-js/vue';
+ *
+ * const { fire, cannon } = useKonfetti();
+ * </script>
+ *
+ * <template>
+ *   <button @click="fire({ particleCount: 100 })">Celebrate!</button>
+ * </template>
+ * ```
+ */
+declare function useKonfetti(): UseKonfettiReturn;
+
+export { type UseKonfettiReturn, useKonfetti, vKonfetti };

package/dist/index.js

@@ -0,0 +1,82 @@
+// src/directive.ts
+import { fireFromElement } from "@konfetti-js/core";
+var states = /* @__PURE__ */ new WeakMap();
+function bindTrigger(el, state) {
+  const trigger = state.options.trigger ?? "click";
+  if (trigger === state.trigger) return;
+  el.removeEventListener(state.trigger, state.handler);
+  el.addEventListener(trigger, state.handler);
+  state.trigger = trigger;
+}
+var vKonfetti = {
+  mounted(el, binding) {
+    const state = {
+      options: binding.value ?? {},
+      trigger: binding.value?.trigger ?? "click",
+      handler: () => {
+        const { trigger: _trigger, ...options } = state.options;
+        fireFromElement(el, options);
+      }
+    };
+    el.addEventListener(state.trigger, state.handler);
+    states.set(el, state);
+  },
+  updated(el, binding) {
+    const state = states.get(el);
+    if (!state) return;
+    state.options = binding.value ?? {};
+    bindTrigger(el, state);
+  },
+  unmounted(el) {
+    const state = states.get(el);
+    if (!state) return;
+    el.removeEventListener(state.trigger, state.handler);
+    states.delete(el);
+  }
+};
+
+// src/useKonfetti.ts
+import {
+  cannon,
+  continuous as coreContinuous,
+  reset as coreReset,
+  explosion,
+  fire,
+  fireworks,
+  pride,
+  rain,
+  sideCannons,
+  snow
+} from "@konfetti-js/core";
+import { getCurrentScope, onScopeDispose } from "vue";
+function useKonfetti() {
+  let stop = null;
+  const stopStream = () => {
+    stop?.();
+    stop = null;
+  };
+  if (getCurrentScope()) onScopeDispose(stopStream);
+  return {
+    fire,
+    cannon,
+    explosion,
+    fireworks,
+    rain,
+    snow,
+    sideCannons,
+    pride,
+    continuous: (options, interval) => {
+      stopStream();
+      stop = coreContinuous(options, interval);
+      return stop;
+    },
+    reset: () => {
+      stopStream();
+      coreReset();
+    }
+  };
+}
+export {
+  useKonfetti,
+  vKonfetti
+};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@konfetti-js/vue",
+  "version": "0.3.0",
+  "description": "Vue wrapper for konfetti.js",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "keywords": [
+    "konfetti",
+    "confetti",
+    "vue",
+    "animation"
+  ],
+  "author": "Andrea Bettich",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andreabettich/konfetti.js.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://andreabettich.github.io/konfetti.js/",
+  "bugs": {
+    "url": "https://github.com/andreabettich/konfetti.js/issues"
+  },
+  "dependencies": {
+    "@konfetti-js/core": "^0.3.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.0",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.27"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome lint src",
+    "check": "biome check src --write"
+  }
+}