primevue 3.15.0 → 3.16.2

package/tristatecheckbox/TriStateCheckbox.d.ts

@@ -6,13 +6,29 @@ export interface TriStateCheckboxProps {
      */
     modelValue?: Nullable<boolean>;
     /**
-     * 	Inline style of the component.
+     * When present, it specifies that the component should be disabled.
      */
-    style?: any;
+    disabled?: boolean | undefined;
     /**
-     * Style class of the component.
+     * Index of the element in tabbing order.
      */
-    class?: any;
+    tabindex?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+     */
+    inputProps?: HTMLInputElement | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+      * Establishes a string value that labels the component.
+      */
+    'aria-label'?: string | undefined;
 }
 
 export interface TriStateCheckboxSlots {

package/tristatecheckbox/TriStateCheckbox.vue

@@ -1,9 +1,11 @@
 <template>
-    <div :class="containerClass" @click="onClick($event)" :style="style">
+    <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="input" type="checkbox" :checked="modelValue === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()">
+            <input :id="inputId" ref="input" type="checkbox" :checked="modelValue === true" :tabindex="tabindex" :disabled="disabled" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
+                @keydown="onKeyDown($event)" @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps" >
         </div>
-        <div ref="box" :class="['p-checkbox-box', {'p-highlight': (modelValue != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="modelValue === true">
+        <span class="p-sr-only" aria-live="polite">{{ariaValueLabel}}</span>
+        <div ref="box" :class="['p-checkbox-box', {'p-highlight': (modelValue != null), 'p-disabled': disabled, 'p-focus': focused}]" >
             <span :class="['p-checkbox-icon', icon]"></span>
         </div>
     </div>
@@ -12,12 +14,27 @@
 <script>
 export default {
     name: 'TriStateCheckbox',
-    inheritAttrs: false,
-    emits: ['click', 'update:modelValue', 'change'],
+    emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
     props: {
         modelValue: null,
-        class: null,
-        style: null
+        inputId: null,
+        inputProps: null,
+        disabled: {
+			type: Boolean,
+			default: false
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -25,8 +42,8 @@ export default {
         };
     },
     methods: {
-        onClick(event) {
-            if (!this.$attrs.disabled) {
+        updateModel() {
+            if (!this.disabled) {
                 let newValue;
 
                 switch (this.modelValue) {
@@ -43,17 +60,29 @@ export default {
                     break;
                 }
 
-                this.$emit('click', event);
                 this.$emit('update:modelValue', newValue);
-                this.$emit('change', event);
-                this.$refs.input.focus();
             }
         },
-        onFocus() {
+        onClick(event) {
+            this.updateModel();
+            this.$emit('click', event);
+            this.$emit('change', event);
+            this.$refs.input.focus();
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter') {
+                this.updateModel();
+                this.$emit('keydown', event);
+                event.preventDefault();
+            }
+        },
+        onFocus(event) {
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -76,7 +105,15 @@ export default {
             return icon;
         },
         containerClass() {
-            return ['p-checkbox p-component', this.class, {'p-checkbox-checked': this.modelValue === true, 'p-checkbox-disabled': this.$attrs.disabled, 'p-checkbox-focused': this.focused}];
+            return [
+                'p-checkbox p-component', {
+                    'p-checkbox-checked': this.modelValue === true,
+                    'p-checkbox-disabled': this.disabled,
+                    'p-checkbox-focused': this.focused
+            }];
+        },
+        ariaValueLabel() {
+            return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : (this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel);
         }
     }
 }

package/tristatecheckbox/tristatecheckbox.cjs.js

@@ -4,12 +4,27 @@ var vue = require('vue');
 
 var script = {
     name: 'TriStateCheckbox',
-    inheritAttrs: false,
-    emits: ['click', 'update:modelValue', 'change'],
+    emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
     props: {
         modelValue: null,
-        class: null,
-        style: null
+        inputId: null,
+        inputProps: null,
+        disabled: {
+			type: Boolean,
+			default: false
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -17,8 +32,8 @@ var script = {
         };
     },
     methods: {
-        onClick(event) {
-            if (!this.$attrs.disabled) {
+        updateModel() {
+            if (!this.disabled) {
                 let newValue;
 
                 switch (this.modelValue) {
@@ -35,17 +50,29 @@ var script = {
                     break;
                 }
 
-                this.$emit('click', event);
                 this.$emit('update:modelValue', newValue);
-                this.$emit('change', event);
-                this.$refs.input.focus();
             }
         },
-        onFocus() {
+        onClick(event) {
+            this.updateModel();
+            this.$emit('click', event);
+            this.$emit('change', event);
+            this.$refs.input.focus();
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter') {
+                this.updateModel();
+                this.$emit('keydown', event);
+                event.preventDefault();
+            }
+        },
+        onFocus(event) {
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -68,42 +95,56 @@ var script = {
             return icon;
         },
         containerClass() {
-            return ['p-checkbox p-component', this.class, {'p-checkbox-checked': this.modelValue === true, 'p-checkbox-disabled': this.$attrs.disabled, 'p-checkbox-focused': this.focused}];
+            return [
+                'p-checkbox p-component', {
+                    'p-checkbox-checked': this.modelValue === true,
+                    'p-checkbox-disabled': this.disabled,
+                    'p-checkbox-focused': this.focused
+            }];
+        },
+        ariaValueLabel() {
+            return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : (this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel);
         }
     }
 };
 
 const _hoisted_1 = { class: "p-hidden-accessible" };
-const _hoisted_2 = ["checked"];
-const _hoisted_3 = ["aria-checked"];
+const _hoisted_2 = ["id", "checked", "tabindex", "disabled", "aria-labelledby", "aria-label"];
+const _hoisted_3 = {
+  class: "p-sr-only",
+  "aria-live": "polite"
+};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass($options.containerClass),
-    onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event))),
-    style: vue.normalizeStyle($props.style)
+    onClick: _cache[3] || (_cache[3] = $event => ($options.onClick($event)))
   }, [
     vue.createElementVNode("div", _hoisted_1, [
       vue.createElementVNode("input", vue.mergeProps({
+        id: $props.inputId,
         ref: "input",
         type: "checkbox",
-        checked: $props.modelValue === true
-      }, _ctx.$attrs, {
-        onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus())),
-        onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur()))
-      }), null, 16, _hoisted_2)
+        checked: $props.modelValue === true,
+        tabindex: $props.tabindex,
+        disabled: $props.disabled,
+        "aria-labelledby": _ctx.ariaLabelledby,
+        "aria-label": _ctx.ariaLabel,
+        onKeydown: _cache[0] || (_cache[0] = $event => ($options.onKeyDown($event))),
+        onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
+        onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event)))
+      }, $props.inputProps), null, 16, _hoisted_2)
     ]),
