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

Add prettier config, format codebase

Browse Source
This commit is contained in:
David Haz
2025-07-12 11:59:33 +03:00
parent ac8b2c04d8
commit f4d97ee94e
211 changed files with 10586 additions and 8810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,8 +7,14 @@
</div>
<Customize>
<PreviewSlider title="Wave Speed X" :model-value="waveSpeedX" @update:model-value="waveSpeedX = $event"
:min="0" :max="0.1" :step="0.01" />
<PreviewSlider
title="Wave Speed X"
:model-value="waveSpeedX"
@update:model-value="waveSpeedX = $event"
: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" />
@@ -16,6 +22,7 @@
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="[]" />
</template>
@@ -31,36 +38,76 @@
</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 Waves from '@/content/Backgrounds/Waves/Waves.vue'
import PreviewSlider from '@/components/common/PreviewSlider.vue'
import PreviewColor from '@/components/common/PreviewColor.vue'
import { waves } from '@/constants/code/Backgrounds/wavesCode'
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 Waves from '@/content/Backgrounds/Waves/Waves.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import PreviewColor from '@/components/common/PreviewColor.vue';
import { waves } from '@/constants/code/Backgrounds/wavesCode';
const color = ref('#ffffff')
const waveSpeedX = ref(0.0125)
const color = ref('#ffffff');
const waveSpeedX = ref(0.0125);
const propData = [
{ name: 'lineColor', type: 'string', default: 'black', description: 'Defines the color of the wave lines drawn on the canvas.' },
{ name: 'backgroundColor', type: 'string', default: 'transparent', description: 'Sets the background color of the waves container.' },
{ name: 'waveSpeedX', type: 'number', default: '0.0125', description: 'Horizontal speed factor for the wave animation.' },
{ name: 'waveSpeedY', type: 'number', default: '0.005', description: 'Vertical speed factor for the wave animation.' },
{
name: 'lineColor',
type: 'string',
default: 'black',
description: 'Defines the color of the wave lines drawn on the canvas.'
},
{
name: 'backgroundColor',
type: 'string',
default: 'transparent',
description: 'Sets the background color of the waves container.'
},
{
name: 'waveSpeedX',
type: 'number',
default: '0.0125',
description: 'Horizontal speed factor for the wave animation.'
},
{
name: 'waveSpeedY',
type: 'number',
default: '0.005',
description: 'Vertical speed factor for the wave animation.'
},
{ name: 'waveAmpX', type: 'number', default: '32', description: 'Horizontal amplitude of each wave.' },
{ name: 'waveAmpY', type: 'number', default: '16', description: 'Vertical amplitude of each wave.' },
{ name: 'xGap', type: 'number', default: '10', description: 'Horizontal gap between individual wave lines.' },
{ name: 'yGap', type: 'number', default: '32', description: 'Vertical gap between points on each wave line.' },
{ name: 'friction', type: 'number', default: '0.925', description: 'Controls how quickly the cursor effect slows down.' },
{ name: 'tension', type: 'number', default: '0.005', description: 'Determines the "springiness" of the cursor effect on points.' },
{ name: 'maxCursorMove', type: 'number', default: '100', description: 'Limits how far each point can shift due to cursor movement.' },
{
name: 'friction',
type: 'number',
default: '0.925',
description: 'Controls how quickly the cursor effect slows down.'
},
{
name: 'tension',
type: 'number',
default: '0.005',
description: 'Determines the "springiness" of the cursor effect on points.'
},
{
name: 'maxCursorMove',
type: 'number',
default: '100',
description: 'Limits how far each point can shift due to cursor movement.'
},
{ name: 'style', type: 'object', default: '{}', description: 'Inline styles applied to the container element.' },
{ name: 'className', type: 'string', default: '""', description: 'Custom class name(s) applied to the container element.' }
]
{
name: 'className',
type: 'string',
default: '""',
description: 'Custom class name(s) applied to the container element.'
}
];
</script>
<style scoped>