@bg-effects/fireworks 1.0.6 â 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +39 -232
- package/dist/ConfigPanel-CEj7MToh.js +189 -0
- package/dist/index-CQylcZgx.js +1814 -0
- package/dist/index.d.ts +203 -0
- package/dist/index.js +7 -0
- package/dist/index.umd.cjs +161 -0
- package/package.json +73 -19
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 huangzida
|
|
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.
|
package/README.md
CHANGED
|
@@ -1,270 +1,77 @@
|
|
|
1
1
|
# @bg-effects/fireworks
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[English](./README.md) | [įŽäŊä¸æ](./README_CN.md)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
A high-performance fireworks background effect built with OGL and Vue.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
[Live Demo](https://huangzida.github.io/fireworks/)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
- đ¨ **Highly Customizable** - 20+ configuration options across 4 categories
|
|
11
|
-
- đ **Multiple Shapes** - 18 predefined shapes (heart, star, butterfly, spiral, etc.)
|
|
12
|
-
- đ **Color Modes** - Single color or multi-color randomly generated
|
|
13
|
-
- đ¯ **Launch Modes** - 6 launch patterns (random, burst, wave, tide, etc.)
|
|
14
|
-
- đ§ **Debug Panel** - Built-in configuration panel with live preview
|
|
15
|
-
- đ **i18n Support** - Dual-language (Chinese/English) interface
|
|
16
|
-
- đĻ **3 Built-in Presets** - Ready-to-use configurations
|
|
9
|
+
---
|
|
17
10
|
|
|
18
|
-
|
|
11
|
+
### Features
|
|
19
12
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
13
|
+
- đ **High Performance**: Built with OGL (a lightweight WebGL library) for smooth rendering.
|
|
14
|
+
- đ¨ **Highly Customizable**: Multiple shapes (heart, star, butterfly, etc.), launch modes, and color options.
|
|
15
|
+
- đ ī¸ **Debug Mode**: Built-in visual debug panel for real-time adjustments.
|
|
16
|
+
- đĻ **Ready to Use**: Easy-to-use Vue component with simple configuration.
|
|
23
17
|
|
|
24
|
-
|
|
25
|
-
npm install @bg-effects/fireworks
|
|
18
|
+
### Installation
|
|
26
19
|
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
```bash
|
|
21
|
+
pnpm add @bg-effects/fireworks ogl
|
|
29
22
|
```
|
|
30
23
|
|
|
31
|
-
|
|
24
|
+
> **Note**: `ogl` is a peer dependency and needs to be installed manually.
|
|
32
25
|
|
|
33
|
-
###
|
|
26
|
+
### Usage
|
|
34
27
|
|
|
35
28
|
```vue
|
|
36
29
|
<script setup>
|
|
37
30
|
import { Fireworks } from '@bg-effects/fireworks'
|
|
31
|
+
import '@bg-effects/fireworks/dist/index.css'
|
|
38
32
|
</script>
|
|
39
33
|
|
|
40
34
|
<template>
|
|
41
|
-
<div
|
|
42
|
-
<Fireworks
|
|
35
|
+
<div style="width: 100vw; height: 100vh; background: #000;">
|
|
36
|
+
<Fireworks
|
|
37
|
+
:firework-count="50"
|
|
38
|
+
shape="heart"
|
|
39
|
+
color-mode="multi"
|
|
40
|
+
/>
|
|
43
41
|
</div>
|
|
44
42
|
</template>
|
|
45
|
-
|
|
46
|
-
<style scoped>
|
|
47
|
-
.container {
|
|
48
|
-
width: 100vw;
|
|
49
|
-
height: 100vh;
|
|
50
|
-
position: relative;
|
|
51
|
-
}
|
|
52
|
-
</style>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
### With Debug Panel
|
|
56
|
-
|
|
57
|
-
```vue
|
|
58
|
-
<template>
|
|
59
|
-
<Fireworks debug lang="en" />
|
|
60
|
-
</template>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
### Custom Configuration
|
|
64
|
-
|
|
65
|
-
```vue
|
|
66
|
-
<script setup>
|
|
67
|
-
import { Fireworks } from '@bg-effects/fireworks'
|
|
68
|
-
|
|
69
|
-
const config = {
|
|
70
|
-
fireworkCount: 30,
|
|
71
|
-
speed: 1.5,
|
|
72
|
-
size: 2.5,
|
|
73
|
-
shape: 'heart',
|
|
74
|
-
colorMode: 'multi',
|
|
75
|
-
launchMode: 'burst',
|
|
76
|
-
gravity: 0.8
|
|
77
|
-
}
|
|
78
|
-
</script>
|
|
79
|
-
|
|
80
|
-
<template>
|
|
81
|
-
<Fireworks v-bind="config" />
|
|
82
|
-
</template>
|
|
83
43
|
```
|
|
84
44
|
|
|
85
|
-
## đ API Reference
|
|
86
|
-
|
|
87
45
|
### Props
|
|
88
46
|
|
|
89
|
-
#### General Settings
|
|
90
|
-
|
|
91
|
-
| Prop | Type | Default | Range | Description |
|
|
92
|
-
|------|------|---------|-------|-------------|
|
|
93
|
-
| `fireworkCount` | `number` | `20` | 1-100 | Number of fireworks particles |
|
|
94
|
-
| `density` | `number` | `1.0` | 0.5-3.0 | Particle density |
|
|
95
|
-
| `clusterSize` | `number` | `5.0` | 1-10 | Cluster size for simultaneous mode |
|
|
96
|
-
| `gravity` | `number` | `1.0` | 0-2.0 | Gravity strength |
|
|
97
|
-
|
|
98
|
-
#### Shape Settings
|
|
99
|
-
|
|
100
|
-
| Prop | Type | Default | Options | Description |
|
|
101
|
-
|------|------|---------|---------|-------------|
|
|
102
|
-
| `shape` | `string` | `'normal'` | See below | Firework shape pattern |
|
|
103
|
-
| `rotation` | `number` | `0` | 0-360 | Static rotation angle |
|
|
104
|
-
| `rotationJitter` | `number` | `0.2` | 0-1 | Random rotation variance |
|
|
105
|
-
|
|
106
|
-
**Available Shapes:**
|
|
107
|
-
`normal`, `circular`, `heart`, `star`, `butterfly`, `spiral`, `ring`, `doubleRing`, `atom`, `trefoil`, `clover`, `cross`, `saturn`, `hexagram`, `astroid`, `gear`, `fermat`, `folium`
|
|
108
|
-
|
|
109
|
-
#### Launch Settings
|
|
110
|
-
|
|
111
|
-
| Prop | Type | Default | Options | Description |
|
|
112
|
-
|------|------|---------|---------|-------------|
|
|
113
|
-
| `launchMode` | `string` | `'random'` | See below | Launch pattern |
|
|
114
|
-
| `launchInterval` | `number` | `5.0` | 0.5-10 | Time between launches |
|
|
115
|
-
|
|
116
|
-
**Launch Modes:**
|
|
117
|
-
- `random` - Random launch timing
|
|
118
|
-
- `burst` - Rapid bursts
|
|
119
|
-
- `wave` - Wave pattern
|
|
120
|
-
- `tide` - Tide-like rhythm
|
|
121
|
-
- `simultaneous` - All at once
|
|
122
|
-
- `pendulum` - Swinging pattern
|
|
123
|
-
|
|
124
|
-
#### Visual Effects
|
|
125
|
-
|
|
126
|
-
| Prop | Type | Default | Range | Description |
|
|
127
|
-
|------|------|---------|-------|-------------|
|
|
128
|
-
| `speed` | `number` | `1.0` | 0.5-2.0 | Animation speed multiplier |
|
|
129
|
-
| `size` | `number` | `2.0` | 0.5-5.0 | Particle size |
|
|
130
|
-
| `flashIntensity` | `number` | `1.0` | 0-3.0 | Launch flash intensity |
|
|
131
|
-
| `flashOpacity` | `number` | `0.3` | 0-1.0 | Flash opacity |
|
|
132
|
-
| `colorMode` | `string` | `'multi'` | `single`, `multi` | Color selection mode |
|
|
133
|
-
| `color` | `string` | `'#ffffff'` | hex | Color for single mode |
|
|
134
|
-
|
|
135
|
-
#### System Props
|
|
136
|
-
|
|
137
47
|
| Prop | Type | Default | Description |
|
|
138
|
-
|
|
48
|
+
| :--- | :--- | :--- | :--- |
|
|
49
|
+
| `firework-count` | `number` | `30` | Number of fireworks |
|
|
50
|
+
| `speed` | `number` | `1.0` | Animation speed |
|
|
51
|
+
| `size` | `number` | `2.0` | Particle size |
|
|
52
|
+
| `shape` | `string` | `'normal'` | Firework shape (see below) |
|
|
53
|
+
| `launch-mode` | `string` | `'random'` | Launch mode (see below) |
|
|
54
|
+
| `color-mode` | `string` | `'multi'` | Color mode (`'single'` or `'multi'`) |
|
|
55
|
+
| `color` | `string` | `'#ff0000'` | Color when color mode is `'single'` |
|
|
139
56
|
| `debug` | `boolean` | `false` | Enable debug panel |
|
|
140
|
-
| `lang` | `
|
|
141
|
-
| `className` | `string` | - | Custom CSS class |
|
|
142
|
-
|
|
143
|
-
## đ¨ Presets
|
|
144
|
-
|
|
145
|
-
Three beautiful built-in presets are included:
|
|
146
|
-
|
|
147
|
-
### Midnight Bloom (åå¤įæž)
|
|
148
|
-
```vue
|
|
149
|
-
<Fireworks
|
|
150
|
-
:fireworkCount="30"
|
|
151
|
-
:speed="1.2"
|
|
152
|
-
:size="1.2"
|
|
153
|
-
:launchInterval="3.0"
|
|
154
|
-
colorMode="multi"
|
|
155
|
-
shape="circular"
|
|
156
|
-
/>
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
### Golden Rain (éč˛é¨é˛)
|
|
160
|
-
```vue
|
|
161
|
-
<Fireworks
|
|
162
|
-
:fireworkCount="25"
|
|
163
|
-
:speed="0.8"
|
|
164
|
-
:size="1.5"
|
|
165
|
-
:launchInterval="4.0"
|
|
166
|
-
colorMode="single"
|
|
167
|
-
color="#ffcc00"
|
|
168
|
-
shape="normal"
|
|
169
|
-
:gravity="0.5"
|
|
170
|
-
/>
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
### Rapid Sequence (čŋį¯åå°)
|
|
174
|
-
```vue
|
|
175
|
-
<Fireworks
|
|
176
|
-
:fireworkCount="15"
|
|
177
|
-
:speed="1.5"
|
|
178
|
-
:size="1.8"
|
|
179
|
-
:launchInterval="1.0"
|
|
180
|
-
shape="random"
|
|
181
|
-
launchMode="random"
|
|
182
|
-
colorMode="multi"
|
|
183
|
-
:density="2.0"
|
|
184
|
-
/>
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
## đ¯ Usage Tips
|
|
188
|
-
|
|
189
|
-
### Performance Optimization
|
|
190
|
-
|
|
191
|
-
```vue
|
|
192
|
-
<!-- Reduce particle count for mobile devices -->
|
|
193
|
-
<Fireworks :fireworkCount="10" :density="0.5" />
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
### Responsive Design
|
|
197
|
-
|
|
198
|
-
```vue
|
|
199
|
-
<template>
|
|
200
|
-
<div class="fireworks-wrapper">
|
|
201
|
-
<Fireworks v-bind="responsiveConfig" />
|
|
202
|
-
</div>
|
|
203
|
-
</template>
|
|
204
|
-
|
|
205
|
-
<script setup>
|
|
206
|
-
import { computed } from 'vue'
|
|
207
|
-
import { Fireworks } from '@bg-effects/fireworks'
|
|
208
|
-
|
|
209
|
-
const isMobile = computed(() => window.innerWidth < 768)
|
|
210
|
-
|
|
211
|
-
const responsiveConfig = computed(() => ({
|
|
212
|
-
fireworkCount: isMobile.value ? 10 : 30,
|
|
213
|
-
size: isMobile.value ? 1.5 : 2.5
|
|
214
|
-
}))
|
|
215
|
-
</script>
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
### Event-Triggered Effects
|
|
219
|
-
|
|
220
|
-
```vue
|
|
221
|
-
<script setup>
|
|
222
|
-
import { ref } from 'vue'
|
|
223
|
-
import { Fireworks } from '@bg-effects/fireworks'
|
|
57
|
+
| `lang` | `'zh-CN' \| 'en'` | `'zh-CN'` | UI language |
|
|
224
58
|
|
|
225
|
-
|
|
59
|
+
#### Supported Shapes (`shape`)
|
|
60
|
+
`normal`, `circular`, `heart`, `star`, `butterfly`, `spiral`, `ring`, `doubleRing`, `atom`, `trefoil`, `clover`, `cross`, `saturn`, `hexagram`, `astroid`, `gear`, `fermat`, `folium`, `random`
|
|
226
61
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
setTimeout(() => {
|
|
230
|
-
launchMode.value = 'random'
|
|
231
|
-
}, 3000)
|
|
232
|
-
}
|
|
233
|
-
</script>
|
|
234
|
-
|
|
235
|
-
<template>
|
|
236
|
-
<Fireworks :launchMode="launchMode" />
|
|
237
|
-
<button @click="celebrate">Celebrate! đ</button>
|
|
238
|
-
</template>
|
|
239
|
-
```
|
|
62
|
+
#### Launch Modes (`launchMode`)
|
|
63
|
+
`random`, `burst`, `wave`, `tide`, `simultaneous`, `pendulum`
|
|
240
64
|
|
|
241
|
-
|
|
65
|
+
### Local Development
|
|
242
66
|
|
|
243
67
|
```bash
|
|
244
68
|
# Install dependencies
|
|
245
69
|
pnpm install
|
|
246
70
|
|
|
247
|
-
#
|
|
248
|
-
pnpm
|
|
249
|
-
|
|
250
|
-
# Watch mode
|
|
251
|
-
pnpm -F @bg-effects/fireworks dev
|
|
71
|
+
# Start development server
|
|
72
|
+
pnpm dev
|
|
252
73
|
```
|
|
253
74
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
MIT License
|
|
257
|
-
|
|
258
|
-
## đ¤ Contributing
|
|
259
|
-
|
|
260
|
-
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
261
|
-
|
|
262
|
-
## đ Links
|
|
263
|
-
|
|
264
|
-
- [Documentation](../../apps/docs/docs/effects/fireworks.md)
|
|
265
|
-
- [Playground Demo](../../apps/playground)
|
|
266
|
-
- [GitHub Repository](https://github.com/yourusername/bg-effects)
|
|
267
|
-
|
|
268
|
-
---
|
|
75
|
+
### License
|
|
269
76
|
|
|
270
|
-
|
|
77
|
+
MIT
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
import { defineComponent as y, ref as k, computed as C, openBlock as s, createElementBlock as a, createVNode as I, unref as N, createElementVNode as t, Fragment as x, renderList as h, toDisplayString as l, createCommentVNode as b, normalizeClass as f } from "vue";
|
|
2
|
+
import { S as z, e as $, z as M, _ as F } from "./index-CQylcZgx.js";
|
|
3
|
+
const V = { class: "flex flex-col gap-6 text-white/90" }, S = { class: "flex flex-col gap-6 p-1 pointer-events-auto overflow-y-auto max-h-[400px] custom-scrollbar pr-2" }, J = {
|
|
4
|
+
key: 0,
|
|
5
|
+
class: "flex flex-col gap-6"
|
|
6
|
+
}, O = { class: "flex justify-between items-center px-1" }, j = { class: "text-[10px] font-bold uppercase tracking-[0.2em] text-white/20 group-hover/item:text-white/40 transition-colors" }, B = { class: "text-[11px] font-black font-mono text-white/40 group-hover/item:text-blue-400 transition-colors" }, E = ["value", "min", "max", "step", "onInput"], P = {
|
|
7
|
+
key: 1,
|
|
8
|
+
class: "flex flex-col gap-5"
|
|
9
|
+
}, T = { class: "text-[9px] font-black uppercase tracking-[0.15em] text-white/20" }, D = { class: "grid grid-cols-3 gap-2" }, L = ["onClick"], R = { class: "flex flex-col gap-3 py-2 border-t border-white/5 mt-2" }, U = { class: "flex justify-between items-center text-[9px] font-black uppercase tracking-[0.15em] text-white/30" }, X = { class: "text-white/80 font-mono" }, q = ["value"], A = { class: "flex flex-col gap-2.5" }, G = { class: "flex justify-between items-center text-[9px] font-black uppercase tracking-[0.15em] text-white/30" }, H = { class: "text-white/80 font-mono" }, K = ["value"], Q = {
|
|
10
|
+
key: 2,
|
|
11
|
+
class: "flex flex-col gap-6"
|
|
12
|
+
}, W = { class: "flex flex-col gap-3" }, Y = { class: "text-[10px] font-bold uppercase tracking-[0.2em] text-white/20 px-1" }, Z = { class: "grid grid-cols-2 gap-2" }, ee = ["onClick"], te = { class: "flex flex-col gap-3 group/item border-t border-white/5 pt-4" }, le = { class: "flex justify-between items-center px-1" }, oe = { class: "text-[10px] font-bold uppercase tracking-[0.2em] text-white/20 group-hover/item:text-white/40 transition-colors" }, ne = { class: "text-[11px] font-black font-mono text-white/40 group-hover/item:text-blue-400 transition-colors" }, ie = ["value"], se = {
|
|
13
|
+
key: 3,
|
|
14
|
+
class: "flex flex-col gap-6"
|
|
15
|
+
}, ae = { class: "flex flex-col gap-3" }, re = { class: "text-[10px] font-bold uppercase tracking-[0.2em] text-white/20 px-1" }, ce = { class: "flex gap-2" }, de = ["onClick"], ue = {
|
|
16
|
+
key: 0,
|
|
17
|
+
class: "flex flex-col gap-3 group/item bg-white/[0.02] p-4 rounded-xl border border-white/5 shadow-inner"
|
|
18
|
+
}, xe = { class: "text-[10px] font-bold uppercase tracking-[0.2em] text-white/20" }, he = { class: "flex gap-4 items-center" }, be = { class: "relative w-10 h-10 rounded-lg overflow-hidden border border-white/10 shadow-lg" }, fe = ["value"], ge = { class: "text-xs font-mono font-bold text-white/40 bg-white/5 px-3 py-1.5 rounded-lg border border-white/5" }, me = { class: "flex justify-between items-center px-1" }, pe = { class: "text-[10px] font-bold uppercase tracking-[0.2em] text-white/20 group-hover/item:text-white/40 transition-colors" }, ve = { class: "text-[11px] font-black font-mono text-white/40 group-hover/item:text-blue-400 transition-colors" }, we = ["value", "min", "max", "step", "onInput"], _e = /* @__PURE__ */ y({
|
|
19
|
+
__name: "ConfigPanel",
|
|
20
|
+
props: {
|
|
21
|
+
config: {},
|
|
22
|
+
lang: {}
|
|
23
|
+
},
|
|
24
|
+
emits: ["update:config"],
|
|
25
|
+
setup(o, { expose: m, emit: p }) {
|
|
26
|
+
const g = o, v = p, d = k("general");
|
|
27
|
+
m({
|
|
28
|
+
activeTab: d
|
|
29
|
+
});
|
|
30
|
+
const w = {
|
|
31
|
+
"zh-CN": M,
|
|
32
|
+
en: $
|
|
33
|
+
}, n = (u) => {
|
|
34
|
+
const i = w[g.lang || "zh-CN"];
|
|
35
|
+
return u.split(".").reduce((e, c) => e == null ? void 0 : e[c], i) || u;
|
|
36
|
+
}, _ = C(() => [
|
|
37
|
+
{ id: "general", label: n("tabs.general") },
|
|
38
|
+
{ id: "shape", label: n("tabs.shape") },
|
|
39
|
+
{ id: "launch", label: n("tabs.launch") },
|
|
40
|
+
{ id: "visual", label: n("tabs.visual") }
|
|
41
|
+
]), r = (u, i) => {
|
|
42
|
+
const e = { ...g.config, [u]: i };
|
|
43
|
+
v("update:config", e);
|
|
44
|
+
};
|
|
45
|
+
return (u, i) => (s(), a("div", V, [
|
|
46
|
+
I(N(z), {
|
|
47
|
+
modelValue: d.value,
|
|
48
|
+
"onUpdate:modelValue": i[0] || (i[0] = (e) => d.value = e),
|
|
49
|
+
tabs: _.value
|
|
50
|
+
}, null, 8, ["modelValue", "tabs"]),
|
|
51
|
+
t("div", S, [
|
|
52
|
+
d.value === "general" ? (s(), a("div", J, [
|
|
53
|
+
(s(), a(x, null, h([{ id: "fireworkCount", min: 1, max: 100, step: 1, label: "count" }, { id: "density", min: 0.5, max: 5, step: 0.1, label: "density", suffix: "X" }, { id: "size", min: 1, max: 5, step: 0.1, label: "size" }, { id: "clusterSize", min: 0.1, max: 10, step: 0.1, label: "cluster" }, { id: "gravity", min: 0, max: 2, step: 0.1, label: "gravity" }], (e) => t("div", {
|
|
54
|
+
key: e.id,
|
|
55
|
+
class: "flex flex-col gap-3 group/item"
|
|
56
|
+
}, [
|
|
57
|
+
t("div", O, [
|
|
58
|
+
t("label", j, l(n(`labels.${e.label}`)), 1),
|
|
59
|
+
t("span", B, l(typeof o.config[e.id] == "number" ? o.config[e.id].toFixed(e.step < 1 ? 1 : 0) : o.config[e.id]) + l(e.suffix || ""), 1)
|
|
60
|
+
]),
|
|
61
|
+
t("input", {
|
|
62
|
+
type: "range",
|
|
63
|
+
value: o.config[e.id],
|
|
64
|
+
min: e.min,
|
|
65
|
+
max: e.max,
|
|
66
|
+
step: e.step,
|
|
67
|
+
class: "w-full accent-blue-500 bg-white/5 hover:bg-white/10 h-1.5 rounded-full appearance-none cursor-pointer transition-all border border-white/5",
|
|
68
|
+
onInput: (c) => r(e.id, Number(c.target.value))
|
|
69
|
+
}, null, 40, E)
|
|
70
|
+
])), 64))
|
|
71
|
+
])) : b("", !0),
|
|
72
|
+
d.value === "shape" ? (s(), a("div", P, [
|
|
73
|
+
t("label", T, l(n("labels.style")), 1),
|
|
74
|
+
t("div", D, [
|
|
75
|
+
(s(), a(x, null, h(["normal", "circular", "heart", "star", "butterfly", "spiral", "ring", "doubleRing", "atom", "trefoil", "clover", "cross", "saturn", "hexagram", "astroid", "gear", "fermat", "folium", "random"], (e) => t("button", {
|
|
76
|
+
key: e,
|
|
77
|
+
class: f(["py-2.5 text-[8px] font-bold border rounded-lg transition-all truncate px-1 shadow-sm cursor-pointer", o.config.shape === e ? "bg-blue-600 text-white border-blue-400/50 ring-1 ring-blue-400/30" : "bg-white/[0.03] text-white/25 border-white/5 hover:bg-white/10 hover:text-white/60"]),
|
|
78
|
+
onClick: (c) => r("shape", e)
|
|
79
|
+
}, l(n(`styles.${e}`)), 11, L)), 64))
|
|
80
|
+
]),
|
|
81
|
+
t("div", R, [
|
|
82
|
+
t("div", U, [
|
|
83
|
+
t("label", null, l(n("labels.rotation")), 1),
|
|
84
|
+
t("span", X, l((o.config.rotation ?? 0).toFixed(0)) + "°", 1)
|
|
85
|
+
]),
|
|
86
|
+
t("input", {
|
|
87
|
+
type: "range",
|
|
88
|
+
value: o.config.rotation,
|
|
89
|
+
min: "0",
|
|
90
|
+
max: "360",
|
|
91
|
+
step: "1",
|
|
92
|
+
class: "w-full accent-blue-500/80 bg-white/10 h-1 rounded-full appearance-none cursor-pointer",
|
|
93
|
+
onInput: i[1] || (i[1] = (e) => r("rotation", Number(e.target.value)))
|
|
94
|
+
}, null, 40, q)
|
|
95
|
+
]),
|
|
96
|
+
t("div", A, [
|
|
97
|
+
t("div", G, [
|
|
98
|
+
t("label", null, l(n("labels.jitter")), 1),
|
|
99
|
+
t("span", H, l((o.config.rotationJitter ?? 0).toFixed(2)), 1)
|
|
100
|
+
]),
|
|
101
|
+
t("input", {
|
|
102
|
+
type: "range",
|
|
103
|
+
value: o.config.rotationJitter,
|
|
104
|
+
min: "0",
|
|
105
|
+
max: "1",
|
|
106
|
+
step: "0.01",
|
|
107
|
+
class: "w-full accent-blue-500/80 bg-white/10 h-1 rounded-full appearance-none cursor-pointer",
|
|
108
|
+
onInput: i[2] || (i[2] = (e) => r("rotationJitter", Number(e.target.value)))
|
|
109
|
+
}, null, 40, K)
|
|
110
|
+
])
|
|
111
|
+
])) : b("", !0),
|
|
112
|
+
d.value === "launch" ? (s(), a("div", Q, [
|
|
113
|
+
t("div", W, [
|
|
114
|
+
t("label", Y, l(n("labels.launchMode")), 1),
|
|
115
|
+
t("div", Z, [
|
|
116
|
+
(s(), a(x, null, h(["random", "burst", "wave", "tide", "simultaneous", "pendulum"], (e) => t("button", {
|
|
117
|
+
key: e,
|
|
118
|
+
class: f(["py-2.5 text-[9px] font-bold border rounded-lg transition-all shadow-sm cursor-pointer", o.config.launchMode === e ? "bg-blue-600 text-white border-blue-400/50 ring-1 ring-blue-400/30" : "bg-white/[0.03] text-white/25 border-white/5 hover:bg-white/10"]),
|
|
119
|
+
onClick: (c) => r("launchMode", e)
|
|
120
|
+
}, l(n(`modes.${e}`)), 11, ee)), 64))
|
|
121
|
+
])
|
|
122
|
+
]),
|
|
123
|
+
t("div", te, [
|
|
124
|
+
t("div", le, [
|
|
125
|
+
t("label", oe, l(n("labels.interval")), 1),
|
|
126
|
+
t("span", ne, l((o.config.launchInterval ?? 5).toFixed(1)) + "s ", 1)
|
|
127
|
+
]),
|
|
128
|
+
t("input", {
|
|
129
|
+
type: "range",
|
|
130
|
+
value: o.config.launchInterval,
|
|
131
|
+
min: "0.5",
|
|
132
|
+
max: "15",
|
|
133
|
+
step: "0.5",
|
|
134
|
+
class: "w-full accent-blue-500 bg-white/5 hover:bg-white/10 h-1.5 rounded-full appearance-none cursor-pointer transition-all border border-white/5",
|
|
135
|
+
onInput: i[3] || (i[3] = (e) => r("launchInterval", Number(e.target.value)))
|
|
136
|
+
}, null, 40, ie)
|
|
137
|
+
])
|
|
138
|
+
])) : b("", !0),
|
|
139
|
+
d.value === "visual" ? (s(), a("div", se, [
|
|
140
|
+
t("div", ae, [
|
|
141
|
+
t("label", re, l(n("labels.colorMode")), 1),
|
|
142
|
+
t("div", ce, [
|
|
143
|
+
(s(), a(x, null, h(["single", "multi"], (e) => t("button", {
|
|
144
|
+
key: e,
|
|
145
|
+
class: f(["flex-1 py-2.5 text-[9px] font-bold border rounded-lg transition-all shadow-sm cursor-pointer", o.config.colorMode === e ? "bg-blue-600 text-white border-blue-400/50 ring-1 ring-blue-400/30" : "bg-white/[0.03] text-white/25 border-white/5 hover:bg-white/10"]),
|
|
146
|
+
onClick: (c) => r("colorMode", e)
|
|
147
|
+
}, l(n(`modes.${e}`)), 11, de)), 64))
|
|
148
|
+
])
|
|
149
|
+
]),
|
|
150
|
+
o.config.colorMode === "single" ? (s(), a("div", ue, [
|
|
151
|
+
t("label", xe, l(n("labels.color")), 1),
|
|
152
|
+
t("div", he, [
|
|
153
|
+
t("div", be, [
|
|
154
|
+
t("input", {
|
|
155
|
+
type: "color",
|
|
156
|
+
value: o.config.color,
|
|
157
|
+
class: "absolute inset-0 w-[150%] h-[150%] -translate-x-1/4 -translate-y-1/4 cursor-pointer scale-125",
|
|
158
|
+
onInput: i[4] || (i[4] = (e) => r("color", e.target.value))
|
|
159
|
+
}, null, 40, fe)
|
|
160
|
+
]),
|
|
161
|
+
t("span", ge, l(o.config.color), 1)
|
|
162
|
+
])
|
|
163
|
+
])) : b("", !0),
|
|
164
|
+
(s(), a(x, null, h([{ id: "flashOpacity", min: 0, max: 1, step: 0.05, label: "flash" }, { id: "flashIntensity", min: 0, max: 3, step: 0.1, label: "intensity", suffix: "x" }, { id: "speed", min: 0.1, max: 3, step: 0.1, label: "speed", suffix: "x" }], (e) => t("div", {
|
|
165
|
+
key: e.id,
|
|
166
|
+
class: "flex flex-col gap-3 group/item border-t border-white/5 pt-4"
|
|
167
|
+
}, [
|
|
168
|
+
t("div", me, [
|
|
169
|
+
t("label", pe, l(n(`labels.${e.label}`)), 1),
|
|
170
|
+
t("span", ve, l((o.config[e.id] ?? (e.id === "flashOpacity" ? 0.2 : 1)).toFixed(e.id === "flashOpacity" ? 2 : 1)) + l(e.suffix || ""), 1)
|
|
171
|
+
]),
|
|
172
|
+
t("input", {
|
|
173
|
+
type: "range",
|
|
174
|
+
value: o.config[e.id],
|
|
175
|
+
min: e.min,
|
|
176
|
+
max: e.max,
|
|
177
|
+
step: e.step,
|
|
178
|
+
class: "w-full accent-blue-500 bg-white/5 hover:bg-white/10 h-1.5 rounded-full appearance-none cursor-pointer transition-all border border-white/5",
|
|
179
|
+
onInput: (c) => r(e.id, Number(c.target.value))
|
|
180
|
+
}, null, 40, we)
|
|
181
|
+
])), 64))
|
|
182
|
+
])) : b("", !0)
|
|
183
|
+
])
|
|
184
|
+
]));
|
|
185
|
+
}
|
|
186
|
+
}), Ce = /* @__PURE__ */ F(_e, [["__scopeId", "data-v-8dacc1c4"]]);
|
|
187
|
+
export {
|
|
188
|
+
Ce as default
|
|
189
|
+
};
|