{"_id":"@composy/word-vue","name":"@composy/word-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/word-vue","version":"0.0.1","description":"Vue 3 adapter for LDesign Word viewer","keywords":["word","docx","viewer","vue","vue3","component","ldesign"],"author":{"name":"ldesign"},"license":"MIT","type":"module","sideEffects":["**/*.css","**/*.vue"],"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./components":{"types":"./es/components/index.d.ts","import":"./es/components/index.js","require":"./lib/components/index.cjs","default":"./es/components/index.js"},"./components/*":{"types":"./es/components/*.d.ts","import":"./es/components/*.js","require":"./lib/components/*.cjs","default":"./es/components/*.js"},"./composables":{"types":"./es/composables/index.d.ts","import":"./es/composables/index.js","require":"./lib/composables/index.cjs","default":"./es/composables/index.js"},"./composables/*":{"types":"./es/composables/*.d.ts","import":"./es/composables/*.js","require":"./lib/composables/*.cjs","default":"./es/composables/*.js"},"./plugins":{"types":"./es/plugins/index.d.ts","import":"./es/plugins/index.js","require":"./lib/plugins/index.cjs","default":"./es/plugins/index.js"},"./plugins/*":{"types":"./es/plugins/*.d.ts","import":"./es/plugins/*.js","require":"./lib/plugins/*.cjs","default":"./es/plugins/*.js"},"./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./es/index.js","types":"./es/index.d.ts","typings":"./es/index.d.ts","browser":"./dist/index.js","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","scripts":{"build":"ldesign-builder build && node --experimental-strip-types ../../../../scripts/index.ts workspace:normalize-package-output --cwd .. --target vue","dev":"ldesign-builder build --watch","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","type-check":"tsc -p tsconfig.typecheck.json --noEmit","test":"ltesting run:unit","test:run":"ltesting run:unit","test:watch":"ltesting run:unit --watch","test:coverage":"ltesting run:unit --coverage","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard"},"dependencies":{"@composy/word-core":"^0.0.1"},"peerDependencies":{"vue":"^3.5.32"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","@types/node":"26.1.1","eslint":"10.7.0","typescript":"5.9.3","vue":"3.5.39","vue-tsc":"^3.3.7"},"_id":"@composy/word-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-bunUoz7iPnipVuDviaOrAXSzEpVo8RX7Sn8HaebeXFg15XBKo4MwmCRYL9O0MDzdMJnyl/+Ew8LekqS0eMMZ/Q==","shasum":"de08101cdef7015b61f983cbb6773b9f2ce6f118","tarball":"https://registry.npmjs.org/@composy/word-vue/-/word-vue-0.0.1.tgz","fileCount":149,"unpackedSize":481534,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCQ25hCGJP8BR3e0OlkgHVl36cuiOMqtgjkMJvc7RDjgwIgEux1K3r1GflZ7KkQaGVx7OGmCXNhY6fRuSPNxXDswOE="}]},"_npmUser":{"name":"swimly","email":"979741120@qq.com"},"directories":{},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/word-vue_0.0.1_1786949382509_0.5685178729136044"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:49:42.310Z","0.0.1":"2026-08-17T06:49:42.650Z","modified":"2026-08-17T06:49:42.873Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue 3 adapter for LDesign Word viewer","keywords":["word","docx","viewer","vue","vue3","component","ldesign"],"author":{"name":"ldesign"},"license":"MIT","readme":"# @composy/word-vue\n\n`@composy/word-vue` 是 Word Viewer 的 Vue 3 适配层。它复用 `@composy/word-core`，只负责 Vue 组件、组合式函数、插件安装和 Vue app 生命周期桥接。\n\n## 安装\n\n```bash\npnpm add @composy/word-vue @composy/word-core vue\n```\n\n全局样式来自 core：\n\n```ts\nimport '@composy/word-core/styles'\n```\n\n## 全局插件\n\n```ts\nimport { createApp } from 'vue'\nimport { WordViewerVuePlugin } from '@composy/word-vue'\nimport '@composy/word-core/styles'\n\nconst app = createApp(App)\n\napp.use(WordViewerVuePlugin, {\n  componentName: 'WordViewer',\n  registerGlobalProperties: true,\n})\n\napp.mount('#app')\n```\n\n## 组件用法\n\n```vue\n<template>\n  <WordViewer\n    :file=\"file\"\n    :scale=\"1\"\n    theme=\"light\"\n    :show-toolbar=\"true\"\n    :show-toc=\"true\"\n    :enable-search=\"true\"\n    @load=\"handleLoad\"\n    @search-result=\"handleSearchResult\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { WordViewer, type SearchResult, type WordDocument } from '@composy/word-vue'\n\nconst file = ref<File>()\n\nfunction handleLoad(document: WordDocument, pageCount: number): void {\n  console.log(document.metadata.title, pageCount)\n}\n\nfunction handleSearchResult(results: SearchResult[], currentIndex: number): void {\n  console.log(results.length, currentIndex)\n}\n</script>\n```\n\n## 组合式函数\n\n```ts\nimport { onMounted, ref } from 'vue'\nimport { useWordViewer } from '@composy/word-vue'\n\nconst container = ref<HTMLElement>()\nconst { init, loadFile, searchNext, clearSearch, destroy } = useWordViewer()\n\nonMounted(() => {\n  if (container.value) {\n    init(container.value, {\n      enableToolbar: true,\n      enableToc: true,\n    })\n  }\n})\n```\n\n可用 composables：\n\n- `useWordViewer()`：创建和管理 core `WordViewer` 实例。\n- `useDocumentDrop()`：拖拽加载 Word 文件。\n- `useWatermark()`：响应式水印控制。\n- `useDocumentInfo()`：文档元信息和统计。\n- `useKeyboardShortcuts()`：快捷键启停与自定义注册。\n\n## Engine 适配\n\n```ts\nimport { wordViewerEnginePlugin } from '@composy/word-vue'\n\nexport const plugins = [\n  wordViewerEnginePlugin,\n]\n```\n\nEngine plugin 会注册默认配置、实例集合和 `createViewer` / `destroyViewer` 服务，并在 `beforeDestroy` 时清理所有实例。\n\n## 样式和 class\n\n- Vue 组件外层 class 使用 `ldesign-word-vue-viewer`。\n- core 内部 class 使用 `ldesign-word-*`。\n- 颜色、间距、圆角、阴影和动效都沿用 core 的 CSS 变量规范。\n- 业务侧可通过覆盖 `.ldesign-word-root` 上的 `--ldesign-word-*` 变量完成主题扩展。\n\n## 构建产物\n\n```text\ndist/  # UMD 与压缩产物\nes/    # ESM preserveModules\nesm/   # ESM 镜像产物\nlib/   # CommonJS preserveModules\n```\n\n## 验证\n\n```bash\npnpm -C libraries/word/packages/vue run type-check\npnpm -C libraries/word/packages/vue run build\n```\n","readmeFilename":"README.md","_rev":"1-22c7dec21a13226c90addbcf97da7284"}