Quasar demo for embedpdf

examples/vue-quasar/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

examples/vue-quasar/.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

examples/vue-quasar/.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/vue-quasar/README.md

@@ -0,0 +1,118 @@
+<div align="center">
+  <a href="https://www.embedpdf.com">
+    <img alt="EmbedPDF logo" src="https://www.embedpdf.com/logo-192.png" height="96">
+  </a>
+
+  <h1>EmbedPDF</h1>
+
+  <!-- Badges -->
+
+<a href="https://github.com/embedpdf/embed-pdf-viewer/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/npm/l/@embedpdf/pdfium.svg?style=for-the-badge&labelColor=000000"></a>
+<a href="https://github.com/embedpdf/embed-pdf-viewer/discussions"><img alt="Join the community on GitHub" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&labelColor=000000"></a>
+
+</div>
+
+# Vue Quasar PDF Viewer Example
+
+This example shows how to build a fully‑featured PDF viewer with **EmbedPDF**, **Vue 3** and **Quasar 2**. It demonstrates how to combine EmbedPDF’s plugin system with Quasar components to create a polished reading experience that feels right at home in any Vue + Quasar project.
+
+- **Live demo:** _(coming soon)_
+- **Docs:** [https://www.embedpdf.com](https://www.embedpdf.com)
+
+---
+
+## Key features on display
+
+| Feature                                                    | Plugin(s)                                                                         |
+| ---------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| Virtualised scrolling with smooth page rendering           | `@embedpdf/plugin-scroll` + `@embedpdf/plugin-render` + `@embedpdf/plugin-tiling` |
+| Zoom controls (fit page, fit width, marquee zoom, presets) | `@embedpdf/plugin-zoom`                                                           |
+| Pan/hand tool                                              | `@embedpdf/plugin-pan`                                                            |
+| Rotate pages                                               | `@embedpdf/plugin-rotate`                                                         |
+| Single and spread layouts                                  | `@embedpdf/plugin-spread`                                                         |
+| In‑document text search                                    | `@embedpdf/plugin-search`                                                         |
+| Thumbnail sidebar navigation                               | `@embedpdf/plugin-thumbnail`                                                      |
+| Annotation tools (text, shapes, stamp)                     | `@embedpdf/plugin-annotation`                                                     |
+| Redaction tools (text selection, marquee)                  | `@embedpdf/plugin-redaction`                                                      |
+| File picker, download & print                              | `@embedpdf/plugin-loader`, `@embedpdf/plugin-export`, `@embedpdf/plugin-print`    |
+| Fullscreen support                                         | `@embedpdf/plugin-fullscreen`                                                     |
+
+The UI around these plugins is built with Quasar’s `QHeader`, `QDrawer`, `QMenu`, `QBtn`, and companion components. On mobile, the side drawers collapse into a bottom-sheet style `QDialog` for a more native feel.
+
+---
+
+## Quick start
+
+> **Prerequisites**
+>
+> - Node 18 or newer
+> - **pnpm** 10 (recommended) or a recent pnpm 8/9
+
+1.  **Clone the repo** (or your fork) and install dependencies:
+
+    ```bash
+    git clone https://github.com/embedpdf/embed-pdf-viewer.git
+    cd embed-pdf-viewer
+    pnpm install
+    ```
+
+2.  **Build the core packages** once so that the example can import them:
+
+    ```bash
+    pnpm run build --filter "./packages/*"
+    # or keep them rebuilt automatically while you work:
+    pnpm watch build --filter "./packages/*"
+    ```
+
+3.  **Run the example dev server**:
+
+    ```bash
+    pnpm --filter @embedpdf/example-vue-quasar run dev
+    ```
+
+    Vite will start on [http://localhost:3000](http://localhost:3000) and open the browser automatically.
+
+---
+
+## Building a production bundle
+
+To create an optimized build (under `examples/vue-quasar/dist`):
+
+```bash
+pnpm --filter @embedpdf/example-vue-quasar run build
+```
+
+The output is a static site you can deploy to any CDN or static host.
+
+---
+
+## Folder layout
+
+```
+examples/vue-quasar
+├── public/              # Static assets (favicon)
+└── src/
+    ├── components/      # Quasar‑based UI parts (Toolbar, Search, …)
+    │   └── drawer-system/ # Reusable logic for side drawers/bottom sheets
+    ├── plugins/         # Quasar plugin setup
+    ├── App.vue          # Root Vue component
+    ├── Application.vue  # Main viewer shell and plugin wiring
+    └── main.ts          # Vue entry + theming
+```
+
+The PDFium WebAssembly bundle is loaded automatically by the `usePdfiumEngine` hook in `src/Application.vue`, which passes it to EmbedPDF’s **WebWorkerEngine**.
+
+---
+
+## Customisation tips
+
+- **Swap icons or colours:** The UI uses standard Quasar components and props, so styling tweaks are straightforward.
+- **Add or remove plugins:** Open `src/Application.vue` and edit the `plugins` array.
+
+For deep dives, check the [EmbedPDF documentation](https://www.embedpdf.com) and the source of this example.
+
+---
+
+## License
+
+Example code is released under the MIT license, the same as EmbedPDF itself.

examples/vue-quasar/components.d.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {};
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AnnotationSelectionMenu: typeof import('./src/components/AnnotationSelectionMenu.vue')['default']
+    AnnotationToolbar: typeof import('./src/components/AnnotationToolbar.vue')['default']
+    Application: typeof import('./src/components/Application.vue')['default']
+    Drawer: typeof import('./src/components/drawer-system/Drawer.vue')['default']
+    DrawerProvider: typeof import('./src/components/drawer-system/DrawerProvider.vue')['default']
+    DrawerToggleButton: typeof import('./src/components/drawer-system/DrawerToggleButton.vue')['default']
+    PageControls: typeof import('./src/components/PageControls.vue')['default']
+    PrintDialog: typeof import('./src/components/PrintDialog.vue')['default']
+    RedactionSelectionMenu: typeof import('./src/components/RedactionSelectionMenu.vue')['default']
+    RedactToolbar: typeof import('./src/components/RedactToolbar.vue')['default']
+    Search: typeof import('./src/components/Search.vue')['default']
+    Sidebar: typeof import('./src/components/Sidebar.vue')['default']
+    Toolbar: typeof import('./src/components/Toolbar.vue')['default']
+    ZoomControls: typeof import('./src/components/ZoomControls.vue')['default']
+  }
+}

examples/vue-quasar/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/vue-quasar/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EmbedPDF + Vue + Quasar</title>
+  </head>
+  <body>
+    <div id="app" style="height: 100dvh;"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/vue-quasar/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@embedpdf/example-vue-quasar",
+  "private": true,
+  "type": "module",
+  "license": "MIT",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "@embedpdf/core": "workspace:*",
+    "@embedpdf/engines": "workspace:*",
+    "@embedpdf/models": "workspace:*",
+    "@embedpdf/plugin-loader": "workspace:*",
+    "@embedpdf/plugin-viewport": "workspace:*",
+    "@embedpdf/plugin-scroll": "workspace:*",
+    "@embedpdf/plugin-render": "workspace:*",
+    "@embedpdf/plugin-tiling": "workspace:*",
+    "@embedpdf/plugin-interaction-manager": "workspace:*",
+    "@embedpdf/plugin-selection": "workspace:*",
+    "@embedpdf/plugin-rotate": "workspace:*",
+    "@embedpdf/plugin-fullscreen": "workspace:*",
+    "@embedpdf/plugin-zoom": "workspace:*",
+    "@embedpdf/plugin-pan": "workspace:*",
+    "@embedpdf/plugin-export": "workspace:*",
+    "@embedpdf/plugin-spread": "workspace:*",
+    "@embedpdf/plugin-print": "workspace:*",
+    "@embedpdf/plugin-search": "workspace:*",
+    "@embedpdf/plugin-annotation": "workspace:*",
+    "@embedpdf/plugin-redaction": "workspace:*",
+    "@embedpdf/plugin-thumbnail": "workspace:*",
+    "@embedpdf/utils": "workspace:*",
+    "@quasar/extras": "^1.17.0",
+    "quasar": "^2.16.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.9.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "@quasar/vite-plugin": "^1.10.0",
+    "npm-run-all2": "^7.0.2",
+    "sass-embedded": "^1.89.2",
+    "typescript": "^5.7.3",
+    "vite": "^6.3.5",
+    "vue-tsc": "^3.0.1"
+  }
+}

