feat(radio): allowing no js instantiation (#398)

Author: tychenjiajun

components/radio/README.md

@@ -25,6 +25,7 @@ data() {
 | disabled | Boolean | false | disabled radio |
 | value | String | '' | value of radio (will be v-modeled) |
 | name | String | '' | radio group name |
+| js | Boolean | true | Whether or not to use an optional JavaScript component to enhance it with a ripple interaction effect |
 
 Non prop attributes are mapped to the inner input element.
 

components/radio/Radio.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="mdc-radio">
+  <div class="mdc-radio" :class="classes">
     <input
       class="mdc-radio__native-control"
       type="radio"
       v-bind="$attrs"
+      v-on="$listeners"
       @change="onChange"
+      ref="input"
     >
     <div class="mdc-radio__background">
       <div class="mdc-radio__outer-circle" />
@@ -25,47 +27,50 @@ export default {
     event: 'change'
   },
   props: {
-    checked: {
+    js: {
       type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    value: {
-      type: String,
-      default: ''
+      default: true
     }
   },
   data () {
     return {
       mdcRadio: undefined
     }
   },
+  computed: {
+    classes () {
+      return {
+        'mdc-radio--disabled': this.$attrs.disabled != null
+      }
+    }
+  },
   watch: {
-    checked () {
-      this.mdcRadio.checked = this.checked
-    },
-    disabled () {
-      this.mdcRadio.disabled = this.disabled
-    },
-    value () {
-      this.mdcRadio.value = this.value
+    js () {
+      this.reInstantiate()
     }
   },
   mounted () {
-    this.mdcRadio = MDCRadio.attachTo(this.$el)
-    this.mdcRadio.checked = this.checked
-    this.mdcRadio.disabled = this.disabled
-    this.mdcRadio.value = this.value
+    if (this.js) this.mdcRadio = MDCRadio.attachTo(this.$el)
   },
   beforeDestroy () {
-    this.mdcRadio.destroy()
+    if (this.js) this.mdcRadio.destroy()
   },
   methods: {
-    onChange (event) {
-      this.$emit('change', this.mdcRadio.value)
+    onChange () {
+      this.$emit('change', this.$refs.input.value)
+    },
+    reInstantiate () {
+      if (this.js) {
+        if (this.mdcRadio) {
+          this.mdcRadio.destroy()
+        }
+        MDCRadio.attachTo(this.$el)
+      } else {
+        if (this.js) {
+          this.mdcRadio.destroy()
+        }
+        this.mdcRadio = undefined
+      }
     }
   }
 }

components/radio/__test__/Radio.spec.js

@@ -2,38 +2,41 @@ import 'mutationobserver-shim'
 import { mount } from '@vue/test-utils'
 import Radio from '../Radio.vue'
 
-describe('Checkbox', () => {
+describe('Radio', () => {
   it('should mount', () => {
-    let wrapper = mount(Radio)
+    const wrapper = mount(Radio)
     expect(wrapper.isVueInstance()).toBeTruthy()
     expect(wrapper.vm.$data.mdcRadio).toBeDefined()
   })
 
   it('should render with no prop', () => {
-    let wrapper = mount(Radio)
+    const wrapper = mount(Radio)
     expect(wrapper).toMatchSnapshot()
     expect(wrapper.classes()).toContain('mdc-radio')
     expect(wrapper.find('input').attributes('disabled')).toBeUndefined()
   })
 
   it('should render as disabled', () => {
-    let wrapper = mount(Radio, {
-      propsData: {
+    const wrapper = mount(Radio, {
+      attrs: {
         disabled: true
       }
     })
+
     expect(wrapper).toMatchSnapshot()
     expect(wrapper.classes()).toContain('mdc-radio--disabled')
     expect(wrapper.find('input').attributes('disabled')).toBeDefined()
   })
 
   it('should render and emit', () => {
-    let wrapper = mount(Radio, {
-      propsData: {
+    const wrapper = mount(Radio, {
+      attrs: {
         value: 'val'
       }
     })
 
+    expect(wrapper).toMatchSnapshot()
+
     const radio = wrapper.find('input')
     radio.setChecked(true)
     expect(wrapper.emitted().change.length).toBe(1)

components/radio/__test__/__snapshots__/Radio.spec.js.snap

@@ -1,16 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Checkbox should render as disabled 1`] = `
-<div class="mdc-radio mdc-radio--disabled"><input type="radio" class="mdc-radio__native-control" disabled="" value="">
+exports[`Radio should render and emit 1`] = `
+<div class="mdc-radio"><input type="radio" class="mdc-radio__native-control" value="val">
   <div class="mdc-radio__background">
     <div class="mdc-radio__outer-circle"></div>
     <div class="mdc-radio__inner-circle"></div>
   </div>
 </div>
 `;
 
-exports[`Checkbox should render with no prop 1`] = `
-<div class="mdc-radio"><input type="radio" class="mdc-radio__native-control" value="">
+exports[`Radio should render as disabled 1`] = `
+<div class="mdc-radio mdc-radio--disabled"><input type="radio" disabled="disabled" class="mdc-radio__native-control">
+  <div class="mdc-radio__background">
+    <div class="mdc-radio__outer-circle"></div>
+    <div class="mdc-radio__inner-circle"></div>
+  </div>
+</div>
+`;
+
+exports[`Radio should render with no prop 1`] = `
+<div class="mdc-radio"><input type="radio" class="mdc-radio__native-control">
   <div class="mdc-radio__background">
     <div class="mdc-radio__outer-circle"></div>
     <div class="mdc-radio__inner-circle"></div>