@flyfish-group/file-viewer-web 2.0.10 → 2.0.11

package/README.en.md

@@ -1,38 +1,43 @@
 # @flyfish-group/file-viewer-web
 
-Pure web file preview package. This package is the historical alias of `@file-viewer/web` and now provides the same native DOM mounting API: it creates the complete Flyfish Viewer inside your target container.
+Pure web file preview package. This package is the historical alias of `@file-viewer/web` and ships the same `<flyfish-file-viewer>` Web Component, imperative `mountViewer` controller, IIFE global bundle, and asset-copy CLI.
 
 ```bash
-npm install @flyfish-group/file-viewer-web@2.0.1
+npm install @flyfish-group/file-viewer-web
+```
+
+```html
+<flyfish-file-viewer
+  id="viewer"
+  src="/files/demo.pdf"
+  theme="light"
+  toolbar-position="bottom-right"
+  style="display:block;height:720px"
+></flyfish-file-viewer>
 ```
 
 ```ts
-import { mountViewer } from '@flyfish-group/file-viewer-web'
-
-const controller = mountViewer(document.getElementById('viewer')!, {
-  url: '/files/demo.pdf',
-  options: {
-    theme: 'light',
-    toolbar: { position: 'bottom-right' },
-    search: { maxMatches: 1000 }
-  },
-  onEvent(event) {
-    console.log(event.type, event.event, event.payload)
-  }
-})
+import { defineFileViewerElement } from '@flyfish-group/file-viewer-web'
 
-controller.reload()
+defineFileViewerElement()
+
+const viewer = document.getElementById('viewer')
+viewer.addEventListener('viewer-event', event => {
+  console.log(event.detail.type, event.detail.payload)
+})
+viewer.reload()
 ```
 
+Use `mountViewer(container, options)` when you need a fully imperative controller.
+
 For authenticated files, download the file in your host application first and pass a `Blob` plus a filename:
 
 ```ts
 const blob = await fetch('/api/files/contract', { credentials: 'include' }).then(res => res.blob())
 
-mountViewer(document.getElementById('viewer')!, {
-  file: blob,
-  name: 'contract.pdf'
-})
+const viewer = document.querySelector('flyfish-file-viewer')
+viewer.file = blob
+viewer.name = 'contract.pdf'
 ```
 
 ## Script Tag Usage
@@ -40,14 +45,12 @@ mountViewer(document.getElementById('viewer')!, {
 No-build projects can self-host the IIFE bundle. It exposes `window.FlyfishFileViewerWeb`:
 
 ```html
-<div id="viewer" style="height: 720px"></div>
 <script src="/vendor/file-viewer-web/flyfish-file-viewer-web.iife.js"></script>
-<script>
-  window.FlyfishFileViewerWeb.mountViewer(document.getElementById('viewer'), {
-    url: '/files/demo.docx',
-    options: { theme: 'light' }
-  })
-</script>
+<flyfish-file-viewer
+  src="/files/demo.docx"
+  theme="light"
+  style="display:block;height:720px"
+></flyfish-file-viewer>
 ```
 
 Browsers cannot resolve a bare package name such as `@flyfish-group/file-viewer-web` without a build tool. Use a static URL, the IIFE global bundle, or an import map. Workers, WASM files, and examples can be self-hosted with:

package/README.md

@@ -1,41 +1,43 @@
 # @flyfish-group/file-viewer-web
 
-纯 Web 文件预览组件。这个包是 `@file-viewer/web` 的历史包名同步版本，当前只提供 native DOM 挂载能力: 在目标容器内直接创建完整 Flyfish Viewer，不需要额外的静态页面协议。
+纯 Web 文件预览组件。这个包是 `@file-viewer/web` 的历史包名同步版本，提供同样的 `<flyfish-file-viewer>` 原生 Web Component、`mountViewer` 命令式 controller、IIFE 全局脚本和资源复制 CLI。
 
 ```bash
-npm install @flyfish-group/file-viewer-web@2.0.1
+npm install @flyfish-group/file-viewer-web
+```
+
+```html
+<flyfish-file-viewer
+  id="viewer"
+  src="https://example.com/demo.pdf"
+  theme="light"
+  toolbar-position="bottom-right"
+  style="display:block;height:720px"
+></flyfish-file-viewer>
 ```
 
 ```ts
-import { mountViewer } from '@flyfish-group/file-viewer-web'
-
-const controller = mountViewer(document.getElementById('viewer')!, {
-  url: 'https://example.com/demo.pdf',
-  options: {
-    theme: 'light',
-    toolbar: { position: 'bottom-right' },
-    search: { maxMatches: 1000 },
-    pdf: { toolbar: true },
-    watermark: { text: '内部预览', opacity: 0.14 },
-    archive: { cache: true }
-  },
-  onEvent(event) {
-    console.log(event.type, event.event, event.payload)
-  }
-})
+import { defineFileViewerElement } from '@flyfish-group/file-viewer-web'
 
-controller.reload()
+defineFileViewerElement()
+
+const viewer = document.getElementById('viewer')
+viewer.addEventListener('viewer-event', event => {
+  console.log(event.detail.type, event.detail.payload)
+})
+viewer.reload()
 ```
 
+需要完全命令式控制时，仍可使用 `mountViewer(container, options)` 返回完整 controller。
+
 鉴权文件可以由宿主系统先下载成 `Blob`，再通过 `file` 和 `name` 交给预览器:
 
 ```ts
 const blob = await fetch('/api/files/contract', { credentials: 'include' }).then(res => res.blob())
 
-mountViewer(document.getElementById('viewer')!, {
-  file: blob,
-  name: 'contract.pdf'
-})
+const viewer = document.querySelector('flyfish-file-viewer')
+viewer.file = blob
+viewer.name = 'contract.pdf'
 ```
 
 ## Script 标签接入
@@ -43,14 +45,12 @@ mountViewer(document.getElementById('viewer')!, {
 无构建工具项目可以自托管 IIFE 包，它会暴露 `window.FlyfishFileViewerWeb`:
 
 ```html
-<div id="viewer" style="height: 720px"></div>
 <script src="/vendor/file-viewer-web/flyfish-file-viewer-web.iife.js"></script>
-<script>
-  window.FlyfishFileViewerWeb.mountViewer(document.getElementById('viewer'), {
-    url: '/files/demo.docx',
-    options: { theme: 'light' }
-  })
-</script>
+<flyfish-file-viewer
+  src="/files/demo.docx"
+  theme="light"
+  style="display:block;height:720px"
+></flyfish-file-viewer>
 ```
 
 浏览器不能直接解析 `@flyfish-group/file-viewer-web` 这种裸包名；没有构建工具时请使用静态 URL、IIFE 全局包，或配置 import map。Worker、WASM 和示例资源可以通过复制命令自托管: