Switch: simplity internal implementation

packages/switch/src/component.vue

@@ -1,11 +1,11 @@
 <template>
-  <label class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText }">
+  <label class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'is-checked': checked }">
     <div class="el-switch__mask" v-show="disabled"></div>
     <input
       class="el-switch__input"
       type="checkbox"
       @change="handleChange"
-      v-model="_value"
+      ref="input"
       :name="name"
       :true-value="onValue"
       :false-value="offValue"
@@ -105,20 +105,12 @@
         /* istanbul ignore next */
         return this.onText || this.offText;
       },
-      _value: {
-        get() {
-          return this.value;
-        },
-        set(val) {
-          this.$emit('input', val);
-        }
-      },
       transform() {
         return this.checked ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
       }
     },
     watch: {
-      value() {
+      checked() {
         if (this.onColor || this.offColor) {
           this.setBackgroundColor();
         }
@@ -126,7 +118,13 @@
     },
     methods: {
       handleChange(event) {
-        this.$emit('change', event.currentTarget.checked ? this.onValue : this.offValue);
+        this.$emit('change', !this.checked ? this.onValue : this.offValue);
+        this.$emit('input', !this.checked ? this.onValue : this.offValue);
+        this.$nextTick(() => {
+          // set input's checked property
+          // in case parent refuses to change component's value
+          this.$refs.input.checked = this.checked;
+        });
       },
       setBackgroundColor() {
         let newColor = this.checked ? this.onColor : this.offColor;
@@ -142,6 +140,7 @@
       if (this.onColor || this.offColor) {
         this.setBackgroundColor();
       }
+      this.$refs.input.checked = this.checked;
     }
   };
 </script>

packages/theme-default/src/switch.css

@@ -49,10 +49,6 @@
 
     @e input {
       display: none;
-      &:checked + .el-switch__core {
-        border-color: var(--switch-on-color);
-        background-color: var(--switch-on-color);
-      }
     }
 
     @e core {
@@ -77,6 +73,13 @@
       }
     }
 
+    @when checked {
+      .el-switch__core {
+        border-color: var(--switch-on-color);
+        background-color: var(--switch-on-color);
+      }
+    }
+
     @when disabled {
       .el-switch__core {
         border-color: var(--switch-disabled-color) !important;
@@ -90,11 +93,6 @@
           color: var(--switch-disabled-text-color) !important;
         }
       }
-
-      .el-switch__input:checked + .el-switch__core {
-        border-color: var(--switch-disabled-color);
-        background-color: var(--switch-disabled-color);
-      }
     }
 
     @modifier wide {