From 01d65820fe681c7a0eeb497e18fa48f1d8fa784a Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 2 Aug 2023 15:00:09 +0300
Subject: [PATCH] Refactor #4231 - For ColorPicker

---
 components/lib/colorpicker/ColorPicker.d.ts | 4 ++++
 components/lib/colorpicker/ColorPicker.vue  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/lib/colorpicker/ColorPicker.d.ts b/components/lib/colorpicker/ColorPicker.d.ts
index 9794487e0..f7d0f462f 100755
--- a/components/lib/colorpicker/ColorPicker.d.ts
+++ b/components/lib/colorpicker/ColorPicker.d.ts
@@ -82,6 +82,10 @@ export interface ColorPickerPassThroughOptions {
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
+    /**
+     * Used to control Vue Transition API.
+     */
+    transition?: any;
 }
 
 /**
diff --git a/components/lib/colorpicker/ColorPicker.vue b/components/lib/colorpicker/ColorPicker.vue
index d82b85698..d9ab5795d 100755
--- a/components/lib/colorpicker/ColorPicker.vue
+++ b/components/lib/colorpicker/ColorPicker.vue
@@ -2,7 +2,7 @@
     <div ref="container" :class="cx('root')" v-bind="ptm('root')">
         <input v-if="!inline" ref="input" type="text" :class="cx('input')" 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">
+            <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]" @click="onOverlayClick" v-bind="ptm('panel')">
                     <div :class="cx('panel')" v-bind="ptm('content')">
                         <div :ref="colorSelectorRef" :class="cx('selector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('selector')">