spire.officejs-vue 10.11.4

package/README.md

@@ -0,0 +1,163 @@
+# spire.officejs-vue
+
+A Vue package is one of the plugins that use to operate the `spire-officejs` product
+
+# Installation
+
+```bash
+npm install spire.officejs-vue
+```
+
+# The instructions for the usage:
+
+```js
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import officejs-editor from 'spire.officejs-vue'
+
+const app = createApp(App)
+
+app.use(officejs-editor)
+app.mount('#app')
+```
+
+```vue
+// *.vue
+<template>
+  <div>
+    <spire-officejs-Editor :config="config" :serverUrl="serverUrl"></spire-officejs-Editor>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, onBeforeMount } from "vue";
+
+let serverUrl;
+let originUrl;
+let config;
+const file = file; //Should be replaced with actual file data, selected manually by the user
+const fileUint8Data = fileUint8Data; //Should be replaced with the actual Uint8Array data from the file
+const editorTypes = {
+  document: "document",
+  pdf: "pdf",
+  spreadsheet: "spreadsheet",
+  presentation: "presentation"
+};
+const exts_document = ["docx", "docm", "doc", "dotx", "dotm", "dot", "odt", "fodt", "ott", "txt", "wps", "wpt"];
+const exts_spreadsheet = ["xlsx", "csv", "xlsm", "xls", "xltx", "xltm", "xlt", "et", "ett"];
+const exts_presentation = ["pptx", "pptm", "ppt", "ppsx", "ppsm", "pps", "potx", "potm", "dps", "dpt"];
+const exts_pdf = ["pdf", "xps"];
+
+onBeforeMount(() => {
+  initConfig();
+})
+
+function initConfig() {
+  var tempUrl = new URL(import.meta.url);
+  var editorType = '';
+  var ext = getFileExtension();
+  if (import.meta.env.DEV) {
+    serverUrl = `http://127.0.0.1:7000`;
+    originUrl = `http://127.0.0.1:7000`;
+  } else if (import.meta.env.PROD) {
+    serverUrl = `${tempUrl.origin}/spire.officejs`;
+    originUrl = `${tempUrl.origin}/spire.officejs`;
+  }
+
+  if(exts_document.includes(ext))
+    editorType = editorTypes.document;
+  else if(exts_spreadsheet.includes(ext))
+    editorType = editorTypes.spreadsheet;
+  else if(exts_presentation.includes(ext))
+    editorType = editorTypes.presentation;
+  else if(exts_pdf.includes(ext))
+    editorType = editorTypes.pdf;
+
+  config = {
+    fileAttrs: {
+      fileInfo: {
+        name: file.name,
+        ext: ext,
+        primary: String(new Date().getTime()),
+        creator: "Jonn",
+        createTime: "2022-04-18 11:30:43"
+      },
+      sourceUrl: originUrl + "/files/__ffff_192.168.2.134/" + file.name,
+      createUrl: originUrl + "/open",
+      mergeFolderUrl: "",
+      fileChoiceUrl: "",
+      templates: {}
+    },
+    user: {
+      id: "uid-1",
+      name: "Jonn",
+      canSave: true
+    },
+    editorAttrs: {
+      editorMode: file.name.endsWith(".pdf") ? "view" : "edit",
+      editorWidth: "100%",
+      editorHeight: "100%",
+      editorType: editorType,
+      platform: "desktop",
+      viewLanguage: "zh",
+      isReadOnly: false,
+      canChat: true,
+      canComment: true,
+      canReview: true,
+      canDownload: true,
+      canEdit: file.name.endsWith(".pdf") ? false : true,
+      canForcesave: true,
+      embedded: {
+        saveUrl: "",
+        embedUrl: "",
+        shareUrl: "",
+        toolbarDocked: "top"
+      },
+      useWebAssemblyDoc: true,
+      useWebAssemblyExcel: true,
+      useWebAssemblyPpt: true,
+      useWebAssemblyPdf: true,
+      spireDocJsLicense: "",
+      spireXlsJsLicense: "",
+      spirePresentationJsLicense: "",
+      spirePdfJsLicense: "",
+      serverless: {
+        useServerless: true,
+        baseUrl: originUrl,
+        fileData: fileUint8Data
+      },
+      events: {
+        onSave: onFileSave
+      },
+      plugins: {
+        pluginsData: []
+      }
+    }
+  };
+}
+
+function getFileExtension() {
+  const filename = file.name.split(/[\\/]/).pop();
+  return filename.substring(filename.lastIndexOf(".") + 1).toLowerCase() || "";
+}
+
+function onFileSave(data) {
+  //Custom Save Logic
+  console.log("save data", data);
+}
+<script>
+```
+
+# Key Parameters
+| Properties| Explanation     | Type     | Default                  |
+| --------- | ------------    | -------- | ------------------------ |
+| id        | editor dockerid | `string` | `'SpireofficejsEditor'`  |
+| config    | config Para     | `object` | ——                       |
+| serverUrl | Server URL      | `string` | `'http://127.0.0.1:7000` |
+
+# ⚠️ Notice
+This Vue component requires the spire.officejs plugin in order to function.
+
+| Build Tools | Plugin Name                | Corresponding Address                                                   |
+| --------    | -------------------------- | ----------------------------------------------------------------------- |
+| vite        | vite-plugin-spire.officejs | [Jump to](https://www.npmjs.com/package/vite-plugin-spire.officejs)     |

package/es/index.mjs

@@ -0,0 +1,13 @@
+import * as t from "./src/index.mjs";
+import { SpireEditor as s } from "./src/officeJs-editor/index.mjs";
+const i = {
+  install: (r) => {
+    Object.entries(t).forEach(([o, e]) => {
+      r.component(e.name, e);
+    });
+  }
+};
+export {
+  s as SpireEditor,
+  i as default
+};

package/es/src/components.d.ts

@@ -0,0 +1,8 @@
+import * as components from "./index";
+declare module "@vue/runtime-core" {
+    export interface GlobalComponents {
+        EaButton: typeof components.Button;
+        EaIcon: typeof components.Icon;
+    }
+}
+export { };

package/es/src/index.d.ts

@@ -0,0 +1 @@
+export * from './officeJs-editor';

package/es/src/index.mjs

@@ -0,0 +1,4 @@
+import { SpireEditor as e } from "./officeJs-editor/index.mjs";
+export {
+  e as SpireEditor
+};

package/es/src/officeJs-editor/index.d.ts

@@ -0,0 +1,50 @@
+import type { Plugin } from "vue";
+type SFCWithInstall<T> = T & Plugin;
+export declare const SpireEditor: SFCWithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    config: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    serverUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    editorType: {
+        document: string;
+        pdf: string;
+        spreadsheet: string;
+        presentation: string;
+    };
+    SpireEditor: any;
+    baseUrl: string;
+    realConfig: object;
+    props: any;
+    init: () => void;
+    initEditor: () => void;
+    loadScript: () => void;
+    initConfig: () => void;
+    initServerUrl: () => void;
+    OnWindowReSize: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    config: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    serverUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    id: string;
+    serverUrl: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export default SpireEditor;

package/es/src/officeJs-editor/index.mjs

@@ -0,0 +1,9 @@
+import e from "./officeJs-editor.vue.mjs";
+const r = (t) => (t.install = (n) => {
+  const a = t.name;
+  n.component(a, t);
+}, t), i = r(e);
+export {
+  i as SpireEditor,
+  i as default
+};

package/es/src/officeJs-editor/officeJs-editor.vue.d.ts

@@ -0,0 +1,59 @@
+declare global {
+    interface Window {
+        SpireofficejsEditors?: {
+            OpenApi: (id: string, config: any) => void;
+        };
+        SpireofficeEditor?: {
+            OpenApi?: (id: string, config: any) => void;
+        };
+        Api: any;
+    }
+}
+declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    config: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    serverUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    editorType: {
+        document: string;
+        pdf: string;
+        spreadsheet: string;
+        presentation: string;
+    };
+    SpireEditor: any;
+    baseUrl: string;
+    realConfig: object;
+    props: any;
+    init: () => void;
+    initEditor: () => void;
+    loadScript: () => void;
+    initConfig: () => void;
+    initServerUrl: () => void;
+    OnWindowReSize: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    config: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    serverUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    id: string;
+    serverUrl: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _sfc_main;

package/es/src/officeJs-editor/officeJs-editor.vue.mjs

@@ -0,0 +1,61 @@
+import { defineComponent as g, onMounted as m, openBlock as h, createElementBlock as E, createElementVNode as v } from "vue";
+import "./style/index.css";
+import r from "spire.officejs-web-editors";
+const w = { class: "spire-officejs-EditorWarpper" }, S = ["id"], A = /* @__PURE__ */ g({
+  name: "spire-officejs-Editor",
+  __name: "officeJs-editor",
+  props: {
+    id: {
+      type: String,
+      default: "SpireofficejsEditor"
+    },
+    config: {
+      type: Object,
+      required: !0
+    },
+    serverUrl: {
+      type: String,
+      default: "http://127.0.0.1:7000"
+    }
+  },
+  setup(n) {
+    let o, t, s;
+    const i = n;
+    m(() => {
+      l();
+    });
+    function l() {
+      i.config && i.config.editorAttrs ? (f(), a(), d()) : setTimeout(() => {
+        l();
+      }, 100);
+    }
+    function c() {
+      if (r && r.OpenApi) {
+        const e = r.OpenApi;
+        o = new e(i.id, s), window.Api = o.GetOpenApi(), u();
+      }
+    }
+    function d() {
+      var e = document.createElement("script"), p = `${t}/editors/spireapi/SpireCloudEditor.js`;
+      e.setAttribute("src", p), e.onload = () => c(), document.body.appendChild(e);
+    }
+    function f() {
+      s = i.config;
+    }
+    function a() {
+      i.serverUrl ? i.serverUrl.endsWith("/") ? t = i.serverUrl.substring(0, i.serverUrl.length - 1) : t = i.serverUrl : t = window.location.origin;
+    }
+    function u() {
+      let e = document.getElementsByClassName(
+        "spire-officejs-EditorWarpper"
+      );
+      e.length && (e[0] && (e[0].style.height = screen.availHeight + "px"), window.scrollTo(0, -1), e[0] && (e[0].style.height = window.innerHeight + "px"));
+    }
+    return (e, p) => (h(), E("div", w, [
+      v("div", { id: n.id }, null, 8, S)
+    ]));
+  }
+});
+export {
+  A as default
+};

package/es/src/officeJs-editor/officeJs-editor.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./officeJs-editor.vue.mjs";
+export {
+  f as default
+};

package/es/src/officeJs-editor/style/index.css

@@ -0,0 +1,5 @@
+.spire-officejs-EditorWarpper,
+iframe {
+  min-height: 100%;
+  min-width: 100%;
+}

package/lib/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./src/index.js"),r=require("./src/officeJs-editor/index.js"),n={install:t=>{Object.entries(i).forEach(([o,e])=>{t.component(e.name,e)})}};exports.SpireEditor=r.SpireEditor;exports.default=n;

package/lib/src/components.d.ts

@@ -0,0 +1,8 @@
+import * as components from "./index";
+declare module "@vue/runtime-core" {
+    export interface GlobalComponents {
+        EaButton: typeof components.Button;
+        EaIcon: typeof components.Icon;
+    }
+}
+export { };

package/lib/src/index.d.ts

@@ -0,0 +1 @@
+export * from './officeJs-editor';

package/lib/src/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./officeJs-editor/index.js");exports.SpireEditor=e.SpireEditor;

package/lib/src/officeJs-editor/index.d.ts

@@ -0,0 +1,50 @@
+import type { Plugin } from "vue";
+type SFCWithInstall<T> = T & Plugin;
+export declare const SpireEditor: SFCWithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    config: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    serverUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    editorType: {
+        document: string;
+        pdf: string;
+        spreadsheet: string;
+        presentation: string;
+    };
+    SpireEditor: any;
+    baseUrl: string;
+    realConfig: object;
+    props: any;
+    init: () => void;
+    initEditor: () => void;
+    loadScript: () => void;
+    initConfig: () => void;
+    initServerUrl: () => void;
+    OnWindowReSize: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    config: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    serverUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    id: string;
+    serverUrl: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export default SpireEditor;

package/lib/src/officeJs-editor/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./officeJs-editor.vue.js"),u=e=>(e.install=r=>{const i=e.name;r.component(i,e)},e),t=u(n.default);exports.SpireEditor=t;exports.default=t;

package/lib/src/officeJs-editor/officeJs-editor.vue.d.ts

@@ -0,0 +1,59 @@
+declare global {
+    interface Window {
+        SpireofficejsEditors?: {
+            OpenApi: (id: string, config: any) => void;
+        };
+        SpireofficeEditor?: {
+            OpenApi?: (id: string, config: any) => void;
+        };
+        Api: any;
+    }
+}
+declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    config: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    serverUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    editorType: {
+        document: string;
+        pdf: string;
+        spreadsheet: string;
+        presentation: string;
+    };
+    SpireEditor: any;
+    baseUrl: string;
+    realConfig: object;
+    props: any;
+    init: () => void;
+    initEditor: () => void;
+    loadScript: () => void;
+    initConfig: () => void;
+    initServerUrl: () => void;
+    OnWindowReSize: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    config: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    serverUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    id: string;
+    serverUrl: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _sfc_main;

package/lib/src/officeJs-editor/officeJs-editor.vue.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");require("./style/index.css");const n=require("spire.officejs-web-editors"),v={class:"spire-officejs-EditorWarpper"},h=["id"],m=t.defineComponent({name:"spire-officejs-Editor",__name:"officeJs-editor",props:{id:{type:String,default:"SpireofficejsEditor"},config:{type:Object,required:!0},serverUrl:{type:String,default:"http://127.0.0.1:7000"}},setup(o){let s,r,l;const i=o;t.onMounted(()=>{c()});function c(){i.config&&i.config.editorAttrs?(u(),a(),f()):setTimeout(()=>{c()},100)}function p(){if(n&&n.OpenApi){const e=n.OpenApi;s=new e(i.id,l),window.Api=s.GetOpenApi(),g()}}function f(){var e=document.createElement("script"),d=`${r}/editors/spireapi/SpireCloudEditor.js`;e.setAttribute("src",d),e.onload=()=>p(),document.body.appendChild(e)}function u(){l=i.config}function a(){i.serverUrl?i.serverUrl.endsWith("/")?r=i.serverUrl.substring(0,i.serverUrl.length-1):r=i.serverUrl:r=window.location.origin}function g(){let e=document.getElementsByClassName("spire-officejs-EditorWarpper");e.length&&(e[0]&&(e[0].style.height=screen.availHeight+"px"),window.scrollTo(0,-1),e[0]&&(e[0].style.height=window.innerHeight+"px"))}return(e,d)=>(t.openBlock(),t.createElementBlock("div",v,[t.createElementVNode("div",{id:o.id},null,8,h)]))}});exports.default=m;

package/lib/src/officeJs-editor/officeJs-editor.vue2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./officeJs-editor.vue.js");exports.default=e.default;

package/lib/src/officeJs-editor/style/index.css

@@ -0,0 +1,5 @@
+.spire-officejs-EditorWarpper,
+iframe {
+  min-height: 100%;
+  min-width: 100%;
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "spire.officejs-vue",
+  "version": "10.11.4",
+  "main": "lib/index.js",
+  "module": "es/index.mjs",
+  "files": [
+    "es",
+    "lib"
+  ],
+  "keywords": [
+    "spire.officejs",
+    "vue3",
+    "TypeScript"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "spire.officejs": "^1.0.0",
+    "vite-plugin-spire.officejs": "^1.0.0"
+  },
+  "author": "e-iceblue",
+  "license": "MIT",
+  "description": "",
+  "typings": "lib/index.d.ts"
+}