Merge pull request #12121 from element-plus/dev

D2M
element-plus · Mar 19, 2023 · 54c4e15 · 54c4e15
2 parents df7acd8 + e3386d3
commit 54c4e15
Show file tree

Hide file tree

Showing 17 changed files with 286 additions and 12 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,22 @@
 ## Changelog
 
+### 2.3.1
+
+_2023-03-19_
+
+#### Bug fixes
+
+- Components [select] iOS keyboard not appear when focus (#11498 by @MrWeilian)
+- Components [cascader] clickoutside (#11997 by @chenxch)
+- Components [table-column] first default column set placeholder (#11705 by @MrWeilian)
+- Components [input-number] modelValue incorrect update (#12007 by @Mario34)
+- Hooks vm may be null (#12058 by @liulinboyi)
+- Hooks [use-delayed-toggle] clear timer when call onClose (#12056 by @wangcch)
+- Style [message-box] border box (#12086 by @jw-foss)
+- Style(theme-chalk): use variable instead of '-' (#11889 by @fishermanxzx)
+- Style(theme-chalk): [select-v2] text overflow (#11969 by @emojiiii)
+- Style(components): [input] update exceed style (#12094 by @btea)
+
 ### 2.3.0
 
 _2023-03-12_

diff --git a/docs/.vitepress/vitepress/components/globals/contributors.vue b/docs/.vitepress/vitepress/components/globals/contributors.vue
@@ -8,6 +8,10 @@ const props = defineProps<{ id: string }>()
 const contributors = computed(() =>
   _contributors[props.id]?.filter((c) => c.login !== 'renovate[bot]')
 )
+
+const withSize = (rawURL: string) => {
+  return `${rawURL}${rawURL.includes('?') ? '&' : '?'}size=64`
+}
 </script>
 
 <template>
@@ -19,7 +23,11 @@ const contributors = computed(() =>
           class="flex gap-2 items-center link"
           no-icon
         >
-          <img :src="c.avatar" class="w-8 h-8 rounded-full" />
+          <img
+            :src="withSize(c.avatar)"
+            class="w-8 h-8 rounded-full"
+            loading="lazy"
+          />
           {{ c.name }}
         </vp-link>
       </div>

diff --git a/docs/en-US/component/cascader.md b/docs/en-US/component/cascader.md
@@ -194,6 +194,7 @@ cascader/panel
 | getCheckedNodes     | get an array of currently selected node,(leafOnly) whether only return the leaf checked nodes, default is `false` | ^[Function]`(leafOnly: boolean) => CascaderNode[] \| undefined` |
 | cascaderPanelRef    | cascader panel ref                                                                                                | ^[object]`ComputedRef<any>`                                     |
 | togglePopperVisible | toggle the visible type of popper                                                                                 | ^[Function]`(visible?: boolean) => void`                        |
+| contentRef          | cascader content ref                                                                                              | ^[object]`ComputedRef<any>`                                     |
 
 ## CascaderPanel API
 

diff --git a/packages/components/cascader/src/cascader.vue b/packages/components/cascader/src/cascader.vue
@@ -24,7 +24,7 @@
   >
     <template #default>
       <div
-        v-clickoutside:[cascaderPanelRef]="() => togglePopperVisible(false)"
+        v-clickoutside:[contentRef]="() => togglePopperVisible(false)"
         :class="cascaderKls"
         :style="cascaderStyle"
         @click="() => togglePopperVisible(readonly ? undefined : true)"
@@ -352,6 +352,10 @@ const inputClass = computed(() => {
   return nsCascader.is('focus', popperVisible.value || filterFocus.value)
 })
 
+const contentRef = computed(() => {
+  return tooltipRef.value?.popperRef?.contentRef
+})
+
 const togglePopperVisible = (visible?: boolean) => {
   if (isDisabled.value) return
 
@@ -685,5 +689,9 @@ defineExpose({
    * @description toggle the visible of popper
    */
   togglePopperVisible,
+  /**
+   * @description cascader content ref
+   */
+  contentRef,
 })
 </script>
diff --git a/packages/components/input-number/__tests__/input-number.test.tsx b/packages/components/input-number/__tests__/input-number.test.tsx
@@ -47,6 +47,7 @@ describe('InputNumber.vue', () => {
       'null'
     )
   })
+
   // fix: #10328
   test('Make sure the input action can trigger the modelValue update', async () => {
     const num = ref<number>(0)
@@ -65,6 +66,20 @@ describe('InputNumber.vue', () => {
     await nextTick()
     expect(num.value).toEqual(3)
   })
+
+  // fix: #11963
+  test('Make sure modelValue correct update when no initial value', async () => {
+    const num = ref<number>()
+    const wrapper = mount(() => <InputNumber v-model={num.value} />)
+    const inputWrapper = wrapper.find('input')
+    const nativeInput = inputWrapper.element
+    nativeInput.value = '1'
+    await inputWrapper.trigger('input')
+    nativeInput.value = ''
+    await inputWrapper.trigger('input')
+    expect(num.value).toEqual(null)
+  })
+
   test('min', async () => {
     const num = ref(1)
     const wrapper = mount(() => <InputNumber min={3} v-model={num.value} />)

diff --git a/packages/components/input-number/src/input-number.vue b/packages/components/input-number/src/input-number.vue
@@ -224,11 +224,11 @@ const setCurrentValue = (
 ) => {
   const oldVal = data.currentValue
   const newVal = verifyValue(value)
-  if (oldVal === newVal) return
   if (!emitChange) {
     emit(UPDATE_MODEL_EVENT, newVal!)
     return
   }
+  if (oldVal === newVal) return
   data.userInput = null
   emit(UPDATE_MODEL_EVENT, newVal!)
   emit(CHANGE_EVENT, newVal!, oldVal!)

diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
@@ -173,6 +173,18 @@
               @input="debouncedQueryChange"
             />
           </div>
+          <!-- fix: https://github.com/element-plus/element-plus/issues/11415 -->
+          <input
+            v-if="isIOS && !multiple && filterable && readonly"
+            ref="iOSInput"
+            :class="[
+              nsSelect.e('input'),
+              nsSelect.is(selectSize),
+              nsSelect.em('input', 'iOS'),
+            ]"
+            :disabled="selectDisabled"
+            type="text"
+          />
           <el-input
             :id="id"
             ref="reference"
@@ -283,7 +295,7 @@ import {
   toRefs,
   unref,
 } from 'vue'
-import { useResizeObserver } from '@vueuse/core'
+import { isIOS, useResizeObserver } from '@vueuse/core'
 import { placements } from '@popperjs/core'
 import { ClickOutside } from '@element-plus/directives'
 import { useFocus, useLocale, useNamespace } from '@element-plus/hooks'
@@ -482,6 +494,7 @@ export default defineComponent({
 
       reference,
       input,
+      iOSInput,
       tooltipRef,
       tags,
       selectWrapper,
@@ -610,6 +623,7 @@ export default defineComponent({
     }
 
     return {
+      isIOS,
       onOptionsRendered,
       tagInMultiLine,
       prefixWidth,
@@ -666,6 +680,7 @@ export default defineComponent({
 
       reference,
       input,
+      iOSInput,
       tooltipRef,
       popperPaneRef,
       tags,

diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
@@ -87,6 +87,7 @@ export const useSelect = (props, states: States, ctx) => {
     input: HTMLInputElement
   }> | null>(null)
   const input = ref<HTMLInputElement | null>(null)
+  const iOSInput = ref<HTMLInputElement | null>(null)
   const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)
   const tags = ref<HTMLElement | null>(null)
   const selectWrapper = ref<HTMLElement | null>(null)
@@ -303,6 +304,7 @@ export const useSelect = (props, states: States, ctx) => {
         if (props.filterable) {
           states.filteredOptionsCount = states.optionsCount
           states.query = props.remote ? '' : states.selectedLabel
+          iOSInput.value?.focus?.()
           if (props.multiple) {
             input.value?.focus()
           } else {
@@ -790,6 +792,7 @@ export const useSelect = (props, states: States, ctx) => {
   const blur = () => {
     states.visible = false
     reference.value?.blur()
+    iOSInput.value?.blur?.()
   }
 
   const handleBlur = (event: FocusEvent) => {
@@ -954,6 +957,7 @@ export const useSelect = (props, states: States, ctx) => {
     // DOM ref
     reference,
     input,
+    iOSInput,
     tooltipRef,
     tags,
     selectWrapper,

diff --git a/packages/components/table/src/table-column/render-helper.ts b/packages/components/table/src/table-column/render-helper.ts
@@ -152,10 +152,13 @@ function useRender<T>(
         } else {
           children = originRenderCell(data)
         }
+
+        const { columns } = owner.value.store.states
+        const firstUserColumnIndex = columns.value.findIndex(
+          (item) => item.type === 'default'
+        )
         const shouldCreatePlaceholder =
-          hasTreeColumn.value &&
-          data.cellIndex === 0 &&
-          data.column.type !== 'selection'
+          hasTreeColumn.value && data.cellIndex === firstUserColumnIndex
         const prefix = treeCellPrefix(data, shouldCreatePlaceholder)
         const props = {
           class: 'cell',