@composy/color-picker-vue

@composy/color-picker-vue

Vue adapter for @composy/color-picker-core. It provides Vue components, composables, and plugins while reusing the framework-agnostic core.

Features

• <LColorPicker> with v-model, HEX/RGB/HSL/HSV/OKLCH format switching, presets, history, disabled/readonly state, event forwarding, and undo/redo exposes.
• <LGradientPicker> with v-model CSS output, gradient type, angle, stops, presets, and stop events plus complete gradient undo/redo.
• useColorPicker() and useGradientPicker() composables for direct core-instance control.
• Native Vue plugin and Engine plugin registration.
• Core class names and token-backed CSS variables are reused. Vue adds a zero-layout host class for container styling.

Install

pnpm add @composy/color-picker-core @composy/color-picker-vue

Load LDesign color and size token CSS before use:

import '@composy/color-core/styles'
import '@composy/size-core/styles'

Component Usage

<script setup lang="ts">
import { ref } from 'vue'
import {
  ColorPicker as LColorPicker,
  GradientPicker as LGradientPicker,
} from '@composy/color-picker-vue'
import type { GradientStop } from '@composy/color-picker-vue'

const color = ref('#1677FF')
const gradientCss = ref('')
const stops = ref<GradientStop[]>([
  { color: '#1677FF', position: 0 },
  { color: '#22C55E', position: 100 },
])
</script>

<template>
  <LColorPicker v-model="color" format="hex" :show-alpha="true" :history-max="12" />

  <LGradientPicker v-model="gradientCss" type="linear" :angle="90" :stops="stops" />
</template>

Composables

import { ref } from 'vue'
import { useColorPicker } from '@composy/color-picker-vue'

const container = ref<HTMLElement | null>(null)
const { instance, colorString, setColor, setDisabled, undo, redo, updateOptions } = useColorPicker({
  container,
  options: {
    defaultColor: '#1677FF',
    showHistory: true,
  },
})

setColor('#22C55E')
undo()
redo()
setDisabled(false)
updateOptions({ themeVars: { primaryColor: 'var(--ld-success-default)' } })

Plugin Usage

import { createApp } from 'vue'
import { ColorPickerPlugin } from '@composy/color-picker-vue'
import App from './App.vue'

createApp(App)
  .use(ColorPickerPlugin, {
    componentName: 'LColorPicker',
    gradientComponentName: 'LGradientPicker',
  })
  .mount('#app')

Props

LColorPicker supports:

• modelValue, defaultColor, format
• showAlpha, showEyeDropper, showInput, showPresets, showHistory
• presets, history, historyMax
• enableUndoRedo, undoLimit
• width, disabled, readonly, themeVars
• containerClass, containerStyle

LGradientPicker supports:

• modelValue, type, angle, stops
• width, showAngle, showTypeSwitch, showPresets
• disabled, readonly, themeVars
• enableUndoRedo, undoLimit
• containerClass, containerStyle

Styling

Vue components mount the core DOM into a host element and use the same class names:

• ldesign-color-picker
• ldesign-gradient-picker
• ldesign-color-picker-vue-host
• ldesign-gradient-picker-vue-host

Use themeVars for component-level CSS variable overrides:

<LColorPicker
  v-model="color"
  :auto-inject-styles="false"
  :theme-vars="{ primaryColor: 'var(--ld-warning-default)' }"
/>

组件和 composable 会转发 undoRedoChange；组件 ref 暴露 canUndo()、canRedo()、 undo() 和 redo()，工具栏无需访问内部 DOM 即可绘制撤销/重做按钮。

Scripts

pnpm run type-check
pnpm run build

Expected build outputs:

• dist/index.js
• dist/index.min.js
• es/index.js
• esm/index.js
• lib/index.cjs

The authoritative build, TypeScript, and ESLint configs are stored in .ldesign/. The package-root TypeScript and ESLint files remain compatibility shims; package scripts target .ldesign/tsconfig.typecheck.json directly.

License

MIT