refactor(docs): partially remove typecript errors (#21099)

* refactor(docs): partially remove typecript errors

* chore: cleanup

* chore: refact

Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com>

* docs: typo fix type error

---------

Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com>
Co-authored-by: Wanghua3819 <2586244885@qq.com>

docs/.vitepress/config/sponsors.ts

@@ -1,6 +1,20 @@
-export const rightRichTextSponsors = []
+export type Sponsor = {
+  url: string
+  name_cn?: string
+  name: string
+  slogan_cn?: string
+  slogan: string
+  img: string
+  isDark?: boolean
+  imgL?: string
+  slogan_index?: string
+  banner_img?: string
+  className?: string
+}
 
-export const rightBigLogoSponsors = [
+export const rightRichTextSponsors: Sponsor[] = []
+
+export const rightBigLogoSponsors: Sponsor[] = [
   {
     name: 'CRMEB',
     img: '/images/CRMEB.png',
@@ -12,7 +26,7 @@ export const rightBigLogoSponsors = [
   },
 ]
 
-export const rightLogoSmallSponsors = [
+export const rightLogoSmallSponsors: Sponsor[] = [
   {
     name: 'BuildAdmin',
     img: '/images/buildadmin.png',
@@ -39,7 +53,7 @@ export const rightLogoSmallSponsors = [
   },
 ]
 
-export const leftCustomImgSponsors = [
+export const leftCustomImgSponsors: Sponsor[] = [
   {
     name: '美乐',
     img: '/images/mele.png',
@@ -73,6 +87,6 @@ export const platinumSponsors = [
   ...rightRichTextSponsors,
 ]
 
-export const leftLogoSponsors = []
+export const leftLogoSponsors: Sponsor[] = []
 
 export const goldSponsors = [...rightLogoSmallSponsors, ...leftLogoSponsors]

docs/.vitepress/config/vite.ts

@@ -93,20 +93,20 @@ export const getViteConfig = ({ mode }: { mode: string }): ViteConfig => {
 
         // allow auto import and register components used in markdown
         include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-      }),
+      }) as Plugin,
 
       // https://github.com/antfu/unplugin-icons
       Icons({
         autoInstall: true,
-      }),
+      }) as Plugin,
 
       UnoCSS({
         inspector: false,
       }),
 
-      MarkdownTransform(),
+      MarkdownTransform() as Plugin,
       Inspect(),
-      groupIconVitePlugin(),
+      groupIconVitePlugin() as Plugin,
       env.HTTPS ? (mkcert() as Plugin) : undefined,
     ],
     optimizeDeps: {

docs/.vitepress/theme/index.ts

@@ -5,23 +5,24 @@ import ElementPlus, {
 import { isClient } from '@vueuse/core'
 import VPApp, { NotFound, globals } from '../vitepress'
 import { define } from '../utils/types'
-
 import 'uno.css'
 import './style.css'
 import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css'
 import 'virtual:group-icons.css'
+
+import type { Component } from 'vue'
 import type { Theme } from 'vitepress'
 
 export default define<Theme>({
   NotFound,
   Layout: VPApp,
   enhanceApp: async ({ app, router }) => {
-    app.use(ElementPlus)
+    app.use(ElementPlus as any)
     app.provide(ID_INJECTION_KEY, { prefix: 1024, current: 0 })
     app.provide(ZINDEX_INJECTION_KEY, { current: 0 })
 
     globals.forEach(([name, Comp]) => {
-      app.component(name, Comp)
+      app.component(name, Comp as Component)
     })
     if (!isClient) return
     const nprogress = await import('nprogress')

docs/.vitepress/vitepress/components/doc-content/vp-last-updated-at.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useData } from 'vitepress'
-import { useLang } from '../../composables/lang'
-import localeData from '../../../i18n/component/last-update-at.json'
-
-const { page } = useData()
-const lang = useLang()
-
-const prefix = computed(() => {
-  return localeData[lang.value].title
-})
-
-const datetime = ref('')
-onMounted(() => {
-  datetime.value = new Date(page.value.lastUpdated).toLocaleString(lang.value)
-})
-</script>
-
-<template>
-  <p class="last-updated text-sm">
-    <span class="prefix">{{ prefix }}:</span>
-    <span class="datetime">{{ datetime }}</span>
-  </p>
-</template>
-
-<style scoped lang="scss">
-@use '../../styles/mixins' as *;
-
-.last-updated {
-  display: inline-block;
-  margin: 0;
-  line-height: 1.4;
-  color: var(--text-color-light);
-
-  .prefix {
-    display: inline-block;
-    font-weight: 500;
-  }
-
-  .datetime {
-    display: inline-block;
-    margin-left: 6px;
-    font-weight: 400;
-  }
-}
-</style>

docs/.vitepress/vitepress/components/globals/icons.vue

@@ -7,11 +7,11 @@ import { useLang } from '../../composables/lang'
 import localeData from '../../../i18n/component/icons.json'
 import IconCategories from './icons-categories.json'
 
-import type { DefineComponent } from 'vue'
+import type { Component, DefineComponent } from 'vue'
 
 type CategoriesItem = {
   name: string
-  icons: DefineComponent[]
+  icons: (DefineComponent | Component)[]
 }
 
 const lang = useLang()
@@ -73,7 +73,7 @@ const filterCategories = computed(() => {
   return categories.value
     .map((category) => {
       const icons = category.icons.filter((icon) => {
-        return icon.name.toLowerCase().includes(query.value.toLowerCase())
+        return icon.name?.toLowerCase().includes(query.value.toLowerCase())
       })
       return { ...category, icons }
     })

docs/.vitepress/vitepress/components/home/sponsor-list.vue

@@ -5,26 +5,28 @@ import { useLang } from '../../composables/lang'
 import sponsorLocale from '../../../i18n/component/sponsor.json'
 import { sendEvent } from '../../../config/analytics'
 
+import type { Sponsor } from '../../../config/sponsors'
+
 const onItemClick = (item: any) => {
   sendEvent('sp_click', item.name, 'index')
 }
-defineProps({
-  sponsors: Array,
-  sponsorType: String,
-})
+defineProps<{
+  sponsors: Sponsor[]
+  sponsorType: string
+}>()
 
 const lang = useLang()
 const sponsorLang = computed(() => sponsorLocale[lang.value])
 
 const langZhCN = 'zh-CN'
 
-const getSponsorName = (sponsor) => {
+const getSponsorName = (sponsor: Sponsor) => {
   if (lang.value === langZhCN) {
     return sponsor.name_cn || sponsor.name
   }
   return sponsor.name
 }
-const getSponsorSlogan = (sponsor) => {
+const getSponsorSlogan = (sponsor: Sponsor) => {
   if (lang.value === langZhCN) {
     if (sponsor.slogan_index) {
       return sponsor.slogan_index

docs/.vitepress/vitepress/components/navbar/vp-search.vue

@@ -2,10 +2,10 @@
 import '@docsearch/css'
 import { getCurrentInstance, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vitepress'
+//@ts-expect-error
 import docsearch from '@docsearch/js'
 import { isClient } from '@vueuse/core'
 import { useLang } from '../../composables/lang'
-// import type { DefaultTheme } from '../config'
 import searchLocale from '../../../i18n/component/search.json'
 
 import type { DocSearchHit } from '@docsearch/react/dist/esm/types'

docs/.vitepress/vitepress/components/sponsors/right-logo-small-list.vue

@@ -10,10 +10,7 @@ const onItemClick = (item: any) => {
 
 <template>
   <div class="flex flex-wrap justify-between right-small">
-    <template
-      v-for="item in rightLogoSmallSponsors.concat([{} as any])"
-      :key="item.name"
-    >
+    <template v-for="item in rightLogoSmallSponsors" :key="item.name">
       <div
         v-if="!item.url"
         :class="[

docs/.vitepress/vitepress/components/vp-sponsor-large.vue

@@ -2,10 +2,12 @@
 import { leftCustomImgSponsors } from '../../config/sponsors'
 import { sendEvent } from '../../config/analytics'
 
-defineProps({
-  itemClass: String,
-  itemStyle: [String, Object, Array],
-})
+import type { CSSProperties } from 'vue'
+
+defineProps<{
+  itemClass?: string
+  itemStyle?: CSSProperties
+}>()
 
 const onItemClick = (item: any) => {
   sendEvent('sp_click', item.name, 'left_custom_img')

docs/.vitepress/vitepress/composables/lock-screen.ts

@@ -1,5 +1,6 @@
 import { onUnmounted } from 'vue'
 import { isClient } from '@vueuse/core'
+import { defaultNamespace } from '@element-plus/hooks/use-namespace'
 import {
   addClass,
   getScrollBarWidth,
@@ -36,7 +37,7 @@ export const useLockScreen = () => {
         10
       )
     }
-    scrollBarWidth = getScrollBarWidth()
+    scrollBarWidth = getScrollBarWidth(defaultNamespace)
     const bodyHasOverflow =
       document.documentElement.clientHeight < document.body.scrollHeight
     const bodyOverflowY = getStyle(document.body, 'overflowY')

docs/.vitepress/vitepress/composables/social-links.ts

@@ -1,10 +1,12 @@
+import type { Component } from 'vue'
+
 import GitHubIcon from '~icons/ri/github-fill'
 
 export const useSocialLinks = () => {
   return [
     {
       link: 'https://github.com/element-plus/element-plus',
-      icon: GitHubIcon,
+      icon: GitHubIcon as Component,
       text: 'GitHub',
     },
   ]

docs/components.d.ts

@@ -160,7 +160,6 @@ declare module 'vue' {
     VpFooter: typeof import('./.vitepress/vitepress/components/globals/vp-footer.vue')['default']
     VpHamburger: typeof import('./.vitepress/vitepress/components/navbar/vp-hamburger.vue')['default']
     VpHeroContent: typeof import('./.vitepress/vitepress/components/vp-hero-content.vue')['default']
-    VpLastUpdatedAt: typeof import('./.vitepress/vitepress/components/doc-content/vp-last-updated-at.vue')['default']
     VpLink: typeof import('./.vitepress/vitepress/components/common/vp-link.vue')['default']
     VpMarkdown: typeof import('./.vitepress/vitepress/components/common/vp-markdown.vue')['default']
     VpMenu: typeof import('./.vitepress/vitepress/components/navbar/vp-menu.vue')['default']

docs/package.json

@@ -22,7 +22,6 @@
   },
   "devDependencies": {
     "@crowdin/cli": "^4.5.0",
-    "@docsearch/react": "^3.1.0",
     "@element-plus/build": "workspace:*",
     "@element-plus/build-constants": "workspace:*",
     "@element-plus/build-utils": "workspace:*",
@@ -40,6 +39,7 @@
     "vite-plugin-inspect": "^0.8.7",
     "vite-plugin-mkcert": "^1.17.6",
     "vitepress": "^1.2.3",
-    "vitepress-plugin-group-icons": "^1.3.4"
+    "vitepress-plugin-group-icons": "^1.3.4",
+    "vue": "^3.4.27"
   }
 }

docs/tsconfig.json

@@ -10,10 +10,12 @@
     "strict": true,
     "noImplicitAny": false,
     "skipLibCheck": true,
+    "lib": ["ESNext", "DOM"],
     "paths": {
       "element-plus": ["../packages/element-plus"],
       "~/*": ["./.vitepress/vitepress/*"]
     },
+    "types": ["unplugin-icons/types/vue"],
     "jsx": "preserve"
   },
   "include": ["**/*", ".vitepress/**/*", "../typings/global.d.ts"],

pnpm-lock.yaml

@@ -256,9 +256,6 @@ importers:
       '@crowdin/cli':
         specifier: ^4.5.0
         version: 4.5.0
-      '@docsearch/react':
-        specifier: ^3.1.0
-        version: 3.1.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@element-plus/build':
         specifier: workspace:*
         version: link:../internal/build
@@ -313,6 +310,9 @@ importers:
       vitepress-plugin-group-icons:
         specifier: ^1.3.4
         version: 1.3.4
+      vue:
+        specifier: ^3.4.27
+        version: 3.4.31(typescript@5.5.4)
 
   internal/build:
     dependencies:
@@ -11413,11 +11413,11 @@ snapshots:
 
   '@vue/compiler-core@3.4.31':
     dependencies:
-      '@babel/parser': 7.24.7
+      '@babel/parser': 7.26.2
       '@vue/shared': 3.4.31
       entities: 4.5.0
       estree-walker: 2.0.2
-      source-map-js: 1.2.0
+      source-map-js: 1.2.1
 
   '@vue/compiler-core@3.5.12':
     dependencies:
@@ -11490,15 +11490,15 @@ snapshots:
 
   '@vue/compiler-sfc@3.4.31':
     dependencies:
-      '@babel/parser': 7.24.7
+      '@babel/parser': 7.26.2
       '@vue/compiler-core': 3.4.31
       '@vue/compiler-dom': 3.4.31
       '@vue/compiler-ssr': 3.4.31
       '@vue/shared': 3.4.31
       estree-walker: 2.0.2
-      magic-string: 0.30.10
-      postcss: 8.4.39
-      source-map-js: 1.2.0
+      magic-string: 0.30.17
+      postcss: 8.4.47
+      source-map-js: 1.2.1
 
   '@vue/compiler-sfc@3.5.12':
     dependencies:
@@ -17224,7 +17224,7 @@ snapshots:
     dependencies:
       '@volar/typescript': 2.4.10
       '@vue/language-core': 2.1.6(typescript@5.5.4)
-      semver: 7.6.3
+      semver: 7.7.2
       typescript: 5.5.4
     optional: true