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

90
src/demo/TextAnimations/FuzzyTextDemo.vue
View File

@@ -4,23 +4,58 @@
<template #preview>
<div class="demo-container relative h-[500px] overflow-hidden">
<div class="flex flex-col items-center justify-center h-full">
<FuzzyText :key="`main-${rerenderKey}`" text="404" :base-intensity="baseIntensity"
:hover-intensity="hoverIntensity" :enable-hover="enableHover" :font-size="140" />
<FuzzyText
:key="`main-${rerenderKey}`"
text="404"
:base-intensity="baseIntensity"
:hover-intensity="hoverIntensity"
:enable-hover="enableHover"
:font-size="140"
/>
<div class="my-1" />
<FuzzyText :key="`sub-${rerenderKey}`" text="not found" :base-intensity="baseIntensity"
:hover-intensity="hoverIntensity" :enable-hover="enableHover" :font-size="70" font-family="Gochi Hand" />
<FuzzyText
:key="`sub-${rerenderKey}`"
text="not found"
:base-intensity="baseIntensity"
:hover-intensity="hoverIntensity"
:enable-hover="enableHover"
:font-size="70"
font-family="Gochi Hand"
/>
</div>
</div>
<Customize>
<PreviewSlider title="Base Intensity" v-model="baseIntensity" :min="0" :max="1" :step="0.01"
@update:model-value="forceRerender" />
<PreviewSlider
title="Base Intensity"
v-model="baseIntensity"
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Hover Intensity" v-model="hoverIntensity" :min="0" :max="2" :step="0.01"
@update:model-value="forceRerender" />
<PreviewSlider
title="Hover Intensity"
v-model="hoverIntensity"
:min="0"
:max="2"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSwitch title="Enable Hover" :model-value="enableHover"
@update:model-value="(val: boolean) => { enableHover = val; forceRerender() }" />
<PreviewSwitch
title="Enable Hover"
:model-value="enableHover"
@update:model-value="
(val: boolean) => {
enableHover = val;
forceRerender();
}
"
/>
</Customize>
<PropTable :data="propData" />
@@ -38,23 +73,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 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 PreviewSwitch from '../../components/common/PreviewSwitch.vue'
import FuzzyText from '../../content/TextAnimations/FuzzyText/FuzzyText.vue'
import { fuzzyText } from '@/constants/code/TextAnimations/fuzzyTextCode'
import { useForceRerender } from '@/composables/useForceRerender'
import { ref } 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 PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import FuzzyText from '../../content/TextAnimations/FuzzyText/FuzzyText.vue';
import { fuzzyText } from '@/constants/code/TextAnimations/fuzzyTextCode';
import { useForceRerender } from '@/composables/useForceRerender';
const baseIntensity = ref(0.2)
const hoverIntensity = ref(0.5)
const enableHover = ref(true)
const baseIntensity = ref(0.2);
const hoverIntensity = ref(0.5);
const enableHover = ref(true);
const { rerenderKey, forceRerender } = useForceRerender()
const { rerenderKey, forceRerender } = useForceRerender();
const propData = [
{
@@ -67,7 +102,8 @@ const propData = [
name: 'fontSize',
type: 'number | string',
default: '"clamp(2rem, 8vw, 8rem)"',
description: 'Specifies the font size of the text. Accepts any valid CSS font-size value or a number (interpreted as pixels).'
description:
'Specifies the font size of the text. Accepts any valid CSS font-size value or a number (interpreted as pixels).'
},
{
name: 'fontWeight',
@@ -105,5 +141,5 @@ const propData = [
default: '0.5',
description: 'The fuzz intensity when the text is hovered.'
}
]
];
</script>