From ac3ddcfb41e0a5a0cebc9f17b3a594cdcef7a647 Mon Sep 17 00:00:00 2001
From: yinkaihui <yinkaihui@bytedance.com>
Date: Fri, 30 Dec 2022 18:57:16 +0800
Subject: [PATCH] feat: select supports prepend

---
 .../web-vue/components/select/README.en-US.md |  2 ++
 .../web-vue/components/select/README.zh-CN.md |  2 ++
 .../components/select/__demo__/label.md       | 14 ++++++--
 .../components/select/__demo__/prepend.md     | 35 +++++++++++++++++++
 packages/web-vue/components/select/select.tsx | 12 ++++++-
 .../components/select/style/index.less        |  8 +++++
 .../components/select/style/mixin.less        | 16 +++++++++
 7 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 packages/web-vue/components/select/__demo__/prepend.md
 create mode 100644 packages/web-vue/components/select/style/mixin.less

diff --git a/packages/web-vue/components/select/README.en-US.md b/packages/web-vue/components/select/README.en-US.md
index 196800b24..6058a5aaa 100644
--- a/packages/web-vue/components/select/README.en-US.md
+++ b/packages/web-vue/components/select/README.en-US.md
@@ -37,6 +37,8 @@ description: When users need to select one or more from a group of similar data,
 
 @import ./__demo__/label.md
 
+@import ./__demo__/prepend.md
+
 @import ./__demo__/linkage.md
 
 @import ./__demo__/field-names.md
diff --git a/packages/web-vue/components/select/README.zh-CN.md b/packages/web-vue/components/select/README.zh-CN.md
index 5928950b2..6a09fa622 100644
--- a/packages/web-vue/components/select/README.zh-CN.md
+++ b/packages/web-vue/components/select/README.zh-CN.md
@@ -35,6 +35,8 @@ description: 当用户需要从一组同类数据中选择一个或多个时，
 
 @import ./__demo__/label.md
 
+@import ./__demo__/prepend.md
+
 @import ./__demo__/linkage.md
 
 @import ./__demo__/field-names.md
diff --git a/packages/web-vue/components/select/__demo__/label.md b/packages/web-vue/components/select/__demo__/label.md
index f81a7f191..a65127132 100644
--- a/packages/web-vue/components/select/__demo__/label.md
+++ b/packages/web-vue/components/select/__demo__/label.md
@@ -18,9 +18,17 @@ The display content of the select box can be customized through the `#label` slo
 
 ```vue
 <template>
-  <a-select default-value="Beijing" :style="{width:'320px'}" placeholder="Please select ...">
+  <a-select
+    default-value="Beijing"
+    :style="{ width: '320px' }"
+    placeholder="Please select ..."
+  >
     <template #label="{ data }">
-      <span><icon-plus/>{{data?.label}}</span>
+      <span><icon-plus />{{ data?.label }}</span>
+    </template>
+
+    <template #prepend>
+      <div>addBefore</div>
     </template>
     <a-option>Beijing</a-option>
     <a-option>Shanghai</a-option>
@@ -33,7 +41,7 @@ The display content of the select box can be customized through the `#label` slo
 import { IconPlus } from '@arco-design/web-vue/es/icon';
 
 export default {
-  components: { IconPlus }
+  components: { IconPlus },
 };
 </script>
 ```
diff --git a/packages/web-vue/components/select/__demo__/prepend.md b/packages/web-vue/components/select/__demo__/prepend.md
new file mode 100644
index 000000000..ea2a19e9d
--- /dev/null
+++ b/packages/web-vue/components/select/__demo__/prepend.md
@@ -0,0 +1,35 @@
+```yaml
+title:
+  zh-CN: 前置标签
+  en-US: Prepend
+```
+
+## zh-CN
+
+通过 `#prepend` 插槽可以自定义选择框前置标签
+
+---
+
+## en-US
+
+The display content of the select box can be customized through the `#prepend` slot.
+
+---
+
+```vue
+<template>
+  <a-select
+    default-value="Beijing"
+    :style="{ width: '320px' }"
+    placeholder="Please select ..."
+  >
+    <template #prepend>
+      <div>Select City</div>
+    </template>
+    <a-option>Beijing</a-option>
+    <a-option>Shanghai</a-option>
+    <a-option>Guangzhou</a-option>
+    <a-option disabled>Disabled</a-option>
+  </a-select>
+</template>
+```
diff --git a/packages/web-vue/components/select/select.tsx b/packages/web-vue/components/select/select.tsx
index e3c020da9..a64594d57 100644
--- a/packages/web-vue/components/select/select.tsx
+++ b/packages/web-vue/components/select/select.tsx
@@ -904,7 +904,7 @@ export default defineComponent({
       return data?.label ?? '';
     };
 
-    return () => (
+    const renderTriggerNode = () => (
       <Trigger
         v-slots={{ content: renderDropDown }}
         trigger="click"
@@ -957,5 +957,15 @@ export default defineComponent({
         )}
       </Trigger>
     );
+
+    if (slots.prepend) {
+      return () => (
+        <div class={`${prefixCls}-wrapper`}>
+          <div class={`${prefixCls}-prepend`}>{slots.prepend?.()}</div>
+          {renderTriggerNode()}
+        </div>
+      );
+    }
+    return renderTriggerNode;
   },
 });
diff --git a/packages/web-vue/components/select/style/index.less b/packages/web-vue/components/select/style/index.less
index 5ea4c5ca3..cbb2ae723 100644
--- a/packages/web-vue/components/select/style/index.less
+++ b/packages/web-vue/components/select/style/index.less
@@ -1,8 +1,16 @@
 @import '../../style/mixins/index.less';
+@import './mixin.less';
 @import './token.less';
 
 @select-prefix-cls: ~'@{prefix}-select';
 
+.@{select-prefix-cls}-wrapper {
+  display: inline-flex;
+  align-items: stretch;
+
+  .select-prepend(@select-prefix-cls);
+}
+
 .@{select-prefix-cls}-dropdown {
   box-sizing: border-box;
   padding: @select-popup-padding-vertical 0;
diff --git a/packages/web-vue/components/select/style/mixin.less b/packages/web-vue/components/select/style/mixin.less
new file mode 100644
index 000000000..b000c1c67
--- /dev/null
+++ b/packages/web-vue/components/select/style/mixin.less
@@ -0,0 +1,16 @@
+@import '../../input/style/token.less';
+
+.select-prepend(@cls) {
+  .@{cls}-prepend {
+    display: flex;
+    align-items: center;
+    padding: 0 @input-padding-horizontal;
+    color: @input-color-text;
+    white-space: nowrap;
+    background-color: @input-color-addon-bg;
+    border: 1px solid @input-color-addon-border_default;
+    border-right: @input-border-addon-separator-width solid
+      @input-color-addon-border;
+    border-bottom-left-radius: @input-border-radius;
+  }
+}