# vue-ari

> [![CI](https://github.com/visualjerk/ari/workflows/CI/badge.svg)](https://github.com/visualjerk/ari/actions) [![Test Coverage](https://codecov.io/gh/visualjerk/ari/branch/master/graph/badge.svg)](https://codecov.io/gh/visualjerk/ari)

Latest version **0.0.0-alpha.14** (published 2022-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-ari
pnpm add vue-ari
yarn add vue-ari
bun add vue-ari
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0-alpha.14 |
| Published | 2022-03-24 |
| First published | 2020-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 860.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Author | Jörg Bayreuther |
| Maintainers | visualjerk |

## Links

- npm: https://www.npmjs.com/package/vue-ari
- Repository: https://github.com/visualjerk/ari
- Homepage: https://github.com/visualjerk/ari#readme
- Issues: https://github.com/visualjerk/ari/issues
- npm.io page: https://npm.io/package/vue-ari

## Dependencies (2)

- [@popperjs/core](https://npm.io/package/@popperjs/core.md) 2.11.2
- [body-scroll-lock](https://npm.io/package/body-scroll-lock.md) 3.0.3

## Recent versions

- 0.0.0-alpha.14 (latest) — 2022-03-24
- 0.0.0-alpha.13 — 2022-01-22
- 0.0.0-alpha.12 — 2022-01-22
- 0.0.0-alpha.11 — 2020-09-18
- 0.0.0-alpha.10 — 2020-08-22
- 0.0.0-alpha.8 — 2020-08-20
- 0.0.0-alpha.7 — 2020-08-19
- 0.0.0-alpha.6 — 2020-08-15
- 0.0.0-alpha.5 — 2020-08-09
- 0.0.0-alpha.4 — 2020-08-09
- 0.0.0-alpha.3 — 2020-08-09
- 0.0.0-alpha.2 — 2020-07-30
- 0.0.0-alpha.0 — 2020-07-29

## README

# Ari

[![CI](https://github.com/visualjerk/ari/workflows/CI/badge.svg)](https://github.com/visualjerk/ari/actions)
[![Test Coverage](https://codecov.io/gh/visualjerk/ari/branch/master/graph/badge.svg)](https://codecov.io/gh/visualjerk/ari)

Accessible unstyled Vue components inspired by Reakit.

Try it on [Codesandbox](https://codesandbox.io/s/ari-tailwind-playground-x3e47?file=/src/App.vue).

## Installation

```bash
npm i vue-ari
```

or

```bash
yarn add vue-ari
```

## Usage

```vue
<template>
  <PopoverDisclosure v-bind="popover">
    Open Popover
  </PopoverDisclosure>
  <Popover v-bind="popover">
    Popover Content
  </Popover>
</template>

<script>
import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'

export default {
  components: {
    Popover,
    PopoverDisclosure,
  },
  setup() {
    const popover = usePopoverState()
    return {
      popover,
    }
  },
}
</script>
```

## Styling

Ari components don't include styling by default. This gives you the ability to add styles however you like.

### Example Using Tailwind

```vue
<template>
  <PopoverDisclosure
    v-bind="popover"
    class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
  >
    Open Popover
  </PopoverDisclosure>
  <Popover
    v-bind="popover"
    class="rounded shadow-lg border border-solid border-gray-300 py-3 px-5 bg-white"
  >
    Popover Content
  </Popover>
</template>

<script>
import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'

export default {
  components: {
    Popover,
    PopoverDisclosure,
  },
  setup() {
    const popover = usePopoverState()
    return {
      popover,
    }
  },
}
</script>
```

## Reusable Components

It would get pretty verbose to add the same styling classes wherever you like to use a `Popover`. So the recommended way is wrapping Ari components inside your own base components and use them inside your app.

```vue
<template>
  <PopoverDisclosure
    v-bind="$props"
    class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
  >
    <slot />
  </PopoverDisclosure>
</template>

<script>
import { PopoverDisclosure, popoverDisclosureProps } from 'vue-ari'

export default {
  name: 'AppPopoverDisclosure',
  props: popoverDisclosureProps,
  components: {
    PopoverDisclosure,
  },
}
</script>
```

## Abstracting State

If you would rather not create a modal state each time, just create a provider component.

Provider component:

```vue
<template>
  <slot />
</template>

<script>
import { provide } from 'vue'
import { useModalState } from 'vue-ari'

export default {
  name: 'AppModalProvider',
  setup() {
    provide('modalState', useModalState())
  },
}
</script>
```

Base component for disclosure:

```vue
<template>
  <ModalDisclosure
    v-bind="modal"
    class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
  >
    <slot />
  </ModalDisclosure>
</template>

<script>
import { inject } from 'vue'
import { ModalDisclosure } from 'vue-ari'

export default {
  name: 'AppModalDisclosure',
  components: {
    ModalDisclosure,
  },
  setup() {
    const modal = inject('modalState')
    return {
      modal,
    }
  },
}
</script>
```

Base component for modal:

```vue
<template>
  <ModalBackdrop
    v-bind="modal"
    class="fixed inset-0 flex items-center justify-center bg-opacity-75 bg-black"
  >
    <Modal
      v-bind="{ ...modal, ...$attrs }"
      class="max-w-xs rounded shadow-lg border border-solid border-gray-300 py-3 px-5 bg-white"
    >
      <slot />
    </Modal>
  </ModalBackdrop>
</template>

<script>
import { inject } from 'vue'
import { Modal, ModalBackdrop } from 'vue-ari'

export default {
  name: 'AppModalDisclosure',
  components: {
    Modal,
    ModalBackdrop,
  },
  inheritAttrs: false,
  setup() {
    const modal = inject('modalState')
    return {
      modal,
    }
  },
}
</script>
```

Inside your app:

```vue
<template>
  <AppModalProvider>
    <AppModalDisclosure>
      Open Modal
    </AppModalDisclosure>
    <AppModal>
      Modal Content
    </AppModal>
  </AppModalProvider>
</template>

<script>
import { AppModalProvider, AppModal, AppModalDisclosure } from './components'

export default {
  components: {
    AppModalProvider,
    AppModal,
    AppModalDisclosure,
  },
}
</script>
```

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