vite-plugin-vue-devtools 0.3.2 → 0.4.2

package/dist/client/assets/{overview-d353d21c.js → overview-44a22030.js}

@@ -1,9 +1,9 @@
-import { _ as __unplugin_components_0$1 } from './VPanelGrids-3a29966d.js';
-import { a1 as ref, a2 as computed, aa as routes, v as defineComponent, r as resolveComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, u as createVNode, y as toDisplayString, z as unref, ab as vueVersion, P as createTextVNode, e as createElementBlock, F as Fragment, ac as __unplugin_components_0, a0 as __unplugin_components_1, T as _sfc_main$1 } from './index-c8859523.js';
-import { r as rpc } from './rpc-b60055dd.js';
-import { i as isMacOS } from './index-bfd864c8.js';
+import { _ as __unplugin_components_0$1 } from './VPanelGrids-3d676ac1.js';
+import { a1 as ref, a2 as computed, aa as routes, v as defineComponent, r as resolveComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, u as createVNode, y as toDisplayString, z as unref, ab as vueVersion, P as createTextVNode, e as createElementBlock, F as Fragment, ac as __unplugin_components_0, a0 as __unplugin_components_1, T as _sfc_main$1 } from './index-fab050dd.js';
+import { r as rpc } from './rpc-a4b59d16.js';
+import { i as isMacOS } from './index-5bdd8c01.js';
 
-const version = "0.3.2";
+const version = "0.4.2";
 
 /* Injected with object hook! */
 

package/dist/client/assets/{pages-ce241043.js → pages-635198da.js}

