vue-screen-scaler/dist/vue-screen-scaler.umd.js

A Vue 3 utility for scaling large screen applications to fit any display

(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.VueScreenScaler={},n.Vue))})(this,function(n,e){"use strict";const f=(m={})=>{const{designWidth:u=1920,designHeight:d=1080,fullScreen:E=!1,delay:h=100,containerStyle:S={position:"relative",transition:"transform 0.3s ease"}}=m,i=e.ref(null),l=e.ref(1),v=(o,s)=>{let t=null;return(...c)=>{t&&clearTimeout(t),t=setTimeout(()=>{o(...c),t=null},s)}},a=()=>{if(!i.value)return;const o=document.documentElement.clientWidth||document.body.clientWidth,s=document.documentElement.clientHeight||document.body.clientHeight,t=o/u,c=s/d;E?(l.value=(t+c)/2,i.value.style.transform=`scale(${t}, ${c})`):(l.value=o/s>u/d?c:t,i.value.style.transform=`scale(${l.value})`),i.value.style.transformOrigin="0 0"},r=v(a,h);return e.onMounted(()=>{i.value&&Object.entries(S).forEach(([o,s])=>{i.value.style[o]=s}),a(),window.addEventListener("resize",r)}),e.onBeforeUnmount(()=>{window.removeEventListener("resize",r)}),{screenRef:i,scale:l,resize:r}};n.useScreenScaler=f,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});