Merge branch 'element-plus:dev' into dev

docs/en-US/guide/i18n.md

@@ -14,7 +14,7 @@ Element Plus provides global configurations
 
 ```typescript
 import ElementPlus from 'element-plus'
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 app.use(ElementPlus, {
   locale: zhCn,
@@ -37,7 +37,7 @@ for globally configuring locale and other settings.
   import { defineComponent } from 'vue'
   import { ElConfigProvider } from 'element-plus'
 
-  import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+  import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
   export default defineComponent({
     components: {

packages/components/button/src/button.vue

@@ -3,19 +3,7 @@
     :is="tag"
     ref="_ref"
     v-bind="_props"
-    :class="[
-      ns.b(),
-      ns.m(_type),
-      ns.m(_size),
-      ns.is('disabled', _disabled),
-      ns.is('loading', loading),
-      ns.is('plain', plain),
-      ns.is('round', round),
-      ns.is('circle', circle),
-      ns.is('text', text),
-      ns.is('link', link),
-      ns.is('has-bg', bg),
-    ]"
+    :class="buttonKls"
     :style="buttonStyle"
     @click="handleClick"
   >
@@ -39,6 +27,7 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import { useNamespace } from '@element-plus/hooks'
 import { useButton } from './use-button'
@@ -56,6 +45,19 @@ const buttonStyle = useButtonCustomStyle(props)
 const ns = useNamespace('button')
 const { _ref, _size, _type, _disabled, _props, shouldAddSpace, handleClick } =
   useButton(props, emit)
+const buttonKls = computed(() => [
+  ns.b(),
+  ns.m(_type.value),
+  ns.m(_size.value),
+  ns.is('disabled', _disabled.value),
+  ns.is('loading', props.loading),
+  ns.is('plain', props.plain),
+  ns.is('round', props.round),
+  ns.is('circle', props.circle),
+  ns.is('text', props.text),
+  ns.is('link', props.link),
+  ns.is('has-bg', props.bg),
+])
 
 defineExpose({
   /** @description button html element */

packages/components/table-v2/src/composables/use-row.ts

@@ -3,7 +3,7 @@ import { debounce } from 'lodash-unified'
 import { isNumber } from '@element-plus/utils'
 import { FixedDir } from '../constants'
 
-import type { Ref } from 'vue'
+import type { ComponentInternalInstance, Ref, ShallowRef } from 'vue'
 import type { TableV2Props } from '../table'
 import type {
   RowExpandParams,
@@ -13,6 +13,7 @@ import type {
 import type { FixedDirection, KeyType } from '../types'
 import type { onRowRenderedParams } from '../grid'
 import type { TableGridInstance } from '../table-grid'
+import type { UseNamespaceReturn } from '@element-plus/hooks'
 
 type Heights = Record<KeyType, number>
 type GridInstanceRef = Ref<TableGridInstance | undefined>
@@ -21,16 +22,25 @@ type UseRowProps = {
   mainTableRef: GridInstanceRef
   leftTableRef: GridInstanceRef
   rightTableRef: GridInstanceRef
+  tableInstance: ComponentInternalInstance
+  ns: UseNamespaceReturn
+  isScrolling: ShallowRef<boolean>
 }
 
 export const useRow = (
   props: TableV2Props,
-  { mainTableRef, leftTableRef, rightTableRef }: UseRowProps
+  {
+    mainTableRef,
+    leftTableRef,
+    rightTableRef,
+    tableInstance,
+    ns,
+    isScrolling,
+  }: UseRowProps
 ) => {
   const vm = getCurrentInstance()!
   const { emit } = vm
   const isResetting = shallowRef(false)
-  const hoveringRowKey = shallowRef<KeyType | null>(null)
   const expandedRowKeys = ref<KeyType[]>(props.defaultExpandedRowKeys || [])
   const lastRenderedRowIndex = ref(-1)
   const resetIndex = shallowRef<number | null>(null)
@@ -50,7 +60,18 @@ export const useRow = (
   }
 
   function onRowHovered({ hovered, rowKey }: RowHoverParams) {
-    hoveringRowKey.value = hovered ? rowKey : null
+    if (isScrolling.value) {
+      return
+    }
+    const tableRoot = tableInstance!.vnode.el as HTMLElement
+    const rows = tableRoot.querySelectorAll(`[rowkey=${rowKey as string}]`)
+    rows.forEach((row) => {
+      if (hovered) {
+        row.classList.add(ns.is('hovered'))
+      } else {
+        row.classList.remove(ns.is('hovered'))
+      }
+    })
   }
 
   function onRowExpanded({
@@ -141,7 +162,6 @@ export const useRow = (
   }
 
   return {
-    hoveringRowKey,
     expandedRowKeys,
     lastRenderedRowIndex,
     isDynamic,

packages/components/table-v2/src/renderers/row.tsx

@@ -1,7 +1,11 @@
 import { Row } from '../components'
 import { tryCall } from '../utils'
 
-import type { FunctionalComponent, UnwrapNestedRefs } from 'vue'
+import type {
+  ComponentInternalInstance,
+  FunctionalComponent,
+  UnwrapNestedRefs,
+} from 'vue'
 import type { UseNamespaceReturn } from '@element-plus/hooks'
 import type { UseTableReturn } from '../use-table'
 import type { TableV2Props } from '../table'
@@ -23,13 +27,13 @@ type RowRendererProps = TableGridRowSlotParams &
       | 'depthMap'
       | 'expandedRowKeys'
       | 'hasFixedColumns'
-      | 'hoveringRowKey'
       | 'onRowHovered'
       | 'onRowExpanded'
       | 'columnsStyles'
     >
   > & {
     ns: UseNamespaceReturn
+    tableInstance: null | ComponentInternalInstance
   }
 
 const RowRenderer: FunctionalComponent<RowRendererProps> = (
@@ -44,7 +48,6 @@ const RowRenderer: FunctionalComponent<RowRendererProps> = (
     expandedRowKeys,
     estimatedRowHeight,
     hasFixedColumns,
-    hoveringRowKey,
     rowData,
     rowIndex,
     style,
@@ -74,7 +77,6 @@ const RowRenderer: FunctionalComponent<RowRendererProps> = (
     {
       [ns.e(`row-depth-${depth}`)]: canExpand && rowIndex >= 0,
       [ns.is('expanded')]: canExpand && expandedRowKeys.includes(_rowKey),
-      [ns.is('hovered')]: !isScrolling && _rowKey === hoveringRowKey,
       [ns.is('fixed')]: !depth && isFixedRow,
       [ns.is('customized')]: Boolean(slots.row),
     },
@@ -98,8 +100,34 @@ const RowRenderer: FunctionalComponent<RowRendererProps> = (
     style,
   }
 
+  const handlerMosueEnter = (e: MouseEvent) => {
+    onRowHover?.({
+      hovered: true,
+      rowKey: _rowKey,
+      event: e,
+      rowData,
+      rowIndex,
+    })
+  }
+
+  const handlerMouseLeave = (e: MouseEvent) => {
+    onRowHover?.({
+      hovered: false,
+      rowKey: _rowKey,
+      event: e,
+      rowData,
+      rowIndex,
+    })
+  }
+
   return (
-    <Row {..._rowProps} onRowHover={onRowHover} onRowExpand={onRowExpanded}>
+    <Row
+      {..._rowProps}
+      onRowExpand={onRowExpanded}
+      onMouseenter={handlerMosueEnter}
+      onMouseleave={handlerMouseLeave}
+      rowkey={_rowKey}
+    >
       {slots}
     </Row>
   )

packages/components/table-v2/src/table-v2.tsx

@@ -45,7 +45,6 @@ const TableV2 = defineComponent({
       depthMap,
       expandedRowKeys,
       hasFixedColumns,
-      hoveringRowKey,
       mainTableRef,
       leftTableRef,
       rightTableRef,
@@ -104,7 +103,6 @@ const TableV2 = defineComponent({
     provide(TableV2InjectionKey, {
       ns,
       isResetting,
-      hoveringRowKey,
       isScrolling,
     })
 
@@ -222,7 +220,6 @@ const TableV2 = defineComponent({
         expandedRowKeys: unref(expandedRowKeys),
         estimatedRowHeight,
         hasFixedColumns: unref(hasFixedColumns),
-        hoveringRowKey: unref(hoveringRowKey),
         rowProps,
         rowClass,
         rowKey,

packages/components/table-v2/src/tokens.ts

@@ -1,10 +1,8 @@
 import type { InjectionKey, Ref } from 'vue'
 import type { UseNamespaceReturn } from '@element-plus/hooks'
-import type { KeyType } from './types'
 
 export type TableV2Context = {
   isScrolling: Ref<boolean>
-  hoveringRowKey: Ref<null | KeyType>
   isResetting: Ref<boolean>
   ns: UseNamespaceReturn
 }

packages/components/table-v2/src/use-table.ts

@@ -1,5 +1,14 @@
-import { computed, ref, shallowRef, toRef, unref, watch } from 'vue'
+import {
+  computed,
+  getCurrentInstance,
+  ref,
+  shallowRef,
+  toRef,
+  unref,
+  watch,
+} from 'vue'
 import { isArray } from '@element-plus/utils'
+import { useNamespace } from '@element-plus/hooks'
 import {
   useColumns,
   useData,
@@ -43,14 +52,18 @@ function useTable(props: TableV2Props) {
     onMaybeEndReached,
   })
 
+  const ns = useNamespace('table-v2')
+  const instance = getCurrentInstance()!
+
+  // state
+  const isScrolling = shallowRef(false)
+
   const {
     expandedRowKeys,
-    hoveringRowKey,
     lastRenderedRowIndex,
     isDynamic,
     isResetting,
     rowHeights,
-
     resetAfterIndex,
     onRowExpanded,
     onRowHeightChange,
@@ -60,6 +73,9 @@ function useTable(props: TableV2Props) {
     mainTableRef,
     leftTableRef,
     rightTableRef,
+    tableInstance: instance,
+    ns,
+    isScrolling,
   })
 
   const { data, depthMap } = useData(props, {
@@ -87,8 +103,6 @@ function useTable(props: TableV2Props) {
     fixedColumnsOnLeft,
     fixedColumnsOnRight,
   })
-  // state
-  const isScrolling = shallowRef(false)
 
   // DOM/Component refs
   const containerRef = ref()
@@ -152,7 +166,6 @@ function useTable(props: TableV2Props) {
     isDynamic,
     isResetting,
     isScrolling,
-    hoveringRowKey,
     hasFixedColumns,
     // records
     columnsStyles,