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;
index?: Array<number>;
syncGroup?: string;
defaultBlur?: boolean;
}
const props = withDefaults(defineProps<TrueFocusProps>(), {
@@ -21,7 +22,8 @@ const props = withDefaults(defineProps<TrueFocusProps>(), {
borderColor: 'green',
glowColor: 'rgba(0, 255, 0, 0.6)',
animationDuration: 0.5,
pauseBetweenAnimations: 1
pauseBetweenAnimations: 1,
defaultBlur: true
});
const words = computed(() => props.sentence.split(' '));
@@ -72,7 +74,11 @@ const handleMouseEnter = (index: number) => {
const handleMouseLeave = () => {
if (props.manualMode) {
currentIndex.value = lastActiveIndex.value || 0;
if (props.defaultBlur) {
currentIndex.value = lastActiveIndex.value || 0;
return;
}
currentIndex.value = -1;
}
};
@@ -128,6 +134,7 @@ onUnmounted(() => {
if (props.syncGroup) unregisterSyncGroup(props.syncGroup);
});
</script>
<script lang="ts">
interface SyncGroupState {
index: Ref<number>;
@@ -16,6 +16,8 @@
<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
@@ -146,6 +148,13 @@ const propData = [
default: 'undefined',
description:
'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>