diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index a296df8b62..f65ac4d0e6 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,4 +1,27 @@ ## Changelog + +### 2.2.30 + +_2023-02-10_ + +#### Features + +- Components [statistic] (#11420 by @chenxch) + +#### Bug fixes + +- Components [select] recalculate input height when display change (#11374 by @makedopamine) +- Components [input] use v-if throw exception (#11187 by @acyza) +- Components [tree] update refNode type (#11421 by @btea) +- Components [dropdown] (#11431 by @jw-foss) +- Theme-chalk [table] the cell missing padding style (#11456 by @tolking) +- Components fix virtual list scroll&wheel handler (#11472 by @Rapliangle) +- Components [virtual-list] scroll issue (#11475 by @jw-foss) + +#### Refactors + +- Tokens use Symbol as injection key (#11251 by @Naeemo) +- Locale change short months naming (#11326 by @ADISAKBOONMARK) ### 2.2.29 diff --git a/docs/.vitepress/crowdin/en-US/pages/component.json b/docs/.vitepress/crowdin/en-US/pages/component.json index f359559dc0..0edfd00130 100644 --- a/docs/.vitepress/crowdin/en-US/pages/component.json +++ b/docs/.vitepress/crowdin/en-US/pages/component.json @@ -222,6 +222,11 @@ { "link": "/tree-v2", "text": "Virtualized Tree" + }, + { + "link": "/statistic", + "text": "Statistic", + "promotion": "2.2.30" } ] }, diff --git a/docs/en-US/component/cascader.md b/docs/en-US/component/cascader.md index 0f3d24a27a..61ef040e47 100644 --- a/docs/en-US/component/cascader.md +++ b/docs/en-US/component/cascader.md @@ -154,18 +154,18 @@ cascader/panel | disabled | whether Cascader is disabled | boolean | — | false | | clearable | whether selected value can be cleared | boolean | — | false | | show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true | -| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false | -| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | - | false | +| collapse-tags | whether to collapse tags in multiple selection mode | boolean | — | false | +| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | — | false | | separator | option label separator | string | — | ' / ' | | filterable | whether the options can be searched | boolean | — | — | -| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - | +| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | — | — | | debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 | | before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — | | popper-class | custom class name for Cascader's dropdown | string | — | — | -| teleported | whether cascader popup is teleported | boolean | true / false | true | -| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true | +| teleported | whether cascader popup is teleported | boolean | — | true | +| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | — | true | | tag-type | tag type | string | success/info/warning/danger | info | -| validate-event | whether to trigger form validation | boolean | - | true | +| validate-event | whether to trigger form validation | boolean | — | true | ## Cascader Events @@ -224,11 +224,11 @@ cascader/panel | Attribute | Description | Type | Accepted Values | Default | | ------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------- | --------------- | ---------- | | expandTrigger | trigger mode of expanding options | string | click / hover | 'click' | -| multiple | whether multiple selection is enabled | boolean | - | false | -| checkStrictly | whether checked state of a node not affects its parent and child nodes | boolean | - | false | -| emitPath | when checked nodes change, whether to emit an array of node's path, if false, only emit the value of node. | boolean | - | true | -| lazy | whether to dynamic load child nodes, use with `lazyload` attribute | boolean | - | false | -| lazyLoad | method for loading child nodes data, only works when `lazy` is true | function(node, resolve) | - | - | +| multiple | whether multiple selection is enabled | boolean | — | false | +| checkStrictly | whether checked state of a node not affects its parent and child nodes | boolean | — | false | +| emitPath | when checked nodes change, whether to emit an array of node's path, if false, only emit the value of node. | boolean | — | true | +| lazy | whether to dynamic load child nodes, use with `lazyload` attribute | boolean | — | false | +| lazyLoad | method for loading child nodes data, only works when `lazy` is true | function(node, resolve) | — | — | | value | specify which key of node object is used as the node's value | string | — | 'value' | | label | specify which key of node object is used as the node's label | string | — | 'label' | | children | specify which key of node object is used as the node's children | string | — | 'children' | diff --git a/docs/en-US/component/form.md b/docs/en-US/component/form.md index f8005a7b41..dd3382d4a6 100644 --- a/docs/en-US/component/form.md +++ b/docs/en-US/component/form.md @@ -147,7 +147,7 @@ form/accessibility | Method | Description | Type | | --------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -| `validate` | Validate the whole form. Receives a callback or returns `Promise`. | `(callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise` | +| `validate` | Validate the whole form. Receives a callback or returns `Promise`. | `(callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise` | | `validateField` | Validate specified fields. | `(props?: Arrayable, callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise` | | `resetFields` | Reset specified fields and remove validation result. | `(props?: Arrayable) => void` | | `scrollToField` | Scroll to the specified fields. | `(prop: FormItemProp) => void` | diff --git a/docs/en-US/component/table.md b/docs/en-US/component/table.md index 826db890f0..d2ac2ed8c4 100644 --- a/docs/en-US/component/table.md +++ b/docs/en-US/component/table.md @@ -238,7 +238,7 @@ table/table-layout | max-height | Table's max-height. The legal value is a number or the height in px. | string / number | — | — | | stripe | whether Table is striped | boolean | — | false | | border | whether Table has vertical border | boolean | — | false | -| size | size of Table | string | large / default /small | default | +| size | size of Table | string | large / default /small | — | | fit | whether width of column automatically fits its container | boolean | — | true | | show-header | whether Table header is visible | boolean | — | true | | highlight-current-row | whether current row is highlighted | boolean | — | false | diff --git a/docs/en-US/guide/quickstart.md b/docs/en-US/guide/quickstart.md index 81e3f46858..24a91c8520 100644 --- a/docs/en-US/guide/quickstart.md +++ b/docs/en-US/guide/quickstart.md @@ -228,4 +228,4 @@ We can also use [Nuxt.js](https://v3.nuxtjs.org/)： ## Let's Get Started You can bootstrap your project from now on. For each components usage, please -refer to the individual component documentation. +refer to [the individual component documentation](https://element-plus.org/en-US/component/button.html). diff --git a/docs/examples/statistic/card.vue b/docs/examples/statistic/card.vue index 137dea9b1b..468ca460bf 100644 --- a/docs/examples/statistic/card.vue +++ b/docs/examples/statistic/card.vue @@ -28,15 +28,6 @@ -
- two days ago - - 17% - - - - -
@@ -59,15 +50,6 @@
-
- year on year - - 24% - - - - -
month on month diff --git a/docs/examples/statistic/countdown.vue b/docs/examples/statistic/countdown.vue index f9cf0e0f4f..940394258f 100644 --- a/docs/examples/statistic/countdown.vue +++ b/docs/examples/statistic/countdown.vue @@ -14,17 +14,17 @@ - + -
2023-01-01 00:00:00
+
{{ value2.format('YYYY-MM-DD') }}
 @@ -36,7 +36,7 @@ import { Calendar } from '@element-plus/icons-vue' const value = ref(Date.now() + 1000 * 60 * 60 * 7) const value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2) -const value2 = ref(dayjs('2023-01-01 00:00:00')) +const value2 = ref(dayjs().add(1, 'month').startOf('month')) function reset() { value1.value = Date.now() + 1000 * 60 * 60 * 24 * 2 diff --git a/packages/components/descriptions/src/token.ts b/packages/components/descriptions/src/token.ts index 27be7e16b9..5ef1fa2f10 100644 --- a/packages/components/descriptions/src/token.ts +++ b/packages/components/descriptions/src/token.ts @@ -1,5 +1,5 @@ import type { InjectionKey } from 'vue' import type { IDescriptionsInject } from './descriptions.type' -export const descriptionsKey = - 'elDescriptions' as any as InjectionKey +export const descriptionsKey: InjectionKey = + Symbol('elDescriptions') diff --git a/packages/components/dropdown/src/dropdown-item-impl.vue b/packages/components/dropdown/src/dropdown-item-impl.vue index 0a6c5dcbf7..99f8a49e10 100644 --- a/packages/components/dropdown/src/dropdown-item-impl.vue +++ b/packages/components/dropdown/src/dropdown-item-impl.vue @@ -14,12 +14,14 @@ :role="role" @click="(e) => $emit('clickimpl', e)" @focus="handleFocus" - @keydown="handleKeydown" + @keydown.self="handleKeydown" @mousedown="handleMousedown" @pointermove="(e) => $emit('pointermove', e)" @pointerleave="(e) => $emit('pointerleave', e)" > - + + + diff --git a/packages/components/dropdown/src/dropdown-item.vue b/packages/components/dropdown/src/dropdown-item.vue index 12e427cd7d..5868a75a99 100644 --- a/packages/components/dropdown/src/dropdown-item.vue +++ b/packages/components/dropdown/src/dropdown-item.vue @@ -62,11 +62,27 @@ export default defineComponent({ whenMouse((e) => { if (props.disabled) { onItemLeave(e) - } else { - onItemEnter(e) - if (!e.defaultPrevented) { - ;(e.currentTarget as HTMLElement)?.focus() - } + return + } + + const target = e.currentTarget as HTMLElement + /** + * This handles the following scenario: + * when the item contains a form element such as input element + * when the mouse is moving over the element itself which is contained by + * the item, the default focusing logic should be prevented so that + * it won't cause weird action. + */ + if ( + target === document.activeElement || + target.contains(document.activeElement) + ) { + return + } + + onItemEnter(e) + if (!e.defaultPrevented) { + target?.focus() } }) ) diff --git a/packages/components/dropdown/src/dropdown-menu.vue b/packages/components/dropdown/src/dropdown-menu.vue index 98ec993fa0..5da454cdfd 100644 --- a/packages/components/dropdown/src/dropdown-menu.vue +++ b/packages/components/dropdown/src/dropdown-menu.vue @@ -8,8 +8,8 @@ :aria-labelledby="triggerId" @blur="onBlur" @focus="onFocus" - @keydown="handleKeydown" - @mousedown="onMousedown" + @keydown.self="handleKeydown" + @mousedown.self="onMousedown" > diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue index 15a9561135..036c5e9b34 100644 --- a/packages/components/input/src/input.vue +++ b/packages/components/input/src/input.vue @@ -327,17 +327,17 @@ useResizeObserver(textarea, (entries) => { const resizeTextarea = () => { const { type, autosize } = props - if (!isClient || type !== 'textarea') return + if (!isClient || type !== 'textarea' || !textarea.value) return if (autosize) { const minRows = isObject(autosize) ? autosize.minRows : undefined const maxRows = isObject(autosize) ? autosize.maxRows : undefined textareaCalcStyle.value = { - ...calcTextareaHeight(textarea.value!, minRows, maxRows), + ...calcTextareaHeight(textarea.value, minRows, maxRows), } } else { textareaCalcStyle.value = { - minHeight: calcTextareaHeight(textarea.value!).minHeight, + minHeight: calcTextareaHeight(textarea.value).minHeight, } } } diff --git a/packages/components/select-v2/src/token.ts b/packages/components/select-v2/src/token.ts index e078b990b2..b85f8eb36a 100644 --- a/packages/components/select-v2/src/token.ts +++ b/packages/components/select-v2/src/token.ts @@ -13,7 +13,8 @@ export interface SelectV2Context { onKeyboardSelect: () => void } -export const selectV2InjectionKey = - 'ElSelectV2Injection' as any as InjectionKey +export const selectV2InjectionKey: InjectionKey = Symbol( + 'ElSelectV2Injection' +) export type IOptionProps = ExtractPropTypes export type ISelectProps = ExtractPropTypes diff --git a/packages/components/select/src/token.ts b/packages/components/select/src/token.ts index 9218fad359..af8cea4cab 100644 --- a/packages/components/select/src/token.ts +++ b/packages/components/select/src/token.ts @@ -35,10 +35,10 @@ export interface SelectContext { } // For individual build sharing injection key, we had to make `Symbol` to string -export const selectGroupKey = - 'ElSelectGroup' as unknown as InjectionKey +export const selectGroupKey: InjectionKey = + Symbol('ElSelectGroup') -export const selectKey = 'ElSelect' as unknown as InjectionKey +export const selectKey: InjectionKey = Symbol('ElSelect') export interface SelectOptionProxy { value: string | number | Record diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts index 55d8a283a4..9df178d8e1 100644 --- a/packages/components/select/src/useSelect.ts +++ b/packages/components/select/src/useSelect.ts @@ -557,7 +557,7 @@ export const useSelect = (props, states: States, ctx) => { const handleResize = () => { resetInputWidth() tooltipRef.value?.updatePopper?.() - if (props.multiple && !props.filterable) resetInputHeight() + if (props.multiple) resetInputHeight() } const resetInputWidth = () => { diff --git a/packages/components/table/__tests__/table.test.ts b/packages/components/table/__tests__/table.test.ts index 31a34c5728..5f5bfaf728 100644 --- a/packages/components/table/__tests__/table.test.ts +++ b/packages/components/table/__tests__/table.test.ts @@ -358,7 +358,7 @@ describe('Table.vue', () => { const filter = document.body.querySelector('.el-table-filter') triggerEvent(filter.querySelector('.el-checkbox'), 'click', true, false) - // confrim button + // confirm button await doubleWait() triggerEvent( filter.querySelector('.el-table-filter__bottom button'), @@ -386,7 +386,7 @@ describe('Table.vue', () => { const filter = document.body.querySelector('.el-table-filter') triggerEvent(filter.querySelector('.el-checkbox'), 'click', true, false) - // confrim button + // confirm button await doubleWait() triggerEvent( filter.querySelector('.el-table-filter__bottom button'), @@ -1173,7 +1173,7 @@ describe('Table.vue', () => { describe('tree', () => { let wrapper: VueWrapper afterEach(() => wrapper?.unmount()) - it('render tree structual data', async () => { + it('render tree structural data', async () => { wrapper = mount({ components: { ElTableColumn, diff --git a/packages/components/tree/src/model/tree-store.ts b/packages/components/tree/src/model/tree-store.ts index 9111772e54..98e07f95c5 100644 --- a/packages/components/tree/src/model/tree-store.ts +++ b/packages/components/tree/src/model/tree-store.ts @@ -107,18 +107,24 @@ export default class TreeStore { } } - getNode(data: TreeKey | TreeNodeData): Node { + getNode(data: TreeKey | TreeNodeData | Node): Node { if (data instanceof Node) return data const key = isObject(data) ? getNodeKey(this.key, data) : data return this.nodesMap[key] || null } - insertBefore(data: TreeNodeData, refData: TreeKey | TreeNodeData): void { + insertBefore( + data: TreeNodeData, + refData: TreeKey | TreeNodeData | Node + ): void { const refNode = this.getNode(refData) refNode.parent.insertBefore({ data }, refNode) } - insertAfter(data: TreeNodeData, refData: TreeKey | TreeNodeData): void { + insertAfter( + data: TreeNodeData, + refData: TreeKey | TreeNodeData | Node + ): void { const refNode = this.getNode(refData) refNode.parent.insertAfter({ data }, refNode) } diff --git a/packages/components/tree/src/tree.vue b/packages/components/tree/src/tree.vue index e9ef55c1f4..cc2b975088 100644 --- a/packages/components/tree/src/tree.vue +++ b/packages/components/tree/src/tree.vue @@ -349,14 +349,14 @@ export default defineComponent({ const insertBefore = ( data: TreeNodeData, - refNode: TreeKey | TreeNodeData + refNode: TreeKey | TreeNodeData | Node ) => { store.value.insertBefore(data, refNode) } const insertAfter = ( data: TreeNodeData, - refNode: TreeKey | TreeNodeData + refNode: TreeKey | TreeNodeData | Node ) => { store.value.insertAfter(data, refNode) } diff --git a/packages/components/virtual-list/src/builders/build-grid.ts b/packages/components/virtual-list/src/builders/build-grid.ts index d766439a72..66fd7d4681 100644 --- a/packages/components/virtual-list/src/builders/build-grid.ts +++ b/packages/components/virtual-list/src/builders/build-grid.ts @@ -326,11 +326,15 @@ const createGrid = ({ { atXStartEdge: computed(() => states.value.scrollLeft <= 0), atXEndEdge: computed( - () => states.value.scrollLeft >= estimatedTotalWidth.value + () => + states.value.scrollLeft >= + estimatedTotalWidth.value - unref(parsedWidth) ), atYStartEdge: computed(() => states.value.scrollTop <= 0), atYEndEdge: computed( - () => states.value.scrollTop >= estimatedTotalHeight.value + () => + states.value.scrollTop >= + estimatedTotalHeight.value - unref(parsedHeight) ), }, (x: number, y: number) => { diff --git a/packages/components/virtual-list/src/hooks/use-grid-wheel.ts b/packages/components/virtual-list/src/hooks/use-grid-wheel.ts index d8f3f8e987..4358ce4f5a 100644 --- a/packages/components/virtual-list/src/hooks/use-grid-wheel.ts +++ b/packages/components/virtual-list/src/hooks/use-grid-wheel.ts @@ -1,4 +1,4 @@ -import { cAF, isFirefox, rAF } from '@element-plus/utils' +import { cAF, rAF } from '@element-plus/utils' import type { ComputedRef } from 'vue' @@ -21,9 +21,9 @@ export const useGridWheel = ( const hasReachedEdge = (x: number, y: number) => { const xEdgeReached = - (x < 0 && atXStartEdge.value) || (x > 0 && atXEndEdge.value) + (x <= 0 && atXStartEdge.value) || (x >= 0 && atXEndEdge.value) const yEdgeReached = - (y < 0 && atYStartEdge.value) || (y > 0 && atYEndEdge.value) + (y <= 0 && atYStartEdge.value) || (y >= 0 && atYEndEdge.value) return xEdgeReached && yEdgeReached } @@ -54,9 +54,7 @@ export const useGridWheel = ( xOffset += x yOffset += y - if (!isFirefox()) { - e.preventDefault() - } + e.preventDefault() frameHandle = rAF(() => { onWheelDelta(xOffset, yOffset) diff --git a/packages/locale/lang/th.ts b/packages/locale/lang/th.ts index 1c1efb885a..fa3c470340 100644 --- a/packages/locale/lang/th.ts +++ b/packages/locale/lang/th.ts @@ -45,18 +45,18 @@ export default { sat: 'ส', }, months: { - jan: 'มกรา', - feb: 'กุมภา', - mar: 'มีนา', - apr: 'เมษา', - may: 'พฤษภา', - jun: 'มิถุนา', - jul: 'กรกฎา', - aug: 'สิงหา', - sep: 'กันยา', - oct: 'ตุลา', - nov: 'พฤศจิกา', - dec: 'ธันวา', + jan: 'ม.ค.', + feb: 'ก.พ.', + mar: 'มี.ค.', + apr: 'เม.ย.', + may: 'พ.ค.', + jun: 'มิ.ย.', + jul: 'ก.ค.', + aug: 'ส.ค.', + sep: 'ก.ย.', + oct: 'ต.ค.', + nov: 'พ.ย.', + dec: 'ธ.ค.', }, }, select: { diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss index b4a7dedd57..d0365856b0 100644 --- a/packages/theme-chalk/src/table.scss +++ b/packages/theme-chalk/src/table.scss @@ -170,6 +170,7 @@ white-space: normal; word-break: break-all; line-height: 23px; + padding: 0 12px; &.#{$namespace}-tooltip { white-space: nowrap;