From aa0c7e139dc0058dda81e655a5320b4c78ce5617 Mon Sep 17 00:00:00 2001
From: yangkaixuan <439721838@qq.com>
Date: Mon, 17 Aug 2020 17:55:32 +0800
Subject: [PATCH] fix: radio group bug

---
 docs/start.md                           |  4 +-
 src/packages/radio/demo.vue             | 12 ++--
 src/packages/radio/doc.md               | 12 ++--
 src/packages/radio/index.scss           | 14 ----
 src/packages/radio/index.vue            | 88 -------------------------
 src/packages/radiogroup/radiogroup.scss | 12 +++-
 src/packages/radiogroup/radiogroup.vue  | 88 +++++++++++++++++++++----
 7 files changed, 98 insertions(+), 132 deletions(-)
 delete mode 100644 src/packages/radio/index.scss
 delete mode 100644 src/packages/radio/index.vue

diff --git a/docs/start.md b/docs/start.md
index b04cd502a..4abce4605 100644
--- a/docs/start.md
+++ b/docs/start.md
@@ -154,7 +154,9 @@ npm i @nutui/babel-plugin-separate-import -D
 ``` bash
 {
   "plugins": [
-    ["@nutui/babel-plugin-separate-import", {
+    ["@nutui/babel-plugin-separate-import", {  
+        "libraryName": "@nutui/nutui-jdl",
+        "libraryDirectory": "dist/packages",
         "style": "scss"
     }]
   ]
diff --git a/src/packages/radio/demo.vue b/src/packages/radio/demo.vue
index b5d6493c1..6af582f14 100644
--- a/src/packages/radio/demo.vue
+++ b/src/packages/radio/demo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-list">
     <h4>基础样式</h4>
-    <radio-group
+    <nut-radiogroup
       :list="labelList"
       :name="'test0'"
       :styleType="'radio'"
@@ -14,7 +14,7 @@
     />
     <div class="cell-reslout"> 选择结果 {{ resloutdemo1 }}: {{ labelReslut0 }}</div>
     <h4>列表样式</h4>
-    <radio-group
+    <nut-radiogroup
       :list="labelList"
       :style-type="'list'"
       :name="'test3'"
@@ -27,7 +27,7 @@
     />
     <div class="cell-reslout"> 选择结果 {{ resloutdemo1 }}: {{ labelReslut2 }}</div>
     <h4>列表禁选样式</h4>
-    <radio-group
+    <nut-radiogroup
       :list="labelList"
       :style-type="'list'"
       :name="'test4'"
@@ -40,7 +40,7 @@
     />
     <div class="cell-reslout"> 选择结果 {{ resloutdemo1 }}: {{ labelReslut3 }}</div>
     <h4>按钮样式</h4>
-    <radio-group
+    <nut-radiogroup
       :list="labelList2"
       :name="'test'"
       :styleType="'label'"
@@ -56,7 +56,6 @@
 </template>
 
 <script>
-import group from './index.vue';
 export default {
   data() {
     return {
@@ -138,9 +137,6 @@ export default {
       radioDisable: false,
     };
   },
-  components: {
-    'radio-group': group,
-  },
   watch: {
     disableVal(val) {
       if (!isNaN(val)) {
diff --git a/src/packages/radio/doc.md b/src/packages/radio/doc.md
index ee9f7dbf3..20b83a34f 100644
--- a/src/packages/radio/doc.md
+++ b/src/packages/radio/doc.md
@@ -50,7 +50,7 @@ export default {
 ```html
 <nut-cell>
   <span slot="title">
-    <radio-group 
+    <nut-radiogroup
         :list="labelList"  
         :name="'test0'" 
         :effect-key = "'value'"
