Merge pull request #34 from ONLYOFFICE/develop

Release/v1.4.0

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from "@storybook/vue3-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/vue3";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 1.4.0
+- improved load api.js
+- bump dependencies
+- updated IConfig
+
 ## 1.3.0
 - extended IConfig
 

README.md

@@ -1,80 +1,154 @@
 # @onlyoffice/document-editor-vue
 
-This repo contains the Vue component for [ONLYOFFICE Document Server](https://github.com/ONLYOFFICE/DocumentServer).
+This repo contains the ONLYOFFICE Docs Vue.js component which integrates [ONLYOFFICE Document Server](https://github.com/ONLYOFFICE/DocumentServer) into [Vue.js](https://vuejs.org/) projects.
 
-## Installation
-Install it from **npm** in your project. Run:
+**Please note**: Before working with this component, you need to install ONLYOFFICE Docs. To do so, you can use [Docker](https://github.com/onlyoffice/Docker-DocumentServer) (recommended).
+
+## Prerequisites
+This procedure requires [Node.js (and npm)](https://nodejs.org/en).
+
+## Creating the demo Vue.js application with ONLYOFFICE Docs editor
+This procedure creates a [basic Vue.js application](https://cli.vuejs.org/guide/creating-a-project.html#vue-create) and installs an ONLYOFFICE Docs editor in it.
+
+1. Open a command line or command prompt and create a Vue.js 3.x project named *onlyoffice-vue-demo* using the [Create Vue Tool](https://github.com/vuejs/create-vue):
+
+```
+npm create vue@3
+```
+
+2. Go to the newly created directory:
 
-```bash
-npm install --save @onlyoffice/document-editor-vue
 ```
-or:
-```bash
-yarn add @onlyoffice/document-editor-vue
+cd onlyoffice-vue-demo
 ```
 
-## Usage
+3. Install ONLYOFFICE Docs Vue.js component from **npm** and save it to the *package.json* file with *--save*:
+
+```
+npm install --save @onlyoffice/document-editor-vue
+```
+
+4. Open the *./src/App.vue* file in the *onlyoffice-vue-demo* project and replace its contents with the following code:
 
-Find below the component usage example:
 ```
 <template>
-  <DocumentEditor 
-    id="docEditor" 
-    documentServerUrl="http://documentserver/"
-    :config="config"
-    :events_onDocumentReady="onDocumentReady"
-    :onLoadComponentError="onLoadComponentError"
+    <DocumentEditor 
+        id="docEditor" 
+        documentServerUrl="http://documentserver/"
+        :config="config"
+        :events_onDocumentReady="onDocumentReady"
+        :onLoadComponentError="onLoadComponentError"
     /> 
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { DocumentEditor } from "@onlyoffice/document-editor-vue";
- 
+
 export default defineComponent({
-  name: 'ExampleComponent',
-  components: {
-    DocumentEditor
-  },
-  data() {
-    return {
-      config: {
-        document: {
-          fileType: "docx",
-          key: "Khirz6zTPdfd7",
-          title: "Example Document Title.docx",
-          url: "https://example.com/url-to-example-document.docx"
+    name: 'ExampleComponent',
+    components: {
+        DocumentEditor
+    },
+    data() {
+        return {
+            config: {
+                document: {
+                    fileType: "docx",
+                    key: "Khirz6zTPdfd7",
+                    title: "Example Document Title.docx",
+                    url: "https://example.com/url-to-example-document.docx"
+                },
+                documentType: "word",
+                editorConfig: {
+                    callbackUrl: "https://example.com/url-to-callback.ashx"
+                }
+            }
+        }
+    },
+    methods: {
+        onDocumentReady() {
+            console.log("Document is loaded");
         },
-        documentType: "word",
-        editorConfig: {
-          callbackUrl: "https://example.com/url-to-callback.ashx"
+        onLoadComponentError (errorCode, errorDescription) {
+            switch(errorCode) {
+                case -1: // Unknown error loading component
+                    console.log(errorDescription);
+                    break;
+
+                case -2: // Error load DocsAPI from http://documentserver/
+                    console.log(errorDescription);
+                    break;
+
+                case -3: // DocsAPI is not defined
+                    console.log(errorDescription);
+                    break;
+            }
         }
-      }
-    }
-  },
-  methods: {
-    onDocumentReady() {
-      console.log("Document is loaded");
     },
-    onLoadComponentError (errorCode, errorDescription) {
-      switch(errorCode) {
-        case -1: // Unknown error loading component
-          console.log(errorDescription);
-          break;
-
-        case -2: // Error load DocsAPI from http://documentserver/
-          console.log(errorDescription);
-          break;
-
-        case -3: // DocsAPI is not defined
-          console.log(errorDescription);
-          break;
-    }
-  },
 });
 </script>
 ```
 
+Replace the following lines with your own data:
+* **"http://documentserver/"** - replace with the URL of your server;
+* **"https://example.com/url-to-example-document.docx"** - replace with the URL to your file;
+* **"https://example.com/url-to-callback.ashx"** - replace with your callback URL (this is required for the saving functionality to work).
+
+5. Test the application using the Vue development server:
+
+* To start the development server, navigate to the *onlyoffice-vue-demo* directory and run:
+
+```
+npm run dev
+```
+
+* To stop the development server, select on the command line or command prompt and press *Ctrl+C*.
+
+## Deploying the demo Vue.js application
+
+The easiest way to deploy the application to a production environment is to install [serve](https://github.com/vercel/serve) and create a static server:
+
+1. Install the *serve* package globally:
+
+```
+npm install -g serve
+```
+
+2. Serve your static site on the 3000 port:
+
+```
+serve -s build
+```
+
+Another port can be adjusted using the *-l* or *--listen* flags:
+
+```
+serve -s build -l 4000
+```
+
+3. To serve the project folder, go to it and run the *serve* command:
+
+```
+cd onlyoffice-react-demo
+serve
+```
+
+Now you can deploy the application to the created server:
+
+1. Navigate to the *onlyoffice-vue-demo* directory and run:
+
+```
+npm run build
+```
+
+The *dist* directory will be created with a production build of your app.
+
+2. Copy the contents of the *onlyoffice-vue-demo/dist* directory to the root directory of the web server (to the *onlyoffice-react-demo* folder).
+
+The application will be deployed on the web server (*http://localhost:3000* by default).
+
+
 ## API
 ### Props
 | Name | Type | Default | Required | Description |
@@ -101,13 +175,16 @@ export default defineComponent({
 | `events_onMakeActionLink` | (event: object) => void | null | no | The function called when the user is trying to get link for opening the document which contains a bookmark, scrolling to the bookmark position. |
 | `events_onRequestInsertImage` | (event: object) => void | null | no | The function called when the user is trying to insert an image by clicking the _Image from Storage_ button. |
 | `events_onRequestSaveAs` | (event: object) => void | null | no | The function called when the user is trying to save file by clicking _Save Copy as..._ button. |
-| `events_onRequestMailMergeRecipients` | (event: object) => void | null | no | the function called when the user is trying to select recipients data by clicking the _Mail merge_ button. |
-| `events_onRequestCompareFile` | (event: object) => void | null | no | The function called when the user is trying to select document for comparing by clicking the _Document from Storage_ button. |
+| `events_onRequestMailMergeRecipients` [DEPRECATED] | (event: object) => void | null | no | the function called when the user is trying to select recipients data by clicking the _Mail merge_ button. |
+| `events_onRequestCompareFile` [DEPRECATED] | (event: object) => void | null | no | The function called when the user is trying to select document for comparing by clicking the _Document from Storage_ button. |
 | `events_onRequestEditRights` | (event: object) => void | null | no | The function called when the user is trying to switch the document from the viewing into the editing mode by clicking the _Edit Document_ button. |
 | `events_onRequestHistory` | (event: object) => void | null | no | The function called when the user is trying to show the document version history by clicking the _Version History_ button. |
 | `events_onRequestHistoryClose` | (event: object) => void | null | no | The function called when the user is trying to go back to the document from viewing the document version history by clicking the _Close History_ button. |
 | `events_onRequestHistoryData` | (event: object) => void | null | no | The function called when the user is trying to click the specific document version in the document version history. |
 | `events_onRequestRestore` | (event: object) => void | null | no | The function called when the user is trying to restore the file version by clicking the _Restore_ button in the version history. |
+| `events_onRequestSelectSpreadsheet` | (event: object) => void | null | no | The function called when the user is trying to select recipients data by clicking the Mail merge button. |
+| `events_onRequestSelectDocument` | (event: object) => void | null | no | The function called when the user is trying to select a document for comparing or combining. |
+
 
 ## Storybook
 

jest.config.js

@@ -1,7 +1,11 @@
 module.exports = {
   transform: {
     "^.+\\.tsx?$": "ts-jest",
-    "^.+\\.vue$": "vue-jest"
+    "^.+\\.vue$": "@vue/vue3-jest",
   },
-  moduleFileExtensions: ["js", "ts", "json", "vue"]
+  moduleFileExtensions: ["js", "ts", "json", "vue"],
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+ }
 };