feat: add ProFormRadio

Author: sunshineLixun

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

@@ -0,0 +1,58 @@
+import { defineComponent, type App, DefineComponent, Plugin } from 'vue';
+import { fieldRadioProps, FieldRadioProps } from './types';
+import { Radio } from 'ant-design-vue';
+import { getSlot } from '@ant-design-vue/pro-utils';
+
+export const slots = ['renderExtraFooter', 'suffixIcon', 'clearIcon'];
+
+const FieldRadio = defineComponent({
+  name: 'FieldRadio',
+  inheritAttrs: false,
+  props: fieldRadioProps,
+  slots,
+  setup(props, { slots }) {
+
+    const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as Function;
+    const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as Function;
+		const children = getSlot(slots, props.fieldProps as Record<string, any>, 'default');
+
+    return () => {
+      const { mode, text, fieldProps = {} } = props;
+			const { options } = fieldProps
+	
+			if (mode === 'read') {
+				const optionsValue = fieldProps.value;
+				const dom = <>{optionsValue}</>;
+		
+				if (render) {
+					return render(text, { mode, ...fieldProps }, dom) || null;
+				}
+				return dom;
+			}
+
+      if (mode === 'edit') {
+        const dom = (
+          <Radio.Group
+            {...fieldProps}
+						options={options}
+						v-slots={{
+							default: children
+						}}
+          />
+        );
+        if (renderFormItem) {
+          return renderFormItem(text, { mode, ...fieldProps }, dom);
+        }
+        return dom;
+      }
+      return null;
+    };
+  },
+});
+
+FieldRadio.install = (app: App) => {
+  app.component(FieldRadio.name, FieldRadio);
+  return app;
+};
+
+export default FieldRadio as DefineComponent<FieldRadioProps> & Plugin;

packages/pro-field/src/components/Radio/types.ts

@@ -0,0 +1,12 @@
+import type { ExtractPropTypes, PropType } from "vue";
+import type { RadioGroupProps } from "ant-design-vue/es/radio/Group";
+import { proFieldFC } from "../typings";
+
+export const fieldRadioProps = {
+  ...proFieldFC,
+  fieldProps: {
+    type: Object as PropType<RadioGroupProps>,
+  },
+};
+
+export type FieldRadioProps = Partial<ExtractPropTypes<typeof fieldRadioProps>>;

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

