fix(Radio): fix allow-uncheck is invalid (#1582)

* fix(Radio): fix allow-uncheck is invalid * test: update snapshots * chore: update common --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Sep 11, 2024 · 6192ef4 · 6192ef4
1 parent e5131a9
commit 6192ef4
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 47 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/radio/__test__/__snapshots__/demo.test.jsx.snap b/src/radio/__test__/__snapshots__/demo.test.jsx.snap
@@ -309,7 +309,7 @@ exports[`Radio > Radio customVue demo works fine 1`] = `
           value="0"
         />
         <div
-          class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+          class="t-radio__icon t-radio__icon--left"
         >
           <!---->
           <!---->
@@ -419,6 +419,7 @@ exports[`Radio > Radio customVue demo works fine 1`] = `
   <view
     class="demo-desc"
     data-v-5173b2c6=""
+    style="margin: 24px 16px 16px;"
   >
     横向卡片单选框
   </view>
@@ -453,7 +454,7 @@ exports[`Radio > Radio customVue demo works fine 1`] = `
           value="0"
         />
         <div
-          class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+          class="t-radio__icon t-radio__icon--left"
         >
           <!---->
           <!---->
@@ -1557,7 +1558,7 @@ exports[`Radio > Radio mobileVue demo works fine 1`] = `
               value="0"
             />
             <div
-              class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+              class="t-radio__icon t-radio__icon--left"
             >
               <!---->
               <!---->
@@ -1667,6 +1668,7 @@ exports[`Radio > Radio mobileVue demo works fine 1`] = `
       <view
         class="demo-desc"
         data-v-5173b2c6=""
+        style="margin: 24px 16px 16px;"
       >
         横向卡片单选框
       </view>
@@ -1701,7 +1703,7 @@ exports[`Radio > Radio mobileVue demo works fine 1`] = `
               value="0"
             />
             <div
-              class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+              class="t-radio__icon t-radio__icon--left"
             >
               <!---->
               <!---->

diff --git a/src/radio/__test__/index.test.jsx b/src/radio/__test__/index.test.jsx
@@ -70,10 +70,12 @@ describe('Radio', () => {
     it(': icon', async () => {
       const wrapper = mount(Radio, {
         props: {
+          checked: true,
           icon: 'dot',
         },
       });
       const $icon = wrapper.find(`.${name}__icon-dot`);
+
       expect($icon.exists()).toBeTruthy();
 
       //tsx vm

diff --git a/src/radio/demos/custom.vue b/src/radio/demos/custom.vue
@@ -6,7 +6,7 @@
     </view>
   </t-radio-group>
 
-  <view class="demo-desc" style="margin: 48rpx 32rpx 32rpx">横向卡片单选框</view>
+  <view class="demo-desc" style="margin: 24px 16px 16px">横向卡片单选框</view>
 
   <t-radio-group class="horizontal-box" :value="radio1" @change="onChange1">
     <view v-for="(item, index) in 3" :key="index" :class="`card ${radio1 == index ? 'card--active' : ''}`">
@@ -32,6 +32,12 @@ const onChange1 = (value: any, context: { e: Event }) => {
 };
 </script>
 <style scoped lang="less">
+.demo-desc {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 16px;
+}
+
 .card {
   display: block;
   position: relative;
@@ -65,6 +71,7 @@ const onChange1 = (value: any, context: { e: Event }) => {
   left: 1.5px;
   top: 1.5px;
   z-index: 1;
+  font-size: 14px;
 }
 
 /* 横向布局 */

diff --git a/src/radio/demos/icon.vue b/src/radio/demos/icon.vue
@@ -1,22 +1,8 @@
 <template>
-  <t-radio class="block" default-checked label="单选" icon="line"></t-radio>
-  <t-radio class="block" default-checked label="单选" icon="dot"></t-radio>
+  <t-radio class="block" default-checked allow-uncheck label="单选" icon="line"></t-radio>
+  <t-radio class="block" default-checked allow-uncheck label="单选" icon="dot"></t-radio>
 </template>
 
-<script lang="ts" setup>
-import { ref, h } from 'vue';
-import { CheckRectangleFilledIcon, CheckRectangleIcon } from 'tdesign-icons-vue-next';
-
-const radio = ref('2');
-const TiconCheckRectangleFilled = h(CheckRectangleFilledIcon);
-const TiconCheckRectangle = h(CheckRectangleIcon);
-const checkRectangle = [TiconCheckRectangleFilled, TiconCheckRectangle];
-
-const groupChangeFn = (value: any, context: { e: Event }) => {
-  console.log(value, context);
-};
-</script>
-
 <style scoped>
 .radio-group-demo {
   background-color: #fff;

diff --git a/src/radio/demos/placement.vue b/src/radio/demos/placement.vue
@@ -1,6 +1,6 @@
 <template>
-  <t-radio class="block" default-checked label="单选" />
-  <t-radio class="block" default-checked label="单选" placement="right" />
+  <t-radio class="block" default-checked allow-uncheck label="单选" />
+  <t-radio class="block" default-checked allow-uncheck label="单选" placement="right" />
 </template>
 
 <script lang="ts" setup></script>

diff --git a/src/radio/radio.tsx b/src/radio/radio.tsx
@@ -1,10 +1,9 @@
-import { inject, computed, defineComponent, Ref, toRefs } from 'vue';
+import { inject, computed, defineComponent, Ref } from 'vue';
 import { CheckIcon, CheckCircleFilledIcon } from 'tdesign-icons-vue-next';
-
-import { NOOP, useVModel } from '../shared';
+import { useDefault } from '../shared';
 import config from '../config';
 import props from './props';
-import { RadioValue, TdRadioGroupProps } from './type';
+import { TdRadioGroupProps, TdRadioProps } from './type';
 import { useFormDisabled } from '../form/hooks';
 import { usePrefixClass } from '../hooks/useClass';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
@@ -14,29 +13,24 @@ const { prefix } = config;
 export default defineComponent({
   name: `${prefix}-radio`,
   props,
-  setup(props) {
+  emits: ['update:checked', 'update:modelValue', 'change'],
+  setup(props, context) {
     const renderTNodeContent = useContent();
     const renderTNodeJSX = useTNodeJSX();
     const radioClass = usePrefixClass('radio');
 
-    const { checked, modelValue, block } = toRefs(props);
-    const [innerChecked, setInnerChecked] = useVModel(
-      checked,
-      modelValue,
-      props.defaultChecked,
-      props.onChange,
-      'checked',
-    );
+    const [innerChecked, setInnerChecked] = useDefault<boolean, TdRadioProps>(props, context.emit, 'checked', 'change');
 
     const rootGroupProps = inject('rootGroupProps', {}) as TdRadioGroupProps;
     const rootGroupValue = inject('rootGroupValue', {}) as Ref;
-    const rootGroupChange = inject('rootGroupChange', NOOP) as (val: RadioValue, e: Event) => void;
+    const rootGroupChange = inject('rootGroupChange', undefined);
 
     // extend radioGroup disabled props
     const groupDisabled = computed(() => rootGroupProps?.disabled);
     const isDisabled = useFormDisabled(groupDisabled);
 
-    const radioChecked = computed(() => innerChecked.value || props.value === rootGroupValue?.value);
+    const radioChecked = computed(() => innerChecked.value || (props.value && props.value === rootGroupValue?.value));
+
     const finalBorderless = computed(() => {
       if (props.borderless == null && 'borderless' in rootGroupProps) return rootGroupProps.borderless;
       return props.borderless;
@@ -46,10 +40,7 @@ export default defineComponent({
       return props.placement || 'left';
     });
 
-    const finalAllowUncheck = computed(() => {
-      if (props.allowUncheck == null && 'allowUncheck' in rootGroupProps) return rootGroupProps.allowUncheck;
-      return props.allowUncheck;
-    });
+    const finalAllowUncheck = computed(() => Boolean(props.allowUncheck || rootGroupProps?.allowUncheck));
 
     // input props attribute
     const inputProps = computed(() => ({
@@ -71,7 +62,7 @@ export default defineComponent({
       `${radioClass.value}`,
       `${radioClass.value}--${finalPlacement.value}`,
       {
-        [`${radioClass.value}--block`]: block.value,
+        [`${radioClass.value}--block`]: props.block,
       },
     ]);
 
@@ -104,10 +95,11 @@ export default defineComponent({
         return;
       }
       if (rootGroupChange) {
-        rootGroupChange(finalAllowUncheck.value && radioChecked.value ? '' : props.value, e);
+        const value = finalAllowUncheck.value && radioChecked.value ? undefined : props.value;
+        rootGroupChange(value, e);
       } else {
-        if (!finalAllowUncheck.value && radioChecked.value) return;
-        setInnerChecked(!radioChecked.value, { e });
+        const value = finalAllowUncheck.value ? !radioChecked.value : true;
+        setInnerChecked(value, { e });
       }
     };
+23 −13		style/mobile/components/radio/v2/_index.less
+5 −0		style/mobile/components/radio/v2/_mixin.less