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

Updated BallpitDemo and OrbDemo to use the latest changes.

Browse Source
This commit is contained in:
snepsnepy
2025-07-16 16:28:29 +03:00
parent 48d08b9e24
commit 2e55686e70
2 changed files with 9 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/demo/Backgrounds/BallpitDemo.vue
View File

@@ -17,59 +17,15 @@
</div>
<Customize>
<PreviewSwitch title="Display Cursor" v-model="followCursor" @update:model-value="forceRerender" />
<PreviewSwitch title="Display Cursor" v-model="followCursor" />
<PreviewSlider
title="Ball Count"
:min="50"
:max="500"
:step="10"
v-model="count"
@onChange="
(val: number) => {
count = val;
}
"
/>
<PreviewSlider title="Ball Count" :min="50" :max="500" :step="10" v-model="count" />
<PreviewSlider
title="Gravity"
:min="0.1"
:max="1"
:step="0.1"
v-model="gravity"
@onChange="
(val: number) => {
gravity = val;
}
"
/>
<PreviewSlider title="Gravity" :min="0.1" :max="1" :step="0.1" v-model="gravity" />
<PreviewSlider
title="Friction"
:min="0.9"
:max="1"
:step="0.001"
v-model="friction"
@onChange="
(val: number) => {
friction = val;
}
"
/>
<PreviewSlider title="Friction" :min="0.9" :max="1" :step="0.001" v-model="friction" />
<PreviewSlider
title="Wall Bounce"
:min="0.1"
:max="1"
:step="0.05"
v-model="wallBounce"
@onChange="
(val: number) => {
wallBounce = val;
}
"
/>
<PreviewSlider title="Wall Bounce" :min="0.1" :max="1" :step="0.05" v-model="wallBounce" />
</Customize>
<PropTable :data="propData" />

33
src/demo/Backgrounds/OrbDemo.vue
View File

@@ -12,35 +12,13 @@
</div>
<Customize>
<PreviewSlider
title="Hue Shift"
:min="0"
:max="360"
:step="1"
v-model="hue"
@onChange="
(val: number) => {
hue = val;
}
"
/>
<PreviewSlider title="Hue Shift" :min="0" :max="360" :step="1" v-model="hue" />
<PreviewSlider
title="Hover Intensity"
:min="0"
:max="5"
:step="0.01"
v-model="hoverIntensity"
@onChange="
(val: number) => {
hoverIntensity = val;
}
"
/>
<PreviewSlider title="Hover Intensity" :min="0" :max="5" :step="0.01" v-model="hoverIntensity" />
<PreviewSwitch title="Rotate on Hover" v-model="rotateOnHover" @update:model-value="forceRerender" />
<PreviewSwitch title="Rotate on Hover" v-model="rotateOnHover" />
<PreviewSwitch title="Force Hover State" v-model="forceHoverState" @update:model-value="forceRerender" />
<PreviewSwitch title="Force Hover State" v-model="forceHoverState" />
</Customize>
<PropTable :data="propData" />
@@ -58,7 +36,6 @@
</template>
<script setup lang="ts">
import { useForceRerender } from '@/composables/useForceRerender';
import { ref, watch } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
@@ -71,8 +48,6 @@ import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { orb } from '../../constants/code/Backgrounds/orbCode';
import Orb from '../../content/Backgrounds/Orb/Orb.vue';
const { forceRerender } = useForceRerender();
const hue = ref(100);
const hoverIntensity = ref(0.5);
const rotateOnHover = ref(true);