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

85
src/demo/Backgrounds/SilkDemo.vue
View File

@@ -3,27 +3,58 @@
<TabbedLayout>
<template #preview>
<div class="demo-container">
<Silk :speed="speed" :scale="scale" :color="color" :noise-intensity="noiseIntensity" :rotation="rotation"
class="w-full h-full" />
<Silk
:speed="speed"
:scale="scale"
:color="color"
:noise-intensity="noiseIntensity"
:rotation="rotation"
class="w-full h-full"
/>
</div>
<Customize>
<PreviewSlider title="Speed" :model-value="speed" @update:model-value="speed = $event" :min="0" :max="10"
:step="0.1" />
<PreviewSlider
title="Speed"
:model-value="speed"
@update:model-value="speed = $event"
:min="0"
:max="10"
:step="0.1"
/>
<PreviewSlider title="Scale" :model-value="scale" @update:model-value="scale = $event" :min="0.1" :max="3"
:step="0.1" />
<PreviewSlider
title="Scale"
:model-value="scale"
@update:model-value="scale = $event"
:min="0.1"
:max="3"
:step="0.1"
/>
<PreviewSlider title="Noise Intensity" :model-value="noiseIntensity"
@update:model-value="noiseIntensity = $event" :min="0" :max="3" :step="0.1" />
<PreviewSlider
title="Noise Intensity"
:model-value="noiseIntensity"
@update:model-value="noiseIntensity = $event"
:min="0"
:max="3"
:step="0.1"
/>
<PreviewSlider title="Rotation" :model-value="rotation" @update:model-value="rotation = $event" :min="0"
:max="6.28" :step="0.1" />
<PreviewSlider
title="Rotation"
:model-value="rotation"
@update:model-value="rotation = $event"
:min="0"
:max="6.28"
:step="0.1"
/>
<PreviewColor title="Color" :model-value="color" @update:model-value="color = $event" />
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['ogl']" />
</template>
@@ -39,23 +70,23 @@
</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 Silk from '@/content/Backgrounds/Silk/Silk.vue'
import PreviewColor from '@/components/common/PreviewColor.vue'
import PreviewSlider from '@/components/common/PreviewSlider.vue'
import { silk } from '@/constants/code/Backgrounds/silkCode'
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 Silk from '@/content/Backgrounds/Silk/Silk.vue';
import PreviewColor from '@/components/common/PreviewColor.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import { silk } from '@/constants/code/Backgrounds/silkCode';
const speed = ref(5)
const scale = ref(1)
const color = ref('#7B7481')
const noiseIntensity = ref(1.5)
const rotation = ref(0)
const speed = ref(5);
const scale = ref(1);
const color = ref('#7B7481');
const noiseIntensity = ref(1.5);
const rotation = ref(0);
const propData = [
{ name: 'speed', type: 'number', default: '5', description: 'Animation speed multiplier' },
@@ -65,7 +96,7 @@ const propData = [
{ name: 'rotation', type: 'number', default: '0', description: 'Rotation angle in radians' },
{ 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>