From c7dfc2fcd79564e48e38728d8729364c7d2106ed Mon Sep 17 00:00:00 2001
From: Jay <xuehongjiej@163.com>
Date: Fri, 10 Dec 2021 00:10:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(radio):=20=E5=90=8C=E6=AD=A5=20ng=20?=
 =?UTF-8?q?=E7=89=88=20radio-group=20=E7=9A=84=20direction=20=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=EF=BC=8C=E5=BA=9F=E5=BC=83=20cssStyle=20=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/radio/__tests__/radio-group.spec.ts |  4 +-
 .../devui-vue/devui/radio/src/radio-group.tsx | 43 +++++++++----------
 .../devui-vue/devui/radio/src/radio-types.ts  |  2 +-
 .../devui-vue/docs/components/radio/index.md  | 12 +++---
 .../docs/en-US/components/radio/index.md      | 12 +++---
 5 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/packages/devui-vue/devui/radio/__tests__/radio-group.spec.ts b/packages/devui-vue/devui/radio/__tests__/radio-group.spec.ts
index c28a920c..56310968 100644
--- a/packages/devui-vue/devui/radio/__tests__/radio-group.spec.ts
+++ b/packages/devui-vue/devui/radio/__tests__/radio-group.spec.ts
@@ -41,7 +41,7 @@ describe('RadioGroup', () => {
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
-  it('radioGroup cssStyle work', async () => {
+  it('radioGroup direction work', async () => {
     const wrapper = mount(DRadioGroup, {
       props: {
         value: 'Item1'
@@ -51,7 +51,7 @@ describe('RadioGroup', () => {
 
     await wrapper.setProps({
       value: 'Item1',
-      cssStyle: 'row'
+      direction: 'row'
     });
     expect(wrapper.html()).toMatch('is-row');
   });
diff --git a/packages/devui-vue/devui/radio/src/radio-group.tsx b/packages/devui-vue/devui/radio/src/radio-group.tsx
index f636bd06..b851a190 100644
--- a/packages/devui-vue/devui/radio/src/radio-group.tsx
+++ b/packages/devui-vue/devui/radio/src/radio-group.tsx
@@ -1,7 +1,7 @@
-import { defineComponent, provide, toRef, ExtractPropTypes } from 'vue';
+import { defineComponent, provide, toRef, ExtractPropTypes } from 'vue'
 import DRadio from './radio'
-import { radioGroupProps, radioGroupInjectionKey } from './radio-types';
-import './radio-group.scss';
+import { radioGroupProps, radioGroupInjectionKey } from './radio-types'
+import './radio-group.scss'
 
 export default defineComponent({
   name: 'DRadioGroup',
@@ -10,9 +10,9 @@ export default defineComponent({
   setup(props: ExtractPropTypes<typeof radioGroupProps>, { emit }) {
     /** change 事件 */
     const emitChange = (radioValue: string) => {
-      emit('update:modelValue', radioValue);
-      emit('change', radioValue);
-    };
+      emit('update:modelValue', radioValue)
+      emit('change', radioValue)
+    }
 
     // 注入给子组件
     provide(radioGroupInjectionKey, {
@@ -21,23 +21,20 @@ export default defineComponent({
       disabled: toRef(props, 'disabled'),
       beforeChange: props.beforeChange,
       emitChange
-    });
+    })
   },
   render() {
-    const {
-      cssStyle,
-      values
-    } = this;
+    const { values, direction } = this
     /** 获取展示内容 */
     const getContent = () => {
-      const defaultSlot = this.$slots.default;
+      const defaultSlot = this.$slots.default
       // 有默认插槽则使用默认插槽
       if (defaultSlot) {
         return defaultSlot()
       }
       // 有数据列表则使用数据列表
       else if (Array.isArray(values)) {
-        return values.map(item => {
+        return values.map((item) => {
           return (
             <DRadio key={item} value={item}>
               {item}
@@ -52,15 +49,17 @@ export default defineComponent({
     }
 
     return (
-      <div class={[
-        'devui-radio-group',
-        {
-          'is-row': cssStyle === 'row',
-          'is-column': cssStyle === 'column',
-        }
-      ]}>
+      <div
+        class={[
+          'devui-radio-group',
+          {
+            'is-row': direction === 'row',
+            'is-column': direction === 'column'
+          }
+        ]}
+      >
         {getContent()}
       </div>
-    );
+    )
   }
-});
+})
diff --git a/packages/devui-vue/devui/radio/src/radio-types.ts b/packages/devui-vue/devui/radio/src/radio-types.ts
index f4aa59b7..8448f86e 100644
--- a/packages/devui-vue/devui/radio/src/radio-types.ts
+++ b/packages/devui-vue/devui/radio/src/radio-types.ts
@@ -44,7 +44,7 @@ export const radioGroupProps = {
     default: null,
   },
   /** 展示方式，横向/竖向 */
-  cssStyle: {
+  direction: {
     type: String as PropType<'row' | 'column'>,
     default: 'column',
   },
diff --git a/packages/devui-vue/docs/components/radio/index.md b/packages/devui-vue/docs/components/radio/index.md
index c31e8dbb..27f27613 100644
--- a/packages/devui-vue/docs/components/radio/index.md
+++ b/packages/devui-vue/docs/components/radio/index.md
@@ -96,12 +96,12 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose" :beforeChange="beforeChange">
+  <d-radio-group direction="row" v-model="choose" :beforeChange="beforeChange">
     <d-radio v-for="item in list" :key="item" :value="item">
       {{ item }}
     </d-radio>
   </d-radio-group>
-  <d-radio-group v-model="choose2" css-style="row" disabled>
+  <d-radio-group v-model="choose2" direction="row" disabled>
     <d-radio v-for="item in list2" :key="item" :value="item">
       {{ item }}
     </d-radio>
@@ -178,7 +178,7 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose">
+  <d-radio-group direction="row" v-model="choose">
     <d-radio v-for="item in list" :key="item" :value="item">
       The Radio value is: {{ item }}
     </d-radio>
@@ -243,12 +243,12 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose">
+  <d-radio-group direction="row" v-model="choose">
     <d-radio v-for="item in list" :key="item" :value="item">
       The Radio value is: {{ item }}
     </d-radio>
   </d-radio-group>
-  <d-radio-group css-style="row" v-model="choose2">
+  <d-radio-group direction="row" v-model="choose2">
     <d-radio v-for="item in list2" :key="item.name" :value="item.name">
       The Radio value is: {{ item.name }}
     </d-radio>
@@ -303,7 +303,7 @@ d-radio-group 参数
 |     name     |       `string`       |    --    | 可选，单选框的名称                                                                            | [竖向排列](#竖向排列)                                                 |
 |    values    |       `array`        |    --    | 可选，单选数据组                                                                              | [竖向排列](#竖向排列)                                                 |
 |   disabled   |      `boolean`       |  false   | 可选，是否禁用该选项组                                                                        | [radio-group 根据条件终止切换操作](#radio-group-根据条件终止切换操作) |
-|   cssStyle   |  `'row' / 'column'`  | 'column' | 可选，设置横向或纵向排列                                                                      | [横向排列](#横向排列)                                                 |
+|  direction   |  `'row' / 'column'`  | 'column' | 可选，设置横向或纵向排列                                                                      | [横向排列](#横向排列)                                                 |
 | beforeChange | `Function / Promise` |    --    | 可选，radio-group 切换前的回调函数，返回 boolean 类型，返回 false 可以阻止 radio-group 的切换 | [回调切换](#radio-group-根据条件终止切换操作)                         |
 
 d-radio-group 事件
diff --git a/packages/devui-vue/docs/en-US/components/radio/index.md b/packages/devui-vue/docs/en-US/components/radio/index.md
index 1a682214..3ef02441 100644
--- a/packages/devui-vue/docs/en-US/components/radio/index.md
+++ b/packages/devui-vue/docs/en-US/components/radio/index.md
@@ -96,12 +96,12 @@ The second radio group is not allowed to jump.
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose" :beforeChange="beforeChange">
+  <d-radio-group direction="row" v-model="choose" :beforeChange="beforeChange">
     <d-radio v-for="item in list" :key="item" :value="item">
       {{ item }}
     </d-radio>
   </d-radio-group>
-  <d-radio-group v-model="choose2" css-style="row" disabled>
+  <d-radio-group v-model="choose2" direction="row" disabled>
     <d-radio v-for="item in list2" :key="item" :value="item">
       {{ item }}
     </d-radio>
@@ -178,7 +178,7 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose">
+  <d-radio-group direction="row" v-model="choose">
     <d-radio v-for="item in list" :key="item" :value="item">
       The Radio value is: {{ item }}
     </d-radio>
@@ -243,12 +243,12 @@ The array source can be a common array or an object array.
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose">
+  <d-radio-group direction="row" v-model="choose">
     <d-radio v-for="item in list" :key="item" :value="item">
       The Radio value is: {{ item }}
     </d-radio>
   </d-radio-group>
-  <d-radio-group css-style="row" v-model="choose2">
+  <d-radio-group direction="row" v-model="choose2">
     <d-radio v-for="item in list2" :key="item.name" :value="item.name">
       The Radio value is: {{ item.name }}
     </d-radio>
@@ -303,7 +303,7 @@ d-radio-group Parameters
 |     name     |       `string`       |    --    | Optional. Single-option name (unique identifier of the radio)                                                                                      | [Horizontal Arrangement](#horizontal-arrangement)                                 |
 |    values    |       `array`        |    --    | Optional. Single-choice data group                                                                                                                 | [Horizontal Arrangement](#horizontal-arrangement)                                 |
 |   disabled   |      `boolean`       |  false   | Optional. Whether to disable this radio-group                                                                                                      | [Switch With Condition in A Radio Group](#switch-with-condition-in-a-radio-group) |
-|   cssStyle   |  `'row' / 'column'`  | 'column' | Optional. Set the horizontal or vertical arrangement                                                                                               | [Horizontal Arrangement](#horizontal-arrangement)                                 |
+|  direction   |  `'row' / 'column'`  | 'column' | Optional. Set the horizontal or vertical arrangement                                                                                               | [Horizontal Arrangement](#horizontal-arrangement)                                 |
 | beforeChange | `Function / Promise` |    --    | Callback function before radio-group switching. The return value is of the boolean type. If false is returned, radio-group switching is prevented. | [Switch With Condition in A Radio Group](#switch-with-condition-in-a-radio-group) |
 
 d-radio-group Event
-- 
Gitee


From cfb75488ee060383d86697218f70d9527971cf2f Mon Sep 17 00:00:00 2001
From: Jay <xuehongjiej@163.com>
Date: Fri, 10 Dec 2021 00:12:54 +0800
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=E5=90=8C=E6=AD=A5=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E4=BD=BF=E7=94=A8=E4=BA=86=20radio-group=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=96=87=E6=A1=A3=EF=BC=8C=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=20cssStyle=20=E4=B8=BA=20direction?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/docs/components/dropdown/index.md      | 4 ++--
 packages/devui-vue/docs/components/image-preview/index.md | 4 ++--
 packages/devui-vue/docs/components/overlay/index.md       | 8 ++++----
 packages/devui-vue/docs/components/time-axis/index.md     | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/devui-vue/docs/components/dropdown/index.md b/packages/devui-vue/docs/components/dropdown/index.md
index 296eb3ee..061c6024 100644
--- a/packages/devui-vue/docs/components/dropdown/index.md
+++ b/packages/devui-vue/docs/components/dropdown/index.md
@@ -14,7 +14,7 @@
 <template>
   <div style="display:flex">
     触发方式：
-    <d-radio-group css-style="row" v-model="trigger">
+    <d-radio-group direction="row" v-model="trigger">
       <d-radio v-for="item in triggerList" :key="item" :value="item">
         {{ item }}
       </d-radio>
@@ -22,7 +22,7 @@
   </div>
   <div style="display:flex">
     关闭区域： 
-    <d-radio-group css-style="row" v-model="closeScope">
+    <d-radio-group direction="row" v-model="closeScope">
       <d-radio v-for="item in closeScopeAreas" :key="item" :value="item">
         {{ item }}
       </d-radio>
diff --git a/packages/devui-vue/docs/components/image-preview/index.md b/packages/devui-vue/docs/components/image-preview/index.md
index c16c4fc0..1341d044 100644
--- a/packages/devui-vue/docs/components/image-preview/index.md
+++ b/packages/devui-vue/docs/components/image-preview/index.md
@@ -84,7 +84,7 @@ export default defineComponent({
 ```vue
 <template>
   <div class="devui-image-preview-flex">
-    <d-radio-group css-style="row" v-model="zIndex">
+    <d-radio-group direction="row" v-model="zIndex">
       <d-radio v-for="item in zIndexList" :key="item" :value="item">
         {{ item }}
       </d-radio>
@@ -92,7 +92,7 @@ export default defineComponent({
     <span class="text">zIndex: {{ zIndex }}</span>
   </div>
   <div class="devui-image-preview-flex">
-    <d-radio-group css-style="row" v-model="backDropZIndex">
+    <d-radio-group direction="row" v-model="backDropZIndex">
       <d-radio v-for="item in backDropZIndexList" :key="item" :value="item">
         {{ item }}
       </d-radio>
diff --git a/packages/devui-vue/docs/components/overlay/index.md b/packages/devui-vue/docs/components/overlay/index.md
index 420b94f3..2c1d9eba 100644
--- a/packages/devui-vue/docs/components/overlay/index.md
+++ b/packages/devui-vue/docs/components/overlay/index.md
@@ -56,19 +56,19 @@ export default defineComponent({
     <div class="w-full mt-20">
       <div class="flex mt-20">
         <span style="width: 300px">依赖元素的 X 轴(position.originX)：</span>
-        <d-radio-group v-model="position.originX" :values="horizontalProps" css-style="row"/>
+        <d-radio-group v-model="position.originX" :values="horizontalProps" direction="row"/>
       </div>
       <div class="flex mt-20">
         <span style="width: 300px">依赖元素的 Y 轴(position.originY)：</span>
-        <d-radio-group v-model="position.originY" :values="verticalProps" css-style="row"/>
+        <d-radio-group v-model="position.originY" :values="verticalProps" direction="row"/>
       </div>
       <div class="flex mt-20">
         <span style="width: 300px">Overlay X 轴(position.overlayX)：</span>
-        <d-radio-group v-model="position.overlayX" :values="horizontalProps" css-style="row"/>
+        <d-radio-group v-model="position.overlayX" :values="horizontalProps" direction="row"/>
       </div>
       <div class="flex mt-20">
         <span style="width: 300px">Overlay Y 轴(position.overlayY)：</span>
-        <d-radio-group v-model="position.overlayY" :values="verticalProps" css-style="row"/>
+        <d-radio-group v-model="position.overlayY" :values="verticalProps" direction="row"/>
       </div>
       <div class="flex mt-20">
         <span style="width: 300px">背景交互(hasBackdrop)：</span>
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index 01ae74f4..c3dd4bac 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -14,7 +14,7 @@
 ```vue
 <template>
   <div>
-    <d-radio-group css-style="row" v-model="choose">
+    <d-radio-group direction="row" v-model="choose">
       <d-radio v-for="item in list" :key="item" :value="item">
         {{ item }}
       </d-radio>
-- 
Gitee