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

6
src/demo/Animations/AnimatedContentDemo.vue
View File

@@ -35,7 +35,6 @@
:min="50"
:max="300"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -45,7 +44,6 @@
:max="3"
:step="0.1"
value-unit="s"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -55,7 +53,6 @@
:max="2"
:step="0.1"
value-unit="s"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -64,7 +61,6 @@
:min="0"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -73,7 +69,6 @@
:min="0.1"
:max="2"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -82,7 +77,6 @@
:min="0.1"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" />

93
src/demo/Animations/BlobCursorDemo.vue
View File

@@ -68,11 +68,6 @@
:max="200"
:step="1"
v-model="sizes[0]"
@onChange="
(val: number) => {
sizes[0] = val;
}
"
:isDisabled="trailCount < 1"
/>
@@ -82,11 +77,6 @@
:max="100"
:step="1"
v-model="innerSizes[0]"
@onChange="
(val: number) => {
innerSizes[0] = val;
}
"
:isDisabled="trailCount < 1"
/>
@@ -96,91 +86,20 @@
:max="1"
:step="0.05"
v-model="opacities[0]"
@onChange="
(val: number) => {
opacities[0] = val;
}
"
:isDisabled="trailCount < 1"
/>
<PreviewSlider
title="Shadow Blur"
:min="0"
:max="50"
:step="1"
v-model="shadowBlur"
@onChange="
(val: number) => {
shadowBlur = val;
}
"
/>
<PreviewSlider title="Shadow Blur" :min="0" :max="50" :step="1" v-model="shadowBlur" />
<PreviewSlider
title="Shadow Offset X"
:min="-50"
:max="50"
:step="1"
v-model="shadowOffsetX"
@onChange="
(val: number) => {
shadowOffsetX = val;
}
"
/>
<PreviewSlider title="Shadow Offset X" :min="-50" :max="50" :step="1" v-model="shadowOffsetX" />
<PreviewSlider
title="Shadow Offset Y"
:min="-50"
:max="50"
:step="1"
v-model="shadowOffsetY"
@onChange="
(val: number) => {
shadowOffsetY = val;
}
"
/>
<PreviewSlider title="Shadow Offset Y" :min="-50" :max="50" :step="1" v-model="shadowOffsetY" />
<PreviewSlider
title="Fast Duration (Lead)"
:min="0.01"
:max="2"
:step="0.01"
v-model="fastDuration"
@onChange="
(val: number) => {
fastDuration = val;
}
"
/>
<PreviewSlider title="Fast Duration (Lead)" :min="0.01" :max="2" :step="0.01" v-model="fastDuration" />
<PreviewSlider
title="Slow Duration (Trail)"
:min="0.01"
:max="3"
:step="0.01"
v-model="slowDuration"
@onChange="
(val: number) => {
slowDuration = val;
}
"
/>
<PreviewSlider title="Slow Duration (Trail)" :min="0.01" :max="3" :step="0.01" v-model="slowDuration" />
<PreviewSlider
title="Z-Index"
:min="0"
:max="1000"
:step="10"
v-model="zIndex"
@onChange="
(val: number) => {
zIndex = val;
}
"
/>
<PreviewSlider title="Z-Index" :min="0" :max="1000" :step="10" v-model="zIndex" />
</Customize>
<p class="flex items-center gap-[0.5em] mx-0 my-[1em] text-[#a1a1aa]">

47
src/demo/Animations/ClickSparkDemo.vue
View File

