npm - vite-plugin-vue-devtools - Versions diffs - 0.0.4 → 0.0.6 - Mend

vite-plugin-vue-devtools 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/client/assets/{timeline-9e30477c.js → timeline-6ffbb5a9.js} RENAMED Viewed

@@ -1,8 +1,9 @@
-import { g, M, _ as _sfc_main$2 } from './splitpanes.es-dcbb9776.js';
-import { _ as __unplugin_components_0 } from './VPanelGrids-01802272.js';
-import { _ as __unplugin_components_7 } from './VCard-d5dce5dc.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, A as onMounted, B as onUnmounted, C as timelineLayer, D as activeTimelineEvents, E as activeTimelineEventIndex, G as toggleTimelineEventIndex, H as timelineEventDetails, I as activeLayerId, J as toggleTimelineLayer } from './index-0fe3b68e.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-86e98dd0.js';
+import { g, M, _ as _sfc_main$2 } from './splitpanes.es-c6654cbc.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-e269e398.js';
+import { _ as __unplugin_components_7 } from './VCard-365cd722.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, A as onMounted, B as onUnmounted, C as timelineLayer, D as activeTimelineEvents, E as activeTimelineEventIndex, G as toggleTimelineEventIndex, H as timelineEventDetails, I as activeLayerId, J as toggleTimelineLayer } from './index-2a1677bb.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-d879f03a.js';
+import './index-56f266d3.js';
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

package/dist/client/index.html CHANGED Viewed

@@ -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-0fe3b68e.js"></script>
-  <link rel="stylesheet" href="./assets/index-f0fa9f81.css">
+  <script type="module" crossorigin src="./assets/index-2a1677bb.js"></script>
+  <link rel="stylesheet" href="./assets/index-62a10721.css">
 </head>
 <body>
   <div id="app"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "packageManager": "pnpm@8.4.0",
   "description": "A vite plugin for Vue Devtools",
   "author": "webfansplz",
@@ -47,7 +47,7 @@
     "dev:client": "vite build src/client --watch",
     "play": "nr -C playground dev",
     "stub": "unbuild --stub",
-    "lint": "eslint . --fix",
+    "lint": "eslint .",
     "prepublishOnly": "npm run build",
     "release": "bumpp && npm publish"
   },

package/src/node/Container.vue CHANGED Viewed

@@ -12,6 +12,20 @@ window.__VUE_DEVTOOLS_GLOBAL_HOOKS__ = function () {
   return props.hook
 }
