From 337bffac032640eeb03fea42c495d18922ae2e5c Mon Sep 17 00:00:00 2001 From: Vida Xie Date: Mon, 2 Feb 2026 22:35:11 +0800 Subject: [PATCH] refactor: prefer `useTemplateRef` --- app/components/AppHeader.vue | 2 +- app/components/Header/SearchBox.vue | 2 +- app/components/Modal.client.vue | 2 +- app/components/Package/ClaimPackageModal.vue | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index 71a066b94d..7da40cbba6 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -19,7 +19,7 @@ const showMobileMenu = shallowRef(false) const route = useRoute() const isMobile = useIsMobile() const isSearchExpandedManually = shallowRef(false) -const searchBoxRef = shallowRef<{ focus: () => void } | null>(null) +const searchBoxRef = useTemplateRef('searchBoxRef') // On search page, always show search expanded on mobile const isOnHomePage = computed(() => route.name === 'index') diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue index df13dcdc85..15fe24cca9 100644 --- a/app/components/Header/SearchBox.vue +++ b/app/components/Header/SearchBox.vue @@ -80,7 +80,7 @@ function handleSearchFocus() { } // Expose focus method for parent components -const inputRef = shallowRef(null) +const inputRef = useTemplateRef('inputRef') function focus() { inputRef.value?.focus() } diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue index ebd0ee86f7..522e3f4511 100644 --- a/app/components/Modal.client.vue +++ b/app/components/Modal.client.vue @@ -3,7 +3,7 @@ const props = defineProps<{ modalTitle: string }>() -const dialogRef = ref() +const dialogRef = useTemplateRef('dialogRef') const modalTitleId = computed(() => { const id = getCurrentInstance()?.attrs.id diff --git a/app/components/Package/ClaimPackageModal.vue b/app/components/Package/ClaimPackageModal.vue index d06278b4ad..7cbc698be0 100644 --- a/app/components/Package/ClaimPackageModal.vue +++ b/app/components/Package/ClaimPackageModal.vue @@ -96,7 +96,7 @@ async function handleClaim() { } } -const dialogRef = ref() +const dialogRef = useTemplateRef('dialogRef') function open() { // Reset state and check availability each time modal is opened