@@ -24,50 +24,15 @@
<Customize>
<PreviewColor title="Spark Color" v-model="sparkColor" />
<PreviewSlider
title="Spark Size"
v-model="sparkSize"
:min="5"
:max="30"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Spark Size" v-model="sparkSize" :min="5" :max="30" :step="1" />
<PreviewSlider
title="Spark Radius"
v-model="sparkRadius"
:min="10"
:max="50"
:step="5"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Spark Radius" v-model="sparkRadius" :min="10" :max="50" :step="5" />
<PreviewSlider
title="Spark Count"
v-model="sparkCount"
:min="4"
:max="20"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Spark Count" v-model="sparkCount" :min="4" :max="20" :step="1" />
<PreviewSlider
title="Duration (ms)"
v-model="duration"
:min="200"
:max="1000"
:step="50"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Duration (ms)" v-model="duration" :min="200" :max="1000" :step="50" />
<PreviewSlider
title="Extra Scale"
v-model="extraScale"
:min="0.5"
:max="2"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Extra Scale" v-model="extraScale" :min="0.5" :max="2" :step="0.1" />
</Customize>
<PropTable :data="propData" />
@@ -103,7 +68,7 @@ const sparkCount = ref(8);
const duration = ref(400);
const easing = ref<'linear' | 'ease-in' | 'ease-out' | 'ease-in-out'>('ease-out');
const extraScale = ref(1);
const { rerenderKey, forceRerender } = useForceRerender();
const { rerenderKey } = useForceRerender();
const propData = [
{ name: 'sparkColor', type: 'string', default: "'#fff'", description: 'Color of the spark lines.' },

4
src/demo/Animations/FadeContentDemo.vue
View File

@@ -31,7 +31,6 @@
:min="100"
:max="3000"
:step="100"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -40,7 +39,6 @@
:min="0"
:max="1000"
:step="50"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -49,7 +47,6 @@
:min="0.1"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -58,7 +55,6 @@
:min="0"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
</Customize>

2
src/demo/Animations/MagnetDemo.vue
View File

@@ -36,7 +36,6 @@
:max="300"
:step="10"
value-unit="px"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -45,7 +44,6 @@
:min="1"
:max="10"
:step="1"
@update:model-value="forceRerender"
/>
</Customize>

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

@@ -25,11 +25,6 @@
:max="30"
:step="1"
v-model="ballCount"
@onChange="
(val: number) => {
ballCount = val;
}
"
/>
<PreviewSlider
@@ -38,11 +33,6 @@
:max="1"
:step="0.1"
v-model="speed"
@onChange="
(val: number) => {
speed = val;
}
"
/>
<PreviewSlider
@@ -51,11 +41,6 @@
:max="50"
:step="1"
v-model="animationSize"
@onChange="
(val: number) => {
animationSize = val;
}
"
/>
<PreviewSlider
@@ -64,11 +49,6 @@
:max="2"
:step="0.1"
v-model="clumpFactor"
@onChange="
(val: number) => {
clumpFactor = val;
}
"
/>
<PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" @update:model-value="forceRerender" />
@@ -79,11 +59,6 @@
:max="0.25"
:step="0.001"
v-model="hoverSmoothness"
@onChange="
(val: number) => {
hoverSmoothness = val;
}
"
/>
<PreviewSlider
@@ -92,11 +67,6 @@
:max="5"
:step="1"
v-model="cursorBallSize"
@onChange="
(val: number) => {
cursorBallSize = val;
}
"
/>
</Customize>

5
src/demo/Animations/MetallicPaintDemo.vue
View File

@@ -26,7 +26,6 @@
:min="1"
:max="5"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -35,7 +34,6 @@
:min="0"
:max="0.1"
:step="0.001"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -44,7 +42,6 @@
:min="0"
:max="0.1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -53,7 +50,6 @@
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider
@@ -62,7 +58,6 @@
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
</Customize>

13
src/demo/Animations/PixelTransitionDemo.vue
View File

@@ -28,15 +28,7 @@
</div>
<Customize>
<PreviewSlider
title="Grid Size"
v-model="gridSize"
:min="2"
:max="50"
:step="1"
@update:model-value="forceRerender"
width="200"
/>
<PreviewSlider title="Grid Size" v-model="gridSize" :min="2" :max="50" :step="1" width="200" />
<PreviewSlider
title="Animation Duration"
@@ -45,7 +37,6 @@
:max="2"
:step="0.1"
value-unit="s"
@update:model-value="forceRerender"
width="200"
/>
@@ -81,7 +72,7 @@ import { pixelTransition } from '@/constants/code/Animations/pixelTransitionCode
import { useForceRerender } from '@/composables/useForceRerender';
import PreviewColor from '../../components/common/PreviewColor.vue';
const { rerenderKey: key, forceRerender } = useForceRerender();
const { rerenderKey: key } = useForceRerender();
const gridSize = ref(8);
const pixelColor = ref('#ffffff');
const animationStepDuration = ref(0.4);