Merge pull request #116 from element-plus/dev

update

docs/.vitepress/crowdin/en-US/pages/component.json

@@ -142,6 +142,11 @@
         "link": "/transfer",
         "text": "Transfer"
       },
+      {
+        "link": "/tree-select",
+        "text": "TreeSelect",
+        "promotion": "2.1.8"
+      },
       {
         "link": "/upload",
         "text": "Upload"
@@ -233,11 +238,6 @@
         "link": "/tree",
         "text": "Tree"
       },
-      {
-        "link": "/tree-select",
-        "text": "TreeSelect",
-        "promotion": "2.1.8"
-      },
       {
         "link": "/tree-v2",
         "text": "Virtualized Tree"

docs/.vitepress/vitepress/components/vp-sponsors.vue

@@ -10,15 +10,15 @@ const sponsor = computed(() => sponsorLocale[lang.value])
 </script>
 
 <template>
-  <div class="page-content-main-a">
+  <div class="page-content-main-b">
     <p class="title">{{ sponsor.sponsoredBy }}</p>
     <VPSponsorLarge />
     <VPSponsorSmall />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.page-content-main-a {
+.page-content-main-b {
   padding-bottom: 10px;
   padding-top: 0;
   .title {

docs/en-US/component/select-v2.md

@@ -209,6 +209,16 @@ select-v2/empty-values
 
 :::
 
+## Custom Label ^(2.7.4)
+
+You can customize label.
+
+:::demo
+
+select-v2/custom-label
+
+:::
+
 ## API
 
 ### Attributes
@@ -290,6 +300,7 @@ select-v2/empty-values
 | prefix           | prefix content of input               |
 | tag ^(2.5.0)     | content as Select tag                 |
 | loading ^(2.5.2) | content as Select loading             |
+| label ^(2.7.4)   | content as Select label               |
 
 ### Exposes
 

docs/en-US/component/select.md

@@ -9,7 +9,7 @@ When there are plenty of options, use a drop-down menu to display and select des
 
 :::tip
 
-After version ^(2.5.0), the default width of `el-select` changed to `100%`. When used in a inline form, the width will collapse. In order to display the width properly, you need to give `el-select` a specific width.
+After version ^(2.5.0), the default width of `el-select` changed to `100%`. When used in a inline form, the width will collapse. In order to display the width properly, you need to give `el-select` a specific width  (eg: [Example](https://github.com/element-plus/element-plus/issues/15834#issuecomment-1936919229)) .
 
 :::
 
@@ -177,6 +177,16 @@ select/empty-values
 
 :::
 
+## Custom Label ^(2.7.4)
+
+You can customize label.
+
+:::demo
+
+select/custom-label
+
+:::
+
 ## Select API
 
 ### Select Attributes
@@ -254,6 +264,7 @@ select/empty-values
 | empty            | content when there is no options      | —                     |
 | tag ^(2.5.0)     | content as Select tag                 | —                     |
 | loading ^(2.5.2) | content as Select loading             | —                     |
+| label ^(2.7.4)   | content as Select label               | —                     |
 
 ### Select Exposes
 

docs/examples/form/size-control.vue

@@ -13,7 +13,6 @@
   </div>
   <br />
   <el-form
-    ref="form"
     style="max-width: 600px"
     :model="sizeForm"
     label-width="auto"

docs/examples/select-v2/custom-label.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-wrap gap-4 items-center">
+    <el-select-v2
+      v-model="value1"
+      :options="options"
+      placeholder="Select"
+      style="width: 240px"
+      clearable
+    >
+      <template #label="{ label, value }">
+        <span>{{ label }}: </span>
+        <span style="font-weight: bold">{{ value }}</span>
+      </template>
+    </el-select-v2>
+
+    <el-select-v2
+      v-model="value2"
+      :options="options"
+      placeholder="Select"
+      style="width: 240px"
+      clearable
+      multiple
+    >
+      <template #label="{ label, value }">
+        <span>{{ label }}: </span>
+        <span style="font-weight: bold">{{ value }}</span>
+      </template>
+    </el-select-v2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
+const value1 = ref<string>('Option 1')
+const value2 = ref<string[]>(['Option 1'])
+const options = Array.from({ length: 1000 }).map((_, idx) => ({
+  value: `Option ${idx + 1}`,
+  label: `${initials[idx % 10]}${idx}`,
+}))
+</script>
+
+<style scoped></style>

docs/examples/select/custom-label.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="flex flex-wrap gap-4 items-center">
+    <el-select
+      v-model="value1"
+      placeholder="Select"
+      style="width: 240px"
+      clearable
+    >
+      <template #label="{ label, value }">
+        <span>{{ label }}: </span>
+        <span style="font-weight: bold">{{ value }}</span>
+      </template>
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+
+    <el-select
+      v-model="value2"
+      placeholder="Select"
+      style="width: 240px"
+      clearable
+      multiple
+    >
+      <template #label="{ label, value }">
+        <span>{{ label }}: </span>
+        <span style="font-weight: bold">{{ value }}</span>
+      </template>
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const value1 = ref<string>('Option1')
+const value2 = ref<string[]>(['Option1'])
+const options = [
+  {
+    value: 'Option1',
+    label: 'Label1',
+  },
+  {
+    value: 'Option2',
+    label: 'Label2',
+  },
+  {
+    value: 'Option3',
+    label: 'Label3',
+  },
+  {
+    value: 'Option4',
+    label: 'Label4',
+  },
+  {
+    value: 'Option5',
+    label: 'Label5',
+  },
+]
+</script>
+
+<style scoped></style>

docs/examples/tree/custom-node-class.vue

@@ -89,7 +89,7 @@ const data: Tree[] = [
   color: #626aef;
 }
 
-.el-tree-node.is-penultimate > .el-tree-node__children {
+.el-tree .el-tree-node.is-penultimate > .el-tree-node__children {
   display: flex;
   flex-direction: row;
 }

package.json

@@ -135,6 +135,9 @@
         "react",
         "react-dom"
       ]
+    },
+    "patchedDependencies": {
+      "async-validator@4.2.5": "patches/async-validator@4.2.5.patch"
     }
   },
   "lint-staged": {

packages/components/color-picker/src/color-picker.vue

@@ -62,6 +62,7 @@
       <div
         :id="buttonId"
         ref="triggerRef"
+        v-bind="$attrs"
         :class="btnKls"
         role="button"
         :aria-label="buttonAriaLabel"

packages/components/select-v2/__tests__/select.test.ts

@@ -559,6 +559,7 @@ describe('Select', () => {
     })
 
     it('remove-tag', async () => {
+      const onRemoveTag = vi.fn()
       const wrapper = createSelect({
         data() {
           return {
@@ -567,9 +568,7 @@ describe('Select', () => {
           }
         },
         methods: {
-          onRemoveTag(tag) {
-            this.removeTag = tag
-          },
+          onRemoveTag,
         },
       })
       await nextTick()
@@ -587,6 +586,11 @@ describe('Select', () => {
       expect(vm.value.length).toBe(2)
       await tagCloseIcons[0].trigger('click')
       expect(vm.value.length).toBe(1)
+
+      const input = wrapper.find('input')
+      input.trigger('keydown.delete')
+      expect(vm.value.length).toBe(0)
+      expect(onRemoveTag).toHaveBeenLastCalledWith('option_3')
     })
 
     it('limit', async () => {
@@ -1557,7 +1561,7 @@ describe('Select', () => {
     selectVm.onKeyboardNavigate('backward')
     await nextTick()
     // navigate to the last one
-    expect(selectVm.states.hoveringIndex).toBe(9)
+    expect(selectVm.states.hoveringIndex).toBe(8)
     selectVm.onKeyboardSelect()
     await nextTick()
     expect(vm.value).toEqual([6])

packages/components/select-v2/src/group-item.vue

@@ -1,17 +1,10 @@
 <template>
   <div
-    v-if="item.isTitle"
     :class="ns.be('group', 'title')"
     :style="[style, { lineHeight: `${height}px` }]"
   >
     {{ item.label }}
   </div>
-  <div v-else :class="ns.be('group', 'split')" :style="style">
-    <span
-      :class="ns.be('group', 'split-dash')"
-      :style="{ top: `${height / 2}px` }"
-    />
-  </div>
 </template>
 
 <script lang="ts">

packages/components/select-v2/src/select.vue

@@ -68,7 +68,13 @@
                   @close="deleteTag($event, item)"
                 >
                   <span :class="nsSelect.e('tags-text')">
-                    {{ getLabel(item) }}
+                    <slot
+                      name="label"
+                      :label="getLabel(item)"
+                      :value="getValue(item)"
+                    >
+                      {{ getLabel(item) }}
+                    </slot>
                   </span>
                 </el-tag>
               </div>
@@ -116,7 +122,13 @@
                         @close="deleteTag($event, selected)"
                       >
                         <span :class="nsSelect.e('tags-text')">
-                          {{ getLabel(selected) }}
+                          <slot
+                            name="label"
+                            :label="getLabel(selected)"
+                            :value="getValue(selected)"
+                          >
+                            {{ getLabel(selected) }}
+                          </slot>
                         </span>
                       </el-tag>
                     </div>
@@ -182,7 +194,15 @@
                 ),
               ]"
             >
-              <span>{{ currentPlaceholder }}</span>
+              <slot
+                v-if="hasModelValue"
+                name="label"
+                :label="currentPlaceholder"
+                :value="modelValue"
+              >
+                <span>{{ currentPlaceholder }}</span>
+              </slot>
+              <span v-else>{{ currentPlaceholder }}</span>
             </div>
           </div>
           <div ref="suffixRef" :class="nsSelect.e('suffix')">

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

@@ -203,11 +203,9 @@ const useSelect = (props: ISelectV2Props, emit) => {
           all.push(
             {
               label: getLabel(item),
-              isTitle: true,
               type: 'Group',
             },
-            ...filtered,
-            { type: 'Group' }
+            ...filtered
           )
         }
       } else if (props.remote || isValidOption(item)) {
@@ -582,11 +580,13 @@ const useSelect = (props: ISelectV2Props, emit) => {
       const selected = (props.modelValue as Array<any>).slice()
       const lastNotDisabledIndex = getLastNotDisabledIndex(selected)
       if (lastNotDisabledIndex < 0) return
+      const removeTagValue = selected[lastNotDisabledIndex]
       selected.splice(lastNotDisabledIndex, 1)
       const option = states.cachedOptions[lastNotDisabledIndex]
       states.cachedOptions.splice(lastNotDisabledIndex, 1)
       removeNewOption(option)
       update(selected)
+      emit('remove-tag', removeTagValue)
     }
   }