vue-screenfull 1.0.1 → 1.0.4

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017-2025 Cheng
+Copyright (c) 2017-2026 Cheng
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/MANUAL_TESTING.md

@@ -0,0 +1,32 @@
+# Browser testing strategy and manual matrix
+
+Automated unit tests cover property mapping, state, errors, cleanup, targets, Vue integration, and
+fallback. Real-browser smoke tests should load `/playground/`, verify capability diagnostics, and
+exercise a request from a genuine click. Native fullscreen is not made a hard headless-CI assertion:
+Chromium, Firefox, and WebKit automation can reject it when user activation or the host display is
+unavailable.
+
+Record the date, browser/OS version, native availability, page/element/video targets, change event,
+Escape/visible-button exit, browser UI, iframe result, fallback result, and limitation for each row.
+An unchecked row is a documented target, not a tested claim.
+
+| Environment       | Native | Element | Events/exit | Fallback | Last verified / notes                                         |
+| ----------------- | ------ | ------- | ----------- | -------- | ------------------------------------------------------------- |
+| Windows + Chrome  | ☐      | ☐       | ☐           | ☐        | Not manually verified                                         |
+| Windows + Edge    | ☐      | ☐       | ☐           | ☐        | Not manually verified                                         |
+| Windows + Firefox | ☐      | ☐       | ☐           | ☐        | Not manually verified                                         |
+| macOS + Safari    | ☐      | ☐       | ☐           | ☐        | Not manually verified                                         |
+| macOS + Chrome    | ☐      | ☐       | ☐           | ☐        | Not manually verified                                         |
+| macOS + Firefox   | ☐      | ☐       | ☐           | ☐        | Not manually verified                                         |
+| Android + Chrome  | ☐      | ☐       | ☐           | ☐        | Not manually verified                                         |
+| Android + Firefox | ☐      | ☐       | ☐           | ☐        | Not manually verified                                         |
+| Samsung Internet  | ☐      | ☐       | ☐           | ☐        | Not manually verified                                         |
+| iPadOS + Safari   | ☐      | ☐       | ☐           | ☐        | Not manually verified                                         |
+| iPhone + Safari   | ☐      | ☐       | ☐           | ☐        | Expect arbitrary-element restrictions; verify current release |
+| Android WebView   | ☐      | ☐       | ☐           | ☐        | Host settings affect support                                  |
+| iOS WKWebView     | ☐      | ☐       | ☐           | ☐        | Host settings and iOS release affect support                  |
+
+For iframe checks, test both an allowed iframe (`allow="fullscreen" allowfullscreen`) and one without
+permission. Confirm errors are visible, focus returns after library-driven exit, fallback restores
+inline styles/body scroll, navigation and app switching do not leave stale state, and an accessible
+exit remains keyboard/touch reachable.

package/README.md

@@ -1,40 +1,376 @@
-# Vue Screenfull
+# vue-screenfull
 
-[![NPM version][npm-image]][npm-url]
-[![l][l-image]][l-url]
+[![npm version][npm-version-image]][npm-url]
+[![license][license-image]][license-url]
 
-[npm-image]: https://img.shields.io/npm/v/vue-screenfull
-[npm-url]: https://npmjs.org/package/vue-screenfull
-[l-image]: https://img.shields.io/npm/l/vue-screenfull
-[l-url]: https://github.com/chengchuu/vue-screenfull
+[npm-version-image]: https://img.shields.io/npm/v/vue-screenfull.svg
+[npm-url]: https://www.npmjs.com/package/vue-screenfull
+[license-image]: https://img.shields.io/npm/l/vue-screenfull.svg
+[license-url]: https://github.com/chengchuu/vue-screenfull/blob/main/LICENSE
 
-A **Vue3+** component for Fullscreen.
+Reactive, strongly typed, SSR-safe fullscreen utilities designed for Vue 3.
+The library uses the browser Fullscreen API when available and can optionally provide an explicitly labelled CSS pseudo-fullscreen fallback.
 