+const isDragging = ref(false)
+document.addEventListener('mouseup', () => {
+  isDragging.value = false
+})
+document.addEventListener('mouseleave', () => {
+  isDragging.value = false
+})
+const PANEL_MIN = 15
+const PANEL_MAX = 100
+const PANEL_PADDING = 10
 const clientUrl = `${vueDevtoolsOptions.base || '/'}__devtools/`
 const iframe = ref()
 const panelState = ref({
@@ -21,10 +35,16 @@ const panelState = ref({
 const panelVisible = ref(false)
 const hookBuffer = []
 let isAppCreated = false
+const panelHight = ref(60)
+const panelWidth = ref(80)
 const panelStyle = computed(() => {
+  const height = `calc(${panelHight.value}vh - ${PANEL_PADDING}px)`
+  const width = `calc(${panelWidth.value}vw - ${PANEL_PADDING}px)`
   if (panelState.value.viewMode === 'component-inspector') {
     return {
-      bottom: '10px',
+      bottom: `${PANEL_PADDING}px`,
       left: '50%',
       transform: 'translateX(-50%)',
       height: '80px',
@@ -35,29 +55,37 @@ const panelStyle = computed(() => {
   if (panelState.value.position === 'bottom') {
     return {
       transform: 'translateX(-50%)',
-      bottom: '10px',
+      bottom: `${PANEL_PADDING}px`,
       left: '50%',
+      height,
+      width,
     }
   }
   else if (panelState.value.position === 'top') {
     return {
       transform: 'translateX(-50%)',
-      top: '10px',
+      top: `${PANEL_PADDING}px`,
       left: '50%',
+      height,
+      width,
     }
   }
   else if (panelState.value.position === 'left') {
     return {
       transform: 'translateY(-50%)',
       top: '50%',
-      left: '10px',
+      left: `${PANEL_PADDING}px`,
+      height,
+      width,
     }
   }
   else {
     return {
       transform: 'translateY(-50%)',
       top: '50%',
-      right: '10px',
+      right: `${PANEL_PADDING}px`,
+      height,
+      width,
     }
   }
 })
@@ -101,7 +129,40 @@ const toggleButtonPosition = computed(() => {
     '--hover-translate': 'translate(0, -3px)',
   }
 })
-const panelPosition = computed(() => panelVisible.value ? panelStyle.value : { zIndex: -100000, left: '-9999px', top: '-9999px' })
+const panelPosition = computed(() =>
+  panelVisible.value
+    ? panelStyle.value
+    : { zIndex: -100000, left: '-9999px', top: '-9999px' },
+)
+document.addEventListener('mousemove', (e) => {
+  if (!isDragging.value)
+    return
+  const alignSide = panelState.value.position === 'left' || panelState.value.position === 'right'
+  if (isDragging.value === 'horizontal' || isDragging.value === 'both') {
+    const y = panelState.value.position === 'top'
+      ? window.innerHeight - e.clientY
+      : e.clientY
+    const boxHeight = window.innerHeight
+    const value = alignSide
+      ? (Math.abs(y - (window.innerHeight / 2))) / boxHeight * 100 * 2
+      : (window.innerHeight - y) / boxHeight * 100
+    panelHight.value = Math.min(PANEL_MAX, Math.max(PANEL_MIN, value))
+  }
+  if (isDragging.value === 'vertical' || isDragging.value === 'both') {
+    const x = panelState.value.position === 'left'
+      ? window.innerWidth - e.clientX
+      : e.clientX
+    const boxWidth = window.innerWidth
+    const value = alignSide
+      ? (window.innerWidth - x) / boxWidth * 100
+      : (Math.abs(x - (window.innerWidth / 2))) / boxWidth * 100 * 2
+    panelWidth.value = Math.min(PANEL_MAX, Math.max(PANEL_MIN, value))
+  }
+})
 function togglePanel() {
   panelVisible.value = !panelVisible.value
@@ -163,7 +224,8 @@ function setupClient() {
       disable: disableComponentInspector,
     },
     panel: {
-      toggle(position) {
+      toggle: togglePanel,
+      togglePosition(position) {
         panelState.value.position = position
       },
     },
@@ -264,9 +326,29 @@ initPanelPosition()
 <template>
   <div class="vue-devtools-panel" :style="panelPosition">
-    <iframe ref="iframe" :src="clientUrl" @load="onLoad" />
+    <iframe
+      ref="iframe"
+      :src="clientUrl"
+      :style="{
+        'pointer-events': isDragging ? 'none' : 'auto',
+      }"
+      @load="onLoad"
+    />
+    <template v-if="panelState.viewMode === 'default'">
+      <div v-if="panelState.position !== 'top'" class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal" :style="{ top: 0 }" @mousedown.prevent="() => isDragging = 'horizontal'" />
+      <div v-if="panelState.position !== 'bottom'" class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal" :style="{ bottom: 0 }" @mousedown.prevent="() => isDragging = 'horizontal'" />
+      <div v-if="panelState.position !== 'left'" class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical" :style="{ left: 0 }" @mousedown.prevent="() => isDragging = 'vertical'" />
+      <div v-if="panelState.position !== 'right'" class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical" :style="{ right: 0 }" @mousedown.prevent="() => isDragging = 'vertical'" />
+      <div v-if="panelState.position !== 'top' && panelState.position !== 'left'" class="vue-devtools-resize-handle vue-devtools-resize-handle-corner" :style="{ top: 0, left: 0, cursor: 'nwse-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <div v-if="panelState.position !== 'top' && panelState.position !== 'right'" class="vue-devtools-resize-handle vue-devtools-resize-handle-corner" :style="{ top: 0, right: 0, cursor: 'nesw-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <div v-if="panelState.position !== 'bottom' && panelState.position !== 'right'" class="vue-devtools-resize-handle vue-devtools-resize-handle-corner" :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <div v-if="panelState.position !== 'bottom' && panelState.position !== 'left'" class="vue-devtools-resize-handle vue-devtools-resize-handle-corner" :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+    </template>
   </div>
-  <button class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition" @click.prevent="togglePanel">
+  <button
+    class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition"
+    @click.prevent="togglePanel"
+  >
     <svg viewBox="0 0 256 198" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z" />
       <path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z" />
@@ -287,15 +369,15 @@ initPanelPosition()
   width: 100%;
   height: 100%;
   outline: 0;
-  border:1px solid rgba(125,125,125,0.2);
+  border: 1px solid rgba(125, 125, 125, 0.2);
   border-radius: 8px;
 }
 .vue-devtools-toggle {
   position: fixed;
   background: #0C0C0C;
-  border: 1px solid rgba(125,125,125,0.2);
-  box-shadow: 3px 5px 10px rgba(0,0,0,0.1);
+  border: 1px solid rgba(125, 125, 125, 0.2);
+  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.1);
   z-index: 2147483647;
   cursor: pointer;
   opacity: 0.8;
@@ -314,6 +396,38 @@ initPanelPosition()
   width: 16px;
   height: 16px;
   margin: auto;
-  margin-top:3px;
+  margin-top: 3px;
+}
+.vue-devtools-resize-handle:hover {
+  background: rgba(125,125,125,0.1);
+}
+.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-corner {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin: -6px;
+  border-radius: 6px;
+}
+.vue-devtools-resize-handle-vertical{
+  position: absolute;
+  top: 6px;
+  bottom: 0;
+  width: 10px;
+  margin: 0 -5px;
+  cursor: ew-resize;
+  border-radius: 5px;
 }
 </style>

package/src/node/app.js CHANGED Viewed

@@ -27,7 +27,7 @@ function load() {
     devtools: {
       hide: true,
     },
-  }).mount(`#${CONTAINER_ID}`)
+  }).mount(el)
 }
 load()
@@ -36,6 +36,6 @@ window.print = (...s) => {
   console.log('print', ...s)
 }
-hook.on('app:init', (app) => {
-  // console.log('init', app)
-})
+// hook.on('app:init', (app) => {
+//   console.log('init', app)
+// })