From 687a0734783c0cfc43bb38cb08c813cc3ced864b Mon Sep 17 00:00:00 2001
From: James <72028410+James-9696@users.noreply.github.com>
Date: Sat, 30 Mar 2024 10:06:40 +0800
Subject: [PATCH] feat(select): add show-proportion props of select component
 (#1503)

* feat: show-proportion of select component

* fix: delete tag

* fix: update review
---
 examples/sites/demos/apis/select.js                 | 13 +++++++++++++
 .../demos/mobile-first/app/select/collapse-tags.vue |  2 +-
 .../demos/mobile-first/app/select/webdoc/select.js  |  5 +++--
 .../pc/app/select/collapse-tags-composition-api.vue |  2 +-
 .../sites/demos/pc/app/select/collapse-tags.vue     |  2 +-
 examples/sites/demos/pc/app/select/webdoc/select.js |  4 ++--
 packages/theme/src/select/index.less                |  2 +-
 packages/vue/src/select/src/index.ts                |  4 ++++
 packages/vue/src/select/src/mobile-first.vue        |  4 ++++
 packages/vue/src/select/src/pc.vue                  |  6 +++++-
 10 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/examples/sites/demos/apis/select.js b/examples/sites/demos/apis/select.js
index bfbac13e3..74eb99912 100644
--- a/examples/sites/demos/apis/select.js
+++ b/examples/sites/demos/apis/select.js
@@ -571,6 +571,19 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'binding-obj',
           mfDemo: 'binding-obj'
+        },
+        {
+          name: 'show-proportion',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否展示多选框选中条数和总条数的占比',
+            'en-US':
+              'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'collapse-tags',
+          mfDemo: 'collapse-tags'
         }
       ],
       events: [
diff --git a/examples/sites/demos/mobile-first/app/select/collapse-tags.vue b/examples/sites/demos/mobile-first/app/select/collapse-tags.vue
index b01915245..031e48901 100644
--- a/examples/sites/demos/mobile-first/app/select/collapse-tags.vue
+++ b/examples/sites/demos/mobile-first/app/select/collapse-tags.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" multiple collapse-tags title="标题">
+  <tiny-select v-model="value" placeholder="请选择" multiple :show-proportion="true" collapse-tags title="标题">
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
 </template>
diff --git a/examples/sites/demos/mobile-first/app/select/webdoc/select.js b/examples/sites/demos/mobile-first/app/select/webdoc/select.js
index 195c9346f..0af3426bb 100644
--- a/examples/sites/demos/mobile-first/app/select/webdoc/select.js
+++ b/examples/sites/demos/mobile-first/app/select/webdoc/select.js
@@ -36,9 +36,10 @@ export default {
         'en-US': 'Collapse tags'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。</p>\n',
+        'zh-CN':
+          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>show-proportion</code> 可展示当前选中条数和总条数占比，默认值为 <code>false</code> 。</p>\n',
         'en-US':
-          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags will be abbreviated and displayed.</p>\n'
+          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags will be abbreviated and displayed. Set <code>show promotion</code> to display the current number of selected items and the proportion of total items. The default value is <code>false</code> .</p>\n'
       },
       codeFiles: ['collapse-tags.vue']
     },
diff --git a/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue b/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
index a77338e15..6ead53f9f 100644
--- a/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
@@ -3,7 +3,7 @@
     <br />
     <div>场景1： collapse-tags折叠</div>
     <br />
-    <tiny-select v-model="value1" multiple collapse-tags>
+    <tiny-select v-model="value1" :show-proportion="true" multiple collapse-tags>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />
diff --git a/examples/sites/demos/pc/app/select/collapse-tags.vue b/examples/sites/demos/pc/app/select/collapse-tags.vue
index b7dc5b36a..63c294eda 100644
--- a/examples/sites/demos/pc/app/select/collapse-tags.vue
+++ b/examples/sites/demos/pc/app/select/collapse-tags.vue
@@ -3,7 +3,7 @@
     <br />
     <div>场景1： collapse-tags折叠</div>
     <br />
