# wovue-focus-trap

> A Vue component that traps focus

Latest version **1.0.0** (published 2016-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install wovue-focus-trap
pnpm add wovue-focus-trap
yarn add wovue-focus-trap
bun add wovue-focus-trap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-09-20 |
| First published | 2016-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | wochap |
| Maintainers | wochap |
| Keywords | vue, component |

## Links

- npm: https://www.npmjs.com/package/wovue-focus-trap
- Repository: https://github.com/wovue/focus-trap
- Homepage: https://wovue.github.io/focus-trap
- Issues: https://github.com/wovue/focus-trap/issues
- npm.io page: https://npm.io/package/wovue-focus-trap

## Dependencies (1)

- [focus-trap](https://npm.io/package/focus-trap.md) ^2.0.1

## Recent versions

- 1.0.0 (latest) — 2016-09-20
- 2.0.0 (next) — 2017-05-28
- 1.0.1 — 2017-05-28

## README

# FocusTrap

> A Vue component that traps focus

This component is a light wrapper around [focus-trap](https://github.com/davidtheclark/focus-trap), tailored to your Vue-specific needs.

## Live examples & Docs

[https://wovue.github.io/focus-trap](https://wovue.github.io/focus-trap)

## Features

* The focus trap automatically activates on ready hook (by default, though this can be changed).
* The focus trap automatically deactivates on destroyed hook.
* The focus trap can be activated and deactivated, paused and unpaused via props.

## Getting Started

Please read [the focus-trap documentation](https://github.com/davidtheclark/focus-trap#focus-trap) to understand what a focus trap is, what happens when a focus trap is activated, and what happens when one is deactivated.

Install the package using npm

```sh
$ npm install wovue-focus-trap --save
```

Install the plugin

```js
import Vue from 'vue'
import FocusTrap from 'wovue-focus-trap'

Vue.use(FocusTrap)
```

## Basic Usage

```html
<button @click="mountTrap">mount trap</button>
<wv-focus-trap v-if="isTrapVisible" :active="isTrapActive">
  <p>Here is a focus trap <a href='#!'>with</a> <a href='#!'>some</a> <a href='#!'>focusable</a> parts.</p>
  <button @click="toggleTrap">toggle trap</button>
</wv-focus-trap>
```

```js
export default {
  data () {
    return {
      isTrapVisible: false,
      isTrapActive: true
    }
  },
  methods: {
    mountTrap () {
      this.isTrapVisible = true
    },
    toggleTrap () {
      this.isTrapActive = !this.isTrapActive
    }
  }
}
```

## Development

``` bash
# install dependencies
npm install

# serve with hot reload src-docs at localhost:8080
npm run dev

# build for production with minification src-docs and src
npm run build

# copy docs folder to gh-pages branch and push
npm run deploy-docs
```

---
_Source: https://npm.io/package/wovue-focus-trap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._