chore: add eslint rule sort imports (#6823)

docs/.vitepress/build/crowdin-credentials.ts

@@ -2,7 +2,7 @@ import path from 'path'
 import fs from 'fs/promises'
 import chalk from 'chalk'
 import consola from 'consola'
-import { errorAndExit, docRoot } from '@element-plus/build'
+import { docRoot, errorAndExit } from '@element-plus/build'
 
 const credentialPlaceholder = 'API_TOKEN_PLACEHOLDER'
 

docs/.vitepress/build/crowdin-generate.ts

@@ -2,7 +2,7 @@ import fs from 'fs'
 import path from 'path'
 import chalk from 'chalk'
 import consola from 'consola'
-import { errorAndExit, docRoot } from '@element-plus/build'
+import { docRoot, errorAndExit } from '@element-plus/build'
 
 // NB: this file is only for generating files that enables developers to develop the website.
 const componentLocaleRoot = path.resolve(docRoot, '.vitepress/crowdin')

docs/.vitepress/theme/index.ts

@@ -1,6 +1,6 @@
 import ElementPlus from 'element-plus'
 
-import VPApp, { globals, NotFound } from '../vitepress'
+import VPApp, { NotFound, globals } from '../vitepress'
 import { define } from '../utils/types'
 import 'uno.css'
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useData } from 'vitepress'
 import { useLang } from '../../composables/lang'
 import localeData from '../../../i18n/component/last-update-at.json'

docs/.vitepress/vitepress/components/globals/parallax-home.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
-import { useParallax, useThrottleFn, useEventListener } from '@vueuse/core'
+import { computed, reactive, ref } from 'vue'
+import { useEventListener, useParallax, useThrottleFn } from '@vueuse/core'
 import { useLang } from '../../composables/lang'
 import homeLocale from '../../../i18n/pages/home.json'
 import HomeSponsors from '../home/home-sponsors.vue'

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import '@docsearch/css'
-import { watch, onMounted, getCurrentInstance } from 'vue'
-import { useRouter, useRoute } from 'vitepress'
+import { getCurrentInstance, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vitepress'
 import docsearch from '@docsearch/js'
 import { isClient } from '@vueuse/core'
 import { useLang } from '../../composables/lang'

docs/.vitepress/vitepress/components/vp-app.vue

@@ -3,7 +3,7 @@ import { onMounted } from 'vue'
 import { ElMessageBox } from 'element-plus'
 import nprogress from 'nprogress'
 import dayjs from 'dayjs'
-import { useStorage, useToggle, isClient } from '@vueuse/core'
+import { isClient, useStorage, useToggle } from '@vueuse/core'
 import { useSidebar } from '../composables/sidebar'
 import { useToggleWidgets } from '../composables/toggle-widgets'
 import { useLang } from '../composables/lang'

docs/.vitepress/vitepress/components/vp-content.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onUpdated, watch, ref, nextTick } from 'vue'
+import { computed, nextTick, onUpdated, ref, watch } from 'vue'
 import nprogress from 'nprogress'
 import { useData, useRoute } from 'vitepress'
 import { useSidebar } from '../composables/sidebar'

docs/.vitepress/vitepress/components/vp-demo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, toRef, getCurrentInstance } from 'vue'
-import { useClipboard, useToggle, isClient } from '@vueuse/core'
+import { computed, getCurrentInstance, toRef } from 'vue'
+import { isClient, useClipboard, useToggle } from '@vueuse/core'
 import { CaretTop } from '@element-plus/icons-vue'
 import { useLang } from '../composables/lang'
 import { useSourceCode } from '../composables/source-code'

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useData, inBrowser } from 'vitepress'
+import { inBrowser, useData } from 'vitepress'
 
 import { useFeatureFlag } from '../composables/feature-flag'
 import VPNavbarSearch from './navbar/vp-search.vue'

docs/.vitepress/vitepress/composables/back-top.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { isClient } from '@vueuse/core'
 import { throttleAndDebounce } from '../utils'
 

docs/.vitepress/vitepress/composables/edit-link.ts

@@ -3,7 +3,7 @@ import { useData } from 'vitepress'
 import { useLang } from '../composables/lang'
 import { useLocale } from '../composables/locale'
 import { defaultLang } from '../constant'
