@bardoui/vfocusdetect v1.0.1

Focus Detect

Detect if any element inside container got focus (CSS :focus-within like functionality)

Installation

CDN

this package published as vFocusDetect module in umd.

<script src="https://unpkg.com/@bardoui/vfocusdetect"></script>

NPM

npm i @bardoui/vfocusdetect

import and install with default name (focus-detect):

import { createApp } from "vue";
import App from "./App.vue";
import vFocusDetect from "@bardoui/vfocusdetect";
createApp(App)
  .use(vFocusDetect)
  .mount("#app");

import and install component with custom name:

import { createApp } from "vue";
import App from "./App.vue";
import { FocusDetect } from "@bardoui/vfocusdetect";
createApp(App)
  .component("focus-within", FocusDetect) // now you can use as <focus-within> tag
  .mount("#app");

Usage

<template>
  <focus-detect
    tag="p"
    cls="focused"
    @focusin="handleFocus"
    @focusout="handleBlur"
  >
    <label>First name:</label>
    <input type="text" />
    <label>Last name:</label>
    <input type="text" />
  </focus-detect>
</template>

Properties

Events