atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-09 00:19:31 -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

134
src/demo/Backgrounds/AuroraDemo.vue
View File

@@ -3,35 +3,70 @@
<TabbedLayout>
<template #preview>
<div class="demo-container">
<Aurora :color-stops="colorStops" :amplitude="amplitude" :blend="blend" :speed="speed"
:intensity="intensity" class="w-full" />
<Aurora
:color-stops="colorStops"
:amplitude="amplitude"
:blend="blend"
:speed="speed"
:intensity="intensity"
class="w-full"
/>
</div>
<Customize>
<div class="space-y-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
Color Stops
</h3>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Color Stops</h3>
<div class="flex gap-4">
<PreviewColor v-for="(color, index) in colorStops" :key="index" :title="`Color ${index + 1}`"
:model-value="color" @update:model-value="(value) => updateColorStop(index, value)" />
<PreviewColor
v-for="(color, index) in colorStops"
:key="index"
:title="`Color ${index + 1}`"
:model-value="color"
@update:model-value="value => updateColorStop(index, value)"
/>
</div>
</div>
<PreviewSlider title="Amplitude" :model-value="amplitude" @update:model-value="amplitude = $event" :min="0"
:max="2" :step="0.1" />
<PreviewSlider
title="Amplitude"
:model-value="amplitude"
@update:model-value="amplitude = $event"
: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"
:model-value="blend"
@update:model-value="blend = $event"
: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"
:model-value="speed"
@update:model-value="speed = $event"
: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"
:model-value="intensity"
@update:model-value="intensity = $event"
:min="0"
:max="2"
:step="0.1"
/>
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['ogl']" />
</template>
@@ -47,39 +82,58 @@
</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 Aurora from '@/content/Backgrounds/Aurora/Aurora.vue'
import PreviewColor from '@/components/common/PreviewColor.vue'
import PreviewSlider from '@/components/common/PreviewSlider.vue'
import { aurora } from '@/constants/code/Backgrounds/auroraCode'
const colorStops = ref(['#171D22', '#7cff67', '#171D22'])
const amplitude = ref(1.0)
const blend = ref(0.5)
const speed = ref(1.0)
const intensity = ref(1.0)
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 Aurora from '@/content/Backgrounds/Aurora/Aurora.vue';
import PreviewColor from '@/components/common/PreviewColor.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import { aurora } from '@/constants/code/Backgrounds/auroraCode';
const colorStops = ref(['#171D22', '#7cff67', '#171D22']);
const amplitude = ref(1.0);
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
}
colorStops.value[index] = color;
};
const propData = [
{ name: 'colorStops', type: 'string[]', default: "['#171D22', '#7cff67', '#171D22']", description: 'Array of color stops for the aurora gradient.' },
{ name: 'amplitude', type: 'number', default: '1.0', description: 'Controls the height variation of the aurora effect.' },
{ name: 'blend', type: 'number', default: '0.5', description: 'Controls the blending/smoothness of the aurora effect.' },
{
name: 'colorStops',
type: 'string[]',
default: "['#171D22', '#7cff67', '#171D22']",
description: 'Array of color stops for the aurora gradient.'
},
{
name: 'amplitude',
type: 'number',
default: '1.0',
description: 'Controls the height variation of the aurora effect.'
},
{
name: 'blend',
type: 'number',
default: '0.5',
description: 'Controls the blending/smoothness of the aurora effect.'
},
{ name: 'speed', type: 'number', default: '1.0', description: 'Controls the animation speed of the aurora effect.' },
{ name: 'intensity', type: 'number', default: '1.0', description: 'Controls the overall intensity/opacity of the aurora effect.' },
{
name: 'intensity',
type: 'number',
default: '1.0',
description: 'Controls the overall intensity/opacity of the aurora effect.'
},
{ name: 'time', type: 'number', default: 'undefined', description: 'Optional time override for the animation.' },
{ name: 'className', type: 'string', default: '""', description: 'Additional CSS class names for styling.' },
{ name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
]
];
</script>
<style scoped>
@@ -87,4 +141,4 @@ const propData = [
overflow: hidden;
padding: 0;
}
</style>
</style>