feat(radio): code refactor

BREAKING CHANGE: full code rewrite and rename props and slots

components/radio/index.vue

@@ -1,76 +1,56 @@
 <template>
-  <div
+  <md-field class="md-radio" :class="{'is-across': isAcrossBorder, 'is-center': isAlignCenter}">
-    class="md-radio"
-    :class="{
-      'across': isAcrossBorder,
-      'align-center': isAlignCenter,
-    }"
-  >
-    <md-field>
-      <template v-for="(item, index) in options">
     <md-field-item
       class="md-radio-item"
+      v-for="(item, index) in options"
       :class="{
-            'selected': $_isSelectedIndex(index) || $_isSelectedValue(item.value || item.text || item.label, index),
+        'is-selected': $_isSelectedIndex(index) || $_isSelectedValue(item.value || item.text || item.label, index)
-            'icon-left': iconPosition === 'left'
       }"
-          title=""
       :key="index"
       :disabled="$_isInvalidIndex(item, index)"
       @click="$_onItemClick(item, index)"
-          customized
     >
-          <!-- radio-option-content -->
+      <div class="md-radio-item-content">
-          <template v-if="hasSlot">
+        <slot :option="item">
-            <!-- use slot -->
+          <p class="md-field-item-title md-radio-item-title" v-text="item.text || item.label"></p>
-            <div class="md-radio-content">
+          <p class="md-field-item-describe md-radio-item-describe" v-if="item.describe" v-text="item.describe"></p>
-              <slot :option="item"></slot>
+        </slot>
       </div>
-          </template>
-          <template v-else>
-            <!-- use data or optionRender -->
-            <div class="md-radio-content" v-html="$_getItemText(item)"></div>
-          </template>
 
       <!-- radio-option-check-icon -->
-          <template v-if="$_isSelectedIndex(index) || $_isSelectedValue(item.value || item.text || item.label, index)">
+      <template :slot="iconPosition === 'left' ? 'start': 'after'">
         <md-icon
-              v-if="icon"
+          v-if="icon && ($_isSelectedIndex(index) || $_isSelectedValue(item.value || item.text || item.label, index))"
           :name="icon"
           :size="iconSize"
         ></md-icon>
-          </template>
-          <template v-else>
         <md-icon
-              v-if="iconInverse"
+          v-else-if="iconInverse"
           :name="iconInverse"
           :size="iconSize"
         ></md-icon>
       </template>
     </md-field-item>
-      </template>
     <md-input-item
       v-if="hasInputOption"
       ref="inputItem"
       class="md-radio-item"
       :class="{
-          'selected': $_isSelectedIndex(options.length),
+        'is-selected': $_isSelectedIndex(options.length),
       }"
       :title="inputOptionLabel"
       :placeholder="inputOptionPlaceholder"
       v-model="inputOptionValue"
       @focus="$_onItemFocus(options.length)"
-      >
+    />
-      </md-input-item>
   </md-field>
-  </div>
 </template>
 
 <script>
import Field from '../field'
 import FieldItem from '../field-item'
 import InputItem from '../input-item'
 import Icon from '../icon'
-import {inArray, compareObjects, noop, warn} from '../_util'
+import {inArray, compareObjects, warn} from '../_util'
 export default {
   name: 'md-radio',
 
@@ -102,14 +82,14 @@ export default {
         return []
       },
     },
-    hasInputOption: {
-      type: Boolean,
-      default: false,
-    },
     value: {
       type: String,
       default: '',
     },
+    hasInputOption: {
+      type: Boolean,
+      default: false,
+    },
     inputOptionLabel: {
       type: String,
       default: '',
@@ -138,14 +118,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    optionRender: {
-      type: Function,
-      default: noop,
-    },
-    isSlotScope: {
-      type: Boolean,
-      default: undefined,
-    },
     isAcrossBorder: {
       type: Boolean,
       default: false,
@@ -277,47 +249,33 @@ export default {
 
</script>
 
 <style lang="stylus">
-.md-radio
+.md-radio.md-field
-  .md-field
+  &.is-across
-    .md-field-item.md-radio-item
+    padding-left 0
-      position relative
+    padding-right 0
-      .md-field-item-inner
+    .md-radio-item
-        .md-field-item-content
+      padding-left field-padding-h
-          font-weight font-weight-normal
+      padding-right field-padding-h
-      .md-icon
+  &.is-center
-        position absolute
+    .md-field-item-start,
-        right 0
+    .md-field-item-after
-        top 50%
+      display none
-        transform translateY(-50%)
+    .md-radio-item-content
-        fill radio-color
+      text-align center
-      &.selected
+
-        .md-field-item-content
+.md-radio-item
-          color radio-color
+  &.is-selected
-      &.icon-left
+    .md-radio-item-content,
-        .md-icon
+    .md-radio-item-title,
-          left 0
+    .md-radio-item-describe,
-          right auto !important
-        .md-field-item-content
-          padding-left 40px
-      .md-field-item-content.left
-        margin-left 0
-    .md-input-item.selected
     .md-input-item-title
       color radio-color
-  &.across
+  .md-field-item-start,
-    .md-field
+  .md-field-item-after
-      .md-field-item.md-radio-item
-        padding 0
-        .md-field-item-inner .md-icon
-          right 32px
-        &.icon-left
     .md-icon
-            left 32px
+      fill radio-color
 
-  &.align-center
+.md-radio-item-content
-    .md-field-item-content.left
+  font-weight font-weight-normal
-      justify-content center
-    .md-field-item .md-icon
-      display none
 </style>