Merge pull request #12281 from element-plus/dev

D2M

CHANGELOG.en-US.md

@@ -1,5 +1,24 @@
 ## Changelog
 
+### 2.3.2
+
+_2023-03-31_
+
+#### Features
+
+- Components [form] scroll-into-view options (#12164 by @ryuhangyeong)
+
+#### Bug fixes
+
+- Components [select-v2] reset hoverindex when close dropdown list (#12090 by @btea)
+- Components [input] scrollbar not hide after autosize (#10137 by @HeftyKoo)
+- Docs [tabs] example type error (#12160 by @bigsnowballhehe)
+- Components [input] textarea height calc (#12087 by @MrWeilian)
+- Components [select] multiple disabled style (#12015 by @MrWeilian)
+- Components [pagination] delete input value display empty string (#12134 by @btea)
+- Upload data is not independent (#12029 by @jianjunyuu)
+- Style(components): [Tabs] Modify tabs to flex layout (#12048 by @kooriookami)
+
 ### 2.3.1
 
 _2023-03-19_

docs/.vitepress/config/sponsors.ts

@@ -44,15 +44,7 @@ export const leftCustomImgSponsors = [
     slogan: 'JNPF low code development platform to develop simple!',
     slogan_cn: 'JNPF 低代码开发平台，让开发变得简单！',
     className: 'jnpf',
-    banner_img: '/images/jnpfsoft.jpg',
-  },
-  {
-    name: 'JeePlus',
-    img: '/images/sponsors/jeeplus.png',
-    url: 'http://www.jeeplus.org/#/demo?from=ele',
-    slogan: 'JeePlus development platform',
-    slogan_cn: 'JeePlus 快速开发平台',
-    banner_img: '/images/sponsors/jeeplus_banner.jpg',
+    banner_img: '/images/sponsors/jnpfsoft.jpg',
   },
 ]
 

docs/.vitepress/vitepress/styles/base.scss

@@ -255,6 +255,7 @@ details {
     margin: 16px 0;
     font-size: 18px;
     font-weight: 600;
+    cursor: pointer;
   }
 }
 

docs/en-US/component/form.md

@@ -125,23 +125,24 @@ form/accessibility
 
 ### Form Attributes
 
-| Name                      | Description                                                                                                                    | Type                                     | Default |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------- |
-| model                     | Data of form component.                                                                                                        | ^[object]`Record<string, any>`           | —       |
-| rules                     | Validation rules of form.                                                                                                      | ^[object]`FormRules`                     | —       |
-| inline                    | Whether the form is inline.                                                                                                    | ^[boolean]                               | false   |
-| label-position            | Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.                                       | ^[enum]`'left' \| 'right' \| 'top'`      | right   |
-| label-width               | Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported.                   | ^[string] / ^[number]                    | —       |
-| label-suffix              | Suffix of the label.                                                                                                           | ^[string]                                | —       |
-| hide-required-asterisk    | Whether to hide required fields should have a red asterisk (star) beside their labels.                                         | ^[boolean]                               | false   |
-| require-asterisk-position | Position of asterisk.                                                                                                          | ^[enum]`'left' \| 'right'`               | left    |
-| show-message              | Whether to show the error message.                                                                                             | ^[boolean]                               | true    |
-| inline-message            | Whether to display the error message inline with the form item.                                                                | ^[boolean]                               | false   |
-| status-icon               | Whether to display an icon indicating the validation result.                                                                   | ^[boolean]                               | false   |
-| validate-on-rule-change   | Whether to trigger validation when the `rules` prop is changed.                                                                | ^[boolean]                               | true    |
-| size                      | Control the size of components in this form.                                                                                   | ^[enum]`'large' \| 'default' \| 'small'` | —       |
-| disabled                  | Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component. | ^[boolean]                               | false   |
-| scroll-to-error           | When validation fails, scroll to the first error form entry.                                                                   | ^[boolean]                               | false   |
+| Name                      | Description                                                                                                                                                                              | Type                                     | Default |
+| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------- |
+| model                     | Data of form component.                                                                                                                                                                  | ^[object]`Record<string, any>`           | —       |
+| rules                     | Validation rules of form.                                                                                                                                                                | ^[object]`FormRules`                     | —       |
+| inline                    | Whether the form is inline.                                                                                                                                                              | ^[boolean]                               | false   |
+| label-position            | Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.                                                                                                 | ^[enum]`'left' \| 'right' \| 'top'`      | right   |
+| label-width               | Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported.                                                                             | ^[string] / ^[number]                    | —       |
+| label-suffix              | Suffix of the label.                                                                                                                                                                     | ^[string]                                | —       |
+| hide-required-asterisk    | Whether to hide required fields should have a red asterisk (star) beside their labels.                                                                                                   | ^[boolean]                               | false   |
+| require-asterisk-position | Position of asterisk.                                                                                                                                                                    | ^[enum]`'left' \| 'right'`               | left    |
+| show-message              | Whether to show the error message.                                                                                                                                                       | ^[boolean]                               | true    |
+| inline-message            | Whether to display the error message inline with the form item.                                                                                                                          | ^[boolean]                               | false   |
+| status-icon               | Whether to display an icon indicating the validation result.                                                                                                                             | ^[boolean]                               | false   |
+| validate-on-rule-change   | Whether to trigger validation when the `rules` prop is changed.                                                                                                                          | ^[boolean]                               | true    |
+| size                      | Control the size of components in this form.                                                                                                                                             | ^[enum]`'large' \| 'default' \| 'small'` | —       |
+| disabled                  | Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component.                                                           | ^[boolean]                               | false   |
+| scroll-to-error           | When validation fails, scroll to the first error form entry.                                                                                                                             | ^[boolean]                               | false   |
+| scroll-into-view-options  | When validation fails, it scrolls to the first error item based on the scrollIntoView option. [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). | ^[object] / ^[boolean]                   | —       |
 
 ### Form Methods
 

docs/examples/tabs/dynamic-tabs.vue

@@ -18,6 +18,7 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue'
+import type { TabPaneName } from 'element-plus'
 
 let tabIndex = 2
 const editableTabsValue = ref('2')
@@ -34,7 +35,10 @@ const editableTabs = ref([
   },
 ])
 
-const handleTabsEdit = (targetName: string, action: 'remove' | 'add') => {
+const handleTabsEdit = (
+  targetName: TabPaneName | undefined,
+  action: 'remove' | 'add'
+) => {
   if (action === 'add') {
     const newTabName = `${++tabIndex}`
     editableTabs.value.push({

docs/examples/upload/basic.vue

@@ -53,7 +53,7 @@ const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
 
 const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
   return ElMessageBox.confirm(
-    `Cancel the transfert of ${uploadFile.name} ?`
+    `Cancel the transfer of ${uploadFile.name} ?`
   ).then(
     () => true,
     () => false

packages/components/form/src/form.ts

@@ -104,6 +104,12 @@ export const formProps = buildProps({
    * @description When validation fails, scroll to the first error form entry.
    */
   scrollToError: Boolean,
+  /**
+   * @description When validation fails, it scrolls to the first error item based on the scrollIntoView option.
+   */
+  scrollIntoViewOptions: {
+    type: [Object, Boolean],
+  },
 } as const)
 export type FormProps = ExtractPropTypes<typeof formProps>
 export type FormMetaProps = ExtractPropTypes<typeof formMetaProps>

packages/components/form/src/form.vue

@@ -145,7 +145,7 @@ const validateField: FormContext['validateField'] = async (
 const scrollToField = (prop: FormItemProp) => {
   const field = filterFields(fields, prop)[0]
   if (field) {
-    field.$el?.scrollIntoView()
+    field.$el?.scrollIntoView(props.scrollIntoViewOptions)
   }
 }
 

packages/components/input/src/input.vue

@@ -313,6 +313,7 @@ const suffixVisible = computed(
 const [recordCursor, setCursor] = useCursor(input)
 
 useResizeObserver(textarea, (entries) => {
+  onceInitSizeTextarea()
   if (!isWordLimitVisible.value || props.resize !== 'both') return
   const entry = entries[0]
   const { width } = entry.contentRect
@@ -330,16 +331,43 @@ const resizeTextarea = () => {
   if (autosize) {
     const minRows = isObject(autosize) ? autosize.minRows : undefined
     const maxRows = isObject(autosize) ? autosize.maxRows : undefined
+    const textareaStyle = calcTextareaHeight(textarea.value, minRows, maxRows)
+
+    // If the scrollbar is displayed, the height of the textarea needs more space than the calculated height.
+    // If set textarea height in this case, the scrollbar will not hide.
+    // So we need to hide scrollbar first, and reset it in next tick.
+    // see https://github.com/element-plus/element-plus/issues/8825
     textareaCalcStyle.value = {
-      ...calcTextareaHeight(textarea.value, minRows, maxRows),
+      overflowY: 'hidden',
+      ...textareaStyle,
     }
+
+    nextTick(() => {
+      // NOTE: Force repaint to make sure the style set above is applied.
+      textarea.value!.offsetHeight
+      textareaCalcStyle.value = textareaStyle
+    })
   } else {
     textareaCalcStyle.value = {
       minHeight: calcTextareaHeight(textarea.value).minHeight,
     }
   }
 }
 
+const createOnceInitResize = (resizeTextarea: () => void) => {
+  let isInit = false
+  return () => {
+    if (isInit || !props.autosize) return
+    const isElHidden = textarea.value?.offsetParent === null
+    if (!isElHidden) {
+      resizeTextarea()
+      isInit = true
+    }
+  }
+}
+// fix: https://github.com/element-plus/element-plus/issues/12074
+const onceInitSizeTextarea = createOnceInitResize(resizeTextarea)
+
 const setNativeInputValue = () => {
   const input = _ref.value
   if (!input || input.value === nativeInputValue.value) return

packages/components/pagination/src/components/jumper.vue

@@ -35,16 +35,16 @@ defineProps(paginationJumperProps)
 const { t } = useLocale()
 const ns = useNamespace('pagination')
 const { pageCount, disabled, currentPage, changeEvent } = usePagination()
-const userInput = ref<number>()
+const userInput = ref<number | string>()
 const innerValue = computed(() => userInput.value ?? currentPage?.value)
 
 function handleInput(val: number | string) {
-  userInput.value = +val
+  userInput.value = val ? +val : ''
 }
 
 function handleChange(val: number | string) {
   val = Math.trunc(+val)
-  changeEvent?.(+val)
+  changeEvent?.(val)
   userInput.value = undefined
 }
 </script>

packages/components/select-v2/src/useSelect.ts

@@ -746,6 +746,15 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
     return nextTick(menuRef.value.resetScrollTop)
   })
 
+  watch(
+    () => dropdownMenuVisible.value,
+    (val) => {
+      if (!val) {
+        resetHoveringIndex()
+      }
+    }
+  )
+
   onMounted(() => {
     initStates()
   })

packages/components/select/src/select.vue

@@ -33,7 +33,10 @@
           <div
             v-if="multiple"
             ref="tags"
-            :class="nsSelect.e('tags')"
+            :class="[
+              nsSelect.e('tags'),
+              nsSelect.is('disabled', selectDisabled),
+            ]"
             :style="selectTagsStyle"
           >
             <transition
@@ -145,7 +148,11 @@
               ref="input"
               v-model="query"
               type="text"
-              :class="[nsSelect.e('input'), nsSelect.is(selectSize)]"
+              :class="[
+                nsSelect.e('input'),
+                nsSelect.is(selectSize),
+                nsSelect.is('disabled', selectDisabled),
+              ]"
               :disabled="selectDisabled"
               :autocomplete="autocomplete"
               :style="{

packages/components/upload/src/upload-content.vue

@@ -28,12 +28,15 @@
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
+import { isObject } from '@vue/shared'
+import { cloneDeep } from 'lodash-unified'
 import { useNamespace } from '@element-plus/hooks'
 import { entriesOf } from '@element-plus/utils'
 import { useFormDisabled } from '@element-plus/components/form'
 import UploadDragger from './upload-dragger.vue'
 import { uploadContentProps } from './upload-content'
 import { genFileId } from './upload'
+import type { UploadContentProps } from './upload-content'
 
 import type {
   UploadFile,
@@ -86,8 +89,12 @@ const upload = async (rawFile: UploadRawFile) => {
   }
 
   let hookResult: Exclude<ReturnType<UploadHooks['beforeUpload']>, Promise<any>>
+  let beforeData: UploadContentProps['data'] = {}
+
   try {
-    hookResult = await props.beforeUpload(rawFile)
+    const beforeUploadPromise = props.beforeUpload(rawFile)
+    beforeData = isObject(props.data) ? cloneDeep(props.data) : props.data
+    hookResult = await beforeUploadPromise
   } catch {
     hookResult = false
   }
@@ -111,11 +118,15 @@ const upload = async (rawFile: UploadRawFile) => {
   doUpload(
     Object.assign(file, {
       uid: rawFile.uid,
-    })
+    }),
+    beforeData
   )
 }
 
-const doUpload = (rawFile: UploadRawFile) => {
+const doUpload = (
+  rawFile: UploadRawFile,
+  beforeData?: UploadContentProps['data']
+) => {
   const {
     headers,
     data,
@@ -134,7 +145,7 @@ const doUpload = (rawFile: UploadRawFile) => {
     headers: headers || {},
     withCredentials,
     file: rawFile,
-    data,
+    data: beforeData ?? data,
     method,
     filename,
     action,

packages/theme-chalk/src/select.scss

@@ -175,6 +175,10 @@
     height: 28px;
     background-color: transparent;
 
+    @include when(disabled) {
+      cursor: not-allowed;
+    }
+
     &--iOS {
       position: absolute;
       left: 0;
@@ -208,6 +212,9 @@
     top: 50%;
     transform: translateY(-50%);
     @include select-tag-normal;
+    @include when(disabled) {
+      cursor: not-allowed;
+    }
   }
 
   @include e(collapse-tags) {