@nuxt/devtools
Version:
The Nuxt DevTools gives you insights and transparency about your Nuxt App.
968 lines (943 loc) • 72.4 kB
JavaScript
import { isRef, toRefs as toRefs$1, customRef, toValue, watch, getCurrentScope, onScopeDispose, onMounted, nextTick, getCurrentInstance, shallowRef, computed, unref, ref, defineComponent, mergeModels, useModel, watchEffect, withDirectives, createElementBlock, openBlock, createCommentVNode, createElementVNode, withModifiers, vShow, reactive, normalizeClass, normalizeStyle, toDisplayString, Fragment, createVNode, defineCustomElement, useTemplateRef } from 'vue';
const css = `*{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:before{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:after{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:before{--un-content:""}:after{--un-content:""}html{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button{-webkit-appearance:button;background-color:transparent;background-image:none}[type=button]{-webkit-appearance:button;background-color:transparent;background-image:none}[type=reset]{-webkit-appearance:button;background-color:transparent;background-image:none}[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder{opacity:1;color:#9ca3af}textarea::placeholder{opacity:1;color:#9ca3af}button{cursor:pointer}[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--un-text-opacity:100%}@property --nuxt-devtools-inspect-border-angle{syntax:"<angle>";inherits:false;initial-value:90deg}.nuxt-devtools-inspect-running-border{filter:blur(10px);--nuxt-devtools-inspect-border-angle:0deg;background:conic-gradient(from var(--nuxt-devtools-inspect-border-angle),#00dc82,#00e6e8,#42e200,#0086e2,#00dc82)border-box;-webkit-mask:linear-gradient(#fff 0,#fff 0) padding-box,linear-gradient(#fff 0,#fff 0);-webkit-mask-composite:destination-out;transition:all .5s;animation:1s linear infinite color-rotate-background;mask-image:linear-gradient(#fff 0,#fff 0),linear-gradient(#fff 0,#fff 0);mask-position:0 0,0 0;mask-size:auto,auto;mask-repeat:repeat,repeat;mask-clip:padding-box,border-box;mask-origin:padding-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.nuxt-devtools-inspect-neon{background-image:linear-gradient(90deg,#00dc82,#00e6e8,#42e200,#00dc82,#00e6e8,#42e200,#00dc82,#00e6e8,#42e200);background-position:0;background-size:400% 400%}.nuxt-devtools-inspect-neon.running{animation:3s linear infinite neon-background}@keyframes neon-background{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.nuxt-devtools-frame{z-index:2147483645;-webkit-font-smoothing:antialiased;width:100%;height:100%;position:fixed}.nuxt-devtools-frame iframe{background:var(--nuxt-devtools-widget-bg);border:1px solid rgba(125,125,125,.2);-webkit-border-radius:10px;border-radius:10px;outline:none;width:100%;height:100%}.nuxt-devtools-resize-handle-horizontal{cursor:ns-resize;-webkit-border-radius:5px;border-radius:5px;height:10px;margin:-5px 0;position:absolute;left:6px;right:6px}.nuxt-devtools-resize-handle-vertical{cursor:ew-resize;-webkit-border-radius:5px;border-radius:5px;width:10px;margin:0 -5px;position:absolute;top:6px;bottom:0}.nuxt-devtools-resize-handle-corner{-webkit-border-radius:6px;border-radius:6px;width:14px;height:14px;margin:-6px;position:absolute}.nuxt-devtools-resize-handle:hover{background:rgba(125,125,125,.1)}#nuxt-devtools-anchor{z-index:2147483645;transform-origin:50%;box-sizing:border-box;width:0;font-family:Arial,Helvetica,sans-serif;position:fixed;transform:translate(-50%,-50%)rotate(0);font-size:15px!important}#nuxt-devtools-anchor *{box-sizing:border-box}#nuxt-devtools-anchor button{cursor:pointer;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}#nuxt-devtools-anchor .nuxt-devtools-label{align-items:center;justify-items:center;gap:3px;padding:0 7px 0 8px;font-size:.8em;line-height:1em;display:flex}#nuxt-devtools-anchor .nuxt-devtools-label .nuxt-devtools-label-main{opacity:.8}#nuxt-devtools-anchor .nuxt-devtools-label .nuxt-devtools-label-secondary{opacity:.5;font-size:.8em;line-height:.6em}#nuxt-devtools-anchor .nuxt-devtools-nuxt-button{flex:none}#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-nuxt-button{transform:rotate(-90deg)}#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-label{flex-direction:column;gap:2px;padding:0 10px;transform:rotate(-90deg)}#nuxt-devtools-anchor .nuxt-devtools-panel{border:1px solid var(--nuxt-devtools-widget-border);background-color:var(--nuxt-devtools-widget-bg);backdrop-filter:blur(10px);height:30px;color:var(--nuxt-devtools-widget-fg);box-shadow:2px 2px 8px var(--nuxt-devtools-widget-shadow);user-select:none;touch-action:none;-webkit-border-radius:100px;border-radius:100px;justify-content:flex-start;align-items:center;gap:2px;max-width:150px;padding:2px 2px 2px 2.5px;transition:all .6s,max-width .6s,padding .5s,transform .4s,opacity .2s;display:flex;position:absolute;top:0;left:0;overflow:hidden;transform:translate(-50%,-50%)}#nuxt-devtools-anchor.nuxt-devtools-hide .nuxt-devtools-panel{max-width:32px;padding:2px 0}#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-panel{box-shadow:2px -2px 8px var(--nuxt-devtools-widget-shadow);transform:translate(-50%,-50%)rotate(90deg)}#nuxt-devtools-anchor .nuxt-devtools-panel-content{transition:opacity .4s}#nuxt-devtools-anchor.nuxt-devtools-hide .nuxt-devtools-panel-content{opacity:0}#nuxt-devtools-anchor .nuxt-devtools-icon-button{opacity:.8;border-width:0;-webkit-border-radius:100%;border-radius:100%;justify-content:center;align-items:center;width:30px;height:30px;transition:opacity .2s ease-in-out;display:flex}#nuxt-devtools-anchor .nuxt-devtools-icon-button:hover{opacity:1}#nuxt-devtools-anchor:hover .nuxt-devtools-glowing{opacity:.6}#nuxt-devtools-anchor .nuxt-devtools-glowing{opacity:0;pointer-events:none;z-index:-1;filter:blur(60px);background-image:linear-gradient(45deg,#00dc82,#00dc82,#00dc82);-webkit-border-radius:9999px;border-radius:9999px;width:160px;height:160px;transition:all 1s;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}@media print{#nuxt-devtools-anchor{display:none}}*{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:before{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.i-ph-arrow-bend-left-up-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='M152 80H56l48-48Z' opacity='.2'/%3E%3Cpath d='M200 216a88.1 88.1 0 0 1-88-88V88h40a8 8 0 0 0 5.66-13.66l-48-48a8 8 0 0 0-11.32 0l-48 48A8 8 0 0 0 56 88h40v40a104.11 104.11 0 0 0 104 104a8 8 0 0 0 0-16M104 43.31L132.69 72H75.31Z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon)no-repeat;mask:var(--un-icon)no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.i-ph-arrow-up-right-light{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M198 64v104a6 6 0 0 1-12 0V78.48L68.24 196.24a6 6 0 0 1-8.48-8.48L177.52 70H88a6 6 0 0 1 0-12h104a6 6 0 0 1 6 6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon)no-repeat;mask:var(--un-icon)no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.i-ph-x{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon)no-repeat;mask:var(--un-icon)no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.container{width:100%}.bg-glass{--un-backdrop-blur:blur(5px);backdrop-filter:var(--un-backdrop-blur)var(--un-backdrop-brightness)var(--un-backdrop-contrast)var(--un-backdrop-grayscale)var(--un-backdrop-hue-rotate)var(--un-backdrop-invert)var(--un-backdrop-opacity)var(--un-backdrop-saturate)var(--un-backdrop-sepia);background-color:rgba(255,255,255,.75)}.color-base{--un-text-opacity:1;color:rgba(38,38,38,var(--un-text-opacity))}.ring-base{--un-ring-opacity:.13;--un-ring-color:rgba(136,136,136,var(--un-ring-opacity))}@media (prefers-color-scheme:dark){.bg-glass{background-color:rgba(17,17,17,.75)}.color-base{--un-text-opacity:1;color:rgba(229,229,229,var(--un-text-opacity))}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.disabled\\:pointer-events-none:disabled{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{top:0;bottom:0;left:0;right:0}.z-10{z-index:10}.z-9999999{z-index:9999999}.ms:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:1rem}.ms:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:1rem}.mt--2{margin-top:-.5rem}.w-400px{width:400px}.flex{display:flex}.flex-auto{flex:auto}.flex-none{flex:none}.flex-col{flex-direction:column}.transform{transform:translateX(var(--un-translate-x))translateY(var(--un-translate-y))translateZ(var(--un-translate-z))rotate(var(--un-rotate))rotateX(var(--un-rotate-x))rotateY(var(--un-rotate-y))rotateZ(var(--un-rotate-z))skewX(var(--un-skew-x))skewY(var(--un-skew-y))scaleX(var(--un-scale-x))scaleY(var(--un-scale-y))scaleZ(var(--un-scale-z))}.resize{resize:both}.items-center{align-items:center}.gap-2{gap:.5rem}.of-hidden{overflow:hidden}.border-1\\.5{border-width:1.5px}.border-transparent{border-color:transparent}.rounded-lg{-webkit-border-radius:.5rem;border-radius:.5rem}.p2{padding:.5rem}.px{padding-left:1rem;padding-right:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.hover\\:text-green6:hover{--un-text-opacity:1;color:rgba(22,163,74,var(--un-text-opacity))}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.op0{opacity:0}.op100{opacity:1}.op50{opacity:.5}.hover\\:op100:hover{opacity:1}.disabled\\:op10\\!:disabled{opacity:.1!important}.shadow-lg{--un-shadow:var(--un-shadow-inset)0 10px 15px -3px var(--un-shadow-color,rgba(0,0,0,.1)),var(--un-shadow-inset)0 4px 6px -4px var(--un-shadow-color,rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.ring-1{--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset)0 0 0 var(--un-ring-offset-width)var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset)0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width))var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.backdrop-blur{--un-backdrop-blur:blur(8px);backdrop-filter:var(--un-backdrop-blur)var(--un-backdrop-brightness)var(--un-backdrop-contrast)var(--un-backdrop-grayscale)var(--un-backdrop-hue-rotate)var(--un-backdrop-invert)var(--un-backdrop-opacity)var(--un-backdrop-saturate)var(--un-backdrop-sepia)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.transition-none{transition:none}`;
function tryOnScopeDispose(fn) {
if (getCurrentScope()) {
onScopeDispose(fn);
return true;
}
return false;
}
const isClient = typeof window !== "undefined" && typeof document !== "undefined";
typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
const notNullish = (val) => val != null;
const toString = Object.prototype.toString;
const isObject = (val) => toString.call(val) === "[object Object]";
const noop = () => {
};
const isIOS = /* @__PURE__ */ getIsIOS();
function getIsIOS() {
var _a, _b;
return isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window == null ? void 0 : window.navigator.userAgent));
}
function createFilterWrapper(filter, fn) {
function wrapper(...args) {
return new Promise((resolve, reject) => {
Promise.resolve(filter(() => fn.apply(this, args), { fn, thisArg: this, args })).then(resolve).catch(reject);
});
}
return wrapper;
}
function debounceFilter(ms, options = {}) {
let timer;
let maxTimer;
let lastRejector = noop;
const _clearTimeout = (timer2) => {
clearTimeout(timer2);
lastRejector();
lastRejector = noop;
};
let lastInvoker;
const filter = (invoke) => {
const duration = toValue(ms);
const maxDuration = toValue(options.maxWait);
if (timer)
_clearTimeout(timer);
if (duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
if (maxTimer) {
_clearTimeout(maxTimer);
maxTimer = null;
}
return Promise.resolve(invoke());
}
return new Promise((resolve, reject) => {
lastRejector = options.rejectOnCancel ? reject : resolve;
lastInvoker = invoke;
if (maxDuration && !maxTimer) {
maxTimer = setTimeout(() => {
if (timer)
_clearTimeout(timer);
maxTimer = null;
resolve(lastInvoker());
}, maxDuration);
}
timer = setTimeout(() => {
if (maxTimer)
_clearTimeout(maxTimer);
maxTimer = null;
resolve(invoke());
}, duration);
});
};
return filter;
}
function toArray(value) {
return Array.isArray(value) ? value : [value];
}
function getLifeCycleTarget(target) {
return getCurrentInstance();
}
function useDebounceFn(fn, ms = 200, options = {}) {
return createFilterWrapper(
debounceFilter(ms, options),
fn
);
}
function toRefs(objectRef, options = {}) {
if (!isRef(objectRef))
return toRefs$1(objectRef);
const result = Array.isArray(objectRef.value) ? Array.from({ length: objectRef.value.length }) : {};
for (const key in objectRef.value) {
result[key] = customRef(() => ({
get() {
return objectRef.value[key];
},
set(v) {
var _a;
const replaceRef = (_a = toValue(options.replaceRef)) != null ? _a : true;
if (replaceRef) {
if (Array.isArray(objectRef.value)) {
const copy = [...objectRef.value];
copy[key] = v;
objectRef.value = copy;
} else {
const newObject = { ...objectRef.value, [key]: v };
Object.setPrototypeOf(newObject, Object.getPrototypeOf(objectRef.value));
objectRef.value = newObject;
}
} else {
objectRef.value[key] = v;
}
}
}));
}
return result;
}
function tryOnMounted(fn, sync = true, target) {
const instance = getLifeCycleTarget();
if (instance)
onMounted(fn, target);
else if (sync)
fn();
else
nextTick(fn);
}
function watchImmediate(source, cb, options) {
return watch(
source,
cb,
{
...options,
immediate: true
}
);
}
const defaultWindow = isClient ? window : void 0;
function unrefElement(elRef) {
var _a;
const plain = toValue(elRef);
return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
}
function useEventListener(...args) {
const cleanups = [];
const cleanup = () => {
cleanups.forEach((fn) => fn());
cleanups.length = 0;
};
const register = (el, event, listener, options) => {
el.addEventListener(event, listener, options);
return () => el.removeEventListener(event, listener, options);
};
const firstParamTargets = computed(() => {
const test = toArray(toValue(args[0])).filter((e) => e != null);
return test.every((e) => typeof e !== "string") ? test : void 0;
});
const stopWatch = watchImmediate(
() => {
var _a, _b;
return [
(_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
toArray(unref(firstParamTargets.value ? args[2] : args[1])),
// @ts-expect-error - TypeScript gets the correct types, but somehow still complains
toValue(firstParamTargets.value ? args[3] : args[2])
];
},
([raw_targets, raw_events, raw_listeners, raw_options]) => {
cleanup();
if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
return;
const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
cleanups.push(
...raw_targets.flatMap(
(el) => raw_events.flatMap(
(event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
)
)
);
},
{ flush: "post" }
);
const stop = () => {
stopWatch();
cleanup();
};
tryOnScopeDispose(cleanup);
return stop;
}
let _iOSWorkaround = false;
function onClickOutside(target, handler, options = {}) {
const { window = defaultWindow, ignore = [], capture = true, detectIframe = false, controls = false } = options;
if (!window) {
return controls ? { stop: noop, cancel: noop, trigger: noop } : noop;
}
if (isIOS && !_iOSWorkaround) {
_iOSWorkaround = true;
const listenerOptions = { passive: true };
Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", noop, listenerOptions));
window.document.documentElement.addEventListener("click", noop, listenerOptions);
}
let shouldListen = true;
const shouldIgnore = (event) => {
return toValue(ignore).some((target2) => {
if (typeof target2 === "string") {
return Array.from(window.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
} else {
const el = unrefElement(target2);
return el && (event.target === el || event.composedPath().includes(el));
}
});
};
function hasMultipleRoots(target2) {
const vm = toValue(target2);
return vm && vm.$.subTree.shapeFlag === 16;
}
function checkMultipleRoots(target2, event) {
const vm = toValue(target2);
const children = vm.$.subTree && vm.$.subTree.children;
if (children == null || !Array.isArray(children))
return false;
return children.some((child) => child.el === event.target || event.composedPath().includes(child.el));
}
const listener = (event) => {
const el = unrefElement(target);
if (event.target == null)
return;
if (!(el instanceof Element) && hasMultipleRoots(target) && checkMultipleRoots(target, event))
return;
if (!el || el === event.target || event.composedPath().includes(el))
return;
if ("detail" in event && event.detail === 0)
shouldListen = !shouldIgnore(event);
if (!shouldListen) {
shouldListen = true;
return;
}
handler(event);
};
let isProcessingClick = false;
const cleanup = [
useEventListener(window, "click", (event) => {
if (!isProcessingClick) {
isProcessingClick = true;
setTimeout(() => {
isProcessingClick = false;
}, 0);
listener(event);
}
}, { passive: true, capture }),
useEventListener(window, "pointerdown", (e) => {
const el = unrefElement(target);
shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el));
}, { passive: true }),
detectIframe && useEventListener(window, "blur", (event) => {
setTimeout(() => {
var _a;
const el = unrefElement(target);
if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement))) {
handler(event);
}
}, 0);
}, { passive: true })
].filter(Boolean);
const stop = () => cleanup.forEach((fn) => fn());
if (controls) {
return {
stop,
cancel: () => {
shouldListen = false;
},
trigger: (event) => {
shouldListen = true;
listener(event);
shouldListen = false;
}
};
}
return stop;
}
function useMounted() {
const isMounted = shallowRef(false);
const instance = getCurrentInstance();
if (instance) {
onMounted(() => {
isMounted.value = true;
}, instance);
}
return isMounted;
}
function useSupported(callback) {
const isMounted = useMounted();
return computed(() => {
isMounted.value;
return Boolean(callback());
});
}
function useMutationObserver(target, callback, options = {}) {
const { window = defaultWindow, ...mutationOptions } = options;
let observer;
const isSupported = useSupported(() => window && "MutationObserver" in window);
const cleanup = () => {
if (observer) {
observer.disconnect();
observer = void 0;
}
};
const targets = computed(() => {
const value = toValue(target);
const items = toArray(value).map(unrefElement).filter(notNullish);
return new Set(items);
});
const stopWatch = watch(
() => targets.value,
(targets2) => {
cleanup();
if (isSupported.value && targets2.size) {
observer = new MutationObserver(callback);
targets2.forEach((el) => observer.observe(el, mutationOptions));
}
},
{ immediate: true, flush: "post" }
);
const takeRecords = () => {
return observer == null ? void 0 : observer.takeRecords();
};
const stop = () => {
stopWatch();
cleanup();
};
tryOnScopeDispose(stop);
return {
isSupported,
stop,
takeRecords
};
}
function useCssVar(prop, target, options = {}) {
const { window = defaultWindow, initialValue, observe = false } = options;
const variable = shallowRef(initialValue);
const elRef = computed(() => {
var _a;
return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
});
function updateCssVar() {
var _a;
const key = toValue(prop);
const el = toValue(elRef);
if (el && window && key) {
const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
variable.value = value || variable.value || initialValue;
}
}
if (observe) {
useMutationObserver(elRef, updateCssVar, {
attributeFilter: ["style", "class"],
window
});
}
watch(
[elRef, () => toValue(prop)],
(_, old) => {
if (old[0] && old[1])
old[0].style.removeProperty(old[1]);
updateCssVar();
},
{ immediate: true }
);
watch(
[variable, elRef],
([val, el]) => {
const raw_prop = toValue(prop);
if ((el == null ? void 0 : el.style) && raw_prop) {
if (val == null)
el.style.removeProperty(raw_prop);
else
el.style.setProperty(raw_prop, val);
}
},
{ immediate: true }
);
return variable;
}
function useDraggable(target, options = {}) {
var _a;
const {
pointerTypes,
preventDefault,
stopPropagation,
exact,
onMove,
onEnd,
onStart,
initialValue,
axis = "both",
draggingElement = defaultWindow,
containerElement,
handle: draggingHandle = target,
buttons = [0]
} = options;
const position = ref(
(_a = toValue(initialValue)) != null ? _a : { x: 0, y: 0 }
);
const pressedDelta = ref();
const filterEvent = (e) => {
if (pointerTypes)
return pointerTypes.includes(e.pointerType);
return true;
};
const handleEvent = (e) => {
if (toValue(preventDefault))
e.preventDefault();
if (toValue(stopPropagation))
e.stopPropagation();
};
const start = (e) => {
var _a2;
if (!toValue(buttons).includes(e.button))
return;
if (toValue(options.disabled) || !filterEvent(e))
return;
if (toValue(exact) && e.target !== toValue(target))
return;
const container = toValue(containerElement);
const containerRect = (_a2 = container == null ? void 0 : container.getBoundingClientRect) == null ? void 0 : _a2.call(container);
const targetRect = toValue(target).getBoundingClientRect();
const pos = {
x: e.clientX - (container ? targetRect.left - containerRect.left + container.scrollLeft : targetRect.left),
y: e.clientY - (container ? targetRect.top - containerRect.top + container.scrollTop : targetRect.top)
};
if ((onStart == null ? void 0 : onStart(pos, e)) === false)
return;
pressedDelta.value = pos;
handleEvent(e);
};
const move = (e) => {
if (toValue(options.disabled) || !filterEvent(e))
return;
if (!pressedDelta.value)
return;
const container = toValue(containerElement);
const targetRect = toValue(target).getBoundingClientRect();
let { x, y } = position.value;
if (axis === "x" || axis === "both") {
x = e.clientX - pressedDelta.value.x;
if (container)
x = Math.min(Math.max(0, x), container.scrollWidth - targetRect.width);
}
if (axis === "y" || axis === "both") {
y = e.clientY - pressedDelta.value.y;
if (container)
y = Math.min(Math.max(0, y), container.scrollHeight - targetRect.height);
}
position.value = {
x,
y
};
onMove == null ? void 0 : onMove(position.value, e);
handleEvent(e);
};
const end = (e) => {
if (toValue(options.disabled) || !filterEvent(e))
return;
if (!pressedDelta.value)
return;
pressedDelta.value = void 0;
onEnd == null ? void 0 : onEnd(position.value, e);
handleEvent(e);
};
if (isClient) {
const config = () => {
var _a2;
return {
capture: (_a2 = options.capture) != null ? _a2 : true,
passive: !toValue(preventDefault)
};
};
useEventListener(draggingHandle, "pointerdown", start, config);
useEventListener(draggingElement, "pointermove", move, config);
useEventListener(draggingElement, "pointerup", end, config);
}
return {
...toRefs(position),
position,
isDragging: computed(() => !!pressedDelta.value),
style: computed(
() => `left:${position.value.x}px;top:${position.value.y}px;`
)
};
}
function useResizeObserver(target, callback, options = {}) {
const { window = defaultWindow, ...observerOptions } = options;
let observer;
const isSupported = useSupported(() => window && "ResizeObserver" in window);
const cleanup = () => {
if (observer) {
observer.disconnect();
observer = void 0;
}
};
const targets = computed(() => {
const _targets = toValue(target);
return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
});
const stopWatch = watch(
targets,
(els) => {
cleanup();
if (isSupported.value && window) {
observer = new ResizeObserver(callback);
for (const _el of els) {
if (_el)
observer.observe(_el, observerOptions);
}
}
},
{ immediate: true, flush: "post" }
);
const stop = () => {
cleanup();
stopWatch();
};
tryOnScopeDispose(stop);
return {
isSupported,
stop
};
}
function useElementBounding(target, options = {}) {
const {
reset = true,
windowResize = true,
windowScroll = true,
immediate = true,
updateTiming = "sync"
} = options;
const height = shallowRef(0);
const bottom = shallowRef(0);
const left = shallowRef(0);
const right = shallowRef(0);
const top = shallowRef(0);
const width = shallowRef(0);
const x = shallowRef(0);
const y = shallowRef(0);
function recalculate() {
const el = unrefElement(target);
if (!el) {
if (reset) {
height.value = 0;
bottom.value = 0;
left.value = 0;
right.value = 0;
top.value = 0;
width.value = 0;
x.value = 0;
y.value = 0;
}
return;
}
const rect = el.getBoundingClientRect();
height.value = rect.height;
bottom.value = rect.bottom;
left.value = rect.left;
right.value = rect.right;
top.value = rect.top;
width.value = rect.width;
x.value = rect.x;
y.value = rect.y;
}
function update() {
if (updateTiming === "sync")
recalculate();
else if (updateTiming === "next-frame")
requestAnimationFrame(() => recalculate());
}
useResizeObserver(target, update);
watch(() => unrefElement(target), (ele) => !ele && update());
useMutationObserver(target, update, {
attributeFilter: ["style", "class"]
});
if (windowScroll)
useEventListener("scroll", update, { capture: true, passive: true });
if (windowResize)
useEventListener("resize", update, { passive: true });
tryOnMounted(() => {
if (immediate)
update();
});
return {
height,
bottom,
left,
right,
top,
width,
x,
y,
update
};
}
const topVarName = "--vueuse-safe-area-top";
const rightVarName = "--vueuse-safe-area-right";
const bottomVarName = "--vueuse-safe-area-bottom";
const leftVarName = "--vueuse-safe-area-left";
function useScreenSafeArea() {
const top = shallowRef("");
const right = shallowRef("");
const bottom = shallowRef("");
const left = shallowRef("");
if (isClient) {
const topCssVar = useCssVar(topVarName);
const rightCssVar = useCssVar(rightVarName);
const bottomCssVar = useCssVar(bottomVarName);
const leftCssVar = useCssVar(leftVarName);
topCssVar.value = "env(safe-area-inset-top, 0px)";
rightCssVar.value = "env(safe-area-inset-right, 0px)";
bottomCssVar.value = "env(safe-area-inset-bottom, 0px)";
leftCssVar.value = "env(safe-area-inset-left, 0px)";
update();
useEventListener("resize", useDebounceFn(update), { passive: true });
}
function update() {
top.value = getValue(topVarName);
right.value = getValue(rightVarName);
bottom.value = getValue(bottomVarName);
left.value = getValue(leftVarName);
}
return {
top,
right,
bottom,
left,
update
};
}
function getValue(position) {
return getComputedStyle(document.documentElement).getPropertyValue(position);
}
const PANEL_MIN = 20;
const PANEL_MAX = 100;
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
__name: "NuxtDevtoolsFrameBox",
props: /* @__PURE__ */ mergeModels({
client: { type: Object, required: true },
isDragging: { type: Boolean, required: true },
state: { type: Object, required: true }
}, {
"popupWindow": { type: null },
"popupWindowModifiers": {}
}),
emits: ["update:popupWindow"],
setup(__props, { expose: __expose }) {
__expose();
const props = __props;
const popupWindow = useModel(__props, "popupWindow");
const {
state
} = toRefs(props);
const container = ref();
const isResizing = ref(false);
watchEffect(() => {
if (!container.value)
return;
if (state.value.open) {
const iframe = props.client.getIframe();
if (!iframe)
return;
iframe.style.pointerEvents = isResizing.value || props.isDragging || props.client.inspector?.isEnabled.value ? "none" : "auto";
if (!popupWindow.value) {
if (Array.from(container.value.children).every((el) => el !== iframe))
container.value.appendChild(iframe);
}
}
});
useEventListener(window, "keydown", (e) => {
if (e.key === "Escape" && props.client.inspector?.isEnabled.value) {
e.preventDefault();
props.client.inspector?.disable();
props.client.devtools.close();
}
});
useEventListener(window, "mousedown", (e) => {
if (!state.value.closeOnOutsideClick)
return;
if (popupWindow.value)
return;
if (!state.value.open || isResizing.value || props.client.inspector?.isEnabled.value)
return;
const matched = e.composedPath().find((_el) => {
const el = _el;
return Array.from(el.classList || []).some((c) => c.startsWith("nuxt-devtools-")) || el.tagName?.toLowerCase() === "iframe";
});
if (!matched)
state.value.open = false;
});
function handleResize(e) {
if (!isResizing.value || !state.value.open)
return;
const iframe = props.client.getIframe();
if (!iframe)
return;
const box = iframe.getBoundingClientRect();
let widthPx, heightPx;
if (isResizing.value.right) {
widthPx = Math.abs(e instanceof MouseEvent ? e.clientX : (e.touches[0]?.clientX || 0) - (box?.left || 0));
state.value.width = Math.min(PANEL_MAX, Math.max(PANEL_MIN, widthPx / window.innerWidth * 100));
} else if (isResizing.value.left) {
widthPx = Math.abs((box?.right || 0) - (e instanceof MouseEvent ? e.clientX : e.touches[0]?.clientX || 0));
state.value.width = Math.min(PANEL_MAX, Math.max(PANEL_MIN, widthPx / window.innerWidth * 100));
}
if (isResizing.value.top) {
heightPx = Math.abs((box?.bottom || 0) - (e instanceof MouseEvent ? e.clientY : e.touches[0]?.clientY || 0));
state.value.height = Math.min(PANEL_MAX, Math.max(PANEL_MIN, heightPx / window.innerHeight * 100));
} else if (isResizing.value.bottom) {
heightPx = Math.abs(e instanceof MouseEvent ? e.clientY : (e.touches[0]?.clientY || 0) - (box?.top || 0));
state.value.height = Math.min(PANEL_MAX, Math.max(PANEL_MIN, heightPx / window.innerHeight * 100));
}
}
useEventListener(window, "mousemove", handleResize);
useEventListener(window, "touchmove", handleResize);
useEventListener(window, "mouseup", () => isResizing.value = false);
useEventListener(window, "touchend", () => isResizing.value = false);
useEventListener(window, "mouseleave", () => isResizing.value = false);
const __returned__ = { props, PANEL_MIN, PANEL_MAX, popupWindow, state, container, isResizing, handleResize };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1$2 = {
ref: "container",
class: "nuxt-devtools-frame"
};
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
return withDirectives((openBlock(), createElementBlock(
"div",
_hoisted_1$2,
[
createCommentVNode(" Handlers "),
withDirectives(createElementVNode(
"div",
{
class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal",
style: { top: 0 },
onMousedown: _cache[0] || (_cache[0] = withModifiers(($event) => $setup.isResizing = { top: true }, ["prevent"])),
onTouchstartPassive: _cache[1] || (_cache[1] = () => $setup.isResizing = { top: true })
},
null,
544
/* NEED_HYDRATION, NEED_PATCH */
), [
[vShow, $setup.state.position !== "top"]
]),
withDirectives(createElementVNode(
"div",
{
class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal",
style: { bottom: 0 },
onMousedown: _cache[2] || (_cache[2] = withModifiers(() => $setup.isResizing = { bottom: true }, ["prevent"])),
onTouchstartPassive: _cache[3] || (_cache[3] = () => $setup.isResizing = { bottom: true })
},
null,
544
/* NEED_HYDRATION, NEED_PATCH */
), [
[vShow, $setup.state.position !== "bottom"]
]),
withDirectives(createElementVNode(
"div",
{
class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical",
style: { left: 0 },
onMousedown: _cache[4] || (_cache[4] = withModifiers(() => $setup.isResizing = { left: true }, ["prevent"])),
onTouchstartPassive: _cache[5] || (_cache[5] = () => $setup.isResizing = { left: true })
},
null,
544
/* NEED_HYDRATION, NEED_PATCH */
), [
[vShow, $setup.state.position !== "left"]
]),
withDirectives(createElementVNode(
"div",
{
class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical",
style: { right: 0 },
onMousedown: _cache[6] || (_cache[6] = withModifiers(() => $setup.isResizing = { right: true }, ["prevent"])),
onTouchstartPassive: _cache[7] || (_cache[7] = () => $setup.isResizing = { right: true })
},
null,
544
/* NEED_HYDRATION, NEED_PATCH */
), [
[vShow, $setup.state.position !== "right"]
]),
withDirectives(createElementVNode(
"div",
{
class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
style: { top: 0, left: 0, cursor: "nwse-resize" },
onMousedown: _cache[8] || (_cache[8] = withModifiers(() => $setup.isResizing = { top: true, left: true }, ["prevent"])),
onTouchstartPassive: _cache[9] || (_cache[9] = () => $setup.isResizing = { top: true, left: true })
},
null,
544
/* NEED_HYDRATION, NEED_PATCH */
), [
[vShow, $setup.state.position !== "top" && $setup.state.position !== "left"]
]),
withDirectives(createElementVNode(
"div",
{
class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
style: { top: 0, right: 0, cursor: "nesw-resize" },
onMousedown: _cache[10] || (_cache[10] = withModifiers(() => $setup.isResizing = { top: true, right: true }, ["prevent"])),
onTouchstartPassive: _cache[11] || (_cache[11] = () => $setup.isResizing = { top: true, right: true })
},
null,
544
/* NEED_HYDRATION, NEED_PATCH */
), [
[vShow, $setup.state.position !== "top" && $setup.state.position !== "right"]
]),
withDirectives(createElementVNode(
"div",
{
class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
style: { bottom: 0, left: 0, cursor: "nesw-resize" },
onMousedown: _cache[12] || (_cache[12] = withModifiers(() => $setup.isResizing = { bottom: true, left: true }, ["prevent"])),
onTouchstartPassive: _cache[13] || (_cache[13] = () => $setup.isResizing = { bottom: true, left: true })
},
null,
544
/* NEED_HYDRATION, NEED_PATCH */
), [
[vShow, $setup.state.position !== "bottom" && $setup.state.position !== "left"]
]),
withDirectives(createElementVNode(
"div",
{
class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
style: { bottom: 0, right: 0, cursor: "nwse-resize" },
onMousedown: _cache[14] || (_cache[14] = withModifiers(() => $setup.isResizing = { bottom: true, right: true }, ["prevent"])),
onTouchstartPassive: _cache[15] || (_cache[15] = () => $setup.isResizing = { bottom: true, right: true })
},
null,
544
/* NEED_HYDRATION, NEED_PATCH */
), [
[vShow, $setup.state.position !== "bottom" && $setup.state.position !== "right"]
])
],
512
/* NEED_PATCH */
)), [
[vShow, $setup.state.open && !$props.client.inspector?.isEnabled.value && !$setup.popupWindow]
]);
}
const FrameBox = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/home/runner/work/devtools/devtools/packages/devtools/src/webcomponents/components/NuxtDevtoolsFrameBox.vue"]]);
const SNAP_THRESHOLD = 2;
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
__name: "NuxtDevtoolsFrame",
props: {
client: { type: Object, required: true },
settings: { type: Object, required: true },
state: { type: Object, required: true }
},
setup(__props, { expose: __expose }) {
__expose();
const props = __props;
const {
state,
settings
} = toRefs(props);
function millisecondToHumanreadable(ms) {
if (ms < 1e3)
return [+ms.toFixed(0), "ms"];
if (ms < 1e3 * 60)
return [+(ms / 1e3).toFixed(1), "s"];
if (ms < 1e3 * 60 * 60)
return [+(ms / 1e3 / 60).toFixed(1), "min"];
return [+(ms / 1e3 / 60 / 60).toFixed(1), "hour"];
}
const panelMargins = reactive({
left: 10,
top: 10,
right: 10,
bottom: 10
});
const safeArea = useScreenSafeArea();
const isSafari = navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome");
watchEffect(() => {
panelMargins.left = +safeArea.left.value + 10;
panelMargins.top = +safeArea.top.value + 10;
panelMargins.right = +safeArea.right.value + 10;
panelMargins.bottom = +safeArea.bottom.value + 10;
});
const vars = computed(() => {
const dark = props.client.app.colorMode.value === "dark";
return {
"--nuxt-devtools-widget-bg": dark ? "#111" : "#ffffff",
"--nuxt-devtools-widget-fg": dark ? "#F5F5F5" : "#111",
"--nuxt-devtools-widget-border": dark ? "#3336" : "#efefef",
"--nuxt-devtools-widget-shadow": dark ? "rgba(0,0,0,0.3)" : "rgba(128,128,128,0.1)"
};
});
const frameBox = ref();
const panelEl = ref();
const anchorEl = ref();
const windowSize = reactive({ width: 0, height: 0 });
const isDragging = ref(false);
const draggingOffset = reactive({ x: 0, y: 0 });
const mousePosition = reactive({ x: 0, y: 0 });
function onPointerDown(e) {
if (!panelEl.value)
return;
isDragging.value = true;
const { left, top, width, height } = panelEl.value.getBoundingClientRect();
draggingOffset.x = e.clientX - left - width / 2;
draggingOffset.y = e.clientY - top - height / 2;
}
onMounted(() => {
windowSize.width = window.innerWidth;
windowSize.height = window.innerHeight;
useEventListener(window, "resize", () => {
windowSize.width = window.innerWidth;
windowSize.height = window.innerHeight;
});
useEventListener(window, "pointermove", (e) => {
if (!isDragging.value)
return;
const centerX = windowSize.width / 2;
const centerY = windowSize.height / 2;
const x = e.clientX - draggingOffset.x;
const y = e.clientY - draggingOffset.y;
mousePosition.x = x;
mousePosition.y = y;
const deg = Math.atan2(y - centerY, x - centerX);
const HORIZONTAL_MARGIN = 70;
const TL = Math.atan2(0 - centerY + HORIZONTAL_MARGIN,