refactor(color-picker): use rgba background

Author: GaoNeng-wWw

examples/sites/demos/pc/app/color-picker/alpha.spec.ts

@@ -9,6 +9,6 @@ test('测试Alpha', async ({ page }) => {
   await page.getByText('用户选择了取消').click()
   await page.locator('.tiny-color-picker__inner').click()
   await page.getByRole('button', { name: '选择' }).click()
-  // format not implment if enable alpha will use rgba
-  await page.getByText('rgba(128, 64, 64, 1)').click()
+  // default is hex
+  await page.getByText('#804040FF').click()
 })

packages/renderless/src/color-picker/index.ts

@@ -1,5 +1,5 @@
 import type { IColorSelectPanelRef } from '@/types'
-import { parseHSV } from './utils/hsv-to-rgb'
+import type { Color } from './utils/color'
 
 export const updateModelValue = (val, emit) => {
   emit('update:modelValue', val)
@@ -11,13 +11,9 @@ export const toggleVisible = (isShow: IColorSelectPanelRef<boolean>) => {
   }
 }
 
-export const useEvent = (state, emit, changeVisible) => {
+export const useEvent = (state, emit, changeVisible, color: Color) => {
   const onConfirm = (val) => {
-    state.hex = val
-    if (val.includes('hsv') || val.includes('hsva')) {
-      const { r, g, b } = parseHSV(val)
-      state.hex = `rgb(${r}, ${g}, ${b})`
-    }
+    color.fromString(val)
     updateModelValue(val, emit)
     emit('confirm', val)
     changeVisible(false)

packages/renderless/src/color-picker/utils/color.ts

@@ -340,6 +340,16 @@ export class Color {
       v: this._value
     })
   }
+  toRgba() {
+    return {
+      ...hsv2rgb({
+        h: this._hue,
+        s: this._sat,
+        v: this._value
+      }),
+      a: this._alpha / 100
+    }
+  }
   onChange() {
     const { _hue, _sat, _value, _alpha, format, enableAlpha } = this
     if (!enableAlpha) {

packages/renderless/src/color-picker/vue.ts

@@ -50,13 +50,13 @@ export const renderless = (props, ctx: ISharedRenderlessParamHooks, { emit }: IS
   ctx.watch(
     () => props.modelValue,
     () => {
-      if (color.value !== props.modelValue && props.modelValue) {
-        color.fromString(props.modelValue)
-      }
+      color.fromString(props.modelValue)
+      const { r, g, b, a } = color.toRgba()
+      state.hex = `rgba(${r}, ${g}, ${b}, ${a})`
     }
   )
   const changeVisible = toggleVisible(isShow)
-  const { onConfirm, onCancel } = useEvent(state, emit, changeVisible)
+  const { onConfirm, onCancel } = useEvent(state, emit, changeVisible, color)
   const api = {
     state,
     changeVisible,