Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anish2690/vue-color-kit
🎨 Lightweight color picker for Vue 3
https://github.com/anish2690/vue-color-kit
color-picker vue vue-color vue-color-picker
Last synced: 3 months ago
JSON representation
🎨 Lightweight color picker for Vue 3
- Host: GitHub
- URL: https://github.com/anish2690/vue-color-kit
- Owner: anish2690
- License: mit
- Created: 2021-01-08T11:51:47.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-22T05:54:53.000Z (12 months ago)
- Last Synced: 2024-02-16T23:21:51.252Z (4 months ago)
- Topics: color-picker, vue, vue-color, vue-color-picker
- Language: Vue
- Homepage: https://vue-color-kit.vercel.app
- Size: 2.25 MB
- Stars: 199
- Watchers: 1
- Forks: 29
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Lists
- awesome-vue-3 - vue-color-kit - 🎨 A Vue 3 color picker component. lightweight, modern, and no dependence. (Packages)
- awesome-stars - vue-color-kit
README
# vue-color-kit
## [LiveDemo](https://vue-color-kit.vercel.app)
## Install
```bash
$ yarn add vue-color-kit
```
## Example
```html
import { ColorPicker } from 'vue-color-kit'
import 'vue-color-kit/dist/vue-color-kit.css'
export default {
components: {
ColorPicker,
},
data() {
return {
color: '#59c7f9',
suckerCanvas: null,
suckerArea: [],
isSucking: false,
}
},
methods: {
changeColor(color) {
const { r, g, b, a } = color.rgba
this.color = `rgba(${r}, ${g}, ${b}, ${a})`
},
openSucker(isOpen) {
if (isOpen) {
// ... canvas be created
// this.suckerCanvas = canvas
// this.suckerArea = [x1, y1, x2, y2]
} else {
// this.suckerCanvas && this.suckerCanvas.remove
}
},
inputFocus(event: FocusEvent) {
// this will get triggered on input field (hex and rgba) get focus
// prop value will be FocusEvent object associated with the input
},
inputBlur(event: FocusEvent) {
// this will get triggeredon input field (hex and rgba) get out of focus (blur event)
// prop value will be FocusEvent object associated with the input
},
},
}
```
## Options
| Name | Type | Default | Description |
| ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| theme | String | `dark` | `dark` or `light` |
| color | String | `#000000` | `rgba` or `hex` |
| colors-default | Array | `['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)']` | like `['#ff00ff', '#0f0f0f', ...]` |
| colors-history-key | String | `vue-color-kit-history` |
| sucker-hide | Boolean | `true` | `true` or `false` |
| sucker-canvas | HTMLCanvasElement | `null` | like `document.createElement('canvas')` |
| sucker-area | Array | `[]` | like `[x1, y1, x2, y2]` |
> `color` is one-way data flow, so you can't use `v-model`. why? because you'll listen `changeColor` event do more things, so i think it's not necessary here.
## Events
| Name | Type | Args | Description |
| ----------- | -------- | ------ | ------------------------------- |
| changeColor | Function | color | `{ rgba: {}, hsv: {}, hex: ''}` |
| openSucker | Function | isOpen | `true` or `false` |
| inputFocus | Function | Event | `FocusEvent` Object |
| inputBlur | Function | Event | `FocusEvent` Object |
> if you want use sucker, then `openSucker`, `sucker-hide`, `sucker-canvas`, `sucker-area` is necessary. when you click sucker button, you can click it again or press key of `esc` to exit.