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/Animations/FadeContentDemo.vue
View File

@@ -17,6 +17,7 @@
>
<div class="demo-content">
<h4>Fade Content</h4>
<p>It will fade in when it enters the viewport.</p>
</div>
</FadeContent>
@@ -25,17 +26,41 @@
<Customize>
<PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
<PreviewSlider title="Duration (ms)" v-model="duration" :min="100" :max="3000" :step="100"
@update:model-value="forceRerender" />
<PreviewSlider
title="Duration (ms)"
v-model="duration"
:min="100"
:max="3000"
:step="100"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Delay (ms)" v-model="delay" :min="0" :max="1000" :step="50"
@update:model-value="forceRerender" />
<PreviewSlider
title="Delay (ms)"
v-model="delay"
:min="0"
:max="1000"
:step="50"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1"
@update:model-value="forceRerender" />
<PreviewSlider
title="Threshold"
v-model="threshold"
:min="0.1"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1"
@update:model-value="forceRerender" />
<PreviewSlider
title="Initial Opacity"
v-model="initialOpacity"
:min="0"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
</Customize>
<PropTable :data="propData" />
@@ -53,36 +78,41 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import TabbedLayout from '../../components/common/TabbedLayout.vue'
import RefreshButton from '../../components/common/RefreshButton.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 PreviewSwitch from '../../components/common/PreviewSwitch.vue'
import PreviewSlider from '../../components/common/PreviewSlider.vue'
import FadeContent from '../../content/Animations/FadeContent/FadeContent.vue'
import { fadeContent } from '@/constants/code/Animations/fadeContentCode'
import { useForceRerender } from '@/composables/useForceRerender'
import { ref } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import RefreshButton from '../../components/common/RefreshButton.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 PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import FadeContent from '../../content/Animations/FadeContent/FadeContent.vue';
import { fadeContent } from '@/constants/code/Animations/fadeContentCode';
import { useForceRerender } from '@/composables/useForceRerender';
const blur = ref(true)
const duration = ref(1000)
const delay = ref(200)
const threshold = ref(0.1)
const initialOpacity = ref(0)
const easing = ref('ease-out')
const { rerenderKey, forceRerender } = useForceRerender()
const blur = ref(true);
const duration = ref(1000);
const delay = ref(200);
const threshold = ref(0.1);
const initialOpacity = ref(0);
const easing = ref('ease-out');
const { rerenderKey, forceRerender } = useForceRerender();
const propData = [
{ name: 'blur', type: 'boolean', default: 'false', description: 'Enable blur effect during fade animation.' },
{ name: 'duration', type: 'number', default: '1000', description: 'Animation duration in milliseconds.' },
{ name: 'easing', type: 'string', default: '"ease-out"', description: 'CSS easing function for the animation.' },
{ name: 'delay', type: 'number', default: '0', description: 'Delay before animation starts in milliseconds.' },
{ name: 'threshold', type: 'number', default: '0.1', description: 'Intersection threshold to trigger animation (0-1).' },
{
name: 'threshold',
type: 'number',
default: '0.1',
description: 'Intersection threshold to trigger animation (0-1).'
},
{ name: 'initialOpacity', type: 'number', default: '0', description: 'Initial opacity before animation (0-1).' },
{ name: 'className', type: 'string', default: '""', description: 'Additional CSS classes for styling.' }
]
];
</script>
<style scoped>
@@ -114,4 +144,4 @@ const propData = [
max-width: 25ch;
line-height: 1.6;
}
</style>
</style>