@vbardo/focus-wrapper v1.0.2

Focus Wrapper

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

Installation

CDN

this package published as vbardoFocusWrapper module in umd.

<script src="https://unpkg.com/@vbardo/focus-wrapper"></script>

NPM

npm i @vbardo/focus-wrapper

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

import { createApp } from "vue";
import App from "./App.vue";
import FocusWrapper from "@vbardo/focus-wrapper";
createApp(App)
    .use(FocusWrapper)
    .mount("#app");

import and install component with custom name:

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

Usage

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

Properties

Events