fix(components): [color-picker] supports dynamic change of colorFormat (#18135)

* feat(components): [color-picker] supports dynamic change of colorFormat

* test(components): [color-picker] test cases with fixes added

packages/components/color-picker/__tests__/color-picker.test.tsx

@@ -498,4 +498,25 @@ describe('Color-picker', () => {
     expect(blurHandler).toHaveBeenCalled()
     wrapper.unmount()
   })
+
+  it('when colorFormat prop changes, the color format and v-model binding values should be updated', async () => {
+    const color = ref('#00FF00')
+    const colorFormat = ref('hex')
+    const wrapper = mount(() => (
+      <ColorPicker v-model={color.value} color-format={colorFormat.value} />
+    ))
+
+    colorFormat.value = 'rgb'
+    await nextTick()
+    const colorPickerWrapper = wrapper.findComponent(ColorPicker)
+    const customInput = colorPickerWrapper.findComponent({
+      ref: 'inputRef',
+    })
+    expect(colorPickerWrapper.vm.color.format).toBe('rgb')
+    expect(color.value).toBe('rgb(0, 255, 0)')
+    expect(
+      customInput.find<HTMLInputElement>('.el-input__inner').element.value
+    ).toBe('rgb(0, 255, 0)')
+    wrapper.unmount()
+  })
 })

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

@@ -363,6 +363,17 @@ watch(
   }
 )
 
+watch(
+  () => props.colorFormat,
+  () => {
+    if (props.colorFormat) {
+      color.format = props.colorFormat
+      color.doOnChange()
+      emit(UPDATE_MODEL_EVENT, color.value)
+    }
+  }
+)
+
 watch(
   () => currentColor.value,
   (val) => {