diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 5c320dac41..ce82b240ed 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,16 @@ ## Changelog +### 2.2.36 + +_2023-03-08_ + +#### Bug fixes + +- Components [select] Filter duplicate emits of "update options" (#11884 by @godxiaoji) +- Components [table] useZIndex is called outside setup (#11895 by @Mario34) (#11900) +- Components [select] filter all ElOption item labels (#11909 by @godxiaoji) +- Components [global-config] global injection (#11899 by @jw-foss) + ### 2.2.35 _2023-03-07_ diff --git a/docs/examples/table-v2/grouping-header.vue b/docs/examples/table-v2/grouping-header.vue index d559d7bca8..836e739b69 100644 --- a/docs/examples/table-v2/grouping-header.vue +++ b/docs/examples/table-v2/grouping-header.vue @@ -83,6 +83,7 @@ const CustomizedHeader: FunctionalComponent< groupCells.push(
config.value?.zIndex || defaultInitialZIndex) ) const size = computed(() => unref(sizeFallback) || config.value?.size || '') + provideGlobalConfig(computed(() => unref(config) || {})) return { ns, diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue index db28a5a046..08918886b9 100644 --- a/packages/components/message-box/src/index.vue +++ b/packages/components/message-box/src/index.vue @@ -5,7 +5,6 @@ :z-index="zIndex" :overlay-class="[ns.is('message-box'), modalClass]" :mask="modal" - is-global >
([String, Number]), }, - isGlobal: { - type: Boolean, - }, } as const) export type OverlayProps = ExtractPropTypes @@ -47,9 +43,7 @@ export default defineComponent({ setup(props, { slots, emit }) { // No reactivity on this prop because when its rendering with a global // component, this will be a constant flag. - const ns = props.isGlobal - ? useGlobalComponentSettings(BLOCK).ns - : useNamespace(BLOCK) + const ns = useNamespace(BLOCK) const onMaskClick = (e: MouseEvent) => { emit('click', e) diff --git a/packages/components/select/src/options.ts b/packages/components/select/src/options.ts index 8cbda10c38..933c877da9 100644 --- a/packages/components/select/src/options.ts +++ b/packages/components/select/src/options.ts @@ -1,26 +1,55 @@ import { defineComponent } from 'vue' - -import type { Component, VNode } from 'vue' +import { isFunction, isString } from '@element-plus/utils' +import type { Component, VNode, VNodeNormalizedChildren } from 'vue' export default defineComponent({ name: 'ElOptions', emits: ['update-options'], setup(_, { slots, emit }) { + let cachedOptions: any[] = [] + + function isSameOptions(a: any[], b: any[]) { + if (a.length !== b.length) return false + for (const [index] of a.entries()) { + if (a[index] != b[index]) { + return false + } + } + return true + } + return () => { const children = slots.default?.()! + const filteredOptions: any[] = [] + + function filterOptions(children?: VNodeNormalizedChildren) { + if (!Array.isArray(children)) return + ;(children as VNode[]).forEach((item) => { + const name = ((item?.type || {}) as Component)?.name + + if (name === 'ElOptionGroup') { + filterOptions( + !isString(item.children) && + !Array.isArray(item.children) && + isFunction(item.children?.default) + ? item.children?.default() + : item.children + ) + } else if (name === 'ElOption') { + filteredOptions.push(item.props?.label) + } else if (Array.isArray(item.children)) { + filterOptions(item.children) + } + }) + } if (children.length) { - const options = (children![0]?.children as VNode[])?.[0]?.children || [] - if (options && options.length) { - const filteredOptions = (options as VNode[]) - .filter( - (item: VNode) => - ((item?.type || {}) as Component)?.name === 'ElOption' - ) - .map((item: VNode) => item.props?.label) + filterOptions(children![0]?.children) + } - emit('update-options', filteredOptions) - } + if (!isSameOptions(filteredOptions, cachedOptions)) { + cachedOptions = filteredOptions + emit('update-options', filteredOptions) } return children diff --git a/packages/components/table-v2/src/components/header-row.tsx b/packages/components/table-v2/src/components/header-row.tsx index 59ea03dc5a..e3e30ddeff 100644 --- a/packages/components/table-v2/src/components/header-row.tsx +++ b/packages/components/table-v2/src/components/header-row.tsx @@ -36,7 +36,7 @@ const TableV2HeaderRow = defineComponent({ } return ( -
+
{Cells}
) diff --git a/packages/components/table-v2/src/components/header.tsx b/packages/components/table-v2/src/components/header.tsx index dc96e7e07f..09d770446a 100644 --- a/packages/components/table-v2/src/components/header.tsx +++ b/packages/components/table-v2/src/components/header.tsx @@ -94,7 +94,12 @@ const TableV2Header = defineComponent({ if (props.height <= 0) return return ( -
+
{renderDynamicRows()} {renderFixedRows()} diff --git a/packages/components/table-v2/src/components/row.tsx b/packages/components/table-v2/src/components/row.tsx index a4ae2837f1..7e2e1949d4 100644 --- a/packages/components/table-v2/src/components/row.tsx +++ b/packages/components/table-v2/src/components/row.tsx @@ -210,6 +210,7 @@ const TableV2Row = defineComponent({ ref={rowRef} class={props.class} style={_measured ? style : exceptHeightStyle} + role="row" {...attrs} {...unref(eventHandlers)} > @@ -224,6 +225,7 @@ const TableV2Row = defineComponent({ ref={rowRef} class={props.class} style={style} + role="row" {...unref(eventHandlers)} > {ColumnCells} diff --git a/packages/components/table-v2/src/renderers/cell.tsx b/packages/components/table-v2/src/renderers/cell.tsx index f35d7ab550..44a169940a 100644 --- a/packages/components/table-v2/src/renderers/cell.tsx +++ b/packages/components/table-v2/src/renderers/cell.tsx @@ -122,7 +122,7 @@ const CellRenderer: FunctionalComponent = ( } return ( -
+
{IconOrPlaceholder} {Cell}
diff --git a/packages/components/table-v2/src/renderers/header-cell.tsx b/packages/components/table-v2/src/renderers/header-cell.tsx index 7eff9c8301..7d54f7f8a6 100644 --- a/packages/components/table-v2/src/renderers/header-cell.tsx +++ b/packages/components/table-v2/src/renderers/header-cell.tsx @@ -82,7 +82,7 @@ const HeaderCellRenderer: FunctionalComponent = ( // For now we don't deliver resizable column feature since it has some UX issue. return ( -
+
{Cell} {sortable && ( diff --git a/packages/components/table-v2/src/table-grid.tsx b/packages/components/table-v2/src/table-grid.tsx index 4788a09ccc..efc62dcd03 100644 --- a/packages/components/table-v2/src/table-grid.tsx +++ b/packages/components/table-v2/src/table-grid.tsx @@ -228,6 +228,7 @@ const TableGrid = defineComponent({ width={width} height={unref(gridHeight)} class={ns.e('body')} + role="rowgroup" scrollbarStartGap={scrollbarStartGap} scrollbarEndGap={scrollbarEndGap} scrollbarAlwaysOn={scrollbarAlwaysOn} diff --git a/packages/components/table/src/table-body/events-helper.ts b/packages/components/table/src/table-body/events-helper.ts index 759a90c839..cb1bc326d8 100644 --- a/packages/components/table/src/table-body/events-helper.ts +++ b/packages/components/table/src/table-body/events-helper.ts @@ -2,6 +2,7 @@ import { h, inject, ref } from 'vue' import { debounce } from 'lodash-unified' import { getStyle, hasClass } from '@element-plus/utils' +import { useZIndex } from '@element-plus/hooks' import { createTablePopper, getCell, getColumnByCell } from '../util' import { TABLE_INJECTION_KEY } from '../tokens' import type { TableColumnCtx } from '../table-column/defaults' @@ -12,6 +13,7 @@ function useEvents(props: Partial>) { const parent = inject(TABLE_INJECTION_KEY) const tooltipContent = ref('') const tooltipTrigger = ref(h('div')) + const { nextZIndex } = useZIndex() const handleEvent = (event: Event, row: T, name: string) => { const table = parent const cell = getCell(event) @@ -112,6 +114,7 @@ function useEvents(props: Partial>) { parent?.refs.tableWrapper, cell, cell.innerText || cell.textContent, + nextZIndex, tooltipOptions ) } diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index 041618f8f5..fb244ff4dc 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -9,7 +9,7 @@ import { isObject, throwError, } from '@element-plus/utils' -import { useDelayedToggle, useZIndex } from '@element-plus/hooks' +import { useDelayedToggle } from '@element-plus/hooks' import type { PopperInstance } from '@element-plus/components/popper' import type { Nullable } from '@element-plus/utils' import type { TableColumnCtx } from './table-column/defaults' @@ -331,6 +331,7 @@ export function createTablePopper( parentNode: HTMLElement | undefined, trigger: HTMLElement, popperContent: string, + nextZIndex: () => number, tooltipOptions?: TableOverflowTooltipOptions ) { // TODO transition @@ -341,7 +342,6 @@ export function createTablePopper( } as TableOverflowTooltipOptions, tooltipOptions ) - const { nextZIndex } = useZIndex() const ns = parentNode?.dataset.prefix const scrollContainer = parentNode?.querySelector(`.${ns}-scrollbar__wrap`) function renderContent(): HTMLDivElement { diff --git a/packages/components/virtual-list/src/builders/build-grid.ts b/packages/components/virtual-list/src/builders/build-grid.ts index 66fd7d4681..ceb1d9d8b0 100644 --- a/packages/components/virtual-list/src/builders/build-grid.ts +++ b/packages/components/virtual-list/src/builders/build-grid.ts @@ -639,6 +639,7 @@ const createGrid = ({ { key: 0, class: ns.e('wrapper'), + role: props.role, }, [ h( diff --git a/packages/components/virtual-list/src/props.ts b/packages/components/virtual-list/src/props.ts index 411de5118e..f814cd866e 100644 --- a/packages/components/virtual-list/src/props.ts +++ b/packages/components/virtual-list/src/props.ts @@ -158,6 +158,7 @@ export const virtualizedGridProps = buildProps({ vScrollbarSize: scrollbarSize, scrollbarStartGap: startGap, scrollbarEndGap: endGap, + role: String, ...virtualizedProps, } as const)