atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Added defineModel support for PreviewSwitch component and fixed small bug in ScrollRevealDemo component.

Browse Source
This commit is contained in:
snepsnepy
2025-07-16 16:12:54 +03:00
parent 53b8e674b5
commit f09a3cea0e
22 changed files with 133 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/demo/Backgrounds/IridescenceDemo.vue
View File

@@ -12,17 +12,11 @@
<PreviewSlider :min="0" :max="1" :step="0.1" v-model="colors[2]" title="Blue" />
<PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" />
<PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" />
<PreviewSlider
:min="0"
:max="0.5"
:step="0.01"
v-model="amplitude"
title="Amplitude"
/>
<PreviewSlider :min="0" :max="0.5" :step="0.01" v-model="amplitude" title="Amplitude" />
<PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" @update:modelValue="forceRerender" />
<PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" />
</Customize>
<PropTable :data="propData" />
@@ -59,7 +53,7 @@ const speed = ref(1);
const amplitude = ref(0.1);
const mouseInteraction = ref(true);
const { rerenderKey: key, forceRerender } = useForceRerender();
const { rerenderKey: key } = useForceRerender();
const propData = [
{

29
src/demo/Backgrounds/LetterGlitchDemo.vue
View File

@@ -24,19 +24,11 @@
<PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
<PreviewSwitch title="Smooth Animation" :model-value="smooth" @update:model-value="updateSmooth" />
<PreviewSwitch title="Smooth Animation" v-model="smooth" />
<PreviewSwitch
title="Show Center Vignette"
:model-value="showCenterVignette"
@update:model-value="updateCenterVignette"
/>
<PreviewSwitch title="Show Center Vignette" v-model="showCenterVignette" />
<PreviewSwitch
title="Show Outer Vignette"
:model-value="showOuterVignette"
@update:model-value="updateOuterVignette"
/>
<PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" />
</Customize>
<PropTable :data="propData" />
@@ -91,21 +83,6 @@ const randomizeColors = () => {
forceRerender();
};
const updateSmooth = (value: boolean) => {
smooth.value = value;
forceRerender();
};
const updateCenterVignette = (value: boolean) => {
showCenterVignette.value = value;
forceRerender();
};
const updateOuterVignette = (value: boolean) => {
showOuterVignette.value = value;
forceRerender();
};
const propData = [
{
name: 'glitchColors',

18
src/demo/Backgrounds/ParticlesDemo.vue
View File

@@ -30,23 +30,11 @@
<PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
<PreviewSwitch
title="Mouse Interaction"
:model-value="moveParticlesOnHover"
@update:model-value="moveParticlesOnHover = $event"
/>
<PreviewSwitch title="Mouse Interaction" v-model="moveParticlesOnHover" />
<PreviewSwitch
title="Particle Transparency"
:model-value="alphaParticles"
@update:model-value="alphaParticles = $event"
/>
<PreviewSwitch title="Particle Transparency" v-model="alphaParticles" />
<PreviewSwitch
title="Disable Rotation"
:model-value="disableRotation"
@update:model-value="disableRotation = $event"
/>
<PreviewSwitch title="Disable Rotation" v-model="disableRotation" />
</Customize>
<PropTable :data="propData" />