@tato30/vue-pdf - npm Package Compare versions

Comparing version 1.6.2 to 1.7.0

dist/types/components/layers/AnnotationLayer.vue.d.ts

 import type { AnnotationEventPayload } from '../types';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    page: import("pdfjs-dist/types/src/display/api").PDFPageProxy | null;
-    viewport: import("pdfjs-dist/types/src/display/display_utils").PageViewport | null;
-    document: import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | null;
+    page?: import("pdfjs-dist/types/src/display/api").PDFPageProxy | undefined;
+    viewport?: import("pdfjs-dist/types/src/display/display_utils").PageViewport | undefined;
+    document?: import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined;
     filter?: string[] | undefined;
-    map?: Function | undefined;
+    map?: object | undefined;
     imageResourcesPath?: string | undefined;
@@ -14,7 +14,7 @@ hideForms?: boolean | undefined;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    page: import("pdfjs-dist/types/src/display/api").PDFPageProxy | null;
-    viewport: import("pdfjs-dist/types/src/display/display_utils").PageViewport | null;
-    document: import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | null;
+    page?: import("pdfjs-dist/types/src/display/api").PDFPageProxy | undefined;
+    viewport?: import("pdfjs-dist/types/src/display/display_utils").PageViewport | undefined;
+    document?: import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined;
     filter?: string[] | undefined;
-    map?: Function | undefined;
+    map?: object | undefined;
     imageResourcesPath?: string | undefined;
@@ -21,0 +21,0 @@ hideForms?: boolean | undefined;

dist/types/components/layers/TextLayer.vue.d.ts

 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    page: import("pdfjs-dist/types/src/display/api.js").PDFPageProxy | null;
-    viewport: import("pdfjs-dist/types/src/display/display_utils.js").PageViewport | null;
+    page?: import("pdfjs-dist/types/src/display/api.js").PDFPageProxy | undefined;
+    viewport?: import("pdfjs-dist/types/src/display/display_utils.js").PageViewport | undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    page: import("pdfjs-dist/types/src/display/api.js").PDFPageProxy | null;
-    viewport: import("pdfjs-dist/types/src/display/display_utils.js").PageViewport | null;
+    page?: import("pdfjs-dist/types/src/display/api.js").PDFPageProxy | undefined;
+    viewport?: import("pdfjs-dist/types/src/display/display_utils.js").PageViewport | undefined;
 }>>>, {}, {}>;
@@ -8,0 +8,0 @@ export default _default;

dist/types/components/utils/annotations.d.ts

@@ -5,2 +5,2 @@ import type { PDFDocumentProxy } from 'pdfjs-dist';
 declare function annotationEventsHandler(evt: Event, PDFDoc: PDFDocumentProxy, Annotations: Object[]): AnnotationEventPayload | Promise<AnnotationEventPayload | undefined> | undefined;
-export { EVENTS_TO_HANDLER, annotationEventsHandler };
+export { EVENTS_TO_HANDLER, annotationEventsHandler, };

dist/types/components/VuePDF.vue.d.ts

@@ -5,33 +5,3 @@ import 'pdfjs-dist/web/pdf_viewer.css';
 declare function cancel(): void;
-declare function getAnnotationStorage(): {
-    onSetModified: any;
-    onResetModified: any;
-    onAnnotationEditor: any;
-    getValue: (key: string, defaultValue: Object) => Object;
-    getRawValue: (key: string) => Object;
-    remove: (key: string) => void;
-    setValue: (key: string, value: Object) => void;
-    has: (key: string) => boolean;
-    getAll: () => Object | null;
-    setAll: (obj: Object) => void;
-    readonly size: number;
-    resetModified: () => void;
-    readonly print: {
-        readonly serializable: null;
-        onSetModified: any;
-        onResetModified: any;
-        onAnnotationEditor: any;
-        getValue: (key: string, defaultValue: Object) => Object;
-        getRawValue: (key: string) => Object;
-        remove: (key: string) => void;
-        setValue: (key: string, value: Object) => void;
-        has: (key: string) => boolean;
-        getAll: () => Object | null;
-        setAll: (obj: Object) => void;
-        readonly size: number;
-        resetModified: () => void;
-        readonly print: any;
-    };
-    readonly serializable: Map<any, any> | null;
-} | undefined;
+declare function getAnnotationStorage(): import("pdfjs-dist/types/src/display/annotation_storage").AnnotationStorage | undefined;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -48,3 +18,4 @@ pdf?: import("pdfjs-dist/types/src/display/api").PDFDocumentLoadingTask | undefined;
     annotationsFilter?: string[] | undefined;
