# tv-modal

> programmatic modals for nuxtjs powered by tailwindcss

Latest version **1.0.25** (published 2022-03-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install tv-modal
pnpm add tv-modal
yarn add tv-modal
bun add tv-modal
```

## 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.25 |
| Published | 2022-03-16 |
| First published | 2020-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 177.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | kevin olson |
| Maintainers | acidjazz |
| Keywords | vue, vuejs, tailwindcss, modal |

## Links

- npm: https://www.npmjs.com/package/tv-modal
- Repository: https://github.com/acidjazz/tv-modal
- Homepage: https://github.com/acidjazz/tv-modal#readme
- Issues: https://github.com/acidjazz/tv-modal/issues
- npm.io page: https://npm.io/package/tv-modal

## Dependencies (2)

- [tv-icon](https://npm.io/package/tv-icon.md) ^1.0.1
- [tv-button](https://npm.io/package/tv-button.md) ^1.0.7

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.25 (latest) — 2022-03-16
- 1.0.24 — 2021-06-17
- 1.0.23 — 2021-06-16
- 1.0.22 — 2021-04-23
- 1.0.21 — 2021-04-13
- 1.0.20 — 2021-02-03
- 1.0.19 — 2021-02-03
- 1.0.18 — 2021-02-03
- 1.0.17 — 2021-02-03
- 1.0.16 — 2021-02-03
- 1.0.15 — 2021-02-03
- 1.0.14 — 2021-02-03
- 1.0.13 — 2021-01-13
- 1.0.12 — 2020-10-28
- 1.0.11 — 2020-10-27
- … 10 more at https://npm.io/package/tv-modal/versions

## README

<p align="center">
  <img src="media/modal.gif" width="600" />
</p>

[![](https://img.shields.io/npm/v/tv-modal.svg?logo=npm&style=flat-square)](https://www.npmjs.com/package/tv-modal)
[![](https://img.shields.io/badge/nuxt.js-module-04C690.svg?style=flat-square)](https://nuxtjs.org)
![Test Javascript](https://github.com/acidjazz/tv-modal/workflows/Test%20Javascript/badge.svg)
[![](https://img.shields.io/npm/dt/tv-modal.svg?style=flat-square)](https://www.npmjs.com/package/tv-modal)
[![](https://img.shields.io/github/license/acidjazz/tv-modal?style=flat-square)](https://www.npmjs.com/package-tv-modal)
<!-- [![](https://img.shields.io/badge/chat-on%20discord-7289DA.svg?logo=discord&style=flat-square)](https://discord.gg/enn4S6) -->

> This requires [Nuxt.js](https://nuxtjs.org) with the [Tailwind CSS](https://tailwindcss.nuxtjs.org) module

## Quick Setup
1. Add the `nuxt-tailvue` dependency to your Nuxt.js project
```bash
npm install nuxt-tailvue
# OR
yarn add nuxt-tailvue
```

2. Add `nuxt-tailvue` to the `modules` section of `nuxt.config.js`
```js
{
  modules: [
    ['nuxt-tailvue', {modal: true}],
  ]
}
```

3. If you're using [Purge](https://tailwindcss.com/docs/controlling-file-size), add this module to the content section of `tailwind.config.js`

```js
module.exports = {
    content: [
      'node_modules/tv-*/dist/tv-*.umd.min.js'
    ] 
  }
```

To use with Nuxt Windi CSS, add this module to your `windi.config.js`
```js
import { defineConfig } from  'windicss/helpers'
	export  default  defineConfig({
	extract: {
		include: ['node_modules/tv-*/dist/tv-*.umd.min.js'],
	},
})
```

## Usage

- Actions are buttons from [tv-button](https://github.com/acidjazz/tv-button)
- Combining toasts from [tv-toast](https://github.com/acidjazz/tv-toast)

```js
 this.$modal.show({
    type: 'danger',
    title: 'This is the title property',
    body: 'This is the body property.  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam laudantium explicabo pariatur iste dolorem animi vitae error totam.',
    primary: {
      label: 'Primary Action',
      theme: 'red',
      action: () => this.$toast.success('Primary Button clicked'),
    },
    secondary: {
      label: 'Secondary Button',
      theme: 'white',
      action: () => this.$toast.info('Clicked Secondary'),
    },
  })
```

<p align="center">
  <img src="media/example1.gif" width="800" />
</p>


## Options

### `type` __String__
 - Optional, Default: info
 - Acceptable: success, info, danger, warning
### `title` __String__
 - Optional, Default: false
### `body` __String__
 - Required
### `primary` __Object__
 - Optional, Default: false
 - Example: { label: 'Button Face', theme: 'indigo-light', action: () => console.log('clicked') }
### `secondary` __Object__
 - Optional, Default: false
 - Example: { label: 'Button Face', theme: 'indigo-light', action: () => console.log('clicked') }

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