Merge pull request #2219 from syncfusion-content/VueChangesGetting

UG(1008903): Validate and resolve the issues in the documentation for Vue Platform

Author: CCMKarthik1611

Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md

@@ -45,8 +45,9 @@ import {
   BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
   TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
+import { provide, ref } from 'vue';
 
+const pdfviewer = ref(null);
 const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
 const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
 
@@ -55,7 +56,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
 
 const documentLoad = () => {
   document.getElementById('set').addEventListener('click', () => {
-    this.$refs.pdfviewer.ej2Instances.annotation.setAnnotationMode('FreeText');
+    pdfviewer.value.ej2Instances.annotation.setAnnotationMode('FreeText');
   });
 }
 
@@ -125,8 +126,9 @@ import {
   BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
   TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
+import { provide, ref } from 'vue';
 
+const pdfviewer = ref(null);
 const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
 const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
 
@@ -135,7 +137,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
 
 const documentLoad = () => {
   document.getElementById('set').addEventListener('click', () => {
-    this.$refs.pdfviewer.ej2Instances.annotation.setAnnotationMode('FreeText');
+    pdfviewer.value.ej2Instances.annotation.setAnnotationMode('FreeText');
   });
 }
 
@@ -190,7 +192,7 @@ export default {
 
 ## Add a free text annotation programmatically to the PDF document
 
-The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#annotation) method.
+The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#annotation) method.
 
 Here is an example of adding a free text annotation programmatically using addAnnotation():
 

Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md

@@ -55,7 +55,7 @@ The following examples switch to stamp annotation modes.
 import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
   BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
-  TextSearch, FormFields, FormDesigner, PageOrganizer
+  TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem
 } from '@syncfusion/ej2-vue-pdfviewer';
 import { provide, ref } from 'vue';
 
@@ -91,7 +91,7 @@ const documentLoad = () => {
 import {
   PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
   BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
-  TextSearch, FormFields, FormDesigner, PageOrganizer
+  TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem
 } from '@syncfusion/ej2-vue-pdfviewer';
 
 export default {
@@ -137,7 +137,7 @@ export default {
 import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
   BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
-  TextSearch, FormFields, FormDesigner, PageOrganizer
+  TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem
 } from '@syncfusion/ej2-vue-pdfviewer';
 import { provide, ref } from 'vue';
 
@@ -174,7 +174,7 @@ const documentLoad = () => {
 import {
   PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
   BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
-  TextSearch, FormFields, FormDesigner, PageOrganizer
+  TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem
 } from '@syncfusion/ej2-vue-pdfviewer';
 
 export default {
@@ -208,7 +208,7 @@ export default {
 
 ## Adding a Stamp annotation to the PDF document Programmatically
 
-With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
 
 Here's a example of how you can utilize the **addAnnotation()** method to include a Stamp annotation programmatically:
 

Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md

@@ -34,7 +34,7 @@ Annotation comments can be added using the comment panel.
 
 ## Add a sticky note annotation to the PDF document programmatically
 
-The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
 
 Here is an example showing how to add a sticky note annotation programmatically using addAnnotation():
 
@@ -159,7 +159,7 @@ const addAnnotation = function () {
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
 
 <template>
   <div id="app">
@@ -254,7 +254,7 @@ const editAnnotation = function () {
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Standalone" %}
+{% highlight html tabtitle="Options API (Standalone)" %}
 
 <template>
   <div id="app">

Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md

@@ -239,7 +239,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
   Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
 
 const documentLoad = () => {
-  const viewer = this.$refs.pdfviewer.ej2Instances;
+  const viewer = pdfviewer.value.ej2Instances;
   document.getElementById('set').addEventListener('click', () => {
     viewer.annotation.setAnnotationMode('Highlight');
   });
@@ -329,7 +329,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
   Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
 
 const documentLoad = () => {
-  const viewer = this.$refs.pdfviewer.ej2Instances;
+  const viewer = pdfviewer.value.ej2Instances;
   document.getElementById('set').addEventListener('click', () => {
     viewer.annotation.setAnnotationMode('Highlight');
   });
@@ -395,7 +395,7 @@ export default {
 
 ## Highlight text programmatically
 
-Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
 
 Example:
 
@@ -425,7 +425,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
   ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
 
 const addAnnotation = function () {
-  const viewer = this.$refs.pdfviewer.ej2Instances;
+  const viewer = pdfviewer.value.ej2Instances;
   viewer.annotation.addAnnotation("Highlight", {
     bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
     pageNumber: 1
@@ -942,12 +942,12 @@ export default {
 
 ## Underline a text programmatically
 
-Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
 
 Example:
 
 {% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% highlight html tabtitle="Composition API (Standalone)" %}
 
 <template>
   <div id="app">
@@ -983,7 +983,7 @@ const addAnnotation = function () {
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Standalone" %}
+{% highlight html tabtitle="Options API (Standalone)" %}
 
 <template>
   <div id="app">
@@ -1162,7 +1162,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
   Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
 
 const documentLoad = () => {
-  const viewer = this.$refs.pdfviewer.ej2Instances;
+  const viewer = pdfviewer.value.ej2Instances;
   document.getElementById('set').addEventListener('click', () => {
     viewer.annotation.setAnnotationMode('Strikethrough');
   });
@@ -1216,7 +1216,7 @@ export default {
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
 
 <template>
   <div id="app">
@@ -1491,7 +1491,7 @@ export default {
 
 ## Strikethrough text programmatically
 
-Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
 
 Here's an example of how you can use the **addAnnotation()** method to apply Strikethrough programmatically:
 
@@ -1686,7 +1686,7 @@ In the pan mode, if the squiggly mode is entered, the PDF Viewer control will sw
 Refer to the following code snippet to switch to squiggly mode.
 
 {% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% highlight html tabtitle="Composition API (Standalone)" %}
 
 <template>
   <div id="app">
@@ -1713,7 +1713,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
   Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
 
 const documentLoad = () => {
-  const viewer = this.$refs.pdfviewer.ej2Instances;
+  const viewer = pdfviewer.value.ej2Instances;
   document.getElementById('set').addEventListener('click', () => {
     viewer.annotation.setAnnotationMode('Squiggly');
   });
@@ -1767,7 +1767,7 @@ export default {
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
 
 <template>
   <div id="app">
@@ -2042,7 +2042,7 @@ export default {
 
 ## Squiggly a text programmatically
 
-The PDF Viewer library enables you to programmatically Squiggly text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+The PDF Viewer library enables you to programmatically Squiggly text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
 
 Here's an example of how you can use the **addAnnotation()** method to apply Squiggly programmatically:
 
@@ -2426,45 +2426,35 @@ Refer to the following code snippet for calling undo and redo actions from the c
     <button id="undo">Undo</button>
     <button id="redo">Redo</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl"
-      :documentLoad="documentLoad">
+      :documentLoad="documentLoad" :style="{ height: '800px', width: '1200px' }">
     </ejs-pdfviewer>
   </div>
 </template>
 
 <script setup>
 
 import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
+  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
   BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
   TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
+import { provide, ref } from 'vue';
 
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
-      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]
-  },
-  methods: {
-    documentLoad() {
-      viewer = this.$refs.pdfviewer.ej2Instances;
-      document.getElementById('undo').addEventListener('click', () => {
-        viewer.undo();
-      });
-      document.getElementById('redo').addEventListener('click', () => {
-        viewer.redo();
-      });
-    }
-  }
+const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+const pdfviewer = ref(null);
+
+provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+  Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
+
+const documentLoad = function () {
+  const viewer = pdfviewer.value.ej2Instances;
+  document.getElementById('undo').addEventListener('click', () => {
+    viewer.undo();
+  });
+  document.getElementById('redo').addEventListener('click', () => {
+    viewer.redo();
+  });
 }
 </script>
 
@@ -2506,7 +2496,7 @@ export default {
   },
   methods: {
     documentLoad() {
-      viewer = this.$refs.pdfviewer.ej2Instances;
+      const viewer = this.$refs.pdfviewer.ej2Instances;
       document.getElementById('undo').addEventListener('click', () => {
         viewer.undo();
       });
@@ -2519,7 +2509,7 @@ export default {
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
 
 <template>
   <div id="app">
@@ -2538,16 +2528,17 @@ import {
   BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
   TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
+import { provide, ref } from 'vue';
 
 const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
 const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+const pdfviewer = ref(null);
 
 provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
   Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
 
 const documentLoad = function () {
-  const viewer = this.$refs.pdfviewer.ej2Instances;
+  const viewer = pdfviewer.value.ej2Instances;
   document.getElementById('undo').addEventListener('click', () => {
     viewer.undo();
   });
@@ -2559,7 +2550,7 @@ const documentLoad = function () {
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
 
 <template>
   <div id="app">

Document-Processing/PDF/PDF-Viewer/vue/annotation/sticky-notes-annotation.md

@@ -86,7 +86,7 @@ export default {
   },
 
   methods: {
-    downloadClicked: function (args) {
+    downloadClicked: function () {
       this.$refs.pdfviewer.ej2Instances.download();
     }
   }
@@ -160,7 +160,7 @@ export default {
   },
 
   methods: {
-    downloadClicked: function (args) {
+    downloadClicked: function () {
       this.$refs.pdfviewer.ej2Instances.download();
     }
   }