primevue 3.23.0 → 3.24.0

package/checkbox/Checkbox.d.ts

@@ -1,6 +1,18 @@
+/**
+ *
+ * Checkbox is an extension to standard checkbox element with theming.
+ *
+ * [Live Demo](https://www.primevue.org/checkbox/)
+ *
+ * @module checkbox
+ *
+ */
 import { InputHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Defines valid properties in Checkbox component.
+ */
 export interface CheckboxProps {
     /**
      * Value of the checkbox.
@@ -16,18 +28,22 @@ export interface CheckboxProps {
     name?: string | undefined;
     /**
      * Allows to select a boolean value instead of multiple values.
+     * @default false
      */
     binary?: boolean;
     /**
      * When present, it specifies that the element should be disabled.
+     * @default false
      */
     disabled?: boolean | undefined;
     /**
      * When present, it specifies that an input field is read-only.
+     * @default false
      */
     readonly?: boolean | undefined;
     /**
      * When present, it specifies that the element is required.
+     * @default false
      */
     required?: boolean | undefined;
     /**
@@ -36,10 +52,12 @@ export interface CheckboxProps {
     tabindex?: number | undefined;
     /**
      * Value in checked state.
+     * @default true
      */
     trueValue?: any;
     /**
      * Value in unchecked state.
+     * @default false
      */
     falseValue?: any;
     /**
@@ -70,29 +88,44 @@ export interface CheckboxProps {
 
 export interface CheckboxSlots {}
 
-export declare type CheckboxEmits = {
+/**
+ * Defines valid emits in Checkbox component.
+ */
+export interface CheckboxEmits {
     /**
      * Emitted when the page changes.
      * @param {*} value - New page value.
      */
-    'update:page': (value: any) => void;
+    'update:page'(value: any): void;
     /**
      * Callback to invoke on value click.
      * @param {MouseEvent} event - Browser event.
      */
-    click: (event: MouseEvent) => void;
+    click(event: MouseEvent): void;
     /**
      * Callback to invoke on value change.
      * @param {Event} event - Browser event.
      */
-    change: (event: Event) => void;
+    change(event: Event): void;
     /**
      * Callback to invoke on value change.
      * @param {boolean} value - New value.
      */
-    input: (value: boolean) => void;
-};
+    input(value: boolean): void;
+}
 
+/**
+ * **PrimeVue - Checkbox**
+ *
+ * _Accordion groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primevue.org/checkbox/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class Checkbox extends ClassComponent<CheckboxProps, CheckboxSlots, CheckboxEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -101,13 +134,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Checkbox is an extension to standard checkbox element with theming.
- *
- * Demos:
- *
- * - [Checkbox](https://www.primefaces.org/primevue/checkbox)
- *
- */
 export default Checkbox;

package/checkbox/Checkbox.vue

@@ -95,7 +95,7 @@ export default {
     },
     methods: {
         onClick(event) {
-            if (!this.disabled) {
+            if (!this.disabled && !this.readonly) {
                 let newModelValue;
 
                 if (this.binary) {

package/checkbox/checkbox.cjs.js

@@ -70,7 +70,7 @@ var script = {
     },
     methods: {
         onClick(event) {
-            if (!this.disabled) {
+            if (!this.disabled && !this.readonly) {
                 let newModelValue;
 
                 if (this.binary) {

package/checkbox/checkbox.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),l=require("vue"),t={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.ObjectUtils.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const a={class:"p-hidden-accessible"},i=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];t.render=function(e,t,u,s,n,d){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(d.containerClass),onClick:t[2]||(t[2]=e=>d.onClick(e))},[l.createElementVNode("div",a,[l.createElementVNode("input",l.mergeProps({ref:"input",id:u.inputId,type:"checkbox",value:u.value,name:u.name,checked:d.checked,tabindex:u.tabindex,disabled:u.disabled,readonly:u.readonly,required:u.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>d.onFocus(e)),onBlur:t[1]||(t[1]=e=>d.onBlur(e))},u.inputProps),null,16,i)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-checkbox-box",u.inputClass,{"p-highlight":d.checked,"p-disabled":u.disabled,"p-focus":n.focused}]),style:l.normalizeStyle(u.inputStyle)},[l.createElementVNode("span",{class:l.normalizeClass(["p-checkbox-icon",{"pi pi-check":d.checked}])},null,2)],6)],2)},module.exports=t;
+"use strict";var e=require("primevue/utils"),l=require("vue"),t={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.ObjectUtils.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const a={class:"p-hidden-accessible"},i=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];t.render=function(e,t,u,s,n,d){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(d.containerClass),onClick:t[2]||(t[2]=e=>d.onClick(e))},[l.createElementVNode("div",a,[l.createElementVNode("input",l.mergeProps({ref:"input",id:u.inputId,type:"checkbox",value:u.value,name:u.name,checked:d.checked,tabindex:u.tabindex,disabled:u.disabled,readonly:u.readonly,required:u.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>d.onFocus(e)),onBlur:t[1]||(t[1]=e=>d.onBlur(e))},u.inputProps),null,16,i)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-checkbox-box",u.inputClass,{"p-highlight":d.checked,"p-disabled":u.disabled,"p-focus":n.focused}]),style:l.normalizeStyle(u.inputStyle)},[l.createElementVNode("span",{class:l.normalizeClass(["p-checkbox-icon",{"pi pi-check":d.checked}])},null,2)],6)],2)},module.exports=t;

package/checkbox/checkbox.esm.js

@@ -68,7 +68,7 @@ var script = {
     },
     methods: {
         onClick(event) {
-            if (!this.disabled) {
+            if (!this.disabled && !this.readonly) {
                 let newModelValue;
 
                 if (this.binary) {

package/checkbox/checkbox.esm.min.js

@@ -1 +1 @@
-import{ObjectUtils as e}from"primevue/utils";import{openBlock as l,createElementBlock as t,normalizeClass as a,createElementVNode as i,mergeProps as u,normalizeStyle as d}from"vue";var s={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const n={class:"p-hidden-accessible"},c=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];s.render=function(e,s,o,r,h,p){return l(),t("div",{class:a(p.containerClass),onClick:s[2]||(s[2]=e=>p.onClick(e))},[i("div",n,[i("input",u({ref:"input",id:o.inputId,type:"checkbox",value:o.value,name:o.name,checked:p.checked,tabindex:o.tabindex,disabled:o.disabled,readonly:o.readonly,required:o.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:s[0]||(s[0]=e=>p.onFocus(e)),onBlur:s[1]||(s[1]=e=>p.onBlur(e))},o.inputProps),null,16,c)]),i("div",{ref:"box",class:a(["p-checkbox-box",o.inputClass,{"p-highlight":p.checked,"p-disabled":o.disabled,"p-focus":h.focused}]),style:d(o.inputStyle)},[i("span",{class:a(["p-checkbox-icon",{"pi pi-check":p.checked}])},null,2)],6)],2)};export{s as default};
+import{ObjectUtils as e}from"primevue/utils";import{openBlock as l,createElementBlock as t,normalizeClass as a,createElementVNode as i,mergeProps as u,normalizeStyle as d}from"vue";var s={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const n={class:"p-hidden-accessible"},c=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];s.render=function(e,s,o,r,h,p){return l(),t("div",{class:a(p.containerClass),onClick:s[2]||(s[2]=e=>p.onClick(e))},[i("div",n,[i("input",u({ref:"input",id:o.inputId,type:"checkbox",value:o.value,name:o.name,checked:p.checked,tabindex:o.tabindex,disabled:o.disabled,readonly:o.readonly,required:o.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:s[0]||(s[0]=e=>p.onFocus(e)),onBlur:s[1]||(s[1]=e=>p.onBlur(e))},o.inputProps),null,16,c)]),i("div",{ref:"box",class:a(["p-checkbox-box",o.inputClass,{"p-highlight":p.checked,"p-disabled":o.disabled,"p-focus":h.focused}]),style:d(o.inputStyle)},[i("span",{class:a(["p-checkbox-icon",{"pi pi-check":p.checked}])},null,2)],6)],2)};export{s as default};

package/checkbox/checkbox.js

@@ -69,7 +69,7 @@ this.primevue.checkbox = (function (utils, vue) {
         },
         methods: {
             onClick(event) {
-                if (!this.disabled) {
+                if (!this.disabled && !this.readonly) {
                     let newModelValue;
 
                     if (this.binary) {

package/checkbox/checkbox.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.checkbox=function(e,l){"use strict";var t={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.ObjectUtils.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const a={class:"p-hidden-accessible"},i=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];return t.render=function(e,t,u,s,n,d){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(d.containerClass),onClick:t[2]||(t[2]=e=>d.onClick(e))},[l.createElementVNode("div",a,[l.createElementVNode("input",l.mergeProps({ref:"input",id:u.inputId,type:"checkbox",value:u.value,name:u.name,checked:d.checked,tabindex:u.tabindex,disabled:u.disabled,readonly:u.readonly,required:u.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>d.onFocus(e)),onBlur:t[1]||(t[1]=e=>d.onBlur(e))},u.inputProps),null,16,i)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-checkbox-box",u.inputClass,{"p-highlight":d.checked,"p-disabled":u.disabled,"p-focus":n.focused}]),style:l.normalizeStyle(u.inputStyle)},[l.createElementVNode("span",{class:l.normalizeClass(["p-checkbox-icon",{"pi pi-check":d.checked}])},null,2)],6)],2)},t}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.checkbox=function(e,l){"use strict";var t={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.ObjectUtils.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const a={class:"p-hidden-accessible"},i=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];return t.render=function(e,t,u,s,n,d){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(d.containerClass),onClick:t[2]||(t[2]=e=>d.onClick(e))},[l.createElementVNode("div",a,[l.createElementVNode("input",l.mergeProps({ref:"input",id:u.inputId,type:"checkbox",value:u.value,name:u.name,checked:d.checked,tabindex:u.tabindex,disabled:u.disabled,readonly:u.readonly,required:u.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>d.onFocus(e)),onBlur:t[1]||(t[1]=e=>d.onBlur(e))},u.inputProps),null,16,i)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-checkbox-box",u.inputClass,{"p-highlight":d.checked,"p-disabled":u.disabled,"p-focus":n.focused}]),style:l.normalizeStyle(u.inputStyle)},[l.createElementVNode("span",{class:l.normalizeClass(["p-checkbox-icon",{"pi pi-check":d.checked}])},null,2)],6)],2)},t}(primevue.utils,Vue);

package/chip/Chip.d.ts

@@ -1,6 +1,18 @@
+/**
+ *
+ * Chip represents people using icons, labels and images.
+ *
+ * [Live Demo](https://www.primevue.org/chip)
+ *
+ * @module chip
+ *
+ */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Defines valid properties in Chip component.
+ */
 export interface ChipProps {
     /**
      * Defines the text to display.
@@ -16,30 +28,48 @@ export interface ChipProps {
     image?: string;
     /**
      * Whether to display a remove icon.
+     * @defaultValue false
      */
     removable?: boolean;
     /**
      * Icon of the remove element.
-     * Default value is 'pi pi-times-circle'.
+     * @defaultValue pi pi-times-circle
      */
     removeIcon?: string;
 }
 
+/**
+ * Defines valid slots in Chip component.
+ */
 export interface ChipSlots {
     /**
      * Content can easily be customized with the default slot instead of using the built-in modes.
      */
-    default: () => VNode[];
+    default(): VNode[];
 }
 
-export declare type ChipEmits = {
+/**
+ * Defines valid properties in Chip component.
+ */
+export interface ChipEmits {
     /**
      * Callback to invoke when a chip is removed.
      * @param {Event} event - Browser event.
      */
-    remove: (event: Event) => void;
-};
+    remove(event: Event): void;
+}
 
+/**
+ * **PrimeVue - Chip**
+ *
+ * _Chip represents people using icons, labels and images._
+ *
+ * [Live Demo](https://www.primevue.org/chip/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
 declare class Chip extends ClassComponent<ChipProps, ChipSlots, ChipEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -48,13 +78,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Chip represents entities using icons, labels and images.
- *
- * Demos:
- *
- * - [Chip](https://www.primefaces.org/primevue/chip)
- *
- */
 export default Chip;

package/chips/Chips.d.ts

@@ -1,6 +1,19 @@
+/**
+ *
+ * Chips groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/chips/)
+ *
+ * @module chips
+ *
+ */
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Custom add event.
+ * @see {@link ChipsEmits.add}
+ */
 export interface ChipsAddEvent {
     /**
      * Browser event.
@@ -13,10 +26,15 @@ export interface ChipsAddEvent {
 }
 
 /**
+ * Custom remove event.
+ * @see {@link ChipsEmits.remove}
  * @extends ChipsAddEvent
  */
 export interface ChipsRemoveEvent extends ChipsAddEvent {}
 
+/**
+ * Defines valid properties in Chips component.
+ */
 export interface ChipsProps {
     /**
      * Value of the component.
@@ -32,7 +50,7 @@ export interface ChipsProps {
     addOnBlur?: boolean | undefined;
     /**
      * Whether to allow duplicate values or not.
-     * Default value is true.
+     * @defaultValue true.
      */
     allowDuplicate?: boolean | undefined;
     /**
@@ -57,7 +75,7 @@ export interface ChipsProps {
     inputProps?: InputHTMLAttributes | undefined;
     /**
      * Icon to display in chip remove action.
-     * Default value is 'pi pi-times-circle'.
+     * @defaultValue pi pi-times-circle
      */
     removeTokenIcon?: string | undefined;
     /**
@@ -77,38 +95,54 @@ export interface ChipsProps {
      */
     'aria-label'?: string | undefined;
 }
-
+/**
+ * Defines valid slots in Chips slots.
+ */
 export interface ChipsSlots {
     /**
      * Custom chip template.
      * @param {Object} scope - chip slot's params.
      */
-    chip: (scope: {
+    chip(scope: {
         /**
          * Value of the component
          */
         value: any;
-    }) => VNode[];
+    }): VNode[];
 }
-
-export declare type ChipsEmits = {
+/**
+ * Defines valid emits in Chips component.
+ */
+export interface ChipsEmits {
     /**
      * Emitted when the value changes.
      * @param {*} value - New value.
      */
-    'update:modelValue': (value: any[]) => void;
+    'update:modelValue'(value: any[]): void;
     /**
      * Callback to invoke when a chip is added.
      * @param {ChipsAddEvent} event - Custom add event.
      */
-    add: (event: ChipsAddEvent) => void;
+    add(event: ChipsAddEvent): void;
     /**
      * Callback to invoke when a chip is removed.
      * @param {ChipsRemoveEvent} event - Custom remove event.
      */
-    remove: (event: ChipsRemoveEvent) => void;
-};
+    remove(event: ChipsRemoveEvent): void;
+}
 
+/**
+ * **PrimeVue - Chips**
+ *
+ * _Chips is used to enter multiple values on an input field._
+ *
+ * [Live Demo](https://www.primevue.org/chips/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class Chips extends ClassComponent<ChipsProps, ChipsSlots, ChipsEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -117,13 +151,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Chips is used to enter multiple values on an input field.
- *
- * Demos:
- *
- * - [Chips](https://www.primefaces.org/primevue/chips)
- *
- */
 export default Chips;

package/colorpicker/ColorPicker.d.ts

@@ -1,9 +1,18 @@
+/**
+ *
+ * ColorPicker groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/colorpicker/)
+ *
+ * @module colorpicker
+ *
+ */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type ColorPickerFormatType = 'hex' | 'rgb' | 'hsb' | undefined;
-
-type ColorPickerAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
-
+/**
+ * Custom change event.
+ * @see {@link ColorPickerEmits.change}
+ */
 export interface ColorPickerChangeEvent {
     /**
      * Browser event
@@ -15,6 +24,9 @@ export interface ColorPickerChangeEvent {
     value: any;
 }
 
+/**
+ * Defines valid properties in ColorPicker component.
+ */
 export interface ColorPickerProps {
     /**
      * Value of the component.
@@ -22,21 +34,22 @@ export interface ColorPickerProps {
     modelValue?: any;
     /**
      * Initial color to display when value is not defined.
-     * Default value is ff0000.
+     * @defaultValue ff0000
      */
     defaultColor?: any;
     /**
      * Whether to display as an overlay or not.
+     * @defaultValue false
      */
     inline?: boolean | undefined;
     /**
      * Format to use in value binding, supported formats are 'hex', 'rgb' and 'hsb'.
-     * @see ColorPickerFormatType
-     * Default value is 'hex'.
+     * @defaultValue hex
      */
-    format?: ColorPickerFormatType;
+    format?: 'hex' | 'rgb' | 'hsb' | undefined;
     /**
      * When present, it specifies that the component should be disabled.
+     * @defaultValue false
      */
     disabled?: boolean | undefined;
     /**
@@ -45,12 +58,12 @@ export interface ColorPickerProps {
     tabindex?: string | undefined;
     /**
      * Whether to automatically manage layering.
-     * Default value is true.
+     * @defaultValue true
      */
     autoZIndex?: boolean | undefined;
     /**
      * Base zIndex value to use in layering.
-     * Default value is 0.
+     * @defaultValue 0
      */
     baseZIndex?: number | undefined;
     /**
@@ -59,35 +72,49 @@ export interface ColorPickerProps {
     panelClass?: any;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
-     * @see ColorPickerAppendToType
-     * Default value is 'body'.
+     * @defaultValue body
      */
-    appendTo?: ColorPickerAppendToType;
+    appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
 }
 
 export interface ColorPickerSlots {}
 
-export declare type ColorPickerEmits = {
+/**
+ * Defines valid emits in ColorPicker component.
+ */
+export interface ColorPickerEmits {
     /**
      * Emitted when the value changes.
      * @param {*} value - New value.
      */
-    'update:modelValue': (value: any) => void;
+    'update:modelValue'(value: any): void;
     /**
      * Callback to invoke when a chip is added.
      * @param {ColorPickerChangeEvent} event - Custom add event.
      */
-    change: (event: ColorPickerChangeEvent) => void;
+    change(event: ColorPickerChangeEvent): void;
     /**
      * Callback to invoke when input is cleared by the user.
      */
-    show: () => void;
+    show(): void;
     /**
      * Callback to invoke when input is cleared by the user.
      */
-    hide: () => void;
-};
+    hide(): void;
+}
 
+/**
+ * **PrimeVue - ColorPicker**
+ *
+ * _ColorPicker groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primevue.org/colorpicker/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class ColorPicker extends ClassComponent<ColorPickerProps, ColorPickerSlots, ColorPickerEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -96,13 +123,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * ColorPicker is an input component to select a color.
- *
- * Demos:
- *
- * - [ColorPicker](https://www.primefaces.org/primevue/colorpicker)
- *
- */
 export default ColorPicker;