@ubuilder/directives/README.md

UBuilder Directives

# UBuilder Directives
UBuilder Directives requires vue 3.2+ or 2.7+.

* vAutofocus: FunctionDirective<HTMLElement, void>
* vFocusTrap: ObjectDirective<HTMLElement, void>

## vAutofocus
Focusing element onMounted. Replaces HTML autofocus attribute.

## vFocusTrap
Trap focus inside directed elements.
Collect focusable element on mount. Recommend use inside v-if block.

## Usage

### Installation
```
npm i @ubuilder/directives
```

### Component
On setup.
```vue
<script lang="ts" setup>
import { ref } from 'vue';
import { vAutofocus, vFocusTrap } from '@ubuilder/directives';

const visible = ref(false);
</script>

<template>
 <div v-focus-trap v-if="visible">
   <!-- focusable elements ... -->
   <input v-autofocus>
 </div>
</template>
```

On options.
```vue
<script>
import { vAutofocus, vFocusTrap } from '@ubuilder/directives';
export default {
  directives: {
    autofocus: vAutofocus,
    focusTrap: vFocusTrap,
  },
};
</script>
```

### Plugin
UBuilder Directives' default export is vue plugin, but not recommend direct import to tree-shaking feature.
```javascript
import { createApp } from 'vue';
import UBuilderDirectives from '@ubuilder/directives';

const app = createApp(/* app options */);
app.use(UBuilderDirectives);
```