Merge branch 'vue3.4' of https://github.com/warmthsea/element-plus in…

…to vue3.4

.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,44 @@
 ## Changelog
+
+### 2.7.2
+
+_2024-04-26_
+
+#### Features
+
+- Hooks add use-aria hooks (#16598 by @kooriookami)
+- Components [color-picker] add `teleported` prop (#16634 by @zhixiaotong)
+- Components [form] add validate callback promise type (#16652 by @warmthsea)
+
+#### Bug fixes
+
+- 🐛 update autocomplete default width (#16633 by @xxholly32)
+- Components [select] group error when custom option component (#16621 by @Liao-js)
+- Components [table] return type of function summary-method  supports VNode (#16648 by @FrontEndDog)
+- Test-utils fix main export error (#16504 by @wzc520pyfm)
+- Components Add missing export (#16323 by @zzh948498)
+- Components [table-v2] fix scrolling fail (#16470 by @Tsong-LC)
+- Components [select] `isDisabled` is not fresh (#16419 by @makedopamine)
+- Components [progress] bar background support gradient (#16666 by @btea)
+- Components [select-v2] custom options init error in multiple (#16664 by @Liao-js)
+
+### 2.7.1
+
+_2024-04-20_
+
+#### Features
+
+- Components [badge] Add badge-style and badge-class (#16585 by @kooriookami)
+
+#### Bug fixes
+
+- Hooks [empty-values] warning on modifying computead value (#16508 by @btea)
+- Components [input-number] fix binding wheel event warning (#16495 by @Canroc)
+- Components [table] fix cell tooltip display error (#16449 by @electroluxcode)
+- Components [table] hover style error (#16517 by @dowinweb)
+- Components [table] fix grouping head when dynamic column (#16433 by @Liao-js)
+- Components [select-v2] fix has existing option  when allow create (#16590 by @Liao-js)
+- Components [table] table body rerendered when use row-key (#16544 by @Liao-js)
 
 ### 2.7.0
 

README.md

@@ -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
 
@@ -67,8 +67,8 @@ You can also try Element Plus out with the components built-in playground.
   <tbody>
     <tr>
       <td align="center" valign="middle">
-        <a href="https://js.design?source=element-plus" target="_blank">
-          <img width="150px" src="https://user-images.githubusercontent.com/17680888/160634485-df0d00af-8633-4ab8-9a72-aac2b65d1d36.png">
+        <a href="https://melecode.com/" target="_blank">
+          <img width="150px" src="https://github.com/element-plus/element-plus/assets/82012629/9ca4269c-7545-4463-9bdc-8e5a1fbd0b08">
         </a>
       </td>
       <td align="center" valign="middle">
@@ -78,12 +78,12 @@ You can also try Element Plus out with the components built-in playground.
       </td>
       <td align="center" valign="middle">
         <a href="https://www.jnpfsoft.com/index.html?from=elementUI" target="_blank">
-          <img width="150px" src="https://github-production-user-asset-6210df.s3.amazonaws.com/82012629/285874192-0d562df0-2ebc-4bb3-bf8f-8674ac07c38a.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20231127%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231127T131759Z&X-Amz-Expires=300&X-Amz-Signature=532bfe31066712d205616b9a91002be8a187b7111e692a487356943a19c1772e&X-Amz-SignedHeaders=host&actor_id=82012629&key_id=0&repo_id=281319253">
+          <img width="150px" src="https://github.com/element-plus/element-plus/assets/17680888/6a044d82-c393-48ab-90b8-de0d3aad1624">
         </a>
       </td>
       <td align="center" valign="middle">
         <a href="http://github.crmeb.net/u/Element?from=element-plus" target="_blank">
-          <img width="150px" src="https://github-production-user-asset-6210df.s3.amazonaws.com/82012629/286477993-570c3e32-c32c-43ea-997b-2c5fc8df198a.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20231129%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231129T043748Z&X-Amz-Expires=300&X-Amz-Signature=b4f0d40ae84855c2c9cdab96e90aaf8fcbbba67240bbe2588c32775b41cc1720&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=281319253">
+          <img width="150px" src="https://github.com/element-plus/element-plus/assets/17680888/7abd3c5a-04fb-4eae-9540-0d21c5ed71ed">
         </a>
       </td>
     </tr>
@@ -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',
@@ -33,13 +41,12 @@ export const rightLogoSmallSponsors = [
 
 export const leftCustomImgSponsors = [
   {
-    name: 'JSDesign',
-    name_cn: '即时设计',
-    img: '/images/js-design.png',
-    url: 'https://js.design/?source=element-plus&plan=sy',
-    slogan: 'Professional online UI design tool',
-    slogan_cn: '专业在线UI设计工具',
-    banner_img: '/images/js-design-banner.jpg',
+    name: '美乐',
+    img: '/images/sponsors/mele.png',
+    url: 'https://melecode.com/',
+    slogan: 'Enterprise-level low-code development platform',
+    slogan_cn: '企业级全栈低代码开发平台',
+    banner_img: '/images/sponsors/mele-banner.png',
   },
   {
     name: 'VForm',

docs/.vitepress/crowdin/en-US/pages/resource.json

@@ -12,5 +12,7 @@
   "figmaVariables": "Figma Variables",
   "figmaVariablesIntro": "Components all use variables to quickly switch between dark and light modes.",
   "figma2023": "2023 Figma UI Kit",
-  "figma2023Intro": "Components designed using Figma's latest variable configuration provide Light/Dark/Dark Alpha theme switching to help you quickly build interface designs."
+  "figma2023Intro": "Components designed using Figma's latest variable configuration provide Light/Dark/Dark Alpha theme switching to help you quickly build interface designs.",
+  "masterGo2024": "2024 MasterGo UI Kit",
+  "masterGo2024Intro": "MasterGo component library with optimized adaptive layouts, more complete component states, and variant switching."
 }

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

@@ -16,6 +16,7 @@ type CategoriesItem = {
 const lang = useLang()
 const locale = computed(() => localeData[lang.value])
 const copyIcon = ref(true)
+const query = ref('')
 
 const copyContent = async (content) => {
   try {
@@ -39,7 +40,10 @@ const copySvgIcon = async (name, refs) => {
   if (copyIcon.value) {
     await copyContent(`<el-icon><${name} /></el-icon>`)
   } else {
-    const content = refs[name]?.[0].querySelector('svg')?.outerHTML ?? ''
+    let content = refs[name]?.[0].querySelector('svg')?.outerHTML ?? ''
+    if (content) {
+      content = content.replace(/data-v-\w+=""/, '')
+    }
     await copyContent(content)
   }
 }
@@ -63,6 +67,17 @@ IconCategories.categories.forEach((o) => {
 })
 
 categories.value.push({ name: 'Other', icons: Array.from(iconMap.values()) })
+
+const filterCategories = computed(() => {
+  return categories.value
+    .map((category) => {
+      const icons = category.icons.filter((icon) => {
+        return icon.name.toLowerCase().includes(query.value.toLowerCase())
+      })
+      return { ...category, icons }
+    })
+    .filter((category) => category.icons.length)
+})
 </script>
 
 <template>
@@ -73,7 +88,15 @@ categories.value.push({ name: 'Other', icons: Array.from(iconMap.values()) })
       inactive-text="Copy SVG content"
     />
   </div>
-  <div v-for="item in categories" :key="item.name" class="demo-icon-item">
+  <div class="icon-search-content">
+    <el-input
+      v-model="query"
+      :prefix-icon="Icons.Search"
+      size="large"
+      placeholder="Search Icons"
+    />
+  </div>
+  <div v-for="item in filterCategories" :key="item.name" class="demo-icon-item">
     <div class="demo-icon-title">{{ item.name }}</div>
     <ul class="demo-icon-list">
       <li
@@ -95,41 +118,60 @@ categories.value.push({ name: 'Other', icons: Array.from(iconMap.values()) })
 </template>
 
 <style scoped lang="scss">
+.icon-search-content {
+  position: sticky;
+  top: 60px;
+  z-index: 10;
+
+  .el-input {
+    background: var(--bg-color);
+  }
+}
+
 .demo-icon {
   &-item {
     margin-top: 24px;
+
     &:first-child {
       margin-top: 0;
     }
   }
+
   &-title {
     font-weight: 400;
     font-size: 18px;
     line-height: 26px;
   }
+
   &-list {
     overflow: hidden;
     list-style: none;
     padding: 0 !important;
-    border-top: 1px solid var(--el-border-color);
     border-left: 1px solid var(--el-border-color);
     border-radius: 4px;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
 
     .icon-item {
+      &:nth-child(-n + 7) {
+        border-top: 1px solid var(--el-border-color);
+      }
+
       text-align: center;
       color: var(--el-text-color-regular);
       height: 90px;
       font-size: 13px;
       border-right: 1px solid var(--el-border-color);
       border-bottom: 1px solid var(--el-border-color);
       transition: background-color var(--el-transition-duration);
+
       &:hover {
         background-color: var(--el-border-color-extra-light);
+
         .el-icon {
           color: var(--brand-color-light);
         }
+
         color: var(--brand-color-light);
       }
 

docs/.vitepress/vitepress/components/globals/resource.vue

@@ -10,6 +10,7 @@ import SketchTemplateSvg from './resources/sketch-template-svg.vue'
 import FigmaTemplateSvg from './resources/figma-template-svg.vue'
 import FigmaVariablesSvg from './resources/figma-variables-svg.vue'
 import FigmaUiKitSvg from './resources/figma-ui-kit-svg.vue'
+import MasterGoUiKitSvg from './resources/master-go-ui-kit-svg.vue'
 
 const mirrorUrl = 'element-plus.gitee.io'
 const isMirrorUrl = () => {
@@ -60,6 +61,14 @@ const resourceCards = computed(() => [
     intro: resourceLang.value.figmaIntro,
     url: 'https://www.figma.com/community/file/1021254029764378306',
   },
+  {
+    key: '2024-master-go-ui-kit',
+    title: resourceLang.value.masterGo2024,
+    description: '2024 MasterGo UI Kit',
+    icon: MasterGoUiKitSvg,
+    intro: resourceLang.value.masterGo2024Intro,
+    url: 'https://mastergo.com/community/resource/124855257836266',
+  },
   {
     key: 'sketch',
     title: resourceLang.value.sketch,