+    vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($options.ariaValueLabel), 1),
     vue.createElementVNode("div", {
       ref: "box",
-      class: vue.normalizeClass(['p-checkbox-box', {'p-highlight': ($props.modelValue != null), 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
-      role: "checkbox",
-      "aria-checked": $props.modelValue === true
+      class: vue.normalizeClass(['p-checkbox-box', {'p-highlight': ($props.modelValue != null), 'p-disabled': $props.disabled, 'p-focus': $data.focused}])
     }, [
       vue.createElementVNode("span", {
         class: vue.normalizeClass(['p-checkbox-icon', $options.icon])
       }, null, 2)
-    ], 10, _hoisted_3)
-  ], 6))
+    ], 2)
+  ], 2))
 }
 
 script.render = render;

package/tristatecheckbox/tristatecheckbox.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),l={name:"TriStateCheckbox",inheritAttrs:!1,emits:["click","update:modelValue","change"],props:{modelValue:null,class:null,style:null},data:()=>({focused:!1}),methods:{onClick(e){if(!this.$attrs.disabled){let l;switch(this.modelValue){case!0:l=!1;break;case!1:l=null;break;case null:l=!0}this.$emit("click",e),this.$emit("update:modelValue",l),this.$emit("change",e),this.$refs.input.focus()}},onFocus(){this.focused=!0},onBlur(){this.focused=!1}},computed:{icon(){let e;switch(this.modelValue){case!0:e="pi pi-check";break;case!1:e="pi pi-times";break;case null:e=null}return e},containerClass(){return["p-checkbox p-component",this.class,{"p-checkbox-checked":!0===this.modelValue,"p-checkbox-disabled":this.$attrs.disabled,"p-checkbox-focused":this.focused}]}}};const c={class:"p-hidden-accessible"},s=["checked"],t=["aria-checked"];l.render=function(l,o,a,i,n,r){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.containerClass),onClick:o[2]||(o[2]=e=>r.onClick(e)),style:e.normalizeStyle(a.style)},[e.createElementVNode("div",c,[e.createElementVNode("input",e.mergeProps({ref:"input",type:"checkbox",checked:!0===a.modelValue},l.$attrs,{onFocus:o[0]||(o[0]=e=>r.onFocus()),onBlur:o[1]||(o[1]=e=>r.onBlur())}),null,16,s)]),e.createElementVNode("div",{ref:"box",class:e.normalizeClass(["p-checkbox-box",{"p-highlight":null!=a.modelValue,"p-disabled":l.$attrs.disabled,"p-focus":n.focused}]),role:"checkbox","aria-checked":!0===a.modelValue},[e.createElementVNode("span",{class:e.normalizeClass(["p-checkbox-icon",r.icon])},null,2)],10,t)],6)},module.exports=l;
+"use strict";var e=require("vue"),l={name:"TriStateCheckbox",emits:["click","update:modelValue","change","keydown","focus","blur"],props:{modelValue:null,inputId:null,inputProps:null,disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{updateModel(){if(!this.disabled){let e;switch(this.modelValue){case!0:e=!1;break;case!1:e=null;break;case null:e=!0}this.$emit("update:modelValue",e)}},onClick(e){this.updateModel(),this.$emit("click",e),this.$emit("change",e),this.$refs.input.focus()},onKeyDown(e){"Enter"===e.code&&(this.updateModel(),this.$emit("keydown",e),e.preventDefault())},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{icon(){let e;switch(this.modelValue){case!0:e="pi pi-check";break;case!1:e="pi pi-times";break;case null:e=null}return e},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":!0===this.modelValue,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]},ariaValueLabel(){return this.modelValue?this.$primevue.config.locale.aria.trueLabel:!1===this.modelValue?this.$primevue.config.locale.aria.falseLabel:this.$primevue.config.locale.aria.nullLabel}}};const a={class:"p-hidden-accessible"},i=["id","checked","tabindex","disabled","aria-labelledby","aria-label"],t={class:"p-sr-only","aria-live":"polite"};l.render=function(l,o,s,c,n,d){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.containerClass),onClick:o[3]||(o[3]=e=>d.onClick(e))},[e.createElementVNode("div",a,[e.createElementVNode("input",e.mergeProps({id:s.inputId,ref:"input",type:"checkbox",checked:!0===s.modelValue,tabindex:s.tabindex,disabled:s.disabled,"aria-labelledby":l.ariaLabelledby,"aria-label":l.ariaLabel,onKeydown:o[0]||(o[0]=e=>d.onKeyDown(e)),onFocus:o[1]||(o[1]=e=>d.onFocus(e)),onBlur:o[2]||(o[2]=e=>d.onBlur(e))},s.inputProps),null,16,i)]),e.createElementVNode("span",t,e.toDisplayString(d.ariaValueLabel),1),e.createElementVNode("div",{ref:"box",class:e.normalizeClass(["p-checkbox-box",{"p-highlight":null!=s.modelValue,"p-disabled":s.disabled,"p-focus":n.focused}])},[e.createElementVNode("span",{class:e.normalizeClass(["p-checkbox-icon",d.icon])},null,2)],2)],2)},module.exports=l;

package/tristatecheckbox/tristatecheckbox.esm.js

@@ -1,13 +1,28 @@
-import { openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, mergeProps } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, toDisplayString } from 'vue';
 
 var script = {
     name: 'TriStateCheckbox',
-    inheritAttrs: false,
-    emits: ['click', 'update:modelValue', 'change'],
+    emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
     props: {
         modelValue: null,
-        class: null,
-        style: null
+        inputId: null,
+        inputProps: null,
+        disabled: {
+			type: Boolean,
+			default: false
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -15,8 +30,8 @@ var script = {
         };
     },
     methods: {
-        onClick(event) {
-            if (!this.$attrs.disabled) {
+        updateModel() {
+            if (!this.disabled) {
                 let newValue;
 
                 switch (this.modelValue) {
@@ -33,17 +48,29 @@ var script = {
                     break;
                 }
 
-                this.$emit('click', event);
                 this.$emit('update:modelValue', newValue);
-                this.$emit('change', event);
-                this.$refs.input.focus();
             }
         },
-        onFocus() {
+        onClick(event) {
+            this.updateModel();
+            this.$emit('click', event);
+            this.$emit('change', event);
+            this.$refs.input.focus();
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter') {
+                this.updateModel();
+                this.$emit('keydown', event);
+                event.preventDefault();
+            }
+        },
+        onFocus(event) {
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -66,42 +93,56 @@ var script = {
             return icon;
         },
         containerClass() {
-            return ['p-checkbox p-component', this.class, {'p-checkbox-checked': this.modelValue === true, 'p-checkbox-disabled': this.$attrs.disabled, 'p-checkbox-focused': this.focused}];
+            return [
+                'p-checkbox p-component', {
+                    'p-checkbox-checked': this.modelValue === true,
+                    'p-checkbox-disabled': this.disabled,
+                    'p-checkbox-focused': this.focused
+            }];
+        },
+        ariaValueLabel() {
+            return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : (this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel);
         }
     }
 };
 
 const _hoisted_1 = { class: "p-hidden-accessible" };
-const _hoisted_2 = ["checked"];
-const _hoisted_3 = ["aria-checked"];
+const _hoisted_2 = ["id", "checked", "tabindex", "disabled", "aria-labelledby", "aria-label"];
+const _hoisted_3 = {
+  class: "p-sr-only",
+  "aria-live": "polite"
+};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass($options.containerClass),
-    onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event))),
-    style: normalizeStyle($props.style)
+    onClick: _cache[3] || (_cache[3] = $event => ($options.onClick($event)))
   }, [
     createElementVNode("div", _hoisted_1, [
       createElementVNode("input", mergeProps({
+        id: $props.inputId,
         ref: "input",
         type: "checkbox",
-        checked: $props.modelValue === true
-      }, _ctx.$attrs, {
-        onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus())),
-        onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur()))
-      }), null, 16, _hoisted_2)
+        checked: $props.modelValue === true,
+        tabindex: $props.tabindex,
+        disabled: $props.disabled,
+        "aria-labelledby": _ctx.ariaLabelledby,
+        "aria-label": _ctx.ariaLabel,
+        onKeydown: _cache[0] || (_cache[0] = $event => ($options.onKeyDown($event))),
+        onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
+        onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event)))
+      }, $props.inputProps), null, 16, _hoisted_2)
     ]),
