fix(website): Address PR review feedback for tooltip functionality

- Use onUnmounted for proper event listener cleanup instead of return function
- Move mouseenter event to tooltip-container to handle disabled button cases
- Remove duplicate CSS definition for .desktop-only class
- Ensure v-if condition is properly applied to mobile-only spacer div

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kazuki Yamada
2025-06-08 12:24:35 +09:00
parent 615a91642f
commit ceeb703d40

View File

@@ -4,7 +4,7 @@ import themeTomorrowUrl from 'ace-builds/src-noconflict/theme-tomorrow?url';
import themeTomorrowNightUrl from 'ace-builds/src-noconflict/theme-tomorrow_night?url'; import themeTomorrowNightUrl from 'ace-builds/src-noconflict/theme-tomorrow_night?url';
import { BarChart2, Copy, Download, GitFork, HeartHandshake, PackageSearch, Share, Star } from 'lucide-vue-next'; import { BarChart2, Copy, Download, GitFork, HeartHandshake, PackageSearch, Share, Star } from 'lucide-vue-next';
import { useData } from 'vitepress'; import { useData } from 'vitepress';
import { computed, onMounted, ref, watch } from 'vue'; import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { VAceEditor } from 'vue3-ace-editor'; import { VAceEditor } from 'vue3-ace-editor';
import type { PackResult } from '../api/client'; import type { PackResult } from '../api/client';
import { import {
@@ -73,6 +73,12 @@ const handleShare = async (event: Event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
// Only allow sharing on mobile devices with Web Share API support
if (!isMobile.value || !canShare.value) {
console.log('Share is only available on mobile devices');
return;
}
const success = await shareResult(props.result.content, props.result.format, props.result); const success = await shareResult(props.result.content, props.result.format, props.result);
if (success) { if (success) {
shared.value = true; shared.value = true;
@@ -125,18 +131,17 @@ const supportMessage = computed(() => ({
color: messages[currentMessageIndex.value].color, color: messages[currentMessageIndex.value].color,
})); }));
const handleResize = () => {
isMobile.value = window.innerWidth <= 768;
};
onMounted(() => { onMounted(() => {
isMobile.value = window.innerWidth <= 768; isMobile.value = window.innerWidth <= 768;
const handleResize = () => {
isMobile.value = window.innerWidth <= 768;
};
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
});
return () => { onUnmounted(() => {
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
};
}); });
</script> </script>
@@ -198,14 +203,13 @@ onMounted(() => {
Download Download
</button> </button>
<div v-if="canShare" class="mobile-only" style="flex-basis: 100%"></div> <div v-if="canShare" class="mobile-only" style="flex-basis: 100%"></div>
<div v-if="canShare" class="tooltip-container" ref="tooltipContainer"> <div v-if="canShare" class="tooltip-container" ref="tooltipContainer" @mouseenter="updateTooltipPosition">
<button <button
class="action-button" class="action-button"
@click="handleShare" @click="handleShare"
:class="{ shared }" :class="{ shared }"
:disabled="!isMobile" :disabled="!isMobile"
aria-label="Share output via mobile apps" aria-label="Share output via mobile apps"
@mouseenter="updateTooltipPosition"
> >
<Share :size="16" /> <Share :size="16" />
{{ shared ? 'Shared!' : 'Open with your app' }} {{ shared ? 'Shared!' : 'Open with your app' }}
@@ -454,10 +458,6 @@ dd {
.mobile-only { .mobile-only {
display: inline-flex; display: inline-flex;
} }
.desktop-only {
display: none;
}
} }
.tooltip-container { .tooltip-container {