vite-plugin-vue-devtools 1.0.0-rc.8 → 7.0.0

package/dist/client/assets/timeline-b315b2e0.css

@@ -1 +0,0 @@
-.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:flex}.vue-recycle-scroller__slot{flex:auto 0 0}.vue-recycle-scroller__item-wrapper{flex:1;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}

package/dist/client/assets/vue-5d4e674c.svg

@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>

package/dist/client/assets/vueuse-995374f6.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.a{fill:#35495e;}.b{fill:#41b883;}</style></defs><path class="a" d="M735.07,67.05V531.58c0,129.83-105.24,235.07-235.07,235.07S264.93,661.41,264.93,531.58V67.05h166.3V531.58a68.77,68.77,0,1,0,137.54,0V67.05Z"/><path class="b" d="M901.36,67.05V531.58C901.36,753.25,721.67,933,500,933S98.64,753.25,98.64,531.58V67.05H264.93V531.58c0,129.83,105.25,235.07,235.07,235.07S735.07,661.41,735.07,531.58V67.05Z"/></svg>

package/src/app.js

@@ -1,4 +0,0 @@
-import { createDevToolsContainer } from '@vite-plugin-vue-devtools/core'
-import App from 'virtual:vue-devtools-path:views/Main.vue'
-
-createDevToolsContainer(App)

package/src/views/ComponentInspector.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  bounds: {
-    width: number
-    height: number
-    top: number
-    left: number
-  }
-  name: string
-}>()
-
-const inspectorStyle = computed(() => {
-  const { width, height, top, left } = props.bounds
-  return {
-    width: `${Math.round(width)}px`,
-    height: `${Math.round(height)}px`,
-    top: `${Math.round(top)}px`,
-    left: `${Math.round(left)}px`,
-  }
-})
-const inspectorCardStyle = computed(() => ({ top: props.bounds.top < 35 ? 0 : '-35px' }))
-</script>
-
-<template>
-  <div v-show="bounds.width || bounds.height" class="vue-devtools-component-inspector" :style="inspectorStyle">
-    <span class="vue-devtools-component-inspector-card" :style="inspectorCardStyle">
-      &lt;{{ name }}&gt;
-      <i>{{ Math.round(bounds.width * 100) / 100 }} x {{ Math.round(bounds.height * 100) / 100 }}</i>
-      <slot name="header-extra" />
-    </span>
-  </div>
-</template>
-
-<style scoped>
-.vue-devtools-component-inspector {
-  z-index: 2147483640;
-  position: fixed;
-  background-color:#42b88325;
-  border: 1px solid #42b88350;
-  border-radius: 5px;
-  transition: all 0.1s ease-in;
-  pointer-events: none;
-}
-
-.vue-devtools-component-inspector-card {
-  font-family: Arial, Helvetica, sans-serif;
-  padding: 5px 8px;
-  border-radius: 4px;
-  text-align: left;
-  position: absolute;
-  left: 0;
-  color:#e9e9e9;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 24px;
-  background-color:#42b883;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-}
-
-.vue-devtools-component-inspector-card i {
-  font-weight: 400;
-  font-style: normal;
-  font-size: 12px;
-  opacity: 0.7;
-}
-</style>

package/src/views/FrameBox.vue

@@ -1,231 +0,0 @@
-<script setup lang="ts">
-import { computed, 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: 'xs' | 'default' | 'fullscreen'
-}>()
-
-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
-})
-
-const viewModeClass = computed(() => {
-  if (props.viewMode === 'xs')
-    return 'view-mode-xs'
-  if (props.viewMode === 'fullscreen')
-    return 'view-mode-fullscreen'
-  return ''
-})
-</script>
-
-<template>
-  <div
-    v-show="state.open && !client.inspector?.isEnabled.value && !popupWindow"
-    ref="container"
-    class="vue-devtools-frame"
-    :class="viewModeClass"
-  >
-    <!-- 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;
-}
-
-.vue-devtools-frame.view-mode-fullscreen {
-  width: 100vw !important;
-  height: 100vh !important;
-  z-index: 1 !important;
-  bottom: 0 !important;
-  transform: none !important;
-}
-
-.vue-devtools-frame.view-mode-fullscreen :deep(iframe) {
-  border-radius: 0 !important;
-}
-</style>