Add "props" documentation, implement container queries, and update version to 1.0.10

Author: tuttarealstep

docs/.vitepress/config.ts

@@ -29,6 +29,7 @@ export default defineConfig({
         text: "Introduction",
         items: [
           { text: "Getting Started", link: "/guide/getting-started" },
+          { text: "Props", link: "/guide/props" },
           { text: "Composables", link: "/guide/composables" },
         ],
       },

docs/components/PdfViewer.vue

@@ -10,6 +10,8 @@ const vuepdfjs = useTemplateRef<typeof VuePDFjs>('vuepdfjs')
 const pages = ref(0);
 const hideToolbar = ref(false);
 const hideSidebar = ref(false);
+const useContainerQuery = ref(false)
+const playgroundWidth = ref(100)
 
 const options = reactive<NonNullable<VuePDFjsProps['options']>>({
     locale: {
@@ -76,24 +78,33 @@ const onPdfAppLoaded = () => {
 }
 
 const pdf = 'https://raw.githubusercontent.com/mozilla/pdf.js/v4.10.38/web/compressed.tracemonkey-pldi-09.pdf'
+const source = ref(pdf)
 </script>
 
 <template>
     We have {{ pages }} pages in this document.
 
-    <div>
+    <div style="margin-bottom: 10px;">
         <input type="checkbox" v-model="hideToolbar" /> Hide Toolbar
         <input type="checkbox" v-model="hideSidebar" /> Hide Sidebar
-        <button type="button" class="custom-button">
+        <button type="button" class="custom-button" @click="source = `invalid${new Date().getTime()}.pdf`">
             Load Invalid PDF
         </button>
+        <input type="checkbox" v-model="useContainerQuery" /> Use container query
+        <div>
+            <label>Playground Width: {{ playgroundWidth }}%</label>
+            <input type="range" v-model="playgroundWidth" min="0" max="100" />
+        </div>
+    </div>
+    <div id="playground-container" :style="{ width: playgroundWidth + '%' }">
+        <VuePDFjs ref="vuepdfjs" :source :options="options" :source-options="sourceOptions" :use-container-query
+            @pdf-app:loaded="onPdfAppLoaded" />
     </div>
-    <VuePDFjs ref="vuepdfjs" :source="pdf" :options="options" :source-options="sourceOptions"
-        @pdf-app:loaded="onPdfAppLoaded" />
 </template>
 
 <style>
-.pdf_viewer {
+.pdf_viewer,
+#playground-container {
     height: 650px;
     width: 100%;
     overflow: hidden;
@@ -109,4 +120,8 @@ const pdf = 'https://raw.githubusercontent.com/mozilla/pdf.js/v4.10.38/web/compr
     border-radius: 5px;
     cursor: pointer;
 }
+
+.custom-button:hover {
+    background-color: #0056b3;
+}
 </style>

docs/guide/props.md

@@ -0,0 +1,28 @@
+# Props
+
+## source
+
+- **Type:** `PDFSource | PDFSourceWithOptions | PDFDocumentProxy`
+- **Description:** The source of the PDF file.
+- **Optional**
+
+## sourceOptions
+
+- **Type:** `PDFSourceOptions`
+- **Description:** The options for the PDF source, including error handling.
+
+## useContainerQuery
+
+- **Type:** `boolean`
+- **Default:** `true`
+- **Description:** If true, the component uses container queries to adjust the layout based on the container size. The pdf.js viewer only use media queries to adjust the layout based on the window size.
+
+## options
+
+- **Type:** `object`
+- **Description:** Options to configure the PDF viewer.
+  - **locale:**
+    - **code:** `string` (required) - Locale code.
+    - **ftl:** `string` (required) - Locale FTL text.
+  - **toolbar:** `ToolbarContainerProps`
+  - **sidebar:** `SidebarContainerProps`

packages/vue-pdfjs-playground/src/App.vue

@@ -11,6 +11,8 @@ const vuepdfjs = useTemplateRef<InstanceType<typeof VuePDFjs>>('vuepdfjs')
 
 const hideToolbar = ref(false)
 const hideSidebar = ref(false)
+const useContainerQuery = ref(false)
+const playgroundWidth = ref(100)
 
 const options = reactive<NonNullable<VuePDFjsProps['options']>>({
   locale: {
@@ -88,7 +90,6 @@ const source = ref<any>()
 watch(document, (value) => {
   source.value = value
 })
-
 </script>
 
 <template>
@@ -98,12 +99,17 @@ watch(document, (value) => {
     <button type="button" class="custom-button" @click="source = `invalid${new Date().getTime()}.pdf`">
       Load Invalid PDF
     </button>
+    <input type="checkbox" v-model="useContainerQuery" /> Use container query
+    <div>
+      <label>Playground Width: {{ playgroundWidth }}%</label>
+      <input type="range" v-model="playgroundWidth" min="0" max="100" />
+    </div>
   </div>
   <div>
     We have {{ vuepdfjs?.pdfPages }} pages in this document.
   </div>
-  <div id="playground">
-    <VuePDFjs ref="vuepdfjs" :source :options="options" :source-options="sourceOptions"
+  <div id="playground" :style="{ width: playgroundWidth + '%' }">
+    <VuePDFjs ref="vuepdfjs" :source :options="options" :source-options="sourceOptions" :use-container-query
       @pdf-app:loaded="onPdfAppLoaded" />
   </div>
 </template>

packages/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tuttarealstep/vue-pdf.js",
   "description": "A Vue component for displaying PDF files using the standard `pdf.js` viewer. This package provides a simple and powerful integration to embed PDF viewers in Vue applications.",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "private": false,
   "type": "module",
   "author": "Stefano Valenzano (https://github.com/tuttarealstep)",

packages/vue/src/assets/scss/main.scss

@@ -25,4 +25,50 @@
     [hidden] {
         display: none !important;
     }
+
+    &--container-query {
+
+        .appContainer {
+            container-name: app-container;
+            container-type: inline-size;
+        }
+
+        @container app-container (max-width: 840px) {
+            #sidebarContainer {
+                background-color: var(--sidebar-narrow-bg-color);
+            }
+
+            #outerContainer.sidebarOpen #viewerContainer {
+                inset-inline-start: 0 !important;
+            }
+        }
+
+        @container app-container (max-width: 750px) {
+            .hiddenMediumView {
+                display: none !important;
+            }
+
+            .visibleMediumView:not(.hidden, [hidden]) {
+                display: inline-block !important;
+            }
+        }
+
+        @container app-container (max-width: 690px) {
+
+            .hiddenSmallView,
+            .hiddenSmallView * {
+                display: none !important;
+            }
+
+            #toolbarContainer #toolbarViewer .toolbarButtonSpacer {
+                width: 0;
+            }
+        }
+
+        @container app-container (max-width: 560px) {
+            #scaleSelectContainer {
+                display: none;
+            }
+        }
+    }
 }

packages/vue/src/components/VuePDFjs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import '../assets/scss/main.scss'
 
-import { onMounted, onUnmounted, ref, shallowRef, provide, watch } from 'vue';
+import { onMounted, onUnmounted, ref, shallowRef, provide, watch, onUpdated, nextTick } from 'vue';
 import { initViewer, PDFViewerApplicationOptions } from '../scripts/viewer';
 
 import OuterContainer from './OuterContainer.vue';
@@ -17,8 +17,21 @@ import { sidebarOptionsKey, toolbarOptionsKey } from '@/keys';
 import { SidebarContainerProps } from './SidebarContainer.vue';
 
 export interface VuePDFjsProps {
+  /**
+   * The source of the PDF file.
+   */
   source?: PDFSource | PDFSourceWithOptions | PDFDocumentProxy
+  /**
+   * The options for the PDF source.
+   */
   sourceOptions?: PDFSourceOptions,
+  /**
+   * If true, the component will use the container query to adjust the viewer height.
+   */
+  useContainerQuery?: boolean,
+  /**
+   * The options for the PDF viewer.
+   */
   options?: {
     locale?: {
       code: string,
@@ -30,7 +43,8 @@ export interface VuePDFjsProps {
 }
 
 const props = withDefaults(defineProps<VuePDFjsProps>(), {
-  source: null
+  source: null,
+  useContainerQuery: true,
 });
 
 const emit = defineEmits<{
@@ -161,6 +175,25 @@ async function openSource(source: PDFSource | PDFSourceWithOptions | PDFDocument
   }
 }
 
+//When the component is updated, we need to fix the viewer because sometimes the css variables are not applied correctly
+const fixViewer = () => {
+  // We need to mimic the #updateContainerHeightCss because is a private method
+  if (!pdfApp.value) {
+    return;
+  }
+
+  try {
+    const pdfAppViewer = pdfApp.value.pdfViewer;
+    const containerHeight = pdfAppViewer.container.clientHeight;
+
+    if (containerHeight !== pdfAppViewer.previousContainerHeight) {
+      container.value?.style.setProperty("--viewer-container-height", `${containerHeight}px`);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 watch(() => props.source, async (source) => {
   await openSource(source);
 })
@@ -172,9 +205,23 @@ onMounted(async () => {
     await openSource(props.source);
 })
 
+onUpdated(async () => {
+  //Wait for the next tick to fix the viewer
+  nextTick(() => {
+    fixViewer();
+  })
+})
+
 onUnmounted(async () => {
-  if (pdfApp.value)
-    await pdfApp.value.close();
+  if (!pdfApp.value) {
+    return;
+  }
+
+  // Unbind events
+  pdfApp.value.unbindEvents();
+  pdfApp.value.unbindWindowEvents();
+
+  await pdfApp.value.close();
 })
 
 defineExpose({
@@ -187,7 +234,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="vue-pdfjs">
+  <div class="vue-pdfjs" :class="{ 'vue-pdfjs--container-query': props.useContainerQuery }">
     <div class="appContainer" ref="container" id="appContainer">
       <OuterContainer />
       <PrintContainer />