@@ -1,8 +1,8 @@
-import { _ as __unplugin_components_3 } from './VSectionBlock-b2b47991.js';
-import { v as defineComponent, a1 as ref, a2 as computed, r as resolveComponent, z as unref, o as openBlock, e as createElementBlock, x as createBaseVNode, y as toDisplayString, c as createBlock, h as withCtx, a7 as withModifiers, F as Fragment, i as renderList, g as createCommentVNode, u as createVNode, P as createTextVNode, q as normalizeClass, T as _sfc_main$4, a0 as __unplugin_components_1, a8 as onMounted, a9 as currentRoute, W as router, K as isRef, M as withKeys, aa as routes } from './index-c8859523.js';
-import { _ as _sfc_main$3 } from './VTextInput.vue_vue_type_script_setup_true_lang-4ab475b0.js';
-import './VIconTitle.vue_vue_type_script_setup_true_lang-64110af4.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-844d8389.js';
+import { _ as __unplugin_components_3 } from './VSectionBlock-ce3de44c.js';
+import { v as defineComponent, a1 as ref, a2 as computed, r as resolveComponent, z as unref, o as openBlock, e as createElementBlock, x as createBaseVNode, y as toDisplayString, c as createBlock, h as withCtx, a7 as withModifiers, F as Fragment, i as renderList, g as createCommentVNode, u as createVNode, P as createTextVNode, q as normalizeClass, T as _sfc_main$4, a0 as __unplugin_components_1, a8 as onMounted, a9 as currentRoute, W as router, K as isRef, M as withKeys, aa as routes } from './index-fab050dd.js';
+import { _ as _sfc_main$3 } from './VTextInput.vue_vue_type_script_setup_true_lang-387f21cb.js';
+import './VIconTitle.vue_vue_type_script_setup_true_lang-6c2f93bc.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-bbd0395c.js';
 
 const _hoisted_1$2 = {
   block: "",

package/dist/client/assets/{pinia-0dfabc87.js → pinia-f7635d5a.js}

@@ -1,9 +1,9 @@
-import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-7733bfe8.js';
-import { g, M } from './splitpanes.es-292c6c8e.js';
-import { v as defineComponent, a1 as ref, a2 as computed, a3 as piniaStoresCategory, a4 as toRaw, a5 as piniaState, a6 as piniaGetters, z as unref, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, q as normalizeClass, y as toDisplayString, c as createBlock } from './index-c8859523.js';
-import { p as pick } from './index-bfd864c8.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-844d8389.js';
-import './VIconButton.vue_vue_type_script_setup_true_lang-a2115df4.js';
+import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-71b04a17.js';
+import { g, M } from './splitpanes.es-8025e7b0.js';
+import { v as defineComponent, a1 as ref, a2 as computed, a3 as piniaStoresCategory, a4 as toRaw, a5 as piniaState, a6 as piniaGetters, z as unref, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, q as normalizeClass, y as toDisplayString, c as createBlock } from './index-fab050dd.js';
+import { p as pick } from './index-5bdd8c01.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-bbd0395c.js';
+import './VIconButton.vue_vue_type_script_setup_true_lang-6f019c5b.js';
 
 const _hoisted_1 = {
   "h-screen": "",

package/dist/client/assets/{routes-2d8be0cc.js → routes-78f604b2.js}

@@ -1,10 +1,10 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-3a29966d.js';
-import { v as defineComponent, z as unref, W as router, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, X as routeRecordMatcherState, Y as activeRouteRecordMatcherState, c as createBlock, V as _sfc_main$2, _ as __unplugin_components_7, q as normalizeClass, Z as activeRouteRecordIndex, $ as toggleRouteRecordMatcher, P as createTextVNode, y as toDisplayString, l as normalizeStyle, g as createCommentVNode, a0 as __unplugin_components_1 } from './index-c8859523.js';
-import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-7733bfe8.js';
-import { g, M } from './splitpanes.es-292c6c8e.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-844d8389.js';
-import './index-bfd864c8.js';
-import './VIconButton.vue_vue_type_script_setup_true_lang-a2115df4.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-3d676ac1.js';
+import { v as defineComponent, z as unref, W as router, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, X as routeRecordMatcherState, Y as activeRouteRecordMatcherState, c as createBlock, V as _sfc_main$2, _ as __unplugin_components_7, q as normalizeClass, Z as activeRouteRecordIndex, $ as toggleRouteRecordMatcher, P as createTextVNode, y as toDisplayString, l as normalizeStyle, g as createCommentVNode, a0 as __unplugin_components_1 } from './index-fab050dd.js';
+import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-71b04a17.js';
+import { g, M } from './splitpanes.es-8025e7b0.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-bbd0395c.js';
+import './index-5bdd8c01.js';
+import './VIconButton.vue_vue_type_script_setup_true_lang-6f019c5b.js';
 
 const _hoisted_1 = {
   key: 0,

package/dist/client/assets/{rpc-b60055dd.js → rpc-a4b59d16.js}

@@ -1,4 +1,4 @@
-import { aI as __vitePreload, ae as hookApi } from './index-c8859523.js';
+import { aI as __vitePreload, ae as hookApi } from './index-fab050dd.js';
 
 async function getViteClient(base = "/", warning = true) {
   try {

package/dist/client/assets/{settings-a79cec1c.js → settings-1082abbf.js}

@@ -1,6 +1,6 @@
-import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-844d8389.js';
-import { v as defineComponent, I as useVModel, o as openBlock, e as createElementBlock, f as renderSlot, d as withDirectives, J as vModelSelect, z as unref, x as createBaseVNode, y as toDisplayString, g as createCommentVNode, K as isRef, c as createBlock, L as vModelCheckbox, M as withKeys, N as useCategorizedTabs, u as createVNode, F as Fragment, i as renderList, O as isInPopup, h as withCtx, P as createTextVNode, Q as useDevToolsSettings, R as useFrameState, S as _sfc_main$5, T as _sfc_main$6, U as _sfc_main$7, q as normalizeClass, V as _sfc_main$8 } from './index-c8859523.js';
-import { _ as _sfc_main$4 } from './VIconTitle.vue_vue_type_script_setup_true_lang-64110af4.js';
+import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-bbd0395c.js';
+import { v as defineComponent, I as useVModel, o as openBlock, e as createElementBlock, f as renderSlot, d as withDirectives, J as vModelSelect, z as unref, x as createBaseVNode, y as toDisplayString, g as createCommentVNode, K as isRef, c as createBlock, L as vModelCheckbox, M as withKeys, N as useCategorizedTabs, u as createVNode, F as Fragment, i as renderList, O as isInPopup, h as withCtx, P as createTextVNode, Q as useDevToolsSettings, R as useFrameState, S as _sfc_main$5, T as _sfc_main$6, U as _sfc_main$7, q as normalizeClass, V as _sfc_main$8 } from './index-fab050dd.js';
+import { _ as _sfc_main$4 } from './VIconTitle.vue_vue_type_script_setup_true_lang-6c2f93bc.js';
 
 const _hoisted_1$2 = { class: "n-text-input flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base" };
 const _hoisted_2$2 = ["disabled"];

package/dist/client/assets/{splitpanes.es-292c6c8e.js → splitpanes.es-8025e7b0.js}

@@ -1,4 +1,4 @@
-import { ay as h, o as openBlock, e as createElementBlock, f as renderSlot, l as normalizeStyle } from './index-c8859523.js';
+import { ay as h, o as openBlock, e as createElementBlock, f as renderSlot, l as normalizeStyle } from './index-fab050dd.js';
 
 const M = {
   name: "splitpanes",

package/dist/client/assets/{timeline-24b68a77.js → timeline-2dc5c96b.js}

@@ -1,11 +1,11 @@
-import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-7733bfe8.js';
-import { _ as __unplugin_components_0 } from './VPanelGrids-3a29966d.js';
-import { p as pushScopeId, a as popScopeId, n as nextTick, o as openBlock, c as createBlock, w as withScopeId, m as markRaw, s as shallowReactive, r as resolveComponent, b as resolveDirective, d as withDirectives, e as createElementBlock, f as renderSlot, g as createCommentVNode, h as withCtx, F as Fragment, i as renderList, j as resolveDynamicComponent, k as mergeProps, t as toHandlers, l as normalizeStyle, q as normalizeClass, u as createVNode, v as defineComponent, x as createBaseVNode, y as toDisplayString, z as unref, _ as __unplugin_components_7, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-c8859523.js';
+import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-71b04a17.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-3d676ac1.js';
+import { p as pushScopeId, a as popScopeId, n as nextTick, o as openBlock, c as createBlock, w as withScopeId, m as markRaw, s as shallowReactive, r as resolveComponent, b as resolveDirective, d as withDirectives, e as createElementBlock, f as renderSlot, g as createCommentVNode, h as withCtx, F as Fragment, i as renderList, j as resolveDynamicComponent, k as mergeProps, t as toHandlers, l as normalizeStyle, q as normalizeClass, u as createVNode, v as defineComponent, x as createBaseVNode, y as toDisplayString, z as unref, _ as __unplugin_components_7, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-fab050dd.js';
 import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-c0d8ada0.js';
-import { g, M } from './splitpanes.es-292c6c8e.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-844d8389.js';
-import './index-bfd864c8.js';
-import './VIconButton.vue_vue_type_script_setup_true_lang-a2115df4.js';
+import { g, M } from './splitpanes.es-8025e7b0.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-bbd0395c.js';
+import './index-5bdd8c01.js';
+import './VIconButton.vue_vue_type_script_setup_true_lang-6f019c5b.js';
 
 var dayjs_min = {exports: {}};/* Injected with object hook! */
 

package/dist/client/index.html

@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <title>Vue DevTools</title>
-  <script type="module" crossorigin src="./assets/index-c8859523.js"></script>
-  <link rel="stylesheet" href="./assets/index-5b7de771.css">
+  <script type="module" crossorigin src="./assets/index-fab050dd.js"></script>
+  <link rel="stylesheet" href="./assets/index-99f31726.css">
 </head>
 <body>
   <div id="app"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.3.2",
+  "version": "0.4.2",
   "packageManager": "pnpm@8.4.0",
   "description": "A vite plugin for Vue Devtools",
   "author": "webfansplz",
@@ -32,6 +32,7 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
+    "src/node/views/*",
     "src/node/app.js",
     "src/node/Container.vue",
     "*.d.ts"

package/src/node/app.js

@@ -1,5 +1,5 @@
 import { createApp, h } from 'vue'
-import App from 'virtual:vue-devtools-path:Container.vue'
+import App from 'virtual:vue-devtools-path:views/Main.vue'
 
 const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__ ??= {
   events: new Map(),

package/src/node/views/FrameBox.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { PANEL_MAX, PANEL_MIN, popupWindow, state } from './composables'
+import { useWindowEventListener } from './utils'
+
+const props = defineProps<{
+  isDragging: boolean
+
+  client: {
+    close: () => void
+    getIFrame: () => HTMLIFrameElement
+    inspector: {
+      isEnabled: Ref<boolean>
+      disable: () => void
+    } | undefined
+  }
+
+  viewMode: 'default' | 'xs'
+}>()
+
+const container = ref<HTMLElement>()
+const isResizing = ref<false | { top?: boolean; left?: boolean; right?: boolean; bottom?: boolean }>(false)
+
+watchEffect(() => {
+  if (!container.value)
+    return
+  if (state.value.open) {
+    const iframe = props.client.getIFrame()
+    iframe.style.pointerEvents = (isResizing.value || props.isDragging) ? 'none' : 'auto'
+
+    if (!popupWindow.value) {
+      if (Array.from(container.value.children).every(el => el !== iframe))
+        container.value.appendChild(iframe)
+    }
+  }
+})
+
+useWindowEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && props.client.inspector?.isEnabled.value) {
+    e.preventDefault()
+    props.client.inspector?.disable()
+    props.client.close()
+  }
+})
+
+useWindowEventListener('mousedown', (e: MouseEvent) => {
+  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 as HTMLElement
+    return Array.from(el.classList || []).some(c => c.startsWith('vue-devtools-'))
+      || el.tagName?.toLowerCase() === 'iframe'
+  })
+
+  if (!matched)
+    state.value.open = false
+})
+
+useWindowEventListener('mousemove', (e) => {
+  if (!isResizing.value)
+    return
+  if (!state.value.open)
+    return
+
+  const iframe = props.client.getIFrame()
+  const box = iframe.getBoundingClientRect()
+
+  if (isResizing.value.right) {
+    const widthPx = Math.abs(e.clientX - (box?.left || 0))
+    const width = widthPx / window.innerWidth * 100
+    state.value.width = Math.min(PANEL_MAX, Math.max(PANEL_MIN, width))
+  }
+  else if (isResizing.value.left) {
+    const widthPx = Math.abs((box?.right || 0) - e.clientX)
+    const width = widthPx / window.innerWidth * 100
+    state.value.width = Math.min(PANEL_MAX, Math.max(PANEL_MIN, width))
+  }
+
+  if (isResizing.value.top) {
+    const heightPx = Math.abs((box?.bottom || 0) - e.clientY)
+    const height = heightPx / window.innerHeight * 100
+    state.value.height = Math.min(PANEL_MAX, Math.max(PANEL_MIN, height))
+  }
+  else if (isResizing.value.bottom) {
+    const heightPx = Math.abs(e.clientY - (box?.top || 0))
+    const height = heightPx / window.innerHeight * 100
+    state.value.height = Math.min(PANEL_MAX, Math.max(PANEL_MIN, height))
+  }
+})
+
+useWindowEventListener('mouseup', () => {
+  isResizing.value = false
+})
+
+useWindowEventListener('mouseleave', () => {
+  isResizing.value = false
+})
+</script>
+
+<template>
+  <div
+    v-show="state.open && !client.inspector?.isEnabled.value && !popupWindow"
+    ref="container"
+    class="vue-devtools-frame"
+    :class="{ 'view-mode-xs': props.viewMode === 'xs' }"
+  >
+    <!-- Handlers -->
+    <div
+      v-show="state.position !== 'top'"
+      class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal"
+      :style="{ top: 0 }"
+      @mousedown.prevent="() => isResizing = { top: true }"
+    />
+    <div
+      v-show="state.position !== 'bottom'"
+      class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal"
+      :style="{ bottom: 0 }"
+      @mousedown.prevent="() => isResizing = { bottom: true }"
+    />
+    <div
+      v-show="state.position !== 'left'"
+      class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical"
+      :style="{ left: 0 }"
+      @mousedown.prevent="() => isResizing = { left: true }"
+    />
+    <div
+      v-show="state.position !== 'right'"
+      class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical"
+      :style="{ right: 0 }"
+      @mousedown.prevent="() => isResizing = { right: true }"
+    />
+    <div
+      v-show="state.position !== 'top' && state.position !== 'left'"
+      class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
+      :style="{ top: 0, left: 0, cursor: 'nwse-resize' }"
+      @mousedown.prevent="() => isResizing = { top: true, left: true }"
+    />
+    <div
+      v-show="state.position !== 'top' && state.position !== 'right'"
+      class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
+      :style="{ top: 0, right: 0, cursor: 'nesw-resize' }"
+      @mousedown.prevent="() => isResizing = { top: true, right: true }"
+    />
+    <div
+      v-show="state.position !== 'bottom' && state.position !== 'left'"
+      class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
+      :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }"
+      @mousedown.prevent="() => isResizing = { bottom: true, left: true }"
+    />
+    <div
+      v-show="state.position !== 'bottom' && state.position !== 'right'"
+      class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
+      :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }"
+      @mousedown.prevent="() => isResizing = { bottom: true, right: true }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.vue-devtools-frame {
+  position: fixed;
+  z-index: 2147483645;
+}
+
+.vue-devtools-frame :deep(iframe) {
+  width: 100%;
+  height: 100%;
+  outline: none;
+  background: var(--vue-devtools-widget-bg);
+  border: 1px solid rgba(125,125,125,0.2);
+  border-radius: 10px;
+}
+
+.vue-devtools-resize-handle-horizontal {
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  height: 10px;
+  margin: -5px 0;
+  cursor: ns-resize;
+  border-radius: 5px;
+}
+.vue-devtools-resize-handle-vertical {
+  position: absolute;
+  top: 6px;
+  bottom: 0;
+  width: 10px;
+  margin: 0 -5px;
+  cursor: ew-resize;
+  border-radius: 5px;
+}
+.vue-devtools-resize-handle-corner {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin: -6px;
+  border-radius: 6px;
+}
+.vue-devtools-resize-handle:hover {
+  background: rgba(125,125,125,0.1);
+}
+
+.vue-devtools-frame.view-mode-xs {
+  width: 400px !important;
+  height: 80px !important;
+}
+</style>