fix(color-picker): fix compilation errors caused by switch (#1375)

packages/color-picker/src/color.ts

@@ -104,16 +104,19 @@ const rgb2hsv = function(r, g, b) {
     h = 0 // achromatic
   } else {
     switch (max) {
-      case r:
+      case r: {
         h = (g - b) / d + (g < b ? 6 : 0)
         break
-      case g:
+      }
+      case g: {
         h = (b - r) / d + 2
         break
-      case b:
+      }
+      case b: {
         h = (r - g) / d + 4
         break
       }
+    }
     h /= 6
   }
 
@@ -291,33 +294,40 @@ export default class Color {
 
     if (this.enableAlpha) {
       switch (format) {
-        case 'hsl':
+        case 'hsl': {
           const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100)
           this.value = `hsla(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%, ${ _alpha / 100})`
           break
-        case 'hsv':
+        }
+        case 'hsv': {
           this.value = `hsva(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%, ${ _alpha / 100})`
           break
-        default:
+        }
+        default: {
           const { r, g, b } = hsv2rgb(_hue, _saturation, _value)
           this.value = `rgba(${r}, ${g}, ${b}, ${ _alpha / 100 })`
         }
+      }
     } else {
       switch (format) {
-        case 'hsl':
+        case 'hsl': {
           const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100)
           this.value = `hsl(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%)`
           break
-        case 'hsv':
+        }
+        case 'hsv': {
           this.value = `hsv(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%)`
           break
-        case 'rgb':
+        }
+        case 'rgb':{
           const { r, g, b } = hsv2rgb(_hue, _saturation, _value)
           this.value = `rgb(${r}, ${g}, ${b})`
           break
-        default:
+        }
+        default: {
           this.value = toHex(hsv2rgb(_hue, _saturation, _value))
         }
       }
     }
   }
+}

packages/color-picker/src/components/hue-slider.vue

@@ -43,7 +43,7 @@ export default defineComponent({
       return props.color.get('hue')
     })
     // watch
-    watch(hueValue, () => {
+    watch(() => hueValue.value, () => {
       update()
     })
     // methods

packages/color-picker/src/components/predefine.vue

@@ -34,7 +34,7 @@ export default defineComponent({
     const rgbaColors = ref(parseColors(props.colors, props.color))
 
     //watch
-    watch(currentColor, val => {
+    watch(() => currentColor.value, val => {
       const color = new Color()
       color.fromString(val)
 

packages/color-picker/src/components/sv-panel.vue

@@ -80,12 +80,12 @@ export default defineComponent({
       })
     }
     // watch
-    watch(colorValue, () => {
+    watch(() => colorValue.value, () => {
       update()
     })
     // mounted
     onMounted(() => {
-      draggable(instance.vnode.el, {
+      draggable(instance.vnode.el as HTMLElement, {
         drag: event => {
           handleDrag(event)
         },

packages/color-picker/src/index.vue

@@ -86,11 +86,8 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent, computed, ref,
-  nextTick, reactive, watch,
-  provide,inject, onMounted,
-} from 'vue'
+import type { PropType } from 'vue'
+import { computed, defineComponent, inject, nextTick, onMounted, provide, reactive, ref, watch } from 'vue'
 import type { ComputedRef } from '@vue/reactivity'
 import { ClickOutside } from '@element-plus/directives'
 import Color from './color'
@@ -105,11 +102,9 @@ import { t } from '@element-plus/locale'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { useGlobalConfig } from '@element-plus/utils/util'
 import { isValidComponentSize } from '@element-plus/utils/validators'
-import { elFormKey, elFormItemKey } from '@element-plus/form'
-import debounce from 'lodash/debounce'
-
-import type { PropType } from 'vue'
 import type { ElFormContext, ElFormItemContext } from '@element-plus/form'
+import { elFormItemKey, elFormKey } from '@element-plus/form'
+import debounce from 'lodash/debounce'
 
 interface IUseOptions {
   currentColor: ComputedRef<string>
@@ -147,11 +142,7 @@ export default defineComponent( {
     popperClass: String,
     predefine: Array,
   },
-  emits: {
-    change: null,
-    'active-change': null,
-    [UPDATE_MODEL_EVENT]: null,
-  },
+  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],
   setup(props, { emit }) {
     const ELEMENT = useGlobalConfig()
     const elForm = inject(elFormKey, {} as ElFormContext)
@@ -194,7 +185,7 @@ export default defineComponent( {
         color.fromString(newVal)
       }
     })
-    watch(currentColor, val => {
+    watch(() => currentColor.value, val => {
       customInput.value = val
       emit('active-change', val)
       // showPanelColor.value = true
@@ -217,6 +208,7 @@ export default defineComponent( {
         ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
         : `rgb(${ r }, ${ g }, ${ b })`
     }
+
     function setShowPicker(value) {
       showPicker.value = value
     }
@@ -227,6 +219,7 @@ export default defineComponent( {
       debounceSetShowPicker(false)
       resetColor()
     }
+
     function resetColor() {
       nextTick(() => {
         if (props.modelValue) {
@@ -236,20 +229,35 @@ export default defineComponent( {
         }
       })
     }
+
     function handleTrigger() {
       if (colorDisabled.value) return
       debounceSetShowPicker(!showPicker.value)
     }
+
     function handleConfirm() {
       color.fromString(customInput.value)
     }
+
     function confirmValue() {
       const value = color.value
       emit(UPDATE_MODEL_EVENT, value)
       emit('change', value)
       elFormItem.formItemMitt?.emit('el.form.change', value)
       debounceSetShowPicker(false)
+      // check if modelValue change, if not change, then reset color.
+      nextTick(() => {
+        const newColor = new Color({
+          enableAlpha: props.showAlpha,
+          format: props.colorFormat,
+        })
+        newColor.fromString(props.modelValue)
+        if (!color.compare(newColor)) {
+          resetColor()
         }
+      })
+    }
+
     function clear() {
       debounceSetShowPicker(false)
       emit(UPDATE_MODEL_EVENT, null)
@@ -266,7 +274,7 @@ export default defineComponent( {
         customInput.value = currentColor.value
       }
     })
-    watch(showPicker, () => {
+    watch(() => showPicker.value, () => {
       nextTick(() => {
         hue.value?.update()
         svPanel.value?.update()