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 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

5
src/demo/TextAnimations/AsciiTextDemo.vue
View File

@@ -22,7 +22,6 @@
:min="2"
:max="20"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -31,7 +30,6 @@
:min="100"
:max="400"
:step="25"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -40,10 +38,9 @@
:min="4"
:max="16"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSwitch title="Enable Waves" v-model="enableWaves" @update:model-value="forceRerender" />
<PreviewSwitch title="Enable Waves" v-model="enableWaves" />
<div class="flex gap-2 flex-wrap">
<button

3
src/demo/TextAnimations/BlurTextDemo.vue
View File

@@ -49,7 +49,6 @@
:min="50"
:max="500"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -58,7 +57,6 @@
:min="0.1"
:max="1"
:step="0.05"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -67,7 +65,6 @@
:min="0.1"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
</Customize>

9
src/demo/TextAnimations/CircularTextDemo.vue
View File

@@ -22,14 +22,7 @@
</button>
</div>
<PreviewSlider
title="Spin Duration (s)"
v-model="spinDuration"
:min="1"
:max="50"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Spin Duration (s)" v-model="spinDuration" :min="1" :max="50" :step="1" />
</Customize>
<PropTable :data="propData" />

2
src/demo/TextAnimations/CurvedLoopDemo.vue
View File

@@ -30,7 +30,6 @@
:min="0"
:max="10"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -40,7 +39,6 @@
:max="400"
:step="10"
value-unit="px"
@update:model-value="forceRerender"
/>
<PreviewSwitch

19
src/demo/TextAnimations/DecryptedTextDemo.vue
View File

@@ -57,24 +57,9 @@
<PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" @update:model-value="forceRerender" />
<PreviewSlider
title="Speed"
v-model="speed"
:min="10"
:max="200"
:step="10"
value-unit="ms"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Speed" v-model="speed" :min="10" :max="200" :step="10" value-unit="ms" />
<PreviewSlider
title="Iterations"
v-model="maxIterations"
:min="1"
:max="50"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Iterations" v-model="maxIterations" :min="1" :max="50" :step="1" />
<PreviewSelect title="Animation Trigger" v-model="animateOn" :options="animateOptions" />

12
src/demo/TextAnimations/FallingTextDemo.vue
View File

@@ -20,14 +20,7 @@
<Customize>
<PreviewSelect title="Animation Trigger" v-model="trigger" :options="triggerOptions" />
<PreviewSlider
title="Gravity"
v-model="gravity"
:min="0.1"
:max="2"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Gravity" v-model="gravity" :min="0.1" :max="2" :step="0.01" />
<PreviewSlider
title="Mouse Constraint Stiffness"
@@ -35,7 +28,6 @@
:min="0.1"
:max="2"
:step="0.1"
@update:model-value="forceRerender"
/>
</Customize>
@@ -68,7 +60,7 @@ import FallingText from '../../content/TextAnimations/FallingText/FallingText.vu
import { fallingText } from '@/constants/code/TextAnimations/fallingTextCode';
import { useForceRerender } from '@/composables/useForceRerender';
const { rerenderKey: key, forceRerender } = useForceRerender();
const { rerenderKey: key } = useForceRerender();
const gravity = ref(0.56);
const mouseConstraintStiffness = ref(0.9);

2
src/demo/TextAnimations/FuzzyTextDemo.vue
View File

@@ -33,7 +33,6 @@
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -42,7 +41,6 @@
:min="0"
:max="2"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSwitch

27
src/demo/TextAnimations/SplitTextDemo.vue
View File

@@ -24,32 +24,11 @@
<Customize>
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
<PreviewSlider
title="Stagger Delay (ms)"
v-model="delay"
:min="10"
:max="500"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10" />
<PreviewSlider
title="Duration (s)"
v-model="duration"
:min="0.1"
:max="3"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="3" :step="0.1" />
<PreviewSlider
title="Threshold"
v-model="threshold"
:min="0.1"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
</Customize>
<PropTable :data="propData" />

40
src/demo/TextAnimations/TextTrailDemo.vue
View File

@@ -14,43 +14,15 @@
</div>
<Customize>
<PreviewSlider
title="Noise Factor"
v-model="noiseFactor"
:min="1"
:max="25"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Noise Factor" v-model="noiseFactor" :min="1" :max="25" :step="1" />
<PreviewSlider
title="Noise Scale"
v-model="noiseScale"
:min="0"
:max="100"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Noise Scale" v-model="noiseScale" :min="0" :max="100" :step="1" />
<PreviewSlider
title="Font Weight"
v-model="fontWeight"
:min="100"
:max="900"
:step="100"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Font Weight" v-model="fontWeight" :min="100" :max="900" :step="100" />
<PreviewSlider
title="Alpha Persist Factor"
v-model="alphaPersistFactor"
:min="0.5"
:max="0.95"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Alpha Persist Factor" v-model="alphaPersistFactor" :min="0.5" :max="0.95" :step="0.01" />
<PreviewSwitch title="Animate Color" v-model="animateColor" @update:model-value="forceRerender" />
<PreviewSwitch title="Animate Color" v-model="animateColor" />
</Customize>
<PropTable :data="propData" />
@@ -82,7 +54,7 @@ import TextTrail from '../../content/TextAnimations/TextTrail/TextTrail.vue';
import { textTrail } from '@/constants/code/TextAnimations/textTrailCode';
import { useForceRerender } from '@/composables/useForceRerender';
const { rerenderKey: key, forceRerender } = useForceRerender();
const { rerenderKey: key } = useForceRerender();
const noiseFactor = ref(1);
const noiseScale = ref(5);

12
src/demo/TextAnimations/TrueFocusDemo.vue
View File

@@ -12,15 +12,7 @@
<PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
<PreviewSlider
title="Blur Amount"
v-model="blurAmount"
:min="0"
:max="15"
:step="0.5"
value-unit="px"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px" />
<PreviewSlider
title="Animation Duration"
@@ -30,7 +22,6 @@
:step="0.1"
value-unit="s"
:disabled="!manualMode"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -41,7 +32,6 @@
:step="0.5"
value-unit="s"
:disabled="manualMode"
@update:model-value="forceRerender"
/>
</Customize>