-import { createGitHubUrl, createCrowdinUrl } from '../utils'
+import { createCrowdinUrl, createGitHubUrl } from '../utils'
 import editLinkLocale from '../../i18n/component/edit-link.json'
 
 export function useEditLink() {

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

@@ -2,10 +2,10 @@ import { onUnmounted } from 'vue'
 import { isClient } from '@vueuse/core'
 import {
   addClass,
-  hasClass,
-  getStyle,
-  removeClass,
   getScrollBarWidth,
+  getStyle,
+  hasClass,
+  removeClass,
 } from '@element-plus/utils'
 
 export const useLockScreen = () => {

docs/.vitepress/vitepress/composables/page-nav.ts

@@ -1,12 +1,12 @@
 import { computed } from 'vue'
 import { useData } from 'vitepress'
 import {
-  isArray,
   ensureStartingSlash,
+  isArray,
   removeExtention as removeExtension,
 } from '../utils'
 import { useLang } from './lang'
-import { getSidebarConfig, getFlatSideBarLinks } from './sidebar'
+import { getFlatSideBarLinks, getSidebarConfig } from './sidebar'
 
 export function usePageNav() {
   const { page, theme } = useData()

docs/.vitepress/vitepress/composables/sidebar.ts

@@ -1,6 +1,6 @@
 import { computed } from 'vue'
-import { useRoute, useData } from 'vitepress'
-import { isArray, ensureStartingSlash, removeExtention } from '../utils'
+import { useData, useRoute } from 'vitepress'
+import { ensureStartingSlash, isArray, removeExtention } from '../utils'
 import { useLang } from './lang'
 
 export const useSidebar = () => {

docs/.vitepress/vitepress/composables/translation.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { useRouter, useRoute } from 'vitepress'
+import { useRoute, useRouter } from 'vitepress'
 import { useStorage } from '@vueuse/core'
 import { PREFERRED_LANG_KEY } from '../constant'
 

docs/.vitepress/vitepress/utils/colors.ts

@@ -1,4 +1,4 @@
-import { ref, getCurrentInstance } from 'vue'
+import { getCurrentInstance, ref } from 'vue'
 import { useClipboard } from '@vueuse/core'
 
 export const getColorValue = (type: string) => {

docs/.vitepress/vitepress/utils/index.ts

@@ -1,8 +1,8 @@
 import {
-  isActive,
-  normalize,
   endingSlashRE,
+  isActive,
   isExternal,
+  normalize,
 } from 'vitepress/dist/client/theme-default/utils'
 import { inBrowser } from 'vitepress'
 

docs/examples/button/basic.vue

@@ -39,11 +39,11 @@
 
 <script lang="ts" setup>
 import {
-  Search,
-  Edit,
   Check,
-  Message,
-  Star,
   Delete,
+  Edit,
+  Message,
+  Search,
+  Star,
 } from '@element-plus/icons-vue'
 </script>

docs/examples/button/group.vue

@@ -16,9 +16,9 @@
 <script setup lang="ts">
 import {
   ArrowLeft,
+  ArrowRight,
+  Delete,
   Edit,
   Share,
-  Delete,
-  ArrowRight,
 } from '@element-plus/icons-vue'
 </script>

docs/examples/button/icon.vue

@@ -10,5 +10,5 @@
   </div>
 </template>
 <script setup lang="ts">
-import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons-vue'
+import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
 </script>

docs/examples/container/example.vue

@@ -95,7 +95,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { Message, Menu as IconMenu, Setting } from '@element-plus/icons-vue'
+import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
 
 const item = {
   date: '2016-05-02',

docs/examples/date-picker/custom-prefix-icon.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, h } from 'vue'
+import { h, ref, shallowRef } from 'vue'
 
 const value1 = ref('')
 

docs/examples/descriptions/sizes.vue

@@ -97,11 +97,11 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import {
-  User,
   Iphone,
   Location,
-  Tickets,
   OfficeBuilding,
+  Tickets,
+  User,
 } from '@element-plus/icons-vue'
 
 const size = ref('')

docs/examples/dropdown/how-to-trigger.vue

@@ -63,8 +63,8 @@
 <script lang="ts" setup>
 import {
   ArrowDown,
-  CircleCheck,
   Check,
+  CircleCheck,
   CirclePlus,
   CirclePlusFilled,
   Plus,

docs/examples/form/custom-validation.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
 
 const ruleFormRef = ref<FormInstance>()

docs/examples/infinite-scroll/disable-loading.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 
 const count = ref(10)
 const loading = ref(false)

docs/examples/input/autocomplete-template.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { Edit } from '@element-plus/icons-vue'
 
 interface LinkItem {

docs/examples/input/autocomplete.vue

@@ -28,7 +28,7 @@
   </el-row>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 interface RestaurantItem {
   value: string

docs/examples/input/remote-search.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const state = ref('')
 

docs/examples/menu/collapse.vue

@@ -46,9 +46,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import {
-  Location,
   Document,
   Menu as IconMenu,
+  Location,
   Setting,
 } from '@element-plus/icons-vue'
 

docs/examples/menu/vertical.vue

@@ -86,9 +86,9 @@
 
 <script lang="ts" setup>
 import {
-  Location,
   Document,
   Menu as IconMenu,
+  Location,
   Setting,
 } from '@element-plus/icons-vue'
 const handleOpen = (key: string, keyPath: string[]) => {

docs/examples/message-box/alert.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElMessageBox, ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import type { Action } from 'element-plus'
 
 const open = () => {

docs/examples/message-box/centered-content.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElMessageBox, ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 const open = () => {
   ElMessageBox.confirm(

docs/examples/message-box/confirm.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElMessageBox, ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 const open = () => {
   ElMessageBox.confirm(

docs/examples/message-box/distinguishable-close-cancel.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElMessageBox, ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import type { Action } from 'element-plus'
 const open = () => {
   ElMessageBox.confirm(

docs/examples/message-box/draggable.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElMessageBox, ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 const open = () => {
   ElMessageBox.confirm(

docs/examples/message-box/prompt.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElMessageBox, ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 const open = () => {
   ElMessageBox.prompt('Please input your e-mail', 'Tip', {

docs/examples/progress/dashboard-progress-bar.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { Minus, Plus } from '@element-plus/icons-vue'
 
 const percentage = ref(10)

docs/examples/rate/more-icons.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { ChatRound, ChatLineRound, ChatDotRound } from '@element-plus/icons-vue'
+import { ChatDotRound, ChatLineRound, ChatRound } from '@element-plus/icons-vue'
 
 const value = ref()
 const icons = [ChatRound, ChatLineRound, ChatDotRound] // same as { 2: ChatRound, 4: { value: ChatLineRound, excluded: true }, 5: ChatDotRound }

docs/examples/select/remote-search.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 interface ListItem {
   value: string

docs/examples/slider/show-marks.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import type { CSSProperties } from 'vue'
 
 interface Mark {

docs/examples/steps/simple.vue

@@ -13,5 +13,5 @@
 </template>
 
 <script lang="ts" setup>
-import { Edit, UploadFilled, Picture } from '@element-plus/icons-vue'
+import { Edit, Picture, UploadFilled } from '@element-plus/icons-vue'
 </script>

docs/examples/steps/with-icon.vue

@@ -7,5 +7,5 @@
 </template>
 
 <script lang="ts" setup>
-import { Edit, Upload, Picture } from '@element-plus/icons-vue'
+import { Edit, Picture, Upload } from '@element-plus/icons-vue'
 </script>

docs/examples/table/custom-header.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 
 interface User {
   date: string

docs/examples/tag/editable.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick } from 'vue'
+import { nextTick, ref } from 'vue'
 import type { ElInput } from 'element-plus'
 
 const inputValue = ref('')

docs/examples/tooltip/virtual-trigger.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const visible = ref(false)
 const triggerRef = ref({

docs/examples/upload/basic.vue

@@ -22,7 +22,7 @@
 import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-import type { UploadUserFile, UploadProps } from 'element-plus'
+import type { UploadProps, UploadUserFile } from 'element-plus'
 
 const fileList = ref<UploadUserFile[]>([
   {

docs/examples/upload/custom-thumbnail.vue

@@ -37,7 +37,7 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { Plus, ZoomIn, Download, Delete } from '@element-plus/icons-vue'
+import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
 
 import type { UploadFile } from 'element-plus'
 

docs/examples/upload/file-list-with-thumbnail.vue

@@ -19,7 +19,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-import type { UploadUserFile, UploadProps } from 'element-plus'
+import type { UploadProps, UploadUserFile } from 'element-plus'
 
 const fileList = ref<UploadUserFile[]>([
   {

docs/examples/upload/limit-cover.vue

@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { genFileId } from 'element-plus'
-import type { UploadInstance, UploadRawFile, UploadProps } from 'element-plus'
+import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
 
 const upload = ref<UploadInstance>()
 

docs/unocss.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
+import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
 
 export default defineConfig({
   presets: [presetUno(), presetAttributify(), presetIcons()],

internal/build/gulpfile.ts

@@ -1,16 +1,16 @@
 import path from 'path'
-import { mkdir, copyFile } from 'fs/promises'
+import { copyFile, mkdir } from 'fs/promises'
 import { copy } from 'fs-extra'
-import { series, parallel } from 'gulp'
+import { parallel, series } from 'gulp'
 import {
-  run,
-  runTask,
-  withTaskName,
+  buildConfig,
   buildOutput,
   epOutput,
   epPackage,
   projRoot,
-  buildConfig,
+  run,
+  runTask,
+  withTaskName,
 } from './src'
 import type { TaskFunction } from 'gulp'
 import type { Module } from './src'

internal/build/src/tasks/full-bundle.ts

@@ -12,13 +12,13 @@ import { camelCase, upperFirst } from 'lodash'
 import { version } from '../../../../packages/element-plus/version'
 import { ElementPlusAlias } from '../plugins/element-plus-alias'
 import {
-  epRoot,
   epOutput,
-  localeRoot,
+  epRoot,
   formatBundleFilename,
   generateExternal,
-  writeBundles,
+  localeRoot,
   withTaskName,
+  writeBundles,
 } from '../utils'
 import { EP_BRAND_NAME } from '../constants'
 import { target } from '../build-info'

internal/build/src/tasks/helper.ts

@@ -1,6 +1,6 @@
 import path from 'path'
 import helper from 'components-helper'
-import { epPackage, epOutput, projRoot, getPackageManifest } from '../utils'
+import { epOutput, epPackage, getPackageManifest, projRoot } from '../utils'
 
 import type { TaskFunction } from 'gulp'
 import type { InstallOptions } from 'components-helper'

internal/build/src/tasks/modules.ts

@@ -8,10 +8,10 @@ import esbuild from 'rollup-plugin-esbuild'
 import glob from 'fast-glob'
 import {
   epRoot,
-  pkgRoot,
-  generateExternal,
-  writeBundles,
   excludeFiles,
+  generateExternal,
+  pkgRoot,
+  writeBundles,
 } from '../utils'
 import { ElementPlusAlias } from '../plugins/element-plus-alias'
 import { buildConfigEntries, target } from '../build-info'

internal/build/src/tasks/types-definitions.ts

@@ -9,10 +9,10 @@ import chalk from 'chalk'
 import {
   buildOutput,
   epRoot,
-  pkgRoot,
-  projRoot,
   excludeFiles,
   pathRewriter,
+  pkgRoot,
+  projRoot,
 } from '../utils'
 import typeSafe from '../type-safe.json'
 

internal/eslint-config/index.js

@@ -160,6 +160,17 @@ module.exports = defineConfig({
     'no-with': 'error',
     'no-void': 'error',
 
+    'sort-imports': [
+      'warn',
+      {
+        ignoreCase: false,
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+        allowSeparatedGroups: false,
+      },
+    ],
+
     // stylistic-issues
     'prefer-exponentiation-operator': 'error',
 

packages/components/affix/src/affix.vue

@@ -9,8 +9,8 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import {
-  useEventListener,
   useElementBounding,
+  useEventListener,
   useWindowSize,
 } from '@vueuse/core'
 import { getScrollContainer, throwError } from '@element-plus/utils'

packages/components/alert/src/alert.vue

@@ -44,7 +44,7 @@ import { computed, ref, useSlots } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import { TypeComponents, TypeComponentsMap } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
-import { alertProps, alertEmits } from './alert'
+import { alertEmits, alertProps } from './alert'
 
 const { Close } = TypeComponents
 

packages/components/autocomplete/src/autocomplete.ts

@@ -1,9 +1,9 @@
 import { NOOP } from '@vue/shared'
 import {
-  isString,
-  isObject,
   buildProps,
   definePropType,
+  isObject,
+  isString,
 } from '@element-plus/utils'
 import { useTooltipContentProps } from '@element-plus/components/tooltip'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'

packages/components/autocomplete/src/autocomplete.vue

@@ -90,10 +90,10 @@
 
 <script lang="ts" setup>
 import {
-  ref,
   computed,
-  onMounted,
   nextTick,
+  onMounted,
+  ref,
   useAttrs as useCompAttrs,
 } from 'vue'
 import { isPromise } from '@vue/shared'
@@ -108,7 +108,7 @@ import ElTooltip from '@element-plus/components/tooltip'
 import { useDeprecateAppendToBody } from '@element-plus/components/popper'
 import ElIcon from '@element-plus/components/icon'
 import { Loading } from '@element-plus/icons-vue'
-import { autocompleteProps, autocompleteEmits } from './autocomplete'
+import { autocompleteEmits, autocompleteProps } from './autocomplete'
 import type { StyleValue } from 'vue'
 import type { TooltipInstance } from '@element-plus/components/tooltip'
 import type { InputInstance } from '@element-plus/components/input'

packages/components/avatar/__tests__/avatar.spec.tsx

@@ -1,9 +1,9 @@
-import { nextTick, markRaw } from 'vue'
+import { markRaw, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { User } from '@element-plus/icons-vue'
 import {
-  IMAGE_SUCCESS,
   IMAGE_FAIL,
+  IMAGE_SUCCESS,
   mockImageEvent,
 } from '@element-plus/test-utils'
 

packages/components/avatar/src/avatar.vue

@@ -19,7 +19,7 @@
 import { computed, ref, watch } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import { useNamespace } from '@element-plus/hooks'
-import { isNumber, isString, addUnit } from '@element-plus/utils'
+import { addUnit, isNumber, isString } from '@element-plus/utils'
 import { avatarEmits, avatarProps } from './avatar'
 
 import type { CSSProperties } from 'vue'

packages/components/backtop/src/backtop.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, shallowRef } from 'vue'
+import { computed, onMounted, ref, shallowRef } from 'vue'
 import { useEventListener, useThrottleFn } from '@vueuse/core'
 import { ElIcon } from '@element-plus/components/icon'
 import { easeInOutCubic, throwError } from '@element-plus/utils'

packages/components/breadcrumb/src/breadcrumb-item.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, ref, getCurrentInstance } from 'vue'
+import { getCurrentInstance, inject, ref } from 'vue'
 import ElIcon from '@element-plus/components/icon'
 import { breadcrumbKey } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'

packages/components/breadcrumb/src/breadcrumb.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { provide, ref, onMounted } from 'vue'
+import { onMounted, provide, ref } from 'vue'
 import { breadcrumbKey } from '@element-plus/tokens'
 
 import { useNamespace } from '@element-plus/hooks'

packages/components/button/__tests__/button.spec.tsx

@@ -1,4 +1,4 @@
-import { ref, nextTick, defineComponent, markRaw } from 'vue'
+import { defineComponent, markRaw, nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { Loading, Search } from '@element-plus/icons-vue'
 import Button from '../src/button.vue'

packages/components/button/src/button.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, Text, ref, useSlots } from 'vue'
+import { Text, computed, inject, ref, useSlots } from 'vue'
 import { TinyColor } from '@ctrl/tinycolor'
 import { ElIcon } from '@element-plus/components/icon'
 import {

packages/components/calendar/src/calendar.vue

@@ -44,13 +44,13 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import dayjs from 'dayjs'
 import { ElButton, ElButtonGroup } from '@element-plus/components/button'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { debugWarn } from '@element-plus/utils'
 import DateTable from './date-table.vue'
-import { calendarProps, calendarEmits } from './calendar'
+import { calendarEmits, calendarProps } from './calendar'
 
 import type { ComputedRef } from 'vue'
 import type { Dayjs } from 'dayjs'

packages/components/calendar/src/date-table.vue

@@ -40,7 +40,7 @@ import dayjs from 'dayjs'
 import localeData from 'dayjs/plugin/localeData.js'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { rangeArr } from '@element-plus/components/time-picker'
-import { dateTableProps, dateTableEmits } from './date-table'
+import { dateTableEmits, dateTableProps } from './date-table'
 import type { Dayjs } from 'dayjs'
 dayjs.extend(localeData)
 

packages/components/carousel/src/carousel-item.vue

@@ -19,13 +19,13 @@
 
 <script lang="ts" setup>
 import {
-  onMounted,
-  inject,
   computed,
   getCurrentInstance,
+  inject,
+  onMounted,
   onUnmounted,
-  ref,
   reactive,
+  ref,
   unref,
 } from 'vue'
 import { debugWarn, isUndefined } from '@element-plus/utils'

packages/components/carousel/src/carousel.vue

@@ -63,15 +63,15 @@
 
 <script lang="ts" setup>
 import {
-  ref,
   computed,
-  provide,
-  onMounted,
-  onBeforeUnmount,
-  watch,
   nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
   shallowRef,
   unref,
+  watch,
 } from 'vue'
 import { throttle } from 'lodash-unified'
 import { useResizeObserver } from '@vueuse/core'
@@ -80,7 +80,7 @@ import { ElIcon } from '@element-plus/components/icon'
 import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 import { useNamespace } from '@element-plus/hooks'
 import { carouselContextKey } from '@element-plus/tokens'
-import { carouselProps, carouselEmits } from './carousel'
+import { carouselEmits, carouselProps } from './carousel'
 import type { CarouselItemContext } from '@element-plus/tokens'
 
 defineOptions({

packages/components/cascader-panel/src/config.ts

@@ -4,10 +4,10 @@ import { ExpandTrigger } from './node'
 
 import type { PropType } from 'vue'
 import type {
-  CascaderValue,
-  CascaderOption,
   CascaderConfig,
+  CascaderOption,
   CascaderProps,
+  CascaderValue,
 } from './node'
 
 export const CommonProps = {

packages/components/cascader-panel/src/index.vue

@@ -25,20 +25,20 @@ import {
   ref,
   watch,
 } from 'vue'
-import { isEqual, flattenDeep } from 'lodash-unified'
+import { flattenDeep, isEqual } from 'lodash-unified'
 import { isClient } from '@vueuse/core'
 import {
+  castArray,
   focusNode,
   getSibling,
   isEmpty,
-  unique,
-  castArray,
   scrollIntoView,
+  unique,
 } from '@element-plus/utils'
 import {
+  CHANGE_EVENT,
   EVENT_CODE,
   UPDATE_MODEL_EVENT,
-  CHANGE_EVENT,
 } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
 
@@ -52,11 +52,11 @@ import { CASCADER_PANEL_INJECTION_KEY } from './types'
 import type { PropType } from 'vue'
 import type { Nullable } from '@element-plus/utils'
 import type {
-  CascaderValue,
+  default as CascaderNode,
   CascaderNodeValue,
   CascaderOption,
+  CascaderValue,
   RenderLabel,
-  default as CascaderNode,
 } from './node'
 
 import type { ElCascaderPanelContext } from './types'

packages/components/cascader-panel/src/node.ts

@@ -1,5 +1,5 @@
 import { isFunction } from '@vue/shared'
-import { capitalize, isUndefined, isEmpty } from '@element-plus/utils'
+import { capitalize, isEmpty, isUndefined } from '@element-plus/utils'
 import type { VNode } from 'vue'
 
 export type CascaderNodeValue = string | number

packages/components/cascader-panel/src/node.vue

@@ -66,7 +66,7 @@ import ElCheckbox from '@element-plus/components/checkbox'
 import ElRadio from '@element-plus/components/radio'
 import ElIcon from '@element-plus/components/icon'
 import { useNamespace } from '@element-plus/hooks'
-import { Check, Loading, ArrowRight } from '@element-plus/icons-vue'
+import { ArrowRight, Check, Loading } from '@element-plus/icons-vue'
 import NodeContent from './node-content'
 import { CASCADER_PANEL_INJECTION_KEY } from './types'
 import type { default as CascaderNode } from './node'

packages/components/cascader-panel/src/store.ts

@@ -3,10 +3,10 @@ import Node from './node'
 
 import type { Nullable } from '@element-plus/utils'
 import type {
-  CascaderNodeValue,
-  CascaderNodePathValue,
-  CascaderOption,
   CascaderConfig,
+  CascaderNodePathValue,
+  CascaderNodeValue,
+  CascaderOption,
 } from './node'
 
 const flatNodes = (nodes: Node[], leafOnly: boolean) => {

packages/components/cascader-panel/src/types.ts

@@ -1,4 +1,4 @@
-import type { VNode, InjectionKey } from 'vue'
+import type { InjectionKey, VNode } from 'vue'
 import type { Nullable } from '@element-plus/utils'
 import type { default as CascaderNode } from './node'
 

packages/components/cascader/src/index.vue

@@ -196,8 +196,8 @@ import {
   defineComponent,
   inject,
   nextTick,
-  onMounted,
   onBeforeUnmount,
+  onMounted,
   ref,
   watch,
 } from 'vue'
@@ -219,30 +219,30 @@ import ElIcon from '@element-plus/components/icon'
 
 import { formContextKey, formItemContextKey } from '@element-plus/tokens'
 import { ClickOutside as Clickoutside } from '@element-plus/directives'
-import { useLocale, useSize, useNamespace } from '@element-plus/hooks'
+import { useLocale, useNamespace, useSize } from '@element-plus/hooks'
 
 import {
+  addResizeListener,
+  debugWarn,
   focusNode,
   getSibling,
-  addResizeListener,
-  removeResizeListener,
-  isValidComponentSize,
   isKorean,
-  debugWarn,
+  isValidComponentSize,
+  removeResizeListener,
 } from '@element-plus/utils'
 import {
+  CHANGE_EVENT,
   EVENT_CODE,
   UPDATE_MODEL_EVENT,
-  CHANGE_EVENT,
 } from '@element-plus/constants'
-import { CircleClose, Check, ArrowDown } from '@element-plus/icons-vue'
+import { ArrowDown, Check, CircleClose } from '@element-plus/icons-vue'
 
 import type { Options } from '@element-plus/components/popper'
 import type { ComputedRef, PropType, Ref } from 'vue'
 import type { FormContext, FormItemContext } from '@element-plus/tokens'
 import type {
-  CascaderValue,
   CascaderNode,
+  CascaderValue,
   Tag,
 } from '@element-plus/components/cascader-panel'
 import type { ComponentSize } from '@element-plus/constants'

packages/components/check-tag/src/check-tag.ts

@@ -1,4 +1,4 @@
-import { isBoolean, buildProps } from '@element-plus/utils'
+import { buildProps, isBoolean } from '@element-plus/utils'
 import type CheckTag from './check-tag.vue'
 import type { ExtractPropTypes } from 'vue'
 

packages/components/check-tag/src/check-tag.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { useNamespace } from '@element-plus/hooks'
-import { checkTagProps, checkTagEmits } from './check-tag'
+import { checkTagEmits, checkTagProps } from './check-tag'
 
 defineOptions({
   name: 'ElCheckTag',

packages/components/checkbox/src/checkbox-button.vue

@@ -49,7 +49,7 @@
   </label>
 </template>
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
 import { useCheckbox, useCheckboxGroup, useCheckboxProps } from './useCheckbox'

packages/components/checkbox/src/checkbox-group.vue

@@ -1,17 +1,17 @@
 <script lang="ts">
 import {
-  defineComponent,
   computed,
-  watch,
-  provide,
-  nextTick,
-  toRefs,
+  defineComponent,
   h,
+  nextTick,
+  provide,
   renderSlot,
+  toRefs,
+  watch,
 } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { debugWarn, isValidComponentSize } from '@element-plus/utils'
-import { useSize, useNamespace } from '@element-plus/hooks'
+import { useNamespace, useSize } from '@element-plus/hooks'
 import { useCheckboxGroup } from './useCheckbox'
 
 import type { PropType } from 'vue'

packages/components/checkbox/src/useCheckbox.ts

@@ -1,4 +1,4 @@
-import { ref, computed, inject, getCurrentInstance, watch } from 'vue'
+import { computed, getCurrentInstance, inject, ref, watch } from 'vue'
 import { toTypeString } from '@vue/shared'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { formContextKey, formItemContextKey } from '@element-plus/tokens'

packages/components/col/__tests__/layout.spec.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, nextTick } from 'vue'
+import { defineComponent, nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import Row from '@element-plus/components/row'
 import Col from '../src/col'

packages/components/col/src/col.tsx

@@ -1,8 +1,8 @@
-import { defineComponent, computed, inject } from 'vue'
+import { computed, defineComponent, inject } from 'vue'
 import { buildProps, definePropType, mutable } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import { rowContextKey } from '@element-plus/tokens'
-import type { ExtractPropTypes, CSSProperties } from 'vue'
+import type { CSSProperties, ExtractPropTypes } from 'vue'
 
 export type ColSizeObject = {
   span?: number

packages/components/collapse/src/collapse-item.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, computed, ref } from 'vue'
+import { computed, inject, ref } from 'vue'
 import { generateId } from '@element-plus/utils'
 import ElCollapseTransition from '@element-plus/components/collapse-transition'
 import ElIcon from '@element-plus/components/icon'

packages/components/collapse/src/collapse.ts

@@ -1,11 +1,11 @@
 import {
   buildProps,
   definePropType,
-  mutable,
   isNumber,
   isString,
+  mutable,
 } from '@element-plus/utils'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import type { ExtractPropTypes } from 'vue'
 import type Collapse from './collapse.vue'
 import type { Arrayable } from '@element-plus/utils'

packages/components/collapse/src/collapse.vue

@@ -5,12 +5,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, provide } from 'vue'
+import { provide, ref, watch } from 'vue'
 import { ensureArray } from '@element-plus/utils'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
 import { collapseContextKey } from '@element-plus/tokens'
-import { collapseProps, collapseEmits } from './collapse'
+import { collapseEmits, collapseProps } from './collapse'
 import type { CollapseActiveName } from './collapse'
 
 defineOptions({

packages/components/collection/src/collection.ts

@@ -1,4 +1,4 @@
-import { ref, inject, onMounted, onBeforeUnmount, provide, unref } from 'vue'
+import { inject, onBeforeUnmount, onMounted, provide, ref, unref } from 'vue'
 import Collection from './collection.vue'
 import CollectionItem from './collection-item.vue'
 

packages/components/collection/test-helper/index.ts

@@ -1,7 +1,7 @@
 import { inject } from 'vue'
 import {
-  createCollectionWithScope,
   COLLECTION_ITEM_SIGN,
+  createCollectionWithScope,
 } from '../src/collection'
 
 const TestCollection = createCollectionWithScope('Test')

packages/components/color-picker/src/components/alpha-slider.vue

@@ -22,11 +22,11 @@
 <script lang="ts">
 import {
   defineComponent,
-  watch,
-  ref,
-  onMounted,
   getCurrentInstance,
+  onMounted,
+  ref,
   shallowRef,
+  watch,
 } from 'vue'
 import { getClientXY } from '@element-plus/utils'
 import draggable from '../draggable'

packages/components/color-picker/src/components/hue-slider.vue

@@ -14,12 +14,12 @@
 
 <script lang="ts">
 import {
-  ref,
   computed,
-  watch,
-  onMounted,
-  getCurrentInstance,
   defineComponent,
+  getCurrentInstance,
+  onMounted,
+  ref,
+  watch,
 } from 'vue'
 import { getClientXY } from '@element-plus/utils'
 import draggable from '../draggable'

packages/components/color-picker/src/components/predefine.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { ref, watch, watchEffect, defineComponent } from 'vue'
+import { defineComponent, ref, watch, watchEffect } from 'vue'
 import { useOptions } from '../useOption'
 import Color from '../color'
 

packages/components/color-picker/src/components/sv-panel.vue

@@ -21,12 +21,12 @@
 
 <script lang="ts">
 import {
-  defineComponent,
-  ref,
   computed,
-  watch,
+  defineComponent,
   getCurrentInstance,
   onMounted,
+  ref,
+  watch,
 } from 'vue'
 import { getClientXY } from '@element-plus/utils'
 import draggable from '../draggable'

packages/components/color-picker/src/draggable.ts

@@ -1,5 +1,5 @@
 import { isClient } from '@vueuse/core'
-import { on, off } from '@element-plus/utils'
+import { off, on } from '@element-plus/utils'
 
 let isDragging = false
 

packages/components/color-picker/src/index.vue

@@ -108,13 +108,13 @@ import { debounce } from 'lodash-unified'
 import ElButton from '@element-plus/components/button'
 import ElIcon from '@element-plus/components/icon'
 import { ClickOutside } from '@element-plus/directives'
-import { formItemContextKey, formContextKey } from '@element-plus/tokens'
-import { useLocale, useSize, useNamespace } from '@element-plus/hooks'
+import { formContextKey, formItemContextKey } from '@element-plus/tokens'
+import { useLocale, useNamespace, useSize } from '@element-plus/hooks'
 import ElTooltip from '@element-plus/components/tooltip'
 import ElInput from '@element-plus/components/input'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { debugWarn, isValidComponentSize } from '@element-plus/utils'
-import { Close, ArrowDown } from '@element-plus/icons-vue'
+import { ArrowDown, Close } from '@element-plus/icons-vue'
 import AlphaSlider from './components/alpha-slider.vue'
 import HueSlider from './components/hue-slider.vue'
 import Predefine from './components/predefine.vue'

packages/components/config-provider/__tests__/config-provider.spec.ts

@@ -1,6 +1,6 @@
-import { h, ref, reactive, nextTick, defineComponent } from 'vue'
+import { defineComponent, h, nextTick, reactive, ref } from 'vue'
 import { mount } from '@vue/test-utils'
-import { useLocale, useGlobalConfig } from '@element-plus/hooks'
+import { useGlobalConfig, useLocale } from '@element-plus/hooks'
 import Chinese from '@element-plus/locale/lang/zh-cn'
 import English from '@element-plus/locale/lang/en'
 import { ElButton, ElMessage } from '@element-plus/components'

packages/components/container/src/container.vue

@@ -4,7 +4,7 @@
   </section>
 </template>
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 
 import type { Component, VNode } from 'vue'