color-gradient-picker-vue3
Version:
A modern color and gradient picker component for Vue 3 with TypeScript support
156 lines (139 loc) • 3.83 kB
TypeScript
/*
* @Author: June
* @Description: 颜色选择器组件类型声明文件
* @Date: 2023-04-11 12:35:04
* @LastEditors: June
* @LastEditTime: 2024-12-10 13:30:30
*/
declare module 'color-gradient-picker-vue3' {
import { DefineComponent } from 'vue'
// 主组件类型
export const ColorPicker: DefineComponent<
{
value?: string
width?: number
hideInputs?: boolean
hideOpacity?: boolean
hideGradient?: boolean
presetColors?: string[]
hidePresets?: boolean
showAdvancedSliders?: boolean
inputType?: 'HSL' | 'RGB' | 'HSV' | 'CMYK'
},
{},
any
>
// 类型定义
export interface ColorPickerProps {
width: number
height?: number
gradientColorsIdx?: number
degrees?: number
degreesStr?: string
gradientColor?: string
value?: string
hideGradient?: boolean
showAdvancedSliders?: boolean
hideInputs?: boolean
hideOpacity?: boolean
hc?: IColorValue
isGradient?: boolean
inputType?: InputType
onChange?: (color: IColor) => void
mode?: IMode
gradientColors?: GradientProps[]
presetColors?: string[]
hidePresets?: boolean
}
export interface GradientProps {
value: string
index?: number
left?: number
}
export interface IColorValue {
r: number
g: number
b: number
a: number
h: number
s: number
v: number
}
export interface IColor {
mode?: IMode
color?: string
angle?: number
degrees?: number
colors?: { color: string; offset: number }[]
gradientType?: string
gradientColors?: { color: string; left: number }[]
[key: string]: any
}
export interface IProvide extends ColorPickerProps {
value: string
width: number
height: number
hc: IColorValue
}
export interface IColorPicker {
setValue: (color?: string) => void
setMode: (mode: IMode) => void
updateSelectColor: (value: string) => void
handleGradient: (newColor: string, left?: number) => void
changeColor: (newColor: string) => void
setHcH: (h: number) => void
setInputType: (type: InputType) => void
setLinear: () => void
setRadial: () => void
setDegrees: (val: number) => void
setSelectColorIdx: (idx: number) => void
addPoint: (left: number) => void
deletePoint: (index?: number) => void
}
export type IMode = 'solid' | 'gradient'
// 枚举
export enum InputType {
hsl = 'HSL',
rgb = 'RGB',
hsv = 'HSV',
cmyk = 'CMYK',
}
export enum GradientType {
linear = 'linear',
radial = 'radial',
}
export enum Modes {
solid = 'solid',
gradient = 'gradient',
}
export enum EventType {
change = 'change',
update = 'update:value',
}
export const DEFAULT_VALUES: {
DEFAULT_COLOR: string
DEFAULT_WIDTH: number
DEFAULT_DEGREES: number
MAX_PRESET_COLORS: number
MIN_GRADIENT_POINTS: number
}
// 工具函数
export function createGradientStr(
newColors: GradientProps[],
gradientType: GradientType,
colorState: ColorPickerProps,
): string
export function isValidColor(color: string): boolean
export function formatColor(color: string): string
export function getColorContrast(color: string): number
export function getColors(value: string): GradientProps[]
export function formatInputValues(
value: number,
min: number,
max: number,
): number
export function round(val: number): number
export function clamp(value: number, min: number, max: number): number
export function percentToDecimal(percent: number): number
export function decimalToPercent(decimal: number): number
}