radio组件 size 大小使用scss变量向标准统一 #1199

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

@@ -1,32 +1,42 @@
 @import '../../styles-var/devui-var.scss';
 
+$devui-btn-sm-padding: var(--devui-btn-sm-padding, 0 16px);
+$devui-btn-padding: var(--devui-btn-padding, 0 20px);
+$devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
+
 $font-size-map: (
   lg: $devui-font-size-lg,
-  md: $devui-font-size-lg,
+  md: $devui-font-size-md,
   sm: $devui-font-size-sm,
-  xs: $devui-font-size-sm,
+);
+$radio-label-height-map: (
+  lg: $devui-size-lg,
+  md: $devui-size-md,
+  sm: $devui-size-sm,
 );
 $button-padding-map: (
-  lg: 12px 20px,
-  md: 10px 20px,
-  sm: 9px 15px,
-  xs: 7px 15px,
+  lg: $devui-btn-lg-padding,
+  md: $devui-btn-padding,
+  sm: $devui-btn-sm-padding,
 );
 .#{$devui-prefix}-radio-button {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   position: relative;
-  font-size: 14px;
+  padding: $devui-btn-padding;
+  height: $devui-size-md;
+  font-size: $devui-font-size-md;
   color: $devui-text;
-  padding: 10px 20px;
   cursor: pointer;
   border: 1px solid $devui-line;
   border-left: none;
-  line-height: 1;
   user-select: none;
