feat: Add autoFocus props

Author: ktquez

README.md

@@ -122,7 +122,23 @@ isVisible | `Boolean` | `false`
 For example:
 
 ```html
-<FocusLoop:isVisible="isSidebarOpen">
+<FocusLoop:is-visible="isSidebarOpen">
+<!-- your elements here -->
+</FocusLoop>
+```
+
+## Disable autofocus on the first element
+
+When activating the `<FocusLoop>`, the first element receives the focus automatically, however, if you want to disable this behavior, just disable it through the `autoFocus` prop.
+
+prop | type | default
+----------- | --------- | ------------
+autoFocus | `Boolean` | `true`
+
+For example:
+
+```html
+<FocusLoop:auto-focus="false">
 <!-- your elements here -->
 </FocusLoop>
 ```

src/FocusLoop.vue

@@ -35,6 +35,10 @@ export default{
  isVisible:{
  type:Boolean,
  default:false
+ },
+ autoFocus:{
+ type:Boolean,
+ default:true
  }
  },
 
@@ -55,7 +59,7 @@ export default{
  },
 
 mounted (){
-this.focusFirst(this.isVisible||true)
+this.focusFirst(this.isVisible)
  },
 
  methods:{
@@ -66,7 +70,7 @@ export default{
  },
 
 focusFirst (visible){
-if (!visible) return
+if (!visible&&!this.autoFocus) return
 constelements=this.getFocusableElements()
 if (elements.length) setTimeout(() => elements[0].focus(), 200)
  },