Package Exports
- @oysterlee/vue-color-picker
- @oysterlee/vue-color-picker/style.css
- @oysterlee/vue-color-picker/utils
Readme
@oysterlee/vue-color-picker
A lightweight color picker component for Vue 3 apps. Inspired by react-colorful
Features
- One dependency
Installation
pnpm i @oysterlee/vue-color-picker
# or
npm i @oysterlee/vue-color-picker
# or
yarn add @oysterlee/vue-color-pickerHow to use
// main.js
import { createApp } from "vue";
import ColorPicker from "@oysterlee/vue-color-picker";
import App from "./App.vue";
createApp(App).use(ColorPicker).mount("#app");
// component.vue
<VColorPicker v-model="rgb" v-model:alpha="alpha" mode="rgb" />Type
type RGB = { r: number; g: number; b: number };
type RGBA = RGB & { a: number };
type HSV = { h: number; s: number; v: number };
type HSVA = HSV & { a: number };
type HSL = { h: number; s: number; l: number };
type HSLA = HSL & { a: number };
type Interaction = {
top: number;
left: number;
};
type Color = RGB | HSV | HSL | string;
type AvailableColorType = "rgb" | "hex" | "hsl" | "hsv";
type Props = {
mode: AvailableColorType;
modelValue: Color;
alpha: number;
}