-    <tiny-select v-model="value1" multiple collapse-tags>
+    <tiny-select v-model="value1" :show-proportion="true" multiple collapse-tags>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />
diff --git a/examples/sites/demos/pc/app/select/webdoc/select.js b/examples/sites/demos/pc/app/select/webdoc/select.js
index e40a44169..6add22b90 100644
--- a/examples/sites/demos/pc/app/select/webdoc/select.js
+++ b/examples/sites/demos/pc/app/select/webdoc/select.js
@@ -38,9 +38,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。多选时通过设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签, hover 时展示所有标签。标签内容超长时超出省略，hover 标签时展示 tooltip。</p>\n',
+          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>show-proportion</code> 可展示当前选中条数和总条数占比，默认值为 <code>false</code> 。设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签, <code>hover</code> 时展示所有标签。标签内容超长时超出省略，<code>hover</code> 标签时展示 <code>tooltip</code> 。</p>\n',
         'en-US':
-          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags will be abbreviated and displayed.</p>\n'
+          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags are displayed in a thumbnail. Set <code>show-proportion</code> to display the current number of selected items and the proportion of total items, with a default value of <code>false</code> . By setting <code>hover-expand</code> to <code>true</code> , the tags are collapsed by default, and all tags are displayed when hovering. If the content of the tag is too long, it should be omitted. When hovering the tag, a <code>tooltip</code> should be displayed</p>'
       },
       codeFiles: ['collapse-tags.vue']
     },
diff --git a/packages/theme/src/select/index.less b/packages/theme/src/select/index.less
index fa1b1ca71..b2b13ceaa 100644
--- a/packages/theme/src/select/index.less
+++ b/packages/theme/src/select/index.less
@@ -160,7 +160,7 @@
       display: inline-flex;
       justify-content: flex-start;
       align-items: center;
-      max-width: 180px;
+      max-width: 160px;
     }
 
     .@{select-prefix-cls}__tags-text {
diff --git a/packages/vue/src/select/src/index.ts b/packages/vue/src/select/src/index.ts
index 2e255281b..e63dc7f9b 100644
--- a/packages/vue/src/select/src/index.ts
+++ b/packages/vue/src/select/src/index.ts
@@ -312,6 +312,10 @@ export default defineComponent({
     clearNoMatchValue: {
       type: Boolean,
       default: false
+    },
+    showProportion: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/select/src/mobile-first.vue b/packages/vue/src/select/src/mobile-first.vue
index 792276364..fb92b14cb 100644
--- a/packages/vue/src/select/src/mobile-first.vue
+++ b/packages/vue/src/select/src/mobile-first.vue
@@ -271,6 +271,9 @@
           <span v-if="state.showCopy" class="h-4 cursor-pointer relative z-[1]" @click.stop="handleCopyClick">
             <icon-copy :class="[gcls('caret'), 'align-top group-hover:fill-color-brand']"></icon-copy>
           </span>
+          <span v-if="showProportion && state.selected.length > 0 && state.options.length > 1">
+            {{ state.selected.length + '/' + state.options.length }}
+          </span>
           <icon-close
             v-if="state.showClose"
             :class="[
@@ -630,6 +633,7 @@ export default {
     'options',
     'showCheck',
     'showAlloption',
+    'showProportion',
     'hideDrop',
     'modelValue',
     'showOverflowTooltip',
diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue
index a4977e007..154cce849 100644
--- a/packages/vue/src/select/src/pc.vue
+++ b/packages/vue/src/select/src/pc.vue
@@ -266,6 +266,9 @@
             <span v-if="state.showCopy" class="tiny-select__copy" @click.stop="handleCopyClick">
               <icon-copy class="tiny-svg-size tiny-select__caret"></icon-copy>
             </span>
+            <span v-if="showProportion && state.selected.length > 0 && state.options.length > 1">
+              {{ state.selected.length + '/' + state.options.length }}
+            </span>
             <icon-close
               v-if="state.showClose"
               class="tiny-svg-size tiny-select__caret icon-close"
@@ -712,7 +715,8 @@ export default defineComponent({
     'showEmptyImage',
     'inputBoxType',
     'tagType',
-    'clearNoMatchValue'
+    'clearNoMatchValue',
+    'showProportion'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api })