mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 22:49:31 -07:00
Merge branch 'main' of github.com:Utkarsh-Singhal-26/vue-bits into feat/grid-distortion
This commit is contained in:
Utkarsh-Singhal-26
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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.' },
|
||||
|
||||
@@ -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 = [
|
||||
{
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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.' },
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user