diff --git a/docs/plugins/api.md b/docs/plugins/api.md index d9d2ff466..54a80aedc 100644 --- a/docs/plugins/api.md +++ b/docs/plugins/api.md @@ -31,6 +31,8 @@ $ bun add -D @vue/devtools-api ## `addCustomTab` +You can choose any icon from [Material Design Icons](https://fonts.google.com/icons) or [Iconify Ic Baseline](https://icones.netlify.app/collection/ic?variant=Baseline), for example `star`. + ```ts import { addCustomTab } from '@vue/devtools-api' @@ -39,8 +41,8 @@ addCustomTab({ name: 'vue-use', // title to display in the tab title: 'VueUse', - // any icon from Iconify, or a URL to an image - icon: 'i-logos-vueuse', + // any icon from material design icons or a URL to an image + icon: 'https://vueuse.org/favicon.svg', // iframe view view: { type: 'iframe', @@ -52,6 +54,8 @@ addCustomTab({ ## `addCustomCommand` +You can choose any icon from [Material Design Icons](https://fonts.google.com/icons) or [Iconify Ic Baseline](https://icones.netlify.app/collection/ic?variant=Baseline), for example `star`. + ```ts import { addCustomCommand } from '@vue/devtools-api' @@ -61,8 +65,8 @@ addCustomCommand({ id: 'vueuse', // title to display in the command title: 'VueUse', - // any icon from Iconify, or a URL to an image - icon: 'i-logos-vueuse', + // any icon from material design icons or a URL to an image + icon: 'https://vueuse.org/favicon.svg', action: { type: 'url', src: 'https://vueuse.org/' @@ -75,14 +79,13 @@ addCustomCommand({ id: 'vueuse', // title to display in the command title: 'VueUse', - // any icon from Iconify, or a URL to an image - icon: 'i-logos-vueuse', + // any icon from material design icons or a URL to an image + icon: 'https://vueuse.org/favicon.svg', // submenu, which is shown when the menu is clicked children: [ { id: 'vueuse:github', title: 'Github', - icon: 'i-carbon-logo-github', action: { type: 'url', src: 'https://github.com/vueuse/vueuse' @@ -91,7 +94,7 @@ addCustomCommand({ { id: 'vueuse:website', title: 'Website', - icon: 'i-logos-vueuse', + icon: 'auto-awesome', action: { type: 'url', src: 'https://vueuse.org/' diff --git a/packages/applet/src/modules/custom-inspector/components/state/Index.vue b/packages/applet/src/modules/custom-inspector/components/state/Index.vue index 6fb8036a7..133e4ef63 100644 --- a/packages/applet/src/modules/custom-inspector/components/state/Index.vue +++ b/packages/applet/src/modules/custom-inspector/components/state/Index.vue @@ -4,7 +4,7 @@ import { Pane, Splitpanes } from 'splitpanes' import { DevToolsMessagingEvents, onRpcConnected, rpc } from '@vue/devtools-core' import { parse } from '@vue/devtools-kit' import type { CustomInspectorNode, CustomInspectorOptions, CustomInspectorState } from '@vue/devtools-kit' -import { vTooltip } from '@vue/devtools-ui' +import { VueIcIcon, vTooltip } from '@vue/devtools-ui' import { until } from '@vueuse/core' import Navbar from '~/components/basic/Navbar.vue' import DevToolsHeader from '~/components/basic/DevToolsHeader.vue' @@ -186,7 +186,7 @@ onUnmounted(() => {
- +
@@ -200,7 +200,7 @@ onUnmounted(() => {
- +
diff --git a/packages/applet/src/modules/custom-inspector/index.vue b/packages/applet/src/modules/custom-inspector/index.vue index cbd4ffe26..4f3fe4c9e 100644 --- a/packages/applet/src/modules/custom-inspector/index.vue +++ b/packages/applet/src/modules/custom-inspector/index.vue @@ -35,7 +35,6 @@ const routes = computed(() => { path: '/about', name: 'About', component: About, - icon: 'https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.svg', }, ].filter(Boolean) as VirtualRoute[] }) diff --git a/packages/client/package.json b/packages/client/package.json index 822b3ff07..92bfd4bf6 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -25,7 +25,6 @@ }, "dependencies": { "@unocss/preset-icons": "^0.61.0", - "@unocss/runtime": "^0.61.0", "@vue/devtools-applet": "workspace:^", "@vue/devtools-core": "workspace:^", "@vue/devtools-kit": "workspace:^", @@ -34,6 +33,7 @@ "@vueuse/core": "^10.11.0", "@vueuse/integrations": "^10.11.0", "colord": "^2.9.3", + "fast-deep-equal": "^3.1.3", "fuse.js": "^7.0.0", "minimatch": "^9.0.4", "shiki": "^1.9.0", diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue index a6b0f48b2..bc81e94ac 100644 --- a/packages/client/src/App.vue +++ b/packages/client/src/App.vue @@ -3,7 +3,6 @@ import { Pane, Splitpanes } from 'splitpanes' import { useDevToolsColorMode } from '@vue/devtools-ui' import { DevToolsMessagingEvents, onDevToolsConnected, onRpcConnected, refreshCurrentPageData, rpc, useDevToolsState } from '@vue/devtools-core' -import('./setup/unocss-runtime') useDevToolsColorMode() const router = useRouter() const route = useRoute() diff --git a/packages/client/src/components/common/SideNav.vue b/packages/client/src/components/common/SideNav.vue index d26403cff..722737fce 100644 --- a/packages/client/src/components/common/SideNav.vue +++ b/packages/client/src/components/common/SideNav.vue @@ -22,9 +22,11 @@ const overflowTabs = computed(() => flattenedTabs.value.slice(containerCapacity. const categorizedInlineTabs = getCategorizedTabs(inlineTabs, enabledTabs) const categorizedOverflowTabs = getCategorizedTabs(overflowTabs, enabledTabs) -const displayedTabs = computed(() => (sidebarScrollable.value || sidebarExpanded.value) - ? enabledTabs.value - : categorizedInlineTabs.value) +const displayedTabs = computed(() => + (sidebarScrollable.value || sidebarExpanded.value) + ? enabledTabs.value + : categorizedInlineTabs.value, +) onClickOutside( panel, diff --git a/packages/client/src/components/common/SideNavItem.vue b/packages/client/src/components/common/SideNavItem.vue index 04dfccb7e..045e393b7 100644 --- a/packages/client/src/components/common/SideNavItem.vue +++ b/packages/client/src/components/common/SideNavItem.vue @@ -55,7 +55,7 @@ function onClick() { text-xl :icon="tab.icon" :fallback="tab.fallbackIcon" - title="Settings" + :title="tab.name" :show-title="false" /> diff --git a/packages/client/src/components/common/TabIcon.vue b/packages/client/src/components/common/TabIcon.vue index ac01b762a..796939d2c 100644 --- a/packages/client/src/components/common/TabIcon.vue +++ b/packages/client/src/components/common/TabIcon.vue @@ -1,4 +1,7 @@