chore(radio): improve type def (#2743)

jdf2e · Dec 15, 2023 · ee96fa9 · ee96fa9
1 parent 6c6f383
commit ee96fa9
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 24 deletions.
diff --git a/src/packages/__VUE/radio/demo.vue b/src/packages/__VUE/radio/demo.vue
@@ -17,7 +17,7 @@
       </nut-cell>
       <nut-cell>
         <nut-radio-group v-model="state.radioVal">
-          <nut-radio shape="button" label="1" size="large">{{ translate('option1') }}</nut-radio>
+          <nut-radio shape="button" label="1" size="small">{{ translate('option1') }}</nut-radio>
           <nut-radio disabled shape="button" label="2">{{ translate('option2') }}</nut-radio>
           <nut-radio shape="button" label="3">{{ translate('option3') }}</nut-radio>
         </nut-radio-group>
@@ -40,7 +40,7 @@
       </nut-cell>
       <nut-cell>
         <nut-radio-group v-model="state.radioVal" direction="horizontal">
-          <nut-radio shape="button" label="1" size="large">{{ translate('option1') }}</nut-radio>
+          <nut-radio shape="button" label="1" size="small">{{ translate('option1') }}</nut-radio>
           <nut-radio shape="button" label="2">{{ translate('option2') }}</nut-radio>
           <nut-radio shape="button" label="3">{{ translate('option3') }}</nut-radio>
         </nut-radio-group>

diff --git a/src/packages/__VUE/radio/index.scss b/src/packages/__VUE/radio/index.scss
@@ -24,6 +24,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  cursor: pointer;
 
   &:last-child {
     margin-bottom: 0 !important;

diff --git a/src/packages/__VUE/radio/index.taro.vue b/src/packages/__VUE/radio/index.taro.vue
@@ -4,7 +4,7 @@ import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('radio');
 import { CheckNormal, CheckChecked } from '@nutui/icons-vue-taro';
 import { pxCheck } from '@/packages/utils/pxCheck';
-import { RADIO_KEY, RadioButtonSize } from './types';
+import { RADIO_KEY, RadioShape, RadioButtonSize } from './types';
 
 export default create({
   components: {
@@ -17,8 +17,8 @@ export default create({
       default: false
     },
     shape: {
-      type: String,
-      default: 'round' // button
+      type: String as PropType<RadioShape>,
+      default: 'round'
     },
     label: {
       type: [String, Number, Boolean],

diff --git a/src/packages/__VUE/radio/index.vue b/src/packages/__VUE/radio/index.vue
@@ -4,7 +4,7 @@ import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('radio');
 import { CheckNormal, CheckChecked } from '@nutui/icons-vue';
 import { pxCheck } from '@/packages/utils/pxCheck';
-import { RADIO_KEY, RadioButtonSize } from './types';
+import { RADIO_KEY, RadioShape, RadioButtonSize } from './types';
 
 export default create({
   components: {
@@ -17,8 +17,8 @@ export default create({
       default: false
     },
     shape: {
-      type: String,
-      default: 'round' // button
+      type: String as PropType<RadioShape>,
+      default: 'round'
     },
     label: {
       type: [String, Number, Boolean],

diff --git a/src/packages/__VUE/radio/types.ts b/src/packages/__VUE/radio/types.ts
@@ -1,2 +1,9 @@
 export const RADIO_KEY = Symbol('nut-radio');
-export type RadioButtonSize = 'large' | 'normal' | 'small' | 'mini';
+
+// Radio
+export type RadioShape = 'round' | 'button';
+export type RadioButtonSize = 'normal' | 'small' | 'mini';
+
+// RadioGroup
+export type RadioGroupTextPosition = 'right' | 'left';
+export type RadioGroupDirection = 'vertical' | 'horizontal';
diff --git a/src/packages/__VUE/radiogroup/index.scss b/src/packages/__VUE/radiogroup/index.scss
@@ -3,8 +3,6 @@
   .nut-radio {
     margin-bottom: 5px;
   }
-  &--vertical {
-  }
   &--horizontal {
     .nut-radio {
       display: inline-flex;
@@ -14,9 +12,6 @@
           margin: 0 6px;
         }
       }
-      &--button {
-        // ...
-      }
     }
   }
 }
diff --git a/src/packages/__VUE/radiogroup/index.taro.vue b/src/packages/__VUE/radiogroup/index.taro.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import { h, provide, computed, readonly, watch } from 'vue';
+import { h, provide, computed, readonly, watch, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import { RADIO_KEY } from '../radio/types';
+import { RADIO_KEY, RadioGroupTextPosition, RadioGroupDirection } from '../radio/types';
 const { componentName, create } = createComponent('radio-group');
 
 export default create({
@@ -11,11 +11,11 @@ export default create({
       default: ''
     },
     direction: {
-      type: String,
-      default: 'vertical' //horizontal
+      type: String as PropType<RadioGroupDirection>,
+      default: 'vertical'
     },
     textPosition: {
-      type: String,
+      type: String as PropType<RadioGroupTextPosition>,
       default: 'right'
     }
   },

diff --git a/src/packages/__VUE/radiogroup/index.vue b/src/packages/__VUE/radiogroup/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import { h, provide, computed, readonly, watch } from 'vue';
+import { h, provide, computed, readonly, watch, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import { RADIO_KEY } from '../radio/types';
+import { RADIO_KEY, RadioGroupTextPosition, RadioGroupDirection } from '../radio/types';
 const { componentName, create } = createComponent('radio-group');
 
 export default create({
@@ -11,11 +11,11 @@ export default create({
       default: ''
     },
     direction: {
-      type: String,
-      default: 'vertical' //horizontal
+      type: String as PropType<RadioGroupDirection>,
+      default: 'vertical'
     },
     textPosition: {
-      type: String,
+      type: String as PropType<RadioGroupTextPosition>,
       default: 'right'
     }
   },