feat(BFormInput): added highlight method to active a simple highlight animation for a few seconds

Author: devhus

packages/bootstrap-vue-3/src/components/BFormInput/BFormInput.vue

@@ -25,9 +25,9 @@
 </template>
 
 <script lang="ts">
-import type {InputType} from '../../types'
-import {computed, defineComponent, PropType} from 'vue'
+import {computed, defineComponent, PropType, ref} from 'vue'
 import {COMMON_INPUT_PROPS, useFormInput} from '../../composables'
+import type {InputType} from '../../types'
 
 const allowedTypes = [
   'text',
@@ -63,6 +63,7 @@ export default defineComponent({
       const isRange = props.type === 'range'
       const isColor = props.type === 'color'
       return {
+        'form-control-highlighted': isHighlighted.value,
         'form-range': isRange,
         'form-control': isColor || (!props.plaintext && !isRange),
         'form-control-color': isColor,
@@ -80,6 +81,15 @@ export default defineComponent({
     const {input, computedId, computedAriaInvalid, onInput, onChange, onBlur, focus, blur} =
       useFormInput(props, emit)
 
+    const isHighlighted = ref(false)
+    const highlight = () => {
+      if (isHighlighted.value === true) return
+      isHighlighted.value = true
+      setTimeout(() => {
+        isHighlighted.value = false
+      }, 2000)
+    }
+
     return {
       classes,
       localType,
@@ -91,6 +101,7 @@ export default defineComponent({
       onBlur,
       focus,
       blur,
+      highlight,
     }
   },
 })

packages/bootstrap-vue-3/src/styles/styles.scss

@@ -36,7 +36,34 @@
 .dropdown-toggle.dropdown-toggle-no-caret:after {
   display: none !important;
 }
+
 // No focus outline helper (use sparingly)
 .bv-no-focus-ring:focus {
   outline: none;
 }
+
+.form-control-highlighted {
+  border-color: $input-focus-border-color;
+
+  transition: box-shadow 0.3s ease-in-out;
+  animation: form-control-highlighted-blink 1s infinite;
+}
+
+@keyframes form-control-highlighted-blink {
+  0% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+
+  50% {
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}