feat: radio add disabled context

Author: tangjinzhou

components/radio/Group.tsx

@@ -4,16 +4,15 @@ import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import Radio from './Radio';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
-import { tuple } from '../_util/type';
+import { booleanType, stringType, arrayType, functionType } from '../_util/type';
 import type { RadioChangeEvent, RadioGroupButtonStyle, RadioGroupOptionType } from './interface';
 import { useInjectFormItemContext } from '../form/FormItemContext';
 import { useProvideRadioGroupContext } from './context';
-import { booleanType, stringType, arrayType, functionType } from '../_util/type';
 
 // CSSINJS
 import useStyle from './style';
 
-const RadioGroupSizeTypes = tuple('large', 'default', 'small');
+const RadioGroupSizeTypes = ['large', 'default', 'small'] as const;
 
 export type RadioGroupSize = (typeof RadioGroupSizeTypes)[number];
 
@@ -28,7 +27,7 @@ export type RadioGroupChildOption = {
 export const radioGroupProps = () => ({
   prefixCls: String,
   value: PropTypes.any,
-  size: PropTypes.oneOf(RadioGroupSizeTypes),
+  size: stringType<RadioGroupSize>(),
   options: arrayType<Array<string | RadioGroupChildOption | number>>(),
   disabled: booleanType(),
   name: String,

components/radio/Radio.tsx

@@ -13,6 +13,7 @@ import { booleanType, functionType } from '../_util/type';
 
 // CSSINJS
 import useStyle from './style';
+import { useInjectDisabled } from '../config-provider/DisabledContext';
 
 export const radioProps = () => ({
   prefixCls: String,
@@ -45,12 +46,13 @@ export default defineComponent({
     const radioGroupContext = useInjectRadioGroupContext();
     const vcCheckbox = ref<HTMLElement>();
 
-    const { prefixCls: radioPrefixCls, direction } = useConfigInject('radio', props);
+    const { prefixCls: radioPrefixCls, direction, disabled } = useConfigInject('radio', props);
     const prefixCls = computed(() =>
       radioGroupContext?.optionType.value === 'button' || radioOptionTypeContext === 'button'
         ? `${radioPrefixCls.value}-button`
         : radioPrefixCls.value,
     );
+    const contextDisabled = useInjectDisabled();
 
     // Style
     const [wrapSSR, hashId] = useStyle(radioPrefixCls);
@@ -88,6 +90,7 @@ export default defineComponent({
         prefixCls: prefixCls.value,
         id,
         ...omit(restProps, ['onUpdate:checked', 'onUpdate:value']),
+        disabled: disabled.value ?? contextDisabled.value,
       };
 
       if (radioGroup) {

components/radio/demo/disabled.vue

@@ -18,9 +18,9 @@ Radio unavailable.
 <template>
   <div>
     <a-radio v-model:checked="checked1" :disabled="disabled">Disabled</a-radio>
-    <br />
     <a-radio v-model:checked="checked2" :disabled="disabled">Disabled</a-radio>
-    <div :style="{ marginTop: 20 }">
+    <br />
+    <div style="margin-top: 16px">
       <a-button type="primary" @click="toggleDisabled">Toggle disabled</a-button>
     </div>
   </div>
@@ -30,7 +30,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     const disabled = ref<boolean>(true);
-    const checked1 = ref<boolean>(false);
+    const checked1 = ref<boolean>(true);
     const checked2 = ref<boolean>(false);
 
     const toggleDisabled = () => {

site/debugger/demo/demo.vue

@@ -1,7 +1,31 @@
 <template>
-  <a-alert message="Success Tips" type="success" show-icon closable>
-    <template #action>
-      <a-button v-if="false" size="small" type="text">UNDO</a-button>
-    </template>
-  </a-alert>
+  <div>
+    <a-radio v-model:checked="checked1" :disabled="disabled">Disabled</a-radio>
+    <a-radio v-model:checked="checked2" :disabled="disabled">Disabled</a-radio>
+    <br />
+    <div style="margin-top: 16px">
+      <a-button type="primary" @click="toggleDisabled">Toggle disabled</a-button>
+    </div>
+  </div>
 </template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const disabled = ref<boolean>(true);
+    const checked1 = ref<boolean>(false);
+    const checked2 = ref<boolean>(false);
+
+    const toggleDisabled = () => {
+      disabled.value = !disabled.value;
+    };
+
+    return {
+      disabled,
+      checked1,
+      checked2,
+      toggleDisabled,
+    };
+  },
+});
+</script>