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 PreviewSlider component.

Browse Source
This commit is contained in:
snepsnepy
2025-07-15 17:05:43 +03:00
parent 183a81ae88
commit 53b8e674b5
35 changed files with 97 additions and 748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/demo/Backgrounds/AuroraDemo.vue
View File

@@ -27,41 +27,13 @@
</div>
</div>
<PreviewSlider
title="Amplitude"
:model-value="amplitude"
@update:model-value="amplitude = $event"
:min="0"
:max="2"
:step="0.1"
/>
<PreviewSlider title="Amplitude" v-model="amplitude" :min="0" :max="2" :step="0.1" />
<PreviewSlider
title="Blend"
:model-value="blend"
@update:model-value="blend = $event"
:min="0"
:max="1"
:step="0.1"
/>
<PreviewSlider title="Blend" v-model="blend" :min="0" :max="1" :step="0.1" />
<PreviewSlider
title="Speed"
:model-value="speed"
@update:model-value="speed = $event"
:min="0"
:max="3"
:step="0.1"
/>
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="3" :step="0.1" />
<PreviewSlider
title="Intensity"
:model-value="intensity"
@update:model-value="intensity = $event"
:min="0"
:max="2"
:step="0.1"
/>
<PreviewSlider title="Intensity" v-model="intensity" :min="0" :max="2" :step="0.1" />
</Customize>
<PropTable :data="propData" />

63
src/demo/Backgrounds/BeamsDemo.vue
View File

@@ -18,68 +18,19 @@
<Customize>
<PreviewColor title="Color" v-model="lightColor" />
<PreviewSlider
title="Beam Width"
:model-value="beamWidth"
@update:model-value="beamWidth = $event"
:min="0.1"
:max="10"
:step="0.1"
/>
<PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider
title="Beam Height"
:model-value="beamHeight"
@update:model-value="beamHeight = $event"
:min="1"
:max="25"
:step="1"
/>
<PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" />
<PreviewSlider
title="Beam Count"
:model-value="beamNumber"
@update:model-value="beamNumber = $event"
:min="1"
:max="50"
:step="1"
/>
<PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" />
<PreviewSlider
title="Speed"
:model-value="speed"
@update:model-value="speed = $event"
:min="0.1"
:max="10"
:step="0.1"
/>
<PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider
title="Noise Intensity"
:model-value="noiseIntensity"
@update:model-value="noiseIntensity = $event"
:min="0"
:max="5"
:step="0.05"
/>
<PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" />
<PreviewSlider
title="Noise Scale"
:model-value="scale"
@update:model-value="scale = $event"
:min="0.01"
:max="1"
:step="0.01"
/>
<PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" />
<PreviewSlider
title="Rotation"
:model-value="rotation"
@update:model-value="rotation = $event"
:min="0"
:max="360"
:step="1"
/>
<PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
</Customize>
<PropTable :data="propData" />

76
src/demo/Backgrounds/DotGridDemo.vue
View File

