Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@undecaf/vue-autofocus
Advanced tools
Readme
This directive, v-autofocus
, tries to be smart in the following ways:
<div>
) or a Vue component,
it will focus on the first focusable descendant. Descendants are scanned in document order.contenteditable
elements, too.v-autofocus
to work with opaque Vue input components such as the
Vue Material Datepicker,
Vue Material Chips and
Vue Material Autocomplete.v-autofocus
can act with some delay in order to be compatible with container components
that manipulate the focus after their children have been inserted (e.g. the
Vue Material Dialog),A simple example is available here (example source code).
Please note: in this context, an element is considered "focusable" if it can become the
document.activeElement
.
This includes contenteditable
elements.
Focusable elements become non-focusable only if hidden or having attribute disabled
.
Elements with any integer tabindex
are at least click focusable.
As a module:
$ npm install @undecaf/vue-autofocus
or
$ yarn add @undecaf/vue-autofocus
Included as <script>
:
<script src="https://cdn.jsdelivr.net/npm/@undecaf/vue-autofocus/dist/directives.min.js"></script>
import autofocus from 'vue-autofocus'
Vue.use(autofocus)
v-autofocus
expects a configuration object, a primitive value as a single option (see below), or no
value at all. Unspecified options get default values.
The configuration object supports the following properties:
Name | Type | Description | Default |
---|---|---|---|
enabled | Boolean | Enables the directive if truthy. | true |
selector | String | Only an element matching this selector can receive the focus, starting with the element on which this directive is placed. | '*' |
on | String or Array<String> | Child event(s) that re-trigger auto-focusing. | [] |
delay | Number | Delay (in ms) until the focus is set. A value of 0 sets the focus synchronously with the trigger event. | 50 |
If a value is specified that is not an object then its type determines which option it applies to:
Boolean
→ enabled
, String
→ selector
, Array
→ on
, Number
→ delay
.
The configuration can be modified after binding; changes to on
take effect immediately, all other changes become noticeable only after a child event
(e.g. 'hook:updated'
or
'md-opened'
).
A simple use case:
<input type="text" v-autofocus>
Conditional autofocus:
<input type="text" v-autofocus="{ enabled: active }"> <!-- or: autofocus="Boolean(active)" -->
Focusing on the first focusable descendant:
<div v-autofocus>
<!-- These are not focusable -->
<div><span>Not focusable</span></div>
<img src="#">
<a></a>
<input type="hidden">
<input type="text" disabled>
<div>
<!-- First focusable descendant -->
<textarea v-model="comment"></textarea>
</div>
</div>
Focusing on the first focusable descendant that matches a selector:
<div autofocus="{ selector: '.focus-me' }"> <!-- or: v-autofocus="'.focus-me'" -->
<!-- Focusable but will not receive focus -->
<textarea v-model="comment"></textarea>
<!-- Will receive focus -->
<input type="text" class="focus-me" v-model="text">
</div>
Auto-focusing on the input inside a Vue Material Datepicker:
<md-datepicker v-autofocus v-model="birthdate" :md-open-on-focus="false" />
Setting the focus on the first input of a Vue Material Dialog whenever the dialog is (re-)opened (a selector is required since the dialog container is focusable):
<md-dialog v-autofocus="{ selector: 'input', on: 'md-opened' }" :md-active="showDialog">
...
</md-dialog>
This will have no effect whatsoever:
<div v-autofocus>
<input type="hidden">
</div>
Software: MIT
Documentation: CC-BY-SA 4.0
FAQs
A smart Vue autofocus directive
The npm package @undecaf/vue-autofocus receives a total of 9 weekly downloads. As such, @undecaf/vue-autofocus popularity was classified as not popular.
We found that @undecaf/vue-autofocus demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.