From a3e3acc0fc24cfc4aa495579101ebd00fa8e96f3 Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Fri, 11 Mar 2022 02:56:35 -0500
Subject: [PATCH] feat(components): [select-v2]add collapse-tags-tooltip
 (#6532)

* feat(components): [select-v2]add collapse-tags-tooltip

* feat(components): [select-v2]set fallback-placements

* feat(components): [select-v2]add collapse-tags-tooltip

* feat(components): [select-v2]set fallback-placements

* feat(components): [select-v2]add v-if on tooltip
---
 docs/en-US/component/select-v2.md             |  3 +
 docs/examples/select-v2/hide-extra-tags.vue   | 32 +++++++---
 .../select-v2/__tests__/select.spec.ts        | 62 +++++++++++++++++++
 packages/components/select-v2/src/defaults.ts |  4 ++
 packages/components/select-v2/src/select.vue  | 46 ++++++++++++++
 5 files changed, 139 insertions(+), 8 deletions(-)

diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md
index 0590db36ad..32a9c4bae3 100644
--- a/docs/en-US/component/select-v2.md
+++ b/docs/en-US/component/select-v2.md
@@ -39,6 +39,8 @@ select-v2/multiple
 
 ## Hide extra tags when the selected items are too many.
 
+You can collapse tags to a text by using `collapse-tags` attribute. You can check them when mouse hover collapse text by using `collapse-tags-tooltip` attribute.
+
 :::demo
 
 select-v2/hide-extra-tags
@@ -135,6 +137,7 @@ select-v2/remote-search
 | clearable                         | whether select can be cleared                                                                                                            | boolean                            | —                   | false         |
 | clear-icon                        | custom clear icon                                                                                                                        | string / component                 | —                   | CircleClose   |
 | collapse-tags                     | whether to collapse tags to a text when multiple selecting                                                                               | 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                            | true / false        | false         |
 | multiple-limit                    | maximum number of options user can select when multiple is true. No limit when set to 0                                                  | number                             | —                   | 0             |
 | name                              | the name attribute of select input                                                                                                       | string                             | —                   | —             |
 | effect                            | Tooltip theme, built-in theme: `dark` / `light`                                                                                          | string                             | string              | light         |
diff --git a/docs/examples/select-v2/hide-extra-tags.vue b/docs/examples/select-v2/hide-extra-tags.vue
index 3b5450de1d..3a468287d5 100644
--- a/docs/examples/select-v2/hide-extra-tags.vue
+++ b/docs/examples/select-v2/hide-extra-tags.vue
@@ -1,12 +1,27 @@
 <template>
-  <el-select-v2
-    v-model="value"
-    :options="options"
-    placeholder="Please select"
-    style="width: 240px"
-    multiple
-    collapse-tags
-  />
+  <div style="display: inline-block">
+    <p style="margin: 10px">use collapse-tags</p>
+    <el-select-v2
+      v-model="value"
+      :options="options"
+      placeholder="Please select"
+      style="width: 240px"
+      multiple
+      collapse-tags
+    />
+  </div>
+  <div style="display: inline-block; margin-left: 20px">
+    <p style="margin: 10px">use collapse-tags-tooltip</p>
+    <el-select-v2
+      v-model="value2"
+      :options="options"
+      placeholder="Please select"
+      style="width: 240px"
+      multiple
+      collapse-tags
+      collapse-tags-tooltip
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -14,6 +29,7 @@ import { ref } from 'vue'
 const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value = ref([])
+const value2 = ref([])
 const options = Array.from({ length: 1000 }).map((_, idx) => ({
   value: `Option ${idx + 1}`,
   label: `${initials[idx % 10]}${idx}`,
diff --git a/packages/components/select-v2/__tests__/select.spec.ts b/packages/components/select-v2/__tests__/select.spec.ts
index f6c5d11444..3fa7a394eb 100644
--- a/packages/components/select-v2/__tests__/select.spec.ts
+++ b/packages/components/select-v2/__tests__/select.spec.ts
@@ -52,6 +52,8 @@ interface SelectProps {
   disabled?: boolean
   clearable?: boolean
   multiple?: boolean
+  collapseTags?: boolean
+  collapseTagsTooltip?: boolean
   filterable?: boolean
   remote?: boolean
   multipleLimit?: number
@@ -101,6 +103,8 @@ const createSelect = (
         :disabled="disabled"
         :clearable="clearable"
         :multiple="multiple"
+        :collapseTags="collapseTags"
+        :collapseTagsTooltip="collapseTagsTooltip"
         :filterable="filterable"
         :multiple-limit="multipleLimit"
         :popper-append-to-body="popperAppendToBody"
@@ -141,6 +145,8 @@ const createSelect = (
           disabled: false,
           clearable: false,
           multiple: false,
+          collapseTags: false,
+          collapseTagsTooltip: false,
           remote: false,
           filterable: false,
           reserveKeyword: false,
@@ -559,6 +565,62 @@ describe('Select', () => {
     })
   })
 
+  describe('collapseTags', () => {
+    it('use collapseTags', async () => {
+      const wrapper = createSelect({
+        data: () => {
+          return {
+            multiple: true,
+            collapseTags: true,
+            value: [],
+          }
+        },
+      })
+      await nextTick()
+      const vm = wrapper.vm as any
+      const options = getOptions()
+      options[0].click()
+      await nextTick()
+      expect(vm.value.length).toBe(1)
+      expect(vm.value[0]).toBe(vm.options[0].value)
+      options[1].click()
+      await nextTick()
+      options[2].click()
+      await nextTick()
+      expect(vm.value.length).toBe(3)
+      const tags = wrapper.findAll('.el-tag').filter((item) => {
+        return !hasClass(item.element, 'in-tooltip')
+      })
+      expect(tags.length).toBe(2)
+    })
+
+    it('use collapseTagsTooltip', async () => {
+      const wrapper = createSelect({
+        data: () => {
+          return {
+            multiple: true,
+            collapseTags: true,
+            collapseTagsTooltip: true,
+            value: [],
+          }
+        },
+      })
+      await nextTick()
+      const vm = wrapper.vm as any
+      const options = getOptions()
+      options[0].click()
+      await nextTick()
+      expect(vm.value.length).toBe(1)
+      expect(vm.value[0]).toBe(vm.options[0].value)
+      options[1].click()
+      await nextTick()
+      options[2].click()
+      await nextTick()
+      expect(vm.value.length).toBe(3)
+      expect(wrapper.findAll('.el-tag')[4].element.textContent).toBe('c2')
+    })
+  })
+
   describe('manually set modelValue', () => {
     it('set modelValue in single select', async () => {
       const wrapper = createSelect({
diff --git a/packages/components/select-v2/src/defaults.ts b/packages/components/select-v2/src/defaults.ts
index 4131331840..03ad315f9b 100644
--- a/packages/components/select-v2/src/defaults.ts
+++ b/packages/components/select-v2/src/defaults.ts
@@ -24,6 +24,10 @@ export const SelectProps = {
     default: 'light',
   },
   collapseTags: Boolean,
+  collapseTagsTooltip: {
+    type: Boolean,
+    default: false,
+  },
   defaultFirstOption: Boolean,
   disabled: Boolean,
   estimatedOptionHeight: {
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index a103ccbd15..bff229ea6e 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -66,7 +66,53 @@
                   type="info"
                   disable-transitions
                 >
+                  <el-tooltip
+                    v-if="collapseTagsTooltip"
+                    :disabled="dropdownMenuVisible"
+                    :fallback-placements="['bottom', 'top', 'right', 'left']"
+                    :effect="effect"
+                    placement="bottom"
+                    :teleported="false"
+                  >
+                    <template #default>
+                      <span
+                        :class="nsSelectV2.e('tags-text')"
+                        :style="{
+                          maxWidth: `${tagMaxWidth}px`,
+                        }"
+                        >+ {{ modelValue.length - 1 }}</span
+                      >
+                    </template>
+                    <template #content>
+                      <div :class="nsSelectV2.e('selection')">
+                        <div
+                          v-for="(selected, idx) in states.cachedOptions"
+                          :key="idx"
+                          :class="nsSelectV2.e('selected-item')"
+                        >
+                          <el-tag
+                            :key="getValueKey(selected)"
+                            :closable="!selectDisabled && !selected.disabled"
+                            :size="collapseTagSize"
+                            class="in-tooltip"
+                            type="info"
+                            disable-transitions
+                            @close="deleteTag($event, selected)"
+                          >
+                            <span
+                              :class="nsSelectV2.e('tags-text')"
+                              :style="{
+                                maxWidth: `${tagMaxWidth}px`,
+                              }"
+                              >{{ getLabel(selected) }}</span
+                            >
+                          </el-tag>
+                        </div>
+                      </div>
+                    </template>
+                  </el-tooltip>
                   <span
+                    v-else
                     :class="nsSelectV2.e('tags-text')"
                     :style="{
                       maxWidth: `${tagMaxWidth}px`,