@@ -27,79 +27,23 @@
<PreviewColor title="Active Color" v-model="activeColor" />
</div>
<PreviewSlider
title="Dot Size"
v-model="dotSize"
:min="2"
:max="50"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1" />
<PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" @update:model-value="forceRerender" />
<PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" />
<PreviewSlider
title="Proximity"
v-model="proximity"
:min="50"
:max="500"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10" />
<PreviewSlider
title="Speed Trigger"
v-model="speedTrigger"
:min="50"
:max="500"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10" />
<PreviewSlider
title="Shock Radius"
v-model="shockRadius"
:min="50"
:max="500"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10" />
<PreviewSlider
title="Shock Strength"
v-model="shockStrength"
:min="1"
:max="20"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1" />
<PreviewSlider
title="Max Speed"
v-model="maxSpeed"
:min="1000"
:max="10000"
:step="100"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100" />
<PreviewSlider
title="Resistance (Inertia)"
v-model="resistance"
:min="100"
:max="2000"
:step="50"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50" />
<PreviewSlider
title="Return Duration (Inertia)"
v-model="returnDuration"
:min="0.1"
:max="5"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1" />
</Customize>
<PropTable :data="propData" />
@@ -143,7 +87,7 @@ const shockStrength = ref(5);
const maxSpeed = ref(5000);
const resistance = ref(750);
const returnDuration = ref(1.5);
const { rerenderKey, forceRerender } = useForceRerender();
const { rerenderKey } = useForceRerender();
const propData = [
{ name: 'dotSize', type: 'number', default: '16', description: 'Size of each dot in pixels.' },

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

@@ -12,7 +12,7 @@
<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" @update:modelValue="forceRerender" />
<PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" />
<PreviewSlider
:min="0"
@@ -20,7 +20,6 @@
:step="0.01"
v-model="amplitude"
title="Amplitude"
@update:modelValue="forceRerender"
/>
<PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" @update:modelValue="forceRerender" />

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

@@ -22,14 +22,7 @@
Randomize Colors
</button>
<PreviewSlider
title="Glitch Speed"
:model-value="speed"
@update:model-value="speed = $event"
:min="0"
:max="100"
:step="5"
/>
<PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
<PreviewSwitch title="Smooth Animation" :model-value="smooth" @update:model-value="updateSmooth" />

45
src/demo/Backgrounds/LightningDemo.vue
View File

@@ -14,50 +14,15 @@
</div>
<Customize>
<PreviewSlider
title="Hue"
:model-value="hue"
@update:model-value="hue = $event"
:min="0"
:max="360"
:step="1"
/>
<PreviewSlider title="Hue" v-model="hue" :min="0" :max="360" :step="1" />
<PreviewSlider
title="X Offset"
:model-value="xOffset"
@update:model-value="xOffset = $event"
:min="-2"
:max="2"
:step="0.1"
/>
<PreviewSlider title="X Offset" v-model="xOffset" :min="-2" :max="2" :step="0.1" />
<PreviewSlider
title="Speed"
:model-value="speed"
@update:model-value="speed = $event"
:min="0.5"
:max="2"
:step="0.1"
/>
<PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="2" :step="0.1" />
<PreviewSlider
title="Intensity"
:model-value="intensity"
@update:model-value="intensity = $event"
:min="0.1"
:max="2"
:step="0.1"
/>
<PreviewSlider title="Intensity" v-model="intensity" :min="0.1" :max="2" :step="0.1" />
<PreviewSlider
title="Size"
:model-value="size"
@update:model-value="size = $event"
:min="0.1"
:max="3"
:step="0.1"
/>
<PreviewSlider title="Size" v-model="size" :min="0.1" :max="3" :step="0.1" />
</Customize>
<PropTable :data="propData" />

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

@@ -22,41 +22,13 @@
<PreviewColor title="Color" v-model="color" />
</div>
<PreviewSlider
title="Count"
:model-value="particleCount"
@update:model-value="particleCount = $event"
:min="100"
:max="1000"
:step="100"
/>
<PreviewSlider title="Count" v-model="particleCount" :min="100" :max="1000" :step="100" />
<PreviewSlider
title="Spread"
:model-value="particleSpread"
@update:model-value="particleSpread = $event"
:min="10"
:max="100"
:step="10"
/>
<PreviewSlider title="Spread" v-model="particleSpread" :min="10" :max="100" :step="10" />
<PreviewSlider
title="Speed"
:model-value="speed"
@update:model-value="speed = $event"
:min="0"
:max="2"
:step="0.1"
/>
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="2" :step="0.1" />
<PreviewSlider
title="Base Size"
:model-value="baseSize"
@update:model-value="baseSize = $event"
:min="100"
:max="1000"
:step="100"
/>
<PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
<PreviewSwitch
title="Mouse Interaction"

12
src/demo/Backgrounds/SilkDemo.vue
View File

@@ -16,8 +16,7 @@
<Customize>
<PreviewSlider
title="Speed"
:model-value="speed"
@update:model-value="speed = $event"
v-model="speed"
:min="0"
:max="10"
:step="0.1"
@@ -25,8 +24,7 @@
<PreviewSlider
title="Scale"
:model-value="scale"
@update:model-value="scale = $event"
v-model="scale"
:min="0.1"
:max="3"
:step="0.1"
@@ -34,8 +32,7 @@
<PreviewSlider
title="Noise Intensity"
:model-value="noiseIntensity"
@update:model-value="noiseIntensity = $event"
v-model="noiseIntensity"
:min="0"
:max="3"
:step="0.1"
@@ -43,8 +40,7 @@
<PreviewSlider
title="Rotation"
:model-value="rotation"
@update:model-value="rotation = $event"
v-model="rotation"
:min="0"
:max="6.28"
:step="0.1"

3
src/demo/Backgrounds/WavesDemo.vue
View File

@@ -9,8 +9,7 @@
<Customize>
<PreviewSlider
title="Wave Speed X"
:model-value="waveSpeedX"
@update:model-value="waveSpeedX = $event"
v-model="waveSpeedX"
:min="0"
:max="0.1"
:step="0.01"