Refactor TabBar to use document manager capability

Replaces the onOpenFile prop in TabBar with direct usage of useDocumentManagerCapability's provides.openFileDialog. Simplifies Application.vue by removing the onOpenFile handler and streamlines file dialog invocation.

Author: bobsingor

examples/vue-vuetify/src/components/Application.vue

@@ -178,15 +178,6 @@ const handleInitialized = async (registry: PluginRegistry) => {
                   :activeDocumentId="activeDocumentId"
                   :onSelect="actions.select"
                   :onClose="actions.close"
-                  :onOpenFile="
-                    () => {
-                      if (!registry) return;
-                      registry
-                        .getPlugin<DocumentManagerPlugin>(DocumentManagerPlugin.id)
-                        ?.provides()
-                        ?.openFileDialog();
-                    }
-                  "
                 />
 
                 <v-layout class="fill-height" style="flex: 1">

examples/vue-vuetify/src/components/TabBar.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import type { DocumentState } from '@embedpdf/core';
+import { useDocumentManagerCapability } from '@embedpdf/plugin-document-manager/vue';
 
 interface TabBarProps {
   documentStates: DocumentState[];
   activeDocumentId: string | null;
   onSelect: (id: string) => void;
   onClose: (id: string) => void;
-  onOpenFile: () => void;
 }
 
+const { provides } = useDocumentManagerCapability();
+
 const props = defineProps<TabBarProps>();
 </script>
 
@@ -52,7 +54,7 @@ const props = defineProps<TabBarProps>();
         size="small"
         variant="text"
         class="add-tab-btn"
-        @click="props.onOpenFile"
+        @click="provides?.openFileDialog()"
         aria-label="Open File"
         title="Open File"
       />