From cf9339567bbbbba7c52ea1cdeaa3abca6d2d203d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=ED=95=9C=EA=B2=BD?= <hangyeong.ryu@gmail.com>
Date: Fri, 17 Jun 2022 22:37:30 +0900
Subject: [PATCH 01/48] refactor(components): [image-viewer] simplify emits
 type checking (#8329)

---
 packages/components/image-viewer/src/image-viewer.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/components/image-viewer/src/image-viewer.ts b/packages/components/image-viewer/src/image-viewer.ts
index c374421440eab..7c2629900e90c 100644
--- a/packages/components/image-viewer/src/image-viewer.ts
+++ b/packages/components/image-viewer/src/image-viewer.ts
@@ -1,4 +1,9 @@
-import { buildProps, definePropType, mutable } from '@element-plus/utils'
+import {
+  buildProps,
+  definePropType,
+  isNumber,
+  mutable,
+} from '@element-plus/utils'
 import type { Component, ExtractPropTypes } from 'vue'
 
 export type ImageViewerAction =
@@ -40,7 +45,7 @@ export type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>
 
 export const imageViewerEmits = {
   close: () => true,
-  switch: (index: number) => typeof index === 'number',
+  switch: (index: number) => isNumber(index),
 }
 export type ImageViewerEmits = typeof imageViewerEmits
 

From 1299d4a88fc65ccb83276126aa745b404e34f739 Mon Sep 17 00:00:00 2001
From: xiahouwei <xiahouwei@aliyun.com>
Date: Fri, 17 Jun 2022 22:27:54 +0800
Subject: [PATCH 02/48] fix(components): [tabs] fix change acitve cannot scroll
 in view (#8332)

fix change active cannot scroll in view

closed #8114
---
 packages/components/tabs/src/tabs.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/components/tabs/src/tabs.tsx b/packages/components/tabs/src/tabs.tsx
index 78ebc774d7d05..f151e55b410b1 100644
--- a/packages/components/tabs/src/tabs.tsx
+++ b/packages/components/tabs/src/tabs.tsx
@@ -1,4 +1,12 @@
-import { defineComponent, provide, reactive, ref, renderSlot, watch } from 'vue'
+import {
+  defineComponent,
+  nextTick,
+  provide,
+  reactive,
+  ref,
+  renderSlot,
+  watch,
+} from 'vue'
 import {
   buildProps,
   definePropType,
@@ -137,6 +145,7 @@ export default defineComponent({
     )
 
     watch(currentName, async () => {
+      await nextTick()
       // call exposed function, Vue doesn't support expose in typescript yet.
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error

From 4ac10cfb9702e195f00e53984e998d84ca8e5673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=ED=95=9C=EA=B2=BD?= <hangyeong.ryu@gmail.com>
Date: Sat, 18 Jun 2022 00:25:25 +0900
Subject: [PATCH 03/48] refactor(components): [dialog] using addUnit in the
 use-dialog (#8304)

---
 packages/components/dialog/src/use-dialog.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/components/dialog/src/use-dialog.ts b/packages/components/dialog/src/use-dialog.ts
index 3da94bbc8c741..14533eb18bf3c 100644
--- a/packages/components/dialog/src/use-dialog.ts
+++ b/packages/components/dialog/src/use-dialog.ts
@@ -16,7 +16,7 @@ import {
   useZIndex,
 } from '@element-plus/hooks'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { isNumber } from '@element-plus/utils'
+import { addUnit } from '@element-plus/utils'
 
 import type { CSSProperties, Ref, SetupContext } from 'vue'
 import type { DialogEmits, DialogProps } from './dialog'
@@ -40,10 +40,6 @@ export const useDialog = (
   let openTimer: (() => void) | undefined = undefined
   let closeTimer: (() => void) | undefined = undefined
 
-  const normalizeWidth = computed(() =>
-    isNumber(props.width) ? `${props.width}px` : props.width
-  )
-
   const namespace = useGlobalConfig('namespace', defaultNamespace)
 
   const style = computed<CSSProperties>(() => {
@@ -54,7 +50,7 @@ export const useDialog = (
         style[`${varPrefix}-margin-top`] = props.top
       }
       if (props.width) {
-        style[`${varPrefix}-width`] = normalizeWidth.value
+        style[`${varPrefix}-width`] = addUnit(props.width)
       }
     }
     return style

From 10cad1d0726d263771a352e2890039d72cd9e7ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sat, 18 Jun 2022 13:48:02 +0800
Subject: [PATCH 04/48] refactor(components): [switch] deprecate value prop
 (#8335)

---
 packages/components/switch/src/switch.vue | 26 +++++++++++++++++++++--
 packages/hooks/use-deprecated/index.ts    |  4 ++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/components/switch/src/switch.vue b/packages/components/switch/src/switch.vue
index 5a964d983508e..98e6940621db0 100644
--- a/packages/components/switch/src/switch.vue
+++ b/packages/components/switch/src/switch.vue
@@ -83,7 +83,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
 import { isPromise } from '@vue/shared'
 import { addUnit, debugWarn, isBoolean, throwError } from '@element-plus/utils'
 import ElIcon from '@element-plus/components/icon'
@@ -94,6 +102,7 @@ import {
   UPDATE_MODEL_EVENT,
 } from '@element-plus/constants'
 import {
+  useDeprecated,
   useDisabled,
   useFormItem,
   useFormItemInputId,
@@ -114,15 +123,28 @@ export default defineComponent({
   emits: switchEmits,
 
   setup(props, { emit }) {
+    const vm = getCurrentInstance()!
     const { formItem } = useFormItem()
+    const switchSize = useSize()
     const switchDisabled = useDisabled(computed(() => props.loading))
     const ns = useNamespace('switch')
 
+    useDeprecated(
+      {
+        from: '"value"',
+        replacement: '"model-value" or "v-model"',
+        scope: COMPONENT_NAME,
+        version: '2.3.0',
+        ref: 'https://element-plus.org/en-US/component/switch.html#attributes',
+        type: 'Attribute',
+      },
+      computed(() => !!vm.vnode.props?.value)
+    )
+
     const { inputId } = useFormItemInputId(props, {
       formItemContext: formItem,
     })
 
-    const switchSize = useSize()
     const isModelValue = ref(props.modelValue !== false)
     const input = ref<HTMLInputElement>()
     const core = ref<HTMLSpanElement>()
diff --git a/packages/hooks/use-deprecated/index.ts b/packages/hooks/use-deprecated/index.ts
index 59e6f7bd09d0b..09dcd711601ff 100644
--- a/packages/hooks/use-deprecated/index.ts
+++ b/packages/hooks/use-deprecated/index.ts
@@ -9,7 +9,7 @@ type DeprecationParam = {
   scope: string
   version: string
   ref: string
-  type?: 'API' | 'Slot' | 'Event'
+  type?: 'API' | 'Attribute' | 'Event' | 'Slot'
 }
 
 export const useDeprecated = (
@@ -22,7 +22,7 @@ export const useDeprecated = (
       if (val) {
         debugWarn(
           scope,
-          `${type} ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.
+          `[${type}] ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.
 For more detail, please visit: ${ref}
 `
         )

From 85226512e13945c04b689c1a91db61d5976b38a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sat, 18 Jun 2022 13:48:27 +0800
Subject: [PATCH 05/48] refactor(components): [upload] use JSX in Unit test
 (#8268)

---
 .../{upload.test.ts => upload.test.tsx}       | 148 +++++++-----------
 1 file changed, 59 insertions(+), 89 deletions(-)
 rename packages/components/upload/__tests__/{upload.test.ts => upload.test.tsx} (60%)

diff --git a/packages/components/upload/__tests__/upload.test.ts b/packages/components/upload/__tests__/upload.test.tsx
similarity index 60%
rename from packages/components/upload/__tests__/upload.test.ts
rename to packages/components/upload/__tests__/upload.test.tsx
index 30b9ef04f962c..111c4c9a39eec 100644
--- a/packages/components/upload/__tests__/upload.test.ts
+++ b/packages/components/upload/__tests__/upload.test.tsx
@@ -1,87 +1,59 @@
-import { computed, defineComponent, h, nextTick, provide } from 'vue'
-import { flushPromises } from '@vue/test-utils'
-import { describe, expect, test, vi } from 'vitest'
-import makeMount from '@element-plus/test-utils/make-mount'
-import { on } from '@element-plus/utils'
-import { EVENT_CODE } from '@element-plus/constants'
+import { nextTick, ref } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, test, vi } from 'vitest'
 
-import { uploadContextKey } from '@element-plus/tokens'
+import { EVENT_CODE } from '@element-plus/constants'
+import Upload from '../src/upload.vue'
 import UploadContent from '../src/upload-content.vue'
 
 const AXIOM = 'Rem is the best girl'
-const action = 'test-action'
 
-const mockGetFile = (element: HTMLInputElement, files: File[]) => {
-  Object.defineProperty(element, 'files', {
-    get() {
-      return files
-    },
-  })
-}
-
-const Wrapper = defineComponent({
-  props: {
-    action: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props, { slots }) {
-    provide(uploadContextKey, { accept: computed(() => 'video/*') })
-    return () => h(UploadContent, props, slots)
-  },
-})
-
-const mount = makeMount(Wrapper, {
-  props: {
-    action,
-  },
-  slots: {
-    default: () => AXIOM,
-  },
-})
+const mockGetFile = (element: HTMLInputElement, files: File[]) =>
+  vi.spyOn(element, 'files', 'get').mockImplementation((): any => files)
 
 describe('<upload />', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
   describe('render test', () => {
     test('basic rendering', async () => {
-      const wrapper = mount()
+      const drag = ref(false)
+      const wrapper = mount(() => <Upload drag={drag.value}>{AXIOM}</Upload>)
       expect(wrapper.text()).toEqual(AXIOM)
-      await wrapper.setProps({
-        drag: true,
-      })
 
+      drag.value = true
+      await nextTick()
       expect(wrapper.find('.el-upload-dragger').exists()).toBe(true)
     })
   })
 
   describe('functionality', () => {
     test('works with keydown & click', async () => {
-      const wrapper = mount()
+      const wrapper = mount(() => <UploadContent />)
 
-      const click = vi.fn()
-      on(wrapper.find('input').element, 'click', click)
+      const onClick = vi.fn()
+      wrapper.find('input').element.addEventListener('click', onClick)
 
       await wrapper.trigger('click')
-      expect(click).toHaveBeenCalled()
+      expect(onClick).toHaveBeenCalled()
+
       await wrapper.trigger('keydown', {
         key: EVENT_CODE.enter,
       })
-      expect(click).toHaveBeenCalledTimes(2)
+      expect(onClick).toHaveBeenCalledTimes(2)
 
       await wrapper.trigger('keydown', {
         key: EVENT_CODE.space,
       })
-      expect(click).toHaveBeenCalledTimes(3)
+      expect(onClick).toHaveBeenCalledTimes(3)
     })
 
     test('works when upload file exceeds the limit', async () => {
       const onExceed = vi.fn()
-      const wrapper = mount({
-        props: {
-          onExceed,
-          limit: 1,
-        },
-      })
+      const wrapper = mount(() => (
+        <UploadContent onExceed={onExceed} limit={1} />
+      ))
       const fileList = [
         new File(['content'], 'test-file.txt'),
         new File(['content'], 'test-file.txt'),
@@ -94,14 +66,11 @@ describe('<upload />', () => {
 
     test('onStart works', async () => {
       const onStart = vi.fn()
-      const wrapper = mount({
-        props: {
-          onStart,
-          autoUpload: false, // prevent auto upload
-        },
-      })
-      const fileList = [new File(['content'], 'test-file.txt')]
+      const wrapper = mount(() => (
+        <UploadContent onStart={onStart} autoUpload={false} />
+      ))
 
+      const fileList = [new File(['content'], 'test-file.txt')]
       mockGetFile(wrapper.find('input').element, fileList)
       await wrapper.find('input').trigger('change')
 
@@ -111,15 +80,12 @@ describe('<upload />', () => {
     test('beforeUpload works for rejecting upload', async () => {
       const beforeUpload = vi.fn(() => Promise.reject())
       const onRemove = vi.fn()
-      const wrapper = mount({
-        props: {
-          beforeUpload,
-          onRemove,
-        },
-      })
+      const wrapper = mount(() => (
+        <UploadContent beforeUpload={beforeUpload} onRemove={onRemove} />
+      ))
       const fileList = [new File(['content'], 'test-file.txt')]
-
       mockGetFile(wrapper.find('input').element, fileList)
+
       await wrapper.find('input').trigger('change')
 
       expect(beforeUpload).toHaveBeenCalled()
@@ -129,33 +95,39 @@ describe('<upload />', () => {
 
     test('beforeUpload works for resolving upload', async () => {
       const beforeUpload = vi.fn(() => Promise.resolve())
-      const httpRequest = vi.fn(() => Promise.resolve())
+      const httpRequest = ref(vi.fn(() => Promise.resolve()))
       const onSuccess = vi.fn()
+      const onError = vi.fn()
 
-      const wrapper = mount({
-        props: {
-          beforeUpload,
-          httpRequest,
-          onSuccess,
-        },
-      })
-      const fileList = [new File(['content'], 'test-file.txt')]
+      const wrapper = mount(() => (
+        <UploadContent
+          beforeUpload={beforeUpload}
+          httpRequest={httpRequest.value}
+          onSuccess={onSuccess}
+          onError={onError}
+        />
+      ))
 
+      const fileList = [new File(['content'], 'test-file.txt')]
       mockGetFile(wrapper.find('input').element, fileList)
+
       await wrapper.find('input').trigger('change')
 
       expect(beforeUpload).toHaveBeenCalled()
       await flushPromises()
-
       expect(onSuccess).toHaveBeenCalled()
+      expect(onError).not.toHaveBeenCalled()
+
+      vi.clearAllMocks()
+
+      httpRequest.value = vi.fn(() => Promise.reject())
+      await nextTick()
 
-      const onError = vi.fn()
-      await wrapper.setProps({
-        httpRequest: vi.fn(() => Promise.reject()),
-        onError,
-      })
       await wrapper.find('input').trigger('change')
+
+      expect(beforeUpload).toHaveBeenCalled()
       await flushPromises()
+      expect(onSuccess).not.toHaveBeenCalled()
       expect(onError).toHaveBeenCalled()
     })
 
@@ -165,15 +137,13 @@ describe('<upload />', () => {
         onProgress()
         return Promise.resolve()
       })
-      const wrapper = mount({
-        props: {
-          httpRequest,
-          onProgress,
-        },
-      })
-      const fileList = [new File(['content'], 'test-file.txt')]
+      const wrapper = mount(
+        <UploadContent httpRequest={httpRequest} onProgress={onProgress} />
+      )
 
+      const fileList = [new File(['content'], 'test-file.txt')]
       mockGetFile(wrapper.find('input').element, fileList)
+
       await wrapper.find('input').trigger('change')
       await nextTick()
       expect(onProgress).toHaveBeenCalled()

From d536b7cb7aea1d3f9b0c0d690be8e581c6e1f9f5 Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Sat, 18 Jun 2022 18:38:15 +0800
Subject: [PATCH 06/48] fix(components): [select] collapse-tags-tooltip drop
 first item (#8344)

* fix(components): [select] collapse-tag-tooltip drop first item

* fix(components): [select] collapse-tags-tooltip drop first item test
---
 packages/components/select-v2/__tests__/select.test.ts | 2 +-
 packages/components/select-v2/src/select.vue           | 4 +++-
 packages/components/select/__tests__/select.test.ts    | 4 ++--
 packages/components/select/src/select.vue              | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/components/select-v2/__tests__/select.test.ts b/packages/components/select-v2/__tests__/select.test.ts
index ce28718213b5e..092e73885ec31 100644
--- a/packages/components/select-v2/__tests__/select.test.ts
+++ b/packages/components/select-v2/__tests__/select.test.ts
@@ -651,7 +651,7 @@ describe('Select', () => {
       options[2].click()
       await nextTick()
       expect(vm.value.length).toBe(3)
-      expect(wrapper.findAll('.el-tag')[4].element.textContent).toBe('c2')
+      expect(wrapper.findAll('.el-tag')[3].element.textContent).toBe('c2')
     })
   })
 
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index 0a230963fce5f..8c7695a5d3c6b 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -86,7 +86,9 @@
                     <template #content>
                       <div :class="nsSelectV2.e('selection')">
                         <div
-                          v-for="(selected, idx) in states.cachedOptions"
+                          v-for="(selected, idx) in states.cachedOptions.slice(
+                            1
+                          )"
                           :key="idx"
                           :class="nsSelectV2.e('selected-item')"
                         >
diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts
index bc64d4c13681b..ffe1796f0c5f7 100644
--- a/packages/components/select/__tests__/select.test.ts
+++ b/packages/components/select/__tests__/select.test.ts
@@ -1074,8 +1074,8 @@ describe('Select', () => {
     const triggerWrappers = wrapper.findAll('.el-tooltip__trigger')
     expect(triggerWrappers[0]).toBeDefined()
     const tags = wrapper.findAll('.el-select__tags-text')
-    expect(tags.length).toBe(5)
-    expect(tags[4].element.textContent).toBe('蚵仔煎')
+    expect(tags.length).toBe(4)
+    expect(tags[3].element.textContent).toBe('蚵仔煎')
   })
 
   test('multiple remove-tag', async () => {
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 75340a43cc5e9..a821cf3021a19 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -73,7 +73,7 @@
                   <template #content>
                     <div :class="nsSelect.e('collapse-tags')">
                       <div
-                        v-for="(item, idx) in selected"
+                        v-for="(item, idx) in selected.slice(1)"
                         :key="idx"
                         :class="nsSelect.e('collapse-tag')"
                       >

From 9da7564856e1003fc811bd0e9788a6a50d482701 Mon Sep 17 00:00:00 2001
From: LinZhanMing <60056876+LinZhanMing@users.noreply.github.com>
Date: Sun, 19 Jun 2022 12:02:10 +0800
Subject: [PATCH 07/48] fix(components): [message-box] the focus error when
 used ElMessageBox (#8336)

* fix: issue #8292 MessageBox Customization error focus

* perf: boxType exclude prompt
---
 packages/components/message-box/src/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue
index 85982ad27830b..85f8c81b7b806 100644
--- a/packages/components/message-box/src/index.vue
+++ b/packages/components/message-box/src/index.vue
@@ -335,7 +335,7 @@ export default defineComponent({
       () => visible.value,
       (val) => {
         if (val) {
-          if (props.boxType === 'alert' || props.boxType === 'confirm') {
+          if (props.boxType !== 'prompt') {
             focusStartRef.value = confirmRef.value?.$el ?? rootRef.value
           }
           state.zIndex = nextZIndex()

From bc230e5c234bad03a5161bce21103228e4f2b514 Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Sun, 19 Jun 2022 23:32:20 +0800
Subject: [PATCH 08/48] fix(components): [autocomplete] the popup still appears
 after select (#8350)

---
 .../autocomplete/src/autocomplete.vue         | 52 +++++++++++++++----
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/packages/components/autocomplete/src/autocomplete.vue b/packages/components/autocomplete/src/autocomplete.vue
index ddcceab278e59..663ffbe79700b 100644
--- a/packages/components/autocomplete/src/autocomplete.vue
+++ b/packages/components/autocomplete/src/autocomplete.vue
@@ -14,6 +14,8 @@
     :transition="`${ns.namespace.value}-zoom-in-top`"
     persistent
     @before-show="onSuggestionShow"
+    @show="onShow"
+    @hide="onHide"
   >
     <div
       ref="listboxRef"
@@ -38,6 +40,7 @@
         @keydown.enter="handleKeyEnter"
         @keydown.tab="close"
         @keydown.esc="handleKeyEscape"
+        @mousedown="handleMouseDown"
       >
         <template v-if="$slots.prepend" #prepend>
           <slot name="prepend" />
@@ -100,7 +103,7 @@ import {
 import { debounce } from 'lodash-unified'
 import { onClickOutside } from '@vueuse/core'
 import { Loading } from '@element-plus/icons-vue'
-import { useAttrs, useNamespace } from '@element-plus/hooks'
+import { useAttrs, useDisabled, useNamespace } from '@element-plus/hooks'
 import { generateId, isArray, throwError } from '@element-plus/utils'
 import {
   CHANGE_EVENT,
@@ -130,6 +133,7 @@ const emit = defineEmits(autocompleteEmits)
 
 const attrs = useAttrs()
 const rawAttrs = useRawAttrs()
+const disabled = useDisabled()
 const ns = useNamespace('autocomplete')
 
 const inputRef = ref<InputInstance>()
@@ -137,7 +141,7 @@ const regionRef = ref<HTMLElement>()
 const popperRef = ref<TooltipInstance>()
 const listboxRef = ref<HTMLElement>()
 
-let isClear = false
+let ignoreFocusEvent = false
 const suggestions = ref<AutocompleteData>([])
 const highlightedIndex = ref(-1)
 const dropdownWidth = ref('')
@@ -155,6 +159,15 @@ const suggestionVisible = computed(() => {
 
 const suggestionLoading = computed(() => !props.hideLoading && loading.value)
 
+const refInput = computed<HTMLInputElement[]>(() => {
+  if (inputRef.value) {
+    return Array.from<HTMLInputElement>(
+      inputRef.value.$el.querySelectorAll('input')
+    )
+  }
+  return []
+})
+
 const onSuggestionShow = async () => {
   await nextTick()
   if (suggestionVisible.value) {
@@ -162,6 +175,15 @@ const onSuggestionShow = async () => {
   }
 }
 
+const onShow = () => {
+  ignoreFocusEvent = true
+}
+
+const onHide = () => {
+  ignoreFocusEvent = false
+  highlightedIndex.value = -1
+}
+
 const getData = async (queryString: string) => {
   if (suggestionDisabled.value) return
 
@@ -194,24 +216,34 @@ const handleInput = (value: string) => {
   emit(UPDATE_MODEL_EVENT, value)
 
   suggestionDisabled.value = false
-  activated.value ||= isClear && valuePresented
+  activated.value ||= valuePresented
 
   if (!props.triggerOnFocus && !value) {
     suggestionDisabled.value = true
     suggestions.value = []
     return
   }
-  if (isClear && valuePresented) {
-    isClear = false
-  }
+
   debouncedGetData(value)
 }
 
+const handleMouseDown = (event: MouseEvent) => {
+  if (disabled.value) return
+  if (
+    (event.target as HTMLElement)?.tagName !== 'INPUT' ||
+    refInput.value.includes(document.activeElement as HTMLInputElement)
+  ) {
+    activated.value = true
+  }
+}
+
 const handleChange = (value: string) => {
   emit(CHANGE_EVENT, value)
 }
 
 const handleFocus = (evt: FocusEvent) => {
+  if (ignoreFocusEvent) return
+
   activated.value = true
   emit('focus', evt)
   if (props.triggerOnFocus) {
@@ -220,12 +252,12 @@ const handleFocus = (evt: FocusEvent) => {
 }
 
 const handleBlur = (evt: FocusEvent) => {
+  if (ignoreFocusEvent) return
   emit('blur', evt)
 }
 
 const handleClear = () => {
   activated.value = false
-  isClear = true
   emit(UPDATE_MODEL_EVENT, '')
   emit('clear')
 }
@@ -239,7 +271,6 @@ const handleKeyEnter = async () => {
     handleSelect(suggestions.value[highlightedIndex.value])
   } else if (props.selectWhenUnmatched) {
     emit('select', { value: props.modelValue })
-    await nextTick()
     suggestions.value = []
     highlightedIndex.value = -1
   }
@@ -265,7 +296,6 @@ const handleSelect = async (item: any) => {
   emit(INPUT_EVENT, item[props.valueKey])
   emit(UPDATE_MODEL_EVENT, item[props.valueKey])
   emit('select', item)
-  await nextTick()
   suggestions.value = []
   highlightedIndex.value = -1
 }
@@ -305,7 +335,9 @@ const highlight = (index: number) => {
   )
 }
 
-onClickOutside(listboxRef, close)
+onClickOutside(listboxRef, () => {
+  suggestionVisible.value && close()
+})
 
 onMounted(() => {
   // TODO: use Volar generate dts to fix it.

From 40fa4a4b3e541cee71272e68efac19a963b6f085 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=ED=95=9C=EA=B2=BD?= <hangyeong.ryu@gmail.com>
Date: Tue, 21 Jun 2022 03:01:22 +0900
Subject: [PATCH 09/48] refactor(components): [descriptions] use JSX in Unit
 test (#8351)

---
 .../__tests__/descriptions.test.ts            | 204 ------------------
 .../__tests__/descriptions.test.tsx           | 193 +++++++++++++++++
 2 files changed, 193 insertions(+), 204 deletions(-)
 delete mode 100644 packages/components/descriptions/__tests__/descriptions.test.ts
 create mode 100644 packages/components/descriptions/__tests__/descriptions.test.tsx

diff --git a/packages/components/descriptions/__tests__/descriptions.test.ts b/packages/components/descriptions/__tests__/descriptions.test.ts
deleted file mode 100644
index 12db89e3bf3ed..0000000000000
--- a/packages/components/descriptions/__tests__/descriptions.test.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-import { nextTick } from 'vue'
-import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import ElTag from '@element-plus/components/tag'
-import Descriptions from '../src/index.vue'
-import DescriptionsItem from '../src/description-item'
-
-const _mount = (template: string, data?: () => void, methods?: any) =>
-  mount({
-    components: {
-      'el-descriptions': Descriptions,
-      'el-descriptions-item': DescriptionsItem,
-      'el-tag': ElTag,
-    },
-    template,
-    data,
-    methods,
-  })
-
-describe('Descriptions.vue', () => {
-  test('render test', () => {
-    const wrapper = _mount(`
-      <el-descriptions title="title" extra="extra">
-        <el-descriptions-item v-for="item in 4"></el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
-    expect(wrapper.find('.el-descriptions__extra').text()).toEqual('extra')
-    expect(wrapper.findAll('.el-descriptions__label').length).toEqual(4)
-  })
-
-  test('should render border props', () => {
-    const wrapper = _mount(`
-      <el-descriptions border>
-        <el-descriptions-item v-for="item in 3" :label="item">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.find('table').classes()).toContain('is-bordered')
-  })
-
-  test('should render align props', () => {
-    const wrapper = _mount(`
-      <el-descriptions border>
-        <el-descriptions-item v-for="item in 3" :label="item" align="right" label-align="center">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.find('.el-descriptions__label').classes()).toContain(
-      'is-center'
-    )
-    expect(wrapper.find('.el-descriptions__content').classes()).toContain(
-      'is-right'
-    )
-  })
-
-  test('should render width props', () => {
-    const wrapper = _mount(`
-      <el-descriptions border>
-        <el-descriptions-item v-for="item in 3" :label="item" width="50px" min-width="60px">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(
-      wrapper.find('.el-descriptions__label').attributes('style')
-    ).toContain('width: 50px; min-width: 60px;')
-    expect(
-      wrapper.find('.el-descriptions__content').attributes('style')
-    ).toContain('width: 50px; min-width: 60px;')
-  })
-
-  test('should render class props', () => {
-    const wrapper = _mount(`
-      <el-descriptions border>
-        <el-descriptions-item v-for="item in 3" :label="item" class-name="class-name" label-class-name="label-class-name">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.find('.el-descriptions__label').classes()).toContain(
-      'label-class-name'
-    )
-    expect(wrapper.find('.el-descriptions__content').classes()).toContain(
-      'class-name'
-    )
-  })
-
-  test('should render width props', () => {
-    const wrapper = _mount(`
-      <el-descriptions border>
-        <el-descriptions-item v-for="item in 3" :label="item" width="50px" min-width="60px">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(
-      wrapper.find('.el-descriptions__label').attributes('style')
-    ).toContain('width: 50px; min-width: 60px;')
-    expect(
-      wrapper.find('.el-descriptions__content').attributes('style')
-    ).toContain('width: 50px; min-width: 60px;')
-  })
-
-  test('should render column props', async () => {
-    const wrapper = _mount(
-      `
-      <el-descriptions :column="5" :border="border">
-        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `,
-      () => {
-        return {
-          border: false,
-        }
-      }
-    )
-
-    expect(wrapper.find('tr').element.children.length).toEqual(5)
-    wrapper.vm.border = true
-    await nextTick()
-    expect(wrapper.find('tr').element.children.length).toEqual(10)
-  })
-
-  test('should render direction props', async () => {
-    const wrapper = _mount(
-      `
-      <el-descriptions :column="5" :direction="direction" border>
-        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `,
-      () => {
-        return {
-          direction: 'horizontal',
-        }
-      }
-    )
-
-    expect(wrapper.find('tr').element.children.length).toEqual(10)
-    expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
-      wrapper.findAll('tr')[0].element.children[1].innerHTML
-    )
-    wrapper.vm.direction = 'vertical'
-    await nextTick()
-    expect(wrapper.find('tr').element.children.length).toEqual(5)
-    expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
-      wrapper.findAll('tr')[1].element.children[0].innerHTML
-    )
-  })
-
-  test('should render title slots', async () => {
-    const wrapper = _mount(`
-      <el-descriptions>
-        <template #title>title</template>
-        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
-  })
-
-  test('should render span props', async () => {
-    const wrapper = _mount(`
-      <el-descriptions :column="3">
-        <el-descriptions-item label="1">1</el-descriptions-item>
-        <el-descriptions-item label="2" :span="2">2</el-descriptions-item>
-        <el-descriptions-item label="3">3</el-descriptions-item>
-        <el-descriptions-item label="4">4</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual(
-      '2'
-    )
-    expect(wrapper.findAll('td')[3].element.getAttribute('colSpan')).toEqual(
-      '2'
-    )
-  })
-
-  test('re-rendered when slots is updated', async () => {
-    const CHANGE_VALUE = 'company'
-    const wrapper = _mount(
-      `
-      <el-descriptions v-for="(remark,index) in remarks" :key="index" :title="remark">
-        <el-descriptions-item label="remark">
-          <el-tag size="small">{{remark}}</el-tag>
-        </el-descriptions-item>
-      </el-descriptions>
-      <button @click="onClick">click</button>
-    `,
-      () => {
-        return {
-          remarks: ['school', 'hospital'],
-        }
-      },
-      {
-        onClick() {
-          this.remarks[0] = CHANGE_VALUE
-        },
-      }
-    )
-    wrapper.find('button').trigger('click')
-    await nextTick()
-    expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
-  })
-})
diff --git a/packages/components/descriptions/__tests__/descriptions.test.tsx b/packages/components/descriptions/__tests__/descriptions.test.tsx
new file mode 100644
index 0000000000000..9232b12b8b622
--- /dev/null
+++ b/packages/components/descriptions/__tests__/descriptions.test.tsx
@@ -0,0 +1,193 @@
+import { nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
+import ElTag from '@element-plus/components/tag'
+import ElDescriptions from '../src/index.vue'
+import ElDescriptionsItem from '../src/description-item'
+
+describe('Descriptions.vue', () => {
+  test('render test', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions title="title" extra="extra">
+        {Array.from({ length: 4 }).map(() => (
+          <ElDescriptionsItem />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
+    expect(wrapper.find('.el-descriptions__extra').text()).toEqual('extra')
+    expect(wrapper.findAll('.el-descriptions__label').length).toEqual(4)
+  })
+
+  test('should render border props', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions border>
+        <ElDescriptionsItem />
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('table').classes()).toContain('is-bordered')
+  })
+
+  test('should render align props', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions border>
+        {Array.from({ length: 3 }).map(() => (
+          <ElDescriptionsItem align="right" labelAlign="center" />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('.el-descriptions__label').classes()).toContain(
+      'is-center'
+    )
+    expect(wrapper.find('.el-descriptions__content').classes()).toContain(
+      'is-right'
+    )
+  })
+
+  test('should render width props', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions border>
+        {Array.from({ length: 3 }).map(() => (
+          <ElDescriptionsItem width="50px" min-width="60px" />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(
+      wrapper.find('.el-descriptions__label').attributes('style')
+    ).toContain('width: 50px; min-width: 60px;')
+    expect(
+      wrapper.find('.el-descriptions__content').attributes('style')
+    ).toContain('width: 50px; min-width: 60px;')
+  })
+
+  test('should render class props', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions border>
+        {Array.from({ length: 3 }).map(() => (
+          <ElDescriptionsItem
+            class-name="class-name"
+            label-class-name="label-class-name"
+          />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('.el-descriptions__label').classes()).toContain(
+      'label-class-name'
+    )
+    expect(wrapper.find('.el-descriptions__content').classes()).toContain(
+      'class-name'
+    )
+  })
+
+  test('should render column props', async () => {
+    const border = ref(false)
+
+    const wrapper = mount(() => (
+      <ElDescriptions column={5} border={border.value}>
+        {Array.from({ length: 10 }).map(() => (
+          <ElDescriptionsItem />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('tr').element.children.length).toEqual(5)
+
+    border.value = true
+
+    await nextTick()
+
+    expect(wrapper.find('tr').element.children.length).toEqual(10)
+  })
+
+  test('should render direction props', async () => {
+    const direction = ref('horizontal')
+
+    const wrapper = mount(() => (
+      <ElDescriptions column={5} direction={direction.value} border>
+        {Array.from({ length: 10 }).map((item) => (
+          <ElDescriptionsItem label={String(item)}>
+            {String(item)}
+          </ElDescriptionsItem>
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('tr').element.children.length).toEqual(10)
+    expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
+      wrapper.findAll('tr')[0].element.children[1].innerHTML
+    )
+
+    direction.value = 'vertical'
+    await nextTick()
+
+    expect(wrapper.find('tr').element.children.length).toEqual(5)
+    expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
+      wrapper.findAll('tr')[1].element.children[0].innerHTML
+    )
+  })
+
+  test('should render title slots', async () => {
+    const wrapper = mount(() => (
+      <ElDescriptions
+        v-slots={{
+          title: () => 'title',
+          default: () =>
+            Array.from({ length: 10 }).map(() => <ElDescriptionsItem />),
+        }}
+      ></ElDescriptions>
+    ))
+
+    expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
+  })
+
+  test('should render span props', async () => {
+    const wrapper = mount(() => (
+      <ElDescriptions>
+        <ElDescriptionsItem label="1">1</ElDescriptionsItem>
+        <ElDescriptionsItem label="2" span={2}>
+          2
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="3">3</ElDescriptionsItem>
+        <ElDescriptionsItem label="4">4</ElDescriptionsItem>
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual(
+      '2'
+    )
+    expect(wrapper.findAll('td')[3].element.getAttribute('colSpan')).toEqual(
+      '2'
+    )
+  })
+
+  test('re-rendered when slots is updated', async () => {
+    const CHANGE_VALUE = 'company'
+    const remarks = ref(['school', 'hospital'])
+
+    const onClick = () => {
+      remarks.value[0] = CHANGE_VALUE
+    }
+
+    const wrapper = mount(() => (
+      <>
+        {remarks.value.map((remark, index) => (
+          <ElDescriptions key={index} title={remark}>
+            <ElDescriptionsItem label={remark}>
+              <ElTag size="small">{remark}</ElTag>
+            </ElDescriptionsItem>
+          </ElDescriptions>
+        ))}
+        <button onClick={onClick}>click</button>
+      </>
+    ))
+
+    wrapper.find('button').trigger('click')
+    await nextTick()
+    expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
+  })
+})

From 3db3d62c542c9e66de8b8a2a818a2823a4b9a8c2 Mon Sep 17 00:00:00 2001
From: l1m2e <62976143+l1m2e@users.noreply.github.com>
Date: Tue, 21 Jun 2022 17:40:04 +0800
Subject: [PATCH 10/48] docs: add gaussian blur to the navigation bar (#8376)

---
 docs/.vitepress/vitepress/styles/css-vars.scss | 3 +++
 docs/.vitepress/vitepress/styles/navbar.scss   | 8 +++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/vitepress/styles/css-vars.scss b/docs/.vitepress/vitepress/styles/css-vars.scss
index 32fb45bcaafac..22ee70b978caf 100644
--- a/docs/.vitepress/vitepress/styles/css-vars.scss
+++ b/docs/.vitepress/vitepress/styles/css-vars.scss
@@ -1,4 +1,5 @@
 @use './mixins' as *;
+
 // css variables
 :root {
   // layouts
@@ -14,6 +15,7 @@
   --bg-brand-color: var(--el-color-primary-light-9);
 
   --bg-color: var(--el-bg-color);
+  --bg-color-filter: #ffffffb3;
   --bg-color-soft: #fafafa;
   --bg-color-mute: #f2f2f2;
   --border-color: var(--el-border-color);
@@ -77,4 +79,5 @@
 .dark {
   --bg-color-soft: #242424;
   --bg-color-mute: #2c2c2c;
+  --bg-color-filter: #141414b3;
 }
diff --git a/docs/.vitepress/vitepress/styles/navbar.scss b/docs/.vitepress/vitepress/styles/navbar.scss
index 04fbd74b1bc28..04c6ac36f5942 100644
--- a/docs/.vitepress/vitepress/styles/navbar.scss
+++ b/docs/.vitepress/vitepress/styles/navbar.scss
@@ -8,8 +8,11 @@
   @include with-bg;
   position: relative;
   border-bottom: 1px solid var(--border-color);
-  padding: 0 12px 0 24px;
   height: var(--header-height);
+  padding: 0 12px 0 24px;
+  backdrop-filter: saturate(50%) blur(8px);
+  background: var(--bg-color-filter);
+  -webkit-backdrop-filter: saturate(50%) blur(8px);
   top: 0;
 
   @include respond-to('md') {
@@ -54,6 +57,7 @@
   left: 0;
   position: relative;
   z-index: var(--nav-z-index);
+
   @include respond-to('lg') {
     position: fixed;
     width: 100%;
@@ -63,9 +67,11 @@
 .menu + .appearance {
   margin-left: 8px;
 }
+
 .menu + .social-links {
   margin-left: 12px;
 }
+
 .appearance + .social-links {
   margin-left: 12px;
 }

From 786360b7ddd2c72abace649e3c6c63d8aab4b885 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Tue, 21 Jun 2022 19:50:16 +0800
Subject: [PATCH 11/48] refactor(components): [message] fix typings and switch
 to script setup (#8378)

---
 internal/build/src/type-unsafe-stricter.json  |   1 -
 .../__tests__/message-manager.test.tsx        |   2 +-
 .../message/__tests__/message.test.ts         |   6 +-
 .../components/message/src/message-method.ts  | 269 +++++++++---------
 packages/components/message/src/message.ts    |  94 ++++--
 packages/components/message/src/message.vue   | 164 +++++------
 6 files changed, 281 insertions(+), 255 deletions(-)

diff --git a/internal/build/src/type-unsafe-stricter.json b/internal/build/src/type-unsafe-stricter.json
index 5922df6cde9f8..ffe35540ad8fc 100644
--- a/internal/build/src/type-unsafe-stricter.json
+++ b/internal/build/src/type-unsafe-stricter.json
@@ -15,7 +15,6 @@
   "packages/components/loading/",
   "packages/components/menu/",
   "packages/components/message-box/",
-  "packages/components/message/",
   "packages/components/notification/",
   "packages/components/option-group/",
   "packages/components/option/",
diff --git a/packages/components/message/__tests__/message-manager.test.tsx b/packages/components/message/__tests__/message-manager.test.tsx
index f7dce61f795fe..b3b65ea32a7b9 100644
--- a/packages/components/message/__tests__/message-manager.test.tsx
+++ b/packages/components/message/__tests__/message-manager.test.tsx
@@ -59,7 +59,7 @@ describe('Message on command', () => {
     const getTopValue = (elm: Element): number =>
       Number.parseInt(getStyle(elm as HTMLElement, 'top'), 10)
 
-    const topValues = []
+    const topValues: number[] = []
     elements.forEach((e) => {
       topValues.push(getTopValue(e))
     })
diff --git a/packages/components/message/__tests__/message.test.ts b/packages/components/message/__tests__/message.test.ts
index 59f0934055b14..478f8852064e3 100644
--- a/packages/components/message/__tests__/message.test.ts
+++ b/packages/components/message/__tests__/message.test.ts
@@ -91,10 +91,8 @@ describe('Message.vue', () => {
       const type = 'some-type'
       const wrapper = _mount({ props: { type } })
 
-      for (const key in TypeComponentsMap) {
-        expect(wrapper.findComponent(TypeComponentsMap[key]).exists()).toBe(
-          false
-        )
+      for (const component of Object.values(TypeComponentsMap)) {
+        expect(wrapper.findComponent(component).exists()).toBe(false)
       }
       console.warn = consoleWarn
     })
diff --git a/packages/components/message/src/message-method.ts b/packages/components/message/src/message-method.ts
index 00569abdb8c39..f9f83f82d3299 100644
--- a/packages/components/message/src/message-method.ts
+++ b/packages/components/message/src/message-method.ts
@@ -5,86 +5,46 @@ import {
   isElement,
   isFunction,
   isNumber,
-  isObject,
   isString,
   isVNode,
 } from '@element-plus/utils'
 import { useZIndex } from '@element-plus/hooks'
 import { messageConfig } from '@element-plus/components/config-provider/src/config-provider'
 import MessageConstructor from './message.vue'
-import { messageTypes } from './message'
-
-import type { AppContext, ComponentPublicInstance, VNode } from 'vue'
-import type { Message, MessageFn, MessageProps, MessageQueue } from './message'
+import { messageDefaults, messageTypes } from './message'
+
+import type { AppContext } from 'vue'
+import type {
+  Message,
+  MessageFn,
+  MessageHandler,
+  MessageInstance,
+  MessageOptions,
+  MessageParams,
+  MessageParamsNormalized,
+  MessageQueue,
+  MessageQueueItem,
+} from './message'
 
 const instances: MessageQueue = []
 let seed = 1
 
 // TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.
 
-const message: MessageFn & Partial<Message> & { _context: AppContext | null } =
-  function (options = {}, context?: AppContext | null) {
-    if (!isClient) return { close: () => undefined }
-    if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {
-      return { close: () => undefined }
-    }
+const normalizeOptions = (params?: MessageParams) => {
+  const options: MessageOptions =
+    !params || isString(params) || isVNode(params) || isFunction(params)
+      ? { message: params }
+      : params
 
-    if (
-      !isVNode(options) &&
-      isObject(options) &&
-      options.grouping &&
-      !isVNode(options.message) &&
-      instances.length
-    ) {
-      const tempVm: any = instances.find(
-        (item) =>
-          `${item.vm.props?.message ?? ''}` ===
-          `${(options as any).message ?? ''}`
-      )
-      if (tempVm) {
-        tempVm.vm.component!.props.repeatNum += 1
-        tempVm.vm.component!.props.type = options?.type || 'info'
-        return {
-          close: () =>
-            ((
-              vm.component!.proxy as ComponentPublicInstance<{
-                visible: boolean
-              }>
-            ).visible = false),
-        }
-      }
-    }
+  const normalized = {
+    ...messageDefaults,
+    ...options,
+  }
 
-    if (isString(options) || isVNode(options)) {
-      options = { message: options }
-    }
+  if (isString(normalized.appendTo)) {
+    let appendTo = document.querySelector<HTMLElement>(normalized.appendTo)
 
-    let verticalOffset = options.offset || 20
-    instances.forEach(({ vm }) => {
-      verticalOffset += (vm.el?.offsetHeight || 0) + 16
-    })
-    verticalOffset += 16
-
-    const { nextZIndex } = useZIndex()
-
-    const id = `message_${seed++}`
-    const userOnClose = options.onClose
-    const props: Partial<MessageProps> = {
-      zIndex: nextZIndex(),
-      ...options,
-      offset: verticalOffset,
-      id,
-      onClose: () => {
-        close(id, userOnClose)
-      },
-    }
-
-    let appendTo: HTMLElement | null = document.body
-    if (isElement(options.appendTo)) {
-      appendTo = options.appendTo
-    } else if (isString(options.appendTo)) {
-      appendTo = document.querySelector(options.appendTo)
-    }
     // should fallback to default value with a warning
     if (!isElement(appendTo)) {
       debugWarn(
@@ -94,89 +54,142 @@ const message: MessageFn & Partial<Message> & { _context: AppContext | null } =
       appendTo = document.body
     }
 
-    const container = document.createElement('div')
+    normalized.appendTo = appendTo
+  }
 
-    container.className = `container_${id}`
+  return normalized as MessageParamsNormalized
+}
 
-    const messageContent = props.message
-    const vm = createVNode(
-      MessageConstructor,
-      props,
-      isFunction(messageContent)
-        ? { default: messageContent }
-        : isVNode(messageContent)
-        ? { default: () => messageContent }
-        : null
-    )
+const closeMessage = (instance: MessageQueueItem) => {
+  const idx = instances.indexOf(instance)
+  if (idx === -1) return
 
-    vm.appContext = context || message._context
+  instances.splice(idx, 1)
+  const { vnode, handler } = instance
+  handler.close()
+
+  const removedHeight = vnode.el!.offsetHeight
+  // adjust other instances vertical offset
+  const len = instances.length
+  if (len < 1) return
+  for (let i = idx; i < len; i++) {
+    const pos =
+      Number.parseInt(instances[i].vnode.el!.style['top'], 10) -
+      removedHeight -
+      16
+
+    instances[i].vnode.component!.props.offset = pos
+  }
+}
+
+const createMessage = (
+  { appendTo, ...options }: MessageParamsNormalized,
+  context?: AppContext | null
+): MessageQueueItem => {
+  const { nextZIndex } = useZIndex()
+
+  const id = `message_${seed++}`
+  const userOnClose = options.onClose
+
+  let verticalOffset = options.offset
+  instances.forEach(({ vnode: vm }) => {
+    verticalOffset += (vm.el?.offsetHeight || 0) + 16
+  })
+  verticalOffset += 16
+
+  const container = document.createElement('div')
+
+  const props = {
+    ...options,
+    zIndex: options.zIndex ?? nextZIndex(),
+    offset: verticalOffset,
+    id,
+    onClose: () => {
+      userOnClose?.()
+      closeMessage(instance)
+    },
 
     // clean message element preventing mem leak
-    vm.props!.onDestroy = () => {
-      render(null, container)
+    onDestroy: () => {
       // since the element is destroy, then the VNode should be collected by GC as well
       // we do not want cause any mem leak because we have returned vm as a reference to users
       // so that we manually set it to false.
-    }
-
-    render(vm, container)
-    // instances will remove this item when close function gets called. So we do not need to worry about it.
-    instances.push({ vm })
-    appendTo.appendChild(container.firstElementChild!)
-
-    return {
-      // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle
-      // for out component, so that all closing steps will not be skipped.
-      close: () =>
-        ((
-          vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>
-        ).visible = false),
-    }
+      render(null, container)
+    },
+  }
+  const vnode = createVNode(
+    MessageConstructor,
+    props,
+    isFunction(props.message) || isVNode(props.message)
+      ? { default: props.message }
+      : null
+  )
+  vnode.appContext = context || message._context
+
+  render(vnode, container)
+  // instances will remove this item when close function gets called. So we do not need to worry about it.
+  appendTo.appendChild(container.firstElementChild!)
+
+  const vm = vnode.component!.proxy as MessageInstance
+  const handler: MessageHandler = {
+    // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle
+    // for out component, so that all closing steps will not be skipped.
+    close: () => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore `visible` from defineExpose
+      vm.visible = false
+    },
   }
 
-messageTypes.forEach((type) => {
-  message[type] = (options = {}, appContext?: AppContext | null) => {
-    if (isString(options) || isVNode(options)) {
-      options = {
-        message: options,
-      }
-    }
-    return message(
-      {
-        ...options,
-        type,
-      },
-      appContext
-    )
+  const instance = {
+    vnode,
+    vm,
+    handler,
   }
-})
 
-export function close(id: string, userOnClose?: (vm: VNode) => void): void {
-  const idx = instances.findIndex(({ vm }) => id === vm.component!.props.id)
-  if (idx === -1) return
+  return instance
+}
 
-  const { vm } = instances[idx]
-  if (!vm) return
-  userOnClose?.(vm)
+const message: MessageFn &
+  Partial<Message> & { _context: AppContext | null } = (
+  options = {},
+  context
+) => {
+  if (!isClient) return { close: () => undefined }
 
-  const removedHeight = vm.el!.offsetHeight
-  instances.splice(idx, 1)
+  if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {
+    return { close: () => undefined }
+  }
 
-  // adjust other instances vertical offset
-  const len = instances.length
-  if (len < 1) return
-  for (let i = idx; i < len; i++) {
-    const pos =
-      Number.parseInt(instances[i].vm.el!.style['top'], 10) - removedHeight - 16
+  const normalized = normalizeOptions(options)
 
-    instances[i].vm.component!.props.offset = pos
+  if (normalized.grouping && instances.length) {
+    const instance = instances.find(
+      ({ vnode: vm }) => vm.props?.message === normalized.message
+    )
+    if (instance) {
+      ;(instance.vnode.component as any).props.repeatNum += 1
+      ;(instance.vnode.component as any).props.type = normalized.type
+      return instance.handler
+    }
   }
+
+  const instance = createMessage(normalized, context)
+
+  instances.push(instance)
+  return instance.handler
 }
 
+messageTypes.forEach((type) => {
+  message[type] = (options = {}, appContext) => {
+    const normalized = normalizeOptions(options)
+    return message({ ...normalized, type }, appContext)
+  }
+})
+
 export function closeAll(): void {
-  for (let i = instances.length - 1; i >= 0; i--) {
-    const instance = instances[i].vm.component
-    ;(instance?.proxy as any)?.close()
+  for (const instance of instances) {
+    instance.handler.close()
   }
 }
 
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index b4f90ec84a97e..21546531212b9 100644
--- a/packages/components/message/src/message.ts
+++ b/packages/components/message/src/message.ts
@@ -1,5 +1,13 @@
-import { buildProps, definePropType, iconPropType } from '@element-plus/utils'
+import { isClient } from '@vueuse/core'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+  mutable,
+} from '@element-plus/utils'
 import type { AppContext, ExtractPropTypes, VNode } from 'vue'
+import type { Mutable } from '@element-plus/utils'
+import type MessageConstructor from './message.vue'
 
 export const messageTypes = ['success', 'info', 'warning', 'error'] as const
 
@@ -7,30 +15,48 @@ export interface MessageConfigContext {
   max?: number
 }
 
+export const messageDefaults = mutable({
+  customClass: '',
+  center: false,
+  dangerouslyUseHTMLString: false,
+  duration: 3000,
+  icon: '',
+  id: '',
+  message: '',
+  onClose: undefined,
+  showClose: false,
+  type: 'info',
+  offset: 20,
+  zIndex: 0,
+  grouping: false,
+  repeatNum: 1,
+  appendTo: isClient ? document.body : (undefined as never),
+} as const)
+
 export const messageProps = buildProps({
   customClass: {
     type: String,
-    default: '',
+    default: messageDefaults.customClass,
   },
   center: {
     type: Boolean,
-    default: false,
+    default: messageDefaults.center,
   },
   dangerouslyUseHTMLString: {
     type: Boolean,
-    default: false,
+    default: messageDefaults.dangerouslyUseHTMLString,
   },
   duration: {
     type: Number,
-    default: 3000,
+    default: messageDefaults.duration,
   },
   icon: {
     type: iconPropType,
-    default: '',
+    default: messageDefaults.icon,
   },
   id: {
     type: String,
-    default: '',
+    default: messageDefaults.id,
   },
   message: {
     type: definePropType<string | VNode | (() => VNode)>([
@@ -38,7 +64,7 @@ export const messageProps = buildProps({
       Object,
       Function,
     ]),
-    default: '',
+    default: messageDefaults.message,
   },
   onClose: {
     type: definePropType<() => void>(Function),
@@ -46,28 +72,28 @@ export const messageProps = buildProps({
   },
   showClose: {
     type: Boolean,
-    default: false,
+    default: messageDefaults.showClose,
   },
   type: {
     type: String,
     values: messageTypes,
-    default: 'info',
+    default: messageDefaults.type,
   },
   offset: {
     type: Number,
-    default: 20,
+    default: messageDefaults.offset,
   },
   zIndex: {
     type: Number,
-    default: 0,
+    default: messageDefaults.zIndex,
   },
   grouping: {
     type: Boolean,
-    default: false,
+    default: messageDefaults.grouping,
   },
   repeatNum: {
     type: Number,
-    default: 1,
+    default: messageDefaults.repeatNum,
   },
 } as const)
 export type MessageProps = ExtractPropTypes<typeof messageProps>
@@ -77,28 +103,36 @@ export const messageEmits = {
 }
 export type MessageEmits = typeof messageEmits
 
-export type MessageOptions = Omit<MessageProps, 'id'> & {
-  appendTo?: HTMLElement | string
+export type MessageInstance = InstanceType<typeof MessageConstructor>
+
+export type MessageOptions = Partial<
+  Mutable<
+    Omit<MessageProps, 'id'> & {
+      appendTo?: HTMLElement | string
+    }
+  >
+>
+export type MessageParams = MessageOptions | MessageOptions['message']
+export type MessageParamsNormalized = Omit<MessageProps, 'id'> & {
+  appendTo: HTMLElement
 }
-export type MessageOptionsTyped = Omit<MessageOptions, 'type'>
+export type MessageOptionsWithType = Omit<MessageOptions, 'type'>
+export type MessageParamsWithType =
+  | MessageOptionsWithType
+  | MessageOptions['message']
 
-export interface MessageHandle {
+export interface MessageHandler {
   close: () => void
 }
 
-export type MessageParams = Partial<MessageOptions> | string | VNode
-export type MessageParamsTyped = Partial<MessageOptionsTyped> | string | VNode
-
-export type MessageFn = ((
-  options?: MessageParams,
-  appContext?: null | AppContext
-) => MessageHandle) & {
+export type MessageFn = {
+  (options?: MessageParams, appContext?: null | AppContext): MessageHandler
   closeAll(): void
 }
 export type MessageTypedFn = (
-  options?: MessageParamsTyped,
+  options?: MessageParamsWithType,
   appContext?: null | AppContext
-) => MessageHandle
+) => MessageHandler
 
 export interface Message extends MessageFn {
   success: MessageTypedFn
@@ -107,8 +141,10 @@ export interface Message extends MessageFn {
   error: MessageTypedFn
 }
 
-type MessageQueueItem = {
-  vm: VNode
+export type MessageQueueItem = {
+  vnode: VNode
+  handler: MessageHandler
+  vm: MessageInstance
 }
 
 export type MessageQueue = MessageQueueItem[]
diff --git a/packages/components/message/src/message.vue b/packages/components/message/src/message.vue
index 750d1510cb43a..4e025481c1c24 100644
--- a/packages/components/message/src/message.vue
+++ b/packages/components/message/src/message.vue
@@ -36,113 +36,93 @@
         <p v-else :class="ns.e('content')" v-html="message" />
       </slot>
       <el-icon v-if="showClose" :class="ns.e('closeBtn')" @click.stop="close">
-        <close />
+        <Close />
       </el-icon>
     </div>
   </transition>
 </template>
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue'
 import { useEventListener, useTimeoutFn } from '@vueuse/core'
 import { TypeComponents, TypeComponentsMap } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import ElBadge from '@element-plus/components/badge'
 import { ElIcon } from '@element-plus/components/icon'
-
 import { useNamespace } from '@element-plus/hooks'
 import { messageEmits, messageProps } from './message'
 import type { BadgeProps } from '@element-plus/components/badge'
-
 import type { CSSProperties } from 'vue'
 
-export default defineComponent({
+const { Close } = TypeComponents
+
+defineOptions({
   name: 'ElMessage',
+})
+
+const props = defineProps(messageProps)
+defineEmits(messageEmits)
+
+const ns = useNamespace('message')
+const visible = ref(false)
+const badgeType = ref<BadgeProps['type']>(
+  props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'
+)
+let stopTimer: (() => void) | undefined = undefined
+
+const typeClass = computed(() => {
+  const type = props.type
+  return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }
+})
+
+const iconComponent = computed(
+  () => props.icon || TypeComponentsMap[props.type] || ''
+)
+
+const customStyle = computed<CSSProperties>(() => ({
+  top: `${props.offset}px`,
+  zIndex: props.zIndex,
+}))
+
+function startTimer() {
+  if (props.duration === 0) return
+  ;({ stop: stopTimer } = useTimeoutFn(() => {
+    close()
+  }, props.duration))
+}
+
+function clearTimer() {
+  stopTimer?.()
+}
+
+function close() {
+  visible.value = false
+}
+
+function keydown({ code }: KeyboardEvent) {
+  if (code === EVENT_CODE.esc) {
+    // press esc to close the message
+    close()
+  }
+}
+
+onMounted(() => {
+  startTimer()
+  visible.value = true
+})
+
+watch(
+  () => props.repeatNum,
+  () => {
+    clearTimer()
+    startTimer()
+  }
+)
+
+useEventListener(document, 'keydown', keydown)
 
-  components: {
-    ElBadge,
-    ElIcon,
-    ...TypeComponents,
-  },
-
-  props: messageProps,
-  emits: messageEmits,
-
-  setup(props) {
-    const ns = useNamespace('message')
-    const visible = ref(false)
-    const badgeType = ref<BadgeProps['type']>(
-      props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'
-    )
-    let stopTimer: (() => void) | undefined = undefined
-
-    const typeClass = computed(() => {
-      const type = props.type
-      return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }
-    })
-
-    const iconComponent = computed(() => {
-      return props.icon || TypeComponentsMap[props.type] || ''
-    })
-
-    const customStyle = computed<CSSProperties>(() => ({
-      top: `${props.offset}px`,
-      zIndex: props.zIndex,
-    }))
-
-    function startTimer() {
-      if (props.duration > 0) {
-        ;({ stop: stopTimer } = useTimeoutFn(() => {
-          if (visible.value) close()
-        }, props.duration))
-      }
-    }
-
-    function clearTimer() {
-      stopTimer?.()
-    }
-
-    function close() {
-      visible.value = false
-    }
-
-    function keydown({ code }: KeyboardEvent) {
-      if (code === EVENT_CODE.esc) {
-        // press esc to close the message
-        if (visible.value) {
-          close()
-        }
-      } else {
-        startTimer() // resume timer
-      }
-    }
-
-    onMounted(() => {
-      startTimer()
-      visible.value = true
-    })
-
-    watch(
-      () => props.repeatNum,
-      () => {
-        clearTimer()
-        startTimer()
-      }
-    )
-
-    useEventListener(document, 'keydown', keydown)
-
-    return {
-      ns,
-      typeClass,
-      iconComponent,
-      customStyle,
-      visible,
-      badgeType,
-
-      close,
-      clearTimer,
-      startTimer,
-    }
-  },
+defineExpose({
+  visible,
+  close,
 })
 </script>

From f582165c274dd18a0f8986bb89ed670687f5daeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=AD=A9=E5=8F=AF=E5=8F=AF=E7=88=B1=E7=88=B1?=
 <49635988+sunnyCoCosun@users.noreply.github.com>
Date: Tue, 21 Jun 2022 22:34:58 +0800
Subject: [PATCH 12/48] fix(components): [tooltip] not disappear when
 <keep-alive> change (#8301)

el-tooltip does not disappear when the reference element is in <keep-alive>

closed #8287
---
 packages/components/tooltip/src/tooltip.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/components/tooltip/src/tooltip.vue b/packages/components/tooltip/src/tooltip.vue
index 829e0cd4b5ee1..656d5fd37add0 100644
--- a/packages/components/tooltip/src/tooltip.vue
+++ b/packages/components/tooltip/src/tooltip.vue
@@ -51,6 +51,7 @@
 import {
   computed,
   defineComponent,
+  onDeactivated,
   provide,
   readonly,
   ref,
@@ -207,6 +208,8 @@ export default defineComponent({
       return popperContent && popperContent.contains(document.activeElement)
     }
 
+    onDeactivated(() => open.value && hide())
+
     return {
       compatShowAfter,
       compatShowArrow,

From 12396923f046d5d47af5a0259012797f1ddce9bd Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Tue, 21 Jun 2022 22:38:30 +0800
Subject: [PATCH 13/48] style(components): [transfer] modify import order
 (#8345)

---
 packages/components/transfer/style/css.ts   | 2 +-
 packages/components/transfer/style/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/transfer/style/css.ts b/packages/components/transfer/style/css.ts
index 94a2ab85f8b24..333781f58cd08 100644
--- a/packages/components/transfer/style/css.ts
+++ b/packages/components/transfer/style/css.ts
@@ -1,6 +1,6 @@
 import '@element-plus/components/base/style/css'
-import '@element-plus/theme-chalk/el-transfer.css'
 import '@element-plus/components/input/style/css'
 import '@element-plus/components/button/style/css'
 import '@element-plus/components/checkbox/style/css'
 import '@element-plus/components/checkbox-group/style/css'
+import '@element-plus/theme-chalk/el-transfer.css'
diff --git a/packages/components/transfer/style/index.ts b/packages/components/transfer/style/index.ts
index ab161fb05528d..f8f7c1e3fbaa6 100644
--- a/packages/components/transfer/style/index.ts
+++ b/packages/components/transfer/style/index.ts
@@ -1,6 +1,6 @@
 import '@element-plus/components/base/style'
-import '@element-plus/theme-chalk/src/transfer.scss'
 import '@element-plus/components/input/style'
 import '@element-plus/components/button/style'
 import '@element-plus/components/checkbox/style'
 import '@element-plus/components/checkbox-group/style'
+import '@element-plus/theme-chalk/src/transfer.scss'

From ecadb2f90322cb4d57acb330e629da27822d068f Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Wed, 22 Jun 2022 00:16:51 +0800
Subject: [PATCH 14/48] refactor(components): [switch] switch to script-setup
 syntax (#7792)

---
 .../{switch.test.ts => switch.test.tsx}       |  37 ++-
 packages/components/switch/src/switch.vue     | 259 +++++++++---------
 2 files changed, 157 insertions(+), 139 deletions(-)
 rename packages/components/switch/__tests__/{switch.test.ts => switch.test.tsx} (92%)

diff --git a/packages/components/switch/__tests__/switch.test.ts b/packages/components/switch/__tests__/switch.test.tsx
similarity index 92%
rename from packages/components/switch/__tests__/switch.test.ts
rename to packages/components/switch/__tests__/switch.test.tsx
index 3583dabf1a5cb..8eaadc9ebe647 100644
--- a/packages/components/switch/__tests__/switch.test.ts
+++ b/packages/components/switch/__tests__/switch.test.tsx
@@ -5,6 +5,8 @@ import { debugWarn } from '@element-plus/utils'
 import { Checked, CircleClose } from '@element-plus/icons-vue'
 import { ElFormItem } from '@element-plus/components/form'
 import Switch from '../src/switch.vue'
+import type { VueWrapper } from '@vue/test-utils'
+import type { SwitchInstance } from '../src/switch'
 
 vi.mock('@element-plus/utils/error', () => ({
   debugWarn: vi.fn(),
@@ -142,7 +144,7 @@ describe('Switch.vue', () => {
         </div>
       `,
       methods: {
-        handleChange(val) {
+        handleChange(val: boolean) {
           this.target = val
         },
       },
@@ -214,6 +216,33 @@ describe('Switch.vue', () => {
     expect(vm.value).toEqual('100')
   })
 
+  test('default switch active-value is false', async () => {
+    const wrapper = mount({
+      components: {
+        'el-switch': Switch,
+      },
+      template: `
+        <div>
+          <el-switch v-model="value" :active-value="onValue" :inactive-value="offValue"></el-switch>
+        </div>
+      `,
+      data() {
+        return {
+          value: false,
+          onValue: false,
+          offValue: true,
+        }
+      },
+    })
+    const vm = wrapper.vm
+
+    const coreWrapper = wrapper.find('.el-switch__core')
+    await coreWrapper.trigger('click')
+    expect(vm.value).toEqual(true)
+    await coreWrapper.trigger('click')
+    expect(vm.value).toEqual(false)
+  })
+
   test('value is the single source of truth', async () => {
     const wrapper = mount({
       components: {
@@ -227,7 +256,8 @@ describe('Switch.vue', () => {
     })
     const vm = wrapper.vm
     const coreWrapper = wrapper.find('.el-switch__core')
-    const switchWrapper = wrapper.findComponent(Switch)
+    const switchWrapper: VueWrapper<SwitchInstance> =
+      wrapper.findComponent(Switch)
     const switchVm = switchWrapper.vm
     const inputEl = vm.$el.querySelector('input')
 
@@ -253,7 +283,8 @@ describe('Switch.vue', () => {
     })
     const vm = wrapper.vm
     const coreWrapper = wrapper.find('.el-switch__core')
-    const switchWrapper = wrapper.findComponent(Switch)
+    const switchWrapper: VueWrapper<SwitchInstance> =
+      wrapper.findComponent(Switch)
     const switchVm = switchWrapper.vm
     const inputEl = vm.$el.querySelector('input')
 
diff --git a/packages/components/switch/src/switch.vue b/packages/components/switch/src/switch.vue
index 98e6940621db0..1de336f93fe1e 100644
--- a/packages/components/switch/src/switch.vue
+++ b/packages/components/switch/src/switch.vue
@@ -82,10 +82,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import {
   computed,
-  defineComponent,
   getCurrentInstance,
   nextTick,
   onMounted,
@@ -110,167 +109,155 @@ import {
   useSize,
 } from '@element-plus/hooks'
 import { switchEmits, switchProps } from './switch'
-
 import type { CSSProperties } from 'vue'
 
 const COMPONENT_NAME = 'ElSwitch'
 
-export default defineComponent({
-  name: COMPONENT_NAME,
-  components: { ElIcon, Loading },
+defineOptions({
+  name: 'ElSwitch',
+})
 
-  props: switchProps,
-  emits: switchEmits,
+const props = defineProps(switchProps)
+const emit = defineEmits(switchEmits)
 
-  setup(props, { emit }) {
-    const vm = getCurrentInstance()!
-    const { formItem } = useFormItem()
-    const switchSize = useSize()
-    const switchDisabled = useDisabled(computed(() => props.loading))
-    const ns = useNamespace('switch')
+const vm = getCurrentInstance()!
+const { formItem } = useFormItem()
+const switchSize = useSize()
+const ns = useNamespace('switch')
 
-    useDeprecated(
-      {
-        from: '"value"',
-        replacement: '"model-value" or "v-model"',
-        scope: COMPONENT_NAME,
-        version: '2.3.0',
-        ref: 'https://element-plus.org/en-US/component/switch.html#attributes',
-        type: 'Attribute',
-      },
-      computed(() => !!vm.vnode.props?.value)
-    )
-
-    const { inputId } = useFormItemInputId(props, {
-      formItemContext: formItem,
-    })
+useDeprecated(
+  {
+    from: '"value"',
+    replacement: '"model-value" or "v-model"',
+    scope: COMPONENT_NAME,
+    version: '2.3.0',
+    ref: 'https://element-plus.org/en-US/component/switch.html#attributes',
+    type: 'Attribute',
+  },
+  computed(() => !!vm.vnode.props?.value)
+)
 
-    const isModelValue = ref(props.modelValue !== false)
-    const input = ref<HTMLInputElement>()
-    const core = ref<HTMLSpanElement>()
+const { inputId } = useFormItemInputId(props, {
+  formItemContext: formItem,
+})
 
-    const switchKls = computed(() => [
-      ns.b(),
-      ns.m(switchSize.value),
-      ns.is('disabled', switchDisabled.value),
-      ns.is('checked', checked.value),
-    ])
+const switchDisabled = useDisabled(computed(() => props.loading))
+const isControlled = ref(props.modelValue !== false)
+const input = ref<HTMLInputElement>()
+const core = ref<HTMLSpanElement>()
 
-    const coreStyle = computed<CSSProperties>(() => ({
-      width: addUnit(props.width),
-    }))
+const switchKls = computed(() => [
+  ns.b(),
+  ns.m(switchSize.value),
+  ns.is('disabled', switchDisabled.value),
+  ns.is('checked', checked.value),
+])
 
-    watch(
-      () => props.modelValue,
-      () => {
-        isModelValue.value = true
-      }
-    )
+const coreStyle = computed<CSSProperties>(() => ({
+  width: addUnit(props.width),
+}))
 
-    watch(
-      () => props.value,
-      () => {
-        isModelValue.value = false
-      }
-    )
+watch(
+  () => props.modelValue,
+  () => {
+    isControlled.value = true
+  }
+)
 
-    const actualValue = computed(() => {
-      return isModelValue.value ? props.modelValue : props.value
-    })
+watch(
+  () => props.value,
+  () => {
+    isControlled.value = false
+  }
+)
 
-    const checked = computed(() => actualValue.value === props.activeValue)
+const actualValue = computed(() => {
+  return isControlled.value ? props.modelValue : props.value
+})
 
-    if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
-      emit(UPDATE_MODEL_EVENT, props.inactiveValue)
-      emit(CHANGE_EVENT, props.inactiveValue)
-      emit(INPUT_EVENT, props.inactiveValue)
-    }
+const checked = computed(() => actualValue.value === props.activeValue)
 
-    watch(checked, () => {
-      input.value!.checked = checked.value
+if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
+  emit(UPDATE_MODEL_EVENT, props.inactiveValue)
+  emit(CHANGE_EVENT, props.inactiveValue)
+  emit(INPUT_EVENT, props.inactiveValue)
+}
 
-      if (props.validateEvent) {
-        formItem?.validate?.('change').catch((err) => debugWarn(err))
-      }
-    })
+watch(checked, (val) => {
+  input.value!.checked = val
 
-    const handleChange = (): void => {
-      const val = checked.value ? props.inactiveValue : props.activeValue
-      emit(UPDATE_MODEL_EVENT, val)
-      emit(CHANGE_EVENT, val)
-      emit(INPUT_EVENT, val)
-      nextTick(() => {
-        input.value!.checked = checked.value
-      })
-    }
+  if (props.validateEvent) {
+    formItem?.validate?.('change').catch((err) => debugWarn(err))
+  }
+})
 
-    const switchValue = (): void => {
-      if (switchDisabled.value) return
+const handleChange = () => {
+  const val = checked.value ? props.inactiveValue : props.activeValue
+  emit(UPDATE_MODEL_EVENT, val)
+  emit(CHANGE_EVENT, val)
+  emit(INPUT_EVENT, val)
+  nextTick(() => {
+    input.value!.checked = checked.value
+  })
+}
 
-      const { beforeChange } = props
-      if (!beforeChange) {
-        handleChange()
-        return
-      }
+const switchValue = () => {
+  if (switchDisabled.value) return
 
-      const shouldChange = beforeChange()
+  const { beforeChange } = props
+  if (!beforeChange) {
+    handleChange()
+    return
+  }
 
-      const isExpectType = [
-        isPromise(shouldChange),
-        isBoolean(shouldChange),
-      ].some((i) => i)
-      if (!isExpectType) {
-        throwError(
-          COMPONENT_NAME,
-          'beforeChange must return type `Promise<boolean>` or `boolean`'
-        )
-      }
+  const shouldChange = beforeChange()
 
-      if (isPromise(shouldChange)) {
-        shouldChange
-          .then((result) => {
-            if (result) {
-              handleChange()
-            }
-          })
-          .catch((e) => {
-            debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)
-          })
-      } else if (shouldChange) {
-        handleChange()
-      }
-    }
+  const isPromiseOrBool = [
+    isPromise(shouldChange),
+    isBoolean(shouldChange),
+  ].includes(true)
+  if (!isPromiseOrBool) {
+    throwError(
+      COMPONENT_NAME,
+      'beforeChange must return type `Promise<boolean>` or `boolean`'
+    )
+  }
 
-    const styles = computed(() => {
-      return ns.cssVarBlock({
-        ...(props.activeColor ? { 'on-color': props.activeColor } : null),
-        ...(props.inactiveColor ? { 'off-color': props.inactiveColor } : null),
-        ...(props.borderColor ? { 'border-color': props.borderColor } : null),
+  if (isPromise(shouldChange)) {
+    shouldChange
+      .then((result) => {
+        if (result) {
+          handleChange()
+        }
+      })
+      .catch((e) => {
+        debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)
       })
-    })
+  } else if (shouldChange) {
+    handleChange()
+  }
+}
 
-    const focus = (): void => {
-      input.value?.focus?.()
-    }
+const styles = computed(() => {
+  return ns.cssVarBlock({
+    ...(props.activeColor ? { 'on-color': props.activeColor } : null),
+    ...(props.inactiveColor ? { 'off-color': props.inactiveColor } : null),
+    ...(props.borderColor ? { 'border-color': props.borderColor } : null),
+  })
+})
 
-    onMounted(() => {
-      input.value!.checked = checked.value
-    })
+const focus = (): void => {
+  input.value?.focus?.()
+}
 
-    return {
-      ns,
-      input,
-      inputId,
-      core,
-      switchDisabled,
-      checked,
-      switchKls,
-      coreStyle,
-      handleChange,
-      switchValue,
-      focus,
-      styles,
-    }
-  },
+onMounted(() => {
+  input.value!.checked = checked.value
+})
+
+defineExpose({
+  /**
+   *  @description manual focus to the switch component
+   **/
+  focus,
 })
 </script>

From b2ad0e823e3444df31ef639022853910d7a66df7 Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Wed, 22 Jun 2022 00:42:25 +0800
Subject: [PATCH 15/48] refactor(components): [space] refactor (#8386)

---
 packages/components/space/index.ts         |  1 +
 packages/components/space/src/item.ts      | 30 ++++++++++++++++++++
 packages/components/space/src/item.vue     | 32 ----------------------
 packages/components/space/src/space.ts     | 14 +++-------
 packages/components/space/src/use-space.ts | 10 +++----
 5 files changed, 40 insertions(+), 47 deletions(-)
 create mode 100644 packages/components/space/src/item.ts
 delete mode 100644 packages/components/space/src/item.vue

diff --git a/packages/components/space/index.ts b/packages/components/space/index.ts
index a4cc9eee01e32..4aa1f76e150c0 100644
--- a/packages/components/space/index.ts
+++ b/packages/components/space/index.ts
@@ -6,4 +6,5 @@ export const ElSpace = withInstall(Space)
 export default ElSpace
 
 export * from './src/space'
+export * from './src/item'
 export * from './src/use-space'
diff --git a/packages/components/space/src/item.ts b/packages/components/space/src/item.ts
new file mode 100644
index 0000000000000..688a3bf08074c
--- /dev/null
+++ b/packages/components/space/src/item.ts
@@ -0,0 +1,30 @@
+import { computed, defineComponent, h, renderSlot } from 'vue'
+import { buildProps } from '@element-plus/utils'
+import { useNamespace } from '@element-plus/hooks'
+
+import type { ExtractPropTypes } from 'vue'
+
+const spaceItemProps = buildProps({
+  prefixCls: {
+    type: String,
+  },
+} as const)
+export type SpaceItemProps = ExtractPropTypes<typeof spaceItemProps>
+
+const SpaceItem = defineComponent({
+  name: 'ElSpaceItem',
+
+  props: spaceItemProps,
+
+  setup(props, { slots }) {
+    const ns = useNamespace('space')
+
+    const classes = computed(() => `${props.prefixCls || ns.b()}__item`)
+
+    return () =>
+      h('div', { class: classes.value }, renderSlot(slots, 'default'))
+  },
+})
+export type SpaceItemInstance = InstanceType<typeof SpaceItem>
+
+export default SpaceItem
diff --git a/packages/components/space/src/item.vue b/packages/components/space/src/item.vue
deleted file mode 100644
index a6bed04d705f8..0000000000000
--- a/packages/components/space/src/item.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div :class="classes">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
-import { buildProps } from '@element-plus/utils'
-import { useNamespace } from '@element-plus/hooks'
-
-const spaceItem = buildProps({
-  prefixCls: {
-    type: String,
-    default: '',
-  },
-} as const)
-
-export default defineComponent({
-  props: spaceItem,
-
-  setup(props) {
-    const ns = useNamespace('space')
-
-    const classes = computed(() => `${props.prefixCls || ns.b()}__item`)
-
-    return {
-      classes,
-    }
-  },
-})
-</script>
diff --git a/packages/components/space/src/space.ts b/packages/components/space/src/space.ts
index ca9aebe304caf..fc850683ca097 100644
--- a/packages/components/space/src/space.ts
+++ b/packages/components/space/src/space.ts
@@ -16,7 +16,7 @@ import {
   isValidElementNode,
 } from '@element-plus/utils'
 import { componentSizes } from '@element-plus/constants'
-import Item from './item.vue'
+import Item from './item'
 import { useSpace } from './use-space'
 
 import type { ExtractPropTypes, StyleValue, VNode, VNodeChild } from 'vue'
@@ -58,15 +58,9 @@ export const spaceProps = buildProps({
     validator: (val: unknown) => isVNode(val) || isNumber(val) || isString(val),
   },
 
-  wrap: {
-    type: Boolean,
-    default: false,
-  },
+  wrap: Boolean,
 
-  fill: {
-    type: Boolean,
-    default: false,
-  },
+  fill: Boolean,
 
   fillRatio: {
     type: Number,
@@ -79,7 +73,7 @@ export const spaceProps = buildProps({
     validator: (val: unknown): val is [number, number] | number => {
       return (
         isNumber(val) ||
-        (isArray(val) && val.length === 2 && val.every((i) => isNumber(i)))
+        (isArray(val) && val.length === 2 && val.every(isNumber))
       )
     },
   },
diff --git a/packages/components/space/src/use-space.ts b/packages/components/space/src/use-space.ts
index 30ac6f1c045c8..f8f57176f1a2e 100644
--- a/packages/components/space/src/use-space.ts
+++ b/packages/components/space/src/use-space.ts
@@ -1,16 +1,16 @@
 import { computed, ref, watchEffect } from 'vue'
-import { isNumber } from '@element-plus/utils'
+import { isArray, isNumber } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
-import type { SpaceProps } from './space'
 
+import type { SpaceProps } from './space'
 import type { CSSProperties, StyleValue } from 'vue'
 import type { ComponentSize } from '@element-plus/constants'
 
-const SIZE_MAP: Record<ComponentSize, number> = {
+const SIZE_MAP = {
   small: 8,
   default: 12,
   large: 16,
-}
+} as Record<ComponentSize, number>
 
 export function useSpace(props: SpaceProps) {
   const ns = useNamespace('space')
@@ -48,7 +48,7 @@ export function useSpace(props: SpaceProps) {
     const { size = 'small', wrap, direction: dir, fill } = props
 
     // when the specified size have been given
-    if (Array.isArray(size)) {
+    if (isArray(size)) {
       const [h = 0, v = 0] = size
       horizontalSize.value = h
       verticalSize.value = v

From 518db1e2401bdb149973aeec0ddcd40e4292b74d Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Wed, 22 Jun 2022 00:43:43 +0800
Subject: [PATCH 16/48] refactor(components): [slider] use JSX in Unit test
 (#8225)

---
 .../slider/__tests__/slider.test.ts           | 1014 -----------------
 .../slider/__tests__/slider.test.tsx          |  678 +++++++++++
 2 files changed, 678 insertions(+), 1014 deletions(-)
 delete mode 100644 packages/components/slider/__tests__/slider.test.ts
 create mode 100644 packages/components/slider/__tests__/slider.test.tsx

diff --git a/packages/components/slider/__tests__/slider.test.ts b/packages/components/slider/__tests__/slider.test.ts
deleted file mode 100644
index 74f5748b8ffd0..0000000000000
--- a/packages/components/slider/__tests__/slider.test.ts
+++ /dev/null
@@ -1,1014 +0,0 @@
-import { h, nextTick } from 'vue'
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { EVENT_CODE } from '@element-plus/constants'
-import { ElFormItem } from '@element-plus/components/form'
-import Slider from '../src/slider.vue'
-
-vi.mock('lodash-unified', async () => {
-  return {
-    ...((await vi.importActual('lodash-unified')) as Record<string, any>),
-    debounce: vi.fn((fn) => {
-      fn.cancel = vi.fn()
-      fn.flush = vi.fn()
-      return fn
-    }),
-  }
-})
-
-describe('Slider', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  it('create', () => {
-    const wrapper = mount(Slider)
-    expect(wrapper.props().modelValue).toBe(0)
-  })
-
-  it('should not exceed min and max', async () => {
-    const wrapper = mount({
-      template: `
-        <slider v-model="value" :min="50"></slider>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 60,
-        }
-      },
-    })
-
-    await nextTick()
-    wrapper.vm.value = 40
-    await nextTick()
-    expect(wrapper.vm.value).toBe(50)
-    wrapper.vm.value = 120
-    await nextTick()
-    expect(wrapper.vm.value).toBe(100)
-  })
-
-  it('sizes', () => {
-    const wrapper = mount({
-      template: `
-        <div>
-        <slider v-model="value" size="small">
-        </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
-      },
-    })
-    expect(wrapper.find('.el-slider--small').exists()).toBe(true)
-  })
-
-  it('show tooltip', () => {
-    const wrapper = mount({
-      template: `
-        <div>
-          <slider v-model="value">
-          </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
-      },
-    })
-    const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
-    slider.vm.handleMouseEnter()
-    expect(slider.vm.tooltipVisible).toBeTruthy()
-    slider.vm.handleMouseLeave()
-    expect(slider.vm.tooltipVisible).toBeFalsy()
-  })
-
-  it('hide tooltip', () => {
-    const wrapper = mount({
-      template: `
-        <div>
-          <slider ref="slider" v-model="value" :show-tooltip="false">
-          </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
-      },
-    })
-    const slider = wrapper.vm.$refs.slider as any
-    const tooltip = slider.$refs.firstButton.$refs.tooltip
-    expect(tooltip.disabled).toBe(true)
-  })
-
-  it('format tooltip', async () => {
-    const wrapper = mount({
-      template: `
-        <div>
-          <slider ref="slider" v-model="value" :format-tooltip="formatTooltip">
-          </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
-      },
-      methods: {
-        formatTooltip(val: number) {
-          return `$${val}`
-        },
-      },
-    })
-    const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
-    nextTick().then(() => {
-      expect(slider.vm.formatValue).toBe('$0')
-    })
-  })
-
-  describe('drag', () => {
-    it('horizontal', async () => {
-      vi.useRealTimers()
-      const wrapper = mount(
-        {
-          template: `
-          <div style="width: 200px;">
-            <slider v-model="value" :vertical="false"></slider>
-          </div>
-        `,
-          components: { Slider },
-          data() {
-            return {
-              value: 0,
-            }
-          },
-        },
-        {
-          attachTo: document.body,
-        }
-      )
-      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
-
-      vi.spyOn(
-        wrapper.find('.el-slider__runway').element,
-        'clientWidth',
-        'get'
-      ).mockImplementation(() => 200)
-      slider.trigger('mousedown', { clientX: 0 })
-
-      const mousemove = document.createEvent('MouseEvent')
-      mousemove.initMouseEvent(
-        'mousemove',
-        true,
-        true,
-        window,
-        1,
-        100,
-        0,
-        100,
-        0,
-        false,
-        false,
-        true,
-        false,
-        0,
-        null
-      )
-      window.dispatchEvent(mousemove)
-
-      const mouseup = document.createEvent('MouseEvent')
-      mouseup.initMouseEvent(
-        'mouseup',
-        true,
-        true,
-        window,
-        1,
-        100,
-        0,
-        100,
-        0,
-        false,
-        false,
-        true,
-        false,
-        0,
-        null
-      )
-      window.dispatchEvent(mouseup)
-
-      await nextTick()
-      expect(wrapper.vm.value === 50).toBeTruthy()
-    })
-
-    it('vertical', async () => {
-      vi.useRealTimers()
-      const wrapper = mount(
-        {
-          template: `
-          <div style="height: 200px;">
-            <slider v-model="value" :vertical="true"></slider>
-          </div>
-        `,
-          components: { Slider },
-          data() {
-            return {
-              value: 0,
-            }
-          },
-        },
-        {
-          attachTo: document.body,
-        }
-      )
-      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
-      vi.spyOn(
-        wrapper.find('.el-slider__runway').element,
-        'clientHeight',
-        'get'
-      ).mockImplementation(() => 200)
-      slider.trigger('mousedown', { clientY: 0 })
-      const mousemove = document.createEvent('MouseEvent')
-      mousemove.initMouseEvent(
-        'mousemove',
-        true,
-        true,
-        window,
-        1,
-        0,
-        -100,
-        0,
-        -100,
-        false,
-        false,
-        true,
-        false,
-        0,
-        null
-      )
-      window.dispatchEvent(mousemove)
-      const mouseup = document.createEvent('MouseEvent')
-      mouseup.initMouseEvent(
-        'mouseup',
-        true,
-        true,
-        window,
-        1,
-        0,
-        -100,
-        0,
-        -100,
-        false,
-        false,
-        true,
-        false,
-        0,
-        null
-      )
-      window.dispatchEvent(mouseup)
-      await nextTick()
-      expect(wrapper.vm.value).toBe(50)
-    })
-  })
-
-  describe('accessibility', () => {
-    it('left/right arrows', async () => {
-      const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value"></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: 0.1,
-          }
-        },
-      })
-      const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
-
-      slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.right })
-      )
-      await nextTick()
-      expect(wrapper.vm.value).toBe(1)
-
-      slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.left })
-      )
-      await nextTick()
-      expect(wrapper.vm.value).toBe(0)
-    })
-
-    it('up/down arrows', async () => {
-      const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value"></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: 0.1,
-          }
-        },
-      })
-      const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
-
-      slider.vm.onKeyDown(new KeyboardEvent('keydown', { key: EVENT_CODE.up }))
-      await nextTick()
-      expect(wrapper.vm.value).toBe(1)
-
-      slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.down })
-      )
-      await nextTick()
-      expect(wrapper.vm.value).toBe(0)
-    })
-
-    it('page up/down keys', async () => {
-      const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value" :min="-5" :max="10"></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: -1,
-          }
-        },
-      })
-      const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
-      slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.pageUp })
-      )
-      await nextTick()
-      expect(wrapper.vm.value).toBe(3)
-
-      slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.pageDown })
-      )
-      await nextTick()
-      expect(wrapper.vm.value).toBe(-1)
-    })
-
-    it('home/end keys', async () => {
-      const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value" :min="-5" :max="10"></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: 0,
-          }
-        },
-      })
-      const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
-      slider.vm.onKeyDown(
-        new KeyboardEvent('keydown', { key: EVENT_CODE.home })
-      )
-      await nextTick()
-      expect(wrapper.vm.value).toBe(-5)
-
-      slider.vm.onKeyDown(new KeyboardEvent('keydown', { key: EVENT_CODE.end }))
-      await nextTick()
-      expect(wrapper.vm.value).toBe(10)
-    })
-  })
-
-  it('step', async () => {
-    vi.useRealTimers()
-    const wrapper = mount(
-      {
-        template: `
-        <div style="width: 200px;">
-          <slider v-model="value" :min="0" :max="1" :step="0.1"></slider>
-        </div>
-      `,
-        components: { Slider },
-        data() {
-          return {
-            value: 0,
-          }
-        },
-      },
-      {
-        attachTo: document.body,
-      }
-    )
-    const mockClientWidth = vi
-      .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
-      .mockImplementation(() => 200)
-    const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
-    await nextTick()
-
-    slider.trigger('mousedown', { clientX: 0 })
-    const mousemove = document.createEvent('MouseEvent')
-    mousemove.initMouseEvent(
-      'mousemove',
-      true,
-      true,
-      window,
-      1,
-      100,
-      0,
-      100,
-      0,
-      false,
-      false,
-      true,
-      false,
-      0,
-      null
-    )
-    window.dispatchEvent(mousemove)
-    const mouseup = document.createEvent('MouseEvent')
-    mouseup.initMouseEvent(
-      'mouseup',
-      true,
-      true,
-      window,
-      1,
-      100,
-      0,
-      100,
-      0,
-      false,
-      false,
-      true,
-      false,
-      0,
-      null
-    )
-    await nextTick()
-    window.dispatchEvent(mouseup)
-    await nextTick()
-    expect(wrapper.vm.value === 0.5).toBeTruthy()
-    mockClientWidth.mockRestore()
-  })
-
-  it('click', async () => {
-    vi.useRealTimers()
-    const wrapper = mount({
-      template: `
-        <div>
-          <slider v-model="value"></slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
-      },
-    })
-    const mockClientWidth = vi
-      .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
-      .mockImplementation(() => 200)
-    const slider: any = wrapper.findComponent({ name: 'ElSlider' })
-    slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
-    await nextTick()
-    expect(wrapper.vm.value > 0).toBeTruthy()
-    mockClientWidth.mockRestore()
-  })
-
-  it('change event', async () => {
-    vi.useRealTimers()
-    const wrapper = mount({
-      template: `
-        <div style="width: 200px">
-          <slider v-model="value" @change="onChange">
-          </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          data: 0,
-          value: 0,
-        }
-      },
-      methods: {
-        onChange(val: number) {
-          this.data = val
-        },
-      },
-    })
-    const slider: any = wrapper.findComponent({ name: 'ElSlider' })
-    const mockRectLeft = vi
-      .spyOn(
-        wrapper.find('.el-slider__runway').element,
-        'getBoundingClientRect'
-      )
-      .mockImplementation(() => {
-        return {
-          left: 0,
-        } as DOMRect
-      })
-    const mockClientWidth = vi
-      .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
-      .mockImplementation(() => 200)
-    expect(wrapper.vm.data).toBe(0)
-    slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
-    await nextTick()
-    expect(wrapper.vm.data === 50).toBeTruthy()
-    mockRectLeft.mockRestore()
-    mockClientWidth.mockRestore()
-  })
-
-  it('input event', async () => {
-    vi.useRealTimers()
-    const wrapper = mount({
-      template: `
-        <div style="width: 200px">
-          <slider v-model="value" @input="onInput">
-          </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          data: 0,
-          value: 0,
-        }
-      },
-      methods: {
-        onInput(val: number) {
-          this.data = val
-        },
-      },
-    })
-    const slider: any = wrapper.findComponent({ name: 'ElSlider' })
-    const mockRectLeft = vi
-      .spyOn(
-        wrapper.find('.el-slider__runway').element,
-        'getBoundingClientRect'
-      )
-      .mockImplementation(() => {
-        return {
-          left: 0,
-        } as DOMRect
-      })
-    const mockClientWidth = vi
-      .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
-      .mockImplementation(() => 200)
-    await nextTick()
-    expect(wrapper.vm.data).toBe(0)
-    slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
-    await nextTick()
-    expect(wrapper.vm.data === 50).toBeTruthy()
-    mockRectLeft.mockRestore()
-    mockClientWidth.mockRestore()
-  })
-
-  it('disabled', async () => {
-    vi.useRealTimers()
-    const wrapper = mount({
-      template: `
-        <div>
-          <slider v-model="value" disabled></slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
-      },
-    })
-    const mockClientWidth = vi
-      .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
-      .mockImplementation(() => 200)
-    const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
-    slider.vm.onButtonDown({ clientX: 0 })
-    const mousemove = document.createEvent('MouseEvent')
-    mousemove.initMouseEvent(
-      'mousemove',
-      true,
-      true,
-      window,
-      1,
-      50,
-      0,
-      50,
-      0,
-      false,
-      false,
-      true,
-      false,
-      0,
-      null
-    )
-    window.dispatchEvent(mousemove)
-    const mouseup = document.createEvent('MouseEvent')
-    mouseup.initMouseEvent(
-      'mouseup',
-      true,
-      true,
-      window,
-      1,
-      50,
-      0,
-      50,
-      0,
-      false,
-      false,
-      true,
-      false,
-      0,
-      null
-    )
-    window.dispatchEvent(mouseup)
-    await nextTick()
-    expect(wrapper.vm.value).toBe(0)
-    mockClientWidth.mockRestore()
-  })
-
-  it('show input', async () => {
-    const wrapper = mount({
-      template: `
-        <div>
-          <slider v-model="value" show-input></slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
-      },
-    })
-    const increaseButton = wrapper.find('.el-input-number__increase')
-    await increaseButton.trigger('mousedown')
-    vi.advanceTimersByTime(200)
-    expect(wrapper.vm.value > 0).toBeTruthy()
-  })
-
-  it('show stops', () => {
-    const wrapper = mount(Slider, {
-      props: {
-        showStops: true,
-        step: 10,
-      },
-    })
-    const stops = wrapper.findAll('.el-slider__stop')
-    expect(stops.length).toBe(9)
-  })
-
-  it('vertical mode', async () => {
-    vi.useRealTimers()
-    const wrapper = mount(
-      {
-        template: `
-        <div>
-          <slider vertical v-model="value" height="200px"></slider>
-        </div>
-      `,
-        components: { Slider },
-        data() {
-          return {
-            value: 0,
-          }
-        },
-      },
-      {
-        attachTo: document.body,
-      }
-    )
-    const mockRectBottom = vi
-      .spyOn(
-        wrapper.find('.el-slider__runway').element,
-        'getBoundingClientRect'
-      )
-      .mockImplementation(() => {
-        return {
-          bottom: 200,
-        } as DOMRect
-      })
-    const mockClientHeight = vi
-      .spyOn(wrapper.find('.el-slider__runway').element, 'clientHeight', 'get')
-      .mockImplementation(() => 200)
-    const slider: any = wrapper.getComponent({ name: 'ElSlider' })
-    slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
-    await nextTick()
-    expect(wrapper.vm.value > 0).toBeTruthy()
-    mockRectBottom.mockRestore()
-    mockClientHeight.mockRestore()
-  })
-
-  it('rerender with min and show-input', async () => {
-    const wrapper = mount({
-      template: '<slider v-if="show" v-model="value" :min="10" show-input/>',
-      components: { Slider },
-      data() {
-        return {
-          show: false,
-          value: 30,
-        }
-      },
-      mounted() {
-        this.show = true
-      },
-    })
-    await nextTick()
-    expect(wrapper.vm.value).toEqual(30)
-  })
-
-  describe('range', () => {
-    it('basic ranged slider', () => {
-      const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value" range></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: [10, 20],
-          }
-        },
-      })
-      const sliders = wrapper.findAllComponents({ name: 'ElSliderButton' })
-      expect(sliders.length).toBe(2)
-    })
-
-    it('should not exceed min and max', async () => {
-      const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value" range :min="50">
-            </slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: [50, 60],
-          }
-        },
-      })
-      await nextTick()
-
-      wrapper.vm.value = [40, 60]
-      await nextTick()
-      expect(wrapper.vm.value).toStrictEqual([50, 60])
-
-      wrapper.vm.value = [50, 120]
-      await nextTick()
-      expect(wrapper.vm.value).toStrictEqual([50, 100])
-    })
-
-    it('click', async () => {
-      vi.useRealTimers()
-      const wrapper = mount(
-        {
-          template: `
-          <div style="width: 200px;">
-            <slider range v-model="value"></slider>
-          </div>
-        `,
-          components: { Slider },
-          data() {
-            return {
-              value: [0, 100],
-            }
-          },
-        },
-        {
-          attachTo: document.body,
-        }
-      )
-      const mockRectLeft = vi
-        .spyOn(
-          wrapper.find('.el-slider__runway').element,
-          'getBoundingClientRect'
-        )
-        .mockImplementation(() => {
-          return {
-            left: 0,
-          } as DOMRect
-        })
-      const mockClientWidth = vi
-        .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
-        .mockImplementation(() => 200)
-      const slider: any = wrapper.getComponent({ name: 'ElSlider' })
-      slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
-      await nextTick()
-      // Because mock the clientWidth, so the targetValue is 50.
-      // The behavior of the setPosition method in the useSlider.ts file should be that the value of the second button is 50
-      expect(wrapper.vm.value[0] === 0).toBeTruthy()
-      expect(wrapper.vm.value[1] === 50).toBeTruthy()
-      mockRectLeft.mockRestore()
-      mockClientWidth.mockRestore()
-    })
-
-    it('responsive to dynamic min and max', async () => {
-      const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value" range :min="min" :max="max">
-            </slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            min: 0,
-            max: 100,
-            value: [50, 80],
-          }
-        },
-      })
-      await nextTick()
-
-      wrapper.vm.min = 60
-      await nextTick()
-      expect(wrapper.vm.value).toStrictEqual([60, 80])
-
-      wrapper.vm.min = 30
-      wrapper.vm.max = 40
-      await nextTick()
-      expect(wrapper.vm.value).toStrictEqual([40, 40])
-    })
-
-    it('show stops', async () => {
-      const wrapper = mount({
-        template: `
-          <div>
-            <slider
-              v-model="value"
-              range
-              :step="10"
-              show-stops
-            ></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: [30, 60],
-          }
-        },
-      })
-      await nextTick()
-      const stops = wrapper.findAll('.el-slider__stop')
-      expect(stops.length).toBe(5)
-    })
-
-    it('marks', async () => {
-      const wrapper = mount({
-        template: `
-          <div>
-            <slider
-              v-model="value"
-              range
-              :step="10"
-              :marks="marks"
-              :min="20"
-              show-stops
-            ></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: [30, 60],
-            marks: {
-              0: '0°C',
-              8: '8°C',
-              37: '37°C',
-              50: {
-                style: {
-                  color: '#f50',
-                },
-                label: h('strong', '50°C'),
-              },
-            },
-          }
-        },
-      })
-
-      await nextTick()
-      const stops = wrapper.findAll('.el-slider__marks-stop.el-slider__stop')
-      const marks = wrapper.findAll('.el-slider__marks .el-slider__marks-text')
-      expect(marks.length).toBe(2)
-      expect(stops.length).toBe(2)
-    })
-  })
-
-  describe('form item accessibility integration', () => {
-    it('automatic id attachment', async () => {
-      const wrapper = mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-            <el-slider />
-          </el-form-item>`,
-        components: {
-          'el-slider': Slider,
-          'el-form-item': ElFormItem,
-        },
-      })
-
-      await nextTick()
-      const formItem = wrapper.find('[data-test-ref="item"]')
-      const formItemLabel = formItem.find('.el-form-item__label')
-      const sliderButton = wrapper.find('.el-slider__button-wrapper')
-      expect(formItem.attributes().role).toBeFalsy()
-      expect(formItemLabel.attributes().for).toBe(sliderButton.attributes().id)
-    })
-
-    it('range with automatic id attachment', async () => {
-      const wrapper = mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-            <el-slider :range="true" />
-          </el-form-item>`,
-        components: {
-          'el-slider': Slider,
-          'el-form-item': ElFormItem,
-        },
-      })
-
-      await nextTick()
-      const formItem = wrapper.find('[data-test-ref="item"]')
-      const formItemLabel = formItem.find('.el-form-item__label')
-      const sliderWrapper = wrapper.find('.el-slider')
-      expect(formItem.attributes().role).toBeFalsy()
-      expect(formItemLabel.attributes().for).toBe(sliderWrapper.attributes().id)
-    })
-
-    it('specified id attachment', async () => {
-      const wrapper = mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-            <el-slider id="foobar" />
-          </el-form-item>`,
-        components: {
-          'el-slider': Slider,
-          'el-form-item': ElFormItem,
-        },
-      })
-
-      await nextTick()
-      const formItem = wrapper.find('[data-test-ref="item"]')
-      const formItemLabel = formItem.find('.el-form-item__label')
-      const sliderButton = wrapper.find('.el-slider__button-wrapper')
-      expect(formItem.attributes().role).toBeFalsy()
-      expect(sliderButton.attributes().id).toBe('foobar')
-      expect(formItemLabel.attributes().for).toBe(sliderButton.attributes().id)
-    })
-
-    it('range with specified id attachment', async () => {
-      const wrapper = mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-            <el-slider id="foobar" :range="true" />
-          </el-form-item>`,
-        components: {
-          'el-slider': Slider,
-          'el-form-item': ElFormItem,
-        },
-      })
-
-      await nextTick()
-      const formItem = wrapper.find('[data-test-ref="item"]')
-      const formItemLabel = formItem.find('.el-form-item__label')
-      const sliderWrapper = wrapper.find('.el-slider')
-      expect(formItem.attributes().role).toBeFalsy()
-      expect(sliderWrapper.attributes().id).toBe('foobar')
-      expect(formItemLabel.attributes().for).toBe(sliderWrapper.attributes().id)
-    })
-
-    it('form item role is group when multiple inputs', async () => {
-      const wrapper = mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-            <el-slider />
-            <el-slider />
-          </el-form-item>`,
-        components: {
-          'el-slider': Slider,
-          'el-form-item': ElFormItem,
-        },
-      })
-
-      await nextTick()
-      const formItem = wrapper.find('[data-test-ref="item"]')
-      expect(formItem.attributes().role).toBe('group')
-    })
-  })
-})
diff --git a/packages/components/slider/__tests__/slider.test.tsx b/packages/components/slider/__tests__/slider.test.tsx
new file mode 100644
index 0000000000000..a8e1dbeb70d22
--- /dev/null
+++ b/packages/components/slider/__tests__/slider.test.tsx
@@ -0,0 +1,678 @@
+import { h, nextTick, onMounted, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { EVENT_CODE } from '@element-plus/constants'
+import { ElFormItem } from '@element-plus/components/form'
+import Slider from '../src/slider.vue'
+
+vi.mock('lodash-unified', async () => {
+  return {
+    ...((await vi.importActual('lodash-unified')) as Record<string, any>),
+    debounce: vi.fn((fn) => {
+      fn.cancel = vi.fn()
+      fn.flush = vi.fn()
+      return fn
+    }),
+  }
+})
+
+describe('Slider', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('create', () => {
+    const wrapper = mount(Slider)
+    expect(wrapper.props().modelValue).toBe(0)
+  })
+
+  it('should not exceed min and max', async () => {
+    const value = ref(60)
+    mount(() => <Slider v-model={value.value} min={50} />)
+
+    await nextTick()
+    value.value = 40
+    await nextTick()
+    expect(value.value).toBe(50)
+    value.value = 120
+    await nextTick()
+    expect(value.value).toBe(100)
+  })
+
+  it('sizes', () => {
+    const value = ref(0)
+    const wrapper = mount(() => <Slider v-model={value.value} size="small" />)
+
+    expect(wrapper.find('.el-slider--small').exists()).toBe(true)
+  })
+
+  it('show tooltip', () => {
+    const value = ref(0)
+    const wrapper = mount(() => <Slider v-model={value.value} />)
+
+    const slider = wrapper.findComponent({ name: 'ElSliderButton' })
+    slider.vm.handleMouseEnter()
+    expect(slider.vm.tooltipVisible).toBeTruthy()
+    slider.vm.handleMouseLeave()
+    expect(slider.vm.tooltipVisible).toBeFalsy()
+  })
+
+  it('hide tooltip', () => {
+    const value = ref(0)
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <Slider ref="slider" v-model={value.value} show-tooltip={false} />
+        )
+      },
+    })
+
+    const slider = wrapper.vm.$refs.slider
+    const tooltip = slider.$refs.firstButton.$refs.tooltip
+    expect(tooltip.disabled).toBe(true)
+  })
+
+  it('format tooltip', async () => {
+    const value = ref(0)
+    const formatTooltip = (val: number) => `$${val}`
+    const wrapper = mount(() => (
+      <Slider v-model={value.value} format-tooltip={formatTooltip} />
+    ))
+
+    const slider = wrapper.findComponent({ name: 'ElSliderButton' })
+    await nextTick()
+    expect(slider.vm.formatValue).toBe('$0')
+  })
+
+  describe('drag', () => {
+    it('horizontal', async () => {
+      vi.useRealTimers()
+      const value = ref(0)
+      const wrapper = mount(
+        () => (
+          <div style="width: 200px;">
+            <Slider v-model={value.value} vertical={false} />
+          </div>
+        ),
+        {
+          attachTo: document.body,
+        }
+      )
+
+      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
+
+      vi.spyOn(
+        wrapper.find('.el-slider__runway').element,
+        'clientWidth',
+        'get'
+      ).mockImplementation(() => 200)
+      slider.trigger('mousedown', { clientX: 0 })
+
+      const mousemove = new MouseEvent('mousemove', {
+        screenX: 100,
+        screenY: 0,
+        clientX: 100,
+        clientY: 0,
+      })
+      window.dispatchEvent(mousemove)
+
+      const mouseup = new MouseEvent('mouseup', {
+        screenX: 100,
+        screenY: 0,
+        clientX: 100,
+        clientY: 0,
+      })
+      window.dispatchEvent(mouseup)
+
+      await nextTick()
+      expect(value.value === 50).toBeTruthy()
+    })
+
+    it('vertical', async () => {
+      vi.useRealTimers()
+      const value = ref(0)
+      const wrapper = mount(
+        () => (
+          <div style="width: 200px;">
+            <Slider v-model={value.value} vertical={true} />
+          </div>
+        ),
+        {
+          attachTo: document.body,
+        }
+      )
+
+      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
+      vi.spyOn(
+        wrapper.find('.el-slider__runway').element,
+        'clientHeight',
+        'get'
+      ).mockImplementation(() => 200)
+      slider.trigger('mousedown', { clientY: 0 })
+
+      const mousemove = new MouseEvent('mousemove', {
+        screenX: 0,
+        screenY: -100,
+        clientX: 0,
+        clientY: -100,
+      })
+      window.dispatchEvent(mousemove)
+
+      const mouseup = new MouseEvent('mouseup', {
+        screenX: 0,
+        screenY: -100,
+        clientX: 0,
+        clientY: -100,
+      })
+      window.dispatchEvent(mouseup)
+      await nextTick()
+      expect(value.value).toBe(50)
+    })
+  })
+
+  describe('accessibility', () => {
+    it('left/right arrows', async () => {
+      const value = ref(0)
+      const wrapper = mount(() => <Slider v-model={value.value} />)
+
+      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
+
+      slider.vm.onKeyDown(
+        new KeyboardEvent('keydown', { key: EVENT_CODE.right })
+      )
+      await nextTick()
+      expect(value.value).toBe(1)
+
+      slider.vm.onKeyDown(
+        new KeyboardEvent('keydown', { key: EVENT_CODE.left })
+      )
+      await nextTick()
+      expect(value.value).toBe(0)
+    })
+
+    it('up/down arrows', async () => {
+      const value = ref(0.1)
+      const wrapper = mount(() => <Slider v-model={value.value} />)
+
+      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
+
+      slider.vm.onKeyDown(new KeyboardEvent('keydown', { key: EVENT_CODE.up }))
+      await nextTick()
+      expect(value.value).toBe(1)
+
+      slider.vm.onKeyDown(
+        new KeyboardEvent('keydown', { key: EVENT_CODE.down })
+      )
+      await nextTick()
+      expect(value.value).toBe(0)
+    })
+
+    it('page up/down keys', async () => {
+      const value = ref(-1)
+      const wrapper = mount(() => (
+        <Slider v-model={value.value} min={-5} max={10} />
+      ))
+
+      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
+      slider.vm.onKeyDown(
+        new KeyboardEvent('keydown', { key: EVENT_CODE.pageUp })
+      )
+      await nextTick()
+      expect(value.value).toBe(3)
+
+      slider.vm.onKeyDown(
+        new KeyboardEvent('keydown', { key: EVENT_CODE.pageDown })
+      )
+      await nextTick()
+      expect(value.value).toBe(-1)
+    })
+
+    it('home/end keys', async () => {
+      const value = ref(0)
+      const wrapper = mount(() => (
+        <Slider v-model={value.value} min={-5} max={10} />
+      ))
+
+      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
+      slider.vm.onKeyDown(
+        new KeyboardEvent('keydown', { key: EVENT_CODE.home })
+      )
+      await nextTick()
+      expect(value.value).toBe(-5)
+
+      slider.vm.onKeyDown(new KeyboardEvent('keydown', { key: EVENT_CODE.end }))
+      await nextTick()
+      expect(value.value).toBe(10)
+    })
+  })
+
+  it('step', async () => {
+    vi.useRealTimers()
+    const value = ref(0)
+    const wrapper = mount(
+      () => (
+        <div style="width: 200px;">
+          <Slider v-model={value.value} min={0} max={1} step={0.1} />
+        </div>
+      ),
+      {
+        attachTo: document.body,
+      }
+    )
+
+    const mockClientWidth = vi
+      .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
+      .mockImplementation(() => 200)
+    const slider = wrapper.findComponent({ name: 'ElSliderButton' })
+    await nextTick()
+
+    slider.trigger('mousedown', { clientX: 0 })
+
+    const mousemove = new MouseEvent('mousemove', {
+      screenX: 100,
+      screenY: 0,
+      clientX: 100,
+      clientY: 0,
+    })
+    window.dispatchEvent(mousemove)
+
+    const mouseup = new MouseEvent('mouseup', {
+      screenX: 100,
+      screenY: 0,
+      clientX: 100,
+      clientY: 0,
+    })
+    await nextTick()
+    window.dispatchEvent(mouseup)
+    await nextTick()
+    expect(value.value === 0.5).toBeTruthy()
+    mockClientWidth.mockRestore()
+  })
+
+  it('click', async () => {
+    vi.useRealTimers()
+    const value = ref(0)
+    const wrapper = mount(() => <Slider v-model={value.value} />)
+
+    const mockClientWidth = vi
+      .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
+      .mockImplementation(() => 200)
+    const slider = wrapper.findComponent({ name: 'ElSlider' })
+    slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
+    await nextTick()
+    expect(value.value > 0).toBeTruthy()
+    mockClientWidth.mockRestore()
+  })
+
+  it('change event', async () => {
+    vi.useRealTimers()
+    const value = ref(0)
+    const data = ref(0)
+    const onChange = (val: number) => (data.value = val)
+    const wrapper = mount(() => (
+      <div style="width: 200px">
+        <Slider v-model={value.value} onChange={onChange} />
+      </div>
+    ))
+
+    const slider = wrapper.findComponent({ name: 'ElSlider' })
+    const mockRectLeft = vi
+      .spyOn(
+        wrapper.find('.el-slider__runway').element,
+        'getBoundingClientRect'
+      )
+      .mockImplementation(() => {
+        return {
+          left: 0,
+        } as DOMRect
+      })
+    const mockClientWidth = vi
+      .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
+      .mockImplementation(() => 200)
+    expect(data.value).toBe(0)
+    slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
+    await nextTick()
+    expect(data.value === 50).toBeTruthy()
+    mockRectLeft.mockRestore()
+    mockClientWidth.mockRestore()
+  })
+
+  it('input event', async () => {
+    vi.useRealTimers()
+    const value = ref(0)
+    const data = ref(0)
+    const onInput = (val: number) => (data.value = val)
+    const wrapper = mount(() => (
+      <div style="width: 200px">
+        <Slider v-model={value.value} onInput={onInput} />
+      </div>
+    ))
+
+    const slider = wrapper.findComponent({ name: 'ElSlider' })
+    const mockRectLeft = vi
+      .spyOn(
+        wrapper.find('.el-slider__runway').element,
+        'getBoundingClientRect'
+      )
+      .mockImplementation(() => {
+        return {
+          left: 0,
+        } as DOMRect
+      })
+    const mockClientWidth = vi
+      .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
+      .mockImplementation(() => 200)
+    await nextTick()
+    expect(data.value).toBe(0)
+    slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
+    await nextTick()
+    expect(data.value === 50).toBeTruthy()
+    mockRectLeft.mockRestore()
+    mockClientWidth.mockRestore()
+  })
+
+  it('disabled', async () => {
+    vi.useRealTimers()
+    const value = ref(0)
+    const wrapper = mount(() => <Slider v-model={value.value} disabled />)
+
+    const mockClientWidth = vi
+      .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
+      .mockImplementation(() => 200)
+    const slider = wrapper.findComponent({ name: 'ElSliderButton' })
+    slider.vm.onButtonDown({ clientX: 0 })
+
+    const mousemove = new MouseEvent('mousemove', {
+      screenX: 50,
+      screenY: 0,
+      clientX: 50,
+      clientY: 0,
+    })
+    window.dispatchEvent(mousemove)
+
+    const mouseup = new MouseEvent('mouseup', {
+      screenX: 50,
+      screenY: 0,
+      clientX: 50,
+      clientY: 0,
+    })
+    window.dispatchEvent(mouseup)
+    await nextTick()
+    expect(value.value).toBe(0)
+    mockClientWidth.mockRestore()
+  })
+
+  it('show input', async () => {
+    const value = ref(0)
+    const wrapper = mount(() => <Slider v-model={value.value} show-input />)
+
+    const increaseButton = wrapper.find('.el-input-number__increase')
+    await increaseButton.trigger('mousedown')
+    vi.advanceTimersByTime(200)
+    expect(value.value > 0).toBeTruthy()
+  })
+
+  it('show stops', () => {
+    const wrapper = mount(() => <Slider step={10} show-stops />)
+
+    const stops = wrapper.findAll('.el-slider__stop')
+    expect(stops.length).toBe(9)
+  })
+
+  it('vertical mode', async () => {
+    vi.useRealTimers()
+    const value = ref(0)
+    const wrapper = mount(
+      () => <Slider height="200px" v-model={value.value} vertical />,
+      {
+        attachTo: document.body,
+      }
+    )
+
+    const mockRectBottom = vi
+      .spyOn(
+        wrapper.find('.el-slider__runway').element,
+        'getBoundingClientRect'
+      )
+      .mockImplementation(() => {
+        return {
+          bottom: 200,
+        } as DOMRect
+      })
+    const mockClientHeight = vi
+      .spyOn(wrapper.find('.el-slider__runway').element, 'clientHeight', 'get')
+      .mockImplementation(() => 200)
+    const slider = wrapper.getComponent({ name: 'ElSlider' })
+    slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
+    await nextTick()
+    expect(value.value > 0).toBeTruthy()
+    mockRectBottom.mockRestore()
+    mockClientHeight.mockRestore()
+  })
+
+  it('rerender with min and show-input', async () => {
+    const value = ref(30)
+    const show = ref(false)
+    mount(
+      {
+        setup() {
+          onMounted(() => (show.value = true))
+          return () =>
+            show.value && <Slider v-model={value.value} min={10} show-input />
+        },
+      },
+      {
+        attachTo: document.body,
+      }
+    )
+
+    await nextTick()
+    expect(value.value).toEqual(30)
+  })
+
+  describe('range', () => {
+    it('basic ranged slider', () => {
+      const value = ref([10, 20])
+      const wrapper = mount(() => <Slider v-model={value.value} range />)
+
+      const sliders = wrapper.findAllComponents({ name: 'ElSliderButton' })
+      expect(sliders.length).toBe(2)
+    })
+
+    it('should not exceed min and max', async () => {
+      const value = ref([50, 60])
+      mount(() => <Slider v-model={value.value} min={50} range />)
+
+      await nextTick()
+
+      value.value = [40, 60]
+      await nextTick()
+      expect(value.value).toStrictEqual([50, 60])
+
+      value.value = [50, 120]
+      await nextTick()
+      expect(value.value).toStrictEqual([50, 100])
+    })
+
+    it('click', async () => {
+      vi.useRealTimers()
+      const value = ref([0, 100])
+      const wrapper = mount(
+        () => (
+          <div style="width: 200px;">
+            <Slider v-model={value.value} range />
+          </div>
+        ),
+        {
+          attachTo: document.body,
+        }
+      )
+
+      const mockRectLeft = vi
+        .spyOn(
+          wrapper.find('.el-slider__runway').element,
+          'getBoundingClientRect'
+        )
+        .mockImplementation(() => {
+          return {
+            left: 0,
+          } as DOMRect
+        })
+      const mockClientWidth = vi
+        .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
+        .mockImplementation(() => 200)
+      const slider = wrapper.getComponent({ name: 'ElSlider' })
+      slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
+      await nextTick()
+      // Because mock the clientWidth, so the targetValue is 50.
+      // The behavior of the setPosition method in the useSlider.ts file should be that the value of the second button is 50
+      expect(value.value[0] === 0).toBeTruthy()
+      expect(value.value[1] === 50).toBeTruthy()
+      mockRectLeft.mockRestore()
+      mockClientWidth.mockRestore()
+    })
+
+    it('responsive to dynamic min and max', async () => {
+      const min = ref(0)
+      const max = ref(100)
+      const value = ref([50, 80])
+      mount(() => (
+        <Slider v-model={value.value} min={min.value} max={max.value} range />
+      ))
+
+      await nextTick()
+
+      min.value = 60
+      await nextTick()
+      expect(value.value).toStrictEqual([60, 80])
+
+      min.value = 30
+      max.value = 40
+      await nextTick()
+      expect(value.value).toStrictEqual([40, 40])
+    })
+
+    it('show stops', async () => {
+      const value = ref([30, 60])
+      const wrapper = mount(() => (
+        <Slider v-model={value.value} step={10} range show-stops />
+      ))
+
+      await nextTick()
+      const stops = wrapper.findAll('.el-slider__stop')
+      expect(stops.length).toBe(5)
+    })
+
+    it('marks', async () => {
+      const value = ref([30, 60])
+      const marksValue = ref({
+        0: '0°C',
+        8: '8°C',
+        37: '37°C',
+        50: {
+          style: {
+            color: '#f50',
+          },
+          label: h('strong', '50°C'),
+        },
+      })
+      const wrapper = mount(() => (
+        <Slider
+          v-model={value.value}
+          min={20}
+          step={10}
+          marks={marksValue.value}
+          range
+          show-stops
+        />
+      ))
+
+      await nextTick()
+      const stops = wrapper.findAll('.el-slider__marks-stop.el-slider__stop')
+      const marks = wrapper.findAll('.el-slider__marks .el-slider__marks-text')
+      expect(marks.length).toBe(2)
+      expect(stops.length).toBe(2)
+    })
+  })
+
+  describe('form item accessibility integration', () => {
+    it('automatic id attachment', async () => {
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <Slider />
+        </ElFormItem>
+      ))
+
+      await nextTick()
+      const formItem = wrapper.find('[data-test-ref="item"]')
+      const formItemLabel = formItem.find('.el-form-item__label')
+      const sliderButton = wrapper.find('.el-slider__button-wrapper')
+      expect(formItem.attributes().role).toBeFalsy()
+      expect(formItemLabel.attributes().for).toBe(sliderButton.attributes().id)
+    })
+
+    it('range with automatic id attachment', async () => {
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <Slider range />
+        </ElFormItem>
+      ))
+
+      await nextTick()
+      const formItem = wrapper.find('[data-test-ref="item"]')
+      const formItemLabel = formItem.find('.el-form-item__label')
+      const sliderWrapper = wrapper.find('.el-slider')
+      expect(formItem.attributes().role).toBeFalsy()
+      expect(formItemLabel.attributes().for).toBe(sliderWrapper.attributes().id)
+    })
+
+    it('specified id attachment', async () => {
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <Slider id="foobar" />
+        </ElFormItem>
+      ))
+
+      await nextTick()
+      const formItem = wrapper.find('[data-test-ref="item"]')
+      const formItemLabel = formItem.find('.el-form-item__label')
+      const sliderButton = wrapper.find('.el-slider__button-wrapper')
+      expect(formItem.attributes().role).toBeFalsy()
+      expect(sliderButton.attributes().id).toBe('foobar')
+      expect(formItemLabel.attributes().for).toBe(sliderButton.attributes().id)
+    })
+
+    it('range with specified id attachment', async () => {
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <Slider id="foobar" range />
+        </ElFormItem>
+      ))
+
+      await nextTick()
+      const formItem = wrapper.find('[data-test-ref="item"]')
+      const formItemLabel = formItem.find('.el-form-item__label')
+      const sliderWrapper = wrapper.find('.el-slider')
+      expect(formItem.attributes().role).toBeFalsy()
+      expect(sliderWrapper.attributes().id).toBe('foobar')
+      expect(formItemLabel.attributes().for).toBe(sliderWrapper.attributes().id)
+    })
+
+    it('form item role is group when multiple inputs', async () => {
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <Slider />
+          <Slider />
+        </ElFormItem>
+      ))
+
+      await nextTick()
+      const formItem = wrapper.find('[data-test-ref="item"]')
+      expect(formItem.attributes().role).toBe('group')
+    })
+  })
+})

From ed174ff73fea164c021857b4bd56d6c76ea8f877 Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Wed, 22 Jun 2022 01:01:11 +0800
Subject: [PATCH 17/48] refactor(components): [popover] switch to script-setup
 syntax (#8273)

---
 .../popover/__tests__/directive.test.ts       |   2 +-
 .../popover/__tests__/popover.test.ts         |   2 +-
 packages/components/popover/index.ts          |  36 ++---
 packages/components/popover/src/directive.ts  |   5 +-
 packages/components/popover/src/index.vue     | 136 ------------------
 packages/components/popover/src/popover.ts    |  18 ++-
 packages/components/popover/src/popover.vue   | 109 ++++++++++++++
 packages/utils/vue/install.ts                 |   8 ++
 8 files changed, 149 insertions(+), 167 deletions(-)
 delete mode 100644 packages/components/popover/src/index.vue
 create mode 100644 packages/components/popover/src/popover.vue

diff --git a/packages/components/popover/__tests__/directive.test.ts b/packages/components/popover/__tests__/directive.test.ts
index c2db6b8bda984..f13c6f7ded33b 100644
--- a/packages/components/popover/__tests__/directive.test.ts
+++ b/packages/components/popover/__tests__/directive.test.ts
@@ -2,7 +2,7 @@ import { nextTick, ref } from 'vue'
 import { afterEach, describe, expect, test } from 'vitest'
 import makeMount from '@element-plus/test-utils/make-mount'
 import { rAF } from '@element-plus/test-utils/tick'
-import Popover from '../src/index.vue'
+import Popover from '../src/popover.vue'
 import PopoverDirective, { VPopover } from '../src/directive'
 
 const AXIOM = 'Rem is the best girl'
diff --git a/packages/components/popover/__tests__/popover.test.ts b/packages/components/popover/__tests__/popover.test.ts
index 9764ddf56c90d..f0c381d4a0c53 100644
--- a/packages/components/popover/__tests__/popover.test.ts
+++ b/packages/components/popover/__tests__/popover.test.ts
@@ -4,7 +4,7 @@ import { POPPER_CONTAINER_SELECTOR, useZIndex } from '@element-plus/hooks'
 import makeMount from '@element-plus/test-utils/make-mount'
 import { rAF } from '@element-plus/test-utils/tick'
 import { ElPopperTrigger } from '@element-plus/components/popper'
-import Popover from '../src/index.vue'
+import Popover from '../src/popover.vue'
 
 const AXIOM = 'Rem is the best girl'
 
diff --git a/packages/components/popover/index.ts b/packages/components/popover/index.ts
index 91afb371eb1f5..bd0ad3ecf492f 100644
--- a/packages/components/popover/index.ts
+++ b/packages/components/popover/index.ts
@@ -1,28 +1,16 @@
-import Popover from './src/index.vue'
-import PopoverDirective, { VPopover } from './src/directive'
-
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils'
+import { withInstall, withInstallDirective } from '@element-plus/utils'
 
-Popover.install = (app: App): void => {
-  app.component(Popover.name, Popover)
-}
-;(PopoverDirective as SFCWithInstall<typeof PopoverDirective>).install = (
-  app: App
-) => {
-  app.directive(VPopover, PopoverDirective)
-}
-
-const _PopoverDirective = PopoverDirective as SFCWithInstall<
-  typeof PopoverDirective
->
+import Popover from './src/popover.vue'
+import PopoverDirective, { VPopover } from './src/directive'
 
-Popover.directive = _PopoverDirective
+export const ElPopoverDirective = withInstallDirective(
+  PopoverDirective,
+  VPopover
+)
 
-const _Popover = Popover as any as SFCWithInstall<typeof Popover> & {
-  directive: typeof _PopoverDirective
-}
+export const ElPopover = withInstall(Popover, {
+  directive: ElPopoverDirective,
+})
+export default ElPopover
 
-export default _Popover
-export const ElPopover = _Popover
-export const ElPopoverDirective = _PopoverDirective
+export * from './src/popover'
diff --git a/packages/components/popover/src/directive.ts b/packages/components/popover/src/directive.ts
index 8c1eb42ef108b..bde11f7545af0 100644
--- a/packages/components/popover/src/directive.ts
+++ b/packages/components/popover/src/directive.ts
@@ -1,9 +1,8 @@
-import type ElPopover from './index.vue'
 import type { DirectiveBinding, ObjectDirective } from 'vue'
+import type { PopoverInstance } from './popover'
 
 const attachEvents = (el: HTMLElement, binding: DirectiveBinding) => {
-  const popperComponent: InstanceType<typeof ElPopover> =
-    binding.arg || binding.value
+  const popperComponent: PopoverInstance = binding.arg || binding.value
   const popover = popperComponent?.popperRef
   if (popover) {
     popover.triggerRef = el
diff --git a/packages/components/popover/src/index.vue b/packages/components/popover/src/index.vue
deleted file mode 100644
index ca572c1af382c..0000000000000
--- a/packages/components/popover/src/index.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <el-tooltip
-    ref="tooltipRef"
-    v-bind="$attrs"
-    :trigger="trigger"
-    :placement="placement"
-    :disabled="disabled"
-    :visible="visible"
-    :transition="transition"
-    :popper-options="popperOptions"
-    :tabindex="tabindex"
-    :content="content"
-    :offset="offset"
-    :show-after="showAfter"
-    :hide-after="hideAfter"
-    :auto-close="autoClose"
-    :show-arrow="showArrow"
-    :aria-label="title"
-    :effect="effect"
-    :enterable="enterable"
-    :popper-class="kls"
-    :popper-style="style"
-    :teleported="teleported"
-    :persistent="persistent"
-    :gpu-acceleration="gpuAcceleration"
-    @before-show="beforeEnter"
-    @before-hide="beforeLeave"
-    @show="afterEnter"
-    @hide="afterLeave"
-  >
-    <template v-if="$slots.reference">
-      <slot name="reference" />
-    </template>
-
-    <template #content>
-      <div v-if="title" :class="ns.e('title')" role="title">
-        {{ title }}
-      </div>
-      <slot>
-        {{ content }}
-      </slot>
-    </template>
-  </el-tooltip>
-</template>
-<script lang="ts">
-import { computed, defineComponent, ref, unref } from 'vue'
-import ElTooltip from '@element-plus/components/tooltip'
-import { isString } from '@element-plus/utils'
-import { useNamespace } from '@element-plus/hooks'
-import { usePopoverProps } from './popover'
-
-import type { StyleValue } from 'vue'
-
-const emits = [
-  'update:visible',
-  'before-enter',
-  'before-leave',
-  'after-enter',
-  'after-leave',
-]
-
-const COMPONENT_NAME = 'ElPopover'
-
-export default defineComponent({
-  name: COMPONENT_NAME,
-  components: {
-    ElTooltip,
-  },
-  props: usePopoverProps,
-  emits,
-  setup(props, { emit }) {
-    const ns = useNamespace('popover')
-    const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)
-    const popperRef = computed(() => {
-      return unref(tooltipRef)?.popperRef
-    })
-    const width = computed(() => {
-      if (isString(props.width)) {
-        return props.width as string
-      }
-      return `${props.width}px`
-    })
-
-    const style = computed(() => {
-      return [
-        {
-          width: width.value,
-        },
-        props.popperStyle,
-      ] as StyleValue
-    })
-
-    const kls = computed(() => {
-      return [ns.b(), props.popperClass, { [ns.m('plain')]: !!props.content }]
-    })
-
-    const gpuAcceleration = computed(() => {
-      return props.transition === 'el-fade-in-linear'
-    })
-
-    const hide = () => {
-      tooltipRef.value?.hide()
-    }
-
-    const beforeEnter = () => {
-      emit('before-enter')
-    }
-    const beforeLeave = () => {
-      emit('before-leave')
-    }
-
-    const afterEnter = () => {
-      emit('after-enter')
-    }
-
-    const afterLeave = () => {
-      emit('update:visible', false)
-      emit('after-leave')
-    }
-
-    return {
-      ns,
-      kls,
-      gpuAcceleration,
-      style,
-      tooltipRef,
-      popperRef,
-      hide,
-      beforeEnter,
-      beforeLeave,
-      afterEnter,
-      afterLeave,
-    }
-  },
-})
-</script>
diff --git a/packages/components/popover/src/popover.ts b/packages/components/popover/src/popover.ts
index dec7f228d664a..857fb264211dd 100644
--- a/packages/components/popover/src/popover.ts
+++ b/packages/components/popover/src/popover.ts
@@ -1,11 +1,13 @@
-import { buildProps } from '@element-plus/utils'
+import { buildProps, isBoolean } from '@element-plus/utils'
 import {
   useTooltipContentProps,
   useTooltipTriggerProps,
 } from '@element-plus/components/tooltip'
 import { dropdownProps } from '@element-plus/components/dropdown'
+import type { ExtractPropTypes } from 'vue'
+import type Popover from './popover.vue'
 
-export const usePopoverProps = buildProps({
+export const popoverProps = buildProps({
   trigger: useTooltipTriggerProps.trigger,
   placement: dropdownProps.placement,
   disabled: useTooltipTriggerProps.disabled,
@@ -56,3 +58,15 @@ export const usePopoverProps = buildProps({
     default: true,
   },
 } as const)
+export type PopoverProps = ExtractPropTypes<typeof popoverProps>
+
+export const popoverEmits = {
+  'update:visible': (value: boolean) => isBoolean(value),
+  'before-enter': () => true,
+  'before-leave': () => true,
+  'after-enter': () => true,
+  'after-leave': () => true,
+}
+export type PopoverEmits = typeof popoverEmits
+
+export type PopoverInstance = InstanceType<typeof Popover>
diff --git a/packages/components/popover/src/popover.vue b/packages/components/popover/src/popover.vue
new file mode 100644
index 0000000000000..daaf2b7784cdc
--- /dev/null
+++ b/packages/components/popover/src/popover.vue
@@ -0,0 +1,109 @@
+<template>
+  <el-tooltip
+    ref="tooltipRef"
+    v-bind="$attrs"
+    :trigger="trigger"
+    :placement="placement"
+    :disabled="disabled"
+    :visible="visible"
+    :transition="transition"
+    :popper-options="popperOptions"
+    :tabindex="tabindex"
+    :content="content"
+    :offset="offset"
+    :show-after="showAfter"
+    :hide-after="hideAfter"
+    :auto-close="autoClose"
+    :show-arrow="showArrow"
+    :aria-label="title"
+    :effect="effect"
+    :enterable="enterable"
+    :popper-class="kls"
+    :popper-style="style"
+    :teleported="teleported"
+    :persistent="persistent"
+    :gpu-acceleration="gpuAcceleration"
+    @before-show="beforeEnter"
+    @before-hide="beforeLeave"
+    @show="afterEnter"
+    @hide="afterLeave"
+  >
+    <template v-if="$slots.reference">
+      <slot name="reference" />
+    </template>
+
+    <template #content>
+      <div v-if="title" :class="ns.e('title')" role="title">
+        {{ title }}
+      </div>
+      <slot>
+        {{ content }}
+      </slot>
+    </template>
+  </el-tooltip>
+</template>
+<script lang="ts" setup>
+import { computed, ref, unref } from 'vue'
+import { ElTooltip } from '@element-plus/components/tooltip'
+import { addUnit } from '@element-plus/utils'
+import { useNamespace } from '@element-plus/hooks'
+import { popoverEmits, popoverProps } from './popover'
+import type { TooltipInstance } from '@element-plus/components/tooltip'
+
+defineOptions({
+  name: 'ElPopover',
+})
+
+const props = defineProps(popoverProps)
+const emit = defineEmits(popoverEmits)
+
+const ns = useNamespace('popover')
+const tooltipRef = ref<TooltipInstance>()
+const popperRef = computed(() => {
+  return unref(tooltipRef)?.popperRef
+})
+
+const style = computed(() => {
+  return [
+    {
+      width: addUnit(props.width),
+    },
+    props.popperStyle!,
+  ]
+})
+
+const kls = computed(() => {
+  return [ns.b(), props.popperClass!, { [ns.m('plain')]: !!props.content }]
+})
+
+const gpuAcceleration = computed(() => {
+  return props.transition === 'el-fade-in-linear'
+})
+
+const hide = () => {
+  tooltipRef.value?.hide()
+}
+
+const beforeEnter = () => {
+  emit('before-enter')
+}
+const beforeLeave = () => {
+  emit('before-leave')
+}
+
+const afterEnter = () => {
+  emit('after-enter')
+}
+
+const afterLeave = () => {
+  emit('update:visible', false)
+  emit('after-leave')
+}
+
+defineExpose({
+  /** @description popper ref */
+  popperRef,
+  /** @description hide popover */
+  hide,
+})
+</script>
diff --git a/packages/utils/vue/install.ts b/packages/utils/vue/install.ts
index d2bea3748abb8..fe1c5125893d5 100644
--- a/packages/utils/vue/install.ts
+++ b/packages/utils/vue/install.ts
@@ -30,6 +30,14 @@ export const withInstallFunction = <T>(fn: T, name: string) => {
   return fn as SFCInstallWithContext<T>
 }
 
+export const withInstallDirective = <T>(directive: T, name: string) => {
+  ;(directive as SFCWithInstall<T>).install = (app: App): void => {
+    app.directive(name, directive)
+  }
+
+  return directive as SFCWithInstall<T>
+}
+
 export const withNoopInstall = <T>(component: T) => {
   ;(component as SFCWithInstall<T>).install = NOOP
 

From 7097940f4a81cbd28848fb05a6781dbe40dec0b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Wed, 22 Jun 2022 08:04:42 +0800
Subject: [PATCH 18/48] refactor: add ts-nocheck and check all files (#8401)

---
 internal/build/src/tasks/types-definitions.ts | 37 +++++---------
 internal/build/src/type-unsafe-stricter.json  | 51 -------------------
 internal/eslint-config/index.js               |  1 +
 package.json                                  |  2 +-
 .../__tests__/cascader-panel.test.ts          |  1 +
 .../components/cascader-panel/src/index.vue   |  1 +
 .../cascader-panel/src/node-content.ts        |  1 +
 .../components/cascader-panel/src/node.ts     |  1 +
 .../components/cascader-panel/src/node.vue    |  1 +
 .../components/cascader-panel/src/types.ts    |  1 +
 .../components/cascader-panel/src/utils.ts    |  1 +
 .../cascader/__tests__/cascader.test.ts       |  1 +
 packages/components/cascader/src/index.vue    |  1 +
 .../checkbox/__tests__/checkbox.test.tsx      |  1 +
 .../checkbox/src/checkbox-group.vue           |  1 +
 .../__tests__/color-picker.test.ts            |  1 +
 packages/components/color-picker/src/color.ts |  1 +
 .../src/components/alpha-slider.vue           |  1 +
 .../src/components/hue-slider.vue             |  1 +
 .../color-picker/src/components/predefine.vue |  1 +
 .../color-picker/src/components/sv-panel.vue  |  1 +
 .../components/color-picker/src/index.vue     |  1 +
 .../date-picker/__tests__/date-picker.test.ts |  1 +
 .../__tests__/date-time-picker.test.ts        |  1 +
 .../__tests__/descriptions.test.tsx           |  1 +
 .../descriptions/src/descriptions-cell.ts     |  1 +
 .../descriptions/src/descriptions-row.vue     |  1 +
 .../components/descriptions/src/index.vue     |  1 +
 packages/components/dialog/src/use-dialog.ts  |  1 +
 .../drawer/__tests__/drawer.test.ts           |  1 +
 .../dropdown/__tests__/dropdown.test.ts       |  1 +
 .../dropdown/src/dropdown-item-impl.vue       |  1 +
 .../components/dropdown/src/dropdown-menu.vue |  1 +
 packages/components/dropdown/src/dropdown.ts  |  1 +
 packages/components/dropdown/src/dropdown.vue |  1 +
 .../components/dropdown/src/useDropdown.ts    |  1 +
 .../components/form/__tests__/form.test.tsx   |  1 +
 .../__tests__/infinite-scroll.test.ts         |  1 +
 .../components/infinite-scroll/src/index.ts   |  1 +
 .../components/input/__tests__/input.test.tsx |  1 +
 .../loading/__tests__/loading.test.ts         |  1 +
 packages/components/loading/src/directive.ts  |  1 +
 packages/components/loading/src/service.ts    |  1 +
 .../components/menu/__tests__/menu.test.ts    |  1 +
 packages/components/menu/src/menu-item.vue    |  1 +
 .../components/menu/src/utils/menu-item.ts    |  1 +
 packages/components/menu/src/utils/submenu.ts |  1 +
 .../message-box/__tests__/message-box.test.ts |  1 +
 packages/components/message-box/src/index.vue |  1 +
 .../components/message-box/src/messageBox.ts  |  1 +
 .../__tests__/notification.test.ts            |  1 +
 .../notification/src/notification.vue         |  1 +
 .../pagination/src/components/sizes.vue       |  1 +
 .../popover/__tests__/directive.test.ts       |  1 +
 .../popover/__tests__/popover.test.ts         |  1 +
 packages/components/popper/src/content.vue    |  1 +
 packages/components/popper/src/trigger.vue    |  1 +
 packages/components/progress/src/progress.vue |  1 +
 .../components/radio/__tests__/radio.test.tsx |  1 +
 packages/components/rate/src/rate.vue         |  1 +
 .../result/__tests__/result.test.tsx          |  1 +
 .../__tests__/roving-focus-group.test.ts      |  1 +
 .../__tests__/roving-focus-item.test.ts       |  1 +
 .../components/scrollbar/src/scrollbar.vue    |  2 +
 .../select-v2/__tests__/select.test.ts        |  1 +
 .../components/select-v2/src/group-item.vue   |  1 +
 .../components/select-v2/src/option-item.vue  |  1 +
 .../select-v2/src/select-dropdown.tsx         |  1 +
 .../select-v2/src/useAllowCreate.ts           |  1 +
 packages/components/select-v2/src/useInput.ts |  1 +
 .../components/select-v2/src/useOption.ts     |  1 +
 .../components/select-v2/src/useSelect.ts     |  1 +
 packages/components/select-v2/src/util.ts     |  1 +
 .../select/__tests__/select.test.ts           |  1 +
 .../components/select/src/option-group.vue    |  1 +
 packages/components/select/src/option.vue     |  1 +
 packages/components/select/src/select.vue     |  1 +
 packages/components/select/src/useOption.ts   |  1 +
 packages/components/select/src/useSelect.ts   |  1 +
 .../slider/__tests__/slider.test.tsx          |  1 +
 packages/components/steps/src/item.vue        |  1 +
 .../switch/__tests__/switch.test.tsx          |  1 +
 .../table-v2/src/composables/use-columns.ts   |  1 +
 packages/components/table-v2/src/table-v2.tsx |  1 +
 .../table/__tests__/table-column.test.ts      |  1 +
 .../components/table/__tests__/table.test.ts  |  1 +
 packages/components/table/src/config.ts       |  1 +
 .../components/table/src/filter-panel.vue     |  1 +
 packages/components/table/src/h-helper.ts     |  1 +
 .../components/table/src/layout-observer.ts   |  1 +
 .../components/table/src/store/current.ts     |  1 +
 packages/components/table/src/store/expand.ts |  1 +
 packages/components/table/src/store/helper.ts |  1 +
 packages/components/table/src/store/index.ts  |  1 +
 packages/components/table/src/store/tree.ts   |  1 +
 .../components/table/src/store/watcher.ts     |  1 +
 .../table/src/table-body/defaults.ts          |  1 +
 .../table/src/table-body/events-helper.ts     |  1 +
 .../components/table/src/table-body/index.ts  |  1 +
 .../table/src/table-body/render-helper.ts     |  1 +
 .../table/src/table-body/styles-helper.ts     |  1 +
 .../table/src/table-column/defaults.ts        |  1 +
 .../table/src/table-column/index.ts           |  1 +
 .../table/src/table-column/render-helper.ts   |  1 +
 .../table/src/table-column/watcher-helper.ts  |  1 +
 .../table/src/table-footer/index.ts           |  1 +
 .../table/src/table-header/event-helper.ts    |  1 +
 .../table/src/table-header/index.ts           |  1 +
 .../table/src/table-header/utils-helper.ts    |  1 +
 packages/components/table/src/table-layout.ts |  1 +
 packages/components/table/src/table.vue       |  1 +
 .../components/table/src/table/defaults.ts    |  1 +
 .../table/src/table/style-helper.ts           |  1 +
 .../table/src/table/utils-helper.ts           |  1 +
 packages/components/table/src/util.ts         |  1 +
 .../components/tabs/__tests__/tabs.test.ts    |  1 +
 packages/components/tabs/src/tab-bar.vue      |  1 +
 packages/components/tabs/src/tab-nav.tsx      |  1 +
 .../time-picker/__tests__/time-picker.test.ts |  1 +
 .../time-select/__tests__/time-select.test.ts |  1 +
 .../components/tooltip-v2/src/tooltip.vue     |  1 +
 .../tooltip/__tests__/content.test.ts         |  1 +
 packages/components/tooltip/src/tooltip.ts    |  1 +
 .../transfer/__tests__/transfer.test.ts       |  1 +
 packages/components/transfer/src/index.vue    |  1 +
 .../transfer/src/transfer-panel.vue           |  1 +
 packages/components/transfer/src/transfer.ts  |  1 +
 packages/components/transfer/src/useCheck.ts  |  1 +
 .../transfer/src/useCheckedChange.ts          |  1 +
 .../transfer/src/useComputedData.ts           |  1 +
 packages/components/transfer/src/useMove.ts   |  1 +
 packages/components/tree-select/src/select.ts |  1 +
 .../tree-select/src/tree-select.vue           |  1 +
 packages/components/tree-select/src/tree.ts   |  1 +
 .../components/tree-v2/__tests__/tree.test.ts |  1 +
 .../tree-v2/src/composables/useTree.ts        |  1 +
 packages/components/tree-v2/src/tree-node.vue |  1 +
 .../components/tree/__tests__/tree.test.ts    |  1 +
 packages/components/tree/src/model/node.ts    |  1 +
 .../components/tree/src/model/tree-store.ts   |  1 +
 .../components/tree/src/model/useDragNode.ts  |  1 +
 .../components/tree/src/model/useKeydown.ts   |  1 +
 .../src/model/useNodeExpandEventBroadcast.ts  |  1 +
 .../components/tree/src/tree-node-content.vue |  1 +
 packages/components/tree/src/tree-node.vue    |  1 +
 packages/components/tree/src/tree.vue         |  1 +
 .../__tests__/dynamic-size-list.test.ts       |  1 +
 .../__tests__/fixed-size-list.test.ts         |  1 +
 .../virtual-list/__tests__/scrollbar.test.ts  |  1 +
 .../components/virtual-list/setup-mock.ts     |  1 +
 .../virtual-list/src/builders/build-grid.ts   |  1 +
 .../virtual-list/src/builders/build-list.ts   |  1 +
 .../src/components/dynamic-size-grid.ts       |  1 +
 .../virtual-list/src/components/scrollbar.ts  |  1 +
 .../virtual-list/src/hooks/use-wheel.ts       |  1 +
 packages/components/virtual-list/src/props.ts |  1 +
 packages/components/virtual-list/src/utils.ts |  1 +
 .../__tests__/click-outside.test.ts           |  1 +
 .../directives/__tests__/trap-focus.test.ts   |  1 +
 packages/directives/click-outside/index.ts    |  1 +
 packages/directives/mousewheel/index.ts       |  1 +
 packages/directives/repeat-click/index.ts     |  1 +
 packages/directives/resize/index.ts           |  1 +
 packages/directives/trap-focus/index.ts       |  1 +
 packages/element-plus/make-installer.ts       |  1 +
 packages/hooks/__tests__/use-attrs.test.tsx   |  1 +
 .../hooks/__tests__/use-floating.test.tsx     |  1 +
 .../hooks/__tests__/use-form-item.test.tsx    |  1 +
 packages/hooks/__tests__/use-locale.test.tsx  |  1 +
 packages/test-utils/make-mount.ts             |  1 +
 packages/test-utils/mock.ts                   |  1 +
 packages/utils/dom/aria.ts                    |  1 +
 tsconfig.play.json                            |  3 +-
 tsconfig.vitest.json                          |  5 +-
 tsconfig.web.json                             |  6 ++-
 175 files changed, 192 insertions(+), 82 deletions(-)
 delete mode 100644 internal/build/src/type-unsafe-stricter.json

diff --git a/internal/build/src/tasks/types-definitions.ts b/internal/build/src/tasks/types-definitions.ts
index 1aa49de2af24e..078f406b92d1d 100644
--- a/internal/build/src/tasks/types-definitions.ts
+++ b/internal/build/src/tasks/types-definitions.ts
@@ -1,6 +1,6 @@
 import process from 'process'
 import path from 'path'
-import fs from 'fs/promises'
+import { mkdir, readFile, writeFile } from 'fs/promises'
 import consola from 'consola'
 import * as vueCompiler from 'vue/compiler-sfc'
 import glob from 'fast-glob'
@@ -14,7 +14,6 @@ import {
   projRoot,
 } from '@element-plus/build-utils'
 import { pathRewriter } from '../utils'
-import typeUnsafeStricter from '../type-unsafe-stricter.json'
 import type { CompilerOptions, SourceFile } from 'ts-morph'
 
 const TSCONFIG_PATH = path.resolve(projRoot, 'tsconfig.web.json')
@@ -41,8 +40,8 @@ export const generateTypesDefinitions = async () => {
   const sourceFiles = await addSourceFiles(project)
   consola.success('Added source files')
 
-  typeCheck(project, typeUnsafeStricter)
-  consola.success('Stricter type check passed!')
+  typeCheck(project)
+  consola.success('Type check passed!')
 
   await project.emit({
     emitOnlyDtsFiles: true,
@@ -64,11 +63,11 @@ export const generateTypesDefinitions = async () => {
 
     const subTasks = emitFiles.map(async (outputFile) => {
       const filepath = outputFile.getFilePath()
-      await fs.mkdir(path.dirname(filepath), {
+      await mkdir(path.dirname(filepath), {
         recursive: true,
       })
 
-      await fs.writeFile(
+      await writeFile(
         filepath,
         pathRewriter('esm')(outputFile.getText()),
         'utf8'
@@ -109,11 +108,14 @@ async function addSourceFiles(project: Project) {
   await Promise.all([
     ...filePaths.map(async (file) => {
       if (file.endsWith('.vue')) {
-        const content = await fs.readFile(file, 'utf-8')
+        const content = await readFile(file, 'utf-8')
+        const hasTsNoCheck = content.includes('@ts-nocheck')
+
         const sfc = vueCompiler.parse(content)
         const { script, scriptSetup } = sfc.descriptor
         if (script || scriptSetup) {
-          let content = script?.content ?? ''
+          let content =
+            (hasTsNoCheck ? '// @ts-nocheck\n' : '') + (script?.content ?? '')
 
           if (scriptSetup) {
             const compiled = vueCompiler.compileScript(sfc.descriptor, {
@@ -135,7 +137,7 @@ async function addSourceFiles(project: Project) {
       }
     }),
     ...epPaths.map(async (file) => {
-      const content = await fs.readFile(path.resolve(epRoot, file), 'utf-8')
+      const content = await readFile(path.resolve(epRoot, file), 'utf-8')
       sourceFiles.push(
         project.createSourceFile(path.resolve(pkgRoot, file), content)
       )
@@ -145,21 +147,8 @@ async function addSourceFiles(project: Project) {
   return sourceFiles
 }
 
-function typeCheck(project: Project, paths: string[]) {
-  // Type unsafe list. The TS errors are not all fixed yet, so we need a list of which files are not fixed with TS errors to prevent accidental TS errors.
-  const typeUnsafePaths = paths.map((_path) => {
-    let paths = path.resolve(projRoot, _path)
-    if (_path.endsWith('/')) paths += path.sep
-    return paths
-  })
-
-  const diagnostics = project.getPreEmitDiagnostics().filter((diagnostic) => {
-    const filePath = diagnostic.getSourceFile()?.getFilePath()!
-    if (!filePath) return false
-    const file = path.normalize(filePath)
-    return !typeUnsafePaths.some((safePath) => file.startsWith(safePath))
-  })
-
+function typeCheck(project: Project) {
+  const diagnostics = project.getPreEmitDiagnostics()
   if (diagnostics.length > 0) {
     consola.error(project.formatDiagnosticsWithColorAndContext(diagnostics))
     const err = new Error('Failed to generate dts.')
diff --git a/internal/build/src/type-unsafe-stricter.json b/internal/build/src/type-unsafe-stricter.json
deleted file mode 100644
index ffe35540ad8fc..0000000000000
--- a/internal/build/src/type-unsafe-stricter.json
+++ /dev/null
@@ -1,51 +0,0 @@
-[
-  "packages/components/cascader-panel/",
-  "packages/components/cascader/",
-  "packages/components/checkbox/",
-  "packages/components/col/",
-  "packages/components/color-picker/",
-  "packages/components/descriptions/",
-  "packages/components/dialog/",
-  "packages/components/drawer/",
-  "packages/components/dropdown/",
-  "packages/components/focus-trap/",
-  "packages/components/infinite-scroll/",
-  "packages/components/input-number/",
-  "packages/components/input/",
-  "packages/components/loading/",
-  "packages/components/menu/",
-  "packages/components/message-box/",
-  "packages/components/notification/",
-  "packages/components/option-group/",
-  "packages/components/option/",
-  "packages/components/overlay/",
-  "packages/components/popconfirm/",
-  "packages/components/popover/",
-  "packages/components/popper/",
-  "packages/components/result/",
-  "packages/components/roving-focus-group/",
-  "packages/components/scrollbar/",
-  "packages/components/select-v2/",
-  "packages/components/select/",
-  "packages/components/skeleton-item/",
-  "packages/components/skeleton/",
-  "packages/components/slider/",
-  "packages/components/space/",
-  "packages/components/steps/",
-  "packages/components/table-column/",
-  "packages/components/table-v2/",
-  "packages/components/table/",
-  "packages/components/tabs/",
-  "packages/components/time-select/",
-  "packages/components/timeline-item/",
-  "packages/components/timeline/",
-  "packages/components/tooltip-v2/",
-  "packages/components/tooltip/",
-  "packages/components/transfer/",
-  "packages/components/tree-select/",
-  "packages/components/tree-v2/",
-  "packages/components/tree/",
-  "packages/components/virtual-list/",
-  "packages/components/visual-hidden/",
-  "packages/directives/"
-]
diff --git a/internal/eslint-config/index.js b/internal/eslint-config/index.js
index be96f56ad0a8c..62bb77b2df8d8 100644
--- a/internal/eslint-config/index.js
+++ b/internal/eslint-config/index.js
@@ -195,6 +195,7 @@ module.exports = defineConfig({
       'error',
       { disallowTypeAnnotations: false },
     ],
+    '@typescript-eslint/ban-ts-comment': ['off', { 'ts-ignore': false }],
 
     // vue
     'vue/no-v-html': 'off',
diff --git a/package.json b/package.json
index 2b3c2444fe56f..141f717b77c3f 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json --max-warnings 0 && pretty-quick --check --branch dev",
     "lint:fix": "eslint --fix . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json && pretty-quick --branch dev",
     "lint:commit": "commitlint --from $(git merge-base origin/dev HEAD) --to HEAD > ./commit-lint.txt",
-    "typecheck": "run-p typecheck:node typecheck:vite-config",
+    "typecheck": "run-p typecheck:web typecheck:play typecheck:node typecheck:vite-config typecheck:vitest",
     "typecheck:web": "vue-tsc -p tsconfig.web.json --composite false --noEmit",
     "typecheck:node": "tsc -p tsconfig.node.json --noEmit",
     "typecheck:play": "vue-tsc -p tsconfig.play.json --composite false --noEmit",
diff --git a/packages/components/cascader-panel/__tests__/cascader-panel.test.ts b/packages/components/cascader-panel/__tests__/cascader-panel.test.ts
index 717f0b46e7df5..cc8de5f1f3d2c 100644
--- a/packages/components/cascader-panel/__tests__/cascader-panel.test.ts
+++ b/packages/components/cascader-panel/__tests__/cascader-panel.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
diff --git a/packages/components/cascader-panel/src/index.vue b/packages/components/cascader-panel/src/index.vue
index a3f7982f90d2d..e983827f09b88 100644
--- a/packages/components/cascader-panel/src/index.vue
+++ b/packages/components/cascader-panel/src/index.vue
@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/cascader-panel/src/node-content.ts b/packages/components/cascader-panel/src/node-content.ts
index 8adf657e8f9e1..518bce9358eb6 100644
--- a/packages/components/cascader-panel/src/node-content.ts
+++ b/packages/components/cascader-panel/src/node-content.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, h } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 export default defineComponent({
diff --git a/packages/components/cascader-panel/src/node.ts b/packages/components/cascader-panel/src/node.ts
index 37321a0d3c9dd..d979a389ac9cb 100644
--- a/packages/components/cascader-panel/src/node.ts
+++ b/packages/components/cascader-panel/src/node.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { isFunction } from '@vue/shared'
 import { capitalize, isEmpty, isUndefined } from '@element-plus/utils'
 import type { VNode } from 'vue'
diff --git a/packages/components/cascader-panel/src/node.vue b/packages/components/cascader-panel/src/node.vue
index 2c6d15ca630fb..8de33aba36287 100644
--- a/packages/components/cascader-panel/src/node.vue
+++ b/packages/components/cascader-panel/src/node.vue
@@ -61,6 +61,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, inject } from 'vue'
 import ElCheckbox from '@element-plus/components/checkbox'
 import ElRadio from '@element-plus/components/radio'
diff --git a/packages/components/cascader-panel/src/types.ts b/packages/components/cascader-panel/src/types.ts
index 143c46931f7c2..16a4e4f9df1c3 100644
--- a/packages/components/cascader-panel/src/types.ts
+++ b/packages/components/cascader-panel/src/types.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { InjectionKey, VNode } from 'vue'
 import type { Nullable } from '@element-plus/utils'
 import type { default as CascaderNode } from './node'
diff --git a/packages/components/cascader-panel/src/utils.ts b/packages/components/cascader-panel/src/utils.ts
index 7caee67faae90..db11cf5a1cfdd 100644
--- a/packages/components/cascader-panel/src/utils.ts
+++ b/packages/components/cascader-panel/src/utils.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { isLeaf } from '@element-plus/utils'
 import type { default as CascaderNode } from './node'
 
diff --git a/packages/components/cascader/__tests__/cascader.test.ts b/packages/components/cascader/__tests__/cascader.test.ts
index 79b12c510e0ac..861d7338ec70c 100644
--- a/packages/components/cascader/__tests__/cascader.test.ts
+++ b/packages/components/cascader/__tests__/cascader.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, test, vi } from 'vitest'
diff --git a/packages/components/cascader/src/index.vue b/packages/components/cascader/src/index.vue
index 01cd711c91ef5..a389659695b25 100644
--- a/packages/components/cascader/src/index.vue
+++ b/packages/components/cascader/src/index.vue
@@ -191,6 +191,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/checkbox/__tests__/checkbox.test.tsx b/packages/components/checkbox/__tests__/checkbox.test.tsx
index 818574226e29a..2a417178ef136 100644
--- a/packages/components/checkbox/__tests__/checkbox.test.tsx
+++ b/packages/components/checkbox/__tests__/checkbox.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
diff --git a/packages/components/checkbox/src/checkbox-group.vue b/packages/components/checkbox/src/checkbox-group.vue
index b50787062bd7b..3c8c17daa7c58 100644
--- a/packages/components/checkbox/src/checkbox-group.vue
+++ b/packages/components/checkbox/src/checkbox-group.vue
@@ -12,6 +12,7 @@
 </template>
 
 <script lang="ts" setup>
+// @ts-nocheck
 import { computed, nextTick, provide, toRefs, watch } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { debugWarn } from '@element-plus/utils'
diff --git a/packages/components/color-picker/__tests__/color-picker.test.ts b/packages/components/color-picker/__tests__/color-picker.test.ts
index eb47f7bc1442e..3696d21acbda9 100644
--- a/packages/components/color-picker/__tests__/color-picker.test.ts
+++ b/packages/components/color-picker/__tests__/color-picker.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
diff --git a/packages/components/color-picker/src/color.ts b/packages/components/color-picker/src/color.ts
index 437bff9bbf3c9..2ef0a4ae8367a 100644
--- a/packages/components/color-picker/src/color.ts
+++ b/packages/components/color-picker/src/color.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { hasOwn } from '@element-plus/utils'
 
 const hsv2hsl = function (hue: number, sat: number, val: number) {
diff --git a/packages/components/color-picker/src/components/alpha-slider.vue b/packages/components/color-picker/src/components/alpha-slider.vue
index fea00d5b5e10a..26d1373b08680 100644
--- a/packages/components/color-picker/src/components/alpha-slider.vue
+++ b/packages/components/color-picker/src/components/alpha-slider.vue
@@ -20,6 +20,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   defineComponent,
   getCurrentInstance,
diff --git a/packages/components/color-picker/src/components/hue-slider.vue b/packages/components/color-picker/src/components/hue-slider.vue
index a309bf86e7025..93e3e5c60208d 100644
--- a/packages/components/color-picker/src/components/hue-slider.vue
+++ b/packages/components/color-picker/src/components/hue-slider.vue
@@ -13,6 +13,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/color-picker/src/components/predefine.vue b/packages/components/color-picker/src/components/predefine.vue
index e997c225b6fa0..b6f5354f93b39 100644
--- a/packages/components/color-picker/src/components/predefine.vue
+++ b/packages/components/color-picker/src/components/predefine.vue
@@ -15,6 +15,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent, ref, watch, watchEffect } from 'vue'
 import { useOptions } from '../useOption'
 import Color from '../color'
diff --git a/packages/components/color-picker/src/components/sv-panel.vue b/packages/components/color-picker/src/components/sv-panel.vue
index 6df39818d60ae..60a50f7548c0e 100644
--- a/packages/components/color-picker/src/components/sv-panel.vue
+++ b/packages/components/color-picker/src/components/sv-panel.vue
@@ -20,6 +20,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/color-picker/src/index.vue b/packages/components/color-picker/src/index.vue
index 13c3c18d221f9..449b50603b166 100644
--- a/packages/components/color-picker/src/index.vue
+++ b/packages/components/color-picker/src/index.vue
@@ -102,6 +102,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/date-picker/__tests__/date-picker.test.ts b/packages/components/date-picker/__tests__/date-picker.test.ts
index 30c3acb09ce2f..bcd8608ecda84 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.ts
+++ b/packages/components/date-picker/__tests__/date-picker.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
diff --git a/packages/components/date-picker/__tests__/date-time-picker.test.ts b/packages/components/date-picker/__tests__/date-time-picker.test.ts
index c971447fdfe3e..3f4733a2fedf0 100644
--- a/packages/components/date-picker/__tests__/date-time-picker.test.ts
+++ b/packages/components/date-picker/__tests__/date-time-picker.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it } from 'vitest'
diff --git a/packages/components/descriptions/__tests__/descriptions.test.tsx b/packages/components/descriptions/__tests__/descriptions.test.tsx
index 9232b12b8b622..2da21b6fd7816 100644
--- a/packages/components/descriptions/__tests__/descriptions.test.tsx
+++ b/packages/components/descriptions/__tests__/descriptions.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
diff --git a/packages/components/descriptions/src/descriptions-cell.ts b/packages/components/descriptions/src/descriptions-cell.ts
index 3761bc2a4036f..ed3a88cb77baf 100644
--- a/packages/components/descriptions/src/descriptions-cell.ts
+++ b/packages/components/descriptions/src/descriptions-cell.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, h, inject } from 'vue'
 import { addUnit, getNormalizedProps } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
diff --git a/packages/components/descriptions/src/descriptions-row.vue b/packages/components/descriptions/src/descriptions-row.vue
index 0152519493026..2ed8329d79235 100644
--- a/packages/components/descriptions/src/descriptions-row.vue
+++ b/packages/components/descriptions/src/descriptions-row.vue
@@ -23,6 +23,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent, inject } from 'vue'
 import DescriptionsCell from './descriptions-cell'
 import { elDescriptionsKey } from './token'
diff --git a/packages/components/descriptions/src/index.vue b/packages/components/descriptions/src/index.vue
index 42e1e16a43623..99a5f34198423 100644
--- a/packages/components/descriptions/src/index.vue
+++ b/packages/components/descriptions/src/index.vue
@@ -25,6 +25,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, provide } from 'vue'
 import { isValidComponentSize } from '@element-plus/utils'
 import { useNamespace, useSize } from '@element-plus/hooks'
diff --git a/packages/components/dialog/src/use-dialog.ts b/packages/components/dialog/src/use-dialog.ts
index 14533eb18bf3c..adf9a81b9f744 100644
--- a/packages/components/dialog/src/use-dialog.ts
+++ b/packages/components/dialog/src/use-dialog.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   computed,
   getCurrentInstance,
diff --git a/packages/components/drawer/__tests__/drawer.test.ts b/packages/components/drawer/__tests__/drawer.test.ts
index 2bbb1247bbb48..0c94b0f092c60 100644
--- a/packages/components/drawer/__tests__/drawer.test.ts
+++ b/packages/components/drawer/__tests__/drawer.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test, vi } from 'vitest'
diff --git a/packages/components/dropdown/__tests__/dropdown.test.ts b/packages/components/dropdown/__tests__/dropdown.test.ts
index c0097b9cb2158..9ef87177ccf06 100644
--- a/packages/components/dropdown/__tests__/dropdown.test.ts
+++ b/packages/components/dropdown/__tests__/dropdown.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test, vi } from 'vitest'
diff --git a/packages/components/dropdown/src/dropdown-item-impl.vue b/packages/components/dropdown/src/dropdown-item-impl.vue
index 9b6bff331315f..0a6c5dcbf7d23 100644
--- a/packages/components/dropdown/src/dropdown-item-impl.vue
+++ b/packages/components/dropdown/src/dropdown-item-impl.vue
@@ -25,6 +25,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, inject } from 'vue'
 import {
   ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,
diff --git a/packages/components/dropdown/src/dropdown-menu.vue b/packages/components/dropdown/src/dropdown-menu.vue
index 50a7bec9692d2..98ec993fa0108 100644
--- a/packages/components/dropdown/src/dropdown-menu.vue
+++ b/packages/components/dropdown/src/dropdown-menu.vue
@@ -15,6 +15,7 @@
   </ul>
 </template>
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, inject, unref } from 'vue'
 import { composeEventHandlers, composeRefs } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
diff --git a/packages/components/dropdown/src/dropdown.ts b/packages/components/dropdown/src/dropdown.ts
index 13a4ec21811b6..fba8fa515ffae 100644
--- a/packages/components/dropdown/src/dropdown.ts
+++ b/packages/components/dropdown/src/dropdown.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { buildProps, definePropType, iconPropType } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import { createCollectionWithScope } from '@element-plus/components/collection'
diff --git a/packages/components/dropdown/src/dropdown.vue b/packages/components/dropdown/src/dropdown.vue
index b0cdc795da6e6..4aeee8ea24116 100644
--- a/packages/components/dropdown/src/dropdown.vue
+++ b/packages/components/dropdown/src/dropdown.vue
@@ -85,6 +85,7 @@
   </div>
 </template>
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/dropdown/src/useDropdown.ts b/packages/components/dropdown/src/useDropdown.ts
index 25cca31bbc0c7..0f3cec04ef831 100644
--- a/packages/components/dropdown/src/useDropdown.ts
+++ b/packages/components/dropdown/src/useDropdown.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, inject, ref } from 'vue'
 import { addClass, generateId, on } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
diff --git a/packages/components/form/__tests__/form.test.tsx b/packages/components/form/__tests__/form.test.tsx
index 196630a054681..3f0b39835bc15 100644
--- a/packages/components/form/__tests__/form.test.tsx
+++ b/packages/components/form/__tests__/form.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, reactive, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import {
diff --git a/packages/components/infinite-scroll/__tests__/infinite-scroll.test.ts b/packages/components/infinite-scroll/__tests__/infinite-scroll.test.ts
index ab6f8786ce21b..d7b7394d0b58c 100644
--- a/packages/components/infinite-scroll/__tests__/infinite-scroll.test.ts
+++ b/packages/components/infinite-scroll/__tests__/infinite-scroll.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import {
diff --git a/packages/components/infinite-scroll/src/index.ts b/packages/components/infinite-scroll/src/index.ts
index c77005a1ab838..65ef5cd1a8b4e 100644
--- a/packages/components/infinite-scroll/src/index.ts
+++ b/packages/components/infinite-scroll/src/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { isFunction } from '@vue/shared'
 import { throttle } from 'lodash-unified'
diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx
index b6c8dd92a585f..4c62b560d830d 100644
--- a/packages/components/input/__tests__/input.test.tsx
+++ b/packages/components/input/__tests__/input.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, test, vi } from 'vitest'
diff --git a/packages/components/loading/__tests__/loading.test.ts b/packages/components/loading/__tests__/loading.test.ts
index e926e3e64a0fc..e9e95f007025a 100644
--- a/packages/components/loading/__tests__/loading.test.ts
+++ b/packages/components/loading/__tests__/loading.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, test, vi } from 'vitest'
diff --git a/packages/components/loading/src/directive.ts b/packages/components/loading/src/directive.ts
index 9e6be634dd3cf..def393bccdccc 100644
--- a/packages/components/loading/src/directive.ts
+++ b/packages/components/loading/src/directive.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { isRef, ref } from 'vue'
 import { hyphenate, isObject, isString } from '@vue/shared'
 import { Loading } from './service'
diff --git a/packages/components/loading/src/service.ts b/packages/components/loading/src/service.ts
index c07bc0fc318a4..d705791f36a54 100644
--- a/packages/components/loading/src/service.ts
+++ b/packages/components/loading/src/service.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { isString } from '@vue/shared'
 import { isClient } from '@vueuse/core'
diff --git a/packages/components/menu/__tests__/menu.test.ts b/packages/components/menu/__tests__/menu.test.ts
index b59ff45a707aa..c5c17c4c3851d 100644
--- a/packages/components/menu/__tests__/menu.test.ts
+++ b/packages/components/menu/__tests__/menu.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, test, vi } from 'vitest'
diff --git a/packages/components/menu/src/menu-item.vue b/packages/components/menu/src/menu-item.vue
index c52b7e7ca1ac1..508147b57477b 100644
--- a/packages/components/menu/src/menu-item.vue
+++ b/packages/components/menu/src/menu-item.vue
@@ -35,6 +35,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/menu/src/utils/menu-item.ts b/packages/components/menu/src/utils/menu-item.ts
index 1ab01f2a76e5e..5dc5aa415a584 100644
--- a/packages/components/menu/src/utils/menu-item.ts
+++ b/packages/components/menu/src/utils/menu-item.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { triggerEvent } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import SubMenu from './submenu'
diff --git a/packages/components/menu/src/utils/submenu.ts b/packages/components/menu/src/utils/submenu.ts
index 506db6d628f83..3dcd1eba9b412 100644
--- a/packages/components/menu/src/utils/submenu.ts
+++ b/packages/components/menu/src/utils/submenu.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { triggerEvent } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import type MenuItem from './menu-item'
diff --git a/packages/components/message-box/__tests__/message-box.test.ts b/packages/components/message-box/__tests__/message-box.test.ts
index 4453d3f3153c2..80da2d52829c1 100644
--- a/packages/components/message-box/__tests__/message-box.test.ts
+++ b/packages/components/message-box/__tests__/message-box.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { markRaw } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, test } from 'vitest'
diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue
index 85f8c81b7b806..7be248449f05b 100644
--- a/packages/components/message-box/src/index.vue
+++ b/packages/components/message-box/src/index.vue
@@ -147,6 +147,7 @@
   </transition>
 </template>
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/message-box/src/messageBox.ts b/packages/components/message-box/src/messageBox.ts
index e70d1ee852bce..6cc2b416992d6 100644
--- a/packages/components/message-box/src/messageBox.ts
+++ b/packages/components/message-box/src/messageBox.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { h, render, watch } from 'vue'
 import { isClient } from '@vueuse/core'
 import {
diff --git a/packages/components/notification/__tests__/notification.test.ts b/packages/components/notification/__tests__/notification.test.ts
index b50c5d7a62ca4..ddff2cf779b3a 100644
--- a/packages/components/notification/__tests__/notification.test.ts
+++ b/packages/components/notification/__tests__/notification.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { h, nextTick } from 'vue'
 import { describe, expect, test, vi } from 'vitest'
 import makeMount from '@element-plus/test-utils/make-mount'
diff --git a/packages/components/notification/src/notification.vue b/packages/components/notification/src/notification.vue
index 3ba4069a44ac5..89f3e27809a70 100644
--- a/packages/components/notification/src/notification.vue
+++ b/packages/components/notification/src/notification.vue
@@ -39,6 +39,7 @@
   </transition>
 </template>
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, onMounted, ref } from 'vue'
 import { useEventListener, useTimeoutFn } from '@vueuse/core'
 import { TypeComponents, TypeComponentsMap } from '@element-plus/utils'
diff --git a/packages/components/pagination/src/components/sizes.vue b/packages/components/pagination/src/components/sizes.vue
index 30421b4a33963..e392d0a82dab6 100644
--- a/packages/components/pagination/src/components/sizes.vue
+++ b/packages/components/pagination/src/components/sizes.vue
@@ -18,6 +18,7 @@
 </template>
 
 <script lang="ts" setup>
+// @ts-nocheck
 import { computed, ref, watch } from 'vue'
 import { isEqual } from 'lodash-unified'
 import { ElOption, ElSelect } from '@element-plus/components/select'
diff --git a/packages/components/popover/__tests__/directive.test.ts b/packages/components/popover/__tests__/directive.test.ts
index f13c6f7ded33b..9dfec61e0252a 100644
--- a/packages/components/popover/__tests__/directive.test.ts
+++ b/packages/components/popover/__tests__/directive.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, ref } from 'vue'
 import { afterEach, describe, expect, test } from 'vitest'
 import makeMount from '@element-plus/test-utils/make-mount'
diff --git a/packages/components/popover/__tests__/popover.test.ts b/packages/components/popover/__tests__/popover.test.ts
index f0c381d4a0c53..4d320bfd91512 100644
--- a/packages/components/popover/__tests__/popover.test.ts
+++ b/packages/components/popover/__tests__/popover.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { h, nextTick } from 'vue'
 import { afterEach, describe, expect, it, test, vi } from 'vitest'
 import { POPPER_CONTAINER_SELECTOR, useZIndex } from '@element-plus/hooks'
diff --git a/packages/components/popper/src/content.vue b/packages/components/popper/src/content.vue
index b0273a3f90ced..10e4ad519f95b 100644
--- a/packages/components/popper/src/content.vue
+++ b/packages/components/popper/src/content.vue
@@ -24,6 +24,7 @@
 </template>
 
 <script lang="ts" setup>
+// @ts-nocheck
 import {
   computed,
   inject,
diff --git a/packages/components/popper/src/trigger.vue b/packages/components/popper/src/trigger.vue
index 7ce3b79d7ffbb..c66156599718e 100644
--- a/packages/components/popper/src/trigger.vue
+++ b/packages/components/popper/src/trigger.vue
@@ -12,6 +12,7 @@
 </template>
 
 <script lang="ts" setup>
+// @ts-nocheck
 import { computed, inject, onBeforeUnmount, onMounted, watch } from 'vue'
 import { isNil } from 'lodash-unified'
 import { unrefElement } from '@vueuse/core'
diff --git a/packages/components/progress/src/progress.vue b/packages/components/progress/src/progress.vue
index 05a1dc60106cd..665ea29ef475e 100644
--- a/packages/components/progress/src/progress.vue
+++ b/packages/components/progress/src/progress.vue
@@ -77,6 +77,7 @@
 </template>
 
 <script lang="ts" setup>
+// @ts-nocheck
 import { computed } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import {
diff --git a/packages/components/radio/__tests__/radio.test.tsx b/packages/components/radio/__tests__/radio.test.tsx
index b0a2370b182cd..04a4a93e9694a 100644
--- a/packages/components/radio/__tests__/radio.test.tsx
+++ b/packages/components/radio/__tests__/radio.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, test } from 'vitest'
diff --git a/packages/components/rate/src/rate.vue b/packages/components/rate/src/rate.vue
index cd7987d0b8c7d..65f937690cffa 100644
--- a/packages/components/rate/src/rate.vue
+++ b/packages/components/rate/src/rate.vue
@@ -47,6 +47,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+// @ts-nocheck
 import { type CSSProperties, computed, inject, ref, watch } from 'vue'
 import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { hasClass, isArray, isObject } from '@element-plus/utils'
diff --git a/packages/components/result/__tests__/result.test.tsx b/packages/components/result/__tests__/result.test.tsx
index 30e3cd9178ef7..f470040e2afc6 100644
--- a/packages/components/result/__tests__/result.test.tsx
+++ b/packages/components/result/__tests__/result.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
diff --git a/packages/components/roving-focus-group/__tests__/roving-focus-group.test.ts b/packages/components/roving-focus-group/__tests__/roving-focus-group.test.ts
index fe170d860aefa..84f4afb042cf6 100644
--- a/packages/components/roving-focus-group/__tests__/roving-focus-group.test.ts
+++ b/packages/components/roving-focus-group/__tests__/roving-focus-group.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, h, inject, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
diff --git a/packages/components/roving-focus-group/__tests__/roving-focus-item.test.ts b/packages/components/roving-focus-group/__tests__/roving-focus-item.test.ts
index a169480197686..5cb83386456d4 100644
--- a/packages/components/roving-focus-group/__tests__/roving-focus-item.test.ts
+++ b/packages/components/roving-focus-group/__tests__/roving-focus-item.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, inject, nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
diff --git a/packages/components/scrollbar/src/scrollbar.vue b/packages/components/scrollbar/src/scrollbar.vue
index eb97907f41134..3310926f0d6c5 100644
--- a/packages/components/scrollbar/src/scrollbar.vue
+++ b/packages/components/scrollbar/src/scrollbar.vue
@@ -93,6 +93,8 @@ const handleScroll = () => {
   }
 }
 
+// TODO: refactor method overrides, due to script setup dts
+// @ts-nocheck
 function scrollTo(xCord: number, yCord?: number): void
 function scrollTo(options: ScrollToOptions): void
 function scrollTo(arg1: unknown, arg2?: number) {
diff --git a/packages/components/select-v2/__tests__/select.test.ts b/packages/components/select-v2/__tests__/select.test.ts
index 092e73885ec31..e543b4a86909d 100644
--- a/packages/components/select-v2/__tests__/select.test.ts
+++ b/packages/components/select-v2/__tests__/select.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { NOOP } from '@vue/shared'
 import { afterEach, describe, expect, it, vi } from 'vitest'
diff --git a/packages/components/select-v2/src/group-item.vue b/packages/components/select-v2/src/group-item.vue
index fb6dc0d91d1e2..c66eb52001dd8 100644
--- a/packages/components/select-v2/src/group-item.vue
+++ b/packages/components/select-v2/src/group-item.vue
@@ -15,6 +15,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 
diff --git a/packages/components/select-v2/src/option-item.vue b/packages/components/select-v2/src/option-item.vue
index ab0132c2d697a..126c93b9bb66f 100644
--- a/packages/components/select-v2/src/option-item.vue
+++ b/packages/components/select-v2/src/option-item.vue
@@ -19,6 +19,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { useOption } from './useOption'
diff --git a/packages/components/select-v2/src/select-dropdown.tsx b/packages/components/select-v2/src/select-dropdown.tsx
index c4cda26a7507b..d5e9cf35eff88 100644
--- a/packages/components/select-v2/src/select-dropdown.tsx
+++ b/packages/components/select-v2/src/select-dropdown.tsx
@@ -233,6 +233,7 @@ export default defineComponent({
             height={height}
             width={width}
             total={data.length}
+            // @ts-ignore - dts problem
             onKeydown={onKeydown}
           >
             {{
diff --git a/packages/components/select-v2/src/useAllowCreate.ts b/packages/components/select-v2/src/useAllowCreate.ts
index 1ec803821b8c1..62a119a2844e3 100644
--- a/packages/components/select-v2/src/useAllowCreate.ts
+++ b/packages/components/select-v2/src/useAllowCreate.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, ref } from 'vue'
 import type { ISelectProps } from './token'
 import type { Option } from './select.types'
diff --git a/packages/components/select-v2/src/useInput.ts b/packages/components/select-v2/src/useInput.ts
index bfcbacd20c635..61921af1390d9 100644
--- a/packages/components/select-v2/src/useInput.ts
+++ b/packages/components/select-v2/src/useInput.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { ref } from 'vue'
 import { isFunction } from '@vue/shared'
 import { isKorean } from '@element-plus/utils'
diff --git a/packages/components/select-v2/src/useOption.ts b/packages/components/select-v2/src/useOption.ts
index 3ab181db9105e..510b6fa83769a 100644
--- a/packages/components/select-v2/src/useOption.ts
+++ b/packages/components/select-v2/src/useOption.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IOptionProps } from './token'
 
 export function useOption(props: IOptionProps, { emit }) {
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index 8f80f60487bc4..c257655b88d03 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import { isArray, isFunction, isObject } from '@vue/shared'
 import { get, isEqual, debounce as lodashDebounce } from 'lodash-unified'
diff --git a/packages/components/select-v2/src/util.ts b/packages/components/select-v2/src/util.ts
index cda5a837621d8..ef72d6652425f 100644
--- a/packages/components/select-v2/src/util.ts
+++ b/packages/components/select-v2/src/util.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { isArray } from '@vue/shared'
 
 import type { Option, OptionGroup } from './select.types'
diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts
index ffe1796f0c5f7..390af207eeefa 100644
--- a/packages/components/select/__tests__/select.test.ts
+++ b/packages/components/select/__tests__/select.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { markRaw, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, test, vi } from 'vitest'
diff --git a/packages/components/select/src/option-group.vue b/packages/components/select/src/option-group.vue
index 342dadd0c5600..da55589352ce2 100644
--- a/packages/components/select/src/option-group.vue
+++ b/packages/components/select/src/option-group.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   defineComponent,
   getCurrentInstance,
diff --git a/packages/components/select/src/option.vue b/packages/components/select/src/option.vue
index 8b31bac547b80..eef6423f55aa1 100644
--- a/packages/components/select/src/option.vue
+++ b/packages/components/select/src/option.vue
@@ -19,6 +19,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   defineComponent,
   getCurrentInstance,
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index a821cf3021a19..461e70aa4e43e 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -260,6 +260,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/select/src/useOption.ts b/packages/components/select/src/useOption.ts
index 011e52695b7d7..f87569c49dd8a 100644
--- a/packages/components/select/src/useOption.ts
+++ b/packages/components/select/src/useOption.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, getCurrentInstance, inject, toRaw, unref, watch } from 'vue'
 import { get } from 'lodash-unified'
 import { escapeStringRegexp } from '@element-plus/utils'
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index d28fbde282374..2215bd742be58 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   computed,
   inject,
diff --git a/packages/components/slider/__tests__/slider.test.tsx b/packages/components/slider/__tests__/slider.test.tsx
index a8e1dbeb70d22..e848092171b41 100644
--- a/packages/components/slider/__tests__/slider.test.tsx
+++ b/packages/components/slider/__tests__/slider.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { h, nextTick, onMounted, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
diff --git a/packages/components/steps/src/item.vue b/packages/components/steps/src/item.vue
index b483717c90845..3384f27cc4589 100644
--- a/packages/components/steps/src/item.vue
+++ b/packages/components/steps/src/item.vue
@@ -46,6 +46,7 @@
 </template>
 
 <script lang="ts" setup>
+// @ts-nocheck
 import {
   computed,
   getCurrentInstance,
diff --git a/packages/components/switch/__tests__/switch.test.tsx b/packages/components/switch/__tests__/switch.test.tsx
index 8eaadc9ebe647..77276e06171c9 100644
--- a/packages/components/switch/__tests__/switch.test.tsx
+++ b/packages/components/switch/__tests__/switch.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { markRaw, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, test, vi } from 'vitest'
diff --git a/packages/components/table-v2/src/composables/use-columns.ts b/packages/components/table-v2/src/composables/use-columns.ts
index 1f383b16cf33d..664adf2ac9b8c 100644
--- a/packages/components/table-v2/src/composables/use-columns.ts
+++ b/packages/components/table-v2/src/composables/use-columns.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, unref } from 'vue'
 import { isObject } from '@element-plus/utils'
 import { SortOrder, oppositeOrderMap } from '../constants'
diff --git a/packages/components/table-v2/src/table-v2.tsx b/packages/components/table-v2/src/table-v2.tsx
index 689fde9b11220..70ae1d146de49 100644
--- a/packages/components/table-v2/src/table-v2.tsx
+++ b/packages/components/table-v2/src/table-v2.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, provide, unref } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { useTable } from './use-table'
diff --git a/packages/components/table/__tests__/table-column.test.ts b/packages/components/table/__tests__/table-column.test.ts
index 58164d695ac83..42896f3b34003 100644
--- a/packages/components/table/__tests__/table-column.test.ts
+++ b/packages/components/table/__tests__/table-column.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { describe, expect, it, vi } from 'vitest'
 import triggerEvent from '@element-plus/test-utils/trigger-event'
 import ElTable from '../src/table.vue'
diff --git a/packages/components/table/__tests__/table.test.ts b/packages/components/table/__tests__/table.test.ts
index 62db958dd0efe..f988ac5dc7293 100644
--- a/packages/components/table/__tests__/table.test.ts
+++ b/packages/components/table/__tests__/table.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import ElCheckbox from '@element-plus/components/checkbox'
diff --git a/packages/components/table/src/config.ts b/packages/components/table/src/config.ts
index 01041578a049a..dd9cd09614567 100644
--- a/packages/components/table/src/config.ts
+++ b/packages/components/table/src/config.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { h } from 'vue'
 import ElCheckbox from '@element-plus/components/checkbox'
 import { ElIcon } from '@element-plus/components/icon'
diff --git a/packages/components/table/src/filter-panel.vue b/packages/components/table/src/filter-panel.vue
index 3bd1a4831c32f..50ef60122d885 100644
--- a/packages/components/table/src/filter-panel.vue
+++ b/packages/components/table/src/filter-panel.vue
@@ -87,6 +87,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, getCurrentInstance, ref, watch } from 'vue'
 import ElCheckbox from '@element-plus/components/checkbox'
 import { ElIcon } from '@element-plus/components/icon'
diff --git a/packages/components/table/src/h-helper.ts b/packages/components/table/src/h-helper.ts
index a37716cb8ddfb..e7138106f9aa7 100644
--- a/packages/components/table/src/h-helper.ts
+++ b/packages/components/table/src/h-helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { h } from 'vue'
 export function hColgroup(props) {
   const isAuto = props.tableLayout === 'auto'
diff --git a/packages/components/table/src/layout-observer.ts b/packages/components/table/src/layout-observer.ts
index aeca136650a6b..b853d4c528938 100644
--- a/packages/components/table/src/layout-observer.ts
+++ b/packages/components/table/src/layout-observer.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   computed,
   getCurrentInstance,
diff --git a/packages/components/table/src/store/current.ts b/packages/components/table/src/store/current.ts
index 9991d3473fa2e..7e065b3760f37 100644
--- a/packages/components/table/src/store/current.ts
+++ b/packages/components/table/src/store/current.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getCurrentInstance, ref, unref } from 'vue'
 import { getRowIdentity } from '../util'
 
diff --git a/packages/components/table/src/store/expand.ts b/packages/components/table/src/store/expand.ts
index 138efa0a2b0d0..977b1d66a295d 100644
--- a/packages/components/table/src/store/expand.ts
+++ b/packages/components/table/src/store/expand.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getCurrentInstance, ref } from 'vue'
 import { getKeysMap, getRowIdentity, toggleRowStatus } from '../util'
 
diff --git a/packages/components/table/src/store/helper.ts b/packages/components/table/src/store/helper.ts
index cb94e2e0fac97..bb6022f8faa9a 100644
--- a/packages/components/table/src/store/helper.ts
+++ b/packages/components/table/src/store/helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { watch } from 'vue'
 import { debounce } from 'lodash-unified'
 import useStore from '.'
diff --git a/packages/components/table/src/store/index.ts b/packages/components/table/src/store/index.ts
index 64a550b7ee117..9dbe9e5ff9e77 100644
--- a/packages/components/table/src/store/index.ts
+++ b/packages/components/table/src/store/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getCurrentInstance, nextTick, unref } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import useWatcher from './watcher'
diff --git a/packages/components/table/src/store/tree.ts b/packages/components/table/src/store/tree.ts
index e785c696d37ce..b11e31a70448e 100644
--- a/packages/components/table/src/store/tree.ts
+++ b/packages/components/table/src/store/tree.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, getCurrentInstance, ref, unref, watch } from 'vue'
 import { getRowIdentity, walkTreeNode } from '../util'
 
diff --git a/packages/components/table/src/store/watcher.ts b/packages/components/table/src/store/watcher.ts
index 6d5d58ce9ba25..6003619c2f679 100644
--- a/packages/components/table/src/store/watcher.ts
+++ b/packages/components/table/src/store/watcher.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getCurrentInstance, ref, toRefs, unref, watch } from 'vue'
 import { hasOwn } from '@element-plus/utils'
 import {
diff --git a/packages/components/table/src/table-body/defaults.ts b/packages/components/table/src/table-body/defaults.ts
index 07551274cc8aa..167143d787fe4 100644
--- a/packages/components/table/src/table-body/defaults.ts
+++ b/packages/components/table/src/table-body/defaults.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { PropType } from 'vue'
 import type { Store } from '../store'
 import type {
diff --git a/packages/components/table/src/table-body/events-helper.ts b/packages/components/table/src/table-body/events-helper.ts
index f17d8a51660ac..0eab2ebf1cd80 100644
--- a/packages/components/table/src/table-body/events-helper.ts
+++ b/packages/components/table/src/table-body/events-helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { h, inject, ref } from 'vue'
 import { debounce } from 'lodash-unified'
 import { getStyle, hasClass } from '@element-plus/utils'
diff --git a/packages/components/table/src/table-body/index.ts b/packages/components/table/src/table-body/index.ts
index 4b249c6ca18a4..199893e14e99c 100644
--- a/packages/components/table/src/table-body/index.ts
+++ b/packages/components/table/src/table-body/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   defineComponent,
   getCurrentInstance,
diff --git a/packages/components/table/src/table-body/render-helper.ts b/packages/components/table/src/table-body/render-helper.ts
index ba45d96b8826c..6ec68bd3321e9 100644
--- a/packages/components/table/src/table-body/render-helper.ts
+++ b/packages/components/table/src/table-body/render-helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, h, inject } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { getRowIdentity } from '../util'
diff --git a/packages/components/table/src/table-body/styles-helper.ts b/packages/components/table/src/table-body/styles-helper.ts
index f793ce29732ad..00ea1474868e0 100644
--- a/packages/components/table/src/table-body/styles-helper.ts
+++ b/packages/components/table/src/table-body/styles-helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { inject } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import {
diff --git a/packages/components/table/src/table-column/defaults.ts b/packages/components/table/src/table-column/defaults.ts
index bc68ca1efa038..bcc3b5ebaf89f 100644
--- a/packages/components/table/src/table-column/defaults.ts
+++ b/packages/components/table/src/table-column/defaults.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ComponentInternalInstance, PropType, Ref, VNode } from 'vue'
 import type { DefaultRow, Table } from '../table/defaults'
 
diff --git a/packages/components/table/src/table-column/index.ts b/packages/components/table/src/table-column/index.ts
index 77ca0db117d9c..fb161a23c4fb5 100644
--- a/packages/components/table/src/table-column/index.ts
+++ b/packages/components/table/src/table-column/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   Fragment,
   computed,
diff --git a/packages/components/table/src/table-column/render-helper.ts b/packages/components/table/src/table-column/render-helper.ts
index 7407c6072f821..5f720b8319259 100644
--- a/packages/components/table/src/table-column/render-helper.ts
+++ b/packages/components/table/src/table-column/render-helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   Comment,
   computed,
diff --git a/packages/components/table/src/table-column/watcher-helper.ts b/packages/components/table/src/table-column/watcher-helper.ts
index e0b4973725a8c..af04495824b49 100644
--- a/packages/components/table/src/table-column/watcher-helper.ts
+++ b/packages/components/table/src/table-column/watcher-helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getCurrentInstance, watch } from 'vue'
 import { hasOwn } from '@element-plus/utils'
 import { parseMinWidth, parseWidth } from '../util'
diff --git a/packages/components/table/src/table-footer/index.ts b/packages/components/table/src/table-footer/index.ts
index 04668c16c2910..2e24462079913 100644
--- a/packages/components/table/src/table-footer/index.ts
+++ b/packages/components/table/src/table-footer/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, h } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { hColgroup } from '../h-helper'
diff --git a/packages/components/table/src/table-header/event-helper.ts b/packages/components/table/src/table-header/event-helper.ts
index a3d607d3756d7..d5f595764ecff 100644
--- a/packages/components/table/src/table-header/event-helper.ts
+++ b/packages/components/table/src/table-header/event-helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getCurrentInstance, inject, ref } from 'vue'
 import { isClient } from '@vueuse/core'
 import { addClass, hasClass, removeClass } from '@element-plus/utils'
diff --git a/packages/components/table/src/table-header/index.ts b/packages/components/table/src/table-header/index.ts
index 3e5d727fd752e..f9f175a6506d7 100644
--- a/packages/components/table/src/table-header/index.ts
+++ b/packages/components/table/src/table-header/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   defineComponent,
   getCurrentInstance,
diff --git a/packages/components/table/src/table-header/utils-helper.ts b/packages/components/table/src/table-header/utils-helper.ts
index 246f744dc6b0b..1981d16adf6c2 100644
--- a/packages/components/table/src/table-header/utils-helper.ts
+++ b/packages/components/table/src/table-header/utils-helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, inject } from 'vue'
 import { TABLE_INJECTION_KEY } from '../tokens'
 import type { TableColumnCtx } from '../table-column/defaults'
diff --git a/packages/components/table/src/table-layout.ts b/packages/components/table/src/table-layout.ts
index 1f532b640fb59..91a769f33baf8 100644
--- a/packages/components/table/src/table-layout.ts
+++ b/packages/components/table/src/table-layout.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { isRef, nextTick, ref } from 'vue'
 import { isClient } from '@vueuse/core'
 import { hasOwn } from '@element-plus/utils'
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index 74ac4c9a60d21..1962d4c656877 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -143,6 +143,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, getCurrentInstance, provide } from 'vue'
 import { debounce } from 'lodash-unified'
 import { Mousewheel } from '@element-plus/directives'
diff --git a/packages/components/table/src/table/defaults.ts b/packages/components/table/src/table/defaults.ts
index cd8a3dbba3bf9..e73ac357d3a05 100644
--- a/packages/components/table/src/table/defaults.ts
+++ b/packages/components/table/src/table/defaults.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type {
   CSSProperties,
   ComponentInternalInstance,
diff --git a/packages/components/table/src/table/style-helper.ts b/packages/components/table/src/table/style-helper.ts
index b631d6fef1e82..7c0d55a455abd 100644
--- a/packages/components/table/src/table/style-helper.ts
+++ b/packages/components/table/src/table/style-helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   computed,
   nextTick,
diff --git a/packages/components/table/src/table/utils-helper.ts b/packages/components/table/src/table/utils-helper.ts
index 8159c1d549424..1de2780387f86 100644
--- a/packages/components/table/src/table/utils-helper.ts
+++ b/packages/components/table/src/table/utils-helper.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { Store } from '../store'
 
 function useUtils<T>(store: Store<T>) {
diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts
index 3a914c3c74927..6ca130e02ef98 100644
--- a/packages/components/table/src/util.ts
+++ b/packages/components/table/src/util.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { createPopper } from '@popperjs/core'
 import { get } from 'lodash-unified'
 import escapeHtml from 'escape-html'
diff --git a/packages/components/tabs/__tests__/tabs.test.ts b/packages/components/tabs/__tests__/tabs.test.ts
index b7b6484f83112..41f8b53534c13 100644
--- a/packages/components/tabs/__tests__/tabs.test.ts
+++ b/packages/components/tabs/__tests__/tabs.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test, vi } from 'vitest'
diff --git a/packages/components/tabs/src/tab-bar.vue b/packages/components/tabs/src/tab-bar.vue
index fe881f3380159..4687e408ee824 100644
--- a/packages/components/tabs/src/tab-bar.vue
+++ b/packages/components/tabs/src/tab-bar.vue
@@ -6,6 +6,7 @@
   />
 </template>
 <script lang="ts" setup>
+// @ts-nocheck
 import { getCurrentInstance, inject, nextTick, ref, watch } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import { capitalize, throwError } from '@element-plus/utils'
diff --git a/packages/components/tabs/src/tab-nav.tsx b/packages/components/tabs/src/tab-nav.tsx
index f6aee18b23ecf..9333c4d98f945 100644
--- a/packages/components/tabs/src/tab-nav.tsx
+++ b/packages/components/tabs/src/tab-nav.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/time-picker/__tests__/time-picker.test.ts b/packages/components/time-picker/__tests__/time-picker.test.ts
index 3e356475e3ff2..155da69b65faf 100644
--- a/packages/components/time-picker/__tests__/time-picker.test.ts
+++ b/packages/components/time-picker/__tests__/time-picker.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
diff --git a/packages/components/time-select/__tests__/time-select.test.ts b/packages/components/time-select/__tests__/time-select.test.ts
index df6330fe6cfbb..8994814d1c281 100644
--- a/packages/components/time-select/__tests__/time-select.test.ts
+++ b/packages/components/time-select/__tests__/time-select.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it } from 'vitest'
diff --git a/packages/components/tooltip-v2/src/tooltip.vue b/packages/components/tooltip-v2/src/tooltip.vue
index fe993d8500b30..d9e14a57de570 100644
--- a/packages/components/tooltip-v2/src/tooltip.vue
+++ b/packages/components/tooltip-v2/src/tooltip.vue
@@ -39,6 +39,7 @@
 </template>
 
 <script setup lang="ts">
+// @ts-nocheck
 import { reactive, toRefs } from 'vue'
 import { pick } from 'lodash-unified'
 import { tooltipV2ArrowProps } from './arrow'
diff --git a/packages/components/tooltip/__tests__/content.test.ts b/packages/components/tooltip/__tests__/content.test.ts
index 0239bd91e29cb..bbafce6defd25 100644
--- a/packages/components/tooltip/__tests__/content.test.ts
+++ b/packages/components/tooltip/__tests__/content.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import {
diff --git a/packages/components/tooltip/src/tooltip.ts b/packages/components/tooltip/src/tooltip.ts
index a269ff2477847..efc3082da7f11 100644
--- a/packages/components/tooltip/src/tooltip.ts
+++ b/packages/components/tooltip/src/tooltip.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { buildProps, definePropType } from '@element-plus/utils'
 import {
   usePopperContentProps,
diff --git a/packages/components/transfer/__tests__/transfer.test.ts b/packages/components/transfer/__tests__/transfer.test.ts
index fe3272e11889c..630a5f0588290 100644
--- a/packages/components/transfer/__tests__/transfer.test.ts
+++ b/packages/components/transfer/__tests__/transfer.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
diff --git a/packages/components/transfer/src/index.vue b/packages/components/transfer/src/index.vue
index 276ab450d8302..d7d4f1aa1ae4c 100644
--- a/packages/components/transfer/src/index.vue
+++ b/packages/components/transfer/src/index.vue
@@ -54,6 +54,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/transfer/src/transfer-panel.vue b/packages/components/transfer/src/transfer-panel.vue
index 74a7a10412b7b..5a5f2931b4bec 100644
--- a/packages/components/transfer/src/transfer-panel.vue
+++ b/packages/components/transfer/src/transfer-panel.vue
@@ -52,6 +52,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, reactive, toRefs } from 'vue'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'
diff --git a/packages/components/transfer/src/transfer.ts b/packages/components/transfer/src/transfer.ts
index 2227f71360726..c7a96d9e8483d 100644
--- a/packages/components/transfer/src/transfer.ts
+++ b/packages/components/transfer/src/transfer.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { CHANGE_EVENT } from '@element-plus/constants'
 
 import type { VNode } from 'vue'
diff --git a/packages/components/transfer/src/useCheck.ts b/packages/components/transfer/src/useCheck.ts
index db1573bec3ff5..1522d6413d130 100644
--- a/packages/components/transfer/src/useCheck.ts
+++ b/packages/components/transfer/src/useCheck.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, getCurrentInstance, watch } from 'vue'
 
 import type { ExtractPropTypes } from 'vue'
diff --git a/packages/components/transfer/src/useCheckedChange.ts b/packages/components/transfer/src/useCheckedChange.ts
index 505c71a925afe..accd686f3798d 100644
--- a/packages/components/transfer/src/useCheckedChange.ts
+++ b/packages/components/transfer/src/useCheckedChange.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { Key, TransferCheckedState } from './transfer'
 
 export const LEFT_CHECK_CHANGE_EVENT = 'left-check-change'
diff --git a/packages/components/transfer/src/useComputedData.ts b/packages/components/transfer/src/useComputedData.ts
index 6b78e6a73079e..fcc2de17781ff 100644
--- a/packages/components/transfer/src/useComputedData.ts
+++ b/packages/components/transfer/src/useComputedData.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed } from 'vue'
 
 import type { TransferProps } from './transfer'
diff --git a/packages/components/transfer/src/useMove.ts b/packages/components/transfer/src/useMove.ts
index 87888c142095a..b0306475dea5d 100644
--- a/packages/components/transfer/src/useMove.ts
+++ b/packages/components/transfer/src/useMove.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 
 import type { ComputedRef } from 'vue'
diff --git a/packages/components/tree-select/src/select.ts b/packages/components/tree-select/src/select.ts
index f8a7beaf9b1db..ee784cbe777a9 100644
--- a/packages/components/tree-select/src/select.ts
+++ b/packages/components/tree-select/src/select.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, nextTick, toRefs } from 'vue'
 import { pick } from 'lodash-unified'
 import ElSelect from '@element-plus/components/select'
diff --git a/packages/components/tree-select/src/tree-select.vue b/packages/components/tree-select/src/tree-select.vue
index 0b2bb3e41bf65..c4b595229e2be 100644
--- a/packages/components/tree-select/src/tree-select.vue
+++ b/packages/components/tree-select/src/tree-select.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, h, onMounted, reactive, ref } from 'vue'
 import { pick } from 'lodash-unified'
 import ElSelect from '@element-plus/components/select'
diff --git a/packages/components/tree-select/src/tree.ts b/packages/components/tree-select/src/tree.ts
index 0067c89077ba7..f47e946a9412a 100644
--- a/packages/components/tree-select/src/tree.ts
+++ b/packages/components/tree-select/src/tree.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, nextTick, toRefs, watch } from 'vue'
 import { isEqual, pick } from 'lodash-unified'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
diff --git a/packages/components/tree-v2/__tests__/tree.test.ts b/packages/components/tree-v2/__tests__/tree.test.ts
index 549bb63c9f39a..bbc6546961752 100644
--- a/packages/components/tree-v2/__tests__/tree.test.ts
+++ b/packages/components/tree-v2/__tests__/tree.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { NOOP } from '@vue/shared'
 import { describe, expect, test, vi } from 'vitest'
diff --git a/packages/components/tree-v2/src/composables/useTree.ts b/packages/components/tree-v2/src/composables/useTree.ts
index 6cf35b6ccf7cf..c3fd37259241a 100644
--- a/packages/components/tree-v2/src/composables/useTree.ts
+++ b/packages/components/tree-v2/src/composables/useTree.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, nextTick, ref, shallowRef, watch } from 'vue'
 import {
   CURRENT_CHANGE,
diff --git a/packages/components/tree-v2/src/tree-node.vue b/packages/components/tree-v2/src/tree-node.vue
index 717eb165d4bc5..d001ac39ca719 100644
--- a/packages/components/tree-v2/src/tree-node.vue
+++ b/packages/components/tree-v2/src/tree-node.vue
@@ -49,6 +49,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, inject } from 'vue'
 import { CaretRight } from '@element-plus/icons-vue'
 import ElIcon from '@element-plus/components/icon'
diff --git a/packages/components/tree/__tests__/tree.test.ts b/packages/components/tree/__tests__/tree.test.ts
index ba4a857ffc054..e16cd762d3b85 100644
--- a/packages/components/tree/__tests__/tree.test.ts
+++ b/packages/components/tree/__tests__/tree.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test, vi } from 'vitest'
diff --git a/packages/components/tree/src/model/node.ts b/packages/components/tree/src/model/node.ts
index 76706192c8a68..bc5ddf0a869bc 100644
--- a/packages/components/tree/src/model/node.ts
+++ b/packages/components/tree/src/model/node.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { reactive } from 'vue'
 import { hasOwn } from '@element-plus/utils'
 import { NODE_KEY, markNodeData } from './util'
diff --git a/packages/components/tree/src/model/tree-store.ts b/packages/components/tree/src/model/tree-store.ts
index 91d5541ec2ddb..9cd74833ddb38 100644
--- a/packages/components/tree/src/model/tree-store.ts
+++ b/packages/components/tree/src/model/tree-store.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { hasOwn } from '@element-plus/utils'
 import Node from './node'
 import { getNodeKey } from './util'
diff --git a/packages/components/tree/src/model/useDragNode.ts b/packages/components/tree/src/model/useDragNode.ts
index 840718a61cf97..b0a883fc0fc09 100644
--- a/packages/components/tree/src/model/useDragNode.ts
+++ b/packages/components/tree/src/model/useDragNode.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { provide, ref } from 'vue'
 import { addClass, removeClass } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
diff --git a/packages/components/tree/src/model/useKeydown.ts b/packages/components/tree/src/model/useKeydown.ts
index 9bac37cd8331a..cd84d5e518643 100644
--- a/packages/components/tree/src/model/useKeydown.ts
+++ b/packages/components/tree/src/model/useKeydown.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { onBeforeUnmount, onMounted, onUpdated, shallowRef, watch } from 'vue'
 import { off, on } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
diff --git a/packages/components/tree/src/model/useNodeExpandEventBroadcast.ts b/packages/components/tree/src/model/useNodeExpandEventBroadcast.ts
index e065e42b3022e..9e93e4fa7e5bc 100644
--- a/packages/components/tree/src/model/useNodeExpandEventBroadcast.ts
+++ b/packages/components/tree/src/model/useNodeExpandEventBroadcast.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { inject, provide } from 'vue'
 import type Node from '../model/node'
 
diff --git a/packages/components/tree/src/tree-node-content.vue b/packages/components/tree/src/tree-node-content.vue
index 04db5f47b5079..8cfbb05d37d7b 100644
--- a/packages/components/tree/src/tree-node-content.vue
+++ b/packages/components/tree/src/tree-node-content.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent, h, inject } from 'vue'
 
 import { useNamespace } from '@element-plus/hooks'
diff --git a/packages/components/tree/src/tree-node.vue b/packages/components/tree/src/tree-node.vue
index 30abe439d7fc6..9c89fcce69fd0 100644
--- a/packages/components/tree/src/tree-node.vue
+++ b/packages/components/tree/src/tree-node.vue
@@ -82,6 +82,7 @@
   </div>
 </template>
 <script lang="ts">
+// @ts-nocheck
 import {
   defineComponent,
   getCurrentInstance,
diff --git a/packages/components/tree/src/tree.vue b/packages/components/tree/src/tree.vue
index c87fadade016c..574b107aa4790 100644
--- a/packages/components/tree/src/tree.vue
+++ b/packages/components/tree/src/tree.vue
@@ -34,6 +34,7 @@
   </div>
 </template>
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/virtual-list/__tests__/dynamic-size-list.test.ts b/packages/components/virtual-list/__tests__/dynamic-size-list.test.ts
index 514db203bd597..54f23991e0a6d 100644
--- a/packages/components/virtual-list/__tests__/dynamic-size-list.test.ts
+++ b/packages/components/virtual-list/__tests__/dynamic-size-list.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
 import makeMount from '@element-plus/test-utils/make-mount'
diff --git a/packages/components/virtual-list/__tests__/fixed-size-list.test.ts b/packages/components/virtual-list/__tests__/fixed-size-list.test.ts
index f9bdb5e305f17..72350688d7ed5 100644
--- a/packages/components/virtual-list/__tests__/fixed-size-list.test.ts
+++ b/packages/components/virtual-list/__tests__/fixed-size-list.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
 import makeMount from '@element-plus/test-utils/make-mount'
diff --git a/packages/components/virtual-list/__tests__/scrollbar.test.ts b/packages/components/virtual-list/__tests__/scrollbar.test.ts
index 562a79f772e6f..4902da550fbf4 100644
--- a/packages/components/virtual-list/__tests__/scrollbar.test.ts
+++ b/packages/components/virtual-list/__tests__/scrollbar.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from '@vue/runtime-core'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
diff --git a/packages/components/virtual-list/setup-mock.ts b/packages/components/virtual-list/setup-mock.ts
index af5084d8d7b04..9d086b30b0f8d 100644
--- a/packages/components/virtual-list/setup-mock.ts
+++ b/packages/components/virtual-list/setup-mock.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import defineGetter from '@element-plus/test-utils/define-getter'
 
 export default () => {
diff --git a/packages/components/virtual-list/src/builders/build-grid.ts b/packages/components/virtual-list/src/builders/build-grid.ts
index c58e91f7318ef..22e15f9a6b37c 100644
--- a/packages/components/virtual-list/src/builders/build-grid.ts
+++ b/packages/components/virtual-list/src/builders/build-grid.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/virtual-list/src/builders/build-list.ts b/packages/components/virtual-list/src/builders/build-list.ts
index ad3b6bafba92d..448688aa999e4 100644
--- a/packages/components/virtual-list/src/builders/build-list.ts
+++ b/packages/components/virtual-list/src/builders/build-list.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/virtual-list/src/components/dynamic-size-grid.ts b/packages/components/virtual-list/src/components/dynamic-size-grid.ts
index dffedc5ad9059..84065c2c7023f 100644
--- a/packages/components/virtual-list/src/components/dynamic-size-grid.ts
+++ b/packages/components/virtual-list/src/components/dynamic-size-grid.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { isFunction } from '@vue/shared'
 import { isNumber, isUndefined, throwError } from '@element-plus/utils'
 import createGrid from '../builders/build-grid'
diff --git a/packages/components/virtual-list/src/components/scrollbar.ts b/packages/components/virtual-list/src/components/scrollbar.ts
index d633349d0126b..df3285e961af2 100644
--- a/packages/components/virtual-list/src/components/scrollbar.ts
+++ b/packages/components/virtual-list/src/components/scrollbar.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   computed,
   defineComponent,
diff --git a/packages/components/virtual-list/src/hooks/use-wheel.ts b/packages/components/virtual-list/src/hooks/use-wheel.ts
index fee15c8eefcf3..5c70c0eeb356f 100644
--- a/packages/components/virtual-list/src/hooks/use-wheel.ts
+++ b/packages/components/virtual-list/src/hooks/use-wheel.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { cAF, isFirefox, rAF } from '@element-plus/utils'
 import { HORIZONTAL, VERTICAL } from '../defaults'
 
diff --git a/packages/components/virtual-list/src/props.ts b/packages/components/virtual-list/src/props.ts
index 6634dd7bcb98d..f1fb3aa476ba3 100644
--- a/packages/components/virtual-list/src/props.ts
+++ b/packages/components/virtual-list/src/props.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   buildProp,
   buildProps,
diff --git a/packages/components/virtual-list/src/utils.ts b/packages/components/virtual-list/src/utils.ts
index 92367869b9db1..c52af6b827a30 100644
--- a/packages/components/virtual-list/src/utils.ts
+++ b/packages/components/virtual-list/src/utils.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   BACKWARD,
   FORWARD,
diff --git a/packages/directives/__tests__/click-outside.test.ts b/packages/directives/__tests__/click-outside.test.ts
index 5f687db21457b..c56db3e61efc5 100644
--- a/packages/directives/__tests__/click-outside.test.ts
+++ b/packages/directives/__tests__/click-outside.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { h, withDirectives } from 'vue'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, test, vi } from 'vitest'
diff --git a/packages/directives/__tests__/trap-focus.test.ts b/packages/directives/__tests__/trap-focus.test.ts
index fb594524153fd..db3d221519451 100644
--- a/packages/directives/__tests__/trap-focus.test.ts
+++ b/packages/directives/__tests__/trap-focus.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterAll, afterEach, describe, expect, test, vi } from 'vitest'
diff --git a/packages/directives/click-outside/index.ts b/packages/directives/click-outside/index.ts
index 39f46930d47ea..94fb2a9305318 100644
--- a/packages/directives/click-outside/index.ts
+++ b/packages/directives/click-outside/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { isClient } from '@vueuse/core'
 import { isElement } from '@element-plus/utils'
 
diff --git a/packages/directives/mousewheel/index.ts b/packages/directives/mousewheel/index.ts
index f248c991865a9..6b6404df448bf 100644
--- a/packages/directives/mousewheel/index.ts
+++ b/packages/directives/mousewheel/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import normalizeWheel from 'normalize-wheel-es'
 import type { DirectiveBinding, ObjectDirective } from 'vue'
 
diff --git a/packages/directives/repeat-click/index.ts b/packages/directives/repeat-click/index.ts
index 34bdbc96990d8..61808f6528dd2 100644
--- a/packages/directives/repeat-click/index.ts
+++ b/packages/directives/repeat-click/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { on, once } from '@element-plus/utils'
 
 import type { DirectiveBinding, ObjectDirective } from 'vue'
diff --git a/packages/directives/resize/index.ts b/packages/directives/resize/index.ts
index f51bd21fabf2b..dd74e873d5740 100644
--- a/packages/directives/resize/index.ts
+++ b/packages/directives/resize/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { addResizeListener, removeResizeListener } from '@element-plus/utils'
 
 import type { DirectiveBinding, ObjectDirective } from 'vue'
diff --git a/packages/directives/trap-focus/index.ts b/packages/directives/trap-focus/index.ts
index 20055a77c9796..3faf623240525 100644
--- a/packages/directives/trap-focus/index.ts
+++ b/packages/directives/trap-focus/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { obtainAllFocusableElements, off, on } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
diff --git a/packages/element-plus/make-installer.ts b/packages/element-plus/make-installer.ts
index 71c105917649f..70860afa1371d 100644
--- a/packages/element-plus/make-installer.ts
+++ b/packages/element-plus/make-installer.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { provideGlobalConfig } from '@element-plus/hooks'
 import { INSTALLED_KEY } from '@element-plus/constants'
 import { version } from './version'
diff --git a/packages/hooks/__tests__/use-attrs.test.tsx b/packages/hooks/__tests__/use-attrs.test.tsx
index 2910d17e69748..74ffb8495bf05 100644
--- a/packages/hooks/__tests__/use-attrs.test.tsx
+++ b/packages/hooks/__tests__/use-attrs.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, defineComponent } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
diff --git a/packages/hooks/__tests__/use-floating.test.tsx b/packages/hooks/__tests__/use-floating.test.tsx
index 54badc89fb445..50a773e45aa24 100644
--- a/packages/hooks/__tests__/use-floating.test.tsx
+++ b/packages/hooks/__tests__/use-floating.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, nextTick, reactive, ref, watch } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
diff --git a/packages/hooks/__tests__/use-form-item.test.tsx b/packages/hooks/__tests__/use-form-item.test.tsx
index 79c85978ad4d1..4cb0d423c8a67 100644
--- a/packages/hooks/__tests__/use-form-item.test.tsx
+++ b/packages/hooks/__tests__/use-form-item.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, provide } from 'vue'
 import { NOOP } from '@vue/shared'
 import { mount } from '@vue/test-utils'
diff --git a/packages/hooks/__tests__/use-locale.test.tsx b/packages/hooks/__tests__/use-locale.test.tsx
index c059958202876..d7f34712c09d1 100644
--- a/packages/hooks/__tests__/use-locale.test.tsx
+++ b/packages/hooks/__tests__/use-locale.test.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, defineComponent, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
diff --git a/packages/test-utils/make-mount.ts b/packages/test-utils/make-mount.ts
index 186d2d17b07d8..a13b29b5e56e9 100644
--- a/packages/test-utils/make-mount.ts
+++ b/packages/test-utils/make-mount.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { mount } from '@vue/test-utils'
 import { merge } from 'lodash'
 
diff --git a/packages/test-utils/mock.ts b/packages/test-utils/mock.ts
index 88dae28f16065..f444895ecbf91 100644
--- a/packages/test-utils/mock.ts
+++ b/packages/test-utils/mock.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { afterAll, beforeAll } from 'vitest'
 
diff --git a/packages/utils/dom/aria.ts b/packages/utils/dom/aria.ts
index 4aa00627ab231..67e6fbe68b493 100644
--- a/packages/utils/dom/aria.ts
+++ b/packages/utils/dom/aria.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { Nullable } from '../typescript'
 
 const FOCUSABLE_ELEMENT_SELECTORS = `a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])`
diff --git a/tsconfig.play.json b/tsconfig.play.json
index c33a1d7667d99..f1ecdc86182d1 100644
--- a/tsconfig.play.json
+++ b/tsconfig.play.json
@@ -2,8 +2,7 @@
   "extends": "./tsconfig.web.json",
   "compilerOptions": {
     "allowJs": true,
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "types": []
+    "lib": ["ESNext", "DOM", "DOM.Iterable"]
   },
   "include": [
     "packages",
diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json
index f96be8b234045..894c897619406 100644
--- a/tsconfig.vitest.json
+++ b/tsconfig.vitest.json
@@ -3,8 +3,9 @@
   "compilerOptions": {
     "composite": true,
     "lib": ["ES2021", "DOM", "DOM.Iterable"],
-    "types": ["node", "jsdom"]
+    "types": ["node", "jsdom", "unplugin-vue-define-options"],
+    "skipLibCheck": true
   },
   "include": ["packages", "vitest.setup.ts"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "**/*.md"]
 }
diff --git a/tsconfig.web.json b/tsconfig.web.json
index 3792632c5c015..a4674b67a8606 100644
--- a/tsconfig.web.json
+++ b/tsconfig.web.json
@@ -4,7 +4,8 @@
     "composite": true,
     "jsx": "preserve",
     "lib": ["ES2018", "DOM", "DOM.Iterable"],
-    "types": ["unplugin-vue-define-options"]
+    "types": ["unplugin-vue-define-options"],
+    "skipLibCheck": true
   },
   "include": ["packages", "typings/components.d.ts", "typings/env.d.ts"],
   "exclude": [
@@ -13,6 +14,7 @@
     "**/__tests__/**/*",
     "**/gulpfile.ts",
     "**/test-helper",
-    "packages/test-utils"
+    "packages/test-utils",
+    "**/*.md"
   ]
 }

From 8f0341b310eeb03ac98c976ec9a123be13952f09 Mon Sep 17 00:00:00 2001
From: Hefty <yeyuqiudeng@gmail.com>
Date: Wed, 22 Jun 2022 08:23:25 +0800
Subject: [PATCH 19/48] fix(components): [space] missing empty string size
 (#8039)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>
---
 packages/components/space/src/use-space.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/components/space/src/use-space.ts b/packages/components/space/src/use-space.ts
index f8f57176f1a2e..25a06d2626921 100644
--- a/packages/components/space/src/use-space.ts
+++ b/packages/components/space/src/use-space.ts
@@ -4,13 +4,12 @@ import { useNamespace } from '@element-plus/hooks'
 
 import type { SpaceProps } from './space'
 import type { CSSProperties, StyleValue } from 'vue'
-import type { ComponentSize } from '@element-plus/constants'
 
 const SIZE_MAP = {
   small: 8,
   default: 12,
   large: 16,
-} as Record<ComponentSize, number>
+} as const
 
 export function useSpace(props: SpaceProps) {
   const ns = useNamespace('space')
@@ -57,7 +56,7 @@ export function useSpace(props: SpaceProps) {
       if (isNumber(size)) {
         val = size
       } else {
-        val = SIZE_MAP[size] || SIZE_MAP.small
+        val = SIZE_MAP[size || 'small'] || SIZE_MAP.small
       }
 
       if ((wrap || fill) && dir === 'horizontal') {

From 37ed7a15ee92b4e25d4f676d5cc9fd836c2241a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Wed, 22 Jun 2022 09:01:23 +0800
Subject: [PATCH 20/48] fix(components): [message]: offset (#8379)

* fix(components): [message]: offset

closes #7217, #8368
---
 .../__tests__/message-manager.test.tsx        |  2 +-
 .../message/__tests__/message.test.ts         |  2 +-
 packages/components/message/index.ts          |  2 +-
 packages/components/message/src/instance.ts   | 30 ++++++++++++++
 packages/components/message/src/message.ts    | 10 +----
 packages/components/message/src/message.vue   | 25 +++++++++---
 .../src/{message-method.ts => method.ts}      | 39 +++++--------------
 7 files changed, 63 insertions(+), 47 deletions(-)
 create mode 100644 packages/components/message/src/instance.ts
 rename packages/components/message/src/{message-method.ts => method.ts} (83%)

diff --git a/packages/components/message/__tests__/message-manager.test.tsx b/packages/components/message/__tests__/message-manager.test.tsx
index b3b65ea32a7b9..74b191e43ebc9 100644
--- a/packages/components/message/__tests__/message-manager.test.tsx
+++ b/packages/components/message/__tests__/message-manager.test.tsx
@@ -3,7 +3,7 @@ import { describe, expect, it, test, vi } from 'vitest'
 import { getStyle } from '@element-plus/utils'
 import { rAF } from '@element-plus/test-utils/tick'
 import { ElMessage } from '..'
-import Message from '../src/message-method'
+import Message from '../src/method'
 
 const selector = '.el-message'
 // TODO: testing the original transition with `nextTick`'
diff --git a/packages/components/message/__tests__/message.test.ts b/packages/components/message/__tests__/message.test.ts
index 478f8852064e3..8e291a1974c0a 100644
--- a/packages/components/message/__tests__/message.test.ts
+++ b/packages/components/message/__tests__/message.test.ts
@@ -36,7 +36,7 @@ describe('Message.vue', () => {
       expect(wrapper.text()).toEqual(AXIOM)
       expect(vm.visible).toBe(true)
       expect(vm.iconComponent).toBe(TypeComponentsMap['info'])
-      expect(vm.customStyle).toEqual({ top: '20px', zIndex: 0 })
+      expect(vm.customStyle).toEqual({ top: '16px', zIndex: 0 })
     })
 
     test('should be able to render VNode', () => {
diff --git a/packages/components/message/index.ts b/packages/components/message/index.ts
index 14524aac01e37..7c6dbffbb40a6 100644
--- a/packages/components/message/index.ts
+++ b/packages/components/message/index.ts
@@ -1,6 +1,6 @@
 import { withInstallFunction } from '@element-plus/utils'
 
-import Message from './src/message-method'
+import Message from './src/method'
 
 export const ElMessage = withInstallFunction(Message, '$message')
 export default ElMessage
diff --git a/packages/components/message/src/instance.ts b/packages/components/message/src/instance.ts
new file mode 100644
index 0000000000000..30e2f4133b382
--- /dev/null
+++ b/packages/components/message/src/instance.ts
@@ -0,0 +1,30 @@
+import { shallowReactive } from 'vue'
+import type { VNode } from 'vue'
+import type { Mutable } from '@element-plus/utils'
+import type { MessageHandler, MessageInstance, MessageProps } from './message'
+
+export type MessageContext = {
+  id: string
+  vnode: VNode
+  handler: MessageHandler
+  vm: MessageInstance
+  props: Mutable<MessageProps>
+}
+
+export const instances: MessageContext[] = shallowReactive([])
+
+export const getInstance = (id: string) => {
+  const idx = instances.findIndex((instance) => instance.id === id)
+  const current = instances[idx]
+  let prev: MessageContext | undefined
+  if (idx > 0) {
+    prev = instances[idx - 1]
+  }
+  return { current, prev }
+}
+
+export const getLastOffset = (id: string): number => {
+  const { prev } = getInstance(id)
+  if (!prev) return 0
+  return prev.vm.bottom
+}
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index 21546531212b9..48f6c05893147 100644
--- a/packages/components/message/src/message.ts
+++ b/packages/components/message/src/message.ts
@@ -26,7 +26,7 @@ export const messageDefaults = mutable({
   onClose: undefined,
   showClose: false,
   type: 'info',
-  offset: 20,
+  offset: 16,
   zIndex: 0,
   grouping: false,
   repeatNum: 1,
@@ -140,11 +140,3 @@ export interface Message extends MessageFn {
   info: MessageTypedFn
   error: MessageTypedFn
 }
-
-export type MessageQueueItem = {
-  vnode: VNode
-  handler: MessageHandler
-  vm: MessageInstance
-}
-
-export type MessageQueue = MessageQueueItem[]
diff --git a/packages/components/message/src/message.vue b/packages/components/message/src/message.vue
index 4e025481c1c24..464bd1a33ec55 100644
--- a/packages/components/message/src/message.vue
+++ b/packages/components/message/src/message.vue
@@ -7,6 +7,7 @@
     <div
       v-show="visible"
       :id="id"
+      ref="messageRef"
       :class="[
         ns.b(),
         { [ns.m(type)]: type && !icon },
@@ -44,13 +45,14 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue'
-import { useEventListener, useTimeoutFn } from '@vueuse/core'
+import { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'
 import { TypeComponents, TypeComponentsMap } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import ElBadge from '@element-plus/components/badge'
 import { ElIcon } from '@element-plus/components/icon'
 import { useNamespace } from '@element-plus/hooks'
 import { messageEmits, messageProps } from './message'
+import { getLastOffset } from './instance'
 import type { BadgeProps } from '@element-plus/components/badge'
 import type { CSSProperties } from 'vue'
 
@@ -64,23 +66,29 @@ const props = defineProps(messageProps)
 defineEmits(messageEmits)
 
 const ns = useNamespace('message')
+
+const messageRef = ref<HTMLDivElement>()
 const visible = ref(false)
-const badgeType = ref<BadgeProps['type']>(
-  props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'
-)
+const height = ref(0)
+
 let stopTimer: (() => void) | undefined = undefined
 
+const badgeType = computed<BadgeProps['type']>(() =>
+  props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'
+)
 const typeClass = computed(() => {
   const type = props.type
   return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }
 })
-
 const iconComponent = computed(
   () => props.icon || TypeComponentsMap[props.type] || ''
 )
 
+const lastOffset = computed(() => getLastOffset(props.id))
+const offset = computed(() => props.offset + lastOffset.value)
+const bottom = computed((): number => height.value + offset.value)
 const customStyle = computed<CSSProperties>(() => ({
-  top: `${props.offset}px`,
+  top: `${offset.value}px`,
   zIndex: props.zIndex,
 }))
 
@@ -121,8 +129,13 @@ watch(
 
 useEventListener(document, 'keydown', keydown)
 
+useResizeObserver(messageRef, () => {
+  height.value = messageRef.value!.getBoundingClientRect().height
+})
+
 defineExpose({
   visible,
+  bottom,
   close,
 })
 </script>
diff --git a/packages/components/message/src/message-method.ts b/packages/components/message/src/method.ts
similarity index 83%
rename from packages/components/message/src/message-method.ts
rename to packages/components/message/src/method.ts
index f9f83f82d3299..b53ae5c3124eb 100644
--- a/packages/components/message/src/message-method.ts
+++ b/packages/components/message/src/method.ts
@@ -12,7 +12,9 @@ import { useZIndex } from '@element-plus/hooks'
 import { messageConfig } from '@element-plus/components/config-provider/src/config-provider'
 import MessageConstructor from './message.vue'
 import { messageDefaults, messageTypes } from './message'
+import { instances } from './instance'
 
+import type { MessageContext } from './instance'
 import type { AppContext } from 'vue'
 import type {
   Message,
@@ -22,11 +24,8 @@ import type {
   MessageOptions,
   MessageParams,
   MessageParamsNormalized,
-  MessageQueue,
-  MessageQueueItem,
 } from './message'
 
-const instances: MessageQueue = []
 let seed = 1
 
 // TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.
@@ -60,49 +59,29 @@ const normalizeOptions = (params?: MessageParams) => {
   return normalized as MessageParamsNormalized
 }
 
-const closeMessage = (instance: MessageQueueItem) => {
+const closeMessage = (instance: MessageContext) => {
   const idx = instances.indexOf(instance)
   if (idx === -1) return
 
   instances.splice(idx, 1)
-  const { vnode, handler } = instance
+  const { handler } = instance
   handler.close()
-
-  const removedHeight = vnode.el!.offsetHeight
-  // adjust other instances vertical offset
-  const len = instances.length
-  if (len < 1) return
-  for (let i = idx; i < len; i++) {
-    const pos =
-      Number.parseInt(instances[i].vnode.el!.style['top'], 10) -
-      removedHeight -
-      16
-
-    instances[i].vnode.component!.props.offset = pos
-  }
 }
 
 const createMessage = (
   { appendTo, ...options }: MessageParamsNormalized,
   context?: AppContext | null
-): MessageQueueItem => {
+): MessageContext => {
   const { nextZIndex } = useZIndex()
 
   const id = `message_${seed++}`
   const userOnClose = options.onClose
 
-  let verticalOffset = options.offset
-  instances.forEach(({ vnode: vm }) => {
-    verticalOffset += (vm.el?.offsetHeight || 0) + 16
-  })
-  verticalOffset += 16
-
   const container = document.createElement('div')
 
   const props = {
     ...options,
     zIndex: options.zIndex ?? nextZIndex(),
-    offset: verticalOffset,
     id,
     onClose: () => {
       userOnClose?.()
@@ -141,10 +120,12 @@ const createMessage = (
     },
   }
 
-  const instance = {
+  const instance: MessageContext = {
+    id,
     vnode,
     vm,
     handler,
+    props: (vnode.component as any).props,
   }
 
   return instance
@@ -168,8 +149,8 @@ const message: MessageFn &
       ({ vnode: vm }) => vm.props?.message === normalized.message
     )
     if (instance) {
-      ;(instance.vnode.component as any).props.repeatNum += 1
-      ;(instance.vnode.component as any).props.type = normalized.type
+      instance.props.repeatNum += 1
+      instance.props.type = normalized.type
       return instance.handler
     }
   }

From 63847a981facad49a1afd33eb0c53d2146b6849e Mon Sep 17 00:00:00 2001
From: LIUCHAO <50739490+Tsong-LC@users.noreply.github.com>
Date: Wed, 22 Jun 2022 09:29:27 +0800
Subject: [PATCH 21/48] docs(components): [message-box] add customized icon for
 examples (#8381)

---
 docs/en-US/component/message-box.md           | 10 ++++++++++
 docs/examples/message-box/customized-icon.vue | 20 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 docs/examples/message-box/customized-icon.vue

diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md
index b1e31f6d773a3..795a4481e09fd 100644
--- a/docs/en-US/component/message-box.md
+++ b/docs/en-US/component/message-box.md
@@ -95,6 +95,16 @@ message-box/centered-content
 
 :::
 
+## Customized Icon
+
+The icon can be customized to any Vue component or [render function (JSX)](https://vuejs.org/guide/extras/render-function.html).
+
+:::demo
+
+message-box/customized-icon
+
+:::
+
 ## Draggable
 
 MessageBox can be draggable.
diff --git a/docs/examples/message-box/customized-icon.vue b/docs/examples/message-box/customized-icon.vue
new file mode 100644
index 0000000000000..17d095724e335
--- /dev/null
+++ b/docs/examples/message-box/customized-icon.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-button text @click="open">Click to open Message Box</el-button>
+</template>
+
+<script lang="ts" setup>
+import { markRaw } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { Delete } from '@element-plus/icons-vue'
+
+const open = () => {
+  ElMessageBox.confirm(
+    'It will permanently delete the file. Continue?',
+    'Warning',
+    {
+      type: 'warning',
+      icon: markRaw(Delete),
+    }
+  )
+}
+</script>

From f2e48c1835c12f24a73fbe67fd8df9ec2bdfe172 Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Wed, 22 Jun 2022 14:30:13 +0800
Subject: [PATCH 22/48] perf(components): remove unnecessary const assertions
 (#8407)

---
 packages/components/form/src/form.ts     | 2 +-
 packages/components/result/src/result.ts | 2 +-
 packages/components/steps/src/item.ts    | 2 +-
 packages/components/steps/src/steps.ts   | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/form/src/form.ts b/packages/components/form/src/form.ts
index 00fa1c6a8a3f6..4a8978d4d4722 100644
--- a/packages/components/form/src/form.ts
+++ b/packages/components/form/src/form.ts
@@ -18,7 +18,7 @@ export const formProps = buildProps({
   },
   labelPosition: {
     type: String,
-    values: ['left', 'right', 'top'] as const,
+    values: ['left', 'right', 'top'],
     default: 'right',
   },
   labelWidth: {
diff --git a/packages/components/result/src/result.ts b/packages/components/result/src/result.ts
index 2a65139375d25..d6ced09eede2c 100644
--- a/packages/components/result/src/result.ts
+++ b/packages/components/result/src/result.ts
@@ -36,7 +36,7 @@ export const resultProps = buildProps({
   },
   icon: {
     type: String,
-    values: ['success', 'warning', 'info', 'error'] as const,
+    values: ['success', 'warning', 'info', 'error'],
     default: 'info',
   },
 } as const)
diff --git a/packages/components/steps/src/item.ts b/packages/components/steps/src/item.ts
index 8662f7202f96c..8d78a64f81bd0 100644
--- a/packages/components/steps/src/item.ts
+++ b/packages/components/steps/src/item.ts
@@ -16,7 +16,7 @@ export const stepProps = buildProps({
   },
   status: {
     type: String,
-    values: ['', 'wait', 'process', 'finish', 'error', 'success'] as const,
+    values: ['', 'wait', 'process', 'finish', 'error', 'success'],
     default: '',
   },
 } as const)
diff --git a/packages/components/steps/src/steps.ts b/packages/components/steps/src/steps.ts
index f9a81e662bdfd..8facf9202c43d 100644
--- a/packages/components/steps/src/steps.ts
+++ b/packages/components/steps/src/steps.ts
@@ -15,7 +15,7 @@ export const stepsProps = buildProps({
   direction: {
     type: String,
     default: 'horizontal',
-    values: ['horizontal', 'vertical'] as const,
+    values: ['horizontal', 'vertical'],
   },
   alignCenter: {
     type: Boolean,
@@ -25,12 +25,12 @@ export const stepsProps = buildProps({
   },
   finishStatus: {
     type: String,
-    values: ['wait', 'process', 'finish', 'error', 'success'] as const,
+    values: ['wait', 'process', 'finish', 'error', 'success'],
     default: 'finish',
   },
   processStatus: {
     type: String,
-    values: ['wait', 'process', 'finish', 'error', 'success'] as const,
+    values: ['wait', 'process', 'finish', 'error', 'success'],
     default: 'process',
   },
 } as const)

From 29fd3eb21704b09344393c9a057156700a51118e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=AD=A9=E5=8F=AF=E5=8F=AF=E7=88=B1=E7=88=B1?=
 <49635988+sunnyCoCosun@users.noreply.github.com>
Date: Wed, 22 Jun 2022 19:43:08 +0800
Subject: [PATCH 23/48] docs: [tag] add tag theme example (#8413)

---
 docs/examples/tag/theme.vue | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/docs/examples/tag/theme.vue b/docs/examples/tag/theme.vue
index dfe32eb5d0db4..4cadb36759c0d 100644
--- a/docs/examples/tag/theme.vue
+++ b/docs/examples/tag/theme.vue
@@ -21,6 +21,28 @@
       {{ item.label }}
     </el-tag>
   </div>
+  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
+    <span class="tag-group__title m-1">Light</span>
+    <el-tag
+      v-for="item in items"
+      :key="item.label"
+      class="mx-1"
+      :type="item.type"
+      effect="light"
+    >
+      {{ item.label }}
+    </el-tag>
+    <el-tag
+      v-for="item in items"
+      :key="item.label"
+      class="mx-1"
+      :type="item.type"
+      effect="light"
+      closable
+    >
+      {{ item.label }}
+    </el-tag>
+  </div>
   <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
     <span class="tag-group__title m-1">Plain</span>
     <el-tag

From 65d198f0a05cdd27512963dc1dbe6d5d8bb2b2bb Mon Sep 17 00:00:00 2001
From: Lete <me@imlete.cn>
Date: Wed, 22 Jun 2022 19:57:43 +0800
Subject: [PATCH 24/48] feat(components): close all messages of the specified
 type (#8415)

---
 .../__tests__/message-manager.test.tsx        | 33 +++++++++++++++++++
 packages/components/message/src/message.ts    |  4 ++-
 packages/components/message/src/method.ts     |  7 ++--
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/packages/components/message/__tests__/message-manager.test.tsx b/packages/components/message/__tests__/message-manager.test.tsx
index 74b191e43ebc9..0b2ace44c184d 100644
--- a/packages/components/message/__tests__/message-manager.test.tsx
+++ b/packages/components/message/__tests__/message-manager.test.tsx
@@ -50,6 +50,39 @@ describe('Message on command', () => {
     expect(document.querySelectorAll(selector).length).toBe(0)
   })
 
+  test('it should close all messages of the specified type', async () => {
+    const onClose = vi.fn()
+    const instances = []
+    const success = 'success'
+    for (let i = 0; i < 4; i++) {
+      const instance = Message({
+        type: success,
+        duration: 0,
+        onClose,
+      })
+      instances.push(instance)
+    }
+
+    for (let i = 0; i < 2; i++) {
+      const instance = Message({
+        duration: 0,
+        onClose,
+      })
+      instances.push(instance)
+    }
+
+    await rAF()
+    const elements = document.querySelectorAll(selector)
+    const successElements = document.querySelectorAll(`${selector}--${success}`)
+    expect(elements.length).toBe(6)
+    expect(successElements.length).toBe(4)
+    Message.closeAll(success)
+    await rAF()
+    expect(onClose).toHaveBeenCalledTimes(4)
+    expect(document.querySelectorAll(selector).length).toBe(2)
+    Message.closeAll()
+  })
+
   test('it should stack messages', async () => {
     const messages = [Message(), Message(), Message()]
     await rAF()
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index 48f6c05893147..4534f38160930 100644
--- a/packages/components/message/src/message.ts
+++ b/packages/components/message/src/message.ts
@@ -11,6 +11,8 @@ import type MessageConstructor from './message.vue'
 
 export const messageTypes = ['success', 'info', 'warning', 'error'] as const
 
+export type messageType = typeof messageTypes[number]
+
 export interface MessageConfigContext {
   max?: number
 }
@@ -127,7 +129,7 @@ export interface MessageHandler {
 
 export type MessageFn = {
   (options?: MessageParams, appContext?: null | AppContext): MessageHandler
-  closeAll(): void
+  closeAll(type?: messageType): void
 }
 export type MessageTypedFn = (
   options?: MessageParamsWithType,
diff --git a/packages/components/message/src/method.ts b/packages/components/message/src/method.ts
index b53ae5c3124eb..f6972a1d7e367 100644
--- a/packages/components/message/src/method.ts
+++ b/packages/components/message/src/method.ts
@@ -24,6 +24,7 @@ import type {
   MessageOptions,
   MessageParams,
   MessageParamsNormalized,
+  messageType,
 } from './message'
 
 let seed = 1
@@ -168,9 +169,11 @@ messageTypes.forEach((type) => {
   }
 })
 
-export function closeAll(): void {
+export function closeAll(type?: messageType): void {
   for (const instance of instances) {
-    instance.handler.close()
+    if (!type || type === instance.props.type) {
+      instance.handler.close()
+    }
   }
 }
 

From 2b71f2c561d0608ba256d9e80b05a2bee3540705 Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Thu, 23 Jun 2022 01:34:05 +0800
Subject: [PATCH 25/48] fix(components): [select] multiple init height (#8423)

---
 packages/components/select/src/useSelect.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 2215bd742be58..758ab8b07fd51 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -341,14 +341,14 @@ export const useSelect = (props, states: States, ctx) => {
       const sizeInMap = getComponentSize(selectSize.value || elForm.size)
       // it's an inner input so reduce it by 2px.
       input.style.height = `${
-        states.selected.length === 0
+        (states.selected.length === 0
           ? sizeInMap
           : Math.max(
               _tags
                 ? _tags.clientHeight + (_tags.clientHeight > sizeInMap ? 6 : 0)
                 : 0,
               sizeInMap
-            ) - 2
+            )) - 2
       }px`
 
       states.tagInMultiLine = Number.parseFloat(input.style.height) >= sizeInMap

From 6c752f6676766c5f3c11f8ad58297e62a6abd75b Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Thu, 23 Jun 2022 22:51:10 +0800
Subject: [PATCH 26/48] refactor(components): [space] use JSX in Unit test
 (#8433)

---
 .../{space.test.ts => space.test.tsx}         | 86 ++++++++-----------
 1 file changed, 36 insertions(+), 50 deletions(-)
 rename packages/components/space/__tests__/{space.test.ts => space.test.tsx} (66%)

diff --git a/packages/components/space/__tests__/space.test.ts b/packages/components/space/__tests__/space.test.tsx
similarity index 66%
rename from packages/components/space/__tests__/space.test.ts
rename to packages/components/space/__tests__/space.test.tsx
index 8871fcfb48c1d..1a1629a577ad2 100644
--- a/packages/components/space/__tests__/space.test.ts
+++ b/packages/components/space/__tests__/space.test.tsx
@@ -1,17 +1,14 @@
-import { h, nextTick } from 'vue'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, test, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import Space from '../src/space'
 
 const AXIOM = 'Rem is the best girl'
 
 describe('Space.vue', () => {
-  test('render test', async () => {
-    const wrapper = mount(Space, {
-      slots: {
-        default: AXIOM,
-      },
-    })
+  it('render test', async () => {
+    const wrapper = mount(<Space>{AXIOM}</Space>)
+
     expect(wrapper.text()).toEqual(AXIOM)
 
     await wrapper.setProps({
@@ -25,24 +22,22 @@ describe('Space.vue', () => {
     )
   })
 
-  test('sizes', async () => {
+  it('sizes', async () => {
     const warnHandler = vi.fn()
-    const wrapper = mount(Space, {
-      slots: {
-        default: () =>
-          Array.from({ length: 2 }).map((_, idx) => {
-            return `test${idx}`
-          }),
-      },
-      props: {
-        size: 'large',
-      },
-      global: {
-        config: {
-          warnHandler,
+    const wrapper = mount(
+      <Space size="large">
+        {Array.from({ length: 2 }).map((_, idx) => {
+          return `test${idx}`
+        })}
+      </Space>,
+      {
+        global: {
+          config: {
+            warnHandler,
+          },
         },
-      },
-    })
+      }
+    )
 
     await nextTick()
     expect(wrapper.find('.el-space__item').attributes('style')).toContain(
@@ -79,20 +74,15 @@ describe('Space.vue', () => {
     )
   })
 
-  test('should render with spacer', async () => {
+  it('should render with spacer', async () => {
     const stringSpacer = '|'
-    const wrapper = mount(Space, {
-      slots: {
-        default: () =>
-          Array.from({ length: 2 }).map((_, idx) => {
-            return `test${idx}`
-          }),
-      },
-      props: {
-        size: 'large',
-        spacer: stringSpacer,
-      },
-    })
+    const wrapper = mount(
+      <Space size="large" spacer={stringSpacer}>
+        {Array.from({ length: 2 }).map((_, idx) => {
+          return `test${idx}`
+        })}
+      </Space>
+    )
 
     await nextTick()
     expect(wrapper.element.children).toHaveLength(3)
@@ -105,25 +95,21 @@ describe('Space.vue', () => {
 
     // vnode type spacer
     await wrapper.setProps({
-      spacer: h('div', { class: testSpacerCls }, ''),
+      spacer: <div class={testSpacerCls} />,
     })
 
     expect(wrapper.findAll(`.${testSpacerCls}`)).toHaveLength(1)
     expect(wrapper.element.children).toHaveLength(3)
   })
 
-  test('fill', async () => {
-    const wrapper = mount(Space, {
-      slots: {
-        default: () =>
-          Array.from({ length: 2 }).map((_, idx) => {
-            return `test${idx}`
-          }),
-      },
-      props: {
-        fill: true,
-      },
-    })
+  it('fill', async () => {
+    const wrapper = mount(
+      <Space fill>
+        {Array.from({ length: 2 }).map((_, idx) => {
+          return `test${idx}`
+        })}
+      </Space>
+    )
 
     await nextTick()
     expect(wrapper.find('.el-space').attributes('style')).toContain(

From c6b43df7b3b0d567293df3650a93c02fab3429e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=ED=95=9C=EA=B2=BD?= <hangyeong.ryu@gmail.com>
Date: Fri, 24 Jun 2022 13:58:51 +0900
Subject: [PATCH 27/48] refactor(components): [popconfirm] changed button type
 (#8436)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(components): [popconfirm] changed button type

* docs: changes to attribute kebab case, add accepted values ​

* fix: remove del tag

* fix: remove del tag
---
 docs/en-US/component/popconfirm.md            | 24 +++++++++----------
 .../components/popconfirm/src/popconfirm.ts   |  6 ++---
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/docs/en-US/component/popconfirm.md b/docs/en-US/component/popconfirm.md
index 7ee0fb6add84d..2c00ad93a5bb0 100644
--- a/docs/en-US/component/popconfirm.md
+++ b/docs/en-US/component/popconfirm.md
@@ -39,18 +39,18 @@ popconfirm/trigger-event
 
 ## Attributes
 
-| Attribute         | Description                                                                         | Type               | Accepted Values | Default        |
-| ----------------- | ----------------------------------------------------------------------------------- | ------------------ | --------------- | -------------- |
-| title             | Title                                                                               | String             | —               | —              |
-| confirmButtonText | Confirm button text                                                                 | String             | —               | —              |
-| cancelButtonText  | Cancel button text                                                                  | String             | —               | —              |
-| confirmButtonType | Confirm button type                                                                 | String             | —               | Primary        |
-| cancelButtonType  | Cancel button type                                                                  | String             | —               | Text           |
-| icon              | Icon Component                                                                      | String / Component | —               | QuestionFilled |
-| iconColor         | Icon color                                                                          | String             | —               | #f90           |
-| hideIcon          | is hide Icon                                                                        | Boolean            | —               | false          |
-| teleported        | whether popconfirm is teleported to the body                                        | boolean            | true / false    | true           |
-| persistent        | when popconfirm inactive and `persistent` is `false` , popconfirm will be destroyed | boolean            | —               | false          |
+| Attribute           | Description                                                                         | Type               | Accepted Values                                    | Default        |
+| ------------------- | ----------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -------------- |
+| title               | Title                                                                               | String             | —                                                  | —              |
+| confirm-button-text | Confirm button text                                                                 | String             | —                                                  | —              |
+| cancel-button-text  | Cancel button text                                                                  | String             | —                                                  | —              |
+| confirm-button-type | Confirm button type                                                                 | String             | primary / success / warning / danger / info / text | primary        |
+| cancel-button-type  | Cancel button type                                                                  | String             | primary / success / warning / danger / info / text | text           |
+| icon                | Icon Component                                                                      | String / Component | —                                                  | QuestionFilled |
+| icon-color          | Icon color                                                                          | String             | —                                                  | #f90           |
+| hide-icon           | is hide Icon                                                                        | Boolean            | —                                                  | false          |
+| teleported          | whether popconfirm is teleported to the body                                        | boolean            | true / false                                       | true           |
+| persistent          | when popconfirm inactive and `persistent` is `false` , popconfirm will be destroyed | boolean            | —                                                  | false          |
 
 ## Slots
 
diff --git a/packages/components/popconfirm/src/popconfirm.ts b/packages/components/popconfirm/src/popconfirm.ts
index 6823ac1096852..cc7c577316d45 100644
--- a/packages/components/popconfirm/src/popconfirm.ts
+++ b/packages/components/popconfirm/src/popconfirm.ts
@@ -5,20 +5,18 @@ import { useTooltipContentProps } from '@element-plus/components/tooltip'
 import type { Component, ExtractPropTypes } from 'vue'
 import type Popconfirm from './popconfirm.vue'
 
-const popConfirmButtonTypes = [...buttonTypes, 'text'] as const
-
 export const popconfirmProps = buildProps({
   title: String,
   confirmButtonText: String,
   cancelButtonText: String,
   confirmButtonType: {
     type: String,
-    values: popConfirmButtonTypes,
+    values: buttonTypes,
     default: 'primary',
   },
   cancelButtonType: {
     type: String,
-    values: popConfirmButtonTypes,
+    values: buttonTypes,
     default: 'text',
   },
   icon: {

From 49bc1374308b6fd931a8d44c923169dd9cd4bc90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=ED=95=9C=EA=B2=BD?= <hangyeong.ryu@gmail.com>
Date: Fri, 24 Jun 2022 18:30:25 +0900
Subject: [PATCH 28/48] fix(theme-chalk): [pagination] style if selected value
 is disabled (#8447)

---
 packages/theme-chalk/src/pagination.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss
index a8c7f1fd7c25d..b281da1efc561 100644
--- a/packages/theme-chalk/src/pagination.scss
+++ b/packages/theme-chalk/src/pagination.scss
@@ -240,6 +240,11 @@
       &.is-disabled {
         color: getCssVar('text-color', 'placeholder');
         background-color: getCssVar('disabled-bg-color');
+
+        &.is-active {
+          color: getCssVar('text-color', 'secondary');
+          background-color: getCssVar('fill-color', 'dark');
+        }
       }
       @include when(first) {
         margin-left: 0;
@@ -350,6 +355,11 @@
     &.is-active {
       color: getCssVar('pagination-hover-color');
       cursor: default;
+
+      &.is-disabled {
+        font-weight: bold;
+        color: getCssVar('text-color', 'secondary');
+      }
     }
   }
 

From 4abd29c5972a057b6a8fce1d99298ed553c84aa4 Mon Sep 17 00:00:00 2001
From: Cheerwhy <73086438+Cheerwhy@users.noreply.github.com>
Date: Fri, 24 Jun 2022 21:26:10 +0800
Subject: [PATCH 29/48] fix(components): [select] fix select dropdown width
 (#8396) (#8435)

---
 packages/components/select/src/select-dropdown.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/components/select/src/select-dropdown.vue b/packages/components/select/src/select-dropdown.vue
index 77324065eb115..2b46a7b64b580 100644
--- a/packages/components/select/src/select-dropdown.vue
+++ b/packages/components/select/src/select-dropdown.vue
@@ -29,9 +29,7 @@ export default defineComponent({
     const minWidth = ref('')
 
     function updateMinWidth() {
-      minWidth.value = `${
-        select.selectWrapper?.getBoundingClientRect().width
-      }px`
+      minWidth.value = `${select.selectWrapper?.offsetWidth}px`
     }
 
     onMounted(() => {

From 272c2e6291781699a91b514781e3b33d3e77ddee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=ED=95=9C=EA=B2=BD?= <hangyeong.ryu@gmail.com>
Date: Fri, 24 Jun 2022 22:29:39 +0900
Subject: [PATCH 30/48] refactor(components): [drawer] replace with addUnit
 (#8463)

---
 packages/components/drawer/src/drawer.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/components/drawer/src/drawer.vue b/packages/components/drawer/src/drawer.vue
index 8b818c5c0fe8c..9765d88208de4 100644
--- a/packages/components/drawer/src/drawer.vue
+++ b/packages/components/drawer/src/drawer.vue
@@ -86,6 +86,7 @@ import { Close } from '@element-plus/icons-vue'
 import { ElOverlay } from '@element-plus/components/overlay'
 import ElFocusTrap from '@element-plus/components/focus-trap'
 import { useDialog } from '@element-plus/components/dialog'
+import { addUnit } from '@element-plus/utils'
 import ElIcon from '@element-plus/components/icon'
 import { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'
 import { drawerEmits, drawerProps } from './drawer'
@@ -121,9 +122,7 @@ export default defineComponent({
     const isHorizontal = computed(
       () => props.direction === 'rtl' || props.direction === 'ltr'
     )
-    const drawerSize = computed(() =>
-      typeof props.size === 'number' ? `${props.size}px` : props.size
-    )
+    const drawerSize = computed(() => addUnit(props.size))
 
     return {
       ...useDialog(props, drawerRef),

From 5383ef9a0efe39658f01f21b1bf1e0c8a2b89ec7 Mon Sep 17 00:00:00 2001
From: Cheerwhy <73086438+Cheerwhy@users.noreply.github.com>
Date: Fri, 24 Jun 2022 22:24:22 +0800
Subject: [PATCH 31/48] fix(components): [select-v2] fix select-v2 dropdown
 width (#8442)

Co-authored-by: qinzz <qinzz@chint.com>
---
 packages/components/select-v2/src/useSelect.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index c257655b88d03..b8c2d80b50b13 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -200,7 +200,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
   })
 
   const calculatePopperSize = () => {
-    popperSize.value = selectRef.value?.getBoundingClientRect?.()?.width || 200
+    popperSize.value = selectRef.value?.offsetWidth || 200
   }
 
   const inputWrapperStyle = computed(() => {

From 5c0e1b9686cc176084c3dba6a707815f4d455a8a Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Sat, 25 Jun 2022 20:57:06 +0800
Subject: [PATCH 32/48] fix(components): [popover] fix dark mode background
 color (#8133)

* fix(components): [popover] fix dark mode background color

* chore: improve code
---
 packages/theme-chalk/src/common/var.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 8b7ebb182032f..2669f2d25b2a2 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -835,7 +835,7 @@ $popup: map.merge(
 $popover: () !default;
 $popover: map.merge(
   (
-    'bg-color': getCssVar('color-white'),
+    'bg-color': getCssVar('bg-color', 'overlay'),
     'font-size': getCssVar('font-size-base'),
     'border-color': getCssVar('border-color-lighter'),
     'padding': 12px,

From a9277187cfffa0fcd1efc75d18d5db3dd54a3a93 Mon Sep 17 00:00:00 2001
From: LinZhanMing <60056876+LinZhanMing@users.noreply.github.com>
Date: Sat, 25 Jun 2022 21:43:55 +0800
Subject: [PATCH 33/48] docs: fix popper.js docs link(dropdown, select-v2,
 tooltip) (#8474)

---
 docs/en-US/component/dropdown.md  | 32 +++++++++++++++----------------
 docs/en-US/component/select-v2.md |  2 +-
 docs/en-US/component/tooltip.md   |  2 +-
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/docs/en-US/component/dropdown.md b/docs/en-US/component/dropdown.md
index 77a4feaca9433..62fb6574db001 100644
--- a/docs/en-US/component/dropdown.md
+++ b/docs/en-US/component/dropdown.md
@@ -79,22 +79,22 @@ dropdown/sizes
 
 ## Dropdown Attributes
 
-| Attribute      | Description                                                                                                           | Type            | Accepted Values                                                    | Default                                                 |
-| -------------- | --------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------ | ------------------------------------------------------- |
-| type           | menu button type, refer to `Button` Component, only works when `split-button` is true                                 | string          | —                                                                  | —                                                       |
-| size           | menu size, also works on the split button                                                                             | string          | large / default / small                                            | default                                                 |
-| max-height     | the max height of menu                                                                                                | string / number | —                                                                  | —                                                       |
-| split-button   | whether a button group is displayed                                                                                   | boolean         | —                                                                  | false                                                   |
-| disabled       | Whether to disable                                                                                                    | boolean         | —                                                                  | false                                                   |
-| placement      | placement of pop menu                                                                                                 | string          | top/top-start/top-end/bottom/bottom-start/bottom-end               | bottom                                                  |
-| trigger        | how to trigger                                                                                                        | string          | hover/click/contextmenu                                            | hover                                                   |
-| hide-on-click  | whether to hide menu after clicking menu-item                                                                         | boolean         | —                                                                  | true                                                    |
-| show-timeout   | Delay time before show a dropdown (only works when trigger is `hover`)                                                | number          | —                                                                  | 250                                                     |
-| hide-timeout   | Delay time before hide a dropdown (only works when trigger is `hover`)                                                | number          | —                                                                  | 150                                                     |
-| role           | The ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation' | string          | —                                                                  | 'menu'                                                  |
-| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown                  | number          | —                                                                  | 0                                                       |
-| popper-class   | custom class name for Dropdown's dropdown                                                                             | string          | —                                                                  | —                                                       |
-| popper-options | [popper.js](https://popper.js.org/documentation.html) parameters                                                      | Object          | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| Attribute      | Description                                                                                                           | Type            | Accepted Values                                          | Default                                                 |
+| -------------- | --------------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------------- | ------------------------------------------------------- |
+| type           | menu button type, refer to `Button` Component, only works when `split-button` is true                                 | string          | —                                                        | —                                                       |
+| size           | menu size, also works on the split button                                                                             | string          | large / default / small                                  | default                                                 |
+| max-height     | the max height of menu                                                                                                | string / number | —                                                        | —                                                       |
+| split-button   | whether a button group is displayed                                                                                   | boolean         | —                                                        | false                                                   |
+| disabled       | Whether to disable                                                                                                    | boolean         | —                                                        | false                                                   |
+| placement      | placement of pop menu                                                                                                 | string          | top/top-start/top-end/bottom/bottom-start/bottom-end     | bottom                                                  |
+| trigger        | how to trigger                                                                                                        | string          | hover/click/contextmenu                                  | hover                                                   |
+| hide-on-click  | whether to hide menu after clicking menu-item                                                                         | boolean         | —                                                        | true                                                    |
+| show-timeout   | Delay time before show a dropdown (only works when trigger is `hover`)                                                | number          | —                                                        | 250                                                     |
+| hide-timeout   | Delay time before hide a dropdown (only works when trigger is `hover`)                                                | number          | —                                                        | 150                                                     |
+| role           | The ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation' | string          | —                                                        | 'menu'                                                  |
+| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown                  | number          | —                                                        | 0                                                       |
+| popper-class   | custom class name for Dropdown's dropdown                                                                             | string          | —                                                        | —                                                       |
+| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters                                                                | Object          | refer to [popper.js](https://popper.js.org/docs/v2/) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 
 ## Dropdown Slots
 
diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md
index 4db73ee6cca8a..8222a178b5111 100644
--- a/docs/en-US/component/select-v2.md
+++ b/docs/en-US/component/select-v2.md
@@ -151,7 +151,7 @@ select-v2/remote-search
 | popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false              | boolean                            | -                   | false         |
 | teleported                        | whether select dropdown is teleported to the body                                                                                        | boolean                            | true / false        | true          |
 | persistent                        | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed                                          | boolean                            | true / false        | true          |
-| popper-options                    | Customized popper option see more at [popper.js](https://popper.js.org/documentation.html)                                               | object                             | -                   | -             |
+| popper-options                    | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/)                                                         | object                             | -                   | -             |
 | automatic-dropdown                | for non-filterable Select, this prop decides if the option menu pops up when the input is focused                                        | boolean                            | -                   | false         |
 | height                            | The height of the dropdown panel, 34px for each item                                                                                     | number                             | -                   | 170           |
 | scrollbar-always-on               | Controls whether the scrollbar is always displayed                                                                                       | boolean                            | -                   | false         |
diff --git a/docs/en-US/component/tooltip.md b/docs/en-US/component/tooltip.md
index 6aa81fbdd3e2a..d0cf060eea163 100644
--- a/docs/en-US/component/tooltip.md
+++ b/docs/en-US/component/tooltip.md
@@ -154,7 +154,7 @@ tooltip/animations
 | offset                                   | offset of the Tooltip                                                                                                                                        | number                     | —                                                                                                         | 0                                                       |
 | transition                               | animation name                                                                                                                                               | string                     | —                                                                                                         | el-fade-in-linear                                       |
 | visible-arrow (will deprecate in 2.1.0 ) | whether an arrow is displayed. For more information, check [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) page | boolean                    | —                                                                                                         | true                                                    |
-| popper-options                           | [popper.js](https://popper.js.org/documentation.html) parameters                                                                                             | Object                     | refer to [popper.js](https://popper.js.org/documentation.html) doc                                        | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| popper-options                           | [popper.js](https://popper.js.org/docs/v2/) parameters                                                                                                       | Object                     | refer to [popper.js](https://popper.js.org/docs/v2/) doc                                                  | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | show-after                               | delay of appearance, in millisecond                                                                                                                          | number                     | —                                                                                                         | 0                                                       |
 | show-arrow                               | whether the tooltip content has an arrow                                                                                                                     | boolean                    | true / false                                                                                              | true                                                    |
 | hide-after                               | delay of disappear, in millisecond                                                                                                                           | number                     | —                                                                                                         | 200                                                     |

From db766ac3109b6393ef37e419669e4e8de6e819ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sat, 25 Jun 2022 22:18:54 +0800
Subject: [PATCH 34/48] ci: cancel same in-progress workflow (#8446)

---
 .github/workflows/pr-docs-build.yml | 4 ++++
 .github/workflows/staging-docs.yml  | 4 ++++
 .github/workflows/test-unit.yml     | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/.github/workflows/pr-docs-build.yml b/.github/workflows/pr-docs-build.yml
index 0171775c75297..91f8c2e55ef9e 100644
--- a/.github/workflows/pr-docs-build.yml
+++ b/.github/workflows/pr-docs-build.yml
@@ -2,6 +2,10 @@ name: PR Docs Build
 
 on: pull_request
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
 jobs:
   build:
     name: Build
diff --git a/.github/workflows/staging-docs.yml b/.github/workflows/staging-docs.yml
index a55280b23dba4..d393a0c54a1d4 100644
--- a/.github/workflows/staging-docs.yml
+++ b/.github/workflows/staging-docs.yml
@@ -5,6 +5,10 @@ on:
     branches:
       - 'dev'
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
 jobs:
   build:
     name: Build
diff --git a/.github/workflows/test-unit.yml b/.github/workflows/test-unit.yml
index b03666287c41c..5726d239e5826 100644
--- a/.github/workflows/test-unit.yml
+++ b/.github/workflows/test-unit.yml
@@ -4,6 +4,10 @@ name: 🧪 Unit Test
 
 on: pull_request
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
 jobs:
   build:
     name: Unit Test (${{ matrix.node-name }})

From 5d88f628bb86febdba70603b1364b81e24aca102 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Sun, 26 Jun 2022 04:32:05 +0800
Subject: [PATCH 35/48] feat(components): [message-box] add autofocus attribute
 (#8445)

* feat(components): [message-box] add autofocus attribute

* fix: autofocus to be true by default

* docs: message-box autofocus default value

* chore: remove useless comment

* fix: focusStartRef value el
---
 docs/.vitepress/vitepress/styles/css-vars.scss     |  2 +-
 docs/en-US/component/message-box.md                |  1 +
 docs/examples/message-box/alert.vue                |  2 ++
 .../message-box/__tests__/message-box.test.ts      | 13 +++++++++++++
 packages/components/message-box/src/index.vue      | 14 ++++++++++++--
 .../components/message-box/src/message-box.type.ts |  6 ++++++
 6 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/docs/.vitepress/vitepress/styles/css-vars.scss b/docs/.vitepress/vitepress/styles/css-vars.scss
index 22ee70b978caf..5ea845a25f563 100644
--- a/docs/.vitepress/vitepress/styles/css-vars.scss
+++ b/docs/.vitepress/vitepress/styles/css-vars.scss
@@ -55,7 +55,7 @@
   --content-min-width: 16rem;
   --content-max-width: 48rem;
 
-  --nav-z-index: 20;
+  --nav-z-index: 10;
   --sub-nav-z-index: 10;
   --sidebar-z-index: 40;
   --overlay-z-index: 30;
diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md
index 795a4481e09fd..b003d3fb0124f 100644
--- a/docs/en-US/component/message-box.md
+++ b/docs/en-US/component/message-box.md
@@ -154,6 +154,7 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB
 
 | Attribute                    | Description                                                                                                                              | Type                                                                                                                                                                                                                            | Accepted Values                  | Default                                          |
 | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ |
+| autofocus                    | auto focus when open MessageBox                                                                                                          | boolean                                                                                                                                                                                                                         | —                                | true                                             |
 | title                        | title of the MessageBox                                                                                                                  | string                                                                                                                                                                                                                          | —                                | —                                                |
 | message                      | content of the MessageBox                                                                                                                | string                                                                                                                                                                                                                          | —                                | —                                                |
 | dangerouslyUseHTMLString     | whether `message` is treated as HTML string                                                                                              | boolean                                                                                                                                                                                                                         | —                                | false                                            |
diff --git a/docs/examples/message-box/alert.vue b/docs/examples/message-box/alert.vue
index 92772c412dfb7..1d29dbbab493f 100644
--- a/docs/examples/message-box/alert.vue
+++ b/docs/examples/message-box/alert.vue
@@ -8,6 +8,8 @@ import type { Action } from 'element-plus'
 
 const open = () => {
   ElMessageBox.alert('This is a message', 'Title', {
+    // if you want to disable its autofocus
+    // autofocus: false,
     confirmButtonText: 'OK',
     callback: (action: Action) => {
       ElMessage({
diff --git a/packages/components/message-box/__tests__/message-box.test.ts b/packages/components/message-box/__tests__/message-box.test.ts
index 80da2d52829c1..9fe51f06a11ec 100644
--- a/packages/components/message-box/__tests__/message-box.test.ts
+++ b/packages/components/message-box/__tests__/message-box.test.ts
@@ -144,6 +144,19 @@ describe('MessageBox', () => {
     expect(msgbox).toBe(null)
   })
 
+  test('autofocus', async () => {
+    MessageBox.alert('这是一段内容', {
+      autofocus: false,
+      title: '标题名称',
+    })
+    await rAF()
+    const btnElm = document.querySelector(
+      '.el-message-box__btns .el-button--primary'
+    )
+    const haveFocus = btnElm.isSameNode(document.activeElement)
+    expect(haveFocus).toBe(false)
+  })
+
   test('prompt', async () => {
     MessageBox.prompt('这是一段内容', {
       title: '标题名称',
diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue
index 7be248449f05b..c6c68c49c3a03 100644
--- a/packages/components/message-box/src/index.vue
+++ b/packages/components/message-box/src/index.vue
@@ -259,6 +259,8 @@ export default defineComponent({
     const { nextZIndex } = useZIndex()
     // s represents state
     const state = reactive<MessageBoxState>({
+      // autofocus element when open message-box
+      autofocus: true,
       beforeClose: null,
       callback: null,
       cancelButtonText: '',
@@ -337,7 +339,11 @@ export default defineComponent({
       (val) => {
         if (val) {
           if (props.boxType !== 'prompt') {
-            focusStartRef.value = confirmRef.value?.$el ?? rootRef.value
+            if (state.autofocus) {
+              focusStartRef.value = confirmRef.value?.$el ?? rootRef.value
+            } else {
+              focusStartRef.value = rootRef.value
+            }
           }
           state.zIndex = nextZIndex()
         }
@@ -345,7 +351,11 @@ export default defineComponent({
         if (val) {
           nextTick().then(() => {
             if (inputRef.value && inputRef.value.$el) {
-              focusStartRef.value = getInputElement() ?? rootRef.value
+              if (state.autofocus) {
+                focusStartRef.value = getInputElement() ?? rootRef.value
+              } else {
+                focusStartRef.value = rootRef.value
+              }
             }
           })
         } else {
diff --git a/packages/components/message-box/src/message-box.type.ts b/packages/components/message-box/src/message-box.type.ts
index 0aca6f494c270..618bc8ad422d3 100644
--- a/packages/components/message-box/src/message-box.type.ts
+++ b/packages/components/message-box/src/message-box.type.ts
@@ -16,6 +16,7 @@ export interface MessageBoxInputValidator {
 }
 
 export declare interface MessageBoxState {
+  autofocus: boolean
   title: string
   message: string
   type: MessageType
@@ -62,6 +63,11 @@ export type Callback =
 
 /** Options used in MessageBox */
 export interface ElMessageBoxOptions {
+  /**
+   * auto focus when open message-box
+   */
+  autofocus?: boolean
+
   /** Callback before MessageBox closes, and it will prevent MessageBox from closing */
   beforeClose?: (
     action: Action,

From 9c154e922890f21920d5fc559daa6c899f289435 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=ED=95=9C=EA=B2=BD?= <hangyeong.ryu@gmail.com>
Date: Mon, 27 Jun 2022 11:04:25 +0900
Subject: [PATCH 36/48] refactor(components): [only-child] simplify conditions
 (#8480)

---
 packages/components/slot/src/only-child.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/slot/src/only-child.tsx b/packages/components/slot/src/only-child.tsx
index 7f6943fbb841e..636fe46469f30 100644
--- a/packages/components/slot/src/only-child.tsx
+++ b/packages/components/slot/src/only-child.tsx
@@ -61,7 +61,6 @@ function findFirstLegitChild(node: VNode[] | undefined): VNode | null {
         case Comment:
           continue
         case Text:
-          return wrapTextContent(child)
         case 'svg':
           return wrapTextContent(child)
         case Fragment:

From 598f3ab5cd8fdea8db0ca46252635a5844320889 Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Mon, 27 Jun 2022 12:39:25 +0800
Subject: [PATCH 37/48] feat(components): [autocomplete] expose blur event
 (#8364)

* feat(components): [autocomplete] expose blur event

* docs(components): [autocomplete] update
---
 docs/en-US/component/autocomplete.md          | 20 ++++++++-----------
 .../autocomplete/src/autocomplete.vue         |  6 ++++++
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/docs/en-US/component/autocomplete.md b/docs/en-US/component/autocomplete.md
index 8adf61498b18b..d35bc2f9cbdcf 100644
--- a/docs/en-US/component/autocomplete.md
+++ b/docs/en-US/component/autocomplete.md
@@ -60,18 +60,13 @@ autocomplete/remote-search
 
 ## Autocomplete Slots
 
-| Name    | Description                     |
-| ------- | ------------------------------- |
-| prefix  | content as Input prefix         |
-| suffix  | content as Input suffix         |
-| prepend | content to prepend before Input |
-| append  | content to append after Input   |
-
-## Autocomplete Scoped Slot
-
-| Name | Description                                                           |
-| ---- | --------------------------------------------------------------------- |
-| —    | Custom content for input suggestions. The scope parameter is { item } |
+| Name    | Description                                                           |
+| ------- | --------------------------------------------------------------------- |
+| —       | Custom content for input suggestions. The scope parameter is { item } |
+| prefix  | content as Input prefix                                               |
+| suffix  | content as Input suffix                                               |
+| prepend | content to prepend before Input                                       |
+| append  | content to append after Input                                         |
 
 ## Autocomplete Events
 
@@ -85,3 +80,4 @@ autocomplete/remote-search
 | Method | Description             | Parameters |
 | ------ | ----------------------- | ---------- |
 | focus  | focus the input element | —          |
+| blur   | blur the input element  | —          |
diff --git a/packages/components/autocomplete/src/autocomplete.vue b/packages/components/autocomplete/src/autocomplete.vue
index 663ffbe79700b..066c4db61a63d 100644
--- a/packages/components/autocomplete/src/autocomplete.vue
+++ b/packages/components/autocomplete/src/autocomplete.vue
@@ -292,6 +292,10 @@ const focus = () => {
   inputRef.value?.focus()
 }
 
+const blur = () => {
+  inputRef.value?.blur()
+}
+
 const handleSelect = async (item: any) => {
   emit(INPUT_EVENT, item[props.valueKey])
   emit(UPDATE_MODEL_EVENT, item[props.valueKey])
@@ -369,6 +373,8 @@ defineExpose({
   handleKeyEnter,
   /** @description focus the input element */
   focus,
+  /** @description blur the input element */
+  blur,
   /** @description close suggestion */
   close,
   /** @description highlight an item in a suggestion */

From a894fbf9904e52ae31a158714a2755f75234bd73 Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Mon, 27 Jun 2022 22:08:03 +0800
Subject: [PATCH 38/48] refactor(components): [transfer] switch to script-setup
 syntax (#8343)

* refactor(components): [transfer] switch to script-setup syntax

* chore: improve code

* chore: improve type

* fix: lost reactivity

* chore: fix data error

* chore: simplify code
---
 packages/components/checkbox/src/checkbox.ts  |   2 +-
 .../transfer/__tests__/transfer.test.ts       |   2 +-
 packages/components/transfer/index.ts         |  15 +-
 .../transfer/src/composables/index.ts         |   5 +
 .../{useCheck.ts => composables/use-check.ts} |  79 +++---
 .../src/composables/use-checked-change.ts     |  36 +++
 .../src/composables/use-computed-data.ts      |  42 +++
 .../{useMove.ts => composables/use-move.ts}   |  35 ++-
 .../src/composables/use-props-alias.ts        |  16 ++
 packages/components/transfer/src/index.vue    | 257 ------------------
 .../components/transfer/src/transfer-panel.ts |  40 +++
 .../transfer/src/transfer-panel.vue           | 118 ++++----
 packages/components/transfer/src/transfer.ts  | 151 ++++++----
 packages/components/transfer/src/transfer.vue | 161 +++++++++++
 .../transfer/src/useCheckedChange.ts          |  23 --
 .../transfer/src/useComputedData.ts           |  43 ---
 16 files changed, 502 insertions(+), 523 deletions(-)
 create mode 100644 packages/components/transfer/src/composables/index.ts
 rename packages/components/transfer/src/{useCheck.ts => composables/use-check.ts} (66%)
 create mode 100644 packages/components/transfer/src/composables/use-checked-change.ts
 create mode 100644 packages/components/transfer/src/composables/use-computed-data.ts
 rename packages/components/transfer/src/{useMove.ts => composables/use-move.ts} (62%)
 create mode 100644 packages/components/transfer/src/composables/use-props-alias.ts
 delete mode 100644 packages/components/transfer/src/index.vue
 create mode 100644 packages/components/transfer/src/transfer-panel.ts
 create mode 100644 packages/components/transfer/src/transfer.vue
 delete mode 100644 packages/components/transfer/src/useCheckedChange.ts
 delete mode 100644 packages/components/transfer/src/useComputedData.ts

diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts
index 6129dd49aa5c7..18c4d4271118d 100644
--- a/packages/components/checkbox/src/checkbox.ts
+++ b/packages/components/checkbox/src/checkbox.ts
@@ -309,7 +309,7 @@ const useEvent = (
   }
 }
 
-type CheckboxValueType = string | number | boolean
+export type CheckboxValueType = string | number | boolean
 
 export const checkboxEmits = {
   [UPDATE_MODEL_EVENT]: (val: CheckboxValueType) =>
diff --git a/packages/components/transfer/__tests__/transfer.test.ts b/packages/components/transfer/__tests__/transfer.test.ts
index 630a5f0588290..92813fc53b55c 100644
--- a/packages/components/transfer/__tests__/transfer.test.ts
+++ b/packages/components/transfer/__tests__/transfer.test.ts
@@ -2,7 +2,7 @@
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import Transfer from '../src/index.vue'
+import Transfer from '../src/transfer.vue'
 
 describe('Transfer', () => {
   const getTestData = () => {
diff --git a/packages/components/transfer/index.ts b/packages/components/transfer/index.ts
index a306838e6da14..6207d34d66910 100644
--- a/packages/components/transfer/index.ts
+++ b/packages/components/transfer/index.ts
@@ -1,15 +1,8 @@
-import Transfer from './src/index.vue'
+import { withInstall } from '@element-plus/utils'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils'
+import Transfer from './src/transfer.vue'
 
-Transfer.install = (app: App): void => {
-  app.component(Transfer.name, Transfer)
-}
-
-const _Transfer = Transfer as SFCWithInstall<typeof Transfer>
-
-export default _Transfer
-export const ElTransfer = _Transfer
+export const ElTransfer = withInstall(Transfer)
+export default ElTransfer
 
 export * from './src/transfer'
diff --git a/packages/components/transfer/src/composables/index.ts b/packages/components/transfer/src/composables/index.ts
new file mode 100644
index 0000000000000..731781a447271
--- /dev/null
+++ b/packages/components/transfer/src/composables/index.ts
@@ -0,0 +1,5 @@
+export * from './use-check'
+export * from './use-checked-change'
+export * from './use-computed-data'
+export * from './use-move'
+export * from './use-props-alias'
diff --git a/packages/components/transfer/src/useCheck.ts b/packages/components/transfer/src/composables/use-check.ts
similarity index 66%
rename from packages/components/transfer/src/useCheck.ts
rename to packages/components/transfer/src/composables/use-check.ts
index 1522d6413d130..51a4b4eeb5522 100644
--- a/packages/components/transfer/src/useCheck.ts
+++ b/packages/components/transfer/src/composables/use-check.ts
@@ -1,54 +1,40 @@
-// @ts-nocheck
-import { computed, getCurrentInstance, watch } from 'vue'
-
-import type { ExtractPropTypes } from 'vue'
-import type { Key, TransferPanelState } from './transfer'
-
-export const CHECKED_CHANGE_EVENT = 'checked-change'
-
-export const useCheckProps = {
-  data: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  optionRender: Function,
-  placeholder: String,
-  title: String,
-  filterable: Boolean,
-  format: Object,
-  filterMethod: Function,
-  defaultChecked: Array,
-  props: Object,
-}
+import { computed, watch } from 'vue'
+import { isFunction } from '@element-plus/utils'
+import { CHECKED_CHANGE_EVENT } from '../transfer-panel'
+import { usePropsAlias } from './use-props-alias'
+
+import type { SetupContext } from 'vue'
+import type { CheckboxValueType } from '@element-plus/components/checkbox'
+import type { TransferKey } from '../transfer'
+import type {
+  TransferPanelEmits,
+  TransferPanelProps,
+  TransferPanelState,
+} from '../transfer-panel'
 
 export const useCheck = (
-  props: ExtractPropTypes<typeof useCheckProps>,
-  panelState: TransferPanelState
+  props: TransferPanelProps,
+  panelState: TransferPanelState,
+  emit: SetupContext<TransferPanelEmits>['emit']
 ) => {
-  const { emit } = getCurrentInstance()
-
-  const labelProp = computed(() => props.props.label || 'label')
-
-  const keyProp = computed(() => props.props.key || 'key')
-
-  const disabledProp = computed(() => props.props.disabled || 'disabled')
+  const propsAlias = usePropsAlias(props)
 
   const filteredData = computed(() => {
     return props.data.filter((item) => {
-      if (typeof props.filterMethod === 'function') {
+      if (isFunction(props.filterMethod)) {
         return props.filterMethod(panelState.query, item)
       } else {
-        const label = item[labelProp.value] || item[keyProp.value].toString()
+        const label = String(
+          item[propsAlias.value.label] || item[propsAlias.value.key]
+        )
         return label.toLowerCase().includes(panelState.query.toLowerCase())
       }
     })
   })
 
-  const checkableData = computed(() => {
-    return filteredData.value.filter((item) => !item[disabledProp.value])
-  })
+  const checkableData = computed(() =>
+    filteredData.value.filter((item) => !item[propsAlias.value.disabled])
+  )
 
   const checkedSummary = computed(() => {
     const checkedLength = panelState.checked.length
@@ -73,16 +59,16 @@ export const useCheck = (
 
   const updateAllChecked = () => {
     const checkableDataKeys = checkableData.value.map(
-      (item) => item[keyProp.value]
+      (item) => item[propsAlias.value.key]
     )
     panelState.allChecked =
       checkableDataKeys.length > 0 &&
       checkableDataKeys.every((item) => panelState.checked.includes(item))
   }
 
-  const handleAllCheckedChange = (value: Key[]) => {
+  const handleAllCheckedChange = (value: CheckboxValueType) => {
     panelState.checked = value
-      ? checkableData.value.map((item) => item[keyProp.value])
+      ? checkableData.value.map((item) => item[propsAlias.value.key])
       : []
   }
 
@@ -110,9 +96,9 @@ export const useCheck = (
   watch(
     () => props.data,
     () => {
-      const checked = []
+      const checked: TransferKey[] = []
       const filteredDataKeys = filteredData.value.map(
-        (item) => item[keyProp.value]
+        (item) => item[propsAlias.value.key]
       )
       panelState.checked.forEach((item) => {
         if (filteredDataKeys.includes(item)) {
@@ -134,9 +120,9 @@ export const useCheck = (
       )
         return
 
-      const checked = []
+      const checked: TransferKey[] = []
       const checkableDataKeys = checkableData.value.map(
-        (item) => item[keyProp.value]
+        (item) => item[propsAlias.value.key]
       )
 
       val.forEach((item) => {
@@ -153,9 +139,6 @@ export const useCheck = (
   )
 
   return {
-    labelProp,
-    keyProp,
-    disabledProp,
     filteredData,
     checkableData,
     checkedSummary,
diff --git a/packages/components/transfer/src/composables/use-checked-change.ts b/packages/components/transfer/src/composables/use-checked-change.ts
new file mode 100644
index 0000000000000..2d134386d4e51
--- /dev/null
+++ b/packages/components/transfer/src/composables/use-checked-change.ts
@@ -0,0 +1,36 @@
+import { LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT } from '../transfer'
+
+import type { SetupContext } from 'vue'
+import type {
+  TransferCheckedState,
+  TransferEmits,
+  TransferKey,
+} from '../transfer'
+
+export const useCheckedChange = (
+  checkedState: TransferCheckedState,
+  emit: SetupContext<TransferEmits>['emit']
+) => {
+  const onSourceCheckedChange = (
+    val: TransferKey[],
+    movedKeys?: TransferKey[]
+  ) => {
+    checkedState.leftChecked = val
+    if (!movedKeys) return
+    emit(LEFT_CHECK_CHANGE_EVENT, val, movedKeys)
+  }
+
+  const onTargetCheckedChange = (
+    val: TransferKey[],
+    movedKeys?: TransferKey[]
+  ) => {
+    checkedState.rightChecked = val
+    if (!movedKeys) return
+    emit(RIGHT_CHECK_CHANGE_EVENT, val, movedKeys)
+  }
+
+  return {
+    onSourceCheckedChange,
+    onTargetCheckedChange,
+  }
+}
diff --git a/packages/components/transfer/src/composables/use-computed-data.ts b/packages/components/transfer/src/composables/use-computed-data.ts
new file mode 100644
index 0000000000000..109e5bb7c5733
--- /dev/null
+++ b/packages/components/transfer/src/composables/use-computed-data.ts
@@ -0,0 +1,42 @@
+import { computed } from 'vue'
+import { usePropsAlias } from './use-props-alias'
+
+import type { TransferDataItem, TransferKey, TransferProps } from '../transfer'
+
+export const useComputedData = (props: TransferProps) => {
+  const propsAlias = usePropsAlias(props)
+
+  const dataObj = computed(() =>
+    props.data.reduce((o, cur) => (o[cur[propsAlias.value.key]] = cur) && o, {})
+  )
+
+  const sourceData = computed(() =>
+    props.data.filter(
+      (item) => !props.modelValue.includes(item[propsAlias.value.key])
+    )
+  )
+
+  const targetData = computed(() => {
+    if (props.targetOrder === 'original') {
+      return props.data.filter((item) =>
+        props.modelValue.includes(item[propsAlias.value.key])
+      )
+    } else {
+      return props.modelValue.reduce(
+        (arr: TransferDataItem[], cur: TransferKey) => {
+          const val = dataObj.value[cur]
+          if (val) {
+            arr.push(val)
+          }
+          return arr
+        },
+        []
+      )
+    }
+  })
+
+  return {
+    sourceData,
+    targetData,
+  }
+}
diff --git a/packages/components/transfer/src/useMove.ts b/packages/components/transfer/src/composables/use-move.ts
similarity index 62%
rename from packages/components/transfer/src/useMove.ts
rename to packages/components/transfer/src/composables/use-move.ts
index b0306475dea5d..f7aa124c950a5 100644
--- a/packages/components/transfer/src/useMove.ts
+++ b/packages/components/transfer/src/composables/use-move.ts
@@ -1,23 +1,30 @@
-// @ts-nocheck
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { usePropsAlias } from './use-props-alias'
 
-import type { ComputedRef } from 'vue'
+import type { SetupContext } from 'vue'
 import type {
-  DataItem,
-  Key,
   TransferCheckedState,
+  TransferDataItem,
+  TransferDirection,
+  TransferEmits,
+  TransferKey,
   TransferProps,
-} from './transfer'
+} from '../transfer'
 
 export const useMove = (
   props: TransferProps,
   checkedState: TransferCheckedState,
-  propsKey: ComputedRef<string>,
-  emit
+  emit: SetupContext<TransferEmits>['emit']
 ) => {
-  const _emit = (value, type: 'left' | 'right', checked: Key[]) => {
+  const propsAlias = usePropsAlias(props)
+
+  const _emit = (
+    value: TransferKey[],
+    direction: TransferDirection,
+    movedKeys: TransferKey[]
+  ) => {
     emit(UPDATE_MODEL_EVENT, value)
-    emit(CHANGE_EVENT, value, type, checked)
+    emit(CHANGE_EVENT, value, direction, movedKeys)
   }
 
   const addToLeft = () => {
@@ -36,14 +43,14 @@ export const useMove = (
     let currentValue = props.modelValue.slice()
 
     const itemsToBeMoved = props.data
-      .filter((item: DataItem) => {
-        const itemKey = item[propsKey.value]
+      .filter((item: TransferDataItem) => {
+        const itemKey = item[propsAlias.value.key]
         return (
           checkedState.leftChecked.includes(itemKey) &&
           !props.modelValue.includes(itemKey)
         )
       })
-      .map((item) => item[propsKey.value])
+      .map((item) => item[propsAlias.value.key])
 
     currentValue =
       props.targetOrder === 'unshift'
@@ -52,8 +59,8 @@ export const useMove = (
 
     if (props.targetOrder === 'original') {
       currentValue = props.data
-        .filter((item) => currentValue.includes(item[propsKey.value]))
-        .map((item) => item[propsKey.value])
+        .filter((item) => currentValue.includes(item[propsAlias.value.key]))
+        .map((item) => item[propsAlias.value.key])
     }
 
     _emit(currentValue, 'right', checkedState.leftChecked)
diff --git a/packages/components/transfer/src/composables/use-props-alias.ts b/packages/components/transfer/src/composables/use-props-alias.ts
new file mode 100644
index 0000000000000..41783b2c70485
--- /dev/null
+++ b/packages/components/transfer/src/composables/use-props-alias.ts
@@ -0,0 +1,16 @@
+import { computed } from 'vue'
+
+import type { TransferPropsAlias } from '../transfer'
+
+export const usePropsAlias = (props: { props: TransferPropsAlias }) => {
+  const initProps: Required<TransferPropsAlias> = {
+    label: 'label',
+    key: 'key',
+    disabled: 'disabled',
+  }
+
+  return computed(() => ({
+    ...initProps,
+    ...props.props,
+  }))
+}
diff --git a/packages/components/transfer/src/index.vue b/packages/components/transfer/src/index.vue
deleted file mode 100644
index d7d4f1aa1ae4c..0000000000000
--- a/packages/components/transfer/src/index.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<template>
-  <div :class="ns.b()">
-    <transfer-panel
-      ref="leftPanel"
-      :data="sourceData"
-      :option-render="optionRender"
-      :placeholder="panelFilterPlaceholder"
-      :title="leftPanelTitle"
-      :filterable="filterable"
-      :format="format"
-      :filter-method="filterMethod"
-      :default-checked="leftDefaultChecked"
-      :props="props"
-      @checked-change="onSourceCheckedChange"
-    >
-      <slot name="left-footer" />
-    </transfer-panel>
-    <div :class="ns.e('buttons')">
-      <el-button
-        type="primary"
-        :class="[ns.e('button'), ns.is('with-texts', hasButtonTexts)]"
-        :disabled="rightChecked.length === 0"
-        @click="addToLeft"
-      >
-        <el-icon><arrow-left /></el-icon>
-        <span v-if="buttonTexts[0] !== undefined">{{ buttonTexts[0] }}</span>
-      </el-button>
-      <el-button
-        type="primary"
-        :class="[ns.e('button'), ns.is('with-texts', hasButtonTexts)]"
-        :disabled="leftChecked.length === 0"
-        @click="addToRight"
-      >
-        <span v-if="buttonTexts[1] !== undefined">{{ buttonTexts[1] }}</span>
-        <el-icon><arrow-right /></el-icon>
-      </el-button>
-    </div>
-    <transfer-panel
-      ref="rightPanel"
-      :data="targetData"
-      :option-render="optionRender"
-      :placeholder="panelFilterPlaceholder"
-      :filterable="filterable"
-      :format="format"
-      :filter-method="filterMethod"
-      :title="rightPanelTitle"
-      :default-checked="rightDefaultChecked"
-      :props="props"
-      @checked-change="onTargetCheckedChange"
-    >
-      <slot name="right-footer" />
-    </transfer-panel>
-  </div>
-</template>
-
-<script lang="ts">
-// @ts-nocheck
-import {
-  computed,
-  defineComponent,
-  h,
-  inject,
-  reactive,
-  ref,
-  toRefs,
-  watch,
-} from 'vue'
-import ElButton from '@element-plus/components/button'
-import ElIcon from '@element-plus/components/icon'
-import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { useLocale, useNamespace } from '@element-plus/hooks'
-import { formItemContextKey } from '@element-plus/tokens'
-import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
-import { debugWarn } from '@element-plus/utils'
-import TransferPanel from './transfer-panel.vue'
-import { useComputedData } from './useComputedData'
-import {
-  LEFT_CHECK_CHANGE_EVENT,
-  RIGHT_CHECK_CHANGE_EVENT,
-  useCheckedChange,
-} from './useCheckedChange'
-import { useMove } from './useMove'
-import { CHANGE_EVENT } from './transfer'
-
-import type { PropType, VNode } from 'vue'
-import type { FormItemContext } from '@element-plus/tokens'
-import type { DataItem, Format, Key, Props, TargetOrder } from './transfer'
-
-type TransferType = InstanceType<typeof TransferPanel>
-
-export default defineComponent({
-  name: 'ElTransfer',
-
-  components: {
-    TransferPanel,
-    ElButton,
-    ElIcon,
-    ArrowLeft,
-    ArrowRight,
-  },
-
-  props: {
-    data: {
-      type: Array as PropType<DataItem[]>,
-      default: () => [],
-    },
-    titles: {
-      type: Array as PropType<any> as PropType<[string, string]>,
-      default: () => [],
-    },
-    buttonTexts: {
-      type: Array as PropType<any> as PropType<[string, string]>,
-      default: () => [],
-    },
-    filterPlaceholder: {
-      type: String,
-      default: '',
-    },
-    filterMethod: Function as PropType<
-      (query: string, item: DataItem) => boolean
-    >,
-    leftDefaultChecked: {
-      type: Array as PropType<Key[]>,
-      default: () => [],
-    },
-    rightDefaultChecked: {
-      type: Array as PropType<Key[]>,
-      default: () => [],
-    },
-    renderContent: Function as PropType<(h, option) => VNode>,
-    modelValue: {
-      type: Array as PropType<Key[]>,
-      default: () => [],
-    },
-    format: {
-      type: Object as PropType<Format>,
-      default: () => ({}),
-    },
-    filterable: {
-      type: Boolean,
-      default: false,
-    },
-    props: {
-      type: Object as PropType<Props>,
-      default: () => ({
-        label: 'label',
-        key: 'key',
-        disabled: 'disabled',
-      }),
-    },
-    targetOrder: {
-      type: String as PropType<TargetOrder>,
-      default: 'original',
-      validator: (val: string) => {
-        return ['original', 'push', 'unshift'].includes(val)
-      },
-    },
-  },
-
-  emits: [
-    UPDATE_MODEL_EVENT,
-    CHANGE_EVENT,
-    LEFT_CHECK_CHANGE_EVENT,
-    RIGHT_CHECK_CHANGE_EVENT,
-  ],
-
-  setup(props, { emit, slots }) {
-    const { t } = useLocale()
-    const ns = useNamespace('transfer')
-    const elFormItem = inject(formItemContextKey, {} as FormItemContext)
-
-    const checkedState = reactive({
-      leftChecked: [],
-      rightChecked: [],
-    })
-
-    const { propsKey, sourceData, targetData } = useComputedData(props)
-
-    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(
-      checkedState,
-      emit
-    )
-
-    const { addToLeft, addToRight } = useMove(
-      props,
-      checkedState,
-      propsKey,
-      emit
-    )
-
-    const leftPanel = ref<TransferType>()
-    const rightPanel = ref<TransferType>()
-
-    const clearQuery = (which: 'left' | 'right') => {
-      switch (which) {
-        case 'left':
-          leftPanel.value!.query = ''
-          break
-        case 'right':
-          rightPanel.value!.query = ''
-          break
-      }
-    }
-
-    const hasButtonTexts = computed(() => props.buttonTexts.length === 2)
-
-    const leftPanelTitle = computed(
-      () => props.titles[0] || t('el.transfer.titles.0')
-    )
-
-    const rightPanelTitle = computed(
-      () => props.titles[1] || t('el.transfer.titles.1')
-    )
-
-    const panelFilterPlaceholder = computed(
-      () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')
-    )
-
-    watch(
-      () => props.modelValue,
-      () => {
-        elFormItem.validate?.('change').catch((err) => debugWarn(err))
-      }
-    )
-
-    const optionRender = computed(() => (option) => {
-      if (props.renderContent) return props.renderContent(h, option)
-
-      if (slots.default) return slots.default({ option })
-
-      return h('span', option[props.props.label] || option[props.props.key])
-    })
-
-    return {
-      ns,
-      sourceData,
-      targetData,
-      onSourceCheckedChange,
-      onTargetCheckedChange,
-      addToLeft,
-      addToRight,
-
-      ...toRefs(checkedState),
-
-      hasButtonTexts,
-      leftPanelTitle,
-      rightPanelTitle,
-      panelFilterPlaceholder,
-      clearQuery,
-      leftPanel,
-      rightPanel,
-
-      optionRender,
-    }
-  },
-})
-</script>
diff --git a/packages/components/transfer/src/transfer-panel.ts b/packages/components/transfer/src/transfer-panel.ts
new file mode 100644
index 0000000000000..face80afe9d81
--- /dev/null
+++ b/packages/components/transfer/src/transfer-panel.ts
@@ -0,0 +1,40 @@
+import { buildProps, definePropType } from '@element-plus/utils'
+import { transferCheckedChangeFn, transferProps } from './transfer'
+
+import type { ExtractPropTypes, VNode } from 'vue'
+import type { TransferDataItem, TransferKey } from './transfer'
+import type TransferPanel from './transfer-panel.vue'
+
+export interface TransferPanelState {
+  checked: TransferKey[]
+  allChecked: boolean
+  query: string
+  inputHover: boolean
+  checkChangeByUser: boolean
+}
+
+export const CHECKED_CHANGE_EVENT = 'checked-change'
+
+export const transferPanelProps = buildProps({
+  data: transferProps.data,
+  optionRender: {
+    type: definePropType<(option: TransferDataItem) => VNode | VNode[]>(
+      Function
+    ),
+  },
+  placeholder: String,
+  title: String,
+  filterable: Boolean,
+  format: transferProps.format,
+  filterMethod: transferProps.filterMethod,
+  defaultChecked: transferProps.leftDefaultChecked,
+  props: transferProps.props,
+} as const)
+export type TransferPanelProps = ExtractPropTypes<typeof transferPanelProps>
+
+export const transferPanelEmits = {
+  [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn,
+}
+export type TransferPanelEmits = typeof transferPanelEmits
+
+export type TransferPanelInstance = InstanceType<typeof TransferPanel>
diff --git a/packages/components/transfer/src/transfer-panel.vue b/packages/components/transfer/src/transfer-panel.vue
index 5a5f2931b4bec..a635a324d3d31 100644
--- a/packages/components/transfer/src/transfer-panel.vue
+++ b/packages/components/transfer/src/transfer-panel.vue
@@ -18,30 +18,27 @@
         :class="ns.be('panel', 'filter')"
         size="default"
         :placeholder="placeholder"
-        :prefix-icon="SearchIcon"
+        :prefix-icon="Search"
         clearable
         @mouseenter="inputHover = true"
         @mouseleave="inputHover = false"
       />
       <el-checkbox-group
-        v-show="!hasNoMatch && data.length > 0"
+        v-show="!hasNoMatch && !isEmpty(data)"
         v-model="checked"
         :class="[ns.is('filterable', filterable), ns.be('panel', 'list')]"
       >
         <el-checkbox
           v-for="item in filteredData"
-          :key="item[keyProp]"
+          :key="item[propsAlias.key]"
           :class="ns.be('panel', 'item')"
-          :label="item[keyProp]"
-          :disabled="item[disabledProp]"
+          :label="item[propsAlias.key]"
+          :disabled="item[propsAlias.disabled]"
         >
-          <option-content :option="optionRender(item)" />
+          <option-content :option="optionRender?.(item)" />
         </el-checkbox>
       </el-checkbox-group>
-      <p
-        v-show="hasNoMatch || data.length === 0"
-        :class="ns.be('panel', 'empty')"
-      >
+      <p v-show="hasNoMatch || isEmpty(data)" :class="ns.be('panel', 'empty')">
         {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}
       </p>
     </div>
@@ -51,82 +48,59 @@
   </div>
 </template>
 
-<script lang="ts">
-// @ts-nocheck
-import { computed, defineComponent, reactive, toRefs } from 'vue'
+<script lang="ts" setup>
+import { computed, reactive, toRefs, useSlots } from 'vue'
+import { isEmpty } from '@element-plus/utils'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'
-import ElInput from '@element-plus/components/input'
+import { ElInput } from '@element-plus/components/input'
 import { Search } from '@element-plus/icons-vue'
-import { CHECKED_CHANGE_EVENT, useCheck, useCheckProps } from './useCheck'
-
-export default defineComponent({
-  name: 'ElTransferPanel',
-
-  components: {
-    ElCheckboxGroup,
-    ElCheckbox,
-    ElInput,
-    OptionContent: ({ option }) => option,
-  },
+import { transferPanelEmits, transferPanelProps } from './transfer-panel'
+import { useCheck, usePropsAlias } from './composables'
 
-  props: useCheckProps,
+import type { VNode } from 'vue'
+import type { TransferPanelState } from './transfer-panel'
 
-  emits: [CHECKED_CHANGE_EVENT],
+defineOptions({
+  name: 'ElTransferPanel',
+})
 
-  setup(props, { slots }) {
-    const { t } = useLocale()
-    const ns = useNamespace('transfer')
+const props = defineProps(transferPanelProps)
+const emit = defineEmits(transferPanelEmits)
+const slots = useSlots()
 
-    const panelState = reactive({
-      checked: [],
-      allChecked: false,
-      query: '',
-      inputHover: false,
-      checkChangeByUser: true,
-    })
+const OptionContent = ({ option }: { option: VNode | VNode[] }) => option
 
-    const {
-      labelProp,
-      keyProp,
-      disabledProp,
-      filteredData,
-      checkedSummary,
-      isIndeterminate,
-      handleAllCheckedChange,
-    } = useCheck(props, panelState)
+const { t } = useLocale()
+const ns = useNamespace('transfer')
 
-    const hasNoMatch = computed(() => {
-      return panelState.query.length > 0 && filteredData.value.length === 0
-    })
+const panelState = reactive<TransferPanelState>({
+  checked: [],
+  allChecked: false,
+  query: '',
+  inputHover: false,
+  checkChangeByUser: true,
+})
 
-    const hasFooter = computed(() => !!slots.default()[0].children.length)
+const propsAlias = usePropsAlias(props)
 
-    const { checked, allChecked, query, inputHover, checkChangeByUser } =
-      toRefs(panelState)
+const {
+  filteredData,
+  checkedSummary,
+  isIndeterminate,
+  handleAllCheckedChange,
+} = useCheck(props, panelState, emit)
 
-    return {
-      ns,
-      labelProp,
-      keyProp,
-      disabledProp,
-      filteredData,
-      checkedSummary,
-      isIndeterminate,
-      handleAllCheckedChange,
+const hasNoMatch = computed(
+  () => !isEmpty(panelState.query) && isEmpty(filteredData.value)
+)
 
-      checked,
-      allChecked,
-      query,
-      inputHover,
-      checkChangeByUser,
+const hasFooter = computed(() => !isEmpty(slots.default!()[0].children))
 
-      hasNoMatch,
-      SearchIcon: Search,
-      hasFooter,
+const { checked, allChecked, query, inputHover } = toRefs(panelState)
 
-      t,
-    }
-  },
+defineExpose({
+  /** @description filter keyword */
+  query,
 })
 </script>
diff --git a/packages/components/transfer/src/transfer.ts b/packages/components/transfer/src/transfer.ts
index c7a96d9e8483d..08d37ce8c0fb8 100644
--- a/packages/components/transfer/src/transfer.ts
+++ b/packages/components/transfer/src/transfer.ts
@@ -1,68 +1,113 @@
-// @ts-nocheck
-import { CHANGE_EVENT } from '@element-plus/constants'
+import { isNil } from 'lodash-unified'
+import {
+  buildProps,
+  definePropType,
+  isArray,
+  mutable,
+} from '@element-plus/utils'
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 
-import type { VNode } from 'vue'
+import type { ExtractPropTypes, h as H, VNode } from 'vue'
+import type Transfer from './transfer.vue'
 
-export { CHANGE_EVENT }
+export type TransferKey = string | number
+export type TransferDirection = 'left' | 'right'
 
-export type Key = string | number
+export type TransferDataItem = Record<string, any>
 
-export type DataItem = {
-  key: Key
-  label: string
-  disabled: boolean
+export interface TransferFormat {
+  noChecked?: string
+  hasChecked?: string
 }
 
-export type Format = {
-  noChecked: string
-  hasChecked: string
+export interface TransferPropsAlias {
+  label?: string
+  key?: string
+  disabled?: string
 }
 
-export type Props = {
-  label: string
-  key: string
-  disabled: string
+export interface TransferCheckedState {
+  leftChecked: TransferKey[]
+  rightChecked: TransferKey[]
 }
 
-export type TargetOrder = 'original' | 'push' | 'unshift'
+export const LEFT_CHECK_CHANGE_EVENT = 'left-check-change'
+export const RIGHT_CHECK_CHANGE_EVENT = 'right-check-change'
 
-export interface TransferProps {
-  data: DataItem[]
-  titles: [string, string]
-  buttonTexts: [string, string]
-  filterPlaceholder: string
-  filterMethod?: (query: string, item: DataItem) => boolean
-  leftDefaultChecked: Key[]
-  rightDefaultChecked: Key[]
-  renderContent?: (h, option) => VNode
-  modelValue: Key[]
-  format: Format
-  filterable: boolean
-  props: Props
-  targetOrder: TargetOrder
-}
+export const transferProps = buildProps({
+  data: {
+    type: definePropType<TransferDataItem[]>(Array),
+    default: () => [],
+  },
+  titles: {
+    type: definePropType<[string, string]>(Array),
+    default: () => [],
+  },
+  buttonTexts: {
+    type: definePropType<[string, string]>(Array),
+    default: () => [],
+  },
+  filterPlaceholder: String,
+  filterMethod: {
+    type: definePropType<(query: string, item: TransferDataItem) => boolean>(
+      Function
+    ),
+  },
+  leftDefaultChecked: {
+    type: definePropType<TransferKey[]>(Array),
+    default: () => [],
+  },
+  rightDefaultChecked: {
+    type: definePropType<TransferKey[]>(Array),
+    default: () => [],
+  },
+  renderContent: {
+    type: definePropType<
+      (h: typeof H, option: TransferDataItem) => VNode | VNode[]
+    >(Function),
+  },
+  modelValue: {
+    type: definePropType<TransferKey[]>(Array),
+    default: () => [],
+  },
+  format: {
+    type: definePropType<TransferFormat>(Object),
+    default: () => ({}),
+  },
+  filterable: Boolean,
+  props: {
+    type: definePropType<TransferPropsAlias>(Object),
+    default: () =>
+      mutable({
+        label: 'label',
+        key: 'key',
+        disabled: 'disabled',
+      } as const),
+  },
+  targetOrder: {
+    type: String,
+    values: ['original', 'push', 'unshift'],
+    default: 'original',
+  },
+} as const)
+export type TransferProps = ExtractPropTypes<typeof transferProps>
 
-export interface TransferCheckedState {
-  leftChecked: Key[]
-  rightChecked: Key[]
-}
+export const transferCheckedChangeFn = (
+  value: TransferKey[],
+  movedKeys?: TransferKey[]
+) => [value, movedKeys].every(isArray) || (isArray(value) && isNil(movedKeys))
 
-export interface TransferPanelProps {
-  data: DataItem[]
-  optionRender: ({ option: VNode }) => VNode
-  placeholder: string
-  title: string
-  filterable: boolean
-  format: Format
-  filterMethod: (query: string, item: DataItem) => boolean
-  defaultChecked: Key[]
-  props: Props
+export const transferEmits = {
+  [CHANGE_EVENT]: (
+    value: TransferKey[],
+    direction: TransferDirection,
+    movedKeys: TransferKey[]
+  ) =>
+    [value, movedKeys].every(isArray) && ['left', 'right'].includes(direction),
+  [UPDATE_MODEL_EVENT]: (value: TransferKey[]) => isArray(value),
+  [LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,
+  [RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,
 }
+export type TransferEmits = typeof transferEmits
 
-export interface TransferPanelState {
-  checked: Key[]
-  allChecked: boolean
-  query: string
-  inputHover: boolean
-  checkChangeByUser: boolean
-}
+export type TransferInstance = InstanceType<typeof Transfer>
diff --git a/packages/components/transfer/src/transfer.vue b/packages/components/transfer/src/transfer.vue
new file mode 100644
index 0000000000000..c3ecc1b43bf73
--- /dev/null
+++ b/packages/components/transfer/src/transfer.vue
@@ -0,0 +1,161 @@
+<template>
+  <div :class="ns.b()">
+    <transfer-panel
+      ref="leftPanel"
+      :data="sourceData"
+      :option-render="optionRender"
+      :placeholder="panelFilterPlaceholder"
+      :title="leftPanelTitle"
+      :filterable="filterable"
+      :format="format"
+      :filter-method="filterMethod"
+      :default-checked="leftDefaultChecked"
+      :props="props.props"
+      @checked-change="onSourceCheckedChange"
+    >
+      <slot name="left-footer" />
+    </transfer-panel>
+    <div :class="ns.e('buttons')">
+      <el-button
+        type="primary"
+        :class="[ns.e('button'), ns.is('with-texts', hasButtonTexts)]"
+        :disabled="isEmpty(checkedState.rightChecked)"
+        @click="addToLeft"
+      >
+        <el-icon><arrow-left /></el-icon>
+        <span v-if="!isUndefined(buttonTexts[0])">{{ buttonTexts[0] }}</span>
+      </el-button>
+      <el-button
+        type="primary"
+        :class="[ns.e('button'), ns.is('with-texts', hasButtonTexts)]"
+        :disabled="isEmpty(checkedState.leftChecked)"
+        @click="addToRight"
+      >
+        <span v-if="!isUndefined(buttonTexts[1])">{{ buttonTexts[1] }}</span>
+        <el-icon><arrow-right /></el-icon>
+      </el-button>
+    </div>
+    <transfer-panel
+      ref="rightPanel"
+      :data="targetData"
+      :option-render="optionRender"
+      :placeholder="panelFilterPlaceholder"
+      :filterable="filterable"
+      :format="format"
+      :filter-method="filterMethod"
+      :title="rightPanelTitle"
+      :default-checked="rightDefaultChecked"
+      :props="props.props"
+      @checked-change="onTargetCheckedChange"
+    >
+      <slot name="right-footer" />
+    </transfer-panel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, h, reactive, ref, useSlots, watch } from 'vue'
+import { debugWarn, isEmpty, isUndefined } from '@element-plus/utils'
+import { useFormItem, useLocale, useNamespace } from '@element-plus/hooks'
+import { ElButton } from '@element-plus/components/button'
+import { ElIcon } from '@element-plus/components/icon'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+import { transferEmits, transferProps } from './transfer'
+import {
+  useCheckedChange,
+  useComputedData,
+  useMove,
+  usePropsAlias,
+} from './composables'
+import TransferPanel from './transfer-panel.vue'
+
+import type {
+  TransferCheckedState,
+  TransferDataItem,
+  TransferDirection,
+} from './transfer'
+import type { TransferPanelInstance } from './transfer-panel'
+
+defineOptions({
+  name: 'ElTransfer',
+})
+
+const props = defineProps(transferProps)
+const emit = defineEmits(transferEmits)
+const slots = useSlots()
+
+const { t } = useLocale()
+const ns = useNamespace('transfer')
+const { formItem } = useFormItem()
+
+const checkedState = reactive<TransferCheckedState>({
+  leftChecked: [],
+  rightChecked: [],
+})
+
+const propsAlias = usePropsAlias(props)
+
+const { sourceData, targetData } = useComputedData(props)
+
+const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(
+  checkedState,
+  emit
+)
+
+const { addToLeft, addToRight } = useMove(props, checkedState, emit)
+
+const leftPanel = ref<TransferPanelInstance>()
+const rightPanel = ref<TransferPanelInstance>()
+
+const clearQuery = (which: TransferDirection) => {
+  switch (which) {
+    case 'left':
+      leftPanel.value!.query = ''
+      break
+    case 'right':
+      rightPanel.value!.query = ''
+      break
+  }
+}
+
+const hasButtonTexts = computed(() => props.buttonTexts.length === 2)
+
+const leftPanelTitle = computed(
+  () => props.titles[0] || t('el.transfer.titles.0')
+)
+
+const rightPanelTitle = computed(
+  () => props.titles[1] || t('el.transfer.titles.1')
+)
+
+const panelFilterPlaceholder = computed(
+  () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')
+)
+
+watch(
+  () => props.modelValue,
+  () => {
+    formItem?.validate?.('change').catch((err) => debugWarn(err))
+  }
+)
+
+const optionRender = computed(() => (option: TransferDataItem) => {
+  if (props.renderContent) return props.renderContent(h, option)
+
+  if (slots.default) return slots.default({ option })
+
+  return h(
+    'span',
+    option[propsAlias.value.label] || option[propsAlias.value.key]
+  )
+})
+
+defineExpose({
+  /** @description clear the filter keyword of a certain panel */
+  clearQuery,
+  /** @description left panel ref */
+  leftPanel,
+  /** @description left panel ref */
+  rightPanel,
+})
+</script>
diff --git a/packages/components/transfer/src/useCheckedChange.ts b/packages/components/transfer/src/useCheckedChange.ts
deleted file mode 100644
index accd686f3798d..0000000000000
--- a/packages/components/transfer/src/useCheckedChange.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// @ts-nocheck
-import type { Key, TransferCheckedState } from './transfer'
-
-export const LEFT_CHECK_CHANGE_EVENT = 'left-check-change'
-export const RIGHT_CHECK_CHANGE_EVENT = 'right-check-change'
-export const useCheckedChange = (checkedState: TransferCheckedState, emit) => {
-  const onSourceCheckedChange = (val: Key[], movedKeys: Key[]) => {
-    checkedState.leftChecked = val
-    if (movedKeys === undefined) return
-    emit(LEFT_CHECK_CHANGE_EVENT, val, movedKeys)
-  }
-
-  const onTargetCheckedChange = (val: Key[], movedKeys: Key[]) => {
-    checkedState.rightChecked = val
-    if (movedKeys === undefined) return
-    emit(RIGHT_CHECK_CHANGE_EVENT, val, movedKeys)
-  }
-
-  return {
-    onSourceCheckedChange,
-    onTargetCheckedChange,
-  }
-}
diff --git a/packages/components/transfer/src/useComputedData.ts b/packages/components/transfer/src/useComputedData.ts
deleted file mode 100644
index fcc2de17781ff..0000000000000
--- a/packages/components/transfer/src/useComputedData.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// @ts-nocheck
-import { computed } from 'vue'
-
-import type { TransferProps } from './transfer'
-
-export const useComputedData = (props: TransferProps) => {
-  const propsKey = computed(() => props.props.key)
-
-  const dataObj = computed(() => {
-    return props.data.reduce(
-      (o, cur) => (o[cur[propsKey.value]] = cur) && o,
-      {}
-    )
-  })
-
-  const sourceData = computed(() => {
-    return props.data.filter(
-      (item) => !props.modelValue.includes(item[propsKey.value])
-    )
-  })
-
-  const targetData = computed(() => {
-    if (props.targetOrder === 'original') {
-      return props.data.filter((item) =>
-        props.modelValue.includes(item[propsKey.value])
-      )
-    } else {
-      return props.modelValue.reduce((arr, cur) => {
-        const val = dataObj.value[cur]
-        if (val) {
-          arr.push(val)
-        }
-        return arr
-      }, [])
-    }
-  })
-
-  return {
-    propsKey,
-    sourceData,
-    targetData,
-  }
-}

From ca56e64fa3e1fd24179fbfee2666d328fefcdb53 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 28 Jun 2022 06:34:17 +0800
Subject: [PATCH 39/48] chore(deps): update all non-major dependencies (#8484)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .../workflows/publish-docs-deploy-manual.yml  |    4 +-
 .github/workflows/publish-docs-deploy.yml     |    4 +-
 .github/workflows/staging-docs.yml            |    2 +-
 docs/package.json                             |   14 +-
 internal/build-utils/package.json             |    2 +-
 internal/build/package.json                   |   12 +-
 internal/eslint-config/package.json           |   12 +-
 internal/metadata/package.json                |    4 +-
 package.json                                  |   44 +-
 packages/element-plus/package.json            |    8 +-
 packages/theme-chalk/package.json             |    2 +-
 play/package.json                             |    6 +-
 pnpm-lock.yaml                                | 1394 ++++++++---------
 13 files changed, 704 insertions(+), 804 deletions(-)

diff --git a/.github/workflows/publish-docs-deploy-manual.yml b/.github/workflows/publish-docs-deploy-manual.yml
index 7cd6f91460772..5d1c22a6f65f9 100644
--- a/.github/workflows/publish-docs-deploy-manual.yml
+++ b/.github/workflows/publish-docs-deploy-manual.yml
@@ -51,7 +51,7 @@ jobs:
           DOC_ENV: production
 
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@v4.3.3
+        uses: JamesIves/github-pages-deploy-action@v4.3.4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages
@@ -61,7 +61,7 @@ jobs:
           commit-message: website deploy
 
       - name: Deploy to vercel
-        uses: JamesIves/github-pages-deploy-action@v4.3.3
+        uses: JamesIves/github-pages-deploy-action@v4.3.4
         with:
           token: ${{ secrets.EP_BOT_TOKEN }}
           branch: main
diff --git a/.github/workflows/publish-docs-deploy.yml b/.github/workflows/publish-docs-deploy.yml
index 7f27ed931a9ff..3a7e8614a5903 100644
--- a/.github/workflows/publish-docs-deploy.yml
+++ b/.github/workflows/publish-docs-deploy.yml
@@ -58,7 +58,7 @@ jobs:
           DOC_ENV: production
 
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@v4.3.3
+        uses: JamesIves/github-pages-deploy-action@v4.3.4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages
@@ -68,7 +68,7 @@ jobs:
           commit-message: website deploy
 
       - name: Deploy to vercel
-        uses: JamesIves/github-pages-deploy-action@v4.3.3
+        uses: JamesIves/github-pages-deploy-action@v4.3.4
         with:
           token: ${{ secrets.EP_BOT_TOKEN }}
           branch: main
diff --git a/.github/workflows/staging-docs.yml b/.github/workflows/staging-docs.yml
index d393a0c54a1d4..5f050a6965e68 100644
--- a/.github/workflows/staging-docs.yml
+++ b/.github/workflows/staging-docs.yml
@@ -66,7 +66,7 @@ jobs:
           NODE_OPTIONS: --max-old-space-size=4096
 
       - name: Deploy staging website
-        uses: JamesIves/github-pages-deploy-action@v4.3.3
+        uses: JamesIves/github-pages-deploy-action@v4.3.4
         with:
           token: ${{ secrets.EP_BOT_TOKEN }}
           branch: main
diff --git a/docs/package.json b/docs/package.json
index abba5e190d4f5..6d4aaa864a3ea 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@docsearch/js": "^3.1.0",
-    "@element-plus/icons-vue": "^2.0.5",
+    "@element-plus/icons-vue": "^2.0.6",
     "@element-plus/metadata": "workspace:*",
     "@vue/shared": "^3.2.37",
-    "@vueuse/core": "^8.6.0",
+    "@vueuse/core": "^8.7.5",
     "axios": "^0.27.2",
     "clipboard-copy": "^4.0.1",
     "element-plus": "npm:element-plus@latest",
@@ -29,7 +29,7 @@
     "@element-plus/build": "workspace:*",
     "@element-plus/build-constants": "workspace:*",
     "@element-plus/build-utils": "workspace:*",
-    "@iconify-json/ri": "^1.1.2",
+    "@iconify-json/ri": "^1.1.3",
     "@types/markdown-it": "^12.2.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "chalk": "^4.1.2",
@@ -38,13 +38,13 @@
     "escape-html": "^1.0.3",
     "fast-glob": "^3.2.11",
     "markdown-it-container": "^3.0.0",
-    "octokit": "^1.7.2",
+    "octokit": "^1.8.1",
     "prismjs": "^1.28.0",
     "unocss": "0.33.5",
-    "unplugin-icons": "^0.14.3",
-    "unplugin-vue-components": "^0.19.6",
+    "unplugin-icons": "^0.14.6",
+    "unplugin-vue-components": "^0.20.1",
     "unplugin-vue-define-options": "^0.6.1",
-    "vite": "^2.9.12",
+    "vite": "^2.9.13",
     "vite-plugin-inspect": "^0.5.0",
     "vite-plugin-mkcert": "^1.7.2",
     "vite-plugin-pwa": "^0.12.0",
diff --git a/internal/build-utils/package.json b/internal/build-utils/package.json
index 44278df24105f..8e55fffdab662 100644
--- a/internal/build-utils/package.json
+++ b/internal/build-utils/package.json
@@ -16,7 +16,7 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@pnpm/find-workspace-packages": "^4.0.12",
+    "@pnpm/find-workspace-packages": "^4.0.16",
     "@pnpm/logger": "^4.0.0",
     "consola": "^2.15.3"
   },
diff --git a/internal/build/package.json b/internal/build/package.json
index 497e3ae8cb8dc..272f5829ceee0 100644
--- a/internal/build/package.json
+++ b/internal/build/package.json
@@ -16,28 +16,28 @@
   },
   "dependencies": {
     "@element-plus/build-constants": "^0.0.1",
-    "@pnpm/find-workspace-packages": "^4.0.12",
+    "@pnpm/find-workspace-packages": "^4.0.16",
     "@pnpm/logger": "^4.0.0",
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "chalk": "^5.0.1",
     "components-helper": "^2.0.0",
     "consola": "^2.15.3",
-    "esbuild": "^0.14.43",
+    "esbuild": "^0.14.47",
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.1.0",
     "gulp": "^4.0.2",
     "lodash": "^4.17.21",
-    "rollup": "^2.75.6",
+    "rollup": "^2.75.7",
     "rollup-plugin-esbuild": "^4.9.1",
     "ts-morph": "^14.0.0",
     "unplugin-vue-define-options": "^0.6.1"
   },
   "devDependencies": {
-    "@esbuild-kit/cjs-loader": "^2.1.0",
-    "@pnpm/types": "^8.1.0",
+    "@esbuild-kit/cjs-loader": "^2.2.1",
+    "@pnpm/types": "^8.4.0",
     "unbuild": "^0.7.4",
     "vue": "^3.2.37"
   }
diff --git a/internal/eslint-config/package.json b/internal/eslint-config/package.json
index f817e92a095c0..e12ea96bec085 100644
--- a/internal/eslint-config/package.json
+++ b/internal/eslint-config/package.json
@@ -14,23 +14,23 @@
     "eslint": "^8.0.0"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-define-config": "^1.5.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsonc": "^2.3.0",
     "eslint-plugin-markdown": "^2.2.1",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.1.0",
     "eslint-plugin-unicorn": "^42.0.0",
     "eslint-plugin-vue": "^9.1.1",
     "jsonc-eslint-parser": "^2.1.0",
-    "prettier": "^2.7.0",
-    "typescript": "^4.7.3",
+    "prettier": "^2.7.1",
+    "typescript": "^4.7.4",
     "yaml-eslint-parser": "^1.0.1"
   },
   "devDependencies": {
-    "eslint": "^8.17.0"
+    "eslint": "^8.18.0"
   }
 }
diff --git a/internal/metadata/package.json b/internal/metadata/package.json
index 7db6462c1c3a9..ab084ba60a9c8 100644
--- a/internal/metadata/package.json
+++ b/internal/metadata/package.json
@@ -29,7 +29,7 @@
     "fast-glob": "^3.2.11",
     "lodash-es": "^4.17.21",
     "npm-run-all": "^4.1.5",
-    "octokit": "^1.7.2",
-    "tsx": "^3.4.2"
+    "octokit": "^1.8.1",
+    "tsx": "^3.6.0"
   }
 }
diff --git a/package.json b/package.json
index 141f717b77c3f..483dbedec4617 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "packageManager": "pnpm@7.2.1",
+  "packageManager": "pnpm@7.3.0",
   "workspaces": [
     "packages/*",
     "play",
@@ -48,18 +48,18 @@
     "@element-plus/constants": "workspace:*",
     "@element-plus/directives": "workspace:*",
     "@element-plus/hooks": "workspace:*",
-    "@element-plus/icons-vue": "^2.0.5",
+    "@element-plus/icons-vue": "^2.0.6",
     "@element-plus/locale": "workspace:*",
     "@element-plus/test-utils": "workspace:*",
     "@element-plus/theme-chalk": "workspace:*",
     "@element-plus/tokens": "workspace:*",
     "@element-plus/utils": "workspace:*",
-    "@floating-ui/dom": "^0.5.3",
+    "@floating-ui/dom": "^0.5.4",
     "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
     "@types/lodash": "^4.14.182",
     "@types/lodash-es": "^4.17.6",
-    "@vueuse/core": "^8.6.0",
-    "async-validator": "^4.1.1",
+    "@vueuse/core": "^8.7.5",
+    "async-validator": "^4.2.5",
     "dayjs": "^1.11.3",
     "escape-html": "^1.0.3",
     "lodash": "^4.17.21",
@@ -69,15 +69,15 @@
     "normalize-wheel-es": "^1.1.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.0.2",
-    "@commitlint/config-conventional": "^17.0.2",
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
     "@element-plus/build": "workspace:^0.0.1",
     "@element-plus/build-utils": "workspace:^0.0.1",
     "@element-plus/eslint-config": "workspace:*",
-    "@esbuild-kit/cjs-loader": "^2.1.0",
-    "@pnpm/find-workspace-packages": "^4.0.12",
+    "@esbuild-kit/cjs-loader": "^2.2.1",
+    "@pnpm/find-workspace-packages": "^4.0.16",
     "@pnpm/logger": "^4.0.0",
-    "@pnpm/types": "^8.1.0",
+    "@pnpm/types": "^8.4.0",
     "@types/fs-extra": "^9.0.13",
     "@types/gulp": "^4.0.9",
     "@types/jsdom": "^16.2.14",
@@ -85,40 +85,40 @@
     "@types/sass": "^1.43.1",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
-    "@vitest/ui": "0.14.2",
+    "@vitest/ui": "0.16.0",
     "@vue/test-utils": "^2.0.0",
     "@vue/tsconfig": "^0.1.3",
     "c8": "^7.11.3",
     "chalk": "^5.0.1",
     "commitizen": "^4.2.4",
-    "concurrently": "^7.2.1",
+    "concurrently": "^7.2.2",
     "consola": "^2.15.3",
     "csstype": "^2.6.20",
-    "cz-git": "^1.3.4",
-    "eslint": "^8.17.0",
+    "cz-git": "^1.3.8",
+    "eslint": "^8.18.0",
     "eslint-define-config": "^1.5.1",
     "expect-type": "^0.13.0",
     "fast-glob": "^3.2.11",
     "husky": "^8.0.1",
     "jsdom": "16.4.0",
-    "lint-staged": "^13.0.1",
+    "lint-staged": "^13.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.0",
+    "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
-    "puppeteer": "^14.4.0",
+    "puppeteer": "^14.4.1",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.2",
-    "sass": "^1.52.3",
+    "sass": "^1.53.0",
     "ts-morph": "^14.0.0",
-    "tsx": "^3.4.2",
-    "type-fest": "^2.13.1",
-    "typescript": "^4.7.3",
+    "tsx": "^3.6.0",
+    "type-fest": "^2.14.0",
+    "typescript": "^4.7.4",
     "unplugin-element-plus": "^0.4.0",
     "unplugin-vue-define-options": "^0.6.1",
     "vitest": "0.12.6",
     "vue": "^3.2.37",
     "vue-router": "^4.0.16",
-    "vue-tsc": "^0.37.8"
+    "vue-tsc": "^0.38.2"
   },
   "engines": {
     "node": ">= 16"
diff --git a/packages/element-plus/package.json b/packages/element-plus/package.json
index c938c30a19bd9..fb752469a1feb 100644
--- a/packages/element-plus/package.json
+++ b/packages/element-plus/package.json
@@ -52,13 +52,13 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.1",
-    "@element-plus/icons-vue": "^2.0.5",
-    "@floating-ui/dom": "^0.5.3",
+    "@element-plus/icons-vue": "^2.0.6",
+    "@floating-ui/dom": "^0.5.4",
     "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
     "@types/lodash": "^4.14.182",
     "@types/lodash-es": "^4.17.6",
-    "@vueuse/core": "^8.6.0",
-    "async-validator": "^4.1.1",
+    "@vueuse/core": "^8.7.5",
+    "async-validator": "^4.2.5",
     "dayjs": "^1.11.3",
     "escape-html": "^1.0.3",
     "lodash": "^4.17.21",
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index ebe339021ed27..1ecdac8521b01 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@element-plus/build": "workspace:*",
-    "@esbuild-kit/cjs-loader": "^2.1.0",
+    "@esbuild-kit/cjs-loader": "^2.2.1",
     "@types/gulp-autoprefixer": "^0.0.33",
     "@types/gulp-clean-css": "^4.3.0",
     "@types/gulp-rename": "^2.0.1",
diff --git a/play/package.json b/play/package.json
index 542bed444b21b..4e8f80a0507cb 100644
--- a/play/package.json
+++ b/play/package.json
@@ -7,13 +7,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.0.5",
+    "@element-plus/icons-vue": "^2.0.6",
     "vue": "^3.2.37"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
-    "unplugin-vue-components": "^0.19.6",
-    "vite": "^2.9.12",
+    "unplugin-vue-components": "^0.20.1",
+    "vite": "^2.9.13",
     "vite-plugin-inspect": "^0.5.0",
     "vite-plugin-mkcert": "^1.7.2"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9451e36a3186e..0b32768cfd313 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,8 +4,8 @@ importers:
 
   .:
     specifiers:
-      '@commitlint/cli': ^17.0.2
-      '@commitlint/config-conventional': ^17.0.2
+      '@commitlint/cli': ^17.0.3
+      '@commitlint/config-conventional': ^17.0.3
       '@element-plus/build': workspace:^0.0.1
       '@element-plus/build-utils': workspace:^0.0.1
       '@element-plus/components': workspace:*
@@ -13,17 +13,17 @@ importers:
       '@element-plus/directives': workspace:*
       '@element-plus/eslint-config': workspace:*
       '@element-plus/hooks': workspace:*
-      '@element-plus/icons-vue': ^2.0.5
+      '@element-plus/icons-vue': ^2.0.6
       '@element-plus/locale': workspace:*
       '@element-plus/test-utils': workspace:*
       '@element-plus/theme-chalk': workspace:*
       '@element-plus/tokens': workspace:*
       '@element-plus/utils': workspace:*
-      '@esbuild-kit/cjs-loader': ^2.1.0
-      '@floating-ui/dom': ^0.5.3
-      '@pnpm/find-workspace-packages': ^4.0.12
+      '@esbuild-kit/cjs-loader': ^2.2.1
+      '@floating-ui/dom': ^0.5.4
+      '@pnpm/find-workspace-packages': ^4.0.16
       '@pnpm/logger': ^4.0.0
-      '@pnpm/types': ^8.1.0
+      '@pnpm/types': ^8.4.0
       '@popperjs/core': npm:@sxzz/popperjs-es@^2.11.7
       '@types/fs-extra': ^9.0.13
       '@types/gulp': ^4.0.9
@@ -34,66 +34,66 @@ importers:
       '@types/sass': ^1.43.1
       '@vitejs/plugin-vue': ^2.3.3
       '@vitejs/plugin-vue-jsx': ^1.3.10
-      '@vitest/ui': 0.14.2
+      '@vitest/ui': 0.16.0
       '@vue/test-utils': ^2.0.0
       '@vue/tsconfig': ^0.1.3
-      '@vueuse/core': ^8.6.0
-      async-validator: ^4.1.1
+      '@vueuse/core': ^8.7.5
+      async-validator: ^4.2.5
       c8: ^7.11.3
       chalk: ^5.0.1
       commitizen: ^4.2.4
-      concurrently: ^7.2.1
+      concurrently: ^7.2.2
       consola: ^2.15.3
       csstype: ^2.6.20
-      cz-git: ^1.3.4
+      cz-git: ^1.3.8
       dayjs: ^1.11.3
       escape-html: ^1.0.3
-      eslint: ^8.17.0
+      eslint: ^8.18.0
       eslint-define-config: ^1.5.1
       expect-type: ^0.13.0
       fast-glob: ^3.2.11
       husky: ^8.0.1
       jsdom: 16.4.0
-      lint-staged: ^13.0.1
+      lint-staged: ^13.0.3
       lodash: ^4.17.21
       lodash-es: ^4.17.21
       lodash-unified: ^1.0.2
       memoize-one: ^6.0.0
       normalize-wheel-es: ^1.1.2
       npm-run-all: ^4.1.5
-      prettier: ^2.7.0
+      prettier: ^2.7.1
       pretty-quick: ^3.1.3
-      puppeteer: ^14.4.0
+      puppeteer: ^14.4.1
       resize-observer-polyfill: ^1.5.1
       rimraf: ^3.0.2
-      sass: ^1.52.3
+      sass: ^1.53.0
       ts-morph: ^14.0.0
-      tsx: ^3.4.2
-      type-fest: ^2.13.1
-      typescript: ^4.7.3
+      tsx: ^3.6.0
+      type-fest: ^2.14.0
+      typescript: ^4.7.4
       unplugin-element-plus: ^0.4.0
       unplugin-vue-define-options: ^0.6.1
       vitest: 0.12.6
       vue: ^3.2.37
       vue-router: ^4.0.16
-      vue-tsc: ^0.37.8
+      vue-tsc: ^0.38.2
     dependencies:
       '@element-plus/components': link:packages/components
       '@element-plus/constants': link:packages/constants
       '@element-plus/directives': link:packages/directives
       '@element-plus/hooks': link:packages/hooks
-      '@element-plus/icons-vue': 2.0.5_vue@3.2.37
+      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
       '@element-plus/locale': link:packages/locale
       '@element-plus/test-utils': link:packages/test-utils
       '@element-plus/theme-chalk': link:packages/theme-chalk
       '@element-plus/tokens': link:packages/tokens
       '@element-plus/utils': link:packages/utils
-      '@floating-ui/dom': 0.5.3
+      '@floating-ui/dom': 0.5.4
       '@popperjs/core': /@sxzz/popperjs-es/2.11.7
       '@types/lodash': 4.14.182
       '@types/lodash-es': 4.17.6
-      '@vueuse/core': 8.6.0_vue@3.2.37
-      async-validator: 4.1.1
+      '@vueuse/core': 8.7.5_vue@3.2.37
+      async-validator: 4.2.5
       dayjs: 1.11.3
       escape-html: 1.0.3
       lodash: 4.17.21
@@ -102,15 +102,15 @@ importers:
       memoize-one: 6.0.0
       normalize-wheel-es: 1.1.2
     devDependencies:
-      '@commitlint/cli': 17.0.2
-      '@commitlint/config-conventional': 17.0.2
+      '@commitlint/cli': 17.0.3
+      '@commitlint/config-conventional': 17.0.3
       '@element-plus/build': link:internal/build
       '@element-plus/build-utils': link:internal/build-utils
       '@element-plus/eslint-config': link:internal/eslint-config
-      '@esbuild-kit/cjs-loader': 2.1.0
-      '@pnpm/find-workspace-packages': 4.0.12_@pnpm+logger@4.0.0
+      '@esbuild-kit/cjs-loader': 2.2.1
+      '@pnpm/find-workspace-packages': 4.0.16_@pnpm+logger@4.0.0
       '@pnpm/logger': 4.0.0
-      '@pnpm/types': 8.1.0
+      '@pnpm/types': 8.4.0
       '@types/fs-extra': 9.0.13
       '@types/gulp': 4.0.9
       '@types/jsdom': 16.2.14
@@ -118,40 +118,40 @@ importers:
       '@types/sass': 1.43.1
       '@vitejs/plugin-vue': 2.3.3_vue@3.2.37
       '@vitejs/plugin-vue-jsx': 1.3.10
-      '@vitest/ui': 0.14.2
+      '@vitest/ui': 0.16.0
       '@vue/test-utils': 2.0.0_vue@3.2.37
       '@vue/tsconfig': 0.1.3_@types+node@17.0.40
       c8: 7.11.3
       chalk: 5.0.1
       commitizen: 4.2.4
-      concurrently: 7.2.1
+      concurrently: 7.2.2
       consola: 2.15.3
       csstype: 2.6.20
-      cz-git: 1.3.4
-      eslint: 8.17.0
+      cz-git: 1.3.8
+      eslint: 8.18.0
       eslint-define-config: 1.5.1
       expect-type: 0.13.0
       fast-glob: 3.2.11
       husky: 8.0.1
       jsdom: 16.4.0
-      lint-staged: 13.0.1
+      lint-staged: 13.0.3
       npm-run-all: 4.1.5
-      prettier: 2.7.0
-      pretty-quick: 3.1.3_prettier@2.7.0
-      puppeteer: 14.4.0
+      prettier: 2.7.1
+      pretty-quick: 3.1.3_prettier@2.7.1
+      puppeteer: 14.4.1
       resize-observer-polyfill: 1.5.1
       rimraf: 3.0.2
-      sass: 1.52.3
+      sass: 1.53.0
       ts-morph: 14.0.0
-      tsx: 3.4.2
-      type-fest: 2.13.1
-      typescript: 4.7.3
+      tsx: 3.6.0
+      type-fest: 2.14.0
+      typescript: 4.7.4
       unplugin-element-plus: 0.4.0
       unplugin-vue-define-options: 0.6.1_vue@3.2.37
-      vitest: 0.12.6_p3hsn2gyxkuoma7fybu4bszcau
+      vitest: 0.12.6_s3h4fu5cxhimy2a3bowqsjsovu
       vue: 3.2.37
       vue-router: 4.0.16_vue@3.2.37
-      vue-tsc: 0.37.8_typescript@4.7.3
+      vue-tsc: 0.38.2_typescript@4.7.4
 
   docs:
     specifiers:
@@ -161,13 +161,13 @@ importers:
       '@element-plus/build': workspace:*
       '@element-plus/build-constants': workspace:*
       '@element-plus/build-utils': workspace:*
-      '@element-plus/icons-vue': ^2.0.5
+      '@element-plus/icons-vue': ^2.0.6
       '@element-plus/metadata': workspace:*
-      '@iconify-json/ri': ^1.1.2
+      '@iconify-json/ri': ^1.1.3
       '@types/markdown-it': ^12.2.3
       '@vitejs/plugin-vue-jsx': ^1.3.10
       '@vue/shared': ^3.2.37
-      '@vueuse/core': ^8.6.0
+      '@vueuse/core': ^8.7.5
       axios: ^0.27.2
       chalk: ^4.1.2
       clipboard-copy: ^4.0.1
@@ -180,14 +180,14 @@ importers:
       markdown-it-container: ^3.0.0
       normalize.css: ^8.0.1
       nprogress: ^0.2.0
-      octokit: ^1.7.2
+      octokit: ^1.8.1
       prism-theme-vars: ^0.2.3
       prismjs: ^1.28.0
       unocss: 0.33.5
-      unplugin-icons: ^0.14.3
-      unplugin-vue-components: ^0.19.6
+      unplugin-icons: ^0.14.6
+      unplugin-vue-components: ^0.20.1
       unplugin-vue-define-options: ^0.6.1
-      vite: ^2.9.12
+      vite: ^2.9.13
       vite-plugin-inspect: ^0.5.0
       vite-plugin-mkcert: ^1.7.2
       vite-plugin-pwa: ^0.12.0
@@ -195,13 +195,13 @@ importers:
       vue: ^3.2.37
     dependencies:
       '@docsearch/js': 3.1.0
-      '@element-plus/icons-vue': 2.0.5_vue@3.2.37
+      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
       '@element-plus/metadata': link:../internal/metadata
       '@vue/shared': 3.2.37
-      '@vueuse/core': 8.6.0_vue@3.2.37
+      '@vueuse/core': 8.7.5_vue@3.2.37
       axios: 0.27.2
       clipboard-copy: 4.0.1
-      element-plus: 2.2.5_vue@3.2.37
+      element-plus: 2.2.6_vue@3.2.37
       markdown-it: 13.0.1
       normalize.css: 8.0.1
       nprogress: 0.2.0
@@ -213,7 +213,7 @@ importers:
       '@element-plus/build': link:../internal/build
       '@element-plus/build-constants': link:../internal/build-constants
       '@element-plus/build-utils': link:../internal/build-utils
-      '@iconify-json/ri': 1.1.2
+      '@iconify-json/ri': 1.1.3
       '@types/markdown-it': 12.2.3
       '@vitejs/plugin-vue-jsx': 1.3.10
       chalk: 4.1.2
@@ -222,38 +222,38 @@ importers:
       escape-html: 1.0.3
       fast-glob: 3.2.11
       markdown-it-container: 3.0.0
-      octokit: 1.7.2
+      octokit: 1.8.1
       prismjs: 1.28.0
-      unocss: 0.33.5_vite@2.9.12
-      unplugin-icons: 0.14.3_vite@2.9.12
-      unplugin-vue-components: 0.19.6_vite@2.9.12+vue@3.2.37
-      unplugin-vue-define-options: 0.6.1_vite@2.9.12+vue@3.2.37
-      vite: 2.9.12
-      vite-plugin-inspect: 0.5.0_vite@2.9.12
+      unocss: 0.33.5_vite@2.9.13
+      unplugin-icons: 0.14.6_vite@2.9.13
+      unplugin-vue-components: 0.20.1_vite@2.9.13+vue@3.2.37
+      unplugin-vue-define-options: 0.6.1_vite@2.9.13+vue@3.2.37
+      vite: 2.9.13
+      vite-plugin-inspect: 0.5.0_vite@2.9.13
       vite-plugin-mkcert: 1.7.2
-      vite-plugin-pwa: 0.12.0_vite@2.9.12
+      vite-plugin-pwa: 0.12.0_vite@2.9.13
       vitepress: 0.22.4
 
   internal/build:
     specifiers:
       '@element-plus/build-constants': ^0.0.1
-      '@esbuild-kit/cjs-loader': ^2.1.0
-      '@pnpm/find-workspace-packages': ^4.0.12
+      '@esbuild-kit/cjs-loader': ^2.2.1
+      '@pnpm/find-workspace-packages': ^4.0.16
       '@pnpm/logger': ^4.0.0
-      '@pnpm/types': ^8.1.0
-      '@rollup/plugin-commonjs': ^22.0.0
+      '@pnpm/types': ^8.4.0
+      '@rollup/plugin-commonjs': ^22.0.1
       '@rollup/plugin-node-resolve': ^13.3.0
       '@vitejs/plugin-vue': ^2.3.3
       '@vitejs/plugin-vue-jsx': ^1.3.10
       chalk: ^5.0.1
       components-helper: ^2.0.0
       consola: ^2.15.3
-      esbuild: ^0.14.43
+      esbuild: ^0.14.47
       fast-glob: ^3.2.11
       fs-extra: ^10.1.0
       gulp: ^4.0.2
       lodash: ^4.17.21
-      rollup: ^2.75.6
+      rollup: ^2.75.7
       rollup-plugin-esbuild: ^4.9.1
       ts-morph: ^14.0.0
       unbuild: ^0.7.4
@@ -261,27 +261,27 @@ importers:
       vue: ^3.2.37
     dependencies:
       '@element-plus/build-constants': link:../build-constants
-      '@pnpm/find-workspace-packages': 4.0.12_@pnpm+logger@4.0.0
+      '@pnpm/find-workspace-packages': 4.0.16_@pnpm+logger@4.0.0
       '@pnpm/logger': 4.0.0
-      '@rollup/plugin-commonjs': 22.0.0_rollup@2.75.6
-      '@rollup/plugin-node-resolve': 13.3.0_rollup@2.75.6
+      '@rollup/plugin-commonjs': 22.0.1_rollup@2.75.7
+      '@rollup/plugin-node-resolve': 13.3.0_rollup@2.75.7
       '@vitejs/plugin-vue': 2.3.3_vue@3.2.37
       '@vitejs/plugin-vue-jsx': 1.3.10
       chalk: 5.0.1
       components-helper: 2.0.0
       consola: 2.15.3
-      esbuild: 0.14.43
+      esbuild: 0.14.47
       fast-glob: 3.2.11
       fs-extra: 10.1.0
       gulp: 4.0.2
       lodash: 4.17.21
-      rollup: 2.75.6
-      rollup-plugin-esbuild: 4.9.1_2uefy6dldbldonrghlgjus4ieu
+      rollup: 2.75.7
+      rollup-plugin-esbuild: 4.9.1_qrpxjnto46iodaa4efitqiw3he
       ts-morph: 14.0.0
-      unplugin-vue-define-options: 0.6.1_m375ryyfrmfofwntyuzleomjpq
+      unplugin-vue-define-options: 0.6.1_z4bu4wu5k7xudjmnmksyrigboq
     devDependencies:
-      '@esbuild-kit/cjs-loader': 2.1.0
-      '@pnpm/types': 8.1.0
+      '@esbuild-kit/cjs-loader': 2.2.1
+      '@pnpm/types': 8.4.0
       unbuild: 0.7.4
       vue: 3.2.37
 
@@ -293,12 +293,12 @@ importers:
 
   internal/build-utils:
     specifiers:
-      '@pnpm/find-workspace-packages': ^4.0.12
+      '@pnpm/find-workspace-packages': ^4.0.16
       '@pnpm/logger': ^4.0.0
       consola: ^2.15.3
       unbuild: ^0.7.4
     dependencies:
-      '@pnpm/find-workspace-packages': 4.0.12_@pnpm+logger@4.0.0
+      '@pnpm/find-workspace-packages': 4.0.16_@pnpm+logger@4.0.0
       '@pnpm/logger': 4.0.0
       consola: 2.15.3
     devDependencies:
@@ -306,40 +306,40 @@ importers:
 
   internal/eslint-config:
     specifiers:
-      '@typescript-eslint/eslint-plugin': ^5.28.0
-      '@typescript-eslint/parser': ^5.28.0
-      eslint: ^8.17.0
+      '@typescript-eslint/eslint-plugin': ^5.30.0
+      '@typescript-eslint/parser': ^5.30.0
+      eslint: ^8.18.0
       eslint-config-prettier: ^8.5.0
       eslint-define-config: ^1.5.1
       eslint-plugin-eslint-comments: ^3.2.0
       eslint-plugin-import: ^2.26.0
       eslint-plugin-jsonc: ^2.3.0
       eslint-plugin-markdown: ^2.2.1
-      eslint-plugin-prettier: ^4.0.0
+      eslint-plugin-prettier: ^4.1.0
       eslint-plugin-unicorn: ^42.0.0
       eslint-plugin-vue: ^9.1.1
       jsonc-eslint-parser: ^2.1.0
-      prettier: ^2.7.0
-      typescript: ^4.7.3
+      prettier: ^2.7.1
+      typescript: ^4.7.4
       yaml-eslint-parser: ^1.0.1
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.28.0_7yumg2qjgbp7maccqlfhx2vudu
-      '@typescript-eslint/parser': 5.28.0_ud6rd4xtew5bv4yhvkvu24pzm4
-      eslint-config-prettier: 8.5.0_eslint@8.17.0
+      '@typescript-eslint/eslint-plugin': 5.30.0_5mtqsiui4sk53pmkx7i7ue45wm
+      '@typescript-eslint/parser': 5.30.0_b5e7v2qnwxfo6hmiq56u52mz3e
+      eslint-config-prettier: 8.5.0_eslint@8.18.0
       eslint-define-config: 1.5.1
-      eslint-plugin-eslint-comments: 3.2.0_eslint@8.17.0
-      eslint-plugin-import: 2.26.0_wyrfqmvemfacbroyi3ypviy7f4
-      eslint-plugin-jsonc: 2.3.0_eslint@8.17.0
-      eslint-plugin-markdown: 2.2.1_eslint@8.17.0
-      eslint-plugin-prettier: 4.0.0_nguwan5pqsajixjz57ffz7bkde
-      eslint-plugin-unicorn: 42.0.0_eslint@8.17.0
-      eslint-plugin-vue: 9.1.1_eslint@8.17.0
+      eslint-plugin-eslint-comments: 3.2.0_eslint@8.18.0
+      eslint-plugin-import: 2.26.0_wno36sjfnklvt2ocf7qbhb2izy
+      eslint-plugin-jsonc: 2.3.0_eslint@8.18.0
+      eslint-plugin-markdown: 2.2.1_eslint@8.18.0
+      eslint-plugin-prettier: 4.1.0_xu6ewijrtliw5q5lksq5uixwby
+      eslint-plugin-unicorn: 42.0.0_eslint@8.18.0
+      eslint-plugin-vue: 9.1.1_eslint@8.18.0
       jsonc-eslint-parser: 2.1.0
-      prettier: 2.7.0
-      typescript: 4.7.3
+      prettier: 2.7.1
+      typescript: 4.7.4
       yaml-eslint-parser: 1.0.1
     devDependencies:
-      eslint: 8.17.0
+      eslint: 8.18.0
 
   internal/metadata:
     specifiers:
@@ -353,8 +353,8 @@ importers:
       fast-glob: ^3.2.11
       lodash-es: ^4.17.21
       npm-run-all: ^4.1.5
-      octokit: ^1.7.2
-      tsx: ^3.4.2
+      octokit: ^1.8.1
+      tsx: ^3.6.0
     devDependencies:
       '@element-plus/build': link:../build
       '@element-plus/build-constants': link:../build-constants
@@ -366,8 +366,8 @@ importers:
       fast-glob: 3.2.11
       lodash-es: 4.17.21
       npm-run-all: 4.1.5
-      octokit: 1.7.2
-      tsx: 3.4.2
+      octokit: 1.8.1
+      tsx: 3.6.0
 
   packages/components:
     specifiers: {}
@@ -381,14 +381,14 @@ importers:
   packages/element-plus:
     specifiers:
       '@ctrl/tinycolor': ^3.4.1
-      '@element-plus/icons-vue': ^2.0.5
-      '@floating-ui/dom': ^0.5.3
+      '@element-plus/icons-vue': ^2.0.6
+      '@floating-ui/dom': ^0.5.4
       '@popperjs/core': npm:@sxzz/popperjs-es@^2.11.7
       '@types/lodash': ^4.14.182
       '@types/lodash-es': ^4.17.6
       '@types/node': '*'
-      '@vueuse/core': ^8.6.0
-      async-validator: ^4.1.1
+      '@vueuse/core': ^8.7.5
+      async-validator: ^4.2.5
       csstype: ^2.6.20
       dayjs: ^1.11.3
       escape-html: ^1.0.3
@@ -401,13 +401,13 @@ importers:
       vue-router: ^4.0.16
     dependencies:
       '@ctrl/tinycolor': 3.4.1
-      '@element-plus/icons-vue': 2.0.5_vue@3.2.37
-      '@floating-ui/dom': 0.5.3
+      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
+      '@floating-ui/dom': 0.5.4
       '@popperjs/core': /@sxzz/popperjs-es/2.11.7
       '@types/lodash': 4.14.182
       '@types/lodash-es': 4.17.6
-      '@vueuse/core': 8.6.0_vue@3.2.37
-      async-validator: 4.1.1
+      '@vueuse/core': 8.7.5_vue@3.2.37
+      async-validator: 4.2.5
       dayjs: 1.11.3
       escape-html: 1.0.3
       lodash: 4.17.21
@@ -433,7 +433,7 @@ importers:
   packages/theme-chalk:
     specifiers:
       '@element-plus/build': workspace:*
-      '@esbuild-kit/cjs-loader': ^2.1.0
+      '@esbuild-kit/cjs-loader': ^2.2.1
       '@types/gulp-autoprefixer': ^0.0.33
       '@types/gulp-clean-css': ^4.3.0
       '@types/gulp-rename': ^2.0.1
@@ -444,7 +444,7 @@ importers:
       gulp-sass: ^5.1.0
     devDependencies:
       '@element-plus/build': link:../../internal/build
-      '@esbuild-kit/cjs-loader': 2.1.0
+      '@esbuild-kit/cjs-loader': 2.2.1
       '@types/gulp-autoprefixer': 0.0.33
       '@types/gulp-clean-css': 4.3.0
       '@types/gulp-rename': 2.0.1
@@ -462,21 +462,21 @@ importers:
 
   play:
     specifiers:
-      '@element-plus/icons-vue': ^2.0.5
+      '@element-plus/icons-vue': ^2.0.6
       '@vitejs/plugin-vue': ^2.3.3
-      unplugin-vue-components: ^0.19.6
-      vite: ^2.9.12
+      unplugin-vue-components: ^0.20.1
+      vite: ^2.9.13
       vite-plugin-inspect: ^0.5.0
       vite-plugin-mkcert: ^1.7.2
       vue: ^3.2.37
     dependencies:
-      '@element-plus/icons-vue': 2.0.5_vue@3.2.37
+      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
       vue: 3.2.37
     devDependencies:
-      '@vitejs/plugin-vue': 2.3.3_vite@2.9.12+vue@3.2.37
-      unplugin-vue-components: 0.19.6_vite@2.9.12+vue@3.2.37
-      vite: 2.9.12
-      vite-plugin-inspect: 0.5.0_vite@2.9.12
+      '@vitejs/plugin-vue': 2.3.3_vite@2.9.13+vue@3.2.37
+      unplugin-vue-components: 0.20.1_vite@2.9.13+vue@3.2.37
+      vite: 2.9.13
+      vite-plugin-inspect: 0.5.0_vite@2.9.13
       vite-plugin-mkcert: 1.7.2
 
 packages:
@@ -1747,14 +1747,14 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
 
-  /@commitlint/cli/17.0.2:
-    resolution: {integrity: sha512-Axe89Js0YzGGd4gxo3JLlF7yIdjOVpG1LbOorGc6PfYF+drBh14PvarSDLzyd2TNqdylUCq9wb9/A88ZjIdyhA==}
+  /@commitlint/cli/17.0.3:
+    resolution: {integrity: sha512-oAo2vi5d8QZnAbtU5+0cR2j+A7PO8zuccux65R/EycwvsZrDVyW518FFrnJK2UQxbRtHFFIG+NjQ6vOiJV0Q8A==}
     engines: {node: '>=v14'}
     hasBin: true
     dependencies:
       '@commitlint/format': 17.0.0
-      '@commitlint/lint': 17.0.0
-      '@commitlint/load': 17.0.0
+      '@commitlint/lint': 17.0.3
+      '@commitlint/load': 17.0.3
       '@commitlint/read': 17.0.0
       '@commitlint/types': 17.0.0
       execa: 5.1.1
@@ -1767,19 +1767,19 @@ packages:
       - '@swc/wasm'
     dev: true
 
-  /@commitlint/config-conventional/17.0.2:
-    resolution: {integrity: sha512-MfP0I/JbxKkzo+HXWB7B3WstGS4BiniotU3d3xQ9gK8cR0DbeZ4MuyGCWF65YDyrcDTS3WlrJ3ndSPA1pqhoPw==}
+  /@commitlint/config-conventional/17.0.3:
+    resolution: {integrity: sha512-HCnzTm5ATwwwzNVq5Y57poS0a1oOOcd5pc1MmBpLbGmSysc4i7F/++JuwtdFPu16sgM3H9J/j2zznRLOSGVO2A==}
     engines: {node: '>=v14'}
     dependencies:
       conventional-changelog-conventionalcommits: 5.0.0
     dev: true
 
-  /@commitlint/config-validator/17.0.0:
-    resolution: {integrity: sha512-78IQjoZWR4kDHp/U5y17euEWzswJpPkA9TDL5F6oZZZaLIEreWzrDZD5PWtM8MsSRl/K2LDU/UrzYju2bKLMpA==}
+  /@commitlint/config-validator/17.0.3:
+    resolution: {integrity: sha512-3tLRPQJKapksGE7Kee9axv+9z5I2GDHitDH4q63q7NmNA0wkB+DAorJ0RHz2/K00Zb1/MVdHzhCga34FJvDihQ==}
     engines: {node: '>=v14'}
     dependencies:
       '@commitlint/types': 17.0.0
-      ajv: 6.12.6
+      ajv: 8.11.0
     dev: true
 
   /@commitlint/ensure/17.0.0:
@@ -1803,40 +1803,39 @@ packages:
       chalk: 4.1.2
     dev: true
 
-  /@commitlint/is-ignored/17.0.0:
-    resolution: {integrity: sha512-UmacD0XM/wWykgdXn5CEWVS4XGuqzU+ZGvM2hwv85+SXGnIOaG88XHrt81u37ZeVt1riWW+YdOxcJW6+nd5v5w==}
+  /@commitlint/is-ignored/17.0.3:
+    resolution: {integrity: sha512-/wgCXAvPtFTQZxsVxj7owLeRf5wwzcXLaYmrZPR4a87iD4sCvUIRl1/ogYrtOyUmHwWfQsvjqIB4mWE/SqWSnA==}
     engines: {node: '>=v14'}
     dependencies:
       '@commitlint/types': 17.0.0
       semver: 7.3.7
     dev: true
 
-  /@commitlint/lint/17.0.0:
-    resolution: {integrity: sha512-5FL7VLvGJQby24q0pd4UdM8FNFcL+ER1T/UBf8A9KRL5+QXV1Rkl6Zhcl7+SGpGlVo6Yo0pm6aLW716LVKWLGg==}
+  /@commitlint/lint/17.0.3:
+    resolution: {integrity: sha512-2o1fk7JUdxBUgszyt41sHC/8Nd5PXNpkmuOo9jvGIjDHzOwXyV0PSdbEVTH3xGz9NEmjohFHr5l+N+T9fcxong==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/is-ignored': 17.0.0
+      '@commitlint/is-ignored': 17.0.3
       '@commitlint/parse': 17.0.0
       '@commitlint/rules': 17.0.0
       '@commitlint/types': 17.0.0
     dev: true
 
-  /@commitlint/load/17.0.0:
-    resolution: {integrity: sha512-XaiHF4yWQOPAI0O6wXvk+NYLtJn/Xb7jgZEeKd4C1ZWd7vR7u8z5h0PkWxSr0uLZGQsElGxv3fiZ32C5+q6M8w==}
+  /@commitlint/load/17.0.3:
+    resolution: {integrity: sha512-3Dhvr7GcKbKa/ey4QJ5MZH3+J7QFlARohUow6hftQyNjzoXXROm+RwpBes4dDFrXG1xDw9QPXA7uzrOShCd4bw==}
     engines: {node: '>=v14'}
-    requiresBuild: true
     dependencies:
-      '@commitlint/config-validator': 17.0.0
+      '@commitlint/config-validator': 17.0.3
       '@commitlint/execute-rule': 17.0.0
-      '@commitlint/resolve-extends': 17.0.0
+      '@commitlint/resolve-extends': 17.0.3
       '@commitlint/types': 17.0.0
       '@types/node': 17.0.40
       chalk: 4.1.2
       cosmiconfig: 7.0.1
-      cosmiconfig-typescript-loader: 2.0.1_fvkldoeufjjq5mlpfdkzhuqzdy
+      cosmiconfig-typescript-loader: 2.0.1_7oqjshy4scgohh2k2lzivplbau
       lodash: 4.17.21
       resolve-from: 5.0.0
-      typescript: 4.7.3
+      typescript: 4.7.4
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -1866,11 +1865,11 @@ packages:
       git-raw-commits: 2.0.11
     dev: true
 
-  /@commitlint/resolve-extends/17.0.0:
-    resolution: {integrity: sha512-wi60WiJmwaQ7lzMXK8Vbc18Hq9tE2j/6iv2AFfPUGV7fvfY6Sf1iNKuUHirSqR0fquUyufIXe4y/K9A6LVIIvw==}
+  /@commitlint/resolve-extends/17.0.3:
+    resolution: {integrity: sha512-H/RFMvrcBeJCMdnVC4i8I94108UDccIHrTke2tyQEg9nXQnR5/Hd6MhyNWkREvcrxh9Y+33JLb+PiPiaBxCtBA==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/config-validator': 17.0.0
+      '@commitlint/config-validator': 17.0.3
       '@commitlint/types': 17.0.0
       import-fresh: 3.3.0
       lodash: 4.17.21
@@ -1959,40 +1958,33 @@ packages:
       '@docsearch/css': 3.1.0
       algoliasearch: 4.13.1
 
-  /@element-plus/icons-vue/2.0.5_vue@3.2.37:
-    resolution: {integrity: sha512-jvNWyKcdvPvMDLTWjghrPY+bYHKqh7hbAFIPe+HWR073zilzt33csREzmKx3VwhdlJUW5u0nCqN+0rwI8jlH+w==}
+  /@element-plus/icons-vue/2.0.6_vue@3.2.37:
+    resolution: {integrity: sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       vue: 3.2.37
     dev: false
 
-  /@esbuild-kit/cjs-loader/2.0.1:
-    resolution: {integrity: sha512-KmE8XouKm6m05jPIsf5CTIZZ4171GHd+PUts1mtti2tzoiD228qCRjpkCwg540c3fMUweKupO+PIpkJ9+Z7vPg==}
-    dependencies:
-      '@esbuild-kit/core-utils': 1.3.1
-      get-tsconfig: 3.0.1
-    dev: true
-
-  /@esbuild-kit/cjs-loader/2.1.0:
-    resolution: {integrity: sha512-KyX25VcC2564K5FnEhNDdzonC87VeSZoLz3h6R8x3d1myhxqGdoQkTQba3VCcuAkgdkn69d3Zhvj3xtGWldbEQ==}
+  /@esbuild-kit/cjs-loader/2.2.1:
+    resolution: {integrity: sha512-pq2Z4DcqTBF7y1wQuIzFVqmHJVnmP6hgHEWN2ubPjeG7OzXMZ9NvozW+YA/MIeMdZWp1jcJ/EvXk2+mfEKoCDQ==}
     dependencies:
-      '@esbuild-kit/core-utils': 1.3.1
-      get-tsconfig: 4.0.2
+      '@esbuild-kit/core-utils': 2.0.2
+      get-tsconfig: 4.0.7
     dev: true
 
-  /@esbuild-kit/core-utils/1.3.1:
-    resolution: {integrity: sha512-QXWJKf3mEIs+jgUCrY2YWJ2cr9e9asRYRwDhxit+wkCaQbSfV6fCCgs8KjRsrkIdMBcWsjbWnFKfwZ9kjILPrw==}
+  /@esbuild-kit/core-utils/2.0.2:
+    resolution: {integrity: sha512-clNYQUsqtc36pzW5EufMsahcbLG45EaW3YDyf0DlaS0eCMkDXpxIlHwPC0rndUwG6Ytk9sMSD5k1qHbwYEC/OQ==}
     dependencies:
-      esbuild: 0.14.38
+      esbuild: 0.14.47
       source-map-support: 0.5.21
     dev: true
 
-  /@esbuild-kit/esm-loader/2.1.5:
-    resolution: {integrity: sha512-G0HZSh53dXOb42xR14zEASXtVWFNX2itREVPnh6BWU2PcApbSzFEIUpknotpybuu6QupuW9sS9hVVpJjuyZlSw==}
+  /@esbuild-kit/esm-loader/2.3.1:
+    resolution: {integrity: sha512-CC0H91Oa02cczLswEoiLowTzWxvnS3tIBGkQa1BnieFK7HHV4whrBFGRlUD9rMHfyyoO55IuOqNujycXX+gI8A==}
     dependencies:
-      '@esbuild-kit/core-utils': 1.3.1
-      get-tsconfig: 3.0.1
+      '@esbuild-kit/core-utils': 2.0.2
+      get-tsconfig: 4.0.7
     dev: true
 
   /@eslint/eslintrc/1.3.0:
@@ -2015,8 +2007,8 @@ packages:
     resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==}
     dev: false
 
-  /@floating-ui/dom/0.5.3:
-    resolution: {integrity: sha512-vpjWB1uC7rajvgA58uzlJZgtWqrdDQLw+XVA3w63ZTmsWwRmVd0Gl5Dy9VMAViI9cP7hBWaJt23Jy3AVgVYnoQ==}
+  /@floating-ui/dom/0.5.4:
+    resolution: {integrity: sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==}
     dependencies:
       '@floating-ui/core': 0.7.3
     dev: false
@@ -2034,8 +2026,8 @@ packages:
   /@humanwhocodes/object-schema/1.2.1:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
 
-  /@iconify-json/ri/1.1.2:
-    resolution: {integrity: sha512-qLlDrpkxJi+aUxY2xipKC08aI2seaxFsrEWC3Wm5WJxTtZco+G8SUBpzNpQaKzjN4IwpzcZv8T37Q3aREXDk/A==}
+  /@iconify-json/ri/1.1.3:
+    resolution: {integrity: sha512-YQ45kQNpuHc2bso4fDGhooWou43qy7njD/I5l7vpjcujb+P/K2BfLASbWYTTUKu6lMersuFmO8F7NdGzy6eGWw==}
     dependencies:
       '@iconify/types': 1.1.0
     dev: true
@@ -2044,8 +2036,8 @@ packages:
     resolution: {integrity: sha512-Jh0llaK2LRXQoYsorIH8maClebsnzTcve+7U3rQUSnC11X4jtPnFuyatqFLvMxZ8MLG8dB4zfHsbPfuvxluONw==}
     dev: true
 
-  /@iconify/utils/1.0.32:
-    resolution: {integrity: sha512-m+rnw7qKHq/XF7DAi4BcFoEAcXBfqqMgQJh8brGEHeqE/RUvgDMjmxsHgWnVpFsG+VmjGyAiI7nwXdliCwEU0Q==}
+  /@iconify/utils/1.0.33:
+    resolution: {integrity: sha512-vGeAqo7aGPxOQmGdVoXFUOuyN+0V7Lcrx2EvaiRjxUD1x6Om0Tvq2bdm7E24l2Pz++4S0mWMCVFXe/17EtKImQ==}
     dependencies:
       '@antfu/install-pkg': 0.1.0
       '@antfu/utils': 0.5.2
@@ -2133,8 +2125,8 @@ packages:
       '@octokit/auth-unauthenticated': 2.1.0
       '@octokit/core': 3.6.0
       '@octokit/oauth-app': 3.6.2
-      '@octokit/plugin-paginate-rest': 2.17.0_@octokit+core@3.6.0
-      '@octokit/types': 6.34.0
+      '@octokit/plugin-paginate-rest': 2.19.0_@octokit+core@3.6.0
+      '@octokit/types': 6.37.1
       '@octokit/webhooks': 9.24.0
     transitivePeerDependencies:
       - encoding
@@ -2147,7 +2139,7 @@ packages:
       '@octokit/auth-oauth-user': 1.3.0
       '@octokit/request': 5.6.3
       '@octokit/request-error': 2.1.0
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       '@types/lru-cache': 5.1.1
       deprecation: 2.3.1
       lru-cache: 6.0.0
@@ -2163,7 +2155,7 @@ packages:
       '@octokit/auth-oauth-device': 3.1.2
       '@octokit/auth-oauth-user': 1.3.0
       '@octokit/request': 5.6.3
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       '@types/btoa-lite': 1.0.0
       btoa-lite: 1.0.0
       universal-user-agent: 6.0.0
@@ -2176,7 +2168,7 @@ packages:
     dependencies:
       '@octokit/oauth-methods': 1.2.6
       '@octokit/request': 5.6.3
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       universal-user-agent: 6.0.0
     transitivePeerDependencies:
       - encoding
@@ -2188,7 +2180,7 @@ packages:
       '@octokit/auth-oauth-device': 3.1.2
       '@octokit/oauth-methods': 1.2.6
       '@octokit/request': 5.6.3
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       btoa-lite: 1.0.0
       universal-user-agent: 6.0.0
     transitivePeerDependencies:
@@ -2198,14 +2190,14 @@ packages:
   /@octokit/auth-token/2.5.0:
     resolution: {integrity: sha512-r5FVUJCOLl19AxiuZD2VRZ/ORjp/4IN98Of6YJoJOkY75CIBuYfmiNHGrDwXr+aLGG55igl9QrxX3hbiXlLb+g==}
     dependencies:
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
     dev: true
 
   /@octokit/auth-unauthenticated/2.1.0:
     resolution: {integrity: sha512-+baofLfSL0CAv3CfGQ9rxiZZQEX8VNJMGuuS4PgrMRBUL52Ho5+hQYb63UJQshw7EXYMPDZxbXznc0y33cbPqw==}
     dependencies:
       '@octokit/request-error': 2.1.0
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
     dev: true
 
   /@octokit/core/3.6.0:
@@ -2215,7 +2207,7 @@ packages:
       '@octokit/graphql': 4.8.0
       '@octokit/request': 5.6.3
       '@octokit/request-error': 2.1.0
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       before-after-hook: 2.2.2
       universal-user-agent: 6.0.0
     transitivePeerDependencies:
@@ -2225,7 +2217,7 @@ packages:
   /@octokit/endpoint/6.0.12:
     resolution: {integrity: sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==}
     dependencies:
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       is-plain-object: 5.0.0
       universal-user-agent: 6.0.0
     dev: true
@@ -2234,7 +2226,7 @@ packages:
     resolution: {integrity: sha512-0gv+qLSBLKF0z8TKaSKTsS39scVKF9dbMxJpj3U0vC7wjNWFuIpL/z76Qe2fiuCbDRcJSavkXsVtMS6/dtQQsg==}
     dependencies:
       '@octokit/request': 5.6.3
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       universal-user-agent: 6.0.0
     transitivePeerDependencies:
       - encoding
@@ -2268,7 +2260,7 @@ packages:
       '@octokit/oauth-authorization-url': 4.3.3
       '@octokit/request': 5.6.3
       '@octokit/request-error': 2.1.0
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       btoa-lite: 1.0.0
     transitivePeerDependencies:
       - encoding
@@ -2278,6 +2270,10 @@ packages:
     resolution: {integrity: sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==}
     dev: true
 
+  /@octokit/openapi-types/12.4.0:
+    resolution: {integrity: sha512-Npcb7Pv30b33U04jvcD7l75yLU0mxhuX2Xqrn51YyZ5WTkF04bpbxLaZ6GcaTqu03WZQHoO/Gbfp95NGRueDUA==}
+    dev: true
+
   /@octokit/plugin-paginate-rest/2.17.0_@octokit+core@3.6.0:
     resolution: {integrity: sha512-tzMbrbnam2Mt4AhuyCHvpRkS0oZ5MvwwcQPYGtMv4tUa5kkzG58SVB0fcsLulOZQeRnOgdkZWkRUiyBlh0Bkyw==}
     peerDependencies:
@@ -2287,6 +2283,15 @@ packages:
       '@octokit/types': 6.34.0
     dev: true
 
+  /@octokit/plugin-paginate-rest/2.19.0_@octokit+core@3.6.0:
+    resolution: {integrity: sha512-hQ4Qysg2hNmEMuZeJkvyzM4eSZiTifOKqYAMsW8FnxFKowhuwWICSgBQ9Gn9GpUmgKB7qaf1hFvMjYaTAg5jQA==}
+    peerDependencies:
+      '@octokit/core': '>=2'
+    dependencies:
+      '@octokit/core': 3.6.0
+      '@octokit/types': 6.37.1
+    dev: true
+
   /@octokit/plugin-request-log/1.0.4_@octokit+core@3.6.0:
     resolution: {integrity: sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==}
     peerDependencies:
@@ -2305,10 +2310,20 @@ packages:
       deprecation: 2.3.1
     dev: true
 
+  /@octokit/plugin-rest-endpoint-methods/5.15.0_@octokit+core@3.6.0:
+    resolution: {integrity: sha512-Gsw9+Xm56jVhfbJoy4pt6eOOyf8/3K6CAnx1Sl7U2GhZWcg8MR6YgXWnpfdF69S2ViMXLA7nfvTDAsZpFlkLRw==}
+    peerDependencies:
+      '@octokit/core': '>=3'
+    dependencies:
+      '@octokit/core': 3.6.0
+      '@octokit/types': 6.37.1
+      deprecation: 2.3.1
+    dev: true
+
   /@octokit/plugin-retry/3.0.9:
     resolution: {integrity: sha512-r+fArdP5+TG6l1Rv/C9hVoty6tldw6cE2pRHNGmFPdyfrc696R6JjrQ3d7HdVqGwuzfyrcaLAKD7K8TX8aehUQ==}
     dependencies:
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       bottleneck: 2.19.5
     dev: true
 
@@ -2318,14 +2333,14 @@ packages:
       '@octokit/core': ^3.5.0
     dependencies:
       '@octokit/core': 3.6.0
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       bottleneck: 2.19.5
     dev: true
 
   /@octokit/request-error/2.1.0:
     resolution: {integrity: sha512-1VIvgXxs9WHSjicsRwq8PlR2LR2x6DwsJAaFgzdi0JfJoGSO8mYI/cHJQ+9FbN21aa+DrgNLnwObmyeSC8Rmpg==}
     dependencies:
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       deprecation: 2.3.1
       once: 1.4.0
     dev: true
@@ -2335,7 +2350,7 @@ packages:
     dependencies:
       '@octokit/endpoint': 6.0.12
       '@octokit/request-error': 2.1.0
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
       is-plain-object: 5.0.0
       node-fetch: 2.6.7
       universal-user-agent: 6.0.0
@@ -2360,6 +2375,12 @@ packages:
       '@octokit/openapi-types': 11.2.0
     dev: true
 
+  /@octokit/types/6.37.1:
+    resolution: {integrity: sha512-Q1hXSP2YumHkDdD+V4wFKr7vJ9+8tjocixrTSb75JzJ4GpjSyu5B4kpgrXxO6GOs4nOmVyRwRgS4/RO/Lf9oEA==}
+    dependencies:
+      '@octokit/openapi-types': 12.4.0
+    dev: true
+
   /@octokit/webhooks-methods/2.0.0:
     resolution: {integrity: sha512-35cfQ4YWlnZnmZKmIxlGPUPLtbkF8lr/A/1Sk1eC0ddLMwQN06dOuLc+dI3YLQS+T+MoNt3DIQ0NynwgKPilig==}
     dev: true
@@ -2377,41 +2398,43 @@ packages:
       aggregate-error: 3.1.0
     dev: true
 
-  /@pnpm/cli-meta/3.0.2:
-    resolution: {integrity: sha512-UEjLTv19q+fjU8PiZLcOkMYTRihuDJE2P4FbqBw5Z9Dy0PljO82KWUxP0eZ2YgHAud0YaYHWUWDBe3QqoIqGgw==}
-    engines: {node: '>=14.19'}
+  /@pnpm/cli-meta/3.0.5:
+    resolution: {integrity: sha512-oIoIGI+TfvtIWD2qBfZy/McWadb2r/4I6W9Ul8VccGuKDh3QmvQkMx56PNJ3NHH/AzX/xU95hkEYxLRQ1Q5Quw==}
+    engines: {node: '>=14.6'}
     dependencies:
-      '@pnpm/types': 8.1.0
+      '@pnpm/types': 8.4.0
       load-json-file: 6.2.0
 
-  /@pnpm/cli-utils/0.7.12_@pnpm+logger@4.0.0:
-    resolution: {integrity: sha512-hrm/IgUHNNrtVB1LT/La1USzHT42KrCIz++ATslqdm+Z/qGYv+YYCbKLW2Ox2yGMvL0sQ6d1ohc3rOou/YHrBw==}
+  /@pnpm/cli-utils/0.7.16_@pnpm+logger@4.0.0:
+    resolution: {integrity: sha512-Has/Umgz2+yahUDPCAIx5bhqIfo7LQMOvFqr74+rBz4Gt6w517drARVa9oRgcJHO84roUkF/ygyZshjjsdV2Hw==}
     engines: {node: '>=14.6'}
     peerDependencies:
       '@pnpm/logger': ^4.0.0
     dependencies:
-      '@pnpm/cli-meta': 3.0.2
-      '@pnpm/config': 15.2.1_@pnpm+logger@4.0.0
-      '@pnpm/default-reporter': 9.1.2_@pnpm+logger@4.0.0
+      '@pnpm/cli-meta': 3.0.5
+      '@pnpm/config': 15.5.0_@pnpm+logger@4.0.0
+      '@pnpm/default-reporter': 9.1.6_@pnpm+logger@4.0.0
       '@pnpm/error': 3.0.1
       '@pnpm/logger': 4.0.0
-      '@pnpm/manifest-utils': 3.0.3_@pnpm+logger@4.0.0
-      '@pnpm/package-is-installable': 6.0.4_@pnpm+logger@4.0.0
-      '@pnpm/read-project-manifest': 3.0.3
-      '@pnpm/types': 8.1.0
+      '@pnpm/manifest-utils': 3.0.6_@pnpm+logger@4.0.0
+      '@pnpm/package-is-installable': 6.0.7_@pnpm+logger@4.0.0
+      '@pnpm/read-project-manifest': 3.0.6
+      '@pnpm/types': 8.4.0
       chalk: 4.1.2
       load-json-file: 6.2.0
 
-  /@pnpm/config/15.2.1_@pnpm+logger@4.0.0:
-    resolution: {integrity: sha512-W5MXEfuIgA6MsLmefgRZ/Fos0PTZSNEA9Sg9uWrKk6ni10hoVsODlTJ+kICvdVfzWFF7df/HZVh61pIsOccV9g==}
+  /@pnpm/config/15.5.0_@pnpm+logger@4.0.0:
+    resolution: {integrity: sha512-NYGYwGjcbfNU9xgAaW5+f4GolfGWZq45lwoA096y0qSTIJwORIYa3cmdD62ZuYvNP9/6boLX1jjrehNSKcYlNQ==}
     engines: {node: '>=14.6'}
     dependencies:
       '@pnpm/constants': 6.1.0
       '@pnpm/error': 3.0.1
+      '@pnpm/git-utils': 0.1.0
+      '@pnpm/matcher': 3.0.0
       '@pnpm/npm-conf': 1.0.4
-      '@pnpm/pnpmfile': 2.0.3_@pnpm+logger@4.0.0
-      '@pnpm/read-project-manifest': 3.0.3
-      '@pnpm/types': 8.1.0
+      '@pnpm/pnpmfile': 2.0.6_@pnpm+logger@4.0.0
+      '@pnpm/read-project-manifest': 3.0.6
+      '@pnpm/types': 8.4.0
       camelcase: 6.3.0
       can-write-to-dir: 1.1.1
       is-subdir: 1.2.0
@@ -2427,27 +2450,27 @@ packages:
     resolution: {integrity: sha512-L6AiU3OXv9kjKGTJN9j8n1TeJGDcLX9atQlZvAkthlvbXjvKc5SKNWESc/eXhr5nEfuMWhQhiKHDJCpYejmeCQ==}
     engines: {node: '>=14.19'}
 
-  /@pnpm/core-loggers/7.0.2_@pnpm+logger@4.0.0:
-    resolution: {integrity: sha512-D37q2mJYkyfkCr9PZslUaF2y+IYPj2fesLtMp/S1e06t2x4ubtlOUvk3znoySmczYoj8ydAyYC7XEj5kighNZg==}
-    engines: {node: '>=14.19'}
+  /@pnpm/core-loggers/7.0.5_@pnpm+logger@4.0.0:
+    resolution: {integrity: sha512-ZPJTBN766U++LgW2vM56WhEJKhBw/Aq20DbcFbiKjLda2X1BeyysgaCBfAli8qeLnB9HcjUCgR9fWddzkoPtIA==}
+    engines: {node: '>=14.6'}
     peerDependencies:
       '@pnpm/logger': ^4.0.0
     dependencies:
       '@pnpm/logger': 4.0.0
-      '@pnpm/types': 8.1.0
+      '@pnpm/types': 8.4.0
 
-  /@pnpm/default-reporter/9.1.2_@pnpm+logger@4.0.0:
-    resolution: {integrity: sha512-FYueWm+stmqsyyQLYRpn4TS8g5/52+yl5te9UF4nor8Y2qXO3AYi/7AqgOWdWuTBhSCmCp7ezGliI6IgVvfVaw==}
+  /@pnpm/default-reporter/9.1.6_@pnpm+logger@4.0.0:
+    resolution: {integrity: sha512-snxU9RQyEBXrn18naHZuttf9RAcx5ysYGd2/4+t7Rseb8Kf6Dxfuz/HUrYCK82dLqil0dlevvF7ZqMP30wnrgg==}
     engines: {node: '>=14.6'}
     peerDependencies:
       '@pnpm/logger': ^4.0.0
     dependencies:
-      '@pnpm/config': 15.2.1_@pnpm+logger@4.0.0
-      '@pnpm/core-loggers': 7.0.2_@pnpm+logger@4.0.0
+      '@pnpm/config': 15.5.0_@pnpm+logger@4.0.0
+      '@pnpm/core-loggers': 7.0.5_@pnpm+logger@4.0.0
       '@pnpm/error': 3.0.1
       '@pnpm/logger': 4.0.0
-      '@pnpm/render-peer-issues': 2.0.2
-      '@pnpm/types': 8.1.0
+      '@pnpm/render-peer-issues': 2.0.5
+      '@pnpm/types': 8.4.0
       ansi-diff: 1.1.1
       boxen: 5.1.2
       chalk: 4.1.2
@@ -2468,29 +2491,35 @@ packages:
     dependencies:
       '@pnpm/constants': 6.1.0
 
-  /@pnpm/find-workspace-packages/4.0.12_@pnpm+logger@4.0.0:
-    resolution: {integrity: sha512-kcKXwY1n7W/vZt+IxMOLdc2LfgZMvJ5RdgW09FdhfR/FjBsCCYbipHjtojV8KLvQ6tEQ2VPLTQ9NR74EGJDfbA==}
+  /@pnpm/find-workspace-packages/4.0.16_@pnpm+logger@4.0.0:
+    resolution: {integrity: sha512-W/NmRUjmqw+MADjVVgzY0r2FSON6UhWxwU5b9qD1hiLZucdsGNEOm0YYqQfU80KJ3VT8t0xSc3JlZdPSntagBg==}
     engines: {node: '>=14.6'}
     dependencies:
-      '@pnpm/cli-utils': 0.7.12_@pnpm+logger@4.0.0
+      '@pnpm/cli-utils': 0.7.16_@pnpm+logger@4.0.0
       '@pnpm/constants': 6.1.0
-      '@pnpm/types': 8.1.0
-      find-packages: 9.0.3
+      '@pnpm/types': 8.4.0
+      find-packages: 9.0.6
       read-yaml-file: 2.1.0
     transitivePeerDependencies:
       - '@pnpm/logger'
 
+  /@pnpm/git-utils/0.1.0:
+    resolution: {integrity: sha512-W3zsG9585cKL+FqgcT+IfTgZX5C+CbNkFjOnJN+qbysT1N30+BbvEByCcDMsTy7QDrAk6oS7WU1Rym3U2xlh2Q==}
+    engines: {node: '>=14.6'}
+    dependencies:
+      execa: /safe-execa/0.1.1
+
   /@pnpm/graceful-fs/2.0.0:
     resolution: {integrity: sha512-ogUZCGf0/UILZt6d8PsO4gA4pXh7f0BumXeFkcCe4AQ65PXPKfAkHC0C30Lheh2EgFOpLZm3twDP1Eiww18gew==}
     engines: {node: '>=14.19'}
     dependencies:
       graceful-fs: 4.2.10
 
-  /@pnpm/lockfile-types/4.0.2:
-    resolution: {integrity: sha512-IoHwZy4CkaAC67V04/KWRBhxtjA9XP5VEvz90ttxkdtO8hpTHz21vmsos2PbYU148oepKADpSM/9zk1hhBmPhg==}
-    engines: {node: '>=14.19'}
+  /@pnpm/lockfile-types/4.2.0:
+    resolution: {integrity: sha512-8/t9YrC8VSJgEJv/m1UQMNPHs3Tu4Ow7shpuIDPD5sqjNw3lICB9ybbPlO+6/bkb9/D8QizbBigbVsDybWR9Hw==}
+    engines: {node: '>=14.6'}
     dependencies:
-      '@pnpm/types': 8.1.0
+      '@pnpm/types': 8.4.0
 
   /@pnpm/logger/4.0.0:
     resolution: {integrity: sha512-SIShw+k556e7S7tLZFVSIHjCdiVog1qWzcKW2RbLEHPItdisAFVNIe34kYd9fMSswTlSRLS/qRjw3ZblzWmJ9Q==}
@@ -2499,16 +2528,22 @@ packages:
       bole: 4.0.0
       ndjson: 2.0.0
 
-  /@pnpm/manifest-utils/3.0.3_@pnpm+logger@4.0.0:
-    resolution: {integrity: sha512-9G42k1p7vv126fkoEq4nwFkobozDQVrQmIVYH/IOxPHEaqVY5Lq+z+G+NdZkNuwBteK7vCN5+E8+ZEcod3xOQA==}
-    engines: {node: '>=14.19'}
+  /@pnpm/manifest-utils/3.0.6_@pnpm+logger@4.0.0:
+    resolution: {integrity: sha512-7lmez3meuQeQjXXpZygC99D14QvoYdRVhuxac52Glor2/aWx2DTYSZ6AkzH5j7fuWiYVvNc9WmELYLptMkYhAw==}
+    engines: {node: '>=14.6'}
     dependencies:
-      '@pnpm/core-loggers': 7.0.2_@pnpm+logger@4.0.0
+      '@pnpm/core-loggers': 7.0.5_@pnpm+logger@4.0.0
       '@pnpm/error': 3.0.1
-      '@pnpm/types': 8.1.0
+      '@pnpm/types': 8.4.0
     transitivePeerDependencies:
       - '@pnpm/logger'
 
+  /@pnpm/matcher/3.0.0:
+    resolution: {integrity: sha512-EXbwjVoiX6PPYkMTJu/1V4wlqR3cY7Z4UpIdpoCEBurZgiD4MfxChLiKzcbiSC/DTMewjcwVhNT0BL+EAEj3yA==}
+    engines: {node: '>=14.19'}
+    dependencies:
+      escape-string-regexp: 4.0.0
+
   /@pnpm/network.ca-file/1.0.1:
     resolution: {integrity: sha512-gkINruT2KUhZLTaiHxwCOh1O4NVnFT0wLjWFBHmTz9vpKag/C/noIMJXBxFe4F0mYpUVX2puLwAieLYFg2NvoA==}
     engines: {node: '>=12.22.0'}
@@ -2522,43 +2557,43 @@ packages:
       '@pnpm/network.ca-file': 1.0.1
       config-chain: 1.1.13
 
-  /@pnpm/package-is-installable/6.0.4_@pnpm+logger@4.0.0:
-    resolution: {integrity: sha512-u7h8MaNF20i7Bu5voXYMnRcDmYqsnu1cIWIllQCkX+e1hNybE9zbzuYv+hUch+cs+OhXkc5I21qP3DaPnC/F0Q==}
-    engines: {node: '>=14.19'}
+  /@pnpm/package-is-installable/6.0.7_@pnpm+logger@4.0.0:
+    resolution: {integrity: sha512-GLqVoc9p9txMP5e0USnSHLzZpBbpjPjGl6o+fco+rCHwE6wYPJWV7mTb9qhGwNXkQ8nlODB3ziRRxMlDIKs2qw==}
+    engines: {node: '>=14.6'}
     peerDependencies:
       '@pnpm/logger': ^4.0.0
     dependencies:
-      '@pnpm/core-loggers': 7.0.2_@pnpm+logger@4.0.0
+      '@pnpm/core-loggers': 7.0.5_@pnpm+logger@4.0.0
       '@pnpm/error': 3.0.1
       '@pnpm/logger': 4.0.0
-      '@pnpm/types': 8.1.0
+      '@pnpm/types': 8.4.0
       detect-libc: 2.0.1
       execa: /safe-execa/0.1.1
       mem: 8.1.1
       semver: 7.3.7
 
-  /@pnpm/pnpmfile/2.0.3_@pnpm+logger@4.0.0:
-    resolution: {integrity: sha512-/HF2z+TyJKIl+o1fd6H0VvRKJcsWjRdgo2xZw6RBf9XvHpvt4QgzeoQsX5P3mfFq2uIQVN0C0XXWVGcGnPWVEw==}
-    engines: {node: '>=14.19'}
+  /@pnpm/pnpmfile/2.0.6_@pnpm+logger@4.0.0:
+    resolution: {integrity: sha512-xnNdzRb/4i+vwnBsXFz1fKO7I3weR2yAbeYQ1kbsc4KSR1LwlaPXgvWcN8zwBZsIXp2QMlNFIiTuHzk1rHWsBw==}
+    engines: {node: '>=14.6'}
     peerDependencies:
       '@pnpm/logger': ^4.0.0
     dependencies:
-      '@pnpm/core-loggers': 7.0.2_@pnpm+logger@4.0.0
+      '@pnpm/core-loggers': 7.0.5_@pnpm+logger@4.0.0
       '@pnpm/error': 3.0.1
-      '@pnpm/lockfile-types': 4.0.2
+      '@pnpm/lockfile-types': 4.2.0
       '@pnpm/logger': 4.0.0
-      '@pnpm/types': 8.1.0
+      '@pnpm/types': 8.4.0
       chalk: 4.1.2
       path-absolute: 1.0.1
 
-  /@pnpm/read-project-manifest/3.0.3:
-    resolution: {integrity: sha512-gkiv/CrU/cM4iPrqRThAp3c/gBAe8qwNnK4pXYmeqTeKe+Wnzrjpg9x4l0L+jYPpV2I/OvmucMnU3a5anMRksQ==}
-    engines: {node: '>=14.19'}
+  /@pnpm/read-project-manifest/3.0.6:
+    resolution: {integrity: sha512-nKFODeo/K7kLSLXMJcGywANaiyL9JlLQHKG3SWJaAjkP3QBgYWqqXhGWx8ZPsk5z9k0RL0gPEpt3wod8FAbTPg==}
+    engines: {node: '>=14.6'}
     dependencies:
       '@pnpm/error': 3.0.1
       '@pnpm/graceful-fs': 2.0.0
-      '@pnpm/types': 8.1.0
-      '@pnpm/write-project-manifest': 3.0.2
+      '@pnpm/types': 8.4.0
+      '@pnpm/write-project-manifest': 3.0.5
       detect-indent: 6.1.0
       fast-deep-equal: 3.1.3
       is-windows: 1.0.2
@@ -2568,24 +2603,24 @@ packages:
       sort-keys: 4.2.0
       strip-bom: 4.0.0
 
-  /@pnpm/render-peer-issues/2.0.2:
-    resolution: {integrity: sha512-Bp34ugFIuDVi58K96aPs7MLi8F2btlhsyyh67JxqGrGHkNsqDRvBAofUVQNo0dIFc+wwjeJHnjbvLgIRVhN2Dg==}
-    engines: {node: '>=14.19'}
+  /@pnpm/render-peer-issues/2.0.5:
+    resolution: {integrity: sha512-J2FOgp7HheHWE+0WwaQkR2Ab+osg0yVO8H750+7MBw2PTvUyeNMVAdgy3ddIRYRaogT90jjpJFiywxSt9kd/4g==}
+    engines: {node: '>=14.6'}
     dependencies:
-      '@pnpm/types': 8.1.0
+      '@pnpm/types': 8.4.0
       archy: 1.0.0
       chalk: 4.1.2
       cli-columns: 4.0.0
 
-  /@pnpm/types/8.1.0:
-    resolution: {integrity: sha512-1AnX21D0vDE2yiNT85EWY9mEASgfPPNDun3bknLWULNjTfGCfiItZcTfmW4+hUgvFcoIW5PiTkpjxSMzHJ2BvA==}
-    engines: {node: '>=14.19'}
+  /@pnpm/types/8.4.0:
+    resolution: {integrity: sha512-sq/UdSq/jWCpYglw9SFmvR8qzUEi0p2oZIO0AHjkWWQg4Qrolf6DgD0WWmLiEP2WxHjbYeyD3ZzWzQor1+6cvw==}
+    engines: {node: '>=14.6'}
 
-  /@pnpm/write-project-manifest/3.0.2:
-    resolution: {integrity: sha512-+yJQaoSkM9Nfaj5Zf/whAWwYkVwn4XFMdIV9xklJiScSf3Qd9QpFBdi2NIlxxgZwC9eEQSwj6xO3Z+jnPpyl4w==}
-    engines: {node: '>=14.19'}
+  /@pnpm/write-project-manifest/3.0.5:
+    resolution: {integrity: sha512-d56Lz1bIGSvaGRFG9rNliOayq8dLyLiexRaFX3KVO9zCziLJ7i2SNkYlw3bUhDCRYKEDcWvr34zS7NwKRlkBgQ==}
+    engines: {node: '>=14.6'}
     dependencies:
-      '@pnpm/types': 8.1.0
+      '@pnpm/types': 8.4.0
       json5: 2.2.1
       write-file-atomic: 3.0.3
       write-yaml-file: 4.2.0
@@ -2637,20 +2672,20 @@ packages:
       rollup: 2.75.6
     dev: true
 
-  /@rollup/plugin-commonjs/22.0.0_rollup@2.75.6:
-    resolution: {integrity: sha512-Ktvf2j+bAO+30awhbYoCaXpBcyPmJbaEUYClQns/+6SNCYFURbvBiNbWgHITEsIgDDWCDUclWRKEuf8cwZCFoQ==}
+  /@rollup/plugin-commonjs/22.0.1_rollup@2.75.7:
+    resolution: {integrity: sha512-dGfEZvdjDHObBiP5IvwTKMVeq/tBZGMBHZFMdIV1ClMM/YoWS34xrHFGfag9SN2ZtMgNZRFruqvxZQEa70O6nQ==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
       rollup: ^2.68.0
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.75.6
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.7
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 7.2.3
       is-reference: 1.2.1
       magic-string: 0.25.9
-      resolve: 1.22.0
-      rollup: 2.75.6
+      resolve: 1.22.1
+      rollup: 2.75.7
     dev: false
 
   /@rollup/plugin-json/4.1.0_rollup@2.75.6:
@@ -2690,6 +2725,22 @@ packages:
       is-module: 1.0.0
       resolve: 1.22.0
       rollup: 2.75.6
+    dev: true
+
+  /@rollup/plugin-node-resolve/13.3.0_rollup@2.75.7:
+    resolution: {integrity: sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      rollup: ^2.42.0
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.7
+      '@types/resolve': 1.17.1
+      deepmerge: 4.2.2
+      is-builtin-module: 3.1.0
+      is-module: 1.0.0
+      resolve: 1.22.0
+      rollup: 2.75.7
+    dev: false
 
   /@rollup/plugin-replace/2.4.2_rollup@2.75.6:
     resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
@@ -2721,6 +2772,19 @@ packages:
       estree-walker: 1.0.1
       picomatch: 2.3.1
       rollup: 2.75.6
+    dev: true
+
+  /@rollup/pluginutils/3.1.0_rollup@2.75.7:
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+      rollup: 2.75.7
+    dev: false
 
   /@rollup/pluginutils/4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
@@ -2993,6 +3057,10 @@ packages:
       '@types/node': 17.0.40
     dev: true
 
+  /@types/web-bluetooth/0.0.14:
+    resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
+    dev: false
+
   /@types/yauzl/2.10.0:
     resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
     requiresBuild: true
@@ -3001,8 +3069,8 @@ packages:
     dev: true
     optional: true
 
-  /@typescript-eslint/eslint-plugin/5.28.0_7yumg2qjgbp7maccqlfhx2vudu:
-    resolution: {integrity: sha512-DXVU6Cg29H2M6EybqSg2A+x8DgO9TCUBRp4QEXQHJceLS7ogVDP0g3Lkg/SZCqcvkAP/RruuQqK0gdlkgmhSUA==}
+  /@typescript-eslint/eslint-plugin/5.30.0_5mtqsiui4sk53pmkx7i7ue45wm:
+    resolution: {integrity: sha512-lvhRJ2pGe2V9MEU46ELTdiHgiAFZPKtLhiU5wlnaYpMc2+c1R8fh8i80ZAa665drvjHKUJyRRGg3gEm1If54ow==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -3012,24 +3080,24 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.28.0_ud6rd4xtew5bv4yhvkvu24pzm4
-      '@typescript-eslint/scope-manager': 5.28.0
-      '@typescript-eslint/type-utils': 5.28.0_ud6rd4xtew5bv4yhvkvu24pzm4
-      '@typescript-eslint/utils': 5.28.0_ud6rd4xtew5bv4yhvkvu24pzm4
+      '@typescript-eslint/parser': 5.30.0_b5e7v2qnwxfo6hmiq56u52mz3e
+      '@typescript-eslint/scope-manager': 5.30.0
+      '@typescript-eslint/type-utils': 5.30.0_b5e7v2qnwxfo6hmiq56u52mz3e
+      '@typescript-eslint/utils': 5.30.0_b5e7v2qnwxfo6hmiq56u52mz3e
       debug: 4.3.4
-      eslint: 8.17.0
+      eslint: 8.18.0
       functional-red-black-tree: 1.0.1
       ignore: 5.2.0
       regexpp: 3.2.0
       semver: 7.3.7
-      tsutils: 3.21.0_typescript@4.7.3
-      typescript: 4.7.3
+      tsutils: 3.21.0_typescript@4.7.4
+      typescript: 4.7.4
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@typescript-eslint/parser/5.28.0_ud6rd4xtew5bv4yhvkvu24pzm4:
-    resolution: {integrity: sha512-ekqoNRNK1lAcKhZESN/PdpVsWbP9jtiNqzFWkp/yAUdZvJalw2heCYuqRmM5eUJSIYEkgq5sGOjq+ZqsLMjtRA==}
+  /@typescript-eslint/parser/5.30.0_b5e7v2qnwxfo6hmiq56u52mz3e:
+    resolution: {integrity: sha512-2oYYUws5o2liX6SrFQ5RB88+PuRymaM2EU02/9Ppoyu70vllPnHVO7ioxDdq/ypXHA277R04SVjxvwI8HmZpzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -3038,26 +3106,26 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.28.0
-      '@typescript-eslint/types': 5.28.0
-      '@typescript-eslint/typescript-estree': 5.28.0_typescript@4.7.3
+      '@typescript-eslint/scope-manager': 5.30.0
+      '@typescript-eslint/types': 5.30.0
+      '@typescript-eslint/typescript-estree': 5.30.0_typescript@4.7.4
       debug: 4.3.4
-      eslint: 8.17.0
-      typescript: 4.7.3
+      eslint: 8.18.0
+      typescript: 4.7.4
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@typescript-eslint/scope-manager/5.28.0:
-    resolution: {integrity: sha512-LeBLTqF/he1Z+boRhSqnso6YrzcKMTQ8bO/YKEe+6+O/JGof9M0g3IJlIsqfrK/6K03MlFIlycbf1uQR1IjE+w==}
+  /@typescript-eslint/scope-manager/5.30.0:
+    resolution: {integrity: sha512-3TZxvlQcK5fhTBw5solQucWSJvonXf5yua5nx8OqK94hxdrT7/6W3/CS42MLd/f1BmlmmbGEgQcTHHCktUX5bQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.28.0
-      '@typescript-eslint/visitor-keys': 5.28.0
+      '@typescript-eslint/types': 5.30.0
+      '@typescript-eslint/visitor-keys': 5.30.0
     dev: false
 
-  /@typescript-eslint/type-utils/5.28.0_ud6rd4xtew5bv4yhvkvu24pzm4:
-    resolution: {integrity: sha512-SyKjKh4CXPglueyC6ceAFytjYWMoPHMswPQae236zqe1YbhvCVQyIawesYywGiu98L9DwrxsBN69vGIVxJ4mQQ==}
+  /@typescript-eslint/type-utils/5.30.0_b5e7v2qnwxfo6hmiq56u52mz3e:
+    resolution: {integrity: sha512-GF8JZbZqSS+azehzlv/lmQQ3EU3VfWYzCczdZjJRxSEeXDQkqFhCBgFhallLDbPwQOEQ4MHpiPfkjKk7zlmeNg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -3066,22 +3134,22 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.28.0_ud6rd4xtew5bv4yhvkvu24pzm4
+      '@typescript-eslint/utils': 5.30.0_b5e7v2qnwxfo6hmiq56u52mz3e
       debug: 4.3.4
-      eslint: 8.17.0
-      tsutils: 3.21.0_typescript@4.7.3
-      typescript: 4.7.3
+      eslint: 8.18.0
+      tsutils: 3.21.0_typescript@4.7.4
+      typescript: 4.7.4
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@typescript-eslint/types/5.28.0:
-    resolution: {integrity: sha512-2OOm8ZTOQxqkPbf+DAo8oc16sDlVR5owgJfKheBkxBKg1vAfw2JsSofH9+16VPlN9PWtv8Wzhklkqw3k/zCVxA==}
+  /@typescript-eslint/types/5.30.0:
+    resolution: {integrity: sha512-vfqcBrsRNWw/LBXyncMF/KrUTYYzzygCSsVqlZ1qGu1QtGs6vMkt3US0VNSQ05grXi5Yadp3qv5XZdYLjpp8ag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: false
 
-  /@typescript-eslint/typescript-estree/5.28.0_typescript@4.7.3:
-    resolution: {integrity: sha512-9GX+GfpV+F4hdTtYc6OV9ZkyYilGXPmQpm6AThInpBmKJEyRSIjORJd1G9+bknb7OTFYL+Vd4FBJAO6T78OVqA==}
+  /@typescript-eslint/typescript-estree/5.30.0_typescript@4.7.4:
+    resolution: {integrity: sha512-hDEawogreZB4n1zoqcrrtg/wPyyiCxmhPLpZ6kmWfKF5M5G0clRLaEexpuWr31fZ42F96SlD/5xCt1bT5Qm4Nw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -3089,41 +3157,41 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.28.0
-      '@typescript-eslint/visitor-keys': 5.28.0
+      '@typescript-eslint/types': 5.30.0
+      '@typescript-eslint/visitor-keys': 5.30.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.3.7
-      tsutils: 3.21.0_typescript@4.7.3
-      typescript: 4.7.3
+      tsutils: 3.21.0_typescript@4.7.4
+      typescript: 4.7.4
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@typescript-eslint/utils/5.28.0_ud6rd4xtew5bv4yhvkvu24pzm4:
-    resolution: {integrity: sha512-E60N5L0fjv7iPJV3UGc4EC+A3Lcj4jle9zzR0gW7vXhflO7/J29kwiTGITA2RlrmPokKiZbBy2DgaclCaEUs6g==}
+  /@typescript-eslint/utils/5.30.0_b5e7v2qnwxfo6hmiq56u52mz3e:
+    resolution: {integrity: sha512-0bIgOgZflLKIcZsWvfklsaQTM3ZUbmtH0rJ1hKyV3raoUYyeZwcjQ8ZUJTzS7KnhNcsVT1Rxs7zeeMHEhGlltw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
-      '@typescript-eslint/scope-manager': 5.28.0
-      '@typescript-eslint/types': 5.28.0
-      '@typescript-eslint/typescript-estree': 5.28.0_typescript@4.7.3
-      eslint: 8.17.0
+      '@typescript-eslint/scope-manager': 5.30.0
+      '@typescript-eslint/types': 5.30.0
+      '@typescript-eslint/typescript-estree': 5.30.0_typescript@4.7.4
+      eslint: 8.18.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.17.0
+      eslint-utils: 3.0.0_eslint@8.18.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: false
 
-  /@typescript-eslint/visitor-keys/5.28.0:
-    resolution: {integrity: sha512-BtfP1vCor8cWacovzzPFOoeW4kBQxzmhxGoOpt0v1SFvG+nJ0cWaVdJk7cky1ArTcFHHKNIxyo2LLr3oNkSuXA==}
+  /@typescript-eslint/visitor-keys/5.30.0:
+    resolution: {integrity: sha512-6WcIeRk2DQ3pHKxU1Ni0qMXJkjO/zLjBymlYBy/53qxe7yjEFSvzKLDToJjURUhSl2Fzhkl4SMXQoETauF74cw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.28.0
+      '@typescript-eslint/types': 5.30.0
       eslint-visitor-keys: 3.3.0
     dev: false
 
@@ -3172,7 +3240,7 @@ packages:
   /@unocss/preset-icons/0.33.5:
     resolution: {integrity: sha512-fJMXN8IceVS6x+HbwLEcbfA1SC8qGi1s3MJNj6u/d1HyNlDLhSFZnSneAK/EnxfZJ+/dhv1zi16wFdZCXbrHkw==}
     dependencies:
-      '@iconify/utils': 1.0.32
+      '@iconify/utils': 1.0.33
       '@unocss/core': 0.33.5
       ohmyfetch: 0.4.18
     transitivePeerDependencies:
@@ -3240,7 +3308,7 @@ packages:
       '@unocss/core': 0.33.5
     dev: true
 
-  /@unocss/vite/0.33.5_vite@2.9.12:
+  /@unocss/vite/0.33.5_vite@2.9.13:
     resolution: {integrity: sha512-q2Wc+/vCwIlarK3FfmdM3c9OwwmoiUjzMtdgK8Y6qNIq/26S7pEk5upplhswR6M9kjqjDbIQOKgaVrhQFlLeVQ==}
     peerDependencies:
       vite: ^2.9.0
@@ -3255,7 +3323,7 @@ packages:
       '@unocss/scope': 0.33.5
       '@unocss/transformer-directives': 0.33.5
       magic-string: 0.26.2
-      vite: 2.9.12
+      vite: 2.9.13
     dev: true
 
   /@vitejs/plugin-vue-jsx/1.3.10:
@@ -3271,7 +3339,7 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@vitejs/plugin-vue/2.3.3_vite@2.9.12+vue@3.2.37:
+  /@vitejs/plugin-vue/2.3.3_vite@2.9.13+vue@3.2.37:
     resolution: {integrity: sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -3281,7 +3349,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 2.9.12
+      vite: 2.9.13
       vue: 3.2.37
     dev: true
 
@@ -3297,38 +3365,38 @@ packages:
     dependencies:
       vue: 3.2.37
 
-  /@vitest/ui/0.14.2:
-    resolution: {integrity: sha512-yV2paiv0/Obymx+9KV+KjM/FAbYF+PbnQiO2RFnZqDCgYwkkNmO1ZNNIetBeOzuNoi1BT1iPSKwtvL0PwCesDQ==}
+  /@vitest/ui/0.16.0:
+    resolution: {integrity: sha512-RwXYTFA2tVwUhuuTcdAaK5kIq+I3pnvNQUojPThZPZhS7ttKXkCgWwud0KXwnR04ofKc3HXEuzWPf6s7JD1vgw==}
     dependencies:
       sirv: 2.0.2
     dev: true
 
-  /@volar/code-gen/0.37.8:
-    resolution: {integrity: sha512-znGxjKs/8TOqkWyarlLDQcCIpzCMt1bUPImLWdJtF2pAkdgZR0YzzXXoWV3eAwcO2JGCeL3lv2jddaswqDeQHQ==}
+  /@volar/code-gen/0.38.2:
+    resolution: {integrity: sha512-H81I6d7rZB7teqL+zhK/Xz1v0/kKkUwkB0Aq6b4+BTCqcJeiZkoWxd0gFhrhWTnUoqiM83lhoTGo2vkvx5YagQ==}
     dependencies:
-      '@volar/source-map': 0.37.8
+      '@volar/source-map': 0.38.2
     dev: true
 
-  /@volar/source-map/0.37.8:
-    resolution: {integrity: sha512-wlmzWIPhb7UAz/ZRGh8db5JoFPERjzRIodrdDn4YD9YejDEmxluRZ3vtYgUiGwJmtT/6UtB9YtPJWjr7XeMMNA==}
+  /@volar/source-map/0.38.2:
+    resolution: {integrity: sha512-DWcYbYt9SPwk0r4VmXk1F0v4X5+hCqH1JRkAWSeJymQyXCQ2OQDEbY2PF12a7y2qn4FUBD2gOba2TynAqI8ZFQ==}
     dev: true
 
-  /@volar/vue-code-gen/0.37.8:
-    resolution: {integrity: sha512-q1RaVjgMM2xRZTqIyJuiZaE2LGJIUnLRHScO02T2C26k+1Ah9z61BCOVBvA3BIh+JpPs7AhaAljiVxh7l/7TaA==}
+  /@volar/vue-code-gen/0.38.2:
+    resolution: {integrity: sha512-whLunD6phSGWBUHZKdTxeglrpzQu26ii8CRVapFdjfyMaVhQ7ESNeIAhkTVyg2ovOPc0PiDYPQEPzfWAADIWog==}
     dependencies:
-      '@volar/code-gen': 0.37.8
-      '@volar/source-map': 0.37.8
+      '@volar/code-gen': 0.38.2
+      '@volar/source-map': 0.38.2
       '@vue/compiler-core': 3.2.37
       '@vue/compiler-dom': 3.2.37
       '@vue/shared': 3.2.37
     dev: true
 
-  /@volar/vue-typescript/0.37.8:
-    resolution: {integrity: sha512-Tcq7r7ArHXgJEGuMmhN9e5h+jj5tS3exygPnw82gnePKPCHhzegYQfBljhJ4GuVshVeheMmKYEJOkQ9pN+K35w==}
+  /@volar/vue-typescript/0.38.2:
+    resolution: {integrity: sha512-5IKvSK2m5yUmH6iu/tNScVlvJGuiHawTfSmjxaMs+/tod25WeK37LEdf+pdKtlJ30bYTQmmkAuEfG01QvvBRGQ==}
     dependencies:
-      '@volar/code-gen': 0.37.8
-      '@volar/source-map': 0.37.8
-      '@volar/vue-code-gen': 0.37.8
+      '@volar/code-gen': 0.38.2
+      '@volar/source-map': 0.38.2
+      '@volar/vue-code-gen': 0.38.2
       '@vue/compiler-sfc': 3.2.37
       '@vue/reactivity': 3.2.37
     dev: true
@@ -3448,8 +3516,8 @@ packages:
       '@types/node': 17.0.40
     dev: true
 
-  /@vueuse/core/8.6.0_vue@3.2.37:
-    resolution: {integrity: sha512-VirzExCm/N+QdrEWT7J4uSrvJ5hquKIAU9alQ37kUvIJk9XxCLxmfRnmekYc1kz2+6BnoyuKYXVmrMV351CB4w==}
+  /@vueuse/core/8.7.5_vue@3.2.37:
+    resolution: {integrity: sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==}
     peerDependencies:
       '@vue/composition-api': ^1.1.0
       vue: ^2.6.0 || ^3.2.0
@@ -3459,18 +3527,19 @@ packages:
       vue:
         optional: true
     dependencies:
-      '@vueuse/metadata': 8.6.0
-      '@vueuse/shared': 8.6.0_vue@3.2.37
+      '@types/web-bluetooth': 0.0.14
+      '@vueuse/metadata': 8.7.5
+      '@vueuse/shared': 8.7.5_vue@3.2.37
       vue: 3.2.37
       vue-demi: 0.13.1_vue@3.2.37
     dev: false
 
-  /@vueuse/metadata/8.6.0:
-    resolution: {integrity: sha512-F+CKPvaExsm7QgRr8y+ZNJFwXasn89rs5wth/HeX9lJ1q8XEt+HJ16Q5Sxh4rfG5YSKXrStveVge8TKvPjMjFA==}
+  /@vueuse/metadata/8.7.5:
+    resolution: {integrity: sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==}
     dev: false
 
-  /@vueuse/shared/8.6.0_vue@3.2.37:
-    resolution: {integrity: sha512-Y/IVywZo7IfEoSSEtCYpkVEmPV7pU35mEIxV7PbD/D3ly18B3mEsBaPbtDkNM/QP3zAZ5mn4nEkOfddX4uwuIA==}
+  /@vueuse/shared/8.7.5_vue@3.2.37:
+    resolution: {integrity: sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==}
     peerDependencies:
       '@vue/composition-api': ^1.1.0
       vue: ^2.6.0 || ^3.2.0
@@ -3872,8 +3941,8 @@ packages:
       async-done: 1.3.2
     dev: false
 
-  /async-validator/4.1.1:
-    resolution: {integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==}
+  /async-validator/4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
     dev: false
 
   /async/3.2.4:
@@ -4651,15 +4720,15 @@ packages:
       typedarray: 0.0.6
     dev: false
 
-  /concurrently/7.2.1:
-    resolution: {integrity: sha512-7cab/QyqipqghrVr9qZmoWbidu0nHsmxrpNqQ7r/67vfl1DWJElexehQnTH1p+87tDkihaAjM79xTZyBQh7HLw==}
+  /concurrently/7.2.2:
+    resolution: {integrity: sha512-DcQkI0ruil5BA/g7Xy3EWySGrFJovF5RYAYxwGvv9Jf9q9B1v3jPFP2tl6axExNf1qgF30kjoNYrangZ0ey4Aw==}
     engines: {node: ^12.20.0 || ^14.13.0 || >=16.0.0}
     hasBin: true
     dependencies:
       chalk: 4.1.2
       date-fns: 2.28.0
       lodash: 4.17.21
-      rxjs: 6.6.7
+      rxjs: 7.5.5
       shell-quote: 1.7.3
       spawn-command: 0.0.2-1
       supports-color: 8.1.1
@@ -4742,7 +4811,7 @@ packages:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: false
 
-  /cosmiconfig-typescript-loader/2.0.1_fvkldoeufjjq5mlpfdkzhuqzdy:
+  /cosmiconfig-typescript-loader/2.0.1_7oqjshy4scgohh2k2lzivplbau:
     resolution: {integrity: sha512-B9s6sX/omXq7I6gC6+YgLmrBFMJhPWew7ty/X5Tuwtd2zOSgWaUdXjkuVwbe3qqcdETo60+1nSVMekq//LIXVA==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
@@ -4751,8 +4820,8 @@ packages:
     dependencies:
       '@types/node': 17.0.40
       cosmiconfig: 7.0.1
-      ts-node: 10.8.1_fvkldoeufjjq5mlpfdkzhuqzdy
-      typescript: 4.7.3
+      ts-node: 10.8.1_7oqjshy4scgohh2k2lzivplbau
+      typescript: 4.7.4
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -4855,14 +4924,14 @@ packages:
       longest: 2.0.1
       word-wrap: 1.2.3
     optionalDependencies:
-      '@commitlint/load': 17.0.0
+      '@commitlint/load': 17.0.3
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
     dev: true
 
-  /cz-git/1.3.4:
-    resolution: {integrity: sha512-px5btT/cux7LYD4v7jB7wXtVV2l5txTnO1R9rBeevsBhgJv+kHkIPcWzRx+Fr5HR/45l/jf1sIVIYRrhPKWo6A==}
+  /cz-git/1.3.8:
+    resolution: {integrity: sha512-hFyp/M6r870uMzX/6FjsqeZ5kbi++VR3j9TRMyUhwVurRhZ237AEeoV3KxJp5ySzTMMfSuliVHcmdpZOdJx9qA==}
     dev: true
 
   /d/1.0.1:
@@ -5145,19 +5214,19 @@ packages:
   /electron-to-chromium/1.4.147:
     resolution: {integrity: sha512-czclPqxLMPqPMkahKcske4TaS5lcznsc26ByBlEFDU8grTBVK9C5W6K9I6oEEhm4Ai4jTihGnys90xY1yjXcRg==}
 
-  /element-plus/2.2.5_vue@3.2.37:
-    resolution: {integrity: sha512-Kl0yn/PQca5YQo3M3NPBP4Xl71NQuMtDx5zNXZGVyl5FjdMujXiFB9SXKYGDUCgFU3d/Rl14vB4Fpmcl2Iz+Hw==}
+  /element-plus/2.2.6_vue@3.2.37:
+    resolution: {integrity: sha512-N9G4yWSxDt1YtreCJgt7UaSsXKuR4Fzb3ThzlBjbGDYDhcHijsrLL3qkdLZgeoSB13LRyr9pgP1ljNXdaYGa+g==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@ctrl/tinycolor': 3.4.1
-      '@element-plus/icons-vue': 2.0.5_vue@3.2.37
-      '@floating-ui/dom': 0.5.3
+      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
+      '@floating-ui/dom': 0.5.4
       '@popperjs/core': /@sxzz/popperjs-es/2.11.7
       '@types/lodash': 4.14.182
       '@types/lodash-es': 4.17.6
-      '@vueuse/core': 8.6.0_vue@3.2.37
-      async-validator: 4.1.1
+      '@vueuse/core': 8.7.5_vue@3.2.37
+      async-validator: 4.2.5
       dayjs: 1.11.3
       escape-html: 1.0.3
       lodash: 4.17.21
@@ -5275,15 +5344,6 @@ packages:
       es6-symbol: 3.1.3
     dev: false
 
-  /esbuild-android-64/0.14.38:
-    resolution: {integrity: sha512-aRFxR3scRKkbmNuGAK+Gee3+yFxkTJO/cx83Dkyzo4CnQl/2zVSurtG6+G86EQIZ+w+VYngVyK7P3HyTBKu3nw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-android-64/0.14.42:
     resolution: {integrity: sha512-P4Y36VUtRhK/zivqGVMqhptSrFILAGlYp0Z8r9UQqHJ3iWztRCNWnlBzD9HRx0DbueXikzOiwyOri+ojAFfW6A==}
     engines: {node: '>=12'}
@@ -5293,8 +5353,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-android-64/0.14.43:
-    resolution: {integrity: sha512-kqFXAS72K6cNrB6RiM7YJ5lNvmWRDSlpi7ZuRZ1hu1S3w0zlwcoCxWAyM23LQUyZSs1PbjHgdbbfYAN8IGh6xg==}
+  /esbuild-android-64/0.14.47:
+    resolution: {integrity: sha512-R13Bd9+tqLVFndncMHssZrPWe6/0Kpv2/dt4aA69soX4PRxlzsVpCvoJeFE8sOEoeVEiBkI0myjlkDodXlHa0g==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -5309,15 +5369,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-android-arm64/0.14.38:
-    resolution: {integrity: sha512-L2NgQRWuHFI89IIZIlpAcINy9FvBk6xFVZ7xGdOwIm8VyhX1vNCEqUJO3DPSSy945Gzdg98cxtNt8Grv1CsyhA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-android-arm64/0.14.42:
     resolution: {integrity: sha512-0cOqCubq+RWScPqvtQdjXG3Czb3AWI2CaKw3HeXry2eoA2rrPr85HF7IpdU26UWdBXgPYtlTN1LUiuXbboROhg==}
     engines: {node: '>=12'}
@@ -5327,8 +5378,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-android-arm64/0.14.43:
-    resolution: {integrity: sha512-bKS2BBFh+7XZY9rpjiHGRNA7LvWYbZWP87pLehggTG7tTaCDvj8qQGOU/OZSjCSKDYbgY7Q+oDw8RlYQ2Jt2BA==}
+  /esbuild-android-arm64/0.14.47:
+    resolution: {integrity: sha512-OkwOjj7ts4lBp/TL6hdd8HftIzOy/pdtbrNA4+0oVWgGG64HrdVzAF5gxtJufAPOsEjkyh1oIYvKAUinKKQRSQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -5343,15 +5394,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-64/0.14.38:
-    resolution: {integrity: sha512-5JJvgXkX87Pd1Og0u/NJuO7TSqAikAcQQ74gyJ87bqWRVeouky84ICoV4sN6VV53aTW+NE87qLdGY4QA2S7KNA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-darwin-64/0.14.42:
     resolution: {integrity: sha512-ipiBdCA3ZjYgRfRLdQwP82rTiv/YVMtW36hTvAN5ZKAIfxBOyPXY7Cejp3bMXWgzKD8B6O+zoMzh01GZsCuEIA==}
     engines: {node: '>=12'}
@@ -5361,8 +5403,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-64/0.14.43:
-    resolution: {integrity: sha512-/3PSilx011ttoieRGkSZ0XV8zjBf2C9enV4ScMMbCT4dpx0mFhMOpFnCHkOK0pWGB8LklykFyHrWk2z6DENVUg==}
+  /esbuild-darwin-64/0.14.47:
+    resolution: {integrity: sha512-R6oaW0y5/u6Eccti/TS6c/2c1xYTb1izwK3gajJwi4vIfNs1s8B1dQzI1UiC9T61YovOQVuePDcfqHLT3mUZJA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -5377,15 +5419,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-arm64/0.14.38:
-    resolution: {integrity: sha512-eqF+OejMI3mC5Dlo9Kdq/Ilbki9sQBw3QlHW3wjLmsLh+quNfHmGMp3Ly1eWm981iGBMdbtSS9+LRvR2T8B3eQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-darwin-arm64/0.14.42:
     resolution: {integrity: sha512-bU2tHRqTPOaoH/4m0zYHbFWpiYDmaA0gt90/3BMEFaM0PqVK/a6MA2V/ypV5PO0v8QxN6gH5hBPY4YJ2lopXgA==}
     engines: {node: '>=12'}
@@ -5395,8 +5428,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-arm64/0.14.43:
-    resolution: {integrity: sha512-1HyFUKs8DMCBOvw1Qxpr5Vv/ThNcVIFb5xgXWK3pyT40WPvgYIiRTwJCvNs4l8i5qWF8/CK5bQxJVDjQvtv0Yw==}
+  /esbuild-darwin-arm64/0.14.47:
+    resolution: {integrity: sha512-seCmearlQyvdvM/noz1L9+qblC5vcBrhUaOoLEDDoLInF/VQ9IkobGiLlyTPYP5dW1YD4LXhtBgOyevoIHGGnw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -5411,15 +5444,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-64/0.14.38:
-    resolution: {integrity: sha512-epnPbhZUt93xV5cgeY36ZxPXDsQeO55DppzsIgWM8vgiG/Rz+qYDLmh5ts3e+Ln1wA9dQ+nZmVHw+RjaW3I5Ig==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-freebsd-64/0.14.42:
     resolution: {integrity: sha512-75h1+22Ivy07+QvxHyhVqOdekupiTZVLN1PMwCDonAqyXd8TVNJfIRFrdL8QmSJrOJJ5h8H1I9ETyl2L8LQDaw==}
     engines: {node: '>=12'}
@@ -5429,8 +5453,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-64/0.14.43:
-    resolution: {integrity: sha512-FNWc05TPHYgaXjbPZO5/rJKSBslfG6BeMSs8GhwnqAKP56eEhvmzwnIz1QcC9cRVyO+IKqWNfmHFkCa1WJTULA==}
+  /esbuild-freebsd-64/0.14.47:
+    resolution: {integrity: sha512-ZH8K2Q8/Ux5kXXvQMDsJcxvkIwut69KVrYQhza/ptkW50DC089bCVrJZZ3sKzIoOx+YPTrmsZvqeZERjyYrlvQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -5445,15 +5469,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-arm64/0.14.38:
-    resolution: {integrity: sha512-/9icXUYJWherhk+y5fjPI5yNUdFPtXHQlwP7/K/zg8t8lQdHVj20SqU9/udQmeUo5pDFHMYzcEFfJqgOVeKNNQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-freebsd-arm64/0.14.42:
     resolution: {integrity: sha512-W6Jebeu5TTDQMJUJVarEzRU9LlKpNkPBbjqSu+GUPTHDCly5zZEQq9uHkmHHl7OKm+mQ2zFySN83nmfCeZCyNA==}
     engines: {node: '>=12'}
@@ -5463,8 +5478,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-arm64/0.14.43:
-    resolution: {integrity: sha512-amrYopclz3VohqisOPR6hA3GOWA3LZC1WDLnp21RhNmoERmJ/vLnOpnrG2P/Zao+/erKTCUqmrCIPVtj58DRoA==}
+  /esbuild-freebsd-arm64/0.14.47:
+    resolution: {integrity: sha512-ZJMQAJQsIOhn3XTm7MPQfCzEu5b9STNC+s90zMWe2afy9EwnHV7Ov7ohEMv2lyWlc2pjqLW8QJnz2r0KZmeAEQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -5479,15 +5494,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-32/0.14.38:
-    resolution: {integrity: sha512-QfgfeNHRFvr2XeHFzP8kOZVnal3QvST3A0cgq32ZrHjSMFTdgXhMhmWdKzRXP/PKcfv3e2OW9tT9PpcjNvaq6g==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-32/0.14.42:
     resolution: {integrity: sha512-Ooy/Bj+mJ1z4jlWcK5Dl6SlPlCgQB9zg1UrTCeY8XagvuWZ4qGPyYEWGkT94HUsRi2hKsXvcs6ThTOjBaJSMfg==}
     engines: {node: '>=12'}
@@ -5497,8 +5503,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-32/0.14.43:
-    resolution: {integrity: sha512-KoxoEra+9O3AKVvgDFvDkiuddCds6q71owSQEYwjtqRV7RwbPzKxJa6+uyzUulHcyGVq0g15K0oKG5CFBcvYDw==}
+  /esbuild-linux-32/0.14.47:
+    resolution: {integrity: sha512-FxZOCKoEDPRYvq300lsWCTv1kcHgiiZfNrPtEhFAiqD7QZaXrad8LxyJ8fXGcWzIFzRiYZVtB3ttvITBvAFhKw==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -5513,15 +5519,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-64/0.14.38:
-    resolution: {integrity: sha512-uuZHNmqcs+Bj1qiW9k/HZU3FtIHmYiuxZ/6Aa+/KHb/pFKr7R3aVqvxlAudYI9Fw3St0VCPfv7QBpUITSmBR1Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-64/0.14.42:
     resolution: {integrity: sha512-2L0HbzQfbTuemUWfVqNIjOfaTRt9zsvjnme6lnr7/MO9toz/MJ5tZhjqrG6uDWDxhsaHI2/nsDgrv8uEEN2eoA==}
     engines: {node: '>=12'}
@@ -5531,8 +5528,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-64/0.14.43:
-    resolution: {integrity: sha512-EwINwGMyiJMgBby5/SbMqKcUhS5AYAZ2CpEBzSowsJPNBJEdhkCTtEjk757TN/wxgbu3QklqDM6KghY660QCUw==}
+  /esbuild-linux-64/0.14.47:
+    resolution: {integrity: sha512-nFNOk9vWVfvWYF9YNYksZptgQAdstnDCMtR6m42l5Wfugbzu11VpMCY9XrD4yFxvPo9zmzcoUL/88y0lfJZJJw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -5547,15 +5544,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm/0.14.38:
-    resolution: {integrity: sha512-FiFvQe8J3VKTDXG01JbvoVRXQ0x6UZwyrU4IaLBZeq39Bsbatd94Fuc3F1RGqPF5RbIWW7RvkVQjn79ejzysnA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-arm/0.14.42:
     resolution: {integrity: sha512-STq69yzCMhdRaWnh29UYrLSr/qaWMm/KqwaRF1pMEK7kDiagaXhSL1zQGXbYv94GuGY/zAwzK98+6idCMUOOCg==}
     engines: {node: '>=12'}
@@ -5565,8 +5553,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm/0.14.43:
-    resolution: {integrity: sha512-e6YzQUoDxxtyamuF12eVzzRC7bbEFSZohJ6igQB9tBqnNmIQY3fI6Cns3z2wxtbZ3f2o6idkD2fQnlvs2902Dg==}
+  /esbuild-linux-arm/0.14.47:
+    resolution: {integrity: sha512-ZGE1Bqg/gPRXrBpgpvH81tQHpiaGxa8c9Rx/XOylkIl2ypLuOcawXEAo8ls+5DFCcRGt/o3sV+PzpAFZobOsmA==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -5581,15 +5569,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm64/0.14.38:
-    resolution: {integrity: sha512-HlMGZTEsBrXrivr64eZ/EO0NQM8H8DuSENRok9d+Jtvq8hOLzrxfsAT9U94K3KOGk2XgCmkaI2KD8hX7F97lvA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-arm64/0.14.42:
     resolution: {integrity: sha512-c3Ug3e9JpVr8jAcfbhirtpBauLxzYPpycjWulD71CF6ZSY26tvzmXMJYooQ2YKqDY4e/fPu5K8bm7MiXMnyxuA==}
     engines: {node: '>=12'}
@@ -5599,8 +5578,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm64/0.14.43:
-    resolution: {integrity: sha512-UlSpjMWllAc70zYbHxWuDS3FJytyuR/gHJYBr8BICcTNb/TSOYVBg6U7b3jZ3mILTrgzwJUHwhEwK18FZDouUQ==}
+  /esbuild-linux-arm64/0.14.47:
+    resolution: {integrity: sha512-ywfme6HVrhWcevzmsufjd4iT3PxTfCX9HOdxA7Hd+/ZM23Y9nXeb+vG6AyA6jgq/JovkcqRHcL9XwRNpWG6XRw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -5615,15 +5594,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-mips64le/0.14.38:
-    resolution: {integrity: sha512-qd1dLf2v7QBiI5wwfil9j0HG/5YMFBAmMVmdeokbNAMbcg49p25t6IlJFXAeLzogv1AvgaXRXvgFNhScYEUXGQ==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-mips64le/0.14.42:
     resolution: {integrity: sha512-QuvpHGbYlkyXWf2cGm51LBCHx6eUakjaSrRpUqhPwjh/uvNUYvLmz2LgPTTPwCqaKt0iwL+OGVL0tXA5aDbAbg==}
     engines: {node: '>=12'}
@@ -5633,8 +5603,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-mips64le/0.14.43:
-    resolution: {integrity: sha512-f+v8cInPEL1/SDP//CfSYzcDNgE4CY3xgDV81DWm3KAPWzhvxARrKxB1Pstf5mB56yAslJDxu7ryBUPX207EZA==}
+  /esbuild-linux-mips64le/0.14.47:
+    resolution: {integrity: sha512-mg3D8YndZ1LvUiEdDYR3OsmeyAew4MA/dvaEJxvyygahWmpv1SlEEnhEZlhPokjsUMfRagzsEF/d/2XF+kTQGg==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -5649,15 +5619,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-ppc64le/0.14.38:
-    resolution: {integrity: sha512-mnbEm7o69gTl60jSuK+nn+pRsRHGtDPfzhrqEUXyCl7CTOCLtWN2bhK8bgsdp6J/2NyS/wHBjs1x8aBWwP2X9Q==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-ppc64le/0.14.42:
     resolution: {integrity: sha512-8ohIVIWDbDT+i7lCx44YCyIRrOW1MYlks9fxTo0ME2LS/fxxdoJBwHWzaDYhjvf8kNpA+MInZvyOEAGoVDrMHg==}
     engines: {node: '>=12'}
@@ -5667,23 +5628,14 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-ppc64le/0.14.43:
-    resolution: {integrity: sha512-5wZYMDGAL/K2pqkdIsW+I4IR41kyfHr/QshJcNpUfK3RjB3VQcPWOaZmc+74rm4ZjVirYrtz+jWw0SgxtxRanA==}
+  /esbuild-linux-ppc64le/0.14.47:
+    resolution: {integrity: sha512-WER+f3+szmnZiWoK6AsrTKGoJoErG2LlauSmk73LEZFQ/iWC+KhhDsOkn1xBUpzXWsxN9THmQFltLoaFEH8F8w==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /esbuild-linux-riscv64/0.14.38:
-    resolution: {integrity: sha512-+p6YKYbuV72uikChRk14FSyNJZ4WfYkffj6Af0/Tw63/6TJX6TnIKE+6D3xtEc7DeDth1fjUOEqm+ApKFXbbVQ==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-riscv64/0.14.42:
     resolution: {integrity: sha512-DzDqK3TuoXktPyG1Lwx7vhaF49Onv3eR61KwQyxYo4y5UKTpL3NmuarHSIaSVlTFDDpcIajCDwz5/uwKLLgKiQ==}
     engines: {node: '>=12'}
@@ -5693,23 +5645,14 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-riscv64/0.14.43:
-    resolution: {integrity: sha512-lYcAOUxp85hC7lSjycJUVSmj4/9oEfSyXjb/ua9bNl8afonaduuqtw7hvKMoKuYnVwOCDw4RSfKpcnIRDWq+Bw==}
+  /esbuild-linux-riscv64/0.14.47:
+    resolution: {integrity: sha512-1fI6bP3A3rvI9BsaaXbMoaOjLE3lVkJtLxsgLHqlBhLlBVY7UqffWBvkrX/9zfPhhVMd9ZRFiaqXnB1T7BsL2g==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /esbuild-linux-s390x/0.14.38:
-    resolution: {integrity: sha512-0zUsiDkGJiMHxBQ7JDU8jbaanUY975CdOW1YDrurjrM0vWHfjv9tLQsW9GSyEb/heSK1L5gaweRjzfUVBFoybQ==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-s390x/0.14.42:
     resolution: {integrity: sha512-YFRhPCxl8nb//Wn6SiS5pmtplBi4z9yC2gLrYoYI/tvwuB1jldir9r7JwAGy1Ck4D7sE7wBN9GFtUUX/DLdcEQ==}
     engines: {node: '>=12'}
@@ -5719,8 +5662,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-s390x/0.14.43:
-    resolution: {integrity: sha512-27e43ZhHvhFE4nM7HqtUbMRu37I/4eNSUbb8FGZWszV+uLzMIsHDwLoBiJmw7G9N+hrehNPeQ4F5Ujad0DrUKQ==}
+  /esbuild-linux-s390x/0.14.47:
+    resolution: {integrity: sha512-eZrWzy0xFAhki1CWRGnhsHVz7IlSKX6yT2tj2Eg8lhAwlRE5E96Hsb0M1mPSE1dHGpt1QVwwVivXIAacF/G6mw==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -5735,15 +5678,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-netbsd-64/0.14.38:
-    resolution: {integrity: sha512-cljBAApVwkpnJZfnRVThpRBGzCi+a+V9Ofb1fVkKhtrPLDYlHLrSYGtmnoTVWDQdU516qYI8+wOgcGZ4XIZh0Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-netbsd-64/0.14.42:
     resolution: {integrity: sha512-QYSD2k+oT9dqB/4eEM9c+7KyNYsIPgzYOSrmfNGDIyJrbT1d+CFVKvnKahDKNJLfOYj8N4MgyFaU9/Ytc6w5Vw==}
     engines: {node: '>=12'}
@@ -5753,8 +5687,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-netbsd-64/0.14.43:
-    resolution: {integrity: sha512-2mH4QF6hHBn5zzAfxEI/2eBC0mspVsZ6UVo821LpAJKMvLJPBk3XJO5xwg7paDqSqpl7p6IRrAenW999AEfJhQ==}
+  /esbuild-netbsd-64/0.14.47:
+    resolution: {integrity: sha512-Qjdjr+KQQVH5Q2Q1r6HBYswFTToPpss3gqCiSw2Fpq/ua8+eXSQyAMG+UvULPqXceOwpnPo4smyZyHdlkcPppQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -5769,15 +5703,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-openbsd-64/0.14.38:
-    resolution: {integrity: sha512-CDswYr2PWPGEPpLDUO50mL3WO/07EMjnZDNKpmaxUPsrW+kVM3LoAqr/CE8UbzugpEiflYqJsGPLirThRB18IQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-openbsd-64/0.14.42:
     resolution: {integrity: sha512-M2meNVIKWsm2HMY7+TU9AxM7ZVwI9havdsw6m/6EzdXysyCFFSoaTQ/Jg03izjCsK17FsVRHqRe26Llj6x0MNA==}
     engines: {node: '>=12'}
@@ -5787,8 +5712,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-openbsd-64/0.14.43:
-    resolution: {integrity: sha512-ZhQpiZjvqCqO8jKdGp9+8k9E/EHSA+zIWOg+grwZasI9RoblqJ1QiZqqi7jfd6ZrrG1UFBNGe4m0NFxCFbMVbg==}
+  /esbuild-openbsd-64/0.14.47:
+    resolution: {integrity: sha512-QpgN8ofL7B9z8g5zZqJE+eFvD1LehRlxr25PBkjyyasakm4599iroUpaj96rdqRlO2ShuyqwJdr+oNqWwTUmQw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -5803,15 +5728,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-sunos-64/0.14.38:
-    resolution: {integrity: sha512-2mfIoYW58gKcC3bck0j7lD3RZkqYA7MmujFYmSn9l6TiIcAMpuEvqksO+ntBgbLep/eyjpgdplF7b+4T9VJGOA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-sunos-64/0.14.42:
     resolution: {integrity: sha512-uXV8TAZEw36DkgW8Ak3MpSJs1ofBb3Smkc/6pZ29sCAN1KzCAQzsje4sUwugf+FVicrHvlamCOlFZIXgct+iqQ==}
     engines: {node: '>=12'}
@@ -5821,8 +5737,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-sunos-64/0.14.43:
-    resolution: {integrity: sha512-DgxSi9DaHReL9gYuul2rrQCAapgnCJkh3LSHPKsY26zytYppG0HgkgVF80zjIlvEsUbGBP/GHQzBtrezj/Zq1Q==}
+  /esbuild-sunos-64/0.14.47:
+    resolution: {integrity: sha512-uOeSgLUwukLioAJOiGYm3kNl+1wJjgJA8R671GYgcPgCx7QR73zfvYqXFFcIO93/nBdIbt5hd8RItqbbf3HtAQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -5837,15 +5753,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-32/0.14.38:
-    resolution: {integrity: sha512-L2BmEeFZATAvU+FJzJiRLFUP+d9RHN+QXpgaOrs2klshoAm1AE6Us4X6fS9k33Uy5SzScn2TpcgecbqJza1Hjw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-windows-32/0.14.42:
     resolution: {integrity: sha512-4iw/8qWmRICWi9ZOnJJf9sYt6wmtp3hsN4TdI5NqgjfOkBVMxNdM9Vt3626G1Rda9ya2Q0hjQRD9W1o+m6Lz6g==}
     engines: {node: '>=12'}
@@ -5855,8 +5762,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-32/0.14.43:
-    resolution: {integrity: sha512-Ih3+2O5oExiqm0mY6YYE5dR0o8+AspccQ3vIAtRodwFvhuyGLjb0Hbmzun/F3Lw19nuhPMu3sW2fqIJ5xBxByw==}
+  /esbuild-windows-32/0.14.47:
+    resolution: {integrity: sha512-H0fWsLTp2WBfKLBgwYT4OTfFly4Im/8B5f3ojDv1Kx//kiubVY0IQunP2Koc/fr/0wI7hj3IiBDbSrmKlrNgLQ==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -5871,15 +5778,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-64/0.14.38:
-    resolution: {integrity: sha512-Khy4wVmebnzue8aeSXLC+6clo/hRYeNIm0DyikoEqX+3w3rcvrhzpoix0S+MF9vzh6JFskkIGD7Zx47ODJNyCw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-windows-64/0.14.42:
     resolution: {integrity: sha512-j3cdK+Y3+a5H0wHKmLGTJcq0+/2mMBHPWkItR3vytp/aUGD/ua/t2BLdfBIzbNN9nLCRL9sywCRpOpFMx3CxzA==}
     engines: {node: '>=12'}
@@ -5889,8 +5787,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-64/0.14.43:
-    resolution: {integrity: sha512-8NsuNfI8xwFuJbrCuI+aBqNTYkrWErejFO5aYM+yHqyHuL8mmepLS9EPzAzk8rvfaJrhN0+RvKWAcymViHOKEw==}
+  /esbuild-windows-64/0.14.47:
+    resolution: {integrity: sha512-/Pk5jIEH34T68r8PweKRi77W49KwanZ8X6lr3vDAtOlH5EumPE4pBHqkCUdELanvsT14yMXLQ/C/8XPi1pAtkQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -5905,15 +5803,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-arm64/0.14.38:
-    resolution: {integrity: sha512-k3FGCNmHBkqdJXuJszdWciAH77PukEyDsdIryEHn9cKLQFxzhT39dSumeTuggaQcXY57UlmLGIkklWZo2qzHpw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-windows-arm64/0.14.42:
     resolution: {integrity: sha512-+lRAARnF+hf8J0mN27ujO+VbhPbDqJ8rCcJKye4y7YZLV6C4n3pTRThAb388k/zqF5uM0lS5O201u0OqoWSicw==}
     engines: {node: '>=12'}
@@ -5923,8 +5812,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-arm64/0.14.43:
-    resolution: {integrity: sha512-7ZlD7bo++kVRblJEoG+cepljkfP8bfuTPz5fIXzptwnPaFwGS6ahvfoYzY7WCf5v/1nX2X02HDraVItTgbHnKw==}
+  /esbuild-windows-arm64/0.14.47:
+    resolution: {integrity: sha512-HFSW2lnp62fl86/qPQlqw6asIwCnEsEoNIL1h2uVMgakddf+vUuMcCbtUY1i8sst7KkgHrVKCJQB33YhhOweCQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -5955,34 +5844,6 @@ packages:
       esbuild-windows-arm64: 0.13.15
     dev: true
 
-  /esbuild/0.14.38:
-    resolution: {integrity: sha512-12fzJ0fsm7gVZX1YQ1InkOE5f9Tl7cgf6JPYXRJtPIoE0zkWAbHdPHVPPaLi9tYAcEBqheGzqLn/3RdTOyBfcA==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      esbuild-android-64: 0.14.38
-      esbuild-android-arm64: 0.14.38
-      esbuild-darwin-64: 0.14.38
-      esbuild-darwin-arm64: 0.14.38
-      esbuild-freebsd-64: 0.14.38
-      esbuild-freebsd-arm64: 0.14.38
-      esbuild-linux-32: 0.14.38
-      esbuild-linux-64: 0.14.38
-      esbuild-linux-arm: 0.14.38
-      esbuild-linux-arm64: 0.14.38
-      esbuild-linux-mips64le: 0.14.38
-      esbuild-linux-ppc64le: 0.14.38
-      esbuild-linux-riscv64: 0.14.38
-      esbuild-linux-s390x: 0.14.38
-      esbuild-netbsd-64: 0.14.38
-      esbuild-openbsd-64: 0.14.38
-      esbuild-sunos-64: 0.14.38
-      esbuild-windows-32: 0.14.38
-      esbuild-windows-64: 0.14.38
-      esbuild-windows-arm64: 0.14.38
-    dev: true
-
   /esbuild/0.14.42:
     resolution: {integrity: sha512-V0uPZotCEHokJdNqyozH6qsaQXqmZEOiZWrXnds/zaH/0SyrIayRXWRB98CENO73MIZ9T3HBIOsmds5twWtmgw==}
     engines: {node: '>=12'}
@@ -6011,32 +5872,32 @@ packages:
       esbuild-windows-arm64: 0.14.42
     dev: true
 
-  /esbuild/0.14.43:
-    resolution: {integrity: sha512-Uf94+kQmy/5jsFwKWiQB4hfo/RkM9Dh7b79p8yqd1tshULdr25G2szLz631NoH3s2ujnKEKVD16RmOxvCNKRFA==}
+  /esbuild/0.14.47:
+    resolution: {integrity: sha512-wI4ZiIfFxpkuxB8ju4MHrGwGLyp1+awEHAHVpx6w7a+1pmYIq8T9FGEVVwFo0iFierDoMj++Xq69GXWYn2EiwA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      esbuild-android-64: 0.14.43
-      esbuild-android-arm64: 0.14.43
-      esbuild-darwin-64: 0.14.43
-      esbuild-darwin-arm64: 0.14.43
-      esbuild-freebsd-64: 0.14.43
-      esbuild-freebsd-arm64: 0.14.43
-      esbuild-linux-32: 0.14.43
-      esbuild-linux-64: 0.14.43
-      esbuild-linux-arm: 0.14.43
-      esbuild-linux-arm64: 0.14.43
-      esbuild-linux-mips64le: 0.14.43
-      esbuild-linux-ppc64le: 0.14.43
-      esbuild-linux-riscv64: 0.14.43
-      esbuild-linux-s390x: 0.14.43
-      esbuild-netbsd-64: 0.14.43
-      esbuild-openbsd-64: 0.14.43
-      esbuild-sunos-64: 0.14.43
-      esbuild-windows-32: 0.14.43
-      esbuild-windows-64: 0.14.43
-      esbuild-windows-arm64: 0.14.43
+      esbuild-android-64: 0.14.47
+      esbuild-android-arm64: 0.14.47
+      esbuild-darwin-64: 0.14.47
+      esbuild-darwin-arm64: 0.14.47
+      esbuild-freebsd-64: 0.14.47
+      esbuild-freebsd-arm64: 0.14.47
+      esbuild-linux-32: 0.14.47
+      esbuild-linux-64: 0.14.47
+      esbuild-linux-arm: 0.14.47
+      esbuild-linux-arm64: 0.14.47
+      esbuild-linux-mips64le: 0.14.47
+      esbuild-linux-ppc64le: 0.14.47
+      esbuild-linux-riscv64: 0.14.47
+      esbuild-linux-s390x: 0.14.47
+      esbuild-netbsd-64: 0.14.47
+      esbuild-openbsd-64: 0.14.47
+      esbuild-sunos-64: 0.14.47
+      esbuild-windows-32: 0.14.47
+      esbuild-windows-64: 0.14.47
+      esbuild-windows-arm64: 0.14.47
 
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -6066,13 +5927,13 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /eslint-config-prettier/8.5.0_eslint@8.17.0:
+  /eslint-config-prettier/8.5.0_eslint@8.18.0:
     resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.17.0
+      eslint: 8.18.0
     dev: false
 
   /eslint-define-config/1.5.1:
@@ -6088,7 +5949,7 @@ packages:
       - supports-color
     dev: false
 
-  /eslint-module-utils/2.7.3_cfsupm63rr3qvqifljk6nmy67u:
+  /eslint-module-utils/2.7.3_s24jsywy72ks6h3c4f2dacxdsa:
     resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -6106,7 +5967,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.28.0_ud6rd4xtew5bv4yhvkvu24pzm4
+      '@typescript-eslint/parser': 5.30.0_b5e7v2qnwxfo6hmiq56u52mz3e
       debug: 3.2.7
       eslint-import-resolver-node: 0.3.6
       find-up: 2.1.0
@@ -6114,18 +5975,18 @@ packages:
       - supports-color
     dev: false
 
-  /eslint-plugin-eslint-comments/3.2.0_eslint@8.17.0:
+  /eslint-plugin-eslint-comments/3.2.0_eslint@8.18.0:
     resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
     engines: {node: '>=6.5.0'}
     peerDependencies:
       eslint: '>=4.19.1'
     dependencies:
       escape-string-regexp: 1.0.5
-      eslint: 8.17.0
+      eslint: 8.18.0
       ignore: 5.2.0
     dev: false
 
-  /eslint-plugin-import/2.26.0_wyrfqmvemfacbroyi3ypviy7f4:
+  /eslint-plugin-import/2.26.0_wno36sjfnklvt2ocf7qbhb2izy:
     resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -6135,14 +5996,14 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.28.0_ud6rd4xtew5bv4yhvkvu24pzm4
+      '@typescript-eslint/parser': 5.30.0_b5e7v2qnwxfo6hmiq56u52mz3e
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
       debug: 2.6.9
       doctrine: 2.1.0
-      eslint: 8.17.0
+      eslint: 8.18.0
       eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.3_cfsupm63rr3qvqifljk6nmy67u
+      eslint-module-utils: 2.7.3_s24jsywy72ks6h3c4f2dacxdsa
       has: 1.0.3
       is-core-module: 2.9.0
       is-glob: 4.0.3
@@ -6156,33 +6017,33 @@ packages:
       - supports-color
     dev: false
 
-  /eslint-plugin-jsonc/2.3.0_eslint@8.17.0:
+  /eslint-plugin-jsonc/2.3.0_eslint@8.18.0:
     resolution: {integrity: sha512-QqHj7Chw8vsALsCOhFxecRIepxpbcpmMon9yA1+GaYk1Am0GanHAwnTkeVX+/ysAb4QTkeGMZ+ZPK4TKrZ/VSw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      eslint: 8.17.0
-      eslint-utils: 3.0.0_eslint@8.17.0
+      eslint: 8.18.0
+      eslint-utils: 3.0.0_eslint@8.18.0
       jsonc-eslint-parser: 2.1.0
       natural-compare: 1.4.0
     dev: false
 
-  /eslint-plugin-markdown/2.2.1_eslint@8.17.0:
+  /eslint-plugin-markdown/2.2.1_eslint@8.18.0:
     resolution: {integrity: sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==}
     engines: {node: ^8.10.0 || ^10.12.0 || >= 12.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      eslint: 8.17.0
+      eslint: 8.18.0
       mdast-util-from-markdown: 0.8.5
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /eslint-plugin-prettier/4.0.0_nguwan5pqsajixjz57ffz7bkde:
-    resolution: {integrity: sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==}
-    engines: {node: '>=6.0.0'}
+  /eslint-plugin-prettier/4.1.0_xu6ewijrtliw5q5lksq5uixwby:
+    resolution: {integrity: sha512-A3AXIEfTnq3D5qDFjWJdQ9c4BLhw/TqhSR+6+SVaoPJBAWciFEuJiNQh275OnjRrAi7yssZzuWBRw66VG2g6UA==}
+    engines: {node: '>=12.0.0'}
     peerDependencies:
       eslint: '>=7.28.0'
       eslint-config-prettier: '*'
@@ -6191,13 +6052,13 @@ packages:
       eslint-config-prettier:
         optional: true
     dependencies:
-      eslint: 8.17.0
-      eslint-config-prettier: 8.5.0_eslint@8.17.0
-      prettier: 2.7.0
+      eslint: 8.18.0
+      eslint-config-prettier: 8.5.0_eslint@8.18.0
+      prettier: 2.7.1
       prettier-linter-helpers: 1.0.0
     dev: false
 
-  /eslint-plugin-unicorn/42.0.0_eslint@8.17.0:
+  /eslint-plugin-unicorn/42.0.0_eslint@8.18.0:
     resolution: {integrity: sha512-ixBsbhgWuxVaNlPTT8AyfJMlhyC5flCJFjyK3oKE8TRrwBnaHvUbuIkCM1lqg8ryYrFStL/T557zfKzX4GKSlg==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -6206,8 +6067,8 @@ packages:
       '@babel/helper-validator-identifier': 7.16.7
       ci-info: 3.3.1
       clean-regexp: 1.0.0
-      eslint: 8.17.0
-      eslint-utils: 3.0.0_eslint@8.17.0
+      eslint: 8.18.0
+      eslint-utils: 3.0.0_eslint@8.18.0
       esquery: 1.4.0
       indent-string: 4.0.0
       is-builtin-module: 3.1.0
@@ -6220,19 +6081,19 @@ packages:
       strip-indent: 3.0.0
     dev: false
 
-  /eslint-plugin-vue/9.1.1_eslint@8.17.0:
+  /eslint-plugin-vue/9.1.1_eslint@8.18.0:
     resolution: {integrity: sha512-W9n5PB1X2jzC7CK6riG0oAcxjmKrjTF6+keL1rni8n57DZeilx/Fulz+IRJK3lYseLNAygN0I62L7DvioW40Tw==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.17.0
-      eslint-utils: 3.0.0_eslint@8.17.0
+      eslint: 8.18.0
+      eslint-utils: 3.0.0_eslint@8.18.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.0.10
       semver: 7.3.7
-      vue-eslint-parser: 9.0.2_eslint@8.17.0
+      vue-eslint-parser: 9.0.2_eslint@8.18.0
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -6253,13 +6114,13 @@ packages:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  /eslint-utils/3.0.0_eslint@8.17.0:
+  /eslint-utils/3.0.0_eslint@8.18.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.17.0
+      eslint: 8.18.0
       eslint-visitor-keys: 2.1.0
 
   /eslint-visitor-keys/2.1.0:
@@ -6270,8 +6131,8 @@ packages:
     resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  /eslint/8.17.0:
-    resolution: {integrity: sha512-gq0m0BTJfci60Fz4nczYxNAlED+sMcihltndR8t9t1evnU/azx53x3t2UHXC/uRjcbvRw/XctpaNygSTcQD+Iw==}
+  /eslint/8.18.0:
+    resolution: {integrity: sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -6284,7 +6145,7 @@ packages:
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.17.0
+      eslint-utils: 3.0.0_eslint@8.18.0
       eslint-visitor-keys: 3.3.0
       espree: 9.3.2
       esquery: 1.4.0
@@ -6597,12 +6458,12 @@ packages:
       merge: 2.1.1
     dev: true
 
-  /find-packages/9.0.3:
-    resolution: {integrity: sha512-GkH9OzuxG4s4IkHKukmrKu7pAL2NGGI9TCCskRpUCiWjLfiSoezWJPmqMV8xafH9pxw73gkmWAG2pZqsVSWZ9Q==}
-    engines: {node: '>=14.19'}
+  /find-packages/9.0.6:
+    resolution: {integrity: sha512-D4IhAYrTKeg/FgcjVCpgCYrnTCKOzyNfqktYETB3ttk21kmjxSSK+bTqoAOIyKy88o0cmMfbohtAZt69mf848A==}
+    engines: {node: '>=14.6'}
     dependencies:
-      '@pnpm/read-project-manifest': 3.0.3
-      '@pnpm/types': 8.1.0
+      '@pnpm/read-project-manifest': 3.0.6
+      '@pnpm/types': 8.4.0
       fast-glob: 3.2.11
       p-filter: 2.1.0
 
@@ -6910,12 +6771,8 @@ packages:
       call-bind: 1.0.2
       get-intrinsic: 1.1.1
 
-  /get-tsconfig/3.0.1:
-    resolution: {integrity: sha512-+m30eQjbcf3xMNdnacXH5IDAKUMbI7Mhbf3e1BHif1FzBlUhBzBlmOVc7kL4+kB035l8OCyBdI3dNXZ3of9HqA==}
-    dev: true
-
-  /get-tsconfig/4.0.2:
-    resolution: {integrity: sha512-mId66O9RChjqWtUrq793OhYTJGUM1InYWw9wLQ4APAazEbN/BAAAcR+/X7dPBNy6om1vdGFTP5RGHste86ZOqQ==}
+  /get-tsconfig/4.0.7:
+    resolution: {integrity: sha512-hI0ikvRti9TmxszXtfRaVxSU0yQ2HJK03MU14dG/exX/RrELbMTYJW0xOzGR6c2FsddZ3eZHZxDotEIPOw4D+A==}
     dev: true
 
   /get-value/2.0.6:
@@ -8114,7 +7971,7 @@ packages:
       is-plain-object: 2.0.4
       object.map: 1.0.1
       rechoir: 0.6.2
-      resolve: 1.22.0
+      resolve: 1.22.1
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -8133,8 +7990,8 @@ packages:
       uc.micro: 1.0.6
     dev: false
 
-  /lint-staged/13.0.1:
-    resolution: {integrity: sha512-Ykaf4QTi0a02BF7cnq7JIPGOJxH4TkNMWhSlJdH9wOekd0X+gog47Jfh/0L31DqZe5AiydLGC7LkPqpaNm+Kvg==}
+  /lint-staged/13.0.3:
+    resolution: {integrity: sha512-9hmrwSCFroTSYLjflGI8Uk+GWAwMB4OlpU4bMJEAT5d/llQwtYKoim4bLOyLCuWFAhWEupE0vkIFqtw/WIsPug==}
     engines: {node: ^14.13.1 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -8402,7 +8259,7 @@ packages:
     dependencies:
       findup-sync: 2.0.0
       micromatch: 3.1.10
-      resolve: 1.22.0
+      resolve: 1.22.1
       stack-trace: 0.0.10
     transitivePeerDependencies:
       - supports-color
@@ -8940,17 +8797,17 @@ packages:
       es-abstract: 1.20.1
     dev: false
 
-  /octokit/1.7.2:
-    resolution: {integrity: sha512-C+iwOeUMWwbvHxGbLX5rAde5WuEVGe/hNQniU1haZAPMHqUz1+ppffvkP4v/2R3dkSLJnzceUG+ir0klNmEoBA==}
+  /octokit/1.8.1:
+    resolution: {integrity: sha512-xBLKFIivbl7wnLwxzLYuDO/JDNYxdyxoSjFrl/QMrY/fwGGQYYklvKUDTUyGMU0aXPrQtJ0IZnG3BXpCkDQzWg==}
     dependencies:
       '@octokit/app': 12.0.5
       '@octokit/core': 3.6.0
       '@octokit/oauth-app': 3.6.2
-      '@octokit/plugin-paginate-rest': 2.17.0_@octokit+core@3.6.0
-      '@octokit/plugin-rest-endpoint-methods': 5.13.0_@octokit+core@3.6.0
+      '@octokit/plugin-paginate-rest': 2.19.0_@octokit+core@3.6.0
+      '@octokit/plugin-rest-endpoint-methods': 5.15.0_@octokit+core@3.6.0
       '@octokit/plugin-retry': 3.0.9
       '@octokit/plugin-throttling': 3.6.2_@octokit+core@3.6.0
-      '@octokit/types': 6.34.0
+      '@octokit/types': 6.37.1
     transitivePeerDependencies:
       - encoding
     dev: true
@@ -9399,8 +9256,8 @@ packages:
       fast-diff: 1.2.0
     dev: false
 
-  /prettier/2.7.0:
-    resolution: {integrity: sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ==}
+  /prettier/2.7.1:
+    resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
     engines: {node: '>=10.13.0'}
     hasBin: true
 
@@ -9424,7 +9281,7 @@ packages:
     dependencies:
       parse-ms: 2.1.0
 
-  /pretty-quick/3.1.3_prettier@2.7.0:
+  /pretty-quick/3.1.3_prettier@2.7.1:
     resolution: {integrity: sha512-kOCi2FJabvuh1as9enxYmrnBC6tVMoVOenMaBqRfsvBHB0cbpYHjdQEpSglpASDFEXVwplpcGR4CLEaisYAFcA==}
     engines: {node: '>=10.13'}
     hasBin: true
@@ -9437,7 +9294,7 @@ packages:
       ignore: 5.2.0
       mri: 1.2.0
       multimatch: 4.0.0
-      prettier: 2.7.0
+      prettier: 2.7.1
     dev: true
 
   /printable-characters/1.0.42:
@@ -9502,8 +9359,8 @@ packages:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
 
-  /puppeteer/14.4.0:
-    resolution: {integrity: sha512-hAXoJX7IAmnRBwf4VrowoRdrS8hqWZsGuQ1Dg5R0AwDK5juaxnNO/obySo9+ytyF7pp9/VsmIA9yFE1GLSouCQ==}
+  /puppeteer/14.4.1:
+    resolution: {integrity: sha512-+H0Gm84aXUvSLdSiDROtLlOofftClgw2TdceMvvCU9UvMryappoeS3+eOLfKvoy4sm8B8MWnYmPhWxVFudAOFQ==}
     engines: {node: '>=14.1.0'}
     requiresBuild: true
     dependencies:
@@ -9894,6 +9751,14 @@ packages:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  /resolve/1.22.1:
+    resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.9.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
   /restore-cursor/2.0.0:
     resolution: {integrity: sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==}
     engines: {node: '>=4'}
@@ -9947,7 +9812,7 @@ packages:
       '@babel/code-frame': 7.16.7
     dev: true
 
-  /rollup-plugin-esbuild/4.9.1_2uefy6dldbldonrghlgjus4ieu:
+  /rollup-plugin-esbuild/4.9.1_qrpxjnto46iodaa4efitqiw3he:
     resolution: {integrity: sha512-qn/x7Wz9p3Xnva99qcb+nopH0d2VJwVnsxJTGEg+Sh2Z3tqQl33MhOwzekVo1YTKgv+yAmosjcBRJygMfGrtLw==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -9957,10 +9822,10 @@ packages:
       '@rollup/pluginutils': 4.2.1
       debug: 4.3.4
       es-module-lexer: 0.9.3
-      esbuild: 0.14.43
+      esbuild: 0.14.47
       joycon: 3.1.1
       jsonc-parser: 3.0.0
-      rollup: 2.75.6
+      rollup: 2.75.7
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -10001,6 +9866,14 @@ packages:
     hasBin: true
     optionalDependencies:
       fsevents: 2.3.2
+    dev: true
+
+  /rollup/2.75.7:
+    resolution: {integrity: sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
 
   /run-async/2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
@@ -10054,8 +9927,8 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /sass/1.52.3:
-    resolution: {integrity: sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==}
+  /sass/1.53.0:
+    resolution: {integrity: sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==}
     engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
@@ -10301,7 +10174,7 @@ packages:
     dev: false
 
   /spawn-command/0.0.2-1:
-    resolution: {integrity: sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=}
+    resolution: {integrity: sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==}
     dev: true
 
   /spdx-correct/3.1.1:
@@ -10676,7 +10549,7 @@ packages:
     dev: true
 
   /text-table/0.2.0:
-    resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=}
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
   /through/2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
@@ -10833,7 +10706,7 @@ packages:
       '@ts-morph/common': 0.13.0
       code-block-writer: 11.0.0
 
-  /ts-node/10.8.1_fvkldoeufjjq5mlpfdkzhuqzdy:
+  /ts-node/10.8.1_7oqjshy4scgohh2k2lzivplbau:
     resolution: {integrity: sha512-Wwsnao4DQoJsN034wePSg5nZiw4YKXf56mPIAeD6wVmiv+RytNSWqc2f3fKvcUoV+Yn2+yocD71VOfQHbmVX4g==}
     hasBin: true
     peerDependencies:
@@ -10859,7 +10732,7 @@ packages:
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.7.3
+      typescript: 4.7.4
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     dev: true
@@ -10882,23 +10755,23 @@ packages:
   /tslib/2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
 
-  /tsutils/3.21.0_typescript@4.7.3:
+  /tsutils/3.21.0_typescript@4.7.4:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 4.7.3
+      typescript: 4.7.4
     dev: false
 
-  /tsx/3.4.2:
-    resolution: {integrity: sha512-Rd1gm2noOUiVynF+VFxo4bVBNbzS6haWKWtlQ0bEfCLLEqm+GG3R98D3Rqk6foQ3NnJk6JAWOx1ragwcAPj4Lg==}
+  /tsx/3.6.0:
+    resolution: {integrity: sha512-XzqSxPmyJnI7ZtEX/CLE/CSDkqbL7dK4jwtJRIZpV0EhCxWqtb1OqJPlUc4CVS3/MFdpt8ZxLpvPFohWRTHbzw==}
     hasBin: true
     dependencies:
-      '@esbuild-kit/cjs-loader': 2.0.1
-      '@esbuild-kit/core-utils': 1.3.1
-      '@esbuild-kit/esm-loader': 2.1.5
+      '@esbuild-kit/cjs-loader': 2.2.1
+      '@esbuild-kit/core-utils': 2.0.2
+      '@esbuild-kit/esm-loader': 2.3.1
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -10958,8 +10831,8 @@ packages:
     resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
     engines: {node: '>=8'}
 
-  /type-fest/2.13.1:
-    resolution: {integrity: sha512-hXYyrPFwETT2swFLHeoKtJrvSF/ftG/sA15/8nGaLuaDGfVAaq8DYFpu4yOyV4tzp082WqnTEoMsm3flKMI2FQ==}
+  /type-fest/2.14.0:
+    resolution: {integrity: sha512-hQnTQkFjL5ik6HF2fTAM8ycbr94UbQXK364wF930VHb0dfBJ5JBP8qwrR8TaK9zwUEk7meruo2JAUDMwvuxd/w==}
     engines: {node: '>=12.20'}
     dev: true
 
@@ -10984,6 +10857,12 @@ packages:
     resolution: {integrity: sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==}
     engines: {node: '>=4.2.0'}
     hasBin: true
+    dev: true
+
+  /typescript/4.7.4:
+    resolution: {integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
 
   /uc.micro/1.0.6:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
@@ -11154,7 +11033,7 @@ packages:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
 
-  /unocss/0.33.5_vite@2.9.12:
+  /unocss/0.33.5_vite@2.9.13:
     resolution: {integrity: sha512-aSWxGP6LHWv9eKc0WrmuLnOG2V8jkYd6zvsvB3LhZtCBWFXHPJ25T+zZP1szLbejPgSVJVVpJhnIAjJOFXRM9g==}
     engines: {node: '>=14'}
     dependencies:
@@ -11171,7 +11050,7 @@ packages:
       '@unocss/transformer-compile-class': 0.33.5
       '@unocss/transformer-directives': 0.33.5
       '@unocss/transformer-variant-group': 0.33.5
-      '@unocss/vite': 0.33.5_vite@2.9.12
+      '@unocss/vite': 0.33.5_vite@2.9.13
     transitivePeerDependencies:
       - supports-color
       - vite
@@ -11192,8 +11071,8 @@ packages:
       - webpack
     dev: true
 
-  /unplugin-icons/0.14.3_vite@2.9.12:
-    resolution: {integrity: sha512-PyyNMACpZ/EAiG3B6K1wPGZ151VGdlHIEx8/utgP546yVmPpV/xC1k1V2eEebf71fGm3WD6gzPrERNsbMgIVgg==}
+  /unplugin-icons/0.14.6_vite@2.9.13:
+    resolution: {integrity: sha512-8sxDiL4l+TV4zufZfrskgHZZSDFoGOCBgYsefRMM4inQ3Z6KhgMSuNyew7U7D/xG//rwxgD7bN+Dv+YAZEEfEw==}
     peerDependencies:
       '@svgr/core': '>=5.5.0'
       '@vue/compiler-sfc': ^3.0.2
@@ -11211,11 +11090,11 @@ packages:
     dependencies:
       '@antfu/install-pkg': 0.1.0
       '@antfu/utils': 0.5.2
-      '@iconify/utils': 1.0.32
+      '@iconify/utils': 1.0.33
       debug: 4.3.4
       kolorist: 1.5.1
       local-pkg: 0.4.1
-      unplugin: 0.6.3_vite@2.9.12
+      unplugin: 0.7.0_vite@2.9.13
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -11224,18 +11103,15 @@ packages:
       - webpack
     dev: true
 
-  /unplugin-vue-components/0.19.6_vite@2.9.12+vue@3.2.37:
-    resolution: {integrity: sha512-APvrJ9Hpid1MLT0G4PWerMJgARhNw6dzz0pcCwCxaO2DR7VyvDacMqjOQNC6ukq7FSw3wzD8VH+9i3EFXwkGmw==}
+  /unplugin-vue-components/0.20.1_vite@2.9.13+vue@3.2.37:
+    resolution: {integrity: sha512-I70rKUvnJXxBvvTvKhjMV6jXh48BdiUNn2jcQiTdZjqBA3Xgkze31tdc4KBX46yryIy0y6pVaZ9gVBNPrF785g==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/parser': ^7.15.8
-      '@babel/traverse': ^7.15.4
       vue: 2 || 3
     peerDependenciesMeta:
       '@babel/parser':
         optional: true
-      '@babel/traverse':
-        optional: true
     dependencies:
       '@antfu/utils': 0.5.2
       '@rollup/pluginutils': 4.2.1
@@ -11245,8 +11121,8 @@ packages:
       local-pkg: 0.4.1
       magic-string: 0.26.2
       minimatch: 5.1.0
-      resolve: 1.22.0
-      unplugin: 0.6.3_vite@2.9.12
+      resolve: 1.22.1
+      unplugin: 0.7.0_vite@2.9.13
       vue: 3.2.37
     transitivePeerDependencies:
       - esbuild
@@ -11256,7 +11132,7 @@ packages:
       - webpack
     dev: true
 
-  /unplugin-vue-define-options/0.6.1_m375ryyfrmfofwntyuzleomjpq:
+  /unplugin-vue-define-options/0.6.1_vite@2.9.13+vue@3.2.37:
     resolution: {integrity: sha512-YZQxE3vC7Tb4Ev10blfYPC23hR3t8UNynoVSt2bY9GtHB2usxpywPQqRj7xdUtuj6JsDfrZ9wRKKbEkcMEXI1A==}
     engines: {node: '>=14.17.0'}
     peerDependencies:
@@ -11264,16 +11140,16 @@ packages:
     dependencies:
       '@rollup/pluginutils': 4.2.1
       '@vue/compiler-sfc': 3.2.37
-      unplugin: 0.6.3_2uefy6dldbldonrghlgjus4ieu
+      unplugin: 0.6.3_vite@2.9.13
       vue: 3.2.37
     transitivePeerDependencies:
       - esbuild
       - rollup
       - vite
       - webpack
-    dev: false
+    dev: true
 
-  /unplugin-vue-define-options/0.6.1_vite@2.9.12+vue@3.2.37:
+  /unplugin-vue-define-options/0.6.1_vue@3.2.37:
     resolution: {integrity: sha512-YZQxE3vC7Tb4Ev10blfYPC23hR3t8UNynoVSt2bY9GtHB2usxpywPQqRj7xdUtuj6JsDfrZ9wRKKbEkcMEXI1A==}
     engines: {node: '>=14.17.0'}
     peerDependencies:
@@ -11281,7 +11157,7 @@ packages:
     dependencies:
       '@rollup/pluginutils': 4.2.1
       '@vue/compiler-sfc': 3.2.37
-      unplugin: 0.6.3_vite@2.9.12
+      unplugin: 0.6.3
       vue: 3.2.37
     transitivePeerDependencies:
       - esbuild
@@ -11290,7 +11166,7 @@ packages:
       - webpack
     dev: true
 
-  /unplugin-vue-define-options/0.6.1_vue@3.2.37:
+  /unplugin-vue-define-options/0.6.1_z4bu4wu5k7xudjmnmksyrigboq:
     resolution: {integrity: sha512-YZQxE3vC7Tb4Ev10blfYPC23hR3t8UNynoVSt2bY9GtHB2usxpywPQqRj7xdUtuj6JsDfrZ9wRKKbEkcMEXI1A==}
     engines: {node: '>=14.17.0'}
     peerDependencies:
@@ -11298,14 +11174,14 @@ packages:
     dependencies:
       '@rollup/pluginutils': 4.2.1
       '@vue/compiler-sfc': 3.2.37
-      unplugin: 0.6.3
+      unplugin: 0.6.3_qrpxjnto46iodaa4efitqiw3he
       vue: 3.2.37
     transitivePeerDependencies:
       - esbuild
       - rollup
       - vite
       - webpack
-    dev: true
+    dev: false
 
   /unplugin/0.6.3:
     resolution: {integrity: sha512-CoW88FQfCW/yabVc4bLrjikN9HC8dEvMU4O7B6K2jsYMPK0l6iAnd9dpJwqGcmXJKRCU9vwSsy653qg+RK0G6A==}
@@ -11329,7 +11205,7 @@ packages:
       webpack-virtual-modules: 0.4.3
     dev: true
 
-  /unplugin/0.6.3_2uefy6dldbldonrghlgjus4ieu:
+  /unplugin/0.6.3_qrpxjnto46iodaa4efitqiw3he:
     resolution: {integrity: sha512-CoW88FQfCW/yabVc4bLrjikN9HC8dEvMU4O7B6K2jsYMPK0l6iAnd9dpJwqGcmXJKRCU9vwSsy653qg+RK0G6A==}
     peerDependencies:
       esbuild: '>=0.13'
@@ -11347,13 +11223,13 @@ packages:
         optional: true
     dependencies:
       chokidar: 3.5.3
-      esbuild: 0.14.43
-      rollup: 2.75.6
+      esbuild: 0.14.47
+      rollup: 2.75.7
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.4.3
     dev: false
 
-  /unplugin/0.6.3_vite@2.9.12:
+  /unplugin/0.6.3_vite@2.9.13:
     resolution: {integrity: sha512-CoW88FQfCW/yabVc4bLrjikN9HC8dEvMU4O7B6K2jsYMPK0l6iAnd9dpJwqGcmXJKRCU9vwSsy653qg+RK0G6A==}
     peerDependencies:
       esbuild: '>=0.13'
@@ -11371,7 +11247,31 @@ packages:
         optional: true
     dependencies:
       chokidar: 3.5.3
-      vite: 2.9.12
+      vite: 2.9.13
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.4.3
+    dev: true
+
+  /unplugin/0.7.0_vite@2.9.13:
+    resolution: {integrity: sha512-OsiFrgybmqm5bGuaodvbLYhqUrvGuRHRMZDhddKEXTDbuQ1x+hR7M1WpQguXj03whVYjEYChhFo738cZH5RNig==}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      acorn: 8.7.1
+      chokidar: 3.5.3
+      vite: 2.9.13
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.4.3
     dev: true
@@ -11534,7 +11434,7 @@ packages:
       replace-ext: 1.0.1
     dev: false
 
-  /vite-plugin-inspect/0.5.0_vite@2.9.12:
+  /vite-plugin-inspect/0.5.0_vite@2.9.13:
     resolution: {integrity: sha512-eArca+5jrNx1hQL+5s79eT5Xq4VXjJcihJhK8GT/+W2GqefVxFO1WO78RnD0HPI+hKSdEFo+B4z2zeaE8DTvWQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -11548,7 +11448,7 @@ packages:
       kolorist: 1.5.1
       sirv: 2.0.2
       ufo: 0.8.4
-      vite: 2.9.12
+      vite: 2.9.13
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -11561,7 +11461,7 @@ packages:
       axios: 0.21.4_debug@4.3.4
       debug: 4.3.4
       picocolors: 1.0.0
-      vite: 2.9.12
+      vite: 2.9.13
     transitivePeerDependencies:
       - encoding
       - less
@@ -11570,7 +11470,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa/0.12.0_vite@2.9.12:
+  /vite-plugin-pwa/0.12.0_vite@2.9.13:
     resolution: {integrity: sha512-KYD+cnS5ExLF3T28NkfzBLZ53ehHlp+qMhHGFNh0zlVGpFHrJkL2v9wd4AMi7ZkBTffgeNatIFiv8rhCsMSxBQ==}
     peerDependencies:
       vite: ^2.0.0
@@ -11582,7 +11482,7 @@ packages:
       fast-glob: 3.2.11
       pretty-bytes: 6.0.0
       rollup: 2.75.6
-      vite: 2.9.12
+      vite: 2.9.13
       workbox-build: 6.5.3
       workbox-window: 6.5.3
     transitivePeerDependencies:
@@ -11590,7 +11490,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite/2.9.10_sass@1.52.3:
+  /vite/2.9.10_sass@1.53.0:
     resolution: {integrity: sha512-TwZRuSMYjpTurLqXspct+HZE7ONiW9d+wSWgvADGxhDPPyoIcNywY+RX4ng+QpK30DCa1l/oZgi2PLZDibhzbQ==}
     engines: {node: '>=12.2.0'}
     hasBin: true
@@ -11610,13 +11510,13 @@ packages:
       postcss: 8.4.14
       resolve: 1.22.0
       rollup: 2.75.6
-      sass: 1.52.3
+      sass: 1.53.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vite/2.9.12:
-    resolution: {integrity: sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==}
+  /vite/2.9.13:
+    resolution: {integrity: sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==}
     engines: {node: '>=12.2.0'}
     hasBin: true
     peerDependencies:
@@ -11631,10 +11531,10 @@ packages:
       stylus:
         optional: true
     dependencies:
-      esbuild: 0.14.43
+      esbuild: 0.14.47
       postcss: 8.4.14
-      resolve: 1.22.0
-      rollup: 2.75.6
+      resolve: 1.22.1
+      rollup: 2.75.7
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -11646,9 +11546,9 @@ packages:
     dependencies:
       '@docsearch/css': 3.1.0
       '@docsearch/js': 3.1.0
-      '@vitejs/plugin-vue': 2.3.3_vite@2.9.12+vue@3.2.37
+      '@vitejs/plugin-vue': 2.3.3_vite@2.9.13+vue@3.2.37
       prismjs: 1.28.0
-      vite: 2.9.12
+      vite: 2.9.13
       vue: 3.2.37
     transitivePeerDependencies:
       - '@types/react'
@@ -11659,7 +11559,7 @@ packages:
       - stylus
     dev: true
 
-  /vitest/0.12.6_p3hsn2gyxkuoma7fybu4bszcau:
+  /vitest/0.12.6_s3h4fu5cxhimy2a3bowqsjsovu:
     resolution: {integrity: sha512-YWbCTv0XKBuBw5YtuW/iufuguoi8QhGpYyi2g57Oo7akpscMkkWTAaZGgY0ux1oJJtO/pc/8GFt0EF32WFBUUQ==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
@@ -11680,14 +11580,14 @@ packages:
     dependencies:
       '@types/chai': 4.3.1
       '@types/chai-subset': 1.3.3
-      '@vitest/ui': 0.14.2
+      '@vitest/ui': 0.16.0
       c8: 7.11.3
       chai: 4.3.6
       jsdom: 16.4.0
       local-pkg: 0.4.1
       tinypool: 0.1.3
       tinyspy: 0.3.2
-      vite: 2.9.10_sass@1.52.3
+      vite: 2.9.10_sass@1.53.0
     transitivePeerDependencies:
       - less
       - sass
@@ -11709,14 +11609,14 @@ packages:
       vue: 3.2.37
     dev: false
 
-  /vue-eslint-parser/9.0.2_eslint@8.17.0:
+  /vue-eslint-parser/9.0.2_eslint@8.18.0:
     resolution: {integrity: sha512-uCPQwTGjOtAYrwnU+76pYxalhjsh7iFBsHwBqDHiOPTxtICDaraO4Szw54WFTNZTAEsgHHzqFOu1mmnBOBRzDA==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
-      eslint: 8.17.0
+      eslint: 8.18.0
       eslint-scope: 7.1.1
       eslint-visitor-keys: 3.3.0
       espree: 9.3.2
@@ -11736,14 +11636,14 @@ packages:
       vue: 3.2.37
     dev: true
 
-  /vue-tsc/0.37.8_typescript@4.7.3:
-    resolution: {integrity: sha512-geFpG3qxmb7QIDlPeHCvWomsQHfcgFZ280Nbh3Fj/bQ+Bz0pplTE6rjAq/VLelg8KcbchO5PdACexxeS+mCZAA==}
+  /vue-tsc/0.38.2_typescript@4.7.4:
+    resolution: {integrity: sha512-+OMmpw9BZC9khul3I1HGtWchv7BCiaM7NvfdilVAiOFkjnivIoaW6jJm6YPQJaEPouePtpkDUWovyzgNxWdDsw==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/vue-typescript': 0.37.8
-      typescript: 4.7.3
+      '@volar/vue-typescript': 0.38.2
+      typescript: 4.7.4
     dev: true
 
   /vue/3.2.37:

From 3678a666f4beee7a71d30eae7d3c795cb880e643 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 27 Jun 2022 22:46:11 +0000
Subject: [PATCH 40/48] chore(deps): update dependency puppeteer to v15 (#8485)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json   |  2 +-
 pnpm-lock.yaml | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 483dbedec4617..034b5def0ef33 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
-    "puppeteer": "^14.4.1",
+    "puppeteer": "^15.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.2",
     "sass": "^1.53.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b32768cfd313..abe4832ebd712 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,7 +63,7 @@ importers:
       npm-run-all: ^4.1.5
       prettier: ^2.7.1
       pretty-quick: ^3.1.3
-      puppeteer: ^14.4.1
+      puppeteer: ^15.1.1
       resize-observer-polyfill: ^1.5.1
       rimraf: ^3.0.2
       sass: ^1.53.0
@@ -138,7 +138,7 @@ importers:
       npm-run-all: 4.1.5
       prettier: 2.7.1
       pretty-quick: 3.1.3_prettier@2.7.1
-      puppeteer: 14.4.1
+      puppeteer: 15.1.1
       resize-observer-polyfill: 1.5.1
       rimraf: 3.0.2
       sass: 1.53.0
@@ -5124,8 +5124,8 @@ packages:
     resolution: {integrity: sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==}
     engines: {node: '>=8'}
 
-  /devtools-protocol/0.0.1001819:
-    resolution: {integrity: sha512-G6OsIFnv/rDyxSqBa2lDLR6thp9oJioLsb2Gl+LbQlyoA9/OBAkrTU9jiCcQ8Pnh7z4d6slDiLaogR5hzgJLmQ==}
+  /devtools-protocol/0.0.1011705:
+    resolution: {integrity: sha512-OKvTvu9n3swmgYshvsyVHYX0+aPzCoYUnyXUacfQMmFtBtBKewV/gT4I9jkAbpTqtTi2E4S9MXLlvzBDUlqg0Q==}
     dev: true
 
   /diff/4.0.2:
@@ -9359,14 +9359,14 @@ packages:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
 
-  /puppeteer/14.4.1:
-    resolution: {integrity: sha512-+H0Gm84aXUvSLdSiDROtLlOofftClgw2TdceMvvCU9UvMryappoeS3+eOLfKvoy4sm8B8MWnYmPhWxVFudAOFQ==}
+  /puppeteer/15.1.1:
+    resolution: {integrity: sha512-XMysu48uIcaYad/IelRTX3yxpHkcNdhdzPegnBEz9h1uEQfLhFcMJnjyvus51Sm+OPwr2gaKQhtyuIVaVKqd0Q==}
     engines: {node: '>=14.1.0'}
     requiresBuild: true
     dependencies:
       cross-fetch: 3.1.5
       debug: 4.3.4
-      devtools-protocol: 0.0.1001819
+      devtools-protocol: 0.0.1011705
       extract-zip: 2.0.1
       https-proxy-agent: 5.0.1
       pkg-dir: 4.2.0
@@ -9375,7 +9375,7 @@ packages:
       rimraf: 3.0.2
       tar-fs: 2.1.1
       unbzip2-stream: 1.4.3
-      ws: 8.7.0
+      ws: 8.8.0
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -11974,8 +11974,8 @@ packages:
         optional: true
     dev: true
 
-  /ws/8.7.0:
-    resolution: {integrity: sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg==}
+  /ws/8.8.0:
+    resolution: {integrity: sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1

From e0e86a4c90439802e9b29ad24d1f033b026e4ee2 Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Tue, 28 Jun 2022 16:25:52 +0800
Subject: [PATCH 41/48] chore(play): improve import (#8468)

---
 play/app.example.vue | 5 ++---
 play/main.ts         | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/play/app.example.vue b/play/app.example.vue
index 1a1fb8f5ff0d3..f965b07183570 100644
--- a/play/app.example.vue
+++ b/play/app.example.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="play-container">
     <el-icon color="#409EFC">
-      <check-icon />
+      <el-icon-check />
     </el-icon>
     <el-icon>
-      <menu-icon />
+      <el-icon-menu />
     </el-icon>
     <el-button>test</el-button>
     <div v-loading="true" />
@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import { Check as CheckIcon, Menu as MenuIcon } from '@element-plus/icons-vue'
 // code here
 </script>
 
diff --git a/play/main.ts b/play/main.ts
index 5a19faa86a1ec..9553dfbbd9ce1 100644
--- a/play/main.ts
+++ b/play/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import '@element-plus/theme-chalk/src/index.scss'
+import '@element-plus/theme-chalk/src/dark/css-vars.scss'
 ;(async () => {
   const apps = import.meta.glob('./src/*.vue')
   const name = location.pathname.replace(/^\//, '') || 'App'

From ecc80038be02d0840e91edfbfee20a1ce63c4952 Mon Sep 17 00:00:00 2001
From: zhengqbbb <40693636+Zhengqbbb@users.noreply.github.com>
Date: Tue, 28 Jun 2022 16:31:15 +0800
Subject: [PATCH 42/48] chore: use `czg` replace `commitizen` (#8482)

---
 package.json   |   4 +-
 pnpm-lock.yaml | 286 +++----------------------------------------------
 2 files changed, 18 insertions(+), 272 deletions(-)

diff --git a/package.json b/package.json
index 034b5def0ef33..2db9455e83450 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "docs"
   ],
   "scripts": {
-    "cz": "git-cz",
+    "cz": "czg",
     "test": "vitest",
     "test:coverage": "vitest --coverage",
     "test:ssr": "vitest --config ./ssr-testing/vitest.config.ts",
@@ -90,11 +90,11 @@
     "@vue/tsconfig": "^0.1.3",
     "c8": "^7.11.3",
     "chalk": "^5.0.1",
-    "commitizen": "^4.2.4",
     "concurrently": "^7.2.2",
     "consola": "^2.15.3",
     "csstype": "^2.6.20",
     "cz-git": "^1.3.8",
+    "czg": "^1.3.8",
     "eslint": "^8.18.0",
     "eslint-define-config": "^1.5.1",
     "expect-type": "^0.13.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index abe4832ebd712..e4813dd268e12 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,11 +41,11 @@ importers:
       async-validator: ^4.2.5
       c8: ^7.11.3
       chalk: ^5.0.1
-      commitizen: ^4.2.4
       concurrently: ^7.2.2
       consola: ^2.15.3
       csstype: ^2.6.20
       cz-git: ^1.3.8
+      czg: ^1.3.8
       dayjs: ^1.11.3
       escape-html: ^1.0.3
       eslint: ^8.18.0
@@ -123,11 +123,11 @@ importers:
       '@vue/tsconfig': 0.1.3_@types+node@17.0.40
       c8: 7.11.3
       chalk: 5.0.1
-      commitizen: 4.2.4
       concurrently: 7.2.2
       consola: 2.15.3
       csstype: 2.6.20
       cz-git: 1.3.8
+      czg: 1.3.8
       eslint: 8.18.0
       eslint-define-config: 1.5.1
       expect-type: 0.13.0
@@ -3675,11 +3675,6 @@ packages:
     dependencies:
       ansi-split: 1.0.1
 
-  /ansi-escapes/3.2.0:
-    resolution: {integrity: sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==}
-    engines: {node: '>=4'}
-    dev: true
-
   /ansi-escapes/4.3.2:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
     engines: {node: '>=8'}
@@ -3702,11 +3697,6 @@ packages:
     resolution: {integrity: sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==}
     engines: {node: '>=4'}
 
-  /ansi-regex/4.1.1:
-    resolution: {integrity: sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==}
-    engines: {node: '>=6'}
-    dev: true
-
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -4306,11 +4296,6 @@ packages:
       unset-value: 1.0.0
     dev: false
 
-  /cachedir/2.2.0:
-    resolution: {integrity: sha512-VvxA0xhNqIIfg0V9AmJkDg91DaJwryutH5rVEZAhcNi4iJFj9f+QxmAjgK1LT9I8OgToX27fypX6/MeCXVbBjQ==}
-    engines: {node: '>=6'}
-    dev: true
-
   /call-bind/1.0.2:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
@@ -4413,10 +4398,6 @@ packages:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
     dev: false
 
-  /chardet/0.7.0:
-    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
-    dev: true
-
   /check-error/1.0.2:
     resolution: {integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==}
     dev: true
@@ -4504,13 +4485,6 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  /cli-cursor/2.1.0:
-    resolution: {integrity: sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==}
-    engines: {node: '>=4'}
-    dependencies:
-      restore-cursor: 2.0.0
-    dev: true
-
   /cli-cursor/3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -4534,10 +4508,6 @@ packages:
       string-width: 5.1.2
     dev: true
 
-  /cli-width/2.2.1:
-    resolution: {integrity: sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==}
-    dev: true
-
   /clipboard-copy/4.0.1:
     resolution: {integrity: sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==}
     dev: false
@@ -4657,30 +4627,6 @@ packages:
     engines: {node: ^12.20.0 || >=14}
     dev: true
 
-  /commitizen/4.2.4:
-    resolution: {integrity: sha512-LlZChbDzg3Ir3O2S7jSo/cgWp5/QwylQVr59K4xayVq8S4/RdKzSyJkghAiZZHfhh5t4pxunUoyeg0ml1q/7aw==}
-    engines: {node: '>= 10'}
-    hasBin: true
-    dependencies:
-      cachedir: 2.2.0
-      cz-conventional-changelog: 3.2.0
-      dedent: 0.7.0
-      detect-indent: 6.0.0
-      find-node-modules: 2.1.3
-      find-root: 1.1.0
-      fs-extra: 8.1.0
-      glob: 7.1.4
-      inquirer: 6.5.2
-      is-utf8: 0.2.1
-      lodash: 4.17.21
-      minimist: 1.2.5
-      strip-bom: 4.0.0
-      strip-json-comments: 3.0.1
-    transitivePeerDependencies:
-      - '@swc/core'
-      - '@swc/wasm'
-    dev: true
-
   /common-tags/1.8.2:
     resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
     engines: {node: '>=4.0.0'}
@@ -4762,10 +4708,6 @@ packages:
       q: 1.5.1
     dev: true
 
-  /conventional-commit-types/3.0.0:
-    resolution: {integrity: sha512-SmmCYnOniSsAa9GqWOeLqc179lfr5TRu5b4QFDkbsrJ5TZjPJx85wtOr3zn+1dbeNiXDKGPbZ72IKbPhLXh/Lg==}
-    dev: true
-
   /conventional-commits-parser/3.2.4:
     resolution: {integrity: sha512-nK7sAtfi+QXbxHCYfhpZsfRtaitZLIA6889kFIouLvz6repszQDgxBu7wf2WbU+Dco7sAnNCJYERCwt54WPC2Q==}
     engines: {node: '>=10'}
@@ -4913,27 +4855,15 @@ packages:
   /csstype/2.6.20:
     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
 
-  /cz-conventional-changelog/3.2.0:
-    resolution: {integrity: sha512-yAYxeGpVi27hqIilG1nh4A9Bnx4J3Ov+eXy4koL3drrR+IO9GaWPsKjik20ht608Asqi8TQPf0mczhEeyAtMzg==}
-    engines: {node: '>= 10'}
-    dependencies:
-      chalk: 2.4.2
-      commitizen: 4.2.4
-      conventional-commit-types: 3.0.0
-      lodash.map: 4.6.0
-      longest: 2.0.1
-      word-wrap: 1.2.3
-    optionalDependencies:
-      '@commitlint/load': 17.0.3
-    transitivePeerDependencies:
-      - '@swc/core'
-      - '@swc/wasm'
-    dev: true
-
   /cz-git/1.3.8:
     resolution: {integrity: sha512-hFyp/M6r870uMzX/6FjsqeZ5kbi++VR3j9TRMyUhwVurRhZ237AEeoV3KxJp5ySzTMMfSuliVHcmdpZOdJx9qA==}
     dev: true
 
+  /czg/1.3.8:
+    resolution: {integrity: sha512-Lr95D0zVCMmqhJxzq3f261r3meRHOf0xgFvfQfuPbA6Rvtfugwn26xQkATCut3S3kLOJBFaL9ISKVn4a8EGaEw==}
+    hasBin: true
+    dev: true
+
   /d/1.0.1:
     resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
     dependencies:
@@ -5028,10 +4958,6 @@ packages:
     engines: {node: '>=0.10'}
     dev: false
 
-  /dedent/0.7.0:
-    resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
-    dev: true
-
   /deep-eql/3.0.1:
     resolution: {integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==}
     engines: {node: '>=0.12'}
@@ -5110,11 +5036,7 @@ packages:
   /detect-file/1.0.0:
     resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==}
     engines: {node: '>=0.10.0'}
-
-  /detect-indent/6.0.0:
-    resolution: {integrity: sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==}
-    engines: {node: '>=8'}
-    dev: true
+    dev: false
 
   /detect-indent/6.1.0:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
@@ -6288,6 +6210,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       homedir-polyfill: 1.0.3
+    dev: false
 
   /expect-type/0.13.0:
     resolution: {integrity: sha512-CclevazQfrqo8EvbLPmP7osnb1SZXkw47XPPvUUpeMz4HuGzDltE7CaIt3RLyT9UQrwVK/LDn+KVcC0hcgjgDg==}
@@ -6316,15 +6239,6 @@ packages:
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
-  /external-editor/3.1.0:
-    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
-    engines: {node: '>=4'}
-    dependencies:
-      chardet: 0.7.0
-      iconv-lite: 0.4.24
-      tmp: 0.0.33
-    dev: true
-
   /extglob/2.0.4:
     resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==}
     engines: {node: '>=0.10.0'}
@@ -6410,13 +6324,6 @@ packages:
       pend: 1.2.0
     dev: true
 
-  /figures/2.0.0:
-    resolution: {integrity: sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==}
-    engines: {node: '>=4'}
-    dependencies:
-      escape-string-regexp: 1.0.5
-    dev: true
-
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -6451,13 +6358,6 @@ packages:
     dependencies:
       to-regex-range: 5.0.1
 
-  /find-node-modules/2.1.3:
-    resolution: {integrity: sha512-UC2I2+nx1ZuOBclWVNdcnbDR5dlrOdVb7xNjmT/lHE+LsgztWks3dG7boJ37yTS/venXw84B/mAW9uHVoC5QRg==}
-    dependencies:
-      findup-sync: 4.0.0
-      merge: 2.1.1
-    dev: true
-
   /find-packages/9.0.6:
     resolution: {integrity: sha512-D4IhAYrTKeg/FgcjVCpgCYrnTCKOzyNfqktYETB3ttk21kmjxSSK+bTqoAOIyKy88o0cmMfbohtAZt69mf848A==}
     engines: {node: '>=14.6'}
@@ -6467,10 +6367,6 @@ packages:
       fast-glob: 3.2.11
       p-filter: 2.1.0
 
-  /find-root/1.1.0:
-    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
-    dev: true
-
   /find-up/1.1.2:
     resolution: {integrity: sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==}
     engines: {node: '>=0.10.0'}
@@ -6525,16 +6421,6 @@ packages:
       - supports-color
     dev: false
 
-  /findup-sync/4.0.0:
-    resolution: {integrity: sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==}
-    engines: {node: '>= 8'}
-    dependencies:
-      detect-file: 1.0.0
-      is-glob: 4.0.3
-      micromatch: 4.0.5
-      resolve-dir: 1.0.1
-    dev: true
-
   /fined/1.2.0:
     resolution: {integrity: sha512-ZYDqPLGxDkDhDZBjZBb+oD1+j0rA4E0pXY50eplAAOPg2N/gUBSSk5IM1/QhPfyVo19lJ+CvXpqfvk+b2p/8Ng==}
     engines: {node: '>= 0.10'}
@@ -6646,15 +6532,6 @@ packages:
       jsonfile: 6.1.0
       universalify: 2.0.0
 
-  /fs-extra/8.1.0:
-    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
-    engines: {node: '>=6 <7 || >=8'}
-    dependencies:
-      graceful-fs: 4.2.10
-      jsonfile: 4.0.0
-      universalify: 0.1.2
-    dev: true
-
   /fs-extra/9.1.0:
     resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
     engines: {node: '>=10'}
@@ -6853,17 +6730,6 @@ packages:
       - supports-color
     dev: false
 
-  /glob/7.1.4:
-    resolution: {integrity: sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: true
-
   /glob/7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     dependencies:
@@ -6888,6 +6754,7 @@ packages:
       global-prefix: 1.0.2
       is-windows: 1.0.2
       resolve-dir: 1.0.1
+    dev: false
 
   /global-prefix/1.0.2:
     resolution: {integrity: sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==}
@@ -6898,6 +6765,7 @@ packages:
       ini: 1.3.8
       is-windows: 1.0.2
       which: 1.3.1
+    dev: false
 
   /globals/11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -7117,6 +6985,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       parse-passwd: 1.0.0
+    dev: false
 
   /hookable/5.1.1:
     resolution: {integrity: sha512-7qam9XBFb+DijNBthaL1k/7lHU2TEMZkWSyuqmU3sCQze1wFm5w9AlEx30PD7a+QVAjOy6Ec2goFwe1YVyk2uA==}
@@ -7244,25 +7113,6 @@ packages:
   /ini/1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
-  /inquirer/6.5.2:
-    resolution: {integrity: sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      ansi-escapes: 3.2.0
-      chalk: 2.4.2
-      cli-cursor: 2.1.0
-      cli-width: 2.2.1
-      external-editor: 3.1.0
-      figures: 2.0.0
-      lodash: 4.17.21
-      mute-stream: 0.0.7
-      run-async: 2.4.1
-      rxjs: 6.6.7
-      string-width: 2.1.1
-      strip-ansi: 5.2.0
-      through: 2.3.8
-    dev: true
-
   /internal-slot/1.0.3:
     resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
     engines: {node: '>= 0.4'}
@@ -7429,11 +7279,6 @@ packages:
       number-is-nan: 1.0.1
     dev: false
 
-  /is-fullwidth-code-point/2.0.0:
-    resolution: {integrity: sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==}
-    engines: {node: '>=4'}
-    dev: true
-
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
@@ -7602,6 +7447,7 @@ packages:
 
   /is-utf8/0.2.1:
     resolution: {integrity: sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==}
+    dev: false
 
   /is-valid-glob/1.0.0:
     resolution: {integrity: sha512-AhiROmoEFDSsjx8hW+5sGwgKVIORcXnrlAx/R0ZSeaPw70Vw0CqkGBBhHGL58Uox2eXnU1AnvXJl1XlyedO5bA==}
@@ -7816,12 +7662,6 @@ packages:
   /jsonc-parser/3.0.0:
     resolution: {integrity: sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==}
 
-  /jsonfile/4.0.0:
-    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
-    optionalDependencies:
-      graceful-fs: 4.2.10
-    dev: true
-
   /jsonfile/6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:
@@ -8135,10 +7975,6 @@ packages:
     resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
     dev: true
 
-  /lodash.map/4.6.0:
-    resolution: {integrity: sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==}
-    dev: true
-
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
@@ -8163,11 +7999,6 @@ packages:
       wrap-ansi: 6.2.0
     dev: true
 
-  /longest/2.0.1:
-    resolution: {integrity: sha512-Ajzxb8CM6WAnFjgiloPsI3bF+WCxcvhdIG3KNA2KN962+tdBsHcuQ4k4qX/EcS/2CRkcc0iAkR956Nib6aXU/Q==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /loupe/2.3.4:
     resolution: {integrity: sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ==}
     dependencies:
@@ -8325,10 +8156,6 @@ packages:
   /merge-stream/2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
-  /merge/2.1.1:
-    resolution: {integrity: sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==}
-    dev: true
-
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -8380,11 +8207,6 @@ packages:
     dependencies:
       mime-db: 1.52.0
 
-  /mimic-fn/1.2.0:
-    resolution: {integrity: sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==}
-    engines: {node: '>=4'}
-    dev: true
-
   /mimic-fn/2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -8422,10 +8244,6 @@ packages:
       kind-of: 6.0.3
     dev: true
 
-  /minimist/1.2.5:
-    resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}
-    dev: true
-
   /minimist/1.2.6:
     resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
 
@@ -8532,10 +8350,6 @@ packages:
     engines: {node: '>= 0.10'}
     dev: false
 
-  /mute-stream/0.0.7:
-    resolution: {integrity: sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=}
-    dev: true
-
   /nan/2.16.0:
     resolution: {integrity: sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==}
     requiresBuild: true
@@ -8826,13 +8640,6 @@ packages:
     dependencies:
       wrappy: 1.0.2
 
-  /onetime/2.0.1:
-    resolution: {integrity: sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      mimic-fn: 1.2.0
-    dev: true
-
   /onetime/5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
@@ -8882,11 +8689,6 @@ packages:
       lcid: 1.0.0
     dev: false
 
-  /os-tmpdir/1.0.2:
-    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /p-defer/1.0.0:
     resolution: {integrity: sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==}
     engines: {node: '>=4'}
@@ -9018,6 +8820,7 @@ packages:
   /parse-passwd/1.0.0:
     resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /parse5/5.1.1:
     resolution: {integrity: sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==}
@@ -9714,6 +9517,7 @@ packages:
     dependencies:
       expand-tilde: 2.0.2
       global-modules: 1.0.0
+    dev: false
 
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
@@ -9759,14 +9563,6 @@ packages:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  /restore-cursor/2.0.0:
-    resolution: {integrity: sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==}
-    engines: {node: '>=4'}
-    dependencies:
-      onetime: 2.0.1
-      signal-exit: 3.0.7
-    dev: true
-
   /restore-cursor/3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
@@ -9875,23 +9671,11 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
-  /run-async/2.4.1:
-    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
-    engines: {node: '>=0.12.0'}
-    dev: true
-
   /run-parallel/1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
 
-  /rxjs/6.6.7:
-    resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
-    engines: {npm: '>=2.0.0'}
-    dependencies:
-      tslib: 1.14.1
-    dev: true
-
   /rxjs/7.5.5:
     resolution: {integrity: sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==}
     dependencies:
@@ -10279,14 +10063,6 @@ packages:
       strip-ansi: 3.0.1
     dev: false
 
-  /string-width/2.1.1:
-    resolution: {integrity: sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==}
-    engines: {node: '>=4'}
-    dependencies:
-      is-fullwidth-code-point: 2.0.0
-      strip-ansi: 4.0.0
-    dev: true
-
   /string-width/4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -10367,20 +10143,6 @@ packages:
       ansi-regex: 2.1.1
     dev: false
 
-  /strip-ansi/4.0.0:
-    resolution: {integrity: sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==}
-    engines: {node: '>=4'}
-    dependencies:
-      ansi-regex: 3.0.1
-    dev: true
-
-  /strip-ansi/5.2.0:
-    resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==}
-    engines: {node: '>=6'}
-    dependencies:
-      ansi-regex: 4.1.1
-    dev: true
-
   /strip-ansi/6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -10429,11 +10191,6 @@ packages:
     dependencies:
       min-indent: 1.0.1
 
-  /strip-json-comments/3.0.1:
-    resolution: {integrity: sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==}
-    engines: {node: '>=8'}
-    dev: true
-
   /strip-json-comments/3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -10594,13 +10351,6 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
-  /tmp/0.0.33:
-    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
-    engines: {node: '>=0.6.0'}
-    dependencies:
-      os-tmpdir: 1.0.2
-    dev: true
-
   /to-absolute-glob/2.0.2:
     resolution: {integrity: sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=}
     engines: {node: '>=0.10.0'}
@@ -10748,6 +10498,7 @@ packages:
 
   /tslib/1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+    dev: false
 
   /tslib/2.3.1:
     resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
@@ -11024,11 +10775,6 @@ packages:
     resolution: {integrity: sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==}
     dev: true
 
-  /universalify/0.1.2:
-    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
-    engines: {node: '>= 4.0.0'}
-    dev: true
-
   /universalify/2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}

From 920f1fc5ee2dba7572f90f2edaf1c577208fb3b2 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Tue, 28 Jun 2022 21:17:41 +0800
Subject: [PATCH 43/48] fix(components): [color-picker] can't select predefine
 value (#8205)

---
 .../components/color-picker/src/index.vue     | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/components/color-picker/src/index.vue b/packages/components/color-picker/src/index.vue
index 449b50603b166..b4eaed9bcadd9 100644
--- a/packages/components/color-picker/src/index.vue
+++ b/packages/components/color-picker/src/index.vue
@@ -67,7 +67,7 @@
         :aria-label="buttonAriaLabel"
         :aria-labelledby="buttonAriaLabelledby"
         :aria-description="
-          t('el.colorpicker.description', { color: modelValue })
+          t('el.colorpicker.description', { color: modelValue || '' })
         "
         :tabindex="tabindex"
         @keydown.enter="handleTrigger"
@@ -193,9 +193,9 @@ export default defineComponent({
       }
     )
 
-    const hue = ref(null)
-    const svPanel = ref(null)
-    const alpha = ref(null)
+    const hue = ref<InstanceType<typeof HueSlider>>()
+    const svPanel = ref<InstanceType<typeof SvPanel>>()
+    const alpha = ref<InstanceType<typeof AlphaSlider>>()
     const popper = ref(null)
     // active-change is used to prevent modelValue changes from triggering.
     let shouldActiveChange = true
@@ -203,10 +203,11 @@ export default defineComponent({
     const color = reactive(
       new Color({
         enableAlpha: props.showAlpha,
-        format: props.colorFormat,
+        format: props.colorFormat || '',
         value: props.modelValue,
       })
     )
+    type ColorType = typeof color
     const showPicker = ref(false)
     const showPanelColor = ref(false)
     const customInput = ref('')
@@ -264,7 +265,7 @@ export default defineComponent({
     )
 
     // methods
-    function displayedRgb(color, showAlpha) {
+    function displayedRgb(color: ColorType, showAlpha: boolean) {
       if (!(color instanceof Color)) {
         throw new TypeError('color should be instance of _color Class')
       }
@@ -275,7 +276,7 @@ export default defineComponent({
         : `rgb(${r}, ${g}, ${b})`
     }
 
-    function setShowPicker(value) {
+    function setShowPicker(value: boolean) {
       showPicker.value = value
     }
 
@@ -291,7 +292,10 @@ export default defineComponent({
         if (props.modelValue) {
           color.fromString(props.modelValue)
         } else {
-          showPanelColor.value = false
+          color.value = ''
+          nextTick(() => {
+            showPanelColor.value = false
+          })
         }
       })
     }
@@ -315,7 +319,7 @@ export default defineComponent({
       nextTick(() => {
         const newColor = new Color({
           enableAlpha: props.showAlpha,
-          format: props.colorFormat,
+          format: props.colorFormat || '',
           value: props.modelValue,
         })
         if (!color.compare(newColor)) {

From 2d8a9e4256385573e10357d19d0a83e07e30c24a Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Tue, 28 Jun 2022 22:57:18 +0800
Subject: [PATCH 44/48] fix(components): [radio] Divide attrs into label and
 input (#8476)

* fix(components): [radio] the id attribute acts on the input

* fix(components): [radio] labelAttrs save listeners

* fix(components): [radio] the id attribute acts on the input
---
 .../components/radio/__tests__/radio.test.tsx | 50 +++++++++++++++++++
 packages/components/radio/src/radio.vue       | 20 +++++++-
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/packages/components/radio/__tests__/radio.test.tsx b/packages/components/radio/__tests__/radio.test.tsx
index 04a4a93e9694a..a7364fb7feccf 100644
--- a/packages/components/radio/__tests__/radio.test.tsx
+++ b/packages/components/radio/__tests__/radio.test.tsx
@@ -373,4 +373,54 @@ describe('Radio Button', () => {
       expect(radioGroup2.attributes()['aria-labelledby']).toBeFalsy()
     })
   })
+
+  describe('laebl for', () => {
+    test('label and radio', async () => {
+      const radio = ref('')
+      const forId = ref('radio1121')
+      const wrapper = mount(() => (
+        <>
+          <label for={forId.value}>click here</label>
+          <Radio v-model={radio.value} label="Foo" id="radio1121" />
+        </>
+      ))
+      await nextTick()
+      const label = wrapper.find('label')
+      label.trigger('click')
+      expect(radio.value).toBe('Foo')
+      // no for
+      radio.value = ''
+      forId.value = undefined
+      await nextTick()
+      label.trigger('click')
+      expect(radio.value).toBe('')
+    })
+
+    test('label and radioGroup', async () => {
+      const compList = [Radio]
+      compList.forEach(async (comp) => {
+        const radio = ref('')
+        const forId = ref('radio1121')
+        const wrapper = mount(() => (
+          <>
+            <label for={forId.value}>click here</label>
+            <RadioGroup v-model={radio.value}>
+              <comp label="Foo" id="radio1121" />
+              <comp label="Bar" id="radio1122" />
+            </RadioGroup>
+          </>
+        ))
+        await nextTick()
+        const label = wrapper.find('label')
+        label.trigger('click')
+        expect(radio.value).toBe('Foo')
+        // no for
+        radio.value = ''
+        forId.value = undefined
+        await nextTick()
+        label.trigger('click')
+        expect(radio.value).toBe('')
+      })
+    })
+  })
 })
diff --git a/packages/components/radio/src/radio.vue b/packages/components/radio/src/radio.vue
index 9a1368114e10f..25cc895f44fca 100644
--- a/packages/components/radio/src/radio.vue
+++ b/packages/components/radio/src/radio.vue
@@ -7,7 +7,10 @@
       ns.is('bordered', border),
       ns.is('checked', modelValue === label),
       ns.m(size),
+      rawAttrs.class,
     ]"
+    :style="containerStyle"
+    v-bind="labelListieners"
   >
     <span
       :class="[
@@ -24,6 +27,7 @@
         :name="name || radioGroup?.name"
         :disabled="disabled"
         type="radio"
+        v-bind="inputAttrs"
         @focus="focus = true"
         @blur="focus = false"
         @change="handleChange"
@@ -39,17 +43,29 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick } from 'vue'
-import { useNamespace } from '@element-plus/hooks'
+import { computed, nextTick, useAttrs as useRawAttrs } from 'vue'
+import { useAttrs, useNamespace } from '@element-plus/hooks'
 import { radioEmits, radioProps } from './radio'
 import { useRadio } from './use-radio'
+import type { StyleValue } from 'vue'
 
 defineOptions({
   name: 'ElRadio',
+  inheritAttrs: false,
 })
 
 const props = defineProps(radioProps)
 const emit = defineEmits(radioEmits)
+const rawAttrs = useRawAttrs()
+const containerStyle = computed<StyleValue>(() => rawAttrs.style as StyleValue)
+
+const inputAttrs = useAttrs({ excludeListeners: true })
+
+const labelListieners = useAttrs({
+  excludeKeys: computed<string[]>(() => {
+    return Object.keys(inputAttrs.value)
+  }),
+})
 
 const ns = useNamespace('radio')
 const { radioRef, radioGroup, focus, size, disabled, modelValue } = useRadio(

From 08e02042b75067941ec8b3d0028480dc541604ee Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Wed, 29 Jun 2022 09:11:40 +0800
Subject: [PATCH 45/48] fix(components): [tabs] name is number 0 become a
 string (#8469)

---
 .../components/tabs/__tests__/tabs.test.ts    | 36 +++++++++++++++++++
 packages/components/tabs/src/tab-nav.tsx      |  2 +-
 packages/components/tabs/src/tab-pane.ts      |  1 -
 packages/components/tabs/src/tab-pane.vue     |  4 +--
 packages/components/tabs/src/tabs.tsx         | 13 +++----
 5 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/packages/components/tabs/__tests__/tabs.test.ts b/packages/components/tabs/__tests__/tabs.test.ts
index 41f8b53534c13..38fc0072da869 100644
--- a/packages/components/tabs/__tests__/tabs.test.ts
+++ b/packages/components/tabs/__tests__/tabs.test.ts
@@ -729,4 +729,40 @@ describe('Tabs.vue', () => {
     mockComputedStyle.mockRestore()
     wrapper.unmount()
   })
+
+  test('value type', async () => {
+    const wrapper = mount({
+      components: {
+        'el-tabs': Tabs,
+        'el-tab-pane': TabPane,
+      },
+      data() {
+        return {
+          activeName: 0,
+        }
+      },
+      methods: {
+        handleClick(tab) {
+          this.activeName = tab.paneName
+        },
+      },
+      template: `
+        <el-tabs :active-name="activeName" @tab-click="handleClick">
+          <el-tab-pane :name="0" label="label-1">A</el-tab-pane>
+          <el-tab-pane :name="1" label="label-2">B</el-tab-pane>
+          <el-tab-pane :name="2" label="label-3" ref="pane-click">C</el-tab-pane>
+          <el-tab-pane :name="3" label="label-4">D</el-tab-pane>
+        </el-tabs>
+      `,
+    })
+
+    const navWrapper = wrapper.findComponent(TabNav)
+    await nextTick()
+
+    const navItemsWrapper = navWrapper.findAll('.el-tabs__item')
+    ;[1, 0, 2, 0, 3, 0, 1].forEach((val) => {
+      navItemsWrapper[val].trigger('click')
+      expect(wrapper.vm.activeName).toEqual(val)
+    })
+  })
 })
diff --git a/packages/components/tabs/src/tab-nav.tsx b/packages/components/tabs/src/tab-nav.tsx
index 9333c4d98f945..400f8d32d1a95 100644
--- a/packages/components/tabs/src/tab-nav.tsx
+++ b/packages/components/tabs/src/tab-nav.tsx
@@ -308,7 +308,7 @@ const TabNav = defineComponent({
         : null
 
       const tabs = props.panes.map((pane, index) => {
-        const tabName = pane.props.name || pane.index || `${index}`
+        const tabName = pane.props.name ?? pane.index ?? `${index}`
         const closable: boolean = pane.isClosable || props.editable
         pane.index = `${index}`
 
diff --git a/packages/components/tabs/src/tab-pane.ts b/packages/components/tabs/src/tab-pane.ts
index 4e0507306e61b..7c3781ceed3ee 100644
--- a/packages/components/tabs/src/tab-pane.ts
+++ b/packages/components/tabs/src/tab-pane.ts
@@ -9,7 +9,6 @@ export const tabPaneProps = buildProps({
   },
   name: {
     type: [String, Number],
-    default: '',
   },
   closable: Boolean,
   disabled: Boolean,
diff --git a/packages/components/tabs/src/tab-pane.vue b/packages/components/tabs/src/tab-pane.vue
index 20d7b141d7219..751b0408652ea 100644
--- a/packages/components/tabs/src/tab-pane.vue
+++ b/packages/components/tabs/src/tab-pane.vue
@@ -47,10 +47,10 @@ const ns = useNamespace('tab-pane')
 const index = ref<string>()
 const isClosable = computed(() => props.closable || tabsRoot.props.closable)
 const active = eagerComputed(
-  () => tabsRoot.currentName.value === (props.name || index.value)
+  () => tabsRoot.currentName.value === (props.name ?? index.value)
 )
 const loaded = ref(active.value)
-const paneName = computed(() => props.name || index.value)
+const paneName = computed(() => props.name ?? index.value)
 const shouldBeRender = eagerComputed(
   () => !props.lazy || loaded.value || active.value
 )
diff --git a/packages/components/tabs/src/tabs.tsx b/packages/components/tabs/src/tabs.tsx
index f151e55b410b1..f19db4524330c 100644
--- a/packages/components/tabs/src/tabs.tsx
+++ b/packages/components/tabs/src/tabs.tsx
@@ -12,6 +12,7 @@ import {
   definePropType,
   isNumber,
   isString,
+  isUndefined,
 } from '@element-plus/utils'
 import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import ElIcon from '@element-plus/components/icon'
@@ -35,13 +36,11 @@ export const tabsProps = buildProps({
   },
   activeName: {
     type: [String, Number],
-    default: '',
   },
   closable: Boolean,
   addable: Boolean,
   modelValue: {
     type: [String, Number],
-    default: '',
   },
   editable: Boolean,
   tabPosition: {
@@ -87,7 +86,9 @@ export default defineComponent({
 
     const nav$ = ref<TabNavInstance>()
     const panes = reactive<Record<number, TabsPaneContext>>({})
-    const currentName = ref(props.modelValue || props.activeName || '0')
+    const currentName = ref<TabPanelName>(
+      props.modelValue ?? props.activeName ?? '0'
+    )
 
     const changeCurrentName = (value: TabPanelName) => {
       currentName.value = value
@@ -95,9 +96,9 @@ export default defineComponent({
       emit('tab-change', value)
     }
 
-    const setCurrentName = async (value: TabPanelName) => {
+    const setCurrentName = async (value?: TabPanelName) => {
       // should do nothing.
-      if (currentName.value === value) return
+      if (currentName.value === value || isUndefined(value)) return
 
       try {
         const canLeave = await props.beforeLeave?.(value, currentName.value)
@@ -123,7 +124,7 @@ export default defineComponent({
     }
 
     const handleTabRemove = (pane: TabsPaneContext, ev: Event) => {
-      if (pane.props.disabled) return
+      if (pane.props.disabled || isUndefined(pane.props.name)) return
       ev.stopPropagation()
       emit('edit', pane.props.name, 'remove')
       emit('tab-remove', pane.props.name)

From dc5ea2319dfb83bfd9ee9abe3b1846c3908a3fae Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Thu, 30 Jun 2022 22:42:53 +0800
Subject: [PATCH 46/48] docs(components): [tree] custom node content button
 margin (#8539)

---
 docs/examples/tree/customized-node.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/examples/tree/customized-node.vue b/docs/examples/tree/customized-node.vue
index 14f4f8f32d590..645042565c977 100644
--- a/docs/examples/tree/customized-node.vue
+++ b/docs/examples/tree/customized-node.vue
@@ -22,7 +22,7 @@
           <span>{{ node.label }}</span>
           <span>
             <a @click="append(data)"> Append </a>
-            <a @click="remove(node, data)"> Delete </a>
+            <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a>
           </span>
         </span>
       </template>
@@ -89,6 +89,7 @@ const renderContent = (
       h(
         'a',
         {
+          style: 'margin-left: 8px',
           onClick: () => remove(node, data),
         },
         'Delete'

From 77fa19b45a1f4be173204323b79dbff633cf4aff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Thu, 30 Jun 2022 22:43:55 +0800
Subject: [PATCH 47/48] fix(docs): config-provider example (#8534)

---
 docs/components.d.ts                    |  2 +-
 docs/examples/config-provider/usage.vue | 37 ++++++++-----------------
 2 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/docs/components.d.ts b/docs/components.d.ts
index 7ac5da590a881..ef28b33d287ca 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -1,6 +1,6 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/vue-next/pull/3399
+// Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
diff --git a/docs/examples/config-provider/usage.vue b/docs/examples/config-provider/usage.vue
index 281824ee8dc00..9fe5e75fb63a1 100644
--- a/docs/examples/config-provider/usage.vue
+++ b/docs/examples/config-provider/usage.vue
@@ -1,37 +1,24 @@
 <template>
   <div>
-    <el-button m="b-2" @click="toggle"> Switch Lang </el-button>
+    <el-button mb-2 @click="toggle">Switch Language</el-button>
     <br />
-    <el-config-provider :locale="locale2">
-      <el-color-picker :model-value="''" style="vertical-align: middle" />
+
+    <el-config-provider :locale="locale">
+      <el-table mb-1 :data="[]" />
+      <el-pagination :total="100" />
     </el-config-provider>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+
+const language = ref('zh-cn')
+const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
 
-const locale1 = ref({
-  name: 'zh-cn',
-  el: {
-    colorpicker: {
-      confirm: '确定',
-      clear: '清空',
-    },
-  },
-})
-const locale2 = ref({
-  name: 'en',
-  el: {
-    colorpicker: {
-      confirm: 'Confirm',
-      clear: 'Clear',
-    },
-  },
-})
 const toggle = () => {
-  const temp = locale1.value
-  locale1.value = locale2.value
-  locale2.value = temp
+  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
 }
 </script>

From 3a436a02d050484bea1db762c520b31c9dccef40 Mon Sep 17 00:00:00 2001
From: Element <wallement@gmail.com>
Date: Fri, 1 Jul 2022 13:12:54 +0800
Subject: [PATCH 48/48] chore: update changelog 2.2.7 (#8572)

---
 CHANGELOG.en-US.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 1763129b7e564..14b544aca3f33 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,53 @@
 ## Changelog
 
+### 2.2.7
+
+_2022-07-01_
+
+#### Features
+
+- Components close all messages of the specified type (#8415 by @Lete114)
+- Components [message-box] add autofocus attribute (#8445 by @YunYouJun)
+- Components [autocomplete] expose blur event (#8364 by @tolking)
+
+#### Bug fixes
+
+- Components [tabs] fix change acitve cannot scroll in view (#8332 by @xiahouwei)
+- Components [select] collapse-tags-tooltip drop first item (#8344 by @chenxch)
+- Components [message-box] the focus error when used ElMessageBox (#8336 by @LinZhanMing)
+- Components [autocomplete] the popup still appears after select (#8350 by @tolking)
+- Components [tooltip] not disappear when <keep-alive> change (#8301 by @sunnyCoCosun)
+- Components [space] missing empty string size (#8039 by @HeftyKoo)
+- Components [message]: offset (#8379 by @sxzz)
+- Components [select] multiple init height (#8423 by @chenxch)
+- Theme-chalk [pagination] style if selected value is disabled (#8447 by @ryuhangyeong)
+- Components [select] fix select dropdown width (#8396 by @Cheerwhy) (#8435)
+- Components [select-v2] fix select-v2 dropdown width (#8442 by @Cheerwhy)
+- Components [popover] fix dark mode background color (#8133 by @holazz)
+- Components [color-picker] can't select predefine value (#8205 by @btea)
+- Components [radio] Divide attrs into label and input (#8476 by @chenxch)
+- Components [tabs] name is number 0 become a string (#8469 by @chenxch)
+- Style(components): [transfer] modify import order (#8345 by @holazz)
+
+#### Refactors
+
+- Components [image-viewer] simplify emits type checking (#8329 by @ryuhangyeong)
+- Components [dialog] using addUnit in the use-dialog (#8304 by @ryuhangyeong)
+- Components [switch] deprecate value prop (#8335 by @sxzz)
+- Components [upload] use JSX in Unit test (#8268 by @sxzz)
+- Components [descriptions] use JSX in Unit test (#8351 by @ryuhangyeong)
+- Components [message] fix typings and switch to script setup (#8378 by @sxzz)
+- Components [switch] switch to script-setup syntax (#7792 by @chenxch)
+- Components [space] refactor (#8386 by @holazz)
+- Components [slider] use JSX in Unit test (#8225 by @holazz)
+- Components [popover] switch to script-setup syntax (#8273 by @holazz)
+- Add ts-nocheck and check all files (#8401 by @sxzz)
+- Components [space] use JSX in Unit test (#8433 by @holazz)
+- Components [popconfirm] changed button type (#8436 by @ryuhangyeong)
+- Components [drawer] replace with addUnit (#8463 by @ryuhangyeong)
+- Components [only-child] simplify conditions (#8480 by @ryuhangyeong)
+- Components [transfer] switch to script-setup syntax (#8343 by @holazz)
+
 ### 2.2.6
 
 _2022-06-17_