primevue 3.29.2 → 3.30.0

package/chips/chips.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.chips=function(e,t,n,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(e),s=l(t),a={name:"Chips",extends:o.default,emits:["update:modelValue","add","remove","focus","blur"],props:{modelValue:{type:Array,default:null},max:{type:Number,default:null},separator:{type:[String,Object],default:null},addOnBlur:{type:Boolean,default:null},allowDuplicate:{type:Boolean,default:!0},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},removeTokenIcon:{type:String,default:void 0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({id:n.UniqueComponentId(),inputValue:null,focused:!1,focusedIndex:null}),methods:{onWrapperClick(){this.$refs.input.focus()},onInput(e){this.inputValue=e.target.value,this.focusedIndex=null},onFocus(e){this.focused=!0,this.focusedIndex=null,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedIndex=null,this.addOnBlur&&this.addItem(e,e.target.value,!1),this.$emit("blur",e)},onKeyDown(e){const t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&(null!==this.focusedIndex?this.removeItem(e,this.focusedIndex):this.removeItem(e,this.modelValue.length-1));break;case"Enter":t&&t.trim().length&&!this.maxedOut&&this.addItem(e,t,!0);break;case"ArrowLeft":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.$refs.container.focus();break;case"ArrowRight":e.stopPropagation();break;default:this.separator&&(this.separator===e.key||e.key.match(this.separator))&&this.addItem(e,t,!0)}},onPaste(e){if(this.separator){let t=(e.clipboardData||window.clipboardData).getData("Text");if(t){let n=this.modelValue||[],i=t.split(this.separator);i=i.filter((e=>this.allowDuplicate||-1===n.indexOf(e))),n=[...n,...i],this.updateModel(e,n,!0)}}},onContainerFocus(){this.focused=!0},onContainerBlur(){this.focusedIndex=-1,this.focused=!1},onContainerKeyDown(e){switch(e.code){case"ArrowLeft":this.onArrowLeftKeyOn(e);break;case"ArrowRight":this.onArrowRightKeyOn(e);break;case"Backspace":this.onBackspaceKeyOn(e)}},onArrowLeftKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex=null===this.focusedIndex?this.modelValue.length-1:this.focusedIndex-1,this.focusedIndex<0&&(this.focusedIndex=0))},onArrowRightKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex===this.modelValue.length-1?(this.focusedIndex=null,this.$refs.input.focus()):this.focusedIndex++)},onBackspaceKeyOn(e){null!==this.focusedIndex&&this.removeItem(e,this.focusedIndex)},updateModel(e,t,n){this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((()=>{this.maxedOut&&(this.focused=!1)}),0),n&&e.preventDefault()},addItem(e,t,n){if(t&&t.trim().length){let i=this.modelValue?[...this.modelValue]:[];(this.allowDuplicate||-1===i.indexOf(t))&&(i.push(t),this.updateModel(e,i,n))}},removeItem(e,t){if(this.disabled)return;let n=[...this.modelValue];const i=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),this.$emit("remove",{originalEvent:e,value:i})}},computed:{maxedOut(){return this.max&&this.modelValue&&this.max===this.modelValue.length},containerClass(){return["p-chips p-component p-inputwrapper",{"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":this.modelValue&&this.modelValue.length||this.inputValue&&this.inputValue.length,"p-inputwrapper-focus":this.focused}]},focusedOptionId(){return null!==this.focusedIndex?`${this.id}_chips_item_${this.focusedIndex}`:null}},components:{TimesCircleIcon:s.default}};const u=["aria-labelledby","aria-label","aria-activedescendant"],r=["id","aria-label","aria-setsize","aria-posinset"],d=["id","disabled","placeholder"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-chips {\n    display: inline-flex;\n}\n.p-chips-multiple-container {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    cursor: text;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}\n.p-chips-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-chips-input-token {\n    flex: 1 1 auto;\n    display: inline-flex;\n}\n.p-chips-token-icon {\n    cursor: pointer;\n}\n.p-chips-input-token input {\n    border: 0 none;\n    outline: 0 none;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-chips {\n    display: flex;\n}\n"),a.render=function(e,t,n,l,o,s){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:s.containerClass},e.ptm("root")),[i.createElementVNode("ul",i.mergeProps({ref:"container",class:"p-inputtext p-chips-multiple-container",tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":o.focused?s.focusedOptionId:void 0,onClick:t[5]||(t[5]=e=>s.onWrapperClick()),onFocus:t[6]||(t[6]=(...e)=>s.onContainerFocus&&s.onContainerFocus(...e)),onBlur:t[7]||(t[7]=(...e)=>s.onContainerBlur&&s.onContainerBlur(...e)),onKeydown:t[8]||(t[8]=(...e)=>s.onContainerKeyDown&&s.onContainerKeyDown(...e))},e.ptm("container")),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(n.modelValue,((t,l)=>(i.openBlock(),i.createElementBlock("li",i.mergeProps({key:`${l}_${t}`,id:o.id+"_chips_item_"+l,role:"option",class:["p-chips-token",{"p-focus":o.focusedIndex===l}],"aria-label":t,"aria-selected":!0,"aria-setsize":n.modelValue.length,"aria-posinset":l+1},e.ptm("token")),[i.renderSlot(e.$slots,"chip",{value:t},(()=>[i.createElementVNode("span",i.mergeProps({class:"p-chips-token-label"},e.ptm("label")),i.toDisplayString(t),17)])),i.renderSlot(e.$slots,"removetokenicon",{onClick:e=>s.removeItem(e,l)},(()=>[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(n.removeTokenIcon?"span":"TimesCircleIcon"),i.mergeProps({class:["p-chips-token-icon",n.removeTokenIcon],onClick:e=>s.removeItem(e,l),"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]))],16,r)))),128)),i.createElementVNode("li",i.mergeProps({class:"p-chips-input-token",role:"option"},e.ptm("inputToken")),[i.createElementVNode("input",i.mergeProps({ref:"input",id:n.inputId,type:"text",class:n.inputClass,style:n.inputStyle,disabled:n.disabled||s.maxedOut,placeholder:n.placeholder,onFocus:t[0]||(t[0]=e=>s.onFocus(e)),onBlur:t[1]||(t[1]=e=>s.onBlur(e)),onInput:t[2]||(t[2]=(...e)=>s.onInput&&s.onInput(...e)),onKeydown:t[3]||(t[3]=e=>s.onKeyDown(e)),onPaste:t[4]||(t[4]=e=>s.onPaste(e))},{...n.inputProps,...e.ptm("input")}),null,16,d)],16)],16,u)],16)},a}(primevue.basecomponent,primevue.icons.timescircle,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.chips=function(e,n,t,o,i){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(e),a=r(t),u=o.useStyle("\n.p-chips {\n    display: inline-flex;\n}\n\n.p-chips-multiple-container {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    cursor: text;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.p-chips-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n\n.p-chips-input-token {\n    flex: 1 1 auto;\n    display: inline-flex;\n}\n\n.p-chips-token-icon {\n    cursor: pointer;\n}\n\n.p-chips-input-token input {\n    border: 0 none;\n    outline: 0 none;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n\n.p-fluid .p-chips {\n    display: flex;\n}\n",{name:"chips",manual:!0});function s(e){return f(e)||d(e)||p(e)||c()}function c(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function p(e,n){if(e){if("string"==typeof e)return m(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?m(e,n):void 0}}function d(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function f(e){if(Array.isArray(e))return m(e)}function m(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,o=new Array(n);t<n;t++)o[t]=e[t];return o}var h={name:"Chips",extends:{name:"BaseChips",extends:a.default,props:{modelValue:{type:Array,default:null},max:{type:Number,default:null},separator:{type:[String,Object],default:null},addOnBlur:{type:Boolean,default:null},allowDuplicate:{type:Boolean,default:!0},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},removeTokenIcon:{type:String,default:void 0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},css:{classes:{root:function(e){var n=e.instance,t=e.props;return["p-chips p-component p-inputwrapper",{"p-disabled":t.disabled,"p-focus":n.focused,"p-inputwrapper-filled":t.modelValue&&t.modelValue.length||n.inputValue&&n.inputValue.length,"p-inputwrapper-focus":n.focused}]},container:"p-inputtext p-chips-multiple-container",token:function(e){return["p-chips-token",{"p-focus":e.state.focusedIndex===e.index}]},label:"p-chips-token-label",removeTokenIcon:"p-chips-token-icon",inputToken:"p-chips-input-token"},loadStyle:u.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","add","remove","focus","blur"],data:function(){return{id:n.UniqueComponentId(),inputValue:null,focused:!1,focusedIndex:null}},methods:{onWrapperClick:function(){this.$refs.input.focus()},onInput:function(e){this.inputValue=e.target.value,this.focusedIndex=null},onFocus:function(e){this.focused=!0,this.focusedIndex=null,this.$emit("focus",e)},onBlur:function(e){this.focused=!1,this.focusedIndex=null,this.addOnBlur&&this.addItem(e,e.target.value,!1),this.$emit("blur",e)},onKeyDown:function(e){var n=e.target.value;switch(e.code){case"Backspace":0===n.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,null!==this.focusedIndex?this.focusedIndex:this.modelValue.length-1);break;case"Enter":n&&n.trim().length&&!this.maxedOut&&this.addItem(e,n,!0);break;case"ArrowLeft":0===n.length&&this.modelValue&&this.modelValue.length>0&&this.$refs.container.focus();break;case"ArrowRight":e.stopPropagation();break;default:this.separator&&(this.separator===e.key||e.key.match(this.separator))&&this.addItem(e,n,!0)}},onPaste:function(e){var n=this;if(this.separator){var t=(e.clipboardData||window.clipboardData).getData("Text");if(t){var o=this.modelValue||[],i=t.split(this.separator);i=i.filter((function(e){return n.allowDuplicate||-1===o.indexOf(e)})),o=[].concat(s(o),s(i)),this.updateModel(e,o,!0)}}},onContainerFocus:function(){this.focused=!0},onContainerBlur:function(){this.focusedIndex=-1,this.focused=!1},onContainerKeyDown:function(e){switch(e.code){case"ArrowLeft":this.onArrowLeftKeyOn(e);break;case"ArrowRight":this.onArrowRightKeyOn(e);break;case"Backspace":this.onBackspaceKeyOn(e)}},onArrowLeftKeyOn:function(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex=null===this.focusedIndex?this.modelValue.length-1:this.focusedIndex-1,this.focusedIndex<0&&(this.focusedIndex=0))},onArrowRightKeyOn:function(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex===this.modelValue.length-1?(this.focusedIndex=null,this.$refs.input.focus()):this.focusedIndex++)},onBackspaceKeyOn:function(e){null!==this.focusedIndex&&this.removeItem(e,this.focusedIndex)},updateModel:function(e,n,t){var o=this;this.$emit("update:modelValue",n),this.$emit("add",{originalEvent:e,value:n}),this.$refs.input.value="",this.inputValue="",setTimeout((function(){o.maxedOut&&(o.focused=!1)}),0),t&&e.preventDefault()},addItem:function(e,n,t){if(n&&n.trim().length){var o=this.modelValue?s(this.modelValue):[];(this.allowDuplicate||-1===o.indexOf(n))&&(o.push(n),this.updateModel(e,o,t))}},removeItem:function(e,n){if(!this.disabled){var t=s(this.modelValue),o=t.splice(n,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",t),this.$emit("remove",{originalEvent:e,value:o})}}},computed:{maxedOut:function(){return this.max&&this.modelValue&&this.max===this.modelValue.length},focusedOptionId:function(){return null!==this.focusedIndex?"".concat(this.id,"_chips_item_").concat(this.focusedIndex):null}},components:{TimesCircleIcon:l.default}};function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}function b(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function v(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?b(Object(t),!0).forEach((function(n){g(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):b(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function g(e,n,t){return(n=x(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function x(e){var n=I(e,"string");return"symbol"===y(n)?n:String(n)}function I(e,n){if("object"!==y(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!==y(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}var k=["aria-labelledby","aria-label","aria-activedescendant"],w=["id","aria-label","aria-setsize","aria-posinset","data-p-focused"],O=["id","disabled","placeholder"];return h.render=function(e,n,t,o,r,l){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"chips"}),[i.createElementVNode("ul",i.mergeProps({ref:"container",class:e.cx("container"),tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":r.focused?l.focusedOptionId:void 0,onClick:n[5]||(n[5]=function(e){return l.onWrapperClick()}),onFocus:n[6]||(n[6]=function(){return l.onContainerFocus&&l.onContainerFocus.apply(l,arguments)}),onBlur:n[7]||(n[7]=function(){return l.onContainerBlur&&l.onContainerBlur.apply(l,arguments)}),onKeydown:n[8]||(n[8]=function(){return l.onContainerKeyDown&&l.onContainerKeyDown.apply(l,arguments)})},e.ptm("container")),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(e.modelValue,(function(n,t){return i.openBlock(),i.createElementBlock("li",i.mergeProps({key:"".concat(t,"_").concat(n),id:r.id+"_chips_item_"+t,role:"option",class:e.cx("token",{index:t}),"aria-label":n,"aria-selected":!0,"aria-setsize":e.modelValue.length,"aria-posinset":t+1},e.ptm("token"),{"data-p-focused":r.focusedIndex===t}),[i.renderSlot(e.$slots,"chip",{class:i.normalizeClass(e.cx("label")),value:n},(function(){return[i.createElementVNode("span",i.mergeProps({class:e.cx("label")},e.ptm("label")),i.toDisplayString(n),17)]})),i.renderSlot(e.$slots,"removetokenicon",{class:i.normalizeClass(e.cx("removeTokenIcon")),onClick:function(e){return l.removeItem(e,t)}},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.removeTokenIcon?"span":"TimesCircleIcon"),i.mergeProps({class:[e.cx("removeTokenIcon"),e.removeTokenIcon],onClick:function(e){return l.removeItem(e,t)},"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]}))],16,w)})),128)),i.createElementVNode("li",i.mergeProps({class:e.cx("inputToken"),role:"option"},e.ptm("inputToken")),[i.createElementVNode("input",i.mergeProps({ref:"input",id:e.inputId,type:"text",class:e.inputClass,style:e.inputStyle,disabled:e.disabled||l.maxedOut,placeholder:e.placeholder,onFocus:n[0]||(n[0]=function(e){return l.onFocus(e)}),onBlur:n[1]||(n[1]=function(e){return l.onBlur(e)}),onInput:n[2]||(n[2]=function(){return l.onInput&&l.onInput.apply(l,arguments)}),onKeydown:n[3]||(n[3]=function(e){return l.onKeyDown(e)}),onPaste:n[4]||(n[4]=function(e){return l.onPaste(e)})},v(v({},e.inputProps),e.ptm("input"))),null,16,O)],16)],16,k)],16)},h}(primevue.icons.timescircle,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);

package/colorpicker/BaseColorPicker.vue

@@ -0,0 +1,89 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-colorpicker-panel .p-colorpicker-color {
+    background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
+}
+
+.p-colorpicker-panel .p-colorpicker-hue {
+    background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
+}
+`;
+
+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 } = useStyle(styles, { name: 'colorpicker', 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,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/colorpicker/ColorPicker.d.ts

@@ -7,6 +7,7 @@
  * @module colorpicker
  *
  */
+import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export declare type ColorPickerPassThroughOptionType = ColorPickerPassThroughAttributes | ((options: ColorPickerPassThroughMethodOptions) => ColorPickerPassThroughAttributes) | null | undefined;
@@ -15,6 +16,7 @@ export declare type ColorPickerPassThroughOptionType = ColorPickerPassThroughAtt
  * Custom passthrough(pt) option method.
  */
 export interface ColorPickerPassThroughMethodOptions {
+    instance: any;
     props: ColorPickerProps;
     state: ColorPickerState;
 }
@@ -66,7 +68,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 +76,12 @@ export interface ColorPickerPassThroughOptions {
     /**
      * Uses to pass attributes to the hue handler's DOM element.
      */
-    hueHandler?: ColorPickerPassThroughOptionType;
+    hueHandle: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -151,6 +158,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 {}

package/colorpicker/ColorPicker.vue

@@ -1,17 +1,17 @@
 <template>
-    <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')" />
+    <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">
-                <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 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')">
+                            <div :class="cx('color')" v-bind="ptm('color')">
+                                <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="hueHandleRef" class="p-colorpicker-hue-handle" v-bind="ptm('hueHandler')"></div>
+                        <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="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: {
@@ -444,7 +444,8 @@ export default {
 
             this.colorDragging = true;
             this.pickColor(event);
-            DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
+            this.$el.setAttribute('p-colorpicker-dragging', 'true');
+            !this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
             event.preventDefault();
         },
         onDrag(event) {
@@ -461,7 +462,8 @@ export default {
         onDragEnd() {
             this.colorDragging = false;
             this.hueDragging = false;
-            DomHandler.removeClass(this.$el, 'p-colorpicker-dragging');
+            this.$el.setAttribute('p-colorpicker-dragging', 'false');
+            !this.isUnstyled && DomHandler.removeClass(this.$el, 'p-colorpicker-dragging');
             this.unbindDragListeners();
         },
         onHueMousedown(event) {
@@ -479,7 +481,7 @@ export default {
 
             this.hueDragging = true;
             this.pickHue(event);
-            DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
+            !this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
         },
         isInputClicked(event) {
             return this.$refs.input && this.$refs.input.isSameNode(event.target);
@@ -595,26 +597,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
     }