pixel-flow-vue 1.0.9 → 1.0.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pixel-flow-vue contributors
+
+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,181 @@
+# pixel-flow-vue
+
+> A lightweight **Vue 3** pixel-flow animation plugin with full **TypeScript** support.
+
+[![npm version](https://img.shields.io/npm/v/pixel-flow-vue)](https://www.npmjs.com/package/pixel-flow-vue)
+[![license](https://img.shields.io/npm/l/pixel-flow-vue)](LICENSE)
+[![Vue 3](https://img.shields.io/badge/Vue-3.x-brightgreen)](https://vuejs.org/)
+
+---
+
+## ✨ Features
+
+- 🎨 **Pixel-art style** flowing particle animation via Canvas
+- ⚡ **Vite + Rollup** built — ESM & UMD bundles included
+- 🔷 **Full TypeScript** types exported out of the box
+- 🎛️ Highly configurable: colors, speed, particle count, pixel size
+- 🪄 `start()` / `stop()` control via component `ref`
+
+---
+
+## 📦 Installation
+
+```bash
+npm install pixel-flow-vue
+# or
+pnpm add pixel-flow-vue
+# or
+yarn add pixel-flow-vue
+```
+
+---
+
+## 🚀 Quick Start
+
+### Global registration
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import PixelFlowVue from 'pixel-flow-vue'
+import 'pixel-flow-vue/style.css'
+
+createApp(App).use(PixelFlowVue).mount('#app')
+```
+
+```vue
+<!-- anywhere in your app -->
+<template>
+  <PixelFlow :width="800" :height="450" />
+</template>
+```
+
+### On-demand import
+
+```vue
+<template>
+  <PixelFlow
+    ref="flowRef"
+    :width="800"
+    :height="450"
+    :colors="['#00f5ff', '#7b2fff']"
+    :particle-count="200"
+    :speed="1.5"
+    :pixel-size="5"
+    @ready="onReady"
+  />
+  <button @click="flowRef?.stop()">Stop</button>
+  <button @click="flowRef?.start()">Start</button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PixelFlow } from 'pixel-flow-vue'
+import type { PixelFlowInstance } from 'pixel-flow-vue'
+
+const flowRef = ref<PixelFlowInstance | null>(null)
+
+function onReady() {
+  console.log('Pixel flow is ready!')
+}
+</script>
+```
+
+### Use the core engine directly (headless)
+
+```ts
+import { createPixelFlow } from 'pixel-flow-vue'
+
+const canvas = document.querySelector<HTMLCanvasElement>('#myCanvas')!
+const stop = createPixelFlow({
+  canvas,
+  colors: ['#ff2fa0', '#ffdd00'],
+  particleCount: 80,
+  speed: 2,
+  pixelSize: 6,
+})
+
+// Later: stop the animation
+stop()
+```
+
+---
+
+## 🎛️ Props
+
+| Prop            | Type       | Default                                             | Description                    |
+| --------------- | ---------- | --------------------------------------------------- | ------------------------------ |
+| `width`         | `number`   | `600`                                               | Canvas width (px)              |
+| `height`        | `number`   | `400`                                               | Canvas height (px)             |
+| `colors`        | `string[]` | `['#00f5ff','#7b2fff','#ff2fa0','#ffdd00']`         | Particle color palette         |
+| `particleCount` | `number`   | `120`                                               | Number of particles            |
+| `speed`         | `number`   | `1`                                                 | Speed multiplier (0.1 ~ 5)     |
+| `pixelSize`     | `number`   | `4`                                                 | Base pixel block size (px)     |
+| `background`    | `string`   | `'#0d0d0d'`                                         | Canvas background color        |
+| `autoPlay`      | `boolean`  | `true`                                              | Start animation on mount       |
+
+---
+
+## 📡 Events
+
+| Event   | Payload        | Description                          |
+| ------- | -------------- | ------------------------------------ |
+| `ready` | —              | Fired when the animation loop starts |
+| `tick`  | `frame: number`| Fired on every animation frame       |
+
+---
+
+## 🔌 Exposed Methods (via `ref`)
+
+| Method    | Description              |
+| --------- | ------------------------ |
+| `start()` | Start / restart the loop |
+| `stop()`  | Stop the animation loop  |
+
+---
+
+## 📁 Package Exports
+
+| Import path               | Description           |
+| ------------------------- | --------------------- |
+| `pixel-flow-vue`          | Plugin + component    |
+| `pixel-flow-vue/style.css`| Component styles      |
+
+---
+
+## 🔧 Development
+
+```bash
+# Clone and install
+git clone https://github.com/your-username/pixel-flow-vue.git
+cd pixel-flow-vue
+pnpm install
+
+# Start dev server (playground)
+pnpm dev
+
+# Build for production
+pnpm build
+```
+
+---
+
+## 📤 Publishing to npm
+
+```bash
+# 1. Log in to npm
+npm login
+
+# 2. Build
+pnpm build
+
+# 3. Publish
+npm publish --access public
+```
+
+---
+
+## 📄 License
+
+[MIT](LICENSE) © your-username

package/dist/index.d.ts

@@ -0,0 +1,122 @@
+import { App } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+export declare function createPixelFlow(options: PixelFlowOptions): () => void;
+
+export declare const PixelFlow: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+width: number;
+height: number;
+colors: () => string[];
+particleCount: number;
+speed: number;
+pixelSize: number;
+background: string;
+autoPlay: boolean;
+}>>, {
+start: typeof start;
+stop: typeof stop_2;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+ready: () => void;
+tick: (frame: number) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+width: number;
+height: number;
+colors: () => string[];
+particleCount: number;
+speed: number;
+pixelSize: number;
+background: string;
+autoPlay: boolean;
+}>>> & Readonly<{
+onReady?: (() => any) | undefined;
+onTick?: ((frame: number) => any) | undefined;
+}>, {
+colors: string[];
+particleCount: number;
+speed: number;
+pixelSize: number;
+width: number;
+height: number;
+background: string;
+autoPlay: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/** PixelFlow 组件对外暴露的 ref 类型 */
+export declare interface PixelFlowInstance {
+    /** 开始 / 重启动画 */
+    start: () => void;
+    /** 暂停动画 */
+    stop: () => void;
+}
+
+/** createPixelFlow 的配置参数 */
+export declare interface PixelFlowOptions {
+    /** 目标 Canvas 元素 */
+    canvas: HTMLCanvasElement;
+    /** 粒子颜色列表 */
+    colors?: string[];
+    /** 粒子数量 */
+    particleCount?: number;
+    /** 速度倍率 (0.1 ~ 5) */
+    speed?: number;
+    /** 像素块大小（px） */
+    pixelSize?: number;
+    /** 每帧回调 */
+    onTick?: () => void;
+}
+
+declare const PixelFlowVue: {
+    install(app: App): void;
+};
+export default PixelFlowVue;
+
+declare interface Props {
+    /** 画布宽度，默认 600 */
+    width?: number;
+    /** 画布高度，默认 400 */
+    height?: number;
+    /** 像素粒子颜色列表 */
+    colors?: string[];
+    /** 粒子数量，默认 120 */
+    particleCount?: number;
+    /** 粒子速度倍率 (0.1 ~ 5)，默认 1 */
+    speed?: number;
+    /** 像素大小，默认 4 */
+    pixelSize?: number;
+    /** 背景色，默认 '#0d0d0d' */
+    background?: string;
+    /** 是否自动播放，默认 true */
+    autoPlay?: boolean;
+}
+
+declare function start(): void;
+
+declare function stop_2(): void;
+
+export { }

package/dist/pixel-flow-vue.js

@@ -0,0 +1,129 @@
+import { defineComponent as b, ref as P, computed as _, onMounted as S, onUnmounted as z, watch as C, openBlock as D, createElementBlock as A, normalizeStyle as F } from "vue";
+function R(c) {
+  const {
+    canvas: i,
+    colors: s = ["#00f5ff", "#7b2fff", "#ff2fa0", "#ffdd00"],
+    particleCount: a = 120,
+    speed: f = 1,
+    pixelSize: h = 4,
+    onTick: l
+  } = c, x = i.getContext("2d");
+  if (!x) throw new Error("[pixel-flow-vue] Failed to get 2D context");
+  const e = x;
+  let d = 0, u = !0;
+  function m() {
+    const t = i.width, o = i.height;
+    return {
+      x: Math.random() * t,
+      y: Math.random() * o,
+      vx: (Math.random() - 0.5) * f * 1.5,
+      vy: (Math.random() - 0.5) * f * 1.5,
+      color: s[Math.floor(Math.random() * s.length)],
+      size: h * (0.5 + Math.random() * 0.8),
+      alpha: Math.random(),
+      alphaDir: Math.random() > 0.5 ? 1 : -1
+    };
+  }
+  const n = Array.from({ length: a }, m);
+  function v(t) {
+    const o = i.width, r = i.height;
+    t.x += t.vx * f, t.y += t.vy * f, (t.x < 0 || t.x > o) && (t.vx *= -1), (t.y < 0 || t.y > r) && (t.vy *= -1), t.alpha += 0.012 * t.alphaDir, t.alpha >= 1 && (t.alpha = 1, t.alphaDir = -1), t.alpha <= 0.1 && (t.alpha = 0.1, t.alphaDir = 1);
+  }
+  function M(t) {
+    e.globalAlpha = t.alpha, e.fillStyle = t.color, e.fillRect(
+      Math.round(t.x),
+      Math.round(t.y),
+      Math.round(t.size),
+      Math.round(t.size)
+    );
+  }
+  function k() {
+    for (let o = 0; o < n.length; o++)
+      for (let r = o + 1; r < n.length; r++) {
+        const y = n[o].x - n[r].x, g = n[o].y - n[r].y, w = Math.sqrt(y * y + g * g);
+        w < 80 && (e.globalAlpha = (1 - w / 80) * 0.25, e.strokeStyle = n[o].color, e.lineWidth = 0.8, e.beginPath(), e.moveTo(n[o].x, n[o].y), e.lineTo(n[r].x, n[r].y), e.stroke());
+      }
+  }
+  function p() {
+    if (!u) return;
+    const t = i.width, o = i.height;
+    e.globalAlpha = 0.18, e.fillStyle = "#000", e.fillRect(0, 0, t, o), e.globalAlpha = 1;
+    for (const r of n)
+      v(r), M(r);
+    k(), l == null || l(), d = requestAnimationFrame(p);
+  }
+  return p(), function() {
+    u = !1, cancelAnimationFrame(d);
+  };
+}
+const B = ["width", "height"], q = /* @__PURE__ */ b({
+  __name: "PixelFlow",
+  props: {
+    width: { default: 600 },
+    height: { default: 400 },
+    colors: { default: () => ["#00f5ff", "#7b2fff", "#ff2fa0", "#ffdd00"] },
+    particleCount: { default: 120 },
+    speed: { default: 1 },
+    pixelSize: { default: 4 },
+    background: { default: "#0d0d0d" },
+    autoPlay: { type: Boolean, default: !0 }
+  },
+  emits: ["ready", "tick"],
+  setup(c, { expose: i, emit: s }) {
+    const a = c, f = s, h = P(null);
+    let l = null, x = 0;
+    const e = _(() => ({
+      display: "block",
+      background: a.background
+    }));
+    function d() {
+      if (!h.value) return;
+      l == null || l();
+      const m = {
+        canvas: h.value,
+        colors: a.colors,
+        particleCount: a.particleCount,
+        speed: a.speed,
+        pixelSize: a.pixelSize,
+        onTick: () => f("tick", ++x)
+      };
+      l = R(m), f("ready");
+    }
+    function u() {
+      l == null || l(), l = null;
+    }
+    return S(() => {
+      a.autoPlay && d();
+    }), z(() => {
+      u();
+    }), C(
+      () => [a.particleCount, a.speed, a.pixelSize, a.colors],
+      () => {
+        l && d();
+      },
+      { deep: !0 }
+    ), i({ start: d, stop: u }), (m, n) => (D(), A("canvas", {
+      ref_key: "canvasRef",
+      ref: h,
+      width: c.width,
+      height: c.height,
+      style: F(e.value),
+      class: "pixel-flow-canvas"
+    }, null, 12, B));
+  }
+}), E = (c, i) => {
+  const s = c.__vccOpts || c;
+  for (const [a, f] of i)
+    s[a] = f;
+  return s;
+}, I = /* @__PURE__ */ E(q, [["__scopeId", "data-v-89863d06"]]), j = {
+  install(c) {
+    c.component("PixelFlow", I);
+  }
+};
+export {
+  I as PixelFlow,
+  R as createPixelFlow,
+  j as default
+};
+//# sourceMappingURL=pixel-flow-vue.js.map

package/dist/pixel-flow-vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixel-flow-vue.js","sources":["../src/core/pixelFlow.ts","../src/components/PixelFlow.vue","../src/index.ts"],"sourcesContent":["import type { PixelFlowOptions } from '../types'\n\n// -------------------------------------------------------\n// 粒子结构\n// -------------------------------------------------------\ninterface Particle {\n  x: number\n  y: number\n  vx: number\n  vy: number\n  color: string\n  size: number\n  alpha: number\n  alphaDir: number\n}\n\n// -------------------------------------------------------\n// 工厂函数：createPixelFlow\n// 返回一个 stop 函数，调用后停止动画循环\n// -------------------------------------------------------\nexport function createPixelFlow(options: PixelFlowOptions): () => void {\n  const {\n    canvas,\n    colors = ['#00f5ff', '#7b2fff', '#ff2fa0', '#ffdd00'],\n    particleCount = 120,\n    speed = 1,\n    pixelSize = 4,\n    onTick,\n  } = options\n\n  const rawCtx = canvas.getContext('2d')\n  if (!rawCtx) throw new Error('[pixel-flow-vue] Failed to get 2D context')\n  // After the null-check, rebind as non-nullable so TypeScript is satisfied\n  // inside every nested closure (TS cannot narrow across function boundaries).\n  const ctx: CanvasRenderingContext2D = rawCtx\n\n  let rafId = 0\n  let running = true\n\n  // ---- 初始化粒子 ----\n  function makeParticle(): Particle {\n    const w = canvas.width\n    const h = canvas.height\n    return {\n      x: Math.random() * w,\n      y: Math.random() * h,\n      vx: (Math.random() - 0.5) * speed * 1.5,\n      vy: (Math.random() - 0.5) * speed * 1.5,\n      color: colors[Math.floor(Math.random() * colors.length)],\n      size: pixelSize * (0.5 + Math.random() * 0.8),\n      alpha: Math.random(),\n      alphaDir: Math.random() > 0.5 ? 1 : -1,\n    }\n  }\n\n  const particles: Particle[] = Array.from({ length: particleCount }, makeParticle)\n\n  // ---- 更新单个粒子 ----\n  function updateParticle(p: Particle): void {\n    const w = canvas.width\n    const h = canvas.height\n\n    p.x += p.vx * speed\n    p.y += p.vy * speed\n\n    // 边界回弹\n    if (p.x < 0 || p.x > w) p.vx *= -1\n    if (p.y < 0 || p.y > h) p.vy *= -1\n\n    // 呼吸透明度\n    p.alpha += 0.012 * p.alphaDir\n    if (p.alpha >= 1) { p.alpha = 1; p.alphaDir = -1 }\n    if (p.alpha <= 0.1) { p.alpha = 0.1; p.alphaDir = 1 }\n  }\n\n  // ---- 绘制单个像素块 ----\n  function drawParticle(p: Particle): void {\n    ctx.globalAlpha = p.alpha\n    ctx.fillStyle = p.color\n    ctx.fillRect(\n      Math.round(p.x),\n      Math.round(p.y),\n      Math.round(p.size),\n      Math.round(p.size),\n    )\n  }\n\n  // ---- 连线：距离近的粒子之间画线 ----\n  function drawConnections(): void {\n    const maxDist = 80\n    for (let i = 0; i < particles.length; i++) {\n      for (let j = i + 1; j < particles.length; j++) {\n        const dx = particles[i].x - particles[j].x\n        const dy = particles[i].y - particles[j].y\n        const dist = Math.sqrt(dx * dx + dy * dy)\n        if (dist < maxDist) {\n          ctx.globalAlpha = (1 - dist / maxDist) * 0.25\n          ctx.strokeStyle = particles[i].color\n          ctx.lineWidth = 0.8\n          ctx.beginPath()\n          ctx.moveTo(particles[i].x, particles[i].y)\n          ctx.lineTo(particles[j].x, particles[j].y)\n          ctx.stroke()\n        }\n      }\n    }\n  }\n\n  // ---- 动画主循环 ----\n  function loop(): void {\n    if (!running) return\n\n    const w = canvas.width\n    const h = canvas.height\n\n    // 拖尾效果：半透明清屏\n    ctx.globalAlpha = 0.18\n    ctx.fillStyle = '#000'\n    ctx.fillRect(0, 0, w, h)\n\n    ctx.globalAlpha = 1\n\n    // 更新 & 绘制\n    for (const p of particles) {\n      updateParticle(p)\n      drawParticle(p)\n    }\n\n    drawConnections()\n\n    onTick?.()\n    rafId = requestAnimationFrame(loop)\n  }\n\n  loop()\n\n  // ---- 返回 stop 函数 ----\n  return function stop() {\n    running = false\n    cancelAnimationFrame(rafId)\n  }\n}\n","<template>\n  <canvas\n    ref=\"canvasRef\"\n    :width=\"width\"\n    :height=\"height\"\n    :style=\"canvasStyle\"\n    class=\"pixel-flow-canvas\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, computed, watch } from 'vue'\nimport type { CSSProperties } from 'vue'\nimport { createPixelFlow } from '../core/pixelFlow'\nimport type { PixelFlowOptions } from '../types'\n\n// ----------------------------------------------------------------\n// Props\n// ----------------------------------------------------------------\ninterface Props {\n  /** 画布宽度，默认 600 */\n  width?: number\n  /** 画布高度，默认 400 */\n  height?: number\n  /** 像素粒子颜色列表 */\n  colors?: string[]\n  /** 粒子数量，默认 120 */\n  particleCount?: number\n  /** 粒子速度倍率 (0.1 ~ 5)，默认 1 */\n  speed?: number\n  /** 像素大小，默认 4 */\n  pixelSize?: number\n  /** 背景色，默认 '#0d0d0d' */\n  background?: string\n  /** 是否自动播放，默认 true */\n  autoPlay?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  width: 600,\n  height: 400,\n  colors: () => ['#00f5ff', '#7b2fff', '#ff2fa0', '#ffdd00'],\n  particleCount: 120,\n  speed: 1,\n  pixelSize: 4,\n  background: '#0d0d0d',\n  autoPlay: true,\n})\n\n// ----------------------------------------------------------------\n// Emits\n// ----------------------------------------------------------------\nconst emit = defineEmits<{\n  (e: 'ready'): void\n  (e: 'tick', frame: number): void\n}>()\n\n// ----------------------------------------------------------------\n// Refs & state\n// ----------------------------------------------------------------\nconst canvasRef = ref<HTMLCanvasElement | null>(null)\nlet stopFn: (() => void) | null = null\nlet frame = 0\n\nconst canvasStyle = computed<CSSProperties>(() => ({\n  display: 'block',\n  background: props.background,\n}))\n\n// ----------------------------------------------------------------\n// Start / Stop helpers\n// ----------------------------------------------------------------\nfunction start() {\n  if (!canvasRef.value) return\n  stopFn?.()\n\n  const options: PixelFlowOptions = {\n    canvas: canvasRef.value,\n    colors: props.colors,\n    particleCount: props.particleCount,\n    speed: props.speed,\n    pixelSize: props.pixelSize,\n    onTick: () => emit('tick', ++frame),\n  }\n\n  stopFn = createPixelFlow(options)\n  emit('ready')\n}\n\nfunction stop() {\n  stopFn?.()\n  stopFn = null\n}\n\n// ----------------------------------------------------------------\n// Lifecycle\n// ----------------------------------------------------------------\nonMounted(() => {\n  if (props.autoPlay) start()\n})\n\nonUnmounted(() => {\n  stop()\n})\n\nwatch(\n  () => [props.particleCount, props.speed, props.pixelSize, props.colors],\n  () => {\n    if (stopFn) start() // 重启以应用新配置\n  },\n  { deep: true }\n)\n\n// ----------------------------------------------------------------\n// Expose public API\n// ----------------------------------------------------------------\ndefineExpose({ start, stop })\n</script>\n\n<style scoped>\n.pixel-flow-canvas {\n  border-radius: 4px;\n}\n</style>\n","import type { App } from 'vue'\nimport PixelFlow from './components/PixelFlow.vue'\nexport type { PixelFlowOptions, PixelFlowInstance } from './types'\nexport { createPixelFlow } from './core/pixelFlow'\n\n// ----------------------------------------------------------------\n// Vue 插件安装函数\n// ----------------------------------------------------------------\nconst PixelFlowVue = {\n  install(app: App) {\n    app.component('PixelFlow', PixelFlow)\n  },\n}\n\n// ----------------------------------------------------------------\n// 导出\n// ----------------------------------------------------------------\nexport { PixelFlow }\nexport default PixelFlowVue\n"],"names":["createPixelFlow","options","canvas","colors","particleCount","speed","pixelSize","onTick","rawCtx","ctx","rafId","running","makeParticle","w","h","particles","updateParticle","p","drawParticle","drawConnections","i","j","dx","dy","dist","loop","props","__props","emit","__emit","canvasRef","ref","stopFn","frame","canvasStyle","computed","start","stop","onMounted","onUnmounted","watch","__expose","_createElementBlock","PixelFlowVue","app","PixelFlow"],"mappings":"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"}

package/dist/pixel-flow-vue.umd.cjs

@@ -0,0 +1,2 @@
+(function(s,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(s=typeof globalThis<"u"?globalThis:s||self,n(s.PixelFlowVue={},s.Vue))})(this,function(s,n){"use strict";function w(f){const{canvas:c,colors:u=["#00f5ff","#7b2fff","#ff2fa0","#ffdd00"],particleCount:o=120,speed:d=1,pixelSize:x=4,onTick:l}=f,p=c.getContext("2d");if(!p)throw new Error("[pixel-flow-vue] Failed to get 2D context");const t=p;let h=0,m=!0;function y(){const e=c.width,a=c.height;return{x:Math.random()*e,y:Math.random()*a,vx:(Math.random()-.5)*d*1.5,vy:(Math.random()-.5)*d*1.5,color:u[Math.floor(Math.random()*u.length)],size:x*(.5+Math.random()*.8),alpha:Math.random(),alphaDir:Math.random()>.5?1:-1}}const i=Array.from({length:o},y);function S(e){const a=c.width,r=c.height;e.x+=e.vx*d,e.y+=e.vy*d,(e.x<0||e.x>a)&&(e.vx*=-1),(e.y<0||e.y>r)&&(e.vy*=-1),e.alpha+=.012*e.alphaDir,e.alpha>=1&&(e.alpha=1,e.alphaDir=-1),e.alpha<=.1&&(e.alpha=.1,e.alphaDir=1)}function z(e){t.globalAlpha=e.alpha,t.fillStyle=e.color,t.fillRect(Math.round(e.x),Math.round(e.y),Math.round(e.size),Math.round(e.size))}function C(){for(let a=0;a<i.length;a++)for(let r=a+1;r<i.length;r++){const M=i[a].x-i[r].x,_=i[a].y-i[r].y,P=Math.sqrt(M*M+_*_);P<80&&(t.globalAlpha=(1-P/80)*.25,t.strokeStyle=i[a].color,t.lineWidth=.8,t.beginPath(),t.moveTo(i[a].x,i[a].y),t.lineTo(i[r].x,i[r].y),t.stroke())}}function v(){if(!m)return;const e=c.width,a=c.height;t.globalAlpha=.18,t.fillStyle="#000",t.fillRect(0,0,e,a),t.globalAlpha=1;for(const r of i)S(r),z(r);C(),l==null||l(),h=requestAnimationFrame(v)}return v(),function(){m=!1,cancelAnimationFrame(h)}}const b=["width","height"],g=((f,c)=>{const u=f.__vccOpts||f;for(const[o,d]of c)u[o]=d;return u})(n.defineComponent({__name:"PixelFlow",props:{width:{default:600},height:{default:400},colors:{default:()=>["#00f5ff","#7b2fff","#ff2fa0","#ffdd00"]},particleCount:{default:120},speed:{default:1},pixelSize:{default:4},background:{default:"#0d0d0d"},autoPlay:{type:Boolean,default:!0}},emits:["ready","tick"],setup(f,{expose:c,emit:u}){const o=f,d=u,x=n.ref(null);let l=null,p=0;const t=n.computed(()=>({display:"block",background:o.background}));function h(){if(!x.value)return;l==null||l();const y={canvas:x.value,colors:o.colors,particleCount:o.particleCount,speed:o.speed,pixelSize:o.pixelSize,onTick:()=>d("tick",++p)};l=w(y),d("ready")}function m(){l==null||l(),l=null}return n.onMounted(()=>{o.autoPlay&&h()}),n.onUnmounted(()=>{m()}),n.watch(()=>[o.particleCount,o.speed,o.pixelSize,o.colors],()=>{l&&h()},{deep:!0}),c({start:h,stop:m}),(y,i)=>(n.openBlock(),n.createElementBlock("canvas",{ref_key:"canvasRef",ref:x,width:f.width,height:f.height,style:n.normalizeStyle(t.value),class:"pixel-flow-canvas"},null,12,b))}}),[["__scopeId","data-v-89863d06"]]),k={install(f){f.component("PixelFlow",g)}};s.PixelFlow=g,s.createPixelFlow=w,s.default=k,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+//# sourceMappingURL=pixel-flow-vue.umd.cjs.map

package/dist/pixel-flow-vue.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixel-flow-vue.umd.cjs","sources":["../src/core/pixelFlow.ts","../src/components/PixelFlow.vue","../src/index.ts"],"sourcesContent":["import type { PixelFlowOptions } from '../types'\n\n// -------------------------------------------------------\n// 粒子结构\n// -------------------------------------------------------\ninterface Particle {\n  x: number\n  y: number\n  vx: number\n  vy: number\n  color: string\n  size: number\n  alpha: number\n  alphaDir: number\n}\n\n// -------------------------------------------------------\n// 工厂函数：createPixelFlow\n// 返回一个 stop 函数，调用后停止动画循环\n// -------------------------------------------------------\nexport function createPixelFlow(options: PixelFlowOptions): () => void {\n  const {\n    canvas,\n    colors = ['#00f5ff', '#7b2fff', '#ff2fa0', '#ffdd00'],\n    particleCount = 120,\n    speed = 1,\n    pixelSize = 4,\n    onTick,\n  } = options\n\n  const rawCtx = canvas.getContext('2d')\n  if (!rawCtx) throw new Error('[pixel-flow-vue] Failed to get 2D context')\n  // After the null-check, rebind as non-nullable so TypeScript is satisfied\n  // inside every nested closure (TS cannot narrow across function boundaries).\n  const ctx: CanvasRenderingContext2D = rawCtx\n\n  let rafId = 0\n  let running = true\n\n  // ---- 初始化粒子 ----\n  function makeParticle(): Particle {\n    const w = canvas.width\n    const h = canvas.height\n    return {\n      x: Math.random() * w,\n      y: Math.random() * h,\n      vx: (Math.random() - 0.5) * speed * 1.5,\n      vy: (Math.random() - 0.5) * speed * 1.5,\n      color: colors[Math.floor(Math.random() * colors.length)],\n      size: pixelSize * (0.5 + Math.random() * 0.8),\n      alpha: Math.random(),\n      alphaDir: Math.random() > 0.5 ? 1 : -1,\n    }\n  }\n\n  const particles: Particle[] = Array.from({ length: particleCount }, makeParticle)\n\n  // ---- 更新单个粒子 ----\n  function updateParticle(p: Particle): void {\n    const w = canvas.width\n    const h = canvas.height\n\n    p.x += p.vx * speed\n    p.y += p.vy * speed\n\n    // 边界回弹\n    if (p.x < 0 || p.x > w) p.vx *= -1\n    if (p.y < 0 || p.y > h) p.vy *= -1\n\n    // 呼吸透明度\n    p.alpha += 0.012 * p.alphaDir\n    if (p.alpha >= 1) { p.alpha = 1; p.alphaDir = -1 }\n    if (p.alpha <= 0.1) { p.alpha = 0.1; p.alphaDir = 1 }\n  }\n\n  // ---- 绘制单个像素块 ----\n  function drawParticle(p: Particle): void {\n    ctx.globalAlpha = p.alpha\n    ctx.fillStyle = p.color\n    ctx.fillRect(\n      Math.round(p.x),\n      Math.round(p.y),\n      Math.round(p.size),\n      Math.round(p.size),\n    )\n  }\n\n  // ---- 连线：距离近的粒子之间画线 ----\n  function drawConnections(): void {\n    const maxDist = 80\n    for (let i = 0; i < particles.length; i++) {\n      for (let j = i + 1; j < particles.length; j++) {\n        const dx = particles[i].x - particles[j].x\n        const dy = particles[i].y - particles[j].y\n        const dist = Math.sqrt(dx * dx + dy * dy)\n        if (dist < maxDist) {\n          ctx.globalAlpha = (1 - dist / maxDist) * 0.25\n          ctx.strokeStyle = particles[i].color\n          ctx.lineWidth = 0.8\n          ctx.beginPath()\n          ctx.moveTo(particles[i].x, particles[i].y)\n          ctx.lineTo(particles[j].x, particles[j].y)\n          ctx.stroke()\n        }\n      }\n    }\n  }\n\n  // ---- 动画主循环 ----\n  function loop(): void {\n    if (!running) return\n\n    const w = canvas.width\n    const h = canvas.height\n\n    // 拖尾效果：半透明清屏\n    ctx.globalAlpha = 0.18\n    ctx.fillStyle = '#000'\n    ctx.fillRect(0, 0, w, h)\n\n    ctx.globalAlpha = 1\n\n    // 更新 & 绘制\n    for (const p of particles) {\n      updateParticle(p)\n      drawParticle(p)\n    }\n\n    drawConnections()\n\n    onTick?.()\n    rafId = requestAnimationFrame(loop)\n  }\n\n  loop()\n\n  // ---- 返回 stop 函数 ----\n  return function stop() {\n    running = false\n    cancelAnimationFrame(rafId)\n  }\n}\n","<template>\n  <canvas\n    ref=\"canvasRef\"\n    :width=\"width\"\n    :height=\"height\"\n    :style=\"canvasStyle\"\n    class=\"pixel-flow-canvas\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, computed, watch } from 'vue'\nimport type { CSSProperties } from 'vue'\nimport { createPixelFlow } from '../core/pixelFlow'\nimport type { PixelFlowOptions } from '../types'\n\n// ----------------------------------------------------------------\n// Props\n// ----------------------------------------------------------------\ninterface Props {\n  /** 画布宽度，默认 600 */\n  width?: number\n  /** 画布高度，默认 400 */\n  height?: number\n  /** 像素粒子颜色列表 */\n  colors?: string[]\n  /** 粒子数量，默认 120 */\n  particleCount?: number\n  /** 粒子速度倍率 (0.1 ~ 5)，默认 1 */\n  speed?: number\n  /** 像素大小，默认 4 */\n  pixelSize?: number\n  /** 背景色，默认 '#0d0d0d' */\n  background?: string\n  /** 是否自动播放，默认 true */\n  autoPlay?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  width: 600,\n  height: 400,\n  colors: () => ['#00f5ff', '#7b2fff', '#ff2fa0', '#ffdd00'],\n  particleCount: 120,\n  speed: 1,\n  pixelSize: 4,\n  background: '#0d0d0d',\n  autoPlay: true,\n})\n\n// ----------------------------------------------------------------\n// Emits\n// ----------------------------------------------------------------\nconst emit = defineEmits<{\n  (e: 'ready'): void\n  (e: 'tick', frame: number): void\n}>()\n\n// ----------------------------------------------------------------\n// Refs & state\n// ----------------------------------------------------------------\nconst canvasRef = ref<HTMLCanvasElement | null>(null)\nlet stopFn: (() => void) | null = null\nlet frame = 0\n\nconst canvasStyle = computed<CSSProperties>(() => ({\n  display: 'block',\n  background: props.background,\n}))\n\n// ----------------------------------------------------------------\n// Start / Stop helpers\n// ----------------------------------------------------------------\nfunction start() {\n  if (!canvasRef.value) return\n  stopFn?.()\n\n  const options: PixelFlowOptions = {\n    canvas: canvasRef.value,\n    colors: props.colors,\n    particleCount: props.particleCount,\n    speed: props.speed,\n    pixelSize: props.pixelSize,\n    onTick: () => emit('tick', ++frame),\n  }\n\n  stopFn = createPixelFlow(options)\n  emit('ready')\n}\n\nfunction stop() {\n  stopFn?.()\n  stopFn = null\n}\n\n// ----------------------------------------------------------------\n// Lifecycle\n// ----------------------------------------------------------------\nonMounted(() => {\n  if (props.autoPlay) start()\n})\n\nonUnmounted(() => {\n  stop()\n})\n\nwatch(\n  () => [props.particleCount, props.speed, props.pixelSize, props.colors],\n  () => {\n    if (stopFn) start() // 重启以应用新配置\n  },\n  { deep: true }\n)\n\n// ----------------------------------------------------------------\n// Expose public API\n// ----------------------------------------------------------------\ndefineExpose({ start, stop })\n</script>\n\n<style scoped>\n.pixel-flow-canvas {\n  border-radius: 4px;\n}\n</style>\n","import type { App } from 'vue'\nimport PixelFlow from './components/PixelFlow.vue'\nexport type { PixelFlowOptions, PixelFlowInstance } from './types'\nexport { createPixelFlow } from './core/pixelFlow'\n\n// ----------------------------------------------------------------\n// Vue 插件安装函数\n// ----------------------------------------------------------------\nconst PixelFlowVue = {\n  install(app: App) {\n    app.component('PixelFlow', PixelFlow)\n  },\n}\n\n// ----------------------------------------------------------------\n// 导出\n// ----------------------------------------------------------------\nexport { PixelFlow }\nexport default PixelFlowVue\n"],"names":["createPixelFlow","options","canvas","colors","particleCount","speed","pixelSize","onTick","rawCtx","ctx","rafId","running","makeParticle","w","h","particles","updateParticle","p","drawParticle","drawConnections","i","j","dx","dy","dist","loop","props","__props","emit","__emit","canvasRef","ref","stopFn","frame","canvasStyle","computed","start","stop","onMounted","onUnmounted","watch","__expose","_createElementBlock","PixelFlowVue","app","PixelFlow"],"mappings":"iQAoBO,SAASA,EAAgBC,EAAuC,CACrE,KAAM,CACJ,OAAAC,EACA,OAAAC,EAAS,CAAC,UAAW,UAAW,UAAW,SAAS,EACpD,cAAAC,EAAgB,IAChB,MAAAC,EAAQ,EACR,UAAAC,EAAY,EACZ,OAAAC,CAAA,EACEN,EAEEO,EAASN,EAAO,WAAW,IAAI,EACrC,GAAI,CAACM,EAAQ,MAAM,IAAI,MAAM,2CAA2C,EAGxE,MAAMC,EAAgCD,EAEtC,IAAIE,EAAQ,EACRC,EAAU,GAGd,SAASC,GAAyB,CAChC,MAAMC,EAAIX,EAAO,MACXY,EAAIZ,EAAO,OACjB,MAAO,CACL,EAAG,KAAK,OAAA,EAAWW,EACnB,EAAG,KAAK,OAAA,EAAWC,EACnB,IAAK,KAAK,OAAA,EAAW,IAAOT,EAAQ,IACpC,IAAK,KAAK,OAAA,EAAW,IAAOA,EAAQ,IACpC,MAAOF,EAAO,KAAK,MAAM,KAAK,OAAA,EAAWA,EAAO,MAAM,CAAC,EACvD,KAAMG,GAAa,GAAM,KAAK,SAAW,IACzC,MAAO,KAAK,OAAA,EACZ,SAAU,KAAK,SAAW,GAAM,EAAI,EAAA,CAExC,CAEA,MAAMS,EAAwB,MAAM,KAAK,CAAE,OAAQX,CAAA,EAAiBQ,CAAY,EAGhF,SAASI,EAAeC,EAAmB,CACzC,MAAMJ,EAAIX,EAAO,MACXY,EAAIZ,EAAO,OAEjBe,EAAE,GAAKA,EAAE,GAAKZ,EACdY,EAAE,GAAKA,EAAE,GAAKZ,GAGVY,EAAE,EAAI,GAAKA,EAAE,EAAIJ,OAAK,IAAM,KAC5BI,EAAE,EAAI,GAAKA,EAAE,EAAIH,OAAK,IAAM,IAGhCG,EAAE,OAAS,KAAQA,EAAE,SACjBA,EAAE,OAAS,IAAKA,EAAE,MAAQ,EAAGA,EAAE,SAAW,IAC1CA,EAAE,OAAS,KAAOA,EAAE,MAAQ,GAAKA,EAAE,SAAW,EACpD,CAGA,SAASC,EAAaD,EAAmB,CACvCR,EAAI,YAAcQ,EAAE,MACpBR,EAAI,UAAYQ,EAAE,MAClBR,EAAI,SACF,KAAK,MAAMQ,EAAE,CAAC,EACd,KAAK,MAAMA,EAAE,CAAC,EACd,KAAK,MAAMA,EAAE,IAAI,EACjB,KAAK,MAAMA,EAAE,IAAI,CAAA,CAErB,CAGA,SAASE,GAAwB,CAE/B,QAASC,EAAI,EAAGA,EAAIL,EAAU,OAAQK,IACpC,QAASC,EAAID,EAAI,EAAGC,EAAIN,EAAU,OAAQM,IAAK,CAC7C,MAAMC,EAAKP,EAAUK,CAAC,EAAE,EAAIL,EAAUM,CAAC,EAAE,EACnCE,EAAKR,EAAUK,CAAC,EAAE,EAAIL,EAAUM,CAAC,EAAE,EACnCG,EAAO,KAAK,KAAKF,EAAKA,EAAKC,EAAKA,CAAE,EACpCC,EAAO,KACTf,EAAI,aAAe,EAAIe,EAAO,IAAW,IACzCf,EAAI,YAAcM,EAAUK,CAAC,EAAE,MAC/BX,EAAI,UAAY,GAChBA,EAAI,UAAA,EACJA,EAAI,OAAOM,EAAUK,CAAC,EAAE,EAAGL,EAAUK,CAAC,EAAE,CAAC,EACzCX,EAAI,OAAOM,EAAUM,CAAC,EAAE,EAAGN,EAAUM,CAAC,EAAE,CAAC,EACzCZ,EAAI,OAAA,EAER,CAEJ,CAGA,SAASgB,GAAa,CACpB,GAAI,CAACd,EAAS,OAEd,MAAME,EAAIX,EAAO,MACXY,EAAIZ,EAAO,OAGjBO,EAAI,YAAc,IAClBA,EAAI,UAAY,OAChBA,EAAI,SAAS,EAAG,EAAGI,EAAGC,CAAC,EAEvBL,EAAI,YAAc,EAGlB,UAAWQ,KAAKF,EACdC,EAAeC,CAAC,EAChBC,EAAaD,CAAC,EAGhBE,EAAA,EAEAZ,GAAA,MAAAA,IACAG,EAAQ,sBAAsBe,CAAI,CACpC,CAEA,OAAAA,EAAA,EAGO,UAAgB,CACrBd,EAAU,GACV,qBAAqBD,CAAK,CAC5B,CACF,ibCvGA,MAAMgB,EAAQC,EAcRC,EAAOC,EAQPC,EAAYC,EAAAA,IAA8B,IAAI,EACpD,IAAIC,EAA8B,KAC9BC,EAAQ,EAEZ,MAAMC,EAAcC,EAAAA,SAAwB,KAAO,CACjD,QAAS,QACT,WAAYT,EAAM,UAAA,EAClB,EAKF,SAASU,GAAQ,CACf,GAAI,CAACN,EAAU,MAAO,OACtBE,GAAA,MAAAA,IAEA,MAAM/B,EAA4B,CAChC,OAAQ6B,EAAU,MAClB,OAAQJ,EAAM,OACd,cAAeA,EAAM,cACrB,MAAOA,EAAM,MACb,UAAWA,EAAM,UACjB,OAAQ,IAAME,EAAK,OAAQ,EAAEK,CAAK,CAAA,EAGpCD,EAAShC,EAAgBC,CAAO,EAChC2B,EAAK,OAAO,CACd,CAEA,SAASS,GAAO,CACdL,GAAA,MAAAA,IACAA,EAAS,IACX,CAKAM,OAAAA,EAAAA,UAAU,IAAM,CACVZ,EAAM,UAAUU,EAAA,CACtB,CAAC,EAEDG,EAAAA,YAAY,IAAM,CAChBF,EAAA,CACF,CAAC,EAEDG,EAAAA,MACE,IAAM,CAACd,EAAM,cAAeA,EAAM,MAAOA,EAAM,UAAWA,EAAM,MAAM,EACtE,IAAM,CACAM,GAAQI,EAAA,CACd,EACA,CAAE,KAAM,EAAA,CAAK,EAMfK,EAAa,CAAE,MAAAL,EAAO,KAAAC,EAAM,wBAnH1BK,EAAAA,mBAME,SAAA,SALI,YAAJ,IAAIZ,EACH,MAAOH,EAAA,MACP,OAAQA,EAAA,OACR,uBAAOO,EAAA,KAAW,EACnB,MAAM,mBAAA,oDCEJS,EAAe,CACnB,QAAQC,EAAU,CAChBA,EAAI,UAAU,YAAaC,CAAS,CACtC,CACF"}

package/dist/style.css

@@ -0,0 +1 @@
+.pixel-flow-canvas[data-v-89863d06]{border-radius:4px}

package/package.json

@@ -1,45 +1,62 @@
 {
   "name": "pixel-flow-vue",
-  "version": "1.0.9",
-  "description": "A Vue-based pixel flow library",
+  "version": "1.0.10",
+  "description": "A lightweight Vue 3 pixel-flow animation plugin with TypeScript support",
   "type": "module",
-  "main": "./dist/pixel-flow.umd.js",
-  "module": "./dist/pixel-flow.es.js",
-  "types": "./dist/types/index.d.ts",
+  "main": "./dist/pixel-flow-vue.umd.cjs",
+  "module": "./dist/pixel-flow-vue.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/pixel-flow.es.js",
-      "require": "./dist/pixel-flow.umd.js"
-    }
+      "import": "./dist/pixel-flow-vue.js",
+      "require": "./dist/pixel-flow-vue.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
+    "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "dev": "vite"
-  },
-  "peerDependencies": {
-    "vue": "^3.2.0 || ^3.3.0 || ^3.4.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.0",
-    "typescript": "^5.3.0",
-    "vite": "^5.0.0",
-    "vue": "^3.4.0",
-    "vue-tsc": "^1.8.0"
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist",
+    "preview": "vite preview",
+    "lint": "eslint src --ext .ts,.vue --fix"
   },
   "keywords": [
+    "vue",
     "vue3",
-    "vue-plugin",
+    "plugin",
+    "pixel",
+    "flow",
+    "animation",
+    "canvas",
     "typescript",
-    "pixel-flow"
+    "component"
   ],
   "author": "",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "https://github.com/your-username/pixel-flow-vue.git"
+  },
+  "homepage": "https://github.com/your-username/pixel-flow-vue#readme",
+  "bugs": {
+    "url": "https://github.com/your-username/pixel-flow-vue/issues"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.3.0",
+    "vite-plugin-dts": "^3.9.0",
+    "vue": "^3.4.0",
+    "vue-tsc": "^2.0.0"
   }
-}
+}

package/dist/pixel-flow-vue.css

@@ -1,2 +0,0 @@
-.pixel-flow[data-v-61417c41]{font-size:16px}
-/*$vite$:1*/

package/dist/pixel-flow.es.js

@@ -1,22 +0,0 @@
-import { createElementBlock as e, createTextVNode as t, defineComponent as n, normalizeStyle as r, openBlock as i, renderSlot as a } from "vue";
-//#endregion
-//#region src/components/PixelFlow.vue
-var o = /*#__PURE__*/ ((e, t) => {
-	let n = e.__vccOpts || e;
-	for (let [e, r] of t) n[e] = r;
-	return n;
-})(/* @__PURE__ */ n({
-	__name: "PixelFlow",
-	props: { color: {} },
-	setup(n) {
-		return (o, s) => (i(), e("div", {
-			class: "pixel-flow",
-			style: r({ color: n.color })
-		}, [a(o.$slots, "default", {}, () => [s[0] ||= t("默认内容", -1)], !0)], 4));
-	}
-}), [["__scopeId", "data-v-61417c41"]]), s = { install(e, t = {}) {
-	e.component("PixelFlow", o), t.defaultColor && console.log("全局默认颜色：", t.defaultColor);
-} };
-typeof window < "u" && window.Vue && window.Vue.use(s, {});
-//#endregion
-export { o as PixelFlow, s as default };

package/dist/pixel-flow.umd.js

@@ -1 +0,0 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.PixelFlowVue3={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`PixelFlow`,props:{color:{}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`pixel-flow`,style:(0,t.normalizeStyle)({color:e.color})},[(0,t.renderSlot)(n.$slots,`default`,{},()=>[r[0]||=(0,t.createTextVNode)(`默认内容`,-1)],!0)],4))}}),[[`__scopeId`,`data-v-61417c41`]]),r={install(e,t={}){e.component(`PixelFlow`,n),t.defaultColor&&console.log(`全局默认颜色：`,t.defaultColor)}};typeof window<`u`&&window.Vue&&window.Vue.use(r,{}),e.PixelFlow=n,e.default=r});