Switch: Add `allowFocus` prop & focus/blur events (#7494)

* Table: Add `important` rule to `col-resize` cursor

* Table: Add `important` rule to `col-resize` cursor

* Update table-header.js

* [Switch]: Add `allowFocus` prop + blur/focus events

+ Add new `allowFocus` prop
+ Add event emitters for focus & blur events
+ Set `input` $ref `.focus()` on switch click event

* [Switch]: Add styling for when `allowFocus: true`

+ Add styling for when `allowFocus` prop is set to true.
+ Add styling for when input is focused

* [Switch]: Update docs

examples/docs/en-US/switch.md

@@ -122,10 +122,13 @@ on-value  | switch value when in `on` state | boolean / string / number | — |
 off-value  | switch value when in `off` state | boolean / string / number | — | false
 on-color | background color when in `on` state | string | — | #20A0FF
 off-color | background color when in `off` state | string | — | #C0CCDA
-name| input name of Switch | string | — | —
+name | input name of Switch | string | — | —
+allow-focus | allow `.focus()` & `.blur()` methods on the `input` $ref | boolean | — | false
 
 ### Events
 
  Event Name | Description | Parameters
 ---- | ----| ----
-change | triggers when value changes | value after changing
+change | triggers when value changes | (value: Boolean)
+blur | triggers on blur (if `allowFocus` is `true`) | (event: Event)
+focus | triggers on focus (if `allowFocus` is `true`) | (event: Event)

packages/switch/src/component.vue

@@ -3,14 +3,17 @@
     <div class="el-switch__mask" v-show="disabled"></div>
     <input
       class="el-switch__input"
+      :class="{ 'allow-focus': allowFocus }"
       type="checkbox"
       @change="handleChange"
+      @focus="handleFocus"
+      @blur="handleBlur"
       ref="input"
       :name="name"
       :true-value="onValue"
       :false-value="offValue"
       :disabled="disabled">
-    <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
+    <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }" @click="setFocus">
       <span class="el-switch__button" :style="{ transform }"></span>
     </span>
     <transition name="label-fade">
@@ -85,6 +88,10 @@
       name: {
         type: String,
         default: ''
+      },
+      allowFocus: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
@@ -131,6 +138,22 @@
         let newColor = this.checked ? this.onColor : this.offColor;
         this.$refs.core.style.borderColor = newColor;
         this.$refs.core.style.backgroundColor = newColor;
+      },
+      setFocus() {
+        // set focus on input
+        if (this.allowFocus) {
+          this.$refs.input.focus();
+        }
+      },
+      handleBlur(event) {
+        if (this.allowFocus) {
+          this.$emit('blur', event);
+        }
+      },
+      handleFocus(event) {
+        if (this.allowFocus) {
+          this.$emit('focus', event);
+        }
       }
     },
     mounted() {

packages/theme-default/src/common/var.css

@@ -400,6 +400,7 @@
   --switch-width: 46px;
   --switch-height: 22px;
   --switch-button-size: 16px;
+  --switch-focus-border: var(--color-primary);
 
   /* Dialog
  -------------------------- */

packages/theme-default/src/switch.css

@@ -26,6 +26,8 @@
       display: inline-block;
       font-size: var(--switch-font-size);
       cursor: pointer;
+      z-index: 2;
+
       @m left {
         i {
           left: 6px;
@@ -48,6 +50,22 @@
 
     @e input {
       display: none;
+
+      &.allow-focus {
+        z-index: 0;
+        display: initial;
+        position: absolute;
+        left: 0;
+        top: 0;
+        outline: none;
+        opacity: 0;
+
+        &:focus {
+          + .el-switch__core {
+            box-shadow: 0 0 2px var(--switch-focus-border);
+          }
+        }
+      }
     }
 
     @e core {
@@ -62,6 +80,7 @@
       background: var(--switch-off-color);
       cursor: pointer;
       transition: border-color .3s, background-color .3s;
+      z-index: 1;
 
       & .el-switch__button {
         position: absolute 0 * * 0;