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

20
src/components/common/PreviewSlider.vue
View File

@@ -2,15 +2,7 @@
<div class="preview-slider">
<span class="slider-label">{{ title }}</span>
<Slider
:model-value="modelValue"
@update:model-value="handleSliderChange"
:min="min"
:max="max"
:step="step"
:disabled="disabled"
class="custom-slider"
/>
<Slider v-model="model" :min="min" :max="max" :step="step" :disabled="disabled" class="custom-slider" />
<span class="slider-value">{{ modelValue }}{{ valueUnit }}</span>
</div>
@@ -21,7 +13,6 @@ import Slider from 'primevue/slider';
defineProps<{
title: string;
modelValue: number;
min?: number;
max?: number;
step?: number;
@@ -29,14 +20,7 @@ defineProps<{
disabled?: boolean;
}>();
const emit = defineEmits<{
'update:modelValue': [value: number];
}>();
const handleSliderChange = (value: number | number[]) => {
const numValue = Array.isArray(value) ? value[0] : value;
emit('update:modelValue', numValue);
};
const model = defineModel<number>();
</script>
<style scoped>

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

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"

10
src/demo/Components/CarouselDemo.vue
View File

@@ -14,14 +14,7 @@
</div>
<Customize>
<PreviewSlider
title="Width"
v-model="width"
:min="250"
:max="330"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Width" v-model="width" :min="250" :max="330" :step="10" />
<PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" />
@@ -36,7 +29,6 @@
:max="4000"
:step="1000"
:disabled="!autoplay"
@update:model-value="forceRerender"
/>
<PreviewSwitch

38
src/demo/Components/CircularGalleryDemo.vue
View File

@@ -14,41 +14,13 @@
</div>
<Customize>
<PreviewSlider
title="Bend Level"
v-model="bend"
:min="-10"
:max="10"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Bend Level" v-model="bend" :min="-10" :max="10" :step="1" />
<PreviewSlider
title="Border Radius"
v-model="borderRadius"
:min="0"
:max="0.5"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Border Radius" v-model="borderRadius" :min="0" :max="0.5" :step="0.01" />
<PreviewSlider
title="Scroll Speed"
v-model="scrollSpeed"
:min="0.5"
:max="5"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Scroll Speed" v-model="scrollSpeed" :min="0.5" :max="5" :step="0.1" />
<PreviewSlider
title="Scroll Ease"
v-model="scrollEase"
:min="0.01"
:max="0.15"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Scroll Ease" v-model="scrollEase" :min="0.01" :max="0.15" :step="0.01" />
<PreviewColor title="Text Color" v-model="textColor" />
@@ -92,7 +64,7 @@ const scrollEase = ref(0.05);
const textColor = ref('#ffffff');
const font = ref('bold 30px Figtree');
const { rerenderKey, forceRerender } = useForceRerender();
const { rerenderKey } = useForceRerender();
const fontOptions = [
{ label: 'Figtree Bold', value: 'bold 30px Figtree' },

48
src/demo/Components/DockDemo.vue
View File

@@ -21,47 +21,11 @@
</div>
<Customize>
<PreviewSlider
title="Background Height"
:min="30"
:max="200"
:step="10"
:model-value="panelHeight"
@update:model-value="
(val: number) => {
panelHeight = val;
forceRerender();
}
"
/>
<PreviewSlider title="Background Height" :min="100" :max="200" :step="10" v-model="panelHeight" />
<PreviewSlider
title="Item Size"
:min="20"
:max="60"
:step="10"
:model-value="baseItemSize"
@update:model-value="
(val: number) => {
baseItemSize = val;
forceRerender();
}
"
/>
<PreviewSlider title="Base Item Size" :min="40" :max="100" :step="5" v-model="baseItemSize" />
<PreviewSlider
title="Magnification"
:min="50"
:max="100"
:step="10"
:model-value="magnification"
@update:model-value="
(val: number) => {
magnification = val;
forceRerender();
}
"
/>
<PreviewSlider title="Magnification" :min="50" :max="100" :step="10" v-model="magnification" />
</Customize>
<PropTable :data="propData" />
@@ -80,7 +44,7 @@
</template>
<script setup lang="ts">
import { ref, h } from 'vue';
import { ref, h, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
@@ -100,6 +64,10 @@ const magnification = ref(70);
const toast = useToast();
const { rerenderKey, forceRerender } = useForceRerender();
watch([magnification, panelHeight, baseItemSize], () => {
forceRerender();
});
const HomeIcon = () => h('i', { class: 'pi pi-home', style: { fontSize: '18px', color: 'white' } });
const ArchiveIcon = () => h('i', { class: 'pi pi-inbox', style: { fontSize: '18px', color: 'white' } });
const ProfileIcon = () => h('i', { class: 'pi pi-user', style: { fontSize: '18px', color: 'white' } });

56
src/demo/Components/FlyingPostersDemo.vue
View File

@@ -22,59 +22,17 @@
</div>
<Customize>
<PreviewSlider
title="Plane Width"
v-model="planeWidth"
:min="200"
:max="400"
:step="20"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Plane Width" v-model="planeWidth" :min="200" :max="400" :step="20" />
<PreviewSlider
title="Plane Height"
v-model="planeHeight"
:min="200"
:max="400"
:step="20"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Plane Height" v-model="planeHeight" :min="200" :max="400" :step="20" />
<PreviewSlider
title="Distortion"
v-model="distortion"
:min="0"
:max="10"
:step="0.5"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Distortion" v-model="distortion" :min="0" :max="10" :step="0.5" />
<PreviewSlider
title="Scroll Ease"
v-model="scrollEase"
:min="0.005"
:max="0.05"
:step="0.005"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Scroll Ease" v-model="scrollEase" :min="0.005" :max="0.05" :step="0.005" />
<PreviewSlider
title="Camera FOV"
v-model="cameraFov"
:min="30"
:max="90"
:step="5"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Camera FOV" v-model="cameraFov" :min="30" :max="90" :step="5" />
<PreviewSlider
title="Camera Z"
v-model="cameraZ"
:min="10"
:max="40"
:step="2"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Camera Z" v-model="cameraZ" :min="10" :max="40" :step="2" />
</Customize>
<PropTable :data="propData" />
@@ -112,7 +70,7 @@ const scrollEase = ref(0.01);
const cameraFov = ref(45);
const cameraZ = ref(20);
const { rerenderKey, forceRerender } = useForceRerender();
const { rerenderKey } = useForceRerender();
const items = ref([
'https://picsum.photos/800/800?grayscale&random=1',

29
src/demo/Components/GooeyNavDemo.vue
View File

@@ -18,32 +18,11 @@
</div>
<Customize>
<PreviewSlider
title="Particle Count"
v-model="particleCount"
:min="1"
:max="50"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Particle Count" v-model="particleCount" :min="1" :max="50" :step="1" />
<PreviewSlider
title="Animation Variance"
v-model="timeVariance"
:min="0"
:max="2000"
:step="100"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Animation Variance" v-model="timeVariance" :min="0" :max="2000" :step="100" />
<PreviewSlider
title="Radius Factor"
v-model="particleR"
:min="0"
:max="1000"
:step="100"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Radius Factor" v-model="particleR" :min="0" :max="1000" :step="100" />
</Customize>
<PropTable :data="propData" />
@@ -74,7 +53,7 @@ import { useForceRerender } from '@/composables/useForceRerender';
const particleCount = ref(15);
const timeVariance = ref(300);
const particleR = ref(100);
const { rerenderKey, forceRerender } = useForceRerender();
const { rerenderKey } = useForceRerender();
const navItems = [
{ label: 'Home', href: null },

27
src/demo/Components/MasonryDemo.vue
View File

@@ -39,32 +39,11 @@
]"
/>
<PreviewSlider
title="Duration (s)"
v-model="duration"
:min="0.1"
:max="2"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1" />
<PreviewSlider
title="Stagger Delay (s)"
v-model="stagger"
:min="0.01"
:max="0.2"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Stagger Delay (s)" v-model="stagger" :min="0.01" :max="0.2" :step="0.01" />
<PreviewSlider
title="Hover Scale"
v-model="hoverScale"
:min="0.8"
:max="1.2"
:step="0.05"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Hover Scale" v-model="hoverScale" :min="0.8" :max="1.2" :step="0.05" />
</Customize>
<PropTable :data="propData" />

3
src/demo/Components/StackDemo.vue
View File

@@ -20,7 +20,6 @@
:min="10"
:max="300"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Card Width"
@@ -28,7 +27,6 @@
:min="10"
:max="300"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Card Height"
@@ -36,7 +34,6 @@
:min="10"
:max="300"
:step="10"
@update:model-value="forceRerender"
/>
</Customize>
<PropTable :data="propData" />

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>