vue-inner-focus

vue-in-out

A vue directive factory and directives to simplify in/out state changes such as mousein/mouseout, focusin/focusout, etc.

Installation

npm install vue-in-out

Browser/polyfill requirements

• classList API
• Object destructuring
• Arrow functions
• Template strings

Note: In short, you may want to transpile es6 and polyfill the classList API if you are supporting older browsers, or Safari.

Directives

Some simple directives to simplify user interaction state management. These are essentially a shorthand for adding multiple bindings that are commonly used together.

vue-inner-focus

Tracks focusin/focusout. On focusin adds the focused class to the element with the directive. On focusout, removes it. Can take a callback event which is called with either true (focusin), or false (focusout).

import innerFocus from 'vue-in-out/src/inner-focus';

export myComponent = {
    directives: {
        'inner-focus': innerFocus,
    },
    template: `
        <div class="testDiv" v-inner-focus>
            <button class="testButton"></button>
        </div>`
};

Focusout Timeout

To accomodate some browser quirks and to ensure that the outEvent timeout has a chance to be cleared by inEvents there is a 50ms delay before the outEvennt fires. If this does not suit your needs, please see the directive factory below.

Customization

This simply allows a focused class to be added or removed. Custom classes and callbacks are supported:

import innerFocus from 'vue-in-out/src/inner-focus';

export myComponent = {
    directives: {
        'inner-focus': innerFocus,
    },
    template: `
        <div class="testDiv" v-inner-focus:customClass="onFocusChange">
            <button class="testButton"></button>
        </div>`,
    methods: {
        onFocusChange(isFocused) {
            console.log('This is focused', isFocused);
        }
    },
};

vue-hovered

import innerFocus from 'vue-in-out/hovered';

Default class is hovered. Otherwise, behaves identically to the inner-focus directive.

Directive Factory

This allows easy creation of directives similar to those above. For example, the inner-focus directive is simply:

import { inOutDirectiveFactory } from 'vue-in-out/src/in-out-factory';

export const DEFAULT_CLASS = 'focused';

export default inOutDirectiveFactory({
    inEvent: 'focusin',
    outEvent: 'focusout',
    activeClass: DEFAULT_CLASS,
});

Options

Key	Default	Description
inEvent	None	The event such as focusin to start with
outEvent	None	The event such as focusout to end with
activeClass	None	The class to attach when in the in state
defaultCallback	() => {}	A callback that will be called with true when moving to the in state and false when moving to the out state. This will typically be overridden in the view with callback bound to the Vue instance (eg onFocusChange above).
outTimeout	50	The time to wait between receiving the out event and actually triggering the callback and removing the active class.