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

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

100
src/demo/Backgrounds/LightningDemo.vue
View File

@@ -3,28 +3,65 @@
<TabbedLayout>
<template #preview>
<div class="demo-container">
<Lightning :hue="hue" :x-offset="xOffset" :speed="speed" :intensity="intensity"
:size="size" class="w-full h-full" />
<Lightning
:hue="hue"
:x-offset="xOffset"
:speed="speed"
:intensity="intensity"
:size="size"
class="w-full h-full"
/>
</div>
<Customize>
<PreviewSlider title="Hue" :model-value="hue" @update:model-value="hue = $event" :min="0" :max="360"
:step="1" />
<PreviewSlider
title="Hue"
:model-value="hue"
@update:model-value="hue = $event"
: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"
:model-value="xOffset"
@update:model-value="xOffset = $event"
: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"
:model-value="speed"
@update:model-value="speed = $event"
: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"
:model-value="intensity"
@update:model-value="intensity = $event"
: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"
:model-value="size"
@update:model-value="size = $event"
:min="0.1"
:max="3"
:step="0.1"
/>
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="[]" />
</template>
@@ -40,30 +77,35 @@
</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 Lightning from '@/content/Backgrounds/Lightning/Lightning.vue'
import PreviewSlider from '@/components/common/PreviewSlider.vue'
import { lightning } from '@/constants/code/Backgrounds/lightningCode'
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 Lightning from '@/content/Backgrounds/Lightning/Lightning.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import { lightning } from '@/constants/code/Backgrounds/lightningCode';
const hue = ref(160)
const xOffset = ref(0)
const speed = ref(1)
const intensity = ref(1)
const size = ref(1)
const hue = ref(160);
const xOffset = ref(0);
const speed = ref(1);
const intensity = ref(1);
const size = ref(1);
const propData = [
{ name: 'hue', type: 'number', default: '230', description: 'Hue of the lightning in degrees (0 to 360).' },
{ name: 'xOffset', type: 'number', default: '0', description: 'Horizontal offset of the lightning in normalized units.' },
{
name: 'xOffset',
type: 'number',
default: '0',
description: 'Horizontal offset of the lightning in normalized units.'
},
{ name: 'speed', type: 'number', default: '1', description: 'Animation speed multiplier for the lightning.' },
{ name: 'intensity', type: 'number', default: '1', description: 'Brightness multiplier for the lightning.' },
{ name: 'size', type: 'number', default: '1', description: 'Scale factor for the bolt size.' }
]
];
</script>
<style scoped>