Document Manager Plugin

import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/vue'
// ... other imports
import { DocumentManagerPluginPackage } from '@embedpdf/plugin-document-manager/vue'
 
const plugins = [
  // Register the document manager plugin first
  createPluginRegistration(DocumentManagerPluginPackage, {
    // Optional: Load documents automatically on initialization
    initialDocuments: [
      { url: 'https://example.com/document1.pdf' },
      { url: 'https://example.com/document2.pdf' },
    ],
    // Optional: Limit the maximum number of open documents
    maxDocuments: 10,
  }),
  // ... other plugins like Viewport, Scroll, Render, etc.
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
]

<script setup lang="ts">
import { DocumentContent } from '@embedpdf/plugin-document-manager/vue';
</script>
 
<template>
  <div v-if="!activeDocumentId">No document selected</div>
  <DocumentContent v-else :document-id="activeDocumentId" v-slot="{ isLoading, isError, isLoaded }">
    <LoadingSpinner v-if="isLoading" />
    <ErrorMessage v-if="isError" />
    
    <!-- Only render the heavy viewer components when loaded -->
    <Viewport v-if="isLoaded" :document-id="activeDocumentId">
      <!-- ... Scroller, etc ... -->
    </Viewport>
  </DocumentContent>
</template>

<script setup lang="ts">
import { useDocumentManagerCapability } from '@embedpdf/plugin-document-manager/vue';
 
const { provides: docManager } = useDocumentManagerCapability();
 
const handleOpenFile = async () => {
  // Opens the native system file picker
  // The plugin handles reading the buffer and creating the document
  await docManager.value?.openFileDialog();
};
 
const handleOpenUrl = () => {
  docManager.value?.openDocumentUrl({ 
    url: 'https://example.com/report.pdf',
    password: 'optional-password' 
  });
};
</script>
 
<template>
  <button @click="handleOpenFile">Open File</button>
</template>

<script setup lang="ts">
import { 
  useOpenDocuments, 
  useActiveDocument, 
  useDocumentManagerCapability 
} from '@embedpdf/plugin-document-manager/vue';
 
const documents = useOpenDocuments(); // Ref of all open document states
const { activeDocumentId } = useActiveDocument();
const { provides: docManager } = useDocumentManagerCapability();
 
const handleTabClick = (docId: string) => {
  docManager.value?.setActiveDocument(docId);
};
 
const handleClose = (e: Event, docId: string) => {
  e.stopPropagation();
  docManager.value?.closeDocument(docId);
};
</script>
 
<template>
  <div class="tabs">
    <div
      v-for="doc in documents"
      :key="doc.id"
      :class="{ active: doc.id === activeDocumentId }"
      @click="handleTabClick(doc.id)"
    >
      {{ doc.name }}
      <button @click="(e) => handleClose(e, doc.id)">x</button>
    </div>
  </div>
</template>