feat: improve dock style

Author: antfu

packages/core/src/client/webcomponents/.generated/css.ts

@@ -5,6 +5,8 @@ import type { DockProps } from './DockProps'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, toRefs, useTemplateRef, watchEffect } from 'vue'
 import DockEntries from './DockEntries.vue'
+import BracketLeft from './icons/BracketLeft.vue'
+import BracketRight from './icons/BracketRight.vue'
 
 const props = defineProps<DockProps>()
 
@@ -215,10 +217,9 @@ const panelStyle = computed(() => {
   return style
 })
 
-// TODO: use a visual module to host all the imports
 function importScript(entry: DevToolsDockEntry): Promise<(context: ImportScriptContext) => void | Promise<void>> {
   const id = entry.id
-  return import(/* vite-ignore */ ['/.devtools', 'imports'].join('-'))
+  return import(/* @vite-ignore */ ['/.devtools', 'imports'].join('-'))
     .then((module) => {
       const importsMap = module.importsMap as Record<string, () => Promise<() => void>>
       const importFn = importsMap[id]
@@ -229,13 +230,20 @@ function importScript(entry: DevToolsDockEntry): Promise<(context: ImportScriptC
     })
     .catch((error) => {
       // TODO: maybe popup a error toast here?
+      // TODO: A unified logger API
       console.error('[VITE DEVTOOLS] Error executing import action', error)
       return Promise.reject(error)
     })
 }
 
-function onSelected(entry: DevToolsDockEntry) {
-  const context: ImportScriptContext = reactive({
+function onSelected(entry?: DevToolsDockEntry) {
+  if (!entry) {
+    state.value.open = false
+    state.value.dockEntry = undefined
+    return
+  }
+
+  const scriptContext: ImportScriptContext = reactive({
     dockEntry: entry,
     // @ts-expect-error cast for unwraping
     dockState: computed<'active' | 'inactive'>({
@@ -254,8 +262,17 @@ function onSelected(entry: DevToolsDockEntry) {
     },
   })
 
+  // If it's an action, run and return (early exit)
   if (entry?.type === 'action') {
-    return importScript(entry).then(fn => fn(context))
+    return importScript(entry).then(fn => fn(scriptContext))
+  }
+
+  state.value.dockEntry = entry
+  state.value.open = true
+
+  // If has import script, run it
+  if (entry.import) {
+    importScript(entry).then(fn => fn(scriptContext))
   }
 }
 
@@ -291,9 +308,17 @@ onMounted(() => {
         id="vite-devtools-dock"
         @pointerdown="onPointerDown"
       >
+        <BracketLeft
+          class="vite-devtools-dock-bracket absolute left--1 top-1/2 translate-y--1/2 bottom-0 w-2.5 op75"
+        />
+        <BracketRight
+          class="vite-devtools-dock-bracket absolute right--1 top-1/2 translate-y--1/2 bottom-0 w-2.5 op75"
+          :class="isVertical ? 'scale-y--100' : ''"
+        />
         <DockEntries
           :entries="docks"
-          :class="isMinimized ? 'opacity-0' : 'opacity-100'"
+          class="transition duration-200"
+          :class="isMinimized ? 'opacity-0 pointer-events-none' : 'opacity-100'"
           :is-vertical="isVertical"
           :selected="state.dockEntry"
           @select="onSelected"
@@ -304,7 +329,7 @@ onMounted(() => {
       :dock-el="dockEl"
       :panel-margins="panelMargins"
       :state="state"
-      :entry="state.dockEntry"
+      :entry="state.dockEntry?.type === 'action' ? undefined : state.dockEntry"
     />
   </div>
 </template>

packages/core/src/client/webcomponents/components/Dock.vue

@@ -36,7 +36,7 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
         :title="dock.title"
         :class="[
           isVertical ? 'rotate-270' : '',
-          selected ? selected.id !== dock.id ? 'op50 saturate-0' : 'scale-120' : '',
+          selected ? selected.id !== dock.id ? 'op50 saturate-0' : 'scale-120 text-purple' : '',
         ]"
         class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-120 transition-all duration-300 relative"
         @click="toggleDockEntry(dock)"

packages/core/src/client/webcomponents/components/DockEntries.vue

@@ -32,6 +32,7 @@ const icon = computed(() => {
     <img
       :src="icon.light"
       :alt="title"
+      class="w-full h-full m-auto"
       draggable="false"
     >
   </picture>

packages/core/src/client/webcomponents/components/DockIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 9 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4.95763 0C1.02563 5.628 1.00263 14.351 4.95763 20H7.61363C3.65963 14.35 3.68363 5.627 7.61363 0H4.95763Z"
+      class="fill-black dark:fill-white"
+    />
+  </svg>
+</template>

packages/core/src/client/webcomponents/components/icons/BracketLeft.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 9 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4.246 10H6.903C6.902 6.407 5.913 2.816 3.946 0H1.29C3.256 2.816 4.244 6.407 4.246 10ZM8.935 14.907H6.27C6.46624 14.1665 6.61752 13.4148 6.723 12.656H4.066C3.96052 13.4148 3.80924 14.1665 3.613 14.907H0.944C0.703507 15.8176 0.387753 16.7067 0 17.565H2.669C2.2859 18.4179 1.82388 19.2331 1.289 20H3.945C4.47988 19.2331 4.9419 18.4179 5.325 17.565H7.99C8.376 16.714 8.691 15.823 8.935 14.907Z"
+      class="fill-black dark:fill-white"
+    />
+  </svg>
+</template>

packages/core/src/client/webcomponents/components/icons/BracketRight.vue

@@ -24,35 +24,29 @@
 }
 
 #vite-devtools-anchor #vite-devtools-dock-container {
-  --uno: absolute left-0 top-0 h-[44px] min-w-[100px] w-max;
+  --uno: absolute left-0 top-0 h-[40px] min-w-[100px] w-max flex;
   transform: translate(-50%, -50%);
 }
 
 #vite-devtools-anchor.vite-devtools-vertical #vite-devtools-dock-container {
   transform: translate(-50%, -50%) rotate(90deg);
-  transition:
-    all 0.6s ease,
-    max-width 0.6s ease,
-    padding 0.5s ease,
-    transform 0.4s ease,
-    opacity 0.2s ease;
+  --uno: transition-all duration-500;
 }
 
 #vite-devtools-anchor #vite-devtools-dock {
-  --uno: h-full min-w-full rounded-full select-none touch-none px4;
+  --uno: h-full rounded-full select-none touch-none px4 ma h-[40px];
   --uno: shadow text-white bg-glass border border-base;
-  transition:
-    all 0.6s ease,
-    max-width 0.6s ease,
-    padding 0.5s ease,
-    transform 0.4s ease,
-    opacity 0.2s ease;
+  --uno: transition-all duration-500;
+  width: calc-size(max-content, size);
 }
 
 #vite-devtools-anchor.vite-devtools-minimized #vite-devtools-dock {
-  --uno: w-[52px] h-[8px] px-0 py-[2px];
+  --uno: w-[20px] h-[20px] px-0 py-[2px];
 }
 
+#vite-devtools-anchor.vite-devtools-minimized .vite-devtools-dock-bracket {
+  --uno: w-2 op50;
+}
 
 #vite-devtools-anchor:hover #vite-devtools-glowing {
   --uno: opacity-60;