Skip to content

Commit 92dce03

Browse files
DavidHDevDavidHDev
committed
format
1 parent f0db19d commit 92dce03

File tree

5 files changed

+44
-116
lines changed

5 files changed

+44
-116
lines changed

‎src/content/Backgrounds/LightRays/LightRays.vue‎

Lines changed: 11 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
<template>
2-
<div
3-
ref="containerRef"
4-
:class="[
5-
'w-full h-full relative pointer-events-none z-[3] overflow-hidden',
6-
className
7-
]"
8-
/>
2+
<div ref="containerRef" :class="['w-full h-full relative pointer-events-none z-[3] overflow-hidden', className]" />
93
</template>
104

115
<script setup lang="ts">
@@ -96,18 +90,12 @@ const observerRef = ref<IntersectionObserver | null>(null);
9690
const resizeTimeoutRef = ref<number | null>(null);
9791
9892
const rgbColor = computed<[number, number, number]>(() => hexToRgb(props.raysColor));
99-
const pulsatingValue = computed<number>(() => props.pulsating ? 1.0 : 0.0);
93+
const pulsatingValue = computed<number>(() => (props.pulsating ? 1.0 : 0.0));
10094
const devicePixelRatio = computed<number>(() => Math.min(window.devicePixelRatio || 1, 2));
10195
10296
const hexToRgb = (hex: string): [number, number, number] => {
10397
const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
104-
return m
105-
? [
106-
parseInt(m[1], 16) / 255,
107-
parseInt(m[2], 16) / 255,
108-
parseInt(m[3], 16) / 255,
109-
]
110-
: [1, 1, 1];
98+
return m ? [parseInt(m[1], 16) / 255, parseInt(m[2], 16) / 255, parseInt(m[3], 16) / 255] : [1, 1, 1];
11199
};
112100
113101
const getAnchorAndDir = (origin: RaysOrigin, w: number, h: number): AnchorAndDirection => {
@@ -288,15 +276,15 @@ const initializeWebGL = async (): Promise<void> => {
288276
mousePos: { value: [0.5, 0.5] },
289277
mouseInfluence: { value: props.mouseInfluence },
290278
noiseAmount: { value: props.noiseAmount },
291-
distortion: { value: props.distortion },
279+
distortion: { value: props.distortion }
292280
};
293281
uniformsRef.value = uniforms;
294282
295283
const geometry = new Triangle(gl);
296284
const program = new Program(gl, {
297285
vertex: vertexShader,
298286
fragment: fragmentShader,
299-
uniforms,
287+
uniforms
300288
});
301289
const mesh = new Mesh(gl, { geometry, program });
302290
meshRef.value = mesh;
@@ -330,17 +318,10 @@ const initializeWebGL = async (): Promise<void> => {
330318
if (props.followMouse && props.mouseInfluence > 0.0) {
331319
const smoothing = 0.92;
332320
333-
smoothMouseRef.value.x =
334-
smoothMouseRef.value.x * smoothing +
335-
mouseRef.value.x * (1 - smoothing);
336-
smoothMouseRef.value.y =
337-
smoothMouseRef.value.y * smoothing +
338-
mouseRef.value.y * (1 - smoothing);
339-
340-
uniforms.mousePos.value = [
341-
smoothMouseRef.value.x,
342-
smoothMouseRef.value.y,
343-
];
321+
smoothMouseRef.value.x = smoothMouseRef.value.x * smoothing + mouseRef.value.x * (1 - smoothing);
322+
smoothMouseRef.value.y = smoothMouseRef.value.y * smoothing + mouseRef.value.y * (1 - smoothing);
323+
324+
uniforms.mousePos.value = [smoothMouseRef.value.x, smoothMouseRef.value.y];
344325
}
345326
346327
try {
@@ -376,8 +357,7 @@ const initializeWebGL = async (): Promise<void> => {
376357
if (renderer) {
377358
try {
378359
const canvas = renderer.gl.canvas;
379-
const loseContextExt =
380-
renderer.gl.getExtension('WEBGL_lose_context');
360+
const loseContextExt = renderer.gl.getExtension('WEBGL_lose_context');
381361
if (loseContextExt) {
382362
loseContextExt.loseContext();
383363
}
@@ -460,7 +440,7 @@ watch(
460440
() => props.saturation,
461441
() => props.mouseInfluence,
462442
() => props.noiseAmount,
463-
() => props.distortion,
443+
() => props.distortion
464444
],
465445
(): void => {
466446
if (!uniformsRef.value || !containerRef.value || !rendererRef.value) return;

‎src/content/Components/MagicBento/MagicBento.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -738,7 +738,13 @@ const setupCardRef = (el: HTMLDivElement | null, index: number) => {
738738
:glow-color="glowColor"
739739
/>
740740

741-
<BentoCardGrid :grid-ref="(el: HTMLDivElement | null) => { gridRef = el; }">
741+
<BentoCardGrid
742+
:grid-ref="
743+
(el: HTMLDivElement | null) => {
744+
gridRef = el;
745+
}
746+
"
747+
>
742748
<div class="gap-2 grid card-responsive">
743749
<template v-for="(card, index) in cardData" :key="index">
744750
<ParticleCard

‎src/content/Components/Stepper/Stepper.vue‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -261,18 +261,15 @@ const handleComplete = () => {
261261
props.onFinalStepCompleted?.();
262262
};
263263
264-
watch(
265-
currentStep,
266-
(newStep, oldStep) => {
267-
props.onStepChange?.(newStep);
268-
if (newStep !== oldStep && !isCompleted.value) {
269-
nextTick(measureHeight);
270-
} else if (!props.lockOnComplete && isCompleted.value) {
271-
isCompleted.value = false;
272-
nextTick(measureHeight);
273-
}
264+
watch(currentStep, (newStep, oldStep) => {
265+
props.onStepChange?.(newStep);
266+
if (newStep !== oldStep && !isCompleted.value) {
267+
nextTick(measureHeight);
268+
} else if (!props.lockOnComplete && isCompleted.value) {
269+
isCompleted.value = false;
270+
nextTick(measureHeight);
274271
}
275-
);
272+
});
276273
277274
onMounted(() => {
278275
if (props.initialStep !== 1) {

‎src/demo/Backgrounds/LightRaysDemo.vue‎

Lines changed: 10 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -22,80 +22,25 @@
2222
</div>
2323

2424
<Customize>
25-
<PreviewColor
26-
title="Rays Color"
27-
v-model="raysColor"
28-
/>
25+
<PreviewColor title="Rays Color" v-model="raysColor" />
2926

30-
<PreviewSelect
31-
title="Rays Origin"
32-
v-model="raysOrigin"
33-
:options="raysOriginOptions"
34-
/>
27+
<PreviewSelect title="Rays Origin" v-model="raysOrigin" :options="raysOriginOptions" />
3528

36-
<PreviewSlider
37-
title="Rays Speed"
38-
v-model="raysSpeed"
39-
:min="0.1"
40-
:max="3"
41-
:step="0.1"
42-
/>
29+
<PreviewSlider title="Rays Speed" v-model="raysSpeed" :min="0.1" :max="3" :step="0.1" />
4330

44-
<PreviewSlider
45-
title="Light Spread"
46-
v-model="lightSpread"
47-
:min="0.1"
48-
:max="2"
49-
:step="0.1"
50-
/>
31+
<PreviewSlider title="Light Spread" v-model="lightSpread" :min="0.1" :max="2" :step="0.1" />
5132

52-
<PreviewSlider
53-
title="Ray Length"
54-
v-model="rayLength"
55-
:min="0.5"
56-
:max="3"
57-
:step="0.1"
58-
/>
33+
<PreviewSlider title="Ray Length" v-model="rayLength" :min="0.5" :max="3" :step="0.1" />
5934

60-
<PreviewSlider
61-
title="Fade Distance"
62-
v-model="fadeDistance"
63-
:min="0.5"
64-
:max="2"
65-
:step="0.1"
66-
/>
35+
<PreviewSlider title="Fade Distance" v-model="fadeDistance" :min="0.5" :max="2" :step="0.1" />
6736

68-
<PreviewSlider
69-
title="Saturation"
70-
v-model="saturation"
71-
:min="0"
72-
:max="2"
73-
:step="0.1"
74-
/>
37+
<PreviewSlider title="Saturation" v-model="saturation" :min="0" :max="2" :step="0.1" />
7538

76-
<PreviewSlider
77-
title="Mouse Influence"
78-
v-model="mouseInfluence"
79-
:min="0"
80-
:max="1"
81-
:step="0.1"
82-
/>
39+
<PreviewSlider title="Mouse Influence" v-model="mouseInfluence" :min="0" :max="1" :step="0.1" />
8340

84-
<PreviewSlider
85-
title="Noise Amount"
86-
v-model="noiseAmount"
87-
:min="0"
88-
:max="0.5"
89-
:step="0.01"
90-
/>
41+
<PreviewSlider title="Noise Amount" v-model="noiseAmount" :min="0" :max="0.5" :step="0.01" />
9142

92-
<PreviewSlider
93-
title="Distortion"
94-
v-model="distortion"
95-
:min="0"
96-
:max="1"
97-
:step="0.1"
98-
/>
43+
<PreviewSlider title="Distortion" v-model="distortion" :min="0" :max="1" :step="0.1" />
9944

10045
<PreviewSwitch title="Pulsating" v-model="pulsating" />
10146
</Customize>

‎src/demo/Components/StepperDemo.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
<script setup lang="ts">
7474
import { ref } from 'vue';
7575
import { toast, Toaster } from 'vue-sonner';
76-
import 'vue-sonner/style.css'
76+
import 'vue-sonner/style.css';
7777
7878
import TabbedLayout from '@/components/common/TabbedLayout.vue';
7979
import PropTable from '@/components/common/PropTable.vue';
@@ -115,25 +115,25 @@ const propData = [
115115
{
116116
name: 'stepCircleContainerClassName',
117117
type: 'string',
118-
default: "-",
118+
default: '-',
119119
description: 'Custom class name for the container holding the step indicators.'
120120
},
121121
{
122122
name: 'stepContainerClassName',
123123
type: 'string',
124-
default: "-",
124+
default: '-',
125125
description: 'Custom class name for the row holding the step circles/connectors.'
126126
},
127127
{
128128
name: 'contentClassName',
129129
type: 'string',
130-
default: "-",
130+
default: '-',
131131
description: "Custom class name for the step's main content container."
132132
},
133133
{
134134
name: 'footerClassName',
135135
type: 'string',
136-
default: "-",
136+
default: '-',
137137
description: 'Custom class name for the footer area containing navigation buttons.'
138138
},
139139
{
@@ -188,12 +188,12 @@ const handleStepChange = (newStep: number) => {
188188
step.value = newStep;
189189
if (newStep === 4) {
190190
if (name.value) {
191-
toast(`👋🏻 Hello ${name.value}!`)
191+
toast(`👋🏻 Hello ${name.value}!`);
192192
} else {
193-
toast(`You didn't provide your name :(`)
193+
toast(`You didn't provide your name :(`);
194194
}
195195
} else {
196-
toast(`✅ Step ${newStep}!`)
196+
toast(`✅ Step ${newStep}!`);
197197
}
198198
};
199199
</script>

0 commit comments

Comments
 (0)