diff --git a/.changeset/beige-eels-know.md b/.changeset/beige-eels-know.md new file mode 100644 index 00000000..82826df5 --- /dev/null +++ b/.changeset/beige-eels-know.md @@ -0,0 +1,5 @@ +--- +'@formwerk/devtools': patch +--- + +fix(devtools): Unhighlight node after a short timer diff --git a/packages/devtools/src/init.ts b/packages/devtools/src/init.ts index c2d364d2..da458673 100644 --- a/packages/devtools/src/init.ts +++ b/packages/devtools/src/init.ts @@ -1,4 +1,4 @@ -import { App, getCurrentInstance, nextTick, onMounted, onUnmounted, watch } from 'vue'; +import { App, type ComponentInternalInstance, getCurrentInstance, nextTick, onMounted, onUnmounted, watch } from 'vue'; import { throttle } from 'packages/shared/src'; import { FormField, FormReturns } from '@core/index'; import { isSSR } from '@core/utils/common'; @@ -53,6 +53,17 @@ async function installDevtoolsPlugin(app: App) { api => { API = api; + async function highlight(vm: ComponentInternalInstance | null | undefined) { + if (!vm) { + return; + } + + await api.highlightElement(vm); + setTimeout(() => { + api.unhighlightElement(); + }, 1250); + } + api.addInspector({ id: INSPECTOR_ID, icon: 'https://formwerk.dev/logo-w.svg', @@ -138,7 +149,7 @@ async function installDevtoolsPlugin(app: App) { if (form && '_vm' in form) { SELECTED_NODE = { type: 'form', form }; - api.highlightElement(form._vm); + highlight(form._vm); } return; @@ -150,7 +161,7 @@ async function installDevtoolsPlugin(app: App) { if (field) { SELECTED_NODE = { type: 'field', field }; - api.highlightElement(field._vm); + highlight(field._vm); } return;