Merge pull request #2 from ONLYOFFICE/develop

Release/1.0.0

.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/vue3",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+## 1.0.0
+- Initial release

README.md

@@ -1,7 +1,141 @@
-Vue component for ONLYOFFICE Document Server
+# @onlyoffice/document-editor-vue
 
-Install the project dependencies:
-`npm install`
+This repo contains the Vue component for [ONLYOFFICE Document Server](https://github.com/ONLYOFFICE/DocumentServer).
 
-Create package:
-`npm run build && npm pack`
+## Installation
+Install it from **npm** in your project. Run:
+
+```bash
+npm install --save @onlyoffice/document-editor-vue
+```
+or:
+```bash
+yarn add @onlyoffice/document-editor-vue
+```
+
+## Usage
+
+Find below the component usage example:
+```
+<template>
+  <DocumentEditor 
+    id="docEditor" 
+    documentServerUrl="http://documentserver/"
+    :config="config"
+    :events_onDocumentReady="onDocumentReady"
+    /> 
+</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"
+        },
+        documentType: "word",
+        editorConfig: {
+          callbackUrl: "https://example.com/url-to-callback.ashx"
+        }
+      }
+    }
+  },
+  methods: {
+    onDocumentReady() {
+      console.log("Document is loaded");
+    }
+  },
+});
+</script>
+```
+
+## API
+### Props
+| Name | Type | Default | Required | Description |
+| ------------- | ------------- | ------------- | ------------- | ------------- |
+| `id` | string | null | yes | Component unique identifier. |
+| `documentServerUrl` | string | null | yes | Address ONLYOFFICE Document Server. |
+| `config` | object | null | yes | Generic configuration object for opening a file with token. [Config API](https://api.onlyoffice.com/editors/config/) | |
+| `document_fileType` | string | null | no | The type of the file. |
+| `document_title` | string | null | no | The file name. |
+| `documentType` | string | null | no | The document type. |
+| `height` | string | null | no | Defines the document height in the browser window. |
+| `type` | string | null | no | Defines the platform type used to access the document (desktop, mobile or embedded). |
+| `width` | string | null | no | Defines the document width in the browser window. |
+| `events_onAppReady` | (event: object) => void | null | no | The function called when the application is loaded into the browser. |
+| `events_onDocumentStateChange` | (event: object) => void | null | no | The function called when the document is modified. |
+| `events_onMetaChange` | (event: object) => void | null | no | The function called when the meta information of the document is changed via the meta command. |
+| `events_onDocumentReady` | (event: object) => void | null | no | The function called when the document is loaded into the document editor. |
+| `events_onInfo` | (event: object) => void | null | no | The function called when the application opened the file. |
+| `events_onWarning`| (event: object) => void | null | no | The function called when a warning occurs. |
+| `events_onError` | (event: object) => void | null | no | The function called when an error or some other specific event occurs. |
+| `events_onRequestSharingSettings` | (event: object) => void | null | no | The function called when the user is trying to manage document access rights by clicking _Change access rights_ button. |
+| `events_onRequestRename` | (event: object) => void | null | no | The function called when the user is trying to rename the file by clicking the _Rename..._ button. |
+| `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_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. |
+
+## Storybook
+
+Change the address of the Document Server in the *config/default.json* file:
+```
+"documentServerUrl": "http://documentserver/"
+```
+
+### Build Storybook:
+```
+npm run build-storybook
+```
+### Start Storybook:
+```
+npm run storybook
+```
+
+## Development
+
+### Clone project from the GitHub repository:
+```
+git clone https://github.com/ONLYOFFICE/document-editor-vue
+```
+### Install the project dependencies:
+```
+npm install
+```
+### Test the component:
+```
+npm run test
+```
+### Build the project:
+```
+npm run build
+```
+### Create the package:
+```
+npm pack
+```
+
+## Feedback and support
+
+In case you have any issues, questions, or suggestions for the ONLYOFFICE Document Server Vue component, please refer to the [Issues](https://github.com/ONLYOFFICE/document-editor-vue/issues) section.
+
+Official project website: [www.onlyoffice.com](https://www.onlyoffice.com/).
+
+Support forum: [forum.onlyoffice.com](https://forum.onlyoffice.com/).

config/default.json

@@ -0,0 +1,4 @@
+{
+    "documentServerUrl": "http://documentserver/",
+    "demoStorage": "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/"
+}

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.vue$": "vue-jest"
+  },
+  moduleFileExtensions: ["js", "ts", "json", "vue"]
+};