document-viewer-vue3 0.1.0

package/document-viewer-vue3/style.css

@@ -0,0 +1,2 @@
+.document-viewer{--dv-border:#d8dee8;--dv-surface:#eef2f6;--dv-paper:#fff;--dv-ink:#172033;--dv-muted:#657187;--dv-accent:#3159c7;width:100%;height:var(--document-viewer-height,100%);min-height:280px;color:var(--dv-ink);background:var(--dv-paper);border:1px solid var(--dv-border);box-sizing:border-box;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;border-radius:12px;flex-direction:column;display:flex;position:relative;overflow:hidden}.document-viewer[data-theme=dark]{--dv-border:#334155;--dv-surface:#111827;--dv-paper:#1e293b;--dv-ink:#f8fafc;--dv-muted:#94a3b8;--dv-accent:#7ea2ff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){.document-viewer[data-theme=system]{--dv-border:#334155;--dv-surface:#111827;--dv-paper:#1e293b;--dv-ink:#f8fafc;--dv-muted:#94a3b8;--dv-accent:#7ea2ff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}.document-viewer *,.document-viewer :before,.document-viewer :after{box-sizing:border-box}.document-viewer__toolbar{z-index:5;min-height:48px;color:var(--dv-ink);background:color-mix(in srgb, var(--dv-paper) 94%, transparent);border-bottom:1px solid var(--dv-border);align-items:center;gap:12px;padding:6px 10px;display:flex;position:relative;box-shadow:0 1px 8px #0f172a0d}.document-viewer__identity{align-items:center;gap:9px;min-width:0;margin-right:auto;display:flex}.document-viewer__identity>span{color:#fff;background:var(--dv-accent);text-align:center;letter-spacing:.05em;border-radius:5px;min-width:38px;padding:5px 7px;font:750 10px/1 ui-monospace,Consolas,monospace}.document-viewer__identity strong{text-overflow:ellipsis;white-space:nowrap;max-width:min(38vw,440px);font:650 13px/1.2 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow:hidden}.document-viewer__identity small{color:var(--dv-muted);white-space:nowrap}.document-viewer__actions{align-items:center;gap:3px;display:flex}.document-viewer__actions button,.document-viewer__state button{min-width:32px;height:32px;color:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;padding:0 8px;font:600 14px/1 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.document-viewer__actions button:hover:not(:disabled){background:color-mix(in srgb, var(--dv-accent) 10%, transparent);border-color:color-mix(in srgb, var(--dv-accent) 20%, transparent)}.document-viewer__actions button:disabled{opacity:.35;cursor:not-allowed}.document-viewer__actions .document-viewer__zoom{min-width:56px;color:var(--dv-muted);font-size:12px}.document-viewer__separator{background:var(--dv-border);width:1px;height:20px;margin:0 4px}.document-viewer__viewport{overscroll-behavior:contain;background:var(--dv-surface);flex:1;min-height:0;overflow:auto}.document-viewer__content{zoom:var(--document-viewer-zoom,1);min-width:100%;min-height:100%}.document-viewer__state{text-align:center;background:linear-gradient(90deg, #3159c70d 1px, transparent 1px), linear-gradient(#3159c70d 1px, transparent 1px), var(--dv-surface);background-size:24px 24px;flex:1;place-content:center;justify-items:center;gap:14px;padding:32px;display:grid}.document-viewer__state p{max-width:560px;color:var(--dv-muted);margin:0;font:500 14px/1.7 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.document-viewer__state button{color:#fff;background:var(--dv-accent);min-width:92px}.document-viewer__file-mark{color:#fff;background:var(--dv-accent);letter-spacing:.08em;border-radius:9px 9px 9px 3px;place-items:center;min-width:54px;height:54px;padding:0 10px;font:750 12px/1 ui-monospace,Consolas,monospace;display:grid;box-shadow:0 12px 24px #3159c738}.document-viewer__state.is-error .document-viewer__file-mark{background:#c2413b}.document-viewer__loading{z-index:8;width:min(360px,100% - 32px);color:var(--dv-ink);background:color-mix(in srgb, var(--dv-paper) 94%, transparent);border:1px solid var(--dv-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;align-items:center;gap:11px;padding:11px 14px;display:flex;position:absolute;top:64px;left:50%;transform:translate(-50%);box-shadow:0 14px 40px #0f172a26}.document-viewer__loading>div{flex:1;gap:7px;min-width:0;display:grid}.document-viewer__loading strong{text-overflow:ellipsis;white-space:nowrap;font:600 12px/1.2 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow:hidden}.document-viewer__loading div>span{background:var(--dv-border);border-radius:99px;height:3px;overflow:hidden}.document-viewer__loading i{background:var(--dv-accent);height:100%;transition:width .18s;display:block}.document-viewer__spinner{border:2px solid var(--dv-border);border-top-color:var(--dv-accent);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite document-viewer-spin}.document-renderer--word{padding:24px}.document-renderer--word .docx-wrapper{background:0 0!important;padding:0!important}.document-renderer--word section.docx{margin:0 auto 22px;box-shadow:0 5px 22px #0f172a1f}.document-renderer--doc{padding:0}.document-renderer--doc .msdoc-stage{background:var(--dv-surface);flex-direction:column;align-items:center;gap:22px;min-width:max-content;min-height:100%;padding:24px;display:flex}.document-renderer--doc .msdoc-page{background:#fff;width:794px;min-height:1123px;box-shadow:0 5px 22px #0f172a24}.document-renderer--doc .msdoc-page>.msdoc-root{overflow-wrap:anywhere;width:794px;max-width:none;min-height:1123px;padding:76px 72px}.document-renderer--doc .msdoc-table{border-collapse:collapse;width:auto;max-width:100%;display:table;table-layout:auto!important}.document-renderer--doc .msdoc-cell{word-break:normal;overflow-wrap:normal;white-space:normal;min-width:1.5em}.document-renderer--doc .msdoc-cell .msdoc-paragraph{word-break:normal;overflow-wrap:break-word}.document-renderer--doc .msdoc-page-break{display:none}.document-workbook{color:#172033;background:#fff;flex-direction:column;width:max-content;min-width:100%;min-height:100%;display:flex}.document-workbook__tabs{z-index:3;background:#f7f8fa;border-top:1px solid #d8dee8;order:2;gap:2px;min-width:100%;padding:5px 8px;display:flex;position:sticky;bottom:0}.document-workbook__tabs button{color:#526076;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:5px;max-width:220px;padding:6px 13px;overflow:hidden}.document-workbook__tabs button.is-active{color:#173f8f;background:#e5edff;font-weight:700}.document-workbook__sheet{order:1;padding-bottom:8px}.document-sheet{border-spacing:0;border-collapse:separate;table-layout:fixed;min-width:100%;font:12px/1.4 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.document-sheet th,.document-sheet td{text-overflow:ellipsis;white-space:nowrap;background:#fff;border-bottom:1px solid #e1e5eb;border-right:1px solid #e1e5eb;min-width:96px;height:27px;padding:4px 7px;overflow:hidden}.document-sheet thead th{z-index:2;color:#5f6b7d;text-align:center;background:#f3f5f8;min-width:42px;font-weight:600;position:sticky;top:0}.document-sheet .document-sheet__row-number{z-index:1;color:#778296;text-align:center;background:#f3f5f8;width:42px;min-width:42px;font-weight:500;position:sticky;left:0}.document-sheet__corner{width:42px;left:0;z-index:3!important}.document-sheet td.is-number{text-align:right;font-variant-numeric:tabular-nums}.document-sheet td a{color:#245ac7}.document-renderer--pdf{justify-items:center;gap:20px;padding:24px;display:grid}.document-pdf-page{background:#fff;max-width:100%;overflow:hidden;box-shadow:0 5px 22px #0f172a29}.document-pdf-page canvas{max-width:none;display:block}.document-renderer--presentation{justify-items:center;gap:24px;padding:24px;display:grid}.document-slide{color:#172033;background:#fff;width:min(960px,100vw - 96px);position:relative;overflow:hidden;box-shadow:0 7px 26px #0f172a2e;container-type:inline-size}.document-slide__shape,.document-slide__picture{position:absolute}.document-slide__shape{white-space:pre-wrap;align-items:center;padding:.3%;line-height:1.18;display:flex;overflow:hidden}.document-slide__picture{object-fit:contain}@keyframes document-viewer-spin{to{transform:rotate(360deg)}}@media (max-width:640px){.document-viewer__identity small{display:none}.document-viewer__identity strong{max-width:30vw}.document-viewer__toolbar{gap:6px;padding-inline-start:6px;padding-inline-end:6px}.document-viewer__actions .document-viewer__zoom{min-width:48px}.document-renderer--word,.document-renderer--pdf,.document-renderer--presentation{padding:12px}.document-slide{width:calc(100vw - 52px)}}@media print{body *{visibility:hidden!important}.document-viewer,.document-viewer *{visibility:visible!important}.document-viewer{border:0;position:absolute;top:0;bottom:0;left:0;right:0;overflow:visible;height:auto!important}.document-viewer__toolbar{display:none}.document-viewer__viewport{background:#fff;overflow:visible}.document-pdf-page,.document-slide,.document-renderer--word section.docx,.document-renderer--doc .msdoc-page{break-after:page;box-shadow:none}}
+/*$vite$:1*/

package/document-viewer-vue3/types/components/DocumentViewer.vue.d.ts

@@ -0,0 +1,42 @@
+import { DocumentLoadContext, DocumentProgress, DocumentViewerInstance, DocumentViewerProps, DocumentZoomState } from '../types';
+declare var __VLS_1: {
+    zoom: DocumentZoomState;
+    status: "error" | "empty" | "loading" | "ready" | "unsupported";
+}, __VLS_3: {
+    zoom: DocumentZoomState;
+    status: "error" | "empty" | "loading" | "ready" | "unsupported";
+};
+type __VLS_Slots = {} & {
+    'toolbar-start'?: (props: typeof __VLS_1) => any;
+} & {
+    'toolbar-end'?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<DocumentViewerProps, DocumentViewerInstance, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (message: string) => any;
+    progress: (progress: DocumentProgress) => any;
+    "load-start": (context: DocumentLoadContext) => any;
+    "load-complete": (context: DocumentLoadContext) => any;
+    "unload-start": (context: DocumentLoadContext) => any;
+    "unload-complete": (context: DocumentLoadContext) => any;
+    "zoom-change": (state: DocumentZoomState) => any;
+}, string, import('vue').PublicProps, Readonly<DocumentViewerProps> & Readonly<{
+    onError?: ((message: string) => any) | undefined;
+    onProgress?: ((progress: DocumentProgress) => any) | undefined;
+    "onLoad-start"?: ((context: DocumentLoadContext) => any) | undefined;
+    "onLoad-complete"?: ((context: DocumentLoadContext) => any) | undefined;
+    "onUnload-start"?: ((context: DocumentLoadContext) => any) | undefined;
+    "onUnload-complete"?: ((context: DocumentLoadContext) => any) | undefined;
+    "onZoom-change"?: ((state: DocumentZoomState) => any) | undefined;
+}>, {
+    height: string | number;
+    strict: boolean;
+    emptyText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/document-viewer-vue3/types/formats.d.ts

@@ -0,0 +1,7 @@
+export declare const DOCUMENT_VIEWER_EXTENSIONS: readonly ["doc", "dot", "docx", "docm", "dotx", "dotm", "xls", "xlsx", "xlsm", "xlsb", "xlt", "xltx", "xltm", "pdf", "pptx", "pptm", "pot", "potx", "potm", "ppsx", "ppsm"];
+export type DocumentKind = 'word' | 'spreadsheet' | 'pdf' | 'presentation';
+export type DocumentViewerExtension = typeof DOCUMENT_VIEWER_EXTENSIONS[number];
+export declare const DOCUMENT_VIEWER_ACCEPT: string;
+export declare function getDocumentExtension(filename: string): string;
+export declare function isSupportedDocumentName(filename: string): boolean;
+export declare function getDocumentKind(extension: string): DocumentKind | null;

package/document-viewer-vue3/types/index.d.ts

@@ -0,0 +1,11 @@
+import { Plugin } from 'vue';
+import { default as DocumentViewer } from './components/DocumentViewer.vue';
+export interface DocumentViewerPluginOptions {
+    componentName?: string;
+}
+export declare const DocumentViewerPlugin: Plugin<[DocumentViewerPluginOptions?]>;
+export { DocumentViewer };
+export { DOCUMENT_VIEWER_ACCEPT, DOCUMENT_VIEWER_EXTENSIONS, getDocumentExtension, getDocumentKind, isSupportedDocumentName, } from './formats';
+export type { DocumentViewerExtension, DocumentKind, } from './formats';
+export type { DocumentViewerEventMap, DocumentViewerInstance, DocumentLoadContext, DocumentViewerOptions, DocumentViewerProps, DocumentProgress, DocumentViewerTheme, DocumentZoomState, } from './types';
+export default DocumentViewerPlugin;

package/document-viewer-vue3/types/types.d.ts

@@ -0,0 +1,80 @@
+import { DocumentKind } from './formats';
+export type DocumentViewerTheme = 'light' | 'dark' | 'system';
+export interface DocumentViewerOptions {
+    /** Show the built-in compact toolbar. */
+    toolbar?: boolean;
+    /** Color theme used by the component chrome and render surface. */
+    theme?: DocumentViewerTheme;
+    /** Initial CSS zoom ratio. */
+    initialZoom?: number;
+    /** Lowest permitted zoom ratio. */
+    minZoom?: number;
+    /** Highest permitted zoom ratio. */
+    maxZoom?: number;
+    /** Rows rendered per spreadsheet sheet. */
+    spreadsheetMaxRows?: number;
+    /** Columns rendered per spreadsheet sheet. */
+    spreadsheetMaxColumns?: number;
+    /** Extra init options passed to fetch() for remote URLs. */
+    fetchOptions?: RequestInit;
+}
+export interface DocumentViewerProps {
+    file?: File;
+    url?: string;
+    filename?: string;
+    height?: string | number;
+    strict?: boolean;
+    emptyText?: string;
+    options?: DocumentViewerOptions;
+}
+export interface DocumentLoadContext {
+    filename: string;
+    extension: string;
+    kind: DocumentKind;
+    byteLength?: number;
+    pageCount?: number;
+}
+export interface DocumentProgress {
+    current: number;
+    total: number;
+    label?: string;
+}
+export interface DocumentZoomState {
+    scale: number;
+    percent: number;
+}
+export interface DocumentRendererController {
+    pageCount?: number;
+    destroy(): void | Promise<void>;
+}
+export interface DocumentRenderContext {
+    container: HTMLDivElement;
+    buffer: ArrayBuffer;
+    extension: string;
+    filename: string;
+    signal: AbortSignal;
+    options: DocumentViewerOptions;
+    onProgress(progress: DocumentProgress): void;
+}
+export type DocumentRenderer = (context: DocumentRenderContext) => Promise<DocumentRendererController>;
+export interface DocumentViewerEventMap {
+    'load-start': DocumentLoadContext;
+    'load-complete': DocumentLoadContext;
+    'unload-start': DocumentLoadContext;
+    'unload-complete': DocumentLoadContext;
+    progress: DocumentProgress;
+    'zoom-change': DocumentZoomState;
+    error: string;
+}
+export interface DocumentViewerInstance {
+    reload(): Promise<void>;
+    destroy(): Promise<void>;
+    zoomIn(): DocumentZoomState;
+    zoomOut(): DocumentZoomState;
+    resetZoom(): DocumentZoomState;
+    setZoom(scale: number): DocumentZoomState;
+    getZoomState(): DocumentZoomState;
+    downloadOriginalFile(): void;
+    print(): void;
+    getScrollContainer(): HTMLDivElement | null;
+}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "document-viewer-vue3",
+  "version": "0.1.0",
+  "description": "Browser-native Vue 3 viewer for Word, Excel, PDF, and PowerPoint documents.",
+  "homepage": "https://banyan666.github.io/DocumentViewerV3/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/banyan666/DocumentViewerV3.git"
+  },
+  "bugs": {
+    "url": "https://github.com/banyan666/DocumentViewerV3/issues"
+  },
+  "keywords": [
+    "vue3",
+    "document-viewer",
+    "word-viewer",
+    "excel-viewer",
+    "pdf-viewer",
+    "ppt-viewer"
+  ],
+  "packageManager": "pnpm@12.6.0",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./document-viewer-vue3/document-viewer-vue3.umd.cjs",
+  "module": "./document-viewer-vue3/document-viewer-vue3.js",
+  "types": "./document-viewer-vue3/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./document-viewer-vue3/types/index.d.ts",
+      "import": "./document-viewer-vue3/document-viewer-vue3.js",
+      "require": "./document-viewer-vue3/document-viewer-vue3.umd.cjs",
+      "default": "./document-viewer-vue3/document-viewer-vue3.js"
+    },
+    "./style.css": "./document-viewer-vue3/style.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "document-viewer-vue3",
+    "README.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "scripts": {
+    "dev": "pnpm dev:examples",
+    "dev:examples": "vite --host 127.0.0.1",
+    "type-check": "vue-tsc --noEmit -p tsconfig.json",
+    "build": "pnpm type-check && vite build --config vite.lib.config.ts",
+    "build:examples": "pnpm type-check && vite build",
+    "build:pages": "pnpm build:examples && pnpm docs:build && node scripts/prepare-pages.mjs",
+    "docs:dev": "vitepress dev docs --host 127.0.0.1",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs --host 127.0.0.1",
+    "preview": "vite preview --host 127.0.0.1",
+    "pack:check": "pnpm build && npm pack --dry-run",
+    "verify": "pnpm build && pnpm build:examples && pnpm docs:build && node scripts/verify-package.mjs",
+    "prepublishOnly": "pnpm verify"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3 <4"
+  },
+  "devDependencies": {
+    "@types/node": "^26.5.1",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/tsconfig": "^0.9.1",
+    "docx-preview": "0.4.1",
+    "dompurify": "3.4.15",
+    "jszip": "3.10.2",
+    "pdfjs-dist": "5.4.624",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.0",
+    "vite-plugin-dts": "^5.1.0",
+    "vitepress": "^1.6.4",
+    "vue": "^3.5.42",
+    "vue-tsc": "^3.3.4",
+    "xlsx": "0.18.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=20.19"
+  },
+  "license": "MIT"
+}