+    createElementVNode("span", _hoisted_3, toDisplayString($options.ariaValueLabel), 1),
     createElementVNode("div", {
       ref: "box",
-      class: normalizeClass(['p-checkbox-box', {'p-highlight': ($props.modelValue != null), 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
-      role: "checkbox",
-      "aria-checked": $props.modelValue === true
+      class: normalizeClass(['p-checkbox-box', {'p-highlight': ($props.modelValue != null), 'p-disabled': $props.disabled, 'p-focus': $data.focused}])
     }, [
       createElementVNode("span", {
         class: normalizeClass(['p-checkbox-icon', $options.icon])
       }, null, 2)
-    ], 10, _hoisted_3)
-  ], 6))
+    ], 2)
+  ], 2))
 }
 
 script.render = render;

package/tristatecheckbox/tristatecheckbox.esm.min.js

@@ -1 +1 @@
-import{openBlock as e,createElementBlock as c,normalizeClass as s,normalizeStyle as l,createElementVNode as t,mergeProps as i}from"vue";var o={name:"TriStateCheckbox",inheritAttrs:!1,emits:["click","update:modelValue","change"],props:{modelValue:null,class:null,style:null},data:()=>({focused:!1}),methods:{onClick(e){if(!this.$attrs.disabled){let c;switch(this.modelValue){case!0:c=!1;break;case!1:c=null;break;case null:c=!0}this.$emit("click",e),this.$emit("update:modelValue",c),this.$emit("change",e),this.$refs.input.focus()}},onFocus(){this.focused=!0},onBlur(){this.focused=!1}},computed:{icon(){let e;switch(this.modelValue){case!0:e="pi pi-check";break;case!1:e="pi pi-times";break;case null:e=null}return e},containerClass(){return["p-checkbox p-component",this.class,{"p-checkbox-checked":!0===this.modelValue,"p-checkbox-disabled":this.$attrs.disabled,"p-checkbox-focused":this.focused}]}}};const a={class:"p-hidden-accessible"},u=["checked"],n=["aria-checked"];o.render=function(o,d,h,r,p,k){return e(),c("div",{class:s(k.containerClass),onClick:d[2]||(d[2]=e=>k.onClick(e)),style:l(h.style)},[t("div",a,[t("input",i({ref:"input",type:"checkbox",checked:!0===h.modelValue},o.$attrs,{onFocus:d[0]||(d[0]=e=>k.onFocus()),onBlur:d[1]||(d[1]=e=>k.onBlur())}),null,16,u)]),t("div",{ref:"box",class:s(["p-checkbox-box",{"p-highlight":null!=h.modelValue,"p-disabled":o.$attrs.disabled,"p-focus":p.focused}]),role:"checkbox","aria-checked":!0===h.modelValue},[t("span",{class:s(["p-checkbox-icon",k.icon])},null,2)],10,n)],6)};export{o as default};
+import{openBlock as e,createElementBlock as l,normalizeClass as a,createElementVNode as i,mergeProps as t,toDisplayString as o}from"vue";var s={name:"TriStateCheckbox",emits:["click","update:modelValue","change","keydown","focus","blur"],props:{modelValue:null,inputId:null,inputProps:null,disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{updateModel(){if(!this.disabled){let e;switch(this.modelValue){case!0:e=!1;break;case!1:e=null;break;case null:e=!0}this.$emit("update:modelValue",e)}},onClick(e){this.updateModel(),this.$emit("click",e),this.$emit("change",e),this.$refs.input.focus()},onKeyDown(e){"Enter"===e.code&&(this.updateModel(),this.$emit("keydown",e),e.preventDefault())},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{icon(){let e;switch(this.modelValue){case!0:e="pi pi-check";break;case!1:e="pi pi-times";break;case null:e=null}return e},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":!0===this.modelValue,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]},ariaValueLabel(){return this.modelValue?this.$primevue.config.locale.aria.trueLabel:!1===this.modelValue?this.$primevue.config.locale.aria.falseLabel:this.$primevue.config.locale.aria.nullLabel}}};const c={class:"p-hidden-accessible"},d=["id","checked","tabindex","disabled","aria-labelledby","aria-label"],n={class:"p-sr-only","aria-live":"polite"};s.render=function(s,u,r,b,p,h){return e(),l("div",{class:a(h.containerClass),onClick:u[3]||(u[3]=e=>h.onClick(e))},[i("div",c,[i("input",t({id:r.inputId,ref:"input",type:"checkbox",checked:!0===r.modelValue,tabindex:r.tabindex,disabled:r.disabled,"aria-labelledby":s.ariaLabelledby,"aria-label":s.ariaLabel,onKeydown:u[0]||(u[0]=e=>h.onKeyDown(e)),onFocus:u[1]||(u[1]=e=>h.onFocus(e)),onBlur:u[2]||(u[2]=e=>h.onBlur(e))},r.inputProps),null,16,d)]),i("span",n,o(h.ariaValueLabel),1),i("div",{ref:"box",class:a(["p-checkbox-box",{"p-highlight":null!=r.modelValue,"p-disabled":r.disabled,"p-focus":p.focused}])},[i("span",{class:a(["p-checkbox-icon",h.icon])},null,2)],2)],2)};export{s as default};

package/tristatecheckbox/tristatecheckbox.js

@@ -4,12 +4,27 @@ this.primevue.tristatecheckbox = (function (vue) {
 
     var script = {
         name: 'TriStateCheckbox',
-        inheritAttrs: false,
-        emits: ['click', 'update:modelValue', 'change'],
+        emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
         props: {
             modelValue: null,
-            class: null,
-            style: null
+            inputId: null,
+            inputProps: null,
+            disabled: {
+    			type: Boolean,
+    			default: false
+            },
+            tabindex: {
+                type: Number,
+                default: 0
+            },
+            'aria-labelledby': {
+                type: String,
+                default: null
+            },
+            'aria-label': {
+                type: String,
+                default: null
+            }
         },
         data() {
             return {
@@ -17,8 +32,8 @@ this.primevue.tristatecheckbox = (function (vue) {
             };
         },
         methods: {
-            onClick(event) {
-                if (!this.$attrs.disabled) {
+            updateModel() {
+                if (!this.disabled) {
                     let newValue;
 
                     switch (this.modelValue) {
@@ -35,17 +50,29 @@ this.primevue.tristatecheckbox = (function (vue) {
                         break;
                     }
 
-                    this.$emit('click', event);
                     this.$emit('update:modelValue', newValue);
-                    this.$emit('change', event);
-                    this.$refs.input.focus();
                 }
             },
-            onFocus() {
+            onClick(event) {
+                this.updateModel();
+                this.$emit('click', event);
+                this.$emit('change', event);
+                this.$refs.input.focus();
+            },
+            onKeyDown(event) {
+                if (event.code === 'Enter') {
+                    this.updateModel();
+                    this.$emit('keydown', event);
+                    event.preventDefault();
+                }
+            },
+            onFocus(event) {
                 this.focused = true;
+                this.$emit('focus', event);
             },
-            onBlur() {
+            onBlur(event) {
                 this.focused = false;
+                this.$emit('blur', event);
             }
         },
         computed: {
@@ -68,42 +95,56 @@ this.primevue.tristatecheckbox = (function (vue) {
                 return icon;
             },
             containerClass() {
-                return ['p-checkbox p-component', this.class, {'p-checkbox-checked': this.modelValue === true, 'p-checkbox-disabled': this.$attrs.disabled, 'p-checkbox-focused': this.focused}];
+                return [
+                    'p-checkbox p-component', {
+                        'p-checkbox-checked': this.modelValue === true,
+                        'p-checkbox-disabled': this.disabled,
+                        'p-checkbox-focused': this.focused
+                }];
+            },
+            ariaValueLabel() {
+                return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : (this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel);
             }
         }
     };
 
     const _hoisted_1 = { class: "p-hidden-accessible" };
-    const _hoisted_2 = ["checked"];
-    const _hoisted_3 = ["aria-checked"];
+    const _hoisted_2 = ["id", "checked", "tabindex", "disabled", "aria-labelledby", "aria-label"];
+    const _hoisted_3 = {
+      class: "p-sr-only",
+      "aria-live": "polite"
+    };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass($options.containerClass),
-        onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event))),
-        style: vue.normalizeStyle($props.style)
+        onClick: _cache[3] || (_cache[3] = $event => ($options.onClick($event)))
       }, [
         vue.createElementVNode("div", _hoisted_1, [
           vue.createElementVNode("input", vue.mergeProps({
+            id: $props.inputId,
             ref: "input",
             type: "checkbox",
-            checked: $props.modelValue === true
-          }, _ctx.$attrs, {
-            onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus())),
-            onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur()))
-          }), null, 16, _hoisted_2)
+            checked: $props.modelValue === true,
+            tabindex: $props.tabindex,
+            disabled: $props.disabled,
+            "aria-labelledby": _ctx.ariaLabelledby,
+            "aria-label": _ctx.ariaLabel,
+            onKeydown: _cache[0] || (_cache[0] = $event => ($options.onKeyDown($event))),
+            onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
+            onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event)))
+          }, $props.inputProps), null, 16, _hoisted_2)
         ]),
+        vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($options.ariaValueLabel), 1),
         vue.createElementVNode("div", {
           ref: "box",
-          class: vue.normalizeClass(['p-checkbox-box', {'p-highlight': ($props.modelValue != null), 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
-          role: "checkbox",
-          "aria-checked": $props.modelValue === true
+          class: vue.normalizeClass(['p-checkbox-box', {'p-highlight': ($props.modelValue != null), 'p-disabled': $props.disabled, 'p-focus': $data.focused}])
         }, [
           vue.createElementVNode("span", {
             class: vue.normalizeClass(['p-checkbox-icon', $options.icon])
           }, null, 2)
-        ], 10, _hoisted_3)
-      ], 6))
+        ], 2)
+      ], 2))
     }
 
     script.render = render;

