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
- includes a Highlight.js directive for rendered code snippets
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.
v-hljs
Runs Highlight.js on the first code element inside the bound node.
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
Contributions
are welcome. Pull requests are great, but issues are good too.
Thank you to all the people who already contributed to Enso!