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 PreviewSwitch component and fixed small bug in ScrollRevealDemo component.

Browse Source
This commit is contained in:
snepsnepy
2025-07-16 16:12:54 +03:00
parent 53b8e674b5
commit f09a3cea0e
22 changed files with 133 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,59 +29,21 @@
<PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
<PreviewSlider
title="Distance"
v-model="distance"
:min="50"
:max="300"
:step="10"
/>
<PreviewSlider title="Distance" v-model="distance" :min="50" :max="300" :step="10" />
<PreviewSlider
title="Duration"
v-model="duration"
:min="0.1"
:max="3"
:step="0.1"
value-unit="s"
/>
<PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="3" :step="0.1" value-unit="s" />
<PreviewSlider
title="Delay"
v-model="delay"
:min="0"
:max="2"
:step="0.1"
value-unit="s"
/>
<PreviewSlider title="Delay" v-model="delay" :min="0" :max="2" :step="0.1" value-unit="s" />
<PreviewSlider
title="Initial Opacity"
v-model="initialOpacity"
:min="0"
:max="1"
:step="0.1"
/>
<PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1" />
<PreviewSlider
title="Initial Scale"
v-model="scale"
:min="0.1"
:max="2"
:step="0.1"
/>
<PreviewSlider title="Initial Scale" v-model="scale" :min="0.1" :max="2" :step="0.1" />
<PreviewSlider
title="Threshold"
v-model="threshold"
:min="0.1"
:max="1"
:step="0.1"
/>
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
<PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" />
<PreviewSwitch title="Reverse Direction" v-model="reverse" />
<PreviewSwitch title="Animate Opacity" v-model="animateOpacity" @update:model-value="forceRerender" />
<PreviewSwitch title="Animate Opacity" v-model="animateOpacity" />
</Customize>
<PropTable :data="propData" />

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

@@ -23,39 +23,15 @@
</div>
<Customize>
<PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
<PreviewSwitch title="Enable Blur Effect" v-model="blur" />
<PreviewSlider
title="Duration (ms)"
v-model="duration"
:min="100"
:max="3000"
:step="100"
/>
<PreviewSlider title="Duration (ms)" v-model="duration" :min="100" :max="3000" :step="100" />
<PreviewSlider
title="Delay (ms)"
v-model="delay"
:min="0"
:max="1000"
:step="50"
/>
<PreviewSlider title="Delay (ms)" v-model="delay" :min="0" :max="1000" :step="50" />
<PreviewSlider
title="Threshold"
v-model="threshold"
:min="0.1"
:max="1"
:step="0.1"
/>
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
<PreviewSlider
title="Initial Opacity"
v-model="initialOpacity"
:min="0"
:max="1"
:step="0.1"
/>
<PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1" />
</Customize>
<PropTable :data="propData" />
@@ -72,7 +48,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import RefreshButton from '../../components/common/RefreshButton.vue';
import PropTable from '../../components/common/PropTable.vue';
@@ -107,6 +83,10 @@ const propData = [
{ name: 'initialOpacity', type: 'number', default: '0', description: 'Initial opacity before animation (0-1).' },
{ name: 'className', type: 'string', default: '""', description: 'Additional CSS classes for styling.' }
];
watch(blur, () => {
forceRerender();
});
</script>
<style scoped>

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