-## Install
+- [Project website](https://chengchuu.github.io/vue-screenfull/)
+- [Live playground](https://chengchuu.github.io/vue-screenfull/playground/)
+- [API documentation](https://chengchuu.github.io/vue-screenfull/api/)
 
-You can get vue-screenfull via [npm](https://www.npmjs.com/package/vue-screenfull).
+## Features
 
+- Reactive Composition API state with automatic scope cleanup.
+- 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.
+
+## Installation
+
+```bash
+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.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+import { useScreenfull } from "vue-screenfull";
+
+const target = useTemplateRef<HTMLElement>("target");
+const { isEnabled, isFullscreen, error, toggle } = useScreenfull();
+</script>
+
+<template>
+  <section ref="target">
+    <p>Fullscreen content</p>
+    <button type="button" :disabled="!isEnabled" @click="toggle(target)">
+      {{ isFullscreen ? "Exit fullscreen" : "Enter fullscreen" }}
+    </button>
+    <p v-if="error" role="alert">{{ error.message }}</p>
+  </section>
+</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.
+
+## Fullscreen a Specific Element
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+import { useScreenfullTarget } from "vue-screenfull";
+const panel = useTemplateRef<HTMLElement>("panel");
+const { request, isFullscreen } = useScreenfullTarget(panel);
+</script>
+<template>
+  <section ref="panel">
+    <button type="button" @click="request()">Open panel</button>
+    <span>Active: {{ isFullscreen }}</span>
+  </section>
+</template>
+```
+
+`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`.
+
+## Toggle Fullscreen
+
+```ts
+const result = await toggle(target, { navigationUI: "hide" });
+if (!result.ok) console.warn(result.error.code, result.error.suggestion);
+```
+
+For image content, pass the image template ref. For a video, pass an `HTMLVideoElement` ref.
+Some mobile browsers offer video-only fullscreen independently of arbitrary-element fullscreen.
+
+## Exit Fullscreen
+
+```vue
+<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.
+
+## Check Support
+
+```ts
+const { isEnabled, status } = useScreenfull();
+// isEnabled.value: native API currently enabled
+// status.value: idle | requesting | fullscreen | exiting | fallback | unsupported | error
+```
+
+Feature detection is more reliable than user-agent checks across Safari, iOS/iPadOS, and WebViews.
+
+## Handle Errors
+
+```ts
+const result = await request(target);
+if (!result.ok) {
+  console.error(
+    result.error.code,
+    result.error.message,
+    result.error.suggestion,
+  );
+}
+```
+
+Errors distinguish unsupported/SSR environments, invalid or detached targets, user activation,
+permissions and iframe policy, pending transitions, native request/exit failures, and fallback
+failures. `error` keeps the last error until `clearError()` is called.
+
+## CSS Fallback
+
+```ts
+const { request, exit, isFallback } = useScreenfull({
+  fallback: "css",
+  fallbackClass: "my-pseudo-fullscreen",
+  lockScroll: true,
+  restoreFocus: true,
+});
+```
+
+CSS fallback fixes an `HTMLElement` to the visual viewport, preserves every inline style it changes,
+locks and restores body scrolling, 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:
+
+```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.
+
+## Component Usage
+
+```vue
+<Screenfull
+  target="#article"
+  fallback="css"
+  v-slot="screenfull"
+  @error="report"
+>
+  <button type="button" @click="screenfull.toggle()">
+    {{ screenfull.isFullscreen ? "Exit" : "Open article" }}
+  </button>
+  <button v-if="screenfull.isFullscreen" type="button" @click="screenfull.exit">Exit</button>
+</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.
+
+## Directive Usage
+
+```vue
+<button v-screenfull>Fullscreen page</button>
+<button v-screenfull="target">Toggle target</button>
+<button v-screenfull:request="target">Enter target</button>
+<button v-screenfull:exit>Exit</button>
+<button
+  v-screenfull="{ target, action: 'toggle', options: { navigationUI: 'hide' } }"
+>Toggle</button>
 ```
-npm install vue-screenfull --save
+
+Only `request`, `exit`, and `toggle` arguments are supported. The default is `toggle`.
+Directives need local registration unless the plugin is installed:
+
+```ts
+const vScreenfull = importedDirective;
+```
+
+## Plugin Installation
+
+```ts
+import { createApp } from "vue";
+import VueScreenfull from "vue-screenfull";
+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.
+
+## Advanced Usage
+
+The framework-light controller is useful for migration and non-component integrations:
+
+```ts
+import { createScreenfullController } from "vue-screenfull";
+
+const controller = createScreenfullController({ restoreFocus: true });
+const onChange = (state) => console.log(state.isFullscreen, state.element);
+controller.on("change", onChange);
+await controller.request(document.querySelector("#map"));
+controller.off("change", onChange);
+await controller.destroy();
 ```
 
-## Usage
+`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.
+
+Reactive callbacks can observe changes without duplicate component wiring:
+
+```ts
+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.
+
+## iframe Usage
+
+The embedding page controls permission. A typical iframe is:
+
+```html
+<iframe
+  src="https://example.com/player"
+  allow="fullscreen"
+  allowfullscreen
+></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.
+
+## Mobile Considerations
+
+- Use direct user gestures and keep a visible touch-sized exit control.
+- Feature-detect rather than assuming support by device name.
+- iPhone Safari and WKWebView behavior may be limited or video-specific.
+- Dynamic browser chrome changes viewport height; CSS fallback uses `100dvh` where supported.
+- Native navigation, tab switching, app switching, and OS gestures may exit fullscreen.
+- Neither native capability nor this library guarantees browser/OS controls disappear.
 
-I am Coding it...
+## 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`.
+
+```vue
+<script setup lang="ts">
+import { useScreenfull } from "vue-screenfull";
+const screenfull = useScreenfull(); // safe during Nuxt setup/SSR
+</script>
+<template>
+  <ClientOnly>
+    <button
+      type="button"
+      :disabled="!screenfull.isEnabled.value"
+      @click="screenfull.toggle()"
+    >
+      Toggle page fullscreen
+    </button>
+  </ClientOnly>
+</template>
 ```
-// pass
+
+When destructuring refs in `<script setup>`, templates unwrap them automatically;
+when accessing through an object as above, 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.
+
+| screenfull concept                     | vue-screenfull equivalent                               |
+| -------------------------------------- | ------------------------------------------------------- |
+| `screenfull.request(element, options)` | `request(element, options)`                             |
+| `screenfull.exit()`                    | `exit()`                                                |
+| `screenfull.toggle(element, options)`  | `toggle(element, options)`                              |
+| `screenfull.isEnabled`                 | reactive `isEnabled.value`                              |
+| `screenfull.isFullscreen`              | reactive `isFullscreen.value`                           |
+| `screenfull.element`                   | reactive `fullscreenElement.value`                      |
+| `screenfull.on("change", fn)`          | refs, callbacks, component events, or controller events |
+| `screenfull.on("error", fn)`           | reactive `error`, callbacks, or controller events       |
+
+Before:
+
+```ts
+import screenfull from "screenfull";
+if (screenfull.isEnabled) await screenfull.toggle(element);
 ```
 
-## Develop
+After:
 
+```ts
+import { useScreenfull } from "vue-screenfull";
+const { isEnabled, toggle } = useScreenfull();
+if (isEnabled.value) {
+  const result = await toggle(element);
+  if (!result.ok) console.error(result.error.message);
+}
 ```
-# dev
+
+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.
+
+## API Reference
+
+Root exports:
+
+- `useScreenfull(options?)`, `useScreenfullTarget(target, options?)`
+- `Screenfull`, `vScreenfull`, and the default plugin
+- `createScreenfullController(options?)`
+- `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/).
+
+## 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:
+
+```bash
 npm run dev
+```
 
-# build
-npm run build
+Native fullscreen automation is intentionally not treated as universally reliable because browsers enforce user activation.
+
+## Development
 
-# documentation
+Node.js 22 is used in CI.
+
+```bash
+npm install
+npm run typecheck
+npm run lint
+npm run format:check
+npm run test
+npm run build
 npm run docs
+npm run seo:validate
+npm run preview
+npm pack --dry-run
 ```
+
+See `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`.
+
+## 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.

package/lib/global.d.ts

@@ -0,0 +1,31 @@
+/** Legacy Fullscreen API names used only after runtime feature detection. */
+
+
+declare global {
+  interface Document {
+    webkitExitFullscreen?: () => Promise<void> | void;
+    webkitFullscreenElement?: Element | null;
+    webkitFullscreenEnabled?: boolean;
+    webkitCancelFullScreen?: () => Promise<void> | void;
+    webkitCurrentFullScreenElement?: Element | null;
+    mozCancelFullScreen?: () => Promise<void> | void;
+    mozFullScreenElement?: Element | null;
+    mozFullScreenEnabled?: boolean;
+    msExitFullscreen?: () => Promise<void> | void;
+    msFullscreenElement?: Element | null;
+    msFullscreenEnabled?: boolean;
+  }
+  interface Element {
+    webkitRequestFullscreen?: (
+      options?: FullscreenOptions,
+    ) => Promise<void> | void;
+    webkitRequestFullScreen?: (
+      options?: FullscreenOptions,
+    ) => Promise<void> | void;
+    mozRequestFullScreen?: (
+      options?: FullscreenOptions,
+    ) => Promise<void> | void;
+    msRequestFullscreen?: (options?: FullscreenOptions) => Promise<void> | void;
+  }
+}
+export {};

package/lib/index.cjs.js

@@ -1,30 +1,7 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-/* Vue Screenfull */
-// https://vuejs.org/guide/typescript/overview.html#definecomponent
-var com = vue.defineComponent({
-  // type inference enabled
-  template: "\n    <div>\n      <span>{{ FirstName }}</span>\n    </div>\n  ",
-  // props: {
-  //   name: String,
-  //   msg: { type: String, required: true }
-  // },
-  data: function data() {
-    return {
-      count: 1,
-      FirstName: 'm'
-    };
-  },
-  mounted: function mounted() {
-    // this.name; // type: string | undefined
-    // this.msg; // type: string
-    // this.count; // type: number
-    this.FirstName = 'Cheng';
-  }
-});
-
-exports.com = com;
+/*!
+ * vue-screenfull v1.0.4
+ * (c) 2018-2026 Cheng https://www.npmjs.com/package/vue-screenfull
+ * Released under the MIT License.
+ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue");function n(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 r(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,u(t.key),t)}}(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function t(){var e,n,r="function"==typeof Symbol?Symbol:{},o=r.iterator||"@@iterator",u=r.toStringTag||"@@toStringTag";function i(r,t,o,u){var i=t&&t.prototype instanceof c?t:c,s=Object.create(i.prototype);return l(s,"_invoke",function(r,t,l){var o,u,i,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,u=0,i=e,d.n=r,a}};function v(r,t){for(u=r,i=t,n=0;!f&&c&&!l&&n<s.length;n++){var l,o=s[n],v=d.p,b=o[2];r>3?(l=b===t)&&(i=o[(u=o[4])?5:(u=3,3)],o[4]=o[5]=e):o[0]<=v&&((l=r<2&&v<o[1])?(u=0,d.v=t,d.n=o[1]):v<b&&(l=r<3||o[0]>t||t>b)&&(o[4]=r,o[5]=t,d.n=b,u=0))}if(l||r>1)return a;throw f=!0,t}return function(l,s,b){if(c>1)throw TypeError("Generator is already running");for(f&&1===s&&v(s,b),u=s,i=b;(n=u<2?e:i)||!f;){o||(u?u<3?(u>1&&(d.n=-1),v(u,i)):d.n=i:d.v=i);try{if(c=2,o){if(u||(l="next"),n=o[l]){if(!(n=n.call(o,i)))throw TypeError("iterator result is not an object");if(!n.done)return n;i=n.value,u<2&&(u=0)}else 1===u&&(n=o.return)&&n.call(o),u<2&&(i=TypeError("The iterator does not provide a '"+l+"' method"),u=1);o=e}else if((n=(f=d.n<0)?i:r.call(t,d))!==a)break}catch(n){o=e,u=1,i=n}finally{c=1}}return{value:n,done:f}}}(r,o,u),!0),s}var a={};function c(){}function s(){}function f(){}n=Object.getPrototypeOf;var d=[][o]?n(n([][o]())):(l(n={},o,function(){return this}),n),v=f.prototype=c.prototype=Object.create(d);function b(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,f):(e.__proto__=f,l(e,u,"GeneratorFunction")),e.prototype=Object.create(v),e}return s.prototype=f,l(v,"constructor",f),l(f,"constructor",s),s.displayName="GeneratorFunction",l(f,u,"GeneratorFunction"),l(v),l(v,u,"Generator"),l(v,o,function(){return this}),l(v,"toString",function(){return"[object Generator]"}),(t=function(){return{w:i,m:b}})()}function l(e,n,r,t){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}l=function(e,n,r,t){function u(n,r){l(e,n,function(e){return this._invoke(n,r,e)})}n?o?o(e,n,{value:r,enumerable:!t,configurable:!t,writable:!t}):e[n]=r:(u("next",0),u("throw",1),u("return",2))},l(e,n,r,t)}function o(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,l,o,u,i=[],a=!0,c=!1;try{if(o=(r=r.call(e)).next,0===n);else for(;!(a=(t=o.call(r)).done)&&(i.push(t.value),i.length!==n);a=!0);}catch(e){c=!0,l=e}finally{try{if(!a&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(c)throw l}}return i}}(e,r)||function(e,r){if(e){if("string"==typeof e)return n(e,r);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?n(e,r):void 0}}(e,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 u(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 u(e){try{a(t.next(e))}catch(e){o(e)}}function i(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(u,i)}a((t=t.apply(e,n||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;var a=[{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 c(e){var n=e.documentElement,r=e,t=a.find(function(e){return"function"==typeof n[e.requestFullscreen]&&"function"==typeof r[e.exitFullscreen]});return t?Object.freeze(Object.assign({},t)):null}var s=["position","inset","top","right","bottom","left","width","height","max-width","max-height","margin","z-index","overflow","background"],f=new WeakMap,d=/*#__PURE__*/function(){return r(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},[{key:"enter",value:function(e){var n,r,t,l,u,i,a,c,d,v,b=e.element,h=e.document,m=e.options,p=null===(n=h.defaultView)||void 0===n?void 0:n.HTMLElement;if(!(p&&b instanceof p))throw new TypeError("CSS fallback requires an HTMLElement.");var y=f.get(h);if(y&&y!==this)throw new Error("Another CSS fullscreen fallback is already active.");f.set(h,this);try{this.element=b,this.className=null!==(r=m.fallbackClass)&&void 0!==r?r:"vue-screenfull-fallback",this.styles={};for(var g=0,E=s;g<E.length;g++){var k=E[g];this.styles[k]={value:this.element.style.getPropertyValue(k),priority:this.element.style.getPropertyPriority(k)}}this.bodyOverflow={value:null!==(l=null===(t=h.body)||void 0===t?void 0:t.style.getPropertyValue("overflow"))&&void 0!==l?l:"",priority:null!==(i=null===(u=h.body)||void 0===u?void 0:u.style.getPropertyPriority("overflow"))&&void 0!==i?i:""},this.scrollX=null!==(c=null===(a=h.defaultView)||void 0===a?void 0:a.scrollX)&&void 0!==c?c:0,this.scrollY=null!==(v=null===(d=h.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=o(F[S],2),T=O[0],x=O[1];this.element.style.setProperty(T,x,"important")}this.addedClass=!this.element.classList.contains(this.className),this.addedClass&&this.element.classList.add(this.className),this.lockedScroll=!1!==m.lockScroll,this.lockedScroll&&h.body&&h.body.style.setProperty("overflow","hidden","important")}catch(e){try{this.exit({element:b,document:h,options:m})}finally{f.get(h)===this&&f.delete(h)}throw e}}},{key:"exit",value:function(e){var n,r,t=e.document;if(this.element&&this.styles)try{for(var l=0,o=s;l<o.length;l++){var u=o[l],i=this.styles[u];i.value?this.element.style.setProperty(u,i.value,i.priority):this.element.style.removeProperty(u)}this.addedClass&&this.element.classList.remove(this.className),this.lockedScroll&&t.body&&(this.bodyOverflow.value?t.body.style.setProperty("overflow",this.bodyOverflow.value,this.bodyOverflow.priority):t.body.style.removeProperty("overflow"),null===(r=null===(n=t.defaultView)||void 0===n?void 0:n.scrollTo)||void 0===r||r.call(n,this.scrollX,this.scrollY))}finally{f.get(t)===this&&f.delete(t),this.element=null,this.styles=null,this.addedClass=!1,this.lockedScroll=!1}}}])}();function v(e){return e.fallback&&"none"!==e.fallback?"css"===e.fallback?new d:e.fallback:null}var b={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:b[e]}}function m(e,n,r){var t,l=e instanceof Error?"".concat(e.name,": ").concat(e.message):String(e),o=l.toLowerCase(),u="exit"===n?"EXIT_FAILED":"fallback"===n?"FALLBACK_FAILED":"REQUEST_FAILED";if(o.includes("activation")||o.includes("gesture"))u="USER_ACTIVATION_REQUIRED";else if(o.includes("permission")||o.includes("denied")||o.includes("security")){var i;try{i=Boolean(null===(t=null==r?void 0:r.defaultView)||void 0===t?void 0:t.frameElement)}catch(e){i=!0}u=i?"IFRAME_PERMISSION_REQUIRED":"PERMISSION_DENIED"}return h(u,"Fullscreen ".concat(n," failed: ").concat(l),e)}var p=function(e,n){return{ok:!0,mode:e,element:n,error:null}};function y(){var e,n,r=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?c(o):null,a=new Set,s=new Set,f=v(l),d=null,b=l,y=null,g=!1,E=!1,k=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()||d),isFallback:Boolean(d),element:S()||d,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,x=F().isFullscreen,R=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),a.forEach(function(n){return O(n,e)}))},_=function(e){return k=e,arguments.length>1&&void 0!==arguments[1]&&arguments[1]||(w="NOT_SUPPORTED"===e.code||"NOT_IN_BROWSER"===e.code?"unsupported":"error"),E||(O(l.onError,e),s.forEach(function(n){return O(n,e)}),R()),l.debug&&"undefined"!=typeof console&&console.warn("[vue-screenfull]",e),{ok:!1,mode:"none",element:F().element,error:e}},C=function(){w=S()?"fullscreen":"idle";var e=F();e.isFullscreen!==x&&(e.isFullscreen?O(l.onEnter,e):O(l.onExit,e),x=e.isFullscreen),R()},I=function(e){g||_(m(e,"request",o))},N=function(e){"Escape"===e.key&&d&&D.exit()},P=function(){F().isFullscreen&&D.exit()},j=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}},q=function(e){return i(r,void 0,void 0,/*#__PURE__*/t().m(function n(){var r,l,o;return t().w(function(n){for(;;)switch(n.p=n.n){case 0:if(r=j(),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,r.promise;case 4:if((o=n.v).ok){n.n=5;break}throw o.cause;case 5:return n.p=5,r.cleanup(),n.f(5);case 6:return n.a(2)}},n,null,[[1,,5,6]])}))},A=function(){return i(r,void 0,void 0,/*#__PURE__*/t().m(function e(){var n;return t().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,q(function(){return n.call(o)});case 2:return e.a(2)}},e)}))};function L(e,n){return i(this,void 0,void 0,/*#__PURE__*/t().m(function r(){var u,i,a,c,s,y;return t().w(function(r){for(;;)switch(r.p=r.n){case 0:if(i=null!==(u=null==n?void 0:n.fallback)&&void 0!==u?u:l.fallback,a=Object.assign(Object.assign({},l),{fallback:i}),f=v(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,b=a,r.n=2,f.enter({element:e,document:o,options:a});case 2:if(!E){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 d=e,w="fallback",s=F(),x=!0,O(l.onFallback,s),O(l.onEnter,s),R(),r.a(2,p("fallback",e));case 5:return r.p=5,y=r.v,r.a(2,_(m(y,"fallback",o)))}},r,null,[[1,5]])}))}o&&u&&(o.addEventListener(u.fullscreenchange,C),o.addEventListener(u.fullscreenerror,I)),o&&(o.addEventListener("keydown",N),l.exitOnRouteChange&&(null===(n=o.defaultView)||void 0===n||n.addEventListener("popstate",P)));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 k},get raw(){return u},request:function(e,n){return i(this,void 0,void 0,/*#__PURE__*/t().m(function r(){var i,a,c,s,f,v,b,k;return t().w(function(r){for(;;)switch(r.p=r.n){case 0:if(!E&&o){r.n=1;break}return r.a(2,_(h("NOT_IN_BROWSER","Fullscreen is unavailable outside a browser document.")));case 1:if(!g){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,p(d?"fallback":"native",i));case 5:if(!d){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(y=!1===l.restoreFocus?null:o.activeElement,g=!0,w="requesting",R(),r.p=8,u&&D.isEnabled){r.n=10;break}return r.n=9,L(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,q(function(){return c.call(i,s)});case 11:return E||(w=S()?"fullscreen":"idle",R()),r.a(2,p("native",S()||i));case 12:if(r.p=12,b=r.v,!E){r.n=13;break}return f=m(b,"request",o),r.a(2,{ok:!1,mode:"none",element:null,error:f});case 13:if(v=m(b,"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,A();case 15:r.n=17;break;case 16:return r.p=16,k=r.v,r.a(2,_(m(k,"exit",o)));case 17:return r.n=18,L(i,n);case 19:return r.a(2,_(v));case 20:return r.p=20,g=!1,r.f(20);case 21:return r.a(2)}},r,null,[[14,16],[8,12,20,21]])}))},exit:function(){return i(this,void 0,void 0,/*#__PURE__*/t().m(function e(){var n,r,i,a;return t().w(function(e){for(;;)switch(e.p=e.n){case 0:if(!E&&o){e.n=1;break}return e.a(2,_(h("NOT_IN_BROWSER","Fullscreen is unavailable outside a browser document.")));case 1:if(!g){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,p("native",null));case 3:if(g=!0,w="exiting",R(),e.p=4,!d||!f){e.n=6;break}return r=d,e.n=5,f.exit({element:r,document:o,options:b});case 5:d=null,w="idle",i=F(),x=!1,O(l.onExit,i),R(),e.n=8;break;case 6:if(!u||!S()){e.n=8;break}return e.n=7,A();case 7:w=S()?"fullscreen":"idle",R();case 8:return null===(n=null==y?void 0:y.focus)||void 0===n||n.call(y),y=null,e.a(2,p(d?"fallback":"native",F().element));case 9:return e.p=9,a=e.v,e.a(2,_(m(a,"exit",o)));case 10:return e.p=10,g=!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__*/t().m(function r(){return t().w(function(r){for(;;)if(0===r.n)return r.a(2,F().isFullscreen?D.exit():D.request(e,n))},r)}))},on:function(e,n){"change"===e?a.add(n):s.add(n)},off:function(e,n){"change"===e?a.delete(n):s.delete(n)},clearError:function(){k=null,"error"===w&&(w=F().isFullscreen?d?"fallback":"fullscreen":"idle"),R()},destroy:function(){return i(this,void 0,void 0,/*#__PURE__*/t().m(function e(){var n,r,i;return t().w(function(e){for(;;)switch(e.p=e.n){case 0:if(!E){e.n=1;break}return e.a(2);case 1:if(E=!0,!(d&&f&&o)){e.n=6;break}return r=d,e.p=2,e.n=3,f.exit({element:r,document:o,options:b});case 3:e.n=5;break;case 4:e.p=4,i=e.v,k=m(i,"fallback",o);case 5:d=null;case 6:o&&u&&(o.removeEventListener(u.fullscreenchange,C),o.removeEventListener(u.fullscreenerror,I)),null==o||o.removeEventListener("keydown",N),l.exitOnRouteChange&&(null===(n=null==o?void 0:o.defaultView)||void 0===n||n.removeEventListener("popstate",P)),a.clear(),s.clear();case 7:return e.a(2)}},e,null,[[2,4]])}))}};return D}function g(n,r){if(!r)return null;if(void 0===n)return r.documentElement;var t=e.isRef(n)?n.value:n;if(null==t)return null;if("string"==typeof t)try{return r.querySelector(t)}catch(e){return null}return"object"==typeof t&&"$el"in t&&(t=t.$el),t&&"object"==typeof t&&1===t.nodeType?t:null}function E(){var n,r=this,l=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=y(l),u=e.ref(o.isEnabled),a=e.ref(o.isFullscreen),c=e.ref(o.isFallback),s=e.shallowRef(o.element),f=e.shallowRef(null),d=e.ref(o.status),v=e.shallowRef(o.error),b=null!==(n=l.document)&&void 0!==n?n:"undefined"==typeof document?void 0:document,m=function(e){u.value=e.isEnabled,a.value=e.isFullscreen,c.value=e.isFallback,s.value=e.element,d.value=e.status,v.value=o.error},p=function(e){v.value=e,d.value=o.status};o.on("change",m),o.on("error",p);var E=function(){var e,n=h(b?"INVALID_TARGET":"NOT_IN_BROWSER",b?"The target is not a valid element or selector in this document.":"Fullscreen is unavailable outside a browser document.");v.value=n,d.value=b?"error":"unsupported";try{null===(e=l.onError)||void 0===e||e.call(l,n)}catch(e){"undefined"!=typeof console&&console.error("[vue-screenfull] Listener failed.",e)}return{ok:!1,mode:"none",element:null,error:n}},k=function(e){var n=g(e,b);return f.value=n,n};return e.getCurrentScope()&&e.onScopeDispose(function(){o.off("change",m),o.off("error",p),o.destroy()}),{isEnabled:e.readonly(u),isFullscreen:e.readonly(a),isFallback:e.readonly(c),fullscreenElement:e.shallowReadonly(s),targetElement:e.shallowReadonly(f),status:e.readonly(d),error:e.readonly(v),request:function(e,n){return i(r,void 0,void 0,/*#__PURE__*/t().m(function r(){var l;return t().w(function(r){for(;;)if(0===r.n)return l=k(e),r.a(2,l?o.request(l,n):E())},r)}))},exit:function(){return o.exit()},toggle:function(e,n){return i(r,void 0,void 0,/*#__PURE__*/t().m(function r(){var l;return t().w(function(r){for(;;)switch(r.n){case 0:if(!o.isFullscreen){r.n=1;break}return r.a(2,o.exit());case 1:return l=k(e),r.a(2,l?o.request(l,n):E())}},r)}))},clearError:function(){o.clearError(),v.value=null}}}var k=/*#__PURE__*/e.defineComponent({name:"Screenfull",props:{target:{type:[String,Object],default:void 0},fallback:{type:[String,Object],default:"none"},fallbackClass:{type:String,default:"vue-screenfull-fallback"},lockScroll:{type:Boolean,default:!0},restoreFocus:{type:Boolean,default:!0},exitOnRouteChange:{type:Boolean,default:!1},debug:{type:Boolean,default:!1}},emits:{change:function(e){return"object"==typeof e},enter:function(e){return"object"==typeof e},exit:function(e){return"object"==typeof e},error:function(e){return"object"==typeof e},fallback:function(e){return"object"==typeof e}},slots:Object,setup:function(e,n){var r=n.slots,t=n.emit,l=E({fallback:e.fallback,fallbackClass:e.fallbackClass,lockScroll:e.lockScroll,restoreFocus:e.restoreFocus,exitOnRouteChange:e.exitOnRouteChange,debug:e.debug,onChange:function(e){return t("change",e)},onEnter:function(e){return t("enter",e)},onExit:function(e){return t("exit",e)},onError:function(e){return t("error",e)},onFallback:function(e){return t("fallback",e)}}),o=Object.assign(Object.assign({},l),{request:function(n,r){return l.request(void 0===n?e.target:n,r)},toggle:function(n,r){return l.toggle(void 0===n?e.target:n,r)}});return function(){var e;return null===(e=r.default)||void 0===e?void 0:e.call(r,o)}}}),w=/*#__PURE__*/new WeakMap;var S={mounted:function(e,n){var r=y(),t={controller:r,binding:n,click:function(){}};t.click=function(){var n=t.binding.value,l=function(e){return Boolean(e&&"object"==typeof e&&!("nodeType"in e)&&!("value"in e)&&("target"in e||"action"in e||"options"in e))}(n)?n:{target:n},o=t.binding.arg||l.action||"toggle",u=g(l.target,e.ownerDocument);"exit"===o?r.exit():"request"===o?r.request(u,l.options):r.toggle(u,l.options)},w.set(e,t),e.addEventListener("click",t.click)},updated:function(e,n){var r=w.get(e);r&&(r.binding=n)},unmounted:function(e){var n=w.get(e);n&&(e.removeEventListener("click",n.click),n.controller.destroy(),w.delete(e))}},F={install:function(e){var n,r,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.component(null!==(n=t.componentName)&&void 0!==n?n:"Screenfull",k),e.directive(null!==(r=t.directiveName)&&void 0!==r?r:"screenfull",S)}};exports.Screenfull=k,exports.createScreenfullController=y,exports.default=F,exports.detectFullscreenApi=c,exports.resolveScreenfullTarget=g,exports.useScreenfull=E,exports.useScreenfullTarget=function(e){var n=E(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{});return Object.assign(Object.assign({},n),{request:function(r,t){return n.request(e,t)},toggle:function(r,t){return n.toggle(e,t)}})},exports.vScreenfull=S;
+//# sourceMappingURL=index.cjs.js.map