Merge pull request #18915 from element-plus/dev

D2M
element-plus · Nov 15, 2024 · ef5730d · ef5730d
2 parents 6baa069 + f180e0c
commit ef5730d
Show file tree

Hide file tree

Showing 92 changed files with 2,611 additions and 3,462 deletions.
diff --git a/.github/workflows/issue-remove-inactive.yml b/.github/workflows/issue-remove-inactive.yml
@@ -16,4 +16,4 @@ jobs:
         with:
           actions: 'remove-labels'
           issue-number: ${{ github.event.issue.number }}
-          labels: 'inactive'
+          labels: 'inactive, needs more info'
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,40 @@
 ## Changelog
 
+### 2.8.8
+
+_2024-11-15_
+
+#### Features
+
+- Components [select-v2] add `append-to` prop (#18798 by @btea)
+- Components [skeleton] `throttle` supports values as object (#17041 by @chenweiyi)
+- Components [select] add `offset` and `show-arrow` prop (#18837 by @DDDDD12138)
+- Components [description-item] add labelWidth prop (#18673 by @Lakphy)
+
+#### Bug fixes
+
+- Utils[vue] ensure `flattedChildren` traverse component's subTree (#18649 by @ddeerdevil)
+- Components [select] prevent keyboard from deleting disabled option (#18752 by @cszhjh)
+- Theme-chalk  sass `!global assignments` deprecation warning (#18711 by @warmthsea)
+- Components [picker] fix popup not opening when editable is false (#18767 by @DDDDD12138)
+- Components [mention] keyboard control options not work as expected (#18751 by @btea)
+- Components [segmented] invisible active indicator after clearing selection (#18818 by @DDDDD12138)
+- Components [mention] ref dom array order error when list changes (#18787 by @warmthsea)
+- Components [table] `table-layout:auto` fixed column misalignment (#18736 by @btea)
+- Components [table] failed to insert tooltip when show-overflow-tooltip is enabled (#18317 by @xingyixiang)
+- Components [select] getValueIndex empty error (#18867 by @warmthsea)
+- Components [select & select-v2] status-icon is invalid (#18101 by @WangYJEE)
+- Components [pagination] input style loss (#18878 by @ToyCat93)
+- Components time-picker disabled-[hours/minutes/seconds] (#13364 by @StephenKe) (#14216)
+- Components numpadEnter does not work like the Enter (#18855 by @tolking)
+- Components [select-v2] resolve overlap of tags and placeholder (#18388 by @tuskermanshu)
+- Components [table] repeat setting the height style (#16054 by @betavs)
+
+#### Refactors
+
+- Improvement: [select] optimize the effect of keyboard switching options (#18773 by @btea)
+- Components [select] simplify code (#18810 by @makedopamine)
+
 ### 2.8.7
 
 _2024-11-01_

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -19,6 +19,8 @@ You should be having:
 
 NodeJS >= 18
 
+Pnpm >= 9.5
+
 Git > v2.20
 
 Some of our compiling code used syntax that introduced in NodeJS>18 so you will be need to install that in advance.

diff --git a/commitlint.config.ts b/commitlint.config.ts
@@ -21,6 +21,8 @@ const scopes = [
   'border',
   'var',
   'ssr',
+  'types',
+  'deps',
 ]
 
 const gitStatus = execSync('git status --porcelain || true')

diff --git a/docs/.vitepress/build/rebuild-pwa.ts b/docs/.vitepress/build/rebuild-pwa.ts
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -7,6 +7,7 @@ import VPApp, { NotFound, globals } from '../vitepress'
 import { define } from '../utils/types'
 import 'uno.css'
 import './style.css'
+import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css'
 import type { Theme } from 'vitepress'
 
 export default define<Theme>({

diff --git a/docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue b/docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue
@@ -13,6 +13,7 @@ import SponsorRightLogoSmallList from '../sponsors/right-logo-small-list.vue'
 const headers = useToc()
 const lang = useLang()
 const sponsor = computed(() => sponsorLocale[lang.value])
+const removeTag = (str: string) => str.replace(/<span.*<\/span>/g, '')
 </script>
 
 <template>
@@ -26,15 +27,15 @@ const sponsor = computed(() => sponsorLocale[lang.value])
           :href="link"
           :title="text"
         >
-          <div v-html="text" />
+          <div :title="removeTag(text)" v-html="text" />
           <template v-if="children" #sub-link>
             <el-anchor-link
               v-for="{ link: childLink, text: childText } in children"
               :key="childLink"
               :href="childLink"
               :title="text"
             >
-              <div v-html="childText" />
+              <div :title="removeTag(childText)" v-html="childText" />
             </el-anchor-link>
           </template>
         </el-anchor-link>
@@ -59,4 +60,11 @@ const sponsor = computed(() => sponsorLocale[lang.value])
     width: 100%;
   }
 }
+.el-anchor__item {
+  .el-anchor__link > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
 </style>
diff --git a/docs/.vitepress/vitepress/components/globals/vp-changelog.vue b/docs/.vitepress/vitepress/components/globals/vp-changelog.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import axios from 'axios'
 import VPLink from '../common/vp-link.vue'
 import VPMarkdown from '../common/vp-markdown.vue'
 import { useLang } from '../../composables/lang'
@@ -25,11 +24,17 @@ const onVersionChange = (val) => {
 
 onMounted(async () => {
   try {
-    const { data } = await axios.get<Release[]>(
+    const response = await fetch(
       'https://api.github.com/repos/element-plus/element-plus/releases'
     )
-    releases.value = data
-    currentRelease.value = data[0]
+    const data: Release[] = await response.json()
+    if (response.ok) {
+      releases.value = data
+      currentRelease.value = data[0]
+    } else {
+      releases.value = []
+      currentRelease.value = undefined
+    }
   } catch {
     releases.value = []
     currentRelease.value = undefined

diff --git a/docs/.vitepress/vitepress/components/vp-app.vue b/docs/.vitepress/vitepress/components/vp-app.vue
@@ -4,6 +4,7 @@ import { onMounted } from 'vue'
 import nprogress from 'nprogress'
 // import dayjs from 'dayjs'
 import { isClient, useEventListener, useToggle } from '@vueuse/core'
+import { EVENT_CODE } from 'element-plus'
 import { useSidebar } from '../composables/sidebar'
 import { useToggleWidgets } from '../composables/toggle-widgets'
 // import { useLang } from '../composables/lang'
@@ -36,7 +37,7 @@ useToggleWidgets(isSidebarOpen, () => {
 
 useEventListener('keydown', (e) => {
   if (!isClient) return
-  if (e.key === 'Escape' && isSidebarOpen.value) {
+  if (e.code === EVENT_CODE.esc && isSidebarOpen.value) {
     toggleSidebar(false)
     document.querySelector<HTMLButtonElement>('.sidebar-button')?.focus()
   }

diff --git a/docs/.vitepress/vitepress/components/vp-demo.vue b/docs/.vitepress/vitepress/components/vp-demo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, toRef } from 'vue'
 import { isClient, useClipboard, useToggle } from '@vueuse/core'
+import { EVENT_CODE } from 'element-plus'
 import { CaretTop } from '@element-plus/icons-vue'
 import { useLang } from '../composables/lang'
 import { useSourceCode } from '../composables/source-code'
@@ -38,7 +39,11 @@ const onPlaygroundClick = () => {
 }
 
 const onSourceVisibleKeydown = (e: KeyboardEvent) => {
-  if (['Enter', 'Space'].includes(e.code)) {
+  if (
+    [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(
+      e.code
+    )
+  ) {
     e.preventDefault()
     toggleSourceVisible(false)
     sourceCodeRef.value?.focus()

diff --git a/docs/.vitepress/vitepress/components/vp-sponsors.vue b/docs/.vitepress/vitepress/components/vp-sponsors.vue
@@ -10,15 +10,15 @@ const sponsor = computed(() => sponsorLocale[lang.value])
 </script>
 
 <template>
-  <div class="page-sidebar-parent">
+  <div class="page-sidebar-layout">
     <p class="title">{{ sponsor.sponsoredBy }}</p>
     <VPSponsorLarge />
     <VPSponsorSmall />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.page-sidebar-parent {
+.page-sidebar-layout {
   padding-bottom: 10px;
   padding-top: 0;
   .title {

diff --git a/docs/en-US/component/descriptions.md b/docs/en-US/component/descriptions.md
@@ -51,14 +51,15 @@ descriptions/customized-style
 
 ### Descriptions Attributes
 
-| Name      | Description                                | Type                                           | Default    |
-| --------- | ------------------------------------------ | ---------------------------------------------- | ---------- |
-| border    | with or without border                     | ^[boolean]                                     | false      |
-| column    | numbers of `Descriptions Item` in one line | ^[number]                                      | 3          |
-| direction | direction of list                          | ^[enum]`'vertical' \| 'horizontal'`            | horizontal |
-| size      | size of list                               | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | —          |
-| title     | title text, display on the top left        | ^[string]                                      | ''         |
-| extra     | extra text, display on the top right       | ^[string]                                      | ''         |
+| Name                 | Description                                | Type                                           | Default    |
+| -------------------- | ------------------------------------------ | ---------------------------------------------- | ---------- |
+| border               | with or without border                     | ^[boolean]                                     | false      |
+| column               | numbers of `Descriptions Item` in one line | ^[number]                                      | 3          |
+| direction            | direction of list                          | ^[enum]`'vertical' \| 'horizontal'`            | horizontal |
+| size                 | size of list                               | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | —          |
+| title                | title text, display on the top left        | ^[string]                                      | ''         |
+| extra                | extra text, display on the top right       | ^[string]                                      | ''         |
+| label-width ^(2.8.8) | label width of every column                | ^[string] / ^[number]                          | ''         |
 
 ### Descriptions Slots
 
@@ -72,17 +73,18 @@ descriptions/customized-style
 
 ### DescriptionsItem Attributes
 
-| Name             | Description                                                                                                                                                                                  | Type                                   | Default |
-| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- |
-| label            | label text                                                                                                                                                                                   | ^[string]                              | ''      |
-| span             | colspan of column                                                                                                                                                                            | ^[number]                              | 1       |
-| rowspan ^(2.8.1) | the number of rows a cell should span                                                                                                                                                        | ^[number]                              | 1       |
-| width            | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)                                                      | ^[string] / ^[number]                  | ''      |
-| min-width        | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | ^[string] / ^[number]                  | ''      |
-| align            | column content alignment (If no `border`, effective for both label and content)                                                                                                              | ^[enum]`'left' \| 'center' \| 'right'` | left    |
-| label-align      | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)                                                  | ^[enum]`'left' \| 'center' \| 'right'` | ''      |
-| class-name       | column content custom class name                                                                                                                                                             | ^[string]                              | ''      |
-| label-class-name | column label custom class name                                                                                                                                                               | ^[string]                              | ''      |
+| Name                 | Description                                                                                                                                                                                  | Type                                   | Default |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- |
+| label                | label text                                                                                                                                                                                   | ^[string]                              | ''      |
+| span                 | colspan of column                                                                                                                                                                            | ^[number]                              | 1       |
+| rowspan ^(2.8.1)     | the number of rows a cell should span                                                                                                                                                        | ^[number]                              | 1       |
+| width                | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)                                                      | ^[string] / ^[number]                  | ''      |
+| min-width            | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | ^[string] / ^[number]                  | ''      |
+| label-width ^(2.8.8) | column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions`                                                     | ^[string] / ^[number]                  | ''      |
+| align                | column content alignment (If no `border`, effective for both label and content)                                                                                                              | ^[enum]`'left' \| 'center' \| 'right'` | left    |
+| label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)                                                  | ^[enum]`'left' \| 'center' \| 'right'` | ''      |
+| class-name           | column content custom class name                                                                                                                                                             | ^[string]                              | ''      |
+| label-class-name     | column label custom class name                                                                                                                                                               | ^[string]                              | ''      |
 
 ### DescriptionsItem Slots
 

diff --git a/docs/en-US/component/icon.md b/docs/en-US/component/icon.md
@@ -17,16 +17,21 @@ Element Plus provides a set of common icons.
 
 ### Using packaging manager
 
-```shell
-# Choose a package manager you like.
+Choose a package manager you like.
 
-# NPM
+::: code-group
+```shell [npm]
 $ npm install @element-plus/icons-vue
-# Yarn
+```
+
+```shell [yarn]
 $ yarn add @element-plus/icons-vue
-# pnpm
+```
+
+```shell [pnpm]
 $ pnpm install @element-plus/icons-vue
 ```
+:::
 
 ### Register All Icons
 

diff --git a/docs/en-US/component/page-header.md b/docs/en-US/component/page-header.md
@@ -39,7 +39,7 @@ page-header/custom-icon
 ## No icon
 
 Sometimes the page is just full of elements, and you might not want the icon to show up on the page,
-you can set the `icon` attribute to `null` to get rid of it.
+you can set the `icon` attribute to `""` to get rid of it.
 
 :::demo
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,8 @@ const scopes = [ @@
       'border',
       'var',
       'ssr',
+      'types',
+      'deps',
     ]
     const gitStatus = execSync('git status --porcelain || true')
@@ Expand Down @@