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

Merge pull request #28 from snepsnepy/feat/defineModel-support

Browse Source 
Added 'defineModel' macro for v-model support in Preview components
This commit is contained in:
David
2025-07-16 22:29:22 +03:00
committed by GitHub
parent 6906cc26be 2e55686e70
commit 337c40bf7f
50 changed files with 293 additions and 1411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/common/PreviewColor.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="preview-color">
<span class="color-label">{{ title }}</span>
<input :value="modelValue" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
<input :value="color" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
</div>
</template>
@@ -12,13 +12,10 @@ defineProps<{
disabled?: boolean;
}>();
const emit = defineEmits<{
'update:modelValue': [value: string];
}>();
const color = defineModel<string>();
const handleColorChange = (event: Event) => {
const target = event.target as HTMLInputElement;
emit('update:modelValue', target.value);
color.value = (event.target as HTMLInputElement).value;
};
</script>

12
src/components/common/PreviewSelect.vue
View File

@@ -3,8 +3,7 @@
<span class="select-label">{{ title }}</span>
<Select
:model-value="modelValue"
@update:model-value="handleSelectChange"
v-model="model"
:options="options"
v-bind="selectAttributes"
:placeholder="placeholder"
@@ -25,7 +24,6 @@ interface Option {
const props = defineProps<{
title: string;
modelValue: string | number;
options: Option[] | string[] | number[];
optionLabel?: string;
optionValue?: string;
@@ -33,13 +31,7 @@ const props = defineProps<{
disabled?: boolean;
}>();
const emit = defineEmits<{
'update:modelValue': [value: string | number];
}>();
const handleSelectChange = (value: string | number) => {
emit('update:modelValue', value);
};
const model = defineModel<string | number>();
const isObjectArray = computed(() => {
return props.options.length > 0 && typeof props.options[0] === 'object';

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>

11
src/components/common/PreviewSwitch.vue
View File

@@ -2,11 +2,7 @@
<div class="preview-switch">
<span class="switch-label">{{ title }}</span>
<ToggleSwitch
:model-value="modelValue"
@update:model-value="$emit('update:modelValue', $event)"
:disabled="disabled"
/>
<ToggleSwitch v-model="model" :disabled="disabled" />
</div>
</template>
@@ -15,13 +11,10 @@ import ToggleSwitch from 'primevue/toggleswitch';
defineProps<{
title: string;
modelValue: boolean;
disabled?: boolean;
}>();
defineEmits<{
'update:modelValue': [value: boolean];
}>();
const model = defineModel<boolean>();
</script>
<style scoped>

10
src/components/common/PreviewText.vue
View File

@@ -3,24 +3,18 @@
<span class="text-label">{{ title }}</span>
<input
:value="modelValue"
@input="handleChange"
v-model="model"
class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
/>
</div>
</template>
<script setup lang="ts">
const emit = defineEmits(['update:modelValue']);
defineProps<{
title: string;
modelValue: string;
}>();
const handleChange = (event: Event) => {
const target = event.target as HTMLInputElement;
emit('update:modelValue', target.value);
};
const model = defineModel<string>();
</script>
<style scoped>

4
src/content/TextAnimations/TrueFocus/TrueFocus.vue
View File

@@ -32,7 +32,7 @@ const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });
let interval: number | null = null;
watch(
[() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, words],
[() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, () => words.value],
() => {
if (interval) {
clearInterval(interval);
@@ -52,7 +52,7 @@ watch(
);
watch(
[currentIndex, words.value.length],
[currentIndex, () => words.value.length],
async () => {
if (currentIndex.value === null || currentIndex.value === -1) return;
if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;

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

@@ -25,89 +25,25 @@
</div>
<Customize>
<PreviewSelect
title="Animation Direction"
v-model="direction"
:options="directionOptions"
@update:model-value="
val => {
direction = val as 'vertical' | 'horizontal';
forceRerender();
}
"
/>
<PreviewSelect title="Animation Direction" v-model="direction" :options="directionOptions" />
<PreviewSelect
title="Easing Function"
v-model="ease"
:options="easeOptions"
@update:model-value="
val => {
ease = val as string;
forceRerender();
}
"
/>
<PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
<PreviewSlider
title="Distance"
v-model="distance"
:min="50"
:max="300"
:step="10"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<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" />
@@ -126,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 PropTable from '../../components/common/PropTable.vue';
import Dependencies from '../../components/code/Dependencies.vue';
@@ -233,6 +169,10 @@ const propData = [
description: 'Additional CSS classes for styling.'
}
];
watch([direction, ease], () => {
forceRerender();
});
</script>
<style scoped>

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

@@ -33,9 +33,9 @@
<span class="ml-1 text-gray-400">{{ blobType }}</span>
</button>
<PreviewColor title="Fill Color" v-model="fillColor" @update:model-value="forceRerender" />
<PreviewColor title="Inner Color" v-model="innerColor" @update:model-value="forceRerender" />
<PreviewColor title="Shadow Color" v-model="shadowColor" @update:model-value="forceRerender" />
<PreviewColor title="Fill Color" v-model="fillColor" />
<PreviewColor title="Inner Color" v-model="innerColor" />
<PreviewColor title="Shadow Color" v-model="shadowColor" />
<PreviewSlider
title="Trail Count"
@@ -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]">
@@ -214,9 +133,6 @@ import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewColor from '../../components/common/PreviewColor.vue';
import BlobCursor from '../../content/Animations/BlobCursor/BlobCursor.vue';
import { useForceRerender } from '@/composables/useForceRerender';
const { forceRerender } = useForceRerender();
const blobType = ref<'circle' | 'square'>('circle');
const fillColor = ref<string>('#27FF64');

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

@@ -22,52 +22,17 @@
</div>
<Customize>
<PreviewColor title="Spark Color" v-model="sparkColor" @update:model-value="forceRerender" />
<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.' },

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

@@ -23,43 +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"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1" />
</Customize>
<PropTable :data="propData" />
@@ -76,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';
@@ -111,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>

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

@@ -27,26 +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"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Strength" v-model="magnetStrength" :min="1" :max="10" :step="1" />
</Customize>
<PropTable :data="propData" />
@@ -78,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 = [
{

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

@@ -17,87 +17,21 @@
</div>
<Customize>
<PreviewColor title="Color" v-model="color" @update:model-value="forceRerender" />
<PreviewColor title="Color" v-model="color" />
<PreviewSlider
title="Ball Count"
:min="2"
:max="30"
:step="1"
v-model="ballCount"
@onChange="
(val: number) => {
ballCount = val;
}
"
/>
<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"
@onChange="
(val: number) => {
speed = val;
}
"
/>
<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"
@onChange="
(val: number) => {
animationSize = val;
}
"
/>
<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"
@onChange="
(val: number) => {
clumpFactor = val;
}
"
/>
<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"
@onChange="
(val: number) => {
hoverSmoothness = val;
}
"
/>
<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"
@onChange="
(val: number) => {
cursorBallSize = val;
}
"
/>
<PreviewSlider title="Cursor Size" :min="1" :max="5" :step="1" v-model="cursorBallSize" />
</Customize>
<PropTable :data="propData" />
@@ -115,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';
@@ -129,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);

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

@@ -18,52 +18,17 @@
</div>
<Customize>
<PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" @update:model-value="forceRerender" />
<PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" />
<PreviewSlider
title="Pattern Scale"
v-model="patternScale"
:min="1"
:max="5"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Pattern Scale" v-model="patternScale" :min="1" :max="5" :step="0.1" />
<PreviewSlider
title="Pattern Blur"
v-model="patternBlur"
:min="0"
:max="0.1"
:step="0.001"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Pattern Blur" v-model="patternBlur" :min="0" :max="0.1" :step="0.001" />
<PreviewSlider
title="Refraction"
v-model="refraction"
:min="0"
:max="0.1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Refraction" v-model="refraction" :min="0" :max="0.1" :step="0.01" />
<PreviewSlider
title="Liquid"
v-model="liquid"
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Liquid" v-model="liquid" :min="0" :max="1" :step="0.01" />
<PreviewSlider
title="Speed"
v-model="speed"
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="1" :step="0.01" />
</Customize>
<PropTable :data="propData" />
@@ -101,7 +66,7 @@ const patternBlur = ref(0.005);
const liquid = ref(0.07);
const speed = ref(0.3);
const { rerenderKey, forceRerender } = useForceRerender();
const { rerenderKey } = useForceRerender();
const propData = [
{

15
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,11 +37,10 @@
:max="2"
:step="0.1"
value-unit="s"
@update:model-value="forceRerender"
width="200"
/>
<PreviewColor title="Pixel Color" v-model="pixelColor" @update:model-value="forceRerender" />
<PreviewColor title="Pixel Color" v-model="pixelColor" />
</Customize>
<PropTable :data="propData" />
@@ -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);

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

@@ -16,49 +16,20 @@
<Customize>
<div class="flex gap-2">
<PreviewColor
v-for="(color, index) in colorStops"
v-for="(_, index) in colorStops"
:key="index"
:title="`Color ${index + 1}`"
:model-value="color"
@update:model-value="value => updateColorStop(index, value)"
v-model="colorStops[index]"
/>
</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" />
@@ -96,10 +67,6 @@ const blend = ref(0.5);
const speed = ref(1.0);
const intensity = ref(1.0);
const updateColorStop = (index: number, color: string) => {
colorStops.value[index] = color;
};
const propData = [
{
name: 'colorStops',

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

@@ -16,11 +16,10 @@
<Customize>
<div class="flex gap-2">
<PreviewColor
v-for="(color, index) in colorStops"
v-for="(_, index) in colorStops"
:key="index"
:title="`Color ${index + 1}`"
:model-value="color"
@update:model-value="value => updateColorStop(index, value)"
v-model="colorStops[index]"
/>
</div>
@@ -64,10 +63,6 @@ const pixelation = ref(745);
const mouseInteractionEnabled = ref(true);
const rotate = ref(false);
const updateColorStop = (index: number, color: string) => {
colorStops.value[index] = color;
};
const propData = [
{
name: 'spinRotation',

54
src/demo/Backgrounds/BallpitDemo.vue
View File

@@ -17,59 +17,15 @@
</div>
<Customize>
<PreviewSwitch title="Display Cursor" v-model="followCursor" @update:model-value="forceRerender" />
<PreviewSwitch title="Display Cursor" v-model="followCursor" />
<PreviewSlider
title="Ball Count"
:min="50"
:max="500"
:step="10"
v-model="count"
@onChange="
(val: number) => {
count = val;
}
"
/>
<PreviewSlider title="Ball Count" :min="50" :max="500" :step="10" v-model="count" />
<PreviewSlider
title="Gravity"
:min="0.1"
:max="1"
:step="0.1"
v-model="gravity"
@onChange="
(val: number) => {
gravity = val;
}
"
/>
<PreviewSlider title="Gravity" :min="0.1" :max="1" :step="0.1" v-model="gravity" />
<PreviewSlider
title="Friction"
:min="0.9"
:max="1"
:step="0.001"
v-model="friction"
@onChange="
(val: number) => {
friction = val;
}
"
/>
<PreviewSlider title="Friction" :min="0.9" :max="1" :step="0.001" v-model="friction" />
<PreviewSlider
title="Wall Bounce"
:min="0.1"
:max="1"
:step="0.05"
v-model="wallBounce"
@onChange="
(val: number) => {
wallBounce = val;
}
"
/>
<PreviewSlider title="Wall Bounce" :min="0.1" :max="1" :step="0.05" v-model="wallBounce" />
</Customize>
<PropTable :data="propData" />

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

@@ -16,70 +16,21 @@
</div>
<Customize>
<PreviewColor title="Color" :model-value="lightColor" @update:model-value="lightColor = $event" />
<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" />

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

@@ -22,84 +22,28 @@
<Customize>
<div class="color-controls">
<PreviewColor title="Base Color" v-model="baseColor" @update:model-value="forceRerender" />
<PreviewColor title="Base Color" v-model="baseColor" />
<PreviewColor title="Active Color" v-model="activeColor" @update:model-value="forceRerender" />
<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.' },

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

@@ -12,18 +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" @update:modelValue="forceRerender" />
<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"
@update:modelValue="forceRerender"
/>
<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" />
@@ -60,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 = [
{

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

@@ -22,28 +22,13 @@
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" />
<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" />
@@ -98,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',

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

33
src/demo/Backgrounds/OrbDemo.vue
View File

@@ -12,35 +12,13 @@
</div>
<Customize>
<PreviewSlider
title="Hue Shift"
:min="0"
:max="360"
:step="1"
v-model="hue"
@onChange="
(val: number) => {
hue = val;
}
"
/>
<PreviewSlider title="Hue Shift" :min="0" :max="360" :step="1" v-model="hue" />
<PreviewSlider
title="Hover Intensity"
:min="0"
:max="5"
:step="0.01"
v-model="hoverIntensity"
@onChange="
(val: number) => {
hoverIntensity = val;
}
"
/>
<PreviewSlider title="Hover Intensity" :min="0" :max="5" :step="0.01" v-model="hoverIntensity" />
<PreviewSwitch title="Rotate on Hover" v-model="rotateOnHover" @update:model-value="forceRerender" />
<PreviewSwitch title="Rotate on Hover" v-model="rotateOnHover" />
<PreviewSwitch title="Force Hover State" v-model="forceHoverState" @update:model-value="forceRerender" />
<PreviewSwitch title="Force Hover State" v-model="forceHoverState" />
</Customize>
<PropTable :data="propData" />
@@ -58,7 +36,6 @@
</template>
<script setup lang="ts">
import { useForceRerender } from '@/composables/useForceRerender';
import { ref, watch } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
@@ -71,8 +48,6 @@ import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { orb } from '../../constants/code/Backgrounds/orbCode';
import Orb from '../../content/Backgrounds/Orb/Orb.vue';
const { forceRerender } = useForceRerender();
const hue = ref(100);
const hoverIntensity = ref(0.5);
const rotateOnHover = ref(true);

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

@@ -19,62 +19,22 @@
<Customize>
<div class="flex gap-4 items-center">
<PreviewColor title="Color" :model-value="color" @update:model-value="updateColor" />
<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"
: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" />
@@ -117,12 +77,7 @@ const moveParticlesOnHover = ref(true);
const alphaParticles = ref(false);
const disableRotation = ref(false);
const { rerenderKey, forceRerender } = useForceRerender();
const updateColor = (value: string) => {
color.value = value;
forceRerender();
};
const { rerenderKey } = useForceRerender();
const propData = [
{ name: 'particleCount', type: 'number', default: '200', description: 'The number of particles to generate.' },

14
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,14 +40,13 @@
<PreviewSlider
title="Rotation"
:model-value="rotation"
@update:model-value="rotation = $event"
v-model="rotation"
:min="0"
:max="6.28"
:step="0.1"
/>
<PreviewColor title="Color" :model-value="color" @update:model-value="color = $event" />
<PreviewColor title="Color" v-model="color" />
</Customize>
<PropTable :data="propData" />

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

@@ -9,15 +9,14 @@
<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"
/>
<div class="flex gap-4 items-center">
<PreviewColor title="Waves Color" :model-value="color" @update:model-value="color = $event" />
<PreviewColor title="Waves Color" v-model="color" />
</div>
</Customize>

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

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

@@ -14,20 +14,13 @@
</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" />
<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"
@@ -36,15 +29,9 @@
:max="4000"
:step="1000"
:disabled="!autoplay"
@update:model-value="forceRerender"
/>
<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" />
@@ -63,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';
@@ -129,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>

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

@@ -14,45 +14,17 @@
</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" @update:model-value="forceRerender" />
<PreviewColor title="Text Color" v-model="textColor" />
<PreviewSelect title="Font" v-model="font" :options="fontOptions" @update:model-value="forceRerender" />
<PreviewSelect title="Font" v-model="font" :options="fontOptions" />
</Customize>
<PropTable :data="propData" />
@@ -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 },

43
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"
@@ -37,35 +37,13 @@
{ label: 'Center', value: 'center' },
{ label: 'Random', value: 'random' }
]"
@update:model-value="forceRerender"
/>
<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" />
@@ -84,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';
@@ -164,4 +142,11 @@ const propData = [
description: 'Whether to show color overlay on hover.'
}
];
watch(
() => [scaleOnHover.value, blurToFocus.value, colorShiftOnHover.value],
() => {
forceRerender();
}
);
</script>

9
src/demo/Components/PixelCardDemo.vue
View File

@@ -10,12 +10,7 @@
</div>
<Customize>
<PreviewSelect
title="Animation Variant"
:options="variantOptions"
v-model="selectedVariant"
@update:model-value="forceRerender"
/>
<PreviewSelect title="Animation Variant" :options="variantOptions" v-model="selectedVariant" />
</Customize>
<PropTable :data="propData" />
@@ -44,7 +39,7 @@ import { pixelCard } from '@/constants/code/Components/pixelCardCode';
import { useForceRerender } from '@/composables/useForceRerender';
const selectedVariant = ref<'default' | 'blue' | 'yellow' | 'pink'>('default');
const { rerenderKey, forceRerender } = useForceRerender();
const { rerenderKey } = useForceRerender();
const variantOptions = [
{ value: 'default', label: 'Default' },

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

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

@@ -13,31 +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"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Card Width"
v-model="cardDimensions.width"
:min="10"
:max="300"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Card Height"
v-model="cardDimensions.height"
:min="10"
:max="300"
:step="10"
@update:model-value="forceRerender"
/>
<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>
@@ -72,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({

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

@@ -14,36 +14,15 @@
</div>
<Customize>
<PreviewText title="Text" v-model="text" @update:model-value="forceRerender" />
<PreviewText title="Text" v-model="text" />
<PreviewSlider
title="ASCII Font Size"
v-model="asciiFontSize"
:min="2"
:max="20"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="ASCII Font Size" v-model="asciiFontSize" :min="2" :max="20" :step="1" />
<PreviewSlider
title="Text Font Size"
v-model="textFontSize"
:min="100"
:max="400"
:step="25"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Text Font Size" v-model="textFontSize" :min="100" :max="400" :step="25" />
<PreviewSlider
title="Base Height"
v-model="planeBaseHeight"
:min="4"
:max="16"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Base Height" v-model="planeBaseHeight" :min="4" :max="16" :step="1" />
<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

29
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,32 +43,11 @@
</button>
</div>
<PreviewSlider
title="Delay (ms)"
v-model="delay"
:min="50"
:max="500"
:step="10"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
</Customize>
<PropTable :data="propData" />

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

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

@@ -24,35 +24,11 @@
/>
</div>
<PreviewSlider
title="Speed"
v-model="speed"
:min="0"
:max="10"
:step="0.1"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<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" />

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

@@ -53,52 +53,17 @@
</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"
@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"
@update:model-value="
val => {
animateOn = val as 'view' | 'hover';
forceRerender();
}
"
/>
<PreviewSelect title="Animation Trigger" v-model="animateOn" :options="animateOptions" />
<PreviewSelect
title="Animation Direction"
v-model="revealDirection"
:options="directionOptions"
@update:model-value="
val => {
revealDirection = val as 'start' | 'end' | 'center';
forceRerender();
}
"
/>
<PreviewSelect title="Animation Direction" v-model="revealDirection" :options="directionOptions" />
</Customize>
<PropTable :data="propData" />
@@ -115,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';
@@ -211,6 +176,13 @@ const propData = [
description: 'Trigger scrambling on hover or scroll-into-view.'
}
];
watch(
() => [sequential.value, useOriginalCharsOnly.value],
() => {
forceRerender();
}
);
</script>
<style scoped>

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

@@ -18,21 +18,9 @@
</div>
<Customize>
<PreviewSelect
title="Animation Trigger"
v-model="trigger"
:options="triggerOptions"
@update:model-value="forceRerender"
/>
<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"
@@ -40,7 +28,6 @@
:min="0.1"
:max="2"
:step="0.1"
@update:model-value="forceRerender"
/>
</Customize>
@@ -73,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);

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

@@ -27,34 +27,11 @@
</div>
<Customize>
<PreviewSlider
title="Base Intensity"
v-model="baseIntensity"
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
<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"
@update:model-value="forceRerender"
/>
<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" />
@@ -87,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 = [
{

1
src/demo/TextAnimations/GlitchTextDemo.vue
View File

@@ -46,6 +46,7 @@ import PropTable from '../../components/common/PropTable.vue';
import PreviewText from '../../components/common/PreviewText.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import Customize from '@/components/common/Customize.vue';
import { glitchText } from '@/constants/code/TextAnimations/glitchTextCode';
const text = ref('Vue Bits');

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

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

@@ -22,34 +22,13 @@
</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"
@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" />
@@ -68,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';
@@ -144,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);

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

@@ -31,79 +31,25 @@
</div>
<div class="color-controls">
<PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
<PreviewColor title="Text Color" v-model="textColor" />
<PreviewColor title="Stroke Color" v-model="strokeColor" @update:model-value="forceRerender" />
<PreviewColor title="Stroke Color" v-model="strokeColor" />
</div>
<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>

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

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

@@ -8,19 +8,11 @@
</div>
<Customize>
<PreviewColor title="Corners Color" v-model="borderColor" @update:model-value="forceRerender" />
<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"
@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>
@@ -75,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);