# preview-box

> ![Downloads](https://img.shields.io/npm/dw/preview-box) ![Latest Version](https://img.shields.io/npm/v/preview-box)

Latest version **0.2.4** (published 2020-12-16) · 0 weekly downloads

## Install

```sh
npm install preview-box
pnpm add preview-box
yarn add preview-box
bun add preview-box
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2020-12-16 |
| First published | 2019-10-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 390.1 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | lukesnowden |

## Links

- npm: https://www.npmjs.com/package/preview-box
- Repository: https://github.com/Twoheads-Digital/preview-box
- Homepage: https://github.com/Twoheads-Digital/preview-box#readme
- Issues: https://github.com/Twoheads-Digital/preview-box/issues
- npm.io page: https://npm.io/package/preview-box

## Dependencies (11)

- [vue](https://npm.io/package/vue.md) ^2.6.12
- [sass](https://npm.io/package/sass.md) ^1.30.0
- [core-js](https://npm.io/package/core-js.md) ^3.8.1
- [prismjs](https://npm.io/package/prismjs.md) ^1.22.0
- [clipboard](https://npm.io/package/clipboard.md) ^2.0.6
- [cross-env](https://npm.io/package/cross-env.md) ^6.0.3
- [node-sass](https://npm.io/package/node-sass.md) ^4.14.1
- [balloon-css](https://npm.io/package/balloon-css.md) ^1.2.0
- [laravel-mix](https://npm.io/package/laravel-mix.md) ^5.0.9
- [sass-loader](https://npm.io/package/sass-loader.md) ^8.0.2
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^1.9.6

## Recent versions

- 0.2.4 (latest) — 2020-12-16
- 0.2.3 — 2020-12-15
- 0.2.2 — 2020-02-20
- 0.2.1 — 2020-02-15
- 0.2.0 — 2020-02-15
- 0.1.5 — 2019-12-10
- 0.1.4 — 2019-11-06
- 0.1.3 — 2019-11-06
- 0.1.2 — 2019-11-05
- 0.1.1 — 2019-10-31
- 0.1.0 — 2019-10-30

## README

# Preview Box 

![Downloads](https://img.shields.io/npm/dw/preview-box)
![Latest Version](https://img.shields.io/npm/v/preview-box)

![Screenshot](./screenshot.png)

Preview box is a re-creation of [Adam Wathan's](https://twitter.com/adamwathan) and [Steve Schoger's](https://twitter.com/steveschoger) previewer which has recently been used on their upcoming project, [Tailwind UI](https://www.tailwindui.com/).
We have also added an extra tab for setup and a full screen mode.

## Usage

```
npm i preview-box
```

In your js file add the component to your vue instance;

```javascript
import PreviewBox from 'preview-box/src/components/PreviewBoxComponent';
window.Vue = require('vue');

if(document.getElementById('example')) {
    new Vue({
        components: {
            'preview-box': PreviewBox
        },
        el: '#example',
    });
}
```

In you HTML or template use the following setup;

```html
<div id="example">
    <!-- Other properties are :title and :language -->
    <preview-box
        :min-screen-size="380"
        :snap-to-width="true"
        :show-guides="true"
        :iframe-src="'/card.html'"
    >
        <template v-slot:setup>
            <div>Some setup text</div>
        </template>
        <template v-slot:copy-setup>
            &lt;!-- When on the setup screen, click the copy button and this data will be copied to the clipboard --&gt;
        </template>
        <template v-slot:code-snippet>
            <!-- must be wrapped in the div with the v-pre attribute -->
            <div v-pre>&lt;div&gt;This code is to be in a raw entity format for syntax highlighting&lt;/div&gt;</div>
        </template>
        <template v-slot:copy-code-snippet>
            <!-- must be wrapped in the div with the v-pre attribute -->
            <div v-pre>&lt;div&gt;When on the any other screen, click the copy button and this data will be copied to the clipboard &lt;/div&gt;</div>
        </template>
    </preview-box>
</div>
```

## Extra Features

- [x] Full screen mode
- [x] Setup tab
- [x] Display screen width in pixels
- [x] Snap guides to preset widths with visual markers
- [x] Use arrow keys to fine tune width

If you have released the handle and not clicked on any other elements you can now use the arrow keys to shift the width a pixel either way.


## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

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