Merge pull request #16849 from element-plus/dev

D2M

.npmrc

@@ -1,3 +1,4 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
 shell-emulator=true
+package-manager-strict=false

.nvmrc

@@ -1 +1 @@
-v16
+v18

.vscode/extensions.json

@@ -3,7 +3,7 @@
     "vue.volar",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "antfu.vite",
+    "antfu.unocss",
     "lokalise.i18n-ally"
   ]
 }

.vscode/settings.json

@@ -2,6 +2,9 @@
   "cSpell.words": ["Element Plus", "element-plus"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
   "npm.packageManager": "pnpm",
   "eslint.probe": [
     "javascript",

CHANGELOG.en-US.md

@@ -1,4 +1,21 @@
 ## Changelog
+
+### 2.7.3
+
+_2024-05-13_
+
+#### Features
+
+- Components [time-picker] @touchstart add passive (#16665 by @warmthsea)
+- Components [form] export fields (#16755 by @warmthsea)
+
+#### Bug fixes
+
+- Components [pagination] jumper input label warning (#16682 by @Liao-js)
+- Compoents [message-box] adapt `Parameters` extraction rules (#16592 by @reiwang01)
+- Components [InfiniteScroll] error caused by value of el[SCOPE] (#16686 by @YiMo1)
+- Components [table] selection reference when toggleAllSelection (#16800 by @Liao-js)
+- Style(components): tour delete content outline style (#16725 by @Fuphoenixes)
 
 ### 2.7.2
 

README.md

@@ -7,7 +7,7 @@
     <img src="https://img.shields.io/npm/v/element-plus.svg" />
   </a>
   <a href="https://github.com/element-plus/element-plus">
-    <img src="https://img.shields.io/badge/node-%20%3E%3D%2016-47c219" />
+    <img src="https://img.shields.io/badge/node-%20%3E%3D%2018-47c219" />
   </a>
   <a href="https://npmcharts.com/compare/element-plus?minimal=true">
     <img src="https://img.shields.io/npm/dm/element-plus.svg" />
@@ -28,7 +28,7 @@
 Alright, for you to get started if you are looking for making Element Plus better you should keep reading.
 For developers that uses Element Plus to develop your website you should go ahead visit [Getting Started](https://element-plus.org/).
 
-- 中国大陆[加速镜像站点](https://element-plus.gitee.io/)
+- 中国大陆[加速镜像站点](https://cn.element-plus.org/zh-CN/)
 
 ## Breaking change list
 
@@ -96,10 +96,15 @@ You can also try Element Plus out with the components built-in playground.
   <tbody>
     <tr>
       <td align="center" valign="middle">
-        <a href="https://wonderful-code.gitee.io/?from=element-plus" target="_blank">
+        <a href="https://doc.buildadmin.com/?from=element-plus" target="_blank">
           <img width="130px" src="https://user-images.githubusercontent.com/17680888/173179536-30e35fd1-cd5a-482a-bc41-9d5f0aa66fd4.png">
         </a>
       </td>
+      <td align="center" valign="middle">
+        <a href="https://fantastic-admin.github.io/" target="_blank">
+          <img width="130px" src="https://github.com/element-plus/element-plus/assets/82012629/fdff8d8f-83e8-4986-9949-c5b4e0d30217">
+        </a>
+      </td>
       <td align="center" valign="middle">
         <a href="https://bit.dev/?from=element-ui" target="_blank">
           <img width="130px" src="https://user-images.githubusercontent.com/10095631/41342907-e44e7196-6f2f-11e8-92f2-47702dc8f059.png">

docs/.vitepress/config/head.ts

@@ -116,18 +116,6 @@ gtag('config', 'UA-175337989-1');`,
       gtag('config', 'G-M74ZHEQ1M1');
     `,
   ],
-  [
-    'script',
-    {},
-    `(function(h,o,t,j,a,r){
-      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
-      h._hjSettings={hjid:2894908,hjsv:6};
-      a=o.getElementsByTagName('head')[0];
-      r=o.createElement('script');r.async=1;
-      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
-      a.appendChild(r);
-  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`,
-  ],
   [
     'script',
     {

docs/.vitepress/config/sponsors.ts

@@ -17,10 +17,18 @@ export const rightLogoSmallSponsors = [
     name: 'BuildAdmin',
     img: '/images/sponsors/buildadmin.png',
     imgL: '/images/sponsors/buildadmin-l.png',
-    url: 'https://wonderful-code.gitee.io/?from=element-plus',
+    url: 'https://doc.buildadmin.com/?from=element-plus',
     slogan: 'Vue3 opensource admin system',
     slogan_cn: 'Vue3企业级开源后台管理系统',
   },
+  {
+    name: 'Fantastic-admin',
+    img: '/images/sponsors/fantastic-admin.png',
+    imgL: '/images/sponsors/fantastic-admin-l.png',
+    url: 'https://fantastic-admin.github.io/',
+    slogan: 'Out-of-the-box Vue3 management system framework',
+    slogan_cn: '一款开箱即用的 Vue3 中后台管理系统框架',
+  },
   {
     name: 'bit',
     img: '/images/bit.svg',

docs/.vitepress/vitepress/components/globals/vp-footer.vue

@@ -23,7 +23,7 @@ const homeLang = computed(() => homeLocale[lang.value])
         {{ homeLang['11'] }}
       </a>
       <a
-        href="https://element-plus.gitee.io/zh-CN/"
+        href="https://cn.element-plus.org/zh-CN/"
         class="footer-main-link"
         target="_blank"
       >

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

@@ -9,7 +9,7 @@ const onItemClick = (item: any) => {
 </script>
 
 <template>
-  <div class="m-t-16px">
+  <div class="right-big">
     <a
       v-for="item in rightBigLogoSponsors"
       :key="item.name"
@@ -31,3 +31,9 @@ const onItemClick = (item: any) => {
     </a>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.right-big {
+  margin-top: 16px;
+}
+</style>

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

@@ -8,7 +8,7 @@ const onItemClick = (item: any) => {
 </script>
 
 <template>
-  <div class="m-t-16px flex flex-wrap justify-between">
+  <div class="flex flex-wrap justify-between right-small">
     <template
       v-for="item in rightLogoSmallSponsors.concat([{} as any])"
       :key="item.name"
@@ -17,7 +17,7 @@ const onItemClick = (item: any) => {
         v-if="!item.url"
         :class="[
           isDark && '!bg-#262729 color-$text-color-placeholder',
-          'flex bg-#F9F9F9 rd-0px h-40px w-89px justify-center items-center',
+          'flex bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center',
         ]"
       >
         <div class="color-#ddd text-13px cursor-default">Your logo</div>
@@ -34,7 +34,7 @@ const onItemClick = (item: any) => {
         <div
           :class="[
             isDark && '!bg-#262729',
-            'flex m-b-2px bg-#F9F9F9 rd-0px h-40px w-89px justify-center items-center',
+            'flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center',
           ]"
         >
           <img :src="item.imgL" :alt="item.name" />
@@ -43,3 +43,9 @@ const onItemClick = (item: any) => {
     </template>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.right-small {
+  margin-top: 16px;
+}
+</style>

docs/.vitepress/vitepress/components/sponsors/right-richtext-list.vue

@@ -13,7 +13,7 @@ const onItemClick = (item: any) => {
 </script>
 
 <template>
-  <div class="m-t-16px">
+  <div class="right-rich">
     <a
       v-for="item in rightRichTextSponsors"
       :key="item.name"
@@ -57,3 +57,9 @@ const onItemClick = (item: any) => {
     </a>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.right-rich {
+  margin-top: 16px;
+}
+</style>

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

@@ -10,15 +10,15 @@ const sponsor = computed(() => sponsorLocale[lang.value])
 </script>
 
 <template>
-  <div class="page-content">
+  <div class="page-content-main-a">
     <p class="title">{{ sponsor.sponsoredBy }}</p>
     <VPSponsorLarge />
     <VPSponsorSmall />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.page-content {
+.page-content-main-a {
   padding-bottom: 10px;
   padding-top: 0;
   .title {

docs/en-US/component/form.md

@@ -165,6 +165,7 @@ form/accessibility
 | resetFields   | Reset specified fields and remove validation result.               | ^[Function]`(props?: Arrayable<FormItemProp> \| undefined) => void`                                                               |
 | scrollToField | Scroll to the specified fields.                                    | ^[Function]`(prop: FormItemProp) => void`                                                                                         |
 | clearValidate | Clear validation message for specified fields.                     | ^[Function]`(props?: Arrayable<FormItemProp> \| undefined) => void`                                                               |
+| fields ^(2.7.3)        | Get all fields context.                                    | ^[array]`FormItemContext[]`                                                                  |
 
 ## FormItem API
 
@@ -229,7 +230,7 @@ type FormValidationResult = Promise<boolean>
 type FormValidateCallback = (
   isValid: boolean,
   invalidFields?: ValidateFieldsError
-) => void
+) => Promise<void> | void
 
 // RuleItem: see [async-validator](https://github.com/yiminghe/async-validator/blob/master/src/interface.ts)
 interface FormItemRule extends RuleItem {
@@ -268,6 +269,29 @@ type FormRules<T extends MaybeRef<Record<string, any> | string> = string> =
       Arrayable<FormItemRule>
     >
   >
+
+type FormItemValidateState = typeof formItemValidateStates[number]
+type FormItemProps = ExtractPropTypes<typeof formItemProps>
+
+type FormItemContext = FormItemProps & {
+  $el: HTMLDivElement | undefined
+  size: ComponentSize
+  validateState: FormItemValidateState
+  isGroup: boolean
+  labelId: string
+  inputIds: string[]
+  hasLabel: boolean
+  fieldValue: any
+  addInputId: (id: string) => void
+  removeInputId: (id: string) => void
+  validate: (
+    trigger: string,
+    callback?: FormValidateCallback
+  ) => FormValidationResult
+  resetField(): void
+  clearValidate(): void
+}
+
 ```
 
 </details>

docs/en-US/component/menu.md

@@ -89,8 +89,8 @@ menu/popper-offset
 
 | Methods Name | Description               | Parameters                            |
 | ------------ | ------------------------- | ------------------------------------- |
-| open         | open a specific sub-menu  | index: index of the sub-menu to open  |
-| close        | close a specific sub-menu | index: index of the sub-menu to close |
+| open         | Open a specific sub-menu  | index: index of the sub-menu to open  |
+| close        | Close a specific sub-menu | index: index of the sub-menu to close |
 
 ## Menu Events
 

docs/examples/date-picker/date-range.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-radio-group v-model="size" label="size control">
+  <el-radio-group v-model="size" aria-label="size control">
     <el-radio-button value="large">large</el-radio-button>
     <el-radio-button value="default">default</el-radio-button>
     <el-radio-button value="small">small</el-radio-button>

docs/examples/date-picker/enter-date.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-radio-group v-model="size" label="size control">
+  <el-radio-group v-model="size" aria-label="size control">
     <el-radio-button value="large">large</el-radio-button>
     <el-radio-button value="default">default</el-radio-button>
     <el-radio-button value="small">small</el-radio-button>

docs/examples/form/accessibility.vue

@@ -21,14 +21,14 @@
           <el-col :span="12">
             <el-input
               v-model="formAccessibility.firstName"
-              label="First Name"
+              aria-label="First Name"
               placeholder="First Name"
             />
           </el-col>
           <el-col :span="12">
             <el-input
               v-model="formAccessibility.lastName"
-              label="Last Name"
+              aria-label="Last Name"
               placeholder="Last Name"
             />
           </el-col>

docs/examples/form/alignment.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-radio-group v-model="labelPosition" label="label position">
+  <el-radio-group v-model="labelPosition" aria-label="label position">
     <el-radio-button value="left">Left</el-radio-button>
     <el-radio-button value="right">Right</el-radio-button>
     <el-radio-button value="top">Top</el-radio-button>

docs/examples/form/custom-validation.vue

@@ -59,7 +59,7 @@ const validatePass = (rule: any, value: any, callback: any) => {
   } else {
     if (ruleForm.checkPass !== '') {
       if (!ruleFormRef.value) return
-      ruleFormRef.value.validateField('checkPass', () => null)
+      ruleFormRef.value.validateField('checkPass')
     }
     callback()
   }
@@ -93,7 +93,6 @@ const submitForm = (formEl: FormInstance | undefined) => {
       console.log('submit!')
     } else {
       console.log('error submit!')
-      return false
     }
   })
 }

docs/examples/form/form-items.vue

@@ -92,7 +92,6 @@ const submitForm = (formEl: FormInstance | undefined) => {
       console.log('submit!')
     } else {
       console.log('error submit!')
-      return false
     }
   })
 }

docs/examples/form/number-validate.vue

@@ -44,7 +44,6 @@ const submitForm = (formEl: FormInstance | undefined) => {
       console.log('submit!')
     } else {
       console.log('error submit!')
-      return false
     }
   })
 }

docs/examples/form/size-control.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <el-radio-group v-model="size" label="size control">
+    <el-radio-group v-model="size" aria-label="size control">
       <el-radio-button value="large">large</el-radio-button>
       <el-radio-button value="default">default</el-radio-button>
       <el-radio-button value="small">small</el-radio-button>
     </el-radio-group>
-    <el-radio-group v-model="labelPosition" label="position control">
+    <el-radio-group v-model="labelPosition" aria-label="position control">
       <el-radio-button value="left">Left</el-radio-button>
       <el-radio-button value="right">Right</el-radio-button>
       <el-radio-button value="top">Top</el-radio-button>
@@ -37,7 +37,7 @@
         <el-date-picker
           v-model="sizeForm.date1"
           type="date"
-          label="Pick a date"
+          aria-label="Pick a date"
           placeholder="Pick a date"
           style="width: 100%"
         />
@@ -46,7 +46,7 @@
       <el-col :span="11">
         <el-time-picker
           v-model="sizeForm.date2"
-          label="Pick a time"
+          aria-label="Pick a time"
           placeholder="Pick a time"
           style="width: 100%"
         />
@@ -77,9 +77,10 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
+import type { ComponentSize, FormProps } from 'element-plus'
 
-const size = ref('default')
-const labelPosition = ref('right')
+const size = ref<ComponentSize>('default')
+const labelPosition = ref<FormProps['labelPosition']>('right')
 
 const sizeForm = reactive({
   name: '',