feat(color-picker): dynamic trigger background color (#793)

* feat(color-picker): dynamic trigger background color

* fix(color-picker): fix color shake problem

* fix(color-picker): fix trigger can not update when is black

* fix(color-picker): fix trigger can not abandon color when click cancel

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

@@ -6,10 +6,12 @@ export const onConfirm = (
   triggerBg: IColorSelectPanelRef<string>,
   res: IColorSelectPanelRef<string>,
   emit,
-  isShow: IColorSelectPanelRef<boolean>
+  isShow: IColorSelectPanelRef<boolean>,
+  prev: IColorPickerRef<string>
 ) => {
   return (color: string) => {
-    res.value = color
+    prev.value = res.value;
+    res.value =  color
     hex.value = res.value
     triggerBg.value = res.value
     emit('confirm', res.value)
@@ -23,41 +25,44 @@ export const onCancel = (
   emit,
   isShow: IColorSelectPanelRef<boolean>,
   hex: IColorSelectPanelRef<string>,
-  color: Color
+  color: Color, prev: IColorPickerRef<string>
 ) => {
   return () => {
     if (isShow.value) {
-      res.value = triggerBg.value
-      hex.value = triggerBg.value
+      res.value = prev.value;
+      hex.value = prev.value;
+      triggerBg.value = prev.value;
       color.reset(hex.value)
       emit('cancel')
     }
     isShow.value = false
   }
 }
-export const onColorUpdate = (color: Color, res: IColorSelectPanelRef<string>, triggerBg?: IColorPickerRef<string>) => {
+export const onColorUpdate = (color: Color, res: IColorSelectPanelRef<string>, triggerBg: IColorPickerRef<string>) => {
   res.value = color.getHex()
+  triggerBg.value = color.getHex();
 }
 
-export const onHSVUpdate = (color: Color, res: IColorSelectPanelRef<string>, hex: IColorSelectPanelRef<string>) => {
+export const onHSVUpdate = (color: Color, res: IColorSelectPanelRef<string>, hex: IColorSelectPanelRef<string>, triggerBg: IColorSelectPanelRef<string>) => {
   return {
     onHueUpdate: (hue: number) => {
       color.set({ h: hue })
-      onColorUpdate(color, res)
+      onColorUpdate(color, res, triggerBg)
       hex.value = color.getHex()
     },
     onSVUpdate: ({ s, v }: { s: number; v: number }) => {
-      color.set({ s, v })
-      onColorUpdate(color, res)
+      color.set({ h: color.get('h'), s, v })
+      onColorUpdate(color, res, triggerBg)
+      hex.value = color.getHex();
     }
   }
 }
 
-export const onAlphaUpdate = (color: Color, res: IColorSelectPanelRef<string>) => {
+export const onAlphaUpdate = (color: Color, res: IColorSelectPanelRef<string>, triggerBg: IColorSelectPanelRef<string>) => {
   return {
     update: (alpha: number) => {
       color.set({ a: alpha })
-      onColorUpdate(color, res)
+      onColorUpdate(color, res, triggerBg)
     }
   }
 }

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

@@ -19,6 +19,7 @@ export const renderless = (props, context, { emit }) => {
   const { modelValue, visible, predefine, size, history } = context.toRefs(props)
   const hex = context.ref(modelValue.value ?? 'transparent')
   const res = context.ref(modelValue.value ?? 'transparent')
+  const prev = context.ref(modelValue.value ?? 'transparent')
   const triggerBg = context.ref(modelValue.value ?? 'transparent')
   const isShow = context.ref(visible?.value ?? false)
   const cursor: Ref<HTMLElement> = context.ref()
@@ -53,21 +54,22 @@ export const renderless = (props, context, { emit }) => {
     hex.value = newValue
     res.value = newValue
     triggerBg.value = newValue
+    prev.value = newValue;
     color.reset(hex.value)
   })
   context.watch(visible, (visible) => {
     isShow.value = visible
   })
 
-  const { onHueUpdate, onSVUpdate } = onHSVUpdate(color, res, hex)
-  const { update } = onAlphaUpdate(color, res)
+  const { onHueUpdate, onSVUpdate } = onHSVUpdate(color, res, hex, triggerBg)
+  const { update } = onAlphaUpdate(color, res, triggerBg)
   const api = {
     state,
     changeVisible,
     onHueUpdate,
     onSVUpdate,
-    onConfirm: onConfirm(hex, triggerBg, res, emit, isShow),
-    onCancel: onCancel(res, triggerBg, emit, isShow, hex, color),
+    onConfirm: onConfirm(hex, triggerBg, res, emit, isShow, prev),
+    onCancel: onCancel(res, triggerBg, emit, isShow, hex, color, prev),
     onAlphaUpdate: update,
     cursor
   }

packages/vue/src/color-select-panel/src/pc.vue

@@ -58,8 +58,8 @@ import CollapseItem from '@opentiny/vue-collapse-item'
 import Input from '@opentiny/vue-input'
 import { renderless, api } from '@opentiny/vue-renderless/color-select-panel/vue'
 import { props, setup, defineComponent, directive } from '@opentiny/vue-common'
-import HueSelect from './components/hue-select'
-import AlphaSelect from './components/alpha-select'
+import HueSelect from './components/hue-select.vue'
+import AlphaSelect from './components/alpha-select.vue'
 import '@opentiny/vue-theme/color-select-panel/index.less'
 import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside'
 import { t } from '@opentiny/vue-locale'