Directives

Directive for vue 3.

Installation

CDN

this package published as vbardoDirectives module in umd.

<script src="https://unpkg.com/@vbardo/directives@1.0.3"></script>

NPM

npm i @vbardo/directives

Usage

install all directives:

import { createApp } from "vue";
import App from "./App.vue";
import Directives from "@vbardo/directives";
createApp(App)
    .use(Directives)
    .mount("#app");

import and install any directive you need:

import { createApp } from "vue";
import App from "./App.vue";
import { VAutoFocus, VClear, VFocusClass, VSelect } from "@vbardo/directives";
createApp(App)
    .directive("focus", VAutoFocus)
    .directive("clear", VClear)
    .directive("focus-class", VFocusClass)
    .directive("select", VSelect)
    .mount("#app");

Auto Focus

Focus element on element mounted.

<form>
    <div>
        <label>First element:</label>
        <input type="text" />
    </div>
    <div>
        <label>Second element (auto focused):</label>
        <input type="text" v-focus />
    </div>
</form>

Clear By Escape Key

Clear input content completely or word by word when press Escape key. You can pass separator character as directive parameter for word by word clear functionality.

<input type="text" value="my value clear on press escape" v-clear />
<input type="text" value="my value clear word by word" v-clear="' '" />
<input type="text" value="my-value-clear-word-by-word" v-clear="'-'" />

Focus Class

Toggle class on element focus/blur. This directive can apply on container to fire on any element inside container got focus. You can pass class as directive parameter, by default this directive use has-focus class.

<form>
    <div v-focus-class>
        <label>First name:</label>
        <input type="text" />
        <label>Last name:</label>
        <input type="text" />
    </div>

    <input type="text" v-focus-class="'is-focused'" />
</form>

Select Input Content

Select input content on focus or by separator on click. You can pass separator character as directive parameter for select by separator.

<input type="text" value="this content auto selected on focus" v-select />
<!-- Select date part on click -->
<input type="text" value="2020/01/03" v-select="'/'" />