vue-devui/fullscreen/index.umd.js

DevUI components based on Vite and Vue3

(function(r,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue"),require("clipboard")):typeof define=="function"&&define.amd?define(["exports","vue","clipboard"],n):(r=typeof globalThis!="undefined"?globalThis:r||self,n(r.index={},r.Vue))})(this,function(r,n){"use strict";const F={modelValue:{type:Boolean,default:!1},mode:{type:String,default:"normal"},zIndex:{type:Number,default:10}},v=27;function S(e,l){const{modelValue:s}=n.toRefs(e),t=c=>{c.keyCode===v&&s&&l.emit("update:modelValue",!1)};n.onMounted(()=>{document.addEventListener("keydown",t)}),n.onUnmounted(()=>{document.removeEventListener("keydown",t)})}function i(e,l,s){let t=e;return l&&(t+=`__${l}`),s&&(t+=`--${s}`),t}function h(e,l=!1){const s=l?`.devui-${e}`:`devui-${e}`;return{b:()=>i(s),e:u=>u?i(s,u):"",m:u=>u?i(s,"",u):"",em:(u,a)=>u&&a?i(s,u,a):""}}const m=h("fullscreen"),p=(e,l)=>{e.classList.add(m.b()),l.zIndex&&e.setAttribute("style",`z-index: ${l.zIndex}`)},b=e=>{e.classList.remove(m.b()),e.style.zIndex=""},x=async e=>{let l=null;return e.requestFullscreen?l=e.requestFullscreen():e.mozRequestFullScreen?l=e.mozRequestFullScreen():e.webkitRequestFullScreen?l=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(l=Promise.resolve(e.msRequestFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},w=async e=>{let l=null;return e.exitFullscreen?l=e.exitFullscreen():e.mozCancelFullScreen?l=e.mozCancelFullScreen():e.webkitCancelFullScreen?l=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(l=Promise.resolve(e.msExitFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},q=()=>{document.getElementsByTagName("html")[0].classList.add(m.e("html"))},C=()=>{document.getElementsByTagName("html")[0].classList.remove(m.e("html"))};function z(e,l,s){const{modelValue:t,mode:c}=n.toRefs(e);let d=!1;const y=o=>{o?(p(l.value,e),q()):(b(l.value),C())},u=o=>{o?x(l.value):d||w(document)};n.watch(t,o=>{c.value==="normal"&&y(o),c.value==="immersive"&&u(o)});const a=()=>{document.fullscreenElement?d=!1:(s.emit("update:modelValue",!1),d=!0)};n.onMounted(()=>{document.addEventListener("fullscreenchange",a)}),n.onUnmounted(()=>{document.removeEventListener("fullscreenchange",a)})}var N="",f=n.defineComponent({name:"DFullscreen",props:F,emits:["update:modelValue"],setup(e,l){const s=n.ref();return z(e,s,l),S(e,l),()=>{const t=n.renderSlot(n.useSlots(),"default");return n.createVNode("div",{ref:s},[t])}}}),g={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(e){e.component(f.name,f)}};r.Fullscreen=f,r.default=g,r.fullscreenProps=F,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});