-    annotationsMap?: Function | undefined;
+    annotationsMap?: object | undefined;
+    watermarkText?: string | undefined;
 }>, {
@@ -71,3 +42,4 @@ page: number;
     annotationsFilter?: string[] | undefined;
-    annotationsMap?: Function | undefined;
+    annotationsMap?: object | undefined;
+    watermarkText?: string | undefined;
 }>, {
@@ -74,0 +46,0 @@ page: number;

package.json

 {
   "name": "@tato30/vue-pdf",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "PDF viewer for Vue 3",
@@ -40,3 +40,3 @@ "author": {
   "scripts": {
-    "dev": "vite --config vite.playground.ts",
+    "dev": "vite --force --config vite.playground.ts",
     "build": "npm run build:lib && npm run build:dts",
@@ -46,2 +46,3 @@ "build:lib": "vite build",
     "publish": "npm publish --access public",
+    "publish:beta": "npm publish --tag beta --access public",
     "preview": "vite preview --port 5050",
@@ -48,0 +49,0 @@ "lint": "eslint .",

README.md

@@ -6,7 +6,14 @@ <div align="center">
 
+<p>
+  <a href="https://www.npmjs.com/package/@tato30/vue-pdf" target="_blank">
+    <img src="https://img.shields.io/npm/v/@tato30/vue-pdf?style=flat-square" />
+  </a>
+  <a href="https://www.npmjs.com/package/@tato30/vue-pdf" target="_blank" >
+    <img src="https://img.shields.io/npm/dw/@tato30/vue-pdf?style=flat-square" />
+  </a>
+  <a href="./LICENSE">
+    <img src="https://img.shields.io/npm/l/@tato30/vue-pdf?style=flat-square" />
+  </a>
+</p>
 
-![Latest version](https://img.shields.io/npm/v/@tato30/vue-pdf?style=flat-square)
-![Downloads](https://img.shields.io/npm/dw/@tato30/vue-pdf?style=flat-square)
-![License](https://img.shields.io/npm/l/@tato30/vue-pdf?style=flat-square)
-
 <div align="center">
@@ -52,2 +59,52 @@ <h2><a href="https://tato30.github.io/VuePDF/">📖Documentation</a></h2>
 * [Methods](./docs/guide/methods.md)
-* [Slots](./docs/guide/slots.md)
+* [Slots](./docs/guide/slots.md)
+
+
+## Working With Layers
+
+This component supports text-selection and annotation-interaction by enabling them with `text-layer` and `annotation-layer` props respectively, but for this layers renders correctly is necessary setting `css` styles, it can be done by importing default styles from `@tato30/vue-pdf/style.css`.
+
+```vue
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+
+const { pdf } = usePDF('sample.pdf')
+</script>
+
+<template>
+  <VuePDF :pdf="pdf" text-layer annotation-layer />
+</template>
+```
+
+Check the follow examples:
+
+- [Text-Layer](../examples/basic/text_layer.md)
+- [Annotation-Layer](../examples/basic/annotation_layer.md.md)
+
+You can also create your own custom styles and set them in your project, use this examples as guide:
+
+- [text-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.css)
+- [annotation-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/annotation_layer_builder.css)
+
+## Server-Side Rendering
+
+`VuePDF` is a client-side library, so if you are working with SSR frameworks like `nuxt`, surely will throw error during building stage, if that the case, you could wrap library in some "client only" directive or component, also `usePDF` should be wrapped.
+
+## Contributing
+
+Any idea, suggestion or contribution to the code or documentation are very welcome.
+
+```sh
+# Clone the repository
+git clone https://github.com/TaTo30/VuePDF.git
+
+# Change to code folder
+cd VuePDF
+
+# Install node_modules
+npm install
+
+# Run code with hot reload
+npm run dev
+```

src/components/usePDF.ts

 import * as PDFJS from 'pdfjs-dist'
-import PDFWorker from 'pdfjs-dist/build/pdf.worker?url'
+import PDFWorker from 'pdfjs-dist/build/pdf.worker.min?url'
 import { shallowRef } from 'vue'
@@ -4,0 +4,0 @@

src/components/utils/annotations.ts

@@ -212,4 +212,3 @@ /* eslint-disable @typescript-eslint/no-unsafe-member-access */
   EVENTS_TO_HANDLER,
-  annotationEventsHandler
+  annotationEventsHandler,
 }
-

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

27

increased by12.5%

Number of lines in readme file

108

increased by111.76%

Worsened metrics

Total package byte prevSize

2952930

decreased by-44.06%

Lines of code

12592

decreased by-41.87%

No dependency changes