atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Added defineModel support for PreviewColor component. Updated watch in TrueFocus component.

Browse Source
This commit is contained in:
snepsnepy
2025-07-15 14:46:30 +03:00
parent 0421c6fd74
commit dbe11acf9b
16 changed files with 26 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,24 +1,16 @@
<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="props.disabled" class="color-input" />
</div>
</template>
<script setup lang="ts">
defineProps<{
title: string;
modelValue: string;
disabled?: boolean;
}>();
const emit = defineEmits<{
'update:modelValue': [value: string];
}>();
const props = defineProps<{ title: string; disabled?: boolean }>();
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>

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;

9
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"
@@ -214,9 +214,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');

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

@@ -22,7 +22,7 @@
</div>
<Customize>
<PreviewColor title="Spark Color" v-model="sparkColor" @update:model-value="forceRerender" />
<PreviewColor title="Spark Color" v-model="sparkColor" />
<PreviewSlider
title="Spark Size"

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

@@ -17,7 +17,7 @@
</div>
<Customize>
<PreviewColor title="Color" v-model="color" @update:model-value="forceRerender" />
<PreviewColor title="Color" v-model="color" />
<PreviewSlider
title="Ball Count"

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

@@ -49,7 +49,7 @@
width="200"
/>
<PreviewColor title="Pixel Color" v-model="pixelColor" @update:model-value="forceRerender" />
<PreviewColor title="Pixel Color" v-model="pixelColor" />
</Customize>
<PropTable :data="propData" />

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

@@ -22,8 +22,7 @@
v-for="(color, index) in colorStops"
:key="index"
:title="`Color ${index + 1}`"
:model-value="color"
@update:model-value="value => updateColorStop(index, value)"
v-model="colorStops[index]"
/>
</div>
</div>
@@ -100,10 +99,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-4">
<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',

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

@@ -16,7 +16,7 @@
</div>
<Customize>
<PreviewColor title="Color" :model-value="lightColor" @update:model-value="lightColor = $event" />
<PreviewColor title="Color" v-model="lightColor" />
<PreviewSlider
title="Beam Width"

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

@@ -22,9 +22,9 @@
<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

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

@@ -19,7 +19,7 @@
<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
@@ -117,12 +117,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.' },

2
src/demo/Backgrounds/SilkDemo.vue
View File

@@ -50,7 +50,7 @@
:step="0.1"
/>
<PreviewColor title="Color" :model-value="color" @update:model-value="color = $event" />
<PreviewColor title="Color" v-model="color" />
</Customize>
<PropTable :data="propData" />

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

@@ -17,7 +17,7 @@
/>
<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/CircularGalleryDemo.vue
View File

@@ -50,7 +50,7 @@
@update:model-value="forceRerender"
/>
<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" />
</Customize>

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

@@ -31,9 +31,9 @@
</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>

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

@@ -8,7 +8,7 @@
</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" />