Add form support to `ColorPicker`

packages/primevue/src/colorpicker/BaseColorPicker.vue

@@ -1,15 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import ColorPickerStyle from 'primevue/colorpicker/style';
 
 export default {
     name: 'BaseColorPicker',
-    extends: BaseComponent,
+    extends: BaseEditableHolder,
     props: {
-        modelValue: {
-            type: null,
-            default: null
-        },
         defaultColor: {
             type: null,
             default: 'ff0000'
@@ -22,10 +18,6 @@ export default {
             type: String,
             default: 'hex'
         },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         tabindex: {
             type: String,
             default: null

packages/primevue/src/colorpicker/ColorPicker.d.ts

@@ -144,6 +144,14 @@ export interface ColorPickerProps {
      * @defaultValue ff0000
      */
     defaultColor?: any;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: any;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * Whether to display as an overlay or not.
      * @defaultValue false
@@ -154,6 +162,11 @@ export interface ColorPickerProps {
      * @defaultValue hex
      */
     format?: 'hex' | 'rgb' | 'hsb' | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
@@ -191,6 +204,10 @@ export interface ColorPickerProps {
      * @defaultValue body
      */
     appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
+    /**
+     * Form control object, typically used for handling validation and form state.
+     */
+    formControl?: Record<string, any> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -223,6 +240,11 @@ export interface ColorPickerEmitsOptions {
      * @param {*} value - New value.
      */
     'update:modelValue'(value: any): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {*} value - New value.
+     */
+    'value-change'(value: any): void;
     /**
      * Callback to invoke when a color is selected.
      * @param {ColorPickerChangeEvent} event - Custom add event.

packages/primevue/src/colorpicker/ColorPicker.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="container" :class="cx('root')" v-bind="ptmi('root')">
-        <input v-if="!inline" ref="input" :id="inputId" type="text" :class="cx('preview')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('preview')" />
+        <input v-if="!inline" ref="input" :id="inputId" type="text" :class="cx('preview')" :readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" @blur="onInputBlur" v-bind="ptm('preview')" />
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
                 <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass, overlayClass]" @click="onOverlayClick" v-bind="{ ...ptm('panel'), ...ptm('overlay') }">
@@ -32,7 +32,7 @@ export default {
     name: 'ColorPicker',
     extends: BaseColorPicker,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'show', 'hide'],
+    emits: ['change', 'show', 'hide'],
     data() {
         return {
             overlayVisible: false
@@ -117,7 +117,7 @@ export default {
             this.updateInput();
         },
         updateModel(event) {
-            let value = this.modelValue;
+            let value = this.d_value;
 
             switch (this.format) {
                 case 'hex':
@@ -137,7 +137,7 @@ export default {
                     break;
             }
 
-            this.$emit('update:modelValue', value);
+            this.updateValue(value, event);
             this.$emit('change', { event, value });
         },
         updateColorSelector() {
@@ -396,6 +396,9 @@ export default {
                     break;
             }
         },
+        onInputBlur(event) {
+            this.formField.onBlur?.();
+        },
         onColorMousedown(event) {
             if (this.disabled) {
                 return;

packages/primevue/src/colorpicker/style/ColorPickerStyle.js

@@ -120,7 +120,8 @@ const classes = {
         'p-colorpicker-panel',
         {
             'p-colorpicker-panel-inline': props.inline,
-            'p-disabled': props.disabled
+            'p-disabled': props.disabled,
+            'p-invalid': instance.$invalid
         }
     ],
     colorSelector: 'p-colorpicker-color-selector',