@@ -27,24 +27,11 @@
</div>
<Customize>
<PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
<PreviewSwitch title="Disabled" v-model="disabled" />
<PreviewSlider
title="Padding"
v-model="padding"
:min="0"
:max="300"
:step="10"
value-unit="px"
/>
<PreviewSlider title="Padding" v-model="padding" :min="0" :max="300" :step="10" value-unit="px" />
<PreviewSlider
title="Strength"
v-model="magnetStrength"
:min="1"
:max="10"
:step="1"
/>
<PreviewSlider title="Strength" v-model="magnetStrength" :min="1" :max="10" :step="1" />
</Customize>
<PropTable :data="propData" />
@@ -76,7 +63,7 @@ import { useForceRerender } from '@/composables/useForceRerender';
const disabled = ref(false);
const padding = ref(100);
const magnetStrength = ref(2);
const { rerenderKey, forceRerender } = useForceRerender();
const { rerenderKey } = useForceRerender();
const propData = [
{

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

@@ -19,55 +19,19 @@
<Customize>
<PreviewColor title="Color" v-model="color" />
<PreviewSlider
title="Ball Count"
:min="2"
:max="30"
:step="1"
v-model="ballCount"
/>
<PreviewSlider title="Ball Count" :min="2" :max="30" :step="1" v-model="ballCount" />
<PreviewSlider
title="Speed"
:min="0.1"
:max="1"
:step="0.1"
v-model="speed"
/>
<PreviewSlider title="Speed" :min="0.1" :max="1" :step="0.1" v-model="speed" />
<PreviewSlider
title="Size"
:min="10"
:max="50"
:step="1"
v-model="animationSize"
/>
<PreviewSlider title="Size" :min="10" :max="50" :step="1" v-model="animationSize" />
<PreviewSlider
title="Clump Factor"
:min="0.1"
:max="2"
:step="0.1"
v-model="clumpFactor"
/>
<PreviewSlider title="Clump Factor" :min="0.1" :max="2" :step="0.1" v-model="clumpFactor" />
<PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" @update:model-value="forceRerender" />
<PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" />
<PreviewSlider
title="Cursor Smoothing"
:min="0.001"
:max="0.25"
:step="0.001"
v-model="hoverSmoothness"
/>
<PreviewSlider title="Cursor Smoothing" :min="0.001" :max="0.25" :step="0.001" v-model="hoverSmoothness" />
<PreviewSlider
title="Cursor Size"
:min="1"
:max="5"
:step="1"
v-model="cursorBallSize"
/>
<PreviewSlider title="Cursor Size" :min="1" :max="5" :step="1" v-model="cursorBallSize" />
</Customize>
<PropTable :data="propData" />
@@ -85,7 +49,6 @@
</template>
<script setup lang="ts">
import { useForceRerender } from '@/composables/useForceRerender';
import { ref } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
@@ -99,8 +62,6 @@ import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { metaBalls } from '../../constants/code/Animations/metaBallsCode';
import MetaBalls from '../../content/Animations/MetaBalls/MetaBalls.vue';
const { forceRerender } = useForceRerender();
const color = ref('#27FF64');
const speed = ref(0.3);
const animationSize = ref(30);

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

@@ -12,17 +12,11 @@
<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" />
<PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" />
<PreviewSlider
:min="0"
:max="0.5"
:step="0.01"
v-model="amplitude"
title="Amplitude"
/>
<PreviewSlider :min="0" :max="0.5" :step="0.01" v-model="amplitude" title="Amplitude" />
<PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" @update:modelValue="forceRerender" />
<PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" />
</Customize>
<PropTable :data="propData" />
@@ -59,7 +53,7 @@ const speed = ref(1);
const amplitude = ref(0.1);
const mouseInteraction = ref(true);
const { rerenderKey: key, forceRerender } = useForceRerender();
const { rerenderKey: key } = useForceRerender();
const propData = [
{

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

@@ -24,19 +24,11 @@
<PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
<PreviewSwitch title="Smooth Animation" :model-value="smooth" @update:model-value="updateSmooth" />
<PreviewSwitch title="Smooth Animation" v-model="smooth" />
<PreviewSwitch
title="Show Center Vignette"
:model-value="showCenterVignette"
@update:model-value="updateCenterVignette"
/>
<PreviewSwitch title="Show Center Vignette" v-model="showCenterVignette" />
<PreviewSwitch
title="Show Outer Vignette"
:model-value="showOuterVignette"
@update:model-value="updateOuterVignette"
/>
<PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" />
</Customize>
<PropTable :data="propData" />
@@ -91,21 +83,6 @@ const randomizeColors = () => {
forceRerender();
};
const updateSmooth = (value: boolean) => {
smooth.value = value;
forceRerender();
};
const updateCenterVignette = (value: boolean) => {
showCenterVignette.value = value;
forceRerender();
};
const updateOuterVignette = (value: boolean) => {
showOuterVignette.value = value;
forceRerender();
};
const propData = [
{
name: 'glitchColors',

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

@@ -30,23 +30,11 @@
<PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
<PreviewSwitch
title="Mouse Interaction"
:model-value="moveParticlesOnHover"
@update:model-value="moveParticlesOnHover = $event"
/>
<PreviewSwitch title="Mouse Interaction" v-model="moveParticlesOnHover" />
<PreviewSwitch
title="Particle Transparency"
:model-value="alphaParticles"
@update:model-value="alphaParticles = $event"
/>
<PreviewSwitch title="Particle Transparency" v-model="alphaParticles" />
<PreviewSwitch
title="Disable Rotation"
:model-value="disableRotation"
@update:model-value="disableRotation = $event"
/>
<PreviewSwitch title="Disable Rotation" v-model="disableRotation" />
</Customize>
<PropTable :data="propData" />

2
src/demo/Components/CardSwapDemo.vue
View File

@@ -92,7 +92,7 @@
</div>
<Customize>
<PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" @update:model-value="forceRerender" />
<PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" />
<PreviewSlider title="Card Distance" v-model="cardDistance" :min="30" :max="100" :step="5" />

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

@@ -16,11 +16,11 @@
<Customize>
<PreviewSlider title="Width" v-model="width" :min="250" :max="330" :step="10" />
<PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" />
<PreviewSwitch title="Round Variant" v-model="round" />
<PreviewSwitch title="Loop" v-model="loop" @update:model-value="forceRerender" />
<PreviewSwitch title="Loop" v-model="loop" />
<PreviewSwitch title="Autoplay" v-model="autoplay" @update:model-value="forceRerender" />
<PreviewSwitch title="Autoplay" v-model="autoplay" />
<PreviewSlider
title="Delay"
@@ -31,12 +31,7 @@
:disabled="!autoplay"
/>
<PreviewSwitch
title="Pause On Hover"
v-model="pauseOnHover"
:disabled="!autoplay"
@update:model-value="forceRerender"
/>
<PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" :disabled="!autoplay" />
</Customize>
<PropTable :data="propData" />
@@ -55,7 +50,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
import Dependencies from '../../components/code/Dependencies.vue';
@@ -121,4 +116,11 @@ const propData = [
description: 'When true, the carousel is rendered with a 1:1 aspect ratio and circular container/items.'
}
];
watch(
() => [pauseOnHover.value, loop.value],
() => {
forceRerender();
}
);
</script>

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

@@ -20,11 +20,11 @@
</div>
<Customize>
<PreviewSwitch title="Scale on Hover" v-model="scaleOnHover" @update:model-value="forceRerender" />
<PreviewSwitch title="Scale on Hover" v-model="scaleOnHover" />
<PreviewSwitch title="Blur to Focus" v-model="blurToFocus" @update:model-value="forceRerender" />
<PreviewSwitch title="Blur to Focus" v-model="blurToFocus" />
<PreviewSwitch title="Color Shift on Hover" v-model="colorShiftOnHover" @update:model-value="forceRerender" />
<PreviewSwitch title="Color Shift on Hover" v-model="colorShiftOnHover" />
<PreviewSelect
title="Animation Direction"
@@ -62,7 +62,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import RefreshButton from '../../components/common/RefreshButton.vue';
import PropTable from '../../components/common/PropTable.vue';
@@ -142,4 +142,11 @@ const propData = [
description: 'Whether to show color overlay on hover.'
}
];
watch(
() => [scaleOnHover.value, blurToFocus.value, colorShiftOnHover.value],
() => {
forceRerender();
}
);
</script>

6
src/demo/Components/ProfileCardDemo.vue
View File

@@ -23,11 +23,11 @@
<Customize>
<button @click="generateRandomGradients" class="randomize-btn">Randomize Colors</button>
<PreviewSwitch title="Show Icon Pattern" v-model="showIcon" @update:model-value="forceRerender" />
<PreviewSwitch title="Show Icon Pattern" v-model="showIcon" />
<PreviewSwitch title="Show User Info" v-model="showUserInfo" @update:model-value="forceRerender" />
<PreviewSwitch title="Show User Info" v-model="showUserInfo" />
<PreviewSwitch title="Show BG Gradient" v-model="showBehindGradient" @update:model-value="forceRerender" />
<PreviewSwitch title="Show BG Gradient" v-model="showBehindGradient" />
</Customize>
<PropTable :data="propData" />

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

@@ -13,28 +13,10 @@
</div>
<Customize>
<PreviewSwitch title="Random Rotation" v-model="randomRotation" @update:model-value="forceRerender" />
<PreviewSlider
title="Sensitivity"
v-model="sensitivity"
:min="10"
:max="300"
:step="10"
/>
<PreviewSlider
title="Card Width"
v-model="cardDimensions.width"
:min="10"
:max="300"
:step="10"
/>
<PreviewSlider
title="Card Height"
v-model="cardDimensions.height"
:min="10"
:max="300"
:step="10"
/>
<PreviewSwitch title="Random Rotation" v-model="randomRotation" />
<PreviewSlider title="Sensitivity" v-model="sensitivity" :min="10" :max="300" :step="10" />
<PreviewSlider title="Card Width" v-model="cardDimensions.width" :min="10" :max="300" :step="10" />
<PreviewSlider title="Card Height" v-model="cardDimensions.height" :min="10" :max="300" :step="10" />
</Customize>
<PropTable :data="propData" />
</template>
@@ -69,7 +51,7 @@ const images = [
{ id: 4, img: 'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format' }
];
const { rerenderKey, forceRerender } = useForceRerender();
const { rerenderKey } = useForceRerender();
const randomRotation = ref<boolean>(false);
const sensitivity = ref<number>(200);
const cardDimensions = ref({

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

@@ -23,7 +23,7 @@
</div>
<Customize>
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
<div class="flex gap-4 flex-wrap">
<button
@@ -43,29 +43,11 @@
</button>
</div>
<PreviewSlider
title="Delay (ms)"
v-model="delay"
:min="50"
:max="500"
:step="10"
/>
<PreviewSlider title="Delay (ms)" v-model="delay" :min="50" :max="500" :step="10" />
<PreviewSlider
title="Step Duration (s)"
v-model="stepDuration"
:min="0.1"
:max="1"
:step="0.05"
/>
<PreviewSlider title="Step Duration (s)" v-model="stepDuration" :min="0.1" :max="1" :step="0.05" />
<PreviewSlider
title="Threshold"
v-model="threshold"
:min="0.1"
:max="1"
:step="0.1"
/>
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
</Customize>
<PropTable :data="propData" />

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

@@ -24,33 +24,11 @@
/>
</div>
<PreviewSlider
title="Speed"
v-model="speed"
:min="0"
:max="10"
:step="0.1"
/>
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1" />
<PreviewSlider
title="Curve Amount"
v-model="curveAmount"
:min="-400"
:max="400"
:step="10"
value-unit="px"
/>
<PreviewSlider title="Curve Amount" v-model="curveAmount" :min="-400" :max="400" :step="10" value-unit="px" />
<PreviewSwitch
title="Draggable"
:model-value="interactive"
@update:model-value="
(val: boolean) => {
interactive = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Draggable" v-model="interactive" />
</Customize>
<PropTable :data="propData" />

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

@@ -53,9 +53,9 @@
</div>
<Customize>
<PreviewSwitch title="Sequential" v-model="sequential" @update:model-value="forceRerender" />
<PreviewSwitch title="Sequential" v-model="sequential" />
<PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" @update:model-value="forceRerender" />
<PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" />
<PreviewSlider title="Speed" v-model="speed" :min="10" :max="200" :step="10" value-unit="ms" />
@@ -80,7 +80,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
@@ -176,6 +176,13 @@ const propData = [
description: 'Trigger scrambling on hover or scroll-into-view.'
}
];
watch(
() => [sequential.value, useOriginalCharsOnly.value],
() => {
forceRerender();
}
);
</script>
<style scoped>

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

@@ -27,32 +27,11 @@
</div>
<Customize>
<PreviewSlider
title="Base Intensity"
v-model="baseIntensity"
:min="0"
:max="1"
:step="0.01"
/>
<PreviewSlider title="Base Intensity" v-model="baseIntensity" :min="0" :max="1" :step="0.01" />
<PreviewSlider
title="Hover Intensity"
v-model="hoverIntensity"
:min="0"
:max="2"
:step="0.01"
/>
<PreviewSlider title="Hover Intensity" v-model="hoverIntensity" :min="0" :max="2" :step="0.01" />
<PreviewSwitch
title="Enable Hover"
:model-value="enableHover"
@update:model-value="
(val: boolean) => {
enableHover = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Enable Hover" v-model="enableHover" />
</Customize>
<PropTable :data="propData" />
@@ -85,7 +64,7 @@ const baseIntensity = ref(0.2);
const hoverIntensity = ref(0.5);
const enableHover = ref(true);
const { rerenderKey, forceRerender } = useForceRerender();
const { rerenderKey } = useForceRerender();
const propData = [
{

26
src/demo/TextAnimations/ScrollRevealDemo.vue
View File

@@ -22,16 +22,7 @@
</div>
<Customize>
<PreviewSwitch
title="Enable Hover"
:model-value="enableBlur"
@update:model-value="
(val: boolean) => {
enableBlur = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Enable Blur" v-model="enableBlur" />
<PreviewSlider title="Base Opacity:" v-model="baseOpacity" :min="0" :max="1" :step="0.1" value-unit="" />
<PreviewSlider title="Base Rotation:" v-model="baseRotation" :min="0" :max="10" :step="0.5" value-unit="deg" />
<PreviewSlider title="Blur Strength:" v-model="blurStrength" :min="0" :max="10" :step="0.5" value-unit="px" />
@@ -51,7 +42,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { gsap } from 'gsap';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
@@ -62,6 +53,7 @@ import ScrollReveal from '../../content/TextAnimations/ScrollReveal/ScrollReveal
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode';
import { useForceRerender } from '@/composables/useForceRerender';
const containerRef = ref<HTMLElement | null>(null);
const scrollText = ref(
@@ -75,11 +67,8 @@ const containerClassName = ref('');
const textClassName = ref('');
const rotationEnd = ref('bottom bottom');
const wordAnimationEnd = ref('bottom bottom');
const rerenderKey = ref(0);
const forceRerender = () => {
rerenderKey.value++;
};
const { rerenderKey, forceRerender } = useForceRerender();
const smoothScroll = (e: WheelEvent) => {
e.preventDefault();
@@ -110,6 +99,13 @@ onUnmounted(() => {
}
});
watch(
() => enableBlur.value,
() => {
forceRerender();
}
);
const propData = [
{
name: 'children',

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

@@ -22,7 +22,7 @@
</div>
<Customize>
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
<PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10" />
@@ -47,7 +47,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import RefreshButton from '../../components/common/RefreshButton.vue';
import PropTable from '../../components/common/PropTable.vue';
@@ -123,4 +123,11 @@ const propData = [
description: 'Callback function when all animations complete.'
}
];
watch(
() => showCallback.value,
() => {
forceRerender();
}
);
</script>

10
src/demo/TextAnimations/TextCursorDemo.vue
View File

@@ -29,13 +29,9 @@
/>
</div>
<PreviewSwitch
title="Follow Mouse Direction"
v-model="followMouseDirection"
@update:model-value="forceRerender"
/>
<PreviewSwitch title="Follow Mouse Direction" v-model="followMouseDirection" />
<PreviewSwitch title="Enable Random Floating" v-model="randomFloat" @update:model-value="forceRerender" />
<PreviewSwitch title="Enable Random Floating" v-model="randomFloat" />
</Customize>
<PropTable :data="propData" />
@@ -66,7 +62,7 @@ import TextCursor from '../../content/TextAnimations/TextCursor/TextCursor.vue';
import { textCursor } from '@/constants/code/TextAnimations/textCursorCode';
import { useForceRerender } from '@/composables/useForceRerender';
const { rerenderKey: key, forceRerender } = useForceRerender();
const { rerenderKey: key } = useForceRerender();
const text = ref('💚');
const followMouseDirection = ref(true);

75
src/demo/TextAnimations/TextPressureDemo.vue
View File

@@ -39,71 +39,17 @@
<p class="mt-6 text-[#999] text-sm">Animation Settings</p>
<div class="flex gap-4 flex-wrap">
<PreviewSwitch
title="Flex"
:model-value="flex"
@update:model-value="
(val: boolean) => {
flex = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Flex" v-model="flex" />
<PreviewSwitch
title="Alpha"
:model-value="alpha"
@update:model-value="
(val: boolean) => {
alpha = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Alpha" v-model="alpha" />
<PreviewSwitch
title="Stroke"
:model-value="stroke"
@update:model-value="
(val: boolean) => {
stroke = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Stroke" v-model="stroke" />
<PreviewSwitch
title="Width"
:model-value="width"
@update:model-value="
(val: boolean) => {
width = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Width" v-model="width" />
<PreviewSwitch
title="Weight"
:model-value="weight"
@update:model-value="
(val: boolean) => {
weight = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Weight" v-model="weight" />
<PreviewSwitch
title="Italic"
:model-value="italic"
@update:model-value="
(val: boolean) => {
italic = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Italic" v-model="italic" />
</div>
</Customize>
@@ -121,7 +67,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
@@ -231,6 +177,13 @@ const propData = [
description: 'Sets a minimum font-size to avoid overly tiny text on smaller screens.'
}
];
watch(
() => [flex.value, alpha.value, stroke.value, width.value, weight.value, italic.value],
() => {
forceRerender();
}
);
</script>
<style scoped>

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

@@ -10,7 +10,7 @@
<Customize>
<PreviewColor title="Corners Color" v-model="borderColor" />
<PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
<PreviewSwitch title="Hover Mode" v-model="manualMode" />
<PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px" />
@@ -65,7 +65,7 @@ import TrueFocus from '../../content/TextAnimations/TrueFocus/TrueFocus.vue';
import { trueFocus } from '../../constants/code/TextAnimations/trueFocusCode';
import { useForceRerender } from '@/composables/useForceRerender';
const { rerenderKey: key, forceRerender } = useForceRerender();
const { rerenderKey: key } = useForceRerender();
const manualMode = ref(false);
const blurAmount = ref(5);