refactor(components): [color-picker] use type-based definitions (#23488)

* refactor(components): [color-picker] use type-based definitions

* refactor(components): [color-picker] use type-based definitions

* refactor(components): [color-picker] use type-based definitions

* refactor: tweaks

---------

Co-authored-by: rzzf <cszhjh@gmail.com>

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

@@ -8,9 +8,79 @@ import {
 import { useTooltipContentProps } from '@element-plus/components/tooltip'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 import type ColorPicker from './color-picker.vue'
+import type { AriaProps, UseEmptyValuesProps } from '@element-plus/hooks'
+import type { ComponentSize } from '@element-plus/constants'
+import type { ElTooltipContentProps } from '@element-plus/components/tooltip'
 
+export interface ColorPickerProps
+  extends UseEmptyValuesProps, Pick<AriaProps, 'ariaLabel'> {
+  /**
+   * @description when color-picker inactive and persistent is false, the color panel will be destroyed
+   */
+  persistent?: boolean
+  /**
+   * @description binding value
+   */
+  modelValue?: string | null
+  /**
+   * @description ColorPicker id
+   */
+  id?: string
+  /**
+   * @description whether to display the alpha slider
+   */
+  showAlpha?: boolean
+  /**
+   * @description color format of v-model
+   */
+  colorFormat?: string
+  /**
+   * @description whether to disable the ColorPicker
+   */
+  disabled?: boolean
+  /**
+   * @description whether to show clear button
+   */
+  clearable?: boolean
+  /**
+   * @description size of ColorPicker
+   */
+  size?: ComponentSize
+  /**
+   * @description custom class name for ColorPicker's dropdown
+   */
+  popperClass?: ElTooltipContentProps['popperClass']
+  /**
+   * @description custom style for ColorPicker's dropdown
+   */
+  popperStyle?: ElTooltipContentProps['popperStyle']
+  /**
+   * @description ColorPicker tabindex
+   */
+  tabindex?: string | number
+  /**
+   * @description whether color-picker popper is teleported to the body
+   */
+  teleported?: ElTooltipContentProps['teleported']
+  /**
+   * @description which color-picker panel appends to
+   */
+  appendTo?: ElTooltipContentProps['appendTo']
+  /**
+   * @description predefined color options
+   */
+  predefine?: string[]
+  /**
+   * @description whether to trigger form validation
+   */
+  validateEvent?: boolean
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `ColorPickerProps` instead.
+ */
 export const colorPickerProps = buildProps({
   /**
    * @description when color-picker inactive and persistent is false, the color panel will be destroyed
@@ -104,9 +174,26 @@ export const colorPickerEmits = {
   clear: () => true,
 }
 
-export type ColorPickerProps = ExtractPropTypes<typeof colorPickerProps>
+/**
+ * @deprecated Removed after 3.0.0, Use `ColorPickerProps` instead.
+ */
 export type ColorPickerPropsPublic = ExtractPublicPropTypes<
   typeof colorPickerProps
 >
 export type ColorPickerEmits = typeof colorPickerEmits
 export type ColorPickerInstance = InstanceType<typeof ColorPicker> & unknown
+
+/**
+ * @description default values for ColorPickerProps, used in components that extend ColorPickerProps
+ */
+export const colorPickerPropsDefaults = {
+  persistent: true,
+  modelValue: undefined,
+  disabled: undefined,
+  clearable: true,
+  popperStyle: undefined,
+  tabindex: 0,
+  teleported: true,
+  validateEvent: true,
+  valueOnClear: undefined,
+} as const

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

@@ -126,7 +126,7 @@ import {
 } from '@element-plus/constants'
 import { debugWarn, getEventCode } from '@element-plus/utils'
 import { ArrowDown, Close } from '@element-plus/icons-vue'
-import { colorPickerEmits, colorPickerProps } from './color-picker'
+import { colorPickerEmits, colorPickerPropsDefaults } from './color-picker'
 import {
   ElColorPickerPanel,
   ROOT_COMMON_COLOR_INJECTION_KEY,
@@ -137,11 +137,15 @@ import { useCommonColor } from '@element-plus/components/color-picker-panel/src/
 
 import type { ColorPickerPanelInstance } from '@element-plus/components/color-picker-panel'
 import type { TooltipInstance } from '@element-plus/components/tooltip'
+import type { ColorPickerProps } from './color-picker'
 
 defineOptions({
   name: 'ElColorPicker',
 })
-const props = defineProps(colorPickerProps)
+const props = withDefaults(
+  defineProps<ColorPickerProps>(),
+  colorPickerPropsDefaults
+)
 
 const emit = defineEmits(colorPickerEmits)