From d5ebfd3175ecedd09e97c079e32040b3421fa167 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 5 May 2023 12:53:13 +0300
Subject: [PATCH] Refactor #3922 - For ColorPicker

---
 api-generator/components/colorpicker.js     |  6 ++
 components/lib/colorpicker/ColorPicker.d.ts | 76 +++++++++++++++++++++
 components/lib/colorpicker/ColorPicker.vue  | 18 ++---
 components/lib/config/PrimeVue.d.ts         |  2 +
 4 files changed, 93 insertions(+), 9 deletions(-)

diff --git a/api-generator/components/colorpicker.js b/api-generator/components/colorpicker.js
index f145256d9..a564c297a 100644
--- a/api-generator/components/colorpicker.js
+++ b/api-generator/components/colorpicker.js
@@ -70,6 +70,12 @@ const ColorPickerProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/components/lib/colorpicker/ColorPicker.d.ts b/components/lib/colorpicker/ColorPicker.d.ts
index a8cdc757e..0b0e75dc9 100755
--- a/components/lib/colorpicker/ColorPicker.d.ts
+++ b/components/lib/colorpicker/ColorPicker.d.ts
@@ -9,6 +9,16 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ColorPickerPassThroughOptionType = ColorPickerPassThroughAttributes | ((options: ColorPickerPassThroughMethodOptions) => ColorPickerPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColorPickerPassThroughMethodOptions {
+    props: ColorPickerProps;
+    state: ColorPickerState;
+}
+
 /**
  * Custom change event.
  * @see {@link ColorPickerEmits.change}
@@ -24,6 +34,67 @@ export interface ColorPickerChangeEvent {
     value: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ColorPickerProps.pt}
+ */
+export interface ColorPickerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the selector's DOM element.
+     */
+    selector?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the color's DOM element.
+     */
+    color?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the color handler's DOM element.
+     */
+    colorHandler?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hue's DOM element.
+     */
+    hue?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hue handler's DOM element.
+     */
+    hueHandler?: ColorPickerPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ColorPickerPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ColorPicker component.
+ */
+export interface ColorPickerState {
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+}
+
 /**
  * Defines valid properties in ColorPicker component.
  */
@@ -75,6 +146,11 @@ export interface ColorPickerProps {
      * @defaultValue body
      */
     appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ColorPickerPassThroughOptions}
+     */
+    pt?: ColorPickerPassThroughOptions;
 }
 
 export interface ColorPickerSlots {}
diff --git a/components/lib/colorpicker/ColorPicker.vue b/components/lib/colorpicker/ColorPicker.vue
index e1eb93096..f4694ad53 100755
--- a/components/lib/colorpicker/ColorPicker.vue
+++ b/components/lib/colorpicker/ColorPicker.vue
@@ -1,17 +1,17 @@
 <template>
-    <div ref="container" :class="containerClass">
-        <input v-if="!inline" ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" />
+    <div ref="container" :class="containerClass" v-bind="ptm('root')">
+        <input v-if="!inline" ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('input')" />
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="pickerClass" @click="onOverlayClick">
-                    <div class="p-colorpicker-content">
-                        <div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
-                            <div class="p-colorpicker-color">
-                                <div :ref="colorHandleRef" class="p-colorpicker-color-handle"></div>
+                <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="pickerClass" @click="onOverlayClick" v-bind="ptm('panel')">
+                    <div class="p-colorpicker-content" v-bind="ptm('content')">
+                        <div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('selector')">
+                            <div class="p-colorpicker-color" v-bind="ptm('color')">
+                                <div :ref="colorHandleRef" class="p-colorpicker-color-handle" v-bind="ptm('colorHandler')"></div>
                             </div>
                         </div>
-                        <div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown($event)" @touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
-                            <div :ref="hueHandleRef" class="p-colorpicker-hue-handle"></div>
+                        <div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown($event)" @touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('hue')">
+                            <div :ref="hueHandleRef" class="p-colorpicker-hue-handle" v-bind="ptm('hueHandler')"></div>
                         </div>
                     </div>
                 </div>
diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts
index 2e29c9b30..401a76928 100644
--- a/components/lib/config/PrimeVue.d.ts
+++ b/components/lib/config/PrimeVue.d.ts
@@ -15,6 +15,7 @@ import { ChartPassThroughOptions } from '../chart';
 import { CheckboxPassThroughOptions } from '../checkbox';
 import { ChipPassThroughOptions } from '../chip';
 import { ChipsPassThroughOptions } from '../chips';
+import { ColorPickerPassThroughOptions } from '../colorpicker';
 import { ConfirmDialogPassThroughOptions } from '../confirmdialog';
 import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
 import { ContextMenuPassThroughOptions } from '../contextmenu';
@@ -87,6 +88,7 @@ interface PrimeVuePTOptions {
     checkbox?: CheckboxPassThroughOptions;
     chip?: ChipPassThroughOptions;
     chips?: ChipsPassThroughOptions;
+    colorpicker?: ColorPickerPassThroughOptions;
     confirmdialog?: ConfirmDialogPassThroughOptions;
     confirmpopup?: ConfirmPopupPassThroughOptions;
     contextmenu?: ContextMenuPassThroughOptions;