feat(TrueFocus): add defaultBlur prop for manualMode mouse leave behavior

This commit is contained in:
Jian Qi
2026-02-25 16:58:23 +08:00
parent 9ba03850e9
commit a6013535d5
2 changed files with 18 additions and 2 deletions
@@ -12,6 +12,7 @@ interface TrueFocusProps {
pauseBetweenAnimations?: number; pauseBetweenAnimations?: number;
index?: Array<number>; index?: Array<number>;
syncGroup?: string; syncGroup?: string;
defaultBlur?: boolean;
} }
const props = withDefaults(defineProps<TrueFocusProps>(), { const props = withDefaults(defineProps<TrueFocusProps>(), {
@@ -21,7 +22,8 @@ const props = withDefaults(defineProps<TrueFocusProps>(), {
borderColor: 'green', borderColor: 'green',
glowColor: 'rgba(0, 255, 0, 0.6)', glowColor: 'rgba(0, 255, 0, 0.6)',
animationDuration: 0.5, animationDuration: 0.5,
pauseBetweenAnimations: 1 pauseBetweenAnimations: 1,
defaultBlur: true
}); });
const words = computed(() => props.sentence.split(' ')); const words = computed(() => props.sentence.split(' '));
@@ -72,7 +74,11 @@ const handleMouseEnter = (index: number) => {
const handleMouseLeave = () => { const handleMouseLeave = () => {
if (props.manualMode) { if (props.manualMode) {
if (props.defaultBlur) {
currentIndex.value = lastActiveIndex.value || 0; currentIndex.value = lastActiveIndex.value || 0;
return;
}
currentIndex.value = -1;
} }
}; };
@@ -128,6 +134,7 @@ onUnmounted(() => {
if (props.syncGroup) unregisterSyncGroup(props.syncGroup); if (props.syncGroup) unregisterSyncGroup(props.syncGroup);
}); });
</script> </script>
<script lang="ts"> <script lang="ts">
interface SyncGroupState { interface SyncGroupState {
index: Ref<number>; index: Ref<number>;
@@ -16,6 +16,8 @@
<PreviewSwitch title="Apply Sync Group" v-model="syncMode" /> <PreviewSwitch title="Apply Sync Group" v-model="syncMode" />
<PreviewSwitch title="Default Blur" v-model="defaultBlur" />
<PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px" /> <PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px" />
<PreviewSlider <PreviewSlider
@@ -146,6 +148,13 @@ const propData = [
default: 'undefined', default: 'undefined',
description: description:
'A group identifier. All instances sharing the same syncGroup will stay in sync, hovering or animating one will reflect on all others.' 'A group identifier. All instances sharing the same syncGroup will stay in sync, hovering or animating one will reflect on all others.'
},
{
name: 'defaultBlur',
type: 'boolean',
default: 'true',
description:
'In manualMode, determines behavior on mouse leave: true restores focus to the last hovered word, false clears all blur.'
} }
]; ];
</script> </script>