mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-04-21 17:44:39 -06:00
feat(TrueFocus): add defaultBlur prop for manualMode mouse leave behavior
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user