From 4789110236515df56c34154fd00b663012dcd3e9 Mon Sep 17 00:00:00 2001 From: timongh <46739861+timongh@users.noreply.github.com> Date: Thu, 9 Feb 2023 19:52:02 +0800 Subject: [PATCH] Fix type errors when `lodash.debounce` used in vue component definition --- .../custom-navbar/history/NavbarHistory.vue | 10 ++++------ .../custom-navbar/settings/NavbarSettings.vue | 7 ++++--- .../watchlater/NavbarWatchlater.vue | 18 +++++++++--------- .../settings-panel/SettingsPanel.vue | 16 +++++++++------- 4 files changed, 26 insertions(+), 25 deletions(-) diff --git a/registry/lib/components/style/custom-navbar/history/NavbarHistory.vue b/registry/lib/components/style/custom-navbar/history/NavbarHistory.vue index 90e7d8bc8..611cdef54 100644 --- a/registry/lib/components/style/custom-navbar/history/NavbarHistory.vue +++ b/registry/lib/components/style/custom-navbar/history/NavbarHistory.vue @@ -124,6 +124,9 @@ import { popupProps, usePopup } from '../mixins' import type { HistoryItem, TypeFilter } from './types' import { getHistoryItems, group, HistoryType, types } from './types' +function search(this: InstanceType) { + this.reloadHistoryItems() +} const ThisComponent = defineComponent({ components: { VButton, @@ -155,12 +158,7 @@ const ThisComponent = defineComponent({ }, }, watch: { - search: lodash.debounce( - function search(this: InstanceType) { - this.reloadHistoryItems() - } as unknown as () => void, - 200, - ), + search: lodash.debounce(search, 200) as unknown as () => void, }, async created() { try { diff --git a/registry/lib/components/style/custom-navbar/settings/NavbarSettings.vue b/registry/lib/components/style/custom-navbar/settings/NavbarSettings.vue index 4119b3910..f18f400ff 100644 --- a/registry/lib/components/style/custom-navbar/settings/NavbarSettings.vue +++ b/registry/lib/components/style/custom-navbar/settings/NavbarSettings.vue @@ -81,6 +81,9 @@ import { VIcon, VLoading, VPopup, VSlider } from '@/ui' import { CustomNavbarItem, CustomNavbarRenderedItems } from '../custom-navbar-item' import { checkSequentialOrder, sortItems } from './orders' +function padding(this: InstanceType, newValue: number) { + navbarOptions.padding = newValue +} const { navbarOptions } = CustomNavbarItem const [rendered] = getData(CustomNavbarRenderedItems) as [ { @@ -114,9 +117,7 @@ const ThisComponent = defineComponent({ } }, watch: { - padding: lodash.debounce((this: InstanceType, newValue: number) => { - navbarOptions.padding = newValue - }, 200) as unknown as (newValue: number) => void, + padding: lodash.debounce(padding, 200) as unknown as (newValue: number) => void, }, async mounted() { addComponentListener('customNavbar.padding', (newValue: number) => { diff --git a/registry/lib/components/style/custom-navbar/watchlater/NavbarWatchlater.vue b/registry/lib/components/style/custom-navbar/watchlater/NavbarWatchlater.vue index 5eec32cdd..a35c0847a 100644 --- a/registry/lib/components/style/custom-navbar/watchlater/NavbarWatchlater.vue +++ b/registry/lib/components/style/custom-navbar/watchlater/NavbarWatchlater.vue @@ -71,6 +71,14 @@ interface WatchlaterCard { upFaceUrl: string upID: number } +function updateFilteredCards(this: InstanceType) { + const search = this.search.toLowerCase() + const cardsList = this.$el.querySelector('.watchlater-list-content') as HTMLElement + cardsList.scrollTo(0, 0) + this.filteredCards = (this.cards as WatchlaterCard[]).filter( + card => card.title.toLowerCase().includes(search) || card.upName.toLowerCase().includes(search), + ) +} const ThisComponent = defineComponent({ components: { VLoading, @@ -165,15 +173,7 @@ const ThisComponent = defineComponent({ await this.toggleWatchlater(aid) } }, - updateFilteredCards: lodash.debounce(function updateFilteredCards(this: InstanceType) { - const search = this.search.toLowerCase() - const cardsList = this.$el.querySelector('.watchlater-list-content') as HTMLElement - cardsList.scrollTo(0, 0) - this.filteredCards = (this.cards as WatchlaterCard[]).filter( - card => - card.title.toLowerCase().includes(search) || card.upName.toLowerCase().includes(search), - ) - }, 100) as unknown as () => void, + updateFilteredCards: lodash.debounce(updateFilteredCards, 100) as unknown as () => void, }, }) export default ThisComponent diff --git a/src/components/settings-panel/SettingsPanel.vue b/src/components/settings-panel/SettingsPanel.vue index 13f746599..de6275ca5 100644 --- a/src/components/settings-panel/SettingsPanel.vue +++ b/src/components/settings-panel/SettingsPanel.vue @@ -91,8 +91,14 @@ import ComponentTags from './ComponentTags.vue' import type { SearchBarActionContext } from './search-bar-actions' import { searchBarActions } from './search-bar-actions' +function searchKeywordWatch(this: InstanceType) { + // if (this.searchKeyword !== '') { + // this.componentTags?.reset() + // } + this.updateRenderedComponents() +} const defaultSearchFilter = (items: ComponentMetadata[]) => items -export default defineComponent({ +const ThisComponent = defineComponent({ name: 'SettingsPanel', components: { VIcon, @@ -155,12 +161,7 @@ export default defineComponent({ }, }, watch: { - searchKeyword: lodash.debounce(function searchKeywordWatch() { - // if (this.searchKeyword !== '') { - // this.componentTags?.reset() - // } - this.updateRenderedComponents() - }, 200), + searchKeyword: lodash.debounce(searchKeywordWatch, 200) as unknown as () => void, searchFilter() { // if (this.searchFilter !== defaultSearchFilter) { this.searchKeyword = '' @@ -272,6 +273,7 @@ export default defineComponent({ }, }, }) +export default ThisComponent