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

Small fixes

Browse Source
This commit is contained in:
David Haz
2025-07-19 19:55:19 +03:00
parent a6df503535
commit 340985ce52
8 changed files with 350 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/demo/Animations/StarBorderDemo.vue
View File

@@ -1,29 +1,27 @@
<template>
<TabbedLayout>
<template #preview>
<div class="demo-container overflow-hidden h-[400px]">
<StarBorder as="button" :color="color" :speed="speedProp" :thickness="thickness">
Star Border
</StarBorder>
</div>
<TabbedLayout>
<template #preview>
<div class="demo-container overflow-hidden h-[400px]">
<StarBorder as="button" :color="color" :speed="speedProp" :thickness="thickness">Star Border</StarBorder>
</div>
<Customize>
<PreviewSelect title="Color" v-model="color" :options="colorOptions" />
<PreviewSlider title="Thickness" v-model="thickness" :min="0.5" :max="8" :step="0.5" value-unit="px" />
<PreviewSlider title="Speed" v-model="speed" :min="1" :max="10" :step="0.5" value-unit="s" />
</Customize>
<Customize>
<PreviewSelect title="Color" v-model="color" :options="colorOptions" />
<PreviewSlider title="Thickness" v-model="thickness" :min="0.5" :max="8" :step="0.5" value-unit="px" />
<PreviewSlider title="Speed" v-model="speed" :min="1" :max="10" :step="0.5" value-unit="s" />
</Customize>
<PropTable :data="propData" />
</template>
<PropTable :data="propData" />
</template>
<template #code>
<CodeExample :code-object="starBorder" />
</template>
<template #code>
<CodeExample :code-object="starBorder" />
</template>
<template #cli>
<CliInstallation :command="starBorder.cli" />
</template>
</TabbedLayout>
<template #cli>
<CliInstallation :command="starBorder.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">
@@ -38,46 +36,50 @@ import PreviewSelect from '../../components/common/PreviewSelect.vue';
import StarBorder from '../../content/Animations/StarBorder/StarBorder.vue';
import { starBorder } from '@/constants/code/Animations/starBorderCode';
const thickness = ref<number>(3)
const speed = ref<number>(6)
const speedProp = ref<string>('6s')
const color = ref<string>('magenta')
const colorOptions = [{ label: 'Magenta', value: "magenta" }, { label: 'Cyan', value: "cyan" }, { label: 'white', value: "white" }]
const thickness = ref<number>(3);
const speed = ref<number>(6);
const speedProp = ref<string>('6s');
const color = ref<string>('magenta');
const colorOptions = [
{ label: 'Magenta', value: 'magenta' },
{ label: 'Cyan', value: 'cyan' },
{ label: 'white', value: 'white' }
];
watch(speed, () => {
speedProp.value = (speed.value).toString() + 's'
})
speedProp.value = speed.value.toString() + 's';
});
const propData = [
{
name: 'as',
type: 'string',
default: 'button',
description: 'Allows specifying the type of the parent component to be rendered.'
},
{
name: 'customClass',
type: 'string',
default: '',
description: 'Allows adding custom classes to the component.'
},
{
name: 'color',
type: 'string',
default: 'white',
description: 'Changes the main color of the border (fades to transparent)'
},
{
name: 'speed',
type: 'string',
default: '6s',
description: 'Changes the speed of the animation.'
},
{
name: 'thickness',
type: 'number',
default: '3',
description: 'Controls the thickness of the star border effect.'
}
{
name: 'as',
type: 'string',
default: 'button',
description: 'Allows specifying the type of the parent component to be rendered.'
},
{
name: 'customClass',
type: 'string',
default: '',
description: 'Allows adding custom classes to the component.'
},
{
name: 'color',
type: 'string',
default: 'white',
description: 'Changes the main color of the border (fades to transparent)'
},
{
name: 'speed',
type: 'string',
default: '6s',
description: 'Changes the speed of the animation.'
},
{
name: 'thickness',
type: 'number',
default: '3',
description: 'Controls the thickness of the star border effect.'
}
];
</script>