primevue 3.22.4 → 3.24.0

package/cascadeselect/CascadeSelect.d.ts

@@ -1,16 +1,19 @@
+/**
+ *
+ * CascadeSelect is a form component to select a value from a nested structure of options.
+ *
+ * [Live Demo](https://www.primevue.org/cascadeselect/)
+ *
+ * @module cascadeselect
+ *
+ */
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type CascadeSelectOptionLabelType = string | ((data: any) => string) | undefined;
-
-type CascadeSelectOptionValueType = string | ((data: any) => any) | undefined;
-
-type CascadeSelectOptionDisabledType = string | ((data: any) => boolean) | undefined;
-
-type CascadeSelectOptionChildrenType = string[] | string | ((data: any) => any[]) | undefined;
-
-type CascadeSelectAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
-
+/**
+ * Custom change event
+ * @see {@link CascadeSelectEmits.change}
+ */
 export interface CascadeSelectChangeEvent {
     /**
      * Original event.
@@ -23,10 +26,14 @@ export interface CascadeSelectChangeEvent {
 }
 
 /**
+ * @see {@link CascadeSelectEmits.change}
  * @extends CascadeSelectChangeEvent
  */
 export interface CascadeSelectGroupChangeEvent extends CascadeSelectChangeEvent {}
 
+/**
+ * Defines valid properties in CascadeSelect component.
+ */
 export interface CascadeSelectProps {
     /**
      * Value of the component.
@@ -38,35 +45,31 @@ export interface CascadeSelectProps {
     options?: any[] | undefined;
     /**
      * Property name or getter function to use as the label of an option.
-     * @see CascadeSelectOptionLabelType
      */
-    optionLabel?: CascadeSelectOptionLabelType;
+    optionLabel?: string | ((data: any) => string) | undefined;
     /**
      * Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
-     * @see CascadeSelectOptionValueType
      */
-    optionValue?: CascadeSelectOptionValueType;
+    optionValue?: string | ((data: any) => any) | undefined;
     /**
      * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
-     * @see CascadeSelectOptionDisabledType
      */
-    optionDisabled?: CascadeSelectOptionDisabledType;
+    optionDisabled?: string | ((data: any) => boolean) | undefined;
     /**
      * Property name or getter function to use as the label of an option group.
-     * @see CascadeSelectOptionLabelType
      */
-    optionGroupLabel?: CascadeSelectOptionLabelType;
+    optionGroupLabel?: string | ((data: any) => string) | undefined;
     /**
      * Property name or getter function to retrieve the items of a group.
-     * @see CascadeSelectOptionChildrenType
      */
-    optionGroupChildren?: CascadeSelectOptionChildrenType;
+    optionGroupChildren?: string[] | string | ((data: any) => any[]) | undefined;
     /**
      * Default text to display when no option is selected.
      */
     placeholder?: string | undefined;
     /**
      * When present, it specifies that the component should be disabled.
+     * @defaultValue false
      */
     disabled?: boolean | undefined;
     /**
@@ -103,37 +106,37 @@ export interface CascadeSelectProps {
     panelProps?: HTMLAttributes | undefined;
     /**
      * 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 CascadeSelectAppendToType
-     * Default value is 'body'.
+     * @defaultValue body
      */
-    appendTo?: CascadeSelectAppendToType;
+    appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
     /**
      * Whether the dropdown is in loading state.
+     * @defaultValue false
      */
     loading?: boolean | undefined;
     /**
      * Icon to display in the dropdown.
-     * Default value is 'pi pi-chevron-down'.
+     * @defaultValue pi pi-chevron-down
      */
     dropdownIcon?: string | undefined;
     /**
      * Icon to display in loading state.
-     * Default value is 'pi pi-spinner pi-spin'.
+     * @defaultValue pi pi-spinner pi-spin
      */
     loadingIcon?: string | undefined;
     /**
      * Icon to display in the option group.
-     * Default value is 'pi pi-angle-right'.
+     * @defaultValue pi pi-angle-right
      */
     optionGroupIcon?: string | undefined;
     /**
      * Whether to focus on the first visible or selected element when the overlay panel is shown.
-     * Default value is true.
+     * @defaultValue true
      */
     autoOptionFocus?: boolean | undefined;
     /**
      * When enabled, the focused option is selected/opened.
-     * Default value is false.
+     * @defaultValue false
      */
     selectOnFocus?: boolean | undefined;
     /**
@@ -142,27 +145,27 @@ export interface CascadeSelectProps {
     searchLocale?: string | undefined;
     /**
      * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
-     * Default value is '{0} results are available'.
+     * @defaultValue '{0} results are available'
      */
     searchMessage?: string | undefined;
     /**
      * Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.
-     * Default value is '{0} items selected'.
+     * @defaultValue '{0} items selected'
      */
     selectionMessage?: string | undefined;
     /**
      * Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.
-     * Default value is 'No selected item'.
+     * @defaultValue No selected item
      */
     emptySelectionMessage?: string | undefined;
     /**
      * Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
-     * Default value is 'No results found'.
+     * @defaultValue No results found
      */
     emptySearchMessage?: string | undefined;
     /**
      * Text to be displayed when there are no options available. Defaults to value from PrimeVue locale configuration.
-     * Default value is 'No available options'.
+     * @defaultValue No available options
      */
     emptyMessage?: string | undefined;
     /**
@@ -179,22 +182,25 @@ export interface CascadeSelectProps {
     'aria-label'?: string | undefined;
 }
 
+/**
+ * Defines valid slots in CascadeSelect component.
+ */
 export interface CascadeSelectSlots {
     /**
      * Custom content for each option.
      * @param {Object} scope - option slot's params.
      */
-    option: (scope: {
+    option(scope: {
         /**
          * Option instance
          */
         option: any;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom value template.
      * @param {CascadeSelectValueSlot} scope - value slot's params.
      */
-    value: (scope: {
+    value(scope: {
         /**
          * Value of the component
          */
@@ -203,62 +209,76 @@ export interface CascadeSelectSlots {
          * Placeholder text to show
          */
         placeholder: string;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom indicator template.
      */
-    indicator: () => VNode[];
+    indicator(): VNode[];
 }
 
-export declare type CascadeSelectEmits = {
+/**
+ * Defines valid emits in CascadeSelect component.
+ */
+export interface CascadeSelectEmits {
     /**
      * Emitted when the value changes.
      * @param {*} value - New value.
      */
-    'update:modelValue': (value: any) => void;
+    'update:modelValue'(value: any): void;
     /**
      * Callback to invoke on value change.
      * @param { CascadeSelectChangeEvent } event - Custom change event.
      */
-    change: (event: CascadeSelectChangeEvent) => void;
+    change(event: CascadeSelectChangeEvent): void;
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
      */
-    focus: (event: Event) => void;
+    focus(event: Event): void;
     /**
      * Callback to invoke when the component loses focus.
      * @param {Event} event - Browser event.
      */
-    blur: (event: Event) => void;
+    blur(event: Event): void;
     /**
      * Callback to invoke on click.
      * @param { Event } event - Browser event.
      */
-    click: (event: Event) => void;
+    click(event: Event): void;
     /**
      * Callback to invoke when a group changes.
      * @param { CascadeSelectGroupChangeEvent } event - Custom change event.
      */
-    'group-change': (event: CascadeSelectGroupChangeEvent) => void;
+    'group-change'(event: CascadeSelectGroupChangeEvent): void;
     /**
      * Callback to invoke before the overlay is shown.
      */
-    'before-show': () => void;
+    'before-show'(): void;
     /**
      * Callback to invoke before the overlay is hidden.
      */
-    'before-hide': () => void;
+    'before-hide'(): void;
     /**
      * Callback to invoke when the overlay is shown.
      */
-    show: () => void;
+    show(): void;
     /**
      * Callback to invoke when the overlay is hidden.
      */
-    hide: () => void;
-};
+    hide(): void;
+}
 
+/**
+ * **PrimeVue - CascadeSelect**
+ *
+ * _CascadeSelect is a form component to select a value from a nested structure of options._
+ *
+ * [Live Demo](https://www.primevue.org/cascadeselect/)
+ * --- ---
+ * ![PrimeVue(https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
 declare class CascadeSelect extends ClassComponent<CascadeSelectProps, CascadeSelectSlots, CascadeSelectEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -267,13 +287,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * CascadeSelect displays a nested structure of options.
- *
- * Demos:
- *
- * - [CascadeSelect](https://www.primefaces.org/primevue/cascadeselect)
- *
- */
 export default CascadeSelect;

package/chart/Chart.d.ts

@@ -1,6 +1,19 @@
+/**
+ *
+ * Chart groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/chart/)
+ *
+ * @module chart
+ *
+ */
 import { CanvasHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Custom select event.
+ * @see {@link ChartEmits.select}
+ */
 export interface ChartSelectEvent {
     /**
      * Browser event.
@@ -16,6 +29,9 @@ export interface ChartSelectEvent {
     dataset: any;
 }
 
+/**
+ * Defines valid properties in Chart component.
+ */
 export interface ChartProps {
     /**
      * Type of the chart.
@@ -35,12 +51,12 @@ export interface ChartProps {
     plugins?: any;
     /**
      * Width of the chart in non-responsive mode.
-     * Default value is 300.
+     * @defaultValue 300
      */
     width?: number | undefined;
     /**
      * Height of the chart in non-responsive mode.
-     * Default value is 150.
+     * @defaultValue 150
      */
     height?: number | undefined;
     /**
@@ -51,44 +67,59 @@ export interface ChartProps {
 
 export interface ChartSlots {}
 
-export declare type ChartEmits = {
+/**
+ * Defines valid emits in Chart component.
+ */
+export interface ChartEmits {
     /**
      * Callback to invoke when a tab gets expanded.
      * @param {ChartSelectEvent} event - Custom select event.
      */
-    select: (event: ChartSelectEvent) => void;
+    select(event: ChartSelectEvent): void;
     /**
      * Callback to invoke when chart is loaded.
      * @param {*} chart - Chart instance.
      */
-    loaded: (chart: any) => void;
-};
+    loaded(chart: any): void;
+}
 
+/**
+ * **PrimeVue - Chart**
+ *
+ * _Chart groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primevue.org/chart/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class Chart extends ClassComponent<ChartProps, ChartSlots, ChartEmits> {
     /**
      * Redraws the graph.
      *
      * @memberof Chart
      */
-    refresh: () => void;
+    refresh(): void;
     /**
      * Destroys the graph first and then creates it again.
      *
      * @memberof Chart
      */
-    reinit: () => void;
+    reinit(): void;
     /**
      * Returns an HTML string of a legend for that chart. The legend is generated from the legendCallback in the options.
      *
      * @memberof Chart
      */
-    generateLegend: () => string | any;
+    generateLegend(): string | any;
     /**
      * Returns Chart instance.
      *
      * @memberof Chart
      */
-    getChart: () => any;
+    getChart(): any;
 }
 
 declare module '@vue/runtime-core' {
@@ -97,17 +128,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Chart components are based on Charts.js, an open source HTML5 based charting library.
- *
- * Helper API;
- *
- * - [Chart.js](https://www.chartjs.org/)
- *
- * Demos:
- *
- * - [Chart](https://www.primefaces.org/primevue/chart)
- *
- */
 export default Chart;

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);