examples/vue-quasar/src/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <Application />
+</template>
+
+<script setup lang="ts">
+import Application from './components/Application.vue';
+</script>

examples/vue-quasar/src/components/AnnotationSelectionMenu.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useAnnotationCapability } from '@embedpdf/plugin-annotation/vue';
+import type { TrackedAnnotation } from '@embedpdf/plugin-annotation';
+import type { MenuWrapperProps } from '@embedpdf/utils/vue';
+import type { Rect } from '@embedpdf/models';
+
+interface AnnotationSelectionMenuProps {
+  menuWrapperProps: MenuWrapperProps;
+  annotation: TrackedAnnotation;
+  rect: Rect;
+}
+
+const props = defineProps<AnnotationSelectionMenuProps>();
+
+const { provides: annotation } = useAnnotationCapability();
+
+const handleDelete = (e: Event) => {
+  e.stopPropagation();
+  const api = annotation.value;
+  if (!api) return;
+  const { pageIndex, id } = props.annotation.object;
+  api.deleteAnnotation(pageIndex, id);
+};
+</script>
+
+<template>
+  <span v-bind="menuWrapperProps">
+    <q-card
+      flat
+      bordered
+      class="menu-card q-pa-xs"
+      :style="{
+        position: 'absolute',
+        top: `${rect.size.height + 8}px`,
+        left: '0',
+        zIndex: 1000,
+        cursor: 'default',
+        pointerEvents: 'auto',
+      }"
+    >
+      <div class="row items-center q-gutter-xs">
+        <q-btn
+          flat
+          round
+          dense
+          size="sm"
+          icon="mdi-delete-outline"
+          @click="handleDelete"
+          aria-label="Delete annotation"
+        />
+      </div>
+    </q-card>
+  </span>
+</template>
+
+<style scoped>
+.menu-card {
+  min-width: 40px;
+}
+</style>