Integrated latest changes at 07-25-2024 7:30:19 AM

Author: SyncfusionBuild

ej2-vue/appearance/figma.md

@@ -8,30 +8,30 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Figma UI Kits for Syncfusion Components
+# Figma UI Kits for Syncfusion Vue Components
 
-Syncfusion offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion components.
+Syncfusion offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137), [Fluent](https://www.figma.com/community/file/1385969120047188707), [Tailwind](https://www.figma.com/community/file/1385969065626384098), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272). These kits match the themes used in Syncfusion Vue components.
 
-The kits contain reusable design components with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion components.
+The kits contain reusable design components with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion Vue components.
 
 ![Material 3](./images/material3.png)
 
 ## Advantages of UI kits
 
 The Syncfusion Figma UI kit offers the following key advantages:
-- The UI kit includes detailed information about Syncfusion components, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion components.
+- The UI kit includes detailed information about Syncfusion Vue components, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion Vue components.
 - Design components are developed using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward and efficient.
-- Developers can seamlessly match Syncfusion components with your design requirements, ensuring alignment and accuracy.
+- Developers can seamlessly match Syncfusion Vue components with your design requirements, ensuring alignment and accuracy.
 - By using standardized components and themes, the UI kit ensures consistency in your designs, maintaining a uniform look and feel across projects.
 
 ## Downloading the UI kits
 
 Syncfusion Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion theme-specific Figma UI kits from the following links:
 
-- [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme)
-- [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme)
-- [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme)
-- [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme)
+- [Material 3](https://www.figma.com/community/file/1385969023252455137)
+- [Fluent](https://www.figma.com/community/file/1385969120047188707)
+- [Tailwind](https://www.figma.com/community/file/1385969065626384098)
+- [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272)
 
 ## Structure of the UI kits
 

ej2-vue/document-editor/comments.md

@@ -17,7 +17,28 @@ Document Editor allows you to add comments to documents. You can add, navigate a
 Comments can be inserted to the selected text.
 
 ```ts
-this.$refs.documenteditor.ej2Instances.editor.insertComment("Test comment");
+this.$refs.documenteditor.ej2Instances.editor.insertComment('Test comment');
+```
+
+## Add a New Comment with Date, Author, and Status
+
+Comments can be inserted into the selected text with a specified date, author, and status.
+
+```ts
+// In this example, a comment with the text "Nancy Davolio" is added by the author Rachel Green on July 23, 2024, at 2:30 PM. The isResolved status is set to false.
+
+// Create a specific date: July 23, 2024, at 2:30:00 PM.
+let specificDate = new Date(2024, 6, 23, 14, 30, 0); // Note: July is represented by 6 (0-based index).
+
+// Define the properties of the comment including author, date, and resolution status.
+let commentProperties: CommentProperties = { 
+    author: 'Nancy Davolio',          // The author of the comment.
+    dateTime: specificDate,           // The date and time when the comment is created.
+    isResolved: false                 // The status of the comment; false indicates it is unresolved.
+};
+
+// Insert the comment with the specified properties into the document editor.
+this.$refs.documenteditor.ej2Instances.editor.insertComment('Hello world', commentProperties);
 ```
 
 ## Comment navigation
@@ -142,29 +163,9 @@ The following example illustrates how to enable mention support in the Document
   import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar} from '@syncfusion/ej2-vue-documenteditor';
   Vue.use(DocumentEditorContainerPlugin);
   let mentionData =  [
-                { "Name": "Selma Rose", "Eimg": "3", "EmailId": "selma@mycompany.com" },
-                { "Name": "Russo Kay", "Eimg": "8", "EmailId": "russo@mycompany.com" },
-                { "Name": "Camden Kate", "Eimg": "9", "EmailId": "camden@mycompany.com" },
-                { "Name": "Mary Kate", "Eimg": "4", "EmailId": "marry@mycompany.com" },
-                { "Name": "Ursula Ann", "Eimg": "2", "EmailId": "ursula@mycompany.com" },
-                { "Name": "Margaret", "Eimg": "5", "EmailId": "margaret@mycompany.com" },
-                { "Name": "Laura Grace", "Eimg": "6", "EmailId": "laura@mycompany.com" },
-                { "Name": "Robert", "Eimg": "8", "EmailId": "robert@mycompany.com" },
-                { "Name": "Albert", "Eimg": "9", "EmailId": "albert@mycompany.com" },
-                { "Name": "Michale", "Eimg": "10", "EmailId": "michale@mycompany.com" },
-                { "Name": "Andrew James", "Eimg": "7", "EmailId": "james@mycompany.com" },
-                { "Name": "Rosalie", "Eimg": "4", "EmailId": "rosalie@mycompany.com" },
-                { "Name": "Stella Ruth", "Eimg": "2", "EmailId": "stella@mycompany.com" },
-                { "Name": "Richard Rose", "Eimg": "10", "EmailId": "richard@mycompany.com" },
-                { "Name": "Gabrielle", "Eimg": "3", "EmailId": "gabrielle@mycompany.com" },
-                { "Name": "Thomas", "Eimg": "7", "EmailId": "thomas@mycompany.com" },
-                { "Name": "Charles Danny", "Eimg": "8", "EmailId": "charles@mycompany.com" },
-                { "Name": "Daniel", "Eimg": "10", "EmailId": "daniel@mycompany.com" },
-                { "Name": "Matthew", "Eimg": "7", "EmailId": "matthew@mycompany.com" },
-                { "Name": "Donald Krish", "Eimg": "9", "EmailId": "donald@mycompany.com" },
-                { "Name": "Yohana", "Eimg": "1", "EmailId": "yohana@mycompany.com" },
-                { "Name": "Kevin Paul", "Eimg": "10", "EmailId": "kevin@mycompany.com" },
-                { "Name": "Andrew Fuller", "Eimg": "3", "EmailId": "andrew@mycompany.com"}
+                { "Name": "Mary Kate", "EmailId": "marry@company.com" },
+                { "Name": "Andrew James", "EmailId": "james@company.com" },
+                { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
             ];
   export default {
     data() {

ej2-vue/installation-and-upgrade/images/Mac_Installer1.png

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Installation using mac installer in Vue Installation and upgrade component | Syncfusion
+title: Installation using mac installer in Vue | Syncfusion
 description: Learn here all about Installation using mac installer in Syncfusion Vue Installation and upgrade component of Syncfusion Essential JS 2 and more.
 control: Installation using mac installer 
 platform: ej2-vue
@@ -18,8 +18,8 @@ domainurl: ##DomainURL##
 
    If you receive this alert, follow the below steps for the easiest solution.
 
-   1. Right-click the downloaded pkg file.
-   2. Select the "Open With" option and choose "Installer (Default)". The following pop-up appears.
+   1. Right-click the downloaded dmg file.
+   2. Select the "Open With" option and choose "DiskImageMounter (Default)". The following pop-up appears.
 
       ![pop-up Image](images/Mac_Catalina_MacOS_Alert2.png)
 
@@ -29,45 +29,31 @@ domainurl: ##DomainURL##
 
 The steps below show how to install the Essential Studio JavaScript - EJ2 Mac installer.
 
-1. Double-click the Syncfusion Essential Studio JavaScript - EJ2 Mac installer(.pkg) file. The installer Wizard opens. Click Continue.
+1. Locate the downloaded dmg file and open the file by double click on it.
 
    ![Welcome wizard](images/Mac_Installer1.png)
 
-2. The Software License Agreement wizard will appear. Click the Continue button.
+2. This action will automatically mount the disk image and create a virtual drive on your desktop or in the Finder sidebar.
 
    ![License Agreement](images/Mac_Installer2.png)
 
-3. The License Agreement's Confirmation window will appear. If you have read the Software License Agreement, click **Agree**.
+3. Copy the mounted disk file.
 
    ![License Agree Confirmation](images/Mac_Installer3.png)
 
-   N> The Unlock key is not required to install the Mac installer. The Syncfusion Essential Studio JavaScript - EJ2 Mac installer can be used for development purposes without registering the Unlock key.
-
-4. The Destination select wizard will appear. You can choose which disc to install the Syncfusion Essential Studio for JavaScript - EJ2 Mac installer on here.
-
-   ![Destination](images/Mac_Installer4.png)
-
-5. The Installation Type wizard will appear. Click Install to begin the standard installation of the Syncfusion Essential Studio JavaScript - EJ2 Mac installer.
-
-   ![Install Location](images/Mac_Installer5.png)
+4. And paste it in "Applications" folder shortcut.
 
-6. The Authentication window will appear. To begin the installation, enter the Mac machine's password and click **Install Software**.
+   ![License Agree Confirmation](images/Mac_Installer4.png)
 
-   ![Authentication](images/Mac_Installer6.png)
-
-7. The installation process will begin on your machine.
-
-   ![Installation progress](images/Mac_Installer7.png)
-
-8. Once the installation is complete, the completed screen will be displayed. To exit the installation wizard, click Close.
+   N> The Unlock key is not required to install the Mac installer. The Syncfusion Essential Studio JavaScript - EJ2 Mac installer can be used for development purposes without registering the Unlock key.
 
-   ![Installation Completed](images/Mac_Installer8.png)
+5. Now you can open the folder to explore the Syncfusion Essential Studio Mac installer.
 
-   By default, Mac installer will install the files in following location.
+   ![Destination](Images/destination.JPG)
 
-   **Location:** {Documents}\Syncfusion\ {version}\ {platform}
+6. To remove the DMG file, Right-click on the virtual drive on your desktop or in the Finder sidebar and select "Eject." Also delete the folder from the Applications.
 
-   ![Installed Location](images/Mac_Installer9.png)
+   ![Install Location](images/Mac_Installer6.png)
 
 ## License key registration in samples