# vue-color-picker-wheel

> A Vue color picker component based on the Farbtastic jQuery Color Picker plug-in

Latest version **0.4.3** (published 2019-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-color-picker-wheel
pnpm add vue-color-picker-wheel
yarn add vue-color-picker-wheel
bun add vue-color-picker-wheel
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.3 |
| Published | 2019-02-13 |
| First published | 2018-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 102.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Jeroen Peerbolte |
| Maintainers | nino-vrijman, peerbolte, stijlbreukdev |
| Keywords | vue, vue.js, color picker, color, picker, component, farbtastic |

## Links

- npm: https://www.npmjs.com/package/vue-color-picker-wheel
- Repository: https://github.com/stijlbreuk/vue-color-picker-wheel
- Homepage: https://github.com/stijlbreuk/vue-color-picker-wheel#readme
- Issues: https://github.com/stijlbreuk/vue-color-picker-wheel/issues
- npm.io page: https://npm.io/package/vue-color-picker-wheel

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 0.4.3 (latest) — 2019-02-13
- 0.4.2 — 2019-01-16
- 0.4.1 — 2018-11-16
- 0.4.0 — 2018-11-15
- 0.3.0 — 2018-11-15
- 0.2.8 — 2018-11-06
- 0.2.7 — 2018-11-06
- 0.2.6 — 2018-10-31
- 0.2.4 — 2018-10-31

## README

# Vue Color Picker Wheel

<p align="center">
  <img src="https://raw.githubusercontent.com/stijlbreuk/vue-color-picker-wheel/master/examples/assets/vue-color-picker-wheel-example.png" alt="Example"/>
</p>

<p align="center">

<a href="https://www.npmjs.com/package/vue-color-picker-wheel">
    <img src="https://img.shields.io/npm/v/vue-color-picker-wheel.svg" alt="Version"/>
</a>
<a href="https://www.npmjs.com/package/vue-color-picker-wheel">
    <img src="https://img.shields.io/npm/dt/vue-color-picker-wheel.svg" alt="Downloads"/>
</a>
<a href="https://www.npmjs.com/package/vue-color-picker-wheel">
    <img src="https://img.shields.io/npm/l/vue-color-picker-wheel.svg" alt="License"/>
</a>

</p>

<p align="center">
A Vue color picker component based on the <a href="http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/">Farbtastic jQuery Color Picker plug-in</a>.
</p>

# Demo
## Basic
<a href="https://codepen.io/nino-vrijman/pen/ePaELe" target="_blank">Basic CodePen demo</a>

<a href="https://codesandbox.io/s/7j4po25ly1?module=%2Fsrc%2FApp.vue" target="_blank"><img src="https://codesandbox.io/static/img/play-codesandbox.svg"/></a>

# Installation

```
npm install --save vue-color-picker-wheel
```

# Usage

ES6 modules
```HTML
<template>
    <div id="app">
        <color-picker v-model="color"></color-picker>
        <p>
            Color:
            <input v-model="color" type="text">
        </p>
    </div>
</template>
<script>
    import ColorPicker from 'vue-color-picker-wheel';

    export default {
        name: 'App',
        components: {
            ColorPicker
        },
        created() {
        },
        data() {
            return {
                color: '#ffffff'
            };
        },
    };
</script>
```

CommonJS
```JavaScript
const ColorPicker = require('vue-color-picker-wheel');
```

In a script tag, this loads the component using the global Vue instance.

```HTML
<script src="https://unpkg.com/vue-color-picker-wheel"></script>
```

# Properties
| Property   | Description                                             | Type                    | Default | Example              |
| ---------- | ------------------------------------------------------- | ----------------------- | ------- | -------------------- |
| width      | The width of the color picker                           | Number                  | 300     | :width="400"         |
| height     | The height of the color picker                          | Number                  | 300     | :height="400"        |
| disabled   | Whether or not the color picker should be disabled      | Boolean                 | false   | :disabled="false"    |
| v-model    | v-model to create two-way data binding for color        | String (hex color code) | none    | v-model="color"      |
| startColor | The color that is selected when opening the colorpicker | String (hex color code) | none    | startColor="#ffffff" |

# Events
| Event        | Description                                   | Event parameters               |
| ------------ | --------------------------------------------- | ------------------------------ |
| color-change | Is fired after the selected color has changed | color: String (hex color code) |

# Contributing

Checkout [GitHub issues](https://github.com/stijlbreuk/vue-color-picker-wheel/issues) for any issues we need some help with.

```bash
# Serve with hot reload (default at localhost:8080)
vue serve --open src/color-picker.vue

# Build all variants
npm run build
```

# Changelog
[Changelog on Github](https://github.com/stijlbreuk/vue-color-picker-wheel/blob/master/CHANGELOG.md)

# License
[MIT](https://github.com/stijlbreuk/vue-color-picker-wheel/blob/master/LICENSE)

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