vue-screenfull 1.0.9 → 1.1.0

package/README.md

@@ -8,8 +8,8 @@
 [license-image]: https://img.shields.io/npm/l/vue-screenfull.svg
 [license-url]: https://github.com/chengchuu/vue-screenfull/blob/main/LICENSE
 
-Reactive, strongly typed, SSR-safe fullscreen utilities designed for Vue 3.
-An optional CSS pseudo-fullscreen fallback is also available.
+Reactive, strongly typed, and SSR-safe fullscreen utilities for Vue 3, with an optional CSS
+pseudo-fullscreen fallback.
 
 - [Project website](https://chengchuu.github.io/vue-screenfull/)
 - [Live playground](https://chengchuu.github.io/vue-screenfull/playground/)
@@ -21,9 +21,7 @@ An optional CSS pseudo-fullscreen fallback is also available.
 - Standard, WebKit, Mozilla, and Microsoft-prefixed API detection.
 - Vue template refs, component refs, elements, and safe CSS selectors.
 - Structured results and actionable errors instead of swallowed rejections.
-- Renderless component, directive, optional plugin, and framework-light controller.
-- No fullscreen wrapper or other runtime dependency; Vue remains a peer dependency.
-- CJS, ESM, browser IIFE, source maps, and declarations.
+- Renderless component, directive, optional plugin, and framework-neutral controller.
 
 ## Installation
 
@@ -31,17 +29,8 @@ An optional CSS pseudo-fullscreen fallback is also available.
 npm install vue-screenfull
 ```
 
-The browser bundle is `lib/vue-screenfull.min.js`, exposes `VUE_SCREENFULL`, and expects Vue to be available as the global `Vue`.
-
-## Browser Support
-
-Support is feature-detected at runtime. Current Chrome, Edge, Firefox, and Safari desktop releases,
-Chrome/Firefox/Samsung Internet on Android, and Safari on iPadOS commonly expose the API. iPhone
-Safari, Android/iOS WebViews, managed devices, and embedded documents may restrict arbitrary-element
-fullscreen. This policy describes targets, not a guarantee for every OS/browser release.
-
-Native fullscreen can hide more browser UI, but the browser and operating system retain control.
-The CSS fallback only fills the visual viewport and never claims to hide system or browser chrome.
+`lib/vue-screenfull.min.js` exposes `VUE_SCREENFULL` and requires the global `Vue`. Although Vue is
+an optional peer dependency, package-root imports still require Vue 3 at runtime.
 
 ## Basic Usage
 
@@ -65,8 +54,8 @@ const { isEnabled, isFullscreen, error, toggle } = useScreenfull();
 </template>
 ```
 
-Call `request` or `toggle` directly inside a click, keyboard, or touch handler.
-Browsers normally require transient user activation and can reject even when `isEnabled.value` is true.
+Call `request` or `toggle` directly from a click, keyboard, or touch handler. Browsers normally
+require transient user activation and can reject a request even when `isEnabled.value` is true.
 
 ## Fullscreen a Specific Element
 
@@ -86,7 +75,8 @@ const { request, isFullscreen } = useScreenfullTarget(panel);
 ```
 
 `useScreenfull().request()` with no target opens `document.documentElement`.
-A selector such as `request("#player")` is resolved with `document.querySelector`; invalid or unmatched selectors return `INVALID_TARGET`.
+A selector such as `request("#player")` is resolved with `document.querySelector`. Invalid or
+unmatched selectors return `INVALID_TARGET`.
 
 ## Toggle Fullscreen
 
@@ -104,8 +94,9 @@ Some mobile browsers offer video-only fullscreen independently of arbitrary-elem
 <button type="button" @click="exit">Exit fullscreen</button>
 ```
 
-Always include a visible exit button, particularly when fallback is enabled. Escape often exits,
-but browser Escape behavior cannot be overridden reliably. Exits initiated by browser UI are reflected through native change events.
+Always include a visible exit button, particularly when fallback is enabled. Escape often exits
+fullscreen, but its browser behavior cannot be overridden reliably. Native change events reflect
+exits initiated through the browser UI.
 
 ## Check Support
 
@@ -145,18 +136,20 @@ const { request, exit, isFallback } = useScreenfull({
 });
 ```
 
-CSS fallback fixes an `HTMLElement` to the visual viewport, preserves every inline style it changes,
-locks and restores background body scrolling for element targets, keeps whole-page targets scrollable,
-preserves the scroll position, adds the configured class, exits on Escape when possible, and restores
-focus. Cleanup also runs when its Vue scope is disposed.
-It is pseudo-fullscreen: it cannot hide address bars, browser controls, notifications,
-or operating-system UI. Keep an accessible exit button inside the target:
+CSS fallback fixes an `HTMLElement` to the visual viewport and preserves every inline style that it
+changes. For element targets, it locks and restores background body scrolling. It keeps whole-page
+targets scrollable, preserves the scroll position, adds the configured class, exits on Escape when
+possible, and restores focus. Cleanup also runs when its Vue scope is disposed.
+
+This mode is pseudo-fullscreen. It cannot hide address bars, browser controls, notifications, or
+operating-system UI. Keep an accessible exit button inside the target:
 
 ```vue
 <button type="button" @click="exit">Close full-page view</button>
 ```
 
-A custom fallback implements `enter(context)` and `exit(context)` and is responsible for complete cleanup.
+A custom fallback implements `enter(context)` and `exit(context)` and is responsible for complete
+cleanup.
 
 ## Component Usage
 
@@ -174,8 +167,8 @@ A custom fallback implements `enter(context)` and `exit(context)` and is respons
 </Screenfull>
 ```
 
-The renderless component emits `change`, `enter`, `exit`, `error`, and `fallback`.
-Its default slot receives all composable refs and actions; it imposes no visual system.
+The renderless component emits `change`, `enter`, `exit`, `error`, and `fallback`. Its default slot
+receives all composable refs and actions without imposing a visual system.
 
 ## Directive Usage
 
@@ -206,15 +199,96 @@ import App from "./App.vue";
 createApp(App).use(VueScreenfull).mount("#app");
 ```
 
-This registers `Screenfull` and `v-screenfull`. Names can be changed with `componentName` and `directiveName`.
-Named composable imports never require plugin installation and remain tree-shakable.
+This registers `Screenfull` and `v-screenfull`. Use `componentName` and `directiveName` to change
+their names. Named composable imports do not require plugin installation and remain tree-shakable.
+
+## Vue-free Browser Entry
+
+Use `vue-screenfull/browser` when the caller does not own a Vue root. This subpath exports only
+`createScreenfullController`, `detectFullscreenApi`, and their framework-neutral types. It does not
+load Vue or Mazey at runtime.
+
+With npm:
+
+```ts
+import {
+  createScreenfullController,
+  type ScreenfullChangeListener,
+} from "vue-screenfull/browser";
+
+const controller = createScreenfullController({ restoreFocus: true });
+const target = document.querySelector("#player");
+const button = document.querySelector("#toggle-fullscreen");
+const toggle = () => controller.toggle(target);
+const onChange: ScreenfullChangeListener = (state) => {
+  console.log(state.isFullscreen, state.element);
+};
+
+button?.addEventListener("click", toggle);
+controller.on("change", onChange);
+
+async function dispose() {
+  button?.removeEventListener("click", toggle);
+  controller.off("change", onChange);
+  await controller.destroy();
+}
+
+// Call dispose() when the integration is disposed.
+```
+
+As a native browser ES module:
+
+```html
+<script type="module">
+  import { createScreenfullController } from "https://cdn.jsdelivr.net/npm/vue-screenfull/lib/browser.mjs";
+
+  const controller = createScreenfullController();
+  const target = document.querySelector("#player");
+  const button = document.querySelector("#toggle-fullscreen");
+  const toggle = () => controller.toggle(target);
+
+  button?.addEventListener("click", toggle);
+
+  async function dispose() {
+    button?.removeEventListener("click", toggle);
+    await controller.destroy();
+  }
+
+  // Call dispose() when the integration is disposed.
+</script>
+```
+
+As a classic script:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/vue-screenfull/lib/vue-screenfull.browser.min.js"></script>
+<script>
+  const controller = VUE_SCREENFULL_BROWSER.createScreenfullController();
+  const target = document.querySelector("#player");
+  const button = document.querySelector("#toggle-fullscreen");
+  const toggle = () => controller.toggle(target);
+
+  button?.addEventListener("click", toggle);
+
+  function dispose() {
+    button?.removeEventListener("click", toggle);
+    return controller.destroy();
+  }
+
+  // Call dispose() when the integration is disposed.
+</script>
+```
+
+Call `request` or `toggle` directly from a click, keyboard, or touch handler because browsers
+normally require transient user activation. Retain the controller and call `destroy()` when the
+integration is disposed so its listeners and any active CSS fallback are cleaned up.
 
 ## Advanced Usage
 
-The framework-light controller is useful for migration and non-component integrations:
+The framework-neutral controller is useful for migration and non-component integrations:
 
 ```ts
-import { createScreenfullController } from "vue-screenfull";
+import { createScreenfullController } from "vue-screenfull/browser";
 
 const controller = createScreenfullController({ restoreFocus: true });
 const onChange = (state) => console.log(state.isFullscreen, state.element);
@@ -224,10 +298,10 @@ controller.off("change", onChange);
 await controller.destroy();
 ```
 
-`raw` is a read-only diagnostic mapping of detected browser property/event names, or `null`.
-It is not the recommended API. Each composable creates one controller and disposes it with its Vue scope;
-multiple controllers synchronize through the same document's native events.
-Importing the package does not register listeners or touch the DOM.
+`raw` is a read-only diagnostic mapping of detected browser property and event names, or `null`. It
+is not the recommended API. Each composable creates one controller and disposes it with its Vue
+scope. Multiple controllers synchronize through the same document's native events. Importing the
+package does not register listeners or touch the DOM.
 
 Reactive callbacks can observe changes without duplicate component wiring:
 
@@ -236,7 +310,8 @@ useScreenfull({ onEnter: announce, onExit: announce, onError: report });
 ```
 
 `restoreFocus: true` (the default) focuses the initiating element after exit where practical.
-`exitOnRouteChange` listens for browser `popstate`; router-specific navigation can instead call `exit()` in the application's own route hook.
+`exitOnRouteChange` listens for browser `popstate`. For router-specific navigation, call `exit()`
+from the application's route hook instead.
 
 ## iframe Usage
 
@@ -250,9 +325,9 @@ The embedding page controls permission. A typical iframe is:
 ></iframe>
 ```
 
-Permissions Policy or a missing iframe permission can still reject.
-The library returns `IFRAME_PERMISSION_REQUIRED` when a denial can be associated with an embedded document;
-it cannot override the parent page's policy.
+A Permissions Policy restriction or missing iframe permission can still reject the request. The
+library returns `IFRAME_PERMISSION_REQUIRED` when it can associate a denial with an embedded
+document. It cannot override the parent page's policy.
 
 ## Mobile Considerations
 
@@ -263,10 +338,21 @@ it cannot override the parent page's policy.
 - Native navigation, tab switching, app switching, and OS gestures may exit fullscreen.
 - Neither native capability nor this library guarantees browser/OS controls disappear.
 
+## Browser Support
+
+Support is detected at runtime. Current desktop releases of Chrome, Edge, Firefox, and Safari
+commonly expose the API. Chrome, Firefox, and Samsung Internet on Android and Safari on iPadOS also
+commonly expose it. iPhone Safari, Android and iOS WebViews, managed devices, and embedded documents
+may restrict arbitrary-element fullscreen. This policy identifies support targets; it does not
+guarantee support in every browser or operating-system release.
+
+Native fullscreen can hide more browser UI, but the browser and operating system retain control.
+The CSS fallback only fills the visual viewport and never claims to hide system or browser chrome.
+
 ## SSR and Nuxt
 
 Imports are safe in Vite SSR, Nuxt 3, Node tests, and static generation. Outside a browser,
-`isEnabled` is false, status is `unsupported`, and actions return `NOT_IN_BROWSER`.
+`isEnabled` is `false`, the status is `unsupported`, and actions return `NOT_IN_BROWSER`.
 
 ```vue
 <script setup lang="ts">
@@ -286,16 +372,16 @@ const screenfull = useScreenfull(); // safe during Nuxt setup/SSR
 </template>
 ```
 
-When destructuring refs in `<script setup>`, templates unwrap them automatically;
-when accessing through an object as above, use `.value` in script expressions.
+Templates automatically unwrap refs destructured in `<script setup>`. When accessing refs through
+an object as shown in the example, use `.value` in script expressions.
 
 ## Migrating from screenfull
 
-`vue-screenfull` is an independent Vue 3 library inspired by screenfull's public API and compatibility goals.
-It is not drop-in compatible and is not endorsed by screenfull's maintainers.
+`vue-screenfull` is an independent Vue 3 library inspired by screenfull's public API and
+compatibility goals. It is not drop-in compatible and is not endorsed by screenfull's maintainers.
 
 | screenfull concept                     | vue-screenfull equivalent                               |
-| -------------------------------------- | ------------------------------------------------------- |
+| :------------------------------------- | :------------------------------------------------------ |
 | `screenfull.request(element, options)` | `request(element, options)`                             |
 | `screenfull.exit()`                    | `exit()`                                                |
 | `screenfull.toggle(element, options)`  | `toggle(element, options)`                              |
@@ -323,9 +409,10 @@ if (isEnabled.value) {
 }
 ```
 
-Key differences are reactive refs, automatic lifecycle cleanup, SSR-safe imports, structured results/errors, optional pseudo-fullscreen, and Vue component/directive APIs.
-Controller listeners receive typed state/errors rather than raw DOM events.
-Legacy `onchange`/`onerror` aliases are not provided. The plugin is optional.
+Key differences include reactive refs, automatic lifecycle cleanup, SSR-safe imports, structured
+results and errors, optional pseudo-fullscreen, and Vue component and directive APIs. Controller
+listeners receive typed state and errors instead of raw DOM events. Legacy `onchange` and `onerror`
+aliases are not provided. The plugin is optional.
 
 ## API Reference
 
@@ -337,39 +424,46 @@ Root exports:
 - `detectFullscreenApi(document)` and `resolveScreenfullTarget(target, document)`
 - all public target, option, state, result, error, event, component, directive, plugin, and raw-map types
 
-Actions resolve to `{ ok, mode, element, error }`; `mode` is `native`, `fallback`, or `none`.
-Generated TypeDoc is published at [chengchuu.github.io/vue-screenfull/api/](https://chengchuu.github.io/vue-screenfull/api/).
+The `vue-screenfull/browser` subpath exports `createScreenfullController`, `detectFullscreenApi`,
+and only framework-neutral controller types.
+
+Actions resolve to `{ ok, mode, element, error }`. The `mode` value is `native`, `fallback`, or
+`none`. Generated TypeDoc is published at
+[chengchuu.github.io/vue-screenfull/api/](https://chengchuu.github.io/vue-screenfull/api/).
 
 ## Live Playground
 
-The deployed playground is at [chengchuu.github.io/vue-screenfull/playground/](https://chengchuu.github.io/vue-screenfull/playground/).
-It includes page, element, image-style, and video targets; explicit exit; diagnostics;
-invalid-target feedback; event history; accessibility, iframe, mobile, and migration notes. Run it locally with:
+The deployed playground is available at
+[chengchuu.github.io/vue-screenfull/playground/](https://chengchuu.github.io/vue-screenfull/playground/).
+It includes page, element, image-style, and video targets; explicit exit controls; diagnostics;
+invalid-target feedback; event history; and accessibility, iframe, mobile, and migration notes. Run
+it locally with:
 
 ```bash
 npm run dev
 ```
 
-Native fullscreen automation is intentionally not treated as universally reliable because browsers enforce user activation.
+Native fullscreen automation is intentionally not treated as universally reliable because browsers
+enforce user activation.
 
 ## Installable Documentation Website
 
-The project website is a Progressive Web App scoped to `/vue-screenfull/`. Its homepage,
-playground, and API documentation share a generated manifest and a Google Workbox v7 service
-worker. Documents, scripts, and styles use bounded network-first caches so current documentation
-normally wins without pairing fresh HTML with stale bundles; local images and fonts use bounded
-cache-first storage. A precached offline page is used only when a requested document is unavailable
-from both the network and runtime cache.
+The project website is a Progressive Web App scoped to `/vue-screenfull/`. Its homepage, playground,
+and API documentation share a generated manifest and a Google Workbox v7 service worker. Documents,
+scripts, and styles use bounded network-first caches. This strategy normally prioritizes current
+documentation without pairing fresh HTML with stale bundles. Local images and fonts use bounded
+cache-first storage. The site uses a precached offline page only when the requested document is
+unavailable from both the network and the runtime cache.
 
-Installation uses the browser's native `beforeinstallprompt` flow when available. The site never
-opens that prompt automatically, and browsers without a custom prompt can use their menu or, on
-iOS/iPadOS Safari, **Share → Add to Home Screen**. Installing this website is separate from the
+Installation uses the browser's native `beforeinstallprompt` flow when available. The site does not
+open that prompt automatically. In browsers without a custom prompt, use the browser menu or, on
+iOS and iPadOS Safari, **Share → Add to Home Screen**. Installing the website is separate from the
 Fullscreen API and does not grant fullscreen capability.
 
 Worker updates remain user-controlled. When a new version is waiting, choose **Update now** to
-activate it and reload the current page once. On the playground, this explicit action is the only
-update path that reloads an active session. The generated worker includes a final-artifact version
-marker, so deployable website changes can be detected without precaching unversioned bundles.
+activate it and reload the current page once. On the playground, only this explicit action reloads
+an active session during an update. The generated worker includes a final-artifact version marker,
+so deployable website changes can be detected without precaching unversioned bundles.
 
 ## Development
 
@@ -392,9 +486,15 @@ npm pack --dry-run
 Normal `npm run dev` does not register the production worker. Build `npm run docs` and serve the
 generated `docs` directory from localhost under `/vue-screenfull/` for production-like PWA testing.
 
-See [`guides/MANUAL_TESTING.md`](./guides/MANUAL_TESTING.md) for the browser matrix and real-browser strategy.
-Production output remains `lib/index.cjs.js`, `lib/index.esm.js`, `lib/vue-screenfull.min.js`, `lib/index.d.ts`, `lib/typing.d.ts`, and `lib/global.d.ts`. Native Node ESM resolves through the additional conditional entry `lib/index.mjs`.
+See [`guides/MANUAL_TESTING.md`](./guides/MANUAL_TESTING.md) for the browser matrix and real-browser
+strategy. The root entry produces `lib/index.cjs.js`, `lib/index.esm.js`, `lib/index.mjs`,
+`lib/vue-screenfull.min.js`, `lib/index.d.ts`, `lib/typing.d.ts`, and `lib/global.d.ts`. The
+framework-neutral entry produces `lib/browser.cjs.js`, `lib/browser.esm.js`, `lib/browser.mjs`,
+`lib/browser.d.ts`, and `lib/vue-screenfull.browser.min.js`. JavaScript bundles include source maps.
 
 ## License and Attribution
 
-Released under the MIT License. This independent project acknowledges [screenfull](https://github.com/sindresorhus/screenfull) (MIT) for its public API and cross-browser compatibility inspiration, and `vue-fullscreen` (MIT) as a Vue ecosystem reference. No endorsement is implied.
+Released under the MIT License. This independent project acknowledges
+[screenfull](https://github.com/sindresorhus/screenfull) (MIT) for its public API and cross-browser
+compatibility inspiration, and `vue-fullscreen` (MIT) as a Vue ecosystem reference. No endorsement
+is implied.

package/README.zh-CN.md

@@ -22,8 +22,8 @@
 - 检测带 WebKit、Mozilla、Microsoft 前缀的 API。
 - 支持 Vue 模板引用、组件引用、元素和安全的 CSS 选择器。
 - 返回结构化结果和可操作的错误，不会静默忽略 Promise 拒绝。
-- 提供无渲染组件、指令、可选插件和轻量级框架控制器。
-- 不依赖全屏包装器或其他运行时依赖；Vue 仍是对等依赖。
+- 提供无渲染组件、指令、可选插件和框架无关的控制器。
+- 提供适用于 npm、浏览器原生模块和经典脚本的无 Vue 浏览器入口。
 - 提供 CJS、ESM、浏览器 IIFE、源映射和类型声明。
 
 ## 安装
@@ -32,7 +32,76 @@
 npm install vue-screenfull
 ```
 
-浏览器包为 `lib/vue-screenfull.min.js`。它会暴露 `VUE_SCREENFULL`，并要求通过全局变量 `Vue` 访问 Vue。
+浏览器包为 `lib/vue-screenfull.min.js`。它会暴露 `VUE_SCREENFULL`，并要求通过全局变量 `Vue` 访问 Vue。Vue 只在软件包安装层面标记为可选。通过软件包根入口导入 API 时，运行时仍需要 Vue 3。
+
+### 无 Vue 浏览器入口
+
+如果调用方没有 Vue 根实例，请使用 `vue-screenfull/browser`。该子路径只导出 `createScreenfullController`、`detectFullscreenApi` 和框架无关的类型。运行时不会加载 Vue 或 Mazey。
+
+通过 npm 使用：
+
+```ts
+import { createScreenfullController } from "vue-screenfull/browser";
+
+const controller = createScreenfullController({ restoreFocus: true });
+const target = document.querySelector("#player");
+const button = document.querySelector("#toggle-fullscreen");
+const toggle = () => controller.toggle(target);
+
+button?.addEventListener("click", toggle);
+
+async function dispose() {
+  button?.removeEventListener("click", toggle);
+  await controller.destroy();
+}
+
+// 集成销毁时调用 dispose()。
+```
+
+通过浏览器原生 ES 模块使用：
+
+```html
+<script type="module">
+  import { createScreenfullController } from "https://cdn.jsdelivr.net/npm/vue-screenfull/lib/browser.mjs";
+
+  const controller = createScreenfullController();
+  const target = document.querySelector("#player");
+  const button = document.querySelector("#toggle-fullscreen");
+  const toggle = () => controller.toggle(target);
+
+  button?.addEventListener("click", toggle);
+
+  async function dispose() {
+    button?.removeEventListener("click", toggle);
+    await controller.destroy();
+  }
+
+  // 集成销毁时调用 dispose()。
+</script>
+```
+
+通过经典脚本使用：
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/vue-screenfull/lib/vue-screenfull.browser.min.js"></script>
+<script>
+  const controller = VUE_SCREENFULL_BROWSER.createScreenfullController();
+  const target = document.querySelector("#player");
+  const button = document.querySelector("#toggle-fullscreen");
+  const toggle = () => controller.toggle(target);
+
+  button?.addEventListener("click", toggle);
+
+  function dispose() {
+    button?.removeEventListener("click", toggle);
+    return controller.destroy();
+  }
+
+  // 集成销毁时调用 dispose()。
+</script>
+```
+
+请在点击、键盘或触摸事件处理程序中直接调用 `request` 或 `toggle`。浏览器通常要求短暂的用户激活状态。请保留控制器，并在集成销毁时调用 `destroy()`。该方法会清理监听器和正在运行的 CSS 回退方案。
 
 ## 浏览器支持
 
@@ -196,10 +265,10 @@ createApp(App).use(VueScreenfull).mount("#app");
 
 ## 高级用法
 
-轻量级框架控制器适用于迁移和非组件集成:
+框架无关的控制器适用于迁移和非组件集成：
 
 ```ts
-import { createScreenfullController } from "vue-screenfull";
+import { createScreenfullController } from "vue-screenfull/browser";
 
 const controller = createScreenfullController({ restoreFocus: true });
 const onChange = (state) => console.log(state.isFullscreen, state.element);
@@ -313,6 +382,8 @@ if (isEnabled.value) {
 
 操作会解析为 `{ ok, mode, element, error }`。`mode` 为 `native`、`fallback` 或 `none`。生成的 TypeDoc 发布于 [API 文档网站](https://chengchuu.github.io/vue-screenfull/api/)。
 
+`vue-screenfull/browser` 子路径只导出 `createScreenfullController`、`detectFullscreenApi` 和框架无关的控制器类型。
+
 ## 在线演练场
 
 已部署的版本位于 [vue-screenfull 在线演练场](https://chengchuu.github.io/vue-screenfull/playground/)。其中包含页面、元素、图片样式和视频目标。它还提供显式退出、诊断、无效目标反馈和事件历史记录。其他内容包括无障碍、iframe、移动端和迁移说明。使用以下命令在本地运行:
@@ -351,16 +422,25 @@ npm pack --dry-run
 
 常规的 `npm run dev` 不会注册生产环境 Worker。若要在类似生产环境中测试 PWA，请运行 `npm run docs`。然后在 localhost 的 `/vue-screenfull/` 路径下提供生成的 `docs` 目录。
 
-有关浏览器矩阵和真实浏览器测试策略，请参阅 [`guides/MANUAL_TESTING.md`](./guides/MANUAL_TESTING.md)。生产输出仍包含以下文件:
+有关浏览器矩阵和真实浏览器测试策略，请参阅 [`guides/MANUAL_TESTING.md`](./guides/MANUAL_TESTING.md)。根入口会生成以下文件：
 
 - `lib/index.cjs.js`
 - `lib/index.esm.js`
+- `lib/index.mjs`
 - `lib/vue-screenfull.min.js`
 - `lib/index.d.ts`
 - `lib/typing.d.ts`
 - `lib/global.d.ts`
 
-原生 Node ESM 通过额外的条件入口 `lib/index.mjs` 解析。
+框架无关的入口会生成以下文件：
+
+- `lib/browser.cjs.js`
+- `lib/browser.esm.js`
+- `lib/browser.mjs`
+- `lib/browser.d.ts`
+- `lib/vue-screenfull.browser.min.js`
+
+JavaScript 软件包会包含源映射。
 
 ## 许可证与致谢
 

package/lib/browser.cjs.js

@@ -0,0 +1,7 @@
+/*!
+ * vue-screenfull v1.1.0
+ * (c) 2018-2026 Cheng https://www.npmjs.com/package/vue-screenfull
+ * Released under the MIT License.
+ */
+"use strict";function e(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=Array(n);r<n;r++)t[r]=e[r];return t}function n(e,n,r){return n&&function(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,o(t.key),t)}}(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function r(){var e,n,l="function"==typeof Symbol?Symbol:{},o=l.iterator||"@@iterator",i=l.toStringTag||"@@toStringTag";function u(r,l,o,i){var u=l&&l.prototype instanceof c?l:c,s=Object.create(u.prototype);return t(s,"_invoke",function(r,t,l){var o,i,u,c=0,s=l||[],f=!1,d={p:0,n:0,v:e,a:v,f:v.bind(e,4),d:function(n,r){return o=n,i=0,u=e,d.n=r,a}};function v(r,t){for(i=r,u=t,n=0;!f&&c&&!l&&n<s.length;n++){var l,o=s[n],v=d.p,h=o[2];r>3?(l=h===t)&&(u=o[(i=o[4])?5:(i=3,3)],o[4]=o[5]=e):o[0]<=v&&((l=r<2&&v<o[1])?(i=0,d.v=t,d.n=o[1]):v<h&&(l=r<3||o[0]>t||t>h)&&(o[4]=r,o[5]=t,d.n=h,i=0))}if(l||r>1)return a;throw f=!0,t}return function(l,s,h){if(c>1)throw TypeError("Generator is already running");for(f&&1===s&&v(s,h),i=s,u=h;(n=i<2?e:u)||!f;){o||(i?i<3?(i>1&&(d.n=-1),v(i,u)):d.n=u:d.v=u);try{if(c=2,o){if(i||(l="next"),n=o[l]){if(!(n=n.call(o,u)))throw TypeError("iterator result is not an object");if(!n.done)return n;u=n.value,i<2&&(i=0)}else 1===i&&(n=o.return)&&n.call(o),i<2&&(u=TypeError("The iterator does not provide a '"+l+"' method"),i=1);o=e}else if((n=(f=d.n<0)?u:r.call(t,d))!==a)break}catch(n){o=e,i=1,u=n}finally{c=1}}return{value:n,done:f}}}(r,o,i),!0),s}var a={};function c(){}function s(){}function f(){}n=Object.getPrototypeOf;var d=[][o]?n(n([][o]())):(t(n={},o,function(){return this}),n),v=f.prototype=c.prototype=Object.create(d);function h(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,f):(e.__proto__=f,t(e,i,"GeneratorFunction")),e.prototype=Object.create(v),e}return s.prototype=f,t(v,"constructor",f),t(f,"constructor",s),s.displayName="GeneratorFunction",t(f,i,"GeneratorFunction"),t(v),t(v,i,"Generator"),t(v,o,function(){return this}),t(v,"toString",function(){return"[object Generator]"}),(r=function(){return{w:u,m:h}})()}function t(e,n,r,l){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}t=function(e,n,r,l){function i(n,r){t(e,n,function(e){return this._invoke(n,r,e)})}n?o?o(e,n,{value:r,enumerable:!l,configurable:!l,writable:!l}):e[n]=r:(i("next",0),i("throw",1),i("return",2))},t(e,n,r,l)}function l(n,r){return function(e){if(Array.isArray(e))return e}(n)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,l,o,i,u=[],a=!0,c=!1;try{if(o=(r=r.call(e)).next,0===n);else for(;!(a=(t=o.call(r)).done)&&(u.push(t.value),u.length!==n);a=!0);}catch(e){c=!0,l=e}finally{try{if(!a&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(c)throw l}}return u}}(n,r)||function(n,r){if(n){if("string"==typeof n)return e(n,r);var t={}.toString.call(n).slice(8,-1);return"Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t?Array.from(n):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?e(n,r):void 0}}(n,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function i(e,n,r,t){return new(r||(r=Promise))(function(l,o){function i(e){try{a(t.next(e))}catch(e){o(e)}}function u(e){try{a(t.throw(e))}catch(e){o(e)}}function a(e){var n;e.done?l(e.value):(n=e.value,n instanceof r?n:new r(function(e){e(n)})).then(i,u)}a((t=t.apply(e,n||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;var u=[{requestFullscreen:"requestFullscreen",exitFullscreen:"exitFullscreen",fullscreenElement:"fullscreenElement",fullscreenEnabled:"fullscreenEnabled",fullscreenchange:"fullscreenchange",fullscreenerror:"fullscreenerror"},{requestFullscreen:"webkitRequestFullscreen",exitFullscreen:"webkitExitFullscreen",fullscreenElement:"webkitFullscreenElement",fullscreenEnabled:"webkitFullscreenEnabled",fullscreenchange:"webkitfullscreenchange",fullscreenerror:"webkitfullscreenerror"},{requestFullscreen:"webkitRequestFullScreen",exitFullscreen:"webkitCancelFullScreen",fullscreenElement:"webkitCurrentFullScreenElement",fullscreenEnabled:"webkitCancelFullScreen",fullscreenchange:"webkitfullscreenchange",fullscreenerror:"webkitfullscreenerror"},{requestFullscreen:"mozRequestFullScreen",exitFullscreen:"mozCancelFullScreen",fullscreenElement:"mozFullScreenElement",fullscreenEnabled:"mozFullScreenEnabled",fullscreenchange:"mozfullscreenchange",fullscreenerror:"mozfullscreenerror"},{requestFullscreen:"msRequestFullscreen",exitFullscreen:"msExitFullscreen",fullscreenElement:"msFullscreenElement",fullscreenEnabled:"msFullscreenEnabled",fullscreenchange:"MSFullscreenChange",fullscreenerror:"MSFullscreenError"}];function a(e){var n=e.documentElement,r=e,t=u.find(function(e){return"function"==typeof n[e.requestFullscreen]&&"function"==typeof r[e.exitFullscreen]});return t?Object.freeze(Object.assign({},t)):null}var c=["position","inset","top","right","bottom","left","width","height","max-width","max-height","margin","z-index","overflow","background"],s=new WeakMap,f=/*#__PURE__*/function(){return n(function e(){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e),this.element=null,this.styles=null,this.bodyOverflow={value:"",priority:""},this.scrollX=0,this.scrollY=0,this.className="",this.addedClass=!1,this.lockedScroll=!1,this.bodyScrollLocked=!1},[{key:"enter",value:function(e){var n,r,t,o,i,u,a,f,d,v,h=e.element,b=e.document,m=e.options,y=null===(n=b.defaultView)||void 0===n?void 0:n.HTMLElement;if(!(y&&h instanceof y))throw new TypeError("CSS fallback requires an HTMLElement.");var p=s.get(b);if(p&&p!==this)throw new Error("Another CSS fullscreen fallback is already active.");s.set(b,this);try{this.element=h,this.className=null!==(r=m.fallbackClass)&&void 0!==r?r:"vue-screenfull-fallback",this.styles={};for(var E=0,k=c;E<k.length;E++){var g=k[E];this.styles[g]={value:this.element.style.getPropertyValue(g),priority:this.element.style.getPropertyPriority(g)}}this.bodyOverflow={value:null!==(o=null===(t=b.body)||void 0===t?void 0:t.style.getPropertyValue("overflow"))&&void 0!==o?o:"",priority:null!==(u=null===(i=b.body)||void 0===i?void 0:i.style.getPropertyPriority("overflow"))&&void 0!==u?u:""},this.scrollX=null!==(f=null===(a=b.defaultView)||void 0===a?void 0:a.scrollX)&&void 0!==f?f:0,this.scrollY=null!==(v=null===(d=b.defaultView)||void 0===d?void 0:d.scrollY)&&void 0!==v?v:0;for(var w=[["position","fixed"],["inset","0"],["top","0"],["right","0"],["bottom","0"],["left","0"],["width","100vw"],["height","100dvh"],["max-width","none"],["max-height","none"],["margin","0"],["z-index","2147483647"],["overflow","auto"],["background",this.element.style.background||"Canvas"]],S=0,F=w;S<F.length;S++){var O=l(F[S],2),T=O[0],R=O[1];this.element.style.setProperty(T,R,"important")}this.addedClass=!this.element.classList.contains(this.className),this.addedClass&&this.element.classList.add(this.className),this.lockedScroll=!1!==m.lockScroll,this.bodyScrollLocked=Boolean(this.lockedScroll&&b.body&&this.element!==b.documentElement&&this.element!==b.body),this.bodyScrollLocked&&b.body&&b.body.style.setProperty("overflow","hidden","important")}catch(e){try{this.exit({element:h,document:b,options:m})}finally{s.get(b)===this&&s.delete(b)}throw e}}},{key:"exit",value:function(e){var n,r,t=e.document;if(this.element&&this.styles)try{for(var l=0,o=c;l<o.length;l++){var i=o[l],u=this.styles[i];u.value?this.element.style.setProperty(i,u.value,u.priority):this.element.style.removeProperty(i)}this.addedClass&&this.element.classList.remove(this.className),this.bodyScrollLocked&&t.body&&(this.bodyOverflow.value?t.body.style.setProperty("overflow",this.bodyOverflow.value,this.bodyOverflow.priority):t.body.style.removeProperty("overflow")),this.lockedScroll&&(null===(r=null===(n=t.defaultView)||void 0===n?void 0:n.scrollTo)||void 0===r||r.call(n,this.scrollX,this.scrollY))}finally{s.get(t)===this&&s.delete(t),this.element=null,this.styles=null,this.addedClass=!1,this.lockedScroll=!1,this.bodyScrollLocked=!1}}}])}();function d(e){return e.fallback&&"none"!==e.fallback?"css"===e.fallback?new f:e.fallback:null}var v={NOT_SUPPORTED:"Enable the CSS fallback or use a browser with the Fullscreen API.",NOT_IN_BROWSER:"Call fullscreen actions after the component mounts in a browser.",USER_ACTIVATION_REQUIRED:"Call request() directly from a click, key, or touch handler.",PERMISSION_DENIED:"Check browser settings and the document Permissions Policy.",IFRAME_PERMISSION_REQUIRED:'Add allow="fullscreen" and allowfullscreen to the embedding iframe.',TARGET_NOT_CONNECTED:"Attach the target element to the current document before requesting fullscreen.",REQUEST_IN_PROGRESS:"Wait for the current fullscreen transition to finish."};function h(e,n,r){return{code:e,message:n,cause:r,recoverable:!(arguments.length>3&&void 0!==arguments[3])||arguments[3],suggestion:v[e]}}function b(e,n,r){var t,l=e instanceof Error?"".concat(e.name,": ").concat(e.message):String(e),o=l.toLowerCase(),i="exit"===n?"EXIT_FAILED":"fallback"===n?"FALLBACK_FAILED":"REQUEST_FAILED";if(o.includes("activation")||o.includes("gesture"))i="USER_ACTIVATION_REQUIRED";else if(o.includes("permission")||o.includes("denied")||o.includes("security")){var u;try{u=Boolean(null===(t=null==r?void 0:r.defaultView)||void 0===t?void 0:t.frameElement)}catch(e){u=!0}i=u?"IFRAME_PERMISSION_REQUIRED":"PERMISSION_DENIED"}return h(i,"Fullscreen ".concat(n," failed: ").concat(l),e)}var m=function(e,n){return{ok:!0,mode:e,element:n,error:null}};exports.createScreenfullController=function(){var e,n,t=this,l=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=null!==(e=l.document)&&void 0!==e?e:"undefined"==typeof document?void 0:document,u=o?a(o):null,c=new Set,s=new Set,f=d(l),v=null,y=l,p=null,E=!1,k=!1,g=null,w=o?"idle":"unsupported",S=function(){return o&&u?o[u.fullscreenElement]:null},F=function(){return{isEnabled:Boolean(o&&u&&!1!==o[u.fullscreenEnabled]),isFullscreen:Boolean(S()||v),isFallback:Boolean(v),element:S()||v,status:w}},O=function(e,n){if(e)try{e(n)}catch(e){"undefined"!=typeof console&&console.error("[vue-screenfull] Listener failed.",e)}},T=null,R=F().isFullscreen,x=function(){var e=F();T&&T.isEnabled===e.isEnabled&&T.isFullscreen===e.isFullscreen&&T.isFallback===e.isFallback&&T.status===e.status&&T.element===e.element||(T=e,O(l.onChange,e),c.forEach(function(n){return O(n,e)}))},_=function(e){return g=e,arguments.length>1&&void 0!==arguments[1]&&arguments[1]||(w="NOT_SUPPORTED"===e.code||"NOT_IN_BROWSER"===e.code?"unsupported":"error"),k||(O(l.onError,e),s.forEach(function(n){return O(n,e)}),x()),l.debug&&"undefined"!=typeof console&&console.warn("[vue-screenfull]",e),{ok:!1,mode:"none",element:F().element,error:e}},I=function(){w=S()?"fullscreen":"idle";var e=F();e.isFullscreen!==R&&(e.isFullscreen?O(l.onEnter,e):O(l.onExit,e),R=e.isFullscreen),x()},P=function(e){E||_(b(e,"request",o))},N=function(e){"Escape"===e.key&&v&&D.exit()},C=function(){F().isFullscreen&&D.exit()},L=function(){var e,n,r=!1,t=new Promise(function(e){n=e}),l=function(){o&&u&&(o.removeEventListener(u.fullscreenchange,a),o.removeEventListener(u.fullscreenerror,c),void 0!==e&&globalThis.clearTimeout(e))},i=function(e){r||(r=!0,l(),n(e))},a=function(){return i({ok:!0})},c=function(e){return i({ok:!1,cause:e})};return o&&u&&(o.addEventListener(u.fullscreenchange,a),o.addEventListener(u.fullscreenerror,c),e=globalThis.setTimeout(function(){return i({ok:!1,cause:new Error("Timed out waiting for a fullscreen event.")})},3e3)),{promise:t,cleanup:l}},A=function(e){return i(t,void 0,void 0,/*#__PURE__*/r().m(function n(){var t,l,o;return r().w(function(n){for(;;)switch(n.p=n.n){case 0:if(t=L(),n.p=1,!(l=e())||"function"!=typeof l.then){n.n=3;break}return n.n=2,l;case 2:n.n=5;break;case 3:return n.n=4,t.promise;case 4:if((o=n.v).ok){n.n=5;break}throw o.cause;case 5:return n.p=5,t.cleanup(),n.f(5);case 6:return n.a(2)}},n,null,[[1,,5,6]])}))},q=function(){return i(t,void 0,void 0,/*#__PURE__*/r().m(function e(){var n;return r().w(function(e){for(;;)switch(e.n){case 0:if(o&&u&&S()){e.n=1;break}return e.a(2);case 1:return n=o[u.exitFullscreen],e.n=2,A(function(){return n.call(o)});case 2:return e.a(2)}},e)}))};function j(e,n){return i(this,void 0,void 0,/*#__PURE__*/r().m(function t(){var i,u,a,c,s,p;return r().w(function(r){for(;;)switch(r.p=r.n){case 0:if(u=null!==(i=null==n?void 0:n.fallback)&&void 0!==i?i:l.fallback,a=Object.assign(Object.assign({},l),{fallback:u}),f=d(a),o&&f){r.n=1;break}return r.a(2,_(h("NOT_SUPPORTED","The Fullscreen API is unavailable and no fallback is enabled.")));case 1:return r.p=1,y=a,r.n=2,f.enter({element:e,document:o,options:a});case 2:if(!k){r.n=4;break}return r.n=3,f.exit({element:e,document:o,options:a});case 3:return c=h("REQUEST_FAILED","The fullscreen controller was destroyed before the fallback request completed."),r.a(2,{ok:!1,mode:"none",element:null,error:c});case 4:return v=e,w="fallback",s=F(),R=!0,O(l.onFallback,s),O(l.onEnter,s),x(),r.a(2,m("fallback",e));case 5:return r.p=5,p=r.v,r.a(2,_(b(p,"fallback",o)))}},t,null,[[1,5]])}))}o&&u&&(o.addEventListener(u.fullscreenchange,I),o.addEventListener(u.fullscreenerror,P)),o&&(o.addEventListener("keydown",N),l.exitOnRouteChange&&(null===(n=o.defaultView)||void 0===n||n.addEventListener("popstate",C)));var D={get isEnabled(){return F().isEnabled},get isFullscreen(){return F().isFullscreen},get isFallback(){return F().isFallback},get element(){return F().element},get status(){return w},get error(){return g},get raw(){return u},request:function(e,n){return i(this,void 0,void 0,/*#__PURE__*/r().m(function t(){var i,a,c,s,f,d,y,g;return r().w(function(r){for(;;)switch(r.p=r.n){case 0:if(!k&&o){r.n=1;break}return r.a(2,_(h("NOT_IN_BROWSER","Fullscreen is unavailable outside a browser document.")));case 1:if(!E){r.n=2;break}return r.a(2,_(h("REQUEST_IN_PROGRESS","A fullscreen transition is already in progress."),!0));case 2:if((i=void 0===e?o.documentElement:e)&&1===i.nodeType){r.n=3;break}return r.a(2,_(h("INVALID_TARGET","The fullscreen target is not an Element.")));case 3:if(i.isConnected&&i.ownerDocument===o){r.n=4;break}return r.a(2,_(h("TARGET_NOT_CONNECTED","The fullscreen target must be connected to the current document.")));case 4:if(!F().isFullscreen){r.n=7;break}if(F().element!==i){r.n=5;break}return r.a(2,m(v?"fallback":"native",i));case 5:if(!v){r.n=7;break}return r.n=6,D.exit();case 6:if((a=r.v).ok){r.n=7;break}return r.a(2,a);case 7:if(p=!1===l.restoreFocus?null:o.activeElement,E=!0,w="requesting",x(),r.p=8,u&&D.isEnabled){r.n=10;break}return r.n=9,j(i,n);case 9:case 18:return r.a(2,r.v);case 10:return c=i[u.requestFullscreen],delete(s=Object.assign({},n)).fallback,r.n=11,A(function(){return c.call(i,s)});case 11:return k||(w=S()?"fullscreen":"idle",x()),r.a(2,m("native",S()||i));case 12:if(r.p=12,y=r.v,!k){r.n=13;break}return f=b(y,"request",o),r.a(2,{ok:!1,mode:"none",element:null,error:f});case 13:if(d=b(y,"request",o),!(null==n?void 0:n.fallback)&&!l.fallback){r.n=19;break}if(!S()){r.n=17;break}return r.p=14,r.n=15,q();case 15:r.n=17;break;case 16:return r.p=16,g=r.v,r.a(2,_(b(g,"exit",o)));case 17:return r.n=18,j(i,n);case 19:return r.a(2,_(d));case 20:return r.p=20,E=!1,r.f(20);case 21:return r.a(2)}},t,null,[[14,16],[8,12,20,21]])}))},exit:function(){return i(this,void 0,void 0,/*#__PURE__*/r().m(function e(){var n,t,i,a;return r().w(function(e){for(;;)switch(e.p=e.n){case 0:if(!k&&o){e.n=1;break}return e.a(2,_(h("NOT_IN_BROWSER","Fullscreen is unavailable outside a browser document.")));case 1:if(!E){e.n=2;break}return e.a(2,_(h("REQUEST_IN_PROGRESS","A fullscreen transition is already in progress."),!0));case 2:if(F().isFullscreen){e.n=3;break}return e.a(2,m("native",null));case 3:if(E=!0,w="exiting",x(),e.p=4,!v||!f){e.n=6;break}return t=v,e.n=5,f.exit({element:t,document:o,options:y});case 5:v=null,w="idle",i=F(),R=!1,O(l.onExit,i),x(),e.n=8;break;case 6:if(!u||!S()){e.n=8;break}return e.n=7,q();case 7:w=S()?"fullscreen":"idle",x();case 8:return null===(n=null==p?void 0:p.focus)||void 0===n||n.call(p),p=null,e.a(2,m(v?"fallback":"native",F().element));case 9:return e.p=9,a=e.v,e.a(2,_(b(a,"exit",o)));case 10:return e.p=10,E=!1,e.f(10);case 11:return e.a(2)}},e,null,[[4,9,10,11]])}))},toggle:function(e,n){return i(this,void 0,void 0,/*#__PURE__*/r().m(function t(){return r().w(function(r){for(;;)if(0===r.n)return r.a(2,F().isFullscreen?D.exit():D.request(e,n))},t)}))},on:function(e,n){"change"===e?c.add(n):s.add(n)},off:function(e,n){"change"===e?c.delete(n):s.delete(n)},clearError:function(){g=null,"error"===w&&(w=F().isFullscreen?v?"fallback":"fullscreen":"idle"),x()},destroy:function(){return i(this,void 0,void 0,/*#__PURE__*/r().m(function e(){var n,t,i;return r().w(function(e){for(;;)switch(e.p=e.n){case 0:if(!k){e.n=1;break}return e.a(2);case 1:if(k=!0,!(v&&f&&o)){e.n=6;break}return t=v,e.p=2,e.n=3,f.exit({element:t,document:o,options:y});case 3:e.n=5;break;case 4:e.p=4,i=e.v,g=b(i,"fallback",o);case 5:v=null;case 6:o&&u&&(o.removeEventListener(u.fullscreenchange,I),o.removeEventListener(u.fullscreenerror,P)),null==o||o.removeEventListener("keydown",N),l.exitOnRouteChange&&(null===(n=null==o?void 0:o.defaultView)||void 0===n||n.removeEventListener("popstate",C)),c.clear(),s.clear();case 7:return e.a(2)}},e,null,[[2,4]])}))}};return D},exports.detectFullscreenApi=a;
+//# sourceMappingURL=browser.cjs.js.map