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

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>