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

documentation structure

Browse Source
This commit is contained in:
David Haz
2025-07-08 23:34:52 +03:00
parent 9ddb731258
commit 660e4fd701
46 changed files with 3488 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/demo/Backgrounds/DotGridDemo.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<div class="dot-grid-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container" style="height: 500px; overflow: hidden;">
<RefreshButton @refresh="forceRerender" />
<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">
<div class="color-input">
<label>Base Color</label>
<input type="color" v-model="baseColor" @change="forceRerender" />
</div>
<div class="color-input">
<label>Active Color</label>
<input type="color" v-model="activeColor" @change="forceRerender" />
</div>
</div>
<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="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 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="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" />
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" />
</template>
<template #code>
<CodeExample :code-object="dotGrid" />
</template>
<template #cli>
<CliInstallation :command="dotGrid.cli" />
</template>
</TabbedLayout>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import TabbedLayout from '../../components/common/TabbedLayout.vue'
import RefreshButton from '../../components/common/RefreshButton.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 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 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: '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: '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>
.dot-grid-demo-canvas {
width: 100%;
height: 100%;
}
.color-controls {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.color-input {
display: flex;
align-items: center;
gap: 0.5rem;
}
.color-input label {
font-size: 0.875rem;
color: #a1a1aa;
white-space: nowrap;
}
.color-input input[type="color"] {
width: 50px;
height: 32px;
border: 1px solid #333;
border-radius: 6px;
background: transparent;
cursor: pointer;
}
.color-input input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
.color-input input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 4px;
}
</style>