@@ -21,8 +21,8 @@ const FieldTimePicker = defineComponent({
       'renderExtraFooter'
     );
 
-    const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as any;
-    const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as any;
+    const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as Function;
+    const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as Function;
 
     return () => {
       const { mode, text, fieldProps } = props;

packages/pro-field/src/index.tsx

@@ -75,6 +75,11 @@ import { fieldTimeRangePickerProps, type FieldTimeRangePickerProps } from './com
 import FieldTimeRangePicker, { slots as timeRangePickerSlots } from './components/TimeRangePicker';
 export { FieldTimeRangePicker, fieldTimeRangePickerProps, timeRangePickerSlots, FieldTimeRangePickerProps };
 
+import { fieldRadioProps, type FieldRadioProps } from './components/Radio/types';
+import FieldRadio from './components/Radio';
+export { FieldRadio, fieldRadioProps, FieldRadioProps };
+
+
 // style
 import './default.less';
 import './style.less';
@@ -268,6 +273,19 @@ const defaultRenderText = (
     );
   }
 
+  if (valueType === 'radio' || valueType === 'radioButton') {
+    const { fieldProps } = props
+    return (
+      <FieldRadio 
+        {...props}
+        fieldProps={{
+          ...fieldProps,
+        }}
+        text={dataValue as string} 
+      />
+    )
+  }
+
   if (valueType === 'select') {
     let text = '';
     if (dataValue instanceof Array) {

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

@@ -252,19 +252,37 @@
                 </div>
             </template>
         </ProFormDateTimeRangePicker>
+        <ProFormRadio             
+            name="radio"
+            label="Checkbox.Group"
+        >
+            <Radio value="a">Hangzhou</Radio>
+            <Radio value="b">Shanghai</Radio>
+            <Radio value="c">Beijing</Radio>
+            <Radio value="d" disabled>Chengdu</Radio>
+        </ProFormRadio>
+        <ProFormRadio             
+            name="radio1"
+            label="Checkbox.Group"
+            :field-props="{
+                options: optionsWithDisabled
+            }"
+        />
+            
     </pro-form>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, FunctionalComponent, CSSProperties, onMounted } from 'vue';
+import { ref, FunctionalComponent, CSSProperties } from 'vue';
 import { PlusOutlined } from '@ant-design/icons-vue';
 import {
     RadioGroup,
     RadioButton,
+    Radio,
     Switch,
     Divider,
     SelectOption,
-    type SelectProps
+    type SelectProps, RadioGroupProps
 } from 'ant-design-vue';
 import type { FormLayout } from 'ant-design-vue/es/form/Form';
 import {
@@ -279,7 +297,8 @@ import {
     ProFormDatePickerQuarter,
     ProFormDateTimeRangePicker,
     ProFormTimePicker,
-    ProFormTimeRangePicker
+    ProFormTimeRangePicker,
+    ProFormRadio
 } from '@ant-design-vue/pro-form';
 import dayjs, { type Dayjs } from 'dayjs';
 import type { Recordable } from '@/typings';
@@ -332,7 +351,9 @@ const formModel = ref({
     yearTime: ref<Dayjs>(),
     timeDate: ref<Dayjs>(),
     timeRangeDate: ref<Dayjs>(),
-    dateTimeRange: ref<RangeValue>()
+    dateTimeRange: ref<RangeValue>(),
+    radio: 'a',
+    radio1: ''
 });
 
 const sex = ref([
@@ -386,6 +407,12 @@ const langs = ref([
     }
 ]);
 
+const optionsWithDisabled: RadioGroupProps['options'] = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange', disabled: true },
+];
+
 const formLayoutType = ref<FormLayout>('horizontal');
 const grid = ref(true);
 const readonly = ref(false);

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

@@ -0,0 +1,53 @@
+import { defineComponent, type PropType, ExtractPropTypes, App, DefineComponent, Plugin } from 'vue';
+import type { RadioGroupProps } from 'ant-design-vue/es/radio/Group';
+import { getSlot } from '@ant-design-vue/pro-utils';
+import { pick } from 'lodash-es';
+import ProFormField, { proFormFieldProps } from '../Field';
+import { proFormItemProps } from '../FormItem';
+import type { VueNode } from 'ant-design-vue/lib/_util/type';
+
+const props = {
+  ...proFormFieldProps,
+  fieldProps: {
+    type: Object as PropType<RadioGroupProps>,
+  },
+};
+export type ProFormRadioProps = Partial<ExtractPropTypes<typeof props>>;
+
+export const ProFormRadio = defineComponent({
+  name: 'ProFormRadio',
+  inheritAttrs: false,
+  props,
+  setup(props, { slots }) {
+    const formItemProps = {
+      ...props.formItemProps,
+      ...pick(props, Object.keys(proFormItemProps)),
+    };
+
+    const children = getSlot(slots, props, 'default') as Function;
+
+    return () => {
+      const { fieldProps, colProps } = props;
+      return (
+        <ProFormField
+          valueType={'radio' || 'radioButton'}
+          fieldProps={{
+            ...fieldProps,
+            default: children
+          }}
+          filedConfig={{ valueType: 'radio' || 'radioButton'}}
+          colProps={colProps}
+          formItemProps={formItemProps}
+          {...formItemProps}
+        />
+      );
+    };
+  },
+});
+
+ProFormRadio.install = (app: App) => {
+  app.component(ProFormRadio.name, ProFormRadio);
+  return app;
+};
+
+export default ProFormRadio as DefineComponent<ProFormRadioProps> & Plugin;

packages/pro-form/src/components/index.ts

@@ -1,38 +1,41 @@
-import ProFormText, { type ProFieldPropsType } from './Text';
+import ProFormText, { type ProFieldPropsType } from "./Text";
 export { ProFormText, ProFieldPropsType };
 
-import ProFormPassword, { type ProFieldPasswordPropsType } from './Password';
+import ProFormPassword, { type ProFieldPasswordPropsType } from "./Password";
 export { ProFormPassword, ProFieldPasswordPropsType };
 
-import { ProFormSelect } from './Select';
+import { ProFormSelect } from "./Select";
 export { ProFormSelect };
 
-import { default as ProFormDatePicker } from './DatePicker';
+import { default as ProFormDatePicker } from "./DatePicker";
 export { ProFormDatePicker };
 
-import { ProFormDatePickerWeek } from './DatePicker/WeekPicker';
+import { ProFormDatePickerWeek } from "./DatePicker/WeekPicker";
 export { ProFormDatePickerWeek };
 
-import { ProFormDatePickerMonth } from './DatePicker/MonthPicker';
+import { ProFormDatePickerMonth } from "./DatePicker/MonthPicker";
 export { ProFormDatePickerMonth };
 
-import { ProFormDatePickerQuarter } from './DatePicker/QuarterPicker';
+import { ProFormDatePickerQuarter } from "./DatePicker/QuarterPicker";
 export { ProFormDatePickerQuarter };
 
-import { ProFormDatePickerYear } from './DatePicker/YearPicker';
+import { ProFormDatePickerYear } from "./DatePicker/YearPicker";
 export { ProFormDatePickerYear };
 
-import { ProFormDateRangePicker } from './DateRangePicker';
+import { ProFormDateRangePicker } from "./DateRangePicker";
 export { ProFormDateRangePicker };
 
-import { ProFormDateTimePicker } from './DateTimePicker';
+import { ProFormDateTimePicker } from "./DateTimePicker";
 export { ProFormDateTimePicker };
 
-import { ProFormDateTimeRangePicker } from './DateTimeRangePicker';
+import { ProFormDateTimeRangePicker } from "./DateTimeRangePicker";
 export { ProFormDateTimeRangePicker };
 
-import { ProFormTimePicker } from './TimePicker';
+import { ProFormTimePicker } from "./TimePicker";
 export { ProFormTimePicker };
 
-import { ProFormTimeRangePicker } from './TimeRangePicker';
+import { ProFormTimeRangePicker } from "./TimeRangePicker";
 export { ProFormTimeRangePicker };
+
+import { ProFormRadio } from "./Radio";
+export { ProFormRadio };