Directives

Description

Vue directives used across Enso UI packages.

Installation

yarn add @enso-ui/directives

Features

• exports reusable DOM and interaction directives consumed across Enso UI packages
• supports focus, click-outside, select-on-focus, resize, long-click, and scroll-into-view flows
• stays dependency-light and does not pull syntax highlighters or other large optional libraries

Usage

Register the directives you need locally:

import { clickOutside, scrollIntoView } from '@enso-ui/directives';

export default {
    directives: { clickOutside, scrollIntoView },
};

Or register them globally:

import * as directives from '@enso-ui/directives';

Object.entries(directives).forEach(([name, directive]) => {
    app.directive(name, directive);
});

API

v-click-outside

Calls a handler when the click target is outside the bound element.

v-fits-below

Computes whether an element fully fits in the current viewport and passes the result to a callback.

v-focus

Focuses the element after the current tick.

Accepts an optional boolean value. Omitting the value behaves like true; passing false skips focusing.

v-long-click

Runs a handler only after the pointer stays pressed for the configured duration in milliseconds.

v-resize

Auto-resizes an input to its content width. An optional numeric argument sets the minimum width in pixels.

v-scroll-into-view

Calls Element.scrollIntoView() when scroll transitions to true.

v-select-on-focus

Selects the current value when the element receives focus.

Depends On

• Vue 3

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

MIT