feat: add ProSelect

Author: sunshineLixun

packages/pro-field/src/components/Select/SearchSelect/index.tsx

@@ -4,14 +4,15 @@ import { searchSelectProps } from './types';
 
 const SearchSelect = defineComponent({
   props: searchSelectProps,
-  setup(props) {
+  slots: ['option'],
+  setup(props, { slots }) {
     return () => {
       return (
         <Select
+          {...props}
           v-slots={{
-            option: props.option,
+            option: props.option || slots.option,
           }}
-          {...props}
           allowClear
         />
       );

packages/pro-field/src/components/Select/SearchSelect/types.ts

@@ -1,12 +1,13 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import { selectProps, type DefaultOptionType } from 'ant-design-vue/es/select';
+import type { VueNode } from '@ant-design-vue/pro-utils';
 
 const omitSelectProps = selectProps();
 
 export const searchSelectProps = {
   ...omitSelectProps,
   option: {
-    type: Function as PropType<(props: DefaultOptionType) => void>,
+    type: Function as PropType<(props: DefaultOptionType) => VueNode>,
   },
 };
 

packages/pro-field/src/components/Select/index.tsx

@@ -1,18 +1,20 @@
 import { defineComponent, type App, DefineComponent, Plugin, PropType, ExtractPropTypes } from 'vue';
 import type { SelectProps } from 'ant-design-vue';
 import SearchSelect from './SearchSelect';
+import type { SearchSelectProps } from './SearchSelect/types';
 import { proFieldFC } from '../typings';
 
 export const fieldSelectProps = {
   ...proFieldFC,
   fieldProps: {
-    type: Object as PropType<SelectProps>,
+    type: Object as PropType<SelectProps & { option: SearchSelectProps['option'] }>,
   },
 };
 export type FieldSelectProps = Partial<ExtractPropTypes<typeof fieldSelectProps>>;
 
 const FieldSelect = defineComponent({
   props: fieldSelectProps,
+  slots: ['option'],
   setup(props) {
     const children = () => {
       if (props.mode === 'read') {

packages/pro-form/examples/views/ProForm.vue

@@ -94,7 +94,12 @@
       }"
       required
     />
-    <pro-form-select name="gender" label="性别" :options="sex" required />
+    <pro-form-select name="gender" label="性别" :options="sex" required>
+      <template #option="{ value: val, label, icon }">
+        <span role="img" :aria-label="val">{{ icon }}</span>
+        &nbsp;&nbsp;{{ label }}
+      </template>
+    </pro-form-select>
   </pro-form>
 </template>
 
@@ -122,10 +127,12 @@ const sex = ref([
   {
     value: '男',
     label: '男',
+    icon: '🇨🇳',
   },
   {
     value: '女',
     label: '女',
+    icon: '🇺🇸',
   },
 ]);
 

packages/pro-form/src/components/Select/index.tsx

@@ -1,7 +1,8 @@
 import { defineComponent, type App, DefineComponent, Plugin, PropType, ExtractPropTypes } from 'vue';
+import type { VueNode } from '@ant-design-vue/pro-utils';
 import { omit, pick } from 'lodash-es';
 import { proFieldProps } from '@ant-design-vue/pro-field';
-import type { SelectProps } from 'ant-design-vue/es/select';
+import type { SelectProps, DefaultOptionType } from 'ant-design-vue/es/select';
 import ProFormField from '../Field';
 import { proFormGridConfig, extendsProps } from '../../typings';
 import { proFormItemProps } from '../FormItem';
@@ -17,6 +18,9 @@ const props = {
   options: {
     type: Array as PropType<SelectProps['options']>,
   },
+  option: {
+    type: Function as PropType<(props: DefaultOptionType) => VueNode>,
+  },
 };
 
 export type ProFormSelectProps = Partial<ExtractPropTypes<typeof props>>;
@@ -26,7 +30,7 @@ export const ProFormSelect = defineComponent({
   inheritAttrs: false,
   props,
   slots: ['option'],
-  setup(props) {
+  setup(props, { slots }) {
     const formItemProps = {
       ...props.formItemProps,
       ...pick(props, Object.keys(proFormItemProps)),
@@ -38,6 +42,7 @@ export const ProFormSelect = defineComponent({
           fieldProps={{
             ...props.fieldProps,
             options: props.options,
+            option: props.option || slots.option,
           }}
           filedConfig={{ valueType: 'select' }}
           colProps={props.colProps}