Update #3965 - For ColorPicker

components/lib/colorpicker/BaseColorPicker.vue

@@ -0,0 +1,91 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-colorpicker-panel .p-colorpicker-color {
+    background: transparent url("./images/color.png") no-repeat left top;
+}
+
+.p-colorpicker-panel .p-colorpicker-hue {
+    background: transparent url("./images/hue.png") no-repeat left top;
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
+    input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
+    panel: ({ instance, props }) => [
+        'p-colorpicker-panel',
+        {
+            'p-colorpicker-overlay-panel': !props.inline,
+            'p-disabled': props.disabled,
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    content: 'p-colorpicker-content',
+    selector: 'p-colorpicker-color-selector',
+    color: 'p-colorpicker-color',
+    colorHandle: 'p-colorpicker-color-handle',
+    hue: 'p-colorpicker-hue',
+    hueHandle: 'p-colorpicker-hue-handle'
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_colorpicker_style', manual: true });
+
+export default {
+    name: 'BaseColorPicker',
+    extends: BaseComponent,
+    props: {
+        modelValue: {
+            type: null,
+            default: null
+        },
+        defaultColor: {
+            type: null,
+            default: 'ff0000'
+        },
+        inline: {
+            type: Boolean,
+            default: false
+        },
+        format: {
+            type: String,
+            default: 'hex'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: String,
+            default: null
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        panelClass: null
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/colorpicker/ColorPicker.d.ts

@@ -66,7 +66,7 @@ export interface ColorPickerPassThroughOptions {
     /**
      * Uses to pass attributes to the color handler's DOM element.
      */
-    colorHandler?: ColorPickerPassThroughOptionType;
+    colorHandle?: ColorPickerPassThroughOptionType;
     /**
      * Uses to pass attributes to the hue's DOM element.
      */
@@ -74,7 +74,7 @@ export interface ColorPickerPassThroughOptions {
     /**
      * Uses to pass attributes to the hue handler's DOM element.
      */
-    hueHandler?: ColorPickerPassThroughOptionType;
+    hueHandle: ColorPickerPassThroughOptionType;
 }
 
 /**
@@ -151,6 +151,11 @@ export interface ColorPickerProps {
      * @type {ColorPickerPassThroughOptions}
      */
     pt?: ColorPickerPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 export interface ColorPickerSlots {}

components/lib/colorpicker/ColorPicker.vue

@@ -1,17 +1,17 @@
 <template>
-    <div ref="container" :class="containerClass" v-bind="ptm('root')">
+    <div ref="container" :class="cx('root')" 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')" />
+        <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">
-                <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="pickerClass" @click="onOverlayClick" v-bind="ptm('panel')">
+                <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass]" @click="onOverlayClick" v-bind="ptm('panel')">
-                    <div class="p-colorpicker-content" v-bind="ptm('content')">
+                    <div :class="cx('panel')" 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 :ref="colorSelectorRef" :class="cx('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 :class="cx('color')" v-bind="ptm('color')">
-                                <div :ref="colorHandleRef" class="p-colorpicker-color-handle" v-bind="ptm('colorHandler')"></div>
+                                <div :ref="colorHandleRef" :class="cx('colorHandle')" v-bind="ptm('colorHandle')"></div>
                             </div>
                         </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="hueViewRef" :class="cx('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 :ref="hueHandleRef" :class="cx('hueHandle')" v-bind="ptm('hueHandle')"></div>
                         </div>
                     </div>
                 </div>
@@ -21,14 +21,14 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
+import BaseColorPicker from './BaseColorPicker.vue';
 
 export default {
     name: 'ColorPicker',
-    extends: BaseComponent,
+    extends: BaseColorPicker,
     emits: ['update:modelValue', 'change', 'show', 'hide'],
     props: {
         modelValue: {
@@ -595,26 +595,6 @@ export default {
             });
         }
     },
-    computed: {
-        containerClass() {
-            return ['p-colorpicker p-component', { 'p-colorpicker-overlay': !this.inline }];
-        },
-        inputClass() {
-            return ['p-colorpicker-preview p-inputtext', { 'p-disabled': this.disabled }];
-        },
-        pickerClass() {
-            return [
-                'p-colorpicker-panel',
-                this.panelClass,
-                {
-                    'p-colorpicker-overlay-panel': !this.inline,
-                    'p-disabled': this.disabled,
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }
-            ];
-        }
-    },
     components: {
         Portal: Portal
     }