# @envis/vcolor-picker

> Vue 3 + Vite color picker. Simple and gradient color picker.

Latest version **1.5.0** (published 2023-07-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @envis/vcolor-picker
pnpm add @envis/vcolor-picker
yarn add @envis/vcolor-picker
bun add @envis/vcolor-picker
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2023-07-31 |
| First published | 2022-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 190.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Denis Ostrovsky |
| Maintainers | envis |
| Keywords | Vue 3, Vite, TailwindCSS, Color picker, Gradient color picker, Composition API |

## Links

- npm: https://www.npmjs.com/package/@envis/vcolor-picker
- Repository: https://github.com/DenisOstr/vcolor-picker
- Homepage: https://github.com/DenisOstr/vcolor-picker#readme
- Issues: https://github.com/DenisOstr/vcolor-picker/issues
- npm.io page: https://npm.io/package/@envis/vcolor-picker

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.37
- [html-to-image](https://npm.io/package/html-to-image.md) ^1.11.11

## 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.5.0 (latest) — 2023-07-31
- 1.4.1 — 2023-02-08
- 1.4.0 — 2022-12-13
- 1.3.1 — 2022-10-07
- 1.3.0 — 2022-09-14
- 1.2.7 — 2022-09-14
- 1.2.6 — 2022-09-06
- 1.2.5 — 2022-09-06
- 1.2.4 — 2022-09-06
- 1.2.3 — 2022-09-06
- 1.2.2 — 2022-09-06
- 1.2.1 — 2022-09-06
- 1.2.0 — 2022-09-06
- 1.1.1 — 2022-08-30
- 1.1.0 — 2022-08-30
- … 2 more at https://npm.io/package/@envis/vcolor-picker/versions

## README

# VColor Picker

This component is based on the Vue Color Gradient Picker: https://github.com/arthay/vue-color-gradient-picker

Component made using

- Vue 3 + Vite
- Composition API
- TailwindCSS

## Table of Contents
 
- [Installation](https://github.com/DenisOstr/vcolor-picker#installation)
- [Properties](https://github.com/DenisOstr/vcolor-picker#properties)
- [Examples](https://github.com/DenisOstr/vcolor-picker#examples)
- [Demo](https://github.com/DenisOstr/vcolor-picker#demo)

## Installation

To install, you can use [npm](https://npmjs.org):

```
npm install @envis/vcolor-picker
```

## Properties

### Props

| Name               | Type        | Default                                                                           | Description                             |
| -----------        | ----------- | --------------------------------------------------------------------------------- | --------------------------------------- |
| isCanvas           | Boolean     |                                                                                   | property to check canvas or html area
| container          | String      |                                                                                   | container id of html area (for taking screenshot)
| canvas             | Object      | `{}`                                                                              | html5 canvas object (`canvas` ref)
| color              | Object      | `{ red: 255, green: 0, blue: 0, alpha: 1, hue: 0, saturation: 100, value: 100 }`  | object of rgb and hsv values
| isGradient         | Boolean     | `false`                                                                           | property renders a gradient color picker
| gradient           | Object      | `{ type: 'linear', degree: 0, points: [{ left: 0, red: 0, green: 0, blue: 0, alpha: 1 }, { left: 100, red: 255, green: 0, blue: 0, alpha: 1 }] }`                                                                                                | object of colors for gradient
| presetEnabled      | Boolean     | `true`                                                                            | property enable preset colors
| historyEnabled     | Boolean     | `true`                                                                            | property enable history
| multipleLayers     | Boolean     | `false`                                                                           | property to check canvas layering (`FabricJS`)
| eyeDropperEnabled  | Boolean     | `true`                                                                            | property enable eye dropper
| onChange           | Function    | `() => {}`                                                                        | `(color) => onChange(color, 'change')`
| onStartChange      | Function    | `() => {}`                                                                        | `(color) => onChange(color, 'start')`
| onEndChange        | Function    | `() => {}`                                                                        | `(color) => onChange(color, 'end')`

### Emits

| Name               | Type        | Description                                                           |
| -----------        | ----------- | --------------------------------------------------------------------- |
| eyeDropperEvent    | Boolean     | return `true` or `false` value when eye dropper enabled or disabled

## Examples

Here is a simple examples of vcolor-picker being used in an app:

### Options API

#### Simple color picker

```vue
<template>
  <div id="app">
    <VColorPicker
      :color="color"
      :canvas="canvas"
      :presetEnabled="true"
      :historyEnabled="true"
      :eyeDropperEnabled="true"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />

    <canvas id="canv" width="600" height="400" class="absolute right-4 top-4 bg-gray-200 rounded-md" ref="canvas"></canvas>
  </div>
</template>

<script>
import { VColorPicker } from '@envis/vcolor-picker'
import '@envis/vcolor-picker/dist/style.css'

export default {
  name: 'App',

  components: {
    VColorPicker
  },

  data()  {
    return {
      color: {
        red: 255,
        green: 0,
        blue: 0,
        alpha: 1
      },

      canvas: this.$ref.canvas
    }
  },   

  methods: {
    onChange(attrs, name) {
      this.color = { ...attrs }
    }
  }
}
</script>
```

#### Gradient color picker

```vue
<template>
  <div id="app">
    <VColorPicker
      :canvas="canvas"
      :gradient="gradient"
      :isGradient="true"
      :presetEnabled="true"
      :historyEnabled="true"
      :eyeDropperEnabled="true"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />

    <canvas id="canv" width="600" height="400" class="absolute right-4 top-4 bg-gray-200 rounded-md" ref="canvas"></canvas>
  </div>
</template>

<script>
import { VColorPicker } from '@envis/vcolor-picker'
import '@envis/vcolor-picker/dist/style.css'

export default {
  name: 'App',

  components: {
    VColorPicker
  },

  data()  {
    return {
      gradient: {
        type: 'linear',
        degree: 0,
        points: [
          {
            left: 0,
            red: 0,
            green: 0,
            blue: 0,
            alpha: 1
          },
          {
            left: 100,
            red: 255,
            green: 0,
            blue: 0,
            alpha: 1
          }
        ]      
      },
      canvas: this.$refs.canvas
    }
  },   

  methods: {
    onChange(attrs, name) {
      console.log(name)
    }
  }
}
</script>
```

#### Color picker with HTML area instead canvas

```vue
<template>
  <div id="app">
    <VColorPicker
      :color="color"
      :isCanvas="false"
      container="artboard"
      :presetEnabled="true"
      :historyEnabled="true"
      :eyeDropperEnabled="true"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />

    <div id="artboard" class="absolute right-5 top-5">
        <div class="relative bg-gray-200 w-[600px] h-[400px] rounded-md">
            <div class="absolute top-10 left-10 bg-green-400 w-32 h-32"></div>
            <div class="absolute bottom-10 right-10 bg-violet-600 w-32 h-32 rounded-full"></div>
        </div>
    </div>
  </div>
</template>

<script>
import { VColorPicker } from '@envis/vcolor-picker'
import '@envis/vcolor-picker/dist/style.css'

export default {
  name: 'App',

  components: {
    VColorPicker
  },

  data()  {
    return {
      color: {
        red: 255,
        green: 0,
        blue: 0,
        alpha: 1
      },
    }
  },   

  methods: {
    onChange(attrs, name) {
      this.color = { ...attrs }
    }
  }
}
</script>
```

### Composition API

#### Simple color picker

```vue
<template>
  <div id="app">
    <VColorPicker
      :canvas="canvas"
      :color="color"
      :presetEnabled="true"
      :historyEnabled="true"
      :eyeDropperEnabled="true"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />

    <canvas id="canv" width="600" height="400" class="absolute right-4 top-4 bg-gray-200 rounded-md" ref="canvas"></canvas>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VColorPicker } from '@envis/vcolor-picker'
import '@envis/vcolor-picker/dist/style.css'

name: 'App',

const color = ref({ red: 255, green: 0, blue: 0, alpha: 1 })
const canvas = ref({})

const onChange = (attrs, name) => {
  color.value = { ...attrs }
}
</script>
```

#### Gradient color picker

```vue
<template>
  <div id="app">
    <VColorPicker
      :canvas="canvas"
      :gradient="gradient"
      :isGradient="true"
      :presetEnabled="true"
      :historyEnabled="true"
      :eyeDropperEnabled="true"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />

    <canvas id="canv" width="600" height="400" class="absolute right-4 top-4 bg-gray-200 rounded-md" ref="canvas"></canvas>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VColorPicker } from '@envis/vcolor-picker'
import '@envis/vcolor-picker/dist/style.css'

name: 'App',

const gradient = ref({
  type: 'linear',
  degree: 0,
  points: [
    {
      left: 0,
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    },
    {
      left: 100,
      red: 255,
      green: 0,
      blue: 0,
      alpha: 1
    }
  ]      
})
const canvas = ref({})

const onChange = (attrs, name) => {
  console.log(name)
}
</script>
```

#### Color picker with HTML area instead canvas

```vue
<template>
  <div id="app">
    <VColorPicker
      :isCanvas="false"
      container="artboard"
      :color="color"
      :presetEnabled="true"
      :historyEnabled="true"
      :eyeDropperEnabled="true"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />

    <div id="artboard" class="absolute right-5 top-5">
        <div class="relative bg-gray-200 w-[600px] h-[400px] rounded-md">
            <div class="absolute top-10 left-10 bg-green-400 w-32 h-32"></div>
            <div class="absolute bottom-10 right-10 bg-violet-600 w-32 h-32 rounded-full"></div>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VColorPicker } from '@envis/vcolor-picker'
import '@envis/vcolor-picker/dist/style.css'

name: 'App',

const color = ref({ red: 255, green: 0, blue: 0, alpha: 1 })

const onChange = (attrs, name) => {
  color.value = { ...attrs }
}
</script>
```

## Demo

[VColor Picker demo link](https://vcolor-picker-demo.onrender.com)

## Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

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