Issue with pdf-viewer-interface url generation

.npmrc

@@ -0,0 +1,3 @@
+engine-strict=true
+shell-emulator=true
+save-prefix=''

contributors.yml

@@ -6,3 +6,4 @@
 - timio23
 - Dominic-Marcelino
 - ukmadlz
+- carlosgonzalezpdn

packages/pdf-viewer-interface/package.json

@@ -34,6 +34,7 @@
 		"link": "directus-extension link"
 	},
 	"devDependencies": {
+		"@directus-labs/utils": "workspace:*",
 		"@directus/extensions-sdk": "^11.0.8",
 		"typescript": "^5.4.5",
 		"vue": "^3.4.27",

packages/pdf-viewer-interface/src/index.ts

@@ -29,15 +29,15 @@ export default defineInterface({
 					},
 				},
 			},
-			{
-				field: 'button_label',
-				name: 'Button Label',
-				meta: {
-					width: 'half',
-					interface: 'system-input-translated-string',
-					options: { placeholder: defaultButtonLabel },
-				},
-			},
+            {
+                field: "button_label",
+                name: "Button Label",
+                meta: {
+                    width: "full",
+                    interface: "system-input-translated-string",
+                    options: { placeholder: defaultButtonLabel },
+                },
+            },
 		];
 	},
 });

packages/pdf-viewer-interface/src/interface.vue

@@ -22,7 +22,7 @@ const { fileURL, fileIsValid } = useSelectedFile();
 function useSelectedFile() {
 	const fieldValues = inject('values', ref<Record<string, any>>({}));
 
-	const fileID = computed(() => {
+		const fileID = computed(() => {
 		if (!props.file_field)
 			return null;
 		return fieldValues.value[props.file_field] ?? null;
@@ -31,7 +31,8 @@ function useSelectedFile() {
 	const fileURL = computed(() => {
 		if (!fileID.value)
 			return null;
-		return getAssetUrl(fileID.value);
+
+		return getAssetUrl(fileID.value.id ?? fileID.value);
 	});
 
 	const fileIsValid = computed(() => !!fileID.value);

packages/pdf-viewer-interface/src/pdf-viewer.vue

@@ -3,7 +3,8 @@ import type { Ref } from 'vue';
 import { ref } from 'vue';
 import VuePdfEmbed from 'vue-pdf-embed';
 // essential styles
-import 'vue-pdf-embed/dist/style/index.css';
+import 'vue-pdf-embed/dist/styles/annotationLayer.css'
+import 'vue-pdf-embed/dist/styles/textLayer.css'
 
 defineProps<{ url: string }>();