chore(radio): get off work checkpoint...

demo/components/popoverDemo.vue

@@ -1,6 +1,3 @@
-/**
-  有待解决一个bug，在nimbus新的layout下，不使用transfer 弹出的定位是不准的，所以这里默认使用了transfer,经过查询可能是 overflow:auto造成的影响但是还是没有解决
- */
 <template>
   <div
     ref="doc"

demo/components/radioDemo.vue

@@ -95,6 +95,71 @@ export default {
   </n-radio>
 </n-radio-group>
 
+<script>
+export default {
+  data () {
+    return {
+      value: null,
+      songs: [
+        {
+          value: 'Rock\'n\'Roll Star',
+          label: 'Rock\'n\'Roll Star'
+        },
+        {
+          value: 'Shakermaker',
+          label: 'Shakermaker'
+        },
+        {
+          value: 'Live Forever',
+          label: 'Live Forever'
+        },
+        {
+          value: 'Up in the Sky',
+          label: 'Up in the Sky'
+        },
+        {
+          value: '...',
+          label: '...'
+        }
+      ].map(s => {
+        s.value = s.value.toLowerCase()
+        return s
+      }
+    }
+  }
+}
+</script>
+</textarea>
+        </div>
+      </div>
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Radio Button Group
+        </div>
+        <div class="n-doc-section__view">
+          <n-radio-group v-model="value3">
+            <n-radio-button
+              v-for="song in songs"
+              :key="song.value"
+              :value="song.value"
+              :disabled="song.label === 'Live Forever'"
+            >
+              {{ song.label }}
+            </n-radio-button>
+          </n-radio-group>
+        </div>
+        <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value3) }}</pre>
+        <div class="n-doc-section__source">
+          <textarea v-pre><n-radio-group v-model="value">
+  <n-radio
+    v-for="song in songs"
+    :key="song.value"
+    :value="song.value"
+  >
+    {{ song.label }}
+  </n-radio>
+</n-radio-group>
+
 <script>
 export default {
   data () {
@@ -144,6 +209,7 @@ export default {
     return {
       value1: null,
       value2: null,
+      value3: 'Shakermaker',
       songs: [
         {
           value: 'Rock\'n\'Roll Star',

packages/common/Radio/index.js

@@ -1,10 +1,12 @@
 /* istanbul ignore file */
 import Radio from './src/main.vue'
 import RadioGroup from './src/RadioGroup.vue'
+import RadioButton from './src/RadioButton.vue'
 
 Radio.install = function (Vue) {
   Vue.component(Radio.name, Radio)
   Vue.component(RadioGroup.name, RadioGroup)
+  Vue.component(RadioButton.name, RadioButton)
 }
 
 export default Radio

packages/common/Radio/src/RadioButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="n-radio-button"
+    :class="{
+      'n-radio-button--disabled': disabled,
+      'n-radio-button--checked': checked
+    }"
+    @click="handleClick"
+  >
+    <div class="n-radio-button__border-mask" />
+    <div class="n-radio-button__label">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NRadioButton',
+  model: {
+    prop: 'privateValue',
+    event: 'input'
+  },
+  props: {
+    value: {
+      type: [Boolean, String, Number],
+      default: null
+    },
+    privateValue: {
+      type: [Boolean, String, Number],
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    checked () {
+      return this.privateValue === this.value
+    }
+  },
+  methods: {
+    handleClick () {
+      if (this.disabled) return
+      if (this.privateValue !== this.value) {
+        this.$emit('input', this.value)
+      }
+    }
+  }
+}
+</script>

packages/common/Radio/src/RadioGroup.vue

@@ -1,7 +1,7 @@
 <script>
 function mapSlot (defaultSlot, currentComponent) {
   return defaultSlot.map(el => {
-    if (el.componentOptions.tag === 'n-radio') {
+    if (el.componentOptions.tag === 'n-radio' || el.componentOptions.tag === 'n-radio-button') {
       el.componentOptions.propsData.privateValue = currentComponent.value
       el.componentOptions.listeners = {
         ...el.componentOptions.listeners,

styles/Radio.scss

@@ -59,9 +59,9 @@
       box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
       transition: box-shadow .2s $default-cubic-bezier;
       &::before {
-        transform: scale(1.5);
+        transform: scale(.8);
         transform-origin: center;
-        opacity: 1;
+        opacity: 0;
         background-color: rgba(233,233,236,0.25);
       }
       &.n-radio__control--checked {
@@ -80,4 +80,73 @@
 @include b(radio-group) {
   display: inline-block;
   vertical-align: middle;
+}
+
+@include b(radio-button) {
+  position: relative;
+  user-select: none;
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  height: 28px;
+  line-height: 28px;
+  border-top: 1px solid rgba(255,255,255,0.5);
+  border-bottom: 1px solid rgba(255,255,255,0.5);
+  box-sizing: border-box;
+  .n-radio-button__label {
+    height: 28px;
+    line-height: 28px;
+    display: inline-block;
+    color: rgba(233,233,236,1);
+    margin: 0 14px;
+  }
+  .n-radio-button__border-mask {
+    pointer-events: none;
+    position: absolute;
+    box-shadow: inset 0 0 0 1px transparent;
+    transition: box-shadow .2s $default-cubic-bezier;
+    left: -1px;
+    bottom: -1px;
+    right: -1px;
+    top: -1px;
+  }
+  &:first-child {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-left: 1px solid rgba(255,255,255,0.5);
+    border-right: 1px solid rgba(255,255,255,0.5);
+    .n-radio-button__border-mask {
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
+    }
+  }
+  &:last-child {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+    
+    border-right: 1px solid rgba(255,255,255,0.5);
+    .n-radio-button__border-mask {
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+  }
+  &:not(:first-child):not(:last-child) {
+    border-right: 1px solid rgba(255,255,255,0.5);
+  }
+  &:not(.n-radio-button--disabled) {
+    cursor: pointer;
+    &:hover .n-radio-button__border-mask {
+      box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1);
+      transition: box-shadow .2s $default-cubic-bezier;
+    }
+    &:active .n-radio-button__border-mask {
+      box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1), 0px 0px 10px 1px rgba(99,226,183,0.3);
+    }
+  }
+  &.n-radio-button--disabled {
+    cursor: not-allowed;
+    .n-radio__label {
+      color: rgba(233,233,236,0.25);
+    }
+  }
 }