package/tristatecheckbox/tristatecheckbox.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.tristatecheckbox=function(e){"use strict";var c={name:"TriStateCheckbox",inheritAttrs:!1,emits:["click","update:modelValue","change"],props:{modelValue:null,class:null,style:null},data:()=>({focused:!1}),methods:{onClick(e){if(!this.$attrs.disabled){let c;switch(this.modelValue){case!0:c=!1;break;case!1:c=null;break;case null:c=!0}this.$emit("click",e),this.$emit("update:modelValue",c),this.$emit("change",e),this.$refs.input.focus()}},onFocus(){this.focused=!0},onBlur(){this.focused=!1}},computed:{icon(){let e;switch(this.modelValue){case!0:e="pi pi-check";break;case!1:e="pi pi-times";break;case null:e=null}return e},containerClass(){return["p-checkbox p-component",this.class,{"p-checkbox-checked":!0===this.modelValue,"p-checkbox-disabled":this.$attrs.disabled,"p-checkbox-focused":this.focused}]}}};const s={class:"p-hidden-accessible"},l=["checked"],t=["aria-checked"];return c.render=function(c,i,o,a,n,r){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.containerClass),onClick:i[2]||(i[2]=e=>r.onClick(e)),style:e.normalizeStyle(o.style)},[e.createElementVNode("div",s,[e.createElementVNode("input",e.mergeProps({ref:"input",type:"checkbox",checked:!0===o.modelValue},c.$attrs,{onFocus:i[0]||(i[0]=e=>r.onFocus()),onBlur:i[1]||(i[1]=e=>r.onBlur())}),null,16,l)]),e.createElementVNode("div",{ref:"box",class:e.normalizeClass(["p-checkbox-box",{"p-highlight":null!=o.modelValue,"p-disabled":c.$attrs.disabled,"p-focus":n.focused}]),role:"checkbox","aria-checked":!0===o.modelValue},[e.createElementVNode("span",{class:e.normalizeClass(["p-checkbox-icon",r.icon])},null,2)],10,t)],6)},c}(Vue);
+this.primevue=this.primevue||{},this.primevue.tristatecheckbox=function(e){"use strict";var l={name:"TriStateCheckbox",emits:["click","update:modelValue","change","keydown","focus","blur"],props:{modelValue:null,inputId:null,inputProps:null,disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{updateModel(){if(!this.disabled){let e;switch(this.modelValue){case!0:e=!1;break;case!1:e=null;break;case null:e=!0}this.$emit("update:modelValue",e)}},onClick(e){this.updateModel(),this.$emit("click",e),this.$emit("change",e),this.$refs.input.focus()},onKeyDown(e){"Enter"===e.code&&(this.updateModel(),this.$emit("keydown",e),e.preventDefault())},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{icon(){let e;switch(this.modelValue){case!0:e="pi pi-check";break;case!1:e="pi pi-times";break;case null:e=null}return e},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":!0===this.modelValue,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]},ariaValueLabel(){return this.modelValue?this.$primevue.config.locale.aria.trueLabel:!1===this.modelValue?this.$primevue.config.locale.aria.falseLabel:this.$primevue.config.locale.aria.nullLabel}}};const a={class:"p-hidden-accessible"},i=["id","checked","tabindex","disabled","aria-labelledby","aria-label"],t={class:"p-sr-only","aria-live":"polite"};return l.render=function(l,s,o,c,n,d){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.containerClass),onClick:s[3]||(s[3]=e=>d.onClick(e))},[e.createElementVNode("div",a,[e.createElementVNode("input",e.mergeProps({id:o.inputId,ref:"input",type:"checkbox",checked:!0===o.modelValue,tabindex:o.tabindex,disabled:o.disabled,"aria-labelledby":l.ariaLabelledby,"aria-label":l.ariaLabel,onKeydown:s[0]||(s[0]=e=>d.onKeyDown(e)),onFocus:s[1]||(s[1]=e=>d.onFocus(e)),onBlur:s[2]||(s[2]=e=>d.onBlur(e))},o.inputProps),null,16,i)]),e.createElementVNode("span",t,e.toDisplayString(d.ariaValueLabel),1),e.createElementVNode("div",{ref:"box",class:e.normalizeClass(["p-checkbox-box",{"p-highlight":null!=o.modelValue,"p-disabled":o.disabled,"p-focus":n.focused}])},[e.createElementVNode("span",{class:e.normalizeClass(["p-checkbox-icon",d.icon])},null,2)],2)],2)},l}(Vue);

package/utils/Utils.d.ts

@@ -43,8 +43,8 @@ export declare class DomHandler {
     static isVisible(el: HTMLElement): boolean;
     static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
     static isClient(): boolean;
-    static getFocusableElements(el: HTMLElement): any[];
-    static getFirstFocusableElement(el: HTMLElement): any;
+    static getFocusableElements(el: HTMLElement, selector?: string): any[];
+    static getFirstFocusableElement(el: HTMLElement, selector?: string): any;
     static isClickable(el: HTMLElement): boolean;
     static applyStyle(el: HTMLElement, style: any): void;
     static isIOS(): boolean;
@@ -66,6 +66,7 @@ export declare class ObjectUtils {
     static removeAccents(str: any): string;
     static isEmpty(value: any): boolean;
     static isNotEmpty(value: any): boolean;
+    static isPrintableCharacter(char: string): boolean;
 }
 
 export declare namespace ZIndexUtils {