106 lines
4.4 KiB
Vue
106 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { watch, ref } from 'vue';
|
|
|
|
interface Props {
|
|
isOpen: boolean;
|
|
documentTitle: string;
|
|
documentUrl: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const emit = defineEmits<{
|
|
close: [];
|
|
}>();
|
|
|
|
const copied = ref(false);
|
|
|
|
watch(() => props.isOpen, (isOpen) => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = 'unset';
|
|
}
|
|
});
|
|
|
|
const handleBackdropClick = (e: MouseEvent) => {
|
|
if (e.target === e.currentTarget) {
|
|
emit('close');
|
|
}
|
|
};
|
|
|
|
const handleDownload = () => {
|
|
window.open(props.documentUrl, '_blank');
|
|
};
|
|
|
|
const handleCopyLink = async () => {
|
|
const url = new URL(props.documentUrl, window.location.origin).href;
|
|
await navigator.clipboard.writeText(url);
|
|
copied.value = true;
|
|
setTimeout(() => { copied.value = false; }, 2000);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="isOpen"
|
|
class="fixed inset-0 bg-black/75 flex items-center justify-center z-50 p-4"
|
|
@click="handleBackdropClick"
|
|
>
|
|
<div
|
|
class="bg-white rounded-lg w-[95%] h-[95%] max-w-[1200px] max-h-[900px] flex flex-col shadow-2xl"
|
|
@click.stop
|
|
>
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between px-6 py-4 border-b bg-[#394053] rounded-t-lg">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<h2 class="text-lg font-semibold text-white">
|
|
{{ documentTitle }}
|
|
</h2>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
@click="handleCopyLink"
|
|
class="flex items-center gap-2 px-4 py-2 bg-[#7CAE7A] text-white rounded-md hover:bg-[#6b9c69] transition-colors text-sm font-medium"
|
|
>
|
|
<svg v-if="!copied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
|
</svg>
|
|
<svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
{{ copied ? '✓ Copied!' : 'Copy Link' }}
|
|
</button>
|
|
<button
|
|
@click="handleDownload"
|
|
class="flex items-center gap-2 px-4 py-2 bg-[#7CAE7A] text-white rounded-md hover:bg-[#6b9c69] transition-colors text-sm font-medium"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
Download
|
|
</button>
|
|
<button
|
|
@click="emit('close')"
|
|
class="flex items-center justify-center w-10 h-10 text-white hover:bg-white/10 rounded-md transition-colors"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PDF Content -->
|
|
<div class="flex-1 p-4 bg-gray-50">
|
|
<iframe
|
|
:src="`${documentUrl}#view=FitH&toolbar=1&navpanes=1&scrollbar=1`"
|
|
class="w-full h-full border-0 rounded-md bg-white"
|
|
:title="documentTitle"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|