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

71
src/demo/TextAnimations/GradientTextDemo.vue
View File

@@ -3,18 +3,29 @@
<TabbedLayout>
<template #preview>
<h2 class="demo-title-extra">Default</h2>
<div class="demo-container relative min-h-[150px] flex items-center justify-center">
<div class="text-[2rem]">
<GradientText text="Add a splash of color!" :colors="gradientPreview" :animation-speed="speed"
:show-border="false" />
<GradientText
text="Add a splash of color!"
:colors="gradientPreview"
:animation-speed="speed"
:show-border="false"
/>
</div>
</div>
<h2 class="demo-title-extra">Border Animation</h2>
<div class="demo-container relative min-h-[150px] flex items-center justify-center">
<div class="text-[2rem]">
<GradientText text="Now with a cool border!" :colors="gradientPreview" :animation-speed="speed"
:show-border="true" class-name="custom-gradient-class" />
<GradientText
text="Now with a cool border!"
:colors="gradientPreview"
:animation-speed="speed"
:show-border="true"
class-name="custom-gradient-class"
/>
</div>
</div>
@@ -24,20 +35,32 @@
<div class="flex flex-col gap-0">
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Colors</label>
<input v-model="colors" type="text" placeholder="Enter colors separated by commas" maxlength="100"
class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]" />
<input
v-model="colors"
type="text"
placeholder="Enter colors separated by commas"
maxlength="100"
class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
/>
</div>
<div class="w-[300px] h-3 rounded-md border border-[#271E37]" :style="{
background: `linear-gradient(to right, ${gradientPreview.join(', ')})`
}" />
<div
class="w-[300px] h-3 rounded-md border border-[#271E37]"
:style="{
background: `linear-gradient(to right, ${gradientPreview.join(', ')})`
}"
/>
</div>
</Customize>
<p class="demo-extra-info mt-4 flex items-center gap-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" />
clip-rule="evenodd"
/>
</svg>
For a smoother animation, the gradient should start and end with the same color.
</p>
@@ -57,20 +80,20 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import TabbedLayout from '../../components/common/TabbedLayout.vue'
import PropTable from '../../components/common/PropTable.vue'
import CliInstallation from '../../components/code/CliInstallation.vue'
import CodeExample from '../../components/code/CodeExample.vue'
import Customize from '../../components/common/Customize.vue'
import PreviewSlider from '../../components/common/PreviewSlider.vue'
import GradientText from '../../content/TextAnimations/GradientText/GradientText.vue'
import { gradientText } from '@/constants/code/TextAnimations/gradientTextCode'
import { ref, computed } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import GradientText from '../../content/TextAnimations/GradientText/GradientText.vue';
import { gradientText } from '@/constants/code/TextAnimations/gradientTextCode';
const colors = ref('#40ffaa, #4079ff, #40ffaa, #4079ff, #40ffaa')
const speed = ref(3)
const colors = ref('#40ffaa, #4079ff, #40ffaa, #4079ff, #40ffaa');
const speed = ref(3);
const gradientPreview = computed(() => colors.value.split(',').map(color => color.trim()))
const gradientPreview = computed(() => colors.value.split(',').map(color => color.trim()));
const propData = [
{
@@ -103,7 +126,7 @@ const propData = [
default: 'false',
description: 'Determines whether a border with the gradient effect is displayed.'
}
]
];
</script>
<style scoped>