refactor(radio): radio (#1676)

Co-authored-by: huaweidevcloud <[email protected]>

Author: fengjiancai

packages/devui-vue/devui/radio/__tests__/radio-button.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { ref } from 'vue';
 import DRadioButton from '../src/radio-button';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 const nsClass = useNamespace('radio-button', true);
 const baseClass = nsClass.b();

packages/devui-vue/devui/radio/__tests__/radio-group.spec.ts

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import DRadioGroup from '../src/radio-group';
 import DRadio from '../src/radio';
 import DRadioButton from '../src/radio-button';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 const ns = useNamespace('radio-group', false);
 const baseClass = ns.b();

packages/devui-vue/devui/radio/__tests__/radio.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { ref } from 'vue';
 import DRadio from '../src/radio';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 const nsClass = useNamespace('radio', true);
 const baseClass = nsClass.b();

packages/devui-vue/devui/radio/src/radio-button.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, SetupContext } from 'vue';
 import { radioProps, RadioProps } from './radio-types';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { useRadio, useRadioButton } from './use-radio';
 import './radio-button.scss';
 

packages/devui-vue/devui/radio/src/radio-group.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, SetupContext } from 'vue';
 import DRadio from './radio';
 import { radioGroupProps, RadioGroupProps } from './radio-types';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { useRadioGroup } from './use-radio';
 import './radio-group.scss';
 

packages/devui-vue/devui/radio/src/radio-types.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey, PropType, Ref, ExtractPropTypes, ComputedRef } from 'vue';
-export type valueTypes = string | number | boolean;
+export type valueTypes = string | number | boolean | undefined;
 export type sizeTypes = 'lg' | 'md' | 'sm';
 
 /** radio、radio-group 共用 props */
@@ -42,6 +42,10 @@ export const radioProps = {
     type: Boolean,
     default: false,
   },
+  canCancelSelect: {
+    type: Boolean,
+    default: false,
+  },
 } as const;
 
 /** radio-group 的 props */

packages/devui-vue/devui/radio/src/radio.scss

@@ -43,7 +43,7 @@ $radio-label-height-map: (
     }
 
     .#{$devui-prefix}-radio__material-inner {
-      fill: $devui-icon-fill-active-hover;
+      fill: $devui-brand;
     }
   }
 

packages/devui-vue/devui/radio/src/radio.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, SetupContext } from 'vue';
 import { radioProps, RadioProps } from './radio-types';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { useRadio } from './use-radio';
 import './radio.scss';
 
@@ -31,7 +31,7 @@ export default defineComponent({
               name={radioName.value}
               class={ns.e('input')}
               disabled={isDisabled.value}
-              onChange={handleChange}
+              onClick={handleChange}
               value={props.value}
               checked={isChecked.value}
             />

packages/devui-vue/devui/radio/src/use-radio.ts

@@ -42,7 +42,14 @@ export function useRadio(props: RadioProps, ctx: SetupContext): UseRadioFn {
   };
 
   const handleChange = async (event: Event) => {
-    const _value = props.value;
+    let _value;
+    if (props.canCancelSelect && isChecked.value) {
+      _value = undefined;
+    } else if (isChecked.value) {
+      return;
+    } else {
+      _value = props.value;
+    }
     const canChange = await judgeCanChange(_value);
 
     // 不可以切换

packages/devui-vue/docs/components/radio/index.md

@@ -391,6 +391,7 @@ export default defineComponent({
 | before-change | `Function / Promise`         | --    | 可选，radio 切换前的回调函数，<br>返回 false 可以阻止 radio 切换 | [回调切换](#radio-根据条件终止切换操作) |
 | border        | `boolean`                    | false | 可选， 是否有边框                                                | [边框](#尺寸和边框)                     |
 | size          | [IRadioSize](#iradiosize)    | md    | 可选， radio 尺寸，只有在 border 属性存在时生效                  | [尺寸](#尺寸和边框)                     |
+| can-cancel-select | `boolean`    | false    | 可选， 选中后，再次点击是否可取消选中                  |                      |
 
 ### Radio 事件