Merge branch 'element-plus:dev' into dev

CHANGELOG.en-US.md

@@ -1,4 +1,38 @@
 ## Changelog
+
+### 2.8.2
+
+_2024-09-06_
+
+#### Features
+
+- Components [check-tag] add disabled prop (#17936 by @HaceraI)
+- Components [config-provider] support more message config (#18106 by @btea)
+
+#### Bug fixes
+
+- The disabled state should not trigger focus (#18012 by @btea)
+- Components [pagination] global size dynamic modification error (#18004 by @btea)
+- Components [table] getColumnIndex may be undefned (#16782 by @406087475)
+- Components [tag] leave animations not working (#18006 by @makedopamine)
+- Components [select] switching single/multiple generates an error (#18030 by @tolking)
+- The disabled state should not trigger focus (#18108 by @btea)
+- Components [el-tree-select] fix lazy and multiple select node (#17903 by @gaoxuan-haxibiao)
+- Theme-chalk [select] remove unnecessary codes of the select border (#18116 by @LoTwT)
+- Components [select] call the exposes blur is invalid (#17691 by @tolking)
+- Components [mention] replace props.disabled with useFormDisabled (#18119 by @tolking)
+- Components [tree-v2] expand all ancestor nodes of the specified node (#18077 by @dadaguai-git)
+- Theme-chalk [select] box-shadow noise (#18120 by @HaceraI)
+- Hooks PopperContainer cannot be recreated when body is recreated (#18121 by @kimverchan)
+- Components [calendar] improve range validation (#18125 by @btea)
+- Components [table-v2] columns missing key field (#17891 by @betavs)
+- Components [tabs] active-bar not move with the tab label changes (#18165 by @btea)
+- Components [message] max affects grouping display (#18189 by @dadaguai-git)
+- Components [table-v2] header checkbox cover fixedHeader when scroll (#18179 by @kimverchan)
+
+#### Refactors
+
+- Import shared utilities from @element-plus/utils (#18048 by @makedopamine)
 
 ### 2.8.1
 

docs/.vitepress/config/plugins.ts

@@ -6,9 +6,9 @@ import tag from '../plugins/tag'
 import headers from '../plugins/headers'
 import createDemoContainer from '../plugins/demo'
 import { ApiTableContainer } from '../plugins/api-table'
-import type MarkdownIt from 'markdown-it'
+import type { MarkdownRenderer } from 'vitepress'
 
-export const mdPlugin = (md: MarkdownIt) => {
+export const mdPlugin = (md: MarkdownRenderer) => {
   md.use(headers)
   md.use(externalLinkIcon)
   md.use(tableWrapper)

docs/.vitepress/plugins/api-table.ts

@@ -1,6 +1,5 @@
-import type MarkdownIt from 'markdown-it'
-
-export const ApiTableContainer = (md: MarkdownIt) => {
+import type { MarkdownRenderer } from 'vitepress'
+export const ApiTableContainer = (md: MarkdownRenderer) => {
   const fence = md.renderer.rules.fence!
 
   md.renderer.rules.fence = (...args) => {

docs/.vitepress/plugins/demo.ts

@@ -1,23 +1,14 @@
 import path from 'path'
 import fs from 'fs'
 import { docRoot } from '@element-plus/build-utils'
-import type MarkdownIt from 'markdown-it'
-import type Token from 'markdown-it/lib/token'
-import type Renderer from 'markdown-it/lib/renderer'
+import type { MarkdownRenderer } from 'vitepress'
 
 interface ContainerOpts {
   marker?: string | undefined
   validate?(params: string): boolean
-  render?(
-    tokens: Token[],
-    index: number,
-    options: any,
-    env: any,
-    self: Renderer
-  ): string
+  render?: MarkdownRenderer['renderer']['rules']['container']
 }
-
-function createDemoContainer(md: MarkdownIt): ContainerOpts {
+function createDemoContainer(md: MarkdownRenderer): ContainerOpts {
   return {
     validate(params) {
       return !!params.trim().match(/^demo\s*(.*)$/)

docs/.vitepress/plugins/external-link-icon.ts

@@ -1,8 +1,11 @@
-import type MarkdownIt from 'markdown-it'
-import type Renderer from 'markdown-it/lib/renderer'
+import type { MarkdownRenderer } from 'vitepress'
 
-export default (md: MarkdownIt): void => {
-  const renderToken: Renderer.RenderRule = (tokens, idx, options, env, self) =>
+type RenderRule = Exclude<
+  MarkdownRenderer['renderer']['rules']['container'],
+  undefined
+>
+export default (md: MarkdownRenderer): void => {
+  const renderToken: RenderRule = (tokens, idx, options, env, self) =>
     self.renderToken(tokens, idx, options)
   const defaultLinkOpenRenderer = md.renderer.rules.link_open || renderToken
   const defaultLinkCloseRenderer = md.renderer.rules.link_close || renderToken

docs/.vitepress/plugins/headers.ts

@@ -1,12 +1,12 @@
 import { resolveHeadersFromTokens, slugify } from '@mdit-vue/shared'
-import type MarkdownIt from 'markdown-it'
+import type { MarkdownRenderer } from 'vitepress'
 
 /**
  * Get markdown headers info
  *
  * Extract them into env
  */
-export default (md: MarkdownIt): void => {
+export default (md: MarkdownRenderer): void => {
   // extract headers to env
   const render = md.renderer.render.bind(md.renderer)
 

docs/.vitepress/plugins/table-wrapper.ts

@@ -1,6 +1,6 @@
-import type MarkdownIt from 'markdown-it'
+import type { MarkdownRenderer } from 'vitepress'
 
-export default (md: MarkdownIt): void => {
+export default (md: MarkdownRenderer): void => {
   md.renderer.rules.table_open = () => '<div class="vp-table"><table>'
   md.renderer.rules.table_close = () => '</table></div>'
 }

docs/.vitepress/plugins/tag.ts

@@ -1,6 +1,6 @@
-import type MarkdownIt from 'markdown-it'
+import type { MarkdownRenderer } from 'vitepress'
 
-export default (md: MarkdownIt): void => {
+export default (md: MarkdownRenderer): void => {
   md.inline.ruler.before('emphasis', 'tag', (state, silent) => {
     const tagRegExp = /^\^\(([^)]*)\)/
     const str = state.src.slice(state.pos, state.posMax)

docs/.vitepress/plugins/tooltip.ts

@@ -1,6 +1,6 @@
-import type MarkdownIt from 'markdown-it'
+import type { MarkdownRenderer } from 'vitepress'
 
-export default (md: MarkdownIt): void => {
+export default (md: MarkdownRenderer): void => {
   md.renderer.rules.tooltip = (tokens, idx) => {
     const token = tokens[idx]
 

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

@@ -39,10 +39,12 @@ const toTranslation = () => {
 
 <style lang="scss" scoped>
 @use '../../styles/mixins' as *;
+
 .translation-container {
   display: none;
   height: 24px;
   padding: 0 12px;
+  cursor: pointer;
 
   @include respond-to('md') {
     display: block;
@@ -67,6 +69,7 @@ const toTranslation = () => {
   .language {
     padding: 0 16px;
     line-height: 28px;
+
     &.selected {
       --el-text-color-regular: var(--brand-color);
     }

docs/en-US/component/table.md

@@ -322,7 +322,7 @@ table/table-layout
 | Method             | Description                                                                                                                                                       | Type                                                                       |
 | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
 | clearSelection     | used in multiple selection Table, clear user selection                                                                                                            | ^[Function]`() => void`                                                    |
-| getSelectionRows   | returns the currently selected rows                                                                                                                               | ^[Function]`() => void`                                                    |
+| getSelectionRows   | returns the currently selected rows                                                                                                                               | ^[Function]`() => any[]`                                                   |
 | toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected                    | ^[Function]`(row: any, selected?: boolean) => void`                        |
 | toggleAllSelection | used in multiple selection Table, toggle select all and deselect all                                                                                              | ^[Function]`() => void`                                                    |
 | toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | ^[Function]`(row: any, expanded?: boolean) => void`                        |

docs/package.json

@@ -19,7 +19,6 @@
     "element-plus": "npm:element-plus@latest",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
-    "prism-theme-vars": "^0.2.3",
     "vue": "^3.2.37"
   },
   "devDependencies": {
@@ -30,7 +29,6 @@
     "@element-plus/build-utils": "workspace:*",
     "@iconify-json/ri": "^1.1.3",
     "@mdit-vue/shared": "^2.1.3",
-    "@types/markdown-it": "^14.1.1",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "chalk": "^4.1.2",
     "consola": "^2.15.3",

packages/components/menu/src/menu.ts

@@ -466,6 +466,8 @@ export default defineComponent({
       })
     }
 
+    const ulStyle = useMenuCssVar(props, 0)
+
     return () => {
       let slot: VNodeArrayChildren = slots.default?.() ?? []
       const vShowMore: VNode[] = []
@@ -508,8 +510,6 @@ export default defineComponent({
         }
       }
 
-      const ulStyle = useMenuCssVar(props, 0)
-
       const directives: DirectiveArguments = props.closeOnClickOutside
         ? [
             [

packages/components/message/src/method.ts

@@ -158,10 +158,6 @@ const message: MessageFn &
 ) => {
   if (!isClient) return { close: () => undefined }
 
-  if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {
-    return { close: () => undefined }
-  }
-
   const normalized = normalizeOptions(options)
 
   if (normalized.grouping && instances.length) {
@@ -175,6 +171,10 @@ const message: MessageFn &
     }
   }
 
+  if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {
+    return { close: () => undefined }
+  }
+
   const instance = createMessage(normalized, context)
 
   instances.push(instance)

packages/components/select/__tests__/options.test.tsx

@@ -2,6 +2,7 @@ import { defineComponent, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, it } from 'vitest'
 import Options from '../src/options'
+import Select from '../src/select.vue'
 
 import type { PropType } from 'vue'
 import type { VueWrapper } from '@vue/test-utils'
@@ -33,15 +34,22 @@ describe('options', () => {
   const samples = Array.from({ length: 3 })
 
   const createWrapper = (slots = {}) => {
-    wrapper = mount((_, { slots }) => <Options>{slots?.default?.()}</Options>, {
-      global: {
-        components: {
-          ElOption: ElOptionStub,
-          ElOptionGroup: ElOptionGroupStub,
+    wrapper = mount(
+      (_, { slots }) => (
+        <Select>
+          <Options>{slots?.default?.()}</Options>
+        </Select>
+      ),
+      {
+        global: {
+          components: {
+            ElOption: ElOptionStub,
+            ElOptionGroup: ElOptionGroupStub,
+          },
         },
-      },
-      slots,
-    }) as VueWrapper<any>
+        slots,
+      }
+    ) as VueWrapper<any>
   }
 
   afterEach(() => {

packages/components/select/__tests__/select.test.ts

@@ -2718,7 +2718,6 @@ describe('Select', () => {
         >
           <el-option value="1">1</el-option>
           <el-option value="2">2</el-option>
-          </el-option>
         </el-select>
       `,
       () => ({

packages/components/slider/__tests__/slider.test.tsx

@@ -450,7 +450,6 @@ describe('Slider', () => {
       'each precision accuracy test: $input $output',
       async (input, output) => {
         await wrapper.find('input').setValue(input)
-        console.log(wrapper.find('input').element.value)
 
         expect(wrapper.find('input').element.value).toEqual(`${output}`)
       }

packages/components/tabs/src/tab-bar.vue

@@ -7,7 +7,14 @@
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, inject, nextTick, ref, watch } from 'vue'
+import {
+  getCurrentInstance,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  watch,
+} from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import { capitalize, throwError } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
@@ -71,15 +78,39 @@ const getBarStyle = (): CSSProperties => {
 
 const update = () => (barStyle.value = getBarStyle())
 
+const saveObserver = [] as ReturnType<typeof useResizeObserver>[]
+const observerTabs = () => {
+  saveObserver.forEach((observer) => observer.stop())
+  saveObserver.length = 0
+  const list = instance.parent?.refs as Record<string, HTMLElement>
+  if (!list) return
+  for (const key in list) {
+    if (key.startsWith('tab-')) {
+      const _el = list[key]
+      if (_el) {
+        saveObserver.push(useResizeObserver(_el, update))
+      }
+    }
+  }
+}
+
 watch(
   () => props.tabs,
   async () => {
     await nextTick()
     update()
+
+    observerTabs()
   },
   { immediate: true }
 )
-useResizeObserver(barRef, () => update())
+const barObserever = useResizeObserver(barRef, () => update())
+
+onBeforeUnmount(() => {
+  saveObserver.forEach((observer) => observer.stop())
+  saveObserver.length = 0
+  barObserever.stop()
+})
 
 defineExpose({
   /** @description tab root html element */

packages/theme-chalk/src/table-v2.scss

@@ -85,10 +85,12 @@
     @include table-root;
     left: 0;
     box-shadow: 2px 0 4px 0 rgb(0 0 0 / 6%);
+    z-index: 1;
     @include hidden-scrollbar;
   }
 
   @include e('right') {
+    z-index: 1;
     @include table-root;
     right: 0;
     box-shadow: -2px 0 4px 0 rgb(0 0 0 / 6%);