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

143
src/demo/TextAnimations/SplitTextDemo.vue
View File

@@ -5,25 +5,56 @@
<div class="demo-container">
<RefreshButton @refresh="forceRerender" />
<SplitText :key="rerenderKey" text="Hello, Vue!" :delay="delay" :duration="duration" :ease="ease"
:split-type="splitType" :threshold="threshold" class="split-text-demo-text"
@animation-complete="() => { showCallback && showToast() }" />
<SplitText
:key="rerenderKey"
text="Hello, Vue!"
:delay="delay"
:duration="duration"
:ease="ease"
:split-type="splitType"
:threshold="threshold"
class="split-text-demo-text"
@animation-complete="
() => {
showCallback && showToast();
}
"
/>
</div>
<Customize>
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
<PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10"
@update:model-value="forceRerender" />
<PreviewSlider
title="Stagger Delay (ms)"
v-model="delay"
:min="10"
:max="500"
:step="10"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1"
@update:model-value="forceRerender" />
<PreviewSlider
title="Duration (s)"
v-model="duration"
:min="0.1"
:max="2"
: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="Threshold"
v-model="threshold"
:min="0.1"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" />
</template>
@@ -39,37 +70,37 @@
</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 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 PreviewSwitch from '../../components/common/PreviewSwitch.vue'
import PreviewSlider from '../../components/common/PreviewSlider.vue'
import SplitText from '../../content/TextAnimations/SplitText/SplitText.vue'
import { splitText } from '@/constants/code/TextAnimations/splitTextCode'
import { useToast } from 'primevue/usetoast'
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 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 PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import SplitText from '../../content/TextAnimations/SplitText/SplitText.vue';
import { splitText } from '@/constants/code/TextAnimations/splitTextCode';
import { useToast } from 'primevue/usetoast';
import { useForceRerender } from '@/composables/useForceRerender';
const delay = ref(10)
const duration = ref(2)
const ease = ref('elastic.out(1, 0.3)')
const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars')
const threshold = ref(0.1)
const showCallback = ref(true)
const toast = useToast()
const { rerenderKey, forceRerender } = useForceRerender()
const delay = ref(10);
const duration = ref(2);
const ease = ref('elastic.out(1, 0.3)');
const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars');
const threshold = ref(0.1);
const showCallback = ref(true);
const toast = useToast();
const { rerenderKey, forceRerender } = useForceRerender();
const showToast = () => {
toast.add({
severity: 'secondary',
summary: 'Animation Finished!',
life: 3000
})
}
});
};
const propData = [
{ name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
@@ -77,12 +108,42 @@ const propData = [
{ name: 'delay', type: 'number', default: '100', description: 'Delay between animations for each letter (in ms).' },
{ name: 'duration', type: 'number', default: '0.6', description: 'Duration of each letter animation (in seconds).' },
{ name: 'ease', type: 'string', default: '"power3.out"', description: 'GSAP easing function for the animation.' },
{ name: 'splitType', type: 'string', default: '"chars"', description: 'Split type: "chars", "words", "lines", or "words, chars".' },
{ name: 'from', type: 'object', default: '{ opacity: 0, y: 40 }', description: 'Initial GSAP properties for each letter/word.' },
{ name: 'to', type: 'object', default: '{ opacity: 1, y: 0 }', description: 'Target GSAP properties for each letter/word.' },
{ name: 'threshold', type: 'number', default: '0.1', description: 'Intersection threshold to trigger the animation (0-1).' },
{
name: 'splitType',
type: 'string',
default: '"chars"',
description: 'Split type: "chars", "words", "lines", or "words, chars".'
},
{
name: 'from',
type: 'object',
default: '{ opacity: 0, y: 40 }',
description: 'Initial GSAP properties for each letter/word.'
},
{
name: 'to',
type: 'object',
default: '{ opacity: 1, y: 0 }',
description: 'Target GSAP properties for each letter/word.'
},
{
name: 'threshold',
type: 'number',
default: '0.1',
description: 'Intersection threshold to trigger the animation (0-1).'
},
{ name: 'rootMargin', type: 'string', default: '"-100px"', description: 'Root margin for the ScrollTrigger.' },
{ name: 'textAlign', type: 'string', default: '"center"', description: 'Text alignment: "left", "center", "right", etc.' },
{ name: 'onLetterAnimationComplete', type: 'function', default: 'undefined', description: 'Callback function when all animations complete.' }
]
</script>
{
name: 'textAlign',
type: 'string',
default: '"center"',
description: 'Text alignment: "left", "center", "right", etc.'
},
{
name: 'onLetterAnimationComplete',
type: 'function',
default: 'undefined',
description: 'Callback function when all animations complete.'
}
];
</script>