atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-08 16:09:31 -06: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

53
src/demo/Animations/MetaBallsDemo.vue
View File

@@ -19,55 +19,19 @@
<Customize>
<PreviewColor title="Color" v-model="color" />
<PreviewSlider
title="Ball Count"
:min="2"
:max="30"
:step="1"
v-model="ballCount"
/>
<PreviewSlider title="Ball Count" :min="2" :max="30" :step="1" v-model="ballCount" />
<PreviewSlider
title="Speed"
:min="0.1"
:max="1"
:step="0.1"
v-model="speed"
/>
<PreviewSlider title="Speed" :min="0.1" :max="1" :step="0.1" v-model="speed" />
<PreviewSlider
title="Size"
:min="10"
:max="50"
:step="1"
v-model="animationSize"
/>
<PreviewSlider title="Size" :min="10" :max="50" :step="1" v-model="animationSize" />
<PreviewSlider
title="Clump Factor"
:min="0.1"
:max="2"
:step="0.1"
v-model="clumpFactor"
/>
<PreviewSlider title="Clump Factor" :min="0.1" :max="2" :step="0.1" v-model="clumpFactor" />
<PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" @update:model-value="forceRerender" />
<PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" />
<PreviewSlider
title="Cursor Smoothing"
:min="0.001"
:max="0.25"
:step="0.001"
v-model="hoverSmoothness"
/>
<PreviewSlider title="Cursor Smoothing" :min="0.001" :max="0.25" :step="0.001" v-model="hoverSmoothness" />
<PreviewSlider
title="Cursor Size"
:min="1"
:max="5"
:step="1"
v-model="cursorBallSize"
/>
<PreviewSlider title="Cursor Size" :min="1" :max="5" :step="1" v-model="cursorBallSize" />
</Customize>
<PropTable :data="propData" />
@@ -85,7 +49,6 @@
</template>
<script setup lang="ts">
import { useForceRerender } from '@/composables/useForceRerender';
import { ref } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
@@ -99,8 +62,6 @@ import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { metaBalls } from '../../constants/code/Animations/metaBallsCode';
import MetaBalls from '../../content/Animations/MetaBalls/MetaBalls.vue';
const { forceRerender } = useForceRerender();
const color = ref('#27FF64');
const speed = ref(0.3);
const animationSize = ref(30);