Fix outlines for KTextbox and KSwitch

lib/KSwitch.vue

@@ -1,30 +1,29 @@
 <template>
 
-  <!-- Vendored from  UI UISwitch component https://josephuspaye.github.io/-UI/#/ui-switch -->
+  <!-- Vendored from  UI UISwitch component https://josephuspaye.github.io/Keen-UI/#/ui-switch -->
   <label class="k-switch" :class="classes">
-    <div class="k-switch-input-wrapper">
-      <input
-        ref="input"
-        class="k-switch-input"
-        type="checkbox"
-        dir="auto"
+    <div :style="isActive ? this.$coreOutline : {}">
+      <div class="k-switch-input-wrapper">
+        <input
+          ref="input"
+          class="k-switch-input"
+          type="checkbox"
+          dir="auto"
 
-        :checked.prop="isChecked"
-        :disabled="disabled"
-        :name="name"
-        :tabindex="tabindex"
-        :value="submittedValue"
+          :checked.prop="isChecked"
+          :disabled="disabled"
+          :name="name"
+          :tabindex="tabindex"
+          :value="submittedValue"
 
-        @blur="onBlur"
-        @click="onClick"
-        @focus="onFocus"
-      >
+          @blur="onBlur"
+          @click="onClick"
+          @focus="onFocus"
+        >
+        <div class="k-switch-thumb"></div>
 
-      <div class="k-switch-thumb">
-        <div class="k-switch-focus-ring"></div>
+        <div class="k-switch-track"></div>
       </div>
-
-      <div class="k-switch-track"></div>
     </div>
 
     <div v-if="label || $slots.default" class="k-switch-label-text">
@@ -192,7 +191,6 @@
   $k-switch-thumb-color: #fafafa !default;
   $k-switch-track-width: 34px !default;
   $k-switch-track-height: 14px !default;
-  $k-switch-focus-ring-size: $k-switch-thumb-size * 2.1 !default;
 
   .k-switch {
     position: relative;
@@ -243,12 +241,6 @@
   .k-switch-input {
     position: absolute;
     opacity: 0;
-    body[modality='keyboard'] &:focus + .k-switch-thumb {
-      .k-switch-focus-ring {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
   }
 
   .k-switch-track {
@@ -273,19 +265,6 @@
     transition-duration: 0.2s;
     transition-property: background-color, transform;
   }
-  .k-switch-focus-ring {
-    position: absolute;
-    top: -(($k-switch-focus-ring-size - $k-switch-thumb-size) / 2);
-    left: -(($k-switch-focus-ring-size - $k-switch-thumb-size) / 2);
-    z-index: -1;
-    width: $k-switch-focus-ring-size;
-    height: $k-switch-focus-ring-size;
-    background-color: rgba(0, 0, 0, 0.1);
-    border-radius: 50%;
-    opacity: 0;
-    transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.15s ease;
-    transform: scale(0);
-  }
   .k-switch-label-text {
     margin-left: 16px;
     font-size: 15px;
@@ -314,9 +293,6 @@
       .k-switch-thumb {
         background-color: #4caf50;
       }
-      .k-switch-focus-ring {
-        background-color: #a5d6a7;
-      }
     }
   }
 

lib/KTextbox/index.vue

@@ -13,6 +13,7 @@
       :maxlength="maxlength"
       :autocomplete="autocomplete"
       :autocapitalize="autocapitalize"
+      :style="changedOrFocused ? this.$coreOutline : {}"
       :type="type"
       :min="min"
       :max="max"
@@ -195,12 +196,14 @@
         /**
          * Emitted with `blur` events
          */
+        this.changedOrFocused = false;
         this.$emit('blur', e);
       },
       emitFocus(e) {
         /**
          * Emitted with `focus` events
          */
+        this.changedOrFocused = true;
         this.$emit('focus', e);
       },
       /**

lib/styles/trackInputModality.js

@@ -9,53 +9,11 @@ import globalThemeState from './globalThemeState';
 
 function setUpEventHandlers(disableFocusRingByDefault) {
   let hadKeyboardEvent = false;
-  const keyboardModalityWhitelist = [
-    'input:not([type])',
-    'input[type=text]',
-    'input[type=number]',
-    'input[type=date]',
-    'input[type=time]',
-    'input[type=datetime]',
-    'textarea',
-    '[role=textbox]',
-    '[supports-modality=keyboard]',
-  ].join(',');
 
   let isHandlingKeyboardThrottle;
 
-  const matcher = (() => {
-    const el = document.body;
-
-    if (el.matchesSelector) {
-      return el.matchesSelector;
-    }
-
-    if (el.webkitMatchesSelector) {
-      return el.webkitMatchesSelector;
-    }
-
-    if (el.mozMatchesSelector) {
-      return el.mozMatchesSelector;
-    }
-
-    if (el.msMatchesSelector) {
-      return el.msMatchesSelector;
-    }
-  })();
-
-  const focusTriggersKeyboardModality = function(el) {
-    let triggers = false;
-
-    if (matcher) {
-      triggers =
-        matcher.call(el, keyboardModalityWhitelist) && matcher.call(el, ':not([readonly])');
-    }
-
-    return triggers;
-  };
-
   if (disableFocusRingByDefault) {
-    const css = 'body :focus:not([modality=keyboard]) { outline: none; }';
+    const css = 'body:not([modality=keyboard]) :focus { outline: none; }';
     const head = document.head || document.getElementsByTagName('head')[0];
     const style = document.createElement('style');
 
@@ -89,8 +47,8 @@ function setUpEventHandlers(disableFocusRingByDefault) {
 
   document.body.addEventListener(
     'focus',
-    e => {
-      if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
+    () => {
+      if (hadKeyboardEvent) {
         globalThemeState.inputModality = 'keyboard';
       }
     },

yarn.lock

@@ -15488,10 +15488,10 @@ vue-client-only@^2.0.0:
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
   integrity sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA==
 
-vue-docgen-api@^4.15.1:
-  version "4.38.1"
-  resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.38.1.tgz#362422c8ab16f007e712744b3a7d2ed16c3230f5"
-  integrity sha512-w5mM5Vppw+7ucN4HjwLLdqiZee5k7cEVGARGKgBdxRmpr88MUrLlYhUNLiYVhsTLFh0WNpfHAW8qW0lOTE8TXQ==
+vue-docgen-api@^4.38.1:
+  version "4.38.2"
+  resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.38.2.tgz#c9beafd81a274aa89ebe435351697372658c2f40"
+  integrity sha512-7kRXrlhabxsqKEwqPBLb+6rNcRSbVsSLm5BjnE5/LTlUNcEiwE5q6rENQRbm0WK+eAPOrQHD0pZXH6+AyR2/gA==
   dependencies:
     "@babel/parser" "^7.13.12"
     "@babel/types" "^7.13.12"