@@ -60,7 +60,7 @@ export default {
     </span>
 </nut-cell>
 <nut-cell>
-    <span slot="title"> 选择结果 {{labelReslut0}}</span>
+    <span slot="title"> 选择结果 {{labelReslut0} }</span>
 </nut-cell>   
 ```
 
@@ -69,7 +69,7 @@ export default {
 ```html
 <nut-cell>
         <span slot="title">        
-          <radio-group 
+          <nut-radiogroup
             :list="labelList"
             :name="'test'"
             :styleType="'label'"
@@ -82,7 +82,7 @@ export default {
         </span>
       </nut-cell>
       <nut-cell>
-        <span slot="title"> 选择结果 {{labelReslut}}</span>
+        <span slot="title"> 选择结果 {{labelReslut} }</span>
       </nut-cell>
 ```
 
@@ -91,7 +91,7 @@ export default {
 ```html
 <nut-cell>
   <span slot="title">        
-    <radio-group 
+    <nut-radiogroup
       :list="labelList"
       :style-type="'list'"
       :name="'test3'"
@@ -105,7 +105,7 @@ export default {
   </span>
 </nut-cell>
 <nut-cell>
-  <span slot="title"> 选择结果 {{resloutdemo1}}: {{labelReslut2}}</span>
+  <span slot="title"> 选择结果 {{resloutdemo1} }: {{labelReslut2} }</span>
 </nut-cell>
 ```
 
diff --git a/src/packages/radio/index.scss b/src/packages/radio/index.scss
deleted file mode 100644
index 9f1999046..000000000
--- a/src/packages/radio/index.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.nut-radio {
-    .nut-radio-labels {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        padding: 18px 16px;
-        box-sizing: border-box;
-        .nut-radio-list-label {
-            margin: 5px 2.3px;
-        }
-    }
-    .nut-radio-lists {
-    }
-}
diff --git a/src/packages/radio/index.vue b/src/packages/radio/index.vue
deleted file mode 100644
index 5853e9294..000000000
--- a/src/packages/radio/index.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <div class="nut-radio">
-    <div
-      :class="{
-        'nut-radio-labels': styleType === 'label',
-        'nut-radio-lists': styleType === 'list',
-      }"
-      v-if="list && list.length > 0"
-    >
-      <nut-radio
-        v-for="(item, index) in list"
-        :key="item[effectKey]"
-        :type="styleType"
-        :name="name"
-        :text="item[effectText]"
-        :value="item[effectKey]"
-        :radio-data="item"
-        :checked="checkedIndex === index"
-        @radioChange="radioChange"
-        :disabled="disabledValue | disabledFilter(index)"
-      />
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'radio-group',
-  props: {
-    styleType: String, // label
-    type: String, // radio 展示
-    list: Array, // radio 需要的数据信息
-    checkedIndex: {
-      type: Number,
-      default: -1,
-    }, // 初始化选中数组第几个从 0 开始
-    effectKey: String, // 绑定有效值对应属性 key
-    effectText: String, // 有效显示文案对应属性 key
-    resloutAttr: String, // 选择结果展示属性值类型 key
-    name: String, // radio 标签 name
-    disabledValue: [String, Number, Boolean, Array], // 禁用的 radio 需要传一个数组
-  },
-  mounted() {
-    if (this.checkedIndex > -1 && this.list && this.list.length > 0) {
-      this.$emit('input', this.list[this.checkedIndex][this.inputReslout]);
-    }
-  },
-  methods: {
-    radioChange(obj) {
-      this.$emit('input', obj[this.inputReslout]);
-    },
-  },
-  watch: {
-    list(val) {
-      if (val && val.length > 0 && this.checkedIndex > -1) {
-        this.$emit('input', val[this.checkedIndex][this.inputReslout]);
-      }
-    },
-    resloutAttr(res) {
-      if (this.list && this.list.length > 0 && this.checkedIndex > -1) {
-        this.$emit('input', this.list[this.checkedIndex][res]);
-      }
-    },
-  },
-  filters: {
-    disabledFilter(propObj, index) {
-      if (Object.prototype.toString.apply(propObj) === '[object Number]') {
-        return propObj === index;
-      } else if (Object.prototype.toString.apply(propObj) === '[object Array]') {
-        return propObj.indexOf(index) > -1;
-      } else if (Object.prototype.toString.apply(propObj) === '[object String]') {
-        return propObj === 'all';
-      } else if (Object.prototype.toString.apply(propObj) === '[object Boolean]') {
-        return propObj;
-      } else {
-        return false;
-      }
-    },
-  },
-  computed: {
-    inputReslout() {
-      return this.resloutAttr || this.effectText;
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
diff --git a/src/packages/radiogroup/radiogroup.scss b/src/packages/radiogroup/radiogroup.scss
index 1998d2776..e6b47a0e1 100644
--- a/src/packages/radiogroup/radiogroup.scss
+++ b/src/packages/radiogroup/radiogroup.scss
@@ -1,2 +1,12 @@
-.nut-radiogroup {
+.nut-radio {
+  .nut-radio-labels {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 18px 16px;
+    box-sizing: border-box;
+    .nut-radio-list-label {
+      margin: 5px 2.3px;
+    }
+  }
 }
diff --git a/src/packages/radiogroup/radiogroup.vue b/src/packages/radiogroup/radiogroup.vue
index d687b5bf1..3bc352932 100644
--- a/src/packages/radiogroup/radiogroup.vue
+++ b/src/packages/radiogroup/radiogroup.vue
@@ -1,28 +1,88 @@
 <template>
-  <div class="nut-radiogroup">
-    <slot></slot>
+  <div class="nut-radio">
+    <div
+      :class="{
+        'nut-radio-labels': styleType === 'label',
+        'nut-radio-lists': styleType === 'list',
+      }"
+      v-if="list && list.length > 0"
+    >
+      <nut-radio
+        v-for="(item, index) in list"
+        :key="item[effectKey]"
+        :type="styleType"
+        :name="name"
+        :text="item[effectText]"
+        :value="item[effectKey]"
+        :radio-data="item"
+        :checked="checkedIndex === index"
+        @radioChange="radioChange"
+        :disabled="disabledValue | disabledFilter(index)"
+      />
+    </div>
   </div>
 </template>
 <script>
 export default {
   name: 'nut-radiogroup',
   props: {
-    value: {
-      type: [String, Number, Boolean],
-      default: false,
+    styleType: String, // label
+    type: String, // radio 展示
+    list: Array, // radio 需要的数据信息
+    checkedIndex: {
+      type: Number,
+      default: -1,
+    }, // 初始化选中数组第几个从 0 开始
+    effectKey: String, // 绑定有效值对应属性 key
+    effectText: String, // 有效显示文案对应属性 key
+    resloutAttr: String, // 选择结果展示属性值类型 key
+    name: String, // radio 标签 name
+    disabledValue: [String, Number, Boolean, Array], // 禁用的 radio 需要传一个数组
+  },
+  mounted() {
+    if (this.checkedIndex > -1 && this.list && this.list.length > 0) {
+      this.$emit('input', this.list[this.checkedIndex][this.inputReslout]);
+    }
+  },
+  methods: {
+    radioChange(obj) {
+      this.$emit('input', obj[this.inputReslout]);
+    },
+  },
+  watch: {
+    list(val) {
+      if (val && val.length > 0 && this.checkedIndex > -1) {
+        this.$emit('input', val[this.checkedIndex][this.inputReslout]);
+      }
     },
-    disabled: {
-      type: Boolean,
-      default: false,
+    resloutAttr(res) {
+      if (this.list && this.list.length > 0 && this.checkedIndex > -1) {
+        this.$emit('input', this.list[this.checkedIndex][res]);
+      }
     },
-    size: {
-      type: String,
-      default: 'base',
+  },
+  filters: {
+    disabledFilter(propObj, index) {
+      if (Object.prototype.toString.apply(propObj) === '[object Number]') {
+        return propObj === index;
+      } else if (Object.prototype.toString.apply(propObj) === '[object Array]') {
+        return propObj.indexOf(index) > -1;
+      } else if (Object.prototype.toString.apply(propObj) === '[object String]') {
+        return propObj === 'all';
+      } else if (Object.prototype.toString.apply(propObj) === '[object Boolean]') {
+        return propObj;
+      } else {
+        return false;
+      }
     },
-    animated: {
-      type: Boolean,
-      default: true,
+  },
+  computed: {
+    inputReslout() {
+      return this.resloutAttr || this.effectText;
     },
   },
 };
 </script>
+<style lang="scss" scoped>
+@import './radiogroup.scss';
+</style>
-- 
GitLab