atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-04-22 01:54:38 -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
src/demo/TextAnimations/TrueFocusDemo.vue
+72 -48
View File
@@ -13,17 +13,41 @@
<PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
<PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px"
@update:model-value="forceRerender" />
<PreviewSlider
title="Blur Amount"
v-model="blurAmount"
:min="0"
:max="15"
:step="0.5"
value-unit="px"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Animation Duration" v-model="animationDuration" :min="0.1" :max="3" :step="0.1"
value-unit="s" :disabled="!manualMode" @update:model-value="forceRerender" />
<PreviewSlider
title="Animation Duration"
v-model="animationDuration"
:min="0.1"
:max="3"
:step="0.1"
value-unit="s"
:disabled="!manualMode"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Pause Between Animations" v-model="pauseBetweenAnimations" :min="0" :max="5" :step="0.5"
value-unit="s" :disabled="manualMode" @update:model-value="forceRerender" />
<PreviewSlider
title="Pause Between Animations"
v-model="pauseBetweenAnimations"
:min="0"
:max="5"
:step="0.5"
value-unit="s"
:disabled="manualMode"
@update:model-value="forceRerender"
/>
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['framer-motion']" />
</template>
@@ -39,19 +63,19 @@
</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 Dependencies from "../../components/code/Dependencies.vue";
import Customize from "../../components/common/Customize.vue";
import PreviewColor from "../../components/common/PreviewColor.vue";
import PreviewSlider from "../../components/common/PreviewSlider.vue";
import PreviewSwitch from "../../components/common/PreviewSwitch.vue";
import TrueFocus from "../../content/TextAnimations/TrueFocus/TrueFocus.vue";
import { trueFocus } from "../../constants/code/TextAnimations/trueFocusCode";
import { useForceRerender } from "@/composables/useForceRerender";
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 Dependencies from '../../components/code/Dependencies.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewColor from '../../components/common/PreviewColor.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import TrueFocus from '../../content/TextAnimations/TrueFocus/TrueFocus.vue';
import { trueFocus } from '../../constants/code/TextAnimations/trueFocusCode';
import { useForceRerender } from '@/composables/useForceRerender';
const { rerenderKey: key, forceRerender } = useForceRerender();
@@ -59,59 +83,59 @@ const manualMode = ref(false);
const blurAmount = ref(5);
const animationDuration = ref(0.5);
const pauseBetweenAnimations = ref(1);
const borderColor = ref("#27FF64");
const borderColor = ref('#27FF64');
const config = computed(() => ({
sentence: "True Focus",
sentence: 'True Focus',
manualMode: manualMode.value,
blurAmount: blurAmount.value,
borderColor: borderColor.value,
animationDuration: animationDuration.value,
pauseBetweenAnimations: pauseBetweenAnimations.value,
pauseBetweenAnimations: pauseBetweenAnimations.value
}));
const propData = [
{
name: "sentence",
type: "string",
name: 'sentence',
type: 'string',
default: "'True Focus'",
description: "The text to display with the focus animation.",
description: 'The text to display with the focus animation.'
},
{
name: "manualMode",
type: "boolean",
default: "false",
description: "Disables automatic animation when set to true.",
name: 'manualMode',
type: 'boolean',
default: 'false',
description: 'Disables automatic animation when set to true.'
},
{
name: "blurAmount",
type: "number",
default: "5",
description: "The amount of blur applied to non-active words.",
name: 'blurAmount',
type: 'number',
default: '5',
description: 'The amount of blur applied to non-active words.'
},
{
name: "borderColor",
type: "string",
name: 'borderColor',
type: 'string',
default: "'green'",
description: "The color of the focus borders.",
description: 'The color of the focus borders.'
},
{
name: "glowColor",
type: "string",
name: 'glowColor',
type: 'string',
default: "'rgba(0, 255, 0, 0.6)'",
description: "The color of the glowing effect on the borders.",
description: 'The color of the glowing effect on the borders.'
},
{
name: "animationDuration",
type: "number",
default: "0.5",
description: "The duration of the animation for each word.",
name: 'animationDuration',
type: 'number',
default: '0.5',
description: 'The duration of the animation for each word.'
},
{
name: "pauseBetweenAnimations",
type: "number",
default: "1",
description: "Time to pause between focusing on each word (in auto mode).",
},
name: 'pauseBetweenAnimations',
type: 'number',
default: '1',
description: 'Time to pause between focusing on each word (in auto mode).'
}
];
</script>