3
3
<template #preview >
4
4
<div class =" h-[600px] overflow-hidden demo-container relative" >
5
5
<LightRays
6
- :key =" rerenderKey"
7
6
:rays-origin =" raysOrigin"
8
7
:rays-color =" raysColor"
9
8
:rays-speed =" raysSpeed"
23
22
</div >
24
23
25
24
<Customize >
26
- <div class =" flex items-center mb-4" >
27
- <span class =" text-sm mr-2" >Rays Color</span >
28
- <input
29
- type =" color"
30
- :value =" raysColor"
31
- @input =" updateRaysColor"
32
- class =" w-12 h-8 border border-gray-300 rounded cursor-pointer"
33
- />
34
- </div >
25
+ <PreviewColor
26
+ title =" Rays Color"
27
+ v-model =" raysColor"
28
+ />
35
29
36
30
<PreviewSelect
37
31
title =" Rays Origin"
38
32
v-model =" raysOrigin"
39
33
:options =" raysOriginOptions"
40
- @update:model-value =" forceRerender"
41
34
/>
42
35
43
36
<PreviewSlider
46
39
:min =" 0.1"
47
40
:max =" 3"
48
41
:step =" 0.1"
49
- @update:model-value =" forceRerender"
50
42
/>
51
43
52
44
<PreviewSlider
55
47
:min =" 0.1"
56
48
:max =" 2"
57
49
:step =" 0.1"
58
- @update:model-value =" forceRerender"
59
50
/>
60
51
61
52
<PreviewSlider
64
55
:min =" 0.5"
65
56
:max =" 3"
66
57
:step =" 0.1"
67
- @update:model-value =" forceRerender"
68
58
/>
69
59
70
60
<PreviewSlider
73
63
:min =" 0.5"
74
64
:max =" 2"
75
65
:step =" 0.1"
76
- @update:model-value =" forceRerender"
77
66
/>
78
67
79
68
<PreviewSlider
82
71
:min =" 0"
83
72
:max =" 2"
84
73
:step =" 0.1"
85
- @update:model-value =" forceRerender"
86
74
/>
87
75
88
76
<PreviewSlider
91
79
:min =" 0"
92
80
:max =" 1"
93
81
:step =" 0.1"
94
- @update:model-value =" forceRerender"
95
82
/>
96
83
97
84
<PreviewSlider
100
87
:min =" 0"
101
88
:max =" 0.5"
102
89
:step =" 0.01"
103
- @update:model-value =" forceRerender"
104
90
/>
105
91
106
92
<PreviewSlider
109
95
:min =" 0"
110
96
:max =" 1"
111
97
:step =" 0.1"
112
- @update:model-value =" forceRerender"
113
98
/>
114
99
115
- <PreviewSwitch title =" Pulsating" v-model =" pulsating" @update:model-value = " forceRerender " />
100
+ <PreviewSwitch title =" Pulsating" v-model =" pulsating" />
116
101
</Customize >
117
102
118
103
<PropTable :data =" propData" />
@@ -140,11 +125,11 @@ import Customize from '@/components/common/Customize.vue';
140
125
import PreviewSwitch from ' @/components/common/PreviewSwitch.vue' ;
141
126
import PreviewSlider from ' @/components/common/PreviewSlider.vue' ;
142
127
import PreviewSelect from ' @/components/common/PreviewSelect.vue' ;
128
+ import PreviewColor from ' @/components/common/PreviewColor.vue' ;
143
129
import BackgroundContent from ' @/components/common/BackgroundContent.vue' ;
144
130
import LightRays , { type RaysOrigin } from ' ../../content/Backgrounds/LightRays/LightRays.vue' ;
145
131
import { lightRays } from ' @/constants/code/Backgrounds/lightRaysCode' ;
146
132
147
- const rerenderKey = ref (0 );
148
133
const raysOrigin = ref <RaysOrigin >(' top-center' );
149
134
const raysColor = ref (' #ffffff' );
150
135
const raysSpeed = ref (1 );
@@ -168,16 +153,6 @@ const raysOriginOptions = [
168
153
{ value: ' bottom-right' , label: ' Bottom Right' }
169
154
];
170
155
171
- const forceRerender = () => {
172
- rerenderKey .value += 1 ;
173
- };
174
-
175
- const updateRaysColor = (event : Event ) => {
176
- const target = event .target as HTMLInputElement ;
177
- raysColor .value = target .value ;
178
- forceRerender ();
179
- };
180
-
181
156
const propData = [
182
157
{
183
158
name: ' raysOrigin' ,
@@ -202,61 +177,55 @@ const propData = [
202
177
name: ' lightSpread' ,
203
178
type: ' number' ,
204
179
default: ' 0.5' ,
205
- description: ' How wide the light rays spread. Lower values = tighter rays, higher values = wider spread'
180
+ description: ' Controls how wide the light rays spread'
206
181
},
207
182
{
208
183
name: ' rayLength' ,
209
184
type: ' number' ,
210
- default: ' 1 .0' ,
211
- description: ' Maximum length/reach of the rays'
185
+ default: ' 3 .0' ,
186
+ description: ' Length of the light rays'
212
187
},
213
188
{
214
189
name: ' pulsating' ,
215
190
type: ' boolean' ,
216
191
default: ' false' ,
217
- description: ' Enable pulsing animation effect '
192
+ description: ' Whether the rays should pulsate '
218
193
},
219
194
{
220
195
name: ' fadeDistance' ,
221
196
type: ' number' ,
222
197
default: ' 1.0' ,
223
- description: ' How far rays fade out from origin '
198
+ description: ' Distance at which the rays fade out'
224
199
},
225
200
{
226
201
name: ' saturation' ,
227
202
type: ' number' ,
228
203
default: ' 1.0' ,
229
- description: ' Color saturation level (0-1) '
204
+ description: ' Color saturation of the rays '
230
205
},
231
206
{
232
207
name: ' followMouse' ,
233
208
type: ' boolean' ,
234
209
default: ' false' ,
235
- description: ' Make rays rotate towards the mouse cursor'
210
+ description: ' Whether the rays should follow the mouse cursor'
236
211
},
237
212
{
238
213
name: ' mouseInfluence' ,
239
214
type: ' number' ,
240
- default: ' 0.5 ' ,
241
- description: ' How much mouse affects rays (0-1) '
215
+ default: ' 0.1 ' ,
216
+ description: ' How much the mouse movement affects the rays '
242
217
},
243
218
{
244
219
name: ' noiseAmount' ,
245
220
type: ' number' ,
246
221
default: ' 0.0' ,
247
- description: ' Add noise/grain to rays (0-1) '
222
+ description: ' Amount of noise/distortion in the rays '
248
223
},
249
224
{
250
225
name: ' distortion' ,
251
226
type: ' number' ,
252
227
default: ' 0.0' ,
253
- description: ' Apply wave distortion to rays'
254
- },
255
- {
256
- name: ' className' ,
257
- type: ' string' ,
258
- default: ' ""' ,
259
- description: ' Additional CSS classes to apply to the container'
228
+ description: ' Amount of wave distortion in the rays'
260
229
}
261
230
];
262
231
</script >
0 commit comments