mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-04-22 01:54:38 -06:00
Add prettier config, format codebase
This commit is contained in:
David Haz
@@ -2,47 +2,108 @@
|
||||
<div class="dot-grid-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 500px; overflow: hidden;">
|
||||
<DotGrid :key="rerenderKey" :dot-size="dotSize" :gap="gap" :base-color="baseColor" :active-color="activeColor"
|
||||
:proximity="proximity" :speed-trigger="speedTrigger" :shock-radius="shockRadius"
|
||||
:shock-strength="shockStrength" :max-speed="maxSpeed" :resistance="resistance"
|
||||
:return-duration="returnDuration" class-name="dot-grid-demo-canvas" />
|
||||
<div class="demo-container" style="height: 500px; overflow: hidden">
|
||||
<DotGrid
|
||||
:key="rerenderKey"
|
||||
:dot-size="dotSize"
|
||||
:gap="gap"
|
||||
:base-color="baseColor"
|
||||
:active-color="activeColor"
|
||||
:proximity="proximity"
|
||||
:speed-trigger="speedTrigger"
|
||||
:shock-radius="shockRadius"
|
||||
:shock-strength="shockStrength"
|
||||
:max-speed="maxSpeed"
|
||||
:resistance="resistance"
|
||||
:return-duration="returnDuration"
|
||||
class-name="dot-grid-demo-canvas"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<div class="color-controls">
|
||||
<PreviewColor title="Base Color" v-model="baseColor" @update:model-value="forceRerender" />
|
||||
|
||||
<PreviewColor title="Active Color" v-model="activeColor" @update:model-value="forceRerender" />
|
||||
</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"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" @update:model-value="forceRerender" />
|
||||
|
||||
<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"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<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"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<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"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<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"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<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"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<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"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
|
||||
<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"
|
||||
@update:model-value="forceRerender"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
@@ -58,47 +119,67 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue'
|
||||
import PropTable from '../../components/common/PropTable.vue'
|
||||
import Dependencies from '../../components/code/Dependencies.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue'
|
||||
import PreviewColor from '../../components/common/PreviewColor.vue'
|
||||
import DotGrid from '../../content/Backgrounds/DotGrid/DotGrid.vue'
|
||||
import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode'
|
||||
import { useForceRerender } from '@/composables/useForceRerender'
|
||||
import { ref } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import PreviewColor from '../../components/common/PreviewColor.vue';
|
||||
import DotGrid from '../../content/Backgrounds/DotGrid/DotGrid.vue';
|
||||
import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode';
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
|
||||
const dotSize = ref(5)
|
||||
const gap = ref(15)
|
||||
const baseColor = ref('#333333')
|
||||
const activeColor = ref('#27FF64')
|
||||
const proximity = ref(120)
|
||||
const speedTrigger = ref(100)
|
||||
const shockRadius = ref(250)
|
||||
const shockStrength = ref(5)
|
||||
const maxSpeed = ref(5000)
|
||||
const resistance = ref(750)
|
||||
const returnDuration = ref(1.5)
|
||||
const { rerenderKey, forceRerender } = useForceRerender()
|
||||
const dotSize = ref(5);
|
||||
const gap = ref(15);
|
||||
const baseColor = ref('#333333');
|
||||
const activeColor = ref('#27FF64');
|
||||
const proximity = ref(120);
|
||||
const speedTrigger = ref(100);
|
||||
const shockRadius = ref(250);
|
||||
const shockStrength = ref(5);
|
||||
const maxSpeed = ref(5000);
|
||||
const resistance = ref(750);
|
||||
const returnDuration = ref(1.5);
|
||||
const { rerenderKey, forceRerender } = useForceRerender();
|
||||
|
||||
const propData = [
|
||||
{ name: 'dotSize', type: 'number', default: '16', description: 'Size of each dot in pixels.' },
|
||||
{ name: 'gap', type: 'number', default: '32', description: 'Gap between each dot in pixels.' },
|
||||
{ name: 'baseColor', type: 'string', default: "'#27FF64'", description: 'Base color of the dots.' },
|
||||
{ name: 'activeColor', type: 'string', default: "'#27FF64'", description: 'Color of dots when hovered or activated.' },
|
||||
{ name: 'proximity', type: 'number', default: '150', description: 'Radius around the mouse pointer within which dots react.' },
|
||||
{ name: 'speedTrigger', type: 'number', default: '100', description: 'Mouse speed threshold to trigger inertia effect.' },
|
||||
{
|
||||
name: 'activeColor',
|
||||
type: 'string',
|
||||
default: "'#27FF64'",
|
||||
description: 'Color of dots when hovered or activated.'
|
||||
},
|
||||
{
|
||||
name: 'proximity',
|
||||
type: 'number',
|
||||
default: '150',
|
||||
description: 'Radius around the mouse pointer within which dots react.'
|
||||
},
|
||||
{
|
||||
name: 'speedTrigger',
|
||||
type: 'number',
|
||||
default: '100',
|
||||
description: 'Mouse speed threshold to trigger inertia effect.'
|
||||
},
|
||||
{ name: 'shockRadius', type: 'number', default: '250', description: 'Radius of the shockwave effect on click.' },
|
||||
{ name: 'shockStrength', type: 'number', default: '5', description: 'Strength of the shockwave effect on click.' },
|
||||
{ name: 'maxSpeed', type: 'number', default: '5000', description: 'Maximum speed for inertia calculation.' },
|
||||
{ name: 'resistance', type: 'number', default: '750', description: 'Resistance for the inertia effect.' },
|
||||
{ name: 'returnDuration', type: 'number', default: '1.5', description: 'Duration for dots to return to their original position after inertia.' },
|
||||
{
|
||||
name: 'returnDuration',
|
||||
type: 'number',
|
||||
default: '1.5',
|
||||
description: 'Duration for dots to return to their original position after inertia.'
|
||||
},
|
||||
{ name: 'className', type: 'string', default: "''", description: 'Additional CSS classes for the component.' },
|
||||
{ name: 'style', type: 'object', default: '{}', description: 'Inline styles for the component.' }
|
||||
]
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -112,4 +193,4 @@ const propData = [
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user