-  @each $size in ('lg', 'md', 'sm', 'xs') {
+  @each $size in ('lg', 'md', 'sm') {
     &.#{$devui-prefix}-radio-button--#{$size} {
       font-size: map-get($font-size-map, #{$size});
       padding: map-get($button-padding-map, #{$size});
+      height: map-get($radio-label-height-map, #{$size});
+      line-height: map-get($radio-label-height-map, #{$size});
     }
   }
 

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

@@ -1,6 +1,6 @@
 import type { InjectionKey, PropType, Ref, ExtractPropTypes, ComputedRef } from 'vue';
 export type valueTypes = string | number | boolean;
-export type sizeTypes = 'lg' | 'md' | 'sm' | 'xs';
+export type sizeTypes = 'lg' | 'md' | 'sm';
 
 /** radio、radio-group 共用 props */
 const radioCommonProps = {

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

@@ -2,21 +2,18 @@
 
 $font-size-map: (
   lg: $devui-font-size-lg,
-  md: $devui-font-size-lg,
+  md: $devui-font-size-md,
   sm: $devui-font-size-sm,
-  xs: $devui-font-size-sm,
 );
 $radio-width-map: (
-  lg: 16px,
+  lg: 18px,
   md: 16px,
   sm: 14px,
-  xs: 14px,
 );
 $radio-label-height-map: (
-  lg: 40px,
-  md: 36px,
-  sm: 32px,
-  xs: 28px,
+  lg: $devui-size-lg,
+  md: $devui-size-md,
+  sm: $devui-size-sm,
 );
 
 .#{$devui-prefix}-radio {
@@ -65,7 +62,8 @@ $radio-label-height-map: (
     .#{$devui-prefix}-radio__material-inner {
       opacity: 1;
       transform: scale(1);
-      transition: transform $devui-animation-duration-base $devui-animation-ease-in-out,
+      transition:
+        transform $devui-animation-duration-base $devui-animation-ease-in-out,
         opacity $devui-animation-duration-base $devui-animation-ease-in-out;
 
       &.disabled {
@@ -154,16 +152,18 @@ $radio-label-height-map: (
     border-radius: $devui-border-radius;
     padding: 0 15px 0 10px;
   }
-  @each $size in ('lg', 'md', 'sm', 'xs') {
+  @each $size in ('lg', 'md', 'sm') {
     &.#{$devui-prefix}-radio--#{$size} {
+      display: flex;
+      align-items: center;
+
       .#{$devui-prefix}-radio__label {
         font-size: map-get($font-size-map, #{$size});
       }
 
       .#{$devui-prefix}-radio__material {
         width: map-get($radio-width-map, #{$size});
         height: map-get($radio-width-map, #{$size});
-        line-height: map-get($radio-width-map, #{$size});
 
         & > svg {
           width: map-get($radio-width-map, #{$size});
@@ -173,7 +173,6 @@ $radio-label-height-map: (
 
       &.#{$devui-prefix}-radio--bordered {
         height: map-get($radio-label-height-map, #{$size});
-        line-height: map-get($radio-label-height-map, #{$size});
       }
     }
   }

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

@@ -166,7 +166,7 @@ export default defineComponent({
 ```vue
 <template>
   <d-radio-group direction="row" v-model="directionRowChoose">
-    <d-radio v-for="item in directionRowList" :key="item" :value="item"> The Radio value is: {{ item }} </d-radio>
+    <d-radio v-for="item in directionRowList" :key="item" :value="item"> The Radio value is: {{ item }}</d-radio>
   </d-radio-group>
 </template>
 
@@ -226,10 +226,11 @@ export default defineComponent({
 ```vue
 <template>
   <d-radio-group direction="row" v-model="customChoose1">
-    <d-radio v-for="item in customList1" :key="item" :value="item"> The Radio value is: {{ item }} </d-radio>
+    <d-radio v-for="item in customList1" :key="item" :value="item"> The Radio value is: {{ item }}</d-radio>
   </d-radio-group>
   <d-radio-group direction="row" v-model="customChoose2">
-    <d-radio v-for="item in customList2" :key="item.name" :value="item.name"> The Radio value is: {{ item.name }} </d-radio>
+    <d-radio v-for="item in customList2" :key="item.name" :value="item.name"> The Radio value is: {{ item.name }}
+    </d-radio>
   </d-radio-group>
 </template>
 
@@ -263,14 +264,17 @@ export default defineComponent({
 
 ```vue
 <template>
+  <h4>Small</h4>
   <d-radio-group
     :values="sizeBorderList"
-    v-model="sizeBorderChoose1"
-    size="lg"
+    v-model="sizeBorderChoose3"
+    size="sm"
     border
     direction="row"
     style="margin-bottom: 10px;"
   ></d-radio-group>
+
+  <h4>Middle</h4>
   <d-radio-group
     :values="sizeBorderList"
     v-model="sizeBorderChoose2"
@@ -279,18 +283,16 @@ export default defineComponent({
     direction="row"
     style="margin-bottom: 10px;"
   ></d-radio-group>
+
+  <h4>Large</h4>
   <d-radio-group
     :values="sizeBorderList"
-    v-model="sizeBorderChoose3"
-    size="sm"
+    v-model="sizeBorderChoose1"
+    size="lg"
     border
-    disabled
     direction="row"
     style="margin-bottom: 10px;"
   ></d-radio-group>
-  <d-radio-group v-model="sizeBorderChoose4" size="xs" border direction="row" style="margin-bottom: 10px;">
-    <d-radio v-for="item in sizeBorderList" :key="item" :value="item">{{ item }} </d-radio>
-  </d-radio-group>
 </template>
 
 <script>
@@ -302,14 +304,12 @@ export default defineComponent({
     const sizeBorderChoose1 = ref('Spring');
     const sizeBorderChoose2 = ref('Spring');
     const sizeBorderChoose3 = ref('Spring');
-    const sizeBorderChoose4 = ref('Spring');
 
     return {
       sizeBorderList,
       sizeBorderChoose1,
       sizeBorderChoose2,
       sizeBorderChoose3,
-      sizeBorderChoose4,
     };
   },
 });
@@ -320,25 +320,30 @@ export default defineComponent({
 
 ### 按钮形态
 
-数组源可为普通数组、对象数组等。
+需要把 `d-radio` 替换成 `d-radio-button`， 数组源可为普通数组、对象数组等。
 
 :::demo
 
 ```vue
+
 <template>
-  <d-radio-group direction="row" v-model="buttonChoose1" size="lg" style="margin-bottom: 10px;" fill="rgb(255,193,7)" text-color="#ca3d3d">
-    <d-radio-button v-for="item in buttonList1" :key="item" :value="item"> {{ item }} </d-radio-button>
+  <h4>禁用</h4>
+  <d-radio-group direction="row" v-model="buttonChoose1" size="sm" style="margin-bottom: 10px;">
+    <d-radio-button v-for="item in buttonList1" :key="item.name" :value="item.name" :disabled="item.disabled"
+    >{{ item.name }}
+    </d-radio-button>
   </d-radio-group>
+
+  <h4>默认</h4>
   <d-radio-group direction="row" v-model="buttonChoose2" size="md" style="margin-bottom: 10px;">
-    <d-radio-button v-for="item in buttonList2" :key="item.name" :value="item.name">{{ item.name }} </d-radio-button>
+    <d-radio-button v-for="item in buttonList2" :key="item.name" :value="item.name">{{ item.name }}</d-radio-button>
   </d-radio-group>
-  <d-radio-group direction="row" v-model="buttonChoose3" size="sm" style="margin-bottom: 10px;">
-    <d-radio-button v-for="item in buttonList3" :key="item.name" :value="item.name" :disabled="item.disabled"
-      >{{ item.name }}
-    </d-radio-button>
-  </d-radio-group>
-  <d-radio-group direction="row" v-model="buttonChoose4" size="xs" style="margin-bottom: 10px;" disabled>
-    <d-radio-button v-for="item in buttonList2" :key="item.name" :value="item.name">{{ item.name }} </d-radio-button>
+
+  <h4>自定义填充颜色、文字颜色</h4>
+  <d-radio-group direction="row" v-model="buttonChoose3" size="lg" style="margin-bottom: 10px;" fill="rgb(255,193,7)"
+                 text-color="#ca3d3d"
+  >
+    <d-radio-button v-for="item in buttonList3" :key="item" :value="item"> {{ item }}</d-radio-button>
   </d-radio-group>
 </template>
 
@@ -347,23 +352,25 @@ import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const buttonList1 = ref(['radio1', 'radio2', 'radio3']);
-    let buttonChoose1 = ref('radio1');
-
-    const buttonList2 = [{ name: 'radio1' }, { name: 'radio2' }, { name: 'radio3' }];
-    let buttonChoose2 = ref('radio1');
-    const buttonList3 = [{ name: 'radio1', disabled: true }, { name: 'radio2' }, { name: 'radio3' }];
-    let buttonChoose3 = ref('radio1');
-    let buttonChoose4 = ref('radio1');
-
+    const buttonList1 = [{
+      name: 'Spring',
+      disabled: true
+    }, { name: 'Summer' }, { name: 'Autumn' }, { name: 'Winter' }];
+    let buttonChoose1 = ref('Summer');
+
+    const buttonList2 = [{ name: 'Spring' }, { name: 'Summer' }, { name: 'Autumn' }, { name: 'Winter' }];
+    let buttonChoose2 = ref('Spring');
+
+    const buttonList3 = ref(['Spring', 'Summer', 'Autumn', 'Winter']);
+    let buttonChoose3 = ref('Spring');
+
     return {
       buttonList1,
       buttonChoose1,
       buttonList2,
       buttonChoose2,
       buttonList3,
       buttonChoose3,
-      buttonChoose4,
     };
   },
 });
@@ -424,5 +431,5 @@ export default defineComponent({
 #### IRadioSize
 
 ```ts
-type IRadioSize = 'lg' | 'md' | 'sm' | 'xs';
+type IRadioSize = 'lg' | 'md' | 'sm';
 ```