From 84f49de955848301b7c057bd443c69d83c3d2d1c Mon Sep 17 00:00:00 2001
From: wzc520pyfm <1528857653@qq.com>
Date: Sun, 14 Apr 2024 11:35:04 +0800
Subject: [PATCH 01/16] test(hooks): [use-teleport] add no-client test (#16498)

---
 .../hooks/__tests__/use-teleport.test.tsx     | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/hooks/__tests__/use-teleport.test.tsx b/packages/hooks/__tests__/use-teleport.test.tsx
index 52a664446e5e9..a5efd31c06213 100644
--- a/packages/hooks/__tests__/use-teleport.test.tsx
+++ b/packages/hooks/__tests__/use-teleport.test.tsx
@@ -1,6 +1,7 @@
 import { defineComponent, h, nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { NOOP } from '@vue/shared'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { useTeleport } from '../use-teleport'
 import type { VueWrapper } from '@vue/test-utils'
 
@@ -13,6 +14,7 @@ const Comp = defineComponent({
       () => h('div', AXIOM),
       appendToBody
     )
+    showTeleport()
 
     return () => (
       <>
@@ -73,3 +75,29 @@ describe('useTeleport', () => {
     expect(wrapper.text()).toContain(AXIOM)
   })
 })
+
+describe('useTeleport when isClient is false', () => {
+  const mockIsClient = false
+
+  beforeEach(() => {
+    vi.resetModules()
+    vi.doMock('@element-plus/utils', () => ({
+      isClient: mockIsClient,
+    }))
+  })
+  afterEach(() => {
+    vi.doUnmock('@element-plus/utils')
+  })
+
+  it('should get default value when isClient is false', async () => {
+    const { useTeleport: mockUseTeleport } = await import('../use-teleport')
+    const appendToBody = ref(true)
+    const { isTeleportVisible, showTeleport, hideTeleport, renderTeleport } =
+      mockUseTeleport(() => h('div', AXIOM), appendToBody)
+
+    expect(isTeleportVisible.value).toBeFalsy()
+    expect(showTeleport).toEqual(NOOP)
+    expect(hideTeleport).toEqual(NOOP)
+    expect(renderTeleport).toEqual(NOOP)
+  })
+})

From e4306b2eb1666093ecbaa50556c7b14892354711 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Mon, 15 Apr 2024 09:27:12 +0800
Subject: [PATCH 02/16] fix(hooks): [empty-values] warning on modifying
 computead value (#16508)

* fix(hooks): [empty-values] warning on modifying computead value

* chore: update

* fix: update

* fix: update
---
 packages/hooks/use-empty-values/index.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/hooks/use-empty-values/index.ts b/packages/hooks/use-empty-values/index.ts
index 0818716cd5d72..133258ea0c2a0 100644
--- a/packages/hooks/use-empty-values/index.ts
+++ b/packages/hooks/use-empty-values/index.ts
@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useGlobalConfig } from '@element-plus/components/config-provider'
 import { buildProps, debugWarn, isFunction } from '@element-plus/utils'
 
@@ -27,8 +27,10 @@ export const useEmptyValues = (
   props: ExtractPropTypes<typeof useEmptyValuesProps>,
   defaultValue?: null | undefined
 ) => {
-  const config = useGlobalConfig()
-  config.value = config.value || {}
+  let config = useGlobalConfig()
+  if (!config.value) {
+    config = ref({})
+  }
 
   const emptyValues = computed(
     () => props.emptyValues || config.value.emptyValues || DEFAULT_EMPTY_VALUES

From ade87f67297bb2a49dec48c4f8ef4d4f77136022 Mon Sep 17 00:00:00 2001
From: sea <45450994+warmthsea@users.noreply.github.com>
Date: Mon, 15 Apr 2024 16:29:21 +0800
Subject: [PATCH 03/16] docs(examples): standardize unified code format and fix
 some type (#16370)

* docs: standardize unified example code format and fix some example type

* docs:  update some example type

* Update docs/examples/descriptions/sizes.vue

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* docs: update example-page-header

* docs: update example-page-header

---------

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
---
 docs/examples/avatar/fit.vue                  |  9 ++++++-
 docs/examples/breadcrumb/basic.vue            |  6 ++---
 docs/examples/button/custom.vue               |  6 ++---
 docs/examples/button/link.vue                 |  6 +++--
 docs/examples/button/text.vue                 |  9 ++++---
 docs/examples/carousel/basic.vue              |  6 ++---
 docs/examples/cascader/multiple-selection.vue |  2 +-
 docs/examples/checkbox/button-style.vue       | 15 ++++++------
 docs/examples/checkbox/intermediate.vue       | 13 ++++------
 docs/examples/checkbox/limitation.vue         | 10 +++-----
 docs/examples/config-provider/button.vue      |  6 ++---
 docs/examples/container/example.vue           |  6 ++---
 .../examples/datetime-picker/default-time.vue |  6 ++---
 docs/examples/descriptions/basic-usage.vue    |  7 +++---
 .../descriptions/customized-style.vue         | 22 ++++++++---------
 docs/examples/descriptions/sizes.vue          |  8 ++++---
 docs/examples/descriptions/vertical-list.vue  | 12 ++++++----
 docs/examples/divider/basic-usage.vue         | 16 ++++++-------
 docs/examples/divider/custom-content.vue      |  8 +++----
 docs/examples/drawer/basic-usage.vue          | 15 ++++++------
 .../examples/drawer/customization-content.vue | 14 ++++++-----
 docs/examples/form/custom-validation.vue      |  6 ++---
 docs/examples/form/form-items.vue             |  6 ++---
 docs/examples/form/validation.vue             |  4 ++--
 docs/examples/image/basic-usage.vue           | 10 +++++++-
 docs/examples/layout/column-offset.vue        | 24 +++++++++----------
 docs/examples/message-box/customization.vue   |  1 +
 .../distinguishable-close-cancel.vue          |  1 +
 docs/examples/page-header/complete.vue        | 22 ++++++++---------
 docs/examples/popover/basic-usage.vue         |  6 ++---
 docs/examples/popover/directive-usage.vue     |  6 ++---
 docs/examples/popover/nested-operation.vue    |  6 ++---
 docs/examples/popover/virtual-triggering.vue  |  7 +++---
 .../progress/circular-progress-bar.vue        |  1 +
 docs/examples/progress/custom-color.vue       |  1 +
 .../progress/dashboard-progress-bar.vue       |  1 +
 .../progress/indeterminate-progress.vue       |  1 +
 docs/examples/radio/disabled.vue              |  6 ++---
 docs/examples/rate/basic-usage.vue            |  4 ++--
 docs/examples/rate/sizes.vue                  |  2 +-
 docs/examples/select-v2/custom-footer.vue     |  4 ++--
 docs/examples/select-v2/custom-tag.vue        |  4 ++--
 docs/examples/select/custom-tag.vue           |  4 ++--
 docs/examples/select/custom-template.vue      |  3 ++-
 docs/examples/slider/placement.vue            |  1 +
 docs/examples/slider/range-selection.vue      |  1 +
 docs/examples/slider/show-marks.vue           |  1 +
 .../examples/slider/slider-with-input-box.vue |  1 +
 docs/examples/slider/vertical-mode.vue        |  1 +
 docs/examples/space/control-size.vue          |  4 +++-
 docs/examples/space/fill-ratio.vue            |  3 ++-
 docs/examples/switch/custom-action-icon.vue   |  1 +
 docs/examples/switch/custom-action-slot.vue   |  1 +
 docs/examples/switch/custom-icons.vue         |  1 +
 docs/examples/table/custom-column.vue         |  9 +++----
 docs/examples/table/custom-header.vue         |  9 +++----
 docs/examples/table/fixed-column.vue          |  6 ++---
 .../table/fixed-header-with-fluid-header.vue  |  6 ++---
 docs/examples/table/multi-select.vue          |  6 ++---
 docs/examples/table/table-layout.vue          |  3 ++-
 docs/examples/tabs/basic.vue                  |  1 +
 docs/examples/tabs/card-style.vue             |  2 ++
 docs/examples/tabs/custom-tab.vue             |  1 +
 .../tabs/customized-add-button-icon.vue       |  2 ++
 docs/examples/tabs/customized-trigger.vue     |  2 ++
 docs/examples/tabs/dynamic-tabs.vue           |  2 ++
 docs/examples/tabs/tab-position.vue           |  5 +++-
 docs/examples/tag/removable.vue               |  8 ++++++-
 docs/examples/tooltip-v2/a11y.vue             |  7 +++---
 docs/examples/tooltip-v2/arrow.vue            |  6 ++---
 docs/examples/tooltip-v2/basic-usage.vue      |  6 ++---
 docs/examples/tooltip-v2/full-transition.vue  |  6 ++---
 docs/examples/tooltip-v2/transition.vue       |  6 ++---
 docs/examples/tooltip/advanced-usage.vue      |  6 ++---
 docs/examples/upload/custom-thumbnail.vue     |  1 +
 docs/examples/upload/manual.vue               |  1 +
 76 files changed, 256 insertions(+), 192 deletions(-)

diff --git a/docs/examples/avatar/fit.vue b/docs/examples/avatar/fit.vue
index b1a81a36bc4f1..7ff0cd310db7c 100644
--- a/docs/examples/avatar/fit.vue
+++ b/docs/examples/avatar/fit.vue
@@ -8,9 +8,16 @@
 </template>
 <script lang="ts" setup>
 import { reactive, toRefs } from 'vue'
+import type { ObjectFitProperty } from 'csstype'
 
 const state = reactive({
-  fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+  fits: [
+    'fill',
+    'contain',
+    'cover',
+    'none',
+    'scale-down',
+  ] as ObjectFitProperty[],
   url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
 })
 
diff --git a/docs/examples/breadcrumb/basic.vue b/docs/examples/breadcrumb/basic.vue
index 222c95fe0e9bd..2b0d14bf1c2ab 100644
--- a/docs/examples/breadcrumb/basic.vue
+++ b/docs/examples/breadcrumb/basic.vue
@@ -1,9 +1,9 @@
 <template>
   <el-breadcrumb separator="/">
     <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
-    <el-breadcrumb-item
-      ><a href="/">promotion management</a></el-breadcrumb-item
-    >
+    <el-breadcrumb-item>
+      <a href="/">promotion management</a>
+    </el-breadcrumb-item>
     <el-breadcrumb-item>promotion list</el-breadcrumb-item>
     <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
   </el-breadcrumb>
diff --git a/docs/examples/button/custom.vue b/docs/examples/button/custom.vue
index b0521a2809e08..bf7ab62c64921 100644
--- a/docs/examples/button/custom.vue
+++ b/docs/examples/button/custom.vue
@@ -8,8 +8,8 @@ import { isDark } from '~/composables/dark'
     <el-button color="#626aef" :dark="isDark" plain>Plain</el-button>
 
     <el-button color="#626aef" :dark="isDark" disabled>Disabled</el-button>
-    <el-button color="#626aef" :dark="isDark" disabled plain
-      >Disabled Plain</el-button
-    >
+    <el-button color="#626aef" :dark="isDark" disabled plain>
+      Disabled Plain
+    </el-button>
   </div>
 </template>
diff --git a/docs/examples/button/link.vue b/docs/examples/button/link.vue
index bcf69fccc76eb..ea6ca4db604a8 100644
--- a/docs/examples/button/link.vue
+++ b/docs/examples/button/link.vue
@@ -6,8 +6,9 @@
       :key="button.text"
       :type="button.type"
       link
-      >{{ button.text }}</el-button
     >
+      {{ button.text }}
+    </el-button>
   </div>
 
   <p>Disabled link button</p>
@@ -18,8 +19,9 @@
       :type="button.type"
       link
       disabled
-      >{{ button.text }}</el-button
     >
+      {{ button.text }}
+    </el-button>
   </div>
 </template>
 
diff --git a/docs/examples/button/text.vue b/docs/examples/button/text.vue
index a07ade91e843b..2bedd706f100c 100644
--- a/docs/examples/button/text.vue
+++ b/docs/examples/button/text.vue
@@ -6,8 +6,9 @@
       :key="button.text"
       :type="button.type"
       text
-      >{{ button.text }}</el-button
     >
+      {{ button.text }}
+    </el-button>
   </div>
 
   <p>Background color always on</p>
@@ -18,8 +19,9 @@
       :type="button.type"
       text
       bg
-      >{{ button.text }}</el-button
     >
+      {{ button.text }}
+    </el-button>
   </div>
 
   <p>Disabled text button</p>
@@ -30,8 +32,9 @@
       :type="button.type"
       text
       disabled
-      >{{ button.text }}</el-button
     >
+      {{ button.text }}
+    </el-button>
   </div>
 </template>
 
diff --git a/docs/examples/carousel/basic.vue b/docs/examples/carousel/basic.vue
index aea24afc0c006..278ab98f9c5ec 100644
--- a/docs/examples/carousel/basic.vue
+++ b/docs/examples/carousel/basic.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="block text-center">
-    <span class="demonstration"
-      >Switch when indicator is hovered (default)</span
-    >
+    <span class="demonstration">
+      Switch when indicator is hovered (default)
+    </span>
     <el-carousel height="150px">
       <el-carousel-item v-for="item in 4" :key="item">
         <h3 class="small justify-center" text="2xl">{{ item }}</h3>
diff --git a/docs/examples/cascader/multiple-selection.vue b/docs/examples/cascader/multiple-selection.vue
index 9571131a29227..2ab4c55d66a23 100644
--- a/docs/examples/cascader/multiple-selection.vue
+++ b/docs/examples/cascader/multiple-selection.vue
@@ -24,7 +24,7 @@
       :props="props"
       collapse-tags
       collapse-tags-tooltip
-      max-collapse-tags="3"
+      :max-collapse-tags="3"
       clearable
     />
   </div>
diff --git a/docs/examples/checkbox/button-style.vue b/docs/examples/checkbox/button-style.vue
index c4dbd57e71aa4..a9d90f51169a5 100644
--- a/docs/examples/checkbox/button-style.vue
+++ b/docs/examples/checkbox/button-style.vue
@@ -8,9 +8,9 @@
   </div>
   <div class="demo-button-style">
     <el-checkbox-group v-model="checkboxGroup2">
-      <el-checkbox-button v-for="city in cities" :key="city" :value="city">{{
-        city
-      }}</el-checkbox-button>
+      <el-checkbox-button v-for="city in cities" :key="city" :value="city">
+        {{ city }}
+      </el-checkbox-button>
     </el-checkbox-group>
   </div>
   <div class="demo-button-style">
@@ -20,15 +20,16 @@
         :key="city"
         :value="city"
         :disabled="city === 'Beijing'"
-        >{{ city }}</el-checkbox-button
       >
+        {{ city }}
+      </el-checkbox-button>
     </el-checkbox-group>
   </div>
   <div class="demo-button-style">
     <el-checkbox-group v-model="checkboxGroup4" size="small" disabled>
-      <el-checkbox-button v-for="city in cities" :key="city" :value="city">{{
-        city
-      }}</el-checkbox-button>
+      <el-checkbox-button v-for="city in cities" :key="city" :value="city">
+        {{ city }}
+      </el-checkbox-button>
     </el-checkbox-group>
   </div>
 </template>
diff --git a/docs/examples/checkbox/intermediate.vue b/docs/examples/checkbox/intermediate.vue
index 59ab671746ea0..76f6705f8b945 100644
--- a/docs/examples/checkbox/intermediate.vue
+++ b/docs/examples/checkbox/intermediate.vue
@@ -3,19 +3,16 @@
     v-model="checkAll"
     :indeterminate="isIndeterminate"
     @change="handleCheckAllChange"
-    >Check all</el-checkbox
   >
+    Check all
+  </el-checkbox>
   <el-checkbox-group
     v-model="checkedCities"
     @change="handleCheckedCitiesChange"
   >
-    <el-checkbox
-      v-for="city in cities"
-      :key="city"
-      :label="city"
-      :value="city"
-      >{{ city }}</el-checkbox
-    >
+    <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
+      {{ city }}
+    </el-checkbox>
   </el-checkbox-group>
 </template>
 
diff --git a/docs/examples/checkbox/limitation.vue b/docs/examples/checkbox/limitation.vue
index a1e5d4c9b2743..71fbec4c51688 100644
--- a/docs/examples/checkbox/limitation.vue
+++ b/docs/examples/checkbox/limitation.vue
@@ -1,12 +1,8 @@
 <template>
   <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
-    <el-checkbox
-      v-for="city in cities"
-      :key="city"
-      :label="city"
-      :value="city"
-      >{{ city }}</el-checkbox
-    >
+    <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
+      {{ city }}
+    </el-checkbox>
   </el-checkbox-group>
 </template>
 
diff --git a/docs/examples/config-provider/button.vue b/docs/examples/config-provider/button.vue
index 0786365c386ca..32ce9a3d7a2d1 100644
--- a/docs/examples/config-provider/button.vue
+++ b/docs/examples/config-provider/button.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div m="b-2">
-      <el-checkbox v-model="config.autoInsertSpace"
-        >autoInsertSpace</el-checkbox
-      >
+      <el-checkbox v-model="config.autoInsertSpace">
+        autoInsertSpace
+      </el-checkbox>
     </div>
 
     <el-config-provider :button="config">
diff --git a/docs/examples/container/example.vue b/docs/examples/container/example.vue
index 30719fe9de113..db539d9d69a65 100644
--- a/docs/examples/container/example.vue
+++ b/docs/examples/container/example.vue
@@ -62,9 +62,9 @@
       <el-header style="text-align: right; font-size: 12px">
         <div class="toolbar">
           <el-dropdown>
-            <el-icon style="margin-right: 8px; margin-top: 1px"
-              ><setting
-            /></el-icon>
+            <el-icon style="margin-right: 8px; margin-top: 1px">
+              <setting />
+            </el-icon>
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item>View</el-dropdown-item>
diff --git a/docs/examples/datetime-picker/default-time.vue b/docs/examples/datetime-picker/default-time.vue
index e5fe8282ac0e4..c80fbb5edf234 100644
--- a/docs/examples/datetime-picker/default-time.vue
+++ b/docs/examples/datetime-picker/default-time.vue
@@ -10,9 +10,9 @@
     />
   </div>
   <div class="block">
-    <span class="demonstration"
-      >Start date time 12:00:00, end date time 08:00:00</span
-    >
+    <span class="demonstration">
+      Start date time 12:00:00, end date time 08:00:00
+    </span>
     <el-date-picker
       v-model="value2"
       type="datetimerange"
diff --git a/docs/examples/descriptions/basic-usage.vue b/docs/examples/descriptions/basic-usage.vue
index 74478a0527f53..5e66f16d0cd48 100644
--- a/docs/examples/descriptions/basic-usage.vue
+++ b/docs/examples/descriptions/basic-usage.vue
@@ -6,9 +6,8 @@
     <el-descriptions-item label="Remarks">
       <el-tag size="small">School</el-tag>
     </el-descriptions-item>
-    <el-descriptions-item label="Address"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
-      Province</el-descriptions-item
-    >
+    <el-descriptions-item label="Address">
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
   </el-descriptions>
 </template>
diff --git a/docs/examples/descriptions/customized-style.vue b/docs/examples/descriptions/customized-style.vue
index fd9b0cc2f52c9..cf5fc1a4f5fd9 100644
--- a/docs/examples/descriptions/customized-style.vue
+++ b/docs/examples/descriptions/customized-style.vue
@@ -7,21 +7,21 @@
       label-class-name="my-label"
       class-name="my-content"
       width="150px"
-      >kooriookami</el-descriptions-item
-    >
-    <el-descriptions-item label="Telephone" label-align="right" align="center"
-      >18100000000</el-descriptions-item
-    >
-    <el-descriptions-item label="Place" label-align="right" align="center"
-      >Suzhou</el-descriptions-item
     >
+      kooriookami
+    </el-descriptions-item>
+    <el-descriptions-item label="Telephone" label-align="right" align="center">
+      18100000000
+    </el-descriptions-item>
+    <el-descriptions-item label="Place" label-align="right" align="center">
+      Suzhou
+    </el-descriptions-item>
     <el-descriptions-item label="Remarks" label-align="right" align="center">
       <el-tag size="small">School</el-tag>
     </el-descriptions-item>
-    <el-descriptions-item label="Address" label-align="right" align="center"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
-      Province</el-descriptions-item
-    >
+    <el-descriptions-item label="Address" label-align="right" align="center">
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
   </el-descriptions>
 </template>
 <style scoped>
diff --git a/docs/examples/descriptions/sizes.vue b/docs/examples/descriptions/sizes.vue
index a39ab7ff3c603..7a8e2555ac795 100644
--- a/docs/examples/descriptions/sizes.vue
+++ b/docs/examples/descriptions/sizes.vue
@@ -88,8 +88,8 @@
     <el-descriptions-item label="Remarks">
       <el-tag size="small">School</el-tag>
     </el-descriptions-item>
-    <el-descriptions-item label="Address"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    <el-descriptions-item label="Address">
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
     </el-descriptions-item>
   </el-descriptions>
 </template>
@@ -103,8 +103,10 @@ import {
   Tickets,
   User,
 } from '@element-plus/icons-vue'
+import type { ComponentSize } from 'element-plus'
+
+const size = ref<ComponentSize>('default')
 
-const size = ref('default')
 const iconStyle = computed(() => {
   const marginMap = {
     large: '8px',
diff --git a/docs/examples/descriptions/vertical-list.vue b/docs/examples/descriptions/vertical-list.vue
index f20101adc8c09..7b30a4e6e9d18 100644
--- a/docs/examples/descriptions/vertical-list.vue
+++ b/docs/examples/descriptions/vertical-list.vue
@@ -18,8 +18,8 @@
     <el-descriptions-item label="Remarks">
       <el-tag size="small">School</el-tag>
     </el-descriptions-item>
-    <el-descriptions-item label="Address"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    <el-descriptions-item label="Address">
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
     </el-descriptions-item>
   </el-descriptions>
 
@@ -36,16 +36,18 @@
     <el-descriptions-item label="Remarks">
       <el-tag size="small">School</el-tag>
     </el-descriptions-item>
-    <el-descriptions-item label="Address"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    <el-descriptions-item label="Address">
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
     </el-descriptions-item>
   </el-descriptions>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import type { ComponentSize } from 'element-plus'
+
+const size = ref<ComponentSize>('default')
 
-const size = ref('default')
 const blockMargin = computed(() => {
   const marginMap = {
     large: '32px',
diff --git a/docs/examples/divider/basic-usage.vue b/docs/examples/divider/basic-usage.vue
index 3fca41778b02d..0adfa1f4719cc 100644
--- a/docs/examples/divider/basic-usage.vue
+++ b/docs/examples/divider/basic-usage.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <span
-      >I sit at my window this morning where the world like a passer-by stops
-      for a moment, nods to me and goes.</span
-    >
+    <span>
+      I sit at my window this morning where the world like a passer-by stops for
+      a moment, nods to me and goes.
+    </span>
     <el-divider />
-    <span
-      >There little thoughts are the rustle of leaves; they have their whisper
-      of joy in my mind.</span
-    >
+    <span>
+      There little thoughts are the rustle of leaves; they have their whisper of
+      joy in my mind.
+    </span>
   </div>
 </template>
diff --git a/docs/examples/divider/custom-content.vue b/docs/examples/divider/custom-content.vue
index 4b93b0c49cf2b..af9ce518b8246 100644
--- a/docs/examples/divider/custom-content.vue
+++ b/docs/examples/divider/custom-content.vue
@@ -2,10 +2,10 @@
   <div>
     <span>What you are you do not see, what you see is your shadow. </span>
     <el-divider content-position="left">Rabindranath Tagore</el-divider>
-    <span
-      >My wishes are fools, they shout across thy song, my Master. Let me but
-      listen.</span
-    >
+    <span>
+      My wishes are fools, they shout across thy song, my Master. Let me but
+      listen.
+    </span>
     <el-divider>
       <el-icon><star-filled /></el-icon>
     </el-divider>
diff --git a/docs/examples/drawer/basic-usage.vue b/docs/examples/drawer/basic-usage.vue
index 9314c550c3d1d..8602920049033 100644
--- a/docs/examples/drawer/basic-usage.vue
+++ b/docs/examples/drawer/basic-usage.vue
@@ -27,12 +27,12 @@
     </template>
     <template #default>
       <div>
-        <el-radio v-model="radio1" value="Option 1" size="large"
-          >Option 1</el-radio
-        >
-        <el-radio v-model="radio1" value="Option 2" size="large"
-          >Option 2</el-radio
-        >
+        <el-radio v-model="radio1" value="Option 1" size="large">
+          Option 1
+        </el-radio>
+        <el-radio v-model="radio1" value="Option 2" size="large">
+          Option 2
+        </el-radio>
       </div>
     </template>
     <template #footer>
@@ -47,10 +47,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
+import type { DrawerProps } from 'element-plus'
 
 const drawer = ref(false)
 const drawer2 = ref(false)
-const direction = ref('rtl')
+const direction = ref<DrawerProps['direction']>('rtl')
 const radio1 = ref('Option 1')
 const handleClose = (done: () => void) => {
   ElMessageBox.confirm('Are you sure you want to close this?')
diff --git a/docs/examples/drawer/customization-content.vue b/docs/examples/drawer/customization-content.vue
index aaf33319e6a61..80f295f8d13fd 100644
--- a/docs/examples/drawer/customization-content.vue
+++ b/docs/examples/drawer/customization-content.vue
@@ -19,7 +19,6 @@
   </el-drawer>
 
   <el-drawer
-    ref="drawerRef"
     v-model="dialog"
     title="I have a nested form inside!"
     :before-close="handleClose"
@@ -43,9 +42,9 @@
       </el-form>
       <div class="demo-drawer__footer">
         <el-button @click="cancelForm">Cancel</el-button>
-        <el-button type="primary" :loading="loading" @click="onClick">{{
-          loading ? 'Submitting ...' : 'Submit'
-        }}</el-button>
+        <el-button type="primary" :loading="loading" @click="onClick">
+          {{ loading ? 'Submitting ...' : 'Submit' }}
+        </el-button>
       </div>
     </div>
   </el-drawer>
@@ -96,9 +95,12 @@ const gridData = [
   },
 ]
 
-const drawerRef = ref<InstanceType<typeof ElDrawer>>()
 const onClick = () => {
-  drawerRef.value!.close()
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    dialog.value = false
+  }, 400)
 }
 
 const handleClose = (done) => {
diff --git a/docs/examples/form/custom-validation.vue b/docs/examples/form/custom-validation.vue
index 82e74036dedfb..d1e06fc449dc8 100644
--- a/docs/examples/form/custom-validation.vue
+++ b/docs/examples/form/custom-validation.vue
@@ -22,9 +22,9 @@
       <el-input v-model.number="ruleForm.age" />
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="submitForm(ruleFormRef)"
-        >Submit</el-button
-      >
+      <el-button type="primary" @click="submitForm(ruleFormRef)">
+        Submit
+      </el-button>
       <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
     </el-form-item>
   </el-form>
diff --git a/docs/examples/form/form-items.vue b/docs/examples/form/form-items.vue
index 10b59b8bc0cc3..d4a9286e9c4ae 100644
--- a/docs/examples/form/form-items.vue
+++ b/docs/examples/form/form-items.vue
@@ -36,9 +36,9 @@
       }"
     >
       <el-input v-model="domain.value" />
-      <el-button class="mt-2" @click.prevent="removeDomain(domain)"
-        >Delete</el-button
-      >
+      <el-button class="mt-2" @click.prevent="removeDomain(domain)">
+        Delete
+      </el-button>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
diff --git a/docs/examples/form/validation.vue b/docs/examples/form/validation.vue
index 6edd9d97844cc..6cd2e8dd9256a 100644
--- a/docs/examples/form/validation.vue
+++ b/docs/examples/form/validation.vue
@@ -93,7 +93,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
+import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
 
 interface RuleForm {
   name: string
@@ -108,7 +108,7 @@ interface RuleForm {
   desc: string
 }
 
-const formSize = ref('default')
+const formSize = ref<ComponentSize>('default')
 const ruleFormRef = ref<FormInstance>()
 const ruleForm = reactive<RuleForm>({
   name: 'Hello',
diff --git a/docs/examples/image/basic-usage.vue b/docs/examples/image/basic-usage.vue
index 93c55e75f303b..cda854e65bb3b 100644
--- a/docs/examples/image/basic-usage.vue
+++ b/docs/examples/image/basic-usage.vue
@@ -8,7 +8,15 @@
 </template>
 
 <script lang="ts" setup>
-const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
+import type { ImageProps } from 'element-plus'
+
+const fits = [
+  'fill',
+  'contain',
+  'cover',
+  'none',
+  'scale-down',
+] as ImageProps['fit'][]
 const url =
   'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
 </script>
diff --git a/docs/examples/layout/column-offset.vue b/docs/examples/layout/column-offset.vue
index 913ac4c44f9d2..7b9c97851a92c 100644
--- a/docs/examples/layout/column-offset.vue
+++ b/docs/examples/layout/column-offset.vue
@@ -1,22 +1,22 @@
 <template>
   <el-row :gutter="20">
     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
-    <el-col :span="6" :offset="6"
-      ><div class="grid-content ep-bg-purple"
-    /></el-col>
+    <el-col :span="6" :offset="6">
+      <div class="grid-content ep-bg-purple" />
+    </el-col>
   </el-row>
   <el-row :gutter="20">
-    <el-col :span="6" :offset="6"
-      ><div class="grid-content ep-bg-purple"
-    /></el-col>
-    <el-col :span="6" :offset="6"
-      ><div class="grid-content ep-bg-purple"
-    /></el-col>
+    <el-col :span="6" :offset="6">
+      <div class="grid-content ep-bg-purple" />
+    </el-col>
+    <el-col :span="6" :offset="6">
+      <div class="grid-content ep-bg-purple" />
+    </el-col>
   </el-row>
   <el-row :gutter="20">
-    <el-col :span="12" :offset="6"
-      ><div class="grid-content ep-bg-purple"
-    /></el-col>
+    <el-col :span="12" :offset="6">
+      <div class="grid-content ep-bg-purple" />
+    </el-col>
   </el-row>
 </template>
 
diff --git a/docs/examples/message-box/customization.vue b/docs/examples/message-box/customization.vue
index 5008245b1a033..3f4e78c0403e8 100644
--- a/docs/examples/message-box/customization.vue
+++ b/docs/examples/message-box/customization.vue
@@ -5,6 +5,7 @@
 <script lang="ts" setup>
 import { h } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+
 const open = () => {
   ElMessageBox({
     title: 'Message',
diff --git a/docs/examples/message-box/distinguishable-close-cancel.vue b/docs/examples/message-box/distinguishable-close-cancel.vue
index 7666938297be4..4249699a1b1e0 100644
--- a/docs/examples/message-box/distinguishable-close-cancel.vue
+++ b/docs/examples/message-box/distinguishable-close-cancel.vue
@@ -5,6 +5,7 @@
 <script lang="ts" setup>
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { Action } from 'element-plus'
+
 const open = () => {
   ElMessageBox.confirm(
     'You have unsaved changes, save and proceed?',
diff --git a/docs/examples/page-header/complete.vue b/docs/examples/page-header/complete.vue
index b195449d2fbf9..1ee1198c1877d 100644
--- a/docs/examples/page-header/complete.vue
+++ b/docs/examples/page-header/complete.vue
@@ -6,9 +6,9 @@
           <el-breadcrumb-item :to="{ path: './page-header.html' }">
             homepage
           </el-breadcrumb-item>
-          <el-breadcrumb-item
-            ><a href="./page-header.html">route 1</a></el-breadcrumb-item
-          >
+          <el-breadcrumb-item>
+            <a href="./page-header.html">route 1</a>
+          </el-breadcrumb-item>
           <el-breadcrumb-item>route 2</el-breadcrumb-item>
         </el-breadcrumb>
       </template>
@@ -37,18 +37,18 @@
       </template>
 
       <el-descriptions :column="3" size="small" class="mt-4">
-        <el-descriptions-item label="Username"
-          >kooriookami</el-descriptions-item
-        >
-        <el-descriptions-item label="Telephone"
-          >18100000000</el-descriptions-item
-        >
+        <el-descriptions-item label="Username">
+          kooriookami
+        </el-descriptions-item>
+        <el-descriptions-item label="Telephone">
+          18100000000
+        </el-descriptions-item>
         <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
         <el-descriptions-item label="Remarks">
           <el-tag size="small">School</el-tag>
         </el-descriptions-item>
-        <el-descriptions-item label="Address"
-          >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+        <el-descriptions-item label="Address">
+          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
         </el-descriptions-item>
       </el-descriptions>
       <p class="mt-4 text-sm">
diff --git a/docs/examples/popover/basic-usage.vue b/docs/examples/popover/basic-usage.vue
index fb309d65b3b0e..2251a18957b57 100644
--- a/docs/examples/popover/basic-usage.vue
+++ b/docs/examples/popover/basic-usage.vue
@@ -56,9 +56,9 @@
     content="this is content, this is content, this is content"
   >
     <template #reference>
-      <el-button class="m-2" @click="visible = !visible"
-        >Manual to activate</el-button
-      >
+      <el-button class="m-2" @click="visible = !visible">
+        Manual to activate
+      </el-button>
     </template>
   </el-popover>
 </template>
diff --git a/docs/examples/popover/directive-usage.vue b/docs/examples/popover/directive-usage.vue
index 6dd4de48ce4fa..bad1fc162dab2 100644
--- a/docs/examples/popover/directive-usage.vue
+++ b/docs/examples/popover/directive-usage.vue
@@ -1,7 +1,7 @@
 <template>
-  <el-button v-popover="popoverRef" v-click-outside="onClickOutside"
-    >Click me</el-button
-  >
+  <el-button v-popover="popoverRef" v-click-outside="onClickOutside">
+    Click me
+  </el-button>
 
   <el-popover
     ref="popoverRef"
diff --git a/docs/examples/popover/nested-operation.vue b/docs/examples/popover/nested-operation.vue
index 1be88537aa2b3..a40bde94c5282 100644
--- a/docs/examples/popover/nested-operation.vue
+++ b/docs/examples/popover/nested-operation.vue
@@ -3,9 +3,9 @@
     <p>Are you sure to delete this?</p>
     <div style="text-align: right; margin: 0">
       <el-button size="small" text @click="visible = false">cancel</el-button>
-      <el-button size="small" type="primary" @click="visible = false"
-        >confirm</el-button
-      >
+      <el-button size="small" type="primary" @click="visible = false">
+        confirm
+      </el-button>
     </div>
     <template #reference>
       <el-button @click="visible = true">Delete</el-button>
diff --git a/docs/examples/popover/virtual-triggering.vue b/docs/examples/popover/virtual-triggering.vue
index 548b558163c5f..a2b6f2122282c 100644
--- a/docs/examples/popover/virtual-triggering.vue
+++ b/docs/examples/popover/virtual-triggering.vue
@@ -1,7 +1,7 @@
 <template>
-  <el-button ref="buttonRef" v-click-outside="onClickOutside"
-    >Click me</el-button
-  >
+  <el-button ref="buttonRef" v-click-outside="onClickOutside">
+    Click me
+  </el-button>
 
   <el-popover
     ref="popoverRef"
@@ -17,6 +17,7 @@
 <script setup lang="ts">
 import { ref, unref } from 'vue'
 import { ClickOutside as vClickOutside } from 'element-plus'
+
 const buttonRef = ref()
 const popoverRef = ref()
 const onClickOutside = () => {
diff --git a/docs/examples/progress/circular-progress-bar.vue b/docs/examples/progress/circular-progress-bar.vue
index 6dc5ea8d0b2fe..22263c7464ec6 100644
--- a/docs/examples/progress/circular-progress-bar.vue
+++ b/docs/examples/progress/circular-progress-bar.vue
@@ -7,6 +7,7 @@
     <el-progress type="circle" :percentage="50" status="exception" />
   </div>
 </template>
+
 <style scoped>
 .demo-progress .el-progress--circle {
   margin-right: 15px;
diff --git a/docs/examples/progress/custom-color.vue b/docs/examples/progress/custom-color.vue
index ac4906c300f14..b547d6f677741 100644
--- a/docs/examples/progress/custom-color.vue
+++ b/docs/examples/progress/custom-color.vue
@@ -52,6 +52,7 @@ const decrease = () => {
   }
 }
 </script>
+
 <style scoped>
 .demo-progress .el-progress--line {
   margin-bottom: 15px;
diff --git a/docs/examples/progress/dashboard-progress-bar.vue b/docs/examples/progress/dashboard-progress-bar.vue
index 6a8b63a735242..6af5aa0373f22 100644
--- a/docs/examples/progress/dashboard-progress-bar.vue
+++ b/docs/examples/progress/dashboard-progress-bar.vue
@@ -44,6 +44,7 @@ onMounted(() => {
   }, 500)
 })
 </script>
+
 <style scoped>
 .demo-progress .el-progress--line {
   margin-bottom: 15px;
diff --git a/docs/examples/progress/indeterminate-progress.vue b/docs/examples/progress/indeterminate-progress.vue
index 2016d2a1a9ed4..d45c75ff86efc 100644
--- a/docs/examples/progress/indeterminate-progress.vue
+++ b/docs/examples/progress/indeterminate-progress.vue
@@ -21,6 +21,7 @@
 <script lang="ts" setup>
 const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
 </script>
+
 <style scoped>
 .demo-progress .el-progress--line {
   margin-bottom: 15px;
diff --git a/docs/examples/radio/disabled.vue b/docs/examples/radio/disabled.vue
index 662c6e56bae0c..4ff94347d31b1 100644
--- a/docs/examples/radio/disabled.vue
+++ b/docs/examples/radio/disabled.vue
@@ -1,8 +1,8 @@
 <template>
   <el-radio v-model="radio" disabled value="disabled">Option A</el-radio>
-  <el-radio v-model="radio" disabled value="selected and disabled"
-    >Option B</el-radio
-  >
+  <el-radio v-model="radio" disabled value="selected and disabled">
+    Option B
+  </el-radio>
 </template>
 
 <script lang="ts" setup>
diff --git a/docs/examples/rate/basic-usage.vue b/docs/examples/rate/basic-usage.vue
index bb4e0c0d67bf9..752ca6561173a 100644
--- a/docs/examples/rate/basic-usage.vue
+++ b/docs/examples/rate/basic-usage.vue
@@ -12,8 +12,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const value1 = ref(null)
-const value2 = ref(null)
+const value1 = ref(0)
+const value2 = ref(0)
 const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
 </script>
 
diff --git a/docs/examples/rate/sizes.vue b/docs/examples/rate/sizes.vue
index 712ffd0c10a83..e785c61e87cd7 100644
--- a/docs/examples/rate/sizes.vue
+++ b/docs/examples/rate/sizes.vue
@@ -9,5 +9,5 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const value = ref(null)
+const value = ref(0)
 </script>
diff --git a/docs/examples/select-v2/custom-footer.vue b/docs/examples/select-v2/custom-footer.vue
index 3f7631efcfb10..ddd0f500f274b 100644
--- a/docs/examples/select-v2/custom-footer.vue
+++ b/docs/examples/select-v2/custom-footer.vue
@@ -30,11 +30,11 @@
 
 <script lang="ts" setup>
 import { nextTick, ref } from 'vue'
-
+import { ElSelectV2 } from 'element-plus'
 import type { CheckboxValueType } from 'element-plus'
 
 const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
-const select = ref(null)
+const select = ref<InstanceType<typeof ElSelectV2>>()
 const isAdding = ref(false)
 const value = ref<CheckboxValueType[]>([])
 const optionName = ref('')
diff --git a/docs/examples/select-v2/custom-tag.vue b/docs/examples/select-v2/custom-tag.vue
index 1124aef93ff86..c4b6b164ad888 100644
--- a/docs/examples/select-v2/custom-tag.vue
+++ b/docs/examples/select-v2/custom-tag.vue
@@ -13,7 +13,7 @@
       </div>
     </template>
     <template #tag>
-      <el-tag v-for="color in value" :key="color.value" :color="color" />
+      <el-tag v-for="color in value" :key="color" :color="color" />
     </template>
   </el-select-v2>
 </template>
@@ -21,7 +21,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const value = ref([])
+const value = ref<string[]>([])
 const colors = [
   {
     value: '#E63415',
diff --git a/docs/examples/select/custom-tag.vue b/docs/examples/select/custom-tag.vue
index b7c81fb7a29cb..d3db3e3d33377 100644
--- a/docs/examples/select/custom-tag.vue
+++ b/docs/examples/select/custom-tag.vue
@@ -12,7 +12,7 @@
       </div>
     </el-option>
     <template #tag>
-      <el-tag v-for="color in value" :key="color.value" :color="color" />
+      <el-tag v-for="color in value" :key="color" :color="color" />
     </template>
   </el-select>
 </template>
@@ -20,7 +20,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const value = ref([])
+const value = ref<string[]>([])
 const colors = [
   {
     value: '#E63415',
diff --git a/docs/examples/select/custom-template.vue b/docs/examples/select/custom-template.vue
index d6250581cb977..b2a7a7b12c7f2 100644
--- a/docs/examples/select/custom-template.vue
+++ b/docs/examples/select/custom-template.vue
@@ -13,8 +13,9 @@
           color: var(--el-text-color-secondary);
           font-size: 13px;
         "
-        >{{ item.value }}</span
       >
+        {{ item.value }}
+      </span>
     </el-option>
   </el-select>
 </template>
diff --git a/docs/examples/slider/placement.vue b/docs/examples/slider/placement.vue
index c58dba6724ef7..008be2d411614 100644
--- a/docs/examples/slider/placement.vue
+++ b/docs/examples/slider/placement.vue
@@ -21,6 +21,7 @@ const value2 = ref(0)
 const value3 = ref(0)
 const value4 = ref(0)
 </script>
+
 <style scoped>
 .slider-demo-block {
   max-width: 600px;
diff --git a/docs/examples/slider/range-selection.vue b/docs/examples/slider/range-selection.vue
index 70f86efa1715a..99ec6b8f0cc70 100644
--- a/docs/examples/slider/range-selection.vue
+++ b/docs/examples/slider/range-selection.vue
@@ -9,6 +9,7 @@ import { ref } from 'vue'
 
 const value = ref([4, 8])
 </script>
+
 <style scoped>
 .slider-demo-block {
   max-width: 600px;
diff --git a/docs/examples/slider/show-marks.vue b/docs/examples/slider/show-marks.vue
index 58b7433f9d87e..59fc54e04f905 100644
--- a/docs/examples/slider/show-marks.vue
+++ b/docs/examples/slider/show-marks.vue
@@ -28,6 +28,7 @@ const marks = reactive<Marks>({
   },
 })
 </script>
+
 <style scoped>
 .slider-demo-block {
   max-width: 600px;
diff --git a/docs/examples/slider/slider-with-input-box.vue b/docs/examples/slider/slider-with-input-box.vue
index 5b55998af9ec3..da725c8d33f7e 100644
--- a/docs/examples/slider/slider-with-input-box.vue
+++ b/docs/examples/slider/slider-with-input-box.vue
@@ -9,6 +9,7 @@ import { ref } from 'vue'
 
 const value = ref(0)
 </script>
+
 <style scoped>
 .slider-demo-block {
   max-width: 600px;
diff --git a/docs/examples/slider/vertical-mode.vue b/docs/examples/slider/vertical-mode.vue
index 991b366547575..e0608ad54e9d1 100644
--- a/docs/examples/slider/vertical-mode.vue
+++ b/docs/examples/slider/vertical-mode.vue
@@ -9,6 +9,7 @@ import { ref } from 'vue'
 
 const value = ref(0)
 </script>
+
 <style scoped>
 .slider-demo-block {
   max-width: 600px;
diff --git a/docs/examples/space/control-size.vue b/docs/examples/space/control-size.vue
index 0500ff47e450f..3f4599fdbc11d 100644
--- a/docs/examples/space/control-size.vue
+++ b/docs/examples/space/control-size.vue
@@ -24,5 +24,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-const size = ref('default')
+import type { ComponentSize } from 'element-plus'
+
+const size = ref<ComponentSize>('default')
 </script>
diff --git a/docs/examples/space/fill-ratio.vue b/docs/examples/space/fill-ratio.vue
index 61730c6aa6e0b..0450205dbfa47 100644
--- a/docs/examples/space/fill-ratio.vue
+++ b/docs/examples/space/fill-ratio.vue
@@ -32,7 +32,8 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import type { SpaceInstance } from 'element-plus'
 
-const direction = ref('horizontal')
+const direction = ref<SpaceInstance['direction']>('horizontal')
 const fillRatio = ref(30)
 </script>
diff --git a/docs/examples/switch/custom-action-icon.vue b/docs/examples/switch/custom-action-icon.vue
index 54eacc76f7050..9bf2eec6fc08f 100644
--- a/docs/examples/switch/custom-action-icon.vue
+++ b/docs/examples/switch/custom-action-icon.vue
@@ -9,5 +9,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { Hide, View } from '@element-plus/icons-vue'
+
 const value1 = ref(true)
 </script>
diff --git a/docs/examples/switch/custom-action-slot.vue b/docs/examples/switch/custom-action-slot.vue
index a49ab4915cfe1..e6a2afd0f9554 100644
--- a/docs/examples/switch/custom-action-slot.vue
+++ b/docs/examples/switch/custom-action-slot.vue
@@ -10,5 +10,6 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+
 const value1 = ref(true)
 </script>
diff --git a/docs/examples/switch/custom-icons.vue b/docs/examples/switch/custom-icons.vue
index d1db2eb994b79..2af61c3d69d4d 100644
--- a/docs/examples/switch/custom-icons.vue
+++ b/docs/examples/switch/custom-icons.vue
@@ -14,6 +14,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { Check, Close } from '@element-plus/icons-vue'
+
 const value1 = ref(true)
 const value2 = ref(true)
 </script>
diff --git a/docs/examples/table/custom-column.vue b/docs/examples/table/custom-column.vue
index cc553fc10534b..523ebc1c57b4d 100644
--- a/docs/examples/table/custom-column.vue
+++ b/docs/examples/table/custom-column.vue
@@ -23,15 +23,16 @@
     </el-table-column>
     <el-table-column label="Operations">
       <template #default="scope">
-        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
-          >Edit</el-button
-        >
+        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+          Edit
+        </el-button>
         <el-button
           size="small"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)"
-          >Delete</el-button
         >
+          Delete
+        </el-button>
       </template>
     </el-table-column>
   </el-table>
diff --git a/docs/examples/table/custom-header.vue b/docs/examples/table/custom-header.vue
index 9ae6028ce5fbf..65a650ed119f8 100644
--- a/docs/examples/table/custom-header.vue
+++ b/docs/examples/table/custom-header.vue
@@ -7,15 +7,16 @@
         <el-input v-model="search" size="small" placeholder="Type to search" />
       </template>
       <template #default="scope">
-        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
-          >Edit</el-button
-        >
+        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+          Edit
+        </el-button>
         <el-button
           size="small"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)"
-          >Delete</el-button
         >
+          Delete
+        </el-button>
       </template>
     </el-table-column>
   </el-table>
diff --git a/docs/examples/table/fixed-column.vue b/docs/examples/table/fixed-column.vue
index 0eee962c0d8f3..e27bdb7355c6d 100644
--- a/docs/examples/table/fixed-column.vue
+++ b/docs/examples/table/fixed-column.vue
@@ -8,9 +8,9 @@
     <el-table-column prop="zip" label="Zip" width="120" />
     <el-table-column fixed="right" label="Operations" width="120">
       <template #default>
-        <el-button link type="primary" size="small" @click="handleClick"
-          >Detail</el-button
-        >
+        <el-button link type="primary" size="small" @click="handleClick">
+          Detail
+        </el-button>
         <el-button link type="primary" size="small">Edit</el-button>
       </template>
     </el-table-column>
diff --git a/docs/examples/table/fixed-header-with-fluid-header.vue b/docs/examples/table/fixed-header-with-fluid-header.vue
index 53efeea5d44df..1476e3b7e5b6c 100644
--- a/docs/examples/table/fixed-header-with-fluid-header.vue
+++ b/docs/examples/table/fixed-header-with-fluid-header.vue
@@ -19,9 +19,9 @@
       </template>
     </el-table-column>
   </el-table>
-  <el-button class="mt-4" style="width: 100%" @click="onAddItem"
-    >Add Item</el-button
-  >
+  <el-button class="mt-4" style="width: 100%" @click="onAddItem">
+    Add Item
+  </el-button>
 </template>
 
 <script lang="ts" setup>
diff --git a/docs/examples/table/multi-select.vue b/docs/examples/table/multi-select.vue
index cdaa63b16394e..4b6731ea118b9 100644
--- a/docs/examples/table/multi-select.vue
+++ b/docs/examples/table/multi-select.vue
@@ -13,9 +13,9 @@
     <el-table-column property="address" label="Address" show-overflow-tooltip />
   </el-table>
   <div style="margin-top: 20px">
-    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
-      >Toggle selection status of second and third rows</el-button
-    >
+    <el-button @click="toggleSelection([tableData[1], tableData[2]])">
+      Toggle selection status of second and third rows
+    </el-button>
     <el-button @click="toggleSelection()">Clear selection</el-button>
   </div>
 </template>
diff --git a/docs/examples/table/table-layout.vue b/docs/examples/table/table-layout.vue
index 796c524f5e9a4..2ab5c77f76d3d 100644
--- a/docs/examples/table/table-layout.vue
+++ b/docs/examples/table/table-layout.vue
@@ -12,8 +12,9 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import type { TableInstance } from 'element-plus'
 
-const tableLayout = ref('fixed')
+const tableLayout = ref<TableInstance['tableLayout']>('fixed')
 
 const tableData = [
   {
diff --git a/docs/examples/tabs/basic.vue b/docs/examples/tabs/basic.vue
index d75a76fb93ca7..82755b48ddcbc 100644
--- a/docs/examples/tabs/basic.vue
+++ b/docs/examples/tabs/basic.vue
@@ -16,6 +16,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
 }
 </script>
+
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
diff --git a/docs/examples/tabs/card-style.vue b/docs/examples/tabs/card-style.vue
index 7b8fea1e6d62c..582402dd140c4 100644
--- a/docs/examples/tabs/card-style.vue
+++ b/docs/examples/tabs/card-style.vue
@@ -11,6 +11,7 @@
     <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
   </el-tabs>
 </template>
+
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
@@ -21,6 +22,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
 }
 </script>
+
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
diff --git a/docs/examples/tabs/custom-tab.vue b/docs/examples/tabs/custom-tab.vue
index 88065416fae75..7128e5bd6cc53 100644
--- a/docs/examples/tabs/custom-tab.vue
+++ b/docs/examples/tabs/custom-tab.vue
@@ -18,6 +18,7 @@
 <script lang="ts" setup>
 import { Calendar } from '@element-plus/icons-vue'
 </script>
+
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
diff --git a/docs/examples/tabs/customized-add-button-icon.vue b/docs/examples/tabs/customized-add-button-icon.vue
index 6befa9226bb32..92274e396758a 100644
--- a/docs/examples/tabs/customized-add-button-icon.vue
+++ b/docs/examples/tabs/customized-add-button-icon.vue
@@ -20,6 +20,7 @@ addIcon
     </el-tab-pane>
   </el-tabs>
 </template>
+
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { Select } from '@element-plus/icons-vue'
@@ -71,6 +72,7 @@ const handleTabsEdit = (
   }
 }
 </script>
+
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
diff --git a/docs/examples/tabs/customized-trigger.vue b/docs/examples/tabs/customized-trigger.vue
index 7593c37bfc7ad..31564b74a1b0d 100644
--- a/docs/examples/tabs/customized-trigger.vue
+++ b/docs/examples/tabs/customized-trigger.vue
@@ -21,6 +21,7 @@
     </el-tab-pane>
   </el-tabs>
 </template>
+
 <script lang="ts" setup>
 import { ref } from 'vue'
 
@@ -66,6 +67,7 @@ const removeTab = (targetName: string) => {
   editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
 }
 </script>
+
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
diff --git a/docs/examples/tabs/dynamic-tabs.vue b/docs/examples/tabs/dynamic-tabs.vue
index 472a4993b73f9..a62555bdfd461 100644
--- a/docs/examples/tabs/dynamic-tabs.vue
+++ b/docs/examples/tabs/dynamic-tabs.vue
@@ -16,6 +16,7 @@
     </el-tab-pane>
   </el-tabs>
 </template>
+
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { TabPaneName } from 'element-plus'
@@ -66,6 +67,7 @@ const handleTabsEdit = (
   }
 }
 </script>
+
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
diff --git a/docs/examples/tabs/tab-position.vue b/docs/examples/tabs/tab-position.vue
index 292b1f813c4ed..e84e16f15447e 100644
--- a/docs/examples/tabs/tab-position.vue
+++ b/docs/examples/tabs/tab-position.vue
@@ -13,11 +13,14 @@
     <el-tab-pane label="Task">Task</el-tab-pane>
   </el-tabs>
 </template>
+
 <script lang="ts" setup>
 import { ref } from 'vue'
+import type { TabsInstance } from 'element-plus'
 
-const tabPosition = ref('left')
+const tabPosition = ref<TabsInstance['tabPosition']>('left')
 </script>
+
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
diff --git a/docs/examples/tag/removable.vue b/docs/examples/tag/removable.vue
index 5703d986400c2..f4983efc68192 100644
--- a/docs/examples/tag/removable.vue
+++ b/docs/examples/tag/removable.vue
@@ -8,8 +8,14 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import type { TagProps } from 'element-plus'
 
-const tags = ref([
+interface TagsItem {
+  name: string
+  type: TagProps['type']
+}
+
+const tags = ref<TagsItem[]>([
   { name: 'Tag 1', type: 'primary' },
   { name: 'Tag 2', type: 'success' },
   { name: 'Tag 3', type: 'info' },
diff --git a/docs/examples/tooltip-v2/a11y.vue b/docs/examples/tooltip-v2/a11y.vue
index 04b01f1c95a38..cd4a786c980d6 100644
--- a/docs/examples/tooltip-v2/a11y.vue
+++ b/docs/examples/tooltip-v2/a11y.vue
@@ -1,9 +1,9 @@
 <template>
   <el-tooltip-v2 :aria-label="title">
     <template #trigger>
-      <el-button
-        ><el-icon><Delete /></el-icon
-      ></el-button>
+      <el-button>
+        <el-icon><Delete /></el-icon>
+      </el-button>
     </template>
     {{ content }}
   </el-tooltip-v2>
@@ -11,6 +11,7 @@
 
 <script setup lang="ts">
 import { Delete } from '@element-plus/icons-vue'
+
 const content = 'Delete'
 const title = 'Delete item'
 </script>
diff --git a/docs/examples/tooltip-v2/arrow.vue b/docs/examples/tooltip-v2/arrow.vue
index ccf4ad9358bdb..31d49ea67111e 100644
--- a/docs/examples/tooltip-v2/arrow.vue
+++ b/docs/examples/tooltip-v2/arrow.vue
@@ -1,9 +1,9 @@
 <template>
   <el-tooltip-v2 aria-label="content" show-arrow always-on placement="top">
     <template #trigger>
-      <el-button circle
-        ><el-icon><Plus /></el-icon
-      ></el-button>
+      <el-button circle>
+        <el-icon><Plus /></el-icon>
+      </el-button>
     </template>
     Basic tooltip
   </el-tooltip-v2>
diff --git a/docs/examples/tooltip-v2/basic-usage.vue b/docs/examples/tooltip-v2/basic-usage.vue
index 9ca9fdc89d830..2e37208534124 100644
--- a/docs/examples/tooltip-v2/basic-usage.vue
+++ b/docs/examples/tooltip-v2/basic-usage.vue
@@ -1,9 +1,9 @@
 <template>
   <el-tooltip-v2 aria-label="content" placement="left">
     <template #trigger>
-      <el-button circle
-        ><el-icon><Plus /></el-icon
-      ></el-button>
+      <el-button circle>
+        <el-icon><Plus /></el-icon>
+      </el-button>
     </template>
     Basic tooltip
   </el-tooltip-v2>
diff --git a/docs/examples/tooltip-v2/full-transition.vue b/docs/examples/tooltip-v2/full-transition.vue
index 49f8bea1802e1..d734f7149cb1d 100644
--- a/docs/examples/tooltip-v2/full-transition.vue
+++ b/docs/examples/tooltip-v2/full-transition.vue
@@ -1,9 +1,9 @@
 <template>
   <el-tooltip-v2 full-transition :transition-props="transitionProps">
     <template #trigger>
-      <el-button circle
-        ><el-icon><Plus /></el-icon
-      ></el-button>
+      <el-button circle>
+        <el-icon><Plus /></el-icon>
+      </el-button>
     </template>
     <div>content</div>
   </el-tooltip-v2>
diff --git a/docs/examples/tooltip-v2/transition.vue b/docs/examples/tooltip-v2/transition.vue
index a776970bb91c3..6bddc6876cf4d 100644
--- a/docs/examples/tooltip-v2/transition.vue
+++ b/docs/examples/tooltip-v2/transition.vue
@@ -2,9 +2,9 @@
   <!-- eslint-disable vue/require-toggle-inside-transition  -->
   <el-tooltip-v2 aria-label="content" placement="top" content-class="scale-in">
     <template #trigger>
-      <el-button circle
-        ><el-icon><Plus /></el-icon
-      ></el-button>
+      <el-button circle>
+        <el-icon><Plus /></el-icon>
+      </el-button>
     </template>
     <div>content</div>
   </el-tooltip-v2>
diff --git a/docs/examples/tooltip/advanced-usage.vue b/docs/examples/tooltip/advanced-usage.vue
index f5918376f3190..0b7cb211c2901 100644
--- a/docs/examples/tooltip/advanced-usage.vue
+++ b/docs/examples/tooltip/advanced-usage.vue
@@ -5,9 +5,9 @@
     placement="bottom"
     effect="light"
   >
-    <el-button @click="disabled = !disabled"
-      >click to {{ disabled ? 'active' : 'close' }} tooltip function</el-button
-    >
+    <el-button @click="disabled = !disabled">
+      click to {{ disabled ? 'active' : 'close' }} tooltip function
+    </el-button>
   </el-tooltip>
 </template>
 
diff --git a/docs/examples/upload/custom-thumbnail.vue b/docs/examples/upload/custom-thumbnail.vue
index 1bd99fc2777e1..bd48eea7e1628 100644
--- a/docs/examples/upload/custom-thumbnail.vue
+++ b/docs/examples/upload/custom-thumbnail.vue
@@ -35,6 +35,7 @@
     <img w-full :src="dialogImageUrl" alt="Preview Image" />
   </el-dialog>
 </template>
+
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
diff --git a/docs/examples/upload/manual.vue b/docs/examples/upload/manual.vue
index 03c75288b5629..80e7aa60e3375 100644
--- a/docs/examples/upload/manual.vue
+++ b/docs/examples/upload/manual.vue
@@ -20,6 +20,7 @@
     </template>
   </el-upload>
 </template>
+
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { UploadInstance } from 'element-plus'

From 28174c82e9ec49f326e57b0c26466c1178a1e9aa Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Mon, 15 Apr 2024 17:21:40 +0800
Subject: [PATCH 04/16] chore: add @vitest/coverage-v8 (#16493)

* chore: add @vitest/coverage-v8

* chore: test action

* chore: action revert
---
 package.json                          |  1 +
 pnpm-lock.yaml                        | 95 ++++++++++++++++++++++++---
 vitest.config.ts => vitest.config.mts |  0
 3 files changed, 88 insertions(+), 8 deletions(-)
 rename vitest.config.ts => vitest.config.mts (100%)

diff --git a/package.json b/package.json
index 82a1c5265c5dd..515f0dd4cfdca 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
     "@types/sass": "^1.43.1",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vitest/coverage-v8": "^1.5.0",
     "@vitest/ui": "1.4.0",
     "@vue/test-utils": "^2.0.0",
     "@vue/tsconfig": "^0.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 938ecc87e985a..b3942c1ed02a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,6 +123,9 @@ importers:
       '@vitejs/plugin-vue-jsx':
         specifier: ^1.3.10
         version: 1.3.10
+      '@vitest/coverage-v8':
+        specifier: ^1.5.0
+        version: 1.5.0(vitest@1.4.0)
       '@vitest/ui':
         specifier: 1.4.0
         version: 1.4.0(vitest@1.4.0)
@@ -1275,6 +1278,14 @@ packages:
       '@babel/types': 7.24.0
     dev: true
 
+  /@babel/parser@7.24.4:
+    resolution: {integrity: sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.24.0
+    dev: true
+
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.24.3):
     resolution: {integrity: sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==}
     engines: {node: '>=6.9.0'}
@@ -2786,7 +2797,7 @@ packages:
     dependencies:
       '@jridgewell/set-array': 1.1.1
       '@jridgewell/sourcemap-codec': 1.4.13
-      '@jridgewell/trace-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.25
 
   /@jridgewell/gen-mapping@0.3.5:
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
@@ -2804,7 +2815,6 @@ packages:
   /@jridgewell/resolve-uri@3.1.2:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array@1.1.1:
     resolution: {integrity: sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==}
@@ -2827,7 +2837,6 @@ packages:
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.13:
     resolution: {integrity: sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==}
@@ -2840,13 +2849,12 @@ packages:
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.9:
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
     dependencies:
-      '@jridgewell/resolve-uri': 3.0.7
-      '@jridgewell/sourcemap-codec': 1.4.13
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
   /@nodelib/fs.scandir@2.1.5:
@@ -4493,6 +4501,29 @@ packages:
       vite: 2.9.15(sass@1.53.0)
       vue: 3.2.37
 
+  /@vitest/coverage-v8@1.5.0(vitest@1.4.0):
+    resolution: {integrity: sha512-1igVwlcqw1QUMdfcMlzzY4coikSIBN944pkueGi0pawrX5I5Z+9hxdTR+w3Sg6Q3eZhvdMAs8ZaF9JuTG1uYOQ==}
+    peerDependencies:
+      vitest: 1.5.0
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 0.2.3
+      debug: 4.3.4
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.4
+      istanbul-reports: 3.1.7
+      magic-string: 0.30.8
+      magicast: 0.3.4
+      picocolors: 1.0.0
+      std-env: 3.7.0
+      strip-literal: 2.0.0
+      test-exclude: 6.0.0
+      vitest: 1.4.0(@types/node@18.19.25)(@vitest/ui@1.4.0)(happy-dom@14.3.3)(jsdom@16.4.0)(sass@1.53.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@vitest/expect@1.4.0:
     resolution: {integrity: sha512-Jths0sWCJZ8BxjKe+p+eKsoqev1/T8lYcrjavEaz8auEJ4jAVY0GwW3JKmdVU4mmNPLPHixh4GNXP7GFtAiDHA==}
     dependencies:
@@ -6770,7 +6801,7 @@ packages:
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
     dependencies:
       mdn-data: 2.0.28
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
     dev: true
 
   /css-tree@2.3.1:
@@ -6778,7 +6809,7 @@ packages:
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
     dependencies:
       mdn-data: 2.0.30
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
     dev: true
 
   /css-what@6.1.0:
@@ -9895,6 +9926,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+    dev: true
+
   /istanbul-lib-report@3.0.0:
     resolution: {integrity: sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==}
     engines: {node: '>=8'}
@@ -9904,6 +9940,26 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+    dev: true
+
+  /istanbul-lib-source-maps@5.0.4:
+    resolution: {integrity: sha512-wHOoEsNJTVltaJp8eVkm8w+GVkVNHT2YDYo53YdzQEL2gWm1hBX5cGFR9hQJtuGLebidVX7et3+dmDZrmclduw==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      debug: 4.3.4
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /istanbul-reports@3.1.4:
     resolution: {integrity: sha512-r1/DshN4KSE7xWEknZLLLLDn5CJybV3nw01VTkp6D5jzLuELlcbudfj/eSQFvrKsJuTVCGnePO7ho82Nw9zzfw==}
     engines: {node: '>=8'}
@@ -9912,6 +9968,14 @@ packages:
       istanbul-lib-report: 3.0.0
     dev: true
 
+  /istanbul-reports@3.1.7:
+    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
+    engines: {node: '>=8'}
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+    dev: true
+
   /jake@10.8.7:
     resolution: {integrity: sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==}
     engines: {node: '>=10'}
@@ -10517,6 +10581,14 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
+  /magicast@0.3.4:
+    resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
+    dependencies:
+      '@babel/parser': 7.24.4
+      '@babel/types': 7.24.0
+      source-map-js: 1.2.0
+    dev: true
+
   /make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -10524,6 +10596,13 @@ packages:
       semver: 6.3.0
     dev: true
 
+  /make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+    dependencies:
+      semver: 7.6.0
+    dev: true
+
   /make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
     dev: true
diff --git a/vitest.config.ts b/vitest.config.mts
similarity index 100%
rename from vitest.config.ts
rename to vitest.config.mts

From e83a18ea27c7a29ffb2eb92d3a2e3fbb145a6119 Mon Sep 17 00:00:00 2001
From: wzc520pyfm <1528857653@qq.com>
Date: Mon, 15 Apr 2024 18:03:02 +0800
Subject: [PATCH 05/16] test(hooks): add use-throttle-render test (#16499)

* test(hooks): add use-throttle-render test

* chore(hooks): [use-throttle-render] fix lint err

* chore(hooks): use sleep and concurrent

* fix(hooks): [use-throttle-render] fix import error

* fix(hooks): fix concurrent interfere
---
 .../__tests__/use-throttle-render.test.tsx    | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 packages/hooks/__tests__/use-throttle-render.test.tsx

diff --git a/packages/hooks/__tests__/use-throttle-render.test.tsx b/packages/hooks/__tests__/use-throttle-render.test.tsx
new file mode 100644
index 0000000000000..500181b639c25
--- /dev/null
+++ b/packages/hooks/__tests__/use-throttle-render.test.tsx
@@ -0,0 +1,50 @@
+import { defineComponent, nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import sleep from '@element-plus/test-utils/sleep'
+import { useThrottleRender } from '../use-throttle-render'
+
+const Comp = defineComponent({
+  setup() {
+    const loading = ref(false)
+    const throttled = useThrottleRender(loading, 1000)
+    // Test the settimeout branch clearly: trigger the watch to record the settimeout first, and then record the settimeout again when mount.
+    loading.value = true
+
+    return () => <div class="test-dom">{throttled.value.toString()}</div>
+  },
+})
+
+describe.concurrent('useThrottleRender', () => {
+  it('should throttle rendering when loading is true', async () => {
+    const wrapper = mount(Comp)
+    await nextTick()
+    expect(wrapper.find('.test-dom').text()).toBe('false') // initially false
+    await sleep(1000)
+    expect(wrapper.find('.test-dom').text()).toBe('true') // after throttle time, should be true
+    wrapper.unmount()
+  })
+
+  it('should return false immediately when loading is false', () => {
+    const loading = ref(false)
+    const throttled = useThrottleRender(loading, 1000)
+    expect(throttled.value).toBe(false)
+  })
+
+  it('should return the same value immediately when throttle is 0', () => {
+    const loading = ref(true)
+    const throttled = useThrottleRender(loading, 0)
+    expect(throttled.value).toBe(true) // should be same as loading
+  })
+
+  it('should throttle rendering and update when loading changes', async () => {
+    const loading = ref(true)
+    const throttled = useThrottleRender(loading, 1000)
+    expect(throttled.value).toBe(false) // initially false
+    loading.value = false
+    expect(throttled.value).toBe(false) // should remain false immediately
+    await sleep(1000)
+    loading.value = true
+    expect(throttled.value).toBe(false) // should still be false after throttle time
+  })
+})

From 9c2da88ad91555874e76548024ba2a1cbc40bc1b Mon Sep 17 00:00:00 2001
From: Kataick <24969684+Kataick@users.noreply.github.com>
Date: Tue, 16 Apr 2024 17:51:34 +0800
Subject: [PATCH 06/16] style(components): [col] fix gutter will be hidden when
 present (#16392)

* [col] fix gutter will be hidden when present

* optimize code

* supplement
---
 packages/theme-chalk/src/col.scss         | 12 ++++--------
 packages/theme-chalk/src/mixins/_col.scss | 11 +++--------
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/theme-chalk/src/col.scss b/packages/theme-chalk/src/col.scss
index 59e3b86ec9dd4..faf3ad1180174 100644
--- a/packages/theme-chalk/src/col.scss
+++ b/packages/theme-chalk/src/col.scss
@@ -12,16 +12,12 @@
   }
 }
 
-.#{$namespace}-col-0 {
-  display: none;
-  // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
-  @include when(guttered) {
-    display: none;
-  }
-}
-
 @for $i from 0 through 24 {
   .#{$namespace}-col-#{$i} {
+    display: if($i == 0, none, block);
+    @include when(guttered) {
+      display: if($i == 0, none, block);
+    }
     max-width: (math.div(1, 24) * $i * 100) * 1%;
     flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
   }
diff --git a/packages/theme-chalk/src/mixins/_col.scss b/packages/theme-chalk/src/mixins/_col.scss
index 41212f615a6f4..3cc8a29a6187e 100644
--- a/packages/theme-chalk/src/mixins/_col.scss
+++ b/packages/theme-chalk/src/mixins/_col.scss
@@ -5,16 +5,11 @@
 
 @mixin col-size($size) {
   @include res($size) {
-    .#{$namespace}-col-#{$size}-0 {
-      display: none;
-      @include when(guttered) {
-        display: none;
-      }
-    }
     @for $i from 0 through 24 {
       .#{$namespace}-col-#{$size}-#{$i} {
-        @if $i != 0 {
-          display: block;
+        display: if($i == 0, none, block);
+        @include when(guttered) {
+          display: if($i == 0, none, block);
         }
         max-width: (math.div(1, 24) * $i * 100) * 1%;
         flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;

From 73de14fbfb32bb613e36bd3f4723da4a60f3e831 Mon Sep 17 00:00:00 2001
From: Canroc <84954229+Canroc@users.noreply.github.com>
Date: Thu, 18 Apr 2024 18:00:08 +0800
Subject: [PATCH 07/16] fix(components): [input-number] fix binding wheel event
 warning (#16495)

* fix(components): [input-number] fix binding wheel event warning

* remove unnecessary code

---------

Co-authored-by: chibaopeng <15640244455@163.com>
---
 packages/components/input-number/src/input-number.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/input-number/src/input-number.vue b/packages/components/input-number/src/input-number.vue
index dadb1dcfa7dd9..6f03d8e5cc744 100755
--- a/packages/components/input-number/src/input-number.vue
+++ b/packages/components/input-number/src/input-number.vue
@@ -54,7 +54,6 @@
       :name="name"
       :label="label"
       :validate-event="false"
-      @wheel="handleWheel"
       @keydown.up.prevent="increase"
       @keydown.down.prevent="decrease"
       @blur="handleBlur"
@@ -294,7 +293,7 @@ const setCurrentValueToModelValue = () => {
     data.currentValue = props.modelValue
   }
 }
-const handleWheel = (e: MouseEvent) => {
+const handleWheel = (e: WheelEvent) => {
   if (document.activeElement === e.target) e.preventDefault()
 }
 
@@ -336,6 +335,7 @@ onMounted(() => {
     }
     emit(UPDATE_MODEL_EVENT, val!)
   }
+  innerInput.addEventListener('wheel', handleWheel, { passive: false })
 })
 onUpdated(() => {
   const innerInput = input.value?.input

From f926b0345008f4a4132f559d8fd48dbf15d13df8 Mon Sep 17 00:00:00 2001
From: 0song <82012629+0song@users.noreply.github.com>
Date: Fri, 19 Apr 2024 00:02:31 +0800
Subject: [PATCH 08/16] chore: update README (#16573)

---
 README.md                          | 9 ++-------
 docs/.vitepress/config/sponsors.ts | 9 ---------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index d7282b77f8099..1b915019d5550 100644
--- a/README.md
+++ b/README.md
@@ -66,11 +66,6 @@ You can also try Element Plus out with the components built-in playground.
 <table align="center" cellspacing="0" cellpadding="0">
   <tbody>
     <tr>
-      <td align="center" valign="middle">
-        <a href="https://js.design?source=element-plus" target="_blank">
-          <img width="150px" src="https://user-images.githubusercontent.com/17680888/160634485-df0d00af-8633-4ab8-9a72-aac2b65d1d36.png">
-        </a>
-      </td>
       <td align="center" valign="middle">
         <a href="https://www.vform666.com/" target="_blank">
           <img width="150px" src="https://user-images.githubusercontent.com/17680888/156870588-b25a42d5-888b-4943-8b1b-5239dfd8f4d2.png">
@@ -78,12 +73,12 @@ You can also try Element Plus out with the components built-in playground.
       </td>
       <td align="center" valign="middle">
         <a href="https://www.jnpfsoft.com/index.html?from=elementUI" target="_blank">
-          <img width="150px" src="https://github-production-user-asset-6210df.s3.amazonaws.com/82012629/285874192-0d562df0-2ebc-4bb3-bf8f-8674ac07c38a.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20231127%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231127T131759Z&X-Amz-Expires=300&X-Amz-Signature=532bfe31066712d205616b9a91002be8a187b7111e692a487356943a19c1772e&X-Amz-SignedHeaders=host&actor_id=82012629&key_id=0&repo_id=281319253">
+          <img width="150px" src="https://github.com/element-plus/element-plus/assets/17680888/6a044d82-c393-48ab-90b8-de0d3aad1624">
         </a>
       </td>
       <td align="center" valign="middle">
         <a href="http://github.crmeb.net/u/Element?from=element-plus" target="_blank">
-          <img width="150px" src="https://github-production-user-asset-6210df.s3.amazonaws.com/82012629/286477993-570c3e32-c32c-43ea-997b-2c5fc8df198a.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20231129%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231129T043748Z&X-Amz-Expires=300&X-Amz-Signature=b4f0d40ae84855c2c9cdab96e90aaf8fcbbba67240bbe2588c32775b41cc1720&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=281319253">
+          <img width="150px" src="https://github.com/element-plus/element-plus/assets/17680888/7abd3c5a-04fb-4eae-9540-0d21c5ed71ed">
         </a>
       </td>
     </tr>
diff --git a/docs/.vitepress/config/sponsors.ts b/docs/.vitepress/config/sponsors.ts
index 7140175b401bd..97aa0cb3f7ded 100644
--- a/docs/.vitepress/config/sponsors.ts
+++ b/docs/.vitepress/config/sponsors.ts
@@ -32,15 +32,6 @@ export const rightLogoSmallSponsors = [
 ]
 
 export const leftCustomImgSponsors = [
-  {
-    name: 'JSDesign',
-    name_cn: '即时设计',
-    img: '/images/js-design.png',
-    url: 'https://js.design/?source=element-plus&plan=sy',
-    slogan: 'Professional online UI design tool',
-    slogan_cn: '专业在线UI设计工具',
-    banner_img: '/images/js-design-banner.jpg',
-  },
   {
     name: 'VForm',
     img: '/images/vform.png',

From 42b3a83c6a505f44b1a438bedb17ce276273dd60 Mon Sep 17 00:00:00 2001
From: Electrolux <59329360+electroluxcode@users.noreply.github.com>
Date: Fri, 19 Apr 2024 16:16:32 +0800
Subject: [PATCH 09/16] fix(components): [table] fix cell tooltip display error
 (#16449)

* fix(table-body-hover-trigger): fix the tooltip count way  when trigger the table

* perf:replace let with const

* Update packages/components/table/src/table-body/events-helper.ts

---------

Co-authored-by: btea <2356281422@qq.com>
---
 packages/components/table/src/table-body/events-helper.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/components/table/src/table-body/events-helper.ts b/packages/components/table/src/table-body/events-helper.ts
index 3070d4f14594f..4bb1fdc220790 100644
--- a/packages/components/table/src/table-body/events-helper.ts
+++ b/packages/components/table/src/table-body/events-helper.ts
@@ -134,6 +134,8 @@ function useEvents<T>(props: Partial<TableBodyProps<T>>) {
     let rangeWidth = range.getBoundingClientRect().width
     let rangeHeight = range.getBoundingClientRect().height
     const offsetWidth = rangeWidth - Math.floor(rangeWidth)
+    const { width: cellChildWidth, height: cellChildHeight } =
+      cellChild.getBoundingClientRect()
     if (offsetWidth < 0.001) {
       rangeWidth = Math.floor(rangeWidth)
     }
@@ -146,9 +148,9 @@ function useEvents<T>(props: Partial<TableBodyProps<T>>) {
     const horizontalPadding = left + right
     const verticalPadding = top + bottom
     if (
-      rangeWidth + horizontalPadding > cellChild.offsetWidth ||
-      rangeHeight + verticalPadding > cellChild.offsetHeight ||
-      cellChild.scrollWidth > cellChild.offsetWidth
+      rangeWidth + horizontalPadding > cellChildWidth ||
+      rangeHeight + verticalPadding > cellChildHeight ||
+      cellChild.scrollWidth > cellChildWidth
     ) {
       createTablePopper(
         tooltipOptions,

From 4fd52ac9ba75c7926ce3f5e320b9d8a2e98dd03a Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Fri, 19 Apr 2024 17:00:32 +0800
Subject: [PATCH 10/16] docs: add mastergo ui kit (#16583)

* docs: add mastergo ui kit

* feat: update
---
 .../crowdin/en-US/pages/resource.json         |   4 +-
 .../vitepress/components/globals/resource.vue |   9 +
 .../resources/master-go-ui-kit-svg.vue        | 337 ++++++++++++++++++
 docs/components.d.ts                          |   2 +
 4 files changed, 351 insertions(+), 1 deletion(-)
 create mode 100644 docs/.vitepress/vitepress/components/globals/resources/master-go-ui-kit-svg.vue

diff --git a/docs/.vitepress/crowdin/en-US/pages/resource.json b/docs/.vitepress/crowdin/en-US/pages/resource.json
index 96021b4adb21e..d89eb9fca66c1 100644
--- a/docs/.vitepress/crowdin/en-US/pages/resource.json
+++ b/docs/.vitepress/crowdin/en-US/pages/resource.json
@@ -12,5 +12,7 @@
   "figmaVariables": "Figma Variables",
   "figmaVariablesIntro": "Components all use variables to quickly switch between dark and light modes.",
   "figma2023": "2023 Figma UI Kit",
-  "figma2023Intro": "Components designed using Figma's latest variable configuration provide Light/Dark/Dark Alpha theme switching to help you quickly build interface designs."
+  "figma2023Intro": "Components designed using Figma's latest variable configuration provide Light/Dark/Dark Alpha theme switching to help you quickly build interface designs.",
+  "masterGo2024": "2024 MasterGo UI Kit",
+  "masterGo2024Intro": "MasterGo component library with optimized adaptive layouts, more complete component states, and variant switching."
 }
diff --git a/docs/.vitepress/vitepress/components/globals/resource.vue b/docs/.vitepress/vitepress/components/globals/resource.vue
index 11bde362c8b75..cf8034afca041 100644
--- a/docs/.vitepress/vitepress/components/globals/resource.vue
+++ b/docs/.vitepress/vitepress/components/globals/resource.vue
@@ -10,6 +10,7 @@ import SketchTemplateSvg from './resources/sketch-template-svg.vue'
 import FigmaTemplateSvg from './resources/figma-template-svg.vue'
 import FigmaVariablesSvg from './resources/figma-variables-svg.vue'
 import FigmaUiKitSvg from './resources/figma-ui-kit-svg.vue'
+import MasterGoUiKitSvg from './resources/master-go-ui-kit-svg.vue'
 
 const mirrorUrl = 'element-plus.gitee.io'
 const isMirrorUrl = () => {
@@ -60,6 +61,14 @@ const resourceCards = computed(() => [
     intro: resourceLang.value.figmaIntro,
     url: 'https://www.figma.com/community/file/1021254029764378306',
   },
+  {
+    key: '2024-master-go-ui-kit',
+    title: resourceLang.value.masterGo2024,
+    description: '2024 MasterGo UI Kit',
+    icon: MasterGoUiKitSvg,
+    intro: resourceLang.value.masterGo2024Intro,
+    url: 'https://mastergo.com/community/resource/124855257836266',
+  },
   {
     key: 'sketch',
     title: resourceLang.value.sketch,
diff --git a/docs/.vitepress/vitepress/components/globals/resources/master-go-ui-kit-svg.vue b/docs/.vitepress/vitepress/components/globals/resources/master-go-ui-kit-svg.vue
new file mode 100644
index 0000000000000..d12660c72e50e
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/globals/resources/master-go-ui-kit-svg.vue
@@ -0,0 +1,337 @@
+<template>
+  <svg
+    v-if="!isDark"
+    width="120"
+    height="120"
+    viewBox="0 0 120 120"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M118 11H2C0.89543 11 0 11.8954 0 13V107C0 108.105 0.89543 109 2 109H118C119.105 109 120 108.105 120 107V13C120 11.8954 119.105 11 118 11Z"
+      fill="#F2F8FE"
+    />
+    <path
+      d="M114 23H6C4.89543 23 4 23.8954 4 25V103C4 104.105 4.89543 105 6 105H114C115.105 105 116 104.105 116 103V25C116 23.8954 115.105 23 114 23Z"
+      fill="white"
+    />
+    <path
+      d="M37.5668 74.4659L50.3158 49.7369C51.4861 47.4669 54.7134 47.4152 55.9559 49.6466L69.6714 74.2797C71.0593 76.7722 68.7383 79.6976 65.9955 78.913L54.6981 75.6812C54.1232 75.5168 53.5138 75.5167 52.9389 75.681L41.2902 79.0091C38.5949 79.7793 36.2823 76.9574 37.5668 74.4659Z"
+      fill="#3970E3"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M75.5255 77.4065L80.7918 78.913C83.5346 79.6976 85.8556 76.7722 84.4677 74.2797L70.7522 49.6466C69.5097 47.4152 66.2824 47.4669 65.1121 49.7369L62.8545 54.1159L75.5255 77.4065Z"
+      fill="#9CB8F1"
+    />
+    <path d="M33.5 56.5625H8.5V71.1875H33.5V56.5625Z" fill="#F9FDFF" />
+    <path
+      d="M33.4001 56.6625H8.6001V71.0875H33.4001V56.6625Z"
+      stroke="#C4E6FE"
+      stroke-width="0.2"
+    />
+    <path
+      d="M9.88696 66.5H11.364C12.897 66.5 13.87 65.632 13.87 63.882C13.87 62.139 12.897 61.313 11.308 61.313H9.88696V66.5ZM10.923 65.66V62.146H11.238C12.211 62.146 12.813 62.622 12.813 63.882C12.813 65.142 12.211 65.66 11.238 65.66H10.923ZM16.509 66.598C16.992 66.598 17.489 66.43 17.874 66.164L17.524 65.534C17.237 65.709 16.964 65.8 16.649 65.8C16.061 65.8 15.641 65.471 15.557 64.834H17.972C18 64.736 18.021 64.547 18.021 64.358C18.021 63.266 17.461 62.482 16.383 62.482C15.452 62.482 14.556 63.273 14.556 64.54C14.556 65.835 15.41 66.598 16.509 66.598ZM15.536 64.141C15.62 63.574 15.984 63.28 16.397 63.28C16.908 63.28 17.139 63.616 17.139 64.141H15.536ZM19.988 66.598C21.003 66.598 21.549 66.052 21.549 65.359C21.549 64.638 20.975 64.372 20.457 64.176C20.037 64.022 19.68 63.917 19.68 63.63C19.68 63.406 19.848 63.252 20.205 63.252C20.492 63.252 20.765 63.392 21.045 63.588L21.507 62.965C21.185 62.713 20.744 62.482 20.177 62.482C19.281 62.482 18.714 62.979 18.714 63.679C18.714 64.337 19.267 64.638 19.764 64.827C20.177 64.988 20.583 65.121 20.583 65.415C20.583 65.66 20.408 65.828 20.016 65.828C19.645 65.828 19.316 65.667 18.966 65.401L18.497 66.052C18.889 66.374 19.463 66.598 19.988 66.598ZM22.333 66.5H23.362V62.58H22.333V66.5ZM22.851 61.943C23.201 61.943 23.446 61.726 23.446 61.383C23.446 61.047 23.201 60.823 22.851 60.823C22.487 60.823 22.256 61.047 22.256 61.383C22.256 61.726 22.487 61.943 22.851 61.943ZM25.84 68.201C27.149 68.201 27.975 67.599 27.975 66.808C27.975 66.122 27.457 65.828 26.512 65.828H25.84C25.385 65.828 25.224 65.716 25.224 65.513C25.224 65.345 25.294 65.261 25.392 65.17C25.567 65.233 25.749 65.261 25.896 65.261C26.743 65.261 27.415 64.82 27.415 63.931C27.415 63.686 27.338 63.469 27.24 63.336H27.905V62.58H26.498C26.33 62.524 26.127 62.482 25.896 62.482C25.07 62.482 24.321 62.979 24.321 63.896C24.321 64.358 24.573 64.729 24.846 64.925V64.953C24.608 65.121 24.412 65.394 24.412 65.681C24.412 66.01 24.559 66.213 24.769 66.346V66.381C24.398 66.584 24.209 66.864 24.209 67.193C24.209 67.886 24.916 68.201 25.84 68.201ZM25.896 64.624C25.56 64.624 25.287 64.365 25.287 63.896C25.287 63.441 25.553 63.189 25.896 63.189C26.246 63.189 26.519 63.441 26.519 63.896C26.519 64.365 26.246 64.624 25.896 64.624ZM25.994 67.543C25.427 67.543 25.063 67.361 25.063 67.039C25.063 66.871 25.14 66.717 25.315 66.577C25.462 66.612 25.623 66.626 25.854 66.626H26.337C26.757 66.626 26.988 66.703 26.988 66.983C26.988 67.284 26.589 67.543 25.994 67.543ZM28.64 66.5H29.669V63.805C29.956 63.518 30.166 63.364 30.481 63.364C30.866 63.364 31.034 63.574 31.034 64.183V66.5H32.063V64.057C32.063 63.07 31.699 62.482 30.852 62.482C30.32 62.482 29.921 62.762 29.578 63.098H29.557L29.48 62.58H28.64V66.5Z"
+      fill="#8CCEFD"
+    />
+    <path
+      d="M13 48.5C13 47.1193 11.8807 46 10.5 46C9.11929 46 8 47.1193 8 48.5C8 49.8807 9.11929 51 10.5 51C11.8807 51 13 49.8807 13 48.5Z"
+      fill="#D2ECFE"
+    />
+    <path
+      d="M21.5 46H14.5C14.2239 46 14 46.2239 14 46.5C14 46.7761 14.2239 47 14.5 47H21.5C21.7761 47 22 46.7761 22 46.5C22 46.2239 21.7761 46 21.5 46Z"
+      fill="#8CCEFD"
+    />
+    <path
+      d="M32.5 48H14.5C14.2239 48 14 48.2239 14 48.5C14 48.7761 14.2239 49 14.5 49H32.5C32.7761 49 33 48.7761 33 48.5C33 48.2239 32.7761 48 32.5 48Z"
+      fill="#8CCEFD"
+    />
+    <path
+      d="M27.5 50H14.5C14.2239 50 14 50.2239 14 50.5C14 50.7761 14.2239 51 14.5 51H27.5C27.7761 51 28 50.7761 28 50.5C28 50.2239 27.7761 50 27.5 50Z"
+      fill="#8CCEFD"
+    />
+    <path
+      d="M13 79.5C13 78.1193 11.8807 77 10.5 77C9.11929 77 8 78.1193 8 79.5C8 80.8807 9.11929 82 10.5 82C11.8807 82 13 80.8807 13 79.5Z"
+      fill="#D2ECFE"
+    />
+    <path
+      d="M31.5 77H14.5C14.2239 77 14 77.2239 14 77.5C14 77.7761 14.2239 78 14.5 78H31.5C31.7761 78 32 77.7761 32 77.5C32 77.2239 31.7761 77 31.5 77Z"
+      fill="#8CCEFD"
+    />
+    <path
+      d="M23.5 79H14.5C14.2239 79 14 79.2239 14 79.5C14 79.7761 14.2239 80 14.5 80H23.5C23.7761 80 24 79.7761 24 79.5C24 79.2239 23.7761 79 23.5 79Z"
+      fill="#8CCEFD"
+    />
+    <path
+      d="M33.5 81H14.5C14.2239 81 14 81.2239 14 81.5C14 81.7761 14.2239 82 14.5 82H33.5C33.7761 82 34 81.7761 34 81.5C34 81.2239 33.7761 81 33.5 81Z"
+      fill="#8CCEFD"
+    />
+    <path
+      d="M92.5 46H90.5C90.2239 46 90 46.2239 90 46.5C90 46.7761 90.2239 47 90.5 47H92.5C92.7761 47 93 46.7761 93 46.5C93 46.2239 92.7761 46 92.5 46Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M101.5 46H94.5C94.2239 46 94 46.2239 94 46.5C94 46.7761 94.2239 47 94.5 47H101.5C101.776 47 102 46.7761 102 46.5C102 46.2239 101.776 46 101.5 46Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M8.8 56H8.2C8.08954 56 8 56.0895 8 56.2V56.8C8 56.9105 8.08954 57 8.2 57H8.8C8.91046 57 9 56.9105 9 56.8V56.2C9 56.0895 8.91046 56 8.8 56Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M8.8 70.625H8.2C8.08954 70.625 8 70.7145 8 70.825V71.425C8 71.5355 8.08954 71.625 8.2 71.625H8.8C8.91046 71.625 9 71.5355 9 71.425V70.825C9 70.7145 8.91046 70.625 8.8 70.625Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M33.8 70.625H33.2C33.0895 70.625 33 70.7145 33 70.825V71.425C33 71.5355 33.0895 71.625 33.2 71.625H33.8C33.9105 71.625 34 71.5355 34 71.425V70.825C34 70.7145 33.9105 70.625 33.8 70.625Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M33.8 56H33.2C33.0895 56 33 56.0895 33 56.2V56.8C33 56.9105 33.0895 57 33.2 57H33.8C33.9105 57 34 56.9105 34 56.8V56.2C34 56.0895 33.9105 56 33.8 56Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M94.5 48H90.5C90.2239 48 90 48.2239 90 48.5C90 48.7761 90.2239 49 90.5 49H94.5C94.7761 49 95 48.7761 95 48.5C95 48.2239 94.7761 48 94.5 48Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M108.5 48H96.5C96.2239 48 96 48.2239 96 48.5C96 48.7761 96.2239 49 96.5 49H108.5C108.776 49 109 48.7761 109 48.5C109 48.2239 108.776 48 108.5 48Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M95.5 50H90.5C90.2239 50 90 50.2239 90 50.5C90 50.7761 90.2239 51 90.5 51H95.5C95.7761 51 96 50.7761 96 50.5C96 50.2239 95.7761 50 95.5 50Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M93.5 52H90.5C90.2239 52 90 52.2239 90 52.5C90 52.7761 90.2239 53 90.5 53H93.5C93.7761 53 94 52.7761 94 52.5C94 52.2239 93.7761 52 93.5 52Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M99.7759 50H97.5C97.2239 50 97 50.2239 97 50.5C97 50.7761 97.2239 51 97.5 51H99.7759C100.052 51 100.276 50.7761 100.276 50.5C100.276 50.2239 100.052 50 99.7759 50Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M105.5 52H95.5C95.2239 52 95 52.2239 95 52.5C95 52.7761 95.2239 53 95.5 53H105.5C105.776 53 106 52.7761 106 52.5C106 52.2239 105.776 52 105.5 52Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M93.5 77H91.5C91.2239 77 91 77.2239 91 77.5C91 77.7761 91.2239 78 91.5 78H93.5C93.7761 78 94 77.7761 94 77.5C94 77.2239 93.7761 77 93.5 77Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M93.7905 75H91.4787C91.2143 75 91 75.2143 91 75.4787C91 75.7431 91.2143 75.9574 91.4787 75.9574H93.7905C94.0549 75.9574 94.2692 75.7431 94.2692 75.4787C94.2692 75.2143 94.0549 75 93.7905 75Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M107.5 77H95.5C95.2239 77 95 77.2239 95 77.5C95 77.7761 95.2239 78 95.5 78H107.5C107.776 78 108 77.7761 108 77.5C108 77.2239 107.776 77 107.5 77Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M103.5 75H95.5C95.2239 75 95 75.2239 95 75.5C95 75.7761 95.2239 76 95.5 76H103.5C103.776 76 104 75.7761 104 75.5C104 75.2239 103.776 75 103.5 75Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M95.5 79H91.5C91.2239 79 91 79.2239 91 79.5C91 79.7761 91.2239 80 91.5 80H95.5C95.7761 80 96 79.7761 96 79.5C96 79.2239 95.7761 79 95.5 79Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M104.5 79H97.5C97.2239 79 97 79.2239 97 79.5C97 79.7761 97.2239 80 97.5 80H104.5C104.776 80 105 79.7761 105 79.5C105 79.2239 104.776 79 104.5 79Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M96.4059 81.0426H91.4787C91.2143 81.0426 91 81.2569 91 81.5213C91 81.7857 91.2143 82 91.4787 82H96.4059C96.6703 82 96.8846 81.7857 96.8846 81.5213C96.8846 81.2569 96.6703 81.0426 96.4059 81.0426Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M107.5 81H98.5C98.2239 81 98 81.2239 98 81.5C98 81.7761 98.2239 82 98.5 82H107.5C107.776 82 108 81.7761 108 81.5C108 81.2239 107.776 81 107.5 81Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M90.8569 65.3908V64.5368L89.3869 64.0328L88.3089 63.6478V63.6198L89.3869 63.2348L90.8569 62.7378V61.8838L87.2729 63.2698V63.9978L90.8569 65.3908ZM93.3559 66.2728H94.8329C96.3659 66.2728 97.3389 65.4048 97.3389 63.6548C97.3389 61.9118 96.3659 61.0858 94.7769 61.0858H93.3559V66.2728ZM94.3919 65.4328V61.9188H94.7069C95.6799 61.9188 96.2819 62.3948 96.2819 63.6548C96.2819 64.9148 95.6799 65.4328 94.7069 65.4328H94.3919ZM99.9779 66.3708C100.461 66.3708 100.958 66.2028 101.343 65.9368L100.993 65.3068C100.706 65.4818 100.433 65.5728 100.118 65.5728C99.5299 65.5728 99.1099 65.2438 99.0259 64.6068H101.441C101.469 64.5088 101.49 64.3198 101.49 64.1308C101.49 63.0388 100.93 62.2548 99.8519 62.2548C98.9209 62.2548 98.0249 63.0458 98.0249 64.3128C98.0249 65.6078 98.8789 66.3708 99.9779 66.3708ZM99.0049 63.9138C99.0889 63.3468 99.4529 63.0528 99.8659 63.0528C100.377 63.0528 100.608 63.3888 100.608 63.9138H99.0049ZM103.191 66.2728H104.381L105.69 62.3528H104.703L104.129 64.3058C104.024 64.6908 103.919 65.0968 103.814 65.4958H103.779C103.667 65.0968 103.569 64.6908 103.457 64.3058L102.89 62.3528H101.854L103.191 66.2728ZM107.65 65.3908L111.234 63.9978V63.2698L107.65 61.8838V62.7378L109.12 63.2348L110.191 63.6198V63.6478L109.12 64.0328L107.65 64.5368V65.3908Z"
+      fill="#8FCFFD"
+    />
+    <path
+      d="M8 17C8 15.8954 7.10457 15 6 15C4.89543 15 4 15.8954 4 17C4 18.1046 4.89543 19 6 19C7.10457 19 8 18.1046 8 17Z"
+      fill="#DCE9FB"
+    />
+    <path
+      d="M14 17C14 15.8954 13.1046 15 12 15C10.8954 15 10 15.8954 10 17C10 18.1046 10.8954 19 12 19C13.1046 19 14 18.1046 14 17Z"
+      fill="#DCE9FB"
+    />
+    <path
+      d="M20 17C20 15.8954 19.1046 15 18 15C16.8954 15 16 15.8954 16 17C16 18.1046 16.8954 19 18 19C19.1046 19 20 18.1046 20 17Z"
+      fill="#DCE9FB"
+    />
+  </svg>
+
+  <svg
+    v-if="isDark"
+    width="120"
+    height="120"
+    viewBox="0 0 120 120"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M118 11H2C0.89543 11 0 11.8954 0 13V107C0 108.105 0.89543 109 2 109H118C119.105 109 120 108.105 120 107V13C120 11.8954 119.105 11 118 11Z"
+      fill="#272829"
+    />
+    <path
+      d="M114 23H6C4.89543 23 4 23.8954 4 25V103C4 104.105 4.89543 105 6 105H114C115.105 105 116 104.105 116 103V25C116 23.8954 115.105 23 114 23Z"
+      fill="#33383D"
+    />
+    <path
+      d="M37.5668 74.4659L50.3158 49.7369C51.4861 47.4669 54.7134 47.4152 55.9559 49.6466L69.6714 74.2797C71.0593 76.7722 68.7383 79.6976 65.9955 78.913L54.6981 75.6812C54.1232 75.5168 53.5138 75.5167 52.9389 75.681L41.2902 79.0091C38.5949 79.7793 36.2823 76.9574 37.5668 74.4659Z"
+      fill="#3970E3"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M75.5255 77.4065L80.7918 78.913C83.5346 79.6976 85.8556 76.7722 84.4677 74.2797L70.7522 49.6466C69.5097 47.4152 66.2824 47.4669 65.1121 49.7369L62.8545 54.1159L75.5255 77.4065Z"
+      fill="#365490"
+    />
+    <path d="M33.5 56.5625H8.5V71.1875H33.5V56.5625Z" fill="#333B42" />
+    <path
+      d="M33.4001 56.6625H8.6001V71.0875H33.4001V56.6625Z"
+      stroke="#2E536F"
+      stroke-width="0.2"
+    />
+    <path
+      d="M9.88696 66.5H11.364C12.897 66.5 13.87 65.632 13.87 63.882C13.87 62.139 12.897 61.313 11.308 61.313H9.88696V66.5ZM10.923 65.66V62.146H11.238C12.211 62.146 12.813 62.622 12.813 63.882C12.813 65.142 12.211 65.66 11.238 65.66H10.923ZM16.509 66.598C16.992 66.598 17.489 66.43 17.874 66.164L17.524 65.534C17.237 65.709 16.964 65.8 16.649 65.8C16.061 65.8 15.641 65.471 15.557 64.834H17.972C18 64.736 18.021 64.547 18.021 64.358C18.021 63.266 17.461 62.482 16.383 62.482C15.452 62.482 14.556 63.273 14.556 64.54C14.556 65.835 15.41 66.598 16.509 66.598ZM15.536 64.141C15.62 63.574 15.984 63.28 16.397 63.28C16.908 63.28 17.139 63.616 17.139 64.141H15.536ZM19.988 66.598C21.003 66.598 21.549 66.052 21.549 65.359C21.549 64.638 20.975 64.372 20.457 64.176C20.037 64.022 19.68 63.917 19.68 63.63C19.68 63.406 19.848 63.252 20.205 63.252C20.492 63.252 20.765 63.392 21.045 63.588L21.507 62.965C21.185 62.713 20.744 62.482 20.177 62.482C19.281 62.482 18.714 62.979 18.714 63.679C18.714 64.337 19.267 64.638 19.764 64.827C20.177 64.988 20.583 65.121 20.583 65.415C20.583 65.66 20.408 65.828 20.016 65.828C19.645 65.828 19.316 65.667 18.966 65.401L18.497 66.052C18.889 66.374 19.463 66.598 19.988 66.598ZM22.333 66.5H23.362V62.58H22.333V66.5ZM22.851 61.943C23.201 61.943 23.446 61.726 23.446 61.383C23.446 61.047 23.201 60.823 22.851 60.823C22.487 60.823 22.256 61.047 22.256 61.383C22.256 61.726 22.487 61.943 22.851 61.943ZM25.84 68.201C27.149 68.201 27.975 67.599 27.975 66.808C27.975 66.122 27.457 65.828 26.512 65.828H25.84C25.385 65.828 25.224 65.716 25.224 65.513C25.224 65.345 25.294 65.261 25.392 65.17C25.567 65.233 25.749 65.261 25.896 65.261C26.743 65.261 27.415 64.82 27.415 63.931C27.415 63.686 27.338 63.469 27.24 63.336H27.905V62.58H26.498C26.33 62.524 26.127 62.482 25.896 62.482C25.07 62.482 24.321 62.979 24.321 63.896C24.321 64.358 24.573 64.729 24.846 64.925V64.953C24.608 65.121 24.412 65.394 24.412 65.681C24.412 66.01 24.559 66.213 24.769 66.346V66.381C24.398 66.584 24.209 66.864 24.209 67.193C24.209 67.886 24.916 68.201 25.84 68.201ZM25.896 64.624C25.56 64.624 25.287 64.365 25.287 63.896C25.287 63.441 25.553 63.189 25.896 63.189C26.246 63.189 26.519 63.441 26.519 63.896C26.519 64.365 26.246 64.624 25.896 64.624ZM25.994 67.543C25.427 67.543 25.063 67.361 25.063 67.039C25.063 66.871 25.14 66.717 25.315 66.577C25.462 66.612 25.623 66.626 25.854 66.626H26.337C26.757 66.626 26.988 66.703 26.988 66.983C26.988 67.284 26.589 67.543 25.994 67.543ZM28.64 66.5H29.669V63.805C29.956 63.518 30.166 63.364 30.481 63.364C30.866 63.364 31.034 63.574 31.034 64.183V66.5H32.063V64.057C32.063 63.07 31.699 62.482 30.852 62.482C30.32 62.482 29.921 62.762 29.578 63.098H29.557L29.48 62.58H28.64V66.5Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M13 48.5C13 47.1193 11.8807 46 10.5 46C9.11929 46 8 47.1193 8 48.5C8 49.8807 9.11929 51 10.5 51C11.8807 51 13 49.8807 13 48.5Z"
+      fill="#2F4C63"
+    />
+    <path
+      d="M21.5 46H14.5C14.2239 46 14 46.2239 14 46.5C14 46.7761 14.2239 47 14.5 47H21.5C21.7761 47 22 46.7761 22 46.5C22 46.2239 21.7761 46 21.5 46Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M32.5 48H14.5C14.2239 48 14 48.2239 14 48.5C14 48.7761 14.2239 49 14.5 49H32.5C32.7761 49 33 48.7761 33 48.5C33 48.2239 32.7761 48 32.5 48Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M27.5 50H14.5C14.2239 50 14 50.2239 14 50.5C14 50.7761 14.2239 51 14.5 51H27.5C27.7761 51 28 50.7761 28 50.5C28 50.2239 27.7761 50 27.5 50Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M13 79.5C13 78.1193 11.8807 77 10.5 77C9.11929 77 8 78.1193 8 79.5C8 80.8807 9.11929 82 10.5 82C11.8807 82 13 80.8807 13 79.5Z"
+      fill="#2F4C63"
+    />
+    <path
+      d="M31.5 77H14.5C14.2239 77 14 77.2239 14 77.5C14 77.7761 14.2239 78 14.5 78H31.5C31.7761 78 32 77.7761 32 77.5C32 77.2239 31.7761 77 31.5 77Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M23.5 79H14.5C14.2239 79 14 79.2239 14 79.5C14 79.7761 14.2239 80 14.5 80H23.5C23.7761 80 24 79.7761 24 79.5C24 79.2239 23.7761 79 23.5 79Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M33.5 81H14.5C14.2239 81 14 81.2239 14 81.5C14 81.7761 14.2239 82 14.5 82H33.5C33.7761 82 34 81.7761 34 81.5C34 81.2239 33.7761 81 33.5 81Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M92.5 46H90.5C90.2239 46 90 46.2239 90 46.5C90 46.7761 90.2239 47 90.5 47H92.5C92.7761 47 93 46.7761 93 46.5C93 46.2239 92.7761 46 92.5 46Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M101.5 46H94.5C94.2239 46 94 46.2239 94 46.5C94 46.7761 94.2239 47 94.5 47H101.5C101.776 47 102 46.7761 102 46.5C102 46.2239 101.776 46 101.5 46Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M8.8 56H8.2C8.08954 56 8 56.0895 8 56.2V56.8C8 56.9105 8.08954 57 8.2 57H8.8C8.91046 57 9 56.9105 9 56.8V56.2C9 56.0895 8.91046 56 8.8 56Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M8.8 70.625H8.2C8.08954 70.625 8 70.7145 8 70.825V71.425C8 71.5355 8.08954 71.625 8.2 71.625H8.8C8.91046 71.625 9 71.5355 9 71.425V70.825C9 70.7145 8.91046 70.625 8.8 70.625Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M33.8 70.625H33.2C33.0895 70.625 33 70.7145 33 70.825V71.425C33 71.5355 33.0895 71.625 33.2 71.625H33.8C33.9105 71.625 34 71.5355 34 71.425V70.825C34 70.7145 33.9105 70.625 33.8 70.625Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M33.8 56H33.2C33.0895 56 33 56.0895 33 56.2V56.8C33 56.9105 33.0895 57 33.2 57H33.8C33.9105 57 34 56.9105 34 56.8V56.2C34 56.0895 33.9105 56 33.8 56Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M94.5 48H90.5C90.2239 48 90 48.2239 90 48.5C90 48.7761 90.2239 49 90.5 49H94.5C94.7761 49 95 48.7761 95 48.5C95 48.2239 94.7761 48 94.5 48Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M108.5 48H96.5C96.2239 48 96 48.2239 96 48.5C96 48.7761 96.2239 49 96.5 49H108.5C108.776 49 109 48.7761 109 48.5C109 48.2239 108.776 48 108.5 48Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M95.5 50H90.5C90.2239 50 90 50.2239 90 50.5C90 50.7761 90.2239 51 90.5 51H95.5C95.7761 51 96 50.7761 96 50.5C96 50.2239 95.7761 50 95.5 50Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M93.5 52H90.5C90.2239 52 90 52.2239 90 52.5C90 52.7761 90.2239 53 90.5 53H93.5C93.7761 53 94 52.7761 94 52.5C94 52.2239 93.7761 52 93.5 52Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M99.7759 50H97.5C97.2239 50 97 50.2239 97 50.5C97 50.7761 97.2239 51 97.5 51H99.7759C100.052 51 100.276 50.7761 100.276 50.5C100.276 50.2239 100.052 50 99.7759 50Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M105.5 52H95.5C95.2239 52 95 52.2239 95 52.5C95 52.7761 95.2239 53 95.5 53H105.5C105.776 53 106 52.7761 106 52.5C106 52.2239 105.776 52 105.5 52Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M93.5 77H91.5C91.2239 77 91 77.2239 91 77.5C91 77.7761 91.2239 78 91.5 78H93.5C93.7761 78 94 77.7761 94 77.5C94 77.2239 93.7761 77 93.5 77Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M93.7905 75H91.4787C91.2143 75 91 75.2143 91 75.4787C91 75.7431 91.2143 75.9574 91.4787 75.9574H93.7905C94.0549 75.9574 94.2692 75.7431 94.2692 75.4787C94.2692 75.2143 94.0549 75 93.7905 75Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M107.5 77H95.5C95.2239 77 95 77.2239 95 77.5C95 77.7761 95.2239 78 95.5 78H107.5C107.776 78 108 77.7761 108 77.5C108 77.2239 107.776 77 107.5 77Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M103.5 75H95.5C95.2239 75 95 75.2239 95 75.5C95 75.7761 95.2239 76 95.5 76H103.5C103.776 76 104 75.7761 104 75.5C104 75.2239 103.776 75 103.5 75Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M95.5 79H91.5C91.2239 79 91 79.2239 91 79.5C91 79.7761 91.2239 80 91.5 80H95.5C95.7761 80 96 79.7761 96 79.5C96 79.2239 95.7761 79 95.5 79Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M104.5 79H97.5C97.2239 79 97 79.2239 97 79.5C97 79.7761 97.2239 80 97.5 80H104.5C104.776 80 105 79.7761 105 79.5C105 79.2239 104.776 79 104.5 79Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M96.4059 81.0426H91.4787C91.2143 81.0426 91 81.2569 91 81.5213C91 81.7857 91.2143 82 91.4787 82H96.4059C96.6703 82 96.8846 81.7857 96.8846 81.5213C96.8846 81.2569 96.6703 81.0426 96.4059 81.0426Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M107.5 81H98.5C98.2239 81 98 81.2239 98 81.5C98 81.7761 98.2239 82 98.5 82H107.5C107.776 82 108 81.7761 108 81.5C108 81.2239 107.776 81 107.5 81Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M90.8569 65.3908V64.5368L89.3869 64.0328L88.3089 63.6478V63.6198L89.3869 63.2348L90.8569 62.7378V61.8838L87.2729 63.2698V63.9978L90.8569 65.3908ZM93.3559 66.2728H94.8329C96.3659 66.2728 97.3389 65.4048 97.3389 63.6548C97.3389 61.9118 96.3659 61.0858 94.7769 61.0858H93.3559V66.2728ZM94.3919 65.4328V61.9188H94.7069C95.6799 61.9188 96.2819 62.3948 96.2819 63.6548C96.2819 64.9148 95.6799 65.4328 94.7069 65.4328H94.3919ZM99.9779 66.3708C100.461 66.3708 100.958 66.2028 101.343 65.9368L100.993 65.3068C100.706 65.4818 100.433 65.5728 100.118 65.5728C99.5299 65.5728 99.1099 65.2438 99.0259 64.6068H101.441C101.469 64.5088 101.49 64.3198 101.49 64.1308C101.49 63.0388 100.93 62.2548 99.8519 62.2548C98.9209 62.2548 98.0249 63.0458 98.0249 64.3128C98.0249 65.6078 98.8789 66.3708 99.9779 66.3708ZM99.0049 63.9138C99.0889 63.3468 99.4529 63.0528 99.8659 63.0528C100.377 63.0528 100.608 63.3888 100.608 63.9138H99.0049ZM103.191 66.2728H104.381L105.69 62.3528H104.703L104.129 64.3058C104.024 64.6908 103.919 65.0968 103.814 65.4958H103.779C103.667 65.0968 103.569 64.6908 103.457 64.3058L102.89 62.3528H101.854L103.191 66.2728ZM107.65 65.3908L111.234 63.9978V63.2698L107.65 61.8838V62.7378L109.12 63.2348L110.191 63.6198V63.6478L109.12 64.0328L107.65 64.5368V65.3908Z"
+      fill="#296B9C"
+    />
+    <path
+      d="M8 17C8 15.8954 7.10457 15 6 15C4.89543 15 4 15.8954 4 17C4 18.1046 4.89543 19 6 19C7.10457 19 8 18.1046 8 17Z"
+      fill="#494C52"
+    />
+    <path
+      d="M14 17C14 15.8954 13.1046 15 12 15C10.8954 15 10 15.8954 10 17C10 18.1046 10.8954 19 12 19C13.1046 19 14 18.1046 14 17Z"
+      fill="#494C52"
+    />
+    <path
+      d="M20 17C20 15.8954 19.1046 15 18 15C16.8954 15 16 15.8954 16 17C16 18.1046 16.8954 19 18 19C19.1046 19 20 18.1046 20 17Z"
+      fill="#494C52"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { isDark } from '~/composables/dark'
+</script>
diff --git a/docs/components.d.ts b/docs/components.d.ts
index ee20732615a4c..c4152fd89f29c 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -41,6 +41,8 @@ declare module '@vue/runtime-core' {
     LeftLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/left-layer-svg.vue')['default']
     Light: typeof import('./.vitepress/vitepress/components/icons/light.vue')['default']
     MainColor: typeof import('./.vitepress/vitepress/components/globals/main-color.vue')['default']
+    MasterGoUiKit: typeof import('./.vitepress/vitepress/components/globals/resources/master-go-ui-kit.vue')['default']
+    MasterGoUiKitSvg: typeof import('./.vitepress/vitepress/components/globals/resources/master-go-ui-kit-svg.vue')['default']
     NeutralColor: typeof import('./.vitepress/vitepress/components/globals/neutral-color.vue')['default']
     OvAffix: typeof import('./.vitepress/vitepress/components/overview-icons/ov-affix.vue')['default']
     OvAlert: typeof import('./.vitepress/vitepress/components/overview-icons/ov-alert.vue')['default']

From dd973232322e3f8fd9ba0a63596e0d7873bf83e2 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Fri, 19 Apr 2024 17:50:35 +0800
Subject: [PATCH 11/16] feat(components): [badge] Add badge-style and
 badge-class (#16585)

---
 docs/en-US/component/badge.md           | 26 ++++++++++++-------------
 packages/components/badge/src/badge.ts  | 18 ++++++++++++++---
 packages/components/badge/src/badge.vue | 26 ++++++++++++++++++++++++-
 3 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/docs/en-US/component/badge.md b/docs/en-US/component/badge.md
index e4a2c5e632834..9905f8093f4f4 100644
--- a/docs/en-US/component/badge.md
+++ b/docs/en-US/component/badge.md
@@ -59,21 +59,21 @@ badge/offset
 
 ### Attributes
 
-| Name               | Description                                                                   | Type                                                               | Default |
-| ------------------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
-| value              | display value.                                                                | ^[string] / ^[number]                                              | ''      |
-| max                | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number]                                                          | 99      |
-| is-dot             | if a little dot is displayed.                                                 | ^[boolean]                                                         | false   |
-| hidden             | hidden badge.                                                                 | ^[boolean]                                                         | false   |
-| type               | badge type.                                                                   | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger  |
-| show-zero ^(2.6.0) | Whether to show badge when value is zero.                                     | ^[boolean]                                                         | true    |
-| color ^(2.6.3)     | background color of the dot                                                   | ^[string]                                                          |         |
-| offset ^(2.7.0)    | Set offset of dot                                                             | [ `number` , `number` ]                                            | —       |
-| dot-style ^(2.7.0) | CSS style of dot                                                              | ^[object]`CSSProperties`                                           | —       |
-| dot-class ^(2.7.0) | custom class name of dot                                                      | ^[string]                                                          | —       |
+| Name                 | Description                                                                   | Type                                                               | Default |
+|----------------------|-------------------------------------------------------------------------------|--------------------------------------------------------------------|---------|
+| value                | display value.                                                                | ^[string] / ^[number]                                              | ''      |
+| max                  | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number]                                                          | 99      |
+| is-dot               | if a little dot is displayed.                                                 | ^[boolean]                                                         | false   |
+| hidden               | hidden badge.                                                                 | ^[boolean]                                                         | false   |
+| type                 | badge type.                                                                   | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger  |
+| show-zero ^(2.6.0)   | Whether to show badge when value is zero.                                     | ^[boolean]                                                         | true    |
+| color ^(2.6.3)       | background color of the dot                                                   | ^[string]                                                          |         |
+| offset ^(2.7.0)      | offset of badge                                                               | [ `number` , `number` ]                                            | —       |
+| badge-style ^(2.7.1) | custom style of badge                                                         | ^[object]`CSSProperties`                                           | —       |
+| badge-class ^(2.7.1) | custom class of badge                                                         | ^[string]                                                          | —       |
 
 ### Slots
 
 | Name    | Description               |
-| ------- | ------------------------- |
+|---------|---------------------------|
 | default | customize default content |
diff --git a/packages/components/badge/src/badge.ts b/packages/components/badge/src/badge.ts
index 8b44a9eaecc48..50dff59536ef6 100644
--- a/packages/components/badge/src/badge.ts
+++ b/packages/components/badge/src/badge.ts
@@ -44,23 +44,35 @@ export const badgeProps = buildProps({
    */
   color: String,
   /**
-   * @description CSS style of dot
+   * @deprecated
    */
   dotStyle: {
     type: definePropType<StyleValue>([String, Object, Array]),
   },
   /**
-   * @description set offset of the badge dot
+   * @description CSS style of badge
+   */
+  badgeStyle: {
+    type: definePropType<StyleValue>([String, Object, Array]),
+  },
+  /**
+   * @description set offset of the badge
    */
   offset: {
     type: definePropType<[number, number]>(Array),
     default: [0, 0],
   },
   /**
-   * @description custom class name of badge dot
+   * @deprecated
    */
   dotClass: {
     type: String,
   },
+  /**
+   * @description custom class name of badge
+   */
+  badgeClass: {
+    type: String,
+  },
 } as const)
 export type BadgeProps = ExtractPropTypes<typeof badgeProps>
diff --git a/packages/components/badge/src/badge.vue b/packages/components/badge/src/badge.vue
index ac480deabeed9..3c10a8b953e96 100644
--- a/packages/components/badge/src/badge.vue
+++ b/packages/components/badge/src/badge.vue
@@ -10,6 +10,7 @@
           ns.is('fixed', !!$slots.default),
           ns.is('dot', isDot),
           dotClass,
+          badgeClass,
         ]"
         :style="style"
         v-text="content"
@@ -20,7 +21,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useNamespace } from '@element-plus/hooks'
+import { useDeprecated, useNamespace } from '@element-plus/hooks'
 import { addUnit, isNumber } from '@element-plus/utils'
 import { badgeProps } from './badge'
 import type { StyleValue } from 'vue'
@@ -51,9 +52,32 @@ const style = computed<StyleValue>(() => {
       marginTop: addUnit(props.offset?.[1] ?? 0),
     },
     props.dotStyle ?? {},
+    props.badgeStyle ?? {},
   ]
 })
 
+useDeprecated(
+  {
+    from: 'dot-style',
+    replacement: 'badge-style',
+    version: '2.8.0',
+    scope: 'el-badge',
+    ref: 'https://element-plus.org/en-US/component/badge.html',
+  },
+  computed(() => !!props.dotStyle)
+)
+
+useDeprecated(
+  {
+    from: 'dot-class',
+    replacement: 'badge-class',
+    version: '2.8.0',
+    scope: 'el-badge',
+    ref: 'https://element-plus.org/en-US/component/badge.html',
+  },
+  computed(() => !!props.dotClass)
+)
+
 defineExpose({
   /** @description badge content */
   content,

From b49b553d83bd0a9e75325492440dfedeb0fe29b5 Mon Sep 17 00:00:00 2001
From: Wayne <514435526@qq.com>
Date: Fri, 19 Apr 2024 18:06:30 +0800
Subject: [PATCH 12/16] fix(components): [table] hover style error (#16517)

* fixed style hover error  #16515

boundaries situations fixed

* test(components): [table]

hover on which contains nested rowSpan > 1 test cases

---------

Co-authored-by: dwaynewdong <dwaynewdong@tencent.com>
---
 .../table/__tests__/table-test-common.ts      | 77 +++++++++++++++++++
 .../components/table/__tests__/table.test.ts  | 65 +++++++++++++++-
 .../components/table/src/table-body/index.ts  |  1 +
 3 files changed, 142 insertions(+), 1 deletion(-)

diff --git a/packages/components/table/__tests__/table-test-common.ts b/packages/components/table/__tests__/table-test-common.ts
index 74dd9fe4b83ec..ca7e459331655 100644
--- a/packages/components/table/__tests__/table-test-common.ts
+++ b/packages/components/table/__tests__/table-test-common.ts
@@ -62,3 +62,80 @@ export function getTestData() {
     },
   ]
 }
+
+export function getMutliRowTestData() {
+  return [
+    {
+      id: '12987122',
+      nodeId: 0,
+      name: 'Tom',
+      release: '234',
+      director: '3.2',
+      runtime: 10,
+      span: [
+        [4, 1],
+        [2, 1],
+      ],
+    },
+    {
+      id: '12987123',
+      nodeId: 0,
+      name: 'Tom',
+      release: '165',
+      director: '4.43',
+      runtime: 12,
+      span: [
+        [0, 0],
+        [0, 0],
+      ],
+    },
+    {
+      id: '12987124',
+      nodeId: 0,
+      name: 'Tom1',
+      release: '324',
+      director: '1.9',
+      runtime: 9,
+      span: [
+        [0, 0],
+        [2, 1],
+      ],
+    },
+    {
+      id: '12987125',
+      nodeId: 0,
+      name: 'Tom1',
+      release: '621',
+      director: '2.2',
+      runtime: 17,
+      span: [
+        [0, 0],
+        [0, 0],
+      ],
+    },
+    {
+      id: '12987126',
+      nodeId: 1,
+      name: 'Tom',
+      release: '539',
+      director: '4.1',
+      runtime: 15,
+      span: [
+        [2, 1],
+        [1, 1],
+      ],
+    },
+    {
+      id: '12987127',
+      nodeId: 1,
+      name: 'Tom',
+      release: '539',
+      director: '4.1',
+      runtime: 15,
+      span: [
+        [0, 0],
+        [1, 1],
+      ],
+    },
+  ]
+}
diff --git a/packages/components/table/__tests__/table.test.ts b/packages/components/table/__tests__/table.test.ts
index bba2b95fd589a..1104ff9c18669 100644
--- a/packages/components/table/__tests__/table.test.ts
+++ b/packages/components/table/__tests__/table.test.ts
@@ -6,7 +6,12 @@ import triggerEvent from '@element-plus/test-utils/trigger-event'
 import { rAF } from '@element-plus/test-utils/tick'
 import ElTable from '../src/table.vue'
 import ElTableColumn from '../src/table-column'
-import { doubleWait, getTestData, mount } from './table-test-common'
+import {
+  doubleWait,
+  getMutliRowTestData,
+  getTestData,
+  mount,
+} from './table-test-common'
 import type { VueWrapper } from '@vue/test-utils'
 import type { ComponentPublicInstance } from 'vue'
 
@@ -1075,6 +1080,64 @@ describe('Table.vue', () => {
     wrapper.unmount()
   })
 
+  it('hover on which contains nested rowSpan > 1', async () => {
+    const wrapper = mount({
+      components: {
+        ElTable,
+        ElTableColumn,
+      },
+      template: `
+        <el-table
+          :data="testData"
+          :span-method="objectSpanMethod"
+          border
+          style="width: 100%; margin-top: 20px"
+        >
+          <el-table-column prop="id" label="ID" width="180" />
+          <el-table-column prop="name" label="片名" />
+          <el-table-column prop="amount1" label="发行日期" />
+          <el-table-column prop="amount2" label="导演" />
+          <el-table-column prop="amount3" label="时长（分）" />
+        </el-table>
+      `,
+      data() {
+        return {
+          testData: getMutliRowTestData(),
+        }
+      },
+      methods: {
+        objectSpanMethod: ({ row, columnIndex }) => {
+          if (row.span[columnIndex]) {
+            return row.span[columnIndex]
+          }
+          return [1, 1]
+        },
+      },
+    })
+    const vm = wrapper.vm
+    await doubleWait()
+    const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')
+    triggerEvent(rows[3], 'mouseenter', true, false)
+    await doubleWait()
+    await rAF()
+    await doubleWait()
+    const nodeLists = vm.$el.querySelectorAll(
+      '.el-table__body-wrapper tbody tr'
+    )
+    const cellNotContain = nodeLists[0].querySelectorAll('.el-table__cell')[1]
+    expect([...cellNotContain.classList]).not.toContain('hover-cell')
+    const cellShouldContain =
+      nodeLists[2].querySelectorAll('.el-table__cell')[0]
+    expect([...cellShouldContain.classList]).toContain('hover-cell')
+
+    await doubleWait()
+    triggerEvent(rows[3], 'mouseleave', true, false)
+    await rAF()
+    await doubleWait()
+    expect([...cellShouldContain.classList]).not.toContain('hover-cell')
+    wrapper.unmount()
+  })
+
   it('highlight-current-row', async () => {
     const wrapper = mount({
       components: {
diff --git a/packages/components/table/src/table-body/index.ts b/packages/components/table/src/table-body/index.ts
index 265eb86997859..609d4d85d8490 100644
--- a/packages/components/table/src/table-body/index.ts
+++ b/packages/components/table/src/table-body/index.ts
@@ -53,6 +53,7 @@ export default defineComponent({
         }, [])
 
         indexes.forEach((rowIndex) => {
+          rowNum = newVal
           while (rowNum > 0) {
             // find from previous
             const preChildNodes = rows[rowNum - 1]?.childNodes

From 3386e0af89fdd5478281e12a2bf49ca3ae37bdbb Mon Sep 17 00:00:00 2001
From: Liao-js <43257608+Liao-js@users.noreply.github.com>
Date: Sat, 20 Apr 2024 13:51:34 +0800
Subject: [PATCH 13/16] fix(components): [table] fix grouping head when dynamic
 column (#16433)

fix(components): [table] fix grouping head when dynamic column (#16417)
---
 .../components/table/src/table-column/index.ts     | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/components/table/src/table-column/index.ts b/packages/components/table/src/table-column/index.ts
index 3dba4dbfe5b9e..23d1ed0a61cfa 100644
--- a/packages/components/table/src/table-column/index.ts
+++ b/packages/components/table/src/table-column/index.ts
@@ -151,12 +151,14 @@ export default defineComponent({
         )
     })
     onBeforeUnmount(() => {
-      owner.value.store.commit(
-        'removeColumn',
-        columnConfig.value,
-        isSubColumn.value ? parent.columnConfig.value : null,
-        updateColumnOrder
-      )
+      const columnIndex = columnConfig.value.getColumnIndex()
+      columnIndex > -1 &&
+        owner.value.store.commit(
+          'removeColumn',
+          columnConfig.value,
+          isSubColumn.value ? parent.columnConfig.value : null,
+          updateColumnOrder
+        )
     })
     instance.columnId = columnId.value
 

From c962eea712f6ac55629f54b27f8fd1f1b054e575 Mon Sep 17 00:00:00 2001
From: Liao-js <43257608+Liao-js@users.noreply.github.com>
Date: Sat, 20 Apr 2024 15:06:57 +0800
Subject: [PATCH 14/16] fix(components): [select-v2] fix has existing option 
 when allow create (#16590)

---
 packages/components/select-v2/src/useAllowCreate.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/select-v2/src/useAllowCreate.ts b/packages/components/select-v2/src/useAllowCreate.ts
index 7bd319fb34008..0931a6b1da20e 100644
--- a/packages/components/select-v2/src/useAllowCreate.ts
+++ b/packages/components/select-v2/src/useAllowCreate.ts
@@ -15,10 +15,10 @@ export function useAllowCreate(props: ISelectV2Props, states) {
   })
 
   function hasExistingOption(query: string) {
-    const hasValue = (option) => getValue(option) === query
+    const hasOption = (option) => getLabel(option) === query
     return (
-      (props.options && props.options.some(hasValue)) ||
-      states.createdOptions.some(hasValue)
+      (props.options && props.options.some(hasOption)) ||
+      states.createdOptions.some(hasOption)
     )
   }
 

From 87dd7ba46474348f69195116fc7a6c46e06f1a74 Mon Sep 17 00:00:00 2001
From: Liao-js <43257608+Liao-js@users.noreply.github.com>
Date: Sat, 20 Apr 2024 15:16:10 +0800
Subject: [PATCH 15/16] fix(components): [table] table body rerendered when use
 row-key (#16544)

fix(components): [table] fixed table body rerendered when use row-key
---
 packages/components/table/src/table-body/render-helper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/table/src/table-body/render-helper.ts b/packages/components/table/src/table-body/render-helper.ts
index c0f36a7f5f02f..2a5df23d006db 100644
--- a/packages/components/table/src/table-body/render-helper.ts
+++ b/packages/components/table/src/table-body/render-helper.ts
@@ -110,7 +110,7 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
             }
           }
         }
-        const baseKey = `${$index},${cellIndex}`
+        const baseKey = `${getKeyOfRow(row, $index)},${cellIndex}`
         const patchKey = columnData.columnKey || columnData.rawColumnKey || ''
         const tdChildren = cellChildren(cellIndex, column, data)
         const mergedTooltipOptions =

From a997ff24e3469ecaf082d2e5ae3783d7eb6390b2 Mon Sep 17 00:00:00 2001
From: Element <wallement@gmail.com>
Date: Sat, 20 Apr 2024 15:39:44 +0800
Subject: [PATCH 16/16] chore: Update changelog 2.7.1 (#16595)

chore: update changelog 2.7.1
---
 CHANGELOG.en-US.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 6fbd3a24c4090..ce575b4da1662 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,4 +1,22 @@
 ## Changelog
+
+### 2.7.1
+
+_2024-04-20_
+
+#### Features
+
+- Components [badge] Add badge-style and badge-class (#16585 by @kooriookami)
+
+#### Bug fixes
+
+- Hooks [empty-values] warning on modifying computead value (#16508 by @btea)
+- Components [input-number] fix binding wheel event warning (#16495 by @Canroc)
+- Components [table] fix cell tooltip display error (#16449 by @electroluxcode)
+- Components [table] hover style error (#16517 by @dowinweb)
+- Components [table] fix grouping head when dynamic column (#16433 by @Liao-js)
+- Components [select-v2] fix has existing option  when allow create (#16590 by @Liao-js)
+- Components [table] table body rerendered when use row-key (#16544 by @Liao-js)
 
 ### 2.7.0