feat(switch): add foundation as per MDCWeb 0.38

also refactor value property for switch and radio
stasson · Aug 7, 2018 · 7251a6c · 7251a6c
1 parent 4acde2c
commit 7251a6c
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 24 deletions.
diff --git a/components/radio/README.md b/components/radio/README.md
@@ -31,7 +31,7 @@ var vm = new Vue({
 |`name`|String || radio group name (__*__)  |
 |`label`| String|static| radio label |
 |`align-end`| Boolean|| align the radio after the label |
-|`value`|String| `label`| radio value, defaults to label value if any |
+|`value`|String|| input control value |
 |`checked`|Boolean|| forces this radio to be selected. follows v-model otherwise |
 |`:disabled`| Boolean|| whether the radio is disabled |
 |`v-model`| String || tracks selected radio's value |

diff --git a/components/radio/mdc-radio.vue b/components/radio/mdc-radio.vue
@@ -108,7 +108,7 @@ export default {
     this.ripple.init()
     this.formField.init()
 
-    this.foundation.setValue(this.value ? this.value : this.label)
+    this.value && this.foundation.setValue(this.value)
     this.foundation.setDisabled(this.disabled)
     this.foundation.setChecked(
       this.checked || this.picked == this.foundation.getValue()
@@ -124,7 +124,7 @@ export default {
   },
   methods: {
     setChecked(checked) {
-        this.foundation.setChecked(checked)
+      this.foundation.setChecked(checked)
     },
     isChecked() {
       return this.foundation.isChecked()

diff --git a/components/switch/README.md b/components/switch/README.md
@@ -29,7 +29,7 @@ var vm = new Vue({
 |`disabled`| Boolean|| whether the checkbox is disabled |
 |`label`| String|| checkbox label |
 |`align-end`| Boolean|| align the checkbox after the label |
-|`value`|String| `'on'`| checkbox value |
+|`value`|String|| input control value |
 |`name`|String|| input name |
 
 

diff --git a/components/switch/mdc-switch.vue b/components/switch/mdc-switch.vue
@@ -7,22 +7,24 @@
     class="mdc-switch-wrapper" >
 
     <div
-      :class="{'mdc-switch--disabled': disabled }"
+      :class="classes"
+      :styles="styles"
       class="mdc-switch">
-      <input
-        ref="control"
-        :name="name"
-        :id="vma_uid_"
-        :checked="checked"
-        :disabled="disabled"
-        type="checkbox"
-        class="mdc-switch__native-control"
-        @change="onChanged" >
+      <div class="mdc-switch__track" />
+      <div class="mdc-switch__thumb-underlay">
+        <div class="mdc-switch__thumb">
+          <input
+            ref="control"
+            :name="name"
+            :id="vma_uid_"
+            :value="value"
+            type="checkbox"
+            role="switch"
+            class="mdc-switch__native-control"
+            @change="onChanged" >
 
-      <div class="mdc-switch__background">
-        <div class="mdc-switch__knob"/>
+        </div>
       </div>
-
     </div>
 
     <label
@@ -37,6 +39,8 @@
 
 <script>
 import { DispatchFocusMixin, VMAUniqueIdMixin } from '../base'
+import { RippleBase } from '../ripple'
+import MDCSwitchFoundation from '@material/switch/foundation'
 
 export default {
   name: 'mdc-switch',
@@ -47,24 +51,57 @@ export default {
   },
   props: {
     checked: Boolean,
+    disabled: Boolean,
+    value: String,
     label: String,
     alignEnd: Boolean,
-    disabled: Boolean,
-    value: {
-      type: String,
-      default() {
-        return 'on'
-      }
-    },
     name: String
   },
+  data() {
+    return {
+      classes: {},
+      styles: {}
+    }
+  },
   computed: {
     hasLabel() {
       return this.label || this.$slots.default
     }
   },
+  watch: {
+    checked(value) {
+      this.foundation && this.foundation.setChecked(value)
+    },
+    disabled(value) {
+      this.foundation && this.foundation.setDisabled(value)
+    }
+  },
+
+  mounted() {
+    this.foundation = new MDCSwitchFoundation({
+      addClass: className => this.$set(this.classes, className, true),
+      removeClass: className => this.$delete(this.classes, className),
+      setNativeControlChecked: checked =>
+        (this.$refs.control.checked = checked),
+      isNativeControlChecked: () => this.$refs.control.checked,
+      setNativeControlDisabled: disabled =>
+        (this.$refs.control.disabled = disabled),
+      isNativeControlDisabled: () => this.nativeControl_.disabled
+    })
+    this.foundation.init()
+    this.foundation.setChecked(this.checked)
+    this.foundation.setDisabled(this.disabled)
+
+    this.ripple = new RippleBase(this)
+    this.ripple.init()
+  },
+  beforeDestroy() {
+    this.foundation && this.foundation.destroy()
+    this.ripple && this.ripple.destroy()
+  },
   methods: {
     onChanged(event) {
+      this.foundation && this.foundation.handleChange()
       this.$emit('change', event.target.checked)
     }
   }